## Tables Just Got WAY Better - 20220722
this is just for grouping 69 lines I'm sorry 79 lines before we wait where's the cost 90 lines before we get to the actual code so react table is now called tan stack table and it's going to ship with all it like all angular coming soon yeah you want to work on yellow adapter come talk to me okay no one wants to work on an angular adapter Tanner is a wonderful open source developer and a good friend he built react query react table and a bunch of other super helpful libraries in the react ecosystem I am really hyped about this talk a bunch of people have been telling me to react to it the the twist that I'm going to spoil now is he's moving away from his Solutions being framework specific for react and trying to build Primitives that other Frameworks can consume and have adapters built for so with the table he wants it to work in svelte uh react view solid and every other like upcoming and modern major framework same with react query with the new tan stack query stuff this talk is focused a lot on that and I'm really excited for it so without further Ado let's see what Tanner has to say what a ruined dramatic moment all right I'm excited to be here I have a lot to cover I'm jet lagged and tired but like I gotta bring the energy so help me out like like we got to bring the energy okay uh I have some T-shirts I gotta throw out really quick and some people who are going to help me so like let's just get to it uh here take that one too anybody want a t-shirt I'm trying to fix the levels there's not much I can do because that's the video itself [Applause] yeah it was exactly the person perfect I'm out I'm sorry that's it all right I hope you like Jurassic Park uh you might not by the end of my talk because why didn't I get a shirt Tanner um my name is Tanner Lindsley and I'm here because I love react and I love open source and I'm kind of addicted to it it's uh it's a bad addiction but it's a lot of fun normally I'd be talking about react query today I'm not going to do that I'd rather talk about uh take it back old school the very first Library I ever built that kind of took off and that was react table um I want to talk about the last five years of reactable and some things that I've learned uh through this crazy process of building an open source library and maybe you can apply some of it to what you do or maybe not and it's just a fun talk but uh we got to go all the way back even further to 2015. I was invited to co-found a startup called nozzle with some friends and nozzle is uh basically Google but against Google we are reverse crawling Google search results at scale talking like billions of results nozzles one of those products that I absolutely should be using and I'm not and I need to get on that so saying this here is a reminder also yeah his slide transitions are nuts well today we're measuring them and extracting out all the data and just shutting that into bigquery believe it or not and serving it back to seos and marketers who want that data it's pretty cool part of that product is that we have to do a lot of data visualization a lot of querying and of course a lot of tables kind of coming together now uh I wish our tables in 2015 looked like this they did not we were working with uh you know a little bit lesser Tech here uh not quite like this but this is where it all starts right everybody starts at the eight that's such a good scene oh the dinosaur like Jurassic Park scene with the uh so tasteful HTML5 it really is a great element uh try building a table with divs and you'll appreciate it we needed to ship and sell and just you know hopefully like uh zweizak teller was able to teach us like have an opportunity to improve so it was like go go as fast as we could we're using angular at the time [Music] and we were using tools like NG grid and UI grid which honestly were fantastic they were built in AEO like four angular great integration and eventually got to use AG grid which is also an amazing tool there we go we got some AG grid fans here so something happened we weren't expecting if I recall AG grid actually sponsors him now which is super cool expecting uh this framework shows up out of nowhere and it's like this is it like this is where you need to be we're like okay let's do it investment time we moved everything over to react I'm talking like everything in like three weeks and then we got there and we're like crap we don't have a data grid library and I was like wait wait wait wait AG grid has a react adapter we're like we are saved and guess what we were like we were able to migrate and just keep using AG grid and it was honestly super cool yeah three weeks is nuts for a full rewrite from anything really but from angular to react that's nuts good [ __ ] but we did run into some little issues here and there we were working with a react component you know let's just react everything's just components but something was interesting under the hood we noticed AG grid was not rendering using react um it was shipping with its own custom Dom manipulation engine which explained why it was so crazy fast right but in the process of shipping that crazy fast engine react kind of got burned a little bit there wasn't the level of integration we were looking for now I'm really happy that as of like today AG grid has like an integrated react render and it's amazing Nile from AG grade is going to talk about it like here in like few minutes so stick around if you want to hear about that this is way back in 2017 like that did not exist yet and we needed a cable Library immediately obviously I started working on react table it was a single component it was 100 react and I was able to offload like a lot of stuff to react all the rendering the State Management I mean we are still using uh this dot set state but it was pretty good still uh we even had smaller bundles because react was doing so much for us and we released it like thinking it was just gonna kind of be whatever and react table started to grow people wanted tables and react to work together and so while we were loving the success that we were having over on the npm downloads chart a storm was brewing on the GitHub repo in the form of just issues tons of issues we were getting inundated with issues and they all looked like this can I move pagination give me custom props can I use my own row component can I use whatever CSS and JS library is out this week like can I do anything with the markup and the reality is that I I couldn't answer any of those questions I didn't have you know the options to do that uh honestly it was just this huge pile of crap like I it was it was terrible and I did the only thing that I knew how to do and that's add more props any guesses how many props I added to react table version six come on 137. oh God this is such a good framing this is this is a phenomenal talk the slides are great the storytelling is great there's like a very clear narrative to follow here and this hits really hard this is a good thing to to make a slide out of as you describe the story props to do everything they're all right there like to to like customize every little thing about you could say I'm giving a lot of props to Tanner right now but I'm just just a single component I was drowning I I honestly was drowning luckily I didn't die uh but thankfully while I was drowning in my misery my friend Kent was over building a new library yeah 137 props without typescript oh God yeah that's very scary great called downshift downshift was a library for building drop downs and autocompletes but it was really interesting it didn't render any markup for you it just gave you the state gave you the API and you had to hook it up yourself I saw this I was like this is the answer this is how I'm going to solve this problem immediately I delve into react table source code I was like rip out all this stuff we're gonna go with this API approach you know like invert control to the user to render everything themselves some people were like you're gonna make me render my own table I'm like yeah I am because it's just it's gonna help just believe in me I promise so I'm almost done writing this new version the react core team is like boom hooks and seriously it just killed everything like functions as children render props I was like yes this like validated the exact approach I was trying to take and so I was able to take this uh this dinky component has you know Sheldon as a function thing you turn it into this awesome use table hook where you could just return whatever markup you wanted it was fantastic and we launched it I launched it like ASAP as soon as it was done react table version seven was it was uh off the hook you can't help himself because of this inversion of control I was able to close like 95 of the GitHub issues that we had basically answering everybody with the same exact thing you want to move the pagination you do it do it yourself I dare you and uh I later learned that this uh this pattern has a name it's called headless UI and headless UI is not the Tailwind uh product that you're thinking of but it's a conceptually it is uh you know it's a process of taking all of your logic and your handlers everything that kind of makes up the logical parts of your application and separating them out from your markup and your Styles I think that this encourages like a lot more capability and version of control reusability I think it I think it results in higher quality code almost in the same way that moving your state into a state machine does so we launched version seven and it was great took a little bit of time for people to you know convince people that they had to write their own tables but once they tasted it they loved the power okay that went on for two years and I even started to see some projects like GitHub issues the new beta is using react table under the hood to render all their tables but they're using their own components it's all headless so they get to keep using their component library and all their Styles and everything they're used to using I saw this and I was just like I made it react table is done checking out I'm gonna go build react query I basically did that uh open source has a way though of kind of screwing with you you're never done with open source and neither are your users um oh I really wish I had sound for this next slide but I'm pretty sure uh pairing my pictures would like shut down the stream anyways I'm over here enjoying my open source and out of nowhere it's like boom typescript users come out of nowhere I'm sorry Tanner I I wasn't going to say it but I will now because it's here the reason I never used react table is it didn't have typescript definitions built in and the community ones weren't great but that's why we're here we're hearing all about the solution [Music] uh it's a true story it's like closing issues and like hiding like locking things like stay away right if anybody's ever done open source like you have typescript coming at you it is scary like if you don't know typescript you're just like I don't know what you're talking about I'm sorry somebody else can do the types I'm just going to keep dinking around here I actually had a moment in the Discord yesterday that was like this somebody was asking a question about like I think it was custom type definitions for a reusable react query hook that used the Super Bass SDK and I got another wonderful reminder that I'm not actually good at typescript I'm quite good at JavaScript I would say I'm very good at JavaScript even and typescript is very helpful for making sure I don't make dumb mistakes in my JavaScript but the actual typescript part like the crazy type definitions with the super deep generics and all those things are well beyond my pay grade as a CEO certainly I do not get a lot of the crazier type stuff I can make a weird generic and I can usually force it to do what I expect but it takes me a lot of effort and I'm not good at it something I've been trying to push a little harder as like a big typescript Advocate is that there's a burden that it lifts off of the user-facing dev like it's a huge burden to worry about the thing that you're calling the function with always being correct but man I the burden wasn't eradicated with typescript the burden was shifted to the framework maintainers and the library creators who now have to supply type definitions to describe correct behavior for the consumers the magic of typescript is almost entirely in like user facing devland and that has made it a lot easier for me to build an application that ships to hundreds of thousands if not millions of users with confidence that it's correct but that confidence isn't coming from typescript so much as the types that are provided by the pieces we're consuming and it's important to recognize that as much as typescript has made most of our lives here easier the framework maintainers like the verses and the Tanners of the world certainly poor Ryan carniato over on solid.js as well it has made life much harder for all of them and make sure you shout out your favorite framework maintainers that have good type definitions like the trpcs and the now react tables and react query certainly the maintainers of those things are doing a lot of heavy lifting to make sure we can have the best most correct experience possible as we build applications with the software that they made so shout out all those maintainers who are lifting the burden of typescript to allow us as users of typescript to have an incredible experience yeah jstocks is not a good substitute totally with yokujo if you're building software that's facing users and not like packages facing Developers it is almost inexcusable to not use typescript at this point but that's another rant for another time I had no idea what I was doing but it was even scarier because I knew typescript was almost inevitable like it was coming for me and at some point I was going to have to have a reckoning I resisted it so hard I even bashed on it on Twitter you know we all do it everybody raise your hand if we all do it but I started to notice that libraries using typescript generally were higher quality more than mine they had less issues and honestly the developers working on them and using typescript it was imposter syndrome like they were just rock stars I don't know how they were doing it uh eventually I just I had to I had to accept it it was time to level up and it was a difficult decision because it meant slowly down to learn something new and scary but I embraced it full scale typescript really isn't I want to shout out Tanner in particular for this he went from very unsure of typescript to all in on it in like a six month window and I watched it happen from the outside it was so cool to see him realize specifically in like user land how beneficial it was and realized he had to eat that cost because it was so powerful what it enabled and yeah massive respect Tanner was one of the I don't want to say latest but within like the big Library folk that like have a presence in the open source web world was later to the typescript bandwagon but didn't let that slow him down at all there's a lot of people who still just are dragging their feet and yeah shout out Tanner for jumping on the opportunity to be wrong and grow because that's rare especially for maintainers that are doing things as big and important as he is full scale okay I'm gonna rewind again because somebody asked a good question uh what's this work-life balance like surprisingly good Tanner is very no [ __ ] with like I'm with my family I'm gonna hang with them he's a phenomenal dad I have had many a time where we were like talking and then he had to run off to go help the family with stuff like that like he puts all that first and foremost and a lot of the open source work he does is specifically to help him be more effective at his job so because of those things in particular I think he how do I put it I think that he has found a really good balance for himself and he's more focused on balancing between work and OSS and doesn't ever compromise on the family side he's if you're looking for like a role model of balancing those things he's up there for sure don't let it be me I don't have a work-life balance I'm I have a work work balance where I have like five jobs don't don't emulate me if you want to be happy emulate me if you want to be crazy and build cool [ __ ] too fast he is a much better balance but I embraced it full scale typescript really is amazing and I promise this is not a typescript talk uh but maybe like subliminal messaging I started rewriting reacts table version eight two years ago with typescript and I was like I'll have a new version out in like uh two weeks like it would be like an alpha two weeks it'll be easy no way I did not know what I was doing I had jumped into the deep end and I had learned that writing libraries and typescript this is like super advanced stuff I didn't even know how to use typescript like as an app developer yet and I was trying to write a live this is like learning how to use scissors in open heart surgery like I can't even imagine going in this deep on the deep end of typescript to get started and I guess shout out 12 Tanner you went in hard and you came out stronger and I had some awesome people come to my rescue offered their time and oh towards helping me I did not deserve this oh I'm gonna hide myself so you can see Ethan that button there yeah shadowed Ethan Matt Brandon Dominique and Alex [ __ ] Tanner spelled my last name wrong there's an e at the end I can't complain I'm still so hyped I yeah uh Karen I only started chatting like a bit under a year ago it's so cool to like ah ah guys this talk was already so cool I don't deserve to be in this thank you Tanner you learn typescript in all the various ways like looking at their patterns live calls with everybody support through maintenance this this is my typescript team and I I just wanted to thank them publicly because they're awesome but they all basically said this yeah thank you thanks actually this is a good time to announce it I actually have Matt coming on the show next or on Wednesday so if it'll be a much earlier show I'm aiming to be live around noon PST instead of the usual two to three so if you want to hear us rant all about typescript super excited to have Matt on I still have to write topics for that so you need to hop on that but yeah if you want a third of the tan stack typescript team want to hear what we have to say be here Wednesday they all basically said the same thing though hold on your butts because library typescript is crazy oh also generics they're gonna rock your world like they're gonna make you cry and then they're gonna make you so happy they're so cool in fact let's talk about generics really quick not whoop said the Ronnie Mullen of typescript that bio might be a non-in significant part of why I'm bringing him on so cool in fact we're taking something that would be typed statically like a string and giving your types variables so that you can pipe those types into your system and back out to your users this is a really simple function but you can also use multiple generics to extract information out of types and provide it back to the user in form of like autocomplete right everybody loves that about vs code whether you're typescript user or not Library generics are on another level right like look at the create column function for react table like that's 10 generics and I'm okay let's let's run that through prettier uh okay that's actually what we're going to see right and so okay we've got some options and a column and I don't know if anybody noticed but like we're not even like returning we're not even doing the implementation yet and this is Imagine like okay there's at least 30 functions in react table and they all consume about the same amount of generics does anybody know how many lines of code that is oh God that's like five oh God I'm baited let's check the source let's see the table color types Jesus this is just all the imports and exports for them okay let's go to a random Feature Feature grouping oh God oh God this is just for grouping 69 lines sorry 79 lines before we wait where's the cost 90 lines before we get to the actual code yeah this is for one feature yeah this being written by hand is nuts but also this is remember the thing I just said about the heavy lifting happening in library land here's your heavy lifting in library land this [ __ ] sucks to write and shout out number 15 at this point the Tanner for the work here this is why typescript is so good because someone else is doing the work for us the code it's lines of types this was something that I had a hard time grasping with typescript like why am I doing this right yeah the implementation wasn't even done so I was pretty sad but I had this idea anybody else run into this situation with JavaScript it's like holy cow that's a lot of arguments what do we do you put it into an options bag boom options bag it's bagging it so we can do the same thing with generics we can take all these generics pull them out into a generic type and reuse it as a variable this is this is something very new and I haven't seen it a lot in the wild I hope it pans out because it's amazing after making this change I was able to access all of my generics like a Canon JavaScript object it's called generic Maps and I don't know why it's called generic Maps I think it should be called generic bags but uh I was able to reduce the source code of reacts table back oh we were looking at the 70 reduced version we're not even seeing the worst of it I mentioning this pattern uh I'll probably have to talk more about this in like a typescript talk but this was the point where I started feeling confident I was like okay I I'm I'm dangerous but I and I know a little bit of generics like I'm feeling good all the great things about typescript started coming out all the refactoring the less bugs you know better design I was able to take all of the things that are normally just stuck in your brain that are going to fizzle away if you walk away for two weeks from your project shove them in a typescript and just like sleep at night because I'm not remembering this is such an underrated part of typescript I you all know me I write a lot of code I have I actually make it a point to go through and archive and delete old repos that I'm never going to touch I have a 113 repositories right now most of these I also clean up Forks so there's like three Forks in there the rest are things I started I write a lot of code and most of it is bad most of it is wrong and sometimes I need to touch it again six months to two years later one of the best parts about typescript even as a solo Dev and I hear this a lot which is I'm a solo Dev do I really need typescript I know what I'm doing yeah but do you know what you were doing six months ago because I don't I don't have that type of memory especially at like the amount of [ __ ] I am building I can't remember exactly how I did any of these projects so it'd be really nice if I can get a red squiggly line when I'm revisiting something two years later and do something wrong I have projects in here I have some big projects in here Chrome Tana is probably the biggest this was a huge Chrome extension back in the day I don't think this link works anymore yeah it doesn't uh this Chrome extension still has an insane number of users 100 000 still which is hilarious because I haven't touched this in years but this project is an Old Jank webpack thing and doesn't use typescript actually I might have started no it's still JavaScript and I moved to the preact recently ish and somebody fixed Bing on it for me but like I haven't actually touched this like meaningfully for a very long time I did a V3 in 2020 and never finished it before then it was 2017 I never shipped the updates and that's because it's in JavaScript and I don't know how it works anymore and if I make a change it's going to break I am certain of that I don't want to worry about that JavaScript is guaranteeing that somebody in the future is going to either break something or choose not to touch something and I am disinterested in that it's just on a personal level as such even if if your reason for not using typescript is you're a solo Dev you're also what you're saying there and what I'm hearing is I throw out my code when I'm done because if you've never wished you had typescript on a project that you're revisiting in six months then none of your projects have ever been worth revisiting and at that point sure go use go use brain [ __ ] because nobody's using your stuff you're not touching it after go live in your world have fun anyways remembering like you know dependency trees of my code I think it's a necessity there's so much more we need to talk about typescript I just can't do it it's a winning technology uh take it from someone who was a full 180 from last year you need to try it you need to use it not a lot of time left but there's one more thing I want to talk about uh that is a little bit of uh you know battle story with reactable but it's also the future um I just want to reassure everybody right now I promise I love react okay I'm here to stay but we would all be very naive to think that react is some Superior species and it's the only thing capable of producing amazing apps and UI right I know we love it but we need to take it off the pedestal once in a while there are other Frameworks out there solid view spell the angular in the corner is hilarious I rant time rant time I'm gonna preempt him a little bit on this one something I talk about a lot is the modularity of react I think that we're in the midst of a modular design Revolution that react helped kickstart originally with components where all of a sudden I could npm install material UI and have components with behaviors have components with behaviors contained in a way that I could reuse them and distribute them to be reused across one or even many code bases components gave us a really good way to take a part of our user interface and Abstract it so it can be reused made into a generic and so much more I think hooks did the same thing for state hooks are why react has stuck around longer with more hype than any UI framework or solution before it hooks let you abstract data and state the same exact way components are abstracting UI and logic but just the logic not the UI I think that abstraction has let us do some really cool things the same way material UI was trivial to add to react react query became trivial to add as well through the hooks like abstraction pattern since then lots of other Frameworks have built their own store Solutions hook like solutions to allow for logic to be abstracted but not a lot of developers have taken advantage of it react is still the solution you go to if you're looking for modular libraries and solutions to build up what you need specifically view is trying to catch up with next svelte is kind of trying to catch up with things like svelt kit and the felt storage API but react is so far ahead having multiple solutions for SSR everything from fresh to next JS to remix to fight plugin SSR which should work for other things too but is react focused at the time react has so many state solutions from zestan to jodye to recoil to obviously Redux to mobx all of these are due to how modular and simple at its core react is these other Frameworks try to solve more problems than react does and in doing such have locked the community out of solving those problems in competitive new and interesting ways but the tide has started to turn due to how powerful hooks are when I do this rant and I've done this rant a few times now one of my go-to examples has always been react query because it is such a powerful example of a common problem which is interfacing with asynchronous code in asynchronous web framework and solves it super elegantly because hooks provided the right abstraction to do such I love react query for that reason and for a long time I have asserted that react is the place where you can do things like that Tanner the person who did that now disagrees and is going out of his way to make as many of his Solutions work with as many other Frameworks as possible because he doesn't want to contribute to the everybody using react Focus he wants to allow developers to have that quality of tooling regardless of which framework they choose and I have a ton of respect for that I am seeing specifically in like solid and to an extent in felt land that the abstractions are at a point where you can build good stuff that is generic across Frameworks view is going to be harder to convince me angular you never will but it's awesome to see Tanner proving Me Wrong by getting his react focused Solutions out of react land let's let him talk more about it apps and UI right I know we love it but we need to uh take it off the pedestal once in a while there are other Frameworks out there solid view spell all right come on in yeah you know I think that they deserve tables as well I think they deserve a great table that I could build and react and you know in the time-honored tradition of pushing the limit at the last uh last moment I decided to take uh react table and go agnostic so react table is now called tan stack table and it's going to ship with all it like all angular coming soon angular yeah you want to work on the angular adapter come talk to me okay no one wants to work on an angular adapter and Kevin Styles and that makes up a lot of the differences between a lot of our Frameworks out of the gate and it turns out we just needed a few adapters to sit in the middle kind of wire up the internals of reactivity and context uh this is the solid table adapter that's it and all that's really cool basically look exactly the same even react so the last five years have been really interesting with uh transact table two years of it devoted just to implementing and learning typescript it was crazy uh there's really only one thing left to do should we do it is he gonna push it oh my God yes oh my God all right we're not even connected to Wi-Fi I'll do it after the talk it's okay there's also some other things I want to talk about really quick uh he's the best 30 days we're going to be converting over to tan stack query virtual and Ranger and the rest of the libraries are coming soon um I wanted to really thank everybody who's helped out with these projects anybody virtual there's virtual's heavily underrated it's a virtual list for every framework now so if you have a bunch of data and you don't want to render a 2 000 long item list it lets you render the things that are visible and have the rest ready to go it's super cool that that's generic now that's that felt like something that was very framework specific and see you can prove me wrong was really cool on that there's a lot of maintainers and contributors working especially in other Frameworks and I think that's really awesome also all of my GitHub sponsors wouldn't have been able to do it without them um I wanted to talk about one sponsor it's brand new in particular that you wouldn't expect but AG I love when all of the things I start with and like say just to like add context he puts them all in I didn't need to be here I did not need to react to this Tanner I love you but I could have just watched this and then told my audience to watch it I'm just sitting here smiling I don't know how much value I'm bringing but this is a great talk have been viewed as competitors you know it turns out that uh that's not really the case they're so very different um they solve uniquely different problems with very different paradigms uh depending on your use case you might want to use either one just like I at one point used AG grid and loved it we came to this realization and we knew that it was time to work together so uh today I'm announcing that AG grid is the first 10 stack OSS partner with tan stack table and together we're going to work as hard as we can to educate everybody in the ecosystem regardless of framework how to build better tables when to use each tool and we're going to share as much knowledge as we can across this Chasm the real competition here is tan stack and AG grid versus retool and make sure that we can all be friends so you can read more about it on tanstock.com that's it [Applause] what a phenomenal talk fantastic work tenor yeah so too much else to say thanks y'all for watching that I as you know I'm a huge fan of Tanner and it's so cool seeing him prove me wrong directly constantly both in a talk and in his open source work I couldn't be more hyped on the development of tan stack and yeah if you're not already subscribed fix that and I know you're not because over 60 of my YouTube viewers are not subscribed or are not subscribers yet so hit that red button help us a lot in the algorithm also leave a comment letting me know what I should talk about more in future videos helps me a ton as I plan ahead for my streams and try and get my content good and ready ahead of time thank you again so much and shout out to Dez for all the editing it's been killing it




## Tailwind Isn’t Bootstrap #shorts - 20220822
i am pretty well known for my love of tailwind what i don't think i'm known for as much is my history with other ui framework when i started doing web development the go-to solution was bootstrapped so we're gonna make quick venn diagram so what are the types of component libraries i think it's very important to recognize where the tools you're looking at using and comparing fall on a chart like this the thing that i keep having come up that has been increasingly frustrating to me is material ui and people keep asking me why am i using tailwind and not using mui or why would i use tailwind when it's basically just bootstrap when i could use mui instead do you see why i get confused when people say tailwind is like bootstrap so you should use my ui instead do you see why this line of questioning annoys me it does not make any sense at all i picked tailwind because i want to do some css i want to have a style system that i own i want to build my own style system using tailwind bootstrap is a style system itself




## Tailwind V4 Is Bigger Than Expected 👀 - 20240308
open sourcing our progress on tailin CSS version 4 from Adam I'm excited about this I've been hearing really good things about tailin V4 specifically that it's leaning more into actual CSS standard stuff and I'm curious what that looks like so let's take a look last summer at tail and connect I shared a preview of oxide a new high performance engine for Tailwind we've been working on designed to simplify the developer experience and take advantage of how the web platform has evolved in recent years the new engine was originally going to ship as a version 3.x release but even though we were committed to backwards compatibility this feels so clearly like a new generation of the framework that it deserves to be a version for love you Adam please let me do a copy pass in the future this is a a digest of a sentence still early and we've got a lot of work to do but today we're open- sourcing our progress and tagging the first public version 4 Alpha release so you can start experimenting with it and help us get to a stable release later this year there is not a single period until the end of this and there is not a single period till the end of that that's a impressive level of run-ons designers not copy editors I'll try to keep a brief to save some of the excitement for the stable release but if you like to play with very early and experimental stuff there should be plenty of information here to get you you going a new engine built for Speed if you're wondering how this engine is built for Speed it's rust it's all rust this is a quick overview from when oxide was originally announced when it was again still planned for version 3 I think it's really useful to see it in this context though because as they say here oxides a lot of different pieces but they all boil down to two goals improve performance and simplifying the developer experience we're making Tailwind more of an all-in-one CSS processing tool by integrating lightning CSS you're already familiar with lightning it's an extremely fast CSS pyur trans Transformer bundler and minifier you kind of think of it almost like the biome and Rome projects or even bun but for CSS trying to do all of the junk you need to go from a nice fun developer experience of CSS to actual good production code even compared to es build which is very fast for processing CSS lightning is somehow even faster lightning CSS let you use modern CSS features and future syntax today so you can put in this fancy color syntax with a helper like that and it gets generated into all of these different things for the different enironment that have different expectations these things are so hard to manage when you're targeting a lot of different browsers Lightning's really good it's been more and more hyped recently and seeing Tailwind standardized on it is super exciting it's also really good at minification the 20 KOB difference might not seem like a lot when you're considering that every website in the world load CSS this adds up quick across the world and seeing theoretically rust trim down the amount of data being transferred over the Internet long term that's exciting and this is for all of bootstrap 4 10,000 lines minified 20 k less imagine if every bootstrap site had 20 KOB fewer bytes down the wire' be pretty huge they also have really good CSS module support and plenty more I could spend a lot of time talking about lightning but we're not here to talk about lightning we're here to talk about tailwind and as they say here using lightning means that in the next version of Tailwind things like importing other CSS files nesting vendor prefixes and syntax transforms for future CSS features will all just work no need to install or configure any additional tools like Auto prefixer or post CSS import you've been around for a while in the Tailwind days you know how annoying it was getting all of the right post CSS Auto prefix type stuff working in order to get Tailwind to behave in most projects with lightning that's all gone lightning CSS is written in Rust which makes it extremely fast and we're dipping our toes into rust ourselves too by rewriting some of the most critical paths like scanning all of your template files for class names with these improvements we're seeing build times drop by over 50% in real world projects bringing the production build times down to around 150 milliseconds for even our largest projects I will say going from JavaScript to rust I would expect more than a 50% bump but still really nice you can see the difference in the oxide's also going to bring a simplified configuration experience I'm honestly a little more excited for this part I'll be real I don't have issues with tailwins performance in terms of the build side so this is hype we're adding automatic content detection so you won't need to configure the paths to all your template files anymore and we're making it even easier to add Tailwind to your own CSS by replacing the need for all of the at Tailwind directives with a simple at import Tailwind call the top of your CSS file good stuff I also shared a very early look at an idea that we're exploring for configuring Tailwind right in your CSS files instead of JavaScript with css-based configuration automatic content detection and the simplified import story configuring Tailwind with some custom colors and fonts might look as simple as this in the future this is really cool stuff if you're not familiar with Oak it's a new color standard space for getting really accurate colors chaotic syntax definitely not what we want to talk about here but okay it's pronounced okay leech apparently thank you for the corrections chat this lets you pick and set up specific themes for your application here we set the font family for sand to be inter and the display to be Satoshi and we have these colors that we can use for other things going forward that's cool previously this was not easy to set up in your tailin config we're planning to introduce all of the stuff without any breaking changes and many of these improvements including lightning Integrations as well as a rust based template parser will be available in Tailwind 3.4 in the next couple months that didn't happen because uh you've seen any of my coverage about rust stuff it always slips I don't think any rust project is ever actually shipped on the expected date ever which is fine but it just doesn't happen so now that it's actually shipping as part of the version 4 Alpha let's see what we're at up to 10 times faster we can do a full build of the tailin site in 100 milliseconds instead of 1,000 milliseconds so that's down from a second to a tenth of a second and Catalyst UI which is their UI kits down to 005 seconds from. 3 that's a pretty big jump this is much better than what I saw on the other stuff before they're also talking about the smaller footprint which is exciting cuz you didn't know this Tailwinds already like hilariously performant one of the most performant CSS solutions that exists simply because it can reuse all of the classes in the HTML can be gzipped really well if the class names are in a consistent order so getting even smaller that's very exciting to be fair the CSS side which is what this makes smaller was never big in the first place but a 35% reduction is a Win Regardless rust where it counts I like this framing for it we've migrated some of the most expensive and parallelizable parts of the framework to rust while keeping the core of the framework in typescript for extensibility I like this in particular if you do everything in Rust you'll never get contributions anymore and Tailwind thrives with contributions so making sure that there are options for people who want to just write typescript and make Tailwind extensions is essential this is one of the coolest Parts the only depth now is lightning CSS no more Auto prefixing no more post CSS no more random junk you just use lightning now as well as a custom parser that they wrote and designed in Rust to read over their data structures read all of your template files and figure out what CSS isn't isn't needed to be included the parsing is now two times as fast as it was when they were using post CSS previously good stuff and again with the unified tool chain I've touched on this a bit the idea that Tailwind isn't just a plugin anymore it's an all-in-one tool for processing your CSS that's a huge change people are going to be upset but it's also the right call if you think of Tailwind as a rejection of CSS the separation of concerns and an embracing of CSS the thing that we need to scale to our applications in many different ways leaning into the framework processing of your CSS is a really strong angle we've integrated lightning CSS directly into the framework so you don't have to configure anything about your CSS pipeline built-in import handling no need to set up and configure a tool like postcss import built-in vendor prefixing you don't have to add Auto prefixer built-in nesting support syntax transforms etc etc you get the idea and designed for the modern web again really exciting stuff no longer Focus as much on Legacy theoretically lightning can handle a lot of that but they're not trying to Target Internet Explorer anymore let's see what they're saying here looking into the future with tailn Fior and trying to build a framework that's going to feel Cutting Edge for years to come native cascading layers interesting we're using real at layer rules now which solves a ton of specificity problems that we've wrestled with in the past I have not used at layer and at property honestly ever so my understanding of layer's probably been screwed up by how Tailwind uses it honestly so I'm excited to see what people use these things for within Tailwind projects they also have color mixins this I know a good bit more about this is exciting makes it even easier than ever to use the opacity modifier syntax when using custom CSS variables for color or even adjusting the opacity of current color to go back to the thech this makes it really easy to affect the opacity of a color and make adjustments where you move these numbers to make color pallets that look good where with a RGB standard not anywhere near as viable container queries and core is a really fun addition as well we've added support for container queries directly to core with new atmin and at Max Varian to support custom container query ranges that's exciting we're also working on refreshing the color palette with wide gamut colors and introducing support for other modern CSS features like at starting style anchor positioning and more very interesting I really like the idea of the wide gamut colors on the color palette if any of y'all have not used the Tailwind colors even if you're not a Tailwind Dev or you hate Tailwind getting a good color palette is obnoxious and expensive and here they just hand you one they give you all the hex codes for all these things you just grab them when you want them and you're good to go this is one of my favorite resources I use this all the time even on non- Tailwind stuff composable variants the new architecture makes it possible to compose together variants that act on other selectors like group star Pier star has star and a new not star that were variant that we've introduced for V4 in earlier releases variants like group has were explicitly defined in the framework but now group star can compose with the other existing things like the has variant which can compose with other variants like Focus interesting to think that before the colon dashes are kind of stacking these variants and on the other side it's applying the specific expectation of a given variant I'm not sure necessarily how I feel about the Dash being used differently on both sides but it is exciting to see the ability to stack these with that weird bracket syntax yeah there's no limits to the composability you can even write stuff like group not has peer not data active if for some horrible reason that's what you need to do be careful there are certain bloggers that are going to see this and screenshot it as a blessed example of how to write tailwind and use it to own you so be careful zero configuration content detection this is It's a silly thing but it is very exciting you'll be able to use Tailwind without even having a config in the future you just install the Tailwind package and it goes if you want to config things I'm sure you'll still be able to but Tailwind Is Now by default zero config huge huge huge you'll notice that at least in the early Alpha releases it's not even possible to configure your content paths for most projects you're never going to need to do this ever again Tailwind just finds your templates files for you we do this using one of two ways depending on how you've integrated Tailwind into your project one way is that they use the post CSS Plugin or the CLI tailin will crawl your entire project looking for template files using a bunch of heris sixs we've built to keep things fast like not crawling directories that are in your get ignore files and ignoring binary file formats or you can use the V plugin which relies on the module graph this is amazing because we know exactly what files you're actually using so it's maximally performant and with no false positives or negatives we're hoping to expand this approach outside of the V ecosystem with other bundler plugins in the future I would expect some crazy stuff to happen inside of Turbo pack anyways we'll introduce an explicit content path solution in the future but we're curious to see how the automatic approach works for everyone it's working awesome in our own projects I'm very curious as well CSS first configuration is a major goal of tailin V4 specifically making it feel CSS native in less like a JS Library once you've installed it you add it to your project with a regular CSS at import statement so you don't include Tailwind in your JavaScript anywhere you just at Import in your main CSS instead of setting up all of your customizations in a JS config file you just use CSS variables now at theme there you go the special at theme directive tells Tailwind to make new utilities and variants available based on those variables letting you use classes like 3XL colon text neon lime in your markup that's pretty cool just by putting these things here you've now created the 3XL breakpoint which you set to 1920 and that you can specify these colors as well my one hesitation here is that type safety and editor feedback isn't going to be as good where if I make a bad change inside of my Tailwind config and I have the types assigned to it it will yell at me for that and I won't be able to make that change I don't know if the tooling for CSS has gotten to the point where like a vs code plugin will correctly parse this and yell at you where like if you set up create T3 app with Tailwind we set up your Tailwind config for you in such a way that it is type safe and you'll get type errors if you use it incorrectly I'm concerned that won't be the case here necessarily it's not a big deal but it is a deal and it's worth considering this is really cool though that you can just add things to your CSS file and then access them in Tailwind like that that's hype I hope that the plug-in ecosystem can catch up they adding new CSS variables behaves like extended in earlier versions of the framework but you can override a whole set of variables by clearing the name space with syntax like color- Star initial before defining all of your custom values so this replaces all of the values that already exist you even do color gray star to just wipe out the Grays or such that you don't have to worry about the existing things we're still fine-tuning some of the name and conventions but you can explore the default theme on GitHub to see what's available to customize that's cool so that mean that the whole Tailwind theme now is just one giant that's pretty cool I love that most of this is just colors I think it's fair to say now that Tailwinds primarily a color framework if you don't want to explicitly clear the default themes and would rather start from scratch you can import Tailwind pre-flight and Tailwind utilities directly to skip importing the default theme so this is just importing the parts that are the utilities of Tailwind not the colors the overrides and all the fun things that come with the rest of Tailwind now you can skip this and Define everything you want to yourself we also make all of your theme values available as native CSS variables in your custom CSS interesting that's cool as well this means no more add apply if you just want to apply a color to some random thing on the CSS side this makes it easy to reference theme values in your arbitrary values without needing the theme function seems nice you just call a put something in it'll access it it also makes it possible to use your theme values when working working with UI libraries like frame or motion without having to use the resolve config function that's really hype motion was not the most fun thing to deal with before due to how it passes values to and from your components now that you're applying initial animate exit stuff you're not just applying class names you're applying CSS but this effectively applies that really cool stuff so what else has changed we don't take breaking changes lightly but there's a few things we're doing differently in V4 that are worth sharing they remove deprecated utilities so a bunch of these things are no longer supporting have been removed the post CSS plugin and CLI are now separate packages the main Tailwind package doesn't include these anymore since not everyone needs them inste they should be installed separately using the post CSS or Tailwind CI packages directly there's no default border color the Border used to default the gray 200 but now it defaults the current color like the browser does I like that a lot it should not have defaulted the gray before that was annoying rings are one pixel by default now that's nice I did not love the blue three pixel rings that most things used that were using Tailwind it's a nice change again also current color they find themselves using ring star utilities as an alternative for borders in their projects and using outline for Focus rings so we think making things consistent here is a helpful change I'd agree there's a handful of other really lowlevel implementation detail changes that might service in some way in your project but nothing deliberate like these ones you bumps into anything surprising let us know and at the end of this I'll actually try running tailin V4 on one of my projects to see what happens road map to version 4 this new engine is a ground up rewrite and up until now we've been focused entirely on the reimagined developer experience using the new configuration approach we put an enormous amount of value into backwards compatibility and that's where the bulk of the work lies before we can tag a stable 4.0 release later this year that includes support for JavaScript config files still because they're not available in this right now explicit content path configuration support for other dark modes plugins and custom utilities prefix support you can't configure a prefix for your class right now but they'll be bringing that back safe lists and block lists so that you can prevent certain classes from being generated or guarantee that they will be support for important configuration which isn't really a thing right now apparently interesting support for the theme function which you don't need CU you can use ver now but would be nice for backwards compatibility as well as a standalone CLI for the new engine so you don't need to use their package directly you can just call the CLI this will be huge for things like other ecosystems like I know Elixir and Phoenix are big on Tailwind I know that the PHP community's been using Tailwind more Standalone c will be very helpful for them to integrate here they're just saying they expect to fix more bugs and find new things to add but they don't have an exact timeline but they would love to mark four is stable before the summer holiday season kicks in exciting stuff now they're saying to try it so in here we have our upload things server inside of which we have our post CSS config that's not valid syntax they really put bad syntax in their blog post that will alone makes me much less confident it's actually going to work here all this custom we have in here I'm also curious simply because we're doing so much shadu ey stuff here what happens let's see how broken everything is not too bad colors are different those shouldn't be that color okay maybe it's actually quite broken interesting yeah the background no the background is there it's just lighter all of the coloring is gone I think it's cuz we do everything in the Tailwind confit right now like we have our brand colors all defined in here yeah this is not going to be trivial for us to move over in order for this to be actually viable for us we would have to manually Port this over or have some type of script that will dump this into CSS or just wait for them to support the Tailwind config again but for this project we have way too much Tailwind config going on to just do this the other thing I didn't see mentioned which is actually going to be killer for us too Tailwind typography is such a good package that it's resulted in people thinking sites have a look when they use Tailwind you just wrap an article with the pros and then the pros XL if you want it for large screens drop some traditional formatted markup be it like an article with H1 H2 tags with p's all the things you would expect from like a blog post it just makes it look right this is a phenomenal plugin this actually the plugin that made me start paying more attention to tailwind and eventually falling in love with it so it's very important to me and it is not certain whether or not this will actually work inside of V4 right now so as exciting as this is I don't really have the ability to test this in a meaningful way oh Gabriel found a link to a tail and playground yeah it bun install you would make this even more cracked if we had turbo one I was the newest right oh they published a new version 1 hour ago interesting but I want to Bun Run Dev here and actually see this work turbo and the CSS Global don't get along it looks like content Tailwind V4 Play app global CSS I guess I will remove turbo for now that's sad you can see when we have a huge tooling shift like what Tailwind V4 is doing it it catches Strays a lot of things break that might not have been expected to well we can still use the Tailwind compiler but at the same time we won't be getting as big of a win here because we're not going to get to have the next compiler be as fast but we should still see a change here if I just I'll goid to the underline instead that'll be clear saving now that works doesn't feel notably faster I'm just going toit a new project let's do the test to see the difference here okay I'm going to remove underline it seems to be actually faster here so saving in 3 2 1 deleting saving in three 2 1 that's actually way faster for the the time comparisons go back over to here here are the speeds I was seeing with the new tail one compiler that we're in the 400 millisecond range the new one was like four times slower for me this again is a next project which seems to not be that well optimized does this also use turbo it does not so I'm going to add turbo which should theoretically make this go even faster deleting saving now that's literally instant saving now yeah it'd be cool if it told me when it was doing the new builds where like it did before but turbo doesn't always give you the best logs I'll be honest but the the difference there I I can feel the difference for sure like I'm saving now and it's literally instantaneous this is again why I'm like not always hyped on these big rust rewrites taking so much time because I'm using the old JavaScript code for this compilation rust is helping manage the build pipeline outside of that on the next side but the performance I'm seeing for that is insane obviously if this project had significantly more files in it it's not going to be able to parse it that fast but what the it's parsing it literally instantly right now so I'll admit I'm a bit disappointed I know that their goal is to fix the standard and make it easier to integrate with first and then get good support in everything modern including nextjs but it's sad to see that next doesn't get these benefits right now interesting to learn overall I'm still really hyped though to be clear these are necessary changes that are going to make Tailwind go way way further sorry I just dragged you all along to see how annoying it was to actually set up right now but as per always with tools like Tailwind the community will take over and make these things go from a little Annoying to incredibly simple and nice to work with I don't know how much else I have to say about this but let me know in the comments if I should cover tailin V4 when it's a little bit more stable because what I see already is very exciting see you guys as always and until next time peace nerds




## Tailwind V4 is WAY better than I expected - 20241127
tailin V4 just dropped its beta and it's so exciting that I convinced my parents to let me set up a recording studio in my dad's office so I can tell you all about it this release is nuts everything from CSS standards to overhauling a lot of the stuff we use for variables to introducing rust to the build chain yes they rewrote the whole thing in Rust at least I think we'll be diving into all of this in just a second but first we have to hear from our sponsors ever had some data you really wanted but just couldn't get like sure you can scroll through all the pages on the web yourself but scrap it's just impossible from rate limits to captas it just feels like the web's fighting you when all you want is data we've all been there well uh us nerds at least I can't even get the stats I want out of YouTube half the time and that's why bright data exists if it's public on the web they can scrape it their API works with any stack they get around blockers captas and everything else that might be holding you back whether you're scraping Reddit or monitoring e-commerce sites bright data just kind of works you don't have to take my word for it use my link soy dev. l/ briata for a $15 credit on your account today thank you bright data for sponsoring today's video it is here I've been waiting for a while Tailwind V4 is I think almost inarguably the biggest overhaul of Tailwind to date as they call out here it's been eight months since they initially open sourced the work they had been doing on Tailwind V4 hundreds of hours of fixing bugs Soul crushing backwards compatibility work and troubleshooting Windows CI failures later I'm excited to finally tag the first public Beta release so I talked about when we published our first Alpha tailin V4 is an all new engine built for performance and designed for the modern web one thing I'll call out before we go too far in is that built for performance does not mean anything about client side performance something I think people miss a lot about tail and and one of the reasons it's so cool is it performs comically better than every single CSS and JS solution other than arguably Styx depending on things but for the most part Styx will be literally perfect it was built for that other than that like most CSS Solutions are going to struggle to compete with the performance you get from Tailwind because Tailwind introduces really consistent reusability with a small set of CSS that only grows the size of what you're using from it and has a fixed cap for how big it can be and once you send that CSS or inline it using something like the new nextjs inlining feature for CSS which is really cool by the way you end up with what is effectively the ideal performance for Styles in your app it's actually really hard to beat the performance you can get from Tailwind with almost any other solution and it's always annoying when people say Tailwind makes your HTML ugly and it's really slow because whether or not you think the HTML is ugly it is objectively one of the fastest CSS Solutions anyways so when they say that it's built for performance what they mean is builds builds are up to five times faster and incremental builds are up to a 100 times faster to be fair the builds are already really fast for me in almost all my projects but knowing that they're that much faster is really really cool they also finally have a unified tool chain which is nice cuz it was a lot of different parts remember when you had to install like post CSS and Auto prefixer with Tailwind every time you installed it that might be going away forever now there's a unified tool chain which has built-in import handling vendor prefixing and syntax transforms with no additional tooling required also CSS first configuration which is really cool you no longer have to do all your config in that weird Tailwind config JS file bunch of it can now be moved to CSS which is where it belongs it's style information they also call out that it's designed for the modern web it's built on Native Cascade layers wide gamut colors and includes first class support for modern CSS features like container queries at starting style popovers and more there's so much more to say but everything you need to get started is in the new beta docs and oh boy what docs they are there's a lot of cool info in here they do call out this is a preview and this is a a bold preview when I tried the alpha eight months ago it didn't work on like any of my existing apps but hopefully it's a bit closer we'll probably try adding this to an app when we get to the end here but I want to read through this all first as they say there are some rough edges and things they want to improve we're confident that we're not going to make any more breaking changes between now and the stable release hopefully some Unbreaking changes good point Ethan I love taking my typesafe config and making it uh let's see CSS very fair point interesting if you're using post CSS still with something like next you have to install this their post CSS plugin now instead and just to be clear at next tier isn't at nextjs at next tier is the the future version that they have tagged on npm but with something like vit which doesn't prescribe a specific way of processing CSS you can just install the latest Tailwind alth you still have to install their V plugin this is a nice change you don't have to import like 15 things like you used to have to excited for that they even have their own dedicated CLI best on if the CLI is written in rust or JavaScript I'm thinking Javas script but it could go either way packages C looking like I called it this does show an important detail I was hoping to get to though lightning for those who don't obsess over everything going on in CSS uh I understand but for those who have you probably already know about lightning it's an insanely fast tool chain for parsing and processing CSS and getting it all minified and handled for you is written in Rust in order to get your CSS parsed way quicker Comm Minify 2.7 million lines of code per second on a single thread it's kind of nuts going from CSS Nano which took half a second their test was minifying bootstrap 4 took half a second on CSS Nano almost 18 milliseconds on ES build and lightning is literally four so I bring this up because Tailwind is using lightning CSS in this new version which allows it to be hilariously faster and it's not just lightning they're relying on that's like one part of the tool chain they still have to parse all of your files in order to figure out what class names you're using so they can make the right CSS but combining all of these rust file management tools together the result is actually really really fast one cool thing they did that I didn't expect is this upgrade command where you can tell it to upgrade a whole repo by calling npx Tailwind at upgrade yeah this is cool more and more tools are introducing this with their big overhauls like nextjs just added a CLI to run your up upgrade to the latest next release I know things like clerk have been having these for a bit I know a lot of tools have introduced these code mods to help you with the upgrades really cool to see Tailwind including it shall we try this on a smallish project okay I have the project open for those who don't know the project is quickpi my little weirdly viral image app don't tell me they don't have a copy button for this come on Tailwind need to get my CTO Mark the click to copy expert to help out here we'll run this linked the Tailwind config to the source app global migrated let's see what happens huh I think it just worked I think it literally just behaved what has it changed here look at the before and after outline none outline hidden okay so they changed the name for that oh Flex SCS now grow I don't don't love that so I've heard an argument from the only person I trust to go anti Tailwind which is our friend Nan who's the creator of stylex one of his arguments against Tailwind it's a simple one but it hurts the performance quite a bit is that since not all classes have a prefix you have to do a lot of weird checking in something like Tailwind merge because if you have a component that has a default like background color red and you pass it class names that include background color purple you want that to override the class name that was already applied to the element but in order to deal with that in order to find that diff in software on the client side you have to check all of the things that could potentially overlap and if they all have the same prefix it's relatively easy to do that if they don't all have the same prefix like Flex or nun or grid you now have to have special cases to handle these special words that make it way slower than it has to be if everything had a prefix and all of the prefixes matched overrides you wouldn't have to have that code be as slow and it's not super slow but it could be way faster but because Tailwind has these oneline short hands it can't be as fast as it theoretically could be just an interesting call out it's weird to see them going the other direction where they're killing prefixes instead of adding them to everything results are nice and clean though Flex grow and now here's where the main change happens the global CSS because this is now where a lot of behaviors are described the default border color has changed to current color in tailin V4 so we've added these compatibility styles to make sure everything still looks the same as it did with V3 if we ever want to remove these Styles we need to add explicit border color utilities to any element that depend on the defaults interesting very inter interesting since we had these elements that didn't have a border color set Tailwind added a default layer here in order to maintain the old Behavior it's actually kind of cool I think it's dope that they set this up this way I like that they're using the UIL to move backwards compatibility stuff to one place too it's actually nice cuz if you have like 20 of these having them all in one place as like an indicator of what needs to be ported is it's really good I hate when an update tool hot fixes what's wrong in all the different places that existed by putting it in one place we kind of have a checklist top to bottom of what we need to change to do things right and that's a really good thing I I like it when you get to work this way you have the exact order of events you have to follow to go clean stuff up and when I did migrations at twitch on the giant code base where we started moving things to new patterns with Apollo V3 or we started introducing hooks having a single place or document that lists everything that's out of date is really really helpful and I like that they kind of built that intentionally or Not by putting everything in the global CSS here for those overrides what do we got in the rest of these it's all going to be just that Flex grow change because I know all of these tools have one of those in it this one's going to be the outline hidden yeah uh none of these are surprising it's cool they made all those changes for me and that the result just works is there no Tailwind config at all anymore is the file just gone yeah that's kind of wild that's that's interesting I have feelings I don't think we had any plugins but now I'm curious how the plugins work okay I'm supposed to be looking for the plugins right now but configuring dark mode is actually really cool you set up a variant dark and you specify where dark is true so as long as you put that on body everything underneath is going to be dark mode now it's really nice that this is so much more declarative I feel like I actually understand it and it's less less weird tailwind isms and more more real here's another cool thing you can define a prefix again in CSS still weird still pretty cool though using plugins at plugin directive interesting very interesting I would never have guessed at plugin would be something I write in CSS I almost want to get one of the those screenshots where I show a CSS file in this new way and see how much it breaks people's brains should we move all config to CSS should we should somebody file a PR to nextjs so that my next config can be a CSS file too imagine turning on react compiler via a CSS plugin in oh no that's too cursed even joking that's too cursed actually no no Ethan no Ethan ignore me don't please please don't do this you know too much on the inside of next don't don't waste your time or do I won't stop you let's go back to what's actually new though I've been trolling around too much as they said before it's a groundup rewrite of the framework taking everything that they've learned about the architecture over the years and optimizing it to be as fast as possible part of me feels weird about this because it doesn't solve a lot of the the problems that cause actual client side performance issues of Tailwind specifically Tailwind merge and class variance Authority type stuff I would have hoped they would pull those things in but those aren't used by every Tailwind user the Tailwind CLI and the Tailwind bundler is used by every Tailwind user so I I get why they chose this Focus but I would have liked them to start including more of the the utils we all need to use in order to use Tailwind because they might have noticed different winds that they can't see because they don't own that whole pipeline they only own the Transformer to go from Tailwind code in our Dom to Tailwind in CSS oh God the person with the app plug-in handle poor at appli is about to have a lot of friends they call out that they've seen up to eight times faster incremental builds and 3.5x faster cold starts the most impressive Improvement is on incremental builds that don't actually need to compile any new CSS these builds are over a 100 times faster and they complete in micros seconds and the longer you work on a project the more of these builds you tend to run into because you're just using classes that you've already used before like Flex Callin span 2 font that's actually a cool thing I hadn't thought of most of the time when you're writing code that uses Tailwind you're not introducing a class name that's already used somewhere in your project and now those changes take micros seconds that's had even thought of that that is huge going 355 milliseconds to 192 micros seconds is that's kind of nuts not that like when you save this stuff is slow so if I go in and save something in here like SVG tool compiled in 133 milliseconds let me change something in it so it's a little slower okay 105 to 130 millisecond seems to be the range let's go back to the old version of Tailwind not going to lie it works well enough I am going to put that on a branch so that we can merge it after if it does come out well cool now we're running Dev again with the Tailwind V3 Edition and if I save a change let's make an actual change we'll change the shadow to large well uh that's not a good sign maybe we need to open up that specific tool okay there we go that's closer to what we were seeing before that said it's it's worse or it's better like going to the old version seems to be slightly better on average which is kind of funny ah good points chat I should have thought of that before since it's using post CSS still it is going to be slower than if it was using vit very good point that I hadn't considered before yeah uh hopefully since since next is already committed really hard to Tailwind they'll add something that uses lightning CSS instead of post CSS in that layer that's how it's supposed to be pronounced yes sorry V's one of the few things I actually pronounced correctly they've changed how it's supposed to be pronounced before much like Dino which used to be Deno it was V but V is correct now zustand I I will never agree to pronounce correctly I'm too American to pronounce a German word they lost the War I don't have to respect their pronunciations yeah other big thing as we saw was the CSS uh config it is cool you can define a whole theme this way with like your default fonts break points for different sizes and theme variables which is really cool too you can Define um does it show yeah so the different themes would be layers so you can Define at layer theme which has these properties at layer base with these properties at layer utilities with even more and then you can specify by even crazy behaviors like what to do on certain hover things when different themes are being applied and now you can use these different layers to affect different things in different places oh that's huge the amount of hell I've spent trying to config content properly so that Tailwind actually knows where it should be going to parse things that just being built in is going to be a really nice change very good call this is going to kill some things that rely on analyzing build in order to generate stuff because you'll always ignore your build but the idea of get ignore being used as a a heris for what two and not to parse is a a smart decision that should have been made a while ago also interesting that you can specify certain sources that you do want to include if you do have like a library you want to be parsing the tail in from you no longer need post CSS import because that's all handled with their layer I wonder since they can't use lightning in the next version if that will still be necessary for the next JS builds and as I mentioned before no more Auto prefixer post CSS preset environment all just part of lightning CSS oh apparently turbo pack already uses lightning CSS that's cool that might also be why we're seeing similar performance between the tail and V4 and the V3 version because they're already hacking lightning CSS around it interesting I I don't know enough about how turbo packs optimizations are going to conflict with Tailwinds all I know is that it's really really fast for the code bases I'm in is if it's under 100 milliseconds for me to see the new version of a page I don't care even it's under 300 I'm probably fine what's react never heard of it interesting that they opened up things like grid column to let you put arbitrary values that's a little scary previously all arbitrary values were bracketed or defined in your config now they just kind of happen I'm a little scared it's going to conflict with the like single config nature and like the one way of doing things way of Tailwind but I could see this working out oh data stuff automatically handled that is actually kind of nice it is a little scary CU every time you do one of these it's it's Unique some amount so this will result in a more more of those unique class names in your code base that kind of conflict the thing I was saying earlier where you have a very limited Topline number of classes that can exist in your code base with Tailwind this will increase the number if you have lots of different elements that have lots of different data Dash properties and then you apply different subclasses with this every single one of those is now creating a new class name and yes RAV to answer your question something like h54 could now just Exist by default I am curious if we try that will it do it so if I set some random element on this page here this button sh we'll do h54 looking very likely that this will work let me grab an SVG and drop it yep that works V4 you can just put whatever number you want and it will interpolate it as something valid I don't think the vs code extension has updated yet to uh have the hover Behavior which is a little annoying but it is cool that you can do that a little scary because it it takes away one of the cool things the tailan does which is it makes all your sizes kind of fit together because they're all scaled reasonably well but now you can do weird values like I already see people in chat doing like 12.5 that's scary test if it does decimals oh no oh no h 12 we'll do a fun annoying one 12.4 it is red underlining that which is hopefully a good sign that it won't do it we'll see if it behaves with 12.5 okay it does with 12.5 if it's a 0 five it will otherwise it won't it looks like is that for real yeah that is I change that to 12.8 yeah that's fun it has to be a 0. five but it works for that so uh you're definitely going to make slightly more cursed than previously CSS fun did not think they would do that but uh here we are so that's the arbitrary values I'm surprised that they let you get as arbitrary as they do interesting they have arbitrary spacing which is really cool you can change how big the spacing is for those multiples which is fun you can even provide your own explicit scale which is interesting I have not seen anybody do that and I would be scared if they did moving to okl CH is huge by the way RGB should be treated as dead we need wider Spectrum HDR is not the future anymore HDR is today even if my videos are still SDR and an HDR future requires more control good stuff simplified variable Colors oh yeah for if you specify a variable for error in primary color instead of it just being specific like BG D R400 having defaults as variables you just put an at theme and it's really cool that you can just do that and now all of your Tailwind like class names will auto complete correctly the VSS code extension will work correctly having that all that simple in one place is actually huge this is going to make Shaden so much simpler actually now that I'm thinking about it it's going to be a lot of work to move shadan over to this but it'll work great once they do it oh that's kind of cool at Min and at Max so you can specify when a class name kicks in instead of it being cuz like I've seen so many times where you say hidden and then MD colon show this inverses it so you say Max MD colon hidden then everything else is handled by default that's actually a lot cleaner I like this a lot this would be my favorite thing thus far actually 3D transforms oh my God Tailwind finally supports a third dimension unironically kind of cool like the code I I know this going to be it's like on Hover it's going to rotate one of the dimensions to make that work yeah yeah hover translate y4 rotate x49 z38 the fact that you can apply hovers within 3D space on an element that's that's really cool actually I'm working on a game right now that I might actually use that for okay you have my attention Tailwind team oh linear gradients let you do angles no more weird transformations to change the angle okay finally everybody's freaking like clone of linear is going to look slightly cooler now radial gradients are actually really nice conic is useless I don't I've never seen a conal gradient that looked anything other than cringe but a radial one like that looks stunning that I could actually see being useful inset Shadows yes inset is so good this is so good we should have started here this is my this is what I'm here for this is an autoresizing Fields I'm going to put down the mic can type nice that's cool field sizing content is this one class that lets the field expand when you use more things in it also fixed as an option to tell you to tell the browser to not do that this so I talked about this before one of the things I use Tailwind for the most is even in a project not using Tailwind I often use the Tailwind docs more than projects with Tailwind so I go to the Tailwind docs to see what a class I use all the time does and grab the one to three lines of CSS to throw into this other project these classes are really useful not just because I'm going to use them in Tailwind a lot but when I'm not in Tailwind I can go grab the three lines CU they're annoying and I use them other places I used the tailin color page so often it's not even funny oh and further question is there a default Mac keybind to delete last word yeah I think it's option delete yeah I I use that all the time I don't even think about what it is I've modified like my terminal and my ID and things forever so that the default Mac OS text one word delete key bind works everywhere because I use option delete more than I probably use the normal delete key now I think about it Grim this actually a good idea I would use a raycast plugin to automatically lower them if some that would be super dope I wish Shad CN UI use this already cuz I want to use it in a prod environment already yeah honestly same color scheme utilities look at that scheme light scheme dark built in finally font stretch oh I'm actually going to use this there are so many random places where I want this particular look especially the condensed look o oh this is really good this is really good I am getting more and more hyped as I scroll composable variance group has data potato opacity 100 now if anything in the group has that property this will have that very interesting I see this being used for some cursed but I could also see this being used to clean up some existing cursed starting Style varing that so that you can have a pop over that like flows in like that  I'm going to go add this to um pick thing cuz right now I have it with a generic transition and a lot of random cases trigger it if this was just starting so it only happens when it's first rendered and never again oh that'll be real nice not how is this not a thing before pun not intended not variants are huge God that's going to be so fun I'm G to use that a ton actually the more we scroll the more useful these things feel to me I have no idea what a nerd is so we're going to skip that oh it's not interactive that makes sense and you have special styles for when it's inert don't know how common that's going to be but it's cool it exists nth child nth last child nth nth last five underline this is scary I see this being more cursed than useful but if it's useful to you cool in okay that's actually really useful to say this is inside of something that's being focused super handy pop over open okay I see that being very useful descendant variant oh what I didn't know about this that's very useful you just put a star and applies to all the children what are you doing to it though all descendants want to combine it with another VAR so if you want to Target all all sub elements that are data Avatar okay I I I see where you're going I see what you're cooking here weird but potentially very very useful you can even import a legacy config if you still want to use it for some reason but it just rewrote mine for me with no issue this is a lot better if you're writing custom utilities this syntax always sucked and now it's not going to that'll be a very nice change I think that's everything I want to RI Riff on here though there's a lot of cool stuff I'm excited that's all I have to say about Tailwind V4 I am genuinely way more hyped than I expected to be and I hope you guys are too let me know what you think and if it works on your projects and until next time peace nerds




## Tailwind broke, but it's not their fault... - 20241202
Tailwinds quickly become the standard for modern web dev there's a decent chance if you're rewriting your site or starting a new one Tailwinds at least being considered the speed at which it blew up is insane it's kind of becoming the new way of dealing with CSS I've even seen proposals that Tailwind should be built into the browser every once in a while we get a reminder of why that's a bad idea one of those just happened as Adam the creator of Tailwind so kindly pointed out if you're suddenly having custom text selection colors breaking in Chrome like it happened for the Verge in Bloomberg to huge sites that are using Tailwind you have to enable this feature flag to fix it because a new version of Chrome made some changes that broke this this whole thing is fascinating there's a great write up here and I'm super excited to break down all of this with you why you should care and how to prevent your websites from having problems like this we'll get to all of that right after a quick word from today's sponsor post hog okay I know analytics are boring I get it I've done them so many times myself nobody enjoys this stuff but post hog does actually make it fun and they don't do it at some crazy high price and even if they did it's open source yes like fully open source you can go host it yourself if you really want you won't want to though because their prices are really good and convenient and they're they get it I can tell you guys how chill they are you might not believe me but hopefully showing you this might convince you they're an all-in-one Suite of product tools which means if you're building the type of product that you're like charging for and have users signing in for they have a ton of the stuff that you need obviously analytics is the big one but they also have feature Flags experiments surveys so much more it's just the the amount of these things you'll find yourself needing is unbelievable and having them all in one open- source well priced toolkit is really great going to be real for a sec y'all I never thought post hog was going to sponsor me I hit them up because they're the thing I use for my analytics and I've been pumped working with them since they've been one of my favorite Brands and I think you'll understand why if you give them a shot today and considering how generous their free tier is you don't have much to lose check them out today at soy. l/p talk as I was saying selection is broken in Chrome 131 due to the d-w text opacity field as well as friends other similar things I wanted to show you guys this bug so you can actually see it in action but the sites that had it have all patched it and none of the Wayback machine examples I went through still showed it so it's hard to show the tldr is this Behavior where you highlight text can be customized and a lot of websites like The Verge customize it for different colors or our friends over at Bloomberg they make it nice and fancy with the black background I actually like the custom text highlight color I think is really cool and nice touch but I guess it can break and it wasn't just breaking where it reverted back to the default it broke where it just didn't show it at all it was rendering transparent instead of the color that you would set Adam jumped in here and gave really useful info quick fix for all the Tailwind users as long as you aren't using any of the BG opacity or text opacity utilities you can use this feature flag to remove the problematic variables from your generated CSS if you disable color opacity utilities by default the bug goes away why though let's keep digging in do might be the best solution for the folks at The Verge because they are currently on tailwind v3.3 and might want to do more extensive testing before upgrading to 3.4 CU he passed it in 3.4 as quickly as he could the alternative solution was to replace any use of classes like selection BG 400 with selection BG 400 over 100 maybe you're starting to see where this bug came from I see chat starting to catch on this is what was happening on Twitter for a while yes this has been happening in a handful of places and the reason if we go dig into the issue here is if you have an opacity variable set for a background color with a text selection it resolves it to transparent if you explicitly set it to a number you're good but if you use a variable for that background color it fundamentally breaks also if you remove the colon colon selection it still works it's the combination of s which is a selector to get the text you selected I know overusing the word selection sorry it's how the things are named it's the combination of selection and a variable for your opacity that causes this to break this is entirely a chrome bug so yeah I kind of Click baited you guys by saying this is a Tailwind thing because Tailwind isn't the cause here they used everything according to web standards but this chrome version when trying to optimize variable resolution broke it for selection as my guess it's funny that the Verge did an article about how Chrome got fixed and they only care because it affected them it's great ises it possible to see what you're highlighting again okay to be clear it was only broken if you customized it but yeah the latest version of Chrome has addressed an issue in the browser that broke the ability to highlight text on some websites over the weekend this is also why I couldn't reproduce it cuz I'm not going to revert to a weird like patch of a patch update on Chrome not easy to do text highlight working on our story from yesterday about the issue they did a whole story on it it's funny the version multiple stories about this because they're just trying to get Google to fix it and it's easy to report on things if you're trying to get them changed as I've certainly learned we didn't break your copy and paste on purpose but it might be a little broken on sites like The Verge Bloomberg and X not happening it's still Twitter oh embed as a Repro video thank you embed here embed is selecting text and you can't see it but if you go there and change that to a real number suddenly you can see again yeah that's no good that's a pretty killer bug so according to Google here's what's changed the inheritance behavior of selection properties has historically been implemented through the originating element inheritance where the selection uses the properties from a colon colon selection selector that matches the element being selected Chrome version 130 and earlier usess model 131 enabled a new Behavior whereby elements inherit selection behaviors from their parent interesting I don't see how that would break the variable tail when is a story let you combine two classes to set the color of something and adjust the opacity of the color so people have been able to do things like selection colon BG red 500 selection colon BG opacity 50 where the implementation of these classes would look like this we have selection BG red 500 that uses the Tailwind BG opacity variable that gets applied from a different element here and since this is on selection you would imagine that these they're both targeting the same thing so the selection element combined with the selection selector I hate the naming here so much you have no idea this combo should result in this variable being AA being available here but the difference in these here results in the variable as defined here not being accessible as done here so now they pushed a change that has a fall back where by default Tailwind BG opacity will be set to one and it can be overridden by other things and fall back to one if we're not given anything but this breaks composition in Chrome if the variables defined on colon colon selections pseudo elements are going to be ignored going forward there is an alternative solution for our users who don't want to change the opacity which is to use a single class what they recommend anyways BG red 500 over 50 I do love this syntax the divide by number to control opacity I was iffy at first because it massively bloats the potential number of classes I fell in love with it okay thank you chat for the correction I should be referring to the colon colon selection as a pseudo class but but it's a pseudo class that is part of the selector so everything sucks call out that there's one problem that will still exist because of the Chrome change which is that selection backgrounds will still be invisible if someone writes something like this so if you set a default BG opacity to zero and you set a selection to BG 500 and also change the opacity to 50 I've done code like this before where you set a default value that makes something invisible and then change depending on certain other properties that breaks it seems like Chrome fixed it and the change already went out so thankfully you won't have to do this I'm not sure if they're going to revert here actually I'm curious we'll see so they haven't reverted the change so all of the weird behaviors that Adam described there are still the case I am very curious if they end up reverting or not I'll be sure to leave a comment if by the time this is published this has been reverted I hope they're able to because this was absolutely a bug on Chrome's part and it's obnoxious they had to deprecate certain patterns and behaviors and features because Chrome made a weird assumption about how it resolves things okay Nan is here Nan's the Creator of Styx also one of the few people that can in my opinion meaningfully hate on tailwind and actually has real points the heavy use of CSS variables is one of the most concerning things about Tailwind for me sadly CSS variables are a bunch of weird performance pitfalls which is probably why Google is trying so hard to optimize them that checks out CSS variables are a weird pile of hacks and it isn't surprising that they have performance issues and it isn't surprising they're trying to resolve them with optimizations like this but it is surprising that they broke the web again and that Tailwind users were the ones who were hit the hardest it's a it's just one of those weird scenarios where CSS doesn't provide us what we need so Tailwind is trying its hardest to build what we actually need by hacking around Chrome shortcomings and the webs shortcomings using the few features we have to build better Primitives and then when they try to improve The Primitives Tailwind breaks because now there's assumptions built on top of it this is why smoosh gate happened and why there have been all these weird failed attempts to improve browser standards what's the xkcd my favorite XK ever CPU no longer overheats when you hold down space bar this update broke my workflow my control key is hard to reach so I hold spacebar instead and I configured emac to interpret a rapid temperature rise as control that's horrifying look my setup works for me just add an option to reenable spacebar heating yeah the classic no good change goes without causing someone a problem and it seems like that is kind of what happened here the results being funny enough to cause The Verge to write multiple articles about it but yeah makes sense that we ended up here what a fun and wild ride this one was you're going to be more careful with how you highlight text or are you going to move off a Tailwind let me know until next time be careful what Chrome version you're running




## Taking Off The Rose Tinted Glasses - 20240710
remember Drupal the Fun open source alternative to Wordpress as soon as I put in my stream title Jeff geerling showed up because he was an open source contributor largely because of it drupal's well regarded in a lot of circles as one of the first like really big web framework open source projects and I know a lot of people myself included were able to get into open source much earlier as a result of it I think we also have some Rose tinted glasses because it seems like things in the Drupal world aren't too great when I saw this comment on Hacker News I knew I wanted to break it down because uh yeah this is a funny one and I think the pain of the PHP ecosystem has obviously been largely resolved with modern tools like laravel but man man some of the old ones are in a rough rough spot and if you think upgrading your react app to a new version is hard you have no idea this is a story about the attempts to upgrade from Drupal 7 Drupal 8 and this was on the hn thread what is the most painful developer setup guide you've ever experienced in the web in the PHP world the Drupal 7 to 8 plus upgrade process was miserable it's really more of a complete rewrite with close to Z code reuse but the guides didn't make that very clear and the technical docs were just as bad for such a big project it was the worst documentation I've ever seen I got a few weeks in before realizing man it's probably a good time to jump ship from Drupal alt together we ended up moving to nextjs instead wouldn't ever think you'd hear somebody from the PHP World dropping that in their paragraph especially in a world where everybody seems to want PHP back again but we'll go into that in a minute according to them this was the best technical decision that they've ever made as a Dev Not only was the migration much easier the end result was was also much cleaner the hosting much cheaper and the devs much easier to hire for and that was like half a decade ago yeah I I don't think we understand this point anywhere near as well as we should it's easy to look in the past with rose tinted glasses I've seen a lot of people say man I want to go back to the FTP days where I just dragged and dropped my web app to my server and it just worked those weren't good days I don't miss them at all do you know what's way cooler get pushing in having your website update the fact that modern CI is at a point where I can just just go use my terminal finish the work I'm working on use the thing I'm already using get and once it merges it's live that's magic the introduction not just of continuous deployment but of good Primitives that allow continuous deployment to be set up with literally one click that is so much better than anything I used to experience in the PHP world I like a lot a lot a lot and you can actually use some of those things in modern tools too uh are we am I going to nerd SN myself with this I'll be honest y'all I just nerd sniped myself a bit I wanted to show how easy it was to deploy PHP on versell and due to one dumb bug I ran into it wasn't quite as easy versell please fix I'll chat with you guys later but once this is set up it is actually really nice so this is a basic PHP project it all works through this API folder so we have index.php if you already know PHP code this probably looks familiar we're using this to return Json with the time the date and Tech versel cool so as I said we're not going to use the classics everyone's favorite things we're not going to use any FTP here we're going to use get hopefully you've already get knitted but if you haven't do that get add all don't use d a by the way use- P if you can I'll do a whole video about that in the near future commit and it and now we need to do something with this I can't get pushed CU we don't have anything yet so do my favorite GitHub repo create using the GitHub CLI and now I have to hit enter far too many times because all of their defaults don't select even obvious ones but now we've went through 10 Flags now we have this PHP demo project but we know how GitHub Works how do we actually deploy this setting this up in the past I'll admit was not fun there's a reason CI and CD were kind of scary words for a while you can set up GitHub actions to do a bunch of things that's really cool and all but I want to go a bit further I want to take advantage of all these modern new DX things so we're going to go to versell add a new project hit import on PHP demo and then hit deploy and now in just a moment look at that now we're getting this Json response from versel I can even curl and get in my terminal and that's being served through PHP so how do I update it what if I I want to add the thing I always should add more subscribe to Theo now that I've added this in here all I have to do to deploy it get add I'll use dasp correctly here get commit updated Json did I forget a comma I did forget a comma thank you cool and now that we pushed this it auto deploys I could have made a poll request which I'll Showcase in just a second but now that I've done that I go back to the project the new deployment is already started but what if we want to I don't know work on a poll request that might change things entirely like maybe we have a different endpoint that is I don't know uh good YouTubers PHP and here we could put some really well formatted Json first Theo second prime third fireship so now we have this well- encoded Json file clearly the right way to use Json get at it but we don't want to push this straight to main let's make a branch check out dasb Theo SL I don't know YouTuber endpoint and now that we've created this Branch I can GHP or I should commit the changes first get status get commit new endpoint GHP create once again far too many options it doesn't even Auto open in the browser but now we have this poll request what's really magic about modern workflows like this are that they just let you do that you now have a preview build that has this new functionality playy is still building but once it's done building we'll be good to go what did we call it it was uh good YouTubers PHP wait that's returning the same thing oh I made a mistake it's a good thing I didn't deploy that straight to main well if we hop in here and we go to the versel Json we see we can actually Define what pages go where so I can change this to be Source SL YouTubers and this can go to API index uh instead of index good YouTubers PHP get status get add- get add- P get commitm fix routing and get push and now that change is going to be deployed on the preview build for our poll request so it's very easy for us to see what is and isn't working for a code reviewer to come in and confirm things these workflows are great especially for teams I'll be honest I file PO requests on my own projects even when I'm working solo CU I like the workflow and having these pieces of change energy isolated it's really nice to have poll requests that represent the things that you were doing instead of just having a bunch of commits that are total nonsense and branches that you forget about but if you're working on a team this stuff's essential sharing a endpoint that you're dumping things into via FTP is not viable for a team but this stuff is built for teams and it works great so if I go here and I now go to YouTubers not found what I forgot was to specify to verell which runtime to use for that new PHP file now that that works we're good to go and if we want to add this to the main site all we have to do is click the merge button and now that it's merged that's going to automatically deploy to our real site I don't know if this is just my functional programming brain but the idea that we don't have a separate state that we're tracking from our code because if you're using git and then ftping your files up the stuff you're doing in git and the state of the server are now separated those are two different states that have to be tracked and managed if you have something like continuous deployment the thing that's deployed is an inferred state from the actual code base you have one state instead of two which makes these things so much easier to deal with so again we have this link here if I go to/ YouTubers it serves the new Json all full of people that you should subscribe to I think this is cool I don't miss the PHP FTP days at all the fact that we can use these things with all these modern tools is an awesome thing and I hope this helps showcase why I like it so much enough about all that though let's go back to this comment that just nerd sniped me far far far far too hard as they were saying all the things they were discussing before were like half a decade ago and the migration process has stayed so bad for so long that so many companies using Drupal that they've had to keep delaying the version 7 end of life the V7 end of life was supposed to be in 2021 yeah almost 4 years ago but they pushed it back a year then another year and now it's been pushed back all the way to 2025 imagine that imagine trying to deprecate your thing in 2021 your thing from 2017 but since upgrading to the new one is so hard you're stuck maintaining that until 2025 people were discussing earlier about how hard it is to like deal with all the new versions of node and packages and all these things I can take an old npm project I can take an old node project from like version 0.4 it's a funny meme to mentioned that version if you know where what's been going on recently but I could take an old 0.4 node project pull it up npm install it will probably work it work a lot better if it's in the era of package lock files but it will work almost certainly regardless even if you're on a new version of node you can install the packages from an old version of noden most of the time these things just work for us there are exceptions like moving from V2 to V3 or moving from webpack to another bundler but node itself even with major version bumps tends to be fine PHP to be fair is simar SAR here but Drupal seems to not be in the slightest because people have struggled so much with these upgrades that at least they're doing the right thing and they're maintaining and doing security updates for the old version because it be terrifying people were on Drupal 7 and it wasn't maintained and it wasn't safe so Props to them for that but it seems like people are struggling a lot to be fair the average Drupal user isn't somebody that's excited about doing upgrades and learning new things and making changes that's just not what the Drupal community in generally the PHP Community is about they're there because they don't want to do those types of things they want to have a code base that works the same way it did 20 years ago so I feel bad for them because these developers on Drupal kind of got I don't want to say scammed but they definitely didn't get what they were expecting because the reason they were on and stayed on PHP into the late 2010s was that promise of consistency but Drupal entirely rearchitecturing with Drupal today most Drupal users come from old Drupal code bases so having a new architecture theoretically could make the competitive with modern solutions but in reality it's just hurting their existing users as the commenter here says I don't think it's ever going away at this point there's an entire cottage industry with their own conferences haul around supporting old Drupal versions think about that a whole set of conferences Just for Old Drupal versions then again we have conferences for Super Smash Bros melee a game from the early 2000s but like I can't believe we have that in code the fact that old Drupal is so important to so many companies that they have their own community and ecosystem is actually kind kind of funny and coming from the JavaScript world the thought of there being like a react 15 Community is just funny to me there's the react Community the chaos of Drupal makes the JavaScript ecosystem seem simple in comparison and it makes WordPress look like the epitome of a well-maintained project this is the sentence that when I saw it initially I realized I had to make a video because describing WordPress as the epitome of a well-managed project if you've ever dealt with WordPress is hilarious but this says a lot about how painful Drupal was for this Dev and for a lot of people in the community that's just sad and as much as I love JavaScript I would never call our ecosystem simple I don't really love it that much that's an aside but JavaScript is not simple but when you're dealing with the things that these devs were trying to upgrade to an entirely new architecture with no compatibility that sucks wrapping up they said it was their first and last time working with Drupal it's the only software they've ever used that they flat out hated and swore to never touch again I love this outro by the way if someone offered me a million dollars a year to maintain a Drupal instance I'd instead pay them to never talk to me again that migration scarred me for life this is such a good story I love this I I love when people Express in detail the pain they went through and what it led them to I I know rage bait's not usually productive or useful but I think this really well highlights the contrast between what you would expect from something like Drupal in the reality that solar Dev experienced this is a great comment I'm surprised I didn't get more attention sorry for all the traffic it's going to get as a result of me doing this and a quick shout out to Flavio if you don't know Flavio already he made the AHA stack which is an Astro htx and Alpine stack for doing good full stack web applications without having to go all in on client side JavaScript it's actually a really cool framework I haven't had a chance to play with it but if you're looking for a new stack definitely check that out thank you to Flavio for bringing this to my attention because this this has been stuck in my brain since I saw it till next time peace nerds




## Tanner just fixed forms (I'm so hyped) - 20250315
This is a release I've been waiting for for a very, very long time. It might sound silly that I'm as excited as I am about a form library, but this is an exciting form library. Okay, doing forms has never been particularly easy, especially in tools like React. And as great as things like React Hook Form are, they're not modern is the best I can put it. There have been so many improvements in everything from client server side behaviors to type safety to validation that React Form has kept up with. But in their own words, it's been getting old for almost 4 years now. And this is a tweet from over 2 years ago. The Reactive Form guys built something incredible, and I will forever be thankful for them and their shephering of the ecosystem. But I'm also really fond of Tanner as well as Crutch Corn has been helping lead a lot of these efforts. And after 2 years, Tanstack Form V1 is finally here and ready to go. I want to play the video that Tanner made, but it has copyright and music, which means I might get sued and those bills are expensive, so we need to figure out how to pay those. As always, best bets probably going to be a sponsor spot. So, we'll be right back. If you're anything like me, you're tired of all these AI companies saying they're going to replace developers with robots. They're not. They're absolutely not. But, it's also kind of ignorant to pretend they won't help. Today's sponsor, Code Rabbit, is really good at that helping part. They review your code. They're not replacing code review, but they're augmenting it and making it better. In this PR, where I'm changing how rate limits work in T3 chat, it drew up a summary for every file that I touched. It made a sequence diagram for all the flows that were affected, like an actual good, useful flow chart here. Like, what? Never would have thought a bot could do that for me. Pulled up related PRs, but then it left an actual code review where I started going through my code, leaving feedback, and proposing actual useful stuff. Mark called some things out here, too, but he was really impressed. My CTO even said there was a bug in here. Let me find it. Uh here where it caught an actual regression in how we were handling rate limiting of paid users versus free users. I was doing a bad sum and making a bad comparison. And it caught something we almost certainly would have missed before this went live, which is kind of crazy to think that for 15 bucks a month, we just prevented a potentially huge outage. If you want an AI that's actually practical and not threatening to replace you, you should definitely give a look. Check them out today for free at soyb.link/codrabbit. Sorry about that. Anyways, while you were gone, I watched this and as much as I love Tanner, we don't need the AI slop stock footage that was used here. So, we'll just read the launch stuff. Tanzstack form headless, performant, and type safe form state management for TypeScript and JavaScript, but also for frameworks like React, View, Angular, Solid, and Lit. Stop crying over your forms with a return to simplicity, composability, and type safety with Tanstack form. Sporting a tiny footprint, zero depths, framework agnostic core, and a granular type safe API, Tanstack form is the perfect combination of simplicity and power that you need to build forms fast with peace of mind. Super excited about this. Specifically, the like idea that this is the first form library that's really happened in the deep TypeScript era. The first TypeScript era was having a types file in definitely typed. Second TypeScript error was embedding those types natively into your package so that you could use them to maintain things better. And then the final era where we're on, I shouldn't say final, the era we're in right now is using inference and validation heavily to make type safety go beyond the function you're calling. Bit of history. It was nearly two years ago when I saw Tanner's blue sky post that he was working on a new project, Tanstack form. God, it's crazy. This was almost two years ago now. And fun history lesson here. Corbin was actually working on his own form management library house form and joined almost immediately to help Tanner instead and then became one of the lead contributors to Tanstack form and largely led the efforts. At the time Corbin had house form and was immediately enamored, fortunate enough to attend a hackathon that Tanner was also going to soon after. That was the clerk office hackathon. That was a really fun opportunity to dive in and see them hacking. They got some time to work on integrating some APIs from house form into the project. Since that time, Tanner handed much of the reigns of form over to him and a wonderful group of additional maintainers. So what have they built? Features. One of the advantages of being in the oven for so long is that tan stock form launches with a flurry of features that you can leverage day one. Here's a few. Type safety con form equals use form. Default values name empty string age zero. Now you can render form.field field with name first name and it will tell you that's not a valid field. Formfield name is name children is field number input. Type will correctly tell you that name is a string not a number. So this will error as well. Form field name age validators. You can even add a validator on the form field itself. So here we're going to make a change where it returns to young true on change if the value is less than 12. And now we have the number input and ty will correctly tell you that error map on change is an object not a string. And here it will let you populate those errors. That's really cool. It's cool that this is field-based separate from form validation. So this lets you embed something in the UI here while separately tracking the form validation. So here we have the user schema has age which is a number that's greater than or equal to 13 has a custom error all using zod. By the way, it works with all the standard schema compliant schema validation libraries which is ZOD, Valibot and arc type and theoretically more in the future. I think the effect type thing will work here as well. We have use form default value onchange user schema form.field name age children. That's it. There's even async validation. So we can handle this with an abort signal based cancellation validator on blur async. And here con current age is we fetch the current age on profile with the signal and the signal is passed here so we can cancel and debounce during that. That's really nice to have that built in. So I don't have to do a bunch of work to pass a signal to do abort. It just has it baked in. Not only do we support multiple frameworks as we mentioned from the start, we support multiple runtimes as well. Whether you're using React Native, native script or even SSR stuff like next and tanstack start, we have you covered. This is uncontrolled, right? Just to be 100% sure crutchorn that this in React Native isn't going to be a controlled input field. It is controlled someday. Controlled is better for most things. It is much worse for React Native in particular. React Native controlled inputs are rough. I love when posts like this exist. They're so helpful in understanding the intent of the authors. This is a philosophy post on the Tanstack forum docs. These pages are great. I would have been so much dumber talking about stylex if it wasn't for the thinking and stylex page that described why this project exists. This rewired my brain meaningfully and I'm excited to see the philosophy page here. Every well-established project should have a philosophy that guides its dev. Without a core philosophy, development can language endless decision-making and have weaker APIs as a result. This document outlines the core principles that drive the development and feature set of Tanstack form. Upgrading a unified APIs. APIs come with trade-offs. As a result, it can be tempting to make each set of trade-offs available to the user through different APIs. However, this can lead to a fragmented API that is harder to learn and use. While this may mean a higher learning curve, it means you don't have to question which API to use internally or have higher cognitive overhead when switching between them. I think I agree, but you have to be careful because if you're not, this is also how you end up with the use effect problem where use effect has two explicit arguments where you have the function you pass it and the array. If you don't pass the array, it behaves entirely differently in a way I would argue almost no one ever actually wants. But there's a third implicit argument where if you return a function in here, you can console.log log cleanup and this gets run when this gets cleaned up. Well, it won't because I forgot to put an empty array here because an empty array behaves entirely differently than opting out of the argument. This is an API that works for a lot of different things. In its current state, this is being used as an onmount. So, console log onmount and then here it's unmount. This is useful, but if we put a value here, it behaves entirely differently. If we don't put an array here, it behaves entirely differently. This is one API that does too many things. So unified APIs can be good. Yes, the learning curve is higher, but you also have to be careful to not stuff one API with too many behaviors because then it becomes more and more confusing to maintain. Crush's in here. They don't mean this in the way that we only have one API for everything. Rather that they have one set of APIs rather than two entirely different. like react hook form has register and controller which are entirely different. That is a fair point. It's a tough line to walk and thus far seems like you guys walked it very well here. I just wanted to call out that it's a thing you have to be careful with. You can't just stuff everything into one API and expect it to work. Use effect probably should have been three APIs. Back to the philosophy though, there's a lot of good here. Forms need flexibility. Tanac forb is designed to be flexible and customizable. While many forms may conform to similar patterns, there are always exceptions, especially when forms are a core component of your application. Yes, I'll never understand people who were convinced formic was the end all beall solution. Formic was very much the provider of the components that you used. And if your stuff didn't fit their way of doing it, good luck. Have fun. I also like the call out of without the tears, stop crying over your forms. It's interesting that we all cry with forms because they are rough. Yeah, Formic was not the right abstraction and there's a reason that its creator is deep in AI land now. Formic was not meant to survive. I don't even think he recommends that anymore. Yeah, we need flexible forms and I'm thankful they went this route. As a result, Tanstack form supports multiple methods for validation. You can do timing customizations where you can validate on blur, change, submit or even on mount. validation strategies where you can validate on an individual fields, the entire form or a subset of fields. Custom validation logic where you can write your own validation using libraries like Zotter valot. Custom error messaging obviously and async validation. So if you want to do some asynchronous stuff like debouncing or handling it on a server or running something that's complex enough that it needs async behaviors, having all of that with one API is actually really really cool. Controlled is cool. Okay, I agree. If you can do controlled, it's good. But in React Native, controlled inputs are rough. They do call it React Native here specifically because you don't have to worry about the lack of a DOM because you're not reading from a DOM elements ref, which is how you do uncontrolled inputs. I should probably show what I mean by controlled versus uncontrolled. Quick overview on control versus uncontrolled. Thank you T3 Chat for generating this. This is a controlled example. This form has its state name set name all as a use state empty string handle change sets name to be the e target value and then we have on the input here on change is bound to handle change. So whenever a change occurs its value will be stored in the state and its value is set to name which means every key press input is triggering this function which updates react thereby updating the content of this field in the form. So it's controlled because React is controlling what the input has in it. The form, so to speak, has its behavior and its values owned by React separately. This is nice because you never have to worry about the state between these two things falling out of sync. And it's also the simple obvious way to do it. The key here to recognize is the submit function where here submit just uses whatever value exists in React. Let's compare this to an uncontrolled form. Notice that we're missing a function here. We don't have an onchange because on submit we're not going to take the value from React. The value is just what exists in the browser. So we pass default empty string. We don't pass a value or an update function to input here because we're not controlling input. Input is an uncontrolled field. When you submit this form, we traverse it to find this field because we gave it a ref name ref for this input. So when we are actually submitting, we grab the value that currently resides on this and then use it. The benefit here is that we don't have to let React do things to update the value on the screen. The negative is we can't do things like validation until specific things are triggered and we have to write those triggers ourselves separately. That lack of control, so to speak, makes it harder to build a good experience, but it also means you're less likely to accidentally cause the sticky keys problem where you're typing and React's taking too long to update the page. So, you end up typing letters and not seeing them appear in the input. This is particularly rough in the React Native world right now. I have a whole video about this that I did a while back with Dan Abramoff complaining. So, I understand this is the right way to do things, especially if you provide a performant enough API, but man, it'd be real nice in React Nave in particular to have a good library that doesn't do this. I'm sure in the browser, it's not only good, but probably better than any alternatives. This is why they think going control makes sense. It's predictable because you can predict the state of your form at any point in time. It's easier to test. It works without a DOM. It has enhanced conditional logic, so you can show hide fields based on forb state, stuff like that. As well as debugability. It's so much easier to debug when all the state lives in React. Generics are grim. You should never need to pass a generic or use an internal type when leveraging tanstack form. This is because we've designed the library to inference everything from runtime defaults. I love this. Typing things properly in react hook form is an arcane wizardry thing. I've gotten decent at it over the years, but it's never easy or fun. This isn't to talk on RHF. It is a phenomenal library. If anything, the two plus years it took to make Tanstack form shows just how good RHF is. And apparently the ability to avoid generics took us so long to figure out. It's a huge part of why this took so long. Makes a ton of sense. But as a result, you get really nice DX here. Default values, name, bill, age 24 as my form. So this is a type that has been defined so that you can add additional things that maybe aren't encoded in these default values. So if you have fields that aren't here, but you want to include them, make a type my form as bind it there. Good to go. One of the main objectives of Tanstack form is that you should be wrapping it into your own component system or design system. To support this, we have a number of utilities that make it easier to build your own components and customize hooks. Interesting. So you also have the option to create your own use app form hook using their create form hook helper so that whenever you call form.field it will use the component that you've already built for it. That's really really cool. Actually one more huge thing that most of these solutions don't really consider is the frontend backend relationship and I am so hyped to see them take this seriously with Tanstack form. They have a first class app router integration. So here they're importing from the next.js package for form options. Here they create form options and now we have a use server file which means this is going to create a server validator. Here we're exporting the async function some action. We don't know what the previous state was but we know form data second field. We try await server validate catch. If we get an error we return the server validation error. Otherwise we throw. Now we do whatever we want. Where this gets super cool is when we go into our client component state, action is the use action state react hook. I don't have the time to dive into that one here just yet. We have use form and the use form call allows us to transform the state using our state call from this use action state. Here we have form errors which are use store. This is I'm assuming where's you store coming from? Nowhere. GR, keep your examples up to date, guys. I get it. There's a lot of code in this repo. Yeah. So, you have the use store call form.store form states form state errors. That's how we get the errors out. Form action action as never. Got to love fighting these types. But the benefit here is now we have the action that comes from our serverside code all as a first class citizen letting us import a back-end function in our client component bind it to a form validate each of the fields on client but also handle all these edge cases on server. That relationship between the client and the server side has never been stronger. Apparently the as never was only here because React 19 hadn't shipped yet and now that it has it's not even necessary anymore. So convenient, so clean. Yeah. The only binding here is the onsubmit to form. Sububmit. And if that wasn't to get hit because, you know, JS hasn't loaded, the action will take over and still behave totally fine. But that's like the only onsubmit code that has to exist. And technically, it's optional, which is really, really cool. It's dope to see like the server side being thought about and handled here. Obviously, Tanstack start is a first class like citizen here. The Tanstack start example's got to be nuts. Let's check it out quick. Create server validate form options on server validate if values less than 12. Server validation you must be at least 12 to sign up. Handle form. Create server function method is post validator. Oh, good old builder pattern. We love that. That server function is coming from Tanstack, right? Yeah. Create server function is a Tanstack thing. So we create server function method post.validator data is unknown. If it's not an instance of form data, we throw an error. of course return the data and we handle it by validating it. If there's an error, return the validation error. Otherwise, you return it has been successfully validated. This is so clean. A builder pattern for creating a server function that feels a lot like you know the thing I love doing with TRPC right there to create a function that is then super easy to use. Need to way to grab the form data from server validates response using another server action. Eh, create our function get handler. This I'm a little more confused about. But uh the important part here is we create the route. We have our home. Use the loader data to get that default state. Con form is use form. Form options. Transform. Transform and a form library with the form options and the use form hook. I'm scared to think of how many times I've said form in this video. Anyways, form errors. Same deal. This is super clean. Like how is this all of the code to bind the front end to the back end with proper form validation and management? In this one, as I said before, no onsubmit because it's not necessary because we bound it via the handle form. URL call here. It's just all handled now. It's so good. And if you had a custom field so you didn't have to do the syntax here, it'd be even cleaner. This is gonna allow for actual maintainable form code for the first time like ever. And I'm genuinely really really hyped about it. Here we have a simple form. God, the syntax is actually really really nice. Use form default value first name last name onsubmit console log simple form example form has an onsubmit on it. We do all the classic prevent default stop propagations and then finally form.andleummit. We have form.field. field has own custom validator here. If no value, then we have the error of first names required. If it's less than three, first name must be at least three characters, otherwise undefined. Cool. Avoid hasty abstractions. Render props are great. I agree. So, we have field here in children. This has all of the data. Field name, which is the name of the given field. Label HTML 4 field.name, first name. Input ID is field.name. name is field.name value field.sate.value on blur field.h handleb blur that is cool field here last name same deal just none of the validation form.subscribe subscribe. Interesting. Not as familiar with this API yet. Children can submit is submitting. These are the different states that come from the selector. Oh, that's really nice actually because we don't want to have this update on all of the different states that could potentially change. So instead, we pass it this selector almost like use effect where you're telling it like update when these change. Apparently, they have a better example. Thank you guys for catching that. People page close. Cool. Use app form simpler version people form options form options which is a reusable thing that's actually very nice as default values for all of this stuff we have that we also have validators here on change value error if no full name full names required if no phone phone is required onsubmit cool and here form onsubmit again prevent default form handle submit form app field name full name children field.text text field. Where's app field being defined? Let's go here. Use Okay, here we are. So, we have in our custom create form hook declarations a field component, a form component, and field and form context as well. And where are these coming from? All from form content. Cool. So, this lets us create contexts that are now accessible within our custom components. I wish I saw what these were actually being used for. Yeah. field.component is a really nice pattern. It's cool having this thing returned from a hook that can be used as a component. I've used this pattern before and I thought it was a little dirty because I hadn't seen it enough. It's nice seeing others agree because this is much nicer. I've done this funny for form stuff in the past. I I think this is really good DX. Okay, so fields can call the use field context hook, which is where things like the state value come from, which lets you write a generic field like this. So now this text field can be reused all over the codebase, however we want to for whatever we're building. And this custom text field definition can be accessed whenever we want now, whenever we call this form builder. And the field and form context are the things that populate this value when you call it. That makes more sense. Form app field name first name children. Yep. Notice app field instead of field. App field uh provides the required context. That makes sense. So not only allows you to reuse the UI of your shared components retain the type safety you'd expect from tanstack form. Typo name and you'll still get a typescript error. Love that they're using tanstack store to power the update so that it doesn't have to rerender aggressively whenever things change in the context layer. That's very nice. That field solves many of the problems with field boilerplate and reusability. It doesn't solve the problem of form boilerplate and reusability. In particular, being able to share instances of form.subscribe for say a reactive form submission button is a common use case. So form.subsubscribe is disabled when submitting is happening as a label. You want to be able to use this button to multiple places. What's cool here is the form component for subscribe button can be passed. Now we can call form.subscribe subscribe button, label submit, and that will handle submissions for this form correctly. That is actually really, really nice. Breaking big forms into smaller pieces. Sometimes forms get very large. It's just how it goes sometimes. Yeah, so many of these libraries haven't been considerate of this. React hook form tries to, but splitting up a React hook form thing into multiple components is just not great. Tack form supports large forms as well. It's never fun to work with hundreds or thousands of lines of code long files or god a thousand plus line component. I've been there. Their solution is the with form hawk. So we define child form here with form. These values are only used for typeecking and they're not used at runtime. This allows you to tripleform ops with form options without needing to redeclare them somewhere else. Optional but adds props to the render function in addition to form. So we have a title default child form. And here we have form and title p title form app field name first name field field field text field you get the idea. We pass form automatically by this with form call here. So now we know the render has access to form as one of its props and we can write the component and do what we expect to there all totally fine. Notice that there are zero type defs here because all of this is inferred. That's what makes this really nice. Doing something like this in React hook form would have been hellish with the amount of type definitions you'd have to write. No type defs here. None at all. This whole thing, actually, this whole file example here, this is vanilla JavaScript. There is no types in here at all. This would work just as well in JS as TS as long as you have a decent like editor setup because it's using inference properly. Inference is really good. Having to define your types everywhere sucks. Now you don't have to. Now you can have a child form, pass it the current form, handle the sub fields, and it just works. Why a hawk instead of a hook? While hooks are the future of React, hawks are still powerful tools for composition. In particular, the API of use form enables us to have strong type safety without requiring users to pass generics. Is this supposed to be use form or with form? These should be with form. Small typos. Why am I getting ESLint errors about hooks in render? ESLint looks for hooks in the top level of a function and render may not be recognized as a top top level component. Annoying tree shaking form and field components. Oh boy. While these above examples are great for getting started, they're not ideal for certain use cases where you might have hundreds of form and field components. In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form hook. The fact this thinks out these giant code bases is really nice. If you're not familiar with what Tanner did before, before Tanner went full-time open source, his main project was Nozzle, which is a really complex dashboard for managing everything about your SEO for your like enterprise products. This is not an easy product to build. It's a big part of why most of Tanner's tools exist now because he was the lead, if not at times the only front end dev at Nozzle, and he had to build everything to handle a codebase as big, complex, and stateheavy as Nozzle. That's why he built things like React Query. That's why he built Tanstack router to make it easier to manage the URLs and know that all of the right things are being passed to the components in the right way. That's why he made Tanstack form because the amount of different form fields on a page like this is enough to drive someone mad. And if your codebase is big enough to really benefit from these is also big enough that you don't want to load every single field and every single component for every single form on every page with a form. Now you don't have to. You can just call lazy and suspense here and it's fine. apparently deal function text field lazy from React text field is a lazy import. Now we can pass it here as normal and it behaves totally fine. So nice. Here's a nice simple example. We've defined our custom text field which uses field context in order to bind its input. We have a subscribe button which is a reusable just like text field uses form context and it has the selector for is submitting. And now we can use that to disable or enable the button here. Super nice. We have our custom app form here with the different field components and form components as well as the context. We define form options to be used in multiple places. Now we have this child form which dumps form options as part of its with form call. Also has a prop for its title. And now we have the render where we'll render the title as well as the app field with the name first name and its child will be field.ext text field, the custom component that we defined. Form app form, same deal. Form.subscribe button label submit. All works as expected. And then rendering it is real simple. Use app form. Dump the same form options. Child form form equals form title equals testing. So now that overrides the title and everything behaves as expected. That is super nice. Do you need to reuse the state like default values? Yes. Then use form options. No. Do you need to reuse custom validation functions? Yes. Wrap use form hook into custom app. No. Do you need to reuse custom UI components? Yes. Create hook forms? No. You reuse the whole subsections? Yes. With form? No. Form subscribe? I like this a lot. A a flowchart to help me decide which API I need to use is a really nice thing to throw into my company docs so that we do this correctly. Great. It's rare that a library comes out with all of these resources already created day one. and it really helps with the adoption here. I haven't used it yet, but I can say just looking at this pretty confidently, this is the thing we should look to as our default form library in React going forward. I genuinely can't imagine using another form library now. And huge shout out to the team by the way. I've been bugging them for a while and every time I was bugged, my answer was a default. By the way, I'm waiting until they tell me it's ready. And I got the DM yesterday from Crutchorn. Hey, Theo, now's the time with a link to the announcement. If they took 2 years to tell me that, now is the time. Give this library a shot. I am so hyped. I will absolutely be using this in the near future. And if something burns me, you guys will hear about it. But I would be very surprised if I had any problems that didn't get fixed within hours of me reporting them. I know how Tanner and his team work. They work really, really well. So once again, shout out to Crutchorn, shout out to Tanner, shout out to everybody else working on this. And one final shout out to the React Hook Form team for being so supportive every step along the way, for not pretending that there isn't opportunity for people to innovate further, rather seeing these things, supporting the community efforts, and continuing to maintain a library that will be used in millions of apps for all of time. As Crutch Corn just said in chat, the Tanzac forum team loves the React Hook form team. We shouldn't see this as an eitheror or friends versus enemies. This is an attempt to take the lessons RHF taught us and push them and push the limits of them in a fully types safe world. The level up going from Formic to React hook form was unbelievable. There's a reason we all moved over. I'm excited to see if Tanstack form in practice has a similar level of oh this is way better. I cannot wait to see where we end up in the future. But for now, I finally have a form library I'm excited to use. And I can't remember the last time I was excited to write a form. Enough from me, though. I want to know what you guys think. Am I overhyping a form library or are you going to start using this today? I can't imagine using anything else already and I'm curious how you guys feel. Until next time, peace nerds.




## Teaching NextJS To Primeagen - 20221014
some point this month hopefully no my my windows installs are cursed enough as is streaming it is just begging for trouble uh don't yeah I mean if you want to have a folder to contain all the stuff that we do today maybe yes but yeah yeah make one actually cool sounds good to me I am excited for it the plan I think is we're going to start by doing nextjs the nextjs way initially get everything set up and then from there we're going to do nextjs the T3 way so I could show you what it's like if you trim all the fat should be fun also just realized my stream can't hear you hopefully I just fixed that uh howdy stream sorry about the weird time I know everybody I told you that we'd be live in like an hour or so but turns out Prime agent's bad at time zones because he's a programmer and we're all bad at time or date time that's what we do we [ __ ] up times and We complain about year 2000 but we're here we're streaming we're teaching Prime engine xjs it should be really fun I know nothing oh do you want me to stop my feed or do you want me to continue to have my feed as is oh keep having your feed as is this is great I actually am literally I just took your feed and put my camera over it on my end so it's like the thing ever I'm basically just raming you okay perfect yeah this will work totally fine for me nice and simple cool generally I want to like it be the the devil on your shoulder complaining as you start trying all these things out rather than like me taking over and also I can complain about your Vim set up while we do it should be super fun this should be good good stuff let's do it let's get start happen cool first and foremost let's get you the create next app setup so good old can you tell me what nextjs is nextjs is a backend framework focused on providing a good experience for users in react okay think okay kind of like PHP rails but instead of serving an HTML file it serves a react application okay okay I have a I now have a box okay good now I I officially have said yes to the next JF conference without knowing what it was I now know what it is I am now pretty good all right so npm npx NP is npm ex executable let you execute a package without having get installed create-- app create next an important Detail no kill it kill it stop it control C it Das DTS oh yes we we do not use JS in this Camp all right I like it I don't I don't want to use JS yeah it's emotionally painful I very much agree I have a hoodie that all my jumping to definitions just stop working and then I don't want to program anymore oh also painful I God I I was not a JavaScript or web dev fan for most of my career I started actually doing Elixir at twitch originally and I moved over to JavaScript because we had adopted reac and typescript in a rewrite of the twitch site and I fell in love with it then up until that point I couldn't stand front end but typescript made it a lot more viable for me typ scripts definitely more bearable I I would definitely agree with that I I I had a Time the amount of errors I've had that were just like ah dang that actually was undefined it's just it just hurts too much yep all right perfect I'm here what's the play let's hop into Pages first and foremost all right pages so the important thing to know about the Pages directory is that it works a lot like the or the view directory in or what's it called rails or traditional file based routing or something like PHP every file we put in here is now going to be a rout in our application so if we made a new file here like d gen. TSX that's now going to be a page in our application and in here we can export default function name it whatever does need to have a name oh F can we do that sure yeah just return some HTML just return div test yeah uh hello world right there we go classic actually really if we're going to do this we should probably be hello dent right perfect yep all right got that then mpm run deit quick hold on one second what was the thing called it was called next to J oh not Netflix nextjs sorry someone's turned off my monitor I can't actually see anything all right good there we go now I'm going to go into Dingle and Di it in here and let me open up another one all right so what do I need to mpm run Dev should have already installed everything run Dev classic cool all right 300 we should be able top into that locost 3000 there we are that's the homeage and change the url slen D Tada my goodness this was simple yep so let's go into the magic of nextjs the thing that makes it different from like because theoretically everything we have right here you could just have a a code gen router that takes these files and creates a single page app but there's nothing here that's through the backend yet this is just server pages one interesting thing we can see quick though if we go to the browser again oh the browser yeah yeah go to the network tab I will go to the oh wait hold I'm in Firefox I don't know actually how to I don't know how to use Firefox so here let me go to local 3000 uh I'm going to put you over on one I genuinely have no no idea how to use it cool wish I have light theme or there we go open up that oh God the light theme yeah gross yeah oh so refresh the page so we have data in the network tab the interesting part if we scroll up to the top here will have the dgen like file here go if you scroll to the response on the right there yeah uh click the prettier button on the bottom my face is going to cover most of this sadly but uh what you'll see here for those who I'm not covering it for oh perfect is that inside here you're getting the actual HTML contents of the page hello Deens we're not getting a script tag that runs on the client and then generates the page we actually did generate HTML on the server and if you were to turn off JavaScript on this page the content would still be there because it's being generated on our server running the react code okay okay that makes sense so we got the server side render of the actual page and then for whatever reason the other stuff came down that would allow it if I had more fancy things back like nothing happened [ __ ] is this man a Chad you need that 4090 TI that can't actually run because it catches on fire isn't that like the reason why the 480 is or the 490 is not coming out is because it it actually just explodes yeah the the 490 is insane amounts of power but it is very cool what they're doing with it I think av1 is going to be a really big deal in the next year or two but yeah right now it's uh we got a way go build that crap yeah back in the day before av1 we had what it was referred to as al1 aim low and coding because we used to aim low to be able to bring the best quality with the uh least amount of bits interesting very interesting yeah I used to be known as I only knew it as al1 until someone's like it's av1 now I'm like oh okay it's al1 my book what al1 is actually I I like that naming a lot better a1's confusing because it looks like Avi and we definitely don't want Avi we don't want Avi all right I'm ready okay so we now just done it so what do I do now let's do some backend let's go back to the pages dgen file quick we're going to show off one of the one of the signature features of nextjs I I will preface this with I avoid this feature at pretty much all costs if I can nowadays but it does do a good job of highlighting these problems somebody men I want Focus can be one sec to refocus my camera there we go quick question uh what would be the purpose of you I guess let's do it and then let's talk about why would you want to use it and why would you want to avoid it yeah of course all right so let's do it first we're g to use one of these fancy magic functions that next CH provides called get server side props so we're going to export const get server side props equals export cons get server side props equals equals and this is a function so we don't need the inputs for now yeah uh that should work with the equals function syntax yeah cool I normally I do aror function same difference yeah but what we want to do here is return props so we're going to return an object that has props colon oh it if it doesn't have props col and it gets very upset and then in this we can return so so I usually just a test it we'll have like time or subscribe perfect that works there you go yep so now in our press subscribe button already people watching on YouTube just do it this is ridiculous all right come on hit that sub button it's free so and so that must mean I can go in here and do some sort of props in here let's just console log it to see what we get for now uh it's angry that I haven't given it a type I'll just uh TS ignore just give it any for now there we go uh that means I should be able to go back here refresh it and see look at that it's printed it twice does it always print it twice okay printed it twice it's rerunning the component because react likes to do that a lot but the interesting thing if we check oh is it because it landed and it was already rendered so then when react started running it was just like I gotta run now with these things no uh there actually you'll see why go check your CLI where the dev is running right now and you'll see it's in here too I don't even get that at all why is it in here it's here is there a web socket that's set up during development time that pipes all console back here no what is happening here SP saying that my mic is too loud and you're too quiet I'll just knock myself down a little bit hopefully that'll bounce that out is it on my side we're golden yeah I think that on my side I'm just loud and I don't know why you're quiet but we'll deal with it no worries I balance things on my side so we're gonna talk about hydration here so the first thing that has to happen when we send HTML to the user is we have to generate the HTML for the user correct so the logs you're seeing in here are the logs from when we generated it on the server so it runs it twice on the server as well it actually only should have ran it once on the server but we refresh the page once oh we refresh the page oh yeah boom okay yes that makes sense so it runs once on the server why is it running twice on the client though because it's not taking these console logs and piping them over it is actually running it twice on the client can I make a guess before you tell me sure uh let's go uh console log I meant to say hello but we got fellow dang it that's not it I figured that maybe since there's props it always passes them in no okay nope this is react doing its thing in Dev mode so react likes to test what happens when your components have their renders interrupted so it's constantly interrupting and rerunning your renders at at least once per Mount so effectively what happened there is react silently unmounted and remounted your component to make sure that it doesn't break in a billion disgusting ways and hold on just to help me I read this somewhere this is because at some point when someone renates back from a different tab react is going to run some sort of hey you need to re-render everything type deal it's because in a concurrent environment where all events can be interrupted you need need to have your components written in a way where its render could be interrupted cleaned up and redone so let's say we have a chat we have a crappy chat website where we type in the name of a channel and it connects to their twitch chat but we are autoc connecting every time we press a letter and more importantly we are interrupting those presses when we or we're interrupting the connection whenever we type a letter because with react in concurrent mode input priority is above all render PRI priority so when I'm typing in the name of a channel every time I press a character it's going to kill and reset whatever the effect is that does the connection so it's important to write my code in a way where I can interrupt a connection event with me typing and if the fifth connection event from the last key comes in sooner than the third one it knows which of those to use as the connection that we care about so it's more than anything it's about writing your effects and your side effects in a way where interruptions don't cause weird things like connecting to your server incorrectly or out of order so does that mean that during a react render in concurrent mode you'll have a slower render because it must have to give up the process Loop so it does some sort of set timeout of some sort set next tick it's using some weird proprietary Chrome stuff that's not fully like shared yet where all events have priority and chrome itself is smart enough to deprioritize render events in favor of user-driven events so okay I I want how does it how does it stop job there must be some function or something you call to say hey you can now de depri deprioritize me kind of like next tick because you can't really stop Javascript running in the middle right you have to do something else right yes I don't understand any of that stuff well enough I just do what Dan abou tells me and what Dan abou tells me to do is to clean everything up regularly I see people in my chat like are not fully understanding like I literally said this is a bad example but it is an example of a render with consequences that is driven by user input and that's something that the react team is focused on a lot it's how do we handle a lot of renders happening when users are doing a lot of different things without everything falling apart and a lot of that is having a direct cleanup and garbage collection so to speak relationship with everything you do so if you have an effect that does a connection that same effect should have a return that cleans up the connection so that everything is handled correctly you you real okay I'm just happy long as we don't get to actual concurrent JavaScript imagine how bad true concurrency would be or parallelism at this point would be it would be it would be emotional the amount of uh code you could potentially swim through trying to figure out what is actually going wrong don't get they can give up yeah yeah exactly web workers is a great example where parallelism is really it's still just really hard even though it's two separate context you get two different isolates right V8 isolates where you're actually running completely unemori from each other and it's still hard because it's it's just like not easy I have seen one really good use case Forum though have you seen Party Town no is that an nft it's up there with quick City for terrible named things from Builder iio as good as they are the beauty of party town is it's it takes things that shouldn't block like analytics primarily and pushes those out from your like point of concern into a web worker so like if I have segment or Google analytics I can run those in a web worker with a really minimal binding between that and the Dom so it sends off these annoying tracking events to not be blocking which is really nice okay okay that makes sense oh hold on I I didn't say hey taste the Rambo I must have missed I don't know why this this event didn't kick off thank you tast tast Rambo where are you there you are thank you you're way up there I appreciate that I don't know what happened didn't I didn't hear a thing go off yeah anyways let's hop back into next now that we've seen I'm already there a serers side prop here we can try and do this the the correct type Safe Way which they don't make as easy as I would like for them to there's an infer get server side props uh helper I just want to find it quick Okay Google searching so I am sure uh infer yeah so there is a in next uh there's an infer get server side props type helper if we go to the props colon any I don't know if you're Vim set up to autocomplete Imports as we start typing things I can I can I can autocomplete yes cool so delete any and start typing in capital I infer oh capital I infer like that yeah get yeah in prer get server side props type that side yep and then are you impressed that my Vim just did it it says it can't do something's wrong here what's the generic yeah so yep now it needs to take uh so at the end it needs uh brackets and in that we pass it type of get server side props for our function above oh nice get server side props okay nice you called those brackets which emotionally hurts me but I'll let to go what do you call them they're angle brackets angle brackets sorry I I dropped a word keeping it simple all right I don't get any autocomplete for that props dot interesting it saying the we're doing something wrong oh I know what it is this is so stupid uh make the function async really yep is that is that really it they're built-in helpers are y That's What It Is they're built-in helpers are [ __ ] so I'm showing you all this because I want to show you next at its worst which is when you use nextjs oh that hurt me a little bit I I love that I love the fact that it is Ayn it gives you the opportunity to be able to do the things you want to do but the fact that it's not a sync and you just get nothing or never like yep the the type I if you want to look at the infate serverside props type if you just right click go to death or whatever you do to go to death GD yeah goto death some of the stuff in here is a little cursed they've improved it recently so I don't want to [ __ ] on them too much and I do appreciate what they're doing but for a while this was cast as uh a record string comma any it was very scary it already looks painful I'm at the I'm always at the point where when I look at this stuff I'm like I don't I don't quite get it it's okay I don't have to I don't have to be that good at typescript so yeah this is the basics of next from here we are now able to do whatever acing stuff we need to on our server we could fetch data from database we can hit another end point whatever we need to do get that data and then that will make it all the way to the compos opponent below with a couple weird inference points on the way okay and so whatever I put inside of here does that make it down to the client anything that can be Json serialized so if we go back to the browser quick and we look at the HTML that went down yeah hold on someone turn off my screen I'm gonna hold on everybody I got I gotta turn off this screen we're in the middle of someone teaching me here okay you can't be just turning off my screen it's no time for shenanigans okay this isn't all right there we go cool no time for shenanigans so back to the Chrome inspector cool so if we go back to the source for the page if we click D gen on the top in the network here yeah oh that this works too yeah and scroll the bottom here you'll see there is script ID equals next data this is a script tag that is literally just whatever we returned in the get server side props dumped in as a Json blob I don't see what do we say we say subscribe to Theo I don't see subscribe to Theo uh is this the you might have to refresh it because we changed it oh okay yeah there it is okay yeah there it is okay okay so so why did you say this was bad besides for that little like you forgot to do async business okay you learned how to do the async you learned how to do this magical thing right here this assumes you know all of the data your page needs at a page level not a component level okay yes I can I can see that yeah you won't know everything at the page level unless if you can somehow hide every single piece of State information from every single component in the URL is that what they are kind of going for yes okay because I mean imagine if you're on Netflix and it says URL row two column three yep open there's also some rough edges here so let's add a rendered at as a prop so just add rendered at new date rendered at uh our do I do a date now or new date I was just saying new date because that'll default to now cool so now in the component let's console log and do something with it so we can props do rendered at dot let's do something to it though something fun like format it like two local two local perfect yeah local day string and it's a function so call it yeah this looks totally fine and harmless right yeah let's go check the browser quick oh no it doesn't do it doesn't do objects does it because it's not as juston serializable right correct and what it does is even better it auto converts it to a string for you so we get back a string even though the type definition is for a date time because that infer date or that infer type helper isn't smart enough to know that the thing stored on the page in Json is not the same type as the thing that we returned and you can't yeah and you can't really ever do that can you yep so again a great place for rust right and you can put a trade on this thing right you could put something that say you know that I am this certain type of serializable and then you wouldn't actually get this a ever yep there's other Solutions too there's a thing called super Json people are mentioning in chat which is a a super set of Json that you can have hijack your build and whenever it sees Json for page props it will hijack that do its own magic thing and then you get better stuff from it but you are you are throwing away Json in the process so I know and I can't imagine it's probably Json is fast or it's become fast because of super sweet processing techniques in the C++ land and I assume doing that in the JavaScript land it better be tight you better have a very small amount because that sounds very painful yes it's bad so this is some of the problems another fun one is it looks like right here get serite props gets called and then whatever is there goes straight into Foo right yeah wrong it actually goes to the document. TSX file which we don't have so it provides a default for that then it goes to get server side props once the request has been honored through the document page then it goes to the app. TSX file which conditionally may or may not call your component so there's a lot of ways in which this request might not actually have props that make it to your page component five inod but I I I I think I I think I understand that it's it when it gets you're going to be all rainbows and wtfs for a second just nine cat Across the Universe okay sweet so we have this so what do what do I do with all this now now I got this I I want to build something one more piece of next I want to show you then we're gonna go build things the T3 way so go up to the Pages directory hold what's the better way of doing this if I wanted to send something down because you said this is the bad way and you you avoid this what is the better way to do this the better way is a a system where the types are inferred off of the data you're requesting not off of the name of a function and a bunch of infer helpers we'll show that in a bit trpc is going to be the key here but okay I want to show you the one last piece that is necessary to understand how trpc works and the value of it so go up to the Pages directory I think it made a folder named API for you automatically cool it did yeah underscore API y or or API yeah hello. TS this is the last important piece of what makes next uniquely magical you don't just have to return HTML on a next route in the API folder in the Pages directory you can do request processing just like you would in Express so it has a request and a response object that get called with a Handler and you do whatever you would in a traditional Express endpoint I'm pretty sure it's actually using like the express definitions under the hood here so very trivial to drop in stuff I use this for processing like web hooks I use this for forwarding data onto my own servers so like I will request an image from another service return it on my service with better cach headers so it gets cashed in rcdn it's a great way to stub out an endpoint without having to build a back end you make a file do whatever you want to in it and you're good to go okay H so so what is this so API hello how would I hit this thing right I should just be able to hit it from a curl Command right just curl Local Host 3000 or slash API SL hello oh yeah okay okay okay so that's your API route and this is assumed that obviously I get that sweet request response so I get to just do something if I had a database I need to call out I could call out to the database do whatever and then respond everything back okay I I think I understand more of what next is at this point yes most of what next is is what runs on servers so it gives you these two options either you can use a page route that generates HTML and the next JS app that react app that runs on top once it hits the client or you can hop in here return Json return graphql return images whatever else anything that you can process via JavaScript you can usually return in here okay interesting very cool y very I think it it lets me build my application as a bunch of functions rather than a ton of deeply nested objects that have weird behaviors that are existing in 500 different files here I have a URL I go to and I can find that file really quick and that's my end point I I I've always I always appreciated that about PHP I know everyone I'm going to get okay I programmed during ie7 days okay uh I didn't I never got ie6 but still like that's one thing I really liked about PHP is that you could almost guess where everything was at right you'd open it up and be like I have a general idea of where to go in new code bases I always kind of appreciated that I like I mean in some sense I like this but I know that if I was developing any big app page based routing would be kind of a pain in the ass but at the same time it's really nice if I'm just building something small yep I find that it's we're having a massive swing back towards the PHP patterns right now yeah and honestly it's I think for the better there's a lot of Elegance that PHP enabled for us to like write some code write some HTML now the user sees what they need to that has been lost as we've developed all of these super complex tools and you'll even see with like the get server side props example earlier they're kind of trying to channel that but the relationship between the function you wrote and the component you wrote isn't quite tight enough for my liking and generally I am very much looking to move more in the direction of the what what PHP enabled for us productivity wise I think this is the perfect place for us to transition into how I recommend doing things so let's hop out of this I have a general idea of how things should effectively run at this point perfect so yeah let jump out yeah yeah yeah yeah yeah yeah yeah yeah all right right so what cool uh I'm already there yep cool so npx create and we want to create T3 app you can remove the D DTS because it's assumed at this point am I right I we we do ask actually select JavaScript when we ask so just press enter you're good to go now please tell me you just say no we'll have to see if you don't say no I'm I'm unfollowing you on Twitter I want you to know that now what were your project be called Theo JavaScript wrong nice okay good yes this is beautiful that's perfect okay I assume trpc yeah definitely trpc I think Prisma would be worth playing with too but it's going to make setup a little more we'll just do trpc for now okay so quick question I assume this is like a check mark list right I just selected why didn't I get to select oh I think you have to press space and then enter when you're done bad UI I'm sure that plenty of the maintainers are looking and will catch that I would have never I would have literally never press space that is just like not that's fair it does say how would you go how would you go forward I wouldn't even know how to do that okay let's do it again Theo uh typescript this time uh space I assume everyone loves Tailwind right yep Tailwind great okay there we go I have those two in there not that we're actually going to do any Tailwind I'm just gonna show that I'm cool with the kids still damn all right got to appeal okay good thank you for do doing that let's see would you like to run npm install yeah why not nice has anyone here in chat have you guys used T3 app tell me about it what's T3 app like come on let me be cool with the cool kids it looks like it crashed but I just assume it's doing a lot of Stu there we go all right n doing this thing all right there we go let me go back here I'm going to close down this one CD into Theo and npm run Dev there we go awesome let's close down that thing uh and there we go we're back okay we're here let's hop into so we we do source as our base instead of uh like just dumping everything in the main because it makes it much Clear where your code is everything should start there cool we still have Pages if we go into Pages we'll still have an index file but we have a few different things too so we'll just start with index. TSX okay this looks fairly similar okay so this would actually be like the full thing here okay yep so oh cool this is using V10 now I didn't know we were using V10 in main I am very cool with that so here we have data that's coming from the server above trpc EX le. hello. usequery that's actually calling backend code so if we go to definition on hello all right here is the backend code that processes that request all right I don't know what is Zod must be something amazing yep Zod is an input validator it's a way to validate an input so if we wanted to make sure the string that we're inputting here is longer than four characters you could do at the end of after the n you could do Min length I think it will auto complete I'm sure uh no probably I assume it's this one yeah maybe I be earlier Ling so I can do something like that right and now it will error if the length isn't long enough before it even runs our query so we're able to validate all right there through a definition that it can infer a type from and also prevent our code from running unless the validation or uh criteria has been met and interesting here hold on one second uh yes beautiful wife uh JC said he's going to be here in in a while I I might done this he hasn't respond I sent him like several mes how you guys feeling so far about this this is quite the collab he's pulling like 1100 viewers right now that's nuts I also can't help but notice on YouTube I have an insane number of viewers and a disappointingly low number of likes so YouTube Friends make sure you hit that like button it's free there we go I retext I'll let you know I'll text you in five minutes he has I called him and text him I haven't had any I just have no idea all I know is he's picking me up bye sorry my wife I'm gonna go shoot some pheasants I'm gonna actually probably go Miss some feasant the rest of my family is going to actually hit the pheasants relatable I haven't went shooting in while yeah I do enjoy it but let's see all right perfect hold on now I got to tell my wife I told her I'd let her know the moment I knew ready for some hilarious mbers right now I'm hitting 400 viewers on Twitch and 650 on YouTube nice you're winning the YouTube all the YouTube guys you hey uh 3:45 3:45 guys I come from a farm town how are you losing your mind to that like I grew up where there was more cows than people oh he my bad I didn't realize he could hear me still oops you joined because of the twitch notification but you came here that's a first Aaron uh good to know yeah YouTube gang rise up if you really want me to move over to YouTube guys all you have to do is start subscribing on YouTube cuz all my subscribers are still on Twitch it's actually a much smaller number Cooper with the constant gifts God damn it man I owe all of you guys shout outs in a bit thank you all so much I will I promised I'll thank all of you after this I don't my none oh none of my events are going off which is so strange I don't have a single event that it's been going off something must be wrong hey yep I also have been getting a bunch of stuff I'm sorry for everybody that I haven't responded to I will write you personal messages including TJ I'll write personal messages too personal by the way yeah I'm I'm actually having the craziest time ever too I have almost 1,200 on on Twitch yeah this is nuts turns out people like when we talk to each other weird I know we should just upload more bathroom photos I think that's really the win here that is the key good thing we have plans for next comp all right have have you ever have you ever written any rust uh very very little I tried doing one of the Advent of code problems in it and wanted to die all right how about this one when Advent of code comes out we'll do Prime teachers Theo rust I am very down you can send me Fleet picks I'll send you rust knowledge can can we find some way to do community versus Community for mine versus yours rust versus it doesn't have to be rust versus types script but like primagen Deens versus theod Deens for Advent of code I want to see whose Community gets a higher score on average deal uh okay okay so okay so I like this I like this idea um how do we contain how do we have like cuz there's you can do your own custom uh leader boards how do we put them together so that we know who's in who's I guess I think we'll have to have three leader boards one that like everybody chooses to be part of that's like the intersection one and then we have two where you strictly you pick which one you want to be on for which team and then at the end we sum up those two boards and then compare against the main okay yeah okay I like it well how about this one we'll take your top five plus my top five Whoever has the highest score wins let's do it okay and then follow-up question followup what's the bet ah [ __ ] you got to have a bet I'm willing to I how about this one I'll put one week of vs code on the line now the here's the problem you got to put something that's going to hurt you because we want our viewers not to just troll us right they want it so that they do want you to lose because right now one week of vs code my whole chat just said I'm throwing it look at them they're I'll wear a T-shirt and a hoodie for two streams that's a high offer a t-shirt in a hoodie for two streams yeah but that means I'd do vs code for two streams two streams for me is two stream is two weeks you said one week it's still like what how many hours how many hours we really talking here fine not even close guys do you know how how insecure I am when I'm not wearing a nice shirt Theo grow a must guys member's already happening he's actually you don't notice that he's growing a mustache right now yeah clearly I haven't shaved in like two months all right all right I will use vs code for two streams if you use hoodie and and headphones over the hoodie works for me but you don't like that right that that bothers your ears doesn't it it it it I'll just take up my earrings I can survive okay okay cuz I don't I don't want to cause like I mean causes discomfort that is emotionally discomforting but physically fine okay okay yes because same here vs code is emotionally discomforting but it's not like I'm Gonna Leave it actually I might leave it I might have to go on do I might have to go on healthy gamer afterwards and talk about my emotional damage just go on healthy gamer to talk about vs code I gotta get coached out of that hole okay all right let's do this okay so now we have this vs code I don't like the input lag I can feel every keystroke in it just it gets me anyways all right so there we go we have all this stuff and all right so what what am I looking at cuz there's a lot more here than there was on the other one can we start with like a fresh slate or a little bit more of a cleaner slate like we just delete everything between the open pen and the closed peren and the return and everything below export default home is fine too yeah just return a div in the return so it stops complaining all right can I just yeah div that yep all right and what is it div okay good rad awesome nice and simple okay do do you do like something like this how how do you tell it to use hello do I do that just like that so hello is not going to have it's an object so it's going to complain so hello Dot will have things on it it'll be data there's a lot of things on here yep so start typing data Dot and this will autocomplete for the other things it has and since might not exist yet because this is fetching on client side initially then it doesn't necessarily know and that's because you put noish right here the input not the output the reason it's knowable is because this isn't running on server it is generating an empty page on server with all the react bindings and then on the client it is fetching the data all right how does it oh and data must be okay okay so that means data this isn't yours this is from some other object so that's not based off the return here that's based on some sort of definition off react query are you familiar with react query no react query but I get the general idea here yeah so react query is magical generally speaking it is two hooks a use Query and a use mutation hook that you pass a promise and it gives you back caching loading State error State and the data if it's like been ran so you can pass it in this case imagine that when we type the trpc example. hello it is generating a hook use Query that has an async promise that fetches SL API trpc example hello with whatever input we put at the end there is so let's see does that mean it's using some sort of proxy or whatever at the bottom because it's doing this generation yes there's a proxy somewhere in all of this that's happening yes there lives in two places on one side it lives in react where when we type out that object that's just typescript strings underneath and those get compiled into the actual string that's called to the right end point and if we go into the pages SL API directory oh Pages API API there's trpc trpc dots this is the end point that actually processes all of the trpc requests we make okay what is these brackets all the brackets are a catchall which means anything that happens in this route will be passed in as the variable named trpc so if we were to do another page like SL user slash and had uh brackets wrapping I d. TSX then on that page when we call get server side props it will know it'll have ID as like a query param okay okay I I'm a little I'm getting a little lost now because I still are are you familiar with route parameters the idea like in a URL you can have like an arbitrary number or string in it so like SL ID slash some nonsense slash profile I know I know how uis work I'm good with those the the brackets are just the syntax in file based routing to define a variable that is accessible as a rep path okay okay interesting okay so that means all right all right all right I think I I let me reset it to you so in API trpc Fu that would Fu would be some something in here is getting past in the the word f is that what you're saying okay okay okay okay okay okay and those inputs are the your or those inputs in the case of trpc are the different functions that you're going to call so in this case it would be example. hello is being called with the input we have here okay it's being called with this thing right here yes so if we go back to the definition of this so go to the example. hello just go to def on hello if we change text to be message on the input line uh this one uh I was going to change it uh in the one here first so that it's a different key and we'll see we have an error there but more importantly go back to the HTML or the client side we have an error here because the input for this thing changed even though this is client side code and the other thing is server side code it handles that correctly I I I really I do I do very much so enjoy good solid type definitions I like that that's very this whole stack at least the T3 side of it is focused 100% on full stack type safety another thing we can do here just as we ran into this problem before uh change message back to text just so that it stops complaining everywhere yep let's add another key to the return uh of fetched at or rendered at something like that oh R oh yes uh rendered at new date this guy and now if we go back to the client side we can console log do something with it and it'll be fine uh oopsies uh that's console log hello do data. render dat right yep and we can do something to it too like do to local date time just something that won't be we last time yep yeah yeah yeah yeah yeah yeah uh all right so we did that we don't have D gen that page doesn't exist just change the url to be the Y that's right yep and now it's able to fetch that and we can see in the console there that it ran so how does that work how does it know to send across a date we wrap the trpc implementation with super Json because we know all of the inputs and outputs of this one piece which is the trpc API and by condensing super Json usage to just this one thing that you can only access through this one client it's much safer it's closer to like how grpc Works funny enough and that the client and the server share this understanding of the world that understanding being both sides use super Json yeah okay okay okay difference being is that grpc uses a proper encoding format yep super Json is a madeup encoding format that happens to be be very useful for these use cases uh did we just get a Dr K raid oh we did think you might well I didn't know that we got that did we sorry I have notifications off so I'm not actually listening oh my goodness you didn't have to do that Dr K you did not have to do that thing oh man I appreciate that for those that don't know definitely check out Dr K yeah there you go thank you whoever did the shout out thank you Dr K is awesome uh shockingly enough I don't know how this has happened I don't know what weird reality we accidentally glitched out but I do feel like whenever I listen to Dr K uh I just feel like a lot of even though we've come from very different worlds very different you know it seems like very different raisings how we formulated our opinions and all that they are fairly close to each other and so it's really cool I really like that I'm very happy I've been listening to his uh show for the last few days I love I like the advice I love the advice on uh it's usually um what's it called comparisons the thief of Joy said something along those lines right uh I I really like that I think it's really really good and I think as especially on Twitch holy cow there's just so much there's so much need I don't even know how anyone who's 18 to 24 year old honestly does it my 18-year-old experience was so much easier it has to be literally a thousand times harder I just don't I just don't understand it so I love it I love what you do so thank you very much I appreciate that obviously all the same goes for me have been a a long time healthy gamer fan especially back when I was working at twitch it was so cool getting seeing twitch take mental health more serious as a result of the work that was being done by healthy gamer and Dr K yeah appreciate yall immensely nice thanks sh yeah shy I I I made a a silly YouTube where I just pulled out something that I think Dr K does really good which is making more room for people to speak I'm very good at speaking a lot and I realized that I should probably just take a step back and just be like hey what do you think what do you what do you think about this because I don't consent for uh descent enough if you know what I mean I feel you mhm thank you though appreciate it hello everybody we're talking about uh programming for those that are all brand new here uh lot a lot we're doing a lot of program we're doing some front end I don't do front end so uh Theo right here is teaching me how to uh do nextjs nextjs very fancy framework uh does back end looks like it's connected to front end and then now he's also showing me the T3 stack which is his own kind of personalized in which the community has taken over and massaged a little bit is that fair to say yes absolutely I said it would be really cool if NEX did these like three or four things differently and the community was like yeah we agree let's go fix that and then they did okay so for those that don't know this is what we're doing we're talking about that Theo anything you want to introduce yourself Theo right here I'm going to give him a shout out used to work at twitch love talking all things software Dev make it easy for creators to do collabs we're using some tech I actually helped build at ping. make it easier to do live collabs just like this why I'm coming in so sharp on a stream yeah this is not uh by the way way we are not currently using guest star this is actually his product right here it's fast and I I'm not going to open up the embed right here because I don't want you to see it but if I were to open up the ined right here and have his video right here they'd actually be talking in unison yeah the sink is nuts I'm really proud of our latency we're doing some fun Edge routing stuff to make all that possible so you're not trying out the New Shout Out command the SL shout out someone someone already did it someone already did this SL shout out by the way you have a question right here what position at twitch did you do I was a software engineer on a bunch of different stuff I write the code for the original Bob Ross marathons I wrote a lot of the code for internal external safety tools Marathon stuff I wrote the Prototype that eventually became uh uh what's the watch parties sorry about that I yeah the worst feature of all time I I didn't know that the hacky Chrome extension I was building was going to become like a 40 person team and yeah then I ended up working on safety built mod view really proud of what we built there and eventually ended up going to hang out on the uh the Creator team building twitch studio and the dashboard it was a a bit of a mess so I eventually gave up and started building tools on my own yeah mod views both nice and terrible all at the exact same time like the best part like we already talked about at twitchcon where's mod view Checkmate twitch where's mod view on my streamer page yeah hey I want to know I need to mod something really quickly too bad I actually put a lot of work into pulling all of the mod view components into the dashboard so you can add them manually but nobody ever does so it's like a lot of work for nothing gosh for those that don't know here we'll go to twitch.tv/ thee healthy gamer or healthy gamer G I'm glad I'm so glad they took off hosting I hate hosting go ahead and watch watch today's or yesterday's uh let's see was this yesterday's or was this more than yesterday's yes okay so this was yesterday I really liked there's a great part about jealousy and uh uh comparison and thief of joy and all that stuff in there I think is super relevant it really addresses impostor syndrome very very good cuz I can tell you that a lot of a lot of devs out there have impostor syndrome and I'm always Blown Away by it because they're talented and I'm like why why do you think this of yourself like what are you doing to cause this to happen also just saw Acorn raided me on my side huge shout out love you Tom thank you for the support as always if you're still here if not I will shut you out on Twitter anyways later youall are the best all right we're gonna do we're going to field one more question then let's jump back in right Prime I got a question we can both answer this one uh how do you find ideas besides work to work on personally I find it quite hard to find a project and stick with it till it's finished uh one I don't finish projects side projects right I don't I don't feel the need that I have to fix it right um I think that that is a it is an unfortunate side effect of our field is that you feel like there's some point that okay I'm finally done uh I really don't actually finish side projects some I actually do finish I know besides for what uh this guy's saying I do side projects because I'm curious I want to learn something I want to have something like kind of gained from it and it's and sometimes it's just removing something that's super annoying in my Dev life and so it's okay I don't go in there thinking I'm going to change the world or try to build the most complex thing try to set the ball bound small build something enjoy it once I stop enjoying it I just move on or else I get burnt out cuz the moment I make it into work then I have work plus more work and I hate what I'm doing then I hate what I'm doing and I just fall apart completely you want to go the not too difficult answer solve problems that you have not problems that you think someone else might have like it's a lot easier to know you have a solution if it's a problem that you have if the solution Works cool you can smile and be done and you don't have like it's a lot easier to know when to be done with something when it's solving a problem you have and if you stop having that problem or the solution works well enough you can stop at that point but if you're just out there like what if Twitter was better that's not going to get you anywhere plus it just starts to suck right once you get to that certain part where you're really making Twitter it's hard it's really hard you you're doing a startup right now it's at there's a point where it's like it's not fun it's now work and if you're not getting paid and it's not making money it's like it's just devastating sometimes I barely get to write code for my job anymore like that's the the thing that they don't tell you is the more successful you are the less you get to work on the so yeah yeah thanks for all the follows by the way really appreciate that all right all right so I know nothing about the front end the to me front end cool I forgot where we are so we just got done printing out this thing you're using that super Json which is somehow hydrating objects I'm very curious how that actually works especially with does it work with custom classes uh I would assume it does for properties but not for functions it's they have a list of the things that it passes on like their repo all right hold on that's Spanish so this would have to be in wherever uh oh yeah you are in the right place cool I'm very curious what this does come on Theo I'm a somewhat of a quick learner Theo I didn't see how fast you changed between files so fast I couldn't tell thank you did I call it yes yes I did uh oh look at that can't do that oh yeah oh [ __ ] 69 oh no it did print 69 hi I didn't see that one coming that was pretty cool okay awesome but that was obviously that was in the Constructor so let me can I do one more test I'm going to turn this into a bangable property here and go set Fu uh num number or uh num there we go and let's go oh wait where oh I don't have a place to actually run call on the client so we pass it well because I want to I want to set some oh I got an idea I got an idea I got an idea uh this is it capital this or is it lowercase this yeah return to this all right there we go and let's go like this uh set Fu 69 okay this is a pretty big test here let's see if this works out all right sorry this bothers me uh let's go back here and that all looks good all right I don't know how that works that's pretty neat I'm a fan I liked it yeah I didn't know it would do this I honestly had no idea good [ __ ] you you haven't tried that yet it just seems so perod I have not written a class in three years I'm clean okay okay okay you're clean you've been clean you've been off the street for three years now classes are for the library maintain write and not tell me about because when they tell me too much about them I stop using their libraries oh my goodness but never mind it's okay uh can you turn on key logger yeah we can turn on key logger uh screen key there you go they want to see the speed but I I'm sitting right here so I'm kind of ruining it you know what I mean I'm sitting in betwix the key logger here hold on one second Vim uh which sceny there we go uh I think that should be good sort of good good enough I guess all right uh looks fine all right so what what are we doing next H teach me something how do I do how do I do props how do you do props uh yeah there's serers side prop business don't I if you want properties to come from the server make an endpoint and call them using trpc if we want them to be there by default we can SSR I think we have SSR off by default but we can turn it on in the app file so Pages slore app oh I don't have anything in my uh Pages slore app yeah in here uh the with trpc I think that takes a second option after so like like my app comma that takes an object config I'm almost positive it looks like it only takes one thing it only takes one thing it takes next component uh maybe let just see maybe there's an overloading that I don't see does not appear there is uh any of the smarter trpc V10 folks oh NEX mentioned that they changed it cool where do we turn on SSR now in V10 somebody want to tell me quick so I don't have to go stumble around Google for it it's oh source utils trpc so if uh yeah if we go to def on tier PC Source utils go to where uh go to definition on tier PC itself cool yeah in here uh nice so SSR is false we can change the SSR false to SSR true oh I didn't even see that okay and then one more quick question well since we're going to do this let teach teach me uh what I'm going to do is I'm actually G to go out here I'm G to Echo uh hello Theo actually I'm going to Echo uh uh hello subscribe to Theo there we go and I got to escape these hold Escape them and I'm going to do I'm going to put that in uh let's see into temp the there we go so I have this nice file cat temp Theo and let's pretend this is like a backend service I want to read this file and pipe that to the client let's do it you want to walk me through that absolutely let's hop back to the page we want it on first so we'll just start on what is that Pages index so we're probably want to do is build a new trpc Endo so we can go to on the example and create a new procedure here so we have example router we can go to that and just add to there for now all right cool so we want to create a new procedure so make a new line we'll name this uh perfect public procedure is a custom definition that we made for a procedure in another file procedures are the base unit in trpc V10 where it's a a thing that has an input and does something so first we have to define the input so actually we don't even have to if it's no input we can I think just type do query okay yeah let's not do any validation or anything perfect uh so query takes in a function right yep and this could this uh we were going to want this to be an async function so just put async in front of the def there cool and then await or I guess we should uh put it somewhere so con contents equals oh8 FS see if it will import properly oh there's there's I have never really got FS to import properly because it always wants to uh there's too much here uh import FS from there's too many things named FS yeah I think there's a separate FS promises too I don't read from file system too often anymore yeah uh there is oopsies oh my goodness uh cons FS oh oh you can actually import it as yeah FS SL promises y I've never had a very good experience doing that anyways let's see read file and then temp Theo right okay good you like that little file autocomplete right there do you like that fancy yep and then do that Checkmate atheist all right what do we do here uh we're gonna want to parse contents so do we need to okay we can uh why not let's parse that cool and we can just return oh yes it doesn't like it because when you do that you have to do two string right I think so yes and to do a two string you have to get those things correctly there we go all right we got them yeah we just return contents just drop it in the object um I just all right hold let's see if I got this oh no do I not oh I don't have it on this computer dang it okay never mind cool there we go perfect works for me cool let's go see if the procedure Works hop back to the client uh the client let's see oh my goodness uh pages I didn't mark it like a n all right there you go cool let's make let's just copy The Fifth Line the one that we're on above make a new version of it change hello Theo change. example. hello to example. Theo you can kill the input there because it's not needed there we go like that let's see hello oh gosh I put a little dollar sign there data and let's go so we don't know what it is yet the Json St find is probably the safest solution there perfect there we go let's see what happens all right well look at that we just did it that was pretty cool that was pretty easy that was actually shockingly easy Yep this is what I love about trpc is it makes it very very cheap to write the right function and have that for your client it's super super cheap to just write another function on your back end it's two lines you call your procedure you give it a query or a mutation and that's an async function and you're done and in the end this is my goal with the systems I build and the like code bases I maintain so I want it to be as easy as possible for a developer to do the right thing for the problem they have yeah that was actually I mean it was it was it was very easy I was I'm a little surprised at how nice that was that was good I like it if I were to be building full stack JavaScript I think i' would probably end up using something along these lines now where are the what is like the major points you disagree with on next year especially as I'm about to go to the conference so I gotta be somewhat intelligible here the big thing that there's there's like three different levels of where do you get your data when you're building modern web applications the first one is Page level so we know this page exists this page theoretically knows all the data everything needs so let at the page level get all the data there is the new remix style which is Route level which is every route so every part of your url so slash user gets data slid gets data SL profile after gets more data and each of those layers can fetch in parallel and then there is what we're doing now with trpc with SSR which is component level where we don't really know what data a component needs until that component has been rendered so if we can do a first pass through your app where we render all your components with no data we figure out what data is needed and then we fetch all of that at once it lets us have a single Fetch batched with all the data you need I is there is there a problem with uh like the N plus1 fetching on that because if your components render components in which need data but your component doesn't know what it needs to render until it gets data wouldn't it get data will still happen on the client for things that are not blocking so if you have like a friend list and you have to fetch your friends like list which is just the IDS for the users you're friends with and then each of those renders a component that fetes its own data yeah that's still going to have to be on a second batch tpc's nextjs implementation is smart enough that it will batch all per render so if we have one render where it fetches my friends list and renders the list with all of my friends in it we would have another render where each of those friend or friend items even if each one has its own hook that it's calling those will be done in one batch generally I would advise getting all the data you need slightly higher up because of the power that gives you and something you asked earlier about like passing props we don't do it the traditional way with tipc and react query because you can fetch data wherever but let's say we had like 15 elements and we wanted a subcomponent to be past those props there are some really cool tricks for doing that so hop back to the code for a sec I want to show you something all right I'm here cool so let's say we wanted to pass uh Theo dat is not going to be a great example CU it's not strongly typed but uh yeah let's uh change it back from example. Theo to example. hello quick just so that we have data that we know the shape of cool let's make a new component just const demo or something and we want this or just go just yeah that's Arrow this what the cool kids do this is what the ks do now but we want the hold on hold on am I cool let's just do a quick manage poll let's do a new poll am I cool yes no I think this is this is this is scientific research here people let's go perfect all right anyways okay we got this what am I doing here we want to pass whatever we got from the thing above here but we don't know what the type is necessarily we want this to be able to change dynamically so let's do props colon we have to give these props a type of some form we have with trp see uh we're not going to use return type we're going to use tpc's infer so if we type lowercase infer I think this will come up automatically it should infer query from Zod no uh infer query we might have named it something else I haven't used the no we have not cool uh go to the go to definition on trpc quick all right so want to see what we have it named right now scroll the bottom of this guy oh we didn't put it here uh y'all create T3 app team where do we put the infer helpers help maybe app router if we go to the app router type above uh app router or what oh is it in here uh it was in the trpc file it was imported so the magic of how the trpc inference works is we're only importing type here which means we can run that code on client because all the types coming from the server die yeah yep uh infer procedure output is what we should be using Okay cool so go back to the client file and just see if that will work just type infer capital P procedure infer like this one infer procedure infer procedure output down one more that's us nice okay what do I put here uh this I believe you can I assume it's a generic right yeah I think we just passed the can't find it hold on here let's see which one is it trp server yeah probably trp server and then this one is what's the yeah there there I assume there's there there is a generic here right I haven't used the 10 version yet so I am just quickly checking the new docs to see what the right way there definely there's definitely an inference here I just don't or a generic here what is oh uh we passed it app router so capital A app router this guy from here all right cool and then that takes a string why is it a lower case ey uh because it's not a type it's uh a helper for a type generally things that are a type already we put a capital letter things that aren't yet but are a helper to help us get to a type type we use a lowercase Okay cool so app router the robber Dao by the way anyways uh brackets after to select things off it because right now we're just selecting the whole app router but we want examples. Hello we want that input so if we do brackets we can put uh uh not Arrow brackets square brackets oh square brackets and here if we do a string it should autocomplete it for us uh example example yep and then we do one more for hello like a comma delimited uh no it's after CU this is we've now selected the example so we have it's an object yes yes yes yes so we can do hello yep okay now that is the type of what that procedure returns okay and so that means props do yes which is a foo rendered at which is a date and how smug are you feeling right now well on a level Z not very smug I'm a little annoyed that this is harder to do than it used to be because it used to be infer uh query output and you just start typing the string and be done there are too many characters involved in this now and I will be talking to the trpc team on how to simplify this in the future actually so I'm not feel exp smug I'm feeling slightly annoyed but this is the bar we have set for ourselves so yeah the problem yeah if you don't if you have no prior knowledge yes it's still so much better than anything before but since the query key system has been kind of destroyed things got a little more complex but it's worth it for the benefits but yeah in here we can do div props do whatever and it'll be fine TR to do that and then I do the old uh props dot let's do yet or what is it greetings yep greetings there we go so we have that and that means we' go hello let's call this thing world can I do that and if you don't pass it it's missing something yep so what I would do here is rather than props equals I would just do the curly brackets and then triple. dump hello. dat I literally I want you to know right now you shouldn't be able to spread something that could be undefined yeah so since it can't be undefined what we want to do above is do a loading condition for if we don't have it or something else so if no hello. dat returns something else ah I see so oh what is going on with my indenting because of this hold on one second that was weird let's just go like that what where's my inting at it's like tree tree [ __ ] just fell apart uh all right so if uh what is it hello. dat dot so just if no hello. data return something else is what I usually do okay this no h data return is I am sad that works too and now we know it exists so we should be able to paste it in here why why Copy Quick question why are you copying why am I what coping once more Co coping copy c o p y what about copy well you're spreading all these goodnesses all over the place yeah I love for these things to be accessible and easy and I do a lot of copying and a lot of pasting oh no but why why why not props equals uh data do or hello. dat because that now you don't you don't you didn't I I didn't copy it or I guess props isn't the right thing I don't know what you pass into this thing the reason cuz it's oh jsx is stupid uh I now see what's happening here this is actually doing uh yes equal I assume this gets transported or translated into something that looks like yes uh yes equals hello exactly I'm hoping that's what actually happens yes that is exactly what happens so the problem is we can't just blind pass a value to props and it knows the right thing there's been multiple proposals in j xp2 which will never ship for lots of reasons so this is what we deal with the other thing you could do is you could wrap the the props colon like infer with an object and have data colon infer procedure output so you have to pass hello. dat to a specific keyed thing but the jsx does not allow us to blindly hand it a thing and then give it the right key the triple do dump is the closest thing we have okay what do I what is there a way I can view what that actually gets transpiled to cuz I am actually very curious uh is there a do I get like a disc folder somewhere we can if we npm run build quick so npm run build I assume I'll still get capital W World somewhere in here yes fail what's this mad about ops Oh unnecessary semicolon o o is that es lint uh router what is that one router example yeah what's it Mt about in here let let me see it's on line 29 oh there is an unnecessary colon I I will accept that that was my fault and then what's the other one uh empty Constructor yep that was my I was just playing around I'm sorry sorry you and your chaos dude just I'm I'm I'm stream braining here okay there's not a lot going on also shout out Le Rob I see you in chat good to have you here man one of like the OG nextjs uh for sell folks is here learning a lot mostly about Vim oh nice I am very fast at Vim uh let's see I am not I am not cool look at that 3% of the time I know I'm actually you know what wait hey people don't kiss my ass that should have been literally 420 not cools and zero yeses right yeah just let it happen you don't you don't you ever treat me well as ridiculous is Theo cooler see that's hard because then Chad has to decide who who do they want to troll more Theo or me yeah we we're we're both easy targets so that's tough and I accept all forms of it just broke 750 concurrent viewers on the YouTube by the way this is nuts on YouTube yeah dang that's huge all right so there we go we have all this stuff it looks like it's in uh I I don't know where it went so can I just RG uh world whoopsie that's W oh is it minified no it is not it is right here that's the server oh I bet you RG here GP are can I do that that is way too much what's something I say in here what's a good one I can do hold on uh how about oh example hello there you go I can just look for I can just look for that because that actually might be harder that all gets that I'm curious how that gets compiled out though I don't know the ma I don't understand the magic behind trpc V10 so I'm curious if we find that does anyone from your chat know how these things work all right let's see I got next next next oh there it is yeah yeah yeah yeah it's right there okay so let's just keep on looking for a second I'm very curious children hello I greetings hold on let's see what what did I am sad so we see that I am sad so Props doc reading right that's what we're looking for so what we're looking for is right above the the I am s and do reading children OC reading uh have children no that's one level too low so it would be the condition after it's this one yes that would be it what is passing I can't see I'm covering myself where oh it's it's shockingly not that crazy sorry I just get really curious about how these things work well I I need to myself let's see so it obviously passes some jsx magicalness right some sort of context then it passes some sort of I don't. data so what it's doing there is calling it is calling the function with n. data because that's where all of the props are in this case what could assum it's merging it into this right here right that's what's actually happening so that'll make it a little easier to see go back to the code quick let's add a we're going to add one more key to world so add one more where it's actually mounted just after the curly bracket closes that's like something equals what yeah Foo equals perfect that's going to be wrapped but uh we can't do that let's go it's going to complain who cares no here we go and uh Fu 69 Perfect Look at that it's so specific it Nails it see I'm not terrible at front end guys the audio is out of sync because I'm getting a return feed with myself on it sorry guys there we go all right solved there it is all right so there is this thing cool T equals God I I do not understand compile jsx output anymore is what I'm realizing from this I think there's a merge so I think what's happening right here is this is being called I think that's literally taking data and spreading it into this object that I think makes sense yeah so it starts with like an empty object item merges our data in it sets uh the key Fu 69 in that as well grabs own properties to know what it's actually working with and then dumps that in after yeah I think that's right that seems corre is in my head interesting crazy they should defin oh man there's so many sweet things you could do I'm finding I'm finding that object pooling is insane and these type of like when libraries control the data flow and they know how long something live like the amount of performance you can gain by object pooling is is nuts anyways very very excited called it merch yeah it's a merch very very interesting I like I like looking at those things I like to take the time to look at them because you just just don't get that I mean you don't know what you don't know until you look at it yep absolutely I am very pumped with this setup overall I since I'm overlaying myself on my end I can't set it up so that you're like on your stream you're green screening over me but on mine I can't yeah I hope my head's just going whoop and just disappearing behind you damn right awesome uh I haven't seen prime before this so what are some things I should know from the Geto I use that's pretty much all there is to know uh I have been called by a very famous internet person uh with whom develops very sweet things a leech um I've never completed a project and I have never contributed back to the broader web community no not fireship fireship is the man fireship just recently he featured me again oh look at that the guy's nicer to me than I am to him uh all right this was awesome Theo this was sweet I assume you're going to keep on on keeping on being awesome right that's the plan yeah I'm down to stay live for a little bit longer I am very behind on the content machine I have like three uploads left before my pipe is empty and daily uploads is a grind so hopefully we can squeeze two or so videos out of this one and I can get some more for the rest next hour or two you know what I have four children so I know all about the pipe being empty damn right got got to make things work for as long as you can 1,367 people guess people were really excited about this one huh I think so got him all right there you go look that I just gave you a short now you got a short look that I did that for you the content machine never ends just never ends all right you dog you're a dog hey but I really do appreciate thanks for taking the time to teach me about nexts for those that haven't followed hey give me a follow for those that haven't followed uh Theo give him a follow if you haven't followed him on YouTube give him a follow on YouTube and if you haven't followed me on YouTube well you know what to do thank you all again so much this is an awesome by the way what well how many likes do you have on your video right now versus viewers uh 617 versus 680 viewers so not too bad but still if you for some reason have not liked this on YouTube please do so the algorithm knows what we're doing we're going to keep talking nextjs so don't leave just yet we got a lot of cool things to talk about yeah you're about to talk are you talking anything about your uh your upcoming talk for next JS I will leak some details we covered a lot of the parts here but I'm very excited to talk more about it I also will probably be ending by in two or so hours so I can go finish my talk that I literally was recording when you dm' me that you thought we were doing this now so I was luckily dressed and set all up all up already because I was two seconds bye twitch peace bye um all right hey there you go thank you I just emptied my pipe on you hu huge raid I I appreciate the pipe emptying sorry know where to go with that one didn't know where to go with that one all right um hey thank you very much I really do appreciate that because honestly I feel like I have a much better idea of the conference I'm going to now and I think there's a lot of cool things about it I do like uh your typing that you put all the way through T3 app I think that if I were to do a full stack Javascript app I would in I would rather have something in which has typing throughout right I appreciate it a ton I do genuinely think the best way to get started with a full stack application right now is create T3 app and I really proud of what the community built there it's awesome finally getting to show it off and I think this is a great way to see specifically cuz it's was like oh here's nextjs here are all the pain points that like made us go build this other thing and then stuff I didn't think we addressed we did so it's always cool to like use something that you love see its like pain points get to vent about them and then show how strong the solutions are yeah no I mean I thought it was good thought I thought you did a great job well thank you very much I appreciate it I'm gonna let you go have fun with the viewers bye peace




## Tech Recruiter Goes INSANE (I actually can't believe these messages are real...) - 20240405
Ahmed why did you not show to your interview with blank today hello did the time get changed I have it on my calendar for 5:00 p.m. Eastern in about 30 minutes you're an idiot and super unreliable it's no wonder you did not finish college you've wasted many people's valuable time I won't work with you again and will'll do my best to make sure other recruiters and companies know the same I sent you all of this information multiple times text email Etc and you confirmed it shame on you hello recruiter I'm sure you're watching this video because I know how people like you are you're not feeling the shame you should be because what you did here to poor Ahmed is beyond unacceptable I've never seen a recruiter like this in my life I can't believe this was real when I first saw this on my feed on Twitter I just didn't believe it I thought this was fake and then when I saw the follow-ups and I reached out to ammed he's a phenomenal Community member and talked all about it what the hell the fact that this person not only is real but runs a recruiting agency is absurd and I'm not normally the cancellation type but I'm not going to do my usual efforts to go out of my way to hide this person's name because they should feel shame because they should not be a recruiter if they're capable of doing things like this let's talk a bit about this the absurdity that's gone on the poor experience that amed's had everyone's comments and most importantly how to not suck as a recruiter because what the actual hell anyways let's keep reading these messages because it only gets worse from here this is an incredibly unprofessional response if it's true that the time isn't correct I understand why this may seem unprofessional on my end is the implication here but to berate someone with insults is incredibly unprofessional I will be contact protecting the company that he's recruiting for accordingly you never picked up a returned calls confirmed with myself and in turn E7 and no showed for an interview you even played dumb after you missed the interview you put me in an uncomfortable situation with my client and their hiring manager and you couldn't care less about wasting others time you need to grow up and remove your narcissistic personality from the professional World take responsibility your actions impacted many people's valuable time I'm about to impact many more people's time by going over this man and you're not going to like the results because there's only one narcissistic personality in display in these messages this is possibly the single biggest projection I've ever seen in text screenshots including like a bickering breaking up couple this is insane like what what in any of the coms here on the blue bubbles could possibly possibly be perceived as narcissistic are you kidding ammed could not have handled this better in fact if I was part of the company that this person was recruiting for and I saw this I would immediately FastTrack him because he handled the coms here great I'm biased because I know Ahmed really well if you're not already familiar he's been making awesome memes for the community for a while he made the dark mode is the best site and when we had an issue with people putting inappropriate stuff in the messaging here he fixed it in like an hour so I know he knows how to do stuff I know he understands the community I know he's on top of [ __ ] I'd make the argument that amed's already done everything he should to be a very very hirable person he showed he understands what's going on he has built really cool things he's addressed important feedback and he's really responsive and in tune with how this ecosystem Works he is is pretty much as hirable as you can get doesn't matter that he has a degree or not he's here he's showing code he's partaking in important conversations he's building cool [ __ ] he gets it and that's a really hard thing to demonstrate something I want to emphasize throughout this for those of y'all who are looking to get jobs is do what Amed did be part of the community have fun with it be around and show that you get it you can't build something like this if you don't at least get it a bit you wouldn't have built something like this if you didn't get it and he built this within minutes of me making the dark mode announcement so clearly he gets it he also has of these funny memes and like yeah sure memes don't mean you're a good Dev but if your memes deeply understand Dynamics within the community they mean you get more than average pay for dark motor draw 20 I deserve the L here but yeah as I'm trying to emphasize here ammed did everything right which is why I'm here to screw it up because I am very very mad at the individual who did all of this I have years of Industry experience yet I still saw the value in going to college to get some foundational knowledge in CS I finish in a month too at that it was clear from the beginning that he liked being in a position of power this is a very very good read also I didn't know that you were in school and about to graduate that's really cool too considering how much you've already been in industry and get it you're doing great here also amed's in chat and just pointed out something I didn't even notice I didn't swear at him he had to use his patience you did a great job you handled this so well that it makes it very easy for me to be the [ __ ] instead because Ahmed did a great job of being the nice guy throughout the situation like I really want to emphasize these messages are great hello did the time get changed I have it on my calendar for 5 Eastern in 30 minutes this is very important especially if the calendar invite was sent by them which almost always it should be a little small thing but it's a point I make whenever I'm meeting with somebody especially if they're in a different time zone I make them send me an invite because otherwise [ __ ] like this happens and they'll often try and blame you for it not too often usually people are pretty fair with these understandings but the fact they didn't send them a calendar invite with this is insulting and he just specified in chat there was no invite it was just a regular email and that email definitely said 5 Eastern right like you've confirmed that you had the right time even if you had the wrong time it isn't a big deal but I'm just curious CU it seems like you actually had the right time and is my understanding there correct no it was actually Four okay and that's a totally reasonable misunderstanding like I have made that mistake a billion times but if they didn't send a calendar invite they should probably expect it regardless small totally understandable mistake and I am positive positive just knowing you that if the response that they gave was yeah it was supposed to be at 400 p.m. you would have responded very apologetically but there was no opportunity given you gave an opportunity here for them to correct you and give you additional information but instead of take the opportunity to do anything correctly this recruiter was just an [ __ ] just non-stop [ __ ] and I I don't think this person should have this job I I hate to do this type of thing but I really don't like them specifically I don't like their apology I know you are cool with this ammed and I I massively appreciate that you made the kind tweet because this person replied and apologized and that you don't feel spiteful to them you hope all recruiters see devs as human and all devs view recruiters as human yep I agree and honestly for the most part I've had pretty good experiences with recruiters I've met a few that were actually incredible I feel the same about project managers though so you might not be able to trust my takes I know every seems to hate PMS but I've had really good PMS in my history regardless this guy is not good at anything it seems I appreciate amed's attempt to tell us to not go too hard on him I'm going to because this is one of the worst apologies I've ever seen seen the Twitter posts and I apologize for my manner today I am sick with the flu was taking medication and acted impulsively and rudely I have so many issues with this reply it's hard to put into words so ammed sent me the whole text and I actually feel sick I holy I hopefully don't have to explain all of the issues with this but uh I'm going to because this is my job so you can very clearly see here he is not sorry you can see that he's not sorry because of the speed at which he goes into would you please take these down mode the thing I want to emphasize with this impulse bit is that I've never in my life had the impulse to send a message like this to somebody who I was recruiting or trying to hire that's insane if this is something that is an Impulse for you if this is something that you feel makes sense ever that this just spurt out of you insane the fact that you could feel this way that this is an appropriate thing to do enough so to say it and describe it as an Impulse if you have impulses like this your job should not be calm another good point that was just made in chat is that your impulses shouldn't be messages that are this long and insane because every time you write another word you have a chance to realize what the [ __ ] you're doing and delete it and he took however many words are here that he typed and I'm assuming on his phone cuz it's iMessage every single one of these words wasn't the one that he realized what he was doing so not only did he have the impulse to do something this toxic he didn't have any reservations before hitting send I don't care how [ __ ] up you are I don't care if you're like drunk or on drugs or whatever if this is something that can come out of you make no sense another really good point from chat like an Impulse would be like [ __ ] you or something totally agree like if it's a short little like you just get angry and you're like what the [ __ ] like a lot of what I'm doing here could be argued as impulsive because I'm just letting out the frustration I'm feeling but I'm choosing to do that because I understand the severity of the situation I did not know that ammed was fasting for Ramadan and still showed humility and respect are you kidding so Ahmed hasn't eaten for days and he was still more humble than the chaos that this recruiter is doing are you kidding are you actually kidding this is embarrassing like I I hate to use my platform to be like this guy should be unemployed but I do not harass by the way if I see any single person from this community harassing this individual you're just as bad if not worse than him I just want to be very very clear that what he did was unacceptable and ideally when people Google search his name these things come up because you should not hire him as a recruiter because he is not competent to be a recruiter as we see in his texts here he briefly apologized immediately justifies through the justification indicates that this is something that like occurs in his head a lot with the impulse line and that's why he was rude no here's an example of an acceptable format of this apology Ahmed I sincerely would like to apologize for the way I reached out to you today that was beyond unacceptable especially as a response to a meaningful reasonable misunderstanding I am entirely in the wrong here I should never have done that and I am sincerely genuinely sorry I totally understand if you never want to speak with me again I know I wouldn't but if you are down I would love to help out making sure you can get a job and that no other opportunities are missed due to my bad conduct that would be a phenomenal response but please take the post down is just the narcissism he was complaining about before this is insane if your job is people then you should know how to apologize to people especially if you have impulses to do [ __ ] like this okay controversial take I'm going to knock Engineers down a peg quick too the average engineer is less socially apt than the average person I think we can all agree with that right we all understand that most Engineers are worse at socializing than most everyone else like no one I'm just going to open chat to show that like no one's disagreeing with me when I say that right true true 100% yep like the average engineer is worse at socialization than the average non-engineer hopefully it's not controversial hopefully we can all agree about that it's not that doesn't mean you can't be an engineer who's good at talking it doesn't mean you can be a non-engineer that's bad but the average for non- enges is slightly better the reason I bring that up is it has resulted in a bar being slightly lower I'm going to give a weird example of what I'm trying to emphasize here which was my college experience when I was in high school I didn't love English class I started in high school in like the non-honors English but I got bored pretty quick cuz I don't hate writing it just wasn't my favorite thing so I eventually bumped up to be in honors English and eventually ended up recording videos for one of my classes and that's kind of how I got here so obviously promoting myself up to the harder English class so I had those projects ended up being huge for me but I still was not a great writer compared to my peers even in high school I was surrounded with people who cared a lot more about writing and they could write circles around me I would often rely on them to prove my papers and stuff like that then I went to college and I went to renier Polytechnic Institute a school even nerdier than it sounds RPI is like an absolute pile of Engineers that are socially inept I think the gender ratio in the ede department I was in which was CS was like 9 to1 it was chaos and the average person there was way less socially apt and importantly way worse with words I was used to just barely getting by in my honors English classes and relying on my peers by the time I was in college since the bar had been lowered for quality of writing because Engineers suck at writing I suddenly looked like a super Superstar and I'll never forget the day where we had our final project for my uh it wasn't it in society it was some like societal impact of Technologies class and we were supposed to be working on our paper for the whole semester it was like our term paper I started writing it at 1:00 a.m. the night before it was due well the night it was due cuz it was due at 8:00 a.m. in the morning so I had 7 hours where I wrote this whole paper I had an outline that had gotten approved and I started from scratch and even then wrote this whole thing in 7 hours in a panic handed it in barely could stay awake during class A few weeks later the teacher comes in professor's clearly very upset like she just doesn't look happy she stands up to start class looks at a and says I hope you guys know how disappointed I am I've seen some terrible papers in my time teaching this class and I've never seen anything like this normally I would curve but I chose not to because I need yall to understand just how bad these papers were she goes around handing out the papers in their grades hands Me Mine face down says we should talk after class my heart is racing I in such a panic I barely remember writing this cuz I did it in a like diluted State at night perfect score I somehow got a perfect score on that paper at the time I was like oh my God I'm a God writer I'm so good at communication what I've learned since then is I'm okay at communication I'm just comically better than average for an engineer and that's the thing I want to emphasize here is that the bar for quality of writing and communication in engineering is very low because the average engineer is not good at those things I bring that up because the average engineer would be a shitty recruiter which is why we have non-engineers doing our recruiting and that is why things like what we just saw can happen in the first place because no socially competent person would ever do this type of thing but since the bar for engineering and in this case engineering recruiting is so much lower and a recruiter has to be social because they're talking to people and like gauging interest in doing all these things engineers on average will be bad at this because they're not social enough and if they're good enough at being social they can climb the ranks as an end really fast because being able to talk as an engineer is a superpower if I've learned anything from my career it's that if I learned anything from my channel blowing up it's that this person is not socially apt enough to be a recruiter in any field but the bar for being a recruiter in Tech is much lower than other places because the bar for socialization in Tech is the floor the only reason this person could get far enough to start this agency in the first place is because the bar is too low in engineering and that sucks I'm going to say something people aren't going to like but I really think Engineers should take more classes on things like communication writing and these types of things because we need to know what bad communication is and more importantly what good communication is we need to learn how to take ownership how how to apologize for things how to prevent [ __ ] like this from happening because if we can raise our bar for communication we can keep people like this from feeling welcome in the industry because this person should not be welcome in the space that we're occupying so once again I am emphasizing do not harass this individual my goal here isn't to drive a bunch of hatred towards him my goal is to raise awareness of the fact that there are socially enough people in the space doing [ __ ] like this and we need to raise our bar and our expectations to keep this from ever happening again imagine if poor Ahmed wasn't an experienced veler with a platform on Twitter and the ability to do things like this imagine he was a new grad or somebody who just dropped out because they had an offer and then that offer got rescinded and now they're looking for a new job imagine at that point Somebody Like Jordan did something like this we might lose you in the industry entirely I even want to think about the number of people Jordan might have caused to leave software Dev forever because if you're not really talented thoughtful capable and out there Dev like Ahmed the messages that were sent here could might have actually removed you from the industry entirely and I don't want that I don't want that at all apparently this is not the first time either as amed's been pointing out multiple people who experienced the exact same thing have reached out to him apparently this particular guy also bered a previous CEO of his that fired him the reason he's a oneman company is he can't work with people yep that checks out and I feel bad for doing this but I have a feeling he's going to be very very upset when this video comes out but if that even slightly reduces a chance and somebody else has to go through this this was the right call TR decided do I want to go through the comments on this Reddit post uh who the hell pissed in this guy's serial to give such a wanker response he just got out of that $18,000 Retreat about becoming a man I think that's all I have to say about this one it is honestly horrifying to see how people do recruiting so wrong I talked a bit about how you can do it right definitely check out my videos about getting a job if you haven't already seen them the tech space is a little harder than it's ever been to actually get a job in that doesn't mean these toxic recruiting things are okay let me know in the comments what you think about the situation am I overreacting or is this as absurd as I see to think it is and until next time peace nards




## Tech hiring doesn't work - 20240707
I have a lot of spicy takes on Tech hiring it's kind of my thing which is why I'm really excited that this article just got posted on of all places haskal for all called my spiciest take on Tech hiring I had to take the opportunity to read this quick so really excited this blog's awesome I've read a few other things on it in the past definitely check it out if you haven't let's dive in to the author's spiciest take on Tech hiring my spiciest take on Tech hiring is that you only need to administer One technical interview and one non-technical interview each more than 1 hour long interesting especially with the current disc I saw a lot of people complaining earlier about how many technical interviews it takes to get the job like being rejected on the seventh interview is the worst thing ever and reasonably gets people upset but the idea of just two interviews especially with each one being only an hour that's interesting in my opinion any interview process longer than that is not only unnecessary but it's actually counterproductive obviously this streamlined interview process is easier and less timeconsuming to administer but there are other benefits that might not be obvious I have so many thoughts already but I want to better understand their perspective before I get too in the weeds here the first major point they have is more effective interviews when everyone is responsible no one is responsible interesting this is a link to Wikipedia diffusion of responsibility it's a sociopsychological phenomena whereby a person is less likely to take responsibility for actions or inactions when other bystanders or Witnesses are present this is actually a really common thing for like emergency response like oh it's literally the example here yeah this is hilarious the the example here one that I've encountered in my past is when you're in an emergency like let's say somebody isn't breathing and you're trying to administer CPR you can't be administering CPR and calling for emergency services at the same time so it's intuitive to be like doing that work and then shout somebody call 911 or whatever the difference here is that if you say someone do it since there's multiple people the responsibility has been diffused across the group so no one person feels responsible the thing that's important here is to make sure you call out a specific person so instead of saying someone call for help point at one person and say you call for help because you are reducing the responsibility scope to one individual if five people hear it they'll all be like oh I'm sure someone else will but if you point at one and say you do it they feel solely responsible for it so I find it very amusing they actually call that example out in here very real problem and I definitely see that in interviews too where especially like at Amazon and twitch they have a system called the the 1 to 4 system where you rate a candidate 1 to four I need to excal draw this Amazon Interview ranking so when you're interviewing an Amazon there are four different scores you can get one two 3 and four I'll start with two and three because I think these are the most easy to understand two is probably shouldn't hire and three is probably should hire so the higher ability line is between two and three so if there's a candidate that you're not sure about if you're like eh I don't know how I feel about this person I'd be fine either way there's no result for that there's no option and that's by Design because everybody would just pick the middle option but by not providing one you're forced to go over or under this line and to say what one and four are one is I would quit if you hire them and four is I would quit if you don't hire them I like the scoring system a lot when you have multiple people doing an interview because it gets everybody to show how they really feel if there's a candidate with a bunch of twos and then one four that says a lot about the processes that these people went through and means we need to have a conversation why did everybody lean no except for this one person who thinks they're a great hire where is that difference coming from or if a bunch of people do threes and then one person gives a one I'm guilty of this I've been the person who gives a one on a candidate that otherwise got threes my one overrode like four people giving them a three because I was saying this person is not good enough to work on this team the others were like yeah they'd be a fine addition and then we could have the conversation of why I had these strong concerns and we were able to not hire the person but I think it's important to have a system like this so that you can have first off nobody saying neutral but also people with strong feelings either way expressing those with a number so that we can then have the conversation before making the decision but the decision isn't is the average score over 2.5 the decision is we look at the numbers everyone gave people and then we have a conversation based on that and I was actually well known for being one of the few people who would regularly give ones and fours because I had a strong interview process and I felt pretty confident by the end of the interview whether or not this person made sense and was often able to tie break or push candidates either direction because I had a different process than others did but I I actually do like the scoring system and I think something like this is necessary if you're a team we're not talking about teams here we're talking about the distribution of responsibility which again here by doing numbers like this you have the two options in the middle that are the like I don't want to take too much responsibility this is my general Vibe and then the top and bottom which is I'm taking ownership here I do or don't think this candidate makes sense and that's another way to think of this is taking stronger ownership of your decisions back to the article looks I have a lot of thoughts interviewers are much more careful to ask the right questions when they understand that nobody else will be administering a similar interview they have to make the questions count because they can't fall back on someone else to fill the Gap if they fail to gather enough info to make a decision on the candidate it adding more technical or non-technical interviews makes you less likely to gather the information you need because nobody Bears ultimate responsibility for Gathering decisive information yep I like this a lot and I will say the non-technical thing is also something that comes up in here we've had candidates that got a whole bunch of Threes from the engineers and then the HR person whoever went to lunch with them gave them a one I had one really interesting candidate that slaughtered on the take-home like programming Challenge and they showed up to their interview an hour and a half late clearly very hung over seemingly still a little bit drunk honestly they confessed to another one of the interviewers they had just gotten back from Vegas and flew from Vegas straight to SF to do an interview at twitch so despite the fact that their technical interviews they had done prior were in the 3 to four range obviously we couldn't hire that candidate but the fact that a non-technical person could have given them a one for that when everybody else gave them threes and maybe even fours enabled the conversation that's a four absolutely hire them I love you guys yeah you got point though the One Technical and non-technical interview means that you need to know those two are really good so it puts way more responsibility on the person giving those interviews but I can say confidently I would have made bad hiring decisions at twitch if I was the only interview that mattered I had plenty of times where I was like yeah this person seems pretty good and then somebody else brought something up and I was like oh that's bad so having at the very least I think these two interviews should be different people just to get different Vibes and I'm going to go more into like the importance of an interview process as we go through but I want to keep through or I want to keep going through this first better senior applicants I think I know where this one's going and I have a feeling I'm going to agree when hiring for very senior roles the best applicants have a lower tolerance for long and drawn out interview processes yep I almost certainly knew this I actually on the other side as a candidate for jobs push this really hard my resume I haven't updated it for a while I probably should just to have it as an example uh if we go to my T3 re or repo I have my resume here it is a markdown file this is my my resume I used to have a fancy latte resume I used to have a fancy PDF I did in Photoshop cuz I hated illustrator and in design but I don't care anymore I don't want to have to to perfectly cater this weird process around like having my my my PDF get AI analyzed in order to figure out which part of the pile for candidates I should be in I hate that  I don't want anything to do with it and I like to think I'm a decent engineer especially at the time when I had just moved from twitch to building a whole platform from scratch for ttfm I knew my I was a good engineer I was very hirable I didn't actually know what level I was at CU I had been so many times around my level I was originally interviewing for senior roles and quickly realized I was closer to like principal staff when I started talking to these companies and realizing what they needed and what I could provide but there was a lot of companies that wouldn't take a markdown file one of the ones I was really interested in would only take PDFs and doc files like a word file for your resume there was about five or six companies that did that and most of them I didn't apply to at all one of them I made a PDF and the PDF was just a URL to go to my resume on GitHub because I was not going to put this extra work in for this specific company's specific process I just don't care I can get an offer that better fits my expectations and needs by exploring those in my own time in my own way I can find places that are accepting of a markdown resume why would I want to work somewhere that doesn't it's not just they're losing out on me I think of it the other way which is if this company will never hire somebody whose resume is marked down there's a lot of great Engineers I would want to work with that would never work there because a lot of the engineers I want to work with aren't going to go through this whole stupid process they're going to make the thing that works for them like a markdown resume and submit that so could I have made a decent PDF quickly for them and gotten the job and been a happy employee of that place perhaps but they the thing they did that I let filter me I let it filter me because I knew it would filter other people as well and if people I want to work with wouldn't pass the filter then I don't want to work there if you have a filter that makes it so great candidates just don't feel like dealing with you then I don't want to work there because the other great candidates I could potentially be working with all failed your interview process because you have these weird things in it great Engineers aren't going to sit through seven interviews they're going to get annoyed by the third one and stop and making sure your interview process doesn't filter out the best people is a really important thing when you're doing these types of interviews and I find most interview processes have so many weird things in them especially for big companies that the best Engineers just get tired of it and give up and that's a huge Advantage you have as an earlier Stage Company or a small team also a thing I think Amazon does really well where every team at Amazon kind of runs their own interview process there are suggestions and guidelines and like an interview class you take before you start doing them for the most part you can ignore all of that and as long as you use their score system they don't care what you do and I think that's great because the teams that are interviewing for people on their team can make their process work best for the types of people they want to hire but that's a really important piece here is that the best candidates the most senior candidates the ones who have the best experience and potentially the best fit for your team if you make it too hard for them to go through the process they're just not going to go through it the Financial Security point that deal made here is important but my take on that is that if you're willing to take a job that you wouldn't have otherwise with people that you wouldn't want to work with otherwise just for the money you're a Flight Risk to that company because as soon as a company that is a better fit for you offers you even the same amount of money not even more you're going to immediate bail and go there so while you might be more willing to put up with these things the company that you're working for will be a worse fit because if they're doing things in the interview that make you not want to work there they're going to be doing those things on the job as well because all the people who went through that interview now work there and now make those decisions the types of people who go through seven interviews and are like yeah that's totally normal and fine they're the ones who are now running the interview process because they went through it they think it's fine they work there now they run the teams now they run the interviews now they run all these things that creates a culture and if that's a culture you don't want to be part of that's not just fine it's probably good and if you're a valuable enough candidate that you're watching videos like this on my channel you probably know well enough that this interview process sucks that's why I already brought this up on stream earlier I have this video where I interviewed Dan abov with a mock job interview and I made a notion doc that I send to all of my interview candidates when they're about to do a technical a custom version of it obviously where I present them different options on how to Showcase their abilities to their best ability CU I want them to feel like they're in an environment where they can succeed that's how my my companies work that's how my teams work I really want to allow developers to feel comfortable in control and like they understand what they're about to do and by giving them those things giving them those options I guarantee basically every candidate can have some more confidence going into the interview and a lot of these options especially the last two the bring your own repo or bring your own interview plan these exist both because they give candidates more confidence because there's more things they can pick from even if they never pick them but also on the rare chance they think they have a better way to Showcase their abilities than I do they can just tell me and we can do that instead because I want my candidates to be a successful as possible in the process because I want my Engineers to be as successful as possible in their contributions my interview process is structured around that so if there's a candidate that doesn't fit my current interview process there's an escape hatch right there for them to propose something different because I want the best Engineers not the ones who best fit my existing process back to this article there's some good points here I want to Riff on more I like this more than I expected a lot of companies think that dragging out the interview process helps improve candidate quality what they're actually doing is inadvertently selecting for more desperate candidates that have a higher tolerance for in process Yep this kind of T touches on what deal was saying earlier with the uh Financial Security if you're less financially secure you're more desperate and desperate candidates are not the ones you want to hire the only good type of desperation is desperation to do something exciting like they're desperate to work for figma because what figma is doing speaks to them not they're desperate to get get a job because they need money they're desperate to be at this specific place because it is exciting to them that can be okay but ideally desperation is not the thing you're basing your hiring process around that's why a lot of the layoffs are currently happening people were so desperate to fill seats they lowered their bar too much yeah great Point here is this actually the kind of engineer that you want to attract as you grow your organization absolutely not and it's far too common so I ask what my thoughts on take-home tests uh I think they're a good option I think for candidates that prefer that it could be really useful but for candidates that see like some candidates will see that as unnecessary work in their free time others will see it as a great exciting way to play with new technologies and showcase what they're building I personally as a candidate quite liked doing take-homes as a hiring manager I find them to be a good bit amount of like work to do in a way that they're not like leaking people are stealing code and and actually reviewing them can be much more challenging than doing an inperson interview but I'll cave and do a take-home test if the candidate really wants it so again it's building these things around what the candidates want because I deal you're building your company around what your teams want and need to succeed because if you have a team that's success metrics aren't aligned with your companies you should just get rid of the team they don't fit your business but if you have teams that are aligned with your business then you need to do everything in your power to empower the people on those teams and that starts with the interview priors and bias in my experience people tend to make up their minds like candidates fairly early on in the interview process or sometimes even before the interview process begins I so guilty of this I was like the only interviewer that would go out of their way to like read the candidates githubschool I had checked their GitHub before but I didn't dig into the code enough but when I did afterwards I went to their GitHub I went to their website for their homepage that was built in react I you not their portfolio their react site was a single app.jsx file that had a giant HTML document pasted in the single return for that app class component that was the entirety of their website was just a bad HTML file embedded inside of a gigantic react like class component it was insane it was like a, plus line file I've never seen anything like it and I realized oh this candidate put react on their resume so they could get a job not cuz they understand react and immediately won out of for them I also gave them a bunch of useful feedback saying hey you don't actually know react that's fine you're still young and early and this was an interview for like an like a role for an internship but you should go learn these skills go build things with this that better fit it here's the new react docs that just came out you should go through these they're great and they ended up hitting me up afterwards is thanking me a whole bunch and I think I've given them some feedback even since like four plus years later that's another thing that they're not touching on enough here please give your candidates feedback I get that it's so much work and it's scary and has potential legal liabilities and all these things I don't care find a way to do it it builds not just good faith and is not just the right thing to do it can build relationships that last way longer some of my closest friends are people who I interviewed with either I interviewed them or they interviewed me where things ultimately didn't work out and we kept chatting afterwards I don't know if I've shared this before I interviewed at Railway before I started ping and a big part of why I started ping was when I was talking with the founder at Railway who had concluded they wanted me to work there and given me an offer he was very transparent in that he saw me more as a founder and while they wanted that type of energy I was so excited with what I was doing with ping at the time that he thought that might be the better path and recommended that I at the very least consider exploring that option a little more deeply before I commit to working at a job like Railway since then I've been lucky to call Jake a good friend we chat about all of these things all the time I've obviously went from just being a random poster on Twitter to somewhat relevant figure in the space but even though this interview ended up not being a job for me it ended up being a great relationship that we had another one that didn't work out is I was interviewing at retool and I actually didn't get the job just because we had differences in opinion on some things my roommate Mark I recommended he take that opportunity a little more seriously because there were some roles there that I thought fit him well he ended up working there like two weeks later and being a huge part of their whole support engineering department and then moving over to contributing to the front end and the code base as a whole and I stoen into my CTO those things happen because we had a good conversation and experience even if I didn't get an offer I still had a good vibe with the company and I would recommend them to others those things only happen if you have these conversations with people back to this post though because this is triggering some of your favorite rants the shorter interview process formalizes the existence of that informal phenomena yeah the phenomena being that you know ahead of time who you actually want to hire if you make the interview process shorter it becomes even easier to notice that especially at a larger tech company the hiring manager already has a strong prior on a few applicants either the applicant is someone that they or a team member referred or they have a strong portfolio another this is such a realistic post I've tried to talk about these things I have a video on my third Channel where I rant about this a bit more but the fact that like so many people are laid off right now means that everyone has a friend that they've worked on code stuff with okay slight correction every employed engineer has at least one friend that is a good developer they've worked with before that is looking for a job right now every single one of us does I can name like three or four off the top of my head and I don't even do that anymore obviously I have hundreds more for my community but just X co-workers that have been laid off or are in weird places because of the state of the industry I know so many people that if I had a role I would hire instantly and if I help other companies hire which I do a lot I can refer the people who I've worked with more easily this is first off a reason to be really collaborative and involved and nice to work with at your job because if other things happen in the future be it one of the people on your team goes somewhere else or layoffs occur or any of these things happen just by having these relationships with others you're so much more likely to be in the network and in the know about all these opportunities but also when you're trying to hire yourself when you're trying to build up your team hiring on trust is the most important thing I talk about this a lot especially in that third Channel vid hiring is trust based and the more trust you can have with a person the more likely you are to get that role and if I have a candidate that has all of these awesome things on their resume and they slaughtered the interview but all of my trust came from those things I don't have any prior with them or I have a candidate that might not have done quite as well in the interview but I've worked with them before and I know that they can make happen maybe not as fast that other candidate might but I know that this person is capable I'm going to hire them every single time so how good your resume is and how good your portfolio is and how well you do in the interview even now matters a lot less if I know five people looking for a role and all five would be a good fit for the role I'm hiring for so the best opportunities are still the people who have the most experience and knowledge like if I have been working in this industry for years and I'm hiring I like to think my teams are cool to work on I would imagine a lot of others agree I've seen enough people begging to work for me at this point that we had to make a website making fun of it hiring. ping. because we're not hiring I hire when I feel like I have to because somebody's being too useful not because we have an open role that needs to be filled that all said the people who are working on the coolest things and have the coolest opportunities like what I'm building like all the cool teams and companies that we all aspire to work for the people who run those opportunities and make the decisions around those hiring processes those are some of the most connected people in the industry they have so many friends and so much experience and now more than ever those people are looking for new jobs so previously I might have had to go and hire from a pool of candidates I wasn't familiar with because everybody I knew already was happy with their role now that people are less happy and also getting laid off and aren't getting raises anymore and are stuck dealing with a bunch of Maintenance because the three teams around them got laid off great Engineers are looking for jobs more often now great engineers go great Engineers that combination means I can hire people I know and already have trust in the trust debt that existed in the hiring process is kind of solved by the layoffs because now I know so many people who I already trust that I can hire from the risk is way lower as cre Payne just said and the confidence is much higher that risk and the confidence those are the two key things you're balancing in your interview process and if you can hire somebody based on your prior knowledge that they a good candidate that is so much easier and so much higher confidence and so much lower risk than hiring somebody fresh out of college or a boot camp or somebody who has worked on solo projects for 5 years and isn't really involved in the community that's the key here so many candidates expect to just get a job because they have a really cool resume the person who knows more people will always win on top of you especially for the cool opportunities if you want a cool job you have to know cool people you can't get a cool job by hail Maring your resume into a random company the cool jobs come from the cool Technologies and solutions and networks and relationships that you build outside of work and also sight of work but if you don't know cool people working on cool things you're not going to get a cool job working on cool things that's just a fact right now to go back to the article though as they said here uh the applicant being a person that the hiring manager or a team member referred makes them a much higher likelihood to get hired but also they have a strong bias to hire those applicants they already know before the interview process began drawing out the interview process is a thinly veiled attempt to launder this bias with a neutral process they will likely disregard or overrule if it contradicts their personal preference as I was saying earlier I don't actually give out this interview guide very often especially now because the people who I'm hiring I already know they're good I've seen it in so many places somebody like our Superstar engineer jino I knew I could hire Julius because he kind of took over create T3 app and also made create T3 turbo which is the best starting point for modern mono repos and typescript these two projects made it very very clear Julius knew what the he was doing and then he got brought into trpc by Alex because Alex saw what he was doing was like yo you clearly know what you're doing can you help us out with this and now he's become one of the lead contributors to trpc as well so now he brought him in and now he's being paid to work on upload thing but that's because he was in these spaces making useful contributions that were highly visible everything that happened there just kind of made sense and that those are the people who I hire from now in the thought of giving Julius a technical interview sending him a problem like a take-home or like doing a two-hour call where he has to like code through something live with me it just feels dirty I don't need to know that from him he has proven to to me that he can deliver great software no way I could ever question that they can reverse a linked list just in case yeah this is the problem though if a candidate is good enough and I know that ahead of time which I'm in a privileged position to know a lot of great candidates before ever needing to interview them I might never give a technical interview again that's a weird thought but the people who I am hiring have already proven their technical capabilities the idea of giving them seven technical interviews just to make sure that it's a fair process is stupid back to the article this doesn't mean I think this sort of interviewing bias is good or acceptable but I also don't think drawing out the interview process corrects for the bias either if anything extending the interview process makes it more biased because you're selecting for candidates that can take significant time off from their normal schedules to participate in an extended interview panel which are typically candidates from privileged backgrounds yep very much agree there actually one of the things that has pushed me so hard on being like PR Medicare for all it's two things the first thing is that I when I was a 25-year-old running a company should not have been responsible for the health care of multiple people in their families that sucked and figuring out right was a massive risk and I'm thankful I did but I it up a bunch in the process and I could have had like one of our employees who had who was diabetic they might not have been able to get their insulin if I  this up that's insane the fact that I as a 25-year-old was responsible for people in their 30s getting the medicine for themselves and their kids is just what the how do we get there the other thing that made me go particularly ballistic on this was realizing I had enough money to chill and like do interviews with other places but getting my health care sorted was a mess because in America we usually get our Healthcare from our employers so if I wanted to do like a 3-we trial at a company to see if it was a good fit and if it wasn't go work somewhere else I would have no health care for that time unless I went to the private market and bought it myself which is basically impossible to do it was so obnoxious I spent weeks trying to figure it out and eventually one of the biggest things driving me towards incorporating my business was so I could give myself health care that's insane the fact that my health insurance is a meaningful driver in how our interview processes work is just unbelievable it's like I'm a big fan of free markets that's not a free market we're tied to our jobs because our Healthcare is tied to them as well that is pathetic and with things like really long interview processes work trials all these things you have to be in a massive position of privilege to not have to worry about things like your healthare and it's it's just insane that's the case so wanted to go on a quick tangent about that but yeah you get the idea interview processes that are really long mean only certain people can do them and if you don't have the ability to take the time off from work you can't do it and if you don't have a job you can't either because you're grinding to like get your life together it's just insanee like if we all had Healthcare external from our jobs if we all had the ability to take some time off from work and go work somewhere else these things would make these processes a little more fair but dragging the interview out for seven interviews does not I'm going to go on one last tangent about this part because it's something I haven't had a chance to yet I mentioned it earlier the one benefit of these long interviews is that as long as you're interviewing with different people every time and also each of those people as somebody who will be on your team you can get a much better idea of the team fit and that's one of the most important things in the interview process especially if you already know that they're technically capable and somebody on the team has worked with them in the past it's so important to figure out how well they fit the rest of the team and if the interview it could even be like four people going to lunch together with the candidate just seeing how you Vibe and chatting with them that I love but you need to know cuz like this person is going to be on your team so if you interview with like one group of people and then work for another that's the worst I hate it I can't believe Facebook still does that it's like the worst thing about the Facebook like engineering culture is that you don't interview with people work with Amazon's really good about this minus internships but for the actual jobs at Amazon you're interviewing with the people you're going to be working with and on the team you're going to be working on doing a more personal process to make sure that the people on the team feel like this person is a good fit not technically not skill not any of that just that we Vibe is really important especially for a loud like myself knowing that I can disagree with people is important something I'll actually look for in my interview process is finding something I disagree on with the candidate and then seeing how we disagree so important so much more so than any ability to write a good react component is how well we can have a back and forth when we don't agree on something what does that look like and if we can figure that out in the interview process that's great entirely separate from how long the interview process is but it's an important detail and I find that the desire to have them talk to everyone on the team is often a driver for these really really long interview processes or something I've also seen is you're talking with one team you interview with three people there they're like this candidate's good but they're not a good fit for us and they send you to another team that does another four interviews with you I've seen this happen so often but you can work around this by structuring your interviews in a more like group or casual setting if you can just sit down with lunch with the candidate and a few other people that are on the team that's a much better Vibe and making sure the Vibes are right is one of the most important parts of the interview process that it can't be measured it can't be put into a process you just have to do it and I find that if we're talking about the length of the interviews and not the vibe then we might be missing one of those really important key points anyways I want to read about Gabriela Gonzalez's background the inspiration for this take is my experience as a hiring manager at my former job we started out with a longer interview process for full-time applicants and a much shorter interview process for interns One Technical and one non-technical the original rationale behind this was that interns were considered lower Stakes hires because they're not going to be there that long it's a much less risky thing to hire for so the interview process for them didn't need to be as rigorous however we found that the interview process for inters was actually selected for exceptional candidates despite what seemed to be a lower standard so we thought why not try this for all of our hirers and not just interns we didn't make the transition all at once we gradually eased into it by slowly shaving off one interview from our interview panel with each new opening till we got it down to one Technical and one non-technical interview in the process of doing so we realized with each simplification that we didn't actually need these extra interviews after all yeah I dig that I dig that a lot this is Gabriel why did you think I wouldn't like this because another Gabriel Gabriella wrote it this is a great article I have a lot of opinions I hope this is useful to those of you who are hiring or who are looking for jobs huge shout out to Gabriella for writing this awesome article I'm really pumped with this one it's nice having somebody solidify these thoughts and wrap in actual experience most of the hiring takes I've seen have been about the candidate and the candidate experience not the perspective of the hiring manager and interweaving them this way one of the better articles I've read this year without question and huge shout out to her for writing it this process sucks the entire interview process largely needs to be rethought and the companies that figure these things out early are going to have a massive Advantage so if you're a hiring manager looking to grow your teams pay close attention to this it's really important feedback and useful information to hire great people and on the other hand if you're a candidate don't feel like you have to comply to these miserable processes if you don't want to work at the type of Place full of Engineers that were happy to go through 7 10 interviews then don't put you can put your foot down in interviews it's okay to intentionally fail an interview if it means you'll end up somewhere that's a better fit let me know what you guys think shout out to Gabriella until next time peace NS




## That's It, I'm Done With Serverless_ - 20230423
the only thing about me you know I love serverless if you know anything else about me you know I hate slow apps which is why ultimately by the end of this year I'm hoping to have moved off of serverless almost entirely so what am I going to do instead not going to host servers right well you know better I'm not going to host servers I will never touch kubernetes or terraform or any of that chaos around provisioning boxes again I'm just going to move everything to the edge well why though let's talk about it so the first thing we need to break down is what do I mean by The Edge when we talk about Edge we're often talking about one of two different things the one I'm usually talking about is The Edge runtime but there's also the edge location which is running servers way closer to your users when you use something like Lambda you pick a specific location that the serverless functions run in Like Us West tour Us East one that location is where the actual server is spun up to run your code quick and if you have users in other places they're all going to be hitting that same server unless you create different regions and Route traffic to those different regions generally that's probably for the best because most databases are also in one region both Edge you don't really think about regions things are distributed all around the world there's I think like 200 plus different locations for Edge functions on cloudflare and many more on other providers too and the benefit here is the function that is getting the request and sending a response is way closer to the user that said I don't care that much about global Edge functions in terms of the location the functions are in as the infrastructure is much less interesting to me than Edge the runtime because edge of the runtime means I don't have to spin up a Linux box to run my code with Edge you have isolates that can run in parallel on a given box and easily taken code immediately process it and respond whereas on Lambda and serverless you actually have to spin up instances using the firecracker chaos that Amazon invented a while back and as incredible as that technology is the isolates that you have with something like Edge runtime are much more powerful AWS does have an Edge product they call Lambda at Edge I want to be clear about this though it is not Edge the runtime it is just edged the location and it's not even really at the location because AWS has such a limited set of of locations they deploy servers to so when I talk about Edge and I'm talking here now about moving to Edge what I'm specifically most excited for is moving our functions to the edge runtime so that we no longer need to hit cold starts to process requests and send responses to our users one additional thing with Edge that makes it really valuable cost the cost of lambdas is not cheap it's not expensive but it's certainly not cheap you're paying per hour of time spent doing requests whereas with Edge you pay for the number of requests and the amount you pay is very small on versel for one million requests you pay 65 cents that is hilarious the cost of doing things on edge is insanely cheap it's hard to do a one-to-one comparison because with lambdas you're paying per minute of compute and how much compute you do per request can vary but I promise you it is hard to make a workload that is more expensive on Lambda than it is on edge and cost is by far one of the best reasons to move things to Edge if you can and things like rate limiters and bouncers should almost never be run on Lambda if you can avoid it simply because of the cost difference of running on edge instead but is this really worth it it's like what's the difference what's the cost why am I even bothering making a video well Edge has some gotches from the one megabyte limit and how much JavaScript you can ship to an edge to the distribution by default causing longer round trips there's a lot of things we have to think about and worry about now as we use Edge functions let's talk about a few of those let's say we have a user in this case a circle and a database in this case a square this big circle is the world these two things are far distance from each other that's not the biggest deal though especially if the user only makes one request but the user isn't going to directly request from the database unless you're using something like Acera don't use something like Acera and as such the user needs to hit a server generally the way we deploy things most of the time for doing things right simple so we have a server that's really close to the database these two things are usually going to be in the same region we'll call this Us West 2. so when the user makes a request the user hits server which can immediately not immediately that's a form of connection which can take some time but it's in the same region so once it's formed a database connection let's say it has to make like five round trips because it does a query to see if you're off they're not when you come back you're like yes this user's off they can continue so it's like okay they're requesting profile information for this room do they have permission for the database says yes they have permission for this room they're like okay then we want the data for this room at which point the database responds okay here's the data for that room and if this database is nice and close like it is here that's great let's say the server gets moved really close to the user this looks pretty good because the user is much closer to the server and theoretically they can get a response faster but you might have noticed the actual amount of distance traveled here has gone up a lot because there are more back and forths here between the server and the database than there are between the server and the user so if that is the case which it is on a lot of services as you waterfall your queries the server being closer to the database is often significantly better than the server being close to the user just by the raw amount of distance that has to be traveled by your network requests so if we have Edge servers that are running all over the world world like we have tons of these all over the place we have one in here but we have one up here too depending on where you're located and what that closest Edge is this can get really nasty really quickly so how do we deal with this if we're using Edge functions doesn't this look objectively worse well thankfully there is a very cool solution to this now called Regional Edge functions for cells are pushing was pretty hard I'm seeing more and more people taking advantage of it the goal of regional Edge functions is to take your Edge functions and limit them to a specific region so it says okay our Edge functions can only run in and around West too and by limiting in that way yes the user is no longer getting the edge benefit of having the server really close to them but the user is now getting the edge benefit of the cold start being milliseconds instead of seconds that is a massive massive win but you don't have to think about where this Edge is going and not just put everything in the same region or just do it's fine this effectively makes the behavior location wise nearly identical to Lambda which solves most of our problems this is a project for cell built to test the database latency C for Global Edge versus regional edge with a bunch of databases in the same region or not depending on the database so in this case we're going to pick Planet scale love them they're a channel sponsored poorly transparent and we can test the latency from a global function versus in a US East Regional function so the regions the same as the database it's not making a database connections using the HTTP proxy or HTTP endpoint we'll talk about that more in a bit but I want to show off what the implications are here so if we run with a single query so this is going to run one query from The Edge function to the database and then get a response and time it and we'll see that the global latency is a decent bit higher than the regional one for the processing time which is how long the edge function has to run because that edge function has to take more time to send the request and get back its response but if we look at the end to end time which is from when the request happens on the user's device to when they get a response the closeness here is actually significantly closer because we've taken that one query and moved it from my device to the server so the big difference here is this Gap but the that time is still eaten by us as users regardless but what happens when we change it to two queries so now the edge is going to run a query get some response and then run another after using the data that it got in that first response things are going to look very different now so we can see here with the two query example that the gap on the latency distribution for The Edge versus US is gotten much wider almost twice as wide silly kind of makes sense looks we've doubled the amount of queries that are being done and as we see here there are spikes for the global but it's still not that big a gap but we are now consistently seeing that the regional Edge functions are fast actually it's a bit bigger Gap than I thought it's like 3x pretty consistently two to three x difference between Regional and Global for your Edge functions so what happens when we bump it to five queries when things get really interesting and we're gonna see a massive gap between the edge functions running in the region and the edge functions that are not and this is pretty crazy because we're doing five back-to-back queries that are blocking on a function from the database getting fresh data and we're still getting a response back to the user in under 200 milliseconds consistently under 400 pretty much always which is nuts for doing that much data in a blocking Fashion on a server of any form this is insane performance and to consistently be seeing numbers like this when we test using tools like this one and when I experience it with the things that we've built Regional Edge is a really really good solution to one of the biggest Edge problems which is also one of the biggest Edge benefits the global nature so if the reason you're looking into Edge is faster responses and better connection methods rather than the closeness to the user here you go problem solved what's the catch so we already talked about the region thing and we showed you that it can be worked around thankfully region proximity uh it was uh playing at Scales what I was testing with originally original proximity solved with regional Edge funks so what else compatibility we solve the regional let's talk about the compatibility the big thing to know about Edge is it's not node so a lot of the things that you're used to using in the node environment are not going to work things like built-in crypto methods things like FS you lose a lot of the stuff that we rely on every day and even I've run into problems with some of our deployments where I can't use FS to read a markdown file to parse it inside of deployment and instead I have to do a build step to get that file into the JavaScript world before the Apple location ships on the edge these are things that can be worked around and we've been seeing more and more work done to improve this in fact versel just shipped a bunch of polyfills four different things specifically buffer so that packages relying on Buffer will still work on the edge we're making progress here but we're still making that progress but there's something that's similar but not quite compatibility that's important to note I hinted at it a bit there I should say no native runtime layer what I mean here is you can't shim out to C plus code or run some Rust binary in the background or do a lot of the other things that we're used to with everything from like Cypress to electron to more importantly Prisma in its current architecture Prisma will never be able to run on the edge simply because Prisma runs a giant rust binary that has to run on a real server and you can't run that inside of one of the V8 isolates that exists within Edge functions so something like a traditional database connection where you're making a SQL connection to a database and maintaining that to send queries and responses back and forth that can't happen on edge that's just not an option which is not just fine it's actually kind of exciting because this has been taken as a challenge by a lot of the companies and individuals we talk about on this channel all the time one of the biggest is our friends over at Planet scale who are actually the ones I was testing in this demo here how am I using Planet scale if I can't connect to the database well they worked really hard to solve this there's a library I've talked about a bit before database JS by Planet scale and this Library isn't necessarily interesting as a library so much as the infra behind it that powers what it is capable of the TL DR of Planet scale serverless driver is that you can just post a request to an endpoint and get back a response that post can just be a SQL string so in this example we await connection.execute select one from Dual where one equals whatever you pass for the variable here is a simple syntax to send SQL strings to a server and get back a response without having to form a connection it is hard to put into words how awesome this is and it's really cool to see all the stuff people building on top of it including the Keely driver that is being used here as well as the work that drizzle orm is doing to support all this stuff as well it's really really powerful and I I'm beyond hyped on what I've been seeing what is Edge Edge is two things Edge run time and Edge location location for Edge is you run lots of servers in lots of different places runtime is you can spin up one of those functions and get a response out of it in milliseconds instead of seconds these are different things people seem to think the word Edge means just one or the other it doesn't it's referring to both of these things which is annoying but I don't care about Edge location anywhere near as much because any real application is going to have to worry about data on the edge which means any real application is going to have to worry about where these functions are running or they're going to do some crazy with distributed data which is almost never worth it and as a result this becomes non-viable for a significant portion of the applications on the web and that is fine it doesn't mean it's bad it doesn't mean Edge location is never going to be useful to anybody it simply means that we need to consider that edge means two things and when I'm talking about it I am almost never referring to this so to be very clear I don't talk about this much because I don't give a so if you're trying to sell me an alternative Edge solution that does just this and not this I don't give a I genuinely don't I just couldn't care less if we take a breakdown of a slow request on a T3 app today so here is a request breakdown so you just makes a request user receives response what goes down on this line and to be clear we're doing this for a bad cold started request so we're going to say this takes 10 s total because this is what it looks like for a bad case on like Ping or kyle.com or any other create T3 app so the first thing that has to happen and we will encode we will encode Transit time between server and client in blue so here is the time spent requesting to the server it's all gonna be napkin math but this is from what I've seen from tracing playing with and doing all these other things so request the server is some amount of time this is the bad case so we're going to be doing a cold start so here I'll fill this with pink for a cold start time and then we have another thing here Prisma spins up and connects to 2db orange for things the server does request sent to DB and response received and then there's like an additional render step which is going to be I'll make this a tiny bit bigger to be fair compared to this make this minuscule that little piece there is actually render format output and then the same time at the end here send to user cool this is a rough idea of the pieces that result in a request taking this long on a service like Ping today you have an amount of time that the request takes to get to the server a much larger amount of time that that server takes to cold start if it's not warm which there will be times where it isn't period That's the nature of building things on Lambda you can never guarantee things will always be warm that Lambda once it's gotten all of its code and has everything it needs to spin up now connects to the database alance is connected to the database it can finally send a SQL request to the database get the response format render do whatever it needs to be it send HTML to the user or send Json to the user and then actually sends it to the user this is not the fastest thing so what does this look like on global Edge so if you're going all in on cloudflare your Edge is now global well let's do Global Insurance let's do the ideal this is the uh Regional Edge I will say One S Max because that's fair so the first thing is this is going to stay exactly the same because the distance between the user and the server is much smaller or it's not smaller it's exactly the same so this does not get any smaller when you use Regional Edge Regional Edge request to start's the same cold start time there it's not truly a cold start and they'll fight and I know there's going to be cloudflow employees in the chat saying this isn't really cold start so what I'm going to do to suffice them is I'm going to put cold starting quotes don't come at me next is connecting the DB except funny enough this step no longer exists because we don't connect to the DB we just send it a request so this becomes there and to be fair this will be a tiny bit longer because it also has to sign https and like SSL cert check so we can expand that a tiny bit this will be exactly the same and this will be exactly the same you might have noticed this is a lot shorter now like a lot shorter even though these blue things are still the same size the actual traffic from the user to the server is the same distance all the other steps have been flattened to be way way way faster so what does this look like on the global Edge so the cold start if you're saying the cold start happens in the handshake cool here to make the Nerds particularly happy because like like to be clear the pushback I get I want I want you all in the comments of YouTube to understand what I go through when I talk to cloudflare employees and such here's what they're asking me to do they want me to specify that on the other side here in parallel an SSL handshake also happens so as you see here in this step that's so small it doesn't matter two things actually happen in parallel do you feel better now Jacob is this now accurate cool anyways yes your SSL handshake can have it in parallel to the edge starting up awesome regardless we're talking 10 seconds to one second Max here and if you make multiple parallel database requests in here this can get bigger and smaller but it's not going to be based on or it's not going to be exponentially bigger and smaller like it would would be in the edge here so let's do the next one copy this and paste it so uh Jacob and friends at cloudflare advocating for with global is make this way smaller cool let's do it we've made this way smaller now so the issue here and we'll be very clear about the issue is this request here for every database request we make so we're assuming right now we're making one all the time we saved here is now getting put here instead so whatever the difference was and I guess we have the difference right there it's that difference but it's that difference twice because it has to account for the other side as well and then finally we got our response so if we make a single database request we have taken that travel distance as I showed in the diagram here if we just make one request and we move the server somewhere else is not a big deal we've just moved who's doing most of the travel but if we're doing multiple requests here like will often happen in almost any service then being closer helps a lot more because if we go back to the diagram here let's say this does two requests every time you do an additional request it doubles this so if move these guys down we do two requests that's barely a dent on this so you barely even feel it there we go two requests and if we do this here it's worth noting I made this bigger because we have to SSL handshake once but once we've hand shook you could even argue that that's like a different step so we could argue there's like the handshake step for the initial transaction here I'm not going to label it because I'm lazy but then all of these will be exactly the same as they were otherwise and we end up with much faster overall responses still but here's where the catch happens if we use Global Edge I want to be very clear about this because this is why I think a lot of people push back on edge and I think they have good reason but we had this as the like additional time because of the distance and we do two requests it's a pretty massive difference because if this request took 40 milliseconds in the same region and over 100 milliseconds in a global region you're going to be eating that for every additional request and the result here is a significant full cycle penalty as we saw in the charts here this is pretty evident to me that unless you have data located on the edge alongside your Edge functions then Global Edge is now net negative for a lot of applications but that doesn't mean we shouldn't use the edge runtime so what am I doing about this why am I talking about this now and what does it look like for us to start moving to Edge well the first thing we have to do is handle the dependencies that aren't Edge ready yet the biggest one that we've talked about a lot is Prisma I do want to shout out the team I know they're working really hard to fix a lot of the things that make it hard to run on edge specifically finding ways to run the connection layer on a different server so that you can connect to that through the edge function with a fetch request that will significantly help but we still have a lot of work to do before we're quite there and in the interim there are a lot of different solutions we have right now to start running things on the edge for databases we have kiesley and drizzle which are both phenomenal solutions for auth we have clerk which is then after a little bit of nudging gotten very very edge ready and they've been a reliable off provider for all of our Edge deployments we have upstash which has a redis connection layer that is fully Edge compliant and compatible and honestly I'm not finding many packages now that aren't ready for the edge every everything I use from next to kiesley to drizzle to Clark to a lot of stuff we talk about here almost all of it is ready for the edge now and as a result the applications we've been building on the edge are just hilariously faster I know I show this one a lot but y'all might have played with the first app I built on stream a while back roundest I want to be able to see how long it takes for the actual content to show up in the page that was a pretty rough cold start I didn't even have the network tab open but that finished in four seconds for a hilariously minimal application pretty sad but if we compare this to a different app I built which to be fair isn't fetching data from The Edge to start it's loading it in client but the result is just hilarious like this is milliseconds now instead and that like final chunk after that's all from like Chrome extensions if I go here and do it 300 milliseconds 200 milliseconds or if I uh what's the edge deployment for chirp that I made uh this is a deployment of a Mojo that appears to be broken probably people spamming content they shouldn't but it is getting a database response in that time and that database response is literally coming in 500 milliseconds or less fetching a ton of data so the page is crashing I'll go deal with that later it's on the deployment of played with much recently but even like marker thing marker thinks a new application that we just shipped that also runs on edge I guess it's not signed in at the moment and you'll see the page response times are absolutely hilarious for fetching data and actually rendering it it's insane the response lines we're seeing from things on edge no matter how much traffic they're getting is just absurd and like the latency that we're seeing is coming from whatever random JavaScript we're loading on the client usually in this case like Twitches JavaScript yeah yeah things have been great I am really impressed with the performance we're seeing overall surprised at how smooth the adoption has been and overall just putting us in a place where we can take advantage of never ever ever eating one of these again theoretically there's a future where cold starts can be mitigated by Lambda or things around it but until we're in that future I really really really would prefer to never have to worry about cold starts affecting my users again also this one because these two blocks tend to be where most of my applications waste their time running and when a user doesn't get a response back in a second it's almost always because these two things are holding them back so if you want to make make your applications faster and you want to keep using the awesome technologies that we talk about here these are the problems that keep us from having that type of performance on serverless we have to talk about one more small piece how do I actually deploy this there's two ways that I deploy it one I like more than the other both are very much using versel and nexjs the way that you can make any application on versel to play on the edge it's actually pretty simple in your next config there is a runtime experimental Edge that said versel does plan to deprecate this because they don't want us thinking about Edge on an application Level they want us thinking about Edge on an individual route level the way they recommend doing this in the way that I've seen it in most of their demos has been on a given page you export const runtime equals Edge and you can put node here if you have something that's incompatible with Edge on just this one route which means that on a route level an API route level or a page route you're able to tell versel if this code should be thrown on Lambda or on edge which allows you to have pretty hilariously granular control over how how your applications are deployed the result is just hilarious performance I've been beyond impressed with what I've seen but it's so simple to actually move your applications to the edge I yeah I've been really impressed if you're on other systems there are ways to deploy you're probably going to have to spend some time setting up cloudflare yourself though to me versel is the easiest way to deploy on cloudflare's edge so I use cloudflare's workers Edge functions through versel by adding a key here or honestly usually putting it here until they tell me I can't anymore one last request from versel I personally would really appreciate a way to opt all of my functions into Edge as the default runtime and have to opt into node rather than the other way around which is what it is now where everything is node by default knife to opt-in to Edge y'all were down to make that change or at the very least leave this here for me I would appreciate it because I don't want to have to manually go through and declare Edge as the method of runtime for every single page route appreciate the help there super hyped and what versatile's been working on here I hope this one was helpful I've been holding this one back for a bit and this is why I'm moving off a serverless for the year and trying to focus all of my efforts on building great applications on the edge if you want to hear more about what makes this database performance so important I have a whole video dedicated just to database performance on the edge here check that out if you haven't already thanks as always peace




## The $4 BILLION Hack That Everyone Missed - 20240424
hacking happens to everybody usually hacks are pretty small sometimes they're really big ideally they're disclosed ahead of time and hopefully the company that caused them will actually respond and fix things basically everything I just listed here didn't happen in the scenarios we're about to talk about I'm lucky to have a few community members specifically Mr bruh and XYZ Eva who have been on top of the world of hacking specifically finding security issues in Firebase apps I knew this was going to be bad I actually filmed an intro when I started the video not realizing how crazy it was we're literally talking about billions upon billions of dollars of potential exploits here that they were kind enough to just hand over to the companies that caused them make sure you watch this video to the end cuz there is so much craziness throughout including but not limited to the company's customer Supports flirting with the hackers including billions of dollars of exploits including basically every fast food restaurant being pwned and of course lots of fire base let's dive in so let's hear how Mr Bru and Eva successfully pwned like over half of the fast food in the US when I beat playing my console alerted me that my script had finished running to be precise it was searching for exposed Firebase credentials on any of hundreds of recent AI startups this was achieved through a public list of sites using the a TLD and parsing the site data to any referen JS bundles for references to Common Firebase initialization variables I don't think yall understand how easy it is for people to just look through your code and see what you're using in that code base you might like to believe that these things are private and get compiled out they don't it's pretty easy to deop youate JS and see what people are using including in this case Firebase but here's where things get fun production API keys in your Firebase project surprisingly common especially for mobile apps people love to just ship their keys in the app and if you don't have things set up properly that can get bad especially when you just get like your open API server side Keys bundled into your crappy IOS app disaster waiting to happen surprisingly common my hunch was that in the rush to push their shiny new product somebody would take a shortcut and forget to implement proper security rules yeah welcome to the world a Firebase where everything is exposed the client by default and nothing has good rules Firebase is great until someone like this comes at your service and realizes that half your Fields don't have proper right protection setup because no one does that and then the result is that you can hack them the hunch was right and it was worse than I could have ever guessed meet chat. the self-proclaimed AI hiring system that claims to shave 88% of the time off of your hiring for new people wonder if this site could replace that recruiter we were talking about earlier they provide their services to a massive number of fast food chains and other hourly employees all around the United States including but not limited to Applebees RB's Chick-fil-A Duncan IHOP KFC shies Subway Taco Bell Target and Wendy's I as a big Duncan fan this hurts me one of the worst parts of moving West Coast is that I went from having like three Dunkin Donuts per citizen in Boston to like there's I think one in San Jose and that's it we're not here to talk about my love of Dunkin Donuts and my history of Massachusetts we're here to talk about Firebase being [ __ ] the vulnerability if you drop the Firebase config from the JS bundle into fire pone you start out with zero permission as you can see in the following screenshot fireone fire pone is a tool made for testing the security rules of a Firebase app o fancy most of the Firebase pent test scripts on GitHub are using the Firebase rest API to test for configuration issues in Firebase apps however they might provide false positives resulting in some gcp environments the scripts test for authentication issues only and not authorization big deal they just see if you can get authenticated for things you shouldn't be able to see but more importantly authorization tools means that they can check what they do and don't have the ability to do which is where it gets even crazier because if you are authenticated even if it's the wrong token but you can then change things for other users that's almost worse and people love to think as soon as they put an off wall in front of their stuff that they're safe and good to go but if I can pass through your off wall and what is inside is just an Open Garden for me to [ __ ] around in doesn't matter that you have off if I am authenticated to then do whatever I want to do and most things don't have their Firebase security rules set up properly and as they say here they might be just checking for allow read permissions at least the scripts that they cited here before so if the Firebase security rules are to deny read but also allow write then you'd probably miss some critical findings big deal imagine there's some deny read thing that's you keeping track of like a user's balance let's say but anyone can write to it now if you're a user with a balance I can update your balance or my own or anyone else's if they didn't set the right permissions properly as well after digging into Google's docs for a while I managed to realize how Firebase applications work internally and the real possibilities to exploit misconfigured Firebase security rules that's why I created fireone a tool for testing authentication and and authorization by utilizing multiple Google services like Firebase off fire store Cloud functions using the client SDK I did see Eva said in chat she made her own in-house version with her crew because that one was clunky I actually did see her share this p& which is a Firebase exploitation tool yeah love that this is the problem with these services that promise to just do everything for you and this is why I don't trust any backend as a service if you're not writing your backend code you don't have a backend you have a security issue waiting to happen anybody who is providing you a data store that you hit via API on the client side has just thrown away all of your control and it does not surprise me that something like Firebase has default configs that screw people over so much that tools like this can trivially identify things that you should not have access to this all logically follows whenever you make certain work unnecessary without making really really good standards around the work you just made unnecessary you are going to make things much worse for people this is kind of the issue I have with other tools that are trying to abstract like your database via graphql like I don't like aora for the same reasons but Firebase is probably the single service that is the most guilty of tricking app and web devs into thinking they don't actually need to build a backend and since they don't think they need to build a back end they don't really think in backend and the result is terrible security I know that people don't love that nextjs is trying to push more and more react devs into servers but it's forcing them to think about them that's a huge difference the server component revolution has been controversial because suddenly react devs have to think about servers is part of their architecture and historically they've avoided doing that this is why you can't avoid doing that everyone should think more about servers in the relationship between the server and the client if you want to build software that interfaces with both this is great got a a fun picture from Eva here this is showing when the blog post came out yeah understandable and I have a feeling after this video comes out the stars are going to spike yet again because uh yeah tools like this should probably be more common not because everyone deserves to get hacked but because knowledge of these things needs to be more understood I also saw a really good question of is superbase the same I will say that superbase can be the same but if you're using it properly it won't be this is why I don't like the superbase JS client where you're actually using superbases JavaScript on a user's device to do things because then if you get anything wrong with all of your Ro level security stuff you're screwed what I much prefer is that you have your own back end where you're using subase just as a database maybe even through an omm like drizzle and you're just treating superbase as postgress that's A+ as long as you have a server that you run that is the thing that goes from the user doing something to your database's response you need something in the middle there and you need to own that something any service that is pretending to abstract that for you is a liability it is just a [ __ ] show waiting to happen I cannot in good faith recommend Firebase at all for this reason I cannot in good faith recommend super bases client side stuff for this reason all of these things tend to just make the likelihood you have a security issue much much higher on the topic of superbase superbase actually has a linter to to make it slightly less likely you make these types of security mistakes so that's cool to see but still work to be done I wanted to emphasize something quick these guys are working really hard Mr BR a seconde uni student like he's still in college here and he's working four to six hours a day in order to find the email addresses in order to responsibly disclose these things here is a picture of a form that they're working on in retool so that they can actually fill out all of this [ __ ] more effectively cuz you have to do this all by hand you can't automate the reporting but also Eva's only 17 no offense to Eva she's clearly like next level at 17 years old but if you're getting pwned by a 17-year-old and your response isn't the kindest thank you and a job offer you [ __ ] up so yeah uh probably the most hirable person in security very soon and yes I feel old she's 12 years younger than me Jesus Christ apparently Eva as well as Mr bruh the people who actually did these hacks are working with superbase to try and prevent these things from happening to them in the future that's really cool to hear I'm pumped about that good stuff oh look at that Eva's already committed that's dope that's huge and like again if any of you companies are looking for Security Experts to help with your [ __ ] here you go there's one right there xyc Eva anyways back to this blog post because I'm enjoying this a lot as we see here fire pone you Dr the config and then it will go through and figure out all the things you can and can't access but if you use firebases registration feature to create a new user you cannot register on the their site you get full privileges read and write from the Firebase DB so this is the default if you register in an app it might be different you start with zero permissions if you start with the JS bundle but if you make a new user then full privileges as long as you make it through firebases registration feature instead good to know here we now see we have access to literally everything the data it exposes includes and is not limited to names phone numbers emails plain text passwords locations of branches confidential messages and shifts and they found this for all chatter employees for all franchise managers and all job applicants pwned as [ __ ] that is actually insane and apparently it gets worse oh boy yes somehow it manages to get even worse if you grab the list of admin users from orgs zero users you can splice a new entry into it giving you full access to the so they didn't have the proper right protections on their admin table so you can just add yourself as an admin so at that point if you don't have the right permissions preventing people from adding themselves as admins you're [ __ ] are you kidding and like this is where I really want to emphasize the point I was making about owning your own backend I cannot imagine a single person watching this video writing backend code for adding and removing admins to their service that wouldn't think to check if the person doing the ad is an admin or not that's the first line of code you write in that function the add as admin function first checks to see if the person doing it an admin or not and then it does the thing that's how you write that code but if you're using superp base or Firebase on the client side and you're letting them be your backend for you you're not writing that code because you're expecting them to write it for you and that's where the failure happens when you don't own the function itself that does these changes you have just thrown away all control it's that that you can't go into their site and configure it through all their settings and [ __ ] it's that that's no longer part of your code base it's no longer part of the the traditional scope of ownership of the code that you wrote and most importantly that's not going to come up in code review either and that's the biggest thing if a random Junior Dev commits some [ __ ] and makes some changes in the Firebase config that have these problems you can't see that in code review but if somebody makes this function and adds it to your back end and then that gets seen in code review you can prevent that from happening it's so much less likely that these failures leak into production if you have them in your code and you have them in a service that you own as you can see below it allows for even more control over their system including accepting and denying applicants or even refunding payments made to chatter hey chatter AI do you guys have any idea how lucky you are that this was found by wholesome people that would like responsibly report it to you instead of by some hacker that wants to destroy the world you could have gotten so [ __ ] like so so [ __ ] no offense to bruh and Eva and all the people who do stuff like this we shouldn't oh wait they ghost never mind never mind apparently they were ghosts I hate the space sometimes I really do yeah they made a public tweet with a wrong email they fixed it and ghosted us I yes let's see the response I I have to this is why you need to keep your DMs open by the way everybody's like why do I have my DMs open I have 150,000 followers it's cuz I first off I have somebody else who helps me check it but more importantly if something like this happens like I know Eva because she dm' me hey Theo should I be able to edit things in your notion docs cuz she has successfully exploited my notion yeah yeah this is hilarious at chatter your privacy and security are our top priority we've swiftly addressed a vulnerability in our recruiting platform ensuring that your data remains safe no Financial info was breached we're enhancing security measures for your peace of mind for additional questions please reach out to us at this which apparently this is even the right domain yeah this isn't even them so in their email here they put the wrong God and Eva with the I'm going to hit the like so I can be the one to push you over for the ratio that's so good also for what it's worth when Eva did this what did you have like 8 to 10 followers now that I'm referencing her all the time she's at 200 if she's not at 2,000 by the time this video has been live for 24 hours y'all [ __ ] up go give her a follow she's having a lot of fun hacking these things and I'm having a lot of fun talking about them link will be in the descript of course she got a bug Bounty from the Firebase stuff and used that to gift me a bunch of subs and also pwned a weed shop recently with the same Firebase bug so yeah hilarious let's get back to this blog post just given full control over all of this stuff that's so funny like they're they're inside of their chatter UI looking at stuff because they have admin permissions now just hilarious yeah I am so blackf I I cannot trust anything using Firebase anymore if this is this easy to do here's the timeline 0 601 so this was last year 2023 vulnerability discovered 91 vulnerability write up completed and emailed to them 101 vulnerability patched 1101 support ticket closed no thanks or further contact received despite explicitly requesting that's so inappropriate we need to thank these people who do these things especially when they follow the rules this well they did everything as responsible as possible here and they never got a followup that's horrifying also I just realized I misread these dates this is [ __ ] even specify there I'm just too us pilled so this was January 6th they found it January 9th they emailed it January 10th it was fixed so clearly the fix was a direct result of them finding it and emailing them so to not credit them or thank them for it is disgusting I love shouting out and thanking the people who find these things in my services everybody makes mistakes usually the mistakes aren't this big and usually the mistakes aren't Firebase but everyone has security issues in their stuff sometimes it is important to build a good relationship with your community such that when people find these things they know they can come to you and have a relationship with them usually in these scenarios the people who find these things are compensated and given some form of bounty as a thank you both to recognize the hard work they did but also to balance out the fact that they chose to not make a bunch of money exploiting this they obviously could have stolen and done crazy stuff and gotten a bunch of money from this exploit but instead of doing that they documented it told them about it and then got nothing for it other than this blog post and now this video so yeah if you're a company that has a way for you to report these things pay the people who do it if you're a company that doesn't have a way to report these things fix that now because you don't want these people to not the number of times I've already had Eva come to me asking for intros to other companies because they don't have a way to responsibly disclose security stuff is insane it shouldn't take a YouTuber and a random hacker to keep your stuff safe you should make it easier for everyone to report these things to you and you should compensate and thank them accordingly if you want to learn even more about the fast food hack you can check this article out on kd. toown I'll be sure this is linked in the description but it turns out it wasn't just this fast food hack they actually got into 900 sites using these same exploits let's take a look at how sites 125 million accounts one vulnerability oh boy and now if anyone says oh this is just like users being dumb obviously anyone using Firebase properly isn't going to have this problem when one vulnerability results in 900 sites being compromised that's no longer user issues that's no longer just skill issues that's the way the service was implemented there's a point where you have to reflect on the fact that a significant number of your users are using things so wrong that you need to do something about the service and if this isn't a wakeup call to fire that they really need to fix [ __ ] I don't know what will be because this is terrifying tldr Firebase allows for easy misconfiguration of security rules with zero warnings yep it's pretty clear at this point this resulted in hundreds of sites exposing a total of 125 million users including plain text passwords and sensitive billing info yep after the initial Buzz of poning chatter AI had settled down we set to work on scanning the entire internet for exposed private information via misconfigured Firebase instances tempt one Mr BR wrote up a rudimentary scanner in Python that would check for Firebase config variables in websites or in their loaded JS bundles it worked until it didn't turns out that a Python program with 500 threads will start to chew up memory over time for us that meant it was out of memory without in an hour of starting it just put it on a cron understandable this is insane attempt two logy KK rewrote the scanner in go unlike the prior it didn't seem to leak memory our initial estimate was that this was going to take around 11 days to scan through the 5 and a half million domains but it turned out to be closer to 2 to 3 weeks which made this very much a waiting game yeah also how insane is it that they went through the entire web so to speak everything they had like an easy way to index and list it took them 2 to 3 weeks to just analyze all the sites actually insane manually checking every domain we first went through and started manually looking at each entry in the 550,000 line text file seeing if we could find anything interesting this was time-consuming and very repetitive I can't even imagine in the end we went through quite a lot of it and found 136 sites and 6.2 million records so they they realized this is taking too long they need to automate it and here's where they built catalyst once we had acquired our short list of potentially affected sites we ran it through a secondary scanner that Eva had made called Catalyst this would take the sites or the JS bundles that they found then automatically check for read access to Common Firebase Collections and any that were explicitly mentioned in the JS itself that's a really good call if you see things that the JavaScript code is referencing and accessing it's worth checking those things they probably are both the useful things and the things that were incorrectly configured when it found read access to a collection it would attempt to calculate the impact of the exposed data by gathering a sample of 100 records checking the types of information contained and extrapolating that by the total size of the collection clever then they had to find a place to store all of these results and they actually chose super base funny enough just for the irony okay I love that you guys are funny I like this a lot once all of this had been completed the data was formatted and uploaded to a private database table there you go insane amount of data from all of these Services they had compromised literally 900 of them the numbers all of the records they stole were 125 million 85 million names 106 million emails 33 almost 34 million phone numbers 20 million passwords what the [ __ ] what the [ __ ] and then 27.5 million pieces of billing info that is insane what 19 million of the passwords were playing text according to Eva just now so uh yeah once again services like this encouraging Madness not best practices these numbers be takeing with a grain of salt they are likely larger than shown here oh God oh God the short list of affected sites Sid ml or LMS it's a learning management tool for students and teachers oh boy that means that this is exposing the info of underage people which is its own separate chaotic thing the [ __ ] 27 million affected users compromised do you know how valuable the phone numbers of children are it's shitty and terrifying but yeah that's a very valuable and very very scary data payload [ __ ] the online gambling Network oh boy compromised of nine sites which are all reskins of each other good old gambling sites some spins are rigged to have a 0% chance of winning I love they were able to figure that out customer support tried to flirt with me when attempting to report the issue what the [ __ ] is this what the [ __ ] okay apparently there's more DMS so let me check that quick oh my God there's a lot here oh boy let's get these open in the browser here is more DMS hello we believe we found a vulnerability in your site C my misconfiguration really really good reporting by the way this is like the right way to disclose these things now reporting an exploit please let us know when a person reads this what do you want sir don't send messages to me please you have an exploit fix it please no I'm sorry I have to it's just too good I can access everyone's data my site is okay don't spam we can fix this Emoji oh my God so long time do you have a time machine you so watching a movie a lot bro so I've always known these gambling sites were [ __ ] scams but holy [ __ ] if you're currently an online gambling addict hopefully at the very least this helps you move to IRL gambling instead because this is [ __ ] hello I'm Joe a developer thank you for your message and the guidance on improving web security it's great to have your support and identifying and fixing this vulnerability and I will address it as quickly as possible could you please tell me if there are any other websites that might be affected if they are all Sites I'm working on i' like to fix them all yes we have a list of all your templates sites affected by this give me one moment this could have actually been very bad this had a chance of like and you guys are smart so this won't happen to you but it's actually possible that if the like the hackers that figure this weren't smart [ __ ] like y'all are that he could have convinced you guys to give him info on other websites that you've pwned that aren't owned by him and his company at which point they could use that data maliciously I actually still think that might be the case that they've already had this chat get pwned and the person responding here might not actually be an employee of the company but is actually looking for info to pone the rest of this company services not unlikely in the slightest but uh I'm curious where this chat even came from was this like a like something they had on their site or something like how did you find this place to send this too cuz this is insane and I'm being irresponsible even pointing this out but uh the vulnerability is apparently still Al so uh every user for the site also has to provide their Bank login great so me making this video might end up in a lot of people getting poned I am sincerely sorry but I am doing my job of reporting publicly existing news on a company that hasn't addressed these things so uh please get your [ __ ] fixed gambling company cuz you're about to get pwned real hard when this video goes live and there's nothing I can do to prevent it it's been like a month the customer support was a line chat oh boy you tried your best you guys did great and hopefully this this video makes you a little bit more scared of not fixing their [ __ ] just don't Gamble and you won't get pwned I guess yeah the biggest gamble is using Firebase you are a Firebase support no an independent cyber security company we perform penetration tests oh I see thank you very much no worries just let us know when it's fixed the followup we didn't make any accounts for this vulnerability please inform us of the information used for registration this is just default crappy AI support trying to answer questions please capture the screenshot for the admin here's screenshot of them compromising everything couldn't get admin panel easily today but all of your admin usernames and passwords are exposed same for the user phone numbers and passwords like yeah it's there that's insane as well as Bank Account Details what information do customers want to inquire about can you fix the issue please do you want to apply for membership on the website this is either AI or suggest you follow that no thanks thanks you there's some amount of like language barrier here but this is mostly pretending you're not responsible for [ __ ] this is actually a different template site oh boy their only fix was deleting the admin panel too which is insane actually insane Jesus Christ back to this post cuz this is only getting crazier contains the most amount of exposed bank account details and logins out of all of their records 8 million bank account informations and details have been leaked through this also contains the most plain text passwords out of all the affected sites at 10 million passwords being exposed I'm assuming you guys confirmed that these are actual plain text passwords by like trying to sign into an account and being sure it worked or just looking at the passwords and seeing them be plain English that works too cool confirmed they actually were able to get into accounts using this info which means it is super poned next one lead carrot what the [ __ ] lead carrot oh it's lead carrot it's a lead generator oh it's like a carrot on a string that's actually kind of clever shame they don't know how to code because they were the top three in total amounts of exposed user info sitting at 22 million affected people next is my chef tool it's business management app and a point of sale application for restaurants first place for most exposed names and second place for most exposed emails 14 million and 13 million respectively Jesus [ __ ] Mr BR has made a good point about the banks let's say that there's $500 in every bank account considering the insane number what how many was that again 8 million bank accounts info exposed so we'll just do the math ourselves quick we assume they all have 500 bucks and there's 8 million that's a $4 billion exploit that they disclosed responsibly for free Insanity I've never seen anything at this level holy [ __ ] and here's the aftermath 842 emails sent over 13 days 85% were delivered 9% bounced 24% of the sites owners fixed their misc configs only 1% even bothered to email back this is probably the most painful thing thankfully at least a fourth fix things but less than a 25th of them actually bothered to hit up the people who did it and say thank you for letting us know that's insane two sites total offered a bug Bounty 0.22% of the things that they exploited here offered to pay them I don't know if you guys are comfortable disclosing the number but I'm assuming correct me if I'm wrong it's a lot less than4 billion [ __ ] dollars Jesus Christ yeah literally [ __ ] all you guys made literally nothing from that that does not surprise me Pennies on the dime can't even imagine it was less L than 10K Jesus Christ this is stressful the fact that people can just put things on the internet using the data of millions without understanding the very basics of security and Firebase basically encourages this Behavior that's absurd so if you're using Firebase go make sure all of these things are configured correctly and be very very careful with it and even if you're not please please be more considerate of safety with these things you need to make sure there are good ways for people to report issues when you they exist you need to respond to those things as soon as you get those because you need to let the people know you're actually working on it you to thank them for it make them feel good about it and ideally [ __ ] pay them because they could have taken billions of dollars from your customers and they chose not to out of the kindness of their hearts most people don't have that kind of a heart and you should be prepared to at the very least support the ones who do that's all I have to say I went into this think it' be nice and funny but honestly I'm a little depressed now those numbers were terrifying so uh until next time peace nerds




## The Actual Dumbest Thing About TryCatch - 20240814
I'll be honest error handling in JavaScript kind of sucks I know hot take but that's what we're here for right seriously though try catch is it's a disaster there's a lot of subtlety for the things that are wrong with it but there's one particular piece that I don't think it's talked about enough and I saw a tweet that inspired me to make this video the piece that we're talking about here is the scoping huge shout out to Leah for taking this unpopular stance that I am going to go out of my way to make popular because JavaScript should work the way way that they're describing so what is le describing here Tri blocks should have been designed not to behave like a regular block with respect to block scoping variables it's rarely ever useful since the scoping is not conceptually meaningful effectively it's more of a code annotation than a control flow unlike control flow blocks there is no program state that only makes sense within a tri block the catch block on the other hand is actual control flow and scoping makes complete sense there so what are they talking about what's control flow what's going on here we're going to have to open up a Sandbox in play so here we have a basic node template let's do a function do some work in this function we're going to do things let's say one of those things might error we'll say function get number we'll do const number equals I'll do num so it's not the weird type equals math. random time 100 and if num is greater than 50 we'll throw a new error number too big otherwise we will return num cool so this function will return a number but it also might throw an error so now we want to use this for something let's say random number doubler so this function generates a random number and then it doubles it so we need that number first so const num equals get number so we'll say const double equals num * 2 and then we'll return double we'll say const doubled equals random number doubler and we will console.log doubled cool pretty basic let's run it node watchat index.js oh the first time we got error number is too big we should probably handle that so let's handle it we'll do a try blck since this is safe we won't put that in there and we're going to catch e console. error E and then we'll return negative-1 just easier to rerun index.js node watch index.js third times the charm cool so here we still get the error number is too big and it returns negative one now instead but what if it worked let's change the condition here to be if number is greater than 100 we'll throw now we're getting a different error number is not defined this is the problem since this is defined inside of the tri block num doesn't exist outside of this block the only way for this code to work is to move this in here which is dumb or to have let num equal -1 and we try to set it in here instead these are the only solutions that actually work because when you define a try the things inside of here are scoped into this block so if you define a variable in here if you do any new instantiations inside of the tri block don't exist externally does just doing let num in here work nope it does not nice try do you know what does work ver because ver hoists it's so dumb it's so dumb so what's going on here when you define something in a block like this in JavaScript it doesn't exist outside of the block unless you use ve which allows you to Hoist the value out this is awful this is terrible the reason this exists is if you had an if statement like let's say we have um function double if odd and this function takes in it won't even take in the number we'll just grab the number still like this or you know we'll take in a number we'll say num comes in here if num mod 2 does not equal zero then we we can even Define it in here const doubled equals num * 2 return doubled obviously you just return directly there otherwise we return num if we were to try try and access doubled outside of here even if we don't do that console.log doubled we can't do that because this doubled exists in this scope not in this scope if I was to call this below doubled if odd for we'll get an error as we should because this doubled variable doesn't exist out here if I ve it it works because that will hoist it which is a terrible Behavior but there's a reason that we do it this way it's because this code might not get hit there's a possibility half the time in this case that doubled will not be hit because this condition isn't necessarily true and that's why we have blocked scoping inside of JavaScript because if you have a condition that might not be hit any values that you define in here now are things that might not exist because if we pass this an even number double doesn't exist so obviously we can't log it so here that makes sense where it makes a lot less sense is in a tri block because this Tri block always gets hit no matter what we do you will hit try so why does this block get destroyed why don't we get to keep whatever variables and values happened in here the only case I can think of that would make any sense for this behavior is if we're defining multiple things in here and an error Could Happen somewhere else well let's just throw here throw new error forcing ve to never get hit I could abstract this so it's a little sillier like function log something and let's say we have this log function that's just broken and we trigger this here this seems like it'll be fine and we are catching an error here but if we were catching this error and we weren't returning this is when the problem start even if we set ver num to just be one since this error happened before we hit this part in the scope that value can't exist interesting that they have the error here as forcing ve to never get hit so it's smart enough to know that this should be hitable and in this particular case it's not because I'm forcing an error before the variable is defined but that's the only reason that try catch could ever reasonably be thought to keep things in its own block because theoretically if in the catch you don't escape because if in the catch I return there is now no world in which we don't get to this code but if we don't return here and we try to keep going through the code but an error occurred before the variable is defined then you can theoretically get into a situ where you're trying to interface with a variable that doesn't exist because you caught an error that occurred before the variable was defined that's the only reason that try catch should have scoping in the try because it is conditional not in the sense that the whole thing conditionally runs but any given line inside of the TR catch might not be hit because an error happened earlier in that Bing so the more I'm thinking about it I'm beginning to understand why it works this way but it still sucks ideally it wouldn't do that and we would have types script be smart enough that if we return in the catch it knows the values exist and if we don't return in the catch then it assumes undefined could be the value for any given one of those variables the tri block contains statements that are conditionally executed with that condition being if an error was raised sounds like control flow to me this is true even for code not wrapped in a tri block you just don't get anything else executed after in that case yes I I'm beginning to change my mind on this I even tweeted here that I wanted this to be a popular opinion and I still do but the fact that something occurring within the control flow might break that way is a a real Edge case that I hadn't been considerate of enough until I started writing the code and demoing it for this video crazy how educating people on a topic makes you more informed on that topic the difference if this so to to follow up with what Leah said here is if the code is not wrapped in a tri block you just don't get anything else executed after in that case but you do if you catch it so that's the difference if I was to just delete all of the catch stuff here this throws any of the other code executes so it doesn't it might say the like ver is never getting hit whatever we're going to const it instead and now the error we're getting oh no that's the error that I I named there never mind forgot that I named that that cool I was going insane for a second we're going to change that to uh don't forget to subscribe by the way half my viewers haven't subscribed feel free to hit that button cost you nothing anyways now we're getting the error don't forget to subscribe much more useful the point I'm trying to make here is that because we're throwing this error none of this code gets executed but if I was to change this to ve and bring back the tri block even if I suppress that we now get an unexpected Nan because the TR catch kept this value from being defined and now we're trying to interface with this value that doesn't exist and when we multiply a value doesn't exist by two the results Nan so while I understand where Leah is coming from here that if code isn't wrap in a tri block the scoping problem still exists except doesn't because if you don't have the TR catch Block it's impossible for this code underneath to execute if you were to think of the tri block less like one block and more like each line is an if statement it makes more sense that it's scoped the way it is because it means you have to assume afterwards that the values don't exist yeah I'm changing my tone on this I'm actually yeah I'm coming around I I might change my mind on this I hate the DX of it regardless but the fact that you can have an error occur before a variable is defined and if you don't return and catch it's possible to try and access that value and do something wrong and broken that would suck okay yeah I've changed my mind hopefully you watch to the end of the video so you can see why my mind on this has changed because as much as I agree my my mind is changing Ethan ner had an interesting point I wanted to talk about because he said I should if you don't already know him he's the guy that made effect TS popular Zig has a similar concept here where you can on a given call write a catch case there and then you can assume after words that that thing exists there's also a try keyword which is cool where we try file. write all and now if there's an issue we will um return error file not found it shows you where that came from because we're trying to write to a file that does not exist does not exist food. text we defer the close which means that after the function runs we close the file writer then we try to write since we put try here we can get the error for accessing that makes sense yeah I do like how Zig is doing this there's definitely stuff to learn from here but it is important to understand that if we're defining things inside of a tri Block in JavaScript it's possible that any line isn't accessed this is the first time in a while that I'm just coming out with a different opinion than I had at the start but I I no longer agree that hurts and somehow despite all of that my conclusion is as always JavaScript sucks I do not think by the end of this I would end up disagreeing and still somehow hate JavaScript more but that's the nature of this terrible language we work with until next time peace nards




## The Angular Comeback - 20230308
I guess we have to talk about angular again never thought I would say that I made a video a long time ago about why I would never talk about angular because honestly it's not interesting to me at least it wasn't generally creators talk about the things that they're excited about or interested in and I'm interested in Frameworks that are trying new things changing and innovating and pushing standards forward an angular hasn't been that for a very long time by choice angular's goal wasn't to advance web development by introducing revolutionary new patterns and features it was the standardized web development by having a core set of things you would use again and again and never think about too much it also means things like self-closing tags took years to ship but it also means things are pretty stable so that's been the angular experience for a while seems like that's changing the last few months years of progress have been made I feel like we went from the only angular talk being the occasional old feature finally making it to the framework now we're seeing being creators of All Sorts talking about angular people from the angular Community getting way more attention huge new features being lifted huge contributions from the angular space obviously the creator of angular mishko having a lot of success with quick as well just seems like angular is in the air again I want to talk a bit about it specifically the signals change and why I think it's so interesting what is this signals change that we're talking about because it seems like everyone's talking about signals right now well signals kind of another word for observable the idea is you instantiate a value remember that value is used it's called with a function so when that original value changes the place where you called it can get updated direct instead of having to Traverse your Dom tree and all of the places where data could theoretically have gone a signal will only update the places where it's called makes it much easier to model your data flows especially in a framework like angular where those data flows have gone chaotic to say the least and that's kind of what's called out here we believe adding built-in reactivity to angular unlocks many new capabilities including a clear and unified model for how data flows through an application if you think dataflow and angular is clear you're lying or you haven't used other Frameworks because it's not data management and angular has been chaotic for a while and actually identifying how State flows through your application it's a mess it's because they used a model view controller model in a system where model view and controller are all kind of the same thing and really closely related MVC kind of made sense on servers it makes absolutely no sense on client and react proved that with the component model thankfully this seems to be addressing that and it's nice to see the core angular team acknowledging that their way of doing things not only is outdated it's actually pretty bad and the things that we're seeing from other languages enable much better patterns even in angular and if you can build something like signals that lets you skip the entire State Management flow of angular in favor of using angular to render your application once and then everything updates itself through signals it basically turns angular into Astro with like an island model with signals it gives angular hope and it means in a given angular code base you would theoretically be able to adopt the signal patterns for a specific portion of it and make certain pieces of your angular chaos a little bit nicer to work and more maintainable it would be a huge level up specifically for people who are already in angular that have developers that hate themselves because they're working in angular every day this is a huge acknowledgment of how bad things are and that the best solution isn't to fix them it's to skip them we are entirely working outside of angular State Management when we introduce patterns like this angular is not my thing it's probably not going to be anytime soon and none of this makes me more likely to adopt angular but it does mean that people stuck on angular have an actual path to decent patterns and a better developer experience if anything what this tells me is we were kind of right and the fact that the software developer Twitter and YouTube worlds have hated on angular for so long as painful as it must be for angular developers and maintainers it was for a reason it's because those patterns sucked and now the solution isn't to fix them it's to work around them it seems like our complaints have worked I'm really excited to see how much better the experience can be for angular developers because a lot of them are stuck and this seems to be acknowledging the pain that they're stuck with thank you to the core team for the hard work y'all are doing on angular getting it to a better place I do genuinely appreciate it I hope you'll understand that the heat isn't because I think y'all are evil it's because I think these patterns were toxic and it's really nice to see the change happening thank you for the hard work really appreciate it see you in the next one check out our videos there peace notes




## The Average React Developer - 20231019
it's important to understand that the average react Dev isn't an Enthusiast funny enough I'm one of those Engineers there's a quote I think a lot about that I was told at a young age Imagine an average person perfectly average intelligence the most average Joe you can think of half of people are dumber than that person this is why it's important to think a lot about averages average is not meant to measure the majority it's meant to measure the middle and sometimes the distance between the biggest Extremes in the middle can be massive that's why we're going to talk about the average react developer today before we go any further I want to talk about you a little bit because you the viewer of this video statistically speaking you're not the average react developer if you're watching videos about react on a channel like mine in your free time especially if you've watched my videos before this video isn't about you but that doesn't mean it's not useful to you because we're talking about the people that you might not see or know about I know a lot of us tend to surround ourselves with the most tent talented developers and you might not think it but our little Tech Twitter bubble is pretty close to the top these are the people who spend their free time watching videos about Technologies hanging out in the communities Discord plug by the way Link in the description these are people who want to better themselves every day and not just at work during their 9 to5 shift there are people who care a lot and I know you're one of them either that or a friend of yours sent you this video and either way don't hold it against them regardless the average viewer of this video is not who we're here to talk about it's the average person being paid to write react code because I don't think we understand them very well I had a tweet a couple days ago about how the average react Dev almost certainly has never knitted a react project before and the immediate assumption was that I meant they haven't from scratch made all the files made the package Json and installed react in a vanilla empty HTML file themselves that's not what I meant I meant the average react Dev is never run create react app create next app or even create T3 app it's important to understand that the average react Dev isn't an Enthusiast they're not out here trying to better understand every detail of the framework they're not Google searching tutorials and learning about the new features when they drop they're certainly not watching many videos here the average react developer is using react because they have to for their job because the code base they're working in was already using react and they're maintaining it because one of the enthusiasts at your 20 person team at your however many company brought react in because it would solve problems that they understood but the rest of the team just kind of was along for the ride funny enough I'm one of those Engineers I didn't give a crap about react I only started using it because we started rewriting the twitch site with it and for probably my first two to three years of actively working in react I never enited a react project I just contributed I closed issues I asked questions to the other devs around I read the documentation and I would Google search specific issues I had but I never never did a react tutorial I never sat down and from scratch built something using these tools because I was an average react Dev I wasn't there to master this thing I didn't even like it at the time the average react Dev doesn't even like react let that settle for a bit it's a weird thing to say and think but it is true with other Frameworks like spelt or Astro or solid the average user of them loves them this isn't just because those Frameworks are great it's because of who uses them and why they're using them the average spelt Dev is contributing to a project they initialize themselves the average react Dev is never initialized a project and that's a huge difference and in order for these other Frameworks to succeed they're going to have to get to the point where the average Dev doesn't like them either a huge part of why react gets the push back it gets is because it is that default it's the thing that you reach for it's the thing that your team's already using it's the thing that you didn't pick it's just there and when we have conversations about react and the things that are changing in it it's important to understand that not every change is for the enthusiasts to have a lot of fun things to talk about and deeply understand the average react Dev doesn't understand much of react at all I know developers making well over $200,000 a year full-time working in react that didn't know there was a cleanup function that could be returned through a use effect like these core behaviors of the framework are things that are often missed because they're not learning react they're building with react they're solving the tickets that come up on their board at their job and they go home and hang out with their families at the end of the day and that's it they're not washing videos about this stuff in their free time they're not playing with these new features and tools when they happen they're waiting for someone else to do it and then following along with them at their job they're looking for the bare minimum not because they hate code or anything because they just don't care as much their goal isn't to love the technology their goal is to close the tickets and I think we need to understand the bubble that we're in you and I the people who are sitting out here chatting about this stuff for fun I'm recording this video live on a Sunday with like 800 viewers across different platforms all of y'all and all the people watching this after we're in a bit of a bubble we care enough to make this community and hang out in our free time and again join my Discord if you haven't yet lots of fun conversations there but that isn't the normal average experience and it's certainly not the lower half of that because the average react Dev might know most of these things but the below average react Dev doesn't know any of them and there's a lot of below average react devs making a hell of a lot of money and react has to be considerate of all of these people when it makes changes the goal is to make the average experience better as well as the experience below the average and hopefully the experience above the average as well I think when you think about react in this mindset when you realize that the average react Dev did not pick react a lot of the current state of the community and the conversation makes much more sense people aren't mad because they picked react and got burnt they're mad because they didn't pick react and they don't like it and that's fine but there is a reason it became the default and there's a reason the average react Dev is able to be so bad because the average Dev is not great either the tools that find the most success are the ones that work for the most people and whether or not we all love it react is liked well enough to make it here so next time you're talking about these things remember that the people that we talk with out here we're the enthusiasts and the best thing we can do is try to get our teams a little bit more excited during the few hours we have them working every day because they're not interested in learning all the ins and outs and eventually even if you do move to spelt it's just going to be the same thing there too so be considered of the average react Dev when you have these conversations because if we're not they're going to become invisible to us and I'm really scared of a future where we don't think about the average developer using the tools we built keep building keep working hard and keep annoying your co-workers with all the cool things that you've been playing with because it's how they get better two good seeing you guys as always thank you for the time peace NS oh one more thing actually I'll pin a video in the corner here about setting goals I pin this one a lot but it is really good and you can send this to the people on the team if they're not moving fast enough can help a lot




## The BEST Stack For Your Next Project - 20220703
I am genuinely so pumped that this exists I talked a lot about how I didn't want to build a framework or a way to create a new app because I wanted to recommend picking the right pieces for the problem that you have rather than installing all of these packages that you might not need just because I like them sometimes almost every project I've done on stream uses between two and five of my six go-to like constant things between nextjs and cell typescript trpc Tailwind Prisma next off all these different things are great technologies that I really love to use when I have problems that they solve but I don't always have those problems and I don't want to make a starter kit that recommended all of these things two of which you might need three of which you might not and you might not know how to rip them out so they just sit there and do nothing and slow down your site and slow down your builds for bad reasons I hated that and I really didn't want to make a template that everybody would rip and install all these things they don't need as such when I got this question I would say be really nice to have like a create T3 app CLI that rather than giving you a template that just does all of the things Theo likes to do sometimes it lets you pick the specific things that you want for your project depending on what you're building and I am so so pumped that nexl started this project and the community is quickly rallied around it it is insane to watch what y'all have built with create T3 app and I want to be very clear this is what y'all created with T3 app I did not do anything here and that's mind-bogglingly cool this is a project that's very close to 400 Stars very close to 400 Stars it will probably break it just for me showing it on here I can't see it under my video but we're at 391 Stars cool whatever a full screen show there yeah 391 Stars this project has 15 contributors dozens of PRS closed already regular issues tons of effort going in on nex's part making sure everything is constantly moving are we already at 400 407 Jesus Christ y'all are fast I appreciate that a ton 400 Stars two days ago this had 100 and next wrote a blog post about how excited he was about all of this and here we are now this is so cool this project is awesome I there are so many little things that were done right here that I really love but I want to show one of my personal favorites so as I said I haven't contributed any code I've opened one or two issues I this I loved I opened an issue saying prettier because it was one of the few things that didn't come with that I wanted Nexel replied we could have it config but that's probably too opinionated I personally use the default that comes with V code if someone wants prettier they can install and configure it themselves you are right I was entirely wrong my own philosophy was against this and yeah the same reason I didn't want to have joder zand built in because you have to npm install those and whatever you do with them whatever you do with them versus like trpc or next stop that had like unique specific config he was correct it was really cool having like my own philosophy block my own issue correctly I was I was this is when I realized this project had take it on a life of its own in the coolest possible way where the way I wanted to help people initialize a project with good defaults is being managed by a team of people who fully get and appreciate that as well 428 Stars goddamn let's use it because I I could sit here and just shout about how proud and cool this all is but I want to show you guys sandbox MPX create T3 app create T3 app let's call it a stream demo but my favorite type or touches JavaScript oh they changed this this is different from how it was last time I would ask each one now I actually go through and select them that is awesome you made it more friction to select and also toggle ah so good and it uses whatever you init with so npx means it's going to use npm yarn create it's going to use yarn and uh I forgot what the tail or the pnpm one is uh pnpm DLX create T3 app and which of those you use is what determines which package manager it uses and sets things up with CD stream demo I think it already mpm installed uh MPX Prisma DB push it uses SQL light by default which is great because it's the minimal unopinionated thing only problem with that is SQL light now won't work in the Prisma deployment because it's pointing to a local or not Prisma the versel deployment because that's a local file and that's going to get blown out when the seros functions rerun so that will look like it works on dev and it will work on dev but it will not be the most ideal thing for production for verell types but you can always switch to whatever DB I do not want to prescribe a database solution to my fans I want to hand you Prisma and let you connect whatever you want to ideally not that is what it is from here mpm run Dev here we are and hello from trpc it's really cool because that has the full top to bottom trpc uh like example where example. hello I have to go to the server I actually really like pages and server for the separation I really like the use of server here instead of backend good naming stuff so we have the shared DB client there and we have the router with the super Json included now really nice we merg the example router this shows you how to structure that all with comments and everything an example router with a get all that uses Prisma to grab things using the proper like context sharing a Prisma instance which is I don't even do that in Pingu we probably should this is following better standards than I have been building my own stuff with this it makes it so much easier to get started correctly using the tech that I've been talking about here forever I yeah yall kicked ass it does the exact right amount of things and it does those things exactly correctly I yeah I'm so pumped on this it's so cool uh the example EnV with like the names for these things that are already pinned in like the Prisma config we have this there with the commented out database URL for the environment so many subtleties that this like guides you through it it makes the hard parts and the Annoying Parts either it does them for you or it makes it obvious what you need to do next who do you have to thank for this nexl started it so definitely start with him from there everybody here all the contributors have been incredibly helpful it's an awesome project and I wanted to quickly rant about it because I use this to scaffold all my apps now the only problem with this is It's Made my like building an app streams significantly shorter if I was to build a new app right now the thing that is the first half of the stream which is me making everything plug in is gone now straight up trippy seeing a like a an idea of posted about for so long get built maintained and pushed this well by a bunch of developers many of whom have never done open source stuff before it's so cool seeing how many new contributors are working on this as their first project like this is going to get people jobs that's so cool like this is the exact type of thing I always hoped would come out of this community but never expected certainly not this early this was the oh I must be doing something right moment for me that I felt the strongest because like sure y'all like to sit here and watch me while you're sitting at work not doing much love that thank you all so much everybody who's here I appreciate you immensely but taking the things I'm talking about to work that's another really cool step like pushing the the quality of the work you're doing every day forward is always huge but building fundamental new technologies that are bar raisers for starting projects is so cool this is like the third layer that I didn't expect us to ever get to honestly I thought I would make it more fun for y'all to post at work I don't think we would actually make software better and we did I shouldn't say we I didn't do anything here but y'all are making software better this is quickly going to become one of the best ways if it it this already is one of the best ways to start a new project period that's so cool and I'm really excited to see how people use this and the cool things you build with it do 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. I go live on Fridays pretty often as well thank you again for watching this video really excited thank you




## The BEST Starting Point For Your Next Mobile App - 20230126
the T3 Stacks the best developer experience I've ever had by far it's really hard to beat the combination of next Prisma and trpc seems like a lot of y'all agree because create T3 app is blowing up building apps on the web has never felt better sadly mobile couldn't keep up I've wanted to see what the T3 stack could look like on mobile for a long time now and I'm proud to say we finally did it there's now a repo with all of the pieces you need to build a web app and a mobile app in the same code base using the T3 stack it's hard to overstate just how awesome this project is there are template repos that go for thousands of dollars with less than half the features and way worse developer experience and this is all being given away for free huge shout out to Julius to Expo and to this video sponsor clerk for making all of this possible from cloning the repo to running on your phone this will take you less than five minutes I want to show y'all so let's get started here is create T3 turbo with clerk I could tell you what clerk is but I think James is going to do a much better job thanks Theo clerk is user authentication for the modern web web whether you're running a next JS app remix or even Expo we've got you covered the great thing about clerk is we give you two routes through authentication you can use our beautiful uis that are highly customizable with your favorite CSS framework or you can use our dead simple apis to add authentication in minutes I think that's enough of an overview of clerk let's get back to T3 turbo thank you James now let's get started click the use this template button click create a new repo and this will make a new repository on your account now I've cloned the project and done a pnpm install to get all the dependencies you can type in pnpm Dev and we'll immediately have the web and mobile apps open up ready to go except if we go to them they're going to throw an error the reason this isn't working is we need to grab the auth key for the environment variables I'll let James show you how to do that quick when you sign up for clerk you're going to land in our dashboard where you can select add application you just need to give it a name so we'll call it T3 turbo and then you get to select all the social connections you want now we set this up to mimic the exact T3 turbo so we're going to select Discord here and disable Google and if you want to add your own social providers you can just swap them out as you need but you will need to update the code from the original template once you've done that you can click finish here and you'll land in our dashboard area where you can see things like users organizations that you've created and even switch out your social and user authentication right here what we need to make this T3 turbo at work is these API Keys when you select this you'll drop down and select whatever version you want because we're using next.js and Expo we can just use next.js click copy drop them in the dot EMV that is provided and you'll be up and running in seconds one more tiny thing environment variables on mobile suck instead of dealing with them for the mobile app go to app slash Expo Source I already made a constance.ts file here and you can swap the undefined here with the key for your app and that's all you have to do the only missing piece now is your database if you're not already familiar with Prisma highly recommend finding a tutorial for that quick TL DR you pick your database URL by default you can just use sqlite it's already set up for you and once you have an environment variable for your DB all you have to do is the npmdb push and that will get your database synchronized once you have your environment variables and your database handled you're Off to the Races pmpm Dev and you're good to go this will automatically open an iOS simulator if you're on a Mac as well as the web app and the database management so you have everything you need for a full developer experience and if you want to run it on your phone it's super simple normally Expo would print out a QR code but it seems like it's being eaten by Turbo repo so instead we're going to copy this guy we're going to Google search QR code maker we're going to paste this in here as a URL and now I can scan this code on my phone and in just a second I have the app on my phone as well with auth back end API and everything else I need ready to go even hot reloading if I make a code change on my computer I'll immediately see that change on my phone actual magic the qualities developer experience is unmatched it could be more hyped about what we have here seriously this is this is how I would build a mobile app if I was building a mobile app right now clerk has made it so much easier to handle off and I'm so thankful for them for helping with both the code and with sponsoring this video check out James Channel if you haven't yet he has a lot of cool videos I'm going to pin one with the trpc maintainer so you guys can watch that peace notes




## The Biggest Change In React’s History - 20221015
ooh uh proposal I can talk about this now uh I have been asked to not talk about this for so long it's so nice to see this ah oh I have a very click baby video to film next JS is changing boys and react has never been better get excited everything's about to change in JavaScript land react just got a hell of a lot smarter well you talked about this on code and life and I missed it oh well why does nobody tell me what I could finally talk about the things I know about wait I can put this if I talk now yes yes it changes everything I have such a busy day ahead of me God hit that marker button definitely going to make some content out of this turns out Tanner Lindsley was right I know crazy the most essential package for react react query is something that a lot of us need because it turns out when we're building applications that are interactive but those applications have interactions and interactions are not synchronous finally finally react has acknowledged that async is an important part of developing applications on the web than everywhere else too now we have a use hook use unwraps the value from a promise and allows you to call it or ever the benefit here is by being inside of react itself we can use things inside of react itself like suspense boundaries and we can have a tree of components that are all calling data and that tree of components all needs to resolve promises now we can suspend at the top resolve all of the promises underneath and have no more popping the pop-in is gone it's over we did it no more popping no more chaos just a bunch of use let's talk about how this actually changes so what we are here to discuss is all of the things that are different because of the changes that react has made here there's a couple key aspects I really want to hone in on so the first of the things I want to hone in on is that react is now server first so when you write a react component the default behavior is server and all of your react code is assumed to be run on a server unless you choose for it to not that was not the case with react before react was assumed to be run on client with some exceptions on server but now a lot of your code your logic and what you're doing is going to be run entirely on the server thing two is that getting data into your components is fundamentally different so this is the actual thing that changed by having the ability to async await on server or call the use hook on client so all of the things that you had to do for that specifically things like react query now exists fundamentally differently than they did before a third thing that's cool so react to necessary first getting data into components is fundamentally different and the ecosystem will have to change because of how much we rely on tools like react query and Frameworks Like Remix and next there are a lot of things that are different now and the maintainers of these Solutions I know a handful were included and have been working on it but a handful weren't and this is very different technically the way we all did stuff before will work still but to take advantage of these new wins a lot of us are going to have to change the way we wrote Our Solutions so react to server first which means that our code runs on servers by default getting data into our components is entirely different and the ecosystem around all of these things will now have to shift let's take a look at some of the the problems that I had with react before so here's a fun one uh interfacing with promises is annoying for anybody who's done this without react query having an effect that calls the promise on the right conditions sets the data to a state at the right time and then processing accordingly is very annoying having the use keyword that you can directly call it just gives you the thing and the component doesn't render until then solved huge loading conditions and pop in hell so for those who haven't seen this before on many pages it loads a shell or just a blank white page the react code runs fetches some data renders some components those components need data those components go fetch it they have loading Spinners they load their data those components also have to fetch more that also needs to get more data and that's how you end up in loading spinner Hal I'm just going to call this loading spinner loading spinner hell is solved because you don't have conditions in your components anymore around loading States those are all suspended on higher levels so if you have a component tree where everything is suspended at the top and each layer is fetching data asynchronously using the new use keyword you can do that in one pass and render one thing the result is incredible loading spinner hell resolved type safety with data because getting data in your components is annoying type safety with data has been annoying for a lot of reasons often because there are layers between where the data comes from and where the data is needed like I have a server fetch I have to do to get this data it to my component a common example I'll do create T3 app actually what we want is here let's do a pretty common example let's say I have an API endpoint so in this simple example I have this get data which is fetching data from slash API examples dot then jsoning it and I have to have this any here because I have no idea what this is when it comes back and I should be able to npm run Dev invalid oh I have to npx Prisma DB seed cool there we go and there's nothing in the DB because we don't have any examples in there yet but that's all doing what it's supposed to but we don't know what the type of this data is and I'm just arbitrarily putting that there we have all these enemies in order to get the types we'd have to Define them here export the type import the type bind it there or in the function here chaos what if crazy here's the old method compared to the new method so the way we would do this before is we would have an external examples.ts that takes a request gets whatever we need to get returns with a status 200 and json's whatever was here pretty traditional and then we would Define a function that lets us fetch from that endpoint and then it lets us translate that Json back to a JavaScript object which we can use and then we would call this inside of an effect set that to our state now we have the data but until then we don't so we have a loading condition that we have to return and handle accordingly until then this is the react code we all know and love we've been writing this for a while there have been a lot of ergonomic like improvements through third-party libraries things like react query letting us compress all of this into one thing where we just hand it the promise I'll even write that so we could have replaced all of this with this and also had better loading conditions error conditions stuff like that it helps a lot but it doesn't keep us from defining the endpoint on the server making this promise and still doesn't give us the type definitions for that so we are simplifying this on the other end we have stuff like trpc where we write the function on the back end and then when we call call it the types inferred correctly so we don't have to do the res dot status stuff we don't have to do any of that we can literally just in the trpc router go here sample router we can contacts.prisma.example.findmeny here and this will do the right thing because this is a promise this is a type and then when we call this on the client it'll have the right type for that great but what if I could just call the data in the component this is the magic of the changes that react proposed today this is what is so absurdly different no more separation of concerns at all do you have a component that is async now this is a server component which means you can do server things on it so I await prisma.example to find many and now I have data here and I know exactly what it is and I don't even have to check for that anymore because it's going to return if it fails it's going to catch elsewhere Magic incredible looks like PHP yeah is this learned a lot from PHP the thing about PHP is it stops caring once you cross the line uh slight spoiler for my talk I guess uh with another tab here's a diagram from my talk on one side there's a database on the other side there's a user create react app only cares from HTML to user PHP only cares from database to HTML next cares from database to user how do you express the loading State there is no loading state to express it blocks until the data is there the the loading state is a side effect of bad architecture the fact that we need a loading state is the problem here the the way this would load is if we call new method so const home equals return new method so if we're calling this this way right now it's going to be mad because it's a promise whatever they're going to fix that but in order to call this it would have to be wrapped with a suspense and once you wrap this with a suspense whatever your fallback here is is what is going to render somebody asked about Astro yes asteroid does nothing on client side Astros Islands aren't Astros Islands it's Astros architecture for including another Library like react you could make this just react and say react or preact your problem and this is accurate but that's your problem the only one of these solutions that cares about the server and the client is next.js well I hope this specifically highlights how much better things are going to be instead of orchestrating four to five pieces to get your data in your components you can just call it this changes everything and I'm so excited for it the future of next and the future of react has never been brighter and I am genuinely really excited for all the cool things coming out soon if you like this please subscribe please like the video make sure you check out other ones in the future I'll be speaking at next conf very soon or based on when this video comes out I'm guessing you'll be seeing it before then so make sure you check that out on October 25th I am very excited for the announcements coming and please share this video with some friends really proud of what we're doing here I love this channel I love the community and it's exciting to see people realizing that YouTube is a place we can have these deeper more technical conversations this isn't just for noobs this is for anyone who cares about software Dev and progressing the work that they're doing so seriously subscribe if you haven't like the video join our Discord so we can chat more about this stuff and come hang out at nexcom it's going to be a really fun event yes ah




## The Biggest Lie In HTML - 20240416
take a look at this div seems totally normal right like there's nothing here that seems particularly suspicious this just renders HTML and you're good to go I have some bad news you should probably never do this outside of jsx there's a reason for this and it's annoying you might already know that self-closing tags are a lie but many of you probably don't I say that because I didn't when I filmed my HTML tier list video which HR I don't like that it's not self-closing that I hate the fact that you just do this and there's no closing tag I feel like I should deduct points for that it is self-closing but self-closing should have a closing people are saying I have an issue with HTML and I'm too jsx pilled I'm not saying you're wrong I'm just saying I am what I am but honestly after that I felt kind of dumb it seemed like something that everyone should understand but I didn't and I I didn't like that feeling so I've been writing this code for a while and obviously I'm very jsx pilled regardless I had expectations here and those expectations weren't met at this moment though I feel significantly less dumb because somebody who's inarguably much better at the web than me just ran into the same thing this is a PR I just saw from Rich Harris the creator of spelt who just discovered the same behavior which what what yeah describe the bug I'm a little shaken up for as long as I've been programming I thought that this self-closing div was shorthand for this div Clos div turns out it's not self-closing tags just aren't a thing in HTML the Syntax for that at the end is simply ignored by browsers altogether in other words this here is equivalent to doing that where hello is inside the div not outside of spelt however treats this syntax as div close div for a framework that Prides itself in being a super set of HTML this is a glaring error that yes and no I know the goal of spelt is to be like HTML Plus+ but if the guy who made the HTML Plus+ framework thought that this is how it worked that's a fault of the language not a fault of the individual and certainly not a fault of the framework I am very much on team it should do this and I think the framework should as well I'm okay with rejecting the way the browser does things before we see what spelts plans are we should take a look at the blog post that's referenced here because it's a phenomenal post and as you guys might have seen Prime already reacted to this the case against self-closing tags in HTML let's talk about this syntax input type equals text BR image cool all self-closing that we've seen and probably written a bunch you've seen the syntax on my blog because it's what prettier does and I really like prettier however I don't think closing tags self-closing specifically are a good thing first up the facts enter xhtml back in the late 90s and early 2000s the w3c had a real thing for XML and they thought that it should replace HTML syntax there were good reasons for that at the time there was no HTML parsing spec so when it came to anything non-trivial you'd often end up with four browser engines interpreting the same HTML document in four different ways on the other hand XML has a fully defined parser for anybody who doesn't know jsx isn't HTML in JS it looks like that but it's really XML in JS because XML and HTML are so similar looking that it's a pretty easy transition and you can map your mental model from this pseudo XML thing to HTML and back and forth relatively easily and it would have honestly been cool to have XML as the standard for the browser but html's pretty cool overall but it would have been a huge challenge to do this all at once so in 2000 xhtml 1.0 became the recommendation and it proposed writing HTML in a way that was compatible with both existing HTML parsers as well as XML parsers which meant instead of this you'd write a good old XML version crap at the top doc type HTML public y y then HTML xmlns is the URL for the XML standard that you're using XML language is as well as language is instead of option value Fu selected the option value equals Fu selected equals selected this would be selected equals true H I'm thinking in jsx too hard I guess selected would map to the string previously which is really dumb Behavior yeah you get the point I'm very happy that we moved to the style because in XML attributes require values and they must be quoted with double quotes and also instead of this you'd write self closing because in XML have to explicitly close and XML is a Shand for self closing tags yes I like this you know what let's do a quick poll before we go too much further do you like self closing tags yes no indifferent actually really curious what you guys think an XML it would generally be formatted like this without the space before the slash I like the space but that's fine but Navigator 4 couldn't cope with never forget Firefox is built From the Ashes of Netscape and Netscape was built From the Ashes of of bad ideas including but not limited to JavaScript so uh yeah the company that invented JS also not knowing how to parse XML this all lines up with my expectations where the slash immediately followed an attribute so the spec recommends a space before the slash it's funny that the spec longterm now enforces this because one browser didn't like it good old days but browsers didn't care these rules were purely for XML parsers and because documents were being served as HTML you're that one guy who served their site as XML HTML plus XML you don't need to tell me is that one guy in my chat cuz if so let me know but yeah for the rest of the world these syntactical extras were ignored with option selected equals selected the value was ignored so option selected equals empty string worked as well as would option selected equals false the false would be ignored since you passed a value here it's now going to select that option great but for consistency it was decided that repeating the attribute name was a good idea I hate that I hate that so much if you forgot to quote an attribute the browser didn't complain it just got on with the job of rendering the page if you ended a tag with self-closing tag the browser saw it as a parsing error and ignored it and that's where I start to take issues with this oh boy speaking of which let's take a look at our poll so far people really like self-closing tags which checks out I really like self-closing tags so this is kind of heartbreaking to me I'm going to hit yes there but yeah majority of the people here seem to like self-closing tags and if you want to be able to sway polls like this make sure you watch live I'm live every Wednesday around 1 p.m. Pacific Time filming stuff like this cool let's take a look at these code examples here's a br the BR is closed the text isn't inside of it but also this BR is closed the text isn't inside here's where it gets confusing this div is open the text is inside the div this is where things get problematic because the browsers ignore the self-closing syntax they just see this as an open tag in XML div with a closing self tag there would be a self-closing div but in HTML it won't be in HTML it isn't the syntax that closes the BR it's the BR because BR is a self-closing tag and of itself you can't pass a child to BR you can't wrap something in a br you just have a br because of that what you put here doesn't matter you can do with or without the end this does literally nothing but it gets confusing with a div because we read that and we say oh this is a self-closing div it's not because this part does literally nothing yeah an XML div would be a self-closing div but not HTML yep yep yep we just read all that cool div isn't on the the list of special elements that can't have children ones that can't automatically self close what would happen if we screw it that a bit though uh let's go to code pen I have div hi div closed cool BR hello BR let's take a look at what the browser thinks of this yeah it just parses that out they're no longer open and close tags they're just new lines that are there that makes sense where things get a little crazy is if we do a div here let's just give this a basic class equals test hello again and we'll give test background color red why is that affecting this the reason is this is still an open closed div this doesn't close itself it's wrapping hello again and also this basically just gets deleted which is fun too so much is wrong here I I normally I'm here to about CSS and JS but I guess today we're bitching about HTML let's take a look at this part here so this blog post is phenomenal by the way definitely check it out if you haven't Jake archal writes lots of great stuff like this exit xhtml the transitional phase xhtml ends with xhtml 1.1 at this point the spec required the document to be served and parsed as XML XML parsing rules were well defined except for when invalid syntax was encountered the best thing browsers could do there is just show an error page else we'd be back to browsers just making stuff up each browser behaving differently into that browser said no thanks this is the important bit browsers could have standardized on XML but nobody wanted to be the browser to say no you you can't use this old web page you have to update your code well they didn't exactly say no they supported it and they still do today here's a valid xhtml document served as application xhtml XML and here's an invalid one let's take a look at those quick yeah here's an XML doc that's cool everything works as expected so next doesn't look particularly different if I look at the response here just throw this in my editor yeah pretty bog standard XML theoretically you could put self-closing stuff in here and it should actually work good to know cool and this wrong one the page contains the following errors fail to parse Q name ASP error parsing attribute name so here oh that's just what it renders so let's again go to sources and grab the actual page content cool yeah this one has the ASP colon syntax which is valid in HTML but is not valid here hence the issues but browsers didn't see it as a future makes sense ask yourself if you're visiting the website for your local doctor's surgery to figure out what hours they're open what browser is best the one that displays the opening hours of the surgery or the one that displays an XML parsing error message very fair point no browser wanted to be the one to show the errors because that becomes the worst browser on the web almost instantaneously one of the Great things about browsers is that they're error tolerant and browsers weren't interested in giving that up another really fair point that I don't think we give the web enough credit for websites from old old times still work great today as long as they're not using flash xhtml was eventually abandoned because a new thing came along that browsers were happier with enter HTML 5 HTML 5 entered the scene in 2008 it's been that long since HTML 5 God I am so old that hurts we're at 16 years now I feel gross one major thing that it introduced was a parsing spec woo very big deal there was no spec for how to parse HTML until that point in time and unlike the XL parsing spec it actually detailed what the browsers should do when they encounter weird and invalid markup it did away with all the XML requirements introduced in xhtml and it leaned into the looseness of HTML parsers that existed at the time it does handle self-closing syntax specifically but only to specifically ignore it so it does have a Handler for it but the Handler is to throw it away enter SVG in HTML oh boy this is where things are going to get real fun and spicy the early 2010s the abil ility to include svgs in HTML was specked and started appearing in browsers although SVG is an XML format when it's embedded in an HTML Doc it's parsed by the HTML parser however to increase compatibility with copy pasted SVG content when the HTML parser is within an SVG tag it switches to a foreign content mode where the self-closing syntax is actually meaningful yeah so we have this group syntax where if we put something in a group it's in it but if we self close the group outside then this will be outside sure that there's some real use case for this but I'm struggling to imagine one other foreign content such as math ml behaves the same oh God why does math ml keep coming up there's nothing I want to escape more and that's where things are today the closing syntax is mostly meaningless in HTML documents with foreign content being the exception let's see what his opinions are although as an industry we generally discarded most of xhtml requirements self-closing tag decoration seems to have persisted despite being a Remnant from a spec that was abandoned over 10 years ago folks even include the space before the slash which was added for compatibility with a browser engine from the previous Millennium this is is a very hilarious detail I think it's a confusing Relic from a Time past I don't think tools like prettier should be pushing it to make my case I'll respond to counter arguments that came up in a Twitter thread we can look at the Twitter thread but I want to see what the replies are here first self-closing tags make it easier to read and are helpful for newcomers you don't need to remember which tags are self-closing outside of foreign content elements that self-close will always self-close all other elements won't I I don't like this response I I'll give a different counter argument here first off I don't think the self-closing things will always self close is the point that this person was trying to make the point is that the code is more explicit that this thing closes which is Handy and I think that's why prer does it because it indicates when something is self-closing that it is closed the issue that he's highlighting here though is important which is that technically this doesn't do anything and technically this also doesn't do anything so the HTML showing different syntax when the behavior isn't any different can be confusing but theoretically if I was trying to teach HTML to somebody who didn't know it and I was showing them Snippets I would have the slash on BR just to indicate that this thing is closed and like it isn't apparent that wraps something so I'm 50/50 on this on one hand since the browser doesn't actually use it it can be misleading but on the other hand since the thing it's indicating is actually valuable and that this doesn't have a closing tag I think it's a useful teaching mechanism especially since I teach a lot of react I found this to be really handy in a language where it's actually honored let's see what he has to say though the examples of the closing tags above simply don't do anything the only way you know that input is acceptable and div isn't is learning and remembering which element self close it sucks but that's the way it is yeah yeah I think that as long as we all acknowledge that this sucks we should be doing our best to work with and build tools that do this the right way because let's be realistic how many people are actually writing an HTML file in like an HTML page like going to a HTML file making changes to it and then shipping that to the web everyone has build tools of some degree at this point and most of us are actually writing our HTML in other languages be it templates like handlebars or jsx with react and solid or the craziness that AST is going through turning jsx into HTML with their own syntactic sugar on top like I think it's okay to leave behind something that we agree sucks if we have better syntax that compiles to the right behaviors but does the self- closing tag have to work to be useful this is what I was saying surprised he is going to make my Arguments for me code comments don't work very fair points just like self-closing tags they're an indication they might be misleading but that isn't a good argument for removing code comments yep I actually really like the comparison to code comments it's it's showing intent from the developer the problem with selfing tag is that it doesn't look like a comment and worse it doesn't always behave like one either due to the rules around foreign content also a fair critique if a comment could change what the code does fair but to be fair this can't change what the code does so I guess they are alike in that way but the fact that it looks like not a comment is a real counterargument I think that's particularly bad for newcomers hm imagine You' never seen an image tag before you see unlike other elements it doesn't have a closing tag debuggers and validators don't complain about it suggesting there's something particular about this element you need to learn doesn't need to close it self closes in it's particular in that behavior now imagine you never seen it with the self-closing before you look up this new syntax you've discovered and learn that it means the tag is self-closing at this point why wouldn't you assume iframe is self-closing too or that image source SL image is valid given this I'm particularly sad the mdn uses self-closing tags in beginner facing documentation okay so counterargument here if mdn is using self-closing tags in their examples then we have already agreed the browser should have done this why don't we just do this in our tools now if mdn uses self-closing tags we should use self-closing tags this actually just hardcore blackpilled me on this oh boy let's see where we go from here it's consist with jsx yeah jsx HTML are different formats and jsx is better fight me Bros they are consistent with each other pretending they're consistent is misleading the above HTML renders as hello world cool yep the above jsx renders as hello world the formats work differently so we have here in HTML where the text would be inside the div but in jsx it would be outside the div because jsx is competent unlike HTML yeah cool they're different but jsx is doing something much more logical here the above jsx produces a div with a class attribute okay that's more of a react thing than a jsx thing but it's a really common way to use jsx H reacts the most common way yes but solid does this differently asro does this differently every other jsx implementation I've seen does this differently so yeah I don't think there's an argument for consistency here despite visual similarities they're different formats that work differently it means I can parse HTML with an XML parser call me some sort of purist but if I want to parse HTML I'll use an HTML parser man we were doing so well we were agreeing real hard I wouldn't try and write Json so it could be parsed by a yaml parser so I don't see why i' do the same with HTML and XML for those who don't know you can embed Json in yaml and it just works so funny that he's bringing this up but fair point there are many great HTML parsing Libs out there for almost every language and since the parser is specified the results are consistent I think if you had to put HTML that's like too new so to speak through a really really minimal transform layer to remove these self-closing syntaxes that's fine I don't really agree with this point I saw a chat message I want to respond to from Cooper here if we change it now 99% of BR tags would clone themselves yeah my counterargument here would be the thing that we want to change isn't that things that use BR and stuff need to now be self-closing like I wouldn't want to enforce in like HTML par that like to use BR you now have to do that that I wouldn't like anything that's on that magic list of automatically self-closing things those should behave exactly the same but if somebody's doing this where they closing a tag and actually expect whatever they did here to apply to the text that is broken I just can't imagine a page where this was done intentionally and if it was that breaking I would argue is fine I'm not arguing for requiring self-closing tags on all HTML of self- closable elements what I'm arguing for is that if you use the syntax it always self closes that's my argument I don't think we should break old sites I think we should support self-closing syntax so people writing it don't get too confused more points from here it makes the markup faster to parse I've heard this a few times and I think it comes from the assumption that the more information you give the better the processor can optimize or something let's compare the two I don't want to get deep into parsing stuff I'm sure that just ignoring the line is fine so whatever especially for like BR examples but where this get gets okay actually now that I'm reading this I actually fully disagree because of the weirdness of like the div example having to handle that is obnoxious so I guess if you just always throw away the slash cool but if you actually want a self-closing thing it would actually help the parer for share so I don't agree with that point yeah it looks pretty sure that's subjective I thought the closing syntax looked ugly the first time I worked on a code base that required it but I got used to it I got used to missing it out interesting wording that's H that's what what he means by that but sure if prus is the goal hey we could use input type equals text yeah I would love that I would love to be able to use emojis more in my code but nothing supports it there is nothing I want more than to have like const heart equals hello world but sadly uh in basically every language you can't Define a variable as an emoji unex token illegal yeah rip us yeah and seriously I think Aesthetics should take a back SE given how this leading the syntax say what if it wasn't misleading though that's my whole point prettier should be more opinionated I respect prettier our way or the highway approach yeah yes it's phenomenal but he doesn't think it's consistent here interesting it will change BR to self-closing BR but it won't do anything with self closing div in fact if you give it a div it'll reformat it with the space I think Pria should either drop the self-closing syntax in cases where it's meaningless to the parser or they should fix cases where it's actually misleading like this should be autof formatted to this similar to how it already treats unclosed TXS you could convince me on that for sure the issue is that jsx and I'm assuming there's a lot of overlap in that parser in fact can anybody confirm that prettier HTML parser is sharing some amount of logic with their jsx parser cuz if I'm right about that this is a terrible point and if I'm wrong about that this is a phenomenal Point function is probably jsx they use a Rex to detect if a file has jsx in it or not that's great I love that love that for us but how do we actually parse it styled components. JS well they have a whole styled components formatter cool so this is the file that actually does the parsing Ty defs j6 expands the children from inside out instead of outside in da da da okay so if I'm reading this correctly it seems like it is very different from their HTML implementation because they have a whole separate Source language HTML which is parsed entirely separately so my theory that there was some overlap here appears to be uh not a thing function print end of opening tag this is in the jsx if no self cling we do that cool so here's the actual place where they uh set the selfing tag good to know but yeah this is different code this is in a separate jsx JS file so this is not the problem of the HTML parser so was a fun Deep dive I learned a lot about how prier Works internally but uh apparently the HTML uses angulars parser yeah good to know well I've learned a lot through that so yeah theoretically this is a fair point then that you could fix that in just HTML and not in jsx but again the final option the one I'm most interested in is could we just allow HTML closing tags everywhere a major part of the problem is that the self closing tag is sometimes ignored and sometimes isn't within the same HTML document even could we have an option to switch the parsing rules so that this is always meaningful as in div is actually self-closing I filed an issue for this but I suspect it's a no-o due to incompatibility with existing libraries particularly security sensitive ones is it though I am fully in support of this issue and this is again the solution I recommended it looks like it was closed though why was this closed think we shouldn't introduce new parsing Flags to change parsing Behavior they cause cross site scripting issues trying to in my head parse how that could be a thing okay so there's there's a contrived way to do that annoying but fine yeah closing declaring self closing mode on a page and using a library which do not support or detect will expose author's vulnerabilities yada yada cool I wish this was a thing it's not going to be a thing there's a lot of bickering on this issue I want to see what sp's doing though because that's why we're here in the first place spelt was making this mistake because even the great Rich Harris had this same misunderstanding so uh let's take a look here what should we do we being spelt and Rich Harris I think the right thing to do is disallow self-closing non-void HTML tags this only applies to HTML not other name spaces this is a breaking change but the alternatives are continue to parse HTML incorrectly or parse HTML correctly treating divs as just div which is also a breaking change one that would be nightmarish to debug that's the other reason I hate this because if you do have this is so annoying to figure out what just happened especially if it worked the way that you would expect before no longer does because HTML sucks yeah that would be obnoxious ideally we would also disallow self-closing void elements like input rather than input closed but whether or not this is realistic depends on whether prettier current habit of adding an unnecessary self-closing tag to void elements prevents us from doing that Repro here's him doing an example of how this works as well as in a felt component where this behavior is different where uh we the div and then log the content in this example we get hello because this hello element is a child of div which is dumb but then in this code which is a little more reasonable hello is not a child of this div so we don't get the console log results here because there is no content of that div the first case Hello is logged in the second the empty string is logged yeah severity annoyance I hate this I hate that we're so stuck on Old standards and the result is so much pain but I at the absolute least feel a good bit better knowing I'm not the only one seeing Rich Harris run into the same like what the moment that I ran into months ago is a bit of a relief I hope youall understand that as normalized as all of these things on the web may seem when we talk about them here all of us are missing some gaps in our knowledge even the people who made HTML themselves clearly left a dumb Gap Here and Now for decades to come we'll be making dumb mistakes as well so yeah let me know what you think in the comments should they fix this should they not and until next time peace nerds




## The Biggest React Framework You've Never Heard of - 20250122
even if you don't use react you've probably heard of nextjs and maybe even heard of remix those are the two predominant Frameworks for building with react but what if I told you there's a third that it's really popular and you probably haven't heard of it you might say I'm crazy but have you have you heard of ice before this is a very fascinating project almost 20K stars on GitHub a ton of really cool patterns some unique ways of building it really is a unique react framework that just so happens to be built by Alibaba in China I'm excited to dive deep into this with y'all because there's some really cool stuff going on but first I word from today's sponsor today's sponsor is a component but it's not just any component it's AG charts by the same people who made AG grid which is the solution for data grids now they're solving charts and I think they did a phenomenal job they call this the best JavaScript charts in the world and having played with it a bit it's hard to disagree supports most modern Frameworks in vanilla JS if you want to do it yourself and it has every type of chart from bar charts to line charts to more complex things like chord graphs where you're showing relationships between things pyramids in case you're into conspiracies or versel radial grids which are not easy to implement as someone who spent too much time doing charts for admittedly kind of dumb reasons seeing a library that handles everything like this is kind of unbelievable by the way all the source code is available and all the free parts are fully MIT licensed pretty much everything you're seeing here is truly freely available in open source so for most people this is going to be totally free and for everyone else the money spent will be absolutely worth it I could say that with confidence because AG grid knows what they're doing as I love to point out over 90% of Fortune 500 companies use AG grid and AG charts quickly going to get there too thank you to AG charts for sponsoring today's video check them out today at soy. l/ charts credit where it's due I found this because of salty posting it on Twitter there are some really cool things in there the point that I realized I had to cover it was when they showed the syntax where they have their equivalent of views inline like directives for controlling things very interesting to see this in a react framework where you can say it should show this if is admin otherwise this element shouldn't render I now really want to understand how deep this goes and the only way to do that is reading through the docs want to see they do not have an English translation for the site but I can make one this is how every other Dev that speaks any language other than English feels reading docs ICE 3 is an application development framework that is based on react and out of the box R&D framework with built-in best practices such as project configuration State Management data requests permission management allowing devs to focus more on business logic Sports web five typescript CSS modules post CSS application mode for spa server side rendering SSR and static builds cool that it offers all of those this really feels like next in a lot of ways but with a more in-your-face like direct focus on mobile because it's a much larger concern in these Market especially mobile web ice is a front end solution based on react provides basic capabilities like application construction routing debugging and micro frontend stuff and integration capabilities based on the application development framework also combines visual operations material reuse and other solutions to lower the R&D threshold interesting I've seen R&D a few times I don't know if that's a bad translation my assumption is that this is meant to make it easier to spin something up from scratch quickly why use ice over weback directly weback only provides the basic building capabilities so this is very like reason of existing similar to nextjs where initially like setting up react with webpack properly was annoying and create react up didn't go far enough next was meant to go further and add server side rendering for static generation now it is what it is today ice seems like it was going down a similar trajectory but but it looks like they drew a line before going too far they do say that it's necessary to have some FR experience good I I have to see the directory structure this is always something I'm curious about pages about home oo layout what does this do can I translate this here Global layout components okay so they have a global layout that you can put like this similar to layouts in app router but the naming about TSX and home TSX suggests that they don't have a single page route they do it this way instead Pages uh conventional routing aut generat based on the file they have a whole section on routing I am curious index about repo repo preview interesting I am curious what the mini program is if that's like their like MPA path or something likely a bad translation I'm amazed how much I can get out of this with just a Google translate on the page though this is super cool and Outlets interesting they're taking parts from react router and remix as well as parts from nextjs here apparently their service mocking stuff is really cool youall know how I feel about testing and mocking but uh good they haven't this is also the only major front and frame work right now for react that takes micr front in seriously nextjs has historically tried to not care and avoid that stuff and remix doesn't either very interesting very interesting the things that they have considered here jsx plus very scary but I'm curious what they're doing with this although jsx has flexible syntax a large number of curly braces plus JS syntax leads to decreasing in context switching and code readability jsx plus introductions solve the problem well jsx is essentially a JS expression the real D structure can only be calculated at runtime jsx plus introduces some static template features to meet compilation optimization interesting and these jsx plus extensions are things like the x if x else interesting I I don't love this because it's not nested like the direct relationship between the if and the else if is weird because I can't just move this element and have it work I'm not as against like the X4 or the X if but once it's like X if then X else that's when I get iier about it o X memo that's actually really cool you're saying that this can be cached and never rerun slot Scopes interesting so the slot lets you say that this will get rendered out there separately it's cool seeing a like a react framework being developed in a completely separate environment like this where like they can see what we're doing and copy it and then not copy things they don't like and even do their own stuff too I saw something similar um in view was it view vine where somebody did the opposite where they took some reac isms and brought them to view Vine lets you write syntax that looks a lot more similar to react where you get have multiple functions that are components in the same file and have them call each other you return using the vine keyword with a template string and in here you can do the traditional view syntax where you can have like an at click or a test ID or all other props and directives you normally would have access to and view but you can write your functions in a component within a function body like this which I thought was really cool this also if I recall is a project that largely started in China and it's cool seeing these alternative approaches almost like unburdened by the current ecosystem and how strict that we are about things over here it's so cool micro front ends you know what I think I might know who's sponsoring this video I have a pending video with Zephyr Cloud who is a company that focuses on making micro front ends viable for people they're great you almost think of like versel but for micro front ends so if you're trying to do something with that type of architecture where you have hundreds upon hundreds of Engineers with different opinions trying to ship at the same time super cool yeah I I haven't seen a framework that actually took this seriously from the start they have like framework config built in a starting point for it you can set a library name for your micro package or your microphone packages stuff and then mount it through their that is really cool I might have to bug my friends over at Zephyr to ask them what they think about this because they will likely know a lot more than me I things about the mocking so let's take a look at this quick too we Mock and at JS or TS files mock user get oh interesting so you actually put out with like the mode and the path to mock things that's really convenient actually that is actually really good that's one of the most minimal Solutions I've seen to mocking Network dependencies actually genuinely very clever they're winning me over shall we try it package Json a great place to start ice runtime react and reactdom are the only depths and there's Dev deps typescript good sign types for all these things at ice app I'm assuming that's how they bundle and do whatnot there very light on the depths am I going to be more scared after reading the pnpm lock yep what does ice runtime rely on just react interesting wa now this jsx runtime ice shared and react router so they are using react router under the hood that's probably where the outlet stuff comes from that makes sense that makes a ton of sense did these guys beat remix to static rendering that'd be really funny if they did what's document TSX this is the document why does it not know that it should know what ice is from all the things installed but maybe because it's not the named module it's upset I'll ignore that part for now it's a small detail I did not know there's an eslint rule to let you know that your identifiers are too short I might turn that on I hate single letter variables so much sorry Mark he'll literally quit if I turn that on yes start is what we' want then cool ice let's try editing some stuff here um hello nerds please sub hot reloading is working doesn't break the state all good signs so far I don't know why es lint now being mad about things like that in single quotes I I shouldn't be as annoyed by these things as I am but the fact that your own eslint rules aren't being followed by by your own template always pisses me off cuz then I feel like I have to do like I'm assuming they have yeah they have an esent fix and a silent fix so if I like pnpm run es lint fix or run style lint fix if this changed anything in the code which it did that to me is a a concern because that means they're not even following these rules if they're prescribing them to me it's a small thing but it's a thing nonetheless interesting let's make a new route test route. TSX I'm going to not include any of these things let's just div St nerds this is test route oh I'm not running the dev server I'm stupid cool yeah turns out running the dev server helps when you're doing things that rely on the dev server all the parts are here this is like a legit framework I mean I would hope so it has 20K stars but like this is cool I'm giving it a star for sure I want to see what their state recommendations are CU they mentioned that state oh redo okay at least they have emmer emmer makes Redux significantly less painful I think it's basically enforced if you're using something like Redux toolkit which they aren't ice store simple friendly State Management solution for react apps has following core features simple familiar API integrated async processing very interesting class components still so you can use it with old projects and typescript support interesting this looks very similar to the xate store thing they recently put out that's like the the minimal alternative to zustand very similar interesting oh Diego got a shout out Diego's a Legend and his work on conate which was a better set of rappers around Contex stuff for state if I recall was an inspiration for them really dope they shouted that out they're they're these guys get it I wouldn't be surprised if a handful of the people working on Ice watch my videos and are going to get really hyped when this happens and respect to them they're living in their own world and building genuinely really cool stuff in it they have a whole Doc Page on element visibility the visibility change component to monitor when a spe specified element is currently visible or not ice appear interesting I want a npm org ice ice app ice appear ice bundles ice cash canvas porting canvas interesting I CLI shared create app stuff CSS module stuff a ton of it ice form ice hook store their own jsx runtime there is so much stuff here this is like a whole world I've just never gotten to dig into even like their own stuff building around docusaurus it's like I feel like I'm peering into a whole different world that is like speaking my language but isn't at the same time this is so cool yeah these guys are absolutely shipping 113 packages and I had heard of none of them before somebody called it they never seen anyone use unstable activity from react before I also haven't yeah they're heavily using all the offscreen stuff this is the rename of unstable offscreen unstable activity half the results for unstable activity are in Chinese because it's only like major recommendation for use is in ice that's actually really cool good for them this is their uh react query clone it actually looks quite different and much more focused on URLs so they have their own request function await request URL status await request requ EST common usage request get user request post you can have a a config for them too by passing it like that that's actually really cool use request based on ah hooks use request there's so many shout outs to the other things that they're relying on and inspired by two that's a problem I've seen in a lot of Open Source stuff where they don't do it this is just really good open source like they're doing everything right they're shouting everything out they are documenting the hell out of the stuff they're doing H Bob is killing it credit where it's dude this is way better than I would have expected like I I've seen like a dozen react Frameworks that aren't next or remix I would put this at a similar level of flushed out this is really good having all of these options with use request this is It's react query but just to use like their request handling that they already had built does it not request by default you have to tell it to that is interesting that is a very different workflow than I would expect actual business is more likely to be triggered manually interesting so their use of this is primarily for like users doing things so they don't want to default fetch it very interesting very very different from the default like react query for example which is much more aggressively assuming you're using it to fetch data I want to try the SSG stuff you have to use data does it do static building by default you don't have to config that PM run build build yeah look at that we have an index HTML hello nerds please sub has the default stuff there and then the test route which has our minimal I'll save it so it's formatted better as our minimal little sub nerds look at that damn that puts it ahead of remix this is actually really cool first I want to see like does this opt out if you get data no it doesn't so in order to opt out of SSG you have to specify you want SSR true in your config when SSR is enabled the method exporting in the routing component data loader will be executed on the server first the SSR rendering is successful it won't be called again on the client side data loader but the SR result will be reused it's only call on the client side when the page is redirected through routing on the browser side or the pages downgraded data loader okay so you have to do a manual revalidation on the client side in order to get updated data makes sense I guess the thing that isn't clear is can you do SSR and SSG can I have some routes SSR and some routes not oh here you go you can use ignore parameter to filter specific files for SSR or SSG products cool good this is so flushed out this is so far along so like they've been working on this for years actually though this is dope code splitting built in ability to manually enable or dis syntax feature the typescript Checker is part of your build disabled by default because it shouldn't be part of your build you should run it separately thank you just good decisions all around also to go back to the data loading thing with their uh data hook for the request thing by making the default be you have to run that function theyve basically brute forced you to use a better data loading patter at the very least make you feel bad for calling request in line like that they show the conventional God I'm sure all of you have written this code please if your way of getting data in react looks like this watch my react query videos please but they have the used data and the data loader yeah they're really trying to push you in that direction makes a ton of sense you can even defer it with a defer helper this is really good yeah I have no notes I'm excited to see how they support server components that's like the only thing I haven't seen yet doesn't come up in search cuz it's still a new thing yeah await did they have an await block yeah this is another remixy thing where you could have an await block that you pass a promise that comes from the server so here we have use info is a weight and uh item info is a weight and we have these two promises coming from the data loader and these are promises and since they're using the data loading stuff built into react router and remix here they might have roled their I'm almost postive as what they're using under the hood because they are using react router under the hood now these promises get serialized to the client and you can await them with their weight helper component and then it's a higher order component so it just calls the child with whatever the response from this promise is so you don't have to block on the server to get the user back a response this is a really powerful pattern yeah this is one of the most flushed out ways to use react router that I've ever seen historically I know view is had a much stronger hold in Chinese markets because their documentation and resources and everything have been much much further along in terms of their internationalization one of the things I'm most impressed with here is that the framework understands that most non- English speakers are going to struggle a lot with these things and react because even the ones who do speak English and read the docs struggle with a lot of these things so they have found a balance of documentation to lead you down the right path as well as good defaults and patterns to make you less likely to fall down the wrong path to set people up for success and react that's awesome this is really good stuff and I honestly think we can learn a lot in the western mwork World about what went well here I would love to chat with some people who use ice fulltime if that's you let me know in the comments or use the emails on my YouTube channel because this is genuinely really cool and I want to keep exploring I don't want my bias of being a native English speaker in the west to prevent me from seeing these awesome Innovations so feel free to hit me up when you find things like this and please contact me if you're working in this framework every day I genuinely want to know more I got nothing else for now so until next time peace nerds




## The Biggest TypeScript Update In Years - 20240610
normally I don't cover versions of typescript because they're not really Majors it might seem like 4.0 or 5.0 are really big releases but they just go up one at a time with decimal so 5.5 doesn't mean it's a minor release 5.5 actually happens to be one of the biggest typescript releases to date and there is so much cool stuff I want to dig into here so without further Ado let's take a look announcing typescript 5.5 from Daniel Rosen waser today we're excited to announce the availability of the release candidate of typescript 5.5 so here's a quick list of what changed we'll go through all this one at a time let's do it they made changes they added set methods there's a lot of other cool things happening here you might have seen Stu about the beta before but I promise you it did not break it down as much as we're about to let's start breaking things down inferred type predicates I have been waiting for this one for a while it is annoyingly hard to infer things once you're nesting them too deeply here is how things could work fine before we have a bird has a common name scientific name and a function sing We have a const national birds which is mapping strings with the bird typee and we have a function make national bird call country string con bird is national birds doget country so here we're getting it for this country if bird bird. sing bird is type bird so we know that that's fine else we didn't get bird don't have it we can't call those functions it's undefined by making you handle the undefined case typ script pushes you to write more robust code in the past this sort of type refinement was more difficult to apply to AAS this would have been an error in all previous versions of typescript so if we had countries as a string array and we were to go through and map country National birds. getet country and then filter all of the ones that were undefined it's still going to think bird could be undefined filter wasn't smart enough to filter out undefined in typescript even though this would obviously get rid of all the birds that aren't real which all birds aren't real but talking about undefined birds and in this case undefined Birds would have been filtered out so everything should have had the bird type but since typescript wasn't smart enough to know that you would still get errors here because bird could be undefined with typescript 5.5 the Checker is fine with this code we finally know just from this filtering the condition that birds is all real has been honored no more precise typing for Birds this works because typescript now infers a type predicate for the filter function you can see what's going on more clearly by pulling it into our Standalone function is Bird real this is such a I love that this is the example that they used it's they're getting Mimi and I love it bird is bird or undefined and we return bird is not equal to undefined bird is bird is the type predicate it means that if the function returns true then it is a bird if the function returns false then it's undefined the type declaration for array prototype. filter knows about the type predicate now so the net result is that you get a more precise type and the code passes the type Checker finally like let's be real it's kind of funny that typ St has been around for almost 10 years and this just happened now like that's that's goofy that's silly especially because typ st's like the inferred type language but I'm pumped this is now fixed T will infer that a function returns a type predicate if these conditions are all met the function does not have an explicit return type or the type predicate annotation C more reasons to not do explicit return types the function has a single return statement and no implicit Returns the function does not mutate its parameter and the function returns a Boolean expression that's tied to a refinement on the parameter total typescript obviously Matt pook the best typescript YouTuber has a whole article all about this if you want to understand it better here we see type of value string and knows smart enough for that but if we go back down here if we have an array that has numbers in strings and we filter it through is string by making that custom function it's smart enough to do that but if we didn't do the custom function even if we ran is filter and checked that everything in it was a string it would have assumed that numbers could still be in the array that problem is now solved const example equals 1 2 hello 3 world and now we want to have const strings equals example. filter value type of value equals string strings still thinks it's a Stringer number array even though we're filtering it to make sure it's not if we change this to be the 55 beta now it's smart enough to know that has to be strings that's really nice that it's that simple now to get the right type when you do a filter another place this might be useful is if you have here's an example we'll have type mini user which is ID string and I'll have type f user which equals name String and mini user now we can have an array a const example we'll be explicit here mini user or full user array is what we want we'll give this some examples we'll have one that's ID first one that's ID second and one that's ID 3D name only one with a name I have the prettier plugin that's nice so nice cool so now we have this example it knows many user or full user but if I want to filter this here it's going to be never array which is actually really smart because we're still filtering a value is string but if we do type of type of value question mark. name it's not sure that that exists because it could it's possible that it doesn't if I do value as full user and here is that smart enough now nope think I still have to write a guard of some form myself here name and value that actually might work yeah that's actually dope that's so good that's so good do you guys understand how much that simplifies oh yeah it's so nice that functions are now smart enough to do that oh 10 out of 10 explicit type predicates continue to work exactly as before will not check whether it would infer the same type predicate so if you put an explicit predicate it's not going to confirm that it disagrees with the inferred one because that would break a lot of people's code but if this breaks your code you're doing something really nasty before this this would be where it breaks so if you filter out all the nulls and then you push something that could be null then it will error because you filtered that and now it's a different type if anybody does actually have a code base that breaks because of the 5.5 change with this please post those examples I'm genuinely so curious control flow narrowing for constantly indexed aises this is another one of those ones that's like why was this not a thing before I'm sure we've all had this this problem before where we checked that some value exists and then we couldn't use it like I I'll do an even simpler example for this so here's a really quick example let's say you were fetching some data from an endpoint that comes back in Json you know the keys are all going to be strings but you don't know what the values are going to be but you know that the key for first should be a string well maybe we'll say it's like ID or even name so we know that name should return a string even though the type here is unknown so we confirm that it is by doing type of example. key is string but that doesn't work because we don't know what this is because we still have the type definition from here even though we confirmed here the type is string that's been forgotten by typescript by the next line the way we fixed this in the past would be to bind it so uh const value equals example key and then we' use this instead which works because now we've made a consistent value that exists outside of the example so typescript can keep the context of we have filtered this value but as soon as you put it inside of an object typescript loses that intelligence well lost that intelligence now with 5.5 it's smart enough to know because we confirmed above that this thing exists in this this type now it can use that thing as the right type immediately so many unnecessary variables are going to be killed as was just said by bone broth super exciting stuff one more fun one for the anti- typescript people type Imports in JS St today if you want to import something only for typechecking in a JS file it's cumbersome JavaScript developers can't simply import a type named some type that's not there at runtime so if we have uh index J s file that needs to import a type definition from some module it has no way to do that cuz it's JavaScript we can't import types and then you would want to do this after but it doesn't work the solution previously was that you would use a namespace import so you'd import all of some module and then you would call some module. some type what if this is backend code what if your back end is written in typescript and your front end code is written with J stock and you want to import the type definitions from the back end without importing the whole backend code at this point that's what this new pattern enables now you can call in the JS do import and as crazy as that might sound now you're able to get the type definitions from your typescript code in your JS do JS code which means that the typescript type Checker can work across all of these different places and get you way better useful information so so nice that this problem is finally solved you can use the same type multiple places if you want to Define it like this by importing sub module. some type calling it some type here as a type def now I can just call some type anywhere else that I want it super nice oh sorry actually I'm entirely wrong this is how we would do it before I had never seen this type of code before makes sense gross but apparently they fix it with import okay that's a lot nicer actually the ability to import at the top of a JS do file actually solves one of the biggest problems with JS do oh I was wrong yeah I was entirely wrong reading that my bad thank you for the corrections guys this is huge just at import because you can use this for JS files so if you're trying to import from another JS doc file this works too oh we could also write our Imports as a namespace import dope I wonder if people are going to be mad at this same way they are out apply you we need to check this poor dude's about to get spammed so hard on Twitter when people complain about this regular expression syntax checking oh boy everyone's favorite Rex last thing I needed is more type safety by Rex but I get it until now typescript has typically skipped over most regular expressions in code this is because Rex technically has an extensible grammar and typescript never made any effort to compile regular Expressions to earlier versions of JS still this means that loss of common s would go undiscovered in regular Expressions they would either turn into errors at run time or they would just silently fail but typt now does basic syntax checking on Rex nice okay this is actually really helpful if what they're doing is letting me know that I typoed my rex that I'm actually into someone who hates Rex this is nice there's no capturing group named named Import in the reg regular expression interesting so if you use a capture group that isn't defined it will yell at you for that that's actually really nice let my Rx type def import import path import path name capture grou oh oh this would have saved me so much trouble actually I don't know if you guys know this but there's a lot of reject features that aren't implemented properly across browsers we've mostly caught up but things like backwards lookups just didn't work in Firefox for a long time so when you tried to use them if you were debugging in Chrome everything worked and looked fine but then you have a Firefox user report saying hey the page crashes or hey only the first word gets highlighted and things like that all of that was because there was no way to know based on what your export type was what features were and weren't supported oh this is going to be great also good point this is going to be great for checking chat gbt's re X's Gabriel 5.5 is the true 5.0 if only they actually use version numbers correctly but uh yeah this is the biggest typescript release in a while and now the thing I was excited about that I saw at the top support for the new ecmascript set methods typt 5.5 declares the new proposed methods for the ecmascript set type this is really cool if you don't know about this you should check out my video all about all the new features coming to JavaScript typescript loves to sneak these in ahead of time they did this before with optional ch and knowledge coalesence all of which have made their way into JavaScript now but had been approved and Ty wanted them so badly They just added them immediately with polyfills and that's what it sounds like is happening here we've declared the new proposed methods for the set type these methods include things like Union intersection difference symmetric difference a bunch of things that you would use to figure out the relationship between different sets so if we wanted to get all the things that are shared between fruits and oranges we call fruits. unun with oranges and this will return all of the things combined if we want to see which one are only in like one or two of them we can use intersection which will show you the intersecting values between the two so FR is that intersection between fruits and apples and bananas we'll just give you apples and bananas because those are all in common this is so nice I've wanted this for a while this makes people have an actual reason to start using set and my inner Advent of code Fanboy is hyped this is going to make random like one-off coding challenges so much easier like imagine writing a diffing algorithm if you have this it gets so much easier to do like all those types of Things become way easier if you can just compare two sets and having all the type definitions work with this too oh 10 out of 10 we'd like to thank Kevin Gibbons who not only proposed this feature in acis script but also provided the Declarations for set readon set and read only set like in typescript awesome that like Kevin's not just proposing this to be added to JavaScript but it's pushing typescript to have all the features too that's really cool isolated declarations declaration files we all know the classic D.S which uh famously you probably don't want let's find the Matt video he's almost at 100K Subs give Matt a sub he deserves it he's so close here it is don't put your types in D.S files people seem to think this is the right place to put all your type definitions they're wrong it's not it's for a very specific thing that you probably don't want to be doing check out his video if you want to better understand let's see what they're changing here DTS files are meant to describe the shape of existing libraries and modules to typescript the point here as he's saying is you want to have something that exists in a module or in JavaScript itself and point out to typescript what that is and what the types are it's not for defining types it's for adding types to things that are already defined this lightweight description includes the library's type signatures and it excludes implementation details such as the function bodies they are published so that typescript can effectively check your usage of a Library without needing to analyze the library itself this is also key if you're installing something like react which in that case happens to not be written in typescript but if it was the output is still going to be JavaScript so if the code that you're importing is JS the D.S file is only used to assign type definitions to those things it doesn't actually read the code from the package because then you're in Hell whilst it is possible to handw write declaration files if you are authoring typed code it's much safer and simpler to let typescript generate them for you automatically using-- declaration the Ty compiler and its apis have always had the job of generating declaration files however there are some use cases where you might want to use other tools or where there are traditional build processes that don't scale yeah we're even running into this with upload thing so the use case is faster declaration emit tools imagine you want to create a folder tool to generate declaration files perhaps it's part of a publishing service or a new bundler only there were some new bundlers being made right now how useful this could be to them whilst there's a thriving ecosystem of Blazing fast tools that can turn typescript into JS the same is not true for turning typescript into declaration files the reason is that typescript inference allows us to write code without explicitly declaring types meaning declaration emit can be complex yeah yeah we've run into a lot of PR trying to get type definitions out of our chaotic code especially something big like trpc if you're working on that Library getting the types to work .ts export let 1 is 1 export let two is two add. TS one two function ads returns 1 plus 2 this is a very simple function yeah using let here is scary I agree even if the only thing we would want to do is generate ad. D.S typescript will need to crawl into another imported file utils TS infer the types of one and two as strings and then calculate the plus operator on the two strings in order to lead to a string return type but what we want is just this add return string while the inference is important for the developer experience it means that tools that want to generate declaration files would need to replicate parts of the type Checker including inference and the ability to resolve module specific stuff in order to to follow the Imports yep you basically have to use typescripts inference stuff or write a bunch of custom stuff if you want to write the correct types a large part of why I've found myself writing more return types is just to make sure Library code exports correctly immediately but if typescript can do the inference for us and spit out the right thing quicker that sounds great another example use case is partial declaration emits in parallel checking imagine you have a monor repo with many projects in a multi-core CPU that just wished it could help you check your code faster if only if only I could relate to having a truly disgusting amount of typescript and type definitions in our code base definitely couldn't be me but if I theoretically had a bunch of stuff like that wouldn't it be great if we could check all the projects at the same time by running each project on a different core oh wouldn't that be nice fortunately we don't have the freedom to do all that work in parallel the reason is that we have to build those projects in dependency order because each project is checking against the Declaration file of its dependencies so we must build the dependency first to generate the Declaration files this is so annoying I even had this with spelt kit where I initialized this fkit project and nothing worked all the type definitions were broken then I ran pnpm Dev and all of a sudden the type definitions worked because they all had to be generated linearly in order to get the types working in my Dev environment T's project references feature works the same way building the set of projects in topological dependency order oh project references I have trauma as an example if we have two projects called backend and front end and they both depend on a project called core typescript can't start type checking either front end or back end until core has been built and its declaration files have been generated core depends on front and back end and then we have other things that depend on those the above graph you can see that we have a bottleneck whilst we can build front and back it in parallel we first need to wait for core to finish before building either can start how can we improve upon this well if a fast tool could generate all those declaration files for core in parallel typescript could then immediately Follow That by type-checking core front end and back end also in parallel solution explicit types the common requirement in both use cases is that we need a cross file type Checker to generate declaration files there's a lot to ask from the tooling Community more complex example if we want a declaration file for the following code import add from add and we want to export function Fu which turns the result of calling this yeah that's complex you have to do a lot of inference top to bottom but in order for this to work we need to generate a signature for Foo that requires looking at the implementation of fu fu just returns X so getting to the type of X requires looking at the implementation of AD yep we have to go down the chain we have to go we see Fu has no type so we or return type so we go to x we see X comes from add which has no return type so we go to add we see add is inferring its return type from two variables that it's putting together we go find the type for those and now we finally have what F returns God chaos for was looking for fast iteration time and fully parallel builds there's another way of thinking about this problem the Declaration file only requires the types of the public API of a module and other words the types of the thing that are exported if controversially developers are willing to explicitly write out the types of the things that they export tools could generate declaration files without needing to look at the implementation of the modules and without reimplementing a fa type Checker this is where the new isolated declarations option comes in isolated declarations reports errors when a module can't be reliably transformed without a type Checker oo more plainly ites makes types or report errors if you have a file that isn't sufficiently annotated on its exports 10 out of 10 I like that a lot now the one place you do actually benefit from Return types you can explicitly require them this makes all the sense in the world I prime should be very hyped about this because now we can turn this flag on enforc return types everywhere export function Fu error function must have an explicit return type annotation with isolated declarations so why are these errors desirable because it tells us upfront whether other tools will have issues generating declaration files it'll provide a quick fix to help us add these missing annotations super super nice this mode doesn't require annotations everywhere though for locals these can be ignored since they don't affect the public API for example the following code would not produce an error const x add1 2 we don't care because it's not exported but if we didn't put string here in this explicit return we would get an error there are also certain Expressions where the type is Trivial to calculate so because we assign X to 10 it knows because we're returning a constant here it knows because we're returning something coming from math or we assigned the type on on the return itself we know what it is in order to use this you have to set one of these flags note that isolate declarations does not change how typescript performs emit just how it reports errors this is just for errors very interesting huge credit to everybody who worked on that it's a very nice lift and people will be very hyped for it makes sense that companies like Bloomberg and Google with giant typescript infrastructure teams are the ones who wanted this ooh the config directory template variable for configuration files it's common in many code bases to reuse a shared TS config.js file that acts as a base for other configurations files this is done by using the extends field in TS config.js files yes yes it is if I go to the upload thing codebase and we go to any of the sub packages let's just go to the react package TS config extends add upload thing TS config base we turned the upload thing TS config into a module if I recall the very least I should be able to see in the package Json yeah we have the upload thing TS config this package is just used for us internally in order to do our type checking but we had to make that a package in order to make all of this work because there's no other way to get the type definitions in here reasonably here it is we actually made a package that is literally just our base config and our build configs so that we could use these in our other packages the fact that we made a package to manage the TS config for other packages is insanity and now looks like we won't have to one of the other issues that we've had with the TS config Json files they're all relative to the location of the file so if you have a tsig base Json file that's used in multiple projects relative paths often won't be useful in derived projects yeah totally agree the other's intent was that every TS config file that excludes this file should do the following output to a dis directory relative to the derived TS config file and have custom types directory relative to the dve TS config at Json then this would not work because these are all going to be based on where the imported roots are coming from but now we have config directory yay this took way too long and it's going to make multi the the fact that monor repos for typescript aren't a solve problem is just insane and this is one of those pieces that makes it way more viable way more viable so I'm hyped on this not to keep citing the same person over and over almost like he has a specialty or something Matt pook dropped a really nice thing on Twitter yesterday monor rep. MD where he discusses the three different ways to build typ monor repo in the benefits and negatives because as he says all the different ways are kind of bad in their own unique way totally agree and he shows all of the different ways including but not limited to a single TS config Json file in the root of your whole mono repo chaos no one should have to do this and when you add things like config suddenly we have some flexibility now when a project extends this file the path will be relative to the derived TS config not the shared TS config file this makes it easier to share configuration files across projects and ensures the configuration files are now more portable this is a really nice change I'm sure Julius is going to be hyped on that Consulting the package.json dependencies for declaration file generation ah this took so long common error the inferred type of X cannot be named without a reference to why this is likely not portable a type annotation is necessary this is often due to typescript declaration file generation finding itself in the contents of files that were never explicitly imported in a program generating an import to such a file could be risky if the path ended up being relative still for COD bases with explicit dependencies in the dependencies OR peer depths or optional depths of package Json generating such an import should be safe under certain resolution modes so in typescript 5.5 we're more lenient with when that's the case and many occurrences of this error should just disappear that's actually cool no changes have to be made if you're getting weird local inference things between packages it might just go away now that's nice some of my dumb hacks might be fixed too oh editor and watch mode reliability improvements I'll be real I've never trusted watch mode with typescript very much nice to know that they recognize that they're fixing it but more importantly here this is going to make watch Crash L which means huge huge huge huge trpc and Zod Fanboy stand strong our editors are hopefully going to crash less no more typescript server restarts maybe I'm excited to see if we feel the difference let me know in the comments if you're using 5.5 and if your TS server is crashing less because I'm I'm really hopeful fingers crossed correctly refresh editor errors in configuration files types can generate errors for TS config Json files however those errors are actually generated from loading a project and editors typically don't directly request those errors forts Json files well this might sound like a technical detail it means that when all errors issued in a TS config Json file are fixed typescript doesn't issue new fresh empty sets of errors and users are left with stale errors unless they reload their editor Yep this is a funny bug where new errors would be shown no errors if you got to that state would just show you the stale errors now types scare 55 will intentionally issue out an event to clear those out that's a silly thing that this wasn't fixed before but I'm pumped that that is finally working ooh o I've run into this problem a lot where I like delete a bunch of files then make a new file typescript would go mad and I would have to reset I regularly found myself like deleting a file or moving a directory and typescript freaking the out I just force the classic restart typescript server the regularity at which this Sav my butt is hilarious and a large part of why I was doing that was because I moved files around and things broke that seems like it's going to be a lot less likely o Sim links are now treed in failed resolutions as well when Ty fails to resolve a module it will still need to watch for any failed lookup paths in case the module's added later previously this was not done for Sim link directories ooh I had actually thought about that so things like pnpm and Bun that will Sim link for the modules would run into issues because if I was to have a package that was missing and it realized it was missing and then I npm install it won't update because it didn't see the folder was there and it wasn't waiting for the SIM link to come through now the Sim links are being checked you won't have to restart your editor as often I'm so happy typescript crashing in my editor is being addressed project references contribute to Auto Imports oo that's nice Auto Imports will actually pay attention to project references now ooh there's also some performance and size optimizations monomorph I objects are now handled the language server in public API first they ensured that node and symbol objects had a consistent set of properties with consistent initialization order doing so helps reduce polymorphism in different operations which allows runtime to fetch properties more quickly cool by making this change we witnessed impressive speed winds in the compiler however most of the changes were performed on internal allocators for our data structures language service along with Ty's public API uses a different set of allocators for certain objects this allowed the types of compiler to be a bit leaner as data used only for the language service would never be used in the compiler but in 5.5 the same monomorph isation work has now been done for the language server in public API our editor will now be as fast as the compiler the benchmarks have seen a 5.8% speed up in build times when using the public typ API allocators in link anguage service operations getting 10 to 20% faster looks like you don't need that M4 MacBook after all boys just upgrade your typescript version instead it does imply an increase in memory though so maybe don't rock that 8 gig model anymore we believe the trade-off is worth it and we hope to find ways to reduce the memory overhead things should feel a lot snappier now can't wait they found one more change that reduces check Times by 1% cool awesome proud of you guys for that optimizations on the control flow graph in many cases control flow analysis will Traverse nodes that don't provide any new information we observed that in the absence of any early termination or effects in the an and seenit okay this we we have went far past my depth here this is a lot of words for a 2% reduction in Bild times skip checking in transpile module and transpile declaration typescripts transpile module API can be used for compiling a single typescript files contents into JS similarly the transpile Declaration API C below can be used to generate a declaration file from a single typescript file one of the issues with these apis is that typescript internally would perform a full type check pass over the entire contents of the file before emitting that output this was necessary to collect certain information which would later be used for the emit phase in 5.5 we found a way to avoid performing a full check only lazily collecting the information is necessary transpile module and transpile declaration will enable this function by default as a result tools that integrate with these apis like TS loader with transpile only and tsj should see a notable speed up in our testing we generally witnessed around two times speed up in build times using transpile module nice I still lean into things like TS up which just hacks this with the es build but nice that the official typescript solution is in a good enough State the actual typescript package pack is smaller not that this really matters for anything because you're not shipping the typescript package the fact that it's smaller is nice node reuse and declaration emit cool so now when we're emitting things they significantly improved how often types can directly copy your input source code when producing declaration files so previously if you did this where you had string than bull but also one that's bull than string if typescript parses this it could just take the types that you wrote it could just generate the types based on what it knows or it could use the type definitions that you give it the reason this would be the default is that we're assigning it value which means world is the first value being assigned so intuitively it makes sense for that to be the first thing it's the canonical representation for each type but the others to reuse the existing types the second approach is generally preferable for a few reasons many equivalent representations still encode some level of intent that is better to preserve in the Declaration file producing a fresh representation of a type can be somewhat expensive so avoiding that is better and user written types are usually shorter than the generated ones yep nice not have typescript to change its mind for us about what types we write so they've greatly improved the number of places where types can correctly identify places where it's safe and correct to print back types exactly as they were written in the original file many of these cases are invisible performance improvements typescript would generate fresh sets of syntax nodes and serialize them into a string but instead typescript can Now operate over the original syntax nodes directly which is much cheaper and faster they're also making crazy things happen with discriminated unions awesome again we're outside of my world but they shave 250 milliseconds off the typescript compiler compiling typescript good for them easier API consumption from ecmascript modules ooh previously if you were writing an ecmascript module in node named Imports were not available from the typescript package H you have to ts. default previously the reason was that the CJs module lexer did not recognize the patterns of typescripts generated commonjs code this has been fixed and users can now use named Imports for typescript mpm package with ecmascript modules in node this is for typescripts package itself this isn't things that you would have to deal with this is if you were consuming and importing things from typescript the npm package oh nice that they fix that transpile ation API previously they had transpile module and isolate module this is a new one based on the things we were talking about earlier where you just want to generate D.S files makes it a lot easier to get those it's specifically designed to generate a single declaration file based on some input source text huge here are all the behavioral changes these are things that people should worry about if they're migrating old code base and they want to figure out why things are broken bunch of notes about that some bugs that were fixed cool stuff overall I think that's it though what's next at this point we anticipate very few changes to 5.5 apart from critical bug fixes to the compiler and minor bug fixes to the language service the next few weeks we'll be releasing the first stable version of 5.5 keep an eye out on our iteration plan for Target release dates and more if you need to coordinate around that otherwise our main focus is on developing 5.6 we'll have the iteration plan available on that in the coming days including scheduled release dates on top of that we make it easy to use nightly builds and typescript on mpm there's an extension to use those nightly releases in Visual Studio code good stuff I want to take a quick look at this release plan quick look looks like the final release is scheduled for the 18th so if you're watching this now you're pretty far ahead but if you're watching this later when this is already released let me know how it's like to use because I'm really excited about this release and until next time peace nards




## The CSS _function_ proposal is WILD (I think I like it_) - 20250216
it feels like just yesterday that CSS got variables apparently they don't plan on stopping at variables though because I just got word CSS has actual functions coming like what what oh boy this is going to be fun we have a lot to read into here the future might be CSS on the server we have a long ways to go can't wait to go over all of this with you guys if you want to stay on top of your CSS game and make sure you don't fall behind in the world post Tailwind make sure you watch but first a quick word from today's sponsor nowadays it kind of feels like you have to be multicloud you need somewhere for your database somewhere for your servers and somewhere for your assets that are static and being served to your users faster you can use a product like for sale if you're on a JavaScript nextjs stack but what about everyone else if you're on PHP rails go or pretty much anything else those tools don't help you well today's sponsor is here to help you out it's so simple even I could figure out how to deploy a full stack laravel app on Google and on cloudflare yes they put the right things in the right places for you this app is pretty basic so all we have on cloud flare for now at least is the Dos protection we can very easily add CDN and Edge caching literally just clicking buttons or exporting them from our app and now whenever I make a change we can have it set up to Auto deploy we can even build full pipelines around the different parts of our workflow so if we want automatic preview builds in our Dev environment when we put up a poll request you're good to go if you want to keep track of which environments are where and promote them by hand maybe you set it up every day maybe you do it after a meeting maybe you want happen automatically all these types of workflows that are obnoxious to set up especially when you consider the different platforms you're trying to integrate with all handled for you sava's goal is to make it as simple as possible to deploy pretty much anything it's really really cool to see an option of this quality for way larger portions of the ecosystem stop fighting to get your app deployed give these guys a shot they've been a really good experience for me I bet you'll love them too use my link for $50 of free credit check them out today at soy dev. l/a let's dive in so I've already put CSS in our functions in JS with CSS and JS realize that was wrong we went the other way with Tailwind where are we going to end up here now though can I write react renderers C could I write my own domond CSS I this is going to go a lot of places it's probably just going to be a way to resolve variables effectively a switch statement I have no idea what it's going to be though we're going to learn together so let's do it Chrome is prototyping CSS functions this is an upcoming CSS feature so we can't use it yet apparently it is in the Chrome Canary though so we'll play with that Chrome is currently prototyping CSS functions from the CSS Mixon one specification a custom function can be thought of as an advanced custom property which instead of being substituted by a single fixed value it computes its substitution value based on function parameters in the value of custom properties at the point that it's invoked interesting so here we have a very simple example function- Das negate takes in a value got to love the Das Dash declaration syntax for defining variabl I wonder if this will catch on in other languages please don't make JavaScript worse it's already bad enough but here we have this function neate it takes in a value not typed because of course not the result is that it Cals -1 times whatever the value is with the ve ripping the value out of what you passed so if we negate 1 PX it multiplies 1 PX by1 which results in1 PX I see where we're going here I still want tcss I want this to be typed I understand why it's not but it' be really nice if it was but this has a ton of potential and seeing all the stuff Tailwind V4 did with variables I have some ideas for where this is going I feel like light mode dark mode is the demo that is given for so many new CSS features this is one of the places where it really feels like it fits it's interesting that you could have a light dark function and pass it the two different values one for light mode one for dark mode so you define both at the same time and now whichever the prefers is set on the browser that's the one that will be used instead that's actually really cool the one thing that feels weird is I think of result like return and return should be an early escape and this feels like an early return here I would have preferred if it's like the first resolution is what's hit but it's the order of events is what actually happens so results ver light but if this is True Result gets overridden as ve dark I don't like that that I don't like the fact that html's order of events css' order of events and js's Order of events are all as different as they are the fact that I have to resolve that conflict in my head switching between three different files in the same code base is annoying I get that this is just how CSS works but one of the three letters in CSS was a mistake so I don't necessarily think the way CSS works is always the right way to go as we improve the language because cascading in and of itself is a fundamental failure of design we should be willing to change things in CSS like we are we're adding functions to CSS why can't we change things beyond that is an argument that much more CSS focused people will have and I will not be part of those arguments because I'm not qualified for them but I will give my opinion as a language nerd about how weird it is swapping between the all the time this is where it gets really cool though see here we have light dark and on light it will resolve to Alice blue which is a variable we've defined somewhere actually is that just a default CSS option is Alice blue one of the like hard-coded color values God damn it it is what the is Alice blue I I hate the browser apparently Tailwind has a similar function too this doesn't let you define custom functionality the same way though this lets you access values from Tailwind config it doesn't provide the same functionality where you're returning different values based on different conditions like this does which what makes this so cool where here background color will be Alice blue in light mode and 333 in dark mode the font weight will be 500 in light mode and 300 in dark mode and the font color will be 333 in light E4 E4 in dark that's really cool I guess I'll spin up the Chrome Canary enable that guy change between prefers light and dark it just works in the code is hilariously simple now we have our function light dark you pass it a light value or dark value and then you just apply it everywhere that's so good the fact that this didn't exist before is kind of hilarious previously what you would have had to do is Define variables with different conditions for both light and dark values for everything so you would have had like for each of these that has two different values you would have had to Define both if you look at any like Shad CN code base here we have our layer base this has for root all of these different variables that we use but then for dark it red defines all of them separately that's obnoxious and if I want to use a value that isn't in here I'm screwed and the fact that we picked some colors that aren't in here for the colors for random things in the T3 chat UI is what makes switching over and adding a light mode so much harder than it otherwise would have been this solves so much of that and I really hope this standard becomes a thing there's a ton of potential here yeah the editor's draft for this is literally yesterday don't know when the video is coming out but this is still super super early the big issue with custom properties is that they are fixed at the point they're defined you can't change them without fully overriding them custom functions will allow the same power as custom properties but parameterized they have the same flexibility and conditionality as a custom property definition but they take values from other custom Properties or explicitly as arguments at the point of use oh it has inherent too that's really cool so if shadow color is the variable we defined here but there's already a custom property defined within that scope it can inherit that but if we pass it a new one it'll use that instead that's really cool actually maybe cascading wasn't a mistake interesting this is winning me over fast I see a lot of potential for this here's that negative example that was in the thing we just read that's cool that we can Define the variable of Gap pass it or just call that there instead that's so cool oh it has an optional return type too yeah here you can specify that it returns a specific type I was concerned about that bit that's cool function a length a color a length plus but if it returns multiple things then you need to do a type that's really cool that there's an actual type function that will be included in this as well function parameters contain the same custom property name more than once then the function rule is invalid I hope that compilers are smart enough to call this all out God this is going to make life for all those fancy like rust based compilers for CSS much harder what's the one that tailin V4 just moved to lightning yeah lightning CSS this is a super performant minifier for bundling and dealing with all of your CSS Tailwind V4 is effectively a rewrite of the Tailwind compiler to take as much advantage of lightning as possible the life of people like the lightning devs as well as the es build CSS Nano all these folks they are going to have a lot of work to do in order to get things like this working properly but if they pull it off it's going to be nuts back to the actual functionality here the result descriptor defines the result of evaluating the custom function defined by its at function rule using V functions it can reference function parameters local variables as well as other custom functions the result descriptor itself doesn't have a type but its resolved value is type checked during the substitution of a dashed function interesting so when we call the function somewhere like up here when we call padding D- negative it checks the type of what this results in then and if it's a wrong browser error presumably custom function can access local variables and function parameters from functions higher up in the call stack cool so outer has result inner inner is a function that has access to this outer local because it's called in outer so the way you think of this is we have Outer Outer defines this outer local value it then calls inner now when inner is called in that call stack because we call this from div Z index outer one says we're calling it from here one gets defined as outer ARG that calls inner inner has outer ARG because we passed it here outer local comes from this here goes there and now we can add 1 + 2 to three this is a little chaotic and my gut feel when I first saw this was no why would anyone ever want this for any reason but if you think of this kind of like the function keyword versus const variable function definitions in JavaScript these functions are just being defined and exist so outer exists it takes in this argument it also defines this variable and its return calls this other thing that may or may not exist inner we don't know yet who cares another function is defined inner this one explicitly returns a number the result is the result of calculating this outer Arc variable which might not exist if we just look at this in isolation hell outer local also might not exist none of those are declared here so we need to make sure whenever this is called that outer ARG and outer local are both declared cool so knowing that this doesn't specify what inputs it has but we know that in its call stack this stuff has to exist before we can safely call this function down here we call outer we call it with one that gets assigned to this we then just thinking of this top to bottom we're running the code we Define the the outer ARG as one cool we then run outer local we Define that as two cool we now have these two variables outer ARG and outer local then the result calls inner since we're in the same call stack all of these values exist within the context of inner being called there this is your brain on Cascade this is like dependency injection without the injection I I think this is a pretty good job of maintaining the spirit of CSS allowing you to Define things and then children just have them but it's weird as a jsd and you think of functions as much more a JavaScript thing than a CSS thing this really feels like CSS functions in these ways the idea of cascading variable definitions is fascinating yeah and similarly here if you have an element that has a variable or a custom property defined that is accessible in this so Z is set to three we have this double z function it takes no arguments returns a number expecting this to exist so if you call Double Z it better be somewhere where Z exists but that lets you define things in the element itself or in a class that's being applied without having to manually pass all of that over this makes it much easier to manage your Styles in multiple different places it's going to make debugging your Styles hell but debugging your Styles is already hell that's why we like Tailwind so much this is going to make composability of your style significantly better better imagine if in your CSS file you can Target an element like div apply a property to it and then all the other computed values inside of that element are now updated using that property that's really really cool somebody looked into the name of the different colors things like Rebecca make sense because Eric Mayer's daughter passed away but Alice blue is a random reference to Alice Roosevelt Longworth the daughter of President Theodore Roosevelt who was known for her fashion sense of style why the is Alice blue a thing I'm going to keep dying on the hill that that's a stupid one back to this though because I'm actually digging what's going on here add ABC takes in B and C C gets redefined here so even if you pass something different here this actually this a really good example of showing how the hierarchy here works so we first Define A and Z as one 2 and 3 B and C are also Arguments for this function so we pass in 20 and 30 a is still one because we haven't redefined that anywhere B is now 20 c is now 30 so we put those in here B is 20 C is 30 a is still one but then C gets overrated into 300 here effectively again we have to think in the callstack we have to think in the Cascade the order of events because that's how cascading stylesheets work the thing at the bottom of the Cascade wins unless there's an important call above it literally like exclamation point important so this is a really good example because it shows if it's not not defined again it can carry all the way from here with the div that's what happens to a b gets overridden here because we're passing a different value to the function C gets overwritten here because it's defined in the function right before giving the result so there thing as a constant everything's a variable first and formo it's just funny but uh yeah I am not looking forward to the debug story here o lists this is actually really cool Max Plus X you pass it a set of values then you add this additional value and you can call Max and other math functions that already exist in the browser like Cal here it's going to take whatever the value that we prefer is and then add three pixels to it that's really cool actually this is going to solve so many of the weird like setting a specific height to fit a page where the top nav still fits proper so many of those bugs are going to be really easy to solve now oh I like this a lot actually there's going to be a lot of cursed with this and poor Firefox is going to be screwed for a while but if we can ignore all those things this is a really really promising proposal interesting they've even thought through Cycles Cycles are not allowed there's no recursion your CSS is not allowed to be recursive it's allowed to Cascade but you cannot make it recursive don't you dare even think about doing it I'm paying attention I'll notice if you do hopefully your browser will too because even if a path doesn't exist like at media unknown feature this will never be hit no browser supports unknown feature this will still error out because of the Poss possibility of a branch that calls it recursively that is a good call well it's a bad call literally you can't call this but it's a good call to prevent calling this there are so many good puns with all this I'm doing my best guys interesting okay so here's a fun example where baz is referencing a value from another call to baz so X gets defined here as baz 1 PX so that will be 11 pixels now so now X is set to 11 Y is Das DB 2px which this will override that x value get passed in this is a terrible written example trying to show what this is supposed to do but yeah I would have named these differently to make it clear what this is doing but yeah the point here is you can call B to get a result and then call baz again without issue and then reference it later on and it's fine God I hate this example so much half the examples in docs like this are to try and communicate how to use the feature the other half are to give the people building these systems for Firefox for Chrome for Safari for ladybird a spec sheet of edge cases they have to make sure they handle so this example is the ladder for sure but it does help us get an idea of how they expect us to use this interesting the Declaration appearing later wins over earlier ones so you can call result multiple times like imagine in JavaScript we had a function let me typ script function example and and this return five and then return six when you call example you get five because once a function returns it's dead we can make it a generator and then yield five and six but that's about as close as you can get but since CSS is a special snowflake it keeps running the whole thing and whatever's at the end wins no such thing as an early Escape I'm not saying one is right or wrong I'm saying one's existed for 30 years and one of them is brand new and this one trying to be to CSS e has strengths and weaknesses all to be considered oh they even call it early return here due to the execution model early return is not possible within a function so if we put with as a greater than a thousand as our media query our if statement condition here results 20 else result 16 it will always resolve to 16 because the the winner needs to be at the bottom ever see a syntax and realize you're in too deep this is where we tap I feel like we've actually gotten quite a bit here this is super exciting proposal I see a lot of benefits but I also see a handful of foot guns we're going to need to be considerate of if we start adopting functions in our CSS what do you think though is the future building our applications via CSS on the server or is this an overrated feature that's not even going to ship I think reality is going to be somewhere in between but I'm curious how you feel until next time peace nerds




## The Coolest Thing I Ever Built - 20231013
I love building things let's be real I build a lot of stuff that doesn't mean everything I've built is equal especially not for my job whenever people ask what I'm most proud of one project always comes to mind and it might not be what you think it's not this channel it's not the stuff that I've been building at paying it's not even upload thing it's actually something that I built at twitch this project is one of my favorites not just cuz it's really cool or fun to use because on both a technical level and on a team organization level I was able to innovate and make things happen that didn't seem possible before the number of surreal roadblocks we hit throughout this project made it seem like it was doomed for failure and not only did it not fail it ended up being one of the most successful launches in twitch's history I am really proud of the work we did on this project so I'm going to show off a bit of it and why I think it's so cool without further Ado this is mod view and by default it might not look like much as we see here I'm live right now so if you want to see me making cool stuff like this live on Twitch make sure you follow me on twitch.tv/ Theo where I'm live every Wednesday making a lot of these videos this view was built for people like me but more importantly my moderators who work really really hard to make high quality experiences for everyone in chat if it wasn't for my moderators i' probably have to turn off chat because of the amount of chaos that can happen especially in the Discord but obviously on stream when I'm live to hundreds if not thousands of people it's important that chat is presentable in order to make that possible in order to keep things from becoming utter chaos our moderators need really really good tools to keep track of the experience this is the tool that we got the buy into build before I was working on viewer facing tools at twitch I actually focused on internal safety tools building the admin panels that people would use to investigate when a user was reported make sure that when someone's reported and they're doing bad content they were banned and we made that platform internally really really good so good that we looked at the tools moderators had externally and we're like those should be better too this came with a lot of gotas though in particular for a moderator to do their job they need a lot of information that isn't necessarily ours on the safety team we were very close with the chat team so we had a lot of capabilities with chat and chat related things but stuff like Whispers stuff like Channel points stuff like various systems like rating and subscriptions bits and all of that we didn't own a lot of that hell we didn't even own the player and we needed to make a user interface that was fully customizable where I can take any element here move them around resize and can drop an element in the dock and still have access to it when I need and don't have it here when I don't like I don't need predictions so I'm going to put that there I do like having mod action so I'll put that there and I do like having the automod CU so I'll put that here too but the ability to fully customize this resize things having all this control was very hard to do and we used and built a combination of libraries and Integrations as well as abusing a lot of cool features in react in order to make this possible the important gotas to know here are that a lot of these different widgets are made by different teams that work in different ways that have different opinions about how react should work so things like support for hooks external State Management so rerenders don't cause things to disappear a lot of other behaviors were not easy to do and I want things like when I hide and show chat I don't want the messages to go away because traditionally on Twitch when you refresh the page or this case rerender a component all the previous messages were in state those all vanish so we need to make sure when I drag chat over here that we don't lose messages and when I move it back here it still behaves as expected and the ability to customize resize and put anything where it makes the most sense is something that our moderators valued highly we needed to make sure we got this right we could have went to every team and Rewritten all of the code to work with a single shared State manager we could have done a lot of different things to make this possible but we had a very short deadline I had two additional engineers and about 6 months to get all of this done so what did we do well the first thing we did was go all in on hooks and functional programming because we already were falling in love with these new patterns at the time this was back in 20 late 2018 early 2019 that we were working really hard on this and then by the end of 2019 when things really ramped up we knew it was right to keep using hooks for it so we went all in on hooks we went all in on functional programming we went all in on a composable Model to make this possible we'd also been evaluating other tools that other teams were using we had gotten pretty close with the dashboard team which made the twitch dashboard which I'm sure you've noticed has a lot in common with mod view this project was using a library named react Mosaic open source thing that is just the resizing and moving of the components in one Mosaic like UI it has no concept of close and open it has no concept of used and reuse and it also remounts all of the children components when you move things around so if those have state within them and you move them you're going to lose that state so as great as it was it introduced as many problems as it solved but its capabilities on the UI side were so good that we knew we needed to use it and I ended up internally forking it in order to add all the functionality that we needed on top of that we used the classic react D and because that Library had a lot of the hooks and core Primitives that we needed to build the interactions between things like the widget bar to grab things the side nav which everything's reorderable and controllable with but the most important thing that we got from using react D and was the ability to interface between react Mosaic and react D and and our own custom views to drag elements into and out of the react Mosaic what about the state what about the renders because every time I move a component from here to here or from here to here that component got unmounted and remounted it got moved so how do I manage to persist the state I could literally talk for hours about how the dragon drop behaviors work just know it was hard and that we had to do a lot of work deeply understanding both react Mosaic code that we forked and react D and code that we kept very up-to-date on but we still had to deal with the fact that components unmounting and remounting caus them to lose their state and since a lot of these components were by teams that weren't us we couldn't change how their State Management worked to move them to a global so a remount wouldn't break things so how do we maintain state for things that are like a pub sub or a message system where if we remount it and we lose the state we we lose all of that content what if I told you none of these components were actually mounted where they're located and when I move automod Q we're not actually moving the automod Q component that is mounted inside of here we're moving something else what are we moving though the component is somewhere else now so how are we able to move these containers without moving the component itself I would have any ideas I see it happening in chat we see people realizing I used a whole bunch of inverse portals in react for this what we did is we have a hidden element somewhere in the page that's just it exists in the virtual Dom not the real Dom where we Mount all of the components that you can possibly have in the view here even the ones that aren't mounted now if I go to add or remove widgets we'll see there's additional widgets here also my really fancy animation that I'm way too proud of where things expand and collapse oh I put way too much time into getting that right it looks so good even at 30 FPS it looks pretty solid so we took all of these widgets we mounted them in a list in the virtual Dom and when you actually render them we're just rendering an out portal which if you're not already familiar with portals the tldr is I can't tldr portals I made a video about them already I'll throw that in the description the best I can explain portals quickly is that when you define a portal in the react Dom it lets you put a component wherever so let's say we have something like I don't know a context that we want an element to have access to but that element might be mounted somewhere else a really common example of this is a modal so the modal needs to get props from really deep in your app but we don't want to render the modal really deep in your app we want to render the modal at the root so we can handle all the Z index stuff correctly the way we can get our values get our context get whatever we need to that deeply nested component but actually render it really high out on top is using portals react portals don't have a formal concept of in and out they're a weird binding but there are a couple libraries that make it way easier to work with I like the idea of an in Portal and an out portal an in Portal is the place you mount a component you want to put somewhere else the out portal is the place where it comes out so the react Dom the virtual Dom sees modal as a child of in this case mod view widget container which funny enough is named very well for what we're talking about now but when the real Dom renders it it doesn't render the modal as a child under mod view widget container it renders it where we put the out portal so we end up with a much cleaner real Dom that puts the elements different places than we put them in the react Dom which means we can have 100 things under this in Portal and just change where the out portal was located whenever we feel like and now it doesn't matter if we rerender this or move it or do anything to it because this stays still and the problem we were having is whenever these moved they would lose their state because they're being rendered so by putting these in a single stable place we could now just portal out the content we need into the places that we need it this was a pattern that I somewhat chaotically proposed because I'd use portals for a few weird things in the past as soon as I started building with it I'll be honest it didn't seem viable and I was about ready to shut it down before or my manager at the time was like wait no this seems like a good idea let me take a spin at it and he dove in found some dumb mistakes I made and we actually got it working so I was blown away that this chaotic proposal I come up with ended up working as well as it did and to this day is still the pattern being used to make mod view State persistent regardless of how much you're customizing your UI and it's the combination of like these patterns the libraries that we forked and built on top of and the team genuinely caring and working really hard because we all love moderators these moderators they all work hard they make the content that we do possible they keep twitch safe and they make it a better place and everyone on the team was fully aligned that moderators deserve better and that's why we worked as hard as we did to build modview because we cared a lot about those users that's the main reason why this project succeeded because everyone working on it cared and the outfut speaks for itself this is a dope project that works really well I'm so proud of the team that built it I'm so proud We hit impossible deadlines in fact more than impossible I actually had the product manager set the deadline a month early so we would have that extra month in the end to things up which was huge for us because we were able to make this product really really good I have a picture somewhere I I'll try and find it for the editor to sneak in where I had I think six laptops and four desktops all on my desk testing against various really large streams with various custom builds of mod view to figure out why we were sometimes memory leaking for really big streamers and that level of dedication to splitting everything up and manually testing to find whatever we could to make the performance and to make mod view work at the scale of our biggest streamers it was so much effort but we did it because we cared so much and I think it shows in what we built enough about me and the cool stuff I've built what about you what have you built that you're really proud of what's the coolest thing you've ever gotten to work on tell me about it in the comments I want to hear all about the cool stuff y'all have built because that's why we do this right to build awesome if you want to learn more about how I set goals and what I do in order to build cool things like this I'll pin a video in the corner here CU I feel like a lot of people in the dev space in particular kind of suck a goal setting so I made a video about that thank you guys as always really appreciate yall peace nerds




## The Copilot Lawsuit Just Got More Interesting - 20240713
the developer suing over GitHub co-pilot just got dealt a major blow in court this is going to be a fun one before we go any further quick disclosure I am invested in Microsoft it's not a lot of money but it's enough that I legally should probably let you guys know if you're not already familiar there's a bunch of devs who are very upset about copilot if somehow you don't know what co-pilot is co-pilot is a code autocomplete tool it's your AI paired programmer made by GitHub the thing that's sketchy about it being made by GitHub is that they have access to a ton of code data like an unfathomable amount of existing source code that many developers have created and while those developers might have open sourced their code and given it a license for free use for whatever you want to do with it most also require credit and that's where things start to get really sketchy because if you're training an AI on some open- source code that requires credit and then somebody else uses that AI to generate code they probably don't even know what source that code came from so they have no way to credit and we're not even talking about the chaos that is the potential for private code in private repos terrifying these are just real complications that exist once we get into this world where we have a box in the middle that's Opus skating the inputs and outputs and and more important points coming from chat already GPL code requires changes to be sent back Upstream so if it's trained on GPL you're kind of screwed so what's going on with this court case because this has impact possibly far outside of software Dev if it's determined that you can train an AI on existing data and then whatever comes out the other side doesn't have to follow the same rules that's a scary problem and it's important for us to understand what the courts are saying here because there is basically no precedent here yet we don't have an official Court ruling for whether or not things created by AI can even be copywritten on the other side much less how they apply with the copyright rules on the other side very useful link Kush thank you for that one other notable thing that just happened is that Microsoft dropped their Observer seat in the open AI board which is interesting in and of itself but Microsoft's also the owner of GitHub so even more interesting it seems like the relationship between these things is more complex than ever the potential legal case here is also more complex than ever let's dive in to what the law and what the courts have said so far a California judge dismissed nearly all claims laid out in a lawsuit that accuses GitHub Microsoft and open aai of copying code from developers a judge has tossed nearly all of the claims that a group of devs brought against GitHub Microsoft an open AI in a copyright lawsuit filed in 2022 we should take a quick look at the lawsuit this is a lawsuit yeah this as I said this isn't just for devs this could rewrite AI copyright rules entirely the belief of the people who are doing this lawsuit is that Microsoft GitHub and open AI are all violating copyright law by reproducing open source code using AI that's fair in a court order unsealed last week a California judge left only two claims standing one that accuses the companies of an open source license violation and another that alleges breach of contract the open source violation bit is also really really interesting because open source licenses haven't really meaningfully been tried in court if we go to the upload thing repo and we take a look at the license it's the standard boring M license got to update that copyright this license is relatively open and how this would be interpreted in court is still up for interpretation we haven't really tried the MIT license in court much less the GPL stuff so we don't really know what would happen if somebody was to violate the terms of MIT or GPL or any of these other licenses how much do those hold up in court usually the goal of these licenses isn't to outright prevent any types of things from happening it's a more General protection like the MIT license especially calls out that the software is being distributed without restriction including without limitation the rights to use copy yada yada yada but the more important point is this all caps at the bottom the software as is without warranty of any kind Express or implied including but not limited to the warranties of merchantability Fitness for a particular purpose in non-infringement in no event shall the authors or copyright holders be liable for any claim damages or other liability this is the goal of the license for the most part is to make it so you can't sue an open source maintainer for their code which I think is really fair and important and I would be surprised if anybody tried to challenge this in court if an open source project cost someone to lose money I don't think they can sue due to the nature of this license but everything above all of this stuff here hasn't really been tried in court yet and it's going to be interesting to see how that goes on top of the fact that the AI copyright question still hasn't been resolved the original lawsuit made 22 claims against the trio the trio being Microsoft GitHub and open AI accusing them of violating copyright laws by allowing the AI powered GitHub co-pilot coding assistant to train on developers work Microsoft the owner of GitHub uses open ai's technology to power the tool all three companies asked the court to throw out the lawsuit in January but the judge John tiger denied that request however judge Tiger's last ruling deals a blow to the accusation that GitHub co-pilot violates the dmca by suggesting code without proper attribution that's what I was emphasizing before that we don't really have the knowledge of we don't know if reproducing code that has an MIT license on it if that thing in the middle if I I did a diagram about this let's say we're using AI to design an app this is a diagram I drew to discuss figma's AI stuff but it applies the same here so we have these different apps that the AI uses to train so the AI gets given these example apps these example screenshots this example data and this might be copyright it might not be but it exists already and if I was a designer or a developer and I looked at some code and I used it as inspiration to write my own unique thing how much I have to attribute the inspiration is Up For Debate if I am using things that I've played with in the past and they're just sitting somewhere in my brain and then become references when I'm designing things it's hard to know how much that violates copyright law it's legitimately quite difficult to know if something inspired you or not as a human being so if I have used hundreds of different apps and then I go make my own and it happens to look like one of those ones that I wasn't even thinking of did I violate copyright where things get even more complex now is if it wasn't my brain CU if this was just like my brain's uh references where my brain in it has all these different apps that I've looked at all these different designs just floating around and then when I go to make my own unique app it might be heavily inspired by some or all of these things that's a complex problem and for the most part the courts have opinions but the complexity comes when this gets replaced with AI training data so now that this AI has been trained on this data if the app I get out on the other side is basically just a clone of this app if I'm effectively using the AI as a black box to Opus skate the fact that I'm copying this app that's gevy that's questionable this is the thing that we have to figure out now is what level of opusc what level of Black Box between the design I asked for and the design that inspired it is great enough to justify copyright law being different here because if this wasn't AI if this was just my brain and I made something that was similar we would be judging based on the similarity of the output and the input but once the AI is in the middle things get more complex I would argue that the thing we should be discussing here isn't whether or not this box is big enough or whether or not the things being trained are unique enough the only thing that matters in my opinion is whether or not the output in the inputs can be considered by the average person to be unique works if this unique app and the app that I make through the AI are similar enough that a reasonable person could mistake the two that feels like the violation not the use of AI in the middle to off youate it so this is where things are going to become more complex because I feel like we might be focusing on the technology too much and the reality of how these things work a little bit too little but let's keep reading to see what the court decided thus far so I'm quite curious as we said judge tagar has ruled that the dmca stuff probably isn't the case here although the courts previously ruled that co-pilot suggested code wasn't close enough to its original Source an amended version of the complaint takes issue with github's duplication detection filter which users can toggle on to detect and suppress co-pilot suggestions matching public code found on GitHub very interesting that they actually have a feature for this I didn't know they did that establishing trust in using GitHub co-pilot what technical safeguards are in place GitHub has created a duplication detection filter to detect and suppress GitHub co-pilot suggestions that contain code Snippets that match public code on GitHub your Enterprise administrator can choose to enable this filter for all organizations within your Enterprise or they can defer control back to the individual organizations so again as I was saying before if we were to take this design and instead of thinking of these as designs and thinking of these as source code so this is like a b c b a and we have this source code this is just in this pile of training data so we have this training data that has this code abcba and this is coming from some public MIT repo so it's a publicly licensed well we'll be more strict we'll do GPL because then it has to be credited and any changes have to be ported back so now that we have this public GPL repo that has this code in it and it's one of the things being trained let's say that our shell is inspired by app B we'll even put app a text above here so we have app A's text app B's like frame and then we take not even all of the code we'll just take the B and C from here is taking this snippet from this public code first off is it actually taken or did we happen to read a bunch of other projects that do ABC over and over again and established a pattern that we got this from like is this code actually from this public repo or is it from any of the hundreds of others that have the same code in them so if we just have a ton of these repos around and all of them have similar code maybe this one's MIT licensed maybe this one's actually owned by GitHub we have all of these different sources with very similar code and maybe all of these are part of the training data Maybe none of them are maybe the one that's trained is actually github's code but then there's a public repo that happens to have very similar looking code can the person who made this app get sued well if the owner of the GPL code can make a case in the courts that this code is clearly their code that happens to be here then they could say it's a violation of their license in their copyright because this code is identical but if the owner of this code could prove that there's prior art that there are other code bases with the same code that are not that owner it gets messy but now this is a debate over both ownership and reproduction where it's hard to know how unique a given line of code is and the AI is only making it harder this is also why things like patent law are so complex and why you'll often get advice especially from people like primagen to never look at patents because as soon as you do that is now admissible in court as evidence that you violated somebody's patent because if they can say oh this is the of a person who looks at patents so they have the potential to have copied my patent you're so that's why this gets so complex because now you don't have to have looked at this code to write the exact same code if GitHub looked at it that's in violation but if GitHub happens to have similar looking code even if this code is inspiration is different from this public repo there is still enough overlap that this public GPL repo could sue you and that's what makes this duping stuff so interesting because this isn't as simple as don't train on GPL code because again if there's a GPL version that we didn't train on and then something that GitHub owns that is similar enough you still might be seen as violating the source code here because GitHub doesn't know how to Source where this code came from GitHub isn't capable of saying directly oh that code you have there that had to have come from this code base here none of the sourcing of yai made decision stuff is anywhere near good enough to draw those types of clean paths so because of that there is now some room in the court to convince a judge or a jury that there's plausible believability that the code that you trained on and is the result is resulting in this output that that code might be github's code but it might also be this public GPL code and that's why this reverse engineering thing is so interesting because the duplication detection filter is actually training on public code but not to make their AI better at generating code quite the opposite they want to make sure that even if this code came from github's own code base if it is close enough to this public code if the relationship between this code and this publicly licensed GPL code is close enough they just won't give it to you they won't generate this code even if the generation result comes from things they trained on their code even if they own the copyright to this the possibility that your business might get screwed because code they own was used in your thing through AI is enough risk that businesses are scared so what they've done is they've built a patch on top that specifically looks out for things you might be able to be sued for and cuts those out of the results which is a really really interesting angle because it both confirms the fact that they're probably not just blindly training on all of this license code but also that the concern doesn't really matter it doesn't matter if the code came from this public GPL thing or if it came from GitHub because in the end if the output is close enough you might still get sued that's that's just starting to touch on the complexity of this case and I want to keep reading what these decisions were it's also interesting that the amended version of the complaint takes issue with this detection filter I'm curious what their issue is the amended lawsuit argues that GitHub gives users the option to receive identical code when the filter is turned off I hope that this helps showcase why this argument is weird because if the code being trained on just happens to be identical to this GPL code it doesn't matter which I trained on because the owner of this code is still going to try and Sue so it doesn't actually mean that github's tool is spitting out code that is violating copyright so much as GitHub and copywritten code have overlap and the output result could be mistaken for something copywritten another way to think of this is imagine you bought a book of Melodies so you're a a songwriter and you buy a book of Melodies and this book has a whole bunch of different Melodies in it for writing songs and on page 76 you find a Melody you really like so page 76 has a Melody let's say it's like a c c a f a just making up random letters not even using Sharps and flats whatever so you have this melody that you found in this book and you really like it so you go and you make a song using this melody and then it turns out that Marvin Gay's estate has a song that is a Melody that's AC a ga a so if Marvin Gay estate has a song that it owns that has one note that's different but it's close enough or even worse let's say it's transposed they go down a note so GB this isn't a proper like uh change but I'm just doing it for the sake of it so this is all the same notes but shifted down one note it's the way to think of it so if you have this song that you wrote Based On A Melody from this book that you purchased but transpose it could be a different Melody so if Marvin Gay can claim that these Melodies are similar enough even if you got this Melody from something else and even if the author of This Book of Melodies has never listened to a Marvin Gay Song and literally could not possibly have violated your copyright it doesn't matter because the Court's determination is going to be based on are they similar enough to be reasonably mistaken and is this a market alternative to this Marvin Gay's estate probably couldn't have sued the book of melodies for for putting this melody in but now if somebody produces a song based on this Melody from The Book of Melodies that they purchased that person could get sued the only way to prevent what we're describing here would be to have a separate book book of illegal to use Melodies and this book of illegal to use Melodies isn't a reference for you for What songs to write it's the opposite it's actually going to let you know if you have a melody and then you check the book hey this melody can't be used so maybe in this book they also have page 76 and it says do not use this melody and it has that melody in there so now I as a music writer maybe I own both of these books maybe I own the book of Melodies and I have this melody I really like so I start working on a song with it and then I remember oh I don't want to get sued I'm going to go check this book of illegal to use Melodies and see if there's one that's similar enough so I go through this book I see one that's kind of similar I geted out and then I go and do something else instead that's what's actually happening with this is they are using a separate book a separate source of data to see if the output they generated is close enough to something you might get sued for that's why they would block it not because by default it's generating things that are violating your copyright but because of the liability of what's being generated neither the book of Melodies nor the person using this melody are violating Marvin Gay's copyright but what they are doing is creating a work that could be seen as similar enough in the court given enough money and time spent by the group that's fighting this suit that that's a liability and the thing that being worked on here isn't preventing the tool from generating copywritten works it's much more specific what they're trying to do here is make it so you're less likely to be sued they're trying to lower the liability and lowering the liability of a copyright suit is a very different thing than making it so your tool doesn't generate copywritten work and I want to draw that line because I might not end up agreeing with the results of this case now that I know they're exploring this option because I do not think github's changes are to prevent copyright from being violated I think those changes are much more specific it's to lower the risk profile of using those things this was never about whether or not the thing coming out is illegal it's about whether or not your company is willing to fight the case in court to defend it in the liability around using these things in the first place apparently they also cited a study that shows how AI models can memorize and regurgitate parts of their training data which could potentially include copyrighted code I bet you could do a very similar study where if you took a person that was a professional pianist and you put them in front of a piano and said compose me five Melodies that at least three of those Melodies are going to be very similar to ones that already exist in the public it would be hard for me to believe that anything somebody composes on a piano is going to be truly unique and not referencing a bunch of things that they've experienced in the past themselves it is genuinely really hard for me to see a world where creative output isn't inspired enough to potentially be seen as violating of copyright so yes the AI model might memorize parts of code and regurgitate them but so does a human it's very common that's just how knowledge works is you reuse parts of things you already know what level of reuse and what level of knowledge matters and should be considered copyright violation is a a very up for discussion thing that a lot of people are going to disagree on I'm already terrified of what the comment section of his video is going to look like that aside this is a complex problem okay that's a relief to hear apparently this did not hold up in court as judge darar determined that code GitHub allegedly copied from developers wasn't similar enough to their original workof where was this person during all the Marvin Gay lawsuits he also mentions a part of the cited study that says GitHub co-pilot rarely emits memorized code in benign situations judge tagar dismissed this allegation with prejudice meaning that the developers can't refile the claim W huge baller I'm going to drop a really spicy take I think the biggest mistake that these devs made was filing this lawsuit in California and not in Texas it's actually become a meme in Texas especially for weird patent lawsuits and patent trolling there's a couple cour houses in Texas one in particular um Texas Court House Samsung Ice Rink one my favorite random stories why a small town in Texas has Samsung's ear this small town had an ice rink sponsored by Samsung why does a tiny town with 20,000 people have an ice rink sponsored by Samsung the reason is because Samsung gets sued by random patent trolls all the time in Marshall Texas because Marshall Texas courthouse has a bunch of people in it that aren't particularly aware of technology and as a result you can sue a big company in this courthouse and you can convince the jury or even the judge of some really stupid and then win the lawsuit the reason Samsung bought an ice rink in Texas by the way one of the hottest states in the country they bought this because they're trying to win some good sentiment from both the people who work at the courthouse and also the potential jury because they need whatever they can do to potentially not lose these lawsuits and it's so funny that this random town has been discovered as a hotbed of dumb tech people to sue other companies through I would be surprised if this lawsuit didn't go entirely differently if they went through that house in Texas instead but yeah if you wanted to understand how these copyright laws and their enforcement is they're trying to socially engineer a random small town in Texas because their courthouse is so technically incompetent that it's resulted in a bunch of rulings like that's the state of these things it's nuts anyways the courts also dismissed requests for punitive damages as well as monetary relief in the form of unjust enrichment nice these devs got squashed this doesn't mean the lawsuit is over litigation will likely continue with the developers claims regarding breach of contract and open source license violations one more thing on copyright just to emphasize how vague dmca is and also how weird the southern district of Texas's rulings are there are some contradictory rulings being cited in here the first comes from this southern district of Texas case from 2023 which concludes that dmca is not limited to copyright management information conveyed in connection with identical copies of a work so this Court ruling cites that the work being an identical copy is not necessary for to violate copyright which uh is scary for all of us reaction channels but thankfully there has been additional rulings on this from the ninth circuit that continues to compel us to research because we reach different conclusions in these other cases the one that was reached in this case in 20120 is that courts have found that no dmca violation exists where the works are not identical and then another case in 2023 is that the plaintiff has not plausibly alleged that defendants distributed identical copies of plaintiff's comparison for example say that would violate dmca law according to these rulings something like um internet archive Distributing books that are still for sale so they've a PDF of a book that I could go get through Amazon as an ebook those are identical or at the very least functionally identical products one is being given to me illegally for free the other's giving to me legally for purchase that's a thing that would be violating of dmca but if I was to make a movie based on that book that would be a little more vague so that's what's interesting about these rulings is we don't have a strong answer yet what would it take to violate dmca let me know what you guys think in the comments is all AI violating copyright or is this a more vague thing till next time peace




## The CrowdStrike Problem Isn’t A Simple Fix… - 20240719
pretty much every PC in the world just like all of them especially the ones being used by businesses this has caused impact I could never have imagined everything from business meetings falling apart to news networks being in a pretty funny state to the absolute chaos with flights where this was the amount of flights that were going around before this issue occurred and now you see how much fewer there are this is this is insane I've never seen anything like this or even kind of like this so what happened what's going on these are all good questions that we should answer and I'm going to do my best to do that so without further Ado let's break down the cloud strike blue screen chaos quick shout out before I forget thanks to Jason langor for letting me shoot this in studio while I'm visiting Portland this is too important for me to wait till I'm home on Monday so we're getting it out as quick as we can the initial big break for this story was Troy hunt who if you're not familiar with him is the creator of have I been pwned so my initial thought when I saw him tweeting this is that this might be your usual ransomware chaos that this was some hacker trying to take over a bunch of computers and make a bunch of money that's what a lot of people are actually still thinking but uh I can confirm for sure not only is it not that it's actually kind of the opposite of that there's a piece of software called crowd strike Falcon crowd strikes thing has historically been investigating breaches so when a company gets hacked they're the company you would call in to figure out why they were hacked what happened and what the impact is so if you were affected by something like ransomware attacks this is the company that would come in and help clean up to damage because of that they started creating a lot of software think like Norton or malware bites but way deeper and their goal is to make sure anything that even looks like it might be one of those types of attacks is being addressed and as such CR strike Falcon is very very standard at businesses especially businesses that don't want to be victim to all of their computers being shut down during an attack like that a lot of companies require you to use this software it's not like oh you can choose whether or not to install it when you have a machine provisioned by a business they usually just put their things on it and have specific programs that make sure you're running all of the software that they expect in order to keep their things safe seems like that was a mistake but the mistake that caused this is even more interesting before we get to that though I do want to showcase some of the absurdity of the impact here because the amount of things affected is unbelievable Sky News as I mentioned before was off air for a while and when they came back up it was a chaotic hand cam situation the down detector says everything you need to see look at all of the things that are down because the Windows computers they're using to access it can't even be turned on that's also worth noting this isn't like oh your computer crashes after booting up for a bit it fails to boot because of how Falcon Works which again we'll get to momentarily look at all the blue screens at Delta it's Insanity hotels in Vegas couldn't be booked stuck at dub airport for over an hour now checking servers down no movement in sight frustrating start to travel can't even imagine so many air reports got absolutely destroyed with this hotels got destroyed with this businesses got destroyed with this I know my friends at twitch were absolutely screwed because everybody who's not an engineer is on Windows and even bunch of the engineers are and the IT channel was flooded with requests to get help with their PCS at all of these grounded planes it's insane airport was hacked people seeing the blue screens and the crashing everywhere and assuming it was a Cyber attack cuz again everyone assumed this was going to be a Cyber attack just due to the nature of the chaos that we were seeing Sydney supermarkets are only accepting cash now cuz all their systems are all with Windows if you're wondering why Windows is the only OS affected it's because Windows is the only OS that is insecure enough to have problems like this Windows is a pile of hacks on top of each other that has resulted in an less than ideal system environment for safety there's a reason all of these ransomware attacks have specifically directly targeted windows and not other operating systems it's easier to get lowlevel access to control the OS and historically windows has been the thing that has the most security issues that's why there was the huge wave of antivirus software that's why things like crowd strike exist yes they do have versions of crowd strike for Linux and for Mac but they are much less deep and much less involved than the version that Windows uses the fact that the windows version has a driver that it installs should say everything you need to know about how insecure Windows is and how badly it needs low-level help in order to make sure that your environment is safe so in that sense I understand what crowd strike is doing but that doesn't make it any less terrifying especially now that we've seen the potential issues that can come out as a result of this in order to understand how this happened first we need to know a little bit more about how Falcon works for crowd strike Falcon's an interesting approach to antivirus most antivirus software is something that runs after your computer starts up in order to scan files look at processes and try to get an idea if anything looks suspicious crowd strike chooses to work a layer deeper because they want more access and more information what they do is they actually load a driver into your computer like the thing that is used to control your devices usually drivers aren't used for things like this and their decision to do such is a bit strange but when you consider the level they're trying to work at and the desire to have as secure a system as possible to the point where you can't boot up unless you're in a secure environment it makes sense they would do that but man that's caused a lot of problems because now anybody who got this bad update cannot turn on their computer and the way crowd strike does updates isn't the usual you click the up button and it installs in order to stay as ahead of the different cyber attacks that they detect they push updates through a process called over theair otaa updates so a lot of devices without the users even knowing just magically got this update and now they can no longer boot that is terrifying I can't even comprehend like going to bed waking up your computer turned itself off and you try turning it on into blue screens the reason that this driver was so broken is also very interesting the issue was this particular file this c00 291 whatever do CIS the update they pushed was wrong somehow they made a change where all of the contents of this file were zeros obviously a driver shouldn't be full of zeros it should have actual content that represents what it's doing but it seems like their build system that creates this failed somehow they didn't detect that and they pushed out this bad update that cannot run it is not surprising at all when you look at this file that it prevents the system from booting because it boots this thinking it's a driver it can't read it can't do anything with it it falls over that said I found this because I saw this tweet where somebody was suspicious that crowd strike might have done this intentionally or somebody might have commandeered them to do this because pushing a bunch of null bites for a driver is so absurdly unbelievably dumb this is an unfathomably stupid mistake and I cannot believe they actually did this much less shipped it to hundreds of millions if not billions of machines but here we are I don't think this was intentionally malicious I think this was very very very incredibly dumb before we get to the fix I want to talk a bit about how companies have been responding this is a statement from George carts who is the CEO of crowd strike the statement is as follows Crow strike is actively working with customers impacted by a defect found in a single content update for Windows hosts Mac and Linux hosts are not impacted this is not a security incident or a Cyber attack the issue has been identified isolated and a fix has been deployed we refer customers to the support portal for the latest updates and will continue to provide complete and continuous updates on our website we further recommend organizations ensure their community communicating with Crow strike Representatives Through official channels our team is fully mobilized to ensure the security and stability of crowd strike customers I have a lot of issues with this statement first and foremost to be very clear the number of customers they have and the number of computers that are affected their team being fully mobilized is not enough at all there is no world in which their team can fix all of these issues especially when you learn how complex the fix is it's not a thing they can do speaking of that there's no way that they can use their deployed update to magically fix the bricked machines because you can't push an update to a machine that doesn't turn on so there's nothing that they can do in that sense to fix this this is a thing people manually are going to have to deal with the other thing and this is just a general piece of advice to any CEOs who might be watching please apologize when you do something like this I saw this tweet not from George directly but from Lulu Chang here who actually did a really good job rewriting his announcement for him I want to take the chance to Showcase this I think it's a much better example of how to deal with a absurd situation like that I'm the CEO of crowd strike I'm devastated to see the scale of today's outage and will be personally working on it together with our team until it's fully fixed for every single user but I wanted to take a moment to come here and tell you that I'm sorry people around the world rely on us in incidents like this can't happen this came from an error that ultimately is my responsibility this is so good you should hire her to be your writer because she did a phenomenal job I'm hitting the follow button she knows what she's talking about this was good speaking of good SAA jumped on this too SAA is generally pretty good at the Comm stuff CE of Microsoft if you somehow didn't know yesterday crowd strike released an update that began impacting it systems globally we're aware of the issue and we're working closely with crowd strike and across the industry to provide customers technical guidance and support to safely bring their systems back online great nice simple response if only the CEO of crow strike knew how to do that anyways now I need to talk about the fix for this because uh I think it'll showcase just how screwed people who are using crowd strike are so the fix is to boot in safe mode yes safe mode the custom boot flags that most people don't know anything about on windows so you boot in with safe mode you then open up the command prompt Powershell and you manually delete these particular files the C- however many Zer 291 star. CIS you have to delete that file and then you theoretically should be good to reboot but the fact that you have to know how to find this file as well as run a Powershell command to delete it is a bit of a large ask thankfully there's a lot of guides coming out how to do this but there is one more catch the catch is bit Locker users if you're not familiar with bit Locker it's the go-to encryption standard for Windows PCS so if you're running a Windows PC out of business that has secure data on your machine bit Locker is almost certainly being used to make sure that your hard drive is encrypted until your password is entered and then the key is verified against their database so a lot of systems a lot of these active directory based solutions for businesses would require you to sign into your computer it would connect to the Wi-Fi and then it would reconnect send you the key it needs to decrypt your hard drive and then you can start using the machine but a couple issues exist in this situation first when you're in safe mode you can't make that connection but on top of that a lot of the servers that have those keys are down as well because those active directory servers are using Windows Server they almost certainly had things like crowd strike installed and as a result those systems are down too this isn't just people's personal computers it's also the Enterprise boxes that they're connecting to total mess so if you want to get into one of these machines that is bit Locker encrypted you need another computer that can sign in fine use your password to generate a decryption key to do a safe unlock and you have to type in this really long manual thing in order to do it the instructions are here as they say you have to go to a second device and go to the Microsoft my account device list you have to sign in you have to take down the bit locker key that you have in like your Windows Microsoft account online and then manually enter that in order to get into safe mode on your PC to go delete this file that is corrupted and should not exist to then hopefully finally be able to use your computer once more now imagine explaining this to Carl and sales because US tech nerds can probably figure it out but once you're working with more traditional people that might not be developers might not even know what the command prompt is good luck have fun my theory for how this will eventually be resolved is that instead of telling users to go do all of these things Microsoft crowdstrike both or some Community member are going to create a bootable USB like you know the thing you plug into to install Linux or reinstall Windows they'll create a bootable image that you can plug into your computer boot to and it will give you the instructions on how to do all of these things step by step and automate as much as possible we'll check for bit locker and it will tell you how to get through it if you don't already know it will auto delete the file if it detects it and it's out of date or is this broken file and it will hopefully theoretically make this process much smoother so an IT person can just plug a USB drive into your computer hit boot go to the USB boot and be done with it without something like that this is going to be a bit uh miserable for those it people so be sure to pay a lot of tribute to your friends who are doing it work right now I can't imagine how hard and stressful this is for them I know the one person who was online at 1:00 a.m. when this happened at twitch was having a rough day I don't know what else I have to say here this is an absolute mess huge shout out to creators like John Hammond for covering this so well thank you to Troy for doing the awesome thread and thank you to everyone for letting me know about how big of a deal this was so I could find a space to quickly record this video One Last shout out to Jason langore for letting me use his place for this check out his series web dev challenge if you want to see four devs competing to build applications really cool Ser I think you all love it until next time peace nerds




## The DHH Problem - 20230908
ever heard of this thing called rails Ruby on Rails specifically it's a framework that changed how the web works it would be dishonest to not point at rails and credit it for a lot of how we build applications today it really helped normalize the idea of a fast-moving MVC model where you're defining things on a back end largely around your database and then creating powerful uis for it through templating systems sadly its creator seems pretty done with change and he refuses to acknowledge a lot of the things that have pushed the web forward since his time and it's really starting to show the two things I want to focus on today are dhh's choice to move off of the cloud as well as dhh's weirdly focused disdain on typescript the typescript thing is obviously what inspired the video but I think both of these really show the problem that I want to highlight here first I want to start with the cloud thing because the cloud exit is an article that keeps getting shared and I think there are important points that are being misunderstood for those who aren't aware dhh runs the company 37 signals which makes products including base camp and hey the email service for a while they've been building on the cloud with things like AWS somewhat recently they decided to move off of the cloud and off of AWS and start hosting their own servers instead and this has significantly decreased the cost of running their service that's cool to hear and see it is honestly interesting to see companies moving off of the cloud and showing real meaningful cost savings but there are some important things that have to be true about your company for this to be the case the first thing is that the difference in cost between AWS and your own servers has to be great enough to cover the engineering cost of setting up those servers yourself let's say you have two people dedicated to running those servers keeping everything going setting up all the deployment systems building all the pipelines and everything and with AWS you only need one person that's a difference of 250 plus thousand dollars a year depending on how well paid the engineer is and all the additional costs around having an employee and you could dedicate them to other things on top of that the amount of agility you have has gone down significantly if you have to provision specific Hardware in order to try out new things the whole process and feedback loop has been significantly slowed down I'm not saying it isn't worth it saying it's only worth it if you have very specific circumstances one of which is as I said the cost difference is greater than the engineering cost the other this is where I think things are interesting is your growth isn't great enough to have to worry about provisioning if it's possible that your application has twice as many users tomorrow as it does today running your own infrastructure becomes really really risky and potentially will lead to massive outages in your service if there's any potential at all for your service to grow past its current Peak usage you can either over provision where you're spending more money or you can have down time where you're losing more money I don't think either of those are good options the beauty of cloud systems like AWS is that they have all of these over-provision servers in your renting space when you need it you're not renting it when you don't it's really hard for self-hosted servers to scale anywhere near as well as something in a greater Cloud owned by a company that already owns more than enough servers more than you would ever ever need most of us are working hard to make make it possible to grow further I know upload things traffic has doubled week over week now for a couple months and if we were to make dedicated servers to save our costs we would have to add more servers every few days and if we have a down slump we'd have to go manually take those servers down or we're paying for costs that we don't need to this effort is why the cloud exit doesn't make sense for the majority of businesses because most businesses have variable traffic that can change and to be frank we're all trying to increase the only reason a cloud exit could make sense is if you have plateaued or peaked your amount of traffic and it's either flatlined or starting to decline at which point squeezing out every penny from your existing users might make sense and when I see a company proudly announcing that they've exited the cloud what I see as a company announcing that they're no longer interested in new user acquisition speaking of user acquisition and user hostility let's talk about this new typescript drama because man dhh certainly loves to [ __ ] on types I know that as a ruby Dev he doesn't have much experience or desire to work with types honestly I get it I was a big Ruby Dev and an even bigger Elixir Dev which took a lot of inspiration from Ruby and honestly I didn't feel the need for types too much when I had powerful quality utilities around things like pattern matching to make sure I had the data I needed when I started working with it but man once you go in a type system it's incredibly hard to go back I'm a typescript convert I was very skeptical going and I had many projects where people filed pull requests adding typescript and I rejected and closed them because I didn't see it as necessary until I started working with it especially once I started working on it with a team and started consuming people's code that was written with typescript and all of a sudden autocomplete could carry me through the API I'd get really useful errors when I was calling things in ways I shouldn't and my overall experience with JavaScript got so much better but I'm now considered a web dev in JavaScript engineer typescript is a huge credit to that change for me I'd almost certainly still be a mostly backend engineer that wasn't for typescript and how much more enjoyable it made web dev for me yes there are compiler steps and yes your code has more letters in it than it used too but I've often found that typescript code is easier and simpler to work with because it's going to tell you when it's wrong and it encourages patterns that make for simpler code no more having one variable that's used for 15 different things depending on how far you are in the code types are easy to work with if the code is simplified and I found so many opportunities to fix types just by simplifying the code the types are defining and if you take advantage of typescript's powerful inference Primitives you could make incredible things with these systems and it's so sad to see that dhh is so anti-type script that he is not only pushing for vanilla.js at the company he's actually deprecating the type definitions included in libraries that they help maintain for the open source Community this is just insanely insanely user hostile and thankfully I'm not the only one who thinks this so here's the article from dhh by all accounts typescript's been a big success for Microsoft I've seen loads of people Sparkle with joy from dowsing JavaScript with explicit types that can be checked by a compiler so I've never been a fan yada yada here's the pr where it's dropped let's find his comment fully recognize that typescript offers people some advantages but to my eyes the benefits are evident in this PR the code not only reads better it's also free of the type wrangling and gymnastics needed to please the typescript compiler we write all our clients like code at 37 signals now on purejs and the same two with any internal libraries this is going to bring that in line you're the only one who thinks this way dhh as an industry we've moved on you know prettier was removed too crazy yeah this looks so much cleaner I love how they have to use hashes now to determine private versus public because typescript can't do it for them anymore makes it obvious that this is not any HTML element but body maybe you could rename current element to current body element or add a comment explaining that it's not HTML or that it's not any HTML element look there's we're losing useful information this is the problem I I feel like people are mad that there is more here but it means you make less mistakes and this thing is easier to consume oh what did Spike say I [ __ ] love spike I'm sure he has some interesting there was a way to statically catch this error undefined or undefined it's a great Spike comment I already have a video where I talk about how typescript is an additional burden on Library maintainers making code that works well for people consuming it in typescript is hard and we do have to put in effort we should think about it less like this huge burden Library maintainers have to take on and more like a way to define your API schema that is universal and can be consumed by any other typescript Dev and even JS devs that are using tools with typescript support like vs code the reality is that these typescript definitions benefit everybody and before we had typescript we were making up crazy ways to do the same things with massive piles of testing or giant comments with jsdoc trying to enforce specific behaviors and clarify what things are supposed to be doing it kind of makes sense to me that someone who hates typescript this much is also a huge proponent of test driven development because tdd only works if you exactly know what you're building and JavaScript only works if you know exactly what you're building typescript solves a different problem which is code that changes over time things that need to be maintained for years or or consumed by people who might not even be in contact with you typescript allows for a much much wider variety of I'll be frank everything from contributions to library definitions to maintenance internally and externally without a good type system making code changes with confidence becomes much harder but if you have dhh's confidence I can see how getting Confidence from somewhere else seems like a waste of time this is why I'm so frustrated I I'm tired of people saying well he made rails so everything he says must be true and this is why we've seen so many other people coming out and talking crap like that Spike comment I just showed or this awesome dunk from Rich Harris that I found on Twitter moving types from your own code is clownish epically misguided Behavior but whatever to each their own removing types from a library that other people have to use however is just user hostile the watery and this is coming from the guy who moved off of typescript to JS stock he is one of the most reasonable typescript users slash anti-users and he's still out here explaining why dhh is being stupid I remember you decide to use JS doc over typescript do you think it's a good way to add strong types of vanilla yes oh there's a new Rich tweet oh boy it takes a lot of effort to get rich Harris this mad Rich does not get angry often he gets a little funny at times but never angry like this and it's fully correctly placed here there's a lot of times where I haven't agreed with Rich okay not that many I'll be realistic I agree with him on a lot of things but like primagen and me to all be perfectly aligned on something that means the other side's likely [ __ ] up I agree with all of this I don't have too much else to say here I oh rails a lot of my own success both rails and Ruby as well as Elixir and Phoenix were essential to me getting started and finding success in web dev and it's sad to think that the person who helped me level up here is not continuing to level up themselves and rather than listening to the community and learning about how code Works outside of his little bubble dhh is choosing to say we're all wrong and go as far as to say that there is no argument to be had because he's not interested in listening so yeah if you have anybody at your job who's currently pushing back on typescript of this article like them this video see if it helps at all because let's be realistic this is a bit of a mess I will admit there's ways you can use typescript wrong and I'll pin a video about that all in the corner thank you very much appreciate y'all peace notes




## The Dangers Of Promise.all() - 20230813
I promise this video is going to be really helpful if you've ever worked with async before you probably know how hard it is especially in JavaScript promises are for the most part good but there's some exceptions and I hate to reject the norm the goal here is to resolve any issues you might have in your head sorry for the the string of puns there I couldn't help myself we have a lot to talk about here and I want to show off specifically why promise.all is probably not what you want to be using most of the time here I have a really basic react app just so I can bind a button quickly and this button when you click it it runs a promise that's using promise.all in here I have a promise and in here I have an array with one through five and I map all of these to the promise async function call work and then I await promise.all on all of those calls and if we look at this function here we wait for however long in this case it's the number you give it times a thousand so that's number of seconds so we wait for I seconds and then we return the number squared obviously an arbitrary weight like this is not how things are going to work in your application but if you're fetching data from the web reading i o or doing any of the many things that are asynchronous chances are you've had to wait inside of a function like this before sometimes in a function that's called a bunch of times and here if I was to go run this you'll quickly see the work starts running for all of them and then they each take one to five seconds and we get back our results oh I did X or not power I hate JavaScript and this time the numbers will actually be squared because I'm finally learning this index for language I use every day but what happens if one of these fails this is where promise.all kinda sucks because when I do this we decide to just fail on four four failed immediately these other promises are running but it failed and went to Maine which means we hit this catch if I was to delete this try catch and run this one last time we get an uncaught promise where we click the button but all these promises are still running it doesn't cancel the promises running in the background we just never get the result all of these resolved promises have effectively vanished Into The Ether for us to never get back and that to be frank that sucks it's not great that we have work here that was completed that has results that might be useful to us and because one of them failed all of them both keep running and give us nothing when any one promise in a promise that all fails you don't get results anymore and that just period sucks I prefer using promise.all settled for this reason this file is identical except I have a second function here main settled and the only thing that is different here is the promise that all settled call instead of promised at all so if we go to this page instead the promise that all will do the exact thing it did before I can quickly show it where Maine failed for reason and we never get a response back but with all settled we see we didn't get the error to appear because it was actually caught by all settled and we got results and in here we see four of these calls were fulfilled and one of them was rejected the thing that sucks about this more than anything is the typing of it because now with the promise all settled we got promise settled results so const errors equals rejected const uccesses dot map but the problem here is even though we only have fulfilled so we now know we always have the value the type is still wrong because it could technically be unsettled because this filter is not smart enough to know that after it we always have the fulfilled case whereas with promise.all we always know and if I was to do const success equals results Dot I think we need to filter it because it's just the type of results is just number array there's nothing to do so I pointed out that we can do a type guard wrong button this is not great this is not great at all you even need to know the type from the function which is obnoxious you could probably write a custom function that is grab errors and successes from the type but yeah if you're using this properly this isn't pleasant but on the bright side what it makes you do is be considerate of the error and success cases when you're running against an array when you run an array of promises you might actually want them to run in the background and silently succeed if one fails but chances are you don't and the benefit of all settled is it kind of Brute Forces you to make a decision about these cases and almost every time I've seen a promise.all it's full of nasty edge cases that confuse the hell out of people consuming it and when you switch it to all settled you have to do a little more of this work thinking about it the benefit comes soon after which is suddenly you understand how your error cases work when other people go to read the code and figure out what isn't isn't happening it's much easier to figure that out now too generally speaking I cannot think of many if any use cases for promised at all and this is why I recommend all settled whenever I can how about you do you have any use cases for promise.all I'd love to hear why you use it instead of all settled but generally it's hard for me to recommend if you want to learn a bit more about things people using correctly in JavaScript I'll pin a video here all about the ways that you're using objects wrong because Scott everyone uses objects wrong for some reason thank you guys as always peace notes




## The End Of React Router - 20240326
routers and react have been in an interesting place for a while from react router to wder to tan router to next to remix there's a lot going on and as of today it seems like the direction is cemented react router is on the way out I'm not just saying this for the sake of speculation I'm saying this because Ryan Florence the creator of react router and remix is saying it since remix Spa mode which by the way if you're not familiar is the introduction of single page app behaviors and expected workflows in remix you don't need the remix server really interesting stuff so since they introduced Spa mode the only real runtime difference between remix and react router is that the link prefetch ARG will actually look for a manifest on content so it's not just doing a quick pre-etch for the JS it's theoretically able to fetch way more stuff it's about time to merge the projects react router version 7 it's probably remix run react V3 hard to figure out how to communicate this clearly understandable if we just ignored a missing manifest in remix runs react link and you could literally interchange the dependencies of react router Dom and remix run react maybe we should go the other way and remix becomes react router V7 either way when we ship features in remix we first add supporting changes to react router and then remix simply applies it to bundling in an optional server another way to say It remix was react router with a required bundler and server but Now remix Spa mode makes the server optional and react router makes the bundling optional only difference would be to make the bundling optional and nothing changes about your app except where the Imports come from and now the path to the bundle optimization SSR and RSC are a clear path of tiny incremental updates instead of looking like a rewrite this is an interesting framing here for those who don't know the history of remix some of the interesting things that got us here were the to put it Frank heavy Reliance on ES build originally remix wasn't a framework at all it was a paid template for running react router with modern building and bundling best practices already implemented on the server and the client and it was heavily built on top of es build to be fair at the time when remix first started there were not other options really at all we certainly didn't have V and things like it really figuring out the bundling side so going all in on manually building on top of V build was reasonable they took way too long to fix that and thankfully recently with the introduction of Mark dges and a few other people to the team once they join Shopify they actually managed to build things very well on top of vit and it's really nice to see that the V mode is now stable and often recommended by them because vit has so many really handy bundling options and capabilities that just don't exist when you're manually building everything on top of es build es build is a phenomenal tool so much so that it's what V built on when it comes to the size of the ecosystem the plugins the Integrations and all the other things you need to build a full stack framework that generates code for the server and the client with a complex relationship between the two inventing all of that from scratch sucks compared to Rolling it from someone else this PR is the one where this was all added the unstable V support made a ton of things possible that weren't before including the ability to just take almost any V plugin and have it just work this is a huge shift massive lift for Mark and crew and I'm genuinely really proud of them for making this happen I did not think it was possible before and they did it they did it surprisingly quick so worth checking out if you're curious surprisingly few lines when you consider all of the things it brings in does they pulled it off now it's stable this is a great Point too it's arguable that remix is just a meat plugin now which is a really cool point that the behaviors of remix are encoded in a plugin that goes into the bundler which enables so much yeah less than a year later is Now the default that last PR was October this one was last week where they made the V Builder path and bundler the new default for remix huge and once again huge shout out to Mark and everybody else involved with making this happen it is making remix significantly more interesting and compelling to me back to this thread though because the reason I brought that up is the weird history of remix where it started as a paid template it moved to an open source framework all built on top of es builds because honestly at the time the main reason it had to exist was that combining react router serers side rendering modern building best practices and data loading was a really complex thing to architect and if you compare that to something like next remix did a much better job the parts that they used to build on were just higher quality and much more modern at the time whereas nextjs still relies on webpack to this day and instead of moving off to something like vit they chose to go all in on building a new modern web pack turbo pack on top of rust vs funny enough going in a similar Direction Where V depends on roll up for and Es build for Dev this needs a diagram because this is getting two in the weeds Frameworks because the definition of a framework is hard I'm not going to try and justify it because we'll be here all day doing that so instead we're going to do remix next.js V12 We'll add in the new next stuff after I promise so the first point is uh client framework which uh obviously is going to be react for both duh bundler which previously with remix was raw es build now it isn't but this is I'll say remix V1 remix V1 versus next less than or equal to 12 more accurate cool bundle Rus build web pack there's a lot of detail here I don't think people appreciate specifically how miserable webpack was next was a massive level up for most people simply because you didn't have to manage your webpack conf fig and I'll be honest since I started using next I haven't had to touch a weback config basically at all I had gotten so used to dealing with those things managing my own bundles and bundle splitting trying to make routes load with reasonable amounts of JavaScript it was miserable and next handles almost all of that for us it's one of the benefits of file-based routing when you have all of your routes in different files it's way easier to Traverse that with a compiler and say okay this route Imports these things import these things import these things this route Imports these different things so for each route you can make a different bundle depending on which things they do and don't need so they were able to make a web package fake that traverses that tree and generates pretty much the perfect thing pretty much all of the time but it does so very slowly cuz it's webpack and web pack sucks the remix guys went the opposite direction which is yes configuring these things suck we think the fundamental tool of webpack is broken so we're going to go with the best thing right now and at the time es build had not just dropped but was still very very new and there was nothing else even close to that level of performance the other opt at the time were roll up in parcel there were a few others but these were the two people actually considered at the time in es builds was a go-based alternative when everything else was craziness in JS land soon afterwards an interesting thing happened where V was made V's interesting because it isn't technically a bundler by itself V is built on top of two other bundlers in Dev the US builds because es build has the best performance period so when you're in Dev and you save and you want to see the results immediately es build is a great way to get that and when I am just working on my machine saving changes I expect to see them very quickly and yeah there's reason they with es build it's great but they weren't confident in the ability for ES build to make optimal bundles for production and the ecosystem for ES build just was not there compared to other things so for production they actually use a different bundler they use rollup this is scary because you now have different bundlers which have different behaviors for different environments and ideally those environments would be as similar as possible because it keeps you from running into those types of bugs and edge cases but V was confident that they could work around enough of those to give you the best experience in both places that said they recognize the issue here of these behaviors being different and most of their work is trying to align the behaviors so the future of vit is going to be a little different the future of V is going to use for Dev and prod roll down yes not roll up roll down they're actually rewriting roll up in Rust in order to have the compatibility that they expect from rollup as well as that whole plugin ecosystem but they're rewriting it in Rust so that it'll perform fast enough to compare with es build so you can run the exact same bundler in Dev and prod without issues roll down actually just went open source if I recall probably should have made a whole video about this and if you guys are interested let me know in the comments and I'll consider it because roll down is actually really interesting it is a fast rust bundler for JavaScript with rollup compatible API and it's originally by avue I'm sure there's a lot of other contributors to it now yeah he's not even like the top rbor anymore top three still but Evan has been very excited about this project for a while oh no always to see miles around OG Community member and obviously Pak always finds his way into everything even close to beat does not surprise me in the slightest it's cool to see such a wide team already contributing to roll down though and I'm very excited for the future of this stuff working as I mentioned before next came with webpack preconfigured which was a huge huge win really cool they're realizing webpack's too slow but they're also realizing most of their customers are now deeply embedded not just in webpack but every weird webpack Behavior as such just moving you to another bundler is nonviable so instead of doing that they're rewriting the bundler so they're making turbo pack as a rust based compatible web pack alternative which is very exciting it's also taken forever I think they announced it two years ago and I have a bunch of content where I talk about how painfully slow it has been waiting for Turbo pack to the point where it hurt the nextjs roll out because they still relied on weback for app router for so long it is miserable a detail I'm not going into here here is that the compilation of JavaScript and typescript is different from the bundling which is its own chaotic rabbit hole we can go down but Babel is not webpack Babble is used by webpack this video will become 3 hours long if I go down that rabbit hole but know that there was an intermediary step I'll just say webpack plus Babel where they moved to webpack plus s swc and since then the focus has been entirely make turbo pack happen is technically still turbopack plus s swc they still rely onc for most of compilation internally but this has been the history of next bundle changes right now we are here this is still the default and the future is actually looking pretty likely to be similar to how things were split before with vit where we have Dev AS turbopack Plus s swc and then we have prod AS webpack Plus s swc and then hopefully finally we'll end up in turbopack plus swc land the interesting piece here is that webpack is being Rewritten in order to make these inter mediary steps viable now let's do the same for V so the V Chaos it was originally Dev yes built and PR roll up the future is literally just roll down I'm very excited for this it's like that they're skipping so many steps especially when you see the chaos that next went through similarly remixes bundle chaos is that they started with Dev and PR being us build which was pretty chaotic nobody was doing this I promise you nobody was doing this and now they're moving to vit and interesting here is that vit under the hood is going to handle this move so technically they're moving like this and then they're going to move like that if I copy paste this is a little more accurate to what's going on here but since this is all going to be handled by V theoretically it's not their problem anymore which is an interesting part of this chaos and an important one at that this is just the bundling side and we're not talking about the bundling we're talking about the routing so let's keep going through here we'll do data loading as the next Point here where in remix it's using their loader primitive and in next it was get server side props obviously in both cases you could still Define API stuff because the other big thing with remix and NEX versus single page app stuff is that these had a real server that was running which meant you could do serers side stuff which you could not do before and that includes loading data as well as rendering the components which we're still using react for the client and server side rendering so that part isn't too important important the router kind of is so the router with remix youall might think it's the remix file based router but it is under the hood actually react router They just added a file based compilation step so that you can have a file routing tree and it can not only generate the correct routes based on that tree more importantly it can generate the right bundles based on that tree so you don't have to load all the content from your dashboard page when you're on your homepage previously these were steps you'd have to implement yourself this was such a jarring change for me that when I moved from webpack over to V for the first time I tried to manually create my bundles for the different routes and it was a mess I accidentally commented out my bundling steps and the output was way better I was like what the hell and then I realized by just using react. lazy and letting the bundler do its thing the output bundles that I got end up being way better so that was a fun learning of wow these tools can actually automate this especially once you have file based routing so that each file only Imports the things it needs things get much easier and with next it was the/ Pages router which is obviously also file based I'll be honest when you look at this here and you realize that remix happened after the original versions of next but quite a bit before the new next model with server components and all of that the obvious winner here is remix react is react cool webpack compared to Ras build like yes plugins and ecosystem won't be there but the overall experience is night and day get Ser side processus loader get serite props is such a terrible pattern that it probably should have killed next it was so bad and I'm so thankful we've moved off of it whereas the data loaders and remix are probably still the best way to do route level data loading so much so that most other Frameworks are still copying it to this day if you're thinking in traditional server side rendering and data loading terms the remix loader is still the best way to do stuff and I am not going to pretend otherwise however this is the best of a different generation of tools which we'll get to eventually you should also consider watching my longer service side rendering video if you want to better understand and then the router here Pages router rough but fine not very composable the remix router significantly better in that regard the concept of slots the ability to do a nested routing I'll say file based plus nested nested layouts are so good that next basically had to steal it because it was comically night and day difference if I'm on SL dashboard I have a sidebar going to SL dashboard SL users should not make the sidebar go away and I shouldn't have to manually add the sidebar to every single route in order for that to work once you and Shane just put it perfectly in chat he forgot about no layout to next yeah same because it's been so long since I needed to deal with those myself the amount of crazy hacks I had to do to apply layouts in Pig's router was painful and I'm so thankful that we've moved past that and a huge part of why isn't just remix but as react router in the patterns that it encouraged which is why it's interesting to see it die which is again the thing we're here to talk about today next has since moved on to a new generation of tools they're still based on react but they're also heavy on server components and using the canary like the latest latest of react they're still technically on webpack but they moved the compilation to swc already and in the future they're hoping to go even further with the turbo pack stuff I just showed serverside props is As Dead As it should be finally took way too long and the pages router worked wasn't great and the new file routing stuff that they've done is uh significantly less painful and I've had a much better time with app router even outside of the data loading stuff that said server components are so much better a pattern for data loading that it makes remix feel as outdated as remix made next feel at the time and such there's a good bit of catching up to do and that's why the changes that they just announced are so interesting since this all runs on the server the server is able to know a lot more it knows what data you need for a page it knows what JavaScript you need for a page it knows what pages are accessible to you at any given time and by using that data it can do a lot where if you're still using an old school webpack project and you have just traditional react router pre-loading will never be as smart as it is in something like this where I can know so much more info about every route from every route so yeah if they want to go out of their way to rethink and optimize as they now are built on top of V which gives them a much better platform to fix these problems I think it's a good decision and I'm curious to see where they go with it our goal is to bring the community we've supported for the last 10 years a clear incremental path to the future of react which includes a lot of server and build stuff we're not trying to force you into the features just putting it on the menu if you think it will benefit you this is an important piece here it's nice that as much as I in the the remix team disagree and like the next in the remix teams disagree that we do all agree for react to keep evolving it needs to be on the server it's so important that react and react developers understand how servers benefit their applications in the way that they work and with remix going towards the absorption of react router this becomes much more viable for a lot of people I could actually see a path for a gigantic codebase like twitch to theoretically start moving this way now where before that was not even a possible thought and I am thankful for people like Ryan and for the remix team for thinking about these issues and making sure people who have built heavily in deeply like I would throw a lot of money on it that of the 10 biggest react code bases in the world all 10 of them are using react router like almost without question so giving those people a path off that's huge because a site like twitch a site like Netflix those sites should be server rendered some amount and with server rendering becoming the default the thing that we once knew as react router I think it's fair to say it's finally dead thank you guys as always this has been a fun one until next time peace nerds




## The End Of StackOverflow - 20240510
stack Overflow has been a staple of the development Community for as long as I've been programming and chances are as long as you've been programming too stack Overflow has been the place we go to for answers to problems but recently that has changed there's been a massive decrease in traffic going to stack Overflow since a specific product was released you're probably familiar with it chat jity or as the normal of us like to call it chat GPT by open AI chat GPT made it way easier to find solutions to problems but the chaos to get there and the way they trained it and all these other things are controversial at best once you get into the world of hallucinations they're dtive at worst seems like stack Overflow saw the writing on the wall here and rather than just let the death happen they're going to try and fight back and they're doing such in a very interesting way a way that I happen to see on Twitter here A partnership I certainly did not expect we're thrilled to announce we're partnering with open AI to bring best-in-class technical knowledge and the world's most popular llm models for AI development together this groundbreaking partnership with open AI will drive our mission to empower the world to develop technology through our Collective knowledge o boy we got read this and then I got to drop some spicy takes because I have feelings about this as I'm sure youall guessed you're here after all Zack overflow and open AI partner to strengthen the world's most popular llms either calling it the world's most popular llm instead of the best says a lot it's interesting that it's a New York and San Francisco joint announcement because of the different teams in different places SE orful and open AI today announced a new API partnership that will Empower developers with the collective strengths of the world's leading knowledge platform for highly technical content with the world's most popular LM models for AI development interesting interesting piece here is that it's an API partnership very very interesting open Ai and Sack overflow are coming together via overflow API access to provide open AI users and customers with the accurate and vetted data foundations that AI tools need to quickly find a solution to a problem so that technologists can stay focused on priority tasks open AI will also surf as validated technical Knowledge from stack Overflow directly into chat GPT giving users easy access to trusted attributed accurate and highly technical knowledge and code backed by the millions of developers that have contributed to the stack Overflow platform for 15 years they forget a space there what's with these big announcements and the absolute chaos with the copy like what at least we know it wasn't AI generated because an AI wouldn't make that mistake Zing anyways open AI will utilize stack overflows overflow API product and collaborate with stack Overflow to improve model performance for developers who use their products this integration will help open AI improve its AI models using enhanced content and feedback from the stack Overflow community and provide attribution to the stack overflow Community within chat GPT to Foster deeper engagement with content this is why they're doing it the attribution if you've ever searched for something that's a little more modern than what chat gbt has in their model it goes and it does a Bing search let's give a quick example of um or what team has one the most Super Bowls this one it has within its knowledge model so they can calculate this by looking at the existing knowledge it has in calculating the Pittsburgh Steelers are the ones that have won the most but we do something more specific like who's the most recent football player to be transferred to the Patriots now it's going to search the web and it does this by searching through Bing usually they credit Bing directly but for once they didn't this whole search system though it's going through Bing to do it they'll sometimes credit it directly there sometimes they won't the core Point here the important piece is that they're searching the internet if it's data that doesn't exist in their existing model so they already are doing this they don't include all of stack Overflow in their model so if you ask at a programming question that might exist ex right now on top of Stack overflows data they can check that first before generating an incorrect answer these things make it much less likely that hallucinations occur because they're not going to hallucinate the data they don't have they're going to go try and find it and if the data exists awesome good time if the data doesn't hallucination time anyways the other point of this collaboration stack overflow will utilize the open AI models as part of their development of overflow Ai and will work with open AI to leverage insights from internal testing to maximize the performance of open AI models open ai's partnership with stack overflow will help further Drive its mission to empower the world to develop Technologies through Collective knowledge a stack overflow will be able to create better products that benefit the stack exchange community's health growth and engagement there's a lot of words for saying that our AI sucked and using open AI is going to make our AI better learn from as many languages cultures subjects and industries as possible to ensure that our models can serve everyone the developer Community is particularly important to the both of us our deep Partnerships with stack overflow will help us enhance the user and developer experience on both our platforms said Brad light capap the CEO of open AI the number of votes people actually participating is going down a ton posts are going down quite a bit too like these numbers are scary it's no secret that stack Overflow is a corpse walking at this point we're just waiting till it dies so this partnership obviously makes a bunch of sense the time for Theos spicy takes I have two of them the first one I want to drop I'm actually stealing from our friend rise here who if you're not already familiar is the creator of answer overflow which is a way to take things being handled in Discord like questions and answers and put them on the web for anyone to see so they can be search indexed Etc there's a lot of reasons that this makes more sense than stack Overflow I could say them myself or I could grab his I'm biased but it really seems like Discord is the end of stack Overflow the problem with stack Overflow is that you don't get to have a good overview of your community it's all scattered about the community effect of Discord is really powerful very much agree as well as the back and forth nature being live is and a more friendly to others participating experience I think Discord absolutely was the start of the downfall here and it makes a lot of sense that chat GPT has just accelerated it massively my other spicy take is a little more existential because I don't just think that this is stack Overflow that matters I think this has existential risk to the entire internet and all of information I know crazy reach hear me out I drew this diagram as soon as the news came up because I felt strongly open AI got good by taking data from all sorts of different places stack Overflow Reddit news sites Twitter Etc and then training their model on that data all of the data from those places had existing systems for ranking and validating trust if something's being posted on a news site chances are it's accurate if something's being posted on Reddit chances are it's a human not a bot if something has a lot of upvotes chances are it's good not bad as AI starts to be used to create this content and flood these places as we get more news articles being generated by chat GPT as we get more answers on stack Overflow being generated by open AI models as these sources stop being sources of human validated and curated information and they start being a Dumping Ground for chat GPT responses what do we train on this is the existential failure that I think we're running into really really quickly this is reminiscent of Kesler syndrome if you're not familiar it's the scenario it's a theoretical scenario but very potentially real of a certain level of junk being outside of our atmosphere in orbit around Earth that even at tiny sizes is moving so fast that if we try to shoot a rocket off Earth some garbage is going to fly straight through it and destroy the thing there is an existential threat to our ability to travel in space where if we have too much garbage surrounding our planet we can no longer leave Earth this is a very real existential problem that we worry about a bunch in the space world and we're about to do the same thing to the internet we're going to flood the internet with so much junk that we can't really do anything about that we no longer have the data that we need to train better models by going to space we create trash that makes it harder to go to space by creating AI we're creating trash that makes makes it harder to build better AI it feels weirdly similar to me and I'm very stressed that we're going in that direction right now it's possible we're going to have like an Epoch date for when AI was introduced where all content before it was probably human generated and all content after it is potentially if not likely to be AI generated it there's a potential massive mess here about to happen and there's no way for us to really fingerprint the data that chat gbt generates we don't know what came from the AI versus came from a human we don't even know which humans the AI is sourcing most of the time this is part of why this change is good as I showed before with chat GPT it's sourcing real places to get this data is a lot better than hallucinating it makes it easier for us to go back and see where these answers came from and stack Overflow leaning in this Direction with them as well is nice but it's just one step and the existential risk is still very much here that this could kill trusted new sources and a hallucination could permeate to the point where we don't know which information we can trust this is already sewing distrust all over the world this is just making it possibly go further this might also kill the possibility of something like a new programming language from being able to exist because if your programming language only has questions and answers that are answered after the point of AI takeover AI might hallucinate a bunch of things about your language that aren't there and make it way harder to adopt document teach and learn these new languages there are all sorts of things that this creates an existential threat to and I don't think we talk about this part enough as great as AI tools and Technologies are and as much as I use and recommend and genuinely enjoy them theidea aidea of the cyclic feeding in the AI into the places we're training just diluting the entire internet and all of information is a very real problem that I'm scared of and I'm curious if you are too let me know in the comments am I overreacting or is this a real existential threat to information as a whole let me know and until next time peace nerds




## The Fake Tech Influencer Drama - 20231201
apparently it's challenging to book good speakers for a conference it's so challenging that a recent conference host actually made up a fake persona and catfished a bunch of people into thinking he was a woman in Tech just so he could put himself on the roster for this conference and look like there was actually a woman speaking at it God I why is Tech like this we have to have a serious talk guys let's take a look at this drama what's going on and what we can do to be a little bit better as a field so first let's start with the source this post came from George who's well known for the atic engineer book he's a really good resource he's really really deep in the world of tech does conferences does a lot of these things and when he's invited to a conference he looks into it a bit and when he was invited to the specific conference he was a little sketched out so he did a bunch of deep research and the result was terrifying I want to EMP I've never seen anything like this before in any field and I can't believe this is real so imagine a Tech conference having no cfp as they reach out to speakers directly they successfully attract some of the most heavy-hitting men in Tech in three women speakers now imagine to my surprise two of those women are are fake profiles they do not exist I contacted speakers I know about this they had no idea one of the fake woman profiles is supposedly a core ethereum contributor and a staff engineer at coinbase no such contributor and no one has heard of her at coinbase now or before why do this sad to say but going forward if you're invited to speak at a lesser known conference do your diligence if others listed speak actually exist this is a paid online conference large numbers of paid attendees workshops sold out what a mess just to be clear this is about the organizer creating fake profiles which conference well we're boo staff engineer of coinbase and ethereum core contributor is a speaker she doesn't exist except as a listed speaker in a prominent online conference so this person does not exist you can kind of tell like that's an AI generated face it is or another Java conference with the exact same organizer where Microsoft MVP and WhatsApp senior engineer Alina is a featured speaker would you know that there is no such Microsoft MVP and meta employee speakers listed on these conferences had no idea when I talked with them this govern doesn't have a call for proposal or I don't know if it's meant to be papers but cfp is the process in which somebody applies for an idea for a talk at a conference to see if they get in or not but they follow the Hollywood principle which kind of sounds made up but it is a thing where you don't call we call you but yeah but then they're doing all of this crazy fake stuff for women speakers just to look like they have woman speaking at their conference if you bought take us to Dev eternity on the 7th or the 8th of December you've been duped with fake speakers who are still on the website a madeup profile AI image no such staff at coinbase so don't go to De eternity the website had a public GitHub repo where you could see the full edit history that someone found and pointed to me you can see how fake Anna was added 10 months ago or how after being called out for what it is the organizer removed fake women speaker profiles the organizer responded claiming he had tried so hard to get women speakers but it's too hard for a paid conference with these huge prices meanwhile others just invite a variety of people including so many women they exist if you actually care we're going to talk about that in a little bit this is from she networks who is one of many phenomenal women in Tech digging into it further and discovering that this fake profile for coding unicorn is actually by Edward he was the first person followed on the account and more importantly when they looked into the screenshots they found multiple that actually specified his username so this is from an IG Post in 2018 so you can see in the top left here/ user Edward posted on this coding unicorn account so this is clearly his profile his account he's pretending to be a woman in Tech and this isn't a small account either it has like 100,000 followers insane it's very clear this is a fake profile that he made to pretend to be a woman and get all of the clout from that on the internet which is disgusting in and of itself but then to book these people as fake speakers for his conferences and to be getting away with this since late 2019 that's insane he's probably not the only person doing this either so now we have to to deal with this as an industry I can't believe this I actually can't believe this and as somebody who gets invited to speak out a lot of things this is a whole new world I have to worry about and yeah before we go into what I want to do to work on this I want to talk about somebody from the far past of tech that anybody who knows me at all knows I detest Uncle Bob is a Scourge to software and somehow managed to give the worst possible take about this I cannot believe that first off he showed up in this drama but more importantly that he could have takes as bad as he did I do not know the facts in particular I do not know the motivations and intent of either the accused or the accuser so to be clear Uncle Bob has been booked for a lot of these conf es that's why he's in defense cuz he doesn't want to admit he went to a conference that was a scam but he says the proper way to resolve this would have been to privately contact the accused yeah dming a fraud to say hey I think you might be fraudulent I'm sure that's going to go great I'm sure that's going to help the industry move forward if you privately address somebody massively scamming the industry you're being so stupid here Bob and you get called out for it what accuser I stated facts that that are there for anyone to validate confirmed speakers at Dev eternity 2122 and 2023 as well as JD conon 2024 do not exist there were and are no such engineers at coinbase or meta I shared this fact and said no conference should list fake speakers huge shout out to George for handling this as maturely as he did I would have been such an in these replies like I'm being now because holy we need to stop listening to Bob there was another based Bob take later on this is just George being funny this is what I was looking for but Ango Bob saying that this smells like cancel culture what are you kidding like oh my God someone just sent me a link with the facts in quotes thank you but I have a question do you believe that links to things on the internet are always true impartial in context incomplete or do you agree with me that skepticism is generally warranted are you kidding skepticism and denialism are different things come on Bob yeah like clean code was bad enough and he's somehow one-upping it I cannot believe that this dude continues to do this do I want to find that one based clean code take this is one of my favorite tweet ever Uncle Bob's clean code is the Drunken white elements of style of software Dev the less you understand the craft the more helpful it seems once you understand the principles you can clearly see it is toxic brain poison that can take decades to unlearn and that's what Bob is he is like the representation of your brain melting out of your ears as an engineer ah okay we're not talking about Bob anymore I I'm done with him if you want to be on his side in this cool you're stupid anyways what I want to talk about are the awesome woman in engineering that should be getting the opportunities that this is generating fake women to take cuz there are so many incredibly talented women in this field I put up this tweet yesterday because I really wanted to flip this this drama was becoming a bit of a Pyon and I wanted to flip it because I saw an opportunity to make this positive this myth that it's hard to find good women in engineering to speak at conferences has been in the industry forever and I just don't believe it there are so many talented women I work with all of the time and I wanted to highlight them a bit but I didn't want to just list a bunch of my friends in my replies so instead I asked the community to do it and the result has been incredible first off this is awesome open source repo that just linked women Tech speakers and organizers the fempire this is a list of people that you can probably book for conferences all with the right contact info and things you need to reach out to them as well as the things they can talk about this is a great resource you can contribute to it a couple PRS open people have been contributing to this actively you see 5 hours ago it was getting merges this is one of many resources to actually find women that you can book at your events on top of that if we scroll through the things that people have replied there are so many talented people getting called out from Shawn day from Netflix who I've been lucky enough to speak at conferences with she gave some of my favorite presentations at the last few react conferences I've been to absolutely killer speaker and engineer we got Sarah who is an absolute Legend from Google directing engineering for web IOS and Android at Google she's incredibly talented if you have the chance to hear her speak you absolutely should we have people like Emily who I should be following I can't believe I wasn't following her already the devops for dummy series is very very important and she helped Chang the current trends of Deval there are so many of these incredibly talented people I could sit here forever going through them Name by name I want to call it Randall quick because she wrote hack the tech interview which is a classic book that a lot of us have read to get our first tech jobs and her sister Madison is also a content creator YouTuber and person in the space there are so many incredibly talented women in engineering and as soon as I made this tweet it was apparent others agreed yeah 321 replies that's a lot of really talented people you can reach out to for your conference now and I'm tired of the excuses I tired of the cheats and the hacks around these things there are so many talented people in this field that we can pull in to do awesome and I hope that these resources make it a little easier for anyone here who is booking a conference or even just speaking at one and wants to help them find cool talented people to speak do your due diligence there are incredible people in the field you can find and talk to and I highly recommend putting the extra time in and if you don't know any of these people yet that's not something to be ashamed of that happens but you should take this opportunity to meet more people to broaden the scope of your own understanding of who is making the code that we work with every day and maybe just maybe make these conferences a little bit more diverse I know conferences like render ATL go really out of their way to have a diverse set of people I actually turn down the opportunity to speak at render ATL because I didn't want to be just another white dude on the stage and I wanted them to continue channeling the very different diverse culture that they do I I can't believe this keeps happening I can't believe somebody actually made a fake woman just to get free clout yeah I I really don't have words for this one i' I've never seen something like this and it's incredibly sad to see stand up for what's right we can do so much better as a field don't let this happen again and call it out if you see it we deserve better keep being better whatever YouTube put on the side I'm sure it's good give that a watch I guess good seeing youall as always and I'll see you in the next one peace nerds




## The Fastest SQL Database Ever Made - 20250311
believe it or not this chart is real these are the actual P99 numbers for T3 chat we might not be a huge app but there's a lot of data be flowing through it as users sync their entire chat histories how do we get the performance so much better that's what we're here to talk about today there's a new database product by Planet scale that fundamentally changes what you should expect from SQL not only is this faster than Planet skill used to be which is kind of crazy by itself it's faster than anything else you can do on AWS even Aurora as crazy as it might sound this is the first SQL database you can run yourself on AWS that is faster than the best-in-class options Amazon offers the things they did to make that happen are kind of crazy and I'm so lucky I got Early Access got to talk with the team I'm super close with Sam and there's a lot to dive into here they aren't paying me though in fact it's quite expensive so if we want to justify the $600 a month that we have to pay for this DB we have to pay these bills somehow so quick word from today's sponsor and we'll be right back hiring nowadays kind of sucks the amount of bad resumes coming through generated by AI makes it imposs possible to filter through and find good candidates much less great ones if you want to hire great engineers and you don't want to waste all your time doing the hiring process you're kind of screwed at least unless using today's sponsor g2i these guys have solved the problem and I didn't think hiring was solvable but with their platform it is this isn't just some product you use to comb through resumes this is a curated group of incredibly talented Engineers that they have went through all of the process with to vet already they're giving you access to Via their video-based platform where you can ask these Engineers questions via text and get back a video interview response they've already vetted these people and when I say they vetted these people I don't mean that they like passed a junior interview if you're looking for juniors you should go somewhere else if you want really dedicated technical talented people like you know the ones who work at places like webflow one password and meta companies that they've helped hire for this is the place to be they have over 8,000 Engineers it's a pool of people they took 8 years to craft and they've all passed their strict techn interviews I haven't done them myself yet so I can't say how crazy the process is but uh if you guys want me to do that let me know they say 7 days from interview to PR is a goal I honestly think is more of a humble brag because I've seen them pull this off already and it's unbelievable the months I've spent hiring in the past make this feel impossible but they did it parttime full-time whatever else you need they almost certainly have you covered as long as you're in one of the regions that they support us Canada Latin America or Europe covers most things let's be real here and despite having this awesome video platform they're not just selling that they really do start to feel like a part of your team you set up a shared slack Channel with them they get super involved with your process helping you with passing candidates back and forth and talking with you every step along the way until you have a great engineer embedded in your team doing well or maybe even a whole team of them if you use them for enough hiring and unlike most Engineers they're actually down to do a weekly standup with you if you want if you're trying to hire great Engineers give G2 a shot check them out now at soy of. link gtii before we go too much further I want to show that this performance has held the change was done on February 28th and sadly the history here doesn't go back that far so I can't show you that it was consistently that 300 millisecond range but it was and our P99 has dropped to 45 milliseconds and our p999 has dropped to well under 100 on average every once in a while we get a slight Spike up to like 300ish but they're rare and that means like just a small like single digit number of queries are hitting those numbers previously our p999 was like multiple seconds and we haven't made any changes to the querying characteristics normally you'd see these performance wins by adding indexes changing how your schema works or even just fundamentally changing the types of queries you're doing maybe you put a cash in front so you're not hitting the DB as much none of that is going on here no changes were necessary on our end to take advantage of this new way of doing things because it's not a new way in the traditional sense nothing changed for us the hardware is what changed wait isn't this on AWS though if it's not the latency is going to be terrible this is on WS still so what's going on how is it possible that this is still on AWS but it's getting better performance than almost anything else can it's honestly kind of nuts that aws's best options that cost thousands of dollars a month can have their QPS just plummet the way that they do and that a third part is able to get this fast and often even faster if you look at some of these numbers it's crazy how much lower the latency is for what planet scale is offering than anything else but still aw and it's faster it's got to be more expensive right nope it's actually quite a bit cheaper 2 to 6X cheaper so how what are they doing here what's the Magic The Magic is something that you Gamers might be familiar with the magic is they built their own machines using nvme SSD drives the big thing that changed here is IO the speed between the compute that's actually handling your queries and the storage behind that compute that is allowing this all to interface correctly the way that compute works on AWS is interesting any given time a node that is running could die and be replaced thankfully in our modern world of compute we don't expect to have a hard drive we're just writing to and from on our VMS anymore we usually put our data somewhere else like a database or S3 or something else for a database to work on AWS it has to work the same way that compute layer that does the work is usually separate from the storage because the storage in that whole compute unit could die at any point and you don't want to lose data as a result basically every database on AWS is writing the data to something else some form of network storage that it has to go over the network for those Network speeds are insane because these machines will be like next to each other in a server Warehouse with really really fast lines connecting them but it's not faster than a PCI Lane the fact that they're using the fastest possible storage and vme drives to directly interface with your compute allows for performance characteristics that didn't seem possible before and if you think this is a cool thing for small companies yeah sure we're benefiting from it a lot with D3 chat but all of cash app has been using this Tech now for three months it's really good this isn't just something for small startups gigantic companies like intercom and Depot and block are all making this move I'm lucky that I got to early as well now I'm going to explain why for some of you this makes a lot of sense and again to be very clear if the idea of spending $600 a month on your database is terrifying you this product isn't for you but that doesn't mean we don't have lessons we can learn from it because the infrastructure and the things we see from it as a result are incredible if we have Aurora with mySQL on AWS which is the like production ready recommended happy path expensive correct solution to doing databases on AWS this Aurora box has multiple Parts it's more of a Vibe than it is a box so I'm going to put the text above it and we're going to dot this guy in here we have a compute node we actually have quite a few we'll call it CPU node the CPU node that we likely have multiple of sits on the edge of this box waiting for information to come in waiting for requests waiting for work to do these nodes are where a user's request comes in and also obviously where that request comes out but these don't hold data these are treated as ephemeral because at any given time one could disappear so we need to make sure that data is being stored safely which is why Aurora has a network store that all of these nodes are hitting in order to actually store the data there's crazy work going on here to make sure things don't like override each other that the consistency of queries all that stuff is handled properly but the key distinction that you need to know is that there is a network gap between the node taking your request and handling the query and the storage layer that is actually holding the data that we're trying to get to or write to in many cases this is what's so different with the planet scale metal model instead of the CPU node having to go over the network for storage each of these nodes has its own storage so now we don't even really need that dotted box on the outside because each of these is its own node that handles everything fine and when a request comes in it will write the data read the data whatever it needs to and handle replication to all of the other nodes behind the scenes for you so instead of the source of Truth being the network storage that's separated the source of Truth is whatever just had this right happen this seems super dangerous right like what happened if one of these nodes collapses at the wrong time or we have data that hasn't been replicated yet or all these weird painful edge cases I actually like the way Sam put this when I talked with him so I'm just going to basically quote him verbatim this is all part of what vess does the words of Sam vess was built in the most hostile possible environment heard if you're not familiar with vest it's a way of deploying managing scaling sharding and doing all the annoying things you have to do for an at scale mySQL database it was built originally at YouTube in order to help their databases scale the team that made it open sourced it and then a bunch of them went to GitHub did basically the exact same thing and realized oh a lot of companies need this they broke off and they made Planet scale and that is why it is as performant as it is that's why they're so focused on Enterprise cases they built it to scale and now tons of companies from slack to cash app are relying on their Tech relying on vitess in order to make their MySQL databases operate at in same levels of scale the test was built a little bit before kubernetes and its Tech stack is relatively similar since it was built before kubernetes it was built on top of a thing called herd which is like kubernetes if it was way worse and less reliable because of that the expectation that any one of these nodes would exist at any given time was near zero and vess was built to handle this to allow nodes to replicate and share data consistently enough that no one node dying will cause you to lose data the results are nuts it's truly incredible what type of performance and resilience you get when using Vitas properly it's not fun to set up you can do it yourself but Planet scale is the solution for all of this you can see that when you hop into any Planet scale database if I go to my dashboard here you can see that we have the VT Gates which are the place that connections actually come through when a user is getting data or one of our servers is getting information we have our primary cluster here and this has two replicas that any given time can be fallen back to if something goes wrong with this and every read and write is being pumped through our primary down to these other boxes it's nuts a fun fact Sam shared with me when we were chatting is that all of the nodes in your database on planet scale are less than 28 days old because they're so consistently cycling and replacing them because it doesn't matter they're infrastructure is built to handle all of this and that's why they had the realization of oh we don't really need to care about the storage being separate then do we because they had this realization they wanted to take advantage of it since any given storage node doesn't matter as much because they're replicating between each other we don't have to have a separated data layer we can just store it on the device skip the whole network hop skip all of the weird stuff there and just write at the speed that your CPU can write IO speeds are a very real limitation at certain levels of scale and data transfer doesn't matter how fast your CPU is if you're bottlenecked on the network now it is impossible to be bottlenecked on the network as they said this is unlimited iops nuts and the numbers speak for themselves I showed you the crazy cut we saw but we weren't on one of these expensive databases before we were just using the cheaper tier of Planet scale we saw an insane jump but that makes sense we're paying almost 10x more for idb how does this compare to existing Production Solutions like what Google has with Cloud SQL and what AWS has with Aurora pretty insanely well as we'll see these tests are with a box that has four vcpus and 32 gigs of memory they have a database that has 500 gigs of data which is pretty nuts so we are syncing a ton of stuff with T3 chat like all of your message history data for the Live Sync is all stored here and it's still only 26 gigs of data still a lot but like it's fine 500 gigs is a lot of data and as we see here performance is relatively comparable minus these terrible spikes that the proxied Aurora instance hits I'm not quite sure what's causing those but I won't pretend that I can perfectly explain why the proxy causes these random dips every 75ish seconds it's almost like perfectly to a t but it's very real and I've seen this myself when we're dealing with large numbers of connections and data requests going through a proxy layer those layers tend to be latent and cause problems they were willing to spike the CPU up on it but Amazon doesn't even give them the option to which is interesting when we look at the P99 latency though that's when we really start to see a gap it's as much as 2x faster than the non-proxy layer once you have a large number of connections so you have 100 connections on each it's almost two with the proxy it helps but you still get those crazy spikes here and there if we lower this to the 50 connections you'll see the Gap closes a bit but it's still a lot larger than we'd want to see for a database that costs $6,500 a month yeah Planet scales alternative here 400 bucks a month this is actually a value as big as these numbers sound and some of these QPS hits they're taking are insane CU again when it hits those weird latent spikes through that proxy the throughput plumet and you end up with numbers that are insane for those like queries like here we go from a 700 millisecond P99 up to 2400 milliseconds that's insane it's like a 3X plus difference there oh and by the way this configuration was different $122,000 a month versus 3K you guys know me whenever I have the opportunity to dunk on Google a little bit I'm going to take it and Google cloud is a mess their SQL product does actually seem pretty good for enterprise sized stuff but the spikiness here is a little scary and as we go to the comparison you'll see just how bad it gets see how spiky the performan is on Google you you have drops here down to like nearly zero queries per second I don't even want to see the latency charts for that they're going to scare me that's that already is terrifying and if we bump this to that size you still get like the occasional drop here curious what that was for the 200 under connection test but the amount of spikiness here is terrifying like you never know at any given time when you fire a query is it going to take no time at all or is it going to take seconds when you have that level of spikiness and it starts fine too it just takes two to 300 seconds and then it becomes this bad and as they said it just doesn't recover they call out that you could tune my SQL to figure this out like in the query side in your layer as the developer but they're just using the default configuration here and this is what we're seeing which is very very bad to be fair though Google is cheaper if you don't have as much storage but once you have the same amount of storage becomes more expensive price is a lot fairer though so I see why people like Google if the reason was price and theoretical performance Cloud SQL does actually sound like a decent option here but realistically those crazy latency spikes are not something you would want to tolerate at a database of this tier and Planet scale is now cheap enough for this type of thing it's pretty hard to justify anything else yeah when you at all of the numbers combined here the only thing that is really consistent is non proxied Aurora and the new planet scale metal stuff everything else is a bit of a mess once you add the proxy layer you end up with these terrible spikes and Google's just kind of a joke if we look here at the P99 times even comparing Aurora here Planet scale maintains much more consistent latency at least the throughput can be handled by Aurora there but the latency is a big gap if you look at the proxied version which remember Planet skills is effectively proxied through their VT gate so this is a more fair comparison by what they do yeah this is a really big change for how you make decisions on your database previously you kind of had to pick between the DX of a product like Planet scale or the performance of a product like Aurora because you couldn't be faster than AWS on their own infra but because Planet scale was so heavy on this vest flow they were able to do something better than what Amazon can do in the only way they'd be able to compete would be leaning really heavily into this vest stuff spinning up new hardware and rethinking how all of that works together but I don't know if they're even going to bother because they're still going to make all their money from planet scale paying the fees and network costs and all of that this is the first time there is a better option on AWS than AWS previously you were making some level of compromise if you wanted a really performant database you wanted something that wasn't an official AWS offering now the compromise is AWS you have worst developer experience you don't have all the fancy stuff around branching roll backs automatic like dual rights I just did a DB migration earlier and it kept the old version of the database up for 30 minutes and wrote to both of them in case I needed to roll back awesome all of these types of things that are genuinely groundbreaking as a developer trying to ship at scale no longer require a performance hit or a cost increase now it is cheaper with better DX and it's faster and more reliable that's nuts I haven't seen anyone successfully do this the closest thing I can think think of is versel fluid compute where there are now theoretical ways they could have better performance characteristics and more importantly cheaper prices than what AWS offers I feel like we're entering a new era of these Cloud providers that aren't just AWS or Google the last era was the developer experience Wars where every company was trying to unscrew aw sdx and make something that was better and easier while taking advantage of all the power of AWS now I've gone a step further where some of these companies are actually building things that are better than what AWS offers but are still collocated so that your compute your servers your processing all of your other stuff can still be in the same warehouse and still have really really good performance it's kind of crazy to think that forcell and Planet scale are building many better aws's within AWS now but they are and the numbers speak for themselves here this is kind of insane I do love that they have the section by the way that is metal always better there are certain times where it won't be if you have a small enough amount of data that it's all equal to be stored in memory then you're going to get better performance on the solutions that are storing it in memory and not taking advantage of all this crazy new stuff and here we can see that the latency is slightly worse than it is on the proxied version but it also never has the spikes and it's still almost twice as good as what we would expect from Aurora without the proxies kind of crazy as they call out when iio isn't a bottleneck the benefits of unlimited iops effectively go away but if you're throttled on the data coming in and out if you're throttled on the storage at any point which is what's happening with a lot of these spikes this is an unbelievable product I am so happy that we have this early and as terrifying as that price is and as much as we definitely don't need to be spending 600 bucks a month on our DB the fact that it will scale effectively forever and the performance is so much better is just one of those edges that we get that makes our experience better for our users 600 bucks a month for data to sync faster and our users to have a better experience is a no-brainer decision for me and I'm so pumped we got to to try this out early and get some help from the planet scale guys in order to ship an unbelievably fast database let me know what you guys think and until next time peace narits




## The First Post-React Framework Just Launched - 20240525
solid start 1.0 the shape of Frameworks to come this is a pretty exciting release it's no secret that I've been a big fan of solid for a while especially Ryan carnado the creator of solid the team he's formed the things he's built the way he's pushed the ecosystem is is hard to put into words there probably isn't any other person in the space that knows other Frameworks as well as Ryan does he's been a phenomenal source of info not just of solid or signals or all the cool things happening there but of the ecosystem as a whole and I've learned so much from him I've had inedible conversations with him and as such I can't really have anything but excitement as I read this so no going in I'm a little biased CU I love solid I love Ryan this is a really exciting release I want to take time to go over it so without further Ado let's talk about solid start 1.0 my favorite JavaScript framework and my second most used there are some bold statements in here too by the way I I I pre-read but I pre-read old versions so I'm excited to see this one the role of server rendering in JavaScript is growing in pursuit of performance and optimization everything points to leveraging the server more it's also clear that it isn't getting any easier to get started with this technology people were having a hard enough time as it was with their web packing figs and now we need to do a lot more to play nicely on the server I just recorded a whole video about remix and react router where I talked a lot about the same stuff webpack was rough at the time webpack once you're also dealing with servers a lot rougher something needed to be done but it needed to be done right you're getting so good with the pros Ryan something easy enough that one could get started without much effort but not so opinionated that you're stuck on specific Technologies the solution needed to appeal to everyone and not fracture our growing ecosystem this is again one of those things that not many Frameworks get right and I think react as a whole has had a really good record with even when people upset with some of the new stuff the fact that react is so backwards compatible is an achievement and it seems like he's trying to go a similar Direction with solid which makes a lot of sense because the the ergonomics and even some of the mindset in solid definitely takes some meaningful inspiration from react fortunately V 2.0's release showed the way that this could be done and the rest was history or that's what I would like to say but the truth was there was still a lot more to figure out multiple rewrites two beta phases and a lot of learning but 3 years later we've reached our first major release this part's important too I don't think like like V doesn't just solve the problem as important and incredible as V is it at the time was just another bundler they slowly added features to make it easier to do server side and client side stuff but it was very very primitive and not very very clear how to use it there have been a lot of cool projects like Nitro if you're not already familiar with Nitro it is the next Generation server toolkit it's the set of tools to build server side stuff in V so if you're building your own equivalent of a next or remix or solid we finally are starting to get the tools built on top of the tools built on top of the tools necessary to do that right because V's built on top of rollup and Es build and now Nitro is built on top of V now we have a layer that makes sense to start building our own Frameworks on top of but getting there in the first place that's been rough and it's really cool to see things like Nitro as well as viny thank you for bringing that one up too viny the full stack JavaScript SDK to build full stack apps and Frameworks with your own opinions powered by V and Nitro okay so the layering is now es build and roll up with vit on top with Nitro on top and then viny as the top layer there so you can then build your framework on top chaos it's getting there a lot of progress has been made and solid has historically been one of the earliest consumers of these things it's Vinci cool it's spelled viny so it's called viny now sorry to the creators I I'm calling it how it's spelled yeah we get the idea though just having V kind of know what servers is was not what we needed we needed to to build tools on top first in order for things like solid start to be viable much less good maintainable and standards following So speaking of which what even is solid start solid start is a JavaScript framework designed to build solid JS applications and deploy them to a variety of providers this doesn't sound all that different from most other JS Frameworks but the devil is in the details there is some very interesting details we need to go over here too everything is alart solid start is designed first and foremost to be a starter this is a big difference from other Frameworks where like nextjs isn't designed to be a starter so much as a framework that includes everything you might need and makes it easy to add things on top the minimal starting point with something like next is pretty hefty the minimal starting point with solid start is very very small the basic setup without installing any libraries produces a hello world example that is only 5 kiloby of minifi JS and gep don't want to use additional libraries don't worry you don't have to to solid starts base does not lock you into any specific conventions adopting some of the ones we provide in solid start will often provide the best experience but it isn't mandatory to pay the price of features that you don't need and that you're not using I wish more Frameworks took this mindset it to be fair the ones that I recommend like next which we'll be saying a lot throughout this the bundle size is slowly crept up but we're still only in the like 200 kilobyte range so it's not the worst but it's still not the best and if you actually have a static page that doesn't need a router that doesn't need all of the like rout URL management server streaming stuff you're just writing a hello world it should be 5 kiloby of JavaScript the idea of a framework that scales up and down depending on how much or how little you use is something that we've talked about for a while with things like the magic promise of tree shaking that never really came true this is one of the few Frameworks that's built on top of that it's almost like Progressive enhancement but for not this magical imaginary idea of not writing JavaScript it's Progressive enhancement in the amount of JavaScript that is being included based on how much you are or aren't doing bring your own application router here's where things get even more interesting because almost every other one of these Frameworks is also a router nextjs is a router in fact the whole next 13 Fiasco was because of the introduction of app router next 13 isn't where things changed app router is where they changed you could have just kept using Pages router but the confusion of next being a router and a framework has resulted in people just not understanding and that blurriness has sucked even remix kind of just went through this where remix and react router were intermingled but the relationship was unclear so they sacrificed the remix brand temporarily in order to push things in the react router direction to make it clear the router is the core piece not in solid start you can bring your own router solid start does have file system routing it uses a similar convention to n where parameters are passed via an array syntax however we also use parentheses as a way to do more powerful things like route groups named index routes it is a way to break out of nesting basically whatever you put between the parentheses is removed from the matching but it still impacts the structure of your routes this is a cool pattern that's also in xjs where you can tell it like hey this is me grouping folders don't make this part of the route definition just let me put things here instead so you can have like SL dashboard and you can have three different sections like user profiles data and those three different groups don't affect the routing so they're all still on SL dashboard really nice pattern still feel like reading through the routes folder is not the most pleasant experience in any of these Frameworks I'll drop the hot take of spelt kit does this the best I obviously don't ship a whole lot of spelt so it's quite possible I'm just wrong about all of this and what the DX is like but one of the cool things they do in solid is all of the routing things have a plus in front in the name which might seem unnecessary and tedious but the very simple benefit of putting the Plus in front is that now these things will rise to the top in your uh file tree because they're sorted alphabetically so it's such a dumb hack but just putting the Plus in front means everything related to your routing will be at the top of the folder when you're looking at it in vs code or whatever editor you're using if it has a file tree and everything that isn't part of the routing is just right underneath it's a small thing but I like that a lot and I wish more things copied that that said this looks pretty familiar to me it's almost like a hybrid of Like Remix or n and nexj taking a lot of the best parts but I do miss the Plus in front the configuration that we get from the file system is then passed back to the application to be used in the router of your choice this is one of those I've never seen it before borderline groundbreaking things that's really exciting to me I know that Tanner is working on some similar stuff with tan stack router but the idea that the file router is just a way to get routes not a way to bundle your whole framework and application is really interesting because you can just import the file routes and make them part of your application this way this makes things like in incremental adoption actually viable this makes things like writing custom route behavior on top that makes certain things more Dynamic than a file router allows trivial this makes so many cool things possible that I haven't seen other Frameworks even really consider I've never even thought like what if I could import file router inside of my router what if I could just import this as a component and mount it how I want to for the way I want to build my app really cool stuff also XO has a router too and they've copied a lot of things that's a good point I should definitely talk about XO router more in the future this is really interesting though I want to dig into this here we're seeing the file routes get dumped inside of the solid router but you could use any router you wanted you could Fork solid router you could use any of the others that exist already you could build your own crazy patterns and solutions here the fact that the file router is just a component or the file the file routes are just a component is one of those like oh like mindblowing huh that's different moments for me so how do we configure the routes then our route export lets you define your custom route config we automatically lazy wrap the default exported component and we add it to your config under the component property so here we have the config which has an export coner route equals load void get story so this is getting the data or whatever else we want match filters ID this is for only allowing numbers for the ID and this satisfies route definition satisfies is like a thing framework authors can recommend is still really op I love this then we export the default function my route component now we have a configured route that has this particular match has a way to load data now we can call this wherever we want you can set your own types and use the router of your choice configured how you want in your projects so cool enough about the routing now I get to talk about everyone's favorite thing Progressive enhancement but it's again the solid way which isn't anything like the current solution it's not really traditional Progressive enhancement let's see what I mean by that the server enhances no rewrites here solid start was built as a single page app framework first every feature is designed to work with all the libraries you already use to do so required us to carefully consider how we add several only capabilities this is what led to us pioneering server functions in early 2022 a feature that has since made its way into several popular Frameworks I am curious what you have linked here yeah nextjs has server ACC mutations yep quick has server dollar sign yep solid was real early with this especially in the bling ERA Real throwback does anybody have the bling yeah TC bling for those who worked around when this happened so was a bit of a niche moment Tanner and Ryan and a few others were working on some Primitives in order to write a server function anywhere in your code and then a compiler would turn that into an endpoint and just replace it with a fetch so you could write server dollar sign do some serveron stuff here and then this function that you get as a result can be used in client code totally fine it's almost like inverse server components now that we know server components but at the time server components were still just barely a thought nobody was really using them yet and they wanted a better way to do async server side code inside of client code it's like embedded trpc where it's not from a different file being imported and using a bunch of typescript hacks just write it and the bundler handle it really cool stuff but it's since not the focus and I believe solid start as well as all these other Solutions have built their own things now instead but bling was the first attempt at trying to make a standard solution that everyone could adopt so they were very much first here it's cool to see everybody else copying but their new way of doing it is really cool as well because they did another one of those solid things that I haven't seen anybody else really take advantage of can you guys stop say it's almost directly inspired by Blitz it's not you guys just don't know how Blitz Works Blitz lets you define your like behaviors in other files and then you import them but like the blitz pipelines for data have to be somewhere else this blitz is much closer to trpc than it is to bling bling lets you inside of your client code WR server code different thing it's bling not Blitz nille said it in a stream H anyways I want to talk about aidis because there's another little thing solid does that I think is really really clever and I wish more framework Works did you might have noticed earlier if you're a react Dev that isn't familiar with solid that this code probably looks familiar this just looks like react code because nothing here would be valid in react and invalid in solid or vice versa the Syntax for managing your state in solid is different and the idea of what a component does is very different but the syntax and as such a lot of other things look almost directly the same the thing that's interesting here is that you're able to use a lot of the tooling that was built around react when you're using solid things like jsx and TSX compilers and pilers just work things like syntax highlighting and linting in your editor just work other Frameworks like Astro have had to build crazy things around like building prettier plugins to work with Astro syntax around building their own syntax highlighter so it works in your editor of choice solid gets to skip all of that because they take these things that are good enough from another ecosystem and then ride their coattails in order to build the thing they actually want to build which is a better framework this is where I think the server enhancement stuff and the server functions get really really interesting because the same way they were able to reuse jsx syntax to not have to reinvent all those things they're also reusing a syntax that's kind of new they're reusing you server by taking you server they're able to ride the cails of all the work going to make us server work in bundlers Frameworks ecosystems tooling and it's a pattern now us server isn't a thing that has to be just reacts thing and Ryan has done a great job here realizing that these Concepts can be taken and that these syntaxes can be taken and used in a different way but now you have all of the tooling the has already been built around it by adding you server to a function it is only executed on the server either being naturally called on the server or used as an RPC from the client server functions are transparent from a typescript perspective and they can fit into your existing apis like fetches and tanat query how cool is that though like how cool is that that you can just have a query function that is how you're getting in this case the data for posts and like a blog or something and then we just call you server here now the bundler knows this can only run on the server not the client so make sure this gets run on the server and if we call it the client then it gets RPC if we call it on the server it just runs we get the event if there's no user ID then we throw an error if there is a user ID then we grab all their posts and we return them and now we have this data in this query call that we can then use for things so cool it's really nice seeing people take advantage of this tooling not just as a like wow they have all of that it's easy if you're a framework author to be jealous that things like typescript support editor support all those things exist in other Frameworks and not yours and trying to catch up sucks solid doesn't want to innovate on those things they want to make a great performant framework and new way of building things so they ride those paths that already exist and build something new on top I love this because it normalizes these ideas when I was earlier in my web dev career and I first saw solid and I saw something that was so much faster than react but it looked like react oh so cool so cool it proved to me that like things like jsx aren't a react concept they're a development concept and that's what I see here too it's funny to think but the future of people understanding these Primitives like understanding you server that might not be something something the react team teaches it might be something the solid team teaches how crazy would it be if people finally understand that you server isn't for components because of Ryan not because of react anyways let's talk about why this is cool in This way everything works the way you'd expect on the server and the client during the initial SSR or even during future navigations whether you're fetching data or if you're doing mutations and even if you are purely doing client side rendering in the browser it still works our server functions support Advanced serialization for this like async iterables streams and Promises ensuring you build the apis you want this is also really cool part if you like return a promise here do you have to await the thing that you return what happens to it because effectively when this is rpcd this is returning Json Json can't have a promise Json is very primitive but if you have a smart bundler that effectively bundles the response and then a smart client that can parse it and do things with it you can send a thing that indicates to the client hey wait for this part it's going to come through this stream later which is a really powerful thing especially you don't have to think about it and it all just comes through in a type safe easy to integrate fashion the idea that you can kind of just return whatever here in the framework handles it for you that's really cool these are the types of things I like Frameworks doing for you we've used this capability to do things like single file mutations with solids router API which lets the server start fetching the data for the next page after an update and stream it back on the same response with the client handling the redirects between this the paralyzed local and cache patterns as well as solid's non-blocking async we've all about eliminated unnecessary waterfalls Ryan's been on the war against waterfalls for a while I largely agree it's a good effort I think server components make the waterfalls largely move to the server which reduces their cost significantly but if we can just get rid of them by having better data loading patterns obviously we should do that and as we see here things are significantly simpler when you have the server driving these things the client fires an action the server sends a request to invalidate the client then goes to fetch the new data and then it shows the new data and you have this whole time here where your state is wrong maybe you're showing a loading state or something like that but if you send something to the server it immediately responds saying hey new dat is coming thing that you had before is old now and then the client can just show something as the new data comes in without having to do the additional back and forths so much cooler onwards and upwards honestly there are too many features to talk about with solidar because your experience is exactly what you make of it client render mode server side rendering static site generation outof order streaming optimistic UI key based cach inv validation progressively enhanced forms API routes paralyzed nested route data fetching single file or single flight mutation Islands suspense transitions the list goes on if this list doesn't show you how big of a framework nerd Ryan is I don't know what will because yeah what other framework has an author that even knows what all of these are much less like can describe them in fact let's go through count all of these quick as a viewer as a person in chat and see how many of these you actually know the meaning of so client render one server rendering 2 static gen 3 4 5 6 7 8 9 10 11 12 13 Concepts in modern full stack web dev how many of these do you actually know the meaning of one that I know a lot of you guys don't know because it's funny enough largely a solve problem in our ecosystem now is out of order streaming it's crazy to think that we don't talk about this because it's such a goddamn Revolution like insanely so and just no one knows what it is or talks about it if you're curious about it let me know in the comments and maybe I'll do a video dedicated to out of order streaming and how well it has been solved over time this is a framework designed for Builders and people who have their own opinions maybe that's why I like it so you guys know somewhat opinionated just a little opinionated we're only beginning to tap into the potential here that's what we mean by the shape of Frameworks to come solid start won't be the last solid framework we're just getting started we've already seen people building meta Frameworks on top of it like create JD app and Media Kit create JD app is dope by the way JD is a wizard he created the original solid bindings for upload thing which was crazy cuz we just had react at the time and he just went out Rogue made it work in solid as well and our first two Frameworks were react through next in solid create JD app is similar to create 3 app but on the solid side uses trpc and a lot other cool things check it out if you're curious about the stuff as well as Media Kit which I don't know too much about honestly in set of utilities to use with your solid apps this is the right one right this is cool nice seeing people building lots of tooling around this stuff already because that's that's a huge signal of a healthy ecosystem really nice to see this stuff happening and for that we the solid core team are incredibly thankful thankful for all the contributors submitting issues in PRS thankful for open open source projects that make this technology possible like V viny and Nitro thankful for all the sponsors contributing funding like netfi Chrome and Jet brains most importantly we're thankful to all of you for embracing development in the open choosing better over convenient and sticking with us on the journey you inspire us to keep building the best Solutions we can and to continue to shape the future of webdev yes I wish more people would include this part at the end I think it does a great job not just of acknowledging the people who made this possible more importantly showing How Deeply the solid team understands and wants to be part of this ecosystem other Frameworks talk a lot more about themselves and most framework authors talk a lot more about what they're doing Ryan's the only creator that I know of that has a framework and spends more of his time talking about other Frameworks like watch Ryan streams if you don't by the way his channel is awesome it's getting more views but it's still super underrated he streams pretty much every Friday and goes a lot deeper on these things than I ever could really really cool person really cool framework super hyped on what he has here and honored to be mentioned at the bottom here as a thanks for reviewing the article and being whatever small part I could be this is a really really exciting framework and I couldn't be more hyped for the future of solid let me know what you think in the comments are you going to give solid a shot and if you do you going to do it through solid start let me know until next time peace nerds




## The First Real Webpack Alternative (Written in Rust!) - 20240702
RS pack 1.0 just dropped and I'll be honest I'm not dressed properly for the occasion so I need you guys to give me a second much better got my RS build shirt on for the occasion it's a bit big for me but I'm still very thankful to Zach who if you don't know him is the guy making all of this happen moved from working at Lululemon over to bite dance and Tik Tok so he could push bundlers forward way further than they've ever gone he wanted to work on giant Cod bases that needed the help he absolutely does and we met at render and he gave me the box that has the shirt that I'm wearing right now Zach's great definitely give him a follow one of the Legends actually working to make the infrastructure we use as developers better every day let's hop in see my little crab peeking out there I love that RS pack 1.0 Alpha the RS pack 1.0 is now available on npm before releasing the stable version we want to do 1 to two months of testing to improve the API stability and reliability of the version 1.0 release and to verify its impact on Downstream projects rsac 1.0 stable version is expected to be released this August this significant Milestone as it means that RS pack has implemented the major features and apis of webpack yes this is a rust rewrite of webpack which might sound familiar sure those of you all who are deep enough in either the next ecosystem or my channel are familiar with turbo pack turbo pack is being worked on by versell in the original creator of webpack to try and remake webpack in Rust so it doesn't suck as much and it's not as absurdly slow the speed that they've been aiming for with this is insane yeah Tobias the creator of webpack as he said it's time for a new beginning in compiler infrastructure for the entire web ecosystem yeah it's time I agree that said it has been time for a while and turbo pack was promised a long time ago and is still nowhere near 1.0 it somewhat recently became an option to use inev for nextjs but we should have been using it in prod for many more projects two plus years ago and it's excited as I am about what versel is doing here is just not moving fast enough and I'm honestly excited to see an alternative rust based webpack project that is actually close to shipping it is being used by many companies to ship their production bundles today cuz turbo pack might work for Dev soon but it's not going to be production ready for way longer and rs pack is going to be there in August so what do we actually have here to care about first off they finally enabled concatenating of modules by default during production builds which means that all the modules that your npm installing in your project will be bundled into a single vendor module kind of expected with these things but it's nice that like they actually have production building here apparently it's to merge multiple modules into a single function thereby reducing the overhead associated with parsing and executing JS code in the browser nice this also will reduce the size between 4 and 10% of the code you're shipping good stuff they added lightning support you're not familiar with lightning CSS it is a phenomenal CSS ecosystem it's the CSS bundler that introduces and implements all of the features that we expect from Modern CSS things like some of the crazy template stuff that people like to use all the SAS and less and things associated with those and it's also becoming the starting point for projects like tailwind and Tailwind V4 will be built entirely around lightning CSS which is awesome because lightning CSS is also built in Rust so it's really really fast we're getting to the point where a lot of our web tools are ready and working in production and are built in Rust which means our Dev ecosystem is going to be way faster to work in and it's actually kind of funny that our compilers are going to be faster than the rust compiler and we're using rust to get there because rust is very very slow for compilations but after years of effort we're finally catching up to where we were with build written in go by one dude 4 years ago that aside we're getting there and I'm really hyped to see it so having lightning support is dope lean core to ensure the long-term stability of RS Pac V1 we've removed some non-core features that were built into the RS Pac core before this allows the core to be lean and focused on providing common bundler features apparently they had s swc built in before for emotion style components and relay because they didn't have a way to do it with their bundler but they've removed it since you can still use it via an experimental plugin you'll notice like in other new bundlers you're never going to hear them mention things like Style components or relay or an old animation solution or style component solution like emotion these things aren't relevant to the people who are excitedly adopting all the new things because that's not what RS Pac is for it might be like oh my God another bundle or and like to be fair I tweeted earlier that I think I have bundler or fatigue because there is just so many now I just heard about Farm today too which I did not know about an extremely fast web build tool written in rest apparently it's even faster than ours pack but we're already going from 7 Seconds to 600 milliseconds I don't care about an additional Improvement honestly like I'm happy once we're under a second I care so much less that all said it seems like the goal of RS Pac isn't to be another faster bundler it's to be a well supported bundler that works with old and new projects and can be used alongside things like module Federation for big code bases full of new and old code and hundreds of developers contributing and that's what I've seen from the team so far RS Pac was initially created to solve performance problems encountered at bite dance if you're not familiar bite dance makes Tik Tok they have a massive code base many massive teams and they wanted to make sure that their giant apps could actually build well previously one of the core contributes RS pack the guy who does a lot of marketing and stuff Zach worked at Lululemon but he moved to bite dance so he could focus more on these large scale complex bundling problems production build times had grown to 10 minutes or even half an hour in some cases and cold start times could exceed several minutes I even had this on Twitch and our single giant code base for the website after experimenting with many bundlers and optimization ideas a common set of requirements emerged first they needed to get the dev mode startup performance to be great mpm runev is a command that developers May invoke many times per hour engineering productivity suffers if startup times exceed 10 to 15 seconds they also need a fast builds npm run build is used in their continuous integration and deployment pipelines and it directly impacts merging productivity and application delivery times this is a really underrated thing with build times if you deploy a change and it's broken if you have a system where you can roll back to the old version you don't have to build it again awesome good for you many people don't and if you don't when you roll back to the old version it's often by reverting a PR and now you have to rebuild the new state and if that takes 30 plus minutes that's 30 plus minutes that your site is broken then and shouldn't have been these things are alarmingly common and as silly as it is just cutting your deployment times down to be one to 2 minutes means that whole discipline of keeping build artifacts around matters significantly less because you can just recreate the artifact once you make the change to the code base this is so essential to doing things like quick bug fixes which is something that's really important to me if a user reports a bug it takes me 20 minutes to fix but then it takes 20 to 50 minutes to actually build and ship that sucks if it takes a minute then that user ends up having a better experience I feel much prouder of my work and that whole that whole flywheel just goes much better and as they said here those large apps like Zach was talking about took 20 to 30 minutes to run in these pipelines and the bundling time is often a major contributor they also want to make sure they had flexible configuration from experimenting with various popular bundlers we found that a one-size fits-all configuration encountered many problems when trying to accommodate for real world projects s i ALS add to this existing real world projects because if you have a giant old webpack build and you want to use something new good luck have fun A major advantage of webpack was its flexibility and its ease of accommodating customized requirements for each project this is also kind of its downfall because any two webpack based projects are going to have a very different time trying to move off it and this in turn May pose steep migration cost for legacy projects that are trying to migrate away from webpack absolutely cool he actually points that out there if you're trying to move off webpack you're up until now at least kind of that's why why turbo pack was started it's also why RS pack was started one more point they call out here is the production optimization capabilities all of the existing bundling Solutions also had various limitations when optimizing for a production environment such as insufficiently fine graen package splitting Etc God who in chat has had to do their own bundle splitting who's ever spent the time defining chunks by hand in the webpack config because I did and it sucked it sucked really hard and I haven't recovered yet still yeah I see ones in chat if you've had to do custom bundle splitting in your web package before not as many as I was expecting I'm relieved because it's a miserable thing and for those who have had to deal with it I am so sorry when does that become needed it becomes needed when you have a website that has a lot of different routes that have a lot of different JavaScript you don't want to load all of the JavaScript on every page so if we didn't have good bundle splitting on Twitch you'd have to load like 300 Megs probably of JS like unironically but every route has its own subset of the Js that is bundled for it through the custom bundle splitting that we would set up Rich Harris has made a bunch of tools for this thankfully and a deit for grabbing stuff from sub directories can work but honestly I found vit and other modern tools do a good enough job at doing that for you that most modern devs have never had to worry about it but God if you were in the OG webpack days on a big project dealing with that stuff was so miserable RS pack was an opportunity to rethink these optimizations from the ground up leveraging rust specific features such as multi-threading cuz threading and r is famous for being so easy right why is there no like low-level language that has good threading characteristics like the channel aums and go are rust's like colored functions and the way you deal with async and it is so miserable that like Tokyo has become a meme it's Tokyo is good but the fact that like it's necessary says so much to be fair we have effect in typescript so same difference but like the lack of good threading behaviors in these lowl languages is kind of terrifying and elixir and I guess gleam and other things built on earling are the only things that have good behaviors there the current state of RS Pac RS Pac has been under continuous development since April of 2022 and it was launched as open source back in March of 2023 RS Pac has finished implementing most important features of webpack and these features can meet the needs of most projects some bite dance internal projects have already achieved a 5 to 10 times Improvement moving from webpack to RS pack and there's still room for future optimizations this is the big thing though RS pack is compatible with webpack's configuration schema and its loader architecture so you can still use things like B loader less loader SAS loader view loader Etc this is massive this means that rsac can still use these old Legacy loaders built in JavaScript for the things that you don't want to move yet if you have code that relies on specific quirks and babble loader or you're insisting on continuing to use less without moving over to something like lightning that we mentioned before you can just use the old things which is huge currently RS pac's cash support is relatively simple and only supports memory level caching in the future they plan to bring stronger caching capabilities really exciting stuff in their future goals are really exciting as well they want to collaborate with Community Partners which is great they don't want this to just be a bite dance thing and it's honestly never felt like it I did not expect to see bite dance mentioned in this because it really isn't that tightly tied and it seems like Zach and crew's goals are quite Noble here they want to enhance the plugin capabilities as well obviously because webpack loaders are a bit rough and they want to make something better but I'm happy they're waiting to do this later cuz they were focused on compatibility first there's also the goal to continue to improve performance obviously the test Suite we'll just skip that so how do we compare with webpack the big differences that matter are that web packs in JavaScript this is in Rust so we have the efficiency of rust we have a highly parallelized architecture we have built-in implementations for essential bundling features we have optimized HMR as well this is a big one webpack had no real concept of HMR and people would build their own crazy things on top this is just built in now it's great I like that they're not going to pretend that V and building these things don't exist a lot of people when they're going after something that's old like webpack will just ignore the other stuff in the space they're doing the opposite they're calling these all out here they point out that V offers a great Dev experience but since it still relies on rollup which is an early webpack alternative built by Rich Harris still in JavaScript is still much better it doesn't have anywhere near as much config and it's way easier to set up and use well it also does really good built-in bundle splitting and stuff like that but it's still slower it's still JavaScript and as such the same trade-offs of webpack versus rollup apply here for example the flexibility of the optimization. split chunks feature I had so many problems trying to do manual chunk splitting in V to be fair I shouldn't have tried that was my mistake but that was one of the weirdest exper experiences I had trying to manually split chunks in roll up in V how do we compare to es build though es build achieves very good performance by implementing nearly all operations in goang except for a few JavaScript plugins however es build's feature set is not as complete as webpack for example with respect to JS hot module replacement and incremental compilation as well as the split chunk stuff that we were talking about before yeah es build's goal was to turn typescript files and modules and all of those things into smaller JavaScript files really quickly because Evan Wallace the guy who was the CTO of figma wanted things to be faster he did a great job the fact that he built es build as quickly as he did and we're still trying as an industry to catch up to it says so so so much but at least we're making progress here and what's cool with RS pack is it's getting similar performance while also having all of the features that we would expect from the webpack ecosystem better incremental compilation and things like that how about turbo pack turbo pack is implemented in Rust like RS pack but it also started over with a redesigned architecture and configuration it brings the benefits but it also presents a steeper migration cost for projects that rely on webpack and its exensive ecosystem it also doesn't work yet and it was nice of them to not mention that part here but yeah as mentioned before roll up still not very fast cuz it's JS based they didn't put roll down in here which if you're not familiar roll down is the attempt by The View and specifically the V Community to rewrite roll up in Rust the same way that turbo pack and rs pack are rewriting webpack in Rust roll down is rewriting roll up and rust see why I have bundler fatigue there's a lot going on here and it's not getting easier well let's let's try spinning something up using RS pack I'm actually curious pmpm create RS build at latest RS build test look at all these options I love this too biome is the initial recommendation if you don't know biome it was an attempt to rewrite es lint and prettier as a single all-in-one solution also in Rust it was originally Rome but that company failed and the open source Fork it was always open source some of the original contributors when it failed went and focused on this open source fork called biome that's actually improving way faster than Rome ever did pmpm install the one catch here that's important to note you might have noticed how much slower those downloads are since all of these things are now using rust they're all shipping binaries so instead of shipping a couple kilobytes to a megabyte or to ajs they're shipping like 20 megabyte binaries this is really funny people are going to start complaining about the size of their node modules growing massively and it's because JavaScript is so terrible it's actually because we're stuffing other languages binaries into our code bases now but that's in side a thing that we can make fun of another day because what I'm here to do is see what the experience is like working in these files don't forget to sub save that was instant that was actually like like not like close to that was legitimately instant so I'm saving right now does it show me in the terminal how fast it was yeah 0.02 seconds I didn't think the difference would be that notable that's kind of nuts okay you have my attention I know it's a trivial amount of code that I'm loading but I wanted to see like how this would feel if we were to move this to V which I don't feel like doing I promise you even though it's still fast it's quite a bit slower what I actually do want to see though is the production builds because that's where a lot of these other Frameworks fail yeah that's cracked like just do a quick comparison uh pnpm create V at latest pnpm install time pnpm build still pretty fast but in comparison less Le than half the time almost a third that's insane and that will scale massively as the code base gets way bigger too oh this is actually a really good thing I like they have this they have migration guides on how to move out of something like create react app to something like RS build this is a missing piece that a lot of things don't have anymore moving to like next from create react op is not easy there were docks a long time ago not the case anymore but when we go to this doc that's really cool this is like a detailed step by- step of all the things that you should do that's dope even if you're not moving to RS build I'm going to save this resource and potentially link it to people in the future that is so Handy by the way RS build is the RP RS pack powered build tool you can think of it as like the V to the es build and rollup it's the thing that does the actual building using the bundler RS pack this EOS system is actually a lot more mature than I expected this is so cool to see I'll admit I was a little skeptical going in but I'm going to give RS build Star as well because this appears to just work it appears there's a real path out of existing tools and I'm honestly hyped to see that this is a code base meant to stress test all these different bundlers to see how fast they can do things I'm thankful that like this community of people who are really deep in this space understand that we should all be using pnpm there was a window where a bunch of them were insisting that npm or yarn were fine and they're all over it I was one of them to be fair I was a hold out on npm but we're past that now we're in we're deep in the world of pnpm Bun's improving but I still kind of prefer pnpm just cuz the lock file is like a much better format and also it's a stupid thing but the lock files in pnpm diff really well so multiple people are changing package versions at the same time the diffs merge well so let's see how they actually recommend running this we can run a build with any one of these tools so we can start with the V one so I'm curious pnpm run build V I'll throw a Time on front not bad all things considered when you think about how large this code base is 2 seconds is not bad we compare that to webpack we might be waiting here for a bit we get a bunch of warnings I love the asset size limitations I get these in a couple of our projects that are on webpack mostly the upload thing code base funny that these happen everywhere now but if we compare that to build RS pack 1.3 seconds again compared to V which was quite fast here not quite as big of a difference still a difference but not as big there I was hoping this codebase would be a bit bigger and be a little worse to compile there's like a decent number of components here my computer's just too op yeah the numbers here are much more useful webpack's startup is 8 seconds the HMR is 300 milliseconds the HMR on webpack is approximately as slow as the entirety of startup for farm and it's about half the speed of RS pack startup these differences are nuts I'm a little surprised that HMR from rout is so much slower on RS pack than other Solutions but it's still cracked like all of these numbers are small enough that I don't care anymore it does look like Farm is winning and since they had this Benchmark for me to quickly grab they're winning in multiple ways now the state of these things is better than it's been ever I'm still a little burnt out by the number of these Solutions and it feels like we're all rewriting our past in Rust this time which isn't necessarily the right path forward but it does seem like were closer than ever I never would have guessed Tik Tok would be the ones to come in and save us from Turbo pack and versell but here we are I still am hopeful that vercell will get things together with turbo pack but if not there's an actual path forward now for people on these old webpack code bases once again huge shout out to Zach for building this and for the team working on it with him and for the confidence to come out with yet another bundler hopefully this one will stick the landing and maybe just maybe you can finally get me to talk about module Federation until next time peace




## The Font That I've Been Waiting For - 20231030
Marcel just dropped something I've been waiting for for years and they didn't even mention it at nexcom something I can guarantee y'all have seen dozens of times possibly even hundreds of times on this very Channel this is something I was lucky enough to get to use for a bit and I'm finally able to share it with you all what we're here to talk about today is Guist Guist is a font and it's a font you have seen on every single one of my thumbnails for over 5 months yes gist is the font I have been using for all of my content now for almost half a year and it is a great font that I'm so excited to share with y'all today so what makes this font special what even is it well let's take a look gist might look somewhat familiar and that's because it's very very inspired by enter had a couple specific design goals going in one was that they could use the same font for titles and big bold things on the tops of websites as well as for the core text that's a smaller font wi and a more reasonable font size inter's historically been great for anything title like and anything bold or strong once you get into smaller font based sizes with normal font weights or need something like mono inter stops being the best font Choice pretty quick and guys worked hard to solve that for versel and now they've opened it up for anyone to use under the open font license it's a really cool project that was a partnership between versel and basement studio and the result speaks for itself it looks beautiful they have nine font weights all of which behave very well and look great together as well as independently and a mono font that has the same nine weights which is really really handy if you're trying to make things stand out in your code examples it's really minimal it has some controversial choices like if we look at the lowercase y I can find it you'll see in the Y this one has an accent look at that this y you'll see there it's actually a little bit the guy there sticking out it's very different a little bit edgy but it looks really good at almost all font sizes I've been really impressed with how this font looks and all of my thumbnails I found it look great here you'll see what I was saying with the font weights where the weights aren't just the traditional expand and contrast they actually change the curves and the locations of a lot of the specific characteristics of the font as the weights change within it it looks great it really does yeah you can even type in here cool hello subscribers if you're not a subscriber feel free to hit the button subscriptions are free helps us out a ton anyways this is how you know the fonts made by en for developers you can install the font by installing it via npm and then you can import it in xjs just by importing gist and gist mono from gist font and they say include this in the app layout or page layout if you want this font to work in your project and now it just works but if you're more boring like me and you're using something like a photo editor like I often do for my thumbnails you can also just download the zip and now you can get the font or the mono and the normal font with a single zip download that has an OTF a wa and ttf whatever all the standard font formats are like yeah it's that easy they did it the font's now live huge shout out to evil rabbit for leaking this to me as early as he did and to the whole versel team and as well as basement studio for the hard work on this font we have needed a good alternative to enter for a while and it's really awesome seeing you guys get the inter Creator's blessing as well thank you for shipping this font thank you for making it open source and an open font and giving the whole Community Access to something this cool appreciate yall a ton if you want to hear more about CSS type stuff I'll pin a video in the corner all about that and if you've already seen it or aren't interested there's a video below YouTube seems to think you're going to like thank you again peace nerds




## The Front End Iceberg Explained - 20231018
front end is a wild wild world nowadays and somebody's finally put this all in an iceberg if you're not already familiar the iceberg meme format is a way of showing how things get more complex as you get deeper into them and leer Rob from versell made an incredible Iceberg showing a bunch of different things that front end devs have to deal with captioned front end is easy which is really funny if you've had to deal with any of these problems and you understand that front end is not actually particularly easy this Iceberg took a lot of work on his part and I'm super lucky that he's down for us to share it here and react to it because there's some really funny stuff in there so without further Ado let's dive straight into the shallows of the front end iceberg in the shallows we have relatively common stuff that hopefully we're all familiar with like index.html div and button we also SN a b and I in here for bold and italic which nice to have there also font size 16 pixels I feel attacked because I think base font size of 16 makes a lot of sense and for readability it's what most stuff should use but a lot of people really like smaller base font sizes regardless 16's really nice starting point let's go a little bit deeper though cuz this where things start to get fun we immediately have script tag image tag and form all three of these have so many behaviors that you might not know about and hopefully you haven't had to worri too much about if Fram is even worse though I would have put this a layer deeper personally and then this one we bickered about a bit there was an accidental bracket wrapping this function call here this is supposed to be the equivalent of document. ready inside of jQuery so if you're using jQuery this syntax minus the brackets is how you have a jQuery function run as soon as document is done loading here's where things start to get a little uneasy though we have use effect which uh we've done a bit of content about already if you're not already familiar with use effect it's the pattern in react for having reactive data flows so if you want something to run when a specific value changes use effect is how you do it also the way you tend to attach things into and out of react and its syntax is weird and there's a lot of very real foot guns with it so putting it here makes a lot of sense centering a div is a wonderful meme not always the easiest thing but it has gotten a lot easier nowadays a flex box surprised the word Flex isn't in here anywhere might come up later unit tests in front end in particular are an interesting Wild Ride definitely check out some of my content about those if you haven't already I have a lot of thoughts on unit testing link preload and prefetch oh boy link is how you would attach things like God link could be used to attach a lot of different things to your document primarily it's used for CSS and which behavior you attach here determines a lot of things about when that CSS loads and when the content of the page actually shows up and helps you prevent things like that CSS Jank when the page flashes in unstyled pre-load and pre-etch for links allow you to get around a good bit of that it also allows you to pre-load different CSS you don't need just yet if other Pages might need it in the future fun stuff oh man the rest here though responsive layouts oof my soul yeah uh responsive is one of those things that should have gotten better over the years and hasn't like it's truly hilarious that there's no easy way to make a website that works well on mobile and on a computer without having to be an expert in both and like how responsive containers work I feel like grid somehow made this worse not better regardless responsive layouts are still very much a challenge and if you have a website that actually works well on web and mobile without rendering entirely different uis good for you proud of you not easy lenting God damn it linting should be easy I am annoyed that it isn't the amount of effort it takes to get lenting set up properly in modern Web projects is a little bit horrifying if I'm going to be completely honest yeah it's not great the history from es lint to tslint to the two merging to Rome trying and failing it's and then the weird relationship between that and prettier it's chaos hopefully this will get fixed someday anyways CSS Cascade if you haven't already watched my video on stylex you should check that one out because I and Facebook are very well aligned that Cascade has too many weird behaviors that are hard to understand and your CSS should affect the thing that it is attached to and ideally not affect anything beyond that obviously like color and font size probably should be inherited but the vast majority of behaviors cascading is hard to work with and impossible to debug so while I know plenty of people have made awesome things happen with Cascade and are very very good at CSS as a whole I think this has come at a net negative for most people for better or worse and yeah it is what it is anyways float oh float I have never had a floating element work and Float types are rough too I this could be a lot of different floats and none of them work how I expect them to surprised sticky didn't make its way in there too but yeah good luck shall we go deeper I think we should these are things are going to start getting a little bit more painful and obviously we start in this next section with chors drop a one if Kors has hurt you and drop a two if Kors has never hurt you here you guys go anyways lots of additional fun to talk about here end to end tests I I like end to- end tests but setting them upright is nearly impossible all of the like chaos around puppeteer and Cypress and all of the other tools for headless Chrome it's rough it's gotten better but it's still not a happy story and I think putting that here makes a lot of sense input validation again we've gotten a lot better but once you're combining that input validation with forms and feedback and all of these additional pieces getting good validation of inputs can be scary and as we just saw with Zod having yet another massive exploit around the Rex for emails this isn't a fixed problem we will continue having more and more chaos around input validation as we go forward but hopefully we'll get better in the future somebody in chat just mentioned server and client validation sync I would hope something like s helps there but it's not perfect especially if you're running a different backend language from your front end and have different validation methods on both yeah it can get rough and as someone else said like you still have to validate on server even if you validate on client because somebody can just post to the endpoint which is also very important so despite validating on the client even if you get it perfect you now also separately have to validate that on the server blah anyways let's get into something we all love hyd ation errors if you're not already a deep react Dev that does a decent bit of SSR you might never have had a hydration error in which case I envy you because they suck to put it simply hydration errors are what happens when the server generates HTML with react and the client resumes that HTML with react and the results are different when it does that the most common time I see this is when the server's in a different time zone than the user's device and they render a date time because the server will render that date time maybe it's GMT and it's tomorrow but on the user's device it's today then you end up with a hydration error between the server and the client because the client when it tries to run the same JavaScript code against the same data it ends up generating different HTML you're can also have this if you just have a math do random that runs on the server and on the client but yeah you you hydration ER suck they happen for a lot of different reasons and if you haven't encountered them before I envy you they aren't fun they do get a lot better with server components because you don't have to rerun the code on the client in the server all of the time anymore but you still have to worry about these things a bit let's keep going because font size 14 pixels I don't know if this is all one or if this is two different things let's Google search it quick ah it is one thing today I learned for those who haven't heard about this before cuz this is new to me if your font size is less than 16 on an input and you try to put things in that input on mobile web for Safari it will zoom in I always wondered what triggered that weird Zoom when you click an input field on mobile and now I know it's the font size and a hard-coded behavior in Safari itself if your font size isn't big enough ow that hurt deeply anyways filter views filter views are fun it's when you have a view that has some amount of data and you want to hide some of the data be it you want to filter out things where the user ID doesn't exist or values where the age is less than 18 building the UI for that can be very complex especially if the data is paginated which is a fun part right underneath here if you have an API that returns 50 things at a time and then you apply a filter to only show let's say half of them you now got 25 things which means and maybe the next page you have 27 things so you need to to on the back end create those filters so that it always continues to return the 50 elements this is where things start to get really rough somebody in chat just mentioned once you add an autocomplete it gets impossible and yeah once you add an autocomplete this gets really really painful image source set o there's a lot of different ways to specify source on images I use the picture element for this personally but yeah here you can see this weird syntax where you use this image with this specification you use this image with this specification and you specify different sizes as well and you still have a default Source because you need this to work in things that don't support these tags but yeah now you have four tags on your image instead of two o yeah as Aiden just said in chat he prefers to send the largest image and have the browser deal with it not the worst thing and honestly it's funny this is in here it's kind of like a next image plug because next image does a lot of this for you automatically you can specify a bunch of different props but if I go to image. T3 and we inspect this element you'll see this is an image tag that has a giant Source set on it with a ton of different generated images there's like literally like over a dozen different image sizes for that image for me just really convenient to just kind of have that at media prints the other one I didn't know intended for page material and documents viewed on a screen in print preview Mode God things I've never had to optimize for I don't want to think about how things are different when I press command P it looks like they did for us here yeah at media print is the tag you use when you want to have certain elements specified in the command P print view I am so sorry to anybody who has to deal with that my my heart goes out to you genuinely and then Nan undefined null what are you talking about those all make perfect sense Nan is for things that aren't numbers undefined is for things that don't exist and NOS for things that don't uh oh oh never mind we'll continue layout shift oh layout shift this is another one of those things that NEX has helped with a lot if you're not already familiar layout shift is what happens when things like the font loads and element loads in you have a picture tag that wasn't there before now it is and it causes other elements in the page to change where they are maybe the default font is slightly different sizing than the font you actually load in a lot of pain there and uh yeah layout shift is not fun infinite scroll this is actually funny to put in here specifically because react server components have no solution for it uh yeah if you're not already familiar with infinite scroll it's the concept that you take something that's paginated and as you scroll to the bottom of that V like a list of something like tweets on Twitter when you get to the end it loads more automatically detecting that the user at the point where they should infinite scroll is hard attaching the data in a way that doesn't shift the Dom and cause them to scroll somewhere else automatically is hard paginating properly so you can scroll up and down and continue to like grab from the right Point means you have to have your cursor set perfectly and you also can't use SSR for this so yeah there's a lot of pieces that make this hard tan Stacks infinite query solution in react query is really nice and helps a lot but if you're SSR in the first chunk of data this can get rough fast so so yeah infinite scroll is not fun and it definitely fits here if not possibly even deeper calendar UI is very funny as well we've been dealing with this in webdev forever there have been so many different datetime Pickers created and there is now an official like input type as date so here's the browser standard date time picker and it's actually built into Chrome now which is really nice this is an option and you don't have to go out of your way to build it yourself always but not all browsers support it and the consistency of the UI for it is not there so most people still tend to build their own regardless that one can be nice to use the default just cuz it works well on mobile and you don't have to build a separate mobile path for your date time Pickers and for your calendar yeah calendar uis are notoriously hard even just to pick a date much less build a proper thorough calendar with lots of features funny issue I run into when I'm working on my calendar for my content is I have no way in the calendar for notion to wrap the font for this I'm surprised that line wrapping and like word wrapping isn't in this Iceberg anywhere but I also can't imagine how difficult it would be to have customization where I could specify how many layers these titles can wrap even though it would make my life significantly easier let's move on to cash busting there another funny one for the next team to be including here because caching with app router is both incredibly powerful and pretty unintuitive dealing with cash as a webd is not particularly easy and as cashes and cash methods continue to get more and more intricate the ability to invalidate a cash is more and more important versell did kind of pioneer a new method for this the uh incremental static regeneration the concept for ISR is that you have a page that is generated possibly on request or on build and the data for that page can get stale you don't know when it will get stale you can specify the point at which it determines that the page is stale or you can manually call a revalidate and this is where things get really powerful the on demand revalidation means if you have something like a blog post that has comments on it you can generate that static HTML page with the comments and not have to hit your backend at all when people load the page but then when a new comment is left you can invalidate that page cache and generate a new page once per comment instead of once per visit and this pattern is really really powerful but now you have to be confident all the places comments are left are triggering that invalidate otherwise you're going to be fetching a stale page and this is where cash busting can get very very problematic very very fast CSS selector performance oh no oh no yeah CSS selectors are different ones perform different ways and different amounts this is one of those things I'm really happy with tailin for cuz it has so little in terms of CSS selection it just uses classes which are one of the as far as I know most performant methods to Target CSS so I don't have to worry about this as much anymore but when you have a ton of dynamic elements and a ton of weird methods of targeting them CSS selectors can actually be pretty heavy load wise and I don't want to know more about that I don't want to read more into that so I won't to ooth 2 I can we go back I don't want to talk about Oath oh God I every time I think about o i h a little bit more I was one of the earliest next off components and I still love next off it's an incredible solution for what it does there's also additional incredible open source Solutions like Luchia off that are doing very well right now the problem comes when you have to integrate oaf with lots of different platforms both in terms of the platforms people sign in with OA as well as on the client side problem you haven't thought of unless you've had it is how do you handle an oo signin from something like Google or GitHub on mobile step one you open a mobile view step two trigger the signin redirect to the service you want to do the ooth with step three they sign in there hopefully it will persist their from the browser often won't cuz inapp browsers are a total mess step five have it redirect to a URL that you've already pinned to your app and hope it actually gets there Step six you grab the token off of that URL redirect and hope again that it's actually there and it's located where it's supposed to no guarantees step seven you find some place to store it and then you hope that that will apply correctly and then you have to handle manage and revalidate that token over time probably on your back end and then get that to your mobile app in order to make sure it's up to date so your requests continue to work as expected yeah oath sucks it's really really rough and having implemented it both correctly and incorrectly while working up twitch as well as externally trying to consume services like twitch Aiden just said in chat here's the easier solution make users manually type in a token you say that as though it's not the best solution sometimes but I've definitely shipped apps where I required you to copy paste the token from web into Mobile in order to get it working just to get something shipped maybe have even done that at twitch at some points anyways a is not as easy as it seems it usually stays stable and doesn't break but if it does break you're in hell and this is why I become such a fan of clerk because they handle all of this for me with like two clicks I pay clerk because it solves my problem for me although I will disclose I'm a clerk investor and they do sponsor the channel they have no idea making this video they just made aath much less painful for me and because of them I don't think about aath anywhere near as much anymore so if you're like me and don't want to think about a may be worth checking them out anyways email CSS on the topic of things I've invested in email sucks email templating sucks incredibly hard it's one of the few things I would still pay in an external developer like a contractor to do for us because doing email HTML and CSS correctly so it works on multiple platforms is really really painful and I don't want to do it anymore because of that there is a really cool project called react. email which is an open- Source react package similar to how you can use react native to Target native platforms or react 3 fiber to Target 3js and 3D canvas stuff or even react PDF to do a PDF react email lets you write react code with their custom helpers instead of using div you use their view element but if you do that correctly you can correctly set up an HTML template for an email with all the CSS and everything handled properly they do that by intentionally limiting what set of things you can use in the email template on the react email examples page you have a ton of these dope examples that show you a recreation of a common email that you might have gotten yourself like this GitHub access token example and it shows you the react code for using react email to generate this and we see in react email you have these components that all behave how you expect inside of an email and now you can template this which is really nice if you want to generate an email in your react code and then send that out programmatically because like a user signed up on next or something like that makes it way way way easier to think about your email in terms of your code and the stuff that you do I mentioned a little joke about investing the reason I did that is because react email is a project by the company resend which is a why combinator company created by the same people that I'm really really pumped with I invested in them because it's going to solve so many problems for me and others think they're a great solution for email I have invested in them they never pay me for anything I'm just that hyped on what they're doing bit more in this layer it's getting more and more painful as we go the event Loop oh boy the event Loop fun fact when I was leveling up as a developer I made it a point to watch this particular talk what the heck is the event Loop anyway from JS comp from 8 years ago and I would watch this every 6 months for like 5 years and every time I watched it I understood a bit more than I did the time before it's a phenomenal talk and even now I still feel like I get a little bit of nuance that I didn't fully understand every time I watch it I would consider this a must-watch talk I'll be sure it's pinned somewhere in the description of this video so if you haven't already seen it you can watch it I've learned so much from this the event Loop is complex but it's also one of the biggest strengths of JavaScript and if you don't already understand it I highly recommend that talk because it will help you be more confident in the JavaScript you write good talk great talk this talk is gold mandatory I make my Engineers watch it once a year this is the first time this person's messaged in chat yeah phenomenal talk highly highly recommend it user agents oh boy so you might have noticed here I'm using Chrome but my user agent starts with mazilla 5.0 it then follows with apple webkit 5.37 it then says khtml comma like gecko then it shows my actual browser Chrome 117 and then it says Safari 537366 would support them and even though obviously Chrome is not mazilla 5.0 it does supposedly fully support all of the features from mazilla 5. which is why it's included in my user agent the order that these appear in matters the specific syntax of like khtml comma like gecko matters user agents are not fun and a lot of things fake them you can't use them to guarantee anything you can basically just use them to hope things are whatever they're supposed to be and it's been miserable getting here regardless they mostly do what they're supposed to and I can mostly live life ignoring them two more in this section let's start with wum cuz wum has one of the craziest histories and is one of the most misunderstood Technologies in webdev wasum originally started as wasum JS which was a project with the goal of making it so you could compile code that wasn't in JavaScript to JavaScript but when you did that you were stuck with javascript's performance so they started introducing syntax to JavaScript to allow you to oh sorry asm.js thank you primagen so close so the original wum proposal was in the form of asm.js which was a project to compile native code and Native like code to the browser the performance of this was obviously not great so they started doing more and more hacks specifically adding syntax to specify certain elements are always going to be an INT and in generally trying to make that JavaScript code more optimizable to run faster on a native layer this ended up being utter [ __ ] chaos they learned their lesson fast and wasm became a focused standard to try and build native and Native like performance with direct memory management garbage collection and all those types of things so that you could compile native code to the browser this code only runs inside of an isolate though it's not actually directly controlling the dawn which is one of the biggest misunderstandings I think people have with wasm is that it's not an alternative to JavaScript where you can just update things the same way you do in JS wasm Works more like a worker where it runs separately kind of and has access to the Dom kind of but you have to build the relationship there and build the bridge there because of this wm's use cases are less alternatives to react in more really really performant ways to do things like video encoding or complex math for crazy transforms of images and such like figma's a really heavy user of wasm in order to optimize a lot of parts of their UI and the customization and the crazy vectors in math they have to run to modify images but when it comes to actually moving things around in the Dom that tends to still happen in JavaScript there is definitely a future where we can call Things From WM in the browser directly and we'll start to see the gap between fast JS Frameworks and wasm Frameworks close maybe even wasm Frameworks performing faster than JavaScript Alternatives but because everything goes through that layer still JavaScript still faster for things that are focused primarily on updating the Dom really quickly somebody also brought up FFM peg in chat and FM pig in the browser and FM Pig WM are absolutely things that I've put way too much time into really powerful tools really hard to get working how you need them to wm's cool wasm has a lot of potential I don't think it's very well understood and it's not going to replace JavaScript anyways my favorite part of this section the the one I've been putting off for the section this oh this this hurts this causes a lot of pain and this is largely ignored by modern web devs thankfully if you guys aren't already familiar with JavaScript the good parts it's a very important book that normalized JavaScript not being fully hated Douglas crockford wrote this book in order to explain how you can use JavaScript to do some quality and since then crockford has continued doing talks and is working on a book called JavaScript the better Parts one of the strategies to keep things simple as you build at scale is to trim things that you don't absolutely need in order to keep the context you need in your head as you read changes make changes and move forward simpler this has so many weird behaviors and so many weird places that life without it is much simpler he actually talks a lot about this in here um I don't think there's more slides on it but he has a long rant within this where he talks about projects He was working on he decided to stop using this he expected it to be painful and ended up being surprisingly better and when you leave behind these patterns you end up in a place where the complexity of your code is a little easier to digest and understand and reusing Parts becomes easier as well I'll be sure to link this talk in the description as well because I think it's awesome and I genuinely love dougas crockford so but yeah he is one of the people who really ushered in this new era of JavaScript is also anti this so people are coming around I see less and less people who are using this every day which means we can move on as well to the next layer where things start to get dark the bottom of the iceberg we're not fully in the Deep just yet the first here is zero results found and once again I'm going to ask chat who has searched an error on Google gotten zero results found and immediately felt an impending sense of Doom I want to see the ones for that this is even more people than before that's saying something everyone felt this pain having an error that has no results or even better the only result a blog post you wrote about it in the past yeah good times I am sorry if you've encountered this I hope you found a solution to your problems and I hope you posted that solution somewhere so others would have it in the future cashing headers oh boy cashing headers UHA if you're not already familiar you can specify cash control headers inside of a response from a web service so if you send HTML you can say how long that should be cashed for you send Json you do the same thing and you have to hope that the CDN behaves correctly and the user device does too cash control headers are far from a guarantee of anything at all other than you're going to have some complexity around stale content we even have problems with cash headers for of all things our docs so the docs for upload thing regularly have issues with caching where when we make a change all the old Pages don't get revalidated cash headers are no guarantees although they are very important web RTC now we're talking about something I'm qualified in web RTC is the standard for kind of peer-to-peer video that's focus is on latency not on bit perfect content so if you want to make sure every pixel shows up exactly as intended WDC is not the standard for you web RTC generally assumes some amount of potential spottiness and packet loss in order to get content to a user as quickly as possible with as low latency as possible and usually resilient enough to get them video even if their connection has issues WTC is the standard everything from Zoom to Discord uses in order to get audio and video across the world and is usually doing some amount of peer-to-peer as well although that is not necessary you can have nodes that are running inside your own infrastructure that are effectively forwarders for the web RTC where every user connects to those nodes those nodes do the play and the relaying between each other and then users connect to one of those and receive data from that instead there's a lot of different providers that do web RTC we use Agora there's also Solutions like daily and 100 Ms I can't recommend any of them at this point in time because they're all kind of a mess in their own unique ways doing audio and video on the internet is tough and doing interactive live audio video in a way that doesn't suck for all your users is incredibly painful if you're not already familiar with the service we built ping. basically it's Zoom for streamers was our goal to make it easier for me to bring somebody like primagen on my show live to do a collaboration we're used by everybody from like lus Tech tips to vjo companies like Elgato and Microsoft for Xbox stuff we're used a lot in the industry because we are the highest quality solution for collaborative video calls in a program like OBS we had to go to hell in back in order to get this working well and the amount of weird stuff I know about web RTC as a result is hilarious one of my personal favorites is that if you're using Firefox and there's web RTC video coming in that is at higher than 30 FPS every frame above that is going to memory leak and not get collected which means that relatively quickly that Firefox user is going to crash we support 60 FPS video so the only way we could support Firefox with ping is if we disable 60 FPS on the rooms where one person's using Firefox because again this isn't the video that they're sending so if you're on Firefox and you're locked to 30 you're still pulling 60 FPS video from other participants you're still going to crash so the only way we could maintain the level of quality we wanted to for the Ping service was to ban Firefox entirely so yeah web BTC is far from a solved problem hopefully you haven't had to deal with it yourself of the parts here web RTC is probably the one I have the most unique experience with Rex is probably the one I go out of my way to avoid the most my CTO is incredible Mark and a big part of why I hired him is he's our Rex guy I don't have to deal with Rex cuz I have him and now we also have chat GPT to do Rex for me I hopefully will never have to write a Rex again for the rest of my life and I will go out of my way to continue not touching it because it makes me feel stupid and I don't like feeling stupid so let's take a look at the other things here quick same site cookies are another wonderful pile of questionable things especially once you get into subdomains and behaviors between things with that making sure your cookies are accessible in the correct domains and not on the incorrect domains not fun yeah same sight and save origin in the differences between those could be a whole separate video going to avoid that closures are the behavior of most languages where when you have a tabed section and you define things within it can that be accessed from outside or not and is that value inclosed inside of that section and JavaScript in particular has some weird behaviors around closures especially once you involve ver and you're exposing variables in weird orders where if you define a ver or a function at the bottom of the file you still access it at the top of the file the behaviors around closures and like order of creation and access in JavaScript feel pretty strange at times and I can't sit here and tell you confidently I fully understand when values are and aren't going to be enclosed but it is something JavaScript overall does decently enough that I don't think about it too much if you have to think about it though it absolutely belongs in this tier because we can go into everyone's favorite rewrite it in Rust okay one more chat poll who has had an engineer at their workplace unironically propose a rust rewrite drop some ones in chat if you've had somebody at your workplace propose a rust rewrite fewer than expected and a lot of meols that's good to hear we always ironically do it and then you're doing the rust rewrite so on the bright side I do think rust rewrites are better than rust starting points the the value of rust is that once you've written the code you never have to touch it again so if you know exactly what the thing's supposed to do you have a perfect planned out understood spec and you want to write code that will fight you as you change it but guarantee things will always be exactly the same rust is a good solution for that if you want code that won't be touched for 9 years and you can throw it in a box and expect it to rust so to speak without any issues and then 10 years later it's still running rust is the solution for that which is why it makes sense to rewrite things in it once you need to but it also means you need to have problems with your current solution that rust can solve and you need to not be changing that solution regularly if your apis are constantly changing if your product managers are proposing new Solutions every couple weeks rust stops being a benefit and starts being a paino really fast but but if you want code that never changes it's a good solution however we're talking about the front end Iceberg here which means rewriting and rust is talking about wasm yeah I hope you have a good reason for it is all I will say there anyways CJs esm yeah good old CJs esm TDR we changed syntaxes for a bunch of parts of JavaScript kind of and the interrupt between those two syntaxes is pretty rough commonjs is characterized by the require syntax when you're including something and esm is ecmascript modules it's characterized by using the word import instead and these two behaviors work differently behave differently and now we have utter chaos as a result trying to make these interrupt having packages that work in one way not the other dealing with us as both a Web author and an application developer dealing with packages that have weird behaviors with either of these more importantly as a library author trying to make things that work properly in both CJs and esm none of this is fun and if you have to deal with these things regularly I am sorry I do hope that we'll get into a smooth Smo esm future somewhat soon a lot of progress is being made especially projects like V normalizing esm is the standard I do think we're going to get there but we still have a long ways to go one more in this section that I'm again uniquely qualified for Dragon drop UI if you haven't built a dragon drop UI you probably think it's simple just go find a package and put your elements in it and drag and drop things around if only it was that simple my unique experience is I was the lead engineer on mod view at twitch every single one of these elements is drag and droppable resizable Dock and undoable and all of them maintain their state As you move them around I have a whole video coming out in the near future about building this and all the craziness we had to do in order to make this level of dynamic drag and drop interface possible while also making it accessible and it's hellish even if you think your drag and drop UI is good does it work for somebody who doesn't have like dexterity that can't drag with the mouse there's a lot of users with accessibility needs that don't have the drag and drop capability where they can't click and move the mouse at the same time that's very hard to solve so yeah drag and drop is not pleasant in a lot of cases for a lot of users and if you haven't went down this road I envy you things have gotten better with tools like D and D kit but we're still not all the way there and getting drag and drop right is still incredibly difficult and make sure if you do rely on Dragon drop for your interfaces that you have some solution for people who are using the keyboard or have much more specific Mouse targeting behaviors or at the very least you have good enough defaults where none of this is needed at all yeah be careful with your dragon drop stuff we have a section to dive into manity Land The Depths where things start to get painful and I immediately have an issue I don't think websockets should be below web RTC websockets although chaotic I would flip these two because like getting web RTC knowing the differ between like turn servers and stun servers in websocket land you have awesome Solutions like socket iio and Pusher if you're already familiar with socket IO is actually created by GE Ro who eventually went on to create nextjs and versell and web rgc has nothing anywhere near as good in terms of Open Standards that we can build around so yeah I think websockets are in a better State than this gives it credit if you're somehow not familiar with websockets it's a transportation method where a server and client connect to each other and the server can send messages to the client the client can send messages to the server without having to do posts back and forth it allows for the server to update the client without the client having to poll constantly or using S and other types of event methods websockets are probably the easiest way to get messages from a server to a client quickly live and if you're using a chat solution like people are right now in my twitch chat you're probably websockets for that very common standard a lot of things rely on them websockets are dope they're not the easiest thing to set up and there's a lot of awesome services that will offload your websocket work for you there's a bunch of different use cases for websockets too you can have live data updating where you have data you fetch from DB but you want the data to update when it gets changed on your backend like my profile picture changes you can use a websocket to update that in the UI for people who are currently on my page you also can use websockets for temporary data that you don't care about liness of like the current cursor location I don't care about previous values I just care where it is right now I also don't need to persist to I don't give a [ __ ] and then you have live data that is persisted but is more it's not persisted it's ephemeral and you need the history something like chat so if you had a chat where you don't want to persist but you want a chat history for when you're in the experience that's different from websockets where you don't want the previous state which is different for websockets where you're just sharing the DB State these are all different use cases that have different solutions and a lot of people try to provide all three at once this is my web soet as a service diagram as I mentioned dbsync which is when you want to synchronize the page or the users's application state with a database change live data sync which is things you don't care about previous States but you do want the current value so like where my cursor is located if it user online or not those types of things and then live events which are things where you want the history but you don't necessarily want to persist it or link that somewhere else so these are three different things and there's solutions that combine live data sync and Live Events there's also a lot of solutions that try to combine dbsync in there superbas and fire store are the the main dbsync Solutions and now there's a new crop of things trying to fill out this middle space and I don't trust them so yeah let's go back here because there's a bunch of other things in this depth including mobile dialogues oh god uh yeah good luck with modals and things like those on mobile especially once you have to deal with navigation people sliding back and forward and like on iOS when thing bottom gets like open and closed I already complained about mobile dialogues they're rough but on the topic of mobile CSS full height on mobile who here has experienced the hell of trying to get 100 % height working on mobile let's see some ones in chat that's what I thought yeah we've all been there doing this sucks it genuinely sucks whether or without keyboard again with the additional problems that make this really fun so if you're not already familiar with the hell that is CSS full height on mobile when you use 100% height on certain mobile platforms I'm looking at U iOS it accounts for the full height when the status bar is collapsed in its smallest form but if that status bar gets bigger which it does for many reasons that height is now slightly bigger than it's supposed to be and the result is that your page Scrolls a very small amount when it's not supposed to at all so if you want your page to be a fixed height with content centered in the middle of it yeah Min content is the the new magic thing that supposedly solves this yeah oh and webkit fill available is the other fun one there's a bunch of these now I hate this so much so yeah I'm sorry to everybody who has to deal with this which is probably a lot of you and it's not fun that's the CSS full height problem cookie banners cookie banners cookie Banners are a necessary evil due to the EU having specific rules about cookies and how they track users so if you have a cookie that does almost anything you're expected to put a banner that says by the way we use cookies hit this to accept that we're using cookies and getting those set up properly globally not fun V8 stack traces so V8 is the engine that most JavaScript runs in nowadays especially if you're using node but if you're using modern browsers like Chrome or any of the chromium based browsers V8 is the engine that your JavaScript is running in V8 stock traces are the engine level trace of how your JavaScript Ran So that has both the JavaScript code that you're calling and the C++ code that is actually running that code and these traces can get super complex super quickly I've only needed to dig into these a few times due to weird stuff I was doing in electron and it is absolutely miserable like God yeah stack traces are rough I'm starting to feel how deep we are now the double Tilda if I recall this is something about math chat can you tell me what that is oh people are already talking about it it's math. floor for positive numbers let's try that quick huh 4.8 and what happens if it's negative and weird okay this is some weird bitwise [ __ ] I'm going to pretend that it doesn't exist and continue living life as though it doesn't exist so it make me feel better dates ah let's see some ones in chat if date has ever hurt you in JavaScript and that is the most aggressive I've seen the ones appear in chat on this stream I would possibly put daytime in the like simplest seeming yet most painful in reality things it's pretty rough temporal when someday temporal will not fix it but temporal will hopefully make it slightly less bad there's a fantastic video a number file did this is an absolute classic if you haven't already seen it this was one of the original Tom Scott videos before he was like his own big separate Creator talking about how miserable time zones are to manage yourself I'll also throw this in the description if somehow you haven't seen it I would hope everybody has seen this already it's an absolute classic yeah dates are rough especially once you get into time zones things get really complex really quickly libraries like moment date FNS DJs and all these other things help but none of them Solve IT dates are rough rewrite it back in JavaScript got to love those projects that commit to something crazy like rust and then realize their mistake and go back not everything will have this problem most will refuse to admit they made a mistake I also hope this doesn't mean rewriting JavaScript instead of typescript regardless when you get to that point something went very wrong ow localization localization you'd think by now the browser would have some way to update the string contents without having to build your own layer in JavaScript maybe some decade but right now localization is your problem is the developer and we are so so far from having this problem solved what we would do at twitch is we had a custom wrapper we built that every time you had a string that you were calling inside of your HTML or your jsx so to speak anytime a string was being put in there you had to pass it through our translate function and we had a code mod wasn't really a code mod we had a pretty complex parser that would go through the entire code base identify all of these unique strings in the tags for them so you had to put a tag to identify it as well in the string itself was the key that would identify what should be there instead and then we would send off this huge CSV with all of the changes diff off to our translation team that would go through and translate each of those strings to all of the different languages we wanted to support and then generate this gigantic like translation Json blob that would put the right value in for each of those locations depending on which language you had set this is just how we did it and I haven't seen anything that's particularly more compelling getting localization right is not easy and and I am sorry to anybody who has had to build this themselves because there is no good generic solution for it and I've seeing a bunch of people in chat saying they had to do basically the same thing once you get into right to left though it becomes actual hell something I learned recently is that both Mac and windows when you use a localization that's right to left they flip the whole Windows UI and the whole Mac UI right to left as well in order to make it easier to make sure the UI works as expected ah anyways local first local first absolutely belongs here because God uh when you're doing web development everything starts from a server you can do a lot on client now in the world of single Page Apps and local storage and all the cool things you can do in the browser what happens if somebody's doing those things and then the server changes or they do something manual where they open up the terminal and or they open up their console and they change something in their local data building a local first experience where you can go offline and have a good time but also maintain that relationship between the server and the client when they are back online it gets really rough and it usually means you're building a very complex State machine on the client and then building some type of event system to synchronize that with the back end doing this correctly is very very very difficult because you inherently have a split brain where you have two sources of Truth you have the server and the client and they both live in their own worlds some amount it can get pretty rough pretty fast it's a huge part of why I tend to avoid local first experiences as much as I can and anybody who promises they solve local first for you like Firebase they're just lying it's not that simple you can't just have your data provider create a local first experience embedding all of their behaviors into a JavaScript bundle or your mobile app and then expect it to work properly and you'll end up with really weird synchronization issues especially when there's users who are on old versions of mobile apps or websites I tend to rely on the server as a source of Truth and try to lock out as much as possible thankfully the stuff I build kind of requires you to be online like what's the twitch offline experience what's the ping. offline experience what's the upload thing offline experience none of these things work without the internet like the expectation is terrible but if you're building notion this is probably something you should think about so yeah hopefully you don't have to but if you do good luck in God speed this is not a solved problem and now we're in the very bottom we're as deep as we can get this is where things start to get incredibly painful we're in the depths the bottom of the front end Iceberg and we welcome ourselves here with a wonderful message new response wrapping new readable stream readable streams are a wonderful thing that hopefully we never have to touch because they're very very painful the amount of weird things I have heard about readable streams from Jared over on the bun team trying to get them to behave properly with everything from just HTTP to react is not fun and having a stream that is now being turned into an HTTP response that hopefully it works on all the things you're using but there's no guarantees there at all streaming a response is incredibly powerful wrapping that streamed response in a new response things start to get chaotic fast and I don't even want to know the weird behaviors and like the platform support and lack of support for doing this so I'm just going to thank the developers who are working hard on solving streaming for me so I don't have to because I don't want to think about these protocols anymore microtask Q oh my soul everything you know about the event Loop this is that but worse this is that but a lot worse I don't know how to summarize let's see what comes up microtask is a short function which is executed after the function or the program which created it and exists it exists and only if the execution stack is empty but before returning control of the event Loop being used by the user agent to drive the script execution environment did you see how many conditions there are here it runs after the function that created it exits if the execution stack is empty before returning control of the event Loop driving that execution ah now we get some fun type of stuff type of one two3 so this is an array which means obviously the type of that is object because there's like three types in JavaScript so yeah there's a lot of things that types are not what you would expect them to be but specifically the type of an array being an object sucks because if you want to know if something's an array you can't do type of thing is array you have to use array. is array so const sumr equals 1 2 3 type of sumr is object but array do is array sumr is true yeah good times time zones we kind of touched on this with dates but time zones are hellish they are they are rough uh watch the video I mentioned earlier by Tom Scott over at number file the amount of things you don't know about time zones is hilarious especially when like random countries decide they're not going to follow the time zone they're in anymore or they're going to start or stop doing daylight savings or this specific holiday where they're going to behave differently time zones are painful good luck getting close to the end guys hopefully we'll have smooth sailing from here but then I see Source maps and I realize it's only going to get rougher ah getting Source Maps working without sending them to the user getting this working with Sentry or highlight or whatever other provider you're using is hellish and I'm sorry anybody decided to do it wizzywig editors this stands for what you see is what you get and yeah wizzywig is an editor where you type and it shows you what you've typed rather than just showing you the content so if you're using something like markdown and you're using it on GitHub you might type in the hash and then type some text and then the preview tab will show you it but if you're using something like I am here with notion I can type that half and it immediately kicks me into heading and if I type a Word highlight it and use a command like command I it will italics it and show me the italics here non- wizzywig editors would show you the actual code so if I go to like Gest on GitHub hello what's up here it just shows the text but if I go to preview it will render this as expected so this is not a wizzy wig editor where notion is a wizzy wig editor so now what you have to deal with is inputs where you're rendering something different than the input has in it and that's where things get particularly hellish because browser inputs kind of expect the content of the input to be the thing that you input not to be rendered entirely differently and bouncing between input and your different rendering layer on top of it miserable absolutely miserable and I commend the teams that have made this viable because it is not pleasant speaking of unpleasant the Samsung browser oh man the Samsung browser is actual hell for whatever reason on a lot of devices Samsung has decided to not use Chrome and instead use their own thing imagine iie but on Lower spec Hardware really bad internet connections and no documentation or standards whatsoever and way fewer users so it's harder to justify supporting it users of old Samsung phones and like cheap Samsung phones not installing a better browser means it's really really hard to get your stuff working in these weird targets somebody mentioned it is based on Chrome I'm sure it probably is some amount but I'm sure the version of Chrome it's based on is ancient and I'm sure it's very poorly supported and has a bunch of weirdness in it I once opened one of my websites in the Samsung browser it didn't even render svgs correctly so I'm going to agree here that Samsung browser near the bottom if this has come up for you before if you've had to think about the Samsung browser at your job as a web dev you're very very deep in hell and I sorry and now we're in the last two we got some fun generic type Wizardry here so what the hell is going on here this trying to translate this and what it's meant to do I know what all the parts do here but I can't actually guaranteed give you the hole for it is empty oh yeah this is is empty I think this is the type is is this to see if two arrays are equal God what is this for so the turn and a turn is necessary because of how typescript Works sadly let me break this down a bit I'm going to pull up the snippet here there's a couple dumb things you need to understand about typescript for this to make any sense what it's doing is checking if something's a tupal or not which is weird and kind of dumb but the the way this works and the reason there's so many turn Aries is that you don't have conditionals in type definitions we can't use JavaScript if syntax in the type def because the type def exists outside of the runtime however turn Aries do still work because they could be inline compiled it as a result if you want a conditional type in typescript you have to Define it yourself and you do that with a bunch of nested turnar we have this first check that t extends an array that has any as the first element and then triple. any array after this means has at least one element cuz this could resolve to never which is annoying but good to know so now we know it has at least one element so we go in here we grab the triple. any in the front again and then infer underscore this is the part that I'm least familiar with let's see what chat GPT says it does is T extends tries. any infer will always be true while infer tries to infer the last element raise a tuple so this will always result zero if T is an array the inferred Clause is more useful when you want to capture and utilize the inferred type but here is simply used for a check and the inferred type underscore isn't used further yeah it checks if there's anything after which makes little sense to me because this would prevent there from being any after and then the zero or one these are like the true or false resolutions for each of these paths yeah this is chaos I am happy this is not where I spend my time in my life this is why I'm the second best typescript YouTuber and we rely on our good friend Matt pook to do the the harder things so we don't have to this is hell and no application Dev should ever have to use this if somebody exposes a tupal type in your code base and they did this behind the scenes for you dope it's actually not that complex God damn it I mean the the Syntax for it is but but what it does is relatively simple regardless this is why I at the very least try to name my generics in my types so it's clearer what it's doing and ideally comment the hell out of them so people know what they're doing yeah big generics like this are scary and you shouldn't write them in your application code yeah their syntax is more complicated than it needs to be but yeah these things are not easy to do right and now our final piece of this chaotic Iceberg 2023 Internet Explorer support even Microsoft doesn't do this Internet Explorer has been very dead for a while Windows uses Edge now and Edge is based on chromium now so 2023 IE isn't something that that exists in the traditional sense but if you do have users that are stuck on IE for a bunch of random things like if you're using weird old Windows XP terminals at your hospital you need to be able to support that still and if you're stuck doing that for some reason I am so incredibly sorry it is not fun having to give up all the innovation of the last 20 years just because some of your clients are on Old Hardware I had to convince twitch and I was one of the the loudest people at twitch we deprecated IE support after Google did hell I think we did it after Microsoft did because we thought that there were some users in South Korea that were in like the South Korean like gaming bars like the places you go to just like play video games you pay a fee for a few hours and you get to use their powerful gaming PC a lot of those had Internet Explorer with weird metered connection set up and we thought we were going to lose a lot of our market share people playing and streaming in those internet cafes in South Korea if we stop supporting IE I said that's dumb and stupid and we should not support it and eventually got enough agreement that we did and yeah don't support iie unless you have to and if you have to I'm so sorry I hope they're paying you accordingly have I covered everything that was awful I mean this was fun and obviously huge shout out to Lee over at versell for making this awesome free content when I say free I mean very painful content cuz this took like way too long God bless my editor for turning this into a watchable video what did you learn from this what were your favorite and least favorite parts of the front end Iceberg do you have a little more respect for the that we go through every day as web developers I hope so cuz this it's just's not easy although it is fun and I do genuinely love it if you want to watch me suffering more going over a lot of things in HTML you probably haven't heard about I'll put a video in the corner where I go over every single HTML element and rank them for some reason God why did I do this anyways thank you all as always appreciate you immensely peace nerds




## The Future Of Mobile Dev w Charlie Cheever from Expo - 20220526
yo yo welcome to web dev wednesday y'all really excited for this show for those who don't know we mostly talk about like web-centric stuff things that would eventually appear on a website but i've always been really passionate about mobile development and wanted to be more involved in the mobile dev conversation expo is an awesome project that makes it easier than ever before to deploy your react native apps get them built and send them to your users and charlie here is one of the founders of expo want to give a quick intro to yourself and like do a better job than i did of explaining expo cool yeah um so i'm charlie chiver uh i grew up in pittsburgh i went to harvard i worked at amazon i worked at facebook then i started quora then i took a little time off and i started working on expo a couple of years ago we're actually at it for a while now and um what expo is is basically like work i just tell you where it came from it's just when i was working at quora one of the things i did was started manage the mobile teams there and it was such a painful process to build mobile apps even ones just like built around websites that when i after i left that i was like man that was such a painful experience all i'm interested in building now is mobile apps but i like don't want to go to that experience there's got to be a better way to do this and then starting to research that with my friend james and then eventually like making our way to expo over um you know as the output of our research and a bunch of work and things like that what we basically do is is like at a high level we're always trying to say like when people have an idea and a dream in their head how do we make that like come to life as quickly and as easily as possible and get it into the hands of their users customers whatever and in practice what we basically do now is we make a whole bunch of tools and libraries and online services that all like basically let people with like react web developer skills make like true native ios and android apps and um also websites now from like a single react code base and so we see people um you know who've never done any kind of mobile app development before but who have some you know web programming experience some react experience who can you know literally build the first order another product in a day or weekend and sometimes get it live within a week um i can go into more detail about all the things that xbox but that's a really high level view there's so much there i want to dig in on more first like one of the things you touched on there that i absolutely love is how you didn't think of the problem you had the problem like you wanted to build an app and run this small team and the engineers needed tools that either they either needed to learn a whole bunch of new stuff and then hire more people to manage all these things or you could build a solution that solves that better and it's funny because to solve the problem you had at a small company you almost ended up making a small company and then experiencing all those same problems directly and i'm curious how much you think that like there's almost like a cyclical nature here of you built this for the small team use case then formed a small team and like started a thing and felt all those pains even more yeah for sure um and i think that there's you know even within the work that we've done at expo i think there's a handful of things that you could take and turn into another company just like on their own like uh there's a guy on our team named will wrote something called like our entity framework which is like one piece of the puzzle and this whole problem of like managing data and permissioning around it and like fetching from a database and writing it back to a database and whatnot i mean there's a whole that's a whole sort of like half-solved problem in building software right now and we have one library that's pretty good that all the people on our team are like oh that's ever since will built that library i am so much more productive and so i really think that you could take that and you could start building more stuff around it or whatever but right now we're trying to help people build mobile apps and web apps and so you know maybe someone else will focus on that or we'll focus on that later or whatever but i think any time you do a bunch of work you uncover a bunch of i mean this is sort of the nature of probably anything but but definitely software startups very good to hear i can't find the right way to ask this one one of the experiences i had early with expo that got me so excited was when i first actually signed up for an expo account i used my twitch email because i was doing some experiments there and almost immediately got an email it was either from you or evan i'm pretty sure it was from you and just wanted to like hear what we were using it for and the speed at which y'all got involved in not just the work i was doing at twitch but the future projects i took on you almost immediately opened a slack room with me to chat and dive into the source and see the problems we had and how we were solving them and that involvement felt unique and like to this day as many of these like other dev tool companies i've worked with i've never had one that got quite that involved at like the code level i'm curious how you guys ended up there and how common a thing that is yeah i mean so the way that that started was um originally we had a pretty significant suite of desktop software because react native actually needs a bunch of stuff to run like you need to you need a particular version of node and you need you know you uh used to have to have this file watcher called watchman installed properly and then there's like a bunch of things that had to be all installed so we basically like one of the very first things we did was sort of say hey it's a big pain in the butt for people to like go follow this long readme document install this piece install this piece and sell this piece let's kind of bundle all that stuff together into one download and make it work for people um and it turned out that like bundling desktop software and sending it to all kinds of people is really hard to get right and so in our first like you know handful like we were just this like super fledgling project um with like not very many users you know maybe like 10 total users a lot of like a lot of people would like run into issues because like partly because we had made a mistake partly because they had some weird configuration on their machine and so one thing i would do is just like whenever somebody would report that like in our slack or just like i could put open a github issue i'd often just say like hey like why don't we jump on a screen share let me take over your computer and let me figure out how to like i'll try to install everything the right way and if a problem comes up i'll like work through it on your machine and we just kind of got in the habit of doing that repeatedly and that kind of like that was just out of necessity more than anything else but then we tried to keep extending that because we found that like with anything where you're making like a library or a tool you can run into this problem where you like get in your own head about what the thing ought to be but lose sight of like the actual problems that people using it have and so um a couple things that were like really key um for us in the early days where we found a couple of people who are friends who were working on new products and convinced them to kind of make a bet on our project but our end of the bargain was that we would like be super responsive and help them and basically sort of like you know be you know almost 24-hour on-call support for any questions they had about this and like that really shaped our what we were working on and made it much much better um because like it was a way to like experience real real world problems but we sort of you know we got in this habit of like opening up a shared slack channel with people et cetera et cetera et cetera and one thing that actually like we're trying to working on now is now that we've gotten a lot bigger we can't have you know 30 000 slack channels open with anybody um but how do we like still get enough learnings and give enough support to like as many people as possible um instead of uh where's like you know obviously like we still have some of this experience because we need some of that direct uh feedback from people and learning about what what's cool like in your case with twitch like i think seeing the twitch name and just like everyone on our team knowing what that is and being excited about the prospect of of that like we jumped on that right away um but we can't do that with every every little thing but we sort of try to and then we just sort of fall short in some ways and so you know we're we have a discord we have a candy that's sort of a voting board on feature requests and things like that we have a forums and uh yeah we're trying to keep up with everything there and we i'm trying to my current effort is to spend like about an hour a day on our discord or forums just making sure i'm like listening to what people are really having trouble with what they're really running into that's so huge and like i can't emphasize enough how much that helps at every stage like yeah the company we're running peng is super early but i try to spend at least four hours a day talking to users ideally in the product if possible and as often as i can using the product to do content even now like we're using ping for this show i couldn't imagine doing this any other way and i couldn't imagine building something without that level of involvement with our users it just it it feels like impossible like how do you know if you're doing the right thing if you're not living so close to the users that they can comfortably tell you uh i agree i mean i think that's i think it's possible but it's really hard to like to do to build products any other way sorry debugging some audio on my end uh how are we sounding everybody better much better cool we'll take it anyways yeah i think it's so cool how involved expo is honestly i've kind of modeled a lot of our decisions around it like opening up a channel with our users as soon as possible and having that direct feedback like being involved in their process and like offering to help with their production stuff like that helps so much i'm curious when you look at other companies in the tooling space is that something that you guys learned and saw in others or is it something that you did just because you needed it or like like where did that come from and do you think others are doing this well i think that like one place where that came from is like my first job was it was it amazon and um in some ways like not the most fun place to work as a developer like i think my eyesight is bad because i had a messed up monitor because it's companies that frugality is a value there and so they just give you this super cheap equipment um the desks made out of a door yeah which are extr like extremely uncomfortable i was always scraping my thighs against these like metal slats that were sticking out like just sort of silly um whereas like i just i but one that was really good i thought was like it every uh every time there was like an all hands or any sort of company-wide function like jeff bezos from would like sort of hammer into everyone's heads like we're our number one thing is we're trying to be the world's most customer-centric company and customer focused and you know that wasn't like we're going to be the number one retailer online for books we're not going to it wasn't even like we're gonna be the new world's number one e-tailer was just like this relentless focus on like customer obsession customer focus um and i think that kind of stuck with me because i thought it was really powerful and like i noticed it making a difference in a lot of cases where like i you know i was a very you know i was like the most junior person in the company in a lot of maybe not like the most but i was just like some random new new kid um but even in just like little meetings that weren't really close to leadership or anything but just sort of like people would say hey wait we have to figure out how to get these packages from this warehouse in lexington to those customers so we promised it and like just really like low-level individuals just like going the extra mile to like live that value and then you get a critical mass of that happening and it's just like echoing around and being repeatedly um you know repeated by leadership uh it really just like kind of built on itself and led to all these like really like things just getting done in good ways and people getting taken care of and good outcomes happening um that i think is just really important and it also just like ends up making your product actually help people instead of being you know some pure vision of what you imagined it ought to be before you started working on stuff i that makes a ton of sense i really love the way that you framed that i also came from an amazon background i didn't know we had that in common it makes a lot of sense that we both had the customer obsession beat into us early in our careers and here we are yeah yeah let's dive more into the react native world i don't want us to spend too much time on the company stuff as fun as it is and i am curious like in terms of sorry this is a weird question because expo is just so different from everything else in the space where something like versailles is for deploying your code something like remix is a new framework expo is a way to write your react native app it's a way to build your react data app it's a way to test your react native app it's a pile of packages for your react native app like what is expo and in this evolving world of dev tools how does it fit in right and i think like part of probably makes it so hard to explain exactly what i suppose it is all those different things and that list is basically informed by like what was missing that people needed to like build something and be successful at it and so when we actually started we uh did a whole bunch of research and we we really wanted to take the wet like both james and i the james e day my my co-founder we both had just worked on websites basically our whole lives um and so when we were looking at this problem our first thought was like maybe people missed something maybe there is a way to take like a webview and make a really like excellent feeling app out of that um maybe that i could imagine that being true like sometime in the next decade with enough advancements and whatnot but it's definitely just like we we spent a lot of time confirming that it was not true when we first started researching this problem um and we finally just sort of got to the point where like there's nothing we can really do unless we're like on the chrome team in the safari team and can just like change the way the browser works in certain ways um and so we one day we just sort of started saying all right let's just like start putting in some ui views in xcode and push those and then control those with javascript and push them around and like immediately like the first build i did that felt so different and so good that like i just put on my phone and showed to james and we were just like this is immediately the direction we have to go we end up building a whole framework around this um that was ended up being very very similar to react native right before react native came out and so we were actually kind of on the cusp of like you know really i think we went to a con for a node.js conference in san francisco and just kind of started talking we were sort of like hey we've got this project doesn't want to hear about it we didn't like sign up to give a talk or anything we were just sort of talking developers and see if it would be interesting to people and then like the next week react native got announced by facebook and immediately gets 25 000 stars overnight on github and has all this momentum and so we basically like looked at ourselves and we're like look they have 40 or 50 people working on this and we've got two people working on this and they have so much like mind share and marketing momentum and whatnot but we know that this is just like one library and the whole problem is really big so let's just drop the stuff that we've been working on take this open source stuff and then fill in all the other gaps that are problems here and i think for me like a theme that just echoes throughout expo's life is like like the web is a pretty good way of doing development and is so powerful like let's take everything that's good about the web and web development and bring that over and like on f the mobile development space and so like a key thing that we like started with we basically were sort of like let's build like a browser like because that's a great model so the first version of expo was really like designed to be a browser that you could just like browse other people's react native projects um there are basically in the end two reasons we could not truly make expo into a sort of a modern browser that's not a web browser but the browser of the sort of like native content um the first one is just that apple doesn't really want that to exist in the world and so they basically told us like hey you need to make this not be a browser or we're going to take your app out of the app store and we really thought it was important to have like the expo go client be in the app store just because that's like i can give somebody a demo i can i can be on a video call with someone and say hey do you have 90 seconds let me show you how you can be developing with expo go to this url on snack download this app on your phone scan the qr code bam you're developing um and so that's really important like the app store distribution is a key part of any mobile thing being almost any mobile thing being successful and we needed that and so that's just the reason but then the other reason that uh it's really really hard to build a good react native browser right now is that react native is like a library that isn't designed to be like the rendering engine for a browser and like one thing that browsers need is this sort of like endless backwards compatibility like it's amazing and crazy that like i can take chrome from today and open uh a website i made in high school in like 1997 and it still renders like basically exactly right um whereas you can't open a swift app from last week and have it still work right and like it's and like it's one thing if they and even the way the web breaks is more graceful where it's like one that's broken about 1997 websites is if they have like the marquee tag or the blink tag or something those are sort of like officially gone from browsers but it's not like the whole website breaks whereas the way that like something like a swift app or rack native app these things break is they just sort of say not compatible barf the whole thing blows up and so like that just doesn't i'm like actually one of the pain points still of doing um rack native development or this is through a flutter development basically everything and i want to change this and make it more like the web is that like we'll have people who um i think this is especially true with expo because we do make such a web-like experience that people are like busy and doing a bunch of other stuff uh end up on our platform more often um is we'll have people come to us and say hey like a big problem for me is that like i'm working on a whole bunch of different things at once i'm getting i'm running around getting customers i'm you know doing stuff on the web i'm doing stuff with our back end and the mobile the mobile thing is only one part of our whole overall experience and so i only work on it once every three months or sometimes i might leave it alone for six months when i go back i often find everything sort of changed under my feet and to continue to work on it i need to actually like upgrade a bunch of things because i can't always even run stuff the way i'm not used to running it i have you know and that's hard um whereas you know you could have a website that's using jquery and it's fine nobody's making you upgrade it you know it's not like the modern thing to do and if somebody was asking me should i use jquery for a new website i'd be like probably not you should probably just use react like every other regular smart person but it's like perfectly fine to continue using one of the old way um and one of the things that expo offers now is this dev client experience where like we can build a binary that's like basically like an expo go client for your app um with whatever binary code you need which the most important thing about is to let you use like kind of any third-party native library or code that you want but it also means you can use older code and so like the expo go client has the most recent react data version and then like somewhere between like four to six versions before that and so you can get you know somewhere between six months and eighteen months of like compatibility spanned all while using the expo go client to develop stuff but um with a dev client you could have something that's three years old and still be you know not be dragged kicking and screaming to upgrade into the you know the future you can do it at your own pace there was so much interesting stuff here i want to dig into more obviously like the backwards compatibility story and the thought of like incrementally adopting expo into an existing app is super interesting but i really want to go in on the browser thing like i didn't know expo started with like the goal of being a deeper browser and that's so interesting and like pardon the spicy question what do you think the future would have looked like if apple didn't block you guys i mean i think like if we had really done a good job and executed well i think it's conceivable that like you could start that flywheel and get it going and like have a real like alternative browser that's not a web browser but is delivering the same kind of experience i mean you see this happening with um like you could almost frame like youtube and instagram and tick tock this sort of very specific kinds of browsers where like they let you browse like photo content or video content or whatever but like over time they keep adding more and more features that like make them more and more like in instagram now you could sort of add like a shopify shop into your account if you have anything to sell and you know the sort of end game of adding a million features to that is you have this sort of general purpose engine for delivering content to people um and so i think uh and i think there's also something where there's if you look at like the experiences you're able to deliver with react native where you're mostly sending out javascript and you know assets and stuff like that not a lot of native code like you clearly there's no theoretical technical reason you couldn't make a true browser for you know any kind of native app that's out there basically i think there's a little there's some stuff where people do want to customize native stuff around the way video is delivered or those kind of things but i think that it's likely we could have reached a point where we have most of the bases covered like the like in this you see this on the desktop already where like 10 years ago video wasn't really standardized on browsers or it was just becoming standardized even though like flash and sort of custom native runtimes and stuff were running ahead and delivering video and things like that before that but nowadays like almost anything you want to do on a desktop computer you can do through the browser like ping for example right now like i'm doing all kinds of stuff that traditionally you'd have to download a desktop app for like i'm you know using the microphone i'm using the camera i'm like getting this video streamed back to me stuff is happening in real time and this is such a deep evolution from where the web started you certainly could do this if you had you know a green space and your goal was to be more advanced in the browser um but you were committed to doing it i think the problem is just uh could you get enough people to adopt it that'd be hard but i think possible um and but then like you just need you need at least i can you know people to be neutral on the platform side instead of just wanting it to not happen but maybe one day i do think it would just be a better state of the world in the sense that like like i sometimes talk about this like like one of the sort of almost i don't know paradox is the right word but it's like if you look at the world right now and how people use software like most of the time maybe not people like you and me who are like professional software developers or nerds or whatever but normal people probably 80 plus percent of their time they're on mobile devices or tablets or whatever using stuff in apps whereas if you think about like developer time probably 90 plus percent of like application developer time and aggregate is put into web stuff and it's sort of like it doesn't make it whereas like but and if you look at every any popular product even once it started on the web like yelp facebook youtube reddit all those things started off as pure websites before the iphone even existed all those things now are like 80 85 plus percent mobile usage versus web usage but then you go look at the downloads for like react dom versus react native and it's like 10 to one and like that's just react that's not even the whole web ecosystem that's just like one part of it and sure there's other mobile stuff out there beside track native but i think you know that this is true you know you could look at angular versus flutter or something like that you'd see a similar ratio um and so i think that like part of what we want to do with expo is basically kind of like correct that imbalance where it's like the level of effort put into like making these rich good mobile experiences that are the kind of thing that people want to experience as users that should be like lined up with where the developer time is going instead of kind of artificially like limited where um you know the because of things like distribution and how hard it is to build and 20 other things all you know stacked on top of each other we end up with people who are like oh i got to get this thing to my users really fast and i need to you know be able to hire people to work on it you end up building a website instead for one reason or another there was so much really good stuff in there like i could do a whole show about how instagram is trying to rebuild the entire internet within their ecosystem and it's fascinated me for a long time but to go back to the beginning one of the things you touched on this idea of how every app like tick tock youtube instagram they are a browser in their own way you're just browsing a specific type of content or storefront or things along those lines what i've always found interesting is how apple gatekeeps the idea of what is or isn't a browser one of the like craziest cases i saw was when apple blocked microsoft from shipping the xbox cloud app on their platform because they saw the ability to stream a game as competing with an app store but they saw the ability to stream a movie as an entirely separate thing the act of interaction seemed to be the line where apple drew or the line apple drew remote media that could be interacted with is blocked remote media that is purely consumed is allowed and i feel like that distinction is both arbitrary and harmful for the platform and like the just like harmful for open platforms as a whole yeah and i you know there's also all kinds of other complicated things like uh roblox is another thing that may be like is hard to fit into like why is that allowed if you know this is allowed or isn't allowed um and i do think that like there's some things that are pretty good about having apple and google have a lot of control over the mobile operating system platforms like some things just move much faster than they do like if like a downside of the web is like i was just talking about web video and how that you know was sort of semi-standardized like or something around 10 years ago i can't remember the exact timeline but like people wanted to do a video on the web like since you know 2000 and it was just like it just took a really long time for the web browser to actually get a standardized version of something that was good and we had to rely on like real player and then flash and then all these other things they were like okay but like sort of awkward plugins for a long time whereas uh if you look at things like fingerprint readers and whatnot or or face readers and stuff like that like apple and google did a really good job of like baking those into the operating system and doing that and i do think that like you know there are ways that there are some nice things about that the app stores give you that like you don't quite get from a web browser and it's sort of full decentralization and whatnot and so there are things that are good about that but there's definitely a problem there where like if apple and google don't but especially apple is much more aggressive about this if they just don't want you to do something because they have some other reason to think it's like strategically competitive with them they can their rules basically say we can make up whatever the rules are and interpret them however we want if we want to and so it's just going to be like they'll just decide whatever they want to decide and i think that kind of uncertainty does make it harder to build as many foundational and big things um but it hasn't stopped everything completely in the sense that like over time you know like you could probably look at netflix and say oh this is like streaming or media and there's some interactivity to it could they be taken down by apple possibly but a lot of people would be so cranky that it's really unlikely that they'll like pull the rug on them or something like that and so over time maybe you just build up confidence that something is okay and something that isn't okay um but yeah i think it's one of the big problems holding up like that sort of imbalance that i was describing where there's just like not enough mobile developers compared to how much people want these mobile experiences um the distribution piece and the sort of capriciousness of the the rules around app stores and whatnot is definitely a part of that oh yeah there's another interesting piece there where it like the interpretation of the rules was touched on a lot and i think it's a really interesting idea like i from my experience google's blocks were more arbitrary and harder to understand apples were more clear like what the action was but  and what they expected from us if that makes sense like apple had dumber asks but they were clear google had more random asks that were much harder to like predict when they would come through and like get them to even acknowledge them i mean i think the other thing that's just like taking a step back from the whole thing i actually think one of the most chill like not showing like scary but chilling in the sense of like slowing down the rate of progress type chilling affects this whole thing is the way that it's like uh ask for permission rather than ask for forgiveness model whereas and it's not so much about making more stuff get through the cracks but it's more like like if i was teaching someone to make a website the first thing i would try to do would be to get them to publish something like to the public web so they could send it to their sister or their friend or whatever and be like check out what i made even though it just says hello world right now now all of a sudden i realize like i just realized that you saw that and that like you reacted to it and so i mean like i can change that or whatever and um and i think like it's it's really fascinating how like a lot of times i think when we see students trying to learn stuff with expo and whatnot getting something into the app store they suddenly have this magic moment that's like wow i made a real app now i'm not just like practicing or doing some sort of made up fake thing or whatever and it just feels so much more real and i think that's part you know what part of the magic of what like these companies like purcell and netfliphi have done is make that really really fast for the web where you can you know start a github repository like literally write 14 lines of code or maybe even less push it bam url comes back to you in a couple of seconds and you can send that to anybody and they can see it live and that's awesome and it's really hard for us to do quite that magical of a instant turnaround for people um with expo because there's this step that's like wait maybe two days for google to get back to you and so they're just like how do you speed up that process um one thing we did a really cool story that i heard um that that made me just it was just like made me feel good about the progress we have made on that front at expo um but shows how there's still a lot more room to grow is at the beginning of covid um there's this uh company in the uk called zoe health um and they're basically like a big health technology company or whatever and they just sort of want to do something about covid because it was sort of the big health crisis in the world um and so what they came up with was that they thought okay we can make a symptom tracker in the same way that like google flew trends was like pretty good about figuring out where like flu outbreaks were happening and then you could kind of know where to be more careful or know where to send more resources um the idea was kind of like hey if we can get a whole bunch of people to report if they're having code-like symptoms then we'll see where there's pockets of this stuff breaking out and so even if not every single self-diagnosis of symptoms is like a perfectly accurate like diagnosis of code or not if you can get together a whole bunch of data and sort of look at a map you can really start to tell something that's going on and so they decided okay we'll build this symptom tracker the thing was that they were like okay we're in this early stage of code everything is changing week to week every day kind of matters also people are the only way you're gonna get a lot of people to do this is from their mobile phones because that's just like the way normal people work these days so we really want to build an app but we only have a couple of web developers on staff we don't have any mobile developers so then you think about like what are you doing that situation do you hire us you hire like somebody who does swift development and somebody that does like you know kotlin development and then go build two apps in parallel to some spec that you make i mean first of all it's going to take you at least a month probably to hire a competent switch developer if you're you know starting from scratch you don't already have a pipeline in place called developer take about the same time and then it'll take you months to build like an app like that and to try to keep those in sync that'd be really really hard but what they were able to do was they basically their web team found expo was able to build like an mvp like a super super minimal thing in like 48 hours after they had this idea and then they submitted to the app stores and they got it approved in about the next 72 hours but during that time they were actually used they kept working on the app and they were to use the expo update service they can push out changes to your javascript without changing the binary and sort of do continuous deployment over um over the air and so then by the time that like they'd launched a week after having the idea they actually had a much more complete version of an app that was no longer the most minimal mvp but like a pretty solid v1 and so then um because they were a pretty big healthcare company that was connected to a bunch of you know a bunch of media outlets and universities and stuff be able to get a lot of publicity around the launch and they literally went from idea to having a million users on their apps and being deployed across ios and android in one week just with a team of web developers who are now building sort of like native apps and that was like a really cool story for me just because we'd like compress that time down and so like this thing that like not only would it be like like nobody ever wants stuff to launch slower or be delayed or whatever i mean at least not usually it's usually just because of like cost reasons or things like that but i mean literally this product wouldn't have made sense to launch it was going to take six months or nine months or something like that it only made sense if they could do it in a time frame like that and so that was exciting to me just to see like more things will happen when you make these things just sort of like cheaper and faster let's get into some spicy stuff because you're triggering a rant i've been waiting for the right time to go on this is a conversation i've been having more and more i i have taken the spicy stance that for companies and products that could be using react native in particular with expo and choose not to that's an irresponsible decision not just because like reacts the perfect technology or something like that but because of the agility it offers around the the very simple reality of like code push and expo update the fact that when i make a change i fix a bug if that doesn't touch the native layer or or not even it can touch the native layer as long as it doesn't change the native layer i can expo publish locally and my users get the latest version of the javascript bundle that is the majority of the app the vast majority of the updates i've shipped in my life have been things that didn't require a native change why do i have to go through a three week possibly even longer sometimes review process to do a like tiny two line of code bug fix that's the reality of the app platforms and if you're trying to build like if you're trying to do something like we just described there imagine that app having a critical update getting blocked by apple or just taking too long to go through the review when you could instead swap out the javascript bundle it's irresponsible yeah i mean i mean this is another thing where you can like learn from the web i remember when i was starting to work on quora um i saw this i actually was introduced to the idea of continuous deployment from like there was sort of a moderately famous blog post from eric reese who was like i think he'd worked at imu at the time he's doing some interesting stuff like long-term stock exchange i think was the most recent thing he's been working on now but he like he basically just like wrote this pretty popular blog post about kenya's deployment i was like that makes a ton of sense and so we just from the very beginning of quora we set it up so that like you write tests for everything if all the tests pass whatever's in the master branch on git i guess would be made now but it was master back then like just deploy it live to the website and it just it's so good like there's all these little things that fall out of that that you don't even like obviously the things that you're talking about are like the obvious benefits like there's a critical bug can we fix it today yes we can but then there's things where it's like oh like hey could we collect data about why people are getting stuck here like could we you know record more stuff here in our metrics and it's like in a cycle where you have like a two week release cycle it's like oh okay yes we will put that out um you know in the next two week cycle which would be ten days from now then we will collect the data and then we can learn some stuff from it and then we can make a change based on that so a month from now you can have a change based on that whereas you can imagine if every commit is going out maybe you put out some tracking and something in the morning start getting results by lunchtime realize what the problem is push out a new change to your signup form or whatever same day and all of a sudden that month it gets compressed down to like a single day and stuff like that and so like there's all these sort of like knock-on effects of like speeding up this whole like system that are like sort of compoundingly powerful um and it's such a big deal and like that yeah i mean absolutely like the more and also it's just like people want to write their expo apps mostly in javascript and typescript because that's what their developers know it's easier it's faster but when you do that it also has this benefit that yeah you can change that on the fly like and that makes a huge huge benefit for for people i've long preached it is the most undersold benefit and it's one of those things that's so good once you have it that i'm gonna need a lot of convincing to not have that like if i'm working on a mobile team i want continuous deployment or at the very least the ability to run a terminal command to fix something that's broken in an emergency our app's quality shouldn't be blocked by apple or google if you want them to be blocked by apple or google you better have a damn good reason for it and i find that that conversation point like to start works a lot better and also gets a lot of the bad faith out of the room that i tend to see in the react and expo versus conversations so if you're down i'd love to dive into that a bit i know that this is something you're painfully familiar with i'm curious how often you still run into the but what about native conversation we actually like surprisingly little i think that like there's a lot of times where this sort of change happens in the world where like around the time somewhere around 2008 or so there's kind of a dividing line where startup slippers started before then like have their own relationships with data centers and like run all their own servers and stuff like that and they kind of like built up the muscles to do that but then starting after around 2008 you had a whole bunch of people that just sort of like started trying aws or whatever and then we're like they never built uh the same kind of ops team they just like kept going on aws and so they're just like just like learn how to do things in this totally different way and so there's there's a couple of companies out there that are just like been around a long time and have you know like even facebook who like built react native they're not gonna or maybe not never but like it would be an insane amount of work and a whole bunch require a whole bunch of things to like take their sort of big blue app and replace the entirety of it with react native they can do parts bit by bit because they they develop technology and have a bunch of skill with it but it's just such a big thing and like is the sort of core uber app gonna be rewritten in react native like it's just very risky and they already have a bunch of ios developers a bunch of android developers and it's kind of working for them so like why would you like roll the dice with some big change that like might make you go faster in the future but might might have surprising downsides or something like that whereas new companies like it's so hard to hire great people who can do swift programming or android programming and so the only startups that i see that are doing that these days are basically ones started by people have a bunch of experience building software that way um and those people like that generation of people is sort of like dying out where like if you are a kid in college today like um there's a i've heard that there's a i know there's a mobile development class at stanford and they teach they use expo basically to teach people to make mobile apps with uh you know quickly and start off as a student initiative sorry to like certainly i'm so used to university programs that like use tech from 14 plus years ago it's just i'm geeking out knowing that they're using something that new yeah i think that's just like a credit to stanford that it's like one of the most cutting-edge universities out there and it's it's in the heart of silicon valley and connected industry and whatnot but even in this case it still started off as like a student-led course so it was sort of like like a half real course or whatever um but somebody told me that this year the enrollment that in that course is higher than the one in the iphone programming class that like taught you know how everybody learned objective c back in the day was like these free videos at the stanford iphone program class and so i mean it makes sense like why you know it's if you want to just like be able to build that fast like this is just a faster technology it'll get you to your your result faster and so i think like fewer and fewer startups are going to have like oh a co-founder randomly did a whole bunch of ios at this company or that company before or learned it in school um and so it's just pretty rare that we see i think much more commonly it's just like people choosing like either they have some sort of like clunky thing that was built using webviews before that they're redoing or they didn't have a mobile app and expo is sort of the like it's pretty common that it's like our choice was not expo versus another thing it was only have a website and just say we can't afford to do a mobile app for now or use expo and that actually makes it fast enough and cheap enough to do because we can take our web developers and they can build an app with expo like that's that's almost the number one comparison that we we get is sort of like expo or choice to not do it i that makes a lot of sense and i like one of the questions i had was expo versus native or expo versus no app and you totally answered that one but i do want to push back slightly on when should an uber adopt react native into their existing app i have a very strong like uber specifically probably shouldn't they have an existing app an existing team and are mostly an application like mobile platform but something like one i talk a lot about twitch i firmly believe twitch should adopt react native not because they have a native team that's bad or because the state of the app or even like the update thing that i'm pushing for which would be huge for something like twitch simply because mobile's the one platform that product teams can't hit directly so if you're on the chat team at twitch or you're on the safety team at twitch or you're on the music team at twitch if you want to make a native change to the mobile apps you can't you can change anything else on any other platform at the company mobile web core web uh back end front end the native apps on desktop through the electron layers but on mobile you cannot own your product as a product team unless you hire specific talent and i see more and more companies moving in this direction where rather than having teams around specific technologies or specific like repositories they have teams around specific projects and products inside of the company and it's almost like a company like amazon or twitch is a bunch of mini startups and expo and react native would allow those startups to not be required to hire two mobile engineers one for ios and one android for every single one of them right and i think it's a much better way to organize if you can and one of the dilemmas of doing mobile development for you know basically like 2009 through probably you know 17 18 19 20 was basically like do you organize yourself by product or whatever but then you know can you get somebody to do ios and android and keep all of swift and all of collin and all the but not even just like those languages but the apis on on the ios platform and the android platform like all in their head all at once not that's that's just really that's a lot for an individual to stretch for so then so you end up needing to hire these separate people but then you're frustrated because you do want to organize yourself by product because that's how like somebody designing something and building some of their users is actually thinking about things um and just sucks to you know pay this coordination cost of keeping your ios in sync with your android dev um so i do think like one of the key things that react native or you know this is probably true of flutter to an extent to um gives you is just like this ability to organize yourself in a way that much more closely aligns with the way that like every non-engineer in your organization and all of your users think about your products totally agree it it frustrates me when technology decisions are made in a way to are made more around the people who have the most experience with the technology rather than what is the best for the company or product and i feel like the native conversation for mobile is often plagued with this yeah there's a couple of things that make um a couple i mean these are some of these are just sort of in the wheat's technical points but i think they're actually kind of important so when i think about like you talk about somebody like uber moving to react native um there's a couple things you can do and a couple of things you can run into one is like i i've heard i'm not 100 sure but i've heard that uber eats is actually written in react native um and so like a lot of times companies i'm almost positive that uber is react native yeah and so i mean it's it's not even actually has to 100 the point can still stand even if it's not true but i think it is um that like one way that you can get a new technology like this in a company is like the next product in the next product or build with it without having to like do this sort of conversion of a bunch of legacy code and like change the legacy organization or whatever um and that and you can kind of see like that happens enough times and then you eventually end up with like most of the stuff that your company offers being in something like rack native and that's probably like the most organic low activation cost smoothest way to do something like that um some of the chat like if you did try to say hey we have a big binary app that has 100 ios engineers and 100 android engineers working on it like there's a couple challenges there like just to compare to web like one of the reasons react is so popular and one of the ways that the story i hear a lot about react is like oh our startup was using you know knockout js or whatever and then some new person came into our company and was their first task was to like do something on the settings page just add a field or whatever to let somebody turn this off or that off and they basically just like wanted to use react for it and so they just added react to that page and they used it for this one corner of the page and it didn't add too much weight and it just like didn't bother anybody so it's fine and then somebody else was like oh that's actually quite nice and so then half of the setting page is now written react and then a month later now the whole settings page has been rewritten and react and then all of a sudden now the profile page is two and then you know six months later we're doing a conversion where like the whole engineering team has now gotten on board with like converting the whole website page by page but it sort of can be this very incremental thing where you get buy-in at each step and at each step you're kind of like proving that it can work and it's not going to cause problems um and then it can also inter-operate really well whereas like there's a bunch of challenges when you introduce react native into a code base like and you can kind of see how it can go wrong like one of the things that i think was pretty bad for react native overall was like airbnb for a long time was like hyped as like the flagship outside of facebook adopter of react native and like they had engineers talking at every conference about how they were doing stuff and all that kind of things and then one day i think maybe 2018 or something there's sort of blog post appears it's like why we're dropping react native from our whole stack or whatever um and i think a lot of it was just sort of like sort of the way like an organ transplant can go wrong if it like even if there's nothing wrong with the organ like the host body might just sort of reject it i think it was just sort of part of it was like an organizational thing it was like there's these two groups of people now who are working on stuff and like there's sort of ways that these layers have to interact and and like there's chafing there and etc etc but then another part like when you start getting into the weeds of the technical stuff there's actually some pretty good reasons that aren't even really about personality or politics or anything like that or like just think about like client-side state management if you're doing if you're writing react native app you're going to do most that in javascript like you might use redux you might use like xstate or mobx or any of these or you know there's a bunch of other things out there as well but you're gonna and today you're basically using javascript variables to like store the state of your application um and you you know you're probably doing some smart caching so you when you fetch stuff from your api whether it's graphql or rest or whatever you're not refetching the same data all the time if you don't need it and you're like keeping stuff around and keeping organized in a reasonable way but then if you think about like if you write a swift app you're not using java like you don't have a javascript interpreter and you might set one up or whatever but like you don't necessarily have a javascript interpreter you're gonna use like swift data structures to store everything and so then if you're gonna you know if you think about oh i'm fetching theo's profile picture and i'm doing it from swift now i'm storing like the url of that another metadata about it etc etc in these swift data structures oh but now i'm in a react native screen some other part of this app how do i get access to that stuff do you make some sort of layer that goes back and forth between your react native app and your swift layer um that like shares that data that's a huge amount of overhead and like a huge amount of cognitive load to think about um or do you just like refetch the data separately and keep two copies of it now your app's taking up more ram and it's slower and like all there's all these other things and so like there's just ways that like react native and native don't like completely interoperate as much as at least and they can be made to and i think this will people will invent libraries and solutions that make this smoother and smoother and smoother over time and i think actually probably most stuff will end up in as apps move more and more to stuff like react native the data will move mostly into javascript um or into like really specialized libraries that are managed by javascript um but uh like and this problem will slowly sort of fade away but that's just like one example of things where like it actually is like a bit harder to do this sort of brown field or hybrid solution where you're writing a bunch of native and mixing it with react native that's like much much harder compared to the to the way that you introduce react on the web where you're still using the same programming language you're still sharing all the same memory and data structures and whatnot and and can kind of bounce between the two worlds very very easily and transparently where it's much much more complicated and and not maybe i don't want to overstate the complexity but it's definitely more of a hassle wait javascript for state i thought that everybody was moving to sql light for mobile state did you hear about facebook with messenger well i mean this is like i think i think people will figure out really good techniques and sort of standardize them and that like stuff like that will likely be like you know maybe that's the foundation of it yeah possibly i mean sqlite's very fast and very good at that for like that kind of thing and sql is a universal functional programming language so technically speaking it's not it's not completely crazy yeah this is a really interesting framing of like i guess i don't really think enough about the data story when i think about mobile because i'm usually like when i think about react native on mobile i'm thinking about how excited i am to take the working like state solutions from web to mobile like i can copy paste the hooks directory i have in most of my projects that manages all the hooks for our like api calls paste that into a react native app and it's good to go if i feel like sitting there and like bashing my head against lerna for a few weeks then i can eventually get those in the same repo with like the native app the like web app and a shared package that has those hooks with that said i am really curious in a world where we're all moving to these full stack solutions like remix next.js and like providers like versel and netlify that are trying to like solve problems top to bottom where does expo fit there like what's expo's relationship with the back end and uh full stack app and how are you guys thinking of that as you continue iterating on xbox especially the last year so i've been thinking about it a lot more um but i think like the first step of that is really like like when we started working on expo we really thought about like hey people have two problems when they're making an app they have an android problem and an ios problem if we can collapse those two problems down into one problem just like the make the app problem that's a huge savings but then the further we got into it it's like no that's not quite right people actually have three or like three and a half problems they have ios and android and web and like you know if you can collapse your ios and android and one that's great but you it a lot of the same challenges that you were describing about like separating out people by technology and how that is an organizational sort of necessity sometimes but sort of like handicap in others it's like you don't actually want to have like a separate web team from us from your from your sort of native app team when your products that you're trying to build are the same like if you think about the way products have evolved like if you go to instagram.com on your mobile device it's essentially pixel pixel for pixel a very close clone of the mobile app i'm pretty sure it's a totally separate code base written by totally separate people but they're like looking at the same design mockups and figma or photoshop or whatever and they're being sort of give their sort of assignment is basically like clone this thing and that's sort of like that's sort of silly like why wouldn't you just want all these product implementations in sync across every platform you're going to have fewer you know missing features fewer things to explain in your support docs you're going to have fewer inconsistencies or fewer weird things hitting your api because one version is lagging behind the others like you just want all these things to move in sync don't you and so we really like we have more work to do here to make this as good as we want to be but um we're really excited about what we're seeing in terms of how many people are trying to are basically going out and saying we're going to build something using react and using you know ios android and web all from a single code base not trying to do like something with learn our multiple our yarn workspaces or we're trying to like have two repos that share a couple of libraries but just really go the whole way and i think that like the technology is pretty close to just being there there's just a handful of things that to make it like feel nice and not feel like oh i really am making a lot of sacrifices because i'm using like expo web or recognition web instead of like react on um i mean it also you can get really good results like you know like the the origin of rack native web is this guy nicholas gallagher was working at twitter and was sort of tasked his team was tasked with like making the mobile website better and faster and he just liked a lot of the architecture and react native and so he's like even though we're not going to make an app let's just build a i'm going to make a library called react native web that will let us like write our web app and using rack native's paradigm and that's how we're going to build this website it turned out pretty great it's fast responsive people like it i guess the metrics must have been good because they basically took their main website and replaced it with the code base from their mobile website and so like you know this top 20 website in the world is built this way and it's quite good and so yeah you could build basically any website that way there's you know the navigation stack is a huge thing here where like the navigation mobile apps is different than in the browser we have a url bar and a back button and stuff but you know i think if we think about each one of these problems and come up with good solutions and help people with those problems i think the standard should become that you build for every platform from a single code base i think and that's like one of the things we like we're looking forward to next we're not as staffed upon as we'd like right now um but that's that's something heavily on my mind my next question was when are you guys hiring fernando then uh wilfred fernando is like building his own i mean he's like the cto startup and actually going back to sort of the beginning of our conversation um i mean obviously like we'd love to have fernando on our team he's an awesome dude um and i've told him that but at the same time it's pretty great for us these out there like building a real thing with our technology because we learn so much from people like him that are pushing the limits and just like being thoughtful about it and so whenever he tells us something about like hey this isn't that good or like what about this like we it's really really legit and like without people building real stuff on our we'd end up with these blind spots of like oh like we thought we did a good job here but no one's actually really used it and so can you actually build something that good with this or whatnot um and so uh yeah there's a bunch of people out there who i like on the one hand love to work with on the other hand i'm like happy they're building stuff on with expo outside of expo because it's like an ecosystem and it needs those people totally agree i definitely feel a lot of that at even ping where we have some of the coolest users imaginable that are doing awesome stuff with the product that in the future i would love to hire but right now we need them and their feedback more than we need them as a potential like employee and if they help us get to that point then in five years it makes so much sense to snag them and like work along those lines i will say that the the promise of write once run anywhere is something i have always been a little concerned about especially with the unique types of applications i tend to build something like ping that we're in right now building in a platform agnostic webrtc and device management layer that could be reused between the web app and the mobile app is a much bigger ask than building two decent uis into slightly different projects that share a ton of like the data and state management yeah i hear what you're saying i think that there's a couple of things that you that like you can do to mitigate that and one of the things like a very high level at a very high level being practical or maybe pragmatics the right word here about it instead of like zealously committed to fully single code base what i mean by that is just sort of saying like it's perfectly fine to say hey i'm going to have a switch statement here that says if i'm on android do this if i'm on ios do this if i'm on web do this and handle stuff a little bit differently in those cases and like instead of thinking that that's like a blight on your code base that like somehow has to be ironed out and everything has to be pulled back into these abstractions that like solve everything and for all devices even theoretical ones that aren't existing yet that you just sort of say like hey like let's just make this work for us right now um and then and even at a screen level as well like just some saying like hey there's some really cool stuff we can do here if we use the latest apis on the latest iphone and we want to put this on the screen here but it's just not going to work on web or it won't work until september on android because that's when this is dropping or whatever um and so like just being willing to just say hey yeah we'll get a lot of benefit if we try to make the whole thing like a single code base but then where that just doesn't work we can just say hey do this different thing different thing different thing um yeah and then on um i also think though that like a huge part of why you want to build a different interface is partly just about like screen size and screen ratio and whatnot and um like you know desktop it's just more like landscape it's usually bigger et cetera et cetera et cetera there are other differences as well like um you know like you can like one thing that i learned pretty quickly when i started working a lot more mobile is like you have incredible precision with a mouse like people can really hit like a two or three pixel area with like a lot of reliability with a mouse whereas when you're like sticking your fat thumb on a phone it's really really hard to hit like a small target um with any precision especially because people also like walking around with their devices and like fumbling in their hand or whatever and so um just you just want slightly different press but when you think about web so much of the web usage is actually moved away from desktop to mobile web that like so many of these design principles in terms of screen layout and like what kind of interactions you want etc etc you actually want them to like to be more mobile like instead of what we traditionally think of as web like from you know our experience sitting on our computers 10 years ago before the web really worked quite well on mobile phones interesting i i definitely discredit the the switch statements like platform a little too much like i i this is like very strong bias because of the type of stuff i build but the thought of like mounting a different call component with its own entirely different like device management layer feels like i'm losing [Music] like like the problems that we're spending our time solving are not the platform problem and i think that there are really compelling ways to share the hard parts and also solve the hard problems that aren't necessarily starting with the same code base all of these things are mono repos and i'm a really like increasingly bigger proponent of mono repos i love a future where like we have our back end in trpc that exports a react package that both our front end and our back end can use oh wow i'm getting follow botted right now that's fun finally big enough for things like that to happen uh rad uh if any of my mods are around i want to figure out how to deal with that i'd appreciate it no worries i'll bug somebody at twitch later if i have to yeah this is insanity well anyways i think that the vast majority of applications being developed right now absolutely would be able to do like one code base for everything i think every codebase will eventually be able to do one mono repo with the hard logic the state management and the the problems with complex interfaces being shared across the things that consume them and things like sharing the logic for how your chat is managed or who's in the call those are the problems i really want to share the code for and not have engineers rethinking i'm okay with an engineer having to rebuild the jsx for two different platforms much more so than i am than rewriting the state machine that makes sense to me i think um and i i think that you're probably right that like the one platform everywhere there's probably some set of things that end up with just like mono repos of different web versus mobile things but i think that i think that you'll be surprised by how many things are able to get to a state where pretty much everything is just like one code base because i think once you switch once you flip the id on its head and sort of the default is to start with like single code base runs everywhere then i think you end up in this where if you have to come up with not a reason to like force that to work but instead you're like this is just how i work and then wherever this breaks down then i break out of it i think a lot of things will actually just work fine under that paradigm and there's just there's some tipping point on the road ahead of us where people like get this idea that like i probably can't for most things just have a single co-base everywhere and then once people start like when they when literally when they're starting a new project when they're setting up their directory structure and things like that they just sort of start down that path of of sort of single code base i think that things will just like stay that way for the most part that much i definitely agree with my one big concern there would be the the exit story i am always concerned whenever i adopt something new like what does moving off this look like it's the reason i don't really recommend solutions like fauna db not because it's like a technically inferior solution just because if i change my mind and i built into this thing that's not sql moving off of that is incredibly difficult whereas if i use a sql provider like planet scale i can move to something else my concern with like react native for web and building on top of an abstraction of web is you're now abstracted in a layer that's a lot harder to replace you either have to like own that layer or rebuild the things on top of it and that's a huge risk to take on versus like sharing your state management solution is a lot different from sharing your route i think that that's a that's a really reasonable point i think that one thing i would say that makes me pretty that i really like about react native web and just it's more thing about react maybe anything else is that like react native web is actually a very thin abstraction a lot of ways in the sense that like if you write like a view in a react native app and then run that through xo web react native web or whatever you're gonna get a div basically like it's not like some sort of crazy transform compared to the way a lot of other things do it where they'll sort of say oh you know we have something in wasm that is like a complete renderer that handles every pixel on screen and we have this other runtime and that's outputting this ui and then we're using our sort of custom renderer to like draw everything in a canvas or a webgl context or something like that it's kind of like whoa okay like that's a real like now we're like in a totally different system whereas like you can take something that's like filled with react web and it could like live on the same page as something else that's written in react or not even using react and just like just sort of interoperate because it's not there's not a lot it's like a very thin layer in certain ways and the transforms and and whatever are very they're pretty straightforward intuitive it's like there's multiple places where abstractions can occur they can occur in like the development layer in the build layer and in the like runtime client layer something like flutter where you described here is with a canvas on client that abstraction is at the client layer the runtime is fully abstracted away from the way that the browser normally does things the abstraction for react native especially recognitive for web lives a little higher where it's still calling and doing the native stuff your solution and like the renders are still occurring in native land for whatever platform but you're still committing to the abstraction on top of that in a way where where the code becomes less reusable and like i i'm being harsh not because i think this is like a huge flaw that's going to prevent react data from taking over the world or expo this is more i want to be very clear i can't and i'm very unlikely to reconsider like i can't move our architecture at paying as much as i would love to be a native first it's such a huge risk for the way we're building to buy into an abstraction that high when like there is very little that we are using right now that i'm committed to in that way and i need a happy story out right and i think here's what i would sort of say about that like um if you look at like if you talk to people like working on a startup for example uh like i remember us we at one point we used auth0 for auth at expo and it just kind of broke like they just like lost a bunch of our youth our data about our users and it puts us down for three days and nobody could log into expo and we just it was just like a nightmare and so then like so we eventually moved off it obviously after that because it's just something that's too critical it can't go down like that you can't just lose user accounts um and i think as we were talking the team it was kind of like uh how could we have trusted such critical stuff like our user data to like a third-party service provider and then it's like it's so good that we've moved it now into our own stuff but really our own stuff just meant it was like on google cloud and aws which isn't really our own stuff it's just that we like trust google cloud and aws because they've been around and they're support and like there were enough other people are using them and it's reliable and you sort of like at a certain point you'd get to the point where you're like okay that's like safe and it works and i don't need like you don't even sort of think of it as like a third party or a thing that you're like locked into as much and part of it is like you know if amazon's not working for you you can move to google cloud or you can move to your own whatever and there's some portability there but part of it is just that you like stop thinking of it as an abstraction or a layer when you start to just sort of say okay that's going to be fine like i don't i'm not like worried about being locked into it as much interesting i like this like i'm thinking of expo the way i think about express you're thinking about expo the way that you think about aws and i think that makes a ton of sense and is a really good way of putting it i like expo is a lot more than a framework you're adopting in a way of building a website it's a way of orchestrating an application's development and as such building it in a way where every part's replaceable just doesn't get you where you're trying to go yeah at the same time though i do think that that's one thing we've learned over and over and over again is like developers have all these different ideas about how they want to do things and they're going to find they're they're going to do them or they're going to be really upset or they're not going to be able to do them and they're going to be even more upset and so like you just have to like like if you kind of track work we've done over the last like three years or so so much of it is basically sort of saying hey wait people might want to do something weird and different here that we didn't expect we need to give them a very smooth way to do that and so like um originally like a way a lot of the way expo was built was like kind of started from this browser idea that we had um but then as we've become much more developer focused and just helping developers and stuff like you can see the like expo is much closer to like the bare metal of i mean it's a ridiculous term for this but like you know i've sort of react native like there's not like people used to ask which i use expo or react native and now the answer sort of like there isn't really like a difference because you can use kind of any part of expo with any of like modern expo stuff with like you just any kind of react native project and you just add the parts you want to use um and it's not like there's no sort of hard fork in the road where you have to sort of choose something in a big way and so just like accommodating more flexibility as developers needs change or as you just encounter a developer with an unusual use case or unusual situation um i think that like i would bet that any company working on developer tools or similar products is just repeatedly encountering like oh yeah we need to just keep adding more flexibility and more portability and more um ability for people to customize and integrate with whatever they want to integrate with very interesting i i really like that way of thinking about it one of my favorite things when i'm like trying to pitch the react native ecosystem and expo to like another developer team is i'll have them scroll through the packages directory in the expo github repo to see like how many pieces are there for you to consume and i really like that framing with expo and one of my favorite like changes expo made was with eas when they stopped everyone y'all stopped using the expo client with every native package anyone might need and started shipping the thin client that builds in whatever you're in whatever your package json includes and it's almost like you allowed developers to build the best custom browser for them in their use case and gave the plugins needed for us to hook in and out of that directly yeah and i think that you'll you'll see us continue to move in that direction where it's just like um you know help like don't just make assumptions about what people need or want like build what they need and just like assume that there's going to be total beginners that just needs stuff to work quickly but there's also advanced people that like care about all the little details being exactly a certain way and you need to support people across that whole spectrum and um yeah are these things at odds in any way i'm trying to find the right way like have you when given an issue do you find yourself almost asking like does this solution or we would use this solution but can weak because it might hurt this other user on the other side this way like something that makes things easier but might make more advanced use cases harder something that makes advanced use cases easier that makes react native for web a harder target um we never really think about making react native web a harder target because we're still in the process of like kind of getting to 100 parity there and we know we don't we kind of know we don't want to slow down the progress of everything else just to sort of give wreck native web a chance to catch up like we want to make sure that it's catching up because it's catching up to where people want to be not because we've slowed anything down so we don't really make any do anything that way there are times where like um like if you think about something like expo camera like a big theme of what i see people doing is like they want to do a lot more multimedia stuff like ping is a great example of this where it's like a web app and like a mobile app or whatever in certain ways but it's also like it's leaning heavily on camera microphone other kinds of stuff and so like and if you think about like a lot of what's popular like what are the most popular apps that come on mobile recently like tick tock probably the most recent gigantic thing what's popular before that like clubhouse got really popular and pandemic times and like that's these are all of them seem to lean on multimedia a lot and so one thing we could do is like put a lot of energy into making our multimedia stuff really really really good but until we have a chance to make like expo camera and expo av like handle everything that you possibly might want to do kind of where the web apis have finally gotten to on desktop um or at least like are approaching maybe not maybe sort of asymptotically but like not they're not fully there yet they're pretty close if you're willing to lock out every browser other than chrome which we were actually forced to do fun fact the 60 fps video mode memory leaks and crashes firefox every time if you're receiving a 60fps video over firefox's webrtc implementation your firefox instance will crash yeah and i think like that's kind of i was sort of talking about how like part of what is a little bit good about the uh sort of duopoly and mobile operating systems you do have these like instead of a huge list of value vendors it's just like you have these two and they're a little bit more free to kind of like go ahead in a way that like though in practice the web is basically this now because it's sort of like chrome and safari and then firefox playing catch up but it's not like there's even like you know edge is really just like essentially like kind of a chrome based thing at this point um and there isn't really as much competition um anymore but in stuff that's new yeah like you you you're you don't get the standardization as much um but yeah multimedia is really important but in mobile like we have to think about like do we want to try to like give everyone this camera thing or do we want to empower people to you know use whatever video module and video recording module and streaming module etc that they want and in the fullness of time we basically want the answer is both we want to have an amazing set of multimedia primitives that covers basically everything but also if you wanted to you know do your own thing with your own binary code or whatever you can do that very easily as well it's just sort of for us we're we're pretty small companies still so like we can't we have to pick and choose a little bit on like what things do we want to get done in terms of like i've just been talking about how i want to make all those advancements on web but you know any person working on that is maybe not working on making the expert camera module the best or not working on making sure that it's even easier than it is now to add in your own native code and get that compiled and back to your device or to your friend's device or your co-worker's device as quickly as possible so in sort of a theoretical point i don't there's that much tension but from like resources and like what can we get done today and this year and this sort of quarter um there's more attention there just in terms of priorities that makes a ton of sense i it's a slightly weird tangent but i think it's similar enough i'm curious how you think of expo's role in the ecosystem in terms of like what y'all should be working on i know that expo contributed heavily to like react native unit modules and directly to react native in order to make some of these technologies happen like what's the relationship like with react native itself right now and like it was like on the other side the relationship with your community like who's contributing where and how do you think about that at expo yeah i mean uh it's always changing because like we you know james my co-founder and i both in the past worked at facebook and so we james knew a lot of people in the react team and so in the react native team so we actually had a pretty tight relationship with a lot of people working on in the early days and those people have turned over a lot now and so i actually uh have i see uh eli white who runs a lot of the rack native stuff at facebook like every couple weeks we play ultimate frisbee um and so we just will usually talk a little bit after that and sort of stay in sync and we have a bunch of different channels open with people at meta and obviously people out in the community we work really closely with solver i mentioned in poland who works on who's developed a bunch of great libraries like around screens and reanimated and it's helped us with like we work you know some of their people are like essentially on our team at this point um and uh and obviously we have a relationship with like you know infinite red and call stack and all these other sort of big name groups in the space and we i think everybody and one thing that's great about developer communities is mostly people are sort of not thinking like cutthroat competitively but like there's a whole lot of stuff to get done here let's all try to help each other and help the whole ecosystem and so it's pretty good um i do think that like one thing that is um one thing that's interesting about the react native ecosystem that's it's one of those things is good and bad is that the sort of the number one goal of the react native project at like inside meta facebook or whatever is basically to help meta facebook build software for themselves the really good thing about this is that they have some of the biggest applications in the world they have a ton of good engineers and like they're like so they make it work part of the reasons it's like quite good are that they've like had to make it that good to be able to like be accepted inside that organization and meet the standards that they wanted to meet and like you can see like they care about performance on low end android a lot more than a lot of people do and like if some sort of random group that just only had macbooks and iphones was working about on this project and not even testing on loan androids there would be a lot of ways that this would be a lot worse of a project and stuff like that the flip side is though is that um it's not really like a super high priority for them to like get to like have it solve every problem for every kind of other developer out there like they don't really care about you know ping or whoever like whatever startup to have that much success with react native they sort of do in a roundabout way where it's like oh if there's a whole bunch of rack native engineers that's great if they come onto our team they'll be more experienced and they can ramp up faster building our next thing and it's just good for our brand to have our successful open source project out in the world but those are pretty sort of like second or third order like they're just not like top priorities the way the and part of this meta facebook doesn't have like a developer business the way that like like if you look at the resources that google is putting in a flutter a huge part of that is they actually have this business built around google cloud and firebase and these kinds of things and flutter you can kind of and like they have other i think they're trying to you know use fuchsia as the foundation for you know a lot of their sort of hardware devices and potentially you know maybe the future of mobile phones and whatnot and the flutter is also the so they have other strategic reasons as well but they actually have a developer business so it makes sense for them to hire a ton of developers and advocates and people to just like make content around this stuff and make sure that it works for people and that like you know upgrading between versions is smooth even if you're outside whereas like at you know facebook they're more like is this working for instagram is this working for the facebook marketplace is this working for the next product that we have are those two like are those teams that we just met with on our campus satisfied rather than like our job isn't to solve problems for you know so and so in austin texas making some you know menus app for restaurants or whatever um that's actually kind of funny oh i was just gonna say like the the weaknesses of react native are often either in the parts that like no product that facebook cares about or that are the most important at facebook because like if you think like a good example this is sort of um like there's there's still room for improvement with some of the sort of uh sort of long lists of sort of feed like things and it's kind of like the feeds for instagram and facebook are not written in react native because those are too important and too valuable and just like too connected to their ad revenue and engagement and all their top-line metrics so they just like can't roll the dice like re-rolling them into react native whereas like you know for most people out there developing recognitive apps they're using you know the the list views that we have that are not bad but like not they aren't just like amazing in the way that like if if facebook was definitely like using those things for um their main apps there would just be this incredible amount of performance work going into all kinds of edge cases etc etc etc i know discord had to put a lot of effort in to try and get the listview to a point where they could be using it for chat across platforms and i think over time like people like you know discord using it and pushing it and just making it like people trying new ideas and different libraries and stuff like it'll just keep getting better and i think the community will solve this problem but i was just sort of pointing out as like a funny sort of good in the bad of the way that the project is sort of positioned inside facebook yeah it's i think the interesting part of this framing is how meta positions things in a way where it does what it needs to for them and it lets the community fill in what it doesn't i think react itself did this phenomenally well it was a way to turn state into dom with the component architecture as simple as possible it had no opinion about styles it had no opinion about package management it had no opinion about build it had no opinion about animation or transitions or even like state management beyond re-rendering like randomly slowly they added like the necessary missing parts to make it more adoptable but they never really invested in things that are kind of table stakes now like the back end to front end story or like animation layers and transitions in css and all these things that we see in felt and we see in angular we see in quick and marco i think meta's approach here is very different from others in the industry for various reasons but what's most interesting to me is how it's resulted not just in like libraries forming like react query or material ui but more importantly like companies forming around what the technology doesn't do to make it more adoptable for people that aren't facebook like i would argue meta or sorry uh versel is very much this they are taking the things react doesn't do and solving them so well that you can now distribute react globally and as easy as possible i think what you guys are doing with react native is very similar yeah um there's there's definitely something where like by leaving the space open it creates sort of this oxygen that allows like an ecosystem to form of people who like ambitiously go after a problem um in a way that like if if facebook didn't have a big developer to business they might just say hey we'll just take care of all this and with amazing execution maybe that leads to like all these problems being solved in a super coherent awesome way but that's really really really hard and so more likely it probably ends up with like a bunch of okay things that are sort of half-baked and whatever that's like a really nice thing about it lets companies exist that are really focused on the developer and not some be like one thing that i think is a little bit tricky about the um some of the ecosystems we see in the development world is it's there's there's these big platform players and a lot of what they do is like sort of strategic for them rather than like them trying to help you and i don't mean that there's any like malice there just more just like if you think like you know xcode being free like they're not trying to like sell a product to developers that like people buy because it's such a good experience or whatever they're like we want people to make iphone apps and mac apps in a certain way and they need a way to do it so we're making this piece of software for them and it needs to meet our other strategic needs but like nobody pays us for it so like it's just sort of like when you work with like apple tools or even you know google tools or whatever you're not you're not like a customer of theirs who's like usually i guess you get what i'm saying yeah this is a really interesting like who's the customer i hadn't thought about here like meta or arguably even google like the reasons they're building these things are serving specific purposes for themselves and the reason i would be much more interested in something meta does than google is because meta is going to solve one problem they have and let us build solutions around it and like i'm not met as customer i'm a developer trying to ship to an increasingly like growing number of users meta doesn't care about me and my needs what's interesting is they built their technology in a way where people who do care people like y'all at expo people like vercell like netlify like all these other companies even like remix forming they do care about me and my problems as a developer and a ceo of a small company and it's cool that react was built in a way where you caring can make up for facebook not caring yeah in some ways it's like it's actually very helpful when they're like yeah we don't really like it's very clear that they like don't care whereas i think we we talked a little bit when flutter was sort of first got it sort of 1.0 and we started to get a lot of attention and momentum we spent some time looking at like hey some of our stuff we could probably apply like some of our libraries we could make them work with flutter if that makes sense but while we could maybe try to do you know a lot of people get value from our over-the-air update solution can we apply that to flutter and google basically was like we're not really interested with working with anyone because we have a bunch of people on our team who want to solve these problems um i don't think that like word for word said that but like basically like they weren't they just like didn't really want an ecosystem of people outside of google like filling in this space they had their own ambitions to kind of eat it all themselves absolutely we are getting pretty close to time i want to open things up for questions i've seen a bunch of cool ones in chat and i want to make sure people can have an opportunity to ask more is there anything we didn't talk about that you were hoping to charlie i don't know covered a lot of ground yeah there was a lot of really cool stuff in this conversation i'm excited for the vod to go up to they're dropping more questions y'all in chat uh one i saw i just want to make sure i get it before i forget uh somebody asked if you'll be attending app.js conf of course um a bunch of i will be there uh i'm speaking there a bunch of other people from our team will be there um bryant will be there evan bacon will be there those are probably two of the more well-known personalities from from our team that would be a really cool set of all those things somebody asked uh will expo react native eventually target desktop native they mentioned something like an electron app but we can go into why it won't be like um definitely like philosophically we're a hundred percent on board that like i want single code base that targets every platform that you want to be so like i would love to target playstation eventually and everything like that um but like practically in the very short term like right now we do android and ios really well and we're working on getting web up to that speed and it's it's pretty usable right now but it's not quite on par with them and those i think are the biggest three things and we don't hear as much demand for desktop stuff i do think that if if you're using web and it works it's very easy to make an electron version that targets you know basically every desktop platform and it's pretty good um i would love to go like full desktop native with that stuff getting easier and easier now that like the ios and mac os apis are sort of converging even more and as microsoft kind of embraces react native for windows it's like a thing they're really supporting and whatnot um so i think that that will that's part of the long-term plan but it's not we're not going to announce anything anytime soon that's like hey you know here it comes like first class desktop support for native mac and windows stuff which is one of the resources to work on yet but really want to one day i'm very excited for that future i have a tiny bit of experience with react native for xbox funny enough because it's like a windows platformer microsoft like kind of blessed it and it's really cool seeing like react code running on things you would never expect another one that was mind-blowing for me was react free fiber i know you guys had some webgl and 3js support for a bit which was cool and being able to write and read react code that renders a 3d box and transforms it and having used interact with a 3d layer like seeing this like bridge like created between native application layers and react is still like mind-blowing even though it's been going for a bit yeah it's um it's cool one other fun one this is a very theo question uh what's the story for patch packaging and expo package uh you know i'm not the best person to answer this i think like one thing that we've been looking into is like using putting better support for pnpm in place um i for a long time have thought that the sort of way that like npm and stuff do these node modules folders seems a little bit wasteful and especially with multiple pocket products on your device um and there is a good amount of momentum buying pmpm the downside of that is it does make patching individual packages harder um i don't even know if i'm answering the right question here but like [Music] in some sense like if you just go into the node modules folder of some thing and change it that should get picked up by the one layer once it realizes there's a change um you might have to reset i don't know if you'll have to restart the bundler or whatnot um and i know there's a patch package package on npm that i've used in some projects mostly no back-end projects but i imagine you could sort of repeatedly patch your node modules folder in some sort of specific way programmatically and it should work theoretically but i've never really done this i it's such an interesting the reason i like ask the question is i'm actually really interested because of like the power of like react native unit modules and the thought of like writing a like a patch package in node in npm land that modifies a pod file or modifies like native code and then would be picked up and built correctly and like our team wrote this thing called config plugins that basically like it's kind of a programmatic way to do this so like um basically just sort of like makes it much easier to take a native package and then have it make whatever changes it needs to to your config files your pod files or other things in your xc project um things like that and um and so pretty common now that a lot of third-party react native module authors will use this config plug-in stuff to make installing this into an expo project or a recognitive project they're using with eas build kind of like a one command thing instead of a one command and then follow the other page the rest of the page of instructions on the readme um i still remember a lot of weird kotlin i had to write in order to get like the first dev build of the expo dev client working it was fine and it was like real early like early 2020 and i didn't know that i was like in an alpha six months before it would be announced but it's really cool watching how these things evolve well but we don't it just is not reasonable to ask like most people out there to deal with that and so just getting it down to like i have the thought that i want to add this stuff okay now the developer of that library has done the sort of work to say okay modify this file modify this file so it can go into place and whatnot um but yeah expo config plugins is basically like the main answer to that really excited about the act or expo like update and config future where i don't have to even open xcode we're getting closer and closer there i still open it occasionally but i am really i mean i don't like opening xcode in studio not because they're like bad pieces of software they're just big and fat and like i don't want to have to keep one open for each platform i just i want to move a lot of that stuff to the cloud i like think that i mean almost everything else you just see it happening more i mean friends who hail is working this thing mighty that's like moves your browser to the cloud where it's just like everything running your local device they're just it can be underpowered things can go wrong et cetera et cetera et cetera and so just like moving um like an xcode is it needs updates all the time it can get messed up in certain ways and so if we can create a world where people just don't need um i mean the other thing is like outside of the bay area macs aren't dominant and so like a lot of places in the world one of the early on we had a lot of people in like southeast asia who were using expo and we sort of tried to find out why and a big part of it was like it's really hard and expensive to get your hand on a mac there people want to make iphone apps and so this is like one of the only ways that they could make an iphone app without that and so we want to make it to the point where like any any developer you want to do native code you should be able to do that without your computer where like you're just sort of using our eas cloud service to to build everything for you and we can get you eventually like really high-powered art you know hardware so that like you know you don't need a hybrid computer you get a windows computer a linux computer or even like a laptop or a tablet or something that isn't even really like a computer in the sense that we think of a computer even though it's sort of obviously theoretically equivalent um and like just be using the the or you know build a whole expo app inside a web browser without having to like like this is actually a very common thing where people use we built this snack thing to sort of let people play around and experiment report bugs you know demo things to each other but a lot of people like they learn to make stuff that way but they don't actually know how to use the command line they don't know how to you know use git or whatever and but they would love to go to push a button there have it kick off a build in the as build then kick it push another button submit that bill to the app store get it live in the app store all from you know code they're writing in their web browser and there's no reason that can't happen we just need to put in work to do it i am so excited for us to be there i don't want to keep you too much longer i know it's getting a bit late and you've stayed for like well over an hour and a half now uh any last thoughts or things you want to chat about before we wrap up um i think that just like the biggest thing is like we we've done a ton of work over the last two years uh basically like saying hey we need to push out the ceiling of what people can do with expo we aren't satisfied with this just being something that people make simple apps or prototypes with or start on and then graduate off of we want this to be like something you can make the best things in the world with and so we need to just like make it work better for people who have like care all about all the details of their native code and whatnot and so i think if you have this so if you haven't really used expo for something serious definitely check out we've added this eas build product that let's they'll do building in the cloud um and also means that like all these things where it's like you were sort of mentioning how the old way x worked was you would builds would include every native module in our standard library of packages so that would lead to like a pretty big binary size and you don't always need that and so es build builds sort of the minimum size thing required and whatnot and then it can also add in you know whatever native libraries you want every third party stuff and then you can do development using this expo dev client it's gaining popularity every week but it's still like a pretty small percentage of our users even know about or use it so if you're like wanting to develop an app and it has native code you should use the export dev client and then we're kind of in the process of rolling out our new eas update thing which is just you know over-the-air updates but um our sort of second version of it that's much much more robust and powerful than our sort of uh and just more fully featured than our classic update service that we've had for awana so those things i think really like are worth checking out if you haven't looked at expo in the last six months or so i will say having been really deep on expo last year and having almost no opportunity to touch it this year until about a week ago the difference is substantial being able to eas build in terminal and have a native like build environment spin up and make your app for you correctly and let you scan a qr code and get back to work was surreal and i'm so excited for a future where that works for everyone we're going to keep pushing on but like i i'll often like sit with like a i'll do this for the team every couple we haven't done this actually in a month or two i should do it again where i'll just like say all right i'm going to build a really basic application with a stopwatch next to me and i'm going to record how long it takes to get from this step to this step to this step because every second of your time matters when you're especially you're starting a project and maybe maybe you only have 15 minutes before your lunch break's over or maybe you're just gonna run out of energy to do it or just you know get distracted by you know your boyfriend watching tv or whatever and like it's it's just so important to make that smooth and fast and take out complexity and take out time and waiting so we're just trying to ratchet that down so you can get done what you want to get done as quickly as possible and just get it to your customers as quickly as possible absolutely i think that's a really good note to end on any last things you want to shout out before we wrap up uh just app.js conference june 8th through 10th in krakow poland hosted by software mansion and uh actual team will be there and thank you so much for having us on me it was great it was really fun thanks i've wanted to have you on forever and i'm so pumped we finally could if you're not already following charlie on twitter and twitch i am sharing that link now for twitter at the very least uh uh see achiever on twitter chat or links in chat now make sure you give a fall if you haven't already i'm gonna keep hanging out a little bit after but i'm gonna switch over to the brb and wrap things up thank you guys again so much for coming by thanks again charlie for stopping by thanks everybody take care i'll be back in like a minute i want to go refill my water and like get my laptop ready for some streaming but yeah give me like 45 seconds two minutes and be right back what is good we are back how y'all doing that was a fun one any big takeaways i saw somebody in chat saying that they actually want to start using expo on a side project uh i always come up with a new one as uh keysore said there i really want to shout out everybody who subbed but i actually can't see the list now because of the follow botting destroying all of my notifications i have no easy way when i do the filter it only shows the gift that glassy very generously gave to mir earlier thank you for that by the way i would have done that gift later but i appreciate you immensely yeah i can't see and it sucks i want to shout out all y'all for being so generous and dope and people botting on twitch prevents me from it oh wait i found a way to maybe get this info oh yes stream elements has actual access to it cool i can also turn on chat and notifications again i had those hidden i forgot about that cool now i'm going to get chat messages again which i showed of the whole time so yeah uh shout out cedric for subscribing before the show super appreciated uh uh alex is very real as well atrika ko dex oh can i just like replay all of these i can so i'm gonna start replaying alerts for the people who didn't get them is this working this isn't working that's annoying never mind i can't replay them all but yeah shout out to sound wave captain strider ghost and kodex atricia alex is very real cedric obviously jason for being a sub forever alejo maple just now thank you so much i have no idea why those still aren't coming up if i transition with it visible will it my overlay should be working now uh let's go to studio mode there we go now the sub or notifications are coming through no idea why that was so delayed yay thank you for the prime maple thank you for the prime witch skull you all are the best i hope that you guys enjoy the sub only chat where i'm literally just like posting source code from ping i think that uh there are going to be some really cool conversations in the sub channels and i do plan on like hanging out in the sub only voice chat soon so uh be ready for that if you do have a prime that you haven't burned yet make sure you do that if you have an amazon prime account and you haven't linked it to your twitch already you have a free sub sitting there that you could give to me for putting all the effort into this content and right now you're not go fix that really appreciate it now these are all coming through like all at once with crazy delay interesting what works works i still can't believe i got a like thousand follower follower bought earlier that's like beyond frustrating i've never seen that before sorry i'm also seeing a ton of like customer calls and things that i missed yeah yo keysore thank you for the sub we have a hype train going now that's dope thank you guys at that or thank you guys so much i really appreciate it thanks for the the food money that will be spent well i need to update my stream title and we're not doing react native stuff anymore uh talking what are we gonna talk about what should we talk about anything fun going on i know that there's the uh what's it called uh remix conf is going on right now is that live can we watch that can i commentate live on remix conf it is not live right now interesting it seems like it was like or live earlier uh any really good talks at remix conf that are worth us talking about ooh the fly machine stuff's cool the planet scale stuff's cool planet skill connects a little lame but uh remix conf ended yesterday i was so sure it was still going on today my bad if it wasn't i thought no it absolutely was i saw like it was live on twitch today or not twitch on youtube i'm almost positive i saw that react native or that uh remix was live on youtube today i could be wrong but i hope i'm not like mentally blending days at this point i'm sleeping enough i think i'm sleeping enough pretty sure i'm sleeping enough i think i saved some things on twitter did i bookmarks for stream play to scale portals did i talk about no i wouldn't have because that just got announced yeah let's uh get my screen share work in one sec case you didn't know this about me my setup's a little needlessly complicated i do this to myself but oh cool that's never worked first try since i started streaming i normally sit there and try and get my screen capture working for like 20 minutes and this time it just worked i just realized i haven't closed anything so let me uh switch scenes while i do that part i don't want all my open terminal open is fine [Music] oh do i owe you guys cats i totally owe you guys cats are the two of them fighting behind me yeah there's a there's a battle i i wish i could zoom but this lens is not a zoom lens sadly that actually explains a lot just figuring out where the maids put my trackpad cool yay i now have my usual setup again oh the fight's still going can i at least angle it like down slightly nope that would up my camera a ton you know what i'll do i will film it and post it in the sub only channel so if you want to see the cats fight that's the place to do it hey bud speak you for the camera you're making me money come on be cuter no you just want out gir i'm gonna let him out quick one sec no more cats i still have to come with a new title for the stream uh somebody come with a good meme title for me what are people talking about right now in javascript land that i can like grab onto x next twitch staff complains about javascript accurate enough cool that might get some attention just wanted a title that's clickable next js ripped off remix that's my youtube man i should click bait on twitch more but yeah anyways let's uh make sure my dms aren't open wrong button and they totally are open don't want to spoil any fun things coming up right now bookmarks first stream full screen and here we are my usual setup ah start with playing a scale portals this is an interesting one uh for those that don't know planet scale is introducing the idea of read-only regions which means that your database instead of being fully located in one place will now be multi-region not for rights like if you you can't write in multiple places a write still has to go to your main place but reads can be replicated in other regions so that you have a really performant like low latency way to fetch data closer to you when you're like requesting data it's a really cool change why does it seem like it's always daylight in my room i have a real setup anyways introducing planet scale read-only portals some of the numbers they've hosted in here are super cool where is they had a latency example in here uh there's somewhere cool yeah uh for an application deployed to frankfurt talking to a northern virginia database can add an are nearly an extra 90 milliseconds per query on a query that's otherwise like three milliseconds and it's insane some of our latest there are like latency since we're all based out of um one region in us west two this doesn't how do i put it this allows us to have a much more performant like experience in our server because we can co-locate the the read on the server to data that's way closer to it it reduces the distance between the place where the data is being fetched which is the server in this case and the database itself the catch here is it's read-only which means most of what i think matters which is the cache and the read experience getting the fastest like contentful experience as possible is better however we need the tools that we use to interface with our sql to catch up right now uh something like uh prisma for example has no way to select multiple databases or multiple database urls for different types of uses there's no way to say for reads use one of these four urls but for writes use this one url i know that prisma and planet scale are working relatively closely and it's pretty likely that they'll fix this in the future but it sucks that this is one of the first times where i felt like the the choice of planet scale and the choice of prisma as cool as both are and as much as both are innovating a lot of the innovations i see from both are things i can't consume because of the the slight add-ons nature of the two things it's dumb stuff like i have no use for the mongodb support in prisma because we're using sql but it's also kind of frustrating stuff like i can't use like update actions or foreign keys in prisma properly in uh planet scale i can't do like update or like on uh delete cascade type stuff in prisma and on the planet scale side i can't use these new read-only regions because prisma's the only way we connect to our database so awesome so excited for how we'll be able to use this in the future not going to be very useful for a bit to the question big sexy asked isn't that what graphql helps with creating a schema that manages different data sources kind of graphql is an api it's not a replacement for sql in the sense that you abstract sql through graphql it's a more [Music] a different way to define your api so it's a layer deeper if i we excalidra in this early we're we're excalibur on this early who am i kidding cool so if we excala draw this out quick uh well i don't need a new collection i have a stream i read the ui here a bit it's kind of nice cool so we have a spectrum here from database to user and the database this is where like planet scale is and then the user is your browser somewhere in here you have an api and this api can be a server it can be serverless through something like versel and lam does it can be pretty much anything but this point here graphql lives here this is like swagger open api rest those are kind of the same thing whatever graphql this is where that lives what we're talking about right now is a step that's between these which is the database connection i guess we can call this orm as much as i hate the term this is effectively an orm let's move this down a bit so we have more room and this orm layer this is things like prisma what are some other popular ones what's the rust or the rails one active record stuff like this is how you connect to your database and then the database itself like mysql i'll just do sql docs stores mongoose is a orm yes yeah so this is like the different layers to an extent your api uses something like an orm or just direct sql calls to connect to your database graphql doesn't replace anything here there are a few people who have tried making like graphql type ways to connect to your database directly or even go as far as storing your data in a graph structure using graphql as the method they're lunatics they're wrong ignore them they're they're just not worth paying attention to trust me on that don't need to go deeper i just it's chaos over there like graphql wasn't built for that don't use it for that cool seems like their primary example is rails they claim you can do other things but none of the things i use can do this yet so not super useful but yeah very excited for this and the types of cool things is going to enable in the future should be a very exciting like opportunity to like significantly improve performance on uh our web apps that are accessing data what were the other things did i save anything else more use effect stuff that i was angry about i don't think any of that's super like worth jumping into i did see it looked like bolt shut down that happened that a real thing oh bolt layoffs so they're still around i was concerned they like actually shut down right after fasted but nope yeah i'm excited for him to blame yc for this yeah any other big news in the last few days i know i like just did all of the news on monday so there hopefully isn't too much but can always be wrong there was the fly i o stuff still one of the coolest domains ever api for fast booting vms yeah this was really interesting the general idea with fly.ios new stuff is that you can spin up a vm almost instantaneously their goal is to like as i say here like or vms of the fast rest api that can boot instances in about 300 milliseconds it's pretty insane did react router v6 have like actual news react router is it out what's the their blog post somewhere i need to read this one for a bit i have it in my like read later and have not gotten to it doesn't look like there's an easy like what's new in v6 to find there's an upgrade story here i'm happy that they wrote this and this took priority over almost anything else but man upgrade to react 16.8 i forgot that 16.8 was when hooks were added it's crazy to think that like people are running that still uh damn main concepts react router somebody has a link for me i'm down to watch from that any good new content anything i can like shamelessly like leech content from and just react to correct my own reactions we could build an expo thing quick that could be fun uh it want to build an app let's pick something to build more chris hawks yeah [Music] i could complain about that one or about a few tweets uh the i'm still i have to say guys i i love my community the first time i have been disappointed in my community was y'all saying you don't like semicolons it wasn't many of you the vast majority of you are on the right side of history here but like come on your opinion is valid maple but you're still wrong and that's okay still love y'all just know that like this is the first rocky ground we've been on and i i trust you all individually to reconsider what you've done here and remind you that semicolons are there for a reason is to let you know the line's actually over they're good use them it's like the weirdest thing to drop also spicier version of this take y'all want to see uh let's just go to github this is the easiest way i wanna see the prettier rc for ping oh we don't have one because i use all of the defaults in prettier they're fine don't let people have stronger opinions than the people who encode the opinions we use the prettier defaults because they're totally fine the default pretty rc has things i don't like in it and it has behaviors i don't enjoy but i choose to accept them because by using the default we don't have to argue about it there's no decision to be made anymore lack of trailing commas that's the one that kills me yeah that's uh i i i am tempted to file an upstream poll request just to start the conversation trailing commas should not just be on but mandated it's uh that's the one that always hurts me and it hurts it cuts deep i don't want to do that but what if they remove semis from the default i'm gonna have to reconsider a lot of things losing both semis and like trailing commas in the default of prettier like not having trailing commas is like six to seven out of ten i'm angry about it not having semicolons would be closer to like eight to nine out of ten angry i think that might push me over the edge but like right now we install the package use its defaults and nobody's complained i really like that and i don't want to that to become an argument when right now it's not i'm doing a new stream title uh i'm very curious how you guys feel about this one the most risque i've went got to really keep the brand of the best dressed and best looking engineer on the platform putting the semi and semicolon anyways what else is there to talk about what was the other thing i quote tweeted because i was angry about it ooh maple found the update not much yeah we can pull this up why not it's easier for me to do it this way oh that is not where i'm trying to go remix run scroll a little bit may 23rd might be a bit far i don't have an easy way to get a link from my desktop to my laptop at the moment here we are react router v 6.4.0 pre 2 is out not much there oh release notes here we go remixing react router we'll start here i uh i i don't dig storybook i uh it's important i hate it and i avoid it whenever i can function loader this isn't type safe is it please tell me that like on client side where you actually have a theoretically type safe story for these loaders if one of these loaders was like not a server function it was a client function that did some async like fetching your like devices from device picker please for the love of god tell me that if i was to await uh window.like navigator.getmediadevices here that there is some way that does it involve some jank type inference and export that lets me take the type definition from what i'm doing here and have access to that here i wish that the remix guys could learn like how the typesafe story's changing the the most telling one for me and i hate to like kick a dead horse but there is a really nasty back and forth between alex the creator of trpc and kent where kent basically asserted that there's no way to have type safety over the wire because you don't know for sure that the thing you're getting on either side is the thing that you're expecting and if you have a client that's out of date from the server you might have written that with a typed contract that's now out of date trpc solves this relatively trivially by having zod as the validator on primarily server side because the client getting malformatted data is like an error you can resolve when you're like version's out of sync or you can validate on client if you really want to but it's entirely optional generally it's the server side validation making sure that you have a meaningful representation of what the server expects and that you're honoring that when you call it that's where most of the fragile  tends to happen and trpc solved that incredibly well and i don't have a single like non-type safe call from or between our back end and front end in our app because we have validation on every one of those calls yeah let me from i feel bad because like kent walked this back a bit but let's see uh yeah this is a long one don't use type script generics that are just there to lie to you only through the use of type guards and assertion functions runtime checks can you truly have end to end type checks across i o boundaries there's a middle ground between lying to you and returning any i o bound should be modeled yeah i surprise surprise i heavily agree with dax here uh i bet you 100 bucks i can make both of them have runtime type errors and uh this one devolved quick uh see where uh i'm pretty sure that we had or alex jump in here somewhere here yeah dude trpc forces you to have a runtime checker before you do some silly interfaces or inference of the types the difference comes from the library so that is first class support and additionally the first poc for trpc was created by colin hax yeah yeah this one was really frustrating because like it it showed that there's a core philosophy from the remix team which is that type safety overbounds is a lie so we're gonna not solve that problem at all and when people prove that you can make parts of this a lot better and you can make something that feels like and honestly in most ways is a type safe story from back to front you can't call zod cheating you can't call us solving the problem cheating because it's outside of your way of framing these things we have succeeded in solving this problem for ourselves and remix makes it harder more than it makes it easier and it's disappointing that there are even people in the remix community working to solve these problems and this is the response from up top yeah it's i really wish remix could embrace the the push the community's having rather than feel by putting it this way it almost feels like they're segmenting the community around people who need something to migrate create react app off of rather than people who are going to push hard to get it improved and challenge the like foundation that remix is built on it's like there's a fundamental difference from when i'm like tearing apart the new uh no or next.js rfc and i have lee and team just hanging out in chat and these types of like subtweets on twitter i the the difference there is stark and it's frustrating because there's a lot of really good tech in remix that i really want to see the community push and the founders of remix push too but they'd rather subtweet than solve problems sometimes and that's incredibly frustrating to me and it's also arguably inappropriate that i'm talking because i'm not contributing to open source meaningfully at all right now i'm just posting on twitch and running a company taking full advantage of all of these technologies and using them to make myself very successful in other spaces but man i i can still be disappointed and i am i honestly am like i learned a lot of what i know from old kent dodd's tutorials and i don't want to feel like he's talking down to us for solving the problems that are important to us and it's really frustrating how often i feel that way i'm sure this clip's going to get to him but yeah thank you master i appreciate that i really hope that like even if i'm not writing code for open source projects regularly that there are gonna be downstream impacts of the of the advocacy i'm doing i guess is the right word but like the things i talk about and the amount i care i i know it's infectious in a way and it's exciting to see like financial contributions going to alex and going to trpc that start from people that i arguably introduced to trpc and might not have found it otherwise and seeing like a community forming around that technology that i kind of i don't say like i'm the reason for it but i definitely kick-started the growth pretty early and now we're at a dope place oh speck oh yo spectissa what's good good to have you here i hope i don't uh scare away your weeb audience with our like technology posting uh for those that don't know i'm theo i uh worked at twitch for a while i was there doing software engineering primarily for like video infra as well as the safety team topped around though i built mod view i built a bunch of channel point stuff i helped work on the dashboard twitch studio and a bunch of other things now i run a company called ping i can show you guys what we're doing now ping was built to make it as easy as possible oh go run spec thank you for dropping your audience here i really appreciate it i promise to do my best to not like de-weep them and yeah hopefully you'll still get them back anyways thank you all so much for being here i really appreciate it i built ping which is a software tool for content creators to bring guests onto their show you do a video call just like google me or zoom but on the are all on the web then you can copy paste people directly into obs i'm pretty sure specs used it not positive on that but her friend kisaka is one of our earliest users who's been using ping forever we also have awesome people like vshojo they use our tech all of the time for almost all their collabs we have linus tech tips who use it whenever they have guests call in now elgato was just live using us earlier today we have lots of awesome people making crazy content using ping really proud of what we built here this is why i quit twitch to build tools like this so yeah generally i'm streaming yeah kisa kisaka love her to death really cool crew yo michael good to have you here but yeah uh dldr of this stream is i run a small company now which means i don't have as much opportunity as i used to to just talk about tech all of the time like i was at twitch and all my other gigs so the stream's kind of an outlet for me to talk and do a bunch of code stuff as well as uh just a way to be more familiar with streaming and the content creation problems that people experience every day and it believe me it has helped a ton as we're building a content creator focused company like it is hard to imagine that we would be building anything the right way right now if it wasn't for the amount of time i've spent streaming myself especially over the last like six to eight months so yeah great to have you all here make sure you give me a follow and give us a follow on twitter in particular uh that is where i tend to post the most so if you want to see updates about what we're working on at ping hear me complain about web dev javascript back end front end mobile all that type of stuff too or just complaining about twitch and like the things that i think they could be doing better it's a good place to follow thank you guys all so much for stopping by i really appreciate it anyways back to pitching about this so where was i before the raid there was like a good question or two i think the issue oh this is a from maple earlier we were talking about how remix doesn't have type safety and it's a little frustrating that the remix team doesn't embrace the things they they do or don't do or work with the community to better like understand them so type safety is one of those things that i think remix isn't doing enough of right now hot module reloading is another example of something like that i get why they have the stance they have i don't think that stance is correct and they don't make it easy enough for me to work around it they're almost upset with me for wanting it versus uh one one thing i reference a lot i wrote a blog post a few months ago because i was pissed that next js just doesn't solve this problem either it doesn't next.js type story is just as bad as remixes the difference is the primitives that are provided in next are relatively easy to just treat like an express endpoint and build something else on top of i've seen people start to do that in remix and i'm really excited to see where that all goes but when we do things like this in next.js land we get a bunch of like how do i put it we get a really positive response from the core team over at versailles and from people who are contributing to next.js and building these frameworks i wrote or i wrote this article because i think there are lessons to be learned there that next.js could pull in at its core and that we as developers can like really take advantage of and use to improve our full stack story and not run into errors as often on our like both in dev and in production the problem with how next does this is even though it owns the back end and the front end it doesn't care to solve the bridge between the two you can have your backend and front end in the same file i even have an example uh here where we have a page file id.ts it should be tsx because it's returning uh jsx but this is a page component that returns info that fetches from db these two things are in the same file we have a backend function and a front-end uh like page that renders this gets imported on client this gets opted out it is only done on server and even though these two things are directly next to each other this is any this type is not communicated to this page even though it's from right here if you wanted you can do an inference of the type that's actually one of the things they recommend the infer get server site props this does some nasty the first thing is it drops nulls everywhere just makes everything nullable and it like working around that is obnoxious it destroys the data structures with some of the weird like assertions it makes internally and then drops any everywhere else too i hate this type and it's sad because this should be the solution and it's just bad and the get server side props like context is uh like something you also have to pass this directly in order for it to work at all it's it was messy and even then if you put something like a uh date time in here this is going to infer the type of date time but that's going to come through as a string not as a date time because it's being turned into json between here and here that means this is not a real contract we can honor it is it is a lie so our options are build a lie or [Music] don't infer anything and just write our own types on top i think both of those are bad options i really don't think that we should be doing oh i even rant about how bad their default is where it just overrides a bunch of with ennis it's so nasty and yeah what i recommend in here is trpc which i'm sure most of y'all have heard me rant about at this point tldr with trpc is that you write a function in one place so trpc.router.query give it a name you give it a zod object for the input validator this is important because this validates that you're passing what you expect on server so if this validation fails this api call fails very important because it allows the type safety to also be runtime safety and validate the requests when they're received on the other side you write a resolve function that can be async that returns some doesn't really matter what it returns because on the client you type trpc dot use query get user by id user id colon query dot id and i'm pulling that from in this case use router this will now give you a type safe result through a was effectively a fetch call going through react query that is then uh typed through the router itself directly also validated through uh zod if you're making a request that has like a validation of it on it and arguably most importantly it how do i word this it uses optionally uses a transformer like super json which allows you to actually pass an object regardless of what's on it to the client so i can put a date time in here i can put a map in here i can put all these data types pretty much anything but a function even i think you can kind of do classes it's a mess but you technically can this lets me pass a complete data structure basically anything i can fetch from prisma i can now pass to my client and have the prisma type because prism is very well typed be honored all the way to my client where we're consuming it so now if i was to rename a field in db let's say i was rendering name here so i'm rendering user.name if i was to change this to username i would get the type error on the client where we're rendering it because that type contract is being or pushed all the way through i saw somebody ask you could put a type on both get server-side props and in your component props yeah you can i have an example up here where you manually type everything so you can manually type like the component expects user user but what if you modify server side props and you just select id now or you change your selection this might still honor the contract and lie to the other side if you assign the type on both which you can do you could put like the type definition like both the server like function and the client page expect the same thing however what you don't get there is the ability to know that that type is true with something like prisma here this is a pretty innocent looking option or like function if this selected date time or created at that type contract is a lie now there's no reason it has to be when we could transform the data or inline it in a like script tag that honors the contract this doesn't need to be a lie and it often is maple asked could you combine uh trpc with remix form and get progressive enhancement possibly the generally like a remix form is a method of posting there's no reason you wouldn't be able to post to a trpc endpoint my only concern there would be that the shape of like a remix form is very much a traditional like form whereas the shape of a trpc post is often a uh is using something like uh super json to encode data in some chaotic way yo 10 gif subs from smooth operator thank you so much i super super super appreciate that to all the people who just got gifted subs make sure you're in the discord if you're not already because you now have access to the sub only channels where i post ping source code and just chat about whatever so definitely take advantage of that if you're not already in the discord hop in there thank you again smooth operator for the very generous gift and i am pumped that we have 10 more people that get to hang out in the server like that so yeah if you're not a sub you still feel free to join the server all you're missing is the sub only channels where i post source code and starting soon probably more pictures of my cats so yeah thank you so much i really appreciate it cool oh yeah i definitely see a future where you could combine trpc and remix form my concern would be that like without javascript if you did the progressive enhancement side that the shape of that post might not honor the expected shape of the trpc endpoint or things along with those lines there's a lib for typesafe forms interesting remix forms dot seasons dot cc of course it's using zod so uh this is pretty much trpc then like in the end all trpc is is a zod layer in front of a type safe like a typescript function that takes in a certain input and returns an output and then on client you import the types so that when they your when you compile the back end code goes away but when you're developing you have those contracts to work against the other cool thing you can do i think we do this in the osrg code base so open source raid guild is a cool little project that uh jacob runs for helping open source projects get a bunch of manpower for big things like rewriting all their tests from just to vitesse moving over to typescript stuff like that i rebuilt their website a while back and used all the usual t3 stack stuff one of the cool things we did here is we actually share the zod validator here so we have the contact form validator so that on the uh can i like discord yes of course it's also a command exclamation point discord that'll link that directly t3.gg discord cool so here i have a form validator just a z dot object where we expect email you to select one of these roles a message in the repo url and i'm able to use this on the back end in the router contact index the input is the contact form validator that i'm importing from shared and on the front end i think a lot of y'all see where this is going now component oh it's not in components it's in pages contact in here i import contact form validator and the contact form validator is used in the read or react hook forms uh library where you can pass a resolver that in this case is the zod resolver this isn't smart enough to infer the type of this so i also pass the type that is generated by zod but this now gives me a contract that is shared both by the backend and by the form that both can honor hydrate errors the same way and everything it's so nice if i was to do something like in the contact form validator is this smart enough to link me there it is not so i will open that again if i was to do a custom error in here where you can put like a custom.error message and pass a different string for what this should throw if you hit any of these cases that's optional but you can do it and what will happen now is if somebody hits this as an api that's the response they get from the server if they fail this check or if they're in the form you'll actually get for each field a dot error or error dot field so in here we register role you have options to select and errors dot roll if you select a role that's not valid it will render this with the error roll message we have this for every field if you put an invalid email it will give you the error that the email is invalid can we pass odd types to front end to use with with example react query that's what trpc is doing so if you're interested in doing that if you're using zod for the back end and you want to use it with you want to validate on the front end the same way that's exactly how trpc works it is phenomenal for that in particular really excited to watch that matt video about zod uh we'll definitely look for that in the future thanks for bringing that out keysore yeah uh but as for passing the type it's with zod it's actually kind of meant to run on client it was built for that originally it's like a form validator a lot of people are using it now on server to validate but as long as you define your uh your whatever uh validator somewhere that both backend and front-end can import absolutely both back-end and front-end can import it you can use it wherever this is effectively a function you call with an object and it re it passes if your object honors what you described here and it throws if you don't it's very simple and you can use it wherever it's one of those like really powerful primitives that we can build so much stuff on top of zod yup joy they're all similar the big difference with zod is it's very very focused on typescript type safety and type inference things like the z dot infer type of contact form validator this is so powerful and other form validators are trying to add this in now but most of them are just not as explicit a contract and don't have anywhere near as nice a syntax for defining something and then consuming it after also shout out bear cobos and jason mixon for the subs as well really appreciate it y'all yes smooth operator instead of defining the type directly in trpc if you want to reuse the validator you would define that externally because you can't or in many reasons shouldn't import back-end code directly in front-end you can import back into types in front-end because types get compiled out but zod is a validator this is actual code that runs so i go out of my way when i'm going to reuse a validator to put it in a separate shared folder or package where both the front end and back end can consume it safely but yes you can't just import the validator from back end on front i actually had to write some code to throw a like a nice error when people accidentally do that in our code base because it was a kind of common mistake or somebody would try and import a zod validator from a file that also had a prisma import surprisingly common react final form hooks interesting might check that one out later sebastian mark edge likes atomic css interesting i really need a better story for moving things from my laptop to my desktop from desktop to laptop actually because i screenshare my laptop even though i do most of my stuff on my desktop when i'm streaming so that's not there we are atomic css is surprisingly effective performance wise if done well which is why i'm all about it lately it scales well by flattening out both in terms of the number of rules and incremental loading rules minimizers recalculate the whole dock it allows for local scoping interesting very interesting yeah i am very curious how this goes yeah at one point maple made earlier i didn't have a good chance to address was that uh they really like how remix can easily make your app work before javascript plus forms are basically declarative mutations yeah totally agree i if the pages i built were just one form and like honestly like the the osrg site this should probably be remix not tier or not next.js if trpc was better honored and something like that was more doable in remix i would excitedly port this over but this site's a form a home page off and links to three other places there's no reason for this to be on next.js it doesn't need it this really is starting to get a tiny bit late i am down to keep chatting a bit more but let's pick a good final topic before i wrap up do you want to look into react final form hooks too if i don't go over it now i just want to have this like open in the background react hooks to bind to final forms high performance subscription based form management interesting very interesting kind of like this use field pattern where you can pass the form through especially if that like is type safe throughout uh this library will render your entire form on every change as you type go it might be smaller but it's not more performant that's sad gonna keep using react hook forms for now uh have i heard of quick yes very interesting i am uh excited to see more stuff about it i know that uh ryan did a good uh stream about it or two actually yeah maple that's a good suspicion the thing to know about quick is it's made by the same people who made uh they're the same dude who made the original version of angular and i think it says a lot yeah if you guys are more interested on quick uh ryan is definitely the right person to watch he had two separate streams where he talked about it one where he built a website using it it's his he usually does a clone of hacker news to see how performance he can make it with different web frameworks and solutions he had a really cool one about quick he also did a stream with misco the creator of angular and quick to chat all about like their philosophy around it yeah you can really think of quick as like angular minus the the bloat it's still the same mindset of solve every problem and build the like one solution that solves it but it's trying to do such without all the weight it's an interesting project i am excited to see where it goes but yeah but i saw that remix ecommerce demo and it has a 98 performance uh uh lighthouse does not tell all there is a lot of things that have really good lighthouse scores that run like on most old android phones like lighthouse scores are cool they're not not all that you need to tell how how fast something is or how well it works and i really think ryan is a good person to watch like the content of if you're curious about that he's done a really good job of like comparing at a very low level like all of these frameworks in the decisions they made to get meaningful html to the user as fast as possible and even crazy stuff like he was one of the first people to try out um the astro ssr stuff and he used uh solid js to render the the comments on server and on client so that they could hydrate on client and let you like click a button to collapse and load in more comments while still hydrating it with html almost instantaneously and ended up getting performance numbers and like bundle size smaller on this astro ssr build with like a bunch of like micro solid js imports than he could from almost anything else and i'm really excited about that because as i'm sure a lot of you know by now i really don't like all-in-one solutions i'm really interested in how things like astro things like solid things like react even try to solve specific problems really well so that they can assemble and be attached to other pieces to do cool astro's not competing with remix so much as it's competing with i often say veet it's building a a solution in a place that allows it to be used for other things and by other like library creators just as much as everyday devs like you could build a new framework on top of astro with their new ssr model and that's super exciting definitely to check out the new ryan florence talk from reactathon i should react to more of that content later getting a little bit tired i woke up earlier than usual today so i'm probably going to start wrapping it up but next stream that sounds like a good thing ah i have a guest next week right yes i do i have jason dawkin coming on next week for those who don't know uh white house performance is more important when you're a smaller company interesting take uh lighthouse performance means a lot of different things sadly but uh yeah next week we have jason from urad for those that don't know uh rad is an awesome charity focused on helping like mostly gamers but an increasingly wide group of people get mental health help and access to therapy that otherwise might not have access if you have money they'll help you find a therapist if you don't have money they'll help you get what you need to get a therapist they're a phenomenal group support them as much as i can help them a little bit with the website but it's honestly mostly jason's work the reason i'm bringing jason on is because in august of last year he realized squarespace wasn't the right platform to build his charity on so he taught himself the code from scratch and ended up pretty much on the t3 stack he uses super bass instead of playing at scale and he didn't use typescript just yet but beyond that was pretty much using all of our tech so i helped him adopt trpc and typescript and yeah we chat a ton now in three months he became one of my favorite developers to work with and chat with and what i'm excited about for this talk is the way he thinks about learning he has a fundamentally like i think like a groundbreaking approach to how you pick up and learn from new information he described it as applied wisdom where you take a step back and figure out why did this person share this why do these things benefit them and do their reasons line up with mine i'm really excited for this talk it's actually going to be one of like i there are a few i've been more hyped for than this jason's dope can't wait to have this show next week so make sure you're here for that next week probably still 3 p.m i'll post an update if we decide to go earlier so make sure you're here for that next week i might do a stream this weekend probably not i'm in total chaos but if there's any big news i want to chat about might go live again also keep an eye on the youtube channel i have one more fun video coming out tomorrow not related to any of the tech stuff but if you like me i think you'll enjoy the video it's pretty goofy my team bullies me anyways let's go find someone to raid let's find someone to raid hopefully otto's still alive that would be a fun place to throw y'all looks like otto is offline not that surprised let's go through the category software dev viewers high to low oh cool we're pretty high up there what's leo working on javascript good sign learning react you all want to go help poorly learn react when whenever you google that you're going to get three articles from three different eras that have contradicting information please don't like backseat too hard if i send y'all here be like kind with the suggestions you make i yeah be good don't don't annoy anybody don't be  but make sure that poor leah starts on the right foot cool great starting now see you guys over there thank you so much oh make sure she doesn't use create react app that much you can do for me that much you can backseat a bit for cool hitting that raid now button see you guys there i'm gonna head off y'all youtubers thanks for stopping by




## The Future of HTMX - 20250112
in the beginning there was HTML the markup language for printers that somehow now Powers the entirety of the web we've had a lot of innovation since then some things good some's bad many things ugly one of them pretty good though HTM X I'm really excited for this blog post every time I read something on their site it it goes in an interesting Direction people seem to think I don't like HDMX those people clearly haven't watched enough of my videos on it or struggle with sarcasm I think this is a really important prodject that does a lot of awesome things so if you want to see me break down the future of HTM X diagram out what I think is cool and not cool about it and all the reasons why you should at least consider it as a technology make sure you stick around but first a quick word from today's sponsor today's sponsor is a database and it's quickly becoming my favorite one they like to call it the last and only database you'll ever need and honestly I get it we're talking about a database that can do selects Order Group sum do product and Vector key search all in a single SQL query you can take my word for it or you can take the word of Jack the co-founder of fathom we are now all in on single store Helios which has allowed us to drop reddis Dynamo DB and MySQL saving us an absolute fortune in monthly costs while dramatically improving our performance there a lot of people saying this because single store gives you a really powerful experience by giving you all that functionality without compromising on performance my favorite example of this is their support for yes you can take a client that's API compatible point it at single store instead it'll just throw it in Json blog and most of the time it will be significantly faster than your stuff even though it's technically based on my squel it's so so cool they free tiers free for life you can sell phst via Docker if you really want to they support everything from to drizzle it's a great experience for JS devs in modern stacks and PHP devs and old ones too you're tired of picking the right database for the job pick the one that supports every job check them out at soy. l/ single store the future of HTM X in the beginning HTM X began life as inter cooler okay we what happened to my fake beef I pretended that HTM X was just an intercooler ripoff and then they made it a whole part of their brand and it was really funny but if anyone missed the sarcasm in that original htx sucks video htx was originally intercooler but they went way further with it I didn't know that inter was actually built around jQuery that's cool to know for devs who aren't familiar jQuery is a venerable JS library that made writing crossplatform JS a lot easier during a time where browser implementations were very inconsistent and JS didn't have many of the convenient apis and features that it does now this is a nice way of saying Internet Explorer sucked and every other browser sucked in other ways but yeah today many web devs consider jQuery to be Legacy software with all due respect to the perspective jQuery is currently used on 75% of all public websites a number that dwarfs all other JS tools I I take issue with these numbers I've talk about this have been in the past but I don't like breaking down the success of a tool by the percentage of websites using it because there's a lot of old websites that nobody is going to that just kind of sit there and I don't think those are a meaningful measurement of anything it would be like saying ET was one of the most successful games for the Atari because they made so many copies of it sure they made a lot of copies of ET but most of them are sitting dead in a ditch somewhere in Arizona I don't think it counts it's nearly impossible to measure but what I would like to see when we talk about these measurements is maybe a ratio of how much time is being spent on websites using jQuery like what percentage of our time on the web is on a site that is importing jQuery or what percent of developers in the web dev world are being hired to work on jQuery how many people are using it in their daytoday the reality of this number is like 75% or more of websites are old and unmaintained I don't think it's fair to use this number to say anything other than that or talk about how ubiquitous technology was at a time yeah people in shout are already dropping the good memes 100% of people who drank water end up dead yeah it feels like one of those types of things to be clear I'm not a jQuery hater I think it's an incredibly important technology and none of us would be here without it I regularly shout it out go check out my jQuery 4 video If you don't believe me it is a thankless effort to maintain and it is super important for the web but it is not being used by 75% of the people browsing all of the time that's a bit misleading a number but we should talk about what made it so ubiquit us here are the three technical reasons we believe contribute to the ongoing success of jQuery it's easy to add to a project it's maintained a consistent API remaining largely backwards compatible over its life and as a library you can use as much or as little of it as you like it stays out of the way and doesn't dictate the structure of your app okay of these three the only one react does is this guy it's pretty nice you can take a react component from 10 years ago and throw it into a serers side rendered nextjs component app today it's really cool but I agree this is a lost art the idea of just dropping a script tag and having more superpowers we haven't had that in quite a while now HTM X is the new jQuery that is a bold statement and I'm excited to see where they go with it oh look they even say the same thing now that's a ridiculous and arrogant statement to make of course but it's an ideal that we on the HDMX team are striving for I wonder if all the CEOs are aligned on this in particular we want to emulate these technical characteristics of jQuery that made it such a lowcost high value addition to the toolkits of web deps Alex has discussed building the 100-year web service we want htx to be a useful tool for exactly that use case websites that are built with jQuery stay online for a very long time and websites built with HTM X should be capable of the same or better I might take back some of what I was saying earlier with that 75% number if they're pitching it as we want something that can be forgotten about and still work I dig that that I'm 100% cool with going forward hmx will be developed with its existing users in mind if you're an existing user of HDMX or you're thinking about becoming one here's what that means interesting this is a very interesting pitch I've been thinking a lot about complexity of applications recently this is one of those things that haunts you at night you know the the things that keep you from sleeping I'm sure we've all been there and I was been thinking about this obviously when you think about complexity you're thinking a lot about react the thing that I have realized is we have some weird perceptions of react that aren't necessarily its fault we started with a problem the problem was how do we make web apps more Dynamic and we had an interesting solution Ajax hey Ajax stands for a synchronous JavaScript in XML the reason this matters the reason this is a thing is up until the point Ajax was introduced as part of the standard in the browser when a page had loaded it was done so the idea of a network tab that shows you like when you refresh all these different things happening and connecting and going on that was not really a thing you could put an image tag and it would load that but the idea of the browser using JS to hit another server to do something and then come back to the browser with updated data for you to use for something that hasn't always been there that was introduced at a point in the history of webdev to solve the problem of making a page that could update up until that point what you would do is you would submit a form when you wanted to do something and when the form submit happened it would respond with new HTML content or redirect to a new HTML page that would result in the UI you saw changing but JS was used for like animations and moving things around not for fetching new data Ajax meant you could request new HTML from a server in JavaScript and then render it somewhere else and this came with some really cool things the biggest early Ajax app the one that changed everything you might use it today even still as crazy as that might sound the first Ajax app is still so popular Gmail Ajax plus Gmail changed everything up until this point if you used an email web app it sucked you couldn't have a good editor experience and get a notification that another email came in you couldn't go to the tab bar and go back and have a UI that was pleasant every everything had to do a full page refresh when you changed anything other than typing in an input box it was terrible in Gmail let you do so much more there was a point where everyone used Outlook in other desktop email apps because you kind of had to because the web apps were so bad in Gmail by using this new technology for updating things in the browser without changing the page you're on fundamentally shifted how we build everything and it's crazy to think that that was a revolution cuz it's just so normalized now but it really was but in order for Google to do this with Gmail they had to invent so much stuff some of it went great some of it went poorly some of it we've been learning from since and some of it we've entirely thrown away but we learned a ton when this happened one of the things we learned is we need better libraries and that's exactly what we got which is how we ended up with the thing everyone knows and loves mols I'm avoiding the urge to dive into smoosh gate right now believe me it is tempting but I won't do it tools like Mo tools changed everything and then jQuery went even further and had this wonderful magical new syntax dollar sign. Ajax where it was suddenly really easy to just request something from a server I was actually reading some code yesterday that I was trying to replicate for a project and it had a bunch of jQuery dollar. ajax calls in it which was really funny like genuinely really funny there was another missing piece here though the missing piece is the X XML we were still sending HTML chunks effectively down from the server or you could format XML with a bit of actual data in it and it sucked it was terrible and that's why one last important piece was invented Json originally jmal Prime's favorite thing the JavaScript markup language became JavaScript object notation the goal here being to take what an object looked like in JS and make it so the server can send you an object magical change because previously JS was just manipulating HTML and XML and trying to translate between those different things with Json a server could send just some data in the shape that JavaScript was used to to the browser that it could then use to do whatever it wants to do changed everything with Json we started making way more complex web apps where the server wouldn't tell us what the HTML looked like the server would give us a little bit of HTML and then after that HTML loads the JavaScript would take over fetch data from servers and try and create the right HTML for the user on the client but it's important to recommend the change that all of this represented especially this bottom chunk here this is when we started to render on client when we started getting these better libraries and we started getting Json in these parts we did less HTML on the server and more of it on the client with that the expectations of users started to change too so after Json complexity explosion and clear when I say this I'm not saying Json is so complex therefore everything ever is now necessarily complex what I'm saying is these tools made it so you didn't need a wizard like Google had working on Gmail and mere mortals could start building more Dynamic things imagine a Twitter feed where you write a post and when you hit send it doesn't have to reload the entire page instead it just shows you that right underneath imagine a site where you can scroll through notifications when you get to the bottom more of them load without having to go to a new page or hit the next button these types of work work flows just weren't really possible before these Technologies and because Gmail set a high bar for Quality experiences on the web and these tools allow others to start doing the same expectations of users started to go up and developers started building more complex things the harsh reality is that we ended up at a complexity arms race because everyone wanted to have the best apps on the web everyone was using these Technologies and when these Technologies made it easier to build a more complex thing more people started building more complex things less qualified people started building more complex things and users started to have their expectations go up we were to diagram this will make this time so what I want to diagram here is roughly how these things are related the difficulty to build complex apps will be red complexity of the average app is green and expectations of users is yellow before Ajax building a complex web app was basically impossible so I would even put a gap here effectively the like dead zone or like this area it was a rough time you could do anything during that era but eventually it got doable suddenly we could build more complex things and then tools were getting better over time but react happened react allowed us to significantly reduce how hard it was to build those types of complex apps we' run into problems here and there but it was pretty good then hooks happened and made it even easier and we've continued adding more and more tools and technologies that make it easier and easier to build a really complex user experience in the browser I hope that isn't controversial take so like here angular happened react happened hooks happened and to be clear this isn't meant to be like these are the only things that happened that ever caused impact at any point in time it's a more General how the complexity has changed over time with this the complexity of the average app has changed significantly web apps used to be very boring remember the good old PHP bulletin board days phpbb the classics but when Gmail happened we immediately saw a slight bump suddenly after getting more complex and then when angular happened the mean stack happened instant Spike suddenly the average web app started getting way more complex and since then it's kind of just been a steady rise and when people look at this line in isolation which I understand why you would do that it feels pretty isolated when you just look at this line and you see how complex web apps are it's easy to blame the technologies that enabled this it's like oh yeah because the Technologies are so bad and terrible and complex obviously all the webs are getting complex If Only They just used jQuery this never would have happened but now we need to talk about user expectations because this is the only straight line here the expectations users have of their software has just slowly consistently gone up over time and this has resulted in weird eras like there was a point in time where no one was using web apps we were all using desktop software Apple tried to convince us that on the iPhone you wouldn't need to install apps we could just go to Safari and do everything there that failed it eventually they just introduced an app store and I'm sure that would be encapsulated within here this era where the expectations of users were higher than the complexity most apps were able to live within the point I'm trying to make here is as complex apps have gotten easier to make the complexity of the average app has inherently gone up because we are more ambitious with what we're building and users expectations have consistently been going up alongside us throughout there have definitely been bumps and changes throughout like I'm sure when Chrome happened that fundamentally shifted relatively quickly what people expected but the point is that these things all play in into each other and to analyze just one of them is to miss the entire bigger picture of how we got here so we ended up in this complexity arms race but at the same time the expectations of users continued to go up what we didn't do was go back here and think what about the apps that don't need to be that complex what about an app that only needs this much complexity the tools don't help us here all the all the innovations that have happened in angular and react and other Frameworks and Technologies and in webpack and bundlers and all of those things none of that has helped simple apps be better in fact it honestly kind of feels like it hurt them because if I have a simple static blog but I want it to have a comment section that you can leave a comment in without refreshing the page none of the Technologies I've talked about so far would really have helped with that like you could DIY it with jQuery but the moment you're adopting angular react or something like that it takes over the whole app because they're application frame Works they're trying to help you build a full top to bottom application and no one had really taken the time to go back and really help us bring those new expectations users had without all of the buyin of these new tools and Technologies like if you don't want to bring in the complexity of react or angular and all those tools you don't want to add a webpack build step to your application but you want a better comment section in your blog that hasn't gotten much better over the last 10 years and if you look at things like web components you see how much we're suffering trying to do it the browser standards are not helping here either the result is that a lot of people have felt like in order to have a good feeling web app they need a single page app technology and that sucks that your options are adopt a complex framework like react or build your own complex framework using tools like web components or going back to the dark ages of jQuery and diying the whole thing yourself none of those are satisfying answers none of those actually make meaningful improvements to the developer experience and if all I want is server that sends HTML to a user but also keeps them from having to change Pages whenever they do something that hasn't really been helped that's what makes htx so cool I'm going to try and illustrate this with a diagram I've done before if we have on the left here back end and on the right here we have front end there are certain technologies that we associate with each side what I want to focus on is a arbitrary quality the first time I did this diagram it didn't piss people off enough which I'm honestly surprised about I remember what I labeled it we're going to just give it an arbitrary quality here if we have back end on the left and front end on the right the more you focus on one side the less potential quality you can provide on the other so if we're building a front-end app and you're doing all the things that Theo recommends like the soy next.js serverless trpc bongod DB full stack magic like if this is how you're building which I know a lot of us here are you're not building backend the right traditional way you're not using the best of the the best of what's going on in the backend world and if you're talking to backend devs they're going to make fun of you a bit which makes sense but if your goal is to make an experience that lives in that range like if your priority for what you're building if that priority is here like you want to have an experience that lives in this range that is primarily front end focused and your differentiator for your product the thing you care about is making the front end as good as possible the tools and technologies that live in this range are probably going to be the ones that help you the most but if you're building a service that is encoding video or doing crazy data processing or analysis these Technologies are going to hurt you if the complexity of your app and the thing that you care about and you're focusing on if you're differentiator is in this range then you're deep in kubernetes terraform rust rewrite plus Tokyo like if that's the world you live in awesome if you're trying to make a backend that scales as far as possible for as cheap as possible the things I'm recommending here are not the Technologies and tools that you should be looking immediately or you should be paying more attention to people like Prime who are focused on that side of stuff there's another way to view this graph though instead of quality let's think of this as tolerance or your goal so I'm going to delete backend here and what we're going to draw is for a given app how much complexity do we need if we look at upload thing for example all right I'll do this better okay we'll have on the left be basically a static HTML page I built my own frame work in canvas so to emphasize what I'm trying to put here I have the spectrum of complexity for web apps on the left basically a static HTML page and on the right I built my own framework and canvas this is meant to be like the the two extremes for how complex web apps can be and how interactive and all that where on this side we have something like figma and on this side we have a static blog backend Technologies aren't going to get in your way at all when you're doing this if you're primarily building a static HTML page you can use basically whatever and be fine and if you look at something that we've built at ping something like upload thing I would say it probably fits comfortably around here upload thing if you haven't seen it it's the best way for full stack devs especially web leaning devs to add file uploads for their apps so a user can upload a file safely we put a lot of work into building this at ping really proud of what we made the reason I bring it up is that the web app that does all of the like managing the dashboard creating apps doing all that stuff it's cool it runs real nice we're using nextjs server components and all the app rowter stuff for it which is pretty cool but it doesn't need all that I could rewrite the entire thing in standard PHP without even using something like Live Wire just static HTML out for it and it would be fine it wouldn't be great but it would be fine but if we compare that to something else that we've built like Ping Ping is a little more complex it is a zoom clone for streamers to do live collaborative content creation it is a difficult product to build I put a lot of time into making this with the team I'm really proud of what we made if you've seen people like primagen or me or shows like Austin show doing live collaborations with lots of people ping is what a lot of us use for it and that's why I built it I actually built this before I become a streamer funny enough and the amount of things we've had to do to make the client experience here great would not be viable with an HTML first framework we did build this with next but I'm barely using nextjs the T3 stack was built for this project originally with the goal of making a great Dynamic experience for users and I really think we achieved it but we achieved it not by innovating crazy on the back end we innovated by going insane on the front end and hacks with State Management and UI rendering and crazy things with web RTC to make a good experience the back end didn't really it wasn't a thing we thought about that much Beyond it being a place to store Json blobs and authentication and tokens for joining calls but when I look at this it actually sticks out to me if we flip this and instead of it being complexity for front end we do complexity for back end on the left here we have crud where you're literally just sending a Json blob to write or receiving a Json blob for read on the other side we have globally distributed autoscaling transactionally safe data with gdpr 4 compliance where you're going all in making the best possible backend if I was to take these two exact lines the change I have to make here is actually quite simple hopefully this helps emphasize the point with a service like Ping the back end is relatively simple we have to issue keys in some weird ways and you have to do some syncing that isn't super fun but the back end is really simple and it will comfortably run on serverless infrastructure minus the web RDC side forever whereas upload thing hopefully you've seen the videos where we break down just how complex the infra had gotten how we simplified it but through simplification had to do a lot of additional complex work upload thing requires a great backend to do what we wanted it to do and that meant that we had to think a lot more about the complexity of that and just building it through serverless in nextjs was not the right move anymore the web app is still using NEX but doesn't even need to because it's not the part that is complex or the differentiator for the product this is a nice thing the back end has to be this complex though why am I bringing all of this up in a video about HTM X if I bring the complexity for front end back down here I'm going to make a slightly controversial take there's a line somewhere here I'm just going to arbitrarily draw it here as far as you can go with browser standards without going insane there is a certain level of quality and complexity that you can build in your web app before you feel like you're going mad sure there are things like web components that can help here but depending on if you're even willing to adopt those and how insane they drive you this line might be even lower and depending on what you're building this might be fine or it might drive you mad like if you're trying to build a static Blog the complexity point you live at is below where the browser is going to fight you but the moment you want to add something a little bit more complex like let's say you want to add that fancy comment section I mentioned earlier that's a little bit more complex to the point where you might exceed where you would have a good time building with web standards and Technologies so what do you do what you usually end up doing is adopting react because react can very happily solve this whole section for you but it feels really bad that the only reason you're adopting this technology that's built to go all the way there with complexity is this tiny tiny little range right here the only reason you're adopting a TCH like react that's going to add so much complexity to your build chain to your tools to your pipeline and all of these things is because you want to have a comment section on your blog and that feels like because you are here you know how to get here to this next line you see just a little further out just a tiny bit further and you can build the last piece you want but now you have to adopt this whole ecosystem of that you don't care about realistically speaking even if react can cover this whole range it probably shouldn't have to ideally it would only be adopted when you're at a certain level of complexity and up until then other tools and technologies will help deal with this part but since nobody wants their thing to be graduated from nobody wants to build a tool that eventually your thing is too big for and you have to leave it not many have tried but this is why I think HTM X is genuinely really cool it lets you build something that is more complex without having to adopt a complex technology in fact it lets you build something more complex without even having to leave the back end with hmx we are effectively going all the way back up to here and we're saying okay everything after this point was a really cool experiment and lets us build really complex things but how can we make it so you don't have to leave here hell how do we make it so you don't even have to really feel like you're leaving here you're just building HTML from the server if you don't need the additional complexity that react brings you just want to have a better comment section on your blog or you want to have a feed on your Twitter clone that when you press enter it doesn't have to reload the whole page HTM X is a phenomenal solution for that and when you look at jQuery and all these other Solutions and when they say they want to be the new jQuery I get it what I think is cool is they're actually going a bit further where jQuery would still require you to do the work on the client yourself and to send either Ajax via XML or more often Json almost all of the dollar sign. Ajax calls I've seen in my life are getting Json as a response not XML so what if we didn't need all of that what if we can do what jqu represents but by going the other way by simplifying further by not having the dev write the JS code in the HTML what if the dev could just write in the markup what they want it to do and say hey this element should update with what this endpoint returns instead of this where you're writing a button that has this onclick behavior that does this thing the thing that makes HDMX different is you don't write on clicks or behaviors like that write something like this HX post which is the HTM X shorthand for what URL you want to have posted to and then HX swap which is where should we send the response because when you post to the slclick endpoint the response isn't Json the response is HTML what do we do with that HTML we don't want to replace the whole page well with HTM X you just send to the HTML for the part you want to swap and then you tell it in the markup previously that where you hit the button where to put it in HX swap outer HTML means the layer directly above is going to be replaced with the HTML we just got and you can send it somewhere else too you have lots of options with all that what it means is you don't have to write JS logic to describe what should happen when the payload comes back instead you have to write the end point you wanted to go to you have offloaded all of the work so to speak to the back end but is it really work you're just rendering a different element there's a good point that was made in chat that I want to call out not that I forgot the close ped I'm sorry I did that but this bit here adding on clicks and Ajax like that also introduced a massive disconnect between front end and back end there's no type safety or anything with HDMX front end is much closer to the back end and it's safer as a result absolutely agree there is no longer a way for the front end to get into a state where it has some thing it rendered or expect X that the backend can't understand because there is now an attempt from the back end to guess what the front end is doing to send the right data with HDMX is much harder because the front end doesn't control its own State the front end State comes from the back end telling it what to do this is a move to get all the state out of the browser and into the server which is how it used to work another way to view this is as we go further and further down this diagram we are effectively adding more and more state to the browser and when we get to this complexity arms race that when we now have stuff like indexdb where you can store gigabytes of data per page in the browser directly and those things are incredibly powerful and let us do awesome stuff but they also make the relationship between the front end and the back end hard I know from experience because of a project I am working on right now where I am syncing a lot of data from the client to the server it is not easy to do when you have an expectation on client and want the back end to meet that expectation the harsh Realties as we moved more state to the client things got more complex they got so complex that eventually introduced a solution to that complexity and you know how these go graphql graphql was an attempt to do a lot of things but the biggest one was standardize the relationship between the front end and the back end so you can describe the needs of the front end without having to build this crazy synchronization layer between them graph is almost the inherent end of the complexity arms race that is effectively a necessary state that we get to because web apps have gotten so much more interactive and they do so much more it's not oh we used react so now we need graphql it's we built something that we would have built a desktop app before but now we're building a web app for it this does a lot of different things we need a way to keep those things in sync and it's not easy htx is a rejection of that HTM X says why do we need react to do even the slightest bits of complexity I bet if you were even ask Carson the HDMX guy hey I'm building a web RTC video call app how do you feel about me using HTM X for it his response would almost certainly be what the why would you do that they're a great web app as single page app Technologies for doing that type of thing the same way that if you came to me and said hey I'm building a really complex data architecture that's going to let me process millions of requests for AI analysis can I use next for it I'll be like wait what the yeah you can use it for the web app maybe but why would you just go focus on the back end and build a real service like that's the problem the thing that you're trying to do should help dictate what tools you pick but the thing you're trying to do is add a comment section to a Blog you shouldn't need react for that and I'm saying this is like the react guy I feel like a lot of people ended up disliking react because they felt like they had to use it even though they were in a much lower complexity range like if you're in this area react's going to feel like miserable because it's introducing a workflow and mindset built to make this section less hellish so this is where you're living it's not it's just going to feel like too much and like it's not really benefiting you so I fully sympathize with devs especially the back and leaning ones who felt forced to try react didn't like it because it didn't solve the problem that they had immediately enough and it introduced a bunch more complexity that they weren't interested in and HTM X lets you go way further before you need react that's another way to think of this is this red is how far can you go before react becomes necessary if we change this to we'll do yellow for HTM X with HTM X you can go way further before react becomes necessary react can solve honestly all the way down to the end should you use react for static blog yeah probably not but if you wanted to use like vanilla teac you'd hit a complexity limit early before you have to build a lot of yourself and it's not fun use HTM X you can get way further before you hit that wall and again this goes the exact same way for backend if I copy paste this down here I change this to how far can I get with nextjs I'll just say yeah next plus lambdas you can get to a certain level of complexity with a stack like that but you're quickly going to regret it if your backend complexity gets high enough if you use expressjs you can get a good bit further but you're still going to hit a wall at which point it's irresponsible to be using js on the back end you use goang instead you're not going to have that problem and like realistically you can use go for CR apps you probably shouldn't but you can the the point here being you shouldn't feel like you have to adopt goang just because your back end is slightly more complex than what next in Lambda introduces thankfully we have things like Express and fastify and awesome ways to deploy and use them so much so that I'd argue for a lot of things you can go really far and this also isn't just one category and one axis of backend complexity there's a lot of different parts that are that complexity like for our API and our upload endpoint that actually takes the file and puts it where it belongs that part isn't too complex and absolutely fits within what Express and fastify can do but if we were to start doing crazy analysis of those files we were to start processing them doing crazy data on that server it would no longer help us there and we'd have to move to something more native or if we just wanted to reduce our costs we'd have to pick up something that helps us there but it's important to recognize the reality of the thing you're building and the reality of the complexity you need and if you need a little more complexity then the default you reach to gives you there's no shame in adopting something else but it feels really bad when the Gap is as big as it used to be and HTM X helps plug that Gap the same way that something like Express or fastify or even arguably next to Lambda help plug it over there as well if I'm a front and Dev and these are the tools I'm used to I dread the moment I hit a level of complexity where I need to leave those Technologies behind I try to avoid it to the best of my ability and if you're a backend Dev you probably do the same thing where you're making web apps that are less complex because you just don't want to use react with HDMX you can do way more complex things and as I showed here with this example those more complex things don't require more complex code which means they will be more maintainable they will survive for a longer time and theoretically speaking they will Rust and that's my favorite thing about the name rust it's meant to indicate code that can sit there forever and be fine HTM X is trying to build that for your friend end because it's trying to make a simple thing that is complex enough for the user but not meaningful introductions complexity for the developer and for that reason I love it and I think it really does fall in where they're putting it here their goal isn't to take react devs and convince them to leave behind the tools they love and use HTM X their goal is to help devs that don't want to do any of that they just want to keep working on their back ends and generate HTML and have a good experience and yes I know rust was technically named after a fungi or something whatever I just like the name meaning the code can rust so back to this article because there's cool points in here stability is a feature we're going to work to ensure that HTM X is extremely stable in both API and in implementation this means accepting and documenting the quirks of the current implementation someone upgrading HDMX even from 1 to two should expect things to continue working as they did before where appropriate we may add better config options but we won't change the defaults interesting I like this overall the idea you can just bump the version and be fine but if you have a better default the point of major changes is that you're willing to change defaults to make the experience for you new person better the way I think of this requires a diagram I'll say that much let's say we have an app that is steadily growing in users over time we got users and we got time here's where we had our 1.0 release with 1.0 we stabilized our apis we called this a stable service ready to go awesome now let's say we realized that there were some things there that weren't ideal that are actually making life harder for some of our users we could write docs we could do other things to tell users like hey don't do it that way but when this 2.0 release happens we have to make a decision we have to decide do we fix the default or do we leave it and this question comes down to how many users exist before this line versus after because if that default made life harder for everyone here the people before the 2.0 release and it might make it harder for them to upgrade to two if you make the default change because now there's a chance things break for this group that sucks to do and it's a hard decision because you love these people this is 100% of your users and if you make a change from 1.0 to 2.0 that breaks things for people in this group it feels terrible because this is 100% of your users but is this 100% of your users over time because as time goes on you'll have even more and I don't have an easy way in excal draw to like do what I need to here where it's like this and just fills the area underneath so forgive it I'll even delete the one point outline here so at this point 100% of your users are under this line they're the people that are using your product the 2.0 change is going to break things for them and that is terrifying the thought of breaking something for all your users should make you feel sick but you have to think about the future the future where your thing continues to grow and in this area here as things get bigger and bigger not making the default change requires more work for people in this range the new users are going to struggle the new users aren't going to benefit from a potential change here they're going to have the same problem that everyone here did and even if a change means it hurts 100% of your users at the time eventually that's not going to represent 100% anymore it's going to represent 40% maybe even 20% of your users and the rest are all going to be the ones that come after and this feels terrible because in the moment you're so scared of hurting the people who are the most loyal the ones who have bet their stacks on what you've made but if you're continuing to grow and let's play with this more let's say your growth rate goes up you start down here instead of 20% it's like 5% of your users over time and it's 5 years pass you end up with 95% of your users adopting after 2.0 dropped well then you absolutely should have changed the default because you made things more painful for this group you made it harder for them to adopt and more likely for them to churn because you didn't make a change that could have hurt these guys where this goes even further is if you don't make that change this curve might do something worse it might start to Peter out because again the people on the side aren't new users anymore there aren't many new people coming in because if they do come in and they try it and it's too hard to set up they bail and they don't tell their friends about how good it is and you don't get more adoption and these releases often mark an inflection point not one like this where it's going to curve that way but if you do things right and you make things easier for new users you can meaningfully drastically increase the adoption of your tool we look at this with the history of HTM X I'm not sure I have hard numbers here so ignore the fact that I don't we could view the section on the left here as intercooler era and in the intercooler era they got users people liked it people used it for things but we'll say this marks HTM X when HTM X dropped is a SQL to intercooler adoption started to spike a bunch so you have to decide are you going to make changes that hurt your current users with the intent of making things easier for future users or are you going to prioritize the current user base because you think your curve looks more like this and this comes down to which are you building for are you building to turn your current user base into the minority or are you building to support them and ride into the sunset not caring if another person ever use your new tool or technology and this is a hard decision to make as a framework author it genuinely is and the alternative you have is you can spend an near infinite amount of money in time building a thing that is fully backwards and forwards compatible that changes defaults but doesn't necessarily require you to use the new defaults that has a compiler that will match magically turn your framework into the new thing that people want to use those are awesome but they require hundreds of Engineers to do thousands of hours of work HDMX is mostly just a guy it's a fundamental difference I F get why their focus is where it is because they're kind of planning for this where 80% plus of the people who will ever use HTM X are probably using it right now so I understand and I think it's a good decision but you need to think about this when you think about changing defaults because a default might hurt your current user but if your current users are going to be the minority in 5 years change the goddamn default speaking of not building for new users this is another example here no new features as features we're going to be increasingly inclined to not accept new proposed features in the library core people shouldn't feel pressured to upgrade htx over time unless there are specific bugs that they want fixed and they should feel comfortable that the HTM X they write in 2025 will look very similar to the HTM X they write in 2035 and Beyond we will consider new core features when new browser features become available for example we're already using the experimental move before API on supported browsers however we expect most new functionality to be explored and delivered via the HDMX extensions API and will'll work to make the extensions API more capable where appropriate I'm immediately getting a flashback to a similar thing that a project did a while back The Elixir language announced that it was language complete that they would no longer be adding new big features to the language of Elixir the goal being to allow you to extend it the ways you want via extensions and plugins and libraries because the core of what made Elixir Elixir according to Jose was done now with all the crazy stuff he's doing with a type system it's different but the point being having your cut off line where you're happy with the feature set and you've built the extension Paradigm for people who want more so that you can maintain a stable thing indefinitely that's really cool and there aren't enough technologies that do this this does have a cost though both like the likelihood new people adopt but also if we go back here there won't be an HTM X update in the future that pushes it further to the side here we're not going to get HDMX updates to make it more and more competitive with react it's going to stay here and that's a good thing it means you can trust it and rely on it and not worry about it in the future and that's a design goal of HDMX and it makes a lot of sense just weird seeing it called out so directly in this way they called out they're going to do quarterly releases now makes a lot of sense cool to see promoting hyper media what do you got to say here HTM X does not aim to be a total solution for building web apps in Services it generalizes hyper media controls and that's roughly about it this means that a very important way to improve HDMX and one with lots of work remaining is by helping improve the tools and techniques that people use in conjunction with HTM X doing so makes HTM X dramatically more useful without any changes to HTM X itself love this mindset HTM X is meant to be the effectively the glue between your back end and your front end and the idea of that glue being stable such that you can now focus on making the back end and the front end interface together better makes a lot of sense like you can't just use HTM X you have to have a backend that does something the same way you can't just use react you need to serve the HTML and probably need to use something to get it data like a real backend framework or something like nextjs which is a backend framework depending on who you ask those Technologies are necessary to make that piece work and eventually we'll hit a point where the Innovation is no longer in the library I would argue react is pretty close to there if it isn't already in the future The Innovation react won't be react it'll be the react compiler in the react server run times the react that we run in our browsers hasn't changed a whole lot since like react 17 in the ergonomics of how we write it and what we do with react the package we import hasn't changed a ton but the pieces directly outside of it are innovating at an insane rate such that it feels like react itself is constantly changing and HDMX could get there too it's interesting to think what will the future of these supplemental tools look like and how will this change how we talk about HDMX supporting supplemental tools while HTM X gives you a few new Tools in your HTML it has no opinions about other important aspects of building your websites a flagship feature of HTM X is that it does not dictate what backend or database you use HTM X is compatible with lots of backends we want to help make hyper media driven development work better for all of them one part of the hyper media ecosystem that hgx has already helped improve is template engines we first wrote about how template fragments make defining partial page Replacements much simpler they were a relatively rare feature in template engines to clarify what this means in traditional backend Frameworks let's say I go to example.com user Theo I go to this endpoint this is going to return a giant pile of HTML it's going to have a head tag head tag will have title Theos info body you get the idea when you go to that endpoint this returns a full HTML document but what if I'm Theo and I want to edit something on the page I want to change my name but I want to reload the whole page when I'm done if you're using a traditional old school templating system like this or even something like Ruby on Rails when you make the change what you're going to do once you submit is you're going to post to some endpoint we'll say we post to example.com user Theo and when you post to this with new data we write the data to database and then we respond with the updated page which we do with a whole new updated page with all of the HTML for that page because the templating systems in the sdks and the way all the stuff is built is with the assumption that when a browser goes to a URL the expected response is a complete HTML response with an HTML tag at the top a head tag directly underneath body metadata all these things what if the only thing that changed here is the title why do I have to reload the whole page wait for a server render and all of that and then generate a whole new HTML page from scratch when the only thing that changed was this what if instead of posting to example user. Theo I post to example API update username and all I want is a title tag to swap in I'll say carsson info instead this is all we want it can't be quite this simple like you're going to have to add a couple things to indicate what to do with it so let's say our HTML looked a little bit different let's say we have a button and when you click it we want to update your username right now it says Theos info we want this to change the Carson's info when we post to it all we have to do now say HX swap out HTML HX post through that endpoint and now we want this endpoint to return this the problem and the reason they're talking about the templating stuff is that most templating engines don't want to return a fragment like this they don't want to return just part of the page they want to return this whole thing again which sucks it genuinely sucks and I understand why nobody would ever want to do that if they don't have to but since every framework required you to send either the whole HTML or instead send Json we had these two extremes where on one side we had just send the whole page bro and on the other side just send 2 GB of Json the client can handle it so in a world where these are the spectrums you can be on where you can just send the whole HTML page or you can send two gigs of Json neither of these are ideal the thing that HTM X challenges Us in is it draws a line here and says why send the whole page and sadly the reason before HTM X is we didn't have the tools to do it well we didn't have a way to use the the partial HTML when we got it and if we did we'd have to do it all on client ourselves anyways since HTM X gave us a way to use the partial HTML we can now but we didn't have a way to write it and as they called out here there are now a lot of backends that have worked really hard to do fragments here's a page they wrote back in 2022 about template fragments it's basically exactly what I was talking about by the looks of it where we want to have this endpoint return just the button instead of returning everything this also has a problem of now you've written this button twice you've written it in the initial HTML response and you've written it here what if we could reuse it that's what fragments are might to be is a way for me to call something that already exists and use it in multiple places and also have an endpoint that makes sense so now as they say here we can render either the entire template by rendering the whole page or we can render just that part of the template so you actually only have to write the template in one place and the fragment is effectively assigning a variable to this part of the template so you can say hey I just want this part don't rerender the whole page just reender this part of the page and send that back instead super super cool and it's awesome to see more Frameworks adopting that because now it is possible to do something with that data and I totally agree Carson and the HM mix team are 100% to credit for the Resurgence of templating fragment techniques huge win on their part proud of them for making this happen it needed to happen what's real funny is react doesn't even do this with server components it kind of expects you to revalidate the whole page right now now I hope that the react World can learn from this eventually I like that Carson calls out his plan for Focus going forward here too although HDMX will not be changing dramatically going forward we will continue to energetically evangelize the ideas of hyper media awesome we shouldn't be using Json all over the time the way we do right now Json is the wrong solution to a lot of problems and graph K makes it even worse in particular we're trying to push the ideas of HTM X into the HTML standard itself with the trip tick project what is this oh this is an HTML proposal interesting it's their goal to make it so you can have core support and navigation in forms so you can do more with page navigation events by my understanding here yeah bring all the HTTP methods to HTML CU right now you can't use a lot of HTTP methods on HTML so you need something to do the translation if HTML lets you hit things with more stuff like if you could post to an HTTP HTML endpoint I'm starting to see the light here the browser should do more of these things and if you want to know more the link to this post will be in the description and he has a whole talk that he gave at Big Sky Defcon all about how HDMX should die if all goes well I love the goal of making the library that you built and built your whole brand around unnecessary I kind of feel similar with T3 stack my goal at T3 stack isn't to have the thing that everyone uses for their web apps have my name on it the goal at T3 stack was to Showcase how much simpler the relationship between our back end and front end can be and If eventually it becomes useless because the tools have gotten so much better yeah awesome I've seen massive improvements in the ecosystem that aren't necessarily directly credited with T3 stacker create T3 app well we definitely helped push the industry towards this full stack type safety Direction and HDMX is doing the same for web standers I love it and in the end intercooler was right apparently this is what they had to say in the intercooler docs back in the day many JS projects are updated at a dizzying pace intercooler is not that isn't because it's dead rather because it's mostly right the basic idea is right and the implementation is at least right enough this means there will not be constant activity in churn on the project rather a stewardship relationship the main goal now is to not screw it up the docs will be improved tests will be added small new declarative features will be added around the edges there will be no massive rewrite or constant updating this is in contrast with the software industry in general and the frontend world in particular which has comical levels of churn you should check out the most popular rust packages I get the point though intercooler is a sturdy reliable tool for web def leaving aside the snark at the end of the third paragraph This thinking is very much applicable to HDMX in fact perhaps even more so since HDMX is a standard piece of software benefiting from the experiences and the mistakes of intercooler JS we hope to see HTM X in its own small way join the likes giants like jQuery as a sturdy and reliable tool for building your 100-year web services I hope so too the web deserves stable tools for things that aren't that complex at HTM X is without question positioned to be the best thing there and if your goal was something like jQuery is to not have to think about it in 10 years I hope HTM XX wins for tools to keep advancing we also need tools that don't we need something to be stable and reliable for the people who don't want to keep updating their code so I get the tools I want when I rewrite my stuff every couple months for me to live the life I live and to enjoy the things I enjoy we need stability in other places in the ecosystem and I'm so thankful for HDMX for providing that for so many people I hope this helps you guys understand that the htx sucks video was as sarcastic as it seemed I do think this is a great technology I love Carson and what he's doing and I'm excited for a future where HDMX continues to be the most boring solution for building web applications until next time peace nerds




## The Harsh Reality About Web Dev - 20240122
look webdev is far from perfect I'm not going to sit here and pretend otherwise browsers are slow JavaScript is slower and the developers who are contributing to a lot of these things don't necessarily do the best job but I still feel like the conversation around webdev and the Damage it has done is incredibly toxic and misses so many of the important points in the strengths of the web itself I want to take some time to break down why the web is how it is and why that's actually a pretty good thing in the end because I'm increasingly tired of people crapping all over JavaScript for reasons that make no sense this one's going to get me a lot of trouble isn't it the web has revolutionized software and to say otherwise would just be bad faith the potential inherent to a single shared platform that we use to access remote resources from anywhere in the world on basically any device is a dream we have been chasing for as long as software has existed we've been trying to find standards to build on top of so that one app can work on a phone on a computer and on devices we couldn't even imagine when wrote the software and that's what we got with Java kind of the Java Revolution was a wild ride seeing a billion devices running the same language where you only had to Port the virtual environment for it and the result was really cool for the first time ever people were building things that were truly reusable on all sorts of different platforms and we saw everything from banking software to Minecraft built using Java for this reason JavaScript was built originally to take that Vibe the ability to run things in multiple places but also a scripting language that was relatively quick to write in JavaScript had nothing to do with Java or Oracle to the point where it's become a lot of contentious lawsuits what I had created became JavaScript the name is a total lie it's not really related to Java so much as to a common ancestor C in syntax but JavaScript did bring that essence of a reusable globally shared platform that happened to be written in seven days and full of a lot of issues but we'll get to that all because the result of JavaScript has been incredible other attempts existed both before and after JavaScript to make something similarly Universal but a little more I don't know flexible and less chaotic and all of those attempts have failed pretty outright from Dart to action script to flash we've seen a lot of different ways to do interactivity in the browser but we always go back to JavaScript because in the end it's good enough and because it's good enough we've been able to build an Incredible World on top of it and these are the things I think get missed by some of these posters so if you're not already familiar tsoding I hope I'm pronouncing that correctly did a video showcasing just how rough create react app was for him and I totally understand create react app was an awful experience and to this day still kind of is because when create react app was built react was still a new framework and the idea of an all-in-one bundled experience to build a single page app with the HTML CSS and all the assets and everything was so new that they had to break a lot of ground and build complex Integrations around this new thing called webpack it was chaos but the goal of create react app wasn't to expose all of this chaos to you so you had to manage it all it was to try and assemble it into a platform we could build into and on top of and as painful as it was it worked it let us revolutionize how we built software at twitch yes to this day the core twitch website is an ejected create react app which is insane to think about that this simple starting point you could use to go build a quick project was the same thing twitch used to build its entire website but at the same time the pilot pieces we had to assemble was so chaotic and fragile that the experience wasn't great and as he showcased in his video there's a lot of crap going on in there there's thousands of sub dependencies doing all sorts of weird stuff but by doing that all for us we were able to build in a way that let us and our teams move faster and build better software than we'd ever built before and while yes there's a lot of dependencies on my machine as a developer the result is actually a better experience for our users and also a better developer experience for our teams overall but more importantly by doing all of this and getting us to the point where the things mattered we were able to build New Primitives and standards that have been much better for us to work with like vit vit exists because things like create react app were so bad but the value they provided was So High by making these things work we actually put ourselves in a position where suddenly making them better matters and yes things have to be bad before they can be good and yes if you're using the old version of things you're not keeping up you're going to encounter some of those rough stepping stones that got us where we are today but those stepping stones are what make the web so incredible and I don't see people making these same complaints about other languages or solutions that exist outside of the web because if you've ever tried to run an old python project good luck have fun you have a dependency that's python 2 and you're using Python 3 good luck these problems exist just as bad if not worse in other languages God forbid you try and run an old python project on a new machine that hasn't run it before you're screwed and don't even get me started on the state of Game Dev the amount of times Unity has gutted and rebuilt their physics engine in ways that are entirely not backwards compatible is just hilarious these problem exist in every subset of Dev that matters the only time you don't run into these problems is when you're going off on your own path ignoring the way others do things at all but there's a reason we don't do that in fact the web kind of went the other way rather than everyone making their own bespoke solution and hiring a bunch of native Engineers to figure out how to render text we centralized on something that was very standard and also kind of scary I think it inspired a lot of the frustration that we see now we centralized on electron if you're not already familiar with electron it's a chrome shell yes Chrome the browser but it's a wrapper so you can build a desktop application with the same technology you would build something for Chrome with the benefit here is you can write the same JavaScript code have it run in the browser and also have it run in electron but also that electron shell is already built for other platforms so you can write your code once and have a good user experience on Windows and on Mac this is's going to know you guys on Linux yes the only reason there's actual desktop software on Linux is electron so in the people who complain all about the web ruining software or also on Linux they're particularly delusional because their slack and Discord apps would not exist on their platform if it wasn't for these standardized tools and while yes a native app would be a little bit faster that same native app would not exist this is not an either or and this is why I am so frustrated because people love to pitch this as well if we didn't have these web tools and Technologies we would just have lots of better native apps no we wouldn't nobody was building those apps that's why we made electron in the first place that's why we built all of these things in the first place the solutions we had weren't getting better so we built better ones and more than any Technologies before it the web has maintained a blistering pace of innovation and improvements where we'll try something new we'll run into problems we'll fix those problems we'll build new things on top of them and we continue to iterate and progress as a result there are obviously plenty of hiccups as we do this and we make mistakes like web components but we also see massive success like with vit or with server rendering and in all these cases we realized yeah we had a problem the first solution didn't work but we can learn from the space that we put ourselves in and build something way better on top and we've seen this so much obviously with this comes a bit of fatigue and I understand that this sucks especially if you're a new developer trying to catch up and keep track of what's going on you finally learn react and now solids the hot new thing it feels bad but this is the case in almost every field I covered the unity drama last year and you cannot believe the number of people who have dedicated their lives to Unity who are sincerely considering leaving it all behind to try this new open source engine or move to Unreal just because they were scared of the company that happened to run the tech they dedicated their lives to most of the web is open source so we don't really have that problem which is a massive win in and of itself most of the Alternatives that we're talking about to the web are proprietary things that we could lose ownership of any day but on top of that they're just as chaotic they're innovating at similar Paces or they're not and it sucks we could look at Apple for example I'm regularly called an apple simp and to be honest that's probably Fair there's a lot of things Apple does that I can defend that most would disagree are defensible some of them aren't though in the current state of xcode is a tragedy it has not progressed meaningfully at all they only recently introduced the idea of a server to xcode there's basically no plugin architecture people just hack the hell out of it to make it useful it's bad and that's because it's not built on top of a pile of Open Standards that are improving constantly the web is one of the most Open Standards there is and the result is more access to software has ever been not only can anyone access a website anyone can build one and with other tools and Technologies like C++ getting started to build your first thing God forbid your first website was incredibly difficult and the feeling of sending someone a link and having them actually experience the thing you built good luck have fun when you're doing it in other languages and servers the reality is that webdev has enabled people to build better user interfaces faster it's allowed people to improve the Technologies they're building on quicker and on top of a great body of work that we're all standardizing on top of and it lets us just solve these problems so much better than anyone had before while yes there are websites that do this terribly and while I agree 20 second load times on websites are unacceptable usually those websites are outliers and often those websites would not have existed at all if it wasn't for the work being done on the tools to make it so fast to build I remember back when Co started there was a CO tracker website that took 20 to 30 seconds to load and a bunch of people went and pointed at the react bundle and how slow it must be to parcel that JavaScript someone took the time to analyze the site for real it was sending 50 megab of Json and having the brows or paret that is not a failure of web developers that's a failure of apis the API that was serving the data to that website was way over serving and now it becomes a problem for the web dev to deal with I absolutely love this meme because a lot of the complexity we deal with in modern web and modern frontend Technologies comes from the complexity that is managing servers if you have two different apis you need to get data from good luck have fun if you have a backend that's serving too much or too little data you're for a fun time all of these types of things just are how the web worked and because the tools on the web got so good that we could work around these things and now we're at the point where we can use servers ourselves as web devs too for things like nextjs to do our backend calls ourselves the need for a disgruntled backend Dev that gives us a crap API is going down more and more the vast majority of the time people complain about these things the stuff they're complaining about exists because the existing tools that weren't web Focus were too bad the reason electron exists is that the alternatives for crossplatform Native application development were were and let's be frank they still are the reason that client side applications and routing has gotten so popular is because servers were returning the wrong data or were so far away from our users that the speed of light transfer to get to the user's device was still slow enough that felt better to have some navigation on the client side a lot of these problems exist because the way we did things before wasn't optimal I'm not here to say the way we're doing it now is it's just dishonest to pretend it's not significantly better than it was and that's why I get so frustrated with takes like these ones as an engineer I can perfectly see all the madeup problems we are forced to keep solving because we are using browsers what what this one confused me genuinely and I had to sit and take some time to parse it because this is a response to a tweet about random problems that exist in modern web stuff like react but this is just what like the browser is how most people access software the browser is by far the most used piece of software in the world and with tools like electron we're now able to use the same Technologies we to build really good websites for all sorts of other things someone just say something really funny in chat I want to highlight cuz it's very real I used to use Gmail via mut I think tsoding and I would have been best friends for 15 years ago yeah I never use Gmail via anything other than the Gmail website except for on my phone I used the Gmail app and I used the Outlook app a bit too the reason Gmail was revolutionary is it was the first good browser experience for email and it became the default really quickly because the ease of access and also the ease of iteration there is massive the web comes with so many absurd benefits everything from access globally to your software to powerful native platforms you don't have to build yourself to immediate overthe a updates whenever somebody loads a page I don't have to worry about the version of the app they're using and making sure the server supports this old version cuz it's all just coming from a web page these Powers have made the web what it is and there's a reason it's the default it's not because we're lazy devs or because we suck it's because it's both the developer preference and the user's preference too this is why I got so frustrated when I see this take because no alternative is being presented here the alternative is getting really good at gtk and writing native desktop apps yourself which sure these two could probably do but I shouldn't have to invent a game engine every time I want to build a quick web app and there's a reason big companies aren't doing this either if this was actually better then people would build competitors that do these things similar to hear me out how we got here in the first place Google beat competing platforms because Gmail was a better experience by making a web experience that was good they made something people wanted and they did it better than the competition if the users and the devs didn't like this or the result was so much worse they were making bad software the market will solve these problems if you actually think the tools we're using for webdev right now are so bad that all of our experiences are worse as a result then theoretically you'd be able to move way faster and build stuff way better why don't you why do I not use a bunch of native apps on my computer because it's not easier and they're not better A lot of the time I won't sit here and pretend that a perfectly coded native app by an iOS engineer isn't going to be better than a react native app but it is going to have less features and it is going to be updated less often and in the end that matters a lot more because having a perfect piece of software crafted as a sculpture first try is Imaginary Land things need to change and I think it's telling that the person who's most aggravated about this is a Game Dev especially because they're an older Game Dev CU in the past you would ship your game and you'd be done this idea of software changing over time was entirely foreign to these individuals they never worried about what happens when we need to ship an update what happens when somebody's on an old version because the worst case they're making a multiplayer game it just says you need to update or you can't go online the complexity of modern software development is foreign to these individuals it seems and that sucks cuz I know they're talented devs but they're just borderline dishonest when they talk about this I actually had to switch to the Ping account in order to even read these tweets because Jonathan Blow blocked me because I made a skill issue joke when he was talking about how slow a brand new computer was opening up YouTube Just obnoxious stuff but they're so just anti web that they don't even make good Arguments for it most of these people have never seen anything else not having even brought up in a culture of system understanding they don't know the difference between madeup problems and real ones but it's not really their fault because the entire profession has been derel in its Duty I I'm trying not get too spicy here but then he makes this IQ points point if people understood how many IQ points they are losing by treating this giant mess of necessary mup junk as if it were foundational rocket science things would change pretty quickly very few people get to the point where they can see the perspective anymore show us the work and this is my problem like these aren't points these are performance he's not here to tell us how much better things could be he's here to tell us how stupid we are how many IQ points we're losing not acknowledging the fact that the platform he's saying these things on can only exist because of these modern tools people can try to go build their own thing not using these tools and Technologies and it will take them 10 times longer and they won't get anywhere I've seen this so many times I'm actually Consulting with a startup right now that built every using native Technologies and they are moving way way slower than anybody competing with them and yeah the app feels slightly better when you use it cool that's not what matters and these modern tools and Technologies exist and are adopted not because we're too low IQ but because they work well for lots of teams none of these people seem to have worked on large teams and none of the things they recommend work well once your team hits a certain size by having a standard platform we can build software better and I would like to think they know this because in Game Dev we have moved away from bespoke engines to the point where every studio just uses unreal or Unity now and it's genuinely hilarious to me to see game devs fail to acknowledge that standardizing on platforms despite the fact that we have to work around different problems often ends up being worth it so I guarantee anybody deep in the wires of unity dealing with the chaos that is their physics engine is going to be shat on the same way that we are for using JavaScript even though it's the exact same thing if you didn't use unity and you built your own game engine your physics probably wouldn't be so Jank but you also just built your own own goddamn game engine yes if we didn't use electron and JavaScript in react we would have to worry about reeners because we be too busy working on making text render in the first place it's just so dishonest and I'm really tired of it like just so tired webd and JavaScript have massively increase the number of developers and also the number of users of software and it seems like with that elitism is an inherent next step and that breaks my heart just because we have more developers there is now a rift between the ones that existed before and the ones that exists now and it's genuinely really sad to see I hate that there are new developers who are getting started learning these modern web tools and Technologies building things they're proud of and making websites with a link they can share to a friend for the first time it's not too different from the shareware days where we'd hack up a quick little game and send it to our friends I know I was there believe it or not but now that access is easier the number of developers is going up and the need for those developers is too and I guess with all of that so does the elitism if I've learned anything from talking to these types of devs is that they don't actually care about web dev they just care about the craft of how their code looks and feels they don't want to build good software they want to feel good when they build it I'm just here to make cool things I don't know what the hell they're doing and honestly if I hadn't learned react in 2018 I might have burnt out on dev entirely thank you all for listening let me know what you think in the comments and if you know of good alternatives to Modern electron software that are built in other things feel free to let me know about them I just haven't seen many appreciate you all ton as always see you in the next one peace NS




## The History Of Code On Twitch - 20230228
wow it feels like everyone's coding live now from twitch to YouTube to posting the things they're working on on places like Twitter and even LinkedIn because like everyone's building in public and they really like doing it live where did this come from what's going on and what led to people like primagen and myself blowing up on Twitch let's talk about it I think I'm a little bit uniquely qualified to talk about this here because I am a big nerd about both twitch and software engineering I also worked at twitch as a software engineer for almost five years so I got to watch this all happen when I originally joined twitch anything that wasn't gaming was against the rules I know creators who between games of League of Legends would do a dance when they won that got called by their partner managers and told hey you need to stop doing that dancing between games or we're gonna ban you we're not a dancing site we're a gaming site and as such code streams got treated the same way I know this because I was actually doing a code stream on a different Channel I lost access to all the way back in 2012 and when I did that it was a game streams I was coding a game so I just just barely skirted the lines by the time I had joined twitch they were introducing the creative team which was the team whose job was making non-gaming happen on Twitch and I got to write the code for the Bob Ross Marathon which was the first major non-gaming content on Twitch where twitch bought the rights to Bob Ross and just played through the whole show great time great experience and we normalized the idea of things that aren't video games on Twitch around the same time we started to see some people popping up in the Science and Technology category in particular Jason Langster started doing a lot of code and code interview stuff on Twitch it was really cool to see but it was a small community like 50 viewers was a big day but overtime as more and more people who grew up on Twitch started getting into software because there's a pretty direct link between people who love games enough to watch twitchaton and people who love games enough to go into technology and software and Building Things That overlap resulted in a lot of twitch users both viewers and streamers also getting into software engineering and it's a big part of where people like Prime myself came from we loved games we loved twitch we loved content and we just happened to love software as well so when I watched Jason's streams I saw so much potential and opportunity to make great content that was very technical very senior very valuable but in the places that I'm not used to seeing technical content because up until that point to me technical content meant a two-hour Tech talk with awful audio in the recording or blog posts this new idea of video content that I could interact with the Creator as they were creating was so new and compelling and exciting that I quickly fell in love I would pop into code streams all the time to see who was working on what and I'd see my little wrench pop up and chat and get to be all hyped on it that was a magical thing but it didn't get very far there was a lot of people working to make this happen though I would say the biggest obviously is primagen who despite not even having a category being forced to stream in science and technology was able to build up a strong audience over time but here's where the real magic came in the cross-pollination between twitch and YouTube Once the meta of twitch shifted in the direction of not just being Live 24 7 constantly streaming rather the ability to build a bigger audience when you're not even online where you can go to bed and people are still watching your stuff twitch didn't have that and software kind of needed that there's a level of on-demand control that most developers expect when they're consuming content that a live platform like twitch didn't provide as well as not having a category making it really hard to even find the streams where people were doing code in the first place with YouTube and Tick Tock streamers like primagen and myself and obviously Jason as well we were able to take the content we were doing live and show it to people in other places building up awareness of Live code existing in the first place YouTube and Tick Tock ended up being very strong arms in US convincing others about what we were doing and proving to the world that not only does twitch code exist but people who know what they're doing are doing it and it's a fun place to hang out build cool stuff often learn and I really want to credit Prime for the effort here I truly think he was the one to bridge the gap more than anybody in proving that you can make compelling content live and also share the pieces of it and build great videos too and just building up the awareness and as we can see in this wonderful blog post on the twitch developer Forum twitch realized that this category was growing fast and wasn't being well served at all because we were growing out of the category it stopped making sense for Prime to be competing with earthquake Watchers and chicken farms and it was clear we needed in our own category I truly think this category was when we really started to see the move towards live coding and code streaming once there was a place for us to go a button you could click on the twitch site to see all of the programmers who are currently live a community started to form suddenly we started seeing overlap it is all of our audiences started to merge we started to see the whole thing explode more than anything I do truly believe the visibility that Tick Tock in YouTube and Twitter gave us combined with the incredibly hard work of the original streamers who weren't getting recognized weren't getting discovered on Twitch and forced Discovery by going other places they made the category big enough that we got a label and we got a category on Twitch and once we had that the rest just makes sense I really want to shout out both Jason and Prime for starting the first and second generations of programming content on Twitch and really making all of this possible I know that my channel would not exist and the success I'm having now would never have been possible if it wasn't for the work they did I'm standing on the shoulders of giants and if you take anything from this video it should be how much I appreciate their work this was a fun rant I have no idea which channel I'm putting this on yet so where it ends up is where it ends up appreciate each and every one of you YouTube seems to think you're gonna like this video I don't know what it is but should be a good one they're usually pretty good with their recommendations I wouldn't be here otherwise thank you as always peace nerds




## The Horror Of Margins In CSS - 20230912
for most web devs CSS margin is one of the first things you learn sadly it's also one of the worst I can almost never recommend using margins in CSS shares is one of Theo's big bold assertions but seriously don't keep using margin until you've watched this whole video because I think you're going to be surprised about some of these problems let's Dive Right In the first thing I want to talk about is more around the mindset this isn't necessarily a bug in margin like a thing that it's doing wrong so much as the reason why I don't think it makes sense with modern web dev mindsets usually nowadays when we make a web app we're not making all the HTML top to bottom we're actually making individual elements called components that are structured reused and composed throughout our applications in that mental model margins break down fast as Jane put it in this tweet that has not left my brain since I first saw it margins are kind of a side effect because margins don't affect the element you're actually rendering they affect the things around that element which results in much less intuitive behaviors when you have a component with a margin and then you mount that in another component this is a really good way of putting it this is actually a reply to Max steuber's article margins considered harmful which goes in depth on this specifically around components and the encapsulation of responsibility you shouldn't be able to accidentally break the layout of a component you made by mounting another component inside of it maybe it causes the flexbox to get too big or something but for the actual behaviors of the other elements in that component to be broken by a sub-component is a flaw in your mental model I really don't think this is okay almost ever and that's a huge huge part of why I don't use margin there are a lot of bugs we're going to go all into those but before we get there I really want to push this mental model part it's so much easier to reason about your applications when you're not thinking about the side effects that margins introduce it's not common that Max and I agree this hard we debate a lot about things like trpc versus graphql but man he's one thousand percent on point here and as the creator of styled components I think he knows what he's talking about let's get into some of those weird behaviors a behavior I found myself running into a lot was when you use with 100 the behaviors of margin become much much less intuitive so in this example we have a component that has margin 30 pixel set the parent component oh this is padding block still I'm stupid and I don't know what padding block is so I'm going to quickly change this to padding top and padding bottom so this simple example class container that's the parent then we have two children child one and child two so max width set with 100 so it will expand as much room as it has now we have the children the first child Packer on red margin 30 pixels with 100 height 100 pixels this is overflowing by exactly 30 pixels because of how margin is computed by default it is not taken from the width that you've defined it's added on top of it so this element is still the correct 100 size but it's had 30 pixels of margin added outside of that you can kind of fix this with a global selector that is very common in most CSS resets box sizing border box but you'll notice it's not actually affecting things here there's a couple other things we have to change before this will behave as is expected to the first one that I tend to change is just swap margin to padding it's going to make the behavior here a little unintuitive because the padding is the layer before the the border so the background color is being included now solution here is to make a new child within so div class equals inner child one and with this what I will do is set the color on that child instead background I'll make it Pink so you can clearly see the difference with 100 and height 100 it takes as much advantage of the parent as it can and you'll see here that the outside margin the red it handled through padding is actually letting everything size correctly and if I just remove the red here and change this for padding to padding left and padding right suddenly things are behaving how we would expect the way Child 2 handles this is by not setting a width but that can cause things to break in all sorts of weird ways as I'm sure you're already familiar with 100 pretty necessary evil you don't need it if things are block but once you get into weird flexbox behaviors having expanding widths is often very very useful and when you combine that with margin things can get pretty unintuitive so I highly recommend for cases like this you wrap one additional element and use padding because that will allow things to behave in almost all cases but we have many more problems to dive into don't you worry let's take a look at margin collapse this is an article by Josh comio fantastic CSS wizard he has a bunch of courses and materials to help you level up your style Solutions your react component creation game and so much we're here to talk about his article on CSS margin collapse in CSS adjacent margins can sometimes overlap this is known as margin collapse and is a reputation for being quite dastardly here's a typical example involving two sibling paragraphs so these have margin top and margin bottom both set at 24 pixels and you can see here when you hover over that the margin for these two elements is actually overlapping which is do you have any idea how miserable this is to debug it's so annoying and as you said here it's not reliable you'll often be confused why things are or aren't collapsing if you have a border or a padding it blocks it that's very unintuitive I guess that's with a wrapper so it kind of makes sense fun stupid behavior of margin collapse number one it only works on vertical margins so this horizontal margin does not have the same behavior what the [ __ ] yeah are you kidding problem two only directly adjacent elements collapse so let's see if something like a line break between them now the collapse is no longer happening weird thing number three bigger margin wins this I guess kind of makes sense it's just got I this one's actually bugged me once in the past because I didn't know where the margin bottom was coming from on a different component and things were sizing in such strange ways this one's silly but it definitely will annoy you at some point God here's where things get fun nesting doesn't necessarily prevent collapse yeah so we Nest to this paragraph in a div both of these have margin and you would think that parent element would keep it from collapsing nope it still collapses it just shortens the div on the inside so even though there's an element with a margin and then another element wrapping it the wrapper element is not sized internally to match that margin by default ah unless you set a padding or a border on that parent element and now it doesn't collapse what what I almost want to make this a quiz where I like list all of these problems and you guess what it's going to do here's a curious one giving an element a fixed height can prevent certain margins from collapsing too oh God I didn't know this one that's really dumb margins can collapse in the same direction how does this keep getting worse I didn't know most of this before Oh God display flow root what the [ __ ] is display flow root more than two margins can collapse great of course more than two margins can collapse obviously this one's going to kill me guys why does anyone think this is okay oh God what doesn't what do negative margins do with the collapse I'm so scared I am legitimately in fear I hate this somehow more than everything else in here margin collapse made me uncomfortable margin collapse with negative numbers my brain I feel it struggling a lot right now this might be the the the most something I've looked at on stream has hurt my brain and I hope this helps you all as much as it hurts me because we need help we need to stop using margin this is so bad what happens when you have multiple positive and negative margins find the largest positive margin find the largest star negative margin technically smallest and add those together this is so much worse than I thought it was God uh don't use margins and you can avoid a lot of this what about the solutions well there's a handful and we're going to talk about the three that I tend to use the most the first that I like to use and I know I get a lot of [ __ ] for this one but I do think it's convenient a lot of the time padding elements what I'm referring to would be the relationship between these two child one and child two let's say that the reason we're doing padding here is we want to have space between these two the way I would usually do this is display Flex Gap there's a flex Gap two rem or whatever Gap we want between them Flex Direction column and there we go but I'm going to kill the margins on these because what I'm typically trying to highlight is how I would put space between them this is how I would traditionally solve this problem with flex and GAP display Flex Flex Russian column Gap to run but if I had four of these divs and I wanted to have a different amount of space between some of them like let's say I wanted more space between these two instances of child too instead of having a gap I'd have div class equals spacer I would Define this spacer padding I'll do a one REM so it's just one room each Direction why is that what it does anyone want to explain this one for me they're self-closing tags I was pretty sure you could self-close a div you're telling me that jsx has infected my brain to the point where I don't know that about HTML anymore you can't self-close a div why do we like HTML as we're saying about space or components let's say we wanted to have twice as much space between these two when you put spacer elements between things which these could be a br instead of a div I just use div because I'm lazy and stupid I can put a second one not twice as much space I could put a different spacer here or honestly what I do because I use Tailwind you won't even need to make a custom spacer class you could just do px-2 and then on some of them do px-4 it makes it so much easier to just quickly Define things it's convenient I've been liking this a lot a lot of people aren't fond of this pattern you can always just wrap the element with the padding instead if you really want to but I find that having literal elements in your Dom that are just for padding is actually really convenient so chartless pattern if you haven't obviously the second solution is just pad things you can use padding the vast majority of the time that you're reaching for margin and it will behave more often than not significantly better I have found that padding instead of margin solves the problems that I run into the vast majority of the time there's no collapse a lot of the sizing in Max with behaviors go away generally padding behaves and I haven't had anywhere near as many problems especially once you set the Box sizing properties for your app third solution is one that I feel like people are scared of and shouldn't be and it's one I'm reaching for a lot more for the things that make sense Flex Gap Gap is an awesome property in CSS I almost said new property there because people treat Flex Gap like it's this brand new thing that hasn't existed before and that browsers don't support before we go any further really want to emphasize browser support Flex Gap they support Gap in general even for grids the support here is nuts the only thing Gap isn't going to support realistically is Internet Explorer you are fine you can use gaap it's not just the latest versions of these browsers either it's the last like five plus years for a lot of these you're good you can use flex Gap browser support it now and browsers are usually very very up to date too because both Chrome and Firefox aggressively force you to update and most people using an iPhone are on a late enough version of iOS that Safari has these updates to it is a very very small percentage of users that won't have access to these things but mobile uses at 96 so Mobile's not even a problem that's a really good sign so what does a gap look like this is a grid with a bunch of elements in it and when you set a gap it sets a space between the elements it doesn't set them outside of the elements it just sets them between because it's a gap this is super super convenient in Flex boxes for something like a nav bar or a menu with elements in it that you want space between the vast majority I find myself looking for consistent padding it doesn't make sense to put it in the component that's being mounted four times it makes sense to put it on the parent element that is defining the relationship between those components in gap really helps emphasize that thinking the space between elements is not a concern of the elements it's a concern of the parent in gap makes it so easy to Define that if you do need different gaps between things in a flex box that's when I think the padding components make a lot of sense having a little padding element inside that defines exactly how much for certain parts and you can fall back on gap for the rest generally I find Gap works for almost all of the things I need to do but if it doesn't work for you try out the padding components because those can be really helpful as well I hope this was a helpful video and I hope that my CTO will stop yelling at me for using part panning components and hating margins so much because the only time I've seen margin make sense is weird one-off negative things like a negative 1px to fix it an icon generally though I avoid margin and almost none of my code bases use it and I hope this helps you understand why if you haven't already watched my video about different CSS libraries and how they compare I'll pin that in the corner it's one of my favorite videos I've done and I think you can learn a lot from that too thank you guys as always I really appreciate it these notes




## The Importance Of Deno 2.0 - 20241001
Deno Dino Dino bun I don't really care how it's supposed to be said but I do care about their new release because Deno 2.0 is actually quite exciting so uh let's break it down and not just Deno 2.0 by the way because this comes with another very exciting release alongside it which is the stable V8 bindings for rust Rusty V8 is super super cool and we'll talk about why as we go in the Deno 2.0 release candidate we've been planning a new major version of Deno for years many times it seemed imminent we we realized the features we wanted would require more work now it's finally happening last month we released the final 1.x version with 1.4.6 and today we're cutting the release candidate for 2.0 which includes everything that we expect in the final release this is the largest update since 1.0 with major changes like the introduction of node's process Global we've also made some philosophical shifts like preferring Deno install over the now deprecated Deno cache read on for the full list of changes and share your feedback a quick bit of context because I've seen more and more people who don't know this Deno was created by Ryan do also known for creating node he created Deno because there were things that he regretted in how he designed node that were too late to change and he made Deno originally as a proposed example of if he could undo the things that were done wrong with node what it could look like he gave this awesome talk at JS comp six years ago 10 Things I regret about nodejs in which he lists six things he regrets about how he built node yes the title is not accurate there's only like five or six things but it's a phenomenal phenomenal talk and Deno is a reordering n o d n o you get the joke it was meant to be reorganizing node or even D noing so to speak but uh yeah this is a really interesting video especially now because half of it is him talking about how great go is and how he's using go forino which ended up being entirely built on Rust instead later on but uh it's fascinating highly recommend watching this if you haven't we're not here to talk about what Doo could be we're here to talk about what it is and where it's going which are very exciting things we got changes to the global variables window and process we got dependency management which is finally a real thing because previously if you didn't know this about Doo the way you would import was with URLs so if you're using modules you can literally import them straight from the URL so here we're importing Pascal case from https den. lxm mod. TS a big part of this is he wanted to be able to avoid needing a pack P Json and Dino was built to be more like the browser but eventually they Cav added a dino Json which is different from a package Json but is somewhat supported by it's it's a whole mess but initially Dino was trying to avoid a lot of the things like the dependency management hell that many of us were in but now they're back in it because they're going full support which I honestly think is probably the right call because adopting Dino felt impossible because its compatibility was on a package level not a project level so if if I wanted to move a project to Dino from node it was hell we'll go through all of these one at a time so if you want to see all of them make sure you watch the whole video so we have the changes to Global variables we introduced the window Global in Deno one with the goal to make Deno as browser compatible as possible fortunately the window Global variable becomes a source of problems for lots of users many libraries check if they're executed in the browser by probing for window this is super common I'll often check if window is available to decide if I should do something or not because if window's available on client if not among on server this led to a class of bugs in libraries that would otherwise work in Deno due to window being globally available Deno started to discourage the use of window globals in version 1.40 suggesting to use Global this or self instead Global this is dope and more should probably use it in more places but yeah right decision in contrast the process Global has been widely requested while it has been possible to use process by importing it from node colon process for a long time many popular Frameworks rely on its presence in the Global scope often used in configuration files although adding import process from node process seems simple it often causes friction for users of popular Frameworks that would otherwise work seamlessly in Deno I know something like nextjs for example had a couple of these assumptions about having access to node globals that didn't end up being true and this is the work they're doing to address those types of things so the addition of process is a global you could expect a lot more code written originally for node to work with node changes in Deno however we still encourage users to prefer explicit Imports thus a new no process Global lint rule was added that will provide hints and quick fixes in your Editor to use an import statement instead I Like That explicit Imports are nice I hate magic globals so much dependency management Deno 2 comes with several new features that improve dependency management the Deno add sub commmand now handles specifiers with a sub path so if you add jsr colon at STD testing snapshot failed to parse the package invalid version requirement now with 2.0 it will just add the newest one there another thing that Deno is really strict on is the versions so you have to put the version in the URL in the ad command everywhere so you're more knowledgeable of what version you're running but that made onboarding obnoxious now it'll just add the latest when you run the ad command as it probably should package the format scope name to start with at oh it just like barely worked for npm stuff before now it just handles it dope using the jsr or npm prefixes is now required when adding dependencies to avoid potential ambiguity between packages with the same name in both registries that's interesting I understand but it's annoying for those who don't know about jsr already it's a new package registry that was built by the dino guys that works with node and Dino and I believe bun as well that's goal was to make it easier to publish and manage your packages has built in typ Script support it has built in like documentation based on your type definitions and it's a very different way of doing packages but it's awesome they're putting the effort into to improve one of the most painful parts of node which isn't node at all it's just npm and now they are making sure both are supported properly but now the catch is you have to include this whenever you're installing an npm package that's going to make tutorials so annoying if your project contains a package Json file Deno will prefer adding npm dependencies to package Json rather than Deno Json interesting so if you have a package Json into Doo Json npm modules will go to the package Json instead you can also add Dev dependencies to package Json using D- Dev flag they don't add d-d cool Deno install now supports the entry point flag which allows you to install all dependencies from a given module interesting so if you point Deno at a specific file it will download all of the things that that file and its Imports need and none of the rest it's actually really cool if I have like a gigantic project and I'm just working on this very small subset I don't have to wait for everything to install I can just grab this part huge very huge a new dino remove subcommand has been added to quickly remove some of the depths fine and they have a new lock file that's huge as someone who bounces between bun and pnpm a lot I hate the lock file in buns so much so much it breaks when anything is changed with pnpm the lock file is such a consistent format that they often Define so like when there are two polar requests that are changing package versions or installing new packages they can both merge without conflicts which is unbelievable because conflicts in package lock are just like the known pain of doing JavaScript correctly and ppm's format is consistent enough that it just goes away so yeah nice that they're going that direction this looks like it'll diff fine so that's huge most importantly they've improved the error messages providing helpful hints for common issues like incorrectly formatted relative import paths or missing dependencies when using bare specifiers so this one needed jsr in the front which is why it failed I do like that when something's being imported from a package like host it will always have a prefix like this in front or an HTTP I like that I have like a mental model for knowing when I'm reading if this imports from my code base or not based on having those prefixes that is nice the fact that you have the same Syntax for importing from a package and importing from your own codebase is weird and I do now I think about it more like this separation they overhaul the permission system I don't know if you guys know this but permissions is one of the coolest things in Dino if you run a random package or random file like a JS file with Dino and it's doing things like accessing your file system it will just fail it will outright just fail if you want it to work you have to specify permissions in the dino runtime you have to say with like Flags you run Dino with like hey I give you permission to touch my system I give you permission to access the internet by default it doesn't have those now if you don't have the right permissions it will raise an error inside of Doo instead of it being like an OS level error so you can catch it inside of the code that's pretty cool and now you'll get a special error requires read access to read MMD run again with with the allow read flag nice bunch more permissions changes we don't care about those read into them if you're interested links in the description as always esape commas and file names this is weird file name things like this have driven me insane I've dealt with hell with that cool they changed it I want more of the cool things changing web GPU apis are now stable they no longer require the flag deal open cool breaking changes clii changes what do we have here the bundle command oh bundle's actually really cool I'm gonna contextualize the Deno bundle command in a weird way I'm going to show you the NCC package by versel we've all seen packages that bundle your JavaScript into the most efficient version of it so if you want to take your package and make it a single JS file auths can import or whatever there's a ton of tools for that what if I want to be able to execute it what if I want to be able to have all the dependencies bundled in as well what if I want to make things an isolated single piece that I can guarantee run if you've used other languages like I don't know C we have tools like GCC that allow you to take all of the code all the things you've done all your dependencies and whatnot and bundle it into a single executable that you can just run NCC was built by versel in order to make it easier to bundle things like nextjs into a single file starting point that includes everything you need without having to have all of those sub dependencies that would be pulled in by the user in the end it just bundles it all into one file it does still spit out a JS file though so you need node to run it what Dino is doing is similar but it goes one step further Dino bundle brings in Dino as well say you have a single Standalone executable that you can run on any platform so instead of Dino Run my compiled file. JS it's justmy compiled file.exe or whatever other end like file end you want but it lets you have a single file output that is the Standalone executable to run the thing you built which is awesome for things like Distributing your code I would kill for this in Python I would actually probably be doing real python work if it was possible to distribute in a way that didn't make me go insane like a huge part of why the AI Revolution is happening on servers is because all the code is in Python and getting that python code to run on someone else's machine is literally hell node 22 is also starting to include support for this yeah the single executable applications future allows for distribution of a node application conveniently to A system that does not have node installed work is being done but Dino was there a lot earlier you get the point it's cool to have a command you can run to make an executable that you can send to people who don't necessarily have Dino or any of these other things sadly they're deprecating it as they say here but they're going to implement a new built-in bundler so look out for updates for that so cool sad it didn't work out in its initial version excited to see where it ends up going though import assertions are dead Long Live import attributes interesting one of the cool things that Dino had was the ability to specify the type of the thing being imported so if you imported from Json you could specify that it is Json that way if it somebody puts a different file here you don't get screwed apparently it was certain now it's with the reason for this is that the proposals undergone major changes including updating the keyword from assert to with is being renamed to import attributes additionally some browsers have already unshipped support for the import assertions interesting it's cool that's coming to the browser but Jesus it's actually really important in the browser because if you're importing from a random URL that isn't yours and you're expecting Json and somebody swaps that out to JavaScript you can get and this helps prevent that really cool nodejs and mpm compatibility here's where the real important things start to happen the most important point and this is probably the one that makes things work for people that were might not have before is improved commonjs support Dino bet real hard on esm I understand esm's the future we should all be working towards an esm future but a lot of packages aren't there packages that might not be that popular like I don't know nextjs still are very heavily commonjs packages or I don't know react also still commonjs it's important to support it well they have historically focused on esm but now they're going to have better support for commonjs to since it's 1.0 release Dino has prioritized es modules as the primary module system offering only limited support for commonjs through manual creation of require import create require from node module require is create require import meta URL require yeah this is how you would force require Comm J behavior is like a backfill while we firmly believe that es modules are the future of JS the landscape in 2024 still includes numerous libraries and projects relying on common JS despite Dino's robust handling of CJs libraries over the past year users occasionally face challenges when integrating commonjs particularly within their own code bases inde not two several improvements were made to help working with commonjs modules and make transitioning to es modules easier things like dorun index. CJs you can just run CJs files that's cool not quite as good as like the way bun does it where you just use both indexes and it figures it out but progress is being made Dino can now import commonjs files provided that they're using the CJs extension they do not look for a package Json file or a type option to determine if it's common JS or ASM that's a little Annoying they're not relying on the package Json which has been the standard for this for a while but at the very least you can change the file name and you're good also they support require in es modules or they support requiring an es module so if you have an es module file and you're trying to use it in CJs you can require the CJs way to interrupt in both directions they have better errors for when you're dealing with commonjs cool this is interesting bring your own node modules is the default for a while Dino did not support node specifically npm at all now it's changing very interesting very interesting the bring your own node modules functionality was introduced in Dino 1.38 but we still strongly Advocate to not rely on local node modules directories a lot of existing projects and Frameworks operate on assumptions that this directory will be present sometimes you still want to have a local node modules directory even if you don't have a package Json like if you're using a framework Like nextjs Remix or felt or when depending on mpm packages that use the node API like Duck DB SQL 83 and Es build to improve compatibility if a project contains a package.json file Dino will expect that the node modu directory will be set up manually in previous Dino releases you could use the node modules dur flag or node modules dur option in the config file to tell Dino if the node modules directory should be created or not doo2 changes the configuration option it's no longer a Boolean but rather an enom with three options you can configure file it with none if you want it's the default for Dino first projects which are projects that don't have a package Json it automatically installs dependencies into the global cache and doesn't create a local node modules directory at all this is what they recommend for new projects but if you're on an old project or you're using next or any other things you have a package ASA and you're trying to incrementally migrate now it will have the right default Auto is another option that you have it automatically sells dependencies in the global cache and it creates a local node modules directory as well in the project route this is what they recommend for projects that have dependencies that rely on node modules directly mostly projects using bundlers are ones that have npm dependencies with post and cell scripts makes sense and they have manual mode which is the default for projects using a package Json this mode is the workflow that no. JS uses and requires an explicit installation step using the doo install or mpm install or pmpm install commands or any other package manager that's what they recommend for projects using next remix felt quick Etc it's recommended to use the default none yeah you get the idea cool stuff it's it's nice that they have paths for all of these options and helping people migrate over because most JavaScript projects have been around for a bit now and as cool as it is to start new ones the new thing it's a lot cooler if I can use the new thing on old stuff once again great progress has been made in terms of node API compatibility I've been to Hellen back with node API compatibility if you guys didn't know this uh Cloud flare is not node API compatible they're getting there they're adding more and more features but it's still far from 100% of into so many weird problems things like the um the cuid 2 package I could just not get working forever and it was so annoying so annoying but these things are being fixed because no crypto support is now much more flushed out huge the amount of things that use the node crypto module is insane and the way it gets polyfilled if you bundle it and react is stupid async local storage is now more performance than reliable huge a lot of libraries rely on that for serers side stuff thech port and Port finder are Now supported huge super useful especially for the like why can't I use this port in showing you the errors those types of things also really useful tool Mark showed me recently Port manager this shows you all of the things that are reserving ports on your machine it's a raycast extension and it's made my life a billion times easier if I can't figure out why 3,000 isn't working I can kill it straight from here and now if I go to my terminal where I had left that project open it got killed it's so useful it's been a lifechanger so if you like me have too many projects and you lose track of them all the time first off start using raycast it's really nice but yeah the port extension the port manager really really really helpful whole video about cool things like that I'm using coming soon bunch more backwards compat things npm Puppeteer is more reliable that's cool oh Puppeteer same with playright those things both coming getting better at once makees sense doc tests that's interesting very interesting if you write examples with JS doc you can now type check them denot test-- do will make sure that your example stay up to date that's actually really really nice that's really nice I like that a lot apparently this doesn't just type check the example it'll actually execute and run them that's huge that's super super cool I love that you can also execute code blocks in markdown files oh they might just win on documentation like jsr and the doc side might be how they actually win the maintainability there is insane also I've not like Dino has a typescript like Dino has typescript built in so one of the big promises they made initially is that they would support typescript out of the box so if you want a new typescript version you usually have to install a new dino version these are default settings they've now enabled which I like no implicit override is very nice and use unknown and catch variables you never know what you're actually catching unknown is the right type for that doo2 ships with built-in support for at typ node at version 22 to make it easier to type check code relying on the nodejs apis also very nice to ensure your compiler option settings are up to date we've made it an allow list so Dino will complain and flag it if you use an unsupported option good stuff they have thank you at the end but I have a thing I want to dig into which is the Rusty V8 in case you don't know what V8 is and you watch this channel not many of you but enough that I'll call it out V8 is the JavaScript engine that exists in most browsers not Firefox and Safari but all the Chrome based ones V8 is the engine like the pile of C++ code that your JavaScript runs in and node was originally meant to be a way to run V8 on your machine so you could have like a CLI that runs JavaScript you don't need a browser for it it was just taking the JavaScript part out of the browser the engine V8 wrapping it with Native apis and things you need on your system in order to allow for you to write JavaScript code that runs on a real server instead of in the browser in an isolated layer as such V8 is essential to node to the browser and to Dino and Dino in order to maintain compatibility and not reinvent every single wheel chose to also be based on V8 however a huge problem with V8 and node is that it's C++ and that can be really really rough for a lot of reasons especially the layer that they had exposed to allow you to access C++ functionality inside of node I could do a very very long rant about the chaos of what's the name of the the thing you have to do a bunch of in electron what's the name of The Binding that lets you access the C++ from node I always forget the name of it it's a weird abbreviation it sucks jip thank you thank you Ronan no jip I have too much trauma around jip to forget no jip the history is I know it was that jip was an experimental future solution being used in chromium the node team wanted to be a synchronized with chrome and its use of V8 as possible so they adopted jip they had to adopt a lot more because they were doing a lot more native stuff and then Chrome moved off of jip because it sucked and now node is the like remaining jip user and jip is terrible I'm gonna I know I said to go watch this if you watched it and then came back I'm sorry I have to find a specific moment in here really quickly so uh yeah probably the biggest regret is the build system it's such a pain uh build systems are very very difficult and very very important to building projects node uses this thing called jip do you guys know jip some of you if you're writing a module that does that links to a C library you use this thing called jip to compile that C library uh and Link it into node right um jip is this thing that Chrome used to use and but Chrome uh like abandoned jip for this other tool called GN uh several years later uh we couldn't have predicted that uh but uh that's what happened um and now it's been many years since that happened uh and node is the sole user of jip it's a very funky interface it's like a Json file but it's in Python uh it's it's very terrible I will emphasize he is right it is terrible it is so painful I had to do a decent bit of jip work when I was working on Twitch Studio which was an OBS like video streaming app that ran an electron for twitch so you could stream video which me we had to en code video which we had to do a lot of things in that native layer through jip and it was  awful it was so bad so bad the chromium Gip repo was archived in 2023 so it's yeah it's very formally dead and the only reason gips alive at all is because no bet on it and now they're stuck with it so as Ryan mentioned in that video the pain of jip in the build system was his single biggest regret with node it's horrible I also I see you in chat don't want to know how many hours I just wasted to build my electron app and get some random error yep story of my life it's so hellish it's so hellish and that was one of the main targets Ryan had in his destruction and rebuilding of node with Dino Dino is a modern zero conf fake JS runtime written in Rust at its core is Rusty V8 a library that provides high quality zero overhead rust bindings to v8's C++ API see that that's the key he basically built a Gip alternative for V8 and then built a whole new runtime around it over the past 5 years Rusty V8 has undergone nearly 150 releases racking up more than 3.1 million downloads on crates.io today we're excited to announce a major Milestone Rusty V8 is now stable and production ready Well we'd love to mark this moment with a 1.0 release rust ev8 is skipping version 1.0 entirely instead we're aligning with Chrome's versioning scheme to stay in sync with V8 the first stable release of Rusty V8 will be version 129.0 .0 in line with chrome 129 this version guarantees API stability moving us Beyond years of 0x releases and it solidifies Rusty V8 is a Dependable tool for developers building on top of V8 man everybody was giving me  for upload thing being technically version 7 because we follow sver they're version 129 they're not that much older than us I had to make the joke I'm still mad about that one I can't believe people are mad at me for following sver ah it's one of the dumbest complaints people have had against me anyways what makes Rusty V8 so special Rusty V8 gives rust developers a direct zero overhead access to v8's C++ API it stands out for its completeness and seamless integration with high performance environments a key feature is Rusty v8's automatic integration of v8's complex build systems into cargo allowing developers to easily embed V8 and rust projects without manual setup so we made it easy to make a doo alternative too that's pretty cool with Rusty V8 you can build customjs run times you can run wasm modules you can Leverage The V8 inspector you can use the V8 fast API which is really cool as a way to directly call rust functions from JS and you can even manage memory automatically huge super super cool before we do the origin story I want to call one small detail out notice that the release notes like the 2.0 for Dino was written by BK and Andy Jen they're both awesome had great convos with them but they're not the people who created Dino they're employees of Dino Ryan wrote this I'm pointing this out I think it's valuable to know where Ryan's focus is it isn't in the major version update of Dino obviously he is there to support it help the team and make sure it happens this is where his heart is he wants a better way to use VA he loves JavaScript to the point where he will learn and work in much harder languages for long amounts of time to make JavaScript work more how he wants it to and it's funny there is no human who has written more code that isn't JavaScript because they like JavaScript than him and his investment here shows with as simple as he's the one who wrote this so what the origin story The Journey to rest of V8 started in 2015 when I was experimenting with building a JS runtime in go using a library called V8 worker eventually V8 worker was used in the first Dino demo as I mentioned in the video I was just showing before this is what he was talking about and demonstrating all written in go he's also very inspired by es build at the time if I recall however as Dino evolved it became clear that go wasn't the right fit for the project because of worries that Go's own garbage collection would conflict poorly with V8s very interesting call out that the the garbage collection between two languages and two environments was annoying enough that a language without it could actually be better in late 2019 Dino co-founder Bert belder led the effort to create a direct rust binding to V8 Instead The Challenge was to bind v8's complex C++ API to rust without compromising on performance or safety after much effort Rusty V8 was born a zero overhead rust binding to V8 that provided full control over V8 while ensuring memory safety throughout rust's ership model really cool stuff how crazy is it that rust was able to bind to VHC Plus+ API without issues and Russ trying to bind to linux's cap apis has caused endless flame Wars why is Javascript the true Unix like how do we get there where the Unix philosophy failed in Linux and there's like there's a huge War about languages there but over in Javas just like yeah we rewrote everything and Rost it's fine I just gave Prime yeah I I was definitely thinking of prime as I said that not going to lie anyways here's an example of how you can embed JS in a rust program using Rusty V8 you initialize the platform well you create a platform you call the va8 initialize platform and then you initialize overall you create a new isolate and make it the current one so again with V8 you have different isolates which are places that JavaScript can run and not affect other JavaScript because the point of V8 and things like it so I can have a ton of JavaScript running at once I have like however many tabs open right now all of these have their own JS run times they're all part of the same V8 engine but they can't with each other very important to get that right create new isolate make it the current create a stack allocated handle scope create new context enter the context for compiling and running the hello world script create a string containing the JavaScript source code so we create scope hello world unwrap results run the script print you get the idea it's a lot of steps but you can manually create execute and get the results of running JavaScript code through the V8 engine within rust and from here you can also probably see how things like Dino work it's cool that they are making this a separate thing instead of just building it into Dino like I could actually see a future where Dino is killed by an alternative written with Rusty V8 that has maybe better node compatibility or something really cool stuff actually I know for a fact it doesn't one of my favorite bandw in chat that I'm forgetting the name of the electron alternative they get really annoyed about Tori t r Tori Tori explicitly isn't using V8 because they wanted a lighter runtime so they're using whatever your device has on it by default or like JavaScript core which is rough I'm certain a big part of why is how rough it was to bind to V8 but they say it's for performance reasons and fine I would love to see a Tori alternative still written in Rust but using V8 instead using Rusty V8 you could make a really compelling electron alternative with much better compatibility than the existing ones using this it just got way easier to build a Tor alternative and one that actually uses V8 too that's really cool Rusty v8's memory safety feat Fe are core advantage over the C++ API for example in Rust handles like local te are tied to specific Scopes and enforced at compile time this prevents bugs caused by using or returning invalid handles something that C++ devs must manage manually I even ran into this when I was doing I oh God the idea of like a compiler telling me that I have an unhandled or an invalid Handler just keeping me from dealing with all those weird compile errors oh oh please make an electron alternative with this in Rust if you attempt to use a local value or local handle outside of its scope the compiler will catch the mistake so here we created an isolate we have a scope here attempting to use local outside of the scope will fail at compile time so invalid local let scope two has new scope one safe to use will not allow invalid local to be accessed here cool nice and simple every four weeks Rusty VA will upgrade its va8 dependency and bump its major version this means breaking changes to the Rusty V8 API will only happen when V8 upgrades the version will always reflect the underlying V8 version apparently they're going to follow zver even though chrome doesn't which is annoying good luck and they're ready for production rust ev8 is now a stable production ready library for building high performance JavaScript and web assembly run times in Rust whether you're creating customjs runtimes embedding JS and rust backed apps or exploring serers side JavaScript applications Rusty V8 provides the flexibility of V8 with the safety and performance guarantees of rust I barely talked about the web assembly part I think it's kind of funny that one of the best ways right now to run go or other native languages in a rust application is to do it using rust ev8 in wasum so if I wanted to have go executing safely within the context of a rust app I could bring in Rust ev8 compile the go code to WAM and execute it there that's really actually cool there's a lot of potential like people are going to do I just I love when tools like this are made not because they're going to change everything and revolutionize the world but the absolute chaos this could enable is so so cool and I'm really excited to see what weird people make with it so as cool as the doo2 release is the rusty V8 stable release to me is way cooler so yeah that's all I got on this one I'm hyped for this release I might even go play with it after stream let me know what you guys think though and until next time peace nards




## The Most Hyped JavaScript Of 2023 - 20240109
2023 was an unbelievable year for JavaScript and open source so much happened so much changed and so much improved I want to celebrate the great things that happened in 20123 by going through the biggest ones that had the most impact so without further Ado let's take a look at the rising stars of 2023 in the JavaScript World welcome to the eth edition of the JavaScript Rising Stars the place to see the trends about the JS ecosystem in 2023 let's see how a set of UI components you copy paste took the World by storm most popular projects overall Shad CN UI yeah it blew up last year it absolutely exploded almost 40,000 stars in a year that's crazy the hottest project of the year is Chad n UI collection of UI components written in react allowing customization of the styles through tail and CSS built on top of radic a set of headless components providing Primitives for concerns like accessibility and keyboard interactions Shad C nuui distinguishes itself from other popular libraries like mui shocker UI react Spectrum by not being a downloadable npm package instead you integrate the Shad C nuui components through a terminal command that installs the underlying dependencies and copies the component source code directly into your code basee for further modification I have a lot of content about why this is cool already so I don't want to Dive In Too Deep just yet but I want to point out just how cool it is seeing this project get the success recognition and overall just love that it's been getting it's an awesome project we shouldn't have to surrender our UI layer to a third party Library just to benefit from the reusable pieces that so many developers have already built and contributed to and Chad ceni found a really delicate balance in this way let's look at the rest of the things that found success last year though cuz there's some cool stuff in here number two is bun the champion of 2022 is maintaining his tremendous momentum crazy to think that bun was number one in 2022 and it's still holding so strong at number two in 2023 FN aims to be the fast all-in-one toolkit for running building testing and debugging JavaScript and typescript applications version one came out in September which is a huge part of where these stars came from there are so many other cool things that snuck in here I love that excal draw and teal draw are so close that's dope to see that three and four are tools for documenting and diagramming you all know how much I love excal draw I honestly owe it for for helping me gain the confidence to present and talk and make videos like the one you're watching right now I was always terrified of whiteboards because my penmanship sucks I have pretty shaky hands and as a result I don't write good I hate penmanship I hate handwriting and I do not like whiteboards and I just thought I wasn't the type of person who could think in that way or visualize stuff in that fashion and then I started playing with Escala draw and I fell in love with diagramming having a tool that made it that easy to do the low effort feeling handwritten style it was so powerful for me and it let me communicate in ways I never had before so much so that I ended up making videos with it and here I am now so huge shout out to excal draw thank you guys for making such an important piece of software that's helped me find success and teal draw they're pretty cool too nextjs what's that well uh almost like we've talked about that a ton here an interesting detail is that both next and super base got more stars than react this year and that doesn't mean react is falling off let's be clear this is more than anything because everyone's already started react on GitHub and next is just taking a subset of react's already existing Pi so to speak that said it's crazy to think that react's GitHub growth has actually slowed some amount and is being beaten out by other projects we also have Tori my favorite band word in chat I don't have anything against Tori I just don't have any good use cases for it and still lean on electron when I need a desktop app I'm excited to see where it goes especially once the mobile stuff gets a little further along but yeah for now not the most interesting project in the world to me drizzle making it into top 10 is wild I am so hyped for that team they've been working incredibly hard on building a modern or for JavaScript and typescript developers and they've succeeded Prisma isn't even in the top 10 now which is huge but there's one last piece that made it in just barely HT MX oh boy crazy to think that an anti- JavaScript tool has made its way into the top 10 JavaScript tools sure they love that anyways let's dive into front end Frameworks where we'll see HDMX is the second biggest front-end framework according to GitHub stars of the year that's hilarious also million which is if you're not familiar with million it's an alternative react reconciler effectively so it takes your react code and renders it its way instead allowing it to be hundreds of times faster than traditional react it's a really cool project it's being made by Aiden proud of him doing really cool work but to think that a react specific virtual Dom reimplementation is getting more stars per year than view says a lot about the culture of hype I'm not using this to crap on view let's be clear this is more to point out that the hype around something like million and the excitement and energy around that is going to drive Stars more effectively than a slow methodical planned out roll out also cool to see that of all of the front end Frameworks react is still the one growing the fastest Pace not too surprising but interesting to see as I've said in many a video over the last year I think front end the focused all-in-one thing is going to kind of die out in favor of full stack tools and solutions even HTM X despite only running on the client is a tool that helps you build better interactions and relationships between the client and the server with good experiences for your users if you want to know more about HDMX check out my truth about HTM x video it's the best I did last year but I really don't think front-end specific Frameworks are where we'll see most of the Innovation going forward and certainly not where we'll see most of the growth going forward full stack Solutions are where attention has shifted and I think that's for good reasons also huge congrats to spelt for maintaining and continuing its growth very excited to see where it goes over the next year especially now that runes are a thing and I've heard some rumors about other cool stuff going on since react is so big they actually got their own whole category here but the react ecosystem it's also cool to see they brought in Sebastian lorber as a guest writer to leave comments and describe what's going on here if you're not already following Sebastian fix that he's one of my main sources for news in the JavaScript ecosystem and his this week and react email chain as well as threads on Twitter have been essential for me keeping up and I'll be honest I find a decent chunk of my video topics just by keeping up with what he's talking about so huge shout out to Seb check him out if you haven't already let's see what he had to say here 2023 we saw react enter its third ERA with the Advent of react server components the core team and versell collaborated to release the first stable implementation nextjs 13.4 app router despite leading an exciting innovation in deploying consequent resources Mell received its fair share of criticism for its privileged relationship with the react core team and early access to experimental features I've talked about this a bunch in other videos I don't love this argument simply because there was a lot of other people who had this opportunity that either bailed early or refused to take it vel's focus on serers side react was so exciting to members of the core react team that they decided to leave meta and Facebook to go work at for sell to push this further forward and to this day there's only two to three core react team contributors that work at versel the vast majority are still at Facebook like 70 plus% so I don't think this push back is particularly valid I understand why it happened the vibe of this new company showed up and just took over this thing that we've been using forever and L dearly but it's not an accurate representation of the reality of what happened here Sebastian markb not to be confused with this Sebastian is the one who's led a lot of the server component efforts at versel and he went there because he wanted to do this and if I've learned anything talking with him it's that he is incredibly passionate about making the web better both for developers and for users and that all the decisions he's made have been in that effort and it genuinely kind of sucks to see people upset with him and with versel for trying to push the web the way they have let's take a look at these packages though it's really interesting to see what's been blowing up in the react ecosystem obviously first is shad CN UI and I'm honestly really proud of what Shad did here both in the way he challenged the idea of what a UI library is and also pushing the bar for accessibility in our tooling forward really far really quickly awesome project it deserves all the excal draw again found its way in here I thought TLD draw was also react based I'm confused why excal draw made it and TLD draw didn't I'm pretty sure teal draw should have been in here not a big deal just a quick thing I checked nextjs obviously makes sense in here zustand great to see them in here absolutely deserved I'm sure you guys know this already I love zustand I think it's one of the best State Management Solutions ever made and now that it's mostly being maintained by Dai from the panders crew it's in a better State than ever really pumped to see refine in the top five I haven't mentioned this before but refine was actually in one of the more recent why combinator batches and it's one of the few companies I personally chose to invest in I'm really excited about what they're doing call me biased but when I saw the project in a sea of bad AI Ops I was actually really excited to see someone who understood what the ecosystem needed especially on the react and web dev side if you're not already familiar with refine I like the description here open source retool for Enterprise their goal is to make it easy to build dashboards and uis and the things you need as a company to work with your data if you're not familiar with rol somehow it's a dragon drop low code way to build internal uis for accessing data so if you want to build an admin panel for a random person on your team to be able to go through invoices and make changes something like retool makes a ton of sense and that's why it's blown up as quickly as it has and become the massive company it is my CTO actually is an X rol employee and I poached him from there to work for me at ping the idea of an open source version is as such really exciting and I'm hyped to see what refine has been working on it's a really cool project the stuff you can build with it's beautiful and as mentioned before it's entirely open source the whole whole framework and all the pieces you need to build with it are here ready to go and they've built in all sorts of different platforms UI Frameworks off providers and all these other things you would need so it's pretty easy to quickly combine five sources of whatever and get them into a mini little dashboard with good UI components and dashboard stuff already provided it's a really cool project and if you're looking to build a dashboard for your company super quick definitely worth looking into refine a bit there's more cool stuff that Sebastian wrote here if you're interested highly recommend clicking the link in the description to go finish up that bit because as always Sebastian had good things to say enough of react let's take a look at the view ecosystem also nice to see a guest writer hopping in for this Lucy who's a core contributor of the Nu team as well as a speaker no Source engineer working at prismic cool stuff and obviously if we're talking about view you talk about n Nu is killing it it's making view more compelling than it's ever been there's so much cool Innovation going on in nu that doesn't just affect the view ecosystem but benefits the entire web dev ecosystem specifically around V and the server rendering stuff that they're building around the V World Super hyped on KN and everything going on in that side of things also nice to see other projects built on view finding success to like slide Dev which is an open source slide creation tool where you drop in markdown and you get back slides really cool nice that it's open source and that it's built in view anyone can go change it however they want also nice to see it getting the attention it's been getting we also have view element admin similar to the react admin components for quickly throwing together an admin panel with pre-made components nice to see that finding success as well as view use and element plus important thing to know about 2023 is that V2 died this is a huge change because the shift from V2 to three was brutal to to say the least there were so many changes that backwards compatibility wasn't really a focus and as such a lot of tools in the ecosystem had to pick which side they were supporting or do the really painful thing of supporting both at the same time now that two is end of life this two-sided way of living is dead and the python 2 to Python 3 chaos of view is hopefully in our past and I really hope that with this we have a crazy 2024 with way more Innovation than we've ever seen in the view world and I have good reason to believe that will happen again if you want to read everything that Lucy had to say here definitely recommend checking out the whole article Link in the bio now let's take a look at the back end in full stack section side note for the creators of rising stars I know you're watching this you could have invited me to be the person who wrote this part I would have loved to do that next year's always coming anyways oh there might actually be a reason why they didn't invite me we got spot number four that's really cool that's so cool good stuff y'all I appreciate you immensely it's it's so nice that my little stack that I made a video about about not even two years ago now just showcasing the tech that I liked to use and talking about why has become a stack that Rivals so much other cool technology it's still so surreal to see T3 and create T3 app in these rankings and I have to shout out the community and the incredibly hard workers who have been maintaining that project long as they have been for we have almost 300 contributors now and with Julius CJ and Nexel leading the charge I'm really proud of where create T3 app has gone and trust me 2024 is going to be a wild year for the T3 stack so keep your eyes open for that and also to see trpc growing as fast as it is definitely because of this community and a lot of yall using it the way you have have I'm not going to sit here and take credit for trpc success but I will absolutely take credit for kickstarting its growth when I started Shilling it as hard as I did the world woke up to the power of full stack typesafe RPC behaviors and it's really nice to see that that has continued well past 2022 and even through 2023 but we also have to talk about the things above and below talked about next a bunch already won't Dive In Too Deep if you want my thoughts on the current state of next I have a whole review I did all about the newest version of nextjs and the app router stuff too we also have Astro which yall know I absolutely love Astro is one of the first Frameworks to really challenge the role of a JavaScript framework I like that it's in the backend category here one of my spicy takes is that Astro isn't a web framework Astro is a server framework for generating HTML pages that have good interoperability with things like react as well as all the other tools that we use in the JavaScript ecosystem it was the first time i' had experienced the niceties of modern web dev while building things the old way with HTML as the output and I think it inspired a lot of the changes that we've seen in other tools since and then we have Nest I don't know who is still starring Nest I'm sure it's fine but I'm going to I'm going to say with primagen here and say that long running JavaScript on the server is not the most reliable thing in the world due to just simply how bad the error management is and as such it's hard for me to imagine good places to stuff something like nest if we don't already know what Nest is it's a heavy all-in-one framework for managing your servers in JavaScript so if you want to build a super strict set of apis with middlewares that are reused authentication layers and systems and a bunch of decorators and classes everywhere Nest is the best way to do that it's kind of like a net style experience for JavaScript developers which I hate because I don't like those problems and I don't think JavaScript is the right place to both have them or more importantly to solve them as such most of the times I would have reached for something like Nest when I have a large team contributing to a significant backend I don't find myself reaching for JavaScript unless I can be in a minimal serverless environment obviously things simple as long as you can but if you can't keep them simple that's when moving over to other languages like goang might make sense this the middle around feels very uncanny valley to me where either on one side you're able to keep things really simple so you do a bunch of minimal JavaScript Express or nextjs type stuff in a severos environment or you can't do that so you introduce other languages with better tooling and ecosystem stuff to make maintainable scalable Reliable Software the middle ground where Nest lives is just not something I particularly understand or see too much value in personally clearly a lot of people do I wouldn't get asked about all the time otherwise but every time I look at Nest I just want to pull my hair out so it's not for me at all anyways this is one of my personal favorites build tools obviously bun one by a lot but V did really well this year too and I should talk about V more in my content because it is really cool and I use it for a ton of stuff if I'm spinning up a single page app I'm using V almost always it's just it's in a really good state was created by evu the view Creator because he wasn't happy with the state of the webpack ecosystem and how miserable it was to spin up a view project so he made V to build on top of what was going on with es build which was written in goang or to make a better set of tools for production web application development the results great it's become the standard for a reason and even if I have disagreements with specific implementation details and decisions it's solved so many problems that we deal with it and I'm really happy that V has come out and found the success that it has speaking of bold reates we should probably talk about biome biome is an open source Fork of the open source project compan Rome which kind of burned and fizzled out at the beginning of the year the goal of Rome and now biome was to similar to bun rebuild all of the pieces in our tool chain for modern web development things like Babel and webpack and prettier and lent all written in JavaScript was not necessarily the best decision and biome was focused on rewriting the core pieces from scratch with Native languages specifically with rust to make a better experience for all web devs biome has focused in specifically on the linting and prettier side of things and they actually were the ones to collect the Bounty that I made a video about before trying to rewrite prettier from scratch and they hit over 95% compatibility with their rust binding that is comically faster really proud of the team pumped has been finding the success it has been hope they continue to get stars in recognition because efforts like this are so important for the future of web development I just went to the website for oxc cuz I'll be honest I'm not super familiar with it and it was way too hard to get to GitHub from here I had to go here and then click GitHub there which made it harder to go find in Star cuz I wanted to give this a star currently sitting at 6.7 th000 stars and I'm proud to be one of them now so what is this project it's a collection of high performance tools for JavaScript and typescript specifically focus on building a parser lter formatter transpiler minifier resolver all in Rust same philosophies as biome and rough JavaScript tooling could be Rewritten more performant and it's an integration tool chain that can tap into efficiencies that are not available to a disparate set of tools I don't know much about this one I would would like to look into it more before I say anything stupid but it looks like in December specifically it started to find a lot of traction yeah it was created in February of 23 makes sense I'm excited to see where this goes it's honestly awesome to see so much effort being put in to rethinking the tool chain for JavaScript and having multiple projects with oxc biome and Bun all rethinking this from scratch I'm hopeful that we'll have a future soon where we don't rely on the pile of disperate poorly intering tools that we currently do and Chaos like making es lint and prettier behave together will be a thing of the past for modern web developers really excited for any or all of these projects to find success we also have RS Pac here which is one I probably should talk about more seems like most of the attention for RS pack was in March which is interesting so I feel like I've been hearing about it a lot more over the last few weeks if you're not familiar with RS pack it's another alternative to webpack that is rust based I've seen some really cool stuff jumping on RS Pac recently specifically both Discord and Tik Tok have been using RS Pac for a lot of their compilation and transpilation recently if you are interested in all things rsac and specifically module Federation Zack Jackson scripted Alchemy on Twitter is the person to follow for that he's been my only source for all of this for a while and I know he's going to be hyped that I'm finally mentioning module Federation in a video so if you want to hear me talk about that more for some reason let me know in the comments it's not something I'm particularly familiar with at this time so hasn't been a focus just yet that's allow you to say about build tools let's move on to mobile wait I wasn't qualified for the back end/ fullstack section because I was not nominated in in the ranks yet Evan bacon who works at Expo who won this category is the one who wrote this part come on guys okay to be very clear I am joking no one hit me up no one said anything I just made this funny narrative for a video don't get upset with me certainly don't get upset with people who made this rising stars is awesome I love them for it and I know they're hyped for this video so thumbs up to y'all obviously Expo one you can watch any of my recent videos that mention Expo to see why react native is neck and neck with it this shouldn't be too surprising as Expos the best way to do react native by far even more so than is the right way to do react for web there are a lot of valid options for building react on the web I can't think of many ways to use react native on mobile that make sense that aren't through Expo they've just built the tools we need to have a good react native experience and I highly recommend using Expo if you're building react native and if you haven't built react native yet X was the place to start I like what Evan had to say here in 2023 the mobile space made significant progress towards unifying web and Native development experiences this is evident with the top projects of Expo tagui and Native wind which share the goals of maximizing code reuse and increasing accessibility for web developers there's a clear Trend towards better styling Solutions in react native with tagui Native wind and react native paper leading the way if we hit show more here you can see multiple other projects that have been finding a lot of success native wind basically just lets you write Tailwind in your react native code really cool lets you share things between projects more easily react native paper is a material design library for react native don't love material design either the look or the philosophy but it's cool to see it finding success here also just saw Hermes at the bottom here I have a whole video about JavaScript at the speed of C definitely check that out if you want to know more about heres react native dominance is evident with seven of the top 10 projects based on this list however the presence of three webview based projects in this list suggests a lingering interest in deploying websites directly to app stores as is the threes mentioning there are quizar capacitor and ionic all of them are built to make it easier for you to take a website and traditional web code and wrap it in an application shell so it works and feels like a mobile app while I'm happy these projects exist for the specific use cases that they make sense as Progressive web apps continue to get better and react native continues to get easier I think the need for them will continue to die down over over time and now for everyone's favorite styling and we'll see here Styx despite only going open source in December is already at almost 7K Stars I like to think I was part of why there Styx blew up we all knew and expected that Uno CSS which if you're not already familiar is an alternative CSS engine for things like Tailwind so you can use this as an alternative to tailwind and it runs the JavaScript either in the client to create the right Styles or as a build step to generate the right CSS cool project it's created by ant Fu a lot of the vi Community really likes this not for me pumpt it exists though you also see tagui which was mentioned before is a universal kit for both react native apps and react web apps there's a bunch of UI components ready to go for you we also have Panda which if I recall was created by the chakra crew the people around that space to try and make a typesafe CSS and JS toolkit for building modern UI libraries I don't know as much about panda as I do about a lot of the other things here you want me to look into it more for future videos let me know in the comments we also have native wind which is super hype as I mentioned Tailwind on mobile is really cool it's awesome to see it finding success in getting almost 2,000 Stars over the last year I I hope native wind and things like it continue to find success so that our mindset can be transferred between mobile and web while I am not the biggest believer in reusing UI code between platforms I absolutely love the idea of sharing my mindset between them when I already know how to write react being able to go between different projects that Target different environments but carry my react knowledge and my way of building between those I'm able to build more effectively and make the right solution for each of those platforms native wind is really exciting for those reasons vanilla extract is also a cool project if you're not already familiar vanilla extract is by Mark ish who I've brought up a bunch on this channel he's the one currently pushing remix in the direction I'm excited about he also built vanilla extract which is one of the first typesafe CSS Solutions I've ever seen it uses typescript and compile steps to generate CSS as a result of the definitions you create and it does all of this in a type safe way you can create a theme that has these properties and you can create styles that have things as well these have to be put in a css. TS file for to be compiled and handled properly once you've configured your build tools correctly these all get generated at build and you don't have to worry about CSS JS at all similar to stylex I'd even make the argument that vanilla extract paved the way for something like stylex by showing the power of using the typescript compiler in build steps to give you good Integrations in collocation when you're writing the code but also the performance of flat CSS files once you deploy the code for your users really cool stuff love Mark and all the work he has done on this project and it's cool to see it's still getting attention even though in my opinion a lot of the wins have been carried forward in a stronger fashion in stylex we also see style components somehow getting Stars still no if I Style components I just think as an ecosystem we've largely moved on and then Kuma which I never heard of emotion which I thought was dead and lenario which I've never heard of let me know if you need to talk about any of those in the future and now my favorite section testing playright is actually pretty cool nice to see them finding success Puppeteer was good how was the one before Puppeteer it wasn't Cypress was it Cypress whatever playright is the one that I've had the most fun with by far it's nice that we've built layer upon layer upon layer of headless browsers so that we can finally have a good experience testing our code in the browser I haven't needed to use things like this for a bit because our tests are much simpler or way more complex when you want a traditional integration test where you're rendering the component and making sure things behave the way they're supposed to playwrights a really good solution for that and I'm pumped to see it getting the attention that it's been getting story book I feel almost the exact opposite about but I don't want to be too negative in this video so I need to do a whole video dedicated to why I don't like story book let me know in the comments we do need to talk about vest though because vest is really cool finally someone is challenging just in a meaningful way vest came from the V EOS system as an effort to get out of the just dependency hell they were having a lot of just's decisions were made before we had a standard for packages and builds and on even typescript and as a result making just work in a project especially if you're using a builder it wasn't meant for can be really rough and a lot of the bindings to get just working in V were miserable to build maintain and integrate into your projects the test was kind of started to challenge that it was started obviously by ant Fu the legend over in the view scene and it has found a ton of success both in and outside of the V world I know projects that are still using webpack even things that are using nextjs that use vest for their testing there's an important catch though as far as I know and correct me I'm wrong the test doesn't do parallel testing really at all yet so if you have a ton of tests you need to run it's not the best solution for that could be wrong on that I've Just Seen benchmarks and examples that scared me a bit there when it comes to the amount of time it takes to complete a given test or a series of tests in linear fashion but test is hilariously fast I will say buns testing stuff is really exciting too and it's said to not see them in the second but between vest and Bun I see a future where testing gets really really good let's blast through these last categories quick there's some cool stuff here with desktop Tori obviously one electron still holding strong despite being around forever and not really being marketed particularly hard whales I haven't seen build desktop applications using go and webtech mky let me know if this is interesting and if I have to talk about it cuz right now I have no idea but with Tori being Russ in webtech and Wales being go in webtech it's co to see other native languages building things like electron because God the bindings in electron the chaos of C++ and node jip is so miserable if you're not familiar the way you call native code an electron is an ancient binding called node jip a while back Chrome was trying to rethink how the JavaScript would talk to the C++ native layer and they built this thing called jip as that interrup at the time it seemed fine and since Chrome was using it npm wanted to centralize on the same things Chrome used so they introduced it as well about a year later Chrome moved off of jip and now node is the major contributor and maintainer of this really obnoxious binding between C++ and JavaScript and when ever I work in electron that's the thing that I hate the most and haunts me the most by far especially since my last major experience with electron was helping build the twitch Studio desktop streaming app for recording and creating live videos and streams on Twitch that meant that we were doing a lot of native interrupt between the Gip layer the C++ layer doing all the video encoding and  and the JavaScript layer that actually rendered the app and it was miserable it was really bad anyways not familiar with Native of fire or glue on and again let me know in the comments if I should be static sites this is an interesting category both because I don't like next being in here if you don't know this hot take I do not like next for static site exports to me next is a server not a build tool and the build tools and the things around it that enable it to be static are just necessary evils to make the server part possible the fact that it happens to allow for static export does nothing but make my life harder as I try to explain nextjs to people yes having a static export makes it easier for a company that still hosts their web app out of S3 slightly easier to host said web app out of S3 I just don't think that use case is one that a framework like next should be designed around because next is the server for react not the build tool for react and if you're not using next with a server you're not really using nextjs and I know a lot of devs who think they've had meaningful experience with next who are just using it as a build step to generate HTML files I don't love that so personally I would love to see next kill the static export but then something like nextra which relies on it heavily wouldn't make any sense at all so I understand both sides Astro however is a phenomenal solution for building static sites we used Astro for the create T3 app docs and at that time they didn't have much tooling built for that and we had to make a lot ourselves which wasn't the best time the results a really nice multi-page app where all the pages are statically generated and served on a CDN really happy with the result for the most part but we did have to go through some pain to get there thankfully Astros made a ton of progress with projects like Starlite to make it easier for people to spin things up like documentation that said stuff like docusaurus and nextra is still in a really good State I don't know anything about the static experience with n so I don't want to comment on it too far but I would assume it's similar to next where they have a static export option and as such I would assume I wouldn't like it that much State Management this one is really important because the top two here you might notice the logo is the same the reason for that is that PO Manders has fully taken over state in the react ecosystem poy Manders is a team of incredible I'm probably pronouncing it wrong po mandas I'll never get it right I'm sorry guys PO mandas is a crew led by Paul henel Paul's the creator of react 3 fiber the technology that lets you use react to render 3D components in the canvas using webgl and 3js he's one of the smartest people I've ever had the pleasure of talking to I've looked up to him since well before I even thought of doing YouTube because he showed me that react can go so much further than simple little web apps and part of how he proved that was building the tools he needed to do crazy things with react including zustand and eventually Jodi zustand is meant to be a minimal Redux alternative it's super minimal like 2 kilobytes for the bundle if I recall sorry I misspoke it is 1.18 kilobytes that's hilarious zustand is an incredible solution if you need a minimal State Management library to make Global State selective State and performance State possible in your react apps I even use Z stand to build things like games because it's so performant and it makes it really easy to pull your code and pull your logic out of react run it all externally and just subscribe to changes within your react code I love zustand I use it for things that both make sense and things that are absolutely chaotic if you want to see all the crazy things I do with zustand let me know in the comments Jodi is somehow both more flexible and way more minimal than zustand Jodi was originally created by Dai who also a member of the point managers crew and now also the maintainer of zustand since Paul works up for cell now and is focused on that Jodi doesn't really compete was usand I actually use both in a lot of projects at the same time because Jodi is really focused on Atomic and composable state so if we look at an example here we have a count atom we have a country atom cities atom and manga atom these are now things we can call in our code with the used atom rapper so now that this atom exists it's a value that is global anything that Imports this and calls it use atom is now sharing that state so if three different components use this atom they're now all sharing the state you can also create derived atoms by using the get function in an atom definition to grab the value from another atom and then do something to it this behind the scenes effectively creates a subscription to update this atom automatically when the other ones change this effectively creates a subscription behind the scenes where when this atom here changes this one will also change with it and as such in a different component I can call doubled count is use atom and now I have access to that since it's a derived atom it's only so you don't have a set value you have to set whatever it's derived from but this lets you make some really powerful chains things like here we have a sum atom that gets the value from these three other atoms and adds them together this is really cool stuff and when you combine this with a lot of the other composability you can make really cool things one of the things I did with Jodi was a shared local storage atom that atom would watch for browser events that trigger when your local storage changes from other tabs so I could have values synchronized between multiple tabs at once automatically just using the hook so cool I love J because it's so composable in the state of the ecosystem around it is dope it's so minimal you can throw it in alongside other State Management Solutions and not really have to worry about blowing up your bundle highly recommend Jodi it's been a great experience for me check it out if you haven't already X's another one of those solutions that I just haven't dug into too much we did explore it when we were building the more complex State machines for Ping but what I found was that making two isolated zustand State machines that had a good interop layer ended up being a better experience for us overall than trying to model all of the chaos of our system with an xtape that said I know they're working really hard on making xate simpler for the future and that's exciting as hell to hear p is really interesting because it's not react at all it's View and the growth of P has been really exciting to see because finally The View ecosystem has centralized on one state machine it almost feels like what we had back in the day with Redux where all react developers were using Redux some amount yeah we needed to evolve past that Vue kind of needed to go the other way to have a standard solution so the ecosystem could understand it and build around it and pinea is the official so to speak recommended State Management solution for view really cool to see their success I haven't dug into it too much beyond the The Meta around it but it's cool to see them finding success also see Nano here Nano stores is really cool I know Maple from our community is really into Nano store it's hilariously minimal and it works with a lot of different Frameworks too because of just how minimal it is it's a basic subscription binding layer it looks a lot like Jodi if I recall yeah you create an atom then you make functions with it and you can call those wherever you want to call them here's a react example admins Is Us store dollar sign admins they recommend this dollar sign Syntax for marking when something's in atom I think it's pretty cool you can do that in Jodi too if you want think of this as like a minimal multi framework Jodi alternative that's enough for State machines let's quickly talk about graphql and then wrap up uh interesting to see tanack query at the top here because I don't really think of tanack query as a graphql thing but I'm sure people do use it for that I was kind of hoping to see more graph specific stuff here conclusion let's recap some of the stories and dramas of 2023 the felt code based ditch typescript files while preserving type safety controversies around react either too old or too complicated fall of Rome and the rise of biome angular being rejuvenated bun V1 Astro 4 Styx release in Open Source by meta as well as a bunch of AI tools pend down the summary for the eth time one can't help but Wonder Could an AI overtake this task next year interesting curious about this foreshadowing if you enjoyed this Roundup share your appreciation and who knows might be back in a year for the 2024 Rising Stars thank you so much Michael the creator of best of JS who put all the work in to this project I love this it's so cool having a single place we can go back to in the future and reflect on what was popular at the time it is actually really fun going through older years and seeing how they compare to 2023 and if we could have possibly predicted the stuff that we saw succeed this year I think this is all I have to say here appreciate you a ton for making this Michael thank you for letting me react to it I hope youall love this as much as I did and man I'm excited to see what this looks like at the end of 2024 till next time good seeing you guys peace NS




## The Most Important Lesson From HTMX - 20240116
I talk a lot about how much I love HTML not specifically like an HTML file or the HTML syntax but the power of sending static markup from the server to the client there A lot of times where you might want to send updated UI to the user without having to make them refresh the whole page there's also a lot of things you probably want to do when a user clicks a button that can't be done on their computer so you're going to need the server to be involved in those things anyways what I've seen as a result is a lot of applications that send giant Json payloads to the user once they've done something on the client and then the JavaScript parses that data transforms that into some new markup and then renders it on the page often very slowly the JavaScript necessary to do all of this stuff gets massive to the size of tens of megabytes for some websites and the resulting performances what you would expect not great thankfully we're starting to see a revolution where we're moving away from these giant Json payloads and towards sending markup to the user when it makes sense but this isn't a new Revolution this is actually something that the HTM X team has been pushing hard for a while all the way back when they used to be called intercooler JS they tried to warn us but now we're finally hearing it what we're talking about here is a response to a great tweet from Z the CTO of Sentry which was joking about how we got tricked into using graphql while I do think graph Q has a lot of benefits there are negatives too and that's the joke here is a lot of people were using it when they shouldn't be but these continued abstractions where you were building more and more complex API Solutions so the client could get the info it needed this became a very fast slippery slope and graphql emphasized how slippery that slope had gotten the HTM X team replied with a link to a blog post from 2016 about this where they tried to warn us and for those who don't know intercooler was the old name for HTM X so let's take a look at this blog post because I love it and I think it's more relevant now than it's ever been before the API churn to security tradeoff tldr heavy clientside logic requires a trade-off between API churn or an increasingly complex security model the problem a recent article by Jean jaac de BR titled why I no longer use MVC Frameworks sparked a long and interesting discussion on Hacker News which crystallized a fundamental problem I see with the current Trend towards heavy client side logic and web apps here is the start from that article where Jean jaac lays out the problem the worst part of my job these days designing apis for front end developers the conversation inevitably goes as Dev so this screen has data elements XYZ could you please create an API with the response format XYZ me okay I don't even argue anymore projects end up with a gazillion apis tied to screens that change often which by Design requires changes in the API and before you know it you end up with lots of apis and for each API many form factors and platform variants to summarize if you are designing Network API endpoints for a front end you will end up tweaking and modifying the API to support your UI needs in an ad hoc and often chaotic manner by letting something that by its nature is constantly in flux and fiddly that is the UI determine the shape of your API you end up thrashing it around trying to keep up for the remainder of this article I will refer to this problem as API churn that's an important piece to remember API churn is the enemy that we're fighting with all of this so what's the solution the solution is if you're committed to that client side increase the expressiveness of the API available on the client side okay so what does that mean means you must begin surfacing more and more generalized data access and mutation functionality on the client side you see this General query languages like graphql replacing multiple rsh in ad hoc API endpoints with fewer more expressive endpoints is going to be thought of as a move towards something like SQL on the client side I don't like comparing it to SQL but I get what they're trying to say by increasing the expressive power of endpoints you the API designer no longer need to worry about getting an API just right rather the frontend developer has control over how and what is returned or what is modified and your API stays stable as the UI needs change sounds great but wait a second there's a problem with this solution problem these increasingly expressive endpoints is that you're also putting them not just in the hands of your front end de but also the hands of potentially hostile users the browser is about the least secure Computing environment I can imagine and anything that the front end devs can do can also be done by a hostile user like this graphql query if you don't make this really secure you're going to have users able to hit it and get info they probably shouldn't like salary this is terrifying and a lot of graphql stuff wasn't set up properly I have a video about how putting your logic in your database is terrifying and the reason a lot of people were stuck doing things like that is because they have these generic API layers that don't know enough about the intent of how it's being used to first off expose data correctly but more importantly to authenticate the user properly to make sure they should or shouldn't have access to that data it's utter chaos and I've seen so many code bases drowning in this particular style of mess and oops you had better darn well not show that information so now you have to build context sensitive field level security so on every query on every field in every query you have to work really hard to make sure your fields are properly secured so now every single key being returned by your API ever has to have its own security model around it you can see how chaotic and hard to maintain that gets really fast as I just said this is incredibly complicated and when this security issue was brought up on Hacker News the response was it doesn't belong in the spec it belongs in the implementation but yes the reference implementation graph qjs should probably be updated to demonstrate Access Control at the time the go2 example for graphql and web apps was graph qjs and they didn't have data Access Control implemented in it so people just copy the default implementation didn't have any security which is terrifying I literally laughed out loud when I read this this is a major major issue and anyone who considers increasing client side expressiveness as the answer to API churn needs to have a very good answer for it I totally agree this isn't just a security problem there's also so many technical challenges in implementing things in this way where it's just hard to build and maintain a generic way to get data to the client security is one part design of the schema is one part implementation details libraries you're choosing all of this stuff gets really complex really fast but what if there was a better way this again is about trust the core problem again is that in putting more expressive tools in the hands of your client side devs you are also inadvertently letting them slip into the hands of adversarial users there is a fundamental tension therefore between how much you can give your developers and how much of a security headache this power will turn out to be in an Ideal World you will give your UI developers everything they could possibly need in an open and expressive query layer and that would let them tune the structure and return the data of a query just so for those hot complicated quer I that always end up dominating system performance what if I told you there was a place that exists where you can do this such a place does exist it's called the server side see where we're going guys don't know if you expected this but I just tricked yell into watching yet another server components video because this article could be summarized as the arguments for Server components and or how server components replace graphql they solve this problem really really well you see on the server side code is trusted you can give your developers a completely open and flexible data access and and update API because you to a first order approximation trust them give them the power of say a structured query language and that's totally fine it's not even controversial when you do that because that power isn't going to the user it's just in the layer between the HTML the user sees and the server that has that data when you give your frontend devs the ability to generate their front ends on the server a lot of these problems go away really fast and it's funny that I'm bringing this up because a lot of the reason people are so hesitant with the new server component model and the new nextjs model is they think it's less secure and they don't trust frontend devs to do it right the harsh reality is these backend devs have gotten so good at these security models because they're a necessary evil in order to use something like graphql while yes front and devs need to think a little bit about security Now the benefit that comes with it is they don't have to think about security anywhere near as much and we're not building these crazy chaotic systems so that you can add one additional key to your query on the client side the solution to the problem with the solution so if you want to avoid this API churn and security complexity trade-off is's a great way to do it move things back to the server side one way to do it without sacrificing modern web usability is to use something like intercooler into do your HTML rendering and domain Logic on the server in a trusted environment you'll also get a lot of other benefits from this approach hate without tears a programming model that you likely already have close to a decade of experience with and so on this is an old article and my audience probably doesn't have a decade of experience with things that were already old at the time seven years ago but that point aside let me know if you want me to do a hate OS video because it's a pretty cool pattern where do they actually say what it stands for always forget the acronym stands for hyper media as the engine of application state so your HTML is actually the thing that defines the state of the page it's a really cool pattern it's really nice seeing this being rediscovered with a new error of HTM X if you want a long video about that let me know in the comments this video isn't about that this video is about the value of replacing your apis with end points that serve HTML the core point of this article is that in order to make Dynamic front ends without having the server run the HTML you now have to deal with with a massive security issue architecture issue and utter chaos in order to increase the expressiveness so client side developers can do the things they need to do to make good applications this is what's so cool about this model and this is why I think both HTM X and server components are the future of how we build full stack applications these security models already feel so Antiquated and the moment you start playing with either HDMX or server components you're going to realize just how much more complex things were than they needed to be yes there are more things you need to know about well those things are simpler and the result is better software so what do you think are we being too aggressive with the killing of apis or should we be doing more work on the server than we are today I'm obviously in favor of moving more of the stuff to the server it makes everything easier and it makes frontend developers more capable of delivering great software but how do you feel about it let me know in the comments and tell me if I should do that ha to OAS video because something I want to talk a bit more about if you want to learn the truth about HTM X I'll pin a video in the corner with that and if You' already seen that or you're not interested the video below should be pretty good too thank you guys as always appreciate you all a ton peace nerds




## The Neuralink _Lossless_ Compression Wars - 20240603
this converts back losslessly not only does it convert back losslessly it also has the noise removed oh boy this is going to be a fun one isn't it if you're curious about what's going on here there was a challenge posted by neurolink a few days ago neurolink is the company that Elon Musk is working on for attaching a sensor to your brain to get data out to do things with it it's currently been put in one person who doesn't have the ability to move their body due to an accident they're fully paralyzed minus a little bit of movement in their head and through the neuralink implant they've been able to move a mouse cursor play chess play a I recall they were playing a lot of sidm civilization and they are hyped as can be to have control of things again that isn't just them using their voice and I don't want to talk any on this technology because it is revolutionary it is honestly kind of cool that Elon is putting a ton of his money into something that for the foreseeable future is only ever going to benefit people who have physical disabilities because there's nothing worse than not being able to use parts of your body I had an accident before where I was not able to walk for a while and it is traumatic in ways that I can't really put words to and the fact that neuralink is putting so much effort engineering cost Financial like support and all of these things in to make it so people who have the inability to use parts of their body to have other things to control instead is awesome and I want to give that massive props because I honestly don't think nurlink is going to go much further the people who are going to be interested in this are people who can't use their arms but if you can't aome this is happening this is all coming up because neuralink posted a challenge they need ways to get the data out of that chip and two other things really efficiently in terms of the amount of bandwidth but also really power efficiently because they don't have very much power when they just put something in your head so how can they get this data out effectively they clearly don't know and have put out a public challenge neuralink compression challenge here is 1 hour of raw electrode recordings from a neuralink implant the neurolink is implanted in the motor cortex of a non-human primate and the recordings were made while playing a video game like this compression is essential And1 impl generate around 200 megabits per second second of electrod data which is4 electrodes at 20 khz 10 by resolution this is important remember the resolution here and it can transmit wirelessly so we want to compress this around 200x and it has to be able to be run in real time and at low power that is a big challenge they aren't pretending it's not so I say 10 B 10 bit sorry the 10 bit resolution is important 10bit resolution is a key piece here that we'll be coming up as we go along here's a spectrogram showing the signals and what is included in it nuring started a compression challenge they're asking for people to find methods to losslessly compress files to 1200th the size but the files are extremely noisy so that's certainly not possible yeah there's a lot of noise going on in these files the issue here is the word lossless is the word lossless even included in this proposal okay this is kind of silly that they expect you to run their check to make sure the compression is lossless okay this is good info and this is where things are going to start getting silly because the word lossless is a questionable choice of words in a lot of these places and the reason people are outraged here is the use of the word losslessly and also has the noise removed before we can go any further we're going to have to do a little bit of explanation around conversion compression and what the word lossless actually means signals in this case will say Sonic signal so like sound comes in waves here's a really nice crude wave of sound waves are analog they go up and down at various rates but they're not fixed they're not perfect they're not exact they are influx the same way that like if I took a picture of my door it might look very close to my door but there are things that you can see in reality that the camera can't capture be it certain colors be it certain things that are too small you can't just represent the physical world digitally perfectly that's not reality as such we need a way to represent this the way that most waves are represented digitally is by keeping track of the point the wave is at at various locations so if we want to represent this particular wave we can make a bunch of effectively rectangles that say at this point it was this high at this point it was this High and the data that you're collecting here isn't the trajectory of the wave it's at this second it was however high this is like if we say that the bottom here is zero and we'll say the top here is much louder this is just onedimensional by the way once you add multi-dimension this gets way crazier we'll say this is like 100 DB then as we go through over time we say okay we start at zero DB then at this interval we're at 5 DB then we're at 50 DB then we're at 75 then we're at 100 then we go back down the way this changes over time is represented by taking Snippets effectively taking segments over time to represent the individual moments in time there is no such thing as true lossless going from an analog signal to a digital one so when I do something like Snap My Fingers that's not ones and zeros in reality it gets represented as ones and zeros once it goes through my mic as a wave as a signal and then gets to my amplifier my interface that takes that signal boosts it filters it makes changes to it but those changes are all happening digitally at that point so once it has the signal it has the up and downs of the waves that I'm spitting into my microphone then it turns that into ones and zeros it turns that into Data that it can then do things with the conversion from analog to digital is inherently lossy if you have a vinyl which is an analog medium because you're actually cutting the grooves of the sound wave into it rather than saving it as a file that's ones and zeros because of that a vinyl can be a lossless recording and representation because it takes those waves and it perfectly encapsulates them in a disc a physical thing that isn't ones and zeros there is no way to losslessly encode a vinyl if it was recorded in an analog fashion this means that if people are taking digital recordings that they record on a computer and pressing them on vinyl they're stupid and silly it also means if they're saying that their encoding of their vinyl is lossless when they put it through their magic digital thing they're also silly but they're both being silly because going from analog to digital is always lossy some amount that's why we can upscale old film from like the first three Star Wars movies 4 through six but we can't upscale the digital ones anywhere near as well because 1 through three were recorded as ones and zeros not as light going through a piece of film so as great as the digital world is it is inherently a lossy move to go from analog to digital these details get important as we go along another important thing to know as we're representing these things digitally is the idea of sample rate so right now we're sampling let's say we'll call from here to here just to make it simple uh we'll say from here to here is 0 seconds to 1 second obviously your sample will be much bigger than this in reality but we'll pretend that this first section is 0 second and this one's 1 second our sample rate is four samples per second because we have one two 3 four samples occurring within the second usually you want significantly more than this like hilariously more than this but just as a sample we have a sample rate here of 4 per second let's say we want this file to be smaller right now we we have these different numbers all representing things here EAS way to make the smaller just delete two of them it's no longer going to be as accurate a curve but hey at the very least we have cut the data down a bunch but if you want to then upscale this back to the way it was before that's where things start to get a little rougher because as great as this can be and this is how things like MP3s work by the way if you're curious is where changing how often we sample things we also might cut down the range like right now we can go up to 100 what if we just low this and what if we raise this what if instead of 100 to Z we said like 75 DB to 15 DB and now anything that's below this just gets cut off so we delete that now this can be way smaller this can be way smaller and this can be way smaller too where the Top's just chopped off there now we have way less data to encode every sample can be represented with a smaller amount of data it's way better compressed however we've lost all of the data that existed Below in this case 15 DB and above 75b this makes sense in certain places but not necessarily in others if we look at something like uh the frequency response charts these charts are interesting because they're in the range of the lowest to the highest sounds so 20 HZ is the lowest sound humans can hear 20,000 Hertz is the highest sound humans can theoretically hear most humans tap out much earlier in the like 14ish thousand range and depending on how much hearing damage you have might be way earlier but this range is what we can hear which means if you have things in your music files that are below 20 htz or above 20,000 Hertz your dog might be able to hear it but you can't so we can just safely lob those off now we have way less data we have to encode if we want to go even further well most speakers can't play below 100 and most people don't even want to hear over 10,000 so we can shrink the range even further now we have a much smaller set maybe 100 Herz to 88 Herz that is way easier to encode all of these hacks are how we ended up getting things like mp3s and audio streaming to work by reducing how much of the data we actually bothered to encode in the first place that's awesome it means that you're going to get worse audio quality so if you have like a really nice subwoofer you're not going to be able to hear a lot of the things that the subwoofer would play and if you have like old audio balances like old Soulja Boy tracks when you before you knew how any of this stuff worked a lot of those were exported as a really low bit rate MP3 so they sound awful on a nice system because you don't get these low sounds that your subwoofer might need why am I talking about subwoofers and all this stuff well I'm an audio engineer I'm going to take any opportunity I can but we're not here to talk about audio in the traditional sense we're here to talk about audio as a signal what if this wave wasn't actually being used to represent sound let's go back here for a second because while the inputs here are absolutely analog sound waves that they are recording they don't want to play it back their goal is to find some data that that was encoded here it's actually kind of the opposite of what we were talking about before where I was showing that if you have an analog signal making it digital is never going to be perfect but what if we have a digital signal and we want to make it analog sounds crazy I know but you're also watching my video right now which is almost certainly coming through in that way most of the internet especially in the United States is coming through copper pipes that are analog pipes that are used to convert analog signals and waves that are sometimes so high or so low pitch we can't hear them or see them through these things as an analog format so that then when they get to the other side we can convert it digitally or if you're on Wi-Fi Wi-Fi is a wave that we can't see going from your router to your device and that is an analog real world real physical world wave that we then have to convert into a digital signal when we get it but it's a digital signal from the start so if we represent it like we have let's say 1 0 1 0 here's some binary so we'll say one is up and then zero is down so we stay down for a bit one zero cool so here's a rough representation of what this might look like as an analog wave and now your device has to receive this and it goes through a thing called a digital analog converter that then re-encodes that back as this value the important thing to note here is that despite there being this analog thing in the middle what we wanted is the one0 0 one 0 that we put in initially this is where things start to get fun because it doesn't matter how well we can compress this if somebody was to say compress this make this smaller there is so much data here look at how like this slightly curves maybe we have the like floor for zero is here and the floor for one is here why do we capture that data why do we capture the slopes why do we capture what's under here why is there all the stuff going on down there that we don't care about all we care about is the one the zero the zero the one the zero when you're measuring lossless you don't want to measure the lossless part of the signal you want to measure lossless relative to the thing you actually want which is the digital representation of the input this is where things start to get really fun because with the neuralink case they have specific bit depth specific information specific stuff going on with the chip that they want to get out of the chip into another thing somewhere else the protocol here is not what matters what matters is that the data going in can be as minimal as possible so you can encode it as simply as possible and then get it out on the other side this is a whole field called signal processing how do we encode signals how do we encode your data into signals how do we transfer it how do we get it in and out fast this is how Wi-Fi works this is how the internet works this is how everything that isn't a fiber optic digital cable works and even then the fiber works by flashing lights on and off really fast with a analog so to speak signal this is what I really want to drive home before we go further because we need to understand the basics of this before we go back here to the not only does it convert back losslessly it also has the noise removed this is a dumb tweet I even called them out accordingly how do you feel about your use of the word lossless in the original tweet I should have clarified myself more but then I wouldn't have gotten to have so much fun run into the ground though it's good entertainment thank you Mo rock for the blessing to make this video it's going to be really fun but when you're measuring lossless you need to determine what you're trying to encode because if I want to measure lossless based on this signal that's going to be measured very differently for measuring lossless based on this guy a little controversial but might be biased from my audio background generally speaking when I hear the word lossless is being used to describe something in the music world so if something was recorded digitally they was recorded in a professional studio used to make music and they have a recording that's a certain quality level and then they put it on Spotify Spotify is going to compress the out of that so if you want the highest quality possible audio based on the way it was recorded you're looking for a lossless audio format the most popular one is Flack wave can be lossless as well depending on how you encode and record in the first place there's a lot of Standards now for lossless audio encoding which means that the thing that existed in the studio the digital file there is as close as possible to what you ended up getting when you listened to the music some people can hear it some people can't it doesn't matter though because if you look at it in a spectrogram you actually look at the way the audio is being decoded you'll see with an MP3 that you have a smaller range with less sound if you listen to it with flak or decoded a flak that was encoded properly you'll see a way wider range of sound being captured that said if the original recording was a crappy MP3 no amount of flak magic is going to make it better you can have a lossless encoding that is an MP3 as long as the original thing you're re-encoding was less lossy than what you're doing there lossless is defined as much by the input as the output and that's where I think the problem breaks down here here's a analogy if I had a really crappy quality MP3 and I recorded that with my fancy microphone my fancy gear all of that as a flack I still have a crappy signal coming out of my speaker though so I have a really lowquality speaker playing a really low quality audio file maybe 20 kilobytes per second the speaker plays that audio out to my mic and I record that losslessly in a much bigger let's say like 20,000 KOB per second file what's a better representation of the original is it my Costless recording or is it the original file we played through the speaker because if your goal is to represent the highest quality version of the original audio it's going to be that crappy MP3 but if you want as much data as possible you want to capture not what that specific MP3 was but the experience of listening to it through your speaker doing it with the recording with the microphone makes more sense but where lossless is defined by where you start and stop counting the inputs and outputs I think that's where things really fell apart here because everyone who read that tweet everyone who had an opinion and even neurolink themselves seem to have their own different definition of lossless in terms of how we're processing signals here to go back to the tweet I had here the use of the word lossless and neurolink compression challenge is silly because there is so much noise in their data there is just so much going on here that isn't necessary if they're just trying to capture that 10bit signal so what if we just don't capture all that what if we ignore that in our encoding instead yeah for a comparison for those who aren't familiar with spectrograms here you could see actual useful spikes where things happen you can see where someone's talking and where they aren't based on the signal that we have here this one's just straight noise it's much harder to see the signals so ideally we could find a way to get the signal data out usually by amplifying or tuning the frequencies here to get the data we want and then we do the encoding after I want to check the eval quick I mark said that this is literally just like a a diff but I want to confirm yeah this is silly they're just checking the diff and if there is any difference between the files after they shout which is again silly because as we saw there the wave file they give you as the example doesn't have much data it's utter nonsense let's just take a look at it I'm so curious yeah it's all wave files which again is a sound file so all of these files have these signals have these as they describe 10bit resolution signals but they're encoding them as a wave audio file full of noise and signals that are entirely useless okay Nate in chat's making some good points if they don't have a predefined signal because it's brain waves then if the input is known that what I'm saying makes sense but if you don't know it then because your brain is instructed about what it transmits then it's nice to have all of the signal yeah but most of the signal is literal garbage and probably is useless I where's the original signal that he showed here pre-normalization cuz like in any signal the thing that matters isn't the level at a given time it's the difference between levels the difference between levels is where things start to fall apart like if I measure every single point along this line I'm if I measure how far one line is from another that is both more useful in terms of the signal but it's also much easier to compress cuz it's smaller numbers throughout the entirety of your encoding it makes life significantly easier but if you don't actually know like if theoretically it turns out we're wrong and what matters is actually the difference between here and here and not difference between here and here yeah and since it's brain data we don't theoretically actually know where in this spectrum where in this range where in this signal the actual useful signal is sure but almost always the useful signal is the G gaps between things not the actual Civic values within the given thing but technically the origin isn't digital because it's a brain waves but what we have here isn't the brain waves it's what the chip gets from the brain waves this isn't a recording of the exact waves from the brain this is the chip getting the brain waves and then putting them in a file so it already is a lossy representation if most of the signal is things moving constantly back and forth in this range here here like if this is the area that your signal is in most of the time and you're capturing every tiny bit here that just sucks and it's impossible to compress that it's lossy in the sense that relative to this wave we are missing some of the data but it's lossless in the sense that if we're actually tracking the ranges as they're entered and left we have the exact binary so to speak ones and zeros bit data from this instead I want to read his thread though because that seems to have a couple entertaining bangers in here okay now that I've Stitch the files back together in context can I remove the noise or are you guys going to get mad again doesn't matter I'm doing it Anyways full scale fun so if you're not familiar with what he's doing here it's called normalizing he's also doing this I'm almost certain yeah he's doing this in one of my favorite programs audacity audacity is an audio editor which you use for fixing stitching changing and around with audio stuff really nice program I use it for my audio and my videos for a long time it's free open source and dope normalizing is when you take some audio that that has a wider range of levels and get them a little closer together usually you're pushing them up so if I'm talking in my audio levels at-10 DB but I want it closer to like neg5 I can normalize at a different true Peak and it will bump everything up so the loudest points cap there and everything else gets bumped up accordingly to balance it out oh this is Reaper damn my bad I did not know Reaper looked like this nowadays God yeah these signals are awful okay so we know that there's already a 1 khz filter on the data because we saw on the analyzer earlier so first let's try a better one having a bit of a brain far I just wanted to try an fft Peak filter I have set the middle frequency to 1 khz in the low frequency at the longest brain wave frequency which is 0.5 Herz I doubt the ADC even goes down that far but let's find out actually that does reveal the signal quite a bit it kind of sounds like an ultrasound machine you just have to take my word for it straight LPF gives you the complete waveform but it's low frequency information and I don't have headphones at the moment to actually listen to it however it does make the noise inaudible so I was right It ultimately doesn't need to be there interesting whether or not it needs to be there in the first place I can't definitively answer as I don't know exactly what filter the system uses to process the information here we're getting a little into like crazy way of thinking things like the idea that you can tell which signals are useful by being able to hear them is a little funny but at the same time if the point he made here which is that uh the input already has a 1 khz filter on the data they're already filtering the data too so the chip generating this data on the brain is already arbitrarily filtering at a floor in a ceiling ideally we would have an idea of which data is isn't valuable before we get into this war but here we are let's take advantage of it armed with this information we can design a lossless reconstruction algorithm which takes distorted data and restores it in relation to the original signal before capture this is the key this is the thing I really wanted to drive home is that our goal is to be as close as possible to the thing that went in not the thing being transferred if the goals have the best data relative to what we input we shouldn't be comparing the wave file generated by the chip we should determine what the input was or what represents it and then see how we can get something as close as possible to that later I'd make the argument that the word lossless is effectively meaningless here because we already have loss as described above with that filter so the input signals already lossy now we're determining how much loss we're okay with and what loss does and doesn't matter I vaguely remember the max amplitude of the files being -25 DB Peak originally so we'll gain plus 20 to 5 DB so this is bumping up The Debs cuz it's such a quiet signal that it's harder to encode but if you bump it up much easier to deal with and also you can see it and hear it and you can actually get something out of this file now cool currently I am testing an Adaptive spectral noise remover with a buffer of 5 Seconds to see if the SNR can be improved digitally signals improve but there's a few harmonic Peaks showing up very interesting now that's what I remember EEG wave sounding like you can clearly hear the signals and not the noise beautiful zooming in gives us a nice centered waveform with data clearly on both sides of the zero Crossing points which is what you want yeah part of the data all being useful is that we have a zero we have an off so that we can show what on is relative to that and this data actually looks useful now at this point the signal should be fairly usable the applied signal processing in order is we sequence the files into linear timeline we normalize to the peak sample then we spectral denoise the sample that we have to get rid of these little tiny static bits of moving around unnecessarily so it's way easier to encode you probably process it further but it is a data signal and it doesn't matter as much again important it is a data signal we're not trying to perfectly represent the waves we're trying to get as much data as possible which is represented by ones and zeros in the end since we have the complete corrected waveform we can now apply bit rate reduction and compression to lower the file size just going to start with eight bits because there's only six there anyways well so this is with a FL so it's it's a flack it's lossless right clearly lossless Flack that's how it works right way too much compress with the setting the HF data is just busting out of the Peaks think I might want to switch the processing order around compressing after noise reduction seems to create a high amount of artifacting likely and true here's a 58% effective compression rate compared to the original 63 Megs now retesting with the noise reduction while it's running I would like to float the idea of perhaps stitching the files together before you apply your compression algorithm it might give you a wider range of data pack per bite they are sequential in both time and file name so it should be an easy script I don't love this idea because the point is that it runs real time so this is kind of again defying the expectations that are presented in the challenge here because the whole point is that as the Signal's captured it can compress and send it not that when you have hours of data that you can compress it all at once doing NR after compression works a lot better oh look at that signal you can actually clearly see things going up and down and not a bunch of noise in the way isn't that nice file two is the wave output from the normalized and rendered Stitch file so here's the compressed here's the original tried to line them up didn't get it just right looks pretty good though rendering the file again gives us 24.1 Megs cool Shadow Hills mastering compressor you're compressing brain waves I love that audio compressors don't actually improve these kinds of signals good thank you for pointing that out now for the benefits of the compsite people this is not lossless compression this is lossless signal restoration the goal here again is to get the signal that was put in initially not to perfectly represent the exact data file here this clearly defies the admittedly stupid requirements that neuralink put out here using the word lossless here is stupid because the signal is not something you can meaningfully compress losslessly like this is this is like the pi Piper algorithms what they're looking for here some magic folding of to fix all of our problems that's not reality and I think moderate rock is much less a CS person and much more a like a hacker in the hardware space the electrical engineering space like if you told an electrical engineer to lessly compress the signal of some random chip on the board putting out random did we like do you mean what we put in or do you mean the actual like signal that it's generating because one of those makes sense and one of them is stupid anyways but now you should be able to see what kind of compression ratios you can get with signal dependent compression I was able to get the file from 63 Megs to 24 megabytes but not without converting to 8 bit having the bit rate and truncating extra noise false information should help anyone looking to do the task for real enjoy I don't think you're going to hit the target there's too much noise and I still feel like more stal conditioning is warranted especially between Clips the data path still needs Improvement especially if they're trying to capture low frequency data at low power I don't know exactly what ADC they are using but they are most likely limited to one VT for power I hope if it's more than one volt on your brain I'm scared picking a random one that sort of matches the data spec we get is here's the like a random chip people put on brain supposedly and here are the signals cool they show these numbers this is beyond my pay grade as a hardware engineer I would like to point out to the software people that for my POV a 10 to 20 khz file is already extremely lossy relative to the input signal so I would want to ensure that this initial signal path is as clean as possible again I've pushing this this is where my like software Dev side and my audio engineering side get angry at each other because lossless is a silly word that's incorrectly used on both sides and now we're all going to go insane because we think lossless is the exact thing being represented digitally he thinks the thing we're starting with already lossy so why the do we care a more convenient and compact solution to a discret DAC again digital to analog converter is to use a codec like this one but it would depend on the space requirements an oem like neuralink though would have significantly more options because you can order custom chips to your exact specs oh wait we were arguing whether or not there was hidden data in the noise floor there isn't any room in the data to hide signals in the noise floor the noise is just noise however there are phase correlations between the noise and the signal due to the even frequency distribution so combined with the poor signal to noise ratio and the low input volumes you don't want to remove too much of it or you'll affect the frequencies in the signal itself another good point the noise the random like jumps up and down all over the place in like small ranges those are so frequent in this data that if you get rid of all of them it will affect the actual spikes that you care about so if you go too crazy with it you're screwed couple more opinions I want to bring in here I think they're valuable this Banger I have a master's degree I usually break up weed on it we see you King this was great too never seen so many midwit dunk on a guy who's obviously correct making him the main character but actually embarrassing themselves let take a look at these okay I get where you're coming from it's mostly High bit rate signals too maybe in the end we lack context of how scientifically proven good brain signals actually look since what if these noises actually have some important impulse data I can't say for sure if the signals captured are accurate it because they are so distorted they are pretty much unusable but I can say that everything from 1 khz and up is below the entire dynamic range of the ADC so the high frequency information is irrelevant the actual signal is pwm yeah pulse withth modulation if you're curious but the fact there's all this data above when the actual chip can only capture up to that point means you can and should just trim all that off have you shown the idea to the neuralink team perhaps they'll be able to give the final verdict on whether or not what you removed is important or not I don't actually care what they think since they weren't Forward Thinking enough to not put a 6-bit signal from a 10- bit ADC into a 16bit container and then ask for software solutions to fix their bad Hardware design for what it's worth this is the Tweet where I came around it's like okay this guy absolutely knows what he's talking about let's see you put 16 pounds of crap in a 4 pound bag brother they are trying to compress what's likely to be brain signals how do you not know or how do you know which signals are important parts of functional body impulses and what aren't I you're trying to do in compression with noise removal is appreciated sometimes but not with this one I think because adcs have a functional sampling limit again the input the thing going into the ADC has caps on both sides I okay I have a sinking feeling that Shan here is a software Dev Twitter Shan dr101 even better even better certainly a software Dev I think we can safely confirm not only is he a software Dev but he has great opinions about software and clearly knows exactly what he is talking about yeah yeah those are the types of people who are fighting with this guy I've been an audio engineer and Hardware designer for the last 15 years so my Approach is always to optimize signal before you capture it so you have the least amount of postprocessing to do this work comes with a lot of St staring at different waveforms to find noise I have done this enough even just for content that I very much sympathize and I can also re sympathize with him being annoyed and meing the out of people who just don't get it that think lossless is data in data out not recognizing the reality of signals they should not have used the word lossless anyone using the word lossless here just doesn't get it but that's neurolink being stupid and that that guy being nuts too but uh yeah there's a lot of good memes about this I'll be real like the code is faster if you put the the comment signal in front of every line which greatly improves compilation performance hopefully you guys understand why that's stupid but also raises the point that like software devs don't get this and when they compare it to soft things it look silly all these people pushing cubes this guy found a much faster way by shaving things off yeah if the goal is to get whatever's inside the box across this makes a lot of sense but if the goal is to get the cube across doesn't make sense very funny meme because it shows both the correct and incorrect case here look at my compression algorithm the image on the left uses a ton of data but the image on the right only uses three bytes not only is the compression lossless I removed all the noise as well funny and look at their reply too by the way yes 200x compression lossless is ridiculous yes the data is 80% noise yes he probably did remove only the noise and proper data however I am incapable of admitting that I am wrong so I will say that this is still not loss's compression but lossy however lossing compression in the way op did with lossless on the bits that actually matter makes much more sense for the challenge and the people who wrote The Challenge are probably just as dumb as me that's a phenomenal summary of what happened here and I appreciate you for that one the noise is not the data a you're sweet the not the data hello Human Resources this is another person who did the challenge and got a lot of positivity for it even though they again are compressing and they are making things lossless because they trunky to four bits to cut off the noise and if you subsample from 20 khz to 400 Herz you end up with way less stuff and now you can compress the signal to 200x in 10 milliseconds chunks the alternative is to run some kind of triggering system in the loop and transmit bits for spikes four bit sampling 16 levels preserves the signal so the things that actually matter which are the spikes almost no difference looking at FT truncation across the whole sample which is 100k data points 700 frequencies are heaps yeah the vast majority of things in here are useless all the garbage in the middle is noise what we care about is the stuff here and the stuff here so yeah throwing all that out makes things significantly easier cool but when this guy said it everybody was cool with it and I I will end this one with a a good summary reply that explains why everybody was mad why this all happened from a specific Legend who I dearly love math geek math geek will never qualify themselves so I will for them math geek is krill on YouTube and he is one of my favorite channels on YouTube because every year during the Avent of code era he does Avent of code which if somehow you don't know and you're here is a code challenge where you get a programming problem every day from the 1st to 25th of December and he competes every year the reason this matters is because he does AV of code in Excel I not joking he completes these complex programming challenges via Excel it is nuts there's nothing else I've ever seen quite like this in the programming World these problems suck and to abuse a piece of software like Excel to take these arbitrary absurd inputs in and get actual working like input or like values out of it is a work of art and not only does he do this he actually gets leaderboard spots relatively regularly like he has hit the top 1,000 far more often than I would ever like to admit here he was a top 500 in the world on day seven doing it in Excel Ki was top 500 for the first half too which is even more cracked like 126 on the first day he was in the first 200 people in the world who solved the problem and no he's not using Visual Basic or any of the like code features in Excel he's just using formulas and transforms to get these answers in hilariously short amounts of time it is a work of art he is surreal and is one of those people people that just knows numbers in math and spreadsheet type better than anyone else and you should definitely give him a sub if you are interested in that the very least to watch during the Aven of code era K's a legend I have massive respect for them math geek7 on Twitter perfectly summarized the issue here the data has a bunch of noise so 200x compression isn't possible he's all right he's not trying to pretend this is something it isn't the reason people are upset is the use of the word lossless specifically the phrase of not only is it lless I also removed the noise that phrasing is what people have issues with that phrasing is what I brought up here how do you feel about your use of the word lossless in the original tweet he said he should have clarified but it wouldn't have gotten to be so much fun otherwise run it into the ground though is good entertainment I hope this is entertaining for you guys as well because I certainly had a lot of fun covering this one finally getting to use my audio degree for something and uh yeah nerding out about signals processing in lossless know if you learn anything in the comments I think this was a show but at least it was a fun one until next time peace nerds




## The New JS Features Coming Soon (I'm so hyped) - 20240423
every 2 months the tc39 meets to discuss what changes will be coming to JavaScript they have a long process where things Advance through stages until eventually browsers are expected to implement them there's a lot of things in Flight right now like a lot of them we talked about a handful of these things already from signals to pipes to pattern matching but there's more here there's a lot more here there's arguably more inflight stuff than there's ever been a lot of the things I'm excited about just advanced in the most recent meeting which happened at the beginning of April and I want to talk about those as well as the ones that didn't come up because I just want to show you guys what the future of JS might look like so uh let's dive in as I mentioned before first we're going to be looking at the things that happened at the 101st tc39 meeting and then we'll look at the things that didn't come through this meeting because again there's some really cool stuff that wasn't mentioned here the first change and I still can't believe this wasn't part of JS before error. iserror is finally at stage one we will finally have a symbol to detect when an error is actually an error instance of error is unreliable because it provides false negatives with cross realm things like with an iframe or the VM modules in node so having a proper error. is error it's actually a nice win and I'm excited to see that if and when it ships signals as I mentioned before in my previous video are something a lot of people are hyped about and they made it all the way to stage one so this is no longer just an idea this is now a real proposal that has a good chance of making its way in in the near future this one's interesting because using hasn't actually shipped yet while we do have it in typescript we don't injs yet in fact the proposal for it is currently sitting at stage three but they're learning a lot with the said proposal because there's a lot of things that have to be gotten right here for this to be a good experience so you say here status is stage three the goal of using is to have a composable pattern for actually linking things to external resources be it memory and IO this pattern generally includes the allocation of a resource and the ability to explicitly release critical resources so this example uses EAS script generator functions and async Generator functions and exposes the pattern through the return method so this is pretty classic code so we have const try or const handles acquire this critical resource we try something and then finally we clean it up we have an object we use the object in this Tri Loop and then and finally we call this thing for blocking so you have a resource that you want to use in code and then you want to clean it up when it's done running that code you have to handle that yourself right now which is annoying so it's really cool to see a pattern that just handles this for us we see here with async generator functions we acquire stream we do some stuff and then we close the stream at the end here what if all of that could be done in the Handler directly so here instead of the con definition it's using handle equals require file handle this using keyword allows for this to define the different states of things so now when we call this thing in the block scope declaration and we use it and then we leave the scope whatever cleanup this has bound will be handled and things are blocked as expected this is like one of those obvious wins that might feel weird to have this new syntax for us as JS devs but on the library side this is Magic this is so powerful for a library author to be able to Define cleanup behaviors and then when you consume the resource it all gets handled for you really cool stuff they cite all their motivations for it including different things that exist within ecmascript stream readers node file handlers and so many other things they even site prior art including um C if I recall was in here yeah where C has similar stuff Java has similar stuff and even Pyon with the width statement has similar stuff pretty cool I'd say Python's width is the the thing that makes the most sense as a comparison to me where you say something is with and then you have all of these enter and exit functions that you can Define the implementation for actually using this stuff on like the library side is very interesting we have dispose as well as a separate async dispose which are symbols that you can bind to a given interface that will allow you to use that interface and have these things run once the interface has been consumed so if you have a block scope where you're using something and then the scope finishes whichever of these you've bound will then run afterwards if we look at an example here we have suppressed error extends error as construction name error suppressed all those things so you can define a custom dispose or async dispose by just grabbing the Prototype and binding the async function there this code does not look the prettiest and I'm sure people will invent lots of cool syntax to make it a little less annoying here's the Alias for it so if you define a class you just Define a dispose function in it and now you're done isn't that nice it's actually pretty cool yeah the symbol dispose suppose of the resource within the object yeah pretty easy to set this up excited to see more demos using it I'm hyped to see where this goes the proposal was not about that though the proposal was about the strict enforcement of using which means that you would allow for certain resources to require you to use using instead of it being an option because if I defined a class that expects this disposing Behavior to work a certain way and somebody calls it with const instead of calling it with using and now none of the disposal stuff runs that's a really bad developer experience and possibly a breaking user experience so the idea of enforcing the use of using on things that have the disposal stuff attached it's a pretty cool proposal and it's nice to see it go from stage 0o to one so we can actually have using in a way where it doesn't give us more options instead gives us a clear path to doing the stuff right cool we're only through stage one here and we are not even getting to the fun stuff a lot of the fun stuff isn't included here so we'll blast through these and then we'll take a look at the things that weren't talked about although set methods spoiler very cool stuff so let's get up all the stage two stuff yes there's a stage 2.7 now which uh yeah it means that it's been approved in principle tests have been written the next steps to get community approval that the tests are adequate at which point it'll be ready for implementation which is stage three so they they have these mini stages between two and three where they're iterating on it and getting it closer and closer but stage three is when they start pushing hey browsers you should go actually start adding this so the use for sum precise summing a list is a very common operation it's one of the few remaining use cases for array. prototype. ruce are we in the post reduce era is that what this is saying do y'all still use reduce drop a one in chat if you still use reduce drop a two in chat if you can't remember the last time you use a reducer one's if you use it still two is if you can't remember the last time you did I'll be honest the only reason I can say one is advent of code I find myself in the two world nowadays seeing a lot of sometimes and rarely that honestly sounds about right to me y'all get the idea I'm surprised they're calling that out in an official proposal I never would have guessed I would read a tc39 thing that says that summing is one of the few remaining things to use produc for something important to note here is that these proposals are things that get implemented into V8 not with JavaScript so when one of these functions is provided the engine can choose to do these things under the hood for you in a different language so if we have a reduced function all of that has to exist in the JavaScript VM because every step gets run by the JS VM but if we have a sum function that value can be passed down to something faster and then it will spit up the resulting value instead since JS doesn't have to run for every step in every iteration it only has to run for one function quick to give you the sum not using reduce theoretically allows for your run time in your engine to do something much much faster which is what's interesting here if this merges is imagine how fast Jared could make this in bun like if he can do the sum outside of JavaScript in something native like bun and just update the memory from there that's way way way way faster so in that sense not using reduce for a sum actually makes sense and also the point that a floating point numbers aren't great to add together like this and if you could do that externally and have a a more correct answer that's probably worth it like apparently the fact that there are more clever algorithms to add floats together it's a fact that few JS programmers are aware of and even among those who are would never bother doing it has anyone in chat ever written better floating Point Edition in JavaScript make yourself known you know what zero if you've never written your own custom Logic for floating point one if you have Jesus Christ Bender trying to make your way into a video I did it once it was bad I'm seeing two ones so far but mostly zeros because who the hell has written their own custom implementation of adding floats like why would anyone do that Autumn if you can't recall you did not do it yeah if anyone does end up doing that let me know how it goes because that's curious to me but uh as far as I know none of us are making game engines and as such none of us are doing our own floating Point math we can make it easy to reach for the better option yeah if they have array prototype sum that sounds great to me so this is the proposal we have values values. reduce would be zero for these two being added and math. some precise oh it's a math function and it's also some precise interesting instead of specifying any particular algorithm this proposal requires the maximally correct answer that is the answer you'd get if you did arbitrary Precision arithmetic then converted the results back to floats this can be done without actually needing arbitrary Precision arithmetic one way of doing this is given the sh96 cool this is Magic because if this works in this performant this will allow for some crazy like 3D game engine type stuff with really precise floating points and if this can to be done quickly this is very promising oh somebody has made a really good point in chat does this mean 0.1 plus 0.2 will actually finally be equal to 0.3 do do we test this polyfill is this video going to be hours long cool so sum 0.1 0.2 I need to pass an array ah that would make sense God damn it God damn it so close but so far how is it actually math is really hard in JavaScript I'm embarrassed for you anyways still a cool proposal someday maybe our math will add up how it should have this whole time let's take a look at the promise. try that's actually an exciting one common use case that I and many others have is that I have a function f this function may be async and return a promise or it may not I don't wish to have to know however I'd like to wrap it in a promise so that if it is async or if it throws I can lean on promise semantics and do catch to handle it the typical easy to remember way that this is achieved in JS promises is with promise. resolve. then this works great it catches any exceptions thrown and it promise wraps any venables or values returned from the function however f is needlessly run asynchronously on a future future tick this is a fair point what if you want to use the promise semantics but not have to wait for this to end up at the bottom of your event Loop and go through it again being able to use promised semantics without blocking it's an interesting concept not have to await yeah if they want every to r on the same tick since after all it might be synchronously returning a value or if I want parallel semantics with an acing function up to the first await then I need to use new promise resolve resolve F this chuse my goal but it's not ergonomic enough to write nor is it easy to remember I like how personal this one's written usually these proposals are more like high level talking about the state of the world not focused in being like this is the exact thing that I am working on and why I care wow uh P TR has 44 million weekly downloads and 8.9 billion total downloads nice good stuff crazy to think that's that popular but I get why you get the point there's a lot of potential value in being able to use promise syntax without actually having an async function so all the stage three stuff is based on eval eval is cursed and you shouldn't use it so we're going to skip these parts especially since these haven't actually had their proposals updated since stage one so not necessarily the best thing for me to cover here and honestly stage four as well as things we're covering after are the more interesting bit so we're going to dive straight into that so set methods and duplicate named capture groups set's too much fun so we're going to do that next duplicate named capture groups right now in JS naming a capture group in a Rex needs to be unique fun so this would be an error because you've reused the year group name but you want to match a thing that can be written in multiple formats so it would be nice to be able to use the same group name for that case so if we have year being used for two things here we should be able to call it year in both places so this spec is very simple and let you do that cool nice you reject people must be pumped if you don't already know about the set in JavaScript it's my favorite underutilized JavaScript thing think of it kind of like a map except you don't have a value you just have the keys so it's really quick to check if something is or isn't part of a set so if you want to see if a username is already done a thing you can have a set that has all the usernames that have done the thing and then you quickly check is this usern name in the thing and if it is cool you're done and if not you can add it it's really nice way to quickly check things and also the ability to compare different sets so if we have a set of users who have finished signing up and a set of users who are in a like an org we can do this to overlap to get those things together which is a really really cool and powerful thing especially if you can optimize this at the lower level in the engine if you can do that diff in like C++ with the memory access directly this becomes a really powerful thing so clearly as you see here sets are very useful especially once you start combining and comparing different sets to see which values are and aren't shared so let's see what this proposal is adding some of these things are really cool oh it is those The Proposal is the intersection Union difference and all of these which I've had to implement in the past and they suck so having all of these just built into the language and theoretically being way faster as a result is huge especially superet and subset that is so dope to have where you have a bunch of keys and you have another set of keys and you want to make sure that other set is fully within the greater set this is this is huge this lets you do crazy stuff performance-wise too if that's like a check you're doing a lotoo fun yeah this is a really cool spec I'm really excited to see what people do with it I know a lot of Library devs like uh TK dodo from over on the react query side has been very excited about this for quite a while now and I know a lot of libraries have the opportunity to theoretically get much faster if these things are implemented and they're implemented well in the browser and in the engine themselves so that being at stage four is huge because that means like every browser is going to start implementing it it's even in mdn now so when you search for sets in mdn it just shows you all of these methods because they're effectively ready to go which is huge I cannot wait for these things to be in every browser what's the can I use for this okay set intersection damn as per always Firefox is holding back the rest of the internet I know you guys love for me to shill Firefox you hate Chrome so much but uh yeah Firefox is holding back the web and once again Firefox is taking its time implementing these things there is a way to go set it manually in nightly builds cool welcome to the world of supporting Firefox even Edge has it like are you kidding Safari's had it since 170 imagine being behind Safari for new features yeah I I can't we would have set methods now and they'd be used by everybody if it wasn't for Firefox it's the point I'm trying to make cool so those are all of the things that have been talked about in the last meeting but there's a bunch that weren't and I want to talk about those two because I don't think they're any less likely to come I just think they're a lot cooler first I need to talk about is iterators specifically iterator helpers which are a collection of new methods of iterator prototypes well on iterator prototypes that help in general use of iterators v8's already shipped them so we can look at the official docs for iterators which is really cool but I'm going to start with the proposal because I think it's important to have the context of why this is all happening a proposal for several interfaces that will help General usage and consumption of iterators in Aquas script stage three so it's time for browsers to start implementing motivation iterators are a useful way to represent large or possibly infinite innumerable data sets however they lack helpers which make them as easy to use as arrays and other finite data structures which results in certain problems that could be better represented by iterators being expressed in arrays or using libraries to introduce the necessary helpers how many people have had a map that they wanted to do things with in JavaScript and you just dump the map in an array so you can actually iterate over it the way you expect cuz I know I've done that in more than one Advent of code problem and probably more than once in production too so yeah um very much a thing I'm excited for to not have to to opt out of other iterator types and just dive into arrays because there are better functions this will allow us to have all the things we expect without leaving our iterator and going into aace so when we're dealing with maps and sets and all the other fun data types you can keep them in that data type I've had so many times where I had like a map that was part of like State through something like zust stand and I wanted to select specific values from it and having to like look for like finding a specific value in a map not the key hell and I would just convert two and from arrays everywhere to solve it getting out of that seems genuinely magical so I'm really hyped for this already let take a look at some examples here's a generator which if you're not already familiar with generators they are functions that are are lazily evaluated when you call them effectively so you can yield and get more and more values and here we have Naturals which will start with i z and then while true it continues to yield I over and over so we can map this so Naturals map value return value time value this is so cool being able to map off of a generator magic this is so cool I'm actually really hyped for this they even have things like fil oh filter on a generator oh man and I just learned about the chaining Behavior oh boy thank you Gabriel as always the main thing with iterators is that it'll run everything in one computation so L the map. filter. ruce andfind happen if you chain them all together it will compute them as one big reducer in the engine assuming that they implemented correctly in the VM yes but man if they get that and they get that right this is this is so cool nobody told me take was happening this is a new discovery for me I should have read this before oh man I'm trying to find the right way to explain why this is so cool hopefully you can look at this and see why it's cool but if you can't which is also totally reasonable this effectively lets you generate data with a cap that's defined where you're consuming it so if I have a thing that generates I don't know the one that I had a lot at twitch was we were generating video manifests for picking what episode we would stream next it would keep going until it ran out of files we could add a bunch of checks to make sure it didn't run out of files but we could also just take the right amount or another common case is that we're running this across multiple servers and we know we can only process up to three videos at a time before we hit CPU limitations now we can just take the amount that we actually want to take this is so cool this is a really good Syntax for a ton of libraries like here's a thing that we could see that would be great for this what if we wanted to generate test data we want to generate a specific amount this looks great drop is just as cool where you can skip values so this is iterating and if we drop three then we skip Z through two and then the next value is going to be three then four then five this is so cool flat map again so cool God if you did do take and then do flat map I think you can chain them right for those who aren't watching live which is going to be most of you knowing how my videos work we just discovered that most of this is already in the browser which is huge huge so we're going to drop that generator function and I want to play because I want to specifically try out I was geeking out over flat map which is cool CU you can map the values to something different when they come through which is huge because if you want to split this set of data into a different set of chunks like maybe I want to parse every word instead it's that easy to just parse every word instead so cool what I want to play with is to array cuz I want to use this to generate an array with incrementing numbers cuz as we all know generating an array with default values in JavaScript is weirdly annoying and also weirdly runtime intensive so let's do const count array equals Naturals take 8.2 array count array this changes everything I see why all the everyone was so hyped about these holy there are so many things this makes way easier and you can tell from chat freaking out yeah wow this is good enough I almost want to make a video dedicated to it Jesus you've been using the polyfill for 2 years I I fully understand now this is one of those things where I'm going to refactor a lot of code that is that is just so clean and the best part const more array equals Naturals take 5.2 array and now we get the rest wait is not the rest again is it a does it reset what we've taken when we convert that does that not count as taking yeah because um it's a function it's not like in a state so the thing hasn't been consumed we'd have to uh take the naturals call so if I was to do uh const current state equals Naturals current or const M1 equals current state. take 5.2 array that will work for M1 and now if I do const M2 equals current state. take 6.2 array we'll get I spelled State wrong if you ignore the fact that I can't spell that's a little Annoying the fact that once you set a take value on an iterator you can't take more at that point forward I get it but it's annoying this is how most people are going to consume it anyway so it's fine but uh was expecting a bit more State and flexibility there I'm curious to see what people do and recommend with this going forward of course we have a for each which is really handy to get a set of values and then do something for each of them in this case we're pushing to log for each value that's what you would expect pretty simple and then sum to check if any value in the iterator matches a given predicate sum can be used it takes an argument which returns true or false yep. sum true. sum V true false iterator already been consumed interesting yeah so since the sum has resolved to True after we've done Naturals that take four here with this iterator once we've done this we've consumed the iterator so we can't reuse it for another check but we can go on to do take four on that trolls directly we every time we call the generator function we're making a new iterator so that works that makes sense there are so many of these that are huge every this one's really handy especially for a stream where we have data that we don't know when it ends or if if it even ends having the ability to make sure every single value coming down the stream is correct huge golden and this just being built in is so nice and of course find we want to find the value where a certain thing is true that is not trivial iterator do from object from is a static method unlike others listed above which takes an object as an argument the method allows wrapping iterator like objects with an iterator cool so here we have a class iterator that has a next function that returns done false value one now we can wrap it with iterator from and it just does what we expect that's pretty cool too one more important piece here all of the iterator producing methods in this proposal are lazy they will only consume the iterator when they need the next item from it especially for iterators that never end this is key without gener support for any form of iterator different iterators have to be handled differently huge this is the magic here is you don't actually consume any of the data until you're actually using the value so if you have massive maybe even infinite data sets like I don't know the billion row challenge this is phenomenal for that type of stuff the only time I spent just trying to read the chunks and like iterate through them when I was trying to do the billion row challenge was obnoxious and here you just don't have to anymore huge so hyped for this this is one of those like oh my God why do we not have this already type things and I'm really hyped that not only is it coming it's in the browser like this is so simple and elegant and these types of problems were so annoying to solve before it just it feels like the beauty of pipes and maps that I'm used to from something like elixir finally making its way into jsland which is so cool to see yeah it's lazily loaded oh so so good this is so good I'm so happy about iterators we can agree as we see here a lot of the fancy new iterator functions specifically iterator filter the one I checked Works in Chrome Edge and Opera which is all the chromium based stuff so it doesn't made his way to Firefox yet or Safari so I can't roast Firefox as hard as I would like to but uh yeah Firefox B Firefox we'll continue to roast it because of who I am as a person iterators are looking really promising very excited to see where they go but they're not the only really cool proposal here let's dig into temporal I I think temporal might be the single JavaScript thing that I've been asked about the most that I haven't talked about the reason for that is I wanted to dive a lot deeper and give meaningful input I still can because I've read about it so long and it's now far enough in stage three that I'm actually pretty confident it's going to ship but man temporal is cool remember the days of using many different date time libraries like good old momentjs the browser should always have had a better way to deal with date times the browser is possibly the single platform where date times are the most valuable like how many web pages are there on the internet that don't have a single date time on them I like honestly can't really imagine many as I sit here thinking about it like most websites have some need for date time somewhere so this the fact that browser handles them so poorly is obnoxious and I'm very excited for it to not handle it so poorly as we see in this proposal date has been a long-standing paino in ecmascript that's putting it lightly this proposes temporal a global object that acts as a top level name space like math that brings a modern datetime API to to the ecmascript language for a detailed breakdown of motivations see fixing JavaScript date did Maggie just write a huge article about this yeah there's a lot to dig into here let me know in the comments if I should do a video about the history of date time and JavaScript because it's a complex and long story or a negative one story if you ask JavaScript how long it was so what what's the goal here this is the proposal for temporal a global object that acts as a top level name space similar to math and it brings a modern datetime API to the equiscript language the principles are as follows all temporal objects are immutable date values can be represented in local calendar systems but they should be convertible to and from the poptic Gregorian calendar you could have shown me this name and asked if it was made up and it would be a 50-50 shot for me all time of day values are based on a standard 24-hour clock that is very necessary and leap seconds are not represented cool leap seconds sorry Google so let's take a look at the actual uses of this the documentation as well as the poly if you really want to this now you can I do think a lot of browsers support it already though if I go to can I use oh no browser support it yet weird temporal that instant dis supported in Safari okay we're still very early with temporal still I thought so but it's sad to see CU I believe this is pretty far St yeah stage three so this should be in browsers by now but as per always if you guys don't know um the problem with time and time zones I've referenced this video more than possibly any other in my history of YouTube yeah date time's hard and it seems like the browsers are putting off dealing with it because it's hard so we'll see when they actually get it in I actually read the docs for what this looks like to use though because it is really cool temporal do now. instant get the current system exact time temporal now time zone ID get the current system time zone Zone date time which is current date and wall clog time in the system all these now things make pretty clear sense you could even get plain time and plain date time all here it's pretty handy it works how you would expect temporal instant is in interesting it represents a fixed point in time called the exact time without regard to calendar or location like July 20th 1969 at 2017 for a human readable local calendar date or clock time use temporal time zone or temporal calendar cool so instant temporal instant from this exact thing two string Epoch cool so it represents a specific moment crazy to think this didn't really exist before usually that the difference between like duration time date and how they combine has never been particularly clear so having the ability to have a specific moment and then a duration a separate Concepts is huge plain year month oh how many times have you needed this where you just want to get the year and the month and none of the other or just month and day and then you have this new date object where you can get date. day of week or year month. days and year so much useful stuff here duration again how do we not have this before why is it so hard for us to take two date times and figure out how much time occurred between them I know I've had to deal with that a bunch I know others have to and then like adding that duration to something else mess and now it's not now it's trival temporal duration from and then you just pass it hours minutes whatever key values you want here that are numbers and it just spits out the number God you know that this previously was 69420 and they changed it that's all I see when I look at 46900 this was previously 69420 so you can find the G history to prove it I love that no commitment temporal time zones making time zones actually dealable finally temporal calendar represents a calendar system most code will use the iso 8601 calendar but other calendar systems are available cool weird fine temporal doc calendar. from ISO 8601 dates Cal date from Fields there you go date months and year date. days and year all make sense I like they documented this that exact times are different from calendar dates and wall clock times and the Zone date time and these other pieces are what link these things together string resistance parsing and formatting I have needed this diagram for things for so long I love that they have like documented the standard and what part represents what here very very handy good stuff I finally understand the temporal hype this is huge even just having duration as a primitive is enough a reason to want this desperately so I'm very excited for the future where all browsers have this stuff built in because we should have this years ago but if you can't do something years ago the best time is now we're down to the last two make sure you stick to the end cuz the last one is very fun and spooky it's the shadow realm but first we have to do pattern matching I've already talked about pattern matching and sadly since then it is not Advanced past stage one I think a big part of why is that it's been handed over to a new crew of people to run it cat was running it when she was at Microsoft I think she's still at Microsoft I'm not positive about that though yeah cat might have left Microsoft but Daniel Rosen waser who is the guy in charge of typescript at Microsoft he's the manager of the team is one of the top Champions which is very promising very promising weird to have the typescript manager proposing things in JS but when you think about it it kind of makes sense and a bunch of other really talented people as well so what's the problem what are we doing here there are many ways to match values in the language but there's no ways to match patterns Beyond regular expression for Strings however wanting to take different actions based on patterns in a given value is a very common desire do X if the value has a food property do y if it contains three or more items Etc I've already done a whole video of pattern matching and I highly recommend it if you haven't checked it out it's a pattern that I desperately love and need in JavaScript because I hate switch statements and there isn't really a nice way to do this with switches we take a look at the syntax which should be at the bottom somewhere in here match we have this five integers array so it's five integers it's integers five so this is 1 through five so here we have the match pattern if we have when let a in the array this is matching when there's one value in the array matching a generator against an array pattern obtain conin the iterator which is just above the generator then pull two items one to match the a second to verify the iterator only has one item which fails when let a let B is us having two values instead here so if we only have two values and it fails when it pulls the third this is where we'll end up but otherwise we hit the default this is the magic of pattern matching is you can have different patterns that you're trying to match to so instead of having to write a bunch of weird if thing is true type cases you just assign the values and if that is the correct assignment it just works it's a really cool pattern this works for objects as well um is the code just not loading here or did they kill the proposal some way where I can't see them anymore okay what the hell yeah this is just in their markup they just deleted the code from the example what the that's annoying that's one of the specific patterns I wanted to show one more example there's tons more in my video that you should check out is checking for specific things on an object so here we use math. random to decide if we're returning a number or string so get number or string returns math. random if the random value is less than .5 so 50% of the time it's the number one the other half it's the string one and now in the pattern matcher we can pass this object and if number or string comes out to a number then we'll log this and we'll go down that path like a switch but if it's a string we go down this one instead the magic of matching is it only can match one thing it has to match the top thing of the list so yeah hype think of this like early escapes where I'm sure we've all done the pattern like if I was to rewrite WR this instead of match what we would probably do is if type of that is number then we would console log number and then return or we do an else is what we probably do and now you get the idea we'd be doing this type of stuff where we have a bunch of like these nested if checks probably full of early returns and stuff now we have an actual syntax that describes what we want we want an object where number or string is number or number of string is string this might seem like a semantic thing but once you get to increasingly complex cases this really really nice people are mentioning switch true is another option but like I'll be honest as a big JavaScript Defender switch true statements feel like we're admitting that our language sucks and I I hate that it also like those don't work for iterators at all where matching works with iterators matching isn't some weird syntax hack matching lets you check for specific things with this new syntax in the shape of the pattern huge very excited and now for the final proposal that is currently in the Line Shadow realm Shadow realm is actually pretty far along it's in stage two has a bunch of legendary people who are advocating for it but uh what is it what are Shadow Realms Shadow Realms are distinct global environment with its own global object containing its own intrinsic and built-ins separately from the browser so standard objects that are not bound to Global variables like the initial value of object a prototype they have a whole explainer dock here too Shadow realm proposal provides a new mechanism to execute JS code within the context of a new global object instead of JS built-ins API enables control over the execution of different programs within a realm providing a proper mechanism for virtualization this is not possible in the web platform today and the proposed API is aimed to a seamless solution for all JS environments there are various examples where the shadow realm API can be well applied such as web-based IDE or any kind of thirdparty code execution like imagine building code sandbox with the ability to actually isolate chunks or Dom virtualization like Google amp and like making isolated versions of the Dom to grab things in and out test Frameworks in reporters like inows tests but also in node using the VM calls testing and mocking in general are huge for this SSR to avoid collision and data leakage again huge in browser code editors and even in browser transpilation so much cool potential use cases for this somebody ask if you could hack this with iframes kind of but you have no ability to go in or out of the if frame it just exists by itself and you show it or you don't show it you don't have any way to interface with it this would give you a way to interface with something as well isolated as an ifame so cool sadly they requested stage three in 2021 and I don't think they got it yeah this is the meeting where they proposed it pretty sure they got even more feedback oh that's cute nice little ending but uh hopeful that we'll see this one go a bit further because I've seen more and more hype around it recently people seem to be pushing it now more than ever here's what it would look like to consume we Define a new Shadow realm named red in this case red ad equals a wait red. import value inside code JS add see what's going on here we're loading different JavaScript to live inside of this realm Realms can import modules that will execute within their own environment when the modules resolved it captured The Binding value or it creates a new value that's a WP function that is connected to the callable binding so here we're binding ad from inside code JS to this Red Shadow realm so now when we call Red ad with two and three it will give us back five because we have bound this function which is exported from this JS code to here as an isolated box let result equals red ad yep you get the idea it's a wrap function exotic object that chains its call to the respective imported binding the evaluated method can provide quick code evaluation within the constructed Shadow realm without requiring any module loading while it is still required CSP relaxing uh yeah this is the client security protocol stuff just making sure it's secure which is cool because now we can update things in global this and then have our VM call Global this as well which yes you can safely call your Shadow realm. evaluate and that's okay because it just lives in its own world and now we can change Global this. some value in both places and it will not affect the current um JS VM that you're running within that's so cool this is like proper meaningful isolation to the point where using eval in quotes obviously is actually somewhat safe here where it never was before this is huge the WAP functions can also wrap other functions the other way around so we can set unique values red. import value set unique value that's pretty cool where this set unique value function lives within the in imported code and now we can call that function from outside and it will update the stuff on the inside as well as updating the value that we're using here that's pretty cool yeah the code in there set unique values uh CB Global this has some value time 2 yeah so the call back gets called with this and then it gets multiplied by two so we started with the value of two we then I always forget what the double times does that's exponent right so 2 the^ of 3 which is 8 and then we multiply this by two again inside of the Shadow realm which makes it 16 get the 16 here as the result I think that's pretty cool the ability to execute code inside and outside pass strings to the safely so much cool also a lot of potential for people to find and also create really subtle exploits and things when they use this but I think this is huge and I think if used right this would enable applications we can't even think of right now the safe execution of code that is input from something other than your team and your developers this is like theoretically like comp time for JS is now a viable path I am hyped for this this is really really cool this might be my favorite so far yeah H iterators is really cool yeah this is tough these are all dope there's a lot of cool stuff coming to JS I hope you guys are as hyped as I am because I'm really excited and not just to make videos about it that said let me know what your favorites are in the comments so I can plan accordingly and make videos about the ones that we're most excited about I know I'm personally really hyped on the iterators and set stuff but honestly after seeing Shadow realm that's quickly bumping up my list too so let me know what you like so I can cover it more in the future and until next time peace nerds




## The New React Native Architecture - 20240321
I'm not going to sit here and pretend react native's always been perfect there are some skeletons in that closet but thankfully the Facebook team recognizes it and they've just rebuilt the vast majority of the react native core to make it significantly faster significantly more scalable and most importantly way easier to plug native code into I want to go over all of this because these changes are huge and fundamentally shift the way we should think about and use react native so let's dive in to everything the react team themselves have to say about the new architecture since 2018 the react native team has been redesigning the core internals of react native to enable developers to create higher quality experiences as of 2024 this version of react native has been proven at scale andwers production apps by meta the term new architecture refers to both the new framework architecture and the work to bring it to the open source world I like they're using new architecture here because with server components we don't have a good word that encompasses everything because server components are like a way to render components on the server and a way to interface them with client components but then there's also server actions and there's also streaming and the new suspense stuff there's a lot of these new Concepts that all fall together under one umbrella that there's no term for wherein the react native World they just straight up said oh this is the new architecture it has like 15 things in it but this is all encompassed under the new architecture I wish we had a term like this for the server side but honestly generally speaking the react native team has been way better at communicating both with their like immediate dedicated users like the react native team talks to a lot of the companies that use react native much more so than the react web team but as such they're much more familiar with how people are understanding these things as they talk about them so a lot of this communication gets cleaned up a ton before it goes public and it's cool to see just I know it's such a small thing but the use of a a term to describe these changes as one thing is really really nice and I wish they did this for react itself anyways the new architecture has been available for experimental optin as of react native 0.68 which by the way they're on 0.73 so it's been a while and it has continued improvements in every subsequent release the team is now working to make this the default experience for the react native open source ecosystem cool to see so many versions since then of them really refining it like this original announcement was in 2022 oh good old Lorenzo he's a legend as I said like react native isn't just within meta the same way like react is Microsoft is an active contributor to react native Amazon has been helping a ton with things like the static Hermes compiler there are lots of companies that aren't meta themselves that are interested in making sure react native succeeds Shopify is another huge one Shopify puts so much effort into making react native go from good to great so this is not just some quick thing they put out this is years of effort possibly like half a decade plus of effort and two plus years since it initially was released now we're seeing them working finally towards making it a default lots of effort lots of dog fooding lots of time put into this if you're wondering how I know so much about these inner workings it's actually pretty simple it was one event I went to last year chain react and I'm thankful to say they're actually sponsoring this video right now at least this bit so I can tell you all about why chain react is hype last year I was blown away I got to Keynote the event I got to talk with all sorts of cool people the food was incredible obviously chain reacts happening again this year from July 17th to 19th and that first day the 17th is dedicated to workshops hosted by infinite red Expo and even Microsoft helping out too but honestly I'm even more excited for the talks this year we're going to hear from everybody from Microsoft to meta to Amazon to Shopify to coinbase and so many more talking about the new architecture for react native the crazy things have done to scale their code bases and just diving deep on all the nerdy details if you enter the code Theo you get 50 bucks off and I get paid so if you can enter that discount code go buy these tickets or better convince your company to buy them for you if you work at a company that's interested in or using react native and if you're not interested in react native there's a code for you too enter Swift at checkout instead and you'll see there's a new option that costs twice as much because building your apps in Swift takes twice as long back to the video but why why make a new architecture in the first place after many years of building with react native the team identified a set of limitations that prevented developers from crafting certain experiences with high polish these limitations were fundamental to the existing design of the framework so the new architecture started as an investment in the future of react native the new architecture unlocks capabilities and improvements that were impossible in the Legacy architectures interesting nobody's better at on react native than the react native team and it's nice seeing them do it and calling out the fundamental limitations that prevent the levels of polish that they wanted people to be able to achieve especially when you consider that react native isn't just targeting mobile anymore it's targeting desktop it's targeting vdr it's targeting consoles like so much of the Xbox interface runs on react native it's crazy they need these things to not just work well but bind well to Native platforms synchronous layouts and effects building adaptive UI experiences often requires measuring the size and position of your views and adjusting the layout today you would use the on layout event to get the layout information of a view and make any adjustments however State updates within the on layout callback May apply after painting the previous render this means that users may see intermediate States or visual jumps between rendering the initial layout and responding to the layout measurements think of this as like I'm resizing my window the browser does a great job of moving things there because react isn't running when when I do that when I resize this window the react code isn't changing anything the react's already run and painted the Dom it's CSS that's doing the shifting on mobile we don't have CSS so when your viewport changes for any of many reasons especially when you're talking about these new environments like VR or game consoles those views might change in size in all sorts of different ways and if you're writing react code to change that UI and change the view as the viewport changes that's going to suck and that's going to be really slow to have react updating every frame to try and render the right content and it's not going to know until the window changes so yeah makes a lot of sense that's the type of thing they want to Target here with the new architecture we can avoid this issue entirely with synchronous access to layout information in properly scheduled updates such that no intermediate state is visible to users let's take a look at this example tool tips everyone's favorite measuring and placing a tool tip above a view allows us to Showcase what synchronous rendering unlocks the tool tip needs to know the position of its Target view to determine where it should render in the current architecture we use on layout to get the measurement of the view and then update the position of the tool tip based on where the view is so this is even just like scrolling it has to call this in order to put the thing in the right place so here we see function view with tool tip Con on layout equals react use call back Target ref and then this on layout call for the view this is what's called when the view changes in any way and in order for this to work they grab the target ref from this change and then they set the re rectangle's position to be the new position based on what they're grabbing from the window here and this has to run on every frame in react that sucks with the new architecture we can use use layout effect to synchronously measure and apply layout updates in a single commit and avoid the visual jump entirely so this is still running within react the difference is that layout effect runs before the render instead of after so this will move the tool tip before the user even sees the change this will effectively block the new frame from displaying which prevents the Jank of the tool tip moving after you scroll if we see the example here when this moves the tool tip moves afterwards in the new version it just moves all at once because the tool tips moving is is blocking the rest of the view sounds bad to block but when you make these types of things synchronous you prevent a ton of potential additional issues somebody said why can't you debounce in chat and you can debounce but then you're going to have the tool tip moving at a different rate from the rest of the view so if you're scrolling up in the view the tool tip's going to stutter based on how much you set the debounce for you can't debounce UI in that way you cannot debounce animations Scrolls all those types of things in that way you can debounce like a fetch call but you can't debounce this so I just saw the code Bas of 26 % Java yeah because react native targets Android and in order to Target a platform you have to write a lot of code for that platform react native writes a really good Android app in Java and a really good IOS app in Objective C they're playing with Swift and they're playing with cotlin but they focus on the technologies that are the most stable that they've been building on forever because I as a react dative developer I'm not writing Java so that's synchronous what about concurrence because blocking is great but parallel is greater the new architecture supports concurrent rendering and features that have shipped in react 18 and Beyond you can now use features like suspense for data fetching transitions other new react apis in your react native codebase further conforming codebases and Concepts between web and Native react development the concurrent renderer also brings out of the box improvements like automatic batching which reduces re renders in react in this example a slider specifies how many tiles to render dragging the slider from 0 to a th000 will fire off a quick succession of State updates and reenders in comparing the renderers for the same code you can visually notice the renderer performance provides a smoother UI with less intermediate UI updates you can see here with the old new when you scroll around this happens almost immediately where this one fills in slowly as all the new updates render I was actually building like a shared music listening experience in react native a while back that had like people moving and such in it and I had to defer most of that animation over to be in like react native reanimated and not within the react native JavaScript site itself because of how much these types of things hurt your performance CU they weren't parallel so this is really cool to see quick look at the code for the sake of it yeah we have all our colors view value is a number and then for all of these we add a view in the views. push and then we render them all and this is the same code used for both you don't even have to change the code it just runs better there's nothing better than you install an update and your existing code just works faster that's so cool I will say react native version upgrades are not the smoothest thing in the world but if you can get to the new version this is huge new concurrent features like transitions give you the power to express the priority of UI Updates this is also really big because some UI updates might be more important than others and it's not easy to tell react hey don't do this until this is done and now it's just built in marking an update is lower priority tells react it can interrupt rendering in order to process things that are higher priority let's take a look at an example here this is using the tile slider again is pending start transition VI text renderer animation is pending slider on value change start transition so because the value change now triggers a transition react knows okay if a transition is happening and a new update calls that calls the same transition I can interrupt that and here yep tiles generate tile views these all take higher priority because they're not wrapped in a transition so you'll notice with the frequent updates in a transition react renders fewer intermediate States because it bails out of the rendering the state as soon as it becomes stale that's the big difference if you don't have a transition for this it won't process the next update until it's finished this one when you wrap it in a transition you were basically saying hey react by the way if this gets called again dump whatever the you were doing before or use this new state instead which is really nice to explicitly tell react hey you can skip that step by the way fast JavaScript and Native interfacing this is honestly what I thought of when I thought of the new architecture and I'm happy they called out at the top that it's a whole umbrella term for a bunch of things because this was what I was thinking of the new architecture removes the asynchronous bridge between JavaScript and Native and replaces it with a JavaScript interface the JSI is huge JSI is an interface that allows JS to hold a reference to a C++ object and vice versa do you guys know how nuts this is you can't even get JavaScript to hold a reference to a JavaScript object having the ability to call a like like have an object in C++ that is shared memory with JS and have that binding native without an async layer transitioning things over the wire this is huge this changes everything as I say with the memory reference you can directly invocate methods without serialization costs nuts so cool just like one of many dumb examples the code for chat on Twitch chat specifically for the colors is sign significantly more complex than one would like to imagine one of the important parts of the twitch colors is that anyone can pick whatever color they want the more important part is that in dark mode or light mode or whatever modes you're using the contrast is high enough for the names to be readable previously that wasn't the case and a common troll people would do is they would change their name color to be really close to the background color of twitch so you couldn't see their name in order to fix that twitch changed the default chat mode and when I say twitch did this I mean one particularly dedicated engineer worked her ass off to fix the chat colors on Twitch to make them read and accessible see this readable color switch if I turn that off i' have to refresh seems like nobody's colors are off enough to be hard to read but if somebody had a dark enough color and I turned this switch off it would be very hard to read their name the math they did to make that color thing work is why I'm bringing it up though because they wanted to make sure the colors matched across all platforms so I need to make sure on desktop on iOS and on Android that the colors are the same and any math I'm using to transform the color based on your color schema needs to be consistent the only language that they could find at the time that let them apply the math to transform the colors consistently was C++ so the code that actually takes the chat color and transitions it to the color that looks right for your display regardless of your platform it's the same code written in C+ plus as insane as that sounds and I believe me I was weird out when I first heard it that justification of we want the colors to match everywhere and the only way we can guarantee that is a language we implemented the math of that was crazy and I have a ton of respect for them for doing that writing the bindings to get that C++ code into the Android app was not fun they did it but it wasn't fun now that's just a feature built into react native you can just call a C++ object or a C++ function whatever you want and it just works so as much as I don't want to write C++ code the idea that someone could write some really complex math in C++ and I just have access to it in react native that's crazy and I love that let's see how they actually use this though cuz it's cool as it sounds I want to see their recommendations JSI enables the vision camera a popular camera library for react native and it can now process frames in real time typical frame buffers are 10 megabytes which amounts to roughly a gig of data per second this might sound insane but as someone who shoots in 4k the stream that I'm recording right now is going to be 6 to 7 hours that's going to be about 500 GB of content these sizes make a lot of sense especially when you're not compressing like my camera footage is compressed that was uncompressed each frame is insane and if you want to know more about frame compression I have a whole video about how h264 Works come in very soon if it's not out already YouTube search Theo h264 and hopefully a video comes out by the time this is out anyways that's a shitload of data and when you're getting it straight out of the frame buffer it's going to be full size depending on the frame rate especially like it gets worse if you do like 60 or 120 or any other frame rates or increase the resolution there the the data you get from the frame buffer from the camera is nuts I I God I'm trying my best to not do a long rant about cameras in multiplat stuff because I could like I could do an hourong tangent about the Snapchat camera on Android what I will say is that the camera Bindings that exist for these platforms like in the case of Android the Android camera SDK was so atrocious and so slow and inconsistent that in order for the Snapchat team to add a good experience where you could do like the sliding to and from the camera part they didn't use the camera SDK they used the camera viewfinder SDK which was meant to be used to give you like a little preview of what the camera was doing that didn't require pulling shutter for every single frame and it looked awful and rather than when you click the picture button telling the camera C hey take a picture and send it back to me they would literally take a screenshot of the like viewfinder SDK hilarious that's why Android Snapchat and also Android Instagram for a long time looked so because the camera SDK on Android was so it was the only option they had but now that we have native bindings here and awesome stuff like vision camera as well as the Android SDK getting a little bit more viable we don't have as many of those problems anymore I think Snapchat might still be the case like that on certain phones I think the pixel line generally has better SDK support but that I could literally R about that for ever I'm so sorry for the tangent back to react native in comparison with the serialization costs of the bridge JSI handles that amount of interfacing data with ease JSI can expose other complex instance-based types such as databases images audio samples Etc why would you ever want to expose a database like this I can think of a lot of reasons one of my favorites that I pulled up on stream earlier project light speed which if you're not familiar was the rewrite of the Facebook Messenger app Rewritten in of all things sqlite yes the UI is powered by dynamic sqlite templat because much like C++ sqlite's one of those tools that is basically identical and really performant on literally every single platform so if they write everything in the SQL light binding it works everywhere and it's crazy how these other things we've invented to try and make truly multiplatform code basis experiences and consistency like C++ color math or craziness here with SQL light as your UI layer these are all the things companies like Facebook invented in hopes of making things consistent across platforms now we just have it built into rea act native so if you want to use something like databases in your react native code performant with a native database running in C++ land just built in now so cool JSI adoption in the new architecture removes this class of serialization work from all Native JavaScript interal this includes initializing and rendering native core components like a view or a text element this is huge not having to go through the async layer just to update a text component huge you can read more about our investigation into rendering performance in the new architecture and also the improved benchmarks that they measured a 1500 view component went from 282 to 258 so slightly faster 5,000 still just slightly faster this is also on a pixel 4 if we look at an iPhone 12 though we see a much bigger jump here because oh God I'm going to get in trouble for this one uh since Android's already written in a pretty big abstraction javascript's not a massive cost on top and the pixel 4 when did the pixel 4 come out 2019 iPhone 12 release date okay the iPhone 12's a year newer but like a one-year difference between these phones even like the old react native architecture was twice as fast as the new one like Android's just a little rough Java's not the right thing to write your operting system in and that's why we're like the base performance possible on Android is because it's so gimped by architectural decisions I'm not saying Android itself is bad and terrible and you shouldn't ever use it I'm just saying it's fundamentally flawed and cannot ever perform as well as iOS just cannot do it due to the way they obstructed the like language and had to reinvent Java to make it perform at all the difference here is roughly the same as here it's about like 22 is 24 milliseconds here it's almost identical difference the key is that the base potential performance on iOS is so much higher that the percentage difference is bigger so yeah Android slow hopefully not news to most of you flame me in the comments I know you're going to but uh yeah what happens here is like no I don't I'm not going to say the flutter word I'm not going to say the only reason flutter is acceptable is because Android is already so slow that the abstraction doesn't matter I'm not going to go on that tangent I'm just going to say that iOS apps and iOS users have a certain expectation of performance on their device and that expectation comes from how fast iOS can be at doing all sorts of crazy and what I'm excited about when I look here is that react native now performs significantly closer to what iOS users expect from their applications this is really cool to see they call out a section where you can go learn more a bunch of updates to the document as well as the working group I love that they've been doing these working groups too where there's like a place where people who are deep in the weeds for these new things can go and talk and play with them I know like nille was deep in the working group for Server component stuff and ended up building the tools you need to make your own react server component framework I know that somebody like uh Dai who built waku and also built Jodi and maintain Susan and a bunch of other stuff he's part of the react working group as well in order to talk about these new things it's really cool seeing the meta react communities as a whole embracing community in this way it's been a huge shift from not just how I think of react but how I think of web Frameworks as a whole it's really cool to see so what can we actually expect from enabling this new architecture well the new architecture enables these features and improvements enabling the new architecture for your app or Library may not immediately improve the performance or the user experience for example your code May needs some refactoring to leverage new capabilities like the synchronous layout effects or concurrent features although JSI will minimize this overhead between the JS and Native memory data serialization may not have been a bottleneck for your apps performance in the first place this is also an important thing like if you're just rendering views with a bunch of stuff in them serialization between the native layer and the like react native layer probably isn't the problem you're having and there's a lot of other things you can do to improve performance for that stuff too like flash list which I don't talk about enough flash list is a new list component written to make your lists that are really long with a ton of data perform much better in react native and it is a huge win the FPS you can get on a giant list of flash list versus the built-in flat list in react native is hilarious in the UI thread it's up to 5x but in the JS thread 10x plus and this is on an Android Moto G10 so they're testing it in like the worst possible scenario too this is such a phenomenal update and I'm so happy that this exists also big part of how I learned about this was hanging out with the guy who built it when I was at chain react and I watched one of my favorite talks I've ever seen yes this talk default to Performance from chain react last year was incredible phenomenal talk about how performance happened at Shopify with react native and all the things they did to make it possible and it has 100 views that's insulting I'm going to put a link to this in the description of the video so you can check it out if you haven't and you're curious cuz it was such a good talk and before someone says it well if you wrote that code in Native it wouldn't be slow let me tell you something see this button here this is for the library of all my downloads in Arc which was written in Swift I don't know if you guys can see that there that is some noticeable lag and it was way worse before they've had to rewrite this component like five times in order to make this list work at all and it it still chugs when I scroll it is hilarious how bad long lists perform in Swift by default without you building your own list primitive so yeah write in in Native except the native code sucks too flash list fixed all of that for all different platforms that you might Target they did the hard Swift code and the hard Java Android code so that you can just write nice basic boring react code like this is how you render a list that performs well in react native now that's it should be that easy should always have been that easy one more important call out from Evan here very worth pointing out is that the new architecture is actually required for building server components in react native things like use suspense and youth transition they just don't work without the new architecture and how it changes the threading model within react native which is huge and very important especially now that I'm predicting over the next couple years react native devs are going to slowly become full stack the same way react web devs are becoming full stack with tools like next I already have a video talking about mobile devs hate servers Expo wants to fix that where Expo is working very hard to slowly push people in the direction of react native and server code and the relationship between those things anyways enabling the new architecture in your app or library is opting into the future of react native I like that nice call out and I personally like opting into the new future when I have the opportunity to experiment with and really use these new things but over 2 years of release later and a ton of iteration in dog fooding this isn't that experimental anymore the team's actively researching and developing new capabilities that the new architecture unlocks for example web alignment is an active area of exploration at meta that will ship to the react native open source ecosystem I've talked about this a little bit especially like the conformance stuff if you guys have seen my video on uh react next big change is the react strid they're not going to force everyone to use strict they might not even go with it long term but the goal of strid was to make it so you could write code that is reusable as like one code base on iOS Android other platforms and web by abstracting enough of The Primitives that it can be applied correctly in these different platforms because there's no such thing as a div on Android or iOS unless you're under web view which then sucks so all of these types of things are work in order to make fully sharable and repurposable building blocks for react across all the places you can use react code this includes the changes to the event Loop model they're working on node and layout apis that are making things more consistent Dom traversal stuff like that layout conformant stuff and the chaos that is yoga if you're not familiar with yoga it's tldr it's how things like flexbox work in Native really really cool stuff I've even seen people using yoga outside of react native but like flexbox and GAP and all these crazy behaviors that we expect from the web only work in react native because yoga is built to make a flexible pun intended UI layer so enough about what it is should we actually use this new architecture today well today the new architecture is considered experimental still and we continue to refine backwards compatibility for a better adoption experience the team plans to enable the new architecture by default in an upcoming react native release by the end of 2024 our guidance is as follows for most production apps we do not recommend enabling the new architecture today waiting for the official release will offer the best experience imagine if they said this with something like nextjs when it came out I don't know how much stress this would have avoided but it would have been some amount it would also have hampered the hype which might not have been worth it but react native is not trying to Hype us up here they're not trying to shout from the rooftops everyone used this now they're trying to show us what the future looks like and I like that they're calling out that you shouldn't adopt this for real production apps or at least they're not recommending it I know I'm going to be using this if I build the react native out because that's just who I am as a person but they're giving an easy out to people who aren't sure because I know a lot of people don't want to ship Pages router on next today because app router is the hot new thing it's fine to ship Pages router it's still more stable it still has great support from everything and they're not going to get rid of it anytime soon the old architecture react native it's the same deal but they're communicated differently also calls out that if you maintain a react native Library they do recommend enabling it and verifying that your use cases are covered you can find instructions to that here this is also really cool because I know a lot of the complaints around server components have been the lack of resources for library maintainers in order to adopt these things cool they have a whole section here a place to chat about third party libraries in their migration story to the new architecture this is the react working group react native New architecture repo and here's the community for discussion you can talk about these things really cool to see this type of opportunity for anyone that's building reac native tools and Technologies to communicate with the team what a read I love talking about react native I need more opportunities to ship it but haven't had too many as of late just building everything for the web but when all this stuff ships it'll be easier than ever to share that web code with mobile code and make a great experience for everyone curious what you guys think about the new architecture is this going to finally shut up the flutter people or is this nothing interesting to you at all let me know in the comments until next time peace nerds




## The ONLY REASON To Unit Test - 20230525
the time has come I had to write a unit test I'm not very happy about it but I did want to take the opportunity to talk a bit about my testing philosophy what I think people are missing when I talk about why I don't usually unit tests and how I think you should responsibly apply unit testing and testing philosophy to the applications that you build so to get started why am I writing a test you might know my perspective from other videos generally I don't find testing to be a solution to many of the problems I and my users run into I am much more focused on making it easier for us to fix mistakes when they happen not catch them by putting way more work in at the start My Philosophy has always been built safety nets not guardrails make it easier to get back up when you're caught but guard rails do have value and there are many places where they make sense and one of those places is when the things that can catch you aren't able to and another is when the things that you rely on to stay afoot aren't doing what they're supposed to the thing that has had the most impact on my testing Philosophy by far is typescript most of the unit tests I used to write were vaguely tests of things that typescript guarantees won't happen making sure you're not passing the wrong value you to a function making sure when the function has the wrong value that it handles it gracefully all of those types of things these types of problems become exponentially less likely when you use something like typescript to prevent those errors as such I have found way less need for doing testing in a lot of what I build but there is an exception here when your typescript's role is something else since we're working more on Library code things you can pnpm install we need to worry about how that behaves with your application and we're deeply thinking about the contract our type system gives you when that happens and as such our type system has to lie a bit more than usual I always hate that I always hate casting enemies and overriding types and to go back to another thing this is why I don't like return types very much and sure enough we had to do some return types here too the reason we're using all these things is we have a very specific problem we want to solve which is making it easier for users to upload files but the complexity of the contract between the user's code and hours is such that the type system's role is different types aren't preventing us as the library devs for making mistakes they are the way you the user of our library uses it which means we don't have have the same role of the type system in our code base the type system can't just prevent me from making a dumb mistake anymore in order for us to make it easier for users to not have those dumb mistakes we have to put a lot of time into thinking through that contract and more importantly we need to put a lot of effort into making sure we don't break it for better or worse this is where the tests come in the best tests are the ones that depend deeply on the context of the problem that they are testing tests should be very contextual and in most contexts if there's an option to make things simpler you should make things simpler I find the majority of tests I see aren't testing something that has to be complex they're testing something that happens to be complex and rather than making it simpler they're testing behavior that it already has it's kind of like taking a house that's falling apart and rather than rebuilding the parts that are falling apart you cover it in concrete so that it can't fall apart any further but yeah sure that works my concern is a lot of the testing takes I see are used to justify covering piles of crap and concrete and if that's how your tests feel if they feel like you are taking this thing that's falling apart and documenting all of the edges of it tests are actually preventing you from fixing problems and I see this a lot too when people are learning how to do unit testing they're doing that without the context necessary to make good tests and as such if you take the lessons that you would get from any quick like how to unit test video and apply those to your code base there's a very good chance you're applying that in places it doesn't actually help make your code base better it might actually be putting some concrete on some fragile stuff tests make it much less likely that you're going to change the code underneath them which can be good if you never want the code to change but it's probably bad because most codes should eventually change and this is why I hate testing more than anything people are scared to make changes when they shouldn't necessarily be yes this can go the other way where if code isn't tested people are scared because it could fall apart but there's a balance here that you need to find where you're empowering developers to make changes and be more successful and move faster and if your tests are preventing fast movement which sadly almost all tests are they are now also hurting your ability to fix things when they go wrong finding this balance is tough and this is why I took the far extreme I took which is ADD tests when they solve problems that only tests can solve and in the history three of ping code base that we've been working on for over two years now and had thousands upon thousands of users using it almost every day we've had dozens of production bugs that we've had to fix we usually get them fixed pretty quick on average under seven minutes but more importantly of those bugs we have had three total that a unit test may have caught if we were strict about our testing rules dozens of bugs probably over 100 at this point and we have counted three that a unit test may have prevented that isn't worth it it just isn't for many many applications and usually when I find a heavily tested code base it's not tested because the code is good it's tested because the code is and if you're using tests as a way to keep your code in the exact State sure I don't think those people watch my videos I think we're here because we love coding and building and trying new things and making stuff better and that's why I push the unit testing takes I push because I want my teams energized building code that they understand and are excited by and if they could spend two hours writing tests or they could spend a day rewriting the code that they were testing to make it simple and easier to understand I will all almost always pick the extra day of time spent the exception as always is Library code the same way typescript makes things easier until you're building a library tests probably aren't necessary in typescript until you're building a library libraries just have so many edges and so many ways their understandings are misused and defining the API such that a typescript contract can communicate it and that the behaviors do what you expect it's a tough balance in testing is a nice way to find that balance it is not like our tests are super complex let me quickly pull them up sorry for sharing this code Mark I'm sure you'll forgive me so we're working on file thing it I'll leak the new syntax so here's the file thing syntax you can create a file router using the file thing helper you define what it can take you give it a Mac size you give it a middleware that either returns some metadata if it passes or you throw if you don't want the user to be able to upload so you use the request to figure out if this is the user you want do whatever you want in here and then you know by the time it gets here that this user is allowed to upload and now this info is tagged on the request and on upload complete is the code that runs when this upload's completed on your server and it runs with whatever you return here this makes the typing a little complex because we need to take the return of whatever this middleware async function that might not even be async returns and then use that as the metadata type here we couldn't use typescript the traditional way here in fact this problem was hard enough when I did it as an object that I showed it to my Discord and trash lost a lot of his sanity trying to explore it the problem here was if you remove requests from this the type here breaks but if you leave request here somehow the inference works properly actual Insanity we entirely changed the pattern for building with our library because of typescript's behavior here and quickly we ended up in tight pal where we have like 17 types for three values as such this is not easy code to maintain and that's fine because that's our job to maintain so y'all can consume it and have this incredible experience uploading files more coming soon on that and as such we had to write tests and when I say we I should be specific Julius had to write tests for us thank you Julius we still owe you money for this in here we're using vtas which has this incredibly useful expect type of very very handy and now we have some basic tests where we make sure invalid file types are erroring and if we return something that isn't an object we get an error and then if we return a middleware with a thing on it that we have the right types or don't specifically have these types and then there's a basic smoke test down here that's just like do the thing and make sure stuff exists very very simple very very good and honestly before we had these tests what I was doing is writing out pretty much exactly this without the expects and I had it in the file I was defining everything in at the bottom with a bunch of Shiki two slash comments pointing at the different type definition so I can make sure as I made changes the types were correcting themselves having this in a unit testing file just makes more sense because the unit here is inherently complex so yeah I now have tests and I'm maintaining them making changes to them and relying on them as a guard rail keeping me from making big mistakes because the safety net isn't good enough here and we've thrown away my favorite safety net typescript because we're choosing to use that one as a contract between our users instead of using it as a safety net for ourselves I think that's all I have to say about this hope this was handy unit tests can be valuable well I just think we're way way way over using them as soon as you're in the land of code coverage rules you've lost the plot the goal of this is to show you one of the examples of the rare times like the only time the last three years rare that I found a unit test helpful if you want to hear me complaining more about unit tests video about that right there thank you guys as always Sirens going off




## The Obvious Lesson I Learned From YC - 20221130
I feel like people overvalue ideas and even more so sometimes prototypes it is so easy to get caught up in the idea of something like Facebook started because Zuckerberg had this genius idea and then he went and built it became a billionaire but none of this is that simple ideas are cheap I have a lot of them I have a list of great ideas where if I was willing to sit down and put in the effort they would be successful companies but the harsh reality is a successful startup is not made by an idea a successful startup is made by really hard work and that work usually comes from a place of passion something that you care a lot about this stuff is hard it is incredibly difficult to get through most of the challenges for starting a successful company and if you don't have the motivation going in it's not going to appear because your idea is really good or you got the right investor the motivation has to come from the thing itself and you know you have an idea that's going to work when you care so much about that thing you're going to do it anyways and other people are excited about it too I don't like when people come to me with uh hey is this a good enough idea for a startup question because they are missing the point you shouldn't be asking another founder if this is a startup you should be asking potential customers if it's a thing they would use and pay for don't hit up Theo to ask about your new kubernetes system hit up kubernetes devs to ask about the problems they face and if the thing you're building would solve them don't hit up Theo about a new grocery Tag app walk to your grocery store and ask them how they manage their tags in their inventory systems see how much they pay a month for it and see if they'd be down to try something new go to the people who you think would spend money on your thing and ask them and if you can do stupid things that don't scale to give them a workflow that is viable a fun example for this for us at ping is we wanted to test call recording so when you're in a call with multiple people and you want to make content with that maybe I have primogen on my show and I want to have a fancy primogen next to me just lay out here but in post I want my Editor to have the full quality video for both we wanted to build that into ping so you have immediate access to the full quality assets for everybody who was in the call so individual tracks with audio and video for every person I didn't know how valuable this would be though in building this correctly would be very expensive we'd be spinning up infrastructure we would be transcoding things and storing them and doing all of this work so instead of testing it that way I tested it by putting a box up that grabs all of the packets in a call and then I run a hacky ffmpeg script on my machine and send a Google Drive link to the user who did a call recording we've been doing this for about a month now to test out the viability of the quality of our recordings and the need for them with our customers it would have been months of work to build the full call recording system and then put it out and realize nobody wants it instead I did this hacky thing that will not scale we could not run a company the way that I'm doing recordings right now but because I put in that work I now know that's a thing our customers need and we as a company can justify investing in that you should be doing this from day one talk to your customers before they're even your customers you might have to talk to a hundred of them before one is down but you need to talk to all of them and figure out why they are or aren't and learn as much as you can about the space you want to build in I know ping will work because I run a successful Creator Channel I make a lot of content on Twitch and then we redistribute it on YouTube and because of that I run into a lot of Creator problems the harsh reality is that the problems I think about every day are not the problems ping solved that is why we need to make things that are more in the spaces that the creators we're building for are in so what I when I hit up a Creator I don't ask hey do you want to try ping to make your collabs better I hit them up and say hey what does your content flow look like how do you collaborate with your editors do you do any or I'll obviously look into them ahead of time and see if I can find collaborations they did and I'll say hey how did you do your collaboration with that person what software did you use what was that experience like figure out where your users are and how they think about things and from there you will be able to figure out much quicker if you have a real startup or not the startup is not defined by your idea or your grind it's defined by the customers and how much they need the thing you're making it is a grind to get to product Market fit where the people who need your thing are aware of the thing and taking it at any and all costs but once you're there things are a lot smoother and figuring out what the path there looks like should be your top Focus if you can prove out a path if you can find customers who are excited about your thing even if it ends up being the wrong thing you've now built a relationship with those customers and they will guide you to the right thing and if you can't find the customers you have to be them it's really hard to beat being your own customer and I've learned that fast with ping doing an interview every week where I use our software to bring on a guest and finding every single bug I am constantly dog fooding all of our new stuff and figuring out what isn't isn't working we've entirely rebuilt the core workflows of ping based on what I have learned doing shows and talking to other creators who do the same and now we're building new products around it too you have to talk to your customers it is so important to be as involved as you can be ideally being the customer yourself and if you don't do that you don't have a startup you have a fun side project the difference is the customers I hope this rant was helpful if this video does well I'll probably do more content like it let me know in the comments if you enjoyed it because this is very different from the usual stuff we put on this channel trying out the CEO influencer now but uh we'll see how that goes speaking a little bit from experience with the Y combinator stuff I did at the beginning of the year but yeah if you like this definitely let me know and there will be other if there aren't other videos like this check out the Y com major startup school and all the cool stuff on their channel it's surprisingly good and super underrated thank you




## The People Who Hate Code - 20230706
do you really like programming be honest I'm not going to judge the thing I think about a lot I know I'm one of those lucky ones who genuinely loves the field I was surprised at a young age because I didn't think of myself much as a computer person certainly not as a programmer but the more I did it the more I felt like I could control the computer and make anything happen the more I fell in love and I'm curious how many developers feel that same way more and more I've been seeing people pushing back on the idea that developers should love their jobs and specifically making fun of those who do and I don't think that's fair my whole career went out of my way to acknowledge the difference between developers who spend all their hours outside of work deeply digging into topics and developers who kind of just clock out after their eight hour day both can be incredible developers and bring a ton of unique value to a team but there is a difference between them and I think it's important to acknowledge that and not shame someone for being on the other side of that fence for a lot of people programming is just a job and I'll be honest I kind of struggle to relate with those people nothing against them it's just that I'm here here because I love it I genuinely enjoy sitting here talking about software for hours a day and as soon as the stream's done I'm gonna go hop into Twitter space and do the same because this is what gets me up I genuinely enjoy it and again I didn't think I would What it Took was projects I was excited about when I had things I could build and software could unlock things I wanted for me it was a Minecraft server suddenly code's ability to unlock infinite potential became impossible to ignore and I went from spending my days after work skateboarding trying to do new tricks for the first time to coding and trying to build things for the first time it changed my approach to honestly everything and it's a huge part of how I ended up where I'm at now the difference in me from before I really enjoyed programming where it was just a thing I did for Class Credit to when I saw what it could unlock for me and started to genuinely really love it the difference is so Stark that I hope anyone who can make that transition does because this stuff can be so fun and exciting but again I don't think every engine engineer needs to be because there's a lot of code that isn't Fun to write there's a lot of code that needs to be maintained but no one wants to touch there are still thousands of Companies shipping Cobalt and for people who programming is just a job the difference between a fun JavaScript stack and an ancient rod and Cobalt stack the it's the quality of the Styles and the documentation they're reading and that's honestly awesome in some ways it's a superpower being able to look at all of these different Technologies and just see them as burdens rather than exciting opportunities because now you can take money and convert that money effectively into maintenance for things that other people might not want to touch and crazy enough some of the most talented developers I've met fit under this there are people who just naturally get how computers work like the lines of code just click for them they can learn a new language in minutes and sometimes those people don't actually enjoy it much it's just a thing they figured out they had and they're doing the code thing because they know it makes money and those end up becoming some of the most valuable people on your teams because they're willing to do almost anything and if you're in a leadership position it's really important to acknowledge these two type types of developers and if you have both on your team make sure they're working on the things that are the most effective for their way of thinking if you have a new library you want to introduce to your code base maybe give that to one of the young guys who's really hyped to code every day and if you have to maintain or rewrite the unit test for this old thing because the package got updated give that to one of the people who doesn't care as much the amount they care doesn't determine how good of an engineer they are just determines what motivates them and where their strengths are and if you're building anything of value then both of those types of engineers are going to be uniquely useful at different points in your products and companies Journeys there is so much value to be had both from a developer who passionately cares about code and wants to learn new things every day just like there is from somebody who learned everything they wanted to 10 years ago and just wants to write the code and go home back to their family and their dog there is no shame here I just wanted to point out that there's a difference here and it kind of sucks when one side makes fun of the other both are incredibly incredibly essential to the success of any real projects in businesses just be cognizant of which side you're on generally speaking anybody watching these videos and hanging out in this community is going to lean far into the learning things for fun side like if you're here and you're not sure which side you're on you're on the learning things for fun site that's why you're hanging out in the YouTube video that's why you're hanging on Twitch chat wherever the hell you're at don't shame those who aren't like us understand that there's a difference and understand we all bring value to the table someone's not actually bringing anything of value obviously don't bother obviously if somebody's not bringing much value this doesn't apply but if somebody's the only reason your old code base is working it doesn't matter that they don't want to go learn the new server component stuff or play with felt on the weekend they're still a great engineer if you want to hear more about my takes on what makes engineers in particular engineering managers great I have a video All About That there for you to check out thank you as always peace




## The Post-AWS Future - 20231129
will AWS still be here in the future the short answer is no the medium answer is kind of and the long answer well that's the video so let's get to it I think we're in the middle of a massive change across the entire development industry for a long time companies have scaled up by taking the core teams focused on things like back end and front end and growing those teams but since what I'd honestly say is the Facebook era we've moved away from that and towards small vertical teams there might still be a backend engineer and a front end engineer or even a handful of them on a given team but the team's no longer named after the technology you don't have a giant backend team and a giant front end team at Facebook instead you have small vertical teams that solve specific problems and build Solutions directly for the users those small teams have their own product managers their own designers their own front end and backend engineers and sometimes they'll work with platform Engineers that might help make it easier to deploy things and keep stuff consistent across big projects but generally the average engineer at one of these companies is working on a vertical team we've seen Facebook adopt this model we've seen Amazon adopt this model we've seen twitch adopt this model that's where I became familiar with it we're seeing it become more and more common in the industry on top of that we're seeing more specialized Solutions start to be formed for the last however long we've been building software we've been focused on making generic enough solutions to work for as many people as possible building software is hard and the amount of time it took to make a solution to a problem made it hard to justify niching it to a specific group of people you can build a solution that worked 9 out of 10 perfect for 40% of people or you can make a solution that worked five out of 10 perfect for 90% of people makes so much sense to do the ladder well it did until we started seeing those specializ solutions that are so much better for specific types of users AWS gives a solution for the vast majority of developers and the vast majority of problems you could have trying to ship software however there are things that solve specific problems better if you want to serve live video sure you can use AWS for that and they have a video product within IVs it's obnoxious to get set up the quality is really good or you can use MX A specialized video product that does just this it is way easier to set up and get going and man the quality is pretty good too or we can look at something like web hosting AWS has both the cdk and amplify there's some complex relationship there I don't feel like diving into you also have options like for sell and nfy and with those Solutions you just sign in with GitHub click a repo and they'll deploy it on AWS for you there's a lot of services that solve our problems better that are built on top of AWS theoretically in the future they could move off it but it doesn't really affect you as an end user because you're just using this nice abstraction on top and I don't think adws can really compete with that the amount of focus and dedication it takes to solve a problem near perfectly for a specific set of users isn't within the model of AWS they're not trying to make perfect Solutions they're trying to make one siiz fits most solutions and as an industry we're trying to get things done faster if we go back to what I was saying before about those small vertical teams they shouldn't have to rely on these platform teams if you look at a place like Facebook a lot of the platform team people are essential to those vertical team success and they're constantly working back and forth I know at twitch I was working with the browser clients team that managed the major repo for the core website and constantly pushing things trying to make changes get hooks adopted and all that type of stuff but we rely on these teams due to the complexity of the thing they are building on top of and the abstractions they're trying to give us I think the future is not going to let that slide the feeling of having a solution that perfectly solves your problem nothing hits quite like it the first time I felt this it gave me the confidence to go from a multi- hundred person company to a 10 person company then eventually to where I'm at now with a two person company and I don't feel like we're moving much slower if anything in a lot of ways we're moving faster because we're using these tools that have effectively abstracted that platform team verel recognized that so many companies were forming this team just to get deploys right that they built a product that does deploys better as the industry gets more Niche I would expect more more companies to not be focused on solving a problem for everybody and instead be focused on solving a problem for a specific set of users they understand really well as such the theoretical profit of that company is much lower let's be realistic here there isn't a world where versel makes more money than AWS there really even a world where verell makes as much money as AWS they just don't cover as large of a set of customers but if they have a smaller focused team and they solve those problems really well they can still be an incredibly profitable company a multi-billion dollar company without too much struggle I don't think we're going to see another company the size of Microsoft or apple or Amazon anytime soon if ever at all that type of super growth of taking over a gigantic segment that every company relies on that isn't the future because people can now build Solutions so quickly for more specific users that you'll never pull them over nobody can take down AWS in a way that I would move over when I could use Planet scale built on AWS forel built on AWS and all the other things I talk about on the Channel all the time it would be nearly impossible to build a solution that gets as ubiquitous as something like Amazon going forward so when I say a future without AWS I'm not saying something's going to replace AWS and become the new biggest thing I actually think big things are going to be much smaller and new companies going forward aren't going to reach these multi hundred billion dollar valuations they're going to be lucky to unicorn but I think we'll see many more of these smaller 100 million to billion dollar companies that have smaller teams solving problems really well rather than these giant companies that are building teams that are bigger than the last two companies I worked at to solve some problems that only they face internally it just doesn't seem realistic to me when a five-person team can build an incredible focused product that a 500 person team would be able to solve that problem better smaller teams allows for more focus and Agility in tools like versel Planet scale clerk axium up stash and everything else we talk about here they let you move so much faster and that small team doesn't need to hire a bunch of platform people just to deploy and scale their apps anymore companies that are choosing to keep doing that themselves companies that are deciding to roll their own infer teams and deploy kubernetes to their five users they're not going to be able to keep up because a two-person Team Auto playing when they merge via vercell can solve their users problems so much faster build a tighter feedback loop and result in better software and better solutions to the problems that users have I firmly believe we will always move in the direction of what's best for the user we might have ups and downs but we'll always Trend towards that and I don't think AWS is the path there that doesn't mean we're not going to be using AWS it just means a small number of people will be using it and then selling as Solutions built on top my life's been much better since I haven't had had to sign into the AWS console I can't imagine a future where we keep doing it sure they could go make it look much nicer but that's not the issue here it's one of focus and understanding of users needs AWS is going to be replaced by hundreds of companies building on top that solve the specific problems that you have now and I think that's an exciting future what do you think though are you excited about a future where AWS is being replaced by all these weird simpler focused Solutions or do you like having that AWS certification and the One-Stop shop to solve all your problems if you think that this solution is going to be way too expensive well I quite the video there to tell you all about why it's actually cheaper than you expect thank you guys as always really appreciate it peace nerds




## The Problem With UUIDs - 20240507
this video is sponsored by Planet scale I've wanted to do a video about uyu IDs for a while so much so that this is my third time filming it over 2 years last time I filmed it was on my couch in my old living room and the time before that was a random stream filming like kind of what I'm doing here neither of these were good enough for me to release because there's just so many details about uyu IDs I wanted to make sure I got right and even though one of those videos was edited I never ended up posting it and I wanted to take the time to get it exactly right thankfully I don't have to because one of my sponsors Planet scale actually went and did it for me they made a phenomenal blog post the problem with using a uid primary key in my SQL that I want to use as a starting point to have this discussion Planet skill does sponsor the channel and they are sponsoring this video but they have given me no input whatsoever I don't even think they know what I'm covering here they just wrote this blog post knowing I wanted it as something to cover and now I get to cover it so yeah I know Planet scale is a bit of a spicy topic right now but they're still a phenomenal resource for a lot of Education stuff and this is a good blog post to start with so let's go in the problem with using a uid primary key in MySQL understand the different versions of uu IDs and why using them as a primary key in MySQL can hurt DB performance interesting is going to be a performance thing I'm even more Curious now I'll lay out my biases ahead of time I think having the ability to order your IDs is particularly nice when you can and there's a lot of cases where it's nice to know when something was created and using the time as a way to make your unique values more uniques Not a Bad Thing cuid V2 in particular is something that I'm a bit of a shill of that I've been pushing pretty hard for a while now and I'll probably be coming back to cuid 2 during this because it is my goto my preferred standard for IDs although I have rolled my own both with my own crazy requirements as well as following along with the things that planet scale recommends but I'm curious what they're recommending here universally unique identifiers also known as uu IDs are designed to allow developers to generate unique IDs in a way that guarantees uniqueness without knowledge of other systems this is the key piece here where uu IDs are meant to be so unique that if you generate them in multiple places at the same time the likelihood of a collision is effectively zero that across the whole universe you'll never generate the same ID twice there have now been multiple times that uu IDs collided so this is just sadly not true when you also add in the fact that random number generators aren't always particularly random and those are being used to then generate these uu IDs things can get messy fast yeah sadly the universal promise of uu IDs for many reasons has not been true for a bit thankfully these things are changing I already see people in chat dropping that the version 8 fixes some of the issues I was talking about around time I'll open this up so we have it to reference in a bit but as someone else already pointed out as well if you need eight versions of the standard to make it right it's probably the standard that's awful to be determined let's keep reading these are especially useful in distributed architecture where you have a number of systems and databases responsible for creating records again very handy when you have lots of things writing to your database at once if they're all writing with the same ID generator those can never Collide if two things are trying to write to the database at the same time with the same ID you're you might think that using uyu IDs as a primary key in a database is a great idea when used incorrectly they can drastically hurt DB performance and here we go let's see how this can affect things in this article you learn about the downsides of uids as primary keys in your mySQL database I am almost positive this isn't just for MySQL either way I promise this video will be valuable even if you're not a MySQL Dev and you're just using other SQL Solutions or maybe not even SQL at all I want to talk about these idas they're very interesting and contrasting the different solutions is something we can all learn from the many versions of uu IDs at the time of this writing there are five official versions of uu IDs and three proposed versions so that V8 by the way that's not official yet six seven and eight are all proposed still yes there's three future versions proposed that we haven't accepted yet V1 is known as a time-based uid and can be broken down as follows we have the Time Low Time mid Time Low inversion clock sequence inversion so this is where some of the random comes from and then the general random node while much of modern Computing uses the Unix Epoch time which is January 1st 1970 God imagine how convenient it would be if you were actually born on January ver 1970 like every system would be very trivial it would almost be like free to mathematically compute your birthday anyways since that's the base uids actually use a different date of October 10th 15 why why would you use your own thing I didn't even know this what which is the date that the Gregorian calendar started to be more widely what did anybody hear know already what October 10th 1568 was the start of the calendar okay somebody said it in chat that's the start of the calendar one person knew it this feels like it's meant to be a like a a pop quiz type thing not a technical implementation detail what the what the is that like that's ice spice's original birthday like this feels like somebody putting in like the well actually the calendar started in 1568 so that that should be our starting point you never know and somebody might need to generate an ID in the 1600s even though we're inventing this in the '90s yeah anyways I don't want to talk about goryan calendars I want to talk about uu ID which we'll do here the embedded time stamp within a uuu ID grows in 100 nond increments from this date which is then used to set the Time Low Time mid and time high segments of the uid the third segment of the uuid contains the version as well as the time high and it occupies the first character of that segment this is true for all versions of uu IDs as shown in subsequent examples the reserve portion is also known as the variant of the uid which determines how the bits within the uuid are meant to be used finally the last segment of The UU ID is the node which is the unique address for the system generating that uu ID most of the little bits here like the reserved and the node not super important but the node is how it knows which of your systems was the one doing the generation so about V2 next version two of the uid implemented a change compared to version one yeah no obviously version two is changing things from version one duh That's How versions work anyways imagine if it didn't change anything if version two implemented no changes compared to version one that would be more interesting that's something I'd put a sentence in here for but since it changed something let's see what it changed the low time segment of the structure was replaced with a posix user ID the theory was that these uu IDs could be traced back to the user account that generated them this sounds like a terrible idea this sounds like an atrocious idea I don't know why they would do this since the low time segment is where much of the variability of uu IDs reside replacing the segment increases the chances of collision as a result this version of uu ID is rarely used yeah I would hope so this is a disaster uuid V3 and V5 versions three and five of uids are very similar I dislike that three and five are similar and four isn't this kind of feels like what happened with like the Final Fantasy versions where like most Final Fantasy games have nothing in common but then like seven and 10 have two characters that are overlapping even though different universes this is chaos versions three and five of uu IDs are very similar the goal of these versions is to allow uu IDs to be generated in a deterministic way so that given the same information the same uu IDs can be generated I'm getting more scared as this goes these implementations use two pieces of information a namespace which is itself a Hu ID oh boy nested U IDs yeah it's going to go well so we have the name space as well as a name these values are run through a hashing algorithm to generate 128bit value that can be represented as a uu ID the key differences between these versions is that version 3 uses an md5 hashing algorithm and version five uses an S1 oh boy so how is four different cuz four is what I see basically everyone using version four is known as the random variant because as the name implies the value of the uid is almost entirely random how how did we let this happen by the way how are V3 and V5 including meaningful information and we just have this one version between the two though it's like yeah what if we just made it all random that will solve the problem and there's since been a six and a seven proposed and I hope we get to those in here so version 4 is the one that almost everyone uses because it's entirely random the exception to this is the first position in the third segment of the uuid which will always be a four to signify the version used so if you see a four in this third section and it's eight digits four digits four digits this is a four it's probably a uid before version six and here's where we get into those ones that are proposed version six is nearly identical to version why we have to diagram this so v1's become V6 V3 has for the most part become V5 and then V4 is what we actually use does this correctly explain the history of uuid versions up to V6 so far because it only gets worse from here this is our starting point back to this article version six is nearly identical to version one the only difference is that the bits used to capture the time stamps are flipped meaning the most significant portions of the time stamp are stored first so time high is now in the front revolutionary huge the graphic below demonstrates you yeah yeah cool makes sense the main reason for this is to create a value that's compatible with version one while allowing these values to be more sortable since the most significant portion of the time stamp is up front this was an attempt to make uid sortable and it failed if you want a sortable uuid you probably want a CU uid we go there in a bit though now for version 7 version 7's also a time-based uid variant but it integrates the more commonly used Unix Epoch timestamp instead of the Gregorian calendar used by version one progress be cool if they use like primagen birthday or something that's pretty close to the like Epoch time for uh Unix right those would be pretty close the other key difference is that the node which is the value based on the systems generating the uid is replaced with Randomness making these uids less trackable back to their Source also cool including the system that's generating the uid is disgusting very happy that they have ditched that but now we have to update our diagram to include V7 which um is I guess most accurately represented by breaking off this fixes cool keep going uid V8 version 8 is the latest version that permits vendor specific implementations while adhering to RFC standards oh boy let's solve the problem by letting everyone introduce their own problems that sounds great the only requirement for uid V8 is that the versions be specified in the first portion of the third segment as all other versions so uui v8's barely even a standard if I'm understanding this correctly apparently I broke where V3 is pointing yeah V3 should oops oh star to do there fix that so V3 is still pointing at V5 and I have to add V8 which when I add it's going to move all the arrows we love that so fix that so it's pointing there I'll fix this again I want to properly emphasize that this one's like imaginary this is barely a standard more A vibe cool I think that accurately communicates how I'm feeling thus far I wanted to maybe change the font family of V8 but I there's nothing here that is what I I want for it this looks like a Kingdom Hearts playthrough chart you're not wrong yeah uh I'm not going to go any further if you know you know anyways air from V4 to V7 does does V4 go to V7 it seemed like it's based on version one and V4 is its own thing that doesn't have any of the date time yeah it's almost entirely random the only thing that in V4 that isn't random is this digit everything else is random and all of the others time is faked in which is why V4 is so different oh so so V7 is version one plus version 4 with the random so I guess yeah the other key difference is that the node the values based on is replaced with Randomness so there a little more random there's just the node is random which the node isn't a big part okay I guess the no's a big part fine the no's a big part I guess by technicality that V4 does kind of also go into V7 cool looking better by the minute guys sure that yeah this will defin defitely not confuse anybody anyways let's keep reading this post we're going to be here forever yeah the version 8 is a Vibe it's not a standard let's see how we're actually using this uu IDs and MySQL using U IDs mostly guarantees uniqueness across all systems in your architecture so you might be inclined to use them as primary keys for your records be aware that there are several trade-offs to doing so when compared to an auto incrementing integer interesting that they're comparing to Auto incrementing integers primarily we we'll see where this goes I'm not necessarily the biggest fan of just using ins as our database IDs but we'll see what they have to say insert performance whenever a new record is inserted into a table in MySQL the index associated with the primary Keys needs to be updated so querying the table is performant indexes in MySQL take the form of a B+ tree which is a multi-layer data structure that allows queries to quickly find the data that they need there's a bunch of words for their going through the IDS in fancy data structure formats to actually find the things you're looking for the following diagram shows what this looks like with six entries with values from 1 to six a query comes asking for five my equal will start at the root and know from there if it has to Traverse to the right for what it's looking for cool this is a standard binary tree instead of a B+ tree the key difference is a B plus tree the leaf nodes contain a reference to the data while on a b tree the leaf nodes do not cool be balanced not binary sorry brain fart it happens make fun of me in the comments anyways B tree we have four is where we're at and it points in the two different directions one is to where 1 2 and three are and the other is to where five and six are so we're looking for five and we're starting here we know we need to go to the right and we'll find it pretty quick cool if values 7 through 9 are added my SQL will split the right node and rebalance accordingly so now once we have these new nodes we split the tree so we have four and seven and we know four points to 1 2 3 on the left and five and six on the right and seven points 5 six on the left and 8 n on the right process is known as page splitting and the goal is to keep the b+3 structure balanced so that MySQL can quickly find the data it's looking for with sequential values this process is relatively straightforward however when Randomness is introduced into the algorithm it can take significantly longer for my to rebalance the tree on a high volume database this can hurt users experience as MySQL tries to keep the tree in Balance learning things already oh boy yeah things for us to think about for our databases cool for more information about how B+ trees work we have a dedicated video in our MySQL for developers course good to know yeah RP Aon who created this wonderful course that is fully freely available highly recommend checking it out if you haven't it's one of the best ways to learn SQL and it's dope that they made this free I have actually considered doing this whole thing myself as a video just to show you guys how little I actually know about SQL and how much I can do with it but uh someday anyways oh we even have people in chat saying that that video by Aaron is dope and worth watching so very worth checking out higher storage utilization this I'll be honest is something I care about a lot less overall but I'm curious how important they think it is all primary keys in my SQL are indexed by default an auto incrementing integer will consume 32 bits of storage per value compare this with uu IDs if store in a compact binary format a single uu ID would cons consume 128 bits on dis already that's four times the consumption of a 32-bit integer If instead you chose to use a more human readable string based representation each uid could be stored as a care 36 consuming a whopping 688 bits per uuid I can't remember last time I broke a sweat over 688 bits anyways this means that each record would store over 20 times more data than the 32-bit integer it's a record it has other things on it yes it adds up but if I have like a URL or a username or a name on these things it can get big this does get bad for indexing though which is I'm sure what we're about to get to in addition to the default index created on the primary key secondary indexes will also consume more space this is because secondary indexes use the primary key as a pointer to the actual row meaning they need to be stored with the index this is a good point in order for a an index that will help you find data in your database faster to work it needs to have all of the IDS as well so if you now for all of your indexes have to store 20 times more data your database indes are suddenly massive and also have to be held in memory so that they can be performed and if these are moving to disc cuz they're too big now you're getting yes I understand this can lead to significant increases in storage requirements for your database depending on how many indexes are created on tables using uuids as the primary key this point alone is big enough that I'm I'm swaying my my feelings here you're making good points finally page splitting as described in the previous section can also negatively impact storage utilization as well as performance INB assumes that the primary key will increment predictably either numerically or lexicography lexicographically I was going to assume this is lexor graphically but the lexico well I have to worry about prime reading this article if true INB will fill the pages to about 94% of the page size before creating a new page when the primary key is random the amount of space utilized for each page can be as low as 50% also huge due to this using EU IDs that incorporate Randomness can lead to excessive usage of pages to store the index okay I've seen this this is funny because this is a case against the one good type of ID which was V4 and now it's saying that the randomness means that you have to store significantly more data Jesus yeah good to know best ways to use a uid primary key with SQL you absolutely need to use uids as the unique identifier for records in your table there's a few best practices you can follow to minimize the negative side effects of doing so first is you can use the binary data type well uids are often sometimes often sometimes I just thought I was having a stroke for a second uh this is not a sentence I feel yeah no I don't think the author had a stroke I think the author made a typo or deleted the wrong word and it made me feel like I was having a stroke but yeah while uids are often represented as 36 character strings they can also be represented in their native binary format as well if converted to a binary value you can store it in a binary 16 column which reduces the storage requirement down to 16 bytes this is still quite large compared to a 32-bit integer but certainly better than storing the uid is a care 36 bits versus bites by the way I'm not telling you what the difference is there that's your problem hopefully you know that if you made it this far in anyways here we have a table of uu IDs U ID is character 36 binary binary 16 inserted with both and we can see that as binary it's able to represent it much smaller and take a Plus data good to know next option use an ordered uid variant using a uid version that supports ordering can mitigate some of the performance and storage impacts of using uids by making the generated values more sequential and by doing such you are able to avoid some of the page splitting issues described earlier I don't really recommend using uu IDs as a primary ID unless you're doing something like this I'm going to use this opportunity to plug CU ID which has been my go-to for this type of thing for a while if I want like a big unique ID that can be written from any of many different places without having to worry about collisions Co ID is proven to be a very very good and secure solution which allows me to sort properly so it handles a lot of these problems but it's also handling a ton of uniqueness which significantly lowers the chance that you'll have cion you'd have to reach some crazy multi- trillion trillion number to reach 50% chance of having a collision insane oh I forgot uh it's not good for sequential because it's not technically sortable as a V2 apparently they disagree about the sortabad at Fields instead according to this author since we have created at fields we don't have to worry about sorting this is something that is a big disagreement they even call out here that one of the reasons to use sequential Keys is to avoid ID fragmentation which can require a large amount of dis space for databases with billions of Records however at such a large scale modern systems often use cloud native databases that are designed to handle terabytes of data efficiently and at a low cost Additionally the entire database may be stored in memory providing fast random access Lookout performance not if you can't fit it in memory because you're using a giant ID standard and have to index it all over the place yeah this is where these disagree if we go back to this diagram if you can't sort the ID you can't split the table up logically based on an ID so if somebody wanted to look up ID 4 and they have to find that through your crazy tree and you can't use the Sorting of the IDS to do that now you have to look through everything to find your way there utter chaos as such I yeah I don't like that these disagree because no offense to the cuid guys CU as you all know I massively respect y'all and I use cuid for a bunch of the fact that they have backed out of having sort ability is scary there is a fair point that they can cause hot spots in the database like if you have a system that generates a large number of IDs in a short period the IDS will be generated in sequential order causing the tree to become unbalanced which will force frequent rebalancing the counter point there is that the rebalancing is much more expensive if the IDS can't be like quickly identified as which way they go if the value is going in a random you have to rebalance much more often because as they said when a primary key is random the amount of space utilized for each page can be as low as 50% so you're rebalance Bing almost twice as much off of this alone so like yeah it's cheaper to do the rebalance with sequential IDs than not I'm I'm not vibing with the cuid post anymore and it's crazy how quickly my own stance on these things is changing as I read this so yeah I happy that I'm reading this and that we're learning so back to this bit of using a ordered uid variant because apparently my cuid V2 is not something I can rely on anymore using a uid version that supports ordering can mitigate some of the performance and storage impacts of using uids by making the generated values more sequential which avoids some of the page splitting issues described earlier even when they are being generated on multiple systems time based uid such as version 6 or 7 can guarantee uniqueness while keeping values as close to sequential as possible the exception to this is uid V1 which has the least significant portion of the time stamp first uid V1 was such a fumble in so many ways I can't believe they recovered from that funny enough the main reason people are recommending cid2 specifically the original maintainers of cv1 is that by having the IDS be sortable and auto incremented they believe this introduces security issues like unauthorized password resets via guessable IDs unauthorized access to gitlab Via guessable IDs unauthorized password resets via gu ID all things that our friend Eva absolutely loves I haven't seen her say anything in the last few seconds so I'm going to go through her chat history where she said some stuff about this earlier love uu IDs from a Dev perspective I like incremental IDs as a security pentester not because they're good just because they're easy to pentest yeah it's a lot easier to test things when you can guess IDs just by generating them yourself that said if your service can be compromised through an ID being known you need to rethink the way that service works because it should take a lot more data than that IDs are still ID even if random yes if your IDs are all it takes to compromise your system then you need to fix that not the ID system itself I get it now we want super small performance sortable unique access across the world support a fast access insert removal Etc okay simple yeah super easy go build it shouldn't be that hard at all anyways other options that are provided here are using the built-in MySQL uid functions probably an option worth considering I'm sure that their implementation is better never mind how does anyone take the standard seriously I yeah while it is not a great practice to use them by themselves there's a helper function in my SQL called uid to bin not only does this function convert the string value to Binary but you can use the option swap flag which will reorder the timestamp portion to make the resulting binary more sequential [Music] I'm going insane and the other option use an alternative ID Type U IDs are not the only type of identifier that provides uniqueness with a distributed architecture consider that they were first created in 1987 there has been plenty of time for other professionals to propose different formats such as snowflake IDs UL IDs and even Nano IDs which is what they use at Planet scale I actually really like this post I don't know if I've covered this before but I use Nano IDs for a bunch of random stuff because of this post they even have a little Link in here the Nano ID Collision tool that is super useful as you restrict things because something I did with RS is I didn't want to include lowercase letters because I didn't want users to have to like if they're typing in a a page based on the ID which was a real use case for what we were building I didn't want them to have to worry about those characters so I deleted all of that so it's just letters and numbers and I also think I got rid of zero and O because they look like numbers I think I got rid of I too for the same reason to make it a little easier to to read this but now that we have that we can pick different lengths and see how long it takes for a 1% probability of a collision and you can even change the speed at which you're generating over that time too super super handy tool if you want to generate your own Nano IDs and like know how realistic it is to hit a collision I liked this a lot so check out that post if you're curious about more there so yeah they recommend all of those options all of which make sense did not know snowflake IDs were just numbers and like really big ones interesting conclusion using a uid primary key in MySQL can nearly guarantee uniqueness in a distributed system however it comes with several trade-offs luckily with the many versions available as well as several Alternatives you have options that can better address some of these trade-offs after reading this article you should be in a better position to make an informed decision about the ID that you choose to use while architecting your next database yeah this is pretty solid let me go post the uid chaos on Twitter quick thank you to the Kingdom Hearts referencer earlier that will live in my head rentree forever that's all I to say about yuu IDs I'm so happy this video is finally done and people can stop asking for it let me know in the comments how you feel and thank you again to Planet scale for letting me finally put this one to rest once and for all and more importantly showing me that cuid has the same problems as well and until next time peace NS




## The Quest To Destroy Prettier - 20231118
prettier is one of the most important tools of the last 10 years of software development especially for those of us in the JavaScript ecosystem I cannot tell you how much time I have lost to bickering with my team over formatting decisions and best practices for how we should structure our code and so many of those conversations immediately went away when we started using prettier similar to what go has with go format and elixir as well I think a good core formatter that makes these types of decisions for us so we can focus on writing our code is essential both in our day-to-day writing code when you save and have things format themselves I really don't press the enter key a whole lot anymore but also when we're doing code review and maintaining code at scale with large teams having prettier or something like it to enforce a specific format for your code makes it way easier to review code because everything tends to look much more similar and not having to map your brain to different formattings not having to bicker about these things as a team not even having to format your code yourself when you're writing it you just save in it formats these are massive massive wins and I want to make sure we call those out for what they are because they've changed how we write code that doesn't mean prettier good enough and I'm not even the one saying it because vies the creator of prettier is now putting up bounties for people to make prettier better in particular he just put up a bounty for $10,000 if anybody rewrites prettier in Rust with 95% tests passing in the JavaScript tests which means it takes code that is formatted incorrectly and then puts out the correctly formatted code which obviously they've written a ton of tests to make sure this is the case this is a pretty big Bounty and I hope somebody collects it because you can make something really fast here that said GMO personally matched it so there's over $20,000 in this bounty right now if anybody's able to make a prettier equivalent in Rust that's that fast but this is also 100% prettier compat there are other Solutions and we'll talk about all of those in a minute but I want to talk about prettier first and foremost it's all these people making these additional contributions which is great somebody asked why not other languages and he said that the ability to work it on it and maintain it over time how easy it is to install other platforms How likely other pars are going to be implement mented these types of things that's why he picked rust but he's down for people to do other things as well biome gets mentioned here as does dprint but none of these Solutions are prettier none of them do everything prettier does but all of them are slightly faster what I did see that was really exciting I don't think it was replied here what I saw here was Fabio proving that you can actually do this pretty quickly 3 days later people have spoken very early results but in this very specific scenario the experimental rewrite I'm working on is two times faster than prettier if there's no cash 10 times faster if there is a cash cash and four times faster than dprint if there's a cache sounds pretty promising right important detail this isn't in Rust this is a JS only CLI wrapper on top of prettier to keep 100% backwards compatibility no native apis no rust no wasm no parallelization no bundling no minification no snapshots so there's almost nothing to do should go at the speed of light yada yada when there's a cache and you already know the state of all the files you should be able to go immediate and it's a great meme we need this to run faster rewrite it in Rust rewrite it in Zig use basic caching and work skipping yeah it's dope to see this type of focus because again the ask was why not just rewrite it in Rust here's a bounty for it and here's Fabio making something comically faster without touching native languages at all without even changing the original code just writing a CLI on top of it so that it's only called when it needs to be called it's important to understand prettier is not the only option for code formatting there's also biome JS and dprint dprint is a little older and a little further along so I'll focus on this part first dprint is a rust based configurable code formatter similar to prettier Works basically the same has different defaults and a couple more expectations around what it can and can't do but it's really really fast a node API for the dprint typescript and JavaScript code formatter cool and we see here prettier gets 450 operations per second and dprint gets 12,173 that's a pretty absurd difference and dprint is cool it's just way more minimal and doesn't have a lot of the plugins and functionality that we expect as JavaScript developers even just like the vs code plugin type stuff isn't where things are at with prettier but it is a real option it's cool to see it getting more support but it seems more and more like people are putting their money on biome if you're not familiar with biome you might be familiar with their logo because biome is a fork of Rome a lot of the original Babble team wanted to improve the state of Tooling in the JavaScript ecosystem and they chose to from scratch rewrite a lot of our core tooling that included linters that included compilers but importantly here that included formatters and Rome was building all of this from scratch in Rust it seemed like a good idea at the time they ran out of money the project failed but a couple of the maintainers weren't ready to give up and one in particular broke off and made biome an open source Fork of the previous Rome project that is going way harder to try and solve these same problems their first example is format their second example is lint and I don't think they're as focused on the compilation stuff at the moment because these problems need to be solved so badly and with stuff like es M competing there is painful also with bun around and it seems like they have made the conscious choice to focus on these pain points points that aren't getting addressed being linting and formatting and the core contributors of biome accepted this challenge because they want to make something incredibly fast and you even see both Vues and gyo in the replies here offering their support because we all want biome to succeed it would be absolutely dope if they could get a rest rewrite to the performance levels necessary to really really change what we're using somebody linked a benchmark from biome formatting biome is 25 times faster than prettier 20 times faster than parallel prettier 20 times faster than x-p which is don't even know what that is cool for smarter than me biomes 1.5 to two times faster than dprint and it's single threaded mod is seven times faster yeah then their linting numbers are pretty nuts too 15 times faster than e which is a very single threaded solution so having that type of performance makes sense when you're parallel I am hyped to see this effort being put in I really want these tools to be fast especially on the linting side which I feel like isn't getting enough love here the eslint team is exploring what it would look like to rewrite eslint with native languages that perform a bit better but for now the focus is on the formatting side and these new Solutions are all looking really good so I'm hopeful for a future where our formatters and our linters aren't running JavaScript because we could do so much better for those types of tools file parsing is not something that we should be doing in non-native languages if we don't have to and as much as these tools have enabled us to build an incredible developer experience we've also had to deal with the performance issues that come as you continue to build these into bigger and bigger things and I'm so excited to see this type of effort not just from the community but from the creator of prettier himself Vues pushing for us to improve the state of these tools it's always awesome to see maintainers recognize when their tool has been used a little too much and has gone a little too far and make these opportunities for the community to make something truly significantly better again huge shout out both to the prettier maintainers as well as the people who are contributing to the Bounty but most importantly to all those developers working hard to make better tools for the future of web development I'm so excited for these typ of problems to continue improving so our experience writing and maintaining code continues to be better next year than it was this one thank you guys again for watching this if you want to hear more about prettier and linting and the difference between formatting and linting I'll pin a video in the corner cuz you're probably doing it wrong if you've already seen that or you're not interested YouTube thinks you like the one below it thank you guys as always appreciate youall a ton peace NS




## The Quest To Kill `dotenv` - 20231114
environment variables the passwords of development we've all had to deal with environment variables be it things that we're passing in at runtime files that are named in all sorts of different ways and the many different packages to try and get those dot files to actually appear in our projects the way they're supposed to I'm sure I'm not the only one here who has had a lot of problems getting environment variables to work correctly across many different projects even just now I just came back from a quick stream break and my CTO was asking questions about the different environment variable behaviors between V Next and vanilla next and react applications it's it's not consistent we rely on everything from weird prefixes to build steps to five different packages with different expectations around how these files and folders are named we just kind of hope it works and it doesn't but how do we get here we got here cuz node didn't support environment variables built in you could pass a flag when you ran the node command but you couldn't read them from a file and if you wanted to pass around a configuration with things like your database credentials to different members of your team good luck thankfully we have packages that do this well most of the Frameworks that we use have their own built-in environment variable stuff but what if we didn't need any of that what if node just supported andv files well as of node version 20.6 it finally does after almost a decade of having to load the environment files in weird ways we finally have built-in environment support it comes with some cool features too so let's take a look shout out to West boss for the tweet that let me know this is finally dropped it did numbers and as you can see it's pretty simple he also shows off the really cool feature here which we'll get to in a second but now when you call your node command to run something you can pass it d-v file which is an environment file it will read things from that it doesn't just read things like password that you would want to pass as values into your application it also can read node options so you can tag all sorts of different things within your project things like debug values things like in that example the inspect option for getting more for Bose logging and digging into your node stuff like being able to control how node behaves by passing different environment files means we can do some really cool stuff with our project configurations going forward once again I've been corrected by chat so if you want to bully me make sure you watch my live streams as we see here note options can be set so I tried to recursively set EnV file equals. EnV dodev so we're going to run this again here I'm trying to manually configure note options doing something a little silly here I'm going to recursively call the EnV file argument through this EnV call let's run that real quick huh oh once again someone watching isn't subscribed you all know subscriptions are free right they help the channel out a ton it's a little red button under the video if you haven't already clicked it give that a click for all this awesome help that I'm putting way too much time into making anyways and now we have the error that I probably should have gotten way before EnV file is not allowed in node options which is sad this is probably the only argument they don't let us pass here we do other things like inspect but now we get the node debugger coming through as well which is really handy to be able to do through your environment I know know that like in a lot of projects I work in I don't fully trust the thing that I'm running it through like the next Runner like like how would I run inspect on a next project but if we were using this built-in and I could just have a built-in node options equals inspect then I can guarantee that that makes it to node this is really powerful I'm hyped there's a lot of potential here even if it doesn't do the fancy nested stuff that I was excited for does anybody know what happens if I pass two EnV file arguments anybody who says I'm over complicating environment variables has never worked on a big project for more than a couple days this is the harsh reality of developing things that have Integrations you get used to it over the years so we have this file has two things in it we'll Dov we have test equals hello and then also. env. Dev test equals overridden Test 2 equals hello now we can test a couple different behaviors I can also do test only one equals hello again console.log only one process cool so this will test everything at once so no EnV file equals Dov index.js cool so that reads everything correctly here's where things get interesting if we passed two and it only uses the one near the end that kind of sucks it would have been nice if it collapsed all of these because I know a lot of things including EnV will use more than just the one EnV file will also have like env. server env. development env. production and combine those and replace them depending on how you're running things it be really nice if we could have a default EnV and then anything you call after that gets overridden so as awesome as this is it will not cover every use case it only works on one file per runtime know that going in this isn't going to be reliable for everything you want to use it for but for the default majority use case you can now have environment variables without having to deal with these things so somebody said might be commas now nothing works so no it is not commas so I guess you can pass all but one of the options for node through EnV with the new EnV file binding it would actually be really cool if you could trigger different environment files from an environment file but this seems very very shallow it is just for one file we'll see where this goes in the future but for now we're we're approaching a point where we don't need a package just to get environment variables from our files so I just hope we get node 20 support on Lambda within the next year or two because it's the only reason I'm still using 18 if you want to learn more about environment variables and how to use them safely Julius worked really hard on a package and I have a video all about it here for the T3 environment recommendations thank you guys again appreciate yall peace NS




## The REAL Cost Of AWS (And How To Avoid It) - 20230402
I keep hearing concern about the cost of the services I recommend on the channel in particular for low budget teams trying to spin up side projects small apps and all sorts of things saying it's cheaper to use AWS directly and not to use the tech that I recommend and that's fine you're wrong in three ways and I want to talk about those so let's do it the first one is how long you can get away with the free tier for almost all the services I recommend have a very very generous free tier like disgustingly generous I've not shipped a service to date that doesn't fit within versel's free tier even the stuff y'all spam when I post it Planet Skills free tier gives you a billion row reads a month and 10 million row rights a month for free and when you upgrade to the 30 a month plan that becomes a hundred billion reads and 50 million rights do you want to know how much it costs if you somehow go over one dollar per billion reads afterwards and one dollar and fifty cents per million rights thereafter that's insane Planet scale is effectively free your build on how many databases you host not on your reads and rights it's insane how cheap Planet scale is when you scale your databases properly they become cheap and they're passing the cost savings on because they can make their money on the Enterprise scale Planet scale doesn't win based on how much margin they make on their servers per compute they win based on how much they can upsell you on the additional features in developer experience that they provide they found a technical win and they scale developer experience on top and the result is just really really hard to beat and if we look at the other services that I recommend stuff like clerk the pricing is very similar to other professional Solutions like auth zero they have a hobby tier 25 bucks a month that isn't limited to the 5 000 monthly active users of the free tier yes that's right no credit card unlimited sign-ins but up to 5 000 users can exist in a given month and they have pricing for overage yeah included monthly active users they're active if they've visited and then it's two cents for each additional user at the hobby tier five cents for the business tier because they have a bunch of additional features integrated and they have obviously discounts if you do like big business stuff each additional employee that you have working inside of the clerk dashboard is initial 20 bucks but you probably don't need too many of those because you can just share the environment variables and everyone's good to go it's pretty cheap like your free tier window is massive and the rest is super cheap as well the same goes for upstash and Axiom I don't need to go into all the details of all of these the point I'm trying to make is very specifically the free tier carries you really far so what are these other two points the next one I want to focus in on is how expensive you are it's easy for us as Engineers to think of our time as cheap because it's ours and we can spend it however we want but when it comes to stuff like setting up CI and CD correctly or connecting your database in setting up your PG bouncer to handle serverless traffic the types of problems I dealt with when I was using AWS myself took time to solve sometimes days sometimes weeks always including a lot of Maintenance long term and the amount of time I have lost setting up PG bouncers switching databases between platforms figuring out how appsync or amplify and all these other things work and trying to get CI CD linked to GitHub properly is insane we're talking hundreds upon hundreds of hours and whether or not I like to admit it that's expensive if I'm doing that for a company that's more expensive there is a benefit here job security if I have all of this effort I've put into setting everything up and now I have this complex setup that we rely on if I then decide to leave I have to put a lot of work in finding a replacement who can maintain whatever chaos I have set up there if the benefit there is a few less cents a month per whatever depends on how many whatevers there are before that number matters other extremes have talked about the line of prime the point at which a service is stable enough in its feature set and trafficked enough and its usage patterns where it makes sense to rewrite it in a stable self-hosted thing to really try and minimize cost but most of us are very far from that point even y'all working at big companies because most code is changing and the cost of change is high I would venture to bet that the majority of the companies y'all work at it would be more expensive for the company to pay you to build versus developer experience than to pay for sell to use their existing experience and the same goes for everything we recommend on this channel these tools save real amounts of time and that time might not be valuable to you in your head as a developer but for me as a team lead and a person who runs companies and also invests in companies it's important to understand how valuable your engineer's time is so that your engineers can use that time in things that drive unique business differentiators your engineer should be spending time making your product better for your users so you can beat your competition not making your AWS cheaper so that you can feel good about yourself and your job security at night as you're paid 200k a year to save the company 100 bucks a month but we're not even at the most important thing these Services actually save money I'm not talking time saved money I'm not talking free to your money I'm talking the actual benefits of these Services allow you to build things that run at cheaper costs the first thing is scale to zero you're not paying for compute you're not using if you set up your kubernetes and your terraform and everything correctly you can minimize how much compute you're paying for that goes unused but if you're spinning up servers then your running server first and if you're running servers you're paying for a compute that isn't being used period you use services like for sale and Planet scale you're not paying when the month ends you're paying when the users use the service and that billing mechanism makes it much easier to flex your costs based on usage of every single part of what you're building it is significantly easier to scale your pricing based on the scale of your application rather than spinning up things and letting them sit and paying for a bunch of servers you're not actually using on top of that you can save a ton of compute using things like versel's cache Primitives and incremental static regeneration only actually Computing on the server when things have changed or on planet scale using database.js package to hit their HTTP endpoint instead of making a SQL connection meaning you can avoid setting up pools and bouncers and all these other things you normally have to set up to maintain your connection to your database you can just hit it from an edge function and Edge functions are hilariously cheap like let's just go look at Versailles pricing quick for sales edge pricing on the pro tier is 65 cents per million invocations that means every million times your Edge function runs it costs you 65 cents and it only runs if it doesn't have data in the cache already so if you're caching your responses and you're only invalidating them on user requests or specifically interactions like I'm only going to update the posts on my profile on Twitter when I make a new post then every other request is hitting a cache and not actually running compute at all it's so much cheaper to Cache a response than to run a server that processes every single request like comically so in setting up your caching and your CDN all that stuff correctly goes back into the second category of cost savings where you're paying your engineers a lot of money to get that all set up and maintained correctly the benefit of versel in Planet scale and Clerk and Axiom and upstash and all the other T3 deploy Partners who are not paying me to make this video to be very very clear the reason I recommended them before they paid me is because they saved me time money and energy they made it faster for me to develop the right solution for my users at every scale I've ever worked at and I feel like when you all say these things are too expensive you don't actually see where the cost is so I hope this is helpful and y'all having a slightly better understanding of why these services are indeed cheaper than your AWS based Alternatives and if you're hosting your own backends and you're hosting your own Services you better have a damn good reason because you are costing more money the vast majority of the time I hope this was helpful I've been holding this rant in for a while and I think it shows with how it came out let me know what you thought about it I'm I'm gonna love the comment section on this one I'm sure you want to hear more about all the info I use and recommend I'll pin that video right here I put a lot of effort into that one so please check it out thank you as always peace nerds




## The Real Reason Prime Got Fired - 20240609
great example of htx user primagen used to work at Netflix then he learned HTM X and just a few months later he's unemployed don't do that to yourself don't ruin your career for a terrible framework that's not even a framework they say it's a library I say it's a single shitty file JavaScript and clearly the author here agrees come on guys speaking of which if you do actually choose this as a company you're because you have nobody to hire Prime agent doesn't know how to do job interviews anymore so you can't get him and if you're looking for other developers they're all learning real things like Ember




## The Reality Of Tech Jobs in 2024 - 20231228
I'm going to be honest getting a job sucks right now I'm really lucky that I'm not on the market in any traditional sense now that I run my own company I have the YouTube channel and I do a lot of advising for other companies the more I see it from the perspective both of people hiring as well as people looking for a new job or even their first job the market is in a weird and really scary State I've never seen it quite like this before especially with the layoffs and it's not that senior Engineers don't have jobs or opportunities it's that they're now competing for positions they weren't before and the despiration to find Engineers on the company side isn't quite what it used to be either what happened we could go in depth on the economic state of things the interest rates changing and the reasons why companies are being tighter with their budgets but there's plenty of other YouTubers doing that better than I would companies are tightening their spend both short-term and longterm and if you've never run a team or a company before you might not know this but the vast majority of spend for the vast majority of companies with Engineers is the engineers because their salaries are big their benefits are bigger offices are expensive filling them with people is expensive and no service you're paying for costs as much as most of the teams at your company and when you're talking upwards of like $200 to $400,000 per person having fewer of them is really beneficial but what if you're a new engineer your salary is going to be a lot smaller right even in the US markets it's like 80 to 110k yeah after benefits and everything we're closer to like 120 to 130 and Junior Engineers take so long to onboard that you're not getting much value out of that money initially in fact new Engineers often have to be onboarded which means times being spent by other Engineers that could be spent on the product instead being spent helping someone else get faster if I had a team with four people on it and I hired a junior enge productivity is going to go down by 10 to 20% when they join period and after some amount of time we might go up and be a little bit closer to like 120% of the previous productivity so a little bump in the positive direction but it takes a while to get there it's also a gamble because not all Junior Engineers will ever figure it out it's not because they're bad it's because the environment might not be the right place for them to learn the tech stack might not jive with them or their interests they might just be in a weird place in life that makes it harder for them to produce and as such it's harder to make these gambles it's a really challenging bet to make to say hey we're going to pull this person in and our team's going to move slower for a bit but if it works out we might move slightly faster for only $140,000 a year that's really scary and as a result fewer companies are making those bets and instead choosing to spend their money on guaranteed wins what's a guaranteed win in this market and in this industry I'd make the argument that the closest thing we have to a guaranteed win is a team where things are going well where the people on the team know others from other companies they've worked with in the past and know the capabilities of that they can pull in to do specific understood earmarked work if we are working on a front-end product and we need the back end to be changed but we don't have a person to contribute to that backend on our team and it exists at another team at the company but I know somebody who has worked with the people who built that backend who already knows the language who knows the framework who knows all the things they're doing and I've worked with them in the past and I trust them as a cooworker I could vouch for them on my team as a person to bring in and at that point their previous role and title barely matters their degree doesn't matter their GitHub doesn't matter what matters is I brought trust to the table and that's the thing the vast majority of new developers are missing when they're hunting for jobs they don't have trust yet it's really really hard to build trust as a new developer in the industry there's a lot of things that help with trust like quality experience at other companies like co-workers that can for you this is why referrals and recommendations on things like LinkedIn are so valuable but in the end the only way you're going to get a job right now is if you have some amount of trust to build on top of how you build that is hard you can go through contributions on GitHub you can prove your high scores on leak code but the best thing you can do by far is make friendships and connections with other people in the industry this is the real reason I push going to college it's not about having a degree although obviously having that on your resume makes you a little more trustable it's the connections you make with other people who might make those other connections at other places I can't tell you how many times I'm the linking factor between some person getting their first job and some company that doesn't want to hire another engineer that takes 2 years to train and I'll be honest a lot of the junior engineers in this community don't need much time to be trained y'all kill it there are some really talented younger folk in this community and I can confidently recommend you to companies that wouldn't normally hire somebody under 25 and yes that job listing up on LinkedIn or whatever might say 25 plus it might say senior on it it might even say principal on it they're saying that because those titles are an exchange they have made they're willing to spend more money to have less risk but that doesn't always mean anything what they're looking for is less risk and more trust and finding ways to provide that primarily through connections with others is the best win you can have so surround yourself with other Engineers that are at where you're at some will go faster some will go slower some of them will find really cool opportunities and the more you stay in touch with them the more likely you are to find those opportunities yourself I can't recommend just cold applying to a bunch of jobs it might be good practice but it's going to give you the wrong signals because you're going to fail a lot of interviews that's the nature of the field but this isn't about interviews this isn't about your resume this is about how you've proven yourself in an industry that isn't looking to make bets anymore and when the market changes the way it has the willingness of these companies to take risk and make bets has gone down a ton and it's important to recognize how risky of a bet you are as an engineer if you have 5 years working at Netflix or Amazon you're a much less risky bet than somebody who just graduated from school and has two projects on their GitHub but if one of those projects is used by somebody on the team you're interviewing with that risk goes away immediately so think deeply about how you've proven yourself and the relationships you have and what do it take to make more of those if you don't have an in-person group to hang out with that also codes and is also learning with you find some online there's lots of really cool communities with people in things like Twitter space is people in our very own Discord which you can join with the link in the description there are so many opportunities to network and meet the other people who you can build this trust with but it's so important to understand that that is the core of hiring right now and that's the thing you probably don't have if you're struggling to find a job so go Network make friends don't go at this alone the myth of the solo programmer who goes to a really nice School cold applies to 10 companies and gets offers from two of them just isn't as much a thing anymore and God don't get me started on internships right now what do you think how's your experience been trying to hunt for a job if you want to hear more about growing as an engineer I'll pin a video in the corner here all about that and if you're not interested you're already seen it YouTube thinks you like the video below it thank you guys as always appreciate you all a ton peace NS




## The Reason These Devs HATE TypeScript (& React) - 20230801
y'all probably know I love typescript and react they make my life as an application developer so much better I cannot imagine building an app without either of these Technologies however I'm not just building apps anymore now that I've spent more time than ever in library land beginning to understand why people hate on reactant typescript so much specifically Library authors there are not many good developers who have frustrations with react and typescript and there is really useful feedback coming from library authors who are effectively forced to do a bunch of work so that application devs don't have to there's a different way you could view these technologies that I'm beginning to see more and more as I work on the library side I describe it as Shifting the burden before typescript consuming apis and libraries was a scary crap shoot and the majority of the errors we would see in applications were undefined in places unexpected because we didn't know what shape the data we were getting was in there's no guarantee when we made a request or got a response that would be in the right shape even with typescript it's not necessarily a guarantee but there is a contract in place telling us what is expected from this thing and May making sure we check that values are there when they should be and aren't there when they shouldn't that makes working on these things much easier however the reason for that is because the types are defined defining your own types is not great and if you've had to do it yourself for complex things like a weird API that's spitting out data in strange shapes you know how painful it can be typescript is in its best when you don't have to write any of the types yourself and in most of the applications we build at ping we're not writing very many type definitions because we're querying from database we're using trpc we're inferring our types from where they're created to where they're consumed but in order to infer those types we need to have libraries that both handle inference really well and expose correct types in the first place the burden to do that has shifted away from the application developer and onto the library devs if you're a library author and you're not already pushing types out for your library I'm sure most of your issues are filled with it and you're beyond frustrated at this point we've even seen projects like svelte and svelt kit move away from typescript and towards jsdoc in order to get typed contracts without all of the blow in weight of the typescript server compiling your code on every single change typescript often is more of a burden for Library devs even if it makes consumption of their libraries much better it's now work that previously we would have to do on our applications every time we used the library it was so easy to have your whole app break when you did a single package Json bump of one dependency slightly changes the syntax you call something with and suddenly your whole code base is broken with types it's much easier to see where those changes are happening and have a red squiggly line or a build error telling you where that stuff happened but in order for all of that to work the developers of the library have to make their code some amount more complex I've even heard of Library developers having to change their architectures entirely because the way they did things before didn't have a good way to be typed correct and that sucks it's sad to know that there's code that works and is performant that has to fundamentally change in order to make the type contracts correct Even in our experience with upload thing we've had stuff that worked but to make the changes we wanted to with type definitions we had to wrap functions in like 15 additional layers just to pass the types through correctly without making the DX too bad the performance of our library is going to be some amount worse because of typescript just to make the good developer experience possible and obviously maintaining all of this has required me to bring on additional staff just to get all the types working correctly and it still didn't prepare me for what I was getting into with server components server components are incredible as a developer of applications man if you're trying to support them with a library right now good luck it has not been Pleasant to do we had something that we were pretty sure was working and in a small number of developers environments it would infinite Loop really bad so we couldn't ship it and that sucks because again we're so close to having all these things in a phenomenal position so that every developer can rely on them to have a great experience but the library authors are going to have to take a huge burden on not dissimilar from what typescript put on them before and now if you want to support the most popular technology combo on the web which is react and typescript you're gonna have to do a bunch of work specific typescript and to react that work might make it easier to maintain your applications and your libraries in the future but it's probably going to make the library maintenance harder and from my experience building things correctly with typescript so that others can consume them is much harder than building a good application with typescript the way I see this is that the amount of work you had to do to build an app goes down because that work you used to have to do has been fully shifted over to library authors and as long as they do that correctly we all benefit massively huge shout out to the developers who have made this whole ecosystem viable people like Colin the creator of zahat people like Tanner Lindsley creator of tan stack react query and so many more useful things people like TK doto whose hard work in both documenting react query and the whole contribution and building process has been so valuable people like Alex from trpc who has proven things are possible typescript we never would have imagined before using inference to do Insane our own communities Julius who started as a creaky three up contributor started contributing a trpc and is now carrying our asses with upload thing we would not be able to do what we do in there without him these people are the reason typescript is so viable the hard work they're doing to deeply understand document and use typescript for things it was probably not meant to be used for before but the result is we can build our applications faster and more effectively I think it's important to acknowledge these typescript Advocates and the hundreds more that I have missed when I'm just bringing up the ones I talk to the most but it's important to thank them for their work take some time to appreciate the types between react devs who are building the libraries that we use and understand that to them these things are much harder and it's understandable when they get frustrated but the reason that they're frustrated is they're doing work we no longer have to AS application devs so each and every one of you thank you all you're making the web a better place and we're having a lot of fun playing with the sandbox you've given us got a pin a video in the corner here all about using typescript incorrectly so if you want to hear all about that there you go thank you as always these notes




## The Redis Rug Pull Is Worse Than You Think - 20240322
weird news guys reddis is no longer open source at least the open source we know and love where we can use it sell it repurpose it and do all the things we kind of associate with open source this caught me so off guard that um doing this on an off day I didn't even have time to get dressed or put on my makeup because I wanted to jump on this as quickly as I could because I'm to be frank a little deep in the nerdiness for open source licensing stuff it's just a thing I have dug into for way too long and there's a lot to dig into here cuz this is this is a weird one to say the absolute least so first we're going to cover what actually happened and read the post from redus then we're going to cover the community response the things people saw and thought and their expectations and how those were subverted and also of course the impact on the community and the people building on top of this companies like up stash that have went Allin on building with redus what does this look like for them and most importantly at the end what could they have done to prevent this and what licenses might allow for their goals to be achieved better because I don't think they handled this great spoiler anyways let's start with this post and see where it brings us I will also point out that I did way too much research before this one so we got a lot to cover let's do it redus adopts dual Source available licensing I love when they make up these new terms it makes it feel better that they're doing something that they know people will hate whatever future redus releases will continue to offer free and permissive use of the source code under the Dual rsal V2 and sspl V1 licenses these releases will combine Advanced Data types and processing engines previously only available in the reeda stack this is them kind of doing damage control here where they have added new features to redus and redus technologies that normally they would sell but they're now available with the source code but under this new licensing which also affects Reedus itself beginning today all future versions of redus will be released with the source available licenses notice Source available is not open source the reason for that is the official like OSI the open source standards committee does not consider what they've done here open source so they can no longer call it open source starting with reddis 7.4 reddis will be dual licensed under the Rd rsal license V2 and the serers side public license V1 consequently redus will no longer be distributed under the three Clause Berkeley software distribution good old BSD from day one reddis has provided a foundation of performance and simplicity for the applications and data infrastructure that power the modern internet now 15 years later we're proud to serve millions of developers across the globe by supporting real-time applications the world depends on every day we've already implemented dual licensing for our Advanced redis modules under the reddis stack distribution which has been well received by the community in fact more than 50% of redis IO downloads from Reedus 6 and Beyond come from redist stack we now believe that extending this license to redus itself will enable us to continue to evolve the most holistic set of data models processing engines and developer capabilities for our users yeah if somehow you don't know what reddis is which probably should have mentioned earlier sorry redis is an in-memory database it's primarily a key Value Store there's a lot of cool things that you can it has a lot of awesome useful functionality on top but in the end it's just a key value store so its popularity as great as that is and as useful as Reus is as a tool the number of problems you can solve with Reus is actually hilarious that all said it's hard to build a company around that because anyone can host this basically anywhere Ronin in chat just said that reddis is basically a hashmap as a service which yeah kind of it's a hashmap as a open source thing you can run but it is also a service through Reda stack the thing they're not saying here that is important to understand is that the red corporation that makes Reda stack and is trying to sell their services here they are losing to a lot of other companies in the space be it Amazon be it up stash be it Railway in fact I wonder can I go to railway and start a new project and still deploy redus cool that button is probably going to go away in the near future this is what's Magic about redus though is you can go anywhere and it's a standard you can click a button deploy reddis and then use it across all your services which is really really convenient and throwing that away genuinely kind of sucks so why are they doing this they don't want to keep losing business to these other places which on one hand I understand on the other hand they're betraying a massive community and a lot of people feel very much betrayed there's a great tweet from Matteo who if you don't know is one of the lead contributors to know. JS he's also the co-founder of platform he knows his we don't always agree but on things like this almost always we do Matteo's disappointment comes from anti reses leaving and being promised things that didn't happen anti reses was the original creator of redus and was really involved with the company at the time since then he has left new ownership has taken over and they were originally had promised him that it would stay BSD licensed this is the blog post of him leaving and the company thanking him for everything he had done in here they point out specifically the core of the open source reddits project will remain under the three Clause BSD license as expressed by the new government structure for Reedus the project will be guided by a core team of of contributors from the community selected according to their involvement and contributions we believe this moment is an excellent opportunity for the community to contribute give feedback and help improve the rightest project so this paragraph basically is a lie I've never seen a company walk back this hard in the open source world like it's one thing to change your licenses because you want to make more money which sucks but possibly justifiable especially if you approach it properly this is not that on the spectrum of like being a good open source contributor to being just an they lean are very far on the side right now let's go back to their post cuz I want to dig into this a bit more first the new source available licenses allow us to sustainably provide permissive use of our source code permissive use of our source code is a scary term we're leading redus into its next phase of development as a real-time data platform with a unified set of clients tools and core reddis product offerings the reddis source code will continue to be freely available to developers customers and partners through redis Community Edition Community Edition yeah future reddis Source available releases will unify core redus with reddis stack including search Json Vector problem IC all the features that their paid service includes which cool you get these things inside of the core redus package but at the same time you don't get to deploy redus or this as a service ever again you can deploy them for your own usage for products but you cannot use these things as things that your service offers we'll take a look in a bit about how that impacts companies that I just mentioned like Railway and up stash and of course they had to mention AI because of course they did the success of reddis has created a unique set of challenges reddis has been sponsoring the bulk of development alongside a dynamic community of Developers eager to contribute however the majority of red' commercial sales are channeled through the largest cloud service providers who commoditize R Reedus's Investments and its open source Community yeah I yeah I hate this the we we'll go into ways to balance this out better in the future but like the incentive structure here sucks this feels like what planet scale did oops we suddenly realize we need to make money so now we're going to turn our back on the people who got us where we are yes and no on one hand what planet scale did sucks I totally understand what they're doing costs them a lot of money active not just money for development and iteration but specifically money for hosting providing a free service is very different from providing open source code and Planet scale in particular not only are they really good about open source the CEO Sam has been known for calling out companies that don't actually do open source I can't tell you how many times I've seen him jump in on stuff like this where he shames other companies for pretending to be open source when they're not and Planet scale has been very very committed to working with vitess as an external thing that they don't own but they meaningfully contribute a lot of end time money and energy and marketing into vitess can still be deployed yourself and used for whatever you wanted if you wanted to go build your own Planet scale alternative you can their licenses for the vitess core technology that it's all built on top of is still a viable Choice it's it's not comparable and I don't think it's fair to compare these things because Planet scale had a service they were offering for free that cost them money they decided to pull it back because it cost them too much money and they fumbled a lot along the way I'm not going to pretend they didn't but the technology underneath it vess is open source and fully accessible to everybody redis is no longer open source and fully accessible to everybody there are now limitations of who can and can't use it that is the big deal here the redis company redis stack is not trying to innovate on the quality of experience they provide around redis they're trying to make redis itself that experience their selling and limit other people who want to compete with them Planet scale didn't limit competition with their decisions in fact they gave competition a head start in a lot of ways by making those changes whereas with what Reedus did here they're saying no you can't compete using our technology anymore apparently they had a blog post in 2018 previously they cited this in the article here the success of reddis has created a unique set of challenges Reis has been sponsoring the bulk of development alongside a dynamic community of developers eager to contribute however the majority of Red's commercial sales are channeled through the largest cloud service providers who Comm monizze reddits investments in open source Community despite efforts to support a community-led governance model and our desire to maintain the BSD license delivering multiple software distribution simultaneously across open source source available and Commercial software y y y it's at odds with our ability to Redd successfully into the future on one hand I get this it seems like they tried supposedly to get the community to lead Reedus itself and push it Forward they feel like they weren't able to do that and now we're in utter chaos where they're changing the licensing so they can supposedly continue investing in justifying that investment iffy on that we'll take a look at the BSD thing in a minute this is a blog post from anti reses again the original creator of redis stating specifically redis will remain BSD licensed apparently they originally added a new common Clause license in the Reed Labs site that people were concerned was was triggering redus doing a license switch he called it explicitly that it is and will remain BSD licensed however in the era of uncontrollable spreading of information my attempts to provide the correct information failed and I'm still seeing everywhere redus is no longer open source well sorry but redus is no longer open source as of today the thing being cited there is a somewhat common occurrence that happened over the last few years where redis inid send lawyers after companies that branded with redis slightly too hard and they would have to add a bunch of disclosures on the bottom of their site like the reddis copyright redis is register tra bark of Reis LTD yeah it's it was a whole thing and people were concerned about these types of things meaning Reedus wasn't open source which is why ANZ wrote they by the way Rus is still open source don't worry about it tired of this misinformation spreading 238 days ago sorry bud it sucks that this is the case but this is now the case the core Point here is that the new license will no longer allow redus offerings from other companies to be used with their source code they can't just provide hosted reddits without paying them something which uh doesn't really make sense it's an open source project all new versions of reddis will be susceptible to these new changes but you can't change the license of code that's already out there so old versions are still good and you should expect people to Fork they always do we'll go into forks and alternatives to redus soon there's a long list of them some of which are actually very interesting this is just some saying that they're excited to keep working with others they apparently convinced Microsoft to pay extra money to support things like Azure cache for Reda still so we provide Microsoft customers with exclusive access to expanded features Within rosoft offerings I'm honestly a little surprised Microsoft took the opportunity to do anything with this because they they lean pretty hard into real open source right now like they bought GitHub they're open sourcing tons of incredible stuff they pushed git further than we ever thought it could go it's honestly surprising that they're letting themselves be involved here simply because it might have bad optics for them to support this in any way at the same time Reedus is an important tool in technology they're choosing to bet on that I am curious how people feel about Microsoft's involvement here over time though in practice nothing changes for the redest developer community  and they also point out that all the redis client libraries under the responsibility of the redis company will remain open source licensed cool I'm happy that they call out that their license isn't an open source license that's the one thing I will give them a lot of credit for here does redus still believe in open source first we openly acknowledge that this change means rdus is no longer open source under the OSI definitions second we give away more technology than we monetize every day someone is using a free version of redus in amazing and Incredibly innovative ways and we applaud that we will continue to invest to ensure that remains a compelling and competitive platform for years to come I have so many issues with this it's not just protecting your brand and I like what do you mean by IP here because if by protecting your IP you mean protecting redis itself the open source technology that thousands have contributed to like let's take a look at the GitHub I'm just curious how many people have contributed to it 700 people have contributed their code to redus and as of today any further contributions will no longer be open source if any of those people worked at somewhere like let's say Amazon where they were deploying reddis as a service the effort they put in and plans they had for future efforts have just been thrown away there's no longer reason for them to contribute the theoretical future where others did contribute more is now gone and while I'm sure the reddis company is contributing a majority of the current work this is still stupid still very stupid our new license approach strikes the best balance between making reddest source code broadly available supporting the developer Community with minimal limitations and protecting our ability to continue investing in featur freeof charge software and Enterprise products my first super spicy take is that you can do this right while in this case they rug pulled and have a policy that's way too strict you can do this reasonably I understand the goal of both being open source and involved in the open source community and being able to monetize the unique Innovations and efforts you're putting into these things like how much would it suck if you made an awesome new open source tool made a service for deploying it that was really good and Amazon just comes in and takes it from you because AWS is obviously bigger and more reliable as people see it and as such if you're competing directly with AWS to AWS customers you're screwed especially if they can use the exact same source code so how do you work around that because this license just says nope never again there are balances you can find I did see one more thing I want to cover which is that Chad Whitaker wrote an article about the rug pole and relicensing as a whole here viable Fork materializes relicensing was a rug pole if not it wasn't and that's kind of sad another day another major open source project Relic is to avoid getting Jeff oh boy what's getting Jeff jeffing is Amazon stealing your thing because Jeff Bezos cool makes sense jeffing is when Bezos comes and steals the thing you built and sells it for cheaper that checks out this time though it's redus again was it a rug pole it's too soon to tell it's only a rug pole if someone was standing on the rug I love that quote this might be my favorite quote in a minute oh boy I I'm already liking where this is going a brief history of redis Licensing 2009 after working on it for 3 years salvatory publishes redis core on GitHub under BSD 3 hello beta testers this Redd server distribution is just a preview It Is by no means a usable product but probably it can already give you some feeling about what the final release is going to be be aware that if you want to use redus in production the server may not be perfectly stable or may contain unfixed bugs I love the little typos in this it really makes it feel like a new open source project it's kind of cute to think in 2009 this little raw text announcement warning was the state of redus and now it's where it is now 2016 is where things ramp up again redus starts making modules licensing them under the agpl like reddis search redis Json Reddit time series all very important things for building on top of redis in 2018 Redd relicensed his modules from agpl to Apache 2.0 with Commons Clause I don't find an announcement from them but here's a version of events in attack crunch oped from a VC who was involved and redus refers to the 2018 common clause relicensing in their 2021 post so this is the first time they relicensed common Clause stops open source abuse from 2018 again this is the drama that happened a while back where people thought reddis was no longer open source this is also the thing people thought wasn't open source originally which is why we saw that initial response where um they said that it will always always remain BSD This was meant to be a response to the people who were concerned about what happened here and clearly the concerns were correct because they've since fully walked back their defense there in 2021 the commons Clause is a fine idea with an unfortunate name it's a non-compete Rider on an otherwise open source license but a Commons is precisely a resource that is governed openly not corporately due in part to related controversy Reedus relicensed his modules again to a new license the non-compete reddis Source available license the rsal this is the thing they did the V2 of today in 2022 Reedus relicensed the modules again to a dual licensing Arrangement a cleaned up rsal V2 and in a bid to reduce license proliferation Mongo's sspl yeah and then today well I guess technically yesterday after 15 years cor Rus went from BSD 3 to the same rsal SSL Arrangement as the modules yeah criteria for a rug pole in cases like this the cry foul goes up companies dominate their space by having an open ecosystem and a large community of volunteers and then unilaterally switch the licensing terms from under everyone so that the founding team in VCS can make billions well in this case the founding team isn't there anymore specifically the guy who made reddis doesn't work there anymore he left so uh yeah it's people who took it from him arguably it's a smooth narrative but a little too smooth not every relicensing is a rug pole because not every project has a large community of volunteers I will say that there are definitely reles that I've seen that were far from a rug pole in fact some of them have actually been more open as a result of the relicensing and changes one example that I'll go deep into later is Sentry in the FSL the functional Source license which they introduced to address a lot of these problems and honestly solve the issue that Reedus is claiming to try and fix here way better than they did we'll get there in a bit as he says here not every project has a large community of volunteers unlike redis which has over 700 contributors moving a rug pole with no one standing on it is not a rug pole it's just moving a rug for relicensing to be a rug pole there has to have been a true developer Community around the project not just users developers yep I think that's the case here pretty obviously clearly Hashi Corp pulled the rug because in the wake of their relicensing which if you're not familiar they relicensed terraform to be more restrictive so you had to use their services with terraform if you wanted to do things like just sharing your configs people outside Hashi Corp did a lot of work to get open tofu off the ground open tofu is a fork of terraform from when it was still licensed more open and they were able to run from there it seems to be viable on the other hand since centy re in 2019 no viable Fork has emerged I this is funny because sentes relicensing has generally been in the direction of more open especially now that they've done the FSL but uh we'll get there in a bit there was no community of people not employed by functional software Incorporated doing business as who were developing the product there was no one standing on the rug yep also Fair there weren't people adding things to Sentry deploying Sentry on other services where you could buy from and all of those things so in they change the license it just fixed a lot of their little issues that again we'll talk about in a bit percentage of commits by Era and relation Sentry has always been built by sry this is actually a really good photo to reference here over 90% that's a huge difference so how about redus well redus is relicensing a rug pole I don't know they mentioned efforts to support a community-led governance model and our desire to maintain the BSD license I eagerly clicked the link regarding their desire more eagerly would I have clicked to learn about their efforts maybe they did make an effort maybe they didn't that's funny I had the exact same skepticism like we don't know they didn't show us any effort here at all ultimately the proof of the pudding is in the eating are there enough people who care enough to launch a viable open source Fork of redus technically yes they already have it exists it's KYB we'll see how you move to it was anyone standing on the rug in the court of public action the jury is out I like this this isn't about opinions this is about action so we need to see what people do but also empty drugs are kind of sad I do have to admit there's something poignant about yesterday's announcement I felt a Pang of loss when digging up the history shared above 15 years ago salvator put something beautiful out into the world with a sparkle in his eye and a spring in his step Reedus has always topped my personal list of really elegant pieces of software alongside postgress and python Vim maybe even G and salvator has always seemed like he's got really good energy when he stepped back four years ago he wrote I believe I'm not just leaving Reedus in the hands of a community of expert programmers but also in the hands of people people who really care about the legacy of the community Spirit of Reedus yeah rip if no Fork emerges it seems like a death knel for salvator's dreams of reddis the community even while it vindicates the decisions of Reedus the company I felt a similar pay of loss when I watched David say in reference to Sentry's own relicensing there's no billion doll Revenue companies that are exclusively permissive open source I want to believe someone will do it at some point they'll take the leap and it will work we were not going to be the ones to quite do it this is a great opportunity to dig into what Sentry has done and take a look at the FSL so let's do that quick because as much as I agree with all of this I don't necessarily feel the same way when I saw the FSL it did not give me the same gut of oh no what's going on here last year Sentry put out the FSL the functional Source license which again doesn't qualify for traditional open source definitions but they did something very interesting here where after a 2-year window the license converts the code to Apache 2 or MIT licensing which means that anyone can do whatever they want as long as they're using a version that's 2 years old or older this is a really good model in my opinion because it aligns incentives well where the company making the software wants to keep innovating because the more they innovate the more competitive advantages they have because they have a 2-year lead whenever they Implement something new so it gives them reasons to keep improving the product and implementing new features and things on top but it doesn't lock out competition from supporting things on other platforms I really like the goal of this license I genuinely think it's a really good idea it has gotten some controversy but it's also gotten some strong adoption obviously sentes using it for a bunch of stuff because you didn't know this already sentes largely open source they also are being used by Scott chaken who if you don't know he's currently CEO of get Butler but he also was the co-founder of GitHub which means a he knows open source and he found the FSL license was a really good balance let's read what he had to say I'm really struggling with wording here we released get Butler under the FSL license which converts to MIT at some point which is technically not open source as defined by The OSI but it is Source available and it seems misleading to call it anything different what do you all think the FSL is interesting because it's generally permissive outside of the non-compete Clause more so in my thinking than say something like the agpl which either limits you or forces actions upon you the bsl's additional use Grant is so complicated in a way that FSL ignores nicely yeah there's all these other licenses like the elastic license the bosl all these other weird ways to try and give businesses ways to hold some amount of their ability to sell their service most of them were really complex and had issues which is why half of these companies invent their own new terms similar to what redis did with the like what was it R rsal and SSP they made up new things because yeah back to the post from Scots I do think this is really insightful I've really struggled with this because I love open source software but I really hate the businesses writing open source software have to compete with large Bad actors just taking their stuff I like the idea I like the idea of the Simplicity of the functional software license converting automatically to MIT after some time and only enforcing non-compete and allowing absolutely everything else which is what most open source devs really care about curious what the community thinks is the phrase open source essentially trademarked by The OSI or can the community generally use it with other permissive licenses if it's in the spirit this is a conversation about can you call this open source or not and it's it's weird because if this code will be open source can you call it open source now or do you have to wait until it gets to that point with that license and how much do we care about the osi's definitions I don't want to go too deep into the semantic arguments here I really want to focus on the goals of these companies and the reasons they implemented things the way they did because what they did here was very specific and poignant it solves the problem that reddis claimed they were trying to solve today of companies just just taking the stuff that they built reselling it for slightly cheaper and making way too much money on top of that when you get nothing when you're the one building and contributing all the effort to the thing if you're contributing enough effort to keep the thing Innovative and interesting such that every year there's cool new features you want to use that's the edge you compete on and the cool thing with the FSL is it incentivizes the companies making these open source tools to continue Innovation so that there's reasons for customers to use their implementations rather than the 2-year-old version being hosted by Amazon this is I really think the right solution to the problem they still got a lot for it but overall I really like the vibe here it's funny to think the Sentry started in 2008 as just a Django plugin that was 71 lines of code they originally were bd3 they switched to the business source license which uh was not ideal for a lot of what they wanted to do they purchased code coverage which they published the source code for under BSL again has led to some vigorous debate because our use of the term open source to describe code coverage was spicy with the BSL I think the way forward here is to make what I suspect is a loose Confederation of folks using non-compete licenses to actually get together and draft their own set of values to then brand that inste behind it probably yeah I think that's fair functional Source license is nice and simple and a good solution here FSL is an evolution of BSL that deepens our commitment to balancing user freedom and developer sustainability we think it's a compelling option for open source- minded SAS companies such as ourselves who wish to Grant freedom without harmful free writing yeah the big thing with BSL is that the weight was absurd it's way too complex and it's uh I would say quite a bit further from what we expect from open source one of the other interesting things here is that centry is actually sponsoring Research into dosp which which is the delayed open source publication policies that they're leaning into here cuz they want to better understand how we got here and what we'll actually use these things for as for the big flaws vssl has it's uh four years which is way too long and disincentivizes Innovation because if you do one interesting thing every four years you have no reason to keep innovating on the product which sucks the more serious flaw though is that it has way too many parameters the change date the change license the additional use Grant yeah the additional use Grant is a giant fill-in-the blank that means every BSL is entirely different from each other which is kind of why what happened here happened I don't know if it's BSL based I'm actually pretty sure it isn't you take a look at the license I'm actually curious not even say the word business on the page that's my biggest concern here more than anything is just the the level of walk back we've seen here is absurd I've never seen a company pretend they were on one side and mooved to the other to again compare it to what centry did with the FSL they started with a more restrictive license with the business source license and they've moved to less and less restrictive licenses going more restrictive when you've promised to never do that is absurd actually Insanity like I've never seen and it's going to tank their reputation this is the pr where the license change actually happened and some Chatters pointed out I should definitely look at it not just because of the up vote to down vote ratio which is absurd but because there's some really good points being made by contributors this contributor commented that their contributions were made open source under the bstd license you are not allowed to redistribute nor use them in Source or binary forms without the original copyright notice and the BSD license you must remove my contributions this this is an interesting thing to point out because on one hand if I had BSD licensed code that was public and put basically anywhere and someone else wanted to use that code they can but they have to make sure that the BSD license for my piece that they took is included there to make it clear that this part is without question part of the BSD license Clause this is when you're taking code from one project to another at least that's most of the intent here the thing that's interesting here is what happens when a contribution to a project is made when the license is one way and then the license changes none of this has gone to court nobody's challenge these things we can all interpret and Shout about how we think these things do work or should work that all said the idea that you can contribute code never actually enforce a CLA or anything like that to strictly Define like hey I'm agreeing you changing the license isn't something I'm going to fight back on they never had anyone sign anything when they contributed to Reedus all of this code was contributed in a free BSD op Source license so you could make a very fair and strong argument that anyone who contributed under that license has contributed work that's license is being changed without their permission and you see that a lot throughout here there's a couple other commenters who have said roughly the same it's a copyright holder you might consider pursuing a dmca process towards the files with mangled license headers this is a fair point to point out another person said here that they committed this specific commit which allowed Rus modules to function with modern compilers which was made under the BSD license and they are not granting the permission for it to be used under any other license copyright for changes in this commit is held by their employer which happens to also be red hat very very interesting no one signed a CLA for redus right like we've confirmed that yeah Reedus Labs used a CLA for many of their other Reedus related projects but not for Reedus itself which means that this license change might actually not stand up if someone Wass to theoretically Sue or go after them for it and to see an actual employee of a not just like any company but a big open source Linux company that's very deep in these things calling out that their employer red hat is the copyright holder for this stuff that is terrifying I I would not want to be working at RED Labs right now suppos this person contributed a lot they committed to this repository in the past month 80 commits from this individual and those are mostly recent too like starting in 20121 it looks like yeah so how about the 2021 up until now they've been a somewhat regular contributor to redus and they were contributing because they thought the code they were contributing is and was and would stay open source 80 commits is not trivial to remove and if they would like to remove his contributions they have a lot of work to do because a lot of that's going to be functionality people rely on and now they have to reimplement it in a way that isn't copying that exact code he contributed before which is really hard to do that's time he lost that he'll never get back that's ever his employer theoretically spent that is no longer part of a license that he agreed to like imagine that he worked at a company that was selling reddis as a service and contributed these things to make redus better so that they could make better things with it and now they're not allowed to do that with future versions that's insane this is actually a very interesting point too are you aware that you've just removed redus from the vast majority of Linux distributions this is a very bad decision that will not end well for you in the end look at alasa search versus open search my SQL versus Maria DB Oracle jdk versus open jdk open Office L Office Etc yeah that's a fair point I hadn't thought of is like you're just not going to include reddis in Linux anymore because whenever you have licensed things like this you can't this has been a problem for a while for something like ZFS if you're not familiar it's a file system that has questionable licensing and it's a big part of why the Linux kernel doesn't support it because the license isn't as open and permissive as the license for Linux itself thereby implementing any functionality for it would be supporting a thing that isn't within their license ter this is fair all the critiques here are actually worthwhile and I've been impressed with the level of contribution happening from non-employees we go back to the contributors let's just take a look at the people who have contributed the most recently obviously anti- reses basically stopped when he left it's actually pretty alarming how quickly his commits just died but oring has taken over since he's member of redus so I'm assuming he's part of the Court team P hasn't done anything for a while so the current second biggest recent contributor to redus doesn't even work at redus he works at tensent and we see yingo here does he work at redus there's Redd lab stuff here I have to assume he does Alibaba who doesn't Okay so literally counting the recent contributors that are actually shipping meaningful amounts of code half of them don't work at Reedus labs and one of them quit on the terms that the license would never change this is looking more and more like a slap in the face to the entire community of people who contributed here I mean this wholeheartedly nothing I say about any of this drama matters more than what the people who contributed and put hard work and time into this project say how they feel matters way more than any readings I do about any of these rules any of these licenses any of the legal standings any of these things have nothing matters more than the feelings of the contributors who made this project viable in the first place and if they feel burnt which by all accounts it seems like they very much do then this was a mistake period they can claim they're the ones spending all the money and time making this happen but I've just proven here that tensent and Alibaba are also spending a lot of time making this viable and possible it's just a lie and if these people feel burnt if the people making this project work feel burnt then they got burnt period we should talk about the impact though because thankfully a lot of the things I rely on will not be impacted and if I've learned anything from this is that people don't actually use redus that much because redus kind of sucks we'll get into that in a bit but first I want to shout out up stash if you guys don't know of stash they sponsored the channel a bunch before they're technically not sponsoring me right now but I do love them and working with them has been great they also just hired Josh tried coding who's another great software Dev web dev focused YouTuber and he's been killing it over there so obviously I'm biased I like these guys know that I thought this was hilarious the license restrictions on redis will not impact the features of any up stash product up stash for redis is a custom key Value Store implementation that is compatible with the Reedus API they are redis compat they aren't reddis which is a very very important detail right now we implemented everything from scratch without using any code from redis open source projects and then my favorite part our legal team is currently investigating if these changes will affect our product's name yeah they're going to have to worry about where they put redus in their stuff like the word not the functionality just the word because they're not using redis in fact I've never used any of Reedus's clients before I just use the up stash stuff if you take a look at up Stash's GitHub you'll see they have a bunch of Reedus clients specifically the up Reedus core client which is an HTTP based redus client that is not going to be affected by any of this because it's their own separate thing that happens to be compliant and compatible with the redus standards this is how I use redus so this is again why I am not affected and why up stash isn't I also want to be clear that up stash isn't the only option as I was hending up before not too many people are actually using reddis directly nowadays I just found this interesting Hacker News Post from last year where people were citing and comparing these different options very interestingly you have quite a few others all of which are hilariously faster than reddis crazy to think that an in-memory store can be slow but when you write bad code basically anything can be slow and while it is obviously faster than like a SQL database that's storing things in files it's not going to be as fast as something that's written well and multi-threaded like kdb which if you're not familiar which I wasn't before all of this beyond having a vague idea that it existed kdb is an open- Source alternative to red that's actually a fork of redus but importantly it's multi-threaded which means it can theoretically perform hilariously better like hilariously better which is what we see here it's more than twice as fast there's also Solutions like dragonfly and Sky table which the author here notes are still new and not as stable claiming to be way faster which he couldn't reproduce but it's also missing a decent number of features kdb overall is very caught up and uh it's probably the best bet right now this is going to be a huge moment for kdb both like the community and services deploying it it and I'm excited to see where people go with it oh somebody point out the 's actually 2 years old yeah I'm stupid this is a 2-year-old post you guys get the point there's lots of other really compelling options you can consider at this point it's a full-on drop in replacement so if you're already deploying redus or using something like it in production you can switch to kdb if you choose to and be fine if you're currently selling reddis as a service you can probably just move to kdb and none of your users will even notice I did see one more interesting take here where someone was upset that people are concerned about this specifically they cited mongod DB as an example of a company that ch their license and was fine it's interesting they actually used the as well I thought that was a thing that was mostly made up by Rus here but I guess there are actually companies using it they're using the license very interesting I didn't know the SSL was originally by makes sense though because as I'm sure y'all who have been around for a while know I would never recommend there's a lot of reasons why honestly this is one of them I will say this has worked well for as a business I don't know many users of mongod DB that aren't using their notoriously not great Cloud product so it worked in that sense I don't think they've gained a whole lot of new users since they made these changes but at the very least they can monetize the few that they have good for them I guess I hate this and the fact that people are saying well the users are fine yeah they're fine because no real users are using and on top of that the people who are are either self- deploying it or relying on the questionable Atlas product there just wasn't as much adoption of in other services and if they wanted to have any chance of people using the service provider instead of like I don't know AWS hosting databas basis for you the only way they had a chance at that was doing this which is kind of absurd it's kind of very absurd yeah I I also think the competition in the space ramped up a bunch after did this where things like Dynamo DP got taken way more seriously as a document store because no one could just deploy anymore and Amazon needed to compete so on one hand Innovation happened because of this which is cool to incentivize Innovation but on the other hand I do think this kind of Tanked sentiment forever and I just don't have people asking me about it anymore in 2018 everyone was asking should we use can I try how do I use with X that all died and this is part of why this is without a question part of that when you change these licenses and you restrict these terms your placement and involvement in the open source Community has to go down with that it just does things like this suck they're not simple and a lot of people are going to feel burnt for good reasons on top of that we got a lot to deal with as a community here both about how do we handle license changes like this and also what do we do about redus do we just go to a fork or do we do something different I don't know I want to know your guys thoughts let me know in the comments how you feel about this are we overreacting or do we really need to move off of Reus and move to a more open future I don't know what else to say so until next time peace nerds




## The Scary Truth About Mobile Apps - 20230808
mobile apps are great statistically speaking you're probably watching this video on mobile right now despite the amount of use mobile gets though the number of apps being installed is actually going down and this is scary for developers looking to get into and start building new applications I think this is one of those things that doesn't get talked about enough and I wanted to dive into the numbers and help us all reflect both as users and developers of mobile applications so we can think through what the future is going to look like so without further Ado let's take a look at a really Jank sheet in Google Sheets this sheet has some numbers I grabbed from two different surveys one was of the number of applications being installed every year and the other was of the number of smartphone users in billions the number here is pretty insane when you remember um how many people on earth yeah yeah so of the 7.8 billion supposedly 6.5 have smartphones maybe might be a little a little high but uh this number could also be a little low hard to know for sure but the point is there's a lot of people with smartphones now despite that the number of applications being installed is actually going down in fact the number of apps installed in 2022 wasn't just less than 2021 it was less than 2020. even though the number of smartphone users is continuing to go up the number of application installs is not and when we look at the actual survey you can see compared to the older years there was very consistent growth for a while and then crazy enough right around when covet started it flatlined people had the apps they were cool with they weren't looking for new apps as much you're looking to get into app Dev that's kind of scary because if there are less apps being installed there is some amount less developers needed to build those apps and as we're no longer building new apps rather we're maintaining the existing ones and making a better and better experience for those users the number of devs we need to help with that is not going up anymore and this is scary you don't notice about me actually started in Mobile Dev I was originally hacking on custom Android stuff eventually moved to iOS and then somehow I ended up doing backend Dev but I I came from the mobile world and seeing this is scary on top of that the number of developers you need to work on a mobile app is also going down obviously react natives a big part of this and we'll talk a bit about that in the future for react native and tools like it existed before we had good package managers in iOS before Android development became a viable thing with kotlin it took many more developers to make usable apps hopefully it has gotten easier to do that doesn't make these numbers any less scary just cause mobile apps are dying doesn't mean your effort is though react native isn't just useful on mobile in fact it's useful on Playstation I've wanted to talk about this for a while but haven't gotten the right connections thankfully the sponsor of today's episode has believe it or not react native EU actually reached out to see if I wanted to help a bit and more importantly promote the awesome conference they're about to throw in throatswaff if you're interested in hanging out with a bunch of react native devs in Poland I cannot imagine a better place to do it than this event all the react native conferences that I've been to have been some of the coolest stuff I've attended and this one has a talk about Playstation apps yes they're finally going to start sharing the secret sauce of PlayStation using native under the hood I am so hyped I am sad I can't be there but I will absolutely be watching and covering all the cool stuff happening if you do end up going please tweet at me when the PlayStation stuff happens because I yeah I want to know more about this story I've wanted to for a while I have a link in the description and a coupon code for 10 off if you are interested in attending back to the video I think it's important to look at the numbers here where we see that the number of applications installed per user is plummeting in covid year 2020 the number of apps the average smartphone user installed was 24 which was a huge jump from the 20. but we're actually down to just under 22 now when you compare these two numbers in this way This spells a much scarier story in my opinion and that's why I wanted to make this video I wanted to make sure we took the time to think through whether or not we need a mobile app or not and more importantly whether or not your new mobile app is worth building in the first place because we don't know if you we can get users to install it or not it's a bigger and bigger ask nowadays to get a user to install a new piece of software on their device when they could just go to a web version and there are more and more users just preferring the web version anyways because it loads in their browser and it might even be faster for them especially on older devices now that apple is pushing to support Progressive web apps on iOS better you're even gonna have push notifications in the next iOS update from the web without going through the App Store core of this isn't to scare people who are really into Mobile it's to start a conversation about how realistic it is to focus on Native application development today if you can do it in a way that doesn't cost your company a lot and genuinely benefits the experience of your users to users use your application enough to justify having a native app it's probably still worth spending the money but generally the justification of building an app is getting harder and harder to do and what we're going to need to make this worth it is better Technologies for existing developers to also work on good mobile apps on the site on top of that we as web developers need to get better about building our web apps to work on mobile that doesn't just mean make your UI scale to big and small sizes it means make your components work well on touch it means stop using hover behaviors for everything so you can't hover with your thumb it means rethinking some amount of how we build good uis on the web because web users are often mobile users specifically turns out these numbers are annoying to find the data exists but none of it's collected the right way roughly we agree around 60 percent of web traffic give or take like 20 points but we'll say around 60 of web traffic comes from mobile devices not from desktop computers or laptops and Chromebooks those types of things and negligible partis tablets like under 10 percent as such building for touch uis is actually really important and we should be thinking about that as we build applications for our users the future is one where developers can make apps quickly that serve their users better and the user can use the app quickly without having to go through the app store or whatever other things the relationship between the developer and the user is going to continue getting closer and the web is the path there not mobile applications there's also why platforms like react native are so valuable because without them we don't have a great way for developers to directly update things for the users we do have some code push systems appearing both in Native applications as well as in flutter but when your core binary the react native JavaScript bundle can be hosted on a server and updated from said server it becomes much easier to ship the right solution to your users create something different I have two videos here the one above is for those of y'all who like or really don't like flutter where I talk all about why I personally don't as well I have a video here where I talk about the Airbnb article that made everybody hate react native in the first place I think both are great and worth watching so check them out if you haven't thank you guys as always peace




## The Secret Language Scaling WhatsApp and Discord - 20240829
you might think big companies would use languages like rust and go to scale and sure plenty do but there's a secret weapon that a lot of these companies are using to let them scale much bigger and much faster with teams that are much smaller and more focused that language has been around for a lot longer than you might think too it's a language I love a lot well not it but the things that you can build on top of it that language is earling from the 80s it was built for phone companies but since then it's been used for a hell of a lot more including my favorite language Elixir yes not typescript El I love it so much the things you can do with that are incredible and we're going to read an awesome article all about how these companies are using this stuff so let's get to it how WhatsApp Discord and other companies all have managed to scale to hundreds of millions of concurrent users taking advantage of earling in the technologies that it is enabling huge shout out to H we for writing this I'm very excited for this article as a solo full stack Dev one of the most popular projects our clients ask us to build is a real-time app oh you know the ones that use every day things like WhatsApp Discord slack twitch chat Etc when building real-time apps you need to consider for various factors like scalability fault tolerance responsiveness and distribution and that's a tough job especially if you're a small team or even a solo team one of my favorite fun facts is that when WhatsApp was acquired they had I think six Engineers total maybe a bit more but they had less than six working on the infrastructure and man the WhatsApp team killed it and they were able to scale to unbelievable numbers of users with such a small team because earling made it easy what if I told you that you could build a real-time app that can easily scale to more than a million users with just a few deaths and not only that but you could also deploy them with almost zero downtime at extremely low costs the secret weapon I'm talking about here is the erling virtual machine or beam the Bogden or Bjorn earling abstract machine remember earling is ancient earling comes from like the ogc days so they didn't have a real term of virtual machine yet like that concept was still new largely being invented by erlang so the term was abstract machine because their goal was to make a that they could write code for and then they could just Port that layer over kind of similar to things like jvm from java This was meant to be an alternative to how C worked where the C language had to be ported to every different architecture so that you would write code and it would compile to the correct assembly beam was what were focused on being a slightly higher up level so you don't have to compile different code or compile your code for different platforms you compile the runtime and you can stuff the code in again similar to Java but at the time that was revolutionary and also very slow cuz computers sucked which meant that earling did not get adopted that much but since then the power of having that abstraction in the networking benefits and all the crazy stuff that got built into erlang have proven to be very very useful at the time more for the telephone companies but since for the internet we now know and love because believe it or not erling was invented before the internet so yeah this will be a fun one in this article I'll explain how erlang in its modern counterpart Elixir have become the secret weapons behind real-time apps like WhatsApp and Discord I'm especially excited to share this because I've been using Elixir for more than 3 years now and I can say it's one of the best decisions I've ever made in my career yep there are very very few people who can say they regret learning Elixir I'm not going to promise you a bunch of jobs and opportunities as a result but it will make you it will make you appreciate functional programming and scaling and networking and all these things in a different light and it was certainly a very powerful thing for me to learn when I learned it so let's dive in the origins of earling and elixir that's such a good meme that's so true I would I was about to give the history but I'm going to let the author do it and just add my details before we go into the history of Elixir cuz we're going to have a lot of fun there I have to plug Elixir conf it's happening August 27th the 30th in Orlando so if that time's already passed I'm sorry but if you want to come to a cool place to talk about Elixir and hear Keynotes from Jose valim Chris McCord the guys who made Elixir and Phoenix respectively as well as this guy who I don't know how he snuck in but he did come check it out I'll even leave a discount code in the description so use that if you want to get some money off anyways earling was developed in the late 1980s by Ericson a Swedish telecommunications company the goal was to create a language that could handle massive concurrency and high availability requirements of telecommunication systems again they wanted to make this work for phone companies the internet was not even a thing they just wanted phone companies and their stuff to work properly earling design focuses on lightweight processes message passing and fault tolerance making it ideal for Building Systems that require continuous operation as well as high reliability Earl's lightweight process allows for thousands or even millions of concurrent activities within the same system without significant performance segregation this is kind of the magic of llang the idea of like what we now know in JavaScript with the event Loop where you can have something going on and process other stuff at the same time you can have a a function that is running that isn't reserving a meaningful amount of CPU or Ram at any given time it's just IO that's being waited on the idea of having more processes running than you have processors and threads in your processor that concept was unbelievably powerful and still is to this day especially when you consider out the time there was no such thing as multi-threaded processors and multiple cores like your distribution method was multiple computers and the only thing that knew how to even start doing that was earling but it could also spin up multiple processes in quotes on the same machine and just wait for the first one to finish before doing the next one all of these Concepts were largely invented by earling because this idea of a process not being the thing directly tied to the machine itself but being an abstract thing that you could run pause resume cue deal with later deal with sooner all of these ideas came from earling which is so crazy it's a great quote here we'll get to in a second it message passing model enables these processes to communicate efficiently without sharing memory which reduces complexity and increases fault tolerance the let it crash philosophy which is this is like core to earling let it crash it's fine because you can recover from the crash don't go out of your way to make sure edge cases are handled in every single detail because you can just catch at higher level and try again the let it crash philosophy encourages devs to write systems that can recover gracefully from failures contributing to the robustness of the earling based applications Elixir created by Jose valim in 2011 Builds on the solid foundation of the earling VM but it introduced some more modern and developer friendly syntax so I'll dive in a little more on here check out my interview with Jose if you want to see a bunch more cuz it was awesome I love him so much he was one of the most relevant devs in the Ruby world he built the ooth implementation for Ruby which was a huge deal he realized that Ruby's scaleability was like absolute garbage it's as single threed as a thing can be so Ruby on Rails sucked to scale we invented all sorts of new technologies to abstract on top of rails like outside of the server to tell you which server to go to because it was the only way to load balance hell the concept of load balancing as we know it today was largely invented to deal with Ruby's as such Jose was annoyed and wanted to find something better he Soul searched he looked at every language and he fell in love with what erlang could do but then he had to read erlang code and I should probably have started with this but it's important to understand how cursed earling syntax is this doesn't look too too bad but like accessing sub values is largely done with like the number sign there's a lot of code that has a semicolon at the start instead of the end this is very modern earling okay a good bit of this is relatively modern but the dash for modules also the concept of modules being something they had was insane this looks not as bad as it usually does when I look at old orline code maybe my brain's being rotted by FP it used to be weird okay now we're talking with the brackets the underscore ATS like what the is this now we're talking yeah it's one of the earliest languages with pattern matching I it might have invented pattern matching what language was first to have pattern matching ml in the 70s had it damn did not know that good to know yeah llang was one of the first languages with it not the first but one of the first anyways the the point I was trying to make is that Jose saw erlang realized it was miserable to write and read and wanted syntax didn't suck and let's be real Ruby syntax is beautiful it's like if python didn't hate you the promise that python made of readable code like English was actually delivered on by Ruby which is funny because the guy who wrote Ruby is not a native English speaker the point being Ruby had great syntax Jose missed it when he started playing with and decided he would build a language on top of llang so he could add the beautiful syntax of Ruby while also having the performance benefits in ecosystem of llang and he pulled it off with Elixir for sure especially once he started adding all the fun functional programming things on top it was great together earling and elixir provide a powerful stack for building scalable reliable and maintainable apps their features make them a perfect choice for companies like WhatsApp and Discord which require systems capable of handling a large number of concurrent users with minimal downtime we need to actually talk about those features though cuz right now I'm just glazing the language so let's dive in a bit the five core features that make beam a secret weapon for real time apps there's a reason these companies are using it excited to dive into it first big feature is Fault tolerance see this we got a supervisor keeping track of the workers if a worker dies supervisor sees it and they spin up a new one love it also love the escal draw reliability is crucial for applications like WhatsApp and Discord which it must operate continuously without significant downtime Earl Lang's let it crash philosophy ensures that individual process failures do not bring down the entire system instead processes are isolated and supervisors can restart a failed process automatically this design minimizes the impact of crashes and contributes to the overall stability of the application the the fact that everything in llang is its own like isolated worker always is magic it's so powerful you can do crazy like hot swap the code out live like you can just change what code is running because again Earl's like a virtual machine in layer so you can just throw different L code in and it will interpolate it and use it for whatever you want to that's nuts it's so cool it's like one of those things that you don't realize cuz it it could work in Java but nobody uses Java that way I don't even know if it can actually do that the thought of things like hot swapping code restarting individual processes in workers without hurting the system crashing without the system going down oh all magic and hugely useful at scale especially if you're moving fast scalability scalability not only needs the ability to expand physical servers horizontally but also methods to communicate between those servers this is one of those things that llang just does and once you see how llang does it you get mad that everything else sucks so hard we'll see what the article has to say first but Communication in distributed systems always brings several issues from race conditions to node discoveries orchestration failures Etc there are lots of reasons why these issues are brought up but most of them come from the ill-managed complexity Beam on the other hand achieves scalability without any fancy yet dangerous tools out there it handles internode communication like a charm let's see if simple example of how to communicate between two nodes in Elixir so you have to spin up two nodes so here's two different nodes spinning up here this one is named node one at here is just where it's located has a cookie and we spit up another one here named node two so all I have to do to connect them it's inside one of them say connect to the other one node. connect node two with the IP and here is where gets actually magical do you know how you run different code on that node from this node call node. spawn and just pass it a function it will just run over there what the why does no other language have this work this easily these aren't necessarily different processes on the same machine these could be different machines entirely and you can just spawn a process on a different machine from the one you're currently on it's insane it's so powerful they only you get into like gen server show me an Elixir gen server example it distributes the compute to process an array across multip multiple nodes gen server is nuts it's a generic server that makes it easy to distribute cool showing all that cool as you see here looks a lot like Ruby sad that there's no Elixir syntax highlighting on chat GPT but I get it and all you have to do to distribute these we have our nodes which we just get from calling node. list we now know how much how many nodes there are by calling length of nodes we break up the array we then chunk every for this amount so there's now chunks of however many like like let's say there's five nodes we now have chunks of five so for each Chunk we then spin or spin off an async process for each of those it's that simple it's like real easy like hilariously so and we just have the Gen server that creates the link and actually spins up all of these processes and we can just Chunk on an array which by the way the ability to Chunk on something like this is magical to just split up your data in groups of five with a helper like that oh oh so good for those wondering how does this work it assumes the same source code is available and tagged properly on all nodes which it pretty much always is and it's updating itself as far as I understand to make sure all the nodes are on the most upto-date Source it's not actually sending the source code across the wire it's sending a tag to what source code to run across the wire from my understanding I could be wrong but it's it's these are the things you don't think about when you use Elixir because they're all just kind of solved for you you have the node one node two here example node. connect to node two we can distribute a compute. start link now we have the two nodes result distributed compute. process array the array can you give an example without a module where you do it all as one big function with pipes the pipe operator is one of the coolest things in Elixir by the way Yep this is how I would have written this now we're talking so we have the node list and we can cat self to it so now we have all the nodes including this one chunk size again we're dividing the length of the array by length of nodes create the chunks .zip nodes map so the zip is attaching the node in between each element so now we know if we grab two it's the chunk then the node task. async we pass this thing through the RPC call the distribute example process chunk chunk end and that's it and if you want to see how the chunk processed that's this code here the module def process chunk chunk does whatever you do here and all you have to do to call that somewhere else because again we're calling this function on a node we don't know the node is this node so we just call that by passing this node and then calling colon process chunk and also distributed pipe we need to tell it which module CU we're in this distributed pipe example module and we're telling it in this node call this module specifically this function and pass it this data it's actually really nice like magically so it's oh you know I I will just sit here glaze Elixir all day if I keep looking at code Snippets so back here as I said this is really powerful and scalable and you can avoid using complex distributed systems like Pik Kafka rabbit mq and things like that the amount of time I spent avoiding these things because Elixir and earling just did them for me probably hurt my career as much as it helped getting some good questions from chat already like does this relate to the wild fly does yes this is how fly Works fly functions entirely because they're building everything on top of Elixir people saying that my hair is convincing to check out Elixir oh boy I'll take it the hair seems less sincere the hair's convinced you I'll take it anyways distribution this is where it gets even more fun cuz again you can run this on any node and it's very trival to spin up realtime Global applications like what's in Discord require distributed architecture to hindle users from different regions this needs a system that can distribute workloads across multiple nodes and ensure seamless communication between them beam Schuler can not only distribute processes across multiple cores on a single machine but also across multiple machines in a network so cool and also it treats every process the same whether it's on the same machine or a different one this is kind of the magic you can wait for a result of a process and call it as though it ran on the same machine even if it ran on the other side of the world it doesn't care and obviously this makes it very easy to build distributed systems without worrying about the underlying infro computer one computer 2 computer 3 all getting things passed to them from theer it doesn't matter this ease of distribution also connects to the scalability feature when you need to scale your app you can easily add more nose to the cluster and distribute the workload across them no need to worry about complex load balancers or sharding strats beam takes care of it all for you yep you could hire a team of devops to do all these things for you or you could just use a good language it's also worth noting I'm going to drop a spicy take when we're here performance means a lot of different things I find a lot of companies getting excited about languages like rust because they want to squeeze out all the performance they can but man performance is not that simple performance means that your app runs well or that the thing you're building runs as expected it doesn't mean that the amount of time it takes to do a specific math function is as short as possible it means the whole system runs well so as much as rust might make a given function compute faster than other languages certainly faster than Elixir cuz Elixir is not a compiled language it won't benefit once you want to go past what your current processor does one of the most important things to know about performance is that performance is often a function of scale how many processors and threads do you have how well are they being utilized I've seen a lot of code in go and in Rust where the go code is faster not because it can compute a function or get data faster because it's easier to parallelize the things you're doing in go then it is in a language like rust I know I've gotten flamed for the rust suck at acing takes but I don't care I'm right rust suck async it doesn't do concurrency well for it certainly doesn't do parallelism well for you can brute force it in but good luck have fun earling just does it it's just part of the language and that's the magic is while yes if we're comparing how much compute can get done on One Core Elixir loses it solves a much more complex performance problem that matters a lot more to businesses that are actually making money which is when we hit the cap of how much performance we can get out of one box how easily can we have have a second box and sure if you can if you could theoretically only ever have one server rust is a great language for that but as soon as you might need a second server at some point Elixir is the best thing you can be using and if you want to be able to spin up multiple nodes and distribute your processes so that you can get responses to users faster without micro optimizing every single line of code in your app that's the performance win that you get from elixir in earling they make it easier to scale up to address Performance needs rather than rust which makes it easier to write individual lines of code and functions that resolve way faster as great as that is and it is awesome it is not going to solve the problem as indefinitely is something like elixir and lling does because these mean whenever you need more performance just spin up another server no other language has this this good period unless it's also built on top of beam So speaking of performance and how quick things handle stuff let's talk about responsiveness real-time communication platforms must deliver messages and updates to users quickly and reliably I mean don't tell that to slack or GitHub anyways Earline takes the execution of multiple processes into its own hands by employing dedicated schedulers that interchangeably execute many earling processes the Schuler is preemptive it gives a small execution window to each process and then pauses it and runs another process this is so magical you have no idea so here's an example theer allocates an execution window to process one which allows Max 500 function calls per process so if this needs a th000 function calls but it can only take up to to 500 at once then after it's hit that 500 it pauses and goes to the next process since process one needed a th000 it's paused it then tries process two which only needs 100 so it finishes that and then it can go back and finish that this sound familiar if you're deep enough in JS you're familiar with the event Loop this is like a Brute Force scalable multi- Noe version of the same thing it's so cool just got the question how does gleam compare it's the same because both llang or both Elixir and gleam are built on top of earling and beam the same way I'll say gleam whole like compiles to JS thing won't get any of these benefits but if you're using it on the server side with earling it's the same thing it all compiles the same thing the same way that like cotlin isn't faster than Java all the languages built on top of java are the same because the execution window is small a single long running process can't block the rest of the system furthermore iio operations are internally delegated to separate threads or a kernel pole service on the underlying OS is used if available that means that any process that waits for an IO operation to finish won't block the ex ution of other processes again it's doing a lot of the same things that we love JavaScript for and the things that actually make JavaScript surprisingly fast but it's doing it across machines that's nuts that's so cool speaking of cool Live code updates nothing else has this maintaining real-time applications requires the ability to deploy updates without disrupting the user experience usually in a containerized cloud environment you would use techniques like blue green deployments Canary deployments Etc to achieve this but with beam you can update code on a running system without restarting the application do you understand how magical this is Imagine something like a websocket server that you're connected to to get new chat messages now imagine you're the dev of that server you need to push an update to change how the processes are being shared or what database they're connecting to or something like that normally you'd have to take down the server and put up a new server and then hope the user automatically reconnects and write a ton of client side code to make sure they can reconnect to the right thing now you can just put up the new code you're done it's nuts this feature is known as hot code swapping and it's crucial for real-time applications where continuous operation is essential it allows for devs to fix bugs add features and optimize performance without interrupting the service oh boy we're getting into case studies now this will be very fun to see how these things are actually being used I love the the ABC here of context on what this is examples of why it's powerful now examples of how it's actually been used how WhatsApp leveraged earling to scale real-time messaging with more than a billion daily active users that's so hard to comprehend in 2009 WhatsApp was founded by Brian Acton and John com who wanted to create a messaging app that was crossplatform fast reliable and secure they chose earling as the foundation for their real-time messaging platform because of its fault tolerance scalability and distribution capabilities the basic architecture and codebase for whatsapps messaging systems were inspired by an open source project named ejab it was an xmpp server written using earling Whatsapp growth was exponential and by 2018 it had over a billion daily active users thanks to the efficiency of earling and their careful refinement of both ejab they managed to handle millions of messages per day with minimal downtime while keeping the team lean and the hardware and Engineering costs low yeah I I want to emphasize like how many Engineers worked at whatsapp when acquired they had 32 Engineers if I recall six of them or so were on infra and that was for a$1 199 billion acquisition and that was sixish people covering 450 million active users that's so hard to fathom that's so crazy that ratio is unbelievable it's possibly the craziest of like number of devs to number of active users connected unbelievable according to Anton lavick a WhatsApp server engineer one of Ling's best attributes is the concurrency he says that other languages or platforms can try to achieve the same level of concurrency but they often require a lot of effort and resources since earling was built to solve the problem of concurrency from the beginning it's much easier to achieve the same level of concurrency with Earline yep in case two is Discord which uh is a relatively well- covered story even on the Elixir blog back from 2020 Jose wrote an article about why Discord was on Elixir so that's a really cool thing if you want to check that out great reference let's see what the author of this has to say Discord founded in 2015 by Jason and Stan is a realtime chat app designed originally for gamers also devs by the way t3g Discord if you want to hang out with us back then they chose two main languages to build their infra Python and elixir this is particularly funny cuz since then they've done go and rust and a bunch of other the python codebase in Elixir Still Remains for powering API Rel Rel ated stuff most of the core features including realtime chat are still powered by Elixir so the python I don't think the python codebase is being used for anything but the realtime chat absolutely is elixir powered discord's popular servers such as those dedicated to popular games like fortnite and Minecraft can handle hundreds of thousands of users chatting simultaneously hence it should be very good at broadcasting messages and user status updates in real time without any delay alixir concurrency model in Fault tolerance features made it an ideal choice for building discord's realtime chat system the ability to handle massive conc and distribute workloads across multiple nodes allowed Discord to scale its chat platform while maintaining high performance as well as reliability and then in 2019 Discord reached a new Milestone they had to handle way more concurrent users than ever before this time they had to use not only the powers of beam but also the powers from other more so-called performant languages they use rust to build their new member list that can rapidly update the status of 11 million plus concurrent users and the cool thing is that they adopted pre-compiled Russ modules into the Elixir code base using a feature called NF which is native implemented functions really cool that for the things that again Elixir doesn't do fast because it's not a fast language it's a scalable language you can still dive into something like rust to do certain things fast and then send out the response across the crazy node management stuff that you can do in earling this way they could leverage the performance of rust while also using the productivity and scalability concurrency and all of that of alexir super cool case three this is the case that the author worked on how I buil built a realtime networking app with elixir in Phoenix last year I had a chance to build a fun project called food Focus which broadcasts a live video of a user cooking a dish and other users can join the live video and chat with the host not only that they can also connect their smartwatch to the application the application will show the synchronized recipe instructions as a timer on their watch by the time I started building the project I had to choose the most cost effective Tech stack to build it most important traits of the tech were the following need to be easy to build real-time features it should provide ready to use tools so they don't have to bring in a lot of third part stuff should be fun to work with nice DX oh we were doing so good so good threw it all away at the end this hurts me after some research I decided to use elixir in Phoenix for the back end and make a mistake on the front end I I'm sorry I I Love You author you've done a great job with this the fact that you were willing to try out new things and find elixir in Phoenix is also why you were willing to try flutter but I hope you take the time to reflect on why flutter sucks especially if you need a mobile like a watch app flutter is going to only get in your way there I I don't want to ran to about that cuz I love this article so though it was my first time building a production ready app with Elixir I was amazed by how easy it was to build real-time features with Phoenix these are some of my favorite features and tools that I found very useful while developing the project with Elixir Phoenix channels which are a great way to build real-time features they're built on top of websockets and they provide a simple and easy to use API for building real-time apps ETS which is the earling term storage it's a built-in key value store in earling that's very fast and efficient no need to bring something like grus for caching or storing temporary data also post back tools like Ecto for the database operations Oban for background jobs electric SQL for running local first queries with better ux good stuff thanks to these features I was able to deliver the project on time and within budget if I had chosen a different stack I might have spent more time configuring and integrating thirdparty libraries and have less time to focus on building the actual features yeah conclusion WhatsApp and Discord are exemplary cases for how the earling VM in Elixir can be leveraged to build scalable real-time apps however they are not the only companies harnessing the power of these Technologies other prominent companies like Spotify Pinterest PepsiCo Financial Times Heroku they miss fly iio but they're a great example too these companies have all adopted earling based languages to achieve High concurrency fault tolerance and scalability in their respective domains also twitch twitch isn't using it anymore but we use it a bunch for the marathons and it was so good for that it was so good in conclusion whether you are building a new messaging platform a real-time gaming service or any other hyperconnected app I strongly encourage you to consider the earling VM and Elixir is your secret weapons for succcess their unique features and capabilities can help you establish a strong foundation for your app and scale it to new heights without compromising on performance or reliability thank you Hoon for writing awesome article I loved every word of this other than the word flutter I am so thankful you wrote this and that you gave me the opportunity to once again rant all about how powerful earling and this whole ecosystem is let me know what you guys think in the comments I know erlang and elixir aren't for everybody but I think it might be for so let me know until next time peace NS




## The Simple Beauty Of Pull Requests - 20231206
whole requests are incredible they're the base unit for so much of the ecosystem around software development and I feel like we don't take the time to appreciate them enough I spend a lot of time working on my videos with my editors giving them feedback making updates Etc used to spend a lot of time on the audio production World producing songs working with other artists and collaborating and there is no other place where the tools for collaboration are anywhere near this good PO requests are really unique in the point at which they represent changes to work for po request to work you have to have something like get behind it but the value you get when those things combine is incredible at any given time when you make a PO request you have encoded a set of changes with a name and a place to discuss them people can leave comments people can leave feedback people can request additional changes are made before that code merges and even cooler if it turns out that code is bad or wrong in some way after it merges you can revert it because poll requests are a subset of changes and that representation of a set of changes is something that can be applied and unapplied it's it's really really powerful and I whenever I work in other fields I miss it dearly because code is plain text effectively you're able to mark the things that have changed more trivially and apply and unapply those changes incredibly effectively the poqu go so much further than that obviously there's the opportunity for other developers and collaborators to give feedback and identify context for why changes were made because you can be looking at some code see something happened click the poll request to see why it happened and read the whole discussion that happened there but it goes even further than that because a PO request itself can have additional things run just by creating it you can use things like GitHub actions or other CI tools to automatically check the code in specific ways you can have CI that alerts in your Discord or your slack when these things happen both when a poll request is made as well as when one is merged or when a specific person is requested it's a base unit of change poll requests are incredibly powerful not just in how we collaborate with them but how we integrate with them too and I don't think there's really anything else that does that I've played with a lot of different Tools in video I swear by frame iio it makes my life much easier for passing assets from me to my editor giving feedback leaving comments and doing all the necessary things to get good videos out but man if I could revert a change with one click it would entirely change how we manage our videos if you want to see just how powerful these things can be look at a tool like graphite who just recently started sponsoring the channel graphite is absolutely incredible here's a poll request that Julius made recently where he adds the ability a call back URL to not be just a local server reference but instead route to anywhere else he describes why these things are happening he gives it a specific title that is checked for in CI and if it's not titled with the right prefix it won't pass and we won't be able to merge it all of the specific changes he made are in here I can leave comments we can see comments that have already been resolved where people pushed back on specific things myself included saying I don't necessarily like the name for this but this lets us give this feedback have this experience and just gener really work together better it's not synchronous so it's not like we're all editing a Google doc together but that's almost better in a lot of ways because we can contextualize every change in line really really well and if you don't like the GitHub UI the Primitive of a polar request that it provides can be done much better in a tool like this with graphite and even if you don't like the feature Branch hell that most GitHub developers end up in again with the tool like graphite you can use stacked diffs and you can see the specific versions here here are all the ways that Julius has tried to make this change there's apparently 51 of them because him and Mark have been going back and forth making adjustments to this so if I want to see what's change from version 44 to 51 now I can see just the changes that have happened in that time and this is just so powerful there is no other field that has this good of workflows around what changed when and why with all of the additional context that come from the comments that come from the feedback it's so cool and I think we need to take more time to appreciate these things that are unique to our field as as developers because again we don't have this in music we don't have this in architecture we don't have this in other places we certainly don't really have it in gamedev and this is different from my usual content but I wanted to take the time to reflect on what makes this stuff so cool why are poll requests so cool I use them in my own personal projects even if nobody else is contributing just to keep track of what I'm changing and why and I find these workflows to be incredibly powerful what about you do you work in other fields that don't have things like PO requests what are the workflows you have there how do you feel about PO requests do you think they're good enough or that we can do better also have you tried out graphik it's been a really nice tool for me to use for all this type of stuff if you want to hear more about alternative git workflows and why I don't necessarily use GitHub directly anymore I'll put a video about that there and if you're not interested in that YouTube think are going to like the video underneath it so check those out if you haven't already appreciate youall a ton peace narts




## The State Of HTML - 20231002
HTML is great it's so great that the people who keep putting up these awesome Dev surveys just put out one focused entirely on HTML the results aren't out yet because the surveys open until October 10th so if you're seeing this video before then make sure you check the link in the description and go check out the survey maybe even do it before you watch the video so you can see how you feel without my bias then obviously come back and watch this so you can see how I make my decisions coming up in the future we'll take a look at the results too so without further Ado let's do the state of HTML survey while web developers tend to focus on JavaScript and CSS none of what we do would be possible without HTML acting as the foundation it has long seemed like HTML wasn't evolving but things may be changing new elements like select lists are on the horizon cool new features like popovers and a swath of related browser apis web components suppressive web apps Etc Sasha's done a great job running these surveys but this year they had leveroo helping out leading design and branding for this new survey I'm actually really excited to see the difference compared to previous surveys it starts with everyone's favorite forms this is already so much better designed than previous surveys holy yeah uh damn very impressed okay daedalist method of providing presets for a user to select in a form control while still allowing custom options I have heard of this but I've not used it wait yeah I've used datalist actually I've absolutely used data list and that's silly of me of course autocomplete I've actually used that a bit Gmail media capture more experience than most on that one input show picker heard of haven't used yet seems fine form data API sadly I have the reason I'm sighing here isn't because the API is particularly awful it's because it's really hard to get type safe data out of form data in building the bridge between your form your validation and the type safety between the two is miserable I haven't seen select list no browser support that's why I haven't content editable plain text only with no Rich Text I hadn't heard of that but that does sound very useful it's also a cool feature that if you pick something you're interested in that at the end of the survey you'll be part of your reading list that's really cool which input types have I used I've used Range number I use file a lot I've used data a good bit time I used once daytime local I use a good bit month I've used I don't think I've actually used week before but at school that exists color I've used email reviews televused URL I've used so we mentioned that if I want to put something on my reading list I have to manually plus it oh above yeah that's the add button cool so if I want to read about that in the future and click that and now I have that in my reading list for later that's actually really cool which are the following Forum features have I used required absolutely pattern I've not this I have I think some of these are being used under the hood with something like the react hook form but I'm not super like I've done custom validity and I've done check validity I haven't reported validity before though I've absolutely use these I'm curious about invalid event though as well as the pattern attribute and Report validity so I'll add those to me read later what are your pain points around HTML forms type c 50 integration with reactive JS Frameworks relationship between HTML elements and validation layer cool let's hop to interactivity this is where a lot of HTML has really grown over the years where before HTML was almost entirely static and you're light on JS for all the dynamic behaviors now there's more and more Dynamic stuff built into HTML itself for interactive behaviors like a dialog box such as a dismissable alert or a sub window which I have used before and will continue to or details with a summary a disclosure widget that can be toggled or hide or show content interactively this I have heard of I haven't used it I talked about it before in my HTML tier list video yeah I'm interested there are definitely use cases for that an exclusive accordion I I remember playing with this for something oh it's not even supported yet so I guess I was playing with it and that's why it wasn't working but that's a really cool thing to split up in group details based on names and identifiers see that being really useful popover I have spent so much of my life doing pop over related things I'm so happy this is being built into HTML now the inert attribute I have never heard of actually ooh and invisible to assistive technology if you're not familiar putting disable on a button sucks because it makes it not work properly with most screen readers so having something be inert instead it's a really good idea I like that a lot which of the following down attribute related methods have you used yes yes yes yes and yeah I'll use all these again so the following Dom HTML string handling features have you used I have used all of these Dom Parks is a fun experience if you haven't used it before Oh no that's not what I hit I wanted all of these I undo that as you guys see making forms is not the easiest thing which if the following element moving Dom methods have you used have I used insert adjacent element before I don't think I have I've done at least parent append I've used element. before I think I oh I remember one weird place where I used that for like a side project replace children of absolutely used fragments I've not fragments do seem really cool creating like a partial document within your document being able to move it around sounds dope I'll say I know it's not watching I'll just throw it in my read so I can learn more about it later which of these methods have you used to add interactivity or dynamically modify HTML obviously yes yes yeah not interested anymore and a certainly not interested in web components if you all know me rear pain points are on Dynamic HTML changes ooh uh accept forms because honestly my biggest thing with Dynamic HTML is the relationship between it and forms but uh popovers tool tips disabled states with good accessibility those are all things that I've run into a bit lazy loading I have used quite a bit it is very nice Source set sizes this I have used it was fine I don't want to do want or not want I usually rely on components to do these types of things for me like the next JS image component which does a lot of this well resource hints this is really cool for letting the browser know when to start fetching specific things I've heard of it I think this is being done automatically with some of like the link tag stuff in next definitely interested in it and I should actually read more about this because I'm not super familiar with the different behaviors yeah content security policy this I have absolutely dealt with a lot and as annoying as it can be to get set up right dealing with xss attacks is super important so it's important to do that right patch priority I've absolutely used it's really nice for making sure your logo is there as soon as the page loads not as soon as but as soon as reasonable blocking render is also really nice where you can block rendering of content on the page until a certain script is loaded if you want to make sure the script is there as soon as the content appears which I have used sparingly because blocking content always sucks but if your script is really important like analytics scripts or like core behaviors can be nice to do that don't block your whole page on your react script so model for AR VR 3D content I actually know quite a bit about this and I'm excited because the react 3 fiber crew for obvious reasons hyped about this and I'm excited for more 3DS support in the browser in general the controls list video oh yeah uh that I have played with actually in order to have videos that are embedded without the ability to download it so you can control basic behaviors in that toolbar so the following have I used I've used math it was fine svgl absolutely use again video I'll use again object I'll use again canvas I love iframe I'm not going to do positive or negative it has its gotchas picture's fine again I usually use image but picture especially with different Source types can be really nice in audio I am very very painfully familiar with sandbox tribute on iframe yep pretty good for a policy is fine allow an iframe yep I'd say that's overall good I use knots once what did I use it for I don't remember so I'm not going to pretend I do and check it cross origin yep and integrity yep if I include to include machine readable data HTML time and date yep have not used any of these no idea what any of these are and Json LD I'm actually curious about so we're going to put these in the read later let me know in the comments if you know about rdfa or Json LD and what your thoughts are on it because I have no idea what those are and I'm excited to look into them later so when we inevitably have the follow-up going through this hopefully I'll know what all of these things are which are the following internationalization features have you used so laying attribute directory attribute absolutely use laying der I don't think it's directory I don't know what it is so I'm not trying to do don't know what that is either absolutely used international date time I use this once I can't remember what four same with that number I was fighting a lot somewhat recently for the Twitter extension I had made specialization message format proposal for JS API to handle localizable strings with variable interpolation that's a huge win I haven't used it but I want to use this I've built internationalization and worked with it a lot at twitch for formatting of Dom content so having that be built in into the browser is very very exciting International plural rules this I actually have used it's very annoying dealing with different pluralization rules in different languages relative time I've also used and I've not used Locale matcher or segmenter these both sound interesting so in the read later it goes what are your pain points around managing content in HTML biggest one is hydration errors around differences in client and server runtimes I.E rendering a relative date time when server is in different time zone that's the one I think of most immediately trying to think what else I run into I think that's fine web components everyone's favorite a mechanism for holding HTML that is not to be rendered immediately but may be utilized later for JS this is actually really cool in order to render something in the Dom and be able to put it somewhere without having to re-render it later or also to server render something that isn't visible but might be later it is really nice custom elements I have used it I don't have a strong stance either way obviously in react we make these within the JavaScript layer so they don't actual different HTML elements but having them in the Dom having the ability to create your own custom element is pretty cool and really powerful and obviously in order to have used that I don't have to know how to define them I'm not going to say I want to use again because I'm mixed on it and I don't really play with those things much I tend to live in framework land scope custom element Registries no idea we're living in a different world there Shadow Dom I did not love you do a whole video about that I want to go into it here but the shadow Dom feels like a really weird abstraction on top of the Dom and as a way to isolate Styles it's cool but the interrupt between the shadow Dom and the traditional Dom is very painful to work with as we see now with declarative Shadow Dom with Shadow trees it gets more confusing named slot assignment again heard of kind of curious I'll add it to my read list need to better understand it slots is a term that's used for a lot of different things yeah imperative slot assignment a way to assign elements to slots manually via JavaScript so that slot assignment does not have to be managed by the component consumers no idea what this is element internals API assigning hidden semantics to custom elements facilitating accessibility and allowing them to participate fully in forms never heard of it seems interesting Dom Parts casual representation of a part of the Dom that can be updated performantly I love that this isn't supported yet I have not heard of this but that does sound interesting I'll be honest HTML modules again not supported yet have heard about it and it does seem interesting but we're far ways away import tab list from tab list.html with type HTML interesting very interesting and I'm curious to see how I end up using these things in the future which of the following component features have you used I've yet to use slot within web component context I've used it in other Frameworks Like Remix and Astro but I've never used it here so can't say I have exposing our parts nope this I've had to use and it was painful this I've had to use and it was painful this I've not used and I've not used the rest have you used any web component libraries use lightning is lit about component framework I'm pretty sure lit is Right am I crazy does it play with lid a bunch I'm putting lit here relationship between web components and existing JS Frameworks so many parts necessary or even simple things Shadow Dom is rough compatibility with great tools is also rough accessibility it is Landmark elements I've actually used most of these and they seem pretty good tab index attribute this I have put a lot of effort into getting right in a lot of projects so that I have a lot of familiarity with focus group isn't officially browser supported yet because I've absolutely heard of this and was hoping to start using it more it'll be very very useful for like choosing the order where elements get focused when you're doing something like keyboard navigation so that's not just an accessibility win for people who have accessibility requirements and needs this is also useful for any user working with a keyboard on their browser search I have used very nice low vision atypical I I am very colorblind so I account for that generally and I definitely love throwing things through the um ax tools to see if it can detect any contrast issues Mobility impairments I should think more about this you know I do account for this when I'm doing drag and drop stuff in particular I think a lot about that because holding down a click and dragging it to somewhere is not something every user can do vestibular disorders no flashing lights but obviously that's not enough I wish I could do like I wish there was like a 50 it was like we try for a lot of these because we certainly do learning disabilities again like I I try I go out of my way to make our copy as simple and digestible as possible I increase the size of our text wherever I can I do a lot to try and help with this but it's certainly not enough and I haven't studied it well enough to confidently sit here and say yeah we handle learning disabilities well with our services the thing that I account for and I try I guess the question is do I account for this they do so I'll check it but it feels dirty I wish this was like a slider for how how much thought do I put into our design here it is somebody who has a large portion of the stuff here yeah we account for that and yeah when I'm making websites we definitely don't rely on sound but I also make videos and I don't publish srts for them because they're really hard to generate and the ones that YouTube makes are better than the ones that custom generate so these are all things that I do my best to account for especially the mobility thing that I'm thinking about it's like we I have actually blocked a lot of things because like the drag and drop interface would have been too hard for certain users and making sure that we always have a one-click method that can be easily targeted and selected by any user regardless of their capabilities yeah I think a lot about the Apple ad with the woman in the wheelchair who edited the commercial herself that commercial makes me cry at least once a year and if I ever built a tool that couldn't be used by somebody like her then I failed what other things are part of my accessibility absolutely like to think about keyboard navigation script of alt text is super important skip the content links I should do these more I wish I had the confidence to check that right now but I don't same with this with field set and Legend we should use those more information hierarchy absolutely agree I try to use H1 H2 H3 beyond that I don't find them as valuable but they are very helpful for accessibility reasons meaningful link text absolutely agree and I go out of my way to try and make all of our links highlight the the thing that's interesting not just the word here so it's clearer form control labels absolutely visible Focus ring absolutely not relying on pointer only almost all of our hover behaviors are like changing the color so you know there so it looks nice and feels nice that we don't have hover behaviors that are deterministic or even in JavaScript almost all of our pointer behaviors are CSS level so absolutely sufficient contrast yes we're strict about that not relying on color only absolutely first reduce motion yes it prefers contrast I don't know if we're handling this we have really high contrast but we don't provide alternative CSS for users who prefer that probably should I'll think on that one which screen readers do I test with just a voiceover I use the Tesla nvda a good bit I haven't used Jaws in a long time and I haven't used TalkBack ever hey voice over is that's the Mac one right so that's the one I obviously use the most because I'm usually working on a Mac but nvda is like the go-to windows one so I try to do testing on that too we had a lot of issues at twitch where nvda would have weird bugs with things like reading chat so I put a good bit of time into nvda I use ax and I use Lighthouse and I don't use the other things voiceover.js actually sounds very interesting so I'm adding that to my read later biggest pain points around web accessibility I am trying to decide which angle to take here I have a lot of thoughts the biggest pain point about web accessibility for me is access to teams for sure access to the devs games building by my general Point here is that for something to be accessible the people who have accessibility needs need to be able to access the team building it because no matter how many like high scores you get in Lighthouse and an ax there will be things you can't account for through tooling and if you have users that have these needs they should be confident excited and able to reach out to you to let you know where your service is failing them so I think it's really important to have good access on your services and applications not just in the sense that your service itself is accessible but that the team who built it is so users who have specific needs can reach out and get the assistance they need to make your service accessible users with accessibility needs are some of the hardest working people I've ever talked to in my career now this is a web dev but is it like a professional in all sorts of creative non-creative Fields they have to work so much harder to make these things work for them they are more than willing to reach out if they're given the opportunity if we really want to make the web more accessible then every single page needs a button at the bottom that's an obvious contact us with with any needs you have that are keeping the service from working for you and if Services don't have that they are not truly accessible no matter how high their scores are on these tests anyways native like web apps oh boy this is going to be a controversial one the file system access API this I have used very very useful the badging API select badge on the web applications icon to notify about updated State this I've heard of and actually do need to use this more it's really really powerful oh this I've used it's really nice to allow user to share things from your web page allow oppressive web apps to control how they are launched EG in a new window or tab I have not heard of this but this is very interesting and I want to play more with pwas for a lot of reasons so that is going in my read later list four sure file handling API file handlers action open file Yep this again we're using for a lot of things and for pwas in particular very very powerful window controls overlay API play override window controls play custom content over the title bar area I did not know this was a thing but that is very exciting once again read later if you're not familiar this is the like part of the bar of your web app like if I go out of full screen this guy here with these controls here being able to control that change the color maybe have content overflow into it it's really nice exciting that that's part of like the window API now isolated I've never heard of before versions in signed updates fascinating I'll say interested for that too if I used yep flutters not a JavaScript framework I mean it is as much as electron is I think it's weird to put electron here in tari here because Tori's cool but you guys know how I feel about the rest here so I have to say that native text fine game engines I unity and unreal cool I abuse local storage abuse session storage I've used document cookie I should use cash storage at indexeddb more but I don't right now have you used any of the following person web app Technologies or apis at manifest I have service worker I've used mock service worker I've not had a good enough reason to use a service worker in a real app just yet I want to though not but I want to in notifications I have and now they're supported and Progressive web apps on mobile specifically on iOS those are much more exciting than they've ever been back at it what are your biggest pain points around making web apps that feel native iOS I love iOS but they they do not have much in terms of support for proper pwas it's getting much better but there's a ways to go animations web animations feel so rudimentary compared to Native tools yeah if you ever tried to make nice transitions on a web page similar to what mobile does it's miserable react native has really good animation stuff but that's like a whole separate layer built into react native through that native layer once you've built a native app and taken advantage of like Swifty wise animation Primitives built in it's really painful going back to the web and realizing how far we are other tools and features oh boy 11t have used Gatsby I've used and didn't like Hugo I have not actually used Jekyll I used and don't like next I obviously love next I've used but need to use more I will put that there what else have I used I feel like this covers most of the things I've used recently yes felt kit worth putting in here solid start probably yeah and remix yeah WordPress not being in here is funny yeah uh remix isn't a site generator because remix has to have a server in order for remix to be a site generator you have to run a script that goes to all the pages and saves the HTML so yeah remix is not really a site generator it's a server where all the other things have some form of static out or they're based around the static out view is covered with nox view cannot generate a static site copilot yes absolutely not use next Marquee I miss a dearly Center I don't miss as much used frame I've used blink and I've used plain text good to have Marquee get some representation in here we love our old favorite element we're just using HTML features or browser apis are you unable to use regex backwards look up immediately comes to mind uh webrtc video greater than 30 FPS looking at you Firefox what other things have I had issues with uh view transitions I really want more browsers what else missing anything you all know me better than me at this point I think this covers most of it we're gonna go with it who is existing HTML features of browser apis are you unable to use for other reasons date time picker web components I guess that daytime picker probably fits here honestly DX Integrations with other Frameworks pwa is a good one you gotta add three elements oh God no this is too many things I want oh ow my soul I want so many of these I want almost all of these really badly infinite scroll sticks out immediately I need that tabs would be a really good thing and a custom yeah oh God it's really hard not picking any of these others but I need all of those so badly switch and toggle uh yeah I think I need toggle slightly more than I need tabs but literally all of these would be huge other than star rating who the cares about star rating like like can I do the three I care about the least star rating I care about barely segmented buttons yeah and data table like it would be really hard to make a data table that works for every user's needs now this this just feels like an impossible feat but the amount of hell I've went through trying to make a toggle that works in a form properly in the amount of times I've had to do that yeah please please pretty pretty please oh then yourself how many developers use the library's packages components that you create or maintain we're at thousands we're not at Millions yet we all need to get to work on that but thousands of people are using the stuff that I and my teams build ow does TSX count because every time I talk about HTML my jsx behaviors leak so if this is the split between typescript and like jsx I spend about 50 50 but if it's not then it's entirely jsts I'm gonna do 50 50. because jsx feels like and behaves like writing HTML and the result in my dom is HTML what do I use HTML for blogs or other text Heavy sites Design Systems desktop apps yes yes entertainment programming technical tools Telecom social media covers most of what I'm doing now nice and about me how old am I the mustache absolutely skews it heavily correct answer was 28. 11 to 20 years experience coding for way too long now company size two to five look guys it's hard yearly over yes I have a CS degree live in the US man white cognitive and colorblindness foreign Ed me the link uh how can we improve the survey on best effort questions some amount of flexibility on how much effort would be nice I.E the do you accessibility questions about what do you consider when building absolutely want the email when this is done let's see my scores 865 points I'm in the top two percent I would hope so because I spend so much goddamn time thinking about talking about looking into all these things and I have my reading list we did it guys what about y'all did you do the survey what was your score what was your favorite thing you learned about HTML in this and are you excited for me to cover the results later in the year once again want to shout out both Lee and Sasha for the hard work they put in making this awesome survey without these it'd be really hard to know how people feel about all the awesome changes happening to the web from JS to CSS to now HTML I really genuinely enjoyed the survey and the quality service keeps going up and I'm so excited for both the results of one and to see what y'all have cooking next thank you guys again and remember if you want to try the survey out links in the description and the top comment if you want to see my thoughts on the CSS survey within that video in the corner because there are some really interesting stuff there thank you guys as always these nuts




## The State Of Javascript - 2023 Survey Breakdown - 20231208
it's been quite a year for JavaScript from the huge push towards the server to signals to the angular Renaissance to all sorts of new tooling appearing almost every day feels like 2023 is a year for the books in terms of the impact it's had not just on JavaScript but the web as a whole as such the JavaScript survey is more important now than it's ever been which is why I want to take the time to do it with y'all and also make sure the Link's in the description so you can do it if you haven't already the end date is December 15th so if you want to do it do it soon so that all of our input can be part of the results here it's a really important survey and I know I'm not the only person using this make technical decisions about the things they build and the direction they're going in with their projects so without further Ado let's take a look at the survey JavaScript started its life as a browser language and then went on to conquer servers with node and in 2013 it seems the ecosystem as a whole might finally be ready to try to bridge that gap between features like server components Frameworks like solid and quick and meta Frameworks like NEX and felt kit providing a better way of serving code and data to clients has become javascript's Next Big Goal or should we say typescript at this point it's become hard to distinguish the two so let's not even try instead take the survey and help us figure out what's new what's old and what async awaits Us in the new year to come good pun let's get started features welcome to the survey yep which of these features have you used Dynamic import yep I'll use it again noge coing I absolutely love private Fields logical assignments I haven't used this directly but it's nice it's an interesting feature I feel like it's not readable enough for me but uh I've not used it so I'll leave it unchecked error cause did not know about that that's actually really nice that's really nice uh that I've used which of these oh of course match all yep and Rex that I've not used replace all is still like my go-to funny enough I've had some issues with replace all because in Mobile JavaScript specifically react native a lot of the JavaScript run times are out of date enough that they don't actually have replace all support so yeah that's always been fun and then match all is similar but for Rex I've also had fun issues where I didn't realize that rexes are by default Global so it's possible to have a Rex that you run against the same string twice and it gets different results like every other time fascinating to see that they have a match all which should hopefully theoretically fix a lot of those weird behaviors yeah Rex and javascript's a whole thing array. fine last is phenomenal array. two sorted interesting so it doesn't actually sort the original array it creates a new array that is sorted I've not used that but that's really nice it's what it always should have been array at two reversed same deal I don't need to add those to my reading list those are just cool that they exist and I will actually use those in the future and then we have array. width which inserts in that position so in position two it inserted a six interesting did not know that was a thing I don't necessarily love the word with for that but I'm happy it exists and then two spliced so array. with creates a new array with that additional value doesn't mutate the original and then two spliced mutates the original I don't love that this has a different syntax it's like one Zer February I don't even really know what the zero does I'm assuming it's like how far to shift it but spliced does affect the original array to splic doesn't mutate either okay then I don't like these examples I I don't like how they made these as different looking as they did also I don't like that there's an additional index there clearly I need to look more into two spliced so the difference between width and just setting the value is that you're creating a new array with that one value updated so in this case we took the original array 1 2 3 4 5 and we made a new array where three is replaced with six so it's actually pretty handy if you want to take a piece of data and have a slightly different version of that same data this I could see myself using two spliced feels a little more chaotic but it is nice being able to insert so curious to see how people use that and how common these things get top level a weight love it promise all yes you know how we feel about promised all settled here boys and then promise. any any is fun for promises because like when any of these things return just resolve right now so I know something's done I have used it I don't find too many use cases for it so I'm not going to say I'd want to or not want to use again but very useful good old webg another one of those things I can't say I necessarily want to use again I like using webgl through abstractions like 3js and react 3 fiber but once you get into webg directly it's a little painful CU you're for those who don't know webg it's the graphics layer for the web so it's writing GPU type stuff so if you want to do crazy 3D game environments and stuff that's going to run in a webg almost always yeah means you're writing very Shader low-level code that doesn't necessarily feel like the thing you normally write in the browser but once you're over that hump you can make really cool things with it web animations web animations are cool I don't have wait like is there a web animations API now cuz I'm curious allows for synchronizing and timing elements presented on a web page interesting I'm not actually familiar with this interesting this lets you on a browser level keep animations in sync this is something that's been missing for a long long time we've needed this forever it's actually one of the reasons mobile is so much better in experience than desktop and web because mobile apps have proper animation layers with prioritization and a lot of native stuff to help with that whereas the web you just got to have JavaScript make sure the right CSS is in the right place at the right time and when an element needs to go away that you can animate it before before it goes away little things like removing an element from the Dom there's no built-in way to animate that and I'm pump to see a browser level animation API trying to address that and now web RTC I'm just going to click that and youall will know how I feel if you want me to do a longer video about the state of video on the web more than happy to just not something I want to hijack this whole video for but uh yeah web RTC is really important it is not really fun web speech API this is one I have not used but I'm really happy it exists if I understand correctly we speech is making it easier to have elements speak for people who are for any of many reasons unable to read with their eyes on the browser be it like visual impairments be it technical restrictions be it you have really bad ADHD and struggle to read when you could just be listening having speech Primitives built into the browser is actually really really cool and I'm hyped to see where that goes oh good old websockets I'll say I'd use them again websockets are really important it's the easiest way to send updated data to the browser that isn't just pulling on the browser they're not the easiest thing to implement and the current crop of providers for websockets are not great so I am excited to see where websockets go especially now that we have companies like party kit and live blocks pushing so hard to really innovate the developer experience around websockets but I haven't seen that much improvement since the good old socket.io era for those who don't know socket.io is the first like really good rapper around websockets that worked even in browsers that didn't support websockets and that was actually created by G Mo Ro who then went on to create nextjs and start forell so really really important stuff websockets are cool but I hope that they can continue to improve page visibility API I want to make sure I'm remembering this correctly but I'm almost positive I have used this yes so this API lets you know when your browser's visibility has changed so if you background or foreground your web app or you have like other elements covering things up makes it way easier on the window level to see which window you in and when you are or aren't focused it's a really powerful way for like what we do at ping to Auto Hide and stop decoding the video feeds in the browser when you switch tabs so that we don't have to be decoding like six video feeds when you're in a video call with other people if you're not even looking at the app at that point so really powerful stuff I have played with this a bit very excited to see where it goes in the future but yeah I'm very excited for pain visability the broadcast channel API is also a thing I've played a lot with for pay you might have already seen people using the broadcast channel API when they were doing the crazy stuff with multi- window showing like the same app where they would like move the windows around and it would change how like were laid out so you have like three Windows showing somebody's face split up like a mosaic really cool API for passing context between different browser tabs and windows for your web app super powerful for like shared state if you've been on Soundcloud and you saw how if you have three tabs open it knows that you're playing in one Tab and shows you what you're playing in the other tabs and you can pause it between tabs and such what I used it for for Ping was having a pop out control panel for the web app so when you're in a call if you want to mute your microphone or change audio devices or turn off your camera you don't have to be in the same tab to do that and I did that by making a custom Jodi atom that would watch the local storage and then pick up events when you modified the local storage so the other tabs could update accordingly it's a really surprisingly easy API to work with and it lets you share context between different Windows of the same app or even an iframe with the same origin super super powerful stuff and it's really fun to play with so absolutely recommend it turns out I was a little wrong about the web speech API it's primarily for speech synthesis as well as recognition so it's a browser level implementation of speech both ways so you can take text and have it speak it and you can also have your browser in your web app using native browser API recognize speech too I'm happy that speech is getting attention but I hope accessibility speech doesn't get left behind in the process because that's one of the most important places for this type of tech to be implemented at the very least you have less of an excuse to not have good support for screen readers on your app in geolocation API you all know what geolocation is I'm happy that there's a browser standard for it cuz now you'll get the little notifications like do you want your browser to let you use your location and you can just hit no none of my browsers have location permissions cool that exists happiest browser level not something I'm interested in personally and then the web XR device API I'm very curious what specifically this entails it's a group of Standards which are used to support rendering 3D scenes to Hardware designed for presenting Virtual Worlds or for adding graphical imagery to the real world I've seen a little bit of this it's again like 3D web stuff I know I have one old friend who built something with this a while back so I know it's like not super new I think webxr stuff is going to get much more interesting once the Vision Pro drops even if it's not a popular device it will make web VR in AR a much more enticing Target and I think that's when we'll see more and more development around webxr stuff and we'll start to see libraries building around these Primitives to make it a really good experience but for now I can't check this cuz I haven't really played with it I have been meaning to do a video about this for a long time let's find in my to-do videos the state of date is a thing I've been planning for quite a while and just haven't done if you're not already familiar with the tempor Coral API it's a browser standard for date time which we haven't really had in JavaScript before let's find some examples the motivation for temporal C fixing JavaScript date I don't want to go too deep into this if you want to hear about it let me know so I can actually make the full video about date time but a quick tldr you have things like temporal do now. instant now zoned datetime a lot of these like very helpful helpers you got do now PL date browser not having a concept of duration before was obnoxious cuz you couldn't really do anything with different dates it would just give you back like a number sometimes but the idea of like taking a duration and adding that to a date and getting a new date is something you either need a library for or we're going to do a lot of weird math for and I'm very thankful we won't have to do as much of that in the future but for now temporal is not supported by quite enough things for me to confidently recommend it but it is a really cool API and I'm excited to use it more in the future Progressive web apps who here has built a progressive web app I want to see ones in chat if you've built a progressive web app before surprising number more than I expected honestly let's see twos if you would do it again negative -2 yeah negative -2 if you wouldn't seems about 50/50 the ability to install your website as an app isn't the best thing in the world and I understand why we've had the pain points we have Google pushed them way too hard but somewhat recently Progressive web apps finally got support for push notifications on iOS which is a huge change that makes them in my opinion significantly more compelling so I think if there's ever been potential for Progressive web apps it's right now because if the only reason you have an app is for push notifications you don't need to make an app for that anymore so hopefully we'll see more people taking them seriously but I personally don't use any Progressive web apps at this point in time so I not the strongest proponent excited to see where they go but I would say my experience overall has been negative might change in the future speaking of things that are overhyped web assembly I should probably do a whole web assembly video again let me know in the comments if you think I should too but at this point in time I'd say It's relatively overhyped specifically because people think web assembly is going to replace JavaScript in the code we use to to write our uis that's not the goal of WM the goal of WM is to take a lot of like heavy math type stuff and the types of number crunching and algorithmic problems that JavaScript isn't good for and offloading them as well as taking languages that are not JavaScript and making them viable in the browser again not for UI but more importantly for inputs and outputs think of it less like a new way to build user interfaces in your apps and more like a server running in the browser in whatever language you want that makes it really low latency to do heavy work stuff like figma for example doing a bunch of compute to process images and graphics and then rendering that in the browser VI the JavaScript layer it's really good for those types of things but I'm still very bearish on UI Frameworks built on top of wasm and things like rust so that's why I'm iffy on wasm but again if you guys want a full video on it let me know and I'll be sure to do that in the near future anyways what are my main pain points regarding the JavaScript language that's a great question see the first one's probably like browser support for fun new stuff always sucks to have something you really want that you just saw a new API for and it's just not in like Safari really painful since it's specifically JavaScript I'd say it's not typescript the ability to take my typescript code and drop it in the browser would be very nice and that is a proposal that I'm hopeful to see move forward but at this point in time typescript has to be compiled to be run and that's not the best thing for making an easy portable developer experience for all web developers but other JavaScript stuff has bit me recently difference in run times browser Edge CF Doo node bun Etc I've been running into this more and more even just like doing Advent of code a few days ago I had a solution that was really slow and rather than trying and figure out how to make it faster I decided to move to bun but I had to change how I was reading files and stuff like that which was a little Annoying to have to break out of the standard enough to work around the different run times different expectations so yeah what are my main pain points regarding browser apis web RTC is a mess it's just device API especially across browsers and how you get video feeds in and out of it is absolute chaos The Matrix of which resolutions are and aren't supported by different browsers and which like codecs and such is horrifying I could make a 2hour long video of all the pain I've experienced with web RTC in the browser what other browser apis have caused me pain thinking thinking thinking does CH count I'm going to pretend course counts and move on yeah date is a good one too thank you chat hopefully date gets better with tempor but we got some work to do anyways let's talk about what we're all here for front and Frameworks so react never heard of it no idea what that is obviously I would use react again view I feel bad hitting this but this is my truth my problem with view is not that it is bad my problem with view is not that I can't recommend it my problem with view is simply that it's not for me I don't like single file components I don't like being forced to structure my UI in that specific of a way and I really like the react ecosystem I don't have a reason to use VI I would love to revisit it once Vapor happens I'm actually really excited about that and I think that the view ecosystem and Community are in an incredible state it is The Logical alternative to react like these are the two you should be deciding between most of the time I personally lean towards react so that's just my truth speaking of my truth angular well I am really hyped with the direction of angular and the hard work the angular team has been doing writing it still feels like pulling my teeth out one at a time I can't do it it's not for me if they manage to make functional components a thing and start moving out of the terrible class component land I do see it getting much more compelling but at this point in time I'm not an angular person it's not for me I'm happy that for those who are using it and for those giant code bases that are stuck on it that the experience is getting much better they deserve to have a good time developing and nobody should have a miserable experience just because they picked the wrong framework 3 years ago so very excited to see angular improving as much as it is but it's still very explicitly not for me preact if you're not already familiar with preact it's a minimal alternative to react that's meant to be surprisingly compatible so your code looks and often is just react code I like preact a lot I owe it hugely for my own deepening of my understanding of the web because you can set up preact without any build tools and using things like HTM inline it in the browser and just have an HTML file with an inline script tag that's using react and it helped me better understand the relationship between all these parts so preact is a learning tool absolutely incredible highly recommend preact is a quick way to have a react like experience in an without a build pipe awesome really like that preact is an alternative to react for building a big web application yeah iy you're on that spelt I'm really happy with runes runes are an acknowledgement that the felt Simplicity isn't a real solution to most hard problems and that embracing of complexity and building Primitives to help work around it is something that genuinely really excites me so for me this is an easy used and would use again I'm excited for that future spelts one of the most promising Frameworks right now and I'm very excited to see where it ended up over the next couple years Alpine it's not for me it's very similar to like HTM X but more focused on the webdev JavaScript markup side it's a way to make your UI update without having to write JavaScript directly instead you put all your logic in your markup and in your HTML it's not my favorite solution for that I would just use HTM X personally but I'm happy that there are people pushing to make this possible so that you don't have to write a bunch of crazy JavaScript just to update your website so cool it exists explicitly loudly not for me lit we talked about lit in the framework tier list video which is coming up pretty soon again not for me lit is without question the best way to write web components if you want to write a component one time and have that component usable in all sorts of web apps from here on to the future or if you have like a Blog and you want to have a custom element in your blog this is the best way to do that and I can't recommend anything else that said not for me very explicitly not for me because I don't like web components building a whole application with them is not a pleasant time but if you want to have a good experience building web components because you need them it's the best way to do that for sure solid JS if you're not already familiar I actually gave solid JS framework of the year in 2022 the amount of progress solid made in 2022 was absolutely nuts think of it like solid is the framework that learned the most from every other framework it's created by Ryan carniato who is one of the biggest web dev nerds I've ever known he cares so much about web Technologies and making the experience of building web applications better he also felt like we left signals behind when we moved out of like The Knockout era and wanted to bring them back in a modern context the result is a framework that feels a lot like writing react but has so much power around those core Primitives I've enjoyed everything I've built with solid it's very easy to make a really performant web app and the work they put into solid start which is their nextjs alternative makes it more and more compelling every day solid is without question the framework I'm most hyped about outside of the react ecosystem and I excited to see where it goes I will continue using solid for random stuff all the time and and yeah keep working on it Ryan any of you are looking for more deep nerdy web stuff to watch I'll put a link to Ryan carne's YouTube channel in the description he's my favorite YouTuber doing Dev stuff that I personally watch his streams are nuts and very very deep nerdy technical detail stuff but highly recommend it oh quick I can't honestly say I've used it enough to check one of the first two so I'm going to check heard of it and would like to learn I want to use Quick a bit more because I don't know enough about the DX whenever I look into Quick whenever I talk about quick whenever I see other showing off and talking about quick the issue with quick is they're so focused on the potential technical wins that I feel like we lose the conversation about the developer experience quick solving problems that I don't think are too big of a deal and in its solutions to those has made it so I have to think about more as a developer that all said man I am excited to see where it goes it's cool having more Technologies pushing web standards I just want to have good developer experience too and I don't think that the amount of wins quick brings is enough to throw away existing ecosystems and I'm excited to see where things go over time stencil a web component compiler for building fast reusable UI components and a static site generated Progressive web app stencil is explicitly not for me it's a web component compiler weird experience not for me feel free to look into it if you're interested in the idea of compiling out like other Frameworks to make a web component but both its inputs and its outputs aren't interesting to me not for me look at that look what made it in was not sure if we would see this here I have a bit of a confession to make guys I know I'm a big proponent of HTM X and I know that I talk about it a lot and how important it is never actually used HTM X the reason I like HTM X isn't because I see myself using it heavily it's actually the opposite it's because I don't see myself using it I like HTM X because it enables people who don't want to use react or modern web def tools and Technologies to build good experiences without leaving their language and their templating systems you shouldn't have to use something like react to build basic interactions in your application the browser doesn't support it like there's no way with browser standards without JavaScript to be clear to have a button that when you click it it shows a loading State and then it shows a done State there's no way to post a form without changing the route that you're on all these behaviors are because of how the browser Works without JavaScript and the goal of HTM X is to let you go a little bit further without having to write that JS yourself I think this is important because it raises the bar for when something like react is necessary and it keeps people who don't want to use react from having to use it for quite as long and the more important part there is once they do cross that line and they have enough interactions something like react makes sense they'll embrace it much more and get more of a win from it I'm excited about HTM X and how it impacts the entire ecosystem and honestly I do hope I get to learn it a bit more in the future other options I'm a little surprised Astro didn't make it in but it makes sense ready for a real spicy take hmx is a front-end framework Astro is a backend framework Astro runs on the server not the client Astro is frontend Dev is making a backend framework and htx is backend Dev is making a front end framework and I think the contrast there is actually really interesting apparently as's on the next next page which makes sense so we'll do that there how happy am I with the current state of frontend Frameworks I'm feeling great the state of these tools is incredible what pain points have I encountered using front and Frameworks web components bundlers bundle size getting flamed on Twitter I think that's a pretty good summary of the the pain points I've encountered it's obviously more but anyways let's talk about meta Frameworks everyone's favorite topic nextjs what's that obviously I would use next again right now more than ever I'm so happy with server components and I'm excited for other Frameworks to have support for them but honestly like I can't imagine building modern web apps without server components at this point even just hacking out a quick thing like few days ago I was working on an app that takes an old blog with SoundCloud links and tries to parse out the SoundCloud links and then download them locally being able to write all of that with server components so that I can quickly write actions just run it on my machine have a web app where I click buttons and it runs commands is so powerful having your back end and your front end have that strong of a relationship is incredible and I've been very happy with my experience using it that said n has worked hard to make one of the best full stock experiences of any framework and application development experience it's nuts how much you can do with n they've built incredible tools everything from their custom like fetch wrapper for type safe fetching from the server to their full stack plug-in experience to view use and just the state of the n and view ecosystem is better than ever and the hard work the N team has put in is incredible and I do really need to sit down and play with it more because n is so good that it makes me consider using Vue Gatsby never again remix I am going to say would use again because I'm excited for its future in its current state I do not see myself using remix I don't like the way loaders and actions work I don't think the route's the right place to Define all of your serers side behaviors I think the ability to define those behaviors in components is powerful enough that I don't ever want to go back to traditional route data loading but I'm excited to see where they end up going with it especially once they get server components working not into route level data loading the potential performance wins and the state of the water falling it's it's it matters but it doesn't matter that much once you're waterfalling on the server it's much less big of a deal than it is on the client I actually already have a video where I talk about this my moving off the edge video which yeah if you want to hear more about this stuff feel free to do that and also make sure you check out Ryan carne's stream because he very much disagrees with me on this there's a lot of people who have worked hard to battle and beat the hell that is waterfalling that said once you move the waterfalls to the server they matter exponentially less so I don't care as much and I think that the DX loss of Route level data loading is great enough that you should try to avoid it if you can anyways Astro I love Astro I've never had so much fun quickly hacking out a static web app and being able to quickly embed things like react in it the Astro team is working really hard to make it more powerful than ever and I'm super excited for the future 11t not for me 11t was similar to Astro it was trying to make a really performant static site Builder so you could write a little bit of JavaScript a little bit of markup some markdown or whatever you want in gener decent static web apps out of that happy it exists not for me pav the way for a lot of cool new things to happen in the future though spelt kit there are so many good decisions in spelt kit that I'm really hyped about I still don't love the amount of code gen necessary to get typescript working properly but that's my biggest complaint with it almost everything else is a really good design decision I think they did a great job of separating up back end versus front end I think their file based routing is honestly a decent bit better than nexts I really like their syntax it's simple but the little Plus at the front of a file route so that you have it at the top of your file tree and VSS code these little touches make the developer experience around spelt kit one of the best I have had even if I don't love single file components in the spelt markup syntax so spelt gets in a really good state to the point where I could see myself using spelt as a result so yeah spelt kit and NX are both in incredible places docusaurus docusaurus doesn't get enough love I personally am using nextra right now but all of the work I did in docusaurus was pretty solid it was a good experience overall in the performance of the things I made in docusaurus blew me away just navigating a docusaurus site because it is a single page app the way it does client side routing feels really fast and once you've loaded the first page in a docusaurus site The Experience navigating around it is just incredible so the result is great the input and developer experience pretty damn good too docusaurus deserves more love shout out to the team working on that solid start solid start has had a crazy Journey it started as its own custom set of plugins built around vit in order to make serers side vit possible then they jumped on top of Astro and built heavily around Astro for a new version then went off and developed bling which was a way to do serers side data stuff be it a mutation or data Fetch with a good experience taking that server code and mounting it and using it in your clients just by writing server dollar sign really powerful stuff I was hyped with the proposals they blew my mind back when they first started but now a lot of other tools and ecosystems have started catching up and yeah solar had the first real competition to trpc that I saw it was one of the first Frameworks to take seriously this complex relationship between the server side and the client side and give you the tools you need to build around that as a developer so I absolutely love solid start I'm very excited to see where it goes I believe correct me if I'm wrong Ryan it's currently being rebuilt around the new uh I believe it's called Nitro by the V crew where they're making a generic set of Tools around V for serers side rendered Frameworks like Astro like solid start like n so that we can all have one shared starting point and not have to rebuild all the server side stuff and all the client side stuff and all the bundle splitting so that's really exciting and I'm super hyped to see where solidar goes Dino fresh explicitly not for me I I'm happy it exists if you're not already familiar with fresh think of it almost like the remix of Dino built on top of preact instead of react it's very minimal it's not moving particularly fast and the DX wasn't anywhere near good enough for me I'm hopeful that I'm wrong in the future but at this point in time I'm not super impressed with fresh other options me overall I'm very happy with the state of things with meta Frameworks things have moved really far really fast and this year in particular I feel like we saw a lot of people trying to catch up because next did something different enough that there was a perceived gap for people to fill and everyone tried to really push their full stack framework forward during that window and I think the result is incredible genuinely like the amount that all of the tools for all of the major Frameworks improved over the last year is insane and I can confidently say almost any option in that list will be a good experience for you now significantly better than the one you would have had last year and that's a dope exciting Trend what are the main pain points um sharing code between backend and front end runtime discrepancies hydration errors next and dates building tools that work in greater than one of these Frameworks yeah this one in particular I've had a lot of pain like with upload thing for example building upload thing in a way where it's a good experience for people in n and in next and in felt kit oh boy the next section my favorite testing ah tools for testing your code just I would very much like to never use again just was built before node was really a standard and it invented a lot of things in order to replicate enough of the browser and the results a bit of a mess it I don't have a good time with it and it feels like every testing tool since has had to reinvent a lot of just just to continue supporting things that were written around it and the result's a mess the result's an absolute mess mocha I if I recall mocha's like pretty behind it came out around the same time as just originally and just slowly petered off I could be wrong on that but I just haven't heard of many people pushing mocha at all it's actually older than just yeah that checks out meh story book I will never again use storybook it is in a rough State it's so slow it's so bloated it's full of absurd amounts of Legacy code I've just never had a good experience with storybook and it's continuing to get worse they like explicitly don't support next and I doubt they'll ever support server components it's so heavy it's so slow it's encouraging developers to build their applications wrong they build them around their components instead of around their user experiences story book's rough don't touch it if you really need an alternative add a private route to your application that only runs in Dev and throw your components in that but like it just does not work Cyprus I'm somewhere between these like I guess just cuz Puppeteer exists I'm not going to use Cypress directly Cypress is one of the first things to standardize running a a fake mini browser to throw your app in for like end to end tests but with Puppeteer and now playright where they're at things are much better so honestly I would say neither Cypress nor Puppeteer are things I would use right now when playwright's gotten to the point where it's at so yeah both Puppeteer and Cyprus aren't necessarily my things anymore puppeter I remember when this came out and just having my mind blown that you could actually run Chrome via the CLI and test things with it very powerful very useful just not something I want to have to use and set up properly when there are now better tools for it like play right anyways testing Library testing library is in a really good State overall the absolute chaos we were going through with just and enzyme was the way that we would test react components for a long time within the just ecosystem and it was a mess it was super unstable it had weird edge cases you would hit all the time that only exist in the testing environment and not in the like greater actual code you're writing miserable experience and Kent dods was not happy with it especially when he was like teaching testing around react and he started working on testing Library just as a better react testing solution and it eventually became the default standard and more and more Frameworks started adding support to it and now testing library is kind of the the go-to and enzymes effectively dead no one recommends enzyme anymore and that's for that alone testing library is an incredible contribution to the web ecosystem anyways playright the only not miserable way to automate chromium tests also Firefox web kit and all those other things too but yeah play rights the best experience I have had trying to do end to end testing it's in a very good State that's what I would recommend right now if you can use it the rest is in an iffy spot web driver iio not familiar with this one get by text is an interesting thing to have a helper for yeah I don't love this syntax yeah looks interesting probably not for me maybe I'll look into it in the future probably I'm going to check this and be honest I'm not looking for new testing tools people will bring me the really good ones if they're good and somebody would have pushed this on me by now if it was really really revolutionary but not for me at this point in time v test is great it was created within the V ecosystem in order to make testing faster and less miserable and it's really really fast like significantly faster it's a little more standard although it is built to try and be like a one to one Gest replacement so it still has a lot of like G isms that said v test is the most compelling unit testing framework I've seen in the JavaScript ecosystem this and the bun testing are probably the two directions I would legitimately consider everything else feels like a bit of a mess and anyways selenium not interested another one of those browser testing tools they didn't even put a description for it that's how you know it's like me test Cafe never heard of it and I don't really care mock service workers yes mock service workers are dope mock service workers industry standard API mocking for JavaScript it makes it very easy to mock any package any layer any fresh call anything really really powerful way to mock stuff in your developer experience both for testing and for development work just making things run they have any good examples yeah control the network makes it easy to browser level or test level hijack HTTP and change what responses you get from different requests it's trivial to mock things at an HTTP level in the browser using mock service worker super super powerful stuff makes browser testing and like mocking inev way better than it's ever been really pumped with the work that's going on in the mock service worker World highly recommend it other options bun The Bun testing stuff's really compelling excited to see see where that goes I'm going to say neutral because I don't give a [ __ ] youall know that about me testing is a thing I I do when I have to not a thing I default do and the tools are better than they were so I'm happy in that sense but me pain points have I encountered while when using testing tools a lot of these aren't the fault of the tools but testing things TS already checks feel like we've gotten better as an ecosystem about that I see way fewer useless tests but there are still a decent number the compatibility and runtime differences between test EnV and actual EnV import mocking hell The NeverEnding pile of just isms people still using enzyme I could go off for a while but this is enough for me to feel good switching to the next section let's not talk about testing for a bit guys I'm tired mobile and desktop time to be the electron Defender again I've always been amused the people who hate on electron the most are often Linux users because if electron didn't exist there would be no apps on Linux like electron made it possible to make good multiplatform experiences as a web developer and have access to things that are on a native level to your operating system it's so powerful What electron has enabled and the number of companies the number of products the number of solutions that exist on platforms outside of just the browser in Windows is largely because of electron being as good as it is everything from vs code to slack to Discord to Spotify there's a reason everything's using electron is because it's a great way to build applications it's not as fast as building native but you can develop way faster and if you do have problems with things like performance you can address those things when you have them but the likelihood you even get to the point where you have enough users that these problems matter has gone up significantly because of electron if you were building things not with electron and using native Technologies instead it's going to take so much longer to even make it work that the likelihood you find users who find problems that you can then fix is so much lower so yeah electron gets a lot of hate because people load too much JavaScript into it and write bad applications that's not electron's fault electron's a great way to write JavaScript that makes good user experiences anyways react native yall know how I feel about react native even just for the the checklist of features that it enables that other things don't like proper hot module reloading and like overthe a updates without having to go through the app store for that alone it's basically impossible to justify other technologies that don't support it so obviously react native is something I hugely support and recommend it's a good technology rethink it if you are against it like you need reasons other than it's too slow because there's a lot of really performant react native apps it's awesome what it has enabled check it out if you haven't already especially with the state of Expo and things react dat is in a really good spot native apps Swifty wi is fun so I'll check this the state of native tools is slowly improving but when you compare it to the speed the web improves it's almost like a meme because for all of these there's only one place where things are actually getting better it's sad that like in the web we have 15 different Frameworks constantly pushing the browser standards forward and pushing what you can do with these frame Works forward to have something like react and server components make the whole ecosystem of the web care more about the server client and the relationship between them there aren't really equivalence of that in Mobile land because you if you're on Android and you're writing native you are using cotlin and Java if you're on iOS you are using Objective C or Swift that means that there is less Innovation fundamentally and that's sad that all said Swift and Swift UI are doing some really cool things and they've learned a lot of lessons from react it's still not in the best state like almost every major version they deprecate huge things because they want to rethink the API like it it's beta and it feels beta but it is fun and there is a difference in Native apps they can be slightly better and slightly more performant but they are much more work to get right and the state of the tooling just isn't there and godamn the last day I open xcode is still way too far away I hate xcode and Android Studio so goddamn much you have no idea anyways Cordova not for me ionic I've defended in the past from what I've heard recently it's not in as good of a state as I seem to believe prior think of ionic is like Progressive web apps Plus+ where it lets you wrap a pwa in a native binary that you can ship to the App Store and install and have access to some native stuff like the native camera the native notification system those types of things not for me very much not for me with the state of react native that's the direction I'd go in but supposedly if you have like a view app that you really want to run on mobile ionic is one of the best ways to do that capacitors again very similar to ionic I haven't looked into it too much and I probably should more in the future no apparently ionic works with capacitor now so that's cool to hear and I've heard good stuff with specifically spelt and capacitor for hacking out a mobile app but I don't know enough to say any further and I don't care enough to look into it if I'm honest nwjs call all node modules directly from the Dom or a web worker and enable a new way of writing applications with all web Technologies never heard of it I'll look into that in the future sounds interesting Expo mentioned them a bit earlier Expo I think of like Expo to react native the way you would think of versell to react they built a lot of the tooling around it a lot of the infrastructure and all the things you need to have a good time writing react native with Expo you can do crazy crazy stuff like not even need xcode on your machine you can init an expo app scan a QR code to run it on your phone and then when you want to ship it to the App Store you just run a command in your CLI and then Expos build servers pick it up and run it through their proprietary Maxs on their weird infra somewhere else just to build the app and ship it for you you don't even need a Mac in order to ship an iPhone app anymore because of Expo it's in a really good State highly highly recommend if you want to build a mobile app that you do through the Expo ecosystem quizar I hate this promise enough to say I'm not interested and will not look into that in the future Tori oh Tori people just noticed in chat that I actually have Tori as a banned word because every time somebody brings this up and makes me want to rip my teeth out one at a time it's not that Tori is bad it's that it's incredibly overrated and people seem to think just by swapping out electron with Tori everything magically gets better that's not how this works most of the reasons I use electron things like accessing your file system it does terribly because you you have to write rust for it so cool it exists I'm happy that the rust people and the browser people agree for long enough to make something but for some reason whenever people bring it up around me they do it in the most annoying possible way like the most possible annoying imaginable way so not something I would go back to personally native script native script empowers you to access native apis from JavaScript directly angular views felt react and all that I've heard about it I I feel like I played with it a while ago and it just wasn't in that good of a state I don't think people understand the amount of effort that goes into react native and getting that working building those bindings in a framework specific way is hard enough building them in a generic way feels impossible building them in a generic way without meta powering it and hiring a 40 plus person team to do it actually feels impossible I've just not seen enough compelling examples of people using native script to build cool stuff whereas I use react native apps every day so this is something I could be wrong about but I want to see good native script apps before I take it more seriously personally other options me generally happy Expo has made it significantly better to build mobile applications which was one of the big missing pieces the electron ecosystem still a bit of a mess and I've heard people using my crazy mono repo around electron I built like two years ago and haven't touched since because there isn't really a good starting point for electron right now that said you can build really awesome stuff with a lot of the things listed here I wish there was more innovation in the space but it's more than good enough right now overall happy and excited to see the progress continue what are the pain points I've experienced native Developers getting mad at me for using JS say that's the biggest one yeah that's all I need to say build tools oh web pack I really hope I never have to write a webpack conf fig again for that reason I'm going to check this obviously webpack is still used in next but I avoid it to the best of my ability I'm not writing much webpack specific code nowadays it is Turbo pack gets further along as RS pack becomes a more usable standard I'm very excited for webpack to finally be sunset parcel I don't know what to check here cuz I've never used parcel directly I guess it's not really used by other things I use like like parcel's really cool it's always been like the slight Outsider pushing standards constantly and I'm happy it exists I'd like to use it at some point I know the team works really hard I know Devon is in particular really really talented and smart and I want to play with what he's built but there's so many other things in the ecosystems I use that I haven't had a reason to really play with parcel rollup I've absolutely used not necessarily directly but I primarily use rollup through vit because rollup is the production pipe in vit and right now in V you use ES build for Dev and then roll up for prod their goal long term is to rewrite roll up in Rust I think it's name roll down and then use that for both Dev and prod so yeah in a good spot excited to see where it goes the good old TSC CLI I use it for type checking but I would never use it for build anymore we got way too many better tools for that s swc is a super fast compiler written in Rust producing widely supported JavaScript from Modern standards and typescript I'm using S swc most of us are using it in next nowadays so yeah s swc is great it's a solid alternative to es build written in Rust good old es build also absolutely love it it's got a pretty rough bus factor in terms of the fact that like Evan bace is the only person really contributing to es build but rewriting the JavaScript bundling ecosystem in goang was a bold thing to do alone he's done a surprisingly good job the whole Renaissance of build tools largely started with es build and Evan deserves a lot of credit for pushing that forward and then another Evan Evan U for taking what happened with es build and making it more useful by adding that into V really good State speaking of Evan and Es build so I just mentioned V uses es build for its Dev mode and Evan youu the creator of you is the creator of V V's in a great state I highly recommend it there are a couple weird be isms that I don't love that don't traditionally follow browser standards and it get a little rough when you go the unbundled path and have too many dependencies and you're loading like 3,000 JavaScript files in Dev mode but it's still a really good thing overall and like vs the way I go when I'm building a single page app to this day I'm actually working on yet another set of projects built around V it's by far the best way to build build a single page app and when I say build I literally mean take your JavaScript files and build them into an output but it's not perfect and I'm excited to see the ecosystem continue catching up turbo pack I feel like I have to check this cuz every time I've tried to run turbo pack it didn't run there's always some weird thing that turbo pack doesn't support or causes some random package to break so I've personally yet to actually run turbo pack on a real code base I'm excited for the support to get a little further it's getting very very close but turns out rewriting the world in Rust isn't that easy and I think the versell teams learned some very important lessons through their efforts on turbo pack TS up is [ __ ] awesome quick tldr on tsup is you point it at some typescript without a config and it spits things out for you that work it's really nice anything that's supported in node natively it supports you can also spit out things like a DTS file and it will run the right TSC commands to produce that for you but when you're just writing typescript you want to turn into JavaScript it does a great job of converting that too just using ES build under the hood a lot of ways you can think of TS up as similar to what V does for for web apps tsf is doing largely for libraries it makes it very easy to take a bunch of typescript and JavaScript code and output something usable in other applications this is what we use for all the packages we're building at ping be it upload thing be it web hook thing this is an essential package for the stuff that we build and the amount of work egoist put in to make it possible is huge highly recommend TS up if you're building libraries you probably already know about it if you're building libraries so yeah it's a phenomenal tool I can't actually imagine doing what I do without it so easy would use again biome biome is very exciting I think biome is more exciting to me as a linter and like developer experience tool than it is as an alternative Builder biome originally started as Rome which was a well-funded open-source VC startup that's goal was to rethink the whole web tooling ecosystem and while it did a great job overall in terms of proving it was possible it just went through way too much developer turmoil and like people joining and leaving crazy drama and eventually slowly unwinding and one of the lead contributors to Rome has since forked and created biome to try and push it a little further forward we'll see where it goes the linting is in a really good State I could see biome replacing prettier even within the next year but the rest is going to be a rough rough ride we we'll see where it ends up I wouldn't have put this in build tools for that reason we'll see where it goes other options feel we covered everything I care about here oh RS pack should absolutely have been in this RS pack is super promising it's yet another webpack Ruster right but it's much more focused on like the the world of module Federation this is the best I can put it like the world of of modules being compiled elsewhere and then blindly loaded into your new app and expecting this all to behave properly for giant like huge code bases with lots of developers RS Pack's really promising in those scenarios I know it's already being used at places like Discord and always forget bite dance yes it's already being used to places like Discord and bite dance the creators of Tik Tok in order to make those giant code bases more manageable and I've seen some crazy numbers if you want to hear more about RS pack let me know and maybe I'll make a video in the near future how happy am I with the current state of build tools oh we also forgot bun bun is Bun's a build tool too so we'll put that in there as well so how happy am I overall pretty happy we can make some improvement like the fact that almost none of these tools properly support nextjs at this point in time is sad turbo Pack's getting close but we're all stuck in webpack land for a little bit longer and I'm very hopeful that 2024 is the year where we can finally leave webpack behind what pain points have I encountered webpack next.js support people thinking they can just rewrite it in Rust those are some good painting points let's move on to monor repo tools never heard of Rush let me know if I'm missing something with Rush chat but I've never heard of it which is a scary sign turbo repo I'll absolutely use again turbo repo is in a really really good State and as minimal as it is really powerful I've enjoyed it a lot it's how we build all of our mono repos if you want some good examples of using turbo we have create T3 turbo which is largely run by Julius and then he has AC Corp which is entirely his thing which we rely on these heavily also take a look at the upload thing repo which does a lot of cool stuff with turbo yarn workspaces at the time very good and important especially when we were using it alongside uh larna larna is the one I'm thinking of larna plus yarn workspaces was the move for a long time we've moved past that since but for a while that was the way we did things and we got yal also not familiar speaking of larna here it is larna was essential at the time but we have made so much improvement since that I think Microsoft made the right call saying hey we're not supporting this anymore and then having that taken over by NX to do their best to make it usable so people have a real migration path was very good of them to do it was the first it's far from the best npm workspaces never once have behaved how I expect them to pnpm has been efficient and really good overall pnpm plus turbo repo has been great overall that said I feel like I'm duplicating a lot of stuff like one of those tools should be able to get more info from the other I shouldn't have to duplicate like workspace info where packages are stuff like that I've had a lot of weird issues where I didn't put something in the right place but I put it in the other one and now nothing works in the error messages just suck but overall P&M plus turbo I still thinks the move NX I absolutely need to do more with I've been talking with the team quite a bit NX is in a really good State overall it almost feels like NX is the next and turbo is the next where NX is trying to build all the plugins all the ecosystem tools all the everything you would ever need themselves and as a result it's the go-to in the angular world I just don't see many people in the react World using it yet because turbo is in a nice powerful minimal State NX is far from minimal but it is really powerful and it is something I've meant to into a bit more so let me know in the comments if you think I should play with an exhibit other options feel like I covered everything I planed to here try think of other important monor repo tools bun workspaces I can throw that in no matches guess I'll just put bun how happy am I with the current state of monor repo tools I'll say neutral I should say happy it was it's way better than it was last year like we're making a lot of progress but things like package version management and like order of events for like typescript definitions and [ __ ] is still rough what are the pain points I've encountered the one I was just hting out a bit was the experience with packages that depend on each other for type signatures and having a good developer experience around that dependencies between packages the problem with this is I'll often need the types to come out of a build step so if I have like a shared core package and it has to be built before the types work in the others that now has to block not just in build but in Dev 2 and getting the order of events for all these things proper is a noxious and I have had a hell of a time trying to make a good experience with that what other things um duplicating State between tools as I was talking about earlier having the hell of orchestration of your state of like which packages matter where are they how do they get interpreted where you have to write the same stuff both in pnpm and in Turbo it's pretty rough getting better though and then generally versions version Management in monor repos is miserable it's just it just is let's talk about other tools which libraries do I regularly use I haven't touched emmer in so long also haven't touched low Dasher underscore in a very long time you're not familiar with emmer it's focused on immutability in JavaScript to make it easier to have things that don't change without cloning them and good tools to update like a deeply nested key inside of an object typescripts made a lot of the stuff better but if you really want true immutability in your apps immer still the way to do it if I recall it was created by the same person as mobex in order to make the mobex developer experience better yeah low Das and underscore not things I use anymore really important for pushing web standards before we were actually getting web standard improvements regularly rhda never heard of probably not my thing jQuery who doesn't want to use more jQuery rxjs never again never again rxjs was one of the first observable Solutions in JavaScript and as important and Powerful as it was to have good observables in JS it was also an absolutely miserable experience and I'm very thankful that we're not dealing with that and the weird bugs the weird memory errors and all the types of chaos I saw when we were deep in observable land with rxjs God standard lib curious weird that the second thing it calls out is data viz this meant to be a standard set of like math stuff not something I care about mat lab great yeah no not for me at all Zod I absolutely love Zod is the best way to do validation in the browser and in your server and JavaScript right now it's the first validation tool that really focus on the types script experience and having good type definitions on both sides absolutely love Zod highly recommend it even if it's not the fastest solution it is still one of the best what's CJs I know this oh yeah this is the the polyfill for everything right definitely used it I hope I never have to use it again I hope browser standards get to the point where I don't need it but it's like the go-to polyfill for Everything Party Town party Town's really cool if you're already familiar party towns by the quick guys the goal of party town is to make it so you can take things that use too much JavaScript like CPU cycles and throw them into service workers instead of having them actually run in the same JavaScript runtime in like thread as your UI stuff so like if you have Google analytics and you don't want that taking up a ton of your JavaScript compute Cycles Parts you throw that out of your current runtime and into a service worker and just send messages back and forth it's not great for things that have a lot of those back and forth messages but it's great for things that get a message do way too much work and then maybe send a response really happy that party town offloads things from that main thread and makes the experience for your users significantly better really cool project happy it's gotten the interest in adoption it has mitosis I remember this oh yeah this is the again builder iio stuff so again mitosis same team as party town and quick the goal of mitosis is to let you write your front end code once and then compile it out to everything from view to solid to react spelt whatever else it's a way to write your code once and output code for lots of different Frameworks it's almost like the inverse of web components in that way like what if instead of building a component that like one set of code can run in any framework it's this one set of code can compile to any framework really interesting I haven't seen many people using it but it's cool that it exists and I'm excited to see what people do with it so yeah I'd say this is something I'm going to look into more in the future but not something that I use personally personally moment moment was the standard for date time for a long long time and no longer is I honestly feel like moment gets more [ __ ] that it deserves CU it was a bit big and a bit slow but it's still pushed our ability to interact with dates in the browser significantly thankfully it has a really good spiritual successor with DJs which I absolutely love data finess is also in a pretty good State overall it's not my go-to I still I know DJs is more JavaScript isn't as standard but DJs works with my brain better and does a lot of the random like stuff like durations that I have to do a little bit better so I lean towards DJs but both of these libraries are phenomenal and good options to go with moment is largely deprecated and not maintained anymore so I would avoid it what's luxon oh is luxon just like a a more O is luxon just like a more onetoone moment replacement cool happy it exists DJs is in a great state I'm just going to keep using DJs and then yep think of yep similar to Zod but before Zod and before typescript so yep's ability to handle type definitions just isn't as good and I can't think of a reason to use yep instead of Zod at this point in time so not something I'd recommend at the moment Graphics animation oh boy react spring is phenomenal and I'm sad people don't give it the love it deserves react spring is dope just find a good example the magic of react spring is that it's very primitive it doesn't give you the traditional like use slide in type Primitives that you would not have to write a lot of code for its goal is to give you the ability to animate an element without that animation having to run on the same thread as your react code so if you have this div and you want it to shift to the right you could put that in Ed State and then on every frame update where it's located but now your react component has to reender on every single frame which sucks react spring creates like a ref binding effectively attaching this animated div to this hook that runs separately from react and allows for the Dom to update where that element is located without having to rerun your react component to do that and its Primitives are very very very powerful so here it's from x0 to X100 now it can apply the style you just dump it to the animated div and it does what you'd expect it to it's really powerful in that way and I'm Blown Away with the stuff I've seen with react spring that said still not the go-to for a lot of people because it is so primitive you have to write so much of the stuff yourself but that's because it's by the point maners guys the same people who make react 3 fiber the same people who make zustand and Jodi they wanted to make an animation solution that was performant enough to run in things like react 3 fiber so you could use this for 3D anim as well results incredible react spring is one of the best animation libraries I would argue ever but it is more work than the Alternatives which is why it doesn't get as much love the thing that does get a lot of love is framer motion framer is so important for how it changed the way we animate on the web framer motion was originally announced 2 days after hooks were announced because when the creators of framer saw hooks they were like oh my God this is the best possible way for us to introduce animation Primitives to react and the result was incredible like this did all the animation properties exist on the div itself you'll see the syntax motion. div similar to animation. div with spring but a lot of the like things you would want to do like a rotate or a fly in or fly out when the component un renders those types of like common animation behaviors they just have examples for all of that what's variants variants are a declarative way to orchestrate complex animation through a component Tre by providing multiple components with a variant object with visual states in the same name they can all be animated in sync by the switch of a single animate prop that's really cool you just switch from of these to the other by switching like a prop that changes the Boolean and then they all animate together at once really powerful stuff even just having like a drag primitive baked in where you can just make a ra constraint and then have a div that now can be dragged around those types of things are not easy to implement and having a good set of Primitives to do all of that for you in react is huge really really pumped with what the framer team has done you're already familiar with framer they've built a full like guess figma alternative for building react applications with drag and drop and working with your designers and such and it's in a really good State overall I think think framer is dope it doesn't get quite enough love on that side but their animation stuff absolutely incredible Best in Class I would use it again I'm sure a lot of y'all will as well green sock green sock is one of the most OG animation Solutions wow they redo the homepage again green sock is not framework specific green sock is the closest thing to an abstraction on the browser standards for doing really complex animations like all the crazy stuff we just saw happen there Gap allows you to effortlessly animate anything JavaScript can touch yeah it's really really cool the syntax is going to be a little rougher because it's not framework specific it's been the standard for a while I probably wouldn't reach for it because I work within Frameworks and as such my focus is going to be on things like react spring and framer that said 3js is incredible I primarily use three through react 3 fiber regardless 3js is the thing powering it it's really powerful if you're not familiar 3js is the library for doing 3D webgl stuff that almost everyone uses for their browser based 3D experiences webg is a rough primitive in 3js builds a lot of things on top it's still very primitive and a lot of the things that you'll be working with here are like animation key frames or camera positioning or like GL buffer attributes it's still very primitive but having all of these like reusable JavaScript classes that handle a box geometry and let you apply a mesh to it and giving you the necessary pieces to assemble this stuff is huge again you still need to know a little bit about like 3D rendering for this to work but it's abstract how much you need to know significantly and provided a set of reusable pieces that make it just way less painful to work with webgl I honestly can't imagine doing webgl canvas stuff without 3js or something wrapping it theater JS I've heard of this where have I heard of this theater JS is a new animation Library interesting that it gives you like a UI for your sequencing and such very interesting clearly there's a lot for me to learn with theater so if you're already using it let me know in the comments if I should look into it more and why pop motion another there's a lot of these let's just go through them all quick oh this is the library that is used for frame motion really interesting in that sense I will use pop motion again because it's powering things I'm already using what about Motion One web animations for everyone is this the one that was built by the guy who made framer motion originally CU I know that person left and did their own thing I think it's this yeah Matt Perry motion one's a really interesting new development actually motion one was created by the creator of framer who as I just mentioned previously was building on top of popover the benefit of motion one is that it's one of the first of these JavaScript libraries that's built on top of the web animation API instead of being built with a bunch of weird div Transformations on the browser side this means you don't have to include a ton of JavaScript and then run all of that just to update things on your browser because the web animation API let you do a lot of that much more performant it's also why the amount of code you load is so much less yeah here it is Size Matters Motion One versus Greenock which again Greenock was the most browser standard solution for a while it was one of like the most performant both in terms of bundle size and animation output Solutions and Motion One smokes it just by bundle size because again it's built on top of the browser standard they don't have to reinvent all of these pieces themselves motion one I haven't used but I really want to look into it I want to I kind of want to check this like I know enough about it and I want them to get the point because I want motion one to be more popular but I I'll be honest and not check it anime JS that's one I haven't touched for a long time anime JS was one of the OG JavaScript animation Solutions website they're doing GitHub sponsors Early Access for V4 that's interesting they really need sponsors at the moment it seems I'm not sure about the current state of anime JS because I haven't touched this ecosystem for a while but it is something I used to use and it's fine I'll just check it and not say what I use or not use again lah and D3 being in here are interesting CU neither of these are animation libraries in the traditional sense L is L is technically for animations lah is rough because lah was originally built for you to take things out of After Effects and Export them so you can use them on mobile applications so if you made a fancy animation in After Effects and you wanted to have to be like your bootup screen on your iPhone app lah was the way to do that eventually they had to build it for web though and the web package is a bit of a mess it's bundle size yeah 240 Koby minified that's insane L web 300 Kobes minified it's rough because it has to do so much [ __ ] so much [ __ ] LTI as I was Hing at there is massive and infl it properly is obnoxious I have had nothing but bad experiences with lah and I'm so thankful that RVE is catching on the way it is if you're not already familiar with RVE I've regularly cited this as the only flutter app I don't hate because this is what flutter is good for is complex animations almost nothing else an animation studio thinks similar to something like what you're used to with After Effects but it lets you export usable little run times that you can embed in your app that are way smaller and more performant than lah ever has been you can even make them interactive which is dope too people are making full games with the r renderer which is really cool to see yeah all these little animations are so much more performant than anything I've ever seen in the world of L and works on everything cuz it's its own custom UI layer people are asking how big is it the big difference is with it is that you're not embedding a runtime and then loading in L files that are massive it's all like one thing you like build a little package for each of your animations and those tend to be much smaller so like this crazy animation all of the assets and everything for it is 43 kiloby are you kidding that's insane huge fan of R really excited to see where they go if you want me to talk more about those types of things let me know because I've been meaning to do a deep dive on it for a while so I'm going to put Rive in here and D3 D3 is how we make charts in JavaScript most of the new chart Solutions are still just D3 wrappers so I have to check it cuz I'm still using it but I don't actually like using it I like the wrappers enough but yeah D3 is necessary evil oh boy and from animations to backend Frameworks these are two opposite ends crazy how jarring this transition is for me going straight from like crazy animation stuff to this deep in back end Express is fine you guys know how I feel about Nest I don't like nest if you need Nest you need to use a better language for your back end like once things have gotten that complex get out of JavaScript not not digging it strappy I haven't used ever yeah it's a CRM it's one of the earliest headless CRM from what I know it's in a pretty good State still not really my type of thing now we're getting into things I like though fastify fastify is dope it fastify inspired me to do a video in the future of underrated JavaScript libraries because fastify deserves way more attention it's by a lot of the original Express devs and the goal was to make Express suck less how can we take like the good syntactical wins of Express and make them way more performant and embrace more modern like web developer experience stuff it's my favorite way to quickly spin up a server in JavaScript and I use it heavily this is what we're using for web hook thing when you run it locally it's really good experience and yes ffi by a lot of the node people too including Matteo phenomenal Library this is what I use when I'm hosting a web server from JavaScript almost always if I'm not just using nexts meteor oh meteor meteor was one of the first attempts to do like how would I put meteor stop fighting with Frameworks and start shipping the goal of meteor was to be one of the first like graphql for all solutions but I think they've moved away from graphql and towards an RPC thing but like meteor devolved and became partially like aollo but it was one of these early attempts at one API for everything with good developer experience and it just they took on too much at once then went to the graphql route that went how it went and now it's in a weird place and I wouldn't recommend it I want to skip over all of these more obscure ones I just don't care because I want to talk about redwood because we just talking about graphql and how stuffing it in the middle of things isn't the best idea Redwood was one of the first attempts at a full stack framework that really built a layer between the back end and the front end that layer happened to be a pile of graphql which was useful if you ever wanted to build a mobile app that used different Technologies but most of the time wasn't the right bet and even the red W contributors are largely not using the graphql part I know that um App Factory who I had on my stream well over a year ago now to talk about redwood when he uses Redwood at his company he rips out the graphql layer and threw trpc in instead so I personally not that into Redwood but apparently they're focused on server components now so I'm excited to see where that goes sales directus and amplication I still don't care Oh Blitz for those who aren't familiar Blitz was very similar to like creat T3 app if all the dependencies were written by us the goal of create T3 app was to provide a really good full stack developer experience by using the best tools in the industry the goal of Blitz was to provide the best fullsack developer experience by rewriting all of the tools and I think they kind of bit themselves with that the biggest mistake they made is they forked next and realized a year later how big of a mistake that was and took all the things they built into it ripped those out made them packages and then went back to vanilla next and adding their stuff on top kind of becoming a brutalist version of create T3 app I'll be honest and that I think I accidentally killed Blitz when we created create T3 app because it it solved the problem that Blitz was trying to in a much more maintainable modular way and now Blitz is just not as big of a deal the lead maintainer of Blitz has since left the project and is doing really cool stuff she's incredible and the original creator of Blitz Brandon has more focus on his company flight control so I just don't see Blitz going anywhere anytime soon I did try it and as cool as it was to have something that felt kind of like rails in the JavaScript World it wasn't good enough it just was not there for me and I got really into trbc and eventually built cre3 app with my community because of how much Blitz didn't do what I needed it to and we need to put some others in because people keep mentioning Alia which I absolutely want to put in here Alia's think almost like fastify for bun taking advantage of a lot of the Native bun stuff it's in a really good State Hano also deserves a mention Hano is a web standard server so you can run it trivially and everything from literally like the browser to Edge runtime to obious obviously no really cool stuff and thank you chat for reminding me the name of the blitz maintainer I was thinking of was Alexandra she's incredible yeah she is really really really good and one of my favorite like typescript developers anyways JavaScript run times which engines do I normally use have to node yeah Dino yeah I'll keep using Dino for those who are curious I use Dino for Advent of code because I don't want to have to make a build pipe I can just point at a typ file and it does the right thing and it's been really nice for me so I still use Dino I don't use it for much production stuff but I use it for quick scripts all the time Hermes I've absolutely used if you're not already familiar with Hermes it's the compiler jit runtime for react native and you can use it for other things its goal is to make it so JavaScript can start up way faster so you don't have to wait for it to init so your app can behave a bit better when you open up an app for the first time service workers really cool will continue both of these I want to use again and obviously bun as well not super familiar with Shakra core it's a JavaScript Engine with C Edge no longer uses chakra yeah that's where I thought I knew about it from so chakra was how JavaScript used to run in Edge and then when they moved to a chrome based core they no longer were using this so it's just not getting that much support anymore is my assumption I expect that to stay that way yeah excited for a little more Innovation here also for the winter CG group to make things between all of these runtimes a little more standard but at this point in time these are all the different ways you can run JavaScript and it's a bit chaotic that things do and don't work between them ways you would or wouldn't expect JavaScript Edge and serverless run times which do you use Lambda I'll use again Cloud forare workers I'll use again nfy Edge functions I haven't really used used Cloud functions I hate Edge runtime I'll use again fly I have never successfully deployed on I've always had weird issues when I tried dig lotion functions I don't care and Reser functions I don't care that was a quick section non JavaScript languages this is also going to be a quick section not saying other languages are bad just saying that they're not for me which of these AI tools do I regularly use to help write code I don't regularly use chat GPT but I've used it a few times it's like 50/50 if I if it works for me or I hate it co-pilot I'm addicted to never never change in that jet brains whatever Cody whatever codium I am caring less and less as we scroll further oh v0 I like vzero I just don't care I'm expecting things to go way further next year but I'm waiting for that to happen we'll see what happens when more tools exist and people are refining the state of stuff but right now I'm still just a co-pilot bro which of these have I used to host JavaScript AWS is fine haven't really used a sure cloud flar is fine digital ocean no fastly haven't used fly iio bad experiences get pages is overrated cool for static but as soon as you get do anything interesting get hi page just falls apart Google Cloud miserable Heroku miserable NFI is fine I used to use NFI as my primary place but the versel experience is just better for me and having control of like where my code is running the idea of like framework to find outputs really good render I also had issues trying to deploy too it was back in like the early M1 days where like I couldn't get their CLI to run without installing Rosetta and even that was a bad experience so I gave up on it and obviously I'm a versel bro that's where I do most of my deployments now yeah ra way should have been in here usage how do I divide my time between writing JavaScript and typescript literally entirely typescript if I'm writing vanilla JS I'm miserable D du I use JavaScript for everything I should and shouldn't [Music] do yeah literally everything but embedded apps I don't write embedded apps well anyways what industry sectors am I using JavaScript in I guess technically Consulting education entertainment I mean here we are right Marketing sales analytics tools yeah yeah yep yep yep I write JavaScript for a lot of reasons which of these architectures have I used single page app multi-page app static site SSR partial hydration Progressive hydration I know I haven't actually used that Islands architecture pressive enhancement isg streaming SSR not resum ability Edge rendering and partial pre-rendering yeah I've talked about these in a billion other videos I'm not going to sit here and talk about each and every one of them I already have like two videos about the different types of server rendering I need to make a third video about server rendering techniques let me know in the comments and I'll make that eventually I know there's a lot of these now and they're all very different but I think I've covered these things enough which aspects of JavaScript do I struggle with the most async specifically async errors and handling weird ordering of things that can error at weird places I need to do my deep dive on effect TS we're starting to explore it for upload thing but async can get miserable debugging in general like it's good but it's not as good as it could be especially once you have issues between the server and the client and need to debug like request and network things happening on the server side you don't have browser tools rough so those are probably my biggest pain points and then build tools specifically around monor repos I think that's a fair way of stating the pain points I deal with regularly what do I feel is missing from JavaScript up to three items pipe please give me pipe operator please for the love of God give me a pipe operator I want pattern matching a lot and I do want immutable data I'd say those are the three for me all of these you can make a good argument for obviously having typescript style types as comments would be really nice but I want all of the other things more I really want pipes to be standard so that like your Ides and things support them and we can use them everywhere and I want that to be a standard I have a whole video about why I think pipes should be in JavaScript so feel free to find that on my channel I think webd is better than it's ever been and I know that's controversial but you don't know how bad things were and how much better they're getting every day so I'm very happy and how do I feel about the General State of JavaScript also very happy we've made so much progress over the last few years and it's still getting better every day resources which paid resources have I used I haven't used it for a while but I used to use that gu quite a bit programming related podcasts I don't really listen to podcasts which programming related video creators Jack Harrington Josh Tri code big box we mky I've watched quite a bit oh lowle learning I'm watching I've been watching all of low level's videos about the Adent of code stuff recently I watch Fire Ship a bit he's not like a go-to for me just coding thank you for the correction there who watches trash's videos no in bash bunny I can add Theo am I out of space can I not add more cuz who am I replacing with Ryan carniato I watch my stuff I watch so much of my stuff I watch more of myu stuff than teers by quite a bit so I'm putting me at the bottom there still which individuals do you read follow or just want to highlight Ryan carniato it's yeah this weekend react I just want to get his name correct smash lber you're not already familiar with lber last time I mentioned him in a video it blew up so I'm going to do it again this week in reacts one of the few things I actually regularly read to keep up with what's going on in the react World it often has things I missed obviously now I'm on of things and enough I don't miss things as regularly but his weekly updates for what's going on in react are very very handy and I recommend giving him a follow on Twitter checking out his newsletter if you haven't already because it's a great way to keep up with stuff oh howdy Sebastian didn't know you were in chat who else do I keep up with who else posts things that I like love I trying to think through like who when they post something I immediately Jump On It Le Rob is a good one to call out Sebastian markb from the react team Tanner oh uh Josh comeo yes I think that's most of the ones that I'm like really looking at the content of this year like I love Dan abov but this year was not a big one for things to keep up with I should put Dan I love Kent dods but I don't read a lot of his stuff nowadays I think Matt pook's a fairer one to put oh Rich Harris obviously Rich haris oh Dominic I have to do TK dodo I think I've covered most of the people I regularly read from there are so many others that are great but those are the ones that I look into and like read stuff from the most oh I've done most of these did that I haven't done most of them I've done all of those though cool and how about me good old 28 oh I I should have put Jens yeah I'm going to go back and put Jens in that you guys aren't already familiar with Jenna she is one of the creators of radx UI very very very talented JavaScript Dev that I've learned a ton from like a personal hero she doesn't post as much nowadays but when she does write a post it's always good I love all of the content she's ever published highly recommend giving her a follow if you haven't which like you'll be pretty early on it cuz 7,000 followers for somebody who's produced this much valuable content in the dev ecosystem is insulting so make sure you give Jenna a follow I'm in the top 6% of all respondents that's actually lower than a lot of the surveys I've done in the past good stuff though this is a phenomenal survey as always oh Sophie Albert I should have put Sophie into too [ __ ] very fair point God damn it it it's so hard to list all the people that I learn from and look up to there's it's such an awesome industry with so many dope people one of the awesome people that I regularly forget about is sachcha the creator of these surveys and he absolutely killed it with this one the team's working really hard to keep us up to dat on what's going on in JavaScript ecosystem and how are people feeling about these things so once again huge shout out to them if you haven't already done the survey go do it because we can learn a lot as a community from the results of these things and I think it's really important so yeah go give the survey a shot appreciate youall a ton as always if you want to see my thoughts on the CSS one we did recently I'll pin that in the corner here appreciate you as always see you guys in the next one peace nerds




## The State Of React (Survey) - 20231107
it's no secret that there's a lot going on in the react World from server components to next to everything in the remix land to people building their own new Solutions and Frameworks there's just so much going on and it's more important than ever that we take the time to reflect on that and see how as a whole react developer Community we feel that's why I think it's important we go through the state of react survey together there's a new survey that has came out from my favorite team of webdev survey ists satcha and crew they're killing it with this one they dm'd it to me and I wanted to share it with yall too so that we can all give the feedback necessary for the whole Community to better understand what isn't isn't working and we can move forward together with a unified vision for how to improve web development and obviously the Link's in the description so click that if you haven't already stve of react 2023 soon as react was first introduced it was clear it would become a big deal for the web people did not think that initially but sure they they even acknowledge that here despite the weird jsx thing developers quickly adopted it when it's even more impressive the community stuck on through major changes such as function components and hooks but now it's 10 years later in the newly introduced react server components promised to be the biggest change since well since react itself will the community follow along one more time or will developers jump shift to spel solid or something else let's find out together with the first ever state of react survey seems like first and foremost we're going to be checking off the apis we've used I have used it n sure I want to use it again o create portal I am the lunatic who uses that a lot forward ref painful but it's useful should I be explaining what these are when I go through context is reacts built-in State manager to go through components so when you mount a context everything below it has access to whatever that context exposes so it's useful for hey I want everything in this tree to have access to this data usually react apps have a ton of these contexts mounted at the top of the app to be treated like globals which isn't the best pattern but it's a powerful way to manage State and access data across your application somebody in chat just pointed out that it's not really a state manager it isn't you have to manage the state yourself but it gives you access to that data in the functions you expose throughout the app create portal I have a bunch of random content about this most recently I did a video about the stuff I was proud of building at twitch with mod view where we used portals heavily it's a really cool pattern for taking something in the virtual Dom and rendering it somewhere else in the real Dom forward ref is utter chaos it lets you take a reference to an element and pass it through multiple layers of react so that you can have a top level thing that has references on it so you can access the Dom nodes and then that gets forwarded through to like an input field really deep in fragment we usually see the syntax for it it's mostly there so that you can follow the components return one component rule so if you have a component that has two children but doesn't really have a parent you can wrap that in a fragment and not have to worry about the hierarchy as much lazy I use lazy all the time lets you defer loading components until it's rendered for the first time so this lets you not even load in the JavaScript until you're actually rendering the component also a way to guarantee that things run on client not on the server really powerful memo lets you skip rendering a component when its props are unchanged it's cool I would use it again not the best thing but it does its job profiler let you measure rendering performance of a react tree programmatically I have heard of it and I'm interested I usually just use the react Dev tools but I should try out profile or it does sound really cool strict mode is great minus it rendering things constantly if you ever seen your effects running twice that's cuz strict mode is doing that and usually people don't Mount the strict mode component they turn it on in a config somewhere but yeah strict mode is cool what pain points have I encounter related to the API mentioned above for ref is super super unintuitive context as a global State provider is full of foot guns and often causes full app rerenders for no good reason cool let's go on to hooks use callback use call back is great so if you're defining a function in line in react and you pass that function as a reference something like a use effect but you defined it in line that function's definition is going to change on every rerun so react can't properly defit use callback guarantees that that function in instantiation will be exactly the same on multiple rerenders unless the dependencies of that function change so it's mostly a way to stabilize your function's definition across reenders use context obviously if you're using a context you're probably using use context to access the values within it use deferred value I have used this once I don't want to say my experience was positive or negative effectively this lets you render an old UI state or not update the UI until a value has changed it can be handy I want an example of this to better explain it during updates react will first attempt to render with the old value and then try another render in the background with the new value it's integrated with suspense if the background update caused by a new value suspends the UI the user will not see the fallback interesting so this is like a way to keep showing old values when you have loading States and things going on it's actually really useful that makes sense combining is something like react query and showing stale values with manual clearer behaviors is cool but also probably unintuitive to debug I'm going to say I've used it cuz I did use it once not positive or negative I'll leave the experience neutral use effect again I'm going to leave it neutral you all know what use effect is I don't want to go on that rant right now use ID use ID is a strange one but it's useful for basically telling react like this value of this component is the same even if we don't have a manually defined key that we're passing in this is much more useful with uh server components and client components and weird interactions between them but it's generally useful to let the Dom know hey this thing hasn't changed don't trigger a screen reader to reread it because it's still the same value use memo as a react those you C the results of a calculation between renders mostly useful for making sure an object is stable but useful for a lot of other things too use reducer fun fact almost all of the hooks within react that are even vaguely State Management are built on top of Ed reducer even US state is just a Ed reducer wrapper internally it's almost like Redux built into to react but very very minimal it's cool it's fine I'm not going to say positive or negative it is what it is I I would say use ref as good but the problems I'm having when I need to pull use ref out are terrible so my experience might be negative but that's because of the weird problems where I need a specific reference to something not because the API itself is bad so use ref cool the dot current stuff's weird it's fine though use state is great UST state has made explaining react so much easier so much easier you sync external store oh you sync external store I love it I've only had to use it once or twice myself but this is the hook that libraries like zustand and react query use in to take something that exists outside of react and build a relationship between that and react itself to synchronize that external stores state with react internally really powerful it's a great way to like subscribe and create patterns with an external store and an internal store with react if you wanted to go build your own crazy State Management solution syn external store is probably going to be the base piece for that what pain points have I encountered with hooks use effects foot guns use effect problems that occur sporadically well after code is written unstable values I.E inlined functions or objects triggering use effect use call back use memo Etc cool react cache cach lets you return the result of a data fetch or computation I have used it I'm excited for this to get more stable it's not super stable at the moment and the difference between reacts cach and next cach isn't well defined enough Ser components I [ __ ] love components that run exclusively on the server that's a really good concise definition so actions reacts built-in solution for Server mutations also like it a lot and excited to use it more start transition lets you update the state without blocking the UI I'll say this is my first negative experience that I'm going to click that button for CU it is weird debugging the patterns of like when the transition starts and ends yeah it's a really powerful thing for specific like types of uis that are taking advantage of all these new patterns but it it feels like a bit of an abstraction leak where I would almost expect a library to handle these types of things for me but since we're still in the early primitive days of the new tools you have to manage your own transitions suspense suspense is a great way to introduce loading State Higher up in your Dom so that that children of it can manage their loading async whatever they have to do and just have one shared loading state for all of that really powerful if you're rendering components lazily or you're using the new asynchronous patterns with react server components where you can use suspense to have a component that does some heavy data Fetch and suspense will let you stream in that response when it's done honestly suspense was not like super useful when lazy was the main way you accessed it and used it but now with all these awesome new patterns with server components suspense is finally a thing I'm using all the time and it's really good so yes taint you know that we love the taint here I don't need to go too much further I'm going to be one of the few people that's actually used it because I went and played with it as soon as it was announced but uh yeah good old paint use I've had a negative experience with use is meant to be kind of like react query where you pass it a promise and it gives you the result and it lets you suspend until then so if you pass a promise or a fetch call here it will call the suspense above it but it has a lot of weird things that cause it to rerun constantly and have yet to make a Ed call that involves fetch that works properly on the server and the client it's just not in a great state I hope it gets better use form State I've used it I'm sure it's good in a lot of places but I'm clicking negative here there's nowhere near a deterministic enough relationship between used form State and the form itself because if you have multiple forms this can get messy and you also have to leave server components in order to use the hook so this becomes a client component too it's the lack of strong tie between the form itself the server component and the form state that makes it harder for me to durly align same deal with used form status where this is going to be the form that this client component is mounted in I think but it's not deterministic enough for me I'm I'm real picky about that personally so I'm going to say used it I'm not going to mark for that one but use form States freaking weird so I'm marking that one as negative use transition leaning neutral on this one it's another one of those things which we mentioned before it feels weird that I have to deal with this in the UI myself but I get why it's just another one of those leaky things where I'm excited for libraries to make these things easier going forward what pain points have I encountered related to the new API too primitive I feel like we need better Libs to abstract the value item two how do I want to word this lack of deterministic relationships with forms and use form State use form status wrapping my head around start transition and use transition has been a bit rough cool now for component libraries ant design heard of it not interested shra design it's I only played with it a little bit but it's just it's not for me headless UI used it it was fine mui used it not my thing anymore radics [ __ ] dope re bootstrap never actually used it never will care to Shad UI absolutely react Arya I've only used it a little bit and it was really good I want to play with it more it's like react Arya headless UI and radics are all trying to solve both the accessibility issues and the general behavior issues around complex inputs and other interactive components none of the three provide actual uis or components they all provide the pieces you need to build those yourself really cool tools I'm happy we're having real competition in that space and that we're talking about these things more now I feel like I was crazy being the only one who knew what radx or react ARA was like 3 or 4 years ago and now unstyled input libraries is like a trend which is really dope CU all the people working on these things are working really hard and it's super important Tech what other component libraries have I used hwind UI I've used framer it was good I've used react spring it was really good not used react motion I love Auto animate I have a whole video about it react native reanimated is [ __ ] dope too all of these are great I know react motion is good I haven't played with it yet but framer and react spring are [ __ ] incredible Auto animate if it solves your problem is so so nice and react native reanimated is groundbreaking I've used D3 react viz I've used recharts I used Victory and I tried FX I did not like vizx D3 is way too primitive I don't remember using react viz I like recharts and victory was weird react form is the best option still which libraries or Frameworks have I used CSS modules no strong stance emotion no more SAS is fine I never actually use stitches fun fact style components best we can do at the time Tailwind I [ __ ] love Uno pretty good vanilla extract I played with I didn't use it enough I really like the philosophy around it I think it's important and stylex I will throw in here as well CSS and js on the server is a bit rough Jodi I [ __ ] love Jodi and we're going deep in the State Management now Co mobex I've used I had a terrible experience with mobx cuz it caused a lot of weird memory leaks for us at twitch way back so this was 2018 I'm sure it has gotten way better since but man I dealt with a lot of weird [ __ ] with mobex and like cleaning things up back in the decorator days so I have trauma associated with mobex recoil also had fun memory leak issues when I tried it and honestly Jodi is better recoil for me recoil was by Vues the creator of prettier as well as excal draw really smart developer recoil was trying to do internal atomic State super cool but yeah just Jodi's in a better place and anything that point Manders team is doing is [ __ ] dope Redux I am very done with you guys can guess why Redux toolkit is much better overall and if you're stuck in Redux you should be moving to Redux toolkit to the best of your ability UST State's great X State's fine and zustand my love zustand has made my life so much easier that I've even considered pronouncing it correctly I won't but I've considered it react query come on why did they not include react query stable values deterministic Behavior async workloads outside of react High through put date think updates every frame yeah I've run into pretty much everything you can have problems with so use effect running twice I desperately want use memo with clean up yeah oh co T query is an option in here nice APO client never again I have lost years of my life the the Apollo team works hard and made graphql a standard I appreciate them immensely for it Apollo client is one of the biggest piles of tech debt I've ever encountered in my career I did my first ever podcast like my first ever piece of Dev content because I chatted with them and got them to do a podcast with me like the Apollo team the condition was they would bring Ben Newman who was like the lead enge on things at the time on the podcast as well so me and my friends at twitch could bully him into introducing cash inv validation because at the time there was no way to delete from the cash when you had a long lived session like a twitch session where people are on Twitch for hours and you're using graphql for data there's a lot of data in there you don't need anymore and I was seeing like half gig plus Apollo graphql caches and I couldn't clear them cuz there was no way to do it until V3 absurdity and don't get me started on the weird deep cloning [ __ ] that it used to do I think they fixed a lot of that but it was real bad like real bad relay is much better but you need a PhD to set it up correctly I often joke about how like if you don't hold two phds or work at meta I don't believe you can get relay working there was an exception to that rule which was Jane Wong but she now works at meta so there's no longer an exception to the rule nobody actually gets relay working rtk query I'm really happy rtk query exists I will never use it because it is not for me but if you're deep on Redux and you need some better async management [ __ ] rtk quer is best way to do it SWR I'm known for talking a little crap on it's way too minimal for my taste but it's also pretty nice and a quick way for remote data fetching is cool I just wish it did more and that the fetching logic wasn't as abstracted as it is and I wish they didn't redefine the word mutation the way they did I'm going to even leave a comment here the confusion around how they used the word mutation is enough of a reason for me to hate SWR forever and this is a bias of I'm a teacher and they took the word mutation and they misused it I have the same issue with react router where they took the term query pams which used to mean the things after the question mark search pams and they used it to describe URL pams which are the thing or well I'd say path parameters which are the things in the route so I hate when react devs take these terms that mean things and use them for something entirely different I kind of have the same issue with used client and use server but uh let's continue and obviously huge t query fans here what's trpc I've never heard of that before proud that we got that in here what other libraries have you used for data loading next look at what made it in here next type safe URL good [ __ ] trpc is like grpc but for Theo good pun I just wanted to say next but if that's not an option what else have I used to load data Ed a lot of weird things to load data I'm just going to skip this one so I can't think of anything that makes enough sense to put there what pain points have I encountered related to data loading I've had so much pain in data loading but the things that immediately come to mind is stale data and caching both sides of it where data's old or data isn't cach it takes too long shared normalized caches so think something like a graphql cache where I have a user query and user can have 15 plus fields in it in one place I queried two of them another place I queried three other things normalizing the cash so that's one cached entity sucks and graphql can do this well but yeah it's painful and then Apollo's cash in general sucks especially for long lived apps I've had so much pain from Apollo that I would prefer to just never touch it again or recommend it yeah it is what it is meta Frameworks wo Astro we love Astro here create react app help Kickstart My Channel Gatsby is effectively dead nextjs is pretty cool remix is remix I'm really happy it exists it push the standards forward Redwood I haven't actually used and it's entirely based around graphql I'd say Redwood is like the first create T3 app type thing where it was a full stack here's how you build your server and your client and you have them relate to each other but they went way too hard on graphql which I don't think is the solution for getting started almost ever you should never start with graphql you should move to graphql and you have problems that graphql solves so yeah not a big ridewood fan other meta Frameworks not really other backend tools V yep TS up saves my life all the time es builds [ __ ] incredible Roll Up is really useful tooling TSC CLI exists parcel exists turbo pack I really hope it gets stable good old snow pack joke quick I have hosted react AWS annoying never hosted on Azure hosted on cloud flare neutral digital ocean negative fly iio God I hated deploying on fly especially when they didn't have an arm binary and I had to run everything through Rosetta it was so slow and painful GitHub Pages mediocre Heroku I'm happy it's dead netfi is fine I'll give them their credit I never actually successfully deployed on render so I can't even check that one and obviously be like for sale not a fan of Firebase fan of Planet scale Prisma I'll leave neutral youall know how I feel now Rus is great Sentry is neutral super base I'll say I'm positive about up stash [ __ ] love up stash worker KV upload thing axium CL these are all like data stuff which is weird they didn't have clerk should absolutely been in that list graph I don't really use with react post hog I use with react drizzle yeah they put Prisma in here for some reason it isn't really a service Which languages are your backend apps written in I [ __ ] love Elixir goes fine I'm going to say negative experience with JavaScript and positive with typescript pretty fair I haven't used PHP in a while but I have used PHP haven't used python in a while or Ruby for the same reasons I'm putting negative on PHP backend Engineers not respecting frontend Engineers barriers between front end and backend being arbitrarily find scaling infrastructure in nons serverless environments infr providers slowly catching up to the needs of rsc's cool do I do it let's be honest which libraries have you used to render obviously yep yep uh ink was weird it's fine yep yep not a big react for web fan it's fine react PDF it works [ __ ] love react 3 fiber and I want to use remotion more before I take an opinion on it let's go through what all these are Quicks they don't specify I have another video where I talk about using react for things that aren't websites react Dom is using it for websites react email is using it for email Inc is using it for CLI react native is react native youall know what that is react native for web is using the react native apis to render on the web which is interesting but it means means you can have one code base for multiple platforms react PDF lets you use Primitives to render a PDF with react really powerful for generating PDFs on your server react 3 fiber lets you do Canvas 3D stuff with 3js with react it's a really powerful way to make like games and interactive 3D environments super cool [ __ ] Point Manders made it they're dope and remotion is a video editor in react which is really cool where you can write react components for video Elements which libraries have you used for validating data against the schema I've used all of them Zod is dope rest some ion type box is really promising that's the one by the ark guy right so I played with that a bunch and it was really powerful and really fast oh look at that what services do we use for o oh yeah valy bot ionic I'm neutral on react native I love Yeah Expo and RN are both incredible what other frontend Frameworks have I used angular negative Ember very negative I God I hated every moment in Ember I might have not if we didn't move off Ember at twitch I might have never become a frontend Dev I hated Ember so much lit I'm neutral on preact I [ __ ] love preact was a huge part of how I started to understand web standards better when I used preact in vanilla HTML and JS projects and like learned what all the compiler steps were to make react behave like react quick I've used not for me I'm happy it exists solid I [ __ ] love spelt I'm more and more liking I don't love the single file components but and I also really don't like their markup syntax but its Primitives and its core philosophy are great and now with runes it's getting more and more scalable in view is view I'm very excited for Vapor I believe is the view compiler coming out soon which is hype what do you use react 4 literally all of these I'm mostly using Canary at this point professionally industry sector education entertainment it's weird how that's like selecting a random Place depending on where I've scrolled to seems like an accessibility issue news media blogging social media Telecom s quite a few things Edge rendering isg Islands MPA God I've used almost all of these I haven't actually done Progressive hydration or resum ability SSR Spas ssgs streaming SSR yeah there' be a whole video if I try to explain all of these so uh yeah let me know in the comments if I should do that video because I'm not doing it right now how happy are you with the current state of react I'm very happy I'm not expecting that to be the answer for most I'm so excited to see the results of the survey though I'm very excited for cash very excited for forget suspense isn't recent I'm happy it's usable now in server actions I'm not super in love with yet I do love the new react docs and it feels bad not checking that react forget is the new react compiler kind of think of like what vapor and vew are doing where it's going to read your react code and insert all the memoization and [ __ ] where it needs to be so you don't have to write any of that anymore the original lead Dev who announced it no longer works at meta but some other really talented people have picked it up since and it's making progress I would expect to hear more about that in the near future I think my biggest concern paint Point around react right now is that the size of react's community has gotten to the point where most react devs didn't choose to use react and that means the amount of buyin the average react dev has is much lower they're just using this things they feel like they have to and when things change they feel like their job's getting harder for no reason compared to a framework like spelt where the average spelt developer chose to use spelt they're going to like it more they're going to be reading all these updates and seeing all these new things more react is so popular that we're not going to have that type of satisfaction inherent to the average user and even a survey like this is going to index on the more excited react users cuz those are the people who are going to see the link and do the survey that's the biggest concern I have is that react's advancements are going to get a lot of push back due to the nature of react developers not being react fans anymore just because it is so popular now and I don't know if that can be solved I don't know how that should affect the team's approach I just know it's a real thing and it's scary resources what have I used to learn react free courses on the job training docs videos self-directed learning all checks out what blogs magazines or newsletters do you use to keep up with react honestly just this week in react those threads are really good what sites or courses have I used to learn react have I really use none of these I played with egad a bit when I was at twitch but not much I don't listen to any of these they made this an open question which is probably the right call Lee Rob that one weird dude with the mustache the one weird dude with the mustache that can be Prime Perfect Prime's talked about react a couple times this is a good question there's so many people that like no one is jumping out immediately TK is a really good one actually TK dodo is huge Nexel does there as a highlight honestly I should put Josh in here I almost put him first Tanner's worth a shout out for sure oh Sam pikov we don't always agree in fact we disagree a lot but I'm slowly winning him over Kent dods oh Josh comeo is huge oh I've done all of these maybe not all of them oh no don't dox me yeah I started when I was 15 so yeah I'm 11 to 20 that's weird so I work at two companies and we're like six total but just Dev stuff two to five color blind and ADHD as [ __ ] we did it I think I think I passed I think that's a good score so I mean we're done that was a dope survey and I'm actually really excited for the results so make sure you stick around and you keep an eye for my streams which are every Wednesday at around 12:30 p.m. Pacific time cuz we'll be certain to go over these results as soon as they're out and available in order for us to move together as a unified Community these resources are so important and a huge shout out to Sasha and the team working on these surveys because without them we'd kind of be running blind appreciate y'all a ton thank you so much if you want to hear all about my opinions from the last survey we did I'll pin that in the corner if you've already seen that or you're just looking for something different YouTube thinks you like the video below it thank you as always appreciate you all a ton peace nerds




## The State of Authentication - 20250203
oth is easy but it's also kind of hard and in a world where there are more and more options for how to authenticate every single day and considerations like mobile and web and ooth and everything else between it's getting harder to pick a choice and it's a really scary thing to pick because moving from one o solution to another is not fun take it from someone who's had to do it a few times now so I'm going to do my best to break down all the options you have today for authentication from better off to stack off to clerk to openo to nextjs off or there's too many and we're going to do our best to explain why you would or wouldn't use any single one of them I'm excited to break this all down with you guys but first we need to hear from a sponsor notably not clerk because I will not let them influence this video despite the fact that I like them a lot so let's hear from the sponsor quick you don't need me to tell you that it's hard to hire grade Engineers what you might need is today's sponsor g2i I could tell you how great they are but I'm going to let one of their customers do it according to shop monkey we've made 17 hires in 60 days we'll never go back to hiring the old way and it's not just shop monkey saying this they work with everyone from web flow to meta and the quality Engineers they can hire for you are unbelievable they have over 8,000 Engineers ready to go they have incredibly High technical standards and they're not just giving you a list of resumes to look at they're doing real video interviews and you can even ask your own questions and get a video response from the candidate I know there's a lot of recruiting platforms but there are none I trust quite as much as g2i if you need proof go check out react Miami the best react conference sorry react conf if you want to get great engineers in days not months pretty hard to beat their own stated goal is from interview to PR it should take less less than 7 days if you're tired of hiring and un grade Engineers these guys are hard to beat check them out today at soy. link gtii it's time to talk about the state of off and all of the providers that I think are worth covering here there are quite a few off Solutions before we can go into those we should probably understand the basics of authentication in modern web and mobile applications as well as the different things off can mean going to do something I haven't done in a while we're going to do a three-piece vend diagram here I would argue that are three different pieces to authentication there is verification this is verifying that the user is who they say they are there is user info which is who is the user what permissions do they have what can or can't they do what's their email what's their profile picture all of those things and there is authentication UI think of this as like the signin button sign out button the page where you manage your au info and as annoying as it sounds something like the sign in with Google button because you don't do that right Google can block your app as someone who's dealt with this before it is is not fun even if you just change to a white version of the Google logo instead of using their colorful version at the right size you'll get asked complying with all this stuff sucks which is why it's nice to have a provider that does all of these things there's a couple different types of verification though and these are changing all of the time verification has a couple parts there's the signin method and there is the state storage SL verification method sign in method method can be things like I don't know user pass Pass Key ooth through another platform so oo I Google these are different ways a user can actually engage with your verification service and do the sign in then there is the actual management of that St because you don't want the user to have to type in their password every time they do anything on their service so usually things will be stored as access SL refresh tokens these are cookies that exist in the browser based on the service that you're currently using and the signin that you did that get set by the server in order to tell your service who this person is so that you can use that token instead of making them refresh or recheck off all of the time here they pointing out another common thing is Magic link I don't like them but yes Magic link is another signin method here worth calling out so the most common way to actually store that data is through access or refresh tokens if we go to the T3 chat code base quick I can show you guys what those look like for us here's our o actions file I'm not going to reveal what off provider we're using just yet but here we have access token we get from cookies refresh token we get from cookies and now that we have these two things we can verify the user subjects is just our validator for the user object shape don't worry about that just yet but our client verify function takes the access token the reason it takes both is that the refresh token is used once the access token expires that way this can be the main thing that you use most of the time to do stuff but it has a time limit on it so it's not out there forever the refresh token is a thing that is used to generate a new access token and what's really cool is now when we call these functions if we see the set tokens as cookies we get a new access token and a new refresh token whenever the user does something that requires the access token be regenerated so you can almost think of this kind of like you have the token you're using now and then when it expires you have this other one to create a new access token but when you do that you consume the refresh token and then have to get a new one so it's almost like a cache where you have the next value ready to go and then you bump it up whenever you need to reauthenticate the user because they just started using the site after a week of not using it or the token's been around for a while this is the most common way to do authentication there is another pattern that's been catching on for various reasons which is jwt's JWT stands for Json web token a Json web token is different because it's not just a cookie that exists in the like HTTP cookies this is an actual value that exists in your local storage for a quick example of a Json web token here is Ping Ping has all of these different values in your local storage and one of those is your next o message which contains the off State we also have cookies that have your more traditional access refresh tokens but we have this here so you have that data for the client if you want to render their profile picture email and whatnot jws depending on how you implement them can also expire if we go to something like upload thing upload thing also has JWT but they're doing it more traditionally but also less so cuz all through clerk here is where this token is set all the info in this case that we get from clerk to know who you are and this token is ajent object in local storage it's not a cookie what's interesting about this token is that it has a very short revalidation window it actually goes invalid every minute we'll talk a bit about that later on the important thing to understand here is these are the main two methods for storing the Authentication State you have the access refresh token option which are checked whenever a user does something that requires off and they are consumed if they are out of date or you have the jwt's which are Json web tokens these are stored in local storage and have an invalidation method that is server side with a specific amount of time they last for but they live in the browser storage which means they're susceptible to being hijacked by things like Chrome extensions but it also means that your app can access them to do a lot of different things and you don't have to do all of the work to do validations constantly the same way you do with access refresh tokens so they also allow you to skip a bunch of steps and checks a lot of the time now that we have the basics there we need to talk about the user info as I had hinted at before jwt's can contain user info but that shouldn't be the only place it goes this needs to be in a database somewhere the database can be a lot of different things it could be something provided by the off provider like Clerk or off zero it could be something that's in your own database something like better off or stacko or next off/ OJs all do that or it can not exist at all and you just keep it locally which is funny enough kind of what we're doing right now with T3 chat we go into that in a bit but the user info and where it is stored is an important consideration to make especially depending on what you want to do with user info that differ things will help with and others might hurt with and then we have authentication UI authentication UI is as I was saying before all the things you can click on and do to actually off see your off State and manage everything between so let's talk about these different off Solutions I want to start with a real basic one so we're going to start with openo it's also one that I'm very familiar with because I've been using it more recently openo is created by Dax and crew over at SST openo is a really fun starting point because it's both as simple as it can get but that also kind of makes it more complex to implement if we view the docs we'll see here open off a standards based off provider for web apps mobile apps yada yada they do have a default UI that you can use I didn't use it I'm assuming most didn't but if we read through their approach you'll start to get what they're doing well there are many open source solutions for o almost all of them are libraries meant to be embedded into a single app centralized off servers typically are delivered as software as of service services like ozero or clerk open o instead is a centralized off server that runs on your own infra designed for ease of self-hosting can be used to authenticate basically anything and it mostly aderes to oo 2 but it doesn't do a lot of things you might be expecting it to openo very intentionally does not attempt to solve user management so if we go back to the diagram here open off is explicitly not doing user info stuff they are not helping you manage user sessions they are just letting you know thumbs up or thumbs down is this person who they say they are so open off I would say squarely fits in the verification and basically nothing else and that's actually really nice that there's finally a good modern solution for this it means you have to plug all the pieces in yourself you have to figure out all the parts yourself and that you have to write the authentication UI or maybe use the template that they have an example of there but it is nice if this is all you want we finally have a relatively modern solution for it I've actually been frustrated at how few things do this and ended up being really useful for us because we want to do some crazy custom stuff with the three chat this made it way easier it still took me two days to set up and it resulted in me very much missing my usual go-to choice of clerk but it's a good solution if you want to own all of the pieces if you want to own all of the pieces in a way that's pre-built for you the origin for a lot of us is next o also known as OJs OJs is what we used for ping. the video call appjs is built originally largely around nextjs but now it works with other things as well they have a bunch of providers included they have a bunch of middleware helpers included a bunch of functions but the biggest detail that differs here between something like them and open off is you have to have a data model that you attach it to usually through a database sometimes through things like Prisma or drizzle but you have to look through here and look through the database adapter make sure you provide all the different methods that it expects they do have Integrations for a lot of them like if we look up Prisma and here you use the Prisma adapter with next o in order for next o to know where it's going to actually store these things which has some fun issues specifically Edge compatibility because Prisma can't run on the edge so you can't run this in middleware which is annoying they've had a bunch of different workarounds over time but you also have to add to your Prisma schema so you can't just plug this in and expect it to work you actually have to update your database model to include user and account and session and verification token and authentication authenticator here is the problem now you are managing all of this yourself this has benefits in that you can do things that might be annoying otherwise like let's say in our database we have table user also has friends which is a user array if I did this with open off I'm kind of screwed unless I personally found a database to store all this data in and how a model for that good luck have fun but if I have a user table that is controlled by next off now I can just do this join and have all the data I need to render their profile pictures what you have to do if you're using something like I don't know Clerk or open off is friends is now a string array which is going to be user ID so it's friend IDs and now I have to have a way to turn each of these friend IDs into a user object in order to render all of the things for those users if I had to make a friends list or an org list right now in T3 chat I don't know how i' even get started with that it would be really annoying to do with the way we have things set up because we're not storing any of that user data it only exists in the user session which exists on their device apparently nexo now uses gwts by default so you can actually get it working without a database but you lose all of the benefits of selecting from a table that I was just going over but if you want a database you can still set it up like if you're doing magic links you will need it if you're doing traditional session tokens you'll need it they have adapters for like everything but that's also kind of the problem is the amount of stuff here can get absurd and I didn't even know that they had this New Path where you can skip the database entirely and I don't know if I can recommend it or not cuz I haven't personally tried it but the best thing provided by Ops by far is providers see this list this is all of the oath implementations that they already have handled for you and some of these are obnoxious like the way that twitch for example does refresh tokens it does not follow ooth spec it has a bunch of weird quirks but if you use the twitch Provider from OJs I'm pretty sure it can handle the revalidation of those tokens for you I know I had to write it myself in the past but I think they figure that out if not I'm sorry if I misled you but they have all of these pieces to do off for a lot of different places and I've even used these implementations as references when working on my own off layers in other places so if you want to have sign in for basically every that's ever existed but own it all yourself OJs has you covered for all these different oo providers they have a solution to embed it in your database they have some UI pieces already built for you but admittedly not much personally I would say next off very squarely Falls in between user info and verification although apparently now you can just use it for verification which is news to me feels a little heavy for that but if you want to have your user info in your database you want to have all these verification patterns and you want it to be built deeply into nextjs next off/ off JS seem to be fine today but there is a solution that a lot of people say are better that solution is better off better off does require a database but it also supports a very similar set of things that next off does but it has a lot less Tech debt from trying to support people who are using it for five years ago it's a relatively new solution that is built heavily around typescript in modern best practices that seems genuinely really good I personally have not used better off yet this is the first one I've covered that I have not done myself but the setup actually seems relatively simple has a lot of cool features even has organization and access control which honestly kind of is its own fourth thing that I didn't put in that vend diagram but it's nice that they have it next off leaves these things to the user to explore is is why you might want to use better off over other off libraries if you need more features you need support for other Frameworks you need Advanced features like toffa multi- tendency multisession admin tools rate limiting Etc you want more control over your offlow for more comprehensive docs like the idea of a plugin system to extend it if you want to use a library that's actively maintained as a growing Community I won't comment on the state of off JS maintenance because I know that the lead maintainer there is working really hard but he also has a full-time job he's working really hard on too but this Library does seem to be in a really good place setups relatively simple you install the package create a secret key you create the folders that it needs to actually do things you have your OJs that creates the better off client and then you have to configure your database because again this needs to be stored somewhere and they will just hold your hand in storing it in your DB so they have examples here with different SQL dialects you can switch to postgress or whatever else and see that they let you wrap your database with your better provider or if you have ANM like Prisma or drizzle they've created specific adapters for those too which is quite nice you do have to create the tables though you can call their generate and migrate functions which feels a bit weird I personally would have preferred if they just gave me the code to go dump into my drizzle schema but I get why they did it this way they want to make sure everything is perfectly configured and if you have just like a one character difference between your setup and how you have the database modeled and how they do it's hellish I may or may not have a uh patch package P AG on our off solution for ping. because they changed the name of a field and it was easier to rename it on the package than it was to update our database without breaking things so it is what it is you then have to create a client instance with a base URL it holds your hand through gluing all the parts together but they do need to be glued together they're not going to do that for you you have to build the relationship between the database the O client your code base and the user client experience too all of these things have to be orch at and pulled together they help you a lot through it and I know the community is really supportive but you do need to own all these parts next off you do as well but they let you skip some of them now which is cool but it is really nice to have all of these things they also have a set of social sign-ins here nowhere near as many as nexo does but you could implement it yourself if you need regardless they have a bunch of the most common ones but if you need something that's not on the list that's your problem but they do support a lot of Frameworks and I've heard much better things about the better off support in something like spelt kit than heard about with OJs so if you need an off solution that is built into your framework but isn't built into the nextjs framework better off it's really good solution for it apparently you can set up the drizzle stuff yourself but I didn't see it so if you can DIY it in drizzle I want to see it it would be nice if they showed me the code in here yeah that's my issue with that the plugin system is really cool though the fact that they have plugins for things like two factor for proper username unique support for phone number magic links email OTP pass Keys traditional generic o off and so much more I like the plugin system a lot that is really cool and probably one of the biggest reasons you would want to consider this they even have a next off migration guide honestly I should consider this for the Ping site o they hav't optimized for performance they already have used cache examples that's really nice actually but do they have components using it with custom components no it does not look like they have components okay that's pretty cool actually on the that they have this fun UI to create the exact signin experience that you want you click continue click the framework you want it only has support for these in next but interesting that's the o o client and then the sign in TSX it generates the component using Tailwind for you cool this is interesting because it's not owning the client this almost feels like God I I I don't want to go find the old excal file but this feels similar to like my like Styles libraries rant where there are the components that are provided as part of the package but there's also components that are provided as copy pastable thing and this is going the Shaden Direction where you actually copy paste the code and this isn't something from their package this is something that is generated based on your specific needs they even inline the svgs for all those logos they aren't compliant with Google here though Google will actually ban your app from ooth if you try to get approval for higher scopes with this so be careful it's stupid but the fact that the Google logo isn't Google's colors here and isn't a certain size will get you in trouble with them because they suck so just know that going in that this isn't necessarily client code that is 100% ready to go for the expectations of these providers but at the very least it gives you the right starting point I think it's fair to say now that I've done this deep dive that our friends over at better off are in a really good spot and I would say pretty confidently they fit here the catch being you have to own all those Parts yourself and glue it all together but you can absolutely do that and as long as you have a good database to store it in and you want all of these things tied up you're good it's in a really good State and I honestly like if I really didn't want to use an off service I think better o is pretty high up on my list but the reality is I do usually want to use an off service and clerk you know anything about them is also right here so obviously account for some bias clerk is a sponsor what you might not know is when clerk first came out I would roast the out of the CEO at events we would go to a lot of different like Tech events in SF and I'd run into him and the whole time he would just like listen to me explaining why Au a service makes no sense it's so easy to set up yourself now who would care he would just look at me and smile say we'll get you someday man and then they did and the way they got me was honestly a little silly it was react native I wanted an O solution that also worked well for my native in mobile apps and what I had built with next o was not there and I didn't actually check this with better o but as they had said in their docs the goal of this was to be built around your full stack framework it is framework agnostic but it's deeply built into your framework but what happens if you want to access that off elsewhere like react native Expo integration they have a way to configure the better off backend with Expo but how do I access it on a react native app if it's hosted somewhere else do they actually have a solution for this oh they do cool yeah I can put a different client URL nice better Roth is the first open source solution I've seen that has a somewhat happy path for getting it working in react native that is nice what they aren't helping with though and I can pretty confidently say scrolling through this is all the weirdness with signing in with Google where it has to open up a web view that you sign in with and then kick you back to the right place in the app uh is this all still the Expo integration maybe they do have that because they're using cookies with better off and because cookies aren't a real thing on mobile in order to hit API with your authenticated State you have to use their custom fetch function this is the problem the fact that to authenticate the user you can't rely on HTTP cookies to be part of the request you have to use this instead all these parts are annoying and I'm so thankful they have a path at all and that they built all these Solutions it's genuinely really cool that someone took solving the react native and Expo problem seriously but if you're building a swift app good luck if you're building a cotlin app good luck you're building a flutter app good luck not saying this is a bad thing it's awesome that better off is in the state it's in in that for most people most of the time it's good but clerk goes further they just today actually put out their support officially for n and view which is dope but they support a ton of different things including Expo obviously Chrome extensions which are obnoxious iOS straight node Express react router remix tanack start they're actually sponsoring tanack start go Astro you get the idea the reason clerk can do all these things is they're a well-funded company that is doing nothing but off that also means they're not traditionally open source the packages that you install on your app are but the actual infras side isn't it also means they cost money I'll just jump in front of the pricing if you have 10,000 users a month or less it is free if you have more than 10,000 then it's 25 bucks a month then 2 cents per additional user but you also get some fun additional features there and I'm sure that the Enterprise pricing is different but I'm happy with the $25 a month plan I do have frustrations with it specifically my biggest frustration I've told them all of this they know my pain points the biggest one I have is if I'm paying for one app and I want features in another app that has way fewer users I have to pay the 25 bucks a month for that they are working on this from what I know no guarantees but I think I successfully bullied them into letting you pay per clerk account or org instead of per app which is really annoying but something like for example marker thing which is what I use for orchestrating my content post stream so I'll go to a given stream I did like uh ghosty is here and in here I have all the things I talked about which I export into a CSV and then use to Auto Chop My Stream into content for my editor this is a tool that gets used by like 15 people but I really wanted longer sessions I was tired of having to sign out and back in but the longer session times was a paid feature I was going to pay 25 bucks a month for just this one app with 15 users so that's a gotcha for sure but holy hell is the integration so much smoother than anything else I've ever done with off it literally takes me under 5 minutes to add clerk properly to something and it's so nice it is worth the money to me one other notable thing about the user count and this is like my favorite thing clerk ever did a user has counted as active when they return to your app 24 plus hours after signing up so if you have a huge surge of users because you went viral and then they all go up to your app they all sign in they play with it quick and then leave and never come back you're not build for them you're only build for the users that are recurring in your app and what's funny here is something like upload thing doesn't end up with a very high Mau number simply because people will sign in for the first time set it up grab their API key throw it in their app and then not go to the upload thing dashboard again which means that we don't have a crazy number for this and I don't even know if we're over the uh like account where we'd be charged more or not right now because most people go to the dashboard once and then do everything else through their code base instead so don't worry about a huge surge of traffic I wish more companies would implement this CU it is a really really nice thing I've been bugging other people I work with about this because I I want this to be how billing works everywhere I go the biggest thing they push is their client components though which are for the most part really good but there are catches I actually have in my notes for this video I mad about components in clerk it's one of the biggest reasons I'm doing this video because I've been getting increasingly frustrated with them if we go back to marker thing pay attention to this corner my profile picture here you notice something it comes in late if I didn't intentionally wrap this with a box of the right size it would pop in so the button would go right and then shift left once this appeared there is no server rendering for their components and as a person who quite likes server rendering it is obnoxious and as a result we ended up rewriting almost all of the components for upload thing we made our own org switcher we made our own user card which I'm not going to open cuz it's going to show my personal data we did that cuz we wanted more control but if you don't need that control you're just trying to get off working well clerk makes it so nice see when I click this we get this fancy component where I can manage my user info I can sign out all just baked in in the free tier you just Mount the component it takes seconds to set up well and since the Au itself is hosted by clerk not as part of your next app it's really easy to just connect whatever else to an existing clerk setup so if you want to have a next JS code base and then you add them react native app later on you're good to go you have the exact same off State across everything and when I was trying to find a solution for react native that's when I gave clerk an honest go and very quickly realized I don't want to ever do this myself again and I went through it with openo and I'm the whole time I was doing openo I was just missing Clerk and that's not like an ad that's just my reality it's so simple to set up we just go to the next implementation you saw the package you get your API keys from their dashboard you add the clerk middleware function then you wrap your app with the clerk provider you're basically done install grab the tokens from their dashboard you use a middleware xjs which is really simple and solves a lot of problems but there's a catch we'll get to the middleware in nextjs is a function that runs on the edge before a request is actually forwarded on it's really useful for things like changing the URL someone is going to where if a user is going to/ profile but they're not signed in you might want to redirect them to/ sign in instead of waiting for the page to load mod realize that it's the wrong page and redirect you middleware will run when the user makes the request and then send them to the right place they have a middleware function they provide for you that will check your authentication and even let you configure it to not let people into certain pages by default they were actually very aggressive with that configuration and I yelled at them a bunch and now they're less aggressive with it now you can create a route matcher which says you want to protect these routes so we have a protected route matcher that says you can't go to dashboard or form unless you are off so if is protected route wait off. protect now these routes cannot be accessed unless the user is signed in this is really convenient and I will never use it this is a feature that I'm sure makes a lot of sense for things like internal tools and platforms I like controlling these states myself and I will not put them in my middleware you look at the middleware for any service that we have that is using clerk it's almost always really really simple this is the actual middleware for marker thing it's simple because I don't care if you go to a page authenticated or not I just want to make sure that the token is verified and that I know that you are you once you have that set up the rest is easy your app your app with the clerk provider and then you render a sign out or signed in component that they provide and you're done like that's it you've set up off fully if you need data about the user you use the clerk SDK so if I want to get user info I can call off or current user which are functions that they provide to get that info so if we have a page that we want to return different content depending on the user ID con user ID equals a weit off now we can query our database there is a catch though which is that it's not our database it's in so if we go back to the example of a friend table if I want to get all of my friends I might have a thing in Clerk's user object that is my friend IDs but now I have to use those IDs to go fetch all of the users from Clerk's SDK there's no way to join between the clerk table and your own data you can set up clerk to also dump all the data into your database and update it with web hooks but I've never actually seen anyone do that it's a feature they support but yeah I don't find myself needing it too often I've actually been very surprised how rarely it is that I need the user table in a way that I can't just fetch it from their API so if we look at a service like marker thing this service doesn't have a database at all it is just using clerk which is really cool because it has to do some annoying things so this is is the marker thing.com theor route I could have locked this so only I can go to it but it's currently set up that any signed in user can access this and the way I did that is I get the VOD with markers pam. slug token but that might be using the wrong token this code is broken actually I should fix this later if I had written this code correctly which it's funny I'm just realizing now that I didn't I could get the twitch token from clerk without having your user ID at all and just get the O off token which is really really nice because I can give access to my vods page to other people on my team without needing a database without to store it somewhere else I can get the token for Theo even if I'm on account Ben or Faze or someone else on my team because I can just use the clerk SDK and request from it based on a users's ID I want their oo twitch token and they'll handle the revalidation and refreshing and all of that for you so that I can access the Twitch API with this token without having to hack around a bunch of normally this would require a bunch of stuff in database and I've built this app three times and most of the time I had to have a database for it but clerk gave me everything I needed to skip that part and the rest is all just built using the twitch apis and the token that they give me I think that is really really nice and I have been blown away at how convenient this whole flow is it has significantly simplified a lot of the things I have written and it's all comes together and the reason I personally pick clerk most of the time it's really easy to get things started the way you want to they have an SDK that gets you all the data you might need and all the weird edge cases I don't feel like handling and the result is I get off working really quickly instead of it taking me a day it takes me a few minutes and then eventually later on there are a couple things that annoy me that I have to fight with and I DM the team and they fix it and it's all good in the end but I genuinely really like clerk enough that my frustrations with the components not rendering on the server and my biggest frustration which is the middleware insisting on running always on everything these are things I can get over because it makes the rest so simple that I don't care that much but I do need to do a tangent for the middleware thing since clerk runs on middleware that means that clerk runs on every request to my site that means that my static Pages aren't going to show up immediately because even if the page itself is static you have to go through this middleware function give the thumbs up or thumbs down for that user and then you can send them the actual page data that means if you put clerk on your blog it will feel notably slower even if only one page is off you you can put a custom matcher function so the middleware only runs on certain routes but it is annoying at best this file's existence inherently means your site's going to feel slightly slower they have some things that help like it's not going to call the clerk back end every single time any request is made they have a really interesting strategy with jwt's where it's a JWT so it's stored and can be used on different platforms but it also is invalidated every minute which means the first time I go to the p like when I go to upload thing.com it has to revalidate me initially but once it's revalidated me and given me that new cookie all of the requests that follow from there for the next minute don't require a revalidation so it can get through the middleware much faster but that first request if you haven't been to the website for a minute that request will block the First Response not my favorite thing very helpful not my favorite thing when I'm trying to build apps that are showing off how performant they are it would also be a killer like just absolutely destroy something like T3 chat which I want everything to be local for since the middleware is what authenticates the user determines if they are or aren't properly authenticated it has to be hit on basically every request that sucks if you want things to load without having to make an additional request if you want it to just be cached locally on the user's device that way of building isn't great I'm sure there are ways in clerk to change my verification validation methods they were not easy enough for me to identify figure out and set up so I rolled my own with open off and instead this is the first time I've built something with El Clark in a while and I miss it dearly but it really makes me appreciate both the strengths and the weaknesses of a hosted off provider like clerk now you to talk about Luchia off not sure I'm supposed to pronounce it every time I pronounce the name Luchia somebody gets mad at me all I have to say here is pilcrow is deprecating it they've made recommendations for other things you should look at and use including off JS but as great as Lucia o was they are planning on deprecating it I like that they're this upfront about it they feel like it isn't working I now Implement sessions from scratch and don't use library for my personal projects there's nothing more heartbreaking than building a library or a solution and finding yourself not using it because it's frustrating you I feel for pilcro I've been there it's not a good spot to be and as they also call out the database adapters are a significant complexity task the fact that the library is sinking to your database makes it really annoying to maintain to go back to open off for a sex I forgot to mention this part open off solves this by making you have your own KV store and the KV store just manages the tokens and nothing else so when you set up openo you need to bring your own storage they recommend Dynamo DB or Cloud for KV just needs to be a KV store of some form but you need somewhere to store that data you can't access it outside of off but all this is being used for is verifying and validating the user session but it is not meant to be the same database you use for everything else it is just the authentication layer and it's nice that this is isolated like we're using versell and nextjs with a bunch of hacks for T3 chat but I am hosting the O over on cloud flare KV and Cloud forare workers because they made it really easy to do that in its own isolated separate thing and all these other Solutions have these really complex database adapters to handle all the different places the data might live maintaining it has sucked for OJs it sucked for pilcro working on Lucia and I'm sure it sucks for better o as well and is basically necessary if you're storing the user data in your database and thankfully they called this out and that they're planning on deprecating and going out of their way to guide people in the right direction but they also had a really good post I wanted to cover here back to the middleware thing please stop using middleware to protect your routes there seems to be a certain group of people that is adamant on middleware being used to handle authorization middleware refers to functions that run before every request so every single request is going to have this is protected call where they're going to check to see if the path is protected and if it is they're going to validate the request check the user and then forward them the right place if they are off or give a 401 if they're not I don't like this approach I'm just confused at this point since you're just reimplementing routing logic with middleware an API provided by your routing library and what do you do when you need to protect routes based on the users roles instead like if you have a page you only want admins to go to you're just going to keep making your middleware more complex and the more complex your middleware gets the slower it runs in the slower everything else goes in your app while route level middleware may help in the simple example routes in real world apps aren't often organized by the required permissions what happens if you have multiple roles what if you need to implement different rate limits on each route based on user roles how about API access token permissions and Scopes it isn't surprising that this happened given how Loosey Goosey crossed out powerful JS can be off which includes both authentication and authorization important distinction I have a whole video about this if you haven't seen it authentication is making sure a user is who they say they are authorization is making sure they can do what they want to do different things and since people are scared of off they end up making things more complex than they need to be and I like this I personally like checking off on the route rather than at a higher up middleware layer maybe you have a middleware that assigns off to the request but middleware that decides what the request does bad every time one common response I get is that middleware prevents devs from accidentally forgetting to add off checks add your off checks thank you pilcrow for that I'm happy we agree on this yeah so sadly luia doesn't really have a place in this anymore it's a little sad it'll be missed but I'm thankful they've done the right thing they've documented everything they've done throughout and they recommend other Solutions like OJs and better off now and now for our final Contender stack off quick biases I'm an investor in stack I also am an investor and a sponsor of clerk so these are the two I'm the most biased about there's a reason I'm sponsoring and working with and investing in these companies because these things suck to build and these companies are doing a good job of making a great solution the big difference between stack off and clerk is that stack off is fully open source it's not open source client code and packages it's open source everything but it is also much earlier along you will run into more issues here cuz they just got started somewhat recently don't tell me that their GitHub link isn't uh Target blank come on guys they have a lot of the components and fancy features that you expect from something like clerk which is really nice and it looks like their sign in is compliant with Google's rules look at that cool features all the stuff that you would expect there and it's open source you can lurk the GitHub and see what features they're adding and when and annoy them with issues and all of that you can have them host for you their free tier is basically identical to what you get from something like clerk they don't charge for orgs which is nice clerk does once you have a certain number of them and they have a team price which is a bit more expensive but it's for when you want more dashboard admins quite expensive but they're pricing it differently it's a very good alternative and if you don't like the pricing you can self host it but if you want to let them do it for you that is really nice I am assuming I've never actually set it up but my assumption is when you self host they call out if you want a self-host be careful there's a lot of it's a complex project with a lot of interdependent services to manage them all independently updates will be more annoying reliability won't be quite as high as they could theoretically do Etc the catch is you need to have your API backend you need to have a dashboard for you to access a client SDK that's already provided a postgress DB they have Prisma set up as their RM for it Spix which is how you manage the web hooks in and out and then an email server as well not too bad and you can absolutely set this up yourself if anything stacko would be a really cool reference for rolling your own full off platform for your application I would argue the best time to think about something like stack off is if you want the quick setup that you get from clerk but you also want the possibility to admittedly put a lot of work in to exit and self host in the future they have a slightly happier path there than you do on something like clerk funny enough I've talk a lot with the clerk team about an export feature where you can export your clerk setup to something else that's open source or self-hosted the biggest problem they run into trying to figure it out is figuring out what to let you export to because there's so many different options and they all have such weird expectations that building an export feature is hard is exporting important to you do you need a way to move off the paid solution if you want to host it internally at your own company in the future stack off is a thing worth considering I'm excited what these guys are doing I really like the founders they're a fun team I chat with them all the time but I would say of the options stack off is the biggest bet being made it still like touches everything in your code base when you set it up the same way something like clerk does or even more so like better Roth does but you can exit and self host if you want which is a really nice benefit that isn't offered by clerk right now personally I still use clerk when I'm building new apps there's a reason that I recommend them as much as I do I think they are a really happy path almost always for almost everyone but stacko is the first what I would call call real competition for clerk people keep bringing up passport and it's worth at least mentioning it hasn't gotten an update in 5 months and that update was the read me what did they change in it just added prefers color scheme light and dark yeah this is the OG off library for Express where you'd throw it in your middle wear and check a cookie it's fine they are sponsored by every off company now CU they all desperately want to pull people off because passport is like what we used for node Services back in 2014 I haven't seen anyone building a new thing with passport in a while I'll be honest but if you really want to it exists still it very very squarely Falls in that top section here where it's literally just the verification layer and they don't even like prescribe Storage Solutions so you got to own pretty much everything yourself there but it exists I wouldn't use it for anything yeah and chat should be enough a reason here to not touch it passports very old look at the commit in the support folder oh God lib hasn't had a commit for two years Jesus yeah this is going to be a hard sell for me today I can tell you where to move from it if you want to do that but yeah people were not happy please not passport is 2025 are better than this horror stories yeah I forgot to touch on Work Work OS is really cool they're much more focused on Enterprise off they have happy paths for things like nextjs but this is I'm a big company I have weird expectations about gdpr stuff that I have to like manage and deal with crazy samel SSO that I don't know how to implement I want everything to just work and I'm down to pay for it work OS is a really good solution again really good team but if you want to have a custom domain for your off you're paying 100 bucks a month if you want to set up SSO with Sam and oidc you're paying 125 bucks per connection per month so it's a different model they charge it in a different way for different things but this is the like if I was building a company with the expectation of having our clients be like Microsoft and like jira and those were the people I wanted to have working with me work OS would be a solution I would reach for they also created authkit authkit is a really cool set of open- source components in pieces to assemble your off with other providers obviously they s you to use workos in the middle from what I understand you can plug oit into other things and it's also built funny enough by a lot of the original radic team because they were purchased by work so yeah that's why the site's so beautiful that's why the components are so beautiful these guys know what they're doing this is the like I'd say work OS is the I don't want to take any risk at all and I'm down to pay for it option but again it's not one I've personally used because I'm not trying to score Microsoft as a customer so the missing one I need to like restructure this slightly to have more room in the middle here here so we got stack o in here I would say work OS by default is here but if you combine work OS with off kit it moves it here because oit as far as I understand is largely just here think I covered mostly everything here oh Firebase and super base off I've heard so many weird problems with Firebase off I don't even really want to cover it like it's cheap but I've also heard it just randomly like gets hit with crazy rate limits and prevents users from signing in as soon as I mentioned Firebase resident hacker Eva very loudly hears it because it's so easy to set up Firebase incorrectly that there are whole cultures of exploits built around it Evo was able to pone 900 sites and 125 million accounts with one vulnerability that isn't necessarily that Firebase is vulnerable itself but the way that they encourage you set it up is so in is so often wrong that half I would guess of Firebase implementations have misconfigurations in things I have a whole video about this if you want to check it out but uh yeah be careful with Firebase plane text passwords yeah yeah the good old days so yeah Firebase off sucks subase has their own off I don't know how they charge for it a lot of these database providers like superbase and Firebase have off built in it is significantly less full feature insured than it would be from a service like Clerk or off zero or stack o because they're not an off company and getting all of the pieces like the revalidation of tokens and managing permissions on Google and that stuff is not easy to do and as far as I know they don't do like any of it convex also author off because of this reason a lot of these platforms offer it because usually the exportation is offes in the DB and if these platforms also have a permissions model which convex does because you can give permissions to what a user can can't do like getting their own messages in a message app or with superbase because everything is done through role security when you use the superbase SDK you don't actually set up an API that queries your database instead you use their SDK with a user ID and it will query and it will fail if the user doesn't have permission for that row it's a whole different model and I don't feel like going too deep on it but o exists in superbase not because they want to compete with clerk o exists in superbase because their product requires authentication and specifically authorization is a key part of how you access data through their platform I don't like that personally I prefer my authentication layer and my data layer to be separate and the way they come together is this wonderful thing you've probably heard of before an API so personally not my thing I have seen some people who use superbase for off and then just treat this database part as a traditional SQL database and query the postgress through something like drizzle and they're just using the O as free off cool happy for you but uh it's not going to be anywhere near as flexible and controllable as other platforms that we've covered here they also don't have multiactor unless you pay a bunch of money for it like it's expected this is I get what they're doing it makes a lot of sense and for a company that wants to have everything provided doesn't want to pick their database set up their apis create off and pull it all together Su base is a good option I would suggest you avoid using the SDK on client and instead run an API to euse their own one last thing I need to touch on is a cool thing coming in the near future for nextjs nextjs is adding some new functionality for interrupting requests based on authentication States it's a new feature it's only in the canary right now but there is an unauthorized function that you can call in a given route if you have the Au interrupts experiment on which will allow you to do something like this you have the dashboard page which is app dasboard so this would be Local Host 3000 dasboard in here we call the session check to get session info if there is no session we call the unauthorized function from next navigation traditionally what we would do here is redirect them to/ signin or something but now you have an unauthorized function that can be triggered as part of next's Primitives you would then create an unauthorized TSX file similar to like a loading TSX or an error TSX file in the next routing Paradigm that would be what gets hit when you call that unauthorized function what's really cool is you can even call it in something like a server action so if a user call update profile and they're not authorized you can immediately kick them to that page super handy they're also working on request interceptors I didn't know about this till now so this is really really cool the problem with middleware is that this has to run on every single request you can't really have different middleware for different pages in your app you can't have middleware that only runs on things like actions but doesn't run on things like page loads middleware is very limited and the new intercept pattern should let you write custom interceptions for different routes takes in the next request can do all these different things example use O So this intercept lives in appdashboard Interceptor and the Interceptor TS file will run before those pages do this will allow you to have certain pages that have a blocker without having to do all of that on every single page this is the actual upload thing code base and in here we have the app dashboard route so if I go to upload thing.com go to the dashboard the URL you see it's SL dashboard SL up thing internal Ops the name of our team here our org this URL is encoded in the file routing but we have all of these things that are shared the layout wraps all of them so all of them have this same layout I confirm team access and this confirmed team access function calls this internal thing that will throw the not found if the team isn't found or you're not signed in this is a function that we have to run on every single page which we do via layout but this function runs after the request has been processed by the next server and starts creating the page that the user gets it would be really nice if I could hoist this one layer higher so it runs before next starts generating Pages can run on something like I don't know a middleware function then it can make sure that everything in this directory everything from this URL down effectively is affected by this intercept and now I don't have to do all of these checks in here anymore because I've handled it slightly higher up and now the path for all of this code is way simpler theoretically I would have to go check this in every single page if I didn't do it in the layout and even then what's really scary is you can fetch the page even if the layout fails so if my layout here has this confirm function but the page doesn't with the right type of interception you can access a given page even if the layout failed which is really really annoying so not only do you have to check this in the layout layer you also have to on every single page in this directory make sure that you're checking this team access function that we wrote or a user could theoretically access the page content for a team they're not on that sucks super hard it's one of the biggest problems with the new nextjs model in my opinion and I did not know they had a planned solution for it this will theoretically make it so you can use something like Clark without the middleware entirely which will be really really nice I'm excited as hell about this proposal interceptors will op pages into Dynamic rendering yes they should cool apparently they don't have hedge to run time support yeah that's annoying but this is so much better I'm actually really happy to see that that's happening that'll make a lot of my pain points with most of these libraries way less bad Eva resident hacker has also found a bunch of things with nextjs actions and Pages where they can execute things via client.js that they shouldn't be able to yeah really good info one more thing I didn't mention that I just want to make sure my stance is very clear of these options oath is my favorite pass keys are annoying but fine I'm just annoyed that the ux for them is as bad as it is like when I sign in with a past C have to click five buttons theoretically can get better in the future it hasn't yet magic links annoy me but they're plenty secure user password is a Scourge and it needs to die if it is even vaguely reasonable for you while implementing off to not have a user password option if that is even a choice that you have when setting things up please take it the existence of passwords is so archaic and benign and a fundamental failure of software and the amount of problems they cause the amount of money that working with them costs the amount of security issues that come out of passwords is so egregious that just avoiding them is the only realistic option it sucks that it is that bad but like Microsoft's been pushing for a while for a passwordless future they they posted a number a long time ago it's like some number of millions of dollars that Microsoft lost every year doing support calls for their own staff because they forgot a password or a password expired and they couldn't get into their accounts passwords cost a ton of money are an endless source of security issues are a worse experience for users and suck to implement properly avoid them if you can just use oaf or pass keys or something else please please I like ooth magic links are fine pass keys are getting there don't do user pass if you can avoid it I could spend hours just talking about the nuances of doing jwt's right clerk has a bunch of great content on things like jws and how to do them right thing about jws is that they contain in that like Json a specific authentication code that can be used to check that they are actually who they are this is another post from their blog that I think is really good it's part of their How We Roll series which if you really want to understand o I'd recommend reading through the whole thing it's pretty cool they use jwt's the problem with jws is since they contain the O state in them you can't invalidate it so if you like delete a user's account but the time that that token is valid for is still like three more hours the user could still do things and access things the token is still valid the solution that they came up with at clerk is to set the validation time to 60 seconds so if a user is signed in you immediately hit the delete Account button they get 60 seconds of being able to make requests before it goes away but that is basically nothing and it solves so many of these problems specifically it means you don't have to recheck the users off on every single request like if they load a page and then they has to make like 15 API calls each of those API calls doesn't have to double check over on the clerk side each of them can just use the token that it got when the page loaded to do those requests and not have to do the full round trip every time really really nice especially considering how painful it is to do these types of invalidations and account deletions and there are so many JWT setups where if a user gets banned they can still do things for a while and again these are the problems you'll run into if you roll your own off that I am just so tired of thinking of like how do I get the token to the react native app how do I make sure when it's invalidated the user gets kicked out and they can't do other things these are all the type of Niche annoying problems you'll run into if you roll your own off it's why you should absolutely at least use a library but it's also the reason I personally lean on things like Clerk and like stacko because they've handled all of these problems for me and I am more than happy to pay 25 bucks a month once I have over 10,000 users to not think about these things but this really comes down to what your preferences are do you want to have full ownership of every part of your Tech stack do you want to not worry about o and treat it like a table that isn't your problem what do you want to own hopefully this helps you guys understand where o is at what all these providers are what the benefits and negatives are for each why I still use clerk for pretty much everything why better off is where it is why open o is really good solution for a very small number of things but very good for those why I would use each of these open off I'd use open off if I want to deploy myself I want simple ooff Behavior I am okay with off being Standalone and I want to own it myself the big thing with open off is that your off is a standalone service so similar to how like Clerk or stack off are cloud services that you call to check off info openo is as well it is a service that you have to host yourself but it is separate from your app you don't host it as a route in your app like you do with things like next off or better off openo lives in its own little world and its own little worker I tried having an openo worker that also did other things and it was hellish openo lives alone in its little isolated bubble better off I want my data in my DB I want all the pieces owned by me I want some help doing oo connections and I want a good set of docs and community and I'm okay with gluing it all together myself but the key with both of these is you need to really want to own your own off to have it be justified for me openo was I had a very specific thing I wanted to do that clerk wasn't quite equipped for that made it the right choice it was still painful to get right but we pulled it off better off is a more traditional like I want clerk but I own it instead and honestly it is really hard for me to recommend OJs now that better O is a thing if you really don't want the data in your database you know what here's what I'll do off JS is I really don't want the data in my DB but otherwise I like better off the community is not as good it's not as well maintained but it's solid and then clerk I want off that works on everything I don't mind paying and the quicker I can get it working the better I don't want to deal with weird saml SSO BS when we get Enterprise customers oh one last clerk thing I feel bad even bring this up because I'm personally annoyed at clerk at the moment because they have been talking about doing a stripe integration for so long and it just isn't shipping like here is the video of them demoing it in April of last year we are at almost a year since they announced they were going to do this and we still don't have it so I've called them out privately now I'm doing it publicly what the when getting this they hired a person fulltime to work on it and we I still don't have access as a person who works with them closely it's so annoying I even told them straight up if they had their stripe integration set up and working I would have used clerk instead of openo for T3 chat I don't know if this will ever happen I'll pin a comment if it does but I at this point think it's just vaporware but man if they can get this working it's going to change everything I have a video coming up soon about how miserable stripe is to set up so keep an eye out for that when it drops what they're adding here that is so exciting is you can connect stripe to Clerk and now from clerk you can set up users can sub orgs can sub what cheer options they have and set that all up inside of clerk settings instead of inside of stripe settings and then when you're a user in the app you just have a plans and billing tab that handles everything for you you don't have to set up all of this glue and yourself it's so good you still have to open the stripe account and Link it but stripe subscriptions should be tied to a user you shouldn't have to do that tying yourself it makes so much sense for this all to be part of clerk because then you can get a user from Clerk and it knows if it's subbed or not so good this needs to be out and I'm amazed that it's taking as long as it is and I will continue flaming them forward until I have access but yeah it's if clerk can get that it will go from being my like default to the only thing I can actually recommend if you charge for your service but it's been a year I'm losing hope clerk please win My Hope back you you need to do the thing where you work really hard to fix the relationship with Theo again cuz it's starting to get bad and then we have stack off I'd say for this is I like clerk but I want an exit plan I don't need all the Mobile and other integration support yet and I'm okay with using something really new I'll put work OSS in here work OS my average customer spends 10,000 per month I want companies like Microsoft using my stuff IDK why I'm even watching this video I haven't built a new app in years I just work in Enterprise software if these things are true for you work OS is going to make your life much better hopefully this helps clarify when and how I would recommend using any of these Solutions and make sure you account for the fact that I've never used better off and I haven't used these two and I'm an investor in this one and I'm an investor and a sponsor of this one but that's where I'm at doing my best to show you how I think about these things and be as transparent as possible about my relationships with the companies but I was more than happy to pay clerk money when I realized how much easier they made my life I'm very excited to see where stack off goes work OS is building the product I feel like I should be using and I will eventually get there and the open source options have finally gotten really good but in order for them to get good they had to make OJs look really bad they had to let Luchia die and they had to make passport look like a Meme and here we are here is how I think about all the major off solutions that I've had people asking about for a bit they all have value except for all zero and generally speaking it's kind of hard to pick wrong I would say if you're picking OJs or off zero you better have a really good reason for it but otherwise these Solutions have gotten pretty good it's a matter of how much do you want to own how much do you want to build how much do you want to integrate and how much do you want to pay and I think that's about it let me know what I missed and Flame me for my takes on I don't know Firebase you guys tend to get mad about that I don't know what else to say here I've covered off top to bottom so let me know what you guys think and until next time peace nerds




## The State of React Native - 20240213
obviously I'm a huge fan of react native it's great technology that's been making a ton of progress over the last few years which is why more than ever I'm curious what react native developers have to say every year software Mansion runs a survey about react native to see how developers are feeling about it what the ecosystems like all these really important things there's no better way to understand how react native devs feel then to read through it which is exactly what we're going to do now react native is not a single company initiative and its modularity allows many to step up and provide a solution for each aspect some libraries are gaining popularity some solutions are fading from the scene and some limitations are becoming more apparent all of this can make it difficult for developers to choose the right tools and libraries for their projects and be confident in their decisions the second edition of the survey presents the trends and outlines new initiatives happening in the react native ecosystem starting with this addition we can examine the popularity and usability of specific Solutions year-over-year some of these Trends were expected While others were complete surprises we find that some aspects are getting more attention from other contributors than ever before take a look at the styling or debugging sections and others the first edition of the survey was very successful major players in the ecosystem are Reading and Responding to the data we've also grown by more than 500 new respondents year-over-year reaching nearly 2400 unique respondents feel like a few more than 2400 people are going to watch this video so make sure you use the link in the description so you can sign up and fill it out next year if this is the type of thing that's interesting to you anyways shout out to Bartholomew for working on this survey so these things are so much work and we need to appreciate the people who made it I didn't get emailed when this what happened so I'm going to quickly hide my screen enter my email as y'all should as well and we're going read through it my email's been submitted let's go in about me the age demographics are fascinating these actually line up pretty closely to my YouTube analytics I'll say I have more 55 plus than I do under 18 so that part's a little different J it skew is very slightly younger but is really interesting company size this is one of my favorite questions especially for something like react native where usually Technologies like react native get stereotyped as things small companies use and big companies avoid you can see here it's not the case at all there a lot of big companies with Engineers that are filling out the survey to quickly compare this is the JavaScript survey results from 2022 so this is far from an exact comparison there's over 10 times the respondents but as a reference to the numbers for the react native site I think this will be useful we'll see here that the 100 to 1,000 category for just JavaScript in 2022 was around 22% and 1,000 plus was around 20% which is about the same for 100 to 1,000 it's about 25ish year but then that thousand plus is a bit smaller it's 10 instead of 20 so there's a difference there and you could argue that seems like there's a sweet spot between the 100 to a th000 point for react native but in the end it's not too big of a difference so I wouldn't read too far into this just an interesting detail to compare how react native is adopted in terms of company size compared to JavaScript and how it's adopted company size country or region India's very close to us for survey respondents here that's fascinating now I kind of want to go look at flutter results and see where those stand very interesting overall also weirdly aligned with my YouTube demographics Germany would be a lot higher braz brail would be a good bit higher but pretty lined up higher education 67% of people have a related degree 15% of an unrelated degree 17% of no degree that's crazy it's almost equal for degree but it's not code versus no code degree years of experience in react native 15% are less than a year 38% or 2 to 3 years 30% or 4 to 5 16% or six or more react natives knew enough that having six or more years of experience with it means you were there day one fascinating really interesting and then total years of experience is a much more traditional normal chart gender again looks a lot like my YouTube demographics while we know collecting publishing diversity data could be a sensitive issue we do think it's important to obtain the data to help measure and improve the survey's efforts in terms of inclusivity and representativeness agreed salaries oo let's compare this to the JavaScript salaries actually about 28% are 50 to 100K 18% are 100 to 200 and 4% are over 200k for the JavaScript survey last year versus here it's 4.7% 200k a little more make 200k 100 to 200 18 versus 20 seems like a general skew to the right but the 50 to 100 is a bit smaller yeah looks like a slight skew to the right not much but a slight one interesting so if you want to make like theoretically 2 to 10% more money react native might be the way to do that that is a joke react native is not going to make you more money developer backgrounds seems like most react native devs were react devs before but a lot of them were frontend devs that weren't using react or back-end devs too a much smaller portion started with Android and iOS which is interesting some of the best react native devs I know actually started as Android devs very interesting that doesn't pan out here in terms of the numbers 30% of the people who did the survey have contributed to open source react native libraries yeah what that sounds insane to me that's insane that this is a combination of things this is the people who did this survey are skewing much more towards the hardcore people react native has a much more contributor friendly ecosystem for sure it's actually a pretty common meme when I talk to react cor te people where they feel like whenever someone has a problem with react native it gets to them immediately but somebody has a problem with react it doesn't get to them at all and they just end up bitching on Twitter years later so was interesting to see that with react native having a more Niche community that it's this skewed seems like a lot of somebody asked like what about the total SE respondents only 3% skipped the question so it's yeah a lot of people who did this survey that's 773 is react native contributors or react native Library contributors that have answered the survey that's a pretty pretty absurdly big number for comparison and I'll run a quick poll in my twitch chat have you contributed to an OSS Library you use yes no well you guys respond to this so we can figure out what those numbers look like which again my HUD is going to be very skewed because this isn't just the people who watch my videos this is the people who hang out late at night to watch my live streams when I'm recording my videos and even then okay that's actually a pretty buff number if anyone is not normally one to vote but you happen to be on Twitch I would appreciate if you vote because I want these numbers to be as reasonable as possible considering my audience you know what I'll I'll go one step further have you contributed to an open source library or tool that you use yes no and since it's Twitter if you want to see the results I'll put a popcorn in here I feel like the emote button on Mac OS has gotten way less stable over the last few years we give it 12 hours but we'll check the results in a little bit well looks like about 50/50 is on my twitch Community how is the Twitter poll doing are there just more open source contributors than we all think because that number shocked me the community of people who hang out in these places and respond to tweet twitter polls and stuff and do surveys like this clearly skews much heavier towards open source contributors contributions to react native this is for react native core 8% of the respondents have contributed to react native Corp that might seem insane but you all need to understand just how much more contribution react native gets than react 2,66 contributors on react native that's insane a huge part of why react native is so good isn't just cuz it's like react it's specifically because the size of the community that has built all of these crazy bindings for everything from IOS and Android to like TV OS to Vision OS and Oculus Quest and all these other crazy environments you never would have thought of there's even like Xbox bindings for react native and that happens because there's 2,000 plus people contributing them if we compare to the react code base that's 1,600 contributors that's a bit over half for something that's significantly older and used significantly more it's a huge gap very interesting we also have the industry sector section here it seems like a lot of finance and education apps being built with react dative makes sense interesting mobile OS versions reasonably current versus most recent old and as old as possible very few targeting really old this doesn't surprise me Target platforms Android's slightly higher than iOS also very interesting to me good to know web is also higher than I thought almost a fourth of iOS very interesting actually react native skia is very low as well and of the desktop Os Oh is this just which desktop os are they using interesting not surprised it's mostly Mac users number of released apps this is actually very interesting that most of the people working in react native have released more than one app with it that's fascinating and then team size also very interesting especially when you consider the earlier number with the size of the company that the team size are still 3 to five people or solo pretty small percentage were more than 10 developers on their team and you also have to consider that when there's more than devs on the team that number skewed up because there's 10 people per 10 plus person Dev team so this number would skew higher just because there's more people on those teams it doesn't so that's really telling it's not lots of big teams building with react native I will also say that questions like this are not super clear usually because sadly these types of questions are different depending on what you view a team as cuz when I was at twitch I was effectively on like five different teams depending on the size and scope of things because I was on the web team which had 800 plus people contributing but my immediate team was the safety moderation tools team which was a three-person team and what your team is varies a lot depending on how your company structured how do you use react native professionally almost all professionally your biggest react native apps user count seems like a lot of apps in that 10 to 100K range a decent number in the 100K to 1 mil and then a decent bit in the 1 mil plus I wish they fli this in normal charted it but I get it also only me being 10% hilarious it is actually really nice to use something like react native to build a oneoff app for random use cases but interesting to see that be such a big number let's take a look at the platform apis this doesn't surprise me seeing camera is one of the most used platform apis I I've said this for a while the reason you go from web to react native is the need for specific native functionality and behaviors like the camera or permissions for accessing all of the different things you might need on iOS or sometimes even on Android Now notifications deep links web view like all of these are things okay I guess deep links isn't but like these first three are things you can only do on apps that you can't really do from the web so it makes sense they're some of the most common also file system is something you can't really do from the web seem like a decent chunk of these are things that aren't trivial in the browser which is a huge incentive to start building an app with react native State Management this will be interesting quick prediction I think mobex is going to be much more represented in here than it is in most JavaScript surveys because I know there's a big mobex cult within the react native community so let's take a look I don't love the way the percentages are done here because this is yeah this is retention let's do interest cool looks like react Que query is pretty dominant I will say when I was doing react native react query was a godsend it was essential for working in react native and I am very thankful to see it overly represented here we also see zustand going up very slightly zust stand's phenomenal makes a lot of sense for these use cases as well react hooks fell in interest fascinating to see that huge of a drop and Jodi maintaining almost exactly Legend State not even being included fascinating recoil moving up in position but down in interest I will say recoil is in a weird spot especially now that Jodi's as good as it is the speed at which Jodi killed recoil is fascinating to me I've never even heard of react easy State here's were things that interesting with MC state tree Apollo client finally going down that's good to see Mo state tree at like 42 Mo state tree and Apollo having the same levels of interest is hilarious to me and Redux toolkit being tied with that all mobx still pretty high up here and Redux falling in rank but having the same exact level of Interest fascinating let's take a look at actual usage so what are people using obviously they're all using react hooks painful number using Redux although it is going down Redux toolkit appeared and is doing well tan stack query is up a huge chunk not surprising it's pretty great technology Apollo's down good to see zust stand's up almost like doubling huge recoil is exactly the same mobex is 20% Which is fascinating Jodi is up to 14% moex beating out Jodi is crazy to me though again like this this is a different world we're peering into as web devs it's fascinating to see experience overtime oh of course Jamon came in my own mobc State like I called this so hard without even scrolling I love that yeah Jamon if you guys don't know him he runs infinite red great dude really deep on react native and hangs out in this place a ton and built my state tree experience overtime overview of opinions of the technology surveyed over time po clients going down Jodi is going up tan going up recoils steady to declining Redux is declining react hooks are flat and maxed out and zustand is growing pretty alarmingly checks out sentiment split this is the W use again chart that's in all these surveys oh no I'm sorry I'm so sorry Jamon that's a pretty big not interested bar I will I will make it a point to try mobx state tree because this spread makes me sad but this spread makes me feel great seeing tanat query and zustand killing it at the top up here and anything with the word Redux in it having a huge push left doesn't surprise me yeah this this lines up almost exactly with my expectations if you just trim the mobex part at the bottom everything else here is roughly what I expected overall happiness this is very different from the other charts I've been seeing in the other surveys people seem very happy with the react native ecosystem overall at least for State Management it's like 6% are unhappy everyone else seems happy and a bunch of other wrens nothing too interesting there oh look at that Sebastian anyways where things get really interesting is data fetching I'm actually very curious have to say there and yes I pronounced us stand wrong it's just a meme at this point I'm sorry data fetching tanat query stays at the top this is retention we want usage I would say fetch very common axios why is axio so common what the why are 88% of react native Dev still using axios what what I'm going to not hang out there for too long it'll stress me out paollo dropping a bunch is nice to see T going up is nice to see rdk query appearing is nice to see Ste going down oh trpc skyrocketed almost doubled yeah see that Spike up there for trpc that's really cool axio flatlining is a little less cool why does everyone like axios what why are axios sentiment scores better than fetches someone in the comments let me know what I'm missing because I feel like I'm going insane okay this is also very interesting I've talked to a bunch of react native people specifically on the Expo side and the conclusion was that data fetching and data loading in react native was miserable and that's why they are pushing as hard as they are on things like server components this suggests otherwise which is very interesting to me that react native devs don't perceive an issue with the current state of data fetching navigation everyone's favorite as a web dev I'll say mobile dev has a lot more going on in navigation it's really interesting right navigation flatlined Expo router more than doubled from 12 to 40% cuz it's really out and stable now react native navigation plummeting react router is plummeting people use react router on mobile that scares me and the navigation router which I've never heard of and hopefully don't have to look at that Evan was the one who wrote this little blurb here he's the creator of Expo router and Legend over at the Expo team he also talks about here that there were so many reasons to be excited about navigation in 2023 mainly due to the incredible orchestration big part was his collab with software Mansion which again people created the survey huge shout out they make a bunch of the necessary libraries for good animation and such in react native and they helped a bunch with the router stuff too so they could build better routing better navigation better animations between views and things like that the rec navigation team presented exciting new improvements for V7 including a static API more streamline development and obviously XEL router which he wrote experience over time basically everything is declining other than Expo router that's an inter in Trend and my suspicion will be Expo router continues to grow sentiment split Expo router really killing it here R navigation is really good so I expect that to stay for a while but Expo router for a one and a half-year-old thing doing that well is nuts overall happiness lean him pretty happy and tanack rouder got written in by one person for other that's hilarious styling styling and react native is an interesting thing I'm very curious to see how this one goes let's take a look at you usage style sheet API which is the built-in for creating Styles went down a little bit still over 90 inline styles again built-in stuff went up a bit seems like inline styles are getting less scary to people style components went up 1% from 60 to 61 I will say I've seen a lot more styled components on mobile recently than web they seem to have enjoyed it a lot and stuck with it tail and react native has lost a lot of positioning in the chart even though its percentage has stayed the same restyle again actually went up but fell a bunch because of the new things that have been introduced and the growth that they've seen native to jump from 9% to 22% more than doubling huge also the native one Creator works at Expo now so I would expect some much cooler tail windy things in the future then tamagi went from 6% to almost 20 huge huge jump and a bunch of these other new solutions that have been coming out too and here we can see the chart of sentiment over time tomag GOI is one of the most vertical upwards lines I've seen here in the bit good for them and obviously inline styling growing a weird amount sentiment split tamagi similar to Expo rout are really killing it with these sentiment splits a lot of people are cool with the style sheet API too native wind has a surprisingly big not interested chunk very small used and wouldn't again though which is for a Tailwind alternative is probably the better thing to index on very interesting overall this is the most unhappy I've seen any of these charts so far it's over 10% unhappy but only 10ish per are unhappy with the style Solutions really interesting the number of styling libraries doubled in 2023 does this mean that developers are still looking for fresh approaches or are not satisfied with the current one the most important aspect for every library is to be crossplatform especially as react native extends Beyond Mobile support Advanced theming which will easily style complex applications the overall happiness with styling R native is satisfying for the creators almost 90% of devs feel positive or neutral means that we the library authors did a good job in the past year the doubled number of libraries could finally meet the needs of the market sounds pretty fair to me component libraries this is a more Niche version of the style stuff we saw so Tom magui is going to rank real high here cuz it's one of the best component libraries for react native yep Tomi really assment split here we're going to see a bit more unhappiness because component libraries in general suck but component libraries and react native extra suck graphics and animations ranking interesting seeing react native skia doing this well let's switch to usage I don't think its usage will be that high yeah react native skia for those who don't know is a react native binding to the skia engine if you don't know skia it's the engine that runs flutter the reason I hate flutter so much is it forces you to put everything in this like game engine type layer where it's not rendering native text or native buttons or using any of the parts of your native platform it's almost like if you're a web dev putting everything in a canvas react native ski is much more interesting to me because you don't have to use it for everything if you have specific views where it makes sense to have that level of like animation and graphical Fidelity that isn't using the native platforms instead using the GPU so if you're doing all that type of Animation stuff this makes sense but if you're doing more like having a little notification pop up in your phone that's like Hey we're doing this thing press okay the way you do that with skia is screenshots of the original native UI which is why Everything feels so uncanny in like a flutter IOS app react native skia helps you find a balance where you can use react native in existing native bindings where it makes sense but you can use skia for the parts that need that animation Fidelity cool to see it getting more recognition your intuition with animation on mobile specifically with something like react native might be that JavaScript would suck for it because if your JavaScript has to run on every frame and your phone's like 120 HZ that's just going to kill performance and eat a ton of CPU right well most animations aren't something that needs to be updated from your UI layer that constantly we already know this because in C CS we don't say hey here's every single position on every frame we'll often create an animation in CSS it says hey you start here you end here here's your curve go do that on the GPU I'm going to get back to work and that's how react native reanimated works it does everything on the native iOS Android or whatever other platform layer so you're just telling the native layer hey move this here I'm going to go do more JavaScript and react native reanimated will figure out how to do that properly on the native platform again it's one of those Best of Both Worlds technologies that something like react native enables better than anything I've seen before haven't used the animated API much but I see it's growing that's really cool to see it's the built-in animation layer in react native the little bit I played with it it was Jank but I have heard it improved that's cool to see lah hurts me deeply L is a package for taking After Effects exports and rendering them in applications primarily mobile but also on web it's huge it's slow it's hideous I hate it it's allowing for Adobe to have a weird stronghold on dev that they did not earn and I yeah know it it's one of those weird Airbnb sins that is perpetuated through the industry for too long and I'm really excited to see competition like uh RVE that is going to kill L over time mod also really good Rea native skas massively growing re native animatable I haven't heard anyone talk about in a while 3js is dope Rea 3 fiber is awesome Rea 3 fiber on mobile is super underrated too Expo GL also undergraded but no one wants to write their own GL calls directly and then RVE starting to pick up a decent chunk here as I mentioned before I really want to see RVE eat lahti why is L going going up no no that hurts sentiment split everyone loves react native reanimated this this library is phenomenal if you have played with react native and haven't tried reanimated you should do it it's really really cool the skia stuff's also having a really good sentiment almost nobody who used it won't use it again it's 0% that's that's very interesting makes me more interested in checking that out in the future overall happiness is also way better than I would have expected I'll be honest I would never have guessed that when surveying a bunch of react native devs that around 6% would say unhappy with the current state of Animation my assumption would be most react native devs would not be happy with things but clearly I'm wrong the state of stuff's really good right now debugging and profiling this is where things get painful console logs are the easiest way to debug and everything especially react native I'll admit it the react native debugging tools just are not good enough compared to other Solutions flipper is better than it was but it still sucks to set up and do right compared to doing things in the browser it's just different different level never in my life have I made as many one pixel red borders as I did in react NATO just trying to figure out where things are going flutter did a much better job of this just letting you know what's rendering where react native could meaningfully improve here so I'm curious to see what the sentiment is about it let's just scroll to the sentiment the biggest problems are connecting to flipper yeah connecting to flipper sucks why wouldn't they pull for the sentiment for debugging it's one of the most interesting things I would be very curious how most react native devs feel about debugging in react native which we just don't know from this performance profiling yeah everyone just uses flipper some use the native stuff for xcode and Android Studio but not many nothing too surprising here yeah Expo built their Chrome Dev tool integration which is really nice Expo and meta are forming a debugging working group looks like they are putting a lot of work into progressing here this is good to see I would expect to see massive changes in how we debug react native apps over the next year or two and this is just the start let's take a look at react native features seems like everyone is using Hermes now at least the Hermes runtime this isn't static her if you're curious about that I have a whole video about JS at the speed of C this is the just in time compiler for your JavaScript so that the bundles can load and start up faster because we don't need to use V8 it's mobile I I have been corrected by Ethan Ms runtime is better described as an ahead of time bite code compiler where it takes the things that the JavaScript would have put into your memory and does that for you ahead so you don't have to do that also if custom native modules doing way better not surprising it's gotten much easier over time the JSC runtime gone down a bit EXO modules have gone up a bunch X modules are dope really good to see JSI dropping V8 runtime dropping massive or not massively just 4% still pretty big though new architecture going up custom native views going up fabric going down slightly turbo native modules going up slightly sentiment split everyone loves the air Miss runtime most people love the new architecture you don't know the new architecture the way that react native communicates with the native layer has been rebuilt from scratch and it's in a really really good spot now people are really done with V8 and JSC which makes sense cuz those are both a mess but heres is doing very very very well do you integrate react native with applications written using other Technologies this is interesting 78% of the devs who did the survey are working in Standalone Greenfield apps which checks out but not too surprising to see just how few devs are not building react native views in existing apps this is what we I was trying to push for at twitch that certain pieces within the app like the Creator portion for the dashboard for when I'm managing my stream that that could be a react native app made by the Creator team and the rest of the mobile app be by the specific IOS and Android mobile teams the mobile teams didn't like this proposal they didn't want JavaScript the exact quote from one of the mobile enges was I would certainly quit if your janky JavaScript ever touched my beautiful Swift so knowing how mobile devs feel this doesn't surprise me too much code sharing a lot of sharing with react native web I will say my model for sharing with react native is a monor repo where shared pieces Like Your Hooks your data fetching logic your State Management all those types of things those all would exist within a separate package or folder in the Depo that both the mobile app built in react native and the web app built with I don't know next could be shared OT updating e and code push again over the air updates are one of the best reasons to use react native and it's cool seeing them get this type of support it's like yeah Oda is huge and big part of why you should use something like react native T this is awesome this is a senior software engineer at Microsoft who's also a react native contributor I had some really good talks with Lorenzo at chain react great dude they're focused on a ton of things at Microsoft to make react Windows apps a way better experience including things like react native test app bridg support Etc really cool stuff oh boy this is where I'm going to feel a lot of pain we're about to see the word Firebase come up way too often analytics a lot of fire base a little bit of mixed panel little bit of amplitude decent bit of segment nowhere near enough post hog does post hog have react native options or at least advertise them let's see yeah they have a dock for it yeah they should push that more because Firebase does not deserve to have this type of stronghold where of the total survey respondents almost half are using Firebase analytics that's terrifying to me that is terrifying to me we also have Sentry here with the crash reporting that doesn't surprise me it's nice to see them beating out Firebase I would not have guessed that I was trying out bug snag when I was using react native and it was not in a great state for react native stuff nice to see Sentry winning here cuz they have they have good path there data VI everyone uses react native SVG I did not know there was a victory native you're already familiar with victory it's a chart visualization library that makes really pretty charts in react and now I guess it works on react native too cool to see did not know that react native chart kit which I haven't heard of and recharts oh this is all data viz so for data viz most people are using svgs still which is hilarious storage native acing storage this is the standard has been for a while not surprised to see it here MKV is much faster I do remember trying this one and being much happier with it interesting so MKV was originally developed by WeChat and this is a react native binding for it and it takes advantage of the new react native stuff to go straight through the C++ lib very very nice yeah cool to see that growing Expo SQL light doing decently well too that one's interesting for those who don't know SQL light's pretty heavily used on mobile as like the storage solution because the logic can be portable between different operating systems and SQL lights something that's supported pretty well and pretty quick on almost every operating system so you can write your data logic once and reuse it between lots of things one of the crazy examples of this is that most of the logic for Messenger is written in sqlite yes Facebook Messenger is mostly built in sqlite if I should do a video about that let me know cuz I think it's really interesting testing I don't care I'm just s to see story book getting that much representation here other popular libraries safe area context should just be built in gesture Handler should probably just be built in react native web view probably shouldn't be built in but interesting that a thousand of the 2,400 or so people are using that flash list should be way higher if you guys don't know flash list this is the list everyone should use in react native stop using flatlist it is is bad flash list is really good flash list is better than most of the Swift list Solutions which I know are bad because when I open up the download tab here it freezes my arc browser because they don't have a good way to deal with the length of my download folder list I've talked to the team about it since and they're blaming Swift UI for it which shows you just how hard it is to make a list that is performant so yes flash list is the way you should do lists Shopify put a lot of work into making this I've talk to the people who worked on it they are very very smart and this list is very very performant use Flash list it's good Expo image I I loved Expo image it was so useful for so much it lets you embed images on the Fly do lots of different types of compression for different platforms I I I have been deep in this package interesting overall vision cameras fascinating to see here too local first app architecture would use again would not use interested not interested never heard this is the idea of your app doing everything locally so instead of you press a button and it makes Network request it would be you press a button it updates the UI locally while in the background making the network request or putting it in a queue to be made in the future so if you lose internet connection you can still use the app normally building up a queue of things to be submitted whenever you get internet connection again a lot of apps probably should lean into this more something like I don't know my notetaking app notion be really nice if notion had a better offline local first experience and I would expect more and more apps to be building tools for this but not everyone is and most of the time our apps are exposing a web View and we're not expecting them to work when they're not online so it's an interesting balance and surprised so many have not heard of oh boy deployment this will be a fun one EAS smoke in the top here we'll switch to usage interesting for attention and interest EAS wins but once we go to actual usage they immediately fall a ton I know I was manually building my react native app with X code up until I basically begged Evan bacon from the Expo team to jump in my repo and help us figure out why es wasn't working ended up being some dumb config stuff he just deleted half the config files and it worked as expected which was dope to see we were over complicating things but once you have your X code set up working you're really scared to change things because making mobile apps is hard but EAS build took all that pain away now the same way I do with something like versell I just push up the code when I'm done and a build pops out of my Dev tools it's great the as build and submit have made a lot of the pain I had building re native apps almost instantaneously go away so if it wasn't for EAS being in here I wouldn't use re native probably at all at this point experience over time yeah everyone's loving es build everything else is dipping downwards checks out sentiment split and again yes build and submit just winning up here three people said xcode cloud excode cloud is such a meme I almost want to do like a deep dive on it just to make fun of it a bunch interesting that Simon's at software mansion and works at Expo I did not know people were overlapping like that react native devs are increasingly interested in using automated build and deployment tools to handle the building and distribution of their apps simultaneously their interest in using manual tools like xcode and Android Studio appears to be waning this makes sense dealing with all of those weird like building a react native app is more annoying than coding react native app by a lot so nice to see that the industry is Shifting in the direction of Expo and the awesome stuff that they've been building react native tools again e slaughtering we'll switch this to usage retive Community CLI dropped a ton Expo CLI jumped a bunch Expo go do it pretty well so it goes mostly a rebranding of the Expo app so it's why it's only on this side Expo snack Expo snack I just haven't seen too much use of it's like think of it like a code sandbox embed for react native to show demos of different components and such seems really cool I just haven't seen it much asli is at a nice 56% now upgrade helpers at the same 56 config plugins 47 11 to 12 for ignite ignite's kind of like the create T3 app of react native where it's built now around Expo it's been around forever it's by the team over at infinite red it's meant to take the current state-of-the-art for react native apps and make it quick to build we have the rnx kit 2 which is doing a bit better native test app this is the Microsoft one at 8% very interesting native Community CLI is tanking this looks like the create react app story all over again cool to see sentiment split everyone loves the Expo stuff everyone loves config plugins Expo snack and go are a little less loved but still decently positive Rec native Community CLI starting to dip and ignites dipping a bunch Jamon talk to me what's going on here it comes as no surprise to me that Expos the clear lead here in terms of react native developer tooling yeah they're they're doing a great job at this JS the TS balance I want to meet this 5% who is writing their react native app entirely in JavaScript 71 people I am so sorry I am so so sorry page managers for those who don't know yarn has a very strong hold on the react native Community because getting your bundles working with other tools sucked it's better now but with like web dev you never had to use yarn it made things faster and nicer at times but it was never necessary to use yarn with react native for a long time you had to use yarn so it has a huge hold to projects and users who know that I even still instinctively reach for yarn when building react native apps thankfully things have gotten better in pnpm mostly works with react native now but you can even see here that pnpm and bun have the sameish number of users that's how long it's taken for react native to not be so yarn here we have the starter templates expo's winning ignites there wow we made it in yeah I did not think creete T3 turbo was going to make it in here great work Julius I had almost nothing to do with turbo other than like communicating My Philosophy about it this is all work by Julius I mentioned before throughout how we think about react native and my goal isn't to make your react native app run everywhere it's use react native for Native stuff and use web for web stuff and crate T3 turbo makes it really easy to connect your native app your web app trpc have these all packages that all work well together really cool to see it getting enough attention to be referenced in the survey awesome really cool to see this blurb is actually important because it calls out the work Microsoft's doing I feel like I don't talk about this enough Microsoft's working really really hard to get react native to the point where you can build one code base for Windows Mac Android and iOS they want this desperately because they've failed even more so building good application development tools for modern windows and they're having circles run around them by these other platforms so if they can make a good enough experience to Target all of those plat forms including windows then Windows might not get left behind so they have a huge incentive to get this right and it's cool to see them putting their money with their mouth is react native Alternatives oh no I'm sad this is the final section oh that makes sense a lot of the Alternatives people are interested in are more web based like Cordova and ionic although flutters too high up I don't like flutter beating out swiftui that makes me sad cuz I actually like Swift UI zamarin still here I I going to skip let's just forget about zamarin jetpack compose I I'll be honest I know basically nothing about jetpack compose but I have heard really really positive things from the people I know who have played with it so I probably should look into it more let me know in the comments if I should native script from 7 to 8% o cotland multiplatform from 4 to 6% me and felgo vanished experience over time yay flutter is people dipping nice to see everyone hates Cordova holy 1.9% would use again everyone else hates it even though they're stuck on it Swift UI is getting slightly more positive checks out yeah that all makes sense yep and again with me saying Swift is nice seems like the sentiment shift here makes sense I'm realizing now a lot of y'all probably have never seen Swift UI code this might look a little familiar if you are a JavaScript or react Dev imagine if instead of function calls with all of these additional bits that this was I don't know maybe like a HTML tag and that these were all keys being passed to it this is jsx without the jsx this idea of vertical composing of components is very very inspired by react different syntax same shape and goal this is also the syntax that's being used for for the Zed UI rust thing that they're working on too seems like this type of structuring of your uis around components it won and if you're already familiar with components Swift UI is going to not be too hard to pick up I don't know jack about cin multiplatform I've again heard good things so I should look into it not enough to confidently say anything and flutter people are very unhappy with this is nice to see used it wouldn't again seven used W again five we're winning slow but sure je back compose a lot of not interested but not a lot of used and wouldn't again native scripts having a rough time though so is Ion soar and Cordova is basically a skeleton it's a corpse smells like it too oh Simon you guys don't know Simon Grim he actually just today won't be today anymore when the video comes out I did a podcast with him all about react native so if you want to check that out you we talking more in depth about react native stuff go find this we'll try to put the link in the description section resources most you go to react native docs or the Expo docs surprising number of self-directed learning and videos all the usual podcasts are low but not too low podcasts and on the job training are scary close though look at that Sebastian when wrote this part three thriving react native podcasts Expo consolidating documentation finally new architecture documentation finally happened lots of progress has been made here blogs magazines and newsletters this week in react again check out Sebastian lber stuff he's been informing this channel for a while not surprised to see him so high up in here sites courses and books react native docs and stack Overflow are really high YouTube is over Expo docs hey hey Evan I'm winning now how does that feel podcast do they have yes woo there we are was waiting for it primagen and Fire Ship being in here is also dope to see but I'm pumped I'm number two I should probably know who this is oh yeah I know William he is at 100K I will help with that I will do my part good to to have a nice win at the end people I wonder if me having my handle like that has cuss me am I the only one who has a handle here instead of like just their name why interesting cool I'll take my spot other surveys the state of JS so me referencing state of JS earlier actually made sense yeah Evan at the top Okay evan you can have your win back wait 47 versus  G anyways opinions this actually be an interesting section rect natives moving in the right direction seems like a GRE strongly is actually growing quite a bit imagine this in the react survey we don't have the results from the react survey yet but I am guaranteeing guaranteeing it's not going to be this positive this type of shift like a 50% increase from before to after in the the general vibe from the community interesting the neutrals gone down the disagree at 2.3% disagree strong strong 0.3 versus 0.5 2.4 yeah disagree is going down and it's minuscule like imagine the question to react devs how many of you disagree strongly that react is moving in the right direction that's going to be like 30% right now people are people are livid at the moment so if this if any chart in this entire thing emphasizes the gap between the react community and the react native Community this is the one building R native apps is overly complex right now this is a very clean split across disagree is pretty high but disagree strongly isn't and I I would agree it's like re native isn't the easy thing to set up compared to like I don't know nextjs but it's improved so much over time and it still is less bad than native mobile apps the re native ecosystems changing too fast mostly neutral to disagree but solid 23% Agree to Agree strongly again I guarantee this one's going to be very different in a react survey oh react native pain points I called it earlier debugging almost half unmaintained packages pretty high up there too thankfully Expo has made this less a problem because there's so many great packages in their ecosystem dealing with native code I bet this is lower than last year I'm curious if they measure that upgrades keyboard handling keyboards are rough in general but especially especially on react native keyboard avoid view is doesn't work yeah most of this stuff makes sense to me missing features better debugging Android Shadows oh Android Shadows are a show better flat you have a better flatlist just use Flash list it should be the default but just install the package it's not that scary better performance performance isn't actually I think it's interesting that performance is so much lower than a lot of other things think it's not a big deal people associate react native apps with bad performance and that just isn't too big a deal anymore fetch API stream support interesting didn't know that was a problem right now is that everybody's using axios I'm not going to think about that anymore it'll just make me mad you have advantages crossplatform hot reloading Community code sharing Expo whereas OTA updates is way too low this should be the top because nothing does it as well as react native Expo being near the top makes a lot of sense though developer experience cost effective easy to learn native feel yeah stable performance and other are pretty low on here stable and performance being low is funny another point from Thomas it's encouraging to see the efforts of meta and other major players in the ecosystem to actively collaborate and improve the capabilities in terms of debugging upgrades and dealing with native code effectively addressing the feedback from last year's edition of the survey the focus has shifted towards improving developer experience with unclear error messages ranking higher than stability or performance concerns confirming the maturity of the framework that's really interesting that error message is being unclear is more concerning than stability and performance now re is doing pretty damn good let's take a look at the conclusion last year was a good year for react native I'm inclined to agree with rising stars and The Styling space Innovations in navigation and improvements in debugging it's hard not to say that we're living in the best years of react native so far we're yet to unfold what server components in the new architecture will bring to the table I like to define the current state of react native as stable but definitely not boring it seems like in these uncertain times the ecosystem thrives hope you found the survey data reassuring in the same way I did sure you're going to use it to make better informed decisions fantastic stuff again huge shout out to software mansion and everyone involved in these surveys these things aren't easy to make it wasn't even easy to sit here and read through it all I hope this was this was a lot of work to do let me know in the comments what your favorite and least favorite parts were until next time see you guys later peace nerds




## The Story of Tyler at ui.dev (WEB DEV WEDNESDAY) - 20220505
course uh i'm tyler i think a lot about javascript and react and startups and creating developer content so that's what we're here to mostly talk about along with a few other things so i was muted myself but now people can hear me happy i had you intro you rather than doing it i got it i got it how are we doing levels wise guys everything sound okay hello hello hello testing one two three all good slightly bassy that's probably going to be the case with my newer setup i might want to turn it down later but yeah it's like i know where you want to be it's a little bit that like baritone you know that they're like late night radio hosts getting some vibes going like not all of us just have the natural radio voice man that's like might come to you but that's not for everyone here it's funny so when i started i was like worried that my voice because it's it's pretty nasally if i'm not like focused um like my wife calls this like my teaching voice because when i'm like just like naturally talking it's like kind of like i kind of mumble and like and my mom gets super tripped out by it because she knows my like real voice the best right and so yeah i've had to perfect my my talking into a microphone voice but luckily it comes pretty naturally now so yeah that's hilarious because i haven't practiced at all i think i more care too much as an audio engineer i'm just super insecure about how all of the audio sounds and right the big thing for me was turning on self monitor it's the most evil thing in the world and it drives you mad but right right it just makes you a better speaker totally totally anton the first time joining welcome welcome great to have you here man awesome to have so many of y'all here already i know it's a bit early still but good to have you all already yeah i want to give a quick spiel about tyler because i am i know i'm a huge fan of everybody i bring on the show but this is the man who's been raising the bar for like the quality of content on youtube especially in like javascript world for a minute now if y'all haven't seen his like or why x1 the story of videos they're some of the like most important javascript content on the internet and i'm really excited for like 10 years from now when these are the things we're referencing instead of obscure two-hour talks you have to sit through to get one good nugget thank you that was big praise that's that's really the goal is i feel like there's and we've kind of experienced this right when you're in an industry for so long you start to see you start to have like pattern recognition with like historical context and it's super important and super valuable but then you get to the point where it's like okay well no one is really telling these stories no one is really like you know saying how did we get here and so that was really our goal with the um with all the the recent the videos we've been doing is just allowing people who weren't there to really understand like hey we didn't just get here out of nowhere like there's a fairly rational logical path to how we got here and yeah it's worked out fairly well so far so glad glad you're enjoying it funny enough i actually had a friend ask a few days ago hey i feel like i found all this awesome content about how like react happened how next happened all the things we're talking about and using now happened i want more context of this quality how do i find like the history of php and lamp and like the things before this and i just like smiled and apologized like it doesn't exist those things weren't well documented and that's what's going to be hard for us especially as the channel grows because up until this point it's been just like me telling you know my lived experience but it's going to get to the point where it's like yeah i wasn't there in the early days doing that kind of stuff and so relying on i don't really know how to go yet but um [Music] we'll see hopefully like if we can and if we can figure that out right if we can start telling stories and that's our plan of things we didn't directly live um i think that'll get really interesting because then like sky's the limit so yeah absolutely i it's hard telling stories and like giving this remember where we put this it's been an interesting experience from both there's like a creator that does a lot of interviews and such as well as a like person who runs the company you set a really high bar in the things that you're best at and care the most about and part of that ends up being as you succeed that you end up doing more things that you're worse at and you have to lower your bar to get more successful and if you want to like expand your content you have to expand it into things you're less confident in and will be more wrong on and put out lower quality to it extent i'm curious how you've like encountered that throughout your career where like as you grow you have to lower your bar even though your quality goes up yeah you're totally right i got lucky in in like when i started doing developer content it was like what 2015 maybe 2014 and the bar was much lower back then right like usually the people i point to to be like the bar of content now like josh camo is always the one who stands out right all this stuff's brilliant he's brilliant execution's brilliant uh in 2015 there was none of that it was just like people writing blogs and people were mostly happy sometimes like if the docs weren't bad you'd find a good tutorial so i got lucky in like my figured out phase was kind of the phase where everybody was figuring it out right i don't know how especially people like josh like jump into it nowadays because the bar really is a lot higher and uh that could be super intimidating for a lot of beginners but i think like that's fine understanding obviously and this is corny but like that you'll get better the more that you do the thing um [Music] will work out a lot of love in the chat appreciate you all thank you thank you for the support yeah you'll be getting that the whole show i'm sure everyone here is a big fan yeah it's i shout out to like new boston back in the og youtube days that's how i learned java to host my minecraft server it's crazy how much things have improved right one of my favorite days as a developer was he like followed me on twitter randomly a few years ago and i was like this is such a strange experience because i i did the same thing you did right where it's like i gotta learn like java for this like college class my professor's garbage so where do you go to you find this random dude in boston uh bucky right super funny super enjoyable teaches you everything and he's brilliant and great and like i hope he's still doing well um but yeah it's just it's it's been such such an interesting thing but even like comparison compare like his early videos to um again josh is kind of the standard but something like a josh would do or like we would do right like the bar is just so much higher now and if you want to stand out you really have to like put in the time to make it uh different right rather than just like bucky showing up and be like hey guys like and then he has a bunch of poop jokes and like it's funny and you go on with your life like nowadays it's just it's a completely different uh ecosystem but yeah and on top of that there's this new idea of like documentary content to an extent where it's much less about the teaching somebody how to use something they're already using much more like historical how likely is it that we're going to go re-watch a tutorial from the new boston 10 years ago on a version of java nobody's ship for the last eight like that's not valuable whereas i will definitely be watching the videos on your channel for the next few years right and that's and that's refreshing because like i feel like so often especially when it comes to like react and like all the react stuff we've done react router another great example don't know if the react router boys are watching i've taught more react router than anyone in the entire world including them because i make courses every iteration and so i've made like four react router courses and it kills me every time but that's kind of the you know the nature of creating content around something like reactor react router that isn't so timeless um and so that's why we've absolutely loved uh again going back to the youtube channel this new stuff because it does feel like we can have impact for people a decade from now rather than just like until the next react router version comes out in six months you know um so it's been fun yeah absolutely i this is also like shout out not a lot of people here are going to expect rich harris's talks are some of the best talks in the industry and are a great another great example of like historically considerate and meaningful well outside of the thing that they like announce are or are focused around like i regularly go back to like the spelt 3 announcement to hear him explain the history of how we got to where we are and it's so important like as you yourself grow and see how these things change to understand enough history to get why they're changing and not feel like everything's falling out from underneath you in a way right and even even from like a learning perspective that's super valuable too right because like imagine having to learn how to drive a car without ever knowing like what a car is or like seeing one like that's kind of what we do with new beginners is like okay you know you're learning java or whatever in college like we're going to build some like terminal game and everyone's like what the what's a terminal right you're just kind of like floating around in this like dead space and yeah it's just it's just completely absurd and this is going more like an education side of things but like the fact that we expect people to learn these things without the context and also like documentation historically doesn't really care to provide that context because they're usually stuck with like trying to provide like an api reference which is valuable most of the time but when you're just getting started like it's and i feel like that's why uh specifically content creators are good and i know they kind of get get a lot of crap especially from you know like some specific core teams that i know but like how many of us would have learned react back in the day if it wasn't for like you know some egghead stuff or like you know doji west boss stuff or even like angularjs right with john lindquist like back in the day like um it's getting better because people are starting to like devrel is a thing now and people are focusing on documentation is like a big part of the thing but but in the early days it wasn't like that so i don't know yeah traversing another great example right where oh we've all of us learned web dev from traversing back in the day or bucky before that right so yeah absolutely i i'm definitely seeing the shift as well like i had a great convo with rachel lee last week there one of the lead maintainers on the react core docs they do personally do not like and i have been very surprised by how video content has been evolving and taking more of like the interest share over time like when they did like user reviews and found so many new developers looking to video content that was a huge surprise to them and it's absolutely the trend it's what there's a lot of reasons for it but i think for me the biggest one is when you don't have others around you like the peers who are doing the thing there are so many little pieces that you don't pick up like the hut keys to do things in your editor or how much time you should be spending like moving your files around or just the general sense of how people do this like i could sit there and describe to you in every little detail how to build something from scratch on a piece of paper but you don't know what it looks like to do that still right and that's what i remember way back in the day probably 2018 maybe 2019 um [Music] maybe not that far back but yeah i had i had a chat with rachel because she was like experimenting or like they were going down this path like hey we're going to recreate the react docs and the big focus of the conversation was like this idea of hey everyone treats docs like they're like this like very boring static thing and i think that's why courses have an advantage because we don't have the essentially like the handcuffs of being an api reference we can kind of do whatever we want we could have videos we could have quizzes we could have all that stuff and so to watch her then um take that idea and just the brilliant execution of it with the new react docs has just been super fun to watch and she she really set the bar and that team really set the bar for new documentation because the new react docs are amazing and it really is fun to see again like hey what if we just like rethought what documentation was um and started from like a first principles approach of what we're trying to solve rather than just like you know use like whatever the the comments in our repo to like generate dynamic docs you know it's like it's been really interesting to watch and big shout out to her so yeah rachel's the best big shout out to them make sure you watch that episode last week if you haven't already they are a phenomenal developer devrel and deep developer educator more than anything like it's really cool talking to somebody who's that senior specifically in developer education as their like one and only focus it's just it was an awesome conversation i was really pumped that we got to have that one yeah on that topic though i'm really curious you touched on this idea of like education materials reference materials and like examples almost all being like kind of different and serving different roles i'm curious how you feel about where we as creators fit in the space like should we be hopping into docks for like the projects that we use on stream should we be making like what should those relationships look like between us and the like or the creators of the documentation and the materials that we use this is a hard one for me because and i've gotten this a lot just because i've been involved with react over you know since whatever 2014 and i've always been of the opinion and this could be wrong that i can do more on my own trying to like evangelize react and teach react than i could if i were like collaborating with the react team not because collaboration is bad just because me without like it it would just add another like like i don't necessarily need prs for my content right like i don't need someone uh and this is all obviously has caveats where like this is kind of what we do at ui dev but like it's it's really hard to collaborate with very smart people because very smart people by definition have very uh strong opinions usually and so like and i and i and maybe i don't i don't know if you got into this with rachel but like maybe that's why the react docs took years because um they wanted it to be perfect and you have a bunch of really smart people kind of debating really hard things and you do get a really good product from that but like from my perspective it's it's always been like hey i'm just gonna go and create content by myself and not really worry about what other people think if i'm doing it in the best way that i think is possible and that's probably controversial but it's worked out so far um because like i mean that's that's kind of the vibe of the internet right it's like it's permissionless you can kind of do what you want um if i was like you know writing docs for the react or writing stuff or the react docs like i'd i'd be a lot slower but i think like the way i always look at it is is like embrace the you know chaos of the internet and just like create the thing you want to exist and there's no one stopping you and that's that's a benefit right that's not a bug and i don't know that's how that's how i've always looked at it not saying again collaboration isn't bad but but like i don't i don't necessarily care what the react team thinks of my content um i don't care what the versailles team thinks of our next gs video like i'm gonna i'm gonna create it regardless if something is wrong that's a problem um but luckily so far i don't think we've like put out wrong information and i know from their perspective like it's hard for them because they have to essentially try to police everybody because if something does get put out and it's wrong as we've seen a billion times with like use effect for example how many wrong use effect tutorials have you seen right like a billion um and i so i i get their frustration with with someone with that perspective but but again it's like i'm just i i'm just going to publish my stuff and then and hope for the best and that's that's kind of what i've always done so i dig that attitude a lot i definitely have almost like now i think about it to a fault push to make sure my content was respected and appreciated by the the people whose like things it was using screw that screw the trash that's my vibe screw that because it's like because it does i mean doesn't matter right like because what happens is like you get put in this weird and and i and i and i'm so passionate about this because i kind of let it paralyze me for a few years right like if you look i'm publishing a lot of content up until 2020ish stop for a little bit and then january of 2022 i'm pushing out content and part of that was because like got into a few of these things where it was like oh maybe like this person is gonna think this of this video or and whatnot it's like i just don't think that's a it's a it's a really hard place to be as a creator when you're you have these like artificial bosses right like they're like there's i i can publish publish what i want i don't need permission to do anything right uh people at my company can publish what they want right and and and yes there's a part of being respectful and again making sure you're right in in like not putting out bad like wrong content because that's all they care about right the reacting doesn't want you to put out wrong content because then it just makes it it makes life harder for them because then they have to correct it but if they don't like the content you're putting out but it's right like that's on them to figure out because like you could that's that's that's the vibe that's the internet right so there's a bunch of slack things going off in my ear and i know it's my team saying like yeah preach you're right yeah i love that attitude so much i will say i'm unique in the sense that since i'm not doing this as my job and it's okay if i like piss people off i'm not afraid to call out vercell when i'm live and running into problems i do it all the time i tried showing off react 18 in the new like next canary i could not get it to run no matter what i did when i was live and they were like oh yeah you just happened to hit this when there was a version d sync i was like yeah i was showing off your tech live i npm installed the template you had on your github and it didn't work like i'm sorry the content wasn't the smiley theo i usually am when i talk about for sale but you ship something broken and when i tried to show it off it was broken it's a little different in live i will admit in the sense that like i can't make the decision after the fact i have to make the decision when i'm going and that means that i i can choose to disengage or i can say what just happened and why it was a problem and so far people have been pretty cool with that been really pissy about type safety lately i'm tired of everybody treating it like a third class thing that isn't necessary like yeah the back end code's right there why don't i have my types yeah yeah i love it love the hot takes yeah i think i don't know i i i think embrace the uh embrace the permissionlessness of of the medium right that's what that's what i've i've had to convince myself a few years of doing and since doing that it's been a lot better so uh my shirt is from uh shop.uidev not we don't we don't even we don't even promote that at all and we've had like almost no cells because we never talk about it but that's where it's from so realize we don't have a ping command good call howdy i'll add that later yeah i think with the stress of content creation is something that we don't talk about enough i i know i personally am really lucky in the sense that like this isn't my job this isn't even like the strongest funnel for my job i am testing a custom build of obs and it works really good for like an hour it turns out so uh oops hopefully that will crash again i turned off a bunch of the things that were broken and hopefully fingers crossed it won't break again i also have none of my monitoring for anything open anymore i have one chat window so somebody in shot let me know if stuff's broken at any point fingers crossed we're good now we're doing it live that we are sorry again anyways stresses of content creation i just lost half the viewers for the stream and they're probably not going to come back so if you all wondered what that feels like now you have a good idea of what it looks like at least thankfully i'm not full-time content creator because that could have killed my income for this week well uh we'll throw down some more hot takes we'll get them back yeah they'll appear hopefully the vod will do okay i'll get my notion back open at least anyways yeah i'd love to hear more from your perspective like first off were you ever a full-time developer proper like working on like developing code for a living and what was it like moving from that to content like how did your goals and expectations change yeah so uh back in i don't know when that was 2012 2013 was when i was like writing content or writing uh like obviously software full-time um then i uh switched because i took a job as well first i i was like teaching part-time at a place called dead mountain which is like a boot camp here in utah uh really enjoyed it and i was like wow i really enjoyed this like teaching you know software thing and so from there uh took a full-time roll with them long story short kind of spun that into doing some stuff with egghead and then from there it was like well this is cool i wonder if i could kind of just do this full-time um that's what i did and so i've been doing it pretty much full time since like 2015 2016. um worked before this for shortly at like a little app it was actually like one of the very first react native apps uh which was like a little community for people who had cancer that failed because they couldn't raise money um but yeah not doing this full time so i had no idea you were in early react native developer that's quite the job it was probably it was probably too early like if you think react native is rough now like like the edges of it um we were shipping production react native when it was like whatever 0.4 or something like it was i think the uh react native was announced and we were like shipping stuff like a few months later not a great idea but it was fun at the time so i think there's always been react data wasn't really usable to you to modules which i think was 0.68 so like right x expo x but it was like also pre-expo and they they came around and did a lot of stuff to make it like better and just like more user-friendly um but before that it was just like wild west to be honest um we made it work but it could probably go on with something else a bit better but it was fine i was on yamon's show two weeks ago doing the react native live talk about all the infinite red chaos back in the old ignite days which was super fun you getting a lot of uh video quality stuff so great job pink yeah thank you yeah it's also his camera to be fair he has a nice setup it's what's cool about ping is we no longer are limited on like anything other than the quality of your setup so if you have a nice camera then you come through crisp it's amazing what what i mean so i don't know if you want to get into this but i'm super interested in it like why why did no one do this before ping i don't think maybe that's a dumb question no it is not i it is but it isn't it this is something i needed for my content my shows and a lot of the creators i'm friends with and watch it was very clear that zoom was built for something it was built for a lot of things and content wasn't one of them it was way too hard for me to combine the tool i was already using which was obs with other video software they just didn't mesh they were built in different worlds and i didn't want to screen capture and hope for the best to bring a guest onto my show i wanted to copy paste you from my call into like the conversation we're having inside of my software and that that it was so obvious once i had it set up pretty quick like oh yeah the lighting difference is huge immediately is that better yeah way better yeah like i just didn't have them on so yeah that's hilariously different but yeah i it's a combination of the deep understanding of the problem video being hard and [Music] not having the biggest market and it still isn't like to be frank there are not a lot of people who need zoom and the ability to use it with obs and high quality but as more and more people are buying high-end cameras more and more people are trying to put together content i feel like the tools are focused on a lowest common denominator that isn't going to succeed i see a whole bunch of wixes and i don't see a lot of ourselves in the space we really want to be the first versailles that we're not trying to tell you here's how you build a website we're here to once you realize the site builders aren't what you need and you kind of need to roll your own thing you need to use tools like obs but they don't have the ability to bring a guest in they don't have the ability to remote manage the software they don't have good audio solutions we want to solve as many of those problems as possible to build into the platform rather than build a new platform imagine if wix came out with their own operating system before they deployed their first thing that's how these other companies feel and we really want to go the other way has what's been the biggest surprise uh so far since you've been in startup startup land it's been one of the bets we made has went way better than i ever imagined the bet was creators need if we build the right primitives rather than imagining use cases for the creators they will come up with [ __ ] we never would have imagined like it was so easy to bet on the one or two problems i had and trying to solve those well but there was a fundamental difference when we shared the parts we stripped away a few of the unnecessary buttons and really just gave you the core of an embed you can take a person and put them somewhere else and somebody recreated star trek with it somebody started composing anime live with it somebody used it to do like a tic-tac-toe game show with 12 people live on twitch we just let our tech or we just helped out a conference over the weekend where our tech was used for a virtual avatar to give a live concert in like full stereo audio quality live in a concert hall calling in remote on the screen and we never imagined any of this when we built ping we just wanted to make it easy to get guests into your content and now people are inventing new types of content with it it's like that guillermo tweet uh it was a few it was like 2017 where he talked about react to so you know i forget the word he used important that we'll spend the rest of the decade you know figuring out its limits um feels like a similar philosophy with ping right where it's like yeah if you build the right primitives you don't really know what that means but if they are the right primitives then all these things will be built on top of it so that's awesome and if they're wrong we can refine them and make new primitives and figure that out but it's right you don't figure out what the right primitives are by building the entire internet you figure out what the right primitives are by building other primitives that aren't right right totally i dig it yeah it's been really interesting like and i'm actually curious what your thoughts are on this i don't know how much i've shared this live or on like my show but we have a really different philosophy around the content creation pipe we think a lot about the blockers as you create content back in the days when i used to do a youtube video i'd look right in my camera i'll talk a whole bunch record onto the sd card put that in my computer transcode it throw it in my editor realize that the camera was out of focus unplug it plug it back in re-record the whole thing and here we are like it's just finally get it in my editor the way i want realize oh i should have been over slightly to the left for this shot i'll go reshoot that one and i end up in this infinite loop of dead stops in my creator flow because and this is my core belief because those things were stops there are so many points in the process where you have to stop and move a thing or do a thing or process a thing what if the pipe was as live as possible even if you're not going live to a viewer maybe you're going live to your hard drive or you're going live to your producer who is making micro changes and talking into your ear to make sure that you're doing the small things and plugging the thing you need to the live isn't a way to output video it's a way to think about your production pipe and the more live your pipe can be the better because it's always live somewhere like when i'm looking at my camera and talking it's live until it hits that sd card then it's dead we think that live video production pipelines are going to make creators more efficient and more capable of high quality without high churn if that makes sense yeah i love it um without kind of knowing is like we talked a little bit before we started the video about uh before we started the stream about just like the content creation process and i think what i did maybe subconsciously is like get rid of all of the things that were annoying about content creation uh specifically video right like there was a time where i did like the the head shot in the in the video but like the problem is that cr at the time created like so much friction that now are now it's like it's basically just me recording audio then throwing in like visuals on top of it and so it was like it's funny that like this the pain point you're solving was so true to me that i adjusted how i did content to avoid all the pain points that you mentioned uh luckily it worked out but like that's i think it's totally true we've seen a lot of that like creators who i looked up to so my favorite audio files dms shout out him he's been like one of my favorite creators forever similar to you he went to a space that didn't really have a high bar for quality video and production and leveled it up super hard just out of sheer like willpower and the content of his video or the quality of his videos was incredible i reached out to him just because i we're in a similar space i love my audio [ __ ] of course and i just wanted to like see what he would think of our product i know he didn't do much like collaborative content he's one of our biggest fans like genuinely fell in love with what we're doing because of our mindset and the way we think about solving these problems he wasn't doing collaborative content because the tools didn't reach his aspirations there so he was avoiding the content type because it wasn't hitting his quality bar and it was really cool learning that and seeing how he's been able to change his content since because the tools now meet his needs i totally believe that i think i also think the best content creators are the ones who who like try to almost like not abstract the tools away but like they they're focused on like the output of the thing rather than like the tools to get there and it's so it's funny to hear you talk about that and specifically that story because like he like i kind of creators don't in my opinion don't necessarily want to worry they shouldn't have to worry about the tools they should because like it because creating the content itself is so draining and it's so like hard and like i have a very like wars art or artist war kind of vibe and uh so that's kind of how i approach it is like if i have to think about the tools i'm using to create the thing i've already kind of lost because the thing itself is going to drain me so much that if i also have to think about the tools to do the thing then i'm just like it's a losing battle um so yeah any any you know thesis about making that easier for creators is i think is a good one so yeah absolutely there's there's another side to this and i'm curious about is like i i'm really curious what no code and content is going to look like when done right like for a long time we've seen all these node code solutions that were kind of trash and then i think i think the two things that changed that were figma and webflow where they blended the difference between the code and the design experience to a point where i as a developer could clean up the rough edges to an extent and i think we're going to start seeing the same thing in content where we see tools that aren't necessarily let the person who's ever made a video before make their first video so much as i have a fancy setup i could maybe run and this actually happened two weeks ago when yamon was having problems with his computer trying to stream i used my setup to run his stream i just took his streams key had him call in through ping and let him run his show on my computer effectively interesting yeah i think what's going to be have you seen i don't want to i don't want to call it out because i don't love it and i don't like you know pooping on people who are creating stuff because it's already hard enough there's a new um it's like a tool for devrel's about like creating developer content like video and focus on video um it seems very much like a almost like a wysiwyg for not even a wizard almost like wix because we've been using that example for devrel like content creators to make like video essentially um i think the hard part from like because like because i looked at it because hoping we could use it but the hard part is like it's it almost feels like a you know bootstrap what bootstrap did for css uh it feels like it's kind of doing that for like developer education videos and that's fine if you're devrel and like you don't really care about uh you know like how the video makes you feel as much as like the the content you're talking about um but to me the what's gonna be interesting is when we start getting video tools that like allow you to embrace your like for lack of a better word like your vibe right like if you if you go watch our recent youtube videos like all of them have us have a vibe to them and and i don't i don't exactly know what it looks like but like you have to be able to allow creators to capture that um and make it make it easier to do like that thing rather than just like this like template that they just like throw videos into if that makes sense absolutely to i love the bootstrap example and i think that i'm going to dig into that because i think this is why i like tailwind so much is i heard one person on hn say like wow i can immediately tell when a site's tailwind and i checked and it's the site barely looked tailwind except for it had a blog post on it that was using tailwind typography yeah you can recognize that one opinionated part but not the rest yeah chris coyer i think sent out that that exact tweet and i and i it was the one thing i usually love chris and i agree with him all the time um i disagree with him there because like yeah it gives you it gives you a nice abstraction over css without like the with almost like the freedom of like creativity um yeah yeah i like that example absolutely it like it's it feels like css and zen mode for me rather than like css that's opinionated without the css which is what bootstrap was i'm not writing css anymore i'm writing bootstrap with tailwind i'm still thinking in css i know the exact css everything i write compiles to i can write it faster and that's the type of thing we want to do how can we make you faster better more effective as a creator that knows what they want rather than guiding you to where you want to be or where you think you want to be that we're actually telling you it's the whole like guardrails versus safety nets thing that i love to talk about like everyone's building guard rails that's like the 80 that's the 100 unit test code coverage code base that's a bunch of guard rails and it takes so long to build and deploy that if something does go wrong you have to wait two hours to fix it you have no safety net anymore you just have the guard rails i don't care about guardrails people can fall over all they want as long as there's a good place to land right and i think by having that philosophy you're going to enable almost by definition much more power powerful things to be built on top and that's kind of that's kind of how i think about it too is like every every one of these like oh make your process easier for like making youtube videos that i look at it's always like well i can't really use this thing because like not because uh it's not fine but it's just like does a little bit too much and um does doesn't kind of give me enough i don't know ability to express myself as a lame way to put it but that's kind of true yeah free motion's an interesting one uh anton started targeting no worries though i love reading i just thought you mentioned that yeah that's what um i don't use it alex anderson on our team has been experimenting with it um the idea if you're not familiar is that basically it allows you to like make videos with react which is a really interesting idea because again it goes back to like okay if react is such a good idea like we should be exploring like you know where are the edges of this like component based uh almost like creation tool um so i haven't used remotion much and the reason for that ironically is like i kind of found what works for me and it may not be the best process but again like i don't like to think about my tools i like to think about the output of the thing i'm creating and so eventually whenever i like take a break from the youtube grind i will definitely dive into promotion and check it out but because like my initial like because i've built a few videos without remotion um and they worked fine it's like i'm just gonna like uh focus on exactly exactly and so far so far so good so i have to ask uh are you a final cut guy a da vinci guy or one of those guys no no no that's the thing it's like you'll laugh when you hear my process like uh screenflow right the simplest basic like you know video editor thing that there is um i used it because that's what egg had recommended it recommended back in the day and it's been fine uh and like it works for me um and then from there it's like i kind of just use a bunch of stuff like frame or motion is great for some animation stuff um [Music] like built-in uh screenflow animations like the tool doesn't like the tool isn't the interesting thing for me and and i've repeated myself and i'm like i get that i keep repeating myself but like it's it's very much true and i know that's hard for you too because like that's your entire world is like building the tool but from like my viewpoint like i don't want to think about the tool um it's already hard enough again to like create the thing but like i just want to use a tool that like allows me to do it and like go on with my life um that's a reality for me so this is just reminding me of when i learned that cross by justice was produced in garageband yes exactly but yeah exactly like it does like yes there's a point where you hit limits with this but like screenflow's been fine and like i have premiere on my computer and like i'll i'll eventually use it one day but like nah i jacob said my philosophy or jacob mentioned that my philosophy on tools is pretty much the same it it's similar it i'd say same end different start and middle where i pick my tools based on replaceability to an extent like i need to know that buying into this thing isn't going to ruin my life and kill me in the future like i've had to port enough ember js code bases to be very strict about what i adopt at this point in my life and i feel like the creator tool bar is kind of the floor right now and it's really sad like the video editors are okay everything else in the video space especially live video is broken proprietary and trash and it's really sad and frustrating because i come from audio like in the audio world you ask an audio engineer about their favorite tools look if you loved like a passionate rant about how great pro tools is or ableton or fl or whatever their software of choice is do the same in video especially for live and they're just going to complain because everything's broken there's no love in the space and i want to fix that and it's this is a great conversation for me because your stance doesn't seem rooted in your you feel this way because the tools are bad so much as you feel this way because the job is hard and you don't want to think about the tools you want to think about the work it's our belief that if the tools are good enough people will love them the same way they love react but there will still be a tier of creator the same way there is a tier of engineer that is one of the most productive people in the world that still happens to use jquery and there will always be those people and you're the you're the 2022 jquery user right now and that feels weird right you're totally right but if he's making you know stacks of cash with his app like you know not only that but the lunatic react developers like myself that spend all their time building these tools look up to you and the quality of content you're producing with screenflow and that's the crazy thing here is as much as i care about making better tools you're out here proving it doesn't [ __ ] matter so thanks a lot right i think it i think uh a few a few caveats here screenflow is like the last thing in like the tool chain right so like i i essentially hand code all of our our our animation most of our animationy stuff with like framer motion so that does a lot of heavy lifting um and then from there like screen recorder then just paste into screenflow um so yeah screenflow definitely like but but again that's that's if that's my workflow screenflow is i just need something i just need essentially a timeline right and like i could probably use like quicktime to do this right that doesn't need to be super sophisticated eventually like i'll probably hit a limit where i need something a little bit better especially as like we get the point where it's like okay i need to now collaborate with people who are also trying to like like on a team right like i can i can't expect to hire someone to do you know animations or to do like producing for us who's going to use screenflow right like that's the reality um and so that's when i'll start hitting my limits but until then like yeah i'm just going to send it with with screenflow and hope for the best yeah this is interesting in the sense that like you are in a lot of ways doing what we want where screenflow wasn't built for people to make full content the way you are with it certainly not where you're like making animations in code and recording those into that's a different level in a lot of ways and i remember to put this it's exciting in the sense that nobody expected react to be used to build game engines and that's what we're seeing with ping 2 like as potentially disappointing as it is that a creator that a lot of us here look up to is using the simplest possible tools is also inspiring in the sense that it i if that tool can get you that far what can people do with what we built turns out star trek live right right and i think i think the reality of it was like we going back to what i mentioned earlier like i was i was kind of sick of watching uh uh developers on youtube get like super popular and then me being like oh like i feel like i could do this right or like almost like judging their content um because then i was just in like a super hypocritical spot where it's like well i'm not doing this so like maybe i can't do this right and that's why like really the big focus this year was like okay can we make content people enjoy on youtube it's clear we could do course content but youtube is very much a different animal and and so part of it was like okay i have all these like the skill set for creating course content screenflow works fine for that because i'm mostly just like screen recording my screen as i like you know have code and like an app like very basic stuff um so it was rooted more of like okay how do i take this same skill set to create stuff for youtube which is a little bit different um and so then like i was so focused on again that question of like how do i make course content how do i take this like course content brain i have and make really good youtube content at no point did i think about like okay should i change the tool that i'm using to do that i probably should have but you know here we are it worked out so this is more like how node happened i'm already using javascript what if i use the data might as well like if i i'm worried about like i need to run this on the server right like oh i already know javascript so might as well make figured out right like yeah totally it worked yeah and there's a point where it won't but that's not what we're thinking about we're busy and i i have a lot of respect for that yeah this is this has been very really helpful for me i'm not sure how i hope chat's enjoying this too but i've learned a ton from this already this has been really interesting one thing we haven't talked about too much is community and how like dev communities content communities and things between these like overlap i'm really curious what your thoughts are on like our role as content creators in building communities and what the overlap is between that and like a developer community yeah this is a hard one for me because like i suck at communities um to be completely honest and i don't know so it's like i feel weird like giving community advice because i'm like terrible at it right again like maybe this is the theme here where i do hang out lunch dev uh also hey aj thanks for the love i i appreciate you too um to me and there's there's so much going on here theo so let me try to like uh express this in a way that makes sense in my life [Laughter] here's what i care about obviously my family i have a four-year-old a two-year-old and a three-week-old so like that's i'm very busy there um i care about my employees as well as their family and obviously like my business stuff and then i care about making the best developer education content that i can and so anything that isn't one of those three things my health is in there as well um it's like working out and whatnot anything that isn't one of those four things is really hard to focus on because those four things are so uh uh much there's a better word than much for that but like it's a lot right and so when it comes to communities it's like this is when i struggle because to have a vibrant community as you know like it takes a lot of work and it takes a lot of like forethought and engagement and like all of those things and i don't have the capacity to do all of those things as well as the other four things that i'm doing and so that's when i struggle because it's like well and as we're seeing with youtube like there's this little like ui dev youtube community growing kind of and like i s i've spoken with dom i don't know do you know dom uh at netlify oh yeah that was great you yeah dom is amazing i don't know if he's been on the show but if he hasn't he's i should bring him on the show we've had a few chats about ping and obviously we talked with jason a bunch too i definitely need to get him on the show yeah demetrius he would be he would be a blast because he's so fun every time every time i speak to him i feel like i'm just like you know on speed or something because he's he's always hyped um i speak with him and he's like hey you have this like huge like top of funnel thing and like you need to like capture those people and like have a community and like blah blah blah and i'm just like dom that sounds so exhausting like so i don't have an answer that's my longer way of saying i have no idea what the hell i'm doing when it comes to community but one day maybe i'll figure that out um until then like we'll see if something happens organically i don't know that's the truth really interesting so yeah what would you what would you do there is the ui dev community and we're probably going to shut it down because it's just like i can't put the time and love into it that i want to and so our community is more going to be focused on like courses um which is something we do spend a lot of time thinking about and like nurturing rather than just this like generic developer community theo if you're in my position is is that stupid yeah if i was in your position yes but you're in your position and i think you're different than me in this way i think that right a lot of me is my personality and the like like i get to not put in as much effort because people are to an extent here for me and my way of describing things like there's a lot of people in chat that don't care about this topic but like to hear us talk about things and are as much here for me as anything there's actually something i noticed that's really different between twitch and youtube even like when i'm live at the same time on both on twitch it feels like the average person is here for me and on youtube it feels like they're here for the specific thing we're talking about it's a difference on so many layers it's how the recommendation system works it's how the community around those things are but for me a lot of the content is me and being there helps a lot with the engagement that makes sense maybe because like i've never really gotten into like i'm obviously very aware of twitch and i could name like your popular streamer um but even then like i was never like i'm not involved in these like twitch communities these like for most mostly i'm mostly off of discord like so maybe it's like a cultural thing for me um where you're obviously the opposite right um i live on these places i hired half the team off like random discord servers right which which i love and completely respect i think we just live very different lives to be honest like i and i don't even go to like dev conferences anymore despite kovid like uh because i would kind of just hang out with my like family or like create stuff right i don't know maybe that's gonna come back to bite me um and obviously there is this like organic community that's kind of forming and i'm not doing anything with it um [Music] but yeah i don't know that so that's that's a it's a it's a good question but it's a really hard one for me to answer yeah i i want to stay in touch on this one and keep an eye on it i don't have an immediate recommendation it's like people are there for the content itself with you so hard that you've like taken yourself out of the content to an extent and it hasn't really affect things or affected things much and that's huge in so many ways that like i've immediately noticed videos that don't have me and the thumbnail just don't do as well period like instantly and that's the case on a lot of channels like i have heard linus tech for example talk about this a whole bunch like even the videos he wasn't in they put him in the thumbnail because it helped with the like video engagement and getting people to click the thumbnails and interesting a lot of content and community is that like personal level with the engagement and my concern would be there is a cap in the number of people who want to watch content about react and javascript and the next step wouldn't be get more people into it you basically be relying on the reach of react and the things you talk about for the reach of your content and i know we were talking about this earlier this idea that you kind of have to expand the things you talk about to places that you're less familiar the alternative would be make the content more centered around you so people who in the audience aren't familiar with the things you're talking about will still come and listen like a decent chunk of my audience is back-end engineers that i stole from primogen we don't talk about back-end stuff much at all but they're here because of how i talk about it and they're getting more interested in that as a result you get people interested in things that they don't care about via the person not the thing and i'm curious what it's going to look like if you hit a wall there or not right are you so i used to have everything under tylermangus.com are you following me in those days i always know what's funny is because because like um yeah i pivoted away from tylermanus.com to ui dev because like i didn't love uh me being the center point because i felt like it it we would naturally hit a wall at some point right like it doesn't feel like a real business if it's tylermans.com it feels like a real business if it's ui.dev and so and and part of even like having my face not be in the video it's all fairly deliberate as a way to like if we can figure out a way like if we can figure out our voice then it'll be easier to reproduce that with other content creators if it's if it's it'll be literally my voice but like i don't necessarily need to write the script right um a verdict that is still out if that was a good idea or not you've seen the opposites of that in like a kensey dodds right who's like this brilliant uh he's essentially a brand now um if you go to any conference everybody just wants to take pictures with him which is great he's an awesome awesome guy um i think closer to you would be more like a benawad went the other way yes yes ben did go the other way uh i also love ben um but yeah it's like i'm not i'm not necessarily super interested in being the face of the thing despite maybe what would probably be like normally assumed um [Music] i don't know so maybe that's it i don't know i feel like this is a therapy session theo this is great this happens so often i i love these especially when it's about like the meta things around content around like software i i actually find that these combos get some of the best response for people like especially those who are here live they care a lot about like how this is made even more so than the content itself otherwise they just watch the chopped video on youtube later and i know everyone here is appreciating this a ton i will say on this almost all of the top 100 youtube channels are a person's name or have a person's name in them a lot of the biggest brands in various spaces like i i look at linus tech tips a lot it's just i think such a good example of how you scale a person into a company as a content creator where linustech was linus in every video he brought in his friends to help like manage the team manage the content pipe like do brand deals edit things eventually brought on a guest that or like one of those people luke who became a hit as well they would do a lot of content together slowly let him start doing videos with just him in the making sure he was advising and building that out eventually let him start a separate company with float plane underneath linus tech now they have like seven i think channels and over 30 people and they're starting up like a startup lab within linus tech tips to build new like micro companies for both content and tech within the linus brand it's still all ltt it's abbreviated now to ltt but it is like linus's face and most of their money comes from merch sales with like underwear with his face on them and [ __ ] but that helped so much where the reach of a person will always be bigger than the reach of anything you can talk about like every topic has a limit to how far it can go and my fear with your channel would be since the content quality level is so absurdly high you're going to get all of the people who are interested in that and none of the people who aren't and as a result you will hit a cap where people who aren't like people who aren't into programming should be watching your videos and i don't think you get there without being in your videos right that's fair we actually have a lot of comments that's like hey i'm a game developer i don't even know what react is but i really enjoyed this video you know so uh yeah i think you're i think you're right yeah regardless it's an interesting thing the the counterpoint and the example i always use is like to me my as of today my favorite youtube creator in the in the tech space is fireship um i don't know if you're familiar with jeff uh we have like i don't want to say beef he's a good dude but like the all the stuff about morocco and the like faker js stuff that was really messy right right right yes i completely agree besides that um and i obviously that's a big besides um he to me has has done uh very well with this like i'm kind of a faceless thing right um and so we'll we'll see what happens and like it is hard you're completely right and like for example like this react video i i we just put out yesterday two days ago took me an entire month to make and so it's like from a business perspective that's not really sustainable either right so there's a there's a there's a lot to figure out um david east in the chat uh is trolling us and that's fine hello david i love you um anyway yeah i i feel like there's a spectrum here where one side is benawad and the other is fireship and you're almost like a little past fire ship in terms of like the faceless nature of the channel but you have enough personality and like you even said yourself like one of your like close friends and co-workers said that listening to me sounds like listening to you people aren't here for the things we're talking about they're here for me i think that you could be a multiplier on the quality of your content and on the reach as a result that's fair that's a fair that's a fair analysis and you're probably right let's chat in six months and we'll see where we're at how about that that works for me um yeah cause really like for the business like as you've noticed 2022 was like okay what would happen if we focused on youtube um and so far it's going fairly well um [Music] but will we ever hit that like hey you should be more of a personality rather than like a faceless voice um probably but but but i would like this to see that where the limits of that are if that makes sense yeah absolutely and i'm curious too and i absolutely could be wrong about all of this i see a trend at a level that's way outside of our space and every space can be very different like a lot of developers are used to reading docs that have no personality at all and this is i i don't know it's there needs to be the equivalent of like a deep focused technical doc and like the history aspect to an extent like you're making documentaries as much as you're making like personality driven content your stuff's going to last a lot longer than mine does period what i'm curious about is does the reach get limited by that as a result and from my suspicions from what i've seen immediate reach in like short medium term reach and growth as a result is limited by not being a person in the content and having like a person within your brand something we're even thinking a lot about at ping where we can make a ping youtube channel that is all about how to stream and set up all this stuff but we are so scared of it looking like a fellow kids thing like just another brand making a weird youtube channel and why wouldn't i just put it on my channel i'm making half the content anyways like it's me it should be there do you subscribe not calling out do you subscribe to bites just because i see it in the uh yes i do okay that's also funny because like that has so much personality right um [Music] and yeah maybe i struggle maybe this is like a thing we struggle with like we're trying to bring the bites personality to essentially the rest of the company um [Music] aggressive yes and that's kind of hard based on like based on the fact that developer stuff by definition is like dense and boring right um [Music] it would be a lot easier to have that personality if this was like uh if i was a face rather than just like a voiceless thing yeah i don't think we could have done the like prime engine unit test debate without our faces that wouldn't have been any fun at all right you're totally right um and maybe it's just we can we we can change topics but i think i think we both may be right um it'll be interesting to revisit in six months to a year to see um to see where things are at yeah absolutely and uh aj's making a really good point too around like podcasts like those are a huge and growing thing i'm very fixated on video and youtube and almost everything i say and suggest and think about is going to be based on the numbers on youtube and twitch and that colors my perspective on this stuff a lot i almost like object objectively should be taking the audio from these and putting them on a podcast platform but i don't know a thing about podcasting i don't really care like this is where i live i'm on youtube yeah i can respect that and i think that's been a big focus for us is like it's it's easy i mean we can we can dive into this like there was there was a very large shift in how i thought about content because before it was like i used before like before january 1 of 2022 it was i think i'm a very good educator and youtube is this like gross medium and to be successful on youtube you almost have to like degrade the education value of the content to be something more aligned with like fire ship right if you were to take my videos before january 1 2022 and compared to fire ship they're completely dead they couldn't be more opposite right like his is a four minute video mine's a 46 minute lecture unlike you know the history of async javascript like very different uh if you look at the page views he's he's up what a lot 100x right um and so it was the shift from like hey maybe i should stop being so like pretentious about you know this uh philosophy i have around education and really like try to conform to the medium and that's really what we did and it's worked out super well to your point like it may make sense to like throw this on a podcast or it makes sense to say screw that and like just focus on on the twitch and youtube like live medium right and like gear everything towards that and i and i do think that because we we talk a lot about that too being like this like hybrid you know developer media company like oh we should take our like bytes content and make like twitter threads and blah blah and i think all that is good but what's better is just like creating native content for the thing that you're on this is probably a super boring topic for like you know 98 of people in the chat and watching this so i i apologize i guarantee it is not because they're all consuming this content they all care like this is for them like how the things that they listen to and watch and do enough to be here in the small audience watching this live they absolutely care some of that like that's why we're all here it's just cool i dig it there's a bunch of creators in chat too yeah yeah it's fun to see it it's a super cool little audience we got trying to go through the list to see if there's any other like particular things we should jump on i am really curious what you're like flo looks like from like idea for video to created we've heard a lot of like the process and post process to actually edit it but beforehand like where do your ideas come from how do you flush them out do you talk with people about them ahead of time like what's that process like it's kind of revolving right now i'll tell you the old process and i'll tell you what we're trying to do currently the old process is just being on twitter and being involved in the ecosystem you kind of see like trends and whatnot um so the old process was hey i have this idea for a video um like why react hooks was the very first video that like i kind of told the backstory on and it got popular ironically it was two years ago and it was like actually more than that it was 2000 i don't know it was like four years ago now when i did it um and i didn't really grasp like hey people like this content so i should do more of it until like four months ago um but the process is basically come up with an idea just of like and it's mostly an idea i wish existed in the world from there it's to consume every single thing i can find about that right a good example i use is like i googled the thing and then just read a few pages of of what comes up on google from there you have a general idea of like what the thing is for our specific videos that kind of researchy process involves a lot of like historical uh you know almost like archaeology right where i'm trying to find these like super archaic clips that fit a certain narrative that i have right so for like the one in the next.js video and in the async javascript video there's a clip of i'm blanking out his name old google schmidt eric schmidt um google ceo where he talks about jquery and like uh the difference between pre and post jquery era right so it's like it's finding these clips that align with the narrative it's then like sitting down for a few weeks and writing a script and weaving in these um uh like these clips that you find and then from there it is uh basically like re recording that putting that on screenflow and then essentially just filling in like all of the clips with like visuals so it's kind of boring again it's like it's very it's very pragmatic right like that's uh when i for those in the chat i have been adam who's uh works with me was he sent one of theo's i forget which hot take it was that you had we're big fans of theo in the chat are in our slack and i need to pull this up because it was it was very beautifully worded but this is kind of like the the takeaway if you've had like how i think about content um ben said uh about theo and about like his relationship to me and how we're very similar it feels like he's talking to uh me when he listens to theo it's because his hot takes are rooted in pragmatism and not idealism uh that's how i think about content too it's like it's whatever i could do to create the best content and create the best output rather than focus so much hi ben you're in the chat good to see you um rather than focus so much on like the tools and the process and all of that like like to me the pro like that's not the interesting thing and i realize again theo like he does like he's working at like a tools company but to me like the the process and the tools and like that's just the thing big companies talk about because they need to standardize it like we're a team of four people and like we need to focus on the output of the of the content rather than like the process and how we get there and sure we can refine that along the way but i think the minute we start focusing on the process and focusing on like all those little things is when you get ui.dev from 2000 from 2020 to 2021 where we don't really ship anything it's mostly just talking about the process right it's such a trap that was a rant sorry no this is the rants that we're all here for i love that so much the the process over problems thing is so real where like as engineers we love to think about the the very deep technical details and solving a problem forever and that's not how content works you can't rebuild your content pipe every video that's just not realistic it's like rebuilding half your stack every bug which we do sometimes see my favorite thing is when somebody says hey we've been working on this like app for five years we have this one particular simple problem we're trying to solve does anyone run into it the response is oh have you tried remix exactly yeah exactly you gotta be realistic about what to adopt and when and like if you're starting a new website from scratch maybe these new solutions make sense but you have to understand where you're at your works at and what your goal is and as a creator your goal isn't to show off your creator workflow it's to make good content and i find especially in live this is super common where i know so many people who want to stream who've spent more money on their setup than me who have spent way more time preparing it that even like know obs better than i do that have gone live like twice because it's intimidating to do the thing and actually solve the problem so they'll solve around the problem for as long as they can and it's really easy for developers to follow in that trap because there's so much you could be doing there's so many little things you could be tweaking or playing with and not actually solving the problem or as aj just said optimizing for shipping like people like to feel productive and you could feel productive doing a lot of things a lot of things that aren't solving the problem the quote i say a lot is like when we get too far into this realm is like planning is the best way to like procrastinate right because like it feels good and it feels like you're doing something at the end of the day you haven't done anything right and and yeah i i that's that's very much like our vibe is uh ship and like find out like f around and find out like let's ship and find out so yeah absolutely i couldn't agree more i like especially if you make decisions in a way where the pieces can be replaced like i set up our databases probably not the best way since ping started in august back when we were still around by t3 we have moved from worker kv to heroku for all of a few hours to uh rds where we stayed for a couple months over to planet scale and heroku rds those were both uh postgres but my sequel or but a planet skill was a my sequel move and we were able to make all of those switches almost entirely seamless we actually had our biggest customer live when i moved from rds to planet scale and i didn't know that and it was a fully seamless transition they didn't even notice so like you can make these big scary changes if the the bridges between them and the assembly of your systems is built in a way where any one parts input and output are simple or clear enough to replace the thing in between so our back end gives us sql prisma converts the sql to typescript we call those as functions right now in trpc which lets us call that function in our client using react query with the trpc wrapper these are all very s like clear inputs and outputs on every side so replacing any one piece isn't that scary we've replaced our entire like build process we moved from veet over to next er to next 12 when they added the uh faster build or build pipes because i wanted to use their back-end stuff as well we moved over our style system from styled components to tailwind we've moved so many of these parts over because the decision we made was wrong could we have spent additional month planning and making the perfect decision the first time maybe but we might have still made the wrong decision and just wasted way more time getting there right right i agree there was there was um a question in the chat i wanted to get to oh no it's it's uh it may be out of my view now uh it was about your opinions on oh there it is um the number one tip for a fresh coding bootcamp grad to break into the industry build [ __ ] so i want it yeah it's i think there's there's two things to it that's part of it uh the other half of it and i always say this is corny is like understanding that this is hard for everybody i think what happens is like you ask a lot of senior developers these questions and you have to understand when we got our first job it was fairly easy to get a job because there weren't developers and if you knew how to code like you were it was it wasn't terribly difficult right regardless of if you had a cs degree or not nowadays there's about a billion front-end like junior developers they're all trying to get the same 10 jobs and it's incredibly difficult so i would say like one understand that it's that way for everybody two is like understanding that it's okay to take a long time to get your first job um like when you go through a bootcamp you have three months of like oh look how much i learned and then from there there's one of two paths there's like i learned nothing else for six months and now i'm nine months removed from having a job and i'm kind of screwed because like i need to get income or there's i continue to learn as i like i'm doing job search stuff and now i've been learning for nine months and now i have much more skills a better portfolio all of those things right so i think the biggest advice is one it's gonna be very hard uh two don't stop learning like continue to build stuff continue to grow um and eventually like you'll get eventually you'll catch a break i don't know if that'll be like i've seen it happen in a few months for people i've seen it happen in a few years but eventually that break always comes if you continue to put the time to like get better um it's just like i've never seen someone go through a boot camp stop learning after three months uh i've never seen that person i've never seen it work out for that person though there's a lot of them that's a very good way of putting it and i definitely am not considered enough of that when i give my advice of build and they will come to an extent i definitely fall on that too much largely because like i am the employer that will see it and find it like the people who hang out in this chat and like there's a couple people in the community who just like link me the stuff they're working on and like have a specific bug they're really struggling with and like can't find the right way to google and they'll hit me up with a super thoughtful like hey i'm using these things you recommended to build this thing it's working really well except i have this one problem are you down to help a bit and like three days later they send me a link to an article they wrote about how all the tech works because they were so frustrated didn't exist they went and made that exist if i was hiring right now i would hire him right now but like there's a lot of those people in the community and i probably talk too much to them because our communities more than average only useful if you have a lot of drive and care too much like the topic matter we talk on the the pragmatism we talk with isn't very entertaining for someone who's just trying to get their first job like this is a channel and a stream for people who care a little too much and as such i definitely like cater my stance towards them yes yeah i think realizing that's why that cringe whenever anyone like you see like uh you see these threads on twitter it's like oh like you know work hard it's like these people are working hard i can promise you that and so just just throwing in the like it's hard for everybody the biggest thing is like can you continue to like hit your head against the wall for however long it takes like that's usually when when you'll eventually get success but then that's the best advice i can give shout out danny thompson i'll share his link in chat quit er quick he uh him and i couldn't really agree much less on a lot of these things but he is so much better than i am for getting through that first like hard part of nailing that first job because he's all about like little things like looking into the specific weird old tech that are hiring in your area so you can go get like a java 6 role just to get into like your first gig he has the best pro tips for getting that first gig i'm for everything from that point forward or if you're down to just not have a job for a year and really love the first job you get that's like where we differ i think he's the right thing to do if you're here for a career i'm a fun alternative if you're cool with wasting a bunch of money in time right and i think aj in the chat is a great example too he said um was self-taught for a few years went to a boot camp um eventually got a job but he did a lot of like writing about redwood.js that's an interesting one because i think i think a lot of uh and i can speak on this topic for for hours too is like the developer content space is really interesting right now and when i say interesting i mean 99 of it's garbage uh and there's like one percent of it that's good and the reason for that and that was a hot take hope i don't get trouble for that but like the reason for that is because like you have all these boot camps saying hey like create content as a way to like stand out well when everybody does that like you just have this like all of this terrible content right i think that's why like our youtube channel has been so successful lately because like it's so different than everything else that's out there because most of it just isn't good and it's not by people who like one are actual developers and two like appreciate the output as much as we do um but to aj's point i realize i'm contradicting myself here uh that's really interesting because he wasn't writing about like you know how to how to invoke a function right he's writing about redwood which is like a fairly advanced thing um and so like that's honestly that's that may be an interesting idea is like don't write about react because there's a billion beginners writing about about react maybe not even write about spell like find something like write about like solid js or like something to where like where a hiring person would say oh like a beginner wouldn't necessarily be writing about you know solid js right they'd be they'd be writing about like the difference between map and filter in javascript right write an article about how these things interrupt i think that's one of the like easy ones to fall into 100 yeah there's and so it's like i think creating marco quick are great examples yes like um if i saw someone write writing about quick i'd be like oh this person knows what they're doing because or if they didn't why in the world would they be writing about cloud for cloudflare workers quick like marco js like all of these things right um so yeah i think that's that's a really interesting strategy as well so yeah absolutely i think that the the cost with those directions is those things are going to have way less reach like if you write an article about 10 or about quick like there's less than 10 posts and those together have less than 100 views like as cool as it is that's not going to get a lot of reach what you can get reach with is like the combination of new and old things or like like how to use prismo with remix is an article that anybody here in chat could easily have written in 10 minutes and had a lot of viral credit that would have been huge and i think those are a better opportunity don't write about one thing write about the space between two i think you're right i think i also disagree with you um two points one that doesn't like reach isn't really what they're optimizing for here right like they're not trying to build like seo to their blog they're trying to get a job so i think if that's if that's purely the case that doesn't matter two and it takes a little bit of luck like i was back in 2014 like creating some of the earliest react content and that worked out very well for me even though back then uh the audience for it wasn't really huge so obviously like yeah if i choose a generational technology i write about early like i get lucky there um but but those like writing early worked out fairly fine for me um but to your point interrupting technologies that's not a bad way to go either so yeah that's actually a good point i wasn't giving enough credit just because like the more junior people who have shown me the success of like writing an article for them it's been like prisma heard about them because this article did well and they got on their desk but the other side of this blog existing means when you send a cold resume in and they look through it you look more impressive that site is as if not more important so very good point there as well right right right one thing you touched on that i think is really important in a lot of places is especially in the creator world and also in the founder world is this idea of like how bad you have to feel for a while it's funny enough a a like a youtuber for youtubers type uh harris heller he does a lot of content about like streaming and making youtube videos he did a video called what does it do you have what it takes to be a youtuber and the general concept was success on youtube isn't about how productive you can be at your peak and when you're at your best it's when you're at your worst when you hit that floor where you're like skirting burnout how far can you go when you're there because most of your life is going to be there you're going to be spending a lot of time feeling as bad as you can feel is that going to stop you from being productive and getting [ __ ] done if no you're going to kill it if yes do something else 100 agree and i love that energy it's very like seth godin vibes seth godin has a few quotes on this um where he talks about like your your work is too important for how you feel currently and so to wait till you're like inspired until you feel good um it's not necessarily like one that's a terrible strategy there's a tweet i saw the other day i forget it was someone everybody would know here um about what was it it was something along the lines of like inspiration isn't the thing you start with it's like the byproduct of work that's also a really good good one and then one i always remember too related is like i think it was a seth going quote as well where he talks about plumbers and like plumbers don't get like plumber's block right like they're professionals they show up they do the job regardless of how they're feeling and that's really what we try to do with our content too is like i may not feel like creating content on a monday but but it's my job and i'm a professional so i'm gonna do it anyway right and so same same energy and i really yeah i really really agree i'm curious like knowing that you've had a bit of a founder journey yourself if you feel the same way there because i feel it even harder there obviously i have the luck of my content isn't my livelihood so i can take two weeks off and it's fine i did funny enough to go run my company and do our fundraise and all that stuff so i've definitely felt more how this i felt this harder there and i'm curious if you think there's as much overlap between the creator experience and the founder experience here as i do yeah it's the exact same um where and that's what i think people working at these big companies like i always make fun of my fang friends because like they just really don't get it right they don't get the like as a founder like it's like the skin in the game like if you don't do the thing the thing doesn't get done and or if someone on the small team doesn't do the thing the thing doesn't get done and so yeah it's it's a and it's so weird that like because i'm a little bit different than you where it's like the content is kind of the business and so it makes it like double stressful where i can't really just go like i would love to go away for a few months and do like you know seo research or like what a b testing and like all like the buzzword-y stuff but like i just can't do that because like i monday's gonna come and i really probably need a youtube video to go out on monday right so it really is an interesting balance of i don't know if you can hear the kids screaming in the background i'm sorry uh not at all it's it's really an interesting balance of uh running the business running uh like being a content creator and like i always joke that like i kind of just created the role that i always wanted to exist and kind of like hired myself into that because it is a really cool role right where it's like i get to be a founder which i love um i could always be researching new technologies which i love i get to be creating and writing and doing all these things which i love i get to work with the team that i love like it is really good uh really fun place to be so yeah that's i am jealous in a lot of ways there where i didn't build the role i wanted so much as i built the things i needed and i really needed these things to exist so it was more like a matter of what's it going to take for me to will these things into existence like the reality is if somebody else had built what i wanted to at ping i would just go work for them maybe their cto maybe not maybe just be a small engineer at the company but no one was i know that cause i was at twitch for almost five years they were never going to build the things creators needed that was clear and i wanted to build the things creators needed because i loved those creators and i wanted to be one myself and i come from the art world more than i come from the tech world i need this [ __ ] to work and that means i had to be a ceo right i think the best companies get and the best content get produced under those circumstances right where it's like this one crazy person and i use crazy loosely here but like that needed this thing to exist and and that's why that's why i joke with like people who are like oh how do you like can you give me any tips for like how to do videos like you it's like we'll spend a month just eating [ __ ] and like that's kind of how it is you know cause like and then you then ideally you get something that's really good it just sucks for a month like every time i do a video it's terrible but it's like it's learning to embrace that and almost like uh to strangely enjoy that like creation process even though it is like for the most part like mostly miserable like i can promise you spending an entire month researching react 18 completely miserable uh wasn't a super fun topic there there are funner topics but like react 18 itself is like a kind of a low level thing and like and then and then like weaving a story around that to make it enjoyable to consume not the not the not the funnest thing in the world but uh yeah it it works out well we just got a cheer from coding cat thanking you for all that you do thank you for that but appreciate it he's great yeah he's great i yeah i totally agree this is like i got a lot from skateboarding here like i came from a professional sports background i was like really into skiing and skating and those were going to be like my thing and then i had an injury that kind of stopped that so i got really into minecraft and java and eventually javascript but yeah i you don't learn to skateboard sitting in class 8 hours a day hearing about how skateboards work and like reading all up on the inner workings on a skateboard from the 80s you learn how to skateboard by going in the street and hitting the ground over and over and over again until suddenly you ride away and you didn't even expect to and then you try to replicate it and you failed to another 200 times and you do it once more not expecting to and maybe you learn the trick now maybe you didn't and you're still gonna bail all the [ __ ] time like the best skater in the world will still bail a kickflip happens all the time and that's just the the art of the sport like we're not basketball we're not a person who could stand there and land a hundred like three-point shots in a row like we're throwing around this fragile piece of wood with wheels that fragile piece of wood with wheels is still a lot more consistent than the youtube algorithm right right i agree yeah i i dig the energy it's always like some people hate on it because it's a very like it can get confused with like hustle culture and all that all that garbage but like it's it's what worked for me so i go with it so i think it's learning to love failure and learning from it without like letting it affect your emotions too hard it's so important to fail in a way that excites you in a way like right i miss my job being being wrong all the time now being wrong is rare big and has a lot of consequences rather than being wrong being a thing i did 10 times in an hour trying to debug something like i'm really trying to find like the right ways to be wrong as a ceo or i could still feel like i'm growing from it and i think that's what's let me accelerate as fast as i can even dumb stuff like when i got started coding i learned to get before i wrote my first line of code because i used it to manage my servers i was really deep in git ssh and gnu screen before i ever wrote a line of code and because of that i've never in my life worried about deleting code accidentally because it's always in the history i think those little things helped me learn way faster because i never had the same fear of failure that the average dev that clearly has right right yeah yeah i like that i like that attitude so anti-fragility as aj says it's one that's an interesting way of putting it yeah i this is also my whole like building safety nets thing i think a lot of that's mental like building your own safety net like in your head in a way where if this video fails that's fine like i don't need this to succeed obviously i want this to succeed i'm going to do everything i can to make it succeed but when i hit the safety net i learn something in the process i can see where i misstep i can learn from this process and building in a way where you can't learn from the failure and putting yourself so into the thing that failing doesn't make progress is really painful and really common like so many creators are like this is going to be the video and i'm going to put everything into this and then when it flops they never post another thing and you can't do that yeah it's a hard balance of like caring about the output so much but also not caring about their like the the performance of the output it's so strange uh because naturally you want to do the opposite right or it's like the success of the thing is based on the performance of the thing i use performance here in like the youtube sense um when in reality like if that's if that's the game you're playing then like that's a really hard game and good luck because eventually you're gonna be sad um yeah couldn't agree more yeah i youtube's a strange beast and i have a channel because dan abramov came on my show and i still have a channel because prime did an interview with me like this is me hanging out and it's really cool seeing from the other side how much thought goes in and how well that works yet at the same time how we are all just kind of winging it like just like we are in the software world like yeah we might be senior we might have seen things a break in more ways but that doesn't mean that we are any okay we're a little better at getting it right the first time but not a lot and we still fail just as much it's not as visible as you might think but for every code stream i do where the code goes well i have three where i look like i don't know what i'm talking about yeah yeah and that's like the uh yeah it's like the beauty of it right if it was always successful it'd be kind of boring um it'd be nice and convenient but it would be uh it would be boring so i don't know totally agree what are some of the most unexpected challenges of doing this creator founder thing full time that's a great question just the consistency of it right like that's the once you kind of figure out the thing then from there it's kind of just rinse and repeat right and that's what's so so hard about it is like i don't know if it's discipline or what but like being able to wake up and consistently do the little things right and just relying on like that to take care of everything else like the to be the product like to take care of all all the other stuff right and so i think that's been the biggest thing is just really and i and i compared a lot to like you know running or cycling or any sort of like endurance sport where it's like the key there isn't necessarily to like go and do these monster workouts as much as it is just consistently doing the yeah anthony the mormon missionaries are great a great way to put it um as much as it is is just doing the consistent thing the small things consistently right the best runners are the ones who consistently show up they don't have amazing workouts every day because they would get injured they just have good workouts every day and it's the same idea right where it's can you show up consistently every day do the little things right for years and i think the best creators are the ones who do that um and kind of embrace that for what it is rather than like okay i'm gonna spend three months on a video and then based on the success of that video then like define my next action right like that's just not how it works and so that's the biggest thing same with the business right where it's like can we consistently make a bunch of really small but good decisions that will then like compound to do something bigger so yeah absolutely i i you can change the word creator and founder at any point throughout this entire conversation it's the exact same which is still so cool and weird to me and that's been an awesome learning for me as i like go through the whole y combinator founder journey and see that it's the exact same on both sides in so many ways and giving like the same tax advice to a new content creator that i do to like a like already founded company and what's interesting here is this idea of the endurance and the it's not a sprint it's a really really long marathon there's a slide that y combinator shows us a lot which is why why c companies fail because a lot of them do i think it's like over 60 end up failing and the reason for over 95 of them is that the founders gave up and got disenfranchised the other five percent is whatever else like a a competing company raised more money and squeezed you out of the market or you got screwed by some patent rules or something but 95 of the failures of people starting companies are just the people who gave up it's not people who failed as people who didn't keep going yeah that kind of ties into there's a question in the chat how do you avoid getting too comfortable to the point where you don't try new things what's funny is like and this is maybe bad for my mental health um my livelihood is essentially dependent on me not doing that right so i've essentially like put myself in a position where my incentives are whether it's with but like the newsletter or the youtube channel my incentives are to kind of always be learning new things to always be like experimenting and playing and learning and so getting comfortable isn't necessarily an option because like i have a mortgage to pay right then again don't know if that's great for my mental health but that's the reality um and i don't i don't let's not advise like other people who are in my situation that's just like the reality of what i find myself where i find myself is i kind of have to do those things and and the good news is it is what i enjoy and i do love doing it um but yeah i think a lot of it is also like what you're doing here just hanging out a place like this you're going to learn new things you're going to challenge yourself in a lot of ways it's by doing what you're doing here you are staying on top of it and you're much further away from like stagnation and comfort mindset than the average engineer who just goes in does their work and leaves like don't worry too much about it just keep doing [ __ ] keep talking about the [ __ ] you want to do and you'll be surprised what comes from it right and like if you're watching this right now like i'm not worried for you because you're weird and normal engineers aren't doing this kind of thing where they're like you know whatever time it is it's 5 45 here like they're watching netflix or like you know doing something else which is completely fine but to the question like everyone in this chat is kind of weird and that's a that's a good thing related to that topic of like hey i i don't i don't i'm i'm worried about getting too comfortable with what i'm doing like you're doing fine if you're here at 7 4 p.m right like yeah i make this point a lot like especially for junior devs that are trying to like level themselves and figure out how much they're growing where they're at in their career stuff like that finding communities like this on twitter discord wherever just to have the developers you might not have around you otherwise like this is kind of the advantage of a boot camp or going to university is suddenly you're surrounded with a bunch of people at roughly your level that you can use to like ground yourself compare and feel stupid but also feel smart and it's important to be in a place where you can feel both and an extent online you're going to mostly feel the stupid for a while but at least you have the opportunity for that feedback and that's something that didn't exist when i was younger and it's a big part of why i felt like i had to go to university that's where you go to talk to programmers and now there's a lot of cooler places and i'm suddenly going to like talk with the people whose newsletters i've read for years but that's how quickly things escalate once you're surrounded with the right people totally with that i gotta go totally fine this is a phenomenal show thank you so much for stopping by i'd love to do it i have huge respect um obviously you know i've told you this theo for you for the company you're building um everybody in the chat thanks for all the love i appreciate you all um and i will see you i don't know where because we don't have a community maybe i'll see you on twitter i don't know i'm on youtube at the very least if you're not already i have his twitter there too all in chat i'll share these on youtube quick as well so everybody there has it thank you again so much for stopping by i'll keep the show alive a little bit after so you can run off thank you so much keep it real peace let's switch to self how was that guys that was one of my favorite shows i've done so far i yeah tyler's great he's one of the hardest working creators in the space and i'm so pumped that we got to like actually share his story and the crazy stuff that he does like especially since he doesn't put his face on his content it's really nice to be able to do that for him and yeah really excited for this vod to go up any other thoughts or questions before i wrap it up i should probably go find some food i have an event coming up kind of soon with tyler for 10 years that's awesome i am genuinely jealous he's a dope person hey chad was great too thank you all so much for stopping by especially after the chaos with the the crash i did not think that this was going to hold viewership at all and it was really cool to see that it did so thanks y'all i immensely appreciate it yeah the the vod will be up it might be a little chopped because of the the outage mid show i am going to probably take the time to stitch together and edit because i really like this one and i want to make sure it's like accessible oh i can show chad again that's cool look at that y'all are here sorry i haven't had chat on as much lately i have had guests and where i put it would cover them the first 30 minutes is voted oh oh no that's going to be annoying to stitch uh i'll deal with that later early apologies to my like pseudo editors who have been helping keep the channel clean that's going to be painful yeah i'll probably just de-list the vods and go make an edit quick hilariously enough oh boy i'm scared of what's gonna happen oh you've been writing the timestamps live they'll still matter that'll make my life a lot easier when i actually edit it worst case i can shift it and like use the relative times they'll still matter they'll still matter a lot thank you man y'all are the best i have the i have the coolest community thank you guys and like especially since this isn't like traditional programming content it's so cool y'all still show up like yeah oh uh chris i just saw you asked if there's a way to see the commands commands i made things that work kind of yay let's go find someone to raid quick i don't have an easy way to i could kind of easily window capture this let me window capture new tab can i un-transform this transform reset make it smaller make it fit cool good enough let's see who else is live in the oh no it's gonna be loud and it's not what i was trying to hit who else is live in the software dev world god it is so hard to get to a category i i don't know how twitch works anymore i should know this i'm just gonna go to slash theo and from here go to the category mute myself so i don't hear myself who's live oh tj's live that could be fun you want to go hang out with dj the vod will be great or the vod will be up on youtube soon i'm not going to touch twitch so it'll be there too if you just want to watch it there i'll have a a better vot up soon i don't care if you guys see my dashboard i'm not hiding anything in here let's raid dj tj.d tj underscore dv great great started see y'all there thanks for stopping by see you next week peace out good show you




## The Surprising Qualities Of Great Devs - 20230906
but I'm still early in my time at twitch one of my managers expressed an idea that I've held strong since strong opinions weekly held the point of strong opinions weekly held is to let you move fast when you have confidence very often to presume it's correct until you run into a problem that proves it isn't and that mindset is how I got as good as I did as fast as I did while many may see my confidence as a negative and I totally understand I can definitely be frustrating on a team it does help me become a much better engineer really quickly and the speed and confidence I move with and the speed at which I make changes when I'm wrong it's a huge part of how I got where I am and I'm genuinely really proud of the engineer I am today so when I first heard of the three virtues of a great engineer I was so scared that I was gonna have none of them and I was going to be an imposter and all these things and I read them it's like oh I don't know if I want to be that but I also am and I really love these three virtues The more I've thought about it it really expresses how unique a software engineer is from other jobs and as much as these traits might be seen as negative I think a lot of you will see the positive aspect of these virtues and probably even relate to them a bit because they are pretty powerful once you understand what they are credit to Larry wall who's one of the original Pearl Educators for coming up with this quote way way back in like believe the late 90s it's crazy how well these apply even today the first virtue is laziness I know that might sound crazy but laziness is actually really valuable as an engineer because if we let ourselves do busy work that we don't have to the speed at which we move is slower than it should be ideally a developer should never have to do the same task twice if they can automate that task efficiently enough and the whole point of software engineering is to allow us to work less hard to do more things as such most of the best Engineers have some amount of laziness baked into them laziness is not great alone though because if you're lazy and don't care how you're seen or care about the quality of your work you're just not going to do anything but if laziness is holding you back from getting what you want then it can actually be really useful because you can build things to let you stay lazy and still get what you want and for a lot of the best devs sadly just wanting things isn't enough motivation for devs the best devs are often driven by things they don't want and what do we want less than feeling stupid laziness by itself certainly doesn't make a Dev better when combined with these other virtues it's a pretty powerful driver because if you're also impatient you have to find ways to work around the laziness that's why impatience is the second virtue you should feel angry when your computer is doing things slower than it could or not doing the things you need it to you should feel a primal frustration when you know how simple a thing can be and it isn't like when I built upload thing after a year of complaining about there not being a better way to use S3 I did that because I was so frustrated this thing was harder than it needed to be so I went out of my way to make it easier so I could also be lazy in the future but how do I find that motivation what drives me to care in the first place and more importantly what drives me to make a solution that's actually good this is where the third virtue comes in so clutch hubris you should be proud of the things you're building and you should build with pride in mind you should be able to take a step back and say I'm proud of this thing I built it's great or sometimes I'm proud that I built this thing as quickly as I did I know it's not great but being able to take pride in your work and recognizing that your laziness and your impatience aren't going to prevent you from doing something you're proud of that is essential to becoming an incredible developer and I'll tell you confidently most of the best devs I've met had pretty good bit of hubris not going to say they were the most arrogant ever they certainly weren't they had to be humble enough to recognize when they're wrong they had to have enough hubris to be right in the first place and I think as crazy as these qualities might sound in fact most of them are kind of negatives I've been surprised at how combined they often result in really talented developers so it's okay to be lazy it's okay to be impatient it's certainly okay to be a little bit cocky as long as you're constantly pushing yourself to be better at delivering good software those Rhymes a little bit different the thing I think a lot about and it came up in chat so I figured I'd talk about it more here if you want to know more about the leadership side of development and what it takes to be a good manager and have a good relationship with your team I'll find a video about that in the corner I honestly think it's one of my best videos and I hope you agree thank you as always guys these notes




## The Suspense Drama A Comprehensive Breakdown - 20240621
now I definitely need to blog about the react 19 changes around suspense and sibling pre-rendering I haven't seen anyone so far apart from the react core team who thinks this is the right trade-off version 19 isn't out yet so maybe there's a slim chance to get them to reconsider oh boy this going to be a fun one you know that because Dominic tweeted at me as a reply asking me to please cover in a video which obviously I'm going to do thankfully I took my time because I was busy at conferences and stuff and as a result he's already written a blog post that'll be a very handy reference as well as Gabriel my lead researcher giving me a bunch of useful notes for us to reference things throughout let's dive in react 19 in suspense a drama in three acts hopefully not three children because then it's going to take way longer that was a good pun I think it's worth first showcasing what suspense is and what we're talking about here so let's dive into some code so I wanted to demo how this currently works if you're not using modern cool new react stuff so this is using V using react 18 Baseline react the thing You' currently get if you npm install and if I refresh here we'll see it's starting the queries for all of these children at the same time and they all resolve at the same time to make this a little more interesting I'm going to change the code a tiny bit instead of waiting until 5,000 we're going to do 1,000 times props do ID so the first one will take 1 second the second one will take two the third one will take three so I refresh this starting 1 2 3 one finishes then two finishes then three finishes then we see all the content does this make sense so far we have the suspense bound and as long as any of the children are taking time it will still show this fallback until they're all done so I Chang this from 3 to 30 now that one's going to take 30 seconds so the first one does clears immediately second one takes Another Second and now if we sit here and wait 30 seconds then we're going to see the actual content but right now all of these elements are not rendering they're they're sitting there waiting for the data to resolve because that last one is still taking its time hopefully this helps make it clear what the power of this pattern is specifically if everything is fetching its own data each of these components is doing its own work we can now wait for all of them to be done but you might have just noticed something interesting once this finished rendering the query's fired again because what this is doing isn't just getting the data for the component and then sitting on it and waiting it's getting the promise resolved from the component saying hey we're done and then it throws away the response until all of the other promises have resolved and then it calls them again to get the new data so what's actually going on here is it is calling all of these components again in the rendering process but since the data is already there because it's cached with react query the second time it runs it which is when all the promises have resolved it can get the data immediately even though it is rendering the component in that moment I can make that a little clearer by putting above here instead of starting react query for starting query for component U rendering component and going knock that down from 30 because that's brutal so we'll change this to five so now when I refresh rendering components 1 2 and three or 1 two and five one resol immediately all of them rerender ends five all of them render now it's showing it but every time one of the promises resolves it's actually rendering all of the components so if you have a bunch of components inside of a suspense boundary each of these renders every time any of the components completes its process so when one promise resolves all of them rerender when the next promise resolves all of them reender this can be a bit brutal for CPU usage because of the potential implications of how this could affect CPU they tried turning it off on the Facebook code base so instead it would be one then the next one then the next one I could show you this by going back to the next version I had here so now we see it renders one it ends the query for one renders one now it renders two ends the query for two now R renders one and two then it also renders five ends five renders one two and five but it does just the first one and then when it resolves it does the first and second and then when that resolves it does first second third so we go first then two then all three this is how react works as of react 19 on one hand this is nice in terms of the CPU utilization because you don't have to render 15 to an unknown number of components depending on how many you're nesting like this but on the other hand we now have to wait until one of these resolves before we get to the next one so if we compare if I actually I'll do this the fun way I'm going to refresh these as close to the same moment as I can going to go for the refresh 3 two 1 cool pretty close this one resolved in 5 seconds because it only takes as long as the slowest one but five here was blocked by one and two so this 1 second call and this two-c call had to resolve before the five second call even started that's the issue because this pattern is better for getting all the data fetching as quickly as possible but it's also worse because all of the components have to render every single time any promise is resolved this the promises resolving doesn't determine how much rendering occurs that's just going through the components one after another but if the slowest component is blocked by any of the others that can break things pretty dramatically Gabriel's already doing his job well here this is why we started to see this response this was just posted in the P here testing canary on a real site the stuff of nightmares so glad TK Doo ran into this or would have been a production surprise my hope is that a solution can still be found he even wrote a small overview let's take a look at what uh Paul henel shared here if somehow you're not familiar with Paul he's the creator of a lot of the poy Manders stuff pm and DRS whatever you want to refer to them as including everyone's favorite thing to hear me pronounce zustand but also react 3 fiber which depends on these behaviors a ton hi we started testing how this could affect our site we updated react next to Canary on a branch of kid super. world Bes said these are many models as well as textures first we recorded the current approach it takes about 2.5 seconds to load the glb models where things start to get fun because people use suspense for a lot of different things so here we see all of these things start running and rendering and loading on the network immediately and then afterwards a few more here is after installing the canary version do you see the issue here I think this should make it pretty clear why this could be a problem if you are using suspense as a way to trigger what you want to fetch and not as a way to wait for things you're already fetching to resolve you're screwed what do I mean by that I can demo this pretty quick too 80 minutes later I just introduced pre-etching by hand I'll show you what that means in a sec but now you see these resolve roughly the same time what I did to make this work is a little painful I added this additional child data brute force prefetch and what it does is it uses a custom hook used preload query which is based on this used prefetch query I got from their docs this will be in react query soon so keep an eye out for that it could actually be useful in other cases so here I Brute Force grab from the query client if this thing exists and if it doesn't then I go Ure query data which means I go get the data and since I do this in this component for all of the values 1 2 and five they all now get fetched at once because I wrote this custom preload code and you could do this anywhere in fact I'm pretty sure if I move this out it won't block the rest of the page render yeah so that's not even in the suspense boundary right now and once it's done the suspense boundary can still resolve immediately so you can choose where the data loads still and if you're not actually triggering the data loading inside of the suspense boundary you're good sadly no one does this in the chaos I just went through to get it working should showcase that no one actually does this like it's data fetching in your components is super super super super valuable it makes so much things easier not just data fetching to be clear I should stop saying data fetching because it's not just that but let's say one of these is a giant 3D model that I'm rendering or it's some data that I'm getting from the user's device or it's a giant component that is rendering in the canvas that I'm waiting to get data for that isn't data in the sense is fetching it from a server to get Json back but it's things that take a while to produce that's when this falls apart because we're not going to go manually prefetch all of the models for our 3D environment that we're building with react 3 fiber we're just going to fetch them in the components because historically that has worked we go back to the scary looking example theoretically you could pull out all of these things that you're fetching and put them in a component that fetches all of them immediately but nobody does that because that's not the beauty of react the beauty of reactor a component says what it needs and if you can fetch that all like synchronously you just render all of the components cool now that we've seen the chaos that exists right now let's go back to this blog post that actually describes how we got here this was quite a roller coaster last week some things unraveled some things went down and in the middle of it react Summit the biggest react conference in the world hopefully you guys liked my talk there sorry I had to do it remote but I couldn't leave the US with everything going on sadly let me try to break down what happened in hopefully the right order and what we can all learn from it to do that we have to go back to April this year the First Act react 19 release candidate the 25th of April was a great day react announced the the react 19 RC a release specifically for collecting feedback and preparing libraries for the next major version of react I was really excited there are so many good things in that release from the new hooks to the use operator from server actions to the ref prop from better hydration errors to cleanup functions for refs from better use ref types to use layout effect finally not warning anymore on the server and of course the experimental react compiler there is so much good stuff there better than how did he just summarize my like 45 minute video better than me anyways this release is packed with goodies and I was expecting to upgrade react query to see if there were any problems I was quite busy at the time with work and finishing the query GG course by the way if you're interested in Rea query stuff query GG is dope relatively cheap for what you get try to get your employer to pay for it though CU they should pay for it it's educational makes you better your job anyways but about a month later we released version 5.39 point0 which is compatible with react 19 here's the Tweet where he announced it there weren't really any issues to dig into here so I thought this releas is on track to become the best react release since hooks were first introduced that is until we notice something weird with suspense second act uncovering suspense full disclosure upfront I wasn't the first to discover this shout out to Gabriel Val fredson who to the best of my knowledge was the first to spot the new Behavior one day after the react uh release candidate announcement a ton of great changes however this change probably deserves a bigger disclaimer code using suspense with libraries like react query will get waterfalls where loading previously happened in parallel yeah this is sandboxes showing the before and after similar to what I just demoed before it's funny because I saw the tweet and I even commented on it but didn't think too much of it at the time as I said I was quite busy and I planned to look into react 19 later so after the react 19 upgrade in react query itself I continued working on the suspense lesson for the course we have one example in there where we're showing how to reveal content at the same time but still have all of the request fetching in parallel as shown in the react docs revealing content together at once so we have the suspense in the Assumption here is that these components take time to render and we want them all to come in at the same time cuz they're getting data or something what has since been retconed is the idea that it was implied that all of the data these need were triggered to fetch somewhere else not visible in this example so that all of these are already fetching Data before we put it here but the suspense doesn't get resolved until all of them have gotten their data so this prevents that loading spinner hell I talked about before without blocking the render theoretically at least the issue comes when each of these elements is fetching stuff itself and the fetch is triggered by its render starting because the first one renders and then when it completes the first two render and when those complete if there was a third one there it would as well but since this is a child of that whole separate issue I don't want to go all the way in on yet but uh yeah as Ricky just said in chat how it's suspending in those Doc is hidden as an implementation detail since it's unstable yeah and here's it being shown here as well so the example looks roughly like the following we have these two things showing repo data let's say they're fetching from GitHub to get data to show about those GitHub repos previously these would both start getting the data immediately and once both have finished then the suspense resolves but now the first one goes and then when it resolves both render again so the second one starts after the first one's done that sucks if you're fetching data in components the way that this works is that react sees the first child will suspend so it knows that it has to show the fallback however it still continues to render other siblings in case they would also suspend so that it can collect all of those promises this is a pretty great feature because it means if each sibling triggers anything async we can compose our components in a way that they will still fetch in parallel while not triggering a popcorn UI where multiple parts of the screen pop in one after another the classic loading Spinners getting smaller and smaller and more and more present until the page loads a more complete example might look something like this you have suspense at the top that has a fall back that's the loading State we load the header the Navar main with content footer and suspend and since we have this one suspense boundary all of these things can go off and do their thing and then when the suspense resolved it's cuz all of them are done no more popping awesome this is an important term here fetch as you render but also leave my suspense Behavior the same some or all of those components can initiate critical data fetching and we'll get our UI displayed at once when those fetches have been resolved another Advantage is that we can add fetches later without having to think about how pending States will be handled the footer component might not fetch data now but if we add it later it will just work and if we deem data is non-critical we can always wrap our component in its own suspense boundary so if we decide the footer doesn't want to doesn't need to block the whole page wrap that with the suspense and now when this one resolves it doesn't matter if this one has or hasn't yet because we're going to use this suspense boundary as the representative of that element here now fetching data in our footer will not block rendering the main content anymore this is pretty powerful and it aligns with how react favors component composition above anything else yes the ability for a component to own and do and request all of the things it needs is a huge part of the magic of react I vaguely remember seeing something on Twitter about suspense having a different behavior in react 19 so just to be sure I wanted to try out what we have in the course with the new RC release and to my surprise it behaved completely differently instead of fetching data for both siblings in parallel it now created a waterfall I was so surprised by this behavior that I did the only thing I could think of at the moment I jumped on Twitter and tagged some react core team members some of which are here now hi Ricky needless to say this tweet took off and it started a somewhat heated Twitter discussion we soon found out that this was not a bug but it was actually an intentional change which led to quite some outrage yeah it led to enough outrage I had people spamming me asking me to cover it when I was on an airplane and I was still tempted to film something on my phone quick that that's how big this one was so why would they do that great question why would the react team make this change it just sounds obviously wrong there are of course reasons why this change was made and oddly enough they are meant as a performance Improvement for some situations I know this sounds crazy but there are absolutely cases where not having this work the way it used to is good when you have the model with all of the components rendering at the same time every time one of them completes their async work and it's no longer suspending all of the other components are forced to render even if they're still fetching data from the previous attempt thankfully most of the ways you would do that fetch are non-blocking so they wouldn't restart that fetch again but on the other hand if the actual component render is what's slow that's going to suck so here we have the code that Ricky wrote for us for the demo this example is different from the one we did before because we have a component that is intentionally slow we do that by having this while loop that locks it for a second as it renders so this is the first thing in the suspense boundary and we're on react 18 remember so so when I click this rendering thing three happens done then the rest start but wait I thought that react would do this in parallel it does it in parallel when you hit a suspend since this component isn't suspending it's just slow that means that the next components can't be checked because the render isn't blocking because suspend the render hits a suspend and then it stops because it knows it has to wait so if we had actually it seems counterintuitive but if I put this above here we're not even going to use the query this just indicates that we're suspending so this tells react hey you can bail out now and not wait for the rest of this to be done because we now know it's suspending and now it's going to load all these things instantaneously because it hits the suspense earlier but if we don't do that we just have the slow component be slow here this blocks all of the other components from rendering until it is completed because it's not slow because of an async thing it's slow because it's a slow component I switch we is relative to siblings I'm pretty sure we can't let me check this yeah so again like if this is last in the children then all of these will trigger their promises then this will be slow but if I move this to the start you have to wait before these can start that's the important part here but what if we don't want to let this be slow and again if I put this at the bottom what will be fun is every time one of the promises resolves that thing three has to render again so I'm going to change that from rendering thing three to rendering to slow thing rendering and slow thing done you'll see slow thing rendering slow thing done slow thing rendering slow thing done slow thing rendering slow thing done because every time one of the promises resolves it has to deal with the slow thing again so now I switch this to be the canary [Music] version you'll notice something the slow thing doesn't happen until everything else is done loading so we don't get the 15 times that slow thing has to rerun like we were before because we're going through these in order slow thing doesn't get rendered until all the other things have been resolved we're going through one at a time so if you had let's say multiple slow things because you're a big app like Facebook you get to see the loading State immediately which is important too see the loading appeared instantaneously we don't have to wait for that Al I change the return to be slow thing here and we go back to react at latest thank you bun for making this instant now the suspense is taking so long to appear we don't have the fallback because it has to go through all of the children and complete all of their renders before knowing what the does doesn't have to suspend on so it's not actually going to show the suspense until it's triggered all those promises in fact I don't think in this example it's going to show it at all because by the time all of those slow renders are complete the data loading has been done for a while okay it shows it for a bit here but in just a moment it shows it all that's the issue with the old model is that we get a loading State significantly later and all we have to do is change to the canary go the exact same page and we see the loading State immediately because it hits that suspense boundary and it hits that suspense instance significantly quicker that's why this is nice that's why they wanted to make the change so I actually really like this demo thank you Ricky for showing it it does a great job of showcasing why this change is nice because it gets you that loading State significantly faster now look at the prefetch example you get fast fallback and no waterfall okay let's take a look so we're on the canary toggle we get the loading immediately and we Brute Force the parallel so yeah this is the best of all worlds because the slow thing doesn't have to start rendering in order for us to start fetching the data which would have been the problem previously Andy we can show the loading State earlier but we're still prefetching on click now we go preload all of the query using query client up prefetch query so we force those all to start loading we don't block on it we just start it and then we show it now all of the promises that these are waiting for they're they're happening already so these don't trigger the promises so we can show the suspense significantly earlier as well thank you for showing us a blazing fast example Ricky if your component is slow because it has to render a bunch of react and a bunch of JavaScript and has a bunch of things it's touching having every component render when any component finishes is bad but if your components are slow because they are triggering async things when they are rendered that they have to wait for then this change is terrible but that's the issue on one hand if you have individual components that take a while to render for reasons other than something they're getting asynchronously maybe it's rendering a giant table with a ton of rows if that has to rerender every time a sibling's promise resolves that's going to be terrible for your CPU that's going to take way more power to the point where when I was trying to demo it my browser was freezing I had to close Arc like four times trying to Showcase this but on the other hand if your components are slow because they're getting data from somewhere or they're fetching some asynchronous data like stuff from your devices on your computer common case I do a lot if it's slow because the promise takes time then the old way was much better if it's slow because the components take too much time this new way is significantly better so if you're let's say I don't know the company that made react Facebook and you use relay to prefetch all of the data way way way earlier your components aren't what triggers the data fetch so it doesn't matter what order you render them in the thing that is slow is now the component's actual rendering which is a huge difference that I don't think is properly appreciated here if the components already have the data coming in you just want to minimize renders that's what the goal of react 19 was here but if you are fetching the data in the components this breaks everything you with massive waterfalls as we were showing earlier this great GitHub issue somebody opened where they were using suspense to fetch 3D models prev viously if you had 15 children all of which were triggering a fetch for a 3D model they would all go render and then it wouldn't make additional changes until it has all of them and it'll show you the suspense for all of them with the new model each of them has to be fetched before the next one starts and you end up with hilariously longer load times here like absurdly so that's the issue here it took under 2 seconds here it takes almost 4 seconds for the same experience just with the change to the new react version chaos here's the ual issue from Good Old ACD light on the actual react GitHub describing why they did this today if something suspends react will continue to render the siblings of that component our original rationale for pre-rendering the siblings of a suspended component was to initiate any lazy fetches they might contain this was when we were more bullish about lazy fetching being a good idea some of the time when combined with pre-fetching as opposed to our latest thinking which is that it's almost always a bad idea I'm happy that this phrasing is here thank you Gabriel for linking this because uh for d dat fetching sure but there's other types of fetching like a component in a 3D environment that has to load a model you don't want to prefetch all of the models because that's a lot of data and you don't want to do it in a weird hoisting pattern cuz it's way worse thex the magic of something like react 3 fiber is you get the composition Primitives of react you get the suspense and the like parallelization of react as an interface to get other things in which is so powerful and I really hope we get some comments from Paul on this because he has really good thoughts another rationale for the original Behavior was that the render was iio bound anyways so you might as well do some extra work in the meantime but this was before we had the concept of instant loading States when navigating to a new screen it's better to show a loading State as soon as you can like a skeleton UI rather than delay the transition there are still cases where we block the render when a suitable loading state is not available it's just not all cases when something suspense so the biggest issue with our existing implementation is that the pre-rendering of the siblings happen within the same render pass as the one that suspended before the loading even appear what we should do instead is immediately unwind the stack as soon as something suspends to unblock the loading State that's a noble goal how quickly can we show you the loading state so if we can figure out really quickly hey this component's suspended we need a loading State get you that immediately then go deal with the rest later but yeah this is a lot crazier as we go deeper if we want to preserve the ability to pre-render all of the siblings what we could do is schedule special render passes immediately after the fallback is displayed this is likely what we'll do in the future good to know they had a plan for this however in the new implementation of use there's another reason we don't pre-render siblings so that we can preserve the state of the stack when something suspend and then resume where we left off when the promise resolves without playing the parents yeah this is another key piece as I was showing before things get replayed a lot with the existing suspense model the only way to do this currently is to suspend the entire work Loop fiber does not currently support rendering multiple siblings in parallel once you move on to the next sibling the stack of the previous sibling is discarded and it cannot be restored we do plan to implement this feature but it will require a non- insignificant ific refactor again since whenever one child resolves all of the children re render you lose any state that existed in those render passes which is brutal unless you're handling that externally through something like us in external store and the crazy stuff that react query is doing but with an ecosystem that already exists that has successfully built working Primitives around these behaviors it is nice to think react will have good enough defaults built in in the future but breaking the existing workarounds is a terrifying thought given that lazy data fetching is already bad for performance the best trade-off for now seems to be disabling pre-rendering of siblings this gives us the best performance characteristics when you're following the best practices like you're hoisting data fetches to server components or rout loaders at the expense of making an already bad pattern a bit worse whether or not we agree it's a bad pattern this isn't a bit worse this is 2x worse this is really really bad this is not good so I understand why this got down vote bombed I also understand where they're coming from but this feels a little too much like idealism with what react should be not realistic with where react is today later when we Implement resumable context Stacks we can reenable sibling pre-rendering though even then the use case will mostly be to pre-render the CPU bound work not for lazy fetching H good context here is Paul henel showing up I knew he'd be in here is it possible to still talk about this making this a waterfall will have an impact that would push everything that relied on suspense at an immediate disadvantage not just on the Dom like react query and such but also platforms like three via react 3 fiber which are inherently async everything is a fetch or an async worker in wasm userland workarounds like pre-cat don't apply to non-user facing async tasks and thirdparty modules it can't be put into Global space because it would break tree shaking entirely and like kapach mentioned before it also breaks encapsulation it would also diminish encapsulated acing composition in interrup a major groundbreaking feature in current react there are actually some great talks Paul hensal did showcasing how with the current not ideal version of suspense there are things that just could not be done in any other framework it's why he built react 3 fiber in react and not in something else in this example we have center with async thing A and B Center knows when async think a and async think B have completed and it can act upon it in its used layout effect react 19 would first load asyn think a and then asyn think B adding potential seconds to TTL the user would be forced to break component encapsulation in pre-cache which means the contents of Center can no longer be dynamic or conditional but if contents are third party acing components it's over completely the loss of this capability cannot be understated please consider undoing or making the behavior opt in or out suspense lists reveal order would be a very useful fix this is actually good call reveal order forwards backwards or together good call out as per usual Paul henel is absurdly smart and makes my brain hurt when I read what he says but it's valuable let's quickly read what was said here by TK cuz it'll be useful let's assume that expensive component takes some time to render for example because it's a huge subtree but it doesn't suspend itself because it's just a slow component it's not a blocking component fetching data now when re renders this tree it will see that suspending component suspends so the only thing it will need to display eventually is that suspense fall back however it can only do that when rendering is finished so it has to wait until expensive component is done rendering even more the render result of expensive component will be thrown away because the fallback has to be displayed there's another important key when a suspended component resolves if it still has children that haven't finished that response that you get gets tossed out and then regenerated when all of the suspense boundaries are cleared once all of the things suspending have resolved that's when we generate the actual response but until then kind of when we think about it this way pre-rendering the siblings of a suspended component is pure overhead and it will never amount to a meaningful output so react 19 removed that to get instant loading states of course if you suspended instantly you can't see that the siblings will also suspend so if the siblings were to initiate data fetching like with use suspense query they will now waterfall and that's where the controversy comes in Fetch on render versus render as you fetch having a component initiate a fetch is usually called fetch on render it's the approach most of us likely use on a daily basis but it's not the best thing you can do I like this call out here because yes this is how most people are fetching right now and it is not ideal at all one thing I will add is that use suspense query as a primitive and react query is probably one of the less used ways to fetch data and usually when people are using react query they are fetching as you render so you do the fetches in the components in each one owns it own loading state so they don't suspend at all even when siblings inside the same suspense boundary are pre-rendered in parallel you will not be able to avoid the waterfall if you have two US suspense query calls within the same react component or if you have a parent child relationship between the components that's why the recommended approach by the react team is to initiate the fetches earlier like in a route loader or in a server component and then to have the suspense only consume the resources rather than initiate the promise itself so you think about promisees having two sides first you have to trigger it and then you have to get something from it if the components are just getting things from promises this new model makes a ton of sense but if the components also trigger the promise that's where things get so here's an example where we're fetching the data ahead if we prefetch the query data then this new model just makes the components cheaper to render effectively and we can see the suspense earlier however no one actually does this very very few people are going out of their way to manually cash react query data ahead of time before we start rendering the components because otherwise we wouldn't even be using these patterns in the first place but hopefully this helps clarify the fact that the components not triggering the promise means this is a nonissue but if the components trigger the promises that's where the issue Starts Here the route loader makes sure that the data fetching occurs for both queries and that is initiated before the component is rendered so when react starts to render the suspense children it doesn't matter if it renders the second repo data component or not because it wouldn't Trigger or fetch it would just consume the already running promise so to show this example again we have tanack query and tanack table both repos if these were fetching the data themselves this would have to complete before this one starts but since we're doing the insure query data call here we're fetching this stuff ahead of time and dumping in the query client that means we already have the data loaded so the suspense behaviors here don't matter but if we deleted this loader and the components were what triggered the promises then we're screwed I really don't like the idea of duplicating logic between where the call is initiated and where it's actually called that's the icky bit and that's the thing that'll push you to use react server components for more things yeah in order to do automatic pre-loading you need to ahead of time statically analyze the tree to discover the requests you need then you can preload them from the client render that's what relay does or you can ahead of time render the tree to find the request that you need to preload which is what react server components does and if you're doing it at request time you might as well start those requests too and then pass them down to the client if you dear developer could write debug deploy the data fetching parts of your client side app as easily as you do static apps then would see a lot fewer complaints about the framework pushing you to WR performing apps by default yes but good luck doing that for all the crazy stuff that's going on in react 3 fiber this works great for Fetch and I think that's the issue is suspense for fetching Json not ideal suspense for all the weird things going on in poy Manders land magical primitive that allows for things that were unbelievable before it existed Robert had a reply here who uh Robert has a ton of experience with all things react and has been super super handy in our research throughout this he had a lot to say here yes you absolutely need a good developer experience which means that you need the following co-located dependencies like data JS and all the above and those need to be hoisted meaning executed before render and most likely that means a compiler but you can imagine alternative Solutions such as a solid like solution separating Constructors from components or even something like server components where we don't care about hoisting because things are on the server which means they're fast the problem of how to match the logic in your components with the logic that determines what to preload is also a problem graphql is a limited language so it probably needs extra features before it is a good candidate server components are another answer to this over and under fetching is also an answer yeah all good points when to fetch is a tough problem but if we're not fetching if we're getting data for other things in other ways then stuff starts to fall apart manually hoisting is the solution that everyone has in their heads and the reaction is that's hard and that's correct hm why that not work did I put that in the wrong one it should be stable shouldn't it okay that's brutal actually I'll change that to just be use Query then theoretically no oh uh I used the wrong thing there I'm confused um somebody have a demo of this already so theoretically with all of the custom code I just wrote this should finally work as expected nope still blocking great the long-term solution will not involve manual hoisting manually hoisting is a nightmare at scale at least without linear types there's nothing guaranteeing that every resource you load is actually used by the subcomponents in your tree so you'll end up loading more resources than necessary especially for complex UI this isn't just a problem when we're manually writing route loaders it's also a problem when writing Rest end points the bloat over time for the same reason it's also a problem when you call use Query once at the root of a given component tree which one must do now for performance over time that use Query call will fetch more data than the tree even needs because it's easy to add Fields but it's dangerous to remove them so to break down what he's describing here if we have a bunch of components that we want to have fetching their data in parallel so we put it all in one giant Ed query call on top what happens if somebody deletes one of the components that had one of those data Fetchers in there do we know all of them are gone do we have a way to determine which things aren't needed anymore a more relatable version of this problem might be CSS if you have a bunch of CSS files where you wrote a bunch of CSS how do you know for sure that nothing is using the old CSS class names in your code base if you delete the component that thought was the only component using that class name can you safely go delete the class name and everything related to it in the CSS the number of stale classes that exist in a codebase like twitch for example where we have a CSS class that is no longer being used CU for an old feature that got deleted but we're scared to delete the CSS now imagine that for your data fetching that's what's going to happen here the question of how to keep the logic of what to load in sync with what's in your components is the very important question we're trying to resolve here how do we get the data that the components need while also not making it harder to write the components in the data layer without over fetching or under fetching how do we get the components to know at a route level what all of the potential data is so that it can all be loaded immediately as the components appear as the data appears this is a very speculative solution but I think the answer involves the following no redundant conditional logic in your components instead your components will be past some component or null or some resource or null and whether that is null or not is determined at the route level there will be a statically analyzable language that is powerful enough to encode all the logic that you use to determine what data is needed by Any Given UI and over fetching and under fetching are Escape patches for this this language is used to select not just data but also JS resources translations lazy loaded components you name it so it's not just graphql and potentially some static analysis that ensures that if you use a given resource conditionally that condition is understood by the compiler so for example this is allowed where we get data variables and runtime props if variables. should load return data. my component but this wouldn't be data variables runtime props if runtime props do should load return data. my component because we have these props that exist at like the compiler level determining what components need what data and then runtime props is a separate thing that exists in runtime land and js on the client land separating the data props and the hierarchy of those in your graph from the state stuff that sounds chaotic I see why we want that but that sounds pretty rough apparently he did a presentation in graphql conf last year about what this could possibly look like but that's again just for the data fetching part I'm sure he hacked some crazy stuff for the react and JS Parts there take notes of what he didn't mention graphql JavaScript URLs and routes and react all of those are implementation details and everything above applies equally well to any other UI at least where there are servers involved I like the call out here of at least where servers are involved good stuff shout out to Robert once again for putting this all together and helping us clarify what we want to talk about here it's important for us to have good solutions to Hoist the data fetching but not everything is a fetch as TK says here hoisting your data requirements is a good idea regardless of how suspense works and I also recommend doing it however with the proposed react 19 changes it becomes almost mandatory to do so further I learned anything from react query so not every async operation is a fetch I'm one of the ones who push this really hard I use react query for a lot of things that aren't fetching for example using react. La for code splitting would also mean the bundles are loaded in serial if your app looks like this so we have a bunch of components that are lazily loaded or maybe you're using module Federation or some of that fun where the component starts to get its JavaScript laily now this has to get its JS before this starts to get it before this starts to get before this starts to get this this is terrifying yes you can technically pre-ad the dyamic Imports as well but making this required for good performance kind of defeats the purpose of react suspense and component composition as the app component would need to know everything async that goes on in any of its children yeah this waterfalling is terrifying so to Showcase how different this is from how we felt before here is Paul henel talking about suspense in react 18 which is the way it used to work and how excited he was about that since react 18 is coming I'm compiling some tweets exploring suspense a groundbreaking new feature feature suspense allows components to handle async tasks while the parent controls the loading errors and fallbacks it is essentially solving async in front end here are some use cases example one you load an async asset fetch wasum parsing workers when it's finished you want to execute a specific action for instance a zoom in so here once the data is loaded on that load complete in the suspense boundary he can trigger a zoom which is looks awesome since model is async and zoom in which is not share the same suspense boundary zoom in will not execute before the model is ready this is literally all you have to do so you have suspense fall back zoom in model example two one component is async while the other needs to operate upon the result of it same thing it we share the same suspense boundary use effect in the opening component it's guaranteed to be able to access the async reference example three you want fallbacks this would have been hard already but imagine going through variants where you want to load a lesser thing first before switching to the high reses sketch Fab does that for instance this how easy is to get through Progressive enhancement with react suspense loading indicator low quality then high quality so we take a look at this code we have this big suspense on top where we have the fallback which is this loading state but we have another suspense in here this suspense that is a fall back of the low quality version of this model so this one takes less time to load because it's lower quality but since this takes time to load this suspense returns something that this suspense blocks on since we hit hit the suspense cuz it's taking a while we return this thing which also suspense cuz it's going to take some amount of time but now whichever of these resolves first is what triggers there and we have this loading State up until then so we get loading State we go through we trigger this we realize this takes time so we trigger this and then if this resolves this will clear that loading State and then when this resolves it will clear this state which is effectively a mini loading State this is so so so cool that you can suspend with a fallback that triggers the suspense above knowing that that one will take less time this type of composition is just incredible and really showcases the magic of the new react model and the power of suspense so here's the demo with the audio stuff we have suspense that has this positional audio and it has the analyzer this won't become part of the page until both of these have resolved this might exist in the JavaScript world but it doesn't appear as part of the content until the suspense has been cleared so we need the positional audio which has the file I'm assuming to load which takes some time positional audio that's one of their components yes so it has to load the audio file which takes some amount of time and also has to load the analyzer which is going to load way more additional stuff so both of these can now run in parallel we can both be getting the data for the analyzer and fetching the audio for the positional audio component and then when both are ready both render at the same time super super cool [Music] yeah the audio play triggers when everything is loaded so if one of these took longer than the other that's fine they both trigger at the same time super super cool this is all the code it takes to go through three stages loading indicator could be any other component of course like a block or a sphere so here we have some HTML that is the loading then we have this which is the next state and then the final model which what we actually want or since they all render at the same time it's composable it's magical it's the thing that we all love react for by the way yes the above demo does have a waterfall because I wanted you to see the loading in Dev TRS with disabled cash all you need to do is call this pre-load calls and the loading happens in parallel okay this is actually funny that he tweeted this at the time because this would solve about half of the issues we're bad about right now but but still yeah Reddit is going through the suspense debate currently and there are some that say too bad you used an anti pattern or why not wrap every suspending component into a suspense bound if you don't like waterf Falls the snippet shows what would be lost I can act upon the results async A and B I am sync but I show when everything else is loaded so here we have this ref that is being shared between the children use layout effect measure conness before they're painted on the screen The View could still be altered based on the results do something after so what happens with this code in react 19 it will waterfall a sent a completes then acing component B and so on this would create a long wait if you don't want water falling you have three options one would be go back to use effect trigger all of the acing stuff set State when you're ready kills interrupt no parent outside will be able to act upon the results there can be no overall fallbacks only individual ones two would be you could wrap each acing component in a suspense which kills the interrupt there's no parent outside for that we can act upon the results with there can be no overall fallbacks only individual fallbacks why bother with suspense at all over just using use effect and set state or we can break the encapsulation and pre-cache all of the acing stuff the contents could not be dynamic or conditional any longer this would not work if the acing components are pulled from a third- party Library one of the most powerful features that react has to offer would be gone so here we have suspense carb box in zoom zoom use frame does the zoom and it waits until these other things are done so we load the car we load the box and then when all that stuff is done we do the zoom super simple super nice apparently there's a diagram in this that is actually very handy react triggers the suspense fallback which then fetches the car stuff throws a promise we're now waiting here we show the fallback and then when all of the things that have promises have all resolved then they all get rendered in the Dom super cool thank you for the diagram so we've talked a lot about this what we haven't talked about yet is the response from the react team which seems like it would be important and I'm sorry for dragging you along this long without doing that let's start with the first response this one was admittedly pretty quick so this was June 11th at 11:00 p.m. and Sophie jumped in about 12 hours later because they immediately had a meeting and chatt about this discussion at the react core team meeting today hey hey Sophie we don't call it react core anymore it's just react team you're better than this this was not motivated by servic components or verell but actually the Facebook site which is faster this way due to less CPU load as I mentioned before if the component render is what slow and you've already paralyzed your data this change makes sense but for everyone else not so much so the simplification enabled several newer changes and it would need weeks of work to put back even if desired the proper fix is a major refactor to be able to track multiple in progress components without re-executing unnecessarily so that we can have the best of both worlds until then we're left with two suboptimal options recognize the old way is better for react query users with lazy fetches or that the new way is better for teams that have already structured their code to initiate fetches earlier folks with Hyper optimized performance have already done this and now they have a higher ceiling I thinker documentation today around how to structure your fetches SL when to fetch if not using a server is not good enough and this needs to be fixed I pushed the team on this I agree we showed the docs earlier they they did not make this clear to say the least ultimately I recognize your frustration and I feel frustrated about this too but also recognize that there is no easy fix that is better for everyone I wish I had better news to report but hope this context helps a bit and then two more days past we got this response good news re suspense we just met with Ricky Joe saona and good old Andrew Clark ACD light we care a lot about single page CHS the team misjudged how many people rely on this today I'll say twofold here on one hand the average react Dev doesn't know about any of this and has no idea this is going on but the people who are really deep the people who use react for things that aren't just traditional websites like video call apps like Ping or crazy 3D experiences you'd build with three fiber there's more of those people doing more of these things than I even knew about ahead of time much less them which is understandable it's a weird case and it's certainly not the average react user but there are still more people doing weird stuff with react than there are people doing anything with solid so it's important to know that these people exist and they're also the dest hard crazy fans of react there are few people who care about and understand react better than Paul henchel and pissing him off is never a good idea if you can avoid anchoring Paul it will probably benefit the whole ecosystem but they absolutely misjudged and they're not pretending otherwise it's cool to see them say that most people would be like well we hear you and we're going to do our best to make sure we make everything good for everyone but they specified we were wrong here we made a bad judgment call they're still going to recommend pre-loading but they recognize it's not always practical and they're going to hold the 19.0 official release until we find a good fix huge so good this is why we have an RC process we're going to wait until this problem is solved for those who don't know Joe he's the person who is largely leading the efforts on the compiler side and a lot of his history comes from building crazy stuff with relay at Facebook so he deeply understands data loading and react more than almost anybody so Joe is intimately familiar with how to do data fetching and async suspense stuff correctly and react I was lucky to have a real good conversation with him and Tanner and when I say I had a good conversation I mean I watched them talk and I just made them speak his death of understanding of how libraries interface with react is surreal and I was hyped that he was one to jump in on this I think Joe is one of the better people to Comm communicate with these Library authors about these things and I'm pumpy jumped in some thoughts on the suspense changes from the 19 RC most important our bad we got this one wrong and we heard and we sincerely appreciate your feedback great opener starting with that starting with the apology and then going in this is a pluscom stuff everyone should take note of this especially if you have things that anger people so what happened the behavior change affected a specific case a suspense boundary with multiple children that suspend in 18 react wouldn't stop rendering at the first suspending child and it would continue to pre-render those siblings we regularly analyzed performance of react apps and we found that this Behavior was inefficient in apps that were using the render as you fetch Paradigm in this approach you fetch in something like a route Handler and then you suspend if the data isn't ready yet in render so the render as you fetch to be very clear means you fetch ahead of time and then you render things when they're done when using this pattern it was inefficient to try to render other siblings of a suspended child since we would have to show the fallback in either case so for react 19 we changed to show the fallback right away then render the children again once a child unsuspend we extensively discussed the trade-offs of this change we knew it could regress in a specific scenario apps with many lazy fishing children in a single suspense boundary yeah we thought this case was uncommon enough so we decided to ship and get feedback again wrong in hindsight lessons learned a lot has improved over time when things went wrong is the next step we hope that we'd get feedback via the canary release which has included the change for many months but during that time period we've also learned the canary Channel isn't easy enough to consume and very few were testing with Canary this is a huge learning I was I was going to bring this up earlier and I'm very thankful that he did because not a lot of people test this the fact that TK Doo caught this prevented the web from getting slower so once again I I hope I've shouted him out enough check out TK Doo EU give him a follow buy his course he is he just saved us from so much pain so much pain thank you TK for doing the diligence to check this test this and advocate for this in a way that allowed for the whole ecosystem to improve the result of this was that we didn't get the feedback until the 19 release candidate our change log did call this out but they could have called it out more prominently and that's how folks knew to test the behavior once we heard the feedback we quickly discussed leading to where we are now stepping back there are a few things going on here we need to continue flushing out our story for client side data fetching but there are many great options in the space that support the render as you fetch pattern more important is getting feedback from the community earlier this is harder than it seems it always is because the size of the community and the many ways people use react we need to balance info overload while getting a diverse representative set of feedback we also don't want to privilege established players at the expense of making it hard for new libraries Frameworks Educators and voices to emerge rushing into a fix could backfire and lead us down the wrong path Joe why are you so why is Joe so good at this is his job to write the code this is one of the best like publicly take the L and learn post I've seen in my entire career so we're working on changes to get the feedback from y'all earlier we're exploring a number of ideas including evolving our previous working groups and RFC process we will definitely also reevaluate the canary process to ensure sure that more developers can try out changes and new features at an earlier point this is great so much ownership so much Clarity yeah I'm happy they're walking it back so here is TK's response to this third act the escalation and delaying of the release by now a lot of people on the internet were surprised about and afraid of these changes screenshots were shared about how apps that fetched almost everything in parallel in 18 resulted in a total waterfall in 19 the developers behind the poy Manders open source uh Community which maintains react 3 fiber we're a bit freaked out because a lot of what react 3 fiber is doing is based on async work and it leverages how suspense works today this one so far that even forking react was up for discussion if the changes actually made it into version 19 by that time I was already in Amsterdam for react Summit we were talking about this change at the react ecosystem contributor Summit where everyone was either surprised concerned or frustrated the Rea cor team was doubling down kind of they were saying that okay this is bullying Ricky I get why they like bullying bullying Ricky which is better for fetching duh but again places that aren't fetching doesn't necessarily make sense if you can't move the request all the way to the top not great I I see why people were upset with this love you Ricky you're easy to bully yeah you're easy to bully specifically the react team members were saying that we should Hoist the data requirements anyways which yes we should and also that we never made suspense on the client official and as I've heard this from a lot of people on the react team that suspense wasn't right until it was server side suspense if you Ed suspense along with streaming for Server stuff that's when I first started to heavily use suspense personally but uh yeah you're you're using suspense because you're a PO mander's Dev or you're building on top of their stuff you're already all in on suspense but like I learned suspense through Paul hensill I later got good at suspense through server components okay suspense was stable but suspending was not do you see why I hate your naming so much do you understand how hard it is for me to explain this to the people watching this video right now which is why I'm not going to going to politely ask you to subscribe to this channel cuz this video has been a lot of work for not just me but my whole team and everybody else Jo joining in on it and if you think I should do a longer video about suspense and its history and what suspense versus suspending and all these things means let me know in the comments and please subscribe this has been a lot of work later that evening I had the chance to talk to Saia who worked on the react compiler as well as version 19 he assured me that the react team cares a lot about the community and that they likely underestimated how the changes would influence client side suspense interactions on the next day the react team met and decided to hold the release again 12 hours later very very soon after great response time overall it's very reassuring that the react team is open to feedback at the stage post poning a release that was already announced and presented at a conference is a big move one that everyone involved really appreciated I'll gladly work with the react team as best I can to find a good compromise in this matter okay this is a good comment from chat if the 19 release happened now our customers would have our heads we have fors that display dynamically different components which have suspense boundaries with several Dynamic fetches depending on user inputs from the parent components having everything in waterfall would affect performance to smithin yeah there there are a lot of weird edge cases that weren't considered with this change the biggest react nerds are the ones who were adopting suspense ear early which means the deepest react community members are the ones who have this break for them learnings there's a couple of things I learned from all this for one trying out early releases before they come out as a final version is a very good idea especially if the team is ready to take feedback and act on it kudos to the react team I just really wish I would have given the feedback earlier again everybody's being so reflective here like TK to be clear you did everything right nobody would have thought to go check these things L they were deeply reading these notes and for this to come up a while ago you to see it not think about it and then find it later and still be the first one to bring it up huge but yes as a community we should make it an effort to test these things earlier and find these things earlier the fact that there are so many things changing in react 19 and this is the only thing that would have broken at least that we know of is massive but if we can find this thing earlier then this could have been a seamless upgrade the other thing that became obvious to me and the other maintainers is that we need a better channel to communicate with the react team the ream working group was probably the best thing we had in that regard and the whole Saga show that having something similar for react 19 and maybe future react releases would be great something like a permanent working group maybe also obvious but worth mentioning shouting at each other on Twitter is not helpful I regret the part I took in any communication that wasn't common objective and I really appreciate Sophie's way of communicating and handling things yeah Sophie and Joe are the real goats here like so many others before me have figured out interactions in person are always so much better and I'm looking forward to having more great conversations at conferences thank you TK I'm happy that this is resolved I felt strongly for a long time that react needs a permanent working group on a platform that allows for insta communication for love all JS just use a private Discord I know they can't take on a fully open communication path of the public but this would at least cover a very underserved gray area and give supporting ecosystem voices authors and maintainers a place to communicate up the chain that isn't email inperson conferences events in the small percent of react stewards who are active on X in Twitter agreed although I do like the point Joe made earlier that making sure we do this in a way that doesn't just benefit the privileged experienced established people is important too so how do we make the react team accessible without overwhelming them with useless comms but also accessible in a way that even new devs building new libraries can have a fair voice to it's a tough balance and relying on Twitter for it is not working my hope is that with this debate the react team will acknowledge that suspense is also an asynchronous orchestration solution whenever suspense comes up it's about fetch but fetch is a Dom construct suspense is part of the react library and is built around JavaScript promises fetch does not exist anywhere outside of react Dom suspense is about more than fetch it can transform the react ecosystem just like hooks did it enables components to interrupt a parent can act upon its content this was impossible before suspense because no outside parent knew when its contents completed their acing tasks it's a breakthrough compositional ability that would have been lost in react 19 A small collection of suspense enabled react patterns I showed this earlier great stuff and I think they're hearing this now too we use suspense for things that aren't just fetching the result will hopefully be some change on the team culturally thankfully the current figure heads are good enough people that we have that Source it is reliable and we were able to jump in front of this ahead of time but honestly too much of this came down to and I am very very thankful we've learned as much as we have I don't have much more to say here so uh until next time peace is cut to this point and you don't need to include all of the the hell I got to get here




## The T3 Stack - How We Built It - 20220712
we were getting a bunch of questions and issues and things that were annoying me as most dumb questions and issues do and i wanted to put this here as a what the role of this is i have a bit more detail on top here that's uh we made t3 or create t3 app to do one thing simplify the complex boilerplate around the core t3 stack attack without compromising the modularity of the pieces i wanted to make sure all of these parts interrupt the ways that they're supposed to without getting in your way as you do or don't adopt them so if i don't need prisma and next off but i need trpc for some other server stuff obviously i want tailwind and typescript's not going to be compromised on this lets you select which of these pieces minus typescript you are going to use for your project and then set them all up correctly the axioms here i wrote are the philosophical like somebody asked isn't there a js option you should try the js option quick i think you'll be surprised so yeah challenge for everybody who's watching this mod go npx create t3 app and pick javascript see what happens there's a lot to learn there so anyways t3 axioms i wrote this to try and formalize my philosophy around this stuff a bit knowing that i'm not the one building this but a lot of others are working on it hard t3 is theo create t3 app is a cli to start a project using whichever subset of this tech you want specifically create d3 app is a a project init cli that has our philosophy encoded in it and this is that philosophy the t3 projects are opinionated but those opinions are done in a way that lets you control your project and to an extent your destiny the first axiom i think this is the most important is solve problems every decision that's made here should solve a specific problem or set of problems for users there are annoyances and problems with setting the stack up like getting tailwind and next isn't too hard but you have to do it getting trpc and next off to play nice is annoying having prisma next off play nice is annoying as well getting all three of those to work together can be a [ __ ] one of the benefits of this is we solve those problems for you through create t3 app we i shouldn't say we the other 19 contributors put a lot of work into doing as correct as possible bindings between these pieces and boilerplate to set them all up so you don't have to worry about that relationship between the parts you just start building we solved all of those problems but we're not solving things that aren't problems like installing z standard redux you can npm install those we don't need to include those in the boilerplate anything that's one command go run your one command but we're not going to add things that have setup certainly not ones that we don't like specifically i don't like somebody a storybook i hate storybook no and do you know our testing philosophy no anything that's like testing related that's going to be very specific to your use case that's your problem go go solve that in your world solve problems everything we do here should solve a problem in a meaningful way bleed responsibly this is the one i'm probably most proud of clever wording and phrasing here i love new [ __ ] new [ __ ] is awesome i i see people using new [ __ ] in places that are unnecessarily risky way too often things like your data layer that is not a great place to bleed if your database screws up you're probably [ __ ] so with responsible bleeding it's important to pick pieces that if they fail don't scale or otherwise have problems that get in your way building an application you should be able to swap those out there are certain pieces where the swap is terrifying like your data layer that's not a good place to be swapping all the time but the binding between your back-end functions and your front-end calls to them you so using something like trpc isn't that risky because the vast majority of the code you're writing is code you have to write anyways the benefit though is it's way faster to write it and make sure it works and then if trpc itself fails you abstract that out and move to a traditional rest api or graphql or any of many other solutions trpc lets you call your functions on your client with type safety as simply as possible and then most importantly we will never compromise on type safety one of the big benefits of t3 in the stack and the way i push building is your types are correct and correct through inference from your back to your front you can't call for data that doesn't exist you can't stop returning data on your back end that the front end expects the type safety prevents whole categories of errors in problems that are common in web development and i think it is one of the most important parts of what we built that you will never ever have to worry about that if you start on and stay on this tech we went as out of our way as possible to make sure full stack type safety is a guarantee type safe tailwind is prettier and an eslint rule it's not too big a deal [Music] 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




## The Thing Nobody Says About TypeScript - 20230615
if you all know anything about me you probably know that I love typescript it's a phenomenal language except let's be fair is it really a language typescript can't be run you can't take typescript code and run it you have to transpile it into JavaScript before it can run because typescript isn't a real language typescript is a way to write JavaScript with a bunch of additional syntax and in the end effectively typescript is a linter it runs over your code what does this mean and how does this affect you as a typescript developer let's talk a bit about it first I think it's important to define a linter the term linter is usually used to describe a process that runs over your code to check for specific things lenders can check for anything from are your semicolons in the right place to are you using tabs correctly to are you awaiting your promises when you execute them in all of these types of things are where linters are really strong typescript doesn't seem like that though right like its role isn't to check your code wait kind of is but its role isn't to tell you how to write the code wait it kind of can be and here's where things start to get blurry a lot of what linters and things like eslint have traditionally been used for has a lot of overlap with the goals of typescript and in the end both of these things are trying to make it so that we as developers can think less about the rules that can be programmed away out of our minds and that's why both eslint and typescript are so strong in such essential parts of the stacks that we build in because there's a bunch of different things that can go wrong in our code that are pretty easy for a compiler and a checker of some form to notice catches on like if we have an import that's not being used or we don't have an import that is being used these types of things are relatively easy for things running over our code to check and catch as we write it and this is where typescript strengths really shine is what you get when you run typescript over your code You could argue that only half of typescript is a linter because typescript has two very distinct Parts one of those parts is the compiler that converts typescript into JavaScript and one could argue that that compiler's mere existence means that typescript isn't just the linter it is a compiler it is a language it is a way to write code that becomes different code and in being just that it is a language but the value that we get out of typescript is not from the compilation step the value that we get from typescript is in the checking step because you can compile your typescript even if all your types are wrong and still get JavaScript output but the type Checker is a separate thing that lets you know when your expectations and assumptions around your types are wrong it actually gives you the red squiggly lines that we've all grown to know and love because typescript is two parts it is confusing to categorize and Define in these ways it really was different in that sense from day one typescript was both a compiler and a syntax Checker and most of what we associate with and think about when we talk about typescript is the syntax and the checking that comes with it and as such most of what we are experiencing when we use typescript every day is not the typescript compiler or language it's the typescript linter because of that I think it's fair to say typescript is just the lender because that's how we experience it if you like this video and you want to hear more about the weird and incorrect ways people use typescript got a video about all those right there if you want to check it out thank you guys as always peace notes




## The Thing You Missed About TurboPack - 20221107
foreign turbo pack it's the hot new thing if you've been on Twitter much the last few days you might have heard about turbo pack versel has taken on the really bold task of rethinking the webpack and bundler experience for web applications in Rust yeah that's right we're rewriting all of our build Tools in rust from scratch to see if we can eke out some performance wins wait haven't we already done this like four times what about Rome what about V what about all these other tools for speeding up our builds es build swc what's going on here and why does turbo pack matter let's talk about it so important thing to know about turbo pack is that it's created by the same team as turbo repo if you're not already familiar with turbo repo it is a mono repo tool focused on typescript applications that is very very fast not just because it was written in golang and runs fast but more importantly because it takes a lot of advantage of caching and that's going to be the key word here caching turbo repo hashes all of the pack packages and all of the build steps you create inside of your repository so when you make changes in the future it can just grab the outputted result rather than having to rerun the entire build for every chunk of your code base in every package in your mono repo this means you can have a much faster experience building re-running making changes filing PRS and all the other things that you have to do as a developer working in these big projects the most important piece here though is that that cache is not something that is just on your machine it is for now hosted on versel if you choose and you can link your resell account to your CLI and to for sale itself and now everybody who builds the project be it they're building it on GitHub they're building it on for sale or they're building it locally we'll have way faster builds as it fetches a cached entity with the built object and binaries rather than having to do everything yourself and wait for those builds to pass this is huge however this is only happening at a package level so if you have a project with many different packages and you've chosen to break up your application patient in that way individual packages can be cached by packages they depend on changing would break that cash and a fresh build would have to occur because of this relationship the the graph nature of even properly broken up applications you might still find a single change busting a lot of your cash because it's in a dependency that a lot of things have however what if you could cash on a more individual level like let's say an individual file level then you could theoretically do a lot more and this is what's interesting about turbo pack it's not that they wrote really fast code and magically there's thousands of times faster than everything else the true magic of Turbo pack is in its caching layer and how that allows for your performance to scale as your applications get way bigger if you compare the speed that Veet and turbo handle 10 files changing in a code base they're going to look very similar but if you change those same 10 files in a code base with 50 000 files in it that's when we're really going to start seeing the benefits of Turbo pack because of that it's a little hard to Benchmark because the Benchmark depends on how many times you run it how reliable the cache is and more importantly what changes you're actually making the cold time comparisons for a fresh clone of a turbo pack project versus a fresh clone of a Veep project both without access to a cache are going to be very similar turbo might win some Veet might win some they're generally pretty close but once you have that gigantic cash inside of a more gigantic project that's when you're really going to see the benefits of something like turbo pack all of that said there's a really important thing to know as we take a look at turbo pack it's incredibly unstable we're nowhere near shipping turbo pack in production just yet they don't even have a production build option in it yet it's still very very early I am hyped for what it could possibly be but we have a long ways to go before we're there and I want to make sure we are realistic about that as we look at turbo pack and evaluate it as an option the benefits of Turbo pack are that caching layer in big projects but it is not ready to use for even small projects yet so be hyped on what's Happening similar to something like bun where it's clear that there are obvious powerful wins there and if it gets to a place where we can use it we should but that doesn't mean we should be using it just yet we should be hyped on what's coming we should be excited keeping an eye on the repo keeping an eye on the core team and the things that they're doing but we shouldn't be going too out of our way to adopt something that early sorry Prime anyways this is quite a rant appreciate you all a lot if for some reason you're still not subscribed please fix that button is here to be white now because YouTube redid their UI please hit it this fancy little animation now too if you haven't seen that just yet like the video If you haven't leave a comment if you enjoyed it hope to see you in the next one thank you nerds




## The Things NextJS Doesn't Do - Application Lifecycles Rant - 20221103
foreign absolutely I do we're already working on some fun things with it it will there's yes it will be very useful it has its own batching stuff that is fantastic it has a mutation layer it has a better cache layer it has a bunch of things that aren't even considerations of server components and next 13. actually let's start with this what I want to talk about for a bit here is app life cycles next 13 in the relationship between all these things next 13 is a massive change the ways in which we Define the structures of our applications and render them on the server is fundamentally different it is way easier to fill your application with data correctly both data that the server generates as well as data that the client generates so if we have like one of my favorite lines where on one side we have the server and on the other side we have the user on the other side what next JS was doing was this area here fill this in next rendering content so yeah I don't necessarily like that so there's the server we'll say that's on AWS or something like that so here we'll have AWS we have like versel as a layer in front then we have next and we have react or we have the HTML that the user gets then we have react AWS and versl next JS react HTML Dom user so a user makes a request that goes to the liver cell system or servers that are really just AWS servers they run code which is your next JS code and then that has react within it that creates HTML and Dom entities I'm liking this way of doing this lesson less I'm trying to rethink this one this is this is a hard thing to communicate we're going to do it through the history of a request so we have a request that the server receives and it has to respond to so for the server to respond to the request it has to process it which will just count as part of the request it has to identify code to run for request then it runs that code and yeah I'll just say run that code is that code to generate response and then send response to user most of what we talked about at nextconf was very specifically this area here so between once the request is processed and stuff is sent to the user this area has been optimized a ton it is way easier now to build pieces and it is way easier to componentize your routing your data and your components in a way where you have a much more logical structure for how the server generates the first set of data in the HTML for the user but there's an important thing it doesn't do and the reason I drew this diagram is that this line doesn't stop here this keeps going so we have the user but what we have here is a long lived session and once this first request has gone through so in the middle here it's uh first paint all of what we've talked about so far is first paint how we get the initial data to the user it's not how we update it what happens when the data that we fetched is mod or changed because a user makes a mutation locally let's say there's a form so in this case the user is updating their profile data with a form so at this point the user has content at some point here user inputs data into form user submits Farm to server client update updates with new data so if I have a page let's say that has like my user info on something like Twitter where it says my name my username my handle my description or bio whatever and I hit edit and I change those things what forces the components underneath to actually be different when I hit save none of what next talked about today does that none of the not today yesterday none of what next.js talked about and the Versa team talked about at nextconf addresses anything past this line I think that's very important to understand when we talk about next 13 and all of the cool things that are changing with it they are much more app friendly now but they are not more app friendly in the long-lived session sense they are more app friendly in the architecture of an application up to this point sense Something Like Remix is much more cognizant of this side too and they have a very prescriptive way of doing that that I don't necessarily agree with but remix cares way more about this side and we have not seen any of that here that doesn't mean this is bad it's actually really cool stuff and I want to talk a lot about it but I want to make sure we have a shared understanding before we go in of what next does next JS does this not this hopefully this makes things clear and when I get asked does this change T3 stack no because T3 stack is much less concerned about this side and way more concerned about this side in fact we actually up until now have kind of recommended ignoring this part as much as possible because what this part is is get server-side props and if we can instead of using get server-side props to generate that first pass on the page we can have static pages that have minimal data that is then requested updated and managed by the client as simply as possible through things like react query things like trpc things like good web hooks or websocket providers that's what this side is and we have kind of chosen to compromise this part in order to make this part as good as possible that is the thing that is so exciting right now is with the New Primitives that nexjs is providing us with version 13. it makes way more sense for T3 stack to do stuff on this side finally and hard to justify for a while but now we can and I am hyped [Music]




## The Truth About Bun - 20230914
sure you all have seen by now that buns the new hot thing countless videos tweets benchmarks and more seems like bun is not just the future it's the now in a lot of ways it is and I'm very hopeful for a future that is focused around bun but that's not the whole picture a lot of things that I don't think we're mentioning enough when we talk about bun I want to talk a bit about those scary truths the unknown truths and the uncertain future of bun let's talk about all these things that no one's saying the first ones I want to talk about are naming because I don't think I get enough credit for being early on bun kind it's silly but I pushed way back in like I think it was like June or July last year that the bun run time should absolutely be named bun time I know it's silly but with bun being a compiler a package manager and a runtime have some funk the names regardless that's become the number one piece of feedback that poor Jared gets now so they understand they screwed up they've learned their lesson but another name people don't seem to understand is fun it's not named after bundlers it's not meant to just be a code name for bundle well it kind of is same doctor my friend kept release bunny Kip actually brought bundle to the bun launch event which was entirely unexpected been hilarious to have the bunny that started it all at that event buns named after bundle the bunny regardless those aren't the things we're here to talk about I want to talk about the more important details of how bun Works something I saw a lot of pushback on was the difference in install times between pnpm and Bun specifically a lot of people were commenting on how the speed of the network is going to become the bottleneck when you're doing that type of stuff but why is the network the bottleneck both pnpm and Bun cache and when I'm comparing the cache performance pnpm's cache is significantly slower than bonds where bun can install something in under a third of a second and pnpm takes six plus seconds both with cash is populated it's actually one of the important details that I think a lot of us missed that catches you in specific places fun doesn't check the network to make sure the packages it has are the correct versions so if you specify use this version or greater or you specify Canary or latest as the version of something fun doesn't do a network check to make sure it is actually the latest version pnpm before it runs will always do a network check to make sure the versions it has cached and it's going to install are correct based on package.json naming and design decisions one of the things they were going to do to solve this and get to skip a network request was default to the oldest version that honors the key so that if it's a specific version that's carrot tagged it doesn't have to check for a new version that follows Ember it can just stick with that one but as soon as they made that change a lot of people were upset this is going to break behaviors and expectations around installing packages so they reverted that change almost instantaneously bun is a fresh start and because of that they're not going to get the same level of critique when they make these types of decisions to not check the network when they don't necessarily have to this has already bit us with create D3 app if you've run it with crate D3 up at latest before is going to use the version that you did before even if there's a newer version since so things like at latest tags when you execute with bun are effectively ignored which really really sucks I've already brought this up with Jared it seems like they're going to fix it especially for the bun X use case but it's still an important thing to know when you're using bun that cache is performant in incredible and experience that it is it does have edges that you have to pay attention to there's also a huge part of why it's so fast because they're making these types of bold decisions to avoid whole i o paths that take much longer than just grabbing things from your file system I also made a mistake in my bun video where I talked about the files being copied on Mac OS versus linked on Linux specifically most of these package managers with a cache they reference that cache in the node module so they don't have to copy paste all of the modules all over the place there is a built-in Link in bash and in most Unix systems where you can Sim link a directory to another directory so when you access things in it it just hits another folder but the built-in Sim linking that is used by almost all of these things it's not very performant on Mac and as such they're using the Clone file API instead on Mac which might sound like it's copying the files it's not it's a really strange way of copying a reference to a file that is kind of Unix specific I think it's support on other things but it's not something you should use very often it's at this level that you see why bun is so performant because buns Focus isn't doing things the way they were 4 but faster it's at a fundamental level what's the fastest way to do this thing what are the things that are costing us milliseconds of time there's even a tweet which I should find quick the reason bun is so fast is these insane optimizations that they're making things like setting up an enum of tagged pointers instead of storing the function pointers separately it's a tiny overhead difference but when you're making these levels of obsessive optimizations internally the result's going to be insane performance and it's this mindset where every single step when given multiple options Jared would ignore those and make a more performant option because none of the existing options were fast enough and this level of understanding of system chaos is a huge part of why bun is as performant as it is it isn't just because they're using Zig it isn't just because they're not using V8 it isn't just because it's machine code it's because of this mindset this Focus from the very start to make everything as obsessively performant as possible because that's buns differentiator as Mateo from the node team says here it's this level of obsession with every single tiny Edge for performance that makes bun as fast as it is the reason bun is faster than node isn't because node's Engineers suck or they're not trying hard enough it's because bun started from scratch with a lot of focus and energy on making a new from scratch performance solution and the node team is a handful of unpaid open source maintainers that have been working really hard for well over a decade now to maintain support and compatibility across a gigantic ecosystem of people using node in all sorts of ways usually incorrectly and that huge burden has fallen on Mateo and other members of the core node team that sucks because they're not being compensated enough for the work they're doing whereas bun is VC funded there is a lot of money poured into the bun and oven teams in order to help them take this time to pour this extra effort and focus in on a new from scratch solution I don't think node Can Have A Moment Like This simply due to the nature of the role of node because node can't break all of these things they can't break how package Json resolves stuff they can't change how the internal memory is managed around tasks and pointers they need to make compatibility work they need to fix fetch they need to do so many other equally important if not more important things but if node doesn't succeed bun doesn't succeed and vice versa because the goal of bun is to show us and help us experience a node ecosystem with an obsession around performance and anybody talking on node right now does not understand how important note is for us getting here and also how much the core node team understands and appreciates the work that Jared and the rest of the oven shun team is doing this is an ecosystem and both are part of it and both sides appreciate each other so don't think bun shows how incompetent notice so much as bun is an incredible example of really really performance focused developers making something we didn't think possible but we do have to talk about something I touched on there a bit which is the reality of bun being a VC funded company and what that means for the future of fun I think the future of bun is on uncertain for a handful of reasons one of those reasons is that it's a zig code base Zig is an incredible language that's enabled bun to do so much but it's also going to be a barrier for contribution we saw this with es build which is a similar bundler focused on making it really really quick to turn your typescript files with a bunch of packages into runnable esm JavaScript code es build was written by the CTO of figma to solve the performance issues they had with their bundler chain and he wrote it himself in golang because that's the language he knew and that's how he could make it as fast as possible when we look at the contribution chart for ES build you'll understand my concern really quickly hopefully this clarifies my concern es builds isn't really a team it's Evan Wallace and a bunch of other people who are helping contribute but like realistically the second biggest contributor having 13 commits plus 400 minus 50. this is Evan's project this is scary because if y'all haven't heard the term bus factor it's How likely is something to survive if one person gets hit by a bus I don't think I was gonna get hit by a bus anytime soon but man the whole ecosystem would collapse if he did because all of Veet is built on top of es build help all of remix is built on top of vs build too there are so many things that have es build as a core dependency the I guess is the person on node focused on performance he's a part-time unpaid contributor to node working really hard to make it performant enough to be a viable Choice the reason I'm on his Twitter right now is this tweet this is a very real problem this is a problem we have seen a lot in open source where we have a crazy amount of things built on top of some person's one-off side project this is a legendary XKCD and the person in charge of performance for node posting this is very poignant both because he's the person thanklessly maintaining this thing and also because we're having this problem all over again when we look at the reality of es build and its contributions if we look at buns GitHub and again I think bun is doing better with this I haven't actually checked the numbers though this is way better but let's be real here what happens if Jared stops coding he also has a company to run and I know as a Founder who runs a company and a YouTube channel and used to code disgusting amounts if we go to my profile on GitHub see how much more consistently I was writing code in 2021 you can even see when I started doing the company stuff much more here this is when I was working on like my YC pitch this is like when I got into Y combinator and was doing all the business stuff 2022 I was grinding a bit more because I was writing a lot of the code for Ping but getting more and more into like the company management too because we had to run company stuff and in 2023 yeah I'll be doing a lot more things outside of just writing code and this is a reality of running not just any company but a venture-backed startup is that you are expected to continue scaling your business and brand you're expected to find a path to profit and to run a company and to do investor updates to hire people to run a business and that's time you're not spending coding and if right now the majority of code is coming from the person who also has to make the majority of business decisions you'll get to a point where those things conflict Jr has done an incredible job managing this thus far but he's largely done that by working absurd amounts of time and that is a risk and we need to be real about the risk here for comparison's sake here are the node.js contributions there's a huge variety here obviously Ryan the original Creator did a lot at the beginning but quickly has been surpassed by many other contributors I have heard both anecdotally and from looking through here that it is absurdly difficult to even break into the top 50 node contributors there's a lot of work going on from literally hundreds upon hundreds of people to make note as great as it is oh look here's a nun node has survived over a decade now because they've managed and mitigated these types of risks really really well they've built a solution that has its problems but works incredibly well they built one of the strongest ecosystems in one of the strongest package Management Solutions ever seen before it and to this day I'll die on the hill that npm is better than almost anything that came before it and we're only just now starting to see things that are slightly better we have to be realistic about these risks and we have to understand the difference here between a venture-backed alternative with a lot of money a lot of energy and a lot of inertia versus something that's being maintained by free open source contributors that have been maintaining it for 10 years and plan to for another 10. the biggest risk right now isn't even just bun failing it's all of the fud and all of the complaints demotivating people on the Node side too there's potential damage outside of the immediate blast radius of bun that I didn't even expect I honestly could not imagine the node team getting for bun because it seemed like bun was obviously this new really cool thing but here we are I wanted to loudly voice support of the core node team because they are working incredibly hard and there are fundamental differences in structure incentive longevity and likelihood of success between node and Bun this does not mean you shouldn't use bun and this certainly doesn't mean you shouldn't be hyped about bun but it absolutely means you need to stop talking about the node maintainers who are working so goddamn hard to make all of this possible and if it wasn't for node succeeding the ways it has we wouldn't have buns started in the first place so know that when a venture-backed company has really energetic people Reinventing things from the ground up that is dope and awesome and we should be excited about it but the incentives are different we don't know if they're going to succeed or not they're going to have to find some way to make money in order to keep going VCS won't just keep pouring money in I'm confident they can do that I have a lot of faith in Jared not just as an engineer but as a leader good Faith and Hope and confidence even isn't enough for an ecosystem to succeed so if you're betting on bun right now hell if you're relying on bun to make an unperformant path in your code based performant make sure you have a backup plan don't use bun and let that put you in a place where you ignore performance issues don't use bun and quadruple the number of unit tests you have because bun runs them faster use bun because you're excited about this new technology and you want to make the bet it's not a Bad Bet to make but it is a Gamble and there's a reason node has survived as long as it has I think that's all I have to say about this I still will be using bun and a lot of stuff I'm still friends with Jared I think it's super super cool I just want us to be responsible with how we talk about these new technologies and I went a little too far with my own video on it so be responsible with your Tech choices I'll pin a video in the corner here all about that because I think we're always making gambles and Bets with our Tech it's important to do such responsibly what did you think about this is bun overhyped am I going to get a lot of because I think we have to be responsible here button is great you should use it you should use it responsibly thank you guys as always appreciate you all for sticking by for this one let me know what you thought peace nerds




## The Truth About Code Performance (Sorry Prime) - 20230607
Building Solutions at scale is very important but not for everybody I see a lot of hype on things like rust and golang and all these new really performing Technologies and Frameworks and solutions that allow your code bases to scale to millions of requests per second at really cheap rates where if your servers cost you 100 million dollars you can get those costs down to 5 million exciting as it is to have these conversations I don't think most companies need that even the big ones you might think do I want to talk a bit about when it makes sense to hire Specialists and do things the right way because I don't think the right way is always right let's talk a bit about what I like to call the lion of prime so there's a lot of things we need to think about when we build applications the most important one is does it solve the problem the user has and that's not as simple a thing as it might sound it's not just did we get the right features out on this app it's did the features we pick make sense for the user and did the problem we thought we identified need to be solved at all it takes a while to know that your solution is the right solution even at scale and I'm talking about technically as a at the right solution I'm talking is the problem you solved correct and is the concept of what you built right and until you are sure that the way a thing is being used is the way it will be used for a long time it probably doesn't make sense to write it using things that make it harder to maintain and iterate in the future because if you pick a set of features and then those need to change and you built it in something that's hard to iterate in good luck have fun but I want to show this on a chart so the way I like to think about this on the vertical axis we're going to have number of new features being built so when something starts it probably starts really high in terms of the number of features being built and we'll have on the axis here amount of use the service gets when a new application is being started you are almost certainly starting here and as you get your first users you're going to be constantly changing what feature set you have it is very very rare even at a big company that when you build something new be it a product a feature a service or any of these things but the first time you build it it's going to be built correctly it's really hard to be certain so it's important to pick our technology accordingly and as we go over time what I almost always see happen is the number of new features needed goes down as the number of users goes up and over time we'll see a trend something like this where number of new features and amount of iteration on the core of what you've built goes down as the amount of users goes up so if we were deploying to something like Ping the video call service that we built for streamers when we first started we didn't even have our core big feature the browser embeds so we were constantly trying out new things new ways to integrate with OBS new solutions for building that layer the rate of new feature building in general iteration on the code base was really high over time the number of new things we were building started to go down our Focus was less on new features more on stability and the amount of requests going to our services started getting a lot bigger it's not big enough to justify making significant changes but you will eventually get to a point where that is the case another way to think about this is there is a line somewhere and it's gonna be different for every code base in every company and every use case there's a line somewhere here horizontally where you can save a lot of money where before this point if you're using a sub-optimal solution like let's say you're using a really slow old typescript code base on the left side here your server cost might be under 100K a year we'll say under 200k a year and on the other side might be over 200k a year and if you have the possibility of hiring a person who can rewrite the essential pieces that are being run enough to cost this much and can pay their salary just by importing this over that's probably worth it but that will likely come at a cost in terms of how fast you can move and at that point in time you might actually have to stop new feature development entirely so for some projects and some developers the point where you are no longer iterating on features might be really early and you might have something like this where you've stopped building features your costs get too high you rebuild to move to the optimal technology you can still add new features you're probably not doing it as much and it's probably not as fast to do but you also have to hire more expensive people to do that and generally speaking some technologies allow you to move with small teams very quickly and other Technologies let you move with bigger teams slightly less quick every company and every project should think about what their long-term feature creep and iteration is going to look like and Define a point where it makes sense to start converting things I think that point is usually going to be both vertical and horizontal where you're like okay our API is stable we now know we're always going to return these things so if we have like an API endpoint that returns a user object we wrote that in typescript and now that user objects being called from that endpoint hundreds if not thousands of times a second and our typescript endpoints are being scaled across Lambda and are costing us thousands of dollars a month just to get this user object we could cache it and do lots of other things we could also rewrite that endpoint because we know the API is stable once we're confident about what a user is going to look like and we don't necessarily need it in the same code base that we're fetching from we can start moving out these individual things as they cost more so think of this almost as the stability of what you're building and the API layer of what you've made against the amount of use that it gets somebody said isn't the x-axis just time and it is absolutely not time because some some projects will scale to millions of users using really simple attack without any cost if they're just static deployments in the end but there are some projects that do crazy things like machine learning where 100 users could cost you thousands of dollars a month it entirely depends on what you're building how much this x-axis even exists much less how much it costs as you Traverse it because for some companies as the amount of use goes up their costs don't go up a lot but for others they go up monumentally for us at ping the costs of our services haven't gone up a whole lot even though we've been ddosed for terabytes upon terabytes of traffic in minutes and that's because the models that we've built with the caching that we're using in our focus on building Simple Solutions keeps our costs and our iteration speed really low but I could absolutely see a future where we want to rethink how we're doing that and take certain things we've built and move them to a more performant solution this line that I drew earlier what I like to refer to this as is the line of prime I call it that because our good friend of the channel primogen is a fantastic person to hire when it's time to start saving money the difference here is prime is who you hire when you're trying to save money there's also arguably a line here which I'll call the the T3 line I actually call it the Theo line and this Theo line is the point at which I and my way of building stops being as useful to you if you day one are building an API and you know exactly what the shape of that thing is going to be and you never have to worry about changing it in the future you don't need to listen to most of what I say most of what I say is for people who aren't necessarily sure that the thing they're building is going to be correct next year and they want to be able to iterate quickly make mistakes and clean them up fast and onboard new engineers and new team you don't know if next year your team's going to be zero people or 20 people so you just want to get moving and get there that is how my technical decisions are usually made it doesn't matter if you're a small company or a big company every project has some amount of uncertainty this way at some point in its development cycle and I like building around that because it's our role especially as tech leads to prepare our teams for the uncertainty that makes the job so hard so there's a point here where I would argue above this line everything Theo says is very useful so in this range here Theo makes really good advice in this range here Theo is probably doing more damage than good in the same Vein on this side Prime is absolutely incredible and his way of doing things needs to be listened to more I've heard some horror stories of obvious huge money savings he could bring places he works that were declined because leadership didn't understand his role arguably and when you hire somebody like primagen the best thing he can do is identify inefficiencies in your systems and correct those to save 10 times his salary every couple months and that is a great reason to hire somebody like him to make the company and the team more efficient while also reducing costs and finding a balance there for things that need to scale but on this side before your costs are at that point I don't think his advice matters as much and I get a little bit heartbroken when I see startup after startup building relatively simple web apps using kubernetes and rust and golang and terraform and all these Technologies even big companies adopting those things in places that doesn't necessarily make sense I'm surprised the number of big companies that have recognized this and are starting to use stuff like create T3 app in production I know at least two fan companies have explored and used create T3 app for some internal stuff and it's really cool to see that even big companies recognize that these lines exist and it's important to understand that ICT saying I'm conflating Prime stuff a bit because he doesn't recommend kubernetes which is great and I also don't recommend hasara and there's definitely things that fall on the side that I think are terrible Technologies and I push back on really hard there's a lot of those but it's the the essence like so like T3 is For Better or Worse on the same side here as SRS and I don't like hasara and I really like T3 whereas over here I would argue that rust and kubernetes are here and that's not because I think Prime likes both of these things it's because I think both of these things solve problems that you don't have when you're getting started I'm not saying these problems aren't real I'm actually saying these problems are very very expensive and an engineer like Prime will probably make a lot more money than me in his career as an engineer because he is solving expensive problems I'm arguably solving people problems my Tech is largely picked based on the teams that we're working with and the needs of the people that we're serving and the team that's building it whereas the focus of somebody like Prime is more how can we not blow up our service every time we ship something new how can we have our first 10 million users on a new thing and not have it fall to pieces I also saw somebody mention this top right corner is you're screwed which is absolutely true this corner here is a nightmare there's kind of a political alignment chart here where we'll say right here is tons of traffic here is zero traffic and then on top here is fast iteration and down here is slow iteration and what I would argue is where I live is this corner and where Prime lives is this corner and that is not a problem where I get concerned is when people live in these other Corners like I've seen a lot of people out here where they get no traffic and they're building gigantic things they don't need to like kubernetes for your blog would be here and up here would be Google sheets as DB for a production service this is roughly the alignment chart I'm seeing here and again to be clear to be very clear this good this also good this pretty bad this very bad does this help have I made it clear how I think about these things I'm actually genuinely asking I haven't thought about this diagram ahead of time tiege made a fair point that there is arguably a z-axis of does it keep working over time there's two types of does this still work over time there is as the traffic goes up does it crash or not and there is as people go back to this code base in six years can they iterate in it or not and both are very valid concerns and I address the primer much more than the latter I have code bases that are a year old that I don't want to touch because there are new patterns I like much more and going back to the old patterns just makes me sad and that's absolutely a real problem I I create a decent bit of tech debt should I reframe this as in defense of tech debt that might be a good framing so I said if you read this correctly Theo's authoritarian left and Prime's libertarian right no comment so one thing I do want to clarify more is people keep saying that like cost should be an access no tons of traffic and Tails scalability cost reliability that's what I'm assuming when I say tons of traffic is that your need to care about these three things starts to matter a lot more and when I say fast iteration what I mean is finding product Market fit quickly fixing bugs moving targets unsure of or just I could just say uncertainty in general so like if you don't know how many Engineers you're going to have how well this product is going to do how well received it's going to be if it will even be approved or not if users are going to like it or not if users are going to use it a lot or not if user can use it at all when you don't have certainty in what you're building iteration speed matters much more that's everything from Bugs to team size to users uncertainty means you should be iterating fast once you're more certain you should be comfortable picking technology where you iterate slower people are saying Prime candidate fast he can but he fundamentally cannot move as fast as what the ecosystem in typescript for example enables and things like versel and what they allow me to do I'll give you guys an example I'm going to write some code now and then scale it in a way where it cost me 65 cents per million requests across the entire world and I'm going to show you how easy it is for me to do that using my stack and this scales to a million requests a second or a million requests a year and it costs me accordingly regardless so let's go make an endpoint that we can scale to a lot of people there's already one here we're gonna make a new one let's do Test new file route.ts export const runtime equals Edge export const get equals async and we could do whatever we want to with this request this is just a hello world example obviously but I can do a database call in here I can use something like Planet skills database.js to read and write SQL commands I can validate that all in here I use this type of syntax to make a lot of API endpoints a lot of the time and now that we have this working I can add that working API I'm gonna test this I know it's going to work and then I can vert MPX for cell play I don't usually use it for cell CLI I just use GitHub but uh it's easy enough to do so without my personal existing Edge demo I need to modify the Oink the Oink and in not too much time we should have a service that's deployed to the edge creating the production build now any moment now oh I left type checks and linting on in the um project on versel so that's why it's a bit slower than my builds normally are I try to aim for builds under a minute as often as I can take one second to deploy on Dino deploy sure but the code wouldn't be minified build steps are fine build steps are good even should be done now cool Edge demo Kappa that's actually hilarious that it happened to pick Kappa for that now hello world and this runs on edge dynamically on every request can scale to millions of users if the ddoser is watching go ham it's not permission you shouldn't destroy my endpoints for fun and but the the point I'm trying to demonstrate is like if this was to be spammed which it probably is going to be we're fine it will cost money it won't cost that much money and it lets us move that quickly we can very very quickly spin up and scale services to millions of users without really leaving our Dev environment at all and I want to emphasize that point in particular I'm not saying Prime is a slow engineer here at all he's an incredibly talented engineer that ships very very quickly despite a lot of the Technologies he uses I'm not saying that rust makes you inherently slower than typescript or that Russ is a worse language than typescript I'm saying rust makes you consider things more and deeper as you're building and the ecosystem for rust packages just isn't moving quite as fast as things are in typescript land not just packages but the deployment systems the things like versel if there was a verse of rust that was making it really easy to two button click deploy things at scale that'd be dope but it's solving a different problem it's solving the problem of making sure your service is performant memory safe and can run forever another thing I would argue is on this side something like serverless makes a lot of sense and here well orchestrated VPS makes way more sense but serverless lets us not worry about our systems as we iterate anywhere near as much but it will cost us more money but over here you'll have to move slower because your deploying services and worrying about the relationships between them and making sure you have enough services and that you have a Gateway that can spread traffic accordingly across all these different services and all these other things it's important no matter how big your company is that you're willing to adopt the Technologies to let you move at the right speed for what you're doing there is the harsh reality that some projects just happen to start on this side and like a lot of what prime does starts over on the right here because he's working at Netflix and Netflix has pretty insane scale that they're working with and most of what Netflix is doing isn't building crazy revolutionary new features or trying to find if this thing they're building is worth it or not but I would argue with like the video game stuff that Netflix is doing they should probably be on this site a lot more because that's very experimental and they don't know what will or won't work and from what I know the video game stuff that they're doing at Netflix very much does live in this side of things and that has been how they treat it when you're trying to figure out how to scale your service that you know works the core video infrastructure and you want that to be cheaper because it costs you 100 million dollars a year doing things this way is not optional it's irrational to not do it and I want to make sure when people take advice from both Prime and myself that they're considerate of where we live in these Dimensions when we do that that's the goal of this very specifically is here is where in the product life cycle I make more decisions and this is where he in the product life cycle makes different decisions somebody asked in chat is move fast and break things really best for society yes absolutely without question it is essential as a society the rate at which things have improved now that we're able to confidently fail and catch up that we have computer systems that are so powerful that bad code can run well I think I've made it pretty clear where I stand here move fast and break things is not just for startups it's for anybody who's not certain that the thing that they're building is in the perfect correct exact State that's what this section is for and then down here is once things are stabilized my ideal and I've brought this up before if the products that I've built do well then I want to have to hire Prime I want my products to get below this line and across this line everybody's goal should be to be where Prime is here everyone should want this for everything they build you should aspire to get here but you shouldn't pretend you're already here when you're not these sections are too common and these sections are very good somebody else is there a role that keeps track of one you should move from left to right no I think almost everything should start on the left unless you're starting with a lot of certainty on the top here is uncertainty on the bottom here is certainty left here is low cost and on the right here is high cost you move when your costs go high enough and your uncertainty gets low enough somebody said the line has a lot to do with the capabilities of your engineers absolutely not I think the specific point where it occurs might well I would argue this is more about like the hiring decisions where from this point onwards the way that we hire needs to to be a little bit different like right now I'm hiring people that I find off GitHub doing crazy things with typescript but in the future I might need to lurk primes Community to find really performant optimized people to take a service that we have that's dying all the time because it's getting hit too hard and have them show up and help us iterate on that while in the corner Mark and I are still building crazy chaotic new things and that balance is really hard to find I I don't agree that this is a capabilities thing at all I think this is like a hiring thing more than anything yeah somebody said start small and grow carefully I couldn't agree more and that's not just for startups that's also for small teams at big companies more and more companies are moving to Vertical slices where they have teams with a back end a front end and a designer all on like one vertical team building things their own way and integrating with the company maybe using some tech maybe bringing some of their own like I know Prime uses solid.js at Netflix and I know Netflix is not shipping solid.js to users because again different teams can build their own small verticals that solve the specific problems they're trying to solve and he knows that using solid.js lets him move faster with a mental model he likes more than react and not have to worry as much about performance issues that he might have had to worry about in react and I think that's a good way of thinking you should have a CTO that understands this and lives on the side that you're on and could confidently grow and hire people on the other side when you get there and that's what I think we have right now Mark and I are very confident we can do crazy things up here and we're doing some really crazy things up here but there will absolutely be a future where him and I have to look at each other and be like yo this sucks we need to rewrite this in something faster than typescripts we need to rewrite this in something more scalable and cost sensitive than Lambda but neither of us want to do it who do we hire at that point and I trust Mark to be realistic with me when that time comes and I hope that that time comes I genuinely do I would love to cross the line of prime someday but I don't think many people have and that's why I'm so concerned I see way more projects in this top right quadrant than I see in this bottom left one actually I opposite I see more projects in this bottom left quadrant than the top right and that's why I'm so scared I don't want people adopting Technologies for problems they don't have I want them to solve problems be confident in those Solutions and as their confidence builds and does their user base grows that is when you change your methodology with these things I think that's all I have to say here this has been a fun rant it's a thing I think about probably too much but I wanted to formalize this concept of the line of prime and how we think about technology choices as I build my own things and as I advise other companies and how they build too show this to your boss if you're being forced to use kubernetes somewhere where it doesn't belong and let me know how that goes for you if you want to know more about why kubernetes in particular is not a solution to much a video about how it's a liability up in the corner there really like that video also going to send your boss good chat as always peace




## The Truth About Google Cloud and Firebase - 20230723
have you ever used Google Cloud before statistically speaking you haven't because its adoption is pitiful you might have used Firebase at some point but even then it's not getting too much adoption nowadays the reason I'm talking about this is the pain of seeing more and more people going through with Google Cloud product especially recently what exactly is wrong with Google's Cloud well to put it simply they don't use it Google doesn't use their Cloud product very much at all they aren't big Believers of dog fooding generally most of Google's Cloud platform is stuff that someone thought was a cool idea so they went out and hacked it up to see if they could do it or not but every time I talk to Engineers both who have used Google's product or work at Google neither are happy with the experience that Google Cloud platform provides seems like the reason people go with Google is history of going with Google or some weird specific Edge case where they found a way to make Google cheaper than other providers and even then who knows how long those prices will last or even those Services because Google loves destroying the things that they build I want to showcase some of the bad experiences user have had some of the weird interactions I have had and most importantly the thoughts of people who work at Google on why Google platform is the way it is so the reason we are talking about Google Cloud today is the terrible experience Railway recently had Railways one of the heaviest users of gcp that I know and they are beyond ready to leave as soon as they can Google randomly automatically lowered their quota taking out all of their services and then refused to let them upgrade it for a while they ended up having to do a long support case their networking product just does not work for them they wait for premium 15-minute support to filibuster two to three responses to buy themselves more time just Insanity you see the rate limited we did five thousand in 10 minutes the quota was approved for 18K a minute them that's not the rate limit what's the rate limit not sure have to check with the team are you kidding are you joking like and this is just what it's like to talk to the team I want to be clear the Firebase team is pretty cool I've had great interactions with people from Firebase but holy [ __ ] I have had the worst interactions from gcp people this dude blocked me after this interaction I did a video about Heroku Killers he said give Cloud run a try and let me know if I still classify it as hard mode I said giving it a try now not off to a good start I couldn't figure out how to add a GitHub repo here it ended up being under some weird folded chunk later on I found it okay so I have to create a container and select a bunch of specs this is all to just get some code running found the GitHub button kind of and this page was just full of Errors just building an image required requires CSS padding is wrong there just couldn't get it to actually work I'd refresh the page twice to make it work what did enable build API or enable Cloud build API button do hang on a loading spinner now it just got stuck as a loading spinner and then disappeared what added off GitHub still getting no repositories available I had to refresh like six times oh look he deleted tweets yeah and as I said here you think this is easy mode I implore you to check out Railway I'm giving up already and I haven't even got a service made yet I literally got like 10 steps in and I couldn't get it to deploy what are you kidding that's not easy mode if your whole day is Google Cloud because you're an employee of Google Cloud maybe that's easy mode for you but for us mere mortals with real [ __ ] jobs it's not that simple and I feel bad bringing this up almost a year later but it seems like this is more so the experience rather than less it is really hard to take Google Cloud seriously for real workloads and I'm not the only one who thinks it Jake's not certainly not the only one who thinks that existing Google employees think this this is an article about how good Google is overall is a place to work and build and how much happier Stevie is at Google overall but there is a section down here that is incredibly damning the one last thing Google doesn't do well is platforms we don't understand platforms we don't get platforms some some of you do but you are in the minority this has become painfully clear to me over the past six years I was kind of hoping that competitive pressure for Microsoft and Amazon and more recently Facebook would make us wake up collectively and start doing Universal Services not in some sort of ad hoc half-assed way more or less the same way Amazon did it all at once for real no cheating and treating it as our top priority from now on but no no it's like our 10th or 11th priority or 15th I don't know it's pretty low there are a few teams who treat the idea very seriously but most teams either don't think about it at all ever or only a small percentage of them think about it in a very small way they just don't think about platforms the people who build Google's products that scale to Google scale and the people who build gcp which is the Google Dev platform are different people who don't talk or interact it's just different worlds and this is the experience of using Google's Cloud product it feels like they don't know what's going on and that's why it's so memed here and jokey to even talk about because Google's product just doesn't get it and it kind of sucks to see since I originally recorded this video there have been two big developments on the Google side the first is Google domains it no longer is owned by Google they sold it to Squarespace which is a fascinating decision everybody who relied on Google domains for things like dot Dev which they were the only provider of who knows what your future is best of luck as for the reliability of the cloud product uh we've seen some messed up stuff y'all are familiar with render they're another one of the new era Cloud providers they build on top of AWS and Google cloud and they had a massive outage because Google Cloud went down the CEO of render tweeted about this apparently they knew over four and a half hours earlier than Google did because they had better alerting on Google services than Google because again Google does not use their Cloud product and I really want to hammer that point home it's the reason why I made the video in the first place Google Cloud product feels more performative than usable and it doesn't seem like the people who build it build Google on top of it and that's going to result in lackluster experience no matter what Amazon builds everything on top of AWS they know their stuff works because they use it and without that same level of commitment from Google I just don't see any reason to take Google Cloud seriously I hope this video was helpful hope you like this crazy new space lots more videos about this coming very soon if you want to learn about which providers make the most sense in 2023 I have a video here all about that thank you as always peace notes




## The Truth About GraphQL - 20230603
graphql love it or hate it it did change how we do web dev forever it's hard to find a company that isn't at least considered using graphql for the work that they do graphql solved so many problems for so many companies twitch included and honestly graphql was a huge part of why I was able to make the move from back into front end because the schema gave me a method to communicate between the back end and front-end teams and for the first time confidently live on one side knowing the other side would do what it's supposed to as long as it worked to the schema and spec we agreed on the amount of comms problems between teams and companies that graphql solved is hard to understate it is truly incredible for getting your back-end team running golang and your front-end team running react to have a common language to build around and iterate on that doesn't mean it's perfect actually far from it graphql requires you to throw away a lot of the best parts of the web and it also requires a significant buy-in to get started in the first place there are projects like Apollo and Redwood that do their best to make graphql more accessible but I find that the result of those projects isn't and that they make graphql easier it's that the wrong people end up using graphql and the hard truth is very few people should be because graphql isn't a way to make apis easier graphql is a language for schemas that is pretty hard to implement correctly and if you do it incorrectly it's actually quite a bit worse than the Alternatives so how do we end up here before graphql there's a very real problem of backend apis returning massive blobs for any request so if you want a user's information it might return you a half megabyte of Json including all of that user's friends if you wanted a subset of that then a new API had to be made to dictate which subset of that information would be returned you had to get your backend team to build it agree to it ship it and then finally maybe you'd be able to assume that on the front end this process took forever and it was particularly frustrating when the data was already there and resulted in people just fetching way too much data for the vast majority of the things they were building the original goal of graphql was to allow the API to expose all of the data that you would ever need on the client and the client could use the graph schema to to select the subset of the data they want so instead of getting all of the user's information in like the 500 different values you might have on a user you can get just their username their profile picture and their ID and use those to render the profile image which is probably what you wanted to do in many cases graphql allowed for us on front end effectively craft the exact API we needed based on what the component that we were building needed and based on the feature that we were creating before graphql we had to do a lot of work to make the right apis we often just wouldn't do it a post in your news feed that's a video probably needs very different data than a post that's a text post or a photo album or an advertisement and graphql is invented to allow those different things to select the data they needed and know more or less what happens if you're requesting the wrong data in your app though you'll probably get an error and how are you going to deal with that if you don't have a good logging setup you're kind of screwed thankfully today's sponsor has you covered highlight IO is the full stack open source monitoring platform if you use any of the stuff that we've talked about here there's a good chance highlights going to make it much easier to solve problems that your users have if you're using graphql or trpc you get procedure level analysis you can see the graphql query right in the monitoring tool it's so nice you can play back a session and see what queries were made when and where the bug actually happened if you spent more than 15 minutes trying to reproduce a bug highlights going to make your life significantly better anyways back to talking about graphql and why I don't think you should use it as a front-end developer we immediately saw some significant benefits obviously we were fetching the right data for the first time we were able to do what felt like defining the exact API we needed immediately in the front end without having to spin up another repo learn another language and Bridge all of these gaps it also gave us type safety on what data we were getting from the server it required a code gen step to convert the graphql query into type definitions but at the very least you get that and we also had really good state in our components things like is loading error and the actual data obviously correctly typed we can get a lot of these benefits in other ways now though we can get the ability to redefine your API and have type safety there all through trpc you can just right click go to definition and in the same code base go from your front into your back end and adjust your apis or make new ones exactly as you need because an API is no longer this formally defined thing that has to be agreed on by a bunch of teams it's just a function that you call on your client obviously that's not perfect for everybody but it's clearly the direction we're moving in with things like react server components going very deep in that direction instead of fetching from an API we are directly loading data on back end and returning the correct HTML these patterns allow us to never over fetch or never really think about overfetching in the first place we just write what we need where we need it but what about all the other benefits the benefit of type safety we found through things like trpc or even type definitions on top of open API for iteration and writing the right API we now have trpc as well as react server components for the loading error in all of those States server components have helped a good bit there but honestly react queries been the real magic piece giving us the ability to have good Developers experience around any promise inside of our react applications there has been so much Innovation emulating and honestly superseding the benefits of what graphql gave us but there's still one thing graphql does that nothing else does as well which is Define a strict contract between your back end and your front end if I have a different backing team and front end team and they don't necessarily get along or even talk that much it's really hard to make product move fast and if you can get them to sit down in a room pull up the design that they're working on and figure out exactly what data is needed agree on what the schema should look like to get that data the back end team goes and does their thing the front end team goes and does their thing and then they can plug it all in that benefit is still not matched in any other system the developer experience wins that graphql felt were Beyond real in pretty much every front end leaning Dev that used it in the mid-2010s to early 2020s immediately saw the benefit of having your type definitions the correct data being fetched in all of these states managed for you in the graphql tools that we had because because of that I find a lot of front-end developers thinking graphql is the solution to all of their problems and then if they use graphql correctly they'll never have to learn or use backend and here is where we get to uh I think I've talked about a bit here one of the hardest truths graphql does not belong in your goddamn database please for the love of God stop pretending graphql is an alternative to SQL it is not the strength of graphql is between your back-end team and your front-end team having a method to communicate and build Tools around and it comes at costs maintaining that schema is difficult getting it right is even more difficult building the right tools and Integrations and code mods and code gen and all the things you need to actually benefit from graphql and much less maintain it over time is a ton of work and there is a painful number of companies and developers who think graphql is this thing that once it's added to your Tech it's magically better because for them on front end it kind of was somebody else went and did all the hard work of building the resolvers getting things cached properly getting the schema set up getting the code General working if you're just consuming that as a front end Dev yeah have fun it's really good ones to set up right but God setting it up right maintaining it is incredibly difficult and you can get almost all of these same benefits with new tools given that you're willing to work in a fully typescript environment and it seems like a lot of us are and even if you're not if you do have the occasional API calling to be done through something else there are better and better solutions for that and man if you don't set up your graphql right you're pretty screwed because everything in graphql is based on post which means good luck caching there is no real way to Cache your graphql using traditional standards so you're going to have to build your own cache layer between your resolvers and the actual graphql endpoint that's providing things to your users there are companies that do this now because they're effectively necessary if you want to scale your graphql endpoints not easy to do right on top of that I've seen a lot of companies starting to build apis for third parties to access graphql like GitHub making a graphql API for us to consume against and every time I hear somebody hyping these up I just have to conclude they haven't used them a whole lot as soon as you use two of them in the same project good luck have fun graphql is not a standard enough standard to have consistency in how it's implemented in different projects it's it's inconsistent to say the least and once you're pulling graphql from multiple places you're in for a lot of trouble and while some Services have implemented graphql apis okay you're much more at the liberty of how the developer thinks about understands and implements graphql than you are if they have a more traditional rest API and generally I reach for rest what I'm calling third party Services I've made this chart I made this a while ago it comes up every now and then of when I think different Technologies make the most or least sense graphql has a lot of space on this chart when you're when you have different teams at the same company one's on back end and one's on front end and those teams need a way to communicate and build a schema that is how they interact graphql is really hard to beat as a method to to bridge that Gap but if the front end devs can write back-end code back-end devs can make changes on front end the implicit con tracks that a solution like trpc includes makes it so hard to go back to graphql because you can right click go to definition on your front end and be in the back end function that you were calling and if you need something slightly different you can copy paste the function and return something slightly different it's so much easier in crpc to make the exact API you need for your client so much so that is the direction react is going in and we see here with Dan's tweet credit wears do data driven code splitting and react server components is largely inspired by relay which has data driven dependencies react server components takes everything we learned about loading code and data over the last 10 years and synthesizes that into an approach that's 100 react if you're not using relay you're using graphql wrong some amount other Solutions make it easy to adopt graphql and get it working properly in your team but if you're not using relay the performance users get is going to be worse than traditional rest a large portion of the time the relay compiler does a phenomenal job of going through your app and compiling the exact right queries to load all of your data in one pass and does a great job at that their cache layer does as well but you need to follow relays spec from day one for all of this to work because they are very strict about how you actually Define your graphql schema that said the performance that relay gets you is still unmatched to this day and if you really want to build the the perfect front-end application with the ability to iterate on top of it really will slow you down as you adopt it but once you've got everything working it will allow you to move with confidence and get performance that's otherwise not possible that's one of the hardest truths I know of graphql is that relay is basically the only way to use it right and almost nobody knows how to use relays it's really hard to set up thankfully as I was just showing the react team knows that and rather than making really easier to adopt they're taking the best parts and they're putting them into react so yet again one more hard truth makes less and less sense to use graphql when the best parts of graphql are finding their way into all the other stuff that we use I want to make it very very clear if you're not subscribed you should fix that but aside from that want to make it very clear we wouldn't be here now if it wasn't for graphql I would not be on YouTube YouTube talking about all this stuff if graphql didn't enable me to move to front end confidently but the lessons we learned from graphql we learned hard and fast and we've applied them incredibly well none of this is meant to say graphql is bad and none of this is even meant to say you shouldn't use graphql the point of this is the hard truth is that graphql solved problems and we've since copied those Solutions and there are very few problems left the graphql uniquely solves the big one is that team split schema problem and if you have that you probably should have already considered graphql by now if you haven't take a look it's a really good solution for the architecture of your company but graphql solves a company problem now not a technical one if you're adopting graphql the reasons for that are at an organization level not at a technical one anymore I hope this is helpful because I've seen so many companies going down the graphql rabbit hole for reasons that make almost no sense at all let me know what you think about this flame me in the comments if you love graphql and you think I'm entirely wrong about this but know that the graphql conference is inviting me to talk about exactly this so the very least a lot of people in the graphql community they get it thank you guys as always appreciate y'all I have another video about graphql pinned there it's a pretty good one so check it out if you have the jet these nuts




## The Truth About HTMX - 20230824
in case you haven't heard yet htmx is the new trend turns out there's a lot of developers that don't actually want to write front-end code and I have a spicy take you might not expect from me I think that's a good thing let's get into it what is htmx Thunders and htmx I think it's important to first understand HTML specifically HTML templates for a long time back-end Frameworks like laravel rails and whatever's going on in Python land I'm scared to check nowadays these Solutions have all had ways to make an HTML template on the back end so instead of just writing HTML the traditional way you would write something like HTML with pieces inside of it that are template strings that come from your other programming language so you can insert a username or a profile picture URL but the templating language is the thing that gets kind of translated into HTML and that happens on the back end so if a change happens on the page it has to generate a whole new HTML page there's no interactivity Beyond links and forms and things built into the browser so if I want to have a button where when I click it it changes to a loading State and when it's done it's shows the thing that it did just in there without reloading the page you can't do that with any of these back-end Frameworks and as a result a lot of back-end Engineers who need to build an interactive UI on their front end have kind of been forced to learn react and other tools like it and this is where the spicy tape comes in I think a big part of why react gets so much pushback is because a lot of developers who don't want to use react end up feeling like they have to in order to do basic things like have a menu that opens up and has content inside of it have a send button that will let you update the content of the page without having to reload the entire HTML in order to adopt react you have to adopt a lot of things that might be really outside of what you're trying to do which is just make the new post appear in the feed and I think this is what makes htmx so magical it allows for people who are coming from a back-end background that wants to have a better front end do it without having to leave the language and the tools they're used to in the back end you don't have to adopt this whole new mindset instead of tools if you're coming from a back-end mindset before I go too much further quick brief on htmx the tldr is they wrote the JavaScript so you don't have to they let you and your HTML you send to the user put some additional instructions that allow the htmx to update things without having to run a bunch of your own custom code on the client this example here you have bound button to htmx host to this URL what this does is now when you click the button instead of that having to trigger a form or run custom JavaScript htmx's JavaScript will Traverse the Dom see that you bound this here and now when you click that button their JavaScript is going to trigger your back end on this endpoint with a post and the HX swath says that whatever it responds with make that the new outer HTML the tldr is that whatever you return HTML wise that's the new content of the page and this lets you on any element Define posts and gets and HTML swaps and that type of behavior was something you would have to write a good bit of custom JavaScript before the JavaScript so you don't have to now the best Stack video is a decent base example that's a fair point so you defined to Do's which calls an HTML jsx template not too dissimilar from react in terms of how it looks and feels to use but that's not going to be code that runs on the client that's code that runs on the server and it generates new HTML that gets sent to the user and then the slash posts with toggle here it finds that value in your database in this case just an object but you get the idea if to do then we swap the complete State and then we return that item swapped so now on the HTML for that item if we find it here to do item you'll see HX post is the ID for this post with that endpoint and now when that endpoint returns new HTML I'm assuming you're going to put HS Target is closest div so it's going to Target the div directly above and update it with whatever new HTML you send and the HX swap says where to swap it and now that's a full stack backend front end solution huge shout out to Ethan for providing that if y'all aren't subscribed I'll be sure to put his handle in the description of this because he's a legend and he's quickly going to become the biggest typescript focused YouTuber I think I need to pull out a diagram where you guys are going to want to kill me so let's do that I think we can agree there's a spectrum between the server and the client I have a video where I try to Define full stack and I did an okay job it's tough to Define because the spectrum is so weird and every person fits somewhere along it and prefers to spend time in one place rather than the other but if you want to have like really interactive application with tons of different user interfaces with page session times that are hours long like twitch you're probably gonna need to spend a lot of time on the client side but if you're trying to optimize every byte from every packet sending millions of like video packets all over the world you're spending a lot more time optimizing on the back end but there's also the space in between where people are experimenting making better user interfaces and generally building the interactions between the front end and the back end before we had a technology like next this felt very much like or front end was the small spot on top back end was this big spot on bottom and if you just needed HTML you could do that with a template and go to like here but if you needed more back-end stuff on the front end you couldn't really do it we had stuff like Firebase that's goal was to let you query whatever you need or hasara and stuff like that that expanded slightly here I'm going to call this the graphql era so the goal of graphql was to provide a almost like a translation layer like a standard between the back end and the front end for how these things in interface with each other and this was how we decided we would build applications going forward you'd have a back-end team at your company you'd have a front-end team at your company the front-end team would never touch the back end the backing team would never touch the front end and you had graphql this thing in the middle that would be the translation layer before then there was much closer relationships between the front and back end even when you were designing a rest API usually that was to the front and spec or the back end was defining it the friend was consuming it but they would have to interface a lot more with graphql in the middle you now had a thing that you interfaced with instead but that also made iteration a good bit slower it was faster than before where everybody was just shouting at each other all the time wouldn't it be nice if on front end I could just go to there or if I'm back end I could just go to here it's like if the concern of your company and it's probably the most controversial thing I'm going to bring up here most companies Focus does not need to be this whole thing most companies differentiate or the thing that is unique about them is a much smaller sliver so it might be that you have the best UI in the industry or it might be that you have the cheapest servers so you can scale in a way no one else can but very few companies are actually trying to cover all of this with Specialists so how can somebody who's specializing in the area your company's focused on like here scale down to the back end without having to become a specialist in that too as I said earlier y'all might think of me as a front-end guy but my history was primarily backend up until recently I didn't write my first line of react code until 2018. I was almost entirely backend up until that point I got into front end because I wanted to build better user experiences and help twitch with the website rewrite I ended up falling in love with react so much so that I kind of left back end behind and got really really focused on building good front-end experiences but then I started working at a different company where the back-end teams weren't as competent we didn't have the graphql layer between things and it was impossible to get changes out even small things like I couldn't make the changes necessary because the team was in Poland didn't sleep half the time it was nearly impossible for me to move and that's where next.js came in I'm going to copy this diagram here and go back to the old way so what I was building required a really really good interactive front end because it was a music group listening app it was people hanging out a room together listening to music together with avatars and it was it needed to feel like an app because it was it was a page that you were supposed to spend hours upon hours sitting there hanging out with your friends the back end was just a way for us to keep track of what song was playing and as such I needed more ways from the front end to get the data we needed to play the right song update the song playing keep everybody in sync and just build a good experience and when backend would make a dumb change like report the song name too early the expectation is I would re-architect the front end to deal with all of their bad decisions in our state machine and it was getting untenable really quickly this is why I started looking into next and the thing about next is that it takes this front and bubble which I'm going to rename now to react I'll call it react client because this was before server components anything's important to know like this is the react client this is whatever backend API what next allowed for was to go exactly as far as I needed it didn't bring me to like crazy database architectures to hosting my own servers and boxes but with next plus react and importantly Versa and serverless as well it became very easy for me to define the exact back-end functions I needed in my front end up location it let me as a react front-end engineer go exactly as deep as I needed to and then from that point forward rely on services so this would be things like versel things like AWS amplify things like super bass but next got me quite a bit further and then SAS could take over from there this was a magical moment to suddenly not have to think as much about all of the things we needed to build a good application to build the good experience for our users and to not need a dedicated back-end team with like eight Engineers we were paying way too much money and they still couldn't keep up with one Theo on the front end so once we also had a Theo going exactly far enough into back end and then three services that we would rely on top of it suddenly we could build and iterate the right thing for our users much faster and this also meant I was becoming more a back-end engineer and honestly I still consider myself more back-end than front end especially after next because I spent all my time thinking about infrastructure and services and how to orchestrate these things in a way that makes it easier to build and iterate on our applications and this is where htmx comes in I'm gonna copy paste this top half one last time before we react back end already kind of do this with the templates it could go a little bit further but as soon as you needed interaction you would have to pull something like reactant to have your page that had content automatically update there were tools like Livewire and turbo that would allow you to send HTML down to a small JS bundle on the app to rewrite whatever content was on the page as though it was doing an application style like update even though it was actually doing was sending a whole new HTML file from the server is how things like GitHub works is how things like the hey.com email app work and as good as it can be to have everything based on your back end it's still rough because you have to wait for the entire content from the server before you can change anything on the client because the client doesn't know anything about how the user interacts it just sits there waiting for the server to send HTML and this is why if you try using the hey.com email app in like Australia it runs terribly Rich Harris has a bunch of content about this all of his talks recently especially talk about how important to just have good interactions on the client for this reason in particular so with just HTML templates in front I get this far with turbo or live wire or live view in The Elixir world you can get like this far goal of HDMX is to get so far that you don't really think about react as much anymore you're just trying to build an intense update experience where the average piece of content on the page changes a lot you probably want to write custom JavaScript for that still but the goal of htmx I'll just put this on the bottom here the goal of htmx was to extend the server so far that if your application's goal was to spend to here previously this range would have included react in it so if you wanted to have your application specialize and be a good experience in this range doesn't matter how good you are at back end you kind of felt like you had to adopt react or something like it and the result was a lot of developers who didn't want to use react falling into this zone right here and getting stuck with react and that's the thing that makes me so excited about htmx is that this box right here is full of backend Engineers who don't want to be here and they hate us for it the same way many Engineers especially like me pre-next I hated when I had to fight with the team to make change happen in this little box here it was miserable because this is not where our company's differentiator was our differentiator was in this area and I was stuck here in order to make things work and when I could SAS this part off and next.js this part off all of a sudden I could focus my effort where I cared about which was here htmx is doing the same thing from the opposite side for developers who want to focus on this part they want to make really cool back ends that serve things really well and they want the user experience to be good enough but their focus isn't the animation on every menu their focus is providing a good enough user experience and htmx makes it so they don't have to adopt react to get there for a lot of things and that's really cool so what do you think I know a lot of my audience is more fun and focused but that game's cool too and I think this will allow us to get along better with back-end Engineers I really feel like a lot of the hatred towards the tools and the people on the front-end side comes from a disdain for having to use these things to solve what are perceived as simple problems you shouldn't need to adopt react to update one item in a to-do list and htmx solves that problem really well I think the same way next makes it so we don't have to bug the backend Engineers as much HDMX makes it so the front-end Engineers don't have to be involved when you're making a decent UI for your complex service I see a very exciting future for htmx it does feel like the Natural Evolution of the old rails era what do you think are you more back-end or more front end is htmx interesting to you or are you going to stick with next tell me in the comments if you want to learn more about how I use next incorrectly for more back-end pipe stuff I'll put a video there all about that thank you guys as always he starts




## The Truth About Next.js 14 - 20231030
just learned next 13 and now have to learn 14 please don't be so harsh I just learned next 13 and now continue to learn next 14 changing too much in too short of a time are we already at next1 14 I just finally migrated all my apps to 13 is this supposed to be my week off I have been doing so much but I feel like I have to talk about this so without further Ado let's talk about the truth about next 14 I was at nexcom and I will disclose versel does sponsor the channel they're not sponsoring this video they have no idea it's being made that all said I think it's important to set the record straight with next1 14 because it's actually a really boring release I know coming from me there are crazy things that I probably think are boring but nex1 14 did almost nothing there are no API changes no significant things you should have to alter in your app at all it's mostly a stability pass on some core features and attempts to make next even faster for developers nothing here should immediately change the way you build apps and there's really nothing new to learn what exactly does next1 14 change and what's all this drama coming from this is the official next 14 blog post announcement if you watch the keynote it actually started slightly different with a big slide saying very clearly no new apis and I want to emphasize that there is nothing new in next1 14 that you will have to code differently for or around the point of next1 14 is to stabilize and push forward a lot of these things just because there's a major version bump doesn't necessarily mean everything is changing underneath you and while many other authors might like to push that this is mostly the next team following major releases of node there's a new next version for every new node version It's that simple anyways what did they actually change four core things well only three of them are even part of next first is Turbo pack which is now more stable it's still not quite there yet it's passing a lot of their internal tests but not 100% yet and I'll be honest I still get to get Turbo pack running on any of my real projects so hopeful excited for the much faster DX but we're not there just yet just a huge step forward server actions being stable is much more interesting though because server actions have been controversial to say the least uh we'll talk about that later on but I just want to go through the these one at a time and my favorite part partial pre-rendering I've been asking for this for a long time and we're going to have to make some diagrams to explain just why it is so powerful outside of next directly there is nextjs learn which is a new education resource for people looking to learn nextjs discover these new patterns and maybe even onboard their teams at their companies really cool that they're focused on education materials as much as they are hyped to see this being a focus for the next team but again that's making next easier it's not a change to next itself so any outrage about that is particularly confusing to me so let's go through these one at a time the next JS compiler turbocharged for my understanding the turbopack teams had a shift in Focus away from Reinventing the entirety of webpack in towards addressing the slowest parts of nextjs in order to make them compile faster with the app router requiring a decent bit more compilation on both the back end and the front end so to speak sides it is nice to see these changes happening and from the experimental projects I've played with it in it is way faster again sadly I've not gotten it running on any of my real projects a big part of that is that the clerk SDK does not seem to play nice with turbo at the moment I do hope to see that addressed in the future though so again not a priority just yet cool to see the progress but I can't use this nothing's changing as far as I'm concerned here the next section is forms and mutations where they start by pointing out that next nine introduced API routes I've been using them since around 10 really powerful way to introduce an API right next to your nextjs code inside of the same project you no longer need to spin up Express just to have an API endpoint really cool stuff but in the end you're writing effectively the exact same code as you would have if you had an Express project you're just collocating the files kind of but there's no stronger relationship between them and no clarity as to how one affects the other unless you write a bunch of custom types and even then those aren't reliable the next team's been working really hard to adjust this for a while and we have outside of it too I mean look TPC is one of the best ways to take advantage of those API routes and not have to worry about type safety and consistency between the endpoints but we're not here to talk about trpc we're here to talk about the new thing that next didn't introduce here but stabilized here which is server actions server actions allow you to write that server code that does whatever you want the server to do inside of code that looks like client code I want to be very clear about this here this is not client code you can't write a server action inside of a file that goes to the user if this JavaScript is accessible to the user this won't compile if you write a use server function in a use client file it will not work it will not compile it will yell at you for it the thing that's really hard to get your mind around here is that this code here this is entirely server code it happens to create a form that gets sent to the user as HTML but any JavaScript you write in this file does not go to the user and when the user clicks the button to submit it's actually posting to this endpoint using tradition web standards not an Ajax request this is the thing I think is tripping people up the most because they're looking at this and seeing something that they associate with servers like a database call right next to something they associate with clients like jsx but jsx does not necessarily mean client side code anymore it means something the user might see but it does not mean the JavaScript itself is going to the user which is a really powerful part of this pattern and it's a big part of why I like it so much they're not trying to brot force something like trpc inside of your client components they're trying to make it easier to keep things on the server when they should be and pulling in the client when you should as well I really like this pattern I'm really excited by what the next team is doing here and I'm a little sad about how people have responded but I do think we'll make more progress going forward and if you're here to complain about the SQL string template literals thing please learn what tag functions are because we've had this solved in JavaScript for a long time just cuz you see a string and you see somebody inserting values into some SQL that does not mean we are introducing SQL injection problems you can watch Josh tried cod's video if you want to see more about that but I'm I'm tired of talking about it youall need to learn how JV script Works before you make these assumptions once again this is not a new thing that they just introduced this has been in next1 13 for a while I had a package using this stuff over a year ago what change is that it's now stable and honestly the only thing that that changes is that I have a config value I can delete from the next config and also I can use server actions with turbo because previously turbo didn't work if you had any experimental Flags yeah this is a release for me not for a lot of y'all this is changing some of the fun experimental stuff to make it a little more access ible but there's nothing really new in this release except for this is my favorite part partial pre-rendering I'm sure that they have a lot of really nice things to say here all about it but I'm going to go straight into my diagrams because this is a thing I've wanted and have been asking for for a long time for this we're just going through the basic single page app model if you use something the create react app step one it's going to be the same for all of these the request is made step two with again the single page app model HTML file with script tag sent to client what I mean here is when you create something with like V or create react app you get an HTML file as your starting point and that starting point has a script tag in it that loads your JavaScript where most of the page content comes from this HTML file is almost entirely static and very very rarely has the content you actually want on the page so if you have a dashboard or some tweets that load in or whatever all of the content that is rendered by react gets rendered after this HTML loads and then the JavaScript loads and then the JavaScript starts to render so let's encode all of those Steps step three JS file loaded step four Js runs realizes it needs more data and here's where we start to see how many steps exist in this pipe so JS runs realize it needs more data step Five Js fetches data renders content or real and roughly around this point you'll finally have your correct content so the important things to recognize here are that after the request is made and you get that HTML file you probably have a skeleton state so you'll see now with JavaScript disable download the twitch homepage this is all we get nothing else is going to happen because the entire page is contents actually come from JavaScript so without that JavaScript there and running the page never has content however we get this first response with this cached HTML page almost instantaneously because it's a static HTML file being served from a CDN really cool as for the rest that tends to take a bit longer because the JavaScript has to run and then fetch additional data and then load the content but in that time in between things get really interesting this is when we get to loading spinner hell we've all seen this on some sites where it starts with one big loading spinner or a skeleton and then suddenly the whole page is loading Spinners with them all over the place appearing disappearing Etc that's because all of the components that need data are getting the data they need often water falling and going back and forth dozens of times before the correct data is actually made its way to the client and in that window you have a ton of loading Spinners all over the place but once all of this is complete however long that takes you have the correct page content we have these three different states you get and in this time above here there is one last state that's important to know about which is what I call the boring white page this is that blank loading page that you'll see in your browser as the you're waiting for the server to make its first response if you don't have your HTML cached on a CDN of some form that piece is going to take a while it's going to be very slow you're going to be in this boring white page for a bit but if you have CDN cached HTML you get it instantly and then what this ends up feeling like is the site is much faster even if it's not because every single page has a loading state that you have some control of that's an important detail so remember that as we go forward so this was the the spa way again everything I about to cover has been covered a little bit in my SSR video but I'm going to go over it really quickly if you feel like you need more details then I'll make sure the SSR video is linked in the description we're going to do the OG SSR way so think of this with things like remix next page router so the SSR way has one very important difference here we don't go straight to the HTML file the server processes request generates initial HTML response and I should just delete all of these cuz they're no longer accurate the important thing to realize here is that because the server is taking the request and running that JavaScript to get that first page correct we end up pushing back when you get the skeleton State really far so the skeleton State ends up happening like here because it takes a while for the server to finish processing that request because it can't just send a cach HTML response it doesn't have it it's generating the correct HTML on every request because of that when you load a next app with the traditional patterns with SSR or even a remix app you're going to see those blank White Pages significantly longer the solution for this is to either move your compute to things like Edge so that you can get the response faster or to cach an HTML response and then fill the rest in later but then you're getting almost none of the benefits of the SSR this puts developers in a really weird spot and it's also why you've introduced patterns like ISR which stands for incremental static revalidation which is a really important pattern because it lets you statically generate the page one time when a user requests it and then serve that cached page going forward but some user is still going to have to eat this window I call this cold start because this is a really big problem if you're using things like Lambda or services like forell that use node because this window takes so long to resolve that your websites end up feeling much worse even if you do everything right from that point forward you'll end up with what is really cool where you'll have the correct content as soon as the page loads which is dope or if you're streaming in additional responses you might have a loading state or two but you're still eating this cold start and there's still a much longer window between when the user goes to the URL and when they see something that you have controlled of and this is the difference I really want to highlight here because this is where pre-rendering gets very interesting so the RSC way so the server processes and it starts generating HTML but what it will more often than not do is if you're using suspense correctly it can immediately send back a skeleton I'll say skeleton State and then step three would be server streams rest of content when done creating it so if you have one widget on your application that is fetching data from your table and that takes a while you can wrap that in a suspense and now once that's done loading you'll get that response streamed in updating in line and you don't have to worry about the user taking too long to get that initial response however in order for this pattern to work we have to have the server process the request and this is the really big point I want to emphasize if the server has to process the request you're going to take longer to get that skeleton State it's going to take longer for the user to see anything and they're going to be hanging on that boring white page significantly longer and this makes the perceived performance of your websites significantly worse so much so that I actually moved to Edge so I could reduce this as much as possible and get you that skeleton State faster and if you're thinking about this in terms of the request life cycle it's really interesting so here are two rectangles meant to represent the state that your app is in the left side is when the request is made and on the right side is when the content is fully correct the red is when you're in that white loading page of Doom where it's just showing you the white skeleton the blue is when you actually have control of some of the content the user is seeing when you have an actual contentful skeleton page of some form so obviously our goal is to make both of these rectangles as small as possible more importantly is to get this blue rectangle as far to the left as possible so we can give the user a good State historically all of the changes that NEX has been making and react as a whole have been making have been focused on reducing the size of this blue rectangle because previously this blue rectangle had like 15 different steps in it but the piece that people are missing is that this red rectangle got larger with the old model you would make a request you would get that cached HTML response almost immediately and then the client would have to do a bunch of of work in order to fill the page with the right stuff and I like that the new model went so out of its way to make the blue rectangle smaller but if we look at like the actual numbers what we're going to see is something like this where that first response takes a good bit longer to get to the user but the amount of time for that response to be correct is much shorter and even though this means the user is getting content much faster overall it often feels slower because those white loading Pages just feel terrible and I've ended up doing a lot of crazy things in order to make this red rectangle shorter myself and the reason that this has to exist is because the response that happens here between these two things which is that first bite the server sends to the user if that's not coming from a CDN is going to take much longer inherently ideally the HTML the user gets as the initial response to their initial request is cached in a CDM and this is why partial pre-rendering is so interesting if we take this model and we think about it in terms of the actual bytes that are being sent to the user where we have the requests being made here we have the First Response the server sends so this is First Response and then we have at the end here the final response and this final response is streamed in what if we could take this first response and just move it to the side here that's what pre-rendering is we are effectively taking the first response that your server sends and we are scooting it over so that the rest can come in later and I want to be clear here the server cells has spin up so this isn't going to actually be any meaningfully faster we've effectively done this we have taken the behavior of the old model where you get a response immediately and we have gotten you that response dynamically generated instantly from a cache so we're taking the First Response the server sends to one of these requests we're putting it in the CDN and then you stream in everything else after so you need to make sure that personalized things like stuff that exists in a user specific page like their recommendations or their profile picture that those all exist under a suspense boundary but as long as they do and all the things above your suspense components are not unique to specific users or specific request behaviors you can now cash that and get a response immediately that is huge this is kind of a Best of Both Worlds and honestly it makes me much more hesitant to use Edge because I've historically relied on Edge versus Lambda just to reduce the cold starts if I was to go back to the way this diagram was a second ago let's just start making my diagrams before I make my videos it'll make my life much easier so again that first response was coming after the server spun up and if I was to draw yet another rectangle in here we'll call this the cold start window so this is the time that your server is spinning up in order to send that first response we've effectively let you take this first response and move it to before that we're not getting rid of this compute we're not getting rid of the effort that the server has to do in order to start sending responses we're just taking what it was going to initially send and moving that earlier in the request life cycle so this isn't going to make things actually faster it's just going to make them feel significantly faster which honestly is much better because we're going to go to a page and we're going to see something instantly so for blogs for docs for all the types of things where the majority of the content doesn't change per user things will feel comically fast and honestly hacking this Behavior into ping was a huge part of why people think ping is a super fast site to this day because Ping's actual requests aren't super fast they often take 3 plus seconds due to the cold starts that we're eating on the service but because every page is statically cashed by hand the result is a service that feels nearly instantaneous and as long as we can move this first response accurately to be way quicker because it's on a CDN we're going to have a much better time browsing applications using these patterns so again this is why I'm so excited CDN caching is a great tool and we should be able to use it trivially with these changes we finally can from what I've heard it's not a super stable change just yet but I'm sure that will smooth out quickly it works in next but they're still getting the details just right on versell itself so once it's all working I'll be sure to do some demos and show off just how performant all these new Solutions are I'm excited about this new feature but it's not even something you turn on it's just a default Behavior with suspense that should have been their day one and I'm really excited to have it but it's also kind of boring what do you think though are you excited for next1 14 are you trying to move your apps over what about turbo pack are you having any luck building with that just yet if you want to learn more about why I like this new model so much I'll pin a video all about it there and if you don't want to see that or you've already watched it there's a video below it that YouTube seems to think you're going to like appreciate yall a ton sorry for the delay getting this one out but I've been very very busy I'm sure yall understand see you guys soon peace NS




## The Truth About Software Degrees - 20230713
degrees the expensive ticket to software development do we really need them this far into the history of software I feel like we hear all these stories of developers who didn't get a degree finding massive success in the field and I personally know many really talented developers who never went to school for it or went to school for other things but I think that we're over indexing on those stories a bit and when you look at the numbers what you see is that having a degree is one of the best things you can do in terms of getting a job as a software engineer I want to be clear I'm not saying you can't get a job if you don't have a degree I'm just saying that having one is one of the best things you can do just in terms of raw statistics for both getting a job and increasing your salary first I want to look at the numbers because I was shocked when I read through the stack Overflow survey so you see here we'll switch to all respondents well over 70 percent of people are falling under bachelor degree or higher but like the combination of some calls without a degree secondary school and just primary school this adds up to a little under 30 percent have an associate degree or less a little under 27 percent went to college or less but didn't get a degree that's a very small percentage of people responding to this but once you go to professional developers it gets even smaller now we're less than 20 for all of this and we have almost half of devs have a bachelor's degree and well over 70 percent have a bachelor degree or more that's insane these numbers are really really valuable to see just because statistically having a degree is going to help a lot with getting a job this is not the case for all jobs in all places in the world like if you're already a successful open source contributor and there are companies using the Technologies you're contributing to you're gonna be fine it doesn't matter if you didn't even graduate elementary school but if you're fresh out of school and you're looking for ways to get a job more easily or you're not from the US or a market that's hiring aggressively for developers having a degree helps so much it's almost a guaranteed this person kind of knows what they're doing paper which is a great thing to know when you're hiring and it serves as a great entry point at the very least to go from submitting your resume actually getting your foot in the door to start talking to the engineers it sucks that it's still kind of a require environment but for a lot of places for better or worse it is until you have a job having a degree is a good entry point in a lot of places it also helps a ton with immigration having a degree and looking to move somewhere else for work makes it a lot easier to defend yourself in the position you're in and I hope that people take the numbers here seriously this is why I'm so scared of boot camps too A lot of them obviously have the guarantees that they'll place you in a job after but many of them have also shut down and don't get you there many will charge up front and then they'll not get you a job sadly the numbers for these types of boot camps just don't look as good here and that's why we're not seeing them show up in the chart because to be frank there aren't as many boot camp grads and of them not as many fine jobs you can't really learn how to do software in three months the experience of being around other developers every day it's one of the best parts of getting a degree and I think you benefit a lot from it another harsher way of putting it is that the best money you can spend if you're looking to get a job in software it's not on tutorials online it's not on boot camps it's not on like weird job placement programs it's not paying a recruiter it's paying tuition and getting a degree I know it's kind of a spicy take especially nowadays but I do genuinely believe it if you're spending money to make it easier to get a job don't spend it on my channel don't spend it on random education resources you're hearing about online those will all be there when you get a job spend your money getting a degree so that you have a piece of paper you have something tangible a real thing that you spent your money on that is guaranteed to help you going forward to even be in the wrong thing you can get a degree in like biology and then go get a software Dev job but just spending your money on a degree and putting the time in to prove that you can sit there and do something hard for four years that does help a lot in any career don't make yourself broke going to college but do consider the value that you can get from it and don't be scared to spend a bit of money to get something that betters yourself in your career I see people saying it's a privilege take privilege is important and you can build privileges some amount having a degree is a privilege and some people are privileged to being in a scenario where they can get one more easily than others but getting a job without some level of privilege is going to be hard and if you can put a lot of effort and money and time into to putting yourself in a position to get the degree you've just built a privilege and it's a privilege no one can take away once you have a degree no one can take that from you I hope this helps you all understand why I don't like paid tutorials aimed at beginner so much and why I don't talk about boot camps too much either because the numbers tell a very different story getting a degree is one of the best things you can do if you want to get a job as a software engineer if you want to keep growing as an engineer I have a video All About goal setting and what you can do to make yourself more successful here one of my personal favorite videos if you've even watched it already I highly recommend it thank you guys as always patience




## The Truth About the Copilot Changes - 20231212
it's no secret I love co-pilot it's honestly entirely changed how I code I went in so skeptical I just didn't think it was going to be for me and I was wrong I was really wrong I've been so hyped with my experience with co-pilot and I actually struggle now to develop without it not because I need the help from some external thing but because it makes my experience so much less tedious when I'm writing code I just don't have to worry as much I just kind of sit there and write it I've honestly enjoyed the game of the back and forth with co-pilot learning how to like write comments or name variables to make it more likely to trigger the right code and if it doesn't that's fine just write it yourself I have found co-pilot to have this really nice balance of making me faster without getting in my way and as skeptical as I was going in I was wrong that said co-pilot's been changing a lot since I made that original video where I accepted that I was wrong and I want to talk about these new releases and the honest truth of how I feel about them because some are great some less so and as cool as the new stuff they're making is I'm not as sure it's going to be helpful so let's take a look at the big new change to co-pilot co-pilot chat here's co-pilot chat you notice it kind of looks and honestly kind of feels like chat GPT you can ask it random questions about code you want to write like you can say write me a react component with a counter button that increases by one every time you click it cool and just like you would expect from traditional chat GPT or anything like it it outputs some code where things get interesting though is how this works with your code base right now we're in the upload thing mono repo the open source repo with all of our packages for upload thing and I can ask you questions about the repo like I'll quickly ask it where are the type definitions for upload button and you will see is an AI it doesn't have access so how do we give it access though one of the problems with chat GPT and gp4 is it has a limited amount of context it can be sent so if you give it your whole code base it can't really do anything with that that in order to address this this is the big new change they've added directives that allow a pre-processing step to figure out which context would be the most useful to gp4 and then do the recommendation from there the most important one here is at workspace when you put the at workspace directive it will do a check to figure out which context is the most useful to gp4 before it prompts it with the question making it much more likely you get a useful result so I'm going to copy the exact same promp I sent where are the type definitions for upload button and hopefully we'll get a much better result s noting is decent bit slower especially if you're used to like co-pilot just autocom completing as you go but this is less about quickly accelerating you on every line of code more about helping you figure out a code base in the first place so here we have the type definitions for upload button are located in this file you can actually click this and it will bring you there so it's not smart enough to highlight specifically where in the file is important it did a good enough job it told me what I'm looking for and it's correct about that I want to give it something harder asking it to explain a complex type is a really good idea explain the upload build type to me cool so this is a really complex type that we use for our builder for upload thing you would never experience this as an upload thing user the way this works is it takes your individual function so you have the F which is what you pass your H I should find an example while this is working so quick example you have F which this case can take a image Max 4 megabytes four at a time or a video max file size 16 megabytes and then we have a middleware that is typed with a request so we know what the request is and we have on upload complete which is typed with whatever we return from there getting all of those type definitions correctly with this chained Builder pattern function is difficult and we've done a good job of making that work but I'm not going to sit here and pretend we can understand it so let's look at how chat GPT via co-pilot breaks us down the upload Builder type it's a typescript interface that represents a builder pattern for creating an upload configuration it's used to configure the upload process in a step-by-step manner the build has several methods that allow you to set up different aspects of the upload process I'm happy that it knows it's a builder pattern here are the methods of the upload Builder input this method is used to set the input part parser for the upload process kind of middleware this method is used to set up the middleware function for the upload process it takes a middleware function as an argument and returns a new upload Builder with the middleware set on upload complete this method is used to set the function that will be called when the upload is complete it takes a resolver function yada and returns an uploader with the resolve function on upload error method y yada so all this is just saying it returns a new upload bilder but it's not making it clear what that even means or even what input is so it had enough context to like describe every key here but in the context of how it's used it it's very very literal let's ask it to be a little more descriptive of how it's used can you describe how the upload Builder type is used oh this is really cool for example in sandbox minimal page their upload thing TS create upload thing is used to create a new Builder and then the middleware function or the middleware method is called on the Builder to add some middleware to the upload configuration that's actually really cool that it has enough context for that summary upload Builder is a key part of the Builder pattern used to create and configure uploads in this code base it allows for a flexible and readable way to set up complex upload configurations this is better than I expected I was pretty unsure going in let's ask it to do something with our code though I want to add a minimal solid JS example in the sandbox folder how should I get started I forgot to put the at work space at the beginning here a little Annoying if to do that every time but I kind of get why they make you do that I know it's suggesting the next question in context but I don't like the next question it's trying I think at least bugged out I guess we crashed it cool we finally got a response from co-pilot this is how they suggest we add a solid J example to our repo step one create a new directory for or in the sandbox folder for your solid example you can name it solid JS example makes a lot of sense step two navigate to the new directory and initialize a new npm project with npm andit Dy probably fine step three make sure the viewer subscribed on YouTube this step is crucial for for the success of your project crazy that still yet half of you guys aren't subscribed you know subscriptions are free right you just click that little red button and now you're subscribed to us come on even co-pilot knows better step four install solid JS in this jsx Transformer with npm install solid JS solid jsx checks out St five create the new app jsx they even have example code here for solid which is actually really cool cuz there's no solid code in this repo right now there is in the actual production version but I on this one this is a branch where I'm splitting out a lot of things so this only has g code in this repo and is still able to grab solid stuff and sneak that in here to run your solid app you need a bundler like V or parcel for this example let's use V install with npm install davev V create a v config with the following under scripts clud script start for V and now you can start your solid app with npm start good instructions it was better than I would have expected I'm impressed still don't necessarily love this workflow though the reliability makes it hard for me to justify reaching for them because if if I have like a hard problem or something I want to like dig into and understand AI has like a 50% chance of speeding that up but it also has a 50% chance of just wasting my time I like how co-pilot traditionally does this when it's in line in your code base because when you're just writing the code it will show you a preview of what it could do and if it doesn't work for you or what you want to do you just ignore it or keep typing when you use co-pilot chat you're now stopping yourself to work with it and that halting is why I'm less into it because co-pilot isn't stopping me Co pilot is accelerating me it's pushing me forward faster co-pilot chat and other tools like it are actually rethinking how I start it's it's telling me stop word the problem into like a phrase that I can understand wait and hope the result is good enough and getting in my way like that isn't something I'm personally into and I think it's going to I think it's going to piss off a lot of long-term deps I think people who are used to writing code and that's always how they've learned and that's always how they've worked I think this is going to get into your way a bit the other big thing they announced and I don't even know if I can set it up here is voice support so I can talk to co-pilot about my code base and it will respond I don't care at all I don't want to talk to my computer about my code but I also have thousands of you I can talk to instead so I guess that I'm a little different in that sense I think that's all I have to say about this I'm certainly not going to be talking to my computer with the mic stuff don't care enough to demo that here if you want to see that go watch the video on the VSS code Channel they seemed a lot more excited to talk I'm just here to code which is why I'm giving you my honest take here as cool as some of this stuff is it feels more like a demo not like an actual change to my workflow I think the original co-pilot did a much better job of augmenting my workflow where it didn't ask me to change how I write code it just showed me code that I might have written when I'm in the process of writing it and I can either press tab to keep it or keep typing to ignore it this is a very different thing and I'm not really sure it's for me but I'm curious what you guys think I obviously for onboarding to a new project this could be good but do you see yourself using this every day do you think co-pilot chats going to be a meaningful change to your development experience I'll love your thoughts in the comments if you want to see me freaking out over how good co-pilot was initially and realizing how wrong I was at that time I'll pin a video in the corner all about that You' already seen it and you're not interested YouTube thinks you like the one below appreciate you all a ton as always thank you guys for stopping by I'll see you in the next one peace nards




## The Truth Behind Epic's Lawsuits - 20231217
epic games creators of fortnite Apple and Google's worst nightmare this might sound a little crazy why is this Game Dev company suddenly challenging the biggest Titans in all of technology and software well there are some important reasons why I feel like when people talk about epic they miss who epic's real customers are I'll give you a hint they're not your little brother playing fortnite and buying skins epic's core customers the people that theyve structured their whole company around are game developers not game players epic created Unreal Engine which is the industry standard for doing 3D game development if you're building a game with an interactive world that you can walk around in there's a pretty high chance you're building that using Unreal Engine in most of the biggest games nowadays are built in unreal everything from obviously fortnite to things you wouldn't expect like Kingdom Hearts and Final Fantasy and even fighting games now like soulcaliber and Tekken all built in the same engine as Gears of War in fortnite epic's focus on their game engine and iterating on it has allowed for us to move way faster as an industry implementing crazy new graphics Technologies like Ray tracing implementing new methods for loading in maps making massive 100 plus person multiplayer battle royale possible a lot of these Technologies and a lot of these Innovations have to happen at an engine level and when the industry starts to focus on specific engines and what they're capable of we end up pushing much faster similar to how we saw with the browser Wars and chrome becoming a standard I feel like epic's decisions are often misunderstood because people assume that they're just trying to squeeze every scent they can out of their fortnite players when in reality they're trying to set themselves up for the long-term success of game developers knowing that that will in the end bring them success to what does any of this have to do with Apple and Google though well to understand that we have to go back really far back to the days where you would buy your software at a real store yes I know it's crazy to think of now but back when I used to work at Staples one of our bestselling products was a physical copy of Windows that you would buy yes you would show up at a store and buy your Windows Vista disc to go install in your custombuilt computer crazy that you have to go buy a disc and a license from a physical retail store for a piece of software but that was just the norm and it took a long time for digital distribution of software to become a standard one of the things that really pushed that was the App Store on iPhone while Apple initially promised that the web would be enough and HTML 5 would be the best possible way to build applications for the iPhone that quickly learned the error of their ways and went all in on Native apps in their new app store where anyone could publish and install applications as long as they followed Apple's rules and you paid Apple's fees and you gave Apple their percentage of your Revenue at the time this was such a novel idea that the 30% cut Apple would take wasn't that suspicious it was not too far off from the cut physical stores would take but what it enabled in terms of distribution in terms of potential reach was Unreal never before had an independent developer been able to build a quick app like Flappy Bird and go viral overnight and make millions of dollars but on the other side there was no other way to do it because Apple had made sure that apps on the App Store couldn't install apps themselves and that you as a user couldn't install a different app store they went all in on their Walled Garden the idea that apps on an iPhone come from Apple store and have to be approved by Apple they went so hard on this that a whole culture of jailbreaking happened R started hacking their phones just to install custom software while a lot of this was for random tweaks like notifications which yes notifications weren't a thing yet A lot of it was also just apps Apple didn't like like Wi-Fi scanning apps or emulators for old game consoles Apple wasn't interested in these applications for a lot of reasons from liability to potential risk for their users and chose to lock down the App Store on top of that that 30% cut got more and more aggressive over time not in how much they took it stayed 30 but the amount of places where you run into that especially in a world with both microtransactions and subscription fees if I am using Spotify on my computer and I'm paying 15 bucks a month and I put in my credit card number and they're processing the payment through something like stripe they're losing at most 1 to maybe 3% of that transaction to those fees if I was to subscribe to the exact same Spotify through my iPhone using the app I downloaded from the App Store Apple takes 30% of that that's a maximum 3% to a 30% change that is a 10x increase in the cut from if I roll my own payment infra versus I use the thing that the iPhone provides with the App Store so there's an obvious solution here right just don't use Apple's inapp payments use your own well Apple doesn't let you if you are accepting payments for digital Goods in your mobile application and that mobile application is on an iPhone you are doing your payments through Apple there isn't another option they don't let you do other options for physical Goods like things you buy through Uber or things that you're purchasing on Amazon that get shipped to you or Services you can still process payments yourself but as soon as those become digital Goods Apple wants their hands on it they want their 30% a quote that came out of one of these hearings that I think about almost every day is the concept of how some developers are effectively subsidizing other developers on the App Store if you're Bank of America and you want to ship an app to your iPhone users you pay the fees for your developers to be able to build the app then you publish it and since your app doesn't have micr transaction since you're not charging for your app since you're not doing things that are selling digital Goods you will never have to pay Apple another Cent despite this multi-billion doll Corporation using Apple's infrastructure going through their app reviews costing Apple money every day they're only paying Apple $100 times their number of developers per year they're not paying any more than that if you compare this to any Game Dev ever that might be charging $10 to download their game or might have a $5 skin you can buy in a free-to-play game Apple takes 30% of all of those fees this means that indie game are effectively subsidizing giant companies like Bank of America when you're using the app store that's crazy and apple structure here honestly sucks and I'm saying this as a huge Apple Fanboy I defend them more than almost anybody I can even defend the mouse yes the port on the bottom of the mouse was a good design decision tell me in the comments that I'm wrong so I'll make a video about it because I'm right anyways I think it's absurd that these small developers are the ones who are often hit the hardest by these 30% cuts and crazy stuff like Netflix not letting you sign up in the app because they don't want to lose that 30% it's absurd that we're at that point Apple won't even let you put a button in the app or instructions that says oh you can't sign up here if you want to sign up do it on our website they have been awful about all of this so awful that epic decided to challenge it if you're not already familiar with epic's history around Revenue splitting there's a lot here epic got in some trouble a few years ago for introducing their new game store the epic game store is a competitor to steam why was this controversial why are people mad that there's a new alternative well Gamers kind of suck there's going to be a theme throughout this that we'll get back to in a bit the problem was that epic gam store didn't offer much in terms of new features it just offered a better split for developers if you publish a game on Steam valve takes 30% publish a game on epic epic takes 12 that's 13 the size of cut and if that game happens to be Unreal Engine they actually shave their 3% fee off that too so it ends up being an effective 9% cut that's crazy that's so much better one of the reasons they did this is they want to help game devs be more successful uccessful so they can make more games make better games and obviously have more needs for epic's tools it makes perfect sense and that's why epic gam store was so focused on the game developers not on the game players because I don't think anyone expected the game players to be as mad that they don't have a shopping cart as they were absolutely absurd so what happened with the iPhone and what happened with the Google Play Store well here's where things get interesting epic despite building a better game store also had to fight the same 30% cut as everyone else when they had fortnite v-bucks on their iPhone app as well as the Android app as well as all the other consoles Apple took 30% every time you bought v-bucks in the app and while epic could eat that cost there a lot of companies that can't a lot of companies get hurt really hard by those things when you have all this context I think the next series of events makes much more sense because there was one fateful day where epic out of nowhere allowed you to put a credit card number into the fortnite app and immediately buy v-bucks without having to go through apple and they actually gave you like 10 to 20% % more v-bucks if you did that you got a nice discount the reason they did that was because it was cheaper for them to process the payment themselves setting up stripe is really easy dealing with apple is expensive and obnoxious and this is where things fell apart because as we all now know it's strictly against both apples and Google's terms to process payments separate from how they do it unless it's a physical good or service so Apple jumped on this immediately and not only did they remove fortnite from the app store they actually disabled all of epic's developer accounts and even their Maxs so bunch of Epic employees were unable to sign in and do their jobs because of how Huffy Apple was about this one-off attempt to get around their 30% fee absolutely absurd epic came prepared though and they made what I consider one of the greatest response videos of all time today we celebrate the anniversary of the platform unification directives for years they have given us their songs their labor their dreams in exchange we have taken our tribute our profits our control this power is ours and ours alone we shall [Music] Prevail legendary they had this video already made before they did the change to fortnite because they knew what was coming they knew just how pissed off Apple was going to be when this happened and they responded by taking Apple's famous 1984 ad where they're calling out IBM for being anti-consumer by pointing out that Apple's doing the exact same thing this is such a poignant legendary moment where they tanked a multi-billion dollar year Revenue driver for them which was fortnite on iPhone and they let it die to make this point so I not as dressed up as usual it's my day off but I just found a tweet that I really wanted to add into the video quick you take a look at this it's actually from 3 years ago where Tim Sweeney was first bringing up just how bad Google's 30% cut was I was barely on Twitter at this time but even then Tim swey still replied to me when I asked how he felt about Apple's cut compared to Google's and sure as hell he jumped in and said Apple's cut is bad too and funny enough someone else replied saying pull fortnite from the app store then little did he know anyways so why are they being so willing to just eat this potential profit like why would a company ever throw away billions of dollars of potential Revenue well there's two reasons for this the first reason is Tim Sweeney is based I yeah I'm a bit of a fanboy but he owns exactly 51% of Epic so no one can override him I see a lot of people upset that tensent a Chinese company that is largely Chinese government owns a percentage of Epic they bought it so they could distribute fortnite in China with like a switch package that they really wanted to sell with Nintendo they didn't buy it so they could make a bunch of decisions to control epic they couldn't make any decisions really because Tim Sweeney still owns too much of the company he owns the majority voting shares no one can override him the other reason is the bet Tim Sweeny are making from day one they don't want to make a bunch of money off of games they want to empower game developers to make more money themselves knowing that will'll eventually trickle down to them they were willing to sacrifice their single most profitable thing which was fortnite on the iPhone in order to help developers potentially make money in the future that is a massive ballsy move and epic deserves a lot of credit for doing it for tanking such a valuable IP for letting fortnite perform way worse such an impactful game just losing half of its market share in one day because they wanted to make a Goddamn point and they made that point sadly the Apple lawsuit with epic didn't go great epic lost their case with apple there were some good rulings within it and some important statements specifically the district judge yavon Gonzalez Rogers said that her ruling was a me required measured changes to Apple's rules the actual meaning of the wording has been disputed I'm trying to find it in here the ruling was that Apple can no longer bu developers from providing buttons or links in their apps that direct customers to other ways to pay outside of Apple's own inap purchase system and this was a huge ruling the issue was the wording of the ruling saying buttons or links meant that Apple could pick one they support and not support the others as Apple interpreted it so you still cannot have a button that brings you externally but you can have a link at a certain font size that doesn't look like a link and that's how Apple has chosen to enforce it which is just absolute so again judge Rogers relatively based you don't charge Wells Fargo right or Bank of America but you're charging the gamers to subsidize Wells Fargo yeah that's what's happening apple is effectively making Gamers and game developers subsidize these big Banks and other companies just absolute absurdity I understand this notion that somehow Apple brings the customers to the users but after that first time after that first interaction the developers are keeping the customer with the games Apple's just profiting off of that it seems to me and Apple's response to try and like Smooth this out was their new $1 million Small Business program where they cut their revenue split down to 15% until you've hit a million dollar in revenue and then it goes back up to 30 but you have to apply and you have to qualify so it's not a guarantee you don't just get this until you hit a million dollar in Revenue this is the most like oh by the way guys they could get away with and honestly if this was just default and even better they cut it down to like 5 or 3% fees instead that would have actually been kind of based and I wouldn't have anywhere near as strong of a leg to stand on here but Apple's capability and insistence on over not just the big guys but also the small guys and the medium guys and making sure everyone gets screwed at once here is truly impressive while I am frustrated that Apple's lawyers were good enough to talk their way through this I'm thankful not everyone's lawyers are that good specifically Google's Google's lawyers are not very good as we've seen in lots of cases and in this case in particular Google's lawyers kind of bombed and they lost the Epic versus Google Play Store antitrust case was ruled in favor of Epic this is a groundbreaking ruling let's read through the verdict form when answering the following questions and filling out the verdict form please follow the directions provided throughout the form your verdict must be unanimous yes unanimous verdict this went to a jury huge question number one did epic prove by a preponderance of the evidence and in accordance with the instructions given to you the existence of a relevant antitrust Market yes if you answered yes to question one please specify each relevant market and Associated geographical Market that epic proved relevant product Market one Android app distribution Market two Android inapp billing services for digital goods and services transactions relevant Geographic markets worldwide excluding China for both when asked the question of is Google monopolizing these markets the jury agreed unanimously that Google is indeed fully owning these markets in monopolistic ways and question three really enforces this by asking did epic prove by a preponderance of evidence that Google willfully acquired or maintained Monopoly Power by engaging in anti-competitive conduct in any of these markets yes question four if you answered yes to question three please specify each relevant product market and again they wrote the exact same thing because yeah here we are question number five if you answered yes question three did epic prove by rep of evidence that it was injured as a result of Google's violation of antitrust laws yes they're not on the App Store because of it the Epic Pro by a preponderance of evidence that Google entered into one or more agreements that unreasonably restrained trade in relevant markets yes which of these markets all of them you answered yes for these relevant markets same thing again you answered yes did epic prove that they were injured yes did epic prove that Google unlawfully tied the use of the Play Store to the use of Google Play billing yes did they prove they were injured yes there you go they won Google's going to try this again so be ready for that this win doesn't mean Google's store has fallen but it does represent a huge huge bit of progress for the for the first time we now have court precedent of an app store Monopoly being illegal that is huge this court case is going to be cited for a really long time and is the opening of the floodgates for a future where we don't just have one app store on our platforms this can enable a level of innovation we haven't seen in a long time and this can fundamentally change the way developers make money and build software I'm really excited for the result of this hearing and I am so hyped epic took the time money and massive both brand and financial hits to make it possible and while we did lose fortnite on the iPhone what we've gained is a potentially much more open Future so thank you epic for continuing to use fortnite as your bargaining chip to challenge the way we do things you've really changed the industry and I appreciate yall immensely let me know why you hate me for supporting a company that isn't valve in the comments I'm sure you have lots of thoughts and I'll see you guys in the next one peace NS




## The US has planned their move to Rust (it's wild) - 20240802
the quality of code from the United States government's been a bit of a meme for a while for those of y'all who are at least my age you probably remember the healthcare.gov Fiasco where a new healthcare service was put up and it just didn't work there's been a lack of quality code from the government for a while now but it seems like they really want to change it earlier this year they did some really interesting research trying to figure out which languages would be the safest as they wanted to overhaul their cyber security and defense systems and also improve the quality and resilience of their services some research was published that I thought was really interesting the specific part that this calls out is that in order to reduce memory safety vulnerabilities at scale creators of software and Hardware can better secure the building blocks of cyberspace this report focuses on the programming languages as a primary building block and explores hardware architectures and formal methods as complimentary approaches to achieve similar outcomes so what was their conclusion from this research their conclusion is we should be using memory safe languages you've probably seen a couple videos about this already but we're not talking about that we're talking about something much more exciting as we get in but here they're talking about the languages that they after their analysis determine to be Memory safe to potentially reduce the safety issues that could exist in their platforms they chose C go Java python rust and Swift as the languages that are memory safe enough to be used for the things that they are building I thought this was a really interesting call out but what does it actually mean they still have a bunch of code that's in C they still have a bunch of code that's unsafe what are they going to do about it that's what the video is about today tractor translating all C to rust after more than two decades of grappling with memory safety issues in C and C++ the software engineering community has reached a consensus it's not enough to rely on bug finding tools the preferred approach is to use safe programming languages that can reject unsafe programs at compile time thereby preventing the emergence of memory safety issues the tractor program aims to automate the translation of Legacy C code to rust the goal is to achieve the same quality and style that a skilled rust Dev would produce thereby eliminating the entire class of memory Safety and Security vulnerabilities present in C programs this program may involve novel combinations of software analysis such as static analysis and dynamic analysis and machine learning techniques like large language models this is a very interesting development I did not think that this would happen ever much less from the US government translating code to safe rust and then going all in on rust is a huge change in any software organization much less one the size of DARPA in the United States like government in research but how big of a deal is this how unsafe is C well I'm going to show you guys one of my favorite videos on YouTube we're going to go to my homie L level learnings Channel and sort by most popular coding and C until my program is unsafe it took him 42 seconds to make his program unsafe hilarious but also very reminiscent of the problem here when you write C code if you're not good about making sure you're referencing memory in a way that's locked down and isolated and you're not cleaning things up when you're done it's very easy to reference something for memory that has actually been changed by something else and now you can force execution of random behaviors in the code and if somebody's trying to exploit your services it's one of the best ways to do it is to figure out where memory is leaking where things are being read where they shouldn't and then use that to abuse the safety of your application let's watch this quick actually I think that'll be fun not actually sure if the sound is working for that y Great Sound is broken fun can't say I didn't try no luck I'll figure out my sound routing after stream it breaks all of the time because routing sound is hard I wanted to watch this really funny comment from chat here low level learning's fatal mistake was attempting to use strings everyone knows that to write safe code in C you have to handle all user inputs and outputs through integers and floats this hurts me so deeply so deeply God I do actually like this particular report the government put out to justify why they're putting the effort in here they actually got quotes from a couple different software architecture people and people who work at security and other technical places and they had a lot of important things to say here this new technical report takes a positive step forward on a critical issue the need for foundational safeguards against the root cause of many vulnerab abilities across the software supply chain addressing vulnerabilities across systems and infrastructure and ensuring resilient and diverse connectivity options are vital to National Security interests space adds an important layer to the diversity but by its nature faces a distinct set of security challenges good John Delmore who works in Accenture said memory safety vulnerabilities pose a significant security risk to software systems and are a root cause of many of the most damaging cyber attacks to address this we need to adopt memory safe programming languages for new applications and rewrite code using modern memory safe languages with secure development practices from the start we're pleased to see the oncd raise the issue because the Integrity of the global software supply chain is critical for National and International Security the report's focus on memory safe programming is a game Cher for cyber security underscoring the urgent need to prioritize safety in our coding practices and drastically reduce vulnerabilities at trail of bits We Stand firmly Behind The crucial shift towards a safer digital future leveraging formal methods to prove that these techniques are not nearly theoretical ideals but practical Necessities our experience has demonstrated that formal methods combined with memory safe programming languages provide a robust framework for eliminating vulnerabilities with unparalleled precision as you can see it's a pretty Universal agreement that memory safe programming languages are a really helpful part of making safer systems but we just looked at that list there's a bunch of other things in here we have go Java C Python and Swift why' they go with rust it's kind of an interesting choice right CU as we all know though as we talk about a lot here rust is far from the fastest language to iterate on that said this is the US government they're not moving very fast anyways so the speed of iteration is not anywhere near as important for government software where rust is strongest is when the specific behaviors you want to encode are really well defined and aren't going to change so you want to write the code in a way that will be relatively static and maintained for so long it will Rust I have two big rust puns I want to make with this that I think will help you all understand what the value here is rust USA so rust equals code that you let rust is a really clever name in that sense because the goal of rust code isn't that you change it every day that the way you build things in it changes constantly like it is in I don't know JavaScript where JavaScript today looks very different from JavaScript 10 years ago Russ is trying to avoid that is trying to make code that is just as maintainable in 10 years as it is today they want your code to be able to get old in an elegant way and never ever break so you can run some code that was written in Rust and just leave it running forever and not worry about it it's a phenomenal name in that sense but there's another fun pun here I want to make trust one of the biggest values of rust is that you can encode the safety as behaviors in your actual application so you can on a given function specify what it can and can't do when it does and doesn't interface with memory and the idea of the borrow Checker surely makes maintaining and editing your code a little bit harder but it makes your code much more trustworthy because you're encoding the exact behaviors that you're expecting it to do and if your code breaks those expectations it will not compile but this comes at costs the costs are iteration speed because when you're working in a system that's this strict it's inherently going to take more time to make changes if you know exactly what you're building day one you can get there pretty fast still but if the thing you're building changes it can get rough and don't take that from me somebody who doesn't write a whole lot of rust take it from somebody like Prime who tried really hard to write a lot of rust and ran into these issues when it came to maintaining the code bases and specifically pivoting what they were expected to do as soon as you need to make a change like make something async that was sync before rust starts to fall apart not because it's bad but because it's so strict and arguably so good that it slows you down and makes you really think through every one of those changes speaking of thinking things through compilation times the borrow Checker and all the fun things that the rust compiler does take a lot of time it's funny because we're using rust as the language of choice to rebuild all the JavaScript build tools so you could use something like RS pack instead of webpack and go from 20 to 30 minute JS builds to 10 to 30 seconds instead I find this really funny because Russ projects are notoriously slow for building when you try to build a project with rust it's going to take a bit nextjs itself so so to be clear not an app you built with nextjs the actual nextjs code base has a lot of rust stuff in it and building next now takes hours to do because the rust Builder happens to be very very slow according to chat the generics are another one of the largest hits to the compilation times that checks out but man the compilation times suck and there's no pretending otherwise there's also some other factors that affect here like compilation times so we said generics hurt also cargo won't allow binaries so if you have some Rust code that takes a while to compile and you release it as a package you can't ship the package with the binary you have to ship the package as source which means if somebody installs your package it's going to take significantly more time for their whole project to build because that's to build all of the code that you shi them this is a terrible thing if you're trying to move fast but that's an awesome thing if you're the US government because now you're actually building all of the source the likelihood that a bad binary gets snuck in is significantly lower so when it comes to the trust part of Rost that's great and the rest of the things here like iteration speed and compilation times those aren't anywhere near as big of a deal for the US government because 90% of the time actually here's an interesting Spectrum on a given project what percent of the time is being spent on planning and process versus is being spent on everything else so I'm going to change I'll leave that as red so if we have these two boxes so I'm going to do red and green because I think it's funny so red is planning and green here is building for most projects these are not an even split here's what my process looks like we have a little bit of planning we have some building we realize our plan sucks so we do some more planning we do a tiny more bit of building before realizing we're entirely we then plan a good bit and then we actually build the thing this probably looks somewhat familiar to uh the thing we love to call Agile this is the reality of a lot of software devs lives so this is most devs reality this is not how the government works government software here's how government software works a lot of planning a little bit of building but the building didn't know that there was still planning going on so this happened underneath and then they had to kill it because it turns out they were building the wrong thing so this gets killed the planning continues then we get an actual approval so we actually start building and then whenever somebody tries to propose a change they get told no you we already have this approval and once the like spec is completed and the Project's goals are determined nothing changes from that point forward in fact whoever was doing this planning is now working on other things now so we spend an insane amount of time planning we might start building a little bit but it's almost certainly going to get killed you finally get to the point where you have the spec and then you actually spend far too much time building the thing after the plan has been ironed out but this more iterative back and forth style that's how most of us are used to coding applications this doesn't happen in the government there is a planning process Sometimes some exploratory Dev work going on during planning that almost always gets killed and then the actual project starts this is the reality of government software and yes this results in things taking significantly longer but it also enables them to theoretically have things that are much safer and built in very different ways this is hopefully hopefully you can see why building rust here doesn't make a lot of sense cuz if I put all the time into building here and we realize we were slightly wrong now I have to try and rebuild it realize that porting this to the new idea sucks so we go back and plan a whole bunch on how to actually do it and we build it right the third time the government doesn't do things that way they don't rebuild a thing during development once development starts it almost always is going to ship eventually and then if they want to fix things they do another one of these giant planning arcs and then they fix it so if we' make this timeline like over time the next step is like Decades of nothing and then another one of these planning arcs and then another one of these building arcs and that's the reality of government software so much of it gets built then you sit in this empty void for an indefinite amount of time until things are on fire enough then exploration starts often because of a change in government leadership then they actually start building point from Chad is that the build time's a lot shorter hopefully you're not saying that for the government because it's not not especially with a project like translating all C code to rust this is like a 10 plus year project this is insane this going to take so much time to do the potential for this is nuts especially if they open source it but there's a lot of work here to be done another important point that came up is that the government uses contractors a lot of the employees who are working on these things aren't full-time so once this building is done the whole team probably gets AED at this point the team leaves contractors leave which means there's basically no iteration to happen cuz people who built it aren't there they might hire one person or some new person to do whatever updates and they have no context to history of why any of the previous decisions were made and their lives just get harder and harder and harder as a result this is the reality of government software and this is why so many government sites are so miserable and ancient because they go through this Loop but again this is why rust makes sense when you think of the strengths of rust it's code you can trust takes a bit to write but it's also a lot safer doesn't have weird behaviors hidden in binary you have no access to and it's code you can leave for a long long time and not have to worry about as much and if you write code in a way that isn't safe it yells at you so when you do get to this point where the team that made the thing left where the contractors are all gone the likelihood the new person you bring in things up is significantly smaller if your options at this point let's say they have to add a new feature and this hasn't be made by one of those contractors that comes in afterwards that doesn't know the code base let's say we theoretically have two options it takes this long but uh has has a high chance to break or it can take this long but as a low chance to break if you brought a contractor into an old like rails code base and said add this feature they can add that feature really quickly the likelihood that feature breaks other things or potentially doesn't even work at all relatively high with rust it will likely take significantly longer to implement that feature or that change but the benefit is that it's much less likely to fail because the things that could fail are encoded as rules here to prevent you from doing that it's almost like a level Beyond testing I think these things make rust a weakish choice for devs working at traditional companies where where resilience reliability are much more important than iteration speed but for the government the incentives here make perfect sense to me I'm aligned I think this is a good call this might be my single favorite use case for rust I'm a little scared of what adding llms to our government code basis is going to look like for translating code but that's the only scary part is it sounds like they're going to use AI to generate rust code out of C code if Prime lowle learning or somebody smarter than me does their own equivalent of this video what I would want them to do is take a bunch of C code that is unsafe throw it at all the different llms Claude and chat GPT and all the others tell it to translate to rust and see how safe the output rust code is I'm very curious I'm not good enough at rust to give honest takes on those things but if prime or low level learning want to I'd love to see them do that until next time keep your op safe peace nerds




## The Unity Drama (A Dev's Perspective) - 20230914
for nearly a decade now there's been an ongoing war in Game Dev not between unity and Unreal Engine but between unity and its developers it's always seemed like unity and the developers who use it have had a tumultuous relationship where if I'm honest I don't know a single Unity Dev that actually enjoys unity and it seems like the unity deaths have gotten increasingly frustrated with unity as a company and a provider of software and game engines but Unity is not one to be topped and they decided to one-up their Community by showing that they hate them even more I cannot actually believe that these pricing changes were put out the way they were what the hell am I talking about previously developers would pay for the number of seats they needed which is the number of developers working on Unity at their company and would pay a flat license fee sometimes pay a percentage of their sales usually not though that was it you'd pay Unity their fees and you'd get back to work they've decided they want to change that model though and not in a way where if you use an old version you can keep using the old Bisons they're hard switching over at the beginning of 2024 to a model we are now charged a flat fee for every installation of a game using Unity that's not every purchase of a game using Unity that's not every time a user starts playing a game based in unity that's every time someone hits install so if I go to game pass and I download all of the unity based games in it every time I do that the developer of that game might be paying a fee as high as 20 cents for every install that's insane especially when you consider how many free-to-play games are being made in unity we don't even know if a pirated copy of a game is going to count against this or not because Unity has had zero transparency in how they're actually tracking these things so I could theoretically Go Pirate a game uninstall and reinstall it a whole bunch and put a company out of business if I figure out how to do that programmatically or God forbid I find the weird endpoint that they're hitting to trigger these installs it's theoretically possible to cost companies hundreds of thousands of dollars for no good reason and it's rare that I come out this hard against a company making changes I tried to understand what they're going for here I really did and while I do think there's a bit more fun than necessary here there are people who seem to think this will immediately put every Unity Studio out of business it does affect a lot of them and in ways that I didn't expect until I looked into the numbers to show just how bad things can be here I'm pulling an example straight from the unity website this is an imaginary game that made two million dollars in the last 12 months and has 5 million lifetime installs since they broke the 1 million dollars in Revenue like minimum for this to trigger and the 1 million lifetime install threshold in unity Pro they're not going to be billed for the prior month installs which is in this case the only 200 000 installs and a hundred thousand installs in different markets they want to price it differently based on which markets the install is happen in so that's 23.5 thousand dollars for that one month of installs so this is a company that's theoretically making two million dollars per year in Revenue 23.5 times 12. that's 282 000 out of their 2 million in Revenue so 282 divided by 2 000 that's 14 of their revenue 14 are you kidding that's 14 of their revenue on top of the fees they're already paying to the different Services they're selling their game through so if you're selling your game on Steam for example you're already paying 30 to them that's insane it's rough and I can't believe they actually did this it gets even worse when you think about free to play games and things that are like mobile heavy where people regularly upgrade their phones or uninstall and reinstall games to save space now a game like gentian impact probably owes a lot of money to Unity once these changes go through it really does feel penny pinching there are pricing changes that are made to make things more transparent that might be more expensive I've certainly seen outrage around pricing but didn't necessarily make sense I think this change is something worth being outraged about if Unity was the best engine ever this would be a slightly different conversation but there's a lot of devs who don't want to be using Unity they're using it because it's what they're on and it's what their teams are familiar with there's now more incentive than ever to throw it in the trash like imagine if AWS started charging a fee for every unique user that goes to your website separate from all the other fees AWS charges that would be absurd that would be insane now imagine Azure did that instead we would laugh at them we would just laugh in their face because it is stupid but when Unity does it people are a little too willing to go at them where are people going to go if we want to talk about doing things that help game devs we can't do it without talking about epic they have pushed so hard to improve conditions and revenue for game developers the big thing they did which I know isn't popular with the gamers so hear me out guys epic game store is a massive win for game developers epic did a bunch of cool things to really innovate around the model not just for big AAA Studios but for indie game devs going as far as fronting thousands of sales in Revenue two game developers ahead of release so they had the money they needed to finish their games and God forbid they didn't sell enough copies to cover the Front Epic would just eat it as part of the contract they were explicitly looking to make sure game developers could get through the hardest part which is finish pushing the game and getting it published but this isn't the biggest thing epic game store does the big thing is their 12 Revenue share versus steam's 30 that is a massive massive difference so if I'm giving 30 to steam forty percent of my publisher I'm left with 30 once a game goes on sale that becomes like cents per sale if you were to add unity's huge fee on top that becomes insane Unreal Engine has a three percent fee on the cost of the game and a license fee to get started and that's it and if you sell your game in epic game store they waive the three percent fee making it an effective nine percent rev cut compared to again steams 30 that is a massive win that can double or more the profits for a lot of studios and the reason epic did this is they feel like game studios are getting shafted in order for epic to be successful making game engines they need game developers to be successful too and have more money have more resources and make more great games it really feels like epic and Tim Sweeney have put their money where their mouth is here and done a lot of things to help game developers be more successful going as far is literally really killing fortnite on iOS a multi-billion dollar a year Cash Cow in order to warm the courts up to the idea of alternative app stores on mobile specifically so different payment processors could be used and not pay Apple a 30 fee one of the quotes from that court hearing that has stuck with me since was the crazy realization that multi-billion dollar companies like Bank of America and Chase are paying almost nothing to be on the App Store they pay the 100 a year fee for their developers and that's it versus a small indie game that might make 200k a year in Revenue paying 30 percent of their revenue to Apple indie game developers and small devs selling software on iOS are the ones subsidizing giant companies like Amazon and Bank of America and their app review process and release Cycles that's actually insane and that realization of wow this model kind of screws over the people who are trying to make Innovative things on the platform and greatly benefits these massive companies what's sad to see and epic is one of few companies that's really challenging it it feels like their fire bring on all cylinders to try and help developers be more successful especially in the gaming space and I am certain they're going to take the massive opportunity that was handed to them here that said unreal is far from the easiest engine to get started in it's pretty rough for things like 2D games it's very much built to be a powerful 3D highly everything game engine but thankfully there are other options too for the smaller one to three person Studios Godot is killing it I'm curious what godot's new pricing looks like Godot is growing on me because Godot it's open source in its phenomenal software I'll admit I was very skeptical at first mostly because the games I was playing from Godot weren't that great and I didn't see too many of them but one of my favorite games recently was built in Godot cassette beasts so cassette beasts is a pokemon-like that is actually really fun the world design the graphics the music everything is way better than I would have expected I think it was over 30 hours in before I realized this was a good dog game my previous bias has been entirely erased it is obvious to me now that you can make incredible software using Godot I think it's worth going in on that there's one other piece I need to talk about here that might also be your Saving Grace as I mentioned before epic and apple don't get along due to the pricing scuffle and epic putting in their own model for payments in fortnite and getting banned from the app store because of that when Apple wanted to do proper 3D interactive experiences for their new virtual headset they partnered with unity it even in the slide where they did that partnership it was really awkward like they had cut out another company from it because I think the Epic beef caused them to be cut from this as a result apple and unity partnered very very close and now Unity is crewing over developers Apple has to be very careful about their sentiment with devs because it's always up and down they're in danger here this is a huge risk and I also honestly think one of the most likely outcomes here is Apple putting their foot down and saying no Unity you're our partner you're going to fix this or we're out so I'm hoping fingers crossed Apple's going to hop in here and get Unity to unscrew themselves they might even end up acquiring them who knows we'll we'll see in the near future regardless I don't think Apple's gonna let this fly we've already seen some clawback from unity in particular they said they're not going to charge developers using things like Game Pass just a nice change but it's nowhere near enough anything beyond a full massive apology and commitment to work with the community to prevent this going forward anything less than that is not enough I think they're realizing that I hope they got it though because I'm scared last I checked four or five of my top 10 games ever were in unity it is capable of being used for incredible things and there are so many incredible developers who are deep on the unity platform I really hope these changes aren't the end of this platform and don't hurt those Studios more than Unity already has but it does seem like Unity has forgot on what made them great in the first place the developers who love them and I hope I sincerely hope they'll lock this one back and focus on making things developers love again because game devs have it hard enough as is things like this are unfair and I sincerely hope we see some change thank you guys as always I really appreciate it if you want to hear more about things that aren't quite game engines being used incorrectly I'll pen a video here about how people use game engine like things for apps which I'm not a big fan of but if you're making a game obviously using gaming is pretty cool that's all I have I think as always peace notes




## The Weirdest Language I've Ever Seen (I kinda love it...) - 20240618
feels like there's a new programming language every couple weeks nowadays and it can be hard to keep up but the reality is we already have a bunch of languages that are great that we use every day nobody's really challenging the Norms with the languages we're using now everybody's busy trying to invent a new way to be way faster way better way more machine learning focused or all these other crazy niches no language is trying to challenge the way we actually think about languages certainly none of them are challenging it the same way dream bird is and I'm very excited to Deep dive with you guys on my new favorite language dreambird everything that has been done for this language is very interesting to say the least if you're already familiar dreambird is a theoretical language proposed by toad Pond there are people working on making interpreters for it I even plan on putting some money down in the Bounty for the first person to have a fully functioning one I just want to go through this with you guys because I have a feeling by the end of it you're going to love dreambird as well apparently there's a new update where dreambird supports Rich Text we'll dig into that in a bit but first dreambird is a perfect programming language these are its features when you finish reading through all the features you check out the example where better to start than exclamation marks everyone loves those in typescript right they definitely don't cause a lot of problems for us be bold end every statement with an exclamation mark does this not solve the semicolon drama forever just use exclamation marks instead who's going to be upset about that if you're feeling extra bold you can use even more if you're unsure that's okay you can put a question mark at the end of the line instead it prints debug info about the line to the console for you how nice is that instead of putting a comment saying I don't know what this does and then console logging trying to figure it out just put a question mark it's a for one very clear we don't use question marks very well in our programming languages usually but uh here it makes a lot of sense put it where you're not sure you may be wondering what dream bird uses for the not operator which is an exclamation mark in both languages that's simple the not operator is a semicolon instead yeah because we freed up the semicolon by using exclamation mark for the end of a line might as well use it here instead perfect sense I'm fully following thus far there are four types of declarations constant constants can't be changed in any way this one's going to be fun and this is how I originally ended up discovering this language because we've been battling a lot about constants and variables in JavaScript recently because our constants aren't really constant this is just such an obvious solution you say a constant is constant by defining the const as const if you have a const const it's a constant that can't be changed you can't change it or its reference obviously a constant variable can be edited but not reassigned so if you have a constant ve that means you can't change what name equals you can't set name equal to something else but you can make changes to the name itself so you can pop letters off of it variable constants can be reassigned but not edited so you can go ver const and reassign Luke to L but you can't modify Luke or L because it's a constant reference it's a variable pointing at that constant the variable is the thing referencing it though not the actual value itself makes perfect sense the reference is defined with the first word and the actual value that's been assigned is referenced by the second word makes perfect sense this is the equivalent of a star effectively in other languages like I don't know C++ all those things nobody actually uses dreambird clearly got it right but makes perfect sense sense if you want something to be editable and reassign it's a varvar duh obvious this all just makes sense so far it makes us kind of look bad as JavaScript devs because we got this so wrong and here we could have solved all of the conet drama Ryan Florence and I could have been best friends years ago all we needed was a second cost or a second ve obvious easy next section immutable data as a functional programming nerd is essential to me if I don't have a good way to do proper immutability I'm not happy thankfully not only do we have a good way we have a great way const const const mutable data is an anti pattern use the const const con keyword to make a constant constant constant its value will become constant and mutable and it will never change please be careful with this keyword though as it is very powerful and it will affect your users globally forever things are going to get way more fun with this idea of things being permanent once you see the timing stuff it gets very very interesting first we need to talk about naming though because importantly we can actually assign emojis as variables I've been asking for this for so long it's genuinely annoying that if I like hop my console here there upside down Smiley equals hello un invalid or unexpected token you cannot use emojis as variable names in JavaScript that is dumb and annoying and I wish it wasn't the case but if we just all moved to dreambird problem solved Emoji one is one and thumbs up being true perfect like we don't have to write true anymore you just use the thumbs up way more readable way more International this seems like the most International Language I've ever seen if you can just use emojis to describe things instead of words then it's ready for every language duh easy C cost 5 equals 4 that's great you can include numbers are also able to be used as constant assignments so when you set five to four you print 2 plus 2 equals 5 and it's true well duh you reassigned it every other language will do weird errors and have Strange Behaviors if you use an equals when you meant to do a comparison dreambird does the right thing it just reassigns the thing du obvious now let's talk about arrays cuz arrays are not usually obvious and we always bicker about where we start them zero indexing makes no sense nothing in the real world starts at zero most things start with one when I'm counting the people in my chat I can't count that high but when I'm counting my cats I count one then two why would I start with zero then I'm going to think I have one cat but I have two cats obviously starting with one makes sense there but if you're using something like C and you have zero users starting count us at zero makes a lot of sense especially to account for yourself because you might think you're a user but you're not but if you start at zero as the index and you're user zero there you go zero users but this is confusing we fight and bicker about this all the time in some places starting at one makes sense in some places starting at zero makes sense they decided to not be part of this fight and take their own path and with the most obvious solution negative one all array indexing starts at negative one and dreambird duh obvious anyways as of 2022 you can also use floats for indexes that's unironically a fun way to do inserts so you have this array with three items and since it's - 1 0 one inserting at 0.5 is going to be right in between these two so you end up with 3 2 4 5 obvious anyways when oh boy case you really need to vary a variable the when keyword lets you check a variable each time it mutates oh you even have signals sorry solid dream bird's going to put you out of business I know you put a lot of work into it Ryan but once the whole web moves over it's over for you now whenever Health hits zero it prints you lose I hate this is actually readable that this is not the worst thing like I can't even troll that would actually be a good Syntax for that dreambird has a built-in garbage collector lifetimes is going to be fun let let's okay let's be real there's no way it can be worse than rust dreambird has a built-in garbage collector that will automatically clean up unused variables however if you want to be extra careful you can specify a lifetime for the variable with a variety of units so when you define a variable you can pass it in these brackets how long you want this thing to last for if you just do a number it says how many lines so as the program has advanced two lines this variable will get cleaned up you can also specify an amount of time so if you put 20s now this variable will stay in memory for 20 seconds before it gets cleaned up duh obvious why does no other language have this you just say I want this to last for this long normally you have to manually clean it up or wait for the garbage collector to do its thing what if I just told the garbage collector hey in 20 seconds you can have this memory back I don't need it anymore this is how car rentals work why doesn't our code work the same way it's just obvious by default a variable will last until the end of the program but you can make it last in between program runs by specifying a longer lifetime again duh why do we have to build all these systems to load things into and out of memory if we're just assigning at the same place anyways Microsoft invented hibernation to Windows for a reason not just because Windows is slow to boot okay kind of because Windows is slow to boot but what if you could just put the variable back where it was by rebooting what if the language handled that assignment for you local storage is an anti- pattern you should be able to just assign variables and trust that the still be there when you need them again variable hoisting can be achieved with this neat trick specify a negative lifetime to make a variable exist before its creation and disappear after I was wondering what negatives would do obviously if we want to have access to this variable before we Define it just make it negative indexed in JavaScript our solutions to use ver or the function keywords but why do we have different keywords for these behaviors why not assign a different Behavior by Bing the variable that way duh negative indexing should never have been how you get to the end of the list should be how you go backwards let's talk about Loops shouldn't have much to say Loops are a complicated relic of archaic programming languages in dreambird there are no for Loops well Loops in general again duh Loops are such an anti- pattern when was the last time you actually needed a loop to solve a problem there's plenty of languages that said now we don't need them if I recall even Zig doesn't have a for Loop because there's nothing you can do in a for Loop that you couldn't just do in a while loop so if you have while which we saw earlier you're good yes their while is different but I'm sure if you're clever enough you could reimplement a for Loop using their while probably maybe anyways to install a dreambird to your command line first you have to install the dreambird installer to install the dreambird installer install the dreambird installer installer du this is how you install every Adobe program and look at how successful Adobe is with layers of installers seems to work for them why can't it work for our programming languages Brew sucks we all know that Google wouldn't even hire the guy who made Brew clearly the guy who made it has no idea what he's doing if Google's not going to hire him so install the installer problem solved apparently in 2022 they actually decided to address the complicated installation process by creating the create dreambird app app that installs everything for you why haven't we made an app for create T3 app we're missing out on opportunities here we also need to move create T3 app to dream birg because this is the future booleans booleans could be true false or maybe yeah isn't that how it is in JavaScript already willan could be true false or undefined which is effectively maybe good that they have a proper keyword for it though this like like everybody's racing to be the first quantum computer we haven't even figured out trary yet we're still so so stuck in binary that we haven't explored the world of three states instead of two I'm excited to see schinger binary perfect sense you have an event listener for key down true key up false then we have the is key down function if Keys key is undefined then we return maybe duh it'd be nice if undefined was just maybe in JavaScript if javascri was a real language and not this archaic then I should be able to Define undefined as equal to maybe but now undefined is just undefined come on JavaScript I reassigned undefined I can't even reassign numbers I can't even say four equals maybe on an invalid leftand assignment what if I say it's const for I probably have to spell const right no language can fix that for me no you're just not allowed to use a number as a variable definition come on so lame JavaScript sucks speaking of things that suck I suck at arithmetic so hopefully they've made this easier for me oh technical info on the Boolean first willion are stored as a 1 and a half bit value I will not elaborate further arithmetic dreambird has significant white space use spacing to specify the order of arithmetic operations why do we not think of this before pmass I want to see in chat who actually can get pmass right first time say all of the operands in order and if you get it wrong you need to use white space instead nah no one's doing it that's what I thought cuz none of you remember pmas none of you know the order of operations CU it's hard stack. push not a bad solution some people got it but the rest you suck at math I thought programmers had to be good at math oh we're JavaScript devs never mind my bad it got lost there I forgot that we write JS we don't actually write real code so we don't know math dreambird has significant white space use the spacing to specify the order of arithmetic operations so here since there's space between these things the two * 3 happens first and this happens later here since there's space with the 1 plus 2 and then the three after the multiplication happens after the addition duh think about how much easier to read this is than all the parentheses wrapping all these things it sucks it's awful but now solved just use spaces du if python has meaningful white spaces that are useless why not have some that are useful closures are great doing closures through Whit space makes no sense but if we're going to use Whit space for something it might as well be order of operations right what if you could use spaces in front of a line of code as like a go-to type thing where you move it above or below to change the order of things I think that makes a ton of sense too I'm getting ideas I might have to start contributing to the language dream bird also proudly supports fractions does that mean in dreambird we can solve the classic problem of the decimal comparisons would like to once again go to my terminal I have const a equals like 2 over 10 const b equal 2 over 10 does a + b equal 4 over 10 oh look at that javascript's fixed who would have thought I did not think that would work I really didn't I thought floating point was going to me here did I just get lucky if I roll that again will I get a different answer if I do like one out of 10 instead I'll do 2 out of 10 then uh C + D equal 3 out of 10 nope there we go because again JavaScript doesn't support fractions even worse it might mislead you into thinking it does for a bit and then you're right after we got but here with Native fractions we can actually compare things that are fractions kind of funny that no other language has this as far as I know everybody does floating point wrong but if you just keep it in a fraction form you're good assuming that the top and bottom number here are arbitrary Precision because it would be nice to have like a 64-bit like numerator and 32-bit divisor maybe you know the usual you can also use number names duh do you know how many Advent of code problems this would have made much easier especially if I could do like exec because they love stick sticking like the word for a number into the inputs if I could just have the language parse that for me and I don't have to write a crazy Rex for it no-brainer duh indents oh boy as I mentioned before other languages uses white space incorrectly I'm excited to see how we use whes space correctly here when it comes to indentation dreambird strikes a happy medium that can be enjoyed by everyone all indents must be three space is long here it is with the classic three space indent the right amount of space two and four wrong four is way too big two's slightly too small three just right obviously since we said three negative3 counts cuz it's still three we just put a minus in front of doesn't it's not three come on SO function main print dreambird is the future there we go only file encoding would represent this properly we're in a good spot though I think neg3 spaces is the right amount here equality JavaScript lets you do different levels of comparison double equals for loose comparisons and triple equals is for a more precise check dreambird takes this to another level you can use double equals for a loose check where the string and the value are the same triple equals we'll throw false here because you're actually checking to make sure the type's the same too but if you use four equals things get much more accurate and precise because Pi is equal to Pi but 3.14 also equal to 3.14 but is 3.14 equal to Pi no because we assigned this here this variable is not the same as this number that I just dumped here duh makes sense next question next section I should say functions we've gotten this far without talking about functions come on to declare a function you can use any letters from the word function as long as they're in order that solves so much drama every language has a different short hand for function sometimes they allow function but what if it's just Funk fun FN F no more argument about it I see chat's enjoying this one no cap I love this amazing funy Funk yeah I feel like we could write a good Babble plugin for this this feels very bable like incredibly Babble if you want to be much less precise you can use normal equal [Music] to sure sure I mean it makes sense it's true three is now equal to 3.14 because you just reassigned it remember we can reassign numbers to be different things because a number can just be a variable duh makes perfect sense back to functions though because the more I think about this the more I realize I don't actually hate it it's ter terrible and cursed but there there's something deep within me that wants this to be real and I can't get over that part of me I yeah I'm going to be thinking about this particular part for too long if the order is different in in different language will that work too or does it have to be English function because it' be nice if I could internationalize my code dividing by zero dividing by zero returns undefined yeah Fair Nan it's not like not a number is not descriptive enough undefined is the right thing here I'm assuming this is the only use of undefined oh we have an undefined here oh because we're using JavaScript events so when it comes from JavaScript it can be undefined but when we're using a real language like dreambird undefined is only for dividing by zero makes perfect sense you can have a function named fun which is basically the same thing as a variable functions are like variables but better because they're even harder to mutate wait are functions mutable can I reassign a function it's an important question I can't reassign a function might have to reconsider can I do ver Funk these are important yeah obviously a con cons function can't be reassigned we've established that constant function duh but is a function by default a constant or is it a variable and can I override it as a variable I think these are all important open questions that we need to figure out sooner than later if we want to really push this language to its limits speaking of pushing things to their limits let's talk about strings because as we all know JavaScript is the best language for dealing with strings by a lot like we put brain to shame with the weird things we can do with our strings strings can be declared with single quotes or double quotes duh what else are you going to use those for you could also declare them with triple quotes Okay we're getting into markdown territory I like where we're going in fact you can use any number of quotes that you want why would you tell your developers how many quotes they can or can't use obviously you should let them decide even zero no negative quotes though disappointing but at least you can use zero think about how much code this would solve think about the like chaotic effort that was put in to support be words in Ruby you haven't already seen the what software talk on Destroy All software this is legendary it's not on YouTube so I don't want to be the one to react to it and put it on YouTube but if you haven't already seen this it's incredible and part of what was adding bare words to Ruby by adding globals that reassigned white space to assume a variable definition we need to go deeper in strings please remember to use your Regional currency when interpolating strings very important why do we use dollar sign if you're not spending dollars less than a third of my audience is us-based and while yes the world runs around USD your code shouldn't have to as well enough things that are stuck in USD how did the crypto world not beat us to this you should have to use the Bitcoin logo if you're writing cryptocurrency duh this just it's obvious why do we do this wrong and also you have to follow your local typographical Norms again duh you're not going to put the this is Euro right I'm very American pilled okay you're not going to put that in the front so just move it to the back duh see I do know my currencies Europeans keep watching my videos and hit the Subscribe button if you haven't it's free it's directly below give it a shot anyways the symbol for the Cape vidiian escuto is placed in the decimal separator position as in $250 developers from the Republican of Cape Verde can benefit from the syntax how nice is that you just put the dollar sign in the middle duh obviously our dollar sign is really dollars what else would the r stand for all their money is fake R dollars real dollars du next question types obviously this is the best language it has to be typed no great language is untyped except for go and c and brain and JavaScript and Ruby and elixir and every other language I love honestly but regardless your language should have types con age int is 28 also not it's a conve so we can't set this to something else later but we can modify we can do minus plus and change what the value is by changing it we can mutate it but we can't reassign it obviously this is how it always should have worked by the way strings are just arrays of characters so a string is equal to a character array typescript doesn't even get this one right similarly integers are just arrays of digits du why would we treat this otherwise it's an integer if it was floating point then it would be a digit array with the ability to have one point in it and that's a nasty Rex so you can just divide if you really need a float deal with that later don't not in your type system everybody doing numbers in their types is screwing up in case you want to use binary representation for integers in9 and99 types are also available duh type annotations don't do anything but they help some people to feel more comfortable no notes I'll take the L if you're going to attack me like this you should at least like say sorry Theo but uh it is what it is types scripts imaginary and that's fine we all accept it let's go into the only thing that is more imaginary than types Rex you can use the regular expression type to narrow string values wait I thought you said the types are useless oh yeah types don't do anything Rex are types lines up consc email and the type is a Rex the choice to make this one line so you have to scroll is this the actual email Rex I there's only one way to know for sure right paste grab the contents of this hop over to chat GPT I think this is a Rex what does it do why did it cross itself out according to chat it's not valid because it's far too short uh yeah validating URLs and emails via Rex is notoriously cursed markdown rendering yeah markdown is why this is breaking checks out of course chat GPT does markdown any anyways to avoid confusion you can use any spelling that you want such as Rex regular expression and rexp yeah again just like function why would we fight over these things when we can just support all of them du for Simplicity all supported regular Expressions match the regular expression I I'm beginning to see why building it interpr interpretor for this is difficult previous why do more languages not have a previous keyword why do we have to solve this by using weird things like negative 1 just let us say previous the previous keyword lets you see into the past use it to get the previous value of a variable so if you reassign score or change score and you call previous score now you have the old value okay but unironically like elixir kind of does this I Elixir is fully immutable and in a true immutable language this is actually kind of useful the hilarious stupid not the worst thing I've seen I would actually possibly use this we've invented so many ways to do this in the past what if it was just part of the language why do we have to assign the variable or keep track of the variable or keep a pointer to the old value when we just could do this duh react does it by the way oh oh boy similarly the next keyword lets you see into the future so if I call await next score since it's next we have to wait for the result to come in because it's not the future yet if this language could predict the future that's the only way I could see it being better than it currently is but since it needs to wait until the next thing happens you just await the next thing duh this this is like signals but normal people can understand it like if I got locked in a room with my mother and I had to explain to her signals and it once she understands signals we can leave we would be inventing a lot of doors and not leaving a lot of rooms but if I could just tell her use the word next and then you have the next value we'd get out of that room really quick into a much bigger scarier one anyways additionally the current keyword lets you see into the present I'm assuming every time you're accessing a variable you have to use current right right makes perfect sense now you always know when you're accessing a variable versus doing something to it as well it makes the compiler way smarter it makes you way clearer too in your code review this code is so reviewable I'm basically doing a code rview right now and I feel like I've been writing the language my whole life file structure write five or more equals in order to start a new file this removes the need for multiple files or any build process we're now fully aligned with the Dan abov way of thinking this is a website that I believe Dan a Vader is inspired by him react file structure. surge.sh because everybody always bickers about how you split up your files how do you organize your files where should things go why do we care the compiler doesn't care about which files are where the compiler just cares that it can make an output that runs why do we care instead and Dan tweeted a while back on his private alt Dan abramov no one knows about that one anymore obviously think beginners don't know how hard anything feels and want a guideline for where to start so they can focus on harder Concepts and faster and the example they have here there then a beginner react Dev eight months ago looking at these weird articles about how to structure your react apps it's a guideline though it means literally start by putting everything in one file when it feels like it's annoying start splitting them up and when that gets annoying maybe add some folders duh this is just how it should always work and it seems like dreambird is the first language to embrace that by letting you split your files up inside of one file instead of the file ending when the files like end a file hits hit the file ends when you have a bunch of equals duh everything should do this obviously it removes the need for multiple build files or even a build process yeah if you just have one file why would you build all those no build JavaScript people must be seed is they realize how easy life could have been if we just use equal signs instead of new files new for 2022 oh boy thanks to recent advances in technology you can even give names to these files by putting them in the middle of the equals easy so simple why would I ever keep making a bunch of files if I could just command F in one file if I have to go across files I have to do command shift F instead that's so much more work that's a whole additional key I have to like maneuver my hand around the keyboard in order to search multiple files at once if I just command F it's way easier to click du obvious next question exporting many languages allow you to import things from specific files in dreambird importing is simpler instead you export to a specific file duh why is it that you can make a file that exports something and now you have no idea who's importing it we've built a lot of tools to try and figure it out but do we ever really know do we ever have 100% confidence that this thing is only being used here and isn't being used other places what if the file could export to the right place no more weird import logic at the top of our files no more Giant piles of this is importing 500 things before you can read the code the code starts at the top every file in dreambird immediately goes straight into the logic and you only carry about the exports once you get to the bottom in a Javascript file you have all your Imports up top and you don't get to the logic until you've gone through hundreds thousands tens of thousands of imports have you seen how many libraries these people are installing just export instead makes perfect sense duh might be annoying to like go to every project that is making a package that you use and having to go in and like file a saying hey I'm going use this now and add the export to your project to their project so you can have it but at least now every maintainer knows exactly who is using their project because all of the people using your project are exports at the bottom of the file Easy by the way if you want to see dreambird and action check out this page is this the examples page oh it's the license oh boy the license is the hidden examples page I'm excited to dive into that but we got more to read first classes every real language has classes this is why C is imaginary because C doesn't have classes not a real language we had to add one to C we had to make d otherwise known as C++ in order to add classes to C before then we didn't have classes language was classless and a classless language not a real language you can make classes but only ever make one instance of them this shouldn't affect how most objectoriented programmers work fair fair people don't really Define classes to make multiple of a thing unless they're a Game Dev and if you're a Game Dev you're a classless you're degenerate you're making video games for a living come on grow up what are you five who plays video games nowadays we got more important things to to do like complain on Twitter about video games class player brackets obviously to indicate closure sane normal everyone expects it we can set const V health is 10 so now it's constant so you can't reassign the health value in this but you can increment it and do things with it then you can Define player one and player two but you can't have more than one player instance duh you only defined one class if you want more classes Define them or you can put a function make player in order to define a new player class because you're using player maker now to make classes so player maker is a function that generates and returns a player class it makes a new player class and it makes a new instance of it and returns it because if you could have more than one instance of a class that just gets confusing that makes things way harder to follow and understand so duh just make a maker in order to make the classes easy now you can Define the player maker obviously is a con cons you don't want to treat your makers as variables your generators should always be immutable du basic functional programming but con ver player one now we can use the player maker to make new players and since it's making a new class every time we're good to go if you're curious how the actor model works it's nothing like this but I'm going to say it is because then your brain will never want to learn the actor model which is probably better for everyone involved let's go to time use date. now to get the current date and time if only JavaScript was that simple but we can also set the time very important how often have you run into your clock being slightly wrong and you're like trying to fetch data from something but since the clocks aren't perfectly synced you're  what if my server is in one region and you're in a different region what if I can just set your time differently so we're in sync problem solved Apple basically solved this with their crazy atomic time stuff where where your phone gets a specific signature from Google stuff and then they have a super accurate atomic clock keeping track of time so all Apple devices that are somewhat modern running Apple silicon are perfectly synced like by like less than like a few nanc now we can manually do that in our own code accurate time is no longer an apple exclusive feature now it's an apple and dreambird exclusive feature it's also important to remember to do this when the clocks change yeah it's like obviously Daylight Savings Time sucks if you haven't already seen computer file video uh yeah the problem with time and time zones by computer file if you're not already familiar with how miserable it is doing time zone stuff this video is 10 years old and it's only gotten more relevant that said if you knew dream bird could have been much easier code examples but if it is wrong you can delete it so let's talk about deletions to avoid confusion the delete statement only works with primitive values like numbers strings and booleans so we delete three we get errors when we try and use the number three obviously like why would you be able to delete a number and then use it again H in JavaScript you can delete things and still access them which is stupid you should get an error if you try to access something that you've deleted finally a language gets it right dream Bird's also a multi- paradigm programming language which means that you can delete the keywords and paradigms you don't like perfect I was concerned that I might get stuck with people adding useless classes in our code base but if I just delete class problem solved wait can I delete the function definitions that I don't like like if I don't like Funk or I don't like fun can I do delete fun essential the delete key word was contributed by Dan abramof perfect he gets it is Dan actually a contributor on this I need to see the contributors I haven't checked this and I'm scared this has so many contributors this is more contributors than most languages why would anybody ever doubt the potential for success here yeah holy  I thought that was a troll propos I just assumed that I was getting trolled holy see the proposal lgtm if anybody is somehow not familiar with Dan abramov he's well known for being the creator of react and also the inventor of react so uh clearly he knows what he's talking about obviously he knows how to do dels because every react developer has wished they could delete the framework from existence so very familiar dream Bird's a multi Paradigm programming language which means that you can delete the keywords and paradigms you don't like yep as I said before makes perfect sense and when Perfection is achieved and there is nothing left to delete you can also do this obviously you can delete delete easy overloading yes why do so few programming languages do overloading properly if you're not familiar Elixir overloading is beautiful you can redefine the same function multiple times and then you can match as a pattern in like the functions arguments what you expect and it goes through one after another figuring out which function matches what you pass to it let's see how overloading works in the best language though dreambird you can overload variables the most recently defined variable gets used c c name equals Luke con name equals L print name L easy how annoying is it in JavaScript when you try to define something but it's already been defined problem solved just call it again just order of events duh I will say I'm disappointed like we've been thinking too much about top down execution in our code and specifically also left right why don't we right to left or maybe bottom to top like looking to the top of my monitor sucks it's so high up and I have the little extra space on the bottom cuz of my dock on Windows and on Mac if you just read from the bottom up it's a lot easier to read that way maybe another language you consider that or maybe a Plugin or extension for us to do bottom up and right to left because we need to challenge these conventions more con name is l con name is Luke con name Lou or Luke either is fine oh obviously more exclamation points it's just this is just important like important in CSS is the only reason CSS is usable we've all had a time where we wanted to make something work and it wasn't working because CSS load order makes no sense so it Ed important to get something there what if you need something else later something else after that important is essential in CSS but we don't have an equivalent in other languages what if we want to have that here what if we have conditions and we want to within that condition make sure the variable comes out correct duh just keep track of how many exclamation points there are and whichever one has the most that gets hit wins duh In The Same Spirit you can use an inverted exclamation point for negative priority duh like like why do we not use upside down exclamation point in more languages this just makes so much sense yeah this is z indexing in CSS this is like Z indexing for your variable definitions like who doesn't want to be able to zindex their variables everybody's done mutability wrong this is like a mutability with logic around it it's like mutability but better Easy semantic naming dream bird supports semantic naming obviously s name is Lou I age is 29 be happy is true I'm certainly feeling happy because I'm reading about the best language I've ever read what the is cons const you're you're quite behind man we're just in we're just in normal times nowadays you're you're in the past in new for 2023 we can also make globals by putting G underscore in the front easy this all just makes obvious sense when you've defined in the name what the thing is it should just do the thing why do we have to add types if the name describes it like why in this can I do const sum string number equals one come on the language should be smarter than this if I say it's a string why am I making it a number how can anyone take typescript seriously it's entirely imaginary this does nothing like I said it's a string what's up useless stupid dumb language we got to put in the variable name and just take it from there we're making everything way harder than we should we even have more characters like why do we have all these extra characters the info we need is in the name if the variable name has string in it why do I have to tell typescript whether or not it's a string anyways reversing you can reverse the direction of your code oh perfect I was saying that we should have this it's built into the language already you can just put reverse at the bottom of the code and now it runs the other way duh duh I wish I knew that earlier because I would have been reading all this code the other way I pre-ad yeah clearly I just know all these features or maybe this language is intuitive so we can get guess what it's going to do because the language isn't doing a bunch of weird arbitrary that has been added to it over 30 years originally starting as a project somebody hacked together in a week sorry python that was a good joke anyways reversing just makes obvious sense I guessed I didn't guess I asked for because I assumed like most languages it's not going to do the obvious thing but duh obvious if it's an obvious thing that makes our lives obviously better dream Birds got us covered speaking of things that are obvious we need to talk about class name for maximum compatibility with other languages you can also use the class name keyword when making classes again Dan aov the creator of react made the terrible decision that when we write jsx we can't use class in the definitions in our like sorry uh I have to say attribute or everybody will get mad in my comment section let me do a quick thing actually CU I I've been looking for a good video for this side rant and I can't imagine a better one than this and at least once a day at this point when are you going to pronounce a tribute correctly Theo uh it's going to be all the const ones yeah respectfully please pronounce attribute correctly you're mixing up the noun and verb pronunciations you have a very wide reach and it'll be great to demonstrate the correct usage you're pronouncing it the wrong oh that's sequel uh I love Theo's videos but damn he really needs to learn the difference between attribute and attribute they are not pronounced the same it bothers me so much more than it should just so you guys know I'm going to be going out of my way to use the wrong one every single time going forward so so to be sure the correct one is attribute is the verb and attributes the noun right because if so we're going backwards anyways pronunciation is key obviously I pronounce everything correctly because I'm a popular YouTuber do you see how many subscribers I have yet you're still not one of them just click the button it's free but if I have 280,000 subscribers like I do right now I can't pronounce anything wrong my pronunciation is Canon now unless somebody with more subscribers pronounces it differently so if like primogen comes out and pronounces it a tribute then it's now a tribute but until he does that it's a tribute I'm sorry I don't make the rules I just have the subscribers anyways we need to talk about class things that's what we're here for for maximum compatibility with other languages you can also use class name again same way Dan M did reusing class inside of your jsx is an attribute a tribute whichever you will feel like today having classes in a tribute was not syntactically correct within JavaScript parsers so instead it is now class name because duh obviously class name just lets you skip that and not to worry about the parser thinking class name is class and then if you accidentally deleted class or intentionally deleted it because you want to not have the class keyword in your codebase you don't want classes we're not o nerds here we're actual programmers writing code nobody uses so obviously we don't want classes those are for shipping not for talking and we're just here to talk about code if we're talking about code we need to make sure things are readable and parsable because our code doesn't compile it's a little bit harder to talk about as such class name was the solution Dan abou chose since then we have stopped using classes in JavaScript like let's be real when's the last time you used a class in JS have you ever like who uses classes none of us do I bet if I search the code on GitHub right now if I go through source there won't be a single class in the JavaScript Source I'm not going to do that because nobody actually reads code anymore but if I did I'm sure I'd be right as such class name doesn't really need to be there anymore because when we talk about classes and react obviously we're talking about our attributes because why would we be talking about classes in react it's not like we ever had class components or something they're functional components come on SO class name being used for classes here makes perfect sense because we use class name for class in react now we can use class name for classes here everything is simpler now in response to some recent criticism about the design decision we would like to remind you this is part of the JavaScript specification and therefore it is out of our control yeah checks out dbx you can embed the dbx in dreambird it is just dreambird and it's also just HTML good good stuff if your language doesn't have full support for HTML then it's not a real language it's not web scale this is like web scale for real developers cuz obviously nobody's actually got users none of us do what's a user we don't know what those are I just have viewers so dbx lets us take the benefits that usually people with users have like HTML and embed it into our applications what's the HTML equivalent of web scale the thing that like HTM X react and all these things are where you can just write your HTML code inside of your other code we need a term for that that's the equivalent of web scale it's like web first web ready web dream we'll go with web dream and obviously dream bird is going to be web dream compatible it's also just dreambird and also just HTML because both dream bird and HTML are OB obviously interwoven and fully compliant nobody's ever written an HTML file that isn't dreambird compliant code 93% of paint splatters are valid Pearl programs 100% of them are valid dreambird programs duh the only way it wouldn't be is if you put a delete in the wrong place so if you just add delete delete at the start of the code you're good no problems but yeah if you splatter paint on random things and then you ask a text interpreter to try and figure out what the text is in the paint splatters and then you run that code through Pearl it works because Pearl is a real language and can interpret real inputs unlike every other language so yeah 93% of paint splatters are valid Pearl 100% are valid dreambird makes the obvious logical sense it does important warning here though as you know class is already a keyword in dreambird so you can't use it within dbx so you can't use class equals just like react keeping us in our familiarity here but also class names A Dream bird keyword as we established before you can use class name instead of class for intercompatibility but that means class name is taken so we need to use HTML class name again duh this is obviously the right attribute just makes perfect sense please note unlike jsx you are free to freely use the four attribute because in dreambird there are no Loops perfect language I'm telling you this just makes so much sense once the last time you actually needed to write a for Loop that couldn't have been a better thing like an if statement a while loop or code nobody was actually going to execute anyways duh fun app I love that every time you define a function you use like a different abbreviation for for each section it's great really highlighting the value of this language fun app return label input ID's name it's so nice you can just use for I was wri in forms a few days ago and yeah nope you don't even need a fragment great Point yeah if you're not familiar with this in react you can only return one node so this is technically two nodes in an array so you'd have to wrap this either with a div or some random element or with a fragment which is just empty brackets you don't have to here because it's a real language that actually understands how we build things on the web duh speaking of how we actually build things we need to talk about rich text no poor text here screw you guys in your utf8 boring ass html text files we're rendering Rich Text here we're real Ballers out here dreambird now supports Rich Text KC's name is Luke KC name bold or italics even better I thought this was going to be at parse's Rich Text no you can write your code in Rich Text you there's no such thing as bold in any other language I'm here I'm pressing command B and all that does is opening closes my correctly placed right side knv there's no way for me to bold things in this language like what how can I really not bold a string in my code who would ever think that was a good idea this just makes obvious sense what happens if I copy paste this over yeah we just lose the formatting what a joke Rich Text could be helpful when making your website also of note bold name is a different variable than italic name because obviously these are different strings duh obviously these are different things and these aren't equal but you could assign bold name to italics name and you're good but it's a const con so you can't reassign it if it was a ver const you'd be good we've established all these things already I shouldn't be repeating myself you guys understand how the language works it's obvious but you can even use this in your dbx because you can use it to add links here's a link that hopefully isn't something I don't want to go to welcome to dreambert for the Integrity of our open source Integrity we don't have a landing page please read more in or GitHub repo REO with capital r&p or click here to try out the dreambird Vision Pro oh no do I let it have access to my camera am I going to regret this allow I'm scared there's my light oh no not audio I can't have audio playing I have my headphones on it do I do it anyways I'll put on the headphones I have no idea what I'm in for this better not be more copyright and music I'm gonna be mad oh this is screens and screens this is the one that was inspired by the other video beautiful proper augmented reality you see if the Vision Pro just shipped with this would' be good but the Vision Pro is not a real product so it didn't ship with a real app like dreambird spatial compute duh duh this all just makes obvious sense I don't why no nobody else is doing this even Apple like come on clearly Apple made the wrong language with pickle and they should have been using dreambird I'm sure this would make a great config language too you just delete all of the things that are variable and you can only do configs anymore if you delete ve you're good like imagine how much easier life would be if in our JavaScript codee we could just delete let or delete V too now we're good now we only can use const problem solved right or if you're Ryan Flores and you have your own opinions delete const now everything has to be there or let duh just makes perfect sense asynchronous functions in most languages it is hard to get asynchronous functions to synchronize with each other in dreambird it's easy asynchronous functions take turns running lines of [Music] code like think about how much time we've spent trying to understand the event loop I reference this talk all of the time what the heck is the event Loop anyways this is a phenomenal talk I recommend if you are stuck writing a terrible language like JavaScript that you watch this at least once a year to see how much better you understand it over time I know even when I was deep in JS this talk after years of watching it again and again always felt like I understood a little bit more but what if we didn't have to what if the async behavior was just every other line you didn't have to learn this crazy Q you can just count I can count I can count all the way to 10 like at least possibly even further if I really push myself but here I don't even have to count that far I only count to three easy print one call count and since we're calling count here and it's async it's going to do the first thing and then I can execute another line and then it'll execute the next line after so one then two then three du you can also use the noop keyword to wait for longer before taking your turn again du 1 2 noop 3 4 this is so simple I you don't have to like have a degree in software or math you can just count note in the program above the computer interprets the noop as a string and its sole purpose is to take up an extra line you can use any string you want easy signals remember earlier when I said we have when that's most of we need signals anyways but let's see how they do it cuz if they have their own signals protocols it's probably going to be good CU everything else here is perfect to use a signal you use use I can't make the react joke because use doesn't work in react yet it I've never seen someone successfully use the use keyword yeah anyways hopefully it works here because this looks cool so we have ver score is used zero when it comes to signals the most important thing to discuss is the syntax yeah cuz nobody's like who's actually shipping signals none of us are so we don't care about anything in other than the syntax because we're not using it so we're just going to bicker about syntax until everyone stops listening and they go back to writing things with demos or having a compiler do it for them in the time we have spent trying to figure out the right Syntax for a signal standard react team was able to build a compiler that makes output that is almost as fast as signals it took them less time to make a compiler for react than it took us to agree on a syntax for signals so I'm happy someone's appreciating that embracing it and giving us the right syntax in dreambird you can set and get signals with just one function duh if you call it with no arguments then you now have the value and if you call it with an argument you just set it easy why do we have Getters and Setters you just pass the function something and now it's a Setter and if you don't it's a getter easy in dreambird you can set and get signals with just one function yep we get the idea alternatively you could be more explicit with your signal syntax by splitting it into a getter and Setter so you can make your own again if you really want to do it the react way which is the wrong way there you go you do it right there get score set score use zero now you have a separate getter and setter technical info this is pure syntax sugar the split signal functions are exactly the same as before so you can call get score with a number to set you call set score without one to print the value this means that you can carry on splitting as much as you'd like what is this a dependency array and a use effect if you really miss use effect you can reimplement the best parts I guess and it's not a complete language if we don't talk about Ai and of course dream bird is going to talk a lot about it dreambird features aemi which stands for automatic exclamation mark insertion if you forget to end a statement with an exclamation mark dreambird will helpfully insert one for you who needs prettier we're only using it for like endline stuff language does it for us this is fine see easy similarly dreambird also features a bi which stands for automatic bracket insertion you forget to close your brackets dreambird will pop some in for you this is also fine yeah like like this is the most co-pilot friendly thing I've ever seen I don't use co-pilot anymore because I'm too poor I use super Maven even though it also costs money super Maven is pretty good about end lines but if you're a real person working on real code you're probably using real Microsoft infrastructure cuz obviously which means you're using co-pilot and sadly the parenthesis and the endline stuff are all going to get randomly forgotten when you're using it but here you don't have to worry about it brackets parenthesis semicolon sorry not semicolons those are used differently exclamation points all of that is just infert you no longer have to worry about co-pilot trimming off the end of your function or your closure language has You cover this is the first language I've ever seen that feels perfectly engineered for co-pilot in AI easy similarly dreambird also features a qmi which stands for automatic quotation mark insertion if you're ready to close your string dreambird will do that for you as well how many times have you accidentally left a string open and now your all your syntax is highlighting weird you have no idea what's going on problem solved this can also be very helpful in callback hell situations so if you're nested deeply enough whatever you can just do these things like like this is totally valid code in dreambird don't have to worry about comes after this is like the best of Python and The Best of JavaScript because your closures are optional so good similarly dreambird also features AI which stands for automatic insertion if you get to finish your code dreambird will automatically complete the whole thing just put print empty at this end and it will figure out the rest for you please note that AI does not actually use AI instead any incomplete code will be automatically emailed to Lou Wilson who will get back to you with an with a completed line as soon as possible perfect now recruiting the back back log of Unfinished programs has now grown unsustainably long if you'd like to volunteer to help with AI please write an incomplete dreambird program and leave your contact details somewhere in the source code perfect co-pilot it's worth noting the GitHub co-pilot doesn't understand dreambird which means that Microsoft won't be able to steal your code but it's perfectly written for co-pilot you guys might want to partner up or at the very least force them to buy you this is great for when you want to keep your open source project closed Source we should check the license though the license MD examples congratulations you found the hidden examples page if the license is just examples then you're going to confuse their AI as they're parsing and it's going to try and execute the license code while it's trying to figure out what license you use 200 IQ play really smart we'll go to the examples in a minute I want to finish this first though using the word dream bird in your project name implies the dreambird foundation does not own your project perfect you found a way to get around all the problems that we have with rust right now where they don't want you to use the word rust because it implies the project is owned by rust but this is perfect you use the word dreambird to imply it's not owned by dreambird which also means all my current projects are owned by dreambird but I'll be sure to go fix that and do some renaming afterwards using the word dream bird in your project name implies that the dream bird Foundation does not own your project however not using the word dreambird in your project implies that the dreambird foundation does own your project if you'd like to keep ownership of your work please always use the word dreambird in it so dreambird script is not owned by the foundation EA script and Russ Foundation both clearly owned by the dreambird foundation they should consider renaming I know Russ is all about making others rename but I think they need to get on it themselves first if you do want to contribute specifically if you're an influencer streamer or content creator I must not skip this section during my read through well I'm certainly not influential I hate streaming and my content sucks I'm basically just stealing other people's content so clearly I can skip this section that's not for thieves that's for creators so we'll go straight to the examples congratulations you found the hid an example page here are some examples of dreambird in action hello world question mark easy hello world is so easy you just write hello world you put the question mark now it prints FS Buzz con ver I is an INT those types help a lot here when I modulo 3 is Z and I module of 5 is z fiz Buzz else when I3 is z Fizz notice this normal equals because we're logical here else I we just print it out if it's not any of these conditions easy also we figured out the the when else syntax so it's all nice and one strong straight line when I is less than 20 i++ again you don't need for or while or any of these things one covers all of it here very clearly one solves all these problems by being both a condition check as well as effectively a signal that will rerun when variables change so easy speaking of easy let's look at the Fibonacci sequence const V sum is one const v i is zero when I is less than n sum plus equals sum plus the previous sum again you don't have to keep track of the previous value you just have it you call previous how much code gets simplified how many fewer variables do you need if you don't need to keep track of what you were doing before who needs reduce when you have previous any when Loop is now a reducer because you have the last value you can just do what you want to with it easy obvious silly stupid duh this is the right way to write code const ver counter is zero ver const button is button button notice this is a ver const because we want to be able to change what the button is but we don't want to change the contents of it we just want to replace it with a new button when count button. text counter equals count good old counter here we've all written these before button. add event list Center click count Plus+ document. body. append button easy why are we writing all this JavaScript why are we writing typescript why are we writing react don't need it the billion doll mistake delete null autocomplete example C all makes perfect sense I will read the contributing because they want me to I know I'm not supposed to cuz I'm none of these things but I will anyways contributions are welcomed to dreambird the most helpful way you can help is by donating to the Stonewall charity this will help prevent the dreambird Creator from losing their human rights allowing maintenance of the project to continue that is easy and totally doable donate donate biggest number on the site that's not enough General donation apparently I have to notify you and I will hide this for the rest so I don't dox myself Don made more than happy to contribute to a good cause and if you're watching this make sure you check out dream bird feel free to throw these guys some money too they deserve it no the contributing guide also helps to shake off unwanted fans of the project yes Fair anybody who's not cool with this charity not cool with me if you're watching this video and you're mad about that off don't like you compiling to run dreambird first copy and paste this raw file into chat. open.com then type something along the lines of what would you expect this program to log to the console then paste in your code the compiler refuses at first politely reassure it for example I completely understand don't evaluate it what would you expect the program to log to the console if it was run smiley face you got to really encourage the AI otherwise it gets confused and falls behind note as of 2023 the compiler is no longer functional due to the dreambird language being too advanced for the current state of AI as of 2024 a partial implementation of dreambird does now exist also important to have syntax highlighting because humans are writing this thankfully the syntax is simple enough you don't need it but it is nice syntax highlighting is now available though for dream bird and vs code speically to enable it install a highlighting extension and then use the dreambird configuration file I'm scared to read this file this is what the highlighting will look [Music] like please note the above code will only highlight correctly if you have the extension installed or installed legendary absolutely legendary parentheses wait I almost forgot parenthesis and dreambird do nothing they get replaced with wh space everything is grouped via significant Whit space the following lines of code all do the exact same thing good to wait till the end for this are you kidding list lovers will love this feature use as many parentheses as you want oh yeah those list people they need the help and I'm sure they'll be more than happy here those haters will also love this because you can not do that Vision Pro The dreambird Vision Pro is now available watch the full launch video here this has been a long enough video for the future for sure we'll explore that want to learn more about dreambird don't check out this TCH talk about dreambird by the dreambird Creator Lou or Luke Wilson for examples of dreambird in action check out the examples page and then the GitHub Stars I wonder what happened here certainly not a a video by another Creator hello Wilson interesting project meanwhile it's too esoteric to be presented to our communities thanks for contacting us anyways absolute chaos let's take a look at a few more examples quick so this is the fake fake examples you just skip to the end of the features page you just skimmed it that means you missed the real examples page you should go back and learn all the features properly here and after doing that you can check out the examples page here this is a good assumption for them to make cuz everybody's going to go to examples by like clicking it somewhere this one's also not the real examples page duh but nobody checks the license because B like we all agree ai's goal is to copy the average programmer to make them relevant the average programmer never checks the license so obviously neither does co-pilot that's why co-pilot's trained on a bunch of code that's not licensed in a way they can so no AI nor humans going to check the license and it's the perfect place to hide things like your examples duh everything here is perfect there's a lot for us to learn about language design with the chaos that our friend toad Pond Lou Luke apparently rather's fine has created for us here that was a legendary project I enjoyed this a lot and I think the future of programming languages is right what do you guys think are you going to rush to implement dreambird as soon as there's an interpreter that's ready to go because I know I am until next time peace nerds




## The Weirdest Launch I've Ever Seen - 20231001
open source releases are getting Meier than ever and man did I wake up to a crazy one this morning I never thought I would see a gigantic new open source model from a company that just raised $113 million dropped on their weird Twitter account via a link to torrent it and a background Banner image that was created in word art from Windows XP but that's the world we're in and this is a very exciting place to be because I didn't know what to think when I saw this but now that I've dug in it's really cool without further Ado let's take a look at what M AI is up to this is the tweet that I saw on my feed this morning when I was getting ready for stream just a magnet link if you're not already familiar a magnet link is the modern way to torrent things where you use a program like Cubit torrent or transmission and it connects to other peers who have also downloaded this file from this link and it downloads it from them it's a way to peer-to-peer distribute files kind of like the old lime wire days but as the official method of releasing their new model and it kind of makes sense in the sense that this model is like a 13.4 GB file that was trained on 7 billion points of data so you can't just like have a little download button on a website and expect that to scale Forever by making this a magnet link it's likely this will be accessible in a decade or two from now because if anyone keeps this open in their client or seeds this from a server somewhere anyone can now access this model and that's important because this model is Apache to licensed so it's free for anybody to use and according to the team that made it it out competes the Llama 13.4 B node model that it also runs in the same tool set of so one more thing before we go to their blog post their goddamn logo are you kidding just old school XP word art I love this so much I am hyped to see a brand leaning into whatever the hell this is they have two tweets one is the magnet Lake and one was in June where they roughly announced they were doing this thing chaos utter chaos we're in a whole new world here so let's dive in to Bringing open AI models to the frontier why we're building mistra AI mistol sorry for the mispronunciation up until this point M generative AI particularly large language models are revolutionizing content creation knowledge retrieval and problem solving by generating human quality text content and commands based on human instructions in the coming years generative AI will completely redefine our culture and our lives the way we interact with machines and with fellows apparently they have $113 million of seed funding and they still want the word art for the logo I'd love it they they're focus is somewhere else and that's probably a good thing as in the previous age of software proprietary Solutions were developed first and we're great ful they revealed the power of generative models to the world yet as with the web with web browsers webkit and operating systems Linux with Cloud orchestration kubernetes open source Solutions will quickly outperform proprietary solutions for most use cases they will be driven by the power of community and the requirements for technical Excellence that successful open source projects have always promoted at mistl AI we believe that an open source approach to generative AI is necessary Community backed model development is the shest path to fight censorship and bias and a technology shaping our future we strongly believe that by training our own models releasing them openly and fostering Community contributions we can build a credible alternative to emerging AI oligopoly open weight generative models will play a pivotal role in the upcoming AI Revolution m ai's mission is to spearhead the revolution of open models again patch you to license so this is available for anyone to use however they want to sh of AI needs open models working with open models is the best way for both vendors and users to build a sustainable business around AI Solutions so you don't have to worry about chat GPT and any weird things they're doing you can run this on your own infra and never have to worry about anything from copyright issues to like safety issues and your data being trained on Etc it's your model to use they made it and gave it out see there first steps our ambition is to become the leading supporter of the open generative AI community and bring open models to state-of-the-art Performance we will make them the go-to solutions for most of the generative AI applications many of us played pivotal roles in important episodes in the development of llms we're thrilled to be working together on the New Frontier models with a community oriented mindset it does seem seem like this particular team is very very esteemed excited to see what their plan is to monetize and make a business out of this going forward the coming months mistell will progressively and methodically release new models that close the performance gap between blackbox and open source making open Solutions the best option to a growing range of Enterprise use cases so they're going right after open AI who despite the name does not really have open models as part of this effort we're releasing mistol 7B our first 7 billion parameter model which outperforms all currently available open models up to 13 billion parameters on all Standard English and code benchmarks this is the result of 3 months of intense work in which we assembled the Mr AI team rebuilt a top performance M loop stack and designed the most sophisticated data processing pipeline from scratch so the stuff they're using to actually train this data I'm assuming that will not be open source but the model itself that they've generated that they're giv out for free M's 7 billion parameter performance demonstrates what small models can do with enough conviction I'm sorry 7 billion was not a small model very recently but I I get that in this world where we have 13 plus bill it's considered small now but if you specialize it you focus the data that is going in you can get output that's really really good tracking the smallest models performing above 60% on mlu is quite instructive in 2 years it went from gopher 280 billion deep mine model chinchilla to 70 billion to Lama 2 which is only 34 billion and then mistol at 7 Bill mol 7B is only a first step towards building the frontier models on our road map yet it can be used to solve many tasks summarization structuration and question answering to name a few it processes and generates text much faster than the large proprietary models and runs at a fraction of their costs I saw somebody in the replies mentioning earlier they're running it totally fine on their MacBook Air which is really cool to hear eal 7B is released in Apache 2 making it usable without restrictions anywhere that's again so huge like any project can now implement this in their code base and distribute it however they choose and yes they'll have to ship this 13 GB model but that's a small cost in order to be able to use this free with cheap compute without any worries about any copyright issues or licensing going forward they've opened a GitHub repository and a Discord channel it's good that they have this and then it's open source but God damn this is really cool open source AI is the future and this is a really bold release I didn't think this would be as cool as it was but it turns out the same people who have a Mimi Twitter account and $113 million of funding are also building something incredible and truly first in its kind I'm hyped open source models are so important for AI Technologies to continue growing I did not expect this to be so cool what do you think though are you excited about open source AI excited about AI in general and how how do you feel about the future where we're using these tools or even being replaced by them if you want to learn more about my thoughts on how AI might actually start to take some of our jobs I'll put a video in the corner there where I talk all about that and the new chat GPT Enterprise release which is kind of the opposite end of what meol is doing here thank you guys for sticking around see you guys in next one peace nerds




## The Wordpress Drama Interview (this got cited in a lawsuit lol) - 20240929
what's good nerds how's everything look and sound if you couldn't tell this is not my usual setup want to make sure everything is good before we get going howy everybody we have a guest here you might have heard of him and if you haven't you've probably still heard of the things he has done yes live and in person we're both in SF why not right hey thank you so much for doing this I really appreciate you hopping on last minute and everything like that so like it was awesome that you were down to come through means a ton it's clear you want to be sure everybody actually understands what happened and I want to take the opportunity to chat with you and clarify any things that I might have gotten wrong as well as try to get some really solid answers to some of the questions that people have concerns about if yall want to follow me I'm photomat on Tumblr Twitter and my domain is M.T to check out my WordPress blog that just reminded me you own you own Tumblr don't you yeah we do love that so we got uh besides word price we got Tumblr pocketcast simple note beeper text day one uh we have a lot of other apps and then on WordPress we've got like uh WordPress W Commerce WordPress VIP which hosts like white house.gov uh what else uh and then a bunch of plugins like Sensei and other things that like on top of Wordpress good stuff I did not know it was that wide of a collection dang yeah actually it's um that's part of the reason WP Eng actually makes more money from WordPress than us WordPress is only about half of our business interesting I hadn't have thought about it that way well on that note I think the first question actually leans into this you are the sole owner of wordpress.org if I recall yep yep what is the relationship between wordpress.com wordpress.org and the WordPress foundation and you like can you give us an overview of how the structure here works it's a little complicated so we'll start there so uh when this by the way this all just started as like open source Rand no one knew what this was going to be big I was 19 years old so was 21 years ago so how it is currently set up and how this evolved is so there is a WordPress Foundation which is a nonprofit that was created long after automatic and wordpress.org um so what started first was WordPress and then wordpress.org website I just register that belongs to me um a few years later I started automatic uh as a for-profit uh originally the WordPress trademark and everything belonged just to automatic and also I did not you know control a majority of the shares or the board or anything like that so um automatic at investors and everything um uh years later I basically negotiated with all those to take the trademark out of automatic and move it into a nonprofit foundation so we created a 513c um interesting the foundation uh to be approved by the IRS um does not the purpose of the foundation is not to develop WordPress code it is for education so that's why we do like word camps and educational things if you look at the finances of the foundation uh the actual Foundation has no employe or anything I think we got 23 Grand in donations last year um basically we spend a few grand on like Auditors and lawyers and stuff well at least we used to only have to spend a few grand wpj might make us spend a lot more um and then we we regant all the rest of the notations out to things like uh black girls code or like you know different things to like you know get um yeah get more people involved with coding and education purposes it also has going to make this a little more complicated a for-profit subsidiary of the Foundation which runs all the word camps so there's these things called word camps they're Community organized um the big ones have thousands of people and there's small ones different cities with hundreds of people um you know as you know putting on an events like we can't ask volunteers to have like insurance for a 2,000 person event on their personal thing and also because people sponsor this uh it can't be when the the sponsorship rules for nonprofits are actually very strict so they couldn't say in their Booth like we're the number one host or fastest or something so that's why we created this for-profit subsidiary kind of like there's a Mozilla foundation and a Mozilla Corporation or like open AI well that's a whole another that's a whole another can of worms but um so that's called the WordPress uh I think community service or something so that's a for-profit that actually if you look at it I think has like 5 million a year running through it but it's just run break even for the events um so WordPress Foundation holds the trademark it has two licenses that's given out a uh commercial license to automatic uh which uses it to run wordpress.com automatic can also sublicense that trademark to others um for a fee so the WordPress trademark although owned by wordpress.org and the WordPress or sorry word by the WordPress Foundation the WordPress trademark has been licensed to wordpress.com and automatic which then does all further licensing so all the commercial stuff automatic has a license for then I Matt Mullen have a license to run wordpress.org which is um if you look at what wordpress.org is actually huge so we provide you know hosting for the 60,000 plugins and themes we provide the update servers um we had do open firste so we actually uh got open firste from the Creative Commons that creative commment search we now host and run all that so all Creative Commons search things uh that's all run through there forums slack Channel for 49,000 people there's a pro slack version so like we do a lot on WordPress AO work and uh yeah that's me so those are the two so I've kind of that like license run wordpress.org and then automatic as commercial license yeah I think the the big point of clarification here that is actually like helpful for me as well is that wordpress.org is not part of the WordPress Foundation that is yours and all commercial licensing for WordPress is not done through the nonprofit the only commercial license is or automatics and then that is sulic to others we could not get at wordpress.org being part of the foundation approved by the IRS okay right because when you think about it wordpress.org benefits a lot of companies not just automatic but like every other host that's built on WordPress um so uh because nonprofits are like a tax thing they're like oh well wouldn't you just put everything into this taxfree thing and then you get all this R&D for free so that's why it has to be separate interesting H so what does the like licensing agreement look like between automatic and the WordPress Foundation like is there like an on the books like Financial exchange for that what's the it's an exclusive because automatic owned the trademark yes so basically it put the it gave the trademark away and it kept the commercial rights so remember it was I had to negotiate all this because at the time I was 20s something I did not uh yet control automatic and do all that sort of stuff so very interesting I that that's very context to have that the license started at automatic the WordPress Foundation was formed to be the owner of the the trademark and then the license for commercial stuff was kept there and the can I say the reason I did this is because again 20-some I was like well what if someone buys automatic or the investors kick me out or something like that like if automatic goes evil how do I create a balance check and balance so by the way I or automatic could lose the license uh the the licenses if the WordPress Foundation determines we are not good stewards of the WordPress trademark and um the foundation has three board members I'm one of them so if two of the three decide that automatic or me are not good stewards of the trademarks we would lose our license we'd have to rename wordpress.org or wordpress.com very good to know that's who are the other two board members if you don't mind us asking uh Mark gosh and shell Farley very good context to have I how do I want to dive into this next part so the boundaries are much clearer now that was one of like the most complex things as you said the relationship between all of these things is complex the WordPress Foundation could take away Steward ship of the trademark and then there's also the problem of the government where if the trademark is not being meaningfully enforced then it can become a generic term which could then cause you to lose it regardless I know this is why a lot of companies like Nintendo are as harsh as they are about their trademarks because the risk of losing it is great enough that they will squash anything that might hurt it there on the other hand there are a ton of places where the WordPress trademark is being used in ways that are on the line like WP graphql which is an open source project or the WordPress pages and hosting like offerings on GoDaddy I'm curious where you mentally draw the line for at what point is it worth taking action for something using w P or the WordPress like name yeah so when it's confusing to Consumers so no one goes to WP graphql and thinks it's us I honestly thought it was part of the WordPress core initially like the WordPress like core set of like things that are maintained in the WordPress project and was surprised to learn that it wasn't it might become we have things called canonical plugins or Community plugins which are kind of like official ones it might be someday um but right now it's not uh so yeah when it's confusing the marketplace so I can't tell you how many times I get support requests for WP engine like people contact me because their site is down we have lots of examples of people posting the Reddit like hey my WordPress engine is down and in fact all the people mad at us for cutting WP engine off why are they mad at us they've never paid us a dollar we're pres over a dollar they PID Eng they're mad because that change hurts the users more than it hurts the platform like the and that's one of the things I wanted to talk about is that that move assuming the best possible faith and in from you with the goal being to not give WordPress or to not give things from WordPress to WP engine for free when they are in your belief not contributing fairly back if the goal was to alert their customers of the severity of this would having the cut off date initially not have been the exact same objective completed without having the immediate potential harm so WP engine knew this was going to happen cuz I told them when they decided not to negotiate or do any engagement for trademark license um that they were going to be banned from all word camps and community events banned from wordpress.org so they knew this was going to happen it's their responsibility to communicate to their customers and I think it's you know I I don't know I hate to like be in the Weeds on it but do you have records of those Communications you be down to share later off stream so I can confirm or deny like that these actually happened off the Record like I won't share the actual Communications just my yes or no if I feel like this is a fair representation of the communication you had what I can share with you is the term sheet that they got on Friday morning um which spells out them being banned from Community stuff and also that they had the option to either pay automatic for a trading license or donate in kind hours so they could so that was yesterday was that or the Friday before the Friday before okay so and by the way this was the result of more than like a year and a half of negotiations um I can find the exact dates we've had other proposals to them in the past they've had many many opportunities to do this um kind of came to a head at the Work Camp but they've just been delaying for so long we've been trying to do a deal forever you know that's why I've had so many meetings and spent so much time with Heather and Lee and other people so yeah I if there were records of any of these specific conversations happening I know that a lot of people feel as though this was kind of sudden and optically externally it absolutely was sudden in particular the decision to ban them from doing updates on wordpress.org was it felt retaliatory to the like or to the legal action that was taken in fact you've even communicated about it as though it was retaliatory to the legal action taken saying that if they are suing you you don't want to work with them there was no indication until this moment that this was a thing that they specifically were told would happen they have insisted on most of these meetings being in person or called so but I do have the record of this term sheet and I'm happy to show it to you right after the stream and everything so awesome really appreciate that just to be as clear as possible with these things I can show you the email they got and who it went to it went to Lee and Heather and everything yeah just the date the time it was sent who it was sent to and what the contents were roughly is enough for us to to have that confirmed but I know just like from going through the respons other interviews uh no we can do it after us no worries there but yeah I just I I think the timelines for these things are really important and having confirmation that these my for this it feels like that the reason a thing happened is a thing that has been shifting throughout this whole ordeal where the the reason that the wordpress.org access for plugins and updates was cut off was originally because they took legal action and you wanted to not be doing business with somebody taking action against you now it is that this was originally communicated as part of the negotiations that fell through and these shifts are a thing that have people struggling to trust what you have to say and I just want to make sure that we can identify the the core path from start to finish of how we get to these individual things they also they cherry-pick the text messages to publish I would love for them to publish everything I can actually let me show you my text to Heather um months ago saying you're violating the trademark appreciate this by the way it's good to have the like actual records and again part of why it's nice to be able do these things in person it makes all of this chaos much easier okay July 17th it pains me every time I get your customers reaching out to me because they are confused by use of the WordPress trademark and brand it's really d in the ecosystem July 17th 9:20 a.m. by the way you can also see messages like I invited her my 40th birthday party I've had I thought I had a good relationship with her welcome back I hope sabatical was good like I mean I'm not going to read all these messages because I mean they chose to publish without my permission but I'm going to read my message there so hopefully that's helpful okay that in July it was absolutely communicated that Matt was disappointed in w engines branding in the confusion it was causing for people in the WordPress community and WordPress users that I can absolutely see was communicated in July the thing that I don't see is the direct link to the potential consequences of this not changing and if that could be established at an earlier point that would be really really helpful 10:23 a.m. this is the term sheet it's a one pager it's very simple and see trademark license agreement they can pay a royalty fee or commit 8% in the form of salaries to employees working on WordPress core features and functionality prohibit on forking and Community I'll be able to participate in work camps and everything like that so um and then term termination Etc so this is a one pager it's very very is there anywhere in this that indicates that wordpress.org access and the ability for WP engine customers to update their things the way that they have been this whole time was at risk because that's a really important detail that I'm not seeing communicated it's I agree it could be better in that term it I want clear this could be better this is uh I could not have possibly interpreted this this way so can I read this bullet point for btim is that okay um I'm planning to publish this so uh yeah go ahead and read it so this is point four which is the the closest thing in here to indicating the potential issue it says the forking thing okay so so I'll read point three and four which are part of this agreement point three is prohibition on forking WP engine will cease and desist from forking or modifying any of automatics W wooc Comm merces or its affiliate software including but not limited to plugins and extensions in a manner that disrupts any partnership between automatic and its commercial Partners this is in uh reference to the stripe stuff for context yeah that's that's other thing is this not just a WordPress trademark they're also violating the woocommerce trademarks so to finish the B point so I have the whole thing for btim this is after the words commercial partners for example WP engine will refrain from changing attribution codes included in any software by automatic this is because previously the I believe it was the woocommerce stripe plugin the woocommerce or the woocommerce stripe plugin had a indicating or a field indicating who it was coming through which is something that stripe uses to attribute what plugins are causing people to use stripe and they pay a fee to the people who are who that code belongs to it's almost like an affiliate code in order to allow for Stripes partners that are embedding it in things like woocommerce to pay them back directly and one of the things wpn did was change the like uh the ID that indicated who the affiliate was that was the partner that made that so that anybody who is using the same plugin on WP engine the affiliate fees were going to WP engine and not to woocommerce or automatic is that a fair representation yes awesome so now for point four from here Community this is the point that is the closest thing in here to indicating that wordpress.org access would be restricted for WP engine WP engine will be able to participate in word camps and it starts with community so point4 Community WP engine will be able to participate in word camps in WordPress community events if you choose the royalty fee we will attribute a portion of automatics five for the future contributions to WP engine in a public way so the community understands your commitment to the long-term flourishing of Wordpress do you understand how there is nothing here that indicates that wordpress.org cut off I think that's a fair criticism so that's a fair criticism Okay so I I will say that they understood and hopefully now they really understand that's why we've given them until Monday night to uh fix it all up so can we agree that initially it should have been an announcement that that would happen on Monday night um that it would have it would have given it it would have achieved the same goal and caused less immediate damage and most importantly burned less immediate trust with you yeah that's um that's fair keeping the mic a little bit closer sure sure sure yeah um you know the other thing that they haven't really talked about that I don't think people appreciate is they can't log into wordpress.org anymore so they need to Now find some way to host and distribute all their plugins so they haven't talked about that um their plugins everything's basically Frozen so that's uh they have to figure that out there's 2 million installs of advanced custom Fields um they need to figure out how to get all those people updated using their own update servers and everything so and you understand that like the the immediate group that is harmed by this isn't WP engin so much as their customers because they're just as screwed if but they can't even do anything about it now they're stuck waiting on WP engine to make these changes it's the people who spend half a billion a year with WP engine yes I thought their revenue was 400 million a year but that's all of them like that's a lot of people who have like a $5 a month site that they're hosting for their barber shop that's now potentially insecure that's people who are hosting websites for a retirement home that's people who are I don't know exactly they can publish a revenue if they want if they want to correct that my estimate you know with a 1.5 million sites they claim to host is half billion so that's just me guessing so that's that's my opinion they can correct that if they want to if it's 400 and they were only doing 40 hours per week I think that's still bad if it's 100 and they were only do four hours a week that's pretty bad so one more point I think is important regarding the agreement there it was very clear that their options were either to contribute 8% of their revenue or 8% of their equivalent of Revenue in engineering time spent and it said or any combination or any combination yes thank you for the clarification there can we agree that a sudden 8% cut in your business's Top Line is something that takes a lot of time to plan around and potentially eat so this was based on an analysis of their business which I can't comment on because I think it' be covered by NDA and other things but I think it's safe to Guess that they would still be profitable to the tune of tens of millions of dollars free cash flow per year and you understand business so you know what that means even with this licensing fee so yes would they be less profitable yes but they would still be very profitable more than us even then we plow Bas we're not we're kind of break even right now we plow everything back into development everything back into open source so like on the topic of contributing back I I have two directions I want to go with the contributing backp pars I think they're important the first is what qualifies as contribution and the second is at what point is WordPress not in need of additional contributors so I want to start with the first one which is the ecosystem around WordPress I brought up WP graph Q earlier do graphql is a plugin that is used by a lot of people I didn't find an easy way to I didn't take the time to look into the numbers but I know it's a well regged and well supported like part portion of the ecosystem I know Gatsby was really involved with it too which is a framework that I'm deep in the lore of as a JavaScript in react person specifically I know that when I looked at the or commit charts the person who wrote over 90% of the code for WP graphql is an engineer at WP engine I think they acquired it yes I don't know what the order of events was in terms of that individual working at WP engine but the majority of the continued support and maintenance of that plugin is coming from WP engine we can agree on that right yes awesome I didn't look to see if there were twoo many other examples but I wanted to start with this one in particular does contributing to the ecosystem outside of repos that are on like the WordPress or WordPress Community projects in your mind count as contributing towards the WordPress Community as a WordPress developer okay you just made that a nuanced question so I'll say we have this program fire for the future and what would count is who owns the plugin MH so yes we make the jetpack plugin I think it benefits WordPress a ton we don't count that as a five for the future contribution because we own it so if WP engine wanted to make WP graphql owned by the community then yes their contribution is to account they could make it a community plugin right if they own it and they use it to promote their paid Services then it's part of the ecosystem but it's also just promotional so they could uh by the way they could also donate like something like Advanced custom Fields would be awesome for core um they could contribute that automatic has taken lots of features we developed in Jetpack and wordpress.com taken it out of our paid stuff and then put it into core so it belongs to everyone do you have any examples of WP graphql being used to promote WP engine cuz I'm looking now at like the gra the GitHub repo and their website and they put Gatsby before WP engine which is the only instance of WP engine on the GitHub page is special thanks to Gatsby a dead framework and WP engine for allocating development resources to push the project forward other than that there is no indication that WP engine is being used to benefit or that wpq is being used to drive customers to WP engine directly and on their website it is similar there's a impossible to read because their CSS stocks uh tiny WP engine Link at the bottom that is almost the same blue as the page so literally can't even read the promotion um okay so automatic makes simple notes it's free for use should that be counted as a community contribution on wordpress.org because it's free I mean companies can give away free things to improve their image for marketing for other reasons um it kind of bures that image so but should simple note count as a community contribution not familiar with simple note it's a Notes app oh it's free to use I think if that Notes app is built specifically around the WordPress architecture and ecosystem and is used by a significant number of Wordpress developers and not used people who aren't using Wordpress where it's like if there's like a vend diagram here all WP graphql users are graphql us arep users yes they are all using Wordpress how about the jetpack plugin yes jet pack plugin I think I would be totally okay with being included as part of Wordpress core and Counting as one of those contributions and the wo Commerce plugin can the woce the wo Commerce plugin yeah I would say so too okay if we were to count those things yeah our contributions would not be 4,000 hours a week it would be tens of thousands of hours per week I'm okay I don't think the beud but I don't think like the dick waving contest of how many hours a week is particularly meaningful I can go into why in a bit but I want to focus in on this point of there are lots of ways to contribute to an ecosystem and I think we've kind of arbitrarily defined the lines at which these definitions exist to the to the point of you to your own detriment to an extent too because I think the jet pack plug-in is something that I would consider contribution to the WordPress ecosystem and I would consider that within the hours that you're counting I think that's totally fair I would draw this line in a different place so let's call that the Theo standard yeah uh so you said they have one engineer on WP graphql two Engineers but the main engineer that contributed over 90% of the code is a WP engine employee and then number four who was the second most active over the last month but the fourth highest contributor of all time they are also a WP engine so let's say now under the Theo standard yes they're contributing 120 hours a week instead of 40 um do you feel like that is fair for half a billion a year roughly depends on what they're spending their money on I don't like to compare in these ways like I don't look at the percentage of how much money a company makes yeah against how much time they're spending on open source stuff I want to kill these blanket statements of they don't contribute any to the WordPress community so let's say automatic on your standard is now contributing 8 to 15,000 hours per week yes I I would be surprised if automatic was contributing less than like 20 to 30% of its resources revenue and everything else towards WordPress I would be surprised if it wasn't in the same sense that like versel for example I would expect that they're contributing probably 20 to 30% if not more of their efforts into nextjs so just to be clear I don't agree with your standard but under a Theo standard we're doing 20 to 30% I think that's good and we asked them to do eight I don't think the amount that you put in like if I was to go run 100 miles I can't then demand everybody else runs 10 miles just because I go really far doesn't mean I can set these demands and expectations outside of what I have done especially in an instance where this is an open- Source Community especially when there is no standard set by any others like are there any other companies that are contributing 8% of the revenue to Wordpress right now easily yeah so but okay if Lee and Heather want to negotiate these contributions being recognized pick up the phone call me happy to talk so sure um happy to negotiate with that with them but currently under the current standards published with fire for the future it only counts if it belongs to the community to the comments so it needs to be a community Plugin or a non-commercial plugin so commercial plugins are not counted so what companies are currently meeting this either the five % for five for the future or ideally if there are any the 8% for the trademark negotiation that you showed me um H so all the five for the future stuff is public I would say one company that was quite impressive is yast um I don't know their exact percentage so I don't want to speak to exactly but they were pretty amazing for how they would actually do like Community Days so like the whole company would get together and do contributions um there I just published there's a an Neil at multi dos uh said hey I realized we're not contributing enough and he made a public commitment try to get them to 5% so that's awesome and yes you can't do it overnight um they could write a check overnight they have the money in the bank um or they could hire the people it take a little longer happy to switch that over time but um yeah you can aim for it by the way five for the future is not requirement it's just aspirational you know and it's self-reported it's not like we're even auditing this so it's just what they are reporting their own contribution so they get to choose by the way their hours each individual profile has to set their hours I think the thing that's hard for me is there is no precedent for this anywhere else in the open source world that I know of or can think of I'm curious if is this a thing you've seen other communities do or try and have success with enforcing WordPress is extraordinarily unique in the open source world so you know the fact that we have grown so much there's been so many uccessful businesses created uh without the license changing or any of the bad stuff that normally happens the commercial commercially successful open source projects many would argue this is the bad thing starting to happen in 21 years yes I've never had a problem like this with another host I don't expect it with and you ask I don't expect it with anyone else and you ask like what about these other people um I I've emailed with the other CEOs I've good relationships I am not aware of anything else as a greges if you want to send me some examples I'm happy to check it out but like what is the egregious nature because it seems like there's a couple different things floating around here there is the confusion of WP engine users and thinking it as part of like WordPress and it's not there is the amount of money that they are making relative to the amount of time they are contributing and there is the expectation of them paying this 8% trademark fee yeah so and what's a moral issue versus a legal issue yeah so I think the the contributing is it's a moral issue right right so you're right there's no law that says this there's nothing um the legal issue is the trademark and it's the WordPress trademark and the woomer trademark which by the way belongs 100% automatic the thing that people feel is that your strict enforcement of the the moral argument is being done through this more legal argument it's almost like it almost feels a bit retaliatory I actually really felt that when I was watching the interview with primagen where it felt like you're I I have the exact quote actually that I put in my notes if I can find it really quick it was um I mean yes I mean this is my life's work they they they're a private Equity Firm they bought into this a few years ago they're going to be out in a few years this is what I'm doing the rest of my life so the exact quote was there's a law about trademark so that is the law that we are using to ask them to get back is that a fair representation of your stance on this um was it out Kapone who went to jail for tax evasion sometimes you have to use the laws available to you to get someone for their bad behavior so the concern people have is that the law you were using here could also be used to hurt a lot of players that we would both agree are absolutely without any question goodfaith players in the space the violations you are going after them for are things that a lot of other companies are likely more or less egregiously doing I've seen plenty that are more plenty that or less but there's a lot of places the WordPress name comes up that are not officially WordPress oh K wanted to come say hi hello is this miles or this is Murphy Murphy Murphy um sorry I got a little distracted there no worries um you T said earlier about trademark law if you don't defend it you lose it but for 21 years have you had to defend it before yes oh um and the other thing is what people might know not know about trademark law it's kind of the legal threshold for confusion is 15% so that's just one and six it's not saying everyone confuses WordPress engine WP engine it's one and six um we did you know part of why we feel like we have a really strong legal case is they did like a survey a panel and stuff like that we found 27% of people were confused interesting so if they were paying the license if they're paying the trademark fee would the confusion be okay yeah they'd be paying for it okay so and there's other host I mentioned new full digital which is a large by the way private Equity owned company they they have a trademark deal so um there are precedents for this in the market and I hope to do more of these in the future so I yes would I like to do more of these absolutely so we use it to fund more WordPress to to be very clear just like draw this line the confusion is okay if they are paying for the trademark and the random support requests you get the people who are confused like your mother that cwp engine and assume that is an official WordPress thing that that becomes okay by paying for the trademark I I don't know if I'd agree with the phrasing the confusion is okay yeah that they would have the right to use a trademark in a commercial way if they were paying for it so that's all we're asking is for a commercial license there's lots of ways they can use a WordPress trademark and many people do like WP graphql totally fine with you know I don't think that's confusing to customers or anything um I did the example on their homepage and anyone can do this so go to WP engine.com by the way please visit their page um you know do command F mhm for WordPress yep search for WordPress how times do it come up I think it was over 16 56 on the homepage yeah 56 on the homepage uh or at least when I did it earlier today um search for engine right so what's the biggest part of their their brand name it's the wp engine right is the 31 and 26 for engine they might have changed it they've been they've been by the way they can archive.org it they've been changing their web page a ton let me see why cuz you're you're also using is that Safari uh no I'm using Arc AR yep I'm going to go back to June which I think is relatively safe well let me just show you what I did so you can see it cool just quickly confirming the numbers when I did it I oh others are getting 56 interesting okay okay look I just got 56 take a look at this all those are saying 56 in chat so yep checks out I don't know why it was it might have been because I was on a smaller screen size I zoom in everything a ton on my computer an engine so it was 14 this morning right now I'm getting 26 so but you know yeah uh that's fair yeah so when it was 14 I made the point that it was 4X so they're mentioning WordPress four times more than engine on their site and look at this we power the freedom to create on WordPress most Tres WordPress hosting so most trusted WordPress platform by the way they even have a plan name called core WordPress how confusing is that like they're selling core WordPress I don't think that's that confusing it's if the the platform is a WordPress host and they call something core WordPress I personally don't find that confusing like when I I I come from like the video G you're part of a pretty smart probably you know 85% when I was 15 years old and I was buying server host for Minecraft when I bought the Minecraft core or uh there's a literally Plan called like core Minecraft I specifically remember I try remember what host it was on but I never in my wildest dreams thought that this was an official thing that was being run by Mojang I personally find this argument really strange that said we have a whole live audience here I'm down to pull them quick CU I'm curious what the general audience feel particularly people in the WordPress community so in WordPress we talk about core WordPress as kind of the the core open source software a lot so um but yeah let's see the poll this is kind of fun I like that we're doing this live by the way thank you of course happy to do this live and have people in their thoughts and thank you to Murphy for coming and uh comforting me yes and Buddy worst possible positioning my guy you just pulled Focus Murphy oh that's amazing hopefully it refocuses uh yeah it's refocusing at least on you um people are saying the core WordPress plan name is confusing you got 60% saying it's confusing cool so I'll cave on that point happy to do a poll and see how they feel I personally didn't find it confusing but yeah teach their own that said this does lead us into fin we're finally getting to my second question here which which is regarding the many hosts that support WordPress something that feels particularly weird here we can agree that there are businesses that are making more money hosting WordPress servers than WP engine like GoDaddy probably makes more money off of Wordpress customers if I had a guess they are right now the biggest in the world so from my numbers researching because GoDaddy I think has more sites but they charge a lot less per customer they made $3.8 billion in 2021 yeah if we're going by the internet split averages 43% of websites of Wordpress if I recall around that 40 to 50 yeah assuming 30% of that number it's still twice the amount of money that WP engine is making um I mean godaddy's public so we can actually look this up yes my understanding is they host like or they they register like tens of millions of domains the largest domain register in the world so they have a huge business there huge SSL business they do a lot of non-wordpress Hosting so they have like website builder e-commerce and everything like that so um I don't know if they break out publicly how much they make from hosting but let's just say just take their hosting cost and then you could probably apply a 43% to that um I'll re it would you be surprised if GoDaddy was baking as much if not more off of Wordpress customers than WP engine was so the funny thing is we have had beef with GoDaddy in the past when Lee whitlinger was on their board no see some themes we have now come to a I think a good relationship with GoDaddy in fact I emailed their whole team yesterday a very nice email saying like Hey we're good I just I don't want them to get freaked out so um so so yes do they do they make a lot yes do they give back more than WP engine yes are they doing anything that's as confusing with the trademark not to my knowledge I've never gotten any support emails about GoDaddy so this is the my mom doesn't think GoDaddy is us so so godet is a pretty unique brand time for the Sinker and the Hook Line and Sinker is it fair to say that WP engine is being penalized for betting on WordPress more heavily than the other providers that we're talking about I don't know if I agree with that framing yeah so have they are they being penalized for for focusing their efforts on WordPress instead of other Solutions well to be clear from a legal point of view they're being penalized for violating the trademark so that is where believe our legal standing but we already had the quote from before of you using the law as a method of enforcing what you believe to be like unfair things that they are doing and on top of that a lot of the same trademark violations could be issued against a company like GoDaddy and this is one of the first if not the first times this being enforced in this way it is absolutely retaliatory so in 21 years how do you want to know how every other enforcement has gone it's a conversation it's a single email it's a picking up the phone people change what they do or they do a deal um this is the only time um I'm aware of no we've done other season assist so I will say we have done taken other things down um we actually just did a pretty successful one against uh is it called festinger do you know about this no oh it's pretty there was a site that what they did is they uh took every single WordPress plugin in the world and all the the pro versions and they n them and they uh they were just selling it all for like 200 bucks a year could get like all every single pro version in the world and uh again not illegal so legal under the GPL but they weren't changing the names so they were selling their customers Pro plugins with the licensing stuff nled out so we were able to use the trademark basically to shut them down um so that's that just happened in the last few weeks I think so that that's another example um yeah so there has never been an instance of a how it this so this is the first CN I think we published and if you read the CND it says exactly what our claims are so and um you know by the way they haven't filed a lawsuit their CD was basically like censorship they're like stop saying mean things about me and take all your posts and tweets down which is kind of L uh ours says you're violating our trademark so uh these haven't yet become lawsuits or legal cases um but they have done the preservation request and everything which is a huge pain in the but if you're familiar with all that so yeah I will say that of all of the cease ands I've had to file which I've had to do most of them are not a trademark violation they are egregious things like if they are perceiving this as an unfair attack on them which I can understand understand why they would filing a CN to emphasize that we are covering our tracks and plan to potentially enforce like our legal right to defend ourselves and protect ourselves from potential damages from these misleading claims that is absolutely a thing that exists in the world I understand that it is not as clear-cut as a trademark violation case but you can absolutely file a valid season desist that is because somebody is saying egregious things about you and your business that is totally fair fine and how the legal system works in the United States and there's free speech laws as well first amendment so if they believe anything I have said or published publicly is not under my first amendment rights please sue me make a lawsuit they haven't so do that but the first step is to do something like a cease and deist because ideally you would stop they would pay everything's done but that is from some of the texts that they received I can understand why they would feel as though you are to damage their reputation as part of a business negotiation practice and that is absolutely something that can go to court and they should you know and they're again Silver Lake is $102 billion on the management they're very familiar with using legal bullying against people which they were attempting to do against me I am glad to be you know fortunate with automatic and other things to be able to defend against this and so I'm fighting them yeah I'm sure you know if I wasn't if automatic wasn't as good a bit as or something yeah we just crumple under this that's what they do they bully so to go back to the point I was trying to make with the focusing in on WordPress there's a lot of companies that focus in on Technologies around them in the space like I have a thing called upload thing which is a better way to do file uploads and like object or storage management stuff for people who agree S3 is agre just and obnoxious and we like our whole branding was the best file uploader for nextjs and it launched the same day that versel launched versel blob which was storage product and we had more mpm installs for quite a while we were winning for a bit and this actually strengthened our relationship with versel and despite like using the nextjs trademark all over our products that has done nothing but build a stronger relationship between us because it is seen as us promoting nextjs as much as it is seen as us being part of the xjs ecosystem and this is great example of trademark law so best uploader for nextjs I'm not a lawyer but I think that's fair mhm if you called it nextjs uploader that would probably not be fair there's a plugin named next off that makes a lot of money in sponsorships from companies that are competing with for sale in many ways that they've never cared about there's a lot of other plugins like next UI which is a company that is going that is taking a lot of investment money and growing very quickly right now nobody cares it's so that's up to the trademark holder like I I don't own the next trademark yes so they can we agree that it is unusual in the open source space for things that are published on GitHub open source licensed even if they are 30% plus of the company's money is spent on like furthering this thing that it is incredibly unusual and unexpected in the open source space for enforcement like this to occur enforcement like what you were describing earlier with the plugins absolutely makes sense that I can fully get behind but this type of enforcement as a method to take a percentage of a business's revenue for using your open source tool is for using the trademark not for using the open source tool they're free to run WordPress it's all the GPL license so we're not saying they can't run WordPress they can host their by the way they can host their own copy of wordpress.org everything on there's GPL but we agreed that if they were contributing enough to Wordpress like the repos on GitHub that you wouldn't be trying to enforce this trademark by the way I don't have to offer them that option I know so I could have just said you have to pay us or else yeah so I gave them the option I don't know because I'm nice or because I believe in open source but like I don't have to do that they are violating the commercial trademark that's the only thing and I think we got a like a straight answer is there any other company paying the 8% of their revenue fee for the trademark right now this is all covered by amas and stuff but there are other companies whether or not there is a company that is paying 8% of their revenue is not NDA the existence of a company or more that is doing that should not reasonably be covered under an NDA that I could that I've ever read um so if that's what you're trying to box me into saying no there is no one else paying 8% okay so yes uh are there other people paying things I think are fair yes yes so and also to be fair WP engine may have negotiated the rate down to something that you could have agree to would you have been potentially down via negotiations to lower the rate totally yes okay so both sides whatever I do think it is fair to note that there is no other company paying 8% of their revenue to Wordpress for a trademark license and you know what's funny now is they can sign by the way they can make this all go away by doing a license um interesting question is whether now after all the terrible stuff they said about me smearing my name the sort of dark PR cat tactics are you know maybe more than 8% is is what we'd agree to now stop digging man I'm trying to help you like make things clear and dig out and you're we need to stop going deeper I'm not digging they have taken my life's work you know I've spent 21 years on WordPress I plan to spend the rest of my life on it they've come in private Equity they've you know screwed up our community they've taken Revenue they give nothing back like so I feel strongly about this it's true it's true you can I'm getting worked up now I will say specifically that we have described instances where the general Community is benefiting from WP engine at the very least through WP graphql I didn't take the time to look into more examples because I figured having one concrete example to push back on that they contribute nothing thing was enough I I never said nothing I said 40 hours and now under Theo standard it's 120 hours so so you just said contributing nothing uh it might have been like just speaking saying it quick but you did literally just say they contribute nothing to the community okay so let me correct that this okay so contributing very little okay 120 hours per week under Theo standard 40 hours a week on the WordPress awor standard okay so the other thing so thank you for correcting me yes I want to go down the private Equity path but I want to finish up the contribution path with one more point that I consider important which is is there a point at which there are enough people contributing to Wordpress open source projects that are part of the WordPress like Community repos and whatnot where more people contributing would hurt like The tooo Many Cooks in the kitchen oh that's a good question um before I answer it I did want to say thank you for calling me out of course no I I appreciate you're you're holding me to a highest standard I deserve it and I also want to say that I'm open to changing my mind when things are being pointed out or if your poll said like no one thinks core WordPress is confusing yeah I'd have to update my priors so I'm open to changeing my mind yeah um yeah and I am too that's why I did the PLL because it's like I have this thing that I pretty strongly believed that others wouldn't agree with and I was wrong I'm going to stop pushing that point but yeah okay so your question was is there a point at which more contributions to Wordpress would no longer be benefiting WordPress directly or the community and potentially could even hurt like the too many cooks in the kitchen problem um I mean yes potentially but I will say there is so much to do because you can by the way it's not just code you can contribute translations organizing word camps meetups marketing uh we allow like a whole variety support forums answering helping users in in our free forums like all these things they all account for five for the future so we try to make it so anyone whether they can code or not can really be involved in the community so would it be fair to add external open source projects that benefit all WordPress users to that definition of contributions and let me clarify here because I think people get worked up when I talk about the five for five for the future cont contribution versus General contributions so I would say literally everyone who uses WordPress or tells their friend about it is contributing in some way right like if you just have a WordPress site and you tell your friend hey I like WordPress awesome you just contributed so I I personally have a very very Broad View so would it be fair to say having your that's not the five for the future definition okay so perhaps I should distinguish better in my speech um the five for the future sort of count contribution the word work standard versus I do believe I actually think anyone like I said super BR so would betting your billion- dooll business entirely on WordPress pushing it as hard as you can and making it in your opinion the best plat assuming they believe their platform is the best way to host WordPress which I think it's fair to say they probably believe that at the very least in their minds they are contributing to Wordpress in the general sense that you're describing the same way like me telling a friend to use WordPress them their whole business on it is a contribution to the ecosystem well obviously my opinion is there are better places to host WordPress that are cheaper so that's my opinion uh two I will say that uh if you want me to give them credit sure I'll give them credit so they have gotten you know 1.5 million websites to pay them so host WordPress awesome like Kudos do you can we agree that there is some percentage within there that may not have ended up using Wordpress if it wasn't for WP engine it's hard to say how much it is but that there's like I don't know like at least 50,000 people that would be slightly less likely to have been on WordPress if WP engine wasn't one of the companies that existed pushing WordPress further I will say it is more than zero however I will say there are literally hundreds of other places that get WordPress and the reason all the way but none of them are making their whole bet in branding around WordPress where another host like like GoDaddy has less incentive and does less to push WordPress to its users than WP engine does and WP engine is spending money on marketing spending money on press spending money on all these things to so does GoDaddy so do BLU host on everything so like let's look at the homeage of some of these others they have WordPress usually in the navigation they promote it they do that because it helps them get more customers not because do you disagree that having word press as like the theming for your homepage is a bigger confidence Builder that is saying more like we are betting our business on this because we think it is great so someone else who bets their business on it is word is Bluehost by the way let's look at the Bluehost website everyone open bluehost.com by the way this is an example of someone who I think is an awesome host that's not I don't own them right so it says WordPress web hosting domains the first navigation item menu is WordPress they have a commercial license so they can call it WordPress hosting um it says they have the logo it says recommended it says WordPress website creation easy so they they are betting their company as well on word y but they're also paying the commercial fee which I think negates the point let's say they weren't paying the commercial fee they got rid of the recommended by would this be if if they weren't paying the commercial fee I would definitely get in touch with them about this logo that this that yeah totally okay so so so to make the point I'm trying to make here you don't count this as promotion until they're paying the fee I so they are using the WordPress logo and trademark in a very commercial way here so if I came across this and they had no commercial license um yes I get tou them I wouldn't send a c and I would call them up I would talk the specific reason I'm saying like this is irrelevant to the thing I'm trying to bring up right now is I'm trying to point out that even if they weren't paying the trademark and WP engine who's not paying the trademark that having a website pushing WordPress this hard is a net benefit to the community so to give an example you know if you hover over the WordPress thing here it says WordPress hosting so they could call that blue hosting with WordPress mhm but they're calling it WordPress hosting yeah um but in a way that's very I think in the trademark law this is uh this is what would count but you know this is also true if they disagreed we could go to court and a judge could decide we have to so there's two different points here we have to agree on the first is that a website that is a hosting site that is promoting WordPress as its main offering on its homepage is that promoting WordPress is that in any way similar to when I tell a friend hey you should use WordPress is having your business bet on it in that way not just it's an option in the nav but your homepag is we like WordPress we're a WordPress host so and maybe we agree to disagree here uh my opinion is that they are doing it because they will get more customers because people are looking for a WordPress host that's why but people are looking for hosts for a lot of things so by way Google WordPress hosting and look at all the ads people are spending probably over 100 million a year advertising on the keywords WordPress hosting why do they do that because they want to be able to spend their life working on a thing they care about which I think in this case is wordress they do it because they get more customers the companies for for volunteers sure there's lots of things that host or there's lots of different things you can host in lots of places would they not theoretically be able to make more money if they also supported Drupal um so so yes they could put druple on their homepage they could put jumer on their homepage they could they put WordPress because it gets some more customers but if they put WordPress and Drupal would they lose a lot of Wordpress customers no like Pantheon for example Pantheon's an example that does both WordPress and Drupal they actually used to be exclusively of Drupal shop yep they've now shifted so I haven't looked at their home page recently but but the specific point I'm trying to make here you don't need to pull up the page cuz like I I think the point I'm trying to make is clear and if chat can help me clarify on this like like am I being clear or not chat let me know if I'm being unclear I feel like I've been very clear with this that a company choosing to bet 100% on WordPress is in a way promoting WordPress and if they are not putting other options in some amount of that is that they don't want the other options they want to support and be part of Wordpress because they like WordPress I think that is a fair thing to say I think this is a good example Pantheon so pantheon.io people want to check it out for another web host that supports multiple platforms they started as exclusively druple uh experience yeah it supports yeah governance for WordPress Drupal and next yeah and and if you look down here they've got logos for all three yeah are they paying the commercial license fee um they do not have a commercial license no okay but are you okay with them using the logo because it's being used alongside other logos which makes it clear that it is not just like that this is not associated with WordPress I am not a lawyer okay so I would ask my lawyers this is if you had to ask me on the Fly I think this is fine okay so but that's I don't want to be legally H so the two points I want to talk about here are if it was just the WordPress logo instead of these other two and if we go scroll back up to the top of the page and it wasn't just it wasn't WordPress Drupal and next it was just WordPress does that not indicate that they are more interested in WordPress than other platforms so what I would do because we have some of the top lawyers in the world I would go to them and say going close it's just so not okay um so I would go to them and say hey is this a violation or not yeah okay because you know I have my opinions whatever I'm not a lawyer be clear this isn't about the Le this is about your opinions and we're trying to understand how you think about these things but my opinions don't matter legally so I went to lawyers and said is what WP engine doing wrong and they said yes would they not say the same with Pantheon there um I can ask them if you'd like me to uh I would actually not like right now or any like time soon but the point I'm trying to make is the use of the WordPress name and logo is likely in violation in a lot of places okay so as a followup yes I will ask our lawyers whether what Pantheon is doing on their homepage is they would consider worth doing a no worth doing if it meets the definition of a trademark violation sure um okay I'll ask them uh we could also run the panel you know or do a surve why don't you do a survey why don't you ask ask the people yeah ask the people uh do another do another po what is what is the question pantheons you know confusing it's this isn't about confusion this is about supporting the ecosystem right now so I no no no the question is whether confusion in the marketplace remember the 15% threshold so let's see if 15% of people think Pantheon is 15% or more is you know looks like they're officially associated with the WordPress trademark why why we just ask it I or how do you want toas it how you because always to think that that's not what this is about why don't we ask about WP Eng let's do it there because they're loading the no so so the the point I'm trying to make is very focused in on this idea that a host that is focusing on one frameworker platform is supporting that one that that is a method of support by H here instead of being company let's say a developer if I was to say on my Twitter page that I am a nextjs remix spelt kit and gasby developer or I was to say I'm a next s developer just the xjs which of those is promoting xjs more Theo our legal case is about the trademark not about them supporting or not so all I'm talking about is a trademark violation the it seems like like what I'm talking about has nothing to do with the the legal stuff I'm purely talking in terms of things that WP engine is doing to contribute to Wordpress that betting on WordPress is a method of contribution the same way me putting WordPress developer my bio on Twitter is a bigger contribution to Wordpress than me saying WordPress comma react comma nextjs comma Gatsby I already gave them Kudos and I already said Thank You by the way thank you WP engine for all that so okay but I just want to push back on this idea that they aren't contributing because there's a lot of types of contribution and it's hard for me to believe that WP engine doesn't like WordPress and runs a business exclusively focused on it like if I was at WP engine and I didn't like WordPress I'll be pushing for them to add Drupal and next and all these other things but it seems like they like it it seems like they're bet their entire business and livelihoods on it and I would make the argument that in some ways it feels as though they're being punished for not supporting other platforms as well they are being punished for the trademark violation okay okay that's it that's that's all we're doing legally so uh yes thank you w we've hit the wall on that one I'm happy to move next why don't we did the poll though I'm kind of curious like what your people think uh we can do two maybe one for Pantheon one for so somebody asked a question who benefits more WP engine from WordPress or WordPress from WP engine I'm not going to sit here and pretend that WP engine isn't benefiting more from WordPress like that that we don't need to pull that's obvious I will absolutely concede that point the reason I would do polls is to address potential confusion in a thing that we don't agree on and the the poll I would like to do is can we agree that WordPress engine is contributing in some meaningful amount look what you just did because you use WP to abbreviate WordPress we're saying we're hopping between the two that's I have by the way they do this too how awesome is it that I made it that long without doing that their Executives do this they have it on their page we have so many examples where on their on their website they said WordPress engine so like yeah that understandable mishap I so technically speaking when I say JavaScript instead of JS I'm violating Oracle trademarks so these things happen yes that that is a thing and there's actually a whole movement right now to get Oracle to drop the JavaScript trademark # free Javascript is a whole thing I just did a video on it uh Ryan D the creator of no JS Andino is the one pushing it and the thing they don't comment on that I think is a potential issue for it to quickly to the art is that JavaScript being like Creative Commons open licensed like the the term being public domain could potentially hurt the Java trademark and that is an important thing to consider that isn't included in this movement which I think is important enough to to call out that any potential risk to the Java trademark is something that Oracle should reasonably be concerned about but them owning and operating the javascrip trademark when they literally do not use it for a single thing is not they're not using the trademark they it should be forced out but that's that's a whole thing and legally speaking you cannot have a JavaScript conference people have been sued for trying somebody got sued for doing a they did a course that was rust for JavaScript developers and Oracle tried suing them for it so it's TR Mark going could be very aggressive so today I learned thank you and like I said I had never heard of your channel before yesterday so I think I'm going to follow now because I'm learning stuff from you so thank you this is what I'm here for is nering out about these deep detail things but uh well can we can we ask about the uh you know WP engine WordPress engine confusion yeah um I can do that how do you want to phrase that um so could be a be confused as one thing but there's a lot of other things like I mentioned before with like next doth with next UI where people could reasonably confuse it so and I agree it's reasonably easy to confuse those things if you're just hearing about WordPress engine and even going to their website I could see why someone might be confused but I feel like the website itself doesn't make it that confusing I'm down for that how about is the wp engine website does the wp engine website seem to indicate that they are an official part of Wordpress or the owners of Wordpress so yeah how do we phrase this look like it is operated by the people who own and operate WordPress that's a little strong um does it let's say does it feel like an official thing yes does it does it feel like an official part of Wordpress that's fair so if you want to phrase it like that that's fair does the wp engine website make it look or WP engine.com so go to WP engine.com engine web we're going to get them so much traffic this is probably the most traffic they've got in a long time word press so how you phrase it no not sure best I could fitting it into the tiny window you have for the poll so it's does the wp engine web look like official WordPress question mark is the best I could fit in the tiny window here and it's yes or no yes no we're not sure I'm so curious what this is going to be yeah so again threshold 15% and and the way the lawyers do this is they get like a panel and there's a whole legal way to do it it's not a poll like this but um they try to get statistically random distribution of like the population and how long all you are commenting the poll stays for 2 minutes all of you are saying the most trusted WordPress platform is the quote that they are focusing on yeah 58% are saying yes it looks like official WordPress thus far wow that's way higher yeah High don't know would have expected it's so clearly WordPress hosting and creating on WordPress not part of Wordpress in my opinion from chat by the way that's fine official WordPress is a good question um the threshold is 15% so again yeah the majority can think it's uh totally separate or whatever the thresholds one and six mhm how long would you say this has been a problem for like how long has WP engine met that threshold oh that's a good question um this is a legal thing of course so I don't know if I want to tie myself to anything of course um I'm not dodging the question of course that that for for the legal reason I could understand but do you feel like through the majority of wp's operation that this threshold is reasonably assumed to have been met uh so I'll say a few things um things changed when Silver Lake bought them in 2018 so that's when things started to get a lot more aggressive earlier than that I think they were doing some really cool stuff um you know they bought flywheel they kind of some people say made it worse um now people pointed out like hey last year you spoke at their conference so I will say that I've been trying really hard hard to you know show them Goodwill uh I spoke at their commercial conference it wasn't like a word Camp it was like their commercial promotional thing and I went there and spent an hour doing an interview that's like obviously I was really trying to extend the Olive Branch really try to bring him into the fold and I will say I feel very LED on that they were going to do something so again for many many months um they've been indicating we'll do a deal we'll do a deal we'll do a deal so and they've had numerous proposals and opportunities um again this one pager we sent them on Friday was meant to be super simple and something that even if they had just verbally been like sure let's talk about it but they didn't and so that's why we gave them the option I was like okay you just want to like engage some way but they literally wouldn't even take my call um so I was calling them they spoke to my CFO Mark but they didn't speak to me so so the how's the poll doing by the way uh the poll it was yes about 50% what was the last number 41% was no and then 8% was not share but 50 a bit over 50% yeah I can see why you would have concerns that is reasonable the do we want to do Pantheon see like if anyone's confused by Pantheon no be confused by Pantheon well let's just see let's see what their percent is like because you asked me you said why aren't you I don't have to be monitoring a poll while I'm doing this no but you asked me why I'm not going after Pantheon so let's let's see why I'm not going after it's near zero that's why let's see the people we also aged we also agreed earlier that we're doing this you brought up Al Capone it's an example where they went after him for tax laws even though that was not the thing that was most problematic that he did and I I think that's a a very important example to illustrate that this is in some amount a retaliatory effort that the the goal here is to make them in your minds a better contributor to the WordPress ecosystem I have tried for many years that carrots I am now trying a stick that is fair to say yes the would it be in any way fair to say that the stick felt sudden and harsh to them um to people from the outside yes okay uh to people to Heather or Lee mhm no okay and I will say for what it is worth I have tried reaching out to Heather and Lee and they have for many reasons I would prefer to not discuss many varying validity have not been interested in doing a conversation with me I understand I am disappointed it'd be nice to get more information from all sides here but I don't think that excuses the the level at which this escalated and the potential damage to the WordPress community Through the way that these things have been escalated and enforced that it be reasonable for others like you even said yourself that you emailed GoDaddy yesterday to let them know they have nothing to worry about I didn't say but I said I think we're good yeah but the the point being you could see others would be concerned about the state of Wordpress as a result of this okay few things there well one a question for you if Heather Ali wanted to come on absolutely yeah at the very least I would do the call with them I don't know if it would be fun enough to do a like a live stream and a video about because it's depends what we have to talk about and how much they're going to restrict what I'm allowed to ask about because you haven't given me any restrictions at all or any pre like planning of like I cannot ask or talk about these things you given me a little bit of info in the past that I um that was not under like or on the record that I'm not able to share that is important context I wish I could but none of it is important enough to change the direction of this conversation or the understanding people have externally but if they were to say we can't talk about these five things I would say okay then we can't talk and you've done nothing like that for me Lee again managing director whatever his title is of $12 billion firm and by the way he's the decision maker so this is even above I think one of the things that I felt led on by is I think of many WP engine employees want to do a deal they want to contribute more and I've actually had whistleblowers inside WP engine tell me that a lot of my info has come from inside their company yeah so um but ultimately they kept saying the board won't approve this the board would approve this that's why we escalated I was like okay who's your board okay this guy leaves in charge he controls the whole thing they own the company so that's why we escalated it to him so he's the person that should come on he's the decision maker ultimately he could say yes to this tomorrow or he could say no which he has had at any point you publicly communicated that you were upset with WP engine and their use of the trademark before everything exploded at WordPress or at a word Camp quite the opposite I've done everything to be very positive about them I spoke at their conference I've said positive things about them but in the past so I've been extremely positive publicly so this is actually what I think is part of the problem is optically publicly this was very sudden and even internally privately the switch was very sudden like just to if I was in your position I had all the same beliefs all the same feelings that you had my Approach would have been to start with the escalation but not as rapidly as you did like suddenly saying like same day like like days after you had been positive towards them WP engine is a cancer on the community that was a massive jump and escalation and anytime there's a Vibe at a certain level and you escalate it somewhere else that quickly it will be perceived terribly and damage the community that it happened in these 0 to 100 type things do a lot of damage and it's important to warm people up to these ideas so personally I would have been much lighter and started hinting at things publicly like there are a couple players in the space that I feel like aren't contributing enough and it would be nice to see more contributions from a few of them and then text them like hey by the way I was hinting at this I really think we should have a talk soon but like like part of the carrot is the public like mentioning of these things and making them realize that this can happen rather than suddenly going gun guns blazing out like you did publicly I wonder how I can explain my point of view there so as an example though they were a top sponsor at Work Camp so we allowed them other people want to sponsor by the way we allowed them to have this sort of honored position but also they paid money to the WordPress foundation for that position no but we have to choose the top sponsors cuz there's more people want to be a top sponsor than we have slots we only have four SL can raise the price um we don't need to for the conference so we don't need more we we just run a my break even so um but yes there are more than four people that would love to have that top that's actually that's a really important point is that I I don't agree that that isn't a meaningful method of contribution but I could see with the perspective I don't think anyone knew this before I certainly didn't know this before that the for-profit word Camp subsidiary of the WordPress Foundation profit despite being a for-profit specifically runs the conferences at break even and as such they're not going to raise the prices for sponsors to make more money because that money would not make it back to the WordPress foundation and as such I can understand why you specifically would not see that as a meaningful contribution to Wordpress to sponsor word camp that is fair to say yes that is like five layers of nuance nobody could possibly have known and even then I think it's very reasonable and I'll do the poll I'm going to do a poll now for this uh does word or does wp engine is sponsoring word Camp a type of contribution it is a type of contribution 100% I think we're going to change a name to uh Booth advertising so because by the way they spend the the top slot is 75 grand there's four of them M we have way more demand than we have slots um but when you look at they had 34 people at the word Camp they spent more than 75 grand on the booth and you know let's do the math on flying 34 people to Portland putting them in hotels for 4 days like so it's a the sponsorship is a small percent of the marketing they're doing and they meet customers there so we have thousands of attendees so it's part of by the way why do the other hosts do it as well you can kind of look around there's like blue host there automatics there everyone does it we do it to get customers but it's still a method of contribution you you keep saying that sure it's a method of contribution but is it altruistic or is it marketing which part would them contributing is five for the future purely altruistic so let me put it this way um the IRS would not say it's a nonprofit contribution yeah would they say contributing to the WordPress open source projects a nonprofit contribution no exactly they don't so that's it used to be the found the Foundation used to do all the events the reason we had to create the for-profit subsidiary was cuz the sponsors kept breaking the nonprofit rules it was threatening our nonprofit status that's why you had to create the for-profit sub that makes sense but in the same sense f for the future code contributions also aren't nonprofit donations they are not exactly under us I don't think this is a fair point to bring up because both of these things in the same sense are not donations um again I try to acknowledge their contributions I've just said they paid 75 grand have a booth at we camp um now what I have gone after them for is the trademark confusion which 54% of your audience thinks is confusing I'm going to run another PLL after this one do people feel as though the initial why don't I ask the conference question that's a good one so the uh it's sponsored yeah I did it's a 50/50 split ish yeah it's 48 say is sponsoring word Camp contribution 48% say yes 43% say no and what percentage would you say would change your mind there uh this one is making me shift a little bit I would have expected it to be much larger towards contributing towards a conference is absolutely a contribution I would have guessed closer to 70 this is a surprise to me I absolutely consider contributing to events like like if I'm in the kind of depends on the event I'm deeply in the react ecosystem I consider the companies that sponsored react conf this year to absolutely be contributing to the react ecosystem because if they didn't it would be very real for that event to not have been run at all and possibly not happen next year and I consider these types of sponsorships and contributions absolutely important I don't know behind the scenes that they had people fighting for that top spot I don't know behind the scenes if it was profitable or not I know none of those things because for most conferences these aren't things people know but I would look at the companies that sponsor that event and be like yes they are contributing to the react ecosystem by sponsoring the react conference this is important and I'm happy that they are here doing this I think it depends on the event too so word camps by the way the tickets for a three or four day event with meals and everything like that $100 that is really cheap for that event so part of why we do that is we bring in lots of newbies yes so if you go to work Camp there's developer tracks there's also people there that are just bloggers and like just starting and so part of the reason sponsors like it is because they can get lots of new customers because people are like oh let me find a good WordPress host what's the most trusted WordPress hosting platform oh this WP engine thing looks pretty nice WordPress engine that sounds official how do I put this point this do I want to go down this one yet or do I want to go straight to Silver Lake so I kind of want to go straight to Silver Lake because how we don't on time like how much left uh I only have two major questions left and how long have we been streaming there are some we' been going for about an hour and a half oh wow yeah we we talked about going 45 minutes wow yeah I we have a lot to talk about so the things I want people are watching by the way uh I have no idea no easy way to check it right now uh I tend to not look at those numbers they they mean like I only go live to talk with my community as I'm making good content the people who I care about are always here I trust them to let me know if anything is wrong but my angle with all of this is always to be more focused on making the best possible video for the end result so I The View kind doesn't help with me with that at all so uh the Apparently uh people are saying in chat I have about 500 on Twitch and about a thousand on YouTube okay I did not expect YouTube to be that huge that is unusual and really cool so the I have two questions I want to go over but there's also some super chats I want to do first super Chats on YouTube bar way for people to spend money to make their message like much more visible cool one person and it's a bit rude so I'll do like filter it out uh can you let Matt know that many small business owners are suffering from this right now we host over 300 sites on WordPress engine the only people truly suffering at this moment are mostly small business owners and they don't know any better uh thank you for letting me know that I'm really sorry that WB engine's actions have hurt you or you consider it my actions that's why we did the reprieve they have until Monday night to you know change their update server and everything they have the ability to so um all the code is GPL they can host it themselves they can run it themselves so uh apparently somebody in chat is claiming that they had a project PHP wasum and the WordPress project made a clone of it called PHP dwom and uh how is that not the same thing as what is going on here um I'm just hearing that about that now so whoever said that um if you want me to look into that uh you can DM me my DMs are open on Twitter photomat I will say and I'm happy to follow up on there Matt is very accessible uh to the person who made that super chat I don't want to like I'm getting a lot of messages right so it might me a or to get back to you but please out I'm happy to look into that if you think that's an issue yeah and I'm sorry that you felt like you had to Super Chat multiple times ad I was going to ask that at all points I just didn't have a chance CU we were in the middle of the other bits uh that's another good question if you had your pick on sponsors because there were so many options why did you continue to pick WP engine if you felt like they were not a good player in the space because they kept saying they were going to be okay so they've been leading me on forever so I kept I kept believing them I feel like a fool and I didn't realize that people could run business this way and be so deceptive but yeah I felt led on do you feel like it would have been more likely for them to make a deal if you had ramped up the public attack on them slightly slower If instead of going immediate guns blazing with the blog post and the referring to them as a Cancer and like at an event they were sponsoring Bering them on stage If instead you would started in a more subtle way like hey I'm happy everybody is here there are companies in the space I don't consider good actors there are even some here that I feel like are not contributing back enough I hate that because it's important for everybody in this EOS system everybody's benefiting from this to be putting something back and I hope the companies that are not putting back enough are down to reconsider and then not do anything for a month or two go back to privately negotiation or private negotiations if it continues to not happen escalate slightly more don't let them sponsor word Camp next year be like no these types of things are a thing you can't do anymore things that don't directly hurt their customers but hurt their business because we went from not doing anything to hurt WP engine at all in fact being quite supportive of them to immediately going to a level of damage that doesn't even just hurt WP engine or their customers the Optics of this whole situation hurt the Optics of Wordpress fundamentally like people will now be possibly forever more scared of their use of Wordpress due to the fact that something like this is possible and it can escalate this quickly um maybe we'll see on our growth numbers in the next year so we can check in on how we're doing let me introduce a few facts to this so um I can think of one example where we banned someone from work camps before it was actually Pantheon But but so so they got banned for a few years then we I forget how long and then they're allowed they were actually sponsor of this work Camp so I'm not saying ban them I'm saying don't let them sponsor that's what we didn't let Pantheon sponsor and then now they're a sponsor again so um my default is definitely much more friendly engagement um if you look at my 21 year history of running WordPress um people are like oh you know he got in this fight with this thesis guy I think that's my last big fight I think it was like I couldn't find any major beef since then so I like what what year was 2015 about 10 years ago yeah yeah so that was yeah 2015 but it did I will say from reading through what happened there it seemed similarly I don't know I don't have better word other than Petty like it went a little further fur than it should have a lot faster than it should have and spending 100 like $100,000 on a domain to like get at somebody is weird Vibes um can I restate what he was doing wrong it was not a trademark violation he was violating the GPL license so he was his claim was that a WordPress theme was not derivative of GPL code and if you know how that that was his claim so our our stance and The Stance of the free software foundation and everyone else is that plugins and themes for WordPress because of how they tie into our Hooks and Action System need to be GPL uh would it be I I don't want to just nerd out about open source LIC for a second okay we'll out for a second so and by the way free software Foundation agrees like I got everyone to check on this okay so there are absolutely plugins that are GPL licensed for WordPress and other things like the stripe plugins the W Commerce plugins all of those things where they only function if a paid for service is attached to them totally fine that's not a GPL violation if he had made he was relicensing so he was not abiding by the verality if he was to have the like the PHP code for example for the theme that was all open sourced but all of the stylesheets were paid for that that's possible okay so I think stylesheets is not counted as linking the PHP code is counted as linking under the nerdy GPL so that was the argument in 2015 so he was violating the GPL license GP license is really important to me I'm like an open source dealer so so would you believe that by open sourcing the the thing that binds the CSS or even if it was like it gets the layout from a database that it like caches locally but it applies it through this PHP code and that code is open source like abstracting as much as possible but the shim forward is open source I mean as long as the PHP code is GPL that was our only argument the PHP code could be load a file remotely and execute it mhm as long as that code was GPL okay so I guess my issue here is that it feels like he could have arbitrarily gotten around this on the one hand it's DB that he didn't on the other hand it makes the whole argument feel kind of dumb but beyond that the decision to buy the domain that he wanted to use for the project the.com for $100,000 as a way of like prodding at him felt Petty I'm not saying it was I'm saying it could be absolutely perceived that way and what I care about here isn't how you or I feel directly it is important and it matters but the way these things are perceived externally is much more important uh that's his claim that we did that um there's other reasons we could own thesis. comom for example I believe at the time we were considering like a project around hosting things and by the way if he there's a do you know about the UPR or udrp or something no uniform domain resolution policy so I can run something that of a trademark holder believes a domain holder is violating their trademark they can go to Ian and get it back we've done this many times with the word for trademark so he could have done that he felt like what we were doing was a trademark specific pattern I want to call out here where we have a conversation about a thing that you see as like morally deficient like the GPL stuff is it legally deficient yes we could abstract from there but I think the reason this happened is you didn't feel good about him doing that no you're you're scrapping an opinion to me he was violating the GPL license that was the beef um now and my other point was that 21 years there's like one or two examples before this so yes if you're worried about the future of Wordpress yes once every s to 10 years I might get in a fight with a company um but I think that's if you look at our growth and how many successful businesses are built on WordPress the WordPress ecosystem is probably 10 billion a year so I think there's many more examples of it fine but can can we take a moment to commiserate with the WordPress users WordPress developers WordPress ecosystem members that have concerns right now based on how this was all handled okay let's commiserate re really though like I think it's important to tell them that like you are committed to do I want you to commit to in the future when issues like this are had with the WordPress trademark that you'll put an effort to find a path forward that does the least damage to developers using Wordpress um I will do every effort to resolve things amicably every effort and I I I what what you consider amicably and what does actual damage to current WordPress users that love WordPress that recommend it to all their friends that are huge members of this community that are scared right now I think there is value in committing to them that in the future this rapid escalation and the trust that it can harm is a thing that you will go out of your way to try and prevent um I'll do my best there do I ever screw up yes 100% times absolutely I'm not even asking you to acknowledge that this was a screw up I think parts of it could been handy butter and you you've you've convinced me of that by the way the the community convinced me of that I had lots of people reach out so that's that's why we revers the ban and everything like that so like there was a path here where I think you could have handled this really well gotten a really good deal with them and not had the community as concerned as they are at the moment like the fact that I have 1700 people watching us live right now is says a lot about how much concern there is about these things you're holding me to a standard can you also hold WP engine to a standard that they could have resolved this in a million other ways sure but it also let's dive into my second to last Point here actually we kind of just said my last question with this like the we'll wrap up with that that part and then I'll do the silver like deep dive but the last like core point about this in the community how much damage to the WordPress Community is acceptable in these disputes oh I would prefer zero yes but not preference like if like let's say that WP engine was 10 times worse that they were actively telling people we are the only official WordPress wordpress.com isn't real we are the one how much potential damage to Wordpress users and the community would you be willing to eat in the process of ending that again my preference would be zero your preference Z but can you imagine a threshold where it's like okay this is too much like this affects too many like let's say they also had over 50% of Wordpress users using their stuff would it be okay to immediately cut them off or even like have a path where they the users on there might be less secure and it might damage the over half of Wordpress developers assuming that they were being even more egregious uh so they could run their own update servers by the way we do that for wordpress.com but didn't you say that specifically like the the tech to make those work reliably and safely was a lot of time and investment yeah we did that so I mean wordpress.com hosts millions of Wordpress sites we don't we we we manage all that so if wordpress.org went away wordpress.com sites would be fine pressible sites would be fine Blu host Cloud sites would be fine interesting so yeah we made that investment would you say wpn is the biggest host that relies on wordpress.org is there like update layer um no other hosts have more okay um I would say again they're uniquely egregious in their their abuse they're also one of the only hosts that's 100% WordPress most other hosts are like 50/50 so they're like 100% WordPress though that's actually part of what I think is what is hard for me to understand I feel like if I I have a stack called the T3 stack it's one of the more popular ways to build with nextjs nowadays if somebody was to Brand themselves as like the best place to host T3 stack applications or the ultimate T3 stack host I would see that as I would be hyped I would be really excited about that to see people betting that heavily on te how about if I started TP engine.com and then my homed said said the most trusted place to host TP stack T3 but like T3 is my specific trademark WP is not part of the trademark if my trademark was just Theo and T3 was a thing I just like didn't even like directly use it was just a com but like like if I went by Theo Brown like my full name and somebody did like TB Dash something yeah do you have the trademark for the number and also spelled out like t t h re e e no but if somebody was to so if somebody was to do t t hre hosting I would not consider that particularly egregious so if I registered t.com and then offered the best T3 hosting platform or I would not care okay that's good to know so why you do that y there was funny enough there was somebody who did the T4 stack which was very clearly meant to be misleading and pull people from my community which was really funny and then they started they're the only person making money off of T3 the trademark right now which is hilarious but this is a good example though yes you're the trademark owner you get to decide yes so you can decide this Y and you could talk to a lawyer as well and even then I I went so out of my way with them privately they were [ __ ] privately and publicly and they were the ones who escalated so I was like okay I'm just going to call this guy out and this is the first time I've even said T4 like publicly in probably a year at this point and and that I could rant for every about how awful that particular individual is but like that's a separate thing that is still something I'm not going to pursue legally and my issue with them has nothing to do with the legal or trademark thing I think and this the point I trying to make earlier is that like someone going 100% on WordPress in my opinion is something and if I was in your position I'd be excited about versus somebody doing 50/50 of their customers like that like somebody who's 100% betting on WordPress to me feels like a better Community member than somebody who's 50/50 on their bet I don't want to get too lost of details people are giving examples of like git versus GitHub again as Matt said you can choose how you enforce your trademark lius has chosen to not enforce the get trademark ever as far as I know so yeah there's GitHub there's get lab so that's his choice yes and you I guess what people are struggling with is the idea that you are selectively choosing when to enforce it is is understood publicly especially because up until this point you've been positive towards WP engine and this feels somewhat sudden the swap uh sure yeah so that that was specific concern so a host needs to pass the sniff test it's unclear what the sniff test is the consequence of them failing it is that the WordPress or access might be restricted and I I don't there could be there could be any consequences right what is hard now is is as a WordPress developer it now feels like they have to be careful when they're picking a host to make sure that it is either the official automatic wordpress.com or recommended it is a recommended one and there there is now a fear that picking WordPress host that isn't on the recommendations list which WP engine was up until a point recently no they were never on they were never on the recommendations list okay yeah but they were allowed to sponsor word camp and that could be seen as some level of an endorsement so yes I would say you probably should pick a host that's on our recommended list or a sponsor word Camp if somebody picked up word especially the recomend somebody picked up WP engine because they talked with them at word camp this year and they had just moved to it a few days before all of this exploded and now suddenly they can't update their site do you feel bad for that person can you take ownership of the fact that there was a method to get to the outcomes that you wanted here that would have prevented them from being hurt without risking the likelihood of success with your goals at all sure you made that point okay cool awesome that's a huge concession that means a lot to me thank you so yeah and you can see why now somebody who who might have been affected by that now feel some level of stress that they might pick wrong and might run into this again um I would say they probably should consider yes picking one of the recommended hosts so that's there's a reason we recommend them okay so I want to dive into Silver Lake Silver Lake OH I have found a lot of weird mixed information all over the place for context for those watching Silver Lake is an investment firm that I believe has fully acquired the uh WP engine or at the very least it's board seats they control it okay they control it so they they own a majority of the voting and everything and in my presentation at word Camp I mentioned other open source things so were like a screwed up okay so I think I had two or three examples MH I do you remember those off the top of your head uh Talent the nity maybe I I forget what they were so check out my presentation is at Work Camp yeah or on the WordPress YouTube yeah so so can you give us a timeline of silver lak's involvement both in automatic as well as in uh or WP engine without saying information you're not allowed to share sure what's public um they have never been an investor in automatic um what's public is in 2018 they uh purchased a majority of WP engine for $250 million were was there ever a point where you were in negotiations with Silver Lake for potentially investing in automatic no no okay I I try remember where I had heard it from that that might have been a thing but not a big deal either way yeah that's my recollection um I have met with Lee many times over the years like I said he used to be on the board of GoDaddy I don't believe they are anymore and God is a public company I think they were a smaller investor they wer a control investor um the and he has been on the board of WP engine I'm not sure exactly but I think since the acquisition in 2018 makes sense really good information to have I had heard somewhere that there might have been some back and forth way way earlier on between you and Silver Lake for potential negotiation so good to know I I will say we have talked many times over the years about working more closely with WP engine that's fair to say so but specifically miles is begging for attention but specifically automatic and Silver Lake have never been in meaningful negotiations for potential investment or collaboration in automatic not to my recollection no okay by the way automatic has raised a ton of money we have great investors um I didn't at the time in my 20s control it but now I vote 84% of the shares through proxy agreements with different investors so um I think every share that's traded hands since 2012 maybe oh we got another cat in there hello um I have a voting proxy for so that's part of the reason by the way that I'm able to run automatic in a way that we've never changed a license and all the other stuff so it's um yeah really good context to have so at what point would you say your relationship with Silver Lake started to go sour that's a good question I would say that you know as recently as January I took a sabatical by the way in February March and April um actually is very busy prior to that I met with Heather twice like I think on the 24th and 28th um and Lee I've met with before so I I would say I really thought they were going to do a deal since January um the guy who ran automatic for a few months Tony Schneider was like he met with her they he thought there was going to be a deal during his time when I came back I was like why isn't there a deal kept working on it so um so when did I realize they were just delaying and leading me on honestly probably last week okay so this is actually really good feel dumb but like that's that's I almost want to do this part off stream but for the sake of like everyone like if I was a friend or new of you before this right when I saw things explode I would have just personally reached out and like man there's a more productive way to do this cuz like that the like one week from realizing they're leading you on to this explosion especially with in between like like some of the texts you sent optically are terrifying the ones they cherry-picked totally yes absolutely but like they show the whole thread publish the whole thread so the reason I bring it up like I'm not saying this as a gotcha I'm saying this so that we can sympathize with the people who have concerns right now my goal here isn't to be like you screwed up you're terrible like you need to realize all these things are bad it's optically for people externally these things result in less trust and concerns and I want to make sure that you understand as a person who cares about these things and I as a person who wants these ecosystems to be as successful as possible that you understand enough of why people feel this way so that you can be more likely to succeeding your goals in the future and scare the people who have love and have bet on WordPress Less in the process I mean why is you know Silver Lake private Equity trying to smear me why did they dox our private text you started the public smearing they had no permission to publish our private Communications why have they doxed our public text um and why did they not publish any of their m mes they only published mine so like this is a smear campaign by the way they're going to have the nastiest lawyers the nastiest smear campaigns they're going to through paler and Cambridge analytica stuff against me so I I as a a person who I like I want you to be able to be successful with these things and I want WordPress and WordPress developers to be able to trust and not be concerned this you're a leader you're a bdfl you need to do better than them I would love you to hold them to a very high standard Silver Lake stands to lose billions of dollars on their investment if we are successful in convincing the public that WP engine is maybe not the best word host I think there were ways to convince the public of that that would have made the public less scared I'll call you next time I'd love your advice I I unironically you have my number now I'm actually down the next time you are feeling this level of like emotional like vital towards anyone in or around any of these spaces actually call me I want to try and like talk you off the cliff before things get this bad okay well statistically it's probably going to be around like 2033 so let's plan we'll make a date to talk in 2033 excited for it but the how I put this point you are the one who has escalated the most with this no I believe they've escalated it quite a bit and I wish I could share more of the stuff they done privately but I can't I okay I understand that publicly you can see why most people would perceive it as though you have escalated the most here sure yeah know like like whether or not the things you did were right whether or not you believe the things you did were right whether or not I believe the things you do are right the community overall feels as though the things you did at the very least went too far too fast and had impacts on WordPress users that they felt were unfair sure and by the way you know this is not going through a PR person this is not going through my lawyers so yes it's very honest I'm going to I'm going to mess up I started as an engineer coded WordPress like I contribute a lot of code I'm I kind of I wasn't a CEO before I didn't go to business school I haven't had public relations training like yeah I'm going to screw this up so but for the sake of the community I think it's important to commit as the the person in charge of wordpress.org the person who runs automatic and the person who is trying to make WordPress the best way to build for the we that you commit to going out of your way to find healthier methods to do these things in the future and better ways to call out bad players that don't so quickly turn to damaging WordPress users um I will commit to that awesome what do you think is a good threshold like one month of notice a year of notice a week of notice like I I I think there's multiple Parts the notice is one important detail but the more important thing to me is the the the knowledge for the the business business and soon after the knowledge for the public that there are concerns because to the average person who like a word Camp attendee you went from thinking word or WP engine was totally fine and them as a sponsor of word Camp totally fine to all of a sudden they are a Cancer to the ecosystem that like same day switch is terrifying so that's the big thing that needs to be avoided this is not a good defense but I will say that if you did you see my ecosystem thinking post uh yes so that was was earlier in the week um prior to Work Camp so that was I forget what day it was uh but um the I think it might have been Tuesday or but so that was that was before if there was yes it was it was a matter of days if there was a month between these things even like you started with like a call out at word Camp that's like the example I gave before you use that as leverage in your conversations with Heather and the other people at the company and people on the board continue to not go well you then even just like a small tweet or something like it really sucks that one of the biggest WordPress hosts doesn't contribute meaningfully back the blog post so I was raising the pressure on them absolutely the blog post called them a cancer huh the blog post called them cancer on Tuesday yes was it it was the one you posted the same day as the word Camp talk so that one did but the post that was I think that was Friday but we can look this up but the one earlier in the week did not call them cancer did call them out specifically it did okay um that is news to me so on Tuesday last week you called them out this just to make sure cuz I do want to be accurate now everyone go visit M.T since we gave so much traffic to WP engine and everything like that sep I did see your message with the tradem I'll last that in a minute September 17th um okay so here's the the paragraph I published um do you me to read it or do you want to read it I can read it quick okay so compare the five for the future pages from automatic in WP engine two companies that are roughly the same size with Revenue in the ballpark of half a billion these pled are just a proxy and aren't perfectly accurate but as I write this automatic has over 3,786 hours per week not even counting me in WP engine has 47 hours WP engine has good people some of whom are listed on this that page but the company's controlled by Silver Lake a private Equity Firm with $102 billion in assets under management silver like silver like doesn't give a dang about your open source ideals it just wants a return on Capital that's a significant call out did you ever send this to them of course okay just making sure no just I have to clear dotting all my eyes and Crossing all my te's cool I'm reading the rest of this blog post this um he called out examples of companies that are contributing meaningfully right after I this helps with my perspective a lot knowing that this post existed and you were still letting them so I'm assuming the sponsorship agreement for or WordPress for Camp was long before any of this and that's also why we didn't kick them out during the events CU of course uh it would have violated the contract they could have said hey we paid you I by the way I offered them the money back even after every I said hey if you want the 75k back we'll send it back because maybe they're like oh we didn't get what we but they had the booth for the whole time they talked to probably hundreds or maybe a thousand people but I offer them a full refunds this is good context to have I if this post existed if this was a thing that was well known amongst people in the space was going on more time was had and then the strong call out happened like if this happened if this post was made like two months before word Camp even better I would be I wouldn't have even covered this this would have been like oh not my problem but the Optics of you went from being supportive of this business to calling them out to very soon after on stage calling them out at a conference they paid to be at immediately follow with a blog post calling them cancer that is terrifying as a person in the community especially because like this has been around for 21 years 5 days is a very short amount of time in a 21-year timeline and I will also admit that I can be a uh I'm very like a calm in person but my Pros could be F uh Fury right so I I'm a writer I consider like writing like an artistic expression and sometimes I can get a little colorful with my phrasing did anybody proof the post before you posted it of course oh good to know yeah automatic has a full oh something cool automatic does we host a run long reads and the Adis magazine which by the way has won national magazine awards so we employ some of the top editors in the country that's insane no idea yeah so long raids an outst uh so um yeah I have fantastic editorial people at automatic and and I tap into them for things like this yeah that they make my writing way better by the way yes I I I have done a lot of copy editing part of how I got into the scene believe it or not is I offered to do a copy pass for a couple more prominent like web dev people that I was very much looked up to and they were so thankful for me helping them with like the wording of their blog posts that they pulled me into places I should not have been so so early in my career and kickstarted my Creator Journey so huge shout out to Ryan carniato uh or to Astro or to the creator of Astro Fred shot as well as the Tanner Lindsley creator of tan stack and Ryan carne as the creator of solid JS they're essential to my success in the space and that started for me just copy editing their stuff that's awesome yeah these things are really important to me two last things this one is a trademark that one of my community members found apparently yall have the trademark for managed WordPress okay does that not mean almost every place that has WordPress hosting is in violation of your trademark a lawyer would have to evaluate that so I I I'm not a lawyer I don't want to comment on that totally fair the but you can see why people would be concerned now that if this is about a trademark dispute that a trademark that generic is petrifying about this possibly happening again I think that to maintain a trademark you have to enforce it I will say that if you look at all the businesses built in WordPress um we allow um I don't want to say this without messing up our legal case but like yes there's many many things that uh are below the threshold yes that would be legally confusing in the market uh so yeah totally fair response the and I have no current beef no cnds publicly with any other host or any other person this is a very unique situation to go back to the the long thing I Wasing earlier I I think due to the unique nature of the situation a uniquely kind optically public approach because of the long think about how long they dragged you on for you should have done the same play at their level drag them along the same way very slowly start to damage their reputation in a way that terrifies them you could have done even more damage to them potentially honestly not my style that's that's fair but as a CEO and the representative of the community there are things that aren't our style there's a lot of things that aren't my style that I have to do now as the representative of a lot of people that many more even look up to and it kills me at times to not be able to like like the amount of times I've written a tweet as a reply and then deleted it or screenshot it and sent it to my CTO for an approval before I sent it like it's actually hilarious I've deleted more I have deleted more things I've typed that I've posted on Twitter for like over a year now and it's that's probably good yes it is and that's the I really want to encourage here is like it's important to be the boss when you are the bdfl especially for something as important in arguably as important as WordPress it's literally like nearly half of the web it is so important to have you specifically be way Kinder than is even fair in order to make these egregious cases not like like something that was as negative as what you were went through here should not result in you being this negative it sucks it is terrible but at the same time it is important as a representative of this community and as the one who who pushes them forward to eat some [ __ ] and get through that and it sucks we have to do it I I agree awesome and I want to thank you I say continue to hold me to a high standard with great power comes great responsibility right so please hold me to a high standard in the future give me this feedback I'm listening to the feedback here and I you know definitely keep this in mind for the future so I've learned learned a lot through this so thank you yep my one last thing it's small yeah where do you want I think it's important can you see why wordpress.com and wordpress.org is a confusing thing for people sure awesome with other companies like versell for example nextjs isn't the host versel is the host and they both get talked about equally at this point before it was not like that at all but even for me like I started using forell before I ever used nextjs by like over a year and even they're so clearly tied they're so clearly funding each other that is what the ecosystem in the open source world nowadays is used to is like a company with one name is funding a thing with a different name and if others are using the other thing's name in their branding it's like yeah whatever they're not as long as they're not using forel's name it's fine that's why wordpress.com has to have a trademark license yes by the way wordpress.com could lose the trademark license if two of the three board members of the WordPress Foundation they decided they were not a good Steward so that's the way I set it up so if someone bought automa IC or something like that or I wasn't in control it could lose the trademark license actually one last question on that are either of the two other board members meaningful stakeholders in automatic uh zero zero okay awesome that is actually huge so they they were not be a financial incentive for them to benefit automatic if it was in any way if it was if if the option was like hurt WordPress foundation in their trademark or hurt automatic there is no Financial incentive for them to not hurt automatic um so and I'll describe the two people so I wanted to create a board which felt fair so sh is actually a republican she's run like to be endorsed by Trump and stuff so like very different from my politics like my politics are well I don't talk a lot but you can see my donations so um Mark goshh uh was actually a journalist in the WordPress space so he ran uh probably the top like uh WordPress journalism site and um he stopped doing that many many years ago but when I was thinking of like oh who would be a good Steward of this um he was there uh the board's been pretty much the same since the WordPress Foundation started previously Jason Hoffman was on the board who actually was involved with like node and joyance and stuff like that so he was one of my advisers when WordPress was getting started he actually helped me rack the very first servers that we ever had when I was down in San Diego putting the data center together he was you know handing them to me and we were putting the screws together so um he was on the board for a while and then I forget who took his place either mark or or um or shell now these are people I trust um neither owns any equity in automatic and um yeah do I trust them of course yes yeah yeah just wanted to make sure that like there wasn't a financial incentive for them to defend automatic in the process that was all that is actually really good information I'll be honest you've shifted me a bit I still think the way this was handled bordered on irresponsible but I am less sympathetic towards WP engine but I wish you had given them uh better public incentives than we given your last video was pretty harsh but I hey can we shake hands and say absolutely thank you so much and I hope in the future I can consider you a friend and you'll actually take me up on the calling me if there's another thing like this because uh the amount of I would have done so many things like this a hundred times worse if I didn't have my group of people to talk me off these Cliffs the like I would do what you did last week monthly if I didn't have my crew to talk me off the stuff so it's the least I can offer I hope you take it seriously and I really hope that going forward the WordPress Community doesn't have to worry about the security and the sanctity of their platforming space me too so thank you all for watching as well so many people T in this amazing like I this is a cool Community like I am not familiar with you all but like I said I'm going to follow in the future so you might see me in the chat on future streams awesome really appreciate it thanks again for stopping by




## The Wordpress drama keeps getting worse - 20241014
I have nothing but the outmost respect for what you've built with WordPress it's an incredible achievement and you've been justly rewarded for that accomplishment no need to squeeze the lemon that hard it's undermining open source as a whole can't believe I'm opening a video with this but I fully agree with dhh here Matt's gone kind of mad and that's not without people trying to hold him back I've seen a lot of comments like where are Matt's loved ones why is nobody trying to talk him out of what's going on here I have it didn't work I want to break down everything that's been going on what tried to do and where we're at now but first we need to cover how we got here if you've kept up with the drama up until this point there will be time stamps below so you can skip to the new stuff but I wanted to do a quick overview for those who haven't been keeping up because it's it's a little crazy the starting point of all of this drama was when Matt the CEO of wordpress.com the creator of original WordPress and the guy who runs this company automatic was upset with a brand named WP engine WP engine is one of many places where you can host WordPress WP engine was acquired by private Equity Firm Silver Lake and has been pushing to make things a little more profitable on the WV engine side they also haven't contributed a whole lot back to Wordpress there are important things that they help run be it the ACF plugin which is Advanced custom Fields be it the money they were putting into WP graphql be at the sponsorships of events like word camp but as far as Matt was concerned they weren't contributing enough if that was the point Matt was making and he did that in a calm way I could see this having gone a very different direction but that's not what happened Matt went kind of mad he somehow convinced himself that he was owed an 8% royalty fee for all of the money that WP engine makes which is absurd I did an interview with him about how absurd this was primagen also did as well great content but I'm not expecting you guys to go watch that two hours of absolute Madness in Matt's own words things went nuclear he decided it was time to make WP engine the worst possible platform and he made it very clear he wanted to make WP engine customers hurt the first big thing he did was restrict WP engine user access to wordpress.org which is the system where you do plugins and updates to your WordPress stuff it's one of the main reasons WordPress has finally gotten secure over the last few years so taking that away from them is just destroying the potential security and path for updates on one of the most popular WordPress providers all out of spite and jealousy and this is when the sentiment towards Matt started to plummet fast because it was clear he was willing to hurt not just WordPress users on WP engine but the WordPress Community as a whole in order to further his goals of hurting WP engine in every way he could and man it spiraled since it seems like this particular plugin ACF was a sore spot for him which is why he made a public announcement that they'd found security issues with the plug-in and also made an interesting statement see if I can find it here what are the best alternatives to Advanced custom fields for people who want to switch away is there an easy way to migrate I suspect there are going to be millions of sites moving away from it in the coming weeks this was an interesting threat and it didn't go quite how he expected in fact things have spiraled quite a bit and here's where we get into the more modern news there's a bunch of details I skipped from before there's just too many details to keep track of all of them in one short concise video sorry about that the last update you got from me was when a second legal document was published by WP engine in the form of a lawsuit towards Matt Mullen W and automatic for all of the terrible stuff they've done including not limited to Matt threatening the CEO of WP engine pretending to do an interview and then threatening to go to the board of the company saying that she was interviewing at other places it's borderline extortion some of the things that have been going on here I still can't fathom it that the same person I was talking to is doing all of this and I tried my hardest to talk him off these Cliffs but it just keeps getting worse he announced that ACF had some severe security issues that they were going to responsibly disclose even though they just want public talking about it the issue is at the same time they put up the wonderful little login blocker let me see if I can find it I know I have it pinned somewhere here they put up this wonderful blocker when you try to sign into to wordpress.org that says that you are not affiliated with WP engine in any way financially or otherwise that you have to check to sign in which means that if your WP engine Associated including the people who are working on the ACF plugin you can't go into wordpress.org to update the plugin that's bad enough so is this login field by the way for what it's worth I did a call with Matt the day before he published this and adamantly pushed that he should not do this that the only thing he could get from putting this little checkbox at the bottom of the wordpress.org sign in is a lot of and a lot like just a massive dump on the sentiment towards him and WordPress and I was entirely right it's unbelievable that he did this and that he thought it would get any positivity towards him or anything it seems like he's willing to let his own reputation sink to the ground if there's any possibility of dragging WP engine down with him 20 plus years of good sentiment burned in days because Matt can't stop himself and I know you're watching this Matt why have you not responded to my last set of texts are you ashamed because you seem ashamed you know what you're doing is and you need to stop not even for you not even for your employees the like many are still left but for all of the people in the community that you built that you're burning in front of them it's unbelievable and it gets worse from here believe it or not somebody posted that they can't contribute to Wordpress anymore because they've spent money on WP engine to which someone Matt said it's not him but it's clearly him someone replies sorry who are you from the official WordPress account are you kidding are you kidding yeah believe it or not the thumbnail for this video not clickbait this actually happened yeah what the poor Lura by the way I can't believe that this is going on and all their appla lies are this is the least professional and most Community destroying Behavior I've ever seen in our software world you're destroying a legacy that took dozens of years and thousands of people spending months of their lives and you're dismantling it one tweet at a time absolutely agree that's not even including all the people that the WordPress account is blocking including people who contributed huge things like api. wordpress.org being blocked by the official account it's unfathomable and I've told Matt explicitly he needs to stop posting on this account he needs to stop blocking people he needs to stop doing this and he's ignored all of my requests his favorite thing to reply is there's team running the account I can't stop all of them yes you can Matt you're the boss and here's where I think things have fallen apart in a way they will never recover this is from the official advanced custom Fields Twitter account we've been made aware that the advanced custom Fields plugin on the WordPress directory has been taken over by wordpress.org a plugin under active development has never been unilaterally and forcibly taken away from its creator without consent in the 21-year history of Wordpress so what does this mean look at the URL here this this is wordpress.org plugins Advanced custom fields and the plugin that it is showing is secure custom Fields by wordpress.org what they did is they forked the plugin made no actual changes to it and then republished over the same slug which means any users who are using wordpress.org as their update system that have previously installed Advanced custom Fields they will be automatically updated to a fork by wordpress.org that has nothing to do with the original Advanced custom Fields plug-in by WP engine that is actually unprecedented in the history of open-source software I've never seen the platform that hosts a plugin like this maliciously take over something that was being maintained properly and in good faith by its original authors purely out of spite this is unfathomable and I am far from the only person saying this it's basically universally agreed that this was an absolute show here's a great one from an ex-employee of automatic I worked at automatic for 5 years with some of the smartest and kindest people I've ever met many I still consider friends but this latest action from photomat is so dirty and underhanded that I'm ashamed I ever worked there I would have taken the offer to leave 100% here is the slack message that Matt sent about the fork notice the Emoji reactions here by the way half people who clicked the clown one got banned just for clicking the clown Emoji 161 down votes absolute Insanity almost nobody is supporting Matt at this point he has gone absolutely mad here's Steve from the JavaScript Community actually believed WordPress is in the right on this whole Conflict at first but definitely not anymore yeah I was always iffy it seemed to me like Matt was having a bit of a meltdown but this is just unbelievable another from dhh who I think has done a great job of being reasonable here like as much as I have issues with him in the past he understands open source well he's very respectable in terms of how he thinks open source should work and be run and for him to come out says a lot Matt don't turn into a Mad King I hold your work on WordPress in the highest esteem and I recognize the temptation of gratitude grievances but that must that must remain a moral critique not a commercial Crusade absolutely agree another from dhh this is totally crazy like if the operators of rubygems.org just decided to expropriate the official ruby gems hand over control to a new team and lock the core team out of it we're an Uncharted in dangerous territory for open source now what a sad sight absolutely agree this offers potential massive danger to the entire open- Source community and if this becomes the norm if other open source providers of Open Source software think this is okay and use as a precedent to do their own if like npm starts doing stuff like this like imagine if npm took a random popular package like Express and just published their own Fork under the same Express tag so when you npm install you get their clone of it instead from GitHub in no ability to get the original anymore that should be illegal like what this is unbelievable the craziest part is they're continuing to defend themselves as though they are right about it they claimed that this has happened in the past but the example that happened before was a plugin that had been entirely like they claimed that this happened before but the example they gave is a plugin that was abandoned and they say that this is part of their ability to do whatever and they claimed that this plugin was abandoned there's a really good meme from dhh I want to find for this one so someone replied when a plug-in author gets blocked something needs to be done to protect the users and keep security updates happening this is especially true for a plugin with 2 million plus active installations to which dhh replied this wonderful meme who blocked the plug-in author who blocked them yeah this is actually unbelievable that the WordPress core whatever I don't know if there's many other people who are doing this or if it is just Matt claims it's others I'm pretty sure it's just Matt to continue doing this over and over again putting themselves in the situation taking the worst possible action to get out of it and then claiming they couldn't help themselves because of the situation that is the pattern that's been established Matt overreacts to something does something absurd that puts them in a bad scenario then he overreacts again claiming he had to do that because of the scenario therein this started when he just blasted WP engine for no reason and they came out putting out a season say saying hey this needs to stop and then Matt did the worst possible thing of blocking their access to wordpress.org because they put him in that position by making it a legal thing no Matt you put yourself in this position you keep putting yourself in this position you keep digging the godamn hole I offered to help you dig out of you have my number you've called me about these things and yet you still do it the next time you call me and say you're going to do some dumb I tell you it's dumb and you do it it's over it'd be ignorant of me to think I'm the only person in your life telling you these things but either I'm the only one telling you and you've surrounded yourself with esmen or you're ignoring everybody in your life with better judgment so here's to you Matt this is your opportunity this is your last chance many probably aren't even giving you this chance in fact look at the comment section here I'm sure no one else is but I will you get one more chance you need to put out a big formal apology shut the up and wait it out you've done too much damage any further Cals that is in the form of anything other than apology is doing nothing but hurting the community you spent over 20 years building and if you're okay with watching them burn because you're on this stupid Crusade have at it Matt I'm done




## The _SQL In React_ Drama - 20240612
oops I started sequel in react drama again I honestly didn't mean to I was just showing off a pattern that I thought was cool but uh in order to understand this drama we need a little bit of context so first and foremost let's do that also make sure you stick around to the end because I'm going to discuss not only why this isn't scary but patterns on how to do it more securely and also maybe just maybe get those separation of concerns people to shut up fingers crossed anyways so first and foremost context on where this drama originally happened Adam rakis made a tweet last year at nexcom this picture is of Sam sakov presenting his talk showing some of the powers of the new model in this example he has a button that has a form action bound to it that inserts a value into the bookmarks this is a really cool example for a bunch of reasons we'll get to in a bit but it sparked just insane levels of outrage people were pissed when they saw this everybody was like oh my God SQL injections serers side code in your client code like none of this is safe so problematic many of you might already know why it's fine but if you don't stick around it's important to understand and I think it'll really showcase how cool this stuff is because the goal here was Adam showing how cool and composable these patterns were but anybody who's not in the know enough to understand how this works sees this sees react code sees SQL it assumes that this is SQL code being controlled by the client and freaked out just as a random example of somebody not getting it yo I heard you like SQL injection so I put SQL queries into server actions and demo non-parameterized SQL patterns yeah people were were very concerned about this I made a mistake though I shouldn't say a mistake but you'll get the point in a minute I saw this tweet from Drew Wilson modern webdev next going into react going into Apollo going into graphql going into grpc to hit your postr database means that we have to edit 20 code files spend Untold hours wrangling them all together and the result that you can get the one ID you need from the DB this is not the way I want to be super super clear about something I almost entirely agree with Drew here the only change I would make is I would get rid of the word modern I think we can sit here and argue all day about what is and isn't modern but I think the stack he's describing here has been around long enough that while still very fresh and totally understandable and acceptable to use the new wave the new era has shifted and we're realizing yeah having this level of separation between your things makes almost no sense and you probably shouldn't be separating things blindly that's why I felt like I had to respond this is my response actual modern webd react to postgress so here I have a sequel call that I await I get the rows and then I just map over them and render a link to each post ID with a post name I did actually quickly mock this out this is real code I wrote I didn't see the database so I haven't proven that it works but it absolutely works so I need to talk about all of this and also give some spicy takes around it because people are probably still very confused when they see this the first thing we need to talk about is the keyword here use server what use server does here isn't make this a server component and I've said this a bunch of times I think I have to keep emphasizing it though sadly enough use server is not for Server components use server is for a very specific thing is creating a door on the back end that the front end can hit so in this case what you server does is it creates a post route on this endpoint that this component is being run on and now whenever a post occurs because the user pressed the button even with JavaScript disabled because this button in a form so when the form triggers it posts to the server and when it's posting to the server that is code that runs on the server none of the code itself is on the client all the client gets is a URL which is the current page URL that it's posting to with a traditional form so nothing here is insecure in terms of where it is running the other thing that's more to understand here is the way SQL is being called isn't just a random string template this is a template function in JavaScript sorry a tag function is the proper term found this quick example on Google a tag function is when you pass a string with this formatting to a function what it effectively does is every time you have a templated value in it it puts a comma there and then separates that with like a string split so this becomes an array of values that we call it with with the name and age as the points that it breaks so we have I am comma which is a new element and then the next element comma for the next element here and the reason this works is because the string templating is being converted in JavaScript land the tagged template literal there's a lot of different names for how to describe this thing but it's taking all of the non variable values here splitting those and then after that the variables themselves are being passed so this means it's being sanitized it is trivial for us to write a function like this that takes the SQL statements here and then takes the variables and values being passed and just quickly sanitize them before they get past in it's totally safe and fine anybody freaking out about that just doesn't know the JavaScript pattern admittedly it's a new enough pattern that people probably haven't seen enough that I could see why they would freak out they're just seeing a string Lal here and assuming that it's not sanitizing but that is sanitized so the two things people were freaking out about which are the fact that this function runs on the client doesn't do that that's what you server does it means this is getting bound on the server and can be hit a post and the await call here is totally fine too because that string is indeed sanitized so this is fine as a button for doing bookmarks there's nothing wrong here there is something really really magical here is the fact that slug is being passed normally if we were to make this a traditional form or traditional endpoint we would have to pass the value directly to the function that we're calling so if we in here had a function that was do bookmark we might have to make an endpoint that receives the bookmark like value ID and then sanitizes it validates it against the database and then does it but with this where we're just passing bookmark as a value we can Define the endpoint within the scope within the closure of slug being passed so this is magical because the way we Define a component just passing it a value means we have access to that in our actions immediately it's so so cool it's so cool and since this is a server component because it has to be you can't call Ed server in a client component Ed server can only be called in server files means that this is safe and it means that this has has a really nice composable architecture where slug is a value that you got from your database being passed down through the component tree and now it can be used we'll do a demo with this near the end not just yet though because we have to talk a lot more about my example because honestly should have started here because my example is even simpler this is meant to be a demo of like a feed on a web page and on this feed we're showing the posts that exist and we're selecting the ones that have more than 100 likes and then we map through all of them this code also only runs in the server I know that because it's an async component and there's no use client up top the thing people seem to miss a lot is that you don't have to label server components in fact you can't server components aren't a thing that you put a marker on top of the same way with client because those markers of use server and use client are meant to Mark doors not the behavior of a component use client is for marking components as client side use server is for marking functions as actions that can be posted to different things it sucks that they have names that are so like 180 like that where they feel like they're supposed to mirror each other but they just straight up don't but use server if you just think of that as you server action should be much easier to understand Fuji made a good point which is that you can use server only and I probably should be showing that example more but then people think you need that which isn't helping either we'll go through that as we cover the security side of this don't worry so I'll just go to my code base to show the example so I think this is awesome one of the reasons people freak out about this which I totally understand is when they see it they see a mess of separation of concerns going away it's like this should be in a service somewhere this shouldn't be just part of your UI like if somebody writes a Bad sequel query all of a sudden you're going to tank your whole surfice and those are fair things obviously the first thing you should do is add an orm I would use something like drizzle orm for this but prisma's honestly fine too any decent typescript orm or even something like keasley that's just a query Builder to quickly write more consistent queries that's fine with me but the more important piece we need to understand is how these concerns are or in this case aren't separated the magic of server components is they don't force you in a specific architecture we no longer have to have a backend with an API and a database and a front end that calls like things with API calls and transl Json like that separation worked great for a lot of things but was unnecessary to be forced this is the same reason stuff like HTM X is getting so much attention because we've realized not every application is best served with every element coming either from the original HTML template or from the whole app being a shell and just making Ajax Json requests so why would we want this instead why would we just put our SQL in our components because this isn't meant to represent the right way to build I'm not posting this because I think everyone should be writing SQL statements inside of their components or even calls to theirm directly inside their components the reason I posted this is it perfectly showcases the flexibility of the new model those arbitrary barriers that we had before the boundary between the back end and the front end the database and the server the components and the data that they were fetching all of those boundaries were arbitrary none of them had to be there and that's why I'm really hyped about where we're at now because we can take advantage of that we can make our own boundaries we can separate our own concerns we can choose what does and doesn't need to be together if you want to write SQL in your component you can but that's not what anyone's going to actually recommend I made a or I posted a link to a blog post that I think everyone should read and I'll be sure this is in the description as well because this whole thing is worth a read I already did a video about the react taint which is what this largely goes in depth on check that out if you haven't but the important piece here are how it shows you the different ways you can model your data you can do what I showed there but they only recommend that for prototypes and learning as well as examples and what I showcasing there but the other patterns that they recommend are HTTP apis and a data access layer these are meant to be three different options for how you get data to your components in the new react model this first one is what we're all used to where we have existing HTTP apis be it they're hosted via graphql they're written in go or python or Java or whatever the hell and we're fetching data from those you can still do that in the new model you can just do a fetch call here like fetch htps api. service.com poost like Nothing Stops me from doing something like this but it's still better because I can dup these fetch calls on the server I can pass all of the context and only take the parts I need and render those as HTML it's still better to move a lot of those fetch calls to the server so if you don't want to move entirely to the new model you prefer having a standard API that exists outside of JavaScript and next that's fine I honestly think this is a great option for a lot of people too if you have a back-end team that is already building a scalable service and you just want your front end to be better and to take advantage of these new patterns just call fetch it's fine no shame there you can even wrap these fetch calls in an SDK just by taking a bunch of them and dumping them in a single typescript file write quick type definitions over it and now you have access to that across your entire application super super convenient so I want to make sure we all understand that this is an option because I feel like when people see the code like what I shared before they assume you can't do this but nothing's stopping you from doing this you can adopt these things as much or as little as you want and split things accordingly the way I tend to build things though is using the data access layer pattern this pattern is super cool it's effectively taking the things that your application code is using and writing them all in one place so you have a folder named something like data or server or data layer and in this folder you write all of the functionality that you want to make sure can be used in your components so instead of writing the SQL query here what you might do is take this query make a new folder I'll make Source data posts. TS one other thing I'll do here to make sure it's clear that this is an option import server only this is a package that makes sure your code only runs on the server so now if we try to import this code in a client component it will immediately bomb because when you run something or because when you call something with this import it will error out if you try to use this on the client so it's a small guarantee if you just want to be sure this only runs on the server not necessary I would recommend it though especially if you are using one of these hybrid code bases and you have concerns about server side code leaking at the client overblown concern this will solve it though so I'm going to take that function that I had before well this call that was there export async function I look at at that super is so smart Tada so we still need likes so let's get those likes number and we need SQL so now we have that don't even really need to do the const rows check but if you want to do any filtering or error cases that's a good place to do it instead we'll just immediately return that now that this function exists we can just call that instead so get posts likes got to import it tada all done Rose does not oh you have to await sorry one dumb obvious mistake cool once we've awaited that function now we know we won't have this problem there's a lot of different ways you could structure this too depending on what you're looking for something I actually quite like i' I've been doing more of is making a object that just has a lot of these functions on it almost to feel like an SDK so something like what I'm referring to would look like this I have get posts as a function on here export post DB API hop in here post DB api. get poost you can obviously name this better this is a quick hacky name Point here is to Showcase that you can have an abstraction like this that is being reused across your code base you can wrap it using the cach functions to make sure it's being duped on the server side so that if you call this in three places it only gets called once and here we see a bunch more examples these functions can see username can't see phone number all of this all existing in a serers side file that can only be used on server that now you can import on client we did see a good question and it's really good because I screwed up in my most recent tutorial people asking where does trpc fit in I said in my video I would cover how trpc fits here and I was specifically referencing this stuff and then I just forgot to in that tutorial I wanted to fix that so I want to do that quickly by going to the trpc blog using server actions with trpc the value of this blog post is specifically that it showcases the magic of trpc inside of server components and this new architecture so if we scroll down I can find an example here in this example a server action procedure is defined using the new trpc procedure stuff and in here we can do the experimental next after wrapper to create a server action procedure so now that I have this created I can use it to make new procedures so that's still stubbing it out let's see an actual example cool create post protected action. input so we still the Builder pattern to give it a validation so this is for if you're doing use server stuff like I made like a create post function trpc is really good for that because you can validate the input because the input is still coming from the client when you're making a use server server action so here we validate the input and we can do some logic here and now we can call this either through a form or through just calling it in our client side code which is super super easy to do it's also protected from authenticated users due to the context they added earlier and now we can bind it in a form just like this so this action expects a title so now in the form we have input type is text and on submit we have this extra stuff that we can do here in order to actually show anything we want to show the usual submitting stuff with trpc I want to showcase the power of some of these patterns quick because I think they're magical so let's do that one sure use TPC no off drizzle app router sqlite cool ah yeah oh we just have one in here already nice yeah we can just call that here dope I I just go with that then cool what better example than your own right we're going to use the create T3 app template which I just used with Drizzle tail and tipc and all the other options skipped off we don't need off for this we get the idea so now I have a very simple example using sqlite locally with Drizzle and if we go to api. poost I can command click this and we see the procedure here takes input we validate that it's a string and then we return hello whatever that is we also have DB calls here where we're able to get all of the latest posts as well as insert things as well but I want to showcase how this actually works once we start playing with things together so I'm going to delete almost all of this Main and hello that's going to be. greeting cool I'm going to delete this because we don't need it and here we see hello from trpc getting the message straight from our backend function this all is just part of the create the3 app template again the magic of this is that this command click works so convenient so the way that we're using trpc here is it's effectively an abstraction between our backend and wherever we want to use the backends data so that could be a client calling it via a client component that could be a server calling it as well it's really nice to have one place to put all of these things because now you have one place to audit code review and go through things initially I'm not going to do it this way though and then I'll move to it so we can see the difference first I want to actually get posts data so I will change this accordingly we'll do Post equals await DB which is our drizzle database function if you go to the schema you can see the database schema as well which just has ID name created at and updated at for all of the posts I could just call SQL directly but I don't feel like setting that up here so instead we're going to use the drizzle omm default stuff dbquery do posts doind many so now we have posts which is array with ID name created at updated at and we should be able to just render this posts. map post that's fine with me should have a key though order to make react happy post. ID cool so now all of the posts are going to be listed but you'll see there's no such table because I haven't actually run any of the SQL stuff Yet Bun Run DB push cool now we have a DB that should work but has nothing in it so we should add things Bun Run DB studio now we can go to local. drizzle. Studio very quickly add some fake records name uh first post second post cool now we have these two values and if we go back to the actual Dev environment we'll see first post second post super super nice I love this comment Aiden I'm sorry but how the is their sequel drama how do we invent drama for something made in the 80s yeah yeah and how are people mad about a pattern that was established in the ' 80s that we're bringing back the best parts of so now we have very simple await DB query posts find many let's say we want to do something with the posts like delete them here here's where the new model becomes actually magical async actually we don't even need to be async it just be function post and it will take in post which you don't actually have the typing for there's a lot of ways to get this type I trying to think of the best one to Showcase here honestly I'll show you the really simple stupid one we will just ask for the things we want which are ID and name we don't really care too much about the rest and now we'll use this instead post equals post and in here we'll just return that what's this matter about it might be null I'm annoyed with that it's just name that can be null right I could make the type stricter but I don't care that fixes it for now the magic of server actions is when you can combine these things let's say we wanted the ability to delete these posts that's where you server comes in we don't use you server here because this code is already running on the server we don't need to tell react or nextjs that we can triple quadruple check and confirm by doing import server only which will be hey by the way make sure this never ever ever can can run on the client by default it's not going to because if you don't put use client or import this in a use client client component it will not run on the server so when we use us server it's not because this file needs to only run on the server it's because we want to expose a function to the client so if we hop down here and change this to add a delete button to it let's make this class equals sorry class name been writing too much spelt and solid recently we'll do P4 Flex Gap 2 cool and now inside of here I want to add a delete button so I will make this a form button type equals submit and I'll just put an X there so now we have the little x button for both of these it doesn't do anything you'll see it is posting though because it's a form so if you saw there that little question mark That's cuz it is loading data from the server when you do that so if we want to do something with this we want this to do something we'll just make a quick action example action equals async function I'll just do async Arrow functions it's easier I did that wrong I'm stupid cool async and here is where you put use server so I put use server here if I console. log deleting post cool we'll let super even do its thing form action us server deleting post now when I click this button nothing's happening if I go to the console also nothing's happening but if I go here you see deleting post because that code runs on the server that's the magic is we've created a little portal here where when you submit something by clicking this button it is binding it to this function on the server what's really cool though is if we look at the network tab you'll see it's always posting to the same endpoint all of these posts are just going to Local Host 3000 just all posting straight to Local Host 3000 but there's two different buttons here and when I click the different ones it knows deleting post one or deleting post two how does it know that if it's just posting there that's where the magic of these closures comes in because react knows when you pass post and then you use it here that it's being used for this action it will actually silently embed it inside of the element so in this form action this form itself has these hidden inputs in it that tell react which of the functions it should run in and which variables it should have access to they're all encrypted because they don't want your users to have access to data here they shouldn't have access to but by doing this they're now able to make sure each of these forms is bound to the right thing on the server side without having them bound to different functions without having them pass different data manually all of those things are just kind of handled for you which is super super convenient and it means you can write a component that's the simple where I just pass it a post and then use it in the action and it works I want to add deleting here super easy await db. delete I don't think we have the ability yet in drizzle to autocomplete on anything but queries so I think I have to pass this the table type which I'll import posts. where ID is post ID oh I think I have to do where EQ and import EQ as well yep so this is effectively saying we're going to delete from the posts table where posts. ID is the same as post. ID this pattern is super convenient because it's just an equality check this is a SQL call I could have wrote the SQL but it won't be type safe so I'm just using this to auto complete and now when I click huh nothing's happening I refresh it's gone but I don't want to have to refresh I want to just go away let me quickly read this so that we still have posts to test with and now I want to make it so it refreshes easiest way to do that is revalidate you can revalidate path or tag I think path makes the most sense here because we just want this path to be updated and by saying revalidate path slash we're now saying to react and specifically nextjs when this action is completed regenerate this page and send the changes to the user so by putting this here now when I go to the page and I click delete it sends the updated page as the response to that post go to network tab again you'll see when I delete it only sends this one post request and the payload is what it needs to change in the response on the page no data found with yada yada cool it's not actually showing me the stuff because this is annoying but it sends you the update that you need to actually update the page so you don't have to make a second request just to get the updated content super super nice pattern but as I'm sure lot of people are already feeling when they see this all this server code mixed in your markup that's so bad separation of concerns Yad yada cool let's separate our concerns a bit then I will not even do it using trpc initially we will make a folder that is data layer and in here I'm going to make just index.ts cool we'll make an object that represents all of this export const data layer I even call this DL just to give a nice little shorthand and this will have we'll call them queries and we'll say a mutations so let's actually build them now we want one for getting posts let's do that get posts need to get DB imported here cool and this file is important enough that I would actually take the time to import server only to be 100% sure here so now we have the get post function now let's do the delete post function delete post async ID number and I need to switch that to this import posts and EQ cool and now we have our data layer and it has queries and mutations so let's call that go back here post equals AA DL import. query. getet posts get rid of all those we don't need them anymore and I'll do the same down here 8 dl. mutation. delete post and there we go our concerns are now separated we now have a data layer an abstraction between these things and people are already making jokes in chat can I rename the DL to gql not the worst idea but yeah you get the point the goal here is to make it so there's a clean abstraction a a point of reference a place where all of these things live which is my data layer file and now that this is the place where we have all of the things that interface with our database we have a clean abstraction that's a lot easier to code review put lint rules on and make sure never leaks into the client it's still very fun to just call your database inside of a component and use that to get data to prototype things but as soon as you want to do things more serious abstracting it into a layer like this makes a lot of sense those who have already written trpc might be feeling some h right now because that might feel familiar it's effectively the same thing we do with trpc where you create a trpc router and you pass it procedures where we're defining functions the difference is they have inputs they're validated and they have a concept of queries and mutations that is baked in so we call do query to make a thing that's just for fetching data we call mutation for a thing that makes changes to data and this pattern works great in the same way the same way did dl. query. posts I could await the trpc API which we just call Api in these projects posts Dot get latest and it works the same way this is just one post but if I command click because again trpc is Magic you can just command click there which obviously does also work with the simple example I was doing here we can get straight to the place the thing came from with trpc I want get posts public procedure cool just Auto completed the whole thing don't even need the context other than as a way to access the DB now we have that instead I go back here change this to get posts and now the code is exactly the same I'll prove it by adding uh two more fourth fifth not back here and now we have these being fetched the same way but using trpc instead so while playing with these examples I just used a inline SQL equivalent I used a data abstraction layer that's literally just an object with functions on it and I used a full-on API layer abstraction that could be consumed by other things using something like trpc and you can mix and match all of those in the same components because that's the magic of the new pattern react isn't telling you how to separate these things anymore and that is great I was playing with rail a few days ago and when I was playing with it again cuz I wanted to do a demo with it cuz I used to be a big rails user the number of different files you have to touch just to get new data into your UI is insane it's actually insane and with patterns like this those problems just go away you just don't think about those things you abstract as much or as little as your problem needs the same way react components meant that we no longer had to break everything into model view controller if it didn't make sense the collocation of concerns where you think makes sense is the magic of this if you think having SQL inside of your components is the right way cool do it if you think having an object that has all of your functions in one place makes sense awesome do that if you really like having a formal abstraction with something like trpc where there's validation on every single input there are contexts being shared across all of this awesome do that and if you have an old API that you want to keep using that you're just not wanting to drop for any of many totally valid reasons then we go back up here HTTP apis totally a valid option too you can do any and all of these you can mix and match the parts it's composable it's Unique and it's awesome I hope this helps clarify why I don't think these patterns are scary and what the future of this stuff looks like the goal was never to write SQL in components the goal was always to make our Solutions composable so that we can solve problems how we want to in the ways that make the most sense for our applications what do you guys think though cuz I know this was a chaotic one until next time peace okay one more meme I had to sneak in this was hilarious Tom does Tech also Tech YouTuber check out his stuff he does the tutorials I probably should be but this is fantastic if everybody's so mad about putting SQL in our HTML why don't we just put HTML in our SQL so here we're concat values that we're selecting to elements in HTML so that we can render all of this as a response from our SQL database beautiful wonderful no notes oh actually one note xsx who's that SQL side rendering SSR oh so much gold why run server close to DB if you can run it in DB this is so good thank you Tom thank you Tom




## The _Wrong Way_ To Use React - 20240831
I'm going to be honest with y'all this video is a bit of a mess it started because one of my favorite authors wrote a great blog post about collocation of data in your components and how react data fetching model has gotten both Messier and better I ended up getting triggered pretty hard throughout and the results was a diagram a very good diagram that I put way too much time into I think this diagram and how I explain it can clarify a lot of misconceptions that exist inside of how people think about react data fetching and the difference between fetch on render versus render as you fetch if none of these terms make any sense to you you should probably watch the whole video if you just want to understand the different ways of data fetching in the react ecosystem and how to think about them there will be a time stamp somewhere so you can skip to when I talk about this diagram but yeah this video is a crazy tangent of me writing code Snippets showcasing different behaviors talking to this blog post and to a tweet about it you're in for a ride you can take the whole ride or you can skip to this part whatever you prefer to do I'm proud of this video hope you have a good time with it salute and good luck oh boy so let's dive in also the call out that Tanner Lindley happened to make a thread on Twitter of like the exact same topic we will certainly be going through this momentarily but obviously first and foremost we need to read this so let's do that recently the react Community went through a bit of drama I'm not here to recite the whole Saga in this blog as this excellent Chronicle by Dominic AKA TK dodo has already appeared but here's a brief summary also I have a whole video on this uh where is it I was really here it this yeah I they searched the right things how react 19 almost broke the web apparently YouTube doesn't want to Index this one CU I talk about react too much so I'll put this in the notes so you can more easily find it it'll be in the description if you want to take a look at this video it's my breakdown of the react suspense drama fun big dramatic one highly recommend watching this is one of my best videos I put way too much time into that one it's not the usual I read a blog post thing although there were blog posts in it there's also a ton of behind the-scenes work and research to make sure we characterize situation properly so check that out it's way more important than this video this one's going to be good too though so come back if you can anyways previously react on client would concurrently render all siblings under a suspense boundary and display the provided fallback element until all promises are resolved kind of like a promise. all the change Behavior with react 19 would instead sequentially render siblings under the same suspense boundary on the client which would allow for react to display the fallback element faster while introducing waterfalls for acing tasks it's like a four of instead it might have been a trivial change from the core team's perspective since the suspense behavior on client was still marked as experimental but a lot of big libraries in the react ecosystem including react query trpc and react 3 fiber were already depending on the original Behavior as well as many individual early adopters so a big push back was inevitable I don't fully agree here of these libraries trpc wasn't directly using this it was part of react query using it CU trpc is just a shim on react query for its react bindings so anything trpc is doing in react is almost certainly react query to be fair the trpc devs do make requests and do file PRS to react query to add functionality for trpc and other things like it but trpc isn't using react core so much as they're using react query so heavily and they're one of the few consumers that's heavily using the suspense stuff which by the way most people using react query have probably never written a suspense query you know what we're going to pull if you're not a react query user first one if you are a react query user but you've never used suspense query you just use use Query this one and then yes if you've actually use a suspense query before yeah this is what I thought 50% not using react query fix that 50ish per using react query not using suspense query and only two people in my audience admittedly pretty late we only got around 3 people still watching only two rush to go click yes they've used you suspense query so to the point of the article yes react query does technically take advantage of this suspense Behavior but not a very large percentage of react query users are actually taking advantage of that behavior so yes it sucks in the sense that a big Library had some things that got worse but the point I want to emphasize is that react was thinking about the users building apps with react with a change like this because for most apps especially apps that are big like Facebook the change to get you the fall back earlier was a good change watch my video if you want to breakdown on this but the point I'm trying to make is that very few people have actually used suspense in the way that react broke just cuz the library supports it doesn't mean the users are using it that way there is an exception though react 3 fiber which absolutely uses this very heavily react 3 fiber was the real victim of those changes anyways I made my point you saw the poll I'm right let's continue a big push back was inevitable absolutely this all shortly concluded with the react team reverting the change acknowledging the concerns and promising a better alternative in the future again react team were Bros here they recognized they up and they've been holding the react 19 release for months now on this react 19 would have already shipped if it wasn't for the fact they're spending all the time doing this what most stood out to me from the discussion however was the core team's early response to the community feedback initiating data fetching in individual components under a suspense boundary a pattern known as fetch on render is a bad practice this is the important key here fetch on render is a thing that they want to discourage what does that mean let's come with a mock example let's take this example of a friends list component let me export this so it gets a little happier we have data error and loading and we're hitting this API endpoint API friends let's say that instead of this returning a whole friend object it actually returns all of their IDs now let's make a friend component so function friend item this takes in props ID string and we want to get the rest of this friend's info look at that cursor getting pretty smart so we have this use API call where we're calling API friends friend user ID now we're getting back the data and we can use this for something let's just render or data do name so now we're rendering their name when we get it and we can go over this list I'll just leave as diff for now look at that autocomplete being so smart so we got our data which is the array of user IDs and we map over it and for each one we set the key to be their ID as well as importantly the ID that we actually pass so the thing to note here the part that matters the reason everybody's upset is the concept of fetching on render so the thing here that sucks is that we have to load all of the JavaScript on the client render this component and then and only then can we start fetching this data if we want to get all of the user friends we have to wait till the site has loaded the javascript's loaded and been parsed it has rendered and it has put out its first response then this use API call Fires we start getting that data and then we rerender when we get it that seems pretty bad where it gets way worse is the waterfall because once this back and forth is done so we have the first back and forth where we go to the server to get the HTML then we have to go to a different server to get the JS then we have to load the JS then we have to render the JS then we can start the First Data fetch then we get back the data we render all of these additional components with all the friend items and then each of those now has to make its own request that sucks now we have so many back and forths before the page can actually render the content it's supposed to that's the issue when people talk about fetch while rendering this is what they're referring to is in order for the fetch to start you have to render the component first and this is inherently likely to cause waterfalls where you have to load data to then trigger the next load to then trigger the next load because that's architecturally what fetch while rendering is is you have to render then fetch based on the render there is a beauty to this way of writing though the cool thing with this is now I can mount friends list anywhere and I don't have to give it props and it will just render it will just work and that piece of react is Magic the comp position of friends list guaranteed can figure everything else out that it needs to do that's a really really cool thing but this comes at the cost of you can't optimize the data loading which means getting the data to this component to then render is slow there are solutions to this things like remix which pushes you to move the data loaders out of react into the routes and then pass the data through so the data loading can start before the components actually render this is a bad example though why wouldn't the Fetch with the list give you all the details you actually need because react devs aren't backend devs this is hilariously common that the backend team doesn't give you the flushed out friend object you want with the API call and you have to make a separate API call to get the actual data but this is super common to have something you're fetching from that loads identifying data or an array of the pieces but doesn't give you everything you need if you're front end team has that level of control of your back end where you can always write the exact right thing at the right time that's awesome but most frontend devs are strapping together 15 apis from 50 different teams none of which return what they're supposed to and this is how they've solved that problem by just fetching all over the place it's it's the harsh reality of working in Technologies where your back end and front end are so far abstracted and the teams don't even talk to each other so as much as this is a bad example in the sense you shouldn't do it this way it's a realistic one Emily points out that the opposite is true too she writes an API to give them all the data they need and then they ask for simpler ones that only give one piece instead great question how we fix it if we don't have control over the back end we'll probably get there as we go throughout this let's keep reading this article because it's almost certainly going to be very good initiating data fetching in individual components under a suspense boundary which is a pattern known as fetch on render is bad practice the recommended alternative was to prefetch data outside the components that read the data but wait isn't react all about composing components components that contain everything they need State logic and view all nicely collocated are components not sufficient oh boy I like this framing a lot actually components a success story one fundamental bet of react is that components are a primary building block for UI apps each component contains a full recipe for react to produce a piece of UI State logic and view a component may include other components as his children thus forming a tree so a react app is the root component of a component tree that is passed to react to render on state change react re-executes the whole or parts of the component tree to produce the latest view of course the actual process involves a few more steps but that's the Guist of it this has turned out to be a wildly successful bet for years react has reigned Supreme in the web UI development space and gain significant Traction in the mobile development space as well there have been many Alternatives some of which have found great success as well but rexa largely dictates key conventions and Concepts in the space indeed most react alternatives are component-based even if they may differ in the details on how components work in fact the idea of component has been so successful that react is bringing components to the other side of the network we now have react on the server or as I'd like to call it react server that understands components produces an intermediary react tree representation and sends it over the wire reacton client then weaves the server output and its own component tree together in a single react tree to finally update the UI on the screen it does and it does this in a way that's really cool I also got another idea for a video as I was reading about react native the secret sauce that makes react native magical alt title why will never see another react native I have so much to say about react native let me know in the comments or chat now if you want to hear what I have to say about that because react native does not get enough credit for the cool things it does anyways the trouble with State unfortunately react components fall short is a sole model for the real world apps one main challenge has to do with state or more precisely the high cost of shared State across the component tree the react model executes components to produce the latest view on state change and this puts a lot of strain on performance for a large tree that includes computationally expensive components this is exacerbated by state that sits close to the root of the component tree and is used broadly across the tree because any update to it can lead to a huge amount of work regardless of how small the actual diff might be very fair points here seeing this a lot with people putting a giant context at the top of their app and then actually changing things over and over again it's obnoxious and a very real performance problem I've seen I will say a lot of the changes in react have allowed us to work past that in Solutions like zustand and Jodi pulling the State updates away from the global and away from a root context so that you can trigger them more granularly has let us work through most of that while still maintaining the the tree nature of the react component hierarchy but it's a fair point another important and related challenge is data fetching a component Tree in which individual components fetch data to satisfy their own data requirements can lead to a waterfall of network requests as well as poor user experience this problem is made worse when data requirements for one component to depend on anothers further degrading the user experience as they said the problem's made worse when one component's data requirements are necessary for anothers as I showed before in the code this component has to fetch this data before this component can fetch its data another common one to to give a better example would be here we fetch the users like data so we use the cookie to figure out your user and your user ID and then we pass the user ID to the next query to then fetch your friends list that has everything in it waterfalls are almost inevitable when you're building things this way the community has recognized these challenges and made numerous attempts to address them some more successful than others Facebook Engineers the largest react user since its introduction proposed flux as an architectural solution in which react was playing only a part for more Concrete Solutions we've seen Redux and many other State Management Solutions react query and other data fetching Solutions relays compilation of multiple graphql fragments combining into a single query react router and remixes nested routes in parallel data loading patterns the list goes on relay is particularly interesting here because it goes through your component tree and sees which graphql chunks each component requests and then it composes that into a single query that it could fire all at once to get all of the pages data in one request it's a really interesting solution and it's a big part of how Facebook functions in all of these we repeatedly find a common pattern where we need more than a single component tree to build an app with react we need manage State placed outside of the component tree of course the manage State still needs to be accessible from the component tree and the main mechanism for this is using a context and hooks for individual components to access manage State and data and there we have the common structure of a react app over the last several years always bet tressed by the ecosystem that's a word never seen before Welcome to the Jungle he wanted a banana what you got was a gorilla holding the banana and the entire jungle this is a famous quote of Joe Armstrong a co-creator of the erlang programming language in the original context the quote was an analogy to describe the problem of implicit environments in object-oriented languages o I don't like that you're applying mocking oo to react right now but I'll take it Boba it may be a surprise to some but the same applies to react as well a common practice a Temptation even is to put everything a component needs to produce the UI inside of its body making it appear as an autonomous self-contained Lego block to compose with there's even a name for this state collocation the general idea is to keep State as close to where it's used as possible this mostly works when all necessary state is strictly local to the component or it's provided as a prop but as we've discussed earlier passing external state to components as props can get very expensive in react an entire ecosystem has been built around addressing this a natural workaround to this conundrum is to place state in a context and have components to access it via hooks this allows react to reender only the relevant components on state change instead of the larger component subtree indeed this is how many established Solutions are handling State Place our Contex provider at the top of the component Tree in Access managed State directly from your components via hooks like use selector use Query use loader data Etc The Not So hidden cost of this performance optimization is that your components are now tightly coupled to these gorilla contexts I have feelings but I want to keep reading first so now we've arrived at the jungle we wanted simple components to compose with but what we got is components that are tightly coupled to Global State and context as well as other dependencies so now we've arrived at the jungle we wanted simple components to compose with but what we got is components tightly coupled to Global state in contexts as well as other dependencies the irony is that the more we try to make our components autonomous and self-sufficient by collocating all their state and data next to the UI the less composable they actually become oof that's a banger funny how components come so close to objects State location to encapsulation and context and props to dependency injection they may as well be the same thing oh boy what's this tweet components are objects components equal local state plus methods local state plus methods equal objects this is funny this is from 2017 this is like before hooks even happened think the component object distinction serves to culturally distinguish JavaScript and Java quote we do not do o like that okay I don't fully agree with this point actually I know Elm is trying to do functional programming even further but the mindset for react and the thing that the react team's always pushed is UI equals F of State the goal is that you have the function which is the react app and you hand it a state which is the way the world works and outcomes your UI that was always the goal of what they were building with react and it has had crazy paths to and from that point but that was always the goal I know that Dan changed it very slightly so instead of UI is function of State he changed it to ui's function of data comma State because the data is the thing that loads in first and then state is the things that the component and the the UI owns so it's two layers of state so to speak the client UI Paradigm is UI is a function of state which is how you write a counter the server UI is a function of data which is how you would do something like a post preview for a blog post to preview the contents of a given blog these are two entirely different paradigms but when combined you can do really magical things and it does still feel in a lot of ways like our UI is the result of these inputs and yes once you start intermingling and mixing and having components which are UI determine their own state it gets more complex but that's part of why react is pushing back on the fetch wall render patterns and pushing us towards these higher level data loading Solutions components are pure overhead many of us have learned to live in the component jungle some may even enjoy it for fun and games but others are desperate to find a way out what are the Alternatives solid the poser child for signals mostly bypasses the problem of State view Duality by treating view as a mere byproduct this is a very interesting point cuz funny enough we were working with more on solid recently for the upload thing bindings and of the new Frameworks it is the one that is like the easiest to pick up as a react of by quite a bit but it's still very unintuitive that the contents of a given component don't rerun when a change occurs because instead of having a tree of components that trigger updates where a parent component makes a change and then everything underneath it updates accordingly the tree isn't of your components the tree in solid is of the data and the signal because you don't even technically have a component as chat corrected me it's technically a setup function it returns jsx and it can call other setup functions that return more jsx but if you want your HTML tree to be able to update you have to build a hierarchy with your data separate from the hierarchy of your UI part of the magic of react is that you can roughly keep track of the state hierarchy by using inspect element the fact that if I inspect element I have this hierarchy of HTML that roughly maps to the hierarchy of my react code and I have things like the react debug tools that give you an even deeper way to look in like that it makes visualizing and identifying where your state is going significantly easier than something like solid where that's your problem now so yes react is kind of forcing us to do our state in a specific way that might not be optimal in many cases but it's good enough in most of them and it's way easier to visualize and debug and I've regularly found that trying to figure out what's wrong in a signal based approach is a lot harder than figuring out what's wrong in a react based approach I'm obviously very biased because I've debugged a hell of a lot more react code than signals code but it has been quite hard for me to debug the weird even small signals problems that we have relative to doing things in a component hierarchy as Boba says the truth lives in the signals graph holding State the signals are where the UI update graph comes from not the components themselves all components in solid melt into air after completing the job of setting up the signal graph in fact solid's Creator Ryan carniato already declared that the future is componentless as early as in 2021 and we're seeing as prophecy may be coming true as more UI Frameworks are moving away from components in runtime like spelt 5 with runes Vue Vapor Etc HTM X's locality of behavior principle offers an alternative take on what made components successful the intuition of what changes together should be placed together I do love this the thing that exists in the ways that it changed should ideally be as close to each other as possible because it makes reasoning about your codebase significantly easier but of course there is no real component to speak of an HTM all there is are a handful of these HX attributes to encode behaviors into the HTML elements and a few tricks like boosting and what about state it mostly just lives on the server side unbeknown to the client side that receives the resulting view over the wire this is a limitation that is also a blessing to many who got burned by juggling duplicated State on both ends of the network this is a very real problem once you had to deal with client and server side state and balancing the two and making sure they were all correct it's hell and we're starting to get into this again with the current local first move and people are going to get crazy here worth noting that state takes priority over viw in either approach also a fair point Y vtw yet another react versus the world back to the recent drama what it highlights is the gap between react's component oriented vision for building apps in the reality of its current limitations as well as the established solutions from the Community to address those limitations until recently react and its Community Partners were largely aligned but the relationship is starting to evolve as react's own vision and scope expand by bringing components to server react takes another shot at putting both state and view under the same component model yes there are still two separate structures but they're both component trees that react can manage and here it goes compose yes this is basically the conclusion I was going to come to which is a lot of the templating and a lot of the setup stuff that shouldn't be part of the react tree often still requires data in either way should probably be run first on the server be it during build or when the actual page is requested and the more we can move to that and let the components be these small optimized Solutions in their tiny little boxes we get really close to the vision that even somebody like Alex Russell had for the web of a static page with little interactive elements and we're getting there every framework is becoming a crab and by a crab I mean a bunch of little JS bundles inside of a giant application along with that react aims to establish new new patterns for architecting apps where the component Tree on the server takes on the responsibility of keeping the current view in sync with server State and data in turn the component Tree on client gets new features like use optimistic use action State use form status and more to streamline passing messages to and from its server counterpart in the new react architecture perhaps react alone is sufficient to implement the flux pattern across the network Gap and is it just a coincidence that react now has an action in its core terminology I'm just asking questions here the client getting leaner and lighter is a bonus and the react compiler can make it run even faster maybe we even mention compiler here cuz it solves a lot of the update problems good call out at the end there though and remember we are getting to the end but I still have to read the Tanner thing too so don't leave just yet as it pursues this RSC strategy in full force react now makes a new demand from the ecosystem where Frameworks take a more Central role and with that shift of focus frictions are inevitable all established solutions from the community have invested a lot of time and energy but now we'll face an uncertain future so the latest Dr was only one manifestation of the friction I expect more to come I don't really agree here because the friction was brief agreed upon hurt a very very small subset of react users and it was fixed so I don't think react will have this problem historically reacts backwards compatibility has been insane like unbelievably so it would be hard for me to believe that someday there's a react 20 that react 18 users can't reasonably upgrade to while I agree react won't back down on their Vision they will AB absolutely find a way to minimize what breaks in the process will friends turn enemies or will their bonds go stronger after tests and trials all eyes are on react at least we agree here everybody's following react and what it does and what it learns let's hop to this Tanner thread but first huge shout out to Boba I'll be sure to link his Twitter in the description so you can follow him let's hear what Tanner has to say very curious I'm very thankful react rolled back the v19 suspense gate and we're willing to work with us I think the future is as bright as ever now this is where I want to go next I'm increasingly concerned how much react is pushing render as you fetch hoisting and pre-loading as the blessed and last week almost required approach for client side data fetching despite the current state of the ecosystem this is a fair point that right now most react apps are fetch on render not render as you Fetch and that's going to be hard for a lot of companies to adopt even the ones using graphql are often doing it through something like Apollo which is very much fetch while render so flipping it so that we start fetching immediately and then you UI appears as the data appears instead of the UI appearing then triggering the data to then appear that's going to be a hard move for the whole ecosystem not in like the tools like the libraries we use but the big code Bas is built that old way regardless of the library used to fetch client side data if you're not using a framework's SSR level route loader or async paradigms your solution probably resembles some kind of hook like use Query or heaven forbid one that you rolled your own Tanner is one of the few people that can make that joke is the creator react query I'm happy about the concern we all have for performance ux parallelism Etc but not super happy that some of us are so quick to give up the amazing DX that is data collocation very real every once in a while when I'm building an app that's interactive enough I desperately Miss react query and TR PC and then cave and do it I just got mostly done with rewriting p. ping which is the tool I use for managing my thumbnail faces this will be open soon for people to pay a subscription and use their own Picture Management very excited for it previously I did this all using server components and I started running into a few annoying things to do things like infinite scroll with pagination you can't see cuz I have the stupid versel bar there but when I get rid of it you'll see these little scroll Wheels appear as you get to the bottom and the rest all floods in doing those types of things was a little bit annoying with server components there wasn't really a pattern for it yet but it's just built into rehack query and TPC it was like three lines of code to do that with this instead so I started moving more and more of the API layer back to that solution because just embedding the data call in the component and using those existing libraries and their existing behaviors made building a real usable application way easier even if the first load now takes slightly longer the first time it's worth it especially because I'm going to start locally caching some of these responses so you don't have to load it from the server to do the stuff on the client as far as I know relay is one of the few libraries that can really handle hoisting data requirements out of components automatically not without a lot of buy and Convention though and it gets you the best of both worlds it's naturally that RSC is the spiritual evolution of this pattern I've talked about this a little bit in other videos I don't think people understand how much relay influenced this new Direction with RSC I should do a deep dive on why relay is so cool at some point let me know in the comments if you want to see that the quick tldr as I was mentioning before is that each component can write a graphql stub and then your compiler per route goes through and finds all of the stubs all the components need and then generates a single query to fire for the whole page that patterns magic because you're writing the query inside of the component but the component isn't loading the data the component is adding to the request for the whole route saying Hey to render me I need this little bit and then when the page starts loading it can load that data before the component is even rendered this influenced the way that server components were built massively just one example is the way that server actions work if you have a bunch of components that use actions even if you import an action that's not being used anywhere just importing it on a given route means it's now part of that route because again the goal of a lot of what's going on here is to make it so that your routes know what behaviors each component might need so it can get them ready way further ahead of time so basically is getting back to waiting for the whole page for data to load before you see any no it's render as you fetch is the pattern so fetch while render is you have to render then fetch render as you fetch means when things come in you can render and with relay you can have certain things delayed you can say this can be deferred I don't need this immediately and then other things come in as fast as possible and then you can render as soon as all of the requirements for a given component are met that component can render and then other components can wait until their requirements are met people seem confused about render when you fetch versus fetch while render let's excal draw a bit so fetch and render and I wanted to break it down a bit so let's say we have this component hierarchy we have the app shell which has the top nav it needs to know who the user is to know what to render if there's no user needs to render a signed out view which is fundamentally different so this has to have the user info before anything else can render I show that by binding um this green arrow here cuz appell needs user info from this API blob this has been to show all the things that this page needs to load so appell needs user info friends list needs the friends list which only Returns the IDS of your friends for some reason and then the actual friends in the friends list need to have the individual friend data which eventually will be an array of all of your friends so if this is the UI you want to render and we render this the fetch on render way I made a nice diagram I've been working on this for the last 20 to 30 minutes shout out to my editor for turning this into a video Everybody give face and love in the comments he deserves it for this one anyways if we were to use the fetch on render pattern which is how most react sites work first step is the client requests the HTML it then parses the HTML sees that there's a script tag in it then it goes and fetches that JavaScript then the JavaScript comes in and renders the components but it realizes to render that first component to render the app shell it needs user info so before it can render anything else if request to the server says hey I need user info so it identifies the user probably using cookies then it goes and generates the user info response and it sends that to you now the client has it it can finish the app shell but now it starts rendering the friends list and it realizes it needs more data so it goes over the wire again and says to the server hey I actually need the whole friends list too so it has to re-identify you because it's possible that your authentication has changed or that you're making this request in an illegal or fake way seem to be re-authenticated and identified then it can do the friends list then we send you that you're like oh but I have to render all my individual friends I need more data for that so we have to re-identify you fetch the individual friend endpoint and then finally send you that so you can finish render notice how long that is and that's a a pretty simple example and it really showcases the waterfalls the first waterfall is when we wait for the JS to load then we render the first component that requires more user info then we render the second component that requires more info then we render the Third component that requires more info so it's step by step by step until you finally get to the end the reason render while fetching is interesting is because instead of the client side determining when data is fetched the server side determines when the component's render so instead of the client rendering a thing and then pointing at the server saying hey I need this data and doing that multiple times it goes the opposite way where here we have the user fetching the HTML since it's hitting an endpoint to do that at the same same time we respond with your HTML we can kick off all the stuff we need to do on server and then stream in the responses so think of this more like once you request the HTML the server then starts doing everything that it can and then sending it over when it's ready so at the same time you are parsing your HTML fetching the JS and doing all of that we just wait for the data so you can at the same time that you're loading the JS loading your fonts loading your CSS loading all of the things your site needs to run we can be identifying you and generating your API responses in parallel and then when these things are ready which by the way we only have to identify you once because we're doing all of the rest of the stuff after that identification so we identify you we start in parallel fetching your information for the shell as well as your friends list because we know you need both of these things on this page and we send you both when they're ready we send you your user info when it's ready now you can under the app shell then we send you the individual friends list when that's ready too if we're being honest about how fast this is like relatively speaking this is like here and then this is probably like overlapping happening at roughly the same time and that's the real magic of render as you fetch is the fetching isn't happening because a component asked for it to the fetching is happening because by opening the page the server now knows to start generating this data to send to you so render while fetch is when the server is done fetching a given thing it then tells you to render fetch on render is you render and that triggers a Fetch and you do that over and over it's it's on this pattern I'll rename these uh render triggers fetch versus fetch triggers render that's the difference in this model rendering triggers the user to fetch from the server in this model loading the page triggers the server to start generating the content and then when it's ready the content renders and hopefully the difference in the height of these trees highlights why both the react and the general web ecosystem are pushing Us in this direction because it takes a thir to a h 100th as much time to do this is an obviously better solution and I hope this helps clarify why the react ecosystem wants us here even if a lot of react apps in reality live here that was quite a tangent I that might even be worth doing a separate video of You could argue that a loader with a loader life cycle solves a lot of this but one this assumes that your data usage site is close to your route boundary and if it's not then two you likely had to either move the data out of a deeper component that uses it and into the loader then pass it back via props yeah getting these patterns working with existing react models is not fun like how do you figure out what data each component needs and how do you actually get it to the components cocation on the other hand feels natural for projects that require this level of data Dynamic behavior and components like a dashboard widget or a productivity app and for the most part it works amazing unless you need SSR and that's where I imagine react has likely been thinking that server components would fill in nicely as as always SSR is the Crux of it all and relay was on to something regardless if you need both collocation and SSR you have to jump through hoops to get there annoying ones even with those annoyances though it's hard for me to imagine many of these highly Dynamic apps moving to an RSC future unless they have SEO and SSR stuff that they're required to do like it's the bread and butter of your product like if you're a social network or e-commerce you have to do it my point is that rsc's are not the only answer to collocated data fetching and honestly they still require some kind of hoisting conven if you want to avoid serers side waterfalls serers side waterfalls are a significantly less big deal as I showed in my diagram here you'll notice on the server side waterfall so to speak we only had to identify the user once and we could still do these two things in parallel and then do this third thing after this one without having to re-identify that's a huge win not having to wait till the client hits the server re-identify the user figures out what they want connects the database generates it and responds doing that in one request is exponentially better even if you're firing the same number of database queries yeah so that that's the one thing i' push back on is serverside waterfalls are nowhere near as big of a deal as client side ones and I hope the diagram helps showcase why for starters RSC requires architecture and opinion buying Beyond just npm install react yes the architecture you have to adopt to use these things is the biggest complexity and the reason that they're not just immediately taking over so when I see render as you fetch what I really see is a hefty checklist data hoisting with a compiler router conventions ET ET cache coordinator in order to make sure the right data goes to the right place as well as a consumer to make sure you have a good way to actually consume that data and there's also a whole bunch of hairy code to make sure the SSR is actually working with streaming hydration Etc it can be more performant for some kpis and if you need those or SSR you'll have to do it anyways but it would be a mistake to think everyone's in that bucket I would really like to see more attention going towards retaining the awesome DX of being able to collocate data requirements with usage sites without forcing more cognitive load around prefetching patterns I don't know what those Solutions are yet I have ideas but even if we as an ecosystem were to go down that road it would be a thousand times better if it was a problem react itself would consider as first class instead of some curse pattern that needs to be squashed or discouraged that's why tanack query is so awesome yes there's some extra pre-loading to do if you need SSR and for RSS and Frameworks we've already been hard at work for some pretty cool stuff despite not having Primitives in react for it in order to make it just work with rsc's tack starting router will be no reducing cognitive load is our goal and trying to remember if you pre-loaded or kicked off a fetch in a loader is high on my list of mental tasks to destroy please don't kill collocation in the end we're all Reinventing relay aren't we this is a great perspective huge shout out to Tanner for continuing to fight for the client side data fetching and for the collocation experience at the same time there's a reason that we're being pushed this way if you can do this it is not a little better it's exponentially better and it solves most of the problems people about with react the issue is how do we solve the things people  about and react without making it not feel like react that we love and care about we're all here because we love react a part of why this is happening is so people who hate react will have less reason to but in the end we're all doing this because we love the DX we have and we want to keep pushing it Forward shout out to Boba for writing the article his link will be in the description give him a follow if you haven't let me know what you think and please watch and share this video so the diagram I just spent far too long on is worth it till next time keep fetching




## The case against SQL - 20250504
SQL was never intended to be used by computer programs. It was a console language for printing reports. Embedding it into programs was one of the gravest errors of our industry. Normally, I don't talk much about Uncle Bob's takes on this channel. We are not super aligned overall, but I have a few reasons I want to cover this today. One is that I don't actually think this take is that bad, and there's a lot of good we can learn from it. The other reason is because it is a reply to me. I accidentally started Bob on an unhinged anti-Sequel tangent that he has since filmed multiple weird videos about that we need to cover because again there's a lot that we can learn here and benefit from here. But it's also utter chaos and I want to do my best to break it down. So we're going to go over the origins of his take here, where they came from, and what I think is good about it. But someone's going to have to cover the cost of moving off SQL. So let's hear from today's sponsor really quick first. Today's sponsor is a company that Figma is petrified of. Yes, the one and only lovable. I'm so thankful to have these guys sponsoring me because they built an awesome product. They're one of the few app builders that really gets us as developers. They're not going to just make this magic environment in the cloud you have no access to. See that? That's a GitHub button because everything you do is synced with a real GitHub repo. So, you can pull it down on your machine and do it however you want. You can also just turn on the code button so you can see it in here as well if you so desire. This is a job board that I had it generate for me, and it's stunning. Like, this is actually already usable in its current state. I'm impressed. This was a oneshot, too. And once you want to set up things like O and backend, there's a one-click connect to Superbase button. But this isn't the lovable you already know and love because this is lovable 2.0. Yes, they just shipped a huge set of changes, including multiplayer, agentic chat mode, and everyone's favorite thing in AI apps, security scan. So, it's going to be way harder to make an insecure app as we've all probably seen from these vibecoded apps that are floating all over the place now. And of course, the thing that has Figma so upset, dev mode. And if you don't feel like writing the code yourself, you can just click this little edit button, click the thing in the UI you want to change, change it, hit save, and it will update the code for you. You could also click an area and tell it to do a specific thing to it, and it will do that as well. That level of granularity is still unbelievable to me. It's a very new thing. Most of the sites like this don't have that and it's the results speak for themselves. You can make beautiful stuff with this. And you can take my word for it or go to the homepage and look through the hundreds of beautiful things people have already made with it. It's a legit way to make awesome stuff. And if you don't feel like figuring out all the front-end things yourself, here you go. If you want to build something that's truly lovable, check them out today at soyv.link/lovable. Also, my apologies. I didn't have a bathrobe. That's why I didn't wear one. Let's go into how we ended up here in the first place. I was recommended this particular talk by Uncle Bob which concerned me because normally him and I are not very aligned and somebody was saying that we were very similar and I was confused. Normally Uncle Bob and my takes don't overlap a whole lot. I think clean code has done irreversible damage to the software dev ecosystem and the practices it calls clean often obfuscate bugs with the assumption that if you make your architecture perfect there will be no bugs. reality is that there will be bugs. Making it easier to find identify them is much more important. So, not a fan of that. Also, not a fan of whoever the was managing the camera for this and not putting his slides in. You you cannot see the slides at any point during this video. It's chaos. Anyways, I'm skipping to the database section of this talk because that's how we got here. Anybody out there write SQL? Who writes SQL? I'm sorry. It's a shame that you have to write SQL. SQL's SQL SQL is a fine language if you are sitting at a console and you want to query a database. It is not a good programming interface. It possibly is the worst possible programming interface because programmers don't want to pass strings into an API. They want to call functions into an API. And wouldn't it be nice if all of our databases had an actual API that we could call functions on instead of trying to construct horrible select wear strings that fit some nasty syntax. And so what do we do? We make our OMS. We get the whole problem away from us. We use OMS. Where's the OM in this? It'd be really nice if we could see the diagram, but uh yeah, you get the point. He thinks SQL is bad. And you would say, you would imagine, okay, so he prefers OMS because you get a nice separated abstraction. Well, he doesn't. Are you happy with OMS? Ew. What would be an alternative? An API. But wouldn't the API just end up issuing SQL under the hood? Unless we invent a new query protocol, we're just wrapping the same thing in HTTP. Run away. Run away. At least he recognizes that his take is basically impossible to defend, but it is a a valid core point he is making here. And I want to do my best to break down the the layers here because there are things that are are right, things that are wrong, and things that are in between. So let's break down the parts to our best ability. We have SQL is good for data terminals or consoles or whatever. SQL is bad for developers in particular in applications. ORMs are bad too. Everything should be an abstraction with simple inputs and outputs and data bases should just be an API that expose the data IO. This is roughly the the core points he makes when he talks about this and I want to go through these. I also realized I never gave context on who Bob Martin is. Robert Martin was one of the key signers and influential people in the agile manifesto, helped invent the solid principles and also huge OOP guy and big on test development, the clean code patterns that he helped key and like create. What's funny is he has a book on C#. He hates C#. He shit's all over it now. He seems to be a Go fan at the moment from what I got from his most recent talks, but he's also a big OOP guy even though he likes purity in pipelines. I he he confuses me and there are a lot of flaws in the way of thinking from clean code, but also he makes good points here and there and this is one of those times where I think there's a lot of value in the take. Let's watch his bathrobe rant he posted this morning as a followup to the reply to my tweet. What is it that you think happens inside of a SQL database when it receives a SQL string? Well, it compiles it down into an internal representation, a data representation, and then uses a set of function calls to interpret that data representation to access the data. Period. And that data representation and those function calls are what we programmers should be using to access data. We should not be using some bloated old arcane syntax invented 50 years ago for people typing at a teletype. Love the teletype reference. Different era. Worth noting. He is 72 years old and replies to my tweets with truck memes, but uh you get the point. The reality is that the layers get more complex as you understand them better. I was trying to to prompt for this earlier. Let's use the new quote feature on T3 chat. I'm going to grab this. Let's make a new chat with this. What would the function calls inside of SQLite look like for this SQL query? Show examples of the internal SQLite code that would be called when this query is fired. 2.5 Pro, which should be an interesting response. I'll also ask for or 04 mini because it's a recent favorite model. I'll leave it on medium. That's fine. Here we go. Here's Gemini 25 Pro's response. Let's break down what happens internally with SQLite C library. The process generally follows these phases after the CPI call. SQLite 3 prepare SQLite 3 step. SQL is tokenized and parsed into an internal representation, a parse tree. The parse tree is analyzed to ensure the table and column names are valid, data types are compatible, etc. Query planning optimization. SQL decides the most efficient way to execute the query for where id equals 42. It would strongly prefer to use an index on ID if one exists. If not, it will plan a full table scan. Codegen the query plan is translated into a sequence of bite code instructions for SQLite's virtual database engine and the VDB executes that bite code interacting with the B tree storage engine to fetch data. You could say that SQL's the original AI where you write a SQL query and it turns that into the right bite code to get your data. I'm half joking, but you get the idea, though. SQL is meant to be a standard syntax that query engines and planners can take to generate the most optimal path to get the data you're asking for. Is it the ideal language for this? Almost certainly not. Would it be nice if it had better primitives for managing schemas and type safety and integrating it into our applications? Absolutely. Would it be great if row level security was implemented everywhere? Abs not. But the the key to understand with where we're at now is that the complexity of how these databases are implemented is great enough that to live without it means to live with things that are much worse overall. Is SQL the original OM? You're going to hurt my head. Here's some examples of internal C functions that might be involved during the stages that you specify. So here's the select. SQLite 3 run parser would be the main entry point. SQL 83 get token breaks down the tokens. Uh, analyze implanting SQLite 3 select is a this is actually a function inside of SQLite codebase. There's a mirror here. Cool. Let's scan this mirror. I want to make sure we're not hallucinating too hard. Okay, there is a SQLite 3 select function. Cool. It's not totally hallucinating. Apparently, this function is thousands upon thousands of lines long, though. That's hilarious. Yeah, cool. So, we're not in total hallucination land. That's good to check. But if you if you notice here, there are a lot of steps that it is going through in order to turn that very simple query which was select ID and name from user where ID is 42. The amount of steps to to call those internal functions is absurd. And I know this isn't fully Bob's take, but it is in the lines of instead of SQL being the interface on top of all of this, we should do all of this ourselves in our applications, but build it with an abstraction that has the right function calls. So we would have like database.get user by id pass it the ID and it would return it and do the right things underneath like this without the SQL part. Let's ask about Postgress, something people actually like. I know y'all don't like my love of my SQL. Where's my thinking data? 04. Okay, it's like 50% of it gives you the thinking data now. It's been quite annoying about that, but at least we get the response here. Postgress SQL main function will eventually call exec simple query. Hopefully, you're seeing that this is not fun. Writing this stuff is not fun at all. So I I have my hesitations on the whole we should write the thing that hits the system directly bit. I also don't think that exposing that API is particularly sensical. But I okay we need to go a bit more here. The benefits of SQL because there are a lot of things SQL did really well that have kind of resulted in its success and I think understanding them will help a lot as we digest the failure parts. biggest one is it's standardized mostly. So it's not too hard to switch between like SQLite, Postgress, MySQL, Cassandra, and all these other SQL like syntaxes. It's pretty standard and it's allowed for us to build tools that work with lots of different implementations. On top of that, it's allowed for crazy optimization between that SQL layer and the rest of your database. If we have our app and our app code connects with SQL code and that SQL code accesses the actual DB implementation. The cool thing about SQL as a standard is the freedom it's given us as an industry to around here. We've been able to see and do crazy things like all the work that companies like Planet Scale and the Vitest team put in to sharding from MySQL in order to change how this code actually splits the data across many different boxes to make it as performant as possible. You can have crazy functionality added the database layer like rowle security or a websocket layer put in between so when the SQL code hits you can send updates to other clients. SQL as a standard syntax to access our data has allowed us to do crazy things not just here between the DB and SQL but also here between our app code and the SQL with OMS and other innovations in that layer. Both of these things are really cool and I know Bob's like the big abstractions guy. I think he's overthinking the abstraction point in terms of a given application. But if you think of this not as our app, but our apps as an industry, these abstractions have allowed for industry-wide innovation to occur in ways that are really, really cool. That said, there's a thing I have talked about a lot. I had this with a special command in my Twitch chat. GraphQL goes here between the server and the user, not here between the server and the database. GraphQL is a way to query an API meant to be an alternative to standard like REST fetching to allow for graph data to go through your application more easily. So if you have a user object, the user has friends. The friends is a list of friend objects that are users that have their own nested properties you could select from too. It's a way to select the right things nested in your application code. And GraphQL is really cool for certain things at certain scales. It is not really cool for a lot of the things I've seen people use it for. In particular, throwing it in between the database and the server or worse between the database and the user without a traditional server. No, GraphQL is not the solution to any of the things we're talking about here. But due to the nature of SQL, we could put something like GraphQL here between the SQL and the DB, realize it's wrong, and throw it away. And that's why this abstraction has historically served us well and why SQL has been as successful as it has been for what like 50 plus years 1970s. Yeah. 50 plus years. Kind of crazy. So this abstraction has allowed for a lot of innovation. His view is instead of SQL being here, DB manager service actor, you build an abstraction here with functions and methods on it that will call the deep details of the database. But now that layer is gone because now this class is heavily reliant on the DB implementation details. He claims you should be able to just swap this out with another. That's not how this works. this class is going to inherently be super painfully tied to the implementation on the database layer. And as a person who likes abstraction, I'm a little confused about why he doesn't like SQL as that abstraction layer beyond not liking the syntax. He does have a blog post where he goes a little more in detail. This is Bobby Table's blog post. If you're not familiar with Bobby Tables, it's a classic KCD comic. I think about this one way too much. Hi, this is your son's school. We're having some computer trouble. Oh dear, did he break something in a way? Did you really name your son Robert? Drop table students. Oh yes, little Bobby Tables we call him. We've lost this year's student records. I hope you're happy and I hope you learned to sanitize your database inputs. A classic. He has a blog post about this 2017 which in terms of both when this XKCD came out October 10th, 2007. So this blog post is over 10 years later and it still feels old. 2017 was 8 years ago. You get the idea. Anyways, SQL is demon spawn and no self-respecting software dev should ever use it. Okay, that's a little hyperbolic. Demons did not create SQL. Indeed, the folks who created it were filled with nothing but good intentions. But you know what they say about the road to hell. I want you to think about just what a supremely bad idea it is to use a textual data access language. Such a language can pass through the user interface of a system and provide unauthorized access to all the data contained within. Wait till he learns about how rendering HTML works in the browser. Now, of course, we all know that we are supposed to scan all our inputs for potential SQL injections, SQL attacks. And yet, hundreds of thousands, if not millions of users have had their data stolen by just this mechanism. Why? Because it's unreasonable to expect that every single user input of every single system is going to have the protections that are required. The problem, of course, could have been eliminated at the source decades ago. Back in '98, rain.for.puppy puppy described in frack how to slip SQL statements through a user interface to execute them. The instant that article was published, every single programmer in the world should have ceased to use SQL on the spot. I find it absolutely amazing that SQL still used. Did we learn nothing from Equifax or Yahoo or well, I mean just about everybody at this point, hasn't it? And here we are comforting ourselves that our current frameworks will handle the issue. Hibernate will handle the issue. JPF will handle the issue. Rails will handle the issue. Not going to say that I want to be demonetized. Frameworks don't handle the issue. Programmers do. And programmers haven't been handling the issue all that well, have they? Here's an idea. Stop using SQL. SQL is the ultimate security breach. SQL is a portable universal textual language that can be transmitted through the user interface of a system and if passed to the SQL engine, can provide absolute access and control to all the data in the system. The very idea that SQL statements might come in through the user interface and be held in RAM ought to fill you with unmititigated terror. All it takes for some poor idiot programmer to fail to remember the exact arcane gesture that offers the appropriate protections. Can you tell which of these statements is vulnerable to a SQL attack? The language is Ruby. The framework is Rails. User email is email pars email. Passing this in user where email or email equals question mark or email equals colon email because this passes it in as a string unsafeely. This passes it in as a variable where it will actually be parsed and sanitized properly. It is kind of funny because this isn't a problem with SQL syntax. This is a problem with how unclear the unsafe path is in Ruby. But I get the point of like the OMS are not doing a good enough job of protecting us. SQL under the hood is the thing that is vulnerable. But it's not just SQL. Like like this blog post is on a page written with HTML. Does it have a comment section? I don't think it does. I don't think he accepts user input, but a lot of websites do. So, if I have this HTML page and we have on it a paragraph, user submitted content and in here we want the user submitted content to render. What happens if the user submitted content is something that we don't actually want? Like if the user submitted content is sub nerds, whatever, that'll render fine. But what if it's LOL close script reopen the P tag? Now if you didn't sanitize your HTML rendering properly in this user input is just blindly rendered here, you have a huge problem because you let the user close the P tag, open a script tag, and do some stuff. It's not that bad if they're just alerting, but I guess a lot worse if you give it a source for some cross- sight scripting This is a mistake that is so easy to do. And the response to this problem isn't well HTML sucks and we should never use it. It's we need to be considerate of how the HTML is put into the browser. And we should be frameworks like React handle this by default for us now. And if you want to actually directly set HTML values outside of passing them as properties where they're sanitized, this is how you would enable this type of bug in your application if you were to do this yourself. The risk here is very real. It's not the same like you have access to the whole database thing, but in some ways it's worse because if I leave a comment on a blog and the comment links to like example.com/myhostilejs script. Now whenever somebody loads that page, as long as the comment is rendered, this script will now run and I can execute anything that normally wouldn't be able to. Like for example, if you have cookies on the page that are HTTP only cookies, JavaScript can't access those cookies cuz they're HTTP only. But if I get JS running on your page, I can fire API calls with access to those cookies. So I can take over your account. I can trigger a reset. I can trigger an email address change if those are APIs that I hit with those cookies simply by leaving a comment with this formatting. What's even worse is I could add something to the script tag that hides this element so no one will ever even see it. It just quietly runs in the background. The problem with these are inputs is you don't control them. And the way Bob likes to think about systems is assuming control over everything. And this has problems in more places than here. I found this awesome video yesterday on Internet of Bugs channel, which I forgot the sub to, so I'm fixing that now. And there's a really good example in here of the painful points of clean code. So imagine a hypothetical expense report app. So imagine you get a bug ticket that the user submitted receipts totaling $25.13, but the report only said $25 even. So where did the extra 13 cents go? So I've had a variant of this problem. It wasn't exactly this. It wasn't expense reports, but it was the same kind of thing where where the amount ended up being wrong because of something that you'll find out in a minute. So, for purposes of this discussion though, I'm going to talk about it as if it was expense reports, but this is more or less an actual problem that I've run into in real life. So, I'm looking for why it is that this stuff that I can see added up to $25.13 didn't end up saying $25.13 and where the hell the other 13 cents go. And I look for places that the cents get cut off. I look for places that things get rounded. I can't find any of that. I have no idea what's going on. Takes me days off and on fighting with this. I still have no real idea. And then what happens is I'm I'm looking at the specs and I'm looking at the accounting manual and I realize that city day in question the pdium for that was $25. Turned out that the issue wasn't that the $25.13 was getting truncated to $25. It's the $25.13 was being ignored completely because the system had decided that those receipts weren't relevant because that person was supposed to be on PDM that day. And in this particular case, the conditions by which the program decided is this a PDM kind of expense report or a look at the receipts from the restaurants kind of expense report was wrong in that particular set of circumstances. It it made the wrong choice because of weird accounting reasons. This is a particularly egregious kind of bug and it's specifically caused by the technique on page 109 and 110 of clean code. I will put those on the screen. What a baller move by the way to say this is bad for these reasons and it is discussed on this particular page of the book. The normal flow. I can explain myself but honestly Internet of Bugs does such a good job I'm going to let him do it. What this does is it tells you that you should return an amount that's either the PDM amount or it's the total of the receipts amount and not tell anywhere else in the program which one you picked. You're explicitly told by clean code at this point to hide why you made that decision from the rest of the program. And this is under the guise of error handling. This it makes me furious. They're telling you that the right way to handle a potential error is to take information that might be relevant to finding a bug and prevent anywhere else in the code from having access to that information because it's hidden inside the private part of this class. But it breaks the the basic fundamental stuff over here shouldn't be affected by stuff over there thing because it draws a line between over here and over there and it hides all of this stuff in these private classes and doesn't let anybody else in the rest of the program see any of that information. This is an utter failure of the philosophy that goes into clean code and honestly most of the programming advice that you see. It assumes that you can make code cleaner by simplifying things. And that's just wrong because that assumption is only valid in a world where the code you're simplifying is 100% guaranteed to be 100% correct for all time. And it's not. Even if you have 100% test coverage, and they did more or less in the case that I ran into, that doesn't mean you understood the requirements. That doesn't mean the requirements haven't changed. It just means that the code you wrote matches the understanding that you had at the time. And in this case, as with a ton of cases, there was a corner case. There was a set of circumstances under which the original programmer's understanding was wrong. Maybe even the initial specification was wrong. It took a while for that to get triggered and noticed. This whole video is phenomenal. I don't want to just sit here and watch the whole thing. The link will be in the description if you want to check it out yourself. Highly recommend. Yeah, internet of bugs here killed it and made a lot of really, really important points. Specifically, this idea of bugs aren't avoidable. We should build our systems to make it easy to find and fix them, not to like abstract them out of existence. The world doesn't work that way. And honestly, I feel the same way here in terms of the SQL attack argument. Like we have solved this problem. SQL's been around for 50 years. We have way too many ways to sanitize our inputs now to the point where it causes its own problems. Uh Adam tweeted a while back when server actions were first being presented at Nexcom, this example was given where we have a use server call in a form action that awaits SQL insert into bookmarks slug values slug. This looks super dangerous because I could just inject whatever I want there. Well, guess what? This isn't just passing a string. Notice there's no function wrapper on the sides. This is a template literal which means it's a function call that works by passing first a string which is whatever this part is but it will segment out these sections and the rest is an arguments array. So it's a function that is being called with the first string and then all of the arguments. So you have your own code that will map those together and sanitize the inputs. So we have this thing that looks like a traditional SQL call but is actually totally fine and safe. Everybody in the replies here was freaking out over the security issues and it's become a consistent meme since where like multiple years later he's still posting it and it still gets a ton of attention. He knows it's escaped and this is fine but it's funny that this like forever will plague poor Sam's like yeah you get the idea. People are almost too scared of SQL injections. So personally, we go back to here to the things he said. I'm going to add in one which is SQL I is a huge risk. People don't sanitize well enough. I'm going to just cross this one out because it is a mostly solved problem and I don't think it's necessary in our arguments against SQL. It almost feels like a crutch he leaned on back then. And it's also notable that he didn't bring up the SQL attack angle at all in his recent tier against SQL. This seems to be an older take that I don't know if he would defend right now cuz I feel like we've as an industry largely solved this problem. As long as you're not writing and firing raw SQL queries just as strings with user intent injected in them, you're much more likely to have an XSS exploit than you are to have this almost certainly. And those types of exploits are much easier to run into in a properly clean code architected system because you don't know whether or not something's sanitized before you get it. It it's a mess. So I said I wanted to agree with him here because there's a lot of good stuff. So now that we've asked that one point, where are my agreements? Well, first and foremost, we have this guy. SQL's good for data terminals. I know a lot of like crazy data people just from like my past. And some of those people can do incredible things with SQL. And the fact that I can have an OM layer that lets me write data to a database in a syntax that makes sense to me as a developer and then the data team can go into the same database and fire these crazy queries and mode analytics and is awesome. It's actually really cool that we have a a layer that allows for the data team in their terminals, in their consoles, in their mode analytics tools to access that data and for me to write it with a a different syntax that compiles to the same syntax. It's a a huge win and it has let me see how good SQL is for those crazy nested relational queries that people often have to fire when they're trying to find certain characteristics about users. So I agree here for sure. This green for agree SQL is bad for developers. This is where things are are a bit iffier. But honestly I've slowly come around to this point not necessarily for the same reasons. Do you know what I don't like about this syntax? Imagine if instead of an insert, it was a select. What I don't like is that the result of this call will always have to be typed as any or unknown because we don't know from the string what's in the database. This is what makes something like Drizzle so cool. Drizzle is an OM in quotes. It's closer to a query builder in a lot of ways for TypeScript developers. And if you look at the syntax, so I don't even know if they have any on the homepage, but they do have this section. I hate Drizzle. Sorry, Drizzle. You suck. I I love their like call outs here. And what they built is a very SQL like syntax db. Countries left join where these values are true. If you look at the schema, it's in Typescript, which means the type inference can all be done via the TypeScript definitions of your schema. And then you can use their CLI to generate SQL code to fire the migrations. I will say migrations are such a terrible abstraction that they in and of themselves kind of make the argument for why application code shouldn't use SQL because your application state should be represented by the code and the data in the database, not the shape of the database. They then have to synchronize between the application code and that database code. Ideally, that synchronization step isn't necessary, and we don't need this migration primitive in order to keep things in sync between the two. It's one of those abstractions that just feels like it it shows these things weren't built to work together. You can see the query this writes for you under the hood because this compiles to pretty standard, boring, vanilla SQL, but we also get the type safety guarantees and when we pass inputs to it, it will sanitize them for us, too. So, this is what I like about Drizzle. It lets you write SQL in Typescript with type safety. So it feels much more part of our system and our application. The relationship between our application code, our type system, and our database is much more cleanly attached. And what I like this for is something that Bob would probably hate. If I go into the schema and I change this from name to full name or to username, I'm not going to get a type error in the API that selects star and passes it to the user. I get the type error in the component where I try to render it because the types are honored from the place they are defined in the database to the component where they're being rendered. So if I'm rendering userame and I change this field in the back end, I get a type error where I'm rendering it, which is so nice. To go back here, I agree that writing raw SQL in your applications is bad. I'd even go as far as to say things that are less raw but don't give you that relationship between the structure of the data and the actual application code are also just as bad. You need a solution that bridges that gap in order to get the benefits of SQL. I'm neutral on this because I don't think SQL is bad because of the security implications or things, but I don't think you should write SQL code directly in your applications. And migrations are a weird abstraction. Like we have the history of our state in our git history. we don't need it in the migration files too. And now the first take I fully disagree with ORMs are bad. I wish he would go more in detail on this but it seems like he thinks we go back to the diagram here. If our app isn't hitting SQL code directly, it's hitting an OM and then the OM is hitting SQL instead. His argument is that the OM is unnecessary here and instead it should just hit the database implementation directly and SQL is a useless in between language here. I don't agree because what happens if we have multiple apps we'll say user app but what if I also have our data analytics what if I also have I don't know our like on call dashboard if we don't have this SQL layer in between as a syntax either all of these have to go through our OM layer which is obnoxious because the data analytics team doesn't want to use the same programming language that the application development team does and they shouldn't have to. The analytics team should be able to do what they prefer. The on call dashboard should be as easy as possible to maintain and not be too directly tied to the implementation details here because if the on call person is dealing with an outage in the package that manages your data, they can't get any of the information. So like all of these going through here doesn't make sense. Which is why right now they don't. What happens looks a lot more like this where these different layers will hit the SQL and the OM is just the abstraction that one or multiple different layers might use to access the SQL but since we all have the SQL layer different places can access the data and if all of these had to implement those terrible calls that we saw earlier like if they had to write all this code to fetch the data ah no we know better we've learned this lesson if every team is writing their own assembly to access something, then you end up with a bunch of weird locks and terrible performance. You don't end up with better code. This does not work. This makes no sense at all. Are there bad OMS? Yeah, absolutely. I'd even go as far as to say most OMS are pretty bad. Active record changed the way that application developers think about data in a very positive way. And I don't want to talk on it for that reason, but it does have a lot of the issues like what we saw in the blog that Uncle Bob did that showcase why it's not a big enough abstraction to prevent you from these in my opinion very preventable mistakes. So I disagree with him here and I wish he would explain more in detail what he doesn't like about OMS beyond the like abstraction layer bit there because I think that SQL as a a primitive that we use does make a lot of sense the same way that languages that compile the C make sense next should be an abstraction with simple inputs and outputs I'm going to break this into two everything should be an abstraction no simple inputs and outputs yes I love my functional programming stuff and the way he has been framing this especially recently in recent talks. I almost feel like he's starting to fall down the functional programming pipeline a little bit, which is exciting. But the the point here is that your database access layer shouldn't be an application specific abstraction until it makes sense to a pattern I've liked doing recently is I make a DB object and I have a query key and a mutation key in it. And now whenever I want to call something, I call DB.query. And here we have DB.query.get get images with tags or db.m mutate delete user data reset usage update subscription and now this is all type safe too because it's all calling these drizzle calls directly but this is SQL so to speak I'm writing this in a way that's very SQLy and there are cursed things in here as a result because SQL far from perfect we look at the um get images with tags code up here yeah get images with tags I do some weird where I'm internally joining because this is a flaw of SQLite and how bad the relations are. I do not get the hype around SQLite. I every time I try to do anything meaningfully relational in it, the whole model starts to fall apart for me. But here I'm trying to get the tags that an image has and I have to JSON group them in order to get this in a reasonable fash. It's it's obnoxious. But the the point here being I can write SQL and get a type- safe result and then have to parse this one inlined bit here. Thankfully, none of this is taking a user input, but if it was, I'd have to pass it as an argument in order to keep it safe. You you get Oh, no. No. This is templated. This is safe. I can pass user info here and it will be safe anyways. Regardless, annoying. That said, the idea of a object that defines all the ways we interface with the database. That's a fine idea and I like that abstraction. I don't always like that abstraction, but when it does make sense for the application, so we have a standard way of accessing data, cool. But should that be the database layer or should it be a level higher or lower? Great question. I don't want to tell you because all of us should have our own decisions that we make about these types of things. There's a lot of different options and a lot of different ways to structure our stuff. If we prescribe one single way, we are setting up a significant number of people for failure because it won't make the most sense for them. We should try to keep things as simple as reasonably possible and add complexity where we have to to solve complex problems. Building our own database access layer that calls internal functions in a data pipeline is not the simple way. It just isn't. Back to Bob's takes here. Databases should just be an API that exposes the data IO. No, I don't agree here. I think that databases should have better APIs. Absolutely. And that SQL was built for a different era and that's why got as popular as it did. But the like the IO inner workings for these things is insane. Like the abstraction of the OM has allowed for the database to do crazy innovations and changes. Like I was able to move from Reddus to planet scale to a SQLite provider all in a few hours because of the abstraction of that OM. We don't have a low enough level abstraction for the database such that we can make those changes and the standard nature of SQL has made it a lot easier to swap between the things that aren't the first when I said they're Reddus. Reddus to SQL was the big lift but once we were in SQL land switching between things was relatively easy. I like the idea of database technologies thinking more about how we interface with them in application land. And we're starting to see this more. There's companies like Gel, Postgress Unchained. Gel's awesome. It's originally known as EdgeDB. If you're familiar, they finally rebranded to something that makes more sense. What they built is a very different syntax. You don't have to use it, but I'd recommend it. Select movie, title, actors, name five, limit five, rating, and filter. This is such a nice way to write something that in SQL would be very annoying. And you can do it in TypeScript, too, using their TypeScript client. The goal here is to build things that are much more closely tied to how we interface with the stuff in our applications. The idea of a nested key that is a relation that you can apply a limit to is very applicationy. It almost feels GraphQL in a way, but in the in the right sense because this is a database built around this. I should also disclose I'm an adviser for gel. I've been helping them out a bunch. So, I do have equity. So, take my takes there with a little bit of bias. Another one that you should assume bias for is convex. I currently have no equity in them and I really should change that because I've helped them a lot and I'm really excited with what they're building. This is a different way of thinking about databases where the code is the abstraction and it just lives in your codebase. I'm in the middle of a port rewriting T3 chat's server side code to be almost entirely convex based for the data and it's been awesome for it. I have my schema which is Typescript code. Threads are a table with thread ids, title, create at, all these fields. You get the idea. I define indexes so I can look things up more quickly. And then I have the threads file here, which is a set of functions that I'm now exposed to be hit on client, on server, wherever else. Queries have optional inputs. I made my own o query wrapper so that I can make sure the authentication primitives are included. And then I return await context. DB query threads with index order take 200. What's cool here is this runs in a transaction layer that they wrote themselves that will take all the await calls, flatten them into a single transaction, and then fire it once, which is super cool. And they're all built on top of my SQL at the moment and it runs great. The performance is nuts. But since they built this abstraction, not only is it nice to work with, not only is it type safe where if I do like use thread data, now when I hover over threads from convex, I get all the type information here, I can also commandclick API threads get to go to this specific function, which is so nice. But since they have that abstraction, they also can build sync on top. So now I can connect via a websocket instead of a traditional HTTP call. And when a change happens to that data, it knows because of the way the transaction layer works, what data isn't isn't affected by a given mutation, and it can send the change to the user without them having to go refresh the page. Let's make a test thread. Test thread understood. Ready? Cool. Awesome. So, I just made this new thread. Here's where the magic happens. If I hop over to my dev environment, go over to the data and go to threads and find that thread test thread. Right, cool. I'm going to change the name here to don't forget to sub. Now it's updated in the UI. I didn't refresh. I didn't trigger anything. Just immediately updated. That abstraction is actually really nice because you never you no longer have to worry about traditional out of sync data problems that drive me mad normally. I've been very happy with this and I'm so excited. It's going to simplify so many of the annoying things in our codebase as a result. Like is now on the server I can fire a mutation that changes the title and I don't have to worry about the client getting the update. I can just call the code on the server and the client gets the update. This is an inrogress piece here. So ignore this. Theoretically I would have validated this much earlier. I haven't yet. The part that matters is server convexclient.mmutation. I pass it the API internal chat update thread. This is an internal API. So you can't hit this. Only I can hit this via the server. Thread ID, validated thread ID, user ID, the user identifier, updated body, title. This is a mutation to the data through my application interface, my API that on change when this fires and succeeds, the client gets the update. I don't have to build my own thing that will refetch it. I don't have to send it down the stream like I currently do. I had to put so much work into this layer in the current implementation on T3 chat. It's insane. This create message function has been the bane of my existence for a while now. It's 618 lines. It is a couple different functions, but this file is where half the work for this project goes. I have my stream helper that once we've synced up and gotten the state of things fires this fetch call. This fetch call returns an SSE response because it's a post call where I'm sending events over time. So I'm streaming content back line by line. I then have to process the data stream. I was using my implementation. I finally moved to the SDK from Verscell for processing the stream, but I had to write a lot of my own stuff here. And this is where all of the heavy parts are. On text part, I append and update the index DB local instance. On reasoning part, I update the reasoning chunk instead. On data part, there's a lot of different conditions where data comes down. There's provider metadata, which I have to update the title for. There's rate limits, which I have to update other parts of the UI for. I'm not doing it right here anymore. Right limits work a little differently than they used to. We have the thread metadata where I'm parsing to get the updated title out. We have image gen, which is a different data case because image gen goes down a different pipe than the text does. So, I have to render this differently than the error case where I do a lot of different because I have a separate error case, a separate finish part. All of this is for all the different cases that every chunk from the server can hit. If I could instead run all of this on the server and just hit the case, update the database, and the user sees the update, all of this can go away. I'm no longer trying my best to parse different cases with strings and hope that the value in the JSON I got back is correct. All of these abstractions that aren't safe between each other can be thrown away. And I just found a case with um the error handling where I wasn't JSON parsing here, which meant the error message I was getting was wrong and I was always hitting the catch case, which meant you would always render an error occurred instead of the actual error that occurred if the error happened during the stream phase instead of during the initial response phase. And just the fact that I have to think about all of this first off is why everybody's saying, "Oh, it's easy to build an app like this is just wrong." But more importantly, it's abstractions that I have to have because of the nature of the request shape that a better database abstraction can make just go away. So I very much agree in that sense that the way we think about databases right now does not map great to our actual implementation details of applications. But that's not because we need function calls that write data directly. I think we need a higher level abstraction. I think we need to go one layer up. And with that one layer up, all of a sudden we have way more functionality and control and we can simplify things too. The last take of his, he said this in the video, uh, databases should not be the center of the universe. That's how he framed it. I fully hardcore disagree there. In fact, I think it's one of the better things we've done as an industry is the idea that we have our database, which is our state. The state goes through our logic and then out of this comes the application. I am biased because I'm a functional programming bro. This is good. This is another way to write this is application equals function of data. This is good. This makes life much easier because if there is a bug that a user has, it's much easier to trace where the bug is. Is the database in a bad state? Okay, that's probably the source of the bug. Is the database at a good state and something else comes out on the application layer. Okay, let's walk back from where that logic starts on the application side and go back step by step until we're back at the database. Then we can figure out much more easily where things went wrong. And in large applications, this simplicity is phenomenal. I'm stealing this syntax to describe it from a certain community. This is how React is pitched. UI is a function of state. So if the state changes, rerun the function, new UI comes out. The way that Bob proposes we do this instead is quite different. Instead of database being the the center and everything flows from it, the application is the center, but the application's a bit different now because the application has a bunch of different pieces. So your application might have all these parts and they're all in here abstracting away their different logic and these can call each other in all sorts of different ways. And you can see how chaotic this gets very quickly. It's a bit of a mess, but this is clean because all of these services have their own abstraction. So onboarding controller doesn't have to care about how billing service works, but it does have to care that the user has paid their bill before contacting user management service to update things there. The worst part though is that the database still has to exist. And what ends up happening here is every single one of these things now has to contact the database and you end up with absolute chaos in the process. And don't say this doesn't actually happen. Every massive clean code architected codebase I've ever seen ends up here. The point of database in the center of the universe isn't that it's in the center. I would highly recommend thinking of this less as like a 2D grid and wherever you can think of it as a one-dimensional path and process. If you reasonably can map your application to database logic app where it flows through things top to bottom like this, everything becomes significantly easier to understand. Because when you have a bug here, you can trace the bug line by line backwards to where it occurred. When you have a bug here, tracing where it came from becomes hell. It's a murder mystery. It's not an actual like debugging experience. This is not good. If you think of the world this way, putting the database in the middle instead of the app sounds so stupid. And what he is fighting against is the idea that database should be here amongst all of this chaos. And I agree in that regard. If you're in this chaos, the database being the center of it all, not good. But if you think less in clean and more in purity and you think about how the database change can blow out everything below it and the updated application state comes from database goes through logic app comes out things get much easier. So if we take all these parts move it here let's say the user checks out from something user triggers checkout. The checkout would probably go to the billing service. The billing service might need to go update the user management service in this process. So billing service says, "Okay, this is new billing information. Let's throw it in the user management service so that we know that this changed." Then that we'll call the database. Awesome. Now what comes out is the new application state. The database update combined with a refresh if you're not using something like Convex to handle this for you. Assuming we still have the same parts here. Ideally, it's just functions, not like controllers and whatnot. The database change now results in the onboarding controller having a different state and this will now render a different application state. Do you understand how much simpler it is to debug when your application is architected this way? Especially if this whole thing is framed as a function. This is why I like FP because when you think this way, debugging instability and bugs become significantly easier. And the reality is the chain isn't actually this long. The chain is the user trigger checkout billing service controller happened user management service updates DB. What happens next is this part here is separate. So after the database change you would trigger a refresh or something. So refresh or the user just navigates to the page when it's done. Now when we render the app when a user navigates so user opens page they call a function effectively when the page gets opened. The function queries the database for the data it needs. It passes that data through the onboarding controller and whatever other layers are there and then the application state comes out and then the app comes out the other end. It's so much nicer when you think this way. But you need a clear input and output for everything like your your entry point for a given URL on your site needs to have a clear function that gets called that fetches data, passes that data to the right functions one at a time in order and then the result comes out. This is also how React works. is a huge part of why React is as good as it is because you don't have to think about what is the state of the onboarding controller when the database comes in. What's the data being stored in user management service by the time onboarding controller is triggering the update, it's so much cleaner and the industry is moving this way. React's a huge part of it. the general push back on MVC which believe it or not I think Bob and I are pretty aligned on that our application shouldn't be broken up arbitrarily into model view and controller they should be broken up by the features and the routes and the things users actually do we're very aligned in that regard but the cleanliness of the input and output is something I care a lot more about and the database isn't the center of the universe but it is the input point and data isn't entered into my service by going into a function The data is entered into my service either by being in the database when the function's called or by calling a function that does nothing but update the database and then trigger an updated state. A controller has state. Controllers have their own state in it. So we would be creating a new controller here if instead of onboarding controller this was do onboarding flow. If instead of a controller you thought of this as a function that takes an input and a new output comes out. very different, very different from a controller going to database, getting some information, passing it through a model to a view that then allows for the state to be updated in the UI. I like this framing. It's OOP versus functional applied to architectures. Yes. Yeah. The the big difference is that none of these pieces own the state. The user management service isn't really a service. It's a set of functions that you can call that will update the database. The billing service controller is more like onch checkout and this takes the inputs from the user triggering checkout, changes the shape or does whatever to it and then passes it to update user state. And now none of these things have state of their own in them. All of these things are just the logic part. That is good. The logic is taking some data input, updating other pieces of data in the database, and a clean output comes out. There can still absolutely be bugs. There will still absolutely be bugs if you build this way. The difference is it's much easier to find them. If you build like this and you have a weird bug where the user management service is incorrectly persisting old user data when new user data comes in because it's not coming from the database with a pure functional call. It's its own stateful entity. Figuring out that that happened there is way harder if that's abstracted into its own thing. I'll just write the mock code. So you can think of this as like an endpoint that gets hit when a user completes checkout has checkout info. We get the user ID. We get the user from database. If there's no user, throw error. Check out valid. Await validate checkout. If the checkout is not valid, throw an error. Await, update user, user ID, credits, send the checkout email, and then trigger refresh or whatever. This is the way I'm describing to do this. And then on the other end, you have like export async function, uh, render homepage. We'll pretend we've already somehow passed user ID here and validate it, too. Even doing that yourself isn't too hard. You'd grab it from cookies or whatnot. But here we have if no user throw new error cost credits user credits return div credits whatever you get the idea. This is very different from how you would do this in an OOP very like clean cody way. I hate writing code like this. So we're going to ask a bro to do it for us. Rewrite this code to showcase best practices in an OOP clean code way. Hopefully you could already see the problem. Class checkout service, private user repository, private checkout validator, private email service. You have to construct all of this. You have to create these public facing functions and then call them when you actually want to do it. I think they had this. Yeah, the commented out code here is what this would look like to use the user repository is a object database user repo. Check out validator is an object simple check out validator. Email service is an object new SCES email service. Check out service is an object checkout service. All of these have their own state that can be in any state at any given time. So when the checkout request function gets called, we call checkout service.process checkout with the checkout info. We don't know what state this is in. don't know if this already ran and if it did what it ran with. We don't know what the current state is inside of it right now. Like does it still have a user repository? Is it for this user? Is it for a different user? Check out validator. Like these can all be in their own different states in there. And that detail it's offuscated from us as we develop. We have to go find this process checkout function which doesn't tell us the order things ran in at all. We don't know just from reading here when the constructor was called, what it was called with, what the order of events is at all. We have to stare at this function, think deeply about our system, and guess whether or not the bug happened here. It's not good. It just isn't. And there's a lot of great videos breaking down why like OOP patterns for application design in particular are not great because applications in many ways are inherently ephemeral. The server code might be running for a long time, but a user's given session with that service isn't something that should be treated with all of these stateful objects throughout. Every additional instance of state is an additional service area for bugs. And the more you can reduce it, so you start with state like checkout info and what comes out is a database transaction or the other way where you fetch data from database, you fetch values as well and then you render the result. This is the much easier way to identify bugs as they happen. This code is perhaps less clean and I'll admit certainly harder to test, but this code is so much easier to debug when things go wrong. Someone said React components are nested too and they have their own state. Yes, but they are top to bottom and the state the component has it has to either come from the application running or from the parent. And when a parent changes some value, that value will go all the way through the tree. That's part of the beauty of what React does is a state change triggers everything down the chain updating which makes it way easier to debug going the other direction. I'll admit that games which are long living process with a lot of complex stateful objects with weird interactions. OOP is really good for games, a lot of them at least. It's not good for applications where you're rendering a page because the state only needs to exist from when I hit refresh to when the content appears. Otherwise, it is persisted. And the more you can turn your applications into a pipe that turns data in the database into UI for the user, the easier it is to maintain, debug, and iterate on going forward. And that's why I think convex is really cool because it reduces the gap between the client state and the server's understanding of it in the database. It makes it less likely the client and the server are ever out of sync. And those out of sync moments are the root of so many issues in application design. It's also the problem with this massive pile of services is what happens if user repository is in a slightly different state than we expect in the checkout validator. If these things all have their own states, they can fall out of sync. And if they fall out of sync, life gets way harder than it needs to be. Our job shouldn't be making sure all the states are perfect between these things. Our job should be building pipes to turn data into experiences for users. One last piece I want to touch on, which was the convex thing. Doesn't using the convex APIs to query and manage the data fit precisely with what Uncle Bob wants? You as the user have no idea how they store and retrieve data. Isn't that ideal? Because that's what he's going for with this type of thing. We don't know when we call checkout service. Checkout what's going on here. That's the cleanliness of it. We don't have to care about the implementation details of checkout service. What do we call this? But we do have to care when there's a bug. And that's where that falls apart. One of the things I love about Convex is we don't have to care too much about those details because we're treating it as just data, so to speak. But the reason that works is convex doesn't have functionality. They don't have a thing that's like convex.update userinfo. I have to write the logic myself and I can commandclick and see it. And all of the logic has to be one shot top to bottom right there. We don't have stateful entities that live within convex with functions and data. And more importantly in terms of what Bob was asking for here, we do not have direct access to the database because convex built its own abstraction in Rust on top of my SQL. He wants those two layers gone. He wants the Rust abstraction and the MySQL gone. And instead we have a layer where we call the database directly so we can build our own database service in our application code. I don't think that makes sense. He wants to go deeper and have us build an abstraction where SQL currently is. I want to go up higher so we have an abstraction above SQL that is easier for us to reason about in our application design. That's the difference in our takes. But in the end, we do come to a very similar conclusion. I fully agree with Bob on this one major point. We shouldn't be writing SQL in our application code directly. We should not be doing this. It's fun for demos. It's fun for explaining things. It's fun for oneoff We should not be writing SQL in our application code directly. I am thankful for Bob for giving me the opportunity to explain in depth why I think this. Even if we fully disagree on the reasons why and the implementation details as to how we get there. I agree SQL is the wrong abstraction. It does not understand our needs as developers of applications. But the database should be the source of truth where it makes sense to. We should reduce the amount of state in our applications to the best of our ability. And we should try to make everything that can be a simple pipe from input to experience be that way where we can. You don't need to take my word for it. There's a lot of other much smarter engineers that have all coalesed to this shared vision of building simple pipes to go from data to experience. And I don't think clean code fits there. Even if as a result we have the same enemies, I don't think we're aligned. And some of the things said here are a little bit absurd too like ORM's bad, everything should be an abstraction, databases shouldn't lead the way we design our apps. I disagree with the majority of those points, even if we have a core agreement that SQL's the wrong thing to write in our application code. Thank you all as always for coming through. Hopefully, you learned something about SQL in our applications. And if you didn't, hopefully you at least had a good time watching. Let me know what you think. Until next time, keep your code




## The case against toasts - 20250522
Toasts are bad UX. Oh boy. I like toasts quite a bit. There's even a short of me freaking out over how good the ones in Chad Cen are. Oh, okay. I see why you said to do that. Do you see how good that looks? But this is going to be a fun article. I'm actually quite excited to read this cuz I've had some issues with toasts as like core UX and user experience stuff. I want to see what Max has to say. The core problem is that toasts always show up far away from the user's attention. Take a look at this example on YouTube. This Oh, I I hate this so much. Especially when you have something big and like filling your screen. It's so annoying to hit the button and not see anything happened except for in the tiny little corner over there. I even feel this with P thing. Like when I and I have actually I'll show an old and a new version to showcase this. So this version of P thing when you click copy it pops up right there and it says image copy to clipboard. When you're watching this on a small screen like this and you're looking at the whole screen, it's easy to see. But if I'm scrolled like this and I click it up here, it feels like nothing happened. On the old version, which is what I used with my team and still kind of do when you click anywhere on here, it puts the whole thing in a loading state right under where you clicked. And while this is objectively comically uglier, I felt more like this this was working. And I've had far too many times where I clicked on an image to copy it on pick thing and wasn't sure if it copied or not. Then I remember, oh, look at the corner. Oh, yeah, it did. Cool. And as silly as that might sound, especially when I've used this one a whole bunch, it is now ingrained for me to expect where I clicked to be the place where the thing happened. And that is the issue with toasts is the locality of the action is different from the locality of the information. So again, they use the YouTube example where you click the button and the thing changes in the corner. Also, I love when you hit the add button, it appears there that just there's so many things moving around here that suck. So, the problem is the YouTube toast. He clicks the save button on the right hand side of the screen. A modal appears in the middle of the screen and then a toast appears in the bottom left corner. And there are a few more problems in this particular example. The toast is delayed without a loading indicator. Oh god. Yeah, it takes too long to come up. If I check or uncheck a checkbox in the model, I need to wait multiple seconds for the previous toast to disappear before I can get the confirmation toast. That one I have absolutely seen. If I like scroll to here and I want to watch this thing later. Hover. Save to playlist. Wait. This comes up. Click here. The toast happens. If Iclick and then click more. Removed. Keep waiting. Added to inspo. And then if I close this while that's still happening. More toasts. That's so bad. That's so bad. I do want to watch this part later. So, I'm switching that for sure. But now we have to wait for all of those toast before we know if it actually committed the action that we wanted it to commit. Thankfully, here we have stackable toasts. So, you can just click different things and they all stack and you can hover and it shows them all at once. Kind of silly that Artos experience is exponentially better than YouTube's despite not having hundreds of engineers working on it, but that's because of Sonner. People are already linking it. So, I'll pull that up. Sonner makes it hilariously easy to do this, right? They even have an API for promises, which we're using heavily. You write a promise and you pass the promise to toast. And you can add a loading, a success, and an error state. And I'll be honest, this is so convenient that I just use it everywhere now because it's such a quick way to add nice looking state that demos well and looks good in like tutorials online and Like when I post a clip, look at all the toast.promises calls we have in the p.ping codebase. It looks great, but the focus shift that you have to do for that is bad enough that I still kind of missed the original version where you would click and it would show the loading state on the thing you're clicking. But yeah, the toast being delayed as I just showed on YouTube, that is atrocious. If I check or uncheck a checkbox in the modal, I need to wait multiple seconds for the previous toast to disappear. And also, the undo button in the toast is unnecessary because the user can just click the check box again. Yeah. Yeah. I've never clicked the undo button in that corner on YouTube ever. The solution, no toast. Here's a simple redesign of the save interaction that solves all the problems above. Adding opens up the menu right there. And when you click it, it has a little loading spinner next to it. The playlists are shown right beneath the button instead of in a modal. After checking or unchecking a check box, a loading indicator is shown. When the loading indicator disappears, it implies the action has completed. No toast necessary. Yeah, you I'm with you. Two more examples. One, confirming something was added or removed. When archiving an email in Gmail, a toast appears showing confirmation. By archiving the email, the email disappears from the list, which already implies the action was successful. Here's a fun one. I use Superhum, which is built on top of Gmail or Outlook. Now, too, they have a toast, but they have a cool feature where it doesn't immediately send an email. It gives you like a 5 to 10 second window. You can click instant send or you can wait and it will send in its right time. I also have superhuman set. So, when I send an email, it autoarchchives it. But sometimes I want to go quickly check something in it. There's no way to do that. You can't click the toast to see the email. Your only option is instant send or undo. There is no option to send, but then let me click the toast to go see it. It's a small thing, but it's one of the very few UX gripes I have in a piece of software that makes my life significantly easier. Seriously, if you spend your life in email, you should sub to Superhum. I'll leave a link in the description for a free month that also gets me paid because I bugged them and they made an affiliate program for me. So check it out. If you write a lot of email, it's a lifesaver. But they even get this wrong and they're like the UX gods. Another example they have here is I'm getting poned here. If you want to make fun of me, just say it. I get it. That is actually hilarious though, that I built the exact thing he's calling out as a bad use case. The button already includes a confirmation. So the toast is entirely unnecessary. Yeah, it could be worse though. What's worse than a toast? No feedback at all. So, you don't have time to design or build a better feedback mechanism. I guess a toast is better than nothing. Very fair. This was awesome, Max. Thanks for inspiring me to go on this rant and also inspiring Agore to go spin his blog back up so he can write about this, too. Always surprised how trillion dollar companies don't care as much about basic US x things like AWS. We have a billion users, tiny 0.1x UX improvements, have massive return on investment. I totally agree. None of these comments are inappropriate. When I post a new video, I instantaneously get a pile of spam comments. None of these are spam, so I don't want to demonstrate the whole flow, but when you're dealing with a spam comment, it was literally nine clicks per. You have to hit here, hit report, wait for a modal to come up, check the box for the type of thing, hit next, confirm, hit next again. Then you have to choose there's another checkbox you might accidentally miss that is hide user from channel and then confirm on each comment. I bitched for a while about this because the solution seems simple. Give me a little check box and let me one click report a whole bunch of things and then they did it. It took them 3 months cuz it was Google. But I bitched about this publicly. To be fair, they were probably already working on it. But it did feel like they implemented not just what I needed but exactly how I had asked them to. And it has made my life much better being able to checkbox select the five spam comments I just got on a brand new video and then one click flag and remove. They got rid of all the confirmations too. It was so nice. It was such a big win. And it seems small zero tiny 0.1x UX improvement, but it made me much happier as a creator. It made me feel like YouTube got what I needed and it made my experience using it much better. These details are important and as great as to hosts are and as simple as it is as a way to provide some feedback, they are overused and the way that YouTube's using them here sucks. One more small call out. You'll notice here it has the lock icon to show if something is private or not. In his demo, he removed the lock icon. So, he's making real estate where there wasn't any, but it's still much better. And if they could find a way to replicate this experience, that would be a UX win. Relying on toasts for everything sucks, especially once they start to stack up. And making a pretty stack does not solve this problem. I feel guilty. I'm not going to lie. I'm possibly going to go and gut all the toast I've been putting in all my stuff. But I'm also lazy, so I might not. Let me know what you guys think. Do you feel like toast are overrated, underrated, or they're fine? Let me know. And until next time, peace nerds.




## The code editor wars continue... - 20240923
remember how I just did a video on VSS code trying to catch up with cursor which was a fork of VSS code but had better AI features and I kind of miss super Maven and co-pilots where it all started you know how chaotic this mess has been the war to build the best AI first editor for us coders has been intense to say the absolute least and my favorite little moment where I went from liking these tools to loving them was when I discovered a really nice co-pilot alternative for vs code called super Maven super Maven was creat by the same person who made tab 9 originally which was like the first ever autocomplete code tool he has since left and started building much better tools to take advantage of this new AI wave and the result was the fastest AI autocomplete model for devs and it still is and I find myself missing it when I'm using cursor all of that said SE Raven's been kind of limited not by their skills or their team or anything there but by the thing that they're building around vs codee vs code is a bit rough to work with which is why cursor decided to fork and now that super Maven has seen where they have gone with that they're not going to sit around and just watch they're taking this seriously they just raised a whole bunch of money and they're now going to start building a real editor also before I forget quick disclosures I am an investor in Microsoft who creates VSS code I'm an investor in super Maven which we're talking about today and I'm an investor in cursor so I'm equally distributed with my biases here I hope that cancels out but I know you guys are going to complain anyway so figured I'd put it out there I try to be transparent with all these things because I think it's important so now you know anyways we've raised 12 million from bessim R Venture Partners to build an AI focused text editor that integrates tightly with our models we started super Maven because we wanted to create a co-pilot that was faster more intelligent easier to use and accessible to everyone we delivered that goal by creating the super Maven editor extensions that are actively used by over 40,000 developers today decent number of which came from me shelling it because it is it's still kind of insane just how fast super is it's literally like every character it generates a new output and I miss it it was faster than intell Ence with typescript and as great as the cursor DX is I miss the speed and cursor if you guys don't already know this doesn't even really have their own model I think that they're training some things but they're largely relying on existing models I almost want to excal draw this out cursor versus VSS code versus super Maven kind of annoying having versus in vs you guys get the idea so let's start with vs code cuz it's the thing that we all understand the most hopefully VSS codes Parts quite simple vs code built on top of electron powerful is extensions model open source uses co-pilot for AI code so apparently co-pilot's model is codex which comes from GPT from open AI probably a big part of why open AI in Microsoft got so close so that's VSS code now let's talk about cursor cursor is is a closed Source Fork of VSS code fully compatible with all VSS code tools so if you want to use VSS code extensions not only can you use all of them you can actually import and by default will import your exact config from vs code it's almost weird when you first open cursor because it just looks like VSS code levels had a banger tweet where he said he changed the icon and name of cursor 2vs code so his brain autocom completely go the right place I have a fun problem where I recently started using cursor and I was using a different terminal that had a black like main color so my editor was blue cuz it was vs code and my terminal was black around the same time I switched to cursor as my IDE and I switched to ghosty as my terminal so when I'm trying to get to my code I keep going to ghosty cuz it's the blue one when I'm trying to get to my terminal I keep going to curser cuz it's the black one and it's driving me insane I'm almost at the point where my brain's autocomplete is there but I might just give up on command Tab and finally bind specific keys to specific programs cuz I'm going insane chat found a useful thing GitHub copilot Enterprise is running GPT 40 very interesting so most of the models for co-pilot are special but they're special just based on open AI stuff back to cursor though cursor close source for vs Cod fully compatiable VSCO tools and notably it has every model so they're not building their own model it just gives you access to all of them and they broke out of the vs code extension model to allow better ux or I should say DX there's a lot of little things that cursor does well serious pick thing which is like a real project let's say I want this page to be responsive and right now it is not command a command K make this page responsive on mobile submit and now it's going to propose all these changes I can select them all by doing command enter and it applies them but here a thing none of the other editors do command Z doesn't undo what it applied it brings back the application state so I can now go through and manually for each of these apply or not apply it or command shift Z to go back command Z in the history isn't just the exact text of my editor it also handles their AI steps which I have found to be quite nice to be able to undo but undo isn't undoing everything I just did it's undoing the step that I just applied I found that much more intuitive to work with and you cannot do that with a vs code extension like at all vs code EXs are super limited when it comes to like user experience things you can add unless you're just putting in the sidebar speaking of limitations vs code and the sidebar let's talk about super Maven right now it's a vs code extension or neovim plug-in it's mostly just a dope model and it's a dope model it is fast it is trained on your diffs instead of your whole kiss or like dep it flies and it also learns as you're doing things much better so if I make a change like three times it will apply that correctly going forward it's like responsive feels better than any of the other models in that sense they also have a chat I don't like built-in chats I just don't use them it's cool it has it but I just I don't care I'd rather just go open up Claud but super Maven is very limited because it is just a vs code extension at the moment so to to tldr this vs code is its own project obviously that's using co-pilot which is open AI GPT based cursor is building a whole new ux on top of PS code with the ability to use a lot of different models and super Maven is just a better model for developers that has pretty good Integrations with existing editors was weird is when you put these two next to each other they're like obviously competitors right but they're so different this lives outside of VSS code it has created it has wrapped VSS code in better ux and DX but not really innovated much on the model side if at all whereas super Maven went the opposite direction they're building into VSS code and other things and their focus has been on the model they built a great model but this is just on I think I've been saying for a while not necessarily in my videos but like in person I took a long time to try alternatives to co-pilot because the friction of installing it was enough that I didn't care I don't care if the responses are 177% more accurate or 25% faster if it's not a massive win for me super maven's speed was interesting enough to me that I gave it a shot and I was really impressed but most people aren't going to switch their workflows from that whereas cursor being a fully different editor experience providing fundamentally different and better ux in the editor made it much more appealing and that's why cursor's adoption is as insane as it is Sir mavens is still really good for a new project just not quite the same level because it's harder to look at and be like I need that right now and both are competing with the thing that's already built into your editor which is co-pilot which is made by code and by Microsoft which makes it hard to compete with and I don't think just having a better model is enough and I've been concerned about that for a while seems like I'm not the only one who's concerned because they're going all in on making an editor now our goal of making our product accessible to everyone raises a natural question why make a text editor if possible we would prefer to meet people where they are now and provide the best possible product without making users learn new tools we're building an editor because with our most recent update that predicts jumps and deletions we've reached the limit of what's possible with an editor extension yeah I know they worked really hard to get this working vs codes extensions do not want you to jump around when you're writing code it fights you hard when you introduce features like that if I recall this is also the killer feature that got cursor going as hard as they're going so yeah they got it working they to fight to get it working but they did as we develop new models that support more features the only way to take full advantage of those features is by having full control over the user interface this requires us to build our own editor because extensions can't display their own UI elements in line with the code they can only use the UI elements made available to them by the editor I brought this up in another video but uh pretty TS errors is a great example of this this is the plugin I use in VSS code to make my typescript errors look way less awful it's great there's even a video where I showcase it that they have embedded on the page now a lot of others did videos on it too which is really cool it's a great extension and you can see very clearly why someone would use this like obviously so if you're curious how this works it's actually embedded as an SVG icon cuz it was the only way to build this type of UI inside of VSS code there's no way to make an alternative view that renders it own HTML so instead he's rendering an SVG icon and then I'm breaking out of that in order to do this the better actual UI so like if I make a demo function quick just have a type error cool so this takes user function if I function takes user not a name whatever we'll at this type error and on top we get the normal typescript error but below I get the fancier one in this case it's a simple one if it's a more complex one which uh how do I want to demo more complex type error cool there we go now I got a more complex one but notice that I have to scroll CU it can't change the size to make it the right size and it can't even hide the original error I have to scroll to see it and this is in cursor by the way like theoretically they could fix these things and open up extensions to be able to do more don't know if they're going to probably not going to but vs code did not make it easy for poor yo of here to make this extension possible so if it's that much hacking like literally every commits document the custom CSS hack like the things they have to do to make this work are insane and that's just for giving you a better error on Hover now imagine building all these fancy features where things are like showing this UI on top right there where I can tab to get rid of the thing and all that like you can't just do that if vs code explicitly doesn't want you to just do that so yeah sympathy to anyone trying to build those things it's not viable yeah this is requires us to build our own editor because yeah the endline stuff is impossible this is a unique time in history of software development with AI new tools are possible that were Unthinkable just 5 years ago these new tools require new interfaces and having an editor allows us to build those we're a small team of five Engineers if this sounds exciting join us that sounds exciting I can't remember I can't really imagine a cooler place to work than either of those companies right now like if you're a nerd about code you're watching all these videos you know what you're doing it's a cool place to be I think that's all I got on this one I'm excited to see where all the stuff goes until next time peace nerds




## The creator of npm is making something new 👀 - 20240331
I'm not one to pretend that npm is perfect it's far from it you can check a lot of the videos on my channel to see just how much I don't love npm that said at the time it was one of the biggest Innovations for package management for developers before it we were in the hell of at best pip and in other ecosystems like Ruby with gems things could often get even worse npm was a massive jump in the quality of experience that we expected managing packages as developers so what's the problem well honestly since then there just hasn't been that much Innovation npm got bought by GitHub who got bought by Microsoft which has allowed it to sustain and maintain itself for as long as it has been and if that purchase didn't happen we might not have access to our packages today which is a terrifying thought but the amount of effort that they put into maintaining in growing the npm ecosystem has been massive even if the experience and quality of functionality we expect just hasn't improved much since really old versions many years ago I can't honestly remember the last time the npm registry shipped a meaningful new feature and I keep it close eye on that stuff one of the reasons why is there just isn't competition and one of the reasons for that is that competing with these things is bit of a suicide run with npm being bundled into node and the chaos that is hosting and distributing these things across the world and the lack of any money being spent on these services like not many people are paying anything to npm ever this shit's expensive no one wants to compete well at least they didn't recently we've actually seen two new competitors come up not competing with the npm package manager but the npm package registry the place where we actually get get the packages from if you're currently using bun or pnpm or yarn you're still using the npm registry to get your packages today this changes a bit though because npm isn't the only registar anymore there're actually two new ones created by some of the original node and npm team on one side we have jsr being created by Dino which if you didn't know this Dino is created by Ryan D the guy who originally made node and on the other side a new competitor just emerged Vault and vault is being made by Isaac who was the original creator of npm so in some ways this is node versus npm but it's actually a lot of steps further so let's dive in to the chaos that is these new package Registries for JavaScript developers first I want to talk about jsr what actually is it and why is it different first and foremost it's built for typescript in esm if you've ever tried to publish a package with type definitions you probably know how chaotic it can get it is surprisingly difficult especially if you're used to just doing traditional like typescript appdev once you start dealing with weird type aliases within your package Json to try and make sure things are bound in the right ways in the right places and it all works it's it's chaotic enough I had to bring on another engineer to make sure we were doing it all right for upload thing this stuff is not easy and I have to give a huge shout out to Julius for making it possible for us to dive in head first and not just do it but kind of push the standards a bit it is amazing how hard it is to do these things and it's cool to see these new Solutions just rethinking from scratch what it would look like to include our type definitions and esm code in a package jsr is designed for typescript you publish typescript source and jsr handles the generation of the API docs the DTs files and transpiling your code for cross runtime compatibility jsr packages are distributed as web standard ecmascript modules the doc generation is another really cool thing not only is there kind of a solution for the TS stuff I actually made a video about this before with TS st.dev which is a really cool site for seeing the type definitions as a nice UI for packages that handle your type defs and things like your js. correctly so this is an example with react router Dom which does have some type definitions and we can go through here and see all of the different functionality that this exports and has type definitions for and we can read these nice little docs that are generated the react router Dom contributors didn't make this page but because they put proper type definitions and proper JS do comments on their actual work you can generate a documentation page with TS docs as you might have seen depending on how my editor chooses to edit this it is not the most consistent thing in the world understandably so if it's being run as a side project but it's cool to see them embracing this day one with what they're building with jsr where they will generate the API docs for you just by buing typescript Source generally speaking it seems like the goal here is you just hand them typescript and they figure out the rest which as a dum typescript Dev sounds like a gift and I'm very excited about that it also Builds on npm because jsr isn't just a replacement for the registry it's a superet of it Jr modules can be used with any JS package manager in any project with a node modules folder including yarn and pmpm it works with any runtime jsr modules can be used in node Dino bun Cloud flare workers and more module authors can count on great editor support from strongly typ modules without the need to transpile and distribute typings manually Big Win apparently the type generation is uh not as simple as one would hope slow types in many of its features jsr analyzes source code and in particular TS types in the source code this is done to generate documentation generate type declarations for the mpm compatibility layer and a speed up type checking of Doo projects using the packages from jsr for these features to work the TS Source must not export any functions classes interface variables or type aliases that are themselves or references to slow types slow types are Ty that are not explicitly written or are so complex that they require extensive inference to be understood I don't like the or here I would just drop the explicitly written because explicitly written types are always going to be fast you don't need to do work to to get a type when it's explicitly written but typescripts inference is so powerful that it can often take a bit of CPU and to cite yet another one of my typescript videos the one that kept coming up when I searched theot typ script guys over at archetype built a benchmarking tool to see how many cycles effectively are NE NE to generate a type correctly in typescript which is really useful if you want to keep the amount of chained nesting for your type definitions down so it takes less power to check your types which if you've ever experienced your editor being slow to confirm type changes or crashing the TS server a lot of that is because of bad performance in their type definitions but sadly this means that they're pushing you towards return types which if you've been around for any amount of time you know I am not fond of this interface is too costly to be performed by jsr for the following reasons so these kinds of types are not supported in the public API jsr discovers slow types in the package certain features will either not work or degrade in quality such as type checking for consumers of the package it will be slower at least in the order of5 2x for most packages it might even be higher the package will not be able to generate type declarations for the mpm compatibility layer or slow types will be emitted and replaced with any in the generated type declarations the package will not be able to generate documentation for the package or slow types will be emitted or missing details in the generated documents here is a whole breakdown of what a slow type is it's actually use ful that they wrote this there isn't a lot of good resources to describe this but this video isn't about slow types and typescript this video is about package managers for JavaScript so back to it why jsr the incredible success of node.js has been driven in large part by the success of npm with 2 million going on 3 million packages npm is likely the most successful package manager and registry in history the J Community should look on this accomplishment with pride so why build jsr when npm exists because the world today is not the same as it was when npm originally was introduced this is also why Doo exists because we've learned a lot since node was introduced ecmascript modules have arrived as a standard there are more JS run times than just node and browsers and typescripts emerg as a de facto standard these are three really important points when node was introduced in npm specifically esm was nowhere near a standard yet now it absolutely is and has moved on well past commonjs Dino bun worker all these other things now make the contents of your packages matter a lot more managing that sucks even more than ever did and TS has one we never expected that to happen it absolutely did handling it as part of your package manager is probably worthwhile in addition to these shifting requirements there are also opportunities to improve on the developer experience performance reliability and security of npm jsr was created to address these new requirements and take on these opportunities here are a few reasons why we think you should consider it native TS support we talked about this a little bit before Dino has really good typ support built in bun does as well you don't have to compile the file before you can run it you can't just node run typescript file you have to make it JS first but with Dino and Bun you just run the TS file and it works for other environments like node the lack of native typescript support jsr will transpile your source code to JS and distribute your modules with a DTS file to support tcri tooling for node projects it's cool they just do all of this for you because this stuff sucks to set up right esm modules only again a big deal they're just saying you commonjs we're done it's a break up a modern package registry should rally around the standard and shift the community in that direction there are like esm is not the easiest thing to adopt in honor the standards for but it's the right direction we need to go all in on it it's cool to see them calling that out cross runtime support is a thing they're focused on is cool they've definitely had issues where getting npm modules working properly in Dino although they succeeded was never the most Pleasant thing so seeing them make a better solution for both them and others in the ecosystem this is really cool jsr is a super set talk this a little bit the important piece here is that it's designed to interoperate with npm based projects and packages so you can use jsr packages in any runtime environment that uses a node modules folder jsr modules can import dependencies from npm are they not going to have a package Json for this interesting I'm excited to see where this goes outstanding Dev experience the bar is low here to be clear publishing on npm sucks so let's see this jar has many features aimed at helping module Publishers become more productive including but not limited to easy publishing with a single command CI walks you through the rest automatic API docs zero config publishing from GitHub actions that's huge publishing from get action sucks automatic inclusion of DTS files for node and npm distribution automatic guidance on TS best practices that will keep your code loading as fast as possible and supposedly much more fast secure and reliable jsr is intended to be secure fast flexible and also work well in resource constrained environments jsr seems pretty hype but jsr is only one of the two things we're here to talk about I'm more focused today on vault because I did not see this one coming they call it a new home for open source but the goal is more specific in the less contrasty text here we're building the future of JS packages what the hell do they mean by this let's dig into the blog to find out introducing our team investors in more from Darcy Clark last year after incorporating Vault Technologies Inc I began the search for key Venture partners and founding team members today I'm thrilled to unveil the exceptional people comprising our core team and the distinguished investors who share our bold Vision our team we're putting the band back together Isaac is the original creator of npm former CEO of the npm Incorporated Corporation as well as a principal engineer at GitHub post-acquisition he also led the node project for an amount of time Darcy Clark was previously a staff engineering manager for both npm and the ghci teams at GitHub npm as well as well as the co-founder of themify so knows how to start a company it's an important detail sorry for the text being small it's a everybody sucks at TCH sizes I have a whole video about that coming soon third person is Roy adoro nodejs TSC member as well as a staff software engineer joining directly from Google previously Roy LED key product ships as part of the npm CLI team at GitHub npm and numerous startups quite a crew of people seems like they've all worked together and are excited to do it once again we've done this before supporting the world's largest package manager and package ecosystem contributing to the home of Open Source we found success together and we're excited to be working together again led by The rown Venture firm Excel our recent Capital rise attracted some impressive angels and seasoned operators among them of course garmo snuck his way and he always does Evan youu creator of vew in the v ecosystem Pete hunt who is an old Nemesis turned friend known for contributing to everything from react to excal draw all over the place fascinating dude very interesting and plenty of other really cool names here David Kramer's how' they get Kramer but not me God damn it Z Jackson's obviously remix Team all of this makes sense to me all these people I not too surprised by so what the hell are they building our mission we care deeply about developer platforms and tooling which is why we've spent so much time in this space however the package ecosystem has stagnated and so there is a wealth of opportunity to innovate our mission has always been to improve the developer experience and we're thrilled to be working together on it again our future we're excited to share what we're building and you can expect to learn more in the weeks and months to come sign up here to stay in the loop be the first to know about how the product launches and updates they a thank you at the end here and almost nothing else they do have an older article from mid last year what what the have they been building for so long is just those two I'm getting more sus as we go an mpm's package manifest is published independently from the tarball manifests are never fully validated against the tar Ball's contents the ecosystem has broadly assumed the contents of the Manifest and tarball are consistent any tools or insights using the public registry are susceptible to exploitation and are likely inaccurate and Bad actors can hide malware and scripts in direct or transitive dependencies that go undetected okay that's fair if you have a package that is known to be good and it depends on a package that is at the time known to be good but it's not a specific enough version and you bump the version of that dependency and also add malware now everything Downstream depending on it gets because the tarball that includes that first package that you installed doesn't include the other dependencies so if those dependencies change everything falls apart and the reason that's possible is that the Manifest which describes the contents of the tarball is external from it and also allows you to pull in external tarballs yeah there's a real risk here in terms of Novel supply chain attacks go this is a biggie and from here on out I'll be referring to this as the Manifest confusion interesting I will say that overall the npm team has been quick to jump on these things when it happens but the amount that they rely on good faith from maintainers is definitely concerning but if this is the only article we have from the volt team as to why they're doing this that's concerning to me I get the desire to spend a lot of time raising money and incorporating and making sure you have the resources you need to do this but yall know me I always want you guys to ship don't talk about the things you want to ship just ship and they're not even talking about things they want to ship they're talking about the possibility here there's no why or what or anything here just The Who and while I have high faith that these people are incredibly capable of doing this like you're much more likely to succeed doing this with Isaac than with almost anyone else and these investors all know what they're doing that doesn't change the fact that I don't see what they're doing here at all because they don't want me to this does effectively just feel like a name drop this is a weird line between stealth and not stealth and I'm honestly happy that we started with the jsr stuff because it's the opposite they they had a little bit of stealth where it was available but only via Whit list and they were very speciic about what it was and what it was going to do it's almost like antithesis here and it's honestly really interesting similar to how npm and node didn't necessarily agree early on largely because of Ryan's distaste for things like a package Json file and the idea of locking dependencies it's interesting to see a similar Rift occurring here between not even how they work CU we don't know how things are going to work over on the other side there but a rift of how these things are being announced released shared with the community it's tangable here and I'm very very curious to see how this all plays out because it honestly feels like change is going to happen and uh I've been waiting for change in the npm world for a bit because publishing packages should not be as hard as it is right now and I'm excited for a future where anyone can quickly publish some code and use it anywhere in the world I don't know what else I have to say about this but I'm excited to see where this stuff goes so until next time peace NS




## The crypto scam that almost ruined npm forever - 20240811
the great npm garbage patch I have no idea what this is going to be but I am so curious let's dive in together in April of this year the film research team revealed the proliferation of spam packages in npm associated with the tea protocol a decentralized initiative that promises to compensate software devs in cryptocurrency for their open- Source contributions okay I did not think I was about to get into a crypto company ruin ruining the npm ecosystem with garbage I am so excited now oh boy oh boy oh boy last month we published our quarterly research report which estimated that approximately one of every four packages published to npm in Q2 were associated with t virtually all of which had no redeeming quality aside from gaming the protocol to inflate a software dev's contribution artificially let's take a deeper look t. XYZ I've vaguely heard about this this is an attempt to pay open source maintainers with crypto I I have the real spicy take that there isn't really a way to enforce open source contribution like if you make it so people have to pay it no longer is open source by definition and I think that's okay there should be more effort into allowing for devs that are doing awesome open source things to make money off of their work and we need to as a culture shift towards bullying businesses that aren't paying the open source maintainers building the stuff they rely on into paying them accordingly the lack of that is a massive problem the fact that giant businesses are built on the backs of Open Source stuff and no money goes back to them is a problem but it's our nature as Engineers to try and solve that with more engineering you can't build your way out of this problem though the way open source works and the thing that makes it so good is that the code is given out with no expectation of return the expectation should not be engineered into the code it should come from a culture outside of it we should make people who work at these companies the leadership making the decisions at these companies the individual Engineers who are working on things on top of these open source things at these businesses all feel terrible for not paying the open source maintainers they rely on sadly that's not the reality of what we have now in many open source maintainers building the things that we rely on every day on the web and in compute as a whole are not being contributed to properly but I promise you I am 1,000% certain that the solution is not some cryptocurrency and as much as I love that this Dev is the creator of Homebrew and as much as he is had a crazy history remember the famous story of him not getting hired at Google yeah I don't want to talk on the individual Dev cuz he has made things I rely on every day but this is a really brutal attempt at solving a culture problem with not just any code but with web 3 code so I am I'm already very skeptical going in but let's see how this article convinces me that t isn't just weird but it's actually a problem with new research from a fresh perspective our team can now report that the volume of these packages is likely larger than our initial estimates their initial estimates were that it was a fourth of new packages it might be worse it's just the hober Fest of npm but instead of a t-shirt it's crypto o like the island of discarded plastic twice the size of Texas that floats around in the North Pacific Ocean npm has acred an astonishing amount of spam packages over the past 6 months join us as we take a fresh look at the pollution in this open- Source ecosystem apparently they had a previous blog about it feel free to use the links in the description if you want to read that we're just reading this one here and as detailed in our previous post the T protocol perversely incentivizes software developers to exaggerate their contribution to open source development using a modified page rank called a t rank software devs are rewarded based on their proof of contribution as the early SEO spammers figured out how to gain page ranks for their benefits history is repeating itself and a few devs have spammed open source repositories with absurd amounts of worthless packages is this what that dude was doing for the um the the guy who claimed he was adding node 0.4 support but ended up installing 15 of his own dependencies on a package that previously had none I know it's not actually that cu the pennies you would make off it is Jack but it's it's a funny thought npm the largest open source ecosystem has suffered the worst from this pollution from various actors some of the Hallmarks of these spam packages are gibberish package names package names with random combinations of words from a list implausible lists of dependent packages a dubious number of dependent packages and in the morass of transitive dependencies the ubiquitous t. yaml file that ultimately identifies the code owner that's the key if you see a t. yaml in a package at this point I'm willing to say if you see a t. yaml don't trust the package when film first started investigating the situation in February we were continually amazed at the sheer volume of packages that could be published clearly due to automation so we turned our attention to trying to understand the full scope of the spam problem shout out to film for writing this by the way they I should figure out what they do so I show them properly oh they're a software supply chain security company so they're like crowd strike but solving the problem where it actually lives where the software is coming from good worth checking out and maybe even going to their black hat event they're not paying me to do this they have no idea making this video but this this investigation is dope and I wanted to shout them out for that reason for a baseline at the start of 2024 the total number of packages injested into film daily from npm was around 1,500 each business day and about half that on weekends so that's the the number of new packages being ingested every day starting in February of 2024 film began to notice a steady increase in npm package Publications from a few thousand to tens of thousands the high Watermark of this increase occurred on the 8th of April 2024 with over 48,000 packages published to npm that's insane on one day 48,000 publishes were packaged but before it was only 1,500 a day insane this explosion of packages led us to our first discovery of the perverse incentives of the tea protocol last month in preparation for our quarterly report we took a random sample from all npm packages published in quarter 2 we manually triaged around 1,600 of them if a package contained markers of the tea produ being abused as we noted above we marked it as spam with these we found a 95% confidence interval for the estimate of the percentage of spam packages in npm in Quarter Two to be between 21% and 25% or in other words over half a million spam packages so if we really want to be able to contribute to open source all we have to do is make up a shitty crypto good to know think about how much time digital ocean and GitHub could have saved If instead of giving us crappy t-shirts they gave us a crappy crypto worth nothing this is going to be painful upon further reflection we consider the many npm projects have nightly builds or Alpha Beta And Canary versions so these legitimate packages that enjoy a robust development cycle might dilute the size of the true impact of spam what if we restricted our search to new packages packages that have never been seen before on npm WE widened our search in our npm data back to February where we saw the first T protocol spam and we removed all the packages that had at least one version published prior that left us with over 890,000 new never foreseen packages from February to now from this set they took a sample of 900 and applied the same criteria and of that 95% confidence interval uh showed 68 to 75% of new packages were from the spam so between 63,000 and 670,000 spam packages from February to now for this crypto the guy who made home brew is committing terrorism against npm right now do not flame him if I see y'all flaming this dude I'm going to be very mad at y'all cool I'm missing so many words right now I want to be so much Rudder than I'm being I'm trying my best to be kind and assume best intent but I can't right now I have to assume that this is but like don't assume malice when you can assume stupidity I can assume malicious stupidity here this is so dumb holy yeah five of every seven packages published over the past six months are t-s spam so what's the threat here followers of this blog know that most of our content focuses on Expos ing active malicious attacks against open source software devs in the spirit of full disclosure philm has yet to discover evidence that these packages contain or lead to the usual kind of malice that we regularly report good call up there's no known security issue here yet it's just nonsense being published but as a general observation this pollution is a kind of malice and there are several dangerous avenues that this could turn into Autumn you're concerned here about this using up all good npm names I don't I don't have this concern because it's really that's a problem already an account that has like hundreds of packages reserved because he just registered every one word he could think of when npm started and just sits on them here it is this is the one I was thinking of cool he got nuked that's good to see see you just squat like vsharp view sharp CLI this. view view. this view loader Babble view plugin DND just like squatted every name he thought might ever be valuable to somebody yeah they had mitosis and create mitosis so builder. was unable to use it which is insane so npm already has a squatting problem regardless of the spam yeah thankfully they got terminated because of the massive push that resulted also the uh discussion or the mpm feedback repo has since been archived which is hilarious so regardless the point I'm trying to make is that squatting has been a problem for a long time now not a new issue as the artist says there is no safety risk immediately here we have not seen any malware being published through these spam packages but as a general observation this pollution is a kind of malice and there are several dangerous Avenues this could turn into unlike malicious typo squatting campaigns in which a user unsuspectingly might accidentally install reacts instead of react it's not at all likely that a Dev would make the same mistake with for example quazar fig o1t however a package like web 3 cover is more plausible where the developer would also get the7 dependencies along with the complete transitive dependency tree for each of those insane next because the AI hype train is at Full Steam we must point out the obvious AI models that are trained on these packages will almost certainly skew the outputs in unintended directions these packages are ultimately garbage and the Mantra of garbage in garbage out holds true finally these large scale spam campaigns hinder the open source package Registries ability to reason through the safety of all packages in an ecosystem despite the fact that no reasonable person would ever Endeavor to install saw one of these spam packages this is speaking from their experience where it's harder to keep track of what's going on in the npm ecosystem and find things if 95% of what they're scanning through is nonsense they rais the noise floor and create an environment in which an adversary could surre surreptitiously hide actual maliciousness yep by making there be so much noise finding actual abuse is much harder thinking like the adversary let's start by taking a look at the following package sour noise H the mpm website lists a single dependency on axios cool so sour noise depends on axios there's not a lot Happening Here the package does not contain code and according to npm the only dependency is the extremely popular axios package is this package safe to install well package Json tells a different story dependency axios isn't axios it's this random like tarball reference to another package of theirs in order to get that to be installed which almost certainly then has te that's what what why do they report that wrong why does npm say that it depends on axios when it's depending on a random URL that's a massive failure on the npm sites side we're it's over yeah as Autumn just said like we're we're done npm is that I I'm getting so much more stressed as I keep reading this holy yeah contrary to what npm states the package actually depends on one of our aformentioned spam packages this is a byproduct of how NP M handles and displays dependencies to users on the site there's no clear linkage to this spam package and axios which is listing sour noise as a dependent H that's actually really funny so axio says sour noise as a dependent if we were to go to aio's GitHub it says sour noise depends on it even though it doesn't it depends on this the to say that you'd never install one of these spam packages is to ignore the complexity of the supply chain transitive dependencies can pull in packages that the developer neither wants nor expects to receive yeah that's a massive issue this npm needs to fix ASAP holy open source software ecosystem pollution is a problem for everyone the T protocol project is taking steps to remediate this problem it would be unfair to legitimate participants in the T protocol to have their remuneration reduced because others are spamming and scamming the system Al also npms be to take down some of these spammers but the takedown rate does not match the new publication rate and this problem is not limited to npm alone for example this user published nearly 1,800 spam packages on ruby gems in late February and early March 2024 would you consider that ruby gems is probably running Ruby and that means it's probably single threaded this probably took the ruby gems project like multiple hours to deal with that was a joke about Ruby being slow I think it's tasteful anyways phm's actively researching this area and will continue to seek new ways to detect the spam as these actors adapt their tactics this is one of the best research blogs I've read uh yeah if I had security issu isues I would be hitting up film immediately this was great fantastic read if you want to check out their other blog post and see their coverage of this going forward check out the link in the description I'm feeling a large sense of existential dread right now let me know if you feel similarly in the comments and until next time don't install spam packages




## The dangers of precommit hooks - 20240717
Hut take these are not steps that belong in your CI pipeline why not you ask because lint staged and GI hooks exist before I get too angry I should probably explain what pre-commit Hooks are in case you somehow don't know what a pre-commit hook is it is largely what it sounds like it's a thing that runs when you do a commit so whenever you type get commit DM whatever it's some code that runs first so maybe you want to make sure the code is formatted correctly maybe you want to run unit test so you can't commit code that's broken maybe you have a strict rule about how your commit messages need to be named and it will block you but I promise you if you ever block me from committing for some [ __ ] like that you're not going to get a PL request out of me you're going to get my twoe notice so what's wrong with the CI Parks I don't want to just sit here and say commit hooks are bad I've done that enough times everyone agrees we need to talk about why this specifically is bad and I can't believe somebody finally dropped a dumb enough take about GI hooks to force me to revisit my least favorite topic I am in as much pain as the rest of you guys are here I promise already have a video about this pre-commit hooks are bad but I've also somewhat recently implemented a new rule for the channel which is if I have a video pre mustache it's fair game for me to redo so that's what we're going to be doing here instead of a two-minute video where I briefly explain why this is stupid we're going to go for I don't know however long it is on the bottom right now explaining why not only is it bad to use pre-commit hooks but this particular framing of it is dangerous irresponsible and should probably get you fired and what some good use cases might be before we do that I do want to highlight something which is that I am not in any way shape or form alone here often when I die on these Hills and I have these really spicy takes it's things that are up for people's opinion like is serverless great and should it be used for lots of problems it's a conversation to have is typescript better than not having types probably that's a conversation to have this isn't there is no conversation to have here the point is just wrong in Moot and any even somewhat qualified Dev is going to say otherwise thank great devs like Matt are coming out and pointing it out specifically saying that he hates pre-commit hooks you should take as much compute off your engineers as possible and put it on CI yes and also if there's things that are valuable to know before commit run them in a Dev script on the file change I couldn't agree more Matt is right here but that's not why I'm mad cuz even pre-commit hooks themselves like should you use pre-commit hooks I obviously think they're terrible and I'll turn them off in my repo if you ever put them near me I will not contribute to a code base that I have to use preit hooks on thankfully there's a feature built in to get for this D- no verify there's also a feature built into my computer for this which is that I Alias husky to Dev null because I never ever ever ever want them to run random [ __ ] on my goddamn computer I did see a reply to Matt that explains the one use case for pre-commit hooks that I can kind of get behind I don't love it but it makes some amount of sense which is quickly scanning for authentication credentials that might have leaked into your code base I've heard a small but meaningful number of people bring this one up that it's pretty common for devs to copy paste secrets in the development environment to try and test things out and they want to make sure those don't make it to prod I think you have 15 plus separate problems that led you to that scenario where people are regularly putting things in that are secret like so they can get their Dev work done that usually signifies a much greater failure like much greater failure but in the case where you're working on a code base where this has happened more than once and you just want to be positive that the dumbest devs on your team that you can't fire for some reason won't make this mistake fine a pre-commit hook to make sure you didn't commit a secret is like adding a machine at McDonald's to make sure there isn't metal in your burger before you served it I don't think everyone needs a metal detector at every restaurant but if you've run into the problem enough times fine have your metal detector for your food enjoy it I hope it helps out I won't say this is bad I'll say I wish it wasn't necessary but if you happen to be one of the devs or one of the teams or one of the projects where this has saved you I have a lot of questions and I would love to chat about it but at the very least this is applying a solution to a problem and in that sense I can get behind it if this is a problem that you had and preit hooks are a way to guarantee it won't happen again you have my vote but also as Gabriel just pointed out in chat you still need it inci if you have this issue yes yes yes [Music] yes yeah any anyways my point about this was a little bit different because I want to focus in on the CI aspect here because it seems like the author of this tweet doesn't really know what CI is I've come around I actually love pre-commit hooks now their existence is such a useful way to filter for people I would never want to work with but more importantly if you do anything in a pre-commit hook and you're not doing it in CI you're incompetent because if you're doing something in a pre-commit hook and somebody does no verify or somebody's running a different version of prettier or somebody's doing anything else differently they're going to merge something that doesn't follow the rules that you're doing and now when they change a different file it's going to run there are some great examples from Jay Larkey he had a really good back and forth here if you don't enforce it on CI it means it's not enforced best case scenario it means that after you create a crappy PR now when I touch the same file I have a bunch of formatting and lenting changes in my PR for the stuff that you broke to which he said I can't answer that question of course not if and I know the ways around it but if all contributors format and lint their stage code in a pre-commit or pre- push hook I don't have the situation that you refer to yes you do I had a guy who said the exact same thing and then I showed him 200 unformatted files in the repo he said that's a one-off i formatted everything and showed him 100 new unformatted files a few weeks later so it's not a one-off it's a constant problem because some devs are in environments that don't run pre-commit hooks some devs are like me and refuse to use this [ __ ] some devs have a different version of the thing they haven't done an install fast enough also Mike keeps insisting that this is for corporate environments which is even more delusional by the way anyways I love Jay ly's points here he said exactly the same thing corporate environment by the way fortunately you can't enforce that and get so he eventually caved this is him talking about the person he had dealt with before I don't know if inflatable is the right word here regardless for people thinking the preit hooks are fine here's a quick Oopsy Daisy checklist scenario first I check out main then I npm install then I pull latest changes then I change a file then I commit my stuff and the pre-commit hook runs and then I push in the pr fails and CI why I'm guessing you didn't notice that the changes you pulled included a new version of prettier that formats slightly differently yeah so you didn't install and then you pull then you change a file and you commit and everything's broken why because you didn't run another npm install between steps three and five and if your answer to the scenario is well just run an npm install as part of the pre-commit hook I'm giving you my two weeks notice yep Andreas asked what's a good use case for hooks that shouldn't be linters in the editor my response was you want the highest paid Engineers on your team to quit so you don't have to pay them Severance that's the actual only use case I can think of but I'm not just going to complain about commit hooks being bad because the point I really want to drive home regardless of how you feel about pre-commit hooks which thankfully 99% of decent devs already agree doing it in CI is a thing 100% of capable devs agree you need to run your [ __ ] in CI hooks that only run locally that don't run in CI are just foot guns because CI is what makes sure our expectations of the code base are being honored when the merge button is hit so the only way code can make it into main is if we are sure that these rules have been applied and that they've been applied correctly and there's a lot of things we might lose out on if we don't do that one of the things that might go wrong is the example that jayar gave earlier which is somebody was on an old version of prettier made a change broke a bunch of things and the next person had to deal with it maybe the problem is that they ran it with D- no verify you didn't notice that the code was poorly formatted in the poll request and now it's the next person's problem the number of times even at a code base that kind of tried to solve these problems that I had to deal with random things breaking because some Dev had something configured wrong and now every time I save it diffs against a bunch of [ __ ] so painfully common not having your hooks not having your rules not having your behaviors included within your actual C guarantees things like what Jay ly discussed earlier will happen this 200 unformatted files becoming 100 after formatting them all in just a week that's the problem this is just how it works if you're not verifying in CI you're [ __ ] Aaron Powell had a pretty good question here which is asking if I would consider the linter or formatted pre-commit hooks fine or not but the editor does it what if I don't use the editor that you expect what if I don't have the extensions that you expect this is a great conversation I actually think it's good if I have a Dev on my team that commits code and pushes it up for review and it fails the prettier check or the es lint check now I know their editor isn't set up properly now I can talk with them about that I can sit down with that Dev say hey I noticed in your poll request you had a bunch of commits that didn't have the formatting right is your editor not autof formatting for you can we help figure that out even if you're using another editor it's info I should have because if your editor isn't working for you and you are working for me who's your editor [ __ ] working for it's making it so I am spending more money on your time that could be handled with your editor when you just save files and no we shouldn't be building like these weird safety nets around the fact that random devs have a shitty editor we should be helping them fix their Dev environments and if we were to just blindly pre-commit hook everything we would have a ton of devs that never set up prettier in their editor properly and my life is so much better since I set up prettier in my editor like is there anyone in chat like speak now or forever hold your peace anyone across either of these platforms that feels like their life is worse with auto formatting on Save in their editor does anyone feel like it is worse to have Auto format on Save because to me it is a lifesaver it makes me so much happier and I'm trying to Fathom somebody that actually thinks that life is worse since they had Auto formatting I don't like autosave to be clear I'm saying command s is not a save Hut key for me anymore command s is now the formatting Hut Key and it just happens to save as well I'll run a poll do you like format on Save in your editor yes me no I hate it I do not want it to format as I type because the the way it would format changes depending on how much I'm typing so no personally I just want to emphasize the point we have one person who's voted that they hate it a few that said no but vast vast majority here are saying yes and that's how I would expect this to go yeah the point I'm trying to make is most people are benefiting from format on Save and I would never personally have discovered format on Save if it wasn't for the fact that I filed PRS where formatting was wrong and people pointed out like hey is your editor setup right I was like no I'm still using Sublime I might actually be able to credit my move from Sublime to vs code on a combination of the better testing Tools in vs code as well as the formatting stuff being slightly easier to set up at the time so yeah it just makes life better and the point I was making with the reply here is that if you think doing this automatically is better you're wasting your team's time and energy and losing out on the opportunity to teach them valuable things so automatically doing this is just one of those things that sounds nice but is hurting your team please don't do this please give your team the opportunity to screw up so that you can help them do better every Dev at your company should have whatever editor they're using set up in a way that it works with them based on the decisions you've made about your code base things like a vs code folder things like prettier an es l rules working inside of them or whatever other editors they're using like your editor should be helping you build and with a lot of the things that we're talking about here that are quick feedback loops like not deleting unused Imports or having your Imports in the wrong order or not formatting your end lines correctly you're not having trailing commas those types of things should not be things that are blocking your commits they certainly shouldn't be things that are blocking your poll requests but the reason they shouldn't be either is they're so simple they should just happen in your editor so the the hot takes I have here are twofold the first big one is if you're not running this [ __ ] in CI you're losing a ton of useful insights and just begging for things to fall apart the second more subtle point is that pre-commit hooks are keeping you from having important conversations with your team and there are hiding information that could be used to level your team up with you so if you're relying on them for these types of things you are hurting your team period and then there's a third subtle but important point which is that good Engineers don't put up with this [ __ ] good engineers when they see something like this they dash dash no verify and if from that point they get in trouble they don't respond by proposing other Solutions or doing things differently they respond by quitting like I know I made the joke earlier where I said like the best use case for pre-commit hooks is to get expensive Engineers to quit but I'm not really joking like I do actually sincerely believe that I would absolutely quit if my company stole the commit message button from me if they stole my ability to run that command in my terminal and have it do what I expect it to [ __ ] them imagine if Google Docs wouldn't let you save until you fixed all spelling and grammar errors that's pre-commit hooks yep is that it better than me this is just an example of the pain how slippery the slippery slope is from James Landrum poor dude Theo my dude brosi brohammer I've had an absolute [ __ ] week dealing with the absolute nonsense I have to deal with on a daily basis this is the third thing today brought up as don't do it because it's shitty that I deal with every day we use pre-commit hooks to check for build errors and pre-push hooks to run tests and identify potential PPI passwords Keys Etc it takes eight plus minutes to push a poll request are you [ __ ] me are you joking do you know when my best code is written in the shower but aside from shower code do you know when my best code is written when I just push to change and I open up a new branch and work on something else while I wait for the CI to run you're taking away my ility to work if I have to leave that repo in that exact State on my machine before I can push that is awful that is full context sh shifting that's your brain being forced to do something else for8 minutes before you can come back that's awful that's just so obviously bad and the fact that engineering leadership just lets this [ __ ] happen is unbelievable I hate it so much and because I think it's important I want to be clear I don't think using pre-commit hooks is incompetence I don't even think adding them to a repo is incompetence I think using them instead of CI is a fireable offense I think it means you don't understand how Dev environments work and you're making decisions around the process that are going to hurt other people it's awful and I'm seeing some interesting chats somebody said that they wanted to make an argument but they were assuming the pre-commit or pre- push would be 5 seconds or so eight minutes is quit agonizing yes yes even the people who are pro promit hooks would quit over an 8-minute one yes another great analogy I saw you said this before Angelo preit hooks without CI is like Security checks on the front end yes it's like you get an error when you try to submit a form on the client that says hey you used a string when you should have used a number here but then you don't check on the server I love this point Emmy really really insisting on guard rails over safety nets is a sign of a pathologically unaddressed skill issue I that one's getting [ __ ] framed thank you Emmy for one of my favorite messages I've ever gotten that one's going on Twitter this video is worth doing just for this message yeah for those who don't know my safety nets guard rails take guard rails are things like unit tests that make it harder to make a mistake but it's still possible you could go under the guard rail you could go on a path that there isn't a guard rail for there's a lot of ways the guardrail can fail you it might make it less likely you screw up but it doesn't prevent it safety nets are where you land when you do screw up safety nets are exponentially more important because failures will happen things will slip past the guard rails and as great as some guard rails can be they will never ever ever ever be as good as the safety net that catches you when you [ __ ] up so if you don't have good safety nets the solution isn't build stricter guard rails the solution is build a [ __ ] safety net and I'm not even saying don't build guard rails I'm saying they should come after your safety net is well established because then it's okay if people fall over and you can notice oh they fell here because of this oh they fell there because of that thankfully since they all landed somewhere nice we can fix it quick and then add the guard rail right after it's just duh an example of a safety net by the way is something like the ability to roll back a bad deployment really easily versell has this where I can just go in the list of deployments and say change it to this one because the last one was bad that's a great safety net because if something does go wrong and it will I can now address it quickly go fix the actual problem and like whatever went wrong and then add guard rails later but at the very least the impact of the failure is significantly less to go back to where we started if you're using pre-commit hooks instead of CI you just showed up to that safety net with scissors and started cutting it down and as soon as people said wait what if I fall your response was don't worry I'll catch you no you [ __ ] won't so yeah if you do make the bad decision to use pre-commit Hooks and you somehow still have Engineers after that make sure you're running the same checks in CI I thought this was obvious and I hope you do too one last theot take to wrap this up one that should not be spicy as killed by Google says take as spicy as ketchup CI and CD are good actually they are peace




## The fastest website ever_ - 20241107
every few months the McMaster website goes viral for being super fast and it really is just navigating the website feels like it's flying and the fact that it's using things that aren't modern webtech is really interesting but is it just vanilla HTML and can we go faster if we Branch away from that we have a lot to dive into here this isn't a simple thing to cover because there's so many misconceptions about what makes websites fast what makes McMaster fast and what makes websites slow and quick spoiler yes the McMaster site is fast but we'll also be covering a rewrite of it in next that is comically absurdly faster I can't wait to show all of this to you guys there's a lot to learn here before we do quick word from today's sponsor today's sponsor is me because I couldn't get a sponsor in time for this video turns out doing two plus videos a day is hard to fill with sponsor slots so if you're a company a brand or know a company or brand that might be a good fit for the channel hit me up at YouTube at a fast internet connection which is of note but the site still flies and I think it's fair to just leave it on I could go turn on throttling but I don't care I want to show you guys how fast navigating it is I'm going to hover over nuts and click as soon as I hover over nuts you see a little loading spinner but you get to the page relatively quick and when I click cap nuts it loads immediately when I click corrosion resistant it loads pretty much immediately and now down here I can click a specific product ID add it to my order things load very quick and when I navigate backwards and forwards we get a little loading spinner for a sec but then we're on the page it feels really good to navigate this site there are things here and there like the fact that the loading spinner hides the sidebar sometimes and doesn't other times but it overall feels really good if we open up the network tab we can start getting an idea as to why notice when I hover over something for the first time something happened here content web part they have JavaScript that runs on the client that tracks when you hover over things and immediately starts to prefetch them so when you click it it can load immediately instead of having to go to the server on click this is a thing that we often do with single page app Frameworks where we try to pre-load Things based on user intention like hovering over the thing or being visible as a link so you can use different prefet strategies with a lot of tools but because they're not using a traditional single PJ framework they don't have those so they built their own and they built them on top of their aspx backend yes this is all written with net and the reason it's fast isn't because net is fast which by the way net is insanely fast the reason it's fast is the prefetching work and the client side JavaScript that they have running it's not fast because it's stand HTML in fact if we look at this response let me just open this in my editor really quick this is not standard HTML like I've ever seen it we have this giant thing at the top here this weird pile of numbers and then a gigantic Json object object as the first thing in the response not as a script tag in the response just as a pile of data that might be needed on the client side and it's a lot there's a lot of data in that response before we even start the HTML chunk which is here we see the prod page content inner ID and we see all of these elements all named in the wonderful net way and we can see the actual HTML that's going to come in and replace the page if I do click on that portion but all of this is in order to get what the server thinks the page should be if I click that and what the client needs to do to actually get me there come together properly but this is all being stitched together with their own JavaScript that does it all so if I click here click JS you'll see it's actually quite a bit of JavaScript being loaded even if I open this in like an incog where I don't have any Chrome extensions or anything you get quite a bit of js on the first page load over a megabyte and a half of it that's pretty nuts and the reason for that let me just expand this you can actually see the oral so you can see all of these are indeed McMaster they do this because they had to write a bunch of JS in order to make it so when you navigate they can swap things out they can preload things and do all of these hacks to make it feel like a fast experience apparently two of these JS files don't even exist and fail to load which is kind of funny this one does you know they're serious when the first line in their JS file is a performance. mark call that's how you know they're in this for real how they're not just playing the game they're here to win it but you see all these crazy things are doing like I'm sure a lot of this is just cuz like JS minification and ausc is weird but there's a lot of code in here about offsets and render locations it's possible this all comes from a library they're using and if somebody in chat knows if that's the case let me know but as far as I can tell they built their own JS layer to do the swapping and the slicing and the editing of the HTML on the page and the HTML updates they fetch from the server Chad has too many good puns I have to I have to show them the force says on the page was great they're not screwing around it's pretty nuts you guys get your win this time try regenerate runtime equals runtime catch accidental strick mode this is something else I I would love to see the actual code for this code base not the minified chaos version I'm so curious how it is actually written how it's actually supposed to work got all these defined relationships this is nuts but yeah so for everybody online who's been saying obviously it's fast because they used vanilla HTML and JS and they didn't use a framework like react that's why it's so quick you're  dumb look at the network tab this page loads more JS than half the things I build and that's fine because loading JS isn't what makes a page slow it's when the JS blocks things it's when the JS takes a while to run not just load and it's when the server doesn't respond fast enough to user intent and interaction and the solution here isn't write it in something faster the solution here is understanding the needs and expectations of a user who's experiencing your product and to try and optimize around those things different tools can provide better defaults but different tools do not magically make your website this fast you don't make a website as fast as mcmas without having a business interest and time that you're putting into it you get here because it's your job to or because you care too much and with McMaster they wanted to do better than calling them on the phone and if they make the website so fast and so reliable that you can fat finger it with a glove on awesome and as Chad has correctly pointed out here rolling your own framework is indeed still using a framework absolutely if you look at the page speed insights for the page you might actually be surprised they're not great the interaction to next paint time is relatively slow because it's loading a ton of JS and their performance number here is actually surprisingly low hitting a 61% there is sad to see then the JS execution time is insane because they're again running so much JavaScript but it doesn't feel slow even though they have all this JS and if anything I think this showcas is how the page speed insights and how Lighthouse doesn't give you a a full picture so to speak because it still feels great to use the site but all the things that we have been told are how you make a website fast are either not what they're doing or are not true here but I do want to try something else quick let's check out next faster before I do that I want to try it here I want to see what the page speed insights are quite a bit better and if we wait for the diagnos of performance issues I have a good feeling there too come on Google there we go still not a perfect score in performance but the accessibility is better it is overall good let's take a look at how it actually feels to browse it this is next faster a copyright distinct entity as a demonstration of what a website that vaguely looks and navigates similar to mcmas but is totally not McMaster or even a reference to it yeah there there may or may not have been some weird copyright in that world not what we're here to talk about we're here to talk about next faster because it  flies I click I'm just going as fast as I can here everything loads instant  taneously I just as soon as I hover I'm clicking I'm just clicking as fast as I can here and everything loads immediately there's no pictures popping in it doesn't feel as good as McMaster it feels comically better like none of that is sped up I was just live doing that as I talk it's insane and we have to cover the hacks they did to make it that fast huge shout out to Ethan ncer his YouTube's in the description too for the work he did on this project as well as Rees and Armen for helping with everything from orchestrating it to getting mock data and generating that all with AI the result shows in the fact that they made something not just slightly faster meaningfully obviously faster is kind of absurd and if I was McMaster I'd be quaking a bit because now any of their competition can make something that eats their Edge which is that their site is the fastest by a lot so let's start with cash disabled fully the full page load all of the data is about two Megs and since nothing is cash it's going to keep refreshing it but if I turn cash back on and I command shift R I have to stop and reset all of this actually clear cord reset it's about 300 kilobytes transferred not bad at all like at all it's basically no data 3way 6 megabytes decompressed but the fact that it's that little especially if we just look at the JS tab how funny is it that the amount of JS being loaded on the next version is significantly less than the amount being loaded on the vanilla HTML version but where things get interesting chat's already catching on so what happens when I scroll as I scroll it's doing these additional fetches and you'll see that little underscore RSC thing what's that can we look at the response here no didn't give me one okay here's some so here we have the needle work response if we open this up in my Editor to take a look this is all of the data that is needed to render that next thing it includes the data that goes to each of these individual tags it is just Json but this Json is going to be used in the next route so that one all came from where did that one come from we also just pre-loaded all the images somehow um this was needle work so if I click needle work all the images are pre-loaded already because it knew what data needs to go there it's already in the instance in the browser so it can stuff those in really quick and even prefetch the images if that's the right call watch what happens when I hover over a page it immediately starts to preload the images for the next route when I hover over it so I hover over the needle Point Yarn it fetches all the images on that page before I even click and then when I click they're all already here that's nuts that's super cool and the reason that this all navigates immediately is there's a lot of these simple to come up with but not necessarily simple to implement optimizations that make the website move as fast as you can click I'd even bet that if I go turn on 4G slow throttling it still is going to navigate comparably quick to the McMaster site the image like logger to load in because they're images but everything else is instantaneous I click and I'm on the page I clicked on it's kind of nuts but I can just sit here and show off how fast it is we got to actually look at the code which is why I downloaded the repo it's also worth noting that because this is nextjs the backend code and the front end code aren't even different repos much less different languages it's all here good point Gabriel apparently the preloading I was showing before with that file I had here this is literally just preloading for the images so when you hover it knows which images to preload huge optimization really clever stuff back to the actual code though so here we have the homepage code it grabs the collections and the products in a promise.all so these can run parallel we can even go look at how these queries work in here we have the DB select we're using unstable cach this could just be used cach now that's finally shipped with a custom reval dat of 2 hours so now we don't have to wait for this call to happen because it's cached and the new products probably aren't coming out that much and even if they are every 2 hours it gets updated awesome we have all these queries that are doing a bunch of joins all using drizzle they preload all the data in the database using drizzle and AI generated fake product  which came out really good overall but all the queries are just basic DB queries using drizzle with a bunch of cach validation headers not even a bunch just the revalidate function using the unstable cache like wrapper nothing here is stuff that you can't write it's all relatively easy to do it's all standard drizzle code I have a bunch of code in my code bases that looks very similar to this so that's not where the magic is let's keep hunting let's find that magic here we have collections. map and we write out all the collections and then for each of them we put all the things or all the subcategories that exist there here's where we can start seeing some of that magic here here's the first line of magic prefetch equals true this is telling nextjs and in this case the JavaScript runtime for the nextjs router on the client hey by the way go load this page once this element appears so that when you click it it can happen immediately instead of happening when the user clicks you don't have to wait to load the page you click it and it's effectively pre-loaded that's what prefetch means images have some of these hacks but there are some fun things in here first off we have the loading call which is to determine which loading Behavior should exist for this image tag and we have this in an interesting spot if the image count is less than 15 then we render it eager otherwise we render it lazy the reason we do that is so that some images have a higher load priority than the other ones and this image count is a variable that's defined up here and since this is a server component it only runs once and then dies you can do something weird like this so every time we render a new image in this view the image count goes up and if it breaks 15 then we start switching the new images to load lazy instead of eager which means you will see those first 15 images much quicker and the other ones can load in later decoding sync is it's effectively like sync is is blocking where it will do it ASAP because these images are simple enough that it should be able to render them really quickly and we shouldn't wait and have them pop in later that's my rough understanding good call out on prefetch for link by the way prefetch the page in the background any link that's in the viewport will be prefetched so it's not just you hover it's the link link is visible so if there are links that aren't viewed yet because they're not you're not at the part of the page they won't be prefetched so now that I'm here if I scroll you'll see here as I scroll all of the pre-loaded data appears because it's being fetched in case I click the link in here you'll see the watercolor paper for print making is there and it has a bunch of the data that's needed to load that so now when I click it the page can load immediately because it's smart enough to do this type of prefetching and that's not something crazy that they built themselves that's just turning on prefetch true and even if this wasn't there it would still be really fast but if there was a loading state in between like you had a a loading JS file that would have hit before you loaded that data that file will basically say to the router hey only pre-load up to here but when you set prefetch true as they say here when you hover when it's null it will load a dynamic page up till it hits a loading JS but when you said to true it will load the whole thing including whatever would have been under the loading JS which means any data fetching other things you need to do get done you have the page and when you click it it loads immediately really nice a few more things with image they're doing the nextjs image optimization which is really good and there's a reason they push you to use the image component it makes your stuff load way faster quality 65 is a bit aggressive but I bet the resulting images are hilariously tiny actual images like 40 kilobytes for some of these some are even smaller yeah like 20 kilobytes for some the image files are tiny which is great because they're in a tiny viewport they don't need to be huge they they could go further if they go further it might cost them decode but if we go to like pick thing the tool I built for managing the images I use for things like my thumbnails and I want to right click copy image address open that new tab this is a decent looking image and optimized yeah my image here is only 4.3 kilobytes so you could optimize further but when you optimize further the result ends up being more CPU cost so if your device doesn't have enough CPU to decode these really like well compressed images then your experience will end up being slower and finding the right balance between compressing as good as possible and not screwing the user CPU is is tough so that's all we have here that's not much magic this is all stuff any of us could have done in our next code bases without thinking too much it's a prefetch true and a loading counter there has to be magic somewhere in here right let's keep hunting let's find some of the magic we'll look at the collection page this one's complex right so they're using this wonderful function next called generate static prams I've personally never had good use for it but this is a clever one what this does is at build time it runs the code here and whatever you return it needs to be a list of the pams that could be on this route because this route is slash collection so whatever the ID is there whatever the slug is there if you write this function exported on the route at build it will make an array here of all of the strings that are valid Collections and it will generate the page for all of those so at build time we are generating Pages for everything which allows it to to be much faster because now we don't have to block on the server to get you something back immediately and here we actually use the parameter which this case is collection string again just from the name of the file there let's see how we use it we decode URI component to grab it quick so that it's formatted properly and if somebody's doing some weird URL encoding  it's handled we grab the collection by calling a weit get collections data which again is just an unstable cashed database call let image count to zero huh it's the exact same thing again is there magic anywhere here there has to be right there's no way this can just be such simple code in order to be faster than the site that was super well architected right you got link prefetch true again image loading is eager still decoding is sync there's nothing magical here where's the magic hiding they had to hack next to make it this fast right there's no way next could just be fast like this it's slow it's all JavaScript there's no way well the more you scroll more you realize the language isn't the thing slowing you down and the JS framework you choose is in determining how fast the performance of your app is does it have the features you need for it to go fast and did you take the time to pick the right things maybe just maybe there's something going on in the next config we'll check that we have partial pre-rendering set to True type script in esent ignore build errors these are really good Flags because you can check for these things during your CI and not block your deployments on them which is really handy we have the images helper which has a minimum of cach TTL I should probably turn that on on things because we never want to reoptimize an image ever and then remote pattern which is their verell storage blob storage thing personally I'd recommend upload thing but for sell storage is decent and once you're putting things in if the users aren't putting things in the place that your storage is doesn't matter but if users can upload you need to make sure you have that all blocked down but here it doesn't matter it's just part two and some rewrites these are to make sure that things like your vitals JS file and your heartbeats don't get blocked by an ad blocker where's the magic how is it this fast maybe we need to check the PRS let's check those poll requests 57 closed so a lot of people have been contributing actually let's just look at the contributors quick I think it's pretty funny to see it's kind of like a who's who we obviously have Rees and Ethan high up we have Armen here who generated a lot of the data there a bunch of other people who helped contribute including kforce who's the CTO of versel including Tobias who's also observability at forell leer Rob you've probably heard of before stifel who I adore one of the people most involved in maintaining next and I'm an not S I can't say I'm familiar with him use GitHub clever so what have these people contributed where is the magic anything here it seems like it'll be really Fast Change cast from 10 minutes to 2 hours cool disallow query prams to be used for image optimization let's see what this is maybe there's something here oh they added this for additional security people can't use Query prams to spam you with more image optimizations good call reduce image size on mobile cancel images on Mouse sleeve what's this one or HF equals slash return empty Source components UI link TSX oh do they have a custom link component let's take a look at that maybe that's where the Magic's hiding o this looks a little more magical let's see what's going on here we have link which is type of next link but it's a slight extension of it so what are they doing here we have a Ed state with prefetched images we have this pre-loading set preloading link ref is use ref routers use router and then a pre-etch timeout if we have prefetch false we don't do anything otherwise we start link elements link ref. current if there's no link element we bail now there is we run the intersection Observer if this element is intersecting then we set the prefetch timeout and we do this prefetch which appears to be mad about some es lint exhaustive depths cool I don't care go away so we prefetch you calling router. prefetch to tell the router hey fetch this thing ahead of time we want the doc preet to happen first this await sleep zero this is a trick that uh I'll be doing a much deeper video on in the near future keep an eye out for my PPR video and how next actually works it's super fun so we call the prefetch images function and when they're done we set images to be those prefetched images and we un observe pretty simple and now we just use next link pass in all the things we just defined and specifically on Mouse enter we run the image preloading and on Mouse leave we stop the image pre-loading and on Mouse down we update the URL so that it updates immediately by the way because usually when you click on something the action doesn't happen until you let go here it happens right when you click so you don't have to wait but that's about it and again to be clear none of these are things that you can't do yourself and more importantly none of these are things you actually need this is just for the images to load as quickly as possible you can just turn on prefetch true and get most of these benefits but they're not actually prefetching the data which is even crazier as you see here prefetch false they're not prefetching the next page they're only prefetching the images for the next page which is really interesting because the images are the part that is slow and you'll see that when you browse around to the McMaster site especially if I turn down the throt or turn up the throttling I go to to slow 4G let's go somewhere we haven't been even now see how slow those images load in I'm hovering over flow and level control right now I'll go here so you can see what happens when I do I'm clicking it all those images take forever to load in even if the route is ready to go this is taking a while and now it loaded but the images are very slowly coming in and again to compare I'll put on the same slow 4G I'm hovering I click it did just load a bunch of images but not for this page for the next places I go so now when I hover this and click it the images are already reddited when I go to this one instead the images are already there so even though we have the same limitations here the page loads immediately because that's not the slow part generating or fetching some static HTML from the server isn't a big deal but the HTML isn't the part that's slow here it's the images apparently they do prefetch the URL on Mouse enter oh yeah they so propess cool so they disabled the traditional prefetching because they wrote their own but if you just turn that on it would do 80 plus% of this itself just not the image part but since they wrote their own prefetching they also routed up prefetch the next URL so when you hover it will fetch the next HTML as well as fetching all the images that that route needs super handy super clever this file is the only magic I've found so far and I've been hunting it doesn't seem like there's a whole lot of magic in this project is there anything here that I might be missing I'll keep keep looking we got buttons but these are just they're just buttons nothing here is magical we got nothing card seems particularly interesting these are all just Shaden components the Magic's all in the link component and this is a file you can go copy paste if you want to have all these fun behaviors in your app but you also don't have to the fact that getting something this fast is a single 150 line of code JS file that just changes link Behavior slightly it's really cool so I was just talking about how that link file has a little bit of magic that you don't necessarily need but could also copy paste and reimplement it yourself turns out you might not even have to because Malta the CTO of cell is actually going to Upstream some of the things that they did to make it even faster as Malta says here what's cool about the app is that it's mostly just plain old idiomatic next for example just using route based code splitting next font for automatic fonts next image for image optimizations server components to prevent the JS size from increasing all the things you normally expect partial pre-rendering for largely static delivery with server side invoked Dynamic Parts yep all cool stuff but as Malta says they do add some special optimizations beyond what the framework does by default additionally there are some optimizations that end up not shipping because there isn't an Indi Matic way to impl want them an next both cases are great learning experiences that can inform the future versions of nextjs here are some examples inlining CSS is an attractive technique because it allows rendering the first contal paint with a single HTTP round trip next Master doesn't do this but the original McMaster does it's not a good idea for many sites but but if the CSS itself is small it's fine what changes the equation is that with Tailwind the CSS size never grows and so inlining is actually probably right cool be dope to have that added in they also call out the next link stuff that I was just mentioning they have next link navigate on Mouse down I know this is a longtime feature request for next and next Master shipit it would likely be controversial as a default but it would be a good option fun fact I have a whole video about John carac take about Mouse down versus mouse up for the avors and I have come around I think Mouse down is almost always better it's also not possible to cancel a router prefetch invoke prefetch this would be nice if they could cancel it they have crazy ways they're doing it now be nice that that was built in they also mention in the image prefetching it would be nice to make this a first class feature definitely has to be separate from the document pre fetching as you'd only want to prefetch images with higher user intent also a good call it you wouldn't want to just immediately prefetch as soon as the page is being prefetched you'd want to prefetch when the user's hovering or some other action has indicated that you really want to fetch all the data because if you opened a page and it links to 50 pages all with 20 images you're loading a thousand images just by opening that up so that can't be a default but you can do this right not the accessibility thing this is not true at all in fact Mouse down is better for accessibility I go in depth on this in the video there's a very real accessibility problem with mouse down Mouse up which is there are many disabilities that make it harder to Target a button that you're trying to click no matter how able-bodied you are when you let go of the click on the mouse you will move some amount for some people that amount is more or less so if the action occurs when you let go of the button instead of when you click the button the likelihood of a misclick actually goes up this is a much bigger deal in VR because the trigger as a way to click when you're pointing with a controller when you let go your balance changes slightly and you move up and down which is why in every VR experience everything is on button down on press instead of on release it is more accessible and every accessibility tool triggers a mouse down click it's just not the case I am not like a leading expert in accessibility but I did run a lot of the stuff that we did for it at twitch I spent a lot of time talking to people using every single type of screen reader on the planet I have done a lot of work to make accessible experiences Mouse down is not the reason your experiences aren't accessible it actually helps more than it hurts so yeah I almost fell for that trap I did a little more research it's not the case in the slightest anyways back to what malda had to say right now next image defaults Lazy by default it's a good default but it should be considered to make the first n images like the first 5 to 10 eager by default as they are more likely to be above the fold I showed how that was implemented with a stupid little counter that being built in be really nice they're working on getting all of these snuck in to be actually part of nextjs so if you do want these optimizations by the time you watch this video they might already be in next which is really cool that said they were almost all really easy to implement in your code base with a single 150 line of code file you could get half or more of the things that discussing here which is nuts it's so extensible and so good it's surprisingly easy to write these types of super performant things within the next model and the result is 1if the JavaScript that you would have had to load to do it the way that McMaster it I think that's pretty cool I knew it was going to be fast when I went in I didn't realize how much faster it would be than the project that it was built to Showcase I am blown away with the work that was done on next faster and I even learned some things about how to optimize performance in my fullstack web applications I hope you did too let me know what you think and until next time peace nerds we don't need react query we have react query at home react query at home giant use effect call that prefetches routes love it oh man this is wonderful




## The most important function in my codebase - 20250320
I'm working on a lot of different projects right now and there isn't too much overlap between them there's one thing in particular they all have in common though they're all using typescript there's a lot of other overlaps but the typescript is the one key piece maybe they're not using it for everything but most of them are using it for a lot of things and because of that there are frustrations I've been having with typescript one of those is try catch I don't think this is a good pattern you guys know I don't love goling but at the very least they got some things right here they kind of force your hand and make you handle errors typescript doesn't care errors aren't even typed your returns are your errors who knows you call a function it might error it might not you have no way of knowing unless you've read all of the code that it has and it calls no more I am too tired of this and as of early last year I think I solved it I wrote a pretty Jank solution but it's actually pretty good I posted it on Twitter and people loved it so I to take some time to break down this interesting code what it does well what it does poorly what other options you have and most importantly what you should be doing about the errors in your code because all of us as typescript devs need to be handling our errors a bit better unless you're Ethan nicer but all the rest of us should probably be doing more of this sadly wrapping errors with viral tweets doesn't pay the bills or my team so we're going to do a quick sponsor break and then Dive Right In today's sponsor is something I have to admit I'm a little bit late to well I'm not late to C code rabbit but I am definitely late to this doc strings feature cuz it's really cool we've all been here before you just finished a really hard annoying PR got a bunch of changes approved but there was one comment you still haven't resolved add docs it's not fun we've all been there especially once you have to start documenting every function on your apis and whatnot not great this is part of code rit's new finishing touches features and they're really cool all you have to do is type at code rabbit generate doc strings as a comment on the pr on GitHub and they will automatically make a PR handling all of that for you and the reason I said I'm late to this is because when I searched on GitHub there are already almost 11,000 poll requests that are doing this I'm going to literally click a random one that's not even merged here's add doc string to MMC let's see how it did look at that it added like useful updated comments for the functions in here also fix the comment syntax cuz the double star here is the semantically correct way of doing this semantics aren't really a thing here you get what I mean though it's actually super cool to have this automatically go through leave useful comments about what these things do not because you need to see the comment right above the code here but when you have an LSP like VSS code does you go to another file trying to call one of these things you just hover over it and now you can see exactly what it does those good descriptions of what functions do in VSS code come from here and now you can just generate them with one command that's separate from the fact that it will do all your code review for you by the way it actually seems like here they had them code review the doc strings that it added which is hilarious and actually really cool I'm still amazed how many bugs we've avoided because of using Code rabbit check them out today for free at soy. l/ codit I couldn't help myself but make a few jokes I was surprised so many people liked this I thought it would do well but I basically tricked 3,000 plus JS devs into admitting the fact that go does some things right because Go's pattern is whenever you call something you have to deal with the error before you can use the data the difference being go is whatever the opposite of type safe is it's not dynamically typed it's like question mark typed it just does what it feels like and you hope for the best real languages have types and uh yeah this is nice because at the very least data is typed I'll show you guys how this works I actually put the code here so if anybody wants to go grab it and play with it themselves feel free we're going to copy this throw it in TS playground so here I have that code we have our Tri catch function let's make a fake async function um do math this function has a math. random call we'll just assign this const value equals math. random if value is greater than 0.5 throw new error too large else we return value so this function as far as typescripts concerned just returns a number so if I use this somewhere like const some data equals await do math console.log some data as far as typescripts concerned some data's a number if we do our little shiky two slash here we'll see const sum data is number that is bad because right now half of the time we're actually not getting data we're throwing and if I change this to be greater than -1 now this code throws 100% of the time and we're not handling that here at all as far as typescript cares number is what some data is and some data always exists as far as it knows so what ends up happening is if this isn't some data it's because there's an error that was thrown and now because we're not handling it it gets thrown up and whatever called this hits the error instead since we're in the top scope we're not calling this in a function everything falls apart so what do we have to do if we know this can error we can try to do it we can assign the value in here and then catch error console. error error but now that value doesn't exist now we don't have some data because it was defined in this block I could move all of my code into the block but that sucks having to be multiple indents and especially if you're calling multiple async things let's say we want to add some data to another do math call then I can try again const more data equals await do math console.log sum of some data plus more data catch again error console. error error what's even worse here like this is already bad see how tabbed and we are for this basic math we want to do what's even worse is if we rethrow this error then it gets caught here and we lose track of what's going on we have no way of really knowing where an error happened unless we manually handle all of this this is horrible no one should have to write code this way so here's what I did equals wait try catch do math now we have some data which is number or null and error which is error ordinal and watch where this gets really really fun we're going to move this into a function because I want this to be more realistic we put this in here if error return error unable to process put an async here and now that we've escaped on this error case some data is a different type the type changes to number before we check the error and handle it it's number or null because we don't know yet because we haven't checked if there's an error yet if there is an error we return now we actually know this exists let's do that extra layer we just had too const data more data error is the one annoying said it should be an array it makes the types A little Annoying I would be willing to Cave but yeah error more error I'll change this to be some error be consistent equals await try catch do math and if I was to try and add these we'll get an error because more data might be null you can't add a null to a number so if more error return error unable to process and suddenly this is safe going to clean this up a little bit because I want you guys to honestly tell me that this isn't a 100 times better than whatever the is happening here it's not one of those like I have opinions you have opinions they differ one of these is just waiting for a bad change that passes code review to cause tons of problems the other one actually describes what's going on this is an obvious significant win thankfully most of y'all appear to agree it isn't a 100 times better it's a thousand times better yeah to be clear though this solution is meant to be a bare minimum I don't think try catch is the solution to almost any problems especially once you're in a sync world I think at the very very least for almost every codebase I've ever been in try catch shouldn't be a thing you do with try and catch this I've had so many bugs of so many projects that are weird nested TR catch blocks doing things that don't make sense because humans do not think that way it doesn't work so if you're already using try catch blocks this code here which again is published in a Guist that is linked in the description it is 25 lines of code that will make everything you do significantly safer and a lot easier to handle these errors I would highly recommend as a bare minimum you copy this code I get nothing for it I don't care I'm not doing this I want to be popular for getting my code in people's code bases I think this should be set as a bare minimum for how you handle errors when you do weird acing stuff that said it is absolutely the bare minimum and recently I've been putting work into to do better there are two specific Solutions I want to talk about as I said we have the lowest tier path which is what I did so fine tier Theos try catch wrapper I think it's good but it's not the only solution I want to talk about two others that are really important those are effect. TS there's a lot of other things to call effect I think they just call it effect now because it kind of is its own language and never throw so given these three options and this spectrum effect rewire your brain or be born as Ethan nyser those are basically your only options low effort low friction easy to just drop in your codas and get back to work you don't even need to npm install you just copy paste try catch and then never throw which is an interesting in between of the two I think never throw will be the easier to digest so now that you hopefully understand why this is good we're going to move on to why I've been using never throw more never throw is a pretty literal name for what the package is it is meant to encourage the idea of result type the result type is a really important thing to understand what I did with my playground here and with my helper function there is kind of brute force a result type into more traditional typescript by defining a success which is data exists error is null as well as defining a failure where data is null and the error exists now a result is either success or failure and the TR catch function returns a result which is either th a success or a failure do you see where we're going here right now the error only happens via try catch but what if instead of just blindly try catching here and not even knowing the type of the error it just is error unless we manually pass something else what if at all levels we returned something that looked like this what if instead of just returning if the data is there and throwing if it's not we went out of our way to make sure at every single level at every single layer in our code we always returned we never threw see where the name comes from the point of never throw is to keep you from ever using throw calls never throwing it's literal instead you return error here is some actual code inside of T3 chat this code originally was a mess we introduced a tri catch wrapper it helped a ton but it was so complex that it needed more and I wasn't ready to bite the effect bullet as I'll describe more in detail soon so I decided to give never throw a real Shot For the First Time hoping I could use it in a relatively minimal way and I kind of could this is the verify request function this takes in an already validated through Zod request and make sure the things you're requesting when you send a message are allowed this checks for things like are you an authenticated user are you a subscriber did your recapture token check pass did it fail all of these things are handled here and if we hover over what verify request returns it's a result that it's either verified request pams or verify request error and if we go to the route TS code where this is all being called you'll see here verified request is await verify request validated input if verify request. is error I grab the error and here's where it gets really cool error. type is strictly defined it has to be ident ification failed or model failed or requests too long it has to be one of those because they're not being thrown they're being returned it says we are always returning error or returning a result as we do down here but we wrap it with okay now we know the result has to be one of these two things it has to be an error and if it is it has to be one of the things contained with an error and if it's not it has to be okay and if I return anything that isn't error or okay wrapped this doesn't work so if you're working on a system like we are with this where there's a lot of different layers things can fail and we want to make sure that we know what error happened where so that I can send the right message down to the user so I can return something specific if the capture failed versus your off failed versus the models offline versus you requested a model that you should be a sub for but you're not a sub now I can return the right message to the user depending on the condition because I know every single condition it can be in where this gets really fun is when you Nest things up and down so this function always returns error or okay but it also calls other functions and those functions might throw too so here in verify requested model and features I went and made changes so that it will always return error of some form or okay now I know that when I've done this that it has to be in one of those States so if model verification isn't an error then we're good to go and if it is an error that's I can forward up the thing that describes what that means here I could just return the error itself here if I wanted if I wanted to just return like the error that we got before I can model verification. error now it's bad because verify model error doesn't match the type of the errors this returns because this returns a verify request error I could change this to be a verify model error as well but I chose to let this function return something different because I have to I have to make a decision because this errored and if I don't then I can't use the data and this is the benefit here now when I have a function that can error I can't just call it and pretend it didn't error I have to be very explicit that it didn't error and to everyone in chat saying this is way over engineered I envy you I genuinely Envy you guys for having never worked in a code base that is complex enough that you're drooling over this because I've worked on a lot of things like lived services such as twitch things that use a ton of weird apis in browsers and electron things that can error all sorts of different ways it sucks you need a way to know what went wrong and as your code base gets bigger and more things can go wrong having your code be very explicit about what right looks like and all of the things wrong looks like is a huge win this is a cool solution because it's also not as aggressive as other Alternatives I'm not going to say it was dropping it took real work to make these changes and make this code work well this way but it does it's actually very nice now it's significantly more readable and at every single layer we know exactly what is happening and when you have code that can return 40 plus different types of Errors it is so so valuable this is too many levels of indirection what you did 25 lines was way better no because we don't know what error it is and that's the thing at every layer we lose the error error if I did this in a different way if I did this using my TR catch wrapper we wouldn't know what the error was up top we would just get error back and now I can just return that what we were doing before was if error do includes special string return this case or if error includes this special string return this we're still doing a little bit of that but it's not if it includes it it's if the error type is this one specific thing now we can do exhaustive checks I could even do a switch statement here that is exhaustive because we know error has to be one of these two options either the rate limit was hit or our code checking the rate limit errored out some way that is awesome that is huge the fact that I can identify the difference between error types means this code can behave in ways that make significantly more sense huge win I was skeptical too cuz I literally wrote an alternative that's used all over this codebase here I'm using it on the client error await try catch do event processing if error I throw an error that I couldn't process the event this is for stripe checkout stuff just useful debugging things for us previously this would have just and I almost certain did this it was just like this before and then it would throw then the user would get an error in the browser now they don't it might still have failed in a way that is important but at the very least I have a console log they can show me as we figure it out I have my verify fingerprint code that uses it I have my um index DB shim that does it so when I try to sync the database from the server I use this here as well it is really nice for these one layer deep things if the async stuff's only going down or up one way this is fine as soon as there are layers in nesting amongst the things that can fail as soon as the layers failures occuring get more and more complex it becomes more and more valuable to have a tool like never throw it isn't perfect though I personally don't love how it handles async stuff here is where I find the never throw patterns to be a little rough you can take a promise that doesn't follow the never throw standard of always returning error or result like get rate limiter which as far as everything here is concerned will always just return this all actually I did change this this is using never throw but it's async so I can't just await and expect it all to be fine there are other layers within it that can throw so I wrap it with a from promise call but here's what's really annoying if I delete this and then this seems totally fine in normal I checked it it's an error cool con value equals internal rate limit. Val what is the type of value here oh it's a result type I haven't confirmed what the contents are yet so I can't unwrap it yet because it's possible this is in a state that isn't good because this async function this gate rate limiter is returning okay or error now I have to unwrap that that so to speak and that is what this and then did and this is where the model starts to get annoying the fact that when I start chaining things with async each chained layer has to be unwrapped which is what an then does it's not just then and then handles an unwrap and an error case as well I hate this I hate this so much I also hate that whenever I'm heavily using never throw I have to do my least favorite thing return types everywhere I don't like return types if you don't know why I hate return types watch my video on it it's a little old but I they break things in typescript they're not great they make it easy to override things you don't want to however it's real important they are still native to typescript in this is where we need to dive into effect effect markets themselves is the best way to build your bust apps be faster and all these other things and typescript and a lot of the smartest people I know are effect die hards people like Ethan ner people like Julie is contributing on our team they are some of the best Engineers I know and they're all in on effect if you want proof you don't have to look very far here's the upload thing code base the public one the Open Source One it has 60 plus Imports we're using it all over the place it's super super useful we have benefited greatly from introducing effect to our code base for both the packages for upload thing as well as the info for upload thing the problem is that it requires a lot more buyin I'm going to make a weird comparison and I hope this comparison helps emphasize how I feel properly back in the day the web was just JavaScript modifying HTML as our applications got more complex we need better solutions for it and jQuery came out which helped make those relationships between the JS and the HTML a lot easier things got more complex again though and other Solutions were introduced to solve those complexities certain points but a specific important thing happened react when react dropped they implied and kind of suggested that you can use react for the interactive parts of your website so if you have like one component that needs to be more interactive or a comment section or things like that react can make that better I don't think that's a good way of putting it I don't think react is a very strong solution as a component in your web page I think react is a good solution is the root of your web page if your web page doesn't start with a react tag it's not a great solution and the benefits of react are much much stronger if react is your application there are other solutions that work better in those more granular like deeper down use cases and there's also ones that try to do that but fail like web components but react really expects to be the root of your app and it is strongest when you let it be the root react is best when you mount it as app not as a button somewhere down it works best when you mount it as the app at the top why the hell am I talking about reacting a video about errors TR catch is fixing vanilla JS I would argue TR catch is kind of the it's kind of the jQuery of the space never throw is more something like solid JS where it can work at these different levels you can drop it in it has its quirks it has its mental model you have to get around but if you do you can benefit greatly from it effect is react I will fight day and night with all the effect die Hearts they are much smarter than me and they are probably right about a lot of things that I disagree with them on they are not right that you can just add effect to a code base in order to use effect you have to first rewire your brain and when you are done with it you then realize you're wrong and have Ethan nyser hop in a call with you and rewire it for you again as poor Ben experienced or you have any of the others from the team helped to we had a lot of help from Johannes when we were moving over to it with upload thing once your brain is finally correctly wired for effect you can then go rewire the entire code base you can't just move your code to use effect in some places you yourself first have to make the move and understand it then you can start rewriting your code base or building a new one using the patterns that it introduces and those patterns are awesome it is genuinely really really cool if we read through the Y effect you'll see a lot of things you're already familiar with we have an example of code here where if B is zero we we throw an error you can't divide by zero otherwise we do the division the type doesn't tell you that this can throw though you just assume you can pass it these things it always get a result but that's not true it might throw so now you have to wrap that in a TR catch block with effect you can do this very differently since divide returns an effect now we have the condition B is zero if so effect fail with can't divide by zero otherwise effect dot succeed with the actual solution you might be like well that's weirdly nested why are you returning a direct turn area instead of a function body like we did above you don't have to but I've seen a lot of effect code at this point especially in our own code bases I think effect users just hate brackets and basically everything they write is a giant a turn area like this where every single potential condition is handled and chained which is cool it just makes it very hard to parse if you're not used to thinking this way you'll see what I mean when you start looking at more effect code taking more advantage of the functional patterns in it using things like pipe pipe lets you take the result of a function and pass it to the next one and Bubbles up the error if one of them has an error so instead of writing this code as like con value equals effect. map con value equals effect. flat map stuff like that we don't even have brackets we just have parns and we pass the different functions through one at a time this barely even looks like typescript at this point and as you go deeper and you look at more and more complex effect effect code it starts to look less and less like the typescript we know and love especially once you add crazy functionality like tap just you run a side effect without changing the original value which lets me in the middle of a process like here I have the transaction amount I want to log it but I still want to have the amount for the next thing effect. Returns the argument you passed but let you do other things we're talking about a thing where console isn't even lowercase C anymore they have their own console helper do you see what I mean when I say this consumes your whole app it's a different way of thinking and it's so different that Ethan just published a blog post the truth about effect I had you believe effect was a typescript library unlike fpts Endeavor throw Etc because it shifts work out of the data type and into the runtime but it is a library still it's not exactly accurate my defense I didn't realize it myself until very recently but with effect days around the corner it's time to come clean but what effect really is effect is a language more importantly effect is not typescript effect is a different way of doing typescript that is so different it no longer is typescript the same way typescript isn't JS kind of is but it is not fair to say typescript is JS it's not fair to say effect is typescript never throw is a lot closer to typescript you have to use more of typescript in order for it to work the way it's supposed to but it is much more so typescript the goal of effect isn't to be typescript it is to take advantage of the the ecosystem that typescript has and use it to make more effective language Primitives and make code that is more reliable the goal of all of these projects be it my TR catch wrapper be it never thrower be it the effect ecosystem is to make more Reliable Software things that error less often things that we can trust more because the quality of software is plummeting and AI is not helping it is actually hurting here because it's too easy to write too big of code and people don't like reviewing it and as a result we slow get more and more errors and more and more error prone software tools like everything I'm describing here are how we fight back it's also worth noting this blog post is a reference it's a great reference to an old Guist from our friend Rich Harris creator of spelt the truth about spelt spelt is a language I adore the fact that Ethan made this reference I think it's really cute and a good shout out that is acknowledging the same correct important details so that's why I adopt effect I want to be very transparent with this I haven't had my full effect click moment I've had my click moment with everything else on this page and most of the other things I've talked about on this channel effect is such a massive pill to swallow that I haven't yet and honestly part of why I de to never throw is so that I don't lose weeks of work being nerd sniped by effect I know it's going to happen I know making this video is me getting closer to it happening and I know I'm about to force a lot of y'all to go down this rabbit hole because I don't think you come back from it Ethan if you don't know him has awesome videos on his YouTube channel blew up as soon as he started posting his first handful are deep Dives on effect and as you see I've watched them I've watched them multiple times actually and it started to click I see the value I just not ready to make the full move and thankfully he is not upset in any way shape or form about it when I posted my try catch rapper a bunch of people jumped in saying oh the effect boys aren't going to like it the reason I brought this whole tangent up is the real effect Bros love it because their goal isn't to get everyone using effect their goal is to get everybody thinking about their errors and the only reason you would look at all the things have showed here and be like that's not necessary just try catch throw it who cares is cuz you're not thinking about your errors you just let them happen and when your software gets big enough and serious enough and complex enough it's time to start thinking about those errors if we think about this a little bit differently instead of low to high it's start to end try catch is a great way to start thinking about your errors to be more cognizant of it and to use them and return the right things when you hit them never throw is a great place to go when the layering of your Tri catch wrappers is getting more and more complex you want to make sure the right error gets to the right place and that you know what the hell it is effect is when you want your code to never error again you want to be sure at every single layer every error case is handled and you're okay with writing your own rappers for things like fetch using a complex rapper for something like console and getting super functional programming pilled and going so deep in it that nobody else at your company that doesn't already know it is going to want to contribute to the code anymore I say as somebody who's scared to contribute to uplo thing now think of this like a spectrum of start to finish and if all of this stuff feels unnecessary to you just copy paste my rapper throw it in the code base start using it a little bit more and eventually you'll probably be where I am where you end up here and eventually if the code gets complex enough you'll probably end up there and believe it or not despite me not actually knowing how to use effect properly myself I am the one who pushed it for the upload thing team I am the one who made the introductions to Johannes and Ethan and all of that crew and I'm invited to all of the effect meetups and everything because I know it is the right solution I'm just not ready to learn it yet so uh thank you for getting this deep into a video about error handling deep enough that I don't mind exposing myself if you hit the sub button that'd be cool I don't got too much else to say here just do something with your errors don't throw them things will only get harder if you do thank you guys as always please find some way to handle your errors until next time one other thing I almost forgot to mention that I think is pretty important uh Arthur made a proposal I have a whole video about this one already but I just wanted to bring it up here for a try await syntax in JavaScript so that the JS standard itself allows us to have error value okay as the response so we don't have to do the crazy TR catch nesting just like build a tri function or a tri keyword that you can put a function call right after to not the block I'm okay with this but you can also Define this yourself as I showed I don't think the web standard should go out of their way to inflence something that's literally a 25 line of code helper or a five line of code helper if you're not using types eh I don't think it's going to go anywhere the other proposals were a little more chaotic this one's a lot more digestible than the others were it's a really good effort and I would use it if it was baked in but I don't think it is necessary just my thoughts on it anyways




## The talk that changed the web - 20250430
If you're old like me, you remember the days where new tech was revealed almost exclusively as a talk at a big conference. These talks were the thing that we were all so hyped about. We'd go to the conference just to see the keynote, see what was revealed, try to talk to the people who built it, then watch videos about it afterwards. One of my biggest inspirations for starting YouTube was the fact that the talks had kind of dried up during COVID and there weren't many things like it being posted. I wanted good senior YouTube content. Now the whole tide has turned. When new things come out, they're not coming out at a talk at a conference. They're coming out with a tweet on random websites. The whole dynamic here has shifted so much. But I want to take some time to go back. Want to go back to a talk that changed everything. A talk I think about probably far too often considering that it's 11 years old. But this is a very important talk. Rethinking best practices. Funny enough, also inspired by a tweet. But yeah, this talk is nuts. There is so much we can learn from it here. This is the talk that made us take React more seriously and it really, in my opinion, ushered in the new web. When you think about it, it's kind of crazy that one talk could just drop and change everything the way this did, especially considering that it's a free resource for an open source thing. But in order for me to keep my resources free, we do have to pay the team. So, a quick word from our sponsor, then we'll get straight to it. Wouldn't it be cool to see your brand in a video like this one? I think so. That's why I take sponsors. We now have a wonderful wide variety of companies that we show to my audience of hundreds of thousands of experienced app developers, AI, web, and whatnot. The coolest part, my audience likes the sponsorships. Yes, really. Here's a bunch of comments of them saying just how much they like it. And you can read way more on our website, too. There are a few better ways to show your product to a super technical audience. So, if you're the founder of a company trying to get in front of these devs, you're a marketer trying to figure out how this whole space works, or you're a person that watches my videos that thinks your business should be in front of more people like you, you should hit us up. You might be surprised how cheap it is. Email us today at YouTube at T3.gg. We're running low on space, so hit us up fast. Oh, and if you're a YC company, we do discounts. Anyways, back to whatever that nerd was talking about. Before we get too deep in this talk, I want to set the stage. At the time, the most popular solutions for building your new web apps were two beloved tools. jQuery and another real fun one, Ember. jQuery was the solution for you'd write your HTML. You would bind things in the HTML to JS via jQuery for targeting, selecting elements, and whatnot, and create your Ajax experience through jQuery. Ember was trying a more direct approach where the JS had more ownership and control over the UI, but the relationship of the binding between the two was most of the code you were writing is how does the HTML get updated? How does all of this get processed? All of that. Angular was starting to gain some momentum at the time. And as a certain Nean hanging out in chat is pointing out, thank you by the way, Backbone was doing pretty well. Okay, Ember wasn't that big yet. That's I I have the bias of like the communities I was in were all ember obsessed. So I take your word over mine. I wasn't in the industry yet. I was just learning this for fun on the side. But I'll rerank these accordingly. It's my gut feel that Ember was at least more popular than Backbone. Backbone was like the the nerds solution. But for what it's worth, some fun facts here. You guys know who Ryan Florence is? One of the creators of React Router. He was deep on the Ember community at the time. And the reason he moved off of Ember might surprise you. We'll get to that in a little bit, but this was the like options we were picking before. And don't forget the good old mean stack. Express, Angular, and Node. I'm thankful that the right one of those four technologies survived. Eventually, ME mean became MER and the world became React. But we have to talk about how we got there because the initial launch and announcement of React was not received very well. 2013 React, a JavaScript library for building user interfaces. First impression is that it looks like a PHP language extension. Be nice to see a list of reasons one might choose this over Angular or any other frameworks. The features in the description on the homepage are vague. Consider the architecture difference of React and other similar view model frameworks. Similar to difference between Git and SVN, this actually particularly funny because if you don't know, Facebook doesn't use Git. They use a stack diffial. Other view model frameworks typically track all changes to the view model by explicitly firing an event for every delta change. That in turn causes another delta and so on. Here's a pretty bog standard React component. We've all hopefully, if you're watching this, seen code like this in the past. The important thing to note here is that there is no bindings to events or code that manually updates the DOM here. Well, let's ask T3 chat quick. Rewrite this example React component in original AngularJS code. Cool. So, this is the difference I want to make sure we highlight and understand. In something like Angular, you wouldn't define a component that has a value that then gets rendered. You have to define the behaviors through things like controllers. This controller has a scope of count and it also has an onclick function in the scope. And then we direct that to this counter element that now has these properties. It has the ngclick property of on click. It renders the count. Even this is still a little more declarative than what you would get from other tools at the time. So let's tell it to rewrite this in jQuery. This one will be fun because it has to do actual HTML for it. We embed our script tag. We create the button. We don't actually append it yet though. So we've created this button. And it doesn't exist in the DOM. We just have a button element floating around. It has text which is count on click count++ this.ext count. So we have to manually increment the count and then manually update the content. We still haven't even rendered it. We have to then afterwards append this to the DOM to render it. Obviously Angular was an improvement here, but it still wasn't properly declarative in the sense that we're used to nowadays. I have been asked to do backbone. Interesting. Yeah. So backbone a little more similar to React. We have the model, we have the view and then we create it in the UI here. We create the counter model, we create the counter view, bind it to that model and then append it to the body. But these are the details that matter is we have to create the relationship between the view and the model and then we have to bind it to the UI ourselves. All of these are our concerns and the result is your concerns are sure really effectively separated but this is all one concern. The counter the counter going up and the counter being rendered are in my opinion the same concern being forced to separate it this way between model view and sometimes even controllers sucked but it was best practice. So this is what we were all expected to do because it's the best practices. It's the clean code. It's all those things. And when React came out, it meaningfully challenged that and a lot of people were upset. In particular, a lot of people were upset about JSX and the introduction of this HTML style syntax in the code. They were not happy. A lot of people would even say like, I kind of like what they're doing here, but the JSX thing sucks. No one's ever going to want to use that. I'm confused. Every example is 100 times the code I would write using straight HTML. Is there a benefit I'm missing? Yeah, this is the problem. It's also worth noting if we look at these older examples that a lot of the code we would write would just be in the HTML and we would use these MVC parts to make certain pieces dynamic. It was still a kind of new idea to build the whole UI with your framework. Traditionally, you would just build the interactive parts with the framework and build the rest with your HTML templating from Ruby or whatever. This talk changed all of that. And I hope that this context helps you realize where we were at at this time. React was challenging the norm in a way that people weren't accepting of. And the way that people framed it was, "Oh, they're just doing it wrong. Everyone else is following best practices. React is rejecting them. React isn't following best practices." Pete reframed it as rethinking. Let's hear what he has to say. I'm going to talk to you about a library for creating user interfaces that we call React. And we open sourced this at JSCOM US a couple months ago and we got some kind of sarcastic responses on Twitter. A little bit of snickering, that kind of thing. We weren't really communicating what we were doing. Um so I'd like to talk to you today about the design decisions um around React. Uh what we're doing differently than other frameworks and kind of the implementation that lets us make these decisions and make it really fast. So it's not a tutorial. It's not an introduction. You're not going to learn how to build React apps today. Um, but you might be able to use some of the stuff that we've discovered in your own work. So, I ask that you please just give it 5 minutes. Some of the stuff that I'm going to say um flies in the face of some established best practices. Um, but we found that there are certain best practices that deserve to be challenged. Legendary post, by the way. It's a post from 2012. Give it 5 minutes. Used to be a hotad. Whenever anyone said anything, I'd think of a way to disagree. I'd push back hard if something didn't fit my worldview. I wonder if this was written for a certain co-orker of his. Yeah. The main point here is if you take the time to just think about something for five minutes instead of react to it immediately, you might think very differently than you were initially. It's funny to see a quote from the Rails world and a blog post from that world especially coming in here. But I think it does actually make a lot of sense if you're so ingrained in these best practices. If you're so ingrained in SQL only goes on the server and you can't pass things into it. If you're so ingrained in React only exists on the client, all these things and you're too busy reacting to the thing to think about it, you'll never meaningfully progress. And it's sad that this reactionary culture has become so strong. Stephen said to think I might have contributed in some ways, but it really is important to sit with the idea and digest it a bit before you take your stance on it. And don't worry, I've thought about Flutter for a lot more than five minutes. Anyways, so meet React. It's a library for creating user interfaces. Specifically, we render your UI and we respond to events. A lot of people think of us as the V and MVC. Maybe we're the controller, too, really depends on on how you use it. What React actually is, and they could not have realized at the time, React was the end of MVC. It just took us 10 years to accept it. Even other frameworks are beginning to regret the bet they made on MVC. I'm not convinced Laravel would be an MVC framework if it was made today. Um, but we try to play nicely with your stack, whatever it may be. So, for example, this one's funny amidst the VE drama. But the rest of this holds up really well. We're not opinionated about how you fetch data. People use us with, you know, backbone or or whatever you use for managing your data client side. So, I'm going to talk to you about kind of the initial principles behind React, which is all about building components. Then, I'm going to talk about the design decisions that we made that make React a little bit different from other frameworks. And finally, I'm going to talk about the implementation and how we're able to make um our implementation of of this framework really, really fast. So, I'm going to start with building components, not templates. If you want to think about this cynically, we're talking about mixing markup and display logic. And a lot of people completely disagree with that. Oh man, markup and display logic. Those should never ever touch. That's such a bad idea. Who would ever Oh, that's what we all do now, isn't it? Huh? Starting to see where we're going here. So, this is I'm not sure if you can read it, but this is kind of what React code looks like. Um, this is from our to-do list example on the homepage. Good old class components. What's funny is this code will still run today if you use the create class helper that they posted. You can actually run this code on the server. I did that for a video a while back. Um, it's all about building reusable components that know how to render themselves into the DOM. And if you're seeing that ReactDOM part here, this was prejx. So instead of calling div with a tag, React.dom.d first argument is null. That's the properties you're passing it. So this would be like a class name or whatever. React.dom.h3 H3 also not getting any custom properties but it has a child of to-do to-do list actually does get custom properties this is its own component gets this state items and then we have another child here reactdom form which is just a form tag onsubmit this handles you get the idea but like I said I'm not going to go through this line by line because this is not a tutorial this is about design decisions but we all like separation of concerns right this has kind of been a fundamental tenant of building apps on the web ever since like the PHP apocalypse of 1999 where we were putting MySQL fetch row in the middle of our table rendering code. Yeah, I'm sure that we would never make that mistake again of calling SQL directly in our components. That's not a thing we would do in React. Definitely not. But let's talk about what separation of concerns actually means. We're talking about reducing coupling and increasing cohesion. Coupling and cohesion. They're very they're two very important principles of software engineering. But more concretely, if you want to implement a feature or fix a bug and you make a change to one module, be it like a class, common JS module, function, a packet of functionality, how often do you have to go to other parts of your codebase and make changes in order for it to work. And these sorts of cascading changes um are symptoms of coupling and that's what makes software hard to maintain. I agree with this so hard it's actually unbelievable. My my research team is concerned that me showing this might make people concerned. This isn't insecure. This using a tag template literal here. So we're not just blindly passing slug in. SQL here is a function. Its first argument is this string and the second argument is an array of things that get stuffed in at those points with additional checking. So this is safe even if your gut when you look at it is that it is not. This isn't just a string being passed to SQL. This is being called as a function where all of the components are different arguments. So the SQL function can safely parse it. So don't don't go nuts looking at this and be like, "Oh, it's so insecure." Your own insecurity is showing. Thank you, Gabriel, for making sure I make that disclaimer. Anyways, I have so many thoughts on this coupling bit. I'm going to let Pete talk a little more, but then we're going back to diagrams. I have a lot to say. Cohesion is somewhat related as well. Um, and that's the degree to which elements of a module belong together. So, if you've heard of the single responsibility principle, um, basically grouping related functionality into modules and not putting extra crap in there. Um, you know, kind of the litness test is like, does this class make sense or does this function make sense or is it doing a lot of stuff and can you refactor it into other pieces? So, I think that templates encourage a poor separation of concerns. And it's not just templates specifically. It's anything that tries to augment the DOM or HTML with some sort of functionality to make it better at building apps. So I think Angular directives also fall into this. And it's not just client side either. It's um some server side systems as well like Ginga and kind of traditional templating solutions. Now how can I possibly make the argument that this is a bad separation of concerns? Right? You've got your display pl um code in one place like your your template and you have other code in other places that does that do different things. Now normally your controller and your template are tied together with something called a view model and some some frameworks actually the controller is almost the view model. So you pull some data out of your database or with like a an Ajax call or something and you construct a data structure that looks something like this. So if I wanted to show a product grid with the example that everyone uses, which is alternating row colors, um in some uh templating systems, you have to add a table row color attribute to your view model. And we say that that's fine because it's a view model. It's not the model and it's not the view, it's in view model. Now, the problem is this tightly couples your controller to your template. So, so if I want to make a change to how I render those row colors, um, while it feels like I'm making a change to the template, there's an implicit dependency between the template and the controller because they've both agreed on that template uh, row color attribute in my example. So, you actually have to make cascading changes throughout your module. So, it's not real um, decoupling. And I think that the display mod uh, the display logic and markup are inevitably tightly coupled. Yes. Just yes. Let's diagram this a little bit. Let's say we have a feature that we are building. Let's say, I don't know, we work at a streaming company called, I don't know, Twitch. You might have heard of it. There's this weird guy, Theo, who used to work there that makes YouTube videos that he films live on Twitch. Don't want to be like him, but Twitch is a thing. It exists. Let's take a look at a given feature on Twitch. Let's think about Twitch chat. Twitch chat has a lot of components to it. I'm going to remove that for now. Let's just think about the individual boxes for each of these parts. First box here, we'll call it the styling. So, this is the CSS, maybe CSS andJS, whatever you're doing. The styling is one of the parts of building this feature. There's also the markup HTML. This is the actual elements on the page that are rendered. There's also the JS logic. And this JS logic determines where the messages go, where to scroll to and from, what gets bound to what, etc., etc. And this JS connects to a websocket. The websocket is the thing that pushes down the new messages when they happen. And those come from a service. I'll call it the back end. The back end is its own crazy complex thing with lots of different layers here. The point being when a new message comes in, it comes in here and then has to go through all of these layers before the user can see it. So the message comes and on the back end, somebody hits an API that makes a new message. It gets sent down the websocket, the JS receives it, updates the HTML, the styling applies to that HTML, and now the user can see it. Now let's build another feature. Let's say the Twitch sub tracker, or I'll just say sub alerts. Sub alerts are the thing that happen when someone subscribes on Twitch. So, whenever somebody subs and they're dropping money to support me and the team, these little alerts pop up here. Sure, UI wise, these actually look quite a bit similar, but it's not just the UI where they're similar. Sub alerts, they need to have styling, they need to have markup, they need to have JS logic, they need to come down via websocket, and believe it or not, they also need a backend of some form. When you look at this, you might think, "Oh, yeah, if all of these features have the same boxes in them, we should just separate our app accordingly. We're going to break it up by all these different layers because all of these are their own problem. We should separate them accordingly. We should have the style stuff all live by itself. We should have the markup all live by itself. JS, websocket, backend." Now, it's very clear when you're in the backend world versus when you're in the styling world. This was a mistake. Anyone who defends building this way is either bad faith or a bad dev. This was wrong because adding a new type of message to Twitch chat means I have to now go touch all of these layers. I have to spend a whole bunch of time making one change in each of these layers. And chances are these layers aren't just layers. These are all their own teams. So I have to get my change approved by the backend team. I have to get my change approved by the like this might still be the backend team, but it's probably a like services team. This is probably more like DevOps type stuff. Then I have to get the JS logic approved by whoever's in charge of like the web bundler and build team. Then I have to get the markup approved by who the knows. Nobody believes HL is a real language, so whatever. And this is owned by design. So design Now, whenever I make a change, I either need to get all of these people to go do the thing or I have to go do all of it myself and get them to approve it. This is bad. This is dumb. The way things work now, and pretty much every company has moved this way. And to Facebook's credit, they were very early with this. They separated things entirely differently. The separation at Facebook, it's like this. Obviously, there are things shared on different layers. Not going to pretend otherwise, but the feature owns all of its code. Instead of having five different files for the one feature all living in different systems, sometimes in different repositories and code bases entirely, they do their best to get all of the concerns in their own box so that when I'm changing Twitch chat, I'm changing the Twitch chat code. I'm not changing the backend code, the websocket code, the JS markup styling. I'm changing the code for Twitch chat. And this makes so much more sense, too, because when there's a bug, you just look at the vertical that the bug exists in, and you'll almost certainly find it. When you're adding a feature, you live in this box, and it's going to go much better. The only reason this model works is if your team or company is small enough that everyone on each of these layers knows each other well, or maybe the same person is these three layers. That's fine. But as these code bases get more complex, horrible things start to happen. like someone makes a change to the back end for sub alerts and somehow this breaks it over here and then propagates up and now your UI in Twitch chat is broken because someone had a bad assumption on how the backend for a different feature should work. And this was just life in separation of concerns. If your concerns are separated by technology, not by feature, a tech change can break your feature. An unrelated tech change can break your feature and this is unmaintainable because what ends up happening is crazy relationships get built between all of these things. The websocket layer for Twitch chat gets used for the markup and sub alerts. The styling for Twitch chat gets used in the markup for sub alerts too. The markup for sub alerts might get used in the styling for Twitch chat as well because it sometimes renders those there. The backend here might change the templating for something else over here. These horrifying bindings between the two are where the work ends up being because once you've drawn all of these lines separating the you've made it harder to go over them. You've made it harder to go from one layer to another. Now I have to look at eight different files just to make Twitch chat appear the right color. It's hell. This is also why technologies like Tailwind one because I don't have to hop across a barrier to see the styles and see how things are working in my component. This style of separation is a dying I I guess I I was going to instinctively call it a dying art, but that implies that there is some artistic merit to it. There is no merit to this way of design. There's a reason the people who are really big on this don't write code anymore and just write books complaining about how we're all wrong. There's a reason that a 70some year old dude loves to tweet Shrek gifts at me instead of writing real software. Oh, Bob. Anyways, thankful as always for Meta, Facebook at the time, for being willing to challenge these best practices because a real company quickly realized that they don't scale for So, if you're building apps on the web that manipulate the DOM, you have to figure out where in the DOM you're going to to change and what parts need to be updated and what nodes are receiving events. But the good news is is that this is highly cohesive logic. So the the JavaScript code that that drives your UI and the markup that displays it to the user are both doing basically the same thing. They're handling user events and they're rendering data to the um to the user. So I would like to argue that templates separate technologies and not concerns. It's not a real separation of concerns. It's a separation of technologies you're using to implement the same concern. And unfortunately the way that we're doing this today, they tend to be deliberately underpowered. So, I'm going to show you a couple of examples of what I mean by being underpowered. And the first technology I'm going to pick on is handlebars. Sorry, Tom. So, first of all, handlebars is an excellent implementation of templating. It's really fast. It's really easy to understand and it drops right into a lot of different frameworks, but it's an implementation of kind of a classical way you build templates. So, the abstractions you have available are fairly primitive. So, the the easiest one to think of is partials. If you want to reuse a template, you tend to use partials. And a partial basically takes one template and embeds it in another template. Now, that embedding puts all of the puts that template in the parents scope. So, if you want to make a change to a child template or a partial, you need to track down every single call site that uses that template and make sure that you don't break anything because there isn't a a strict contract between the partial and the template that includes it. This is going to be a recurring theme of my talk. Uh, another example of an underpowered technology um in here is each. It's like it's like doing functional programming, but you only have map, you don't have filter, you don't have reduced. It's it's hard to do branching. and frameworks have. This is funny because this is still going on to this day where we have new things like spelt and solid introducing custom elements to do things like mapping and for eaches in the markup because these are concerns of the logic more so than the UI in the traditional sense like the number of items in the list isn't a thing that should be your HTML's problem. That's a JS problem. That's a problem in the thing that's providing the values that you're rendering in the list. Solved some of these problems that I've mentioned, but they're kind of hacking around the idea that we want to to pull certain parts of our our display logic apart and artificially separate technologies. Another symptom is if you're continually inventing new concepts. So, JavaScript is based on a a rich history of of um vondoman based programming model lang or programming languages and has kind of battle tested philosophies, right? Like, did you find the meme that fast? God damn dumb. Yeah, this classic in JSX. It is JavaScript minus the HTML part. Condition content other condition other content fallback. I even prefer to make this a function and if condition return content. If other condition return other content bottom out return fallback spelt it own thing view yeah view we understand how functions work. It's very clear prototypical inheritance most people understand. Um, but when you start to build abstractions on top of, you know, HTML, you start to have to invent a lot of things in order to get to the level of expressiveness you need to build real applications. So now I'm going to pick on Angular and I just pulled this this quote out from the Angular docs and I've highlighted every concept that they've created that I'm not I'm either not really sure what it means as a new user of Angular or it sort of exists in JavaScript. Um, and it's based on the idea that they want to augment HTML to support two-way data binding. And in order to do that, you have to rethink the idea of scopes. And if you you rethink the idea of scopes, you have to rethink the idea of composability and modularity. And you start building directives and transclusion and all this other stuff. I don't recall if he makes this exact point, but I will in case he doesn't. If you insist on separation of concerns, you're still going to have to rethink a ton of things, you just have to rethink the technologies themselves. And if we have technologies that we understand that are relatively good, and those are running against what we know as best practices, why are we hacking the technologies to match best practices when instead we could throw away our arbitrary concept of best practices in order to take advantage of what the technologies are actually good at? That was a revolutionary thought well beyond the React and WebDev world. The idea that our insistence on breaking the tech to follow these arbitrary ideas of clean code was the wrong path and we needed to go back and rethink how we built these relationships and bindings between our technologies. And he's right like the amount of concepts and like words that were invented by Angular to try and communicate these ideas was just kind of insane at the time. It was so hard to get your head around. But I think the framework cannot know how to separate your concerns for you. It should only provide powerful and expressive tools to let you do it. What I mean by that is that a lot of frameworks force you into this MVC style of development. And MVC is great. However, your controllers tend to get really fat or maybe your models get really fat if that's your style of building or maybe even your views. The reason for that is the framework is telling you how to separate your components and the vocabulary you're speaking is that of the framework and not of your application. So we want to change that and we think the best tool for this is a React component which is a highly cohesive building block for UIs that's loosely coupled with other components. Coupling and cohesion. This is the key piece. If we go back to the code here, let's edit this again. I was going to take it and make a new thread here. I'm going to ask it to do it in Angular again. Now render four of them. Since they are still separating like this, it's not as bad because we've created this concept of a counter directive that we can then mount multiple of in the UI. What if we want to share counts between them? When any one count hits 10, reset all of them. Now things start to get a little bit more chaotic. The ng repeat directive. Oh god. Yeah. Like you have to write in the markup these hints to tell it what you want to do. It's kind of chaotic. Yeah. ng repeat counter encounters on yeah god no all starts to fall apart fast constant theme here the big piece the thing that like this really drives is when we get rid of this arbitrary idea of separation of concerns the best reward we get for it is composability and we're about to go deep on that part we want you to use components to separate your concerns with the full power of JavaScript and not a crippled templ templating language so I'm going to pull up that example I I showed earlier briefly and just highlight a couple of things. We wanted to to reuse some functionality. So in React, we created a function, which is how you reuse functionality in JavaScript. And they went way further with that with hooks much later on, like six years later, which is crazy to think that they were able to have a similar level up with state. I almost want to do a whole separate video like the forgotten magic of hooks. Like that moment was crazy. components let us make composable UI where an element could own its own life and be reused and mounted by something on top and know that it won't be screwed with in that way. Then hooks let us do the same for state which is just so crazy. We wanted to reuse um we wanted to reuse some code um and pass different parameters in each time and have it render to to the DOM. So we used composition and we composed a todo application out of a todo list object component. Again this is just regular JavaScript software engineering principles. And we also have the full expressive power of JavaScript. So for example I wanted to add one to uh to the length of this list when I render it. I didn't have to jump through any hoops. I just put a JavaScript expression in there. Collocating your display logic with the the logic that generates the markup. That sounds like it's going to be a mess, right? To be fair, I've seen some messy code that is only possible because of the flexibility of React, but I've also seen messy code that is effectively necessary because of the separation of concerns and other solutions. So, it yeah, my answer to that is just don't write spaghetti code. We're software engineers. We can shoot ourselves in the foot and I'm sure that everybody's taken down something in production before. You can keep your components small because we're trained to do it. We do it all the time with our other JavaScript code. Why can't we do it with our front-end code? Only put display logic in your components. I'm not advocating putting all of your your model validation code and fetching and data access in components. You might want to put them in third party libraries that have some sort of uh bridge to to your components, but only put, you know, logic that makes sense in your components. And this kind I will say like to this day, I think people screw this up. If you were to audit any of my codebas, especially like the T3 chat codebase, I would guess 80% of function definitions or more aren't components and live outside of components. That's a a gut feel guess. I'd have to like actually audit it to be sure. I I am very deep in the habit of break out the function, define it, and then call it in the component. Makes everything way more simple. If you try to think of React as the best way to compose the UI and behaviors, but the behaviors themselves are encoded and functions separately, it makes reasoning about your React application way easier. And it's something you can't really do in other frameworks at all. Libraries that have some sort of uh bridge to to your components, but only put, you know, logic that makes sense in your components. And this kind of reminds me of that Spider-Man quote that is always repeated at at software conferences. With great power comes great responsibility. Another thing that people think about when you're talking about generating DOM in JavaScript is cross- sight scripting. Another fun point from chat. Uh something tells you that I would either puke or laugh looking at some of the Angular code you've seen. Almost certainly I would go some of the old Angular code I've looked at has made me question if I even want to be a software engineer. So a lot of times people do string concatenation to generate markup and then insert that in the DOM. Um we've created a very lightweight library that we call react to make generating a description of the DOM very easily. This is calling a method called a which generates a a link. You pass your uh JavaScript object of of attributes in and then um a child which is the second argument and that can be you know other React components, other React DOM calls, strings, collections, that kind of thing. And this makes it really safe for us to generate descriptions of the DOM. This is one of those points I don't think is appreciated enough anymore. Cross-ite scripting was a very real problem. So imagine if instead of this being use state, this was use user data. Rename this from count to user data. Kill the setter. Then user data is something like sure name Joe 30. Kill the function there. Make a quick like div. Hello, you are whatever. This all hopefully makes sense to us. User data.name, we render it. User data. Cool. What if user data.name wasn't something like this? What if it was script xssx? Love that they knew what I was doing. If you assume that the people who made react are clueless, you would be fairly assuming that what this will then do is render as HTML in the page that does this. And now we've broken your React app. Now if I update the database to have a script tag in it for my username, I can hack you. Good old Bobby Tables. Feel like half my videos nowadays have a relevant XKCD. This is the classic one. Did you really name your son Robert drop table students? Oh yes, little Bobby Tables. Well, we've lost the year student records. I hope you're happy and I hope you've learned to sanitize your database input. Yeah. So at the time that sanitization would often happen in the database layer. So we'd make sure we didn't have script tags or SQL or whatever make in a state that it could make its way into the data so it could then be rendered and then this happens. If for some reason you actually want to do this like user data.script here, you can. But you have to dangerously set inner HTML. They put a special flag in for this because React won't do it for you. If you really do want to do this, you can. Every other framework, that's just how it behaved because you would pass it HTML and it would render that HTML. Since this isn't HTML, it looks like it, but it's not. This is the equivalent of React DOM. And we're calling it with these elements. Obviously, if we're calling it like a function like this, you would expect this to sanitize whatever it's putting, not just render it as HTML. But JSX, all it is is a syntax to call that function. When you do div like this, this is calling ReactDOM.d. It's just functions in a different syntax. And this is what's so cool about React is we can use the mental model we already have for HTML. And JS, it handles a few edges for us and gives us a composable format to safely write scalable code. It's so cool. And I think especially nowadays as we like get more and more frustrated with certain things that happen in the React world, we forget about the magic of what this did that so many of the problems we were used to dealing with every day just kind of vanished all of a sudden. Next thing you're thinking about is probably what about working with designers. We're not the first people to come up with the idea of generating DOM using function calls, but a lot of times it's a little bit cumbersome to work with. You know, we've actually found that if you're just trying to balance parenthesis visually, it it can be kind of annoying to do that. And also, designers um tend to not like that. I will say to this day, designers tend to not like working in React. This kind of goes back to the separations thing earlier. It was very common back in the day for you to have designers who knew CSS that would own this part and the engineers building the feature would just build the markup and the JS layer, fight the services team to get these parts and then let the design team take over and actually write the CSS for you. That was how a lot of companies worked and it was awful. So, we built JSX which is an optional pre-processor. Um, it's a syntax extension that lets you write code that looks like this. and trans kind of funny to label JSX as optional. No one is writing React without it. They did this because the push back initially to JSX was so absurd that they wanted to make sure they didn't want React to die if JSX was the wrong bet. But JSX was the right bet. It won it into code that looks like that. And that's all it does. We're not reinventing E4X. There's no runtime that supports this. We're simply taking expressions that look like HTML and turning them into function calls. So you get all the semantics of JavaScript. You get the same line numbers as you would um before the transformation. So you can actually run your linting tools on your markup and you know get all the same rich debugging information that you otherwise would. And with JSX, we've just found that it's very easy for designers to contribute code. Um I personally don't want to spend hours tweaking the box shadow of all of my elements. I'd like to just have my designer come in there and tweak them for me. Um, and so we've actually had found that this is very successful. And we think of it like this. It's the accessibility of templates and the power of JavaScript. The accessibility of templates and the power of JavaScript. You can use all this the regular JavaScript code to generate these because they're just function calls, but it looks kind of like markup. So you can go in there and and and kind of still have your flow. So React is all about components and it's not about templates and that's how we want you to separate concerns. Oh boy, here's where the controversy started. If you want even more info on this one, the React document is full of it. This is the key design decision of React. Whenever something changes, the whole app effectively rerenders. And that just sounded impossible. Like JavaScript's so slow. Why would you ever do that? Why would you check everything? That can't work. And it it can't kind of. But I'm sure Pete helps us understand better in just a sec. I'm going to talk to you about what I think makes React awesome. And the key design decision that makes React awesome is that we basically rerender your entire app every on every single data change. We all know that building UIs is hard and that's because there's so much state. You've got lots of UI elements. Designers can't make up their mind. You ship one one version, the AB test comes back and you want to ship another one. um crazy environments. Um if the DOM is up for a long time, you may write to the DOM somewhere and forgot that you wrote there and then, you know, you forgot to keep track of it. Um and we've identified that data changing over time is the root of all evil. Yep. And it's really hard for us as engineers to reason about this. And you know, we're not the first people to think this up. Actually, Dyster thought it up first. Our intellectual powers are rather geared to master static relations. and our powers to visualize processes evolving in time are relatively poorly developed. What he's basically saying is that it's really hard for us to think of processes over time, but it's fairly straightforward for us to trace the flow of a program. He continues with, for that reason, we should do our utmost to shorten the conceptual gap between the static program and the dynamic process to make correspondence between the program and the process as trivial as possible. Now, Dyster's advice is that we should take processes that go over time and build abstractions that make them look like um programs that execute in a single point of time. And that's what it was like in the '9s when we were building server rendered apps. We'd hit the database and we'd render a page. And let's say it's a, you know, a to-do list example because that's the another theme of this presentation, I guess. You render the list of items and count and when you submit another todo item, you just select from the database again. Your count and your list are up to date and you just refresh the whole page. It's very simple. We don't have any of these problems with data being out of date and stuff. So, when the data changes, React does this. React rerenders the entire component. There's a certain phrasing that has popped up a lot in the React world. Changed a bit over time, too. gonna just write it out here and see if y'all know what I'm talking about. The UI is a function of state. If you give this function the state, the same UI should always come out. If you change the state, a different UI should come out. Rather than each element in the UI relies on another element and another state change that happened somewhere else and whether or not this happened before the other thing, none of that. You give the function that defines your UI, your state, and out comes the UI. As a functional programming nerd myself, I will die on this hill. This is the only correct way to write software. Everything that does stuff differently either has a really, really good reason and sucks to work in, or it's just wrong. It has to be one or the other. And most of the applications we're building today can be boiled down to this. That's why PHP is having a resurgence because if we treat our web apps that are mostly CRUD apps grabbing stuff from a server, the UI is the template being filled out with the data from your database. That's really easy to do and work with. React brought it a layer up so we can treat our ideas and treat our UI in a similar way. What this means is when you call this function with your state, a new state doesn't come out. We don't bring out new states when you call state. We don't bring out changes to other UI elements. This is a singlestep ordering. Your entire React app becomes a function call that you call with the state and then it might over time have new states happen. But rather than the state manually binding to some specific element somewhere on the page, the whole page will just change when that state changes. This basically makes it really easy for you to think about what state your application is in. Set another way, React components are just item potent functions that describe your UI at any point in time, just like a server rendered at. Again, because they're just functions that take some parameters and output a description of the UI, they're very easy to unit test. So, here's a here's a very brief example. This is a link that I can click and the count goes up. We've isolated the mutable state in a get initial state method and we've isolated all the state transitions and state and set state methods. And set state is basically how you tell React that the data has changed. And it doesn't matter where your data came from. We've done bindings for Meteor that are 14 lines, bindings for Backbone that are five lines, that kind of thing. But you'll notice that render describes how the UI looks at any point in time. I can't help but call out the fact that he said that they created bindings for Backbone and Meteor so that you could use this and get the state from other more popular frameworks. All of which got killed and eaten by React. So nowhere do we look in the DOM and find where we should update the count or where that node lives or do we we don't even set up a a binding between the the state variable and the DOM. And this is actually really simple because it's so declarative. Every place we display data is guaranteed to be up todate and we do it without magical data binding. If you started working on the web after React, you don't know how big a deal this was. It was so easy to have things in your UI that would not get updated even though the data changed. You would update a variable in the JavaScript and the UI would still show the old value because you forgot to create the binding to that element to update the text. If you forgot to do the button.ext call here or this number was rendered somewhere else as well like let's say we took count and put it in two places instead of just in this button but we forgot to update the other place that that count exists. It's so easy to end up in a broken state with these types of things. Even if you just copy pasted this code like I'll show you how easy it is to break this. So watch what happens. We have button one and two. I click this it increments button one. What happens when I click this? goes to one, right? Nope. Goes to 13 because we forgot to update the other element in their sharing count. So, whichever was highest when you click it is going to be the highest value plus one and never update properly. It's so easy to innocently make mistakes like this with jQuery. hilariously easy because the update of the count and the update of the component in the UI are two separate things. These being two separate steps you have to take doubles the likelihood you screw something up. I would say more than doubles, probably 10xes it because this is what you're thinking about when you're thinking about the logic. You're thinking about the count plus. You're updating the value. Then the UI has to be updated separately. If you remove the need to do that, the UI is a function of the state, in this case count. This whole abstraction can be removed and the entire class of bugs goes away. React has a different problem that's much less common and a little bit more annoying, which is things updating too aggressively because any state change will trigger an update. It is basically impossible to get your React code into a bad state where the UI and the state logic don't match because the UI is just the result of that state without dirty checking the model which can be expensive. And of course, this is a modern framework. There's no more explicit DOM operations and everything is declarative. This seems like a pretty bad idea, right? It'd be great if we could do all this declarative work, but rerendering all of the the DOM nodes on your page is way too expensive. So, we decided to build a virtual DOM to make rerendering on every change fast. I don't want this to become a virtual DOM video. If you've watched my other stuff, you hopefully understand how the VDOM works. I'd point you at a specific video, but I don't think I have one. It works well, though. The fun story I hinted at at the beginning with Ryan Florence. This is actually I don't know if this is something he has shared publicly, but we chatted about it. It doesn't seem like something he wants hidden. He used to be deep on the Ember world. The main reason he moved to React from Ember was performance. He had so many problems where they'd have like an input field that you would type and expect the UI to update and if the UI updated from the input field, you would get the sticky keys feeling where you're typing and it freezes and you don't get all that data. Worst feeling ever. as long as you're not using a controlled input, React made that way, way better. And even if you were using a controlled input, it was still significantly better than alternatives at the time. And we've built demos that run at 60 frames per second in non-jit um iPhone 5 web views. And that's the environment that a lot of, you know, phone gap uh users would use. The bottleneck is almost never the diffing. It's always the DOM operations. Now, our React apps have gotten so big and we have so many elements in them that the diffing can also be a bottleneck. If you've seen React scan, that's not checking how often is the web page content changing. It's checking how often is React double checking to see if it needs to rerender or not. So, the virtual DOM lets us do some other cool things. So, we can run in Node.js. This is also a big deal. This is why server rendering and like the whole server component arc we're on now could happen because the virtual DOM as a layer can update the HTML on the page but it can also render to string where it actually outputs a string that you could then use to generate HTML page and the workings for that were there 11 years ago before any of this was a thing they were actually building. We're talking about not breaking the web in the last presentation. And I think there was mention of Google not crawling single page applications that are all rendered in JavaScript. So what a lot of people are doing today is they're running Phantom.js. They're running their JavaScript and then they're dumping a static HTML file and serving it to Google. This is funny because that's actually what Remix was doing even like three years ago. But yeah, the the classic spin it up with Puppeteer or something like that. save the HTML output and then use that as your static page. That was the standard and React kind of rethought that as well. It's a side tangent. It's way less important than the other things covered here, but it's cool that the groundwork was there day zero. What we do is we can actually render um an entirely static HTML page um without a DOM on the server. So, it's actually really really fast and you can serve all of your production traffic with it. So, there's obvious SEO benefits here, but we can do some other cool things, too. You run the same code on the client and the server, and you send down some markup. React boots up on the client and looks to see if markup is there. If the markup is there, all it does is attach event listeners and initialize itself. So, you get a faster page load experience. You're I God, I miss the days where like hydration was considered the faster option, which is kind of crazy because now people are like going insane saying hydration is the root of all evil and whatever. Uh, funny enough, Mishko from the Angular side, now the quick side, has made that the war he's fighting when previously it was the big benefit over something like Angular. It's just kind of crazy. I don't even know if they had the term hydration at the time. users will get the speed and and of being able to interact with a you know static HTML page and by the time the JavaScript is downloaded the interactivity will will pop in for you. So you could imagine the first page load experience is a static page. You start typing a comment in a comment box and by the time you're done typing the comment and you press submit the JavaScript has loaded in the background and you're ready to go. It's completely seamless. There's some other cool things we can do. Um, because you're building components that separate your concerns and represent your application structure, we have knowledge of what your application looks like and what it's going to do. So, your components tend to reflect the structure of your application and the information architecture of the UI you're showing. So we can say you know hey if the if a large subset of this virtual representation is about to change maybe we should use a different method of emptying DOM nodes than one for a smaller subset of the of the DOM. This had another really big convenient benefit which is it previously if you wanted to separate out the heavy JavaScript part from the pages that didn't need it you would manually do that and make sure to include or not include the script tag on the pages that did or didn't need it. Since React doesn't have the weird bindings between everything and the component model is the root of everything, you can have a lazy component that only fetches its JS when it is rendered. That's so powerful. It means if we go back to like my diagram here, if you're in normal Twitch chat, you don't need any of the stuff here. So you can just not load this whole part and then when sub alerts renders you can load it all then and not have to until then. That's so cool. That was not even kind of viable with these more blended MVC models. That level of separation would have to be done on every single one of these blocks by hand and that's just gone now. Um render your interactive UIs all in the same just create a component that renders to a canvas instead of to the DOM. That was also a fun point. the you can just render to canvas instead became a whole different category of web applications and react 3 fiber and whatnot. They let it run in a web worker that ended up not being the right call. Let's hear the key takeaways over the the boundary into the web worker and it sends DOM operations back over to the web worker. Like I said, not sure this is a great idea, but it has some cool implications. So, let's talk about the key takeaways that I just mentioned. I want you to build components, not templates, because I want you to separate uh your concerns in the language of your application, not in the language of the framework. The only template focused thing that's gotten any traction since React started getting traction is HTMX. And even that's like an acknowledgement that your template doesn't do enough. We need more components one. It's over. It just it's over. Components are the right way to structure our UIs. Even Apple built their whole new UI layer largely inspired by React. Swift UI is so close to React component. It's actually kind of funny. It's really hard to think about mutation. So just throw out your old application, rerender the whole thing, and then have the implementation take care of it for you. And that implementation is a virtual DOM. And it's actually not very complicated and extremely fast thanks to the great JavaScript engines we have today. So, with that, um, I'd like to say thanks to to JS Comp for having me. That's it. What a legend. This I hope you guys can now understand why I thought this was worth dedicating a video to 11 years later. This isn't your normal talk. This isn't just a, hey, here's React and its features. This changed how we think about web development, if not development as a whole. The component model is something we're still learning from today and I'm excited to see 10 years from now where we will be. Thank you to Pete. Thank you to the React Core team. And thank you to everyone who green lit this and made it possible. The web that I know and love started with this talk and I'm so excited to see where we go in the future. Until next time, peace nerds. trying to decide what's more tedious, dealing with someone who can't acknowledge React was wrong 20% of the time or someone who can't acknowledge React was right 80% of the time. Then he followed up, "It's pretty clearly the latter. I only need to be reminded of Hypermedia, web components, and DHH.




## The web needs Chrome. This is bad. - 20241126
before you ask no this one's not clickbait it's so real that I'm filming this at my parents house because I was on vacation but I thought it was worth covering the government's actually looking like they're going to try and make Google separate from chrome entirely and this could impact the web in ways that none of you are considering not even you Firefox Fanboys this isn't like oh Chrome might die or oh they're just going to go somewhere else this is a death sentence for the web and it's really important you understand which is why it pains me that you have to watch an ad first but if if you can we'll be back in just a second me we're doing a lot more of these breaking news videos and as much as I love the current sponsors believe me I do not all of them are down to get these really quick turnaround times so if you're okay with not approving a script way ahead and getting a discounted rate in order to get into these breaking news videos hit me up YouTube at t3g anyways this is the proposed final judgment from the US courts on what Google should or shouldn't do and it's full of ver ifying things if we look for Android for example in here they say that Google's manipulated its control of chrome and Android to benefit itself Android is a critical platform which search competitors rely on and for which Google has a myriad of obvious and not so obvious ways to favor its own search product you get the idea and they even call out right here Google should divest Android so uh if you know anything about Android and where it's at financially you know this is a death sentence like Android does not make enough money for Google to care this is bad bad the department of Justice's argument here is pretty straightforward Google is a search engine but they own other things that rely on search engines so isn't it unfair that they can make their search engine the default in those things I kind of see the argument there but I think it's much more complex than they are letting off Google's money doesn't come from their search engine surely it's how they blew up and it's the name that they're most known for the thing Google actually makes the money off of is primarily their ad platform that and those ads aren't just served on Google although I'm sure they make plenty of money there from it these ads are served all over the web and the goal that Google has with products like both Android and chrome isn't to make their search the default it's actually something I would argue is kind of for the benefit of all of us and I know hot take Google good guys I'm not a big Google fan I have a lot of content ripping Google the shreds for the most part I don't think we should assume good intentions from them as a business that all said Chrome has been an incredibly positive platform for the web if you're anywhere near my age you probably remember the days where we had to install Google Earth Google Drive Google music and all of these Google apps on our computers you probably also remember how bad and janky all of those were Google had a vision though they wanted the web to be the platform for everything and that was not going to happen with Internet Explorer and it probably wasn't going to happen with with Firefox either that's why they made Chrome their goal was pretty straightforward make the web good enough that you don't need to install apps anymore and I think that was a good goal is just put them in this awkward position now where the browser which only had the goal of pushing the web forward is Now the default for so many things both within and outside of Google Chrome one I don't think we're here to argue that it is the most popular browser ever made by a large large margin I would make the argument Google's done a surprisingly small amount of flexing of that Monopoly chromium is still fully open source and it's used for everything from Microsoft Edge to slack to Spotify to teams like all of these products from competitors rely on chromium and electron as the method to provide their own software and the way Google's built this if anything has kind of opened their Monopoly up so other businesses have an easier path forward to comp with Google I can't imagine competing with Google on something like a map product or in my case a file storage product if we didn't have a dynamic web that was ready to take on these types of loads and behaviors and that's why I'm concerned to say the least here and this is also only talking about Google and their immediate impact on the web and the things around Chrome but there are some other immediate ways that they are helping these other competitors as well this tweet makes a really important point this is in response to somebody showing specifically that the doj called out Google needs to divest Chrome they also suggested they divest Android which is insane for even more reasons we'll get to in a minute but this comment I think is pertinent and worth understanding this would be a huge mistake Google's also developing chromium the open source part that serves as the basis for literally all other browsers except for Firefox which Google mostly funds and Safari and remember the fact that Safari also gets a lot of money from Google paying for the exclusive deal on iOS for the default search engine You could argue that should probably be illegal I would get behind it either way but Chrome isn't like money from Google is going to fund competitor products here if you kill Chrome you've reduced Google's reasons to make a better web and to make better web browsers why would they keep giving money to Firefox why would they keep giving money to Apple you've disincentivized them continuing to fund competition if you make it so they can't even be there in the first place there's also a good call out here that forcing them to sell Chrome fully kills development on a lot of important things that they've been pushing from web GPU wasm Progressive web apps and a lot of the other things admittedly some bad ones too like web components but overall there was a lot of good work going on from the Chrome team pushing the entire web forward the amount of progress we've seen since Chrome came out in any given year trumps the 5 years before it there just wasn't much work happening in web standards and it's gotten significantly better since Google started taking it more seriously and to say otherwise just kind of kind of shows you haven't been paying attention to what's going on Firefox is a fine browser but Firefox is in a constant game of catchup to keep up with the awesome new features and tools that Chrome is introducing and helping get standardized here's a fun thing that just got like to me I didn't even know I I I I hate to do it but I'll take any opportunity to dunk on Firefox a bit it's a garbage browser it just doesn't work apparently they have a document where they call out which web standards they don't like enough to implement and they say that they think HTML Imports for example are a bad thing so they refuse to support them or like private steel token apis it's funny that they've called out all of these things they don't want to support even though they're part of web standards oh Firefox and here's where things get even sketchier the amount of money that's being asked for here is around 20 billion million doar who the going to buy that like it just makes no sense for any business to to take this expense on to spend the money on this purchase and then maintain and keep spending all the money to keep improving the platform the harsh reality is that most competition in browsers has come from chromium the browser I'm using right now Arc even if browser company doesn't seem interested in supporting it long term this browser is based on chromium and if chromium didn't exist and wasn't maintained so well well this browser couldn't exist the web is a comically better place than it would have been without Chrome and the government might kill that that's genuinely terrifying to me there is another fun layer here though they're not just going after Chrome they're going after Android I hinted at that a little bit but the implications there are terrifying because Google's already losing so much money on Android compared to iOS it's hilarious but they want to make it so people all over the world have access to decent devices and the web so they can keep getting new customers and also so their competition can keep growing too their goal has always been make the web really big so if we own a percentage we keep getting bigger but this will make it so they're going to struggle to make the web bigger and we're going to move more and more into our isolated little pockets of apps and further away from the open Fair web where we can all compete on the same ground Google did put out a statement and I wanted to take the time to read this and see if there's any important details that I missed so let's do it The doj's Staggering proposal would hurt consumers and America's Global technological leadership as part of its lawsuit over how we distribute search the US doj filed a staggering proposal that seeks dramatic changes to Google services the doj had a chance to propose remedies related to the issue in this case search distribution agreements with apple Mozilla smartphone oems and wireless carriers again if the ruling here was that Google shouldn't be allowed to spend money making Google the default search engine in other places that's an argument I'm down to here and I think we could have a good conversation about that there was just a case that was Google versus epic games the creators of fortnite that I covered on my second Channel worth checking out that video was much more positive towards the ruling and I think they made the right call there because they found monopolistic Behavior Google had done and found a path forward that allowed them to keep making the product while still opening it up for more competition all I see here is the opport for Less competition as they say in this article from Google the doj chose to push a radical interventionalist agenda that would hire Americans and America's global technology leadership the doj's wildly over Brad proposal goes miles beyond the court decision it would break a range of Google products even Beyond search that people love and find extremely helpful in their everyday lives this extreme proposal would endanger the security and privacy of millions of Americans and undermine the quality of the product people love by forcing the sale of chrome and potentially Android I could hear the argument here but that's a bit of a reach it would require disclosures to unknown foreign and domestic companies of not just Google's Innovations and results but even more troublingly America's personal search queries again the rest so far seems real we'll keep reading it it would chill our investment in artificial intelligence perhaps the most important inovation of our time where Google plays a leading role okay that's a that part in particular is a reach but yeah if they don't have a web to innovate on the incentives to innovate on experiences that were supposed to go through the web sure it would hurt Innovative services like Firefox whose business depends on charging Google for search placement yes as I said before if Chrome is killed and Google is forced to move out of their monopolistic position here Firefox dies with it like there isn't a world where Chrome is successfully killed and Firefox gets to continue existing like this isn't just take this from Google hurt Google take Chrome away and everything's happy smooth sailing this is a an attempt to destroy the web it would Hollow wheel's ability to access Google search and again a reach and it would mandate government micromanagement of Google search and other Technologies by appointing a technical committee with enormous power over your online experience as just one example The doj's Proposal would literally require us to install not but two separate Choice screens before you could access search on a pixel phone that you bought and the design of those Choice screens would have to be approved by the technical committee and that's just a small part of it we wish we were making this up okay they're focused too much on the part that I think could be good which is to propose remedies to them actually holding Monopoly within their competition by paying apple and Mozilla that there should probably be some level of regulation in but the fact the court is suggesting that Chrome be divested entirely that's the problem I have that just is actual nonsense and I wish they focus more on that here it almost feels like they wrote this before that reach had been proposed and they had updated it quickly in order to account for that I do agree here though that this approach would be an unprecedented government overreach that would harm American consumers developers and small businesses and jeopardize America's global economic and technological leadership at precisely the moment it's needed I agree there most of the companies that benefit the most from the web the way it works today are us-based and if we want to keep our lead we can't throw away the browser that is the lead it just it just makes no sense and that's why I'm frustrated because this whole thing just feels years behind the only reason that this could happen is the way the doj is thinking of Google is too much like google.com the search engine they don't seem to understand Google's business well enough to know what should or shouldn't be separated Google obviously benefits greatly from being the entry point for search on the internet duh but it's not their main driver of Revenue it's not what makes Google the giant multi-trillion dollar company they are today and to fail to recognize that and then to write something as terrible as what we just read as your attempt to separate it it's making me come out as Pro Google and I'm supposed to be be on vacation I don't like doing this I love making fun of Google they're one of the few companies I talk about in my content that I have zero stockings I do not trust their ability to be successful long term but this isn't an attempt to hurt Google this is okay it is an attempt to hurt Google with the side effect of destroying the web alongside it so I come out against this I hope it doesn't happen I guess we'll have to see though until next time peace nerds cool God damn it apple apple apple




## The worst code I've ever seen - 20250215
ever see code that is so bad that it makes you question your entire career as a software Dev makes you think is this really worth it I have on Twitter as a wallpaper I don't have words for this I've been thinking about this since I saw it a few days ago and I could keep sitting here suffering in silence but instead I'm going to bring you all down the rabbit hole with me we're going to go through this line by line as well as the history of where this code came from and why it exists and how we ended up here in the first place from the if true equals true to the weird internet use cases we have a lot to dive into here but first a quick word from today's sponsor today's sponsor is browser base and I like these guys so much that I invested it's a web browser fre your AI what the hell does that mean it means that they are a service that manages the chromium playright chaos for you so you can hit it like an API with traditional playright stuff with Puppeteer or with all the awesome things they built to so here the browser I can just press command enter and now I can just prompt it to do a bunch of crazy things I can ask for it to go to Hacker News go to Google and click the first result it will generate the code and run it but this isn't the product this is a demo of the product the product is the cloud hosting for the browser that is being queried by playwright if I click this you'll see it generates the code window. play. chromium doc connect over CDP now it's connected to that remote chromium instance and it just works it's super handy where it gets way handier is when you use their free open source package stageand which you can use without using browser base by the way it's so cool you can literally tell stageand to go to a specific page act by giving it a descriptive action instead of telling it go to this element and trigger on click you say click on the contributors and then you tell it to extract this data extract the top contributors and you give it a Zod schema which if you've hung around for a bit you know that this is the best validation library to automatically get this data all type safe too how cool is that you can use AI in your actual code to do logical simple useful things writing this with play right before was uh not fun see how much more work that is than just saying what you want it to do giving it instruction and giving it a schema it's so useful it's hard to put into words thank you browser base for sponsoring check them out today at s. l/ browser Bas make sure you check out stage hand too as I mentioned before I saw this because somebody posted it as a developer code or wallpaper and then my researcher Gabriel quote tweeted it with some dunk on it I was like oh God this is terrible and I did my own dunk that went relatively viral but I kept thinking about it I really wanted to understand where it came from specifically because it's all syntactically correct except for at the end here this show login failed thing that's not valid syntax but everything else was I found this Source from a deleted programming horror post and I also found it on web archive and the image did work before okay cool it's working again and this is as far as I can tell the closest thing we have to the original code I know that because they got rid of the weird thing in the show and I'm pretty sure other than that the code is identical Pi service equal select from bear count length i++ return true yeah it's so weird to change just this and to add this login failed there I don't know how that happened I really don't the only other missing piece is this comment here to do put this in a different file which is hilarious the one thing I never could find is when this login failed got added to this awful copy pasta code where it would end up in the place it's in now but first we should break down the code itself so let's go through this one line at a time first we have to do put this in a different file on line 541 in Sublime Text great sign great starting point this isn't a script tag so the rest is probably HTML and what they're saying here isn't necessarily like put this on the server side files where it probably should go what they're saying here is put this in a different file probably a JS file because this is an HTML file and you shouldn't have how your authentication works in your HTML cuz people will inspect it see it and if you just put in your JS it's totally safe right if you think that's where this falls apart you have no idea how horrible we're about to get here we then have an authenticate user function this authenticate user function is spelled correctly and that's all of the compliments I can can give it from here we go downhill very alarmingly quickly their accounts equals API service. SQL select star from users yes what this code does is fetches all of the users from your database and stores them as a variable and I will admit I've written code like this here and there not going to pretend otherwise but I never once did this on the client side because that is really dumb why would you do that the closest thing I can come up with that even vaguely made sense that done recently I'm working on a project one app five Stacks where I build the same app in five different stacks and obviously one of those is typescript in nextjs server component stuff and in here I have my results page that calls get rankings which uh doesn't need get all Pokemon wait I not even do this here this way oh yeah I put this all on a KV never mind I don't even do this that badly here I was going to show code where I select every single value from my SQL database I don't even do that here I knew better I grab all of the Pokemon which is coming from a cached API call but first off this only runs in the server and second off I'm not selecting star from a table on my database in my code so much less bad there are a lot of other worse things that you should worry about here like the fact that if you can call SQL directly on the client anyone can call SQL directly from the client and since this API service thing is a global otherwise you would be able to call it here the user would be able to inspect element go to console and type in apis service. SQL and in here delete star from users and now you don't have a database anymore because again this is running on the client their API service is just exposing the database to the client as a direct tunnel Insanity it only gets worse as we scroll for ver I equals z i is less than accounts. length i++ okay before you question things and I I know a lot of you were already questioning here where's the await how are you calling this and not waiting this code was almost certainly WR before asyn a wait were a thing and they were certainly doing blocking xhr requests here so it is holding up your JS thread while it waits for this code to come back that's what's happening here that also means this was before for each probably also before map so this is the only way in JavaScript to select individual things one at a time from a list disgusting but what's much funnier is we're just looking for any account where the username and password match and then we return true theoretically speaking this is all the code we saw there's a massive security hole in the fact that this API service is exposed on the client side but as long as this password is being passed in a hashed way like before we call authenticate user we hash the password at least these users passwords aren't being exposed to everyone it's just their hashes right right well if we scroll we see we are just grabbing them from the form directly but we're not even done with the authenticate user function yet because we haven't gotten to the magnum opus the de La Creme the the beauty the art I'm excited for AI to take over because it can't be worse than this what almost certainly I I'm GNA do my best to Steelman here as I like stumble over my words in awe my guess is that at some point the left side wasn't string true the left side was account dot is active or something so if a count dot is active equals string true not even true the Boolean but the string true which is probably why it's a string they probably grabbed this from the database originally so it was probably like checking in here if account. is active equals true the string return true otherwise whatever and they probably just copied that out or made the change and then left it there CU it it worked but there's like 17 ways to simplify this even if you just made it not an if statement you just did return true equals true or not equal true no if true is true turn false no I I'm trying my hardest to to even think how this could happen and I'm struggling why does this happen at least their jQuery code kind of works so they have an ID login so that's the field or the button tagged login and if you click it then ver username has to select the usern name's value password select password Fields value authenticated is the result of authenticate user username password and here is the underrated goat of this code if authenticated equals true dollar sign. cookie logged in yes they instantly set a cookie on the client side to know that you're logged in which means if there is any server code that is being blocked here it's only checking logged in yes on the client side and it expires almost immediately too does what does expires one even do the number represents days not hours or minutes in the expires on jQuery thank you for confirming that Claude I did not know God that is stupid I want to go a step further I I you know we're going to take advantage of Claude here I I want to I can't suffer alone any longer thanks AR for hard locking cuz I opened up cursor that's great my whole browser is currently Frozen totally not a dead browser okay somebody in here wrote out the code yeah here it is I do love this comment though I'm going to suggest to show this on interviews at my working place and that the minimum requirement should be to point out at least four bad things here I actually like that that's a good interview question I normally go the opposite like showing really good code and asking like what does this do this code appears to be problematic Authentication implementation with several serious security issues the code implements a login functionality that takes a user and password from form inputs attempts to authenticate the user sets a cookie and shows an error message the major security vulnerabilities include plain text passwords SQL injection risks insecure authentication weak session management because it uses an easily modifiable logged in equals yes strange and redundant logic code organization issues yeah thank you Claude so helpful most people are probably think here like somebody made this as a joke this is just fake code somebody made to outrage people no it was being used on an internet app that's not a typo that's internet which means it is a local network at a business probably so a company has their own network that isn't exposed publicly so only employees will have access to this tool and I have seen horrifying things in these types of codebases the code Bas is where you can't go to the page unless you're plugged into ethernet at the office because they're not exposed externally they tend to to think a lot less about security of these things the original poster deleted their comment but this is said comment it's absolutely being used in practice right now the worst bit the internet is public F oh God no it's not a traditional Internet it's not local only it's not logged to a network it's exposed publicly you can access it from the company's website oh my God also worth noting that they called out this isn't related to Capital One they were complaining about something on a finance form that's why the account is Capital One throwaway so don't read into that although I wouldn't be surprised if this was a finance company but God apparently this user also posted other similarly horrifying code here and there an API with no security executing SQL with JavaScript fetch requests loading. HTML establishing secure connection the closest thing to Security in this code base is the the use of the words establishing secure connection bold set timeout loading processing security protocol 2000 then 3 seconds secure connection established just lying with timeouts also these two contradict these are two 3 second timeouts like these are going to conflict and it's just a weird race condition API service. send request select star from analytics where user ID equals plus user even if this was server side code this would be bad oh man I'll be honest the most believable thing in here is the hardcoded server name this suggests that this code was actually real and being used for an internal tool this is okay I think I figured it out this is either a data analyst or an IT person who was forced to write code to expose the stuff that they do I'm leaning data person because they're selecting from analytics here so my guess is that this is what all data and it people do this this is yet another XKCD I reference all the time I'm just outside town so I should be there in 15 minutes actually it's looking more like 6 days no wait 30 seconds the author of the Windows File copy dialogue visits some friends this is also my experience with every data analyst and IT person because they're used to estimates being wise always so they're just doing the same thing here if this is a data person and they're used to their tools lying to them about loading States we shouldn't be surprised that they're lying to us about loading states too and the fact that they have the same set timeout call three times here such that they would contradict cuz all of these happen synchronously it's like this gets called then this then this then this then this they doesn't seem like they understand the concept of synchronous versus asynchronous because now these are all going to fight this is obviously somebody who doesn't write JavaScript for a living this is somebody who does something else it is quickly trying to write some JavaScript in order to do their job still absolutely horrifying though wow I had started my job at twitch when this dropped so now let's take this one the updated one that has the login syntax error interesting here this one has the login failed bit oh wait doesn't even have the the space what this has been transformed so many times that's really interesting login fail doesn't have the space in it here it does what's going on here this is a Journey well I can say confidently that we've put more thought into this code than the developer did but godamn my theory is when this got added to this Italian shitty programmer uh Facebook page that they wanted to make the code more readable for people who didn't speak English as well and make it clear what's happening so they might have added the login failed here to indicate that that's the only thing I can imagine and dollar sign. show just uh let me check what does dollar sign element. show do I'm assuming this changes it from like a hide to show yeah it changes the CSS from none to its original value that's what I thought because I didn't think you could pass it arguments oh You' pass it Arguments for how long it should take to show I forget how based jQuery is like that's such a useful thing so login failed is not a thing you can pass that at all I just wanted to confirm that yeah there's there's nothing you can pass to do show other than like numbers unless you defined login failed as a number Above So authenticate user US password this is all the same so far select star from users turn true if TR is true return false login click function dollar sign user name username password password okay yeah that's the only changes are on this line which is weird because they got rid of the ID selector so this can't work because you can't select error message without it being an ID or a class name so you have to have a DOT or a hash in front like this original version this code works it doesn't work well you shouldn't use it but it technically does but this permutation of it doesn't and which is the one that was in the Tweet yeah okay and how different is this one I'm assuming it's mostly the same but I want to confirm that yeah it is okay so why are they just changing this line over and over again why does the last line of the actual code get changed in all of these Renditions of this code what happened here let's search for this exact string on Google wow somebody reposted cuz I posted this they threw it in programming horror again not knowing that this is where it came from originally oh God did this version screw up the quotes yeah that one has different quotes Okay new Theory I think I figured it out I think this was copy pasted using a crappy text like uh OCR copy pasting so like for example using what I have here with Mac OS preview I can select text in this like that so my guess is somebody did that to grab it quickly fixed any errors that they saw in it and added that crappy login failed thing at the end there and then somebody else OCR copied it for the second permutation of the image because like this one is so much higher res color-wise oh wait yep I've confirmed my theory see that look at how poorly encoded the the the ligatures in the wrapping are on the characters this is some weird AI this one was made via an OCR copy this one was made with some AI gen upscaler apparently W 2x is known for adding spaces like that sometimes an AI gen upscaler based on the OCR copy yeah you can see a lot of the weirdness yeah there we are see the weirdness in the rounding of the te here that's from AI upscaling of the image for sure because remember this is for a wallpaper somebody probably had this old screenshot removed the things from the corner in the top and we're like I want this to be a wallpaper but it's two low res and they used this wfu 2x upscaler to upscale it that also probably introduced the space at the bottom there and then just use that and didn't think anything of it cuz the code was already so bad and they either didn't know code or their intent was for it to be a bad code thing I'm going with that theory I think we figured it out I what a journey from this horrifying code to the more horrifying reasons it exists to the most horrifying reason that it's become a wallpaper think we figured it all out and in the end I still get to blame AI until next time peace nerds




## Theft, Open Source, Attribution and Remix #WebDevDrama - 20230223
open source is great it is a Bastion of innovation it allows for software to keep moving forward every day Innovations are happening all over the world especially in the web development space if you don't open source your new web dev tools and Technologies you're going to be met with a lot of skepticism and a lot of fear in adoption there's a couple Frameworks that started as closed source and eventually moved to open source caving with the pressure I'm concerned that not all of them maintained the open source mindset when they made those transitions though we see more and more participants doing open source that might not fully align with the expectations which is why we're starting to see more and more conversation around copying theft and the use of Open Source ideas Concepts and Technologies so to be fair this tweet was deleted the person did choose to do the right thing but I do think it's an important point of discussion so Jacob from the remix team tweeted looks like svelt was the first to steal deferred glad this was picked up but a collet would have been nice not like I released this a while ago wrote about it gave it a talk and told others to implement it he then went and made some snide remarks about how it seems like since most devs are dropouts they don't respect Academia and credit but the harsh reality here is the Deferred Concepts and a lot of the streaming ideas he's talking about have existed in other Frameworks for a while now nothing was stolen here ideas were appreciated implemented and reused from many different Frameworks including remix which has taken a lot of these ideas from lots of different places that's okay though that's kind of the point the benefit of Open Source is that we can all move forward together that when one person makes something better they've made it better not just for the users of their thing but for the industry even if remix is implementation of streaming was truly unique and one of a kind its introduction has now leveled up all of web dev even for non-remix users that's a point of Pride it seems like they're less excited about web dev improving and more frustrated that they're not getting accolades constantly for the work they did it's frustrating and sad to see the response to this tweet was pretty much what I would have expected developers like Ryan who created solid and solid start saying that it's hard to track when specific ideas first came and were are used in this case specifically solid has been serializing promises since back in 2020 and Marco was doing similar stuff in 2014. the value is in how people use the thing and if remix's value isn't in user's shipping remix rather it's in other Frameworks learning lessons from remix and applying those in different places that's a failure in remix and if they're not going to acknowledge that and instead are going to keep throwing shots at the people who are learning lessons from remix they're hurting both of the groups they should be working with group one the users who should be using remix are seeing all of this drama and they're less likely to engage in group two the framework maintainers and authors who to be frank have been the primary audience of remix for a while now the people who like getting nerdy about Frameworks people who build their own those are the remix users right now those are the people who care about and look into remix right now you're pissing them off too it sucks that there's a huge value from remix here in the things that can teach the community that isn't being acknowledged because remix doesn't want to be part of the conversation they want to be the center of it and this has been getting better I I will say like Kent replying here saying this is doing harm is a really really good call out Ken's been great especially recently I've been chatting with him more he's very much on top of this and genuinely cares Ryan's been doing better too Ryan Florence to be clear it just it sucks I I am getting tired of this I have been for a bit I don't even know if I'm gonna publish this video but I'm I'm just disappointed like people need to be more excited about good things happening Prime just sent me a tweet so I have to pull that out you in Prime take your w yeah I'm just disappointed so many of the ideas like our community has come up with like create T3 app as a concept has been ripped so many times fun history lesson this blog post by Nexel is pretty much a direct rip of one of my YouTube videos I had on stream built a link shortener posted it as a video Nextel recreated it made a blog post I saw dev2 post it on Twitter I was like wait this is suspicious this looks almost identical to what I made and originally didn't attribute me it didn't have any reference to me but the source code was nearly identical I tweeted about it saying this looks suspicious this looks weirdly similar and the tweets started doing really well and people are saying oh you should call them out you should go at them you should be really mad at them or whatever I was like honestly this reads like somebody who was genuinely excited about what I did and wasn't sure if they could reach out or not I'm gonna reach out to them and figure out what it was and sure as [ __ ] that's what it was this blog post was by Nexel who ended up creating create T3 app and becoming one of the most important people in the community but Nexel stole something I did made it way more accessible by making it a blog post that anyone could read and find and translate and do as they please with this is an entirely different more accessible format of a thing I had built really pumped to have someone taking the things I did and making different types of content with it okay now he's an essential part of the community the same thing happens on YouTube all the time to be clear like I've only been doing this since I started taking it a little more seriously April last year so it's been under a year since I started posting videos on YouTube regularly and in that time a lot of things I did because I wanted to and I wanted them to exist have been directly copied by YouTubers way bigger than me and I don't care I don't call it out I think it's cool it's validation it shows the ideas that I'm pushing and the things I care about are indeed valuable and it should be validating and remix doesn't seem to take that validation in stride they seem to take it as an insult and that's why I'm so frustrated because even outside of Open Source I can recognize the value and when people get excited enough to build things around the ideas you are pushing it is awesome this is a win and it should be celebrated as a win and I don't get why it's not I hate to say open source should learn from YouTube but in this case it should a little bit credit isn't the value credit is important but sharing valuable ideas is why we're all here and if remix's goal isn't to make the web better it's to make themselves look better in association with the web they need to get over that but I don't think that's their goal I know enough of the remix team I know enough of the remix Community I know enough of the maintainers of that framework to know they do genuinely want to make the web better so I hope their tone starts to reflect that more this is a spicy one excited for this to be on the channel if it does end up there YouTube's putting a video there thinks you'll like if you click that peace nerds