## Why Microsoft deleted this extension from MILLIONS of computers - 20250302
the vs code team has just taken unprecedented action they deleted a theme from the VSS code store and they uninstalled it for millions of users devices this isn't just any Theme by the way is the material theme it's not a good theme I would never use this one that's kind of surrounded in drama we've talked about in the past and I'm sure we're going to have to continue what's the reason they took it down for for Microsoft to go this far with an extension it must be a really bad thing that Matia did right well kind of this is a very very weird situ ation full of delicate nonsense to put it frankly you don't do this if you don't have something that you're trying to hide there's a lot to dive into here from opusc to bad faith shipping to just terrible practices from an exop Source developer I have spent far too much time we're talking like 40 plus hours over the last 4 days trying to figure out everything going on here I actually already recorded a different video about this you might notice my shirt and outfit changing throughout Insanity that's because we're going to use some of the parts there that are still correct I just want to go out of my way to make sure I got the best possible source for this whole thing because there is chaos floating all over when you try to look into the situation so uh after maintaining this fork for far too long putting all of this time into researching and bringing on multiple other people including Security Experts to try and figure out what's going on we have some bills to pay so before I can dive in quick word from today's sponsor then we'll get straight to it no sponsor today so uh check out T3 chat if you haven't yet I'll I'll sweeten the deal a bit it's only8 bucks a month but for the first 100 people to sign up here's a code to get it for free anyways back to whatever I was just ranting about I think it's important to start from where I started which was an hn thread of all things I was sent this thread from an existing employee of the VSS code team you can see him here EO he put a lot of work in here as did the whole VSS code team I'm honestly really impressed with how hard theyve worked in order to get all of this under control I want to make sure we call that out because it's important work I got notified of this because I have a fork of the theme due to the aformentioned drama if you haven't already checked out the video that this trying to sue real quick to he Dr is that Matia decided to make his theme not open source anymore got really mad at other people for using the old open source version and for bringing in those colors into other projects under similar names started threatening to sue them including other open source editors like Zed absolute nonsense he's apparently been doing this stuff for years he even did it to Sublime Text way back when so not unusual behavior for him to just be a malicious obsessive frankly dumbass but here we are so the BS team was no ified that there were malicious things going on inside of the package material theme which was a very popular package still despite the fact that I and many others had covered how egregious it was being maintained this package is particularly interesting because the entire history of it has been deleted and because Matias an obsessive he has went out of his way to Opus skate everything going on in the package he's also not a very good developer which means that this package has a lot of things it probably shouldn't for a theme I would know I've been maintaining a fork of it for quite a bit of time now and it has not been a fun code base to work in because instead of just keeping track of hex codes in Json like you know every single other theme ever does he built his own crazy pile of generators that have access to things like spawning processes and reading from your file system in a theme remind you I've been going out of my way to gut as much of this stuff as possible from the fork we've made a lot of progress so far I've already deleted like 10,000 plus lines of code and no users have even noticed the difference because again it's just a theme it should just be Json files keeping track of colors but it's not and by all indications this seemed like it was very very clearly malicious malicious extensions in particular are nasty because extensions extend other things you're doing which means they have access to a lot of things that you might not expect them to browser extensions vs code extensions and all sorts of other mods and extensions on other platforms tend to be a huge potential surface area for exploits and risk because they are much easier to install and AD they are much simpler we don't think as much about them but they have the same levels of access that a lot of other things do Google's been going really hard locking down the extension Marketplace for Chrome for this reason seems like Microsoft's trying to do similar to vs code because again the risk profile here is insane we need to know what a malicious package is obviously the simple definition is a package that does things a user would not want without that user knowing obviously this implies dangerous things like like stealing your data changing things they shouldn't ransomware all sorts of things what's more important is what does a malicious package look like when you look at the source code for something malicious if it's not opusc it's usually pretty clear it's accessing things it shouldn't and doing things it shouldn't the most clear sign something is malicious is that it's requesting stuff that it has no real reason to need access to generally speaking if there's a piece of software that's requesting access to things it shouldn't need there's a very very high chance it's there's a second part to this I think it's worth calling out has dependencies for things it shouldn't need a great example here would be a theme needing access to file system in spawning child processes there's no reason a theme should be able to spin up some process on your computer or read files from your root file system those aren't things a theme should do therefore if a theme is doing that it's very likely that that theme is doing something malicious there is one more key that makes it much more likely softt is malicious though which is efforts to Opus skate what the code is doing this is a really really big one it's incredibly rare that militia software is published without doing some level of opusc if we go back to the previous big hack of last year called The X utils hack which was done by Opus skating some weird binary code inside of the open source package such that it was basically impossible to know what it was doing and it subtly quietly snuck out and fected millions of computers with the possibility of stealing and sending off data in places it absolutely shouldn't have and that was all possible because the code was opusc so you couldn't just read line by line what it was doing even though you had the source code it just was jumbled into gibberish so no human could reasonably understand what it was doing usually you do this by compiling a binary but since there are languages like you know JavaScript where you're just sending the actual scripts down you can't Opus skate just through compilation you have to do other things and put actual effort in if you go look at any of the VSS code extensions you have installed even the ones that are doing things they probably aren't Opus skating in these ways because they don't need to they're just trying to send the JS to the user it's also worth noting that these types of opusc tend to hurt performance as much as like 80% so you'll end up with code that's 80% slower by doing this which means chances are if you're heavily Opus skating the code that you wrote you're doing it in a malicious way needless to say if your source code for your EXT looks like this you're hiding something that's not up for debate you don't do this if you don't have something that you're trying to hide even formatted it's nonsense and you'll see why there's all of these crazy parse in calls grabbing random references that are used to recreate things as basic as strings that you're trying to use in your app this level of ausc was done very specifically because the Creator Matia does not want people to see what he's doing in this code generally speaking if some something has all of these traits the reason is because it is malicious if something is requesting access Stu it doesn't need if it's using dependencies especially ones that have massive security implications that it doesn't need and it's heavily opusa the code that is actually being shipped it is almost impossible to assume that that thing isn't intentionally doing it maliciously anyone who does all of these things to a given piece of software especially one that previously did none of them is almost certainly doing it with the goal of being malicious infecting users are generally causing harm almost always is the key here though because there's a common phrase do not attribute to malice what could be attributed to stupidity and I know for a fact that Matia is incredibly stupid the amount of things I've seen the people I've talked to from his past he seems somewhat capable of building Design Systems but he seems entirely incapable of taking criticism of not being recognized for the work he considers to be impactable and over engineering the out of things that have no need for it at all because of that it's hard for me to say that this is clearly a malicious act everything he has done before and after was and despite the fact that he has been going after me now for six months he has been consistently slandering into grading me publicly about things he's made up in his weird conspiratorial castle of  and the fact that he is actively harming the open source community and people I care about and ding the reputation of this whole industry by being such an I want want to take the time to try and defend him because I do genuinely think he is just the stupidest Dev to ever have a package with this many installs so let's go through my theoretical what I think might have actually happened here first and foremost the previous drama all happened because Matia was upset that he couldn't make more money off of his OSS package it is worth noting that the material theme was not just his work there were a lot of other people involved hundreds of people had committed by the time he decided to take it offline which is the next step he changed the license of the material theme because he wanted to start selling it he had already made like $10,000 dis dollars off the open Collective for material theme all of which he paid himself in absolute ways but he wanted more he felt like he was not getting what he deserved so he took down the Apache 2 license and he rewrote the entire commit history of the project rewriting is an obsessive thing that he likes to do but he did all of that because he wanted to be able to sell the theme and make more money specifically hoping no one would be able to maintain a fork because he had hidden all of the code he started to get blowback from this there's one additional step here it's what I mentioned from the previous video where he was obsessively targeting the creators of other software that included material theme in particular other editors like Zed and Sublime Text he was constantly flaming them publicly my whole introduction to mata's Insanity was me reading a blog post on dev 2 just a random blog site that I was curious about at the bottom there is a recommended new post Zed editor is bad for open source and destroying the industry and I read it and it was the most insane thing I'd read in a long time I then went and looked at his GitHub issues and realized he was just actively harassing these open source maintainers so I jumped in with a hey what the hell's going on here nothing here is fair to say your code was open source seems like you're mad that people remember that it used to be open source because this exploded I took it on myself to Fork the last version that I could find before he changed the license and I still maintain that fork when you have a code base that has been maintained by lot of people under a specific license you can't just change the license of it and expect the old versions to have their license revoked as well especially when others have helped create that code and none of them agreed to this change so all of these Forks are totally legit he did not believe this at the time and was quite upset about it now he's flipped in his own deranged way to say see there are all these Forks clearly I did nothing wrong otherwise they wouldn't be able to make Forks that's not what you were saying six months ago bud but sadly it kept spiraling he went hard to make sure nobody could use any of the things he considered to be his Innovations anymore unless they were paying him this included things like the chaotic pile of code he wrote to generate the themes he wanted to make sure any changes he made to that were not accessible publicly cuz he was so upset the fork was getting attention and his code was not because of that he started to do things you really shouldn't do he started to first and foremost spiral into crazy packages and other Imports that were not necessary for things in particular the icon pack that he was using and he started to off youate the out of the code that he was bundling because he didn't want anyone to know what he was doing and why he was doing it because if they did they could copy it as far as he is concerned remember I'm doing my best to be good faith here the only way you can assume we got here is if you also assume that Matia is a narcissistic entitled that doesn't know a thing about software if you presume all of that to be true then maybe there was a possibility he wasn't actually trying to ship malicious code here with all of that said the next step was that after all the things he did being a one toone match to what somebody doing malicious behavior would be his extension got removed Microsoft took a bit longer to published I would have liked it was still really quick considering the severity of the problem this is the first update ever to the new removed packages section on the VSS Marketplace repo the equinus AIO which is his other handle Matia it goes by this everywhere was removed on the 26th of February and the reason they describe is that it was a theming extension with heavily off skated code and on reasonable dependencies including a ility for running child processes this is honestly a fair reason to remove an extension especially when that's this popular with a maintainer that is this uh I don't know what word to use other than like risky he's kind of explosive you never know what he's going to do next and he has shown so little care for doing things right for his users for the maintainers of these open source tools and for the ecosystem as a whole that he is a ticking Time Bomb it's just a matter if has he already exploded or not so again his extension got removed for reasonable reasons if we were to presume that this wasn't malicious which we're still not fully sure of supposedly there are actual malicious things in this bundle despite the fact that I and many others have been trying to find them and we're just finding really bad practice we've yet to find something explicitly obviously malicious the risk profile is still really high it makes perfect sense the extension was removed now we're going to dive into theoretical land what if he had behaved a bit differently nothing I'm about to say is what actually happened I'll let know when that changes if maa's response to this was in any way understanding if he was to reach out to the vs code team and say hey I think you guys got something wrong I'm not sure why I was flagged here I would love to chat and make any changes you would request in order to get this fixed then there would be an actual Redemption potential here this is presuming that he was very calm and collected in his request for this and that the vs code team was to respond let him know what was wrong and they would have to change all of the I mentioned before he'd have to stop requesting things he shouldn't need he'd have to stop using dependencies that he shouldn't need he'd also have to stop ausca the out of the code because if you're doing all three of these things it is very very likely almost more likely than not I'd say 90% of the time plus if you're doing all of these things you're shipping malware he could acknowledge that he was doing those things he could acknowledge it was a mistake and that he was stupid for it and then apologize fix it publish the source code again and take the opportunity to fix the problem now we go back into what actually happened what he did next was genuinely insane he didn't reach out he started complaining everywhere he possibly could conspiring and throwing everyone under the bus that was even vaguely associated with him the extension and the vs code team this one was particularly funny this post has since been deleted because he has since republished removed and hidden this repo I think eight or nine times he has made over 500 GitHub accounts in the last 2 days and he has tried to circumvent the attempt to take down his extension by republishing it under four different names if we're looking at this in terms of the things someone would do if they were actually trying to be malicious he has checked every single box the only box on the hacker list that he hasn't checked is the smart enough to do a hack box unfortunately all of our extensions have been censored and pulled down without any possibility of appeal notice or apparent reason really sad day the main reason is due to a stupid and ignorant person who shared a fake and defamatory video on YouTube spreading false and invented information without knowing the real facts most of that video was spent with me reading his blog posts and his comments so I agree that those videos were actually full of fake and defamatory information and things that weren't actual facts it's just that those were there because he wrote them all of the misinformation that exists in my videos about Matia is information he created in order to spin some crazy conspiratorial narrative this is a very very dangerous person that we need to go out of our way to keep out of Open Source and make sure anyone else exhib iting similar behavior is also kept out his conspiracies contined to spiral out of control going as far as saying that I was conspiring with the vs code team and my friends over there in order to get them banned as aggressively and quickly as possible I was reached out to after all of this happened Remind You by someone who I'd never even heard of before it turns out I actually do have one friend that's on the VSS code team I didn't know about any of that before all of this so thank you Matia for letting me know that one of my friends is on the team but she was not the one involved in any of the stuff that we were talking about right now it was a different person who i' never heard of before who hit me up after the thing had already went viral on Hacker News because you are a malicious none of this has anything to do with me beyond the fact that my Fork is popular enough that I got brought up a whole bunch here and Isidor wanted to make sure that my Fork didn't have whatever malicious was going on in the official extension I put my comment up here after spending the entire night I was up until 5:00 a.m. this night auditing the out of this code pulling in all the people I had to make sure the version I had published was safe and it is there are things in there I want to remove because they depend on things that he still technically has publication rights to none of that is code that is bundled in the extension but it is used to bundle the extension so I will be ripping every single line of it out because I wanted to take this abundance of precaution I spent a lot of time on this and I found quite a few things first and foremost when I was doing this I told the VSS code team directly that if they do find malware while I am working on this or while I'm asleep or while I'm streaming the next day they they don't have to wait for me to tell them it's okay take it down they had actually told me before that they would let me know before any action was taken I rejected that offer because I care more about my users having secure devices and not being affected by potential malware than I would ever care about having an extension with a thousand installs I don't give a so I told them explicitly I don't care somebody else was saying how dare you think that you have that much control over the vs code team I was rejecting an offer they gave me my haters are insane anyways part two is that I audited the entirety of this code base which took a while there was a lot of nonsense in there I also removed all of the code related to change logs analytics and open Collective as well as HTML rendering because he had built a very elaborate system for rendering change logs that had two sentences each instead of just putting them inside of the repo like everyone else does ever he maintained a separate sanity blog sanity is a CMS for managing blog posts where he would put the two sentences there and then use the sketchy client to pull the data down and render it in this HTML all for this release notes of VI that was garbage so I just removed it if you want to audit the code it's all open source and there and available for anyone to do whatever the hell they want to yeah people were being total to me just one all you know I'll be fair most people have been really really chill about this one because I think it's clear I'm operating in good faith I don't like this theme I'll never use this theme but I'm still maintaining a fork of it because I care more about people having safe open source software than I could ever pretend to care about using the right theme I will probably never use this theme I have to probably rename it now though because it's VSC material theme but I won't sue you now it's but I won't Sue or hack you or install dependencies that look like I'm trying to hack you kind of insane we spent a lot of time trying to figure out what was up with this package and most of that effort was going towards the material theme it turns out the one that was the most malicious or most potentially malicious wasn't the material theme it was the material icon theme that he was also managing and Publishing this had all sorts of nasty utilities and things in it that were not things that should ever reasonably be in a theme of any form it should be a bunch of svgs not in Mattia land in Mattia land you do a lot of things that anyone else would never reasonably do but when you think you're the only righteous person and everyone else is evil and out there to get you you stop thinking reasonably as we can see with his most recent attack now he opened a new issue on the vs Marketplace because they locked the other one so we couldn't reply in it anymore this one is absolute insanity and kind of shows how mentally ill he might be at this point if you click the edits button here you'll see my favorite Matia ISM before I click it I want you to guess how many times he has edited this post 24 times in 10 hours not even dude is insane actually insane in multiple of these he has my favorite little Trope of his kept changing his mind if he wanted to include this or not there it is he kept adding and removing a clown Emoji next to my name that's the type of person he is oh look he left that in in the end all Forks created when our extension was open source combined the exact same so-called compromised code just without the ausc yet instead of taking them down you reach out to them after our ban as stated by Theo yes because my code was open source so they didn't have to have a security team reverse engineer it to figure out what the hell it was doing unlike yours Matia are you saying that the entire time this code has been closed source and you have been claiming that you need all of this support and all of this money you haven't actually changed anything about the extension that's not true also worth noting that as the VSS code team said it was the icon package not the theme that was the problem and as always you are trying to steer towards whatever tiny tiny microscopic little Point might almost make you look okay in this one instance but I want to emphasize how severely you have up here Matia at every single step throughout this before during and after Matia has done the wrong thing this all started with the drama around the original material theme the first thing that he did the most wrong possible way was his attempt to go after the Sublime Text people for including a material theme I could go a step further and say that even using the name material was a mistake because the name material is part of a design system that Google made not Matia it's called that because he is trying to grab onto something else's success in order to get some amount of attention the next thing that he screwed up was trying to change the licensing of the project without permission from anyone else license changes have happened in the past there are always big dramatic things but they usually happen from this point forward and the team that is making the change will always call out that you continue using the old version maintaining it using it for whatever you want under the old license it's just from this point forward we're under a different license Matia did not do that because Matia cannot ever help himself but do the most wrong possible thing so Matia did instead was he deleted the entire Source history and all contributions without deleting their code so there is no longer any history of the hundreds of people who have contributed to these things in the past because he nuked all of it he loves that good old Force push with a single commit here's a screenshot of his GitHub activity before this drama really ramped up I can't show you his profile because he made it private because he loves to hide things all of these projects have more than 10 commits other than these last two here and if you go and look at them they all have one commit because he actually make 15 commits he rewrote the first commit 15 times because he is so obsessed with deleting hiding and off you skating every single thing he can because he's a lunatic so after he deleted the entire Source history and contributions without deleting the code he then did what started this really big malicious spiral even the Sublime Text thing if that was a one-off thing it could be forgiven if any of these were a one-off thing they might be somewhat forgivable and redeemable but the theme of Matia consistently doing the worst possible thing every every single time he perceives himself as being wronged is why we have the Assumption he's being malicious here because the next thing he did was attack Zed full force this one has like 15 layers where he did the worst possible thing but the fact that he harassed the developers on GitHub didn't get the response he wanted and then he decided to go public writing an article claiming that they were destroying Open Source by lying about them incessant and hiding the fact that this whole project was open source Opus skating his history Opus skating the details the Matia theme you know the only thing that Matia is consistent about with his theming is his inability to do anything right yeah and for once I decided to play his game a tiny bit I made a blog post I don't post on my blog a whole lot but I did it because I want to make sure that when you Google search his name you find the history of the terrible things he has done because I don't want anyone else to make the mistake of accidentally hiring a lunatic like this and ending up with utter chaos internally as a result I've only done this once in the past and it was with the guy who made Faker JS because he was an absolute lunatic who actually did ship Mau by the way the spiral is very common someone feels like they should make more money than they do on their open source project they haven't maintained for 10 years they get really mad at anybody else doing similar things they delete the repo or Opus skate the code they beg for open source contributions and don't get as many as they expect not contributions of code contributions of money they beg endlessly for money from open Collective and things like that they get flamed when people realize how insane and malicious they are being they blame everything around them be it Microsoft be it YouTubers be it influencers be it the open source community and then when all else fails they ship malware this is what happened with the faker JS morac dude that's what's happening here too we still don't have the full details I am straight up 50/50 on if the package was actually malware and the only way the package isn't malware is if he is actually just that stupid anyways don't hire this dude hopefully this gets enough SEO that no one will accidentally make that mistake and hire him but we're still just going through the things he has done wrong here he Ted Zed full force he harassed them on GitHub he harassed them through the blog post and when he was called out for that blog post he replied to me incredibly rudely realized who I was and then deleted the post I then emailed him for his comment on this because I planned on covering it that I think is honestly the point where he realized how big of a deal this might be so he responded to requests for comment by writing a life essay and then blocking on all platforms if he was actually innocent if he wasn't doing everything as wrong as possible he could have taken that opportunity to handle it proper but he didn't he went into attack mode all he knows how to do is attack and conspire after my video came out though for the most part he seemed to shut up and just go off into his own world that said he still felt incredibly wronged at which point he did what I would consider the worst possible possible thing off you skate everything that you do going forward while also doing riskier stuff every day because he felt so entitled he decided no one else should ever have the right to see his code again so he's going to off youate all of it that's not the right solution of the things on this list this is probably the least wrong thing he did but it's still wrong enough that for most people it' be a pretty good like you can't trust that guy anymore after that the extension got removed which he could have responded too well but instead full Attack Mode post removal he just went in he has been constantly dragging into faming me and many others in his attempts to show that he's the only one who is Right everyone else in this situation is as wrong as possible and then in parallel to all of this he went out of his way to keep shipping the extensions by any means possible this included spinning up new GitHub orgs spinning up over 500 new GitHub accounts publishing it under different names publishing it under the same name in different orgs moving this repo eight plus times and also posting a zip of it which was different from the version that was published on the store by the way because he is trying to hide what he was doing with the infuscation and at any point throughout any of these things I would have been more than willing to forgive Matia if he had just apologized and stopped during this spiral but as he has continued to be wrong he has continued to deny and get worse and worse doing worse and worse things never once taking the time to admit that he was wrong or apologize to the harm he has caused to hundreds of developers in the open source ecosystem into the millions of users of a theme that he didn't even create all of that said if he was down to own all of this if Matia actually takes the time to reflect and acknowledges that this isn't the actions of a good faith maintainer of a package or theme these are the actions of somebody with malicious intent if he's able to recognize why the rest of the world sees it that way that we look at this list of things he has done back to back to back to back every single time not doing the right thing not apologizing not taking ownership at every single step doing the worst possible Behavior if he could acknowledge that is what happened here I would be down to unlist both of my videos and apologize publicly take down my blog and do whatever I can to help him with his Redemption Arc but in order for him to start a Redemption Arc he has to start apologizing and owning and understanding the amount of bad things he did literally every single opportunity there was a decision for him to make he looked at the right decision he looked at the wrong decision and he said how can I do something worse than the wrong decision every single time I'm trying to go with the right analogy for this but like being that he has established this theme of doing the worst possible thing at every step we have to draw a line of the before and after the extension was taken down here the line is right here everything above this line where things he did wrong before I would gladly make the argument that doing all of these things removes our ability to give you any amount of good faith as an open source developer and maintainer if you harm the open source community in these ways with the goal of destroying the careers of others others who are actually acting in good faith by the way we can no longer assume you are operating in good faith let's say somebody was a really strong Greenpeace Advocate they wanted to have gas cars stop being used because they care so much about green technologies that's a mission I think we can all get behind and understand like it is important that we use less gas and use less oil but if they did that by threatening and harassing every single person who dared drive a gas car for years we would probably be suspicious of their motives now imagine after years of establishing your willingness to harm others for their use of what you perceive as an evil thing gas suddenly you get a job working at a car mechanic and you show up on the first day with a gun with knives and with scissors so you could destroy the cars and maybe even the people doing these things we're going to assume what your intent is there cuz you have established a long history of bad intent and horrible actions towards people that you look towards this way if it turns out those things were just left in the car because your friend who does those things had left them there you didn't know about it and forgot about it and just also happened to bring them into the workplace with you magically it is theoretically possible that you didn't actually have that intent but it is more impossible for people who paid any attention up until that point to look at this thing that even if you had done none of this in the past if you had just shown up to work like that for the first day having none of the history we would still assume you were doing something malicious when you combine the behavior almost always indicating malicious intent when you combine the fact that anyone's doing these three things is doing it because they're shipping malware that in of itself is enough to assume it's malware this history in and of itself is enough to assume it's malware the combination of the two makes it really really unlikely that it isn't malware the only way it is possible that Matia didn't ship a virus inside of the icon pack or at the very least something that intended to harm the people who had it installed the only way it is possible that isn't the case is if he is so stupid that doing all of this was purely accidental and that is possible this guy doesn't seem very bright but he does seem very unwell and I don't think he can be trusted ever again in software without a massive ownership and apology and recognition that all of these things are really bad harm the ecosystem as a whole and cannot be recovered from this isn't something you can just edit your git commits and pretend it didn't happen Matia there are too many eyes on you in your behavior now it's over the game has been played you don't get to win anymore what is particularly funny here is that despite being the one at fault he will never apologize he claims he's willing to to collaborate after degrading and defaming people but also requests that they apologize to him demanding this because they are the ones who wronged him no we were given every single reason to believe that you are being malicious especially afterwards his behavior it's hard for me to Fathom a world in which somebody would have made these mistakes accidentally had their extension taken down and then go so out of their way to continue to ship the extension to make these hundred of GI of accounts and to do all of the Terrible Things That Matia has done without having malicious intent but I want to take a little more time to try and sympathize with him we're going to make a somewhat rough cut to a piece I filmed before about how humans perceive themselves and others in situations like this because it's important to understand how someone gets to the point where they behave in a way that is so obviously insane I just don't think it's human nature to be so online and I don't think Matia is a safe person to have beond the internet and I hope he takes the opportunity to get offline a bit so I'm sure this little diagram here makes no sense we're going to do a magic little cut to when I filmed this part so uh apologies to my editor faas let's make this one happen this is going to be a weird dive into human psyche and it's necessary hear me out guys point one is that humans were not built to have the levels of info and exposure that they do with the internet before the internet most people had two to four friends most people knew 20 to 30 people things like cars and cities and phones and TV and now the internet has allowed for humans to have more interactions with more people than ever before the human brain wasn't built for this though the human brain was built for I know 10 people eight of them like what I'm doing one of them doesn't I should use this opportunity to see why that person doesn't like what I'm doing and if they're not understanding I'll write them off and just pay attention to the other eight people our brains were built to operate in these smaller circles like if this is the people in my life the people I know and care about one's being negative those are being positive hopefully people will just do that but sadly it is human nature care more about the negative things in their lives than the positive if you have a day where youve multiple good things happen and one bad thing happen that bad thing is going to represent a disproportionate amount of your conversations of the time you spend in your head the things that you do that's an evolutionary trait humans have because it keeps us safer if you eat a bunch of berries and most of them are fine but one Berry gets you sick never eating berries again is somewhat irrational but you're less likely to get killed by a poisonous berry so why am I bringing all of this up if we have a small circle here we overreact to the negative there's still enough positive in here for us to feel fine as humans but if we take this circle and we do this with it and we make all of those those red ones way bigger in fact we should probably have way more of them too because if you're on the internet the average person you're interacting with is not a good person they're not a nice person suddenly the amount of things in your circle has gone up a ton the amount of things you're seeing has gone up a bunch and the amount of negative has two and the percentage of it that is negative has gone up as well most people pre- internet would only ever hear the thoughts of like five or six people in their lives about what they feel about something with the internet everyone has something to say about your and if you can only handle let's say five things if your circle of like what you can pay attention to and understand can only fit five things in it I'll go in here and remove two of those now it's four positive but small one negative but bigger just because there's more stuff here doesn't mean I can handle more and the reality is this bigger Circle has way more than five negative things in it this circle has an absolute shitload of them so if we just take those cuz that's human nature holy all of the things people are saying all of the feedback around me everything in my life is collapsing there is so much negativity everything is bad and evil and everybody who's okay with this is bad and evil too the only way you can cope once you're in this situation is if you convince yourself that everyone is bad because the only people you can think about aren't the three or four nice guys that are actually in here those get wiped out cuz your brain can only process so much feedback at once and when those get wiped out all that's left is the negative and when all that's left is the negative is how you're thinking you go insane when you're at this point most people even mentally well people go mad the size of the circle is the number of people you reasonably would interact with or would talk about you or know about you the number of people who would know about you pre- internet 5 to 10 now it can be a lot more there's one last aspect here though let's say Matia did actually have a big circle here previously he lived life with a small one he had like the people maybe his like girlfriend or Mom or whatever maybe some co-workers and he had this little circle he was happy all was good he starts contributing to this material theme all of a sudden his circle is way bigger and it's all positive all of a sudden he went from having three people who cared to according to the installs on GitHub Millions suddenly the the high of everyone liking him and caring it's just getting to the biology of his brain where you're not built to get that much feedback at all and if you get addicted to this thing that humans weren't built for the same way you would get addicted to a drug you'll get addicted to that feeling of people saying really nice things about you so he got addicted to that and that went so far that he started to feel entitled if suddenly you have this many people being nice to you saying your thing is great and you feel like it's a lot of work it's the biggest thing you've ever done you're not thinking about how hard it is to do you're not thinking about what people need out of all of this what you're thinking about is all of those numbers you're seeing this big number bigger than anything you've ever imagined and all you've gotten out of it is a few people being nice in your applies you haven't gotten any money out of it you haven't gotten any jobs out of it you haven't gotten anything really out of it suddenly entitlement starts to brew because your life is this small circle but your contribution to this one thing that people used a whole bunch 10 years ago was this circle going from this circle to that Circle feels really good going from that Circle to that Circle feels terrible suddenly people stopped caring about his theme suddenly his world started collapsing in on him effectively because the one thing that he felt made him successful which was his contributions to this theme no one cared anymore but he still felt like he didn't get what he deserved from this era from when he was here that if he could be here he deserves to be here and if he deserves to be here he deserves money for being here and if all the other random things he did were even smaller maybe they were tiny circles with nobody in them which I've read through his GitHub this is what actually happened his other stuff just made him smaller and smaller and that drove him insane rather than accept that this here was luck the fact that you had this much positivity was a lucky role and now you're having bad roles he like many will do decided to blame external things because being at the high of this is incredible having to go back to normal life in these smaller circles is horrible rather than acknowledge that is a personal failing or the hardest thing that he never deserved to be here in the first place instead he blames the world this is human nature he had more exposure than the human brain was built to have got addicted to it it got taken from him and rather than realize that was luck in the first place he is now blaming the world for it suddenly something bigger happened he started harassing all these other projects because he felt entitled to their success he felt like the reason his theme wasn't getting the attention and the money it deserved was people forking the open source version and putting it in other places his entitlement to being in this circle caused him to do terrible explosive dangerous things which is when I covered it and that is when this happened all of a sudden he has more exposure than he ever had before more people know his name than ever knew him before all of that happened because he handled that transition so poorly his goal was to go for from here back to there instead he ended up here now he's experiencing more negativity than he's ever experienced in his entire life because of the natural blowback the terrible thing he did and since he is so obsessed with having this big circle full of people being nice to him and paying him the fact that this was the biggest thing he'd ever experienced in his life it failed and now suddenly he's experiencing something bigger and the bigger thing is forcing him to acknowledge the reality of the thing he did doesn't actually matter that much and he's to get over himself instead he brings himself here ignoring any positivity or good faith anyone approached him with including the good faith I started this with earlier on my little threat up there anybody doing things like this he would just ignore because he's too fixated on this and rather than acknowledge that there's all these people who hate him what he has done instead is invented this now he is convinced the real wrong is Theo the reason there's so much negativity in this life the reason everyone's flipped on him the reason his life's falling apart nobody likes him nobody will ever hire him okay that one is my fault the fact that everything went wrong and No One Believes him is my fault and I don't blame him for that that is human nature if your brain is so feeble that you were meant to live in this little circle here with a couple people that are have social familial obligations with you to never be mean to you then you're not going to succeed on the internet you're not built for that and that is normal most people will not handle this circle well and I've even seen this happen to good faith maintainers like I don't want to play a specific example because I want to out the person but there was a very prominent open source maintainer that felt like his work wasn't being appreciated properly because of another project that was performing really well this open source maintainer wrote a long thing about how their solution was actually really good and they felt like it was unfair that people were saying the other one was always better than theirs another influencer did a video I considered quite irresponsible saying that they were coping in bad faith and pretending their thing was good when it wasn't and suddenly this person who had a little small group of people and no nobody in chat's guessed right everyone's saying that they know who it is none of y'all know who it is I've actually done a good job op skating this one he went from his little small circle to a slightly bigger circle of people who understood his project and cared about the thing he was doing he was trying to defend his little circle his Circle still existed and that was the crazy part with that guy he still had his admitt not as big but big enough circle of people who got it and one of those little guys in it being positive was me but another influencer I don't want to out who they are in my opinion irresponsibly covered the situation and put that good faith maintainer who was probably a little too spicy with their post defending their stuff was still working really hard still pushing the ecosystem forward working on a dependency that by the way everyone in chat has installed on their computer right now it's a huge one suddenly they're getting more attention than ever and the majority of it is negative there are more negative circles happening to them right now than they've experienced in their whole life up until that point and if you've only had five people be mean to you in 30 years and suddenly you have 500 people being mean to you in 30 minutes your brain shuts down that is it's not human to be able to handle that and it's whatever disorder I have that makes me capable of it is one of the reasons I can do the influencer thing my brain is weirdly capable of just blanking out all the negatives just taking all these red dots and just mentally erasing them because my brain makes the green ones bigger not the red ones so because of that I can cope with the horrifying amount of negativity in my comment sections with the terrible things people lie about me on the internet about all the time there are so many delusions that people have spread about me they're actually kind of funny sometimes the level they go to apparently I stole my biggest project from a Indian kid and pretended it was mine love those ones I have learned to Value things a bit differently though rather than pay attention to the negative people I pay attention to the people who I look up to so if I have people I care about like the awesome open source maintainers that I regularly shout out for my success like I wouldn't be here today if it wasn't for Ryan carniato Tanner Lindley and Fred shot those three people I respect so highly and if any of them reach out to me and say hey I think that might have been an overreach or they are concerned about something I'm involved in this has happened then I immediately overthink everything address it and do my best to to fix whatever they're calling me out for because I trust the out of them and if they think I'm screwing up and I didn't that is a thing I need to reflect on and fix but if a random a non anime propic account on Twitter is saying that I a horrible person ruining the open source ecosystem why would I value them over these awesome people who taught me how to code why why the hell would I ever value random and nons over people who I actually look up to because my brain works that way I can handle the negativity great but that's like a skill I've developed over the years normal people don't have that skill their brain does the opposite all the good things go away and all the bad things consume their brain you have a couple options at this point you can cave to the Mob I won't pretend that's going to magically solve all your problems often especially negativity is misplaced like if the OM I was talking about earlier was to Cave to the Mob it would not have benefited him at all but the best thing to do honestly it's intentionally move back to the small circle if you are forced into this big circle where everything is so super super negative delete your account for a bit just go offline go hang with people IRL that you actually know and trust that don't get any of the stuff like when I'm in a big drama I have my pocket of friends usually from the skateboard scene that I'll go hang with I don't know any they don't even have Twitter accounts they live in a different world and if this is too negative the healthy coping ISM isn't to prove each of these red dots wrong with crazy conspiracy theories the solution is to move the on get out of there because when you're not responding the circle vanishes and all these bad people all these negative things they just slowly start to disappear they feed off each other but they grow through your attention if you can just stop living in that Circle if you can just ignore that and go back to your small circle in the separate worlds you'll be fine okay there's a couple reasons you might not do that one is that you don't have any friends IRL so the circle would be empty I have a feeling a certain individual might be in that boat you might feel like the thing you did or that people are upset about is damaging something you care about a lot so with this open source maintainer the project had a lot of people contributing and he was concerned that the negativity towards what he said would reflect poorly on the other maintainers of the project so he was really concerned and spend a lot of time in the circle I out to him because I was concerned for him I was like hey you're getting negativity you don't deserve this sucks it's not going to feel right but I need you to just go offline for a week or two just just sign out go do other things here's my phone number I'm here if you need to chat just go chill you didn't do anything that wrong here the blowback is absurd don't take it personally don't blame yourself for any of it just go away until it's better I don't think our friend Matia has that which is why Matia went here instead he doesn't have people who notice when he is spiraling he doesn't have relationships and friendships and people who trust him because he just steals their code and tries to sell it Matia has to have a reason this is all happening and the reason can never be that he screwed up the reason has to be someone else something else something bigger something he can blame so he never has to deal with what he has done and that thing is me and I doubt he watched this far but if he did or if you're in a similar place and I've seen this happen so many times I can't emphasize enough the best thing you can do by far is get the outside leave the internet chaos our brains are not wired to be told even three negative things in one day like the human brain cannot handle a pile of negativity at once it's not built for that so don't pretend it is don't let your brain go through the crazy bental gymnastics to figure this circle out the human brain is not built to process if you try to you will hurt yourself and you might hurt others in the process chat has summarized this really well this is the longest possible way of saying go touch grass yeah yeah real quick thing from a vs code team member pretty important here wanted me to ask if my viewers would report abuse if they ever see anything malicious on the marketplace there's a lot of you guys here that use a lot of these extensions it's not that hard to download their code and take a look if you ever see anything that sus don't be scared to report it as abusive even if you're not sure their team is really good these guys take the stuff super seriously they're working hard on making the coms better and doing everything they can to make the ecosystem as safe as possible and it's a huge difference for my experience with the Chrome team who just like kind of sit in a corner and twiddle their thumbs and pretend they're doing something to keep the world safe when they're not these guys have been so much more responsive and involved than I ever would have expected they've been great to work with don't be scared to hit that button give them the opportunity to keep us all safe and I'm not the only one who feels that way everyone's taking this super seriously we see the work you guys are putting in we appreciate it a ton so thank you all vs Cod team for the hard work and to anybody else watching don't be scared to hit that report button good people are keeping an eye on these things what a wild ride this one was I'm thankful that it's not super likely this actually ended up being malware but at the same time it is horrifying that all of this can go down in the open source space there is still a lot of risk whenever you install any extension so be careful when you do install them and in the end you should probably pick a different theme at this point my Fork is there if you want it but use something else hopefully this help you better understand why these things happen and maybe just maybe the next time something like this happens we will stop the person when they start harassing other maintainers instead of waiting for them to get this far down the spiral we can catch these things early it's the same person who harasses you at the start that does this at the end and if we start jumping on those things earlier and calling out this bad behavior when we first see it if we take the opportunities that we're given by these lunatics to stop them then maybe this won't happen again in the future so take this as a precautionary tale when an open source maintainer deletes the entire history of their and other people's work and starts threatening to sue everyone else around them there's a good chance we shouldn't let that person continue their work until next time peace nerds




## Why OpenAI Un-Fired Their CEO - 20231119
none of you'all heard about days off around here seriously I just wanted to enjoy my weekend I was not expecting have to cover more news but here we are looks like Sam Alman is back at open aai speedrunning the Steve Jobs Chronicles of going from fired to rehired at your own company I never would have expected this certainly not so quickly but it seems like the distance between the board and the company is so great that this type of thing is going to happen so let's talk a bit about what just happened why it happened and speculate on what caused this and what things are going to look like going forward for open AI first we need to look at the tweets because almost all of this is unfolded on Twitter X whatever you want to call it so started here with this out of nowhere tweet I love the open AI team so much from Sam when this tweet went live there was also news going around that the team at open aai was pushing back really hard on the firing of Sam it seems like the board made a massive miscalculation where they assumed that the CEO and the employees just weren't that close which is easy to do when you're the board and you're multiple layers removed from the team but Sam's Focus was never the board his Focus was always the company and the people he was working with every day in making an incredible product if you look at the quote tweets here so many of them are from other employees one of which is really important and we'll talk about him momentarily there are so many of these are just other employees of open AI offering their support to Sam in this chaotic moment one of these employees is very important and likely part of why this shift happened Greg Brockman GDB this was breaking news that came out moments after my last video Greg was supposed to be moved to a different role at the company when was fired but because of the nature of the circumstances he was too upset to stay and almost immediately quit this came hours after the announcement that Sam was fired so with Greg gone with Sam fired and with a team that was rebelling very upset about these changes there's almost no way this company would have survived this is why it makes so much sense that we're seeing a flip back the board can do whatever it wants with its shares of the company but they can't control the team and if the board and the team aren't aligned that's the the job of the CEO to fix and you can't hire someone in to do that it also seems like the CTO who was promoted to CEO had no interest in doing this either she was a huge supporter of Sams and has also come out supporting the return of Sam at the company really quick before we go into the details of what dropped today I want to share this funny tweaks it kind of confirms what I was talking about in my last video if I start going off the open AI board should go after me for the full value of my shares which is hilarious because he doesn't own any shares this is hilarious this is Sam wearing a guest bag at open a and there's also a photo in the replies here of another employee taking a picture of him doing this and I'll say this is the most I've ever felt like we're in the middle of a Netflix biopic like this is just straight HBO [ __ ] we're seeing happen live in front of us with Sam going to a company he helped start as a guest as they decide whether or not they want him back so what do I think happened here I've hinted at a bit throughout I think it's pretty simple step one board feels out of touch step two board blames Sam step three they act too actively and fire Sam step four there's an all hands at the company to tell them all why this happened and why they were letting go of Sam step five all of the employees push back really hard I'm assuming that many more were planning on quitting and going wherever Sam went or just out of solidarity leaving behind their work at open AI due to the nature of this absurd unexpected firing I think that response was entirely unexpected by the board seeing Greg leave seeing all these other people pushing back and as a result they had to walk back their decision and now we see Sam almost certainly going back to open AI I did not think this would unfold at all much less over a weekend but it is a really important update and is exciting to see these types of changes happening so fast the team is what matters in the end and if the team wasn't happy with these changes then they need to be walked back I think this is a classic example of a board that's out of touch with a company and what they're doing they're too focused on potential impacts and the ways the company affects other things externally but these are all layers and at the core the very core of any project like open AI or any company or startup or anything in the space is the team building it and if the distance between that team and the board who makes decisions is too great you're going to see some chaotic stuff start to unfold why combinator doesn't even take seats on boards because they think the founders are the ones who should make these types of decisions and this is again why the Sam departure felt so weird to me because Sam's the person who should make these types of decisions not the one who should be affected by them when others make them to me this is an expected correction of a board overstepping when they didn't actually understand the needs of the team and I would expect some people to leave the board as a result so it's been an interesting Journey let me know what you thought about it and what you think's up next because I certainly didn't expect this if you want to learn more about how fundraising works I'll pin a video in the corner from my other Channel all about fundraising for start and how these things tend to play out appreciate youall a ton as always thank you so much peace nerds




## Why Tech Companies Are Moving Off React - 20250610
silicon Valley CTOs are secretly moving away from React as soon as I saw this headline I knew I had to talk about it there's a lot of info in here that's actually very interesting it seems like a lot of CTOs of companies behind closed doors are discussing and planning their moves away from React but there's much more subtlety to this story than this title seems to suggest and a lot of the moves these companies are making seem really misinformed to me i really want to dive deep on this and why some companies are rethinking their move to React and also what they can do in order to fix the problems they are currently experiencing with React they do have real problems i will never say otherwise but I don't know how many of those problems are React versus React enabling developers to do things that are less than ideal versus bad developers can get by with React and they're more likely to make bad decisions there's a lot of layers to this chaos believe it or not the React team isn't paying me to defend them like this but someone has to cover the bills so a quick word from today's sponsor and then we'll dive right in as you guys know by now T3 Chat has exploded and people are asking me about it all the time and there's one question they ask more than any other where's the mobile app well I have a great answer finally and the answer is actually today's sponsor Infinite Red these guys are who I picked to help us build the T3 Chat mobile app we're about to get started and I'm so excited to show it off once it's ready so why did I pick this random firm instead of hiring a bunch of people it's because they get what they're doing really really well i'm in great company with the other businesses they've worked with more importantly I trust the team themselves jamon's an old friend he was one of the first people to see my content and really get what I was doing he was actually the first person to invite me as an individual onto their podcast to talk about tech stuff which was super cool really early on he's deep locked in and gets this stuff more than almost anyone else does the rest of the team's been awesome to work with as well these guys really get React Native and they're not trying to hold that back from you and then sell it as a service they're trying to help you level up too if you want to use them to build your app from scratch you can do that if you want to bring them in to come fix your old broken app written in Cotlin or Swift or Java even they can help with that too if you have an old React Native app that needs to be polished up and modernized they can absolutely do that but one of the coolest things they can do is a boot camp they can come in and onboard all your engineers to learn React Native be it old mobile engineers backend engineers and obviously web engineers as well they've had a ton of success with that realistically speaking most companies don't need a React Native expert to make a great app but they do need it to get started properly scaffolding React Native and getting all the parts proper is not an easy task even for a dev like me and I'm so thankful to have Infinite Red guiding us down the happy path to make it so our entire company can confidently ship on top of a great start thank you to Infinite Red for sponsoring today's episode check them out today at soy.v.v.v.v.v.link/Ifred this will be fun i also want to say upfront that we will not be reading this whole article because I had already started filming this before learning it was actually a member only story so if you want the whole article the links in the description but you will have to pay the medium subscription to read it so I'll be intentionally skipping sections i don't want to create an alternative piece of work from their article that you can use instead of reading the article this isn't a market alternative this is a response and I will do my best to read this in good faith not the whole thing as content so if there are pieces missing and you're curious the link's in the description react isn't failing because it's bad it's failing because it succeeded too well those words from a CTO at one of the Silicon Valley Unicorn companies stuck with me we're having drinks at a tech leadership meetup in Palo Alto the kind where people speak more freely after the second round conversation had turned to front-end architecture and I noticed a pattern in these closed- dooror conversations that wasn't reflected in public discourse react is still dominating but a lot of these companies behind the scenes are starting to explore alternatives here's the first quote I want to start going in on vp of ENGE for a fintech company that process over 2 billion in transactions explained that they went all in on React in 2017 but by 2021 they had a major app with over 200 devs and the scaling problems became impossible to ignore so apparently an application with 200 devs working on it with React will result in scaling problems that are impossible to ignore i can't talk about all companies but just to to start why I don't necessarily agree we had over 600 devs working on the Twitch site and the scaling problems were not React they were funny enough TypeScript TypeScript's whole system was struggling under the weight of the size of that codebase react was totally fine this is another really important point the same person made the React ecosystem made a series of bets that haven't paid off for large scale apps the constant churn the performance challenges at scale the growing complexity of the mental model they've created a perfect storm for teams building serious applications here is where I really start to disagree the React ecosystem made a series of bets that haven't paid off for large scale applications uh let's go through the recent bets that the React rather than EOS the team has made we have hooks we have server components we have concurrent mode we have compiler what other big bets has the React team made recently like over the last eight years i think this covers the like majority of the big ones so if we have these bets I will say wholeheartedly hooks has been awesome for large scale applications do they allow for foot gunning yeah okay people are saying functional components is one of the big bets i would put that with hooks though hooks have been awesome because of how much they standardize the way we add state to our components and also make that state reusable it was very clear in the early React days that we needed a way to reuse stateful things across different components that wasn't just passing them around for a while we did just pass them around that's why we ended up with things that were terrible like mixins as well as things that were less bad like higher order components so I wanted to give examples of how state worked in React before we had stuff as awesome as hooks one of the first patterns we had were hawks higher order components these components would wrap a component in order to pass certain properties down so if this counter needs access to the increment and decrement function as well as the current count we could define that here with a with counter function that returns a wrapped component that then will take this consumer wrapper grab the context pass it as additional props down to the component pass whatever was here down as well it's it's a messy pattern but it worked higher order components were how a lot of applications were forced to manage state when you wanted reusable state like if I wanted to write a GraphQL query that would render the component with that data when it completed this is how we would do it a lot of the time but there's an interesting piece here right here this context bit when we render counter component.consumer this renders a child component and it passes it certain props so we are taking that component because components are just functions taking its input which is the current context from the counter um context which by the way is defined wholly separately up there obnoxiously complex and we pass this so we can render the correct component which is coming from the width counter wrapper there with the wrapped props it this it's so annoying to manage this pattern especially at scale especially once you have weird props being passed around in the process it's not fun and then we had render props which is actually part of what we saw there where you have this consumer wrapper thing it calls with these specific properties and then you write the component here by passing those values down directly the good old render props pattern this was the worst you ended up with tons of these giant callouts in the middle of your components and you couldn't do any state management here either you couldn't do much of anything unless you write a full function in there with value changes and a return the problem here was the composability it meant that to wrap anything or add state anywhere you had to define these giant wrappers these context layers in these terrible patterns in line when all we wanted was to get the state so let's look at it with hooks this is with context so here we have again like the we're assuming that the context is where the state exists initially and now we can just use context counter context and now the component we have the state and then we have the return it's so much simpler the magic here isn't oh look the syntax is better this scales better this composes better this lets simple things be simple and something as simple as accessing data in your component was not so simple before so here we have a get users query in GraphQL pretty simple we want users by these fields if we wanted to do this with a higher order component we would wrap the component with this GraphQL helper from Apollo we would pass it first the get users query this is now its own function we have called and it returns a new function that we pass users all of the type data we would want here we have to define ourselves or add a build step where we can manually type it there because the data doesn't live in the component the data is passed to the component through this wrapper layer the order of events for how data goes to the right place here is terrible it's really bad and now we can just render our users with hawk component but we have to like reexport things or export a default in order to do all of this and it's a mess i had to do this so much and it sucked render props is better but worse it's a little more like what we do nowadays but tabbed out a whole bunch and inline in weird ways users with render props we have a query component we pass it the get users query this then calls its child component with loading error and data and here we have the types now which is cool because this now knows enough to know what the types are because it happened right there in within the like closure the problem is we have to write all our logic there now or we can put in another component but now we've just made hawks more complex and we don't get the type safety benefits either there is no ability for a component to access state and know what the state is unless you wrap it the component can't pull in state the component has to be past state through a wrapper let's look at the hook huh loading error data equals use query get users if loading we return loading if error we return error otherwise we return this how is this not comically better i've seen a little bit of I miss class component sentiment recently and those people just aren't building serious apps is this is just so much better it's so much better you get the idea so I think we can say definitively hooks were better at the very least more manageable i would make the argument they are a huge win for large code bases because we no longer have to break up the reusability via components we can make a hook and we can define a custom hook too that's the coolest part we go back to the example here we can instead of use query get users I can do the following export const use user data equals there you go and now I can have this use user data hook in a bunch of different places and it's doing the same thing the fact that the state can be reused this way is awesome i love that especially when the state gets more complex like you're using external state machines or you're managing a shared entity for that state behind the scenes with like Redux or Zustand or something like that it's awesome the ability to define these bits of state as reusable composable pieces where I can call multiple of them in the same component is such a massive win that I I just I cannot sympathize with the proclass component people this was so much better it's just it's such a huge win this also I'm biased cuz I got into React around this time and it was such a good move i'm so happy I did because this pattern has made architecture of applications and the composability of them significantly better this is also where we're going to start developing a theme so if we're talking about hooks before adding state was hard now adding state is easy what happens next you guys are smart what happens when you take a hard thing and you make it easier let's hear it chat there's one guarantee for what's about to happen look at that people do it all the time more adoption people use it too much my dad comes home it's not the complexity goes elsewhere that's not what happened here actually the complexity was gone but that had its own problem more people are going to start using it now more state because adding state got way easier to do where previously it required a relatively deep understanding of how React managed things like like to understand render props you have to deeply understand the way that a component is just a function and the fact that the child can be called with custom parameters by the parent in this way it's a weird niche way of using React and kind of abusing the child rendering system and you have to understand at least a little bit before you can add any state to your components in an even vaguely reusable way that was a huge blocker most people couldn't add reusable state to their components because of this that meant you only had a couple devs who could build these systems and everyone else would copy paste it that meant that most React devs were way less productive but also they couldn't do as many bad things because they couldn't do as much in general if we were to say that theoretically 30% of the decisions a average React dev makes are bad so we say like this is the bad part and this is the fine part if they're only making this many decisions it's not that big a deal especially if a senior dev can come in and clean up whatever bad decisions they made so if we were to theoretically make it less that's great but what if instead of changing the ratio here we just I don't know 10xed the amount of these decisions being made by these less good devs at that point it wouldn't even matter if we made it 10% because the number of decisions these devs have made is going up because previously those devs were copyping code they didn't understand and couldn't do things that weren't already in the codebase now even if making the right decision is easier they're making way more of them there are more of these devs shipping more code so uh even if they cut the percentage of bad decisions in half it's going to feel way worse because there are more junior devs more inexperienced people who don't understand React as well writing more stateful code because they made it easier let's be real when we went from horses to cars the number of accidents in transport probably went up a ton if we were to frame this as like last year only 200 people died on the road this year over 400 people died on the road ban cars hopefully we would agree you are insane because like the problem with cars isn't that they're way more dangerous than horses the problem with cars is that suddenly way more people are doing way more transport way more often and if we were to measure this not as a raw number but as a percentage of total miles traveled you'd realize how safe cars are that's also the case with flying flying might seem terrifying when you look at the percentage of accidents and the percentage of fatalities relative to the miles flown it's like 1,000th as dangerous as driving in a car and yes what I'm saying here is hooks are cars before hooks it was too hard to add state now it's really easy which means that we now have way more state that doesn't mean hooks are bad it doesn't mean hooks are anti- big codebase because big code bases have a lot of state in them it means we have a different problem now which is instead of state is hard so only the senior devs can add it the problem is now state is easy so we should make sure devs are adding it correctly that's not a failure of hooks that is a win of hooks but it will always be framed as a failure in hooks because people will look at bad code and say "See you couldn't have done this without hooks." Well yeah that dev wouldn't have made the thing in the first place without hooks that's just how it is so that's the first point I wanted to yell about concurrent mode was next concurrent mode was a really interesting change for React so concurrent React can work on multiple tasks at a time and switch between them uh using cooperative multitasking according to their priority concurrent React can also do something else it can partially render a tree without committing the result uh to the DOM uh so for example React can start rendering an update and if it hits a component that hasn't finished loading for instance React can wait for it to complete before it continues uh and it doesn't immediately have to show a fallback or a spinner or a placeholder or nothing right um and also concurrent React crucially it does not block the main thread um to give a little visualization of what I mean by this um let's compare it to how React works today so today React is synchronous which means when you update a component React is going to synchronously process that update it's going to do all of the work to finish the update in a single uninterrupted block on the main thread right so the problem of course is that if the user uh is that user events also fire on the main thread so if you're chugging along rendering an update and in the meantime the user tries to type into an input in synchronous React that input event can't be processed until after the currently executing render has completed so like all the way past the blue right um in concurrent React however React is going to pause the current render it's going to switch to complete the user blocking task and then it's going to resume afterwards on the original stuff this is a big deal in particular for big apps before concurrent mode started to be a thing you would end up with the sticky keys problem this is going to be very slow when we type the reason is because they intentionally made these components slow to render so if I type something and it triggers an update i cannot type more until the update has been completed so if I start typing the word castle I type very fast so I'm done typing the word it got the first two letters before it froze and it misspelled it because the events came in in the wrong order because the events were blocked by the render step so if we switch this to be concurrent mode where the render gets cancelled and deferred because it's happening at a separate thread so the input can be processed even when React is still rendering it means I can just type freely and it's fine i don't get the sticky keys anywhere near as bad anymore that's a huge win in particular for really large apps that have a lot of JavaScript and a lot of components concurrent mode didn't happen in the traditional concurrency like demo they gave there it's a very different implementation internally now but the vast majority of React apps could just bump versions stop using the three or four deprecated things and just have the win and the results incredible like so many React apps got way faster as a result of concurrent mode and wait till we get to compiler because then it's going to get even better but concurrent mode didn't happen in the traditional sense where like it's now a flag you can turn on and off it's just improvements to theuler for React internally but man the results have been incredible and allowed for big apps to have much better more fluid experiences despite the fact they have a ton of rendering going on you could make the argument that concurrent mode was primarily focused on helping these big apps perform better and that they did that because of the performance issues they were having with React at Facebook due to the massive scale of how people were using React hooks we've established allow for much simpler composability of state sure that means beginners can write code but those beginners wouldn't have been able to write any of the code at all before not a real argument it actually does help big code bases a ton concurrent mode massive win for massive code bases and projects next we have server components we have a lot to say about these so let's do a really quick TLDDR on what a server component is server component is a component that runs exclusively on the server which means the server can now send to the client something that isn't just data traditional React apps are built as a single page app which means JavaScript runs it checks what route you're on and then renders the right components those components can then fetch data making fetch calls using GraphQL to make them whatever else so the components can get the data they need to then render the right UI but all of the things the component can render have to be owned in the JavaScript bundle so if we have a component that has three tabs in it we have A B and C a user can click any one of these and it will change the content of what's rendering to be A B or C but let's say it needs to get some state from the server here we have A started by default so A is selected mark it green to show that now the body here needs to fetch whatever is necessary to render this part when that tab is selected so this will then go to the server fetch some JSON the JSON comes down and now the JavaScript code has to take the JSON in this format and turn it into HTML in this format and the role of the JavaScript is both to call this data from the server and then turn it into the UI that you see in your application when you fetch this isn't that big a deal you could fetch it right when the page loads you could fetch it way higher up you could even prefetch for B and C ahead of time so when you click them the data is already there the key is that the data has to be turned into the UI because the components are only fetching some JSON and that JSON then becomes HTML because the React code in between turns the JSON into that HTML what if instead of tabs though this would render something different depending on what the server decides what if we on the server decide this is going to be A or B or C now even though we don't have tabs we have to implement the code for A and B and C on the client and have the different states that the server can send A or B or C and hope that the server that's sending this and the client that's rendering it are in sync so if I send down a B the UI knows what to do with it it knows okay we have to render the div with a B in it what happens if the component only knows A B and C and we send down D or we send down K or we send down sub please seriously why are you guys aren't subbed it costs nothing just hit the button half of you aren't subbed come on guys the point here being if you send something down that your code doesn't know what to do so if you have like a component function tabs and this component has const data equals use data if data equals a return div a if data equals b you get the idea if this code has to exist in the bundle for every single different state the server could send us now we need to make sure the client and the server are in sync at all times and if there is a change that we want to render a new type of thing we have to revalidate the client bundle so they have to refresh and get the new JavaScript in order to render the new type what if instead we could do this and data instead of being a JSON payload data was the HTML we wanted to render instead that's effectively what server components do the reason for that is because of a thing a lot of companies have had to implement serverdriven UI serverdriven UI otherwise known as SDUI is a very very common pattern for big businesses it's literally built for large companies that have these many client many server many things problems because if I have a news feed on YouTube or Facebook or whatever and the feed has different types of components in it we have I don't know a video player then we have a text post or like a community post on YouTube but then we have I don't know it's let's say it's Valentine's Day so we have a val day post it's a different type of post if the team building the feed decides they want this Valentine's Day post it only works on Valentine's Day then they get rid of it now they have to make sure way ahead of time that all the phone apps that render the feed that all the TV apps that render the feed that all the platforms that get this have a primitive for it otherwise when they send from the server the array that is video player text post val is not going to know what to do with the ones you don't already have code in the client for so you have this huge dessynchronization problem now where the user has to be on the right version of the client before they hit the API and if the client is ever out of date it's possible that any API call could result in a broken render a bad render an error or an outright failure of the app of some form and when you realize that half of users of your mobile app are on an old version of the app this gives you existential dread you effectively can't add new user experiences to your app until you put them in the mobile app or put them in the website get all clients up to date then you can update your back end but until then you can't and that sucks it sucks really hard so what does it have to do with server components remember the example I had here where I said instead of returning the data that we then turn into a component with a bunch of if statements what if this was the HTML instead that's server-driven UI instead of the client having JavaScript code that knows what video player is and renders the right thing what if instead the server sent back what to render so if the server sent back HTML effectively or on mobile the server sending back like primitive React Native bindings that aren't like the actual native code or anything it's sending back the instructions that effectively would have been what React Native did instead you're now writing that return statement that JSX on the server instead you've reduced the amount of logic on the client side significantly and you've allowed yourself to change in one place on the server what type of data is being returned what type of renderings are happening and now you don't have to update the mobile app or the desktop app or the JavaScript bundle at all and you can still render the new type of post because this doesn't need to know what a Valentine's Day post is in order to render it you just hand it the JSX and it will put it on the screen this is how every single large platform rendering different types of content has moved to doing it if you talk with engineers working on the YouTube mobile app or the Facebook feed or Instagram or Snapchat or any of these businesses they have built their own server-driven UI platform primitive and path in order to solve these problems there is an issue though every single company did this their own way the barrier for entry for doing this type of thing was disgustingly high do you know how hard it is to write your own data primitive that can properly turn into an iOS element on iOS an Android widget on Android and the right HTML on the browser with JavaScript integration in it it sucks hard it's really bad just like one fun example I bring this one up a lot project Lightseed was an attempt at fixing Messenger so they could change the way it worked and share logic between iOS and Android without having to rely on the app binary being updated so what they did is they commanded the entire app with SQLite yes the dynamic template layer that controls the UI for Messenger is done in SQLite so if they want to change the UI for Messenger or add a new feature or do those types of things they can ship a SQL migration to your phone not care which version of the app you're on and you're good to go they're not making these bets for fun they're not doing this because they want to force React down our throats they're doing this because they have real problems that are solved when the server controls what experience the user gets rather than the user's JavaScript controlling it instead server components are server-driven UI for everyone else if you don't have hundreds of engineers that can build their own SDUI pattern then you're a normal company there are like five companies that have the right staff to do this and even then they make mistakes with it server components are an attempt to take what Facebook learned by building their own patterns for this all over so we can use it however the we want to this is an even bigger deal for mobile than it is for desktop and web but it's a huge deal for all of them because it means first off way less client logic which is huge if you're a big company if you're building a feed that has lots of different types of things in it like your feed has 500 types of posts instead of having to write the rendering logic for all of those bundle them up in the JS and ship that to the user you can now keep them on the server and just send the markup that's completed at the end so we have way less client logic we have way less version drift because you don't have to care about the client version anywhere near as much anymore we have way lighter client bundles not just because we don't have to include all of that in the JavaScript but because we don't have to include all of the dependencies of those things and we don't have to put the work into rendering it on the client side and the render on the server is cheap so before people start saying well we're offloading the compute running it on the server is expensive no it's not it's not a real expense also this is one of the craziest unintuitive ones the data payloads are on average smaller you would think that sending the markup would be bigger than sending the JSON but the harsh reality is that most people are fetching way too much JSON so if you send just the markup representation instead you end up sending less data most of the time so now I will pose y'all yet another question who benefits more from these your options are big companies small companies and early career devs of these three options who benefits the most from a standard way to do server-driven UI so you get all of these benefits okay course sellers is a really funny answer early career devs is also a funny answer is this really not that obvious or are you all trolling me okay thank you chat the biggest winner by far here is big companies because small companies have way fewer of these conditions and way less complex feeds so they don't benefit from the client bundle changes anywhere near as much and their infrastructure costs are low enough that smaller payloads barely even matter their bundle hasn't gotten to the point where they benefit greatly from the shrinkage why the would an early career dev benefit this is more to learn they're just going to be angry about it that's why I honestly think a lot of the push back on server components has been because these parties don't benefit enough from it the early career people in particular feel like it's way more stuff to learn so these people just endlessly about it the real winner with server components is big companies the reason this was built is because big companies have these problems and either they survive or bias their way through it taking a ton of hits along the way and build their own solution to the problem or they fail i just I don't see how you can point to this as bad for big companies they're the ones who benefit if you were a big company that was halfway through building your own server-driven UI implementation and server components happened you should be praying to the gods at Meta for giving us this gift it's great people seem confused like why don't small companies benefit because they have smaller apps it's really simple this is four big apps the benefit here is if you have a lot of code you don't have to ship all of the code to the client it's really simple i'm begging you guys to understand this i I'm sorry i'm frustrated about this it's just obvious here that if you have a bundle that's really big and you want to cut it down to small pieces there's a good chance you're a big company this is a huge win for big businesses this is a huge win for big teams working on big apps that's the whole point is it hard to move to a server component model when you didn't start with one yeah but managing a codebase with 500 people contributing to it that's at the point where you're shipping hundreds of megabytes of JS across things that are actually written by you and your team obvious win the only issue is sluggish navigation or many loading spinners at the app no you have to wait for the data to load anyways if you were doing this client side instead you'd be waiting on just as many loading spinners i like this framing actions are a net benefit for everyone server components though are mostly beneficial to large companies i'll be real if you aren't already interested in the like the pattern of server-driven UI server components might not be the right thing for you to be chewing on right now just because of all of the fear uncertainty and doubt being spread about them if you don't see the immediate benefit for you just just stick it out chill a little bit for us to figure out how to explain them better this is the pattern I think everyone should be using i don't know if they should be just yet but I would make the argument that right now server components are only a mandatory move like only a thing you should like be excitedly reaching for in this moment if you have problems that match these things if you have a problem where the version drift on your client app is causing people to get the wrong state get broken renders hit error cases because the server changed and the client's out of date server commoders will help you a ton if you have way too much logic on the client side or your bundles are getting way too big server components will help you a ton if shaving 15 to 20% off the data payloads you're sending via API calls would benefit you or reducing the number of API calls and off requests that are happening server components will save your ass but if a 20% decrease in cost on data processing is not attractive to you because the number would go from $10 to $8 stop talking on server components you're not the one who benefits the most from it and I this is why I'm so frustrated to go back to the article that started all this which we've been away from for so long that it timed out i am frustrated because they're claiming that these bets aren't beneficial to large scale apps i would argue that the majority of the bets that they are making right now only really benefit large scale apps hooks benefit everybody way better concurrent mode had the ability to benefit everybody but primarily benefited large applications server components are the attempt to distill the learnings that Facebook and YouTube and these other companies had about how to drive UI from the server and make that reusable for devs of every size and companies of every size so that small companies can set themselves up for success but more importantly so big companies have a way out of the hell they're currently in sending way too much JavaScript to the user and now we have compiler the React compiler i I would hope and I'll ask chat again who benefits the most from React compiler guys who benefits the most from React compiler we have junior devs we have my two users big companies thank you chat big companies are the biggest winner from Compiler they ran Compiler on a bunch of code bases at Meta including the Facebook codebase and the Instagram codebase parts that are in React and despite the fact that it was meta which means it's the people who made React and they are for the most part writing much better React code than a lot of other companies do the compiler still saw massive wins this is an actual real component from our codebase i had to rename some of the variables for legal reasons but please trust me some poor engineer at Meta actually needed to write all of this to describe their UI if you didn't hear her this is the code for one component and just to repeat this is a single function one component small teams aren't writing this this is a big company problem here we're not going to read any of this code but I want to show you why it takes so many lines to describe this logic let's control F to search for every call of use memo and use callback wow that's almost 20 places where that developer hand optimized an object i also want to see how much of this code on the screen is spent just describing memorization so let's also highlight the dependency array arguments so all of the code in red that only exists to describe how to avoid recomputing values and finally I want to see how much of the business logic had to be wrapped and passed to use memo this reflects how much cognitive overhead it takes to edit the core logic of this component so now that we've kind of drawn this graph and wrote in these axes I'm going to tell you about the real meta apps represented here this highlighted point we've been talking about with the super long piece of code that comes from a React Native app called Quest Store the app store for Meta's Quest VR devices meta engineers spent a really long time hand optimizing Quest Store because of how dynamic and interactive it is for example take the product details page which I'm showing here i've already bought BeatSaber so I get a button that says download instead of purchase and I can click or scroll with my headset controller um through the left panel for different detail types which might also differ across games now you might also recognize another very dynamic highly interactive React app built at Meta and that's instagram.com a pretty complex website uh with a lot of hand optimizations in 2023 we began rolling out React Compiler on both of these apps now I originally had some boring stuff here like how we resolved to roll out without rewriting any code and how the compiler avoids cheating by removing memorization that developers wrote but let's just get to the fun part and talk about some results um the rollout was a success react compiler has been enabled on Quest or all of instagram.com as the default experience woo so you've browsed if you've browsed for any Quest apps or used any part of instagram.com in the past couple of months you've almost definitely been using React Compiler in terms of performance we measured that for some click and scroll interactions the compiler optimized version was more than twice as fast as before we also saw initial load and cross- page navigation times improved by up to 12% and finally we observed that there was no impact on either memory usage or overall crashes which may reflect out of memory errors this improvement didn't apply to just a few pages either we observed that quest store loads and navigations got faster by at least 4% and Instagram saw an average 3% improvement across every route at Meta this was a really big deal i mean to put these numbers in context engineers had combed through every single bit of these apps to add thousands of memorization calls and of course this work was done against metrics which rewarded and the scale of every single optimization on such an app improving just a single thing something like the time to first paint of a specific page by just one or two% would already be a huge deal but React compiler had significantly improved the performance of nearly every page it rolled out on but sure React Compiler will make your to-do list app like 10 lines of code fewer and 15% faster so clearly compiler is just for small apps and small devs right i This is why I'm so frustrated because all of the big arcs that the React team has taken on could be potentially pitched as four earlier career devs if you don't understand them at all but the winners the biggest winners for all of these developments are people who want to build businesses at the scale of Meta the reason that they did these things is their own internal needs learnings and usage all of these bets that the React team made were made to make it scale better for big apps and most of them have already paid off and the rest are quickly on the way there too it's just insane to me to look at this list of things and be like I don't know but I don't like Next react team evil they don't get me anymore this is how I see a large portion of the anti-react sentiment it's this so to go back to that blog post that I now feel I am fully in fair use territory for let's go through the patterns that are driving the shift let's start with the performance ceiling performance ceiling effects uh some of the best performing apps ever made were in React and some of the worst performing apps were made in vanilla native technologies so let's see what they have to say here we've got a team of incredible React developers who've optimized everything they possibly can we've impleeded virtualization memorization code splitting server components all of it and we're still hitting fundamental limits that are baked into React's core design they're seriously productivity SAS our React front end hits performance bottlenecks at around 60% of the interaction complexity of our native app uh yeah you're comparing a website running in the browser to a native application are you joking yeah running something in the browser is going to inherently have more performance restrictions than running it in a native layer the fact that React can get to 60% of the complexity of your native apps is insane to think that this would be better if you used vanillajs instead is delusion actual insanity so let's go through these specific issues there's rendering performance for large data heavy dashboards as we just established server components help a shitload here and more importantly React compiler carries so much here too performance for these types of things just got way better generally speaking if there are large data heavy things and they're running poorly in React most of the problem comes from using React where you shouldn't like you shouldn't be afraid to pull things out of React there was a great tweet from Adam today that I feel like emphasizes an important lesson more people need to see a staff engineer and I are working on a sister project that involve playing audio we need to make sure one track stops whatever was already playing i spent hours trying to add react context he just did this document at query selector all audio for each if a is not the audio we care about we pause it that's great more people should be willing to do this if the problem you're solving is not best solved in React don't solve it in React there's no shame in calling code that isn't Reacty in your React codebase if it makes the problem simpler and more performant i would say in my React code bases less than half of the code is React specific theoretically I could move T3 chat over to another framework and the hard part's going to be porting our component library or building a new one all the data and state management stuff's already abstracted into a different layer in our case we're using Dexi right now by the time this video goes live we'll probably be using something else because we could swap it out leaning into Convex right now thank you to them for all the help with everything but that layer is fully separate from the JavaScript React side to the point where people are building user scripts to customize and change the experience on T3 chat because the dexi database layer drives the UI if you change something in the dexi object the UI updates accordingly the react part is just a function that runs with state and outcomes UI and if you treat it that way it is very very good and very very performant memory used patterns if you're having memory issues in React the problem is not React the problem is the way you're using memory i thought compiler would have a memory hit but it's been discovered since people started implementing it that there is effectively no memory impact with the new memorization patterns because they hold off on so many other additional things as a result so I would like to see what's causing memory problems i think the bigger problem here has less to do with React more to do with the fact that devs that don't know how to use the performance tools in Chrome can now build large apps it is not React's fault that a dumb dev that doesn't understand the browser can build a giant app when before they couldn't the problem there is that the devs don't know how to use the performance tools they have to find these problems that is nothing to do with React at all and I guarantee moving off React won't solve this memory problem as soon as you have an app of similar complexity these people just don't know or necessarily even care about the problem the issue is like if you're writing code without knowledge or care about performance your code will not perform well a framework swap won't change it next point's initial load performance especially on mobile and I agree when you go to a big React single page app for the first time on a mobile device with a bad internet connection it's not great you have to load a ton of JavaScript into the client which isn't fun once you've loaded all that JavaScript you have to initialize it and run it also slow on these older devices then you have to go fetch additional data from the APIs sometimes via waterfall so multiple additional back and forths and then you can finally render the UI so if you have these performance issues again perf issues on mobile those come from as I was just saying one fetching large JS payloads two running those large payloads three lots of back and forth to server API these are the key things that cause performance issues on mobile and React do you know what helps with lowering the payload side and reducing the number of round trips between the client and the server say it with me chat server components it's almost like the React team is working on fixing these problems crazy yeah I agree if you're running way too much JavaScript on the client you're going to have performance problems on low performance clients so let's move that off the client rather than move off of React and reimplement half of it ourselves but worse in JavaScript oh god don't get me started with the growing complexity of performance debugging learn how the browser tools work your problem isn't that it's harder to debug your problem is that you don't understand the tools i will say that the performance and debugging tools for React Native were not good they are getting a lot better but mobile performance is a whole shitow in the first place so yeah if this was an argument about React Native being hard to make performant without knowing the niche things to debug performance issues that's an okay argument i would hear that one out more than a lot of the other things being said here but yeah this is just utter also on the point of like React having 3x the investment here do you think that investment is going to go up or down if you move off React take a wild guess point two the growing metawwork problem in 2016 React felt lightweight you could be productive quickly now to build a production grade React app your devs have to spend 67% of their time on React specific patterns configurations and optimization techniques instead of solving our actual business problems let's take a look at recent PRs on T3 let's look at ones we actually merged text wrap toggle for code blocks that's a feature let's see how much of this feature was us fighting React specific stuff if is Mac OS we change the key okay this line could be argued as React specific though we had to pass the dependency okay so there's one line in this PR that's react specific here we are passing the is wrapped value down you could argue either way i'm going to argue against it being React specific so you have to get that there somehow anyways code body wrapper is wrapped boolean pass down we grab the tool tip this implementation is reacty but it's not react that we're fighting with here at all is wrapped set is wrapped are things we pass down perhaps us passing is wrapped around like that could be argued as React specific i would still argue against it we have our div with the updated copy button we have our use state for is wrapped we pass these things to the wrapper and we pass the result here to the code body wrapper that doesn't feel very react specific to me and this is the first example and I would argue it's going to be one of the more React specific ones quote reply might have a bit more rate limits for providers that's entirely server side so nothing command for Mac shortcuts only same thing you saw before nothing to do with React patch pace limit bypass via edit nothing to do with React add token limits to text uploads nothing to do with React me fighting post hog for two days nothing to do with reactive all that was just some terrible node code i have a I'm going to do a long video about that one that one's all  solved errors also show skeletons this was a fun bug somebody reported let's see how Reacty this bug was oh we just didn't include this additional state check this is actually a thing that's way easier because of React rather than way harder so where's all of that time being spent fighting React i thought that I was supposed to be spending 70% of my time doing React stuff i think it's like 10 and the amount of effort that React has saved us the fact that we could build this app in the first place is insane and even more insane is that I was using a spelt-based chat app somewhat recently and it was one of the slowest and most like unperformant apps I've ever used it crashed my Chrome tab twice so no switching to a faster more performant framework isn't some magic win here it's not a win at all cuz it's not real so I I just I fully reject this the only reason you'd be spending this much time in the React specific patterns is if you have engineers convincing you that React specific is necessary and I've dealt with that i ranted about this a bunch in my it sucks being a good engineer video because I've been on teams where they write this crazy document about how they're going to use all the React features to add a  button to a dashboard and you should fire those people it doesn't matter what framework you're using that dev is still an and they're still going to hold your team back it has nothing to do with React and as Chad is catching on to here hooks made me way more productive i don't see how React was more lightweight for developer experience in 2016 it makes no sense at all make it simple make it right make it fast absolutely the changes to React have made it way easier to do simply with hooks way easier to do write with compiler and concurrent mode and way easier to do fast with all of those plus server components too and as this person said you can still write 2016 React code you can write a class component and put it in your modern React codebase even doing crazy serverside and be totally fine dumb lazy dev propaganda don't mix them up with lazy devs though lazy devs like React absolutely i'm a lazy as dev being lazy is a virtue of good developers okay let's go through this list of things that you have to know in React component life cycles and hooks i'd make the argument that the point of hooks is that we stop thinking about component life cycles and instead think of data and state life cycles so I'm going to change that to that complex state management strategies okay how about React query i'm going to change this so I'm just mapping all of these so I'm going to change component life cycles to data life cycles we're going to change complex state management strategies to React Query probably all you need if you need more than that then you have a really complex problem it should be hard to solve but if React Query can be all that you need you add that complexity yourself if you're making something more complex than React Query either you need it so stop bitching or you didn't need it so stop bitching memorization and rerender optimization i thought we didn't like the direction of React though guess not because compiler makes this go away data fetching patterns okay those are hard but those were always hard and we're making real improvements on it wait data fetching patterns and server components are separate thought that was the whole point dataing patterns react query plus a bit of refetching i I'll go a bit further with that one just watch a  Theo video they're like one or two videos of mine and you will be more than good with data fetching patterns and understand it go watch my all the ways HTML gets to your browser video if you actually don't understand how that stuff works this is one of my best videos and it's massively underappreciated for what it is like all the comments are "Holy this is so good why is nobody seeing this?" this video will be more than enough for a lot of these things that said this is the first one I will say like yeah it's somewhat complex not because of React because data fetching in large applications is an inherently complex task but sure data fetching is something people need to know about now server components versus client components and I'll I'll say the controversial thing here let me just move these so there's better spacing just skip until you need it i think server components are awesome i think more and more people should be using them i am very excited for the future where more and more of us can use them for more and more things but for now whatever if you actually think this is some big complex thing you have to learn either you have really complex problems and you should do it cuz the alternative sucks you have to build it yourself instead or spend a weekish not even probably like 2 to 3 days better understanding the idea this component runs on the server but it can mount a component that runs on the client and just forbay any dev that isn't one of the two or three that gets it from writing a server component ever just force them to have used client on top of all their files and move on with your life not that big a deal suspense and error boundaries this takes 30 seconds i I don't Why is that here the suspense means if there's a component that is blocking render because it needs something like data the suspense boundary gets hit and it renders a fallback until the data is there cool you now understand suspense error boundaries if a component can error you can wrap it in a thing called an error boundary so when it errors that component gets hit instead of crashing your application wow so complex that's so much you have to learn build tools and config just use Next man you can't complain about Nex.js JS and then complain about build tooling and config pick one battle seriously I what it's like Python is hard because you have to learn about if statements else statements for loops data management threads significant whites space pip uv vnv variables dictionaries python is so complex guys why would anyone use this you should just make your own programming language instead or just write it in C++ do you understand how stupid this is if you just list a bunch of features say "Look at everything you have to learn." Yeah I I hate doing the dumb voice but this is a dumb post oh boy the talent and onboarding crisis this will be a fun one i can tell this one won't drive me insane i am sure that there are lots of talented devs you can easily hire and onboard to your custom vanillajsbased framework i'm sure that's going to go great for you let's see what you have to say here several CTOs mentioned a surprise problem while React devs are plentiful truly skilled ones who understand deeper patterns are increasingly rare and expensive what do you think there are more of people who understand React's performance characteristics or people who are available for hire that deeply understand how to build it themselves and what level of knowledge do you think you have to have to know React well versus to build your own React cool let's take this quote we can find a hundred devs who can write React components but finding people who deeply understand React's mental model and architecture for large applications that talent pool is shockingly small do you think that pool gets bigger if you move off of React are you stupid i'm sorry like I I don't mean to be this harsh the way the article opened I actually thought we'd have some good conversation here but this is just the stupidest thing I've read in a minute holy hell am I insane you You don't solve this problem by moving off React if your application is large and has performance issues changing frameworks doesn't make it easier to find people who can do it this is insanity i see why they pay this post it  sucks again if you want the whole article make sure you go pay and read it on the website i'm not here to give you an free alternative to the article i'm here to explain why the things I'm reading from it are bad if you want to digest it yourself without my interpretation feel free go nuts the link's in the description but I just grabbed this quote from it i wish they said what company this was the quote is "In 2018 we could onboard a new engineer to our React codebase in about two weeks by 2022 it took new hires two to three months to become truly productive in the same application the learning curve has become exponentially steeper." Okay let's let's pitch this one to y'all if you have a code base that was easy in 2018 and is hard in 2022 which of these options is more likely the reason that happened one React got harder two the app got more complex or three there is no three do you think a codebase that was easy in 2018 and is now hard in 2022 that happened because React got harder the Olex or we moved to next JS chat's already going got a lot of twos three he could have gotten dumber yeah this crazy thing happens as code bases get larger they get harder to work in crazy I know absurd wild assertion on my part to say that an application got harder to work in because it got bigger and more complex the lack of accountability here is just so absurd to me like like what this is is a bunch of CTO's that miss how easy things were when their code bases were small and instead of finding ways to make the process better they're going to blame the framework instead it's insanity s with all my personal projects too the first 80% of the apps finish in a matter of days getting it production ready is a whole other ball game yep i drew this diagram in my future of HTMX video because the assertion was that React resulted in apps being too hard to maintain but the reality is that over time new tools and technologies made it easier to build complex apps before this graph is how complex can your app be and time the difficulty to build complex apps is is red so it used to be really difficult to build a complex app but over time it's gotten easier because of tools like Angular and React and Hooks building complex apps on the web is easier than it's ever been the complexity of the average app has gone up accordingly when it becomes easier to make complex things more people do it and complexity goes up the other important detail here is the expectations of users have increased too users expect better apps that can do more things especially in the web previously we expected a crappy application to check our email through adulthia.net net that took minutes to load now we expect something as snappy as Gmail on our phone these code is being hard to work in isn't because React is so complex it's because the product is getting more complex and we should be thanking React for making it possible not mad at React for being involved in the things that are now complex the next section is framework churn and this section is focused on all of the things that we have changed with how we manage things in our React applications so let's see when these changes happened i'll break these down one at a time class components to function components was pre207 to 2018 plus so this one was 6 years ago shut up and the best part not only did we not deprecate class components not only can you still use them totally fine you can use them inside of function components and vice versa i know crazy but you can write a function component and call it from a class component and you can take your old class components and call them from function components this is a huge net win that isn't churn because it's fully interoperable this isn't Angular one to two like what this is a better way to do things that we could start implementing and use alongside the old way to call that churn is to not have ever experienced churn you never had to deal with the thing you were using deprecating the way you used it and being stuck on an old version or like having to migrate off it it sucks if you didn't have to migrate an AngularJS1 codebase to Angular 2 don't use the word churn you don't understand it next point Redux Context API to signals the timeline for this one's a bit weirder admittedly Redux I would say maintained its relevance until like 2019 context was a weird era i think we we largely agree the Context API isn't the way to manage your whole application state anymore but it was an attempt to do better state management inside of React so from 2019 to I'm sorry to we have good options now also did you notice the lack of mention of React query it's almost like they're ignoring this library that is used in a fourth plus React application i think it's actually six out of 10 last time I saw we're ignoring this library that's used by the majority now of React apps that reduces all of the churn here and I've been using React Query since 2018 and it's been my main state management choice since 2018 there's no goddamn churn there at all i am more committed than ever to React Query and what's even crazier is Hooks enabled that hooks enabled a primitive that's so good that I don't have to worry about all of this churn like I play with Zustain and Jodai here and there we use them a bit here and there in our apps what's really crazy let's look at the complexity here give an example of managing a semicmplex stateful object in React give the example using Redux pre208 context with hooks and a more modern Zustand implementation so here's how we would do this before with Redux we would create all of our actions we would create the functions to use for these we would produce our reducer function that handles all the different cases and applies the right thing but depending on the event we would export a root reducer through a store we would then consume that in the components by writing our handle add function that is part of a class component so we have to call this props.add item and we have to get it that mapping by wrapping it with the connect to attach the state from Redux to the component that is a lot of code react context and hooks quite a bit the same we create the state context we create the dispatch context we create the reducer function again we have the layers here we have our use cart hook that handles these things but at least the client code is now a decent bit less annoying we just wrap with the cart provider and now as long as this is wrapping our app we're good to go we then use cart items add item remove item and we can just call those and it's all fine awesome great cool let's look at the zest implementation import create from zustand here's the whole implementation here's how we use them we cut the amount of code in 2/3 and even better the old Zustan code still works it's still in our code base it can still run totally fine twitch still has a ton of Redux everywhere you don't have to throw away the Redux if you want to start using Zustan for new things and I see why you'd want to use it it's way nicer on top of that for a lot of these things like in this example items probably isn't coming from the client side items is probably coming from the server so you'd probably want to use React Query for this instead like items would probably come from server can you give an example with React Query instead so this is adding the fetch cart function as well as custom functions for adding and removing where we're hitting a real API so this is already doing more than the code we just saw here's the Redux code now handling this oh no it's not it's adding React query to all of those that's annoying retry little Axios okay it added a bunch of optimistic updates annoying but fine but how cool is it that we can take the API call just wrap it in a function and then call that with use query cart items fetch cart useation add item API this whole part is optional it's nice to do the optimistic mutation so when you make the change it appears immediately on the UI but it's optional and it allows us to not have to do any state management outside of the API management because the thing that these examples don't show is when you make a change to the cart that has to be synchronized with the server and when you load the page we have to get the initial cart state from the server this code goes from complex to obnoxious when that happens we have made massive improvements and I just I don't understand how you can frame improvements ments as churn because they're all optional they are comically better they all compose with each other you can add Jodi to one component in your codebase without having to change the Redux code at all speaking of things getting way easier you have to change the code at all they got the order here wrong we started with hawks and moved to render props so I'm going to fix that for them went from hawks to render props to custom hooks we went from bad but necessary to slightly better to way better also that churn 2016 2018 so no we've had hooks stable since 2018 it's been 8 years since this churn happened okay this one's just delusional migrating from create react app to next to remix to vit are you trolling me am I am I falling for a troll article right now i feel like I'm just being made fun of at this point no one's actually done this absurdity i Yeah okay chat's concluded i'm falling for Rage Bait right now rage Bait doesn't even make sense remix to Vite or V makes sense because it became a V plugin yeah i need to migrate from Python to Go to Java no you need to migrate from Python to UV to lisp like like it's it's hopping between like technologies like create react app is a template next.js is a framework remix is at the it's funny enough it started as a template became a framework va bundler etc what's etc here how do you etc on your framework what and what's even crazier is like the migration from create react app to next is only complex if your create react usage is complex if you ejected from create react app and added a bunch of crazy things to your Webpack config you have a complex app moving to next means you're making it less complex the only reason this migration would be hard is because you are not using create react app for what it is you're adding your own things to it and there's a good chance you get to throw those all away by moving to next that's huge that's a that's a big win i did a Webpack 2 to3 migration for Twitch before I learned React and it was hell i love doing that type of thing though twitch's life would be so much better if they were on Nex.js at the time now with Turboac finally really happening it makes more sense than ever to make that move but like yes a complex app was not well served with create react app so complex apps that used it had to build a lot of things on top that's why they deprecated it of this list the only thing in here that's been deprecated is create react app and they did it because it forced you to implement that complexity yourself next handles it fine remix handles it fine vit can handle it fine create react app and its hell of Webpack plugins could not we should be thankful that that died and we should also be thankful that moving to next isn't that hard and the craziest thing is you can copy paste all your React components over and they work the only reason moving from create react app to next would be hard is because you are doing crazy complex things in create react app a vanilla CRA to next is an easy move i've done it for many of the companies I advise and that I've invested in because they started with create react app for some reason i port them to Next in literally two hours with AI it's not that hard thank you chat for giving me my credit where it's due i'm the reaper of create react app i put so much work into killing that starter template it was so bad the Webpack word should be banned you guys get it okay so this whole line is just i'm deleting it client side rendering to serverside rendering to server components so you have to do this moved to you might want to do this to this solves real problems for big apps okay so you have to CSR things almost always if you're building interactive things fine whatever cool you didn't migrate from client side rendering to serverside rendering you chose to add serverside rendering as part of the pipeline this isn't a migration this isn't a churn we're not churning from CSR to SSR we are adding SSR to our application using SSR isn't turning off client side rendering it is an additional thing to optimize the things we're sending to our users and server components are an additional optimization there these aren't things you replace one with the other on these are things you add as you go down the line insanity so yeah that whole section of the churn tax is just it's just  half the people talk about churn and like everything changing i look at their argument and I laugh at it because it's just so wrong uh credit where it's due traversy Media recently went on a rant about how bad a bunch of updates to React and Tailwind were and he came back and apologized for it a few weeks ago I made a post bitching about framework updates i mentioned React Router and Tailwind i've been busy with other projects the past couple of months so I didn't actually get to use them i think I did what a lot of us do and I saw some breaking changes and I got upset however when working with both Talin 4 and React Router 7 I've changed my mind both updates make them easier to work with i don't like trash talking people that don't deserve it i wish you were the one who wrote this article cuz it would have been deleted before I got to it i I have so much respect for Brad for doing this that I I I filmed a video about his original post and I'm 50/50 on if I'm even going to bother posting it now i did film an addendum about this because it's such a bro move and I have so much respect for him for posting this credit to you Brad thank you for letting us go through this with you it is better than if you never made the post in the first place i'm sad that this didn't get the attention it deserves relative to the original post but it was important and as he said at the bottom he doesn't feel like anyone cares but he wanted to clear it up i care a lot it's so important thank you for sharing this because it makes the point that I hope the author of this article realizes also he said that he did the same when hooks replaced classes now I couldn't imagine using React classes anymore so my point is go beyond the initial frustration you may see that things are better for you in the future crazy and similar to the React router and Tailwind changes they didn't really do breaking changes you can move over to the new pattern or you cannot i'm using React Router 7 in my T3 chat codebase as though it was React Router 4 everyone saw React Router 7 they're like "Oh my god my application has to use all these new things." No it doesn't here's our router routes route path equals whatever element this one just navigates you to SL chat latest chat helper new chat all of these are components that have a route that renders a different component that's it this is how React Router has worked since I first started using it in 2017 so complaining about the React Router 7 changes makes no sense to me because this is React Router 7 and I could have copy pasted this codebase from a 2017 codebase and it works exactly the same so like like stop using churn when you don't mean churn the reason that you're upset about serverside rendering isn't because it's more complexity it's because you shouldn't have been client side rendering you feel bad you see the solution and you're angry it didn't exist when you started that's not churn that's a frustration about investing too early in a thing and do you know how you solve that i'll give you a hint stop using so early if you don't like when things improve don't use them until they're done improving maybe check out jQuery or Angular and I know Angular's actually improving again so don't check out Angular you're not going to like the churn there but go stick with jQuery and fun thing the guy who made jQuery is a big React guy now he just built an awesome stack where he built a public open source app on Cloudflare using all the cool new React V and server component it's actually really cool so if you want to not deal with things improving go to jQuery but if you like when things improve follow the guy who made jQuery over to React with us because it's pretty nice and if you do want to benefit from these things the process isn't that bad barrel of Lube great username here just drop this and this is actually very good advice step one delete package JSON step two get the default one from an npm init or like a next.js init or whatever whatever you're moving to run bunddev see whatever errors you get start installing until they stop also you don't have to go through and make some changes to handle like weird compilation errors because you had a weird thing in your TS config or you have some crazy Webpack config thing but this strat works great make a fresh codebase copy paste all the source code over and then fix things until it works i've done this so many times and no Redwood isn't the jQuery guy redwood is the GitHub guy but that's separate the jQuery guy did a bunch of posts about the weird I think it's like a wood carving tracking app that he built because he's really into wood stuff and he built it with React in a modern sack and broke down how he did it and it was really cool the mistake that these devs made isn't that they used React it's that they picked a thing that's improving in the ways they needed it to improve and they're upset that that happened and I I regularly say this it is often better to get into a thing late than early if you got into React when context was the recommended way to do all your state I am genuinely sorry that was a weird tangent we went in as a community that was the wrong way that's the only thing here I would really consider churn everything else here is improvements that you can use alongside the original version so if the mistake was that you used React too early in 2016 or 17 and now you feel bad about it do you know what isn't a solution using something newer that will not fix your problems if you're like React is changing too much so I'm going to move to spelt do you know how you would feel right now with all the changes happening to spelt there is one really good point from chat just now i should have considered this before a lot of startups suffer from the phobia of not using the freshest or newest tech i absolutely agree this is 100% a thing that a lot of these companies and a lot of these tech leads are falling for they feel like they have to use the new thing or they are failures and that is a terrible mindset and we should go out of our way to discourage it this crazy app I've been building T3 chat its state is primarily managed through Dexi right now if you're not familiar with Dexi I'm going to show you guys the website for it does this look like a really new library dexi was built in the IE8 era the library that I moved to to power most of the state in my React application my huge React application that's doing more revenue than most of the businesses who are bitching right now the license is 12 years ago the library I'm using for managing the state in my brand new application that I started working on at the start of this year the first commit for Dexi February 2014 that's insane this library is not new i didn't pick it because I wanted the freshest coolest newest thing i picked it because it solved the problem that I specifically had you don't have to pick the newest thing pick the thing that solves your problem i am not using any of the state management libraries that were in the post i'm not using any of the Okay I I'm using a little bit of Jodi but barely we're we're gutting the little bit of Jodi that we're using right now everything's dexi based like I'm using a library that comes before everything on this page did i just I don't get it i really genuinely don't using something newer doesn't fix the issue of things changing if you want something stable use something older what's cool about React is you can use it with React i can use Dexi in my modernized React codebase i can move my routing to a library from eight years ago or more because it makes sense for my problem it's just like there's there's so much overengineering and and I I can admit React enables overengineering but it enables it because it's flexible it also enables underengineering to a beautiful way like a genuinely incredible way a thing I built recently it's a service for people to page me when a new model drops so we can get it added to T3 chat as quickly as possible this codebase is adorably simple it might not look it from here but it actually is we have the O token check gets cookies if there is no token we throw an error then I grab data from KV to make sure that you are a real user and if not I throw otherwise I return the data from KV then I have the models which I grab from KV i then return I render the page i render the form to page me with and then I render all the models but here is the part that matters i do a data check where I use my try catch wrapper to call the O token check either I get back data or I don't if I don't get back data I render the O form if I do get back data I render the model page i then add a suspense so the page can load immediately so complex terribly complex how do I ever survive with this level of complexity in my code bases let's go to the page theoform i'm sure this is really complex right well I'm writing that action in a different file because I want to have client side stuff here like toasts and whatnot so I pass it an action that I wrote here which calls the submit new model action with the data that they sent and the user's username and then I revalidate on a fake path this is a hack this is the closest thing to a weird thing that I just happen to know because I use Nex.js a lot if you were to do this right which is slash for the page they're on it's totally fine by revalidating the wrong path it will only change things that changed and not invalidate any caching values that exist before it's just a weird hack doesn't matter you should just revalidate on slash most of the time then here I have really complex code is loading set is loading toast use toast then my form with use form my async function onsubmit we set loading to true i call the action i toast when it's done i reset the form or I catch the error and toast the error and then finally I set is loading to false so complex this is such a terribly hard to work in codebase how would I ever do this react clearly doesn't scale with these new patterns do you know what does scale i say this a lot simplicity scales that doesn't mean if something is simple it can stay simple at any scale it means you should always be striving for simplicity at whatever scale you're at because a large codebase using simple pieces is going to be much easier to work in than a large codebase using large complex pieces the larger your codebase gets the more you should strive for these simple things because otherwise you're just compounding the complexity if you have a focus point that the whole team is bought in on which is keep things simple you're not going to prevent your codebase from getting complex but you're going to meaningfully reduce the speed you get there and that is huge the simpler you can keep your patterns the simpler you can keep your architecture the easier things get and just because your codebase is gigantic and complex doesn't mean you have to have that complexity in every single feature give a button an onclick when a button should have an onclick have a simple inline use state where you should have a simple inline use state grab things from react query where you can grab them from react query eventually you'll have some features that require complexity like the way that we manage the chat streaming in and updating the UI for T3 chat is inherently complex so we built it in a complex way with the goal of making it as simple as possible whenever I find a workaround to make it simpler I take it because we want to keep things simple this is basic discipline in engineering and if you don't have that your codebase is going to get big and ugly no matter what framework you pick okay we're down to the last reason the dependency security nightmare the average React application we audit has between 1,500 and 2,000 npm dependencies the security and maintenance burden has become untenable thank you chat for beating me to it ah got it npm package security is only a React thing now crazy how only React apps have this i bet if we switch off React we would need way fewer dependencies right right i feel like I'm going insane i genuinely feel like I'm going mad yeah Solid is so much better because you don't need dependencies you want the real hot take you'll have less dependencies if you move to spelt because there aren't any yeah more packages than lines of code it really feels like people are building that way and like it is what it is that's their problem not mine the reality of this one is in some regards we have allowed devs to go a bit too far with npm installing a 30 line of code thing i think we should do better about this we should put more effort into encouraging devs to not npm install 500 solutions but copy paste ones that make sense for their codebase like shaden shaden isn't a package you can't npm install shaden shaden has recommended minimal things that it uses for some of its components i was going to say like badge but it's not badge is just tailwind and class variance authority class names and class names is a util not even a package okay breadcrumbs these use slots for radics awesome have you read the radics codebase it's beautiful really simple doesn't have a whole bunch of external dependencies how I don't know son is a type of toast really nice type of toasts let's see what this is depending on oh next theme so it knows to do light mode or dark mode and sonner from sonner wow that's really complex that's so many things yeah the only issue here and I will admit that this looks not great so if I hop into my package json here we have this section up here that's all the radex dependencies but they are changing this so you just import one radics UI package and then it tree shakes depending on what you do and don't use so that's going away the other fun thing is that a lot of these packages are like serverside build tools and like types make it less likely that we make a mistake is it annoying to have to audit each and every one of these sure so don't if it's simple copy paste the code into your codebase if it's not simple great you just found a way to not have to maintain something that isn't simple and that's the reality with dependencies is either the thing is simple so copy and paste it so you don't have to worry about security breaches or whatever the you're concerned about or the thing is complex and you should be thankful you don't have to maintain it those are the only two options with dependencies i just don't get this argument i agree that bad devs install way more deps but that's not a React problem the fact that React is a good enough framework to allow for not as good of devs to ship good applications doesn't mean you need to replace React it means you need to replace those devs or give them better mentorship or force them to watch my channel crazy I know but like education is the problem here not like educating them on React because it's hard and special educating them on basic development best practices because they should know them the article had one more section on what people are moving to if you want to read that again links in the description but I'm going to focus on one of the five things here which is island architecture the example they gave here was companies moving to an island architecture which is something like Astro where you have an HTML page and then you can mount frameworky components in individual parts of your UI so a given element can be with a specific framework so if we want to reduce churn between frameworks we want to improve performance make the client side lighter and not have as many dependencies does giving their own dependency chained to every single element that's interactive on your page solve any of these problems no it makes them worse believe it or not a company like Tik Tok which is using a ton of microrend stuff and a lot of different UI libraries they don't use React where it doesn't make sense to they use React a lot of places too their dependency graph is thousands upon thousands of packages per load it's crazy splitting up your architecture this way and breaking it into islands only reduces the number of packages in your hot path if you also made your application simpler in the process and as your new island architecture app gets to the same level of complexity that you had in your React app before you will have more dependencies not less it's just delusional okay one last thing I have to riff on we created an internal UI framework that's specifically optimized for our use cases it's about 20% the size of React with vastly better performance characteristics for what we need this is so funny to me for so many reasons principal engineer at a streaming company is particularly hilarious cuz there's only like three of them so either it's Twitch or it's an incompetent company not saying that Twitch is competent what's much funnier here is they're measuring the size of React as a big win how big do you think React is oh man you reduce the bundle size from 130 kilobytes down to 20 and that's just the framework like the code base is not dictated by the size of this like these numbers don't matter in a real app if we again go to like T3 chat and I go to the network tab and we look at the JavaScript being loaded we're loading a lot of JS i'll command shift R so we have to hard reload all of it 3.6 six to to four megabytes of JS cool you reduced 140th of that by 80% proud of you that's awesome seriously if you're measuring the size of the React bundle as your win you don't have anything to share or say it's just not a big win at all so like I'm I'm sorry i'm frustrated but if the thing you're bragging about is that you reduce the size of the thing that is 130 kilobytes to 20 kilobyt as though that'll somehow magically make your app faster you're delusional it's just insane and if your application's code is even less than the 130 kilobytes so that number actually mattered you probably shouldn't have been writing JavaScript at all it's just insane to me i I feel bad being this harsh i didn't go into this expecting to be i just thought that there would be better reasons to be moving off React and maybe some that had actual information it's insane i've never been so confident after reading a thing that everybody involved in the piece should have actually been using React like every person quoted in that is either too underqualified to make the decision to move off React or is trying to get more job security by moving off React is the only way you could say most of the things that were said in that i feel like I'm going mad so I'm going to end this one now let me know what you guys think and until next time please don't move off React seriously like this is just actually madness like if you don't have a good reason to be doing it or you have performance issues just like figure that out it's not that hard i'm going to go insane i I'm going away




## Why WebAssembly Can't Win - 20240419
tree shaking the horticulturally misguided algorithm I know you're like what I just clicked a video about web assembly why am I reading about this I promise it'll all make sense as we go forward because tree shaking web assembly JavaScript and the state of the browser they're all a bit of a mess this article from my quick skim seemed really cool and I'm excited to dive in with y'all let's talk about tree shaking looking up through the trough but first I need to talk about web assembly's dirty secret despite all of the hype web assembly has had limited success on the web limited is putting it lightly it's very rare we actually use wasm for anything other than like image and video processing online very few sites are using wasm to control what you see as you explore the site there are very few sites where you click a button and then wum deals with whatever is supposed to happen as a result incredibly rare there is Photoshop which does appear to be a real success 5 years ago there was figma though they don't talk much about the wasm stuff these days there are quite a number of little npm libraries that use wasm under the hood usually compiled from C++ or rust I think Blazer probably gets used for a few in-house corporate apps though I could be fooled by their marketing you might recall the typed demos of 3D firstperson shooter games with Unreal Engine again from 5 years ago but that was the previous major release of unreal and was always experimental the current unreal 5 version does not support targeting wum I didn't actually know that but I haven't seen any good unreal Demos in the browser in a long time so it does make sense don't get me wrong I think web assembly is great it is having a fine success in the off- the web environments and I think it's going to be a key and growing part of the web platform I suspect though that we're only just now getting past the trough of disillusionment this is a classic my favorite startup chart where technology happens we get really hyped we realize the hype's not real we crash then we slowly get to where things actually make sense very very common this is the experience running a startup this is the experience learning a new technology this is the experience doing basically anything hard that has any part that's fun we're deep here in wasm right now it's worth reflecting a bit on the nature of web's wasm successes and the failures as well take Photoshop as an example I think we can say that WM does very well at bringing large C++ programs to the web I know that it took quite some work but I understand the end result to be essentially the same source code just compiled for a different Target similarly for the JavaScript module case wasm finds success in getting Legacy C++ code onto the web also as a way to write new web targeting rust code there are often tasks that JavaScript doesn't do very well at or which need a shared implementation between client and server deployments on the other hand wasm has not been a web success for Dom heavy apps nobody is talking about rewriting the front end of wordpress.com in WM for example depends on which communities you ask although I will say it seems like that has stopped we were definitely in a bit of a phase where people were pretending they can just rewrite their whole website in Rust and wasm that's not a real thing anymore and I'm happy we're over it why is that it may sound like a silly question to you wasum just isn't that good at that stuff but why if you dig down a bit I think it's that the programming models are just too different the web's primary programming model is JS a language with Dynamic typing and manage memory whereas wasm 1.0 was about static typing in linear memory getting to the Dom from wasm was a hassle that was overcome only by the most Ardent of the true wasum faithful relatedly wasam has also not really been a success for languages that aren't like C or rust I am guessing that wordpress.com isn't written mostly in C++ one of the sticking points for this class of language is that c for example will want to ship with a garbage collector and that it's annoying to have to do this check my article for March this year for more details interesting point I hadn't thought of for C to run in wasm they have to write their own garbage collector in WM and now you're dealing with a gigantic bundle oh apparently ue5 is back on the web now thank you for the correction from chat snow Squire appreciate you happily this restriction is going away as all browsers are going to ship support for reference types and garbage collection within the next few months Corum and Firefox have already shipped was garbage collection and Safari shouldn't be far behind thanks to the efforts from my colleague asumu Taki takawa hopefully I got your name right this is an extraordinarily exciting development that I think will kick off a whole another Gardener hype cycle as more languages start to update their tool chains to support wasm if you don't like my peaches oh boy this brings up to the meat of today's note web wasm will win where compilers create compact code if your language's compiler tool chain can manage to produce useful wasm in a file that's less than a handful of overthe wire kilobytes you actually have a chance to win if your compiler can't do that you'll have to instead rely on hype and captured audiences for adoption which at best results in an unstable equilibrium until you figure out what's next we're getting spicy spicy here I like this a lot in the JS World managing bloat in deliverable sizes is a huge industry yeah we've spent so much time talking about bundlers how many of my recent videos are arguably about bundlers if we just go to my channel where you can see them live right now by the way Rec only videos live this one's about bundlers we're at one so far I was expecting this to be slightly worse honestly I talk about bundlers a lot package manager kind of the same deal we'll count that so we're at two this one's about JS bundlers being Rewritten from go to rust so that counts for sure we're at three winter JS is different run time so I can't quite count it even though it's competing with bun which is also a bundler I talk about bundlers a lot although I will make the point that my most recent bundler video kind of bombed so it seems like the ecosystem might be burnt out on bundlers we'll figure out what that means in the future anyways bundlers like es build are a ubiquitous part of the tool chain compiling down a set of JS modules to a single file that should include only the functions and data types that are used in a program and additionally applying domain specific size squishing strategies such as minification which makes mon is more minuscule so if you give something a big name minification makes the name small good stuff let's focus on tree shaking yes the thing that this article supposedly actually about even though the impact on web assembly is one of the most important pieces so let's focus on tree shaking the visual metaphor is that you write a bunch of code and you only need some of it for any given page so you imagine a tree whose um branches are the modules that you use and whose leaves are the individual definitions in that module and then you violently shake the tree probably killing it and also annoying any nested Birds the only thing that's left still attached is what is actually needed I have a feeling after reading this this guy's not going to like tree shaking too much although beautiful analogy this isn't how trees work though holding the trunk doesn't give you information as to which branches are somehow necessary for the trees's mission it also primes your mind to look for the wrong fixed Point removing unneeded code instead of keeping only the necessary code interesting point what does this link to fixed point and strike mandates this is from over 10 years ago this looks like a math thing I'm not smart enough for that I JavaScript of but tree shaking is an evocative name and so despite its Horticultural and algorithmic inaccuracies will stick to it fair it's a fun name even if it means nothing the thing is that the maximal tree shaking for languages with a thicker runtime has not been a huge priority consider go according to the goang wiki the most trivial program compiled to wasm from go is 2 megabytes that that's just not tenable and adding Imports can make this go to 10 Megs or more or look at p a python web assembly Port The Reel example downloads about 20 Megs of data these are fine sizes for Tech demos or in the limit very rich applications but they aren't winners for webdev this is a very important key I think people Miss if you're building Rich applications that are heavily interactive things like Photoshop or figma where there's a lot of graphical Transformations and heavy math done in order to make the experience good downloading a few Megs of data to make that experience better is reasonable if this is the Baseline for entry writing your website for your blog in go or python is incredibly dumb and it's a huge gap between the web that we use every day and the technologies that people are excited about for the web like this Gap is just so big in the expectations the we browsers work the size of these bundles that it's hard to take anyone seriously who thinks the future of the web is rust so let's shake a different tree to be fair both the built-in wasm support for go and pyodide ports of python deriv from the Upstream tool chains where producing small binary is nice but not necessary on a server who cares how big the app is oh boy server component plug I will say one my favorite things about server components is the fact that I can just have giant code and not worry about it getting to the user because only the parts the user is actually like rendering and consuming on client are shipped to them to watch any of my server component videos to hear more about that the one about airplane proof code is a really good example of this and indeed when targeting smaller devices we tend to see alternative implementations of the tool chain for example micropython or tinyo tinyo has a wasm that can apparently go down to less than a kiloby even interesting never heard of tiny go interesting uses libraries used by the go language tools alongside llvm we never start to go to be an embedded language and so it got serious problems oh Rob Pike I love Rob's honesty I just don't love his design decisions his choices his language or much else about him but at least he's honest and that's a pretty great quote to admit that go in embedded systems is terrible apparently tiny go actually keeps the go memory model which implies garbage collection of some sort very interesting project the original reasoning was if python can run on microcontrollers then certainly go should be able to run on even lower level micros it is kind of funny that python could go lower level then go pretty funny concept these alternative tool chains often come with some restrictions or peculiarities let's take a look at the differences with tinyo Tino P influen all major go language features although some details are missing if you're wondering does tinyos support feature X we often cannot give a good answer the rest of this page gives a good indication but other than that you will just have to try for yourself to see whether a particular piece of software works with tiny go so SEO isn't going to work great reflection uh yeah there says custom reflect package has been reimplemented and it mostly Works Maps generally work fine but maybe slower than you expect them to be there are a few reasons for this one of which is that some types like strs May internally be compared using reflection instead of using a dedicated hash compare function there's a bunch of standard Library stuff that is not supported but uh they have a list of the things that do compile but compiling does not imply that it works entirely oh boy garbage collection generally works fine but may not work as well on very small chips and on web assembly it it is also a lot slower than the usual go garbage collector good to know so it does work on wum but not as well and it's also very slow so we just saw there are definitely some differences here and although we can consider this to be an evil of sorts it is to be expected that the target platform exhibits some co-design feedback on The Language Fair Point I do think that we've been spoiled nowadays that like Windows Mac and Linux are finally getting to a point where we can Target them without having to write too much custom code for each one but we're like just getting there like just barely so the idea that the platform in this case the web and wasm should have some say over the language yes but also in particular running in the sea of the Dom is sufficiently weird that a wasm targeting Python program will necessarily be than a native Python program to be fair UI in Python has been a mess for literally ever so python having a real UI layer in this case the Dom sounds actually pretty compelling but yeah it is fundamentally different from how we write native python still I think as toolchain authors we aim to provide the same language albeit possibly with a different implementation of the STL I am sure that the closure script developers would prefer to remove their page documenting the differences with closure if they could and perhaps if wasm was to become a viable Target for closure script they will on the algorithm to recap now that it supports GC wasum could be a winner for web development in Python and other languages you would need a different tool chain and an effective tree shaking algorithm so that user experience does not degrade so let's talk about the tree shaking oh boy I work on the hoot scheme compiler which targets WM with garbage collection is this guy a scheme guy are you kidding also when you're not signed into gitlab there's the Y gitlab button CU they're trying so hard to pull people over who does the code name for the guile web assembly project launched by The spritely Institute in addition to the compiler hoot contains a full web assembly tool chain with a watt parser and assembler disassembler interpreter Etc is guile like the new scheme yeah it's an implementation of scheme yeah they they really are putting scheme in the freaking browser regardless if this guy's putting scheme in the browser he knows what he's talking about this just way overqualified him for every other point he said this is going to be fun so he's working on the scheme compiler which targets wasin with GC we managed to get down to 70 KOB or so right now in the minimal main compilation unit and we are aiming for lower auxiliary compilation units that import runtime facilities the current exception handlers and such from the main module can be sub kilobytes being sub 1 kilobyte for a module in wasm is actually pretty huge getting here has been tricky though and I think it would be even trickier for python some background like whiff or Whiffle what the [ __ ] a Whiffle you scheme people are insane so whatever Whiffle is some other alternative scheme or some other scheme based thing the hood compiler prends a Prelude onto user code tree shaking happens in a number of places there's partial evaluation which will evaluate unused bindings for effect possibly eluding them or El lighting yeah why does this guy like these words overall this has been a very readable article but what the [ __ ] a lighting fixing let wreck will do the same CBS is like something about call so they're checking to see how often things are called following only reference functions values and control edges like renumbering there's an exposit dead code of elimination passw which tries to alide unused effect-free allocations a situation that can arise due to other optimizations finally there's a standard Library which is written in raw iswm whose definitions like Global tables Imports functions Etc are included in the residual binary only as needed generally speaking procedure definitions like functions and closures are the easy part you just include only the functions that are referenced by the code in a language like scheme this gets you a long way however there are three immediate challenges one is that the evaluation model for the definitions in the Prelude is let Rec star the scope is recursive but ordered binding values can call or refer to previously defined values or capture values defined later evaluating the value of a binding requires referring to a value only defined later then that's an error again for procedures this is trivially okay but as soon as you have non-procedural loaded algorithm will end up residualizing findings that are set which all of the tree shaking passes above require the delicate dce pass okay I knew early into this paragraph that this was smart people speak but by the end yeah if I understand correctly this is saying that it's hard to know if a value is actually being used unless it's within a isolated procedure oh Chris's here helping too finally smart compiler people CPS goes to the one process child never mind thought you were going to be helpful crish my mistake I saw your name I saw the abbreviation and assumed you were going to have you helpful well I got trolled I'll take the L worse some of these nonprocedural is an instance of the record and so on these vtable callbacks can end up keeping a lot more code alive even if they are never used get back to this later oh boy similarly say you print a string via display well now not only are you bringing in the whole buffered IO facility but you're also calling a highly polymorphic function display can print anything there a case for bit vectors so you pull and code for bit vectors there's a case for pairs so you pull and code for that too yeah the thought that display can print anything means you either have to rewrite display to display different types or you just deal with it and import everything CU display could display anything one solution is to instead call WR string which only writes strings in not General data you'll still get the generic buffered IO facility though even if your program only uses one kind of Port this brings me to my next point which is that optimal tree shaking is a flow analysis problem consider display if we know that a program will never have bit vectors then any code in display that works on bit vectors is dead and we can fold the branches that guard it but to know this we have to know what kind of arguments display is called with and for that we need higher level flow analysis problems exacerbated for python in a few ways one because object oriented dispatch is higher order programming how do you know what Fubar actually means depending on Fu which means you have to thread around representations of what Fu might be everywhere into everywhere's callar and everywhere's caller's callar and so on this is a very important Point I've covered static heris a bit in the past so if you're somehow not familiar with static Hermes it's a JavaScript compiler that compiles your JS to basically be native assembly code this example here is from the presentation you can watch my whole video about static Herms I'm sure you search Hermes Theo I'll come up pretty quickly the goal here is to show that you kind of need type safety in order for this to work because if you're dealing with all the different types of data that can pass around and you're doing that at a low enough level things get messy the other problem is what python is dealing with there where if your language is unsound and you want to figure out what isn't isn't being used it's really difficult to do such in Hermes and static Hermes the solution is to have really strict compiler rules where you have to have type definition so that the compiler knows what the data is actually shaped like and what it actually is supposed to do so it's weird to think in order to use the static JS compiler to make your JS faster you can actually write JavaScript you have to write flow or typescript because you need the type definitions in order for this to work and behave as expected crazy when you think about it but it it does make sense and it is important that they're handling these problems because we need this to work we need this to work well which again is what makes this so interesting is that since these languages we want to use don't have these strict definitions compiling to figure out what we do and don't need is nearly impossible if we don't have that data included in our code definitions it doesn't exist so now we have to generate and that generation is an incredibly difficult challenge that seems like everyone else is struggling with here too specifically the idea of higher level flow analysis secondly look up in Python is generally more Dynamic than in scheme the next point he makes is even more things that are hard because Python's Dynamic and since Python's Dynamic we don't have any idea what it needs almost ever but finally and perhaps relatedly the object of tree shaking in Python is a mess of modules rather than a big term with lexical bindings this is like JavaScript but without the established ecosystem of tree shaking bundlers py has its work cut out for some years to go in short with garbage collection Wasa makes it thinkable for the first time to do Dom programming in languages other than JS it will only be feasible for Mass use though if the resulting wasm modules are small and that means significant investment on each language's tool chain often this will take the form of alternative tool chains that incorporate experimental tree shaking algorithms and whose alternative standard libraries facilitate the tree Shaker well I'm off to lunch happy wasm bling comrades this is a phenomenal post this was from back in 2023 near the end of the year yeah Wingo log you killed it this was dope yeah I had suspicions and beliefs about a lot of these things but I did not think anywhere nearly this strongly about it yeah definitely recommend checking out his blog if you're curious there's a lot of cool stuff here links in the description as always that was a great article I was always skeptical of wasm in the browser but yeah this puts my points better than me and shows even more challenges I hadn't imagined yet curious what you guys think though is the future one where we have more wiom in the browser and we're using other languages or are we stuck with JavaScript forever let me know what you think and definitely check the blog out until next time peace NS




## Why YOU Should Do Advent of Code - 20231211
I've never been a big fan of elite code Type problems some of my first content was an interview with Dan abramov where I specifically didn't do Elite code interview because I don't think it's the right way to vet people technically it just doesn't make a lot of sense because you can both be bad at leak code and a good Dev you also be good at leak code and a bad Dev that said getting better at leak code definitely helps you some amount as a programmer and it certainly helped me both write code better and more importantly be more confident in the way that I write code that said I've never been able to just sit down and grind leak code problems it makes me want to rip my teeth out individually one at a time I can't do it it's not for me at least it wasn't for me until a couple years ago I discovered a challenge called Advent of code yes this is another Advent of code video I don't care if you're watching this past December though because I think there's some useful stuff here at the very least to prep you for the next year so what is advent of code why is it so different and what has me so excited about it well first off Advent of code is a set of programming problems that come out in December of every year from the 1st to the 25th every day at around midnight EST a new problem drops that that has two parts once you've solved part one you get access to part two but solving the problem means something a little different than it does in other similar things because you don't have to submit your code you just have to submit a numerical answer so once you've processed the input you put in the output and you're done this means you can do Advent of Code by hand you can do Advent of code in Excel there's even people who solve the problems in Minecraft it's crazy what you can do because Advent of code isn't telling you to write code in this specific way and submit it it's giving you a challenging interesting problem and letting you go figure out how you want to solve it in this is the aspect that I think makes Advent of code so different when you combine that with the two-part nature of the problems where how well you write part one directly affects how quickly you can solve part two it actually rewards you for putting a little more thought in instead of just going as fast as possible I think that balance makes it very unique as well but none of this is the secret that makes adventive code so special it's not the reason I push it as hard as I do that reason is the community the coolest part of Avent of Code by far is the huge Community that's formed around it every day there are literally tens of thousands of people solving these problems and sharing their Solutions everywhere from the Avent of code Reddit to my own Discord and we have so much fun discussing the different ways we solve these problems obviously in my community a lot of us are using JavaScript and typescript and we always compare our solutions to see which direction we went in or why someone's code is faster than someone else's I even wrote some code that was super poorly optimized saw someone else use bun to make it run tried the same thing myself and it actually worked I was able to get an answer in 10 minutes instead of having to rewrite all my code even if you're not using JavaScript though it's so cool having a community of other people solving these problems too I know low-level learning switches programming languages every day after spinning a wheel with them all on it crazy idea I also know a lot of people who use Advent of code to learn a new language because they want to learn Elixir they want to learn o camel and they use Advent of code problems as a way to learn with others going through it every day but you can also go back to problems from other years and use those to learn at any point the first Advent of code I did was the 2015 one which I did during the summer of 2016 which is crazy surprisingly fun for me even even then but when I got to do it at the end of the year with thousands of other developers it was so rewarding and it's such a cool opportunity not just to refine your leap code skills but to see how other people solve these problems I know a lot of devs that never really had peers they learned how to code online and they went and worked on projects but you never got to solve hard problems with other people this is why I love Advent of code because we're all in it together we're all stuck dealing with these really dumb weirdly worded challenging problems but we all come out better engineered and we all get to work with each other to figure out what is and isn't a good part of the experience and what did and didn't work for you it's so rewarding and I can't imagine where I'd be right now as a developer if it wasn't for the time I spent every year doing Advent of code I actually originally planned for this year to be the first where I took a step back for the last four I had an alarm on my phone to go off 3 minutes before so I'd go run to my laptop sit down and compete this year I plan to sit back and take it a little less seriously but as soon as I saw the hype going as soon as I sat down and solved one of the problems I was hooked again I love Advent of code and I owe it for so much of my success as an engineer I don't even know if I would be a Creator if it wasn't for the wonderful sense of community the silly little game has showed me at such an early point in my career huge shout out to Eric and the whole team making Avent of code possible you have no idea how big your impact is and to any developer here who hasn't already given it a shot I can't recommend it enough Avent of code didn't just make leak code fun it made it fun to be part of this community as a hole if you want to hear a bit about how I did Advent of code last year I'll pin that video in the corner and if you just want to hear something else YouTube thinks you like video below it appreciate you all at ton as always I'll see you in the next one peace NS




## Why You SHOULDN'T Learn Rust - 20221213
so I've seen a lot of people learning rust lately you might even see me learning it on Prime's show I don't like or get the nature of when you define types okay no parse is going to be required okay it's because it's gonna need to call it needs to know what underlying function to call yeah dot sort then dot collect nope nope uh you can't you only if you have an extra crate can you do a sort on an iterator stream I'm surprised at how long that takes because that is instantaneous on my lemur Pro that's being faster I know but still even in your editor that's that's taking way too long so I agree the feedback loop that you just did where you actually changed it and it didn't tell you that moment was very very surprising it's not my thing I think it's an important language and I'm super hyped to see the success it's been having and the performance it enables but it is a worse developer experience than the stuff that we talk about here mostly typescript learning Russ has actually given me a bit more of an appreciation for golang and how simple it is to write code that has crazy performance there is a role for rust but I think we're learning it without understanding that role or having the right reasons I want to talk a little bit about that today so why should someone learn rust I think this might need a diagram things that make rust great it's important to understand there are a lot of these first and foremost performance the performance in Rust is nuts it is very specifically with memory because of the quality of the borrow Checker and the push to keep things in memory only when they're used and not pull them out until they're not the performance I see people getting in Rust apps is absolutely nuts the safety and reliability are also really important I do love the name itself rust the goal of rust is to write code that can sit there and run reliably for decades and still work on another computer with an entirely different architecture in decades because of the consistency and reliability of the language and the compile targets rust is meant to write code that is maintainable for a long time and also can run for a long time and as a result rust is very scalable both in runtime and in architecture specifically like team code base size so your app can get huge and still run well and have a lot of people contributing to it and the code itself as long as you're not telling rust's rules to be as long as you're not ignoring all rust's rules and honoring the compiler and borrow Checker your code can run super reliably for long sessions too let's also talk about things that make JavaScript bad the things that make JavaScript bad are performance safety is reliability really a problem with JavaScript uh memory leaks runtime slowness not very scalable big code bases are like whack-a-mole you might notice something here it's a lot of overlap between the things that make rust great and the things that JavaScript is bad at which makes it seem like an obvious choice however a lot of these things have been addressed in the recent years performance V8 is killing it yeah like performance JavaScript has been consistently getting better year over year the hard work that the V8 team has put into improving JavaScript it's resulted in insane performance it's still not going to be native but if you're willing to let your memory go all over the place you can make JavaScript run really fast safety obviously typescript has helped us have done here it's not memory safety but it is runtime safety and it makes your code much less likely to break in run time because of something you weren't expecting somebody else also mentioned bun good points memory leaks and runtime slowness uh do you know what helps with these Lambda serverless the fun of serverless is if you have a memory leak it doesn't matter because the instance dies it gets remade you don't have to worry if your runtime is temporary and you're not maintaining a very long process which also funny enough serverless helps here too and the big code bases are being solved more and more every day with things like es builds turbo pack turbo repo NX so much more there's a lot of work going into making big code bases a better experience in JavaScript what's cool here is that all of these efforts are by different groups of people V8 is all work being done by the Chrome team bun is being done by Jared Sumner and his new crew typescript is by Microsoft William does by AWS and obviously for sales putting effort in here still that there then es build is by Evan Wallace the original CTO of figma Turbo back and turbo repo started by uh Jared Palmer who then got acquired by versel as there to be part of that then MX is his own separate company too all of these efforts are being done by different groups of people to continue improving JavaScript it will never perform as well as rust but this is why we have to talk about less great rust stuff hey y'all I'm in the middle of editing this rust video and I just realized I didn't ask you guys to sub I know it's silly to throw something like this in the video when I make one of these call-outs it like triples the number of people who subscribe and less than half of y'all have hit the button so take a look quick make sure the button's not white it doesn't say subscribe because if it does you haven't clicked it yet please do it helps the channel out a ton anyways back to plain about rest because this is some of the stuff that honestly surprised me DX and common tools Is Not Great specifically my vs code experience was really rough top of that learning curve is steep a deep understanding of memories kind of necessary like suddenly pointers and all that stuff starts to matter again it generally more code to write per feature and developers who are experienced in Rust are more expensive generally speaking when I write rust I feel like I have to think significantly more and that is fine if the thing you enjoy about coding is overthinking every line and making your code AS efficient and safe in quality as possible do it it's fun the problem with this is what happens if the feature you made in Rust is a bad feature not because the code is bad the code can be incredible and it often will be but the actual thing we built with that code ends up being bad then the developers who built on Rust are much less willing to throw that thing away the problem with each line of code being more expensive isn't just that it costs more to make the code because theoretically if I'm a good enough developer I can go just as fast and rust as you can in JavaScript it still was more work to do it fundamentally and no rust developers going to disagree with that it is more work to build in Rust than it is to build in typescript but if you have things that these Solutions don't solve like you have a JavaScript app that needs sockets it needs to be long running and javascript's just giving you problem after problem cool move over to rust make a long living runtime in Rust and you'll have a much better time for that golang will also give you the opportunity to do that with some of these pain points not being as strong but also is just a terrible language so good luck have fun the problems with JavaScript are solved by rust but at Great Compromise you will be slower as a developer moving to rust your code will run faster oh actually one more thing I forgot to include here uh compile times suck hard there are rust apps that take hours to compile because of rust's compiler being so deep and complex the actual checks are very very slow and painful if you need all of that because your goal is code that will run for years do it but generally speaking I think that there's a spectrum of how often is this run and then like how often does this change and generally speaking there's a slope like this and it's actually more like this of how often code runs versus how often it actually changes where when you first write code you're going to be changing the [ __ ] out of that code all of the time but as things stabilize and you get more customers this curve starts to happen and there are points on this line where different languages make more and less sense I'd say above this line TS typescript type stuff makes a lot of sense below this line going it's a pretty solid option and then you hit a point where your code is running a lot and it's not changing anymore or as often anymore and at that point something like rust really starts to make sense but until you've hit a an inflection point of your code isn't changing that much and it is running a whole lot and you're having problems where your infra costs too much money or your like code keeps crashing in production and you need a long running run time or you have a specific problem with typescript that leads going and rust or leads you to going in Rust because they solve problems that you have with typescript who do that but generally speaking and I really hope no one's going to argue at this point the typescript developer experience is the best developer experience right now it they did it it's incredible how good of an experience you can have building applications in typescript but when you hit these problems if the solutions that allow you to stay within typescript don't make sense that is a great time to leave and all of the skills you've learned writing with typescript will still help you onboard other languages faster you shouldn't feel like you have to learn every language because everyone's talking about it and most importantly this idea that the future is rust and we're all going to move all of our typescript stuff to rust is just not reality it isn't right now rust isn't even faster in the browser than JavaScript and typescript it is close which is crazy but you're compromising your developer experience significantly by using it that part isn't going to change by Design rust is harder to write and that is a good thing we should not be upset with rust for any of these things and we should not be upset with people who like rust for these reasons but if you don't have these problems the only reason to learn and adopt rust is for fun that is the core Point here and I hope you all are understanding of that Russ is a great language goalings and golang's a language and typescript is a great developer experience if you want to compromise that developer experience it's best to do that with a reason and what rust has achieved is an incredible developer experience considering the platforms they're targeting and the performance targets they're aiming for but you have to be conscious of those kind or those compromises when you make them and you should make them with good reason I hope this is helpful for you in picking your next stack and identifying what tech does and doesn't make sense for you to work on and adopt in your projects and I hope that you maybe consider using typescript a little bit longer than you might have before it's a great experience you'll learn a lot from it and you can still learn any of these other languages at any point I did a lot of time in going a lot of time in Elixir here I am now all the way in typescript I really appreciate y'all for watching this one YouTube thinks you like this video as well so give that a look thank you again for taking the time




## Why good engineers keep burning out - 20250602
This is going to be an interesting one. I have no idea how we're going to make this into a video or if we even will. But there's a thing I think a lot about that's changed my approach to building things entirely. I call this change energy. I think every person exists on a spectrum of how much change they like to deal with. So the top will say this is 10 and the bottom zero. And this is amount of change that you experience. This can be things like your living environment changes or the food you're eating changes or the work you're doing changes. Humans need some level of stability in their lives or they feel like they're going insane. For every given person, the range they're comfortable with varies. So for me, when it comes to things like where I live and my general like navigating the world stuff, I tend to have very low thresholds for change energy. Like I don't enjoy traveling that much. I get quite burnt out quickly if I'm traveling a lot. Things like moving stress me out a ton. When I have to change the place I live and build my life into a new spot, that stresses me out a bunch. For some people, though, that's really exciting. The idea of everything changing around you, having a new living space, is super exciting. They actually strive to have more change in something like their livelihoods. Some things are inherently boring though, like the work you do. I'll use myself as an example here. This is a really hard thing to diagram. I'm going to do my best here, and if people have suggestions on how to diagram this better in the future, that would be really cool. Let's say this is the range that I like to exist in for change in my work. I like to have things not get stale but also not change constantly. If like every day I'm working on different things, that would stress me out. But if my experience working in a codebase is that everything is really monotonous and I just kind of live at this line here, but my comfort zone is in like this range, that sucks. And what I'm going to be looking for if I'm living there, but my preferred zone is up here, I'll draw a line that's like how my day-to-day feels. If I'm living on this line, but I see an opportunity that's like, "Hey, we need somebody to try out this new thing." I might spike up and get to experiment a whole bunch and try some new things for a little bit. And maybe it'll even be too much. And I'll be like, "Oh, too much shit's changing. I want to go back to where I'm a little more comfortable." And then we can chill here where we're trying out new things, but then I have to go grind on an old codebase for a while and it's miserable. and then afterwards I can go back to working here. I think this represents the experience that a lot of devs have where the code bases they're working on are boring and miserable. Like this line is like old Rails code. If this is the line you're stuck living on for most people, especially engineers, we're generally more curious. The average engineer is going to have bad feelings and vibes if they're currently stuck down here, but they want to be in a range like this. But let's flip this a little bit. Let's say you're an engineer that doesn't like when things change and you want it to be a little more stable. And now if we redraw this line, let's say that you're using React. You're a modern React dev and you've been really happy with class components for a while now. So you're living maybe even like down here for a bit. You're happy with things and then hooks happen and now you're here for a bit and you're like, "Yeah, this is cool, but this is a little near my threshold for how much change I want to deal with." And then server components happen and now you're like, "What the I don't like this. I wanted this to be stable and simple and everything's constantly changing around me. And then maybe you drop down to like the old Rails code again. So if I move these like this, maybe you started with like a normal React code base, building all these things yourself, dealing with Webpack and and you're right in the middle of the amount of change you're willing to tolerate. Then hooks push you near your edge. Then server components push you over, and then you collapse down to the simplest thing that you know won't change because you don't want things to change that much. But when people get pushed above or below their change thresholds, the minimums or maximums they want to operate within, that's when things start to fall apart. I want to tell a real personal story that is how I discovered this about myself in the industries that I work in. This one isn't about code. This one's going to be about creator stuff. Something I learned quickly as a creator is that it's very different for being a developer. If the line for how average code bases work for successful companies is really low on the change threshold where less change is how more companies trend towards being a successful creator is the opposite. You actually have to change as regularly as you can. The content you produce has to be varied a ton. The more unique things you can cover and the more unique ways you can cover them and package them and get them out, the more successful you'll be. The most successful channels are the ones that change the way they're doing things and push themselves to do more unique things. constantly. If you look at my channel, you'll see obviously I post a lot about React, but I I go weeks at a time where I only post videos about other things. Every day I post a video about something different that was new and exciting to me. The thing that's exciting about being a content creator is that you're rewarded for that. The more time you can spend in this top range, the better. But that means that if my willingness to deal with this type of change is there, I'm constantly risking burnout because I am right at the threshold for how much change I can deal with. So if I'm living on this line and then let's say there's a new camera that I want to try or a new creator tool that I'm being encouraged to look at, that might be the thing that pushes me over my threshold. And if I'm already here, if I'm already maxed out, then I want everything that isn't literally a video. I'm currently working on to be as close to the bottom as possible because I'm already maxed out. I don't want things like the tools I use to manage my videos or for the things that I'm using to keep track of my assets or for the cameras that I'm using and all of these things. I specifically want everything that isn't a topic in a video to stay as boring as possible. So all of my energy for this change can be focused in on the things that I'm creating for the channel. If I have a finite amount of this change energy where I can only deal with so much change in a given day before I'm overwhelmed, I try to pour as much of that into the channel as possible and then keep everything else as boring as possible. The way I learned this was a little strange. There's a service called Frame.io. For those who aren't familiar, Frame is a way to do video reviews, almost like a code review, where my editor can post a video up for review. I and my team can go through it, leave comments on specific pixels at specific time stamps saying, "Hey, this isn't quite right. Hey, the color's off here. Hey, can you trim this? And those comments can come up in their video editor, so they can go through and make those changes. I knew about this tool for so goddamn long. One of the first investors we had at Ping, which is my company for those who don't know, we build tools for streamers. Now, we're building dev tools. We'll get to why in a minute. I knew a lot about the creator tool space. I was deep in the creator world after working at Twitch and building this. Emory, the founder of Frame, reached out to be a potential investor, and we chatted a bunch. He eventually invested. We got decently close. And I intimately knew Frame. Even before we started chatting, I knew a lot about Frame.io. It was obvious this was a very useful tool that would be a huge improvement on my workflow. It took me over a year to start using it. I spent more time building my own versions of things Frame did than I would have had to spend adopting it and just using it. And it's not like it's super expensive or anything either. It pricing is actually quite reasonable. 15 bucks a month per user for 2 TB of storage. And it's a great service. I don't hesitate to pay this money. It's absolutely worth paying for it. But I bring this up because I knew it was the right solution. I knew it would fundamentally improve our workflows, but I didn't adopt it. And I sat there and thought a long time about it because when I did adopt it over a year later, I realized how useful it was and how much it would improve our workflow. So, I sat and thought, why did I not adopt this? I try new dev tools all the time. Why am I not trying new creator tools? I've since realized the answer. It's quite simple once you realize it. If this is my experience as a creator where I'm living on this blue line, so I'm constantly maxed out on the amount of change I'm willing to deal with in a given day, then additional change is super stressful. It's going to push me over my threshold. But if we go back to the developer world, if I'm constantly below my threshold, I am desperately looking for new things to try. The average developer isn't hitting their thresholds for things changing in many code bases. Like many companies have such a boring stack that the average engineer at work kind of wants to look for new things and look for new tools and solutions and technologies and those people are disproportionately likely to be the viewers of this channel. The people who are here watching, I know at least half you are subscribed. The other half should consider it. All of y'all are here because you want to learn about these new things some amount. You're at the very least curious about them and that is awesome. It often also means that you're not getting that threshold met at work. Like when I was at Twitch, I found a lot of opportunities to explore with and try new things. I spent a lot of time reading Twitter and blogs still, but I wasn't as much a part of the conversation. When I left Twitch, I wasn't hitting my thresholds. So, I started talking about these things more. I started trying new technologies more. I got deeper so I could be fulfilled. I needed my creative and change energy internally to to feel satisfied. And it didn't. And then when I started creating content, I was constantly hitting that maximum. I was going through so much change every day, trying out new things, talking about them, trying new styles of content, trying new branding, thumbnails, all of this. I was maxing out the amount of change I could deal with every day. And the thought of adding more on top was stressful. And what I realized is this is a fundamental difference between the engineering industry and the creator industry. Good creators are constantly trying new things with their content, so they're unwilling to try new things anywhere else. The average developer is stuck in a codebase that they're probably some amount tired of and they want to try new things. And the best of those developers and the best of those creators have very different mindsets where the best creators put so much energy into their content changing that they don't let anything else change. And the best developers are stuck on a codebase is really boring. So they're constantly exploring new solutions externally. This obviously benefits me greatly because I have an audience of those excited developers looking for new things and I've made a very valuable channel and community as a result. But it also hurt us as a creator tools company because the creators that were looking into and trying new tools were not the good ones. And that really hurt to realize the best creators aren't looking for new tools and solutions. They're too busy making their content the new thing. The people who are looking for new tools and solutions in the creator space are often the ones who don't know why their stuff isn't working and they're looking for any solution they can possibly buy to fix it. They're not buying subscriptions to things like Vid IQ because they're happy with how their channel's performing and they want to get a little more insight. They're buying these subscriptions because they don't understand what's going on and they desperately want to understand because they're not putting that energy into making more compelling content. They're putting it into figuring out why their content isn't working. In the dev world, especially if you're an employed dev, you're probably good enough at understanding how these things work. So, the thresholds that you're hitting are going to be very different. And that's what I'm seeing is most great developers are looking for more change. Most great creators are looking for less change. And that realization is why we pushed so hard into the developer tool space because I want to sell to the best people in the spaces that we're working in. I want the people who inspire me to benefit from the things that I'm creating. And with Ping, it was really hard to do that. Obviously, we have awesome people using Ping. Like we have Linus Tech, Iron Mouse, Elgato, most of V Showjo, great groups like the Majority Report, political stuff, too. Like the key here though is that all of these people, it wasn't the creator that chose. It wasn't like Lionus reached out like, "Yo, we're going to use Ping." It was their producer reached out. With Iron Mouse, it wasn't like she heard that Ping was this really cool thing and was going to adopt it. It was the CEO of the company she works for, Gun Run, realizing it. With Elgato, it was their production team that we hung out with at a couple events realizing Ping would be a good solution for them, and they decided to adopt it. All of these examples are individuals whose jobs aren't just making compelling videos themselves, but are working on the production pipeline, which when you think about it, it's a lot more like engineering. But that's not the average person in content creation. Most of the biggest creators run a very tight ship where they're in control of a lot of what's going on still. Could you convince my editor Faze to try a new editing tool that might make his job easier? Sure. Could you convince me to try it? Almost certainly not. Could you convince a random engineer on my team to try a new tool or technology? Almost certainly yes. Could you convince me as well? Also, almost certainly yes. That's the difference is the people on top and the people working with them in the developer space are all much more willing to try new things than in the creator space. And the only in that we found for creators was finding the producers who were bored because all of the cool exciting stuff was being done by the people they were filming, not by themselves. That's why we're leaving the creator space. We're not killing our products. We're not going to deprecate the stuff that already exists. We still use all of these things all the time. I still use ping for all my collabs, but we're focusing on dev tools now like upload thing. Both because we better understand the problems that developers have because we had so many of them building with this these tools and technologies, but also because we need to feel this mutual excitement. We need to be excited about what we're building and the people that we're showing it to need to be excited as well. And we didn't feel that way with the creator tools because the most excited people in the creator tool space weren't the best creators. But the most excited people in the tooling space for devs are the best devs. The oh moment for me was right after we dropped upload thing. Seeing people like Josh tried code, posting videos immediately, reverse engineering it, figuring out how it worked and giving his thoughts on it. We excited some of the best devs and best creators in the dev space by building something like this. And that was a huge change for us because we weren't used to that. In the creator space, it was very different. And that's why I think so much about this change energy thing because we all need to hit our minimums, but we're all terrified of going over our maximums. In the experience in different industries, in different spaces, be it creator, engineer, or any of the other fields that I know nothing about. The amount that you hit these thresholds varies a lot. And I think it's a good way of thinking about how people behave in these spaces and how people adopt these solutions as well. I have no idea how we're going to turn this into a video. I am so sorry, FaZe, but I trust you to do something with this and Gabriel to tell me where to put it. That's all I have to say.




## Why is Next.js so slow__ - 20250407
It's getting to the point where I can just feel that an app is using server components when I use it. Nearly 1 second page navigations. I'm sure it could be improved, but I've yet to come across a server component app in the wild that feels good. It's about to save Vzero, but I just checked and I'm not even sure they're using them anymore. As per usual, DAX is mostly right, slightly inflammatory, and not showing the whole picture in this particular instance. I think there's a lot to dive into here. I agree with him that most of the server component apps I have seen have been really really rough. But I don't agree this is the fault of server components. I'm going to say something a little controversial on this one. I think the blame for the slow server component sites falls less on the next team on Verscell and certainly less on the React team and the people working on server components directly and more on people like me. In order for this to work and work well, we need to deeply understand how server components behave and what they mean for us as developers because there is no excuse for any website to be as slow as this one is. It almost feels like we've gone back in time to the way pages worked before. I want to break down what makes sites like this so slow, how we got here in the first place, and most importantly, how to use server components correctly so that we can have the fastest possible websites while also matching the great DX that we expect from tools like React and Next.js. Sadly, developer experience doesn't pay the bills. I've learned that lesson enough times. So, we're going to do a quick word from today's sponsor right before we dive in. Building apps has never been easier thanks to all these AI tools. And deploying them has never been easier, too. at least until you need to add a CDN, a DOS protection layer, file storage, a database, automatic builds during CI and pull requests, and all these other things that we expect now as developers in order to keep moving as fast as our editors let us. That's why today's sponsor, Savala, has changed the game for all of you guys that need to host real servers. Once I saw this dashboard, I immediately got it because Savala makes it so easy to deploy an actual server instance and throw the right infra in front of it. Setting up Cloudflare in order to handle DOS protection, CDNs, and all of that stuff that you really should be doing in front of your app is particularly annoying, especially if you're using frameworks that are expecting traditional server hosting, like you know, Elixir, Laravel, Rails, etc. This has made my life significantly easier when deploying things that aren't my usual JS stack. Not that it doesn't work with that stack, it actually works really well with all that stuff, too. Where things get way cooler is the pipeline feature where you can set up preview, dev, and production environments. S plural. Yes. So people can file a poll request and automatically spin up a preview app that will sleep after not being used for a while. These workflows are obnoxious to set up and we had whole teams at Twitch building all of these things so that we could have better code review experience. All of a sudden it's just a feature built into the platform. And as I said before, it's not just servers and it's not just the Cloudflare integration. It's so many more things like object storage and databases, too. Doesn't matter if you're trying to host a static site, an Nex.js app, some crazy stuff in Python, some weird side project you built in Rails 8 years ago. Pretty much everything you'd ever want to ship is going to work on Savala. And I know that for a fact because this is built by Kinsta, the company that made WordPress actually hostable. Check them out today at/savala and you'll get $50 of free credit applied to your account. This video is inspired by a lot of the push back I'm seeing on server components. Obviously, this and the performance side, that's the most important piece. But also complaints like Michael Jackson from the Remix team saying that server components are nice in theory, but they're not working out. Evan here saying that server components aren't necessarily a problem. They unlock cool patterns, but the overhead is the issue here. And me responding with probably too many words to Dax's post trying to break down what happened and how we got here. I could just read this to you. And believe me, part of me was tempted to just read this out considering especially how positive the attention and feedback was to it, but I'd rather go in detail on how we got here and why these apps are so slow. I'm going to do a real brief history of the web. If you want a deeper version of this, I have a long video that I think is genuinely super underappreciated. All the ways HTML gets to your browser. I think this is one of my best videos, even if I don't look like that anymore. If you want a deep dive on all of this, check that out. Going to do an overview and then focus more on how to do this stuff better. The way the web used to work was pretty simple. The user sends a request to the server for site.com/index.html. HTML and then the server processes that request and sends a response which is the HTML content. This is hopefully something we all understand. Once this HTML goes back, it will have link tags in it which are the primary method of interaction. It might also have forms and whenever you fill out a form and hit submit or you click a link, it sends a new request to the server either requesting new HTML, so site.com/new.html, HTML or it will do a post request to a given URL, usually the one it's on with traditional form data where it will post to site.com some form data and then the server gets that data and it again responds with new HTML. This is how all interactions worked. There are some important catches here though. There is a big delay from when a user clicks on something or does something and when they see a response on the browser because the server is what controls what's in the browser. Not the browser, not the JavaScript, none of those layers. When you do something in the browser, you have to wait for the server to respond with the updated HTML. The only way the content of your page changed at this time was either you sent something to the server and waited for new HTML or you used a marquee. So, you had text that scrolled around. But that was effectively it. Over time, web apps got more and more interactive, in particular with JavaScript getting more and more popular. We had the weird Flash and Java era. Not going to go too deep in those right now. Thing I want to focus on is more app-like behaviors in the browser, which eventually led to what we now affectionately refer to as single page apps, SPA. The big difference with SPA is that the user only requests HTML once. So the user can go to literally any page. So unlike previously where the URL mattered because I would go to site.comindex or slash user info, none of that matters. So literally mentally block out whatever comes after the domain because it doesn't matter in this case. The reason it doesn't matter is because the server only has one page to send. That's what single page app means. Sends only HTML. This HTML page that is being sent from the server or from a CDN or something else has some things in it that are important. This HTML has a head tag. This head tag has the things that actually matter. The one that we care about is the script actual or actual app.js. This is what most React apps roughly look like HTML wise. There is no actual content in the body. They might have bothered with a real loading state. Most don't because the thing that matters is this head tag in the JavaScript. This single page is what's served by all the URLs on your site. When a bot crawls your site or a user goes to a page or someone types in a URL, all of those things are going to resolve to the exact same tag, to the exact same HTML. If you go to any page on Twitch, any page on Excaladra, any page on most React apps, it's the exact same content. This kind of sucks because it means when the user gets back the HTML, they get an empty state. It has to run the JavaScript code. The JavaScript code will then make its own additional requests. Going to make one subtle change here, which is instead of calling the server, I'm going to call it CDN. The user will then after they've load that HTML request app.js or whatever else they need to run the page, the CDN will send that back. And now the user can run all of that. And more importantly, they can start generating the actual page content. So once that is all happened, God, I wish I didn't bind all of these because now it's going to be annoying to stretch this. Cool. You get the idea. User requests from a CDN on the site. They get back the static HTML file which has the tag for the JS in it, CSS and all those other things too. They get back that code. They run it and now they need to get some data from the API. So we have a separate thing here which is the actual server, not the CDN. CDNs are only holding static content. And this is the actual server that does the actual work. So the user has to go to, I don't know, SL API/ some data. And then the server parses their credentials, checks who they are, figures out what they're requesting, and then responds with whatever the hell they were asking for. In this case, probably going to respond with some JSON data. You get the idea. Now your app has that data. Now your app can turn that into the React components and eventually the HTML that appears on your page. There's an important question though. What's going on right there in between this section once you get the HTML and once the data is being requested and then eventually is being shown to the user? But more importantly, basically from here to here, what is going on? The reason I ask about this section is it's actually a thing single page apps do really well. If your components need to request data, you can do that in the component, which means in that same component, you can render a loading state. That is nice because now when data is loading the user still sees something on the page and the developer has control of it. It comes at the cost of you can't choose what they see from here to here. You can give them some static HTML but no one ever bothers. But once the JS is loaded, you have full control of this loading state. And what's even cooler is since every page has the same HTML, most of them have the same JS and you can prefetch the JS that's page specific if you choose to. Now when a user clicks on a different page, you don't have to wait for the server to respond because a single page app doesn't do server side navigation. It does it all on client. When a user clicks on a link in a single page app, it doesn't have to make a request to the server. I almost want to make a quick demo to show this, but you could imagine you have a traditional website that has three HTML pages. You open up the network tab, you go from page one to page two, you'll see it going to the server to request that page. If you're doing a single page app, it hijacks the routing and the history in the app. And now what it does instead is when you click a link, it uses the JavaScript from the React bundle to update the HTML instead. No longer do you need to do a server request on every single navigation. That said, most pages are going to need to make API calls. When I go from a tweet on my homepage on Twitter to my profile, data has to be loaded to show my profile correctly. Traditionally, that would be a whole new HTML page being sent and when you're waiting, you would get a loading state from the browser if even the browser's loading states generally speaking kind of suck and users don't expect them. We'll come back to that in a bit. Don't worry. This is positives and negatives. The cool thing here which is again the important piece I want to emphasize is once this JS here loads once you have successfully gotten this JavaScript into the client from that point forward everything is going to feel immediate simply because when a user clicks on something the response happens instantaneously because it's happening on their device. It's not waiting for a server to make that change. In the old model that wasn't the case. Anything the user did would require a server call. With single page apps it doesn't. It takes longer overall for the user to see the right content, but when you feel the page change instantly, it feels faster. And I'm not the only one who thinks this. This is a very wellstied phenomena. If you have a website that takes 1 second to go from load, like the user requested the page, user clicks link, and then 1 second later you have the full content. This isn't necessarily bad. If this takes 1 second to do, you're not necessarily building a website that feels awful. I know this doesn't feel that bad because I've built websites where the time for loading full content is more than 3 seconds. Some are like five or six, but it doesn't feel that bad because I would respond as soon as the user clicks. So within a very very small number of milliseconds, I'm going to kill that and instead put one here which is like 0.013s. At this point here, really really early on, I changed the content of the page. One more important detail of this is wherever the user clicked, you need things to change there as quickly as reasonably possible. When a user clicks on a link, ideally you should be able to show on the link and the page that something is happening as soon as they click because otherwise they're not going to be sure. They're going to click it multiple times. They're going to do a lot of other things. I'm not saying throw loading spinners everywhere. I'm saying that the point of interaction needs to change. If you have a sidebar that has a whole bunch of links in it, something like this. You have like link one, link two, and link three. You're on link one. You've already loaded that page and you click link two. If your loading state is just here, it's better than the weird little bar in the browser, but you clicked right there. So, you need to show on that that the click applied and something is happening. If you don't, it will still feel slow. This is the case on a lot of websites that are built this way. And for better or worse, sad to say, but this is the case for a lot of sites using technologies like Laravel and Rails that aren't taking advantage of single page app behaviors. There are exceptions. In particular, if you're using inertia with Laravel, your site's going to feel great because Laravel with inertia is literally using reactor view as the runtime on the client side. Laravel has now been relegated to server duty. This is how things like the whole Laravel cloud platform are being built. And the reason they feel so good is because they're using React for its strengths, which is the client side behaviors. And you can handle all your API stuff in the Laravel side or whatever other language you want to use. That does touch on one other important piece here, which is that there's a clear line here, a division between the client and the server. And instead of the server telling the site what to render and what to show, JavaScript devs can handle all of that themselves. All of the dynamic behaviors, all the interactions, all the everything happens in the JS bundle now, not in the server code, which has allowed for JS devs to kind of lock in on that client side and not leave, which has benefits, but it also has some negatives we're going to get to. Back to this loading thing here, though. Before we had single page apps, you wouldn't have this immediate indication. You might have your site set up in a way where it blank pages immediately when you click the next site, but most didn't. Most browsers would hang on the page you were on as you wait for the next one to load with no good indication that this transformation or this change is happening. Somebody said that you can use view transitions with help with page full page reloads if the page is already loaded. But a view transition doesn't help if the new page isn't there yet. A page transition takes new HTML and old HTML, diffs them, and makes an elegant transform from one state to another. But if you haven't loaded the full content yet, a view transition can't help you at all. The thing that matters here, and it's really important, is that you get the user feedback as quickly as possible. There are some measures of how quick before a user feels like it might be slow, less than 50 milliseconds feels really fast. Generally speaking, if you can show the user something happening in less than 50 milliseconds, it feels really fast. If it takes more than 150 milliseconds, it feels unresponsive. It takes more than like 17th of a second to see something happened. Our brain just assumes the site isn't responding well. There's a bunch of research that gets these numbers. I don't feel like finding it and citing it. Take my word for it or don't. If you use a website where these things don't happen, you'll understand. And if you use T3 chat and then compare it to our competition, you'll understand even more so. And they're also doing this. They're doing things to get you a response immediately. So when you click a thread on the sidebar, it immediately indicates there that you're navigating. Hopefully I've drawn the point home here. Single page apps make it way easier to respond immediately to a user interaction. And when users are interacting more, they're clicking more buttons. They're changing pages more often. They're exploring the site in a different way than how we used to in the past where we would load a page, stay on it for a while, then click a button, and go to the next page. SPA work differently, and they're meant to feel more like apps, not sites. That's a big, big difference. I don't think people appreciate. The reason apps on the web have gotten so good isn't because servers are fast. It's not because browsers are better. These things all help. The main reason is because single page apps as a paradigm allow for better app-like experiences in the browser. Everyone this is going to be a short overview. So much for that part. So where does server components come in with all of this? Server components are very interesting. There was another stage that you're gonna have to go to my HTML video if you want to learn more about which was the idea that a different URL could have different HTML that was just the React code run on the server once to generate a better page as a starting point. Server components go a bit further and I just took the same diagram. This part matters again. The / user info or whatever URL you're going to matters again because it will generate different content. It will check the CDN first to see if there is a cached version of this page. if it's a static page. If there is, it will send static page. But if the page isn't static and it can't do that, it will then forward it over to the actual server. So this then sends to the server. The server will generate the page and then that generated page gets sent down to the user. This is a very different paradigm. It's also worth noting that you need a CDN that's smart enough to do this two-step layering where it uses the cacheed asset if it can or it goes to the server if it can't. And if you're just hosting a server component-based Nex.js app on Docker, it's going to have much worse performance characteristics than a single page app simply because you're not using a CDN. If you're building a single page app, then when you run your build command, it generates one HTML file and a handful of other assets and then it dumps all of those into a place where you can access them really quickly that is static. And then when a user navigates, it hits that, but when they call the API, it'll instead hit their server. If you're using server components without some type of CDN between the user and your server, you're using server components wrong. You're going to have a bad time. It's going to feel slow as especially compared to a single page app. That's just first page load, though. Where things get frustrating is when you start navigating. So, if I go to / user info and then I change my mind or I click a link and I want to go to /dashboard, when I make that navigation, it now checks the CDN, see if that content exists. If it does, it sends it down. If it doesn't, again, round trip to the server before sending it to the user. That means you're no longer getting those instant navigations, right? This is where the nuance comes in kind of. I think React devs got a little too used to waiting for some data, showing a loading state while it's loading, and showing the result when it's done. And that pattern did work great for most of the apps that we built. It also means that everything that happens from here onwards kind of doesn't exist in the React developers brain. This is a frustration I've had for a while. It feels like web devs don't understand servers. Not necessarily as a generalization where like every web dev doesn't get it, but like my history is backend and this is when I really feel like I'm not a traditional front-end dev as much as you guys stereotype me as one because I very deeply understand this and have had to go as far as like explaining what cold starts are to Dan Abramov because not everyone gets it. And that's fine until you need to write code that runs on servers. And here's where the problems come in. I built us a mock app to try and showcase where things fall apart. This demo app is a dashboard. I'm going to open up the network tab so you guys can see what happens as we navigate around. I am going to click second page right now. And it loads almost immediately with no network requests. I'm going to click third page. And same deal, no network requests. Now I'm going to click first page. That took 576 milliseconds. It took way too long to respond. And if I go back because uh Shane found the response time limit study, the barrier for feeling instant is.1 seconds. 1 second is above the limit for a user's flow of thought. So if it takes more than a second, then you've stopped thinking about the thing you're doing and your brain is starting to wander. 10 seconds you lose their attention entirely. So ideally you respond as close to.1 seconds or less as possible so that it feels instant. So there is nothing you have to do to handle the user behavior. If it takes longer up to a second, then you need to be real careful to not lose the user's attention. And if it takes over 10 seconds, you're kind of So, as we just saw on that page load, it took 600 millonds. It's not quite over the 1 second limit, but it's enough that it feels way slower. So, I click here, nothing. I click here, nothing. I click here, wait, then it shows. It sucks. Let's look at the code that causes this. I made a simple mock app here. We have the dashboard layout as use path name different links. Each of those links shows uh underline if you're on a certain page or this outline there when you go to one. Not bad overall, but that loading time there, like watch, I'm clicking, moving the mouse, and it looks like nothing happened. It feels really bad. The reason that component is so slow, to be fair, is because I put a wait for 400 milliseconds there. I intentionally slowed it down because I'm fetching data from this like JSON blob locally. So, it's going to be fast, but I wanted to to make it feel slow because real API calls, real servers, real round trips, real distances between the user and the server, all of these things will make it actually close to 400 milliseconds. I've had services where the database calls can take multiple seconds, especially once the databases get big enough, things can get chaotic. People get really mad at me when I say database requests can take a second, and that's fine. And that just kind of says they don't use real data. Anyways, the point here is that this one particular page takes 500 plus milliseconds to load and show to the user. The app structure here is pretty simple. We have the layout which is the wrapper for the main dashboard page as well as first, second, and third. These components aren't asynchronous. They're synchronous. And these components don't have any data fetching, nor do they have the dynamic flag at the top. I had to tell Nex.js JS to force this page to be dynamic because by default nothing was using cookies and nothing seemed user specific. So it had no reason to make this page dynamic. It would just build it at build time and serve it from the CDN. So if you're able to do that, if you can have pages like these two that don't have user specific content, they don't need an off wall. They don't need any of those things. You can just have it build out as static pages and it's not even going to request them. When I click these, these are all content that was loaded in the JS bundle that now is there and ready to go when you click the links. That's really cool in my opinion. The fact that once the page is loaded, once this whole site is loaded and the JS is there, too. Most of the pages aren't going to need extra work to get to. They don't need a network request. They don't need to do anything. They're static. Nex.js knows that. And Nex.js will load those pages immediately the way we expect with single page apps because RSC's are true hybrid. It's spas when they can be and MPAs when they should be. So, how do we fix this awful loading time? I'm going to show you a build where I already fixed it and then I'm going to show you how I did it. Watch what happens here when I click first page. I'm clicking it now. Oh, that was immediate. Why is that? That shouldn't have been immediate. Immediate. We'll refresh and try again. Clicking now. Huh. It showed me something instantaneously that time. If we clear this and you watch the network tab, I'm clicking now. The moment I click, we get that loading state. It wasn't a good loading state, but it was one. And that meant that most importantly, this sidebar where I click, as soon as I click, second page isn't highlighted anymore and first page is. That's a huge win for the expectation a user has when they navigate that when they click, things happen immediately. But that was a server component that was doing a bunch of complex server side logic. The loading state must be complex too then, right? Because I'm not checking on the server and sending something down different when I'm loading. I'm not even doing pre-fetching here or any of those other hacks. So, what's going on? Why is this so much better already? Well, I made one small simple change. All I added this one file loading tsx in Nex.js. This is the easiest way to add a loading state. There are other ways I could in my layout wrap a suspense tag around the children so that they don't have to be rendered before that like content loads. But the loading tsx is the easiest way. In order to understand how loading tsx works, you need to understand a bit about the next rendering hierarchy. If I have a page like /dashboard first, next.js has to resolve this in a couple layers. First, we have the root layout, which is an app/ layout tsx. That file is the one that has your metadata, usually for your main homepage on your site. It has your HTML tag, your body tag, any providers you might be wrapping your app with. All that goes here. This is the entry point for your app using app router and server components with Nex.js. as we go through each of these steps because our goal is to get to a specific file. The file that we want to get to, the one that matters is app dashboard/first/page.tsx. This is the one that has the actual content. But as we start from slash and go all the way to first, we're collecting things on the way. If we had an app/loading tsx, we would collect that at that point, but we don't. So we do end up collecting is app/dashboard/ layout tsx then app/dashboard/loading tsx. What's happening here is as we go through the UI and as these components get mounted, this mounts as like the wrapper. So this whole section is app/ layout tsx. Since that doesn't render any real content, the next layer is basically identical. I wish I had an easy way to indicate that here. make it like slightly smaller. But know that this layer is still the same content HTML wise. It's just a tag inside, but what you see as the user, it's identical. I almost want to sketch this out as HTML. Actually, that might be easier. So, the app layout covers all of this. Within here, we have that body tag. This is going to have the sidebar and it's going to have the first page content. This section here, the content of body is going to be wrapped with the next layout. And then this first page piece in there is one of the components being passed as a child. What matters about this is as we go down the tree, we're looking to see what is or isn't static. And we're doing this during build. So at build time, we know that app dashboard first exists. So we're going down the path to get there and seeing what we hit along the way. What we notice when we hit first page specifically since this component is dynamic, since this element requires something that is unique to this request, we can't generate this whole page statically. So what we then do is we climb up looking for a wrapper of some form. If I was to make this not HTML and make it the actual like names of the components, it might be a little easier to understand. App/ layout is this root wrapper there. App layout is all of this stuff. In body we have app/dashboard layout. And then we have inside of the app dashboard layout component the sidebar because as we saw in here that's what I mounted. I have div class name whatever sidebar and then this main element that has the actual content. We could even show that here. I then have main and this is where children renders. So what happens if children has to do more stuff? Well, we'll go down the tree. App layout, static, cool. HTML, static, cool. Head, static, cool. Body, static, cool. App dashboard layout, static, cool. Sidebar, static, cool. Main, static, awesome. Children, oh, children's dynamic We need to find a way to render this page if we can. So, the next step is we go up the chain looking for a barrier or a stop gap at some point that tells the build step this can be static. So if we go back here, when I made this loading tsx, what this loading tsx does is it introduces one additional barrier. It introduces here app/dashboard/loading tsx. Now when we are loading the dashboard right here, we can fall back to whatever's going on there. If you're familiar with suspense, you could effectively also put a suspense tag here to do the same thing. The point I am trying to make as I draw all this out is that as you go down the tree, once you hit something that requires data from the server that's unique to the user's request, this whole tree can't be sent until all of it is generated. But if you put things like loading states above the dynamic content or you wrap things in suspense, now we can build a version of this page. We can have a static HTML version of this page that doesn't include the children. It just puts the loading state in. And now when a user makes a request to go to the page, when they click the button, we can immediately show them that built bundled static version that is the loading state is we wait for the server to generate and send down the content to fill in to replace that loading state with. The reason that people are doing this wrong is that it's very different from how we did before. Previously, when we wrote a component, it was pretty simple. Here's a real traditional basic boring React component that we've all hopefully written something like before. In here, we have data. It is loading. We request the data. We check if it's loading still. If it is, we return the loading state. And if it's not, we return the data. This is great, simple, awesome. Also only works on client side. The problem here is the data loading is now done entirely differently because we're doing it on a server side async component. I can't go into first here and do something like I don't know instead of awaiting here I can't return something different while this is going on and then return the rest later because functions don't work that way. React works that way but functions don't. And once you're calling async functions you can't send a response down and then send another one later. And that certainly won't work at the build step either because we need to know what HTML each page points to. The only reason this model works for React as a single page app and as React that we know today is that all of this code, every single line of it, all of the functionality, all of the everything lives on the client. This code runs on the server. I'm hitting file system. So does it even matter if theoretically I could return something different early and something else later simply because this code can't run on the client. So the client won't know what to do with any of those different states as they happen. Thankfully, the React team accounted for this, as did the next team. As a quick demo, I just replaced the loading tsx with this suspense fallback instead. There's a reason for this. When I go back to my page here and I refresh, you'll see we get the loading state and then we get the dashboard. If I go bump up the amount of time it takes, it'll be even easier to see. I'll make it 4 seconds instead of 400 millonds. So, refresh. 1 2 3 4. There we go. When I refresh again, one, two, three, four. Cool. There is a catch though. I'm going to click on first page again. Huh, that's taking a while again. The reason is that the next.js JS build step. The compiler that actually generates the pages that each of these things goes to in the JS that can navigate for you isn't smart enough to know that that suspense tag we have here means it can generate up to this point as a static page. Next isn't smart enough to make a static page for this that is then bundled correctly. And that's why they introduced two patterns to to solve this. The first one is partial pre-rendering where it will go all the way down until it hits a suspense tag and then generate that as HTML. The other is one that I'm really excited about, dynamic IO. These are not ready yet. So, make sure you understand as I show these, they are very, very new. Server actions are not anymore. But if we hop in here, PPR true for partial pre-rendering and dynamic IO true for these new IO behaviors. I also have to go hop in here and delete this force dynamic. The thing that makes dynamic IO cool is it's smart enough to look for the first async boundary and then treat that as dynamic. Dynamic IO literally means on IO, which is asynchronous work, things that hit file system, databases, network, stuff like that. At that point, opt into a better build step and loading pattern. So with that all on, if my understanding is correct, going to restart the dev server to be sure. Reload. We get the loading state. Second page. First page. Huh? Is it really not smart enough to do that? That's annoying. I really thought that would be smart enough to handle this case. I guess it is not. If I build it, will it be loading dynamic IO? And if anybody at GitHub is watching this, I will do whatever I must to get you guys to change links that aren't to GitHub to be target blank. I should not click on a link and have it update and override the tab I am in. Clicking a link should open a new tab. This behavior has never once made sense. It never will make sense. fix it. I just built this with the suspense and dynamic IO turned on to be sure. And sadly enough, now when I click first, still has the same problem. The reason for this is because layout doesn't rerun on client. This has to be run on server the first time. So when we're going down the path, this has to hit the server to run again because it knows that specific route is dynamic. So we need a way to tell it when that changes. And you can't do that in layout tsx. So let's move this suspense a little bit. Change this from the default async function to just be async function first page content at the bottom here. Export default function first page. Wrap that with a suspense. And now that we move the suspense there. There we go. Now we get those immediate behaviors. So the gotcha that I just hit, and I'll be honest, I wasn't sure if I would hit this or not. Part of why this is all so confusing, is if you're doing something asynchronous that requires data or is checking a user's information at any point during your render process, ideally you show next a clear path on how to get there statically. Since I moved that suspense here, the component first page, which is what gets thrown into layout tsx that is static. So at build time, we can identify that this route is static up until the page loads this component because then its child first page content that is now dynamic and that will be fed in when it's ready. and the build step, the static HTML. And JS that's generated for this route will go up to here and will include this loading state instead. But as I was trying to hint at earlier, you don't have to do that because all you have to do to get this behavior is add that loading tsx file. Why my editor keeps doing that? Loading tsx. And now in here, if I export default loading, I don't have to worry about anything anywhere else. I just export that and I'm good to go. Since this is exported here, it automatically is inserted inside of the layout as the loading state wrapper. You shouldn't be doing dynamic stuff in layout if you don't have to, and you certainly shouldn't be doing loading data patterns in it if you can at all avoid it. The existence of loading tsx helps you shortcut all of this. And as silly as it might seem, we go back to the demo DAX had here. This absolutely could have been solved simply by adding a loading tsx file wherever the layout that shows these are. And it's annoying that you have to know that, but you also had to know that on the client side, too. You had to know that when you get data, it has this loading state and you have to return something for it there. The difference here is simply that we get type safety with all of these. So, if you try to access data before you verified it exists, you get an error. So now we have to return the right thing before we can use that data. That's awesome. It's a really cool feature of TypeScript and it's a big part of why I love it so much. There isn't really a similar way to do that type of type safety with these servertoclient interactions. There is no way for us to use TypeScript to check and say, "Oh, the component you just mounted is dynamic. Make sure there's a loading state somewhere above it so that we don't block the URL and we don't block the page." What I've considered doing is building a plugin for the next build step or lint step of some form that checks the outputs and makes sure that none of the routes that are built can't do these things. And thankfully, Verscell's given us relatively good tools for checking these. If I hop over to my inspector here, we can see what was built. And most importantly, at the bottom here, you can see what type of page each route routes to. The empty circle means static. So, all of these pages are fully static routes. But then we have dashboard first, which is dynamic. They also have a cool partial pre-rendering indicator if you have that set up properly where it'll be a half circle. We're not using PPR here. My ideal world would be one where when you have this and it's not on slash API, you get an error of some form. So the team can take a look and make sure that this should indeed be a function and not something static. You can also see here that each page gets its own JS and we have this loading js too. These all being embedded mean they're all on client. So when you click something it can render the right content accordingly. Really nice having this output and seeing what is being generated. It would be much nicer if I could clearly indicate here that this does have a default state that it falls back to in the interim. And now we can see clearly here with the dashboard first that it's partial pre-rendered which as they say means it has static HTML with dynamic server streamed content. So the user on navigation can immediately see the static content and then also kick off the stream for whatever parts are unique to that page and that user. It's so nice and I am very excited for this to become the default in Nex.js. PPR was announced two years ago roughly. When I talked to Verscell, they're still hesitant to tell me to recommend it and even hesitant to tell me to use it. But in a nearcoming future, this will be what we want to do on all dynamic routes so that they all have some static HTML that they can immediately load and then bring in the dynamic part when it's ready. And this all results in our ultimate goal which is user clicks link immediately has something happen and then when the output is ready it shows it when it's ready. To go back to my long post here there are important considerations to make and I don't think modern web devs are equipped to have these considerations because the intricate relationship between the server and the client is something that most people don't understand. Both the client side people and the server side people. I saw both making fools of themselves throughout this. The client side of people saying it was so much better when it was a single page app. You're making everything harder for no reason and slower too. And the server side people saying just send HTML. Why would you send all these other things instead? Both sides are wrong here because client side navigation is objectively better. It makes it way easier to hit these latency expectations that users have. It makes your apps feel significantly better. But on the other side, if you're doing it 15 plus requests per navigation, you're now offing the user 15 times every time they click a button, it makes the backend characteristics much harder to get right and the performance expectations much harder to land. It makes the load to the complete page way slower. It's funny how a page taking 2 seconds to load is fine if you see something immediately, but a page taking 600 milliseconds sucks if you don't see an interaction immediately. Single page apps let you get that 4-se secondond load time but also that immediate response. Source side rendering lets you get the optimal time to complete page at the cost of that loading state. RSC's are this magical in between where you have the traditional client behavior and you have the server loading all the dynamic stuff together as one. So to summarize the world before RSC's looked something like this. If we have left to right, we'll say it takes 3 seconds to load this page. The traditional MPA, which is traditional server, assuming that the user is clicking on a link here, the traditional MPA isn't going to show anything until you get to the end of the load. But it can do that load really fast because it only has to request the data once. It only has to off you as a user once. It doesn't have to wait for a component to load before loading the next data. It can just load everything at once. So, page loaded. We'll say the page loaded completely. Assuming they made it like optimal data queries, they fetched everything with a single SQL call. Say it took 0.7 seconds. If we take a traditional single page app, it will probably take a hell of a lot longer to actually load the content. And we can't say page loaded anymore because the page is always loaded. You're not loading a new page. So, we'll say content fully loaded. The content fully loaded might take a lot longer. It might take 2.5 seconds, especially if you have a component render and then it mounts a component that then has to go get additional data. Then it mounts a component has to go get additional data. You get all of these waterfalls back and forth. The difference with a traditional single page app is when the user clicks, you can immediately do something different as I've been saying this whole time. So the first response will happen significantly faster, like literally 0.05 seconds. So the user will see something way earlier. the page will finish way later. This still feels better than this does. As crazy as that might sound, I didn't believe it either, but I've seen it. I have built a lot of apps in all of these ways. Most users will perceive this site as faster. I know that because that is what happened with Ping. The Ping GG site is not fast. Saw how long it took for all that to pop in. If I hop over to my actual Ping dashboard, I'm signed in here. I'm going to click the dashboard button now. instantly get a response and then the rest has to flow in. There were points where our infer wasn't in a great state and that next state it would stay in that loading spinner for like two plus seconds. That's not the case anymore because we optimized it but it didn't matter cuz when you clicked a link it would immediately go to the thing. If I click join room immediately get a loading state. If I go back we immediately go back to where we were because that's all cached. If I hit options immediately loads the next page. Even if it shows that loading state, it doesn't matter because when I clicked, something happened instantaneously. That expectation is key. Oh, good context from Lee here. Part of the reason that partial pre-rendering isn't stable yet is some of the warts that I just stumbled onto in the video. They want to get the model right with use cache and dynamic IO before you can have a good time with partial pre-rendering. It's then a switch that you'll flip for faster initial time to first bite. Mostly agree. The piece that I think is more important than TTFB is immediate navigations. I want not just when a user types in the URL and hits enter to have that show something as quick as possible. What I really want is when they click a link once the site's loaded that they don't have to wait before seeing something change. And right now the loading tsx file helps a ton with this, but not quite enough if you don't know how to apply it properly. I really want a world where every click has that spa magic of instantly showing you the next page in some state even if it's entirely empty but I want a reaction to my click immediately then the data when it's ready the traditional SPA now I do something controversial spa dev building RSC's so you take a single page app dev that is just not familiar with server load patterns or the nature of how RSC's work here it'll be faster Because if you took the exact same code with those nested components, doing the waterfalls on the server will be a hell of a lot faster than doing it on the client. It might even be like half as slow. We'll we'll say that it's possibly more, possibly less. We'll say half as bad. 1.2 seconds. This still sucks. This still is a really unpleasant experience. You get much closer to the traditional multi-page apps performance. And honestly, if you built these exactly the same, it would be identical. However, you also have the same problem that traditional MPAs have, which is that you don't get a response when you click, and that's to go back to Dax's post, why this site felt slow. If you built this demo with traditional technologies like Laravel or Rails without any client sidejs, it would feel pretty much exactly as slow as this does, plus the cold start hits and potentially JavaScript being slower. But in the end, it's all data fetching. It won't matter. The point here is that this feels slow because each page navigation, each click requires the server to respond with some content. This is also why HTMX doesn't solve the problem. As much as I love HTMX, it doesn't solve this. But there is a win here. There is a way. in the way. It's what happens when a back-end dev gets RSC's. When somebody actually understands the RC patterns or maybe they watch my videos and learn about it that way or they've been paying attention to all the Versel change logs and release notes and all of that stuff, it is harder to get here than it should be. But once you are, you end up here with the best of all worlds. You get a first response just as quick as you do in a single page app. and you get a full content response roughly as quick, if not just as quick as you would in a traditional MPI. These two terms are usually TTFB, which is time to first bite, and FCP, which is full content paint. The problem with MPAs, as well as RSC's, if you do them wrong, is it makes TTFB the same as FCP. If time to first bite is the same as first contentful paint, then you end up with that awful loading window up until then. I'm going to draw these in with two different colors. Red is for the bad loading state, which is the user is relying on the browser's loading to see that anything is happening. And with a traditional MPA, you get that state up until the page is loaded. With a traditional SPA, this loading state gets resolved almost immediately. And now you, the developer, can have a nicer loading state. We'll make it yellow. I was going to make it green, but I'm scared people will make that think it's good. It's still not good to be loading for this much time, but it's a hell of a lot less bad than being in the terrible browser state where it doesn't feel like anything happened. Problem here is this. And this is what Dax experienced. This is why it felt so bad. He was in the bad loading state the entire time until the response came through. In my opinion, the goal is get this red bar as close to zero as possible and get the yellow bar to be as short as reasonable. In an ideal world, there would be no red bars and short yellow bars. And the option here that has the shortest red bar without massively increasing the yellow bar is definitely server components done right. If we took all of this and flipped it, you'll hopefully see what I mean. Tada. And you'll say we screwed up moving all this JavaScript to the client. This is what they mean. The lowest number here by far is the multi-page app. It is the one that can load the content to the user the fastest because a request comes in, it immediately gets resolved with a specific pages content and the user sees it when it's ready, but they get nothing until it's done. This line here is a good response time for when the user clicks and the MPA doesn't hit it and the server components without good loading behaviors also doesn't hit it. If RSC's are done right, it should get the best part of a single page app as well as most of the performance characteristics we expect for multi-page apps without the negatives. It's kind of going for a best of both. And in my opinion, it does a very good job at it as long as you know the quirks and gotchas. This is the easiest way I could summarize all of this is this chart. The goal of RSC's is to take all these bad data loading patterns we use in single page apps and squash them into a much faster serverside on request data load and it does a great job at it if you know how to use them and you take advantage of tools like the loading file like suspense and use them all properly and carefully. But if you don't use those things you end up with a slightly worse version of what we're used to in the old multi-page app era. So you got to be careful when you use these things. Make sure you're putting loading places make sure you're putting loading states in all the places they make sense. It's really really nice behaviors and characteristics overall. It's not a proper server component video if I don't talk about HTMX for a bit. So, this is one last tangent because I did mention HTMX in my post. What HTMX had to say is most clicks on a web page do need to make at least one round trip to the server. I agree. When you navigate to a page, it will likely need some data that is from the server. The only thing I disagree with is this part. Is it really better UX to replace the browser's reliable, informative, batteries included loading bar with a spinner, assuming the dev even bothered to? Yes, it absolutely is. It is significantly better. And it sucks that this is the case, but the browser loading behaviors are They are garbage. They are really genuinely bad. No one understands when the browser is loading something, they hit the button four times instead is what ends up happening. There's a reason that rage clicks are one of the most important things we track on our apps through our analytics tools and our error management tools. If the browser doesn't show you on click that something is happening right where it happened. The locality of the response is important. If it's a bar at the top of the page, it doesn't matter. If it's a loading status at the bottom of the page in the bottom left corner, it doesn't matter. And it's sad that I am the only one who's like in between here because as you guys know HTMX was built by and for backend people and it is so correct most of the time. And this is why I am regularly stuck in the middle is I have to explain to front-end people why HTMX is good. But now I have to explain to the backend people why the browser sucks. I'm stuck in these two places where I have to explain to React devs that not everything should be JSON and I have to explain to HTMX devs clientside JavaScript for loading states is actually a beneficial thing. It's a good thing to not wait for the browser to decide what it will show you and when to actually control that state. It makes things feel faster when you click and you immediately are somewhere else. Even if the page is empty, if I own the loading state, it does feel better. Browsers are incredible, but they're also terrible. And the user experience built into the browser by default is not a good one. We should stop pretending it is because we will end up with many more slow sites. And it is this exact mindset that results in the problem that I was quote tweeting in the first place. If you think this way, all you're going to end up doing is building more terrible feeling sites like the one that started this video in the first place. We need to make things that feel good. Hopefully this was a useful deep dive on the performance characteristics of different ways of rendering and maybe, just maybe, a useful way to think about server components. Let me know what you guys think. Are RSC's way overrated or is all this drama being a bit overblown? Let me know in the comments. And until next time, keep rendering.




## Why is OpenAI buying a VS Code fork___ - 20250508
Turns out VS Code forks are worth a lot more than any of us thought. I didn't think this is the path we were going to go down where an editor like Windinsurf would be worth over $3 billion in acquisition, but this is a weird time that we're in. For those who haven't been keeping up, there's been a surge of these AI editors that are based on VS Code, which is the open- source editor built by Microsoft and GitHub. VS Code is a surprisingly extensible platform for building an editor with. It's all web based, but a lot of the core primitives are actually really performant. And many of the UIs that we see for code editing in the browser are based on Monaco.js, which is the actual like editor view that a lot of these things are using, including VS Code itself to an extent. It's the graph of how all of these things relate is a little bit chaotic. I do my best to break down the landscape of all of this, why Windsurf in particular was acquired, why cursor exists in the first place, and how we got here. But unlike wind surf, nobody's paying me $3 billion, so we got to quickly make ends meet with a sponsor. We'll be right back. AI is making a lot of things easier for us as developers, but it's making some things quite a bit harder. One of those things is hiring. I don't know if y'all have put a public job listing out recently, but the amount of AI slop that you'll get as soon as you do is insane. We're talking thousands of junk resumes. Going through it to find good people is super laborous and tedious. Finding great people this way is basically impossible because all the great people have moved on and are looking for jobs in very different ways. One of the ways they do this though is today's sponsor, G2I. If you want to hire great engineers, there is almost certainly no better way to do it than working with these guys. G2I is a handful of different things. They're the organizers for my favorite React conference, React Miami. I actually just got back from it. It's wonderful. But they're also a video-based platform for hiring and basically an embedded recruiting team for your company to get the perfect people for your role. Whether you need inerson or remote, full-time, part-time, whatever else, they can find you the right fit almost certainly. And you'll be amazed how fast they can do it, too. They love to brag about how quickly they get people committing. I didn't believe it when I first saw, but enough of y'all have used G2I at this point that I can totally tell you this is true. From the first interview to the first poll request shipped by your new employee, the window is like a week. It's pretty insane. And these aren't random engineers they found in the middle of nowhere. There's over 8,000 experienced engineers that have crazy histories in the industry. Many of them are actually fang engineers, believe it or not. Shop Monkey hired 17 people in 60 days using G2I. That's crazy. If you're trying to blitz scale to take advantage of the crazy funding you just got or if you just need one or two great engineers to help pad things out as you make a bunch of changes to your business or maybe someone just left and you need to fill a role quickly. Finding someone good is going to be miserable especially right now and recruiters are oh god you're not going to find a good engineer with a recruiter because good engineers don't reply to recruiters. We just get annoyed by them. If you want great engineers without all the hassle check them out today at soyv.link/g2i. We'll start first with VS Code. VS Code has an interesting history. I've covered it a bit in the past in my weird like VS Code lawsuits and Microsoft fights back videos. But the TLDDR is that Microsoft wanted to make a more extensible lighterweight editor for people who were deep in like the .NET ecosystem. And VS Code was built to make life easier for those people. It was a surprisingly good editor. It quickly usurped Atom, which was the editor that Electron was originally built to make. And it quickly, like very quickly became the standard editor. VS Code has very quickly become the most popular ID in the world like by quite a bit. It has over half of the people responding in Stack Overflow. For example, when I go to an office, it's like 90%. Obviously, there's still people in things like Vim. Obviously, Java heads are going to be deep in Jet Brains. And of course, the C people largely are going to be in the traditional ecosystem of Visual Studio, not going all the way to VS Code. iOS and Android have their own chaotic ecosystems, but general developers, like the average person writing code for a living, there's a very high chance VS Code is the editor that they're using. Also, unlike almost everything else in this list, VS Code is open source. Vim kind of is. Neoim's taken over and is much more extensible, but uh things like Sublime Text Intelligj and Visual Studio, nope. Those are very close source things. So, it's pretty cool and I hope we can agree it's nuts that the most popular editor in the world right now is truly open source. Like that's a really cool thing. VS Code, I'll make the argument biggest opensource ID of all time, but there's a risk when you go open source. Others can use that source for other things. Microsoft was trying to curb this by making VS Code very extensible. So, VS Code extensions could do a lot. One of the things they could do, it's a little thing called co-pilot. C-pilot started as an innovation within the GitHub, what was it called? The office of the CTO, I think was the term. It was like the GitHub labs where they would experiment with new things. Copilot was the first autocomplete for your IDE. And to be clear, this isn't like autocomplete like with TypeScript. This is autocomplete like guessing what most likely is going to come next based on what you've written. none of the fancy features we're all used to today, but at the very least I could write a comment that's like if I'm writing code like sorts list from latest to oldest and then I write function sorts or sort list items item array open bracket and it would from here be able to somewhat accurately autocomplete the rest of this function. I have a video from way back when Copilot first dropped because I was skeptical as hell because I was like I have Typescript it's going to autocomplete well enough and then I used it, got a little used to it. Then Advent of Code started and I got my first ever top 100 in the world on it because I wrote the name of the function and it autocompleted a specific like type of sort function for a data structure. I don't remember what it was, but I remember like oh I understand now. It's not that this is smarter than me. It's how this will solve problems I wouldn't have solved. it's that it can carry me through the annoying parts I don't feel like typing or like recalling. So C-pilot kind of took the world by storm. It fundamentally changed how Microsoft operates as a business. Copilot was originally GitHub Copilot and since then the GitHub has been axed in favor of C-pilot being the branding for all of Microsoft's AI stuff. We'll be going back to GitHub in a bit so remember that. But as Copilot started doing really well, it was clear that there was opportunity for more. There's a bunch of other attempts at like AI focused editors like Tab 9 that never quite caught on, but one started to do pretty well. Cursor. Obligatory disclosure. I am an investor in cursor. I was very skeptical of it when I first used it. It took like three attempts for cursor to really feel better for me, especially because the tab complete was slower than what my preference at the time was, which was Super Maven. Super Maven is unbelievable. What it was was all focused on super fast quick learning autocomplete. So as you made changes to your codebase, Super Maven would adjust and more quickly pick up on the things you were doing. So if you changed like in a list, you add one fields to one entry, it would be able to catch on that you're going to add that to the rest, which was really nice. But Super Maven's actually an important thing to talk about here before we get to cursor because Super Maven ran into a problem that a lot of the other things building into VS Code ran into the editor severely limited what you could do. So as good as Super Maven's tech was, as quality as the autocomplete it could provide was, they were quickly running into limitations from VS Code itself because the extension platform, it was a bit of a mess. It was very focused on like adding a little sidebar panel. Like if I go in now, the thing that VS Code was really trying to lean into was different panels that are what the extension does. So here I have the pull request extension. Here I have all of my other extensions. And if I click this arrow, you can see the other ones I have installed. Extensions wanted to do that and language servers and not too much else, which was not enough to do like inline stuff. Pretty errors is a great extension. I rely on it heavily. Oh, look, a mustached blonde. The video Theo pretty ts errors will take this horrible formatting that you get from a TypeScript error and make it look like this. So clearly this is pretty extensible, right? Like if I hover here, we get this much nicer looking editor. But you might notice there isn't enough vertical space for it. The reason for that is VS Code doesn't let you like extend this or render things traditionally. This whole piece, the reason I can't highlight text in it, it's an SVG. the creator of pretty ts error is using an SVG icon hack in order to sneak this whole like pile of stuff in here which is really cool but like absurd that that's necessary because again VS Code was not built to be extended in the ways that we're trying to extend it now. So Super Maven ran into those limitations and they announced that they plan to solve it by making their own editor. Curser was already doing that though and cursor noticed the Super Maven strength was its really quick autocomplete which wasn't yet a strength in Cursor and as such they decided to acquire Super Maven to go all in on the tab complete functionality for cursor and the results magical. I'll give a demo in a little bit but the cursor tab complete stuff is so good that I barely use the other features. Especially right now when I'm working on more technically difficult overhauling tasks, I found that the autocompleting cursor is magical. So cursor is the VS Code fork that brought AI to the masses. Cursor is again not something I ever thought I would use, much less love, but it's quickly become essential to my workflow and to the way that I build. At the same time that cursor was starting to get traction, we get to the topic of today, kodium. There's like three codiums and I always mix them up. We're talking about codeium like with an e this time. Kodium was also an extension, but it was a set of them of extensions for better AI code assistance for code bases of all sizes. So, Kodium was similar to something like Super Maven or GitHub Copilot, except it was not just VS Codebased. To be fair, Super Maven also had a Vim plugin and whatnot, but Kodium always was going all in on supporting Jet Brains and other things like that because like in a big company using Java, 80% of the devs are still on Jet Brains. It doesn't matter how good you make your plug-in for VS Code, if everybody's on Jet Brains cuz that's the suite that they're familiar with for Java stuff, you're not going to get adoption by those big companies. And for a while that was their moat, so to speak, their thing that they had that no one else did was those big companies all relying on Kodium's extensions for AI in their editors. And they were signing these big deals. But the thing about enterprise is adoption is weird, sporadic, and for the most part relatively slow. And it is soul crushing to spend your time talking to these big Java houses. And I know Kodium wanted to be more traditionally adopted by people everywhere in their spectrum of team size to developer like career length. They wanted more people like you and me, more people who are learning to code and for these seasoned people to all be relying on Kodium's tech. And this became wind surf very clearly inspired by what was going on with cursor. They wanted to break out of the shackles that existed within VS Code, which again, despite VS Code being open- source, the extension platform built into it was severely limited with how much you could change things in the editor part. So, you could do fancy things in your sidebar all you want. But as soon as you had to get that into the text of your editor, the limitations were really starting to show. Even Copilot was running into issues here. So, Cursor realized this and forked early. Windsurf aka Codium realized it later but made the same decision to fork. Windsurf had one big focus that was different though. Agentic code editing. They went all in on agents. So instead of just making autocomplete better, having the like little command K feature where I could say change this to be more type- safe, instead of doing these types of things, they wanted the fancy command I experience where you can describe something you want it to do and it can run commands GP for files and do the whole building part instead of just the, you know, autocompleting as you go. It's less focused on assisting you as you coded and more on coding for you as you told it what to do. So you could also argue this is the vibe coding IDE. It's still an IDE, still a program you download and use on your computer, but Windsor's angle here felt really weird to me. The focus seemed to be on devs, but also people who weren't as good of devs. It seemed to be focused on being cheaper, but also enterprise. And and this is where it got confusing for me is on one side they were trying to make the simple to get started with editor that would tell you which command to run to start your dev environment for people who didn't know that and charge a cheaper price for it. But at the same time they were trying to target big companies and businesses with Kodium which is particularly weird that they had both sides to an extent. They wanted to have the noobs over on the left and they also wanted to have enterprises over here on the right. The problem is that most work, especially most of the people who are early adopters to things live in the middle here between the two. So this ended up quickly being taken over by cursor. I want to reference a specific YC talk. Okay, I don't want to actually play this talk. It's phenomenal. Tyler did a great job breaking down how sales work for early startups and businesses. And I spend way too much time thinking about this particular curve. The thing that matters in this curve is this idea of the innovators to early adopters. When you're building a new product and you need new people to try out that product, you're not going to try and get the people who don't try new things. Like there's a lot of developers, I'd even say the majority of devs, the majority of the things that they are using have existed for at least four to 5 years, probably longer. They're not going to be the ones trying out your new thing. If you're talking to a company that hasn't yet made the move from vanillajs to Typescript, the chances are they're not going to try out your new AI editor, you have to be cognizant of how much change a given person or business is interested in taking before you can start getting adoption. So if you want to get people to try out your thing, you have to target the most willing to try new things subset of the group you're aiming for. So, if we look at something like T3 Chat, I'm not expecting your grandma to be the first customer for T3 Chat. I'm expecting the lunatics like everyone hanging out in my audience right now that are excited about new AI tools that try new ones out regularly, I want them to be the ones trying out T3 Chat initially. So I have to position my product accordingly so that that small percentage the two to 3% of all potential customers are more interested in my product and I make all my marketing focused on them until I win that section and then I have to pivot the product some amount as I try to adopt more and more of the people along this curve. So in the innovator section, having every single model as early as possible, having really generous limits and transparency everywhere I can, having like fancy features like really good performance, good sync between platforms, fun stuff like if we have multiple chats going at the same time in the future, things that these like innovators want to have access to. But as we win that space, and honestly, we've very quickly gotten the like locked in AI people. we're just missing a mobile app for them. But once we have that, early adopters becomes the focus. That's going to be stuff like the automatic model selection. Then early majority, that's going to involve us building stuff like better history compression so you can just use one thread forever. I actually had a user that I was talking to yesterday who's not as familiar with AI stuff. She had been using one thread in T3 chat for 2 weeks. just kept switching models to ones that could handle bigger contexts until she hit the like context limit because she never thought to make another chat about different topics. She had talked about like 30 plus different things inside of that thread and she got really confused that she couldn't generate an image because it hit the input limits because it was inputting the whole chat history, not just her most recent message. Stuff like that I need to solve for these normie users if I want to get them as we go further down this like curve. But it's important to be cognizant of where you are in this journey. And I think that's one of the issues that Windinsurf has run into in Kodium as a whole is they're trying to build a product for people further down the chain. So what does this mean? Like what's their adoption looking like? I want to ask chat what's your main IDE right now? We'll do windsurf cursor VS Code. I'll throw in Vim Neo Vim something else. But as you guys are voting, I also want you to predict in chat the difference between the three other results I have because I ran this poll on Twitter, on LinkedIn, and on YouTube. And I'm curious what you guys think the winner is on each of these platforms. We'll just start first. Who do you think won on Twitter? Okay, seems like everybody thinks VS Code or Cursor was the winner on Twitter, but I want you, the viewer of this video, to guess. We have four editors that I used in these polls. Windsurf, Cursor, VS Code, and something else. This is the poll that I created on LinkedIn, on Twitter, and on YouTube. I want you to in your head rank where these four fall on each platform and get like a a guess at how big the gap is between them. Like, do you think VS Code is 2x more popular than Cursor? Do you think wind surf is half as popular as something else? It's like get a gut feel for where you think these are going to land because the results might surprise you a lot. We'll start with Twitch chat because I don't even know what these are going to be. Looks like VS Code is currently the winner with about 50%. Less than I would have expected but still pretty solid. Cursor really high up here 24% something else at 16. Neov at 14 very interesting that something else is bigger than Neoim even cuz the other polls don't have Vim in it. So I just assumed a lot of the something else was Vim. and then wind surf at 4%. This was a very small poll of my live Twitch audience. So, let's take a look first at Twitter. Fascinating results. This is with 40,000 votes. Something else ended up winning, which is crazy because initially something else was not, but it was cursor and VS Code neck andneck for a little bit. Cursor is slightly beating out VS Code according to my Twitter audience. Windsurf under 5%, but it's higher than I expected. For a while, it had literally zero. So when's at 5%, cursor is at 31, VS Code's at 30, something else is 35. Fascinating results. Now let's take a look at YouTube. This is one of the ones that was most interesting to me. VS Code at 50, cursor at 18, Windurf at two. That's crazy gap there. And then LinkedIn, you'd probably think hard about what you expect the LinkedIn results to be before you see it. It's the business platform. wild 47% BS code 28% cursor only 21% something else I would have expected this to be way higher because again of all like the jet brains type people and then winds surf at four so wind surf is somewhere between 2 and maybe 5% probably a bit less it is consistently around a tenth of cursor's adoption according to all the places that I ran the poll but how crazy is it that like first second third are different everywhere Twitter something else was first. Cursor was second, VS Code was third. YouTube, VS Code was first, something else was second, cursor was third. And LinkedIn, VS Code first, cursor second, something else third. The only thing in common across all of these polls is Windurf losing. Kind of wild. I'm very happy I ran those polls because the results were super different from what I had expected and I was not expecting the gap there to be so big. And that leads us to the important question, the thing we're all here for. Why the did OpenAI buy Windsurf? The purchase hasn't gone through just yet. OpenAI agreed to the price. OpenAI has agreed to buy Windsurf for about $3 billion. The deal has not closed, but it's looking very likely. The last raise that they had done was at 1.25 billion, which means that the investors will slightly more than double their money. And I'm sure lots of that 3 billion is going to be OpenAI stock. And who wouldn't be pumped to get a discounted rate for OpenAI stock? So I cannot imagine any of the investors being against this acquisition. Just makes a lot of sense. When you can get an easy flip like that, you take it. The only reason that Windsurf would say no is if they are seeing truly absurd growth and think they can be worth way more than 3 billion in the near future, which just seems unlikely. And since their price is so cheap and they're doing agentic code stuff, chances are their bills are currently terrifying. I would not be surprised at all if Windsurf's current costs were unbelievable. So that says why Windsurf would sell. Why would OpenAI want to buy them? Well, I I'll let Balmer cover this one for me. Developers, developers, developers, developers, developers, developers, developers, developers, developers, developers. That's why OpenAI wants to buy Windsurf developers. The biggest risk to OpenAI, a certain company called Anthropic. I would say Google's getting up there now, too. But Google's absolute chaos of uh how do I describe it? Google if they can get out of their way on the infrastructure and like cloud side has a really good chance. That's a big if though. Anthropic's the most direct threat to OpenAI. And the biggest thing Anthropic has that OpenAI doesn't is developer sentiment. I've talked about this a bit in other videos covering OpenAI stuff, but Anthropic won with developers. If you poll devs and ask them which models they like to use the most, a significant portion, like over 50% are going to say anthropic models. They're going to say 3.5 or 3.7. That's just how it is. I know that because I've seen our own builds with anthropic models on T3 chat and they're absurd. Google showed with 2.5 Pro that you can absolutely challenge them in the model quality side. But with things like cloud code, with things like MCP, with the advantage they still have in general tool call work, Anthropic has been preferred by devs for a while. So why did OpenAI buy Windsurf? It's the same reason they made Codeex. It's the same reason they put out GPT4.1. It's the same reason that 04 Mini and all the new models are so focused on tool calls. They want to destroy the advantage that Anthropic has right now. They want to win in the developer world. Windsurf is an attempt at accelerating their win there. Not just for Windsurf. By the way, my suspicion is that Kodium is part of this too. But if the goal was to win developers, why would they buy Wind Sururf and not Cursor? Before I cover this next part, I want to be clear. I have no insight information at all from Cursor. I don't even think I'm currently getting the investor updates. And if I am, I haven't seen one in a while. I have no inside baseball here whatsoever beyond my own speculation, having seen how these things are going down. OpenAI did want to buy Cursor. Apparently, a while back, OpenAI approached Curser about an acquisition, and that was one of multiple offers that they were considering. So, it seems as though Curser had multiple different choices, but decided against it because their growth was as insane as it was, and they wanted to see it through to the end. And honestly, I understand even ignoring the money side, if you just want to build a product that's used by a lot of people, and you look at the numbers for how your product is being used, you see that 90% of devs are picking the anthropic models, not the OpenAI models. So, you could be acquired by OpenAI, be forced to use their models instead. Now, your editor is worse. Now your adoption is worse. Now you have a much worse path to success. I totally understand why Cursor would turn that down. And all the other acquisition offers probably were a joke. And when I say a joke, I don't mean like too low or whatever. I mean it was just companies that they don't want to work at. I've seen a lot of people saying, "Well, I guess Google's going to buy Cursor now." No, absolutely not. If Cursor didn't sell the OpenAI, I don't think they're going to. They want to ride this out the the long way, and I have a lot of respect for them for it. It's going to be quite a battle and I think they can do it and they just raised enough money to basically guarantee that they can do it. They raised $900 million on a $9 billion valuation for no reason in particular. This is how much money Microsoft bought GitHub for. 7.5 bill after inflation about 8.96. No reason in particular. Just thought that was an interesting number. Not trying to draw any conclusions. just thought you should know. To be clear, this is a very different time. Chances are with where both Microsoft and GitHub are today, GitHub would be worth significantly more than it was at this acquisition point. When you think about it, a Git wrapper being worth $9 billion is pretty absurd. It's just a rapper for Git. Why is it worth that much money? Sorry, I had to make that joke. I'm sorry. If you think that number is too high, I get it. But we're talking about a company that hit a h 100red million in annual revenue. So that's $100 million a year in January and they hit 200 million in March. Doubling your revenue in two months when you're already that high of a number is just insane. This growth is absurd. And this is why companies are betting on cursor and on companies like it the level they are. Turns out not only is a VS Code fork worth a lot of money to investors, it can potentially be a cash cow, too. 200 million a year is absurd. Obviously, the margins aren't going to be great because you're paying a subscription and then a lot of that money is going over to the AI model providers, but 200 million a year in revenue is just an absurd number and that growth is crazy, especially when you consider models are getting cheaper. Chances are their margins are going to get significantly better over time. This valuation makes a lot of sense. So, OpenAI bought Windurf for a handful of reasons. One, dev sentiment. They want to win developers. I'll say 1.1 cursor said no two covering the spectrum of developers. Remember that diagram I drew here where I said cursor in particular is set for this middle area and the noobs in the enterprises aren't necessarily well served by them. Whereas kodium handle enterprises well with their extensions for jet brains as well as their focus on indexing huge code bases. noobs. They are more in the wind surf world for sure. And what they are focused on here at OpenAI is how do we cover not the middle, not the ends. How do we cover the entire spectrum? And this is how OpenAI thinks about it all the way at the end. Chat GPT maybe Vibe coding tools, things like that. They haven't really invested too hard there, but the chat GPT plus canvas serves well for beginners getting into code stuff. You now have wind surf slightly further up. That's people who want to download a program and work in it for real. You have codeex which if you aren't familiar with codeex is open's they don't like when I call it a cloud code clone because it was built before cloud code. It just came out after but codeex is very much similar to cloud code. It's a CLI that you can run to make changes to your codebase. Not only is it open source and like properly open source like Apache licensed open source, it also supports other models from other providers. Obviously, the OpenAI support is a little more native, but you can use D-provider to access pretty much anything else that you might want to. But you might notice they specifically didn't put a certain provider's name in here. It's almost like there's a certain company they built this to fight with or something. So, Codeex is very much like further up the chain. and then all the way at the end the codium plugin ecosystem. The goal of windsurf is that it kind of plugs these particular gaps that existed in the developer tooling that openai had. And that's very exciting. If you want to cover a spectrum, if you want to cover all developers and you notice these particular gaps in your tooling and in your product offering, wind surf makes a lot of sense to acquire not because of this box, but because this and this box both are useful and if they can have both of them, that's very good for them. One last piece to consider is the OpenAI valuation. Their last raise that's I don't think it's formally closed yet, but it's about to. It's 40 billion of money raised at a $300 billion valuation. So this acquisition is going to be a $3 billion acquisition. OpenAI just raised 40 bill at 300 bill. This means that OpenAI just gave up around 10%. It's actually a little bit more. We'll call it 12%. Easy math. They gave up around 12% of their value with dilution because now if you before this raise if you owned 50% of open AAI this gave 12% to external parties which means your 50% is now worth 6% less roughly. So you're now at like 44% because that's how dilution works. When you bring in more money existing percentages existing ownership gets diluted so it's shrunk. So let's look at the numbers here. three billion acquisition, 300 to build valuation. In order for them to do this acquisition, 1% of Open AI is being traded for Windsurf. They're effectively taking all of the ownership that exists right now for Windsurf and Kodium. So if like the founders have half, their half of Windsurf is now going to become 5% of OpenAI. All the investors are going to have a similar conversion, but chances are this acquisition is going to be largely stock. There could be some portion of cash. Like they could have one billion of this 40 bill as cash. They could even do a straight cash acquisition to give them no equity, but that's very unlikely. But this is for 1% of Open AAI right now. So if you think of this purely by percentages, it's not too big a risk for OpenAI. It's like a a one in a 100 risk. They're giving up 1% of the business for this. And is there a percentage chance that this helps them a lot? Yeah. I think a 1% trade, if I could give up 1% of my business to significantly improve the likelihood developers use my products, I would do that in a heartbeat. The valuation matters a lot less when you're thinking in this way, OpenAI is giving up 1% of their war chest, 1% of their value in order to increase the likelihood that they succeed in the developer world. That's how they're thinking about this. That said, giving up 1% of open AI in order to get at most four and a half to 5% of developers feels a little weird. Yeah. The absolute baller move they could do though, and I do think there is potential for this. This is my crazy conspiracy. We go back here. OpenAI is working pretty hard at winning over devs. Codeex is a phenomenal example of that. Codeex is one of the best truly open-source CLI code assistant tools and it's truly fully open source. I know the meme is that OpenAI isn't really open, but I know for a fact they're working hard on their new open source models that are going to be very open and very flexible. It seems like OpenAI is very much interested in open source where it benefits developers and developer sentiment. I think this is an absolutely crazy thought. OpenAI might open source windsurf. Imagine if right now the value of these forks of both windsurf and cursor is that they fix all these shortcomings in VS Code because VS Code doesn't have the right extensibility for agentic flows for inline code eding for all these things. If OpenAI was to acquire Windinsurf, no longer need it to succeed at making money, but their goal is for Windsurf not to print a bunch of cash for them, but to win developers over. I think they could do this. Could go either way, but if their goal is to make developers like them more and make developers more likely to reach for OpenAI based stuff over time, this is the one way I think they could beat out cursor. And I do really think there's a chance here. Really good question from chat. Wouldn't that damage the relationship with Microsoft? For those who aren't familiar, Microsoft and OpenAI have had a very longstanding relationship. A lot of secrets traded between them. A lot of help from Microsoft. A lot of cash from Microsoft. Info from Microsoft. Well, earlier this month, I saw a fun announcement. Microsoft prepares to host XAI's Gro model on Azure. Microsoft has a pretty limited set of models on Azure right now. It's mostly open ones like Mestral's set of open source models, Deep Seek, stuff like that, but also OpenAI models and a bunch of Azure models that nobody uses. But the value of Azure right now for AI companies including us with T3 chat is hosting OpenAI models somewhere else for redundancy. The only places in the world right now that you can host a model like 03 Mini, O4 mini, 4.1, all these are you can call OpenAI's official APIs or you can use Azure. Those are your options. So why is Microsoft making their first partnership outside of OpenAI with Grock, Elon's AI company? Well, you don't have to be particularly tuned in to know about the deep hatred that Elon's AI stuff and OpenAI have of each other. Elon talks so much on Open AI. This is very clearly an attempt to rabble rouse over at Microsoft and Open AAI for Microsoft to put their foot down and say, "We're doing things how we want. You don't have control of us anymore." What's really funny is that Sam and Satia were hanging out at the OpenA office and took a photo together the next day. So I'm almost certain this is some type of bargaining, some type of negotiation tactic from Microsoft. A kind of crazy one, too. So to the question of what about the relationship with Microsoft, I think that's already long gone and open sourcing Windsurf isn't even like they're not even considering Microsoft in the equation when they do that. That's an entirely different like executive war that's being fought. So to summarize, I think the acquisition valuation is kind of absurd considering the user base, but I think it makes more sense when you talk about the percentage that it represents of OpenAI and when you think about the spectrum of developers and what tools they like to use and what OpenAI's actual goal is, which is to have developers love them, both so that they have a lot of developers using their stuff and also to prevent the utter chaos of Anthropic coming in and winning devs. So this is a protection play to keep Enthropic out. It's a sentiment play to position them better with developers. It is a market integration play to own from noob to enterprise the developer stack. It is potentially a baller open-source move as well. Do I think they will beat cursor? No. Do I think open sourcing it could give cursor a real threat? Absolutely yes. That's everything I have to say about this one. I'm curious what you guys think. Is this acquisition absurd or does it make some sense?




## Why is every React site so slow_ - 20250127
I'm sure you guys have already figured out I like react quite a bit but that doesn't mean it doesn't have its problems there's one that is pretty big that we can't ignore the render problem here is a video that Aiden made showcasing how bad renders are on a pretty popular site you might have heard of it's called GitHub as you scroll up and down the page all of those flickers are components rendering as you navigate and that's not only not good it's pretty bad and we need to talk about it as well as how to fix it but first a real quick word from today's sponsor today's sponsor is post hog and I am so thankful these guys exist I've been using them for years way before they have sponsored me and there's a reason the reason is that analytics kind of suck and there's don't I have tried every analytics platform and I've had a hell of a time with it and they're not just product analytics by the way they're an all-in-one Suite of product tools everything from feature Flags to surveys to AI engineering it's so use and I'm starting to play with the other things more they know what they're doing I usually show off this graphic on the site because it shows their Vibe but the pricing shows it even better more than 90% of companies using post hog are using it for free the amount of stuff they give you for free is insane I really don't get how these guys make money especially because like the whole thing's open source you can self-host it if you want to but I don't think you're going to bother because their Cloud platform is really cheap and really good as well they're what I use for all of my products no exaggeration I've been using them for years they're the easiest recommendation in the world and if you don't believe me give it a shot I think you'll be surprised check them out today at soy. l/p and make sure to tell them that Theo sent you anyways quick bias check before we go any further Aiden built a company that makes it easier to make your react apps not so slow and I'm an investor in said company million lint cool crew account for the bias these are problems I've talked about before and I will continue talking about in the future we'll get there when we get there right now we need to focus on how bad this is or according to some people like kitza isn't 99.9% of people won't notice anything rendering is fine eh I fall somewhere in between here the first thing we need to understand is what even is a render is this an element reappearing on the page or is this some other thing just got linked an awesome blog post by our friends over at million about why this works this way in react the virtual Dom was created to address performance issues caused by the frequent manipulation of the real Dom again if react just checks everything from where the state changes down that has Real Performance impact and you can't just update every single element when you change the top nav's state you can't reender every single element so in order to keep that from destroying you the virtual Dom was created as a representation so that they can identify what doesn't doesn't need to be updated so if we have this react component numbers as Fu bar baz as a Char charot Bar and then another Bo here when react renders this component it will go through the process of diffing checking the changes and reconation which is updating the Dom as a result of the changes that it finds so we have the current virtual Dom we moved some things the virtual Dom now looks like this but if there is nothing in the real Dom that actually changed then we don't need to actually apply those changes okay so we have the current virtual Dom we have the new virtual Dom which is the state that we're getting to and if we go through the steps here we check did this change no cool continue did this change yes updated in the real Dom did this change yes it's gone remove it from the real Dom did this change yes it's gone remove it from the real Dom did this change yes update it but we make the new state We compare it to the old one and then we manually update the different things on the page so if you have a state change up here that's like a UST State call and that changes which elements are rendered this happens for those elements to choose which ones actually change in the Dum but if nothing changes you're just doing these checks for no reason and that's people mean usually when they say render they don't mean unnecessary changes happening to the Dom they mean unnecessary checks happening between the current virtual Dom and the new virtual Dom and that's an important thing to understand to help better demo this and how you can detect it I made a quick demonstration repo Link in the description if you want to play with it this is a simple react app where I have a Color Picker a counter and this component that happens to be really slow because it renders a ton of stuff dynamically in the JavaScript code and if I click this this counter you'll notice it's not just this increasing we also have Color Picker rendering and we have that slow component as well if I hammer this you'll see how often everything is rendering in this case it's not too bad because we're just clicking a single button and every click changes it very slightly if we go to the code we can see why this is happening I have my demo component and in here we have both the count and the color state that we have defined and we pass pass the getter in the setter down well it's not really a getter it's the value we pass the value in the setter down to these child components the Color Picker and the counter which means if counter changes everything else here has to be checked because that's the way react Works State goes from the top down so if State change is really high up we have to check everything as we go down the solution to this usually is memorization where you would memorize the individual pieces in order to make sure that they aren't only rendering when their props change which is what most people think react does they think that if the props didn't change react doesn't check but that's not the case react by default always assumes something might have changed and renders just in case you have to tell react not to render with memoization and that is so not fun that we basically just don't do it I'll be honest if you look through my code bases the amount of instances of memo is it's low I tend to not bother because usually my stuff is simple enough that it doesn't matter and if it isn't then I re architect it so it is here's where things start to get fun though this is an example that was intentionally made to be a bit brutal largely inspired by hux Pro who used to be on the react team for a project that we'll touch on momentarily if I open the Color Picker this is an input that you can drag around if I just click somewhere it's fine but watch what happens when I drag do you see that lag that lag is happening because of the slow component here if I just go and comment out the slow component flies because there's much less work happening the problem is that the slow component takes a real amount of time to render if we go to it here we have the large array which is length 10,000 and here we go through each of those 10,000 elements and make a new div for them that is not easy to handle compute wise like that's a real amount of work and if we have to rerun this work every single time the input changes that sucks the solution here would be to memorize this component not use memo but react. memo so we're telling react hey you don't need to recheck that all of the time but there is a better solution I would love to show you because it's something that we don't talk about enough and for whatever reason if I make a video about it nobody cares I just tricked you guys into watching a react compiler video this actually said at the top react compiler demo originally and now if we go back here notice that nothing nothing zil not a zero is rendering now because the react compiler memorized all of the children for me I no longer have to worry the code did not change I did not change a single line of code in the project all I did was turn on the compiler and the problem's just gone it just flies now that's so cool it's so cool that the react compiler is smart enough to add the Right memoization add the right barriers add the right things you don't need to add memo to your code anymore the ultimate goal here is that use memo and react. memo are no longer things you need to have in your code base at all I could DIY what this does if I want to if me go and comment out the compiler here so if we take slow component and we wrap it with react. memo which is different from use memo use memo is a hook to stabilize a value react. memo is a wrapper to stabilize a component now that we have the real slow component wrapped with react. memo that element no longer gets rendered when it doesn't need to and we can do the same for other things here as well we can take the counter button and wrap it the exact same way con counter button is react. memo and now it's still re-rendering because it's getting a prop I think can we fix that one aha since counter button takes a function that we defined here this function being defined here means it's not memo so we'd have to change this to be use callback so if we take const handle counter click do that and we have this be use callback now if I pass this there it is a stable value and now it won't render unnecessarily you might be noticing how unnecessarily tedious all of these things are I have screwed up three times just trying to show you how you to do this yourself the amount of these little things you have to double and triple check in order to make sure you're not re-rendering unnecessarily it's obnoxious and all it takes to screw it up is to pass an object in line like this so hello world now that I've put this here this object gets defined on every render it's now a new object every time it renders so react has to assume it changed and do the render that one change brought back all of the lag and I am positive everyone here myself included has innocently made a change like this in the past not realizing that it's going to break everything for them the magic of react compiler is that it doesn't make those mistakes you can just put this inline code right where you want to there to kill this now and it just does what you expect it to I can put an unstable object here and it just behaves in this version everything's rendering but if I go and turn on the compiler again it just works it's dope I think a lot of the excitement around the react compiler died out because when you look at it in benchmarks it doesn't seem incredible the reality is that the react benchmarks were all built as optimized as possible they did all the little things I just did there to show how powerful the results can be but since the react code in those demos is already really well optimized compiler doesn't do a whole lot but as hopefully seen by now the real world is not as well optimized like here's Pinterest two pinterest's credit masonry layouts are not easy but rendering whenever you scroll any amount that's not good for anyone it drops as low as 60fps on a really high-end MacBook which is kind of nuts when you think about it a Macbook like that should be able to render at 120 without issue and if this was just like one or two sites that'd be one thing but like every site has these problems here's door Dash dropping to one FPS at times when you move things like you toggle the delivery and pickup setting it's insane it's actually insane how slow a lot of these things are and a bunch of this is just because they don't make sure the elements aren't being triggered oh no not twitch yes we remember I was good about my memorization at twitch when it mattered it cared I didn't write this code but oh God the scroll oh so close but so far I love Aiden hopping in here twitch's web client is Big it's it's one of the biggest most terrifying codas I've ever worked and I'm thankful it runs at all at this point that was good to see now I'm sure you're curious how are we getting these visualizations I have good news it's comically easy you just include the unpackage URL for the react scan project and now you get this on your project very easy to set up in Dev even relatively easy to set up in production makes it super quick to see what isn't isn't re-rendering react extension for Dev tools is useful for diving deep into what's causing a render but not just to quickly visualize that one happened and I have found react scan to be a very fun little tool if you want to give it a shot yourself I'll be sure to leave a link in the description and if you want help making sure that your stuff runs as well as possible you should check out the other things the million team is working on do you not have a link to million like at the top here I love that you're not like over plugging your company Aiden but I guess that's my job as an investor check out million it was originally an alternative runtime for react but that's not a realistic solution now it is everything else you need to make your react sites way faster really cool project it tells you in your editor when your browser has an element that's slow check it out I have a video about this stuff already I'm pretty sure yeah it is pretty cool that they just show you in your editor and with their extension what is taking more time why you have a next paint that's slow all that stuff you get the idea hopefully this helps yall make your apps perform even better I know that react might have a render problem but there's a lot of effort going into solving it and honestly you should probably just turn on the compiler so let me know what you think and if you can run the compiler on your code base and until next time peace nerds




## Why is everyone so unhappy with JavaScript_ - 20250108
2023 was a wild year for JavaScript but what about 2024 kind of feels like things slowed down in many ways that's great like we didn't get a whole bunch of new apis and things like react and xjs but others it's not so great with AI taking over it's more important than ever to stay on top of things and be as productive as possible in your roles so switching tools all the time might not be the best move but at least keeping track of what's going on that much I can almost guarantee is worth it there's a lot of things in here that are worth understanding knowing out and maybe even spending some time learning before we get to those we need to hear quickly from today's sponsor today's sponsor is code rabbit and I could tell you all about them or I could just show what it's like working with them because it's been great this is an actual poll request in our actual open source repos for upload thing code rabbits a bot that will leave really useful comments insights summaries and everything you might want in your poll requests directly on GitHub it summarized this PR up top so it told us here by updating the description what this change is where we're adding documentation for how to use our SDK and how to generate keys in other languages including some that we're not very familiar with like PHP you can tell we're not that familiar with it because down here it left a review an actual line by line review and it noticed that in here we have hash string as camel case even though this function in PHP would have been using underscores This Is Not Great thankfully it caught it and not only does it catch these mistakes so you can go fix them they'll even do a code commit suggestion that you can oneclick commit and you you can see even a great engineer like Julius just does that cuz it's easier it's super convenient and if you don't agree you can even reply to the bot in line here's an example where Julius didn't agree with the bot it said that we should hardcode the alphabet even though other languages are using the libraries default alphabets and Julia said that's because the go SDK doesn't export the default alphabet as a constant which they Now understand and they're not going to do it anymore cool how nice is it that this is like an actual code reviewer that is potentially really insightful and can help you solve your problems summarize the polar requests and just make getting through code review significantly easier I've enjoyed using it a lot and you might too it's free for open source and it's only 12 bucks a month for the base subscription and you get a whole month free if you use my code Theo 1M free thank you code rabbit for sponsoring today's video check them out at soy. lcod rabbit the state of JS 2024 let's take a second to consider something 2024's top three frontend Frameworks were all launched over a decade ago that's pretty nuts now sure all three have evolved a lot along the way and the patterns of 2014 would seem downright Antiquated today decorators all over our components Hawks and all the we were in such a mess at that time it made me think I would never like front end and now you guys know me as the front end guy which is so funny cuz back in 2014 I hated JavaScript in front hell even like 2018 I still did I only got into this stuff in 2019 I'm still relatively new new in the JS world I my history is all backend but given the JS ecosystem's reputation is constantly churning Whirlwind of change it can be nice to know some things do remain constant not consts consts don't remain constant everything else though yeah speaking of constants V and vest are still topping every chart in leading the charge for a newer simpler generation of tooling yeah the stuff going on there is awesome I can't wait to talk more about it they've also added a new metadata appendix that will tell you more about survey respondents and the survey itself don't forget you can also apply any of the variables to other charts using the query Builder that's really cool shout out to all the partners who sponsor this by the way having these surveys is so important and everyone helping with the translations and whatnot you're all legends also I wear the HTML version of this shirt all the time and every time I wear it people ask me what it is and where I got it cuz they want it so bad it's just the shirt from the state of surveys you could buy it on the HTML survey or the JF survey if you want one it's beautiful anyways we'll blast their demographics quick decent percentage 15% of the respondents Were Us everything else spread relatively wide median age is slight younger than the previous survey state of CSS and HTML age and income are positively correlated if you're older you make more money wow 43% are between 30 and 39 this actually lines up relatively well with my YouTube demographics years of experience it's kind of funny to think that in terms of JS I would be here but in terms of Dev I'm here versus yearly income people who are over 30 years make less than people who are 25 to 29 years it's very interesting seeing how these ranges split and spread since the highest earners don't really have a big jump between the different year levels other than like 5 to n very interesting keep working you'll make more money later the company size one's always fascinating to me to see how similar everything is up until like 50 people hell even up to 100 people it's all like within margin for error then 100 to a th000 is a huge bucket then thousand plus is another huge bucket very interesting the yearly income split interesting to see the median around here being in the 40 60k range job title is also a really fun one I've always been interested to see how these are split I'll never forget the advice I got early in my career when I was switching over to more front-end I was about to change my title to frontend developer and one of my managers was really concerned I was short selling myself and was going to hurt my long-term career by doing that thankfully that never went through because I ended up getting flogged by twitch long story don't feel like talking about it interesting to see the split here in terms of salary to title cool to have that this one's fun because everyone loves to say you don't need a degree only 25% of people even doing the surveys don't have one and if you look at the salary ranges while yes you can roughly make the same amount of money in the top percentiles regardless of if you have a degree or not the median is much higher you'll make significantly more money on average if you just finish your degree worth considering gender better ratio than I would have expected honestly thanks to their renewed Outreach efforts awesome to see God I'm scared to see the income split by gender that makes me feel better actually I was scared that was going to be a worse thing to see the range being roughly the same that's huge features syntax features okay so what does this vote for the question was which of these s features have you used 85% of devs have now use Nish calling that's awesome 70% of used Dynamic import more than I would have expected cool to see private fields at 45% is a lot higher than I would have guessed logical assignment hanging out at the 44 range hashbang grammar I mean I've used this I just didn't know that was considered like a syntax feature then error. cause this I should use more string features only 76% of used replace all I think string. replaces the most unintuitive Behavior ever that only replaces the first one the fact there's a separate all sucks pump that people are using it but I'm surprised it's only 76% I use it like all the time especially Advent of code I don't know if I could do Advent of code without replace all I just I hate RX guys okay two sorted yes for those who don't know know if I have an array const demo equals 4321 const sorted equals demo. sort sorted is 1 2 3 4 but so is demo it returns a reference to itself while also modifying itself I hate that if we do this again but this time const sorted 2 equals demo 2.2 sorted sorted 2 is sorted but demo 2 is not because we're creating a new array that is sorted now it should have always worked like this I hate mutability for those who don't know yeah find last took long enough two reversed two splice same deal with the twos it creates a new array would nice to see higher than 40% I think this should have been the default Behavior but here we are yes all settled catching up I've been pushing this for a while promise.all is almost never what you want to use all settled is what you're looking for most of the time if you don't know why in promised. all if one promise fails it cancels all the others all settled waits for all of the promises to finish before giving you a result huge change set features I feel like I'm the only one who actively uses sets I see them so rarely in other people's code it's such a good feature to just have a a set of keys that are all unique so you can check if something exists or not but also the ability to like Union them and intersect them it's so cool that we have all these set functions now it's a shame no one ever uses them group byy I've not used okay this is actually really cool you can create a new object that makes separate Keys based on a function that's nice I would actually see myself this might be really useful for having to code now I think about it too that's cool oh look at that Harrington snuck in with a tan stack shout out super excited about the future tack browser apis we got websockets of course who doesn't love a good websocket here and there pwa is at 49% higher than I would have expected is there a button to compare to last year somewhere so it be nice to see how that's comparing I I would guess it's going down yeah PW are they feel dead to me I haven't used one in a very long time the geolocation API 35 how are 35% of devs using your location that feels not real there are more more devs using your location via the browser than there are using webg by almost 2x that's terrifying web RTC is also really low how is geolocation twice as popular as web RTC more than twice that's weird to me temporal will ship someday fingers crossed language pain points static typing 32% browser support 8% can I just put Safari here instead I feel like that's more accurate not too much there oh I swear I didn't pre-read just funny that yeah we all feel the same also I saw somebody in chat say the fact that maps and sets don't serialize well makes you hate using them for maps I can totally hear that for sets a set just an array with a guaranteed uniqueness Clause just throw it in an array and transform it on each side it's super it's basically free to do that and also yeah super Json helps a ton with those things but I agree it's weird that those different things that you can store in the browser like the different data structures aren't Json compliant it's kind of annoying that objects and arrays are the only things that really are but sets are still good I use them a lot interesting aod cause was the most saved that makes sense I remember saving that CU I was excited to look into it more let's talk about libraries I ask is react still considered a library it is but so is next and I wouldn't consider next um a li myself that's experience let's switch to sentiment web packs 18% positive 47% neutral and 35% negative that sounds about right reacts almost 50% positive that's good to see it hasn't plummeted too far 30% neutral 20% negative V still just slaughtering here with like so little negative sentiment just at the 35 50 and 15 sounds about right next's negative is growing a little faster than I would have liked to see still crushing webpack actually no these are very close react and uh next are similar in negative but there's a lot more neutral here I'd expect that to keep closing in and for the next positive and negative to keep growing the reality here and I I've talked about this a bunch there's a fundamental difference between tools that people picked because they want to use them versus tools that are so popular that you show up at the job and they're already being used and when you combine that with the complexity of the tool you get a really interesting function for how people feel about it if you have a tool that's primarily used by people who picked it on small teams where everyone on the team is part of the decision or it's just a solo Dev and the API surface area for that thing is simple enough you'll almost always have really high sentiment but then once you get to a certain threshold where more and more places are using the tool more and more devs are touching it and the crazy thing with something like react the average react Dev didn't choose to use react they're using it because it's what the people around them were using it's what the project they were assigned to had on it that causes react to have an inherently worse sentiment because the people working on it on average didn't pick it and if you didn't choose the thing you're so much less likely to enjoy it especially if that thing is complex and that's why I think next is going to start getting horrible numbers here CU you see how close next and react are for the number of people who answered next is becoming the way that businesses use react if you're a company and you picked react because it's the industry standard and you can move relatively quick with it next is probably going to follow up really soon after which means more and more devs who are using next aren't using it because they want to they're using it because it's the thing that the people around them are using which means the sentiment is going to be worse especially because it's changing a whole bunch if you didn't want to learn it in the first place and now it's changing you're just getting more and more frustrated you just spent a year learning this thing you don't like and now it's changing on you and it's just it's so frustrating for these devs and I fully sympathize but as tools get more popular that is inherently going to happen what's important is to make sure we have good enough education materials to keep people on board and keep building the enthusiastic support from the people on the left side here so that they can help their co-workers come around to these things like I used to be on the right side here I used to hate react when I first tried it and then hooks happened and I started using it more and I ended up very far on the positive side to the point where people call me a react shill now that happens when tools get to a certain threshold of popularity but if you take the time it can still be good and I commend reacted next for not letting the size of the framework keep them from innovating angular made that mistake and now angular is walking it back and starting to make changes again because they realized how far they had fallen because they were scared to change things for that core base let's keep going though story book has more respondence and more positive sentiment than I would have expected I've just I've had nothing but pain with story book it is only ever gotten in my way and it's also terrible for testing components if you use it for like keeping track of your uui library like you have your company's equivalent of material UI and you want something to look through it's nice for that otherwise please don't use it views at a similar number of votes to react which is interesting but 17% negative 42 positive reacts 20ga 47 positive interesting that react has both more positive and negative sentiment than view but the negative isn't as big of a gap as I would have thought I know a lot of VI devs feel burned by V3 they're wrong V3 was a great release regardless nothing's going to compare to these angular numbers 40% negative 23% positive yes Bill's doing well here 30 to8 mooch is dying anything else really interesting in these Cordova 30% negative 5% positive ionic 30% negative 11% positive Jesus Christ all those like turn your website into an app tools are  terrible and all dying spelt kit split here is actually a little scary I know again there's like a lot of spelt kit devs that feel burned because there's a huge API change when they had their like major like gold release and you had to manually update your old project and people were upset but that split hurts to see I I would have also I'm guessing a lot of spela devs feel to use Fel Ki CU they were spelt devs but they might have liked it because it wasn't one of these big Frameworks and now that it is they're upset makes sense there's a lot of things in spelet that I genuinely really like so it's sad to see the sentiment here yeah turbo repo an almost even split I I can't believe monor repos aren't a solved problem it's it's totally solvable oh oh I didn't expect that remix is a 5050 split on positive negative now okay interesting biome is more negative than positive also very unexpected solid's climbing up there with the negative numbers too at 20% what happened there wait TS up is M more negative than positive what TS up has saved my freaking life I guess for the average Dev you shouldn't have to worry about the bundling of your libraries and if you are concerned about TS up it's absolutely one of those tools like you didn't pick TS up you have a problem and TS up is the only solution for it which is how that ends up there but Jesus Christ HDMX 25 negative this is a very useful chart for me seeing what people do and don't actually end up enjoying changes over time this one my favorite charts here adjust run in Frameworks this is interesting seeing that like oh yeah it's I sorry I misread this it starts bottom right with 2016 positive opinions neutral usage but you can see exactly what I'm describing here with this actually as reacts usage went up it hit a point where it was no longer being used by people who like it it's just being used period and you go up and then you go left that's the pattern and that's what happened to react here where the sentiment been drifting to the left because it got too high that's how it happens view is having a slight positive swing right now which is cool to see but like it's still so neutral in terms of the amount of usage that it's hard to tell like in the front end one react's the only thing that's consistently broken over this like 5050 line also seeing solid drifting left is sad yeah it's like like all of these Frameworks are drifting left right now if you haven't noticed angular is the only one that moved right because it was already so far to the left and they've actually made awesome changes this year yes felt having a negative swing is sad these are all pretty sad how about meta Frameworks next again you go up and then you go left Gatsby had a slight swing to the right I don't know how it's so dead spelt kits swing left even Astro is starting to swing left here it's terrifying mobile and desktop everything is low usage and most of it's going to the left God we just hate our tools right now don't we build tools web pack drifting far left vit's even going left now V's been nothing but up to the right seeing them drifting left here is unexpected did literally everything sediment get more negative this year other than angular is there anything that was on the right side here that was positive that continued going right maybe in testing nope yeah literally everything is moving left we're getting more negative did Expo okay Expo went to the right more expo's great that makes sense if you're building a react native app and you're not using Expo you're screwed but like this honestly is changing my tune I don't think all these tools got worse this year I think front and devs are getting more negative I think we just are getting frustrated and complaining about the tools more and this negative sentiment is being shown right here I I almost wish there was like an everything option where bundled it all into one number and showed how much less positive we are overall because that's how this feels and it sucks cuz like I feel like these Frameworks and tools are doing the things that these loud frustrated people asked like the nextjs 14 release had no new apis added and 15 had one added with the used cash stuff but it removes like five others and it's optional and it's under an experimental flag and nobody's using it yet I don't even see people talking about it so this is on one hand they're saying that everything's changing too much that's why they're mad and then we have a year like this year where nothing changed and they even matter I'm just I don't know what we can do about this the library tier list everyone loves their tier lists V and vest are still really high up playwright's killing it play right's really good Astro at that 94% Mark still lower than it was but still really good overall pnpm holding strong up here we just saw spelet really negative right now how is it there if the negative numbers were what we just saw does it explain how this by the retention ratio okay so once use it again versus ones who won't that makes sense it's still weird how negative spell kit was but yeah spelt fell down a tier turbo repo leading the pack of the B tier that feels about right I almost feel like turbo is going to start being like a bad word because if you're in a project that has turbo repo set up correctly 99% of the people in that project won't even know that turbo is a thing so the only reason you know about turbo repo is because either you configured it or because it's broken and if you've configured turbo repo yourself or you've had to fix it after someone else could figured it you don't like it in Turbo pack it just hasn't shipped yet like you can use it I use it in Dev mode for nextjs but it's barely a thing at this point still retention versus usage is there a way to like actually see the names of things in this can I just this chart would be actually really useful if you could see things without having to hover over all of them like can I just pick front end Frameworks and hide the rest Spell's got really high retention V's got pretty high retention actually both those are really high trying to find Sol there you go Ryan here's your number you had 1,16 people say they're using solid and 90% of them said they're going to continue so your numbers here are nuts you would have been a tier or S tier if you had hit slightly higher numbers of usage so yeah for those curious solids and S tier framework and then we have the everything here is effectively dead so be careful of selenium Cordova Gatsby larna God LNA ionic web driver IO and wjs task Cafe Russian native script that sounds about right I'd be careful everything here stencils right on the line angulars online but it's doing better so I wouldn't be quite as hesitant weird to see view slightly ahead of angular for users but significantly higher for sentiment and retention have we not just been talking about front end Frameworks this entire time okay let's go here here's usage across all the Frameworks yes I I love the rank chart this is my favorite and we can see view overtook angular last last year and it's maintained its lead did anything change here nothing Chang again 2024 is like a noop in JS land nothing swapped between 2023 and 2024 for the ranks Astro got written in enough but not enough to be included here jQuery rip used at work again this is the thing I've been talking about the whole time like the Frameworks that you're using at work if the the teams let's say 10 people one of them had to start the project and pick a framework they're going to pick act maybe they'll pick view or angular if they've been around long enough and they like those smaller projects might pick spelt i excited to see more big companies using it I've been I've been seeing more unexpected spelt usage I know stake.com for example this was funny I got to tell Rich Harris because he didn't know Stakes built on spelt I had to be the one to tell him that which was really rewarding yeah so the one of the biggest spelt users is stake and he had no idea anyways yeah apple uses felt as well for Apple music it's not for like all of Apple's products but Apple music in the web is also a spelt app yeah so spelt is starting to get some more industry usage but the fact that like I have to remember these specific examples because there's few enough of them says something that's worth paying attention to but it's growing it's the first new framework in a decade to get an actual level of adoption where it's worth discussing and being part of the conversation at work it's cool to see it getting more adoption I'm actually pumped about that but again react is what you use because a coworker picked it and you're now helping maintain the project view is similar an angular is too except the person who picked angular quit and retired eight years ago this is going to be interesting yearly income relative to framework let let's do some hypothesizing here first it's going to do the range thing I hope I think react's going to have a wider middle band skewed slightly right just cuz it's so much more popular in the west I think views going to skew slightly left of react over all but it's going to have a really big like outlier for like the top 25% that's close to react I think spelts going to have a really wide range for the 25% and The Middle's going to be massive because it's such a wide range let's see yeah these middle ranges are way more similar than I would have expected like seeing react and solid having nearly the exact same split here is very unexpected I guess jsx Frameworks like like regardless of which jsx you're writing in you're going to make the same amount of money kind of a joke and spelt the exact same as well that is so strange seeing spelt saw a react with the exact same income breakdown views far 90th percentile is lower than I expected to I would have thought view would still hit up there I knew it would skew left slightly overall but I didn't expect that it is much more popular in Eastern countries though so that kind of makes sense it still hurts to see it makes me sad but it makes sense quick it's like react but you make less money checks out and then preact I guess if you want to make more money on react patterns preact will bump you into a slightly higher group interesting this is a very interesting chart seeing lit skewed slightly to the right but also same exact 90th percentile Mark like the only thing that is a higher 90th percentile is preact yeah this is fascinating here we have the number of items how many items this category respondents have used oh this is the of all the things that are in the survey how many of these have you used so for all the Frameworks most people have used used three or less and the number gets real small as you go down but for heard of it most have heard of at least six of them interesting numbers for every wait I thought we just determined that people are getting more negative are we finally actually swinging slightly oh it's say 2.7 2.8 that's not a real number I don't care good to see we're not going down anymore this was my concern before when I did my last video framework pain points react issues are the biggest source of framework pain points do they have examples here react is stupid by default people are mad about the major changes between react and felt lack of interesting differentiation from react react is pain mization needs and react and constant rendering are annoying man new old dependency management fre activity a lot of these are being solved with the compiler I feel like the things that are solving reacts problems don't get talked about as much like compiler and the things that are Niche that most people shouldn't care about like the new suspense behaviors are massive drama react must die off all react users react is very hard excessive complexity too much complexity complicated features checks out angular issues is lower but angular usage is lower too that makes sense meta Frameworks time to see how pissed people are at next again like when I say this thing like the thing being used regularly is going to be more negative I hope you understand how much more next gets used these other things over half the respondents have used next so next is significantly higher in usage awareness things are a lot closer so it's not like people don't know about these other options they're just not using them nothing is even at half of next's usage obviously people are going to be matter at next that's just like the numbers work out that way and again with the rank next has been number one non-stop it looks like Astro is climbing fast oh yeah Astro climbed from like sixth place in 2022 to Second Place Gatsby died remix that's n actually nux hasn't moved remix that's felt kit remix is all the way down here now in the six range Jesus Christ docusaurus losing to remix that's sad because do docusaurus had a really good year still probably if I had to pick something right now for new docs I'd probably lean into docusaurus still I'm pump for Astro this is insane growth just like understand the size of the Gap here like for Astro to get closer to next and to eventually overtake next it has to double its current usage more than that double would be 46 next is at 54 that's a large gap to bridge you can't just snap your fingers and suddenly get there like it's even at its current growth rate which slowed down by the way it doubled from 2022 to 2023 and it only increased by about a fifth since what about other meta Frameworks analog by the way if you're not familiar with analog it I don't know if angular would be making improvements right now if it wasn't for the work that Brandon Roberts put into analog it's like their nextjs and it's still the best way to do backend stuff in angular by a lot and I know Brandon Roberts has worked as bought off making it as good as it is we got 11 in here as well bunch of other tan stack routers doing better excited to see tanx start next year and how many people start moving use nwork again the size of this Gap I I need you guys to understand the next biggest at work full stack meta framework is less than half of next usage it's almost a third that's crazy if you're looking to make money as a full stack next is the option and I'm sure when we look at the yearly income I Wasing a bigger spread here but it's look at the numbers on the side here though 10,000 people responded and 5,100 said next 1,400 at Astro the second biggest full stack framework to nextjs isn't n it's no framework no framework is the second biggest Insanity company size this'll be fun interesting that uh the company size spread doesn't seem as different as I would have expected docusaurus is the only thing where that middle percentile 75th spreads to a thousand because big companies are using it interesting oh  s love s oh video and R animations with webgl shaders that's cool visualization tool for live music gigs I'm SC is going to make sound enter without sound thank you for making that option for me okay yeah this is stunning I'm saving this to look into more later as always s makes Crazy recommendations number of items 31% of people haven't used any of these Frameworks as I say before like it's the the second biggest fullstack framework is no framework which is kind of crazy heard of slightly better numbers but like there are more people who haven't heard of any of the full stack Frameworks than there are people who are using spelt kit it's similar numbers of people using Astro to people who have never heard of any of these tools think about that think about the Gap there that there are more people who haven't heard about any of these that are so like doing a JavaScript survey so they're in the enough they're doing a survey but there's more who don't know about any fch framework than there are people using Astro that's crazy we still have a long ways to go with these meta Frameworks and full-time Solutions again happiness seems like it's flatlined reverse cell made it into the top 10 uh framework pain points that's fun to see testing I don't want to make you guys suffer we'll just look for the highlights quick Jess is still really popular story book is still too popular playright is growing fast as it should play right's really good number of items 21% haven't heard of or used any of these tools and 15% haven't heard of any of them doing my job we're killing the test tools testing's happiness slightly better than it was but it's back to where it was in 2022 guys like this line isn't moving anymore it's I do feel bad for framework authors right now cuz they're pouring their hearts in trying to make their tools as good as they can and it doesn't budge this line it it sucks to have a thing that you can put a ton of effort and energy into and not see a result like you'll see the result in terms of like the framework itself has these features it didn't before but you're not going to see people being happier spelt puts so much effort into spelt 5 it is a great release that makes spelt so much more scalable and ready for real production workflows and the sentiment went down it just it sucks mobile and desktop this will be a fun section electron used going down where's positivity I need to make my defending electron video yes tor's collapsing electron and Tori are closer than ever because so many people were sced into thinking Tori is this magical solution to all the electron problems just to realize it's a solution because it doesn't include any of the things you need you have to go write them yourself Tori is a glorified frend for a rust like CLI tool and if that's what you're doing if you're building a complex rust library and you want to expose it with a UI using something competent Tor is a great way to put a react app on top of your rust app it is not a competent replacement for electron I'm tired of you pretending it is that might need a video of its own also 41% of devs in the survey haven't used any of these tools for desktop and mobile apps so 41% still don't touch desktop or mobile surprised how many do but yeah it shows you the relevance of these things electron react native tying for pain points so over to build tools monor repo is going to be a blood bath V's climbing it's but the rate has descended see it was jumping so much every year and now it's slowed down a bit because I my H take is every project that should be using V is at this point and there isn't much left for it to grab because what's left is old things on webpack that are never going to move because they're bought into so many crazy plugins and nextjs which is so deeply built into webpack that they're rebuilding web packs is easier than rebuilding next so I don't know how much more growth we're going to see for V and I'm scared that means it's going to have the thing where it went up and now it's going to go left in the sentiment surprised bun didn't make it in but it yeah it's just not quite popular enough yet interesting same number of people using Von webpack at work that is very interesting to me weex still pays better very interesting it's also crazy seeing the range here like the tool you pick and the salary you make aren't correlated that much the tool you pick and how easy it is to get your first job those are probably still correlated how about company say I I want to I I know this case I hav't yet V's going to be much smaller companies than weback overall if I'm wrong I have a lot of thinking to do I have a lot of thinking to do these are like exactly the same interesting good to know I have I'm going to think hard on that one Sacha snuck his own thing in here and it's blue sky shout out thank you Sacha as always for the hard work you do definitely give him a follow if you want to keep up with these surveys thank you Sacha for all the hard work you put into this every year monor repo time pnpm still winning NX is doing fine turbo repo's growth is slowed massively it's it's so crazy how unsolved mono repos are it's really rough right now it's really rough I'm not going to pretend otherwise cuz like it's it's the right pattern for so many things but the tools are garbage like look the happiness has not changed ever ever that sucks that's so sad that we've never seen any growth in the happiness of mon repo tools what do we have for other tools low Dash date function I love datee functions I use it so much and DJs I I swap between these two more than I probably should I I lean DJs I like the API more I know the moment API is the wrong way or whatever but I I lik ajs they're both good though both great Solutions someday temporal will actually be ready 3js coming in with a sweep here is react 3 fiber in here or is it just 3js interesting and D3 still killing it frame motion still high up Gap still doing really well spring being this High okay react fiber would be higher if it was in here because react spring is by panders and it was originally largely for 3js in react 3 fiber makes sense backend framework still Express dominating but look at that NE oh that's Nest not next sorry that makes me sad actually Nest doing twice as well as fastify is heartbreaking fastify is so underrated if you're starting a new project and you're looking at Express just consider fastify it's basically Express if it wasn't isn't slow as I use fastify as my go-to web server for basically everything that is a web server if it's not next for me it's probably on fastify Hano is really cool too for things that you're throwing on like Cloud flare and whatnot CU it's much more like runtime agnostic but fastify is the fastest and the most node ready by a lot Hano almost feels like node is a like second class citizen it works fine but I I personally lean fastify we use both at upload thing believe it or not we use both pretty heavily fastify lets me do it a little bit more and have a bit better performance for long running servers JS run times node wins browsers close second bun is climbing fast bun taking out Deno is huge also bun being tied with service workers is kind of hilarious Cloud flare workers is a w in is at 3% that's cuz people who use cloud for workers half of them don't even know it's not node they just assume and then make mistakes and then get mad Lambda and versel are the top two here cloudflare workers is below versel Edge insane Cloud functions by Google is pretty high up too seeing netlify solo is interesting I I'm curious to see if that bumps up because uh we have some fun things coming non-js languages we're all stuck in python because of the AI wave PHP coming back Java never went anywhere I did not expect to see that many more chat GPT users than co-pilot users that's kind of nuts this one's going to be wild to look at next year in comparison so somebody with a good memory when we go through this next year remind me to compare to 2024 I want to see how this shifts around I'm expecting Claude to go up co-pilot to go up slightly chat gbt to stay roughly where it is and if Google's current Gemini tear continues could be very interesting also cursor is slaughtering cursor is like the only IDE in here up until like it's the only ID over 10% which is kind of nuts we got plenty of other IDs like tab 9 codium codium is spell two different ways here though are these oh these are different things I forgot about that that there's two codium versel is getting close to AWS for hosting GitHub is still too high with pages I mean it's free but what NFI is beating Cloud flare that's good to see Heroku is way too why is Heroku still 19% boys come on it's time to move off sharing the survey on Twitter Facebook or by email is scientifically proven to improve your coding performance by up to 15% what does sharing it in a video get me then should be even more right oh this is the typescript JavaScript split look at that typescript dominating less than 20% of people are under half TS that's crazy typescript one and almost all of us are compiling our JS now ai code gen still leaning 0% but a lot of people are saying like 10% interesting most of us are writing JavaScript professionally I I would like to see more people you doing it as a hobby 40% is low like come on we got to use it for fun front end Dev still 98% 64% are backend 26 are mobile 18% are desktop all very interesting numbers okay Spa are still winning but SSR is growing we're at 60% of people are doing SSR for their sites now ssg's at 46% multi-page apps are at 40 partial hydrations only 20% islands is 14 and it gets lower and lower isg is 9% and streamed SSR is only 9% too PPR especially cuz it's like considering that this is a next feature it being at 8% is pretty nuts especially it's like under a hidden flag I'm excited for PPR to become a standard though this this similar to how static revalidation became really common partial pre-render needs to become common as well yeah also a good point from Ryan more people are using streamed SSR than are realizing it absolutely agree there it's funny because like nextjs does such a good job of making so you don't to know those details the things just work but you end up with numbers that look really low here cuz nobody knows that they're doing it 35% of people said that code architecture is a paino for JS what do you mean just put it all in one file state management at 31% depths at 29% build tools at 28 where are monor repos monor repo should be way higher on this list new proposals everyone's hyped on temporal people are for some reason hyped about decorators yeah explicit Resource Management fun stuff going on there missing features you will still want static typing even though they have typescript standard library because we have to use libraries for everything thing signals people are hyped about pipe operator give me the pipe operator I want this so bad you guys have no idea no idea at all it's so good someday I'm going to start poly filling it at this point I need it too badly not poly filling but double plugin most people want the native types to be as similar to TS as possible makes sense web Tech happiness again has not moved 5 years that's sad JS happiness went down very very slightly 2020 2021 but it's not moved since think we've just accepted like like the hive mind has taken over at this point and now my favorite section the materials video creators I never thought I'd see the day I'm that close to Fire Ship I'll take it I didn't even do the video hyping up this survey this year so to get that high up still is huge primagen is close also meev being here is nuts as the author called out it's worth highlighting how vibrant the Spanish language ecosystem has become with midev in fourth place overall like how nuts is that to have a Spanish only effectively Tech Creator be double the next highest English creator that is huge huge shout out to Mev he's been awesome and every time I talk to him I get something crazy from him like SVG the thing I use for managing all my svgs for my thumbnails this tool is by a person from his community that was a huge fan of mine and the last time I met with Meo Dev we were just at the versel office he asked me if I would be down to take a selfie with him to send to this one other person and then he showed me his SVG that they made I was like wait what that's so useful and now they're one of my favorite people in the community meu just he he cares so much about lifting the people around him and doing whatever he can to support the community he's in it's unbelievable just such a great dude yeah shout out to Meo Dev shout out to the SVG guys it's primarily Pablo killed phenomenal project I I use this almost every day Kevin pow still killing it I have like three of his videos in my queue to watch later I've been excited to for a minute now low level look who made it in Pirate software is still here just lower than expected people the section for just filling in people's names Meo was the name of the most people put in huge awesome to see and now most important part the awards most adopted I'm not sure this is going to be V still I thought his growth slowed a decent bit that's what it looked like highest retention is vest of course once you're on a new test solution it's not you're not going to move highest interest roll down for those who don't know similar to how the nextjs team is rewriting web pack in order to make it faster with turbo pack the V team is rewriting rollup which is the production bundler for v in Rust with roll down so it's fast enough to be used both for Dev and production most wrens analogo good to see Brendan in here totally deserves it as I've said analog is a huge part of why we're seeing the angular Renaissance and I am pumped to see it getting the recognition it deserves most commented angular still not the newest kid but is still the Talk of the Town with 41 comments coming in about it in the most loved Library again V sweeping the clusions several years ago another state of JS survey put Astro on my radar decided to try it after spending a few hours with it I fell in love with the tech it was almost love at first sight suddenly I saw myself rebuilding my website administrative tools and other projects with Astro now I can say that Astro is my favorite framework by far JS is a dynamic and exciting ecosystem continually growing with many libraries and Frameworks from reusable components to client side server side and static Solutions countless ways to achieve your goals I like this call it like go play with new things I agree every time I try something new it changes how I Dev in some way even if I don't like the thing it's beneficial thank you Fernando for writing this but I got to see what my girl shande had to say love her she's done some of like the coolest react content I've ever seen check out her talks if you haven't just under 5 years ago I discovered the advantages of using typescript for the first time I wasn't alone in this journey I was among many jsds who were just starting to explore typescript and its benefits for teams aiming to create scalable maintainable frontend systems it's amazing to see how quickly typescript has grown in popularity thill to see the majority of survey respondents now use typescript in their daily work today my Goto stack for both proor and personal projects contains react typescript vit and just large and rapidly growing teams have placed their bets on these tools and they look for expertise in these areas when hiring front EPS so it's no surprise to say they've been widely adopted and retained by other organizations as well if you're like me you prefer to focus on mastering a few essential tools rather than continually experimenting with new Frameworks and libraries also like me you might even hold off on adopting the latest version reliable front end tools until they reach stable releases and that any issues are resolved you're not alone and there's huge benefits for those of us who prefer the tried and true path this is a message that's very much not for me so I shouldn't be as disagree like I don't agree with this that much but it's not for me so it's fine the people who are the best at any given tool aren't the ones who only use that tool they're the ones who use that tool and keep track of everything else going on so maybe like like for the top like half of people in a given tool I would guess the majority mostly use that thing but the top 10% of people for any of the things we talked about today they use other  too nobody who's in the top like 90th percentile of a thing only uses that thing in the dev world there's too much to learn from other tools and Technologies think that's everything what a survey I'll admit I'm a little sad I was hoping this year we would see a bump in the sentiment since things slowed down a bit and it seemed like the biggest complaint last year was that stuff was moving too quick well we had two years where things didn't change a lot because we're too busy rewriting our stuff in Rust but as a result of those two years of less change we didn't see a positive sentiment boost we actually saw it go down slightly as well as Frameworks that made big changes like spelt getting penalized for it too and it's sad I don't want to see a webd world where we're scared of innovation and it I guess that's the one silver lining here it looks like not innovating doesn't help sentiment either so on one hand there's no reason to not keep innovating people don't care they're going to be mad either way but on the other hand there's not that much incentive to innovate because people don't care I was hoping for for a better survey result this year I I'm hyped about these things and I hope you guys are too I know the people who watch these videos are not the average jsd I'm just scared of what the future looks like for them let me know what you guys think until next time peace nerds




## Why is everyone talking about Tailwind_ - 20230117
y'all think I'm gonna miss the opportunity to jump on some Tailwind drama come on you know better so what's going on why is everyone talking about Tailwind well to be honest there isn't very much reason what happened was a Tailwind fan made a tweet about how they break up large classes into smaller lines I don't like the pattern they used and it seems like a lot of other people didn't either for those who don't know I'm pretty big killing fan but I did not start that way I was stauntley anti-tailwind when I first saw it it looked like all the worst parts of bootstrap and way more work on top of it why would I ever want that instead of just CSS well it turns out once you figure out Tailwind syntax and start to understand the design system underneath it you end up moving so much faster so my co-workers really wanted to use Taiwan for a project and I didn't initially and after about a week of them pushing it and me getting my feet wet I ended up really liking it when I saw how well the Talon team understood Styles CSS and my needs as a developer it became an obvious thing to reach for for so many projects that I work on including all of ping now and obviously the D3 stack that doesn't mean that Tailwind solves every problem for every Dev but it does mean that a lot of the Tailwind haters haven't used it enough to realize they might actually become huge Tailwind fans I think that's a huge part of where the divisiveness comes from there's a lot of enthusiasts that see ourselves in these Talent haters and want to try and convince them over the hump and on the occasions where a Tailwind fan runs into problems and wants to ask for help their attempts to start conversations around how to do things better in Tailwind get flipped into conversations about how Tailwind is evil and ruining web dev I would say that at least 70 percent of the devs who push back on it haven't gotten over that usability hump it haven't hit that flow where you really feel the benefit of tailwind and even after years of styled components and scss and almost a decade of CSS experience I personally had never felt as fast as I did after one week of Tailwind do you know what was worse than 10 years of CSS recording this video six times I can't believe I have put all this effort in and you still haven't hit the sub button how are you this far in how have I put this much effort in in less than half of y'all are subscribed still subscriptions are free really want to hit 100K and get that plaque already anyways chance from the remix team proposed a way to write inline CSS that compiles two Tailwind classes that then compiles into tail and CSS that looks interesting I don't think it's for me at all but it shows how much even CSS lovers that don't want to leave behind their favorite syntax are recognizing the wins of Tailwind even just the way it bundles CSS is so much better than most solutions all of that said there's a lot of style Solutions now a lot of them are really cool and bring a lot of value to the developers using them Tailwinds become a norm for a reason though utility classes to me they feel like inline CSS with less steps and problems especially the way Tailwind does it with their limited set of well-chosen classes that are picked to go well with each other all of the padding numbers that are available all of the colors that are available pretty much everything in the system is meant to work well together so it's hard to design yourself into a hole where everything doesn't match or there are colors varying all over the place you can do it but it's much more work and usually requires those brackets there are clear benefits to the way Tailwind has built things both in their design system aspect and in the actual technical performance of tailwind and on top of all of that the developer experience is Best in Class it really is a level up in almost every regard and I haven't found anything that comes close the demand for Tailwind syntax is growing every day that's why we see things like Uno CSS windy and T wind all popping up because people love the syntax and wanting to use it in different places in different ways there's also things building around Tailwinds syntax like class variance Authority focus on making it easier to make complex design libraries with lots of different design States on a given element easier to manage by grouping the classes it's not my thing there's a great Mutual video about that I'll be sure to link that in the description if you want to build a proper design system within your code bases using Tailwind instead of CSS as the core I think it's a phenomenal path I'm just not as interested in that chaos long class names aren't that scary a lot of the weird things I saw on Twitter scare me though sorry my take on the drama is Tailwind is not that dramatic but generally Talon's boring in all the right ways and I think that the drama comes from an aversion to the syntax more than anything give it a shot if you haven't really try and get yourself over that hump because when you do the experience is unmatched subscribe if you still haven't for some reason it helps us out a bunch and YouTube seems to think you're going to like the video here I haven't watched that one in a while but if I recall it was pretty good you wouldn't put it there otherwise so why don't you watching it yet come on are you still here peace notes




## Why the internet went down for 2.5 hours yesterday - 20250614
discord Google Cloud Spotify Google Twitch Character AI Google Meet Rocket League Nest Cloudflare AWS High Lee even T3 chat It kind of feels like the whole internet went down today And I don't know about you guys but that gets me really scared Even though the internet's this big open place it feels more and more like we're relying on the same set of providers And that terrifies me Feels like one of my favorite XKCD comics coming to life You know the classic project maintained by some random person in Nebraska powering the whole world It's like that but big companies which in some ways is better in others is worse And this one was particularly scary That said of all the companies listed other than T3 Chat none of these are paying me So I have to make a quick buck before we break down this outage We lost a lot of money today as I'm sure lots of others did So quick word from today's sponsor and then we'll dive in to why half the internet was down Today's sponsor is a company that I am super hyped to call a sponsor because they were a product I used for years before I even had the balls to reach out and ask The company is Post Hog and I am so happy I started using them as an all-in-one suite for the product tools that we need It has been a lifesaver for us for T3 Chat They have everything from analytics to feature flags to surveys and so much more I only was using the analytics for a while but recently we started using other things like the feature flags because you know we added the beta to T3 chat which I put under a feature flag You might be thinking wait there's a setting that I can click to turn on the beta though How would you do that let's look at the code Here's the actual source code for the beta toggle for T3 chat Const post hog is use post hog I have a use effect to store the current value I learned afterwards that they actually have a hook to get you the value but I had already written this code It is what it is Handle toggle You just call postto hog.update early access feature enrollment with the key for the thing you want to update and the is enabled flag That's it That's all the code I had to write in order to enable the feature flag for people to opt into the beta And I can still roll it out myself and allow users to opt in or out Since they're an analytics platform I can hop in the dashboard and see the analytics for how often the beta is being called and used and how many people have opted in And we can see clearly 10,000 people have opted into the beta Super cool to see I was always skeptical of tying my feature flag so closely to my analytics tool but I found that it's really useful for keeping track of who's in what state when you're doing your analytics And it's actually really really nice to have them so tightly tied Post has continued to impress me and the fact that it's open source just makes it even better I have a feeling you'll dig them a ton if you give them a shot and there's a good chance it'll be free if you do Over 90% of the companies using Post Hog aren't using it enough to pay any money at all So give it a shot if you haven't Check them out today at soyv.link/postto So before we can go too deep on why the internet was down we need to talk about what powers all of the internet that makes these things happen The internet can go down because your ISP is having issues your DNS is having issues all these other things But I want to focus on the services themselves not like your ability to go on the web and get to a given web page but for the web page to process your request and send you a response That's the thing we're talking about today And these are the world's four biggest providers for that Obviously there are still people who run their own VPS's on their own like servers or rent provisioning from services like Hatsner but those are not in the top revenue charts at all These are the companies that make most of the money on web hosting in the vast majority of web service providers are using AWS Google Cloud Azure by Microsoft or Cloudflare for some or all of their hosting and many people go across these different providers in a multi cloud setup So what happened today well first off I want to acknowledge that Azure was not affected Believe it or not they are the second highest grossing cloud platform They make almost as much money as AWS sometimes even more because they have crazy licensing even though I'm positive a very small number of you guys are on Azure Just knowing the number of developers deploying on Azure versus their revenue it's kind of a crazy ratio but Microsoft's making their money on Azure today It seemed almost entirely unaffected so not necessarily going to be much a part of this conversation AWS however did seem to have some issues reported but I don't really know what those were I can't find any definitive reports anywhere else about it So we need to rule these two out for the time being Even Twitch which is built on top of AWS you'd think if Twitch went down it's obviously not using Google or Cloudflare or anything else I have it on good words from some friends at Twitch that they caused their own outage separately from everything else we're talking about So the Twitch one was caused by them The AWS one I have no real confirmation of I think it might have been a red herring but I haven't heard any reports whatsoever about an actual AWS outage today And I've done my best to talk to everyone else I could to figure out why their things were down And I have it on good record from both Google and Cloudflare what some of those reasons were I also know why Heroku was down yesterday but that's not even worth the conversation just yet So let's dive in to why Google and Cloudflare both had an outage today because that's scary As we all know both Google and Cloudflare are building their own provisioned infrastructure their own servers their own everything so that you and I can deploy things at whatever scale we need to on the web So why did both go down well believe it or not and this is a thing almost nobody knew myself included Cloudflare does actually have some dependencies Cloudflare in a very specific scenario does build on Google Cloud We'll get to what that scenario is in a minute because first we need to understand Cloudflare's set of options and things that they offer I've had three eras of Cloudflare describe to me internally by like how they think of it Error one is the DOS protection which is the classic thing we've all seen Cloudflare do is they you use them as your DNS and now they will deal with a giant DOS when it happens for you Really cool service The reason so many people put their stuff behind it That was the first era of Cloudflare And to this day if you go to the Cloudflare site the big button in the corner wait did they change it did they actually change it now oh no there it is If you click the little menu there under attack is the first option under login They know that's one of the things that they are good for So they make it really easy to onboard and protect your stuff if you're in the middle of getting DDoS That's the first era of Cloudflare Next they started investing in the developer platform Obviously that's what we're going to be focusing on most of today things like workers KV R2 Turnstyle all the things that we use and like to develop on top of with Cloudflare Era 3 is zero trust which is their corporate internal platform for making it easier for businesses to manage everything safely assuming that no device or individual can be trusted So making everything provisioned access It's a really cool platform and I know a lot of businesses love building on top of it But obviously the thing we're talking about for all of this is the middle end here the developer platform The reason I even bother bringing this up is it's all building on top of each other at any given point and most of the parts come from the developer platform I already mentioned worker KV Worker KV is one of the first things that they had built similar to how AWS started with S3 Worker KV is the key value store on Cloudflare that lets you just store random data really really trivially We use it for a ton of stuff including our O layer for T3 chat which is why T3 chat was down even though most of it is hosted on AWS since our O was managed through Cloudflare through open the Cloudflare outage caused the O layer to fail So signed in users had a very broken experience that sucks I am unhappy about that That said the O solutions that we would consider other than open O almost all are building on top of Cloudflare as well So they also suffered from the same outage The worker KV is their key value store Then there's the actual worker compute platform Just going to call it workers That is their JS runtime that works on the edge that lets you deploy real server side software and JavaScript and WASM applications around the world and it's a really cool powerful platform The actual compute that runs on the workers is not as strong as what you'd get in a lambda but as a result the bills are hilariously cheaper This is a big part of why everybody thinks Cloudflare is so cheap They then have their CDN which is their distribution for content for static files assets and whatnot They have R2 which I mentioned before is their general blob store S3 alternative They have D1 which is their database product They have turn style which is their capture that in make sure user interacts mode is solid but when you use it in invisible it's super unreliable still This is some of the large number of developer tools that they have And these vary in how useful they are and what different types of different things you would use them for and also how stable and reliable they are Like D1 is not something I would recommend almost anyone use It's far too limited R2 has gotten pretty far It's a solid platform overall but it's got weird edges that make it not quite as reliable as something as tried and true as S3 Turn style I'd put closer to D1 CDN is very very tried and true Workers close I would say the workers in the CDN are some of the most But the KV is it's rock solid It's like one of the things the industry has relied on for a long time It's the one of the best standard KVS you can use and it's become like not the same level of standard as something like S3 or even Reddus but it's surprising how many things have a worker KV ready package built for them including open So what went wrong since worker KV came first it was one of the first things they made and it's one of the most useful things ever is just having a general KV store could solve you can solve most problems that are data related in the shape of a KV if you try hard enough Believe me I've tried far too hard KV is the core for a ton of other things and a lot of the services on Cloudflare rely on worker KV So when worker KV goes down it tends to cascade the vast majority of Cloudflare Worker KV is kind of the the glue holding a lot of other parts together It's the general storage that they use Imagine how many of your computers would be running correctly if you ripped their RAM out It's honestly kind of similar how they use it which makes sense It's a really powerful simple essential platform And since they're all running their own stuff it should be really reliable What I didn't know until today and I am far from the only one who didn't know this many others said this too it was our understanding that the infrastructure between Google Cloud and Cloudflare is fully independent We were wrong I'm surprised this isn't information that was known before but Worker KV does have some dependency on Google Cloud I don't know the details of that dependency beyond it is a like cold storage long-term storage solution the cache layer and the right layer and a lot of other parts are still fully owned by Cloudflare but there are some key pieces that Google Cloud is the source of truth for It's honestly amazing that worker KV is as stable as it is because Google Cloud is not and I am blown away that this has not been a detail that's ever really mattered until today That all said the level of ownership I've seen on the Cloudflare side here is unbelievable It's incredibly rare for any company much less one as big as Cloudflare to do what they've done in terms of like owning this outage I want to make sure we do that I just want to make sure that I'm not like on their behalf blaming Google when it is CloudFlare's thing to own because they have fully owned this This is from Dne who is the CTO of Cloudflare We let down our customers at Cloudflare today Our workers KV service failed and the downstream products that rely on that service had outages of their own We will publish a full postmortem soon I know that these kind of incidents have real and serious impact for teams around the world as they do their work and serve their own customers Beyond the specifics of this incident the postmortem will go into detail about how we're removing the failure case We'll do everything we can to make this right going forward and I apologize for the problems caused today Everyone's been really supportive of them with this as they should be It is incredibly rare to see this level of ownership at that level of company And Dane's also a bro He's been awesome in every interaction I've had with him Let's go through this outage report On June 12th 2025 Cloudflare suffered a significant service outage that affected a large set of our critical services including worker KV warp access gateway images stream workers AI turn style and challenges auto rags zoras and just a lot of things including the cloudflare dashboard itself The outage lasted 2 hours and 28 minutes and globally impacted all Cloudflare customers using the affected services That is a massive outage especially at like 100% of users being affected That's that's a lot especially considering how prominent Cloudflare is across the internet Terrifying that one domino falling can do that especially when that domino wasn't theirs The cause of the outage was due to a failure in the underlying storage infra used by our workers KV service which is a critical dependency for many Cloudflare products and relied upon for configuration authentication and asset delivery across the affected services It's crazy how heavily they use worker KV but as I said most data problems could be done in the shape of KV Imagine that you need to spin up a compiled JS file on a given runtime somewhere else in the world How do you get the right JS to the right place at the right time well if it's all indicated in a KV that is globally distributed it becomes very easy to just rip the value out of that KV store and run it in an eval And as silly as that way of doing it might sound I am positive that that's similar to how workers actually works because having a solid KV like that makes building those types of things way easier So yes as crazy as it sounds KV is probably hosting a lot of the code that we are deploying on Cloudflare We're deeply sorry for this outage This was a failure on our part And while the proximate cause or trigger for the outage was a thirdparty vendor failure we are ultimately responsible for our chosen dependencies and how we choose to architect around them This was not the result of an attack or other security event No data was lost as a result of this incident Cloudflare magic transit and magic WAN DNS cache proxy w and related services were not directly impacted by this incident The one thing I will say is that no data lost isn't as cleancut as one might think If I was trying to log some analytics on Cloudflare while this outage occurred I very likely lost that data during that time That is data that existed in the moment that I expected to have persist in that moment that failed to persist That does mean I lost the data not them But data was lost there and it is to an extent the fault of whatever caused the outage So I I don't love that phrasing But like they got this blog post out so fast I can't really fault them on the details like this Speaking of blaming Theo I did mention that T3 chat was down to it No longer is but since I'm the one who makes these decisions and I'm the one you should blame Use code blame Theo in order to get your first month for just $1 if you're not yet a sub It's only eight bucks a month and you get access to every AI model It's the best AI chat I've ever used and it probably will be for you too And if it's not tell me why on Twitter and we'll make sure it is Anyways what was impacted as a rule Cloudflare designs and builds our services on our own platform building blocks And as such many of Cloudflare's products are built to rely on the worker KV service Very understandable We're even doing this on T3 Upload thing uses a bunch of the packages and cool things that we have built both independently and as part of the company And obviously T3 chat uses upload thing for managing his files This is all of the services that were impacted There's a lot going on here 90% plus of worker KV requests were failing Anything that wasn't cached and required a retrieval from the origin storage would fail access which is their identity based system for making sure people should or shouldn't have access to a given thing both internally and externally was entirely down because it would pull these configs from the cold storage and it couldn't certain gateway queries were affected warp was affected because of access and worker KV dashboard which uses all of these things was having a ton of issues for people standard login didn't work due to turnstyle login with Google oid failed due to KV SSO login failed due to access but the v4 API guy was fine I do appreciate when this happens especially on our side with T3 chat It's always funny when like the Claude website goes down cuz they screwed up their off but T3 chat is still up and Claude on T3 chat is still up because we're not depending on anything other than their API And honestly we'll be moving off of Anthropic's API in favor of Open Router soon at which point we're not even reliant on their APIs for being up which will be cool As has been touched on a couple times now challenges and turnstyle were down which is the things they use to replace captas The one nice thing here is that turnstyle would still fail bots but it would also probably fail a human too So it's not like bots were able to get into your service because turn style was down It's that real users couldn't get into your service Gateway initiated isolation sessions failed due to gateway dependency So browser isolation was hit as well Image uploads 100% failure rate at the peak Terrifying Delivery thankfully for actually loading the images wasn't hit quite as badly though Stream was entirely down effectively Real time was struggling but it uh was not fully down Workers AI was entirely down Pages and workers assets was largely down Yeah pages right peaked at 100% You can see more and more how bad things were The CDN was mostly up had a bunch of random issues especially with zero trust clients Workers was largely down especially for uploading updates and making changes to workers Error rate peaked pretty high at around 10% there And the builder for building new JS for workers was entirely down too Kind of crazy just the number of services they have and how many were affected but that's what I was building on top of your stuff But they want to fix that As they say worker KV is built as what we call a coreless service which means there should be no single point of failure as the service runs independently in each of our locations worldwide This is a bold goal There's a lot of different levels of distributed compute You have the obvious option which is one server in one place You have the more convenient distributed option which is one server for writes and reads are distributed across the world to however many other nodes This is pretty common across different services This is something that we love about upstach for example where we have reddus distributed where I write to the one region the write happening slightly slower is fine as long as reads anywhere in the world are fast really convenient You then have replicated read write across the world where everything has to distribute its knowledge and try to get it to the right source of truth that will then distribute it across other nodes But then you have what they want to do here which is full independence worldwide I'm sure they will still do eventual consistency where a worker KV instance in one place will make sure a different one in a different place still shares the same data But the idea that they won't fall over if a single source is down is really hard to get right but really cool if you do And I'm surprised KV didn't already work that way As I say here workers KV today relies on a central data store to provide a source of truth for data Single source of truth makes orchestration significantly easier but it does hurt reliability in times like this I understand why they're going to move off it Now a failure of that store caused a complete outage for cold reads and writes to the KV name spaces used by services across Cloudflare including users that are using worker KV on top of it as well Worker KV is in the process of being transitioned to significantly more resilient infra for its central store Regrettably we had a gap in coverage which was exposed during this incident So right now they are just trying to move to a more reliable central store From what I understand and they say here their goal is to move that standard cold storage layer to R2 which is their S3 alternative which means right now it is probably on Google's S3 alternative and that is again just for the cold store but the nature of KV is that things are cold stored for a long ass time forever even and then when they're hit they're put in cash and until they're hit again they will sit for a bit or go back to be cold store if they're not hit soon enough So most things will eventually need to be pulled from storage That said it was my understanding that R2 was built on top of KV So the interdependency there is a little scary I'm sure they have plans on how to fix that but I thought R2 was built on KV So we will see how they solved that problem Apparently Worker KV had removed a storage provider as they were working to rearchitect KV's back end including migrating it to R2 to prevent data consistency issues caused by the original data syncing architecture Wow Syncing data across many places is hard It's not a thing I've ever had to talk about or fight immensely even in videos on this channel That's a whole new problem to me Also data residency makes this significantly harder when different countries have different rules about what data can be in the country what data can be stored at all what data is allowed to leave the country Syncing is not a simple problem One of our principles is to build Cloudflare services on our own platform as much as possible and workers KV is no exception This is particularly funny because like I saw a tweet I couldn't find it to site but someone said like despite GCP being down Google.com is still up and that sounds good but it's actually really bad and it is The fact that Google doesn't dog food their stuff at all is genuinely terrifying and it's a big part of why GCP is as unstable as it is Spanner is their database that they use for everything internally Spanner on GCP is an entirely different product that apparently shouldn't even use the same name because they are so different from each other And Google would never use the Spanner that they sell That's just the way Google does things though They don't dog food most of the stuff they shell out and give us as slop God don't get me started on Flutter Anyways they then say a lot of people rely on KV and the cascading impact caused a ton of issues and significantly broaden the blast radius They went as far as screenshotting and sharing actual charts from their software which is really cool The fact that they have the willingness to share the straight up absurdly high error rates here is super cool This feels like a similar vibe to when I covered the T3 chat outage in more ways than one but I I do love the transparency here I wish they would have said the name Google somewhere cuz like no one knew they were built on top of Google myself included I went and asked all the different AIs if Cloudflare used Google and all of them said no because nobody thought this was the case Bleeping computers article quoted a Cloudflare representative saying that it was a Google cloud outage They didn't say who it was but it was a Cloudflare spokesperson Techrunch gave them a name thankfully Uh Devin Smiley was the one who said it was related to the Google outage as well as Ripley Park So now there is finally public confirmation from Cloudflare employees that workers KV is relying on Google Cloud for its cold storage Getting that source was way more annoying than it should have been but I am thankful we were able to do it So as we see here error rates for requests on KV were insane Access success getting through was horrible They said that since the Cloudflare access uses worker KV so directly it serves as a good proxy to measure worker KV availability So the fact that it was at nearly 0% for 2 and 1/2 hours effectively means that workers KV was down for 2 and 1/2 hours They dropped the whole timeline which is really fun to see how quickly they pick up on stuff It was 17:52 UTC around 11:50 a.m my time Pacific where this started And Cloudflare Warp started to see issues with new devices not being able to be spun up Then at 1805 which was 13 minutes later cloudflare access team received an alert due to rapid increase in error rates This is when things started to get bad 1 minute later multi- server specific incidents are combined into a single instant and we identify a shared cause which is worker KV incident upgraded to P1 So root cause and service that has that root cause identified within 16 minutes of this starting Not even 14 minutes That's pretty solid timing for a company of this size Then not too long after at 6:21 UTC which is 12:20 my time they bump it to a P 0 which is the highest severity that an incident can be So that's like all hands on deck Everyone who could possibly have anything they can do to help this like drop what you're doing you're doing this now 243 Cloudflare access begins exploring options to remove worker KV dependency by migrating to a different backing store with the worker KV engineering team This was proactive in the event the storage infrastructure continued to be down Okay this is actually pretty cool They've talked before about how in a previous Cloudflare outage things were down a lot longer than they should be because since they built so heavily on themselves they couldn't get into their own dashboards to unscrew things because their own dashboards were down They recognize the issue there now to the point where while this type of thing is occurring and they're still investigating they'll in parallel work on a way to move off of the failing dependency of theirs just in case they don't find a happy path That's really cool that they were looking into finding a way to unscrew access which I'm assuming they use a lot internally for accessing all of these things They were planning in parallel how do we make it so we can access if we can't get this fixed in time that's cool And the fact they even call that out in the timeline is a level of transparency I would not expect from a company like this But also like read this knowing that their goal here is to be as perceived as super transparent and owning as much here as possible because a lot of us just got the crushing news that we are actually shipping something on Google Cloud I thought I was Google Cloud free by Nus Gemini and learning today that I wasn't hurt But this mitigates it beyond how much it hurts by quite a bit even Okay so I said two earlier I meant to 12 We are now at 109 my time which is 1909 UTC Ser gateway begins working to remove worker KV as well by gracefully degrading the rules that referenced the identity and device posture states So this is again them trying to find a way to get around worker KV on the services that are depending on it in case they can't get it back up in time They then temporarily drop the things on those services that hit workers KV in order to reduce load on the worker KV so that the third party has a better chance of recovering I can relate to this with T3 chat I made a bunch of changes to reduce load to try and get it back up and left many of them in for far too long We're still cleaning up some of the stuff I left around in order to do those workarounds Cloudware team continues to work on a path deploying worker KV release against an alternative backing data store and having critical services write configuration data to that store This is again how do we mitigate internally they were trying to spin up their own worker KV instance that would have enough data to unblock their own services that they could point everything to in the interim if they couldn't get standard worker KV back up quickly enough The way they ran all these efforts in parallel in order to recover themselves in this incident is actually really cool I love the transparency on it Services begin to recover as storage infrastructure begins to recover This is the third party Google recovering Suddenly everything are coming back to life They still see an error rate that is high enough that they care So they keep looking through to find things 2 minutes later things are starting to be meaningfully improved as service is restored and then another 3 minutes pass everything's good It is cool when you build like with the right serverless mindset how incident recovery is usually just the IO layer recovering T3 chat I didn't have to go reboot anything or worry about services crashing or whatnot Everything's in a lambda So when it came back to life it just worked again And it's nice that I know for a fact Cloudflare builds with that mindset very deeply So they probably didn't have to do anything in this time This is just the monitoring trying to make sure everything was good But once your storage is back everything comes back to life upon the next request Enough of the timeline Let's talk about what they're doing going forward to prevent this You can probably guess what but I like the way they put it We're taking immediate steps to improve the resiliency of services that depend on workers KV and their own storage infrastructure whose existing planned work that we are accelerating as a result of this incident seems to mostly be existing planned work but yeah encompasses several work streams including effort to avoid singular depths on storage infrastructure that they don't own This will improve their ability for them to recover critical services like access gateway and warp critical not just for their users but for them because they use the stuff a lot internally I do like that they specify this is a singular depth on storage info they don't own I would imagine most of us did not know that using Cloudflare required the dependency in Nebraska The difference being that this guy in Nebraska probably likes the thing that he does I don't know how much Google likes their infrastructure especially GCP side of it Yeah So the big things that they have in flight are bringing forward the work to improve the redundancy on worker KV storage infra remove the depth on the single provider Apparently during the incident they started to backfill stuff for their own infra to their own infra so that they don't have to worry about it causing them to have an outage again at the very least for their internal stuff cuz like imagine firefighting something like this when half your dashboard is broken like it just it sucks Short-term blast radius remediations for individual products that were impacted by the incident so that each product becomes resilient to any loss of service caused by any single point of failure So make it so worker KV doesn't kill everything implement tools that allow them to progressively reenable namespaces during storage infrastructure incidents The namespace in this case is the like bucket that a bunch of KVs are going into So like my data and your data doesn't have to overlap too tightly It seems like right now it's kind of on or off for all of them It seems like they want to be able to turn everything off and then manually reenable certain name spaces probably their own internal ones as things start to improve That'll be a huge win for them like having that knob during an outage in an incident is it's surprising they don't but at the same time it's cool they never needed it They even call out why which is they want to be able to pull up the right services without accidentally dosing themselves as things are being repopulated because if the whole cache layer dies and now everything has to hit cold storage the reads from that are going to be brutal It's one of the things people often forget about caches is does it reduce load a ton and make things faster absolutely But it also changes the performance characteristics of your service So if the cache ever dies or gets purged you're doing like sometimes thousands upon thousands texts more reads on your own service than you were before And if you didn't build it to handle that because you've relied on the cache you might not have even known you were relying on the cache All of a sudden you're deossing yourself And it seems like they probably did that too during all of this This is a serious outage And we understand that organizations and institutions that are large and small depend on us to protect and or run your websites apps zero trust and network infrastructure We are deeply sorry for the impact and we are working diligently to improve our service resiliency This is a genuinely really cool unique coverage of an incident like this especially when you consider how recently this happened It was earlier today This article came out within 4 hours of the outage being mitigated And hopefully we'll have this video out soon too The turnaround is nuts The ownership is nuts The fact that they resisted the urge to blame Google in this is really cool I know many others did not do that I've seen a lot of companies blaming GCP for their outage today We even kind of fell for this where we like didn't take our fault too seriously here cuz Cloudflare was down But at the same time that level of ownership is important I did my best when we had the previous outage with Convex but that was our outage This one didn't feel that way due to the nature of how many people were affected But that's no excuse You need to own your services own the thing you sell And when the thing doesn't work for your users you got to acknowledge that that's your problem And I'm proud of Cloudflare for doing such a good job with that And also showing us what it's like to mitigate something like this when you build on top of your own things A lot of lessons to learn from this I hope you enjoyed it as much as I did Let me know what you think And until next time hopefully the internet doesn't die




## Why would ANYONE buy Gatsby__ - 20230202
I still remember the day I first heard about Gatsby I've been doing a bunch of react work wanted to fix up my blog and man I just did not feel like spinning up an HTML project I tried I hated it I wanted all my fancy JavaScript and typescript tools and I had a bunch of data from an old WordPress site I wanted to move over man did Gatsby solve that problem well I was so impressed with how Gatsby took my mess of react knowledge and history with WordPress and let me combine them into a decently functional static site it was the first time I'd really experienced all of my knowledge colliding in one place in such a cool way it was also one of the first times I had seen react used well for static site generation where an HTML file existed that represented what react would make it was so cool having a site that made correct HTML used all these different sources and let me code and react sadly the the I don't know how to put it other than next one Gatsby was pursuing so many different things at once that it was almost destined to fail the results speak for themselves it was split for Gatsby's probably what some point last year somebody was going through different projects and like forcing them all to install a bunch of stuff it's there's also a svelte one that's similar don't read too much into those spikes there's somebody was a lot of fun trolling right now svelt wasn't actually installed 28 million times in a week the reason I bring all this up is because something happened with Gatsby they got acquired but why why would someone acquire Gatsby and why would I say it's a good choice because I think the Gatsby acquisition was a great move for nullify the netlify acquisition of Gatsby doesn't necessarily represent much about the framework so much as what it integrates with as I mentioned before Gatsby was one of the few solutions to really think through Integrations Gatsby had a standardized graphql interface to get your data from pretty much anything which was super useful if you were trying to migrate old websites you can make one template in Gatsby and then pull data from all these other things what I realized quickly is that that data layer was more valuable than the rest of the framework and trying to get Gatsby the way to build a JavaScript website to keep up with the data layer as well as all of these other Frameworks it was just a lot and I don't think they were positioned well to do that I've even talked about this with the founder of Gatsby directly and he'd necessarily agree but I think they're coming around to it because soon after we saw the Enterprise content Hub which allows you to as you see here fetch from everything from Shopify to Wordpress wherever else and then push that into whatever framework you choose and this is where I think Gatsby is strongest is the integration layers for all of these different data sources Astro is starting to kind of challenge that with the content packs but I do think there's an awesome opportunity for Gatsby to just take their content layer and let us use that instead of using the Gatsby framework I think there's a very strong angle for netlify to take being the easiest way to grab your old WordPress site and make it into something modern that your devs don't hate caspi acquisition is really interesting for reasons y'all might not have known about let me know what you think about the content Hub watch whatever videos being recommended there peace




## Why would any startup do this_ - 20240920
most companies are trying to make more money they usually do that by trying to get more customers hiring sales teams or even increasing their prices one of my sponsors is doing the opposite though they're actually trying to make less money I know crazy but hear me out post hog is killing it I went into this video kind of excited to see what they changed I'm going to go off stream and go change a bunch of things we're doing because I I'm really impressed post hog already was the all-in-one product analytics solution I chose to use for basically everything I'm building which is why I reached out to them to try get them to sponsor the channel and now they have and now they're paying me to just nerd out about analytics stuff which is so cool and they sponsored this video so I can showcase how crazy their pricing mindset is and how cool it is that they're being fair with their awesome open- Source solution for everything you need for product analytics if you do sign up after seeing this make sure you tell them that Theo sent you or use the link in the description or in the comments when you do without further Ado let's look at why they lowered their pricing I also I I love their little graphic guy we actually have a version of him that's like Theo coded really cool stuff more companies need to have fun with their branding if you haven't seen the post hog site it's really cute it's really nice and like what other company has the balls to put this in the middle of their home page like it's almost like the antithesis of something like forell or the classic linear template that everybody's been copying for a while also of note post Hogs entirely open source and you can go join and give them a star they're at 20K it should be even more because they're the best open source product Analytics tool by a ton super cool also really fairly priced if you want to use their stuff anyways enough about why I love post hog more about why they're making less money tldr we've optimized our session replay Pipeline and infrastructure and we're passing the savings on to you by making session replay drastically cheaper especially at lower volumes and that makes them the cheapest session replay tool amongst competitive products there also a part two which we'll get to in a second so here is the cost comparison also note other channel sponsor Sentry is in here too I consider Sentry and post hog to be very different products where Sentry is trying to figure out what went wrong and why post hog is trying to figure out what went right and how often is it going right what are users doing post hog is more about the things users are doing on the service and Sentry is more about what crashed and why and I don't think session replay is a particularly big part of what Sentry is focused on versus a company like log rocket where that's literally all they do and post hog which used to be a much more expensive thing here now post hog went from being the most expensive session replay to the cheapest and buy quite a bit so if you just want to see what a user does in a session this is a great way to do it and that's this price is for 25,000 recordings so if you record 255,000 sessions so 25,000 people visiting the site and you recorded them doing that only 85 bucks the eess fees you eat on different providers might even end up being higher than that because of how much data is being transferred and you think about this annually it's a really good point annually that's $4,100 saved so if you're doing 25,000 recordings a month and you were happy paying the old price you just say four grand a year and they're making four grand a year less thankfully their growth has been enough to balance it out but it's pretty nuts that they chose to go from the most expensive to the least expensive because this is not where they want to make their money let's keep reading though there's more interesting stuff here many tools don't actually publish their pricing that's their choice but we're pretty confident it's not because they're secretly a great value how else are they going to justify those huge outbound sales teams huh that sound familiar sound a bit uh cloudy yeah Cloud flare is the worst about this they love hiding their prices like try to find how expensive it is to optimize images on cloud flare there's like seven different prices you have to factor in and then they don't tell you about two others you have to factor as well because if you want to do image optimization on cloud flare you have to run code in a worker to fetch the original image and then optimize it because if you don't write your own worker code to process it then you have to allow all domains which means anyone can optimize images through your account which is a terrifying security hole but that's just the cloud flare experience because either you don't care you do it insecurely or you do care so you do it the right way and then you end up racking up a huge bill or they rate limit you until you have to pay a huge Ransom fee and they hide all of this in the process talk all the you want about companies like forell at least they show you where all of the costs are almost to the point where it's more confusing cuz they show you you literally every single number breakdown of what cost you what where when and why that's what AWS does and as much as I love to on AWS it's one of the things they do right surprise bills at the very least can be reverse engineered because you could see exactly what caused them to happen I have no idea how much money Cloud flare is costing me right now I don't even know how much it's being used because they hide all of that data they hide all of the pricing they hide everything and it's awesome that post hog is coming out and taking a stand against it makes sense the open source compan is the one doing it as they we're saying here we're not just cheaper than replay tools designed for developers either anyone using hot jar for their website or web app can also save by switching to postt talk this is cool too hot jar we actually just talked about because I was covering an ooth exploit that was discovered on hot jar because they had a cross-site scripting attack that was possible for their Analytics tool fun but also unlike hot jar post talk actually supports session replays on mobile with their open beta for IOS and Android even react native coming soon so yeah if you're a react native person be excited because they'll have that there as well yeah pretty cool that you can do session recordings on mobile with the same project the same web app the same everything as you're doing on the web dope and yeah these prices are pretty hilarious up to 5,000 recordings is free up to 25,000 is 5X cheaper 250,000 recordings it's only 543 bucks that's crazy that is crazy so why why would they do this well they have a pricing principles page they actually sent me the whole thing which we can go through but we'll do that in a second I want to read these two points first the first point is that we should charge as little as possible while remaining margin positive we don't believe in loss leaders or squeezing customers for the maximum that they're willing to pay AKA pricing to Value their goal here isn't to be a service that loses money in some places and makes it in other places like Cloud flare or even with us with upload thing where our free tier costs us a good bit of money but our hope is that long term enough users will subscribe to the higher price tiers to offset that and it's a tough balance to find the only loss leader that they have is their free tier which they've optimized enough to be cheap enough that it's viable if you compare to other companies that I've worked with and been sponsored by like Planet scale their free tier costs them too much money to maintain and finding these balances are really hard and I know that these guys are working their asses off to do it right they also called out that the true value of post toog comes from using all of their products together we make money by onboarding customers onto more of them not maximizing the profitability of each individual tool that said they have made it very clear that I can not only use but recommend that you start with and potentially only ever use their Analytics tool and I'll be honest that's the only one of theirs that I'm using right now they have all these other things well I guess I'm using web analytics and session replay too but personally I'm not using feature Flags AB testing surveys data pipeline Warehouse or AI engineering I'm just using the product analytics I'm going to start enabling web analytics I'm curious and also the session replay which I think I think I recently turned off we weren't using it much but you don't have to use all of the things to use post hog the product analytics are so good that you can just use that and have a great time which is what I've been doing for a long time now and highly recommend people keep saying the pricing page is dope yeah that's beautiful that is yeah that's really cute as they call out here over 90% of companies use post hog for free you only have to add a card if you need more than the free tier l or the advanced features or you just want to have more projects so they're totally free you also click ridiculously cheap this this is so beautiful and they show here all the pricing is usage based here is the exact cost of every single type of thing so with analytics it costs you 0.005 cents that's hilariously cheap per event and it gets cheaper as you do more events it gets to0 9 cents once you have 250 million plus events that's insane so one divided by that you'd have to have 111,000 events to be charged a dollar 111,000 events per dollar once you get to the high tier that's crazy stuff that's unbelievable even like the base tier if we do the math for that quick 20,000 requests to spend your first dollar yeah they're they're not expensive and it's really cool to see also if you decide you don't want to pay them it's open source and you can go host it yourself there's a GitHub repo you can go spin it up connect to that URL instead with the SDK and it all just works so if you want to host it yourself and really maximize the costs you can do go do that also chat pointed out the first million events are free this is unbelievable it's it's hilarious if you compare this to something like I was a big mix panel guy back in the day I loved mix panel I personally found post hog to be the closest thing to mix panel in terms of the ux $28 a month for 10,000 events I'm sorry I'm sorry that's so painful oh God yeah and you can only have up to 20 million events monthly that's not free up 20 million that's the max you can have before you have to bump to one of these other tiers and they still charge per event because they like off youate all of these things do you need more help yeah you have to like when you go to buy it you have to write here so a million events which is remember a million events is free on post hog $168 a month on mix panel to 5 mil $612 a month best part is it's not usage based you have to pick the right amount and if you pick wrong you either pay them too much or even better you start losing events because your cap wasn't high enough great isn't it wonderful user experience especially because they're trying to upsell you on the annual so if you buy 10 million events on the annual plan 10 grand and it turns out you actually need a 15 million you now have to cancel and redo the whole thing and you lose any discounts you got doing the yearly plan it's people in chat saying gambling simulator yeah that's effectively how it feels I just sorry to roast the competition I know it's not what I'm supposed to do as a sponsor they did not pay me to go on mix panel that was not part of the plan they might even be mad about it and want me to remove it I don't care I think it's important to understand the state of this industry because they're doing this significantly better than the other options I've explored in the past so much better it's actually hilarious how much better even at this price let's say that you keep this price for that 20 million events worse it can cost you is a thousand bucks but if you start getting the cheaper price which you absolutely would 20 1 2 3 4 5 6 times that 590 bucks that is significantly cheaper that is hilariously cheaper don't even consider mix panel at this point it's sad and like yes on page shill you should go Fairly explore the other options but I have spent more on mix panel than post hog has paid me to be very clear I'm still in the negative for analytics providers anyways the whole loss leader thing is important by the way loss leaders are bad for customers and companies nobody enjoys a surprise price increase when a company decides it wants to make money now or seeing products get Sunset because they're not sustainable anymore we believe in products that are both cheap and sustainable we can do this because we're efficient we're self- serve and we don't do outbound sales the closest thing they do to outbound is me here right now they never had paid an influencer they never sponsored anything I reached out to post hog because they were the best option I could have went and taken way more money from another brand that I didn't like as much but my goal with the core T3 deploy partner sponsors was things that I knew I trusted and I could recommend to you as the end user knowing that I've had a great experience shipping them post hog was what I chose to ship I hit them up we talked a bunch and we figured out what a sponsored deal could look like because both of us were new to this at the time this is why I love them though they don't want to waste all of their money doing these crazy things to see other companies doing they just want to be a simple FOC Fair option and the closest thing they've ever done to some sketchy marketing thing is pay me if anything you could give them for that cuz it's the closest thing they've done to not just being the simple obvious choice but if you do want to use them and you want my next renewal to go a bit easier they sure you go to po.com Theo because then they know I sent you there's no discounts or anything we haven't figured any of that out yet but at the very least they'll know I sent you links in the description in the top comment if you're looking for it also I love I love their writing style here and this is just part one yes what's coming next part two when next week it's out now we'll read that in a sec so what should you do now figure out how to spend the money that you've saved here are some suggestions donate to the hearts and middle sex Wildlife trust in the UK where the Hedgehog population has sadly Fallen by 50% in over the last 20 years Max our Hedgehog and residents would appreciate it they're so cute and round and lactose intolerant that's great you could also buy something from their merch store oh God their merch is actually really cool like unironically some of the coolest company merch my other home's a data warehouse great shirt I have a hoodie from them that I actually love it's so comfy it's so comfy iHeart product for engineers love it so good signed founder photo legibility not guaranteed these guys are the the goofiest dudes too I love them so much if you have the opportunity to like listen to anything that they have to say or just see them at an event do it they're so entertaining they're just like British goofballs that love what they're doing I actually don't know what the part two is I haven't had a chance to read this one at all yet so we get to discover this together so we decided to make less money part two let me keep killing you guys want to know my biggest complaint about post hog Honestly by far my biggest issue with them their blog is covered with things that get in the way when I want to make videos about it I just have to delete things off the page I'm going to annoy them and they'll fix it they might even see it in the video and fix it but but yeah if you go to the Post talk blog and it looks less like there's a bunch going on I've had my impact last week they slashed the cost of session replay today we're announcing part two a change to our pricing that makes tracking events for anonymous users 80% cheaper okay okay now we're talking now we're talking we'll see a 30% decline in product analytics revenue from this change but it will unlock several new use cases such as web analytics at a massive scale as well as tracking high volume backend events that were previously prohibitively expensive this is a really important thing if you're not deeply involved in analytics providers like someone like myself is you probably don't know that many of them Bill based on the number of user identifiers that they have so if I go to your site and I'm not signed in they don't really know who I am so a unique identifier is created to represent that session if I then sign in a new session is created so you're effectively being double built but now if I'm a scraper and I'm just reading the site and quickly running the code to see what's on it you're getting build a ton for all the events being fired by those scrapers even though they never sign in so what's the solution the solution I and many others have chosen is to not run any of these product analytics tools until you have signed in the recommendation I made for a long time is to use a service like plausible plausible is another open source analytics provider this one's built in Elixir which I personally love but the difference with plausible is that their focus isn't product analytics it's not seeing what users are doing how many users hit these thresholds like with something like up upload thing which is if you guys don't know the upload file managing service that we built for fullstack devs to make file uploading significantly easier and better really proud of what we have with upload thing but if you want to know how many users have uploaded this number of files you it's hard to get that information if you use anything like posible if you use something like post hog you can tag the events with the user IDs and then filter user IDs that have had this event happen enough times with plausible there is no concept of a user or an identifier all they track is traffic so if you just want to see how many visits your blog is getting or how many times people go to your homepage and where they come from plausible has been a good solution for that but if you wanted to see what they actually do what buttons they click what features they're using all of that plausible did not work also their pricings fine it's not great I'm spending quite a bit of money on them now just I'm too lazy to move things over not the cheapest thing in the world but it's good it's open source it's been easy recommend for a while I think post hog took that personally though because they're going after that now by focusing on Anonymous users and making them cheaper they're making it so I don't feel like I have to restrict post talk until you've signed in because right now post talk doesn't trigger on upload thing until you've signed in we just use plausible on the homepage I might go change that after stream now like no front they're not paying me to say any specific thing they just pay me to talk about this in general and get my thoughts my thought is I'm going to go make a bunch of changes to a bunch of my services so take that as you will so what's changing until now we charge the same for all events that we ingested and again this was the problem because somebody scraping my homepage is not as valuable as somebody uploading a file using my service and if those are priced the same I'm just going to kill the first one and they know that and they're changing that as they said this is standard practice among product analytics tools because again product analytics and web analytics are very different tools like mix panel amplitude and Heap all charge customers the same for each tracked user session or event regardless of the cost to them but they're changing this now by splitting the product analytics pricing into two different event types is identified events which was the default for logged in users which includes custom data like the user's name email address ID ways to identify specific users so you can identify specific behaviors as they say here identified events let you create user specific insights and cohorts based on person properties these will continue to cost the same so again if you want to see how many users upload this file type that's what this is for if you just want to see how many users go to the homepage and navigate it Anonymous events are good for that events that only include non-identifying data like referral data such as utm's domains like where did they come from did they click a YouTube link did they click a Twitter link how' they get here as well as things like device type and basic location information so all of that will be included still but nothing about who the user is not their email address not their IDs none of that Anonymous events are between 55 and 80% cheaper for most of our customers now and these will soon become the default event that's really exciting making it the default event is going to hurt their revenue even more but good on them the balls to do that is in reality if you're tracking both Anonymous traffic like website visitors and identified users like login customers you'll likely use a mix of both event types we've updated our pricing calculator to help you better estimate your exact usage and potential savings yeah insane this means website owners who send 10 million events per month would pay just $324 per month if they switched to only sending Anonymous events saving $9,000 per year in the process so when should you use anonymous events should you them for things for tracking users who aren't logged in for use cases where you just need the behavior so visitors to your site marketing site specifically Shoppers on an e-commerce site where you don't need to know every detail about what users are doing in fact if you're well implemented enough you might have built your own system for doing product recommendations that you're tracking yourself not through a product Analytics tool so what you want from the analytics isn't necessarily what specific product did a person visit what you're looking for is what UI are they navigating and what buttons are people pressing or not pressing make a lot of sense to have that be anonymous also logged out users of mobile apps if somebody's in an app and they're not signed in getting product analytics from them seeing how they're using the app can be really cool tracking API in backend events oh that's actually killer for us that's killer that's going to save us so much money oh okay I'm even more excited now events generated by llms and error monitoring yeah yeah this is great but if you're mostly tracking logged in users you should continue to do so absolutely so why are Anonymous events cheaper they're explain like five version is that they cost less to in just in process and now they're going to pass the savings on to us so here's a slightly longer version I'm actually curious when you call Post hog. identify or you capture an event from an identified user we have to do a bunch of processing to create update and merge person profiles in our back end actually one of the cool things if you have a user that has like two different accounts but they both are using the same email address post Hogs identify function will link those together correctly which is really cool if they sign in a mobile and web differently stuff like that but I'm sure it takes a lot of work on their end yeah they store that data in postgress which is separate from their events table in Click house we are familiar with click house it's a SQL compatible large data store solution that post hog is largely built on top of so postgress is being used for getting that user data CU it's way faster click house is not fast for querying but it can handle gigantic queries much better but since they have to bounce between postgress and click house this ends up becoming expensive for them to run it's the most expensive and complex part of their inest pipeline which makes a lot of sense with Anonymous events they can entirely rely on the cheaper faster click house tables for example we use a session table to capture session properties such as the referring domain as well as the URLs visited this lets us charge you much less for those events saving you money and enabling many use cases that would have otherwise been cost prohibitive before but why are you deliberately making less money I I love these like they're just blunt and Goofy like like all of their stuff just reads with this slightly sarcastic but very realistic British tone it reminds me of like a rich ha from the spelt World it just it's great I would God I would kill to watch James from post hog and Rich Harris have a podcast or just like an interview together that' be so entertaining I'll I'll work to make that happen but as they said here they're deliberately making less money because it's the right thing to do for both our users and for our business most of our competitors are inefficient they employ huge outbound sales teams to grow their revenue their salaries and commissions for closing deals are passed on to their customers through higher prices I can tell you the amount of inbound I have gotten from different analytics providers desperate to get us on the platform very real problem and the price reflects because there's like hundreds of people at each of these companies who do it they have to charge enough to pay their salaries in contrast post hog is 100% inbound they grow mostly through word of mouth and hopefully through you hearing about them through this video and they charge based on the actual usage we don't believe in loss leaders so we make a modest positive margin on each event sold what we charge is directly connected to what it costs us not what we think we can get away with charging we grow our Revenue through helping you grow as well as onboarding you onto other tools like session replay feature flags and surveys we think this is better than trying to squeeze you for every scent you have you have a great experience and we'll enjoy better retention as well as Word of Mouth for doing the right thing oh boy apparently there's a part three coming I'll be sure to cover that when it happens and a great important last question would you rather fight one hor siiz Hedgehog or 100 Hedgehog siiz horses and if you know anything about post hog you know that they would never fight a h Hedgehog great stuff this is awesome I went in excited but this is even cooler than I expected it to be if you want to learn more about how post talk thinks about pricing and cost stuff they have a bunch of articles about it they have this pricing principles doc which is how they think about pricing I actually want to read a bit of this here use post for free if their hobby is or pre-product Market fit experience the product before paying for it start paying when they're ready on their own with as few hurdles as possible transparently pay for the value that they receive so usage pricing and paying for product so they only pay for what they're actually using again if you're only using a subset of post Hogs features in products you should only pay for the things you're using I know a lot of services make you subscribe to a crazy Enterprise tier for hundreds of features when you only need two of them they will never do that which is awesome and of course making a no-brainer to pick them over other competitors it is genuinely hard for me to think of reasons to use alternatives to post hog at this point I had an example earlier with plausible and they've even killed that so here we are yeah you can check this out I'll leave all these links in the description they have a page on how they make money what their actual margins and such look like as well as this great article enduringly low prices we want our customers to spend their money on their engineering team not on buying 10 software products that felt like a personal dig but I get it yeah great stuff let me know what you guys think in the comments thus far post hog has been possibly the most positively received sponsor I've worked with and I'm curious if you guys have used him too let me know in the comments what you think about post hog and what you're using if you haven't tried them yet until next time peace nerds




## Will Manifest V3 Kill Chrome_ - 20241020
as Chrome's biggest Defender I'll admit today kind of sucks the end is near and the future of ublock origin isn't looking particularly bright I want to go in- depth on what happened here I'm a Chrome extension author a Linux privacy nerd as you can see from my framework laptop in my Ubuntu installation but more importantly I'm a big nerd about all things privacy advertising and the web and I think it's important to understand why these changes are happening how it's going to affect you and what the future of chrome looks like but before we can do that we need to understand manifest V2 versus V3 before we can talk about that quick word from today's sponsor 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 as I mentioned before we need to understand manifest V2 versus V3 these are the two different version of what is effectively your configuration for an extension this is a standard that isn't just the thing in Chrome by the way this is supported in Firefox as well in attempts to try and make a universal standard for extensions and manifest V2 was a little uh a little too flexible the goal with the move to manifest V3 by Chrome is to try and patch up some of those absurdly wide permissions and make things both safer and faster for All Chrome users there's been a lot of spyware spreading around via chome Chrome extensions on V2 and V3 should hopefully address the vast vast majority of those issues so what has actually changed let's go through it from this original announcement from 2020 by the way this has been a long time in the making one of the biggest changes is that manifest V3 will not allow you to remotely host code all the code has to actually be in the extension itself which means making changes on the Fly is much harder because you have to wait for the extension to be approved but it also means it's much easier for them to audit it and make sure the code is safe they also are strict about not Opus skating the code they said over 70% of the Chrome extensions that were malicious were off Fus skated so now you can only Minify and they were clear you can still Minify the code you just can't Opus skate it you can't intentionally make the code impossible to read and understand the performance stuff's actually really cool too they fundamentally changed how the background logic works the big thing is service workers instead of a background page which is literally a separate HTML page that runs triggers his own JS and does whatever else for every single extension by the way so you're running all these different isolates non-stop it's terrible now you can run service workers so you don't need the HTML you don't need this weird background page pattern that spins up way more resources you just have a service worker which is a mini JS thread that we can already use for building stuff in the web now you can use that for your extensions which should be significantly more performant they also fundamentally change a bunch of the apis one of which we're going to go very in depth on which is the network analysis API in order to make them a little more fine grained but also much m much much more performant the declarative net request one in particular we'll be going deep into so hopefully we understand a bit of why manifes V3 is happening now it's to try and reduce both the performance issues that come from Chrome extensions as well as the security issues inherent to the existing model but these changes disproportionately affect ad block Solutions and I want to go into what this looks like the best way as always is to keep up with what gorill is doing in this case you block origin light you block origin lights a permission L mv3 API based content blocker it's entirely declarative which means there is no need for a permanent U block origin light process for the filtering to occur this is both what is cool about you block origin light in manifest V3 as well as what kind of sucks it's important to understand how this declarative net request API Works previously the API that you would use to access web requests to do things like ad blocking would give you access to the entire request and the response and you would process that in JavaScript so every single request your browser makes would be analyzed by your extension that has that permission to see it and say hey I don't know if I want to do that hey I want to cancel that request eh pass that one along this is both a huge performance hit because literally every single request your browser makes has to go through this JavaScript before it can actually finish the request and it's a huge security issue because now your extension sees every single thing your browser is doing if it's a trusted open source extension like you block you're good to go but if it's a sketchier one like ad block or ad block plus who knows what's happening to that data I've seen some sketchy you should probably avoid those but the declarative net request API solves this and the way it solves that is by being a traditional declarative filter by declarative what they mean is that instead of running some JavaScript code on every single request and making a decision when the request comes through you declare which requests are and aren't allowed so now you have to include a giant effectively a Json file that configures which requests are and aren't allowed as part of the extension this is much easier to do in a performant and safe way because there is no code being executed by the extension now ublock origin light doesn't run JavaScript to figure out if a request should go through or not instead this list is provided to the browser which can then block on a native layer so no JS is running which should allow this to both use way less memory and be way more performant but most importantly significantly safer but that does mean there's a handful of features that we're probably used to using something like ublock origin that you're not going to get you're not going to get the fancy right click remove element stuff because this is just being used for the like blocking of requests now you're not going to get per site scripting changes the way we could before you aren't going to have Dynamic filtering and URL filtering where like on URLs you can set different conditions and permissions in different states with different things inside of them everything has to be declarative through these new rules that are being defined in this declarative way and you can see this if if you look through the code you just go to chromium rule sets generic rule set and here we see defaults and all of these URLs that are going to be blocked by default and there's a whole bunch of these and all of these sets of domains are used in the build process to create an extension that includes I think it's like 27,000 or so rules of what should be blocked always when the proposal for manifest V3 first happened they had a hard limit of 30,000 rules per extension and some people were working around that by installing multiple extensions so you'd have like part one part two part three extensions which is weird they bumped it to 300K but what's interesting is that ublock origin lights only got 17K when using the optimal or complete modes which is not that many rules in the end so it's fine I do like this question that was in here is you block origin light a bad faith attempt at converting ublock origin to manifest V3 no my goal with ublock origin light is a reliable and efficient mv3 compliant content blocker leveraging the filter lists used by ublock origin I'm satisfied that I fulfilled that goal by ensuring ublock origin light was entirely declarative though at the cost of limitations Beyond those intrinsic to mv3 the service workers is not required to initiate Network cosmetic or scriplet based filtering in a timely manner because again it's entirely declarative if you didn't know this there's actually some issues on the old ublock origin on mv2 in Chrome because Chrome would try and get your browser page to resolve solve before let the extensions finish which caused a race condition that was particularly rough as goral says here for chromium based browsers specifically mv3 will actually allow you to properly filter at browser launch which isn't the case for mv2 based content blockers he has a whole post all about this which I thought was really interesting this is like fun history of ad block details Firefox will wait for ublock origin to be ready before sending Network request from the already open tabs that browser launched in chromium browsers that's not the case tracker and advertisement payloads may find their way into already open tabs before ublock origin is ready while Firefox will properly filter them reliably blocking at browser launch is especially important for whoever uses default deny mode for third party resources or JS a settings available in Chrome but it's disabled by default to allow for extensions to block the page loads but like no one has that enabled there's also prefetching which is blocked in Firefox but not in Chrome and wasm which is a fun one too the reason wasm is not used in the Chrome version is because if wasin was being used there is yet another permission that has to be allowed in the extension manifest which could theoretically get Google to block a push yet again there's a whole issue here detailing how strict Chrome can be about these things wish to be able to use for my extension it's already the case for the Firefox version however I don't plan to use wasm unsafe a Val if or when it becomes available as this goes against the spirit of not executing remote code what's the reason that chromium can't allow loading of Wasa modules from same origin response objects this would solve the issue of loading and executing only same origin wasm code so the issue with wasum is technically the way that croan pled it you could execute Wass and binaries from anywhere which would be huge for off fusc and installing viruses via extensions so they decided to try and avoid all of that so as you can see poor gorill has been suffering a lot trying to support the best possible ad blocking flows inside of chrome and now I'm going to drop the controversial take that's probably going to get me into a bit of trouble and I know if I look at the comments it's going to be everyone I don't think Chrome is doing this in bad faith I genuinely do not believe the goal of the Chrome team here is to allow their ads to go through more reliably I've seen a lot of controversy around this I've seen a lot of conspiracy a lot of weird from people who are trying to push this idea that Chrome's only making these changes because they want to remove ad blocks from the internet you would be amazed at how few users are using ad blocks when it comes to percentage of the web especially on mobile because mobile is a huge portion of traffic on the internet now it's the majority if I recall and more importantly it's where most of the money transfers is happening on the web nowadays too because of that these changes in Chrome don't really meaningfully affect Google's advertising profile and on top of that the fact that the mv3 content blockers allow you to block on launch means that they're getting even less tracking information than they were prior so I really don't believe that this is a thing the Chrome team is doing because Google said hey guys it's time to make sure our ads actually run and I understand why it looks like that but the Chrome team doesn't really do what is best for Google in that sense very often the positioning of the Chrome team has always been Advance the tools of the web as far as we can in order to make the web a more viable platform chrome doesn't exist because Google wants to own the web Chrome exists because Google wants to focus on the web they don't want to keep making these shitty desktop apps like Google Earth that they have to Main pain forever if they could put everything in the browser then the world would be a better place Chrome exists because Gmail did better than anyone expected and their whole goal with this is to improve the browser experience in order to have it be as great a place to do real work as possible Google doesn't win if they serve a slightly higher percentage of ads Google wins if the internet is where we go to do things and if we open up Chrome or Firefox or Edge or Arc or ladybird but we use the to go to our Google workspaces account we use them to go to YouTube we use them to do all these things on the internet which is where Google has positioned themselves then Google still wins Google loses money on Chrome because their goal is to push the web itself forward in manav sv3 is more than anything their attempt to make Chromebooks look less like virus destroyed machines things like this change significantly reduce the the bad vibes many have on Chrome because they see a Chromebook that a kid used just full of viruses all Chrome extension hacks hell my sister's MacBook got destroyed with hacky Chrome like this it's very common and the manav V3 efforts make lives for the existing ad blocks slightly harder in favor of making Chrome and as such the entire web much safer and more performant and if anything as I mentioned before since these now block on launch it might actually hurt the numbers that Chrome sees long term too in terms of the ads being played the only thing I don't see being easy to work around here is uh YouTube ad blocking which is absolutely going to be a problem with V3 I'm not sure what that story is going to look like just yet that's going to be interesting but I really don't think V3 is some crazy attempt to try and make the web full of ads again it seems much more I don't like the word noble for it but focused on handling another PR issue that Google has with all these viruses and great question from chat when is V3 entering into Force I believe beginning of next year is when we're going to start seeing V2 deprecation not positive but that's what I I recall seeing that's the plan and that's why we're starting to get the warning for what it is worth Firefox has confirmed they will not be disabling V2 Firefox has no plans to deprecate manifest version 2 and will continue to support mv2 extensions for the foreseeable future Arcus also made a statement we will keep manifest V2 for as long as it's still available in chromium we expect a drop support in June 202 but we may maintain it longer or be forced to drop support for it sooner depending on the precise nature of the changes in the code in June 2025 is the date that Google plans to completely drop V2 support fun one more important detail in terms of the flaws with the V3 model and the declarative way of doing things is there are a lot of sites that you're not going to be able to work around via JavaScript hacks something like a news site that will notice that you have an ad block running it's going to notice now and it's going to give you this wonderful screen where it might not have before that's probably the biggest problem you're going to run into because again they would previously run JavaScript to try and hack around all of the stuff now they're not now they're just blocking the URLs outright so for most situations most of the time this is going to be fine as Gorel says here if you use yock origin as an install and forget content blocker light should be fine but you will have to explicitly install it which is also why we're not getting a direct update in Chrome one more quick thing because I have a feeling this is going to be more common now that there are more extensions and more options don't use multiple ad blockers I've seen a lot of people do this where they have like three or four installed please don't do this it's so bad gor has a whole thread showing just how bad it is and like how many performance issues can occur how different websites can break as a result of it it's really bad it's really bad there's a lot of examples of people having massive performance issues having YouTube break having YouTube ad blockers fail but when they uninstall the other AD blocks and just have you block it all works gorill knows what he's doing if you're not already following him give him a follow keep an eye on these things there is no better person to cover this stuff interesting that brave has a workaround here the following extensions are no longer supported by Chrome but they can be installed in Brave click their name to download and install them it's hilarious because they won't be on the Chrome web store anymore so the solution here is to just give you a direct like install we'll see how long they're able to support that I think that's all I got how are you feeling though are you staying on Chrome or is this the push you needed to move off let me know in the comments and until next time peace nards




## WinterJS just dropped and it's faster than Bun_ - 20240315
introducing winter JS 1.0 the fastest winter CG JavaScript runtime yes we have yet another JavaScript runtime I know I just covered LRT and I know before that we were hyped about bun but the JavaScript runtime Wars are chaos and it's really interesting when these things come out and I want to dig into this one because it's the first one to go all in on the winter CG side if you're not familiar with winter CG it's an important piece to know about winter CG is an attempt at a standards group and runtime committee to agree on the things that serers side JavaScript should implement the goal of winter CG is to get all of these different run times be it node Dino cloudflare workers and worker D bun winter JS LRT by Amazon all these different things ideally when you write JavaScript on the server it will work in all of them obviously each will have their own weird specific things when I write a basic function that logs some stuff and fetches data from a server ideally none of that code is specific to one runtime and the goal with winter CG is to try and make standards for these non-browser runtimes so the code works and looks the same in all these different places so really important effort to make things like a nextjs project on versel viable because you can run some of the code on edge and some of the code on not Edge on Lambda with node and have everything interrup how you would expect and now that we have even more run times coming the effort of winter CG is even more important so naming your runtime after winter CG in order to make it very loud and clear that you're all in on the compatibility that's important someone also pointed out in chat that bun isn't part of witer CG which is very valuable and true they're building on top of things that are part of winter CG though which is the JSC JavaScript core runtime from from the webkit side of things and I know that they're somewhat involved with winter CG they're not directly part but they care so as they say here winter JS is witer CG compliant trying to follow those rules it's powered by rust and spider monkey and it's also web assembly compatible it supports server components already which is really cool to see Cloud flare mode and 150,000 requests per second although I'll point out I've heard some skepticism around that Benchmark start with their blog post winter JS 1.0 is finally here winter is an incredibly fast winter CG compatible JavaScript runtime written in Rust using the spider monkey engine to execute JavaScript and Tokyo to handle the underlying HTTP sorry I pronounced that wrong handling Tokyo to handle the underlying HTP requests and JS Event Loop got to channel that Prime Spirit winter JS runtime can also be compiled to WM and as such it's the first production grade runtime that's fully runnable in wasmer Edge so standard wasm Edge runtime which means you can run a custom JavaScript runtime inside of web assembly the layers here are insane anyways here's what we've accomplished for winter JS 1.0 Just 4 months after our first announ ment blazing fast speeds faster than bun worker D in node we'll see winter JS is now fully compatible with the winter CG spec they're also Cloud flare API compatible and they have web framework support for next including server components this is actually really cool even bun can't run next yet so interesting to see ridiculously fast winter js1 is able to handle 150,000 requests per second when executed natively and 20K requests per second when compiled to WM it's a big speed loss but being able to run it in was is pretty cool as of today witer JS can handle more requests per second than bun which is 117k worker D at 40K and note at 75k it's always fun to see worker D being really slow the value of worker D for those who don't know is that it spins up instantly so if you want to do something stupid and quick and simple and you want to not have a box running suddenly have a box running process a request and send a response worker D is great for that type of thing where you're not working for a very long time the point of worker D is that it spins up quickly not that when run for a while it performs really well so if your functions are small and shortlived worker D is still a great choice same with LRT which again I have a video all about if you're curious about what Amazon has been doing with JavaScript run times where their goal was explicitly to just make cold starts go away they wanted the startup times for LRT to be insane so lt's cold starts here in a Lambda p 0 is 40 milliseconds P1 100's like the worst case is 80 to 90 milliseconds where with node the best case is 1,500 milliseconds and the worst case is 1,700 that's a pretty sizable Gap it doesn't necessarily matter how fast your code runs if it takes 2 seconds to start running so that's why we care about these things that's why a slower run time isn't necessarily bad because if your code takes 400 milliseconds to run but 2 seconds to start that's worse than if it takes 800 milliseconds to run and 80 milliseconds to start these numbers look good but there's a lot of other numbers to consider here especially in the serverless world window CG compatibility window CG is one of the bodies responsible for defining the set of global classes and functions that need to exist in order to run workloads properly across a set of infrastructure that's one way of putting it they they specified the things that all JavaScript on the server should have since our first announcement we added support to the complete set of apis including data fetching files streams Tex encoders and cryptography apparently there's parts of crypto that aren't implemented which is why they have the stars for uh it's not fully compatible CU there's some crypto functions cool no one's using all those deep crypto functions Cloud flare Epi compatibility is an interesting thing as Cloud Flare's whole thing is S3 compatibility we wanted to make sure that most of the front-end Frameworks will work no questions asked in Winter JS because of that we had two options one was that they could create yet a new integration for each framework or they could join into an existing proposal after a deep analysis of Dino Cloud flare and fast Le adapters we realized that the strongest option was Cloud flare since it is already gotten most of the support with other API Frameworks it's probably the most used out in the wild fair so they moved ahead with the cloud API compat in order to support Cloud flare worker workloads we worked like the tongue rolling game yeah on four main aspects support for ES modules via import syntax support for node compatibility apis like async local storage via async hooks classic God async local storage if you don't know what it is it's not what it says it's a very important API for running things on the server in node chaos be happy you don't know it probably deserve his own video someday support for invocation routes via the underscore routes Json that's some Cloud flare isms for sure supports file system structure like this so you can do routing by where you put files support for cloud flares winter CG custom fetch API C yes they built their own fetch you can't override fetch on the server because no thing as fetch on the server everyone has their own implementation they also included the env. assets API again cloud phisms and it allows you to serve static assets directly via rust's super optimal static web server so you can do something like this return env. assets. fetch requests so this is if it's API then we say okay and we can add our own custom logic otherwise we bail out and use the assets that are being hosted here cool to see and after getting all of these working we were able to run almost any other web framework just by passing -- mode equals Cloud flare that's actually a cool hack since everything supports Cloud flare already just add cloudflare support to your runtime and now you're mostly good to go compatibility with existing web Frameworks thanks to the new compatibility with cloudflare workers API we now have support for the following Frameworks not just serving those static websites generated by the Frameworks but also allowing them to do serers side rendering including next including server components which as far as I know makes them one of two run times that can actually run rsc's and next right now basically just node and kind of cloud flare workers like we're running a bunch of ping stuff on cloud flare workers through versell on edge using App router and is certainly not the focus of the next team but because they support cloudflare worker apis here it makes sense they have that they also have Hano support which is one of the best ways to stop out in API in JavaScript Astro support remix support spelt Gatsby and KNX interesting putting Gatsby above n that's a statement and it's not a statement I necessarily love they even support server components which really cool it's one of the most challenging things that they achieved apparently they put a lot of work in specifically to do this that's cool aiming to have server components fully working has helped us discover that our stream implementation had some small but important differences with the spec you could have caught this typo anyways we also realized that our fetch implementation had some quirks to fix but at the end and after many sweat and sleepless nights sweaty and sleepless nights we fully got it working you can see The Hacker News demo using serers side components please note that in this demo we're not cashing the fetch on the serite so times might not be the fastest let's take a look not the fastest generous but it works everything here Snappy this is all running in client side traditional JS regardless it's pretty cool that they have a nextjs RSC project working in a runtime that's not one of the ones that that team made and they're now one small step away from moving their next front end from versell to wmer edge for way cheaper cost and full local reproducibility I'm assuming this is the thing that they sell make any app serverless yep again this is the goal of a lot of these run times it's not just make the code run fast it's make the cold starts in the deployment story and distributing these things around the world more viable and wner has been working on these things especially the WM side for a long time now so it makes sense that they were not just working on a runtime but got it pretty far along o one more thing we are prepared to run jitted JS workloads fully in the wasm space stay tuned for more updates interesting are they going after Hermes is this a static Hermes or at the very least traditional jit her Miss competitor because that makes it even more interesting this is some Community people trying to replicate their benchmarks because when you see numbers like this and Promises like this you have to approach with a little skepticism I benchmarked this using the main branch on Apple silicon Mac Mini M2 bun on a single core serves 192,000 requests per second witer JS using three cores serves 80,000 requests per second so approximately six times slower than bun I don't know where this claim is coming from this was using 64 Connections in two threads for the worker if you look at the Benchmark they describe here that they're obviously running on a machine with at least 12 cores and they're comparing that to bun and others on a single thread that's interesting and suddenly I went from excited to very skeptical also very interesting Winter's Max latencies a second and a half in buns Mac Max latencies under 8.5 milliseconds so it might theoretically resolve a lot of requests faster but any individual request might take absurdly long times and this isn't like a cold start it's not that it's spinning up the runtime is that the runtime once running doesn't always respond quickly Jared the creator of bun even replied here I haven't figured out how to compile it on Linux there a C++ compiler error when compiling the MJS system call after hanging for about 10 minutes tried using the Nyx shell and also did not succeed yeah they're all trying to just get it to compile on Linux and they're failing and when they run it on Mac if they're comparing single threaded it's not even fair and even multiple cores compared to a bun running on a single core again absurd say here they ran the benchmarks on an M3 Max laptop which the M3 Max has a lot of cores so if their Solutions multicore and everything else is single that's not a fair comparison the very least that should have been called out neither the words core nor thread appear anywhere in this post that has me a little skeptical I'm not going to lie happy I found that call out yeah I got a great reply thinking about claiming myself as the fastest JS runtime at this point yeah yeah but clearly this is still early 1.0 might have been aggressive and and uh I don't know if I can trust those benchmarks anymore I don't know what else to say about this other than uh continuing to put my money on bun I'm so excited about what Bun's working on that I actually invested because I do have a lot of Hope for what they're building and if the future is a new runtime in build chain I think Jared's going to be the one leading it but uh doesn't mean these new things aren't exciting specifically being able to run a JavaScript runtime in wum is a crazy concept that I'm actually excited to see the future of so to the winter jsds don't take this as not hyped about what you're doing take it as some healthy skepticism around my excitement for yet another really performant JavaScript run time until next time peace nerds




## Write your dang types - 20250515
so you're working on a feature in a codebase and you come across some code that is horrifying straight out of an Eldrich horror and you decide it is time to refactor except if you break it it is now your problem as you try things fall apart and you question everything there's a devil on your shoulder telling you "The moment you ship this the code is yours forever." Forever so how do we fix this we could write tests for every single thing to make sure we pass the right value to every function that's what they want you to do or you could use types yes types i know the horror the evil Microsoft coming in to ruin our code bases or are they what if every function had a simple oneline type that could tell you that you were passing the right thing what if you didn't have to write a test for every single function to make sure if you pass a number instead of a string it handles it because your code cannot pass a number instead of a string because your code is type safe the compiler tells you what is wrong when you make a change in your editor instead of waiting to see if the code runs instead of waiting to see if a test passes your editor just puts a red little squiggly underneath a red little squiggly and that's all you need




## Yes, we actually won - 20240816
[Music] hey uh I'm Theo and we we really need to talk about JavaScript what are you doing here L uh never mind I gotta go I'm back from Defcon and I am so happy I went what a crazy event huge shout out to Pirate software for convincing me and a bunch of my crew to go this year I never would have otherwise and if it wasn't for him and Luke lefron from lus Tech tips I probably wouldn't have gone this year either but they both wanted to go I was super interested too and boy do I have a story to tell you guys this was one of the coolest events I've been to you should definitely go next year by the way Link in the description if you want to follow def Conan 10 next year one more thing before we go further though a lot of our time was spent solving puzzles as in we were sitting in a hotel room solving puzzles while the event was going on one of those puzzles is a puzzle I somehow was the only one to solve and I have the whole story already recorded ready to go so if you want to see that make sure you're subscribed it's coming out tomorrow and if you're seeing this video over a day after it came out go check my channel if you want to learn more about that puzzle anyways let's talk about our actual Defcon experience first let's talk about my rooming situation because it was really cool if somehow you guys don't already know lowle learning you should fix that he's a fantastic YouTuber one of my favorites I watched almost all his videos good friend of the channel as well since we were doing Defcon we decided to room together and the rooming was him me my CTO Mark and Luke from LT it was quite the crew we had a ton of fun and the place we got it was so nice this is just like the shared living room we had two separate giant bedrooms with giant bathrooms that were like the size of my old apartment in SF there's another couch on the side here A whole fully stocked kitchen it was awesome and it's a shame we spent almost no time in here at all the only person who actually spent time in here was Luke because he had to film the WAN show from here using a bunch of my equipment on Friday which was also just hilarious that he didn't bring enough equipment so I lent him like my mic and a bunch of stuff and itend up going fine awesome they could do that but this hotel was awesome and I was so excited to use it and it's sad that we didn't because we ended up spending most of our time just sitting in a tiny little hotel room that was maybe like 350 ft with eight people solving puzzles I need to emphasize just how tiny this hotel room was there was maybe I was sitting on the couch here this is Mark in Prime god mode programming out a solution to one of the puzzles and there was maybe 3 ft behind me and that was the whole room and we regularly had eight plus people in here it was like me Prime Ed Mark Luke four people who would prefer to stay mostly Anonymous from Thor's friend group obviously Thor was there as well and we were just grinding these 13 puzzles non-stop again if you want to learn more about those puzzles make sure you're subbed I have a video coming out all about those tomorrow and we were in this room until like 6:00 a.m. most nights just doing puzzles even though the conference was going on and that was probably the funniest part that there was this huge hacker conference but most of our experience was solving puzzles in a hotel room a 20-minute Uber away from the actual con that doesn't mean we weren't part of the conf conf here and there we definitely got involved one of the contests that was actually really cool was one being hosted by one of the people from this crew called crash and compile it was a drinking programming contest to enter you had to do a pre-qualifier where you hit an endpoint it would give you a puzzle and you have to solve it and post with the new puzzle or with the solution then it would respond with a new one and you had to write a program that would hit this HTTP endpoint parse the problem out of it respond with the solution parse the next problem solve for three problems I learned about this challenge at 2:50 p.m. on Friday qualifiers ended at 300 p.m. on Friday I was sad Prime and low level had entered and qualified but we didn't because we didn't know about the deadline then I heard the deadline got extended we didn't know about it and I was hyped so Mark and I sat down at 5:30 p.m. right on the couch that I'm sitting on here and started solving the problem we had a solution we submitted it it started running and then it started getting Json parsing errors because it turned out the cut off was 6 p.m. for the extension and we were submitting at 559 p.m. so we didn't qualify because of that and I was sad it was our fault for not knowing I'm not going to blame anyone for that but ourselves but I would have absolutely been able to qualify for the crash and compile contest and I'm sad I didn't but I'm not that sad because Prime and Ed competed and they came in last place and that was much more entertaining than anything I could have done there anyways that was one of the three contests I tried to partake in and sadly that was the one that I lost the hardest one more cute photo there's Prime and Thor in their Prime modes hacking away and and in and out which we totally didn't have like 3 days in a row that absolutely didn't happen what an absurd accusation obviously I met a bunch of awesome people here's John Hammond we met when we were watching Prime doing the crashing compile thing which was very entertaining I need to collab with John Moore he's awesome and I wish we had more time to chat also he outdid me on the hair and I'm still mad about it like I'm the tech YouTuber with good hair look at that look at the perfect form not fair also Vegas was ruining my hair and my skin you can tell but yeah it was great to meet John finally we've been at like four conferences together and just never could meet and finally we got to Luke and I both tried to get hacked at Defcon we both brought Android phones with old versions of Android and connected to every wireless hotspot we could just to see if we could intentionally get hacked on these old Android phones and we had no luck we tried our hardest we connected to all the access points we could and I just failed I knew that Defcon was the hacker conference and I was so scared going in locking down my phone and everything and then I was unable to get hacked when I actually tried so if you have this deeply set fear of Defcon because you think you're going to get hacked there you're going to like show up with no phone or whatever you don't need to worry no one's burning a zero day at Defcon nobody's going to use a hack that's not already public information that hasn't been passed out of your phone so as long as you're running the most up-to-date version of Android or iOS you're probably going to be fine and even if you connect to random hotspots I had no issues and I was trying to get hacked so yeah that said someone did get hacked at Defcon not because of them being at Defcon or even really them getting hacked directly less Tech tips had their Twitter get hacked while Luke was at Defcon and you should definitely watch The W show on Friday because I'm sure they're going to talk a lot about that and yeah that was a fun one anyways speaking of Luke we should talk about hack Fortress It's A Team Fortress 2 plus hacking contest where both happen at the same time your team is composed of two parts one part of the team is TF2 players and the other part is hackers and the goal of the game is to get the most points in TF2 and also solve the most hacking puzzles on top of that is a modded version of the game so if the hackers solve a puzzle they get points that they can apply to your team to like give you Buffs give you like the ability to kill people faster give you automatic crits heal you stuff like that and if you do well on the TF2 side you're able to buy hints for the hackers this seemed like a really good opportunity for us because I used to play a lot of TF2 and from what I had heard the skill level of the play in this contest was relatively low because it was hackers playing TF2 Luke and I were so set to go because Luke and I have both played a lot of TF2 but you might notice something notice these headsets notice that they're pretty cheap gamer headsets they had hardcore themed this contest to be red versus blue which was awesome it looked great except the red team had red gear and the blue team had blue gear and if you know anything in the gaming space you know the red stuff tends to be the cheap stuff and the blue stuff tends to be the less cheap stuff these headsets could not have cost more than $3 each and the mice we had were $5 Mice from like the early 2010s with terrible lasers where if you would lift the mouse up like straight up like over an inch it would still somewhat move so if you play TF2 or any shooter even somewhat decently you can't whip you can't lift you can't you can't play so we couldn't aim we couldn't turn we couldn't do anything because of this the other team had $100 razor mice not not even kind of fair thankfully afterwards they recognized that and they swapped gear around to be a bit more fair but we just straight up couldn't aim I had to play Pyro and I don't play Pyro but if you know anything about TF2 you know that pyro can be played with a steering wheel because aim doesn't matter so yeah we lost this one and I was heartbroken because both Luke and I are good TF2 players we lost to a bunch of hackers and they weren't even hacking so I felt terrible about that loss so we had to win something and boy did we win gold bug as I mentioned there are 14 puzzles 13 core puzzles and a 14th meta puzzle music box drove us mad you got 100 points for each puzzle you solved psychoholic was the team and we solved every puzzle except for music and meta which put us at 1,200 points so we did end up winning this we were working on these puzzles basically around the clock for the whole three days of the event and as crazy as it was we did it and I was so proud if you're not already following me on LinkedIn I'm T3 G there you should give me a follow I'm stuck posting on LinkedIn more nowadays but I posted the photo of us winning yes the YouTubers won the hacker contest I was so proud of that I was so genuinely proud that we could somehow as the YouTube guys succeed in this insane challenge one of the puzzles and again um spoiler warning for those who actually want to go and try these after the fact not expecting many will but in case you are one of the people that wants to I don't want to take that from you uh etiquette this is the first puzzle where Prime really God moded so we have this blurb of text that is somebody's grandmother gave them a book The only thing in here that's particularly notable and credit to mark for noticing this was yellow Doge eared Pages this is important because when you look at the PDF it has a bunch of lines drawn on it and we had no idea what to do with those our first assumption once we realized they were dog geared is that we'd have to fold based on the lines and see what letter it pointed at but Prime was already trying to like decode this and figure out how it worked so he wrote a script in Python that went through each page and grabbed the lines and he made a graphic that showed how all of the lines like appeared and we got nothing out of it someone had the theory that when you folded all the pages and closed the book it would say the word on the side but there's 444 pages so that just didn't seem possible I was 100% convinced the solution was not folding all 444 Pages because it made no sense at all eventually Prime updated a script to do that to fold all the pages keep track of the top and bottom where like the fold of each one ended and then draw those out and it did spell a word and that ended up being the answer so huge shout out to Prime for actually figuring out some scripted way to detect the lines fold the pages and then show it because we were about to literally print out all 444 pages and fold it by hand we were so close to doing that we were the only ones who solved this one for a while but gold bug ended up giving a hint did anybody else end up solving etiquette yeah two other teams ended up solving it to be fair they give a pretty big hint for it here where they show that like this is what you have to do yeah chaos huge shout out to Prime for coding his way through that one he killed it with the code stuff most of my scripts didn't end up being useful but they okay my scripts were useful not because they solved the problem but because they so well didn't solve the problem that it was clear the path we were going was the wrong way super fun loved this Puzzle Challenge it was so fun having a bunch of programmers YouTubers and hackers collaborating in this way and the fact that we could solve it before even having that hint so cool I loved this fantastic time fantastic challenges specifically I want to shout out Pascal for doing Chess music box and also helping me with hints for music box after the puzzles were already done tons more context in my full video about it coming soon check that out one last shout out to crypto Village for making this all possible you guys killed it this year this particular puzzle was super fun this one was multi-arts it started with uh cir Mystique here and this was all different animals with different things on them if I recall it was order the animals alphabetically and then get the first letter for what each of them is holding and it spelled out words what it ended up spelling out was oral page tune three words 12 characters cool then the next one cage show pity this one I I feel so bad for Thor still this was a crazy figure out what what number each of the bottles represents and then decode it so that you had words I'm not going to do justice to this one so this ended up being insane Thor is a math God so he was able to solve the math part of this one relatively quick but the answer ended up being like what was it R left drop last or something Thor spent a bunch of time on the math got the rot left drop last thing and they had no idea what to do with that because when you get an output for some like this usually you can't get more than one output from here you just get the thing it says but as Gan just mentioned in chat they had the answer for 14 hours but they didn't know how to read it I don't even understand what the solution ended up being but I think it was they literally just rotated this and then read the answer vertically and it ended up being uh for that one it was cage show pity the next one wasn't too bad it was the Cur vial axe this one was really interesting the flag was a country obviously and the thing here was a bad translation of a phrase from that Nation so in Japan Hedgehog gets translated effectively to pin rodent or is it like pin rat or something so we had to figure out that this meant Hedgehog and then do that for all of these AI generated pictures and then from there we got another word which was or another three words which is cure VI ax and then we got the swords oh boy the swords this one had a lot of interesting hints that confused us and this one is the reason I'm talking about this I didn't think it's going to be you had another video ning out of a gold bug but here we are it was really fun and took over my life for 4 days so here we had 12 daring Swordsmen across Pages discovered but nine should their number be who among these Valiant Souls is a veritable villain a masquerading menace can you discern the deception detect the duplicity witness the Wonder and wield your wits match swallower with swallowed and sus out the imposters so we have nine swords here all AI generated with threel textt on them and we had something that was 12 there was three words for each of these parts of the URL and we had done that four times now so that's 3 6 9 12 so we had to figure out how to combine these swords with those words to have 12 there's a couple other helpful hints in here match swallower with swallowed detect the duplicity and if we check the source for the page they had a comment at the bottom here um the hungriest swordsman the pickiest eater we were going mad we thought we would take the first letter of the words cuz we had like oral page to so take the O the p and the T and combine those with the things here and whichever ones didn't combine would have to be the ones that were wrong that didn't work we did know though that there had to be three remaining words out of the 12 and that would be the answer so I wrote some more scripts let me see if I can find these ones quick I grabbed all of The Swordsman all of the words I wrote a function to grab every permutation of those I generated all of the permutations for those to figure out also there was one last thing on the page we had this here this random code this we pretty quickly figured out what it had to be because this is hex up to 12 0 through a would be 10 and B would be 11 that's 12 so if we were to arrange three words in order and take the seventh character put that there take the fourth character put that there first or second character it's it's not seventh it's eighth because zero index you get the idea do that for all the letters this should spit something out so I took every combination of words split it printed it and then would check like the three chunks this was like the first word the second word and the third word and I would check if these are a valid output or not and I would check that by taking every single valid Scrabble word that's four characters long and checking that way this did not work so the way I had this set up is I would run this script and it would spit out all of the things where two of the words were correct were grammatically real words according to Scrabble rules so here we see Lewis and N are words TDCI isn't and I did this for all of them despite having 17,000 permutations or so I was only able to get these this many that were close and they weren't that close but I kept staring at the page and thinking about the words and I knew one of the words specifically was cage and I was overthinking this because cage and Rib combine to rib cage maybe we need to combine the full words instead of just the first letter and the sword I you not within seconds of me saying that with G next to me he just goes through and lists all of the words like that he just his brain works that way he could just look at this list of words look at these three-letter things here and just combine them it was insane I've never seen somebody's brain who just works that way let me find the list nice so this is a message where I was just keeping track of the things G was saying I still can't believe he just like locked in for that as hard as he did and he was just reading off the words like he figured out oral plus bit was orbital he figured out Page Plus ass was passage tune plus Rib was Tribune and remember the hint earlier about the swallowing of the swords that's what had he had figured out is the swallower and swallowed you actually had to put the word here the sword inside of the other word I don't know how he like literally did this in like 45 seconds some people's brains just are different and gns is insane so he was able to walk in and get this within under a minute we figured out the remaining words were pity help and sail if you saw I had those commented out in my code I go back up here yeah I was putting them all in the code here but uh didn't end up mattering because he figured it out too fast so you it was pity help and sale so I did this I ran it it didn't have correct words still and that's when I made the change I had there where I had the append file sure I'll put that there again run the script one more time and now we had all of these did not seem right also I don't know how I got N I don't know what I did wrong there but uh someone else was also scripting it and they ended up getting it this ended up being the actual outputs most of these were nonsense but this one Philip asley it's not three words like we were used to but it's not total nonsense Philip asley ended up being correct for that one I still don't know what the answer was to this one but they figured it out in seconds and got the final answer from here H craziness if you liked this breakdown please watch the video I'm putting out tomorrow you're going to like that even more I go really deep on the puzzle that drove me insane I just wanted to Showcase how God mode gird went or I just want to showcase how God mode G went for this one because he killed it it wouldn't be defc con if we didn't bring up the badge this thing's insane it was one of the first ever products using the new Raspberry p it came out the same day as Defcon by the way they released the new raspberry pie and it was inside of this all the same day super super cool it has a full Game Boy emulator in it and they made a Defcon themed game that's in it and there was also a bunch of drama about this badge I'm not going to go into the drama because I don't want to cover drama from Defcon I just want to cover the cool parts of Defcon but this was really cool the fact they had an actual like battery enclosed LEDs speakers a full-on like handheld device that just also happened to be your badge you also could transmit things between the badges with RFID and like send updates and programs between each other and it was like insane this is just a cool device that happened to also be our badge for Defcon wanted to include that because I thought it was awesome they tend to run out of these so the only way to guarantee yourself one was to pre-order your badge ahead of time I pre-ordered because I wanted to have a ticket ready to go yeah as you can tell Defcon was kind of crazy I'm so happy I went and if you guys want to rot in Vegas sweating your asses off with us next year you should go as well until next time peace nerds




## You Don’t Need Kubernetes - 20221020
[Music] those companies are moving slower and they're choosing to move slower if we are successful at ping I'll have to hire someone like primagen to come in and at this point you're choosing to increase your costs significantly most developers don't realize how expensive their work is [Music] do you really need kubernetes I don't mean that in like a harmful or negative type of way I mean seriously do you I find that a lot of companies are using kubernetes because they think they have a complex infrastructure problem and often they don't they have a scalability problem and by introducing kubernetes they're introducing infrastructure that has its own complicated rollouts architecture and things to consider it is a great solution for a lot of problems and if you're trying to manage into play a bunch of servers at once kubernetes is hard to beat I want to be clear here I'm not saying kubernetes is bad I'm saying the mindset of every problem problem is a kubernetes problem is harmful I think Lambda and the magic of serverless function deployments through things like AWS as well as edge deployments with cloudflare and all of these new options appearing like Google Cloud run allow us to think about our code less as an infrastructure problem and more as a code and piping problem kubernetes introduces a lot of complex infrastructure to consider and think about as you're building your applications and I don't think everyone needs to be considering those things honestly and this is one of the most common problems I see is a bunch of Engineers come from a fan company like they used to work at Facebook and now they're making a startup so they assume because everything they've ever built is in this crazy like kubernetes cluster that they're going to have to keep doing that at their tiny little startup and that's when I see these four-person companies with no customers starting to hire infra engineers and like developer experience experts and teams to get them out of the hell they've created themselves by assuming they need to own all of these things so a message I see a lot in my chat is should I learn kubernetes or how do I learn kubernetes I want to be an infra wizard I want this to be the thing I do I want to go understand infrastructure or even simpler like hey I'm building a side project how do I set up kubernetes for it you probably don't need kubernetes for your side project but you might need kubernetes for complex like structure problems with your infrastructure if you have infrastructure but what I try to recommend and push for is that you avoid adding infrastructure as much as you can the less infrastructure the easier it is to manage your application the easier it is to build iterate and find product Market fit with the things that you're building kubernetes is another one of those tools that by Design is meant to slow you down that is good if the problems you have need you to slow down and think about them but if you're just taking things from a database and trying to render them on the client kubernetes is making that way more complex than it needs to be that's just the reality of how infrastructure Technologies work it's hard kubernetes is one of those things where you don't set it up and it's done kubernetes is one of those those things that is now part of your business you have to think about it you have to build around it you have to plan for it and if you don't have a plan yet and you don't have the money to build that plan you should be building around not needing kubernetes there are very few problems that can't be shaped as a serverless problem with enough effort there's a lot that can't like web sockets those are very hard to run in a Lambda because you need a persistent stateful connection running on a server I think a lot of those things can be outsourced to other companies I think that Solutions like Pusher ably uh pupnob are all great we also have new ones like live blocks and hop appearing too those allow you to not be thinking about infrastructure and not needing to bring in kubernetes what about your data how do I scale my database please don't put your database in kubernetes unless you really know what you're doing and even then be very careful with it databases are a scary thing to put under automatic whatever because automatic mean stuff is being created and deleted you might accidentally have the wrong thing get deleted and then you lose a database that hasn't replicated yet kubernetes is a scary place to put your database so with all that what's left I'm a big company with a bunch of infrastructure that really wants a simple like codified way of deploying that infrastructure sure kubernetes in terraform are good solutions for that but the vast majority of problems are not terraformer kubernetes problems they are software problems that we can solve in other ways and generally speaking if you don't have a team that is deep in kubernetes and deep in these things yet you should try to avoid them as much as you can generally speaking kubernetes should be the last thing you reach for rather than the first it is scary it is one of those solutions that comes with a lot of debt that you are eating and if that doesn't provide a solution to a harder problem for you you should probably pay someone else for their solution if you need a database that scales check out Planet scale they run the kubernetes for you if you need websockets at scale check out Pusher they have the kubernetes for you if you need off that scales check out anything that allows you to play it on serverless functions and if you don't want to own it check out all of the third party authentication solutions that scale totally fine as well all of the things that I see people reaching for kubernetes for so like automatically spin up all of these boxes for all of these things half of them are things you should probably be paying someone else for half of them are things a Lambda could do maybe there's one or two it's like okay fine you should spin up a server for that but it ends up being like one tiny box that doesn't even need kubernetes often it just needs a single like Docker file thrown on an RDS instance because it's used to run cron jobs generally this is I want to be clear this is very general if you're disagreeing in the comments adamantly it's because you're in that small group solving these other problems there are great use cases for kubernetes I think we need to stop turning everything into a use case for kubernetes though and on top of that let the experts build and pay them for their work people are saying Pusher is expensive you know what's more expensive hiring four Engineers to manage the clusters of your like kubernetes deployments trying to keep your websockets up and synchronizing State between each other that is very expensive each of those engine years is going to be at least 200 000 a year and until your business is spending enough on Pusher to compete with that you should be paying Pusher to do that because the cost of Engineers who know how to use kubernetes and know how to deploy these things is significantly higher than paying someone else who already hired those Engineers to use their services I see somebody in chat mentioning that companies are allergic to vendors so they use kubernetes instead those companies are moving slower and they're choosing to move slower and spend more money to move at all one of the advantages more including people have is they don't have to do that they we don't have those strongly held beliefs that everything should be on our VPS everything should be hosted by our engineers and our kubernetes clusters we being companies that aren't one of the big five like anybody who isn't Facebook Amazon Apple Google or Microsoft we should not be playing by the same rules they hold themselves to because those Services they have infinite money effectively and what they're doing is survivable because of their infinite money we don't but what we do have is more knowledge more flexibility more agility and that's how we see these smaller companies challenging these monoliths because they reject the belief that since Google used kubernetes we have to as well it's more since Google is using kubernetes we can move faster than them because they can never move faster than their infrastructure allows we can do whatever we want that is powerful that is what makes startups successful is the the ability to move in ways bigger companies cannot that's what makes anything other than bigger companies powerful and hell that's what makes small teams at big companies powerful too when I was at twitch we ran our own full stack for our marathon stuff because the stack at twitch did not work well for what we were building eventually we flattened that into the twitch stack what's the Amazon acquisition went through and everybody's doing AWS but for a long time we went out of our way to run our own parallel Stacks like a mini startup within twitch I think that's a huge part of why we could move so fast and build the crazy things that we built I very strongly believe that smaller teams that own their ways of doing things that aren't being told you have to use something as big and heavy as kubernetes you can build in the way that makes you move the fastest it'll let you find product Market fit much faster and much more securely if you invest hundreds of thousands of dollars in kubernetes infrastructure and it turns out you built the wrong product even if you're at Google size your team can't easily move to the right product because you've invested so heavily in this particular thing you've built and that sunk cost sucks and the more you can reduce it as you find product Market fit the better if eventually you're at a point where the product's making so much money where all of the like cost is going to these third-party vendors because you're not using kubernetes locally like let's say you're spending two million dollars a year on third-party infrastructure and if you hosted it yourself it would be a hundred thousand dollars a year cool that gives you 1.8 million to spend on Engineers to lower that cost and at that point you do it but very very few companies are at that point where they have two million dollars plus a year of spend on third-party services without way too early moving things over to something like kubernetes I say this a lot too if we are successful at ping I'll have to hire someone like primagen to come in and unscrew all of our bad slow serverless function JavaScript code and make that something more performant more scalable just generally cheaper but the cost there isn't the infrastructure the cost there is primagen hiring primogen right now would double the company's monthly spend and that's not realistic for us that's that hopefully wouldn't be realistic for most companies is that huge cost until you are spending enough on your infrastructure to justify that that crossing point is rare and I feel like a lot of Engineers don't see it because they don't think in that way I'm realizing now we do have the diagram which means I have to hide the overlays tap into Excalibur we're going to draw the Company Success curve and here is a company succeeding I just realized that's doing the hard stops let's switch that to be the curves yep here comes the hockey stick as a bunch of people are saying in chat correct here is a random theoretical company trajectory this is a company that's like growing and then suddenly is growing exponentially you succeed you're doing okay doing better better suddenly it starts to ramp up and it goes nuts here there's a point here where let's say so this green line This is the money coming in let's draw cost so this red line is how much our service costs us to run we'll say that the Baseline is cheaper but like it starts here it's gonna be more expensive but as users go up the cost goes up significantly we'll call this the here I have a good name for this we'll call this the Firebase curve where it starts out reasonable we can even start lower if we want to where it starts because their free tier is so generous and what happens here is as our user base grows and our income grows the cost grows too fast so I'm going to put another line in here and we're going to call this line the line of prime this line is how much money primogen costs you'll notice it takes a while to get to the point where this Firebase curve costs as much as a primogen at which point and I'll copy paste this below the expectation would be you hire Prime he forces you to can I delete like points in this easily enough I don't know if that's an option I can maybe I make new points I probably can't whatever we'll say it goes like this and then when primagen joins you're able to lower your infrastructure costs significantly in order to turn this profit into a bigger profit the specific point I'm trying to make here is curve this spend when your income is high enough and your like users coming in are high enough that not hiring this person makes it too expensive because right when you hire Prime I should probably actually document this part your costs actually go up a whole bunch so we'll call this the the point of prime when you hire primogen and at this point you're choosing to increase your costs significantly knowing that if this was a good hire it will go down significantly ideally pretty soon technically actually I should be clear about this you you can't go lower than the point of prime you can never beat out how much like he's costing how much money you're paying him so your actual like cost is going to go down but it can't go below where he is you've set a new bar when you're not using a primogene you don't have a super like infrastructure and optimized Focus engineer your Baseline can Flex a lot lower firebase's free tier is absurd when you hire people like this you're increasing the amount of money your company is going to spend every month guaranteed you're raising this floor up if by raising that floor you can lower the ceiling it's worth it if the time you're spending is closer to the ceiling than it is to the floor when you hire someone like Prime you are reducing how much spend you theoretically can do but you're increasing how much spend you absolutely have to do and those increases suck for your business and if you're trying to build a sustainable business you have to be very careful about when you make those decisions the problem that I see a lot of Engineers running into is they're not thinking in terms of business and when they are they're thinking of their labor as free most developers don't realize how expensive their work is day to day and they'll think oh but I've set up 15 kubernetes deployments it won't be that much work I'll go set it up it'll take me a few hours but then you're dealing with it for five hours a week every week and that's productivity time I'm losing as your boss that's context shifting that you're doing all the time that ends up making it closer to 10 to 12 hours of productivity I'm losing every week from you a very expensive engineer now focus on this deployment so it's so important to recognize your own bias of but this thing would be simple for me to go do quick and recognize for you and people like you sure but you and people like you are expensive and you have to be responsible when you're running a business yeah this content is important and I want to talk more about like Tech decisions not just as like which Technologies I like so much as how these things affect your businesses the things you're building and how they get to product Market fit and succeed those are the conversations that I don't think we have enough in the tech space we're thinking too much about what the coolest and most fun stuff is and what makes us proud of our work is engine Engineers not about how the work we do as Engineers brings value and delivers it and I want to be more considerate of those things the prolification of third-party services has allowed us to build things faster in a more agile way in fine product Market fit faster but you do have to be considerate of how expensive like those Services get and make sure you find the right point to hire engineers and move you off of those things that all said that point is further along than you probably think this is gonna suck to stitch up you probably should have planned this rant ahead a bit better shout out to limit and Des for all the hard work and editing these longer form videos as well as Mir who's been killing it on the shorts lately I don't give you all enough love you guys are working really hard to make this channel viable appreciate you guys immensely anyways thank you so much for watching this video make sure you like And subscribe if you have not already and leave a comment let me know you made it this far in the video super appreciate all of you guys especially if you're here for the more businessy content although I click baited you with the kubernetes I know that it's the only way you're ever going to watch my thank you




## You Might Be Using Typescript Wrong... - 20220616
the only thing i'm more tired of than bad javascript is worse typescript and honestly seeing some of the typescript y'all have shown me i understand why you don't think you like it if you're writing hundreds of type definitions all over your codebase and asserting inputs and outputs everywhere for everything you do then most of what you're writing is typescript it's not functionality if you feel like typescript is more types and less code that actually matters you're almost certainly using typescript wrong and sadly i think a lot of y'all are so this is going to be a little rant about why you might be using typescript wrong and how to use it a bit better we're talking about type inference versus explicit typing so a common problem i see in the typescript world and with people using typescript wrong is the desire to make a bunch of files like you have a folder source slash user and in there you have source slash user like index source slash user slash component or slash user slash api sorry slash user slash types dot ts maybe even d.t.s and then you go and you put each of these things in each of these sections you have the index that exports everything the component that defines the ui the api which is the calls you make and the types where all the types that these things use are i hate everything about this this is bad don't do this this is why you hate typescript you're using it wrong you're architecting things like we're still in java land like it's like 2004. every part of your code doesn't need a file you're solving problems you're not architecting mvc anymore you're trying to make a pattern for the sake of it when you do this and it's very common that i see this so also components should probably be tsx so this is common and also really bad probably do it instead you have a source slash things or whatever user dot tsx or even source slash user index dsx i don't care i really don't care i think people care too much about file names but what's more important is they are breaking things up for the sake of it that's a little more readable so you might have a source user tsx i'm going to rename this file to tsx so that the compiler doesn't pitch at me when i do csx code in it cool so in here we'll start with what this is which is the thing you want to render const user component and here's probably where i i might do some typescript we won't even initially we'll just do empty return div user cool now we're exporting this component user component cool so we have our user component we probably want to get some data for this component so let's do that and export are we only exporting const use user data equals we'll react query it uh use query i'll just go npm install so we can do this fully type safe now it should see cool use query we'll give this user query i think they require an array for this now might be the alpha but i'll get ahead of that and then this return fetch api user.json or async i don't need to do that can you just return the promise i forgot about that good enough for me cool so now we uh yeah json should exist there we go cool so now we have our thing that fetches the user data you'll notice we probably need an input probably need an id right here so here is where we start doing typescript up until this point no typescript has been written we have just written javascript but in order to use this we need to start doing some typescript skip those above here because technically this happens and we're going to use this hook in here so where do we have to add typescript for this to work the first thing is we need an input so we need like user id here for this fetch so user id string we have now defined our first typescript it is right here colon string which makes sure now when we try to use user data that we give it a string so now we can go use this here well not that way const data equals use user data and we can pass it something because it needs a string where we're going to get that string we're probably going to get it from uh we're probably going to get this uh data from whatever mounts this component we have a couple places we can put that i am still a fan of react.c i know that not a lot of people are nowadays i think it's fine no i thought i turned out emmett forever dot fc and this user id string and now we know here we have user id and we could pass that here now in order for somebody to use this component they have to pass a user id and then that same user id with the same type gets passed down to here we wrote two types and i'll agree it's a little annoying way to put that in two places but even without that we would still have to put this part in two places well technically we have it here too how bad is this but here is the important part now though data comes back as any because we're not typing this here so here is where before what what we see with the types file happens somebody would go in that types file and make a really big type user api response equals and we're still going to kind of want to do this here and this will have like an id string name string email string and we will put here as this and now when i hover over data here we get back user api response are undefined this is inference we didn't have to put here data colon user api response we didn't have to put this in a whole bunch of places putting this here is fine because that is what it's going to be but the important detail here is that the use query is returning something that we now know the type of we're lying kind of about it but we're pretty certain we know the type of this here and as such we can infer from here to here that this type is correct inference is the process of taking a type that exists in one place and effectively currying it to another place just by having it exist in one place as you consume it so rather than redefining the type every layer that you have that data you define it in one place and then access it further and further away but as long as you're not breaking that contract by binding it some other way or leaving typescript it is like much more correct because now if i change this in one place if i change let's say i'm rendering i'll say if if no data return div loading it might be no data because of an error or some other thing like you should put a loadings check and an error check too but we're going to do the simple solution and we'll do that instead cool now we're returning data.name let's say we stopped getting name here that dies if we were to instead of returning this promise here return id hello name world this passes because it's inferring off of the thing we defined here that's the other part of inference inference doesn't have to come from a type that you defined inference can come from a type that exists because of the thing that exists like if i do const x equals four typescript can infer that x is four so when i use x in here it still knows that x is a number and that number is 4 specifically because it's bound once as a constant here it knows that id is a string and name is a string because that's what we gave it here so when i hover here we see id and name our string and you have to do any type bindings or anything else here so how do we combine these things and have deeper inference we could do or trpc we'll go on that rant in a minute but we're going to use one part of trpc first we're going to use one of my favorite parts zod so pmpm install i think it just installs odd cool so now we have zod for those that don't know zod is a validator which means that it is used to validate the data is in the shape that you expect it to be in the general goal is you pass it an object that has things like strings numbers whatever and then validate that like the numbers aren't too big or too small that the strings are within your expected length those types of things uh find a quick example here my schema is z dot string you parse tuna this throws an error because 12 is not a string it's a really nice way to validate at runtime that something is the shape you expect the other cool thing zod does is inference so let's say we want to be sure that the api response we got here is the correct shape const uh user i'll do okay user validator equals z dot object and this will have an id which is a z dot string that's min 5 characters.max 10 and emails z.string.email name is z dot string and i can say that this is dot optional so sure cool i have to make that a function call now let's use this in here const res equals that so now we have this json blob response as long as it is valid json we have that we could do something with it though oh co-pilot i think it's dot parse yeah cool and now if this doesn't match the expectations here it throws an error and if it does then we get back data that has the correct type definition based on what we put in here there's no type defining here at all there is no typedef i'll just go delete this because it's not being used anymore there is no type definition in this file right now and this is fully type safe joy has a terrible type story it's joy yup and zod all do the same thing in runtime but zod has the best type safe and typescript story by far and some of the best syntax for doing this too like we are conforming on zod as our validator like as an industry right now if you're not using it you should have a good reason for not using it and if you do have a good reason tell me about it so we can get it fixed inside the crater column is really cool and zod is dope the other thing you could do like let's say we want to consume this type somewhere else without having to consume here zod has a really dope inference feature built in type user type equals z dot in autocompleted with copilot z.infer lets you pass the type of a validator and here is email string or undefined because it's optional id string name string magic so here we have an api that we might not own a validator to guarantee the data comes back in the right shape and throw a specific error if it doesn't and a type typesafe result that we can now safely consume here like let's say i change this from name to username that throws an error because the type here is defined here when we parse the result gets inferred to this data and then that comes through here too that is what inference is inference is when the types aren't a thing you're writing the types are the thing that happens because of some other source of truth that is the original type in this case that source of truth is the validator and the validator carries the type all the way up how do you catch the error data error if error return div oh no there was an error well you can also do why is that mad no because this might not be we don't know the type of this it's unknown yeah we don't know the error type you could put if you know it's going to be a mess or something you put it there you also have the ability in uh react query you can pass options so you have on error error console.error oh no s something went wrong error and now when an error happens this will get hit and also in the response from react query you have an error object that gets returned if you hit an error and data will stay undefined does this help clarify the original question of what it what is type inference and give a better idea of why type inference is so powerful thank you all so much for subscribing we just broke 10 000 subs that said less than half of you are subscribed so make sure you hit that red button below if you haven't already like the video and share it with some friends also please join our discord we take questions and have fun conversations every day all about topics just like what you're hearing about here i think there's a lot to learn and some really cool stuff that you can get out of here too if you're using typescript wrong or you have any friends or co-workers who are using typescript wrong please send them this video if you are that co-worker and somebody sent you this video don't hold them too accountable don't be too mad at them for it they're just trying to help please stop using typescript wrong i really hope this rant helps thank you again peace out




## You Probably Shouldn't Use React.memo() - 20231106
react is slow well kind of there's a lot of nuance to this conversation that I find gets missed pretty often and react has a lot of pieces baked in to help it perform better one of those pieces is react memo which allows you to prevent a component or component tree from updating when it doesn't need to however react. memo is one of the most misunderstood pieces of react and I've honestly seen people use it incorrectly more than correctly our good friend TK dodo mostly known for his contributions to react query as well as his incredible blog post series about react query titled practical react query he wrote an article all about how people use react noo incorrectly and how to think about it a little bit better and I was really excited when I saw this existed and wanted to read it with y'all today so let's take a look Dominic TK Doo absolute goat if you're not already following him on Twitter you should fix that before you even continue watching this video because he's a legend he's making some of the most useful open source contributions in react as well as some of the best resources we can rely on as react developers so definitely check him out if you haven't already his whole blog's incredible in this post is no exception so nice simple quick uphill battle of memoization there's lots of good content out there already about what you should do before you reach for react. memo Dan's post before you Memo from Dan abramof if you're not already familiar on overreacted as well as Kent's simple tricked optimize renders article both these are incredible I've read both of these but this is a very different angle the idea is to let components composition solve the problem for you either by moving a state down or lifting content up this is brilliant because component composition is react's natural mental model as Dan points out this will also work well with server components which are now reality what's missing for most of the Articles I've read is the why yes composition is great but what's the problem with using react. memo why isn't it as good as a first choice so here's my take on it memo is too easy to break to recap when react renders a component tree it will do so top down for all children once a render has started there is no way for us to stop it mostly that's a good thing because renders make sure that we see a correct reflection of our state on the screen also renders are usually fast then of course there are those edge cases where they aren't we all have some components that don't render as fast as we wish wish they could for some reason we can't easily change luckily react can still abort renders and it will do so if it sees the same thing that's what makes techniques like lifting content up work in the first place so in this case we moved the hello world and the expensive tree render to be past as children here and if children is always the exact same reference react can Short Circuit the render even if color changes the expensive tree will not render the benefit here since this is mounted above is when this state changes let's say this changes constantly like every frame or so this div and this input will have to render but the children that are being passed in don't which is really important because with stuff like react server components the children could be serialized HTML and that just being passed through and guaranteed to not be touched is really really nice so moving things that don't change a lot outside of the things that change a lot ideally passing them through tends to be the best solution a lot of the time the alternative solution would be to keep rendering everything from within the same component but slap a react memo around the expensive tree so we put it in here we have this expensive component which isn't that expensive but for the sake of argument pretend it is and then expensive tree which is react. memo around this if we wrap a component with react. memo react will skip rendering that component and its children if its props are unchanged this will certainly achieve the same result as changing the component composition but it's a lot easier to break in the future when a component is memorized react will compare each prop with object.is if they haven't changed rendering can be skipped this works fine in our current example because our component has no props and it will also work if the props are primitive values like numbers and strings but as soon as get into functions objects and arrays being passed it can get rough like this example where we're passing a style to the expensive component and now we memorized it this is pretty common where you have a component and then you add additional props later on but the thing consuming expensive tree doesn't actually necessarily know that it's memorized so now when we pass expensive tree style equals background color blue this object is effectively getting recreated on each render check so the comparison is going to fail and now it's going to reender this every time because it's generated new props and it's possible that this new object would result in different content being rendered but if we wrap the memoized style in a react you memo call this fixes it so to speak but you still have no guarantees from above or below that these things aren't going to change in other ways especially once you have more and more props that are being consumed here it gets increasingly difficult yeah once style becomes a prop being passed in you do something innocent like this well you don't actually know if the style coming in is used memoed and properly memorized or not and as soon as there is a value that isn't properly memorized coming into the memorized component no matter how far away it comes from you're going to start running into problems and the these types of innocent changes where you move the style from in the component to being a prop that you pass through might cause a massive performance issue for your app you didn't predict because it abstracts the slow part away from the thing that can trigger it being slow I think that's the biggest issue that we'll see in a lot of react code it's very very easy to separate the place where the slow thing is from the place that makes it slow and when you use memo you have Now hidden the slow part in a way where it doesn't seem slow but any subtle change that doesn't seem like it should affect anything will suddenly make that code slow again and that's the fear that react memo instills in developers like myself oh boy here's another fun one if the memoized component accepts children yeah you didn't know this would break memoization why would it I'm just passing the same stable P tag well jsx is just syntact sugar for react up create element which creates a new object on every render if you want to pass children to a memoized component you need to use memo that jsx render and then pass that memoized element as the child instead God we can surely wrap the children we're passing with a used memo but I hope you're realizing by now that we're fighting an uphill battle that is hardly winnable Yep this is the issue the next person might just come by and pass an empty object or raise a fallback value to a prop on a memoized component and we're back to square one yeah you you make one small mistake like this and it's all over again so using r. memo is a bit of a mindfield and choosing one of the proposed Alternatives seems way better to me but sometimes we seemingly can't avoid a memorization of a component let's take a look at the example I've seen on Twitter that sparked the idea for this blog post I really need to do react performance optimizations but we have a page with five big tables and a summary box when one big table changes everything renders it's slow solution one I wrapped each table in a memo two I wrap the functions passed down and use callback much faster looks to me more like state is too high up if every table had their own State changing one wouldn't reender the others problem with M when use callback is that it only takes one prop to screw it all up yeah if you accidentally pass an empty arrays a default there goes all your perf WIS so let's see what he said about this here here I expect the component tree to look something like this I'm using two tables instead of five for brevity so table one table two both of these are in state together and they're both being passed here State holds the data of both tables and the summary Bar Needs access to all of it we can't move State down into the tables and we also can't compose the components in a different way it seems that memorization is our only only option so yeah in this particular case memoizing probably makes a lot of sense if the state has to live here don't start rendering remember when I said that once a render started we have no way of stopping it that's still true but what if we'd stop the render from starting in the first place if State wouldn't live at the top of the app we wouldn't need to reender the whole tree whenever it changes where could it live instead we've already established we can't move it down so let's put it to the side outside of react this is precisely what most state Management Solutions do they store the state outside of react and surgically trigger reenders of the parts of the component tree that need to know about what changes you use react query before this is exactly what happens there as well without the technique you'd see way more re-renders than you'd like to so yes my proposed alternative solution is to bring in an effective State manager I'm going to use zustand because it's the one I'm most familiar with it's a really nice example we create a store it has these two values in it and it has actions which are things that operate on the store these would be things like add to table or remove from table or in the things you put in here which again this is just a random key he chose but it's very easy within created zustand store to call the set function in functions you define so now the store has these behaviors that will trigger updates externally which if hooked into with react hooks will trigger those internally in react so here we have exported custom hooks for use table one data and use table 2 Data as well as a use summary data and my assumption is that all of these hooks are going to be placed in different places and ideally the ones that are the most expensive aren't going to be too close to the top and all of these will be called near the leaves so the renders only affect those elements now every component can subscribe internally to the state it is interested in avoiding any top- down renders if table two dat updates table one won't render this is as effective as memorizing the tables but won't suffer from the pitfalls when adding new props that can negatively impact performance a way out granted all solutions we have here are not great memorizing in general makes our code harder to read and it's easy to get wrong which makes it the worst option for me using external State managers is a bit better you might have that dependency in your app anyway adapting the way you compose components is still the best option but it's not always possible what would really be a way out is if we change the rules of the game records in tupal in ecma script proposal it's in stage two for quite some time would would help us with arrays and objects but not for functions Sebastian lber has a great read on that I haven't actually read this one records and tupal for react interesting I'll be sure to read that in the future the react team has also hinted that they are working on a compiler called react forget which will supposedly memorize everything for us automatically with that in place we can get the perf optimizations of react. memo without the error surface make sure you're following TK because he more so than almost anybody on Twitter exclusively provides value like I'm just going to scroll through and look at some random tweets every single one of these are going to be useful API design avoid optional prams if they are mutually exclusive that's very useful point and I'm sure he broke it down great shorter to write is one of my favorite Arguments for anything really it's the reason I stopped programming in cobal here like one of the highest signal to noise ratios of anybody on the platform please follow him if you haven't already great content great dude great blog posts thank you all as always I know react performance is a scary topic I hope this shows you some strategies to mitigate it generally speaking the simpler you make things in terms of how State lives and the closer you attach the things rendering to the data that it's rendering with the better things will perform and it's really cool seeing authors like K Doo going out of their way to write useful quality resources explaining why these trade-offs matter so much appreciate all of you as always I'll pin a video in the corner here with all sorts of other fun things you can do with react if you weren't familiar performance matters more than ever in some of those examples appreciate you all a ton see you guys next time peace NS




## You Should Ignore My Opinions, Here's Why - 20230107
I want to talk a bit about how to learn from YouTubers the right way so I like to think my channel is a useful Learning Resource but I'm concerned y'all are taking the wrong lessons from it and not just my channel many others on YouTube too this doesn't just apply for Tech I think this applies in general the first thing you need to understand about learning from YouTubers is you're learning about how they think not about what is right and wrong when I talk about Technologies and things I like on stream that's not because they're absolutely 100 the best and only thing you should do it's me presenting how I think about these things in the solutions that have worked for me based on the problems that I have so the first thing you should look for is YouTubers who have problems that overlap with yours if you want to do better in competitive Pokemon find some other people who do well in competitive Pokemon if you want to build Dynamic web apps and workplaces like twitch or ping or YouTube or Twitter hangout places like here and talk to YouTubers like me and you'll start learning a lot about the things you need to learn about but don't think everything we say is Gospel I disagree with just as many engineers in my space as I agree with and I find that most Engineers are kind of in that boat we all have our opinions and our way of thinking about things this is where point two comes in you should learn about how we think the best thing you can take away from any YouTube channel is the ways in which the YouTuber who's making the content thinks and learns how do I come to the conclusions I come to where do I get the ideas I get and how do I use those to solve problems I try to talk about these things in my videos and I think it's often misunderstood one video that God I don't think any video I've done has ever been quite as misunderstood as my unit testing video this video I think that there is a character being missed when people read this title a lot I says right there why I don't unit test I made this video because I personally have reasons why the projects I am working on don't make sense for unit testing that doesn't mean no one should unit test it means that I think unit tests are not always necessary and I think they're recommended too much my take is something you can take alongside other people's stances even watching the debate I had with primagen about this topic and you can use this information to come to your own nuanced or maybe more extreme understandings my channel is a source of ways to think about problems and a bunch of random sources that I share here as well for you to make better decisions sometimes those better decisions are more wrong which might feel really weird because why is how is it better if it's more wrong because the more wrong answer lets you figure out it's wrong faster if an answer is only kind of wrong that sucks because it takes way longer to realize how wrong that answer is and the sooner you can run into problems and realize the solution you had was wrong the better and a lot of my advice is structured in that way it's recommending the simplest stupidest possible thing for as long as possible and seeing how far you can get with it because that will always be how you move fastest and I firmly believe that but again I am just another voice for you to listen to and take information from ultimately my goal with this YouTube channel was to replace the cooler side conversations I had when I worked at twitch for five years there's something special about sitting in a room when you're a new engineer with two principals who have been coding for longer than you've been alive talking about something you barely understand picking up every word you can occasionally sneaking in a question in just a hundred Xing the speed you're learning at most of what I talk about should go over your head a lot of the things I do here should make no sense and you should hate a few of my stances if you're in some or all of those boats you're using my channel correctly your goal should not be to fully align yourself with a specific person in their way of thinking your goal should be to take advantage of the knowledge and ways of thinking all of us creators are sharing so you can apply them to the problems you have to make yourself more effective at whatever the hell you want to do my videos aren't gospel I'm not writing a blog post about why you should only ever use X Y and Z I am sharing these things that work for me and the awesome things they do and explaining sometimes grandiosely why I don't like other things in the space for the problems that I have take everything you hear with the understanding of who the person is sharing it and the problems they have and understand that everyone's stances especially those successful enough to do well on YouTube and in corporations as Engineers they all have their stances for a reason and if you don't agree with their stance try to figure out the reason what's the point of disagreement that leads to me having a different stance than you on graphql or unit testing where does the tree break apart think when you look for the answer to that question you're going to be much more satisfied with the info you get from all of these different sources anyways sorry for this rant I'm just to be frank annoyed at how people are taking some of my content the goal here is to present extremes that I experience not to tell everybody to throw away something except for pre-commit hooks those are always bad appreciate y'all a ton YouTube seems to think you're gonna like the video there so give that a click if you haven't and why haven't you subbed only half of you have why the hell are you watching this if you haven't subbed come on hit that button subscriptions are free they help the channel out a ton thank you




## You still use Redux_ - 20220811
there's a lot of different ways you can think of State types but I'm going to break it down to a couple specific ones uh server State and I think I'm just going to break down to server State and application client State Tada see magic all we have here is onblur run the mutation and on that success or on that mutation success revalidate the query this is an overdue rant I think that react state is a topic that generally we worry about a lot but don't discuss Solutions about enough I feel like everybody's really eager to shout about their favorite state manager and not about the like more fundamental problems of what is State and why are we building it so this is the react State Management rant and I want to start with a really important call out if you can use react query you probably should this is important to understand a lot of State Management isn't managing state in the sense that these are things that can and often change and that user interactions like live manipulate and mutate traditionally when I'm talking about State Management with react Engineers what we're discussing is State synchronization between the client and the server the goal isn't so much to create how do I put it it isn't to make a state machine with all of these events and actions and behaviors so much as we have data on the server the client requests it and then the server gives it to the client and the client has it now the so many state problems are that and I've seen a lot of people reaching for State managers when what they're looking for is a way to synchronize their server with their client so please I implore you if you haven't used react yet and you're looking to install Redux or zustand or one of like the many other things we're going to talk about please read the react query uh or the Practical react query guide by TK Doo first this does a fantastic job of breaking down the idea of client State versus server state in the things that react query is good for if after this it still feels like it's not the best solution and there are edge cases in here even like the using websockets with react query might be a bit of a stretch for some but at the very least understand this and how synchronizing your back end and your front end is probably what you're looking for most of the time with State and pick a solution that's good at that first with that all said let's talk about state in the different types of state so what is state data usually data that can change state is a a very general catchall term can be the things in your RAM it can be the like objects that react has access to it could be the use State calls it could be a lot of different things but generally the idea of State in any given application layer are is the things in that application layer that can change what are the different types of State there's a lot of different ways you can think of State types but I'm going to break it down to a couple specific ones uh server State and I think I'm just going to break down to server State and application client state so server state is things like the users profile like how many or what's the user's name how many people are they friends with what are the current profiles that are on Twitch like who's live right now those are server state things that the server has decided and described in a specific way server state is what most of our job is to deal with it's taking things that are on the server and displaying them to the user in a way that is a good experience for the user but also often that they can interact with and modify the server state application state is things that are specific to the application in at any given time things like which page are you on right now uh is your microphone on or off do you have a video device connected so a good simple example of application state would be a a use state for keeping a menu open and closed whereas a more common server State example would be const data loading or is loading equals use Query data fetch some data fetch gonna do uh poor uh Maple's favorite here can I get enough pars there one off cool right so server state is data that you're fetching or getting from somewhere else that you're then showing in your application so so another way you might look at this when I first write it is oh well application state is things you can change and server state is things that you can't so you should probably use application state for anything that the user might want to edit like are you fetching your bio on Twitch for example can you just edit the text if you're fetching it from server no you're going to have to put that in state right well let's think about it for a minute we could we could could use the data we get from server to pre-populate the field and pre-populate state const data equals use Query I think it has to be an array now some query and we'll return default State and this is the thing that we get back from the server actually rename this to server State I'll I'm going to do this a little hacky way Pretend This code is on the server let content equal default State and we're going to return content here so again Pretend This is on a server and then everything here down is client so what we're going to be doing is operating against this external server State inside of our client so now we have this data I can input value equals data and canot find oh it just died and now I can use react query what I was doing there was creating the context that is a single context for all of react query so we'll never have to think about it again really convenient that we have to do this once knowing we have to do it once but once it's done no more contexts no more of the global chaotic contact stuff so from here I want to use this data right now we're putting it as the value here but that's not great because when I change this if I keep typing it doesn't let me because the value's hard set I have no ability to [ __ ] with this so I can change it to default value I think it's just default oh no that reload kills all the things I did I'm going to be so mad okay so I changed it the default but it's not there at all if I put another string nope I guess default just doesn't work a default value is a thing that's what I thought cool I put data here instead I actually think that would work so I didn't think this would be loaded in time uh is this immediately loaded because it's a function that can run immediately console.log rerender with data data now it comes through undefined initially interesting so if you change the default value okay that's what I thought would happen so here we have a different default value of like please fill this in and even though our code says use data or please fill this in we always get the default of please fill this in the reason is this code decides on the default value on the first render when we don't have data yet because this is a query this is coming from the back end however we want this to be correct so the quick simple and I would argue the best fix for this would be in is loading here and return some type of placeholder in the interim so if is loading return div loading and now this will always load the state from the server because this item does not render until the server has given us back data and this is populated because is loading this check here will prevent that from rendering so the default value we get ends up being correct in the end now you could also use a key to force a reset but that would have other potential side effects so now the question is how do we change this like I can write values in here but it's not affecting anything clearly I have to go at a state pull the data from the state modify the state and then post it kind of think we can do a lot simpler here so first we need the use mutation that will actually do this so const mutate equals use mutation as doesn't need a name if I recall so I can just do this data content equals data so now when we call mutate it will set whatever we pass to it to be this content value but let's say we have another thing rendering this below so we have a H1 current value we want that to be data so we have this but I'm changing this nothing's changing we want it to I can add on submit e for the event and we want to e do Target actually don't know if on submit will fire on enter I suck at forms I'm going to do this the easier way of a button we don't want to to fire on change because we don't want to fire the mutation constantly I think on blur might be the best thing so we'll start with on blur just because it's easy and on blur we're going to mutate e do current target. value and now I'm going to change this and nothing's going to happen still because this data isn't refetch we're changing that but this is a server value we changed we just posted effectively to the server saying hey we're changing this value and the server's like yeah sure thanks and then doesn't do anything else what we need is and on success we want to do something in this case the easiest thing is refetch that's not what I copied and now oops wrong button Tada see magic all we have here is on blur run the mutation and on that success or on that mutation success revalidate the query this might be a it might feel like a tiny bit more code than writing your own State Management however it is significantly less bug prone and you've reduced the dimension of problem we no longer have to worry about the relationship between the input the state and the server because the relationship is when you leave the input that becomes the server State and when that change occurs things are revalidated somebody asked the question of does this also invalidate the cach it does the cach will get updated as well you also have the option instead of doing it this way where we immediately revalidate this with the refetch we can instead use the query client so query client equal QC equals use Query client and in here we can do qc. invalidate queries pass it some query which is just the string name from here might have to be in an array for that to work let's test it that did not work might have to be double wrapped no F edit queries huh interesting I don't know how the new invalidate queries works this should absolutely be working though oh it might be because it needs the like undefined maybe it doesn't need either interesting yeah I uh I'm not sure why this isn't working maybe to be null yeah I'm actually not sure why this invalidate queries call isn't working this should absolutely be fine am I getting console warnings unexpected token expected comma that was not from this was it I want to set up the react query Dev tools but that's not trivial inside of this [Music] [Applause] [Music] sadly installing this but the package isn't resolving correctly it seems like V4 is just kind of [ __ ] right now so we're going to go back to 3392 there we go what is this upset about oh this seems to be a type there we go does this need a key that mutations didn't need a key what is this upset about why am I getting unknown to hell did I just kill the typescript server yeah that's what happened it knows the type whatever okay we're going to just go with it from here here I should plan these things ahead if I want to do them with like an example that's working we have some state that is on the server the server is imaginary it's this variable but we're not letting the body access it directly so in this some query function pretend that we're fetching data from the server in this mutate function pretend that we are sending a post request to the server to make a change on that side so the unsuccess case here we are invalidating the query to be or because this value is new and the query should now be refetch to have that data but not necessarily how do I put it in some cases that's not the best path forward like the server might take a while to return that data and you want to have that change on client immediately let's say I make this a a new promise I haven't done the OG promise syntax in a while uh did I get that right is I think I have to return it yeah I do cool set time out and we're going to resolve this request with content after a second so now when I load the page it's going to load for a sec before it comes in we made a fake timeout to or a fake request there so now when I make a change so new content it's going to take a second to update because it's now loading that data in the background if I was to change is loading to is fetching here also is this mad about I guess that it doesn't know the type of what this promise resolves that made it shut up so if I switch is loading to is fetching what's going to happen instead now whenever I make a change it goes back and the the loading State because that data is being fetched again but let's say we want to avoid that we don't want to have that time in the back and forth to the server to get new data and we don't want to have the state where things are stale we can instead of invalidating the query QC do update or set query data and we can set some query to be the new uh the new data that we have here which on success we'll actually have the data which we don't want what we want is the variables because this is what you submitted with so we can stop calling content because we don't want to call content in here we don't know what content is that comes from the server and now we are setting the query to be whatever data that we took in here and that is not working because new data default state is what it's oh no it's getting the right thing maybe the set query data isn't [Music] [Applause] [Music] happy what we're seeing here is we have this content that we're fetching from the server we have a use mutation that is running on the client and once that client mutation has succeeded we IM immediately show the new value but now I'm going to throw one more wrench into things so now when we resolve this uh mutation when we make the change it also has a 1second delay so when I make the change here it will take one second for my changes to appear because we're doing them on success there is one more option you have which is on mutate and this doesn't have data it only has the variables because we haven't finished the mutation yet this is called an optimistic update we are optimistically changing things even if the server doesn't accept the change so if I was to in here instead of returning content return default always we'll get default initially but then it gets ignored because I am just overriding that value in the cash with whatever the hell I want to all of these options make sense in different situations for different things you can also combine them with the loading States provided by react query to determine what inputs can or can't be touched at a given time but what you'll find the more you play with it is the vast vast majority of weird State cases that you're dealing with and thinking about can probably be solved very well with react query now that we've talked all about interfacing with apis what about the things that aren't because most things are server State and there's lots of ways that are better than application state to handle making changes to server State server State isn't just things that don't change it's the relationship between the client and the server and how those things change but there's a lot of things that aren't that so what isn't server State I actually get in this argument quite a bit because there's a few people in a certain Frameworks communities that insists that things that are developed in these like new data fetching patterns somehow invalidate the need for something like react query I wholly reject that I think react query is useful for lots of other things that aren't server State like AV device management uh navigation State open close menu State there a lot of things things like this uh one that we have a lot in ping is is chat visible or open where like you have a sidebar where it could or couldn't be open and this isn't state that only matters for whether or not it renders this is State that's kind of global because we have a notification system and notifications behave differently depending on where they're being uh or depending on whether or not the menu is open and the chat's open so if chat's closed no app pop up at the Top If chat's open they appear in chat directly or things like in instantiating the camera device that's an async function that I have to call and then wait for behavior and then get that back react query can do all of these things I would say for the AV stuff it's good not great for navigation it's bad for open close menu stuff it's terrible and for his chat open it's also pretty bad so for a lot of these types of very application problems especially the syncronous ones like navigation State and menu State stuff react query isn't the best solution so what should I use instead when it's not ideal so this is going to be a list in order of what you should prioritize so option one should be built in react State use this if it's simple enough to do if you have a used state in one place that you want to pass down to some children so they have that data that's fine don't be too scared of prop drilling I find that a lot of engineers get turned off by the idea of prop drilling so much so that they just don't pass props like ever that's not the solution here at all you state is fine and passing things around is fine as well I should say built-in react use State addendum I don't recommend context much context in react is very powerful for prop drilling effectively so if you have some properties that aren't going to change much and you want everything from here down in the Dom to have access to those properties context is a good way to do that but if those are values that are going to change a bunch like puts like user scores or behaviors or chat or those types of things context is the most wrong of wrong ways to do it for things that don't change context is great it is a simpler I shouldn't say simpler it's a more complex but more but less boiler PL code prop drill pipe the reason why you don't want to use context for those things is it is passing everything in it to everything that consumes it so if you have a component that is consuming the if you have a context that has the user object and whenever the user clicks a button it increases the user's score and that changes the user object in the user context now everything consuming that context has to render whenever that comes through react memo will not solve the issue it will double the amount of compute you're doing while not solving the issue it's no or react context is an effective way to say from here down everything has access to this data and everything will render when the data changes react context is for dependency injection pretty much nothing else if if you're looking to make passing props a little more ergonomic maybe use context otherwise probably don't touch context so what do you use instead well we're going to draw a diagram so this one's going to have a question in it why didn't use State work there's a couple different reasons why use State might not work for you reason one might be I need a global so you are cool with u State as it is but you don't want to have to pass values constantly up and down everywhere one of the best things to use in react if UST State isn't like ergonomically Pleasant due to the prop Drilling and all the other chaos and you you just want to have effectively like a use state that you can reuse in 15 places Jodi Jodi is fantastic Jodi has a system called atoms it's an atomic State manager so the simple examples are like you define an atom by importing atom and then you give it a value and now when you call that with use atom you get the value and a Setter and you can call use atom on a given atom in a hundred different places in your app and when one of them changes it all of the rest update no context no chaos just a simple Define an atom and then consume that atom in other places you can also derive atoms using their uh derivation systems they have cool recipes and things like that it's a lot of fun to be had with Jodi but generally speaking its strength is I have this thing that I want to change and now it will or and now when I change it it will update in other places so if I so if I had a context that had 15 values in it and any one changes all of the other values or all of the things is consuming the other values have to render and update as well with Jodi you can just Define 15 atoms and then whatever consumes whichever specific atom updates accordingly if you had an atom that had a big object in it with lots of keys and you were consuming one key off that then it's it's still going to render the same way context does but if you use atoms to break up your context it's a really efficient way to do things all of that said there are a few reasons why you might not want to use atom and those are the other directions I want to go in here one of them is I need a machine actions events Etc so if you have instead of like con count atom equals create Zer and then we want to like all and then we can call Con count set count equals use atom count atom and then below here I can call set count five and that just works but let's say we don't want the ability to set count we want the ability to increment count so I'd want this to pass get increment and then we call increment with no argument you can't do that with atams you'd have to redefine all of that functionality yourself and it's not going to be a great experience to do such so if you want a store I'm going to move this example over here so if you want a store Instead This is where zustand really shines I'll write that below quick before I forget sust stand so so in just in zustand I'll just go to the docs because they're really good you create a store instead of a value so in here we create a store it has Bears which is the value in it and then you create actions which are updating events on here their functions you can call so when we call increase it sets the state to be bears plus one and when we call remove all bears it sets it to zero so when you use use something like sstand you are handling the ways you interact with the state as part of the machine so that when others consume it you know which behaviors they're able to work with this is a machine not shared State this is a little closer to context and how it works where you can Define different things on it the big difference is you can subscribe to specific values so if I had bears and a different key on here and that other key updated all the time when I select from it so use store State state. Inc increase or in this case state. Bears this will only render when state. bears changes with controls this will never reender ever because increased population is never going to rerender or never going to change and as long as that function never changes which it won't we're not rebinding it it's never going to render I've seen a few questions about other Solutions in particular recoil with uh Jodi yeah recoil is pretty similar to Jodi Jodi's a lot simpler better maintained and more likely to keep doing well I'd probably use that but yeah zustand and Jodi are my two go-tos right now because they solve those two different types of problems I'm not going to bother with a c snippet I [ __ ] everything I wanted to there so if your reason for us say not working is you want something more Global go to Jodi if your reason for wanting something other than you state is it's not actionable and it's not something you can interact with more directly zust Dan's a really good solution it also has some fun magic tricks uh let me reopen the docs here where you can access zustand outside of react which I do pretty regularly there are some examples uh yeah without react so you can call from zust and vanilla get State set State subscribe and Destroy and now outside of react you're able to make changes and update things so I'll off often bind listeners externally that update the store outside of react and then react magically updates itself whenever those things change it's a really convenient way to do external uh like management of data that is internally operated within so if buil-in react State isn't working should probably go with Jodi or Su stand I use both at the same time pretty often it's really nice there are lots of other Solutions I see people mentioning Redux Redux was great and it made all of this possible but it's way more work to set up it is way more complex overall and it's a decent bit of Code remix Redux is very large Yi is 3.39 kiloby and zustand is 1.16 kilobytes yeah Redux does so much more than you need it does all of these things but you probably don't need all of these things almost everything I build needs neither of these it's very rare that I need to reach for these we use Jodi for some like Global device management stuff in ping like which devices are active and then we use usand for like the chat room to manage who's connected and like websocket connections stuff like that everything else is react query all the stuff we talked about up here generally speaking most of the stuff that I'm worrying about when I'm worrying about the state in the data of my react application is data that I'm synchronizing from my server so I don't need a State Library more often than not when I do Jodi and zustand solve the specific problems that reacts built-in state dat were not built to solve so I reach for these two very minimal and light Solutions when I need them and I don't when I don't one more option I want to bring up because it is really cool and more people should probably use it for complex things but less people should be talking about it because most people aren't working on those problems is xstate X State's goal is like proper State machine architecture in the very formal sense so like state visualizers with really complex diagrams to see all the ways things go this is all of the code for a fetch as you can see that's 39 lines of code for a Fetch and you have to write your own type definitions on top of it don't use this for store or for like server State don't use this for simple State machines and values you want to synchronize between things use this because you have some very complex custom absurd [ __ ] and you want a diagram that lines up with the machine that you can use to obsess over it I have found very few use cases where this level of architecting your state is necessary it can be very useful but you need to have so much complexity in your state that introducing this makes it simpler to reason about because you are inherently introducing complexity when you introduce something like uh xate so be be careful when you add in something like this but if you know what you're doing and you know your problem sucks it can work really well trash just mentioned in chat that he likes it but it falls apart with sibling machine communication which means you have like a greater machine and then sub like children machines for different things within your app I do that all of the time with zand like every single day in ping we have a a greater zustand store that is the device manager and we have sub stores for random [ __ ] in the call and all of these things interact by calling functions to and from each other and it's fine the boundaries that we're defining there are usually react itself and using zustan context provider as well as like the store inst instantiation protoc or methods that they provide it's pretty easy for me to build a state machine for one thing and have it interact in simple ways with the other things so highly recommend trying other things that are simpler until you hit the limits of them you'll notice that that's generally My Philosophy but what you're going to see here is how I'm applying it which is start with use State use react query and things like it for the server State side and then you when you can't use State because you're running the specific problems with it grab Jodi and grab Z stand I hope that this helps hey did you know that over half my viewers haven't subscribed yet that's insane y'all just click these videos and listen to me shout and hope that the algorithm is going to show you the next one make sure you hit that subscribe button maybe even the Bell next to it so that you know when I'm posting videos also if you didn't know this almost all of my content is live streamed on Twitch while I'm making it everything on the YouTube is Cuts Clips whatever from my twitch show so if you're not already watching make sure you go to twitch.tv/ Theo where I'm live every Wednesday around 2 or 3 p.m. I go live on Fridays pretty often as well thank you again for watching this video really excited thank you




## You suck at picking projects - 20241214
being a developer isn't that unique y'all could have built this yourself and I'm not the one who built it cuz I'm some God Dev who figured it out first or some product Visionary that understands what people need better than anyone else I built this for a very simple reason I needed it and some of the most successful things I have built have been for me wanting something so badly that I built it for my own use case and then it blew up almost immediately afterwards things like upload thing things like pick thing which is doing way better than I expected things like quick pick which I just released things like all the cool stuff I did at twitch ping. G itself but the biggest one is here this channel I made this channel because no one else had done it and if you make the things that you want to exist if you make them so good that you genuinely enjoy them you will almost certainly eventually find a lot of success with that




## You're (Probably) Using Prettier Wrong - 20230606
I love prettier and I'm concerned with how many people are using pretty or wrong to be clear it's not actually prettier they're using wrong it's eslint because linting and formatting are very very different things I've seen a lot of misconceptions around eslint and how it should be used in your code base just because eslint can change your code doesn't mean it should and the big thing I've seen too much of is people using eslint as the formatter for their code base eslint is not a formatter eslint is a linter if you talk to anyone on the eslint core team you tell them that you're formatting your code with eslint they're going to give you a weird look because it is a bad bad idea formatting and linting are fundamentally different problems a lot of this rant is directly inspired and stolen from Josh Goldberg's talk he did at react Miami and I want to highlight this particular slide from it the role of a formatter is to format your code which means it does one really quick pass across your code anything that isn't formatted correctly it fixes but doesn't keep track of anything it doesn't check the relationships between things it just runs through your code and fixes things that are broken in your formatting and then it's done and that's it whereas a linter is trying to confirm specific discrete rule tools are being followed in your code base which means the relationship between a file and specific lines in it as well as between different files between different rules all of the complexity involved in that is necessary for the linter to work and that complexity can and almost certainly should exist outside of your formatter and the way that eslint recommends you run prettier is using eslint config prettier which is a plug-in that turns off all of the ESL and stuff that conflicts it prettier so you can use prettier for formatting first into then do a lint pass after it just runs so much better and makes your editing experience better too and it lets you use prettier for what it is a very very fast formatter and you don't even have to use prettier D print is a great alternative that is insanely fast it's written in Rust and lets you format your files effectively instantaneously it's also a bit more configurable so if your reason for using eslint instead of prettier for formatting is configuration you should use a formatter that has better configuration my reason for using prettier is I don't want to think about the config anymore I just want my code to always look roughly the same and prettier does an absolutely phenomenal job at that I don't usually have a prettier config unless I having a bug with one of the like built-in packages like the plug-in for Tailwind in prettier I'm using pnpm I have to manually put that in but other than that I almost never have a prettier config because the defaults are fine deals are actually pretty good I hope I'm properly emphasizing my point here is that like the role of eslist in the role of prettier are just so fundamentally different prettier is a thing I don't want to think about I don't want to change rules and I don't want to look at I just wanted to run and make my code consistent a linter is a thing I'm going to sit there and configure and make me a better Dev with and make my team more consistent with yes lint makes so I don't use promises wrong it helps me be better with my typescript behaviors and make sure I'm not leaking enemies all over my code base and it's a complex process to do that and it's even more complex if during that like set of passes it also has to worry about formatting because it might do a pass realize the formatting is off adjust the formatting and now the lint rules are applied differently notice to do yet another pass I saw a pretty bad take from Anthony Foo which sucks because he's normally really good about these things his words were he couldn't see how doing two passes would ever be faster than one the way they're doing two passes faster than one is if it's not two versus one it's like twenty versus one because that's what your linter does it does some very complex analysis of your code to make sure things are where they're supposed to be in your formatter just make sure the output's the right shape these are such fundamentally different problems I need to make sure I link this talk in the description because man there are so many little gems in here around configuring yeslet correctly around getting better error reporting in Dev and in like your builds there's just so many little things that Josh helps here with eslint and I find most people are scared to better understand it I personally was one of those people I avoided digging into eslint for a while but after listening to Josh a bit more I realized it's not that scary it's actually pretty important and if you get familiar enough with it things are much easier and consistent and some of these rules are dope there's a typescript set of rules too the recommended typescript rules are incredible and will make your code better and more resilient that is a different problem from formatting and we need to stop pretending that they're the same doing formatting in eslint is using yes wrong it's making it slower it's making the lives of the maintainers of eslint harder because now they have to deal with all these weird patterns people are using es14 the docs are being updated to be very specific about this and if you go to prettier stocks too they're pretty clear as well cool there it is integrating with linters linters usually contain not only code quality rules but also stylistic rules most stylistic rules are unnecessary when using prettier but worse they might conflict use prettier for code formatting and linters for code quality as outlined in prettier versus linters this is a pretty well established thing and it is frustrating to me that people will not listen to both the eslint team and the prettier team because they think they know better than both when they actually don't understand either and that's why I felt like I had to make a video about this because I'm so goddamn tired of people acting like they know better than these hard-working open source maintainers they don't these people work really hard to make great software and they've finally made it easier for us to make the software cooperate together and when I'm taking advantage of it or complaining about it I don't get it it's just the formatters are really good and fast if you let them do one pass and do their thing just use the formatters for formatting and use the linters for linting don't use lender for formatting and certainly don't use the formatter for lenting goddamn and thankfully in here they say you can use these two plugins that will turn off prettier conflicting rules in eslint and they even have here eslin plug-in for the year which they specify you shouldn't use because what this does is it runs prettier's rules in eslint because the lender has to worry about so many conflicting rules and so much context that exists outside of the specific line of code being formatted it also doesn't necessarily do formatting great and I don't remember the specific examples but I know Josh gave examples of weird tab behaviors that the linter couldn't handle well that prettier handles really well and those types of things are more complex when your processed to read the code is more complex so if you want to do this stuff right the way to do it right is you use prettier ESL and config prettier and then whatever ESL config you want to on top of that but you should not be using ESL plugin pretty year as you're prettier run it just doesn't make sense I hope this one was helpful the thing I run into a lot and I've seen way too much generally if you set up crazy app or even create next app you're gonna get good enough linting then you can just npm install prettier and you're done it should be that simple can be that simple it is that simple please for the love of God just let it be simple if you want to hear more about things people use wrong I'm gonna pin a video in the corner right here where I talk all about how people have used JavaScript wrong because it annoys me so check that out if you haven't already good seeing y'all as always




## You're Losing HALF Of Your Data - 20220821
analytics is important knowing your users what they're doing what they're accessing and how they're using the stuff you build is essential what if i told you over a third of your data is being lost thrown away never making it to you and your servers there's a very very high chance that's the case especially if you're using tools like google analytics memento plausible or really just any of the major analytics tools when they report analytics they're not reporting those analytics to your own servers they're sending them to another server that is probably being blocked by an ad block if your users have those my users are power users they are hardcore chrome nerds and a very large portion of them have an ad block set up because of that about half of the data for our users gets lost that is not acceptable for us to have things that we need things like user reports for bugs things like events and what pages that they're going to we need at the very least anonymize data on how our platform is being used in order to iterate on it improve it and just generally make a better experience for our users and having that data all get thrown away is an unacceptable compromise so how do we prevent that thankfully you have one thing you pretty much certainly know you will not get blocked your own website so it should be your goal as much as possible to make sure when tracking events and analytics occur on your site and in your application that that data isn't sent through third-party servers like google's analytics server directly rather it's being forwarded through a domain ideally a path on the same route that you own so what does that look like well to just quickly draw out a url example let's say this is ping.gg and you want to use google ads or google analytics google analytics is probably going to report to a url like analytics.google.com some random stuff rather than that because this is trivially blockable even if you go to the analytics page on google you'll get adblock just pinging everything sometimes it'll even error out because of how hard it is uh just i use the word destroying but like eating that data however if you instead have ping dot gg slash api event and then you forward this to analytics.google.com whatever you want that will actually work and it'll be significantly harder for an ad block to prevent that so how do we make this happen there's a lot of different solutions the first one that i want to talk about is probably the best one there's a few services in particular plausible i will quickly go to the plausible site because i love these guys and i want to shout them out oh that's going to show my actual dashboard that's fine we will edit that out in the video plausible is a fantastic analytics provider for quickly setting up a gdpr compliant analytics like tracker on your site just to see how many page views you're getting what the like events look like on a given route where users are coming from stuff like that it's a fantastic super quick way to set up analytics and it's entirely self-hostable if you want to host it on your own servers you don't have to they provide a cloud solution but it is a very simple fully gdpr compliant way to get analytics about how your like applications and user sites are being used so how does this get around that problem isn't their service gonna get blocked all the same well it did however next plausible i bet this will just come up by google search it it will next plausible is a very clever third party package that i think a lot of analytics providers need to look into and build similar things because the really clever thing it does if i go to the index tsx here is they actually create redirect urls in line so if you wrap your next config with with plausible proxy it will add some additional rewrites that redirect the source to a different destination and that source is funny enough slash api slash event because of that we can now post to our own url slash api event and it'll be much harder for an ad block to catch that as a thing that it should be blocking and then once that's on your server hitting that rewrite you send it off wherever you need to send it off there are lots of other packages and solutions for this as well one more i want to shout out this is a more generic is data unlocker data unlocker is dope because it sits on the website watches for packets that fail and then it does some pretty crazy things i don't know how well documented they are at this point it is based on an open source project but the the tl dr of how it works if i do they even say in the docs anymore uh they oh how data unlocker works cool so with data unlocker you usually set up either a custom like path on your server or a different sub domain on it when we were doing the subdomains we found those kept getting blocking so we moved over to the kept getting blocks we moved over to the path solution instead and the path solution is just significantly harder to block when data unlocker sees a request fail because it was blocked on the client side it takes that request it bundles it into like a gif or some other harder to detect thing and then posts it to your own endpoint which gets proxied via data unlocker back to where it was originally supposed to go making it significantly harder to detect when those things happen really cool little service that makes it significantly easier to not think about these problems and just have your data come through and the pricing is totally reasonable as well i saw somebody bringing up fathom uh is the link there for me to quickly grab it is because fathom also has a custom domain solution where you're able to make in other words one simple dns edit and you're good i don't think it's quite as simple as they're implicating there specifically because as i mentioned before the data like when you put a subdomain those can get blocked if your site gets any meaningful amount of traffic someone will sit there see that's where it is and block it it's very easy to get around those however the path rewrites when you're using something like a nexjs server basically impossible to work around especially if it's a path that's being used for other things uh what was there was other details in this one if i go to the custom domains guide they have you generate like a named one so it's less likely yeah these will get blocked pretty hard on the off chance this happened to me like seven times yeah i this is a cool strat but it's not good enough fathom's cool but i don't think that's going to do everything you needed to that said there's no reason that fathom solution wouldn't work in tandem with data unlocked or if you had this as like a second level like or redirect basically on top and if you're using segment you can modify segments to point all your traffic through a local domain as well or you can use data on locker and just have it do it for you all of these options work i've used all of them for different things i am using multiple of them at the same time right now and i've had to do my own custom patch packages and rewrites to do things like make log rocket send the data to the right place and not get blocked so sadly enough intimately familiar with all of these solutions and as such i cannot confidently say any one is the guarantee do this and you're good but generally speaking you want to make sure that the the pipe that that data is going through is one that you own so that it's a lot harder for that to get blocked anyways i hope this was helpful analytics is hard if this video does well and y'all liked it and you want me to talk about more analytic stuff please leave a comment letting me know ask more analytics questions let me know what you do and don't get about the topic i feel like analytics is generally an under covered and appreciated thing and it's super important once your application starts doing well and even to know if your application is doing well so if you want to hear me talk about analytics more please let me know and i'll be sure to do it also nowhere near enough of you are subscribed on youtube it's still well under half make sure you hit that sub button if you haven't yet because it helps me in the i'll go a ton and like the video that was a great rant i hope this is helpful for y'all make sure you stop losing all that data because some of your best users are using adblock and you're not seeing things that are important so get that fixed thanks y'all




## Your Goals Kinda Suck - LEVEL UP As A Developer - 20220817
how do i become a software engineer how do i learn react how do i improve the test coverage or obviously the one i'm getting a lot the most recently how do i contribute to open source so your goal is to get to this outer rim but we're just a tiny little dot in the middle here if your goal is to make money set that as your goal go figure that out somewhere else but if your goal is to be a passionate engineer that builds cool [ __ ] start by picking things to build i hope that this doesn't offend anybody the goal of this rant is not to offend and if it is calling anybody out in particular it's myself i definitely sucked at these things throughout my career and i found that the times i was most successful and happy with what i was doing is the times where the goals that i set existed out of the outside of the patterns i'm going to show here there's a lot of easy pitfalls that i find early devs falling into when they're trying to figure out what to do with themselves how to set goals grow and succeed in their own various ways it's a little too easy to set goals that aren't going to get you where you want to be engineer goals should as often as possible be specific and pointed deliverables for things you can create but i find engineers tend to set much more lofty indirect goals that aren't really achievable what do i mean by that well there's a lot of different types of goal setting that i see a common one i want to be an engineer or i want to learn react or i want to improve test coverage a reason favorite i want to contribute to oss open source software all of these goals suck and i get asked questions around these things all the time like how do i become a software engineer how do i learn react how do i improve the test coverage or obviously the one i'm getting a lot the most recently how do i contribute to open source i think the things on the right here are bad goals if you draw like a block out and we just literally cover everything there be an engineer isn't a goal it's a a place you get to at some point but not by driving there learning react isn't a thing that can be measured like i i haven't learned all of react i'm at maybe like 60 to 70 percent but i'm pretty [ __ ] good at reacting i think most people would say i've moved past learning react improving test coverage is vague and not direct around the problems that you're having and doesn't have like it has a metric you can measure which is the code coverage higher but when do you stop when have you succeeded with that goal and contributing to open source is just the the straight up wrong way to go about it you're all of these goals are not the thing that you work towards these goals all suck because they don't have starts and ends that are clear in particular ends that are clear like when have you succeeded in becoming an engineer when have you succeeded in learning react when have you succeeded in contributing to open source this one is a little easier like once you've contributed to open source you've done it but but when have you satisfied your own urge because you could go like make your own code base that's contributing to open source in an open source github repo these are things where it is unclear when you have succeeded at the goal you have set you could have arbitrary points like i'm an engineer when i get a job as an engineer i've learned react when i don't even know how you set a goal for like a point at all it's pretty bad so how can we improve on these goals let's say i had the goal of i want to learn react let's break this one down further so we'll start with this top level goal of i want to learn react what does this mean to you the first question i ask is what does learning react mean like what's the end goal it's probably something like i want to be able to build a thing or an app with react or maybe it's i want to get a job using react these two goals are very very different and depending on which you ask me i'm going to give you very very different recommendations so let's say we want to start with i want to be able to build an app with react cool let's start with this now that we want to be able to build an app with react what should we do from here first thing we should do is ask yet another question what type of app do you want to build if you want to build like mobile game do you want to build a twitter clone anything which is what i see a lot of people pick you're [ __ ] pick specific things so let's say you're a big twitter fan maybe your like goal is to work on twitter something like it someday like long term but you might want to how'd i put it like you you see an app like twitter you're like this is cool i really want to understand how this works i want to be able to build things like this so let's say you've decided you want to build a twitter clone what do you do now start with a tutorial a daily something that is at if it can be close to that you might even find on youtube building a twitter clone from scratch or something like that start from there but what i'm pushing here is take that top level imaginary goal of i want to learn react and ask yourself more questions until you get to a deliverable thing so in this case you want to build a twitter clone or maybe you have a video game you like and you want to build a calculator for the video game that you're playing like i used to play a lot uh let's pick a game i'm playing right now uh i really like outriders and in outriders there are random chances of gear dropping i might want to see how likely is it that i will have gotten this piece of gear after a certain number of runs i could build a web app where i plug in those numbers and click a button after every run and then i know when i've succeeded when i have a web app that solves the problem i have i have succeeded building goals around specific problems you can solve will make delivering on them significantly easier so to go back to the i want to contribute to open source example you don't contribute to open source by wanting to do it there are people who have done that and they have succeeded i'm not going to say otherwise there's also people who just wanted to be an engineer and they succeeded i think you'll be much more successful if you pick goals that are more deliverable so if you keep on your mind that you do want to take opportunities to contribute to open source keep that in the back your mind and dig into more other stuff like work with more things if you like open source and you want to be more involved in it start by being more involved in it use more new packages try more new things read twitter and see what's going on jump in when there's something you can do like if there's a package you're using and the document or the docs for it have a typo or there's an example that's not particularly clear or there's a bug or an issue in there that you think you understand and can make a change for do it that's the point to get involved the contributing to open source this isn't the goal that you start with this is the place you end up and your goals should be things that get you in that direction that eventually land you there goals should be deliverables and if you are building or using things that are open source and there are things you want to change about them or problems you have or literally anything else that you could theoretically contribute at that point do it then but set the specific goal of solving the problem in that project that you're already using if you start from a point of genuine interest in the project and then contribute it's going to go a lot better than starting with the goal of contributing and then picking a project i think hacktober gets this particularly poorly where they expect you to tag repos as beginner friendly and hacktoberfest ready they encourage people who have no idea what the project is to search by the tag and just throw contributions hoping something merges that's the opposite of both good goal setting and meaningful contributions the most meaningful contributions come from people who are using the thing and are interested in the thing the best way to contribute is to get interested in those things the best way to learn react is to build things with it the best way to improve test coverage is to write tests around the things that are breaking and the best way to be an engineer is to build [ __ ] all of these goals have unr have deliverables that are much more focused that will get you to these things but you can't set the end of the path as be an engineer and expect to know which direction to run because be an engineer and contribute to open source are vague enough endpoints that you don't know how to get there just yet and picking goals that have points you can get to will make life a lot easier a framing i like to use when i think in this way is my favorite circles so this outer circle will make it green we'll call this gold or like i'll say goal i i think i prefer aspiration which is what i'm seeing with the types of goals i'm talking about so in this case we'll we'll say that the the aspiration here i was gonna put in the corner for like color coding the aspiration here is uh contribute to open source so your goal is to get to this outer rim but we're just a tiny little dot in the middle here just give us a nice color so this little dot in the middle this is you a new dev and you're in this tiny little spot in the middle and your goal is to get to this outer rim so you can go this way you can go this way you can go this way a lot of different ways to go from the middle here to be contributing to open source i see people doing this chaotic path a little bit too often especially if i change this from contribute to open source to be a developer your goal is to be a developer you're probably on this chaotic path if this is the top level goal you set so how do we improve this how to be a developer let's set a goal or we'll go back to the contribute to open source so let's say this is like the aspiration you want to work towards and delete all these arrows a good first goal and i'll be clear this is no longer uh like i want to be clear about a big difference that you're going to see in how these parts look instead of a goal that's like a big circle you're trying to get to pick a point this point could be build something with deno let's say so you want to build something with deno so set this as a first goal we'll do that now we are building or have built something with dena let's let's be more specific build chat server with deno build something with deno would have been a like a more open circle like one of these and build a chat server with deno would have been on it you can set that goal but it's pretty hard to pick a direction at that point and you have to stay focused on that direction a better first goal could be uh finish denno or go through deno tutorial and your next goal could be shoot copy paste it there we go your next goal could be build chat server with deno and that can get you from here to here and then maybe you have a bug that you find in the websocket implementation or the docs are wrong update deno websocket docs you're now an open source contributor and you got there by setting more specific goals you already wanted to contribute to open source there was a tutorial you liked go through the demo tutorial you decided you wanted to build a chat server with it so you build the chat server you run into an issue in the docs where the docs are out of date or something so you file a pr to fix it and all of a sudden you're now an open source contributor and this could go so many different ways let's say when you're reading the tutorial you find a bug or you find a mistake in the tutorial you can file a uh let's copy face this update deno tutorial like once you've set a more specific goal of go through the dyno tutorial more specific goals can come out of that that you can pick thinking or things like building a chat server with deno or updating the deno tutorials like these goals help you get to this outer aspiration of contributing to open source this is the case for most of those top level goals people set like if we think through i want to learn react depending on how you define learn react that the outer circle could be bigger or smaller but you don't get there by just aimlessly walking and hoping you hit one of those walls eventually you get there by picking goals that help you get there and those goals aren't necessarily picked because of that aspiration they're picked because there's things that you want to do usually and picking and going after those things is how you get to these higher aspirations not by having the raw desire so instead of i want to be an engineer even if you're so lost that you don't know what the next step is you've just you've for whatever reason decided engineering's the thing you want to do first off think about why if the answer's money the only reason you're interested in any of this stuff is money you're a beginner you've never written any code you don't think you're going to like it but you know there's money there so you're here for that close my stream uh danny thompson has a space on twitter right now about how to like get your first dev job ignore literally everything i have said everything i ever have said and will say if your goal is just to make money in the field and not enjoy yourself my stream is not useful to you and that is fine i'm not saying there's a flaw on you i'm saying there's arguably a flaw on me i'm insane and i've chosen to throw away a 400k a year's salary to dick around on twitch and run a company there's something wrong with me if you want to love your job and enjoy engineering and be as passionate as a lot of the people here are ignore danny thompson's space and hang out here but if your goal is make money cash out retire and never code again [ __ ] off and i mean that politely i don't mean [ __ ] off i don't like you i mean [ __ ] off we probably won't get along that's a flaw on me not you go somewhere where there will be better advice for you cool i care way too much about everything about engineering i genuinely love this stuff and if your goal is to make money set that as your goal go figure that out somewhere else but if your goal is to be a passionate engineer that builds cool [ __ ] start by picking things to build and work backwards from there let's say you to go back to uh the standard circle i'll just copy this and delete most of it let's say the the vague aspiration on top is i want to be an eng in here we have our vague goal on top if you a new dev and you pick a lower level goal like a lower level aspiration of copy i guess flip the slower learn react so you have the the greater aspiration of being an engineer you have an aspiration that's slightly smaller of learning react but you're a new dev you have no idea what you're doing so let's pick a first goal which is build a twitch clone and you start working on this and then you realize that react isn't like helping you here because the hard parts aren't the ui it's the infrastructure you might go this way which gets you further away from here but slightly closer i guess i almost want to like change this from a circle on the outside here to like a half circle almost to represent that like you can get to the other side other ways so we have like this half circle here of you want to learn react so you can try building a twitch clone run into some bugs and like infra problems so so you start learning or build webrtc pick something a little vaguer uh learn about webrtc realize web rtc sucks build calculator and then out here i'll put show off twitch clones ui in interview talk about web rtc2 and land your first job so now because you knew dev picked a actually rough goal of i want to build a twitch clone it's my first project you get in there pretty far you realize like oh i figured some of this react stuff but i keep like the video sucks so you take a turn here which gets you further away from react but what's important is you're still getting closer to your goal here of being an engineer it honestly probably be a little more fair to put this like here because it's less far and i want to represent that because you have made progress when you take that left turn the progress isn't towards the sub goal of learning react like that's the important thing when you pick these like lower level goals or like these like higher level aspirations it's okay to ignore them it's actually pretty good to ignore these as much as you can in favor of more immediate deliverables things like i want to build a twitch clone i want to figure out why the webrtc for my twitch clone isn't working yeah learn what about webrtc is not a great goal uh learn enough web rtc to have video working kind of that's like the thing i should have written or give up i'm going to add that because it's actually okay if this goal is something you give up on because your aspiration was learn react and now you find yourself deep in the weeds on this other thing that isn't react you are becoming a better engineer as you learn this even if it like feels like a regression it's a regression from learning react but it is progress in the sense that you are becoming more of an engineer as you learn about these things how they work their strengths their weaknesses etc and then from there you give up and you build a calculator instead and then you talk about all of these things in an interview talking about failures and interviews is phenomenal one of the biggest signals i have for a successful engineer is not how many huge things they've built successfully it's how they handle failure how they talk about reason about and plan around failure and if you have you you set these specific goals you fail all of them and then you show up at an interview and you talk about them even if every single one of these parts you just you outright did not succeed if you show up for at the interview and you talk about those things in a meaningful way that that sounds like you're figuring this stuff out i probably hire you still and i can't imagine anybody would say that a full-time paid edge is anything other than a like an engineer tldr engineers treat aspirations like goals aspirations are not goals aspirations are not a thing you should be working towards goals are the things you should be working towards and goals should have deliverable ends and ideally those goals get you closer to your aspirations but if you have immediate goals that don't don't be afraid to take them aspirations are not a good driver goals are a fantastic driver and aspirations in engineering are way too vague to target directly if any one of these things is your specific goal you're going to be stuck in an aimless place pretty often because it's impossible to know when you've become an engineer when you've learned enough react when your test coverage is good enough or your contributions are meaningful enough the way you know those things is by getting there solving other problems and achieving other goals i definitely see a lot of less junior devs struggling with these things still i have been surprised at how arbitrary of goals i've seen more senior edges set things like improve the file structure goals and tickets are definitely different and i agree people suck at estimation i can see why y'all would think that was what i was going to talk about here but that definitely wasn't a plan here like i very wanted to focus on like individual goals like internalized goals to an extent and ideals like there are intrinsic and extrinsic goals to an extent where interesting goals are i want to be or i want to do or i want to learn extrinsic goals are i want to create i want to deliver i want to complete there there are things that have an end point that's clear and agreed upon whereas aspirations and intrinsic things are like independent there are like internal things that suck to set as external goals because there's nowhere to go when it's inside like that like i i want to be an engineer what you want is probably to feel like an engineer i want to learn react which means probably you want to feel like you understand react and there are plenty of senior engineers very very talented like established people who still suck at picking goals like i can't tell you how many like principal engineers have hit me up with questions like how do i learn your stack you don't learn my stack you use it you build something with it and then you come to us with questions and we answer the questions i also love that aiden has not set goals which makes a lot of sense i i do think aiden you have goals more than you give yourself credit like fossa bot is a thing that is a clear deliverable you wanted to solve specific problems that high traffic chats on twitch were having and you learned what you had to to make that happen and then you had the goal of make the cost reasonable as you host this thing and you learned a bunch of crazy [ __ ] for that like picking deliverables instead of arbitrary like internalized potential places to be will help a ton that's why somebody like aiden like much younger than me and much less tenure than me is still a much more talented dev than me because his goals are better and his ability to deliver on them is too a really good talk i did an interview a while back uh with jason docton from the urad project he learned to code because he wanted to contribute to his charity and paying external like developers to build their website was too expensive and squarespace was to [ __ ] he taught himself how to code with the very specific goal of making his website for his charity and the specific things they needed to do like the donation systems the integrations all of those things and with that goal in mind he was able to learn and deliver so much more effectively i think that's what i'm pushing for here is the way that the aidens and the jasons of the world got so good so fast it was by having something else want like like engineering sucks and the like being an engineer is a bad goal because this stuff kind of sucks and if that's the thing that you're working towards you're probably going to give up because it does suck to get there however this is the big however if you have other things on the way there that are exciting then after spending a night battling your dev environment trying to get react native to just spit out an app after going from forum to forum trying to figure out why your website isn't loading on mobile all of these types of problems exist and are going to be things you run into but man once you've resolved them if the thing on the other side is something you're excited about something you're building towards something you're proud of then all the suck actually reinforces how great that thing is it's the whole it's the journey not the destination but the journey sucks way harder if you don't like the destination so pick destinations you're excited about and proud of so you can get the distance you're trying to go i also want to open up the diagram that aiden made because this is fantastic get this up on screen yep yep is the juice worth the squeeze i that is a good way of putting it uh griff i think that a lot of developers there a lot of new developers people who are just getting started like it's so easy to get enticed by like the amount of money like all the i learned how to code in three months and now i make 200 000 a year [ __ ] like that's that's all imaginary and if somebody did get there they probably had other goals that got them there someone asked is passion something you shouldn't rely on passion for any one thing yes you shouldn't rely on your passion for one specific project to drive you all the way to success but you should rely on feeding your passion to get you through hard things passion isn't a single driver that gets you wherever you want to go it's a very important force that you can feed into that helps you get through the shitty hard parts of engineering and if you consistently like to go back to the diagram i was drawing actually let's say where'd i put it here it is let's say when you get to the building a twitch clone that this ends up sucking and you lose all your passion for working on this thing because of how bad building the twitch clone sucks god i hate this keeps binding can i tell it to not okay control lets me not bind it nice so you put all this effort into building the twitch clone it sucks you get pissed off at it you go a different direction you get passionate about webrtc let's say you get really into webrtc and you want to like do more and more stuff with that that passion will drive you somewhere else and that's fine but you should always be seeking something that you're somewhat passionate or excited about because that will push you through the pain of getting to these hard things like if you can theoretically get from here to here with nothing but discipline like let's say i have the specific goal of get job at fang for greater than 100k a year so you set this specific goal you can drive straight towards this if you have the [ __ ] discipline and effort and like desire to do it you'll probably have to take some piss-offs along the way like go to university and [ __ ] like that but if you just study the [ __ ] out of how these interviews work you focus explicitly on like the cracking the coding interview you find people who work for these companies and talk to them avidly like with the only thing on your mind being whatever it takes i need a fang job for 100k a year or more you can make that a goal and you can drive there this is the passionless way to do it but what's going to happen there is either you burn out before you get there or even worse you get there and you have no idea what the [ __ ] to do with yourself once you're there and i've seen that a lot people who set their goal to be get the fang job and then they do and now they have nothing else to do with themselves they're just confused and lost but if you throughout your process set goals that you end up getting excited about or passionate about even if that passion dies and you pick something else later now when you get to those hard things when you get to this point when you hit your first production bug and you feel like [ __ ] when you set these specific goals and you're doing them in a smaller interval those failures and those pain points hurt a lot worse and those wins don't hit any less heart you'll feel the high of each of these points as you go through it this way where you might feel it when you get there but then you have nothing else to do from there and because you haven't gone in the habit of setting goals that you could walk towards you're just i know i just i know so many people who are lost right here right now in fact i've kind of made it a hobby to find these people and help them figure out their lives because it there's a lot of confused people who like went to university got their job at microsoft have been there for three years now and don't know what the [ __ ] to do with their lives that is surprisingly common doctors and lawyers are not only in the same boat it's basically the only path and i think actually i'm really happy you said that jenny i think that other fields have this as like a necessity like you don't become a doctor by playing doctor on your cat as a kid you do become an engineer by reverse engineering websites and breaking [ __ ] on your parents computer like engineering and software in particular is a very special field where this indirect path is much more effective than a direct one because if you want to be like if you want to be a lawyer there are very specific paths to get there if you want to be an engineer you need to go build [ __ ] fundamentally different and i think that people get trapped in the mindset of a lawyer when software engineering's a whole different world i think we should embrace what makes software engineering special personally speaking but i think you all agree because there's 500 of you hanging out in my twitch stream and youtube stream right now on a wednesday afternoon that you could be doing anything else you all care act like it make the decisions that get you two smaller things that you're more excited about even if it doesn't feel like they're working you towards your specific aspirations you might be surprised stop treating our field like we're [ __ ] lawyers we're not lawyers we're closer to musicians than we are lawyers we're much closer to skateboarders than we are lawyers and i think a big part of why i've succeeded in software is my history in skateboarding i got good at skateboarding by hitting the ground and getting back up over and over again my goals in skateboarding weren't be a skateboarder or learn every trick or get good at stairs my goals in skateboarding were land this trick or kick flip this stair set or do a switch flip that's this tall over this thing that's why i got good at skateboarding pretty quick and that was the mindset i brought with me to engineering that got me good at this too i hope that this was a good rant because this is one i've been holding in for a while because engineers [ __ ] suck at setting goals hey did you know that over half my viewers haven't subscribed yet that's insane y'all just click these videos and listen to me shout and hope that the algorithm is going to show you the next one make sure you hit that subscribe button maybe even the bell next to it so that you know when i'm posting videos also if you didn't know this almost all of my content is live streamed on twitch while i'm making it everything on the youtube is cuts clips whatever from my twitch show so if you're not already watching make sure you go to twitch.tv theo where i'm live every wednesday around 2 or 3 p.m and i go live on fridays pretty often as well thank you again for watching this video really excited thank you




## Your NextJS App is Too Big - 20220828
your next app is too big i don't think you need me to tell you that i'm sure you're already insecure about it you opened up your network tab you've seen how much js comes down you every time you build you see really big numbers sometimes they're glowing red in your build tool and you're like wow that's too big how do i make it smaller we're going to talk all about that let's do it so how do we get started the first and most essential tool in figuring out why the hell everything is too big is the next bundle analyzer the next bundle analyzer is a fantastic package that gives you a nice ui about the website that you've built let's give this a shot on zapdos quick and when i say quick i mean this is going to take a bit i am very sorry it does so first you npm install the package then you need to actually add it to your next config because the way the bundle analyzer works is during your actual build it keeps track of all the things that are installed and then spits out a super fancy html like page to show you what's making each pa or part so big so let's open up vs code hop over to the next config and you link this guy and we can wrap next config with bundle analyzer oops forgot to paren there and now theoretically we should be done we'll join this environment variable and now as we build zapdos we get an html output of both the server and the client js so the server.js this file this is the stuff that gets sent up to your server for some reason this doesn't appear to have floated weird it doesn't matter too much generally i recommend ignoring this file for the most part anyways it might show you if you have some weird package that's blowing things up and downloading way too much but generally speaking that one's not going to be that important the one that is is this guy this shows you each of the different chunks in your app and breaks them down into sections so we can see here pretty clearly that one of our dependencies is weirdly large pusher pusher is parsed 68.3 kilobytes thankfully the par size isn't the one that matters a whole lot it's the gzip size that's what gets sent down to the user regardless any route that has pusher being used is now 18 kilobytes larger than other routes if our app had multiple routes that had meaningfully different bundles we would see those in here and we would see a very clear here's the bundle for each of these things i'm going to do something that might not be the most advisable but i think it will be very good content mark is currently on a date so i don't have to worry about my cto getting too mad about this we're going to run the same on the ping code base so analyze equals true npm run build and now we're going to take a look at the absolutely massive bundles we have on the ping site creating an optimized production build as you see these builds take a little longer this is a very large production app and it looks like the server bundle is still broken here interesting we'll look into that in the near future but here we see a bunch of packages and the crazy things that are a lot more bundles just generally speaking abele is the alternative to pusher that we're using for our websocket stuff right now we also have hlsjs which is how we play videos on the home page the agora sdk which we're using some of our webrtc stuff which is absolutely massive this sdk is rough i good luck have fun if you're using it for things but here react seems pretty small and this is hilariously massive like 1.04 megabytes parsed hilarious this makes it very clear why things are and are not slow but if we go here we see all of these different sections and which pages are how big the thing that sticks out here is that our underscore app is 211 kilobytes which is pretty big because that means that's like the baseline for every other page so if we look into the underscore app js we can see here all of the things that are necessary just because of app and here we see the source pages has about 40 kilobytes of things that everything needs we have our core node modules which includes react query popper next trpc and a bunch of these other things this is stuff that's mounted in our app.ts so in the app tsx folder or file all of the things in here are called in some meaningful way so all of them are included just because the app file was included this gets combined with uh i won't let me zoom out properly the core like react dom bundle as well as the core like next bundle and then that gets loaded on every page as a result there are things like the marketing site for example which is our home page has a few weird things within it that are unique to that but for the most part is a pretty simple bundle so in this the additional like js being loaded on that page is only about 20 kilobytes we go to like the like the dashboard catch-all that's going to be even smaller but if we go to i don't even know what that's chunk for uh any of these chunks for pages that are interesting not particularly most of these are not necessarily very interesting page wise and also change that to the gzip size can i yeah i wish there was a way to pick a route and see all of the stuff that is like for that specific route it's not that simple sadly because it's just kind of spitting out chunks and then depending on which page you go to different sets of these chunks are being loaded but the thing that i really wish there was an easier way to do is see the relationship between the number here so when i see that like underscore app is 211 kilobytes how do i use that number and break it into parts yeah a lot of these things like the dashboard or anything's a lot bigger uh here's a big one the pricing page we did a bunch of crazy stuff on the pricing page and we loaded uh like a stripe thing to do that as well so this ends up being significantly bigger than some of the others what's the number on the left again is it that's where the usage size so this is the amount of stuff that's like unique to that route so we can see here on our dashboard since this one has all of our blog posts on it there is more js content because there's more markup that's actually loaded on those pages this makes it very easy to see the different routes and the different amount of js necessary for each of them and it's generally a really nice way to see how expensive any given one of these endpoints or requests is generally speaking though if you have a weirdly large bundle you can start from this view in the client html once you've set up next bundle analyzer hunt for things that are suspiciously big and then try to not load them until you need them what does that mean not load them till you need them well or with the pusher example if we didn't want to load pusher until we were let's say on the client and loading like page content what we might do is in the bundle rather than having the i have a dynamic import in here in line uh where did i use it here so in here i have the lazy questions view this is wrapped dynamic just to make ssr false all the js still exists in the bundle however if i wanted to i could take the questions view and all of the things it relies on including pusher break those out into a different file and now this bundle will be separated so if i go back to in here the pusher bundle is separate but i believe that this will still be loaded in there and i would imagine that the first js load for the home page is yeah 149 kilobytes so let's go get that down fast by breaking this into question view dot tsx go back in here copy all this paste all this export default a bunch this is necessary anymore if i go back in here i can delete a lot of things we'll start with this guy keep deleting [Music] god i wish that the trackpad scrolling wasn't so chaotic in here and this needs to be import slash components question view i think it's dot dot slash components question view nice now none of that is needed and a bunch of this isn't either and if i understand how dynamic works correctly this should now be smart enough to significantly change what those bundles look like so we'll build again and look at that it's now 121 kilobytes because we moved out the 20 or so kilobytes of the pusher bundle separately so uh yeah this is the new version and in the static page do i have the old one around i don't because it uh actually yes i do have the old one cool so it's 132 kilobytes before in this module and i think we got that down this is app so it's actually not going to be any different do we have the bundle for the the root here somewhere yeah paige's index is now 17.37 or it was and now where is that page 11.07 but it just it looks entirely different which is the most interesting part in my opinion uh which one is okay that's the server one that we don't want anymore yeah like which packages are bigger and smaller has fundamentally changed between the old one and the new one because things can be broken up way more and you can have these smaller parts now specifically because you broke the files out and you have a dynamic load boundary between them so things like that where you're willing to say hey i don't need the question view to load until after the js has come through hell i'm okay with like a placeholder in the interim you can use suspense with react.lazy you can use like import breaks using dynamic like i did here but solutions like that to take the big chunks of js throw them somewhere else and then break them up via file boundaries and like lazy loaders allows for build tools such as the swc and webpack builders in nexjs as well as things like veet and the the ecosystem when you're using react with it to automatically split your bundles and load the js necessary based on where the user is and what content is loading i think these are the pieces that will allow you to take a very big and heavy next.js application or honestly even one built in v and break that down into the smaller bundles necessary for your users when they're loading and using your application there aren't too many tools to help you break up your bundles and find logical places to do such that's kind of what our job is as developers who care about performance so using things like the next webpack bundle analyzer and your own intuition working with the code base to find the routes that are too big find the things that they don't need and break those out to make the initial load smaller will make your websites feel faster and it will impact the performance that your users feel i highly recommend taking the time to run the webpack analyzer against your next js application just to see what you could remove from your bundle maybe break out maybe you have some package you don't even mean sneaking into client hell we hit a person at uh or in the discord earlier that had or discovered the entire amazon aws client was being imported onto the user side which was like 600 kilobytes of javascript that the users did not need actually i think it was megabytes of javascript that users didn't need and by putting that behind a like type import barrier they were able to prevent that entirely so i hope this was helpful look for these shortcuts and look for these gotchas take advantage of the bundle analyzer and try to figure out how you can make your application a little bit smaller if you have success please share in the comments what you've learned from here and how this is or what you found in your own bundles and if you've found any other tricks as well please share those too make sure you've joined the discord if you haven't already t3 dot gg slash discord and if you haven't joined the memberships on youtube just yet please do for the next couple weeks youtube's actually doubling the amount of money that i get whenever you are or do a mod or whenever you join as a member so instead of the five dollars here or contributing getting caught by whatever the cut is youtube just hands me ten dollars whenever you join as a member right now so please if you don't mind hit that membership button i really appreciate it you also get access to the sub-only channels on the discord if you do thank you again for taking the time to listen to this rant i hope that we're able to make your next.js app a little bit smaller and a little bit faster with the tips that we showed today pcl




## Zod Goes Where TypeScript Can't - 20230119
Zod is an incredible validation library for typescript you give it an object with whatever the Hell in it in Zod helps you make sure the object has whatever the hell you expect so a basic example we create a schema in a z dot string and we pass it in the thought parse function tuna and that now validates that tuna is indeed a strain we pass something else like 12 it's going to throw an error super useful because now it can guarantee whatever we did here is real and valid and if we use safe Parts it won't throw an error but it has a success Boolean value and then data or error depending on if it's true or false which makes it trivial to parse something and know that that thing is valid so if you create a user validator object which is a z dot object that takes in a username which is a z dot string you can now user.parse an object and this will throw if it's not a valid object all the different things you might validate like that a string is minimum five characters maximum whatever a specific length that it's an email it's a uuid it's a cuid that it matches a specific regex that it ends with a specific string that you've trimmed the white space from and it's good that it's a date time or not a date time all the things you might want to check on a random pile of data the goal of Zod is to guarantee that your expectations of how this thing is shaped are true sound familiar kinda sounds like typescript the thing about typescript is it's not a guarantee typescript doesn't run on it doesn't run typescript code becomes JavaScript code before it runs so any type enforcement you do in typescript gets lost after it's been compiled so if you have a function that you enforce this takes in a user and a user has a username you compile that typescript and someone calls that function where username is a number instead of a string your code is going to bomb and do a bunch of things it's not supposed to because the typescript can only check what exists within the typescript system at compilation time it has no idea what happens past there the value of Zod is that you can guarantee that the thing being passed is the thing being passed this is great for everything from parsing requests to validating data put into forms to validating data from arbitrary apis that your concern might not be in the right shape the other benefit is the types that get generated when you run validation are really good say we have const sum input equals username hello age 17. and we want to be sure when we process this that that input is valid we might have a schema or uh input schema equals z dot object and this has username Z dot string and has age don't need to put a Min on that I'll do a Min of one for now now we have this input schema now you can do const parse input equals input unknown so at this point we're assuming we don't know what this input is this could come from an apis come from anything in the world and we want to do something with it we can return input schema.parse and now when we call this if I have a const parsed equals parse input sum input we now know the type of this here because this will throw if that type isn't valid which is magical the power of that to guarantee that this is the right shape and to process this correctly is super cool where it gets way cooler though we have this.min here let's say we want to throw a custom error if you're not 18. what I can do here oh look at that copilot's doing its thing I'll put an extra quote at the end that's fine so now if you're not 18 when you pass this in you're going to get an error you must be 18 or older to use the app so this will throw an error when you call it if the input age is less than 18. that is so powerful in the type definition you'll notice here I haven't written any type definitions in this file other than colon unknown nothing else in here is a type definition I can delete this well I guess I have to leave the unknown because I don't know but I can delete that delete this pass empty object here and this is still valid code this is going to throw in production but it's going to throw an error that we don't have a username that's a string super powerful you get types out of it as a result just by returning something parsed it now becomes typed so I have like const untyped equals unknown this unknown thing is unknown but then when I pass it through here we now know the type because this will throw otherwise this would basically be the equivalent of typing like if untyped if no untyped dot username or no or untyped dot user or type of untyped.user name is not equal to string or no untyped is it going to auto complete that for me I'm starting to yeah it's mad because it's unknown but this is basically what Zod does for us it writes a bunch of checks that check if the thing like like each subfield exists so I can do if no untyped or he doesn't know these exists so because typescript is typescript but the point of this here is that you'd normally write a shitload of code to validate all the stuff I did here and the type definitions that come out of this are significantly better but what about yup but what about Joy but what about all these other Solutions none of them know how typescript works the value of Zod is how well it understands the things on both sides of it it's taking in invalid data data that it hasn't been validated and returning you validated data it's a very simple package that does that piece incredibly well has awesome Primitives for everything from URLs to enums and it hooks up to all sorts of things like form libraries like reactive Forum or directly to trpc in fact the creator of Zod Colin actually started trpc originally because he saw the opportunity using what he learned through Zod to make API definitions and iteration simpler it's that deep understanding of typescript and type safety that makes Zod and trpc both so powerful I feel like I haven't given Zod enough credit for the importance that it represents as a package the ability to write a validator one time in one place and then import that on the back end to validate our request and on the front end to validate a form with the exact same errors in both is like mind-bogglingly cool and it has made my life building full stack web applications significantly better if for some reason you haven't already checked out Zod please do it's one of those essential packages that I just I can't live without the web is inherently unsafe you can never truly guarantee that an input is the shape that you expect and something like solid helps you smooth out those rough edges and have a safe experience both in the type sense and in the runtime sense please check it out if you haven't let me know what you think leave a comment below if you letting me know how you feel about Zod and validation in general YouTube thinks you're going to like whatever videos appear in there so give that a watch to you thank you for the time good seeing you nerds peace




## Zod finally has competition (...created by Zod_) - 20250206
over the last few years Zod has kind of taken the typescript World by storm finally a validator that understands both typescript and the data that we want to validate there's one way to take a pile of Json or things that someone entered in a form and validate it and make sure it is the thing that the user said it was you can do checks for everything from the length of a string to the range of numbers to so many other crazy things I even got Colin to add an emoji checker for me nuts so cool but there are catches as great as o is it is not the fastest thing it also has kind of not great typescript performance it also most importantly doesn't follow some validation standards Colin did a deep dive on those standards trying to comply with them and ended up running into a handful of problems rather than just work through those problems and move on with life like most do Colin wanted to improve things but he didn't want to just improve them for himself he wanted to improve them for the whole ecosystem and in doing the process he kind of killed Zod in my opinion why am I saying that well here's why he introduced the standard schema reference this is a schema reference that works for more than one Library it works with Zod but it also works with valy bot and archetype and in the future could be supported by many more things I'm so hyped to dive into the future of schemas and validation for all typescript devs and I really think this is an important one to watch if you're writing typescript that users ever touch but first a quick word from today's sponsor I've been rolling my own aore lately and every time I do it I just miss clerk more for all the projects I can possibly throw it on clerk has been an incredible in product to use I've never had so much fun setting up off and it kickstarted me into building more apps because when setting up off was no longer this crazy process of back and forth and now it's just a dashboard I click two buttons in and then the code just works across all my projects it's unbelievable they provide all the things you need for user management from all the backend crazy stuff more importantly all of the components in UI no more building your signin page no more building that little icon in the corner you click on to have the drop down menu all of that just comes as part of clerk if you want to see it in production look no further than the actual upload things site sign in sign in with GitHub done here's my actual upload thing stuff and this fancy little button here all that type of stuff handle for you from clerk same thing with pick thing by the way you click it and here you go how cool is it that you get all of this functionality built in with almost no code it takes literal minutes to set up you'll never have to worry about scale again clerk is a real service so it does cost money but their free tier insanely generous it is up to 10,000 Maus for free but it's not your usual measurement of an Mau where anyone who signs in now counts they have to come back over 24 hours after signing up for them to count so you have a huge surge of users that disappear you're not going to get a crazy bill they have to be actual users so if your users are paying you money the pricing is going to scale great in the 25 bucks a month and then 2 cents for additional users it's actually a very good deal if you've dealt with all of these things yourself in the past I was skeptical before I tried it and I found them pretty great thank you CLA for sponsoring give him a shout today at so dlink clerk you'll see in here we have archetype which is one of those options in chat already shouting out Colin it's so cool that Colin archetype and the vbot devs are all working together to make a real standard so that we can write a validator once and have it work with all these other Solutions in all these other places I've run into this recently myself because valy bot was one of the only options that supported open o which I used for T3 chat even though I liked using Zod and I was familiar with the syntax so now we have Zod and Valley and the code base cuz I need to use both for those different things so having support for all of these is great Zod is the standard Colin put a lot of work into it he put so much work into Zod that trpc kind of came out of it as a result Valley bbot was a originally a I believe it was a research project I read a bit about it when I was working on the openo stuff yeah the bachelor's thesis this was his thesis project implementing a modular schema library and typescript with a focus on bundle size and performance also had mishko and Ryan carniato both helping advise it and give supervision over it which is nuts what a white paper it is kind of trippy to see mishko the creator of angular and Ryan the creator of solid being cited in a thesis like this but it's so cool real work went into that and archetype somehow is even crazier I've covered a bit of the work archetypes done in the past not even just like archetype itself but specifically trying to cover the absolute Madness of the tooling and other stuff that the archetype creator built in order to make sure the types are as performant as possible just for one example of the awesome things that they have done for archetype at test this is as far as I know the only real library for benchmarking your types not like benchmarking how fast the code is but benchmarking How deep the types go so if you have a custom type that goes deep with layers and doing a bunch of crazy inference this will make it way easier to see how many layers down it goes there's even tools to generate stats on all of the type definitions that exist in your code base and summarize performance metrics for your type definitions it's so hard to get this info and I am so pumped this exists if you're working in a big code base you just randomly have the typescript server failing all the time these are the only tools that actually make it easy to identify why and fix it it's so good that this all exists I am pumped that the work's been put in over on the archetype side but it was different enough that I wasn't using it as awesome as it is and as awesome as I knew the performance could be it was different and different was enough for me to not put the time in to do the definitions now I don't have to think about it as much because if I learned this one thing the standard schema I can use any of these libraries and in the future if new better ones come out I can switch over to those as the thing that actually fulfills these schemas and it doesn't really matter and if I want to do something like have the client use Valley bbot but have the back end use Zod for the deeper like confirmations and such it's trivial to do that now that's so so cool the spec was designed by all three of the people we were just talking about creator of Zod creator of alibot and the creator of archetype all work together to make sure this problem was solved for all of them which kind of implies it's going to be solved for everyone else going forward too you'll see a bunch of them in here hell even Julius is already cont of course Julius found his way into the contributors why am I not surprised yeah here's what the interface looks like any library that implements this can now follow it what does it actually look like for us to Define things with it here's a string validator that follows the spec string schema extends standard schema type string message is a string the implemented interface here string message colon string invalid type string schema return type string message and we have a validate function that was written here to do some type of validation if it's a string then it just returns that if it's not issues colon that string we recommend defining the standard. validate function in terms of your libraryies existing validation functions or methods ideally implementing the spec only requires a handful of lines of code so as I'm starting to read this I had a realization and it's a realization that was just confirmed by the archetype Creator here in chat this is not meant for us to use so I was just saying if we learn this we can use this one thing and swap libraries whenever you probably should just use the library of your choice it's probably going to be easier to switch that over than it is going to be to move your actual user code and your application code over to the schema the point of this is actually something I would would consider quite a bit cooler this schema is for Library authors and framework authors so if you're the creators of nextjs and you're adding validation to things in there or if you're working on something like openo and you're adding validations and schemas there you can now build using the standard schema and then easily trivially support all the different validators so if you're like me and you like Zod you don't have to install valy bot just to support open off you don't have three validators depending on the opinions of the different tools or ecosystem things you're using if the libraries you rely on use the standard you can now connect that standard to whatever validator you choose to use so what this has actually done is make it way easier for someone consuming a framework or a library to use any of the validators they want to without having to install multiple validators and now I'm even more ashamed that I have two validators in my existing codebase good things for me to fix in the near future a bunch of things are already supporting the schema format here everything from T3 environment to upload thing have to shout out our stuff okay trpc as well which is awesome trpc was largely built around Zod now you can use it with anything and this might actually help with the trpc typescript server performance issues that I and many others have run into tanac form supports it tanac router supports it Hano middleware supports it but it's in construction same with quick open off awesome that means I can move open off to Zod now or move everything else to something else Renown there so many things are already supporting this super super cool to see we were a LinkedIn example using tan stack form here here so we have a schema here in Zod in vbot and in Arc and now in the form we can swap between any of these validators and it will just work the exact same way we don't have to pass an adapter because it's smart enough to use the schema that we pass it to infer the correct types using its internal scheme of validation it can still run the validator you give it but it knows the types and it can be correct with the type definitions very easily now like if I change this to have something else nope any errors oh no errors I was hoping for an error here will I get syntax and I'm not getting any errors here at all yeah I might need to Fork this on stack BL to actually see errors okay just got to use a a real browser not saying Zen isn't a real browser absolutely saying Firefox isn't cool so now we have our different validators like we did before if I put something else this type errors because it's not an option in this validator if I put other validators we'll get the error that that doesn't exist for any of them that's genuinely really cool that we can just swap between validators and it will know that this doesn't exist if I put that in here something else c. string now we don't get the error when we use this OD one if I switch over to use archetype instead we'll get the error again the reason this works is because internally hand stack form is now using the new standard schema so it can take any of these validators and resolve them to the standard schema so you have one pass One path one way to add a schema and as long as all of these things are compliant you're done this is great for people like Tanner to make things like tan stack forms because you don't have to do all the extra work to support all these different things you don't even need to add an adapter anymore previously the pattern was you'd have to wrap the validator in some crazy adapter that was specific to the library that you were building that's all gone this is a huge change for Library authors in particular and this standardization is going to make it significantly easier to support a whole of the different validators and if you're building a new validation Library you now have an in too previously it was really hard to justify any of these moves because if I was to move over to archetype I might not have a binding that I need for trpc or for react hook form or for something else I know a lot of people who are sticking with really old solutions for doing validation I know a lot of people who are still on yep because it was was supporting the tools they were using and moving off it is hard and scary seems like it's going to be a lot better in the future obviously everything doesn't support the standard schema yet I genuinely hope we're going to see that change over time it's going to enable all typescript devs to take advantage of all the different standardization validation libraries without having to worry about the things they use supporting them it's going to take some time before everything we use supports this but honestly enough of the things I use support it now that I might start moving off Zod and I am so thankful that Colin enabled me to not have to rely on Zod as much anymore it is incredibly rare to see a Dev take their own project and make it so you don't have to use it anymore but he did it Zod effectively killed Zod and I am so so thankful for Colin and the work that he did alongside these other creators here in order to make a future that is very bright for whichever method you want to use to validate going forward thank you all for watching and until next time peace nerds




## Zoom Picked My Stack 👀 - 20240719
why we chose the T3 stack at Zoom this is an article I'm very excited to see Aon has been one of the coolest community members for a while now and I believe late last year maybe more recently he moved to start working at Zoom to help them with all of their SDK stuff zoom's trying to build more tools for developers to include their wasm servers in their applications and let's be real they baited me into looking at this cuz they're using T3 stack and I have to take a look so uh I'm not being paid for this I have no affiliation with zoom we're not even using them for pay we're using a competitor but after this I might actually consider changing that because I'm pretty hyped to see what has led the Zoom team to considering T3 stack for a lot of the stuff that they've been building so let's dive in at Zoom we want to empower developers to build Innovative and engaging products with the zoom sdks to give them a head start we're creating a series of reference apps across different verticals to give them a good starting point to building their own apps there's a lot of debate around the best way to build a web app on the internet today but this is a Blog that isn't about that we'll walk you through our process selecting the technology stack to build reference apps and why we decided to go with the T3 stack oh boy oh boy what's a stack for reference apps anyways we wanted to ensure that our technology stack would be useful for as many developers as possible for example we could consider building our front end in Rust to make things blazingly fast but it would be useful for a much smaller subset of our potential developer audience don't stuff rust where it doesn't belong maybe using WM stuff for encoding and decoding video efficiently maybe but the built-in browser primitiv are going to be better for that anyways and you shouldn't be doing that in JavaScript so yeah rust for front end does not make sense rust for doing some types of compute on front end occasionally perhaps makes sense yeah when building for the web it's hard to justify using anything other than JS however the lack of type safety among other drawbacks made us pick typescript which is a super set of JS yep if you're building a library and you're building examples please use typescript if you write typescript well then most of the type definitions shouldn't even carry into the code copy pasted and even then they're very quick to delete so if I do happen to be one of those few devs that's refusing to adopt typescript having typescript examples isn't particularly at Cost because you can still just delete the little bit of type def in the file so yes all examples at this point should be in typescript typescript simplified the process of writing and managing the app within our team ensuring seamless collaboration on shared features across both frontend and backend components huge this is one of the biggest things about typescript and it's why Microsoft made it they needed the ability to make sure when things change when lots of devs are working on them that doesn't break unexpectedly and if you're building an SDK that's being used in a lot of projects it's really nice to have a repo with a bunch of those projects in it just using all the functionality and then when you change something in the package you'll immediately get red squiggly lines and type errors and build errors because some of that code is expecting things that either do or do not exist inside of that package and being able to change a type signature or deprecate a function and immediately see what's affected necessary if you're a library Dev it's still as painful to make good types as a library Dev if I've learned anything with upload thing it's that but the benefits are so great too it does add extra syntax though and as the article says here it can be intimidating for devs that are unfamiliar with the language but the code still reads the same as JS and most of the added syntax can be skipped over while reading through the source yep there's plenty of people whose brains just turn off at the type definitions and only read the actual code not the things describing the code's type definitions just the actual logic and you can still read types script fine expanding on the core idea of choosing Tech that with the widest application we chose react it is still the most popular framework library to build for the web because of the simple programming model and composing of components yep it's really hard to justify having your main example not be react at this point not just because react is the most popular but the react ecosystem and the react developers are the most willing to adopt new tools and solutions because we built such a modular space since react doesn't come with solutions for a lot of these problems because it's really just a rendering Library there's now a culture around adding and removing Parts almost like Unix style so it makes perfect sense if you're building an SDK to make your examples using react while the zoom video SDK uses jwt's for session authorization which makes it compatible for any backend or framework we limited our backend choices to those written in typescript so our audience wouldn't need to know another programming language another huge thing yes a lot of companies probably write backends in things that aren't JavaScript obviously I'm not saying that's a bad thing at all what I will say is if I'm working at a company consider considering adding something like the Zoom video SDK the person who's going to explore that and play it out is probably leaning towards front end they might do some backend Dev but it is not their strength the person exploring the zoom SDK is almost certainly frontend leaning so making sure the backend part of the examples is something they don't have to learn more about huge very very helpful and I don't think it should only support JavaScript back ends but I think the examples being structured for the people who are going to be reading through it and making these types of decisions that makes a ton of sense totally agree there to build a fullstack web app with react we chose nextjs it do a great job of abstracting away the complexity in web tooling both for the front end as well as for the back end now we're set with a solid foundation good pun yeah technically react not solid but yeah so what's next literally capital N next clever react and next at the foundation for our reference apps but we still have to answer some certain questions like what about the database or how do we handle off before we could answer these questions we need to decide whether to use open source libraries for these features or develop our own from scratch if you can use open source libraries you almost always should especially for things like off choosing a specific Library requires that the developer using the reference app understands how the library functions potentially creating a barrier to entry however we quickly realize creating our own implementation would present greater challenges for Developers for example to make any changes Dev would have to read the source code to understand our way of handling off with an open source Library the user can simply read the library Docs instead when needed avoiding Reinventing the wheel would also allow us to allocate our time towards building more apps for different verticals I like this too this is actually one of the best cases for a stack that's particularly flexible if you want to have a bunch of reference examples and you're literally changing projects every week or two green Fielding a bunch of stuff something like T3 stack makes a ton of sense and I'm very excited to hear how it's worked out for them so what is the T3 stack T3 stack is built for nextjs and typescript most projects will use the additional T3 stack recommendations like Tailwind trpc Prisma or drizzle next author potentially clerk in the future you get the idea you haven't already seen create. t3g best way to start a full stack type safe next app and we have all of these things listed we should add drizzle and like restructure the homepage in the near future we'll get there anyways they also recommend using our CLI and our docs love they're calling that out here if we started with a new next project and chose from the available libraries we'd end up with something similar the T3 stack made it easy for us to start without having to set up every Single part ourselves the option to use the newer app router in next was recently added to the T3 stack as well we decided to stick with p's router for now also totally acceptable I know a lot of people are going to think oh Theo you're the nextjs server component app router guy what do you mean you can use the old Legacy Pages router isn't that deprecated you recommending next 12 no Pages router is great right now I still have a lot of projects that are either built entirely on pages router or still rely on P's router for a bit of functionality it's a fine solution and it's very well supported and it is still a default in a ton of things for a reason I like app router in the new patterns but P's router is totally fine to use to this day there's actually a few projects that I almost wish I had started with Pages router but I've made app router work how I needed to there but uh yeah app router is both more flexible but also has way more foot guns Pages router has a couple massive foot guns but once you learn to just never use those features it's a little bit easier to use on a team especially a team that's newer to the patterns and functionality styling Tailwind yep just use Tailwind at this point like if you have a disagreement with tailwind and you haven't used it for more than like a week yet just shut up and try it like give it an honest go I hated the thought of Tailwind when I saw it and then I used it for a week and now I'm one of the biggest Tailwind proponents it just solves so many problems with styling it's insane we also use Shad C and UI for the UI components to save time on writing the UI while still owning each component as part of the source code it is accessible out of the box and we can allow devs to easily change the theme according to their brand yep yep Shad youi is so nice for this off they're using next off awesome next off is a great solution there's also new ones like Luchia o and obviously the sponsor of the channel clerk I think Clerk's easy to set up but right now next o is the only option inside of create T3 app that might change in the future and editor's note if that has changed by the time it's coming out we'll stick that somewhere in the video anyways database and omm we knew wouldd have to use a SQL database for storing user data well you could use other things especially if you're using Prisma because technically prismo works with which was miserable for them to make work but anyways they chose postgress as it's one of the most commonly used open source databases to keep our DB queries type safe we also need an omm Prisma still the default in 383 app we should move it to drizzle prisma's fine it's not as fast or nice and modern as drizzle but prisma's still fine and the star of the show that brings it all together trpc it blurs the line between the front end and the back end in the best way possible I introduced it to the team which was apprehensive at first but they quickly fell in love I love that because this article is as much toon sharing with ois devs what their experience is and why they chose this as much as it is him telling the story of how he convinced the team of these things too and trpc makes these types of things so much easier the relationship between back end and front end can be its own field like you can have whole teams at your company where all they do is design the API layer between the back end in the front end in a way that works and scales trpc just does it and it doesn't great like graphql to do it right take a team of five focused on it getting it right trpc just does it and it's smoother and faster and way easier to work with and it has so many crazy magical superpowers like for an example here's a project I've been working on it has page inated data on the homepage well the view page I'll just go to it in the browser it's the project that I'm working on right now to manage all my thumbnail faces and it has infinite scrolling I hit load more and it loads more I'm on a VPN so it's a bit slow but adding that functionality is super simple and I could even make it just trigger when you get to that point in the view I'm lazy we'll get there but the actual code to call that is so simple here I have data fetch next page has next page api. images. get paginated data or get paginated images. use infinite query this is just react query tpc's react bindings just wrap react query with the trpc bindings so API is just my name of the trpc helper if I want to get other things it's just API Dot and notice that it autocompletes image dot get latest get paginated it's all just there all the return types all the input types all of that is all type safe but the magical feature the thing that blew me away when it got added in V10 what if I want to see the source code on the back end here because this is just an API call all I have to do to see that command click on get paginated images and now I'm in a backend folder see we're now in Source server this is the API itself it has an input which is using Zod to validate to make sure we're passing at the right thing and it has the query which is the actual function that runs when we call it whatever we return here is now going to be type safe in the actual definition that gets used on the client side too so whatever I return here I now know that type def here the infinite data is the data coming from that return in here I'm using the context as my way of accessing the database I could have just imported DB directly but having it bound to the context is a nice convenience so context. db. query. uploaded images. find many where grab the model grab these helper functions filter things make sure it's the right user push all the checks I want to do when I actually fire the query and return it with an and rapper relatively simple this is super handy but the thing you'll notice here is most of the code has nothing to do with trpc it's just writing typescript like I'm just writing what I need to do there's no type definitions there in fact if you look closely you'll notice there's no type definitions in this file this is technically a vanilla JS file no types here at all the magic is that using Zod as a validator and using typescripts inference when you return results in the thing being done here being fully type safe just from the validation on the front and the return type on the back being Auto defined through inference so it's that easy if I want to make a new endpoint simple example I can make it a protective procedure which is just a wrapper around a procedure that requires you to be off I won't even bother for this one so we'll do public procedure in this one we could have an input it it's as simple as do input to give it one perfect we'll just auto complete it cool I like making it as part of an object so we'll do that Z doob I'll call it message so now this takes an input of a message string and then it returns it we can say hello plus that well sorry it needs to be input. message cool if I want to call that it's actually quite simple const example equals API do image Dot and it all just autocompletes simple use Query message cool an example. dat have over it the type's going to be string or undefined because it's possible it hasn't loaded yet but if it's loaded we know the result is a string and what's really cool here is if I change something here like I change this to be wrapped like this response I don't have to save the file I'm leaving the file not save and here you can see the type already changed so if I do data. response there and I change this over here to be message instead without even saving get the type error because this is all happening in typescripts Virtual like type Checkers this is all happening in the typescript instance running in VSS code we don't need a build check we don't need all these other steps it's just using the inference built into typescript which is why trpc is so powerful instead of defining an API like service between your back end and your front end trpc is using typescript as that service as that API layer as the documentation for your API and it's so good it's so good if you can be using trpc you absolutely should be and every time I I don't use it on a big project I end up regretting it and adding it back in including this one I just rewrote this entire project so I could do it with trpc instead and it's made life so much easier anyways you already know I'm a trpc show there's a reason for it hopefully this helps emphasize why back to the article it allowed us to work individually on the same features across the stack without having to worry about someone else's code not only does this make collaboration effortless it also makes reading and navigating the code a lot easier couldn't agree more especially again when I want to see what this backend code does command click now in the backend code having that in like very front and heavy code is magical and it makes reactors it makes big changes it makes reading code reviews and playing with things just all so much easier if you're unfamiliar with any of the tools mentioned in the blog you can find great explanations and guides for each piece in the T3 stack docs there is a huge Community Building using these tools and we're excited to be a part of it huge thanks to everyone who's building open source tools and especially the contributors behind the project care a lot about developer experience in developer productivity both internally and externally we want to make sure that our reference apps are using modern tools that are easy to build with as well as maintain both for our teams and for yours we think these tools strike a great balance between impacting most devs and being easy to build with and maintain they even have a link here the intro blog showing some examples aesome stuff worth checking out I'm hyped on this huge shout out to Aon once again for getting this opportunity and taking it like joining a big company like zoom and pushing changes like this is terrifying to be doing it as early in your career as you are is so cool so like huge huge shout out to Aon give him a follow on Twitter he's killing it with the devil he just convinced me to Showcase Zooms sdks in front of however many tens of thousands of people so clearly he's good at what he's doing and until next time peace nerds




## _90% of code will be written by AI in the next 3 months_ - Claude CEO - 20250317
by now you've probably heard this quote from the anthropic CEO if I look at coding programming which is one area where AI is making the most progress what we are finding is we are not far from the world I think we'll be there in 3 to six months where AI is writing 90% of the code I get why you might not agree with this and then in 12 months we may be in a world where AI is writing essentially all of the code I could never have imagined myself agreeing with or defending a quote like this even like two months ago but the more I've gone down this chaotic AI pipeline the more I'm starting to see the Hidden Truths of these statements what Dario is saying here sounds terrible it sounds like all of our jobs are about to be replaced with AI I don't think it's that simple and honestly the second half of the statement is kind of garbage but the essence of it is hinting at something really really interesting about how code will be written in the future we're going to get to that in just a second because if I'm going to pay my bills and I'm not going to be able to write code anymore someone's going to have to we'll be right back I need a vent for a second I've been trying to find a good way to take the data coming from AI apis like open Ai and get it to my user immediately while also storing it in a database everything I've tried is a mess and ends up just sending way too much data to the user or not keeping things in sync at all today's sponsor is convex and if I'm honest with you guys they didn't solve this problem keyword didn't but now they do I complained about this to the team over there because I wanted to use convex for T3 chat and they're making a really really compelling argument now the new persistent text streaming component that that they built just to demo how to do this right is incredible and their solution honestly it's genius if your database was to send an update every time the message changed it would probably send the whole message not just the little bit of extra text added and when you're streaming token by token that is horrible their solution is great when you're streaming it from the server you get it token by token the way that feels really good and it updates immediately but if you lose connection or you open it up in another tab God multi tab is the bane of my existence right now it just works it isn't streaming quite as smooth because it's going sentence by sentence instead of word by word but it solved all the other problems I have by doing that and it's I never thought I would get here but I feel bad that I'm not using convex and sure they're sponsoring this video but I I have a lot to go think about if you want to avoid the mistake I probably made here check him out today at soy. l/c convex so what the hell is Dario saying here and why do I think this is in any way shape or form a reasonable take as always with the spicier takes I need a diagram because people seem to think I'm smarter when they can look at what I'm thinking instead of just hearing it 90% of code will be written by AI in the next 3 to 6 months there's a couple questions we have to ask before this statement can make any sense to us question one is what code is this code at companies is this code on GitHub is this code in general what code are we talking about like what is the bounds that 90% of is going to be covered in 3 to six months question two is who's writing this code is this being written by professional developers and when I say written I mean prompted by people who are writing code for a living or is it people doing it for fun is it people playing around with cursor is it AI tools doing it entirely themselves who's writing the code that we're talking about here and three most importantly has this ever happened before we've all seen Prime's tweets 22 months into 6 months away from AI stealing your jobs cuz people have been saying this in 6 months we won't have Dev jobs anymore thing forever and that's if the way you're interpreting what Dario said here is 90% of our work is going away that is and you should be annoyed by that because that is not a statement that makes any sense at all and I agree 90% of our work isn't going to be automated in the next 3 to 6 months as developers that's absurdity but there is something similar that has happened in the past imagine you're around when the language C first came out when C came out most of the code we were writing was in obnoxious horrifying systems like cobal or if we wanted actually performant code we would just write it in assembly so imagine when C first came out if you want a performant code for platforms you'd have to write assembly when C first dropped imagine somebody saying in 3 to 6 months 90% of assembly will be written in C at the time this would be a nonsense sounding statement because there are so many devs that are incedible at assembly there are so many projects inlight that are written in assembly there is so much work going on in the assembly world the thought of a new language replacing all of that in a short time frame is just funny it didn't replace it though here's how we have to think about it if this is the circle of assembly code and we say 90% of assembly is going to be written in C what you're thinking is something like this you're interpreting us as saying is this part is real assembly and the rest isn't the rest is C and this is how you interpret that statement that we're taking the assembly code being written right now and we're splitting a line here where the existing code where all the stuff in this box here this is all going to be written in C anything that's currently in this box written in assembly screw you you're gone that's going to be compressed in this tiny little thing that is not what happened what happened was very different this is what happened assembly written natively has become a much smaller portion of the overall native application code space c greatly expanded the number of people who can program code that operates on a native level C broke ground in a way unimaginable it didn't replace 90% of the assembly code it 10x the number of people writing code that compiles to assembly so it's true that eventually way over 90% of assembly code is being written in C or things like it but not because 90% of this bubble was swapped because the bubble got 10x the number of people writing code that compiled to assembly be it writing it themselves or writing it in C got significantly larger so why are we talking about this right now a couple months ago the platform lovable had an incident and uh quick bias checks I'm an investor in lovable I'm also sponsored by them here and there they don't pay me for anything other than the ad slot so my bias is what it is but know that I've worked with these guys in the past they had an incident in January of this year they had a GitHub outage if you're not familiar with lovable it's an app generation platform you tell it to make a thing and it makes it one of the things they do differently is they back your project on GitHub so a repo is created that your project is mirrored to and you can make changes there and see un lovable and vice versa but it means everything deployed unlovable gets a GitHub repo the sheer volume of GitHub repos that were being made through lovable was so absurd high that GitHub locked them out because there were too many things being created by them just for reference these guys have 500,000 users who are building over 25,000 new projects a day do you know how insane that is 25,000 new projects being initialized and a surprising number of those being deployed every single day and this is one of the options we have lovable we have bolt we have v0 and recently we have a new one I'm invested in a z that I'm super hyped about focus on mobile apps these guys are awesome more and more of these platforms are appearing we also have same dodev which was just created by Aiden the guy who made million lint the react wizard performance guy also made react scan love Aiden a ton all of these project generators are generating unbelievable amounts of code and there are just some numbers that we don't like to think about as developers because most people aren't devs so any tool that allows for non-ds to do things that traditionally only devs did is going to result in just absurd amounts of stuff happening that wouldn't happen if it was just in the dev world I experienced this myself when I dropped T3 chat most of our projects would get a couple hundred to maybe a few thousand users in the first one to two weeks T3 chat got like a 100,000 users in the first week because it wasn't just applicable to devs for every Dev there are hundreds of people who aren't devs and at least a couple dozen that want to do things that devs do but can't if we were to like diagram out how fast the amount of code in the world is growing there have been lots of moments where the amount started to ramp up faster when we had to do Punch Cards the amount of people coding and adding code to the world was relatively low then assembly happened and chips got more accessible so it started to go up a little bit faster then C happened and it started being taught in schools and we got it got easier and easier to make apps then the web happened and all all of a sudden oh we can build things in ways we never could before this curve is already too aggressive because we need to get way more aggressive momentarily the point being here now that anyone can go type in some text and generate a project with thousands of lines of code this just happened we now have significantly increased the amount of code going online every single day the sheer volume of code going out right now is increasing like it never has before and if you're using these AI tools you've felt this some amount yourself I've never had so many projects on my machine obviously I'm higher than average here because I'm a Creator and I'm in knitting small things to do demos and stuff here and there but I'm also building more projects and releasing more individual things than I did in the past by quite a bit I've put out like four or five apps in the past few weeks just solving specific problems that I had and while obviously I'm writing a decent bit of that code myself most of the starting points aren't written by me use a tool like vzer bolt or lovable to get the first parts put together I'll use them to generate a component and pull them over then once I'm in my editor I'll use my Editor to smooth Parts out make changes do stuff like that when I'm using cursor I'd say depending on what the task I'm doing between like 20% and 70% of my code is probably being generated if you count the tab completes as well as the things I'm opening up composer and the little command I and command K views for depending on the feature I'm working on it might be a really small amount like 20% I'm just using the autocomplete and not much else because the thing I'm working on is complex and it can't figure that out but when I'm working on other things that are just like big UI overhaul changes most of my biggest PRS the T3 chat repo have been like 80% AI the small really hard ones have been closer to 0% but the big ones have been largely generated here's a question I will ask you guys now if we were to analyze the biggest code base that compiles down to assembly you think that code base is written in a assmbly you think it's written in C I hope this is an obvious question I hope we can all clearly see that c is the answer there's a lot of reasons why when you have a bigger code base it becomes easier to maintain if you use a higher level language people clearly agree that between those two it is much more likely that c is the thing that has the largest assembly compiled code bases and it makes intuitive sense for a handful of reasons the bigger code bases are going to benefit more from the abstraction that cver presents C isn't going to compile to the most optimal assembly code so it's possibly going to compile things in ways where there is more code in the binary than there would have been if you wrote it yourself and the people who are working in these giant code bases like if you have a team with hundreds of people working on the same code base finding hundreds of people smart enough to do it in assembly and work together good luck have fun and C much easier in C++ potentially easier but it has its own disasters too the point I'm trying to make here is that as your team gets bigger as the people contributing become a wider range of people at a wider range of skills and as the resulting output of what they create getting larger as well the likelihood they're using these higher level tools goes up so as unintuitive as it might seem the larger the code base the more likely they're using higher level tools simply because these abstractions make managing big things easier and they make the gap between skill levels much better one of the things go is actually quite good at is making it the code that a senior Dev writes and that a brand new go Dev writes look relatively similar combination of the formatting the lack of options for a lot of different things a lot of work was put in to make go feel consistent across different skill levels and experience levels do you see where I'm going with this as the number of people contributing to a given code base gets larger as the number of code bases gets larger and the number of devs in quotes goes up the amount of code being created is exponentially increasing and AI tools are big part of why that is happening if not the entirety of why it is happening so when someone says that 90% of code is being generated with AI what they mean isn't we're going to stop writing code all code is going to be AI now what they mean is the amount of code is going to 10x the size of these projects is going to keep getting larger the number of projects is going to keep exponentially increasing we are quickly approaching a point similar to C where there is just so much more code that assembly Dev are their own weird pocket and I think that's where we're going right now with AI while right now an AI Dev that doesn't have real coding experience can't really keep up with devs that do and you can see this by the way just go to T3 chat and compare the experience you have here to the experience using almost any other similar tool I used AI to help building a lot of this believe me but the important parts AI could not help with at all if you compare the experience here to an AI company's experience like deep seek Claude or even open AI the actual experience using their products is way worse because the people who work on it aren't as focused on building great experiences in the web they don't have a decade of work doing this they didn't build Twitch chat and go out of their way to make every single frame respond as quickly as possible and handle thousands of updates per second if you don't have that experience there isn't enough public references of that experience to do it well via AI because the AI cannot be better than effectively the general consensus if the info doesn't exist in the public domain it is very unlikely the AI can figure it out but most of the code we write is code that exists all over the Internet we've had the joke forever in software that like most of Dev work is just Googling I know Prime in particular has always hated this quote but when you're working in these giant code bases and you're working across many different projects and many different Stacks this can absolutely be the case the code that you would spend a lot of your time Googling to do can almost all be done with AI now and the AI will make it so you can skip through the steps of learning the thing and be productive in it much faster I would not been able to deploy a bunch of the T3 chat stuff on cloudflare if it wasn't for how much easier the AI made it for me to smooth out the weirdness of their developer experience and as a result I'm building more projects shipping them to more Platforms in doing more work as a whole because the AI is letting me be more productive I would estimate that of the raw lines of code that are coming out of me right now I would guess 70 to 80% are AI generated because I'm spinning up random projects all the time on botht in v0 cuz it's fun it's genuinely enjoyable to do that and when I have a random problem that I want to solve I can hop over to v0 generate five versions of a thing copy part of the one I like go into my editor and tidy it up myself but for the 30 lines of code I put in my code base I might have generated 300 I might have generated 3,000 but the amount of code that didn't exist before that now does as a result of me trying to write the same correct 30 lines of code instead of writing it twice like I would have before sometimes I'd write the same feature two to three times just to get it quite right I might have deleted 100 lines for every 30 I committed now it's closer to a thousand maybe even more the amount of code I am creating has gone up significantly when I say that 7% of the code I create is AI That's because I'm creating 3x more code that's not because AI is replacing the code I wrote before it's allowed me to have different workflows that result in more things being created more code being made in a whole different process my skills as a Dev have been helpful using these tools but my skills in reviewing have been way more so I have reviewed way more code than I have written in my life and that makes my skill set for this new era of AI tools way better because when I finally get v0 to spit out something usable I can go through and find the parts of the code I want and the ones I don't rip it throw it in my code base and make the changes I want to there I like the phrasing here that bot Cooper made creating does not equal committing and I totally AG with that here there's a meaningful gap between the things I'm creating in v0 the things that I am generating with T3 chat and the things that I'm actually putting into an existing code base and committing and putting out there that's not going to be replaced by AI That's not going to be replaced by somebody who doesn't know how to code the fact that they could get as far as they can Now is awesome but that is a different thing and I think we need to be able to acknowledge that the majority of code right now is written by AI way over 50% of the code that is coming out today of the code that exists at the end of today that didn't exist at the end of yesterday probably 70 to 80% is AI generated just knowing how popular these tools and Technologies are there is so much changing in the space in the way we build and the skills of Googling the skills of peac mealing the skills of parsing through a pile of to find the thing you actually want that skill is becoming more important than ever so as silly as it sounds on one hand we are replacing the people who just Google all day with AI but on the other hand the people who really are find that skill of finding the needle in the Hast de to solve the problem that no one else could quite solve by finding an obscure resource somewhere no one properly understood finding the one weird line that isn't doing what it's supposed to and pulling it all together those people are set more than they've ever been and I've experienced this in ways I never would have expected I can't tell you how many times we had some obscure bug in some codebase I've barely touched for 2 years like I'll be real I can't contribute to the upload thing codebase right now it has gotten to a level of complexity and is using tools I'm not as familiar with because Julius has just killed it taking over that project he is running the infra side he's running the SDK side he is the lead of upload thing at this point but when there's an obscure bug like a user said that they couldn't download certain files but they could download others and they sent me a screenshot I was able to into it from the screenshot that the big difference between the files that failed and the ones that didn't is the ones that failed had non-standard English characters like they had a tildas over them and things like that and I suggested that maybe our serialization layer they would turn the file name uploaded to a key we had on our service that layer might be handling these characters wrong and I ended up being right even though I hadn't read any of the code that intuition of understanding the layers where things fail being able to look at a set of information things that aren't going right and piece together the places where a failure might be occurring those skills are so valuable and I will forever make the argument that those skills being able to solve a complex problem with lots of layers and identify the individual layers to do that that's real engineering the lines of code you write aren't real engineering solving complex problems across many different systems without understanding the depth of any of them that's the skill that makes you an incredible engineer be it one who builds Bridges or one who builds crappy crud apps and now it's not just how you level up now it's the essential to be really good at this stuff as B Cooper said here this is the actual real life experience that AI can't replace and I again totally agree there might be an accidental truth here because he didn't say it technically accidental what do you mean well what I mean is that I assume from his side he's actually saying that all companies need to adjust right now like all of your engineers are effectively going to be not as valuable it's actually going to be the tool that they're selling that happens to be where all the value is at your your your engineers are really just the cart driver but it's the goods that are really and the cart itself that you kind of want to purchase but it might just be that TJ that it's so much overwhelming code going to be generated that people who are not using that or people that are even editing it are so far behind by accident he is correct and in 12 months it will be just so large that it'll be like 0.1% will be hand artisanal code and impossible to keep up with yeah I guess Prime and I do actually agree here oops didn't watch this yet I actually had it in my watch later I am excited to finish this video in the future but yeah we're definitely going at it with different angles but came to the same conclusion that the majority of code that exists on the web and in general in the very near future is going to be AI code so yeah hopefully you understand the thing I'm trying to communicate here the future isn't all hardcode being written by AI it's not our jobs being replaced with these crappy AI chat generators the future is more things being created by people who aren't devs similar to when WordPress happened suddenly anyone could throw a website online that's happening again in a way we've never seen and we need to be able to acknowledge that without pretending that our skills as Engineers are no longer relevant there's an in between here and I think that I'm landing somewhere right smack in the middle of what Dario said and how Prime feels where I don't think people like Prime will be replaced but I do think they need to change the focus area of their skills your ability to write code really fast is not as important anymore your ability to solve hard problems and debug weird issues across complex systems that's never been more important than it is today hopefully this helps you better frame the way you think about these things let me know what you think until next time peace nerds




## _Zero JS_ Is A Bad Idea - 20230807
JavaScript is now an expectation of the web the same way HTML and CSS is zero kilobytes of JS sounds great for some things it probably is but I I'll put it frankly I don't care the vast majority of web users are running JavaScript I don't mean vast majority like 70 I mean vast majority like 99.5 plus all users are zero JS users at some point like when the page loads and JavaScript isn't there but they're not a zerojis user for long and once that JS is cached it lets you do so many important things a sentiment I see a lot especially from like the Astro and quick side of things is you should never ship JavaScript that isn't necessary you should be able to use an application without JavaScript if that application's use case doesn't necessarily need JavaScript and I hear you I understand it is silly but there are so many websites that are just a form that have like 400 kilobytes of JavaScript loading all of the like ajaxi behaviors in order to make a form work and I understand that concern it's a real problem I don't think it's a common one and I really don't think there are that many projects that are being started with stuff like xjs are just a form and on top of that there are so many benefits and Necessities that most Services have that require JavaScript be it client-side routing analytics be it crash reports be it any type of bug or behavior reports in order to make good software on the web you have to use JavaScript it isn't optional I don't think it makes sense to pursue zerojs as a goal I think we kid ourselves when we push that as hard as we do and I'm not saying that every app should be bloated and full of a ton of JavaScript I'm simply saying JavaScript is now an expectation of the web the same way HTML and CSS is it is hard for me to hear something like you should be able to ship zerojs and not hear you should be able to ship zero CSS because when I say that it's like you should be able to build a website with no CSS that just kind of sounds silly right we agree here saying you should be able to build a website with zero CSS technically probably but nobody should use that website it's not going to be a good experience it's not going to be good for users but if you could build a website with zerojs suddenly everybody is shouting your name and Alex Russell's personally congratulating I think that's silly using JavaScript wrong and using too much JavaScript is obviously a problem but using xero JavaScript is silly I want to be clear I'm not calling out things like htmx or live view those are awesome because they use JavaScript the reason those Solutions are as good as they are and allow you on the back end to change the contents of the client it's because they run a JavaScript bundle that they built for you that does all of the linking and handles all that so you personally don't have to write the JavaScript but those experiences only work because they are running JavaScript and that's what's frustrating to me is the best zerojs Solutions are better with JS and there are very very very few websites that can't provide a better experience with a little bit of JavaScript sprinkled in I've always been hesitant about this goal and about this particular strong stance I know people like Rich Harris are somewhat similarly aligned with me where almost all web experiences can be improved significantly by JavaScript and we should embrace that we should be willing to ship JavaScript to make better experiences for our users and we shouldn't shy away from it because it's a big scary file and another thing that goes in our app would it be cool if more forms worked before the JavaScript showed up sure but I really don't think it's as big of a problem as we like to say it is and to be clear going from two megabytes of JavaScript to zero kilobytes of JavaScript is going to be better but it's not going to be that much better than going from two Megs of JavaScript to 100 kilobytes of JavaScript and I feel like the fear and the awful experience that is those gigantic bloated pile of crap JS apps has resulted in us swinging way too far the other way reality is somewhere in the middle here and that's okay it's actually pretty cool because we can take lessons and opportunities from both sides where like in remix it's possible to submit on a form without JavaScript loading which is dope even though we're writing JavaScript and we can load JavaScript in to give you a good client experience you don't have to ship it and that's nice you probably should and there's probably going to be functionality in your app that breaks if you don't and generally you shouldn't be building remix in a zerojs mindset should be building remix in a good performance and experience for your users mindset another point maple just made in chat which is funny because this was inspired by Maple is that excessive ability is often improved with JavaScript and there's a lot of weird behaviors in the browser that make it inaccessible without something like JavaScript to help and that is absolutely the case with the experiences I've had on top of that they are great Frameworks and solutions Like Remix and next and Gatsby and Astro and all of these technologies that make it easier to build a good accessible performant website that might ship more JavaScript than we like but then that bundle caches and from that point forward the user has an incredible experience and up until that point they have a slightly degraded one but that point isn't too far off and getting there shouldn't be too hard I love removing things that are unnecessary it's like my whole Jam I've been infrastructure free effectively now for three years I avoid classes in JavaScript entirely if I can I remove the word this in my from my JavaScript vocabulary not only is Javascript necessary it is essential for building good accessible performant quality experiences for users on the web and we shouldn't strive for zero kilobytes of JavaScript just because it's possible I am more than happy to die on this hill because it seems like a lot of people don't think it's necessary but I I will say with pride that I will always have a little bit of JavaScript in the applications that I ship because the applications I ship are trying to be good not trying to be flexes for Twitter so feel free to go make fun of my bundle sizes all you want I don't care because my users are happy and my users have an incredible experience on the applications that we built hope this is a helpful rant if you want to learn more about using JavaScript incorrectly I'll pin a video about that there that you can check out if you haven't already thank you guys as always peace notes




## `const` was a mistake - 20240519
couple weeks ago I filmed a video All About con versus let because well it's an interesting topic to me and I have a stance which is that both are fine I tend to use con when I can there's a phenomenal blog post by Jamie builds builds ghost Jamie Kyle whatever you want to call him from a couple years ago it's actually quite a bit longer than that that I've used as a reference for a while and that's what I used in the video it's not that const means something it's that let means something and when you're using let it should be with some type of intent and it should communicate something to your team right before I put out that video I went to to Epic webc I did not expect for Ryan Florence to be there much less to give a talk much less for that talk to be cons versus let which immediately sparked the debate up once again I could have published the video I already recorded but so much has happened since and we've had so much discourse and even people I did not expect like leer Rob moving over to the let side of camp that I felt we needed to re-record and make a new video All About cons versus let but if you are interested in that other video I'll have the whole thing up on the Theo throwaways Channel if you don't know about that it's all the videos I don't really know how to make a thumbnail or title for or don't think fit here check it out anyways let's get into this wonderful debate of cons versus let and maybe even bring up some be as I said this Ryan Florence talk was what started the debate again so it only is fair if I dive in hi that's an interesting opening slide oh boy as my five minutes started I'm just getting trolled verion all right my name's Ryan and I'm not going to talk about remix um we're going to talk about Dynamite real quick Dynamite was created for mining but what did people use it for to kill other people in Wars much to the Chagrin of this man Nobel that's his last name very interesting analogy I I'm sure this isn't going to be used for a reach of any form youve probably heard of the Nobel Prize specifically the Nobel Peace Prize so he was probably pretty upset that his invention was not used for the thing he wanted it to be used for anyone good at chemistry you know what this is water that's LSD for some people it might be [Music] water this is the guy take enough LSD and I'm sure that looks like water guy who invented it there's no like prize named after him so I can't remember his name it's like Albert or something like that Hoffman okay we got LSD fans here I love the chatter who immediately knew who it was um I don't even drink coffee so like this is as far away from anything that I'm putting in my body so he was trying to create a compound to treat ADHD a central nervous system stimulant or something like that is what it was I was trying to like treat ad ADHD and like hyperventilation from like panic attacks he was trying to help people right and uh I don't know I guess maybe some people micro do LSD and they say it helps them but uh it's pretty Undisputed that LSD has wrecked many this supposed to be a five minute thing and we're almost a minute in and he's talked so far about dynamite and LSD many lives so I don't I don't I don't mean to say that too jokingly but this is kind of a fun talk and uh he he invented LSD and got used for things he didn't intend uh reading his Wikipedia page he continued to take LSD his whole life um and uh kept trying to find a different use for it and never did this is the guy who invented Q-tips I'm one of the few people who uses Q-tips for a lot of things like computer cleaning and they're very useful but fair I'm I'm excited to see how this ends up in cons versus Le right now I feel like iated my audience this isn't even my talk he's like it's it's for cleaning your ear yes but not that part it just makes it worse when you just keep like shoving the thing into your ear right so like and they got all over the warning but like Has anyone used a Q-tip for anything this is why we don't agree Ryan because I'm I'm always the person who actually uses the thing in this intended way but yes I use Q-tips in a lot of intended ways cleaning all sorts of really nice besides trying to get ear wax out no it's the only thing we do with it here's another guy who created something Dave Herman um some of you who were old hats like me remember him uh 10 years ago es6 was all the rage JavaScript was it was like JavaScript puberty it was like coming of age and it could actually the good HTML 5 es6 wave good times like do cool things now and we're taking a very serious react hit the scene and we're building really interesting websites and um so the language needed to get a little bit better and um Dave Herman was someone who was really instrumental in pushing the language forward and he's a hero of mine he's one of my web Heroes um some other people obviously were involved too um but Dave was talking a lot about uh es6 and some of its features and here is one of his talks little screenshot notice that it says let is the new VAR yeah it says that because VAR isn't replaced by const VAR in its intended use cases has been replaced with let because it's a variable it's meant to change let is letting it change oh boy what's missing from his slide const is missing you can go and search all of his es6 talks and slides and comments doesn't talk about const so I wonder what he has to say about it the guy who gave us let and const I wonder if he's like the guy who gave us dynamite and LSD and Q-tips or maybe he loved it so Pamela Fox another we hero of mine I'm this close to holding a company meeting about when we should use let versus const anyone had that meeting in your is this kind of that meeting God are you playing this video in that meeting oh no I I am so sorry either way no we don't even do that anymore right we just use const Dave Herman I'm sorry why cats Yehuda cats I didn't actually know this that Dave Herman regretted const oh boy this is going to be interesting warn me const was a mistake for this exact reason and I don't take it I didn't take it seriously enough one of my main es6 regrets the guy who gave you const regrets giving you const does he just feel bad or like did this ruin him PSA const is short for constant not functional programming this is a personal attack I'm offended I see how it is y'all think you're B immutability I use con I'm I'm going to learn o camel one day I do intend to learn oaml one day but that has nothing to do with what we're talking about here Ryan I understand cons is not proper immutability and I understand wanting to learn o camel kind of makes me a tool these are two separate unrelated things JS con should never be used for anything but constants using cons to mean the variable happens to not be reassigned makes your code less readable not more you can this is another one of those remove the art from the artist moments isn't it we're not going to agree are we Dave I am so sad the list grows one longer clap John just let's just do one clap though because that's how it feels being a fan of let it's like it's you and everybody else I'm going to do a second edition of effective JavaScript just to shoot post about constant print and inight Flame wars in the Amazon reviews thanks foring it PG ran I might be a jerk but I don't swear I got the important things down didn't know that Ryan didn't swear makes sense uh sorry for the con tweets folks I'm feeling much better now we we actually like we ruined this man this tweet has nothing to do with my talk but look at the time stamp when you're sleep deprived to keep trying to stay awake in the night you might think you can accomplish the things but it turns out in such situations lack of resources gives you many troubles with accomplishing the things it turns out this is his last tweet he hasn't tweeted in a full gestation period and his tweets before that like were sparse too like all those tweets I showed you before this all like 2017 15 14 and then he just kind of like tapered off like we we wrecked him so how did this happen how did we get here why is everyone doing const everywhere or or sorry rather so what is it for Yuda cats also was instrumental in es6 and he says the T LR for that meeting that pamelo was asking about is Con for top level module scope constants only and screaming case only otherwise let and call it a day so the people who put this into the language think you're all crazy these are the people who made JavaScript I think between the people who made JavaScript and the people who use JavaScript we can all agree which one is more crazy right right we're talking about the same programming language right now correct anyways so how did we get here that wasn't intentional but that is how I feel when I see an an Airbnb es link config in a project yep good old Airbnb es link config wait no oh no I just realized where this is going is he going to link the existence of the es lint config to the General Industry preference towards using const because I don't like those things being linked that makes me uncomfortable I was at Airbnb giving them a workshop with our company react training and uh this came up the es the Airbnb es link config and they all like started laughing like oh we don't use that here so the people enforcing this thing don't even use it either yeah no one no one uses this that that gets it including Airbnb which is hilarious this config is such a mess it's so awful please if you're actually using this still for some reason throw it away just throw it the away using all the built-in eslin typescript stuff is so much better the typescript recommended eslin config is really good just use that but you're still doing it right it's very important that I know when my variables are reassigned okay that's fine if you want to use if you want to if you want to use Le or cons instead of lead all over the place I'm not going to tell you what to do but there are a couple of things that I want you to understand about what you're doing so if you ask the question how should we do variable assignment that is an invalid question because conss are constant they're not variables they don't change so you can't say to your coworker like oh what's the value in this variable you need to say What's the value in this constant you're going to find this very difficult because you're calling all of your conss very might I remind you in this wonderful language that we are discussing here there's a lot of things you can do with both const and let like if I have a function here do some work let do some work equals async this is totally valid too what is this variable cuz let means variable right no in this case let happens to mean a function and this is also a very dangerous one because this function can now be rebound where I could set do some work equal to console.log do some work and I just broke everything what's this even mad about oh cuz the type is a promise so I have to make this async for the types to match still oh the input type's not the same either so form data form data can I get this to be honored return void just void no you get the point typescript is saving us from doing a really stupid thing here it really doesn't want us to which is good because this is really stupid the idea that we could have a function that's exported or used like this God forbid this is being exported from one file to another file and now we can override it not good and just changing this to const fixes that now we're going to get an error that is cannot reassign to do some work because it's a constant should we be using constant let for functions depends there's Arguments for both there's arguments against both but hopefully when you say we should use let not const because it's a constant not a variable that you don't have a single Arrow function in any of your code because if you're saying that let is for variables and con is for constants then you're ackn you're just not acknowledging the existence of eror functions at all so yeah that that one was a little Bullit variables and they're not variables they're constants mutation is difficult to manage in the large and deserves careful annotation const doesn't help with this arrays you can push into it objects you can assign to them cons didn't help you with mutation yes but you can't replace the element you can't make a new brands array which I think is a really important detail like if I have con Brands equals sure and in here I want to have different brands I can't just change Brands to like Nike Adidas Puma reok because it's a constant and ideally if you wanted these here doing brands. popop like while brands. length is greater than zero brands. pop and then brands. push for all of these because this would be the alternative. map brand like could you brute force this reassignment with something like this sure this is a much bigger code smell than Brands equals Nike Adidas pumar rebok for again like sure you can make changes to Brands but at least the changes seem more deliberate and require more work and it's less likely someone accidentally reassigns the thing you don't even catch it which by the way once you've exported this if this is export let Brands good luck and have fun here which is why we use const right so if you're going to use const I insist that you also use object freeze because you're saying I want to indicate intent here I'm not going to mutate this so you got to freeze the object uh we're a bunch of react developers probably in here or like either happily or unhappily or something in between like me whoops um so you're going to actually do it like this right oh I better memorize it because I bet object object freeze is expensive and then it's like ah but I got that dependency array so I got to freeze that one oh and Brands is an object so I got to freeze that too so if you actually want to protect yourself from mutation this is what your coat's going to look like this is The Logical conclusion of what the goal was never to protect us for mutation it's to give the semantic indication again like this is the issue I brought up in the original video that probably is on the second Channel might be here who knows where it ends up the core Point I've made is that it's not that const means something specific it's that let means something specific when we use let the intention is to replace the element it's that we put let here because this might get reassigned at the root level somewhere let is a very explicit specific thing that we're doing and we're doing it for a reason for those C and C++ engineers in chat I have a tweet I made Let's see if I can find it that I think summarizes this really well from a memory point of view much like Ram JavaScript objects can't be immutable what a banger yeah con is star let is star star was the point I made here which if you're not familiar star is to assign of a pointer which means instead of just having a value it points to a part of memory which you can't change you can change what's in memory there but you can't change which spot in memory it's pointing to star star is a pointer to a pointer which means we can change where it points so if we want to reassign the value to another value somewhere else we can if we want to change which pointer it's pointing at we can and that's the difference with cons versus let is that cons points at one specific object you can't change what it points to but you might be able to change the contents of what it points to if you want to change which object the variable points to that's when let is useful and this is a meaningful difference like imagine if in C++ people said never use pointers always use double pointers and I think we can all agree that would be kind of insane and that's why I feel so gaslit by this I don't know if it's cuz I did my days in C++ or what anyways what you're doing bad news when you pass that object to a function those ratings this one that we were just looking at it's memorized it's it's got all the tricks in it right we've Frozen everything in it it's memorized you pass it to a function that's reassign oh what am I touching oh it's this I'm gonna oh they turned it off I was gonna do a little Tom Mel but you can reassign that like you cannot make a parameter to a function a Conant so there comes a point where you can't keep doing what you're trying to do to like tell yourself that you're protecting your code from something so there's there's just you can't freeze can't freeze your parameters so I asked chat GPT has using con everyone JavaScript instead of let ever prevented a bug in any real code in production said no though using constant instead of let in JavaScript as a common practice it has never prevented a bug in any software that I've been trained on it's typically recommended by people who need easy to follow rules to feel like their code is good unfortunately it is a confidence boosting distraction from the real work of building a great user experience I we have to has using const everywhere in JavaScript instead of let ever prevented a bug in any real code in production is that right real code in production yeah apparently it's spelled wrong so it's almost certain that this is a this is real in the same sense that the blog posts I read that tell you to subscribe to me are real which word was type out on here by the way what's spelled wrong oh the ER Cod is good yeah very likely fake because there are typos here which chpt is not known to do much of like the same way sometimes my blog posts when I'm reading them tell you to subscribe to me speaking of which our response seems to think you should sub on YouTube so if you haven't the sub button is right below it's free feel free to subscribe we do lots of content like this I think it's a fun Channel and even chat gbt seems to think you should subscribe crazy I know but uh yeah you get the idea that's like that is all of human knowledge came up with this answer for us okay and if you're still not convinced oh this argument the pronunciation is this mic working we're going to talk about acoustic phonetics we've got plosives like explosive like t t c so your tongue hits somewhere and then a bunch of air comes out right we call the these stops also we've got fricatives so that's like you make a small hole and push air through it S S and F and we've got nasals like n and M where we move air through our nose we've got liquids for L and R we make a shape with our tongue and then we let air flow around to oh and then we've got vowels where you just kind of open up and like let your vocal cords vibrate right so let's walk through let let let what do we got we've got a liquid at first and then we've got a vowel and you think we have a stop with the T right but we don't say let we say let like a Utah person says Mountain it's it's just let there's no te then so God my Boston accent's going to be real rough here H yeah this part's a bit for sure I I appreciate the bit the fact that the pronunciation matters which for him makes sense but I I think there's three places where these things matter yeah const versus let I think there's three areas where you'll think about these things one is writing code two is reviewing code and three is talking about code and you know what I'll cave I think in case three which is the case Ryan spends a lot of time doing I'm not saying this an insulting way I'm honestly getting closer and closer to this point as well talking about code dropping cost and just saying let makes life much easier I can actually see that and you can convince me of that argument writing code code perhaps you could convince me as well that writing code is simpler in the process of writing it if you just have the one way to define things but this in between here reviewing code that's where I really think const helps a lot and I'm not the only one who thinks that this is Malta who is one of like the wizard engineers at Google back in the day that now is the CTO of her cell team con for Life declarations tell me there won't be a reassignment game changer for comprehension speed when reading code that's the big deal here that the object itself will not be reassigned the same way when you see a pointer versus a double pointer you don't have to be as thorough with the review you know what it's doing it has a value it's pointed at and it can change the thing that it's pointed to but it can't change where it is pointing very important and someone in chat also made a fair point which is don't forget maintaining code I would put that under reviewing in a a more long-term sense I almost put reviewing and maintaining here which I think is fair because reviewing and maintaining code trying to figure out what this was supposed to do that is huge and again if we put something like let here what I'm immediately going to do is when I read this code or I'm dealing with this in the future I'm going to try and figure out all the places that touch this to make sure none of them are modifying it and if I have some crazy bug where Brands is changing at some point during a render now I have to go audit every instance where this is used instead of the easy thing we would do here which is look for all instances of brands. push and if there's none in our code base it's probably fine now that you have to worry about it being assigned via equals things get a hell of a lot Messier very quickly it's also a bit of a noobu if you're doing like the basic counter component example and react so if I make a new counter. TSX everyone's favorite use client function counter I could make this and believe me it's tempting to make this an arrow function but I'm going to resist the urge and we have this function counter the easy mistake that new devs will make especially if they're familiar with JS but not react is this which won't work because we're not actually updating the state and if you were to fix that by doing count equals count plus one you immediately get an error cannot assign to count because it is a constant correct you shouldn't be able to assign to count because it is a constant you should have to call set count which you can fix very quickly by doing that these little things add up and it makes it way more likely you don't make those types of mistakes both as an educator teaching somebody the basics of something like react also as a person maintaining this code over time or coming back to it months if not years later and once again this isn't because const means constant it's because let means mutated if when let is used I know the reason is because equals is used at some point let indicates to me that this value that is assigned here can change and will change that's when let becomes useful because it's indicating to me by the way later on either in this file or somewhere else this value can be reassigned it sucks that you can reassign keys in a constant I think you should have to clone the object personally con means the the thing doesn't get reassigned let should mean the thing does get reassigned if the only reason you use let in your code is because a reassignment happens suddenly let has a really powerful meaning of look out for the equals look out for where this changes I would make the argument that let is better and let is more valuable if you use const because the reality is you'll have a lot fewer lets than consts here's the code base for the upload thing infrastructure let's take a look at all the instances of let in here we got about 25 and a handful of these are in copy too so we got about 23 instances total of let in the infrastructure code base for upload Thing versus 1,239 for const that means these lets communicate something very specific which is very useful very useful here we see let URL is window. origin plus path name and if search params is search pams two string we do more things to the URL in this condition or here let Handler is the Hano s Handler and we replace this Handler with a different versioned Handler if you're on a different version by putting let here we're indicating that this initial value is going to be different and reassigned as we go down these are the things that let is really nice for because it tells you very specifically this thing gets reassigned ideally and often directly below the issue isn't that const means constant and we're not following the rule the issue is the opposite is that let should represent something very specific which is this thing with will change and if we use const that enables us to use let in this way I think there's three types of variables to once again say there's three things there are actual constants there's constant references and there is variable references an actual constant is a value that never changes which in this case would be something like a string so if we had go back to the code like const server URL equals sure like that it pulled up from the package Json God super Maven so smart I think this is great there's other types of constants you can have too some of them were shown there like cost Brands we work with and here I would actually object. freeze this because we want to be sure this never changes but what if Brands might have things appended and removed but we never reassign it to something else at any point con Brands equals this ideally something like that so I have the constant Brands reference here where I clone this and now I have a new thing that I can modify do stuff to this to me indicates that I don't have to look for equals it's a constant reference this will always reference the same thing most of the time this will be changed via some function somewhere but it is a constant reference and I can't reassign it to something else to a different array I can change the array that it is pointing at but this is pointing at a thing I saw that there was a really good diagram here in the Josh W comeo post I was considering reading through this whole thing but work I'll link it in the description regardless because it is really good if we Define fruits with let and it's pointing here we're able to change what it points to I'm assuming he made these clickable yes we can change what fruits is pointing at because it's a let def definition but if it's const we can't change it it always points to this array that is a meaningful difference that is a different thing that should be treated as such the issue I have with this talk and about the hatred of let is that it's effectively pretending this doesn't exist it's pretending that there is no need for a constant reference to a thing which is saying that there's no need for traditional pointers inside of C++ if you told any C++ Dev no need for Star you can just star star or pointers are fake because you can change the value it points to you'd be laughed out of the room CU that's a funny thing to say would it make sense to call a pointer a constant in C++ no probably not I don't think the name is great but it's not a constant value it's a constant reference the thing it points at stays constant so if that thing is a you can't change the string if that thing's in Array you can make changes to the array but you can't change which array it points to this is a meaningful difference and I don't know why we pretend otherwise I think the solution here is very simple I think for actual constants we should do the thing that was recommended which is const use camel case I think camel case is a great solution when you want to have an actual constant that can't be changed if you want to use a constant reference which is pretty common const some variable just const way and if you want the variable itself to be able to change and be reassigned let some variable I think this convention makes code very readable makes things very clear yeah not camel case it's this screaming case right there's another term for that but yeah you get the idea all caps for actual constants some variable const without the all caps for constant references and then variable references let some variable go nuts with a let I'm not against let I just want to be very very clear about the differences between these things because I feel like we pretend part of this doesn't exist whenever we get into these debates and I am tired of pretending constant references don't exist because there's plenty of reasons that you'd want to point to something where the thing underneath can change without changing what it points to in the first place in fact most values are arguably that and this is again my issue I think variable references where reassignment is a thing let should be strongly indicative of that behavior and if you're using let everywhere you're making let meaningless and I like a world where let means something which is arguably the funniest irony of all of this is the people who are really pret and really anti-c const their argument is that con is meaningless but by pushing this argument they're making let meaningless instead I think let should have a meaning I'm actually very fond of let having a meaning and what I'm realizing now is I'm actually one of the bigger fans of let that's why I think we should use const the only reason you would say to never use con is because you don't actually respect let so let me know what you think in the comments cuz I'm sure this is going to be a spicy one and until next time peace nerds this just got linked in chat and I have to add it well it wasn't linked it was mentioned that dreambird has four kinds of variables there are four types of declarations constant constants can't be changed in any way so a const const can't be changed a const v can be where you can make changes to name so the variable can be changed but you can't reassign name variable constants can be reassigned but not edited so you can't pop or change the content of name like you can't make Luke different but you can reassign it to Lu but variable variables can be reassigned and edited this is kind of like how they work in JavaScript where you can change it in both ways and you can push and do all of the following too where things get way more fun is immutable data which obviously we want to make sure it's properly immutable mutable data is an anti pattern so if we use con con const keywords to make a constant constant constant its value will become constant and immutable and it will never change please be careful with this keyword is it is very powerful and it will affect all users globally Forever Wait they have emojis for variable definitions this might be my new favorite language what the is this perfect programming language is the description here I can confirm this is incredible so he said search class name for maximum compatibility with other languages you can alternatively use the class name keyword when making classes this makes things less complicated class names and dreambird keyword so you can't use that either instead you can use the HTML class name a tribute what the is this this is incredible it uses negative 1 based indexing some language arrays start at zero which could be unintuitive for beginners some start arrays at one which isn't representative of how the code actually works dreambird does The Best of Both Worlds arrays start at negative one this is incredible holy I'm in love oh




## getServerSideProps is WEIRD - 20221001
I love next.js but I don't love everything about it get server-side props was a revolution at the time you write a function you do some back-end stuff in it and now your component in the same file has that data at a page level that was groundbreakingly cool it made metadata way easier good SEO possible and it revolutionized how we think about our react code sadly these patterns have not aged well especially when you look at better Solutions like what remix is doing what solidstart is doing what trpc enables server-side prop functions in nexjs as they currently work are a little unpleasant and require you to deeply understand the flow of data in your application before you can use them meaningfully let's talk a bit about that and why I think it's a problem so get server-side prop sucks I want to break this down into a few reasons why I think I can break these down into three-ish categories I'll say one type safety two routing three data flows these three areas are areas in which get server-side props is incredibly weak the first one simple enough the types are not correct if we go to uh let's emit an app and show it actually why not we will do it make a new stream uh MPX create next app at latest gssp and it uses yarn by default even though I used npm come on guys we fix this and create T3 app you have no excuse guys I don't hate yarn but I didn't pick yarn I certainly didn't pick yarn V1 I picked npm when I typed npx and they changed my mind for me so we're gonna RM RF yarn.lock um RF node modules and we're going to npm install it because that's what I picked I shouldn't have to dash dash use npm it should use the thing I use to a knit I can yarn create if I want yarn I could npm if I want npm or MPX or 1mpm and pmpx if I want pnpm tired of these things making the decisions for me and making the wrong ones when they do cool now we have an index.tx after all that we now have this so they don't do semicolons by default are you kidding oh my default lint rolls will fix that pretty fast what's it mad about cannot find name meta I hate this template I hate this template anyways you use create T3 app don't use create next app like seriously don't it's it's not in a state where it's usable anymore it's sad it's genuinely sad to just use what we built it works and this doesn't that all said let's build we want to get data into this page let's say we have something from the database we want the number of users who have been to this page we want to fetch that from the database and render that on the page we need a server-side props function export const get server side props equals async return props count five cool now we're returning this this will now be in the props here so if I props console.log props this will be here PM run Dev if we don't have anything else running I don't local post 3000 go into the console and we will see props has count five on it how did that get there well we returned it here and it goes through a couple layers and then it pops out in here sadly it's actually possible to break that if I go and I delete this here and I reload this we get nothing or if I this is actually a pretty common one I have a like if type of window is undefined or something like that that might not be the best example in here let's say uh let auth equal false and I can have if not auth we return component but we have auth equals false here so that we can pass this down now if I go here we'll see auth false comes through but we're losing the page props the thing that we fetched here in this file and gets oversight props isn't making it to our component because of the order of events in get server side props so this is kind of the data flow point so I'm gonna like the data flow is part of why the type safety is bad I'm going to reorder these for that reason routing and conditional data so the data flows are rough the first thing we have is get server-side props which gets called resolve some data does whatever it needs to do and then it gets passed I think this nice small Arrow to app.tsx and this guy runs and decides what to do with those props from there and then and only then it might I'm going to use the dotted line as a conditional it might make it to the current page dot TSX tells me at page.tsx make it a little easier but you might not even make it to the page file with the things you fetch so if we want to and then this is pretty common too let's let's try to get some types on here uh we want to pass props here uh type of inferget it's not going to auto complete inferget nope and forget server side props next Js infer that is really weird way of doing that cool so now this thinks count exists so let's console log props dot count because those things that exists oh uh we'll say props.count dot two string sure so you can run two string on that oh wait we're getting an error because this is lying to us and it's very easy to tell lies due to the data flow buddy you have to loudly scratch things right now yeah so if you do what they say which is infer the types off of that it does it used to do some weird inference where it would optional all the types which it no longer does which is nice but here it's still pretty unintuitive in that it thinks this exists but if your app does something else it's broken and if you ever forget to page props drill here you're screwed camera's out of focus there we go yeah so the data flow here is not deterministic this being here does not mean this ends up here it should and in most cases it will but this is not a proper contract in terms of the flow of data the flow is the very right words for it it's inconsistent I want to talk a bit more about part three though I think I've touched a decent bit on type safety being not great and the data flow is not being great oh there's one more type safety thing I should touch on which is things that don't serialize properly let's do uh rendered at new date so we're gonna pass a new date down and if we look here props.date does oh it's a rendered as I named it rendered at and let's do dot get date on this because we're getting a date back oh that errors too because we can't serialize a date object through get server side props or get static props or any of the other server-side property or uh functions in next because it is dumping a Json blob into the page when it does this and that Json blob can only serialize Json things and it's unintuitive here we don't get an error or anything that gets server side props can't return things that aren't Json serializable so as far as our type system is concerned everything here is a-okay but it breaks in actual like built that scares me and I try to avoid the any technologies that allow these types of things as the default somebody asked if you can super Json with gssp you cannot if you're using swc my cats are going insane one second that's been extra feisty or feisty today uh someone asked about the remix loaders uh the remix loaders if you're using types like the ones that Maple created will error if you try to return Json or something that isn't Json serializable inside of the loader function itself which is really nice so there are Frameworks where there are solutions that solve these things somewhat elegantly even next is not one of them remakes is his own type safety problems we can go into another time but yeah type safety this isn't doing great data flows are unintuitive too because this has to go through document then to get server-side props then to the app file then to your page file that's pretty unintuitive and I wanted to specifically call that out because I think it's important do you understand it I'm also realizing there's a fourth thing that I need to add here which is just perf General but yeah number three is the routing and conditional data let's say on this page we have auth so we know this will also have auth because we're adding that above where auth is true or false so I'll just like hack this in because we've already concluded this is not type safe but we should have auth on this generally I'll add this here uh true otherwise yeah that's all fine cool so now we will have off we only know that because I hacked this in here which is annoying but fine whatever the hierarchy is bad we understand let's say we want to use auth state to render or not render a certain page like if props dot off return uh like const auth only page so you have this page you're only supposed to get if it's off it will off only page is what we return here instead all right type of bracket there because I'm dumb cool so if you're off we return this page otherwise you return that and let's say if you're off we want to fetch different data because if you're auth we want to do something else let's say once this is checked off God no because this is where like next really breaks down we want to check for auth and based on that we want to fetch additional data there isn't a way to do this with get server-side props without fundamentally raising like where this is happening so right now we're applying auth here we'd have to apply this somewhere else so we'll do is put it in page props now props dot aft which it doesn't know exists so I'll do this page process empty object so page props as any Dot auth and that's going to be passed through anyways doesn't matter though we're potentially showing what Messi looks like well can't get offed equals turn uh math dot random greater than 0.5 so it's random each time and we want to return an off State from here now this gets passed through to this page conditions are hit and then that gets passed down further here but let's say this needs additional data so this react.fc this component requires not just count but maybe it also requires username string props and we say hi props dot username how do we get the username to here well first we're going to type error there so over here we're going to get a username but only if you're auth so const auth equals get auth if auth return props in there it says otherwise we return whatever else I also realize we're not naming that correctly we're doing auth which is dumb but fine cool so now if auth is true props auth gets passed through username test I could even be much more strict with this so aft colon true and here auth colon false so that we know we either get this with a count and rendered at or we get this with username if props.auth theoretically we now know username equals props.username but we're getting a type error here because it doesn't necessarily know that if props.auth is true this is good so put an exclamation point in there to enforce that you're starting to see oh props.auth versus auth uh that's fair I think I can just delete this though really that nope still if props Dot auth username props that username still incorrect fixing that that way that sucks this flow is bad that if this component needs this data first off that this component needs to know about that and manage that more importantly that all of the data this whole page needs has to be fetched here so let's say this component was six components deep in another file somewhere and it needs this data we put this prop on it we go up a layer we put the prop on it we go up a layer we put the prop on it we go up a layer and then in the server functions for all the pages that render it at we now have to remember to go add that to get server side props because this is the top of the funnel this is where all of the data for that first pass has to come through and if we don't have any of the data that any of our components need when this happens then we can't use the server functions for that component's data we have to fetch it somewhere else that requirement means that the data flow here is very top down it requires you to know everything the page might need before you even start rendering it because you need all of that data and a type contract to bring that data all the way through ahead people are saying why not context because components are used in multiple pages and you're not going to build a whole data architecture around every possible route condition in a context to build into get server-side props with it if you have done that fantastic don't call me during your outages when you forgot certain data on certain routes and everything falls to adding additional layers of abstraction doesn't make this better it makes it more likely to break a component that knows what data it needs or a route that knows what data needs should be able to fetch that data ideally in one pass with create T3 app we're using trpc which means we're not server-side rendering the all of the data on the page we render a minimal subset usually just like a sciatic HTML file and then based on which components render a batch data request is made to fill that page with the correct data at a component level different routes and different components need different data so they request it in different ways and the page renders correctly there is an additional step in waterfall there but the DX is unbeatable there is a future where the DX here can get to that point I look at solid start with longing eyes the ability to write a get data function and then just call that and it will be handled correctly next SWR is getting pretty close as well the next SD next SWR endpoints is getting pretty far with these flows as well and I'm very excited for ways to import at a component level the data you need from your back end rather than implicitly adding all of the data you need here and hoping that every component that needs data is getting the data they need from this function that like the amount you have to understand of your data flow or it's like after page.tsx this is unknown number of components and then here component that needs data component TSX if you put another wrapper here of a context you're not you're adding an additional stopping point my problem is how many steps are here in the first place if you can reduce these you'll make working with your application significantly easier as a developer but let's go into this fourth one I added last second performance in general I generally think that blocking first bite on a data request is bad if you can avoid it having HTML on the user's device as fast as possible is something I like to strive for I have a few talks where I've went in depth on this I'll link them in the description of the video where I talk about react data flows and rendering patterns and the harsh reality with get server side props is it blocks for way too long you see if I can find one of these diagrams fast because I have so many of them and some of them are actually really good ah probably in this one from before I was moving things properly that's it yep cool so with next SSR you block up until all of that data fetches and the user sees a blank page that whole time it is a white render on their device because there's nothing there yet and when the HTML comes in there's no pop in but they don't see anything until then that behavior kind of sucks and on websites that block on server you can feel it especially if you're using Prisma it can take like three seconds for a page to load it's rough if you add a cache layer in front cool but now you're breaking the off use case and yada yada there are a lot of catches when you block all HTML returning to the user on a server-side data request that is a huge hit to take and it means that when you write these get server-side props functions you need to go out of your way to make sure they resolve as fast as possible or you're going to be blocking all of the page or all of the contents of the user's experience on that add a bunch of caching in front and you can make it work but that's like an additional expectation of the developer implementing with get server-side props you'll notice a theme Here because of the assumptions that the get server-side props primitive makes and next you have to work around a lot of edges you can do it there are lots of ways to make get server-side props work and work okay but those those have a lot of effort required with them and you need to understand it very well to build performant experiences on top and even then if you get everything right it still can take up to three seconds for a cold start if you're using like a heavy uh Prisma implementation and you have a lot of code in that Lambda that has to spin up so you're blocking first byte significantly longer than you have to you are architecting type chains and data flows around a weird pattern that doesn't understand that does understand that components can need data and that pages are the wrong place to do it sharing the definitions and importing those is a whole like cluster yeah it's not great and the routing problems of like let's say we had a nested route so slash users or slash dashboard slash users slash dashboard as I get server-side props dashboard slash user has get server-side props it's rough a lot of these things will likely be solved with the new next jsrfc everything I've seen so far both what's public and what's not is incredibly promising that it's going to fix these problems but in its current state get server-side props feels less like a feature that you should be excited about and more like an anti-pattern that you should avoid if you can it was an incredible Revolution at the time but as it currently stands get server-side props is rough and you should probably avoid it if you can hope this was useful rant I've been holding this one in for a while I've talked about this topic in a few other videos if you agree or disagree or have additional questions feel free to ask them in the comments or even better join the Discord at t3.gg Discord really appreciate all of you for hanging out for this one thank you guys again peace notes




## gql.tada makes me miss GraphQL… - 20240225
I have an interesting relationship with graphql on one hand on one of the biggest proponents of trpc which is well known for being the alternative to graphql that makes more sense to use nowadays and on the other hand I keynoted graphql conf and was overall very positive about graphql so much so that people questioned me afterwards asking if I actually meant that well I do I think graphql is an incredible technology that solves very specific problems for very large teams but it has its gas it has some catches and it certainly isn't the easiest thing to set up or use much less use Cur corly don't even get me started on how many degrees you need to get relay working the way it's supposed to because that's not what I'm here to talk about I'm here to talk about graphql getting a good bit closer to the experience we'd expect from something like trpc the reason for that is a project called graphql Tada I discover this because Matt poock has been posting a bunch about it both on Twitter and on YouTube I'm doing my own research and trying to learn a bit more because this isn't the first time we've tried a project like this despite how interesting its way of using typescript is but why is typescript involv what the hell even is graphql toada let's dig in a bit if somehow you're not familiar with graphql one of the Core Concepts of graphql is a query you write in graphql syntax the structure for the data that you want and then you get return to response when you query that thing the type definitions are where things get interesting though because there's a schema that declares all of the different things that can exist in your graphql endpoint and then the graphql syntax that describes what you actually want to grab but now that you want this third thing which is the type definition so you can use that in your components in typescript that's not a given that's not a default because you have to translate between a different language to get it the the way most tools solve this right now is by cening that third piece there's a process running in the background that keeps track of whenever you change your graphql queries and it generates new type definitions that are used in your components when you call them it's a bit of a mess do you what else is a mess the string parsing in typescript you can write crazyy types with string abuse within typescript so much so that graph T has shown how you can abuse it to generate type definitions straight from your graphql query let's take a quick look cuz this is insane the goal here is to to lower the friction between the typescript side and the graphql side so you don't need that code gen step and you can just write things in typescript and it works so in this example where they're using the graphql helper from graphql they call graphql they write query Pokemons Pokemon ID and now they have the Pokemon's query that they can use in their use Query helper it's actually not even theirs it's urql which if you're familiar with it's one of the best ways to do graphql without having to buy into something huge like Apollo now it's able to parse this string literal that you wrote in here with the little syntax there and generate type definitions from it the project contains two installable modules graph. which is the package providing the types and the runtime API as a library as well as the Noco graphql SP which is an LSP for graphql that's actually a typescript language service plugin that gives you the editor feedback and integration so it's not just string hacks huh so the key piece you'll see here that if you haven't done much graph K before might not make sense but if you have will make a lot of sense traditionally when you're editing a file like this and you're making a change to the query you have to save the file to get type definitions because you have a plugin in the background that is constantly watching for the changes you make in order to generate the right types but if you use something like trpc all of that exists within the language server in the editor so you can be typing away making a change and without even saving see another file throwing an error because the change you made breaks it having that level of feedback in your editor and not having to rely on external compiler steps to generate the right checks to give you the feedback you're looking for in your editor is huge like huge huge and it's so cool to see the work that this team has done to get that level of seamless feedback in the graphql experience like if I skim over to here you'll see you can map off of result. dat and it knows the type of Pokémons and it knows that each of them has an ID and will throw an error if you try to access data that it doesn't have this is not the default graphc experience this is so much better than what you would normally expect in VSS code as we go back in here you'll see that currently the Pokémon component takes in nothing but if they need this to get additional data they can make this new graphql query for it that selects the Pokémon fields on a Pokémon it's actually a fragment definition you're familiar with fragments it's like almost like a partial within graphql where you can use that piece in multiple places and also use it as a type definition for what this component needs so here I specified that we don't just want an ID we actually want a subset of the Pokémon Fields a fragment of and we want this to have the name so now we can read the name off of this fragment but it looks like we're going to get an error or something here cool so we have name and flea rate we'll just leave name is what I think he's doing here yes and here you're going to see an error when it gets passed because Pokémon is missing one of the fields it needs this is where things get really cool cuz you could specify at a component level hey I need this much data from a Pokémon and now if you don't pass it that much data you get a type error until the query includes all of the things that that component needs and you can even import the fragment Pokémon fields and dump your value there I am not necessarily in love with this syntax of having to like make this imaginary variable so to speak because What's Happening Here is Pokemon fields is getting passed in as a fragment in this array here and then we're accessing this inside of here as bound on Pokemons because that's where it's created with this syntax there this is saying all the fields this requires should also be queried in this query so now if we go back to the component and we make a change to the fragment we don't have to change this parent because it's using the same fragment it's all about following that source of Truth which is a really really powerful pattern and it's cool to see this unlocked inside of the graphql world so let's continue reading about how it works it's actually really interesting I thought it was just using string hacks because if I recall that's how salty did it before if you're not familiar with salty aim be cautious scrolling through their Twitter profile phenomenally talented developer they made Alia JS which is the best framework for doing web in bun right now if you want a really fast alternative something like Express in bun o is the tool for it without question as such everything they work on is some crazy pile of modern hacks and somewhat recently like mid last year salty worked on graph Q the typescript plugin Mobius is what they named it in the end they did a ton of work on this also sorry for light mode based though all these on the right side of these things having this level of control in graphql where you're like writing an object and then getting type safety on the other side if I scroll a bit further in you'll see now that we have this really deep data comments data user slug you can map the comments data and get the user slug just from this nested syntax the way this works is it has to compile out a graphql query on one side and also infer type definitions on the other which is inherently going to be a massive Challenge and it's an incredible achievement that salty managed to get this working as quickly as they did and I'm genuinely so impressed with what they did which why I wasn't surprised at all to see salty quickly jump on why does this look familiar when they first saw Matt's video Yeah I had every intention to tag them in this but yeah as they said they weren't intending to maintain their solution so this one is really cool to see so let's play because a certain very handy Community member has built us a very handy demo and we can go to our components here's the app we create the client for calling graphql stuff from your ql again urql is probably the way I would do graphql nowadays they give it like almost like react query but specifically for graphql stuff really handy here you have the Pokemon item and the Pokémon list oh this is the example from the demo thank you Gabriel for pulling that out so here we can see the graphql query for the Pokemon endpoint can I I delete that won't auto complete interesting that whatever my prettier setup is caused that to break out and no longer be formatted correctly that's a bit strange I'll have to save without formatting to keep that from breaking these are the little quirks you'll find working in graphql stuff you got to get all the rules right for like the parsers to handle things correctly it's silly that like as soon as you break that out like that the highlighting breaks but it does because good old graphql but we're not here to about the syntax and prettier doing its thing we're here to actually play with this and what it is capable of doing the thing I wanted to see is the autocomplete stuff if I save that will it still okay it will I know what I have to do again with the weird quirks since we are using a custom typescript anything we can't just use the same typescript version that the editor uses because it's not going to see all this stuff so in order to fix that we have to tell the editor to use the version of typescript that we are using in this project so typescript select typescript version manually use workspace version and now all the type definitions are going to start working it's dumb and annoying but VSS code B vs code and they won't let you by default use the typescript version in your project This Bites so many people and so many things it's dumb but it is what it is a rant for another day so here I added the name field but we're still missing those other fields so we're going to get a type error here cuz we're not including those fragments that error is unreadable but with the prettier typescript errors it's a little better this isn't assignable to the type with a Pokemon item the fragment ref uh name and ID are missing but required in this type definition type error is not great but it's there in this fragment snippet we Define a fragment named Pokemon item on Pokémon and it's these fields putting words to what a fragment is is hard you can kind of think of it like a set of rules that we want to have access to in other places we could Define multiple fragments in here so we could do like fragment uh Pokemon item with more on Pokémon and this can have ID name maybe we also have like image not not an OP on here let's see what other options we have I think Sprite should be an option right whatever we'll put types field types is not used do I have to put things in here let's just take a look at the schema you'll find most of your time with a graphql code base is looking at schemas okay types are just an array of Pokemon type and Pokemon type should just be an enum yeah cool so we're just going to drop types there even though it's not being used something that we might want in the future it's weird that it marks that is not being used so now when I go back here since we're dumping the Pokémon item fragment any fragments we've defined in here are accessible in this query because we put them there this is kind of like dependency injection is the wrong word but what's Happening Here is we're getting access to the fragments that we defined inside of our query here so I could do instead of just Pokemon item I should now have access to the Pokemon item with more and I should be able to do that here instead and have it still work which it does and also if we scroll down here we should be able to see undefined fragment Joy the the joy of graphql can I not have multiple fragments to find at once here like that that the issue that seems to have shut that up yeah Pokemon fragment with more interesting I'm just really surprised this is there like that I'll try this pokemon. type if I do that cool that goes away that's actually really cool that it's smart enough to correctly flag that cuz we are aren't using it that I didn't expect that's a level of introspection that I'm Blown Away with if I delete this that goes yellow unused that's nuts actually what the hell cuz that that's like I If you don't get why this is so crazy I will I will quickly remind you these are two different programming languages that happen to exist in the same file so for it to be able to syntax highlight correctly in the graphql language when something in the types language is or isn't using it is actually pretty nuts and then back here since I changed the name of that this has to be correct and again you could type error if it's not that's nuts there's some really cool stuff here and as for like honestly I'm going to command s and and break this cuz I'm sure it will still work like if I go to the page now it has the types I'll add a quick do join there and now we see the Pokemon colon the types this works because of the insane number of hacks they're doing the reason the syntax highlighting isn't working is the VSS code plugin that I'm using for the syntax highlighting that should work in here breaks if you do this new line syntax and don't have it like that annoying but text formatting is never easy you you get the idea though that's actually really cool in the idea of this type of control flow where a specific component can say I need all of this data so the parent can then grab the fragment and apply it means architecting with a giant frontend team where these things are being made by different people and this component might not be able to do the queries itself that's huge that's huge huge someone ask is types type safe it is you have the array of all of the possible types the one thing you'll see in here is the or and the orol here as well this is kind of a necessary evil of graphql effectively every single thing in graphql is nullable because you never know what part of the fragment has or hasn't been resolved so you're kind of stuck treating every single thing as nullable which is why we see so many question marks whenever we see an example using graphql stuff because even after you've asserted stuff you still never know even here we've asserted that we have Pokémons here we've already confirmed that but it's still possible for ID to be null so we have to handle that case by just passing the index here instead and these little things don't go away with this plugin which is sad because these little things suck and are one of the main things I'm frustrated about with graphql but the overall win here is massive and I don't want to downplay that when I express minor frustrations with how graph makes everything nullable yeah that's really cool good stuff yeah if I was using graphql right now I'd be deep on this that's for sure I can't believe talking about graphql again but here we are turns out somebody made something cool in the space and I'm actually really curious about it again I don't recommend graph kill for everybody if you don't have a fully separated back end and front end especially if those aren't different languages graph kill probably doesn't make sense for you I'll make sure my editors put up the chart that I love to show off of where graphql does and doesn't fit compared to other technologies that said really cool to see what the team's doing and I hope this work continues going forward let me know what you guys think in the comments are you still using graphql or have you moved on to trpc or just given up and used rest or Proto buff that's all I have to say until next time peace NS




## i made my own search engine (kind of) - 20250227
one of the questions I get the most is how did you just search YouTube or Google images or whatever else cuz I have one search bar and I search a lot of different things with it the answer's always been duck Dogo there's a really cool feature on duck. go called bangs where I can type in what I want to search do exclamation point something like that and tell it where to go exclamation point GI is Google Images so when I hit enter it will eventually refresh cool Google Images pretty entertaining it did that there though because it shows the problem I have with duck Dogo I love this syntax this is called bangs and bangs are awesome they let you have one search bar and really simply with easiest syntax ever search anything do exclamation point YT for YouTube and now it searched YouTube I can do exclamation point GH for GitHub you can put all sorts of different things there and it's super convenient it's how I've done search forever but sadly like experience with duck Duo hasn't been great they called this out come on I'm so mad at go right now going to move off of duck. go first thing after stream I am so pissed they're also duck duck you duck duck duck go I know I was kind of joking when I said it's time to make my own search engine but I couldn't stop thinking about it so I did it and today I'm introducing unduck because I'm tired of getting ducked by Duck Dogo unduck is free and open source but I still have a team to pay so let's hear from today's sponsor quick and then we'll dive into what I built and why really excited about today's sponsor because it's a product I've used and loved for over 4 years now that product is Agora and I firmly believe they're the best way to add audio and video to your app especially if you're doing live communication if you're building a zoom clone adding voice chat to your app or maybe you just want people to be able to stream their voice over to something like open AI whisper model they're the best way to do all of this and everything in between I know this for a fact because I've been shipping them for 5 years almost now on PING I tried every other provider all the crazy web RTC Solutions even rolling my own and the quality I was getting was not even close to comparable to what Agora does and their latency somehow even lower none of the weird peer-to-peer crap it's actual highquality reliable video infrastructure with latency that doesn't make sense at resolutions I didn't know were possible via these modern web Technologies it is really really good I've loved them for a long time and if you're trying to build that in go give it a shot they even overhauled their entire react SDK based on my feedback I had to roll a lot of that myself back in the day it's cool to see it's in such a good State I can't now mention the AI bit quick they just ship conversational AI which is an integration to to let their super powerful realtime Network and sdks work alongside the open aai realtime models so you can do live transcription live voice generation and so much more you can have a conversation with an AI on the other side live just like you're in a zoom call if you're trying to build something like that yourself I don't think there's any other place that will provide all the missing pieces anywhere near as well as Agora will check them out today at sv. l/ aora and make sure to tell him that the oena I can't believe I made a search engine I don't think it's really a search engine I've been calling it search engine in quotes or not a search engine in all the places I can when I talk about it the goal of unduck is to give you the power of bangs without having to deal with duck duck Go's DNS being garbage because it is garbage it just fails to resolve half the time I'm honestly hopeful that I'm effectively just going to bully them into fixing it because I'm not the only one with this problem I've seen so many people using Duck Duck Go like me trying a search and having it just hang there sometimes for like 20 to 40 seconds and the reason is because it's searching on their server it's not doing a literal search but the search is going to their server being parsed and then the URL is transformed to a different search engine if you used a bang and there's no reason that that should be on the server I just want the search to happen immediately and if I do corgis exclamation point GI I'm pressing enter now it's already searched no speed up nothing there versus going to the duck Dogo site so the DNS is pre-cached it's warmed by the way corgis it's faster now cuz I already did the search but it's a 50/50 shot and as you saw from that highlight reel and from the start of the video that wasn't faked that's just my experience using duck dug go half the time and I was going mad Duck Go has been my default search engine on everything for like eight years now not because of the Privacy thing the Privacy thing is nice just because I liked the ability to search anything so easily and I'm not new to the space I built the Chrome extension a while back that I should probably take credit for more often people are always surprised Chrome Tana because I was so mad that Windows 10 would only ever search Bing that I made an extension to redirect your Bing searches to your search engine of choice the main reason I made this is I wanted to be able to use bangs from the window search bar I wanted to type something in there exclamation point YT enter and have it open my browser on YouTube Microsoft's response to this was to make it so Chrome can never open from Windows search they forced a default in Windows as a response to me and obviously others at the time building tools like this to work around their forcing of Bing into Windows I built this like I think it's been over 10 years since I released this which just kind of wild worst thing I ever did chrom Tana got my Google account fished so many times to this day I still get spam and fake purchase requests from people who want to like purchase Chrome Tana from me so they can spam a bunch of people with it Microsoft tried to get it taken down so many times with copyright claims I had to change the logo three times to get him to shut up the rating happened because one of those fishing attempts failed but despite failing despite me having tofa they somehow managed to use a different loophole to break through get into my Google account and post malware as a chrom Tana update so that's the reason that it has the bad rating yeah good times I wish I never published this honestly it helped Kickstart My Career a little bit but what I've gotten in return is a lot of not success hopefully unduck goes a little bit better all of this is motivated by my love of bangs I really like the pattern the fact that there are 13,500 of them I use like 20 of them the fact that there are so many of them is actually really cool what's even cooler is if you take this URL bangs change it to bang. JS here they all are is a Mal formatted JS file it's called JS it's some weird hybrid of JS and J on where it is just an array that's never assigned a value So undu currently solves this by copy pasting it making it bangs equals and then prettier formatting it so I don't go literally mad it's quite a file 12 something thousand lines gzipped is down to like 400 kilobytes of JS though which is nice and I added one on top here for T3 we'll get to that in a second then I have the world's most complex vanilla JS code oh here's the UI by the way if you were curious the UI is me setting in HTML if I call my no search default page render which is what gets called if you don't have a query Pam in the search so I just grab the Q which is the query pram if I don't you don't have one you're on the homepage I render the homepage if you do then I match to try and find a bang if I find it cool I use it if I don't I use the default the default is either coming from local storage if you pass it through local storage yes you can set it as local storage with default bang and if you don't I just use G which is Google I did that because I almost always did exclamation point G Google's still my favorite overall results Now the default will just be that instead and you can change it by just changing default bang in local storage we're going to expose it as a URL or something probably in the future maybe even make a UI for it God forbid as you see we put a lot of work into the UI here you might have also noticed our dependency graph is nuts I have so many depths here so many dependencies the only actual dep I have is the V pwa plugin I think it needs to be a real dep I don't know if it has it can be a Dev dep or not I didn't really play with it to figure that out I think it can just be Dev not positive the reason I added that is it allows us to have a much nicer Network tab so I hop here and look at the network tab this gets served by the web worker because the point of having a pwa is that you have a service worker that can resolve content without having the internet on so here you see the HTML page came from the service worker nothing had to be fetched from the network to load this which means when I do my searches nothing has to be loaded it's just evaluating a tiny JS file cach on your computer that's it no network calls no tracking none of that I do have anonymous tracking with plausible on here very easy to disable if you want to I didn't even do a custom URL for it probably disabled by default if you have an ad blocker just because I was curious how people are going to the site that's it though I didn't want to build a real search engine I don't want to try and make my own revolutionary search product I just wanted bangs to stop being so ducking slow and I did it this was a very fun informative build for me it showed me a couple things I found interesting first and foremost building quick solutions to problems you have has never been easier the combination of the tools we have the platforms we have for hosting things and most importantly the AI stuff that we build with has made it so easy to take the thing you like from something and go make a better thing with it since ducko is like an open- Source very generous company their bangs were all public information admittedly in a weird format but it was publicly accessible information so I could use the open source info they provided the packages like V and the Bund lers and the tools there to make it easier to build I could use AI to help me generate and smooth out some of the code I hate writing Rex so I spent a lot of time with AI and a couple Rex debuggers to make sure this would work as effectively as possible and the result after all of this is code that works really really well I built this whole thing in an hour it's probably going to take more time to edit the video put together the thumbnail and title brand it package it and release it then it took for me to build this in the first place I'm not saying that as a flex I'm some kind of God certainly not bad this was a nice reminder that I'm good at writing code but more importantly the tools I'm using make it really easy for anyone to build something like this relatively quickly and I love that I love the fact that when I have an issue with a piece of software I'm no longer stuck waiting for the company that built it to fix it or sitting there dealing with the frustration of the thing not working how I want it to I can just go build my own alternative now that's better it's kind of what we did with T3 chat admittedly much harder product to build but I haven't show you guys my favorite feature and I'll admit I didn't think I would use this that much when I set it up and I was entirely wrong who are the best software Dev YouTubers to watch as an experienced engineer exclamation point T3 instantly spins up a chat on T3 chat I have been using this so much more than I ever ever would have guessed sadly I didn't rig the response as you guys can tell here there's a handful of people I would not have recommended in the list like Tech lead Bob Martin but the fact that I could search things like that to AI directly has actually been really really nice I found myself defaulting to searching my own AI chat app instead of doing traditional web search and it's changed the way I do search it's changed the way I've written the queries and the things that I want to go look for and if I look through the things I searched here this one definitely did that through uh exclamation T3 bang this one I did I was about to Google search bash command to make an sh sh file runable because I'm so tired of remember bring the CH mod CH and all that I was about to hit enter and real quick exclamation point T3 enter now I got here one click copy go back to my terminal one click paste and I'm back to work I have been very surprised or here's one update all files in directory to be pretty or formatted correctly I knew it was Das Dash right I didn't know what came after there was other things or not I just couldn't remember I normally have this already built as a script just wanted to quickly double check the ability to do quick searches like that or here what happened to the chat message there might have my setup in a slightly corrupted sayate CU I'm debugging on my own account all the time my my chat history is a mess for all the weird things I do but the point I'm trying to make here is I've been really surprised at how often I'm using my search engine to search my chat app and it's kind of rewired my brain I'm sure some out of this is biased cuz I built the things and it's pretty cool using the search engine I made to search the chat app I made and a browser that I've been bullying to go in the direction I wanted to but on the other hand it's actually been really useful and I am amazed at how often I'm defaulting to it I don't think I would if it wasn't so fast not just like we built a fast chat app that local first and everything but Gemini is the default works really well cuz it flies the point I'm trying to make here is I underestimated AI chats as a default search engine and now that I'm using it more I'm actually quite enjoying it that all said wasn't what I built this for I just wanted to unduck my Duck Duck Go bangs and now that I've succeeded with that who knows where it'll go if you want to add it to your browser it's relatively simple go to your search settings relatively similar in most browsers add a custom search engine unduck and as you saw here there's a little click to copy paste that and now you've added your new search engine that easy I am so happy with the experience I have had with this I added it to all my browsers can't add it to my iPhone though because they hardcode the search engines Apple yeah that's all I got on this one though crazy as it sounds I built the search engine in a few dozen lines of code and it has become my default and I'm very happy with it if you want to use bangs I'd recommend giving it a shot let me know what you guys think and if you couldn't have guessed already fully open source already starting to get PRS I'm sure it's going to be a lot more chaotic once this video drops MIT licens because I don't care if you want to go Fork this and build your own thing go nuts I don't plan on putting a lot of work into this project I wanted to solve my one problem I solve my one problem if you want to solve other problems awesome I did do one that was really helpful uh somebody pointed out if you do ghr it's lets you hot link to a GitHub repo but it would parse the slashes incorrectly so I added custom handling for that so if I want to go to like I don't know uh ping. g/ upload thing it will open straight to GitHub to that repo which is really nice yeah could see myself adding custom bangs probably through local storage haven't done it yet something I actually did really want to do is log all your searches locally in indexdb so that you can look at them and have like a page showing it all yeah there's a lot of places this can go I'm planning on taking it none of them I'm expecting just knowing how these videos tend to go for three to four Forks to immediately pop up or things similar to it most of which will probably go further and be even better than what I built and that's an awesome thing I don't want to be the exclusive provider of duck duck goes bangs I'm not even the exclusive provider I sold them from duck. go I just wanted to solve my problem and if this solves problems for you awesome if it doesn't fine too and if you have different problems that this shows you that you can go solve do it I would be honored I would be pumped if someone cloned unduck and made something way bigger and more successful with it that would be awesome just make sure it resolves locally please I don't want to have to do a hop across the network I don't want to have to wait on someone else's shitty DNS just to go Google search another platform I don't need that please make sure it runs fast and honestly if ducko gets their together I might just move back there anyways but for now I built the best search engine in the world for me probably won't be the best for every one but if it is for you awesome and if it isn't you now have all the things you need to go make your own that's all I got on this one let me know what you think it's my search engine a meme or is it actually useful I think the future of more personal software like this is really really bright and I would recommend you try building things like this yourself and until next time keep subbing to T3 chat




## iPhone 11 UltraWide Skate Footage Demo - 20190924





## it's time for a change. - 20250331
it's been a wild few years guys I had no idea any of this would happen when I first started the channel I originally only started it because I wanted to vent about tech stuff and better understand what creators needed when I was working on my Creator business ping since then it's been wild I never would have guessed we would have hit 100,000 Subs in our first year that my first handful of videos would blow up the way they did and years later I'd have a whole team helping me run this channel been a wild ride and it made my 20s something truly magical but at the same time my 20s are now over I just turned 30 and it's a big change for me that's making me reflect on a lot what am I doing how do we get here and what's next in many ways I want to just keep progressing turn things up make better videos for more people more of the time in otherwise I'm just looking at the calendar and questioning what the hell I'm doing this is a magical experience getting to share things I love with millions of people but at the same time it's not what I would put here to do I want to build I love building that's always been who I am and if you've seen how much happier I've been lately that's cuz I've been building more T3 chat has been an incredible outlet for this urge to just ship and that's why I kind of want to go back to the way things were this is a hard decision to make really is I'll be back in just a second up ner it's been a bit God I'm I'm still getting used to seeing myself in the reflection like this again it's been a while it's been almost like what five or six years since my hair was its natural color in over three years since the stash ah I'll I'll adjust you haven't been around enough time to know the history the stash was only grown originally cuz I was doing a video responding to a prim engine thing and I thought it would be funny to have a must and I couldn't find my pack of fake mustaches but then my viewership went up like legitimately so I kind of felt like I had to do it it was fun but I was kind of playing a character and slowly over time I had to lean more into it as the content got more and more popular and that that wasn't great I handled it well overall and it wasn't like I was pressured by people into doing it it was just the obvious thing to do you lean into what's working but at its core what worked on this channel was never that I was playing into the current fad it was always that I talked about and did the things I cared about I made the channel because I missed my lunch and dinner conversations at Twitch in the Deep nerdout sessions I would do with other Engineers who cared Co hit and that kind of disappeared for me and this channel came out of the ashes plus my need to better understand what creators wanted when I was building ping and now it's my life now there are four people who basically full-time work on this channel with me another three working on my my business over at ping it's unbelievable to think this has gone to a point where I can do that and where my desire to just share things I'm excited about is now employing many people and bringing business success to my other side as well it's so genuinely cool but I didn't like the parts that felt fake and it took a while to accept but the blond-haired mustache kid isn't me at my heart I'm a skate rat that learned to code because he broke his arm and couldn't skateboard for a summer and I missed that part of me on one hand that means I need to skateboard more but on the other it means I need to be honest about who I am how I present myself and what I do going forward I haven't had a real vacation in over 5 years and I haven't taken more than a day off since I went through my combinator back in like January to March of 2022 if I'm fully honest it's been great for me I like being like this working on things that are exciting to me constantly and getting to rant about new stuff right when it comes out and also go code and build all the stuff that we're shipping it's been awesome but I'm scared I'm going to burn out again I already went through this in 2023 I'm trying my hardest to be careful part of that is why I've staffed up on both sides it's why I have Julius and Mark carrying everything with upload thing in T3 chat right now and it's also why I have my channel being run by such incredible people I miss video editing dearly but FaZe has become a better editor than me this is one of the two videos I I edited myself this year and as much as I love it and believe me I really do I genuinely Miss editing it's so fun it's not the right thing for me to be spending my time on I felt similarly about thumbnails but I've brought on Ben Davis who you might know from the spelt and goh side who has been very quickly becoming the manager of this Channel and now most of the thumbnails you see aren't from me they're from him I'll tidy them up here and there and throw together my own every once in a while I help with Concepts a lot what you guys are seeing isn't my videos anymore it's ours it's a team of people making this all happen and I do have to perform for them I do need to make sure we're doing everything right and that's part of what made the appearance change scary this is going to hurt my numbers it's crazy to think but my stats will be down as a result of going back to my natural hair and shaving my mustache I know that because I watched them go up when I first grew them in prime one as far as AB testing as crazy as that might sound these are the things we have to optimize for as creators we don't have to but it helps a lot I'm a bit tired of that though I just want to talk about the stuff that's exciting to me and I've been doing that more and what's been unbelievable to me is that focus on what I'm actually excited about seems to be helping a lot the Channel's numbers are the best they've ever been T3 chat has been a huge Gateway for me to genuinely get into AI stuff I've been super excited with everything I've learned since as well as incredibly frustrated with the state of the AI world and the AI Bros who are influencing in it it almost feels like the JavaScript community did on YouTube when I got started where it was all beginners and grifters and all of a sudden there's this new like pocket of experienced people who care and want to talk about the reality of how these things affect stuff and I love that that's what I'm here for and now I get to do it in a whole new space I'm seeing crazy growth where in an awesome spot but I also need to take some time for myself we've been on such an insane grind that I have videos recorded for the next four weeks some of these videos are from so long ago that I was still using Arc yeah that browser I hate now obviously all of these videos were recorded before I uh did this to my head so you'll you should expect to see a handful of videos coming out where my hair is still blonde and my mustache is still strong and I hope that when you guys see those videos the response isn't wow Theo is just reposting old content because it's not me it's us it's my team and filming the video live on stream is a very different thing from FaZe editing it putting it together taking feedback from the team from Ben getting it on the channel descriptions titles thumbnails and everything set up and ready pairing it with a sponsor reaching out to the sponsor managing all of that the new Sponsor Change by itself almost Forex the amount of work it takes to run this channel it's crazy how going from working with five Brands to 50 makes things harder but it's also why I've been able to justify bringing Ben to San Francisco to work with us full-time it's crazy to think that this channel has in-person employees making it happen now but it has to what we do here isn't possible otherwise I'm not upset about that I'm so genuinely excited about that it's incredibly cool and I'm beyond privileged and lucky and so thankful for each and every one of you for helping make all of this happen and I'm incredibly incredibly thankful that we found a way to make this content that doesn't involve me charging each and every one of you a whole bunch of money in order to do it we found a way to make a good balance between Brands supporting us you guys getting good content from us and us making content that isn't biased ideally based on the brands that we work with you're seeing me as I am and that was always the goal I wanted this channel to feel like a lunch or dinner conversation with other smart Engineers who were excited about cool things and I really hope that we achieved it and I'm incredibly thankful for the people who have been helping run this Channel with me now in order to make it all possible I think I can finally take a bit of a break going on a trip with some friends the next few days and I won't be around as much thanks to this content backlog will be more than fine there will still be videos every day basically as far forward as I can imagine previously when big news came out I would kind of just drop everything to go film and get a video out probably not going to do that as much anymore last year I did 15 conferences in order to meet as many of you guys as I could I'm going to do less than five this year I need to be realistic about what is working in my life and what I need to be working on with my life and as much as I love doing all of this I love building more and the success of T3 chat has been incredible so me reflect deeper on that excitement and energy that I'm feeling half the time I'm live I just wish I was on my laptop writing code in a corner somewhere trying to find more ways to bridge the gap between these things and also I can't spend all my time coding there's a lot of other business stuff I have to do I just don't like the path I'm on right now where half my time is content half of my time is business management want to find a way to sneak a lot more code in there and in general build as much as possible my channel is best when I'm building a lot that's clear from the videos at the start of this year the more I build the better my content becomes and I think we're finding finally the right balance between all of this stuff it means that things might shift around more and change it means I'll be leaning more on my team on both sides to make all of this happen but hopefully in the end what it means is more great videos for people like you and all of the others who support us making this content I hope you guys know how much each and every one of you means to me even the crappy commenters who get us boosted in the algorithm you guys are especially helpful but seriously the support I've gotten the kind words I've received from people I've looked up to for decades and the the reality of the life I live is not one I could have understood when I was 15 if you told the 15-year-old Theo about what I'm doing and where I am today he would have laughed at you and said sure you never have imagined that a skate rat from a farm town would make it here and I wanted to take some time to reflect on that and be a bit more honest with myself and hopefully a bit more honest with y'all too sorry for a rambly non-te video but I want to talk about this stuff I hope you guys understand thank you all again for the support it means more than I can possibly put into words can't wait to see what 40 looks like until next time peace nerds




## javascript is dumb - 20240625
JavaScript is famous for being a totally normal language that behaves exactly how you would expect there's nothing in this language at all that is confusing if you look at other weird esoteric things like python or Ruby you see these crazy syntaxes that make no sense at all but in JavaScript everything is logical I want to go through and prove that by showcasing a bunch of totally normal behaviors that JavaScript does in totally normal ways I think this is going to be real fun we're starting with this GitHub repo very very useful GitHub repo on Denny Devon's GitHub Link in the description if you want to read through this yourself JavaScript is a great language it has a simple syntax a large ecosystem and what is most important a great community at the same time we all know that JavaScript is quite a funny language with tricky Parts some of them can quickly turn our everyday jobs into hell and some of them can make us laugh out loud the original idea for wfjs comes from Brian laroo this list is highly inspired by his talk wfjs from over 10 years ago and if I recall that was inspired by watt by destroy all software which is another classic talk this one's not on YouTube so you have to find this by Google for Googling for it absolutely Legendary Super inspired by this were they the same year it's actually hilarious we haven't had funny talks about weird language quirks for 12 years now we're going to make up for that by making a YouTube video going through a bunch of the best things here you can install this handbook using npm just run npm install DG wfjs you should be able to run wfjs at the command line now so open the manual in your selected pager otherwise you may continue reading on here we're just going to read through the page because as per always JavaScript a totally sane language that totally sane things doesn't have the things it expects honestly great start to throw some obscure error when you run the CLI if somehow even picked up on the fact that I'm being sarcastic now is a good chance to we're about to roast all of the weird things that make Java script so so special quick before we go further the notation this is meant to show the results of an expression this is the result of a console log and this is just a comment for an explanation so simple synex you can see what the output is cool you should get that I want to dive right into the examples though cuz this is where things get fun great start array is equal to not array what we're in for one explanation the abstract equality operator converts both sides to a number to compare them and both sides become the number zero for different reasons arrays are truthy so on the right the opposite of a truthy value is false which is then coerced to zero on the left however an empty array is coerced to a number without becoming a Boolean first and empty arrays are always coerced as zero despite being truthy somehow even more cursed code yeah the the fals occurs before the number coercion why yeah empty array is truthy but not true apparently that comes up more later on true is not equal to not array but it's also not equal to array so true is array false true is not array also false false is array is true false is not array also true that's the Patrick Beam for real for real the wallet like is this your wallet is this your truth I don't even want to try and digest that explanation we're going to go straight to True is false not not false equals equals not not true obviously true not not false is triple equals to not not true also obviously true oh boy we're in hell I don't even know what this is oh this is a funny game I have to pass it something in order to make this return true so that one's easy you pass it true get back true reflexive X does not equal x um object I want to think it's something good for this oh Nan good good Instinct chat I stole that one from chat I'll give them credit cool transitive X and xals Y and Y equals z and X does not equal Z but I do get past three values here I'm still stealing from chat if this works I'm going to be so mad nope false false false no cuz the not equal is going to fail on that one okay I need to check something quick this is going to be such a cursed challenge let's uh test some theories here okay so that was correct how false does not equal zero what the is this language I retire I lose this seems just cursed enough to be right also the z z false I I I have to win this one and then I'm moving on because it's going to drive me mad oh was the other one empty array false empty array I hate this language mostly I hate double equals like double equals is the most cursed I hope this helps emphasize why we don't use double equals because if these were triples would would be fine I hate this I hate this so much I hate this language I don't want to consider this step by step okay I do want to consider s by how how this makes any sense I have to know so true equals true is false false equals false is also false so not not false is true not not true also true okay that is dumb good old banana everyone's favorite nans the better version of this example I like is if we have const x equal hello I out of space then we have x + 5 Javas does the very logical thing of attaching the previous string to the number or whatever else we add it as long as the thing we add here can be interpolated into a string you're good if this is a two string this works however what happens if we do x minus 5 well this spoiled it for me not a number why anyways this is an old school joke in JavaScript but remastered here's the original Fu plus plus bar fan yeah once you add an extra plus the syntax gets way way more cursed because putting a plus in front of something by the way if you didn't know this if you do plus 15 that's a way to coer something into a number really annoying syntax I hate it just parsent it's free it's right there same thing and the classic Nan is not Nan because Nan is more of a state than it is a value so Nan does not equal Nan does nan double equals equal Nan nope double or triple equals Nan is not Nan so if you want to check if something is Nan it's number do is Nan right Nan there you go we don't need to read the spec for that one chaotic enough is speaking of is object. is and triple equals have a bunch of fun weird cases object. is Nan comma Nan true triple equals is false object. is0 0 false negative 0 is equal to 0 object do is Nan 0id 0 true but Nan triple equals this is all just cuz Nan is weird for at least the first and the third yeah but this one this makes no sense what I hate this I hate this so much in JavaScript lingo n and Nan are the same value but they're not strictly equal Nan triple equals Nan being false is apparently due to historical reasons so it would probably be better to accept it as it is at least they're being realistic here it's better to just accept it than to question it similarly negative 0 and 0 are strictly equal but they're not the same value so it's fun with negative 0 is that you can't get to negative 0 there's no way to like start like let y = 5 y = 0 you can assign something to negative Z but what happens if I like y + one or Y = y + 1 now it's 1 y = y - 1 we're back to zero why the is there a negative 0 oh God if every what people are saying in chat right now is true con Z equal 0 * 1 I hate everything I'm going to be a [Music] farmer yeah negative 0 is not a thing that I will ever concede to being a good thing you never believe this but oh God is this because of like array coercion being coerced into a string somehow by bringing the mass of symbols into pieces we notice the following pattern occurs false true oh oh they spelled it by accessing the letters in false and aing the indexes on it that is so cursed the rest is obvious but the is tricky the i in fail is grabbed by generating the string false undefined and grabbing the element on the index 10 uh more examples every single one of these hurts my brain every single one of them this is making me reconsider everything maybe go is a good language after all because you can't do any of this there what would a what the  for go look oh I know what the what the for go would look like this is an article by faster than lime Lies We Tell ourselves to keep using goang now has this one section that has been rotting my brain for quite a while the channel axioms in go Ascend to a nil Channel blocks forever or receive from a nil Channel blocks forever Ascend to a closed Channel panics and a receive from a closed Channel Returns the zero value immediately I do not know how anyone can justify any of these behaviors anyways back to JavaScript null is falsy but not false obviously not not null is false but null not equal to false zero equals equals false is true empty string equals equals false also true so why is null treated falsy differently like you can double negate null and get false out of it so it understands that null is falsy but it doesn't coers it with double equals again double equals is like I'm just going to search double equals space on both sides so we know it has to be 67 instances of double equals with spaces on each side if we change it to Triple equals there's less than half as many because it's so much more common because double equals is just evil anyways don't say this actually makes sense about anything in here document.all is an object but it is undefined this is part of the browser API and it won't work in a node environment cool that we're not testing that there but God I did see this one earlier and this seems awful document.all is an instance of object so document. all is object cool makes sense document. all being an object is logical type of document. all is undefined but if you check if it's undefined it's false you check if it's null also false but if you do it with double equals why why you cannot explain this one you're not going to convince me that this ever made any sense document.all used to be a way to access Dom elements in particular with old versions of Internet Explorer while it has never been a standard it was broadly used in the old age JS code when the standard progressed with new apis such as document Ducket element by ID the API call became Obsolete and the standard committee had to decide what to do with it because of its broad use they decided to keep the API but introduce a willful violation of the JS spec the reason why it responds to false when using the strict equal comparison with undefined while true when using the abstract equality comparison is due to the willful violation of the specification that explicitly allows that so they're okay with this because it's obsolete minimal value is greater than zero number. Min value is greater than zero cool number. Min value should be the smallest possible value how does this compare to Infinity I I have questions now const Min equals negative Infinity now I have some questions Min comes through as negative Infinity number do Min value equals Min false fine less also false are you kidding and obviously like zero is greater than negative Infinity because Infinity behaves properly but the number. Min value doesn't that is really dumb number at Min value is 5 e324 I.E the smallest positive number that can be represented within float Precision oh why is it the smallest positive number why I I don't know what the use of that is like that just makes no sense anyways what happens when you try to add two arrays Joy I did not know that one it coerces them to Strings and then adds the strings because it's effectively running two string on them when you do add this is one of the weird JMS when you call add you're effectively calling two string on the objects so I have like const a equals 2 string hello const b equals two string World console.log a plus space plus b in most languages you define an operator you define in most languages what happens when you add in JavaScript you just Define what happens when you string isn't that beautiful isn't it wonderful that using the plus magically makes these functions get called and if you're wondering no you don't need the space I just put that there for the formatting just using the plus does this but if you just use it by itself like that it tries to convert it to a number which it can't do but if you do empty string plus a now you're good wonderful language trailing commas in arrays you've created an array with four empty elements despite all you get an array with three elements because of trailing commas I don't even want to think about that array equality is a monster array equality is a monster in JS as you can see below don't compare arrays just don't do it it's never worth it this is never ever worth it you should be very careful for the above examples the behaviors described in this section abstract equality comparisons of the spec yeah just don't compare arrays it's never worth it that's why we have is array so you can even know if something's an array because an array is an object it's not an array typewise Choy we're bit over a third of the way this is going to be a fun experience isn't it undefined in number just seeing those words together has me a little bit stressed if we don't any arguments into the number Constructor we'll get zero the value undefined is assigned to formal arguments when there are no actual arguments so you might expect that number without arguments takes undefined as a value of its parameters however when we pass undefined we'll get Nan this is so so people say the problem with undefined is that we have undefined in null no the problem with undefined is that doesn't actually mean undefined you can't not Define something and have it be the same as when you pass undefined to it explicit undefined is different from implicit undefined so like here's a fun one if we do the example with the comma so const first equals do two in order to make sure it has the elements so two empty items even though we have two commas because the trailing comma but we have two empty items if I make another array const second equals undefined undefined that is different two empty items is different from two undefined there are three bottom values in JavaScript we have undefined we have null and we have true undefined problem that we have two bottom values is we have two we can access and one that we can't if undefined was the same thing as empty item or whatever the you want to call this cool but we have undefined the keyword and we've undefined the behavior this also gets fun if you define a function so if we Define like Funk or function test Funk takes in argument z console.log z test Funk just call it cool test Funk undefined still seems fine but if you actually try and use this internally those are different things it's such a fun joy also yeah if we go to that empty items array that's fine even though first is two empty items and second is that first zero equals second 0 that's fine because the both undefined it's just different types of undefined type of oh boy what a beautiful language parsent is a bad guy parsent is famous for its quirks Joy that's cuz this is technically base 16 because of the star yeah the F in is the hexadecimal digit 15 but without making it base 15 we can't access this and treat it as a number annoying to show this because default Parson is base 10 so if we call parse int with like 71 random text we get back 71 cuz it's going to parse wherever it can so if we do parse int no because it's trying to get the numbers off the front so if we dep parse in 16 no luck but if we do like 26 how high does this number have to be in order for S to be valid I don't care we're going to do 16 that's hexa decimal and now we get the last value because hex is a through F this one makes sense I don't think this is that big of a deal I'm curious where we end up here though parse int Infinity okay this is much more cursed I hate this 16 is Max he says and then here H uh this explains a lot about the mental state of web devs you're not wrong I don't even want to think about this one oh it's converting null to the string null and then trying to convert it foric is 0 through 23 there are no numerals it can convert to so it returns Nan at 24 n is the 14th letter so that's added to the numeral system at 31 U is the 21st letter and is added and the entire string can be decoded all of this oh even more fun if you have a leading zero different equiscript standards are going to handle it differently Joy if it begins with a zero radic is eight octal or 10 decimal exactly which radic is chosen is implementation dependent EAS script 5 specifies that 10 decimal is used but not all browsers support this yet for this reason always specify erratics when using parsent be careful while parsing floating Point values because it's going to coers it to string that's beautiful that is beautiful math with true and false I can already tell you you do not want to do math with true and false that's two so 2 * 2 is 4 minus true is 3 also funny CU two and true sound similar so two by adding true twice time 2 by adding true twice minus true which is 1 equals three makes sense numbered up parsent and parsent are different I hate this language this one makes sense I I think this is fair I know people are mad that type of Nan is number the reason is that is the result of numeric things like you you tried to treat it like a number and the result isn't a valid number like like not a number should really be not a valid number it's still a number in the sense of like how you created it and how you're using it but it's just not a valid one it's like dividing by zero I would say say the result of dividing by zero is a number it's just not one that we've experienced as mere mortals just need to open that third eye and then you can start seeing Nan as the number it truly is under the hood array empty array and null are objects that annoying null being an object and undefined being undefined for type is silly like here's a funny one undefined equals null true type of undefined equals type of null false beautiful beautiful to be fair is the same with numbers like 1 equal 1 but type of one equals type of one equals equals does the right thing in JavaScript always all makes sense nothing confusing here at all magically increasing numbers good old IE 754 2008 and good old binary floating Point arithmetic this one we've talked about a few times I did a video about all the new fun things coming to JavaScript and we have more precise math functions coming and despite that this still is the case where .1 + 2 does not equal. 3 this is not a thing that is just in JavaScript most languages that follow like the trip standard for number math and floating Point stuff are just wrong here and that's reality the things that we understand are not necessarily the ones computers do speaking of things that neither us nor computers understand let's patch some numbers you can add your own methods to wrapper objects like number or string number. prototype. is one oh let's have some fun number. two string equals seven I am excited to try this what happens if I do the following is the number six plus six oh I got too hopeful I was really excited that that might work oh is it number. prototype. two string  it was worth a shot I was hopeful more hopeful than I should have been probably this one has bit me who else has been bit by this in particular the fact that when you chain greater than and less than it is evaluating the true or false there so one is less than two is less than three that's true is less than three true is one three is more than one so that works but three is greater than two that is true one is greater than one false yeah this is so awful the only right way to do this is 3 is greater than two and and 2 is greater than one H this has bit me so many times especially like adventive code type stuff not fun speaking of fun let's do some funny math often the results of arithmetic operations in JavaScript might be quite unexpected consider the examples 3 - 1 2 3 + 1 4 3 - 1 in a string 2 3 + 1 31 empty string plus empty strings empty string empty array plus empty array this is the Classic this one's fun because the order of events matters object plus array both empty is zero array plus object is object obviously super logical super joyous just don't chain operators is not that hard when you remember it that's the problem with the comparisons here this one works so you might write this code not think about it and just think it works and then you get some weird error later on you're like oh  and I think this should throw a syntax warning in most like linters still back to silly math though cuz uh negative the string minus that that makes sense because of the string coercion but like coercing this like that is super cursed I guess it's the inverse of like plus 111 I still hate it I still hate it a lot what okay I guess an array. two string but if it's 44.2 string then it becomes four comma 4 which can't be coerced into a number properly that makes sense it's awful but I it makes sense so if you're struggling to follow along on that one when you do an operator between two arrays it two strings it and then it tries to coers that into a number so it runs two string and then it runs effectively parse int after that this does mean we can try something else though well do my favorite return 7 + 4 obviously is equal to 77 now we're now we're thinking with portals boys wonderful isn't this beautiful this is a great language I love that we can override two string on all arrays obviously every JavaScript developer has a really good use case for overriding two string let's try with like more numbers just to see if we can break this at all what the you're not subscribed to Theo yet you know it's free right right guys it's free to hit the sub button on YouTube I'm putting all this work into going through all this cursed JS just hit the button half of you haven't yet and half of you that have I appreciate you don't hit it again oh boy everyone's favorite Rex you can patch Rex's two string I hate this I hate this so much fun fact I actually did that in faot V1 I patched Rex strings areen in okay Capital string string to this day I don't actually know if when where or why you would ever want to use this okay important question actually does string. prototype. two string exist it does oh boy I have to know const test string equals this is the right string  I was hopeful wait you have to create it with string so const St equals new string this is the right string type of string is object because string capital S is not the same as string lowercase s this is one of the many reasons to never use capital S string but now if do Str Str plus hello that works but json. stringify St Str it comes through as the wrong string now cool new string Str Str double equals string type of new string object object what's that yeah know don't use capital S string never worth it only pain can be found there calling functions with back ticks what's sad is that this is actually useful but nobody gets it in case you're not super tuned into the Twitter drama web dev World there was a drama not too long ago where Sam sikov showed off server actions which is backend code that runs in your server using the use server call which binds this as a post so when you hit this button a form action will fire that runs this code on the back end CU this is backend code that just happens to render a UI and bind it via a form people saw this and they saw the await squl insert into bookmarks slug values slug being passed in as a string and their immediate assumption was that this was super vulnerable to cross-site scripting to like SQL injects to all the things everyone hates about the security of webdev because they assumed this is code that just runs arbitrarily and dumps that in they didn't notice is that the SQL call isn't wrapped in parentheses because this is a template function it's a really cool thing in javascri I actually think this is a good thing so we'll see if the behaviors convince me otherwise the way that this works is you're sending an array effectively between all of the things you pass in so it's true is space comma whatever you passed here comma whatever the next thing is but this is all an array so you get the array with all of the things in the spaces and then you get the rest of the stuff afterwards as values so you have like function sum Funk this takes in ARS console.log args so we call some funk with like 1 two 3 then we know args is going to be the array 1 two 3 where things get interesting here is we call it this way so we have first and then we have 1 second two 3D three I'm going to throw this in in our interpreter because now you'll see what happens the first argument is an array that has the string up until the first variable comma the string after the first variable until the second one comma the string after the second variable until the third one comma whatever's at the end and then the rest here 1 2 3 this is the things that get interspliced between these it's a zip function where you zip up the left and the right to make the official output but this also means that you're getting all of these things as arguments that you can do whatever you want to you can sanitize you can validate you can throw errors you can check them you're not passing a string blindly to some function you're passing it all of the pieces it needs to construct whatever it wants to do it's actually a really nice Syntax for doing something like what we saw in that JavaScript code that everybody freaked out about it makes it really easy to write SQL like this instead of having to write it the python way where you have the string you have the like placeholders in the string and then you pass the variables after that's just a feature in JavaScript and I think it's a good feature I'm happy that we have this call call call found by cram Force this is the CTO of versel by the way so that's funny I don't know how many of these were him call call call call call. apply insanity this could break your mind try to reproduce this code in your head we're applying call methods using the apply method I don't I don't want my brain to hurt anymore than it already does I leave that as an exercise to the reader con C equals Constructor c c c what okay so C is a string getting a Constructor of the the string so c c function string getting a Constructor of Constructor oh cuz yeah it's Constructor that one threw me for a second so if we have con Su string equals hello Su string Constructor thinking is hard okay because the Constructor On Any Given string I can have like hello Constructor why we have all these functions on strings bad decisions made a long time ago yeah so this makes some sense now cuz you're passing Constructor to the Constructor of the string Constructor and then you're calling that with some code that gets evaluated chaos object is a key of object's property no no accessing prototypes with Proto this never has any issues one Proto Proto Proto this happens because when you something doesn't have a prototype it will be wrapped into a wrapper object using the two object method okay so the first time it's number the second time cuz there's no Proto it's empty object the Third time Proto of empty object is null that kind of makes sense if I do object. two string what help in case you missed what happened there this code Works without a semicolon it breaks with one destructuring with default values let x x y1 x huh h x y = 1 I hate this language this one is hurting my brain I need to just read the explanation I was trying to reason through it and I can't so what do these even mean okay these are the steps here so we declare x with no value so it's undefined then we pack the value of x into the object property X then we extract the value of x using destructuring and want to assign it to Y if the value is not defined then we're going to use one as the default value since X isn't defined because it wasn't defined here and we're using it here we're going to use the value we have here as the default instead which is one but in order to evalue that that has to do the Y equals 1 and I think because we put the let here is letting us use an undefined variable there that is my understanding here to test my theory I'm going to see if defining X ahead of time keeps y from being one because that code is never evaluate what the is this language I'm moving on dots and spreading I like spreading it's going to ruin it for me spreading an array that is a spread of triple dot do length is three is that because spreading this is just a three dot yeah spreading a string turns it into the individual elements that makes sense that makes sense to me that one's Fair labels labels are really nice for Loops let index equals z it will'll have a labeled while true console do log index index Plus+ if index is 10 break labeled so you can break within or without with around other Loops it's very easy to get out and if you're like nested in here like imagine we were a different Loop deep here like we have a separate while true in here which you might we'll even just do that for the example if I just did a normal break here this gets run again soe I do like this so here's what we'll do we'll do let index equal zero this code will run forever I'll prove that by pasting it here and seeing if things crash labels are useful because when you put one here you can say to break labeled so if I paste this instead it breaks it is actually a really nice and useful feature but I'm sure we're about to see how it breaks things cuz here we're not labeling a while loop or a for Loop or something we're labeling a closure console.log first break Fu console.log second first undefined this is actually nice this is nice I like the fact that you do that with a closure I don't I think this is cursed I think this is nice nested labels oh it's getting less nice very quickly I hate this now I went from oh this is cool to I hate this speaking of things we hate let's do a an Insidious try catch try return two finally return three the answer is three why the explanation they don't even explain it they just link you straight to the standard they don't even try is this multiple inheritance I we're not talking about classes classes are cursed enough without java script oh God speaking of cursed generators there's a video I've been putting off for a while function star is coming back I notoriously don't like function star even though I'm a functional programming nerd because I have battle scars from using Redux Saga and by using I mean gutting because I had to rip it out of a lot of code bases and it was not pleasant function star F yield next totally typical generator here as you can see the returned value is an object with its value equal to F in that case we can do something like the following function star f yield F yielding itself is scary enough my functional programming brain is hurting from this one don't do this seeing of don't do don't do a class of a class seems like we're declaring a class inside of a class it should be an error however we get the string object okay cuz like type of object is object it's just why literally everything JavaScript does with classes is is wrong and bad I hate it so much I hate it so so much non- coercible objects with well-known symbols there's a way to get rid of type coercion take a look if value double equals null throw type error non-cable should not be called with null or undefined const res equals object value res symbol. two primitive fun can I call symbol do2 primitive on things and use this to break like AAL 6 A symbol2 Primitive equal 12 a.2 string nope tricky Arrow functions don't take Arrow fun you've taken so much from me wtfjht but whatever what's going on here if you guys don't know is that JavaScript made an interesting decision early on where that is an object that is a closure what goes on here is code even if what goes on here is returning an array what goes on here is code is executed between the brackets there is a syntax to fix this though if you really want a function that returns an empty object or a function that returns an object wrap it and paruns this's actually a common mistake I see in like react code bases where somebody will be like const some funk equals you can't call this well you can but we've just labeled the string hello with key we haven't done anything real here but if we want this to work the way you would expect wrap this as follows make sure you assign it to a different value some funk 2 and now you get back to the object just a quirk of Arrow function design it's not a big deal yeah typescript will complain at you for this too which is nice Arrow functions cannot be a Constructor yeah that's kind of the point Arrow functions over people who have lifted themselves past this I'm going to do a thing I'm going to regret I'm going to open up the upload thing in for code base I'll open some random safe file and I'm going to search for something that is going to hurt me for every instance of this God bless look at that giant code base we have two thises how nice good job mark thank you we're moving on because nobody needs this anymore let f equals function return arguments cool now let f equals empty arguments fa arguments is not defined yeah implicit variables the fact that arguments just magically exists when you have a function closure is stupid that is dumb this is not a good thing again Arrow functions stay on top this is making me like Arrow functions more return statements are also tricky consider the following function return new lined this well yeah you're returning nothing but yeah the return and The Returned expression must be in the same line yeah that makes sense that's reasonable stupid that that's in here chaining assignments on objects uh okay I I think I get this one it took me a second cuz this code is insane yeah this is like order of events so we set f.x to Fu which is Nal 1 but then we set Fu to n plus 2 which overrides whatever we did here with f.x so by this equals f.x is now N1 but then here we override the current state of FU by setting it equal here ready for a real hot take this is actually why const makes sense I copy paste this code it does exactly what they showed there makes perfect sense but if I um kill this and run again console. CLE if we change these from vs to consts this code will not work anymore because you can't assign Fu again you can't assigned Fu to n plus 2 so this is actually an argument for const being helpful so once again ver and let kind of suck use const where you can if you don't think the thing should be reassigned you can escape from weird things like this I'm not saying it's a catch-all not saying it's proberly constant I'm just saying it makes things a little less annoying like that accessing object properties with arrays this is fun if you pass an ARR in Brackets to an object what happens if I have two properties in here though let's try it prop two is two I do this it will work though right yeah fun and if I wrap this is it because it's doing the two string that's absolutely what's happening so if I change this to be prop two Tada figured it out before I read it see I'm catching on to your JavaScript you're just randomly calling two string on all the time so that's what's happening here when you have one object the string that comes out is property which works but if you have two the string that comes out is property comma whatever's next which won't work in this case here is just calling two string on every layer so the result is just property again still stupid but it works and I I kind of get it what about pseudo multi-dimensional arrays again it's just combining these to Strings I fig figured your out number. two fixed displaying different numbers well we have to check something important the only true browser as you can tell by me using it very very religiously if I go to I'll just go to Google let's open up a console does the hu key work for that cool it does look at that we're using a real browser now boys 0.787 cool so everything's centralized but i1 cool so i1 rounds wrong everything else rounds right good to know nice learnings math. ma uh never mind JavaScript was a mistake what do I learn now instead oh it's cuz math. Min is infinity and math. Max is negative Infinity cuz it's not Max value and Min value you're supposed to pass them an array and if you don't or you pass an empty array going back to dreambird good suggestion chat comparing null to zero null double equal Z is false null greater than Zer is false null is greater than or equal I knew this one I still hate this one I'm not reading the explanation this look at how long the explanation is for this one because it's so stupid it's so stupid null is greater than zero plus null equals plus 0 0 is greater than Z false nope same variable redeclaration you can redefine vs but not lets or consts 1013 sort this is a classic when you call sort and you don't tell it what it's supposed to do very fun it always converts to Strings by default which is obviously what you want to do when you call sort and now you have to write your own sort like comparator super logical makes perfect sense everyone would expect that to be the behavior yeah don't use bare sort never call sort without doing something to it absolutely agree resolve won't return promise instance new promise resolve reject resolve the object the promise do then value equals object true conso log value A7 the value which is result from the promise is exactly the object how about another input promise then so if the object is a new promise resolve seven then we resolve this so it's like nested the function flattens nested layers of Promise like objects into a single layer this is just stupid don't do that that way double empty object is undefined triple quadruple all is Foo bar empty is this a way to like get the keys from something yeah I'm going to drop everything and go to gleam after this this if you inspect Foo bar empty object after you will find that Foo bar is bar there's two meanings for the open close brackets an object or a block for example the brackets in here are a block so use this to return an object so Foo bar is a block oh since we don't have anything in front that's a block and this is a block too so here we are labeling the string bar it looks like an object but this is the label Fu on string bar and then an empty closure right after labels are great until they make your closures look like objects an alert from hell okay so this is an alert encoded by octal escapes and then we evaluate it as a function that an infinite timeout set timeout infinity and it gets called immediately usually runtime stores the delay is a 32-bit signed integer internally this causes an integer overflow resulting in the timeout being EX Ed immediately why doesn't it give an error when you call it with a number that's not a 32-bit sign integer then just throw an error well it's going to break things now but just throw the error a set timeout object guess what happens if we set a call back that's not a function to set timeout window or worker Global scope. set timeout can be called with code as the first argument which will be passed on to a vow which is bad no way refuse to evaluate a string as JavaScript because unsafe AOW is not allowed Source or script okay so if you have a Content policy set you can't do that but if you don't then it will try to eval it all of that double dot let's try to course a number to a string 27.2 string unexpected 27 dot dot2 string the dot character presents an ambiguity it can be understood to be the member operator or decimal depending on its placement so just putting the dot here make it a float and then you can two- string it oh it's CU 27 dot could possibly be additional numbers after Double not float thank you yeah cuz like you do 27.2 and that's a float 27.2 string is a flow it can't evaluate but if you just do 27 dot now that's a double that's a 27 so 27 dot dot two string I hate this language classes again new newu Dov yeah you can call knew a whole bunch it doesn't give a  I knew that already I knew about new split a string by a space I've never tried to split an empty string by a space when you pass an empty string it will never find the separator and thus return that string but it never finds this either okay so if I have like const sample equals 1 2 3 4 5 sample dos split this will split it into one then space then two then space or not empty string it will do that then does that and this does I hate this language I vaguely knew this but this makes no sense so do split nothing that is way more cursed MD string. split on undefined gives you an empty string empty string. split on empty string gets you nothing empty string. split on empty string with a space last thing the test then would be empty string. split okay everything makes sense but the empty string on both sides case I feel a little bit better here this one makes no sense everything else kind of does the substrings are determined by searching from left to right for occurrences of separator these occurrences are not part of any string in The Returned value but serve to divide up the string value that does not help with explaining that one case at all a stringified string we had fun with this earlier Jason stringify production production that's cuz this gets double wrapped right yeah that's why versus produ single wrapped that makes sense that is not weird that is what it should do Json is different from strings Json is a string but Json is not the same thing as a string that one's stupid to be in here noner comparisons of a number to True never a good idea we've been over why do we make it have we now seen all of the Terrible Things in JavaScript I mean the answer to that is no there's always more terrible things in JavaScript but the very least I got through this list I hope this was fun for you because it was miserable for Me Maybe the result will be a good video though let me know in the comments if it was and until next time peace nerds




## ky Like fetch() but less bad - 20240815
do you remember axios was the thing that we used for most of our fetch calls back in the day back before fetch existed yes I know for a lot of us more modern devs the idea of not having fetch in the browser is kind of insane but also remember we only got fetch in node somewhat recently and in things like react native we're still getting it axis was popular for a reason it was the most reliable and consistent way to fetch data from a server on the client with JavaScript for a long time well it's been a long time and fetch now exists is normalized and it's become the standard and as great as it is and believe me fetch is so good it's awesome that we have this standard it's still not perfect in fact not only is it not perfect it's actually got some downgrades from the experience that we had with axios but since it's a primitive since it's an actual standard we have a great opportunity to iterate on it a bit to fix some of those weird edge cases that we don't want to have to deal with I've known about fetch alternatives for a while and they're not really Alternatives CU they all R fetch but I haven't bothered exploring them too much cuz I've just dealt with the weirdness of fetch but one caught my eye and I wanted to take some time to explore it with you guys as well as the push backs I find it all very interesting the library I'm talking about is one called Kai KY it is a simpler API it will treat non2 200 codes responses as errors so you can actually try catch on a fetch it includes timeout support it can retry failed requests it even has better typescript support specifically for Json resolving to not any because man Json on a fetch response I've seen so many people do stupid things with that so here's the example that he gives where on the left here we have get todos which fetches if no response isn't okay we throw and then it returns as Json that we then manually cast as promise to do and we have the ad to do with the method post headers contentp application J you get the idea we've all had to write code just like this you know what I'm going to ask chat how many of y'all have had the problem where you forgot to put the content type and the error confused you and it was annoying to debug ones in chat if you've ever been hit with some weird Quirk because you forgot to specify the content type I expected more Ones Still a decent number but I expected more to be fair I'm streaming pretty late right now so not as many people as usual you're still getting a decent number though because this is a very very common mistake and it's one I and others have made far too often so having that be the default when you pass something in it is very nice and here are the functions on the kai side by the way so instead of this fetch throw on bad response return response to Json with the manual binding Kai doget toos Json and you can pass it a generic type of to-do that's so nice and post kai. poost too and you pass it Json as the second argument and then it knows to change the content type to Json and it knows we're posting because we did kai. poost and Kai doget so no more specifying the method which I've also forgotten far too many times and then the Json call again with to-do as the type just inferred right there it's so much more convenient than a lot of these things especially if you're dealing with error or like bad responses this is very nice I like this a lot so why are we not all using it well uh I think this tweet from Dax will be a fun thing to Riff on for a sec I can tell how senior You Are by whether or not you include stuff like this in your code base he did numbers on this and I liked it because honestly I feel that if you install every single one of these little helpers that you see your code base is not even going to be JavaScript anymore and the benefit of fetch isn't that it's the perfect thing to write with it's that this code is code everyone's going to immediately understand if they write webdev code because we all know fetch it's the standard this will work everywhere this will behave how we expect and it's stum but like our AI tools are going to generate this code better as well cuz they're familiar with it this is different and as shitty as it is to say different is a type of bad just by being different you are making something slightly worse because it's not the thing we're familiar with so in order for that to be justified in order to make something knowingly worse just by changing it the amount of benefit has to be great enough to justify it and I don't know if this Falls in that bucket for me that said it is a very exciting little depth and I want to dig in more I I found their GitHub I'm going to give it a star because it's interesting enough for me to do that but I want to dig in Kai is a tiny and elegant HTTP client based on the fetch API it targets modern browsers node bun and Dino it's just a tiny package with no depths very important it is tiny tiny 3.3 kilobytes minified and G so not something you have to worry about in terms of the bundle bloat but definitely a thing to worry about in terms of the the cognitive overhead bloat that comes with it but the things it does are very nice simpler API the shortcuts for methods is really nice it retries failed requests I don't know if this is a default if it is I don't necessarily love that but as we scroll we can see here cons Json aw k. post yeah all what we would expect here's all the things you have to do to do this properly with HTTP errors that's terrifying yeah yeah simple enough that it's a very short read me honestly I want to find the retry thing like what is the default for retries retry default is two times so by default it tries twice which is an interesting thing to have built in don't love that I'm going to compare this to something interesting something y'all probably know I like a lot by now it's react query otherwise known as tan stat query react query I would argue is hard to avoid if you want to make your react code Pleasant to work with and you're doing anything async it is very hard especially if you're fetching from something you should probably be using react query I want to find an example of how painful it is to write fetch properly without react query I'm just going tock chat GPT it obviously I had to ask chat GPT to do this for me to see how it would do and here we see the complexity of fetching data in a component in react if we have a user ID prop that's a string and we want to fetch this we have our use effect where it's being fetched fetch user data async we try we set loading to true we wait for the response if there's no response we throw an error there is a response we jsonify it and then we set the user to that we also set the error to error and we set loading to loading but there's a mistake here actually this code might look totally fine but if the prop changes this might set the wrong state if we start with user ID 1 this fires but it takes a while then we change it to user ID 2 that fires comes back immediately this set data call happens later for the first one than the second one whichever one responds last is what state you're going to see so this is code that can result in some very unintuitive bugs so so I'm going to tell chat GPT that this code has a bug when user ID is changed if the second request takes less time than the first it will show stale data fix this using the guidance from the react docs oops spelled docs wrong whatever is mounted not what I would have called that but sure the solution here is you have a return function in the effect which will clean up whenever this instance of the effect runs so we set is mounted false when user ID changes so if we happen to result and get the result from the first one after the second one we won't set it because we check this is mounted before we do it not beautiful not elegant and the result is look at all of this code to do this I'm going to just throw this in my editor quick to Showcase how insane this is so we have all the react Imports user profile all the states we're setting ourselves the fetch call all this data processing everything else here we have 39 lines of code just to like do basic stuff with the content that we have like fetched here that's kind of insane if you think about it the fact that it takes 39 lines of code just to hit fetch in a safe way with a prop react query makes this significantly easier I'll just show you I don't have react query on this project it's not even a project there just a file I'm working in but const data error is loading it's not going to be use User it's going to be use Query and it's have a query function cool we're done react query handles all of those cases for you if the user ID changes this will handle it I do need to give this a key so that it knows that it can be shared multiple places because this is actually really fun what again what I didn't think this going to be query rant but it is if I wanted to have this called in multiple places and only fetch once I can export const use user profile and just return this in here instead end lines are hard okay turn that no I keep saving but this isn't a real file so I have to manually format cool and now I have this use user profile hook and I can call this in multiple places and it will only have to fetch once because the key make sure it's using the same result in multiple places it just it makes life so much easier and going from 39 lines of code to four most of which are just like single line like open close brackets is a night and day difference and it also improves the performance also makes the quality of experience for users better it also prevents like duplicated requests it also prevents bugs so even though yes you can just use vanilla react you probably shouldn't most of the time if you're doing something like that if you're manually checking error and loading States you should have just used react query so why am I talking about all this because the gap of doing it the vanilla way relative to the experience of doing it the react query way bringing in this dependency is huge doing it vanilla is massive in doing it react query is simple it also prevents potential errors and mistakes it also can improve the performance so there's three massive wins with the cost being you're not using vanilla react anymore how does Kai fit in here well it doesn't really solve many errors I did show earlier with the tweet from Corey that like we've all made the mistake of forgetting content type here and there but that's not that big of a deal and you can fix it pretty quick it is more code but it's not 39 lines of code to three it's like three lines of code to one so the the win there isn't as big it doesn't solve caching and those types of things it doesn't have anywhere near as big of a win to move to KY Kai whatever I supposed to be pronouncing it over fetch the difference is smaller the performance wins and the potential quality of experience wins aren't meaningful but the size of the depth is also much smaller so you have to weigh these things when you make these decisions the Gap from vanilla react and using use effect to react query is significantly bigger than the Gap from using fetch to using Kai in fact to Showcase what I mean I'll switch this over to Kai so we have Kai doget here's the URL and we don't have to do the dot then we can just doj on it the cool thing here is because of the way the type definitions work it'll actually be much nicer so if I did like user user cool that will just work which is really nice but that's not that big of a win relative to the size of the wind going from use effect to react query the size of the wind going from Fetch to Kai significantly smaller so I think we need to consider that when we make decisions around these things not saying Kai is bad I'm saying it's not as obvious a win as something else that you might use might be so my concern with what Dax tweeted here is stuff like this is a very vague range it's a very vague set of things because you could argue react query is like this because react query is an abstraction over use effect so you don't have to write the effect yourself and I actually saw this a lot in the comments people saying yeah this is why we should write our own fetch calls no in the react ecosystem you almost certainly should be using react query or something like it the Gap from Fetch to this is not big enough to be considered the same thing so while I agree with Dax that there are a lot of things likely including Kai that might not make the most sense for most projects to include we shouldn't use that as a blanket thing for things you could do using the vanilla Primitives because so often these abstractions exist for a reason react query exists because it was too hard to do this without it Kai exists because the reading fetch calls is kind of annoying Kai does not have as strong of a need to exist but it does exist for a reason the people who built it built it because the ergonomics around fetch kind of suck and it showcases how much so I think this is cool I'm actually probably going to try it out at some point but it's not that big of a win and I personally would not judge somebody for including this or for refusing to but if somebody refused to include react query because you don't actually need it I would not want to work on their team so that's all I really have to say on this one let me know what you guys think in the comments until next time fetch wisely




## npm is unsafe_ - 20240716
isn't npm unsafe there are a million who know whats in my module directory it took 30 minutes just to delete dependencies that depend on dependencies a million times over this npm ecosystem is a giant security vulnerability we've all traded security for convenience every project that uses npm is basically a security problem too like set up a basic project and you already have a billion dependencies and nobody knows what they do guess that we're talking about npm today for those who don't know what's going on npm is not unsafe at the moment there's no big security thing that just happened with npm what did happen is an exploit with a service called poly Phil iio if you're not caught up on that you should go check out my video maybe check out low levels or I guess Prime put one out too the thing with polyfill was about cdns if you're not familiar there's a bunch of different ways to bundle and include your JavaScript inside of your websites if I go to let's say my twitch chat where I'm live right now by the way I stream live on Twitch every Wednesdays for those who don't know that's where I film most of my videos so if you go to a website like twitch or any other website on the internet you can look at the script tab these are the actual JavaScript the page loads in order for it to work and behave as you would expect if you go to a more traditional site like my T3 homepage we search for script tags in here you'll see there is basically none we just have this one minimal Astro script that is used for making the page transitions work really nice apparently have one more down here oh yeah the Astro module you'll notice something different about this one though see how it starts with a slash that's because this is on this domain the other ones here you'll see have URLs associated with them which in this case do happen to be the same domain like t3g that is this page so that's fine actually I know what this one is that's my um script for uh plausible so that's what that one is figure that out but these ones that are included by Astro when I actually bundle the code these are part of my actual deployment so my deployment has HTML files CSS files and JS files all of the JS being loaded on this page comes from me this is all stuff being served on my service the polyfill thing was sketchy because not everybody had things set up that way back in the day people were scared of Hosting their own JavaScript files or they saw others weren't so they didn't feel like bothering themselves so what we would do is we would embed script tags from other sites if I scroll hopefully not too far when I did my video I actually noticed that Hulu was an example of doing this wrong so Hulu's obviously at hulu.com if we look at all of these link tags these are all referencing their deployment with the slash at the start but up here CDN po. that is not Hulu's domain they don't own polyfill IO but they're loading JavaScript from it on their site that's what's scary here they are letting another place deliver JavaScript to their users in their browsers on their websites so what the heck does this have to do with npm this is the way we used to include other people's JavaScript in our sites if you wanted to add the bootstrap JS Library you could include it like this if you wanted to include jQuery on your site you could include it like this the jQuery CDN is a thing of Legends nowaday days another question I saw a lot of people asking I don't even know if this fits in this video uh just saw it again would the sh Integrity attribute solve this for those that don't know you could Mark in the JavaScript code or in the HTML code and say hey this is the hash we expect for this file so we expect this specific file to be the one that comes down when you go to this URL the thing about polyfil iio is that it actually used the headers from the browser to determine which file they send to you so if you're on Internet Explorer 7 you get a different file from the same URL than you would get if you're on a modern version of Chrome because of that they can't use the Integrity checks because the file will be different for every user potentially and that's why this one was particularly sketchy but let's be real nobody's doing those checks anyways so why is everybody asking me about npm and complaining about npm when this is going on I think the reason is a fundamental misunderstanding of how modern bundlers work so you know what let's spin up a project quick so I can show what I'm talking about here so for this demo I'm just using vit it's still using npm but V is the bundler remember that word bundler it's very important here for those who don't seem to understand it the bundler is what takes these packages that we have installed in this case we have react and react Dom and then a bunch of Dev dependencies also thing we'll talk about in a bit so react and react Dom are included when we make the site so if I was to npm run build and then npm run preview so once you bundle this if I open here it's probably going and grabbing that package from ccdn right nope it's referencing a local asset these index JS files that are weirdly hashed and named well the JS and the Cs file so what's going on in these files we can take a look if I go to sources we can open this file assets here's a JS file minified react error at license reacton production oh huh what's going on here is it created a JS file just one JS file we could even look at it if we go to our terminal I can open or we can even look at in vs code honestly go to disc go in here assets index.js this is the bundle for our site all of the code we have as well as all of the code for the packages we use has been included in this file so we're not going to some third- Party Source every time somebody is trying to access our website it's all provided by us when we use npm there's a lot more subtlety here that we'll get into but I want to make sure we start with this point CU people seem to fundamentally not understand it when you use modern build tools and you use something like npm you're not using npm to send the file to users you're using npm to download the file yourself before you bundle it for your users but if you're using npm you're almost certainly using it to host your own Assets in your site like we're doing here because npm was originally built just to be for the servers side stuff it was built as a package manager for node it's not how your users get your packages unless you're building Dev tools tools and your users are developers if you have a person going to your website npm is not involved the package has to already have been downloaded and put in a format for the user the reason we have things like webpack and like bundlers is because the format that made these work great for node didn't work at all for the web and the introdution of webpack was to package your node project in a way that you could send it to your users through the browser that's a huge part of how the web has evolved to the point that it's evolved today and just to prove how this works make it a little clearer I'm going to go put some random text in here like let's say uh don't forget to sub and now that I've saved that we can go back here we have to rebuild oh it's mad because we have these Imports that we're not using it's nice they have good lint rules Now kill all of that npm run preview and now if I load this back up we see that don't forget to sub and if I go into that bundle this index.js file command f don't forget to sub and look at that it's right in here we have the JS fragment children don't forget to sub this is how everything like jsx all the other stuff that we're writing gets compiled out no typescript anymore because the code we write the code we install is different from the code we ship to our users so why are people so confused it seems like they think these packages are coming from an unsafe source and there are ways it can be unsafe like let's say reacts npm package gets hijacked by some bad actor and they push some sketchy stuff this has happened before we've seen a lot of projects get either get hijacked and ship malware via npm or the actual maintainer goes mad and does the same thing that sounds like an absolute disaster and I'm not going to pretend it's not potentially problematic it absolutely is in the same way it is in any ecosystem where you install packages but there's a piece people seem to miss a lot of people seem to miss even other fellow creators like James Quick seem to miss let me know in the comments if you Vibe with this tweet because it it hurts me deeply but it seems to be a pretty common sentiment I still don't know what the package lock Json file is used for uh so in case you don't know and are curious whenever you use npm or any similarly competent tool there's a thing called a package lock package lock specifies which exact version of things are going to be used by your codebase so here we see react is pinned to 1831 if I npm install it will always install this version so if they were to push a version 19 that was sketchy it doesn't matter because I'm pin to 1831 if somebody was to go freshly install npm install react at latest they would be hit with the new sketchy version but then you can put out a functional fixed one right after when they get unhacked and even if you leave the malware version up on npm let's say theoretically react 19 was malware 1901 could fix it and anybody who has 190 pinned is broken but everybody npm installing from that point forward is going to get the right safe version so the only potential victim in a hijacking scenario is somebody who is installing latest at the time where that exploit is the latest version for basically anything else you're safe there is one more exception and please please I have videos on why I to not do this don't do this also don't do this don't tag something that isn't a specific version like please don't do that just put a version in if I delete these and I quickly uh npm install now they're gone so if I go to the package lock reacts not in here anymore if I reinstall it's not going to pin latest or some it just puts the exact same code back when you install NP or when you install something with npm it does the right thing we're good here the only thing that you could potentially have concerns about is not knowing who's actually controlling one of your sub packages as one of the commenters on low-levels video so eloquently put it seriously react takes many minutes to download just because all of the random dependencies and their dependencies and their dependencies dependencies it's dependency diarrhea and I don't think anyone has it as bad as JavaScript I think it's just because of the batteries not included nature of node you need to find little modules to do everything and this causes dependency hell for the simplest libraries it's hard for me to not go in the fact that they're talking about node and react like they're somehow even kind of linked which is really funny people in chat are already saying something even funnier which is this guy's never dealt with Android apps or iOS apps like God the state of cargo is hilarious the state of things like the Pod ecosystem on iOS are hilarious like package management always sucks but that's not why this one's so funny to me this one's funny to me well I'll show you cu the problem's real look at how many dependencies react has this is dependency graph it shows every dependency in its sub dependencies and God react has three whole dependencies that's terrifying how can we ever cope with that also there's react Dom which adds a whole fourth one scheduler four kilobytes oh my God how how are we continuing to use react when it's in this insane bloated state with a whole 5 kilobytes of third party packages how will we ever survive what they might be thinking of are things like react native or next next has a few more still not many more but a few more I want to talk about these few more though because a bunch of them don't actually ship to the user this is a thing I wanted to emphasize the difference between dependencies and Dev dependencies Dev dependencies never get sent to your users at all these are packages that run on your machine typescript doesn't go to your users es lint plugins don't go to your users none of these things are included in the bundle that gets created when you run webpack or V or ES build or RS pack now or any of those things Dev dependencies aren't included if I search es lint in here nothing comes up because es lint isn't included in the final bundle Dev dependencies are not a risk to your users unless there's some Dev de that is so insane that that it hijacks your machine and takes over how it's actually building the bundles but once the bundle has been built there is no risk this is why the old method the way we used to do things where we use random CDN for all of our JavaScript stuff that was terrible and to think this is a new problem and this is just how we do things now and it's terrible and the old way was great is a fundamental misunderstanding both of how it worked before and how it works now the idea that the vast majority of modern web applications are bundling the vast majority of their dependencies themselves is awesome and I'm we going to channel an unexpected Source here we're going to go to Mitchell Hashimoto if you don't know him he's the creator of Hashi Corp and one of the people who made terraform possible so obviously we're not in the same side of this world but he made a really interesting point here unpopular opinion you should copy fork or DIY your dependencies for everything but the most complicated or sensitive functionality things like the GUI the crypto module networking Etc blindly depending on trivial functionality or having a deep dependency tree causes more problems than it solves on one hand I actually kind of agree here if you don't own the packages especially if those are being sourced for each user on every request that's terrifying but another way to think of this is that it's kind of what we're already doing when we install a package that's not a binary being included that's all off youate impossible for us to read That's source code being thrown in our node modules we can go in our node modules we can open up eslint and we can see the code that it put on our machine and mind you this is still the code that's just on our machine we can go through and read it all it's just there because again these tools are used to get code from npms verified servers that are signed and you'll always get the same thing if you ask npm for a specific version of a package you will always get that exact same file every time that means you're just transferring the file to your machine which is effectively copying it it's not literally copying into your code Bas and if you can reasonably do that that's a totally fine idea but the fact that all of these dependencies are verified via a lock file that lock file also hashes to make sure each of these modules matches a specific Integrity check and this is all committed to your code base so even if theoretically somebody stole npm itself and replaced all of these packages with malware it's just going to fail the Integrity checks it's actually very safe it's so confusing to me why people think npm is this massive risk just like a CDN is but all it takes for any CDN based web app to get pwned is one of the domains you're sourcing data from getting pwned which is why the polyfill thing happened in the first place the polyfill supplying chain attack is one of the things that is prevented by using an npm based workflow and having decent bundlers in your tools if you're using bundlers you don't have this problem the reason that this thing escaped and there were so many people with this is because their bundlers were bundling for old browsers and new browsers but the bundler was only Built to do things right in the new browser so they would include this third party script they would just go throw it in the HTML to quickly make sure the old browsers that don't have these new behaviors are handled but as soon as you include that URL you're screwed the reason this whole exploit happened is because the domain people were loading their Js from got compromised the domain people are loading Js from using modern tools is your own domain so the only way using npm will get your users compromised is if you install a package that is compromised in the small window where that compromise exists and now it's in your package lock and now you're Distributing that on your own service or more likely your own domain and service gets compromised that's the risk here you're creating a binary a bundle that is entirely in your code base that's entirely in your space once a user is loading your page they're loading your JavaScript you might have gotten that JavaScript from other places but now it's an artifact that exists that has commits that prove it that has verification steps to make sure it passes Integrity checks a lot of the things I saw people saying and a lot of the concerns I saw people having around this are just not how these problems work pin a verion your package Json install the package or just install the package in the first place and it'll do the right thing anyways you're good to go if we were having this conversation before package locks existed this would be a very different conversation we've had package locks in npm since 2017 this is a 7-year-old solution and even before then yarn introduced the yarn lock like way earlier so we've had these for a while it's just not a problem I want to clarify the functional difference between deps and Dev deps and node the difference uh dependencies are included Dev depths are not I guess I for node it's a little more complex cuz there is barely a difference when you're just in the node world but when you're in the npm and uh specifically when you're in the bundling world the difference matters a lot more so to just clarify one last time the only reason npm could be a security issue is if a package you already depend on but don't have lock to a specific version is compromised and you either install the latest version or happen to set up a new project without a lock file and install the newest version then and that's kind of it the only reason you would think this is because you don't know what a package lock is or you started using npm before they were a thing or you don't understand what a CDN is or how it works I hate to be harsh about this one but the comment came up enough and did well enough that it seemed like a lot of you needed a quick lesson on how these things work so uh there you go until next time peace




## o3-mini is really good (but does it beat deepseek_) - 20250201
today's the day it's finally here 03 mini the first model from open aai that's actually reasonably priced and also reasonably good there's a reason that this all came out and yes I'm using reason a bunch because it's a reasoning model I can't help myself but the thing that made this release as interesting as it is isn't actually open AI work at all it's another company deep seek out of China it really seems like they built this model to compete with what's going on over in China and it shows with both the pricing and the performance you can get but also with some of the weird quirks and how they implemented it this is going to be a real deep dive where I'm going to go from showing the performance of the models the price of the models how these things compare as well as the strengths and weaknesses when you're using them for real I spent the whole day playing with O3 mini and it's been a wild ride I'm super excited to show you guys everything I've learned but first a quick word from today's sponsor today sponsor is raggy and you AI Bros definitely want to hear this one because they made it way easier than it's ever been to connect basically any service to your AI apps so if you have data in something like I don't know Google drive or slack or Salesforce or comp fluence or even notion they'll handle everything kind of plaid style where you can sign in with any of those apps in your app and now you can connect that data and index it in your AI applications so if you're building a chat and you want to be able to chat with your notion data or your Google Drive data or someone else's this is the easiest way to do it everything from off to indexing handled for you and the code you have to write is so comically simple you can just curl their endpoint with your API key and tell them what you want to index you can hand them a PDF directly if you want they'll chunk it index Mi it all for you and then you can retrieve it with a simple fetch request this stuff was not easy for us to set up in T3 chat there's a reason we're still adding things like PDF reading this will make it super easy for you to build great rag experiences in your existing AI apps or if you have a new app idea this is probably the right way to get started with it too huge shout out to ragy for sponsoring today's episode check him out today at soy. link ragy diving straight in we should probably start with the pricing I went and took all the most common things that people tend to use and put them in this quick chart so we can compare chpt 40 and this also the input and output is per 1 million tokens I'll do that to fix formatting so whenever you have 1 million input Tokens The Token is roughly a word so to speak 1 million input tokens on standard chat gbt 4o API pricing is $2.50 outputs 10 bucks 40 mini 15 cents output 60 cents that's why we offer 40 mini as a free option in T3 chat speaking of free tiers by the way we're actually temporarily offering 03 mini on our free tier so if you do want to try it out and use the best of the best current models it's worth a shot and if you do want to try all the other models too it's only eight bucks a month for very very high message rate limits on all of the models that we offer which right now is pretty much everything you'd ever reasonably want to use so yeah 40 mini very very cheap 01 not so cheap 15 bucks per million input tokens 60 bucks per million output tokens that's why 01 is rough to use and why you don't see it in too many services there's one particular price I do want to call out here though CLA CLA is insanely expensive especially when you consider the fact that it's not even a reasoning model I am floored at the price and to get away with this it's by far our biggest expense for T3 chat is just paying anthropic for cloud usage deep seek V3 27 cents in $110 out V3 old because they're changing the pricing this is the pricing that I got so excited about V3 was not their reasoning model it's their funny enough it's actually really close to Claud from its performance and characteristics from my experience but their old version of the pricing was hilariously cheap 14 cents in 28 cents out it's actually cheaper than 40 mini with quality levels comparable to Sonet it was unbelievable it's going to be a bit more expensive coming up soon and I understand why their apis have been hammered because of how cheap they made things and also because R1 blew up speaking of R1 55 cents in 219 out puts it at cheaper than 40 or son it while working closer to how 01 works but we are missing something in here we don't have 03 so what is the price for 03 mini 03 Minis input price is A110 and the output price is $440 that is incredibly competitive this effectively in my opinion makes for not really worth touching it makes the value pitch for 3.5 Sonet incredibly weird and arguably quite weak and it also positions 03 mini really really well against deep seek R1 all we're measuring here is the price there's a lot of other things we need to measure there are incredible services like artificial analysis they do a great job of comparing different models and their pricing but they don't have 03 on here yet they're also much more focused on traditional benchmarks things like the mlu the gpq I have my own things I like to use to test these models out though one in particular that I've actually enjoyed a lot is a little programming challenge I enjoy Advent of code Advent of code is a set of Christmas themed problems that come out at the end of every year in December you get one at around 9:00 p.m. Pacific time every night it's a super competitive really fun set of programming challenges I compete actively every year and last year I actually had a really good year you see my numbers here I was in the top 1,000 almost every day I should thank cursor for a good bit of this it helped a lot with writing things I didn't want to you know the classic like traveling salesman type stuff I don't want to ever write dickas again thank you cursor for making that something I didn't have to do some of these problems were brutal though in particular the ones that hurt me the most which you can see by the hour plus they took book where day 17 specifically part two day 21 and day 24 so what I have done is I took all of these problems days 17 21 and 24 and I prompted Claude 01 Pro 03 mini and R1 to see how they would perform I thought this would be a fun test and ended up being more fun than I expected not because the answers that they gave codewise were great but I learned so much more about how broken all of these uis are see this chat PT thread see that uh funny hourglass thing there that's because this O3 mini High prompt has just been sitting here for probably like 30 minutes now this is all just one prompt by the way it just kept reasoning kept reasoning and then just silently died never even updated the title it's bad it's so bad and I resubscribed to Pro again so I'm on the $200 here so I could prompt o not just 01 but 01 Pro the super fancy super expensive model they don't even let you hit via API oh God their UI is so laggy you see how long it took for that tab to change I clicked I'm clicking now it takes like half a second and then does a terrible scroll to the bottom once you oh God that's so bad how do they build it like this we don't have any of these problems with T3 chat you click and it immediately goes where you are clicking no weird scroll movement no weird rendering so I used T3 chat as much as I could you can see that because when you hover now it says what model you generated with nice addition makes this a lot easier for us to figure out and test so what were the results let's start with looking at day 17 so you can understand the problem this is a fun one part one was an interesting three bit computer problem let me try and remember exactly what it was oh yeah so you have these three registers and you have the program you have to determine what the program is trying to Output which is going to be a set of numbers you're given these operands uh 0 through three represent literal values fours a 5 is B 6 is C seven does not appear in valid programs this is so that you're building a three bit computer basically it's a fun problem they love doing things like this let's see how the answers came out though part one this is my answer 01 got it 03 got it R1 got it Claude made a real fun hallucination I'm going to command Z till I have it back it was hilarious here it is it hallucinated Windows believe it or not your window does not have a node compatible file system on it so had to fix that but once I fixed that hilarious hallucination we were good part two nothing got R1 ran it indefinitely and Claude had the same hallucination but it failed because it set a cap on how many times it should run because it assumed for part two that it could eventually just find it under a certain reasonable range clearly does not understand EV of code very well because part two here was what's the lowest positive initial value for register a that causes the program to Output a copy of itself this was a brutal part two that took a very very long time to solve with a ton of caching and I don't remember how I solved this one it was a while ago but yeah none of them could solve that there's a reason it was such a hard problem makes sense how about day 21 day 21 was a really interesting problem it has this keypad and instead of the keypad being a thing you just press as a human there's a robot that is pressing the buttons and you tell the robot which button to press by giving instructions up down left right to move its finger up down left or right and then press to press there's a couple catches though if it ever hovers its finger over this empty spot it fails so you have to make sure all the instructions you give never put it here and catch two is you don't control it directly you control it via another one of these pads this pad is on the back of the robot then there's another robot behind it controlling that then another behind that so you have to like expand the instruction set from whatever the numbers are like if you wanted to hit 852 then that is to start with the robot at a so that has to go up left and then hit eight but then the robot behind that has to hit up on the robot and it hopefully you're getting the idea this is a really weird problem and it's a very fun one but it's also a very hard one which is why none of them got the answer one interesting thing I noticed is that Claude just straight up ignored my prompt my prompt specifies in it to grab the input from a file named input. text Claud just ignored it which is interesting I was surprised I don't if that's cuz it's not a reasoning model or if it's just so much context it loses track of that instruction at the top but Claude just straight up ignored that instruction the others at least wrote code that processed the right data but they didn't get the right answer and nothing even came close on part two what even was part two on this one oh yeah they changed it from like three robots to 25 for part two it was brutal if I recall my code actually handled that okay and my part two yeah my my I just had to bump a number for part two and it just worked for me that's how I got such a good score there day 24 was nuts cuz this was on Christmas Eve and they gave us a really hard problem part one wasn't too bad it's combining binary values with ANS ores and zor not too bad you have your Gates and you have these instructions like x00 and y00 goes to z0 and you then combine one and zero to the value that you put there they gave a larger example down here you have to calculate all the values would result in through this wire system where things connect to other things and then once you've done that you solve the system you have z00 through z12 use this to create a binary number and then convert it to decimal which produces an actual number how did these do with that part one o1 did it right 03 also I should note 01 is not just standard1 I used o1 Pro for all these which meant it took a while it took like half an hour to solve this one just to like give me the output code and then it took even longer to solve the problem after in fact part two it just hung forever the interesting thing with O3 mini is that when I ran it a second time which funny enough was because the UI on the chat gbt website failed when I did the first part so I made a new prompt to do it again so I could pass it part two the second time I gave it it failed part one so I didn't follow up instead I ended up combining part one and part two into a single prompt saying log both the solutions for part one and part two seems totally fine when I gave up part one and part two in the same prompt that's when I hit this hang wait did it finish wait no it didn't because this is the yeah this is the combo that never finished yeah it just kind of sat there it's hilarious so I didn't like doing that much work at once especially on the high reasoning but this is where the differences actually start to show between the O Series from open Ai and R1 R1 did not solve this problem at all I was very surprised I thought the reasoning model would totally smoke this nope it did not that said this means the difference between the o models in the R1 model from Deep seek is just one of these problems all of the reasoning models got part one right Claude got part one right after me helping nothing got part two right or any of 20 day 21 right and only the reasoning models by open AI got 24 right and they had a pretty high failure rate too this isn't obviously a particularly great analysis I'm not doing crazy scientific tests or anything here but it's a thing that I care about because I don't want these models to get good enough at these problems that the leader boards mean nothing so I always try to test this stuff I would have written a script to test it against the apis and I also would have done this in D3 chat if the R1 API worked right now we've been to hen back with this with T3 chat we do currently offer hyperbolic as an option the problem with that is that hyperbolic not a particularly fast way to run R1 we have the R1 distilled model that is hosted on grock Which flies but it's not the full R1 reasoning model it is a version of llama that was distilled from the R1 reasoning model so that it can behave very similarly but also works like a traditional LM it doesn't have the extra steps it just outputs a ton of text but this time the text is based on the text from traditional R1 it's actually really good I've been impressed with it overall when you see the performance you can get from it you'll understand like let's give it one of these harder prompts we'll give it 21 day one or part one and two we see how fast the reasoning is coming out like it's faster than I can scroll it's pretty nuts yeah this is actually insane how fast it can go we'll see if it ever finishes reasoning because this one this is also the same one that got stuck for 03 but wait the example says total steps is 68 which is four digits 68 over 4 17 steps per digit my calculation here is 12 steps for the first digit it doesn't add up oh boy it tried it went really fast but it did not succeed let's give just part one then now it has just part one still flies but again like you can see the speed here if I was to go do the same thing but with the R1 hyperbolic model do you see the difference here and yes with T3 chat you can actually have multiple things streaming in at once and it's totally fine unlike in the chat GPT app where if you have something running on Pro and you go make another query somewhere else hell even if you just leave the tab alone for too long it will fail which is obnoxious cuz these queries can take like 20 minutes to run some sometimes I don't know how they get away with it it's obnoxious we're putting a lot of work in on T3 chat to make this better oh looks like it failed there still too this will eventually fail it's just taking its time is the difference so how does this compare to O3 mini the model that we're all here for today well if I switch this over to 03 mini in our UI it's going to sit here for a while but that's not the experience you expect if we go do it over here you get something different when we use this in the chat GB Tui it gives you some of the info about the reasoning here which is actually really cool to see there is a catch though they only give you this info in their UI it's not exposed via the API at all why would they do that why would they just not give this data out via the API they don't want us to have it on one hand it's because they want people like me to provide a UI experience that's even better than what they can do but I don't think that's the main reason why I think the main reason is reasoning they don't want to give this reasoning data to companies like deep seek because if deep seek had access to all the reasons that chat PT was doing something it'd be a lot easier for them to train a model on top of that data wow these models are really struggling with this problem let's give him day 17 cuz that's a little less bad yeah literally all of the models are failing or just looping indefinitely when given this problem that's real fun okay 17 part one's easy we'll give it that instead oh one other interesting thing with the new model you have different levels of reasoning effort low medium and High some other quirks I noticed with O3 mini since it's not streaming in or since you don't get the reasoning over the API you also don't get to stream the response it just kind of sends the whole thing as soon as it's done which I don't like the user experience of I've grown to really like seeing the model spit things out piece by piece and if I see it not doing what I want it to I can't stop it because I we have to added a stop button T3 chat coming soon but I'll just go back up and edit and change the message and hopefully the second time it'll do a bit better the other thing is you might notice it from the formatting here I don't know why it's like this but for some reason 03 has an entirely different format it likes to spit out it's very strange if we copy this output it's not doing markdown formatting even though every other model I've ever worked with leans into markdown formatting by default it loves adding these weird bars everywhere it doesn't indicate what language files are almost ever I added a system prompt to help with it and it's not helping enough I just straight up don't know why they're doing this like this I've never seen a model that just came up with its own formatting like this and the result sucks for us to build around I don't know how much of this is like intentional or a weird consequence of the things they trained on or is an attempt that they're doing to try and keep us from being able to compete with them as much as I would like to but it feels weird I don't like it there's something strange going on with the formatting here we're doing our best to work around it in our UI I might have to make changes to how we're actually generating the data might have to give it some weird tooling to handle this all but know that we're working around the clock to get it to not do these weird blocks seeing a handful of people on Twitter especially PHP devs getting these horrifying formats not acceptable know that we're on it I was going to look for a benchmark but I remembered this tweet so I have to show this open AI just straight up throwing shots at the Deep seek stuff explain AI distillation like I'm five this is them making fun of the fact that people are all really excited over distillation models and also pointing out that the model that deep seek did in their opinion might be a distilled model I don't think standard R1 would qualify as distilled usually distilled means there's an existing model they're trying to make better by having it prompt another model to get more data that it can train against that's more what deep seek did to their llama distilled version that they distilled using R1 but if you read their white paper they had some genuinely really novel techniques that made them model as good as it is for as cheap as they did but it is nice to see them throwing shots here and there this is from mck Wrigley who has been doing a lot of fun AI stuff recently I'll give him a follow his data has been nice to see he has an app that he built that uses 01 right now because the prompts are difficult enough that he's found a lot of benefit from it his agents that were using 01 have now been moved to 03 mini and they're all working as at least as well as they were before but some are even better and that's for 9x cheaper and also significantly faster if you look at the code Force's scores for 03 mini the low score for the low usage low power solution is right up there with 01 the medium power is beating 01 and high is smoking 01 and when you compare the pricing you see why this is such a crazy launch it's crazy to think the model pricing has gotten this cheap this fast that they're actually sniping out the prices of their own non reasoning models this is still the craziest thing to take away from this all is that a reasoning model that is by an American company is now cheaper than their non- reasoning model because they're so scared of what deep seek is doing it's still almost exactly actually it is literally exactly double the price that's hilarious that was done by choice they realized if they went more than 2x on the price for 03 mini everyone would just keep showing deep seek but by pricing it this way it's a lot harder for people hosting deep seek themselves to get it to a price that is comparable especially for the performance you'll get from them because getting R1 to perform on your own is hellish Lex had a good tweet about this that I wanted to include as well O3 mini is a good model but deep seek R1 is similar performance still cheaper and it reveals its reasoning this is the biggest thing deep seek doesn't hide the reasoning it just dumps it straight out there for you if you're using it via API if you're self hosting or doing anything else it doesn't matter you always have that data open AI despite being open AI loves to hide these things from you as Lex says here better models will come he still can't wait for o03 pro but the Deep seek moment is real I think it will still be remembered 5 years from now is a pivotal event inch history due in part to the geopolitical implications but for many other reasons too apparently as a podcast coming out about this very excited for that but the core point being 03 is great and keeps open AI from falling too far behind but it doesn't bring us a lot of the things that we're so excited about with deep seek it really does feel like an attempt to keep up with what happened here not in the sense that their model is worse than this it's actually I would say O3 is quite a bit better than R1 in terms of its raw performance especially when you consider the speed but R1 shows you what it's thinking R1 is an open- Source model that you can host wherever else R1 is way way cheaper O3 mini is an attempt to catch up to where deep seek has put us in terms of the marketplace and it's a very exciting one it's so exciting that we're giving it out for free for a bit and I have a lot of fun things I want to try with it my personal projects is it a revolution no but it is the result of what I would argue is a revolution which is the crazy stuff that deep seek has been working on I still can't get over how bad their UI is though I have been fighting it all day cuz I was trying to do these 01 Pro prompts it takes up to 10 seconds when you scroll to the bottom for the rest of your tabs to show God how is it like this how is their pagination so bad their scroll containers are so broken like guys guys we're like two devs in a trench coat here we don't have these problems at all everything just works when you click it it's not that hard seriously if you need help my phone number is in book face this is a really exciting release even if it's not revolutionary it is showing a revolution did happen I'm curious what you guys think think is 03 mini exciting to you or is this a release you're going to pass until next time peace nerds




## prime - 20231020





## tRPC - GraphQL KILLER__! - 20220628
but theo i already use graphql why would i use trpc let's chat so trpc is the easiest way to expose a function on your back end to your front end sadly you have to have typescript on both the back and then the front end for that to work thankfully a lot of people have that already so if i am building a back end be it node.js express deno even i think there's a demo binding i might not share about that fact check that later trpc is a way to describe the things the backend can do and then call them remotely that's what the rpc stands for remote procedure call it allows you to remotely call that backend code from the front end what trpc is not is a schema it is not a thing trpc is a method it's a a protocol for exposing your backend functions to your front end graphql is a schema and a language designed for you to in detail describe everything your backend can do and the shape of that data as a graph so with graphql you might have a user resolver that has a friends resolver that has an array of users that are your friends but that type of like nested recurs like somewhat recursive structure is very common in graphql it's by design kind of what it was made to do and if your client or server won't be running typescript for some reason like you have a flutter or kotlin dev that refuses to leave behind their dated ways or you have back-end developers that insist on still using golang or python or maybe you have one of those rare use cases where your typescript really is too slow for your back end and you do need to use other things or this is kind of common and i get why it happens still your backend team and your frontend team don't talk or get along graphql is a method of communication between those teams and those like owners so your backend team and your front end team might not have a way of communicating right now and if they do it might not be very fast a graphql is like a contract that those two teams write up agree on and then they go off and do their own thing and as long as both are honoring their side of that contract when they come back together and plug it in it all works the goal of graphql is kind of to like let you cut a hard line at the back end in the front end and know that they'll always staple back together trpc is bringing them closer together so if your goal is to separate your packet in front end way further because you're you're back in developers who want to write back-end code and have friend developers who want to write front-end code and they don't get along graphql is a great solution if you have an architecture at your company or your team where your back-end developers are focused on like scaling their site and they want a single focused schema to honor graphql makes a ton of sense for that too for external consumers i found graphql to be a little uh rough generally speaking but for internal consumption for a company like at twitch we used graphql and i think it worked really well for our use case there because we had a team of graphql experts that led the implementation of the graphql edge and built a very strict schema of what we expect that to return and whenever somebody wanted to make a schema change they would thoroughly review it make suggestions and make sure that the design and architecture of our back-end query system was good and as a method to communicate about those things graphql worked phenomenally well i don't have the guy who created the graphql golang package working with me anymore i love you tony and you made it possible for twitch to do graphql as well as it did but most companies don't have a graphql god to make sure they do it right they're adopting it because they looked at companies who invented graphql or have the graphql inventors working for them like the facebooks and the netflixes and the twitches of the world and seeing that they use graphql saying oh they use it we should too it works for them it has to work for us but man it is very easy to build hell absolute hell and graphql and i've seen that a lot like even the the github graphql api is a show absolute tragedy and that's it's not even like common is feels the wrong word it's it's often that i see that when i see especially public graphql apis it's it's rest with extra steps that's i think how i would define the difference here graphql is rest with extra steps because for an architecture reason a team reason a design reason or for good reason you want to add things on top of rest to make it more complex but stricter and more powerful and dynamic trpc is the opposite it's stripping down rest and getting rid of a lot of the weight in the so you have the simplest possible way to call your back end on your front end safely i hope that clarifies it's almost like it's not like you pick between trpc or graphql it's you start with rest and you decide at that point hey do i have clients and servers that need other languages okay we we stay on rest if you don't but you have any type group on the client in the server maybe move into trpc land but if you do and those clients are getting more complex the systems for defining that back end is getting more intricate and you realize that rest isn't cutting it because you have like nested referential recursive graph type stuff or you want a schema as i mentioned before to make it easy to communicate between the back-end team implementing that service and the front-end team or client team or tv app team or game dev team that consumes it graphql can be a really good method to define and agree on that schema but as i pointed out it is an investment in much more heavily defining everything rather than in trpc which is an investment in simplifying everything i saw somebody on youtube chat actually ask a pretty fun question of uh i wonder if one day we can use trpc or an equivalent for a non-typescripty front-end client and that is a phenomenal thought because uh i wonder if this will have a google hit somebody got a lot of progress in this and i want to find the link here we are trpc open api so this has a couple devs working on it right now i don't think alex is particularly involved yet he's just like answering questions but he is very excited about this did not have my screen share my bad so trpc open api is a new package that generates a swagger open api dock and endpoint for your trpc so if you build a trpc router and you want the type defs and the more traditional rest experience of swagger you can now generate that from your trpc directly so i don't know how good of a state this is in or how consumable this will be but there is definitely definitely a future where you write your trpc engine open api comes out do you generally have to use a monorepo for trpc that is another really fantastic point yes generally it is a lot easier to use monorepo trpc the reason for that is because trpc's type definitions come from the type script code itself whereas with something like graphql you have to generate a schema you have to run code that generates this thing this entity the graphql schema that is then given a version number and distributed and different things can can grab that graphql schema so like when i was developing at twitch one of the commands you had to run was yarn gql what that command would do is it would call the public graphql endpoint and pull down the most recent graphql schema and then throw errors as it generates the type definitions based on what you're querying within the app from there the problem with that is if you have an old commit or an old like version of the code on your machine and you run that command it's not smart enough to fetch the old version of the graphql run against the old back end this is generally the case with like not using a monorepo though the benefit of trpc kind of forcing your hand that way is at any point in your package history you have or at any point like your git history as long as it passed build then you're back in definition and your front end consuming it should match ideally and there's a whole class of problems that you're constantly working around in things like graphql or even like traditional like rest and swagger type stuff where you're worried about versions all the time a lot of like the way i build things is trying to avoid thinking about versions as much as possible and just everybody's always on the latest thing even with mobile i'm actually a little harder stance on this with mobile it's one of the reasons i'm so pro react native and versus things like flutter like even if flutter was technically incredible there's no way to ship an update to your flutter app without sending it through the app store and google or apple approving it so if there's a small bug or a hiccup you have to go through all that and if a user isn't on the latest version they can keep using the old one they don't have to they don't have to update the app they can stick around on an old version of the app for ever with expo for with react native the javascript bundle that controls most of the app is externally hosted and i can npx expo push in my terminal and whatever i have running there gets pushed up as the new bundle for all of my users to download and i can even write code that checks for that update whenever they navigate sees if they're on the latest version or not and resets the app if they're not with the fresh bundle can even restore the position they are in the app so i'm able to with what looks like a quick flicker to the user if at all entirely update the layer that is doing the fetching from trpc or doing the like rendering of the ui everything but the native layer i can hot swap by changing out that javascript bundle and i never have to worry about versioning as a result because everything's always on the latest version what protocol does trpc use it's http nothing special there that is correct green scars the fantastic instinct there all right or all trpc is is a syntax for having one endpoint call the right function based on the like properties you pass and call with hey did you know that over half my viewers haven't subscribed yet that's insane y'all just click these videos and listen to me shout and hope that the algorithm is going to show you the next one make sure you hit that subscribe button maybe even the bell next to it so that you know when i'm posting videos also if you didn't know this almost all of my content is live streamed on twitch while i'm making it everything on the youtube is cuts clips whatever from my twitch show so if you're not already watching make sure you go to twitch.tv theo where i'm live every wednesday around 2 or 3 p.m and i go live on fridays pretty often as well thank you again for watching this video really excited thank you




## tRPC It’s Nothing Like gRPC - 20220915
what's the difference between grpc and trpc they have nothing to do with each other literally nothing to do with each other at all anyways grpc is a proto protobuf solution for between server communications it is a way for one server to tell another server to do something trpc typescript rpc which rpc stands for remote procedure call trpc is a way for the server and the client to interop and share data and type definitions grpc was written for very fast inter-server comms so that one server could communicate with another server very fast trpc was written to make the relationship between the client and the server as simple as possible similar to graphql trpc versus graph ql so let's take a look at a few different languages and where they fit i'm gonna grab this guy separating all these a bit more so this first column is databases second column micro services i'll move this over slightly too and here we might have typescript web client maybe we have a mobile app and here we have maybe something like analytics service so here's like a pretty common set of layers on the left is where our data is stored let's say this is a sql db maybe you have a redis in there so what we're talking about is how these things communicate and lead to receivers graphical it's not that simple it's a question of what fits in each of these different sections like what is the ideal communication between each of these four so if i start here what fits between the databases and the microservices this one's easy sql maybe json for redis but the way you're probably ideally communicating between your sql database your redis and your microservices is through something like sql communicating between your microservices and your gateway as well as between the services themselves actually this came with a better way to diagram this maybe yeah we'll say that the space between here is described by these i'll make this green to make that clear now we'll do this section we'll say that this is i picked the wrong thing there stroke pink and then for inter-service or server comms grpc or http json honestly this extends all the way here so for inter service communications as well as to the gateway grpc and http are the best solutions here do not use trpc here you're making a mistake from honestly there's not really inter communication there and there certainly isn't here so in this space the final section we have the most options i'll leave http json on top that's the default graphql and trpc so purple's bigger because you can use it for inter com here as well which was intentional but when you're communicating between clients and gateways http graphql and trpc are the solutions built for that when you're communicating between services and between services and gateways grt pc is built specifically for that http is a good option as well and when you're communicating between the services and the databases you can use sql or whatever the hell you use for redis i'll admit i'm redis noobs and there might be better things for that but generally speaking this space is served by sql and other database standards the attempt to take a graphql from here and drag it all the way back there has always confused me the desire to take grpc and move it all the way over here has always confused me i feel like people don't acknowledge what the benefits of these specific solutions they're looking at are for and grpc for web is a joke and no one actually enjoys their experience using it theoretically you can take grpc and put it here the same way you can theoretically take graphql and shove it all the way back there you should not do any of those things because these technologies are built for specific stuff use the technologies for what they're built for and you'll have a much better experience now once and for all please stop asking me about trpc versus grpc it's like you're asking me about car versus boat boats are great for water and cars are great for driving stop asking me stupid questions we're here for dumb questions not stupid ones hey did you know that over half my viewers haven't subscribed yet that's insane y'all just click these videos and listen to me shout and hope that the algorithm is going to show you the next one make sure you hit that subscribe button maybe even the bell next to it so that you know when i'm posting videos also if you didn't know this almost all of my content is live streamed on twitch while i'm making it everything on the youtube is cuts clips whatever from my twitch show so if you're not already watching make sure you go to twitch.tv theo where i'm live every wednesday around 2 or 3 p.m and i go live on fridays pretty often as well thank you again for watching this video really excited thank you




## } } } } else { { { { - 20240117
a few days ago I saw a code snippet that immediately stressed me out like badly that code snippet is this I cannot put into words how much this stresses me out what happens if an additional condition gets added on either side of this else how do you know you're hitting the right else here the answer is you don't it is basically impossible to guarantee that when this code is changed it's not going to break or hit a weird else case that is nearly impossible to debug I was very stressed when I saw this it made me realize I need to talk a bit about conditions as simple as they may be because godamn have I seen if and if else statements used in some really terrible ways I did see one other tweet though that inspired me to go a little further and make this video this one came from primagen thankfully this one of those rare cases where Prime and I agree really strongly it's not quite as much about if statements as it is about implicit returns but it still showcases how confusing these things can get if you don't do them a little more strictly the first example here is using an if else with an implicit return I want to be very clear here I hate this code to me it is incredibly unclear that none is being returned in this condition and that this if else whatever comes back from this whatever the final line is in any of these conditions that's what's being returned the other thing that's confusing to me here is if I was to add another line at the bottom here these are just random things being said in lines they're no longer return values the idea of a return being inherent to a line of code being the last line in a function as as I love functional programming it's rough the counter example Prime gives here that I fully agree with him on is this guy might be more characters but I don't care because this code reads like English if line starts with bracket return some else return none doesn't even need to say else because it's if this is true we do this thing otherwise we do this other thing because we escaped early I love early escapes I love this code the difference here is so Stark that I feel like I could explain this code to my mother who obviously isn't a programmer maybe not that obvious regardless my mom doesn't code and I could describe this to her and what it's doing I might be able to describe part of this with her but I sincerely doubt she would understand and I personally like code that's simple enough they don't even need to know the language to read it and to understand what it does and things like early returns things like explicit conditions explicit returns these behaviors they make it way easier to parse code and importantly they make it way less likely that a mistake breaks the code in the future what I see when I see this code this if else or when you see this code with these awful brackets what I seeing when I look at these is something very fragile that is just waiting to break in a future code change in that code base I'm not looking at stable code obviously this worked otherwise it wouldn't have shipped but now no one's ever going to want to change this that's just reality and I saw somebody say well if you had color highlighting for your brackets this wouldn't be a problem show me a working Chrome extension to make that work in GitHub so that when I'm doing a code review it's clear to me where this nested else is actually closing this isn't just about your editor this is certainly not just about your solo projects this is about how these things affect software shipping at scale and I promise you when you have this level of nesting you're going to have problems as soon as this code changes it is now a liability earlier in stream I was linked from twins a really cool blog post from Google where they talk about else nuances and it turns out Google similar to me doesn't like El statements that much they like them a little bit more than me but they still push back on it a lot of the time and they certainly don't love this nested stuff this blog post is based on a problem that Google would put in their bathrooms as a testing on the toilet episode yes if you work at Google they give you leite code problems in the bathroom but on the bright side this is a good lesson for us to learn so even though we're not at the Google office we can still learn a little bit here right so let's do it consider the following guidelines to help you structure your functions use a guard Clause to handle specific specific cases up front so the rest of the code can focus on the core logic I love this PES path if not path raise else nested logic this is disgusting please don't do this your code the majority of your code should not be baked deeply in an else do an early escape and let the rest of the valid code just be the body of that function I love early returns if you have cases you want to get out from quickly frontload those put them right at the top say if these things are true get me out and then the rest of the function can be whatever it's supposed to do it's way more readable it's way more maintainable and the control flow of your application is exponentially clearer and also people are saying in chat it is faster to do this as well if you can early return you probably should I also think once your if statements get complex enough you should probably break them out into a function where you early return aggressively so you don't have to worry about these weird complex statements instead it's contained within a function that is clear about what it's expected inputs and outputs are that all said Google leans towards using else for contained core responsibility logic so for the favicon example they don't use if returns they use if else returns so if the user ID is non return signed out if they're Incognito return Incognito if there's no inbox items return empty otherwise return the has items icon I think this is fine I would not reject this in code review personally I would just do if thing return if thing return similar to this code I don't think it's that big of a deal that said I get their argument since all of this is the core responsibility containing that in a series of checks that are one block instead of it technically being multiple paths is nice all of that said what I'm seeing here is an opportunity for some pattern matching that wasn't taken but not enough languages have pattern matching so I understand they also say to use a switch statement instead of an if else but nah just use if else especially in JavaScript switch statements are a little bit weird I did see in chat someone linked a Dan abov thing about if statements that I would love to see I've not seen this principle widely articulated but I use it all the time basically the idea is when you write if statements it's it's good to make sure the code still makes sense if each of them is deleted independently or if more similar ones are copy pasted o I like that rule if statement should be treated as individual blocks that you can pull in delete override or do whatever you want to if demo path name plus equals demo let's search if file search plus equals this I want say there's a reply to ah is three different examples extra is the content if demo in file return demo file and extra that is hard to read that is somehow worse and that is somehow even worse impressive this is the same code that Dan replied with this is way more readable yeah this is great I see Dan's Point as per usual when Dan is talking about how code should be simpler we fully agree I'm pretty sure what this is going to be a link to is yeah URL search prams for things like this you should be encoding it using the URL search prams helper so you don't actually have to do all the string of pending yourself but assuming you can't do that because you're using something that's not standard web Technologies I much prefer this and I'm a person who hates mutation I don't like the idea of having a let and mutating it but when the result is code that's this much more readable than whatever these are as much as I love that this is an immutable solution it's painful I don't find this readable at all especially this Turner One this you're not convincing me anyone on the team actually understands how this works that's not you're not convincing me that you might have understood it when you wrote it but when this breaks from a weird Edge case 2 weeks later you're not patching this properly the first try you're spending 20 minutes trying to figure out what it's doing doing another 20 minutes rewriting it and then 10 minutes regretting your decision to be an engineer and moving out to the Farms like we all plan to in the end so yeah those are my thoughts early returns are great use them when you can as much as I hate mutating things if it makes your code more readable and maintainable I recommend doing it but most importantly don't do those giant chaotic if else checks because debugging those becomes nightmarish really fast don't be scared of breaking out functions definitely don't be scared of early returns and maybe you make your code a little bit simpler and easier to work with if you want to see more ways that people use JavaScript and typescript wrong I'll pin a video in the corner all about how people love to use objects incorrectly because once again sadly people use the tools they're given doesn't mean they use them well good to see you guys as always see you in the next one peace NS




## “Act On Press” - John Carmack's Hot Take On UI - 20240523
act on press a strong opinion piece by John karmac if somehow you don't know who John karmac is I highly recommend fixing that he is one of the most important and legendary people in all of software engineering I largely know of him not just from that game era but from the chaos that was virtual reality stuff where he felt very motion sick when he first tried a Galaxy VR thing gear VR I think it was called when the Samsung phones could be used in a headset to do VR stuff and he was disgusted at how slow the rendering was and how he'd turn his head and the video would catch up after and it would make him feel sick and he was just disappointed because back when he built games he had almost no CPU or GPU at all and he still managed to make things run at 60 FPS so why the is a phone that is a thousand times more powerful still running at like 20 to 30 FPS so he came up with some crazy hacks specifically asynchronous space warp and asynchronous Time Warp which were methods to allow for the GPU buffer to create new frames without having enough data to do it and fill in the gaps so that you would always have the most upto-date location in your face when using VR which made it way less likely to make you motion sick so he has cared about these little pieces of interactions in especially 3D for a long time now so if he's going to come and say we're doing things wrong in 2D I'm going to listen because this guy has died on so many Hills in order to make better interactive experiences in video games and in VR he probably knows what he's talking about here too and I'm excited to read it act on press this is a UI design Hill I will die on and it dismays me how often and hard I have to fight for it almost all interaction methods have a press and release event associated with them whenever possible you should do the thing when you get the Press event instead of waiting for the release event because it makes the interaction feels substantially more responsive and it reduces errors by not allowing the focus to slide out of the hot box between press and release oh the amount of things I use where I click a button and it moves while I'm clicking the button I I have considered dropping Services entirely because of bugs like that because it is the most infuriating thing in the world YouTube Studio I'm looking at you even a ballistic tap where your fingers intentionally bouncing off the button or touch surface involves several tens of milliseconds delay between the press and the release and most button presses will have well over a 100 milliseconds of dwell time this is a delight in interfaces because it feels like they respond instantly to your wishes and the benefit to every single user is often more important than additional Niche features I have this counter component I'm currently clicking on the increment button when I Let Go it goes up when I'm holding it like I am right now if I move the mouse out of the way and let go it no longer counts it because it's not on Mouse down it's on click and if we go back to the code you'll see on click is what we have bound we can change this to be on Mouse down and now when you click it instantly okay I'm already sold that feels hilariously better that like you can't tell cuz you can't see exactly what I'm clicking but holy that that feels significantly better I'm mostly sold the one thing I would be unsure of is there's plenty of times where I click and realize I click the wrong thing so I move off it and let go and losing that would suck CU I'm clicking moving the mouse and letting go it still counted that click but for almost everything I've ever built yeah this is better keep talking you have me paying attention carac there is a delight in interfaces that feel like they respond instantly to your wishes in the benefit to every single user is often more important than additional Niche features yeah he leans a little harder than I do in the make everything really Pleasant thing me checks and balances benefits and negatives game developers with simple UI toolkits tend to get this right more often but sophisticated app designers will often Fight Hard against it because is mostly incompatible with operations like interactive touch scrolling views long press menus as well as drag and drop being able to drag scroll a web page or view with interactive controls in it is here to stay and NS out way better than having to use a separate scroll bar but there are still tons of fixed position controls that could act on press and it's good UI designed to favor them when possible like here if you were to try and scroll past this it will likely click when you're doing the scroll on mobile I do I want to actually test this quick am I actually going to do that Flex Flex call text to XL P 8 W fault and change this to a div items Center there we go and now I can mount way too many of these now it's guaranteed to scroll I'll just use my local IP address on my local network cool that worked so now I have on my phone the same code it still handles scroll fine so I don't even buy the scroll argument it's like I'm scrolling and none of these are getting changed I'm like intentionally holding increment and moving up and down and it's not triggering nothing's happening I'm tapping count and it's going up but when I hold and scroll no it seems like mobile environments are smart enough to not trigger on Mouse down so we're good it means we can probably just use this I wasn't even sure that would be the case I'm happy I learned that and I'm sure a lot of people in comments are going to be like wow Theo you didn't know how on Mouse down works and the other half are going to be like holy I had no idea it worked like that because most people don't know these intricacies because most of us just use the thing that we're told to use which in this case is on click and since this is what everybody uses this is what we all use to but it seems like on Mouse Down's honestly a fine option and yes Dragon drop sucks but Dragon drop's a different enough thing that we should treat it differently anyways so I I am even more sold than I was before after that demo yeah in the early days of mobile VR the system keyboard was a dedicated little open G app that responded instantly with a full internationalization it became prudent to turn it into a conventional Android app but the default Acton release button Behavior made it feel noticeably crappier the design team resisted a push to change it and insisted on commissioning in a user study which is a corporate politics playy to bury something yeah the amount of times I've had obviously right things get shut down because somebody said well where's the data and insisted on doing some stupid study about something that was obviously wrong where no user wanted it because they just wanted to to block you yes this this well we need to commission a study is the best way to keep somebody else from doing the thing that is right and yeah I was irritated at how they tried to use leading questions and tasks but it still came back one of the clearest slam dunks I've for user testing objectively fewer typos Express preferences and interview comments about the Acton press version feeling crisper and more responsive yeah I can't imagine keyboards ever being on release like what I'm typing I am pressing the a key now I'm still holding the a key but the thought of a keyboard input that doesn't immediately make the keys appear when you press them is really silly the idea of a light switch where you click the button and you have to let go for the light to actually change colors the way the real world Works isn't on release it's on press like imagine you turn your key and the car doesn't start until you let go of the key no duh why do we do this wrong so I won that one but the remaining times I brought it up for other interfaces I did not and you'll still see act on release throughout the metav VR system interfaces well you have one more Advocate now John we don't always agree but godamn are you WR on this even more so than I thought when I first saw it I'm happy I sat here and took the time because this is an obvious win and I'm legitimately going to consider moving things away from on click and on Mouse down in a lot of the things that I build going forward that feels significantly obviously better and as per usual John carck is just right about when he talks about it so thank you for bringing this up thank you for taking the time to write that and thank you all for watching let me know what you think in the comments are you going to go on Mouse down some stuff because I know I am until next time peace n




## “California Skater Boy” Reacts To Senior JS Interview - 20240506
I've been hearing a lot about this video and that I really need to watch it so normally I'd watch it off stream but I haven't had time so we'll see if this becomes a video or not I just I have to see this so the CV looks all good and everything but it all comes down to how fit you are selecting JavaScript libraries imagine we had two options not only does he have the mustache he has the rest of the mustache it's like grown and taken over his whole face the same way JS grows and takes over your whole infrastructure he's a real JS Dev for sure the T3 and the T we're we're nine seconds in and we already made it to T3 what how how did I how have I what I've watched these videos since I like started coding and I've mentioned in the first N9 Seconds of One what oh my God holy crap so the CV looks all good and everything but it all comes down to how fit you are selecting JavaScript libraries imagine we had two options the T3 and the T4 stud both use next jazs typescript in t PC but the tnt3 stands for Theo what Skater Boy from California who H how how did I they like never really put people's names in these that's what that's like the highest honor I've peaked I can turn I can shut off the channel now guys it's over we've done it this is our Peak it's only downhill from here it's only downhill like what happens from here like I I don't even know like do I get mentioned in like a tech lead video as a joke nowz only gets worse like this is Peak tnt3 stands for Theo the skater boy from California where is the tnt4 stands for technology no T3 uses Tailwind while T4 uses tamag Tailwind has a huge community of 4994 hlas online in the Discord versus 584 tamaguchi but the tamaguchi are more Cutting Edge where the last commit for Tailwind was last week for the last commit for Tailwind was last week so clearly it's Legacy software we push on safe T3 is primarily focused on web apps while T4 is immediately crossplatform because T4 natively composed to mobile as react native through Expo now Tailwind doesn't map one-onone to react native but the T3 stands have tried for a long time to get it compatible was tnd CSS react native which was renamed to Native wind I I don't know if you'll tou about this or not but like the native wind guys now the native wind guy I should say now works at Expo I'm incredibly confident it's going to come out good once it started working which was abandoned for a long time but was made compatible with react native after its developer the 1X death join XOne 20 of course he brings it out 23 and now it's fully compatible with mobile anyway so forget this whole part now the real problem comes in when we look at o and or T3 uses next o or it's hosted solution Clerk Clerk's a hosted solution of next off yep all good all golden I hope I don't lose my sponsor for pretending that's true no next off is framework agnostic but it doesn't work on mobile technically speaking almost all of this is perfectly accurate too like he did his research for this and it's next off Works in all Frameworks now technically it's called OJs but the bindings for all these other things are beta actually I filed a poll request to next off yesterday yeah oh they already merged it yeah I follow the PO request just fixing their docs cuz the linking was entirely broken and uh yeah I I'm officially as of yesterday next off contributor so I think that that really emphasizes the point here I'm I'm too deep could of course use clerk Expo to make it work on MOA or hack the next OJs Expos rest API and see where things go but even if you fix the next Off plan next off also doesn't work with Horner walkers for free Edge deployment on cloud flare T3 also uses Prisma which is super inefficient and ugly I mean just try a simple query if your result is in the first row in the first Json will still revalidate every Row in every Jason not4 use a super base for user data and sells it to the darket but there is also a Lucia Branch for this which works with any Orma database hey we use drizzle come on and I I love the Nicki Minaj super base reference I don't know how I had never thought of that before as a big like lifetime Nikki stand but uh yeah all this is gold if you know how to write the adapter now Lucian super base work on mobile flawlessly now instead of Prisma wait does Luchia actually work flawlessly on react native uh Luchia off Expo I'm just curious I've never oh yeah they have a bunch of examples support native app bear tokens yeah cool I didn't know they had that working last I check they didn't so that's cool good progress on the Chia side four uses drizzle straight out of the gate super Bas little CR compatible which means if we deploy in horo we can scale to infinity and beyond for $0 if our bundle size is under 1 Megabyte which is also why you cannot use Prisma because there's a lot of interesting points here Prisma blows the package just like this company's HR department now drizzle also works on the edge yeah but couldn't drizzle just silence drizzle could work on T3 but the documentation hasn't been started yet T3 maintainers you just caused me to get owned for no reason because we do support drizzle we've I have only used T3 with Drizzle for a while now I have to go wrate those docks after this God damn now Lucia would also work with T3 but I haven't tried that so I'm not going to consider now T4 also uses helper libraries like valid bot million dooll JS pretty K virtual edit ji now we could of course extend T3 with those but we would first extend T3 with Pusher for web sockets actually better to use imp plausible for analytics because Google analytics is Google analytics and we would also add zand to abandon Redux from our vocabulary just to reintroduce it once they abandon Z JavaScript all of this creates an insanely huge bundle which we're lucky to expand with bundle reducers the next bundle analizer I love it not3 would typically host on versel which is the cash cow so it's better to's Planet scan which is the cash cow so it's betterto Railway which is like Heroku which is now owned by Salesforce and therefore evil we sell with a V like an e [Music] and I also thought that G4 said gay I yeah I do like that I'm both like being appreciated and owned from the modularity part cuz there's like we didn't include the things that are easy to glue together where like zustand isn't something that needs to deeply integrate with all of these other parts so we didn't include it whereas your om needs to integrate with your o which needs to integrate with trpc so we do include those things and that's like like the line that we drew is if it can just be npm installed and work how you expect we don't include it but if it has a setup especially a setup that integrates with other things then we include it but yes it plays out very comically in the scenario so it's better to use Railway which is like Heroku which is now owned by Salesforce and therefore evil ver sell with a V like an evil an evil with an E like an 's life an emx is life with a c like in free hosting on cloud flare T4 we will just host straight on the edge of glory which means if you can get select to compile under one Mega then we can scale it to Infinity for 0 on horo without switching the only bottleneck then is her database not even the database but the right Ops SQ light is by definition on the edge but it's still slower than speed of light Cloud flare says they're working on that they say SQL light doesn't go at the speed of light false advertising this is why lql is better because they're not lying that they're going at the speed of light when they're not say that every week next week is cloud and Innovation week so next week is different no we don't have the source of slck anyway so now we could of course rewrite the whole stack from react next to view knock solid and solid St Quicky and Quicky market and each comes with their own whole ecosystem like did he make up a better dumb name for quick Frameworks it's I think it's quick City but Quicky Market that's that's gold that's absolute gold and yes EV I've read that SQL like code of conduct view or next beef or to reuse 0% of our code don't write this down next week all of this is going to change so but then again we might as well rewrite straight to rust good idea I didn't say anything now the backend we can well yeah we should rewrite to rust good idea I didn't say anything that's the the the most rust ISM I can imagine they haven't done a rust one yet right cuz senior rust Dev would be hilarious and compile to web assembly and host on work or RS for free the front end now for the desktop app supporting the react web code we would need a native web view we would use T because electron is blown it and ships its own chromium Al tari is basically like a V8 one what is V8 exactly Spotify slack Discord office and most importantly did he censor Microsoft that's beautiful a virra fre antivirus all use electron but we will use T because while electron is a compiled app with a web view that can render rust compiled web assembly T is a rust step and we save on R so T4 has 1,000% code sharing performance production Readiness performance lean optimized bundle size free hosting on horo runtime Edge workers Cutting Edge performance 1,000% type safe styling free hosting a purple landing page but everybody uses performance tail so you know years ago we would just set up a PHP and SQL and a long St I I love that like Tailwinds the winning factor for us it's a it's a good one I'll take it but everybody uses performance Tailwind so you know years ago we would just set up a PHP and SQL an alarm stack on a $5 server with JJ query and our five users would be happy but this of course would require backups server management security which I know how to do but they lost trust in me after a fourth user data cleanup this month in fact everybody's changing back to servers 2024 is the year of the serverless lessness they said that 10 years ago they said it every every year but this year they're out of VC funding we have an entire okay we we've been in the year of serverless for a bit but like we have actually moved a lot of things to serverless I get the joke though it like serverless I don't want to say it's a zero interest rate phenomena but it was definitely accelerated by investor money hob band an office building so might as well go with JavaScript so we would use njm holograph Q typescript AWS and super bear what is Cube un ah I know this might seem like a fun way to spend your time in the age of AGI but this is a public service announcement to all senior Engineers trying to learn all of this in online courses to get a job in today's developer Market my advice to you is what did the science say trying to learn all of this on online courses to get a job in today's developer Market my advice to you is BYO coin fish don't fry in the kitchen okay that was gold high honor high high honor um thanks for letting me sponsor this video can I say this and start a like a straight up conspiracy do I do it I feel like that this could come back to haunt me but it's worth it don't write this down next week all this is going to change Fair well done I've been adequately trolled good one guys I seriously though hi high high honor I have loved programmers or human 2 videos for a while and it's weird to have my name mentioned in one and it to be about my stack but yeah never thought when I made the silly little stack that we'd be here now but I'll take it this was fun if this ends up being a video cool peace nerds




## “Goodbye useEffect” Reaction - 20220525
why should we get rid of it so we are going to be talking about everyone's favorite get it ready which of course is use effect and so i know it might not be everyone's favorite hook but um we're going to talk about it because it personally for me has caused a lot of problems and especially like even from when i was starting with react and react hooks and even till now like there's just a bunch of things that can go wrong so first of all if you're struggling with use effects don't worry because even senior reactives you know struggle with it people who have been doing reacts from the very beginning you know and even those people we all have the same experience like with react hooks because if honestly if you've done class components it's like all that knowledge sort of goes away once you once you've started using hooks but that large dependency array you know the ones i'm talking about the complicated if statements i mean those are typical you know it's just a really awkward hook so that's what we're going to talk about today and if i wanted to summarize my slides like if you have somewhere to go and you want me to just summarize it real quick for you i'll just say use effect is not for effects now so this might actually leave you a little bit confused so um where like how did we get here use event coming out in the middle of this talk is indeed funny good call out maple uh about a third of the complaints i've seen about use effect or use effect could be solved by use event about a third could be solved by various like async things like react query and the other third are genuine ergonomic like rough edges i think use effect it's more [ __ ] than it deserves but i also get it and this one in particular i think makes pretty good points but i'm excited to see how it goes so when we were doing effects and you know class components how many of you remember that where are my elderly react steps okay so we had three places to put them we had component did mount right we had componented update which is whenever we had state come in and or some props change or something we're like okay that's a really good opportunity for me to fire an effect um or component will unmount and so this is a good place to do uh on subscriptions or to do some sort of cleanup but these were the three main places that we had in class components to do effects so now what do we have do we have those same three places well with the use effect hook you know if we pass an empty dependency array you know we have component that mounts sort of we're going to talk about i'm trying to decide how much i want to rant right now i do okay and here's where theo starts to [ __ ] let's say i have a chat widget a chatbox.tsx it exports a component chat box it takes a property a prop slug that's the chat room you want to connect to and there's a component did mount and in that component did mount it subscribes using the slug that it got now let's give it a different slug component that update now needs to maintain that logic it needs to do an unmount and a remount so it's doing the work that the unmount has to do as well as the work the mount has to do and then there's will on mount which does the actual unmounting so if i have a component that takes in a prop to choose which channel it connects to i now have to write the connection and the disconnection logic twice because i need to handle the mount case and i need to handle the update case in the update case is doing two things it is doing the unmount behavior of removing the listener and unsubscribing as well as the mount sub behavior of attaching the listener and subscribing to it so in here we are not just duplicating code but we're duplicating code over a com an unintuitive component level flow that doesn't give a [ __ ] about which data changed let's say that chat box also takes a prop for light mode or dark mode if we blindly do the update or in component update blindly disconnect reconnect there then we'll disconnect reconnect whenever you toggle dark mode if we don't want to do that we now have to do a comparison against previous props to make sure they changed before triggering the disconnect reconnect yeah it's rough so humanoid said this is why you don't want or this is what you don't want for sockets no if you have a component that you you give it a url you give it a slug which is which socket it connects to you explicitly do want it to disconnect and reconnect to a different slot if your websocket connection wants to be maintained and you want to change which channels you're subscribed to on a given connection you should do that by having a separate effect that runs on the slug that is separate from the one that runs on the connection the problem is with this architecture that's being shown in the screenshot you cannot do that you don't have that granular control unless you re-architect the components themselves to hawk style hydrate in a client and then the child is where the unmount remount behaviors are done and you have to separate those but but now we're writing six functions instead of two i hate this and i don't if this if the framing of this is going to be things used to be simple when we had componented mount and now they're too hard i'm going to go [ __ ] in on this so let's hope that's not the angle he's going to do some sort of cleanup but these were the three main places that we had in class components to do effects so now what do we have do we have those same three places well with the use effect hook you know if we pass an empty dependency array you know we have component that mounts sort of we're going to talk about some foot guns here in a bit we have um componented update where we could say like if these things change then i want this use effect to run and we also have component will amount sort of like you have this nc dependency array it's really awkward you have a function inside of a function you know we're not haskell what are we doing here so i just want to say that use effect is not a life cycle yeah and so a lot of us think about like oh no in fact we're used to you know just putting them in life cycles do i just let them talk or do i pause and [ __ ] and react 18 actually makes that really really clear also the default behavior of use effect is an infinite loop and so you might be thinking like okay i've been using effect enough to know that i need a dependency array right and so everyone should know that so why does everyone run into this like infinite loop scenario so uh here's an example pause cool we're ranting so yeah i'm here to react to this react content as i just said you're making up a case in the middle here this was an attempt to show that these like this old mental model poorly maps to this new model yeah the old model was bad and now we can be more granular with when actions and cleanups occur this hurts this slide in particular shows the what i consider a bad faith approach to the problem which is a yeah it's not one to one but it's like apples aren't one to one to oranges but if the orange was [ __ ] poisoned we wouldn't talk about it a whole lot like if oranges were bad and we have concluded as a community that oranges are bad we wouldn't be comparing them to apples all the time this is like we're comparing an apple to a poisoned mushroom it's like yeah this apple doesn't follow the same shape as the poison mushroom very well yeah no [ __ ] yeah i don't like this so far what are we doing here so a lot of people are confused about this because a lot of people are trying to rewrite code one to one with a different pattern the yes the community has agreed the greater react community of people who who make architectural decisions around how react libraries are maintained and optimized stuff like that like the greater react community long ago accepted that the old component will update model was bad fundamentally and we are very happy with where we've moved the people you see complaining about use effect are for the most part incompetent engineers that are mad because they forgot to pass an array i agree there should be a required array i really don't like that use effect doesn't require the second param it should you should be forced to pass an array and determine when this thing re-renders or maybe have an option that is like always render if you really want that case but i don't think anyone ever does generally the use effect complaints are from people who don't understand the consequences of what a mount is and does and what updates mean and do use effect isn't something the average react developer should have to touch a whole lot and yeah yeah the old way of doing things with component did mount componented update components should mount components should update component will on mount was not better and i anybody who argues that is doing such in bad faith and if you have someone who's arguing that regularly and they're down to come on the show and talk about it please there's nothing i would rather do than ream somebody who thinks react class components and class component functions were ever the right way to do something because they weren't that's just wrong i just want to say that use effect is not a life cycle hook and so a lot of us think about like okay effects we're used to you know just putting them in life cycle hooks but use effect is not really for that purpose and react 18 actually makes that really really clear also the default behavior of use effect is in infinite this is bad you might want to close this i've been using effect enough to know that i need a dependency array right and so everyone should know that so why does everyone run into this like infinite loop scenario so uh here's an example like i just have an example where we set down count plus one you might uh i just saw your message maple about the dependencies for effect effects like binding event listeners my take there would be i would almost always prefer to have the event listeners calling against a ref and update the ref rather than doing that ah no so you still need an effect to update the ref [ __ ] yeah you're right use event does this effectively uh more good points maple you're like three for three making me walk back my own stance on things goddamn you might think okay this is a side effect this is only going to run once but in reality we we have this happen okay so use effect is also not a state setter you could set state in it but if you need to set state you could do that in other places too okay um this has been like one of the biggest problems especially in the very beginning when i was making api calls and when you put fetch requests in there and they start looping infinitely things go really really wrong so um this is another example and this is actually straight from the react docs as it exists today not the beta docks but the actual react docks where do you see something wrong here there's no dependency array so this this seems like i flew here all the way from orlando it really feels like um when i went on the plane and i saw no one with masks you know it was a little bit dangerous a little bit uncomfortable and uh sometimes ugly so it just feels weird but thankfully the react documentation we actually just found a fun hacky lint roll that requires you to pass an array to use effect i almost went and like patched the types to require it but the lint rule was fine i think use effect should always have an array and if you don't want that you should have to like opt into that behavior another way does introduce this idea of a dependency ray but it's at the very bottom so you know you have to scroll all the way down and it's a tip it's like hey here's a cute little totally agree that you should rarely call use effect i not only should you really call use effect you should probably never call it in a component directly if you're having if you're writing a use effect i almost always push for you to throw that in a separate hook that's named like use join call use start chat server so that the effect has a description and a name that is maintained in a place and then you call that name and that behavior somewhere else it does a good job of like isolating at least like mentally what each effect is responsible for and generally if you can avoid more than like one effect per parent like hook that can make managing these behaviors significantly easier it's when you have like five effects in a component that these things go bad but if you had five behaviors in a used component will update your life's a lot worse so that's why i hate the argument here it feels like another one of those this thing is so good that it's bad because it doesn't work for these things and people use it the wrong way whenever a tool is really good you you i try to put this you know a tool is good when you see it being used poorly all the time because that means it's so good that everyone started using it and they've started trying to use it for things it's not meant for and we see a lot of that with react and the primitives that it provides a lot of yeah it's so powerful that it's bad i like that way of framing it yeah how would we make something that's not as dangerous i don't know if that's react's responsibility i think that that's the community's responsibility to take the primitives react provides and make them useful i will never trust any one vendor to be the ones to provide the the ergonomic use cases once we get down to ergonomics i don't want one owner i want as many owners as possible and as much flexibility in that ownership as possible and that's something that i only get in react like react doesn't tell me how to do styles react doesn't tell me how to do animations react doesn't tell me how to do anything other than turn data into components and i really like that i don't want react to tell me how to architect around my effects i want the community to come up with things like react query like zestan like jodi like rtk query and all the rtk toolkit stuff i want the community to continue evolving around the primitives react gives us so that every day my job as a developer can get better and that doesn't happen when one shop owns everything and this is why svelte will always be limited because svelt will only be as good as what rich feels like doing i really like the way maple just put this although if education around use effect is evolving out of the gate use effect was always meant for synchronization recognizing that makes things 80 easier totally agree very good point a little tip you could you know use a dependency array but now all of us know like we need that so um here's what we really expect when we use effects now that we're used to all these foot guns we we think we're going to do this effect whenever something here changes in the dependency array and we're like okay that's pretty simple i i could do that i could you know manage my effects that way but the reality is a little bit different and my slides aren't exactly working but that's okay so the reality is more that we um you know we have a big if statement in there and we have a big dependency array and it's just a little bit weird and so one of the reasons for this and one of the reasons why we tend to use use effect is because the imperative approach to doing effects is when something happens execute this effect it's like a do this like that's the definition of imperative so what's the declarative approach of use effect well when something happens it will cause a state to change or process the change or something in the components of change and depending on which parts of that state changed which is a dependency array this effect should be executed and that should only happen if some condition is true you see how confusing that is oh also react may execute it again because of concurrent rendering does so like okay we we have imperative we have declarative but really it's more like this is implicit or this is explicit and this is implicit and i prefer explicit over implicit so um yeah uh you know when we use effects we have this like just massive you know crazy boolean jumble and you know how much i love my boolean does he not show a component should update example next to this this is so bad faith why can't people be mad at something without comparing it to something worse so i want to be very clear here before hooks doing this in a class component wasn't like i put this before use effect doing this was so much worse because it was mandatory for every single one of those ifs you would have to build a ton of checker logic and each of the paths for all of your props so you don't have an array where you you don't have an array where you choose what triggers the effect you have props and state both of which trigger all of the update functions every run and you have to check the old and the new every time to decide which side effects you run the class component version of this was very similar the difference was there was a hundred lines of code instead of five and if you had more props and more state you have to exponentially increase that amount of code this wasn't viable before [ __ ] why are you comparing the life cycle things at the beginning just don't bring up the life cycle [ __ ] if you're gonna claim it if you're doing a comparison here we already agreed these things aren't similar give give us some context and show us one example of why we made this move why why we went this direction because it is so much better in so many ways that you are consciously not only ignoring but misleading people into saying [ __ ] like i miss component will update no they don't you're tricking them into thinking they do by being [ __ ] dishonest i didn't take off my hat it fell off when i was being grumpy anyways where were we variables like i see them all the time in use effect and here's a few examples by the way um i'm not going to name any of the companies uh but felt even said this felt limited to what rich wants to do that's part of this felt as a language article you should read it he's working on it it's something he's actively trying to do better at but until it's been done i will continue making that joke i i found this as an open source love you rich and really it's not their fault because usefux an awkward hook you know we have these conditionals really long dependency arrays here's another example here's one of my favorite examples which isn't actually there uh i if you want you know come find me i will show it to you later it's by again one of the companies i will not mention but um it's a really fun one so where do effects go you know i i'm talking about you know what i've had to write this before it sucks doing like weird react element [ __ ] within ear effects is always painful as soon as i see the word overlay inside of an effect i get a little bit scared this is not great it's a really fun one so where do effects go you know i i'm talking a lot of you know crap about use effect um so where should these effects go you know when we're looking at the components we see there's a few possible places right we know that we can't do any side effects in render we already know that you know we could use use effect and we're going to talk about when he's going to put it outside it is a little bit awkward so where's left maybe outside the component what does this look like this is weird like you know we're supposed to have everything inside our components right so yeah if you decide you know what this actually is a good use case for use effects like um i'm listening to what david says but i'm gonna put it in there anyway because that's just what i'm used to doing here's a problem react 18 will execute your effects twice on mount in strix mode um how many of you have used react 18 have been bitten by this already so a few of you the others you know you you will you'll experience it it'll be bad and so what happens what react 18 is doing is we're mounting the component which will cause the effects then we're on mounting it which is simulated in uh strict mode and so that will be a cleanup of the effect and then we remount it and so it's going to be executed again and so the reason it does this is because um it's trying to tell you that you're not using use effect for its intended purpose um which is what i'm going to talk about so it's really sussing out all of those effects that really shouldn't be there so use effect really feels like use defect at this point um and also like a foot gun so you're like why am i using this hook you know it's and what is use effect really used for anyway so the answer is use effect is supposed to be used for synchronization and i suggested that usefx should really be called use synchronize because you're supposed to use use effects that is really confusing to say by the way you're supposed to use effects when you have something that you need to uh synchronize with so examples would be a subscription like this and also dan says this as well i feel like my slides have no credibility unless i have a dance tweet on there so he says this as well that if you don't use use effect um you know or if you're trying to manage your data with use effect you're gonna have a lot of problems it's really used to synchronize it with some external system um but another classic example is uh just tracking things in the dom so adding event listeners like a points or move doing your cleanup this is what most of my effects look like right as small as possible so we have two types of actions or effects really uh we have the synchronized effects which we just talked about those are the subscriptions the event handlers all of that and we have action effects or what i call action effects these are your fire and forget effects and again um with react 18 uh you are going to have that unmounted remounts happening through the strict mode and if you turn off strict mode react 18 is going to do it anyway because of some concurrent rendering so this is just something you have to be careful of but typically effects that are based on that are safe to stop and remounts just because they're not those one-off action effects so then where do action effects go and the answer the official answer is actually event handlers so whenever possible you want these effects to go inside of things like on submit on click things like that um so i both like and don't like this answer even though it's the official answer um because we're doing imperative logic it feels like it's inside of render but it's not it's actually happening outside of render and also you have implicit code in your code base so um when we look at the beta documentation which hopefully you've all read they're excellent um one of the things it says is that event handlers are the best place for side effects and so further down the documentation um when answering the questions where you can cause side effects it says that these side effects usually belong inside the event handlers and so when uh you know when concerning use effects like when do we actually use use effects uh we say that or the documentation says that this should actually really be your last resort so you heard it from the documentation maybe you heard it from me first maybe you should read the documentation before coming to my talk and i wouldn't have to talk about this but i actually really enjoy talking about this so um yeah the problem is when we put effects inside of our components like rendering life cycle then we run into the problem like we talked about in uh react 18 where these effects can execute multiple times because they're at the mercy of the component rendering but if you put them in the event handler now you don't really have that problem like it doesn't matter how many times that component is going to render these effects are actually going to only happen once because it's guaranteed and reacts that when you go from state to state talking about this like a state machine then these effects this transition will only happen once but rendering might happen multiple times quick story time because one person i don't like on a team i like was talking [ __ ] recently and i have a feeling she's hate watching she knows who i'm talking about too so uh yeah if you're that person [ __ ] you uh to everybody else on the team we're talking about miss you love you you all worked hard there was a bug on twitch and i i have been away for long enough i don't care talking about this one there was a bug where sometimes when a user opened the dashboard it would immediately trigger an ad on their channel the reason for that i'll just show you guys my dashboard because why not nothing in there i don't want you guys to see see this button this run one minute or run 30 second ad break button i'm actually going to click this right now so if you're not subscribed you're not going to hear the next 30 seconds of this rant so make sure you're subscribed anyways as you see here this button is in a loading state fun fact if i was to hit edit here and reorder my quick actions that state gets persisted in local storage why bad architecture fundamentally just bad design decisions were made on how this was stored and this is stored in local storage and it includes the state one you store it there another fun fact that trigger when i click the button was not bound to me clicking the button the action of clicking the button is not what fires the button that button gets fired when the action state is mounted there is four components for each of these buttons one of which is named action and when action is mounted it has an on mount effect that fires that because we were storing too much [ __ ] this would load into the into the state that local storage had it saved in and it would load you into action state if that's what it was in when you last edited your actions and because that was such a bad buggy experience after that the team would immediately wipe the state to ready state but it fired the render for the action state so just by loading this page with a bad local storage state where the ready state is triggered here refreshing this page would trigger ads and this is not per channel this is per your local storage so if you [ __ ] this up on your channel and then you go to another channel that you're an admin for you will trigger ads on their channel just by going to this page how long did this take to debug i was not on call when this happened and i was still relatively new to the team the ads team was insisting it was this team's fault the on-call person insisted it wasn't i jumped in because it sounded like [ __ ] chaos i sat there for like two hours screen sharing with the ads team going through everything before i found the disaster that was how this was being recovered locally and i figured it out and fixed it turns out the bug came back recently because somebody deleted the code because i had i bitched a lot when this happened like we need to re-architect this because it was built wrong and the response was you should stop being so mean so i shut up about it and quit a few months later and then they reverted my fix that i wrote unit tests for specifying in the unit test hey if these fail it's because you deleted some very important code make sure you know what you're doing they did it and they had another outage where ads were running in the middle of big plays during big streams because this was a poorly architected thing your bad react code has [ __ ] consequences into the team that i'm talking to right now get your [ __ ] together and stop subtweeting me [ __ ] sorry i'm a little angry i'm really mad that they think they can talk [ __ ] behind my back and that they won't get to me and they're this bad at coding yeah no i'm talking [ __ ] now sorry guys sorry the good ones know who i'm talking to the bad ones know it more get your [ __ ] together creator org anyways the reason i went on that rant is because the effect which was yeah the effect that we wanted to run is when you click the button an action should occur that needs to be bound to the clicking of the button not the rendering of the component and that failure was john you need to chill you're going to lose the best hair title fair point let the content flow through yeah bind your actions to your actions when somebody clicks a button that's when the action should occur not when you mount a different state that mounts a different button that has a use effect that then fires your action that's like five levels of of [ __ ] that you've consciously chosen to to work in because you like components too much like let your buttons be buttons let your functions be functions stop putting actions in your component logic cool maybe i don't like use effect that much so if x can or effects happen outside of rendering uh but soda not beer my bad problem with this if you start putting your effects inside of event handlers then you get into some messy uh situations where it might look like this um again my slides aren't showing all the slides but uh this eventually expands where you have is loading you're doing set loading set error you know you might do a fetch inside of there and you might do a lot of state management and all of a sudden these event handlers become multiple lines long where you really want to keep it just to one line so um in react a popular mantra is that ui is a function of states and so that whatever state you have it's going to render a ui and so we could actually derive this whole idea which relax popularized where given the states in an event that happens now you have a next date so the problem with this though is that you really have no place for effects it doesn't really fit into this function so where do effects happen well um you know we have many different answers from many different state management libraries like middleware callbacks monads i think but the real answer is straight state transitions and it always happens in state transitions and so the reason for this is that the only way that you could trigger an effect is this lecture in front of a cemetery this was somewhere in oakland if i recall yeah mo nuts i got a little triggered when he said monads something needs to actually cause that effect to happen effects can't just happen out of the blue and so typically if you catch it within the event handler then you know that's that's the a great place for i i really like this your state changes should happen for a reason and the reason shouldn't be another state change it should be an action of some form and so typically if you catch it within the event handler then you know that's that's the a great place for an effect so instead of just this whole idea of a state and when you get an event you get a next date we have states plus events equals next date and effects so this is called managed or declarative effects where um by the way if you have your bingo cards out i am talking about state machines so you could mark off that box um but state machines like this this model over here of um you know state and events equals next and effects this is all you need to understand when um talking about a state machine like these this is how state machines work so in a state machine you have an initial state uh and you might slay enjoy thank you for the sub transition that's where you define the effects so you could say when this event happens like load then this fetch data effect also happens and so um you know that equation just becomes a really convenient way to define hey this effect is supposed to be x title is reactathon 2022 day two live stream they haven't split this into vods yet so we're skimming executed when we transition it's about use effect being bad and these effects aren't executed by the way they're basically handed off to something that's going to interpret that and say okay i'm going to save the state and i'm going to take these effects and i'm going to execute them so your state machine these transition functions still remain pure and um so there's uh let me see your functions features with state machines as well you can see that the fetch data is happening in both the load and the reload state and um so state machines have this idea of entry exit and transition actions as well so it's pretty convenient um so where how can we do this like how can we eliminate use effect and actually execute effects while we're you know um dispatch or like just handling events so i have this uh hook here called spicy disc patching no i'm not gonna make it in npm live pay me before you follow i'm just putting it on the screen to be spicy uh but our dispatch here is a little bit fancy because inside the dispatch itself we're getting the next states and we're determining which effects should be run give given the state the events anymore so basically that's the transition because those are the three parts of it you have turbo should you still sub yeah and um we're executing those effects now this is uh you know this is left as an exercise to the reader uh but you could just you know say okay when the state is loading and i just came from the idle states then i'm going to execute this effect um but the main chip wheel thank you for the sub within the dispatch itself and so um when you think about when you dispatch stuff that's happening right in the event handler all right so where do action effects go event green's frozen oh yeah i'm on the wrong scene thank you for that call out uh [ __ ] that one up for a minute not really so they really happen in these state transitions but these state transitions especially in react just so happen to be executed at the same time as these event handlers when the state is loading and i just came from the idle states then i'm going to execute this effect um but the main point here is that all this is happening within the dispatch itself and so um when you think about when you dispatch stuff that's happening right in the event handler all right so where do action effects go event handlers right technically sort of not really so they really happen in the fonts but these state transitions especially in react just so happen to be executed at the same time as these event handlers so as a step one i would say try to move all of your effects away from use effect and put them in those event handlers unless of course their um you know their synchronizing effects or activity effects so um a better way to manage this at least in my opinion is to use external stores and so i don't really recommend i love this hook by the way using external store but i don't recommend you use it directly so um using external store is really cool because you have a component and this component can communicate with a store in which it could sync with it and it could also make me go crazy for sure might have methods such as dispatch or send or whatever and this door can be the thing that both holds your state and executes all of your effects so it's pretty nice um here's an example of its username yeah it's actually pretty straightforward um you grab some store from somewhere um i know that reacts redux uses uh using external store i believe and also um x8 as well and you provided a way to subscribe and to get a snapshot distinct external story so like brand new it's only react 18 i thought interact with it in any which way you want so uh x8 of course is my library uh it's a library for state machines and state charts and it also lets you declaratively manage your effects too and so x8 is using sync external store under the hood as well this allows xd to be in total control of executing these effects so these effects will execute without you having to do anything inside of use effect and other state management and react libraries work actually the same way where basically you're delegating control of the effects over to those libraries instead of you having to do it yourself so in xdate just like we talked about with entry exit and transition actions you could find those right in your i'm just going to call it a fancy reducer it's a machine definition you could define your entry and exit actions your transition actions and even invocations which are sort of like those synchronizing activity effects that we talked about these are the ones where if you weren't using a state management library you would typically put in use effect so uh when it comes to state management you know we think about state stores we think about state updates and subscribing to data and getting new data as as it comes in and events dispatching but in my opinion this is only part of the picture you know we also want the ability to communicate with multiple stores um communicate with those stores like send events to it receive events no no am i getting ads on youtube now i don't have the most important part of this talk and also um you know maybe even handle finite states and transitions any of my youtube mods around right now or do i have to deal with this talking about state orchestration so um i'm going to go over a couple more patterns here um sometimes it's actually really hard if not impossible to find maple made a good point that uh there's too many esoteric concepts within x state and usually we're fine in plain logic written with the library like mob x or zestand or jodine there's plenty of others as well i find that we were actually pretty deep into planning an ex-state rewrite for our state machine we decided last minute against because we were going to try a different provider and then gave up on that as well and i just got angry and went and redid the whole thing and just stand over a weekend i found that my problem with x state and this feels like both unique and petty is that our complexity and state isn't at this higher level which state are we in because the state you're in is connected or disconnected but the connected state has a bunch of chaotic sub states within it like is video enabled is audio enabled how many users are there what qualities do those users have on is one of those users pinned what are the subscription states for each of those users which users should be subscribed etc one of the the gotchas i found when we were using this architecture was that building the relationship between which tracks we should be pulling down from our server and which track should be rendered in the ui was annoying because it meant that we had to at a very high level determine which users would be rendered and then at a very low level update that up the chain whereas if i manage subscription state as close to where the feed is rendered as possible it made it significantly easier for us to reason about which tracks would be subscribed and if we don't want a track subscribed we can unmount that component and it's worked very well of you having to do it yourself keep getting this free content just like we talked about with entry exit and transition actions you could find those right in your i'm just going to call it a fancy reducer it's a machine definition you could define your entry and exit actions your transition actions and even invocations which are sort of like those synchronizing activity effects that we talked about these are the ones where if you weren't using a statement so http junkie thank you for the sub i really appreciate it when it comes to state management you know we think about state stores we think about state updates and subscribing to data and getting new data as as it comes in and events dispatching but in my opinion this is only part of the picture you know we also want the ability to communicate with multiple stores um communicate with those stores like send events to it receive events from it effect management which is um you know the most important part of this talk and also um you know maybe even handle finite states and transitions and this to me seems like state management plus plus now we're talking about state orchestration so um i'm gonna go over a couple more patterns here um sometimes it's actually really hard if not impossible to find that event handler and to execute an effect only once in there so what you have to do is you have to do this weird uh what's called a ref flag and so you would say uh is this executed yet you would have a ref in there i find i almost never need this like if one of my dependencies changes i do want to rerun the effect and if i don't i'm probably putting something of value in the ref not a boolean like one example for this is connections where if i'm re-rendering i have a connection ref that i put the connection in when it's made and then i check in the effect is there a connection if so do something else if not make a connection and drop it in the ref i think we've handled this already and if it's already executed you're not going to um you know execute it again so you do your thing and then you set executed ref.current is true and so um that way when your effect reruns because of react 18 doing its thing or some other reason it's going to check that flag which is going to be stable so that flag will stay true even when your component virtually unmounts and remounts and so this will allow you to only run your effects truly once so um you know just think about this as like is it a virtual unmount remount or is it a virtual re-render because if it's a virtual unmount remount this ref wouldn't be stable i think he's just wrong on this one i'm pretty sure it's a fake re-render not a fake unmount remount an escape uh i don't know what's going on with 18 i'm not going to pretend that i do he wants to use effect and so you might be looking at this flag and thinking okay this seems like a really big red flag like why am i using a ref in my effects but honestly this is the least awkward way to do it so yeah and also what about fetching data you know we have fetch on render this is one of the most popular uh you know use cases of use effects we have used query use swr but i'm here to say that fetch on render is actually a lie you know sorry to those libraries react query swr because you're supposed to or at least the react team wants you to really move towards a pattern of render as you fetch and so suspense is really really i'm not mad i'm just disappointed that scene really really great for this um and so this means that you're going to find that event handler that we talked about you're going to start fetching in there and all you have to do is read that in your components and make use of suspense or you could ditch the usefx altogether and use frameworks such as remix or next which make it really easy to just get rid of these um they didn't pay me but no they don't they will hopefully i'll talk to them all right you know what i'm gonna wear some egg on my face [ __ ] it remix makes this slightly easier next does not make this easier neither give a good data hydration story and neither solve a lot of async problems that aren't network this should use query be used at a component level to fetch all of your critical data probably not but [ __ ] like there's a lot of value that you can get out of use query and maybe not use swr all i might use swr is just kind of bad like it's it's a use case that i don't run into almost ever and if i did i would probably want to hydrate the data better and fetch it earlier so yeah use swr is not something i recommend often use query as a way to to orchestrate data throughout your application and fetch async stuff yeah maybe we'll just put it really well pet peeve people pretending every react app is just a front end to a database that does http gets and nothing else i've gotten into so much [ __ ] for saying that some of these frameworks feel like they were architected by somebody who like exclusively builds like dashboards and like like e-commerce sites seriously like i i i'm not i'm legitimately not trying to toot my own horn i don't think what i am doing is better and i don't think i'm better for doing what i'm doing but holy [ __ ] building a video application with like all these crazy dynamic behaviors and all even like a virtual cam infinite loop in like building an app that has however many like infinite actions in here using freaking like built-ins infinite use effects and framework primitives that don't do what we need them to is just not a viable path and as somebody just said in chat wow the site is fast you're damn right it's fast it flies and it's actually slower than it should be right now because i have a huge state overhaul that makes it way faster coming very soon people are treating this like it's the minority i totally agree and i i will admit that in terms of the web this is the minority the vast majority of websites are mostly static that's that's the reality of the web however and this is the part we don't acknowledge enough the majority of web developers are more split than that because a web app takes more developers than 10 websites i know that because i maintained 10 websites myself and i had to build a company and a team to run our web app it is significantly more and significantly more edges period to build an app than a website and if we keep pretending every developer is just building websites then react's going to look pretty bad because react is for apps too and a lot of what i build is apps and needs to work well for application experiences the speed of this website is not replicable in remix period sorry the speed of this web app is not replicable in remix without a lot of effort anyways um they they didn't pay me but they will hopefully i'll talk to them all right so uh just to give you an example of like the code that you save with fetching data this is a typical thing that we do and honestly this is what i taught at react training workshops where it's like okay you have to set this awkward cancelled flag and then you fetch some resource and then you um if that if it was canceled due to the cleanup then you have to make sure not to run the effect again uh but look at suspense this is all you need and so you know i know you love your use query and use swr but really moving towards suspense just makes things a lot lot easier all right so speaking of code save this is our use effect example this is when we move it into an event handler and so uh when we take this and we say you know what i'm going to let these effects run in some store that both manages my states and manages my effects then this shrinks down to this and all you're doing in that event handler is sending an event that's all you're doing and so it doesn't matter which library you use to do this um obviously x8 handles effects reacts has a new actionlistener middleware that does it and i'm sure other state management libraries do it um it's just uh do actually i wanna so what i don't like about this one oh yo alastair i lmg uses our tech for their shows for whenever they have a guest call in for the weigh-in show they're using our stuff love lmg luke's a good friend yeah what i don't like about this example is this logic of the submit data then catch all the error handling in this this still exists he's hidden it under the use form store if we were to use mutation this uh do i have to react code sandbox once again this is pseudocode because i don't feel like it's in the package const mutate data equals use mutation and what's it called submit data give this data cool i'll even have mutate data error and using react query in particular in this case use mutation from react query we don't have to write something external we don't import anything but use mutation which is a very consistent understandable pattern i'm not importing some magic i'm importing something pretty standard in the code base especially if you're already using it you pass it a function that does a promise in this case so submit data we're assuming this is a promise that does something it can throw if it fails it can return data if it succeeds and then in the button here we have like button on click equals uh mutate message test button cool did one too many of those i think yeah so if we had react query here then this would give us the mutation which done here is the on submit we put in a form instead same difference we have the error state still because it's inlined using the muse mutation call and we have all of the logic still living here we haven't hidden it behind the scenes in a weird import i can still see what we're calling here i don't like this i i think this is another one of those bad faith examples where he intentionally hid the red and yellow under here if you were to compare this left example and his example with the actual source code his with the source code would actually have more code than the example he's comparing it to on the left and this use mutation example this is all of the code we're done here thank you for the sub good barn really appreciate that thank you guys again for hanging out i'm pumped that i can just like watch someone else's video and shout and still maintain almost 200 viewers across platforms thank you guys so much for hanging out here and i'm sure other state management libraries do it um it's just uh like actually my my call to action for these other state management libraries is to realize that effects are state management they shouldn't be treated as this other thing so don't put side effects inside and really really manage your effects with your state management you could do it in a declarative way you could do it in a pure way but just that notion of saying here's the effects that i want to run due to this date transition that's really powerful and that's actually going to help you with testing as well so in summary sorry use effects is for synchronization not for effects even though synchronization can be considered an effect that's not the main purpose of use effect uh state transitions are what trigger my point is biased and so is his sure everyone has bias the difference here is i'm not hiding things underneath sketchy imports i'll show you guys my code and i always do probably to a fault i show you guys my mistakes often too yeah it's the presentation is what i'm frustrated with thank you maple for for drawing the distinction there there's a lot of points david makes here that i actually like strongly agree with the problem is he is presenting it in a way that feels as though he is hiding the complexity of the topics he's touching upon to strengthen his point rather than acknowledging the complexities inherent to some of the solutions he's recommending as well as the alternatives that he's glancing over there's a lot of yeah you you can't oversimplify to try and sell something yeah that that's the point i really like so something i strive for at ping like our product is solving a complex problem and is our goal to make the solution as simple as possible but there are things we don't do and we have to acknowledge that and there are things that we make harder and we have to acknowledge that and i go out of my way to do that acknowledgement constantly because it makes you intimately familiar with those pain points and so much more likely to how do i put it yeah you solve the problems you talk about the most you ignore the problems you're scared to talk about the most and this feels like there's pieces that he hid underneath to make his points rather than using them to strengthen his points by improving the the angle of attack and that's why i'm not as fond of this overall i agree with the core points and i very much agree with the overall goal here in particular abstracting as much state out of react as possible and being more focused on actions rather than effects and side effects of effects that's a really good point and state transitions triggering effects yeah good point overall and effects go in event handlers so find the event handler that triggers your effect and put the effect in there also render as you fetch with suspense and model effects with state machines so with that thank you reactathon cool good talk overall i'm happy i watched this i'm really happy that uh we had here or that i took the time to watch this year hi i can't really say i'm new to this youtube thing anymore i've been doing it for a while but i haven't been doing the youtube part very well so please like this video subscribe share with some friends if you can leave a comment just ask a question or something whatever it takes but please subscribe and watch the video and like it i know it sounds dumb but it does help a ton and we're on that grind baby thank you




## ⚛️ Is it TOO LATE To Learn React_ - 20230106
is it too late to learn react I feel like it's been around forever and people are talking about all these new things is it still worth learning like why wouldn't I go learn solid.js or svelt aren't those going to be all the rage well probably maybe hard to know for sure but if I know anything without question it's that the time you spend learning react will not be wasted it's rare that a technology comes out that shifts how a whole type of development is done and react has changed how we do web dev all of the new Frameworks that I just mentioned and all of the projects that I see people working on are either using react or something that learned a lot of lessons from it and I think you can learn those lessons too even if you happen to end up at one of that like point five percent of companies that is using solid or spelled most companies are using react right now and even if that changes the lessons you learn will still apply surely most of the teams I have hired for have been react teams but way under half of the engineers I've hired new react when I hired them it goes through the other way where a lot of Engineers are hired at companies that are using view or using spell they're using these other Technologies because somebody there was a huge advocate and really excited about them and if you show up as a react developer that very well understands reacted how to use it and you show about a company that's all in unsfelt the person who made that decision isn't going to not hire you because you picked react they're going to be so excited to get you on this felt hype train that's going to be their mission all they're going to think about is how do we convince you to get on the cell type wagon with us the things you learn from react are the same things that Rich Harris learned from react when he started creating svelte these lessons are no less valuable just because other Frameworks are gaining popularity and interest on top of that there's been a better time to learn react purely by the state of the education tools and resources it's hard to overstate how incredible the new beta react docs are these are available at beta.react.js.org these need to ship asap I'm so hyped from these docs they were created by Dan abramov Rachel Lee neighbor so I had on the show not too long ago and a ton of incredible contributions from some of the smartest people in the JavaScript World these new docs have helped my understanding of react with how well it breaks down the concepts within it highly highly recommend a thorough read through both the quick start as if you're a newer Dev going through the quick start to see how react recommends getting started as well as the deeper thinking and react the describing the UI series the interactivity section the state section and very importantly the Escape patches section that help you understand when not to use things in react when you don't need to and also how to break out of react when you do the quality of this documentation the language they use to write and describe things and the amount you will learn going through these in building apps by using what you learn here is incredible and I cannot recommend it highly enough before these existed learning react was very painful now it's kind of painful still not like done mostly the API side of things but there's never been a better set of resources to start learning any web technology much less react and it is far from too late to start learning there will be jobs in react for decades this framework is not going anywhere anytime soon and even if it did the lessons you will learn by understanding it and Building Things with it will carry on well past the life of react itself so seriously if your goal is to get a job if your goal is to understand web Technologies or your goal is just to build a cool website there's never been a better time to learn react than now if you're not already subscribed to the channel it's free the button's right there way less than half of the people who watch these videos are subscribed which is absurd please get on that and if you haven't joined the Discord yet what are you doing t3.gg Discord awesome little community