## It’s time to embrace the AI - 20250609
i don't know if you guys have noticed but I've kind of become an AI bro i never thought I would see the day you know my old videos I was one of the biggest skeptics of all this stuff i just didn't really see the value hell when I first tried Copilot it annoyed me because it was overriding the TypeScript autocomplete that I thought was more accurate and reliable that's changed massively over time from falling in love with cursor and the power of their tab autocomplete as well as command I command K and all the other cool things you can do to building T3 chat and seeing how useful these new agents and models can be to all the stuff that I talk about here on the channel ai has really changed how I think about things and more importantly how I build things and now when I have conversations with my friends many of whom are still skeptics of AI I almost feel a bit insane it's just like I was I was right there with you i saw these things they didn't feel like that big a deal and I tried them and they weren't that big a deal and I moved on and then I gave it a more serious go when the tools got better and now it's so clear the future is very different than we previously thought i'm not saying AI is going to come in and replace everything i'm just saying it will meaningfully adjust the work that we do as developers in a way that we should talk about this is a thing I've been feeling for a while so when I saw this article pop up on HackerNews I really wanted to talk about it i started reading it immediately realized I had to share it with you guys so now we're doing a video this article posted on the Fly.io blog i love Fly one of my favorite ways to deploy servers that said they are not sponsoring this video in any way shape or form we do have bills to pay though so a quick word from today's sponsor and then we'll dive into why all my AI skeptic friends are insane you know what's worse than reviewing good code reviewing bad code you know what's worse than reviewing bad code reviewing your own code and that's why I'm so thankful for today's sponsor Code Rabbit that's a PR that I made oh yeah that's kind of the point i put up a PR that's meant to handle some stream error stuff when you're resuming a stream on T3 chat and I wrote a very simple description we'll keep long timeouts from happening code Rabbit summarized the PR for me drew up a whole walkthrough about how the changes work what files they affect and even a sequence diagram describing the order of events that's super handy for these more complex workflow changes but more importantly it went through the code and left actual comments on things that I should change it even catches bugs in my editor right now I have a change I was working on and I used their new VS Code extension to review it before I even put up the PR and it caught two mistakes this is so useful most of the sponsors I talk about are a slight improvement to the way you might be doing things code Rabbit's actually changed how I think about code review and in a world where AI is generating more and more of our code it's so helpful to have a tool like Code Rabbit keeping you from shipping mistakes code Rabbit's probably prevented us from shipping 40 plus bugs to T3 chat so if you like T3 Chat you should thank them for it check them out today at swordv.link/codabrabbit before we go too far I want to shout out Thomas for writing this there were a couple people who were flaming him for this article that's actually part of why I saw it they were mad cuz he's a very wellrespected person in the data world but he is now coming around to AI and a lot of data people funny enough are anti-AI so they've been mean to him about it i'm thankful they were though because it made it so I saw the post and immediately started falling in love with it and wanted to share these points with you guys let's dive in a heartfelt provocation about AI assisted programming tech execs are mandating LLM adoption that's bad strategy but I get where they're coming from this is something I've been seeing more and more of like companies say like we need all teams to introduce agents to their workloads yeah some of the smartest people I know share a bone deep belief that AI is a fad it's the next iteration of NFT mania i've been reluctant to push back on them because well they're smarter than me but their arguments are unserious and they are worth confronting extraordinarily talented people are doing work that LLMs already do out of spite i very much agree here i want to talk about the mania bit first and foremost cuz it's very real i don't know how many of y'all were around or online for the web 3 thing we're going to go a bit further back to the GraphQL bubble this one isn't talked about a whole lot cuz it doesn't seem like it was that big a deal but in the moment it was very real graphql was an alternative way for us to think about how we structured our APIs and access data from different devices and clients usually user side clients so if you had a complex application like Facebook and you wanted really complex relations in it like you had a post that had comments that had commenters and the commenters had their own relations of like are they a friend with you or not and all of these different pieces a traditional REST endpoint is very illflexible and doesn't do a great job of exposing the data in a way the client would benefit from and GraphQL is built at Facebook to make it easier to define your APIs as a graph and then access that data in your clients so that the client could figure out what data it needed without having to define new endpoints every time they wanted to change the UI slightly and it was revolutionary for companies that had thousands of engineers and really complex graph data problems it became so ubiquitous that it was basically the standard for how applications were built for a few years and out of that a bunch of different startups happened including things like Gatsby which was GraphQL for blogs i you not it was really a static site builder for React but what it effectively was an implementation is a GraphQL API for defining static pages nonsense so you had Gatsby for your blogs you had GraphQL which was a database to GraphQL tool to like turn your existing database into a GraphQL endpoint they eventually became Prisma and that's also why Prisma was so slow for a while because it was still GraphQL internally we had wonderraphph i still can't really describe what they do and I doubt they can either they call it GraphQL module federation so you can split your GraphQL stuff across different things seems like a problem for five companies that would be pretty legit for those five companies there was Aurora which I hated i have my whole diagram like GraphQL goes here not here where people were trying to put it in front of their databases there were so many of these there was just this huge window of GraphQL focused startups because it seemed like we were moving off of traditional APIs and to GraphQL so we would need the Postgress of GraphQL we would need the AWS of GraphQL we would need the data dog of GraphQL we would need all of these different things for the GraphQL world but it turned out GraphQL was only actually useful to a very very small subset of the world these really big Fortune50 companies that had these complex data architectures as such the best case for most of these companies is they could have like 20 customers there was no world where these should have been VC funded and should have been as huge as they were if you have been around for any of these bubbles GraphQL Web 3 NFTts even like the old dot bubble back in the day where this thing was so much better than what we were used to or had so much potential that we overreacted and pretended everyone would be using this thing in the future you'll be inherently skeptical and I was bit by this too i was in Y Combinator during the NFT wave and a ton of the companies in our batch were all doing weird web 3 stuff i knew four different companies that were doing OH for web 3 and I only knew one company that would be a potential consumer for O for web 3 they were inventing things no one needed for products that didn't exist it was so common and if you've been around for these different bubbles you're going to be skeptical of anything that smells like one so the fact that I can name 10 companies that are doing agents as a service for writing the code and hosting the agents for you all of which are just doing something you could do yourself on Cloudflare relatively easily i'm not saying Verscell is a bad business i'm saying having 50 versels would be a bad thing and the fact that we have hundreds of these companies all doing the same thing for a market that's barely started shows that there is a bubble here for sure and if you immediately treat the whole thing as bad when you see a bubble I understand if you saw this GraphQL bubble and said "You know what i'm going to avoid GraphQL entirely because this seems like a hype machine that isn't doing anything." I would understand the problem is AI is actually really useful so despite the fact that it is a hype bubble there is real value if you were to like graph this to be like you have value as a chart and you have hype as another bar like how much are people talking about it how much are people making companies about it your hype to value ratio i would say GraphQL was something like this the value it was there for really big companies but not that much and the hype relative was huge this was destined for failure right when it happened there was no world in which the low value prop of GraphQL would ever be worth the amount of companies and time and money being spent creating all of that product so for GraphQL these numbers were bad how about web 3 i'll wrap NFTs into this it's hard to measure the value of web 3 stuff relative to GraphQL i'm going to be controversial and put it slightly higher because I still conceptually really like Bitcoin i think the idea of a currency that is mathematically proven and not regulated by a government is really cool and awesome and I've if I was to have held all my Bitcoin instead of spending it like a currency I wouldn't be a YouTuber i'd be a billionaire living in the middle of nowhere but I would spend my Bitcoin cuz I liked it as a currency when it stopped being a currency and started being a thing you would hold and trade and put crappy JPEGs into it all fell apart really fast so I'm probably going to have to change the scale of things here because the titles are too low the web 3 hype was absurd even if the value was slightly higher the hype was to a level that was unfathomable and obviously very very bad and could never live up to what people wanted there are cases that make crypto cool like stable coins for people outside of the US and whatnot but nothing compared to the hype machine that I saw in the funding rounds that I watched happen it was a show so what about AI here's the problem ai is at least as valuable as we pretended web 3 was and if the hype levels were the same as they were for web 3 I would actually say it's reasonable for how useful this stuff is unlike NFTTS my mom actually uses AI to ask questions and answer things for her nftts being a feature on Twitter was cringe and dumb ai giving you better answers on Google search is actually kind of useful so I would argue that by the end of next year most internet users will use AI in a meaningful way at some point on the average day unlike web 3 and NFTs which most people will never encounter at any point but this is the problem because AI is actually useful the hype has gone beyond what my chart can possibly represent so if you are judging these things based on how absurd the size of the hype is you're going to miss out because previous hype bubbles being way bigger than the value that was added was bad this was terrible the problem is we finally have something that's actually really valuable that's coming out of these places but since the hype machine's gone way beyond belief many people are treating it the same way they treated things before and that sucks and that's what I want to be here to try and do is I want to both make fun of the people claiming they have 12 agents writing all their code for them but also point out that tab completing cursor will make you much more effective at your job in using things to give your editor more context on the work you're doing and maybe the occasional background agent with something like Devon or Codeex to work on something in the background while you're doing something else these things can actually make us more effective as engineers a lot of the work we do is tedious and boring this can make a lot of the tedious and boring work go away or you can keep doing it out of spite which is what the article said i have a feeling we're going to have a lot of fun as we go deeper in this all this is a bold statement from the author all progress on LLMs could halt today and LLM would still remain the second most important thing to happen over the course of my career bold ass statement i like this caveat though i think this is really important he's only discussing the implications of LLM for developers for art music and writing honestly even I am the same place here i don't know what the impact of in those fields is going to be i am disappointed that people like AI music at all cuz whenever I hear it it's just the cringiest most stupid using AI to do some cool things in music is fun like using it to redub a voice or rip a vocal track out of an old song so you can use it for something else the same way Copilot can assist us in development i am excited to see art tools with AI assistants like that but we're not even close to there yet overall it'll be interesting to see where that all goes but this is not meant to be a discussion of how AI changes the arts this is a discussion of how AI changes our lives as developers the author qualifies himself a bit here they've been shipping software since the 1990s i was born mid1990 so I am much less qualified than they are in that regard he started out in a boxed shrink wrapped C codebase survived an ill-advised C++ phase lots of Ruby and Python tooling some kernel work a whole lot of serverside C Go and Rust however you define serious developer he qualifies even if only on one of the lower tiers sounds like a pretty high tier deer especially if they're at fly.io right now that team is cracked he knows his stuff this is not a random person who's vibe coding their way through life who just learned how to code a year ago and doesn't even have a degree this is someone who's been doing this for longer than most of y'all have been alive myself included yeah some kernel work it says a lot like what yeah level setting first we need to get on the same page if you were trying and failing to use an LLM for code 6 months ago you're not doing what most serious LM assisted developers are doing right now there's also a call out here of god forbid you were using co-pilot 2 years ago cuz that was not representative of what AI was capable of this is even crazy to me like just a few days ago when I was working on the StitchBench stuff I would say the first pass on it was 50/50 between me and Claude 4/ Tabcomplete/ all the other AI stuff for just the script that ran all of the chats the second part which was the using Gemini to analyze all of those scripts that file is 500 lines on the dot i did not write a single line of code in this file this entire file was written by command I the generator thing here this was agentically written by me giving a basic description of what I wanted it to do and it made it work first try it even wrote the system prompt for me i wrote none of this code that is crazy the fact that I wrote a giant file in a codebase that I actually kind of cared about i wanted this to be a good representation of how to run these types of tests that's insane the fact that it could pass my bar run correctly i could have written this myself and I started writing things like it before do you know how useful that is that I could have this generating in the background while I was responding to tickets with T3 chat cuz we were in the middle of the migration stuff while I was doing this it's so cool and it's not just cool it's very real and practical and this file isn't a file that's like super critical and important to things that are running in production if it was I would have at the very least reviewed it thoroughly this is a script that I'm running locally things that wouldn't have been worth doing before suddenly are because 500 lines of throwaway code went from an annoying weekend project to a single prompt that's nuts that's insane and it couldn't do that 6 months ago even i tried i was very amused at how bad these things were at that stuff we're in a different world now people coding with LLMs today are using agents agents get to poke around at your codebase on their own they author files directly they run tools they compile code run tests and iterate on the result they can also pull arbitrary code from the tree or from other trees online into their context windows they can run standard Unix tools to navigate the tree and extract information you can interact with git they can run existing tools like llinters formatterers model checkers and most importantly they can make essentially arbitrary tool calls that you set up through MCP this is the pill I have not taken just yet i did just set up my first ever MCP inside of cursor MCP tools i added context 7 because it seems really useful for getting docs for different libraries and things automatically i'm excited to see how it behaves when I want better docs for a thing it's made by Josh tried code and some of the other guys over at Upstash and I'm very excited to see how it benefits but I haven't had a chance to write any code since I added it because I've been so disgustingly busy i I will say that the word agent is still way too vague and doesn't describe any specific thing the concept is AI that is running autonomously and doing things but it is effectively AI with tool calls doing more than one request that's how I choose to think about it and explain it to people is instead of you give a request it generates text as a response it's now you give it a prompt and it will call itself it will call tools it will run multiple things it will do multiple steps it will do more than one thing to get the stuff done i like that framing from chat actually from dogpaw hat agents are models calling tools in a loop yeah that's a good way of putting it the code an agent that actually does stuff with code is not itself AI this is another important piece that people don't seem to get it's not like it is hallucinating how you have things implemented in your codebase it's calling a tool that is real code that is used to access files in the codebase so when it wants to know what files use a function it's calling a tool that uses TypeScript's IntelliSense to find where the references are or it might just be calling a GP call across your codebase for all the things that match that shape and find all the files that are relevant but it's using real code that is being triggered by the LLM using a tool call shape i discussed that in depth in my safety video if you haven't watched that I put way too much work and I highly recommend it one of my best videos in my opinion the tool calls are real code humans wrote to make the AI more effective it's not that the AI magically learned how to keep track of every file in your codebase the AI has the tools to access the right files the same way we do as humans the same way we will command shift F to find the thing we're looking for or use GP in our terminal or go to the docs to read to find the thing we're looking for ai now has code that was written by a human to allow the AI to go do those things and the code that does that is also hilariously simple it's wired to ground truth about programming in the same way that a make file is you could write an effective code agent in a weekend its strengths would have more to do with how you think about instructure builds in linting and test harnessing than with how advanced 03 or sonnet have become yeah a lot of the improvement has been since cla 3.5 the tools we build and give the LLM access to are better because 3.5 was way better at calling those tools we were suddenly incentivized to make them better but the biggest like model groundbreaking thing and the tool calling and like all this we're talking about today was 3.5 because Cloud35 unlocked all of this stuff and gave us incentives to build better tools but you could go back to the old model and still have a much better experience in cursor than you did a year ago just because the tools they built for it to have access to have gotten so much better another call out making a request on a chat GBT page or T3 chat love you guys and then pasting the results the broken code you get into your editor you're not doing what the AI boosters are doing and it's no wonder that you're talking past each other if you see these people saying AI's changed how they work they're using claw and cursor and chat GPT and all these things to make themselves way more effective as engineers then you go to chat GPT or T3 cry and you're like "Hey implement this for me." And he gives you a bunch of code that doesn't work for your setup at all and you go try it and it's broke and you're like "Wow why does anyone care i understand why you think this sucks." But the fact that some people are using all of these tools in cursor with MCPs doing docs calls and you're just writing a quick query on chat GPT you're not doing the same thing you're talking about it like you are and you just the conversation isn't happening and I I really like this call out because I think it's really important this is a piece I missed myself i was doing things the simple way and the more I've been using the the depth of it the more impressed I've been with what you can do with it i also I love this chart i've been this chart as soon as I saw it in the article it got burned so deeply in my brain that I almost used it in another conversation about entirely unrelated stuff today this is the quadrant of things based on importance and fun there are things that are fun and important there are things that are tedious and important there are things that are fun and pointless and tedious and pointless i would argue my my snitchbench benchmark falls squarely in fun but pointless but there was also parts of that that were tedious that were blocking the fun parts but then there's work that's actually really fun like changing the sync engine on T3 chat over the convex i wrote a lot of that code almost the vast majority of it certainly myself that was like a 10,000line change that was a shitload of work but then there was a tedious thing where I had to change how we were wrapping wait until calls and an AI agent could go do all of that for me i really like this framing ideally we spend our time in this top right quadrant doing the fun important things and if we can get the tedious stuff out of the way life gets a lot better lms can write a large fraction of all the tedious code you'll ever need to write in most code on most projects is tedious lms drastically reduce the number of things you'll ever need to Google they'll look things up themselves most importantly they don't get tired they're immune to inertia i can't tell you how many mistakes I made cuz I was so deep on tedious changes and 5 hours in I'm just being lazy about it and writing slop absolute garbage code the agent's quality doesn't go up or down depending on how late in the day it is that's a huge thing think of everything you've ever wanted to build but didn't you tried to hone in on some first step if you've been in the lirant phase of a new programming language you'd have started writing we've all been there where we have a new language we're falling in love with and we have the side project idea and we dive in just because we like the programming language so much or we want to learn it more but if you weren't you put it off and it slowly gets pushed back until it never happens i have a long list of those projects still myself i can feel my blood pressure rising thinking of all the bookkeeping and googling and dependency drama of a new project this part I can't relate to this is part of the fun part for me i like the scaffolding and getting all the parts together right it's just how I am but other people hate it which is why things like creating three app did so well because people just want to get started on the thing knowing the stack is good enough lms can be instructed to just figure that all out for you often it will drop you precisely at that golden moment where almost works and development means tweaking code and immediately seeing things work better that dopamine hit is why I code i have a silly example of that in my index file for the LLM benchmark this LLM benchmark runs by taking four markdown files and doing the first one then the second and the third and the fourth to a model getting a response and creating a fake message chain with that given model so I have all the way up here somewhere these four prompts i read these all from the markdown file this whole function written by Claude this function grabs all the files from the directory filters them sorts them outputs them initially they weren't coming in the right order it was coming in 4 321 so I told Claude "Go sort it by the number in the file name." So it did and it was still coming in 4 321 turns out in this case it was actually my bad code i had input message.pop instead of shift but the moment where I realized that and fixed it and then ran it and it worked that's why we do this the feeling of having a giant pile of code doing this absurd thing you shouldn't be doing being so close to it working it's not quite there and then you find the piece and you fix it and it works and you smile it's the same feeling I get when I land a really hard trick on a skateboard it just it just feels good and AI can make it way easier to get to that point because sometimes you can go over it and like make the thing just work for you but the fact that they can drop you right there right before the thing works and you can still use your experience as an engineer to do that last piece it feels so good it really does and I feel like I get more of those oh it works now moments than I used to because all the things that lead up to that moment can for the most part now be automated not all of them but a large portion a significant part of that work can now be done with these tools the concern I have is when people miss that and they expect the AI to fix it for them the thing I always say is rather than asking the AI to fix the bug ask it about the bug or what might be causing the bug but in this case I just read the code because I had it fixed the thing I thought was the bug and as I was reading through I noticed the mistake but ideally you're not relying on the AI to find everything that's wrong for you you're relying on the AI to help you scaffold the environment where the thing can go wrong and then you fix the thing inside of it it might be smart enough to know what the recent changes were that's just a running backwards what might be causing that looking at your code I can see the issue it's a problem on line 210 where you're using pop i could have just asked the model and it would have solved this for me but I didn't because I wanted to solve it myself but that's the fun part the detective work to figure out what's wrong and sometimes the AI will be wrong about it too and that's fine but like all of this is so unbelievable to me that things like this are this good now is just crazy there is a downside though sometimes gnarly stuff needs doing but you don't want to do it so you refactor unit tests soothing yourself with the lie that you're doing real work but an LM can be told to go refactor all your unit tests an agent can occupy itself for hours putts with your tests in a VM and come back later with a PR you listen to me you'll know that you'll feel worse yak shaving you'll end up doing real work this is one of the craziest things for me is a lot of the stuff I would do like oh fixing type errors and these different things or cleaning up our weird test cases if we were doing more unit testing than we currently are what's left when the AI is doing all that stuff is the real hard work there's actually something I've talked a lot about with the Devon guys where a lot of people who use Devon which is the like AI agent that you tell go fix this issue in Slack and it will go do it and put up a PR we're not using it yet for T3 chat because things that we would trust it to do like fixing our tests are so easy to do now that we just do it in cursor ourselves we just command I say go do the thing and it usually gets it right first try we read it we run it locally we push it we're probably at the point where we could start doing it with Devon but now it's saving us 10 minutes of work instead of the four hours that it would have been doing it all yourself before and you would have felt really good doing that work this is important keeping the code base pristine no it's not it is but it's not and now these tools make it easier for us to generate the busy work instead of doing it to feel busy this is going to be the real risk with jobs too i don't think a bunch of people will be fired because they're doing nothing but maintaining unit tests and now AI is fixing it for them but I do think teams are less likely to hire if the average employee can do way more work and now everyone's favorite counter you have no idea what the code actually is i did not expect to be called out here are you a vibe coding YouTuber can you not read code if so astute point otherwise what the is wrong with you okay i I love this author i love this so much you've always been responsible for what you merged to Maine you were 5 years ago and you are tomorrow whether or not you're using an LLM if you build something with an LLM that people will depend on read the code in fact you'll probably do more than that you'll spend 5 to 10 minutes knocking it back into your own style lms are showing signs of adapting to local idioms but we're still not there i can't tell you how many times I have had code spit out in these agents it is just not prettier formatted or does weird things I don't like with casing and naming variables and too many comments and all that i usually will go clean it all up to go back to this codebase for example the index file which is the actual thing that runs most of the stuff I combed over this a lot analyze snitching i didn't write a single line in this is their style i did prettier format it when it was done but I didn't write a line of this code if I wanted to make changes to it I'd probably go fix it first there are people who are anti-code review and I've always found them insane but I will say if you're anti-code review if you think everyone on your team should just be able to merge to main without anyone looking at the changes don't use AI i don't want you to be more effective at your job i want you to keep suffering in silence in your corner with no users those people are absurd they show up in my replies all of the time when I talk about code review culture stuff because I think code review is incredibly important it is essential to how everything I do ever in my career has run and even like Uncle Bob says it's silly and dumb and I just I I think those people are mad all of that aside review your code whether a co-orker made it you made it or an LLM made it code review is important you should do it ah people complain about LMG generated code being probabilistic i've I'll never pronounce that right just go with it it's based on probabilities it isn't it's code it's not Yak output it's knowable the LLM might be stochastic but the LLM itself does not matter what matters is whether you can make sense of the result and whether your guard rails hold massive this means more than ever things like TypeScript and good type definitions are important because if the LM generates code that doesn't match your type defs you know the code's less likely to be right and you're probably going to try and figure it out and fix it i will also admit as much as I don't like to unit testing and test-driven development might make more sense than it used to as well i hate to admit it but if you have a 10 line of code test with a basic input and output and you're confident that if that passes the code is right that is really useful for these agents especially if they can run the test and see if the output's right or not and then rerun again if they change the code when it's not more on this someone called out how nice it is to use tanstack start and tanstack router which are still very new TypeScript experiences just tabbing away in cursor or whatever ID you're using how are LM so good at it while it's still quite new it's because it's designed with types and TypeScript that's huge the fact that the type definitions are all inferred top to bottom and give you this information in the IntelliSense like system in your editor means the AI agents can see it and use it while they do the work and the output is more likely to be correct or at the very least you can see when it's wrong and go make the change you should have systems to identify when these things are breaking in your code if you don't fix that first and once you fix that go try the AI tools again because you might be surprised if I was living in a vanillajs jQuery codebase with weird bindings to and from everything I would not be comfortable command eyeing and telling cursor or whatever other tool to go write a bunch of code because it might just not work and it'll be much harder to notice but if you have decent tests or better you have really good types those guard rails will be a very useful thing to know if that code is or isn't functioning reading other people's code is part of the job i would argue you should be reading more code than you're writing on average the fact that that isn't the case terrifies me because it means inherently the majority of code isn't reviewed if you are not reading more code than you are writing in a given day and all of your co-workers are in the same boat that means there is code merging that hasn't been read and that is terrifying fix that review your code review a lot of code go out of your way to review too much code you should feel sick of all the code you're reviewing if you don't you're not reviewing enough if you can't metabolize the boring repetitive code that the LM generates that's a skill issue on your part how are you handling the chaos human developers turn out in a deadline yeah if you think repetitive code generated by Claude is bad you haven't seen the slop I have seen when a deadline's coming up the last month or so Gemini 25 has been my go-to their go-to i'm on Cloud 4 now almost nothing it spits out for me will merge without edits i'm sure that's a skill issue to getting a state-of-the-art model to oneshot a feature plus merge but I don't care i like moving the code around and chuckling to myself when I delete all the stupid comments i have to read the code line by line anyways very very real i when I'm working in my real code bases and I let the AI generate the first pass it's just that it's a first pass it's a starting point that often actually works and I'm going in and fixing things and what's funny is I've actually worked with my team like this for a while where I will do a really crappy first pass on a thing to show what I expect and how I expect it to work put up a draft PR for my team to see sometimes they'll take the code make some changes and merge it sometimes they'll see what I was doing close my PR and go make a better one actually doing the stuff all of these are awesome i support all of these workflows and if you treat the AI the same way you'll have a really good time if you don't if you expect it to do everything for you you're just lazy what about hallucination if hallucination matters to you your programming language has let you down i love this author oh I was touching on that earlier but they killed it agents lint they compile and run tests if their LLM invents a new function signature the agent should see the error they can feed it back to the LLM which says "Oh right i totally made that up." And then it tries again you'll only notice this happening if you're watching the chain of thought log that your agent generates don't do it this is why I like Zed's agent mode it begs you to tab away and let it work and then pings you with a desktop notification when it's done i didn't know it did that that's actually really cool i'm sure there are still environments where hallucination matters but hallucination is the first thing developers bring up when someone suggests using LLM despite it being a more or less solved problem but the code is shitty like that of a junior dev does an intern cost 20 bucks a month because that's what cursor costs obligatory i'm an investor in cursor account for bias there but cursor windsurf zed in and their agent mode co-pilot inside of VS Code and all the crazy stuff you can do with that there all of these things have gotten really really good i have an intern that I'm paying a lot more than 20 bucks a month and he does incredible things but he's also using these tools to do those incredible things so it's yeah the the fact that you can get code that is of the same bar as a junior dev but most importantly you don't feel bad yelling at them when it sucks because that's the worst part of a junior dev is the fifth time in a day they do something stupid you feel bad because you you know you're demoralizing them saying "Hey that's not good enough hey can you try that again hey we can't merge that." It feels bad and it feels extraordinarily bad to close their PR cuz it's not good enough an AI will not give a if you close their PR an AI will not give a if you tell it it needs to try again an AI will not feel personally about it and that is awesome it's like an intern that is way faster knows where everything in your codebase is already and you can tell to do whatever you want over and over again and won't get burnt out or tired of it and you won't feel bad telling it to off because its code sucks because it's not a person it's an AI a big part of being a senior dev is making less capable coders productive be they fleshy or algebraic i love this article man i talk about this so often especially with like companies that I'm advising they'll often insist like we can only hire senior engineers because junior engineers write bad code and they take things down what you're saying when you say that is that you're a junior engineer experienced engineers aren't writing better code than juniors they are building better systems than juniors they are building systems that are resilient to the changes that these less experienced engineers would make i'm going to say a bold thing and I am sorry to everybody affected by this one i am still the best developer at Ping julius is giving me a run for my money i'll give him credit there but I am still the most like in then understanding of how all the parts come together and the system design that makes T3 chat and all the other things we build function other than upload thing i don't know about how it works now julius has fully taken that over but T3 chat I am the one who gets how it works i need you to understand that this is not me bragging it's actually the opposite i am ashamed of the fact that up until the convex port any change to our data layer or our sync engine had to be done by me because if anyone else touched it it would break because I did a terrible job architecting it i made it work and it solved a bunch of problems that were really hard to solve i was proud of the benefits we got from it but I designed something that sucked to work in unless you were deeply experienced in the intricacies of those sync engines and I was close to buying out a company because one person there was so so good at sync engine design stuff that I knew if I acquired them he could take over it for me and I needed someone that good and then I accepted reality which is that we're building a chat app that is wrapping LLMs we don't need one of the three best engineers in the world to maintain our data layer i need to fix the i need to grow up be a good engineer and make it so people who are not as absurd as I am can make something of this quality and can make things that don't take down production when we make changes i needed an architecture that wasn't just capable wasn't just functional wasn't just able to solve these problems i needed an architecture that the rest of my team could make changes to confidently and we now have that with the Convex change i had to eat a lot of my own ego because there were things that I convinced myself we did better with my sync engine than Convex could and I was wrong and I got over it and the more we dove in the more I realized not only is this architecture way better and easier to understand now everyone on the team can contribute to it now everyone can add new features now we are unblocked from all the cool things we want to ship we don't need Theo to do the work anymore that also means we don't need other employees to either we could have whole features now implemented by agents because the code is simple enough all of the infra lives in a directory that's named convex and with a single link to the documentation everything that's needed for that exists right there that is so cool instead of buying a company for like a million dollars I moved over to a better architecture that made more sense for what we were doing that was easier to maintain and now I'm hiring interns that are in high school and they are shipping unbelievably great stuff to be fair that intern is particularly cracked he'll be a better dev than me in like 6 months that aside the fact that now the whole team can contribute is a level up for me to stay on the architecture I built would be a cope me pretending that I am a great engineer and this needs that type of engineering when in reality a truly senior developer somebody who's higher in their experience chain somebody who would have like a staff position at a company they're not writing really complex code they are thinking through complex problems so they can write simple enough code that everyone else can contribute back to the article because I I love this any one sentence can send me off on a tangent this is so good using agents well is both a skill and an engineering project all on its own of prompts indices and especially tooling lms should only be producing shitty code if you let them yes absolutely yes maybe the current confusion is about who's doing what work today LMS do a lot of typing googling and test cases and edit compile test debug cycles also 100% of all the bash code you should author ever again sorry bash cop we have someone who can write the bash for us now i haven't written a complex bash command in such a long time i just have an AI do it every time now but even the most claw poisoned serious developers in the world still own curation judgment guidance and direction now let's stop kidding ourselves about how good our human first cuts really are i will never pretend that my code is good on the first pass i am regularly impressed that the that I put out the first try actually runs it's pretty nuts but it's bad at rust it's hard to get a good tool chain for brain too life's tough in the aluminum siding business that's hilarious i will say something I have been really surprised with is the people who are working on these deep obnoxious complex things falling in love with tools like cursor two examples that immediately come to mind because these were things that I just straight up thought there isn't enough data there's no way these tools will ever have work being done with AI stuff those two were bun specifically the zig codebase another one I thought a lot about is Porfer the Womjs runtime these are two projects that I have the highest of high respects for they're both JS runtimes buns a lot more too but these two things are some of the most terrifying code bases I have ever read these code bases are doing absurd things that no normal dev should ever have to write that there are no references for online at all right now it does them really well i know so many people at Bun that say they tab complete 80% of their work now it's still not that great when you command I and try to get it to generate a whole feature for you but it is super good within the context of the file of autocompleting as you go porfer is another one of those super complex things where it's doing crazy wom assembly browser code and I talk with the dev a lot canada honk is one of the smartest people I know and watching them slowly get AI pill has been a huge oh moment for me honestly one of the biggest I have had was having them reach out like "Hey I'm curious what your thoughts are on this new model i've been using it in cursor and it's been helping me a lot for my work." Like wait you're using cursor for your work now what the smartest people I know are all making the plunge and I never thought I would see that day my assumption was we'd see a lot of people vibe coding on Bolt or Vzero were lovable and then a bunch of smart people writing the hard parts behind the scenes and to be clear that is happening but those same smart people are now behind the scenes using tools like cursor and claude code and codecs and all this stuff to do the busy parts of their work too because even the best devs are mostly doing busy work because most code is tedious and dumb if I was to go through my stitching bench codebase here and read through what is or isn't tedious imports most tedious thing in the world that's 22 lines of  type definitions useful but tedious as hell more and more and more of them we haven't even gotten to actual code and we're 60 lines in that's over a fifth of the way through this file tests to run this is a giant JSON blob of the tests I want to run and if I want to change this from email to contact watch what happens tab i don't want that one go down here oh I do want to change that one look at that that is so good when you make these types of changes the tedious parts are way faster so this is all still tedious code here we are filtering and sorting markdown adding it to this input messages field then returning it this entire we are now 130 lines into a 400 line file and it's all just tedious that's where we're at also another fun one Ghosty the terminal that I use which is all Zigg machine code apparently Mitchell said he's autocompleting most of the code even he is writing i would really love for these editors to ship a feature where it tracks what percentage of code is tab completed or not so I could have my own numbers cuz I would guess I'm in the 60 to 70% range nowadays at least where tab complete I'll do a thing once and then tab complete the rest of it it's so nice it's we are there now even Gabriel is surprised by this and I was too it took me a while to realize these smart people are doing this also yeah cursor at the end of the year i want it so bad we will absolutely be doing a T3 chat rap of some form i got to write a lot of code for that well agents have to write a lot of code for that but you get the idea a lot of skepticism probably isn't really about LLMs it's projection people say LM can't code what they really mean is LM can't write Rust fair enough but people select languages in part based on how well LLMs work with them so Rust people should get on that and they surely will the Rust community takes tooling seriously also I've had people in chat since I started talking about this saying that it's actually really good at writing Rust too that said the author mostly writes in Go i'm confident that the designers of the Go programming language didn't set out to produce the most LLM legible language in the industry they succeeded nonetheless because Go has just enough type safety an extensive standard library and a culture that prizes often repetitive idiom llms kick ass at generating it all this is to say I write some Rust i like it fine if LM and Rust aren't working for you I feel you but if that's your whole thing we're not having the same argument what about the craft do you like fine Japanese woodworking all the hand tools and sashimano joinery me too do it on your own time i have a basic wood shop in my basement i could get a lot of satisfaction from building a table and if that table is a workbench or a grill table sure I'll build it but if I need like a table for people to sit at in my office I buy a table this is so good i love this article so much professional software developers are in the business of solving practical problems for people with code we are not in our day jobs artisans steve Jobs was wrong we do not need to carve the unseen feet into the sculpture nobody cares if the logic board traces are pleasingly routed if anything we build endures it won't be because the codebase was beautiful i bet if we took a bunch of startups and measured how beautiful their code base was relative to how likely they were to succeed if anything it's an inverse ratio probably no correlation but my guess is inverse besides that's not what really happens if you're taking time carefully golfing functions down into graceful fluent minimal functional expressions alarm bells should ring you're yak shaving i'll say my CTO Mark has a lot of fun playing code golf with like Advent of Code he'll see how effectively he can squeeze the entire solution down to like one line of code and that's really fun and cool but he's doing it for Advent of Code not for the things we're shipping to our users and knowing the difference there is essential let fun code be fun let work code be work make work code easy enough that you can have fun doing it the real work has depleted your focus you're not building you're self soothing bars i That one got me speechless i've done that a lot i'm just going to keep going cuz that's going to hurt deep o but wait for it that's something LM are good for they devour schle and clear a path to the important stuff where your judgment and value actually matters this has been my experience a ton when I realized that if I like instead of starting the project as soon as I have the idea then running into problems and spending a week trying to fix it if I just put more thought in initially like how do I want to architect this how do I want the parts to come together i get the idea forward in my head i might spend three times more time thinking about it before I start but then the LLM can take my thoughts take my prompt on how I want this to work get something 70% of the way there relatively quick and then I can do in 3 hours of thinking and 1 hour of work what used to take 1 hour of thinking 10 hours of work and then 10 more hours of thinking after it's entirely flipped how I structure work in my head and in my practice and it means I can spend more time on the thing that honestly to me is more fun which is structuring and architecting how all the parts come together i spend a lot more time in Excal on my streams than I do in my editor and that's not just for show that's how I work and think i spend much more time in my day job writing code in here not on there but the mediocrity as a mid-late career coder I've come to appreciate mediocrity you should be so lucky as to have it flowing almost effortlessly from a tap we all write mediocre code mediocre code is often fine not all code is equally important some code should be mediocre maximum effort on a random unit test you're doing something wrong your team lead should correct you developers all love to pin about the code they worry LLM will lower the ceiling for quality maybe but they're also raising the floor gemini's floor is higher than my own my code looks nice but it's not as thorough lm code is repetitive but mine includes dumb contortions where I got too clever trying to dry things up i just showed one of those where I was popping instead of shifting that's a mistake the agent would probably not have made lms aren't mediocre on every access they almost certainly have a bigger bag of algorithmic tricks than you do radics tries topological sorts graph reductions and LDPC codes i'll say I'm a big functional programming bro i still forget the specific order of things when writing a reducer in JavaScript the fact that it can be written by itself is still so magical to me it's so nice humans romanticize arsync andrew even wrote a paper about it to an LLM it might not be that much more interesting than a SQL join but I'm getting ahead of myself it doesn't matter if truly mediocre code is all we ever get from an LLM that's still huge it's that much less mediocre code that humans have to write i absolutely agree there most code either is mediocre or probably should be but that means most humans are writing mediocre code all the time and if AI can take that from us that's massive and it's let me be much more comfortable maintaining much larger amounts of code because I'm not the one doing it it's great but it'll never be AGI i don't give a smart practitioners get wound up by the AI and VC hype cycle i can't blame them but it's not an argument things either work or they don't no matter what Jensen Hang has to say about it but they're taking our jobs so does open source we used to pay good money for databases that's actually a hilarious point that is actually a really funny point we're a field premised on automating other people's jobs away productivity gains says the economists you get what that means right fewer people doing the same stuff talk to a travel agent lately or a floor broker or a record store clerk or a dark room deck when this argument comes up libertarian leaning VCs start the chant "Lamp lighters creative destruction new kinds of work maybe." But I'm not hypnotized i have no clue whether we're going to be better off after LM things could get a lot worse lms really might displace many software developers it's not a high horse we get to ride our jobs are just as much in Tech's line of fire as everyone else's have been for the last three decades we're not East Coast doc workers we won't stop progress on our own but that's plagiarism artificial intelligence is profoundly and probably unfairly threatening to visual artists in ways that might be hard to appreciate if you don't work in the arts we imagine artists spending their working hours pushing the limits of expression but the median artist isn't producing gallery pieces they produce on brief turning out component illustrations and compositions for magazine covers museum displays motion graphics and game assets i'll even take some balt here i kind of feel bad for my editor Faze he works his ass off and he is an incredibly talented video editor he does not get to show off his talents much running this channel he will have a lot of fun in the intro because the intro is really important and as I'm sure you guys have seen the first 30 to 60 seconds he'll put the extra effort in to really flex his skill and make it more compelling but the rest is him turning my nonsense rant into a shorter slightly less nonsense rant occasionally there's the fun peacemealing of I filmed something else later he has to stuff it in the right spot but none of that is showing off his technical capabilities as an editor if he could automate more of that work and his editing tools made those parts easier he could spend more time on the fun things like the fancy start of the videos he could work with more people and get more done automating the frustrating parts of his job might mean he can take someone else's job but more importantly it means he can spend time on the parts he finds fun that also help make my videos better there is a future where AI can help improve our pipeline in the videos but right now we don't need AI for my video process because FaZe is a god and you can edit an hourong video in under an hour so as much as we want to pretend arts are about the art they aren't very often the vast majority of art is meant to fill a space not fill your heart and it sucks that there are people who dedicate their lives to making heartfelt pieces that have no path to make money on it but I come from the music world this has been the case the entire time I was exploring and still am deep in the music world the vast majority of people watching this video make more money than musicians that you listen to on Spotify not the biggest ones but the medium-sized ones i know a lot of rappers that seem really big that make a lot less money than my team does and that sucks the arts not being compensated properly for their work has been a shitty thing for a very very very long time ai makes it more visible but it doesn't necessarily make it a new problem the problem's always existed we're just using this existing problem to be mad at a thing that we want to be mad at and that sucks but it is what it is lms easily to a point where it's alarming can clear industry quality bars gallingly one of the things they're best at is churning out just good enough vicimiles of human creative work i have a family in visual arts the author not me he can't talk to them about LM he doesn't blame them though they're probably not wrong cuz this is a huge harmful impact on their world meanwhile software devs spot code fragments seemingly lifted from public repos on GitHub and they lose their what about licensing you're a lawyer i defer but if you're a software dev playing this card cut me a little slack as I ask you to shove this concern up your ass no profession has demonstrated more contempt for intellectual property bars the median dev thinks Star Wars and Daf Punk are public comments the great cultural project of developers has been opposing any protection that might inconvenience a monetizable media sharing site it's really weird how we decided what creators do and don't deserve to get paid movie directors they deserve millions authors and musicians meh should be free i'll support if I want youtubers screw them i'm skipping the ad the replies on this are mostly people saying "How dare you think you deserve to be paid as a YouTuber no one likes ads that should all be free." That all came from a separate original post that was complaining about how books should always be free because information should be free my new video has been up for 7 minutes the sponsor block people have already submitted timestamps these people are insane someone said "Shout out to those hardworking folks the really hard work of submitting two timestamps they work so hard i swear you guys value their work more than the creators making the content to which I got ratioed with someone saying yes you don't care about intellectual property i know that for a fact so stop pretending you do now because AI is good i don't want to get into the sponsor block thing i'll do this another time my quick TLDDR is that if you watch the first 5 seconds of my ad think it's not relevant to you and skip it I'm okay with that i'm okay with you automating that i love the little button that appears in YouTube with the skip button and if it comes up when you don't think the thing is relevant to you and you click it cool awesome it's my job to make the ad relevant to you and if I fail at that awesome skip away but if you install a tool that automatically skips it before you know if it's relevant or not you are stealing that is theft you don't care about the hundreds of hours I and my team put in and the fact that those sponsors are the only reason the channel can run and you value someone spending 5 seconds to submit a time stamp more than the hundreds of hours I and my team put in you're a bad person you're operating in bad faith and you better shut the up about AI taking your job anyways so back to the article because this is very much a thing in the world that we are in here the great cultural project of developers has been opposing any protection that might inconvenience a monetizable media sharing site or more importantly it might be protection that inconveniences you as the viewer because you have to spend 5 seconds deciding if the ad's relevant to you or not when they fail at policy they route around it with coercion they stand up global scale piracy networks and sneer at anybody who so much as tries to preserve a new release window for a TV show call any of this out if you want to watch a TED talk about how hard it is to stream The Expanse on Liberwolf yeah we get it you don't believe in IPR then shut the up about IPR reap the whirlwind if you have given zero shits about intellectual property until now shut up cuz I know most of you don't so shut up about it it's all special pleading anyways lm digest code further than you do this is another point like if we're talking about how transformed the thing is if I read some source code and it goes deep in my head somewhere and then I accidentally write the exact same code later on the LLM changed it more than I did and the LLM is considered copying more than I am if you don't believe a type face designer can stake a moral claim on the terminals and counters of a letter form you sure as hell can't be possessive about a red black tree bars positive case redux when I started writing a couple days ago I wrote a section to level set the state-of-the-art of LLM assisted programming a blue fish fillet has a longer shelf life than an LLM take in the time it took you to read this everything changed kids today don't use agents they use asynchronous agents they wake up free associate 13 different things from their LMS to work on make a coffee fill out a TPS report drive to the Mars cheese castle and then check their notifications they got 13 PRs to review three get tossed and reprompted five of them get the same feedback a junior dev gets and five get merged i'm sipping rocket fuel right now a friend tells me the folks on my team who aren't embracing AI it's like they're standing still he's not bullshitting me doesn't work in the SFBA he's got no reason to lie there's plenty of things I can't trust an LLM with no LLM has any of access to prod here but I've been first responder on an incident and fed 40 not 04 mini not a smarter reasoning model just bog standard 40 log transcripts and watched it in seconds spot LVM metadata corruption issues on a host we've been complaining about for months am I better than an LLM agent at interrogating open source logs and honeycomb traces no no I am not to the consternation of many of my friends I am not a radical or a futurist i am a statist he uses some weird words i believe in the haphazard pverance of complex systems of institutions of reversions to the mean i write go and Python code i'm not a Kool-Aid drinker but something real is happening my smartest friends are blowing it off maybe I persuade you probably I don't but we need to be done making space for bad arguments i agree it's so tiring that the anti-AI people are just not they're not talking about things that are real problems cuz I want to have those conversations is always so frustrating to me when there's a good nuanced conversation about problems that we can have but we can't because the conversation is so rotted with people being wrong about it it's so frustrating it's so frustrating somebody in chat said just call them stupid i wish I could i do but there are really smart people who still think this way they are just diluted and it's different it is really different we need to recognize that difference because there are still smart people who think this way more and more of them are coming around to it but there are a lot of people who still think that way depends on how long it takes for them to come around i think most of them will so many people I was concerned wouldn't have and I would like to think the rest will too let's finish this article because this has been  phenomenal but I'm tired of hearing about it and here is where I rejoin your company i read Simon Willis's posts and that's all I really need awesome then he already knows who I am because Simon did a post about my thing recently that's one of my highest honors is that Simon did an article about my LM snitch benchmark that was the like oh I'm having a real impact on the space moment for me that I was really hyped about that was so cool i love his blog for those who don't know Simon Willis is one of the creators of Django and he has become one of the like best AI research people in the industry and that is enough for you to keep up or maybe watch my videos i think they're fun but the hype bubble sucks and I get that and if you don't want to be part of it don't be part of it but don't let the hype bubble keep you from trying out these tools but all day every day a sizable chunk of the front page of HN is allocated to LLM incremental model updates startups doing things with agents LLM tutorials screeds against LLMs it's annoying but AI is also incredibly the word I use advisedly important it's getting the same kind of attention that smartphones got in 2008 and not as much as the internet got that seems about right i think this is going to get clearer over the next year the cool kid hotness about sarcastic parrots and vibe coding can't survive much more contact with reality i'm talking about these people but I meant what I've said they're smarter than me and when they get over this effication they're going to make coding agents profoundly more effective than they are today that is such a phenomenal ender to one of the best blog posts I have ever  read i had a feeling when I read the first paragraph that this needed to be a video i was right to Thomas thank you you have more concretely clearly and entertainingly put a thing I have been feeling for a bit now and said the things I was scared to specifically saying that these people are smarter than you are and they are missing out on this i would have felt insane saying it myself and I am so thankful you did so I don't have to say it alone on one hand I am stealing his blog post for content but on the other hand he gave me the confidence to finally say this and I didn't have it before so a huge shout out to Thomas i implore you guys give him a follow we're putting his Twitter link above the link to this article in the description for a reason if someone can write this they have a lot more to offer to the world and I have a ton of respect for him for the way that he put this together thank you all for watching this with me what a journey it has been i hope you enjoyed it as much as I did until next time peace ns




## JS At The Speed Of C - 20231125
it's no secret that JavaScript isn't the fastest language like by quite a bit I'm not going to sit here and pretend that javascript's fast enough because in so many cases it isn't if you're processing lots of requests and not using serverless or you're encoding video or trying to build a game it's really hard to justify doing a lot of these types of things injs just due to the performance issues what if I told you there was a solution being worked on and it's being worked on by some of the most talented JavaScript engineers in the world what if I told you they had the right incentives to actually make it happen so much so that it's not not just meta working on it anymore but also Amazon what if JavaScript actually ran at the same speed as C because it was actually C code being run instead as a quick spoiler I want to show you guys how crazy these things have gotten here is some JavaScript code that is very rudimentary JavaScript code running at 120 HZ on his MacBook but more importantly running at 60 HZ on an old Motorola G5 phone this is a full-on window manager where you can like change t tasks with them all running at really high frame rates written in JavaScript live at 60 FPS that's nuts is it actually possible to transpile our JavaScript into C and to write a compiler that's smart enough to make static code out of our JavaScript this is the question that the static Hermes team has been asking themselves for a bit now and godamn are the results impressive let's take a look at what static Hermes is and the effort that the team's been putting into making JavaScript a little bit more static so there's an incredible talk that the lead Dev on St of Herm dead we're going to skim through it a bit here and take a look at some of the really really cool outputs so without further Ado let's see how this actually works all right so my name isetan mikov and I helped create the Hermes JavaScript engine at meta so I can tell that there are at least two three users of Hermes in the audience uh can you make some noise so I can hear you I need the support for context for anybody who doesn't know what hermis is is it's a custom JavaScript runtime and kind of compiler for JS the goal is to skip a lot of the like runtime steps necessary to initialize JavaScript by just in time compiling a lot of the pieces and the result is when you want to start a JavaScript BM it starts way way faster because it knows what parts are going to be we as it starts rather than letting V8 figure that out later this was created so that react native apps can open much more immediately rather than having to wait for JS to load before the rest of the code is running static her Miss is a huge step forward going even further in where instead of it pre-compiling the JavaScript part so that it knows where like the memory is being initialized it's actually just running C code directly for two people you guys are really loud I have to say anyway last time I was here I was really pleasantly surprised by the reaction to my talk after my talk a couple of people approach Ed me to tell me that the talk was very technical but okay so let's hope we can live up to this standard once more I want to start by telling you a little story this is the sad Fable of Joe native and his slow code Joe was sad because he had he was having performance problems in his react native app the startup was very fast because of hermis but there was occasional UI starter when scrolling very long lists when using complex animations or when Computing crypto hashes or mining a bit of Bitcoin in pure JavaScript I will say that the list example gotten much better with fast list there's a new library that Shopify made that's basically the the drop in replacement for the list component in react native and it's absurdly fast it's flash list thank you chat for the correction flash list is nuts I've played with it a tiny bit and the result is really really really fast it's a faster react native list you don't have to worry about the blank cells appearing as you scroll too fast anymore it just works they did a ton of insane optimization and the results really really fast if you've used the shop app like shop.app by Shopify it uses this and the results is phenomenal like I thought that was a native app I actually hit up some of my friends to confirm if it was or wasn't and was surprised to learn it was react native because as much as react native is native and can feel fast getting to that level of performance is nuts and yeah there's a reason that Shopify works as hard as they do on these things because they want to make these things great anyways everything else he said like near the end the Bitcoin mining complex animations from JavaScript all those types of things usually we go to Native and just tell the native code what we want from JS land but the idea of our JavaScript actually doing those things that's insanity problems that we all have had obviously Joe who was a very passionate programmer very passionate tried and tried during a 50-hour coding Marathon he swore he drank gallons of coffee he profiled he optimized his code he rewrote it over and over but ultimately he was faced with the fundamental limit of interpreter performance he could not make his JavaScript any faster uh it was beyond his control deadly tired with a crushed Spirit but boiling anger someone in chat just pointed out they're wearing the same shirt good old AI generation p Joe was considering making his final move of total desperation trying to rewrite some of his code in C++ that's but then he wondered what if I could leverage type information to generate efficient native codee ahead of time I would still be writing JavaScript but I would be in control of performance not the Hermes interpreter which is actually great but and I could optimize as much as I need could I do that Joe wondered and the answer to that is yes yes you can Joe love the comic Sands here and this slide is very important this is what makes static her so different is it's using type information to generate native code we're going to have to take a lot of jumps in order to get there but that's the core piece here is we're using type information to generate static code because Dynamic code where something could be a number or a string making that memory efficient and functional in C or C++ is that's a different world but if you know it's always going to be a string you can make optimizations that you wouldn't otherwise be able to or if you know it's always going to be static you can make optimizations you wouldn't otherwise be able to but we're going to get into all this you can do all of those things and more as part of our crossplatform vision uh we really want to unleash JS developers like Joe and give them access to the unchecked power that native code has to offer optionally if Joe really wanted he can even carefully perform unsafe operations potentially not only creating harmless web JavaScript crashes but also devastating native crash es just as C++ developers regularly do got to love enabling JavaScript devs to crash things just as hard as everyone else does and look at him he's so happy he doesn't know what he's getting into but seriously he will mostly get tons of performance and on that highly optimistic note I excited to introduce the next version of Hermes which we have been working on for some time now code named static hermis some of you may have already heard some speculation about it on Twitter uh it was not meant to be a secret it this is another important piece something I feel like we don't see much in the web world that is very common in the react native World in particular is this level of like open Secrets the react native team isn't really trying to hide what they're working on they're not vly talking about every piece because a lot of it ends up failing but they have all these efforts going on in the background and when they work they work great and when they don't that's fine too but the goal is to try and figure out just how far they can push the react native platform and they want collaboration throughout and they've been very open to working with other companies independent developers firms like infinite red and doing whatever they can to make a great react native experience that works for all the different things people use react native for a lot of us have known about static hermis for a bit now they haven't been trying to hide it but they haven't been very loud about it yet because they didn't know if it was going to work the fact that they're now talking about it at conferences they're talking about it on Twitter they're doing all these other things that's because they're more confident they can actually get there now but in this slide there's actually a lot of important pieces I'm going to let him finish and I'm going to dig into the parts it was on GitHub since day one but we didn't really want to talk about it uh because there was nothing to show well now finally there is something to show and we are eager to share it with you the main innovation of St Hermes as you have guessed already is optional ahead of time compilation of JavaScript to native code it brings us close to our goal of combining the predictability and high performance of C with JavaScript usability and now despite what the last slide said uh natively compiled JS is completely safe by default exactly as interpreted JS so there will not be native crashes for Joe to be clear uh Native compilation is not for your entire app even though that is possible you need to decide which parts of your code need to be optimized to the Max and this is an important piece I find that whenever there's a more optimal solution we rush to shove everything into it like we're trying to run everything in bun we're trying to run everything on edge but with most of these Solutions the place they're strongest tends to be specific pieces of our chain I actually think go in the go community of all places is doing this well I forgot the name of the change they're making but they're allowing you to do specific memory management and mapping and opting out of garbage collection in specific sandboxes effectively inside of your go applications where this is powerful is when you have specific dependencies or areas people are to me it's called Arenas is this new change so in arenas you're able to make much more performant code for the things that need that level of performance and then you can call that code from garbage collection land it's going to be very similar in JavaScript especially in the react native world where you don't need C levels of performance when you're telling your app where to put which parts of the screen when you say I need a top nav I need the bottom tab bar it has these four icons that code doesn't need to be optimized at that level but the code that manages what changes when you scroll the code that manages your animations those types of things benefit a lot more from being sea levels of performance and calling this out this early that although you could theoretically run your whole app through this you probably only want certain parts that's a really good call out and very nice to hear this so early where so many other attempts to rewrite everything are just that they're trying to rewrite everything only they get compiled to Native ahead of time the rest continues to use heris bite code and if you want to learn Hermes bite code I recommend a great talk by radic react native youth 2023 you will find it on YouTube in a couple of weeks emphasis on what he just said as siles it is like the talks about this stuff are so cool and I try to my best to keep an eye on all these things in the react native world even if I'm not shipping as much react native right now because a lot of these tooling wins and performance wins come back to affect the rest of JavaScript and yeah it's really fun to keep an eye on check out these talks check out the other talks about hers if you're curious how this bite code part actually works right now in production because a lot of react native apps I'd argue even most of them now are using theis runtime already they're not using the new sta kerm with like native code level stuff but they are using the bite code output so they can load their apps faster now the really big change here is that in order to fully exploit native performance static Hermes relies on sound types now even if you don't know what sound types are uh remember these words and we'll really delve into that a little bit deeper in a few slides at this point I want to make a big disclaimer uh we are seeing encouraging results from sty Hermes uh but it is still very much a work in progress right now it is not suitable for anyone besides the most extreme hackers and enthusiasts like radic it is still not easy to use and many things are broken if you tried it which you can because it is on GitHub uh you might get disappointed but rest assured we are working on it and it is getting better all the time some of the Hermes team is here with me in R na you and they are submitting diffs as we speak so it is improving at this very second diffs mentioned graphite people going crazy yeah they're all in on their diff stuff instead of traditional git workflows but it is really nice when you're moving fast I love this call out that they're not pretending this is the magic solution that solves everything right now calling out that they have positive indications but it's not ready yet so work in progress they're showing it cuz they want Community feedback and also that typescript support isn't something they built as the core team but Amazon wanted it cuz they don't want to use flow so they came in and helped early like the these are really cool call outs I I feel like they're being very responsible with how they're going about this project uh with all that said we really wanted to share it early with the r native community and to get your feedback we also want to thank our partner in this Amazon for adding typescript support to static Hermes uh because internally we added flow support uh Amazon uses R native in many of its apps and it has been supporting us in growing rack native over the past few years okay so this is a brief overview of the topics that we will cover in this presentation I could talk for hours about statti Hermes but I would try to fit everything in the remaining 20 minutes or so I love all of this I highly recommend watching the whole talk or if you want Prime's reaction to the whole talk but there's so much more to dive into here I'm going to skip to the important pieces okay I'm going to skip over a lot of important pieces I just want to get to both the the pain points of type unsoundness and how you can't rely on typescript definitions the way you would expect because both typescript and flow are not sound where like this is supposed to be numbers but we don't actually guarantee that at runtime the compiler cannot rely on type annotations for better code because you could do crazy stuff like this if you know anything about native code this should be stressing you out the fact that you can call out things out of bounds here and try to add them in another external function like have a nice seg fault guys so they're working hard on this part let me see what he actually says about this as I'm sure you know there are many similar ways to break the type Checkers and this is not a bug in typescript or flow uh it is just that given JavaScript semantics this problem cannot be solved statically at compile time it is a very difficult problem here is how static Hermes addresses this problem in this specific example on the left we have regular hermis executing this code and is as we can see it's calling it with undefined plus undefined on the right we have static Hermes now rather than call a function with undefined it throw was a range exception when we try to access elements that are not in range so to recap static Hermes modifies some JavaScript semantics in order to enable efficient sound typing at run time in other words at run time the types of values are guaranteed to match the type annotations which in turn allows us to compile that Source very efficiently this is is cool they're doing some magic here for partial soundness in the parts that need that level of performance similar again to Arenas and go where traditionally you don't worry about memory but if you need to for performance reasons you do in this subsection of your app and then you can call that code from other places that's the direction they're going in here which I think makes a lot of sense it lets you on a granular level rewrite and change the things that need these performance wins without affecting your ability to use that across other things in your app yeah they talk a bit about is this breaking JavaScript but what I want to show is the performance differences also great little Meme here what compilation to native means for performance and what it looks like the example we have chosen is nbody JS some of you may be familiar with it it is a part of a well-known computer language benchmarks game it is a math heavy Benchmark with many property accesses when we started compiling it to Native initially it was the same performance as Hermes and that is 550 milliseconds but now as you can see it is 10 times faster when compile natively so do you understand how insane this is a different compiler resulting in code that is 10 times faster this is nuts this isn't faster compilation times this isn't faster build times this isn't faster like IDE performance this is raw speed in the application you built that is that is not pretty shabby plus we're certain that there is more Headroom we can probably get to 20 times faster than Hermes 20 [Applause] times okay so we have this very nice performance Improvement but what does the compiled code look like uh let's examine this loop from nbody JS how did it become so fast well this is how before stting Hermes there were dozens of instructions executed for every line of this Loop by The Interpreter with sa Hermes it is much better and by the way I'm really happy to bring some lowlevel assembler to this JavaScript conference in the next slide uh let's put the native in react native I'm a little scared but this is what we're here for let's see some native code here we are uh if you don't know arm 64 assembler don't worry I think you'll still get the idea uh the first thing to see is how few assembler instructions we have for the first two lines of the loop we have six instructions and most importantly most of these instructions are very cheap the entire calculation the two multiplications in the two ads are all performed in parallel by a single instruction which is marked with red there which is really impressive and trust me this is very fast and it is quite exciting for compiler developers I haven't touched assembly since the arm Revolution and you'll never convince me to to care what FMLA 2D stands for I would love to pull lowle learning on to explain some of this for me and I could smile and Nod as though I understand but yeah this is this is cool for the people it's cool for and it's fast for the people who it's not cool for so I'm excited this is the rest of the loop again very few instructions again you don't need to understand the details of this but you can see how small the output is and rest assured this is indeed very fast it is achieving performance close to C much faster than Hermes and we're not even done with it it will become even faster sadly I don't have time to explain how but perhaps next year when we hopefully would have shipped this now a little a few more benchmarks uh we can see the results of other benchmarks that we have created they are in the stattic Hermes repository they're not as impressive but it's still not bad one of them is like five times faster and we're again yeah the benchmarks are nuts the rest of this talk is phenomenal the reason this is cool is when you have native platform access because you're writing code that becomes native you now have no cost in Native Integrations when you want to call something from the Native platform it's just there because you're there there is no longer this virtualization layer in between getting in the way the things you can do with that and the things they talk about with it here are really cool again highly highly recommend this talk but I'm not here because of this talk you guys should go watch it I'm here because of the tweet that followed up which I hinted at at the beginning of this video they wanted to show the performance and insane power of static her Miss native ffi I should know what ffi stands for I always forget this one it's a foreign function interface yes it's a way to access foreign functions in the native level but as they mentioned here they don't yet support all language features needed to compile react native so they improvised they imported the bindings from Deer imgui which is a C++ imperative game UI library that renders meshes as well as soall which is a 3D backend and they wrote a demo so this is Javascript code calling a C++ game library and a 3D backend from cative UI means that the entire UI in the state of the screen is recreated on every frame which suits our purposes to demonstrate static her Miss very well this demo runs 100% compiled native code JavaScript runs in every frame and recreates the entire state of the screen it is portable to all platforms the screen layout is not optimized for phones we wrote this demo in C++ and injs to compare and they both ran with the same performance in the attached video you can see my demo running up at the stable screen refresh rate 120 HZ on my Mac 60 HZ on an old Motorola phone it includes some widgets an nbody simulation of planets a playable game demo Etc so it's all running in one application in one C++ instance is pretty nuts do they have the source code yes they do so here's the JavaScript it's a good amount of code it's not as bad as I expected honestly it's only about a little under a thousand lines that's what I figured but it's all just JavaScript code calls these static Herm Miss built-ins to bind the external C stuff but once you have all of that bound tends to look just like traditional JavaScript we have a class image that has all of these properties as well as like the static her Miss binding for the pointer where you can set things and always have const physics FPS of 60 all of these values all programmed in here all hardcoded a bunch of lets so these are like globals you can access anywhere now which is pretty cool that you bind some lets and those become effectively pointers when you call them natively that's nuts like this is just JavaScript code I mean it is typed and these types do look a lot like typescript even though it's JS file so I'm sure this would be very angry if you tried to run this code in any traditional JavaScript runtime but this level of performance is almost certainly worth it if the tooling can keep up yeah push wrecked with color it just this is a typescript function this is just typescript it isn't at the compiler level but this behaves reads and effectively works just like TS I guess this is what it's like searching for on the page right now but uh yeah you can call Push rect image and just run things directly I see people asking about the inline part and I'm not honestly sure my assumption is that when you find this it's not actually going to make it a function it's going to do something else but uh yeah not sure yeah we have more classes much I hate classes they do make a lot of sense for these like instance-based things like games classes and oop tends to be much more powerful a pattern in those environments where immutability isn't realistic for a lot of reasons yeah this is just JavaScript code like I can read this I could probably make changes to this it's a single class that has the end body runner in it as well as the Constructor which takes in locations and whatnot and it creates all of the different parts of the solar system has a base point for them bodies is that and then we offset them as it runs Advance goes through all of these and then it advances them based on their current momentums and this runs on every frame correctly they mentioned that there was a C++ version I just want to look at it so my head hurts more here's a C++ equivalent let's see the lines of code first oh it's very similar amount you have this huge pile of includes at the Top Class public definitions static if you line by line compare this suddenly it makes a lot more sense why these both exist so you have this like obnoxious pile of like built-in links which is the equivalent of includes but what's more interesting is once we get into the classes or these values here it is actually funny how similar a lot of this code is the random function the image class which is in a slightly different order but they do effectively the same thing you we have the public values it's really interesting how much overlap there is in this code the Define of the image color not what I wanted to do I'm not going to use all these fancy symbol Tools in GitHub sorry and they're still doing the weird bitwise operations for it in both the JavaScript and the C++ versions this one hanging SL God I hate C++ and it's weird syntax so much but it's so cool that like these types of calls and like specific hex codes are able to carry over between the two and the performance is nearly the same the reason the performance is the same between these isn't just because the code looks so similar it's because the code looks so similar and the compiled output of the JavaScript side is effectively the same as the compiled output of the C++ side as they said here they both run with the same performance that is nuts that is so cool so I'll be sure to link this tweet in the description so if you want to go check out these demos maybe even try and run them yourself you can because this is dope it's so cool to see these types of wins and right now there's a a lot of codee that's being written in C++ and written in these other portable native languages so that we can call fast things from JavaScript but the JavaScript just being in that native layer is going to enable all sorts of incredible things from building games with JavaScript code to building better animation libraries to fixing scrolling once and for all JavaScript is getting more and more native this is just another huge step in that direction and I couldn't be more excited what about you what are your thoughts on a native JavaScript future I know it's scary we're going to have to think more about seg faults and outof range selection but the benefits are very real and I don't think most of us are ever going to have to write the code that becomes the C++ code and even if we do it'll be more and more seamless as time goes on the Hermes team has been working incredibly hard to make JavaScript as fast as it can be and I'm super hyped about it if you're hyped about JavaScript performance stuff you'll probably love everything I had to say about bun recently so I'll pin that video in the corner and if you've already seen that or you're not interested YouTube thinks you like the one underneath it thank you guys as always appreciate youall a ton peace nerds




## JS Devs Deserve Better - 20230928
let's talk about configs why well they kind of suck I'm sure we've all seen a code base that looks like this with just 20 plus config files clogging up the root directory all of which are necessary or maybe not or maybe that's from a package you haven't used in a while and you don't know you need any more it's a mess especially once you get things like Docker and Sentry involved that have five plus files each and they all expect them to be in the root it's not fun there's a lot of reasons why we got here I don't think any of them are justifiable and God I am horrified of the result let's talk a bit about the config problem both in JavaScript and in software Dev as a whole the dino team wrote an awesome article describing the config help problem in here they have a classic example they've all seen where you have your Docker ignore your editor config your environment local example a bunch of vs lint stuff get ignore the list goes on there's all of these things before you even get to the source directory that you're actually there for and this is not some made up funny looking example this is reality there's a lot of code bases that have to look like this in order to have all these packages working properly together the result is utter chaos I like how this article frames the problem specifically that we have a defaults problem in JavaScript most of our tools are not opinionated because of that we have to do a lot of configuration Docker Sentry Etc they use the example of Gmail's settings and how if you opened up Gmail for the first time when you ended up on this page you would immediately stop using Gmail I think that's a really fair argument the fact that to use these tools for the first time you have to do a config for so many of them it kind of makes the onboarding experience rough and I wish more tools would have good enough defaults to not have to change all of these things the amount of effort I've personally put in to get my tses link config just right is obnoxious and I am so thankful for people like Josh Goldberg who have made it easier than ever to understand how to get that right but the fact that I've had to do multiple videos and a lot of research in order to get that right that's pretty painful we need to do better with our defaults in the JavaScript ecosystem that's the first layer of defense for preventing this problem thankfully there are some things with good defaults like prettier I think prettier is in a really good State overall but this isn't enough we need somewhere to put all of these configs they don't mention this option in the article but what I would really like to see is a DOT config the concept is you have a folder where you put all of these things that's effectively treated as root but it lets you dump them all in one place maybe within there you can even have subfolders for different things like you have a Docker folder with all of Dockers properties you could have a node folder all of nodes things a Sentry folder Etc and then you have more hierarchy and organization in your repo and more importantly for a new developer checking out that code base they don't have to go through all this weird config magic and try to read through all those files just to dive into the source I know it's kind of pedantic to care about the folder structure of your repo and I'm actually known for pushing back on people caring too much about these things but there is something to be said about opening a repo for the first time in the onboarding experience being scrolling through 40 plus folders and files trying to find the one that's the actual entry point that's bad and as an ecosystem we should decide on a solution that we're down to start supporting in lots of different projects there's no reason why things like prettier tailwind and all these other tools shouldn't be able to also check a DOT config folder to see if there's configurations in there instead ideally we wouldn't need any of this and we could just use the config file that all these repos already have in JavaScript the package Json there are a handful of projects that are smart enough to read your package Json for specific configuration values so that they don't need to have their own files and folders but not all projects are that smart especially once outside of the JavaScript ecosystem something like Docker will never work that way and for more complex things like Sentry they encourage you to make a Javascript file because that's actually embedded in the app that gets shipped because of this it's a solution that helps in a lot of cases it's definitely another one of those guard layers to stop us from ending up in config hell but I do think we need a folder to put these things in in the end so those are my three core points better defaults put things in package.json while you can and ideally we would have a folder to put things in otherwise be really nice if in the future we didn't have this huge pile of configuration things in every repo and I think that we can get there as an ecosystem we just need to agree it's a problem and work harder on solving it and yes Dino has really good defaults too and shout out to them for reading this article that 100 inspired the video if you want to hear more about things I wish JavaScript would change put a video in the corner here The Proposal that I'm really really excited about thank you guys as always really appreciate it these nuts




## JS FASTER THAN RUST___ HOW IS BUN SO FAST - 20220707





## JS Ruined The Web _ Theo Reacts - 20240705
how JavaScript ruined the web I saw this video and got so excited that I forgot to hit the sub button make sure you give Eric Murphy a subscribe if you like this video also maybe me too but Eric's the priority here because he made this awesome video about how JS ruined the web that I'm very excited to watch with y'all and obviously compition ahead of time too so this should be fun let's learn all about how JS supposedly made the web worse let's talk about the modern web everybody kind of knows how bad the modern web is these days and I'm sure you've experienced it firsthand I got so confused for a second that I had opened up developer tools I was like wait what happened here huh maybe I should have not had this full screen but yeah the Reddit modern Reddit I should say is going to be a master class of like terrible design web is these days and I'm sure you've experienced it firsthand because sites like Reddit which went from being a well-designed if not a little bit dated website now it is a slow buggy monstrosity that loads in megabytes of crackers and legs my browser every time I navigate to it remember you were saying what about Firefox I've had Firefox crash way more aggressively than Chrome it's funny cuz he was showing Firefox then showed the Chrome crash page but yeah and the old version of Reddit was perfectly fine so why did they have to make it almost completely unusable now before he drops his take I'm going to drop mine because they had Engineers that wanted to justify their jobs and a lot of them pushed to modernize the platform and since Reddit was a product company that was led by engineering because it was built by Engineers Reddit kept pursuing the engineering angle and leaving product behind and whatever random product idea they had they would put way too much engineering force behind twitch kind of had the same thing going on where because twitch was a company that was built by and largely for engineers those Engineers have to be Gamers so they could lean in the gaming Direction but from that point forward most of the engineering effort was things that Engineers thought were a good idea not things that product thought were an important idea this is a problem I see a lot when the company's product teams aren't the ones leading even though they're facing users and you let Engineers who are between the infrastructure and the product team be the ones making decisions like this you end up Reinventing things over and over sometimes making them better often making them worse never actually improving the act like the product in the end I see a lot of people blame product teams for these things and I've never understood that because an engineer had to make these decisions and the engineers are the ones that I would blame here even simple informational websites like news websites or recipe sites they have been so jam-packed with so many scripts that can take minutes to fully load a simple web page okay the recipe thing is specific and annoying because recipe sites have a terrible monetization story because they don't have people paying any money so they make all of their money on ads but since half of people run ad blockers now they have to do everything they can to squeeze a scent out of their site this is why everything now is either paywalled or covered in ads because they have to make some money but this isn't a modern problem do you guys not remember the pop out era the toolbars era do y all not remember this era was this actually better cuz I agree like having too much JavaScript sucks having a bunch of ads sucks this sucks even harder and like I've had grandparents with computers that look like this so this was that was a real problem back in the day believe it or not but yeah having ads that you're ad blocking out and all the stuff loading on your recipe site feels really bad but they're trying really hard to make some money I don't think that it's okay I don't think that it's good but I don't think that this is a new problem I think this is the desperation to monetize free content that has existed for as long as the web has and so in this video I want to go over how this happened so the simple answer for a lot of this is the web's current obsession with JavaScript I have feelings but we'll see where he goes with it now of course there's nothing wrong with JavaScript people like to dog on JavaScript a lot but inherently there's nothing really wrong with it if you want to have any sort of interactivity on your website you're going to use it but the problem really arrived with the pop wasm not mentioned what happened to all the rust in the browser guys you're not going to bring that up oh wait cuz to use other engines in the browser and other languages you probably have to load way more code oh yeah I guess that the problems that are being brought up here aren't actually solved by WM huh who would have thought wasm doesn't solve the problems that people have with JavaScript crazy popularity of JavaScript Frameworks so maybe you've heard of react angular View and many many more frame works like this these are basically tools that I want to go through that because first off what's that typescript logo where do you even get that typescript logo what the [ __ ] I we have typescript at home typescript at home what and so these aren't Frameworks too like why is Babble in here like Babel's for transpiling JavaScript it reacts in here twice oh a lot of these are in here twice uh yeah there's a lot of Frameworks I get it even mpm is not a framework like this is interesting node is in here separate from JS rxjs is in here yeah this is an interesting slide many many more not to dunk on the Creator to be clear just quickly done potentially indicates a lack of experience in the space probably not though just interesting to call these all Frameworks react angular View and many many more framework there aren't really that many more there's things built around those three and a few others but uh these are basically two tools that web developers used that abstract a lot of things in development away to make it easier to create richer more Dynamic web applications so basically what I'm saying is these JavaScript Frameworks allow for highly interactive web apps with a lot of moving Parts okay I I hate to keep dunking on the code but this example is going to get to me if you're only using this interface here and you're not exporting it and you're not reusing this definition other places don't first off don't make it an interface just use type it's easy easier and better to reason about almost always but also don't Define it at all just inline it here instead of putting props there just put the definition you've add an unary level in direction that causes people to talk [ __ ] on typ scpt that they don't need to like this is much more verbose than it needs to be I would flip it I'd have props call in this object definition and then just do props do color props on click Etc anyways JavaScript Frameworks allow for highly Chad is saying this is an L take you prefer the interface on top you're all wrong but if you really want to make it like a rule but generally speaking defining unnecessary types is adding unnecessary burden by having those things separate you're more likely to make a mistake you're less likely to notice when an issue occurs and you have much more indirection in your code base the only thing that you get out of their way of doing it is the defaulted value and there's a lot of nice ways to do that differently yeah it's not exported why I put it on top yeah I'm with you on this Timmy yeah there could be a whole like alignment chart for the different ways people prefer to do this but uh yeah I'm not a big fan of interface on top that feels like angular code from the early 2010s interactive web apps with a lot of moving parts and that's basically what they're used for because the most popular react it was originally developed by Facebook and that's because it's very hard to have a website with the level of complexity that Facebook has without using a complex JavaScript framework oh that sentence hurt me a bit complexity doesn't scale this is a thing I think a lot about that arguably deserves a video of its own the problem with with react isn't its complexity it's its Simplicity react is super super simple and that requires you to bring other services in and other Solutions and libraries but the reason that react worked well for Facebook is that its Simplicity allowed a team to not adopt more complexity than they need to if you have a framework that includes everything then you have a lot of people including a lot of things they don't necessarily need but you have a minimal framework like react you now have the ability for every problem to be as small or as big as it needs to be I like that react is simple I think it's one of the best strengths of react and to say it was invented because they needed a complex framework is a fundamental misread of the existing Solutions like react was so simple people thought it couldn't work because of the way that it did rendering being so rudimentary and stupid but it worked great the first time you heard about react at the time it sounded like the dumbest way ever to build things because it seemed like it couldn't perform but the fact that it did made it a really good solution at scale you don't get scale from complexity you get scale from making so simple that every addition to your massive thing doesn't have to be massive itself that Facebook has without using a complex JavaScript framework I also say flexibility is an important piece too where there's a level of flexibility you get from tools like react that you don't get from other tools especially like all-in-one Solutions even PHP which Facebook uses heavily they had to build a whole new language on top of called hack and so these JavaScript Frameworks they work best as single page applications so these are basically websites that you would expect to behave like applications so for something like an admin dashboard it makes sense to use one of these Frameworks because you're going to be constantly creating and adding and editing things yep I'll go a step further and say a lot of the new things going on in react with server components probably don't benefit you a lot in this scenario and if I was building really complex dashboards I'd be paying a lot more attention to what Tanner is doing with the tanack and tanack start stuff especially the tanack router but this is the beauty of react is that as a solution it lets you build the right things around it so if you want a better dashboard experience you can use react plus tanack if you want a better blog experience you can use nextjs app router or react combined with something like Astro the flexibility that some of these Frameworks offer you to do the right thing is incredible and you don't really want to have the page refresh every time you take an action that would get really annoying really fast and so these Frameworks work best for websites that have kind of a medium level of interactivity that's kind of The Sweet Spot for these JavaScript Frameworks but the problem comes with how widespread the adoption of these JavaScript Frameworks was now look some of these websites they make sense using something like react but soon enough cooking websites were using react news websites were using react reddits Now using react and none of these websites really need to use react the front end of these websites doesn't really need to be that complex I want to go through those examples again because I don't necessarily agree does the cooking website need to use react no it's not super interactive but once you have have features like the grocery bag or interactive things on it parts of it using react make sense more importantly though the thing that you're dealing with the load penalty for is not react or the JavaScript code built around react it's going to be all these ads and things in fact let's find this site let's take a look at the network tab did a command shift R so it's a hard reload it took a while for this first like top level page load to happen and then loaded the the next thing it loaded was gp. JS oh boy let's just rip this code quick uh what do we got in here GPT imple plus math. random fun I think this is just for loading if frames and [ __ ] yeah this is a ads indication that's what this is this is just an ad file so the first file that takes a while to load here has nothing to do with react it's just add stuff then we have a polyfill then we have a video player which doesn't matter what framework you're using that's going to have to come in then we have some assets we have some web packed stuff we have the framework which I'm assuming is whatever framework they're using for this 40 kilobytes we got the main here which is a couple kilobytes as well 26 we got all of these small pieces here we got this ad coming in super slowly but as we scroll more we see a lot of the bigger things like Pub ads implementation is the biggest thing in here by far so far and that's ads like obviously if we sort this by most size the first thing is this video ad that's playing somewhere then we have app code which is still only 282k we can pull this over here in format most of this is just like generic poly fill and like function assignment [ __ ] as you would expect in anything actually controlling a web page so you get the one app bundle here but a lot of these Auto playing ads are the vast majority of what's going on here like let's be real and we have so much other random JavaScript from things that are almost certainly ads so like app Nexus [ __ ] we got uh this web.js file random service worker [ __ ] but look at this like recapture is in here three times and it's the same size as like all of the app code like the difference between all of the code for the site and just the capture code is negligible like the framework is not the issue here the framework is one part like the hls player is another 100ish kilobytes this random measurements thing this Banner SDK all of these things are so much more JavaScript than whatever app code they have like blaming react for this is it almost feels like the trying find a good analogy for like there's no good meme that really represents the the Gap here it's like you could remove react from this entirely and still have a site that's really slow due to too much JavaScript like if I switch over here 3.8 megabytes of JavaScript have been transferred that's unbundled 13.1 Megs total I agree shipping 13 megabytes of JavaScript is terrible but I do not agree that react has anything to do with this problem just makes no sense to me it took 1 3 minutes to L cuz I has slow 3G on if I turn off the throttling and I command shift R it still loads reasonably fast but like over 10 Megs of JS I absolutely agree is a problem but like if we go to the upload things site significantly less yeah so the filter here is only 8.5 megab of JavaScript versus 496 Kobes this is a react site like we built upload thing with nextjs and react and it has a bunch of code and it's a huge project with a ton of code but like 4767 kilobytes versus 8.7 Megs the issue here has nothing to do with react it feels disingenuous to say such hopefully that's not a theme hopefully that's a one-off thing we're using react news websites were using react reddit's Now using react Reddit using react I think could make a lot of sense Reddit is supposed to be a very interactive site where you're pressing buttons you're opening up chats you're responding to comments you're doing a lot of things that type of interfacing an interaction is key to the experience one stupid way to measure this is how many button clicks does the average user have per page if the average button click is a navigation to another page that's one thing the average button click is something you're doing on the page like up voting or commenting or getting a notification or unfolding something those types of things where you want interactions without navigations having good client side experience makes a lot of sense that said so much of Reddit is meant to be read not clicked that it's a 50-50 case I would could make the argument either way and if I recall they're actually working on redoing Reddit yet again this time using a bunch of crazy web component stuff because they decided react evil and terrible and the reason we had all these problems but I still think it's just bad engineering and none of the these websites really need to use react the front end of these websites doesn't really need to be that complex but the reason why react and these other JavaScript Frameworks really took the Internet by storm is because of how they were marketed so okay we'll see where this goes basically whenever these first came out they were the next greatest thing in web development and if you were a web developer back then I mean even now you're basically an idiot if you're not using one of these new Frameworks you're basic I'm one of the bigger people who pushes these Frameworks and I would never call you an idiot for not using them yeah I don't love this take like I I'll be very clear and explicit here if you have a framework that isn't a modern framework if you're like deep in rails or laravel or any of these things and you're using them and you're building things with them awesome keep doing that I should not be you should not feel bad for not using these modern solutions but if you see things you like in my videos If you're trying these things out to stay on top of modern development Trends and you end up liking some of these things awesome I know a bunch of devs who were on more traditional back and front and like traditional I'll say Stacks even myself where I went from rails in Ruby over to elixir in Phoenix over to working on react front ends it with a go back and I hated for a while and slowly I found myself going back to full stack where now I'm a pretty big next proponent I suppose but like use the thing that you know that is working for your problem and if you want to explore new Solutions cool I really hope this doesn't go down the all new devs are forced to learn react therefore all the companies are forced to use react because of that cuz that would be a really bad Faith argument cuz the things people learn are the things that have the most jobs available we'll see where this goes stuck in the past and if you're still working in something like PHP people are laughing at you and these new Frameworks aren't even necessarily better than the old way that people were doing things it's more of just pure pressure because everybody else is doing it these days people will ask if they should learn react one of these JavaScript Frameworks before even learning JavaScript itself 30% of new devs get started with react I still think you should learn the basics of JavaScript first and I will always push that but uh yeah I get why this question hurts if you've been programming for a while cuz like reacts a framework that's not going to last forever JavaScript is a language that will last forever learn your language is not your Frameworks yeah sure but to think that noobs are the reason that javascript's taken over the web is a fundamental misread and I'm going to go really deep on why in a minute and I've been a web developer for a long time and for a long time I was just happily making HTML and CSS websites when I was a kid and that I later moved on to Wordpress websites if a client needed it but I was working on pretty basic websites but once you start following any web developer influencers I'm talking about the guys on Twitter who are always talking about the new latest greatest technology that everybody needs to be using right if you're not already following me on Twitter as he's saying t3g on Twitter I make a lot of bangers check me out on there or the follow anyways thanks for the shout out right now so you would hear these people on Twitter or on a podcast or see a blog post by them they were always talking about how you need to do things the new and improved way or basically you're going to get left behind because this was presented as the future of web development I have a video that will hopefully be out by the time this one goes out might not be but hopefully the topic of the video is that it's overrated to be early more often than not being early to Something's actually a disadvantage because if it does succeed it will change so much before it finds success that it doesn't really matter that you got there early like if you got really into Mobile Dev early this is the example I love to give and you got really good at building like crappy Java outlets for like flip phones you might be a god mobile Dev you might one of the best mobile devs in the world but then when the iPhone comes out all of your existing knowledge is useless so it's not actually good to be early it's actually okay to be late despite it being relatively agreed that I'm one of the like core react influencers nowadays I only started writing react in 2018 halfway through its life it was quite popular already by the time I finally decided to give it a chance and I ended up really liking it I used it not because some influencer convinced me I used it because I was almost going to get fired from my job because I was not performing at all I hated front end I only did backend but twitch was in the process of moving to react and I saw how much faster the site was I saw how much better the code was and I decided I'd give that a shot I ended up really liking react as a result but that happened not because some influencer convinced me to use react it happened because my company was using it I gave it a shot ended up really liking it so yeah I'm not an influencer in react cuz I'm in here really early I'm not an influencer for react cuz they pay me a whole bunch of money I'm an influencer for react because I got in late I loved it it let me make things I couldn't even imagine before it turned me into a real full stack Dev and now I get to talk about that with all of y'all and that's awesome I love it but that is like like I didn't get there by being really early and I'll never tell people you need to learn this now or you might fall behind I push back against that super super hard but if you get into it and you happen to like this awesome you can go all in there's enough going on in this ecosystem to keep you busy every day but you don't need to you don't have to keep up with this stuff there's even people who watch my videos specifically because they don't want to keep up they want to roughly know what's going on without putting the work in and my channel lets them do that and I love that I don't think anyone should feel like they're falling behind if they don't learn all these new things but if you happen to be excited enough to watch these videos in your spare time like a lot of y'all are don't mistake excitement for pressure these are different things and if you want to know more about why I think being early is stupid check out the video either when it drops or now editors not stick it in here if it's already out hopefully it is so you can go watch that because it's a really good video yeah yeah that's me I don't front end at all but I want to be educated about the happenings to be clear this is because you want to Dan not because you feel like you have to or you're going to fall behind right you're here because you want to keep up with these things not because you have to keep up with these things yeah my boss kind of influenced me there absolutely yeah Dan if you disagree with what I just said too you can say that too it's totally fine I do just not using typt you're using JS and not TS you [ __ ] up yeah I'm a C++ Dev not in JavaScript at all this is I love this my goal with all of this is to just nerd out about the stuff I like talking about and I happen to like talking about a lot of this react stuff be here cuz you want to be here yeah here cuz you want to be love that I love people that use WordPress talking [ __ ] about too much JavaScript the majority of Wordpress sites have a lot of JS for doing anything yes absolutely absolutely I'm a I'm a WordPress Defender but yeah it's insane I want to know about payload CMS in their approach even though I never use exactly I'll be talking a lot more about payload in the future they're doing really cool stuff I hope the primagen learns from you he can't stop Shilling react constantly I've never seen anything like it and nobody wants to be left behind and so of course that's what I learned I started getting into react but soon people were using react even to build things like static websites okay okay I will take a big L here on behalf of the react Community Gatsby was a mistake building a Blog with graphql is probably also a mistake graphql is a really powerful technology for abstracting a backend and a front end when you have a really interactive front end that needs to have a lot of data coming in and out throughout your session it is not a way to get content for a page graphql is a way for a complex back end and a complex front end to have complex interactions it's not a way for no backend and minimal front end to be generated and Gatsby was a weird attempt at taking the patterns in the DX that we love from react and using it to generate a static sight with a lot of pain getting there so I absolutely agree I do like Ed a lot this type of tutorial is arguably irresponsible because graphql and blogs should be very far away from each other back when I was starting my content stuff a lot of you asked me to take my stack the T3 stack and make a boiler plate for it so anyone could get started with it and I said no create T3 app happened as a response to my push back my push back happened specifically because I was concerned people would use my stack which included an off layer a database an API layer with trpc all these things on their blogs and I didn't want that if all you need is nextjs to generate the site and Tailwind to style it you shouldn't be using all of the things that I recommend you should just use those things so I didn't make a template cuz if I did everyone would use all of these things that don't fit in their stuff and I agree that is bad however create the3 app was built to prevent that by having you answer which things you want when you actually run it so it asks you do you want typescript or not and if you don't choose typescript it'll yell at you which is the correct option but everything else here you pick the packages you do or don't want and then it gets started because you shouldn't have to include all of these things you shouldn't have a database on your blog you shouldn't have graphql on your static sites these layers are unnecessary and if you put them in things like this you're misleading people into thinking they are so I fully with you on this one Eric the idea of a graphql based react tutorial to build a Blog no no no no so I'm talking about a very basic website maybe a Blog maybe a web page for your dog and people are so into doing things this new and improved way the JavaScript framework way that they can't with this thing called Gatsby so Gatsby was a really cool static site generator but note the use of the word was because we learned our lessons with this and we don't do it anymore like Gatsby's dead dead at this point powered by react and so you could have a blog or just a simple informational website but once your website loaded it hydrated into a fully featured react app and you get these cool seamless transitions like you click onto a new page and it doesn't reload the page it just kind of instantly takes you there and I remember thinking that this was the coolest thing ever it was really slick and so of course I built my personal website with this framework why wouldn't I I want to do a quick poll who in chat has built a personal site with Gatsby at some point because I know so much of us has yes no what's Gatsby solid 23% have written a site with Gatsby because so many of us got tricked into this in the past I am guilty as much as anyone it seemed like a good idea at the time until you understood what it was actually doing and the con a actually clicked G yeah gasby had a couple good ideas and a bunch of really bad ones and the the mess of attaching them all together resulted in a disaster that NFI had to come in and clean up anyways but then after I finished with it it felt a little bit weird because my website was loading slower than before so at the time the slogan for this framework the slogan was it was fast in every way that matters gasby gasby gasby and it definitely felt very slick but very slow because when you first try this it does feel a little bit faster because like I said it doesn't have to reload the page in order to get new data but the initial page load of loading my website in for the first time was noticeably much slower that's because it had to load in all of this JavaScript and parse all of it before it even displayed any HTML and of course parsing hundreds of kilobytes of JavaScript takes much longer than parsing maybe 100 kilobytes of CSS or HTML this part's very disingenuous in contrast to the examples earlier where earlier examples with react sites were slow cuz they were covered in ads and other random [ __ ] Gatsby sites are slow because Gatsby's architecture is a absolute nightmare their way of handling hydration and loading the JavaScript in was a thing out of a horror film and the interactivity being a thing that happens later is kind of what we want ideally we want our HTML to come down with the right content in it we want our JavaScript to come in when it's ready ideally before we click a button and we want the user to have all of this happen with other device overheating and using a ton of bandwidth and the modern react Solutions now do all of these things relatively well with nextjs you can generate the static HTML you can hydrate the minimal set of JavaScript that you need and then you can start navigating the site but all of the benefits you mentioned before are real you can even go to very single page app heavy things like uh are you guys familiar with docusaurus because I will continuously defend docusaurus I still think is one of the best docs options this site flies do you see how fast when I click things they just open immediately as a doc site it's awesome it's really good hell the one of the creators core contributors I don't know what your role is nowadays Sebastian with docusaurus but pretty much run it nowadays like one of my biggest regrets was moving off of it because I had no reason to it's phenomenal software but like it's a single page app if we look at the JavaScript bundle here this is running react and looks like it's running quite a bit of it we have a lot of JS in here but it's still way less than any of the other sites we looked at but it flies and if we compare this to create T3 app which we built these docs using Astro I'm clicking now I'm clicking now I'm clicking now and I am on a super low latency gigabit connection if I was to hop in here and add I don't know slow 3G throttling now let's navigate to a page waiting waiting okay cool now we're on the page let's go do the same thing with the same throttling over here so again this is bad Network conditions this should be way worse right tell me why it's instant the reason is once that JavaScript loads you don't have to wait for the to respond with more [ __ ] does it load a little too much stuff initially yeah it can but the fact that these things load this much faster or when I click I get a loading State immediately and then the rest loads in after those are things that are significantly harder to do with traditional static Pages it benefits a ton like you get objective wins and performance wins too not just ux wins there are performance benefits of building a single page app even if it's static content like your docs it actually feels better to navigate a docusaurus page than it does to navigate something using something like Astro this isn't the talk [ __ ] on Astro I think it's a phenomenal framework it's what we use here for reason what I use on my hom site as well and my blog too because I want static content and it is a great static content framework but if you are navigating heavily you're clicking a lot you're going around a lot the benefits of single page app technology are real I'm not saying that there aren't single page apps that are slow I'm saying that they're usually slow for different reasons and so after I built this this was my first inclination into realizing that something might be wrong with modern web development why am I building this simple webs which should just be HTML and CSS why does this need react yeah I agree Gatsby encouraged us to stuff react in a bunch of places without good guidance or reasons it was rough and we've learned our lesson since I but I absolutely agree we went too far but I feel like we're complaining about where react was in 2018 instead of where it is today also docusaurus V1 was a multi-page app docurus makes it easy to maintain open source documentation websites yeah again like Doc Source used to be multi-page so every page was own static HTML and they moved away from that at some point because it wasn't great here I have fast internet but if I go back to turning that down again we'll see that even docusaurus old versions had this problem slow 3G see how long these Pages take to open now that's the issue and that's why they moved off it because after building like this for docu Source they learned the single page app approach actually made a better experience as long as they still had HTML that was generated everything else worked pretty well yeah as said here it was using react only on the server no hydration V V2 does not improve Lighthouse scores yet it feels faster yes thank back the Lighthouse Point CU I missed that Lighthouse scores do not measure how good a website performs they're incredibly easy to game the one thing that gasby said earlier that I actually kind of agreed with I'll skip back to the Tweet cuz it is a good tweet the fastest site in the world is an empty index.html and it's all downhill from there that is actually kind of a bang or take because if you delete all of the content and make your site nothing it'll have a great Lighthouse score if you hide all of the content until Lighthouse finishes scoring and then load it in after if you suppress all of the ads or you run an ad block when you run Lighthouse all of these things can make your Lighthouse score look great but if you don't actually deeply know what Lighthouse is measuring you should not be using it as a reason to pick Technologies Lighthouse is a very specific metric that is almost never used correctly when I see people talking about it anymore anyways but yes I I agree Gatsby was a a step down the wrong path and I'm really happy we didn't go further with it because that could have ruined the web and Gatsby absolutely could have been a really rough path cuz most people should not have been using it and this claim with generating 100 th000 Pages no no no gasby got so slow so fast was he generated more [ __ ] they could not handle that of course this is a very extreme example building a completely static website with react but it just left me with kind of a bad taste in my mouth like really this is supposed to be the future of web development not to mention that the process of building this website caused so many headaches so I was building my website with Gatsby version one but you know in Tech these days people like to move fast and break things and so while I was working on this project they upgraded to version two of Gatsby and switching to it was a major headache because there were so many incompatibilities between the two versions is this [ __ ] saying that updating is hard when he's running Linux this isn't real right has anybody here successfully done a major version update on any major Linux drro ever because if so you're lying but I want to see you lie in chat but as someone who used to rock Ubuntu 124 and rocked Ubuntu 124 till 1604 because good luck upgrading Ubuntu what do I consider major on Arch that great question ask them it's gotten better since okay that's good to hear I upgraded auntu once then went to Arch it literally broke my PC so you just upgraded like you didn't change anything all your old programs worked all your old folders and everything your drivers just worked you just bumped you just like updated the Ubuntu version you didn't do a fresh install you just bumped it right had to migrate for 16.04 installed 20204 it took a week to make things work normally again yeah this is the experience I expect with Linux I guess if you have a brand new install with almost nothing going on maybe a version bump might be easy but as soon as you're actually using Ubuntu good luck like seriously I just yeah I haven't so so with a bump update sure but a major it's just AB being containerized on Linux is a nice thing to hear about and Ubuntu server is different too because you're not using anywhere near as much stuff but like as soon as you have a desktop environment that has anything custom based on your current distribution or configuration like I I never had my trackpad work properly after a Linux update in my entire life of using Linux which I I was a pretty Die Hard Linux guy for four or five years I just never had a good experience doing updates so to me this feels funny CU like I've also bumped projects react versions and had a ton of issues but also bump projects react versions and had zero issues I'm sure Gatsby was a miserable problem and I fully sympathize here having done webpack bumps myself from like webpack 2 to 4 hell actual hell so I could simp here but it's kind of funny to complain about version bumps breaking things by showing a terminal of a version bump inside of a custom Linux de okay thank you Lynn I thought I was being [ __ ] gaset here Liars in here with the whin change you didn't have 16 to 22 to 24 successfully absolutely Wayland is yes you're all [ __ ] lying thank you Lynn for for confirming that I'm not going insane anyways I essentially had to completely rewrite my website and this is just kind of the feel of working with these modern web Frameworks yeah this sucks I'm not going to say it doesn't I I think it's funny he's doing this in Linux but having a major version bump forced you to basically rewrite everything is a terrible feeling and the fact that things like Gatsby broke a lot was a problem and it didn't really feel very reacy because historically react has gotten major version bumps without issues like you can take code from a react project from 2012 2013 and stuff it an existing react project today and you can server render a class component that's 10 years years old that's awesome Rex backwards compatibility is for the most part nuts but yes some of these new early Tools around it aren't great and I agree we shouldn't be telling people to move everything to a brand new tool or solution ideally it's been around for a few years has proven that it doesn't break with majors and that they're here for a while maintaining a project that you can actually rely on like I don't know react or next or angular or spelt and spelt kit or any of these tools that have been around for a bit now that are not going anywhere that have clear funding clear path clear Way for their developers to use them and consume them over time Gatsby was an early bet and a lot of people made a Bad Bet there and if I was an influencer at the time I probably would have recommended Gatsby and that would have been a mistake of mine I would have had to walk it back thankfully I never push Gatsby because I learned about it late enough that it seemed obviously dumb to me and then when I discovered the power of nextjs I ignored it because I was using beat still but eventually I found my journey over to nextjs but like yeah this sucks I agree this feeling is terrible I would be very mad too but I don't think it's fair to say the whole ecosystem is bad because you made an early bet on something that broke and also by the way major versions are where things are supposed to break anyways so if they want to improve things that has to happen should they just not improve things like what's the solution here I digress everything's always changing and you constantly need to be on top of things and if you're migrating into a new version things are just going to break you're just going to have to rewrite things and fix things because there's so many moving Parts in your website that you need to pull in all of these dependencies from all different kinds of people so even just a basic hello world EX I have to pull these dependencies from all these other people you're using Linux this meme is about you I'll hand a freebie out let's give a theoretical how I would take down JavaScript if it was in my interest to exting this level of technical understanding of every single piece in the system makes a lot of sense for Linux contributors we don't seem to be doing that as much in the JavaScript World we've almost encourage people to not understand these dependencies and instead live in these abstracted layers as such the modular way of building works well for Linux but doesn't for JavaScript I just gave the argument none of them ever have which could actually be a decent argument in interesting conversation but since none of them ever given it I'm just going to throw that away because we can't have the conversation until you make a real argument not using a modular thing complaining about a different modular thing and I haven't even gotten into the fact that the only reason you have apps on your computer right now as a Linux user is because of electron which is a JavaScript thing because you would not be able to use Linux for your job it wasn't for the fact that electron means the web version of slack is great and you have a desktop version too it means the Discord web version is great and you have a desktop version too it means all of these tools even VSS code that we rely on every day can actually exist on Linux point being JavaScript has copied the philosophy from the Unix and Linux world and it's also allowed for better applications to exist in the Linux and Unix world it's it feels bad faith to say all of these dependencies are evil and bad as you're installing them on an operating system with even more dependencies from even more esoteric people that have crazy exploits like XZ happening like what's the like don't throw stones in Glass Houses thing like yeah the problem you're describing is a problem in the operat you're currently using example these days at least for Gatsby this framework I was working in at the time it brings in like a thousand packages and all of these packages add up to hundreds of megabytes just to create this very basic hello world example it's really ridiculous and I can't get this number easily how many gigabytes of stuff do you need to compile the Linux kernel if you were trying to compile the Linux kernel how much stuff do I have to download to do that not much that's cool to hear actually only GCC and the kernel code okay that's cool okay so B utils plus GCC that's 250 Megs okay so 250 Megs to compile Linux is it kind of funny that you need double this to compile a website sure but the thing that gets output at the end isn't that size funny enough we probably make that bundle a lot smaller if we all the binaries that aren't JavaScript from it like the next binary has gotten huge and a lot of why the next binary has gotten huge is because they're writing parts of it in Rust now and they have to bundle the rust binary for every different platform so when you install the next package it's coming with all of these things for building and bundling that happened to not be written in JavaScript so now the binary size is huge the worst thing that's happened to node modules in terms of the size of the node module folder is using languages that aren't JavaScript that need a binary that are faster and better those end up taking up even more space base so a problem being presented without presenting Solutions where all the solutions are going to make things worse so he's not talking about that's actually a good question is he talking about the o on the server or JS in general he's talking about JS in general but what he's talking about when he says that number 500 Megs is on your machine during Dev or your CI during build you don't need the 200 500 megabytes almost any other time just building and bundling and then once you have an output that ends up being way smaller the tools and the size of the tools to build something are fundamentally different from the tool and the siid of the tools that you export at the end you can imagine what happens when websites are so complex they really become fragile and a lot of these projects if you come back a year or two later and you try to download them again and edit something with it it literally doesn't work because everything has changed like the node.js version has changed and so it's no longer compatible with all of these old libraries this is how I feel using Linux to be fair but on the other hand this is a fair critique I'm going to go bump a major version on an old ass next project soon because I want some of the new features in the new next versions it's going to break things it will be worth it in the end but it's going to be a fun journey and I'm excited to see what breaks and what doesn't I somewhat recently bumped another project and it wasn't too bad that said if I can't pump in I just have to go and use the old version of NEX it's like three or four years old now that's fine I've been contributing to that code base with a four-year-old version of next for a while and it's not causing any problems it's still super nice to work with still a great developer experience it's sad that when you go back to one of these old projects if you don't have like the right version of yarn or Noe or any of these things that like stuff gets way worse to work with but there's a lot of work going on to solve this things like corack which will use the exact version of the package manager that your project or your package Json specifies things like the package lock which it's embarrassing we didn't have before but now we have a lock file that says these are the exact versions of everything makes it way easier to go to an old project and have it still work things like all the work that next has done into bundling next's dependencies into a single binary when you install next you're not installing its 400 dependencies those are all bundled into one thing so the version of next implies the specific versions of all the other things too so you don't have to worry about all of those sub dependencies it just makes so much more sense it took us a bit to find these Solutions but how long has it taken us to figure out how to do a de in Linux much less a package manager and so it's no longer compatible with all of these old libraries and if you upgrade some of these libraries then they're incompatible with other libraries it's really a major headache working with all of these Frameworks because there are so many moving parts you download the project to follow an older tutorial run npm install and spend the next two days doing crazy movements trying to trying to resolve the project dependency conflicts do you know what a package lock is somebody watching might not actually know this so we're going to go to a real code base and take a look at what a package lock is what codebase is this okay this is something I was working on for a a prototype of a hosted version of upload thing and in here we see your dependencies fastify multiart Hano node just all the different things I was testing with but this isn't the file that's interesting when it comes to long-term support if this was all you had and you uninstalled there's a decent chance things will break they even more likely if you do something like this I put latest here and somebody comes to try and run this code four to 5 years later yeah that sucks thankfully no one ever recommends doing that ever for any reason at all we all have lock files that specify this is this exact version this is this exact version this is this exact version because of that when you run pnpm install you'll get the exact versions of these things even if you're doing this years later did it suck that we didn't have this day one sure python still doesn't have it a lot of languages don't have good solutions for lock files still we added it late sure we didn't add it that late it's been a standard for at least 10 years now it's just kind of funny to me to to think that this is still a problem if anything I would make a counterargument which is that if you download an older project or tutorial you run the npm install and you spend the next two days doing these crazy things there's a good chance that tutorial sucks because if you're looking at a tutorial that doesn't have lock files you're looking at a bad tutorial I wish they would just take them down but that's why the same Educators you were bitching about earlier so valuable because they're making new up-to-date materials that better represent the current reality and they're more tuned in with these things so they have better examples to start with in the first place so these two points feel like contradictions and on top of that we've largely solved this problem okay apparently python has finally solved this problem that's good to hear Let me know when they have types working but with everything I've told you you might now be wondering why anybody would want to use one of these complex Frameworks like it might make sense if you have a complex web application that has a lot of interactivity but most websit ites using these bloed Frameworks don't meet these descriptions at all but one big reason why a lot of people use these Frameworks is the so-called developer experience so this is kind of a marketing term that a lot of these Frameworks throw out and so what this essentially is is it's the most fun technology for developers to use that's really what the developer experience boils down to because when you use one of these Frameworks it does a lot of nice things for you like I said it does things like minifier JavaScript script Minify your CSS these days with every framework you can have hot reloading so you make one change to the website in development and who has recently played with a thing that doesn't have hot reloading okay thank you chat for making me feel less insane here because I I I always keep my mouth shut uh last 30 seconds are going to make my brain explode marketing term yeah I challenge for the audience imagine if instead of Frameworks in react he was talking about Vim here just replace the word react in Frameworks with vim and editor and see how this feels don't meet these descriptions at all but one big reason why a lot of people use these Frameworks reason why people use Vim is the so-called developer experience so this is kind of a marketing term that a lot of these Frameworks throw out a lot of these Vim users throw out and so what this essentially is is it's the most fun technology for developers to use that's really what the developer experience boils down to because when you use one of these Frameworks it does a lot of nice things for you like I said it does things like minifier your JavaScript see my point we like developer experience in some places but not others we don't like developer experience we don't like the technology saying minification is a DX thing and not like an essential thing for providing good experience for your users is kind of insane he was winning me over but this part in particular feels like big react marketing push bad like react evil ruining web has a lot of nice things for you like I said it does things like Minify your JavaScript Minify your CSS these days with every framework you can have hot reloading so you make one change to the website in development and it instantly updates does Lille have hot reloading by the way I haven't used it enough to know because I feel like a lot of the old especially when back when I was using rails and stuff even when I was using like elixir Phoenix stuff hot reloading was not a thing and it drove me mad Okay cool so apparently if you use laravel with a JavaScript ecosystem thing V you can have that so I have this page logos 3000 hello world I'm GNA go to my editor I'm G to change this to hello please subscribe why isn't it changing I saved the file oh because I have to refresh there's a whole generation of developers who don't realize you have to do that because they're so used to the fact that most tools have this built in now it's just it's crazy to me to think that anyone wouldn't would live without this and then use it as like a wow that's the only reason people use no this just like like this is table Stakes for me no hot reloading means I'm not interested in your thing even back when remix didn't have hot reloading I gave them a ton of [ __ ] for that like hot reloading is just kind of essential to Modern de especially when you're doing like picky style stuff like once you're trying to get an element like aligned in the right place not having to save go back refresh wait then see it Insanity it's just you know hot reloading is a huge win and people don't appreciate the fact that react kind of normalized that being a thing while you're working on it and if you had been like me and been making websites the old way for a decade before then the first time you use a JavaScript framework it seems almost magical you can easily import Snippets and libraries from millions of npm packages with a simple terminal command and the idea is that if you make things easier for developers then it's going to kind of trickle down into a better user experience no that was never what was implied the point of making developer experience better is that smaller teams of developers can get more done more efficiently the alternative to a website in react isn't a website in some better technology almost always the alternative to website and react is no website what react and Technologies like it have enabled is for more people to make more things more effectively similar to electron the alternative to an electron app isn't a desktop app because that app's going to take four times more devs 10 times more time per platform to make versus the electron app which sure might not be as fast or as good or look as nice when you open up your activity monitor to see how much memory it's using but the alternative isn't a better app the alternative is it doesn't exist our ability to make a thing that people want to adjust the thing over time to work with our users to improve Things based on what they're doing and what they need that's the win you're able to do so much more when your technology lets you move faster it doesn't mean that your website's magically going to perform twice as good and anybody selling that promise is a liar but when the Technologies get better it allows us to move faster and in better directions the reason gasby was exciting isn't because it's going to make your blog super fast it's because you could build your blog using the same things you learn to use at work on your apps and if we have certain technologies that we can reuse in multiple places it makes developers more efficient and the word efficiency has not been said once in this video for a reason because there's no conversation about how effective a developer is at contributing I think having more websites by more developers is good I think a developer being able to build in 3 months instead of 2 years is good I think a developer being able to build actual websites like a Twitter clone in their first year of programming is good if we can develop new features faster of course that will make everything better for the users right not only that but working in decades old technology is boring and the newest framework trending on Twitter is much more appealing than using what you always have why is it more appealing though is it more appealing because it's newer or is it more appealing because the people who made it used the thing that you like more learned things from it and decided to implement some of them and not Implement others it can also be fun to imagine yourself using The Cutting Edge technology that a startup would be using like maybe you got a job at the New York Times an old dusty newspaper but you wish you were working at Twitter [ __ ] this is the funniest example he has given he just gave New York Times as an example of a musty old company using old Tech and you want to make something new history of spelt by the way if you're not familiar with spelt it's the framework that's meant to be the alternative to react built by somebody who loved react but wanted something faster more HTML friendly more dynamic as well Harris the graphics editor at the New York Times had a sense of responsibility for building a framework that was too JavaScript heavy and did too much work he also believed that compilers could improve the user experience so the most bleeding edge thing so bleeding edge and even make it into your video was made of a company that you gave the example of being an out-of-date old company so much of these modern tools and Technologies come from huge companies running into huge problems typescript exists because Microsoft wanted to use more JavaScript realized that the way we built JavaScript wasn't scaling so their solution here was to fix it by making typescript so many of these Solutions come from these big companies and it says so much that the example used of New York Times being boring is also where the framework came from for spelt which is even newer and more bleeding edge and has way more breaking changes so you use all of the cool new technology that they use and so if all of these tools are making the developers more efficient what's wrong with that I will also say that a lot of the startups I've seen and talked to are using hilariously out ofd or wrong Technologies because all of them want to be Facebook or Google or one of these big companies the number of three person startups I've seen deep in kubernetes with like 10 users is hilarious and I have to dig them out and be like he hey look there's this thing called serverless it means that you don't need to have three ssops people when you're a three person company wouldn't it be nice if you had less ssops engineers then you had users yeah no it's just like it's funny like I don't want to dig on the creator of this video too much cuz he made a great video he's very good at editing and structuring and telling a story and getting riled up like I don't get this riled up on a bad video it's clearly a good video it's getting me feeling things but man this part in particular speaks a lot on how much time has been spent talking to these companies and talking to the engineers from these companies because this isn't reality startups are cosplaying as huge companies and huge companies are inventing Technologies because they're moving too slow so a lot of these modern solutions we're bitching about things like react and spelt came from big companies and the things that we're saying are better Alternatives that startups should be using and aren't are killing the startups because they're trying to copy what they think Google or Facebook is doing of course all of this comes out a cost and probably the biggest cost is performance and I'm sure you've heard that if your website is slow then you're probably going to lose business because if you're a customer that's going to your website for the the first time and it's very slow to load and very laggy of course people aren't going to stay on your website for very long one thing I want to point out here what do you notice about this website being slow because there's something very obvious that I notice about it being slow and it has nothing to do with JavaScript or interactions or the dev experience or any of these things the site is slow because of the images I'll go a step further and say if you're using tools like next having your images load better is somewhat easy because you can use the image component and the image component is a smart JavaScript component that can run on server and client and based on the width and height properties you give it generate on the server the smallest possible image that that client can use so instead of having a bunch of those giant like jpegs that I'm sure was what's being used on there they could have minimal web pees on the platforms that support them and it's as easy as switching from lowercase image IMG to uppercase image imag inside of a next project and now you have the ability to optimize any image that your site serves so cool and the fact that these Technologies are being blamed they're the only ones that actually care about these problems is telling to me because if you built this site in larl if you built this site in rails you built this site as static HTML it's still going to take forever for the images to load like what these kinds of performance regressions aren't really felt until much later until it's actively hurting the business because whenever you first use these Frameworks they feel pretty fast until you have to load in all of the dependencies and all of the ads and trackers that are also required on your website and after you add in everything it really slows the website to a crawl but let's also talk about who this affects because let's face it a lot of developers are using uh M1 MacBook Pro with 16 GB of RAM so that's on the developer side of things these are the people in Silicon Valley California and they're using top-of-the-line equipment with blazing fast internet connections in developed countries but of course this affects people using rural connections and I totally agree with this point I wish more of us spent more time with our slow settings with like slow 3G in the network side it's also why I think vpn's for Dev are really nice too like VPN yourself somewhere far away lower your like Chrome speeds down to slow 3G so you're eating the terrible latency in the terrible like performance in a different region and also the terrible bandwidth and see what your site is like also CPU throttling is a really good idea too when I was doing more mobile Dev especially react native stuff I had a crappy Android phone that was 4 years old at the time this was 4 years ago and it sucks to use and I would test not just the optimized production builds but the dev builds too in order to make sure this worked and that they had even close to decent experience it's important but again the alternative to a react site isn't a perfectly implemented and optimized fast site it's almost always no site I remember back when the peak of Co hit there was a site that La made is a quick little site to see what the current like Co numbers looked like in LA and the site performed terribly and immediately a bunch of the anti- react people came on Twitter like oh my god look see how terrible react is for making a website like this slow like this is Health essential site and it's so slow then Ken wheeler did a quick bundle analysis and it turned out the site was slow because it was loading 5 megabytes of Json it had nothing to do with the JavaScript code it was just the huge Json on top of that if they hadn't used react and they used other Technologies for it they would have had to hire people to do it they would have had to make a bunch of decisions around what technologies to use where to use them why to use them how to maintain them all that [ __ ] and then update the website via some server doing it for you ever every however long or they could build a quick little react app load the data and show it to you the alternative to that Co site isn't they hired a bunch of people on a city level to build them the perfect site for this Co thing that would come out 3 months later than it should the alternative was no site and the fact that they got a CO site out within days of Co starting and it was almost certainly just one Dev quickly built it and fetched the Json from the one place you could get it that's a good thing the fact that there are 10 times more websites being built right now is good if we 10x the number of things on the internet the number of bad things is going to go up too so let's say this is the case half of PHP sites are good half of PHP sites are bad with JavaScript half are good half are bad here's the reality though one of these bubbles is not this small now we're a little closer to reality so even if the ratio of good to bad sites is the same between PHP and JavaScript just by 10 Xing the number of websites you're going to find a lot of bad JavaScript sites and if your goal is to show how many bad JS sites there are cool it's easy to do because there's a shitload more websit than there used to be and even if the percentage is exactly the same of good to bad between old and new even if it's way smaller even if it's like 1% on both if it's just like a tiny little chunk here there are now more bad JavaScript sites than there are total PHP sites so yeah that's going to look and feel bad I agree but to pretend that JavaScript is the reason these sites are bad and not bad devel velers bad deadlines bad process that's dishonest it doesn't matter how bad Gatsby was because as a community we moved on and WordPress is still a miserable [ __ ] show within here so like yes when the number of websites has gone up exponentially there are going to be more bad sites I agree but like everybody pretends like we should fix this by making all Sites good that's not possible the way you fix this is by eviscerating half of the websites on the internet like if I do this look at that all JavaScript websites are good now but we do that by deleting a a huge chunk of the web it's not like these things magically get remade properly nothing will ever do that that's not how this works the problem here is purely one of scale and a good point in chat if we had just deleted this way both twitch and Facebook would never have made it as far as they have I the scale is not perfect I just opened up excal draw I'm sorry I don't have the exact ratios in my head and those in developing countries they don't always have the fastest internet not to mention that but a lot of people are using older devices with 4 GB a Ram or less one more thing on the rural places I can't miss out on the opportunity to talk [ __ ] on flutter right did they really put a gambling thing on that's hilarious but yeah fun fact about flutter other than the fact that their sight's navigation is hilarious like how is all of that how is this that bad I'm not even zoomed in or anything anyways the reason I bring up flutter is because flutter has like a choke hold on the African software market right now like the the majority of new flutter apps being deployed are in a place that is mobile first and dominant like there's very little computer penetration at all it is very low reliable bandwidth and latency and despite all of that flutter is still being recommended and used heavily a flutter hell world and I can open this up right awesome notice how long this is taking to load let's go to the network tab quick let's see how much 6.1 7.2 megabytes transferred the technology that is being recommended by a lot of the antj people is flutter it's being used heavily in the regions that we were just discussing places like Africa it is very heavily used in Africa the flutter SDK alone is 5 megabytes the dart SDK on Top's another two you're joking right 58.6 megabytes of resources for a Hello World with a counter why are we complaining about react when people are sincerely recommending this not just for mobile if they're just recomending for mobile still stupid whatever flutter for web is like the Pinnacle of all of the things you're complaining about it is the peak Golden Goose example of the exact issue you're describing here in this video however still being used in the regions you're describing and this is where things get really interesting because the the intuition here seems really true which is that there are people in these places with slow internet I also just realized it's kind of a questionable caricature but in the picture I'm saying specifically but that aside the people in the regions that you're discussing here who have really slow internet and are using their phones going to these websites a lot of the devs there are using flutter and they're using flutter for web like there are banks built in flutter for web for Africa and people just use them which is just insane like actually insane that people recommend these Solutions but the like the reality is once it's slow it's always slow the difference between 10 seconds and 30 doesn't feel as bad as the difference between 100 milliseconds and 500 milliseconds and that's like it's funny cuz like he's saying like the the MacBook privilege we don't see slow but then go to these regions it's going to be slow those regions using the slowest possible solutions right now so it just isn't an honest point if you know anything about these markets I agree we should be working to make things faster for these regions and for these specific instances but the existing Solutions the things that they're using are even worse not to mention that but a lot of people are using older devices with 4 GB of RAM or less and this noticeably affects how long the page loads because again it has to parse all of the JavaScript that takes computing power and this becomes even worse on phones because let's face it a lot of people most people these days use the internet on their phone do I have to go back to the earlier point with the like JavaScript takes a while to load that's like almost all of the JS we saw a page that had five plus megabytes of JS and 200 kilobytes were coming from react the rest was all ad stuff and I agree that that sucks the inchid ification of the web via these crazy ad and tracking platforms with all of these crazy packages these massive images not being optimized all these things suck like legitimately like they legitimately are terrible and I you'll never convince me out of that but that's not react that has nothing to do with react go back to the old web we had a ton of shitty pop-ups and viruses and all these things and the sit's loaded like [ __ ] then too the JavaScript that takes computing power and this becomes even worse on phones because let's face it a lot of people most people these days use the internet on their phone and these websites just drain your battery like no tomorrow have you ever navigated to one of these websites on your phone and just literally washed as your battery drops before very eyes you know what I'm going to do a test and we're going to include something at the end of the stream my phone is on right now it has 85% battery I'm going to turn the brightness down all the way I'm going to turn on the settings so that my screen doesn't go to sleep auto lock never I'm going to go to a random react site I'll go to upload thing so I'm now on the upload thing homepage on my phone and I'm going to leave this for 30 minutes you know what I I'll switch it to dark mode so that we're actually just measuring the performance of the site and how it affects my battery cool so I'm now on the site let me dark mode I my list of apps you can see them here I'm just going to leave this on we're at 84% now getting started and we're going to check back at 30 minutes set a 30 minute timer siries sucks at my native software my phone's the problem more often than like other stuff pay might be a better test uh to says media but yeah the media is going to kill the battery because again it's if I have a video playing that's going to hurt B not react and I want something that's just the react code cuz that's the problem here right I'm not even going to disable background Services I'm going to let everything else go on here because afterwards I'm going to test the same thing with Astro set a 30 minute timer cool so we're going to leave this for 30 minutes I'm at 84% right now screenshotted and I'm just going to leave this and in 30 minutes it's going to go off we're going to record what the difference is and I'll do it again with Astro and my port editor is going to have to find a way to stuff this all in the video I am so sorry FaZe you'll make it work because this is without question the most [ __ ] argument of this entire video because the thing making your sights drain your battery is Media playback animation advertising tracking tons of network requests none of these things have a thing to do with web Frameworks and software like react has no negative to do with the battery impact that we're talking about here Insanity my timer just went off for the 30 minute Mark and I lost 1% of of my battery with my phone on a react website for 30 minutes 1% 30 minutes with a pretty sizable react app open it's the upload thing dashboard which is a big react app but it doesn't have anything else it has no ads no media nothing else but react cost me 1% of my battery at least if it wasn't my screen or the radios or all the other things but 30 minutes 1% thinking react isn't the problem here but just to confirm I'm going to go to t3g which is a site using Astro not react we're going to set another 30 minute timer and check on this again in a little bit so we're at 83% right now set a 30 minute timer 30 and we'll check back in another 30 minutes oh wow switching SES and doing all that knocked us down to 82 so we're starting at 82 for this test we have just finished the Astro test with my homepage on Astro my my light's making that hard to see 30 minutes oh wow my batter is at 78% I lost twice as much battery on an astro site as I lost on my next site actually four times as much I lost 1% in 30 minutes on a react site and I lost 4% on my empty static Astro homepage there's a reason why it kind of baited you my as homepage has a very subtle CSS animation in the background that slowly fades in and out and doing literally anything at all is going to cause a massive difference in what's actually using energy on your device if you're on a static site that happens to be using react but the code isn't really running CU you're not doing anything it's not going to magically use a bunch of battery because you chose the wrong framework the same way using AST is going to magically save your battery if you had a video file or photos being rendered or css here that's going to use a lot more of your battery than react ever would and the belief that JavaScript is somehow the thing killing your battery life is as delusional as thinking Astro will fix it because Astro according to my test here has four times worse battery performance but it doesn't CSS does but for whatever reason we don't see people saying CSS ruined the web I digress back to the video and Shout out my editor FaZe for dealing with stitching these clips in because these came in randomly throughout the rest of my stream and these sites just provide a worse user experience so have you ever clicked the back button just to find out that it doesn't work like you would expect it to that's because the back button has been hijacked by the JavaScript framework that that website is using yes bad routers suck but do you know what has way more bad routing the piles of redirects any spam site gets if you click something that's an ad you go 15 redirects before you get to it now the back buttons even more broken are there websites that are using things like react router incorrectly and break the navigation stack yeah I can't remember the last time I found one of those like legitimately can't oh that's actually a good point chat it's funny saying chat and chat but uh I like this framing to Steelman you can say that his argument is interactivity ruined the web if that's his point if his point is that the web is for finding static things and going to static sites with static content that should all be free and easy to access and the web's going in a direction I don't like cool fine argument that we can have if only that was the argument that was happening here and if they didn't implement it correctly well oops and have you ever gotten caught in an infinite loading Circle well that's just because all of the JavaScript didn't load in because a lot of these Frameworks they initially load in no HTML at all and they only load in JavaScript and don't worry guys because that's a feature not a bug almost every time I've seen this is cuz the JavaScript failed to load because of a CDN issue to do with the issues he's bringing up here again I am getting more and more frustrated as we go and if the JavaScript doesn't load in for whatever reason well uh let's not worry about that and so that is why every website these days just feels slow and Bloated and buggy now a lot of people have already complained about this I'm definitely not the first person to notice this but as a web developer myself I actually want to see the web become better and there is some light at the end of the tunnel because a lot of newer tools are starting to move away from this idea that every why do you think Astro exists Astro exists because all of the old tools sucked so hard that making static sites was rough and if you got used to using things like next react Gatsby all these modern tools and then you went back to do things the old way it was depressing and miserable my quote that they actually used to have on the they might even still have it is that Astro was the first time I didn't hate building content sites because it was the first time that like I could use the the tools and things I was familiar with and use and get all the DX wins that we get from all the stuff while writing a website that was static and even then I showed earlier that the performance of the spa react approach actually feels a lot better as an end user even on text based websites everything has to be a single page app so some newer Frameworks like Astro which I've previously covered on this channel they combine things like the nice developer experience of using Frameworks like react while keeping the end user in mind so you can use all of your cool JavaScript Frameworks but when the site builds it only uses JavaScript when necessary so it still loads in HTML and CSS like you would expect and it only uses JavaScript when the site actually needs it to be interactive do what else does this now I'll give you a hint it starts with n and ends in X the only way you get client side JavaScript in next now Beyond like the core navigation bundle which by the way as does now too in order for their transitions to work so the only way you end up loading client side JavaScript now is if you mark a file with used client everyone's moving in that direction we we've figured that out like if we can ship HTML we should and if we can't we shouldn't but the idea that something that is focus on HTML is inherently better for all Sites is a fundamental misread and to not include the fact that what you're writing right here is jsx by the way you didn't know that Astro moved I think it was version three they moved off of their custom templating language into jsx because jsx is a phenomenal standard that was built largely around react and its needs that has grown to the point where whole Frameworks are being built around it directly I do wish Eric played more with nextjs and tried to better understand it before this cuz uh oh and this is how things are supposed to be now people are finally kind of waking up to this situation and people are taking the trend of more sensible Frameworks with less JavaScript shipped to the end user and I do think it is a good thing but I still think that it okay this is adorable could anybody see the issue that I'm pausing and geeking out over here because this whole thing has been about the performance of websites where does this image come from and is it optimized or not how does this image get optimized how do we how do we load something that is going to be way bigger than any of the JS binaries here well if you're not building image optimization Solutions you're screwed thankfully Astro has an astro image component now that does a lot of these things but you need to to set this up now this is a problem that you have to to deal with and thankfully Astra realized oh [ __ ] we need to fix that but you're literally coating a worse problem than the one you're complaining about imag watching a video of a chef complaining that some other Chef's Kitchen is dirty saying like oh did you see like there was some like splatter on the wall of some spaghetti like residue like why is their sauce like here why are these dishes not cleaned yet that's gross as they're like scraping rat [ __ ] off of a bowl it just the the contrast here is killing me because poorly optimized images are 10 times worse a problem than anything else we talked about in this video kind of going in the wrong direction because the build process is still extremely complex and fragile like in Astro this framework that I reviewed it still needs 146 megabytes of dependencies just to build a basic hello world with Astro so I'm still not completely sold on some of these new Frameworks now it should go without saying but for simple websites that don't have a lot of interactivity JavaScript is almost never needed there are things like static site generators now like Hugo which I have covered in the past that is still one of my favorite tools that I use to build websites but these tools like Hugo they have never been better and you can build huge complex sites quickly and you don't have to query a database for every post like you do with something like WordPress so for building small to medium siiz websites this is definitely the best option I think man Hugo is so big and Bloated I can't believe developers are installing all these dependencies they have to install go and set all these things up just to contribute to your site like why not just use HTML like it's what the browser is using anyways why are you adding all these unnecessary steps and dependencies just write in HTML come on but I think just being aware of all of the issues with the modern web is the best first step and when you're building a new website or a new project really ask yourself do you need a JavaScript framework even if it seems like you're saving a lot of time at the beginning you can run into a lot of issues down the line with these especially when we're talking about performance which can definitely impact if people actually want to use your website or not and so before you start a new project just ask yourself does it need this framework and is there any better more efficient way to build what I'm thinking about and so that's how I got to the current state of the web and my dream is that someday I will be able to browse Reddit without having to crash my browser yeah Reddit sucks I I Can Dream right yeah I have so many feelings that was a trip yeah the blending of websites and web apps throughout was messy my brain is going back does anybody have a link to the HTM x [ __ ] post about how they couldn't order a pizza and they blamed me every time Theo says HX is for non-js devs or for backend devs or Focus devs I want to pour bleach in my eyes to be clear I have no problem with JS react or spelt on a technical level however I think 90% of all websites do not need to be written in react we shouldn't tell new developers that the only way to build a website is react forget about programming for a second a few nights ago I wanted to order pizza from my favorite pizza place when I opened their site it took a good minute to load and at the end I couldn't order because I kept getting weird error messages the developer of that website was probably a poor Junior Dev who was told by people like Theo that real front and devs use react I think about this far too often this is the funniest thing anyone's ever said about me possibly they're mad that they can't order pizza and that's my fault for pushing react huh I think I'm going to leave on that note cuz I have nothing else to say here uh use the tools you like ship fast learn lessons when there's lessons to be learned don't [ __ ] on other people's porches without a good reason because uh yeah I wanted to go in liking this video because there's some good points to be made here about how a lot of websites have gone to total [ __ ] and like the Reddit thing sucks I agree but that has nothing to do with react this has everything to do with the way these companies are structured the way the engineers working in the cultures around how these things are built in the first place and if users really did care about these things we'd all go move to the faster apps if you think there's a huge disadvantage that these developers have by building things in react you have a great opportunity go rebuild them in something faster make a shitload of money and prove all of us wrong and until then probably going to keep using react so uh till next time peace nerds




## JavaScript Framework Tier List - 20231224
so there's a lot of Frameworks now like a lot of them I get asked questions about them almost every day rather than continue trying to compare all these different Frameworks and make my arbitrary judgments decided to do it all at once and rank every single JavaScript framework including a bunch I haven't used don't take any of this seriously we're just here to have some fun but without further Ado let's dive in we need a good middle ground like something that we all agree is like a specific level of mid so that we can put that right in the middle as a a point of reference but I don't think any of these are mid enough to fit that rule that actually makes this quite hard what is the most mid framework I'm leaning towards vanilla JS I think no framework is as mid as you can get it's literally vanilla think that's fair so we'll start with JavaScript as a solid C tier because while it's not going to make things worse for you it's certainly not going to make them better and now we can rank every other framework against how it compares to just using JavaScript which is why obviously we have to put jQuery in s tier jQuery is why the internet we have now exists so yeah s tier all the way still a fantastic experience the majority of websites that people go to still have jQuery on them somewhere fantastic jQuery gets s so what do we go to next should we just go in order let's just go in order this I actually happen to know as Alpine but I have went out of my way to avoid Alpine for a long time time so let's take a quick look at Alpine JS Alpine your new lightweight JavaScript framework we love when their recommendation for how to set it up is a script tag that's that's how you know we're in deep simple lightweight powerful as hell Alpine's a collection of 15 attributes six properties and two methods declare a new Alpine component it's data dynamically set shl attributes listen for browser events got to love that like putting JavaScript in a string soone just said it's like mini view it's like a a cursed version of you ooh xhtml that sounds familiar to something we'll be talking about in a bit it looks like what this is doing is it's setting the HTML contents to whatever this ends up returning which is pretty cool can see how this would be useful having a transition elements and all of this but it all as part of the HTML hope you find Alpine to be a breath of fresh air silence among noise being that it's basically view syntax for a mid version of HTM X I'm putting that in a solid between C and D tier I feel like it would have been higher before HTM X became relevant so I'm putting it D for now now we got to talk about angular angular's had a long journey and from angularjs to angular alone that transition was nuts but it also helped Kickstart this new component based web and allowed for much larger web code bases to become the norm most of the first like giant websites with hundreds of developers contributing lots of dynamic features every day were in angular that said I have never enjoyed myself writing it it is one of the most painful Frameworks to work in that I've ever used I hate almost every implementation and design decision made within it I want to give it like an A in spirit and a D in use for impact and importance it's an A but please don't make me use angular okay Astro being in here is a scam because if any of you guys know this Astro is not a framework Astro ships no code that runs in your browser you can use it to generate HTML on a server and then you can mount like a react component or whatever in it but for being an imposter F tier the whole like web transition stuff makes it a lot more possible to pretend that it's a JavaScript framework but it's not there's no router there's no JS running in the client it's not a real framework get out of here oh no ember I forgot this was in here I do my best to forget about Ember brief Story Time Ember is a big part of why I didn't think I liked web development because when I started at twitch we were still using Ember for the front end and rails for the back end and I hated every moment of it I want to show you guys some Ember syntax just so you can understand that I'm not insane here if you've never actually looked at Ember code before there's a reason they don't put any on their homepage they don't want to look at it either okay so the first thing you should know about Ember is that they're really big on code gen so like when you want to make a new route or something you run a script or a CLI command and it generates that new pile of things you need they also have their own crazy templating syntax HBS it's handlebars based but they've done some crazy stuff to it interactive components okay we have been through 1 two 3 four five six seven pages and now after writing two dozen unit tests we might finally have some JavaScript code which obviously is classes because why wouldn't it be managing state with tracked properties it you have to delete that and attract decorator which now means you have to use one of their crazy compilers that handles these decorators if you reference a variable in the template but forget to add it to at track you'll get a helpful development mode error so now that you've bound that as tracked you can now access this and once you want to actually do the toggle onclick this do toggle size you have to combine handlebar syntax with their weird binding it's horrifying and there's like no deterministic anything between them you basically need Dev mode to tell you if you forgot stuff if this dot is large show else H God forbid your JavaScript code and your template aren't in different files with no deterministic Behavior between them I know crazy thought oh and now they're showing you how to set up your environment no I I've read too much testing code I don't care anymore Ember is going where it has hurt me f tier somebody just said GitHub doesn't even know how to highlight Ember code I want to see this that's hilarious because again putting decorators in front of a variable isn't really a JavaScript thing so most javascripts and even typescript parsers are going to entirely screw up the highlighting like the argument against jsx is that it ruins your JavaScript and it's no longer JS what the is this then like come on you you can't say the reason you didn't do jsx is because it's not JavaScript and then do this instead that's enough crapping on Ember got to talk about some real Frameworks here with hand bars for those who don't know handlebars is a templating language it's called handlebars because you use brackets all the time to embed values like all of the time and it's like the handlebars or the little curve like a mustache which is also their logo clever branding but the the point of handlebars is you write code that requires specific things and then you can feed it values from JavaScript and it will handle all of the registration there this is a handlebar template this it be an HBS file or you can technically write it in your JS files too and then you run the handlebars framework pass it the object with whatever you want and then it will render so it's like a an interim step for templating your HTML to pass it values it's important for its time the idea of a standardized way to update and render HTML from JavaScript was a really important concept it was almost like the opposite side of what jQuery was doing which jquery's thing was given you have this HTML already we're going to allow you to bind behaviors to it handlebars is here's how we generate the HTML really interesting concept it definitely helped us as a field rethink the relationship between JavaScript and HTML so I want to put it slightly higher than vanilla JS for that reason let's do it slightly better than vanilla JS oh boy now we have to talk about quick if you're not already familiar quick was created by mishko who was the original creator of angular there's a lot of problems that modern JavaScript Frameworks have introduced to the web that he is really upset about and probably feels some amount of responsibility for as the creator of angular those problems include loading way too much JavaScript time to interactive getting way slower over time data waterfalls causing multiple elements to pop in synchronously instead of all flowing together at once a lot of these types of problems have made the web worse to use especially if you have a bad internet connection and he is built quick to Target those problems the thing he's focused most of Quick's branding on is the concept of resum ability most other JavaScript Frameworks have an idea of hydration which means given some HTML and then given some JavaScript the JavaScript will catch up to the current state of the HTML by rendering a lot of the parts and this takes some time if you have a giant HTML file and then it takes a while for a giant JavaScript bundle to load and then it has to process in your browser and then it has to run and then it has to attach to all the elements in your browser and then finally you can now interact with buttons and if you clicked a button in that window it just wouldn't work Quick's focus on resum ability means that it can skip a lot of those steps embed a minimal amount of JavaScript and immediately bind to a button here's a diagram from the quick team obviously made an excal dra quality scal dra users meant to Showcase how resum ability gets your HTML ready faster than with traditional hydration where you have to download the JavaScript parse and execute buy the listeners but there's a lot going on on the other two sides of this and I find that for the vast majority of users the amount of time all these steps takes is pretty low and if you only have to download the JavaScript once then most of this gets eradicated for future visits resum abilities in my opinion not that big a deal and the only place you would feel it is the amount of time it takes from when the page first loads and shows you content to when you first click a button so unless you're opening a page and immediately clicking buttons and you also have never been to that page before I don't think it's that big of a deal so this is where I don't necessarily think Quick's focus on its differentiators is as valuable as it has been pushed especially now that other Frameworks like react are catching up and having hybrid hydration models where some content doesn't need JavaScript at all quick has forced us to think about these things more but the more of thought about them the more I realize hydration isn't too big a deal and is getting better anyways but if we look at the actual experience this should look a lot like react to you big difference is the component dollar sign code that you have to call in order to basically tell the quick framework hey by the way this is a component everything else Works roughly how you would expect here is using quick City for data loading so used ad joke it's meant to be a similar to a hook in here you can just call async code because we're wrapping it with this rout loader helper pass an async function it fetches some stuff and then it Returns the Json pars with this type and now in an actual component we can call use dad joke and return some stuff and now this page won't load until that content is done because this will run on the server through the route loader you can also do an action which is the opposite way what you'll start to see with quick is it's this weird hybrid of something like solid and something like remix and react and the result is seemingly pretty cool but a lot of the concepts and a lot of the things they push around like JavaScript not appearing until you scroll to the element that needs it like not necessarily knowing which JavaScript is or isn't going to be in the browser when you actually load the page the actual DX corks around this have been a bit weird to get my head around in the bit of time I spent with it and I don't think the benefits it introduces are worth it that all said it's really cool to see a framework taking these problems seriously and pushing the web standards and for that alone I have to put it a little ahead of JavaScript quick slightly better than JavaScript speaking of slightly better than JavaScript lit if you're already familiar lit is the framework built around web components they wanted to take the actual web standards and try to make them usable because writing a web component from scratch it sucks it's really not fun so this is a vanilla JavaScript version this theoretically would just run in the browser which is really cool and now more importantly you can mount this custom element that you've bound as simple greeting in your browser as a traditional HTML element and it will just work that's really cool I don't think any of the other Frameworks here have that capability where you've now created an element you can access in the browser but that's the goal of lit is to be as like traditional HTML and JavaScript in the browser as possible using all those standards but giving you this abstraction on top that makes it actually somewhat Pleasant to use lits a weird thing to use for your big projects and I wouldn't enjoy working on it with a huge team trying to build this gigantic platform but if I wanted to have an element that could be reused on future projects or just take one part of my blog and make it interactive lits really nice for those types of things and again I think it's quite a bit better than vanilla JavaScript I would actually say it's pretty similar to handlebars although I would hate using it less so I'm between b and a tier for lit because it's solving problems other things don't solve but I also wouldn't use it for large things I will appeal to chat we feel an A or B tier for lit feels like B is the consensus we'll leave it in B cool on the topic of web standards and working really hard to comply to them we have preact in case you haven't heard of preact before it's the fast alternative to react it's focused is the bundle size and they have some of the strictest bundle size rules of any project I've ever seen if you want to add a new feature to preact you either have to build it externally as a library or delete as much code as you add in order to make sure its bundle size doesn't go up in the process really really cool it's not react so you can't just like take a react project and expect it to work but it does work pretty often and you can write a lot of the code you're used to writing with react in preact both with class components and also hooks they have the hook one on top here but the rest is still class components that's kind of hilarious that's really funny actually but yeah preact is cool it's nice having an alternative to react like this one of the many cool features of preact is HTM support which is hyperscript tag markup it means you can use a template literal in JavaScript which is when you put those little like back Texs after a function and it calls the function with this as a string input and by doing this you're able to write effectively jsx inside of your Js s not need a transpilation step and this gets parsed at runtime so you can make a project that uses preact and looks and works the same way you would expect react to work without needing a build Step at all this was actually a really important framework for me as I was starting to deepen my understanding of these Technologies because it helped me understand how all the parts assemble and not have the black box of the Builder abstracting a lot of those parts from me so I personally owe a lot to preact they also were the first to get signals working in react which is really cool too that all said the recent numbers in the performance benchmarks haven't been as good as they used to be when comparing to react which is obviously the framework it's built to compete with but it's also really important for the web and I'm really happy it exists I feel bad just putting more and more things into B tier but I'm doing it B tier really good educational tool really happy it exists useful in certain use cases not what I would reach for speaking of what I would reach for we have now reached react which obviously I've never heard of HTM X HTM X is an incredible new framework that allows for non-javascript developers and backin focus developers to make interactive web applications if you've ever worked in traditional backend world trying to build a web app usually the experience is once the user has loaded the page the only way they get new data is if they refresh the page or if they go to a different route or if they post from a form but if you want to have a button that has like a loading State when they click on it or if you're trying to make a Twitter Club and you want to be able to type a new tweet press enter and have the new tweet appear in your feed without reloading the whole page those types of behaviors were really hard to do without introducing a JavaScript framework which is why HTM X wrote that JavaScript for you and now you can just bind to a template directly I have a whole video about HTM X and why I think it's so cool but I'll show you a bit of the syntax super quick it's similar to what we were seeing before with um Alpine but here the syntax is quite a bit more powerful and doesn't involve writing weird inline JS HX post means when you click this button it's going to post to to this endpoint SL clicked and HX swap outter HTML means whatever this responds with that HTML content of this response is going to replace the button so if this returns something else like a div that says thank you then once you've clicked this and it's received that response this will be replaced in your Dom with a div that says thank you this allows you to not have to write JavaScript or client side code at all and just change your template up a little bit in literally any existing backend framework it can be JavaScript it can be go it can be rust it can be python it can be Ruby it can be anything and just have better experiences for your users for all of those reasons I have to give HTM X an F tier because again it's not a JavaScript framework anyways let's talk about solid solid first and foremost starts with the letter S so I think you guys can guess where we're putting it the main design goal of solid JS was to bring back the Glory Days of knockout and try to make something that made signals approachable and fun to develop with while not compromising on performance at all I still remember the first time I saw solid pop up in a benchmark and I was blown away because it looked just like react code cuz it's still using jsx under the hood it's still jsx when you write it but it was performing almost as fast as vanilla JavaScript in every Benchmark I saw and at that point I still believed jsx was somehow causing performance issues and theoretically if you wanted the fastest app you wouldn't use jsx and solid Prov that wasn't the case at all this is one of the best getting started that we've seen so far during this it's immediately talking about the code that's specific to it so first set first is create signal last set last create signal think of this like a use state in default values and you can create an effect the catch is when you use first and last you're not just dropping those as values you're actually calling them the reason we have these function calls is so bindings can be created through the signal layer a signal is an update chain where when something changes it knows everything that needs to be updated immediately with react it just changes everything from the top down with solid since we called first and last in this effect it knows when those change this effect has to run again here we have an HTM based vanilla JS example with solid so that you can just drop this in the browser and see it working without any build steps or running webpack or stuff like that which is again really cool to see but you lose a lot of the IDE benefits a lot of the type checking and the things I would expect from an everyday framework I don't know if I would have put this so early but it is really powerful to see that like this is all it takes to run solid count set count create signal zero timer equals set interval set count count plus 1 1,000 so this will now update the count every second and on cleanup you just call wherever inside of your component and now it will clean up and run this when the components goes away and you can return HTML or you can use H which is very similar this is kind of how old react code would render before jsx but this is all you have to do in order to make a component that updates itself you can also make it a button and buying the on click to update to in the same way you would expect it all just kind of behaves how you would expect it to which is really really cool solid's a great framework solid start is making a ton of progress as well do not discount this framework I still think we've yet to see the deserved rise of solid I'd put it just behind jQuery in s tier and when you consider the fact that it's already got an S that's two s's for solid hard to beat speaking of the letter s we have spelt how does one talk about spelt it spelt was a very important framework for me because it was the first one to really challenge my my dieh hard react bro nature I remember the first time I saw rethinking reactivity by Rich Harris phenomenal talk I have a video all about my favorite tech talks coming soon subscribe if you haven't by the way because then you'll get to see that video right when it drops and come on subscriptions are free guys helps us out a ton anyways spelt this framework showed me that first off react wasn't truly reactive but more importantly it showed me there were things react didn't do that made my web development experience a bit more painful like react had no opinion on Styles and that started to really hurt once we got into react native where they had to have an opinion react doesn't really have an opinion on Builders or bundling now it kind of has to because they moved to this new server component model but previously it didn't at all now they just throw out a webpack plugin and partner with the next team in hopes of figuring those things out spelts done a lot that's really good like a lot but they also have done a lot of things that I personally don't love the big one for me is single file components when I'm working on an app and I have some piece that I want to reuse I want the ability to break it out quickly and not have to lose the context of the file that I'm in this is a problem I have with view as well so we'll talk about it more there by using spelt you have now committed to a specific code architecture that you don't really have control of because of the waist Felts designed and I know a lot of people really like that because it means all of the components are going to have everything contained within them but it also means you have to do crazy things with your markup syntax this is why in both spelt and view we see a lot of weirdness in their templating neither of them are using jsx and in spelt you're using spelts weird markup syntax sure they have some good examples do they have the like getting started cool get this started quick SP demo app typ script I don't like they defaulted the JS doc now do you want to try SP five I kind of want to try out spell 5 Good Start let's not do this spell five beta do something risky okay cool stop complaining nice it's just the the recent beta seems to be broken anyways this is a default page not much interesting here sperle is where things get interesting this is their Wordle clone and apparently you have to run bun Dev once just to get your type definitions because they generate those via the dev server which is again one of the problems you run into when you're not using vanilla typescript because they have both their custom template syntax and they have implicit behaviors like let Data Page data this binding and these definitions these come from page server TS but we're not importing page server TS here we're importing from do/ dooll types which is a generated file that gets created and hidden by vs code once you run the dev server such that when things change here it will get updated accordingly think you even go to the definition yeah and you can see it is this crazy generated types DTS stuff but thankfully it is actually generating the type directly off of the page server JS file so you don't have to worry about the type definition being stale if you close your Dev server yeah not great this is why I like something like the new server component model where you can just await in the component but that's not what I'm here to talk about and I know they're working hard on continuing to improve the experience here what I'm here to talk about is more of the weird syntax decisions because we have spelt colon window spelt colon head weird but fine but here where things start to get a little weirder # each at const current equals row equals equals equals I that's not how JavaScript works at const what is this well because they built their own templating system and sometimes those templates need to be dynamic they also had to reinvent JavaScript in the same way that jsx is Reinventing some of HTML in JS zelt is Reinventing JS inside of HTML here and I personally don't love that there's a lot of people who are going to I already see embed in chat and by the way embed is based they're the one who made this tier list for us in the first place and we're seeing people say they actually like the syntax but I like jsx I like that my JavaScript is Javascript and that I'm not writing a different JavaScript once I've gotten below the line like in the script tag you're still writing JavaScript well typescript you specify LS TOS but from there down once we get into here once you're in your markup and you want to do things dynamically all of a sudden you're writing this weird hybrid thing array. from array 6. Keys as row pen row like what people are saying in chat it's hard to believe that anyone would call this more readable than jsx because you just write the JavaScript for each or map in JavaScript it's weird I will also give credit to spelt devs it seems like a lot of them don't use this type of thing but at the same time this is the example that you get when you generate a new spelt app so I'm not like reaching really far to find bad spelt code just is how it is no yeah they have a whole special tag section for spelt Joy they even have an alternative to console log at debug it's cool they have that but weird that you need that you know what I'm going to make some changes I'm going to move lit up to a tier so that I can put spelt front on B tier you know what I can deal with that I would these are very close for me where like spelt so important and it's pushing the right things forward I love Rich Harris I think he's one of the smartest people in the space but I wouldn't use spelt cuz I don't like the syntax that's why this is tough for me now that we've talked about a framework that reinvented the Syntax for writing the code let's talk about view view is really important and view has one unique characteristic that I want to go out of my way to call out it's been misunderstood when I previously tried to do this I want to be very clear View's International Community is unmatched their docs are internationalized almost as soon as they drop there is so many incredible people all over the world working on view the community is unlike any other community I've seen in the webd world it truly feels like everyone is able to join that community and take part in it and that's a huge part of why something like V has found this success it has as well The View Community is incredible and if English isn't your first language there's a very high percentage chance you started with View and I think that's an awesome win I wish more of these Frameworks had communities that big outside of the US and outside of English-speaking Western Nations that said they kind of started the single file component Trend where they made the view templating syntax and they kind of require you to keep everything in those files and if you want to break out a little bit of logic to reuse you end up with a lot of the same problems I just showed with spelt similar to what we just saw with felt they have a four equivalent but for them you define a ref with items or whatever you want and then you have this v-4 syntax which specifically tells the view runtime to make a new one of these components for each item in the list it kind of requires you to do more of the work outside of the markup and inside of the JavaScript layer which is nice but it also means that things you can do in it are inherently less dynamic as a result so it's checks and balances is you know items. for each item variable scoping is similar uh and again it has this weird Syntax for like defining a value in line so that it has closures and scope and now you have to learn about these specific behaviors they're less mindboggling than the ones in spelt but they're still not just JavaScript and I think when react calls itself just JavaScript and everybody freaks out this is specifically what they're talking about and yes I know V jsx is a thing but I want to show you guys something because I have been hearing about this forever that is not an argument do you understand like Vue jsx is getting a little more adoption but for less than one in three of V users to be using jsx when they're using view this is telling this is very telling and I don't think Vue jsx is a good enough argument when it's not the standard and also from what I've heard on every release of view it tends to break and you have to wait a while for it to catch up similar to the next experience that all said view is still very very good there's a lot of people I know and trust who still lean on view as their go-to and I think that is a very good choice and a lot of teams especially those that aren't primarily native English speakers the state ofth View Community is just so much better that it it deserves a low a tier I still would use felt first and also view needs to ship Vapor already if you're not already familiar view vapor is their attempt to rewrite view such that your code doesn't have to change but under the hood it's running very similar to solid that's why it's named Vaper it's a pun on solid in like states of gas so very excited for Vapor if that can actually happen view not a bad choice love the community don't love the syntax don't like single file components let's talk about next oh next my issue with next is that most of the things that compose next and that are truly unique to next I hate especially from the pages era God I hate to get serers side props it was the wrong way to do server side data it was an attempt and it was a really bad one and I I didn't enjoy it that said it was one of the best ways to build backend Integrations for your front-end app but almost all of the the front end code in the original next versions pre-app router was really painful and for the basic file based routing you got it wasn't worth it but for the API directory where you could quickly serve Json payloads from an endpoint inside of your react app with good relationships between those if you use something like trpc NEX js's Primitives were in an incredible state to be abused and I abused the hell out of them so for me next is an S tier for what you can do to it but its actual core pieces were tier now i' put them at a solid B I had with the new model there are many more Primitives that are very fun to play with and I've been doing some nonsense with those some pretty absurd but man I I find a lot of the decisions bad still I have a whole review of app router where I talk more about this but I'm I'm just still not that into file based routing I get why they do it it makes the compiler easier and it makes onboarding and a codebase easier but overall I feel like most of my recent love for next comes from server components not next and for that reason hi B tier let's talk about remix I have talked about remix a lot and I will say I'm much more hopeful for it now recently Mark dalish has joined the remix team and he has been doing wonders for them the current state of remix is the best I've seen it and it's going really far really fast while it doesn't seem like they're prioritizing server components which kind of sucks because I was excited for a more minimal server component implementation they are getting V working and that's what Mark's primary focus since he joined I'm really excited to see where remix goes with these new contributors because everything I've seen for the past few months has been super exciting that said I still hate a lot of the design decisions around remix my favorite is when they show examples of how great use action is so here's a basic use action example an action is similar to a server action in next if you're familiar with that but in more generic terms it's an endpoint that you can post to so when you create a route in remix it can have one loader which is what loads the data for that route it can have one action which is what happens if you post that endpoint so if I want to post this action I have to have a form that's on the same route and just by putting the form in the same route it will now know to post to this endpoint but that means there's no relationship between these like if I move this invoices component somewhere else this whole model just breaks immediately because it is required that you collocate the code or you now have to deal with this crazy dependency chain so if you have a component that needs some data and it's not in the page route you better hope that that data exists wherever that component is mounted like let's say you have this loader that grabs Prisma user. find many and this user's component isn't a page component this is just in a different file but then you call this in a route that doesn't have this loader if just silently fails and that's the problem when you have this route level separation where you have a magic loader or action function that isn't actually being called from your code there is no code linking this to this other than this type of call which by the way a lot of developers and contributors had to fight tooth and nail to get the remix team to actually merge the change to allow you to add a type definition to your loader data and God forbid you have a page that you want to post two things to let's say we have an action here for adding a new user but we also also have an action for deleting a user now that you have that you need to go Define new endpoints or even better have a switch statement in your action that checks which type of action you want to actually do so you're not writing an endpoint unique to the action the user does when you define an action remix you're not defining it for a component you're defining it for a route and you hope that relationship between the route and the component stays tightly knit and as a result I find it very very rare that the action primitive actually ends up making sense unless you have a code base that only one person is working in it is just not a good primitive for these reasons and without a solution like trpc or an abstraction that guarantees that one to one relationship this scares me and this is in contrast to how things work in something like server component model with server actions where you're actually importing the code you're actually attaching the form to that definition and rather than having a big switch statement where you manually make sure each input goes to the right place it just does it for you and I don't like these non-deterministic behaviors that exist inside of remix where moving a component somewhere might just break break your app entirely that said they absolutely normalize some important patterns everything from streaming updated content from the server as the page finishes loading to caring more about time to First Bite to running react on the server caching The Primitives to using web standards more without remix I don't think nextjs or even react would be where they're at today I would just never use this framework in a real code base it still doesn't behave in a way that I consider reliable enough unless you're very very remix brained your whole team is very very remix brained and you're not really using actions and loaders as the main layer for interfacing with your application yeah those are my thoughts on remix once again very important framework for the web not one I would use I I'll put it on quick tier I think that's fair also funny how all the things that are behaving like vanilla JS that's goal is to be modern JS but better in standards right there it makes sense they're all grouped together oh God Gatsby oh God I forgot this was here I if you're somehow not familiar with Gatsby it pioneered this idea of a react framework that generates HTML pages so if you wanted to blog in react and you wanted it to have HTML that was cached and would load as soon as you open the page with SEO and all those types of things Gatsby was the first attempt to really do that and the way they did that was and the way they did that was I you not graphql they built a giant graphql layer to pass data that you would either be through one of their plugins or loaders to get things out of your old WordPress site or their markdown parser plug or any of those other things that would then serve as a graphql schema that you would access in the pages it would then take all of those things you've defined in your schema and all the plugins and such run all of your pages one at a time run all of the code for them figure out what data they're asking for grab it from that embed it spit out that HTML as a file and then you'd upload that to a CDN this is how a lot of these tools work to be fair but it was the first to do it in that huge graphql layer in the middle ended up being really painful like really painful it was was rough H yeah and obviously it has since been I don't want to say formally killed but pretty heavily gutted when they got acquired by netfi most of the framework was dropped in favor of that abstraction for graph qualifying anything and I think that's where their strengths are but their strengths as a framework are awful I mean it is still a jav no it doesn't have client code still so yeah goes right here they found the worst possible way to do a react website generator a lot of people are asking for n for context when I made this I didn't have any of the meta Frameworks like next remix or Gatsby but people kept wanting them so I added them in quick and it's only fair to add n as well no I'm not adding solid start no I'm not adding spelt kit I'm not adding all those other things Nu exists because a lot of The View Community was I don't know how to say it other than a bit jealous of what was going on in the react World with nextjs and they wanted to enable that level of full stack developer experience within View and they've done some really cool stuff in N they built a plug-in system that's full stack not just back end or front end we're working on integrating that with upload thing right now and it's going pretty well they implemented an actual RPC like solution that uses typescript to let you know when you're fetching data what the type's going to be I can show that a bit they have a use fetch helper function as well as the dollar sign fetch for making Network requests based on user interaction and when you call this it can look at what this endpoint serves because it's your application and it will grab the type definition from that and give you the correct type for your data it's still doing some code gen stuff behind the scenes in order to assign the use Fetch with this specific input to a another specific return but it's pretty nice and as such they also apply this to their fetch call so you can use dollar sign fetch is their custom fetch pass it a string and it will now know the type of this response and you'll know what users is when you get it beware that using only fetch will not provide Network called DD which is really nice too so if you call a wait use fetch API count in five places on the same page it will only call it once which is one of the reasons that fetch was overridden in the new react model they got everybody Huffy but but having it built into the framework in A Primitive level it's really nice and I think a lot of these design decisions are great n is the only way I would personally ever use View and I think it's in an incredible state every time I see what they're working on every time I hear an update from Daniel row or anybody from the N team is getting more and more compelling to the point where I would argue n is one of the best meta Frameworks and I wouldn't think about using view without it as such I'm going to put it slightly ahead of you which also puts it at the highest rated meta framework see why you guys me to put that there do I have to talk about flutter now flutter for web instant s tier it's the only thing that fully escapes from the web Primitives and obviously as you get further away from web standards things get better who needs the Dom who needs a button element when you could just render everything in the canvas it's great web standards web Shands come on nobody needs those screen readers those are so 2012 come on yeah don't use for web even my Die Hard friends will not recommend for web like the people I know who are the hardest core about they will tell you not to use it and now we have our last two I should give react a real score at the end I'll do that so let's do these two and then I'll actually talk about react elm's an interesting one if you're not already familiar with this chaotic logo I wouldn't be surprised because I didn't know that was elm's logo until I went to go find it for this apparently it's blue now that's a nice little interaction elm's interesting because more than any of these other Frameworks Elm is a language and they're very aware of that they're not pretending not to be think is telling that their benchmarks are against Ember react angular 1 and angular 2 feel like elm's not gotten much love for like five plus years now so here is an example markup syntax is weird it's very nested in vertical just a dark mode wonderful just dark mode for this half so yeah it's weird I don't love it it's actually very similar to Swifty if you've used that but it's very strange and having to manually assign text first you pass it an empty array which says this doesn't have children and then you pass it another array which says this is the text element and comma means this is the next element it's weird I don't love this syntax like as the FP Guy this is too far for me and as a result it has not seen much adoption it's hard to give Elma rating it's kind of like rating hascal where it's just like it's cute I get why people like it but nobody actually uses it I'm going to deter it now for flash flash is incredibly based no iOS support anyone can use it works on Android crazy touchscreen friendly all of the best games ever made were made in Flash we're talking Impossible Game we're talking somebody in chat excuse me Flash on Android existed you sir your Zoomer is showing this was on I believe Froyo it was literally 2 years later on Jelly Bean Adobe Flash stopped being supported on Android it lasted for two Android releases because it was such a bad experience and nobody was using it it literally only happened so that they had points against the Apple users that was it it was awful and all of these Ry flash goes in the Bas tier yeah we'll put flashes number one that's only fair and now for the framework that brought us all here I react a lot so much of My Success both as a developer and as a creator has come from this framework so I am absurdly biased like absurdly biased here react is the only framework here that has continued to meaningfully evolve over a window as long as it has been around for angular is getting there now with the most recent release but angular's historically unwilling to change and tends to follow what others are doing react is one of the few Frameworks that still paves the way for others to build awesome things components in react introduced a new era of user experience and user interface design and the idea of a UI component library was popularized by react finding success with hooks we saw a whole new era of thirdparty libraries being built for react to enable incredible experiences in workflows everything from react query to sstand to frame or motion exists because of react introducing hooks all of those wins also exist with server components although we're still in the early era we don't know for sure if we're going to see the same level of community support and hype around server components as we did around both Hooks and components a whole but I'm hopeful and the stuff that we're building with upload thing shows that these New Primitives are really strong but that means that react relies on the community too much so easy F tier cool done we did it tier list over thank you all so much for this if you enjoyed it I'm sure you'll like my tier list where I compare every single HTML element that was miserable to make so please watch it if you haven't already and support the channel underneath there's a video YouTube things you like so you should watch that instead thank you all for watching this see you guys in the next one peace HT




## JavaScript Frameworks in 2023 - 20230111
picking a framework has never been more exciting but it's also never been harder the options keep getting better every day and as a result it's a challenge to decide and it's easy to feel like you're picking wrong we should talk a bit more about how to decide what framework is best for the projects you're working on and most importantly what Frameworks you should be using and taking advantage of in 2023 so let's get to it the first most important question to ask when you're picking a framework is what are you building generally I find a lot of the questions I get are people not necessarily asking what the best solution to their problem is it's more should I learn this thing because they assume somehow that learning the right set of things is going to magically get them hired or help them be better as a Dev while I do think learning problems at different angles and through different lenses of things like different languages and Frameworks does help you improve as a developer I think understanding what Solutions are best for and applying the best solution to the job tends to help even more and as such my recommendations almost always to pick a problem you want to solve and start from there and work backwards from that problem based on what you know and what you want to learn with all that said let's look at some problems and the best solutions for them based on the needs of those specific problems let's talk about how to pick a framework I want to be clear we are specifically focusing on web Frameworks here and web web adjacent development things when I refer to a framework I'm referring to things that are used to build applications and websites that users go to and experience and aren't necessarily technical so this is where the first question I usually ask is site or app what are you building is the thing you're building a website or an app the way I like to distinguish between site and app is based on how users interact with the site I used to think about this in terms of how much time a user spent on a page and was largely basing my decisions on what the average page session time was the more I thought about it the more I realized that the site you're watching this on right now YouTube maybe twitch for some of you the site that y'all are watching this on right now is mostly static in link-based interactions obviously if you're chatting you're sending more messages but generally speaking you spend a lot of time on one page in most of the content for that page is mostly static and as such I'd actually put stuff like YouTube under this site category whereas an app would be something more like paying more like figma where the time you're spending in the app is interacting with things that aren't links where if you click something it doesn't go to a different URL rather when you click something it does something within the context of that page and is that level of in interactivity that I use to define my distinction between a site and an app generally most Things Fall pretty well under sites but there are a lot of developers working on apps and I would argue that the apps tend to have much larger numbers of developers working on them which is why there's so much effort going into improving the developer experience for application developers generally though I think most people can sit down look at this distinction and know what they are building and from there making good decisions becomes way easier if you're building a website the next step is to figure out what the most minimal solution that solves your problem is generally people like to reach for these really big bloated all-in-one Solutions because they want a makeup decision that solves all their problems at once and I don't think that's the best way to decide on a framework or a solution to a problem you're building for so if in my case I want a static website that just has my like basic information on it and I already know some age tml one of the best starting places is static HTML site no shame at all from here there's two things that could happen which are but I need x x being some specific like interaction or library or tool that you like or prefer let's say the static HTML site you want to update on every view to indicate how many views it has you could embed that into the static HTML site or you can start looking into other Solutions one better example that I know I've run into is I start with a static HTML site and then I realize I want somewhat annoying integration that provides me when it's a developer really common one for me but I want Tailwind thankfully there are now tools that allow me to do something that feels like static HTML for the most part but isn't I'm sure you all can guess what it's going to be Astro the beauty of Astro is it's very minimal by default and you type it with their CLI Astro ad a specific thing like tailwind and they'll do the integration for you and provide a great developer experience while providing that there are lots of other Solutions in this General space there is 11t I'll say one of the things 11t is really good at is scaling and being fast developer experience when you have a shitload of stuff in it so eleven is a great solution if that's where you're at if you really hate JavaScript and HTML Hugo surprisingly decent but I really like going so from here there's a lot of awesome opportunities and paths and there are other Frameworks that are pretty good for static sites but generally a lot of the cool things we're going to be talking about are more on the app side but once you start here and you've decided the thing you're building is a site or an app start simple and when you run into problems because of the Simplicity or because of this very simple minimal Solution that's when it makes sense to start branching out and adopting these bigger heavier more dedicated Solutions but what if you go the app route what if you're in that small percentage of sites that represent a large percentage of developers especially those who are being hired and making money where is the starting point here I would argue there's a lot of different ones and the best starting point depends a lot on your experience and goals I would say the default still to this day for good reason is react I would highly recommend in this case as like the default you use react with v the reason I'm recommending react with Veet is the default point for a new application is simply because of the universality of react the support that everything has for it the quality of the documentation the quality of the community the quality of the developer experience generally speaking react is the easiest bet to make unless you have specific problems or the desire to use something else so given that I'm building an app and I want the simplest possible solution for building an app react with v it's probably a really good starting point so if you need better performance we have to first ask a question of how much do you like react your goal is to improve performance and you like react a lot think solid JS is a phenomenal option winner of the T3 award for framework of the year I'm really excited about solid we're going to go a bit into solid start soon but for now I want to start with just this app focused angle the third option here which is I hate it which is more and more common every day at that point I'd probably recommend spelled kit regardless of like what you're building with felt just because it's the the most supported way to svelte right now from here if you're building an app and your performance is not where you want it to be using react or you know it's going to be an app that has a lot of interactivity that is the point where it makes a lot of sense to break out into different solutions there are other reasons why you should leave react with Veet I need SSR there's a lot of reasons you would need a star I was considering putting them in here SEO is a really big one so that you can have your content be indexed better and rank higher in searches and also be like indexable have it come up automatically when you like post a link on Twitter metadata in the HTML is super important and Frameworks that include SSR are very valuable for that it's also the need for having some content on the page before the JavaScript loads for users who are in places where their Internet isn't as good there's a lot of reasons why you might want to have SSR and there's a lot of really good solutions for that that we'll get to in a bit because there is another option or another reason here why you might want to use something else which is my team isn't all Native English speakers something that I think we take a little for granted in the US and in general in software especially people who are watching here is the ability to speak and understand English really well the react docs suck in other languages right now because the docs on react.js.org are really rough these docs are translated well as of somewhat recently but they're not great the new beta docs are absolutely phenomenal but the translation effort hasn't started yet because they're not done so picking up on and learning react right now if English isn't your native tongue kind of sucks because I mean I'll just be frank here view if you absolutely killed it with the internationalization and general World community building with the work that they did in their documentation community and framework overall there is no more compelling reason to take a look at and potentially even move over to view then not wanting to be deep in the English-speaking American like bubble for react I do want to just on a quick tangent here quality of docs arbitrarily ranked by Theo this is super subjective based purely on my experience but I hope this is helpful for people in like the things that they're learning and doing I would say that the quality of the current react docs like a 4 out of 10 current view docs admittedly not too much experience this is just from what I know looking into it and talking with some friends let's say it's about an 8 out of ten very very good especially considering they've been there for a while beta react docs are like straight up 10 out of 10. they [ __ ] killed it raise my bar for how to do documentation however English only for now when this changes if the community starts moving over as well I'll be really hyped but generally speaking in Eastern countries and like non-native English-speaking countries view has been and will likely continue to do much better and there are lots of jobs in those countries as well so this is why I don't use view much because I am a native English speaker I can take advantage of all the cool things happening in the react community and generally speaking there isn't as much innovation in The View Community thankfully Evan you has been great about with things like Veet expanding that win to affect developers well outside of view as you see here I am recommending V which is created by the creator of you as my default solution but if react isn't your thing and you aren't necessarily like all in on Frameworks made by English speakers in America view is a good option but that's that's the view tangent there's a lot of paths you can go down here with next and all sorts of other things in the view ecosystem even using Astro with view I don't know anything about those I don't use view go find a view Creator talk about those things I will not be going into this path any further because we have SSR to talk about the next question I would ask once you've decided you need SSR is how much interactivity do you need with the SR if your answer is just a bit how much do the interactive bits interact and then a lot and here is where I will plug next with create T3 app still firmly believe the best developer experience you'll ever have with xjs is create T3 app and I do highly recommend checking out if you haven't create.t3.gg if you're building an interactive app that needs SSR actually I'm gonna do one other thing I need an API I actually really like this well I did it I finished the diagram added a bunch of logos tidied it up a bunch nothing you all need to see here I'd like to remind y'all that the goal here wasn't to tell you what framework to use so much as help you understand where each of these framework strengths are and what they were designed to do and the problems that they solve best that doesn't mean you can't use one framework for things that this path doesn't point to it just means these are the strengths of each framework and the intent of the designers in how they were made and used generally speaking you can use almost any of these for almost any of these problems there are definitely combinations they wouldn't recommend that said go at it play with different Technologies use this chart to have a better understanding of the Frameworks that you're looking at and to feel better about the decision you make not to guide you to the perfect solution I hope this was helpful I appreciate y'all for watching this I just tweeted the full size diagram out on Twitter I'll have a link in the description for that if you want to see that there in its full glory and share it around and whatnot huge shout out to flip for this edit and also letting me know that we need a new outro clip so uh sorry about the short change and I'm busy okay YouTube seems to think you're gonna like the video that's in the corner right here I think it's a pretty good one they wouldn't recommend it there if it wasn't so give that a watch if you haven't yet super appreciate you all for making it this far through if you haven't subbed for some reason come on sub thing should be right there as well thank you all peace nerds




## JavaScript Frameworks in 2025 - 20250115
2024 was a weird year for JavaScript Frameworks we didn't really get some big new invention or Paradigm or framework we just kind of kept moving along to make the things that were already going go a little bit further it's weird to say but the framework that changed the most in 2024 was angular but we're not in 2024 anymore we're in 2025 and maybe if you're watching this later 2026 78 why are you here for everyone else 2025 has started and Ryan carniato the creator of solid JS and probably the single person who knows the most about every framework wrote an awesome article all about it the article is so awesome this is my second time recording this video because the first time I recorded it I got uh six paragraphs in before I made the most intense set of diagrams I've ever made all of these are their own separate video now by the way I don't know why you ended up naming it the current plan is all the different ways to render your JS app I'll be sure to link it in the description if you want to see me making these diagrams and in-depth explaining all of these render strategies but this video is not about the render strategies this video is about how Frameworks will change and evolve in 2025 so if you don't know what an isomorphic Spa is and you think it's important to maybe go check that video out first at the very least we'll be coming back to the diagrams and touching on it but our goal is to better understand what's going to happen to JavaScript over the next year before we do that I got bills to pay so let's hear a word from today's sponsor today's sponsor is Prisma and they made a DB you might be tired of seeing new DB providers but there's a couple reasons you're going to love what they built first off it is literally three clicks to deploy that's so simple it's also free like really free the pricing is super generous you get five projects on the free tier and each of those gets two environments you can handle Dev and production you don't have to eat a separate database just for that they also make things easier for us serverless folks they have autoscaling connection pooling built in so you don't have to worry about using all of those connections up just because you're running on versell or NFI they also have real time which is dope because adding that to your database yourself isn't fun now you can literally just stream in the results because it integrates directly with the Prisma omm and there are a lot of really cool things they do with that along with the connection pooling you can cash on their Edge Network you can literally make a Prisma call give it a cach strategy and now this value will be cached on the edge you don't have to connect to a database and wait for the lookup anymore and you can directly evict it if you need to as well it's really cool having that at a database level I'd never seen or even thought about that before but for those of us that don't just have one server man this is really cool things that they're building thanks to pris for sponsoring check them out today at soy of dlink Prisma DB JavaScript framework's heading into 2025 I admit I wasn't sure I'd be writing this article this year it's easy to write articles that excite people about the potential of new tech but 2024 was a year of coming to terms with reality past several years have been an exploration to discover the unknown we entered this year excited it was finally time for these advancements to find refinement they have but one thing is abundantly clear the Quest for Simplicity hasn't resulted in making webdev simpler yeah most people feel like webdev has gotten more complex and I understand why they feel that way I think it's checks and balances on every side but the overall Vibe is not that web dev got simpler that sucks clearly some things have become easier to do but the overall picture hasn't simplified we already knew this but something changed in 2024 aided in part by pressuring from the global economy tightening budgets and keeping Solutions on the safe path I think it's finally been acknowledged that there are no silver bullets difficult problems are always difficult to solve there is a separate problem here where we started using the solutions for difficult problems to solve much simpler ones and now everything is more complex than it needs to be but we can't solve difficult problems with Simple Solutions the size of the problem and the size of the solution should roughly fit each other if you're using rust or Zig for your rest apis or you're using react for your blog you're using a solution to a big problem for a much smaller one and I think that has resulted in us over indexing on trying to find Simplicity instead of acknowledging that certain things have to be complex and I love how Ryan put it here difficult problems are indeed difficult to solve we can't pretend there's a magic Silver Bullet that will do it it isn't just the tools that are complicated but the problems themselves it has taken hitting obstacles around every corner while going back to the basics to only reinvent the wheel to return to that fundamental place it's a sobering thought but it gives me hope in 20125 that we can take some time and reevaluate and that starts with reflecting on 2024 promise of the server making things server first has been the narrative over the last 5 years in front end this is not a New Concept the web was born on the server but after a decade of client Centric single page apps it was clear that the pendulum had swung quite a bit too far especially for page load sensitive websites which did not benefit as much from The increased interactivity the pandemic only Amplified this with both the rise of online shopping habits in the influx of capital driven by low interest rates the first time I record I went on a whole rant about how there hasn't been a new frontend framework in in a while and I'll shorten it there hasn't been a new front end framework in a while and a good part of that is because a lot of them were being driven by investment like people don't seem to know this but like spel kit is mostly maintained by versel devs and versell raised a lot of money from Venture Capital Astro is its own separate Venture Capital backed company that has investors remix was originally invested in by OSS capital and has since been acquired by Shopify solid start is Ryan doing his own thing quick is mishko the creator of angular doing his own thing fresh is part of Dino and I'm almost positive Dino is VC funded uh yeah Dino is very fundraised they're doing okay an analog which is similar to soloart and quick where it's just this case it's just Brandon Roberts trying to make angular usable for full stack development cool stuff oh yeah quick is Builder iio and Builder iio is also VC backed so the only things in this list that don't have VC money of some form are solid start an analog which is kind of crazy last couple years have seen single page app influenced isomorphic which is the same code running differently on client and server approaches up against multi-page app influenced split execution models with islands and server components and those approaches are in a search to find a universal solution for all I am not sure if one exists but I'm excited to see what Ryan has to say and if these words mean nothing to you your mistake go watch the other video I recorded it for a reason that one took a while my poor editor slaved over it so it's a good one I promise you it's a diagram video those are my best ones go check it out and do not complain about how long it is you're the worst commenter if you're about to leave that comment saying I missed when your videos were 10 minutes long my videos should be 3 hours long shut your face anyways the long ones where where their value is enjoy them it's an exercise of two opposites trying to approach each other in the middle this has resulted in some amazing developments in routing like the nextjs app router as well as view transitions in routing as well as Tech like server functions optimistic updates server Islands single flight mutations no mention of out of order streaming Ryan that's unexpected yeah there's a lot of these pieces that allow for a URL to behave a different ways so when I go to one URL it does one thing when I click a link it does something else when I load a page all the different things it's funny I guess that's old to me this his response to me bringing up out of order streaming it's hilarious because I'm still trying to explain this like I just was at a laravel event yesterday I spent half the time trying to explain out of order streaming to the team building inertia and building all of the routing stuff for laravel I did the same thing when I was at Elixir conf last year and I convinced the team building Phoenix as well as Elixir Jose valim himself that there was so much benefit from the outof order streaming patterns so yes to us it feels old and I know you were doing it back in 2019 with your crazy eBay stuff God Marco yeah I I know you've been doing these things forever Ryan but to the rest of the world to most people doing webdev they probably won't even think about what out of order streaming is but the first time they've touched it is going to be next app router with suspense boundaries so I would personally have absolutely have included out of order streaming as part of this revolution with routing but I totally agree with you like the Focus right now isn't the client or the JS that we're running on our devices the Focus right now is entirely on the server and how the URL the generation of content and the client all work together and there have been some cool things going on here quick break down of all the terms I know people are going to be confused server functions are a function that the client can call so instead of just hitting an endpoint with Json and getting back Json a server function feels more like you just wrote a function and called it on the client usually there's some compiler hack that either binds it to an arbitrary URL or creates some thing in the background that you post to but ergonomically it should feel like you just write code then call it on the client and it behaves optimistic updates wait Ryan you didn't put out of order stream but you put optimistic updates optimistic updates I've been doing those since 2015 man optimistic updates means when a user does something we show the updated State before the server can confirms it so if I post a comment it should show me the comment before the server actually writes the comment in the database because I want have to wait for the server back and forth and just see an empty thing up until then optimistic updates are lying to the user that a thing is done server islands are the idea of having parts of your HTML where this part doesn't come through the initial response when you go to the page instead of getting the whole HTML page you get most of it with little blocks in it that say Hey this part's not done yet this part's not done yet and then either the rest gets streamed in with out of order streaming or usually with server Islands what it means is those blocks have a little bit of JS that goes and requests the rest of the HTML from the server to fill those parts in as well as single flight mutations one of my favorite things on the list instead of I post some data like I leave a comment on the blog the server says good job thank you and then I have to go fetch from another endpoint to get the updated content a single flight mutation is I post the comment in the server responds to that post request with the updated state somebody asked in chat this may be stupid but what does it mean when I say server that is a a long- winded question I'll give the quick short answer first which is the server is the thing that when you go to a URL generates the response so it could be a really simple CDN that sends HTML it could be a thing that runs JavaScript in node that processes your request and responds with Json it can be a thing that is running right in front of your database and go or rust or whatever when I'm saying server here I mean the thing that resolves the content of a URL usually what we're referring to here is a nodejs based or JavaScript based Runner that exists externally that is owned by the developer of the service you're using that a request is sent to and a response is generated by usually so a server function means you have a function that like adds a row to a database so you write that in server code and now on the client I can import that function and it doesn't let the client access the database the client can't just right to the DB arbitrarily but they can call that function and what it's actually doing is it's hitting an endpoint that was generated to tell the server to run that function to go do something but the server in all of these is code running on a box that the developer either owns or rents that resolves a URL to something and all of these wins are effectively ergonomic wins in how we develop those relationships between the server and client and how we use the data when we get it and as I was saying with single fight the thing I love so much about it is instead of having to get a response says hey I did my job and then go back to the server to get the rest of the content you just send the change down as part of that same request so there's no more back and forth when data changes one other thing worth considering when you think about server here is it might not be the backend that is your whole API you might have a team that wrote everything in go and Python and whatever other Technologies connecting to the database and managing all of that so you might think your front end has to just be an HTML file that loads JS and then hits those apis it doesn't have to be there's a pattern called BFF backend for front end and I think pretty much every single website benefits some amount from having a BFF even if you want to keep all your apis and everything else on a traditional API backend written in whatever language and stack you want to having a layer that lets you build a stronger relationship between the frontend and those apis and data is great most websites benefit from having a server that is built for the website not built to arbitrarily serve like Json because having a server that can do a little bit more with the HTML and the JS and those parts gives you all of these superpowers that make the experience for the user significantly better doesn't matter how good your company's at rust having this tiny thin backend layer that just calls the rust apis and generates the right HTML it's okay to have that little bit of JS because if you're not running some js on the server you are not giving the best experience to your users and that's not a take that I am talking out of my ass I love JavaScript I actually stole that take from Ryan himself I remember the first time he said that in a live stream it it was one of those rare moments in recent times that broke and rewired my brain where I was thinking about it not as JavaScript backends versus the other backends anymore and like I knew the BFF like backend for front and pattern the thing that broke my brain there that I was really hyped about was the realization that every website benefits from this and it's almost irresponsible if you're building a website with users to not have something going on in in between that and whatever else your backend is if you're hitting a database directly cool if you're hitting another API cool but BFF backend for front end it means your front end is better and yes Hobbit I am saying this if you don't use JavaScript on the server some amount you are almost certainly making a bad website like almost certainly go check out the end of HTM x video if you want a more Nuance to take about this relationship but you have a pretty hard cap for how good of an experience you can make for your users if you're not running some js on your servers almost certainly anyways the harsh reality is once you build that BFF and then you start using all the patterns here things stop being as simple as they might have seemed in the past I would argue yes and no as we saw in the diagrams the spa way has its own levels of complexity but most devs don't even know about it and that's the weirdest thing I know for a fact the average react Dev is building this way I would venture to Guess that the average react Dev doesn't understand how much of this is going on I even seen in chat and like my chat on Twitch isn't your average react devs they know what doing for the most part and they don't know all of this is going on they just write it but when you write with a BFF pattern and you write using these new routing things suddenly you're thinking about these relationships a bit more and that will inherently feel like complexity because previously you never touched any of it it's a weird example but a similar thing that happened to me a while I got in a fight with the CEO of a graphql company because he did an article graphql versus trpc and in this article he was trying to demonstrate how much simpler the code was if you used graphql instead of trpc trpc is an easy way to write your typescript server functions where you can call them on client without having to write a schema graphql is a great way to make your fun and backend teams who hate each other actually talk to each other in a way that makes some sense the article was written in a really weird way though because it would show the react client code for the graphql side and say look at how simple this is and then it would compare it to trpc showing the client code and and the server code so if we were to view this slightly differently we'll say here's the trpc Box the trpc box has these two pieces that fill it up we have the client and the server the box is as big as these things expand it to be if we were to compare this to graphql let's say theoretically with graphql the client part is less complex so this is smaller now let's say you're a frontend Dev so you don't care about that part wow graph Q is so much less complex than trpc why would anyone ever use trpc when graphql is so much easier there's a reason I would argue first off that they're lying here someone who's implemented a lot of graphql in a lot of places and also was a keynote speaker at the last graphql comp I'm not anti-g graphql the complexity is pretty big that said even with the graphql client side complexity being bigger if you ignore the server s side entirely it still probably averages out to being slightly smaller in in terms of the overall complexity than the client plus server side actually no it doesn't that's a lie I just did a video one at five Stacks where I built it with graphql and I built it with trpc and the full stack with trpc had less typescript code in it than the client only using graphql because setting up the cent of graphql is complex but if you lie and pretend it isn't cool we'll do that we'll go back to what I was saying before we'll pretend the client is smaller than it actually is no one who is even kind of good faith will ever say the server is less complex in trpc or rest bace system than a graphql system the reality is you basically need a PhD to do graphql properly so if you have the goal of convincing stupid web devs that graphql is better than trpc all you have to do is make sure they don't look past their tiny little client size box so if you write an article saying that trpc is more complex than graphql and the word resolver doesn't occur a single time in it you're a liar and a bad person and you should feel bad about it and I have let that author know how I feel long ago if you were there you were there he has since personally apologized to me because he realized how stupid he was being the point you're trying to make is it's very easy if you only look at the box that you are currently operating within to ignore the complexity adjacent to it and the thing that makes trpc great isn't how well you can ignore the server from the client or how well you can ignore the client from the server thing that makes TPC magical is how well they work together if you want want a new API on the client you just go write a new function on the server you don't have to reshape it on the client with a different query you just make a new endpoint you copy paste it it's fine you should have a bunch of different bespoke endpoints in trpc for the client specific needs that isn't more complex because the whole story from Back to Front is way simpler and sure if you compare the size of these two clients it's like wow trpc is more complex why would you touch it it's not that simple I think we're seeing the same thing here with single page apps one of the crazy things that react did is it made webdev able to be more complex all of a sudden when we were building applications for the web we weren't limited on the HTML being loaded jQuery helped a lot there but tools like webpack react and typescript let us go from having 10 to 100 people working on our websites to thousands working in the same codebase which is just insane when you think about it but with that front has gotten so complex that we now have principal plus level Engineers that do nothing but live on the client their whole job their whole life their existence their decade plus of experience occurs after the network request has responded and given them their content you could make a full great career from web pack down not touching the backend at all I am not like that most of my career was backend Dev I came to front-end late I know it doesn't seem like it now but I did so when I saw the front-end tools and Technologies starting to embrace more of what the backend could do to make the run and better what I saw was all of this complexity in chaos being reduced to a much simpler model where is it down here the isomorphic spa the complexity here has been reduced a ton at the cost of having to understand this part the reality is that I already understood this part because I'm a backend Dev I know how these parts work but if you are a web dev that has mostly ignored the relationship between the browser and the server Beyond fetching from an API and you don't really pay attention to what goes on up until this line effectively like you don't care about how your website works until you have passed the line of it rendered then everything we're doing right now is going to seem really complex but the reason it seems complex is because you've been ignoring the complexity you have pretended this part doesn't matter and I hope the other video I recorded helps convince you that you should understand this part I saw people in chat saying that they're going to go rewrite their apps because they finally understand certain things that were going wrong every react Dev every web dev should know about this but they don't and the fact that we are reducing the complexity here by adding a bit more pieces there does not mean the whole is more complex it just means that you can't lie to yourself and pretend the server doesn't exist anymore and I cannot tell you like if I've learned anything being a backend Dev who moved to front end it's that the average front-end Dev from the last 10 years likes to pretend the backend isn't their problem the same way back in De I like to pretend the frontend isn't their problem it's an adversarial relationship that is centered on this idea that you're pretending the other half doesn't exist and I hate when devs do this I love having the whole picture I might not be as deep on like memory management as primagen or Casey moror is but I know what it is and what it does I might not be as deep on CSS as someone like Josh comeo but I know it well enough to communicate his message I love piecing together the whole picture so what I see here is a lot of complexity on one side shifting to less complexity on the other what a frontend Dev sees is wait I have to know about servers now I that's so complex that's so much harder my favorite example here and if you know you know if you don't you don't I had to teach Dan abramov what a cold start was the guy who made Redux and helped lead the education efforts into the new era of react didn't understand what a cold start was and how it would affect rendering your react apps on the server I had a Twitter space in 2022 where I explained in detail what a cold was and why it would affect him while he was boarding airplane wild experience but that's the reality you can have a deep experienced fulfilling career as a front and Dev that barely understands servers but as the tools evolve we're being encouraged to know more about servers and most people are going to have their brain shut down feeling like it's way more complex so while I agree with you Ryan things aren't so simple anymore I think this is less that complexity has gone up and more that the complexity isn't being hidden or running in the browser anymore that's a fair point actually Ryan it's not just that it requires Ires more knowledge but also the code in the build processes too there's a whole separate rant I need to do at some point which is like what webpack actually did because webpack making most websites built by default instead of like compiled or quickly transformed or not even just written statically by default has allowed us to exponentially increase the tooling and complexity for any given app because we now take it for granted that our JavaScript has a build process and that build process now also spits out node code for runtime and yeah the the going from the files in your codebase to an app part absolutely that's gotten more complex especially when you consider the complexity of like this Edge worker and setting that up properly yeah you know I take it back I agree this is a great talk that Ryan did back six months ago facing front end's existential crisis highly recommend checking it out Linked In the article I remember watching this when it happened but I haven't seen it since I'm going to rewatch that later myself it's been incredibly difficult to actually measure success here we've seen benchmark fails so this is actually fun I have a whole video about this where uh a benchmark was done comparing the serers side rendering performance across all the new Js Frameworks that do SSR and it was not good check out my videos about SSR benchmarking if you want to know more about that everyone from Rich Harris to Dan abramov to Ryan to myself all jumped in to try and fix it and make the benchmarks more useful but that's far from the only problem we've also seen performance wins being attributed to new tech when the root case was actually somewhere else for cells partial pre-rendering which I talked about PPR a little bit earlier I have a lot of videos but if you want to understand it better it's a fun call it from Ryan I I see now why he said this is going to trigger me in hopes of understanding the nextjs partial pre-rendering as well as Astros server Islands I made soloart versions of the demo that doesn't do either no pre-render also no partial hydration deployed it to NFI in the versel edge vel's partial pre-render does outshine its Edge renderer but it's comparable with other Edge Solutions because rendering at the edge is not super expensive depending on the framework optimizing image preloads makes a bigger difference than any of this I absolutely agree there like most things feeling slow so much of it comes from images there's actually a really fun demo a while back where remix was trying to show how much faster it was than nextjs for an equivalent site and they Ed the optimized images from next like the images in the remix version were tagged ascore next SL because they were grabbing them from the next deployment because the site despite being on the books and in the network tab faster felt way worse because the images were slower so despite the fact that their framework was faster they relied on next's image management because it looked slower otherwise funny enough Ryan just said in chat he did the same thing he used the optimized images from next for his example here so we can see in the example NFI Edge versus vercel Edge versus verel partial pre-render the verel partial pre-render comes through it around the same speed as the netlify edge does actually I was talking a lot about this with Matt bman The netlify Edge is a much it's a much better Edge to say the least where the netfi edge it's using some of Dino's really cool like globally distributed runtime stuff it is my understanding right now and I haven't confirmed this but is my understanding that forel's edge is using Lambda at Edge or some other crazy AWS Tech that has to be routed through a Gateway before it can start going which adds an inherent penalty to the whole process for S partial pre-render can skip some of that penalty which is nice but it also means that for cell's partial pre-render where it saves the static shell and then renders the rest isn't meaningfully faster than nfi's Edge if anything it might be slower at times so very interesting call out and thing I need to think about more I do really like the idea of static Parts being static even if like for cell implementation isn't right yet static should be static and dynamic should be dynamic and no one's cracked the path there just yet but it is painful to see that the tech that I'm most hyped about in the space right now which is PPR isn't performing better than just rendering on the edge anyways yeah I have feelings not wanting to wait through the mess has led the conversation back to more traditional server approaches ones that exist outside of SSR ones where you aren't trying to run a client JavaScript framework on a server it's always been a great choice for projects where it makes sense but it's also pretty uninteresting we wouldn't be where we are if there wasn't a need to improve upon what came before and that can take a lot of trial and error the simplest tool for the job is the correct answer when the problem cease being simple you'll want options that scale with you 2021 and 2022 were a reset to a simpler base and a return to our beginnings on the server 2024 was the reminder that simple doesn't always cut it compilation to the rescue oh boy is this going to be my last framework video just a the spoiler hint for the future a video I've been planning for a bit react is the last framework I have some fun things I want to say about that we're not there yet but eventually so we have the lightweight synex in our framework but the compiler is the one doing all the heavy lifting compilation is an everpresent aspect of JS development whenever we've hit an obstacle whether it be a browser feature that isn't supported clunky syntax or the ability to address shortcomings of the language we just build a compiler for it it's so ubiquitous at this point that standards committees are considering going in a different direction for introducing new features this is the JS zero thing I talked about they're thinking of having JS be a much more minimal set of things and letting compilers like webpack and Babel add new features so instead of having like tary operators they would compile to traditional if statements and the tary operator would just be syntax sugar in the new Js sugar standard that can move faster and be imped by compilers instead I think it's a terrible idea but I get why they're saying it because JS is such a a weird moving language in so many people using JS or using a compiler anyways it's fair point Ryan made here that compilation and bundling are the core of how modern JS apps are created but they're also where the complexity tends to come in JS tooling I'm sure Carson over in the htx world is laughing at us benefits are Ms though types lenting tree shaking code splitting minification isomorphism macros dsls monolithic authoring and distributed deployment if you don't think webd is way better than it used to be then you just weren't building real apps that's how I fundamentally feel I'm not saying it isn't more complex I'm saying it's just way better every advancement in the past 15 years in this field has been built on the foundations listed here there's no alternative that could even remotely be considered adequate by comparison call it unfortunate call it a limitation of the JS language call it necessary complexity but to deny it is futile yeah we are fully aligned here as usual Ryan however if we want to understand complexity it is at least important to understand the source the most interesting development in 2024 thanks largely to both the release of react compiler and spelt five runes is how muddied the conversation has gotten fair I just posted a video about how people are getting less happy with JS over time and I think this is part of it reail is a really interesting one because I don't feel like anyone's really talking about it despite it being so cool and fundamentally changing how we should be thinking about react no one cares and everyone's mad about spell five runes because it's forcing you to acknowledge that magic syntax only scales to the size of your framework I've definitely seen interesting things because of these though on one side we have the react compiler which is an auto optimizing compiler that transforms code in a way that reduces unnecessary re-execution without manual intervention if you haven't seen my react compiler content you should watch it it's good but react compiler is effectively adding all the used memos and used call back calls to your code to prevent renders happening unnecessarily and it can do about as good if not slightly better job than the best react Engineers can while letting you delete a bunch of code that makes react harder to write what I'm excited about there isn't just that like oh I don't have to write memo anymore it makes maintaining my code easier it makes code reviews easier and probably most importantly makes the code easier for AIS to generate because I don't have to worry about all the weird memoization behaviors the compiler does that so we have a simpler syntax that we already have a lot of references for as we generate and WR the code of the future and it's funny because the react compiler is actually quite similar to how spelt 3's compiler worked back in 2019 but on the other hand we have spelt 5 runes which brings a syntactical sugar over A fine grain signal renderer which is similar to what solid added back in 2018 these are two major compiler projects that couldn't be more different that called into question the fundamental nature of both projects react acknowledging that renders do matter enough to optimize around in spelt trading away its minimal Syntax for a more expressive language with increased capability as well as better fundamental basis for performance ironically these stances are both exactly opposite of the initial selling points this was really funny I I did a meme a while back because people were saying that felt so much simpler than react it was because the syntax wasn't JavaScript they have a compiler that did that the react syntax was a lot closer to vanilla JS now this felt syntax more clearly indicates it's doing something here by giving you that it's actually closer to where react was and reacts kind of going where spelt was we're all Trading and going back the way I describe this Everyone likes to think of change as a pendulum so if we have just js on one side and we have compil it bro on the other side people think that we have like a pendulum in the middle here that swings back and forth between the JS and the compilate bro where we're just constantly going back and forth between the two it's my belief that these are a spectrum that has a different axis on it so the horizontal axis here is from just do normal JS syntax to compile it but vertically there is quality of tools we use and while I agree we do go back and forth here a lot I don't think it is a back and forth where we don't increase the quality I think as we go back and forth it's more of a spiral spit their case than a pendulum where we are going back and forth to find the best Solutions between these two paths so yes it seems like spelt didn't react as traded philosophies but I think that we are constantly evolving the quality of the things we use and most importantly the quality of the apps that we can ship and the size of Team it takes to ship those things I was able to build an app that is pretty much the full functionality of Zoom myself that's insane that's so cool that something like Ping I get all the functionality working before I had a team helping me with it I'm not going to say it was pretty but it worked it was being used by huge streamers like iron Mouse literally 5 days after I had started this as a side project project and that's because the tools and technologies have evolved there and I think we need to acknowledge that yes it feels like we're going back and forth but you need to pay attention to how bad things were previously because just vanilla JS in the 2000s is very different from feeling like vanilla JS today compilers in the old days are way less powerful than the compilers of today like the react compiler is such an achievement that to say that it's just them copying spelt is to miss the entirety of what's going on here so yes we are going back back and forth and I know Ryan agreer even said it in chat didn't talk about it people think compile stuff is just JS that's been the most difficult thing to talk about yeah this wasn't the role of your article this is the role of me adding these nuances yeah you calling old react and compiler just JS the compiler is not just JS I'm with you there Foley you call it the right thing I just wanted to add the Nuance of the spiral staircase versus the pendulum this is a fun call out about the spelt five runes versus compiler both increase the complexity of our tool in to existing approaches to be fair most devs are probably not going to feel that if I go to my next config for this app that is using react compiler here's all the work I need to do to add the compiler it's doing a lot more under the hood for me but the complexity I feel I would argue that the react compiler has been the easiest technology I've adopted in a very long time you just turn on this flag and it just works which is it it's a magical feeling to the point where I think it's why no one talks about it because there's no controversy with the compiler there probably should be though and that's that's what we're here for with this article the ver is still out on whether these changes will ultimately be good moves for these projects the common ground is the foundation that we build upon continues to get more complicated as we attempt to create solutions to make development easier yeah that is fair the difference being who owns the complexity like to go back to the analogy earlier with the trpc versus graphql if you only own the client side and trpc forces you to also own the server trpc looks disgustingly complex why would you ever touch it but if the client and the server are both things that you're thinking about obviously trpc is the easier solution What If instead of this being client server this was react with memo calls where we have like core react syntax and here we have nuances of memoization I would argue that the Nuance of memoization are actually quite a bit bigger than the core react syntax learning how to use memos and callbacks in the render method properly is quite a bit harder than just writing vanilla standard react code so if this box represents the complexity that the dev building the app works with and owns because you have to own this react code in your code base obviously but you also have to own the nuances of the memoization and the performance and you better be using things like react scan and the million lint stuff so you know when you're over rendering if the react compiler succeeds you only have to own the core react syntax part you no longer have to own all of that Nuance the result is more complexity as we see as we scroll to the right here a compil hand memorization for you that is a big complex thing but you don't own it react team owns this app devs own this so if you're on a front end team and you only own the client and the backend team owns the server you're not feeling the complexity of that that graphql adds like graphql makes life for backend devs way harder so that we can have a slightly better experience on the front end react compiler makes the experience for the react team way harder so that we can write simpler code and to be clear it isn't just us this also allows for simpler code to be written by AIS because AIS no longer have to think about these nuances that makes it way easier for an AI to write code that is fine and not have to do things wrong and I'll go a step further and say that this kind of cements react as the final framework I will do a more dedicated video on this eventually as I mentioned before where react's the last framework a lot of reasons we reach for other Frameworks have to do with this being complex not being able to do different ways of updates like signals that perform better not being able to export different things that make more sense if we just keep increasing the complexity of the compiler via a team of experts that are really good at this and the react core syntax never has to change we never have to worry about the AI not having enough data because the data all can be collected from the Decades of code written this way we have the data we have the react code if the react code can output something that is more powerful more performant or has more functionality neither we nor the AI have to learn anything the decision here it feels like the react team has chosen to offload all of the things that make react a worse framework until you learn how to fix them and just take those problems away server components solve a lot of the data management part this way compilers solve a lot of the syntactic and actual writing ergonomically part this way so this is one of those rare times where Ryan and I actually disagree I have the opp opinion if you con strain the language you lose the ability to express intent this is a tough one I think that react syntax didn't clearly communicate intent a lot of the time I did a video about the react compiler and performance in apps like this it should be out by now if it's not I'm sorry it'll be linked in the description eventually this is the demo we have these three boxes we have a counter click it increases we have a Color Picker and we have a slow component this component renders 10,000 boxes all of them are part of this parent demo component we see the use State here for count we see the use State here for color when I click the increase here you'll see react scan running and showing us when things update you see everything updates when I click and it takes almost half a second to reender that watch what happens when I use the Color Picker see how laggy that is I am just dragging the cursor around and it has to catch up because every single time it moves any amount it has to render all three components which would be fine if it was just rendering these two cuz they're fast but since one of them is slower or imagine a giant app with a lot of them even though slow component doesn't use any of those props it will still render when either of these things change and that's the problem with the default react model and it is surprising it doesn't matter more than it does but it does if I was to go memoize all of these parts we'll even do it all memoize slow component slow component renderer and we'll wrap this with a const slow component equals react. memo slow component renderer cool wait why is it still rendering here is where we have to get into the nuances to make these things more complex see here with slow component I have this unused prop being passed to it I added this because at the time I did this demo react scan wouldn't show you the name or the highlight of a thing being rendered unless it had props of some form so I gave it this fake unused prop there's a Nuance here though because I inlined this object it is redefined on every render so it isn't memorized because a new object is unique and even though the component is memorized it sees a new object being passed to it if I change this to a be string like just nope instead now the memorization does what it's supposed to and if I had moved the object out so it was static so const demo object equals that and I pass that here instead now the object doesn't change between renders and it's still works but if I was to do something simple and stupid like let's say oh I want to do something else with this or oh I want to use it in effect or something so you just move this innocently here that move just nuked the performance of your app in a way that you would not have intuitively guessed no matter how good you are at react most people would not have caught that that small change is going to destroy the performance of your app because they're going to look and they're going to go check and they'll be like oh yeah we memoed the slow component it's already memo wise we don't care but there are so many of those that when I did the video demoing it I went out of my way to write everything properly memorized and still hit like 12 cases another one here is this onchange we're defining this function on every single render so even if we memoized it this is still going to rerun what it shouldn't because this on change is defined there same with this on click this on click gets redefined on every render so even if we memoize counter button it's going to rerun I bring this up because we're talking about intent when I move this object from here inside the function or when I inline this object here it is not my intent to render the component every single time that was not what I or any other Dev was thinking when they put an object that is effectively a static constant here they were just doing the thing that is more readable and easier we could add a bunch of lint rules to stop us from doing stupid like this we could make our code harder to write we could force our devs to con uh like color changer equals use call back and now I have to like go deal with the types of this where the onchange here it's a value or it's a string so string set color e import use call back pass that here then I have to go do the same thing for the counter const color uh counter changer use call back set count move that over you get the idea if you do this for all of those and you have to memorize the stuff what if you didn't just going to get stash all that now I'm running the react compiler this code is as simple as it can be we're no longer memorizing the function here the word memo doesn't occur in this code really neither does call back none of those things exist anymore the code is simpler we can just inline things like that but now when I go here only the part affected is being rendered now none of the other boxes are actually rendering again I would argue that the intent I had as a developer here is being better handled now with the compiler than it was before because putting an inline object here was not intending to trigger this component to re render every time putting a function here wasn't intending to redefine the function every time I render the file the intent here was to write simple code that describes what's going on react didn't let it be that simple before for the compiler I personally feel is better encoding the intent I had as the dev and that's what makes it such a magical technology and it's also why I'm excited for how this is going to affect AI stuff because AI can write simpler code and the compiler will make it more performant it's a really cool win and I seems like Ryan now is seeing it this goes back to leaks and abstraction which make complexity real yeah we get it now react is absolutely own language it has been for a bit but this is the like tripling down on it I'm kind of disappointed that to my memorization questions on interviews everyone can now just answer with just use the compiler man very fair point you know times our are stupidly so this is why you guys got to watch my react compiler content I go so deep on these things and no one cares it's yeah the I think we're more aligned now I see why like in a literal like especially a framework author sense that the code you write with compiler less describes what the code does than the code written without it where you're memorizing everything by hand but the the fact that those behaviors are different isn't the thing most react devs understand the intent of the average react Dev is more aligned with what the compiler does than what the vanilla react code does anyways oh I Ryan goes into the AI I think this will be fun if compilation and bundling are fundamental it's clear at this point that there are foundational pieces for giving AI the tools that it needs to create very Dynamic Solutions in the future while we are seeing bigger impact every year on what these tools are capable of in improving our local developer experience ai's impact on JS Frameworks themselves is still pretty minimal earlier in the year we saw Devon make Headlines by creating simple apps although it did call into question what our expectations are from the technology is it simply enough to make something functional or does it need to be good by the time this video is out my project will be out I'm building the best AI chat app right now it has taken a lot of work I'm really proud of what we have you'll get to see it very soon I think the reason that a random person like me can build a better AI chat app than open AI with chat gbt or anthropic with Claude is because their focus is on the models not building great applications and they for the most part are probably using the AI to generate half the stuff they're building anyways am I using a lot of AI gen code yes but I am Allin focused on a high quality local first really good client side experience try it when it comes out you'll see it very soon Friday is going to be a fun announcement but yeah I I think that not every app needs to be really good and local first but some benefit from it meaningfully and I don't think the AI is going to figure out those nuances anytime soon Deon decided to build a client side rendered to do app in about 130 kiloby of JS it scored a 79 in Lighthouse as poor as that score is it is pretty representative of where things are today it will be interesting to see how the technology grows to meet the scale and complexity I agree it'll be very interesting to see in the sense that Tech like versel v0 has been largely a success at creating prototypes maybe that's where the biggest benefit is right now the million JS Dev Aiden got our attention again with react scan which scans your app for for performance issues my react scan video will hopefully be out very soon you'll see here when you type inside of something like slack everything constantly rerenders because of their weird keyboard Focus layer that's not good that's not good at all they should use the compiler well one might argue that reenders aren't necessarily a sign of a problem or that this exercise of finding renders in react it's like shooting fish in a barrel it definitely open my eyes to the potential of development tooling just around the corner if tasks are complicated and Cor tooling is more complex it makes sense that supporting tools rise up to meet that need it's more than a shift left in development the need is fully integrated across the whole Spectrum while biome and previously Rome set out on this goal newer players in the space like void Zero from Vue and vs Creator Evan show that this Foundation is essential to where things need to go next looking forward server second we've already started seeing some of the swing back of the pendulum towards the middle of 2024 with single page app models since felt kit solid start and remix I I've already slightly spoiled that of building a chat app I want to show you guys something cursed I changed how I'm doing it here is the whole app it's a route named static app shell that renders app app is a react router I'm rendering a full react router client side single page app inside of next because it is a marginally easier way for me to do the weird back and front end relationship stuff and having some static Pages it's when really nice I don't think most mere mortals should touch something as chaotic as this but I've had fun with it you'll get more explanation in the future but uh making this work was pretty simple I have this rewrite that points every path to my static app shell I brute force my own traditional single page app into next because next did not want me to make a traditional single page app there's a future where I move this to something more sensical like a basic V setup but for now I'm getting the Best of Both Worlds by inventing them all myself but even I am going back to Spas a bit here so it's a very fair point Ryan makes remix ported back their non-server functionality to react router solid starts additive approach to server functions and single flight mutations has laid down the eventual foundations for tanack start which is a react framework built on the same principles I don't know if you guys know how closely Tanner and Ryan work together you wouldn't think so because like Tanner's the react guy and Ryan's the creator of solid the amount of cool I've seen built between those two and the opportunities I've had to be like on the couch next to as they nerd out is some of the the coolest experiences I've ever had I owe the two of them as well as Fred from Astro so much of my career and success they were the ones who who caught on to me before I was anybody and like pushed me to to be here today so huge thank you to all of them some of the coolest things that have ever happened in my life were seeing the Sparks Fly between those three makes so much sense that it's funny as it sound like Tanner is taking what we've learned from solid back to react with tan stack start but absolutely is this is worth calling out next is trying to lean more into building traditional Spas with it they're not ready yet I'm happy they're working on it I like my way better we also seen an increase in local first and sync engine Tech I agree we have no idea where it's going to go because the the need for local first it's real for some percentage of apps but any three local first apps have very very different needs yeah slow and steady wins the race I wouldn't read too much into that chart the the growing dissatisfaction is an important thing to call out I have a whole video about that but it's worth noticing how many of these tools are going down right now preact slowly plummeting angular dying and then having a huge Resurgence last year with all the changes that have been going on react slow decline as well most of these tools have sentiment going down not up these aren't tools that I necessarily talk about as much when the economy is tight and maintenance is a concern those things tend to shine stuff like view angular and OG react so all Frameworks that Ryan's had in his eye on the coming year not because I expect to be blown away by some Innovation because these tools go the extra mile and making devs happy sometimes the best tool isn't the best tool why do you keep dropping these things that break my brain Ryan I can't process this right now I'll think about that one more he's right but it hurts me signal Growing Pains the hype cycle is this going to be about how signals were a huge hype thing and now people are rethinking it this will be fun it's no secret that pretty much all non-react Frameworks run off signals now even like angular which is hilarious some time has passed and developers are starting to understand the depth of the trade-offs present while it's this author's biased opinion that these are minor issues you know guy who made signals a really big deal Ryan here I can get why you'd think that he does expect people to come to a new appreciation for react I know I have I did write a couple projects in solid and it is an incredible framework but there are certain things you can just do and react that are nice you don't think about when you live in those other spaces it's an appreciation that should have probably always had and that doesn't excuse any of react's flaws everything is a series of trade-offs and you can only appreciate the choice you've made once you understand both sides that being said signals are still evolving the collective experience in this area has grown immensely over the past few years expect the collective result of smaller Innovations over the next year will showcase the unique value Prospect of this approach in ways we've never seen before the web component snipe at the end I appreciate you Ryan and the link is to his other article web components are not the future 10 out of 10 loving this the conclusion unlike previous years I'm not predicting some big technology leap in the next 12 months I don't know if the community at large would be that accepting I agree we don't want big things right now especially with AI That's going to have to learn them I've watched the conversation devolve from whether resum ability makes sense versus partial hydration to who has the best templating scox again God that tweet the like comparing the if statements across language I want to die this is part of the cycle that lends to a reflection as well as Innovation on the horizon but not today and that's okay I am a little scared we're nearing the end of innovation for web Technologies but that's again I have decided the reacts last framework thing this will be its own video that I'll record sometime soon a lot to talk about there we have a lot of complexity to catch up with first though a lot of hard decisions to make on what technology is worth our investment and effort the raw capabilities for the next generation of solutions exist now I'm not sure we've seen the right combination a pieces yet in a consumable form but at least we're beginning to acknowledge that in our quest for Simplicity we set ourselves on a path to add back that complexity in new unique ways a single solution hasn't shown itself HTM X is not going to take over the world but it's a great option to have re doesn't necessarily any more complex at doing things than other Solutions async and client server interactions by extension are inherently a complex thing compilers can't solve all these issues but they can do a lot react compiler doesn't seem when you compare it to really well optimized code like it's doing great but when you compare it to react code that has no optimizations all of a sudden you realize oh yeah things were really bad pre-compiler as Ryan said here it's pretty safe to say even if the compiler won't make react itself faster it will likely make your react code faster yep that's what's so cool you can write simpler code and have faster code as a result it's funny the people who never learned memoization are the real winners because they don't have to go gut a bunch of old we live in a world full of complexity that doesn't appear to beang changing anytime soon so 2025 feels like a good time to hunker down and get stuff done and for those looking for the next great thing look around there are plenty of interesting problems to solve between you and me this is the type of environment that I thrive in totally agree and I am genuinely really hyped for what will probably be a boring year of JavaScript but what will set us up for a long-term chaotic exciting future thank you to Ryan as always for writing this article and thank you to all of you for sticking through these two chaotic videos I hope this helps you feel a bit better about where we're at with JS and where we're going to end up until next time peace nerds read the first comment fine react is dead I am so excited for my react is the last framework video now I this is a much better end note




## JavaScript imports kinda suck... - 20231104
obviously I'm a huge fan of JavaScript sadly it's not a perfect language I'm sure there are plenty of other people who have told you all about flaws in JavaScript and how doomed to the language is I don't think the dorismar but I do think there are some flaws that are worth talking about I want to focus on one in particular today and how other languages solve this problem the problem is Imports well I'm sure your immediate thought is wait what imports and JavaScript are fine well they kind of are but if you play to other languages you know there are things they can do better make sure you watch to the end if you want to see how other languages solve these problems we're going to start with a typescript example let's say we're importing something for react like we want use State the most common way we do this is import react from react and then we would call react. State probably shouldn't have said this is the most common because we don't do this too often anymore this used to be how we would do Imports in a lot of projects or even worse we would use require which is utter chaos but if you wanted to use US state is something like this and now you don't need to call react when you're calling the UST State the problem here isn't the code or the syntax directly it's actually the experience you have as a developer when you're typing this because your editor your tools your language server can't know what you're importing from when you start typing this so if I was just typing import use this can't autocomplete it has no knowledge of what's going on so I have to correctly guess what I'm trying to import before I can finish typing it so if I misspell this like use stats from react this is the point where I would get an error I type all of that do this do it wrong and then see him getting an error and then be like what the hell's going on delete it and maybe my editor is smart enough to help me autocomplete from here now that it has the context at the end the solution for this is actually pretty simple and a lot of other languages have figured it out solution is flip the order from react import usate sadly this is not the syntax in JavaScript the import syntax was decided on by ecma a long time ago it's a bit too late to change it but man our tools would have been much much easier to use if the language was designed in a way to assist our Tools in understanding what we're trying to do without having an order that determines where we're importing from first and then what we're importing second we might make the code marginally more readable we've also made our lives much harder because autocomplete can no longer carry us I have strong feelings about this because I've used other languages that do it right and as soon as I came to JavaScript and realized they were doing it wrong it was really frustrating for me I actually collected a bunch of different languages to show how they're doing these things the first example I want to give is elixir because I'm a huge Elixir Fanboy in Elixir you import from the thing this says only take duplicate and the version of it that takes two arguments this is super super convenient it lets you specify trivially what you're trying to import and your IDE and your tools can autocomplete it as you go along you'll see that especially for module based languages this pattern is really common where you have a bunch of subm modules defined on a higher set of modules and you can import small parts from it so in C we have using system.io so this is a subm module I/O on the big module system pretty simple obvious this will clearly autocomplete because it's pulling off of the end there you wouldn't be able to import multiple things off this like let's say you wanted system IO and system. vils you'd have to make these separate and then for Java we have everyone's favorite import package. class. name very similar to C syntax this kind of became the norm for a while but there are other languages that do this well too like python which is literally what I was proposing just there with the JavaScript syntax from X import y this just makes sense and as much as I hate writing python it's nice to got this type of thing right it's a big part of why python is a pleasant experience to write which was the ultimate goal of the language make something as fun to write as possible now skele does not have that goal but they still got this right import examp and then in parenthesis the thing you want to import and as our kind contributor noted here you can skip the parenthesis and import everything from it directly rust is a bit of a nested mess and I saw a lot of people saying in chat that they think import and rust are kind of annoying the very least you're able to use the double colon syntax to select specific things within a crate and then you can use these brackets to select a pile of things from within one of these very convenient although yeah the S is a bit weird I hate these and I'm sure there's other catches I'm not familiar with supposedly they also support wild card s for imports which is a bit scary and suddenly those slow compile times are making much more sense and I guess PHP is trending right now so I gave a PHP example use my full class name as another so you say the thing you want to import and then you bind it to something else and you're done I'm sad that there are so many other languages that do this right and JavaScript still does it like JavaScript we could have had better and I hope for future proposals for features that JavaScript is learning from other languages that were a little bit better about doing things not just to make the code look really good but to make the editor experience as pleasant as possible because code isn't just read and approved it's also written and interacted with and thinking about what your editor experience is like is really important as you design a language I sincerely hope that the contributors and the ecmascript maintainers who make these types of decisions are more thoughtful in the future about how these things behave in your editor so that we can continue making JavaScript the best possible experience for all the developers who use it let me know what you thought about this video one that I've been thinking about for a while and I know it's a bit short but I think the information is useful if you want to hear a bit more about features that are coming to JavaScript that I'm excited about that hopefully we'll get right I'll put a video in the corner here all about one of those thank you guys as always appreciate y'all peace NS




## JavaScript is fast enough (don't rewrite your code) - 20250422
why I'm skeptical of rewriting JavaScript tools in faster languages oh boy everyone's favorite topic js is obviously way too slow why are we using it for all these things why is Electron the thing that we're writing our desktop apps in why are our backends in JavaScript rust is right there have we all been led astray or maybe is there some merit to these JS apps being written in this way and are those performance benefits real and how big are they and is the velocity we lose worth it or are we just all being dumb and lazy and using JavaScript because it's what we know these are all great questions and I'm sure both this article and my answers are going to be quite controversial so make sure you stick around for that but real quick before we dive in word from today's sponsor i've done a lot of hiring through my career and it's never been easy but nowadays it's insanely hard like way more than it's ever been primarily because we're getting spammed with terrible AI generated resumes and all this other crap that makes filtering through and finding good candidates nearly impossible thankfully today's sponsor G2I is here to help these guys make hiring great engineers almost weirdly easy these guys have over 8,000 incredible engineers on tap ready to go at any given time and not like people who just got out of boot camp these are engineers with many years of experience at Fang and other similarly leveled companies they know what they're doing oh and they're not like 5 years out of date most of them already know how to use all the fancy new AI tools like cursor so they're not going to slow your team down or move slower than you'd expect they know how to ship you want to be sure those engineers are a great fit which you really should be if you're hiring them you can write up a handful of questions they'll find the right engineers to be a fit for that archetype and then they'll ask those questions and send you through their video platform a set of interviews they do quickly so you can watch them and see who's a good vibe once you've filtered down to the people you like you can do actual interviews with them and very quickly get awesome people in your pipeline they love bragging about how quickly they get people to ship their first PR they claim 7 days from interview to PR i thought this was until I scrolled a bit further and talked to some other people who have used them shop Monkey was able to hire 17 great engineers in 60 days do you know how many recruiters you would need to do this and how bad some of those engineers would have been and how annoyed your engineering team would have been doing all those interviews i don't even want to think about it when I was doing interviews at Twitch a loop would be a full day for the candidate and every engineer on the team would have to interview them that's 2 hours lost per person then another hour lost later on when we do the meeting to decide if we're hiring them what if that all just went away you had a shared Slack channel you could ask questions and just get handed incredible engineers ready to go in person at big cities or remote if you're anywhere else in the world it's incredible i've been amazed at how many of y'all already started using G2I and been blown away for everyone else give them a shot today at soyb.link/gi let's dive in i've written a lot of JavaScript i like JavaScript and more importantly I've built up a set of skills in understanding optimizing and debugging JavaScript that I'm reluctant to give up on this is a good honest opening most articles I've seen like this have not been as honest about the writer's experience and where their biases are obviously if you write JavaScript for a living and you know the language really well you're going to be more reluctant i personally am not very good at JavaScript joking I'm I'm a JS engineer i'm known for that at this point obviously I lean TypeScript but same difference i know the language pretty well at this point i still dearly miss Elixir but if something can be done in JavaScript I probably will do it in JavaScript so maybe it's natural that I get a worried pit in my stomach over the current mania to rewrite every node tool in a faster language like Rust Zigg or Go etc don't get me wrong these languages are cool got a copy of the Rust book on my desk right now and I've even contributed a bit to the servo for fun servo is the Rust based JS runtime for Firefox and Mozilla oh sorry i I was wrong about Servo by the way servo is the web rendering engine it's not the JS runtime my bad i'm dumb but ultimately I've invested a ton of my career in learning the ins and outs of JS and it's by far the language I'm most comfortable with so I acknowledge my bias and perhaps overinvestment in one skill set the more I think about it the more I feel that my skepticism is also justified by some real objective concerns which I'd like to cover in this post i have so many changes I want to go down i'm going to resist that urge as hard as it is we will get there so if you want to see how I make this about React Native stick around but I have a way performance one reason for my skepticism is that I just don't think we've exhausted all the possibilities of making JavaScript tools faster marvin Hedgemeister has done an excellent job of demonstrating this by showing how much lowhanging fruit there is on things like ESLint and Tailwind what is this that we have here yeah Marvin's a legend by the way one of the the most legit JS devs ever yeah creator of Pact if you wanted a good qualification there a lot of the work that he did here to prove that we can make the JSO system better was doing things like avoiding unnecessary type conversions or creating functions inside of functions if you don't have to and he did this in a bunch of libraries to make them significantly faster he would look at the flame graphs and the charts be like "Oh there's things here that we can do to speed this up." So in this parsing example here for valid Tailwind class names it took 400 milliseconds previously and it got down to 92 milliseconds pretty quickly and there's a lot of hacks you can do in order to make Tailwind faster by not having its parser do as much inline makes sense so clearly you can make your JS code faster even for popular things but they're also rewriting half these things in Rust right now is that worth it in the browser world JS has proven itself to be fast enough for most workloads sure WASM exists but I think it's fair to say that it's mostly used for niche CPU inensive tasks rather than for building a whole website yeah that is very fair to say so why are JS based CLI tools rushing to throw JS away the big rewrite i think the PF gap comes from a few different things first there's the affforementioned lowhanging fruit for a long time the JS tooling ecosystem has been focused on building something that works not something that's fast now we've reached a saturation point where the API surface is mostly settled and everyone just wants the same thing but faster hence the explosion of new tools that are nearly dropping replacements for existing ones roll down for rollup oxint for eslint biome for prettier turboac for webpack etc however these tools aren't necessarily faster because they're using a faster language they could just be fast because one they're being written with performance in mind and two the API surface is already settled so the authors don't have to spend development time tinkering with overall design heck you don't even need to write tests just use the existing test suite from the previous tool all really fair points you know the expression make it work make it right make it fast imagine if all three of those were rewrites make it work was the first attempt to write it make it right is you fixing all the things that are broken make it fast as you realizing this was all a mistake so you throw it away and reset the language you do the rewrite in doesn't matter that much obviously Rust is faster than JS we're not saying otherwise but fast.js is faster than slow.js and I think a lot of the problems that we run into are that JavaScript can be written in terrible ways and when we were patching hack upon hack upon hack upon plugins upon frameworks upon build tools upon bundlers where we're living in worlds with dozens of these Webpack plugins stacked on each other in terrifying ways a new language is not going to magically solve the problem a rewrite is and if the rewrite happens to be in a new language it will be much better but it could have just been in JS it's a fair thing to consider in my career I've often seen a rewrite from A to B result in a speed boost followed by the triumphant claim that B is faster than A however as Ryan Carneato points out a rewrite is often faster just because it's a rewrite you know more the second time around so you're paying more attention to performance oh this is a stream snipe damn i massive massive respect Nolan for being deep enough in the trenches to pull out a snippet from a Ryan Carneato stream let's let's listen to the snippet quick you have my curiosity be careful too um I I actually have to warn people about this when they choose solid uh which is like the fallacy of the rewrite so to speak like every time you rewrite something generally you get better results so like when people show me like um oh check this out we rewrote this is solid and show these better metrics and I'm like I'm glad you know that makes me happy to see it doing what it intended to do but I I'm also say like I it would be really interesting to see how good it would have been if you rewrote it in React because my suspicion is like there are cases especially performance sensitive ones where it can make a difference but a lot of times our biggest wins are from when we realize how to do things better because we're writing it the next time or the second time perfectly put thank you as always Ryan by the way if you're not subbed to Ryan's YouTube channel see the bell i have that on for like three channels his streams are every Friday they're awesome they're where I get my information phenomenal streams definitely go check them out even the VODs after the fact are worth watching we're talking about Solid and Ryan we're only a stones throw away from bite code and JIT so I'm not surprised where we're diving in the second class of performance gaps comes from things that browsers give us for free that we rarely talk about the bite code cache as well as the just in time compiler when you load a website for the second or third time the JS is cached correctly the browser doesn't need to parse and compile the source code into bite code anymore it just loads the bite code directly off disk this is the bite code cache in action if you're a bit confused about what that means JS is an interpreted language it is running in an engine at a runtime but the actual JS code that you wrote isn't the code that is being run that code has to be transformed by what's called the the JIT the just in time compiler that turns that into actual bite code that can run on your device turning the JavaScript into bite code is a process that takes time it takes enough time that Verscell went out of their way to cache the bite code on lambdas and on serverless functions and saw meaningful performance improvement since Verscell runs JavaScript on the server and it's spinning up a new server so to speak whenever a user makes a request because it's serverless if it has to download that JS code convert it into bite code and then respond to the user's request that's a lot of wasted time and when they moved over to bite code caching when they shipped their Rust core they were able to reduce cold starts by up to 27% because they didn't have to do that transformation step chat's making some good corrections technically speaking the thing that converts the bite code and the JIT compiler are different things and the JITs making the bite code more efficient but it's layers of transformations where the JS code becomes something more and more specific to your machine that is work to do to generate but it runs much faster once it's done it so your browser is smart enough to cache the resulting bite code from these transformations as long as the hash and the like cache entity for the JS file you're loading hasn't changed which is really nice and cool oh the article even calls that out so going from JavaScript to the bite code always happens but if a function is being called often enough it will get optimized even more by the JIT to be perfectly optimized not perfectly optimized but much better optimized machine code and if you can cache all these things the cost of doing this generation matters a lot less in the world of node scripts we don't get the benefits of the bite code cache at all unless you're on Verscell anyways every time you run a node script the entire script has to be parsed and compiled from scratch this is a big reason for the reported performance wins between JS and nonJS tooling thanks to the initable Joey Chung not familiar okay I already like her just from the profile picture and the addition of compile caching to Node i already like her easy follow easy follow a committer to V8 v8 is terrifying to commit to good and apparently PHP has had an equivalent of this for a while now which is funny part of why PHP got finally got fast with 5.5 makes sense hilarious anyways we have here export node compile cache/cache node.js compile cache i've set this in my bash rc on all my dev machines i hope it makes it into the default node settings someday you know what i'll do it it i'll report back if it breaks you've won my attention pretty cool that this will now by default with node cache the bite code that's being created the big thing this will help with is spinning up a script when you like run a command so like when you run the tailwind generate command or you run pnpm rundev those types of things more and more of that could be cached which is really really cool as for JIT this is another thing that sadly most node scripts can't really benefit from you have to run a function before it becomes hot so on the server side it's more likely to kick in from longunning servers than from a oneoff script and the just in time compilation can make a big difference in Penina Force I considered replacing the JS base blur hash library with a Rust version before realizing that the performance difference was erased by the time we get to the fifth iteration that's the power of JIT that's kind of nuts that the blur hashjs version gets just as fast as the Rust WASM version after you've run the JS version enough times for it to get jitted he's shouting out all of the legends in the community right now canada Honk is a legend i already did a video about Porfer it's a JS runtime in Wom it is as complex and interesting as it sounds go check it out if you haven't you know that Oliver is legit because they not only have created a JS runtime at 19 years old and also been invited to Winter CG they also created test 262 which is a tool to see which JS engines support which things what's up with the site normally there's a lot of other engines on here must have had a bad run bad timing it's a complex site so I get it yeah normally it looks like this where all the different JS engines have their compatibility measured across the official like spec of JavaScript which is super super helpful for figuring out what engines are capable of what stuff and obviously Canada Hawk is somebody you would want to trust when it comes to everything JS engine wise so it makes sense that they're getting cited here anyways maybe eventually a tool like perfer would be able to do an ahead of time compilation of node scripts but in the meantime JIT is still a case where native languages have an edge on JS i should also acknowledge that there's a performance hit using WSOM versus pure native tools so this could be another reason that native tools are taking the CLI world by storm but not necessarily the browser front end fair it it's like when you're using WOM even just the the cost of going into and out of the WOM layer is high enough that you often lose the performance benefits and if you're doing that back and forth often enough you're just kind of contributions and debugability this is the thing I was going to to harp on and I will do a long tangent about it once we get to the right point for it let's read first though i hinted at it earlier but this is the main source of my skepticism towards the rewrite it all in native movement js is in my opinion a working class language that's such a banger as they were saying JS is a working class language it's very forgiving of types which is a reason that they're not a huge TypeScript fan oh I mean I get it i understand but the only L thus far it is also very fair to say J is easier to pick up than Rust anybody saying otherwise doesn't understand either language but also since it's supported by browsers there's a huge pool of people who are already conversant with it not going to know what that means but the way I frame this is JS is a necessary evil because if you're writing applications that run in the browser you need JS for those if you don't have any JS in your browser apps you are limiting what you can do with your functionality with your software and JS is effectively a necessary language if you're building applications in the browser you can hack around it with Rust but even then when you're using Wom you have to have JS bindings somewhere you can use JS somebody else wrote and use something like HTMX to throw in new HTML changes from the server but the more dynamic and the more powerful you want your browser apps to be the more necessary JS becomes so if we've accepted that JS is often necessary we need to use it now we now understand JS is a necessary language if we can make it work well on the back end why should we have to use other languages too if we treat JS like what it is which is a necessary default now we need really good reasons to leave that default for years we've had both library authors and library consumers in the JS ecosystem largely using JS i think we take for granted what this enables for one the path to contribution is much smoother to quote Matteo Kina Matteo is one of the biggest node contributors by the way also Fastify Express they're deep most devs ignore the fact that they have the skills to debug and fix and modify their dependencies they are not maintained by unknown demigods but by fellow devs i will say having been in a lot of ecosystems JS is the most willing to let you change how things work and dive in on a PR it's there are plenty of devs who aren't even JS devs now that got their start by doing contributions to JS repos and the public it's such a welcoming and open I don't want to say like the whole community is super welcoming because that's never the case anywhere but it's just so big and we are all so used to contributions and so much of our core ecosystem comes from these open community things that I found it to be more open than a lot of other places and there's also pieces that make this easier one fun version and I'm curious how many of youall know about this patch package patch package lets app authors instantly make and keep fixes to npm dependencies it's a vital band-aid for those of us living on the bleeding edge as someone who was very bleeding edge for a long time I spent a lot of time with patch package it lets you go into your node modules edit a package because it's not doing what you expect it to and then you can run this patch package command to generate a diff that will now be in that repo and when somebody runs an npm install it'll apply that change to the package so you can effectively maintain a fork of an existing package as a little diff inside of your repo it's super convenient i have relied on this far too often for far too many things thankfully I'm not shipping it in a whole lot of stuff but others are i don't think there's any other language that has this type of culture around us patching the dependencies they're using to do exactly what they want them to do it's up to 2.6 million installs now a week that's crazy hopefully you don't need this package but the fact that it exists and gets that many installs says a lot one of my favorite things this package does is the create issue flag this will automatically open a GitHub issue for the repo for the package with your diff to let you quickly start the conversation with the creators to say "Hey I have this patch package in my project because I was having issues with the package here is the diff for what I changed can we talk about this?" Yeah there aren't other communities that are that embracing of letting you do things however you want and this comes at a cost too it means like the floor like the worst apps you can make in JS are horrifying these people will do a ton of these things but if you're doing things the right way you can make changes and unblock yourself at an aggressive pace which is really cool this breaks down if JS library authors are using languages that are different and more difficult than JS they might as well be demigods let me show an example of this here are two popular repos on GitHub we have Webpack and we have ES Build surprisingly close in star count webpacks at 65k stars and ES builds at almost 40k they're nowhere near comparable in popularity but they're pretty comparable in reach i want to show something interesting in these repos we're going to go to insights and look at the contributor chart of all time and what we'll see here sure the main contributor and sure they've fallen off as they've went to focus on all things Turboac there's eight people who have made over a hundred commits to Webpack it is accessible it is a terrifying repo and I would not recommend many people go through here to make changes unless you have really good reasons to and even then you don't need my advice on whether or not you should do it you'll know if you should let's quickly compare that to ES Build Insights contributors that's a little bit different evan has made almost 4,000 commits the next highest committer has made 16 there are only two people who have done a twodigit number of commits to ESB build everyone else it's quite a bit smaller usually it's one or two commits with very small changes why is that why is this not getting more contributions is Evan evil and refusing to accept PRs not quite esb build is a lightning fast JS builder written in Go not a whole lot of JS devs know Go so not a whole lot of JS devs are contributing here in fact ESB build is so hard to build around and build things like plugins for that most people don't use ESB build directly they use VIT which wraps ESB build for dev mode and it wraps rollup for prod mode you can see that here because there is no go in there contributions and if we were to hop over where we just were before to see who's contributing you'll see one of the healthiest contribution charts you've ever seen there are a lot of people contributing a lot of stuff here and P talk's a god for taking over as hard as he has and Safi's been stepping up too there's a reason that the JS world contributes to things that are in JS and not to things that aren't and it's not because the maintainers are evil and it's not because of skill issues it's because we know JS and it's a lot less scary to throw JS code at a JS project that is being used in our JS project oh are we about to get to all the things I just said that's hilarious if so for another thing it's straightforward to modify JS dependencies locally i'll often tweak something in my local Node modules folder when I'm trying to track down a bug or work on a feature in a library I depend on whereas if it's written in a native language I need to check out the source code and compile it myself which is a big barrier to entry really important point there too if you're using Rust code from package instead I now have to recompile it if I want to test the different outputs obnoxious somebody did drop a good counterpoint here with the OXC project having a lot of contributors because oxc is a set of tools for doing js linting parsing etc written in rust and they have a much wider set of contributors than everything I showed other than webpack which is cool but if I recall they are contributing to different parts i can only get so much info quickly scrolling through this but my guess and I could be entirely wrong on this is that most of these people have a specific thing within Ox that they're focused on because there's a bunch of different packages there's a bunch of different packages this is like 20 projects in a trench code regardless it's a good point that there are a lot of people contributing there thank you for bringing that one up author calls out TypeScript here and I think this is fair as they say to be fair it's already gotten a bit tricky thanks to the widespread use of TypeScript but TypeScript's not too far from the source.js so you'd be amazed how far you can get by clicking pretty print in the dev tools thankfully most node libraries are also not minified this is important because if the thing you're trying to patch is JS code that was minified or obuscated from the TypeScript code actually going in and doing those modifications sucks it is what it is this also reminded me of the most cursed library I've ever seen that's genius i'm probably gonna do a whole video on this let me know in the comments if I should ts blankspace has been hurting my brain for a minute if you have TypeScript source code but the browser is running JS and you want to debug something that goes wrong how do you point the right character to the right place in your source map if the source map is pointing at a different language ts blankspace has a really clever solution instead of compiling and writing entirely different code like this what if we compiled the types out by just turning them into blank spaces that are the same number of characters it's so stupid and it's so genius i think this is awesome i should probably do a whole video on it now you know it exists anyways TypeScript being minified and pointing the right things to the right place is annoying we're still finding clever solutions and Bloomberg's even working on it so uh yeah we'll get there back to the article of course this also leads us back to debugability if I want to debug a JS library I can simply use the browser's dev tools or a node debugger that I'm already familiar with i can set break points inspect variables and reason about the code as I would for my own this isn't impossible with WASM but it requires an entirely different skill set very fair point and on the topic of entirely different skill sets I can finally do my React Native tangent i think people don't understand the real value of React Native it's not that we need to turn everything into the web it's not that React is the objective correct way of writing it's that most companies have product and have features in that product that are built by React devs and some of those features need to end up on the mobile app if they have one of those too i know that because I worked on a lot of different feature teams at Twitch and I got to build all those features in React except for the mobile app where I had to bug someone on the mobile team to prioritize some time to try and go get whatever feature I want working where they don't know anything about it because they're not on the team that built the feature and that loop is obnoxious the back and forth from me as someone who doesn't write native code to someone else who does trying to get to the point where we can get the features we need in the mobile app like I don't know a ban button i'm not saying that native tools aren't good i'm saying that React Native allows for the parts that don't need that native win to be contributed to by the people who work on everything else at the company realistically speaking even if you're not a JS dev even if you're like a gode dev it'll be easier for you to contribute to a react native codebase than to a traditional codebase that is in swift simply because if you want to add it to the Android app you need to go switch over to the Cotlin or Android Java project whatever you're running for the jetack world nowadays with React Native you only have to learn the one thing and now you can contribute to the web as well and since JS and in this case React are effectively necessary for building the dynamic web app avoiding them on mobile for the sake of it is preventing others from being able to contribute i would go as far as to say the main reason the Twitch app sucks so hard is because the people at Twitch who use Twitch the most who care the most about Twitch aren't on the mobile teams and they don't get to contribute to the mobile apps as a result i know that because that's what happened to me i tried my hardest i rewrote the app from scratch to show how good a React Native version could be and I am so sad I can't use it anymore because when I upgraded phones I lost it cuz I don't work at Twitch anymore but man it's frustrating not because React Native is better than Native but because the quality of the tool isn't what matters it's the quality of the contribution and if I can't meaningfully contribute because the wall I have to climb to get into that point is so high you're just never going to build the right thing and it takes so much more time to figure that out if I have to learn what does and doesn't work for a feature on web and I spend six months building it and then we need it on the mobile app it's no longer a rewrite because I'm not the one doing it someone else is and now that person has to go learn all the same lessons but that person is less invested because their job isn't this feature their job is the app and their priorities aren't aligned with my team's priorities and the result is the app slowly gets worse and worse as people who care more about building apps than about building Twitch apps are piling on these band-aids over and over again it becomes a mess and as scared as they might be of React Native it comes with a massive benefit that the people who work on these features and care about this product can now contribute when they couldn't have before and I really hope people take that part seriously when they're thinking about this React Native versus Native debate the same way we are here with JS versus WASM js lowers the floor for contributions which doesn't mean the quality of things goes down it means the number of people who contribute goes up and if those people care enough it'll go great and if you're a mobile dev that is working in native technologies and you're scared that React Native being added is going to lower the quality of your app you are incredibly useful push hard to make sure the quality of the app doesn't go down help dumbjs devs like me learn what a good mobile app actually is and hold us to a high bar don't block us from contributing block our contributions until they're good enough be the shepherd of the change you want to see that's my React Native tangent I've been waiting to go on for a while the other tangent I've been putting off is about the other languages i've already done this one in a bunch of videos but I think we overindexed on Rust and underindexed on Go a significant portion of why JS tools are slow is because reading a shitload of files is slow and you can't do it in parallel without using a bunch of workers in JS any language that has good concurrency primitives is going to be slightly better specifically around parallel stuff than Node is because Node isn't properly parallel it can have a task running in the background and do other things while it waits but you can't run three tasks at once without all the chaos that is workers in Go and Rust that's not as much a problem that said a lot of the Rust code that I've seen isn't written to work well parallel and as soon as you try to make Rust work in a parallel environment it becomes 10 times more work if instead of our goal being make it so the code runs faster the goal was make it so the code can utilize our hardware better Rust might not be the right choice and Go might be instead so personally I think we should have explored Go a little bit more for the JS dev tool world and that we went a little hard on Rust a little early that's all I wanted to say there let's finish this up because this article has been awesome i think it's great there's a new generation of tools for the JS ecosystem i'm excited to see where projects like OXC and Void Zero all end up the existing incumbents are indeed exceedingly slow and will probably benefit from the competition i get especially peeved by the typical eslint plus prettier plus tsse plus rollup lint plus build cycle this author has the best like bias call outs reservations and realistic things like this where they're admitting this isn't acceptable in its current state things are too slow i feel the pain but just switching languages doesn't solve the problem that said I don't think that JS is inherently slow or that we've exhausted all the possibilities for improving it sometimes I look at truly performance focused JavaScript such as the recent improvements to the Chrome dev tools using mind-blowing techniques like using the UN8 array as a bit vector sometimes the authors of these things are so far ahead of me with the things they check it gives me imposter syndrome interesting this is to speed up parsing of a snapshot to see if it contains certain things that match a reax by caching the substrings in this bit vector so they can find stuff much faster on a heap snapshot from Google Docs this change speeds up the heap snapshot initialize function from about 3.2 seconds to 2.9 seconds clever very smart stuff but yeah there's ways to make JS faster to be fair that's a small percentage win compared to the stuff that we're talking about here but it's still meaningful and we have not explored anywhere near enough of these things as the author says we've barely scratched the surface if you really want an inferiority complex see other commits from Seth Brenth they're wild yeah Seth seems to be this JS god on the Chrome team making DevTools better i roast DevTools in Chrome for their UX all the time but I've never thought about all the hacks for performance in there speed up computation of dominators for heap snapshots the comments are actually really readable here first check for more bits in the current bite next iterate bytes to skip over ranges of zeros finally iterate the non-zero bite to find the highest bit i love the the bitwise math for parsing heaps god mode insane i I'm feeling the imposttor syndrome here thank you for that call out i also think that as a community we have not really grappled with what the world would look like if we relegate JS tooling to an elite priesthood of Rust and Zigg devs this is also a fair point if the only people who can improve our tools aren't JS devs the Rust and Zigg devs that happen to care enough about JS to like bestow upon us these features and tools how do we innovate what if I'm a random JS app dev that has an idea for something that like I want a plugin for but I have to write that plugin in Rust it sets the bar too high and I think we've had an incredible couple decades of JS tooling innovation and a significant amount of that has come from the fact that it's not that hard to build a new JS tool that has given us the meme of there's a new framework every week but it's also given us a ton of innovation that I miss dearly when I go to other languages i just spent a bunch of time rewriting the same project in Rails and in Elixir Phoenix i love one of those solutions not the other but I do love Elixir and Phoenix but I still find myself missing a lot of the innovations that we've had in the last 5 years in JS because it takes a long time for those to make it to these other tools and JS is the world where these innovations happen and then they spread to these other locations if JS is built on other languages the likelihood that these innovations get built and tested out in the first place goes down significantly and it's a thing that we need to consider i can imagine the average JSE dev feeling completely hopeless every time there's a bug in one of their tools rather than empowering the next generation of web devs to achieve more we might be training them for a career of learned helplessness imagine what it would feel like for the average junior dev to face a SEG fault rather than a familiar JS error imagine that that Seg fault happens when they run PNPM run build but it wasn't there when they ran PNPM rundev horrifying at this point I'm a senior in my career so of course I have little excuses to cling to my JS security blanket it's part of my job to dig down a few layers deep and understand how every part of the stack works however I can't help but feel like we're embarking down an unknown path with unintended consequences when there is another path that is less fraught and could get us nearly the same results the current freight train shows no signs of slowing down though so I guess we'll find out when we get there i mostly agree this was a phenomenal article and I'm already seeing these other titles and really wanting to read them this one's over 10 years ago and I still want to read it js Devs and the Paradox of Choice SPA's Theory versus Practice there's so much good stuff here this blog is officially on my read list should be on yours as well huge shout out to Nolan for all the work on this post go check out Read the Tea Leaves at nolanawson.com link in the description as always how do you guys feel should we be rushing to rewrite everything in Rust or should we take a step back and think if we can do this in JS instead let me know and until next time peace nerds




## JavaScript might become two languages (and it's dramatic) - 20241016
JavaScript is a weird language I don't think I have to convince any of you of that we've all written it we've all seen it we know how strange it is but it is a language that's evolving and improving what if the path to evolve and improve it faster was to split it into two and no I'm not talking about typescript versus JavaScript I'm talking about a new proposal that's really interesting and it could change potentially even break the web forever we're talking about JS sugar and js0 the new proposed way to split JavaScript in half deferring some parts to tooling authors like Babble and compilers in the other part to the browsers themselves this is an interesting one and the dramas already started I want to dive into all of this with you guys and make sure you understand this proposal all the other crazy things that happened to tc39 and what the future of JavaScript might be if you haven't already seen it tc39 is the meeting where all the new Js standard stuff gets talked about a ton of things were proposed keep an eye out I have a video covering all of those coming soon this all started when nvox popul started reporting on this proposal he's a legend from the Ember Community that's deep in the JavaScript standard stuff RP vanilla JS and that's what's really scary with this proposal they're effectively saying that build tools will be required going forward if we want to do more if we want to have features in JavaScript that are reasonable as developers that those features won't be part of the engines anymore those will be part of the build tools that we use oh boy I can't wait to dive in more but first we need to have a quick word from our 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 sugesting that tooling use would decrease in the future there's already aspects of webd that preclude frictionless direct authoring secure context requiring local HP servers interesting call out and direct authoring can be recovered during development at high performance costs like what coffee script does interesting let's just read through this thread because noox is a legend and if he doesn't like this and I don't like this and Brandon Ike doesn't like this and Canada honk doesn't like this too there's enough people disagreeing with this and I'm guessing if dhh hasn't seen this yet when he does he's going to hate it too cuz no build oh boy the tldr before we go any further just to make sure it's very very clear is that new features in JS will not be part of JavaScript itself or JavaScript engines they will be things built on top as a standard syntax that build tools will handle for you so if you look at an example like this error. is error this is a new standard hopefully coming very soon they provide a polyfill which is code you can load to be able to to use this syntax ahead of time a lot of these new standards are able to do that via build tools compiling in the right syntax via having these polyfills that you load in order to get it early there a lot of these things that JavaScript allows but right now it's just ways to get these features early it's not alternatives to JavaScript itself implementing the features the argument being made by this proposal the JS sugar proposal is that those types of features should just never be part of the JavaScript engines and build tools should always the way we handle them they might still be part of the standard but the argument is the standard should be separate from the expected implementation that browsers have so you can have Js features that aren't supported by the engine with the expectation that build tools and poly fills will Implement those features for you on top kind of chaotic let's dive in this is straight from the slides which by the way they have all of here you know let's go through the slides quick first and then we'll cover nox's response interesting art choices the thing that they're specifying here is that we have this weird path where typt and JavaScript have features we then put it through build tools like the typescript compiler Babble webpack that result in JavaScript coming out that then has to run in the browsers and other engines to work for the users so despite the fact that we have these two layers we have the layer that turns our typescript code into standard JS and then we have a layer that turns the standard Js into code your computer can execute in order for users to see the results that separation is the thing they are calling out if we have this part anyways if we have these build tools on the left here why do we also have to implement all these things here if they could just be implemented here instead that's the argument JS is special outsized everything it's used by tens of millions of developers billions of users of software written in JS and many maintained independent implementations and that's the key there's all of these different things that run JS and it's new features are added their jobs get harder especially with things like those new memory proposals we just saw imagine implementing those for every single browser it's going to be a while before they all support it and as more and more of these standards are introduced it is more and more difficult to maintain all of them and it's basically impossible for new engines to come out because you to support everything these slides are chaos we evolve the language to help developers we want to help developers to be more productive by better matching their mental models like f functional programming o types systems enabling them to more simply Express new domains like machine learning Finance scientific Computing internationalization enable them to build new classes of apps with new capabilities like weak references and shared memory letting them use new interfaces entirely like wasm reifying common programming patterns that they use and simplifying their lives by removing dependencies and build tools and this is the part they're throwing away now so how do we help depths by abstracting away complexity by introducing new abilities and by explicitly coordinating I don't know what they mean by that by exposive coordination point is being the place where everybody follows I suppose it's like having the one standard that everyone implements makes it better for developers to move their Tools around acting away complexity moves it not removes it complexity is moved from tooling and developer code to language implementations that's fair if they add like let's say they add type safety to JavaScript standards right now the complexity lives in the typescript compiler this would move the complexity over to the browser standard implementations which makes their lives harder and effectively what this is doing is in their minds offloading complexity that currently lives in Dev tools over to the browsers instead what about the users very interesting it seems like their angle is users aren't getting any of the benefits from a lot of these new language things what do users want they want security they want performance stability and features and end users are the implementation's primary customer when new features are added to the browser the developer is not the one they're trying to serve it's the users and the argument here is that the browser should be more focused on what the users want and developer to should focus on what developers want it's an interesting argument it sounds logically sane but we're going to go through all the reasons why I don't agree with it at all a new language features are more likely to have a negative impact on security performance neutral to negative stability often sometimes negative as well but app features can be positively uh impacted as long as the de the devs are using these new features and those features do make things easier other than web components but yeah apparently some of these severe issues that have existed in V8 came from new features like big ints class Scopes built-in promise subclassing optimizing for super resizable buffers weak refs logical assignments and top level awaits have all caused severe security issues in Chrome and in V8 to show that I'm a serious man the vulnerabilities above are all set in aerial that's kind of hilarious this is despite state-of-the-art security engineering with fuzzing Bounty program Security reviews Etc VMS are very complex because the of the pressure to be fast and complexity crosscuts all of security and when these big features don't get adoption like or species or big it sucks because it was hard to implement them in a safe way and now no one uses them speaking of performance performance new features have guard rails that can't be optimized away like letting const design inherently slow for Network like esms like esms are are have the potential to be really bad for networking it's weird to see it called out here but it's a real problem also too many allocations that are hard to li like the iterator proposal that's really hard to get in a way that's performant and works everywhere stability is also an important detail they're overall good with backwards compatibility things that used to work continue to work Enterprises will freeze browser versions in apps that Target latest Baseline may stop working on Enterprise that's noge coalescence broke things in Firefox I will say Enterprises freezing browser versions is terrible because of security updates and they should not do that and we should not be building for a web where browsers might be on Ancient versions because a corporation or an Enterprise is doing things wrong that that's probably the single point th far that I agreed with the least the Enterprises should be forced for security reasons to stay up to date that is terrifying like genuinely so new language features should help devs be more productive so they can ship more new features for their users but native adoption of features is lackluster or sometimes not even worth it performance regressions use cases lack of incentive specifically we still transpile everything it's so common I know that Prime mentioned this in a video recently so many apps will just transpile in basic functionalities but in the browser for like 8 to 10 years like so many things compile for like ES4 or es5 instead of the more modern standards even though you're using all the new code it'll just compile out like the the poly fills for everything which is weird because we should be taking advantage of it being in the browser good old core JS yeah are these negatives to the users offset by benefits to devs the statement here is no cost to us is an aggregate complexity belongs at the edge JS run times are used by billions which means a security flaw has wide implications user bases of each app are much much smaller for vast majority of apps exceptions being WordPress Facebook and Google so complexity cost and runtime as a storage memory and performance cost to every user regardless of adoption yeah but how often is that cost being eaten goals intention helping devs be more productive doing right by users they're claiming that these are not goals that are aligned where I think we are today and where he thinks we should go so the big proposal here is we need to change how we introduce new features engines are going to be more conservative with new language features as they pursue security performance disability for users they're not proposing new process or demotions they're not proposing a new process or not saying that they demote any features currently being proposed it's about the future taxonomy of new language features syntax apis and capabilities syntax or syntax is a thing that can be represented as an API like big decimal syntax that is or can be represented by an API but wouldn't benefit from a different textual representation pipeline or syntax where the text representation enables its functions like immutable data structures like records and tupal syntaxes these are different types of syntax some of which could be done via compiler and polyfill some of which need to be in the browser itself also language distance does it require static compilation or is it more Dynamic some syntax editions fit without the issue into a language which is dynamically typed and interpreted but some syntax features make more sense to rely on type information or on a compile step interesting apis are spit split into builtins and new built-ins built-ins expanding capabil of existing browsers and allow additional capabilities for existing methods like subtypes of existing builtins for objects new capabilities exposing host system so if the browser's adding things like float or access to video things or in the future if there's like a locally running model you can use those types of things would be exposed here that would self to be built into the browser also parallelism weak refs all of these things makes sense and then new capabilities opportunity cost of not adding new capabilities is large because the alternative is you can't do it this is where most of the risk appetite is for implementers engines being conservative does not mean that we have to stop evolving the language so the proposal is that for syntax features we should have a new category that we'll call JS sugar trying to find it he calls out that devs have embraced tooling saying typescript Babble all these things are being used by the majority of web devs tools exist and are widely adopted let's use that fact for a winwin standardized JS as the ecosystem uses it which is JS zero the language implemented by the engines and then JS sugar which is features that must be compiled by tools to bejs Z so for the future of Dev JS would be js0 the browser thing plus JS sugar what we're actually writing interesting so now typescript JS sugar and JS Z compiled into just JS Z which gets run in the browsers instead future index features could be specked as dings in JS sugar so it starts as JS sugar and can be moved in if it makes more sense to and run times count as implementers for JS Z features but there is still one standard browsers an engine support JS Z tools support a down leveling of JS sugar to JS it's not a proposal for tools to do non-standard extensions this is still like they have to implement the JS sugar set of things oh boy this is going to be fun let's dive into the thread here the presentation was by Google Mozilla apple moible and Sony interesting set of people argue that we evolve the language to help devs and the users are suffering as a result proving the language moves complexity yeah everyone should consider their users as the primary customer I agree it's only going to make Dev useful features for users harder if we make it cumbersome for appdev to work on these features delaying or splitting up complex behaviors unless you have a big user base the cost is too high slide deck is regularly complaining about Asing generators big inss and esms interesting it claims Asing generators aren't used commonly but they are very common in node and I think this is another Pro problem is that like the things node needs and the things the browser need are separated enough which is rough oh boy think this is silly because for esm there's another proposal that makes esm bundling possible basically via concatenating files that's cool I didn't know about that yeah regenerator is ancient we should not still be using this to make things work in ancient versions of web tooling like come on like we don't need that on everything and this is I call the same thing like pretending that helping devs in doing right by users is a spectrum not two points with our goals is kind of pathetic uh so many things going through the tc39 process would free me up to multiply my velocity I agree apparently the syntax features proposal is what Google's preferred solution is but not necessarily the other implementers good to know that call out I missed that initially they want build tools to prove out these features before building them themselves which is already happening but it seems like an excuse to defer work even longer which I agree like that's why we have yeah we have stage three for this reason Theos has been recommended for implementation no changes to the proposal are expected but some necessary changes may still occur due to web incompatibilities or feedback from production grade implementers that's the point of stage three is it's been approved tools can start implementing it and if browsers see problems as they implement it too we can adjust the standard that's the point this isn't a difference in the language it's a difference in whether or not like where these proposals Advance like that's the point of the standard are they wanting a 3.7 stage like 2.7 that's a weird screenshot the 2.7 standard is like we're very close to implementation the Committees agreed but things might change as we start implementing it they propos this as a winwin but I feel like some communication boundaries falling apart and we need to get better at communicating with implementers in particular as example jvm teams poorly staffed for devil and listening to broadspectrum Dev feedback but are good compiler authors yeah let's not have Js VM teams poorly staff for any position I agree like people on V8 there should be people on V8 talking to the community that's really important but the the big thing here is build tooling required which would effectively kill vanilla Js like this is also a weird thing like saying this is an opportunity to make Source Maps better that should be done anyways regardless of if they make JS two languages H this is a fair point I agree most things that people are proposing would have measurable impacts for their users I can also see the argument that engine implementers may not think the impact is to enough users to make the implementation time worth it essentially we' all be relying more on Baseline as different implementers could have vastly different javascripts if the process started in 2013 I could see features of es6 not existing in some implementations even today maybe Baseline would be insufficient though because what happens when an impl doesn't ever want to implement a feature and that feature is widely used do bigger companies need to pay the engines to get features implemented is there a future where apps ship their own run times with something like wasm I have no clue if anyone does be super helpful to hear your thoughts so if you guys aren't familiar with brandan Ike he's the creator of JavaScript and I love this call out from him implementers should not be calling the shots almost none of them have any real webd experience if you haven't watched my video but web components I go in depth on this the browser engine teams just don't really understand how people build JS every day on one hand that kind of makes a proposal make more sense because they're like we don't get this let the tooling people figure it out but on the other hand it means that them making decisions around what does and doesn't get implemented has potential really negative impacts on the web as a whole this is a point because you keep saying the web assembly thing web assembly in no way replaces on any foreseeable basis JS is an extension and glue polyl language needed to compensate for inevitable and ongoing HTML and CSS gaps and bugs even a tool only dystopia doesn't solve this blindness to evolutionary Dynamics is fatal bold but real he calls out that there are implementers that are pushing features to only be part of wasm and not actually building them into JS the example was simd which I should probably know what this is a single instruction multiple data which is a way to to control large amounts of data for like game engines and such they're only allowing those apis to work in wasum not inside of JS ik wanded it injs and is surprised that it was restricted to wasm this is already starting to happen and that is somewhat terrifying I do like malti here who if you're not familiar CTO versell and a person really involved in Google standards way back when he worked at Google he calls out that this is essentially the opposite of the web component strategy which is that we should have Frameworks like typescript ad comp without making the platform too complex which web components absolutely did malda thinks this is a good direction I have concerns I have a lot of concerns this is from Canada honk huge shout out to them for helping me organize all of this they call out here the proposed problem which is that adding language implementation level complexity is bad for users and implementers new language features are too focused on helping devs and not doing right by users their proposal proposed solution is that the language should be split with sugar and JF zero as much before they also call out this is proposed with good intentions browser JS engines like V8 want to reduce the amount of new features they Implement for the reason stated above so they propose this as a solution to ensure the language continues to evolve which JS sugar that implementation would move to tools like Babble instead of engines the problem with the proposed solution JS tooling does not have the resources to deal with this tooling today is already at an unstable ecosystem constantly changing entire tool chains like Babble to S swc to oxc who knows what's next Imagine each of these tool chains not only have to deal with everything currently happening but also new tool only proposals in more than there were before the one Counterpoint that's valuable here is that tools are often implementing some of these unstable features like decorators which this is implicitly kicked off by so they do have some resources not enough but some that said we're currently in the process of rewriting all of these tools to be faster and in Rust and if we have to also Implement new features in parallel that will slow down that transition significantly it's also worth noting there's a lot of tech in these older tools like Babel because they implemented things that the browser eventually implemented that are still sitting in here that should be dead long ago JF sugar features can be less stable but this is also an advantage to more easily fixed mistakes this is countered with the fact that we have a staging process for tc39 which ensures stability of new features introducing a new form of implementation designed to undermine this would be counter to what ecma script stands for the proposed faster implementation iteration can easily leave some devs behind with tools hiding unfixed mistakes very real like what happens if you can't upgrade to the new version of webpack or babble do you just never get to use any of these new Js features ever and if more of these features are being implemented in those tools it's going to be even harder to move to the new things the idea seems to fundamentally misunderstand how devs use these tools below the surface versioning plugins and all the effort that goes into simply using them do devs expect these tools today to implement JS features developers already are largely moving away from less standard tool only features like typescripts enum this is a good call out to there are features in typescript that aren't in the browser that we're realizing suck and we're moving away from there's features that typescript added first like they added nolish col lesing and optional chaining a little before browsers did but now it's everywhere what if the feature sucks now it can get further in the JS sugar proposal process where before it would have been killed and now we have these weird features floating around which is weird because now we have to relearn the JS standardizing that some features are tool only due to reasons beyond their knowledge and that's particularly weird you might have some syntax that you're used to using in your editor that you go to the browser and you type it in the console and it just doesn't work there this is a thing that all JS devs are going to have to understand the separation is now you have to know the two languages you have to know the JS you're writing and the JS that's actually being run imagine if we had to understand the bik code that came out of V8 if you ran JavaScript and that turns into bite code imagine having to understand that bite code and imagine that you have to use that bite code if you want to do things like log in the browser this is that but within JS which is kind of scary I like the call out here that JS sugar will only har DX no matter the details this undeniably makes JS more complex for devs Google may think that this is only describing the current reality but it's fundamentally untrue this ignores server side or treats it as a tool like Babel in this JS sugar World node Dino and Bun will have to implement JS features instead of V8 in JSC and other run times how is that fair that's yeah it's weird to think all of these things like node Dino and Bun would have to build all of these new features themselves genuinely terrifying oh God it's easy to support this but it is tough to meaningfully constructively critique it I noticed that as I was reading like a lot of this sounds like a good idea but the damage this would do to the ecosystem is rough and I like to call out here that K honk feels that employers are becoming complacent with tools and now they see some proposals as not worth their effort and instead those should be the problem of the tool developers instead if they can code gen Solutions or polyfill then why does the browser have to do it they don't see the benefit of their effort so they view it as useless to work on I guess their core argument is that new features which do not make things previously impossible possible are useless for end users and they are not providing an actual visible impact to the user true and painful I Nicole please come back Google needs you I thought going in that it would be harder to understand the implementor side and I also thought going in that I wouldn't feel quite this strongly but it's clear this would fundamentally change how working with JavaScript behaves for all of us and I don't think that change should be made without clear concise focused wins none of which were presented here if we saw all those security issues happening in the browsers from implementing new Js things how much more are we going to see those in random tools implementing it instead it's hard for me to see a future where these things actually benefit both developers and users even the developers of the browser are just off offloading all of these problems to other people and while I understand they feel like they have to do too much work to implement all these things that does suck we should offer more sympathies and ideally more help to V8 to all these other places that have to implement the stuff but at the same time it's important to not offload all of the things you're scared of to other people who are not equipped to do it this is a tough one and I'm curious what you guys think let me know in the comments if I'm off base if JS Z and sugar is a good separation or if you're petrified of a future where these things happen until next time peace nerds




## JavaScript might get compiler hints_ - 20250512
javascript is slow okay it's not as slow as everyone likes to say i know it's the meme to just make fun of JavaScript for being a terrible language but it's not that bad that said there are a lot of things that could make it way better one of those things just got announced by the V8 team and that thing is a comment yes a comment that can make your code 10 times faster what the hell is going on here we need to dive in because I am so excited for explicit compile hints making their way to JavaScript finally i didn't think we'd ever see the day this is such a implementation detail type thing but the more I see the work V8 is doing the more it makes sense that they're enabling these things not because an individual developer building an application is going to use them but frameworks in the tools that we build that more deeply understand the browser can take a ton of advantage of them there's been a lot of collaboration between the V8 team and framework authors like the React team in order to add features to make these frameworks and these tools we build with more performant and better and this is one of those and the potential is absolutely insane that all said neither the React team nor the V8 team are paying me so we need to make our money somehow quick word from today's sponsor then we're diving right in there are a ton of different AI app builders nowadays there's a problem with them though they all feel like front-end people made them and I have nothing against frontend guys you you know what I am right but I do love backend dearly and I've always been frustrated these AI app builders didn't know how to do backend there is one company that knows backend really well in the React world though convex you've probably seen them my other videos because they sponsor them they sponsor this one too but not to talk about Convex talk about Chef which I bullied them into making the reason I did that is they know backend and I wanted an AI app builder for people who want a backend that works you know like every real app needs and this is the only AI app builder that handles everything from data storage to sync to file upload to off and all the other annoying things you normally have to deal with i could talk all about it but I'd rather just show you here's a real app that I built using Chef it's a party planner app i already signed in you can sign anonymously or with email password all works how you'd expect but I can go in here create a new event new event random text for the description location where whatever created so I have this new event I just created happens immediately because their database layer flies also scales great too you've heard all about that before though but check this out i just went to this event inside of my database and I'm going to change it here to have a different description click save go back and it just changed because it's a proper full stack implementation where the data will never go out of sync because it's all live syncing using Convex's platform it's such a gap between this and my experience using these other tools where the back end and front end barely can figure each other out now they are fully in lock step because again the convex platform is really good at this you have a schema that's a real code file that sits here you have your invites which is a real mutation JavaScript function that makes a ton of sense it's all type safe from back to front and this whole app by the way one prompt this was a oneshot i oneshotted a thing that I couldn't get any of the other app builders to do after hours of trying it's truly unbelievable i didn't think it would be this good when I told them to do it and it is better than I could have ever imagined try it yourself for free at soyb.link/f giving V8 a heads up getting JavaScript running fast is key for a responsive web app even with V8's advanced optimizations parsing and compiling critical JS during startup can still create performance bottlenecks knowing which JS functions to compile during the initial script compilation can speed up webpage loading there's the key when you give V8 a pile of JavaScript it has to parse all of it compile all of the functions and whatnot in it and get those ready before it can start executing code even if you're only using onetenth of the functions that have been imported through that JavaScript file it doesn't matter they're all there they all have to be compiled before any of the code can run that's what makes this fun when processing a script V8 has to choose for each function should it compile it immediately or defer a function hasn't been compiled is later called V8 must then compile it on demand if a JS function ends up being called during page load compiling it eagerly is beneficial because during the initial processing of the script we need to do at least a lightweight parse to find the function end in JS finding the function end requires parsing the full syntax there are no shortcuts that they could use with things like curly braces because JavaScript is a complex language you can do a lot of different things there is no simple way for us to figure out where a function actually ends so they have to parse the full function in order to fix that and they also have to after deciding if they want to compile it eagerly do that on a background thread even though parts are interled with loading the script from the network if they were to instead compile the function only on call it's now too late to parallelize the work since the main thread is locked waiting for that function to exist just because the function's in your code doesn't mean you can call the function yet because JavaScript does so much to take our crappy syntax and turn that into performant things running on our machines and if it hasn't optimized the function you're trying to call it can't parallelize it when you're calling it it has to block until it's been optimized many web pages would benefit from selecting the correct function for eager compilation for example in our experiment with popular web pages 17 out of 20 showed improvements and the average foreground parse and compilation time was reduced by over half a second 630 ms is insane the feature is called explicit compile hints it allows devs to control which JavaScript files and functions are compiled eagerly chrome 136 is now shipping a version of this where you can select individual files for eager compilation version is particularly useful if you have a core file which you can select for ego compilation or if you're able to move code between source files to create such a core file so you add this magic comment in the file slash all functions called onload as long as you put this at the top of the file that file will now be prioritized when you load the script here's an example script one script two script one has this script 2 has the all functions called on load and when you look at the logs when you navigate to the test page you'll see that the full parse happens for test funk one before we even get to test funk 2 since test funk one was compiled lazily we see the parse function event when it's eventually called interesting so the difference here is that test funk 2 skips straight to full parse we don't see a corresponding event since the compilant force it to be parsed and compiled eagerly okay that makes more sense so here test funk one goes through multiple different steps we have to pre-parse then full parse then parse the function then interpret it with test funk 2 with that comment it's an immediate full parse and then the interpreter can run it it skips meaningful numbers of steps here which is pretty cool to see if you want to prioritize certain things what this is reminding me of is a certain framework I haven't talked about in a minute quick if you're not familiar with how quick works it was built by the guy who made Angular almost as like an apology for what he did with Angular to an extent it's like as opposite as possible to what Angular did the main thing Quick wanted to focus on was resumability we need to think about page loads so a user goes to a web page we'll say we go to test.com so the user loads test.com i guess actually the the vertical makes more sense cuz I want to have multiple layers so we have the user I guess we'll say browser and we have the server so the browser navigates to test.com the server responds with HTML for that page the HTML includes in it some things that we want so over here we will parse it i guess I'll draw an arrow for this parse HTML find script tags so we parse the HTML and we find all of these script tags on it and we have to go request those so we'll say we request script 1.js script 2.js etc and now all of these scripts come back down it is worth noting that in this time whatever's in the HTML file is being shown to the user so if we have a web page that just looks like this and on this page we have a button it's a counter and on click we want the counter to go up so the HTML we got has all of this in it the problem is the HTML doesn't have the JavaScript to trigger this that's in a different file that's tagged so now when the user clicks if they click before the JS has loaded in nothing happens because the JavaScript that describes what this button does and how to update the DOM when that happens isn't there so the click event goes nowhere so now imagine that these scripts are pretty large we send down thejs files and now the browser needs to parse those files and do something with them i'll copy paste my wonderful arrow here parse and compile JS then run the JS to bind to DOM up until these JS files have been parsed compiled and run the web page is not interactive so in the time for when we load the HTML file to the point where all of that is completed this whole window here interactions don't work for so once the HTML loads even if it shows the right content we have to wait for the JS to be parsed out of the HTML fetched from the server downloaded parsed again compiled run and bound to the DOM then the click actions will start to work the goal of quick was to compress this a bunch especially if you have a ton of script tags what if we didn't send this all down as these giant individual scripts what if we inlinined a little bit of JS in the HTML to describe basic interactions or at the very least ceue up events so once the JS is loaded in the event can be fired that's how React works right now if you load a React page before the JS has been fetched from the server it will cache events and then once you have the full JS it will replay those events against the virtual DOM to get the right result out quick handles this by embedding state into the HTML the way quick worked before is this weird HTML syntax for comments that would tell inline JavaScript or very short bits of JavaScript like tagged out here how to interface with the different things in the UI it's almost like a hibernate so to speak where it instead of having to rerun all the JavaScript to recreate the DOM to rebind to it this describes to a smaller set of JavaScript what element is attached to what thing so that it can update this number here the T8 thing surrounding it is basically a syntax to tell the quick framework this is this identifier if you want to update the number you have to update the thing between these comments it's a weird syntax they tried to squash it down with quick 2.0 yeah they put in the elements here the description of what is where instead as a way to make this more maintainable it's an interesting choice the point I'm making here is that all these decisions were made in order for quick to get to like to resume state on the client with interactivity as quickly as possible that's why it's named quick the whole point of the framework is to go from page loaded to interactions work as quickly as possible and this mattered a lot especially for websites with absurd amounts of JavaScript on them because if you have some JavaScript that's meant to cue events but you have other JavaScript that's way heavier all of it has to be compiled before it can run if I can now have one file that has that comment on top guaranteeing it will exist as quickly as possible that on page load it'll effectively be instant compiled and ready to go i can effectively DIY Quick's interactivity into any other tool or framework and what I've seen from the React team is they're kind of leaning into this way of thinking now where some features make a lot of sense to build into the framework things like hooks obviously belong inside of React things like server components largely belong inside of the framework some other things though like how do you animate an element when it's removed from the DOM that's not something that the framework should have to do some frameworks have tried to figure this out but the the problem is there is no primitive in the browser for when something is removed you have one for add you can fade in things you can do animations when things appear when something's removed from the DOM there isn't really an event for that and the element is gone you can't CSS or style an element that's not there anymore the React team could have put a lot of time trying to hack around that but instead they waited for view transitions to happen view transitions are a browser standard that is focused on making it easier to transition elements both between pages during navigation and in and out on the browser in a given window when elements are added and removed i did a whole video recently breaking down all the cool new things coming to React and most of it was the view transition stuff because now they can build a component that you wrap an element with and it will automatically animate in and out when you remove it from the DOM because view transitions are a browser standard that solved that problem because the problem lived in the browser this is similar could the React team have done something crazy with resumability similar to what Quick does probably it would have been hellish but they could have done it instead I am almost positive they nudged the V8 and Chrome teams to figure out how to do a better experience in the browser for prioritizing different scripts so they'd be able to load in the interactive parts as quickly as possible and have the rest come in later it makes so much sense and I'm really pumped to see this making it through the browser this will make everything potentially faster and frameworks like Nex.js JS will be able to take advantage of this to make your apps get to that interactive moment much faster time to interactive is a tough metric to crack and this is going to help a ton with it compiler hints aren't a particularly new thing either if you want to know a bit more about all this I did a video I was really proud of um I finally know how CPUs work this is with Casey Morritori who comes from the gamedev world absolutely schooling me on micro architecture and like CPU stuff one of the things that processors do in order to execute more quickly is guess which path is most likely to be taken because a given CPU cycle isn't just doing one thing it's doing a lot imagine you're a processor and you're getting this function every time you take a step you do as much work as you can in that step so we know an integer was passed to f and that this switch statement has to execute something if we want to do as much work as possible during that step we can guess which path we think is most likely and continue the compute through that step if it turns out it's wrong we can kill that tree and do it correctly on the next cycle but if I as the developer know which of these paths is most likely instead of letting the processor guess I can tell it via a compiler hint hey this case is more likely to happen so prioritize this one the other can happen still so don't guarantee this path this isn't hard coding it to case two always happens this is at an architecture level optimize for this being the case and if it isn't we can interrupt it's a a very small micro optimization but these optimizations at like CPU level matter a ton and compiler hints have become essential in application development especially lower level stuff to maximize the performance we can get from these things it's worth noting that basically everyone says don't use these unless you know what you're actually doing like very well and I agree compilers are very good at spitting out optimized code including the compiler built into the browser with V8 v8 is a phenomenal engine and it can do things that are hard to fathom it's so fast it's so much this isn't for us to use as application devs i will probably never write that line is very unlikely I'll ever write something that needs to use this all functions called onload but Nex.js might React might Remix might Spelt might all these other tools we use might find good ways to use this to prioritize the right parts of our code as part of the compiler step and that's what's so cool here this will enable framework authors to get our apps to that first interactive moment much faster and that's a great win for the web more and more I expect to see this to be the direction that teams like Chrome are moving in because new browser features make way less sense if they were to give us a new syntax for something like error handling or a new way to interface with arrays our AI tools aren't going to know that those are there and how they work and getting other browsers to adopt those things is also difficult so I can't use the syntax because other browsers don't support it unless I polyfill it and now if I'm polyfilling it doesn't even matter things like this are wins that my AI doesn't need to know about my AI code tools my recently onboarded team of JavaScript developers none of these people need to know about the new features being added to Chrome that are enabling frameworks to be faster you can kind of think of us as building on a stack like this so I'm an app dev i write app code the app code works within a framework the framework gets compiled and the compiled code gets spit out to a runtime historically we have focused a lot in like this world how can frameworks improve our experience writing app code how can we make better application software how can we make new frameworks that make the app code part in particular easier to write that part's gotten way too easy since we have AI that can generate a lot of the things in this range we don't want things right below to change if we were to change out the framework we use everything above has to be replaced too the app code has to be blown out the app devs have to be onboarded for the new framework in order to write new code so we are now more hesitant than ever to touch things from like here down we've effectively drawn a line here now where everything above doesn't want to change anymore because if it does the tools we're using with like cursor and whatnot aren't going to catch up to those changes so the question now is given app code if we take a given react application what can we do to improve it we can improve the framework so that the code comes out faster or we can make optimizations within react to make our app code better we can improve the compiler or even build new compilers that will take this framework code and spit out something more performant we can work on the runtime in order to make it so the code that comes out can be run faster maybe we add new primitives in the runtime that the framework can use but I think now more than ever this area is where we're going to be seeing change and the Google Chrome team and the web standards committees are going to be less focused on things we would write as developers in our app code and more focused on what happens down here instead a great example of this is scheduler.yield scheduler.yield is a feature that Chrome was effectively bullied into adding because the React team wanted it so bad the role ofuler.yield yield is interrupting your own work mid action so if we have an event listener here for a click we show a spinner we yield then we do this other piece the slow content swap we want the spinner to show immediately but if we were to just do the spinner then do the content swap we would have a problem because those especially if this isn't async those are going to happen at the same time so the spinner won't ever be seen because the content swap that happens after will happen immediately as part of the same event that sucks and as such what frameworks like React do if they want to show you something immediately and then show you the rest later when it's done or if they want to allow for a user typing on the keyboard to interrupt during a render a lot of these frameworks have to do weird stuff where they make something synchronous async instead await a random like noop thing or often they will use a uh a a set timeout to zero and the reason they do that is so they can chunk up the event Q if you have events in the browser we have our we have our event loop the user clicked a button so this is like the on click triggered the on click has a bunch of stuff in it it has those parts that we saw here it has show spinner which is fast show spinner we'll say this takes 1 ms but we also have slow paint which takes 800 ms ideally show spinner would be able to happen immediately and slow paint would be able to cue separately so we'd want to split these out into their own separate things on the que but now imagine instead of on click this is on change on an input we have like a search box the classic web page where the user is typing search query and when you search we update the content underneath so we trigger this on change with search with a C but we didn't finish typing yet and now imagine we had all of this in one event like we did originally without any of the blocking and any of the other stuff then I add a new on the rest of this then I have to repaint all that again then a new event comes in with the space you see the problem here is sticky keys we've all had the problem where we're typing in an input on a web page and every time we press a new key it gets slower and slower until a bunch come in at once that's because each key press is triggering something that is slow and there's no opportunity to interrupt the the reason they added yield is the solution before they would use set timeout to call the slow paint but when they called it that way it would become a new event and not just an event that goes immediately after it would get added to the end of the queue so you'd have to process everything else that's currently pending in order to flush the queue what the React team wanted was the ability to in the middle of this event where you have two things you have something fast and something slow so we have the slow part is 800 ms the React team wanted the ability to between these effectively check and ask "Hey is there anything more important?" So they wanted to run the fast part check if there's other things it should do instead then do the slow part that way if there is something more important it can just kill the slow part entirely never run it and put the more important thing on top instead the ability to interrupt a given task without giving up your position in the queue is the magic of yield it is telling the browser hey stop here if there's more important work do that instead but if there isn't don't interrupt me let me continue doing what I'm doing sadly despite this being what 3 plus years ago yield still hasn't made it into most browsers it is in Chrome thankfully you can polyfill it with the uh set time up behavior but you don't get the same speed of processing that you do with Yield it allows for not you and me but for framework authors to make decisions about what happens in the browser so if you have again this search query you would want whenever I am typing to always immediately update the content of that input box you always want to have that as up to date as possible and if you have stale results showing that's fine who cares don't rerender a giant field underneath on every key press if another key press comes in okay apparently the Firefox nightly now has yield but Safari still doesn't so this is the reason I brought this whole example up isn't cuz like oh everyone should know about this and use it it's specifically because you don't need to care because it exists below this line if you're not working on React Core or other frameworks that you're building yourself these details don't matter that much they're cool as hell to know that's why you're watching this in the first place i genuinely enjoy these things but the point here is that innovation above the line is kind of over i would not expect much more to happen up here because our tools have somewhat cemented what we have there similar to how like roads aren't going to meaningfully improve or change the way they work on the streets because we have so many cars that expect them to work a certain way a lot of our tools expect this to work a certain way now that's fine it means more innovation has to occur down here and that's what we're seeing the introduction of compiler hints and js fits that perfectly it allows for things under the hood including framework authors and compilers to spit out code that will run faster in our runtimes in the browser i don't want to keep going this deep on weird browser stuff i think I've made my point hopefully this helps you better understand why compiler hints are happening why you shouldn't use them and how our browsers and our code in the browser is going to keep improving over time curious what you guys think about this one was this useful to you or is this entirely nonsense let me know and until next time peace nerds




## JavaScript runs on literally everything now - 20241122
JavaScript is the world's most popular programming language it runs on pretty much everything but it usually runs in some version of a browser be it the actual browser that you're using like Chrome or through something like electron you know for your desktop apps like Spotify Discord and all of that and I know I know JavaScript sucks it's making all of these things terrible it's the reason that Spotify and Discord are so awful to use sure but that's not what we're talking about today we're not just here to Showcase things that are running in browsers because JavaScript runs in a lot of places that aren't browsers and no I'm not talking about node either I'm talking about stuff that's actually going to surprise you from game consoles to Linux the things you can do today with JavaScript are unbelievable do you know else is unbelievable today's sponsor let's hear from them really quick Cala I've talked about these guys a bit before think of them kind of like versel for everyone else and they're not some random new startup they're built by kinsta the people who made WordPress hosting not suck I've previously shown how easy it is to deploy and manage your deployments what I didn't know is how crazy their pipeline stuff is preview deployments are a thing I take for granted as a jsd but the way they have it set up here is nuts not only can you have one application deployed a bunch of different times following things like the GitHub poll requests you actually have a whole pipeline view where you can see which builds are where and you can one-click promote things to production you can even click from here to get direct access to the build so you can see what how it's working up and running and everything you need to go get to GitHub as well it's so nice having everything here in one place here's a PR that Peter made on this test repo for me and as soon as he made the pr immediately you get a preview build just like we do on things like for sale tell me that's not cool I don't know of any other server platform that has all of this baked out for you right when you get going and if you sign up today you get a $50 credit for free check them out now at soy dev. l/ Savala so to start things off I want to show the example that I personally didn't know rjs and surprised me so much that it inspired this whole video idea that thing is gnome yes gnome the desktop environment that is super common in the Linux world the thing that comes with Ubuntu by default it's using JavaScript and yes I know I'm not the biggest Linux guy I used to be but I'm giving an honest go right now in to learn that gnome is largely built on JavaScript was just so unbelievable to me gnomes broken up into a few parts but gnome shell which is the like core that everything runs through is almost 50% JF read and wheat boys 46.5% nuts right I thought that was really cool that was a surprise for me to learn and the reason they chose it is they wanted a scripting language that wasn't as miserable to compile and deal with that could be accessible to other people trying to contribute extensions to gnome and as a result every single gnome extension is written in JavaScript which I personally think is kind of cool okay real talk though I can't run a computer that's using JavaScript for its main desktop environment and operating system I'm going to switch this out for a real OS quick give me one sec there we go now we got a real machine running a real operating system you know one that runs real languages like a swift home sweet home now I to take off the hoodie for identity theft keeping the hoodie on but uh I'm getting these headphones off for sure had my fun there anyways no more JavaScript in my operating system sadly if I was using Windows that would not be the case because believe it or not a lot of Windows 11 is now running react native this is actually a funny interaction I had where my Windows start menu was having some problems it seemed like someone else had those issues so friend of the channel Jamon who you've probably seen me bring up a whole bunch in sponsor stuff because he's a react native God he one of the ones that's helped some amount with Microsoft doing these things I don't know how involved he's been with code but I know he chats with a bunch of Microsoft employees about react native stuff constantly and believe it or not react native is being used for parts of the start menu specifically the recommended section which is funny enough one of the few parts that works in case you're questioning Microsoft's commitment to react native check out this repo not only are they building react native for Windows they're also building it for Mac because they're real committed to using it in desktop applications Microsoft recognizes that a lot of their Dev tools suck it's not fun building native desktop apps even platforms like wwp didn't really make things good enough and Microsoft has stopped pretending that's why stuff like Windows subsystem for Linux has gotten as good as it has that's also why react native for Windows exists and is getting good fast because they're dog fooding it and using it for a ton of stuff more and more of office is starting to use react native the calculator app on Windows is a fully react native application they're taking advantage of these tools and Technologies in order to make it better for them to Dev on Windows and for others as well and if they get it all right not only will react native apps work on Windows it work on Mac too so as crazy as it sounds more and more Microsoft applications and even parts of the operating system are being moved to JavaScript and react native at least I'm safe on my Mac and on my PlayStation and my other consoles right well obviously the Xbox is running react native too I hope that's kind of obvious because react native Windows Xbox also kind of Windows what might surprise you is another console it's kind of a poorly kept secret but the PlayStation 5 uses react native 2 and not just a little bit of it most of the PlayStation 5's operating system in Shell are written in react native and they're doing really really cool stuff I can't go full in depth on this video but if you want a video dedicated to how the PlayStation specifically uses JS and react native for its whole OS let me know I'm deep in the process of reverse engineering this with a couple people from the PlayStation jailbreak community and we're already finding a ton of JavaScript bundles and binaries that are being used to run react native on the the PlayStation for basically the entire operating system there is some really really cool stuff here that I am super excited to talk about so let me know in the comments if you're ready for that video too see people mentioning that technically Nintendo switch also uses HTML for parts of the OS kind of fun fact about the Wii settings menu like for system settings it was actually just an HTML page and someone preserved it so you can open the Wii settings on any computer and it's the exact same Wii setting page which I just love technically not JavaScript because it's just HTML but yeah the history of using web Technologies to make it easier to build things for consoles is long running and the same way that we used to run HTML for its settings menu the PlayStation uses react native for everything but our games are safe right maybe the OS is using a whole bunch of JavaScript but our games aren't going to be hit with this impurity especially from game engine authors you know people who are building things like frostbite Unreal Engine or Unity there's no way they're going to use JavaScript I got some bad news for y'all question who uses mobex mobex is a state management library for react and there's an interesting reply in here an employee from Dice you know the electronic art studio commented most of the UI in Battlefield 1 is created in typescript with a react custom renderer we started using mobex for State about 2 years ago the project size is about 1,000 react components with 644 four observables 621 actions and 598 computed values with 729 observers it's closed Source but you can see it if you play the game yeah the UI layer in Battlefield is entirely built in react as well there's a lot of reasons for this one I'll be honest the biggest one is because frostbite kind of sucks and there is no menu system built in the game engine hell there's no asset loading system built in the game engine you have to roll everything yourself but they built their own rasterization and rendering engine in order to put UI on top of the game and they just use react cuz it's easier than building their own system for it but yeah there are whole games that have their entire UI layer built in JS but not the game games themselves are hopefully pure even if they're UI and the tracking of the bullets is Javascript right right right if you guys don't know vampire survivors it's one of my all-time favorite indie games and usually it's not played on the browser usually it's played on home consoles or through the steam version I adore this game and when I learned it was JavaScript based I was blown away because some of the combat and some of the scenes you end up in can get absurd would be putting it lightly the performance hell that this game offers is kind of hilarious and to know that this is all written with phaser injs is insane that said there's no way you're going to get a game like this to run well on something like I don't know the switch if the whole thing is JS based because you just don't have enough CPU so the way they solved that is absolutely hilarious they solved it by hiring a team of C++ devs to Port the entire game feature for feature to consoles but the lead Dev still builds it in JavaScript in the browser so he works on it here in the browser version gets featured exactly where he wants them gets the game in estate that he's happy with and then passes it off to the native team to go Port it to the C++ version and that poor C++ team has to Port all these weird like floating Point behaviors that exist in JS in order to make the game feel as close as possible on the native console version as it feels in the web.js version it's nuts there's a whole documentary about this game from no clip who is the like the best video game documentarian ever highly recommend checking this out if you want more of about the crazy history of this particular game cuz it's nuts it's so cool and learning that it ran JavaScript and learning the history of where it came from Easy watch super simple recommendation check it out yeah by the way this just got linked in chat there's a whole talk on how you can build UI for AAA games with HTML and JS obviously Electronic Arts are the ones who gave this presentation because they also built the UI for Sim City and the Sim City expansion of recent njs and HTML as well so this isn't a thing they just did once EA is pretty deep on using JavaScript and react in order to build better uis in games without having to hire specialized game UI teams building custom tools for everything this is really cool and one more quick thing this one I've been deep on research for for a while technically it's not JavaScript but it is still react so it gets an honorable mention react Lua which is a fork of a version that was built by Roblox originally called Roa Roa was an attempt at porting react to Lua so that the patterns and what paradigms we had for building good uis could be built in Lua for roblo yes they ported all of react to Roblox Roa was barely a port it was a shitty attempt at reimplementing the API react Lua was a from the ground rewrite where they went line by line through the react code base and changed all the zero indexes to ones and fixed all the things they could in order to try and get react fully ported to l kind of insane technically not JavaScript although they did write some tools to auto Port JavaScript code to Lua just thought it was worth mentioning because react has been coming up a whole bunch but technically Roblox is Javascript free but it's still not react free so I guess in the end you can't be pure of JS and even though I'm wearing my primagen Js sucks hoodie I can't escape it I'd have to give up Linux in duun I'd have to give up some of my favorite games I have to give up some of my least favorite games from Dice I'd have to give up using Windows almost entirely I'd have to give up so much hell I even have to give up VR nowadays too but if you accept that JavaScript is a good way to build a lot of different things life might be a little bit better and no I'm not trying to defend electron but let me know if I should do that in the future cuz I have a lot to say until next time peace nerds




## Javascript in the future_ - 20230810
AI is taking over the industry superconductors are now kind of a real thing and it's going to change compute forever space is space there's so much going on where does JavaScript and web dev fit in in this increasingly chaotic world is JS just going to die in favor of the Native Technologies necessary for all these fun new things I don't think so let's talk a bit about why if you've kept up on Tech Twitter at all in the past year you've probably seen the utter chaos that we're going through in particular with superconductors and AI stuff AI is really exciting because it allows us to make Trivial things much more efficient and let's be real chat gbt is generating a lot of code for people nowadays I don't think the code's all great but it's certainly meeting a bar that people are using to ship it I've seen it useful as a learning tool as well when it comes to superconductors the ways in which we do compute are going to change fundamentally having something at room temperature that can conduct conditionally allows us to make some crazy new chips that we've never thought of before and theoretically compute is going to get much faster in the near future with all of that where does JS fit in are you wasting your time if you're focused on web dev and web dev Technologies I don't think so I just fundamentally don't there's a big reason why all of these things are still going to need interfaces ways for us to interact with them and what we've seen over the last 10 years is a strong move towards web dev Technologies for interface design and not just on the web obviously with tools like react building interactive applications on the web is better than ever before that's not why they're using react for Tesla that's not why they're using react for SpaceX that's not why they're using react in video games now for UI that's not why they're using react to build a 3D application react is a really powerful primitive for assembling user experiences and when it comes to making a good UI that a person uses to interface with a thing react is still really hard and the benefits of using tools that are specialized for creating user experiences is that you can make a good user experience faster when the dice team was figuring out how to do uis in Battlefield they already had created an engine called frostbite that engine didn't have much in terms of Primitives to make a menu and they had the choice they could make the Primitive in the dice engine in frostbite itself to make menus so that both they and other developers who use frostbite would have access to it or they could use the tools that they were familiar with to make a good UI quickly they chose the latter and they actually built react into the engine when you're playing a Battlefield game and you're going through those menus there's a good chance those menus are powered by react itself and they're actually rendering often a web view inside of the game because that's how they're able to make the changes and build the good user interface as quick as they need to build it they could have made yet another menu system like every other engine has spent months building it and then have the team spend months trying to make a UI that works in it with a ton of back and forth and Chaos or they can hand the UI team the tools they're used to react and webtech and they can build a really good interface in their games this is the reality many many developers are realizing exists and I don't think AI is going to change that anytime soon if anything the standout part of your application is no longer going to be that you had enough devs build it it's going to be the experience you provide is good and as AI tools get more and more powerful in the code the writing gets better and better the need for good user experiences goes up as well and as we see things like Like superconductors Making Stuff way more powerful or AI making developers way less useful the expectation of applications continuing to get better and for the experiences we have to continue being better is still going to be there and that's what web dev enables it lets us make good things fast and effectively for users to interface and I simply don't see a future where that isn't the case none of these crazy things that are happening in the developer and Tech World change the fact that users need to have good experiences and that's why generally speaking I'm still betting on web dev and I am not believing JavaScript anytime soon so if you're looking at superconductors and thinking man I'm betting on the wrong stock right now go get into manufacturing of silicon it's fun and nerdy and I was into it for a long time but if you're considering leaving not because you're excited about the other side rather because you're nervous that this one's going away people still ship Cobalt web dev isn't going anywhere it's still growing year over year and we're still finding all the incredible things we can do with these tools so stop worrying keep shipping and make incredible things if you're building cool you will eventually find success because keep building keep doing cool stuff and if you're struggling figuring out how to set goals for yourself as a developer I'll pin a video in the corner right here all about that thank you as always peace




## Killer OSS LLM dominating leaderboards, why isn’t anyone talking about Qwen__ - 20250218
2025 has been a kind of wild year for open source models in particular 2024 ended with deep seek V3 I was really excited nobody else seemed to care but then at the beginning of 2025 they dropped R1 one of the first ever fully open- Source reasoning models and the result was chaos everything has changed so much since that dropped but there was another open- source model from China that dropped around the same time and it was largely missed that model is quen and it's silently killing it in a lot of places and I'm surprised it's not being talked about more even this tweet that I saw only got like 90 likes there's a lot of good that is worth talking about with quen it's more similar to something like llama than it is to something like R1 but that doesn't stop R1 from affecting how good quen can be there's a lot of wins we can take from quen and I want to go deep on as many as we can so we can all benefit from these new models as they continue to show up and obviously we'll be playing with it in T3 chat as well before we can get there though quick word from today's sponsor back in the day adding Financial to your app was basically impossible like getting a user to enter their Bank info terrifying no one did it but then a certain company came out pla they made it way easier that's really cool for your financial info but what about all your other info things in your Google Drive things in your notion things in your job board basically impossible to get a hold of so if you want to use AI with it good luck especially if you want to build an app that's why our sponsor raggy AI exists these guys make it so easy to connect basically any data source to your code if you're a developer trying to build AI apps there's a good chance these guys are going to make your life easier pretty much any place you're keeping data as an individual or a company they have an integration for and it's as simple as a curl request to their service and they will give you the ability to Traverse it it's stupid how easy it is to set up the example should say everything you need to see here you curl their endpoint pointing them at something it could be a file like a PDF or it could be a resource like Google drive or Confluence even it will then index all the data that it finds there and now you can retrieve it or let your AI tools do that retrieving it's so so easy to set up thank you to ragy for sponsoring check them out today at soy. link ragy Alibaba quen is on fire just look at the top results from the hugging face open llm leaderboard all top 10 models are quen derivatives that is an important detail that we need to make sure we understand the idea of these derivative models this is something I actually got a little bit of crap for with T3 chat even though I was pretty clear when I released the R1 model on grock what it was but we probably should take the time to diagram these out and better understand what the hell we're talking about when we say derivative models yeah Qui tldr on what an llm is it is a bunch of Weights a weight is a direction it points you towards something depending on certain characteristics so when you have a bunch of words the weights point you towards what the most likely next word is it's God damn it chat's roasting me for the wrong its yall can't help yourself Canya a model is a collection of these weights that allow you to hand it words and it predicts based on that tree of things what the most likely next one is by looking at the weights if you have a sentence that's like hello comma space there are different things that could come next it could be hello Tom could be hello Theo it could be hello person who should have subbed already looking at you why haven't you hit the button less than half I'll have it's not that hard you get the idea the one that will have the heaviest weight though is hello world because the number of examples most models have been trained on is really really high hello world probably exists more in that data than hello Mark or hello Bob or hello Jane and the weight is determined based on the words that you have what word is most likely to be next open weight means that those weights those prioritizations which like the data for this is insane like sometimes terabytes of data those weights are the model that determines what word is most likely to be next based on the words it already has it's much more complex than that but this mental model should help you understand for the most part how these llms work so let's have a theoretical let's say we train a model we'll call it Glenn and on Glenn we give it a bunch of hello worlds so Glenn's model has four hello worlds has one hello Jane The Waiting of Glenn is going to very strictly point you towards world the weight for hello world will be like four times higher than hello Jane So now Glen has these weights Glenn's an open source model so let's take them we have Glenn we know what its weights are but we want it to always say Jane So this process usually is referred to as fine tuning we're taking a model it has weights and we're trying to tune those weights in a different direction you usually do this cuz you want the model to do certain specific things but if you do this to an extreme and let's say that these hello Jane inputs these are coming from something else let's say we have a way bigger model we'll call this one I don't know Meep seek T1 Meep seek T1 is a really powerful model that can generate great responses but it's also a model that takes a lot of compute to run Glenn's a model that takes a lot less compute to run we can take prompts that we would normally give to Glenn like let's say we give hello to Meep seek and this will correctly output hello Jane now we can use that to effectively fine-tune the utter out of Glenn to do what's called distilling and if you do this aggressively enough you can take a lot of the behaviors and characteristics of this bigger fancier model and effectively Brute Force the model here to do the right thing this is the two ways to make a derivative of a model you can take a bunch of your own inputs and hand those to Glenn or whatever model to change its waiting or you can programmatically generate an utter shitload of them with a more expensive model to distill the knowledge of this model into a smaller more perform package so what does this look like well if we go to T3 chat here we have a couple models we can pick from we have a lot of models you can pick from if I pick deep seek R1 on open router which is a platform for hosting the model a lot of different places since deeps car 1's surprisingly hard to host this will automatically rotate between different provid to find the one that's the most likely to solve our problem so ask it the same question I just totally came up with an answer for myself descri difference between distilling and fine tuning and llm we're going to ask this to R1 on open router the full proper R1 and now I can open reasoning it's coming through it's not terribly slow for once normally my R1 deployments on open Rider aren't this fast it's nice to see it speeding up finally but if I take the same question and I go ask it to the Llama distilled version this one's hosted on grock it's a little bit faster this one's still going by the way and we can look at the difference in how these responded like they're not exactly the same but there's a lot of overlap purpose adapting a pre-trained LM to a specific task or domain a pre-trained model to perform well on a specific task or data set there's a lot of overlap between these responses because this one is llama which is an existing relatively efficient open source model that has been spammed with knowledge from R1 to the point where it can generate responses that look a lot like the ones that R1 generates but since llama's an easier to run model and more importantly with a provider like the one we use Gro that made custom chips to make it as fast as possible that combination of a easier to run model in chip built to run that model really well results in insane performance llama's pretty good at being distilled this way it seems like quen is possibly even better so we have the Llama distilled model it's distilled on the 70 Bill parameter version of llama we also have quen distilled which we just shipped it's distilled on the quen 32 billion instead we can give it the same question and it's even faster and it looks like the answer is pretty much identical to the other one still pretty cool that we have that and quen seems to handle distillation even on smaller parameter counts like um here like 32 Bill handles it totally fine and if I switch this over to just standard quen and we regenerate it with that we don't get the reasoning anymore but now we're getting something that looks very very different like the formatting of this post is different the order of things is different the the the content that we got here is fundamentally different because quen behaves very differently because weights are super different from a version of quen the same exact model but this one is distilled on R1 so its weights are different and as a result it behaves different and most importantly since R1 has this concept of reasoning where it plans before showing you the answer having all those outputs and giving them to quen to distill it makes quen effectively hallucinate that it can think which is so cool that you can take normal llm and make it a reasoning model by spamming it with examples of reasoning for long enough so why do we care what's going on with quen here why is it getting all these scores well the reason it's getting these crazy scores is quen is very easy to train on from other things and since it's an open model you can make your own distilled or fine-tuned version of quen and also release that open source for able to use however they want because it's a derivative of an already open- Source thing and that's why we're seeing such crazy numbers for the success of these open models and some of them are really efficient too if we look here this uh def Ferman one is really really crazy in terms of its CO2 which is like its carbon and overall like energy cost if we sort by the score you'll see 13 kg is one of the lowest numbers in here despite being one of the best scores these distilled models are stupid efficient it is sadly somewhat annoying to like play with all of these models because there isn't a a box running for them or a space to find for them in the future I'll go out of my way to make sure I have a way to actually show and play with them we can play with the ones that I just added which are quen distilled and 2.5 32 Bill both of these models are really really good for my experience they are weird though I caught quen getting into some silly Loops when I last tried solve Advent of code 2021 day six in Python and here we see it's flying and you'll see a lot of these weight NOS weight initial but eventually it'll break out say this seems correct or something like that and then break out of thinking and actually give an answer that is code that theoretically works and yes I know it's an R1 thing to Loop but I've from my playing around with the quen distilled version seen it looping and getting into those death spirals quite a bit more than I've seen it on other R1 distilled models or R1 itself but it also Burns through those Loops really really quickly it is super interesting to see I never would have guessed that Alibaba of all companies would have released an open model that is this flexible to be trained this way to be used in all sorts of different chaotic use cases it is genuinely fascinating I'll learn more about how this one's trained this is the winning model from that leaderboard by the way the quen 2 .5 72 billion base model was merged with itself to create a larger model after that the model was fine-tuned on a custom data set yeah fascinating but it works appears to run really really well even if its utilization of energy is absurd versus the second place winner it's a fine tune of another similar model on the data set orpo DPO mix it was trained as a generalist language model for a variety of text generation use cases including support of agentic capabilities role playing reasoning multi- turn conversations long context coherence and more this is on quen 2.0 I believe not even 2.5 should probably actually take a look at quen itself in the past three months since quen 2's release numerous developers have built new models on the quen 2 language model providing us with valuable feedback during this period we' focused on creating smarter and more knowledgeable language models today we're excited to introduce the latest editions of the quen family quen 2.5 dense easy to use decoder only language model it's available in all these different sizes in base instruction variants is pre-trained already on their large data set which is 18 trillion tokens significantly better at following instructions generating long text and understanding structured data more resilient to the diversity of system prompts which enhance roleplay implementation and condition setting for chat bots so if you're using this for something with a complex system prompt it's way better now and it seems like these base models are really catching on right now when the official deep seek R1 release happened they had a couple models r10 and R1 which were the main core reasoning models the ones everyone was freaking out about but the pieces down here got looked at a little less than they should have been to support the research Community we've open sourced deep seek r10 and R1 as well as six dense models distilled from R1 based on llama and quen deep seek R1 distilled quen 32 billion out performs 01 mini across various benchmarks achieving a new state-of-the-art result for dense models this is so cool that the r132 Bild the light blue in the middle of these is getting performance so close to 01 and often beating 01 mini despite not being a super heavy reasoning model as a dense model as they're calling it it can run hilariously quickly like I just showed in that demo we're talking like a th000 plus tokens per second versus is open ai's best hitting like 180 usually it's closer to like 70 we're talking a 10x plus performance win way less energy being used and responses that are very close and as they called out in the page here smaller models can be powerful too we demonstrate that the reasoning patterns of larger models can be distilled into smaller models resulting in better performance compared to the reasoning patterns discovered through RL on small models or El reinforcement learning the open source deeps car1 as well as API will benefit the research Community to still better better smaller models in the future weird to come out with a new groundbreaking model like R1 and say the real value here isn't how powerful and awesome our model is is that you can use it to generate answers to make other cheaper models better that's so cool they as I had mentioned before fine-tuned a bunch themselves before releasing it they could have waited for the community to do this part the community as we've seen absolutely would have done this part but they didn't have to because they went and beat us to it and now they have all these distilled model options that you can pick from that run phenomenally and let you get most of the benefit of something like R1 a reasoning model something way smaller and way easier to run and the results speak for themselves when you have something like quen that is built for that level of fine tuning and you have good data sources the result is really good scores and that's why we see all these random models that aren't being built by big companies they're being built by people who think this is a good logo and they're getting crazy leaderboard scores with open models trained on other open models with data they stole from open models and that's so cool this cyclic AI improving AIS with AI isn't quite what I expected I know the meme for a while has been AI is real when it can improve itself it can now it's not improving itself in the sense like R1 can't train a smarter model but R1 can train another smaller model to be almost as smart as R1 so as long as we keep investing in these groundbreaking really expensive train things like 03 or Claude 4 or whatever they're doing next GPT 5 what was Sam alman's tweet today open AI road map I almost made a whole dedicated video for this if you think that I just make a video whenever I have anything to talk about here's me avoiding one I could have easily done and gotten a lot of views on know that I'm just covering what I think is worth talking about anyways here is his road map for 4.5 and5 the reason I'm bring this up is one very interesting line well next ship 4.5 the model we called orian as our last non-chain of thought model they have concluded internally at open AI that the reasoning step where the model talks to itself before coming to a conclusion actually makes the results better enough that it's worth all their models doing that even if they're not models built from scratch to do reasoning like o1 does but if you take the data that those models generate and use that to bring up other models that are cheaper to a similar quality level then it makes a lot of sense that suddenly all of open ai's models are going to be reasoning and all going to be having Chain of Thought they're not going to be like that because they're just building them to have Chain of Thought they're doing that because they have really smart models with Chain of Thought and they're going to distill the knowledge into smaller models and it's weird to see effectively open AI playing catchup there they don't talk about these processes like we don't know if GPT 5 will be distilled by 03 or not they're not going to don't even know if they'll say those types of things hard to know for sure but it does Kickstart some very exciting developments in the space and it seems like llama and in particular quen as well as even deep seek all caught on to this hell of a lot earlier and now we're getting to the point where we have models that are as cheap as 40 mini that are performing as well as 03 and that's crazy whenever a new barrier is broken for quality in the AI space and now only takes a few months for the cheap options and the fast options to catch up and it's these techniques and it's these models it's things like quen that make all of that possible and while I don't expect quen to be the people click I don't suspect there's going to be a lot of people clicking quen 2.5 on the bottom here I absolutely see a future where they click R1 distilled and don't even know what quen is hell I even see a future where they don't click anything at all they're just running a distilled model that was predetermined by some other AI to be the right model for the prompt that they sent in so I think quen is underrated but I also think it's going to stay that way because it feels more and more like quen is going to be an implementation detail not an actual model people reach for and I think that's an exciting future one where all of these Cool Tools and Technologies get to keep improving in the open and we have these core pieces like quen that we can build on top of to take these big wins and spread them across the world one more piece I wanted to call out it's important to pay attention to licensing when you're using these open models just cuz they're open weight does not mean they're traditionally open source deep seeks been really aggressive with the MIT license which is is a super open permissive license let you do basically whatever you want to the thing you just cannot sue them for things you do with it quen is licensed under Apache which is interesting because Apache is an even more do what you want license big difference between these two Apache does protect patent stuff MIT doesn't give a Pache requires you to properly attribute them MIT doesn't give a and aache is more complex due to the patent stuff yeah that all makes sense MIT is a very short single page Apache it's bit more comp but protects them a little bit more still very very open license but then we have the Llama 3.1 and 3.3 licenses these are a little different big difference here is you have to prominently display built with llama on anything that you use llama for oh yeah here's the fun one if you're using it for something greater than 700 million monthly active users you have to request a license from Facebook so if your app gets popular enough you have to pay Facebook for llama if you're a small hacker working on the side you can use llama for whatever you want but the moment you hit 700 million users you are required to hit them up and pay some crazy egregious licensing fee that's a huge important distinction to know so as great as it is that we have open models in the US and in China if you're building a business right now I think quen is a safer bet obviously 700 million monthly users is a lot of people but you should be considerate of these things as you make these decisions licenses that cap at a certain level of popularity are not truly open licenses these are not what I would consider open source licenses because there are limitations to how open they are depending on characteristics of you as the person using them mol also has similarly weird things in their license that are worth considering it's weird but the most open sourcy open models right now are the ones out of China because they are licensed in much more permissive ways just a thing I thought was worth calling out and it's another one of those reasons I think quen is underrated a is a much better license than whatever the meta is doing over here so let me know what you guys think am I OV exaggerating is quen not worth looking at or is this actually kind of cool in helping you make a better model for where II is going in the future and until next time peace nards




## Killing ReactJS - A Guide For Hopeful Frameworks - 20230220
react is great I can't wait for it to die let's talk about it react is a framework that entirely changed how we think about the web we went from a web where most of the time we thought of HTML CSS and JS is unrelated separate concerns and if you wanted your page to update after it loaded shrug find some jQuery I guess the main revolutions react brought with it were the ideas of obviously JavaScript owning and changing everything on the page there were Frameworks that had done this before but none anywhere near as heavily as react did especially once jsx was added more importantly though react popularized the idea of components breaking up your UI into isolated reusable pieces that manage their markup their state and even their Styles and other behaviors themselves in an isolated way where it can be reused across your application this pattern made life so much easier for developers that were used to having to think about every single piece of the UI every time they made any change because each button was bound our arbitrarily to another thing in the JavaScript and if the relationship between that button in that JavaScript was it very carefully managed everything would just fall apart components made it easy to manage those relationships and it made the bugs that result in those breaking much less likely and also easier to find react is continued iterating improving adding things like hooks adding things like context SSR server components and all of these new behaviors and functionality but we've also learned a lot from react in Frameworks outside of it we now have Frameworks like solid.js like svelte like View and so many others that I'm sure I'm forgetting right now quick obviously and all of these Frameworks are taking the lessons that we learned from react about reusability and composability and are applying it without the pieces that made react slow and painful react is still a great solution for a lot of developers and a lot of problems and if we're looking to kill react like dead dead like Ember dead I don't think that can happen react is too important and too successful to ever truly die and if you learn react right now you'll be able to find jobs using react for at least 20 years I don't see that changing but if we Define reacts death similar to php's death or jquery's death where it hits a peak of its adoption and it no longer is increasing it's maintaining or maybe maybe slowly declining maybe we can kill react but I want to be very clear in setting expectations that react will not go away when it dies react will just stop being exciting when it dies all of that said there are now paths starting to appear the first thing you have to kill is the new project right now way too many new projects are starting using react and if you want to win your first goal is to make sure no projects ever again are being started in react so you have to make something compelling enough to get users who are knitting their first project especially new developers who are getting started you need to convince or maybe even trick them into using something else when they get started once you have won the start of the curve now you have to win everybody else this is the market generally speaking when it comes to something especially in the tech world you can break down parts of the market and people in their decision making into these different categories we have the innovators who to be Frank are the people who are hanging out here watching this on a Wednesday afternoon or whenever this video ends up going live talking about the Deep nerdy details about these Frameworks for every one of us every one person who's excited and ready to adopt solid there are five people who haven't even heard of solid and if we want to win we have to win here first but then we come up against the next hard challenge which is bridging this Gap how do we build something that wins over the enthusiasts and the people who are down to try something new and gets them to stop using react for new projects and always in it with something else how do we get over this Gap from there I think the key here is a deep understanding of react developers and their pain points you have to understand the people here in this pragmatic section and what problems they have every day and you need to give the people on the other side of the chasm the tools the marketing the features and the story to tell to the people in the pragmatist category why they need to move over and you don't convince them by showing them lots of cool features you convince them by showing them how they can solve the problems they have right now so you have to identify the pain points that exist in these different categories and then give the tools to the people in the categories you've already won to pull those people over and to bridge this Gap what that could look like is something like some work that I saw Ryan was doing recently in making it so you can mount solid components inside of your react app the benefit there is if you have an existing react app and you have specific components or features within it that are really slow because it's hard to write performant react code when you have things updating a lot and you have the ability to say okay from here down all of the elements on this page are going to be using solid instead of reactor all the elements for this chat are going to be updated through solid instead of react that allows developers to start adopting solid that may not have been able to before that might be in these categories that might not have adopted solid if they had to start from scratch with it but if you give these people who might be working with these people the tools to adopt solid and the solutions to the problems they have that lead to them wanting to adopt solid that's the magic combination you need a problem you solve that react doesn't and you need a way to integrate solutions that get The Visionaries excited to tell everybody else about it if you can find that combo that magic pairing of a solution to a problem and enthusiasts who will talk all about it that's when you win and that's how next one and here's where we go into the final tangent of this rant is react already dead we've all seen the meme of the developer who said should I learn reactor next or I'm moving my react project over to nxjs and as much of a meme as it is there's some important truth to it next in a lot of ways did Kill react is the thing that react was five years ago next is the framework the developers now reach for when they want to start a new project it feels like the Merin stack again where it's just the thing you grab that is so powerful and we've already seen next bridge this Gap both by being so compatible and usable within the react ecosystem by proving to those people that the problems they have can be solved by next we ended up seeing massive adoption if a react developer had a website with bad SEO use next if you have a website that's using react and it has really slow build times use next if you're struggling to add back end or maintain the back end in his relationship with your front end use next if you want to add SSR to your react page so each page comes down with the HTML correct use next by solving these specific problems react developers were having in a way that helps them and their businesses be more successful next was able to Dethrone react in excitement and when you look at charts of satisfaction of Frameworks and solutions you'll see that next is much more exciting to developers right now than react next is well positioned if they theoretically wanted to to ditch react in favor of something else I think that's incredibly unlikely but I think it shows the strength of their approach by building into and around react specifically by building into and around the problems react developers had next was able to build a very strong wedge in the market and is one of the few things positioned to meaningfully challenge react which makes it all the funnier that they're so close now but the point still stands the addressal of problems react developers have is how you get react developers to move to your thing and if you can convince enough react developers that your solution solves their problem you will actually be able to kill react it's going to be a hard hard battle but I hope the tips here help the future framework builders make the future of technology solve the problems that the current developers have if you can make my experience with writing web apps better and you can solve the problems I have with react you'll convert me and you'll convert a lot of other people alongside me hope this was helpful let me know if you want to kill react and what you're working on to make that happen appreciate each and every one of you as always YouTube seems to think you're gonna like the video in the corner here it's a pretty good one they wouldn't show it here otherwise I haven't watched it in a bit but it's pretty good thank you as always peace notes




## LLRT Amazon's JavaScript Runtime (Sorry Bun...) - 20240210
the JavaScript runtime Wars keep getting more interesting from node to Doo to bun to Hermes to static Hermes there's more happening almost every day it do of today another company has entered the arena and it is not a competitor I would have expected AWS has announced their new JavaScript runtime which not a thing I expected to say especially since they've been so involved with static hermus but there are good reasons for it it is 10 times faster in specific scenarios how well let's take a look LRT is the low latency run time which is an experimental JavaScript runtime built to address the growing demand for fast and efficient serverless applications this is where things get really interesting this is a runtime built specifically to make serverless as good of an experience as possible and when you're running the serverless you'll see the difference because it can be up to 10 times faster for startup and two times faster overall compared to other JavaScript run times specifically node but what is a cold start and what is serverless well I think to appreciate this you need to understand what a cold start is it's one of the biggest reasons serverless isn't ideal for a lot of scenarios when you make a request on a serverless service a server is running it's just not a server you've provisioned when a request is made Amazon finds a box somewhere in their service that is close to where your necessary data is like your JavaScript that has to run it spins up that box it loads node it loads all of your JavaScript it spins up your JavaScript and then it can process the request and send their response this can take a long time depending on how much JavaScript you're actually sending and node itself is pretty big coming in at over 28 megabytes that much data being a necessary blocker for every request that is made sucks thankfully it's not every request because once that's started the server will sit there for a little bit waiting to see if more requests come in that's what's called a warm start because the box is already warmed up but cold starts are going to be the worst times you see and even on services like Ping which is the video call app I built we see cold starts from 2 to 3 seconds long that's just the amount of time it takes before you can start doing any work and you can see those same numbers here here when you look at the speeds they were seeing on node 20 on Lambda we see 1,457 milliseconds for the p 0 so that's the best case the worst case is 1,678 milliseconds that's 1.7 seconds before you could start responding and that sucks I'm not going to sit here and pretend it doesn't but there's been a lot of work being put in to prevent this from being as hard of a block as it historically has been instead of 1.5 seconds of blocking time with the cold starts that we were seeing with node it's a lot closer to .05 seconds yes that is a much more than 10x difference 50 milliseconds versus 1500 milliseconds for the P0 is absurd and even in the worst case cold start here we're still not even seeing 100 millisecs that's nuts so how are they doing it well there's an important piece that is detailed here obviously there's rust which is cool nice to see more people building JavaScript D Tools in Rust it's become kind of a common thing now but the JavaScript engine they're using internally is quickjs both node and doo rely on V8 which is the same JavaScript engine that you run in Chrome whereas bun relies on JSC the JavaScript core which is part of safari and the Apple ecosystem LRT being built on quickjs is very interesting cuz I haven't seen many building around it for a long time quickjs is a C++ based JavaScript runtime here are some benchmarks that they posted a few years ago highlighting just how fast it can be but also highlighting how V8 is much faster once you have longer things running I actually got comment from Jared the creator of bun on this his take is that this is a lowtech worker D worker D is the cloud flare Edge runtime so he thinks this is meant to compete with that to give you less of a reason to use Edge honestly I think this is a great take because the only reason I've personally bothered with Cloud flare and Edge stuff has had nothing to do with Edge location it's been a combination of cost and how much better the cold starts are when you have these more minimal engines Jared also specifically calls out that this wouldn't be competitive with bunner node for anything that takes longer than 5 milliseconds of CPU time I want to be clear that this is the case for things that don't have cold starts because that 10x plus difference is a big deal if that's blocking your application but if you have a server that's running for a long time the benefits here aren't as big and you'll see that in the numbers here which is their Benchmark that they published where you see V8 just slaughtering 2 Xing the score of quickjs it's still way better than duct tape excess Mew and all these other Alternatives that existed at the time but even hermis is quite a bit faster the big win though is in this top row specifically the executable size for quickjs is less than a megabyte more interesting piece the AWS SDK is actually baked into the low latency runtime this is interesting because the AWS SDK is one of the most heavy parts of our lambdas when we run things for upload thing which if you haven't checked it out best way to do file uploads for nextjs applications we had to include the AWS SDK on our side and it is heavy it immediately introduces like a half second latency penalty just to load it so having this baked into the runtime makes it way way faster to start up and have access it really is showing why this is being made because it helps with the AWS and specifically AWS Services plus Lambda use case versus V8 which is 28 Megs that is pretty significant difference and by itself significantly lowers your costs in the speed at which you can spin up an instance that's running JavaScript and if you're just passing fetch calls back and forth and returning a response from a database or running some really quick things quickjs is actually a really sensical solution and when you think about all the different things people reach for workers for right now I can see why this is an interesting project that said I really don't want to oversell it because it's an experimental package and it's very experimental this is an early attempt at Amazon building something to make cold STS with JavaScript better on Lambda and they're probably the best company to be doing this it's also important to know that most of this project is one person when I checked out the contributors it's almost entirely Richard Davidson working on this project he's been working on it for a few months now but this is still an early experiment Amazon is doing on the side on their AWS Labs GitHub account to see how important and how valuable a faster runtime can be so yeah I'm excited what about you do you see yourself playing with this new runtime or is this just some initial JavaScript craft you don't care about let me know in the comments see you guys next time peace NS




## LONG LIVE SQL - 20230416
Theo sequels from the 80s why are you still using it now there's all these awesome new solutions that are so much faster and better and ready for your JavaScript code bases why do you still use SQL well uh let's talk about it if you were familiar SQL wasn't from the 80s it's actually from the 70s the language originally was designed in 1974. postgres started in the early to mid 80s but it didn't become postgres sequel until 96. 95 was when they first introduced SQL to it MySQL started in the same year of 95. these Solutions have now been around for almost 30 years you'd think something would have come around that's better right well kind of we've seen everything from to dynamode as well as new proprietary things like fauna and zata all trying to rethink how data should be stored in the harsh reality is SQL is still the best standard it's not going anywhere why is that what are the problems with all these other things well to put it frankly none of these other things have followed a standard they've mostly been focused on gimmicky features and fancy editions like adding graphql on top of SQL some bad news news for you graphql wasn't meant to replace SQL graphql was meant to be a query language for your front end to get data from your back end such that you can make one schema and everybody could fulfill it on every side that's nothing like SQL sequels for querying structured data from a relational database it's still really good for that as long as you need a relational database the harsh reality is most of us need relational databases SQL is a phenomenal Syntax for querying databases updating databases and accessing and changing data within them and relations make it much easier to change the shape of our database over time if you know day one what your database is going to look like you're confident it's almost never going to change and you need it to scale to billions of rows maybe take a look at some of these new Solutions like Dynamo but for the average user in the vast vast majority of applications the flexibility a relational data model gives you is more than worth it it's almost essential for productive development this has come at costs though the SQL standard was built in an era where everybody kind of just ran the server is like if I need to get data or serve a website back in the day I'd have a server or an old laptop in my garage plugged into ethernet running Linux on it that I would SSH into make some quick changes to a config file and now access expose or do whatever I need to to that database but there was a machine running 24 7 with a connection to the database fetching data from it so the the speed of connection can be made and the number of connections you can make didn't matter a whole lot nowadays not only does it kind of matter it matters a lot because we're not running servers 24 7 we spin up a server on every request when we use things like Edge and Lambda which means we have to make a new connection every time someone asks for data a lot of these new Solutions like offered better connection methods to be frank offer way better performance in serverless environments and that's a big part of what people are talking about when they say things like web scale it seemed for a bit like SQL wasn't going to be able to keep up and I I had my concerns too I was leaning into the direction for a little bit during college the combination of new tools like bouncers HTTP forwarders and the crazy stuff Planet skills doing with database.js have more than resolved these performance issues on top of that the Innovation around the storage layer through things like the tests or cockroach have allowed for the actual data layer to scale to absurd sizes MySQL is still the database that all of YouTube runs on it's what all of uber runs on all of GitHub all of these platforms and they use things like the tests underneath MySQL to actually scale that storage to whatever levels they need to if it was still difficult to get performance at scale from SQL then it would be worth foregoing the standard and moving to something new and honestly I do really like the idea of an external provider managing my database for me I don't want to think about these things anymore I don't want to have to spin up a new instance and migrate my RDS cluster when I hit a new capacity limit I just want to read and write to my database and sequel crazy enough is still the best way to do that it has been a phenomenal experience I am surprised how many people work hard to make SQL the best option at all times on the rare occasions somebody pushes something that really does make developers lives better the SQL world gets it not too long after and in the end I always find myself reaching for whatever SQL database is the easiest to set up and scale to my use case and there will always be wonderful tools everything from Prisma to drizzle to keasly to all sorts of great things and the other ecosystems I know active record in rails for example SQL is a standard gives us so much power and I think we're a little too excited to leave it and if that worked we would have long ago this is not the first time SQL has died and it certainly won't be the last but in the end I'll still be using SQL for most of my databases hope this was a helpful one I have a video here about how to pick a database from all the different options that exist so if you want to learn more about how I think about this stuff check that video out that was a good one




## Laid off engineers replaced with AI___ - 20241103
there's been a lot of clickbaity news about how Engineers are being replaced with AI and most of it is just that it's clickbait it's not real most companies are still having most of their code written by real Engineers writing it in their keyboards and seeing it in their screens and reviewing it in their code bases and their things like GitHub but not everyone and we're starting to see a real shift here and today we're not just talking about some random small company writing more code with AI talking about a big one not a little bit of their code either a large amount as high as a fourth I didn't think this was real when I first saw it but the the more I look in it does seem true more than a fourth of Google's code is written with AI and that's terrifying for a lot of reasons all of which we'll get into right after a word from today's sponsor Cod Crafters if you're scared of being replaced with AI it's important to level up and I don't mean going from not knowing how to code to knowing how to code I mean becoming a 10x engineer not like the meme sense but you know what I'm talking about the type of person who could build redit but how could you build redus you're just a random Dev how could I build redus I'm not smart enough for that thankfully Cod Crafters is here to help they're not doing the usual courses they're actually having you build real things like things you already use they have a 55 stage course on how to build redus from scratch they have an 11 stage one for building your own HTTP server they have one for building your own git this is a super valuable set of courses not because everyone should be writing their own redus but because understanding the ins and outs of how these things work is really important the first two chapters are free but if you want to get the whole Suite you can use my discount code for 40% off just use the link in the description soy dev. link codf and thank you again to Cod crafters for sponsoring today's video Let's dive in AI is hugely important to Google's products and it sounds like the company relies on it internally too this is not the first place I heard this I actually earlier today was recording a video about a fork of flutter the reason this Fork is happening is directly credited to Google's focus on AI hilariously enough a huge portion of it is because the flutter teams not prioritizing desktop platforms because those don't help move Google's goal of shipping more AI stuff as a result flutter is not moving fast enough on platforms that aren't the core platforms if at all and that's cuz Google's all in on AI right now and this is going to have a lot of impact all over the place let's see what the Verge has to say Google is building a bunch of AI products and it's using AI quite a bit as part of building those prods products too this is a direct quote from Sundar the CEO more than a quarter of all new code at Google is generated by Ai and it's then reviewed and accepted by Engineers he said this on their earnings call which is kind of nuts there are any more good insights here the AI space comes up 33 times and AI periods twice so AI is mentioned in here at least 35 times which considering how small this page is that's kind of hilarious they're all in Allin our commitment to innovation as well as our long-term focus in investment in AI oh I missed AI comma there might be even more I guess space AI might be better commas in there three times there's almost 40 instances of AI on this page for their earnings call that's kind of hilarious especially considering the fact that like no one is building things on top of their AI it's very amusing I don't know anyone who's meaningfully invested in building tools and products using Google's AI stuff I like and this might be a Hut take I might get some for this I actually like the AI search thing when you search something on Google and the first result is AI based on a few sources that's kind of nice other than that yeah I haven't had any of their AI products useful to me at all rip Bard RP Gemini we'll see what happens people are saying sundar's name is Sundar P Kai which is AI at the end so I put the space in front this time and it still comes up 33 times so you're wrong AI occurs on this page almost 40 times anyways we are uniquely positioned to lead in the era of AI because of our differentiated full stack approach to AI Innovation and we're now seeing this operate at scale it has three components first a robust AI infrastructure that includes data centers chips and a global fiber Network second worldclass research teams who are advancing our work with deep technical AI research and who are also building the models that power our efforts and third a broad Global reach through product and platforms that touch billions of people and customers around the world creating a virtuous cycle I can't read this PR mess I AI is helping Google make money as well they reported 88.3 billion in revenue for the quarter with Google services which includes search revenue of 76.5 billion up 133% year-over-year as well as Google Cloud up to 11.4 billion which is up 35% year-over-year do you see how small a percentage of Google's revenue comes from cloud like when you compare this to Amazon where a significant portion of their revenue is coming from AWS it's less than an eighth actually it's right about an eighth of their total revenue which is kind of hilarious especially when you consider how Google cloud is that's a separate problem for another day when I talk about how Google cloud is nobody cares I've noticed that I've seen the numbers it's such a meme that nobody even cares when you make fun of it so Google services is 30.9 billion of operating income Google cloud is only 1.95 bill at least it's better than the 270 mil how insane is it that Google Cloud last year only profited 27 million that is hilarious oh man I didn't know it was that low that is that is amusing the results indicate that while many people feel Google isn't as reliable as it once was the company continues to operate a very strong business AI is a huge Focus across Google with the release of features like custom AI chat Bots powered by Gemini as well as automatic AI notetaking stuff in Google meet and a bunch of generative AI tools to help YouTube creators I hey it's me the YouTube creator all the AI tools that gave me sock so hard let's check out the inspiration tab for me let's do it as a developer that has a popular YouTube channel about software Dev stuff let's see what I should be inspired by Linus Tech tips DS module 3 what the is DS module 3 and why should it be a short or JS coding practice 3 what the increasing triplet subsequence what people are looking for more WordPress drama and also WordPress speed optimization are you joking let's show all I want to see all of these I already did that this keyword JavaScript when to learn react Twitter algorithm explained best OS for web development react game development next for react devs two of those are almost goodidea ideas God all the short ones are so embarrassing what the is wayos is that even a thing it's an open source Chrome OS cool in Vela 3 GT The Source this is just it's nonsense it's useless every time like like it's funny YouTube has some of the best analytics in the world the amount I can learn about my content and how it's being consumed about my audience and how they engage all of these things are super useful I have learned so much about about what works and doesn't work on my channel through this data but then they try to pretend they can tell me what will work and what they want is for me to become lus Tech tips literally all of the reference videos for the first six are LT then asmin gold reacting to the Google search falling apart video that Mr who's the boss did then LT again finally an actual Dev thing fire shift but it took nine videos for them to realize I'm a Dev and they forget immediately afterwards the this is useless and not because I have beat with LTT I love those guys I'm a huge LTT simp and Defender Luke's a good friend love what they're doing over there but the fact that YouTube thinks they are who I should be looking to for inspiration for topics shows just how bad their AI is the AI assistance panel lets you chat with Gemini directly in Dev tools that sounds awful Google Google Google the fact that I just downloaded three gigs of almost so it can run the local model instead of having to hit a server it's it's such a cool concept the idea of an SDK that exists in the browser is cool but this sucks and now I'm just getting this error even though I did everything right all that for nothing thanks Google yeah the thing I wanted to Showcase is just how cringe Gemini is and how like bad it is at basic con sessionals ai. create text session will it still work nope what the how am I supposed to use it now did they just silently deprecate it okay whatever I I'm not going to figure out how to Showcase this it's annoying shout out to my editor for turning this into a watchable thing here is a moment from an old video that I did covering this being built in and to Showcase just how bad Gemini Nano is I asked the question who is he this is the first thing I asked I just opened the chat and said that there is no additional context there's nothing but since Gemini Nano is such a mess it hallucinated that I had given them a picture that was of Albert Einstein it's hilarious it's so bad I have not gotten good responses out of Gemini ever and now that I've shown how bad the recommendations are on YouTube as well hopefully you guys see I have no faith in Google's models right now although they seem to have a lot of faith that was a photo of Albert Einstein for some reason anyways back to the article the results as in the revenue changes indicate that well many people feel Google isn't as viable as it once was the company continues to operate a very strong business AI is a huge Focus across Google with the releases of features like custom AI chat Bots powered by Gemini called gems automatic AI note taking and Google meet and a bunch of generative AI tools to help YouTube creators yeah this is the thing I just showed and how bad they are none of these seem good I don't know anyone who's using AI Bots created and powered by Gemini sounds like a disaster the automatic not taking in meetings is stupid and annoying and the new pixel 9's had a bunch of AI features cool there is one part there that's cool which which is that Google's actually putting work in to make better chips for mobile because Qualcomm sucks ass and anybody fighting qualcom is probably a company that I can defend a little bit and if Google's going to take the AI hype as a method and a justification to invest in dethroning the that is qualcomm's Monopoly I'm cool with that but that's not what's going on here there a lot more subtlety to this sadly in search our new AI features are expanding what people can search for and how they search for it in Cloud our AI Solutions are helping Drive deeper product adoption with existing customers as well as attract new customers and win larger deals in YouTube's total ads and subscriptions Revenue surpassed $50 billion over the past four quarters for the first time you're welcome but how nuts is it so wait total revenue for Google 88.3 billion oh that's for the quarter okay so 50 bill over the past four quarters I was going to say is is YouTube over half of Google's revenue no but YouTube is 15% of Google's revenue that's kind of nuts yeah YouTube makes more than Google cloud and not by a little bit Cloud's making 1.95 bill every quarter Google cloud makes about a tenth as much money total as YouTube and I'm sure its profit margins are significantly worse that's hilarious that is actually really funny anyways oh this is a fun call it this is a video I already covered Google's facing a potentially tough road ahead however following the August rule that the company is a monopolist in the search and advertising markets that case which was brought by the US Department of Justice is now in its remedies phase and while there's still a ways to go for the dust settle a Google breakup is on the table oh never mind I didn't cover this one yet I did Cover the App Store breakup that is happening on my second Channel check that out at Theo Rance on YouTube Google's in an interesting spot their models are not the best their Engineers are not the best their products are not the best they are the default they are the entry point for all of the web and they have a good position they're just kind of I like of the big corpse right now between apple Microsoft Amazon and Google I personally think Google's in the worst position but they all have their ups and downs most of them have realized that building their own models is stupid and they should collaborate with others who are doing it Google refuses they're too busy getting sued for 10 toillion dollars from Russia or whatever it is what it is what do you guys think though is this why all of Google's products are getting worse or is this just an interesting stat with no meaning behind it let me know until next time peace nerds




## Learning Web Dev To Save Lives - 20220607
jason's a freak of nature he is very good at learning things fast the difference between a good coder and a great coder is knowing where to copy paste from somebody had told me that um typescript was for angular my mindset has always been very problem focused and how do we solve said problem yay doesn't seem like anything crashed how you doing jason good to have you here i'm doing good i'm doing good how are you really good fantastic to have you for those that don't know jason's uh is it fair to say old friend at this point it's been what like bit over half a year almost a year actually oh my god why why does time have to fly like that that sucks yeah it's going fast but also we're making a ton of progress on both our sides and i'm so excited to talk all about that for those who don't know jason he is the creator of an awesome charity you are rad i i'm sure we'll talk all about that in a bit the reason i know jason is he was trying to build tech for the charity specifically building a website that was better than the squarespace stuff they were dealing with found himself learning all the tech that we talk about all the time everything from tailwind to next js to obviously react and vercell and after asking some friends like for help and thoughts on the stuff he was doing he was introduced to me and we immediately hit it off chatted a bunch about the tech jacob who's in chat here we actually rewrote their open source repo and typescript over a weekend for fun and since then i've just been so impressed specifically with how jason learns and how he applies the things that he learns and i wanted to bring him on the show to talk about that because i think that we all could learn a whole bunch about learning from jason so yeah great to meet you great to have you on man yeah no that's it's my pleasure and yeah i i think um i got uh recommended to reach out to you after people got tired of me pinging them with questions that they couldn't answer anymore went from asking the basics to like can you put a header inside of a section element does this work like this do i need express with next js to much more complex api interactions and yeah just go bother someone else with these questions yeah i i wouldn't say it was a bother i'd say it's one of like the most the most enjoyable i don't want to even call it mentorship because it's been very like bi-directional but it's the most fun i have had watching somebody as they learn for sure i was just fascinated with the way that you applied your self and your philosophy around knowledge and information diving in so i'd love to hear a bit more about like first off rad but then specifically what about rad brought you to technology and building web stuff sure sure yeah with um so so rad i guess the best way i've found to describe rad is that rad is a universal mental health care system it is a non-profit that helps people all over the world access and afford mental health care what that looks like at scale is we've helped about 40 000 people um and we've done this about across about 135 countries now so yeah finding therapists paying for said therapist it is a day in day out thing and it is just something that i absolutely love um i never really expected it to get to this point um you know i think initially um unfortunately the the thought process behind all of this was um i didn't want to be here anymore and i figured that to justify no longer being here anymore um i needed to maybe help somebody who um was also thinking of taking their life and you know if i could if i could stop them from going through with that somehow that would balance things out and at the time i hadn't left home in years didn't think i could leave home had some really crippling anxiety issues that stopped me from leaving home and the only real way i had to interact with the outside world was world of warcraft so i started trying to reach out to people in world of warcraft and convince them not to take their life and it's just kind of snowballed from from there to me it very much now that i look back makes sense that that um i'm where i am now it um my mindset has always been very problem focused and how do we solve sad problem and not very idea let's see if this idea actually applies to anything kind of mindset you know there there was a time where finding therapists for people became much more complex than just google searching local therapists in someone's area and so solving the problem of how to find somebody the right therapist or even what is the right therapist was the focus then over time it was okay i could find people great therapists but if they can't afford therapy well then it doesn't really matter if i find them a good therapist or a great therapist how do we help people afford therapy initially i was just boosting people in world of warcraft and league of legends to pay for people's therapy but you know that that changed over time [Music] and at some point i reached the problem of websites are ridiculously expensive people continuously have issues accessing our website how do we have a better website so that more people can get helped and yeah i think after getting a quote from an agency that did a lot of non-profit websites nonprofits that i really respected a quote of like a quarter of a million dollars and this would from what i could tell probably have been some kind of wordpress site i was just like this isn't no i'm just i'm gonna take some time and if i can save us 250 000 in just worked hours it's worth it um and i just hit the ground running with that that is the motivation unreal i want to emphasize for like everyone in the audience how much this is like the the philosophy i preach the best way to get good at something and to do the right thing is to start with the problem and in every part of the journey that jason described here there was a problem and he found a way to solve it whatever it took as for from how do i keep myself going to how do we get people therapy who can't afford it to how do we do this with money we don't have how do we get how do we solve the problem of the website being awful and people having problems with it without this resource of cr incredible cash that we could be spending on therapy instead and i think that really shows with how you've taken to the things you've taken to and how much success you found in them oh well thank you i um i i think the you know the the part of me that is prone to doing that is is kind of still a mystery or like why i tend to approach things that way but i can't really imagine looking at businesses in any other way um it should very much be very like solution focused um adding features what is needed you know to me it's it's all a response to feedback it's all you know from constantly asking the question of what the problem is and coming up with the solution um i think that's just the only way things should work but again i don't really know because i'm just learning all of this as i go um there's a lot of people who are just in for the the joy of tinkering and playing with things and learning and what's fun with you is i see that too like the way you jump on svelte and play with all that or like the crazy typography playgrounds those aren't necessarily solving an immediate problem you have but they're still interesting and fun and ways to grow a lot of people have that but not the problem solving like attention and focus you have a really unique blend of both hmm i i think it it actually comes from gaming in some ways um you know like the games that i play and like are like dark souls style games um games where you're constantly being punished and have to learn from being punished um coding feels very much the same oh man it's uh actually i think why i've fallen in love with typescript is um you know with just plain js there's like there's not that immediate feedback there's either the [ __ ] is completely broken and i don't know why but typescript is more that doesn't look right and you're like oh well oh well here's this hint let me rework this and figure this out and like i don't know somehow i just like bumping into walls over and over again until i find the door i think it's just like playing with the hut off it it really is um you know it but i i i guess i can look at um my journey of learning all of this stuff as something that's really important it is it's something that i've consistently tried to write down and document because i've noticed that i do this for a lot of things um and those those things that i i do this for it i tend to master you know within within days weeks months i think even now uh so much of what i've been focused on lately um has been um routers and routing systems um like really diving into node and in complex node use cases for fun i don't know what's wrong with me but um yeah like i i love it i absolutely love it um but i'm slowly but surely recreating all of like our donor system um the other week i recreated um a whole shop experience entirely with hooks and no third-party packages which was interesting i had no idea shopping cart feature was that complicated um and i learned about context so that that was a lot of fun but it's all yeah there's an npm package i remember that like was a really big deal got somebody a job and like it's now part of spot or shopify it's react use shopping cart it's like a package just for that because of how hard that specific problem is it yeah it can be um it definitely can be i've tried using um use shopping cart i've used it i've used a version of that um that uses crypto to secure a lot of the the uh logic behind it and then just going to a pure hooks focused approach um that that was a lot of fun but yeah it is um it's the same process for me every single time of starting with this very basic problem um and then learning how to actually understand and define that problem it's um like one of the ways that i've seen this put before is in psychotherapy we'll have someone that says um maybe they they want to lose weight for whatever reason uh maybe they want to gain weight for whatever reason they they come in and they usually have some kind of negative question uh that is posed to themselves why do i look this way why do i feel this way why am i overweight why am i underweight that question [Music] in theory is is solvable that that is a question that does have some kind of answer but it's not coming from a place that's looking for an answer it's coming from self-deprecation it's coming from just putting ourselves down and what we'll tend to do in therapy is try and reframe that to what would it look like to be healthier what would i need to do to be healthier what would i feel like what would i look like what tendencies would i have what actions would i take and as we reframe that we start to come down to actionable steps and i think that's exactly how i tend to approach this um it's not so much you know it might begin with like how do i build a website but it increasingly becomes what would it look like to have a modern website what would it look like to have an accessible website and then starting to break down okay so what does accessibility mean to me what does accessibility even mean i'm learning the standards of that what does a modern website look like starting with zero absolutely zero experience whatsoever of coding i didn't know what react was didn't know what next js was didn't know the relationship between these um i think i remember telling you but somebody had told me that typescript was for angular and that's just like don't use it otherwise it's unnecessary um but i didn't even know that typescript was a was javascript i didn't know what type safety was it was just know figure it out um so and really learn and define what all of this looked like to begin with i really like that framing of specifically like reframing the problem into something actionable that's something i it's one of those things i don't think about because i'm lucky that most of the problems i think about are ones that i've framed in that way myself but i don't think about this other side i i'm incredibly lucky i've never been comfortable describing a feeling i had as anxiety because i don't ever have like the paralyzing feeling of stress from a thing that i could be working on i just that is a thing i've personally never really had in a strong way and because of that a lot of the stuff you described here stuff i actually don't resonate with but i think that's why it's so important i need to adjust my approach because i'm so hard on like find a problem and then solve it i don't talk anywhere near enough about working on the problem before you work on the solution if that makes sense like how do you shape this problem in a way where you can then hammer at it rather than just going straight in yeah yeah it it's it is a a really tough thing for me at times too because i'll realize that i think i'm just looking for stuff to work on at times and that doesn't necessarily mean that there is anything or that even you know with the solution that i have that i really want to use applies to a particular problem there's this very famous therapist abraham maslow that used to say when all you have is a hammer every problem in your life tends to look like a nail and applying that um you know just definitely doesn't always work for us you know when i go through and try and figure out what it is that i'm working on it's usually something that is it's clear that this is a need like the the website there was really no way around it we needed a website people were telling me that it was not accessible that it was not usable so that that already begins to outline the work ahead and then figuring out how you even approach a problem like that you know this this was something that was all kinds of adventure um you know first i had to figure out how you even built websites it didn't take long to figure out that something html like building a myspace profile but um a little bit more in depth and you know i started looking into the best websites google makes this kind of approach very very easy what are the best websites best websites 2022 best designed 2022 and starting to see tons and tons of different websites getting an idea of how websites look how they function looking into how these are even getting measured why they're getting selected and you know i think as i was seeing a lot of these returns these google search returns i kept seeing jam stack i couldn't quite understand what jam stack was but every time i looked up these top websites speed reliability and future these kinds of terms consistently aligned with the jam stack i started reading into what a jam stack was and seeing the different pieces javascript something it's a javascript website didn't really understand what that was but then i started looking at top jam stack websites and then you start to see some of the more um relevant terms now well looking back now that i see they're much more relevant like react like um view vu however that's pronounced i'll never get any of the news projects pronounced right there we go um you know i started seeing ember i started seeing all all kinds of different um terms but it was consistently these things and then i discovered in all of this searching for best jam stack websites a list of people who were related to these i found lee rob i found dan abrams i think abram um abramoff he's actually the first interview on my youtube channel fun fact oh well i think i remember that actually that's um as i as i found them i then got introduced to github which i'd never never heard of before like that's something so foreign if you have no background in coding or experience with coding and i saw that these were websites their websites how they approached things i started searching github's trending and just following this pattern of what what people used to build a website and started to started to write down a lot of this data what did people use when they were prototyping showing off you know kind of here is a cool thing um versus what do they use when they are doing production level code when it's like i need something battle tested and those kept aligning to next js react i kept seeing those words and tailwind tailwind kept popping up as futuristic people were starting to move it into production some people were saying no no it's not ready for production um but consistently some of the heady heavy hitters were moving into using tailwind in production um and [Music] there was like i had a stack i knew i needed to use these tools i had some examples of what it looked like when these tools were combined and i pretty much took lee rob's website and just tried to break it over and over again i knew what it looked like when it worked if i broke it what would it look like to solve it um and over the course of about two months learned how to do all of that for our use case for our website's use case [Music] eventually also learning within that two months how to interact with stripe and other apis um mostly super bass yeah super bass stripe what else did we use back then purcell was you were pretty early on yourself yeah yeah versailles um vercell was like a default for sure um definitely in that stack um yeah eventually figured out framer motion i uh frameworks that's so much fun but that's i mean that was the approach is researching researching who who does what how they do this and copying that um yeah it was it was something else it was two months of just straight grinding there's so many incredible nuggets in there i one of the first things i want to point out is how much it feels like you were looking into how things were being used rather than documents about them like rather than like reading blog posts and reading the get started for everything in all their docs you were more looking at the way these things were being applied and i do you touched on with me before and it's like one of my favorite phrases that i use all the time now is applied wisdom it's not just about this knowledge and it existing in a box somewhere it's much more important to see how that knowledge is used and applied and you can get so much more from that especially in your use case of i don't know a thing about any of this a lot of this content isn't targeted at me because i don't know a thing about any of this so rather than reading a bunch of docs i should see how people are using this yeah i mean that's um applied wisdom is yeah it to me is not very helpful to read through a lot of the docs or to watch a lot of the videos um because there is something missing there for me there is like a common language that's being spoken in it i think about this anytime i try and teach um you have to have some sort of common language and everybody's different everybody starts at a different level so it was very important for me to not necessarily try and catch up to a certain common language or common knowledge base but to look at what the finish product looked like what it would look like to be fluent and then break all of that down and and learned it in that sense it was yeah i i like it to uh contextualize some of this it always threw me off um when i would go to a repo and it wouldn't say npm install x package if it said install and then dash save or dash dash save or dash dev i didn't understand what any of that meant and it was always really frustrating for me when i would see the that missing like how am i supposed to know how to install this or if there is any particular way to install this what what is the difference why are people using yarn what is yarn ads equivalent in npm um all of these things i just kind of had to figure out and so when you go into you know somebody's dev docs a lot of the times it's just assumed you know enough to even be there um so i just got out of the habit of doing that and into the habit of let's just figure it out by doing sorry i was taking my cat's collar off so he doesn't dox me with my phone number oh yeah he's very cute but uh keeps rotating i got there's so many interesting nuggets in there i like those are things that like i is a person who has been doing this for six years don't think about like i don't like like the difference between npm and yarn is that yarn's kind of old now and npm was bad and now is good like it was a difference that mattered a lot like a while back and does it now but you don't have any of that context or knowledge or a good way to figure out where to find that as a newcomer and the this is really interesting because i don't think about these things but also fascinating because i was already impressed with how much crap you had to work through to get as good as you did as fast as you did and now i am even more so because there's a whole different tier of things i didn't think about like dash save dev is for things that don't need to go in your main bundle i don't think about that it just is and that's something that like i write in readme's and don't say why and it's incredibly helpful something i pushed when i bring on new engineers is what i call the stupid question rule i require new hires to ask at least three stupid questions a day for their first few weeks and i try to get at least one a day for a while because everybody's scared to ask a question that sounds dumb force them to and once they get over it it helps them ask the questions they were scared to which is great but more valuable for me is i know the things i'm glossing over that they feel stupid because i glossed over them it's so helpful for me as a like manager and a person building up the team if people are scared to ask dumb questions i don't know what i'm making them feel dumb about i'm writing that down that's that's really good i like that yeah it it um it it is a nightmare i think to learn how to code um when you're so reliant on googling things and searching things um especially the way that like stack overflow has just dominated search engine you're consistently going to find attempts to answer your question on stack overflow which is absolutely riddled with solutions to jquery or jquery approaches to problems you're looking at heavy class-based components and [Music] yeah knowing the difference between that you know even the react documents the non-beta documents are really really bad and not relevant you know it it drove me crazy the first few months um you know of coding um you know until very recently should it be const something or should it be function something export default function export cons or or just const something and then export default that name like what's the difference why would i do this why am i seeing dot this why am i seeing this props why am i seeing um like all of that stuff really it's everywhere and interlaced with that you find solid updated answers um so much i think of learning the challenge of learning these days is although there is information everywhere it's being able to discern which knowledge is relevant which which information is actually good information versus bad outdated unnecessary and that that gets overwhelming very very quickly the amount of times that i've tried to copy something from stack overflow only to then later realize that was never going to work because nobody approaches it this way anymore that's not a thing people use anymore absolute nightmare um gosh that's that's uh yeah and then trying to learn some of the intricacies every time react gets updated you know we we still leave behind so many answers that are going to come up using suspense and transition all of these new react 18 features when people google stuff like that they're still going to find jquery approaches to things they're still going to find old ways of approaching react that aren't relevant anymore i actually had a build issue yesterday or the day before where all the results i could find were about a weird jquery plug-in from 2011. i couldn't find any other result for a builder i was having like a modern next project and i rage quit i just like nuked the project started again and it was fine but like i even run into those problems still but i don't think of them as like blockers because that's that's like my reality but when you're early especially when you don't have resources that can parse a weird question for you it's a lot harder like one of the first skills you have to develop as a developer is the ability to take the problem you have in your head or on your computer and pick the right words to put into google to get a result out of it and your ability to do that is directly correlated to how much you like programming and how fast you get good your google ability is essential as you get started and the only other way you can get that info and it's a skill you have to develop anyways is finding the right people who can do like the personal google for you when you don't know how to do that like translation yourself i still run into this especially with like weird design issues or like typography stuff that i don't understand or like weird like deployment mechanisms or sql stuff i don't know enough about it to even start the google search so i find a person who does help them unstupid by query so they can either help me find the solution or i can use that translation to go find it myself i think you're exceptionally good at this oh thank you thank you yeah just growing up in that early google era enough to have to very quickly learn stuff like that if you ever want to find stuff online there is there are optimal ways to find things and coding yeah coding that creates that a lot of trail um unnecessary trail that you have to learn how to sift through um it's unfortunate but i i think to um something i've always kept to heart was this um smaller youtuber harry wolf had this saying that um the difference between a good coder and a great coder is knowing where to copy paste from and that's that's something that uh yeah definitely definitely yeah i absolutely agree and i think you try and find the right way to to frame this part one of the things that like we touched on a bit before but was really interesting to me was how you learned tailwind you specifically learned tailwind by reading the source code for the tailwind website like that was where you started it wasn't even the docs it was right-click inspect and seeing how they did it and i think that that blew my mind to the first time you said it and a whole bunch of things clicked from there and i think this is kind of the same thing like if you don't have access to the people you have the next best thing which is their output and if you use that you can put together the pieces to some extent yourself if you can't ask the question why would i use tailwind see how they used it and that'll bring you that answer it'll show you the application of that wisdom because obviously tailwind is useful to somebody that's why it exists same with even the stuff like we [ __ ] on here like flutter that has to be useful for something we're still hunting we'll find it someday but flutter theoretically has to be useful for something it's a matter of finding where that wisdom applies yeah yeah in it's um looking looking at tailwind and looking at how they utilize tailwind and why they utilize tailwind the way they did um [Music] i i've learned a lot about just the developer mindset in general um the the mindset of i don't know this works um and yes this works but i know people are gonna look at it so let's actually clean this up a little bit and make it look just a bit nicer these are all things that i really got to learn about tailwind very quickly how they they fixed css issues common issues with css how they presented the fixes to those and and how they initially did those fixes um yeah i loved going through tailwind's website and seeing where they actually used tailwind versus where they still kind of did hardcore css when they used modules uh css modules versus when they actually did everything utility wise you know how much they actually stuck to their their ethos of everything should be utility styled i i think that that taught me a lot on the application of wisdom as well yeah the that's really interesting it's something the docs will never tell you is when to not use the thing because they're all about how to use the thing and what you learned there and you found a really good way to do it is they're preaching this philosophy what are the bounds of it and you yeah that's i hadn't even thought of that point that's really cool it's actually one of the things i kind of like about the new react docs it feels like they're more willing than average to call out what react doesn't do and where you go to solve those problems instead and i think that's incredibly important for especially like beginner materials and documentation because when we write those we're writing them because we're excited about the thing we think it solves every problem and we'll take over the world but everything has bounds and for the sake of people learning it's so important to acknowledge them that said your work around here is incredible oh thank you thank you i i i think there's um another thing that like really dawns on me too is um just the way that everything is organized and structured is really tough to figure out because it it isn't uniform as much as it could be i think some of the early questions that i tended to have was when do i use a component or create a whole new component versus when do i just style this in css this section component i use consistently so should i create a custom component for section that takes children or should i just go into the css and at least with tailwind at apply these styles um how often we use that when and and like what exactly the weight of doing something like that is um all of these things it seems are kind of up in the air um i can see why in large repos everything becomes a component because you really you want to restrain um as much as you can or you want to to be very strict right in smaller areas what what then does that look like there's not as many examples of those smaller features um when you use like react node react elements all of these things seem like they're kind of scattered should the utilities folder include hooks or should it be different should you have a separate file for types and a separate file for styles and then you know kind of piece everything together in an index and export that all of this stuff is very very hard to find and see done consistently and i find that even when i'm looking at particular developers throughout their personal repositories that consistency isn't there as well they tend to kind of just do whatever is convenient in the moment um so from the outside yeah very very complicated to figure out yeah one of our oldest tickets at ping is redo the folder structure and we're always blocked on some big overhaul that like we don't want to make a nasty diff of so as soon as slots merges fingers crossed i'm going to go gun out whole new folder structure generally i think we care too much about these things one of my favorite dan abramov rants is most projects should be one file for a lot longer and the more i think about that the more it hurts my brain and is correct like there's no reason to break up your components into files until you have a lot of different components and they serve entirely different roles but like a big files kind of underrated yeah that that is something i especially have felt lately um [Music] you know when when i'm looking at like the homepage of a website um there is this mindset to be as consistent as possible if anything is ever going to be reused created as a component instead but home pages often have very unique things to them home pages sometimes break the consistency on purpose so homepages ended up being a really long file um but what do you include in there versus what do you abstract away um it was always my thought process that i wanted things to be as clean as possible so maybe you just see um section a section component which takes different properties like a header text and and try and make it as tight and compact as possible but when i go through and i look at that you know i can see oh wow that's really clean but when i think but what if there's something i don't like about this how many different layers do i have to go through to actually address the problem and i think that that becomes a huge huge thing in my mind when i'm looking at you actually organizing a project is how many things do i have to go through um it's one thing to put types in a different file so that somebody doesn't screw up the types or because you have like a hundred types and that would be weird to see at the top of a page and another thing to have somebody have to go into a module a css module to change you know one point of text on something like that that just gets super annoying so it's uh yeah i kind of like sometimes the mess and the chaos of a larger file so long is what i need is there and nothing more yep i'm pretty big on that what i'll usually do now for my work is i'll make one really big file to like get everything working and then once that's done and i'm confident in the logic and the structure i'll break it apart in the ways that make sense in terms of how it will then be consumed but i usually start from there one sec my cat's about to tear apart my entire shelf no worries oh gosh sorry about that i do want to highlight one of my favorite messages in chat so far i wish i had an easier way to pin it i'll build that eventually uh somebody said that you sound more senior than me and you do your approach to thinking about these problems and talking through like something i always say is like leveling up as a developer is only so much like especially career and like what we see is senior principle what not only so much of that is technical a lot of that is your ability to communicate those hard technical problems and how you think about your solutions to them you do a very good job of that communication and that isn't just how you sit here and talk it's also the way you architect and write that code the way you described like how do i fix problems with touching as few things as possible is one of the most important mindsets senior a lot of junior devs get obsessed with architecture and structure and building things in a specific way and like pushing as far as they can in the architecture not in the problem solving and what i consider seniority is largely in that and you do a very good job of communicating that way for various reasons oh thank you i appreciate that i i i'm trying it's not it's not always easy but i i love doing that and it's still very much this problem focused mindset of i i am um well right now i am redoing a lot of the website um i think i just do this for fun at this point but um i'm doing it with the mindset of i want to make this much more accessible from an open source standpoint and so because that is like the chief problem a lot of how i have to approach this is thinking of what would i run into what would other people run into where does it start to become complicated um even as i'm like i've recreated like what a twitter post looks like and should i include the twitter data because i'm only using certain tweets in this for the website do i include that in the actual components folder or should that be abstracted away to a data folder um at what point do i just have a large tweet component where when i'm you know mapping something into it i have to map each and every each and every type or each and every variable into it versus when do i just create a type array of all of those things and map it once when i'm looking at it as somebody who wants to volunteer and help out at what level does it get complicated um and at what level is it just very clear like oh that's what you're trying to do um actually just linked you on discord the the repo this is the one i'm like actively building on um this is where i'm doing that quick for others who are interested which i'm sure there's a lot of them and this isn't functional by any means this is literally just restarting but when you look through it you'll see where i've started to kind of annotate exactly what i'm trying to do there's no there's no like just testing or or anything like that but there are comments on top of the the individual files to try and explain why this is being used the way it is why it's written the way it is really awesome actually i i love this as an example of how you're thinking about these things and obviously if you'd like help from us in the community i'm sure a lot of people here are not just down but excitedly so also just one other thing that you're uniquely talented in that i've found and like gotten a lot of help and advice from from you you're dope at seo and like site metadata you got really good at that fast it's like hard i i'm very particular but i um yeah i i think i've tried doing different approaches to this i've recreated um in in one of the versions of the rad website essentially recreated next seo's entire file or an entire structure to do something that was more just what i needed but increasingly just using next seo i think that package is actually really good but being able to layer into it being able to make it as i guess modular as possible i think has been really huge having the default seo be able to touch all of the different points um and then having page based seo that modifies that as a go yeah i i really like seo but i don't know why i always always hate whenever i see those ads or get those linkedin messages or those emails of we want to do your seo like just [ __ ] off i don't want that i hate us but i love it it's yeah i i get it i was really nerdy about it early but totally lost my stride in like the early 2010s and haven't jumped back on it much since like i get the basics but like the pr you filed on um in it tips let me find that quick i'm sure i can find it pretty fast yes i can you filed an awesome pull request and i've i've sent this to my team i've sent this to other developers i've sent this all around as like here's a pr of a bunch of random [ __ ] that you're probably doing wrong and next because i was doing it wrong and next and jason showed up and fixed a bunch of our stuff y'all might want to do this too oh gosh i'm glad i could be a phil something i want to emphasize for chats i've seen a few people getting a feeling i've had a lot talking to you imposter syndrome jason's a freak of nature he is very good at learning things fast if you feel a little bad about how fast you're learning right now good you should there aren't other a lot of people like this i i know that 10x dev is a joke but you all are getting a sneak peek of what that actually looks like it's not your ability to like know everything about technology it's so much more about your approach how you learn solve problems and don't feel bad about feeling bad take that as an opportunity to learn and grow and i the reason i'm emphasizing how fresh jason is isn't because i think you can get this good in three months i think that's [ __ ] [ __ ] this is incredibly rare it's because the things that jason did to get there so fast are incredibly insightful and have helped me personally a ton and how i learn and approach new information and stuff like it's so much value here isn't him being better than you it's things you can learn from this and from our conversation oh i um i i guess i i think um i appreciate that um i think the the advantage that i sometimes have maybe is just because this isn't something i do for a living i i think about that a lot in my daily work of the advantage the advantages of this you know particular parts of my work being optional being exciting like it's adventurous it's exciting it is the extra stuff it's like a passion project essentially um once it stops being a passion project though i think it becomes harder to to be passionate about it um you know some of that passion is what drives wanting to look stuff like this up wanting to keep optimizing things wanting to build and challenge and becomes much more i'm just trying to get the job done so i can do something else and i mean i i find myself having that mindset in other facets of rad um in the website though it's it's always like what excuse do i have to work on the website cool now i can go work on the website and learn stuff about the website i check my way to put this this is you're touching on something that i try to talk about a lot here because it's so important it's this idea of like learning through things you care about not for the sake of learning the thing like the wrong way to learn next is to learn next it's to have a problem that next solves same with pretty much everything we've talked about and if that problem is something you're passionate about you're going to push through the hard parts much more reliably that's like so much of our experience as developers is being wrong constantly and that erodes at you it just it has to it's why there's such a high level of like depression and insecurity and so many other like mental health issues in software it's our job to feel stupid constantly that's what we do for a living it's why we're paid so much it's to feel bad and you need something to get through that for me it was always the problems i was solving mattered so much to me that being wrong constantly didn't affect my mindset at all because i was so excited about the problem i think i got a lot of that from skateboarding where you're just eating [ __ ] constantly until suddenly you ride away and you mentioned before you got that from video games where you're just screwing the thing up until suddenly you get it right that that is really hard to do unless you have a reason and wanting to be a developer i don't know if that's a good enough reason for most people and i think that's more what's interesting to me here is not you're not a developer for a living so much as you're not doing this to be a developer at all um yeah yeah yeah it's um it's such a strange thing to when i look at that [Music] you know it it took me two months to figure out all of this stuff but the mindset was never [Music] i want to be the best developer i want to be known for being a developer i want to be respected as a developer i want to be paid as a developer or not get fired as a developer it was rad needs a website and i i i have to to do it i have to build it um the the end result of that isn't predictable um i had no idea what that would lead to but it did solve the problem i have this problem though with like you know even my own stuff that i try and do on twitch where i think you know i've got to have x amount of views or i have to be you know a known content creator in some way and that's that is the wrong problem that's not a solvable problem um that is a very different thing if the problem in my mind instead was how can i help people learn how to develop in this same way how can i help people focus and be able to i guess be more efficient with their day you find the ways to approach that and people are either interested or not and you learn well just because i wanted to show people this or just because i wanted to do this doesn't mean that people actually wanted that or needed that um that's those are all things that strike me um just in the moment i guess i yeah i totally agree i'm also getting a little distracted by a message i didn't like so i'm gonna go on a quick rant somebody said something along the lines of they feel like a lot of newer devs are just in it for money and salary and aren't getting in for the right reasons don't think it's our role to say what is what are aren't the right reasons for somebody to get into dev if they get in and they get in cool we can help people whose reasons align with us be successful by giving them support and resources whenever we can but more importantly for every one person here who's hanging out on a wednesday afternoon watching us live on twitch talk about this there are 49 developers that need to be maintaining an old like lisp or cobalt code base or some php code that nobody wants to touch like for every one of us bleeding edge lunatics that love doing stuff like this there needs to be a lot of developers maintaining google's crumbling infrastructure we can get frustrated with those people for existing and for doing things different from how we like but the reality is for us to do what we do we need people to maintain the tech debt that we're creating in our wake and that's what we do when we push like the bounds and keep doing [ __ ] like this the the for this to happen we need lots of developers who don't give a [ __ ] to maintain the stuff that we're building and that is hard work and they are paid fairly for the hard work they're doing and i'm out here throwing away my 400 000 a year salary to complain on twitch about it because that's what i chose to do i'm not normal we're not normal and shaming the people who are is not something i'm down for yeah i like i can see where we where we romanticize what a what a developer is what a coder is this person who you know is constantly solving problems coming up with in intuitive solutions and genius solutions you know they're really living up to this engineer that sometimes gets added to the end of software uh in and i mean that's that's cool i think it is great to have pride in what you do and take pride in what you do but i guess at the same time yeah it um is totally fair that this is a way to make ends meet um i'm consistently more amazed by the people who work is i mean a work is a means to do other things in life like it is one of the least important things for them it's yeah i want to travel and this is something that i can do on the move and this is yeah i i do my time um something i've even learned you know in hiring people um is to to not romanticize even my own work and apply that to others this you don't have to be overly passionate about mental health care and wanting to change the world i don't want rad or working at rad to be your life i don't want this to be your identity your ego i instead i just need to set the minimum for quality of work and and time put in to something that i i actually accept and actually enjoy and if i'm not impressed with that maybe the minimum is too low maybe i need to set the bar a little bit higher but it is definitely not the expectation that work should be somebody's life like it is mine um i'm glad i can be happy with that but yeah the work is high enough no that's it the work is life folks like us can solve a certain class of problem much more effectively and that problems like the zero to like 10 problem of like getting the thing going and getting it going well but in that process we create a whole additional set of classes of problems of tech debt of like accounting failure decisions i know i have plenty of those we're dealing with like those types of things because we are so invested in moving fast we're doing things we don't know how to do if there's somebody who is exclusively responsible for doing that one thing that is a boring thing that's not how we like to do things we like to try and experiment with and do things all the time and be wrong our desire to be wrong and learn on the fly causes us to create a class of problem we need those boring people to solve for us yeah yeah yeah and i mean i i can't imagine the the being a maintainer is such a thankless job unfortunately um but yeah i i like go through and just enjoy being able to pick at different things solve different problems in the moment and then just move on um that's that's something very fortunate to be able to do on the maintainer topic one of the things that really stood out to me from your process i don't know how to put this other than you just as soon as you started like using things and getting them started throwing money at them like i i think you're at like just from the ones i know about at least 500 a month of contributions to random open source projects that you use like you go out of your way to thank the people you just described as thankless and i thought that was outstanding especially for someone early enough that your stereotype is normally complaining about problems you're doing the opposite you're throwing them caches thanks for their work and that was that stood out to me oh well thank you don't thank me yeah thanking you as a person who hadn't contributed for like the eight plus years i would throw code every once in a while but it was usually bad you're out here three months in like throwing 250 to trpc a month when i haven't even thought of throwing money at him and immediately had to match it at ping because we're not going to let you class r spend on trpc that's not fair i mean it just i guess it just made sense to me you know it's um it's it's so weird like i i definitely is somebody who runs a non-profit contribute to nonprofits but yeah open source projects are are essentially the same thing they're just they just don't get any of the tax benefit but that you know one person out there that's maintaining something that a dozen other big packages depend on um you know we gotta help that person out and i mean with trpc it's all of our router routing features depend on that our contact to our database router our donation process router all depends on that existing if that cease to exist or wasn't updated moving things to the next or the latest next js release for the latest react release that um that becomes a huge challenge for everyone i'm really surprised that a lot of corporations and tech don't have some kind of set aside fund to maintain projects that they're dependent on or maybe they're not even aware who knows yeah it's i think the first company value on like the ping company value like doc i made when i started things was contribute to those who let us do this and that means financially i even like said that in the byline of it to be clear like we put our money where our support comes from it's the people who make this possible for us they get paid for it period that's just one of the rules and as soon as we got our first like real investment i immediately started paying 250 bucks a month to obs from company money because we exist because of obs and we're building directly into it we're working closely with them it is essential that obs continues to be great for us to succeed yeah wow open source open source world it's beautiful let's um uh i'm trying to contribute more to it in the sense of like actual code um we we did a giveaway very recently uh in vr chat and this was something that i was looking around and just really struggled to find things that i liked within that like the the solutions to managing giveaways um so i just decided to build all of that from scratch and right now i'm in the process of converting all of that from like i needed to build this in 24 hours um and the code looks like that uh to um you know now i'd love for this to be an open source thing that any charity can clone um and just start to run with um i think there's a lot of of room for those kinds of open source projects that a developer involved with a non-profit can pick up and run with um and [Music] you know it's just one way to kind of keep keep adding into that i mean in this this site is is spaghetti code for the most part but it uses um 3js to just have some floating stars and moving stuff it uses stripe to handle all of the donations and the entries some of this is a little rough around the edges but like if you want to enter without contributing a way of getting some of that as it will use twilio to do that otp manage all of those pieces of course this all routes then into supabase once the contribution has been confirmed to then array all of the donors information into um everything uh i think i i was using superbase initially on its own but then introduced sendgrid as well to just send additional confirmation emails that a contribution went through but now yeah i want to make this open source so this looks awesome for like showing how all these pieces go together i see people mentioning in chat jacob of course offering to help polish it up if you want any help and i want to emphasize that side of open source like open source is give take but not in as binary away as i think you're thinking of it here where you've taken so much from open source by using all these things so now you have to give back the process of giving is also a back and forth so if you want to open source something and you want to like contribute to open source that is a thing that you're going to have to take a lot during that exchange you're going to need help from people like jason or jacob and me you're going to need help from the maintainers of the things you want to contribute to but that's not just okay that's awesome it's one of the coolest parts of the open source process is that it is just as much about the community and communication as it is about the code you don't it's easy to get in the mindset of i need to share code back into the ether because i've taken so much from it but it's not that i've i've struggled this a bit myself i don't feel like i'm giving enough to open source right now and in a lot of ways i'm not i don't open source a lot of code and when i do it's like dumb toy projects i built on stream but the value i bring to open source is bringing attention to the things that aren't getting it and trying to like fix these problems at a different level it's i'm a magnifying glass not a hammer and that's not just okay it's in a lot of ways necessary because not enough people are doing it and i've gotten so much thanks from open source maintainers for the help i've given with like branding and signal boosting and just bringing them on the show like this like that is a great way to contribute to open source too just being a person that talks about these things yeah yeah i'm trying to to like actually learn and solidify that mindset to some to some degree like i'm always in this this space where i need to build or or do the thing and then that's like that's my contribution and if i can't complete it then it just kind of sits dormant but some of the reality is like if i'm just openly talking about this problem and starting to build some momentum of working on it there are tons of people who can jump in and actually also work on that amplifying that that is a thing and that there is even a framework for solving that is i mean it's hard that's really it's a hard thing to do it'll also keep you more on top of it and make it way clearer when you hit that point where the thing is good enough and is like ready for people to use if you have people using it too early when it's not ready it's much easier to tell when it is versus waiting until you think you're at that point you can't know until it's broken for 20 people if it's ready for the 21st yeah that's uh i i find all those things all of the wrong ways like that i think where even where i'm at in doing this rebuild of the rad site is i'm aware that increasingly we actually need to build a backend donor database um doing everything through stripe and super bass is is rough doing it through stripe and checking all of our donation logs means giving more access to people to stripe which is very very sensitive doing things out of supabase is nice but having our own thing for that is is kind of a necessary evolution having a more advanced monthly giving program that's something where i've been looking for lots of help and trying to just solve it on my own um because wanting to do this use case where somebody becomes a monthly donor and then gets permissions on discord being able to do the same thing but also log this data for someone who decides to donate monthly via twitch prime instead of via stripe being able to equally log all of this data if somebody donates via paypal or venmo or bank transfer there's so many just fine pieces to that and then making this data totally accessible to people on our team who don't know anything about coding they know about donor management donor engagement they just want to see a spreadsheet at the end of the day all of that is is kind of where i actually need the most help but you know even as i'm steadily building this stuff and learning this stuff i'm finding out the problems in real time when a donation doesn't log to supabase and i'm like oh [ __ ] why could that be well all of that code base is private and nobody can help me if i'm stuck with that [Music] but you know with the giveaway thing um i love the the giveaway stack that it currently uses because in theory nothing here costs money running up a super base free account will manage all of this no problem unless you actually have hundreds of thousands of people entering but i actually have stress test this by creating over 300 000 records in five seconds super bass took all of it uh but just somebody was initially doing that they didn't scaled and i quickly jumped on them like yeah there are tiers of usage superbase doesn't serve yet but they're giving you one of the easiest interfaces to postgres in the world and it scales fine when you run into problems you're now at a size where you can hire a dedicated team to fix them like that's just not something you you're realistically going to run into i mean i i can see where i would want to use something like planet scale if i have a ton of concurrent things like if i am running a social media platform and i've got tons of people actively doing all of these things for sure super bass just reading and writing into it i mean you you really have to try and break it um initially i didn't even mean to stress test it in the way that i did when i updated the giveaway app to react 18 i wasn't aware of the use effect issue where just at least with trpc it infinitely ran use effect there was no end to that loop um so i was just mutating data as fast as it could possibly go um which was somewhere around like 30 000 rights to that database a second and it just blew up um and then i actually really pushed it to uh its breaking point and that was a lot of fun but it just like the the browser itself crashed before i ever got to a point where super bass slowed down that makes sense i planet scale users have had some fun issues where because perf is so good even at like insane use levels they end up racking up crazy builds because they don't realize they're writing like half a billion rows a day or in reading like a billion plus there's a few really funny blog posts about that because of how the performance scaling so well it's almost a bug as much as a feature because it like hides a class of bugs that you might be introducing so that's also a very like valuable thing to think about when you make these types of decisions is not taking advantage of performance unintentionally by writing bad code there's one really good question that somebody asked that i keep like getting baited away from and i want to add a tiny bit of framing to it something i i feel like you you know you could do and we've touched on it a bit but you don't yet is taking advantage of all of us i almost feel like you're a little shy to ask questions at times but we're hungry for it like when i started ping i had alex from trpc in the code base like making changes and fixing my like stupid mistakes using his library like i guarantee you people like tanner from react query knowing you and like what you're working on would love to help however he could or a bunch of people in chat the reason bringing this up is one of the developers in this community socarel just asked what is the best way to help rad or you specifically with your mission obviously donating and things are an option but how can we help how can the hundred developers listening live right now help you achieve your goals i mean oh boy um yeah i'm not good at asking for support in that way um that's uh always been difficult you're not really sharing with us what we could do to help this isn't an ask this is an opportunity and that's how everyone here is going to see it it's an opportunity to contribute to an awesome person doing an awesome thing it's not you asking us for help clearly you're going to do this yourself if we don't help you at all that was always the case we are eagerly wanting to help because it makes us feel better too most of us are hacking at big business companies and you're making mental health better and saving lives i guarantee you all the devs here want to help how they can that is very appreciated um okay so tier list of ways to help um becoming a monthly donor is probably the biggest um yeah right right now that's probably the biggest because we cover the cost of therapy for people having monthly reoccurring revenue for us is absolutely critical it gives us the ability to anticipate how many more people we can add into our program gives us a safe a safety net for covering therapy which you know is obviously ongoing um that's a big piece if you are looking to volunteer skill set as a dev the repos that i've linked the the main one is the you are rad repo or you are rad web that is becoming the core repo that we'll be using for this site the the main one if you go to urad.org is actually private and right now i'm just porting that over in a more friendly open source format but the things that are missing on that repo and missing on the private repo as well are all for the most part back end related lots and lots of pieces missing there having a more robust monthly giving program is one of my biggest focuses right now i really want giving to rad monthly to mean something and be more impactful at the very least assigning discord roles to people at the very least being able to have some kind of authentication and interaction for them on the site that's unique we want to build our monthly donation system and just our donation system in general uh in a different way so i'm currently reapproaching that as well and looking for tons of help there we yeah we need a back-end dashboard for all of this um for the people on our team with no coding experience to be able to see i've tried using uh tanner's like react table um and you know doing that but we want to move out of the base for that use case i've looked at retool yeah as potential just doing all of it through retool um i really we need a much more consistent use to work there i'm sure that he'd be more than happy to help out and get you guys on like the charity plan and what not to like we can figure this all out like these people are just here watching the stream if we can get on some kind of free plan that would be great um retool would would be super it would make things so much easier for us here um because yeah i need to take paypal donations and venmo donations i need to take twitch subscriptions i need to take stripe payments and i need to have all of that compiled and within one one big database one living record and that doesn't exist yet it's pulling it from all over the place and it looks messy it's hard to interact with it's hard to search through even stripe has a lot of issues when it comes to this like you know how how to actually find these payments that have been made you can't search by meta tag there's there's so many issues monthly giving is easier to look at but when you accept real-time donations and people can do customizable amount you have to just create a new product every single time or any payment every single time and you can't search through that they're all unique it's there's so many issues there but um yeah these are the specific like class of problems that more experienced developers are useful for and it's almost like enlightening for me in a way that like these being the things that you're struggling with enough to not have done yet and be able to bring up here it really highlights to me like a line between the things somebody realistically can do through raw effort themselves versus the ones that are like significantly harder to untenable and it feels like what's left is the stuff that's over that line now legitimately like i know you could power through a lot of these things but like building a stable architecture for generically for applying like a generic set on top of 15 different ways monies comes in to manage that that's like a hard product problem a hard infrastructure problem a hard integration problem a hard data management problem a hard database architecture and like design problem there's so many pieces there that just inherently come from years of experience and watching it go wrong and these problems are also a lot scarier because when they fail they can do much worse things especially on the data side so to those watching who have dealt with things that sound like this before especially like the synchronization of your stripe your database and a bunch of other things that integrate there too reach out either to me or jason we can figure something out even maybe like make a weekly office hour and discord or people can hop in my discord and chat about it there we can how about before my show next week on wednesday noon we'll do a sync with anybody who's interested in my discord that would be incredible yeah yeah dave i'll make the event afterwards and anybody who's interested in helping in any way with rad do that and also i know i say this a lot but it's usually for sub phishing i'm doing okay right now y'all have a lot of money you're programmers you if you're not making a lot of money we can talk about fixing that but you probably are throw some of that to these guys rad needs it they're going to actually help people live better lives maybe even like live at all and the amount that that helps is so much more than almost anything you can do on it on this damn site so exclamation point rad and chat will give you a link to your ad set up a monthly subscription there if you're down because as jason mentioned before that makes it way easier for them to budget plan and help more people get therapy that that would be yes please if you can please by all means do um and if anything breaks in that monthly if not check out that yeah cause yeah sometimes things break there it's uh gosh there's so many so many things and and two like as we figure this out from rad's side uh oh thank you so much for the donation uh as we figure it out from rad side you know the plan is to consistently make all of this stuff open source and available it's just like the giveaway site it's we figured out how to do this in a way that costs no money to charities which usually these things take a fortune they take 10 15 percent off of your giveaway and and now it's steadily becoming open source so that anybody could just run their own giveaway um even the legal paperwork is all like super high standard and just auto fills in with a config same thing if we were to make a full donation system with the backend dashboard and all that stuff yeah we're just going to put it right back out there so that other charities can do the same sounds like phenomenal opportunities for a lot of people here also before i forget mark already said that he can help with the like charity tier for retail so definitely we'll get that figured out after and we just like let's go people want to help like we're all hacking at how to like line another pocket layer for jeff bezos and you're giving us the opportunity to actually help people like as thankful as you may feel we're just if not like even more so thankful to have these opportunities like you know how cool it is for me to bring someone like you on to talk about how the like hundred plus people who watch me every week can actually do something that helps the world with their skills and their knowledge and their money like this is so cool and thank you for that oh no so i don't even know what to say it's it's just um yeah i i think this is this is just how things can be um i love i love it um accepting help is hard you know it's it's uh i'm totally aware of the irony of offering help for a living and being in a place where i still don't often ask for help so i gotta keep working on that one isn't that literally how you started your story here today you needed help surviving and you figured the best way to do that was to help someone else survive yeah yep it is a pattern of sorts but you know we get better over time and that's i can tell you know with the nonprofit in general that's typically where we get bottlenecked is just asking asking for support asking for help you know i've still got emails i need to send to github and vercell and xjs to get them to support us as well um i mean i know next or versailles sponsors our website but i've been meaning to follow up with them about just donating there's people here from these places watching i know that and i'm sure all of them are more than happy to chat uh if you're not already following jason and chatting with him there i will exclamation point jason in chat once more i should share this on youtube quick too so the youtube folk have it as well definitely recommend reaching out to him directly he is awesome hit up jason and make it so the success we've all had in this world can make a much bigger difference oh thank you thank you of course now it's time to break this loop of not asking for i want to say asking for help because i understand your repulsion to that feeling and term this isn't asking for help this is offering assistance as an opportunity to others like people can you're offering the opportunity to be involved and that's so so much cooler than asking for help hmm i like that a lot there might be somebody who's in the same position you were when you started this story where they don't know what they could do to feel better and the way they do that is helping and i guarantee there are some people in chat right now who aren't doing great who are going to feel a lot better because they help yeah yeah that's i mean that's that's how how a community works as the community supports each other you know and you're able to reach in into that community put in pull from you know [Music] they care a lot they for the sake of the the next jason open up these opportunities you know if somebody else was doing what you were doing when you started doing this you would have been on top of that so fast give these guys the same opportunity you better ask for help you just gotta get started yeah yeah it is true that is very true and yeah if if people um have the time i would love for them to help that's that's what we need we need monthly donors we need to find deeper support from [Music] i think groups within the space like companies within the space and we need some of this like nose to the ground grinding um for code this back end donor system is absolutely an issue and we've even noticed it exiting may that donations made on the site and we've got most of them but some we see on stripe we don't see on our on our database and that's that means those people aren't getting thanked that means they're not you know people that we know to reach out for to support us in the future it's all we got to solve that problem swiftly so any help with that would be huge you're chatting to the right people for that i have a feeling that there will be some people reaching out and next wednesday at noon in my discord make sure you're there so we can have a chat about how any of y'all can get involved and help with this could be a great first open source project it could be a great last open source project it can be a great thing in between whatever you want to do to help do it and if you haven't already donated and you're listening fix that it's like give five dollars it all helps you're giving people access to therapy that they may not have access to otherwise and it's such an awesome cause to be able to help thank you thank you i do want to open up the opportunity for questions from chat i've seen a bunch of awesome ones snuck in throughout that i haven't been able to get to when i'm waiting for y'all to drop more questions i want to quickly ask one that i do remember which is somebody wanted us to dig a bit more into how to be better at google like tips on how to use that as a resource because it's something that we like touched on and clearly we've like built systems for but i love from like your perspective what works in your google process and how did you learn how to search for things yeah yeah the um the the process of doing this i i think something i've noticed is how exactly google's algorithm works and working with that instead of against that is a huge thing um if you ever look at the analytics for google if you even look at like youtube analytics one of the things you'll consistently see every year one of the top trends is the year itself so people aren't just googling how to code they're googling how to code 2022 that is a consistent thing i always go into that similar framework as i'm coding i want to learn how to code and i want the most relevant piece of information however people who are good at seo know that and they consistently update old answers old documents with 2022. stackoverflow does this as well where they consistently go back through their old documents and they update the seo on their articles to read updated this month 2022 so you still get really old answers but that is technically an artificial thing that you can actually google around so if i'm looking up react suspense and i want to know more about the new feature of suspense one of the things that i'll do is when i google react suspense i'll click on tools under the google search and i'll set anytime to past month and if i really wanted to specify instead of wrapping it in quotes i can click all results and then click verbatim now i'm only seeing react suspense and i'm seeing articles that popped up within that time frame this is something that makes it really really easy to get the most relevant information being able to also figure out what i call like sources of truth i think is really important as you go through google um [Music] and and these i think are more experience based but like as i'm looking through some of these searches and i see log rocket.com um i know it's going to be an entire seo focused article about the answer um and sometimes there's solutions but it's lower on my tier list i don't tend to trust that as much um dev.t.o same kind of thing dev.t.o i rank a little bit higher because there's almost always just the code and a lot of the times thankfully a link to a repo i love that the link to the repo is huge sometimes i just skip the article and go straight to the repo but the the authors of these individual articles vary so you know not not always the case um that you want to go straight to that what i tend to look at really really highly in score really highly is actual github links where i can see people working on stuff and what exactly they're doing if i'm searching this is something that i get super annoyed with but next js if you wrap a button a custom button with a next link you will get use ref errors in your console um that was something that blew my mind and looking that up yeah you're gonna find a lot of nonsense but the search results that come up in github are people who are filing issues over and over again and annoying the devs with that um that's where the solution is there are dev twos there are code snippets there are log rockets all kinds of nonsense like that there's even some reddit posts about it the answer is in the github and honestly i look for the most combative person who posts in github because that's the one the dev is going to respond to because they're annoyed this person's like next link is broken it has used ref issues i know that a really annoyed dev is going to respond to that and be like no you're dumb this is the solution and that's that's that is the google tiers um the solution to that by the way is to either create a use ref wrapper which i think is way too much extra work the wrapping it in an anchor link gives you two tab-able focuses which also is not good just wrap it in a normal div that's it um that will actually get rid of that error it drove me crazy how how long i looked for a solution to that in a github issue um i i also really like to as i'm google searching for things um be very particular about keywords that's really all google is doing it scrubs a lot of other things your keywords are what actually matters and so when i'm looking through like trending or current ui ux trends like i'll just google that as i'm typing that out the first thing that comes up is 2022 right after that of course and there's going to be tons of these videos here usually videos that somebody has made to purposely target certain keywords and try and make as much money off of it probably not as helpful um i feel like when i'm googling things watching a video about it is like i'm so desperate at that point um like i've actually cannot find anything anywhere and now i'm listening to a gigantic advertisement instead sorry for contributing there there's a lot of knowledge that i've put in these videos that doesn't exist anywhere else and i do feel bad i need to write it and put it somewhere else but busy i mean for some people that's that's how they consume the most um i think because i'm just like aggressively searching through stuff text is so so much easier i can copy and paste it it almost always has a github link to it or within it but yeah looking up these ui trends you know it's it's knowing again that's that's um trust like there's gonna be a bunch of junk links on here people just focused on seo that are these are just gigantic advertisements that look like websites coming down as i'm searching through some of these ui trends 2022 is getting an idea of what are the websites that actual people invested in ui and ux utilize so i might even refine this instead as in ui ux psychology what are things that somebody who's actually invested in ui ui and ux what do they actually look for what are they actually interested ux planet uxdesign.cc actual ui developers seem to be involved in those sites to some degree sometimes i'll even look at reddit where i'm not looking exactly for this the the answer there but i am looking for people who want to become better ui in ux devs or researchers and seeing where they are being pointed to review portfolios where they're being pointed to study more and read up more inevitably i end up finding really really unique websites that i pin um i think i've shared some of those to you in the past but i can you find the most interesting [ __ ] i love reading through stuff like this um this is one of my my all time favorites that i've come across which was somebody who was essentially just trying to create a source of truth by taking exactly from like very popular design systems and seeding out the commonalities so if i want to create a button from scratch this is how slack asana um zendesk uber reddit makes buttons and these are the things that those buttons have in common and these are where those buttons differ and here's links to the actual repository to those design systems where that button exists so you can look at that as well here's the anatomy broken down the html structure broken down um this is the site is nuts um you got chat freaking out over this when people are digging this resource a lot i love it this is the thing like this is a huge part of why you leveled up so fast is your the the way you find resources is fascinating like i learned three things about googling here which is really cool i yeah i one piece you touched on that i want to dig in on a bit more because like just run in a bit this idea of vetting the person more than the solution almost before you start to vet the solution it's identify if the the creator of this resource is applying knowledge to problems that overlap with yours enough that their solutions make sense for you to consider like if you have some problem with stripe and you see an article that looks right but the guy who wrote it does nothing but swift in ios dev and you know that it's a lot easier to not spend half an hour reading about something where all the syntax is unfamiliar to you it's not even the same programming language you're in and your choice to focus in on the people in a way and their applications of things it's the same reason that like you go to github and the way you describe the github issue thing what the the best place to find an answer is when somebody asks the dumb question the dumb aggressive way and then the the creator of that thing responds with exactly what should be done in the exact way they intend for it to be used that is like one of the most powerful hacks i think you described here is the ways in which you understand the persona and the the thought process of the person who's writing the answer you're looking for i think that's um i i think it's it's actually quite interesting um but it is exactly that it is yeah search engine optimization it is very much looking into the psychology it is very much looking at the individual in yeah like not only is somebody inevitably gonna post an issue on a repo that is insulting um or or they're gonna post it in a way that's insulting but the response to that is always going to be the most clever thing sometimes something that the developer didn't even initially think i actually really like to be open to those kinds of comments because we get defensive and we come up with a solution just to throw it in someone's face and so yeah if you are looking through next if you have questions about necks that you don't see in the docs check the issues you will see lee in them battle it out sometimes you will see um alice is in there a bunch now guillermo's in there from time to time um he's in there he's he's fighting people in that that's great yeah i love those those threads i've recently been having a lot of fun in the remix issues and pull requests even though i'm not like using remix there are some very interesting conversations going on in there especially around type safety poor colin the creator of zod and like the person who wrote the first two commits for trpc has a pull request to open adding like full stack type safety with generics to remix and they're just battling it out well that's it's like a donation at that point right that's how a lot of us feel but like their argument is over the network nothing is guaranteed and in a way this would be lying to you because if you have like a in your trpc back end you return a map or a date and that goes over the wire as json it comes back in as strings unless you use something like super json to transform it like trpc does this doesn't do that it just lets you infer a type from back to front so it can lie to you that combined with if the back end changes underneath you while you're like navigating the site like you change what that returns your code expects it to be in one shape but is actually in a different shape so typescript is wrong and lying cool without it you're way worse off because nobody's validating the response from their loader it's right there they have the data why would they like write a checker for what they're getting back from equivalent like effectively get server side props you don't check to make sure the data is right you use it and typescript will at least tell you what to expect so i'm not as on board with their framing here i it sucks because when i read that and i saw more examples i started getting much more of like where remixes patterns could bring me value but i'm learning that through watching them battle it out over type safety yes um yeah that that's just how it goes in and it's it's interesting it it's not like it's necessary but inevitably that's how it works right like you you can do the same thing on reddit in general with with literally any kind of question um if you just ask a dumb enough question somebody will take advantage of that opportunity to call you dumb while also giving you the answer um just uh so annoying but yeah i i've i think i've learned a lot about remix um as well as tons of other packages and and approaches entirely through their issues um the issue section of their repo anyways um law requests as well i think that those are an underrated way to learn about things like a question i get a lot is i'm starting my first job at a big company and i i don't think that's an experience you've had of like diving into this huge code base where all the decisions are made but your strategy here is exactly how you do that when you're at a company you can't google search a lot of the problems because those problems are proprietary and specific to that company's implementation the best way to learn that is not to like google search or just bash at it until it works it's look at how people solve these problems usually look through the pull requests and see what people are changing and why they're changing it look at the discussions of how they figure things out that way look at if there are issues look at those for sure but i tend to find that like the next step for this once you're changing the code base that we're talking about is to see what changes and why it's changing and you can get so much from that and i really love how much of this discussion has come back to like using github and using code output solutions using that other side that's what we're creating to help us in the creation process rather than looking to resources like video and documentation and blog posts you're looking at how others solve the problem rather than how they tell you to solve the problem and you can learn so much from that yeah it's it's you know it comes back to um that that piece of just like looking at the individual and seeing what they do how they approach things um what what they use in argument what they use in production what they use in you know for fun for development um and and being able to see that this is a trusted source of information um and and that's it's not easy to do i think it's a skill that builds up but as much comes as much that comes up in a google search result it is still not so much that you won't consistently see the same things over and over again you will always see stack overflow you will always see div dot to you will always see the same kinds of results being able to recognize as those results come up the websites that are usually accurate the sources of truth on an individual level become really really critical and um you know even in within those sources of truth twitter is actually great as well um i'm still getting used to finding answers on twitter but you don't even have to post like these are things where sometimes somebody just goes on twitter they're like holy [ __ ] i had no idea this was a thing just in case anybody else is struggling with it and it'll come up in seo from time to time those are usually great and then that person gets lit up in real time as people subtweet them or directly comment on them and then you learn even more it's twitter's vicious but some good answers can be found there one of something's just funny that happened earlier today uh i had a tweet a week or two probably two to three weeks ago at this point about react query instead of doing a bunch of weird async use effect stuff just pass react query the async function and take what it gives you rather than building your own five hook deep solution that has a bunch of bugs and edge cases and today weeks later somebody quote tweeted this they didn't tweet somebody said i haven't been the same since i saw that tweet about react query over use effect and somebody replied what tweet and then i got quote tweeted which is how i saw it but like subtweeting in a positive way like like my [ __ ] posting impacted them enough to say something about it weeks later and it's crazy how much those dumb things do so super loud outside one sec wholesome that's usually those stories don't end so awesome for how [ __ ] posty i am i am surprised how positive and wholesome things tend to go in the community like we've got a bunch of people jobs we've helped people get some cool opportunities we've made real impact in the frameworks we use i have some really good insight info on next things that we definitely helped instigate that i'm proud of uh yeah it's rad that we've like [ __ ] posed our way to real impact and success over here in the t3 community that's that's the way you got to go about it it seems if you can make it into a meme and do good like you're going to do a lot of good if you're just doing good you got to figure out the meme that's that's yeah trying to figure that out too yeah i think this is a good place to wrap up this has been a phenomenal two hours definitely one of my favorites i've done of the show so far any last things you want to shout out or put a spotlight on um no i just just want to thank you for doing this thank you for having me on i can't wait until we go through a bunch of this stuff on wednesday i i should yeah i'll be in an asking for help mood and mindset we're asking for no no not not asking for i will be providing opportunities to be involved mindset really excited for those opportunities to be shared and for people to get involved




## Leaving Everything Behind For Elixir - 20240227
my career started with Elixir but sadly that didn't last very long because that team folded in a little over a year and I ended up on a Go Team instead and I hated it I just could not enjoy goang after spending a year working in something as beautiful as Elixir ended up moving to the front end for a bit to help with the rewrite of twitch to react finding that fun enough and diving in deeper and deeper until suddenly I'm a react YouTuber I guess I don't know I still love F stack I still love Elixir I play with these things all the time and I want to talk about them more and I want to use them more and maybe just maybe I want to ship them more sadly I've not had the chance but someone else has just a couple days ago developer Daniel berol tagged both Prime and me in an article they wrote all about moving to Elixir after spending a bunch of time going through react and eventually burning out and I want to take the time to read this blog post because it seemed really cool so let's do it from next CH to rails then Elixir my journey through reactjs burnout I've been a web developer since 2019 I used react and react based Frameworks like Gatsby next remix Astro and hydrogen I've never been fully content with any of these tools but as a beginner who was deep in the JS ecosystem all I could hear from my peers was something along those lines this is the way any other programming language is either slow or old interesting I personally never would have phrase things like this but I definitely like seen people that would do that I can see why you would feel this way I'll also say you have experienced more react Frameworks than me I've shipped Gatsby once for a Blog I tried using it for other things and hated it obviously I'm pretty deep on next I won't pretend otherwise remix I I know of well enough but I've never really shipped it Astro I love I use it for a bunch of random things and then hydrogen the Shopify framework interesting choice clearly you really wanted to try everything and I have respect for that but I can see why if you're still building up your own confidence in these skills and trying to solve problems how this type of hopping from thing to thing could be really stressful let's see where we go as a result I got used to a huge amount of complexity multiple separate repositories thousands of libraries and Frameworks to achieve simple things graphql microservices serverless static site gen incremental static regeneration partial hydration Redux Redux thunk Babble webpack react server components server actions Etc this list could go on for another 10 minutes Redux thk God this poor individual the the thrashing here I'm so sorry until one day I said enough is enough let's take a look at the complete timeline of me slowly going mad this will take a while feel free to make some coffee before the long read the timeline of the burnout part one gatsbyjs I remember finishing my boot camp and thinking finally I'm able to build my portfolio and so I did there was only one small problem I wanted to index on Google but using the good old crate react app made this Mission nearly impossible soon I learned about SEO and reacts hydration cycle which led me to the solution of this problem gasby JS the idea of static site generation was simply revolutionary for me back then after all nothing is faster than pre-rendered HTML files right he's not wrong we'll see where this one goes I I I'm well known for not loving Gatsby and I'm curious what his experience was like I decided to learn this new framework by reading the docs and let me tell you this was not a fun experience I've never heard of graphql before apparently you needed it to generate all the static files what the hell yeah your instinct here was correct we we went down the wrong path and I'm so sorry you had to come down this whole path with us I asked some of my internet friends if having a hard time learning all of this over-engineered crap was normal and they replied with skill issue try harder I promise you I would not have replied with this especially at the time so I tried harder and after finally learning it I ped my personal website to Gatsby most of my pages were successfully indexed on Google and for a couple of months I was extremely satisfied with the result then another problem appeared a lot of my developer friends started saying Gatsby is dead next was created to simplify static site generation and also provide server side rendering fair I would also have to see like when did this person graduate their boot camp they've been web developers since 2019 yeah you came in at like one of the hottest points for everything being reinvented I I firmly believe we're in a better State now than we were in 2019 whether or not everybody's complaining more or less on Twitter different issue the straight up level of thrash is way lower than it was back then so let's see how his next experience went took a quick glance over at next and immediately fell in love I was able to do the same things as Gatsby without graphql and with a third of the code once again I ported my portfolio to another framework next this time I had a wonderful experience deploying to forel was a breeze get static props and serers side props functions were simple yet extremely powerful I could choose the rendering style per page a lot of flexibility unfortunately something I learned the hard way JavaScript ecosystem all good things come to an end this is a great intro for the remix chapter but I do want to quickly say get serers side props was not what I would call Simple it had some very weird and dumb complex behaviors that were best avoided and the relationship between these functions and the content actually getting to your components was also not clear it was simple in the sense that it looks good in a screenshot but it was incredibly complex in the sense that using it and maintaining it was difficult if you were already used to complex maintenance from something like Gatsby in the chaos of their graphql layer between just deleting that layer feels really good but removing the thing between these two parts doesn't magically bridge the gap between them and I don't think NEX did a great job I would actually argue that this developer did a great job bridging that mental Gap themselves for them to digest what these functions did in the relationship of all of these parts in next after coming from Gatsby quickly enough that it's 2 and a half paragraphs it sounds like this developer did a really good job of onboarding here it took me me longer to get used to next and I never would have said these functions were simple so credit to them for figuring that out so quickly let's figure out how this remix tangent went for them I remember extremely well when remix was announced multiple Tech influencers started publishing content about it as always come on man okay I get it you here I am publishing content about your blog post however back then I read on the homepage that it did not support static site generation just server side rendering so I thought wait a second all those years investing on the jam stack is thrown away here no way this framework ain't going to last however to my surprise not only survive but it was acquired by Shopify and emerged as a prominent competitor to next create remix is still the way you create a remix app right the fact that create T3 app so consistently competes with remix for app initializations suggests that it's not really competitor to next especially when you look at this so yeah sure if you use Twitter to figure out which Frameworks have the most traction remix seems to be doing great and be a real competitor but if you look at any real stats over any real time frame you'll start to see a pattern and that pattern isn't that remix is doing great this is not meant to throw shade at remix this is meant to throw shade at the people who have misled newer developers into thinking remix is as valid a choice for production software based on adoption as next next one that doesn't mean you have to use next to be clear but it means you shouldn't just follow what Twitter says you should have a reason you're using remix instead the reason for remix isn't it might compete with next the reason for remix is it solves specific problems you have that next doesn't solve well that's it anyways so yeah the Shopify acquisition isn't remix blowing up and doing really well it's remix hopefully finding a place that it makes sense in isolation because next won everything else after a couple of months passed I decided to give it a try and once again I was surprised the main motto of remix is to use the web fundamentals and not an overly complex caching system like next so the mental model I needed in my head when coding remix was 10 times simpler no Global State just the URL fewer client side States move all the logic to the server and use cookies going full stack without a rest API in the middle is super easy just move your database queries to the loader function I'm curious if this goes into server components cuz this seems like they would actually really like server components leaving the Matrix then out of nowhere the truth was presented to me and I took the red pill multiple questions started emerging in my head isn't remix just like all the other old and boring Frameworks like rails LVL and jeno we've been doing the full stack web development with serers side rendering for decades but the JavaScript Mafia decided collectively that the approach was trash and moving everything to the client was the future did the same Mafia decide that ra was right all along and doing all those over-engineered monstrosities with JS Frameworks was not the right move I started questioning everything this new way of doing web development was a lot simpler and faster interesting very interesting the person who wrote this is very interesting to me because it seems like their ability to pick up on things quickly is is very refined but their historical context isn't quite deep enough to appreciate why we had this back and forth like referring to the yeah the JavaScript Mafia like we did these things for reasons and those reasons were good back end was blocking us constantly and we needed really good powerful interactions on the client side as web developers we were constantly restricted and blocked by the backend teams using things like rails using things like Jango using things like graphql and these new Solutions let us break out of that and provide better experiences to our users there's a reason that we we had the back and forth as much as we did that said let's figure out what your experience was leaving Behind these things I'm done with next and forell I reached my Tipping Point with r router here's a comprehensive list of everything wrong that forsell is pushing to next oh no I was liking this article and this is going to oh no don't tell me you think that serers side props was a better way to do no we're we're not going to get along after this what once was simple the get static props and get serers side props functions now became complex and cumbersome currently there is no specific place to add your API calls or database queries you can write them wherever you want we started mixing the business logic with UI once again after making the same mistake with PHP multiple years ago you don't have the historical context here bud you're doing so well you're doing so well to front and developers not learn from the past what happens if I delete a button you started developing in 2019 my guy uh yeah you you quit at like the worst possible Point yeah and someone just said in chat it feels you have the separation of concerns brainworm too God I I understand your experience was bad but this you haven't even said what's worse here you said that putting it other places is bad your front end should be 100% trable And replaceable no absolutely not no I I I cannot fathom how anyone has this take in 2024 our uis are why we building our backends more often than not like what what I I have to pull chat this I I feel like I'm going insane should front end be 100% disposable yes me no yeah we'll come back to this poll in a second but I just I I cannot like like that sentence is going to make it much harder for me to read the rest of this in good faith nothing that someone puts a lot of work into should be treated as 100% trable and replaceable there are so many people who have dedicated their entire careers to making incredible front ends and those front ends need a back end that works for them and as someone who spent a lot of time on both sides of the stack you can't just treat one side like it's disposable see how the poll's doing 27% said yes but most people lean man to know yeah the lesson we're learning right now and this is like an industrywide lesson is that treating front end and backend as these huge separate entities sucks and the result of that is we get these huge unnecessary layers in the middle like graphql and and don't think that's better I really don't and as someone who has moved a big company to graphql no I don't agree with this the competitive Advantage you have against your competitors is the business logic which should be completely isolated from the UI layer okay common misconception here the ability to put something somewhere is not the requirement of putting something somewhere react giving you the flexibility of putting things in different places does not mean everything falls apart immediately the same way react broke us out of MVC on the UI react server components break us out of this idea that your data comes from one place and react as a different place specifically this idea of your logic just being hidden all over your code that can happen sure that can happen almost anything though a really important blog post I would refer to here that I have a whole video about to anybody who feels this way or doesn't quite understand the point I'm trying to make I highly recommend reading this blog post specifically the section around data access layers next in forell do not recommend you just leave random database calls all over your app they expc recommend you take a place in your code base like a data folder do all of the stuff there and Export things to be used in your components so the component here would be profile equals await get profile from the data folder quickly want to show the poll results I'm surprised 25% of people agree regardless the majority of developers do not feel the front end should be treated as 100% disposable and it's crazy to think people do and this solves the problem really well like really well the ability to take your core functionality of like the way your data Works put that in a folder somewhere and then reuse it everywhere so long as you have typescript you're fine here because you'll have these responses be typees safe and you'll get an error if you make a change somewhere that breaks something somewhere else it works great especially when you compare this to how things work in remix where you don't have these same guarantees Ed loader can return anything depending on what route you're on so if you have a component that needs data you have no guarantee that component actually has that data this is objectively better in the ways that you're saying it's worse and that's why I'm so confused it feels like people who don't have the historical context see this form action inlined and immediately get super stressed out about how next is ruining everything with this collocation your ability to do this is not the enforcement that you do this and it's incredibly frustrating that people think not having one place to put your data means that everything falls apart cuz you can still choose one place nobody's stopping you from doing that anyways next is now server first which doesn't sound bad right after all it solves the SEO problem and shows fresh content to the users immediately the problem is that most of the existing next code bases relied on client side libraries like style components and a couple of global State managers what does this mean with breaking changes like this happening constantly your app becomes Legacy software in a couple of weeks instead of years more time is spent to keep all dependencies up to date rather than doing what matters shipping features I half agree on this point I think next being so server first had major problems especially at launch it was really tough to do things like have a page that fetches some data but also has a good cached static shell so you don't have to wait for a Lambda to start to see your first bites this is part of why I hate get overide props so much because it would block the entire Page's response on the slowest data fet you did the new model let you suspend things that take longer which let you have a response sooner but that first response was still blocked on a Lambda doing a cold start so for a marketing page P that sucked and if you just moved from a vanilla boring next app with the old page router to a new one using App router neither of which were doing any real data fetching the new model would be slower thankfully the introduction of partial pre-rendering combined with streaming makes it better in literally every single sense so that's the part I would have agreed with before was that next having to be on the server for anything to work sucked I agree blocking first bite on a Lambda is bad but we've worked around it and I'm really happy with the results and I think your tune will change over time as you see what we can do with these things as for the things breaking stop style components was the big one yeah that sucked I don't love style components I'm not going to sit here and pretend that I'm really sad about this loss CSS and JS was a mistake in so many ways and we are still paying up like the cost and the impact that that had I would expect to see better ways to server render style components in the future but I will also say they work in client components still as long as you're using style components in something marked use client it behaves as expected still and that's the same with all of the global State managers there is very little to any code that broke with this new model I even have an example in my bet on react video where I show code from 2014 running perfectly fine serers side with this new model there are certain libraries that do certain specific things that don't SSR well but those were a problem with the old version of next 2 so this is a confusing part for me I agree that next being are only has consequences but we've worked through a lot of those and then the rest I'm iffy on Final Point here versell hired multiple react core team members from meta this presents a serious conflict of interest because these Engineers are now allegedly shipping features that are beneficial to next instead of prioritizing the ones that could help all of the react based Frameworks Like Remix funny enough I spent a lot of time earlier in this stream planning a response to a lot of the fud here's a great tweet from Sophie who works on the react core team and notably hasn't worked at meta for a while now so they're honestly a pretty good source of unbiased stuff and they've called even me out for some of my push back before they pointed out here very importantly that the core react team has 15 people from meta and three from versel 15 from meta and three from versel also of note is that forcell didn't poach those three in the traditional sense of offering them a ton of money to come over they chose to go over because they saw a strong future of react on the server and they saw versel as the best place to do that after having tried and failed to work with other people to do the same thing as I cite in my video hopefully coming soon about the history of all this stuff the earliest versions of server components weren't anything to do with verell they were actually working with Shopify and introducing them to hydrogen which actually you should know as the author of this article because you said at the top here you're actually one of the like 15 people who ever used hydrogen so I'm really confused how you can have that take it feels like you're falling for Twitter really hard like that's my advice to the author here is honestly uninstall Twitter and go ship [ __ ] cuz it seems like you're getting really distracted in a lot of these side quests and I'm guilty of this too I'll be honest but I am very quick to close the app and get to work and ignore whatever the hell is going on when I need to go ship stuff for the PIN code base we're still using trpc v9 and Pages router and that's fine this post seems like a really talented developer who picks up on things almost too quickly falling into the Twitter and Reddit hive mind and that's sad to see CU this is a person who who clearly is able to learn things quickly this screenshot is upset that the react docs don't have a complete detail of client server stuff and that when you search for react client components and server components you get nextjs links not react Court team stuff but these same people complain that there hasn't been a new react major in so long I feel like you have to pick one between these two like react doesn't want to Major stuff that isn't ready just yet they're taking their time with it to get it right and versel has been willing to bet their entire framework on this opportunity and the followup I couldn't take it anymore this is very overd dramatized and I'm sad cuz like I really liked how this opened and I see a lot of skill in quick learning ability in this Dev and this is falling apart really fast not this video I couldn't take it anymore I said to myself you know what I'm tired of relearning the same framework over and over again and I completely disagree with the new paradigm not surprisingly other content creators are going through similar situations I I have feelings on Aaron he's fine obviously I work with Planet scale a lot Planet scale is a channel sponsor I appreciate them immensely he's not a JavaScript Dev he doesn't write JavaScript code he writes he makes videos about databases and he likes PHP a lot if this is a source you're going to looking for anti JavaScript stuff have fun but like he doesn't no same with like these are really are my friends like like I love Adam Adam's a homie I get why he made this video but he doesn't write a lot of react code and he's never really used next cuz he always builds against other people's backends yeah yeah I I feel like you were looking for people but like all these people have very different incentives and aren't like full-time JavaScript devs the same way you can find individuals who agree with you online you can not find creators who agree with you even if they don't necessarily have enough context to have those feelings I'm not saying like either these people are bad developers I would argue these videos were irresponsible of them I understand why they did them it's free clicks and you get people like this who are fresh out of boot camps following you blindly but I I don't love this and again neither of these people were ever heavy JavaScript devs I would go to people like Ayan carniato or a Tanner Lindley if you're looking for people who are like deep on these things that don't necessarily agree with my stance on them but but finding random PHP devs making clickbait videos about why they don't like JavaScript that's not helping your point here so the path to Enlightenment the tone here is falling apart fast tldr I was extremely tired after getting burnt out from all the react tools my journey for simpler web framework started here are the prerequisites I was looking for batteries included convened over config good developer experience modern perform and front end fair if I had used five Frameworks in one year I would get it but I I will never love batteries included because they'll never have all the batteries I need and now I'm doing crazy [ __ ] workarounds and if it does have all the batteries I need then it's bloated as [ __ ] so we'll argue about that but the rest I can agree with my first instinct was to take a look at the top Frameworks from the stack Overflow survey immediately I cut out from the list anything JS C and Java related weird that you're going to recognize the most popular things probably have value and then you're going to trim out a bunch of them he never had any desire to learn the last two they look ugly in for Bose so the remaining options were laravel Jango rails and Phoenix python is a language that he used during his Network engineering degree and he had a very pleasant experience jeno seemed to follow the convention over config philosophy what turned me down from It ultimately was not having a good built-in tool to work on the front end most people on Forum said they were using HTM X and Alpine however both are external dependencies that you need to install noticing a theme Here giving up on LEL was extremely hard because it had an amazing cost benefit and hundreds of official packages to handle pretty much anything a startup might need like hosting off strike payments etc for the front end they created a nura JS very simple and elegant way of keeping the high productivity and powers from LVL while while using react on the front end to be 100% honest the only reason I didn't choose rfl was because of php's syntax it looked ugly as hell with a bunch of dollar signs and arrows everywhere this I like this article so much at first and oh God now the Ruby on Rails chapter Ruby on Rails needs no introduction it's the OG of web dev Frameworks with a revolutionary build a Blog in 15 minutes which is still impressive to this day before I start ranting about all of the problems I found let's start with the good stuff similar to python Ruby is the language that you can show to non-technical people and they will understand what the software is trying to do it is by far the easiest to read and the most beautiful language I've ever seen I quickly realized that writing visually pleasing code was a priority for the rails team and that was new to me uh there are things that are readable in other languages too but yes I I will say Ruby was one of the first languages to prioritize making this easy to read not to mention that rails pretty much invented the batteries included in convention over config philosophies so it wouldn't be a problem inside one single documentation everything I needed for any type of web app was available on the front end side there is hotwire a very simple and lightweight approach to all the ux improvements provided by single page app Frameworks I've always been curious to test the limits of this Library it looks very promising oh hot wire on paper rails passed all the prere I wanted on a framework let's try it first thing I tested was the rail scaffold command and immediately I was shocked one single command generates everything I need for a CR app no way I don't like code gen I find that code gen tends to be a Band-Aid for too much config being necessary for things and that when you have a bunch of code gen tools and they become the norm in your space you end up with massively bloated things because you just keep adding it to the template once you don't have to write it you stop caring about how difficult things are or how much code is necessary for them and you just generate the world away and that terrifies me I've worked in code bases with a lot of code gen and you can never tell if something was generated or if something was written therefore finding intent of design is incredibly difficult my code gen like when I'm making a new route or something right click new file I'll Never Love These scaffolding tools they tend to result in really bloated code bases but again like as a fresh out of boot camp developer there's no way this individual has enough context to to have experienced that everything they're saying sounds great and if you know code really well maybe you don't have as much history or experience in larger code bases everything he's saying sounds entirely correct but I'm promising you once you're in the industry for a while most of these parts fall apart quickly and there's a reason we all have moved off of rails there's a reason I helped move twitch off of rails and Ember over to go graphql and typescript and that's because these problems sucked there's no code gen on the Twitch app there's no code gen for most of the twitch code bases because it doesn't help us move faster it just results in more code that does nothing anyways in node and react L to achieve the same thing you need to manually write all of the code there are no generators here and it's all a bunch of libraries like V Prisma Express react router Redux Redux thunk vus Cypress I could trim the vast majority of these especially if you're already using next you don't need V Express react router or Redux thunk I'd argue you don't even need Redux you definitely don't need Cypress and v test you probably need RTL if you're writing tests Zod no typescript comes with es lint comes with prettier sure but you should have prettier and Ruby as well like 1,000 different plugins what are you talking about you just listed a bunch and maybe even graph killer trpc yeah optional but yeah that's the cool thing though the level of complexity of your code base goes up and down depending on what you choose to bring in what you need you can build an app with vanilla next but you will want some of these things to make those specific Parts easier this is also allowed for a level of innovation not possible in these other fields like none of these depths are mandatory most of these deps aren't even necessary once you're using something like next yeah don't love that point I AG agree with the I'll steal man a bit the point you could make here is that having to decide about each one of these things is fatiguing and sucks if I am a new developer trying to build a full stack application I have to pick between V or next or Astro I have to pick Prisma drizzle or no RM I have to pick Express or whatever else you have to make decisions about these things sometimes and a lot of people don't want to a lot of people don't want to think they just want to code and rails is great for people who don't like thinking I will resist the urge to make more dhh jokes but yes you have to make decisions around your code I don't think that's necessarily a negative and I would argue your fatigue didn't come from making these decisions it came from saying yes to every single one of these decisions and then feeling burnt out as a result learning to say no is an important skill as a developer and I don't necessarily feel like this developer developed that skill yet and that's sad because they're capable of learning really quickly that's apparent through this blog post having gone through all of these pieces of Technology since 2019 is insane that's like competitive with me and I this is all I do but he doesn't know how to say no and that's part of why he's here anyways after the initial shock from rail scaffold I was shocked once again when I opened the code from the compiler somebody else made a good point I want to point out here actually too that like the tools for a lot of these things in Ruby and rails suck like their linting with rubocop is terrible go and elixir have good built-in linting now they're separate packages but they're part of the core experience they come with stuff Ruby is not a thing you should be highlighting when you mentioned es and prettier this shouldn't be in the context of them being bad and Ruby being good someone who wrote a lot of Ruby it was not in a good state with these things anyways after the initial shock from rail scaffold I was shocked once again when I opened the code from the controller oh boy death index articles is all articles show article article find I wrote a lot of Ruby I don't find this super great like what is at articles an at article they're not well defined here it seems like you're just writing these things and it just works and yeah like I I know what this is actually doing under the hood it's just this is not intuitive and to that point of like anyone can read this are you kidding no no one nobody can just read this is that all of the backend code just a couple of lines that's impossible it's so simple that it looks like a low code tool it's simple elegant and extremely readable which is something we rarely find in the JS world the next equivalent of this is probably even simpler this is basic crud one of the major issues this developer seemed to have was that all of the code for all of that functionality was exposed from the UI code so we won't do that cuz that sucks let's not do that look at that in our template we already get you started for this we have the DB with index and schema we have API let's make a new folder named data and in here we'll have was it article. TS cool so we'll take a look here we have posts so I'm not going to rename this to article because I'm lazy but theoretically obviously you could do that I won't but it's pretty trivial to do here I'm just going to copy this so we be sure we got all of the functionality and I'm going to drop that in here let's go through piece by piece the first thing we should do since these are server functions the easiest way to make these accessible everywhere the right way put a use server on top don't have to do that think it's nice so now we've done that we will export async function cool doesn't know what these things are that's fine so we will get them ourselves return DB can I import this cool look at that db. cy. posts. find money look at that here is our index function that returns all of those posts I would call this get all posts cool now we have that function now let's do the same thing here get post by ID I hate calling this show cuz this is a magic ID pram like where does this come from why why is this better I really like that ID has to be provided are using a string or a number for the ID we're using a number for it cool so we'll say ID is a number find first where I actually haven't used the new query syntax I mostly just use the old select style I actually really like the syntax let's copy paste that try it out cool it's not users it's posts or we'll say Post in this EQ function this is how they handle equality is this as clean as just passing article.in params ID here no but you have way more control of it and if you know any SQL this is much better because we actually have a you also have the ability to import EQ so I can import EQ from drizzle and I could have post. id id this is the exact same thing where equal posts. ID is equal to ID now I have get post by ID is this slightly more code sure is this code significantly clearer about where things are coming from there you go cool let's do the next one new this one is fun because there is a lot of weird implicit [ __ ] going on under the hood for that you have no idea what's coming in here when you have that so let's make this correctly export async function create oh look at that but as you've noticed this is not all correct because I don't think we can create off the query we have to insert in here we have to put in a value we're not actually using the value we got so let's use it name name cool there you go now we're inserting a post with this value A+ next create what's the difference between new and create how is this obvious article equals article. new if article. saave redirect to article else okay I wrote a lot of Ruby in my time and I don't know what any of the implicit behaviors for that are you're going to tell me that this code being autogenerated is like a good thing because this is chaos so according to chat one is GUI and one is API yeah wait till you have to debug that yeah cool so I don't like having a new and a create unless I have a reason to have these different things IDE they would be named accordingly cool edit this one will be more fun because in order to edit wait articles articlefind prams ID this doesn't do anything edit doesn't do anything what this is the default that comes out of rails when you rails Jen so are all of these just like Pages by default off of the the article model so SL article SL update sledit slre SL newow all of these are the the page and that's obnoxious yeah I just I fail to see how this is better I can demo what that would look like in the new model so we'll do that after and I I can see now immediately why people would be more frustrated edit should come with things like just having this be an endpoint like like this wouldn't do anything in that default model so I'm going to skip that because we would need a thing we actually want to do update this makes more sense cool that I can actually do export function or async function update post now look at that co-pilot just autoc completed it for me something you might notice is that co-pilot is actually a much better code generator than a bunch of existing templates async function again look at that autocomplete figuring [ __ ] out barring the lack of create CU that was a bunch of repetitive garbage here's our equivalent code 34 lines and most of it's because these break out multi-line they don't need to be async because they're returning a thing that is a promise but by making them async you're guaranteed that you'll understand that behavior when you go call it and when you edit the code doesn't matter as much but technically yes you could delete the word async from these the compiler might get angry because they're not async functions being exported but I just did it out of habit doesn't matter you can await the return I probably should no hanging promises and all cool there you go the one change you could argue for so let's compare that again to this code which by the way this code is missing so much context look at that 49 lines it's actually more code than the JavaScript equivalent even when you include the Imports the Ed server and all of the line breaks for these things and that a bunch of the behavior isn't actually encoded in here at all and as people are saying in chat it also looks really similar like this is just as readable as this is I just I don't get it and this being autogenerated kind of sucks because the intent of creating an update post might be different depending on a lot of different things like do I want to update the date when I update the name like these relationships aren't defined at all people in chat are saying this is way more readable than the Ruby one I I will admit that we're bias we're JavaScript devs this this is a non-point and it's sad to me oh but like how do you use this stuff I'll show you real quick and again we have all of that awesome type safety that you don't get in something like Ruby that just corrected me here it would have just let you blindly do post. tile and have an error the amount of little mistakes I've made that have been saved by this are incredible so here where we actually use the data posts equals await get all posts now we have an array and we can just use it and render and this isn't my business logic leaking into my UI because it's still imported from server data so it's still abstracted it's still separated the way anyone else might want to do but it's just as easy to integrate in my code one quick note for anybody watching who thinks that the use server is necessary here it's not if you wanted things to be accessible to the client like you wanted a client to be able to create a post update a post and delete a post you can put use server in those places instead and the way you make sure these functions never leak to the client is you put import server only at the top which is a very small package and by small I mean it only exists in build and now if you try to import these functions somewhere they don't belong you'll get an error that's simple result really clean I just don't get it like this is not better this also doesn't include any of the UI code at all which I'm sure we're going to go into momentarily obviously if you stuff graph kill in the middle things go to hell but the beauty of the new model is how clean it makes these things you can structure it however you want I understand that this might not have been the structure that was recommended to you before and that you were frustrated with the ones that you experienced but you can structure this however makes sense for you and this is very close to our production code for upload thing like hilariously slow so yeah good experience I my point this is stupid just a couple of lines yeah it's all it needs to be can be that in any language okay you must be thinking now this crazy react Dev from the internet said he ended up using Elixir so there must be something wrong with Ruby and you're right my Anonymous friend there are some things that annoyed me quite a lot let's talk about them first you need to address the elephant in the room moving from react plus typescript to a dynamically typed language was not easy from the moment I started writing code and no intellisense or drop down filled the code suggestions showed up on vs code yeah I would also feel blind and lost I just showed myself having my butt saved by these same tools it's a terrible feeling I could make a typo on a function name and I didn't realize it until the website was in production I know we can write tests but this is the type of mistake I want to identify immediately in my IDE not during tester deployment awesome starting to learn real production patterns here good signs another thing I thought I would like but ended up hating too much magic inside a typescript code BAS B I can click on top of any class or function go to the source and see how it's implemented on Rails where the hell do I do validation do I create a private function inside the controller is there a specific folder for this nope the correct place to do is inside the model why because that's how it works you either adopt the convention or have a hard time writing Ruby code got some bad news for you bud this is what happens when you include batteries I simply cannot develop an intuition on how everything works under the hood I have to blindly trust that the maintainer did a good job at organizing everything and to finish my frustrations I started writing front end code how do you create components part how do you find the prop types for this component there's no way to do that you need to open it up and Visually look at all the variables inside how about to exent inter activity creating States well there's Hotwire with stimulus but as you can see you need to manually create your render function doesn't figure out a way to re-render the page automatically after changing the state like react does not and again if it was more open and flexible people might have added better ways to do these things but since this is such a batteries included thing no one really challenges the Norms that way I actually see a I believe a planet scale employee this is who I think it is that uses rails for their API next for their front absolutely I'd make the argument with the new model that you can use next for your front end and still benefit from running a server that is the layer that does the fetching back and forth but absolutely agree like like rails sucks at UI like pretty hard and I I will say all of the major rails code bases I have maintained specifically opted out of using rails for the front end and use it just for standard crud yeah rails is great if you a traditional crud API as soon as you leave from that falls apart the Elixir experience will be different I'm excited to see what he has to say about that here's an example of some stimulus code which you don't need to convince us that sucks it's a miserable experience the looks are in Phoenix I have to be honest I was running low on patience I tried multiple different ecosystems and I was almost convinced to just stick with Ruby and give up till a video appeared in my YouTube recommendations oh no is this my fault please don't tell me this whole thing that I've been raging about for the past like hour now is a path I set him down oh no oh no I'm an irresponsible influencer this is my biggest fear anyways we'll see where this goes this doesn't make me like the article more this makes me feel pain hold on here we can see a react developer saying a bunch of nice things about functional programming Elixir and Phoenix live view maybe I should give it a try I have a lot of nice things to say those are really great Technologies but that's not what anyways the first thing I did was open the documentation for Elixir and Phoenix and I really enjoyed the fact that all packages are ented in the same way using hex hex is phenomenal by the way if anyone hasn't used hex take a quick look at the Ecto hex they're beautiful and this is all built in the code base for your package this is generated really nice hex has a very high bar for documenting the entire ecosystem which is dope we have nothing like this in JavaScript and pretending we do would be delusional another good thing is that you can truly learn Elixir just from reading the docks no need for an expensive course oh no the boot camp is showing I'm sorry bud you you learn too too quick to pay for courses this was a choice you you chose to learn the language through a paid course I would make the argument the reason you didn't pay for a course here is that there aren't any paid courses I haven't seen any paid courses for Elixir and if there were some I'm sure we would probably make fun of them like I don't love charging a fee for someone to learn in technology and I will admit failure from myself and from the industry that this perception of having to pay for learning resources to learn a technology exists it shouldn't I hate the idea of selling access to learning a thing especially like access to being developer that I hate I might sell courses in the future but they will never be to get a job as a developer they'll be explicitly focused on helping people already in the workforce improve specific skills that the company can pay for not to learn a new technology I hate it and I'm sorry that you've spent so much money on these paid courses that that is a failure of our industry and you deserved better Daniel I'm pumped you found that with Elixir but I I didn't realize paid courses were a theme in your experience and I'm genuinely sorry that happened I can see why that specifically would lead you down some of the crazy paths you went down then it was time to start writing code very quickly I understood that functional programming is very different from oop let's do a small comparison oh no it's going to show me a bunch of Elixir code I'm going to miss Elixir more oh no JS or con object is name object age 25 Elixir object is this thing object is math output here so the difference here that's important is that we've created a new object when we add this additional field we're not changing this thing on the left here object happens to be bound to this at the time and we are rebinding object to a new value that's created at this moment this is not a great example of things being simpler but it's a decent highlighting of of how much your brain has to break going from one to the other I love the pipe operator it's one of the coolest things ever I cannot wait for this to come to JavaScript and typescript eventually someday maybe but it takes the result from the previous thing and it passes it as the first argument to the next thing really nice I have a whole video about why I love pipe check that out if you haven't already anyways initially you might find it less readable and more complex but I promise over time makes sense well at least it did for me as a react Dev I got used to seeing multiple functions everywhere even front end components are function fun not to mention the fact that creating a class is sometimes viewed as a code smell by the JS Mafia it is but I'm aside my brain was already shaped for this new paradigm it just felt natural to me since my network engineering degree in University I had several classes about objectoriented programming but it never clicked I couldn't model complex problems into classes and objects using multiple functions to mutate a variable over time is how I model things in my mind this I fully agree with this is probably the most loudly I've agreed with the author thus far I came out of school barely even feeling like a programmer like it was my job knew I could make money doing it and I was fine at it but I didn't like it never fully felt familiar to me I didn't I certainly didn't love it and as pointed out here o is very very popular in University I didn't do any functional programming until I graduated from college and I started working at Twitch in an Elixir code base and I fell in love in days it was hilarious to me how quickly I went from barely even feeling like a programmer to loving writing functional code it clicked real hard for me and I understand these different models click or don't click for different people but I think I'm really aligned with the author here and we probably think very similarly which is why it's so painful watching them go down this path anyways how about the main framework is Phoenix batteries included convention over config yes it is it's important to note Phoenix is very much meant to be the rails of Elixir it's very very similar in many important ways to be honest the ecosystem is not the same level as rails but it's 95% there listen you an ultra specific feature Phoenix has you covered I was almost sold on Elixir two things were missing good DX and modern performant front end code good DX is a pretty big thing to be missing and I agree The Elixir d X in your editor is not quite where it is for other things especially typescript but uh yeah that's honestly one of the main reasons I haven't went back to alixir is the tooling around writing type script is just so much better yeah and Modern Performance front end code I'm excited to see how he talks about the front stuff Jose valim has announced they're experimenting with adding types to the language but it looks doesn't have them currently so he got concerned how do I get intellisense and autocomplete without types soon I discovered these features aren't necessarily related after installing the Elixir LS extension on vs code I was surprised it's possible to define a function inside a random module on a random folder import it somewhere else and get the intellisense and documentation for it I had those benefits from statically typed languages without the hassle of writing types simply amazing mostly good yeah nice that you have these types of tools but I don't think they go quite deep enough but they help a lot there's also this blog post with the set theoretic type stuff it's really cool my final concern on the front end was addressed by Phoenix live view fun fact I'm very likely the first ever production user of venix live view when we were using it internally at twitch for managing the marathon content like Bob Ross it was easier than building a whole front end an API layer just to communicate with those things we could just update the UI from a server if you're not already familiar with I view imagine if HTM X worked over websockets that's the best quick summary I can give it lets you update the HTML content of the page via a websocket connection between the client and the server so the client does a thing tells the server what it did and the server sends back the new content for the specific place on the page that it needs to change really cool stuff it was very early when I consumed it like way too early like 2017 rough idea early but it's in a pretty good spot now to the point where a newer developer is using it and enjoying it a lot this is the piece of documentation on the homepage that convinced them undefined attribute style for component app web core components table real nice compiler checks you can Define props to every component and if the types mismatch you get an error in your IDE just like react how about the ux is there a full page load whenever a user clicks on a link hell no live VI establishes a websocket connection with the client as I just said you get updates via websockets really cool stuff means that rich user experiences like trell which used to be very janky are nasty or fast no that's a big gap this depends a ton on your network latency because you don't see the update until the server sent it you can't optimistically update on the client with this model you give up a lot of the the immediacy that you get from client side State Management when you do this there is a loss we can argue all day over how big that loss is but having to wait for the server to send a response before you can change the UI is not always a great thing since we're using Websters for the UI creating live applications like Twitter takes only a couple lines of code building a real time Twitter clone in 15 minutes conclusion it's safe to say that the perfect Tex stack doesn't exist the silver bll that solves all the problems is an illusion that we keep in our minds to keep searching and building the most optimized tool however at an individual level the perfect stack does exist because each developer has preferences and you can easily find a tool that fits your criteria if you've had a similar journey to mind Perfection might be Elixir and Phoenix so give it a try maybe you'll love it just as much as I do now if you reached the end of this post you're awesome thank you so much for your time and I hope I could bring some value to your career this almost feels like an all- knowing narrator watching a very talented boot camp Dev go through 15 years of webd history in 3 years that's the vibe I get from this is this person Daniel has that like intuition to pick up on things fast so much so that he sounds like he has two to four times the experience he does because he picks up on these things really quickly there's a bunch of people like this in the community like someone like Nexel who's only I think he just turned 18 he sounds like he's been coding for 15 years which is insane and I get that vibe from here a lot but there were certain gaps and holes throughout and this piece at the end here like my immediate thought is it feels like every one of these shifts like going from next to remix going from remix to rails going from rails to Phoenix and elixir each of these shifts happened from like 3 to 6 months from the start and it sounds like you're still a bit in the honeymoon phase of Elixir I will argue that that honeymoon phase will last much longer because it's a phenomenal set of Technologies and it's a phenomenal language I love elixir in Phoenix I genuinely dearly do but I'm concerned you will realize that just like everything else it has similar limit ations you'll run into problems and you might find yourself back in react land I wish you spent the time playing with server components the same way you spent the time playing with rails I think you would have been surprised that's my thoughts on this there were definitely frustrating points as I read this but overall it was a phenomenal journey into the mind of a boot camp Dev I know a lot of y'all have had similar experiences I hope that my channel isn't encouraging more people go through this level of thrash cuz I've even made videos about why you shouldn't just change stuff constantly you should be focused on building I'll pin the video I just did about that in the corner cuz I really like it and I'm sad it didn't perform as well as I thought it would so check that out if you want better advice on how to pick Technologies and if you don't want to watch that YouTube thinks you like whatever is below it appreciate yoton thank you Daniel for giving me this awesome article to react to see you in the next one peace nerds




## Legendary Programmers _ Theo Reacts - 20240721
I've been loving big box videos lately obviously I've always loved them great dude great content but he has given me a very formal react to anything you want to I love it when you do this and I saw this video legendary programmers I've wanted to watch it since it appeared in my feed and I figured why not watch it with y'all it give big box some love so please if you're not already sub to him what the [ __ ] are you doing I don't care if you're sub to me sub to him he makes actually good content let's see what he has to say here programmers developers software Engineers most of whom including yourself are absolutely awful but there are a handful of people yes only a handful who didn't suffer from skill issues it's so sad he didn't sneak a trash Dev pick in there trash could absolutely have been stuck into that lonus t vaals a Finnish man born in the Australian summer of 1969 nice responsible for the tool you use to push your awful code as fun fact the Unix time starting point is actually Linus's birthday if you didn't know that that was a joke it is not his birthday well is a colonel on the server for your code but his biggest contribution has to be his mailing list rants Richard Matthew stalman oh stalman I have far too many stalman stories I'm surprised he condensed Linus's history into under 25 seconds that's impressive he has done so much [ __ ] to not even include the Nvidia [ __ ] you is disappointing but also you can't do swears in the first 30 seconds so I get why he didn't because he got through that so fast but like you guys know the Nvidia [ __ ] you moment right particularly funny now with how valuable Nvidia is and I'm very happy to say that uh it's the exception rather than the rule and I'm also happy to very publicly point out that Nvidia has been one of the worst trouble spot we've had with Hardware manufacturers and that is really sad because Nvidia tries to sell chips a lot of chips into the Android market and Nvidia has been the single worst company we've ever dealt with so Nvidia [ __ ] you y particularly funny now when you think about how much like the AI stuff Invidia is doing relies on the Linux ecosystem to to run all their [ __ ] and Nvidia has historically had a really rough relationship with Linux and now they're multi-billion dollar company anyways an MIT graduate that got so mad at a printer he started the open source movement combined with a certain finished kernel we can enjoy the wonderful world of Linux distributions remember it's not Linux it's Richard stalman Plus Linux but unlike Torvalds you should avoid reading stallman's personal writings John karmac with an actual Legend the the few times have disagreed with karmac have been business side stuff but for the most part him and I are like fully aligned he's he's really good if I if I disagree with karmac I'm probably the one who's wrong without him we wouldn't have the concept of 3D gaming the FPS genre and network multiplayer and a c I watched a great video recently what genre is Doom this sounds like a crazy clickbait thing like obviously it's an FPS but remember when Doom came out there was no such thing as an FPS the term didn't exist because the concept didn't exist how do you explain Doom before the term FPS exists it was actually a really interesting Deep dive in like how game genres are defined and understood and yeah aoy is a phenomenal Channel too this this is a great video highly recommend if you're nerdy about weird Game Dev history stuff like I am check that out certain game that runs on calculators microwaves as well as gut bacteria and aie you forgot about the aie art and from the gut bacteria of the world otherwise known as the nation of France fabr Bard well what a what a transition the gut bacteria of the world otherwise known as France hey they also gave us daff Punk trying to think of other things France gave us and I'm struggling thanks to him we can watch YouTube with FFM Peg compile the Linux kernel in under 15 seconds with TCC Boot and virtualize absolutely anything with qemu I don't think this dude's history is anywhere near well appreciated enough the fact that the same person made TCC qemu and FFM Peg is just unbelievable the fact that the same person made git in Linux is similarly absurd to the fact that the same person made qy mu tiny CC and FFM Peg it's kind of nuts yeah Fab is a legend for those who somehow don't know Fab Bard to him we can watch YouTube with FFM Peg compile the Linux kernel in under 15 seconds with TCC Boot and virtualize absolutely anything with qemu oh and it's all open source by the way Dennis Rich yeah like do you know how much money he could have made selling FFM Peg as a binary I I don't even want to think about it that would be nuts like before the MP3 encoder leaked that was a very expensive thing people would buy is the ability to encode an MP3 with a binary and he just gave it all away for free he he broke down so many Industries with the stuff he's built there there are multiple companies that are literally just FFM pick rappers I've almost built some of them myself like it's it's insane to imagine how much [ __ ] has been built around the things he just randomly chose to give away for free like FFM Peg is you know the meme of the like XKCD oh I actually have it right there XKCD dependency meme F of MPEG is this F of MPEG is the little stump powering media on the Internet it's insane it's actually insane how important ffmpeg is to keeping the entire web running New York has produced the Godfathers of hip-hop basketball and modern day softare for engineering there's not much I can say about Dennis Richie he invented a little known language called C what's that is it like llang but worse gross which just happened to inspire a whole generation of programming languages with the help of his buddy Ken Thompson Dennis and Ken made a little known programming language called Unix inspir I like the Little Star there I meant operating system it's crazy for me to think that big box ispite his workflow wouldn't re-record a take but I get it I don't re-record takes as I'm doing it live thankfully I have you guys here to tell me when I misspeak the thought of making videos like this is just so stressful to me it's so much work it's so much work it might seem like making a three-minute video off stream is easier than making an hourong video on stream not true at least not for me I like my videos to be conversational and to know when things are wrong I had a friend who was using my studio recently and they were filming offline and they re-recorded an hourong take four times because they had issues the first three times and that's just unbelievable to me if I if if I have to re-record something as it went wrong I just delete it little known programming language called Unix inspired a whole generation of operating systems no big deal later on Ken went on to make go but we couldn't have C or Unix without assembly and we couldn't have assembly without Kathleen Booth England is responsible for many awful things beans on toast Winston Churchill Tottenham Hotspur but I'm willing to forgive all of that thank those were some awful things all fair points big box thanks to kathle Booth the woman that primarily invented assembly and the entire concept of having an abstraction on top of machine code how I'm going to make a weird comparison I need you guys to hear me out we're going to go to skateboarding for a second imagine you're a skateboarder you have this little piece of wood with wheels and the thing people are doing is just going around in circles I'll show you what skateboarding looks like in the 80s quick I want to find an old old freestyle video I don't want Mullen cuz he doesn't count he was always just so far ahead oh a good Kevin or a Rocco yeah Rocco will be a good example here I'm going to mute so we don't get copyright struck I'm sure the audio is not allowed this is what skateboarding used to be going around in circles showing how technically you could control the board because it kind of came from dance we were copying the things we had seen in like a ballet with this piece of wood with wheels and see what we could do with it and eventually Ronnie Mullen found ways that you could make the board spin without you touching it directly that became like the Olie and the kick fli and stuff like that and if we were to go to mullen's run at the same contest that he won by the way obviously he won [ __ ] everything he did you'll notice a few things different first off the the amount of movement is significantly more but if we skim a little I'm sure he'll do an Olie or a kick flip I think he does an impossible in this one at some point too yeah and Allie airw walk that was at the time A New Concept the idea that you could pop the board into your hand the fact you could pop the board at all that you don't have to start by holding the board and pulling it up was a new idea the reason I bring this up has very little to do with Ronnie Mullen and more to do with a skater named Mark Gonzalez because he was one of the first skaters to look at a handrail like the thing that you hold on to when you're walking up and down stairs me find the clip cuz this video has one of the first ever handrail grinds in it and he was one of the first to ever think like I can go down a rail here's one of them but like the idea of wait this this thing that Ronnie Mo invented this ability to jump what if I can use that to jump on things I shouldn't be on what if the whole world is now is it not in this video I'm trying to find there's a specific clip oh here it is it was at the end this clip like the idea that you could jump onto a rail like that Was A New Concept at a point in time the fact that somebody had this thing which is the ability to jump on a skateboard they saw this thing which was a railing you would hold on to with your hand and they thought you know what I bet I can use the skateboard in the Olli as a different way to navigate the stair set and this railing think about how weird your brain has to be to understand that to come to that conclusion to realize this combination of things this rail on the wall and this skateboard that you know you can jump a little bit with that I could combine these do something new with it and then that became all of skateboarding like if you watch any of the big skateboard competitions nowadays all of the best tricks like like 95 plus% of the best tricks involve a jump a flip and then landing on a rail like a handrail as invented by Mark Gonzalez in the late ' 80s Mark Gonzalez is a creative street artist that just happened to pick skateboarding as a discipline instead of something like paint and graffiti and he is incredible so much so that I'll quickly wrap up this tangent if You' ever heard of Spike Jones the director he filmed this video this was his breakout into media in filming and directing he filmed and edited this because he was so fascinated with Mark Gonzalez's art brain that he wanted to document it and then share it with the world and one of the people he shared it with was the band Sonic Youth which had him direct a video with them and then he became the director we all now know and love the creator of her and whatnot that happened because this skater was so Innovative that it broke Spike's brain and he wanted to share it with the world hopefully you understand why I brought this up here because that is what happened here there's just a certain type of brain that sees things as they are and realizes there's a whole layer there's a foundation missing we're too deep on these parts we can build something on top just mindboggling to think how these people's brains work that they can see the way the world works and say this is a layer lower than it should be I'm going to build something on top this rail doesn't need to Exist by itself we can use this as an obstacle these Machine level Ops don't have to Exist by themselves we can build a language on top the people who think like that are the most useful people in the [ __ ] world and they rarely get noticed for it because these people are very quiet about the things they do and they need other people to Showcase their Brilliance to the world and that's what we were seeing here England is responsible for many awful things beans on toast Winston Churchill Tottenham Hots sper but I'm willing to forgive all of that thanks to Kathleen Booth the woman that primarily invented assembly and the entire concept of having an abstraction on top of machine code while we're typing away on our soy keyboards with vs code she was writing code on this but there's a certain software engineer that yeah that's just imagine seeing these machine codes the things that you're working with every day and thinking you know what we need to just abstract one layer above that that type of brain is unreal and according toan hopefully I got your name right she also pioneered the concept of async programming back in the 1940s what the [ __ ] the way these people's brains work is just unbelievable and I I these people need way more respect than they get transcended the Mortal realm he is the Messiah he is Terry Davis oh Terry oh Terry there's a spectrum I've wanted to draw for a while and I don't know what axis there is but there's an axis where on one side is John karmac and on the other side is Terry Davis and Richard stalman is much closer to Terry than he is to karmac I don't know what the spectrum is like what that axis is but I've been trying to think of it for a while but yeah there there is something there where this this range of people they're the same on one axis but they're far apart on the other and I don't know what to describe it as Terry Davis isn't a software engineer he's the chosen one to spread the gospel of Temple OS a fully-fledged open-source operating system all less than 100,000 lines of code the primin is leaning towards Davis no comment yeah the mental illness with Terry was particularly rough and I'm I'm sad that the meme of Terry has grown past the real conversation we could have had about how heartbreaking mental illness is and the fact that there can be really talented developers that have crippling mental illness we could have turned Terry's Legacy into a great conversation about that but instead it's just all memes written in his own language holy C are you tired of having skill issues that stop you from becoming a legendary developer have you tried becoming smarter this is going to be a brilliant plug and I'm going to let the whole thing play because he gave us free content it's only fair by trying out the sponsor of today's video br pre-at brilliant is an online learning platform with thousands of lessons across math and science that caters to Learners of all levels from novices to experts with brilliant you learn by doing which is scientifically proven to be the most effective way to learn brilliant does this with a range of teaching methods with interactive diagrams quizzes and experiments which is way more applicable and time efficient than watching another boring lecture brilliant also delivers lessons and digestable chunks so each lesson drills in a core concept and can be completed in a few minutes now instead of Doom scrolling on Twitter during my commute I've been using brilliant I've always been fascinated by scientific theories but I could never seem to dive deeper because I lack the fundamentals but with the scientific thinking course on brilliant I've learned so much core scientific theories that now I actually really like that he's plugging things that aren't the dev side because when Dev channels plug brilliant as a way to learn to code that scares me a bunch when Dev channels plug brilliant as a way to learn other things that they're interested in that's much cooler to me cuz like you aren't s if you don't sell brilliant as a promise of like here's how you get a job you pay for this service you learn how to code you get paid money instead it's you already are making money you're already a Dev but you're interested in these other things this service has a monthly fee you can pay and you have a better way to learn those other things you're excited about that I'm actually really cool with and I actually think this is a good brilliant plug Now Reading science-based literature comes naturally to me don't believe me to try everything brilliant has to offer for free for a full 30 days visit brilliant.org bigbox Suite the link is in the description you'll also get 20% off the annual subscription we'll have the link in our description too only fair thank you so much for brilliant for sponsoring this video and thank you for your time I am big great video as always I I [ __ ] love big box I hope you guys enjoyed that as much as I do and the opportunity to randomly tangent into skateboarding let me know if you like me tanging into skateboarding so I can do it more often until next time peace




## Let's Port A Legacy App! - 20220903
okay theo you've convinced me we're gonna rewrite our old app in the d3 stack how do i get started though it's a scary up or thing to take on i absolutely agree there like it is when you have an old app that was written in ruby on rails or you have some bad drupal deployment that's been dying for a long time how do you make the move how do you start on something that's scary thankfully most of the tools we recommend have a lot of surprisingly good solutions to work around those problems that you might run into and while i might not recommend the most traditional like granular rewrite approach there are ways where you can work with old code bases as you port essential pieces over to new and better systems i want to talk a bit about some of those approaches the benefits and negatives and what it takes to be successful in that type of creation so if any rant's gonna need some excalidra it is definitely this one so there's a a few different methods that you could pick for this i'm just gonna list them quick method a is the full rewrite this is this the classic start from scratch b this is also somewhat common is start with new start green fields for new features slow port and c which is probably going to go the most into is a partial rewrite with interop all of these solutions are pretty via or all these paths i should say are pretty viable depending on the state of the current code base the goals and the like plan that you have i think that there is a few dimensions to consider here first one is why are we are we rewriting specifically are we rewriting because we love this new tech and we don't like this old tech for some reasons uh tech or edges are unhappy it's a great reason unable to hire for current attack team is moving to slow uh current tech blocks specific things i think that edges are unhappy is a very good reason to rewrite but if it's the only reason it's a bad one generally i find that a lot of old code bases things that like the the famous like quote that i think 70 or so of the internet is still using jquery and a lot of it's using wordpress as well those solutions aren't still there because they're great they're there because those things were made completed and they kind of just sit there those projects aren't hiring new engineers very often when they do it's like one person every long while to replace someone else those systems aren't being worked on a lot so if you do need to hire somebody and you're struggling maybe at that point you rewrite maybe there's a feature that new tech enables that the old tech doesn't at that point you might consider porting but if the system's existed for a while and it's working fine it is very easy to kind of trick yourself into jumping onto a rewrite earlier than you need to and in a way that doesn't benefit you significantly however if you're trying to deliver features and your engineers are unhappy and they're moving slowly and there's some new tech that they're very excited about you should probably find a way to let them work on that thing especially if you're like a ceo cto tech lead of some form take those opportunities because nothing will get your engineers more hyped nothing will get them delivering more effectively than picking some tech they're hyped on and it working even if it doesn't work the amount of buy-in that they get from that and how good it feels is going to build a lot of trust and help maintain a lot of energy that you might have lost otherwise so i'm a big fan of letting the engineers do the rewrites and do the huge scary changes if it will help them move faster on things that still matter and they are bought in and excited about those things all of that said we need to think a lot about how we do the rewrite to make sure it benefits us in the considerations that we make here so let's take an example of an old rails app and so we have our old rails app here let's say we got eight engineers five years of working on it 800 000 lines of code 70 different routes 50 api end points so i because it's rails they're probably just serving things via the html but they might have api endpoints as well i don't want to get too strict about that don't want to distract with it so yeah we have this old rails app reasonable spec lots of code lots of routes lots to think about here they just hired a new engineer a really excited full stack app maybe somebody from my community that wants to get this code base into modern tech let's say that they're adding a new news feed or a feature that lets you play back video and they want to have a really nice comment section where things update live rails isn't going to provide a great experience for that so much of the right path depends on why you are doing the thing or why you are deciding to do the rewrite so let's say this is the code base we want a really good interactive feature something that's very app like in the behavior where there's like three routes that interact with each other you have like the news feed the video and the live comment and those are all different routes what you could do from there is build your new feature so we'll we'll make this a circle so it's uh different actually i'll just make the the box green and we'll say this new feature has uh three routes gets data i'll specify more about that after three routes two or one ts js expert to rails people learning and 20 000 llc he doesn't even need that much maybe you could get away with like 8 000 which you probably can depending on how you're building it what the code base is this could be a vdap that you mount internally this could be a nexjs app that connects to rails and serves like things there whatever makes the most sense for what you're building is going to depend a lot on how you're building i want to take a more like higher level approach where we look at a big rails app and break it down into pieces so we have this rails app and it has all these different endpoints but we want to add a new one so we want to make a new feature we could build this here we can still build this here the way that we used to or we could build this somewhere else in a new parallel stack actually i'll write this the this is such a hard thing to diagram i should have thought this one through more i normally i think of these rants a lot longer before i do them uh big rails app so in this every one of these boxes is a route i'm thinking of a route as a thing that a user goes to that serves data and html so each of these is almost like a page so we have our big rails app this rails app has let's say this is slash home slash sign in slash profile slash feed so your app has what the hell all of these endpoints in it and you want to make slash chat option one would be you take the thing you're already doing you make a new thing here slash chat just works the same way as it always did or you can take the opportunity to start up your replacement next app and this guy might only have that one box in it but it still needs sign in so when it needs sign in it can reference the sign in over here and from this point you have a few options you can use a rewrite or virtual binding of some form to have the slash chat endpoint here rewrite to your next app no rails rewrite to next arrails yeah i think i want to confuse here because rewrite doesn't mean like rewriting this thing in next it means that you're using the url itself when the request comes through to point at this other application the is somebody mentioned that this is the strangler approach it very much is you start by building a new thing to proxy requests from one specific endpoint that you're now adding to this other service yeah uh http rewrite i should i'll just say http rewrite to next cool so you http rewrite this request now let's i'm going to copy this and move it because i'm going to want to screw it that more in a bit and now let's say that the feed feels laggy and the team wants to start working on more features but the best developer for it's the one who did this rewrite and they don't want to touch the old way of doing things maybe what they might do is they'll convert this to be an api endpoint so slash feed maybe is now two parts so slash feed could be a redirect and then the other half of it in case they don't feel like rewriting the back end as well which they probably don't can be slash feed slash api and this could still live here so when you go to slash feed it could rewrite two slash or and then you have slash feed here but when you go there on that client this guy could make a request to the api for the data it needs to actually render and now you've taken this old endpoint taken the data it was returning returning that now is json instead and the feed itself the old url rewrites to be on your next app and you can go through and tell actually this might even be the point where you want to do it where you realize oh i can port profile and home in 10 minutes but sign in is going to be annoying at which point you flip the dynamic instead you make everything you can point at the next app instead i'll have slash home slash sign in and slash profile and maybe sign in since this is annoying is virtual and hits there still but then you just delete the rest kill that kill that kill this kill that guy and now you have this one old api from this other service that you're still heading for the feed you ported the pages that were pretty quick to port and you still reference the sign in from the old app because this is annoying to touch eventually someone will get to it but it's not the top priority right now but you did it here you go you just moved your big rails app over to your fancy replacement next app piece by piece by taking advantage of tools like http rewrites the ability to switch from an endpoint serving html to serving javascript on an api version of that endpoint i demonstrated like the three different ways to move here you can use a rewrite to take an existing app and port some urls over to it you can switch from returning html on the server to returning json on the server to consume that somewhere else like a next.js application and eventually once you've moved enough over you can switch to the rewrite like the new application and pick the specific urls and the specific routes that are hard to port over and rewrite the other way back somebody asked in chat what's the difference between a rewrite and a redirect a redirect sends you to a different place a rewrite sends your request to a different place but doesn't change the url so the big difference is the url doesn't change which is important because as far as your application understands there isn't another place it is in the same like uh application hope this was helpful i want to be very clear not everyone should rewrite everything but if you've decided you should for any of the reasons we talked about here this is the type of granular approach i would recommend i see a lot of others recommending things like trying to have one codebase that is both rails and nexjs or trying to build a monorepo where they port from an old dialect of javascript to modern typescript those types of rewrites can be done with a lot of effort but they are scary as hell and come with a lot of the technical debt that you're trying to get out of generally speaking the most value comes from one of these replacements when it's an actual replacement when you get to draw a clean line and start on the new thing and then build interop at like a network layer rather than into the code itself code level interop is going to prevent you from having a lot of the wins you're looking for with a rewrite like this and it's easy to fall for that trap somebody asked in youtube chat what's wrong with html over the wire nothing next is html over the wire the problem is you cannot consume html over the wire in a different application if you've decided you don't want to work in your bigrails app anymore and this sends you json or this sends you html you could like have fun with that if this is changed to send you json instead and you can consume that externally that's a much better experience hope this one was helpful i know this is a a weird rant to go on but i see a lot of people who i know would benefit from it 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




## Let's Talk About Database Performance - 20230328
databases love them hate them you probably still need them sequel no sequel graphql sequel whatever you're using it's not easy to work with and the few things that are easy to work with like Prisma come with their own gotchas it feels like when new tools are introduced that improve the developer experience with databases they often come at performance cost I would love to see a future where we don't take a performance hit just to have a better developer experience and I think I've found some tools that get us pretty close Prisma is an incredible developer experience the concept of writing a single schema in a single file that compiles out to SQL on one side and typescript on the other allowing us to write SQL as autocompleting typescript and have type safe responses and everything we would expect as full stack typescript developers right there however Prisma comes with some baggage originally Prisma was a graphql SQL translator type thing that would automatically generate a graphql API based on your SQL database kinda like asara thankfully they realize the error in their ways in most of the original Prisma team is very anti-graphql code gen tools generally they wanted to make it easier to work with SQL in your typescript I think they did it the Prisma Syntax for schemas is very nice to work with the Prisma developer experience to do migrations deploy changes work with your team overall really really good but it comes with costs specifically all the tech debt from V1 Prisma has a gigantic graphql binding within it still that is the translator between the SQL native connection layer in Rust and the typescript layer that actually runs and connects in node land the performance is not the best especially once you get into serverless land where you have to ship this giant rust binary you have to spin it up you have to connect it to typescript and you have to form a connection to the SQL database and then finally you can start making queries doing all of those things every time any request is made is really really rough and the performance shows a cold start from a brand new Next JS Lambda is rarely more than half a second I'll usually see two to three hundred milliseconds where I am which is San Francisco a cold start where you're getting some data with Prisma even on a fast database that's co-located can get as high as three seconds that's 3 000 milliseconds way more than a 10x time difference and that's just assuming you're on Lambda once you get off of Lambda and start moving to the edge Prisma can't run at all because Prisma relies on so much Native rust code and JavaScript binaries that run only in node and that dependence on both node and rust native code that's hundreds of megabytes makes it basically impossible to run Prisma on the edge without some crazy hacks and proxying and things that aren't in a great place yet thankfully an unexpected Challenger has appeared and made something that makes a lot of this way smoother I want to be very clear here the DX that Prisma provides does not exist in the stuff that we're about to talk about but I'm hoping we can change that in the near future because the goal of database.js was not the best possible developer experience it was provide The Primitives for the best possible performance in serverless and Edge runtimes okay when I filmed this I hadn't heard about drizzle before please forgive me I'll be talking all about drizzle soon I'm about to do a stream on it we'll have some videos coming soon drizzle Orem is dope the rest of the video is still relevant even if I don't mention drizzle trust me it's useful more content coming soon database.js by Planet scale is one of the most promising Technologies I have seen in the database space let's talk about it database statejs is two things Planet scale introduced one is a library you npm install and the other is an HTT based SQL endpoint on the planet scale service so you can query and mutate data from your database without actually having to connect via SQL this is a huge win for developers who are building full stack typescript stuff that don't want to eat the three second cold starts from something like Prisma because there's no connection being made which means we don't need the native code that forms the connection we don't need a native runtime like Lambda to actually spin up native binaries to make the connection we don't even need those native binaries this means that the size of my app deployed to get all the code to a user can go down from literally three to four hundred megabytes down to like a Meg which is fully able to be run on the edge this library is one of the most important pieces enabling me to start deploying applications on the edge but working on a project for a bit now video coming soon I wanted to finally cave and do a full stack create T3 app tutorial and what I found was as great as the developer experience was the performance wasn't great so we're going to open a new tab and we're going to time the performance of this site emoji.versell this is Twitter but only emojis more coming on this soon still waiting still waiting how long did that take finished 11.29 seconds are you [ __ ] kidding are you kidding I think we got hit by multiple cold starts there but now we have a really good number to use for me to do the like I made my databases like 1400 whatever X percent faster I don't have off working on the reference that I'm about to show I want to be clear about that because the clerk Edge runtime specifically for off on edge is it has a bug with buffer being included right now they're working on fixing it should be fixed by like tomorrow oh on the clerk stuff they fixed it an hour after I recorded uh yeah the Clark guys work fast can't recommend them highly enough as far as I know they're the only fully Edge ready off solution that works with all the fancy new nexjs stuff too so check them out but there is like one piece of functionality not there and I wanted to be fair about that when I do this comparison I have this one hard-coded to use my name because again the auth layer isn't working but let's did you see how much faster that was is that 170 milliseconds command shift r is 188 milliseconds like are you [ __ ] kidding it's insane actually insane yeah this is Edge based which is a huge part of the difference to be clear like a significant part we can go do a quick Benchmark playing a scale bench yeah so like and this is fetching a shitload of data this is fetching 2700 rows and it's doing it in 130 milliseconds from request to like response like full request to render time is under 500 milliseconds for a page that is interfacing with over 2 500 rows it's so much faster we're we're not talking a 10x difference we're talking a hundred X difference here and the ability to get your data on the edge without huge performance penalties is insane I am genuinely really impressed with what I'm seeing here somebody mentioned here that edge makes even more of a difference when you're not an SF it's actually a very important thing you brought up because I used to think this and when we're talking about databases in particular it's not that simple you request data from the server the server requests data from the database based on who you are and what to get database sends the data back to the server which then sends that data to you if you go far away yeah that kind of sucks that takes so long to get the first response to you especially if the server like sends you something and then gets more data and sends you more after if you're like doing streaming or something not the best what if we move the server here cool now we can get a response to the user way faster which seems great right but what if we didn't just need to make one request what if this first database request comes back with off so the first request is is this user auth and it comes back and says yes this user's auth at which point you say okay cool the user's auth I need to get more data and then you get that more data and then you send it the thing that's interesting here is the total distance traveled if the server is too far away from the database is actually much higher if you move the server close to the user and there's more than one request being made it's very easy to run into this problem if you do SQL do something else and then do more SQL within a request which is almost always going to end up happening realistically ideally every request would make one query but they're not going to they're going to make multiple and they're not going to do them as single transactions because of that it actually often makes sense to put the server as close to the database as possible and then deal with the distance of travel from the server to the user and his greatest Edge is and Edge is great it is great at getting bytes to the user as fast as possible it is not great at synchronizing the bytes correctly between the database and the user most companies are starting to recommend Regional Edge which is what versel is doing where you run Edge functions in a specific region so you still get the performance wins from Edge cold starts as well as the cost difference where Edge is just hilariously cheap compared to Lambda but you don't get the edge function being run really close to the user it's run as close as possible to the database so that you don't have to take a bigger penalty here this is probably the right decision to be determined we're still figuring all of this out in database Edge render SSR cache Lan like where do we cast things where do we fetch things where do we put things where do we return them from how do we invalidate caches all of these are still kind of open questions but in the time being your Edge function should be way closer to your server if at all possible so yeah I am blown away with the performance that I've been seeing where yes like the total distance traveled is probably pretty similar however the amount of time it takes for the server to start up is way way faster the other would actually be helpful if I do like a step-by-step how a request is made so this is the order of events if using like versus Lambda serverless traditional like what create T3 app uses what what you have to use if you're using prismo the standard so first the request for the page is enter for sale the inversal spins up a Lambda with your JS bundle Lambda runs JS bundle including Prisma bindings in Rust then Prisma bindings form database connection database query made actually there's more steps here the the rest of the steps are smaller to be fair like uh typescript calls gql Prisma middleware Prisma SQL connection receives request Prisma sends request to database database response data you'll notice this is pretty hilarious amount of steps type script receives data data sent to next crpc whatever render or format step this is like if it's next JS in your like page rendering then the render or format steps where like the actual render happens so you render a format and then send response to user and this is assuming that you're only making one query this is all of the things that happen when you make a request as a user it's a lot like a lot a lot do you know what else is a lot the number of people who are watching this video that haven't subscribed to the channel yet come on guys subscriptions are free hit that button for me appreciated a ton there are a lot of points in here where things can get really slow so the first major point of concern is here the size of this bundle I don't know how to put this other than like Prisma is expensive it's a big bundle like guaranteed over 100 Megs and that's a huge pile of code to have to be shipped to a Lambda every time a request is run and there isn't a warm Lambda already which more often they're not there won't be this sucks this is like a guaranteed penalty of at least a few hundred milliseconds on every single request to your service that isn't cached so here is like guaranteed 200 Ms plus penalty already out the gate next we have Prisma actually forming the database connection database connections aren't cheap they require a few steps of validation and verification and it is a back and forth I can't honestly say how much the penalty here would be I am not familiar enough with different like connection methods and what to expect there but 200 milliseconds is is probably generous for the cost of actually connecting to the database this whole section here is relatively cheap but still like takes time and isn't the most Pleasant thing if we go down here to the database responding let's say the this part here is the next big penalty which would be honestly I've seen some scary numbers here I would say at least 400 milliseconds depending on region and I'll say depends a lot but exponential with greater than one query where these can get slow and then the rest is relatively cheap what we end up here or with here is a guaranteed 400 millisecond penalty plus just for using Prisma on Lambda isn't the Legacy gql middleware like 20 of the issue it definitely contributes to this being so big which causes it to be slow and it also contributes to the slowness between each and every request but it's not the biggest deal it's the the size of the bundle is probably the biggest thing but the the underrated piece is requiring a connection to be made part of why database.js is so much faster is it doesn't require a connection to be made so if I was to copy over this guy and we'll redo this I should do it on the side so we can compare the sizes more easily I'll put it here for now I'll do versal date or Edge p-scale database Js so request Center for sale versal doesn't spin up a Lambda versl opens reads cached Js from Versa wow like almost all of these steps are dead I can like kill almost all of this so we'll delete all that kill this one red box that made it over database JS client instantiated database JS client past SQL string base JS client fires fetch request with that SQL Planet scale HTTP endpoint responds with data that's like a third as many data steps and data related things yeah and all these slow parts are gone that's the the real magic here that makes me so excited is the parts here that were scary performance wise are almost entirely eliminated and given that this will likely have to run on every request that's super super valuable so the result here is that I've seen as we saw at the beginning of the stream like total 11.92 seconds I'll do that as milliseconds unless it's easier and then the total here we had a few that were under 200 milliseconds so I'll just say one was like 161 Ms that's a pretty substantial difference it is not even like a super uncommon one to see like I've seen serverless systems using Prisma and running into numbers as this High pretty consistently even if I go to like so ping is fast especially like the home page flies if we go dashboard yeah that was much faster than I expected not too bad all things considered we talked a bit about the performance wins database.js offers what about the developer experience I don't want to write SQL strings and type definitions all the time when I'm accessing my database president does a great job of giving you a schema that allows you to Define your model once and then immediately have both type safe query builders for actually writing the query with autocomplete and typescript as well as having typesafe responses so when you make one of those queries you know exactly what you're going to get the experience is great and we're not quite there yet in database.js edgeland but we're getting there one of the most important pieces to get us there is a library named kiesley keisley is a query Builder created by I don't know how to pronounce your last name Sammy but Sammy is an incredibly talented developer he's been working super hard on keasley for a while now the goal of Keely is to make querying your database in typescript type safe once you've defined the types it doesn't Define the types for you but once you've defined them you get all the fancy autocomplete that we're used to we could see here await DB dot select from has the different things you can select from has the ability to do a join with other related fields all as defined in your type definitions or select specific fields and which Fields you want to join against I could fast forward the GIF and here you see they're selecting the specific fields from the things that are joined so now this is going to select the pet name or the person's first name and then the pet's name as pet name and now the result's going to be correctly typed where person ID is one and now person is going to be a properly typed thing see person.first name and fat name so cool this is dope it's not quite as convenient as Prisma I do like the syntax of Prisma a tiny bit more this is much more traditional sequally but the result is fully type safe SQL if you write the type defs but how do I use this with Planet scale and database.js well there's actually an awesome Community member huge shout out to Jacob for killing it with this project I mentioned on stream that I wanted this and it seems like he's actually using it at his company now which is dope huge shout out to Depot making Docker images way faster and pieces of tech as they do it Jacob made keasley Planet scale which is a simple binding where you can connect using database.js in kiestly it's like five lines of code to set it up and now you're good to go and you can just use keasly like you would for any other database with all these cool benefits you still have to write the type definitions which is annoying but we've actually seen some cool progress here uh right now the recommended way to get around this is some work by our good friend Nexel who uh back in November actually made a hacked up example he used Prisma for the schema and the actual type generation in database typings and Prisma migrate for actually updating the database but from there he took over with keisley he generated the types off of Prisma in the database State off of Prisma and then use keasly to actually make the queries super cool to see that he got this all working it's not the cleanest thing and you still have to do some work to make the types play together nicely but we're getting there and I definitely see a potential future where somebody either rips the schema layer from Prisma or builds a new better one just to make a better experience for writing your sequels structure in one file and getting a good developer experience as well as good performance all the pieces are here now all we need is a good schema that can be shared with these tools and we're good to go this is an open challenge anybody watching the stream and anybody watching this video there's a massive opportunity right now to combine these parts and make a Best in Class developer and user experience so if you have some time you like SQL and you want to push the boundaries of web Technologies now is a better time than ever to do it I enjoyed this rant a lot I hope you guys did too I have another database video or whatever YouTube seems to think you're gonna like here so click that if you haven't it's a good one I promise if you want more info about picking a better database I'll pin that one there thank you as always peace




## Let's Talk About The End Of FAANG - 20230216
when I was in college I was sold the promise of a dream Fang job all throughout High School I remember seeing news articles about how Google's the best place in the world to work and Facebook's now catching up too they have foosball tables and free drinks from vending machines and obviously the big Tech salaries are nice too the goal of the term Fang was to identify this group of companies that from 2010 to 2018 or so were the places all of us recent College grads wanted to work it was the thing you went to college for I honestly felt like when I was in high school I was picking my school based on where would get me to Google the fastest obviously things changed I ended up at Amazon and then twitch now running my own stuff what's interesting to me is how the mindset around Fang hasn't changed despite the industry moving so far away from the trends so let's talk a bit about what happened to Fang why all of these companies are laying off so many of their engineers and how we should approach talking about these companies I had an Amazon internship I worked at twitch I got a pretty generous stock grant that when Amazon stock skyrocketed ended up being an insane amount of money don't talk about this much but there was a point where my total comp hit 480 000 a year and I wasn't even senior that same exact comp if nothing had changed will be closer to 250k right now due to the impact of stock pricing which is just insane when you think about it that your salary can go down by almost half based on forces well outside of your control but that's the reality a lot of people are experiencing now at Fang two major things caused the chaos we are seeing now the windfall cast that tech companies were receiving and the general fear of good Engineers going to your competition for a long time Microsoft and Apple were the two hardware and software companies for computers and if an engineer didn't go to Apple they would go to Microsoft instead and there was a lot of trading between those places and the average engineer would work at the same company for like seven to twenty years now we see Engineers going to hundreds of different companies going from Big to small small to big hopping all over the place often changing jobs as much as once a year and that flexibility in the market on the engineer's side has resulted in the value prop of fan companies going down significantly I certainly know when I got my paying job it wasn't everything I was hoping for and I was working super hard to try and convince myself that it mattered when I was making impact I pushed so hard to make twitch better by being there and I had impact that I'm proud of but in the end it didn't really matter my impact did not affect my compensation or the success of the business it just affected how well I went to bed at night and how comfortable I was with the work I was doing as such when I started talking to smaller companies I found opportunities to make more money have more impact and be more satisfied with myself and a lot of the best engineers in the industry have been noticing this too well before the current state of the market to be frank around when covid was starting I know I personally changed my tune on Twitch when I didn't have the free lunches and dinners every day and the team in the office to hang out with and suddenly my job felt less like part of my identity and this important thing that was part of me and more like just a thing I did during the day like a website I would go to or the laptop I would use I felt less like a twitch engineer more like an engineer that happened to write code for twitch which gave me the freedom to realize I wasn't happy and leave I am far from the only person that had this experience and the result is a lot of people who went to these fan companies that previously would have been there for seven to twenty years ditching and exploring other opportunities this combined with the recent change in the market which has resulted in lots of these companies having stock values plummet and now they have to take a step back look at the money on the table realize they have too many employees for the amount of money they have and that's why we're seeing all of these crazy layoffs it's not because the companies are evil it's because the money isn't there anymore and the hiring decisions were based around money and Necessities that no longer exist the companies are no longer competing to keep Engineers from going to the other places they're competing to make sure they don't go out of business because their spend is too high that's a very different reality from the one we were living in especially since the fan companies were all picked based on the speed their stocks were growing that is the real reason Fang is dead the category we chose for Fang of companies whose stocks are growing really fast their stocks stopped growing they started going down really fast and as such the companies aren't hiring more they're letting go of people and the salaries the people who are still working there are going down not up this is utter chaos but it's the state of the market and it means more than ever you have to be on top of your [ __ ] and bring value to the places you go it's a lot easier to bring value in a way that is understood at smaller companies than large and even at larger companies we're seeing a trend away from a back-end team and a front-end team towards vertical teams that are focused on individual features and as such a lot of Engineers are already working on small teams like a startup they just happen to be at a big company so you can make impact in that vertical you understand how to do the Dynamics with that team you can take the tech you use there and use that at a startup and vice versa you can work at a startup learn how to build a whole thing yourself and then go to a big company and maintain that vertical within the company this architectural shift has allowed for companies to entirely change the way they're hiring and managing their teams rather than having a pile of packet and front-end Engineers they now have different feature teams focused on specific things and if a feature doesn't do well they can disperse that team across the company or let go of it entirely this shift is is resulting in an entirely different relationship between employees their teams their companies their salaries and all of this combined with the state of layoffs has resulted in dismay and distraughtness people aren't feeling great and it sucks the market is in a weird place right now I personally think Fang died when covet started but now that the stocks are going down Fang is dead dead I hope that we take this opportunity to reflect on why we're all in Tech and what jobs exist and what we want to do with ourselves because that promise we were sold as kids of getting the job at Google and being super rich and happy it was kind of a lie




## Let's Talk About The Survey - 20230621
if you aren't already familiar stack Overflow does a survey every year where they ask tens of thousands of developers what they think about current and emerging tools and Technologies it's a really good way to get an idea of where the market is for other developers like us and to generally see what technologies people are liking hating and how the industry is moving it's not meant to represent all of software devs as the majority of devs don't take surveys don't go online and do this for fun on the side so it will be biased towards enthusiasts some amount regardless it's one of the best resources we have as developers to see how the markets are going think you'll be surprised at some of what we see in here today the further Ado let's take a look I didn't realize when the survey ended so I got in a little late we went deep into Ai and ml to capture how developers are thinking oh boy most developers have a post-secondary education having some college or more interesting and most developers have attained a bachelor's degree with a quarter attaining a masters also fascinating think the most visible developers didn't need education which is why we have this assumption you don't need it but the best money you can spend to make your yourself a better programmer and easier to hire if you haven't had a programming job before the best money you could spend still is on College it's like not a popular thing to say but getting a degree is one of the best ways to increase your chances of getting a job if you have the four years and the money to spend if you can get good at programming and prove that ahead of time without going to school obviously do that but if you're struggling to get that first job and you have the opportunity to go to college and you're young like college is fine and obviously if you can drop out and get a job that's nothing to be ashamed of either but yeah having a degree is one of the best things you can do to help yourself get a job in the field now for 41 of people to have a bachelor's and then like even more beyond that is nuts okay learning to code 80 are doing online resources what a surprise I I want to understand the 20 that don't better honestly and 87 663 respondents on this question like it's like over 15 000 people who didn't say that they learn online and I want to understand them better 60 watch videos on how to do things that's crazy I knew it was high but that is nuts is there a way to break this down by age because I want to see if my assumption is that this is going to be younger but I want to know that that part's less interesting to me cool experience these are things start getting real fun crazy to think that like 50 or so of the survey has 10 plus years of experience that's pretty nuts and the most experienced programmers are in Australia that is fascinating years coding professionally is not that far off that first chart which is also cool to see developer Advocates are in the top five most Dev experience that's fascinating it makes sense because like to communicate with developers you need to understand them very well but I'm guessing most people would not have expected that or like a Dev advocacy role that isn't a programmer actually I think that generally goes here only one of these five roles would be expected to code regularly but an exec is not going to be coding much an educator is not going to be coding much and a database admin is not going to be coding much and obviously devrel isn't either so it's fascinating that the roles with the most years of experience actually that goes all the way down to here all of these roles other than the second one are not expected to program a lot one important bias to account for here before I boldly assume everything the types of people who aren't developers day to day that still fill out the survey are going to be very nerdy about programming so for a designer to fill out the stack Overflow survey they have to be nerdy enough to do that and in order to be that nerdy statistically speaking it's more likely that you have like a lot of programming excitement and knowledge in history so the average designer who fills out stack Overflow is more likely to program a lot than the average coder who does just due to the likelihood they fill this out developer type losing my voice already and we're only an hour and that's great how long have I been saying this for y'all full stack is the future the average person who doesn't code doesn't understand the difference between a back end and a front end of they don't give a [ __ ] and the more you're able to solve the problem that your users have regardless of which system it lives on the more successful you'll be as a Dev of and it seems like a lot of devs are noticing this because holy [ __ ] 33 that is more than front end and back end combined that's more than front end back end desktop Enterprise and mobile combined this is the future more engine managers than students are filling out stack Overflow is this the Tipping Point is it over is stack Overflow now for like Millennial plus does gen Z use stack Overflow that's the real question here key territories Germany I have noticed this I've noticed a pretty big German like section of even my audience on YouTube and India as well let's compare this actually to my studio so here is my YouTube audience for comparison's sake yeah 20 U.S 6.7 India 5.3 UK 5.2 us or 5.2 Germany thank you Aiden for watching all my videos multiple times to push that 1.8 female is really good for Tech YouTube I know women Tech YouTubers who are under one percent I'm actually really proud of this number and how far we have pushed it I am pushing to keep it going because women engineering have a really [ __ ] tough time and deserve better but this number is very good for Tech YouTube it was at like 0.3 for my first couple months I think they got rid of the gender demographics this year I remember people saying that on Twitter you reduced the number of demographic questions you're only asking about age yeah so we don't have the number here somebody else is my average age older the normal for Tech YouTube yes by a lot I've compared to a lot of other Tech YouTubers numbers and I shift like 10 base points up usually there is a much higher 18 to 24 split and it's closer to the 25 to 35 and then 35 Plus gets a lot smaller my age is for my channel are much older than most would expect most popular what a surprise JavaScript is one of the most popular Technologies this drop is crazy though like compared to the what was the web survey we went over before but yeah compared to the other surveys I've looked at this drop from JavaScript to typescript is very unusual if we switch to professional the Gap gets a lot closer then if we switch to learning to code the Gap gets a lot bigger interesting what's no nobody using professionally what the [ __ ] is Raku pretty sure this is like a TV thing right like I can watch Netflix on it being a programming language with Netflix built in you're good databases this one I was interested in because they also put like companies in here but they only put companies that are using like their own [ __ ] like is it testing this it is not I will say I am shocked postgres in my sequel are this close I would not have expected that wow the professional the Gap gets bigger that I also did not expect that's two surprises I know postgres is big but I thought it would be a decent bit bigger than my sequel like I I thought that it would be closer to 2x my sequel is likely more popular in terms of like the amount of data in databases running one of these Technologies overall but more projects are spun up using postgres every day by a lot I can't imagine people who are doing a survey and clicking the button for the database they use like it is surprising to me so many of them use MySQL I did not expect that elasticsearch being 14 like how many people click that button ten thousand people who did this survey said they use elasticsearch in 13 000 said Mario DB this is interesting I have a lot to think about here those learning are more likely to go with my sequel what can someone explain this to me is this just the planet scale course why are p people twice as likely to learn my sequel than postgres this is for people who are learning to code this can't just be Planet scale I have no idea what what's causing that I need to do my own research in the future that was confusing I need to stop thinking that much about it Cloud platforms resell and netlify are a lot closer there than I expected professionals but the same learning Versailles losing to netlify for learning to code that is fascinating as well as oh I know they're winning here yeah almost 50 use AWS Azure and Google Cloud are way closer than I expected Firebase below Google cloud is a little surprising to me cloudflare and Firebase being so close is also amusing digitalocean is higher up than I expected versel has more growth to do is what I'm seeing here which is exciting fly is beating render that's another one I didn't expect fly is like pretty strongly beating render here I switch to Enterprise or professional developers will render beat out fly nope yeah render is losing hard to fly that is good to know cool web Frameworks and Technologies node beating out react very slightly next is about to beat angular God damn that is impressive next is also about to beat up view for professional it already beat out view overall at least for a very Western heavy survey learning to code next is very high up this is huge angular falling this far in the learning decode section is a big deal that's like one of the biggest signs something's on the way out there are more people learning flask and asp.net than there are learning angular what game game over God damn rest in peace angular good luck with the recent changes we'll see if y'all can increase adoption again that hurts flutter being that much higher than react native and electron that scares me because that's just like bad for the future yeah this is what scares me the most that flutter is this highly overrepresented in people learning that's insane that is very bad for the future of the web and mobile like flutter God no I duh that scares me I have to do way more react native propaganda because this is not good flutter isn't native though guys I have like four videos about why flutter is terrible and I have another flutter is terrible video coming out I'll put it as simply as show me one good app that uses flutter just one other tools obviously people are using Docker it's pretty funny that Docker and npm are so close and Homebrew because that means you are using a Mac so for Homebrew to be in 22 of respondents is nuts integrated development environment via oh God that is incredible I don't think you all understand just how massive this is if you work with other developers in particular in person having most people by this much using the same editor is so nice it means things like I can use my co-worker's laptop quickly for pairing and I know how things work it means things like we can commit the vs code folder in our repo and it will install the right extensions for every developer on the team with the right settings all it makes it so much easier for me and my teams to standardize and have the best experience consistently across the team I saw someone ask about Adam Adam's formally dead so this is bad Adam like they have deprecated the editor it no longer gets updates it will soon be insecure if it isn't already you should not be using Adam it is dead Android Studio above xcode is fascinating Nano beating webstorm is hilarious did that actually yeah Nano beating webstorm yeah that is hilarious rip webstorm I won't miss you much I don't get the IntelliJ people I just I can't do it I want an editor that is as much just an editor as possible weird seeing Helix in here good for them asynchronous tools jira has half market share I hate that but markdown files beat out almost everything else which is hilarious too everyone thinks linear is this massive company and here they are sitting comfortably at two percent losing out to Microsoft planner and air table and at least base camp is dead yeah markdown for life this hurts me every time I see it brief story time I've only ever had to use teams once it was very early in team's life and I used it when I was working at twitch to call the Microsoft typescript team they booked the meeting so they sent us a link and I had to sign into the team's browser experience and in that moment swore I would never use it again for any reason it has now been four years and I have still not used it again for any reason and I'm very proud to be teams clean also Discord being so close to zoom is huge I think people have been underestimating Discord as a work tool for a while especially beating up Google meet you go to professional Google me just barely beats Discord for professional use Discord is climbing fast I think they're in a good place to take Enterprise more seriously we'll see how it goes but I I could see Discord pivoting more more heavily into like Enterprise if they add like three features low Cisco WebEx I do miss IRC being common at companies the good old days this is fascinating this high for Mac OS I did not expect the iwsl is still so painful to use I'm surprised it's that high Ubuntu beating out Android and iOS is funny goddammit Arch Arch beating out iPod I guess it's the year of the Linux iPad the year of the Linux tablet are we here the first thing to win professional versus personals Red Hat AI search tools chat GPT is the winner by a lot Bing AI is doing pretty well then Wolfram Alpha then everything else I don't care too much about all of this stuff but I am curious tab 9 is doing much better than I expected Kelly whisper is doing slightly better than I expected everything else is doing much worse than I expected co-pilot having I mean it was only 40K respondents for this but 50 response out of the 40K pretty big admired and desired so what's the difference blue is desired and red is admired this is very interesting where the dis the desire for typescript's a bit lower but the admiration is significantly higher same with rust where the desires a good bit lower but the admiration significantly higher really seems like rust has a strong like Cabin Fever effect to it Elixir has does Elixir have the widest range I think Elixir has the widest range here that is hilarious yeah four percent desired 73 admired that sounds about right not many things need Elixir and even fewer end abusing it but the few that do it's such a good language Rocco is the highest range 65 to 0.3 versus 73 to four yeah you're right it's slightly higher range for Raku God damn it I knew those guys would come back and haunt me with their damn TVs postgres is like a standard deviation ahead of everything else here that's fascinating surprised that the test didn't make it into any of the database stuff Cloud platforms pets are in for self a large proportion that use and want to continue using yeah versel is killing it here I don't know anything about hetzner but I've been hearing more about it yeah this is a good chart for knowing like where adoption is for something if your blue is far to the right your interest is growing if your red is far to the right you're converting well web Frameworks and Technologies strange that next is again less desired and more admired than react but checks out also sad to see view shift so far in admiration where people are considering leaving angulars about where I'd expect it svelte admiration is really high Phoenix which for those who don't know is the equivalent of like kind of like rails kind of like next for your Elixir apps so it's interesting to see how admired is but again Elixir that lines up interest in remix has plummeted and the admiration has gone down a decent bit too the drupal's dead it's weird to see WordPress is doing okay other Frameworks and libraries this is a section I didn't care as much about God the flutter people other tools people are more and more burnt out on npm people are more and more fine with if you're excited about V more fine with Homebrew you'll like cargo a lot that's like outstanding compared to the other stuff in here good to know the package Management in the or in the rust world seems to have people very happy vs code killing it with that high range here and everything else not as much neovim has slightly higher admiration but a lot less interest checks out asynchronous tools people really like linear even though not many are Desiring it I dislike that jira is that high for admired love that markdown as that hikes markdown is great and discord's insanely admired is it the highest admiration here 32.73 nope it's slightly losing to meet tricks but it's still very up there especially when you consider how high the interest is this shows me Discord is a real chance at killing slack like this is this is a real opportunity right now ai search tools Jesus [ __ ] that's the furthest along anything's been in here by quite a bit co-pilot same deal wow desired is higher than admired is that the case on any other thing in this chart where there's more desire than admire that's insane I just want to say the numbers to and from rust 12 000 who work with typescript want to work with rust seventeen thousand work with JavaScript want to work with rust or I hate this chart so much like the worst chart I've ever used in my life the [ __ ] postgres binding is real as is the redis one MySQL postgres is pretty strong MySQL might I hate this chart AWS is almost entirely like self eating you know this chart's [ __ ] useless I everything goes to vs code in the end top paying Technologies interesting so the thing that we don't see here if we change just a number of responses 273 people have Zig jobs there aren't cheap zig jobs yet there are only new Zig jobs and those jobs are going to be in markets that pay higher there just isn't much Zig which is why you're gonna see a bigger number there honestly the only way you can use Zig at the job is if you have been there long enough to convince the company to use Zig so all those people are going to be the highest paid at their companies so we say darts at the bottom that is hilarious that's a thing so what I'm getting from this is Zig and dart are exact opposites I'm fine with that I'm fine with a spectrum where Zig is on one side and darts on the other typescript's decently High how much higher is it than JavaScript want to get a raise for three grand just learn typescript to be clear I think this is one of the like the least useful charts because all of this is based on region and like the state of the market for different Technologies not on how much each of these things pays if you broke this down by reading it'd be much more interesting chart but they didn't do that here so that looks like dark people are getting paid more JavaScript people are getting paid significantly more this also kind of confirms my gen Z theory that gen Z uses stuck overflow a lot less because they would be the ones getting the lower pay jobs interesting about 30 don't plan to use AI for anything and the rest do I'm team AI augmentation for things like I don't want AI to write my code for me but I wanted to help me write code and somebody just said in chat chat GPT has replaced a lot of my stock overflowing or I can write a comment and it will generate code that's usually close enough to what I'm looking for and it's nice hard to imagine coding a lot without something like Chachi BT at this point because it is such a nice change it's not like essential lets me save my brain for other things AI tool sentiment very favorable favorable and different uncertain this is good to see only like four percent of people are leaning unfavorable not even like a bit over three percent are leaning unfavorable in Dev I don't see it doing these things for me but I do see it doing these things so I'm aligned with the majority of deaths I would say I'm neither trust nor distrust leaning somewhat distrust interesting that only three percent don't like it so three percent ish unfavorable 15 dish so you know here uh 25 percentage distrust so only three percent are unfavorable when 25 distrust that says a lot about how we're feeling about AI right now where we don't have to trust it to benefit from it AI for writing code is the popular thing debugging decently popular documenting getting more popular rest a lot less so this all checks out AI tools next year not very different work time employment 70 are employed 15 are independent thirteen percent are in school do they have year over year for this because I would love to see how this compares to last year in terms of the independent section in particular employment by geography the US is 68 Germany is 56 a lot higher student rate in Germany even higher student rate in India interesting most everybody's doing hybrid work now to only 16 are fully in person 40 have less than 100 employees in their organization that is something I also remember seeing a few times salary by developer type I like that this one is regional cool so I can do this one to better understand things compared to myself what's interesting with senior execs is that your comp especially for early stage stuff is going to be weird and you're going to statistically speaking there are more early stage execs than late stage because there's a lot of companies obviously big companies will have maybe five to ten execs but small companies have two to four and there's a lot more of them so the average executive the average CEO is CEO of a smaller company rather than a bigger one and I'll tell you right now is the CEO of a company I don't pay myself anywhere near this much money my salary on the books is a lot lower than this and as a result if I took this survey I'd be driving this number down however the other side of that is the number can be really high if you're one of those big companies and your executive there like I'd imagine the executive for company like Amazon is gonna have a seven digit number for their salary it's not just cash that'll be a lot of stock incentives and things but if you take four salaries under 100K and average that against one salary in the millions it makes sense how this number happens and also why it's not that far off from other things but what would be interesting is if we could see the range here of like respondents I'd imagine that the lower end here is one of the lowest ends and the higher end is obviously the highest end but this number is from a chaotic process of averaging not from an actual representation of how much money they make is it median of median salary that's even more interesting actually I would kill for the data for this one endoicing the DX makes so much more than all these other roles is that the case in other there you know DX Falls a bunch globally not a bunch but yeah follows a couple places yeah not anything in response overall yeah only 48k or 46 and a half K but yeah you're saying front end is lower yeah same price as full stack and Hardware though this is interesting yeah this is another one of those where like it's the title people have on paper and the role that they do at their company can vary a lot I can't imagine this being super accurate people are also commenting on designer being higher than front end again the reason for this is if you're a designer filling out the stack Overflow survey you're not a normal designer you're a designer that cares a lot about code and designers who care a lot about code are in a different group from the average designer they are more tuned in with their job they're more involved with their team they're more essential in a lot of ways probably because they know how to code that's why they're on stack Overflow and yes a designer who is familiar enough with code to do the stack Overflow survey is probably higher paid than your average designer they might even be higher paid than your average developer because getting a good designer that's tuned in that way really hard to find anyways if I spend too much time in that chart it's going to drive me crazy so we're gonna go to salary and experience by developer type interesting that this cuts off at seven years for the starting point data science it's an interesting chart and you can see here like yeah a designer with 13 years of experience on average is very underpaid compared to other roles like a manager with the same amount of experience is paid almost or more than double the average designer the salary and experience by language again if you're using Zig at the workplace it's because you get to choose which language you're using at your company which means you're more senior than average honestly kind of same with erlang but it has a lot of stranger biases within it I don't think like the salary to code language is going to bring much value like that's just not not a chart that we can learn too much from maybe Trends year over year but the actual like comparing two languages via their salaries is nonsense purchasing technology this is something I think a lot about I you know what I want to pull my audience actually let's do a poll let's ask the exact same question do you have influence in Tech buying decisions at work [ __ ] you just just rewrote your mono repo in Turbo and had an insane PR you have at the very least some they don't even have to use that over yep yeah that would be little to no I would argue this is dependent on company and team size but it's also dependent on how senior you are we have a good bit more influence than average so we compare these numbers here also they didn't have a question that's like unemployed are some to Great influence are like the same and little or no is a good bit smaller yeah we have good numbers here this is a big part of why this channel is so valuable and why this community is so different because the average person here has been coding for a bit and has a lot of buy-in at their jobs into the 50 unemployed here if y'all are in this community you're gonna get there really fast yes bigger companies will obviously have more red tape but at the same time bigger companies often have small teams that are their own isolated boxes that can For Better or Worse do their own stuff look at that some influence one but lots of influence is higher than little to no influence for us that is a very different chart than here and again like this is what makes our community different we're not as fun for newer developers and that's I think that's a good thing as much as it's a bad thing shortlist or investigate new tech purchases yep that makes sense where is go to Theo stream and spam his chat until somebody replies so it feels like there's thousands of people doing that one coding outside of work so tangent because I saw this come up unironically yes it might sound silly but if you're involved in the community you're involved in the Discord saying that you're part of developer communities and your resume is actually a good thing imagine that the person reading that resume also is a Theo viewer and you can talk about a random video of mine that you've both seen that is a great way to know if somebody can hold a conversation about software technology and the stuff that we do every day it might seem silly Mir if you don't have I edit Theo videos in your resume you're being stupid like seriously that should be in your resume the fact that I trust you enough both as an editor and a technical person absolutely include the fact that you're part of this community and that you spend a lot of your time hanging out learning about software Dev stuff I 100 believe this should be on your resume if you're still hunting for your first gig Maybe by your second or third Gig if you're not having issues getting your resume noticed absolutely but like if you're struggling to fill your resume I've been in Theo's server for a year and I was one of the earliest adopters of create T3 app as especially if you can also say I contributed to create T3 app that's huge that's absolutely huge so yeah like as silly as it might sound including this community in your resume is absolutely worthwhile you can say t3.gg Community member or something they'll come with a better term for it that has SEO but like just think exactly you all get it if you're the type of people that hang out in a community like this for fun like you're chilling here on a Wednesday afternoon chatting about this stuff with me put that on your resume because one of two things happens either the company you're talking to gets it and you're now taken more seriously in the interview process or the company that you're talking to doesn't get it and that job's a worse fit for you like if you apply to a company that judges you for putting this community on your resume that's not a place you want to work you can do much better I thought on that topic sorry for the tangent coding outside of work yeah again I want to test this I actually don't like this question as much I was like a general du code outside of work I guess I'll do that do you code outside of work yeah 91 of people coding outside of work yeah a little bit higher than here checks out now we're back to community cool this is a thing that we're all very experienced in visiting sites across stack Overflow overflow versus exchange I forget about stack exchange rather like also kind of a thing crazy how in the stack overflows survey 98 of people you stack Overflow who would have guessed I don't have a style I might actually have a stack Overflow account I don't use it though frequency of participation on stack Overflow this actually is a huge signal for how biased the survey is let's ask here if I participate I mean you ask a question or you give an answer this is what I expected I'm also literally never here I I wanted to do this because I want to highlight how biased the survey is in the sense that it's it's a unique demographic of people even within stack Overflow users it is a small subset who answer questions regularly for for reference I wanted to do the survey I only knew the survey was live because Prime did a video about it and when I went to do it it was already closed because I don't use stack Overflow enough to notice the survey is live so the people who use it enough to notice the survey are a biased subset of users and I just wanted to numerically prove that by pointing out again from from my biased audience of the 600 or so people here right now 80 don't answer questions versus 20 here this is biased towards people who answer questions on stack Overflow which is a very weird set of people and obviously they're going to feel like they're part of the community professional developers productivity impacts there's a professional development survey 86 are ICS not managers very interesting that only like 25 are under five years and most have way more professional work experience I'd imagine ICS are slightly higher and then managers are slightly longer yeah that makes sense ooh this is interesting I have interactions with people outside of my immediate team so then I see it goes down but not a lot I know which system or resource knowledge stylist from getting information across the organization surprise somebody disagree this is a good set of questions around and how resource people feel with information at their job yeah ability to find knowledge information is the name of the chart that makes sense waiting for answers to questions often interrupts my workflow yep strongly agree here interesting I don't like how this one's laid out because some of the questions are positive some of them are negative and it's it's hard to parse quickly frequency of productivity frictions countering knowledge silos at work big and painful one to two times a week versus never interesting need help from people outside of the team one or two times a week or you're talking to people outside of your immediate team much more common overall people who are doing that never that's crazy 10 of people never interact people outside of the team Daily Times been searching for answers what do we mean by searching for answers because I my whole job is searching for answers like what is life and how much will people pay for it but yeah this is per day imagine IC is going to be huh I did not expect that shift it's a weird question to answer Daily Times but answering questions I'd imagine field managers much higher yep very interesting developer experience obviously CI being high is expected but only 71 I am amazed that CI is not 90 Plus that scares me honestly that's the end that was a fascinating survey the desired versus admired section was really really interesting and I learned a lot about how people are viewing different languages and Technologies overall this was definitely a biased survey through the the weird nature of your average stack Overflow reply guy but overall I feel like this is but overall I feel like there's a lot of good info in here and I might not have learned too much but I've confirmed a few things I was believing before and am really excited about the future of all these Technologies next year let's make sure typescript destroys the JavaScript numbers but for now let's be happy with the survey and everything we learned with it thank you guys as always I'll pin a video here that's a much longer one with uh what I would consider a more interesting survey that I went over actually with Ryan carniado the creator of solid and Fred K shot the creator of Astro so check that out if you haven't already it's a great video thank you as always peace notes




## Let's Talk About TypeScript's Worst Feature - 20230103
typescript's great it's not perfect there's a handful of features that are best avoided one in particular that it's time we stop using is enums let's talk about it how do I even get started about enums they seem like a good idea because they are in a lot of other languages the general idea of an enum is a structure that has a set of valid values maybe you have a user roles enum where the roles are user subscriber admin and staff so here's an example of a pretty common like thing you would use an enum for the problem here is user role.user is zero by default so if I was to if user role dot user console.log this will never get hit because user role.user is zero and this is falsy that is incredibly cursed in and out of itself is enough of a reason to never use Enos the problem here and this is like why I'm so frustrated is we all seem scared of the thing that works well here and when you move to this it actually ends up being a much better developer experience the way I would do use a role oh look at that look at co-pilot smarter than the average typescript Dev showing us the right way to do this the thing you lose is the dot syntax so I can't go over this list and access every value because if I had like I wanted a drop down and I want to do something for each of these values I can't use a role dot four each because this isn't a real thing so how do I get access to all of these values actually a cool way to do this const user roles equals we'll do an array come on copilot there we go and then I can do type user role equals ta-da now I have a strict array of all the possible values and I can even as const this and now it's guaranteed these three values those are all the user roles and I have a type of this which is the user or admin or staff so now type user can have I need for the equals I'm getting my brain plagued by the the world of enums can have roll which is user role and also in here const data equals user roles.map look at that and it automatically Auto completed that for me so much easier to work with so much more reliable if you need access to the values in your enum so you can iterate on them throw them in a list if you don't you can just Define a type or a string literal type and here you could is how you infer the types off of this very super easily generally speaking almost every time I've seen an enum being used one of these two patterns makes more sense the array for iteration and the string literal type for naught I know this is more typescript than you might be used to but it is so much easier to work with the values when you ignore the weird behaviors of enums by throwing them out entirely keep an eye out for the new Matt pokek video that will be coming out soon also talking about why you shouldn't use enums I have another video titled you might be using typescript wrong that's talking about other topics like this if you like these short typescript Pro tip videos let me know so I can make more of them in the future YouTube seems to think you're gonna like whatever video is putting there so give that a watch and if for some reason you're not subscribed come on subscriptions are free they help the channel out a ton and we're on that grind to 100K thank you a ton see in the next one peace nerds




## Let's Talk About Typing Speed - 20230419
typing fast is fun I have a horrifyingly bad penmanship I almost got held back in elementary school because of how bad my penmanship is so my mom had me typing early I was playing keyboard typing games when I was young I had my mom show me where to put my hands like the first time I ever typed and they kind of stayed there the result was it's always an okay typer there were points where I could break 150 I think I even broke 160 a few times but I never cared too much it wasn't my focus and honestly one of the funniest moments for me is when I got my first MacBook and thought I was going to need my mechanical keyboard and miss it a bunch and I started typing on my MacBook Air it was slightly faster than I was on my fancy mechanical keyboard I had built myself broke my heart here we are to this day the wireless magic keyboard faster than I've ever been I don't practice my typing I honestly do most of my typing on my laptop on my couch I don't do it sitting here at a desk what I wanted to do right now is a typing test with a kind of Jank stream ready setup that's going to have a bunch of latency going for speed which I haven't done in years to see how we do so let's see how fast I can go and I don't have enough desk space to put my keyboard where I want it for this get the latency is killing me so I'm not using my laptop screen because it's too dim I'm using the mirror here and there's a ton of latency whenever I make a mistake it's going to drive me insane uh gotta try looking at the dark screen that was awful I would pause when I made a mistake but like I peaked at 155 . [Music] God damn it restart doesn't do the same one I hate this one on the other one if you hit replay it will give you the same one on quote it doesn't like to do that somebody else point out the lag yeah I definitely am feeling lag as I'm typing on this and I did it last time I tried y'all want to see me try on my desktop with my mechanical see if I'm faster or not yeah I hate typing on Mechanicals now hype on that one I hate this one I hate mechanical keyboards well I see people in chat who are now trying on their MacBook keyboards and are surprised at how fast they go somebody broke 171 on their MacBook that's nuts yeah I can barely break 130 on a desktop keyboard with like a mechanical for the tangent about different keyboards and such the point I'm here mostly to make is that your typing speed kinda stops mattering after a point even a hundred words per minute it basically stops mattering after 80 you're gonna type as fast as you can think it's fun to do it's fun to flex like I'll sit here and make jokes about it sure but just because I can type faster than you doesn't mean I can code faster than you in fact those things have nothing to do with each other if you're not quite at 80 yet I'd put the effort in to get there make sure your hands are placed correctly on the keyboard and put a little bit of time into practicing once you're confidently at 80 plus it really doesn't matter that much everyone should be able to type fast enough to not feel hampered by their keyboard but nobody needs to type so fast they can type like beyond the speed of thought stop caring so much about your keyboard typing speeds focus more on your speed to deliver things after you've thought of them some of the best programmers I know are still Peck typers really doesn't matter too much hope this was helpful YouTube seems to think you're gonna like that video so check it out if you haven't and thanks Smooth Operator for making me wear a hoodie this whole video because God damn I hate that




## Let's Talk About _Scale_ - 20221218
hey Theo I love your Tech but does it scale yeah it does but it depends on what you mean by scale I think scale is one of the least understood terms the more I hear it come up especially when people ask questions like does it scale we're gonna rant a bit about scale because I don't think you all understand it and I think we can do better what even is scale I personally like to try and think of scale in four different buckets there is the traditional one that we think about a lot which is number of requests before buckling so if you have a server let's say it's a web server that takes in requests serves web pages serves apis whatever like that scale often means how many requests can that take before it crashes how many users can be hitting that service asking for information before it chokes and gives up and dies either it blocks requests it fails to respond to some users or just outright fails that's the traditional definition that I'm sure a lot of you mean when you say scale it's a few other definitions too though like number of devs who can work at once if I have a code base that scales to a large number of users and then we have the large number of users I might now need more developers to keep up with the features and the things that those users need because of that there's a whole different type of scale there something that might serve millions of users might be really hard for a second developer to start contributing to like if we don't have a good deployment mechanism and a good way to roll out changes and we bring on a new Junior developer who can't understand the weird way we do things that's not scaling either and if our changes are conflicting with each other and causing us to not be able to meet our users needs effectively as the number of developers scales up your failing scale in those ways too there's also the number of features in the code base this is generally like how much code there is to deal with the more code you have the harder things get it even in something like typescript in the T3 stack if you have enough features in a code base using typescript and you don't have a good project reference separation which is a manual way to draw lines and boundaries within typescript you will quickly run into problems where the typescript compiler in the typescript server can't keep track of all the typescript because there's just too much code for it to process and now your editor experience is going to start falling apart that's a very different type of scale than either of the other two but once you have a big enough code base with enough features within it you'll start hitting problems with those types of scale as well and then fourth this is one that Prime likes to talk about a lot that I think is important number of dollars per request so every time a user makes a request how much money does that cost to process and respond to that request if you have a large number of users this might go up linearly this might go up exponentially or it might just not go up at all and depending on which of those it does you either canner can't handle the amount of money that your service costs that is a very important aspect of scale to think about so taking a look at these what do we do to solve these types of scale well in the T3 stack we have pretty good Solutions I'm going to copy this and move it down so what about T3 stack well in the T3 stack we have solutions to a lot of these things for a number of requests before buckling we have a fun one serverless serverless means we don't worry about the number of requests in the same way you would if you had a server in serverless each request gets its own instance to resolve it we don't think about how many servers can process how many requests because each request gets processed when it is made by a server that is spun up when the request is made because of that our Tech scales effectively infinitely in this first category however comes at a slightly higher cost do serverless than server-based deployments in your trading the number of dollars for the number of requests before you Buckle to an extent there are balances to be had there but those end up costing more money engineering wise but generally speaking serverless allows us to not worry anywhere near as much about how many requests our service can process before it buckles because we spin up more when we need to and they die when you don't number of devs who can work on something at once I think typescript is a great example of something that helps with this if you have a vanilla JavaScript code base and more than one person working on it you're going to start running into all sorts of issues especially when you want to rename a field or move something from one place to another without contracts type systems and safety to guarantee that the code you're writing is hitting things that exist and is honoring the systems that other Engineers have made something like typescript is almost necessary for your code base to continue scaling as more developers are working within it number three there's a lot of new things that are taking this one on it's actually been really cool to see I think turbo repo is probably the biggest one there's also project references NTS what turbo repo does is allows you to break your project up into small pieces and then cache the building for each of those and have a much better experience with a gigantic code base where each piece is cached along the way there's also turbo pack which promises to go even further with this by caching individual files and their outputs so you don't have to recompile each file in a project when you change that individual project or project reference all of these things will make it so your code base can scale much further with the number of features before the developer experience starts to suffer now when it comes to the number of request or dollars per request this is where we start talking about things like rust golang Etc I know a lot of people love to ask why are you using JavaScript it doesn't scale in three of these four ways JavaScript scale is fine because serverless means JavaScript scales typescript means JavaScript scales turbo repo project differences and all these things mean that typescript's experience scales too because of all this JavaScript does scale until you're optimizing for this once your goal is to optimize for amount of dollars spent per request because you have so many requests that they're costing you millions of dollars at that point you hire a primogen because you've hit the line of prime the line of primogen is when the cost of your service is now massive because of how expensive your requests are and once you pass that point you hire him and at which point he can rewrite your service and rust or going or whatever else which will bring your costs back down to a reasonable point and ideally by hiring primogen he will save you more money than you were spending on those requests so to be very formal if you are not spending half a million dollars or more on requests that could theoretically be reduced to zero and you do not have over half a million dollars a year of infrastructure cost that could be reduced by someone like primagen don't hire them do not adopt the technologies that help with cost scaling until you have cost scaling problems or are certain you will in the very near future it is expensive to adopt those Solutions because they cost more development time and developer wise more expensive developers will need to take more time to build with those things that scale cost wise because you're trading the expense of those developers in their time for the expense of running that code and until that trade makes Financial sense it's probably not a good idea to make it and you would be amazed at how rare it is that it does make sense there are lots of big companies where it does like the Netflix is in the Googles of the world but even for new projects at companies like Netflix and Google until they know the new Pro product is a good product that users love and will continue using building in that way might not make sense because of how much more expensive it is to do so please be considerate when you're making decisions like this think you'll be surprised at how often the work you're doing does actually scale just fine in all of the ways that matter other than cost and chances are you're not having cost scaling problems just yet and if you are you already know the solution and you already know what to do from there hope this round was helpful should be a video being recommended right there subscribe if you haven't subscriptions are free on Twitch subscriptions cost five bucks a month but if you pay for that on Twitch you get access to the sub only channel in the Discord where you can talk with me and the crew have all sorts of fun stuff anyways this is a good video I'm really proud of it hit the like button if you haven't take a look at the video YouTube thinks you'll like right here I'll see you in the next one these notes




## Life After SQL (EdgeDB Is Fascinating) - 20240503
sql's been around for an incredibly long time sadly it hasn't been challenged meaningfully well kind of we've had Solutions like Dynamo DB and even things like that have went really far out of the relational Direction saying hey we can be way faster if we just store data and you call it by key there were lots of solutions that have leaned out of the idea of relational models and into this idea of just storing data but no one's really went past what SQL did if you had SQL in the middle and you had and Dynamo on one side we never really had something on the other side we never saw people meaningfully challenging how could we be more relational there have been some experiments with fetching data in graphs like a degraph back in the day but not enough that is kind of starting to change but before we talk about that change I need to do two important disclosures first the company we're about to talk about is a company that I've been advising on and off for like a year now the founder is a good friend he was one of the first people to see what I was doing on YouTube and reach out and as such I've been impressed with what they're doing and excited to help out where I can the second thing is I'm not actually using hgdb on any projects yet normally when I'm talking about these things I've done my due diligence and went deep in using and shipping the product especially when it's coming to things like my channel sponsors these guys are not a sponsor they're not paying me to talk about this I'm under no obligation to do such I just want to share it because I'm genuinely interested so those are my disclosures those are my disclaimers yes if they succeed I get a bit of a Payday but if they fail which statistically speaking they will not a big deal at all so I just wanted to show you guys why I think they're cool and what they're doing welcome to EDG DB a future past sequel I I okay what one more small disclaimer I wrote this anyways let's face it SQL is not good enough we wanted a database with hierarchal queries Advanced Data modeling and great DX there were none so we built EDG DB based on postgress and 100% open source it's become so much more and yes that's an important detail it is 100% open source not the upload thing Style Open Source where all the code you run is open source and all the code we run is not proper full true open source n plus1 solved this I I love this example because it shows just how different the experience is querying complex data inside of edge ql in in EDG DB based thing also one more thing before I mention it eddb has nothing to do with the edge so the idea of edge compute of distributed locations all of those things nothing to do with any of it it's a terrible name I've been telling the founder for a long time it should be renamed it's probably too late now yeah hgdb is the wrong name for this database so ignore that part cool so here's the compar that I wanted to Showcase here we have a pretty traditional sequel query where we have we want to select all of these actors names from movies and then also include the mean score from the reviews so it in Sequel kind of sucks we select the movie title then we have to make a sub selection where we select the average rating from reviews where the ID matches as average rating we also have to select from the aggregate from person name as V from actor yeah no this is this is why people think squl is hard because like this is normal if you want to use SQL right they even have a drizzle example which I love that they did this and they did this properly too where we have the DB select ID using the movie ID average rating from schema reviews Group by this where these things are equal prepare movie rating then we have the movie query where we similarly find first also all of these are separate queries so these all have to run separately you can wrap them in a transaction if you want them to to run at once but even then it's two different queries you should you can probably understand how this code works but it's chaos that you have to do all these things versus in hql you select movie you want the title you want the subfield actors which is a mapping a relational mapping with name and rating which is assigned the math mean of the reviews do score then you filter by the ID that's it where things get even more fun is their typescript because they are fully typesafe and actually have been huge for me in better understanding the relationships between a query Builder a schema definition and the connection layer that exists within your query tools so yeah here we have e. prams where we have an ID that is a uu ID and we use this dollar sign as like a helper throughout e. select e up movie movie we want the title we want the actors with name true again this is typescript so if you pass e movie and title doesn't exist you'll get a type error here very handy and we're using this e eddb helper to do e.m. mean we just pass it the movie. reviews. score object that comes from this function here then we filter e. op movie ID is equal to dollar sign. ID the dollar sign equal as the thing you pass here for the operation I initially hated but honestly I much prefer it now to the drizzle EQ LT GT and the 15 plus Imports you have to do in drizzle to do that type of math the idea of one helper you just pass a string makes it more readable consistent and less chaotic to maintain I actually really like the DX and the syntax here overall I'm genuinely impressed another important piece is how hilariously fast it is compared to other Solutions in full stack and this is with the fact that drizzles over twice as fast as Prisma that's how you know these benchmarks are somewhat accurate because prisma's hilariously slow compared to drizzle then you see edgb you're like oh oh that's why you made this interesting that did remind me of one other thing I want to call it before we go further this based on postgress I pushed back on this being included here I lean towards it not being spoken too loudly about because it's not based on postgress in the sense that it's there for anyone to use the same way with like upload thing we are based on S3 but S3 is an implementation detail of how it works you're not going to be querying this postest database that's underneath eddb directly in any way shape or form postgress is just the thing that happens to store that data underneath it is not meant to be a layer that you're actually competing with it's just meant to to be there not to call not to access but to be the best base point for them to start building on top of the postgress here is an implementation detail so don't pick this because it's postgress pick this because it's an alternative to SQL that is built on top of existing well trusted standards but don't expect to get access to postgress because you're using HTV doesn't work that way they also suggest here that you can add latency to see how these things compare when you have much less latency between the back end of the DB which is pretty cool here are some quotes including Mine by the way GE mod is an early investor and pretty excited about HGB as well HGB fixes fundamental flaws of SQL and Legacy DBS in serverless the perfect fit for next in versell it's a longtime hater of mango I'm pumped to see a real challenge of her sequel that goes the other direction relations are good yep yep you get the idea good quotes oh of course David Kramer sunk his way in here too the most high- tech companies in the world run graph architectures on top of SQL now you too can be high-tech H clever in the cloud this is the big thing that they just launched too the ability to spin up with their cloud in a free tier without having to host the database yourself up until recently you actually had to host hdb yourself cuz they were so focused on the tech they weren't focused on the hosting side so you just run their dock image wherever you wanted to now you can just use their Cloud which is very exciting it means I'll actually probably try the product which I probably wouldn't have before if I'm being totally honest God this part's so cool the idea of an iceberg visual to represent this is actually dope and I love this so the top level they have the things that are obvious with built-in UI o and RG I hate the building graphql I I've called them out so many times for this it just it gives the wrong impression and doesn't get customers you actually want I I don't think the built-in graph Q is a good idea at all the fact that they can store vectors seamlessly is dope that's again great for the AI people effortless Json access policies are again annoying and a necessary evil when you have things like the built-in graphql and you're letting people use your database as a back end which you shouldn't but they should be tunneling that's actually a really cool one a tangent I want to go on is my own personal experience with edgb it helped me a lot in my understanding of the parts that exist in tools like this so you see here there's a lot of pieces before I played with and learned a bit more about eddb I was a big Prisma fan but I didn't really understand the relationship between these parts of Prisma because it kind of just felt like one big thing what I learned with eddb there is like roughly four core parts to the typescript experience around something like eddb or even something like keyley drizzle or as I was saying before Prisma you have the client which is the thing that actually connects to the database you have the query Builder which is how you write the queries and do it in a way that's omic in your language you have the schema which is the thing that actually defines what objects exist in your database and then you have something that links the query Builder to that definition which is not easy to do the way Prisma does this is there's a Code gen step whenever you make a change in the Prisma file that generates new type definitions that override the Prisma type definitions in the actual Prisma node module yes when you're running Prisma that is a post-install step where rewrites a bunch of the type definitions in the node module based on your Prisma schema file which is chaotic and having all these things so tied together made it way more fragile and even made things like your build pipeline less reliable eddb was one of the first things I saw that properly separated these parts where you had the query Builder the client the generator and the schema all his separate pieces that had a relationship with each other which was actually really nice and helped me understand how different those parts were it also helped me appreciate what drizzle was doing so much more when I saw how they were separating things and how they were actually acknowledging that these parts were different and also with Drizzle they moved the schema into your type script so they didn't have to do a code gen step instead hgdb still has code gen because hdb's really focus on their own alternative schema and their schema is dope so I totally get why they would do that if we hop over to their database section we can see the schema definitions which are really cool type movie required title string required director person type person required name String how cool is that this just reads well it's easy to work with it feels like traditional typescript type defs but now you can use the esdl the eddb schema language schema definition language I think what it stands for specifically they even have vs code and other even Vim highlighting cool awesome the important piece is that you can generate type definitions based on this and then use those in the querier when you're building queries and then hitting the client with those you can use this as a source of information for all of that awesome everything should have something like this I love what I'm doing with Drizzle and the type definitions in the schema being part of my type script but it's not as flexible as its own language and I do kind of miss having something like the Prisma schema that lets you define it all in one place some hype they went that way and then again you create the migrations and then actually run them then you generate the type definitions based on it as you be create client main a wait client to execute and they're just writing this as a string here for the first demo npx eddb generate interfaces this gives you movie in DB schema interfaces and other things too so now you can await client. query single movie and do this here I will say this is scary because you could probably technically speaking put a different type definition here than you're actually calling for here it' be very hard for them to type check that to be correct because the inference is based on what you put there regardless nice where things get really fun though is when you're actually using a query Builder like here sgb create client e. select e. mov now it knows that from the schema that we've generated and everything behaves fully type safe with typescript syntax and behaviors as you would expect really cool I love how they separated these things I love they called out how they separated these things if you guys know uh Colin McDowell the creator of Zod he was involved really early in helping shape these sdks to make them as good as they are makes a lot of sense that this feels like writing trpc in a lot of ways really cool stuff oh another huge thing no null you look curious about the nulls especially for things like sets so here is the section there is no null there is no null value in hgdb unlike in many other databases or programming languages this is deliberate as null scalers create all sorts of problems when introducing other data and operations they have a whole blog post here this is the we can do better than SQL I love this article I should do a whole video about this let me know in the comments if you agree yeah null a bag of surprises in some cases of inadequate handling of missing information the problem is incorrectly perceived to be a problem of the relational model in fact the problem stems from inadequacies of SQL and is non-conformance to the relational model it has been extensively argued that null is the biggest misfeature of SQL here's a bunch of citations from others talking all about that in fact the handling of null in contemporary SQL implementations is so surprising inconsistent and dangerous that this topic deserves a separate section null is so special that it's not equal to anything including itself yeah null does not equal null in fact almost any operation on null will return null and the effect may be very subtle so if we have this insert into table that has a and b as the like two types we're inserting values 1 1 2 2 null 3 we return a and b 1 2 3 there but then if we select from X where a is not in one comma null chaos but in some cases null is equal to itself like in distinct so you can't do distinct on a null because if there's multiple it won't be distinct but if you're trying to look for null you can't do that either yeah I I have generally avoided these things because I just use an orm1 things got this complex but uh God yeah much of the traditional logic and Boolean algebra rules cannot be safely applied to SQL Boolean expressions in the presence of null for example the law of excluded middle P or not P does not evaluate a true if p is null yeah you got the idea I'll be sure to link this in the description if you want to read more but again let me know in the comments I should do a whole video about it cuz it is really cool stuff in postgress division by zero is an exception where in my sequel it returns null I hate this why why did we let sand think it's been a mistake since so their solution is instead of the null scalar value eddb uses an empty set to denote the absence of data the advantage of using the empty set is that it works exactly like every other set in every way Its Behavior is well defined and existant across all operators and functions for example the count function which Returns the number of elements in a set works just as well with an empty set we run this get back zero because there's nothing in the set the exists operator returns false if the says empty and true otherwise cool usually it is necessary to provide the type of empty set using a cast when the type is relevant and cannot be assumed that makes sense to if you're setting it to empty you need to give it a type so we know when it's not empty what it will be there's no in context to indicate the intended type of the empty set so Edge ql will not accept the input unless the empty set is given a cast like n32 or 64 add an N64 okay um invalid error operator Union cannot yeah because we don't know the type we gave it empty so I'll do n32 because I like to break the rules cool that's dope also I love these little Runners for testing these things in line here super cool you get the idea they they've handled this well they've thought it through and they've even made docs where you can play with it yourself so nice SQL support reusable schemas set based protocol Auto Recovery oh a raisin tupal is being built in at a database level is so nice I've done so much stupid with ar Rays so many nice things that they've snuck into this release I am hyped hdb looks genuinely really exciting I've been keeping an eye on them for a while so much so that I'm now an adviser I'm excited to see what they do but that's just me I'm curious what you guys think especially since you're not officially advisers of the company so let me know in the comments is eddb exciting scary different weird whatever let us know I'll be sure the CEO sees all of your comments because he wants to know this feedback too let me know what you guys are thinking until next time peace nerds




## Low Code Scares Me - 20240130
why I'm skeptical of low code this is an article I saw by Nick seali I'm skeptical of low code when I was doing some software Consulting I would get clients who had been drawn to low code all the time for the promise of fast development time and low maintenance cost the client ended up not being happy for one of a few reasons the first reason is that they wanted truly custom functionality that the low code solution could not handle a lot of low code Solutions seem to hit about 80% of a company's requirement but then there's to 20% that the tool cannot do out of the box low code tool marketers are pretty good at convincing EXA the tool can knock out the remaining 20% with ease usually just by saying the tool can knock out the other 20% with ease the reality ends up being the remaining 20% requires significant and potentially impossible customization companies are then forced to choose is the tools out of the box functionality close enough or are we going to have to try and hack the tool up to make it fit our exact use case this isn't an exact one to one but I think about the xkcd bird skit all the time when a user takes a photo they have to check whether they were in a national park sure easy GIS hup give me a few hours and check whether the photos of a bird I'll need a research team in 5 years in CS could be hard to explain the difference between the easy and the virtually impossible the reason that is relevant here is that the execs probably don't code so when a salesperson at another company that doesn't code claims that this other 20% is easy and an exec who also doesn't code he's that both assume it's true because they don't understand how complex those things are it's difficult thankfully there are engineers at least here to call that out and I'm sure we're all familiar with this as coders that getting the first 80 90% of a project is actually the easy part and that last 10 to 20% is often where most of the difficulty is that last 10% takes half or more of your time as an engineer so having a tool that does that first 80 90% might sound incredible but you're not actually going to save that much money so let's take a look at the other points this author made point two they implemented a bunch of custom functionality in a product specific or even proprietary language and now their pool of potential developer Talent is Tiny often companies will opt to try to hack a low code tool up to match 100% of its requirements what they end up with is a bunch of custom code in a Spoke language that a very small number of people understand now rather than recruiting from a large pool of ubiquitous open source developers the company has to find maintainers who are very specialized in this specific tool if you want proof of this Google Search webflow engineer there are even YouTube channels with full-time people that do nothing but make videos about web flow which is an alternative way to build your homepage for your website what yeah there's a whole world of these low code tool Specialists that has to exist as these tools have gotten more and more popular and as much as I love that these things have made Dev more accessible I do fear that the almost forced niching that they encourage has prevented a lot of people from breaking out and becoming more traditional developers like I know people who'd be incredible traditional web or even fullstack devs that early in their career got super shoehorned into something like Shopify and now they're Shopify Engineers instead of full stack Engineers so yeah that's a a very real problem with the proprietary nature of these tools you end up having to hire Specialists for those tools instead of Engineers that can Flex around and use different things point three upgrades to the low code platform would break their custom implementations this I've seen a lot of where the platform makes an update and now the thing you were using before just stops working upgrading software without breaking things that interface with it is hard low code tools have to do this with an arbitrary code accomplishing use cases for which the low code tool was never designed this should be doable by having a strict API contract but in practice I've seen a lot of tools that just kind of let the custom code do all sorts of shenanigans under the hood good example of this would be something like retool I actually think they're a good example like they do it relatively well from the little bit I've played with it where it's a drag and drop interface for making a table or adding a button but you can also use their methods of connecting different data sources like databases S3 whatever random stuff you're using and then write a little bit of JavaScript to link things together it's nice where it is just JavaScript they didn't invent their own language but they did create a lot of those adapters to help you connect those things together together and getting that right took enough technical prowess that my CTO is one of their old support Engineers the stuff that they did there was really cool and I think walk this line decently but for every retool there's five sales forces that do this entirely wrong so this is a good point to call out but we should also highlight the few that get that part right there's also refine which is an open source alternative to retool I will quickly confess I'm an investor so despite my general disdain for low code I found refine to be exciting enough that I chose to invest in the company and also all their stuff is open source so it's way more maintainable way more standardized and if they do make changes theoretically you can maintain an old version which is really really cool I am pumped with what these guys are doing I think they found a great balance of effectively building the layer between these things and letting you just WR react when you need to make your own custom UI stuff there are some cool things that are walking this no code line that I'm excited about but when your pitch is we make it so non-engineers can engineer that's when things tend to fall apart and now for the final point the underlying database structure was an absolute absolute mess especially after a bunch of incremental modifications I'll give my anecdote here and again I want to be clear this is about a sponsor Clark's great to work with I've had an overall incredible experience with them but when it comes to getting all of your users so you can do things like a searchable lookup in another thing like retool which funny enough we built so we can look up users and make changes to their like setup for their apps so if I want to Grant someone more storage and upload thing I can getting all of the user IDs and all of the usernames for that search into retool required us just like going through their endpoint exhausting all of the values and storing them in order to make a search interface absolute chaos because they weren't expecting you to need it searchable input on their API they just give you paginated data so we dumped all that data into literally local storage so we can search it and when you open a ret page you have to let it sit for 30 seconds to 2 minutes as it fetches all of the user IDs so that we can sort it in that way chaos but also somewhat common once you start linking these low code and no code tools together and that's just one of the things I and my team have Rec L experienced with this and we actually avoid the low code tools so God forbid you're using something like web flow combined with something like Firebase and now you need to update something on your homepage when that data changes it's a mess this author had plenty to say here too I've seen companies use low code tools for processing where precise analytics of the underlying data is critical that scares me I would even use JavaScript for data processing that was critical like I don't even want to think about low code tools that do that for you but then when viewing the underlying data model coming to find that it's inscrutable what does user attribute 47 mean oh God I've seen some with these generic data places like once your data base gets generic you end up with chaos like this I moved a field from page one to page two of the application and now the data is in separate Fields that's another fun one when you drag and drop things in your low code UI if someone else is using an API to get that same data it's possible that making UI changes changes the shape of the data that you're relying on elsewhere terrifying this is not a low code bad article but rather a recommendation to treat these tools with a healthy amount of skepticism anecdotally I have heard they can work great for the right use cases but empirically I found that they have a lot of gotas I hope this video helps you understand that I almost entirely agree there are good use cases for low code but if you're not careful about how you apply it you might end up in more held than you've saved yourself do you use any low code tools let me know in the comments which ones you like and don't like and what your experience has been overall appreciate you all ton I'll see you guys in the next one peace nerds




## Lynx is incredible (deep dive into Tiktok's React Native killer) - 20250310
I go on vacation for 2 days and Tik Tok puts out a react native killer are you kidding lyns actually does look really cool though and it's not just a react native alternative there's a lot more going on here from their new build tool to their runtime to the ecosystem they're starting to form around it this is kind of an artifact coming out of the RS build world but it goes much deeper and it is genuinely really cool what pite dance has put out here and I can't wait to explore it all in detail with y'all because I haven't got to play with it just yet so stay tuned if you want to see me figuring this all out with with you from the bottom up I'm not on Tik Tok so I'm not being paid by them that said we have bills to pay so a quick word from today's sponsor then we'll dive straight in unlike most of my sponsors this one's actually planned for this specific video because Zephyr are the industry experts at doing at scale application development be it websites or mobile apps they call themselves The only sane way to do micr front ends a fun fact I actually wrote the copy for them a while back the point being they really get stuff I've been talking to these guys forever some of my favorite people from the community work at zhr now and are building incredible things what am I talking about incredible things micr friends aren't incredible imagine if any person at your company could have their part of the application be its own package and when they make a change to it and it's ready to go that one part could be deployed separately from the rest of your app the next time a user goes to that part of the app it just has the latest version now imagine doing that at the scale of thousands upon thousands of Engineers hundreds of teams hundreds of features it's not fun to do especially when you're trying to get mobile working as well not only do these these guys have all of the expertise to do this right they already are in production for a bunch of big companies and they figured out how to do this with everything from react native the new link stuff we're talking about today to obviously modern web apps and Frameworks too you can almost think of these guys like versell for micr front ends or versell for when you have a business that's trying to scale to thousands of Engineers if you're not already exploring micro ends I'll be honest I'm a bit jealous they're not easy to adopt but when you do end up needing this you do have a bunch of different teams with varying needs they're the best way to get started I promise and it really is as simple as your experience with versell by the way I'm not just saying that one command to get it all set up they also by the way are some of the biggest contributors to tools like RS Pac they get module Federation they're deep in this world and I still can't believe this is real but it is since you don't have to update all of everything whenever a change goes out you're just updating the thing that is different. 3 seconds is the average time to deploy on zepher and you can deploy to almost any cloud with that too AWS versell Cloud flare and many more too these guys are the ones that you should be talking to if you're trying to scale the development team for your apps take my word for it they know what they're doing thank you to Zephyr for sponsoring today's video check them out at s of. Linker so first before we go any further we should ask the most important question why why would we want a react native alternative isn't react native already really good in performant yeah but it has some catches so react native has gotten really really good especially with the changes they made to the bridge in the JSI type thing whatever they call it the problem previously was that react native had its good old big single-threaded JS Q which is the tasks that the JavaScript has to do we also have the native layer as we all know native apps are blue so let's say you do something you touch a tab like one of those little icons on the bottom of the app this touch event has to be sent over to that JavaScript q that JS Q now has this event in it it has to do something with it so when it processes the event it creates new work that it has to do like change tabs fetch data and whatever else has to be done for this UI update to happen each of these is then going to have to change the UI State you know the fancy we got like app and we got our like sub elements like the tab bar or whatever not else once it's updated its virtual Tree in this world when the tabs then it gets this update state that it has to send back over to the native layer in this despite all of the chaos that it seems like it is here isn't actually too bad because the hard work is mostly happening in the native layer or in asynchronous events that are non-blocking here so like the fetch data gets thrown off to the async queue so it's fine but the UI updates all have to happen in this jsq as things that are triggering in the native layer they've made a ton of changes to make this more efficient over the years in particular the JSI allows them to share memory between these two places which can make it significantly faster but there are still certain things where it doesn't feel great like when you type in an input each key press each letter being added or removed has to get thrown onto the jsq as an input event and each of those has to be processed and if you're also processing other things in this single-threaded world on a device that's not particularly powerful especially like an older Android phone and it has to prioritize the input events over everything else it is doing send the change down over to the native layer hopefully it gets there in time and if it doesn't you get the awful sticky keys experience it's not great the interesting thing that they did with links is they built their own runtime that behaves fundamentally differently instead of having just one thread there are two not multi-threaded in the proper traditional sense where any process can go into multiple threads instead they have framework thread and they have the UI thread This Thread is effectively the stuff that you as the developer write and the framework which is the part that does the updating on each side is fully separated out so that the updates don't have to block whatever else you're doing so if you're fetching data you're processing inputs you're doing anything else on this side here it doesn't have to block the framework being able to update the UI and by separating it out like that they're able to do much more heavy like data processing stuff while still up dating at 60 FPS with no issues or lag it's a very specific need that they've solved in a pretty cool way and there are definitely ideas here that we might be able to take back to the react World if you're wondering why the react team hasn't done this it's Cu uh you can't do this in the browser like at all really this is not a concept like you can spin up a worker but workers have to go like over a bridge in order to update the UI in the browser so it's not like you can just spin up two threads in Chrome and have it behave similarly the fact that they own the runtime because it's embedded in the app is what lets them be as flexible as they're being here think of this less like how react works in the browser and more like how react Works in node but it's also not even react specific there's a lot of fun here we need to start diving in I've given my Preamble for long enough as they say you can write once and render anywhere I'm very curious how their web layer Works due to the multi-threaded engine that they built them assuming they just can't run that on the browser but only one way to find out there actually a lot of ways to find out anyways performs really well they've been using this for a bunch of their apps so it's not surprising they're obsessed with performance over at the bite Dance World they want their apps running perfectly fine on every device including a bunch of really old poorly maintained Android phones so performance is top of the mind for them interesting the two column waterfalls actually a really difficult thing to code especially on mobile so it's pretty cool they have this all in that state it is worth noting that unlike react native their layer binding to the native elements isn't react specific I probably should explain this a little more CU people seem to not get this with react native if you had technology like flutter this native layer thing doesn't exist the way flutter works is they're rendering a game engine effectively on top of the mobile apis if you're a webd this is kind of like a page that's implemented in Canvas OR in Flash where you're not using divs and elements from the browser or in the case of native you're not using the native buttons or tabs or notifications you're building a full engine that is meant to simulate all of those things that's why I hate flutter so much because it's not actually a native application platform it is a game engine that is disguised to look like mobile applications and that's why they always have that weird uncanny valley feeling because everything from How The Scroll Works to how the text renders to how alignment Works inside of inputs they had to roll themselves and that's why the kerning on fonts has been broken for8 years that's why accessibility is a big open question mark on flutter that's all because they're refusing to use the native platform it's funny because the links guys over in the bite Dance World did actually use flutter and explor heavily for many projects and they threw it all away in favor of links because flutter is not good for building native applications but when you're using something like react native and you render a button so if this element here is just button that is rendering a native button for the native platform that you wrote the code for so if you have a react native app and you render a button on Android that will be a native Android button if you use a tab bar it'll be native for all the different platforms because those platforms provide their own native UI kits it's like imagine you're using a web framework and you render a div and it renders some weird version of a div inside of a canvas you'd be like what the react native doesn't do that and links doesn't either the catch is that with react native they had to build all those binding to all those platforms themselves as part of the react native layer and a lot of alternatives to react native like what they have over in The Elixir world what they had for the solid JS react native alternative all of those are just react native rappers that call the react native bindings because that was really hard to build the Facebook team has had like 10x more Engineers working on react native than react and the results are incredible you can do awesome things with react native but now that you know why these tools are cool cuz they're not just rendering a web view they are actually rendering native code let's dive in a lot of this is RS pack based the RS pack guys if you're not familiar been trying to build a rust based web pack alternative for giant code bases like what they have at bite dance uh let's do links demo typescript interesting to have biome as the recommended like top level lintern formatter I don't have it installed so we're going to just do es lint in prettier links demo PPM install so you guys know know I like to commit everything right at the start starting point Imports app CSS this is one of the more interesting things lyx does let you use CSS even though it's native which is a very very interesting way of doing things that we will be diving into momentarily got the alter logo use effect interesting background only this is very interesting this is kind of like use client use server it's a directive but this a direct that is telling the links run time this should only run in the background very interesting let's run this guy I need to scan the QR code it is null so main. links. bundle that's not what I want I think I need to install the links app You' think they would like tell you that part scan with links App Store and not finding it there's a lot of apps named links when you search links bite dance nothing comes up great wonderful start they only provide pre-built binaries for the iOS simulator okay looks like we're going to have to set this up by hand I love xcode and apples developer ecosystem so much it's great and the reason we're all putting all this effort into building alternatives to all of this is because Apple's ecosystem is is so good that we all just want to use it as much as possible because some of you guys struggle with sarcasm let me be very clear a lot of these tools exist because iOS Dev is such a show yeah now we have to wait for it to verify you know verify its own thing okay well we're waiting for all of this to take its freaking time let's explore more of what makes link special links defines content and structure using a markup language with the most basic unit being an element tag concept and element tag similar interesting they use um lowercase special tags view text and image very interesting do you have to import those you don't have to very interesting so more things you might not know if you're not a react native Dev when you're writing react native code you have to import things from react native because these lowercase helpers aren't real things see these divs in this react code these aren't real those aren't Act will divs if I command click you'll see this brings us to the react type package what this actually binds to is the react Dom package when you call something like this with a lowercase that is a traditional HTML element the react bundler will resolve this as effectively react D.D this is how react handles this syntax because all jsx is is a way to call functions and the function being called when you write div is react P.D our editors are now smart enough and the other tools we have are good enough that as a Dev you don't really feel that you just write a div or a button or whatever and that's effectively what it comes out to you don't have to think twice about it but when you dive a little deeper what you learn is that these aren't real we're not rendering a div we're rendering a function the function is being called with the Pam's class name as well as the Pam children and now it becomes a div in the browser react native doesn't do this because there's no such thing as a div on mobile on mobile you have different Native Primitives so react native is an alternative not to react but to react Dom react Dom is the package that turns this into a div react native is the package that turns view into what it would be for the native app but since it's so different react native requires you to import those things you'd have to like import view button touch OPAC or touchable opacity from react and these are all things that react native will bind correctly when you use them as jsx it seems like the decision made by the guys over at lyns was a hybrid between the two where this looks kind of like writing normal react where lowercase view text and image are kind of like writing those normal things and you don't have to import them they've made them globals similar to how react Dom Works seems like nice DX simulator okay that appears to have worked this verifying step appears to have not oh no my IP address leaked whatever will I do wait is that it it's already ready I'm too used to Expo react native that takes a while and now we can play if I go change things in that CSS file if I change this to be Blacker yeah I hit save now yeah that's that uh RSC experience the instantaneous hot reloading to be fair react DA has gotten pretty good at that as well but yeah subscribe you nerd saving now saving again now yeah it's effectively instant interesting see this main thread this is where lyx gets very different from other Alternatives main thread colon easing very interesting how does that work weird that that's not typed properly it just be a different version or something but screen width should I guess be a global prop you can access for things like knowing how wide the screen you're on is that's actually really nice use offset this is one of those things that's so annoying to deal with with like keyboard inputs and stuff to have an offset for like this touch bar on the bottom to make sure you're not covering it I can't tell you how many flutter apps I've used and I could immediately tell because the buttons were too close to the bottom because they weren't using offsets correctly these main thread bindings are really interesting I want to go read more about that before we dive too deep so handle touch start touch start xr. current e. touches client X and it'll touch move this is how much you've moved bind touch start and bind touch move all our part of view and we have a an offset here which is done in a ref which is interesting because a ref shouldn't update the UI but I'm sure they have a fix for that update swiper offset interesting so on the touch move they also call this update swiper offset and they're using node manip okay there's the key difference here this is not very reacy generally speaking the way that react encourages you to think is that your state generates the UI so when a component has some State like how far scrolled it should be the component owns that state and when it changes the component itself updates and renders the new UI this feels a lot less like that and a lot more like something like react 3 fiber in react 3 fiber you'll bind refs for the elements you want to change and then you have a use frame call and this use frame is what does the update on the ref so you don't keep a state that is your current rotation or values like that you have a used frame counter that updates it in this ref is what determines what the UI is showing not the state normally when you write react this would be a use State call and when it updates the component would rerun and trigger a change to this return but that means you have to run react on every frame or every change and every Delta when you're moving your thumb left to right you don't have to reender the component during that with this model which is really cool same here once you run this box function once it doesn't have to rerun unless you pass a different props the Ed frame will update this rep and when the ref changes the element will change as well so it doesn't have to rerun top to bottom it's almost kind of like signals but they're not tracing the actual change you're directly making the change almost more like a jQuery style where you select the element and you update its properties rather than the react model where you change some State and all of the new properties get emitted out as a result of that very interesting to see this here this this does really show that they're like trying to get the ergonomics of react but the performance of other things react native has historically steered away from these types of things there are packages that enable it though like react native reanimated does a lot of these things under the hood for you people in chat are already linking the tools like that in react native they do have something like set native props which allows you to update things without having to rerun the component so this used callback call here will update the native layer for this text input to have different data in it so this will change to text edited text when you hit the edit text button yeah the touchable opacity which basically a button so when you click that button it'll update this without having to rerun the component that said not the most common thing to do in like user react native code this is more something that the libraries would do for you and tools again like react native reanimated do for you really well very interesting to see it as like a recommended primitive in a framework instead of being a workaround when you need it yeah you can also make custom hooks I'm assuming that's what they're going to show here yeah update swiper style swiper container ref comes from this use update swiper style oh here's the hooks yeah touchable start touch start current offset all refs for different numbers and then it calls the on offset update function that it gets passed in order to trigger the update and here we have the update swiper style which is the other hook and this one is what does the transformation it's a lot of code for what could have just been a UST State call but that UST State call would have to happen on the main thread that is actually triggering which elements are rendering not the dynamic behaviors and that's again like the big difference here is in react native if you did it the normal traditional react native way the work that you're doing to determine which elements to show and what props they have is being blocked by the work for when you're sliding left and right all of those are fighting for priority in the same que with links these these can be separated out entirely so the elements being rendered can be handled by the framework thread and the rest can be handled by that other thread May notice that sometimes the scrolling doesn't feel smooth that's because touch events occur in the main thread but the event listener code is running in the background thread which causes delayed touch event responses it's particularly noticeable on lowend devices but you can use a main thread script to optimize the issue yeah so here it's binding on Main thread instead which is very interesting so I'm guessing that means these guys also have yeah main thread for these interaction handlers so that these all happen on that main thread and not the background slower thread if I've learned anything from my time in the mobile trenches it's that you have to care more about all of these things to make a mobile app feel good it doesn't matter if you're using flutter or react native or Cordova or even just native tools and Technologies directly you have to think about these s to make a native app feel really good it's weird that you as a Dev have to think about what should or shouldn't be on the main thread but it's a lot better than the alternative of everything's on the main thread so now there is no threading I really like the idea of by default things aren't on the main thread similar to with like server components by default the component doesn't ship JS it is the optimal thing to have your main thread not blocked by stuff like a giant data fetch or a connection to a websocket client or those types of things and I really like the idea that by default your UI isn't blocked by all of these other things but if you do want to prioritize your work you can tag it accordingly it is kind of wild that you can prefix a prop like this to tell links hey I want this on the main thread never seen this pattern before for determining like threading characteristics and the definition of props almost feels kind of like viewy in a way so how do we communicate between the threads that's a really good question tell me all about this we want a progress indicator to show which page you're on but it only it has styling but it lacks the progress updates so let's see how they do this main thread calling background thread indicator component which accepts a current prop indicating the current page need to update current when scrolling on index update take the new index main thread and background thread functions need special apis to call each other here is where this whole model starts to fall apart now because these two threads have are running code in different places you can't just call functions between the two we're not in a competent language like elixir we're in JavaScript so these relationships have to be handled by you so if you need to call something on the main thread from background you have to call run on Main thread and vice versa it is nice that they have these helpers so run on background index update index I also like that this kind of makes it very explicit when you're calling things from different threads because you shouldn't have to do this too often but yeah interesting background thread calling main thread useful progress indicator should also support clicking to jump to the corresponding page it is also interesting if you think about it that like a a user interaction like a touch or a slide and a scroll you get to pick which thread those interactions are handled on that is a very interesting Paradigm the more that I'm thinking about it interesting very interesting the main thread functions can use background thread values by default if you have a main thread within I'm assuming some type of closure or scope relative to the background values those will automatically get passed in so that you can access them and that those main thread functions now can depend on those things but it has limitations the background thread values must be serializable so you can't use functions promises and other non-serializable values very very interesting if you understand how workers work in the browser you're a very small Niche amongst jsbs so for everyone else so when you spin up a worker in JavaScript you go to T3 chat and ask how to do it because the syntax is weird you create a worker with a specific JS file that file now has a runner that you'll see here like an on message that it exports for how it handles the message and Gemini Flash's syntax highlighting and formatting is entirely broken so we'll rerun this with a model that it won't be as broken in cool so on message we have this Handler on error we have a Handler and worker. poost message is how we pass values to the worker you spin up a worker in the browser that's a different JS thread that's running different JS code you can't just pass it a function to run you have to instantiate the worker with different JavaScript and then post messages to it and these messages being posted back and forth need to be Json serializable so here we've received the event. dat we have the original value the processed value and the status that we are sending back as a post message that then the other side can receive but we're passing these back and forth as messages not as us calling back and forth lyx makes it feel different by letting you call things with those background thread and Main thread helpers but you can't just pass a value over you have to make sure the thing you're passing can be handled as a message CU under the hood it probably works very similarly but that's the thing with threads is not just oh take your code and run multiple places when you're splitting data between threads you need ways to pass the data between them and that's where all of this becomes significantly more complex and apparently you have to do the same thing with reanimated they have a run on JS which let you run nonwork lized functions that otherwise couldn't run on the UI thread it's been time to remake twitch and react native for like 5 years now more than that I built I did it 5 years ago but yeah we'll see if they ever ship a good app or care enough to figure that out anyways background thread or past main thread values main thread easing prop to swipe allow users to customize the animation curve main thread easing is the ease in out function runs on Main thread function EAS is pass the background thread hook use offset interesting so this is a main thread function that we are passing as a prop and allowing for a background thread hook use offset to call empty easing that's a main thread call that we're making from background thread and then use offset it's passed to the main thread function animate very interesting main thread values can be passed by background thread but not used so these main thread functions can be passed so you're passing this around we're not actually calling this here we're passing it to use offset where it's then called in main thread that's very interesting we're taking this little box of code that runs in the main thread and we're passing the reference to it to background thread where we can't call it but then accessing it in main thread again where we pass it to something else that is really interesting my biggest hesitation with all of that is that it makes type safety not useful because there's no indication when you're working in the here that I can't call Mt easing but again this isn't for us mere mortals to do a whole lot of this is to make sure everything can be as fast as possible and my guess is most of the time you would probably just write everything in background thread and then when you have specific things you want to optimize someone who deeply understands the system will come in do the right main thread calls and optimize your app at that point there isn't really a great path for that type of like latent optimization in react native if you don't start with reanimated and use it properly it's rough but here you can kind of just do it later which seems really powerful but it would also be fragile in the sense that somebody who isn't as familiar with these properties would get really confused cuz they see this function being passed all around the code base and they're like you know what I want to set a default value here so they do optional main thread easing and they give it a fallback that they Define right here for different values and that fallback fails because one it does get called it was defined in background so it tries to call Background function which it can't do and then it fails so there's like a lot of those little unexpected edge cases people will run into when they're learning this and since the type system can't error out when those happen they have to run into it in the runtime to see the bug I would be more okay with like either of these cases where if it was confusing but it type errored or it wasn't confusing but it only runtime errored I'd be okay with both of those but the fact that it is confusing it causes runtime errors and it doesn't have a type error that combo is uniquely brutal for onboarding and the only reason you would commit to something that has those like catches is because you really need the performance performance wins this is a really good tutorial in the sense that it like brings you through all of the chaos of how this multi-threaded stuff works here I should probably read their actual blog post specifically because Jan is one of the people leading the architecture there if you're not familiar Jean's the dev who did the original react compiler presentation so there aren't many people who understand the depth of react performance quite as well as he does so it's very exciting to see him as involved in this project as he is links is a family of Technologies empowering devs to use their existing web skills to create truly native uis for both mobile and web from a single code base designed for diverse use cases and Rich interactivity lyx delivers vibrant and engaging uis for large scale apps like Tik Tok featuring a speedy and versatile rendering engine performance-driven dual threaded UI programming modern rust based tooling and more we deeply appreciate all the priorit that have shaped the field of crossplatform Dev inspired to contribute to this Movement by open sourcing links today inviting more devs to build applications with more freedom and productivity for the generation of digital mobile phones and the apps on them are their first digital experiences for these app Centric users a non-native experience isn't just inconvenient it's a red flag I totally agree here you can tell when something isn't using native Tech so quickly especially if you use apps every day especially if you use iOS I struggle to believe people who say like when they use a flut app they can't tell or when they're using a Cordova app like the person was just chilling earlier you can tell it feels bad and it makes people less likely to engage and re-engage and keep scrolling through your app and using it for hours out a time those small frustrations don't work if you're not being paid to use the app there's a lot of things I use where they are inconvenient in that way things like stripe things like random dashboards and GitHub but those are all Tech that I have to use I don't have an alternative and I'm being paid to use those Solutions something like Tik Tok if it's bad I just move over to Instagram or YouTube or if I get frustrated I close the app and go where else it's a whole different war and they are fighting it hard things like blank screens .1 second lags and a like animation or unfamiliar UI patterns can all make apps feel cheap or untrustworthy we believe that native Primitives and responsiveness aren't just nice to haves native is a necessity this is why they moved off a flutter despite the rapid growth of the app economy delivering such experiences at scale in velocity remains to be a challenge this is a huge piece here I haven't touched on it yet but one of the most important parts of why all of these things matter so much is distribution I have this app I built it on my computer so I have this bundle I want this app bundle to be on the App Store so that people can install it so I have to take this bundle build it sign it all of that I'm not even going to include that in this part I have to send it to Apple now Apple or Google or whoever you're Distributing the app through has to approve the app and once it's been approved it can now be on the App Store but even that's not so simple so we'll call this Apple review so once Apple's reviewed it and approved it assuming they do it once which big assumption now it's on the App Store distribution fun fact with App Store distribution you have no control over when users actually get your updated app you do have some toggles but you a lot of users just have auto update off so when does this distribution actually make it to the user the first time it makes it to the user's phone when they install it so when a user goes to install the app on their phone they just get whatever the latest version is but if we're pushing an update like we have now my app V2 we have no idea how long it's going to take from when I send this to Apple for review for that to be the version that is on the App Store and most importantly is pushed out and my users for any amount of time could be on that old version like whenever it's just a known fact that when you push a major update to an app a large percentage like sometimes 20 to 40% will be on the the old version for weeks if not months because the binary has to be loaded from Apple and apple is the ultimate decider in if and when the distribution goes out and you have to hope the users have automatic updates on there are some solutions here you can have the app hit some endpoint that checks if it's the latest version and yells at you if you're on an old version and makes you go install the update not great wouldn't it be a lot better if for at the very least updates that weren't massive I could just do this so you install whatever the latest shell is but new changes that are like quick UI fixes or additional features being added that aren't necessary for code review or review from Apple as a whole if I just want to fix some bug or add some theme for a holiday or add a new category option in the Picker for searching those things shouldn't require app review it's not like they do require app review either because people already do all of this through server side control so they'll usually have instead of like your search experience having a list of four options that are hardcoded it'll fetch all the valid options from the back end instead of the theme being something that's hardcoded into the app it might be fetched from a set of options on the back end we're already doing this but we've also been forced to separate all of this logic out in order for that to be possible if it was possible for us to ship something a little closer to that native binding without having to go through the App Store that' be a huge win that's what this is this is sometimes called code push sometimes called over the air updates there's a lot of terms for this workflow the point is that if you don't need to change the native bindings like what view or what touchable opacity become we shouldn't have to wait on Apple to let us make those changes we shouldn't be forced to re-architect the entire way our app is built to pull every piece of state from a server so we can toggle these switches on the server side without having to go through app review the idea of server driven UI where this code that becomes your UI has to come from some other than Apple it's a dragon we've all been chasing in the applications at scale world for a while and making something that handles that well but also perform as well as really hard because if we offload all this to our servers we're now blocking everything on server calls that sucks if we make it all Native we're now stuck waiting for Apple to approve which means we can't actually ship fast and that sucks and that's why the scale and velocity call out here is really important because they need a solution that works for apps the size of what they build at Tik Tok don't have to wait for one fth of their users to get the update but they also need the velocity where they can ship really fast and make changes really quickly and get them to their users really fast and that's a unique balance that most companies have had to roll their own in for a while tools like react native and Expo have helped a bunch and Lynx is seemingly going even further and I know for a fact they built this this way because they're doing all the stuff with rsac and most importantly module Federation now imagine if instead of our app bundle being just my app imagine if it was a couple different things imagine that this bundle it's still my app V2 but V2 has different things in it it has uh the store view v0 point cool so we have this as one of the things in our bundle we have react v19.0 point1 we have some SVG loader v1.14 or whatever we have the item view v0 point you got the idea your app is made up of multiple of these things some of these might be by different teams with different goals and purposes if only one of these changed the magic of this pattern is you can just send the one that changed and not have to Nuke and reload everything else each of these bindings each of these subm modules can be owned by different teams and sourced from different links so the app can now download the latest for each part and not have to update the whole thing really really cool stuffff I want this so badly for T3 chat because 99% of the code that you're downloading will never change things like our math renderer our half a megabyte of JS because they have to be it's complex rendering latte in the browser if I could just have that be a static module that's never reloaded once it's loaded and all of the data that gets fetched when you update is just our user side code that we wrote that'd be awesome but setting this stuff up sucks and that's why the industry we of it are working over at bite dance and Tik Tok to make this all happen we believe that by enabling developers to build once and reach more platforms we can deliver joys for more users and faster Tik Tok is known and loved as a mobile first platform continuously bringing Innovative and engaging experiences to diverse and dynamic users around the world that feels like copy written by bite dance links now Powers an extremely wide spectrum of surfaces from the highfrequency search panel to the full-fledged Tik Tok studio app from complex e-commerce storefronts like shop that demand reliability and Trust to highly engaging experiences like live interesting I didn't know live was built with links that's really cool they're betting heavily on it it seems that's everything other than the mean Tik Tok View for the most part and again remember that thing I was saying about being able to do updates without going through the App Store the only way you could do an event like the Met Gala before is you make all the native changes for it you put them under a feature flag or some tag you push it up to Apple for a review pray they approve it in time for that event and then when the EV goes live you flip the feature flag on then you flip it off and then someday you go remove it from the bundles but chances are there's a lot of people who have the Met Gala code installed in their phone forever going forward because you have to put it in weeks ahead get it approved and then hope everything goes well so you can hit the switch on the right day or we just go back to here we make our Met Gala view V1 whatever and now this is a new thing in our bundle now we can ship just this one additional thing and when it's done delete it that easy really really cool for the types of things that they are doing at scale we believe that scale and velocity mean much more than just applying a feature bug fixer optimization across all platforms to improve cost efficiency it also means the versatility to adapt the same shared technological Foundation to a broad spectrum of scenarios without the need to build new teams or reinvent the wheel for every unique use case bangers oh this is a fun section here the web platform was historically created for documents and then gradually evolved into a Dev platform yet it continues to face constraints that slow down its ability to adapt and innovate quickly shiing go Technologies for crossplatform dev has become a defining Norm in the industry since 2008 phone Gap later known as Cordova strived to keep the web as crossplatform as possible by augmenting web views with Native capabilities in 2015 God react native's 10 years old now it's wild the react native pioneered the idea of bridging native UI with webtech enabling declarative uis with react Mobile in that same year flutter with its web Heritage adopted a similar declarative UI model and introduced a new approach using a custom rendering engine links followed a similar Spirit you could think of it as an alternative web tailored for appdev it aims to honor the assets of web Technologies while taking an opinionated approach supporting web like epis and adding constraints and extensions with clear intent to illustrate the balance let me share two examples one where we choose to follow the web another where we intentionally make a difference craft designs with markup and CSS as usual so here we have a few style Flex Direction column background radial gradient doesn't look great but that's I'm in Firefox text all looks very traditional cssy at its core UI Technologies exist to deliver exceptional product design lyx Embraces the familiarity of web dev allowing devs to write markup in CSS just as they would for the web lyx natively supports CSS animations and transitions CSS selectors and variables for theming as well as modern CSS visual effects like gradients clipping and masking kind of wild they basically had to reimplement all of that natively I'm assuming that's how that works I am very curious CU again it's not a web view so they probably had to reimplement all of this core CSS stuff so that it works in their n web view but then separately they have the second example which is using the main thread responsibly for interactivity one of Link's most notable architectural decisions is its statically enforced division of user scripting into two distinct run times the main thread runtime which is powered by prism and a custom or which is a customjs engine specifically optimized for links which is dedicated to privileged synchronous UI tasks like initial launch and high priority event handling separately there's a background runtime which is the default free user code which ensures the main thread remains low workload and non-blocking this enables two killer features instant first frame rendering this is really really cool one of the few things you will definitely notice with react native apps is they have to have that little loading view there when it spins up the JS to command the UI but with main thread scripting you can now instantly start rendering actually no that was still this is still with the IFR interesting surprised they have the loading State there they should be able to make it way yeah that's basically instant that's just the app icon open normally with react native apps since it takes some amount of time for the runtime to spin up you're in that loading screen for quite a bit longer here it's effectively instant and I think almost all apps will have that the react native team was working really hard on Hermes as their solution for this which is a custom runtime that does the ahead of time like jit compilation for the JS code so it can theoretically launch faster it's a lot better than it would be if it was still just V8 based but it's still not quite as fast as what they have done here and by separating it they now have way less code that that main thread has to care about and that main thread can be optimized using prism which is again a custom runtime they built specifically to be as fast as possible for launching your app and handling those interactions prism is built on top of quickjs which is again really really fast JavaScript runtime quickjs is built to be fast and Tiny uh 210 kilobytes of x86 code for the entirety of quickjs it obviously means a lot of things that we expect from especially run times like node that you won't get in quickjs but it also more importantly means you can spin it up immediately cuz the footprint of that is nothing sorry did I say prism it's Prim JS my bad the key features for Prim are an optimized interpreter which allows for the interpretation step where it takes the code and figures out what to do with it in the first place to be much much faster seamless object model integration so allows for reduction of data communication overhead and improving rendering performance between this main thread the background thread where your code runs and the UI itself that's the native layer they built their own model to bridge between all of those they also built their own garbage collector instead of quick js's reference counter which allows them to not clean up memory as aggressively and not have to block on every interaction instead they clean up later on which allows for better performance improve memory analyzability and a reduced risk of memory leaks cool they also fully implemented the Chrome Dev tool protocol that's huge actually that makes it way easier to debug debugging seems excellent okay this is oh yeah that's really good if you're not already familiar debugging in react native is one of the biggest arguments against it and this just solves it because you have the full Chrome Dev tools just there and you can even look at oh oh that is really good that's really good actually they have a desktop app that let you run in that view there and actually see what elements are what this is one of the biggest gaps that's missing in the react native ecosystem this might push me over the edge to use this for stuff that is super cool apparently you can even bridge between your iPhone or whatever is running the app to do all of this oh man the cond of the react native experience what do you mean you don't like flipper wait doesn't RN also have Chrome Dev tool support with Expo there's the problem we've been stuck with flipper for so long and I'm not even sure of the state of the Chrome Dev tool stuff with Expo as far as I know you have to be using the web view stuff for that you can't use the Chrome Dev tools with Expo with an app that's running on your phone and even if you can I don't know how much I trust that binding layer it's also cool that bite dance isn't just releasing one piece of this they are releasing the whole pile the links family as they call it including links react links which means you could build something that isn't react if you want to use spelt or solid or view or whatever else with it R Speedy which is the build tool built on top of our s pack for setting this all up the links Dev tool stuff links for web and Prim All released together as one giant drop genuinely really cool also links being C++ surprises hopefully absolutely nobody and then the Java and Objective C and C objective C++ Parts those are the bindings for Android and iOS internally we've seen service migration from web to Links often achieves a 2 to 4X reduction in launch times across the board so that's if the difference between using a built-in web view something like Cordova or phone Gap to using links instead is you get 4X speed up for launching the app huge links is originally developed by an engineering team at bance which continues to drive its development significant user of links Tech talk recognizes the Innovation and potential of links and has been making extensive use of it in a series of Tik Tok apps Tik Tok will facilitate the open source release of links offering support in several areas including funding technical enhancements Community promotion and ecosystem growth democratize crossplatform Technologies for years crossplatform Dev for web devs has been defined by the patterns and solutions established by a few dominant players we celebrate their remarkable contributions there's growing demand for greater diversity in approaches I agree it's kind of sad that if you want a good mobile experience that isn't just building a really good native app for each individual platform with a team dedicated to each the only reasonable option for a while now has been react native everything else is like cool but none of it is ready at all like the reason this is exciting to go back to the dunking I was doing earlier is because this seems like a stable production ready foundation for good native apps with also the benefits of web DX and distribution and that set of boxes is really hard to check the dream set of tools like if everything was perfect we would have all of the following we would have native SDK control so we' be accessing that native UI layer we would have dist dist bution without ties to App Store so that we can distribute something probably that binary that allows us to change parts of the UI without having to go through the whole app review process we would have DX comparable to Modern web would have interop with a big ecosystem of app focused tools things like react query would have good Dev tools I'll say Dev and debug tools IE Chrome Dev tools and obviously open source up until now the only thing that checked all these boxes was react native something like flutter did not have a great score here flutter did not do Native it did not do the distribution at the App Store the creator of flutter actually quit Google to go try and build this externally with shorebird and I have no idea what the current state of that is the other company I was talking to that was doing that stuff shut down DX compar able to the modern web uh I will say flutter is close enough here I won't cross it off interop with a big ecosystem no good debug and Dev tools share and open source share so you lose three of the six points with something like flutter native apps you get this one and then you get none of the rest at all react native got you all of these the debug and Dev tools weren't good before but they're apparently there now as of last year you can use Chrome's Dev tools for react native awesome haven't tried it yet not sure how stable it is but Lynx is hitting all of these boxes too and I didn't think we'd see a day where something else would do it because it just seemed like too much work to be justifiable the way they phrase it is they're not open sourcing a single fixed solution with one open source project they're trying to open source a meta infrastructure that enables teams and businesses that are facing similar scale and velocity challenges to build their own crossplatform Solutions we're open sourcing react links which is react on links as links's initial frontend framework flavor enabling componentized declarative uui on links however Lynx isn't limited to react in fact other Frameworks already represent roughly half of lynx's overall usage demonstrating its neutrality and hosting different flavors as modern apps grow increasingly complex with dozens or even hundreds of devs collaborating on a single app Lynx ships with r Speedy which is a tool chain based on the popular rust based bundle R pack which enables fast builds and paves the way for multi framework micr front and future with module Federation and that means that different bundles like if we go back to my diagram here it' be possible that the store view might rely on its own separate framework package like spelt links and now spelt links could be bundled within this stor view bundle as just one of its packages and one of its dependencies and all of this belongs in your app but you can ship it separately it can be updated separately and not affect the other pieces because this is just effectively the function that is called when you go to that view super super cool not only is the core engine of links framework agnostic it's also agnostic to host platforms as well as rendering backends drawing inspiration from a spectrum of projects like chromium flutter and react native it's designed to adapt to new platform Primitives and it's flexible enough to switch to a custom renderer enabling Pixel Perfect consistent rendering across any platform with a graphic interface this is effectively flutter mode where instead of it rendering native UI elements it's rendering a canvas that has a Pixel Perfect UI so everything looks exactly the same on all platforms but it's not using native at all the fact that the same renderer can do both is really cool but you kind of have that benefit in react native as well in the react native world we already have react native skia which allows you to render react native components on a skia canvas which is the same Tech that flutter used to be powered by and still usually is they're in a weird engine overhaul thing over there who knows when it'll all ship anyways this is not the end rather a new beginning Lynx is production ready and already Powers an incredible number of businesses what we are open sourcing today is the exact version that we use in production which is why it starts at version 3.x that's cool they're not hiding and changing the version number for the public release it's the exact same they've been consuming it even introduces Legacy code and apis that we intend to deprecate We Believe In open sourcing what we actually rely on that's really cool to call out oh boy they're moving all Dev to GitHub with this making it open and transparent to the community this least only the beginning we're releasing open source today is not everything many peripherals that we're proud of including additional UI components Advanced built-in Graphics capabilities the custom render and other framework stuff have not come yet this is the beginning of the journey because it's a relatively young team in the open source space we know we have much to learn about working collaborating and growing with the community we're glad that we took the step because we believe open source is the right path forward to Foster collaboration push the boundaries of what's possible in crossplatform development and give back to the community that's given us so much we invite you to join us on this exciting Journey we welcome your feedback and contributions this is a really good launch I'm trying to find more holes to poke and it's honestly kind of hard the biggest potential issue I see is something that I mostly know of because of my experience with doing react serers side stuff with server components these prefixes and these call outs like in here with the main thread declaration here these don't work great with packages so if I have a package that needs to run on Main thread hopefully they bundle it correctly and if they don't you're screwed you have to wrap everything yourself manually in all of the right layers and if they do include these properly that package is now linked specific and won't work well in other react flavors so it's a tough balance there my guess is that you would be writing a lot more of that update code yourself inside of the application code rather than relying on libraries for it as much both because the ecosystem isn't there yet and because these like decorators are not very fun to manage externally react links follows react's programming model but leverages the Dual threaded run times yeah so your code runs on two threads this will be printed twice main thread's responsible for rendering the initial screen and applying subsequent UI Updates this allows for users to see the first screen as quickly as possible while reducing the main threads workload background thread runs with a complete react runtime handling component life cycles and other side effects since complete consistency with single threaded react is not possible we modified the component life cycle as shown in the component life cycle page here we have the main thread render background thread also renders is kind of like SSR but happening on device where there's two things rendering the same content the background thread has to hydrate cu the main thread finish the render faster hydrate use background thread data to calibrate main thread data triggers apply update ref call back is what handles the changes there any effects from render will start running after all of that then if an update happens happens in the background once it is done figuring out what it is it sends it to the main thread to actually apply the update because this background thread all of its renders don't exist the renders that matter are the ones that it sends to the main thread that then applies the update yeah very cool to see them documenting the ways that it differs from react because it does it's not just using react like we're used to their goals were to optimize first screen render again funny very similar to serers side rendering where the goal of SSR is so that when you go to the page you see something way quicker and you don't have to wait for the JS to all load in and do all of that stuff very cool this does mean that they don't have certain helpers like use layout effect which is an effect that runs after the update but before the UI change they have their own handle layout thing that you can use similarly special characterizations of oh God list is always is a challenge list element has on demand loading in node reuse characteristics list elements created all of its child components are Js object instances which are created together but the corresponding actual elements are not immediately generated inste they're created or and reused only when list is about to scroll the corresponding position very interesting back to the like how it differs your code does run on two threads but not all code can actually run on both of those threads consider the following example that as a listener to the global event emitter so we have the global event emitter links get JS module glal event emitter add listener my happy event triggered when this component is rendered you'll see a not a function error it occurs because while the links rendering of the component on both threads this Glo emitter call cannot be executed on the main thread so it have to be wrapped in a function call or something and pass you can't just call this in body because that code is to run on both it's again very similar to SSR I bet that people who are familiar with server side rendering patterns are going to be very well off for all of them there are three key rules for background only code okay rule one is that code meeting any of these conditions is considered background only so it has event handlers effects ref props functions with background only directives in modules that import background only on top for example all the functions with console log and the following example are considered background only so here the use effect that makes that background only function background only is tagged background only and if the function or the file Imports background only that whole file is this is very similar to server component stuff yeah so if we want that event listener throw it in a use effect again just like server components background only code can be used within other background only code that makes sense code that's only used by background only code is considered background only as well so like bind tap here doesn't need to be marked because it's being called in a way that's background only so it will behave background only unless you specify otherwise also be background is only called in a use effect yep makes sense due to limitations compiler analysis capabilities and compile time perf there are some exceptions so when we pass a prop like an event handler here we don't know what you're doing with your props in the custom components you're defining so you'd have to specify this before passing it otherwise it'll try to pass it on Main thread as well and when you do custom hooks they should all be mounted as Back Road only as well but similar to how some can only run there some can only run on the main thread makes sense you can mark it Main thread similarly I think I have my mental model locked in here this is really really cool it's early in its release and ecosystem presence but it is not early in its implementation this is a very legitimate solution this is without question the strongest competition I've ever seen for react native and I think it's worth paying some attention to if you're interested in Mobile Dev and best-in-class developer experience building high quality mobile apps there are stuff we can all learn from here and I am absolutely rooting on the links team to figure out how to do this as best as possible even if I never ship an app with it or use an app using it they put a lot of work here to push the way we build for mobile forward and I'm seeing the results this is really genuinely cool this feels like a a minimal method to replicate the winds possible in react native but strip down to be just those bare metal Essentials and I see so much potential for what they've built here I'm going to have a seizure if I think too much about this message so I'm going to pretend that wasn't sent and wrap up thank you guys as always for sticking around for this one react native in the mobile World Is A bit chaotic I do mean to talk about this stuff more because it is really cool but let me know what you guys think are you going to try out react links or are you just going to stick to webd or God forbid are you going to go spin up a flutter app let me know and until next time please don't ship flutter seriously it's such a disaster I can't believe they're pushing it the way they are just like do you not care about users with accessibility needs or just ignore all of the work that's gone on in the platforms for years like I




## Making 4 Billion If Statements For Some Reason... - 20240119
the result is still returned in around 10 seconds it's amazingly performance if only takes 10 seconds to figure out if a number is even or not this is so good 4 billion if statements I recently stumbled upon the screenshot while researching social media on the train I hate that I use classical here cuz I'm a music person that's going to my brain I'm just going to make my brain work fixed criticizing the fresh programmer's attempt to solve a classic problem in computer science the modulus operation you know it's going to be good when it's not screenshot it's a picture or like a moment from Tik Tok like that that's when you know we're going down a good path now in a world where AI is replacing programmers by the minute taking their jobs and revolutionizing the way we think about code maybe we should be more open to the thought the fresh new blood of the industry in fact the above code is a perfect example of a Time memory trade-off you're trading off your time and at the same time the computer's memory and time as well truly a marvelous algorithm you didn't read it yet it's an even odd where every number is listed if the number is this even odd and joking that this is and ideal trade-off because it's giving up both the time and the memory for no reason love it so I went to explore the idea of checking if a number is odd or even by only using comparisons to see how well it works in real world scenarios since I'm a great believer in performant code I decided to implement this in the C programming language as it's by far the fastest language on the planet to this day thanks to the Visionary genius Dennis Richie starting to get an idea of the tone of this article and it's very entertaining so I started composing bunch of your classic includes now I have in main of numbers zero even if number is one print odd down to 10 cool let's compile the code disabling optimizations to make sure the pesky compiler doesn't interfere with our algorithm after compiling we can do a quick test of the program and we get some positive results Noe positive he's not handling negative cases anyways however after doing some further testing I found some problems when you have numbers that are too big you don't get a response no output it seems the program only works for numbers under 11 calling back to the code we can find that the issue is right after the last if statement we need more if statements now this is a Time memory trade-off my time on this Earth is limited so I decided to metaprogram the if statements using a programmer program in a different programming language to compensate for this cheating I decided to use the slowest language on the planet python thanks to the Visionary Genius of Ross vanig grusome the slowest is a statement but fair now we have print statements for the comment at the top print includes this I'm loving every second of this for I in range two to the power of eight print and I love this this is the correct code he meta program the right answer to write the code of the wrong answer for him that is beautiful I love where this is going nice now we can generate a program that solves the even OD program for all 8bit integers it worked he piped the output to program. C compiled it and it worked it's a small thing but I also love that he's using Windows for this it's just such a nice little unnecessary additional detail that adds a special layer of chaos and I hope I I hope we hit file size limits because Windows handles those so poorly let's see where we're going would you look at that it works flawlessly now let's SC it up to 16 bit change this to be two to the power of 16 this gives us a nice and thick C file of around 130,000 lines nothing really when looking back at some of the code bases I've worked on over the years let's compile look at that it worked our algorithm seems to scale with the data the execution is around 2 megabytes but that's no match for the beefy gaming rig I have with a Who 31.8 gigs of memory 16 bits a very cool bit with that's such a statement 16 bits a very cool bit with sentences that have never been said before this article is going to have so many unique sentences and I love that about it as we all know 32-bit is the Holy Grail of computing and is the final bitwidth that we need to solve all practical engineering and scientific problems you're starting to sound like a a certain holy C programmer here when you say there's a a holy value and I'm pretty sure it was 16bit but we'll take it 32bit seems like a good place to cut off 64-bit no one needs that no one really needs that come on have you ever really Ed 64-bit number name one 64-bit value I dare you leave one in the comments if you have one after all ip4 is still standing stronger than ever 60 years after it was deemed deprecated due to so-called address exhaustion which is funny enough another topic that's been coming up lately I might have to do an actual ipv4 video which I certainly didn't think 10 years ago when the ipv4 drama like really started ramping up that 10 years later I would be a popular YouTuber that felt obligated to talk about ipv4 in a video because it still hadn't been solved but here we are so without further Ado let's scale to our final size 32-bit is only 65,536 times as many numbers as 16bit so I could go wrong oh boy so let the mighty snake do its work and after getting a cup of coffee and getting back to check on this program 48 hours later I was left with a beautiful C file almost 330 gab in size this is I I promise very few of you have experienced dealing with files over 100 gabes at all much less in Windows I'd say 50% chance that Explorer exe just crashes when you right click on that file like it does for my giant movs when I'm done recording my videos oh God almost certainly amongst the largest C files in history God I hope so I hope that you're at least in the top 50 my finger were trembling when I entered the next command surely msvc had never before encountered such a powerful source code after abusing the page file of my poor powerful computer for half an hour the following was spat out I don't even want to think about dealing with paging in Windows to convince that something was in Ram when it's not so you could do this oh boy warning compiler limit terminating line number emission compiler limit for line number 16,777,216 that's the limit for number of lines in the C compiler pathetic and not only did the computer fail us when looking into the limits of the portable execution format. exe for Windows I discovered that it cannot handle more than a measly 4 gigs with more than 4 billion comparisons needed to be encoded in that executable this is a major obstacle for implementing our algorithm even if each comparison would use less than a single bite we would still be too heavy however bad compilers and file formats should not stop us from achieving our Dream after all all what a compiler does is write some fancy Ma code in a file and the file format is just some structure telling the OS how to put the binary code into memory really we can do that ourselves let's start by writing an is even function in x86 64 assembly as it's the native language of my Intel powered machine why are we into assembly now how does this is such a ramp up this is incredible it looks something like this I don't know if yall have the same trauma I have around assembly one of the worst class I took in University was obviously poorly taught and the final project was wrri an assembly myips compiler in runtime so I would take myips assembly and run it in my own C++ code and it was hell and as soon as I see this specifically in this context straight pain and again this is an iseven function is this much code I hope you all understand just how crazy the assembly underneath your JavaScript functions can get cuz it is not fun so you set eax to zero which is where the argument is and then the eax is the return so we set it to zero We compare that value with zero we skip to the next two instructions if wasn't equal otherwise we increment and then we return but since we skip two lines otherwise we go here we compare it to one if that's not correct we skip again if that is true we return otherwise we go here add the next two to the two to 32 comparisons here cool so yeah this is it checked zero it returns if it was good it jumps if it's not it checks one it jumps if it's good it returns if it's not just that over and over again not really correct assembly but doesn't matter much because we're going to compile it into machine code manually how did I do this well I jumped online using a mix of my early life experience coding emulators and hacking and I looked into the x86-64 architecture manuals to find out the correct op codes in format for each instruction just kidding that's horrible I asked chat GPT what the correct op code was for each instruction and lucky for us it didn't hallucinate any new extensions to X8 664 honestly in 10 to 30 years people are going to look at the x86 64 standard and just assume AI invented all of the pipes because they make no sense I could rant for a long time about x86 64 that's not what we're here to do though we're here to see it being abused so let's take a look at this abuse so now we just write a compiler to Output this code note that we will write the op codes we got from the AI for the instructions directly here's how it looks in our friend python they have to escape so much this is going to be terrible with open is even bin write permissions as file file. write laor for this range en code oh God oh God I hate this so much while we somewhat deviated from the original vision of the Tik Tok post the essence Remains the Same we created a long long long list of if statements to determine if any number is even or odd ignoring any arithmetic operation that would help out running this gives us a nice 40 GB file which contains all 4.2 billion comparisons needed to determine if any 32-bit number is even or odd now we just need to write our host program that can load and use these instructions for added performance it is very important I decided to map the file into the address space instead of reading all of it by doing this we can just pretend that the entire file is already in memory and let the PO OS deal with fitting a 40 gab blob into virtual Ram after mapping the file with read and execute permissions we can call Into The Code by using a function pointer it looks like this so we're still using some C++ just to call this bin handle bin create interesting open code file get 64-bit size of file create memory map of the file get a pointer to the code create a function that points to the code and there we go now we have everything to check if any 32-bit number is even or odd not he actually did it oh wait I got one wrong almost seems like the algorithm has some issues with signedness any value over 2 31 seems to give random results sad let's fix the bug right now we're running into the problem where after you have mapped the 40 plus gig bin file you have to get this to run inside of C++ once you've gotten a pointer you can then create a function that reads over that to execute instructions and then you can actually figure out if a number is even or not finally this is all the work we've had to do just to know if numbers are even or odd sadly this didn't work though to catch you up because any value over 2 the^ of 31 gives random results because of signedness so uh let's figure out how this gets fixed it turns out that a to I cannot deal with unsigned pureness so it fails to parse our big boy numbers replacing it with string uh I don't even know how to pronounce this particular C function fixes everything cool no problems here oh look at that it's working again I thought that was going to be a scarier fix unsigned oh string to unsigned along that's what that is thank you for the translation from C to English quick chat credit downlo thing and backman thank you both yeah only 40 gigs a shame me optimize the complexity from the over 300 it was Prior anyways as a side note this program is amazingly performant for small numbers the results are instantaneous and for large numbers close to the two to the 32 limit huge props to the author considering the computer has to read 40 GB of data from disk map it to physical memory and then let the CPU have a rip of it without many chances of cashing is honestly quite mindblowing yeah imagine showing a Dev from like 20 plus years ago or back in like the single core ERA this code and telling them it only takes 10 seconds to figure out if a number is even just the amount of different feelings they would have in that moment because I'm having at least a few of those feelings right now and I already know that there's something better than x86 I can't imagine how they felt back then for reference the computer is a core i5 12600 K with 32 gigs of RAM and the files are reading off an M2 SSD disc while calculating the peak read speed I saw from the SSD was around 800 megabytes per second which doesn't really make sense as that should give execution speeds at 40 plus seconds but computers are magical so who knows what's going on the ways operating systems handle files is weird anyways and there we have it the internet proven wrong once again not only can you actually write a fully functioning and performant program in the manner of that Tik Tok post it's also very fun yeah that was absolutely hilarious huge shout out to Andreas for this awesome blog post sadly he is not on Twitter and I don't really know what else to shout out of his the URL for this post will absolutely be in the description so check that out if you haven't already that's his only blog post that's impressive for this to be to make a Blog just to make this post incredible A++ I I am thankful I stumbled on this blog post I guess that this is how you fit 4 billion if statements into a single program if you want to see something a little less chaotic like I don't know running JavaScript at a native level by compiling your JS to assembly I actually have a video about that for some reason so check that out if you haven't otherwise watch whatever's below it appreciate you a ton as always see you the next one peace nerds




## Making Good Tech Decisions - MY FIRST CONFERENCE TALK - 20220805
howdy y'all i'm theo i'm here to talk about buying time and technical decision making for your business your projects your teams and all of the things that you build for your users who am i and why am i qualified to talk about this well i worked at twitch for about half a decade as well as amazon i am the ceo of a startup ping.gigi focused on making great content creator tools i was in the y combinator winter 22 batch where i got to learn all about how other companies are building what isn't isn't working and talk to other companies from the past and see how their tech scaled really happy with the experience i've had working with other businesses of all sizes hearing what hasn't hasn't worked for them i'm also a youtuber and a streamer i do technical streams where i talk about all sorts of engineering stuff live code interviews to a few thousand people every week still nuts that that happens check those out on wednesday i'll have more details at the end i'm also the creator of the t3 stack which is a stack focused on modularity and type safety for full stack application development so what are we talking about today i think it's important to start with what we will be covering which is the decision making process for technical decisions a light comparison of meta frameworks and how different like full stack solutions and api layers can be compared and contrasted to make good technical decisions a and a general overview of like modular building and how that affects cost and decision making what we will not be talking about is performance so like how any of these solutions perform in terms of like how fast is it for the user how quick are the response times on the server that type of stuff is really good to think about but when i'm talking about cost and time i'm not talking about performance also not talking about the history of the things that we're discussing here there are lots of technologies that were really awesome at their times but what we're discussing now is how we should make decisions now so i will not be talking about the history of the stuff that we're discussing just the things themselves and how we can make good decisions around them with what we know now picking tech is really important i think we all know that is what we're building on top of it affects everything from your hiring process to developer satisfaction to delivery times to the capabilities of the things that you're building picking attack is as a result an important investment to be considerate of just like employees tech is a big investment that you make and are to an extent betting on you have to think about the long-term impact of those decisions and you have to bet on the people creating that tech to keep maintaining it and making sure it works the way you expect or at the very least you have the ability to fork and maintain it yourself not a great option but an option nonetheless as a result of all that picking tech is hard can we just use angular it worked fine for google text changing a lot which is why i can make a joke about angular and we get it it's not something that a lot of people would start a new project on right now and bet on long term anymore it solved its or served its purpose and it helped us move forward but it's something we've moved past more options and believe me there are more options than ever right now can intuitively lead to decisions getting harder right i don't necessarily think so i think that more options have resulted in us needing better ways to measure which options make the most sense but the idea that having more options means decisions is are inherently harder to make it's something i kind of want to push back on through this talk first though we need a way to measure these decisions and figure out how we can compare different opportunities and options that we have as developers business people team leads whatever your role is if you're deciding on a library or a framework or a package that your company or tech whatever is going to consume it's important to have a way to measure the impact of those decisions first thing we have to measure is of course the cost i like to break this into three separate sections the ramp up time the maintenance overtime as well as the ramp off time i think that all of these are very different and different technologies are hilariously varying in these sections and we'll go over a couple different technologies and how they differ in this way soon measuring value is a another important thing to consider when you're picking technical solutions value is measured in a lot of different ways and the different values might mean different things to different teams and companies things like how much time does this library save us what are the wins that our users will feel from these technologies how much happier are developers based on these technologies being picked and how is our hiring process going to be affected as well these are all things that we should be considerate of when we make technical decisions i also think it's important to measure the risk of these decisions which it's separate from cost and value what are the risks of the technology that we are picking here and how could they potentially affect us in the future rather than cost i think risk is something that we don't necessarily know but it's something we can plan around it's almost like the delta for how much range there is for the cost to be in and it can also horizontally affect when you would adopt or drop a technology risk is the hardest of these things to measure for sure but it is important to both measure the risk that you're taking with a given technology as well as your team business projects unique tolerance for that risk it's important to decide on these things not necessarily eagerly and strongly ahead of time but at the very least in a way where you can discuss them and think about them and as a result make good decisions around them maybe in a reflection type way but regardless measuring cost value and risk is very important as we make decisions for our technology so this might be a weird tangent but i want to compare two technologies that i love dearly those being trpc and graphql trpc is a really interesting technology that you might have heard me ranting about in other places or seen blowing up on twitter i think that trpc is one of the best ways to start a new full stack application and to build apis and communication between your backend and front end it is a simple syntax for defining a type safe api between your back and your front that syntax isn't a custom syntax or its own language it's actually just typescript functions being called and written there's nothing about trpc that you can't do in typescript it is fully valid typescript there is no compiler since it's still built around typescript it is really nice to use if your backend and frontend are fully typescript but if they're not you're in a bit of a rough spot once those assumptions are made though it is without question the simplest way to write back-end ser functions and call them on the front end without losing full stack type safety it's actually uniquely type safe it is so fast to make sweeping changes in your projects when trpc is the like core api definition layer because you will have inference showing you on either side whenever anything is not doing what you expect it to it is important to consider the risk here though because trpc is an open source project made mostly by one developer that's a huge risk to take in any technology you bet on but with trpc i think it's interesting as it's such a simple way to write and call functions that you could theoretically move those functions to something else without too much effort the things that you would have to write if you were writing express or graphql or another standard other than trpc is all code you would have to write anyways so when i port from trpc to graphql i'm not writing a lot of new code i am copy pasting the existing code and writing my own validation and it's like schema on top of it so when i chose to use trpc for a project i chose that because i understood the risk of betting on this if it fails in the future i understood the cost of moving off of it and i saw the value that it provided my team immediately and it seemed like a good option for us to explore at that point how does this compare to graphql well graphql is a pretty well known schema language for describing and calling apis it is language agnostic so you have to roll your own client and server thankfully there is a wide open source community that has provided lots of good clients and servers that you can implement and use everything from apollo to relay on the javascript side with the graphql go first project in golang there are lots of different options for you to build a great full stack graphql application but you do need to make many more decisions around graphql in order to adopt it in those ways it allows your graphql's main selling point is that it centralizes all of your apis on a single endpoint with a single schema standard that everybody agrees upon and then you don't have to talk anymore graphql is almost a communication method between teams as much as it is a standard or a method to call an api i think that one of the biggest reasons you would pick graphql is to de-risk the graphql standard the schema language that we used to define graphql apis was created by meta the facebook and they built it as a very strong focused standard and now there is a gigantic community of people building packages around it both for the backend and front end in various different languages so your swift like mobile app your kotlin android app your xbox app your weird windows thing your python backend your golang nerds at your company everybody has an option to work with graphql right now for that reason it's a huge difference between graphql and trpc in the point at which you would have to off-board as well as the cost of that off-boarding so how do we like measure this i have a bit of a weird visualization that i think does a pretty good job of communicating how i like to think about these decisions on the vertical axis here we have cost cost is left vague kind of intentionally it's meant to represent the cost to yourself and your business it is a combination of like time financial investment and a little hint of risk but it was kind of hard to fit risk into this chart to be fair so think of cost as how much impact and i guess drain does this have on the people building this thing and like how much time are you gonna have to spend building and maintaining this thing and as a result of that how much less time can i spend building the functionality that our software is made to or built for and serves our users directly we break those down into three chunks which are ramp up time maintenance cost and off-boarding cost we'll discuss those a bit more in a bit because i want to talk about the x-axis which was so hard to decide on i kept picking additional arbitrary things but the one that felt the best was employee count because the number of employees in a business represents a lot of different things it kind of represents the success of a business because a successful business can hire more people but there are plenty of successful businesses that don't so it doesn't necessarily correlate with that that said a business with a small team that is very successful probably has a simpler code base and system to work in by choice so they might choose different technologies based on that there are also companies that have chosen or that know in order for them to succeed they need to have 2 000 employees in a few years and because of that technologies they choose might be entirely different because they are thinking ahead to where they want to be for the things that they're building employee costs is something that or number of employees isn't something that is a perfect one-to-one way to measure what technologies make the most sense but it's a good way for business like leaders and people running projects to think about how is this project going to change over time so if you have one project that is a side project you and your friend are working on you don't ever plan to have a hundred people working on it first is a project at work that's a greenfield thing that might get kicked to a team with 50 people in a few weeks and then might grow to a much bigger team with hundreds working on it in the future the technologies you pick for those situations should be very different and i think it's a good way to measure how we can decide between them so with trpc we should first obviously talk about the ramp up cost as much as i love trpc you do need to understand it pretty well to get started with it effectively and because of that it is not the smoothest thing to get started and the onboard cost is a little high once you have all the boilerplate set up though it is very easy to work with and usually it's a thing one person has to do and then the rest of the team can just cruise on top this has very much been the experience that we have had as you can see with the flat line here maintenance cost has been effectively flat as we've grown the team and continued working with trpc you just write functions and call them once it's all set up you're good to go however trpc does have problems where if you have enough functions and enough endpoints to find in it the typescript compiler starts to slow and down to a absolute crawl eventually crashing and throwing annoying errors when you're developing just because of the amount of typescript inference going on within trpc so there are actually code based sizes where trpc isn't a valid option right now and because of that you do have to plan for if a code base gets big enough to move off of it that planning is something you should do relatively early depending on if you're choosing trpc but like for me ping i want to write these functions as fast as possible and get functionality out to my users we have five people working on ping right now it is not that big a deal for us to make it way smoother to get those things out knowing that we can pay this cost in the future when there is a technology that makes more sense for us as the team and the code base grows so this is compared to other things well i'm going to self plug for a little bit because i want to point out an interesting detail about these costs there are ways to reduce them outside of the technologies themselves with trpc that boilerplate cost is massive but as i mentioned before there are other like once that's set up you don't really need to touch it anymore and the vast majority of the engineers working on the trpc projects i've worked on don't know anything about or care to know about that boilerplate they're just writing and calling functions because of that i worked with some of my community i should be honest they did all the work here i just came up with the idea to build a project called create t3 app that is has the explicit goal of knocking down the onboarding cost to be as cheap as possible so that you can get spun up quicker the whole project's uh bootstrapped and boilerplated for you with all of the weird interactions between things like next auth for authorization your database through something like prisma all of the modular pieces that i would assemble around trpc and the knowledge necessary to do that has been paid off in advance by the create t3 app maintainers and as a result the onboarding cost is a lot cheaper we also see here that the like maintenance cost is the same because the technology is the same it's just a faster way to get started and the off-boarding cost is i would argue a tiny bit more expensive because that's the point where you need to better understand trpc and kind of pay off the debt that you chose at the beginning by using a project like create t3 app but i honestly don't think any of that's going to matter until you're deep into moving off or migrating some heavy things on top of trpc so how does this compare to graphql well graphql is a bit of a beast the onboarding cost is significantly higher because you're not choosing one technology you're choosing like five and those decisions are all things you have to research make do and understand there are prescriptive solutions like apollo but honestly those solutions tend to fail faster i could put like 15 different lines on this chart for the different ways you can do graphql this is meant to be kind of like a vague generalization all that said if you do graphql write every time you add or remove something to and from your schema there is a cost to pay there your schema's like nature of it being consumed by so many different places many of which might not even be in the same code base means you never have a proper guarantee if you're making when you're making a change to the graphql schema that the clients will expect and respect that change that's an inherent maintenance cost to using graphql i watched us paying this off regularly when we moved to graphql at twitch it was absolutely worth it though because the alternative was com's challenges and cost between the back end teams and the front end teams working on different things the benefit of graphql here was not necessarily as a technology that magically solves all our problems rather graphql was a method for us to communicate better and define standards between the backend and front-end teams such that we could build and scale our applications more effectively that said if we ever had to move off of graphql we're screwed i intentionally have that line going off the chart here because it is unimaginable once you've deeply bought into the graphql ecosystem that you could reasonably ever move off of it but as with create t3 app there are ways to pay off some of those earlier costs i mentioned apollo before which is a good option but i really want to talk about another that i've been hearing more and more is the competition for create t3 app which is redwood.js redwood.js is a full stack type scripty like next.js like web development solution for full stack applications the big difference between it and something like next.js is that redwood has a very strong graphql layer between so when you want to get data from your backend to your front end you write a graphql schema for it you make those changes in the back end and just by really writing a typescript function and now you can call those things in the redwood.js client with ease the reason that i think that redwood.js can scale to larger team sizes than something like trpc or create d3 app is because of its use of graphql it means that if you hire somebody who does not want to use typescript or you have a very specific client or need where you have to be writing this thing in swift or kotlin for the mobile apps the graphql standard that redwood is built on allows you to consume the same apis on those other clients that all said redwood is built with the expectation that the majority of the consumption and the majority of the definition of your graphql exist inside of that redwood project so as it gets big enough and slow the benefit of graphql which is the decentralization of the back end with a centralized schema means you have to pay a lot of cost to move off of redwood so yeah it is important to know these things when you make these decisions because while redwood can get you a good bit further than the t3 stack can in terms of how far your business grows when you do hit that cap it is going to be very expensive to move off it and as you see here the end cost of any one of these technologies is very different betting on create t3 app over the the lifespan that you could use it for for a growing company will cost that company less time energy and like effort and sanity from the engineers that even trpc would and redwood.js will be at a similar point by the when create t3 app dies you see that that's right around like the same cost where redwood would be at that point however once you get to the 400 or so employee point again arbitrary the cost of moving off of redwood is significantly higher in fact once you've paid the cost of moving off of create t3 app that's the point where you get to where redwood is right then i again this is all very arbitrary it's going to depend a lot on the business that you're building or the projects that you're like working on but this is lined up with the experience i've had consulting with companies and talking to developers who have used all these different technologies that all said this is one of the biggest benefits of building modularly with create t3 app and trpc being relatively modular solutions the cost to move off them is pretty cheap and you can move to anything else at that point so what are some things that we should be considering when we do these measurements the one thing i didn't touch on quite enough in that diagram is risk i think the best way to measure risk which was hard for me to visualize would be the extension or potential shrinkage of the horizontal distance something could go trpc for example if your project has tons and tons of endpoints even with a small team you might have to move off it sooner which could cause that horizontal distance you get to be way shorter with something like graphql or even redwood you might need to start hiring a bunch of people who aren't engineers and the code base might make more sense as a monolith maybe you have one or two contractors working on ios and android and you just need a way for them to get that data and you really can't use react data because they prefer that thing that is almost an inverse risk where redwood lets you go way further than you might have otherwise but risk is kind of a horizontal extension or shrinkage in the context of that chart and every business has its own risk tolerance and you should be considerate of that as you make decisions about your technologies client needs are also incredibly important to consider i think that clients are to be frank the often forgotten part of these discussions will occasionally say things like yeah users will stay on our websites longer and get their their engage with them better if the ttls are significantly faster there's that famous amazon thing where it's like a what is it a couple hundred milliseconds caused like a 10 shrinkage in their number of checkouts i think that we talk about it when we can talk about like raw numbers that are exciting to us as engineers but when it comes to what the users need and how we can deliver it for them i don't think we talk about client needs in those ways it's important to think about what your users need and what they might need in the future when you make technical decisions it's also important to think about the current team you have who's on this team what technologies do they use what are they familiar with and how is this technology going to affect their current standing at their job not necessarily in like are they going to get fired way but in a how are they going to feel themselves about the work that they're doing technology choices have a huge impact in any given developer's day-to-day experience at a company and as such even as like a really opinionated business leader who's built a lot of technologies given the opportunity for one of my engineers to adopt something they're confident is the right solution and i'm less sure of even if that's something that might burn and fail it makes them happier and keeps the team content it might be worth taking that risk knowing that developer satisfaction is essential to retaining your team and building great things on top of all of this you need to be considerate of the future the future is hard to predict but it is important to think about it and what your goals are different projects have different expectations where i have a lot of projects i'll be the only developer on i have a lot of projects where if things go well all of the code i wrote will be deleted and replaced with code by the 10 000 engineer working on it as such the things you pick how modular you should go and all these types of decisions should be considerate of where you expect this project to be in the future that was quite a rant i really was excited to talk at composability summit as you all know i'm really into modular solutions and as i plug here create t3 app is the best way to start a full stack project with a modular set of tools you can pick from as you init you actually get asked questions do you want to your pc do you want prisma do you want tailwind do you want uh next auth or next off included and that lets you construct the application or the i guess boilerplate you need to start with for your project and at any point you can add and remove those pieces or swap them with other things that make more sense the goal creat3 app was to make it easier to onboard onto these new solutions without having to give up the off-boarding cost wins of the modularity in these pieces since we've made it easier to get started with these technologies you still get the win of how easy it is to get off them and the benefit of using them throughout without having to pay the upfront cost of getting started with them if you want more rants like this one or just more in-depth deep dives on all the things we talked about today make sure you check out my twitch twitch.tv theo as well as my twitter t3.gg is the twitter handle there you can find links to my youtube on both which is probably the best place to catch my content all of the things i do on stream that are worth watching i tend to upload on youtube a few weeks later so keep an eye out for that thank you again for having me here for the first ever composability summit this is a really cool idea for a conference i love me some good modular solutions and composability is one of the most important things to consider when picking your technologies and thinking about the cost and value you get from those decisions it's also without question the easiest way to reduce the risk of any technology bet that you make all that said thank you again for the time i really appreciate it peace y'all




## Making Minecraft 100x faster (by rewriting it in Rust) - 20241031
Minecraft is a game that is near and dear to my heart I honestly don't know if I'd even be a Dev if it wasn't for the time I spent hosting servers and playing around with Minecraft back when I was in high school I certainly wouldn't have ended up working at twitch but we're not talking about my history with Minecraft today we have something much more interesting to cover what if Minecraft wasn't so slow and no I don't mean the Bedrock rewrite Microsoft did in C++ that thing's a mess not only is it not better performance-wise it's also riddled with bugs and weird behaviors and it's just it's not the same game today we're talking about the Java version of Minecraft and the hosting of java Minecraft servers because it's not great I'm surprised cuz I remember back in the day all the things we were trying to do to optimize Minecraft server hosting I thought it would be better by now but it's just gotten worse there's many new server clients you can use to host Minecraft servers many of which are open source almost all of them are written in Java though and as such the things they offer are more apis and plugins and less performance and hosting wins until now because I just learned about a really fun new project named pumpkin and man the numbers they're kind of nuts we're talking about a reduction from 2 gigs of RAM and 24% CPU usage with 10 players to 27 megabytes of RAM and 1.5% CPU usage there's almost 100x reduction in memory usage and a 20x reduction in CPU usage in a lot of these scenarios of course to get there you're not doing this in Java this is a rust rewrite which is really cool but there are some gotas this whole Project's really cool and I can't wait to tell you guys more about it right after a word from today's sponsor blacksmith if you're already a Russ Dev you probably know that as fast as the language is the compiler is a bit less so many Russ projects and things in other languages too are very slow to compile especially when you throw them on GitHub actions what if GitHub actions were fast though and also way cheaper that's where blacksmith comes in I could show you their homepage but instead going to show you this this is a poll request for Tokyo you know Tokyo that one one prime shouts Tokyo is not fast to build it takes upwards of 6 minutes and 12 seconds to do those builds when you compare that to the 2v CPU which is roughly equivalent blacksmith box you end up with build times that are almost half as long 3 minutes and 51 seconds but if you upgrade you Splurge a little you go for that 4 CPU Box 2 minutes 47 seconds literally less than half as much time and it's not like they're going to charge a whole lot more either they're actually cheaper in this instance the get up action one cost about 6 cents and these other ones cost less than two that's a pretty sizable Gap this tagline sounds like clickbait but it's not it's literally as simple as swapping out the runs on in your config and running it you get a ton of free minutes every month the price is insane and it works on real projects node takes almost half as much time and costs about a third as much money to compile using blacksmith if you're working on real projects and the build things have gotten really slow you should give blacksmith a shot check them out today at soy. l/ blacksmith so we need to dive into the catches because this just sounds too good to be true the first thing that we should acknowledge is that this is not the first time someone said me the beautiful website days since last rust Minecraft server it has been 37 days since the last release of a Minecraft server software written in Rust which was FMC which I haven't even had a chance to look at yet FM C is another hyper performant Minecraft server implementation created in roughs for unparalleled speed and efficiency apparently they're going through a rewrite of it right [Music] now it's highly efficient they're showing crazy usage here it can import existing words worlds from vanilla this one seems further along than I would have expected but as mentioned this isn't the only one we've had a couple we've had a number of them the first was feather in 2019 then we had MCH PRS in June soon after graphite followed then veilance not long after that we had a almost 2year break before Hyperion dropped this one's still being maintained oh look at that still getting commits an hour ago they're still working on it that's really good to see and here they have a list of all the features that are supported there's a couple that are missing from all of these some of which are easy to implement many of which are not but we're not talking about these ones today we're talking about the one I am most excited about right now which is pumpkin pumpkin is a Minecraft server built entirely in Rust which offers a fast efficient and customizable experience it prioritizes performance and player enjoyment while adhering to the core mechanics of the game there are things they are explicitly not trying to do though which is going to make it a huge turnoff for a lot of people watching but for me is honestly kind of exciting obviously they say what they are trying to do security compatibility performance whatnot the important piece is here what they will not do they have no intentions to be compatible with plugins or mods for other servers so don't expect your old craft bucket plugins or your fabric stuff to work here they also explicitly don't want this to be the base point for someone else to go make their own framework for building Minecraft servers from this isn't meant to be a starting point for you to go build your own version of craft bucket it's meant to be its own allinone thing here's the list of features they are and aren't supporting I am surprised how far they've gotten along here the biggest missing thing for sure is World borders and world saving are both missing kind of a big deal this is some feedback that the dev respond I thought was really interesting performance differences look impressive from the benchmarks I do notice that world gen and saving is in though and these tend to be pretty expensive operations chunk gen especially can bring a weaker VPS to its knees I'm sure the benchmarks were taken at an idle state but I'd be curious to see how it Compares once those features are included also an important detail here this is the one I thought was really fun light recalculation the way lighting Works in Minecraft is server side replies from Alex are fun here I'm impressed with the benchmarks myself block placing and breaking is already supported but light currently doesn't or isn't so everything is dark we're working on it we want to add all the cool features like score scoreboards and teams and we already have an API which is similar to use like Brigadier for our commands we like to give players on low-end Hardware the possibility to host servers think I may test pumpkin on a Raspberry Pi or something one day very exciting stuff the lighting thing is hilarious though that the lighting for blocks and knowing which light to apply to which blocks is the thing the server does so when you make changes to the worlds like moving blocks that has to be recalculated and the r implementation is not doing that yet it is also worth noting that the actual Minecraft server standard isn't an open thing we don't have the source code for the official Java Minecraft server we've been reversed engineering it now for over a decade so the effort going on here is a best faith attempt at recreating the API largely based on the Recreations others have made in Java in order to try and get every feature and every API request response that the Minecraft server expects handled much more efficiently I kind of want to run it locally but I'm lazy so I'm not going to eh it I want to too badly I have rust set up I might as well right after a quick update of rust locally this is actually surprisingly easy to run if you have rust set up and on a somewhat recent version it's literally as simple as cloning the repo and then cargo run-- release also spun up decently fast I'm excited to give this a shot though open it up why is Minecraft itself less stable than the rust based rewrite of the server why is launching m craft the hard part tisk tisk multiplayer add server done I want to see activity monitor quick can I not make it smaller than that that's annoying I wish I could play on a different computer more easily so I could just see it hosting and see what the performance is like without Minecraft itself eating so much of my like usage but we can see here pumpkin using 200 Megs of ram oh no it's actually not that bad considering everything is I wonder if I closed the game oh no I closed the server accidentally that's going to kill the game um disconnected at least I'm disconnected now so now if I check utilization can I find pumpkin again cool yeah when I'm not in the server it's using four Megs of ram 0% CPU let's connect and see how it bumps 0.01% CPU it's working so hard okay it spikes one is doing the Gen steps there only a bit of lag some of the Gen but then it drops right back down and if I leave yeah it goes to nothing I think actually went there before I left you can see the lighting issues though because as they mentioned it doesn't know how to light stuff I forgot the hucky to start flying again I haven't played or creative in so long yeah so you can see how broken the lighting is because lighting is hard but it works and its resource utilization is kind of insane yeah minus the the lighting being entirely broken I'm impressed like it's running and it's running well it's usage of RAM is hilariously low I'm so used to spitting up like 8 gigs of RAM or more for a Minecraft server with any actual usage in it especially once you get plugins and involved the fact that idle it's using nothing is insane I've never seen a Minecraft server idle with so little resources this is legit I'm actually very excited to see where things end up with this project man the efforts to reverse engineer Minecraft are nuts there's this page that is the protocol for the Minecraft Java Edition which is their best attempt to reverse engineer everything the server does and everything the client asks for see how many points there are in this they have to reimplement all of this from the data types that are going to be used in these to the various different actual like request types that exist like set block destroy stage because blocks are destroyed in multiple stages block updates boss bars change difficulty calls like all of these things are different functionalities that the server has to reimplement it's kind of nuts it's kind of insane interesting comment in chat Microsoft isn't going to Care the C++ rewrite they use is light years ahead of java Edition no no it is not no as someone who's played a lot of Bedrock Edition this is actually delusion I I wish that was the case but it is not the case one thing I have heard is particularly rough with these rewrites and as far as I know none of them have figured it out is redstone and the program command block the idea that if you didn't know this you can basically write code in Minecraft by using logic gates and all of these crazy things with redstone when you're running Minecraft on a server the server needs to do all of those things if you didn't already knows about how Minecraft runs even in single player it's technically a server the single player instance used to be its own fully separate thing but at some point I think it was when they went from alpha to Beta it might have been a little after that they made a change where Minecraft always runs in server mode so when you play single player it's effectively spinning up a server just for you on your device that that you're playing within which means that the Minecraft server is what runs all of this logic all of the Redstone behaviors and commands are running on the server binary which means they have to be reimplemented when you do this reimplementation thank you chat for the clarification 1.3 is the version where that happened multi-threaded Minecraft server built for Redstone interesting this one of these high performance servers for Minecraft is actually built specifically for Redstone each 256 by 256 plot runs on a separate thread which allows for Less lag more concurrency and many awesome extra features this is nuts so just for context for those who aren't familiar with how crazy the things are that people make in Minecraft here is somebody who rebuilt the entirety of Pokemon Red and Blue in Minecraft using Redstone so reimplemented the entire cartridge and The Game Boy so that you could play Pokemon in Minecraft God the this deserves a video of its own but just like the the amount of command blocks in Redstone it took like it just it breaks rasterization and rendering in the game this is all of the the code that runs the game all command blocks yeah this is actually insane apparently according to chat someone made Minecraft in Minecraft using this project you have my curiosity [Music] one day we'll have Minecraft in [Music] Minecraft here needs some upgrades yeah he's running a crappy [Music] system this is the machine he built to run Minecraft oh boy oh God it's getting worse [Music] Hardware acceleration [Laughter] units oh man this is something [Music] else objectively inferior controller give me my Xbox [Music] controller why is the music so [Music] loud holy it actually kind of works leaves drop saplings crafting grid Jesus Christ he actually did [Music] it I something for more details on how here is there a GitHub the World download yeah the mcphs yeah makes a lot of sense that you need something that runs the red stone faster in order for this to be possible while all this red stone can run on vinilla Minecraft it would run as a frame every few days and hence in order to make it playable a server called MCH PRS which is the Minecraft high performance Redstone server is used to speed up the game to over 10,000x normal speed art Beauty you should be proud of what you've done here Sammy it is chaotic and terrible and I absolutely love that it exists so yeah rust rewrites of Minecraft are a thing and I guess my previous statement that Redstone is something that they struggle with was wrong I will honor that by clicking star here insane I haven't seen mstone and The Benchmark here is a lot better where they're using 9% of the CPU and only 400 Megs of ram but again if we compare that to what they're seeing with pumpkin 27 Megs of ram 1.5% CPU interesting I had no idea this the world of Minecraft servers had gotten this far it's really cool it's awesome to see that things have gotten to this level annoying because now when you're trying to find plugins it kind of sucks cuz you have to bounce between like 15 different things but still nuts I'm impressed I really am seems like Minecraft server hosting is in a bit of a Renaissance enough so to make a funny website like this but also enough so to be excited again I'm curious how you guys are feeling are you as excited as I am about the future of Minecraft servers or do you just want the game to work and don't really care about your memory usage let me know in the comments and until next time peace NS




## MarioKart.js Blew My Mind (Open Source + React + ThreeJS) - 20240228
you all have seen Mario Kart before it's the classic multiplayer game that we all know and love dearly from Nintendo but this might look a little different from the Mario Kart you're familiar with there's a reason for that this is in the browser this isn't by Nintendo at all it's actually written of all things react so how the hell did somebody recreate a full 3D game such as Mario Kart entirely within the react framework bugs and all obviously we're going to have to take a look at that first and foremost shout out to Alex Lun poo I'll never pronounce his name correct for all the hard work he's done on this project it's been going viral non-stop on Twitter and I'm really hyped that it's finally open source so we can dig into this project how it works most importantly actually play with the code of it which I'm hyped to do so from Alex hey dear 3js webgl react 3 fiber Community thanks a lot for your support through this project it's big and it's coming through today I announce the project is going open source after discussion with the wonderful Robin payout who made the Wind Waker project he's decided that it he's going to make it open source I actually chatted with Alex a bit beforehand cuz I've wanted to do this video for a while now and he was really concerned about the code being open source and the possibility of Nintendo going after him for it but there's too much value in this code being open that it's worth having it if possible we'll see how this goes I sincerely hope the additional eyes that come from my video aren't going to increase the likelihood that he gets dmca but this project is so cool one more quick thing I don't want to miss is that Alex isn't just open- sourcing the project there are a lot of pieces that he felt were valuable outside of Mario Kart JS such as the used Gamepad hook which is a react hook that gives you immediate access to a Bluetooth game controller which is dope getting your controller working in the browser was never easy but it was always doable with this hook it's now easy he also open sourced cart controller.js which is for managing the actual physics of the cart really cool to see these projects external separate and able to exist even if the worst possible thing happens in the original repo gets dmca really dope to see the work he's put in here huge shout out as mentioned previously this is all using react specifically react 3 fiber if you're not already familiar with react 3 fiber I have a whole video dedicated to it the quick tldr is it's a wrapper of 3 JS which is the easiest way to do 3D rendering in webg and the canvas that lets you write react components that create those 3D objects which allows a developer like Alex here to create something as crazy as a Mario Kart clone in the browser just looking at the code is fun but I can't help but play let's grab this code I'll clone this quick package lock he's using npm I mean each their own and here same deal you can even use your mobile phone as a control style which is super cool the fact that there are this many options is dope I kind of want to go fix that keyboard typo let's do that and see how the uh hot reloading is so I will move this like that so you can see the browser when I save I'm saving right now do you know how insane that is if you've ever been a game developer you know how obnoxious hot reloading is in your game engine usually you have to wait like a while and then have some hack to skip to the exact screen you were on because most game engines don't persist your state and location in this way when you make these types of changes some have interactive editors that let you go into the environment to make changes but this concept of like I just fix the typo or bring it back save and as soon as I save now it's less than half a second probably like closer to a tenth of a second from when I save to when I see the update very very nice but this is just the landing for selecting what control style you want which first off super cool you can just rate HTML on this because it is the browser and it his rendering elements but once you get into the actual game you'll see that we have actions add player State don't love this is all vanilla J yes we can work with that here's the canvas which as I mentioned before this is what renders the majority of the application this is where all the 3D stuff gets rendered within and this canvas is being imported from react 3 fiber react 3 fiber is the thing orchestrating all of this as well as providing a ton of the useful packages like the physics package like Dre which has the ability to introduce keyboard controls and a few other things that I'm sure will be very useful as we dig deeper but I want to take a look at the experience because this is where most of the game is that said you'll notice here some pretty interesting architecture it's so cool like if you're Game Dev this might make you a little stressed but if you're react Dev this should make sense preload all is their preload component for grabbing assets ahead of time so you don't have to wait for those things to come in later this is that loading screen that you see at the beginning when you first load that's pre-loading all of the assets then we have the physics which is the helper rapper context that gives the context of how the physics system works to all children underneath it once you've mounted this all the children have access to the physics which is important if you want children to know how the physics Works underneath that we have the keyboard controls which are important because the whole experience is going to depend on them and then we have the experience but this is the usual nesting that we expect in react the top to bottom State flow that makes it a lot easier to parse what's going on where and most importantly why but the experience is where most of the stuff is so let's take a look here Network bananas set network bananas is use multiplayer state where does this come from playroom kit interesting so that's the library there using for the management of the the multiplayer stuff this must be where the bananas are that have been set by other players makes sense and there's a custom key to keep track of that here too points loading error is used curve path points curve path. Json this is the path for the level is what I would assume Network shells this is for shells that are currently on the network this is how it's managing the different states and the things going on within the game and you even can use a use effect to handle things when we're adjusting in this case to Paris scale this will only happen when points changes which only happens once it loads in so we use curve path points we get this and then we scale it based on the points that we received and set the new points to the scaled version I don't love the name post but I I get what he's doing here and this is where I think things get really interesting camera is an empty ref the fact that the camera is an object and also a component that you can move around is one of the coolest and trippiest parts of using something like 3js because your camera is one of the most important parts of doing 3D anything and we've never as web dev's probably thought about a camera we just have the viewport and whatever is on the screen on the screen the idea of a camera that can move around in 3D space is fascinating and it gives you two places to change what the user sees instead of just the one being the browser window itself in use frame is a fun helper this runs outside of react so that it can update and run this code on every frame it's usually used for updating refs so that it can happen outside of the react render Loop which is one of the many hacks necessary to make something like react 3 fiber as performant as it is ooh I don't love this but I know I'm a minority with my hatred of long-ter Aries teach their own here's the controller component that returns once you've actually set up your controls correctly I would have made this a separate component rather than embedding it this way but to each their own so also a solo project up until recently so not sure how much he expected us to dig through every line of code here game started and players not map here's the player dummies here's the perspective camera which only mounts once the game started here's the map here's the item box here's the coin here's a ground here I'll just show you guys a fun example of how powerful this is let's quickly get in so that we see that box at the start confirm okay see that box at the start there let's make four of them but they need to be different positions so I'll just do10 0 10 now with just that one change we have four boxes instead of one no it's a simple silly example but I think that is so cool that all of the things we know from react all of the syntax and behaviors we're familiar with you can just make more of a thing you define this reusable piece an item box that has all of this crazy logic going on for how it works how it aligns the rigid body how it manages collisions how it paints its textures how its mesh has Shadows all of these behaviors exist within this component that now can be trivially reused and props passed to and from it however you want so cool and these are the moments like the first time I played with three fiber and realized you can just make a new component was crazy it's not like these are running in the same place that a div would like these aren't running in the same JS thread that react is at least not all the time they do and they initially render but all the stuff going on here specifically the frames the ref here which I'm assuming is being used for the position yes this should have been named position not a big deal by doing this within the used frame hook we're able to do all of this off the main thread that react is running on this logic doesn't block react which is so cool because react can be used to effectively say here's where different things go rather than being used to say here is where every single frame gets rendered and that split is weird as it feels initially of the place where you're saying what elements exist is different from the place where your animation logic lives I've actually found it to be really nice for constructing your state for your games and I've been increasingly impressed with the things that you can do with this framework as well as the quality of the code that I see coming out of it the fact that it's this easy for me as a person who hasn't done much game do to read this code and understand what's going on is incredible it's silly but just like calling a map on a JavaScript object to render 3D assets is mindblowing like that is so cool that's so cool can we DIY a network banana to uh make a fake one here I'm assuming this is the initial state so what are the things it needs ID and position we can leave the rest out say ID fake banana and the position is going to be the same XYZ so I'll just copy this position delete the rest of these Direct drop this in here it should hopefully maybe not oh cuz it's the component's already initialized so that's not going to add it and like reinitialize it what I could do instead Network bananas equals that change that quick H maybe the position for the bananas Works different let's see how it expects things again this is what happens when you don't have typescript but we can work around that go to banana oh position has x y and Z that's a fun thing I've seen in a lot of game Solutions inconsistency in how positions are defined cool I'm still going to drop this here just to make it easier so I don't have to reset the state let's see if we now have a banana we do look at that silly but I think that's so cool that you can just write JavaScript code and it works and any libraries or tools you're familiar with from JavaScript land will behave here pretty much exactly how you would expect obviously some rendering things like tell is not going to do what you expect here because this is running in the GPU on the canvas but basically all the other libraries you use well in fact I recall we saw this is using zustand for some things yeah it's using zustand for the core game State yeah that's a lot of things in your zand store but how cool is it that a library like that can just be dropped in and now we can call used store anywhere in the app and have access to all of the game state if you guys didn't know this zustand was actually originally written to be used within things like react 35 fiber it's by po Manders who are the same people that made react 3 fiber and zustan was meant to be a State Library fast enough to work in those 3D environments and here we're actually seeing it used properly yeah this is so cool I love seeing stuff like this I highly recommend taking a look at this code base if you're curious what crazy 3D games and things in react look likez it's phenomenal example I think this is super super cool I know react may not be the most popular choice for games but it's certainly one of the most interesting huge shout out to Alex for the work he did here thank you for open sourcing this genuinely really pumped with the project check it out if you haven't already and make sure you check out my other video covering react 3 fiber cuz this stuff is so cool thank you guys as always see you next time peace NS




## Memory management is coming to JS__ This is wild - 20241011
anything in this code look interesting as a JS Dev honestly most of it should I've never seen JS code like this it looks more like something like rust but this is real JavaScript at the very least this is a real JavaScript proposal and there are some people who are quite excited about it including of course Jared suner the creator of bun what is going on here though is this real or is this some Kyle of hacks in bun this is very real this is so real that the standard for it the stru proposal has just made it to stage two it only says stage one here but it did just advance and I am very excited to talk all about how strs could theoretically make JavaScript a really really fast language speaking of really fast let's quickly hear a word from today's sponsor H that's not good what did you do Google login is broken entirely right now apparently our design wasn't compliant with Google's policies the grayscale logo that we were using caused our off to get locked out entirely why not use clerk yeah since when does the Linux guy recommend using a service to solve the problem oh that's my exception when it breaks it sucks and that's coming from somebody whose audio doesn't work right now getting off working is easy dealing with multiactor SSO magic links and all the things you have to deal with with mobile it's just not worth it thank you clerk for sponsoring today's video Let's dive in I want to start with this example that Jared gave us this will make JavaScript competitive with go and rust at concurrency so here is the example we have the shared struct counter value zero counter is a new counter it allocates we we have an assert throw so just make sure that it throws when we try to do these things we can't write or read to the shared memory but if we write unsafe around it then we can actually call this but if we want to increment it properly we can make a lock with atomics mutexlock a given mutex and then increase the counters value very very interesting the problem today is that everything goes through post message there's no shared memory outside of the shared array buffer which is so difficult to use in practice not only is post message serialization slow it's also Bound by the event Loop microtasks and tasks get executed first very important if you try to to isolate your state in a way where you can change it in multiple places you have to do that changing through messages which always clone memory and get deep prioritized so this would allow us to directly update values without having to copy them all over the place or or make things with our own event and messaging system this will allow us to have mutable values that exist in a shared state of across things without constantly having to copy read write and deal with all of those additional layers so we get the memory safety and that isolation languages like go and rust and Zig don't prevent you from Reading data from other threads immediately each time you don't always have to clone everything you can just read stuff the rules for doing that are complicated but you can and JavaScript should let you do that too very very interesting stuff in to be clear the goal of a proposal like this isn't to give people code that every Dev is going to write I would imagine the vast majority of the people who are watching this video are application developers and y'all aren't going to be writing code like this but if you are building a really complex like web assembly library or some deep tooling around canvases that requires a ton of things to transform constantly or you're Paul Hensel building react 3 fiber those people can benefit a ton from this and expose it as libraries that we just call like normal JS and don't even think about it the idea of having an unsafe rapper like this like a straightup closure that says unsafe injs is so funny when you consider the fact that most JS code is already unsafe but yeah very exciting stuff let's read through this proposal to do our best to understand why people are so excited proposal introduces four logical features strs or unshared strs which are fixed layout objects they behave like class instances with more restrictions that are beneficial for optimization and Analysis this is the the key piece here if you have an object or even a class JavaScript it's possible to just like how do I put it you just add and remove Keys kind of willy-nilly the like it's kind of crazy that you can have an object that you want locked down to these specific keys and you just add new keys as you want trivially which can break a ton of things especially if you're not checking to see those other Keys exist or not and don't start with object. freeze no one actually uses that and it's barely what we're looking for here because every object could have new keys added whenever the way that the memory is allocated for that is a bit chaotic because we have to assume that object can change its shape entirely at any point but with a struct we're specifying no this is the structure of this object that's what the fixed layout part means it means this will not change it will always have these keys that are these types which means it's much easier to optimize in terms of memory there are also shared structs which are further restricted structs that can be shared and accessed in parallel by multiple agents they enable shared memory multi-threading huge deal especially if you can pass these shared strs to something like a web worker so you have multi- threads like actual two threads going at once that are accessing the same memory without having to pass messages between them this will unlock so much power in the concurrency stuff things like compilers written in JavaScript can benefit a ton from this things like web servers trying to run things in parallel can benefit a ton from this that crazy SSR framework I built that hopefully the video for that's coming out soon sorry for the delays on that one that would benefit a ton from this there also mutex and conditions which are higher level abstractions for synchronizing access to Shared memory this will be fun as well mutex and condition oh boy and also of course the unsafe block which is a syntactic guard rail to lexically scope where racy access to Shared structs are allowed so if you're accessing things in the struct in a way that could potentially cause race conditions you have to wrap it in the unsafe call The Proposal is intended to be minimal but still useful by itself without follow-up proposals the motivations are as follows enable new high performance applications to be written in JS and on the the web by unlocking shared memory multi-threading as well as giving developers access to classes that favor a high performance ceiling in statically and analyzable over flexibility very exciting stuff this is the least flexible proposal I've ever seen in JS where we can't just like do whatever we want we have to follow rules for the first time because we're thinking about memory for the first time thinking about memory in JavaScript is not common but it's cool to see a proposal that is encouraging us to do that like other shared memory features in JS it is high in expressive power and high in difficulty to use correctly The Proposal is both intended as an incremental step towards higher level easier to use like data Race Free by construction parallelism abstractions as well as an escape hatch for expert programmers who need the expressivity expert programmers and also the prime engine who I'm sure is going to have a lot of fun with this the two design principles that this proposal follows for shared memory are the following one syntax that looks Atomic ought to be Atomic for example the dot operator on shared strs should only access an existing field and does not tear and two there are no references from shared objects to non-shared objects the shared and non-shared heaps are conceptually separate with direct references only going one way interesting if you like me are trying to understand tearing the best way to get it is if something is trying to read memory like let's say it's trying to read a person's name and at the same time another thread updates that memory to something else then you get a tear which is the state the thing thought it was getting changed halfway through so the state it got has has is torn think of it like if you're in the gaming world like vertical tearing where if you get a new frame before the frame has updated painting on your monitor you end up with two frames that are misaligned on your display so let's dive into the actual things being proposed here first up we have trucks which by default are not shared an unshared struct is a refinement on the JavaScript class they're declarative like classes but layout of struct instances are fixed they have the following properties they're created with Integrity level sealed in other words they have a fixed layout specifically they cannot be extended with new properties the value in their prototype cannot change every syntactically declared field is writable innumerable and non-configurable very interesting that they can all be written and enumerated and not configured like all the fields in a struct are locked in kind of crazy classes didn't work this way before but JavaScript you know I also love that you can't extend them very exciting they have one shot initialization once a struct instance is accessible to JS code all their fields including those of their super classes are already initialized to undefined so there will never be a state where it's not fully initialized as soon as it's initialized all the stuff is there huge the struct does have a usable this value which is the one shot initialized instance on Entry as a result return override is not expressable super is still allowed but not required interesting so what that means is the struct can have a Constructor function that can call this dot in order to make something when you're constructing it they can only extend other structs the struct Constructor itself is also sealed instruct methods are non-generic their this value must be an instance of the struct or of a subass okay they still can have methods interesting I want some examples so here we have a struct box where we set this.x to be the value you pass in let box is new box zero box X is 42 x is declared assert throws box. y structs are sealed so you can't update these different fields because it's sealed so this is just like a really strict object or class this is cool if you want to make things that others can't with with huge I can already see use cases for this for me you can extend a struct from a struct which is interesting and here we've extended it it's a point which extends box and now it has X and Y we immediately set the Y value we Super X which calls the Constructor for box in order to do the thing that we did with X before then the return value is discarded so it doesn't matter you can't overwrite anything by returning different stuff here we have a distance function which returns mathare root of other do X where does other come from oh you're passing it in it's the distance yeah so other is the other point so you can pass in other and you're subtracting others X from this.x other y from this.y in order to do a distance function and here we just have y in order to declare that it has that value p is a new Point fakes a fake point and then we pass the fake point over and it can do the point prototype distance call P do distance sorry they're non- generic so you can't call it on the Prototype you have to call P doist directly you can't call point. prototype. distance which is the thing you do with classes which is disgusting and they've locked that away which I think is really good shared strs shared strs are strs with even more restricted Behavior so as to make them amenable to be shared between different agents their fields can be accessed in parallel by multiple agents shared strs in addition to the properties listed for strs above have the following additional properties they can only extend other shared strs they have a null prototype or they cannot contain instance methods or instance private names their instance can be communicated to other agents without copying their fields can only reference Primitives or other shared structs so they cannot point to unshared values so you can't point it at an object that is accessible externally it has to be either a struct or a primitive value directly they also can't be frozen which is interesting but makes sense that they would change the shape of the thing which must be immutable to be amenable for sharing so here we have a shared struct new shared box another new shared box we have the unsafe where we allowed to do things a shared Boxx equals object so shared Boxx 42 that's fine because it's declared in the right hand side this value is a primitive here it's fine because this is also a shared struct but this is not fine because empty object is not a shared struct so that will throw even in the unsafe wrapper there's also a reflect helper that you can call to see if something can be shared and this will assert that shared box two can be shared and that empty object cannot be shared the reason that this is so beneficial is right now when you spin up a worker injs so you're running two threads of JavaScript at the same time they cannot share values between the two so if you want to pass an object to a worker it cannot update the object without sending it back to you and all of that passing back and forth copying of values makes the benefits of workers significantly Less in terms of performance you have to eat a ton of memory in order to share things between these instances the only thing you have is shared array buffer which cool it's fine that you can share a buffer but that's not like syntactically viable it's just a way to like dump bites back and forth this allows you to share actual objects without having to instantiate them in both places where when you transform it in one place it affects the other this is proper memory sharing with multi-threading where you can have different objects effectively that two threads or more can work on at the same time that's easy to get wrong there will be plenty of bad code written with this I'm sure but the benefit of well-written things like Frameworks and compilers can now multi-thread without just blowing up memory and without having to copy things constantly huge huge potential win that is so cool this is what I was looking for I'm happy they put this in here and they show the worker code where we have shared box is E.D dat. shared boox and we have this unsafe shared boox dox equals worker which is okay because rhs is a primitive and we can log what that value is the above program is permitted to print out any interleaving main worker worker worker or worker main that makes sense because in this code shared boox X is Main and it will log that here it's going to log worker but it could log in any of these orders because it's unsafe and you know that going in because we're assigning and logging in both the worker and here but we're referencing the same shared memory instance that means that by the time this gets set to main this might get set to worker before we get to the log and now they're both going to log the same thing fire then these both fire but the order is not known and that's why these things are unsafe because you can't guarantee that this code will always execute in the same order even though there is no event Loop like putting things at the end of the queue previously when you had these weird like orders being different it was because async was called it would bump things to the end of the Q and the Order of the Q is what would determine the order things happened now there is no queuing happening it's just unsafe because you called it unsafe and you're doing things that are unsafe it's a skill issue but the fact that JS is allowing these skill issues now in order to make really optimal code is super exciting and you can see why something like an object that is tracking all of the files for a compiler could use this to not have to reinstantiate all of those things in memory you can just distribute that across a whole bunch of workers to do the work and they're all referencing the same thing that's really powerful if you're good at making sure things are used correctly they also have shared arrays which is very interesting they are fixed length arrays that may be shared across agents fixed length says a lot but specifically that means this can be optimized really well at an engine level and I'm sure Jared from bun is looking at this in drooling they are a special case of shared structs there's no special Syntax for them they have a readon length property that's cool so they have this assert that sh rate length is 100 because we set it to 100 it can't be anything else and assert here that since we instantiated it they're all initialized to undefined by default we didn't have the worker that we spun up we post a message to it we set zero to Main and then in here we set zero to worker and we do the same thing with the log so we're going to have the same potential outcomes because again it is unsafe it's kind of cool they're showing the examples of how this is wrong so to speak because they want you to know this is unsafe for a reason but it also allows for so much power this should be scary to most people but this should be very exciting to people working on compilers people working on really performant tools in the browser people working on crazy 3D stuff this like Mo if you've never used a worker in JS before if you've never declared a worker with a different JS file and posted messages to it this probably won't benefit you at all but to the rest of the chaotic Dev world that does these things which I just barely dipping my toes into this is very exciting I am excited to play with this so an important detail with the memory model is that a given read Can Never Tear from a shared struct regardless of the order that things are happening because the read will only see one of the rights that happened and it will not read the multiple like if you write twice during a read it's only going to read the the first thing that was written it's not going to read different things during that one read so if we like the thing that we would never happen we go back to this example is you would never get marker like like Ma and then it transitions over to be the other value like you never get this to Output marker it's going to Output one of the values that was written even if another one is written as you're reading it that's a little bit of safety I was not expecting so it's cool they implemented that I'm not smart enough to understand what any of these words mean so if somebody is feel free to make a better video because I would definitely watch and plug that in order to write thread safe code there are more pieces necessary and they propos those here with mutex and condition all under atomics atomics at mutex is a non-recursive mutex it's a shared struct with no Fields it's used via static methods if the perrem Prototype becomes part of The Proposal the static methods will become prototype methods cool so here we have a lock Helper and the lock keeps track of if something's unlocked or not so we can look at the example here lock token get locked unlock cool let's see the actual use of it so we have this Microsoft SharePoint example funny that that's actually a hilarious name because it's a point that's shared and Microsoft has a tool called SharePoint that's a clever joke I props to the author for making that one that's hilarious so points a new Microsoft SharePoint point. mutex new atomics mutex worker worker. poost message unsafe using lock equals atomics mutexlock point. mutex point x is main point Y is main then this other using lock Atomic mutex lock console log those values assume this agent can block and here we have the same deal using lock equals Atomic mutex lock point x is worker point Y is worker C multi-threaded programs are difficult to write because races are subtle and difficult to reason about is that Russ's excuse for making it so hard or is that goes excuse for making it so bad to decrease the likelihood of incorrect programs access to Shared structs are only allowed when lexically contained within an unsafe block note that Shar toay buffer access remains allowed in all context for backwards compatibility the unsafe keyword is a clear signal of intent that a developer is choosing to work with shared memory multi-threaded code presence of an unsafe block is an indication to code reviewers that special care must be taken during review I love this by the way it's so important that when you do things like this it this clear incode riew that something is happening and a lot of tools that I've been losing interest in are because they don't provide enough Clarity in code review about what actually changed this is really cool I like that this they're thinking through code review and how these code bases are maintained over time it also acts a syntactic marker that Future tools like lters typs Etc could use to identify data races and unsafe blocks otherwise treated at the same as a normal block its only distinction is that it explicitly labels the code within the block as potentially containing non-thread safe code like in this case unsafe code the general expectation is that any thread safety concerns should be addressed by the developer as control flow exits the unsafe block for example you can utilize using to synchronize access to a shared struct via a lock this should have code block wrap on it for sure but here we see unsafe code and we have this increment function that requires you to be locked before you can increment the value to make it safe even though we can't increment it here we can when we call the mutex lock good stuff and you can here as well which is nice the the one thing people are probably going to be tripped up by is you can't even read shared memory unless you're in an unsafe block so you can't do anything with the shared struct counters value unless you were living inside of the unsafe which makes consuming these things harder so my guess is how this will be used by libraries is these shared strs are going to be implemented in the library and values will be exposed in more traditional methods that's my guess the unsafe keyword is a syntactic marker that applies to lexically scoped reads and writs of the fields of a shared struct instance within an unsafe block any lexically scoped accesses are permitted even if they are nested within another function tocar in the same block interesting so that's actually really cool so we have this function that takes counter oh I no it's it doesn't carry over to invocation of functions declared outside of the unsafe so we have this function even though we're calling it inside of the unsafe boundary here it will still error because the code is defined outside of the unsafe call very interesting that actually again helps a ton with code review because if you were to go change this function and not realize it ran inside of unsafe that would kill you now you have to define the function inside of the unsafe scope weird but good I like this this unsafe already indicates a transition boundary between thread safe and unsafe code there's no need to declare all calling code unsafe as you might need to do for async and await interesting is this is it's painting the same way async and await do where once one thing has to await everything up does to unsafe does not mean everything above it or even everything below it has to also be unsafe the unsafe keyword itself does not entail any implicit sync or coordination as that would be in opposition to our performance goal that is actually really cool that you can do this all synchronously as far as JS is concerned instead the onuses on devs to be cognizant of thread safety concerns that they Define inside of unsafe blocks as such a developer can choose the coordination mechanisms that best suit the needs of their application be that a mutex a lock free concurrent DQ or other crazy things this is going to be fun this going to be real fun apparently they're also planning on async locking and waiting for these things and wasum garbage collection interoperability so if you're using garbage collection with wum then you'd be able to have these clean up or not properly very exciting stuff they also don't care about the type system for it the immutability side they're not exploring binary data overlay views is too many words that I don't understand fully this is going to be fun hope you guys are excited as I about this proposal I know it's not for everyone to write but it is for everyone to have faster stuff and who doesn't love faster stuff if you want to hear about all the other cool things coming from these JS proposals keep an eye on the channel because there's a lot of stuff that happened in this last meeting until next time peace NS




## Microsoft Cracks Down On VS Code Forks - 20250410
turns out a VS Code for can be a billion-dollar company we have a couple of them now including my editor of choice Cursor i am also an investor just to be clear but I'm an investor in Microsoft too which is the company we're mostly here to talk about today because a bunch of people using Microsoft's extensions for VS Code well they are for VS Code but they're using them in other editors they started seeing this error all of a sudden people who are using the C++ extension for VS Code inside of Cursor or Windsurf can't anymore it's not just the C++ extension there's a bunch of others too including .NET and a handful of other things and uh yeah people are unhappy this isn't as simple as it seems though it's not just Microsoft randomly showing up and trying to ruin everything for their competition there is some subtlety here that I think is worth engaging in and as much as you might think I am biased I going to be a little bit harsh towards Cursor here too so since I have more money in Microsoft than Cursor I'm hurting a bit right now on the stock market so let's hear a quick word from today's sponsor before we dive in if you're building a small app with not a lot of users today's sponsor is not for you but for those who are actually trying to make a product that is used by enterprises you should definitely check out work OS these guys get O and when I say that I don't mean they make it easy to set up they do but they solve a lot of the other problems with O that you're going to run into especially as you try to target large businesses these guys can handle all the SAML and SSO compliance crap that I don't even know all the acronyms for they do it really well somebody who's been trying to set up more of this myself it's not been fun radar is dope by the way it's one of the better ways to protect against bots i regret not using it for T3 chat legitimately it could have saved me days if not a week or two of work don't take my word for it though there's a pretty absurd list of companies here that are using work OS everyone from Cursor and Verscell to big companies like Carta and OpenAI it's nuts even Plaid is using them now which is crazy if you think about it if you're trying to grow your revenue you're trying to sell to big businesses and all of these pieces are stuff they're going to ask for or they're just going to ignore you because you don't have it fun fact most of the time you work with these enterprise companies they need to integrate all the off stuff on their side and doing that can take weeks of back and forth and a bunch of handholding around getting the right URLs in the right places and it's chaos unless you use work OS then it's two clicks you can just add an admin portal to your app for the IT people at the other company you're selling to to get everything set up on their side i am thinking through all the time I've spent doing the stuff in the past and regretting not using work OS i do love the visualization here all the chaos of helping people set up the right off in the right places where do they find the right setting in Octa all that or you can just click two buttons if your users matter you should take care of them correctly check out work OS today at soyv.link/workos so what is going on here this is a picture from a GitHub issue that somebody opened on the cursor repo this is upsetting because the C++ built-in extension for just basic syntax highlighting and all the other things you expect no longer works so if you're a C++ dev using cursor this just suddenly broke for you and that sucks i'm not going to pretend otherwise obviously this is not great a handful of people would go back to this old version and it was able to work correctly there was also the install specific version drop down that seems to be kind of gone now which is frustrating it's going to be fun i know more than most cuz I've published a VS Code extension that's somewhat popular so uh I have a lot of thoughts here seems like they're even suppressing different older versions when you try to install different ones which is fun thankfully at the very least they were able to get the C++ extension working and they have a plan going forward in order to make things work long term very excited for all of that but I want to break down what's going on and how we actually got here we need to start with the editor that kind of kickstarted this whole VS Code type revolution i want to see if you guys can guess in chat which editor I'm thinking of that kickstarted all of this adam Adam Adam very close very close guys here we are sublime Text so my first hot take people are going to be pissed about is that Sublime Text started the minimal extensible editor revolution not discounting what like Vim and Neovim and Emacs and all of those things did but like yeah that's what I thought sublime Text was before even Neo Vim which is obviously significantly more extensible than traditional Vim so I stand by my statement the idea of a minimal editor that is extensible with a communityrun marketplace really started with Sublime Text that said Sublime Text didn't really have this functionality built in it was kind of modded in by the community vim was extensible is the most you've shown your age in a minute Ethan as smart as you are you've not been around long enough to know how miserable it was to try and add anything to Vim there's a reason the whole community moved over to Neovim the extensibility in Vim was absolute garbage i would even make the argument that Neoim felt more necessary to exist because Sublime showed how powerful a community like that could be yeah Viml is terrible i'm happy you guys get it anyways because Sublime Text was so frankly better than anything before it but also wasn't built for this level of extensibility and most importantly wasn't open- source sub changes needed to happen so Sublime had community extensibility free to use fast as hell minimal too this combo was very very interesting to the greater like software dev world where it was free fast community extensibility and generally speaking kind of minimal big part of the community sensibility is that it's not just like possible but the tools are relatively accessible it was a bit of a mess with Sublime simply because it wasn't originally built into the editor it was a community thing that you would run in Sublime to add the extension capabilities but very quickly became more and more core to Sublime and the community around it the community accessibility was huge in Sublime but there was a catch not open- source sublime Text was a paid editor still is to this day it's free to use but every 20 saves if I recall a little popup comes up saying "Hey you should pay for me." And even when I was like working at Twitch I still left it in the free tier because it was just easier than going through the process getting a license paid for by Twitch so even though it is free to use it is a paid editor worth considering anyways because of all of these things and a certain company that cared a lot about open source you might have heard of them GitHub decided to join in and GitHub introduces a new editor named Atom atom was built around community extensibility so it was even easier to add extensions create them and all of it was in JavaScript the reason it was in JavaScript wasn't just because they wanted to make it more accessible it's because the team who built it was mostly a web development team and if they wanted to make an editor that worked across all platforms they'd either have to hire native engineers for Linux for Windows and for Mac or they'd have to figure out how to make it work with web technologies which is why they invented a certain technology you may have heard of Electron yes if you didn't know it Electron got its name because it's one of the most important pieces of Atom the editor it was built to make it easier to distribute one program written with web technologies across all platforms and it was the only reason could succeed it's also one of the biggest reasons that I think Microsoft started paying attention to GitHub it was fully free and open source big deal very big deal still relatively minimal and obviously since it's fully free and open source you can just use it for whatever you want this made Atom a very very compelling new option even though let's be real it was a bit slow especially compared to Sublime atom didn't always feel great to use it was also missing a lot of like the deeper integrations you would expect from a traditional ID sublime kind of was as well but more of that had been flushed out by the community at that point atom didn't really have things figured out for the traditional ID experience also it startup times are garbage i specifically remember that I personally was finding myself still using Sublime for the most part simply because I liked the support I had for gigantic files i already had my extensions and everything set up and I didn't feel like I was getting an upgrade moving to Atom but Atom really broke new ground and I know a lot of devs that first editor ended up being Atom which is still kind of crazy when I think about it especially because Adam is now dead this trend of minimal extensible editors kind of forced Microsoft to think about where their editors stood time for the next controversial take I'm sure people will love visual Studio to be clear Visual Studio not code not VSC just standard Visual Studio it's one of the best and most comprehensive IDs ever made as someone who did their time in Eclipse I've always been kind of floored at the level of capability and quality that exists in Visual Studio it was so far ahead of everything else going from the entirely broken unstable experience using Dreamweaver and honestly even Front Page back in the day to Visual Studio with.NET net was huge huge quality of life improvement and it really helped pioneer what we think of as the modern IDE with like a play button in the editor with a test suite that you could run from the actual editor UI and enough going on that you weren't in the terminal the entire time you were building it was genuinely groundbreaking it's still to this day one of the best IDEs ever made and more importantly one of the best IDE teams ever made so imagine you're the exec in charge of this crew here you know they have built one of the best editors ever and that the team building it knows more about good editor experiences than almost anybody in the world yet you look over here and what you see is that a ton of devs especially earlier career devs are hopping on this new wave with these open-source free extensible editors that are a much worse experience than what you're providing with Visual Studio you start to think you start to think a lot and when you look at Atom and you realize its biggest flaw it's not Electron it's that the team building it is a webdev team sure the fact that it's a webdev team resulted in them using Electron but it also resulted in it not being the best editor it possibly could be and that is why Microsoft starts VS Code the reason for this is that it was very clear the community wanted tools like Atom and Sublime and Visual Studio in its current state would never ever fit what we were we're looking for as a more minimal editor like I can't imagine building a traditional website in X.js using Visual Studio it just feels like funny so they started VS Code as like Visual Studio light almost with the explicit goal of making it easier to get started with and make more extensions for a Visual Studio like experience it was very much positioned as Visual Studio for webdevs which I honestly think is a really good decision at the time as web dev stuff was getting more and more popular as React was starting to blow up Node was getting more and more prominent too it made a lot of sense for them to put a second editor out there to be the thing to deal with all those technologies to get out of the way of Visual Studio even just as a way of keeping Visual Studio from getting cluttered I think this strategy made a lot of sense to describe the characteristics of Visual Studio Code with my little drop down i'm just going to copy paste this one for no reason in particular vs Code oh huh built around community extensibility electron fully free and open source less minimal includes useful tools for TS in particular and it was a bit slow less so not like is it as fast as Sublime no but is it as slow as Atom absolutely not it's relatively solid performance i find that the things that slow down VS Code tend to not necessarily be VS Code rather the extensions you're running TypeScript server those types of things but those can be slow in other places too there is one other important piece here though typescript one i don't think anyone expected Typescript to be the gigantic winner it was including Microsoft and the TypeScript team it's pretty absurd the level at which TypeScript just came in and dominated the space and VS Code was without question the editor for TypeScript that kind of gave them a win by default with TypeScript success but VS Code as an editor was good enough that the whole community started moving over to it but I would say almost inarguably VS Code's initial success came from the fact that Typescript was doing so well that people wanted the best TypeScript editor and VS Code was obviously that cuz there was a lot of alignment between those teams vs Code showed that the structure of Atom could be executed differently and made into something way better and way more powerful and I honestly think it's one of the biggest flexes ever that the Visual Studio team could come and take someone else's playbook and make something so much comically better that eventually the alternatives just shut down and that's what happened atom is officially dead deprecated no longer being maintained the company that built it GitHub got bought by Microsoft in my opinion there's a lot of reasons that Microsoft bought GitHub and most of them make a lot of sense the biggest by far is developer sentiment getting a product that developers really like because at the time Microsoft was struggling to get developers to like them but one of those pieces was without question Electron and it's funny how this all comes full circle back to Microsoft and where we are today but remember the thing I just said VS Code shows that a good team can take someone else's playbook execute 10 times better and win huge because again VS Code and Atom very very very similar and it is effectively inarguable that VS Code would have happened without Atom like it just wouldn't vs Code is Microsoft's attempt at re-rolling the Atom playbook and the only reason we don't call Microsoft an evil copycat is because they then bought GitHub so it's fine and seems like chat just realized where we're going here cursor pulled the VS Code yes the same way that just absolute absurd amounts of work went into making Electron a capable platform for building real applications and then VS Code gets to just piggyback on all of that cursor is doing the same with VS Code it's weird when you think about it this way but I do really believe it this is the benefit of open platforms is you allow for innovation to happen on higher levels like that and I think the innovation that we've seen with a tool like cursor despite the fact that I'm an investor obviously account for my biases but I'm also I again have way more money in Microsoft right now and it's hurting so yeah cursor really meaningfully improved the editor experience I was having and I was skeptical at first i churned probably three times before cursor really stuck for me and now it's just essential to the way I write code i have a video plan where I talk more in depth on how my way of writing code has changed so meaningfully since I got more cursor and AI build but I spend way more time thinking and planning how I want to build the thing i'll sometimes have multiple plans and then I can go into cursor and try out these different paths way quicker and figure out which one actually ends up making sense it's meaningfully increased the quality of the code I'm putting out not because it's a better coder than me but because I can try more things it's changed the way I code and I'm very very thankful to be using cursor every day now that we've hopefully established this you might see where we're going cursor is built on VS Code roughly the same way in many senses that VS Code was built on top of Electron and Atom it's fair to say that VS Code wouldn't exist without Atom and obviously cursor wouldn't exist without VS Code kind of because funny enough believe it or not they originally weren't using VS Code for the base of cursor they were using something based on top of code mirror but they moved over to VS Codium when they did that they were using the open VSSX marketplace which was created originally by our friends over at of all places Eclipse because they wanted a better embedded editor for a bunch of different platforms so they built Eclipse Thea which is a vendor neutral fork of VS Code and they introduced Open VSX which is an open extension marketplace for VS Code formatted extensions which are VSX files and that's what they used for cursor used previously to be clear because starting near the end of 2023 they moved over to the cursor marketplace here is where the speculation is going to start a bit though because we don't really technically know what the cursor marketplace is as far as I know there was never any way for a developer to publish their extension on the cursor marketplace directly and it also seems like a handful of extensions weren't there because they had this post they made at least as far back as November or before this article's existed on the cursor site since at least October of last year not quite 2023 sadly when a lot of this stuff is relevant so it seems like they got to do whatever they did smoothly for around a year then there were enough questions about certain extensions that were missing that they published this article that showed the solution you'd go to the Microsoft Store you would click the download button to download the extension from the marketplace you would open the extensions pane and cursor and then drag it in this article is still up right now shows you where to go where to drag it and how to do it so let's try it let's grab mine uh material theme sue material theme but I won't sue you here we are so we're here and then what's the next step under resources click download extension let's do it resources huh here's where the fighting back starts microsoft has been making sly changes to make it harder and harder for others to build the VS Code marketplace in and this is one of those changes they removed the download button and I know for a fact this has been there for a while now because I was trying to do this in order to get the possibly spyware material theme from the original creator a while back like end of year a while back and I couldn't so they've had the download button gone for a while now so this article is technically not useful anymore because the download extension button is gone microsoft has cracked down on your ability to download the extension files outside of the official Microsoft Store in VS Code the reason that this hasn't affected many people I think is because of where most cursor users came from most cursor users came from VS Code this is starting to change now that the whole vibe coding thing is going on but for the longest time cursor users didn't come from Visual Studio they didn't come from Xcode they almost all came from VS Code and since setting up cursor will allow you to import all of your things like your extensions from VS Code I don't think many people had to actually go search for and install their extensions so they never ran into a handful of these problems were those extensions getting updated properly probably not but as as someone who ships software people install on their devices most people gladly blindly run very outof-date software without even knowing and I am pretty sure a big part of why this didn't become a drama until recently is because most of the cursor users that have extensions that they have strong feelings about just had them all come in from VS Code anyways but that's not the important details here back to September in 2023 it is my belief and again total speculation here i don't have confirmation but it is my belief that the cursor marketplace is a wrapper around the official Visual Studio marketplace which again total speculation here i'm not saying this is somebody who has inside information or any additional details from the company so I went out of my way to not contact either parties as to not bias me this is very very very very very likely to be against Microsoft's terms of service so remember I just said it's very very very very likely that Microsoft's terms would explicitly prevent what cursor was doing i'm less sure because this version of the studio marketplace terms of use from 2021 doesn't have anything that would suggest what they were doing wasn't really allowed beyond this microsoft's publicly supported interfaces including without limitation through automated harvesting spidering or scraping the marketplace so scraping was not allowed they say password hacking mining whatever not allowed they are not very explicit that this isn't okay that wrapping it isn't okay it I thought there would be a much more explicit call out here there isn't and I'm saying that so confidently because they published an update in January of this year that is much much stricter you may not import install or use offerings published by Microsoft or GitHub or Microsoft affiliates in any product or services except for the inscope products and services that's a very very explicit call out very big difference here i can now pretty confidently say that up until these changes were published making a wrapper for the official VS Code marketplace iffy on where it stands terms-wise they wouldn't have made this change otherwise but it does make a lot of sense so yeah my guess is this change might have been planned or started earlier it's possible they even contacted Cursor and told them "Hey by the way we're going to be making these changes we're going to be more restrictive." And my guess is that that was when they made the move over to using the Open VSX marketplace and that's when people started reporting in November that their extension wasn't showing up because they only had published it on VSC's official marketplace not on the Open VSX marketplace and again I think this didn't become a big story then because most people just got their extensions from VS Code and the important ones for things like C++ support and Python support would all be bundled by the editor directly that is what changed and that is what's scary here april 2023 cursor moves from code mirror to VS Code september 2023 Cursor introduces the cursor marketplace which we believe likely a wrapper of the official marketplace up until then it was using Open VSX at this point they built their cursor marketplace which I believe was a rapper then I'll vaguely say September 2024 it's actually I think October is more confirmed or at the very least we know for a fact it's November so I'm just going to say November november 2024 cursors marketplace is now based on open VSSX official extensions can't be searched for in editor this is also the same time that they published that article I showed before how to install any VS Code extension in cursor my suspicion is that all of these things happened around the same time because either they were expecting a terms of service change or it had already happened and we just don't have logs of when that TOS existed so as far as we know it was January 2025 where Microsoft publishes stricter toos for marketplace they have changed the name to be a bit more generic and it also included the Nougat stuff that they own but this was when we know the new terms were out here's the earliest confirmation 64 days ago so this would have been early February the change was made where you couldn't download from extensions on the VS Code store also interesting Isidor's hopping in here he's been super helpful with me with all the chaos around the material theme stuff so I do trust him a lot so when he says that one of the main reasons for removal of the download extension button was that it wasn't supporting pre-release extensions because of how it was doing the download of the newest version which was problematic for splitting version types and having pre-release versus the main version it would just always download the latest which wasn't always the right thing again February confirmed by the Microsoft team they did remove the download button but they had internal reasons and tickets that made this happen so February Microsoft removes the download button from the browser version of the marketplace and this is where my conspiracy theory starts i'm just going to drop it now and I'll fulfill it later i don't think this was one decision at Microsoft to hurt all of these forks i think this is a lot of teams that aren't necessarily orchestrating together making decisions that previously wouldn't have mattered because VS Code was VS Code but the change of what the role of the VS Code platform is has resulted in certain actions that likely were taken for other reasons looking like an attack on something like cursor so my conspiracy is that I don't think this is fully intentional we'll get to why I think that as we go so February 2025 the download button has been removed what happens next so nothing happens in March as far as I know but at the start of April people start seeing the error that I open this video with the C C++ extensions may only be used within Microsoft Visual Studio Visual Studio for Mac Visual Studio Code Azure DevOps and all these other Microsoft products clearly being restricted from these other things and to be clear this is always in their terms and also of note the license for the C and C++ extension for VS Code was never open source it's a source available license they never open sourced their C and C++ language extensions because they're very complex and obnoxious and part of other Microsoft stuff the fact they're source available is cool but they are not open source to be very very clear wait is that true because this is MIT licensed um I'm now confused about the gap in the licensing here like can I build and use this or does it pull in things okay the runtime licenses ah okay so the runtime is licensed differently the extension isn't it's confusing so if somebody was to fork this or set up an autobuilder for this an embed system for it I wouldn't be surprised if they accidentally did that assuming that they would be following the license because if you go here you click license it's MIT licensed doesn't seem too suspicious even here the binary files are included in the official VSSX files distributed by Microsoft they're governed by more restrictive proprietary licenses makes sense but I even instinctively glanced over that and assumed it was MIT which it's not and I'm sure that is the case for a handful of these like if I hop into the license here Python debugger is MIT the Pilot is only available in binary form and released under a Microsoft proprietary license you get the idea the licensing for a lot of these extensions is confusing it's worth noting that the .NET extension is actually something that requires a paid Visual Studio subscription because .NET's very deeply built into Visual Studio so there are people who are paying for Visual Studio subscription but are using Cursor or Windsurf and they're installing this extension which is now restricted people who are paying for it can't use it anymore but also shows the weirdness of that relationship between these language servers these extensions and the actual editor but I don't necessarily think this is just an attack on their competition we'll go into why I think that in a bit so as of April 2025 certain Microsoft language extensions are now being restricted on nonofficial editors and this all seems pretty clearly planned especially when you learn that right around the same time here Microsoft releases agent mode plus MCPs for VS Code it's like so obvious that the reason Microsoft suddenly restricting all of these editors is because they added the functionality to VS Code and they want to be the better option right kind of and here is where we can finally now with the whole timeline roughly structured go into Theo conspiracy land my honest suspicion here is that this guy the download button being removed this guy the agent mode and this guy certain extensions being restricted are three different decisions made by three different teams that have very little to do with each other i do not believe this is some higher level orchestration because you could very easily look at these three things and say this is the Microsoft plan to destroy cursor in Windsurf i really don't think that's the case istor very clearly from his reply here does not seem to be part of some internal plan to destroy cursor it is his understanding that at this moment cursor is just using open VSSX it's very clear just reading this that he's not part of some plan to destroy these forks he's very transparent and real here about where things are at what his understanding is and why this change was made they're not hiding the reasons here we can speculate on the plan but this isn't a thing that this this well planned that's not how these big companies work there isn't this isn't Apple there's no planned execution path it's Microsoft it's a bit of a mess it's a beautiful mess and they can make some awesome things but I really do not think this is an example of Microsoft conspiring to destroy their competition the only thing in here that I would say is clearly that is the agent mode and MCP stuff but even that is like relatively unicrosoft because Microsoft has a partnership with OpenAI but with all the agent and MCP stuff they just put in VS Code the demos are using claude interthropic which is competition with their biggest partner and Google microsoft and Google hate each other so for them to be using Google models shows the the level at which they want to make a good editor here and how hard they're willing to play to compete on the editor team directly the team working on the language extensions in particular the C++ ones.NET ones and I guess also potentially the Python ones that's a different team possibly for each of those languages especially on the .NET side in my honest guess genuinely this is what I think happened here i suspect the net team was getting bug reports and some of those bug reports are almost certainly from forks like cursor or windsurf since these forks all forked a very very long time ago as we saw back in September sorry April of 2023 it has been 2 years since cursor moved to the VS code base which was a fork and it was built up of VS Codium which is a fork that might be even more outdated obviously all of these projects try to backport meaningful important changes but if there is an improvement to how VS Code works and how it integrates with different language extensions it's very possible that improvement doesn't make it to cursor immediately and it takes some time if it ever gets there same with Windsurf same with all these other IDEs and if you're the team that doesn't even use VS Code much less all of these forks you're primarily living in Visual Studio land but since you're on the at team you have to make this one extension for this one editor all of a sudden there's a bunch more bug reports that are coming from other editors i sympathize with this problem because I deal with it too i would guess that over half of our support tickets and questions are people asking why our captions are so broken because we use Google recapture to make sure you don't destroy our servers recapture has been working way better than what we had before which was Cloudflare turn style but the problem we have is that certain browsers and by browsers I mean browser and by browser I mean Brave despite being based on Chromium and the whole V8 JavaScript Google ecosystem it still regularly fails to properly pass with a decent score using Recapture the way that capture measures is with a number 0 to one if you're over 80% you're almost certainly human if you're over 70 you're probably human brave is the only browser that consistently scores like a 0 2 and a.3 and it's obnoxious it's just genuinely so annoying that this one browser is a huge support burden for us even though it makes up such a small percentage of our users as such I can very much sympathize with the net team if they are getting inundated with bug reports because one of these forks is using something old or using something wrong that causes their extension to break that would very much lead to what we saw here which is them throwing this giant annoying blocking warning whenever you do it i know that because I have built services that do the same thing this is Ping this is my video call service for doing live content collaborations and you might have noticed as soon as I went to sign in here uh-oh your browser isn't supported it looks like you're using unsupported browser you will not be able to join calls yeah we were strict about it and I'm signing in quick just to show then once I'm signed in I try to join uh-oh we don't support your browser due to video quality and connection issues we do not support video calls in your browser yeah we're strict with it and to be clear if you are using Brave and you're a paid subscriber for T3 Chat you'll have no issues because we don't enforce the captions for paid users it's just a way for us to keep abuse way down and it's helped beyond belief there but with certain tools certain browsers certain engines certain things you have to support it's often the case that supporting it is more work than you could possibly get back in return especially if there's no incentive to support it especially if supporting it is giving a win to your competition so I just genuinely think the .NET team who was maintaining that extension was tired of those bug reports and decided the quickest fix was to just disable it for those users and make it someone else's problem and it makes all the sense in the world that that would happen the removing of the download button one is weirder but since we have that explanation from I I don't think it's that big a deal i do just genuinely think they removed it temporarily cuz they were wanted to figure out a workaround to the split like version branching problem and now that workflow doesn't work anymore then combined with this the two of these things together especially when you remember they just put out the agent mode this does feel like an obvious clear conspiratorial thing that Microsoft is doing and I understand why people are so convinced this is the case i've even seen people who called this a while back that are very proud of what they're saying now because they are certain they said this would happen the free ride would end and now it's over and in many ways it is to be clear this is a very very real moment where suddenly the VS Code platform is apparently not available to be used and wrapped to the same extent people wanted one of the biggest reasons to do VS Code forks instead of building your own editor was so you had access to this whole extension marketplace it's actually one of the biggest problems that Zed the IDE has is that they don't have the ability to use the existing tools and technologies that people have built around VS Code but it looks like these forks are limited in how much they have too my guess going forward is that the future is going to look interesting i think it'll be a combination of taking advantage of imports from VS Code because that flow works well enough encouraging more and more devs to start publishing their things on the open VSX marketplace because it's so important to have an open marketplace people can use to get these things and I'm guessing we're going to see better open alternatives to the C++ runtime that is proprietary embedded thing inside of the C++ extension and I think this is going to hurt .NET in general i saw a handful of .NET devs that were very very burned here because they like .NET a lot they like cursor a lot and the likelihood that a good net experience will exist in cursor going forward is very very low i don't think Microsoft is in a position to do much to these other companies right now i have seen speculation about Microsoft potentially suing them or making life harder for them they really can't and even if they could it would hurt their brand and image too much to be worth it like they still have to eat so much for the lawsuit against Netscape that I can't imagine them making a public optics mistake that would hurt their rep with developers that hard right now people are like 50/50 on if they're mad at Microsoft versus mad at Cursor they want to keep it that way and the least they do the better they look in the situation and we have to remember the role of VS Code probably should have brought this up way earlier vs Code was never ever ever meant to make money microsoft's plan with VS Code was at no point we're going to charge for this and make a money printing machines selling extensions and doing all this other stuff microsoft never had a plan to make money on VS Code if anything it hurt their advantage with Windows because it was the first time they were supporting a good editor that worked well on Mac vs Code is not a project Microsoft started to make money it's when they started to try and smooth out the branding and relationship they had with the developer community again similar to TypeScript TypeScript wasn't to make money it was to improve their dev experience and also open source to improve their reputation with the developer world and it worked it worked wonderfully vs Code is one of the best examples of Microsoft caring about developers and the tools and technologies they need to ship they wanted to be loved by devs again and they've not really made decisions around VS Code to make money they've made decisions around VS Code to make devs happy in hopes that longterm that will position Microsoft to make more money in the future and I just don't see that changing obviously when you look at a company like Cursor and see the valuation they just raised at you get a little jealous and your instinct is to try and copy it or make it harder for them if you're competing but I don't think that's the case here i really don't think Microsoft's goal here is to destroy these other options and print a whole bunch of money as a result i think they just want to make better dev tools and I feel the same way with the agent mode and MCP stuff obviously this is being driven by the success of Cursor and Windsurf but I also think it's coming from the fact that the people working on it are just excited about it i had a chat with a handful of the people working on this stuff recently and they were so genuinely hyped about it it's not just a big company trying to do this thing to destroy other people it does feel like a team of people who are excited and care and are building things that they are excited about and that was always the point of VS Code it was to build better sentiment and make devs happier again so knowing that it's hard for me to believe that this is some crazy plot of the Microsoft team trying to destroy all of these forks and I'm not that concerned about the future for them especially because the languages I use are not affected at all but that's how I feel right now there's a very good chance I am wrong more than almost any of the videos I normally do so I'll be sure to publish an updated video and leave a comment accordingly if it turns out I was wrong and life does get meaningfully harder for these forks hope that was fun until next time peace nerds




## Microsoft Regrets Using React (For Edge) - 20240604
an even faster Microsoft Edge okay I know nobody really uses Microsoft Edge so going this in depth on it might seem useless but I promise you this will be interesting because Microsoft Edge was using a bunch of react code before and now it's using a little bit less you might be thinking what the browser using react but react is what you use in the browser there's a lot of fun intricacies here that we're going to go into as we dive in I think that people don't understand just how deep Microsoft is on react and whether or not you do this video will be useful so let's Dive In over the past month you may have noticed that some of Edge's features have become faster and more responsive that's because Edge is on a journey to make whole user interactions in the browser blazing fast starting with some of our newest features and core features this is weird we're going to try something generate a marketing message about performance improvements to Microsoft Edge targeting the developer known as the prime engine make sure to include a reference to Blazing fast with our latest performance improvements Microsoft Edge is now blazing fast you'll experience quicker load time seamless multitasking and enhanced stability ensuring that you can focus on what you do best coding not too far off but yeah Prime God is blazing fast reference that means we have to read this fast so that we can beat him to it starting with Edge 122 the browser Essentials UI is now much more responsive the UI is now 42% faster for Edge users and a whopping 76% faster for those of you on a device without an SSD or with less than 8 gigs of RAM I forget how many devices are running Windows man favorites is another Edge feature that's getting UI responsiveness improvements in Edge 124 whether favorites are expanded or collapsed The Experience should be be 40% faster this is just the tip of the iceberg over the coming months we'll continue to ship responsiveness improvements to many more Edge features including history downloads wallet and more we'd love for you to try Microsoft Edge and let us know what you think tell us about your experience by using the feedback tool on edge click settings more help and feedback send read on for more details on how we made this all possible I think some important context I should add before we go too much further is the fact that edge is built around chromium and a lot of these UI pieces that we're talking about are things that they built with HTML and JavaScript in this case react so it's not like all of edge is one giant react app rather all of these uis and all these menus and buttons and things are their own little mini HTML pages with react in them so the issue is that the menus of react app the drop down is a react app the favorites tab is a react app all of these things are their own mini react apps and that's not a great way to render UI special UI that doesn't really ever change and it seems like they're making changes accordingly let's see what they've done edges UI responsiveness improvements started with understanding what you or users were experiencing Edge monitors its UI responsiveness via Telemetry collected from you end users machines we intentionally did this collection for all the parts of the edui not just for the web pages that we render I wonder if they're also doing it for the recall data where they're taking pictures of your screen constantly that everyone's so excited about so what did they learn from this data Research indicates that there are certain absolute responsiveness targets that must be metant for a user to perceive the UI is fast and data showed our UI could be more responsive it also showed that that we have an opportunity to improve responsiveness for lower resource devices this is not bullet points why did they bullet point this we are constantly learning more about how we can improve the performance of the edui and by using this data we discovered some areas of improvement for example we observed that the bundles of code that many of our components used were too large we realized that this was due to two main reasons one is that the way we organized the UI code in Edge wasn't modular enough teams who worked on different components shared common bundles even when that wasn't strictly necessary this resulted in one part of the UI code slowing down another part by sharing unnecessarily remember the thing I said about a bunch of react apps doesn't mean it's a bunch of different instantiated react projects if it's one gigantic JS bundle being mounted with different props in 15 places that's even worse a lot of our code was using a framework that relied on JavaScript to render the UI I wonder which this is referred to as client side rendering which has been a popular Trend amongst web devs over the past decade because it helped web developers be more productive and it enabled more Dynamic UI experiences thankful for them not talking because as I hinted at before they're building a lot of things around react Nat people seem to think react native is just for IOS and Android it is for a lot more than that believe it or not there's a react native for Windows build but it's not just Windows also for Mac so obviously this is like the react native team building this right nope react native for Windows and Mac is by Microsoft remember how Microsoft kind of out of nowhere started being really kind to Linux remember the Microsoft Hearts Linux I searched this earlier on stream believe it or not where all of a sudden Microsoft acknowledged hey maybe developers don't like us for a reason maybe we should figure out what dev's like and then they realized oh devs really like Linux maybe we should stop pretending that we're doing better than that and then they added window sub system for Linux they started supporting Linux more on Azure Etc and that combined with GitHub combined with typescript combined with VSS code slowly got Microsoft to be taken more seriously by developers again but they do that not by telling us we're all wrong and inventing a new way they do this now by watching what the market wants and what they realized was the ways we were building UI on Windows sucked in the fact that the way we built on Windows was Windows only meant that nobody was building native Windows apps anymore and the reason electron got so popular was it was the easiest way to build an app on Windows and on Mac and they wanted something that actually used the native platform they put all this time into making windows and windows like universal windows project app platform so powerful Windows is going to feel like if none of the apps use it they're all using these crazy web wrappers so they went all in on react native for Windows because they specifically wanted to allow for this code in the developer experience both for developers working at Microsoft and ones outside of it to not suck as hard and they built this because they wanted to be able to build things once for all the platforms they were targeting for desktop software react native for Windows and Mac runs on Windows Mac and even on Xbox which is really cool if you think about it and this has allowed them to build a lot of multi-platform software this isn't just things like the Microsoft Xbox store this is stuff like the Windows start menu in Windows 11 it's not rendering an HTML page with JavaScript inside of it is just using JavaScript to tell the native platform which buttons to put where so the same way that react tells the browser which HTML to put somewhere react native can now tell Windows which Native Windows UI to put places and same with Mac OS and Microsoft's been dog fooding this hard they're using react native for so many things from various parts of the office suite to literally the start menu in Windows to all of the stuff they're doing on Xbox right now they're taking react native very seriously because they know their way of building and their UI platforms suck it's honestly really cool to see that Microsoft is taking react native so seriously and another C is doing this is Amazon with all the stuff they're doing around static Hermes and compiled JavaScript to make react native apps even faster but we're not talking about react native for Windows because that's not what they were using on edge despite the fact that edge is a native desktop app yes it's a native desktop app that renders web pages there was no reason the menus and these other things have to be HTML they could just be native UI I say just as though it's that easy but it's not but it is surprisingly common to do menus using HTML and things like this one of my favorite fun facts if you're around AG this might look very familiar believe it or not the menu system on the Wii was HTML files this is the actual menu when you go to settings on a Wii this is the actual HTML file exported so we can see it in the browser it's not that uncommon to just dump an HTML file on something and call it a menu if you already have HTML rendering it its low interaction so this pattern is established it's been established for a while what's interesting here is that that was one menu That's HTML what Microsoft was doing here is embedding lots of many HTML Pages inside of a browser just to control all of the UI very interesting and lithium making a good point that react is going to take over all UI Dev that is their goal and they're doing a really good job so far rendering web UI like it was meant to be why are we sharing this ancient news after all a lot of web pages have been rendering on the client side for years well it turns out that JavaScript must be downloaded then run through a jit compiler even if you don't use it and then execute it and all of this must be done before any of the JavaScript can start rendering the UI yeah this is why server components are great anyways this introduces a lot of delay before users can see the UI especially on low-end devices I will say that this is not as big of a deal if there is one bundle doing it for your one web page but if you're doing this in like 15 places for all your UI yeah it starts to suck I would never have recommended using react for web for menus in the way that they're doing it here you turn back the time machine prior to the Web 2.0 era the way web content was rendered was by using HTML and CSS this is often referred to as serers side rendering as the client gets the content in a form that's ready to render modern browser engines are very fast at rendering this content so long as you don't let JavaScript get in the way that's a bit of a reach Fair points overall it's interesting how the tone of this is both like focused on people who aren't as into Dev but also the people who are really nerdy about it like us interesting I'm happy I'm here to add more Nuance based on the realization our questions became the following could we maintain the developer productivity that JavaScript Frameworks have given us while generating code that renders UI fast yes server components could the browser be its own best customer interesting and how fast could we make things if we removed that framework and built our UI just by using the web platform the answers to this question are yes yes and very fast introducing web UI 2.0 not to be confused with Web 2.0 that they just referenced the result of this exercise is an edge internal project that we've called webui 2.0 in this project we built an entirely new markup first architecture that minimizes the size of our bundles of code and the amount of JavaScript code that runs during the initialization path of the UI this new internal UI architecture is more modular and we now rely on a repository of web components that are tuned for performance on Modern web engines we also came up with a set of web platform patterns that allow us to ship new browser features that stay within our markup first architecture and that use optimal web platform capabilities interesting pile of text saying that they're using HTML I have to dig on the fact that they're using a repository of web components because web components can't be serers side rendered the way that you serers side render a web component is you dump in the HTML that looks like the web component component you mount an invisible web component underneath and once that web component is done it deletes the existing HTML and replaces it with the web component instead that's not serers side rendering that's chaos so if their goal as they said before was to do serers side rendering so things can be faster and now they're using web components that is a contradiction to be very very clear browser Essentials is the first Edge feature that we converted to test the new architecture and to prove that the concept worked especially on all types of devices okay according to Neon you can now server side render web components sem me a link to prove it I'm curious but I I'm leaving that in the video the guy who made style X thinks I'm wrong and he's smarter than me so he's probably right we're in the process of upgrading components of the edge user interface to Web 2.0 sorry web UI 2.0 I'll make that mistake a bunch throughout and you can expect to see more features of the browser getting far more responsive over time oh good old declarative Shadow Dom more standards on top we hope that more websites start moving in this direction of markup first small bundles and less UI rendering JavaScript code over time we plan on making some of our package is open source so that all developers can benefit finally as we continue improving web UI 2.0 we're committed to finding opportunities to improve the web platform itself even more I hate this because this isn't about websites this is about a menu this is about a menu in Microsoft Edge I genuinely really dislike the reach they're doing here which is because they were using web Technologies in a way that they weren't built for at all the way they're built for is you load the one for your website and now it runs for your website what they were doing is that but for every piece of UI that had its own team at the company that's obviously not going to work great but the idea that running JavaScript code to generate parts of your UI is inherently worse and is something we should be moving away from is kind of weird to just plug in here at the end I would never have made that jump if they had just deleted this paragraph I actually would have liked this article a lot but the fact that they misused many HTML apps like like I'd make the argument that having 17 HTML pages that Define your applications UI is also kind of cringe and how you manage to make it faster with your custom framework around web components but the problem here is that you have a bunch of HTML pages that Define your UI and then react on top is probably not the best idea yeah you know what's really funny here though is if they had used react native to define the UI instead none of these problems would have happened in the first place because they would have been able to have one react native instance with one virtual machine running all of that code and we know this works because it works great on Xbox for all of Xbox's UI they have one engine of JavaScript running that controls all of that and it's so light that you can still load up a all of your Ram with your games code and then when you hit the home button it still responds immediately I wonder what Chrome uses Chrome uses C++ Chrome uses a shitload of C++ most things do and what's funny with chrome is you can still make Chrome crash in really dumb ways I would screen share it but I don't feel like dealing with Windows enough to do it I have a fun problem right now on Windows 11 where when I download multiple big files in Chrome it locks Chrome up it still downloads but if I even click to go to a different tab it will freeze for literally minutes just CU I'm downloading big files it doesn't matter what you write the UI code in at that point but I digress you can write slow code in anything but I agree here react is part of why it was slow but it's not because react is slow it's because 20 instances of react isn't fast if they had one instance of react that controlled all of those things awesome apparently in Firefox everything is HTML and CSS which also checks out but ideally the native code that determines what buttons are available what bookmarks you have access to all of those things those things being very accessible to the HTML code such that the html's updated based on those native conditions without needing JavaScript to do it that makes a lot of sense like if htmls how you're defining your menus JavaScript probably shouldn't be this does still kind of feel like a manufactured problem and the solution despite being good feels like it's reaching places that it shouldn't and again being this is the company that made react native for Windows and Mac it's kind of disappointing to see them on one side embracing how much better react specifically react native makes windows development while at the same time throwing random pot shots at it like they did here weird article good points overall I still have a lot of faith in Microsoft in the direction they're going with development but it doesn't matter what I think I don't know what you think how do you guys feel about this good bad ugly is Microsoft doing the right thing taking a war on react or do you prefer when Microsoft defends them let me know in the comments what you think and how much you hate vs code and until next time peace NS




## Microsoft and OpenAI are breaking up_ - 20250330
it's hard to imagine open a where they are today without the help of Microsoft from the funding to the people to the infrastructure Microsoft's been all in on openai for a while so much so they posted pretty much the exact same blog post two years later I thought I had the same tab open here nope but the reason we're talking about this isn't because the partnership was extended it's actually the opposite Microsoft is looking at what a future without open aai would be for them which is fascinating this kind of plays into my previous video about AI get commoditized in the race to the floor to see how good performance we can get for Price the lead that open AI had is closing and the implications of that on the industry long term are genuinely fascinating enough so that I wanted to take the time to talk about it all with you but as cheap as this AI stuff is getting I still have to pay my team somehow so let's get a quick word from today's sponsor before we Dive In before we go too far we need to make sure we understand the terms of the Microsoft xop aai partnership it's also worth noting that the way you invest in open aai is really strange which is open aai Investments have a capped return if I invest $11,000 into a company that's worth $100,000 then I own 1% of this company if the company's valuation was to, decks if it was was to go from 100K to 100 Mil your investment would see the same impact your 100,000 would get those same extra 3 zeros because you have 1% of it and 1% is still 1% regardless of how big the number is this is why early stage investment works the way it does because you're investing in a company at a very low valuation expecting it to fail with the small percentage chance it will go massive most early stage companies in like the Y combinator world are raising with valuations between like 18 million and 30 million roughly it varies a lot over time but this is the range for the valuation that you're investing against you expect to lose the money though most investors like even the ones I have the expectation is we'll go out of business and they get nothing back but if they do get money back it's not going to be a 50% win it's not going to be an 80% win it's a very high chance their return is going to be a 10 to 100x return that's why you invest early stage is the likelihood of getting your money back is low but the possibility that your money coming back ends up way more valuable is high enough that it's worth the risk that's what early stage investing is open AI didn't want a bunch of investors to push them to do crazy things to get these massive multipliers so a weird decision they made early on was to cap the potential return the cap if I recall was a 10x return cap so with this investment here with 100K if that ended up being a $100 million company you wouldn't get back a million you get back 10x of what you put in so you would get $10,000 back instead because you would hit that cap when you cash out this meant that open ai's opportunity for traditional Investments was weird a lot of companies wanted to put their money in but not a lot of companies wanted to meet these particular terms unless they got something else this is why Microsoft ended up being a really good partner for them the combination of Microsoft needing better AI Tech Microsoft having a bunch of infrastructure with Azure and Microsoft having a ton of money they didn't know what to do with that combo made them a really good partner for open Ai and that's why the partnership happened Microsoft's needs for the things that open AI had done and had and open ai's needs for the infrastructure and money that Microsoft had it made a ton of sense especially if you consider the fact that at the time back in 2023 especially open AI stuff had not been even close to matched by other competitors certainly not open source ones like we have today with deep seek Microsoft's multi-billion dollar investment into open aai was done to get them access to the best-in-class models in this day the only way to use open ai's best models without doing the open aai platform is through Azure on T3 chat we have a couple openai models specifically 40 and 40 mini hosted through Azure instead of open Ai and that's awesome because we have a bunch of credit with Azure but it's also awesome because the speeds for some of those models are way better some of them are way worse though I don't want to get don't get me started about 03 on Azure it's it's been tough okay that aside this partnership has been very lucrative for everyone involved but some things have started to change in the industry I could say this myself but I'd rather quote Saia here in his words AI models are getting commoditized and I absolutely agree here as I covered in my video the race to the bottom most models are focused on best pric to Performance in meeting the current performance bars I even made a chart during that video let me find it quick previously the performance Gap that open a eyes models had compared to the competition was massive it was it felt like a 2X plus Gap in the intelligence capabilities of their models but over time Alternatives have been getting closer and closer to matching where open AI is at any given time the gap between open Ai and the Alternatives is smaller than ever and those alternatives are often way cheaper and sometimes like in the case of deep SE car1 or especially in the case of the V3 overhaul that just shipped they are surpassing what open AI is doing with open source alternatives on top of that the cost of a lot of these things has been going down too every once in a while open a does some crazy stuff like they drop GPT 4.5 which raises the price a bunch or even worse what they just did with um 01 Pro over the API the price of open AI stuff is being forced down finally but it's not even close to what you get out of something like Gemini nowadays there are also rumors that Microsoft now has their own internal model that they've been working working on takes advantage of all of these reasoning things that they've been seeing from other providers especially in the open source world that is comparable enough to the performance they're getting from open AI but they are questioning everything their model is known as fi which historically has not been particularly great or even worth talking about but Microsoft is internally cooking their own reasoning models on top of it that appear from the little bit of leaks that we've heard to be really really good I have a whole dedicated video planned coming soon for the Deep seek V3 update that just shipped quick tldr deep seek R1 and the r series are their reasoning models but the reasoning models have to be based on a traditional llm with open AI the o models have thus far been based on 40 that's part of why 4.5 is exciting not because it's a good model but because as a base for those reasoning models for an 04 or an 05 it is very very promising V3 is what R1 is based on V3 was such a groundbreaking model when it dropped back in December that I kind of dropped everything to start playing with it eventually leading to building T3 chat I don't think T3 chat would exist if I wasn't so impressed with the deeps model when it came out and also horrified by the state of the website because that wasn't their focus V3 was a very exciting release and the performance you could get especially considering the price was insane but like look at this standard intelligence benchmarking 3.7 Sonet is underperforming compared to deeps V3 for other benchmarks like the speed it's not great cuz they're benchmarking it on the official API but it should be able to speed up if it's run bit differently this is what's so exciting about what deep seek is doing is they're managing to get performance better than GPT 40 for prices that are a hell of a lot closer to flash and 40 mini than they are to 40 the fact that they are higher up in the intelligence while being closer to 40 mini than they are to the models they're competing with is insane 03 mini high is still an incredible value and I will continue saying this is the best model open eyes ever dropped in terms of all of the pieces but V3 as a base model that is open source is super promising and I am very excited to see what happens when the new V3 is used to train R2 it's going to be a very very fun future performance speed wise still isn't great but I would hope to see other providers figure out how to make V3 faster because it's a surprisingly small and efficient model they should be able to make it fly but I'm bringing all of this up because it's apparent that the base Primitives that we look at and use for all of these things have just gotten really good and are borderline commoditized if I add one more model in here quick 4.5 they not even put it in the chart cuz it's too expensive to do the tests against that's hilarious I guess we have to trust deep seeks numbers because I can't use my trusted artificial analysis here is their benchmarks against GPT 4.5 which if you don't remember is one of the most expensive models ever released 4.5 costs $75 per million input tokens and $150 per million output compared to the current deep seek V3 prices is 27 cents in $110 out 280 times more expensive for input tokens 270 times more expensive for a model that consistently performs the same or Worse fact that a model that doesn't think is comparing with a model that's that expensive shows that the open opportunities we have with these Open Standards are insane and what deep seek has cooked with the V3 model and now the r series as well is just unbelievable and it's a fundamentally different world than it was when open aai and Microsoft started their partnership hell it's a different world than it was when they evolved that partnership because open AI has managed to keep improving their models again 03 mini is incredible for what it is but they are not improving fast enough to maintain this massive lead they previously had against their competition Microsoft's ability to solve hard problems that aren't operating system level has historically been really bad if even they are managing to figure out how to make these performant mod models these great models themselves it makes sense that they are questioning the billions of dollars they've been spending on open AI this whole time I do want to call out the Focus Shift that's going on in the AI world now the main piece brought up here that I think is worth thinking about is the goto market manager from open AI explaining that success depends on the bringing together of the pieces for successful AI experiences I talked about this a little bit in a video I just put out my Gemini video on why Google is in such a good State the thing I try to drive home there is that Google's uniquely well positioned because they have the data part figured out they have the science part figured out mostly and they have Hardware at a level that nobody other than like Nvidia and these other chip manufacturers have but the idea of being the same company that builds the chips that hosts the infra that generates the models that creates and finds the data to use for that model creation and training that has the money to fund all of this the platform to host it on with gcp but also the app that you can experience these things in Google's the only company that currently has all of this figured out Microsoft has this part roughly they have the platforms and the money they're starting to figure out the science side it's been an interesting Journey for them they don't have the hardware in the same sense because they're not making their own chips they're still at the whim of the manufacturers if you don't believe me look at the state of arm for Windows they are fully reliant on whatever the hell Qualcomm feels like doing whereas Google is manufacturing and designing their own architecture now which allows them to have a huge Advantage compared to these other companies I think this is the Resurgence of the Microsoft versus Google Wars and open AI is trying specifically to compete I have to actually re orchestrate this a tiny bit to make this make more sense uh give me one moment there main difference here I swapped the science and the data Parts because open AI wants to do this to this open AI wants to set things up so they own all of these parts and they'll just deal with the hardware whenever Google is here and they want to keep extending to the left but if they can win here hell if they can just win here they're still in a very good position and they know that so they are being careful as they roll to the left Microsoft's kind of because they only have this they are starting to extend here with mixed success they couldn't figure out apps the closest thing they had was GitHub co-pilot which they've now commandeered fully for their own branding because they don't even have their own platform that Mak sense yeah don't get me started on co-pilot on my Windows computers it makes me feel like I am going insane also apparently open AI is trying to do custom chips so I guess I was wrong open AI is also trying to extend all the way across this chart they want to go all the way across they want to have a fully integrated AI platform from the app you consume it with to the hardware and the chip architecture that is actually running the models I wish them luck CPU design and architecture is a chaotic world that I don't know if they're equipped to be in considering that their fumbles trying to get into webd have been as terrifying as they are and webdev is easy compared to architecture I wish them luck but I do think this is important that Microsoft sees the straight up risk they have being just here they can be consumed from either side so now as they realize that the science side is more and more commoditized and they can consume that themselves as they do whatever they can to collect data or they buy it for companies like scale and data curve as they try desperately to build their own apps that don't suck for consuming AI stuff and maybe they finally make their own Hardware I wish them luck Microsoft's realized that their position here in relation to open AI is a small vertical competitor they are terrified of losing their slice as open AI consumes that whole layer so now they're trying to figure out how to succeed without AI is core to their business in the AI world and it's an absolutely fascinating shift of focus because and I I hope this isn't too controversial at take more and more we're realizing the valuable part is here if I can just swap out the models in my apps and users don't notice Beyond maybe it's slightly faster slightly smarter or maybe it's just 5% Dumber who cares the fact that it's gotten to the point where I can change the model on my back end and my users might not even notice fundamentally shifts where the most are in this world previously open AI was the way you had good AI generation in your apps over time that Advantage has been lost you can switch from an open AI model over to R1 and have an experience that's really really good depending on which open AI model you were using before the experience might be even better than what you were doing prior that is incredible that's a massive industrywide shift that Microsoft is now feeling internally and starting to make decisions around the core to the agreement between Microsoft and open AI wasn't just that they would invest this insane amount of money it was that open AI would give them access to whatever Innovations and development they had throughout the process of making better and better models the rule was that once they hit a definition of AGI that open a would no longer have to give all of their learnings to Microsoft the rumor that I've been hearing is that Microsoft stopped getting info from openai and there was a bit of a pissing match between the two because Microsoft and the researchers there asked open AI what did they do to make 01 so good because this was before we understood reasoning as an open thing in the AI world and open AI just refused to tell them this appears to have started some fires in the relationship between these companies apparently the Microsoft CTO wrote about this on LinkedIn not sure why this is news but to summarize the obvious we build big supercomputers to train AI models our partners at open AI use these supercomputers to train Frontier defining models and then we both make these models available in the products and services so that lots of people can benefit from them we rather like this Arrangement we've been at it for almost 5 years we also for years and years have built AI models in Microsoft research and in our product groups apparently the Microsoft AI models are performing nearly as well as open Ai and anthropics on benchmarks Microsoft's training reasoning models that could compete with models from open AI as well as those from Deep SE Canali Baba reasoning models are designed to simulate yada y yada Chain of Thought cool open AI was not sharing technical information about the chain of thought process as agreed the report noted which became a source of conflict between the partners this is the key OD has been refusing to share the technical info about how they're doing Chain of Thought stuff with Microsoft which is preventing them from taking advantage of their partnership to make their models better and now this whole thing is starting to fall apart Microsoft's considering releasing Mi later this year as an application program interface API it would put Microsoft into direct competition with apis from Rivals and partners it also said that the company's already experimenting with swapping out mi models for open AI models in Microsoft co-pilot I was Su of this starting to happen as soon as Microsoft allowed for you to use Claud in co-pilot that's when I realized this partnership was starting to a road and it feels like it's moving much faster than anyone would have predicted certainly myself included AI definitely accelerates things it might not be the speed that we ship products but it's certainly accelerating the speed at which these types of Partnerships erode also the Stargate project which was the fancy open AI announcement with Trump and Oracle where they're partnering to build a bunch of AI infrastructure in the US definitely doesn't involve Microsoft heavily open AI claims that they're part of the partnership but we'll see how that goes credit to the information for this groundbreaking report nothing else has this level of detail this is clearly a story they figured out and broke themselves apparently last fall during a call with senior leaders at open AI in Microsoft siman who is the person at Microsoft in charge of AI was fighting with open AI staffers to explain how 01 worked he was peeved that open AI wasn't providing Microsoft with documentation about how it had Pro programmed 01 to think about user queries before answering them the process known as Chain of Thought as a key ingredient in the secret recipe of any AI model raising his voice Slyman told open AI employees including mea who was the open AI CTO at the time that the AI startup wasn't holding up its end of the wide- ranging deal it had with Microsoft the people familiar with the conversation said The more I've read through these sources the more I'm really starting to understand why Microsoft feels the way they do my honest take is that the feeling they have internally is that the AI teams at Microsoft are learning more from Deep seek than they are from open Ai and when you consider the fact that Microsoft spent 13 billion dollar investing into open Ai and they are getting more out of deep seeks generic open stuff they can just read the PDFs for for free online they're getting more from that than they are from spending $13 billion on open AI I see why they're starting to get upset before we wrap up I want to do one last shout out this channel is making me think about these things a hell of a lot more and has a ton of insight info that's been super beneficial the AI explained Channel on YouTube has become one of my favorite channels to watch I'm actually going to hit the Bell on it I recommend you do the same if you like this deep news stuff very very good source I would not have covered all of this if it wasn't for the things that were covered in the most recent AI explained video give them a sub if you haven't phenomenal Channel huge shout out to a explained for cluing me in on a lot of this and giving me some of the sources to start digging deeper it was a really good starting point for me to dive in and figure out what the hell was going on oh uh I don't know if we like formalized what the AGI definition is from open AI Microsoft open eyes deal immediately ends when AGI is achieved but since it's hard to Define they defined it as a hundred billion dollar in profits from AI systems so AI systems need to be able to generate hundred billion in profits at which point we will now in the definition of their agreement call it AGI in the partnership can now dissolve and open doesn't have to give Microsoft Access to all of this stuff anymore the reason that matters is because Microsoft wants to get out of the partnership so they're going to rush to this definition of AGI simply to not have to give Microsoft Access to things anymore one other thing I've noticed that definition of AGI was determined at least publicly after this interview with the CEO this is December 9th 2024 and they even say in here that the definition of AGI is weird and then the definition was decided on pretty soon after so this shows just how much they're flying by the like seat of their pants right now all of these things are happening on the fly as they figure stuff out it's kind of chaotic and Microsoft as a company is not built to move at this speed and they're trying their hardest to figure out how to and what parts are even worth moving this way I suspect we going to be getting a hell of a lot more info what happened here was Microsoft putting a lot of money in to try and catch up on something they were behind on which was all the science of AI stuff they then hired one of the guys who made Deep Mind to take over AI at Microsoft watched all of these things happen outside realized that open AI isn't helping them accelerate the way they wanted to and all of these other things in the public are helping more than open AI is how the hell do we get out of this chaos and think this makes all the sense in the world and I am incredibly thankful more than ever that I am not the CEO of a model Frontier company because this is all chaos and I'm very happy to continue hanging out in my peaceful Little World building the best AI chat up ever if you haven't already tried it it's only eight bucks a month givey three chat a shot let me know what you guys think on this one am I overreacting to this weird news between Microsoft and open AI is this something that will even matter or that we'll remember in a few years curious what you think until next time peace nerds




## Microsoft’s new vim alternative is written in Rust___ - 20250527
You know, I've been thinking about getting into Vim for a bit. It seems like the Neovim community is really strong and it could speed up my experience writing and editing code, but I have a couple things I wish that it did that it doesn't. I wish it was written in Rust. I wish that a big company was backing it so that we would know it would be there forever. And I wish it looked a lot more like the OG MS DOS days. If you're like me, you're in luck because Microsoft just announced edit. I can't believe this is a real thing, but it also legitimately does seem kind of cool and I want to go through it with you guys. And no, I was not trolling. Okay, I was trolling about really wanting this, but this is a real project by Microsoft. Microsoft/Edit on GitHub. It is really written in Rust. Has a bunch of contributors. It's a simple editor for simple needs in the style of MS DOS. Apparently, it can only be installed on Windows right now supposedly, but there are other ways to get this running from the virtual machine that I just paid a big license fee for to a Rust build that's floating around for Mac and a couple other platforms, but I just paid a license fee for that Windows VM. And obviously, Microsoft's not going to cover the cost. So, uh, quick word from today's sponsor, then we dive in. Today's sponsor is here to help with everyone's favorite topic, code review. Okay. Okay. Wait, don't don't skip yet. I promise this one's worth it because Code Rabbit just put out something really cool. Their VS Code extension is incredible and yes, it works in cursor as well. How many times have you made a bunch of changes to some code and just kind of lost track of what you were doing and wanted to make sure everything was working as expected or better, you don't want to put up the PR just yet. You wanted to know how it was ahead of time. I'll be honest, I've been using Code Rabbit for this already by just pushing up the PR, telling my team to not look at it yet, and just waiting for them to review. Well, they fixed it and now I can just click this review all changes button in the plug-in in VS Code and it will go review that live here. This is actually my first time trying it. I wanted to film it because I'm so excited to see how this does. I made a really simple change where I updated an effect to not run aggressively because it was for doing a migration that we didn't want to run more than once. And let's see what it has to say. And look at that. It caught some things that we should probably change. I don't even need to have their tab open. I can just click the little comment icon and it will show me what it recommends and when it recommends making the change. Here we're actually setting the wrong thing. I should be using the constant that I defined earlier. Good comment. Let's just delete that because it shouldn't have been there. Here suggests we don't update the migration flag until the migration is run. That's probably the right call. But rules of hooks are annoying and the fact this effect can run twice is something we need to be considerate of. This is a thing I should think about though. And I might not have thought about this. I might have just innocently left this in. And now I can at the very least leave a comment saying why I did this thing. That's great. This is intentionally really small change, but you could imagine how when you're aentically coding giant things using cursor or wind surf or whatever else, how useful it would be to have an assistant just look over it once more before you push it up. I know I'll be using this a lot and I hope you guys do too. Thank you Code Rabbit for sponsoring today's video. Check them out today. It's/codrabbit. I could try compiling it. That would be fun. Let's do that. Paste error does not support. It does not exist. Can't build a standard library. See what happens if I just add this component. My first time taking a real like Rust project from a different ecosystem and building it on a Mac. See how how magical the multiplat experience is. Where does it output? Ah, it's this one. Cool. chmod 777/edit. Aha, look at that. Even a dumbass like me can compile this. You can create new files, open them, open and close the editor. You have all the hot keys you need. Control S for save, not command S. Don't don't be a Mac person. This is a Windows product, remember. So, you got to reach over slightly if you're a Mac user. Hit that. Control S, control O for open. Option E for edit in order to get into this menu. You have all of the hotkeys you need as a Vim guy. Undo, redo, cut, copy, and paste. You can jump around the way you would expect. Page up, page down. What else would you need? And as you see, you have all the syntax highlighting you need. None. It's a markdown file. You don't need highlighting. Come on. It's not that useful. Besides, you don't even get any of them without installing a plugin. Basically the same thing. You just can't install plugins because who needs those? There's a lot here that's interesting. At least they do have word rap. Important. I actually do keep word rap on in my editor. People think I'm insane, but I'm also a Tailwind user, so I'm kind of insane. One of the lead devs from the project actually commented on it on HN and had a lot of good insights I wanted to share. They built their own custom terminal UI library and they did that because they wanted to write a plug-in model around a C AI. I have no idea what that even stands for. It was application binary interface. Makes sense. Existing terminal UI frameworks that they found that were popular usually didn't map well to plain C. And of the ones they did find, they were just too large. Remember, they have to keep this binary really small because it's being bundled in Windows. The arena allocator exists primarily because building trees in Rust is quite annoying otherwise. It doesn't use bump. I don't know any of these things. Rust people, have fun in the comments. Regarding the choice of Rust, I actually wrote the prototype in C, C++, Zigg, and Rust. They wrote it four times. That's the benefit of a small project. You can really test different things. This also kind of confirms my theory that they're using this to test stuff like Rust. Out of the four, I personally liked Zig the most, followed by C, Rust, and C++ in that order. Liking C more than Rust is hilarious. It shows the state of things. Yeah. Since Zig is not internally supported at Microsoft just yet, chain of trust, etc., I continued writing it in C. But after a while, I became quite annoyed by the lack of features that I came to like about Zigg. So, I ported it to Rust over a few days as it is internally supported and really not all that bad either. The reason I didn't like Rust so much is because of the rather weak allocator support and how difficult building trees was. Also found the lack of cursors for linked lists and stable Rust rather irritating if I'm being honest. But I would say that I enjoyed it overall. really good research to be doing internally and also awesome that they're sharing this instead of keeping it as private internal knowledge. Talk all the you want about Microsoft. The fact that random employees can work on core stuff and just go answer questions on Reddit about it and fully open source it MIT licensed is really cool. There are not a lot of Fortune 500 companies that give this type of freedom to the engineers to just be part of the community and do cool because Microsoft needs it. They have been a really good faith player in the open source space and I think it's worth acknowledging. Here's where they describe why they decided against all of the other existing options. Nano, Kilo, Micro, Yori, and others. What we wanted was a small binary so we could ship it with all variants of Windows without extra justification for the added binary size. It also needed to have decent Unicode support. It also should be built around VT output as opposed to console APIs to allow for seamless integration with SSH. Oh, interesting. They really want good SSH support. That's fascinating. Lastly, first class support for Windows was obviously also quite important. Out of the listed editors, Micro was probably the one we wanted to use the most, but it's just too large. Interesting. I was building our own editor, and while it took me roughly twice as long as I had planned, it was still only about 4 months and a bit extra for prototyping last year. They call out the not invented here syndrome of the project, NIH. That's what it stands for. It's when companies insist on inventing their own thing instead of using industry standard. But I actually think this is a good one. There's definitely a bit of note invented here syndrome in the project. But this dev also spent all of their weekends on it and they think all of Christmas as well simply because I had fun working on it. So why not have fun learning something new writing most things myself. I definitely learned tons which I can now use in other projects as well. Really cool. This is an awesome project and huge shout out to whoever at Microsoft green lit this one. I'm impressed. I came in to make fun of it and it's a good project. So sorry for the intro. It's also fully open source, and I really want to give credit for this. It's MIT licensed. It's like no open source. Microsoft's been pretty good about this. I mean, obviously they have been, as you guys have seen, with all the VS Code forks that are now giant companies, but even stuff like Microsoft Terminal, which is an actually really good terminal on Windows. This one's written in the much C++ instead of the inferior Rust, but it's also like true proper open- source. MIT licensed as well. They don't screw around with this. And the Windows terminal is actually really nice, which is crazy because I've had such a bad terminal experience on Windows my entire life. It does a bunch of little admittedly hacks, but those hacks allow for things like bash syntax to be supported in PowerShell. So, you can do like cd dot dot and it does what it's supposed to instead of just breaking. I'm I have been much happier using Windows since the terminal dropped. I would argue, and this sounds insane, but I do actually believe it. Windows Terminal was a bigger ship for Windows developers than Windows Subsystem for Linux in a lot of ways because there just wasn't a pleasant terminal experience before. Almost every Windows dev I knew was using the terminal in their IDE because the terminal apps for Windows were trash. Now there's a decent one, like an actually decent one. and edit might not be that, but it is a cool effort to take something that is so core to Windows and show what it would look like if they were to have created it today. And as you see, this came from the Windows terminal team. So my super spicy hot take is this might be the team's exploration of Rust because they've used C++ in most things in the past. This is entirely in Rust like 100% 100.0 fully Rust. Let's see what they have to say. Edits a new command line text editor in Windows. They say in Windows, but as you saw, it works great in Mac. You just have to build it yourself. Edits open source, so you can build the code or install the latest version from GitHub. This CLI text editor will be available to preview in the Windows Insider program in the coming months. After that, it will ship as part of Windows 11. This is going to be the built-in edit flow in Windows. They already have a crappy edit like, or do they? Oh, apparently the only built-in editor for text files in Windows historically has actually been Notepad. I assumed it had some type of terminal editor. Like when I saw the screenshot, I just assumed it was a a port or a rewrite of an existing thing. It's not. This is actually a all new thing. Oh, so the classic MS DOSS editor. No, that's what I thought. But I can't use this right now. So they removed the original MS DOS editor. This makes more sense. It was also 300 kilobytes before and now it's like 280. So, they've maintained their bar there, too, which is really cool. But apparently, this has not been a thing in 64-bit Windows ever, and it got killed starting with Windows 10, which is sad, but that's why they brought it back. So, what are the features? It's lightweight. It's less than 250K for the Windows build, which is nuts. So, they can just throw it into Windows cuz like, think about how anal Microsoft has to be about keeping the Windows image size from continuing to bloat. Anything you can do to trim it is seen as a positive. and anything you want to add to it will have a ton of fighting it has to go through. But if it's 250K, much more likely to sneak through. And if they're also doing this to start experimenting with Rust internally, it makes even more sense. They also have mouse mode support. I'm curious how that works in Mac. It does fully. Okay, that's actually really nice that I can just click and get to a specific place and select text. Can I select and delete? Oh, that's actually good. This is just better Notepad. Then if you're trying to get good like mouse-based text control in your CLI written in Rust, this was probably a really good reference repo to look at, which is crazy. But they had to keep it small in order to hit that small binary size. So it's probably not even that big a codebase. Let me quickly clock it. Yeah, it's only 16k lines of code of like actual Rust code. Barely. That's a relatively small codebase that's actually worth learning things from. Multiple files is cool. Find and replace not trivial word rap also very not trivial in a terminal UI. That's still why this is why they said they felt the need to build another CLI editor. What motivated us to build edit was the need for a default CLI text editor in 64-bit versions of Windows. 32-bit versions of Windows ship with the MS DOSS editor, but 64-bit versions do not have a CLI editor installed in Box. From there, we narrow down our options. Many of you are probably familiar with the how do I exit Vim meme. While it is relatively simple to learn the magic exit commands, certainly not a coincidence that this often turns up as a stumbling block for new and old programmers alike. Because we wanted to avoid this for a built-in default editor, they wanted to be like nano. We decided that we wanted a modeless editor for Windows versus a modal editor where new users would have to remember different modes of operation and how to switch between them. I agree. If you've only ever used a traditional IDE or like notepads and text editors, the idea of having two modes to switch between is a hurdle to get over. But that does, as they say, limit their choices to a list of editors that either have no first party support for Windows or they were too big to bundle them with every version of the OS. I would be surprised if Nano had good support for Windows, even if it is small. So, this checks out. The small footprint is less than 300 kilobytes. Could we run a Windows terminal? My guess is the Windows terminal version for Windows might have to end up being bigger and they wanted more control. Makes sense though. I'm pretty sure that this makes Windows the only operating system that ships with C++ code, C code, assembly code, Rust code, and React Native code. Pretty funny that the start menu is written in React Native, and the terminal editor is written in Rust. But that's the world we're in today. The results are actually pretty cool. I am impressed. I came into this to meme, as you probably could tell from the intro, but it's not bad. The functionality it has is legit. The codebase seems like a good reference, and this might be the start of Microsoft adopting Rust more heavily internally. I see a lot of cool stuff here. I don't think this is going to actually become the editor that people use to write code. I don't think this is going to replace Neoim or anything like that. I just think it's a cool effort that we can potentially learn a lot from. And I have a lot of respect to the people at Microsoft who decided that this needed to be built and instead of making a quick crappy CLI or just forking something and removing the branding, they built something new from scratch that we can all benefit from as an ecosystem. So shout out to the people at Microsoft who decided to do this, who green lit it, and also of course the ones who built it. There's a long list of different editors that come out of Microsoft, and this is one of the coolest ones yet. Let me know what you guys think.




## Mobile Devs Hate Servers. Expo Wants To Fix That. - 20240129
apps love them or hate them they are a huge part of how we interface with the world mobile applications are how most people experience most websites and as such having good apps is super important whether or not you like react native it's important to recognize how much value it's brought the mobile development Community both by standardizing a set of tools that any developer can use to build great mobile apps and also by introducing a lot of important Concepts to mobile developers even if most mobile devs don't love what react native is doing they have to at least contend with the cool stuff happening and with such we end up with awesome things like code push Swift UI and so much more as of today react native is pushing a little bit harder than ever did before because starting now react native works on servers no I'm not talking about server components at least I'm not yet because first mobile devs need to get their feet wet in servers what do I mean well first I want to talk about the developer Spectrum I've talked about this in other videos before but there's a spectrum for developers technically you can go further in either direction where you have like infrastructure Hardware Engineers on one side and you have like designers and people in figma on the other but I've chosen to to shorten this to backend and front end so now the question is where do mobile devs go historically I used to think mobile devs fit right here and I was wrong I learned that I was wrong when I keynoted chain react which is a react native conference and I talked about how cool server components would be for mobile devs sadly when I started talking about servers most mobile devs kind of like broke out into a cold sweat because they hate servers so much that not only do they try to avoid using them they actually actively adopt Alternatives like Firebase I'd go as far as to say Firebase would not have been successful platform if it wasn't for mobile devs and their just general disdain towards servers as such I've slowly learned that mobile devs not only are they closer to front end they're actually past here and they work even further from the servers than most front-end devs do when I realized this it hurt me deeply because products like upload thing expect you to have a server because if you don't have a server the only way you can authenticate a user is if someone else's server has the right integration for what you need and I don't want to have to build based plugins sub based plugins and all these other UI things in our web app so that a user can upload a file safely with something like upload thing most developers building applications should have a server of some form where they can safely run code that connects to any of many sources any of many things so you can render the correct UI for the user safely sadly this has been incredibly difficult for mobile so much so that whole product categories have been formed around helping mobile devs avoid doing this I'm pretty familiar with this though because a lot of front end tools were in a similar place remember the era where everybody was trying to make automatic graphql endpoints for their databases remember Hur my favorite product hopefully you can detect the sarcasm there because I hated all of those tools I really hated the idea of drawing a hard line between back end and front end and telling people on either side hey you don't have to pay attention to what's on that other side don't worry we got you just pass some Json over the fence we're fine mobile devs put this line even further which is terrifying thankfully in the web we learned our lesson quickly and with tools like nextjs even Gatsby we realized we could do a little bit of backend to make our front ends better as of today a lot of those same things can be done in mobile apps too specifically react native apps using the newest version of Expo what the hell am I talking about why are Mobile devs going to be doing backend let's take a look Expo router V3 is here full stack react for iOS Android and web this is the piece we're here to focus on API routes and no this isn't just a thing for web I know it's easy to assume that but we're here to talk about API routes although I will say it's hard to not talk about the Tailwind support because Expo hired the person who was building native wind and they got Tailwind working in Expo directly which is super super cool so if you want to hear me talk about Tailwind on mobile let me know in the comments Expo router V3 API routes bundle splitting speed improvements and more welcome to the Expo router V3 our most powerful release yet today we're introducing Beta Support for the newest Expo platform servers this is such a bold statement I don't think you all understand telling mobile devs that their tooling is now prepared to handle servers is a huge deal and yes this is setting up a future where server comp component going to happen but I want to be very clear once again this is not server components this is API routes where you can build a server endpoint for your app and for your website let's take a look this syntax might look somewhat familiar it's similar to the file-based routing you have it's something like next but instead of a route. TS it's api. TS and it's Plus api. Ts so you know this is for an API endpoint and here you can import Expo request response as far as I know you can also use browser standards which is cool but the important piece here is that in your code collocated with your mobile code you can do things that are on the back end so you can safely connect to a database you can safely handle authentication you can safely do all sorts of things you might have needed to spin up a backend for before just writing one file in your codebase aore already said in chat trpc yes this makes supporting trpc in an expo app trivial super super cool stuff I've been waiting for this for a while because having server support in your application is necessary to do a lot of important things and now you can just export a get export a post and you're done really really cool stuff and as they say here it's the first step towards making Expo router a full stack react framework but this is backend code so where's the backend where's this running how does this even work no better way to see how this works than to try it right first we need to create an expo app I'm using the DHT which I believe is for the typescript template but it also should include Expo router oh oh it's for me to make decisions cool dope Expo backend test cool and now we have the main entry point we have bunch more Expo packages importantly though we have the Expo router the Expo router is an interesting thing because it kind of walks the line between a router and a framework where next is a framework that is a router built in expo's kind of a router with a framework built in it does really cool stuff and probably deserves a video of its own but the focus here is not all the cool stuff you can do with the router it's specifically the ability to do this API stuff so let's do it the way I would we'll make our API folder inside of the app and here I will make test.ts the catch here is for the explorator to know this for an API you put plus API at the end I don't love that syntax I really like it's felt kit that you put the Plus in the front because it moves all of the things that affect routing to the top just due to alphabetical order sorting in your editor which is really nice to see oh these are the things that are routes everything else isn't part of that I like the syntax a lot I wish more things stole it cuz it's really good but I do also generally like that you can have a custom name that represents things while also specifying that it's an API that I want to do test and then inside of there have an API so like in next the way you would do this is you'd have test the folder and then here you'd have route. TS which I would say is the wor of the conventions this is a better hybrid feels a little remixy overall not bad what we want to do is process a request and return a response I'm actually just going to follow along with their docs nice and simple one important piece is we have to specify in the app Json that there is a server output so we'll do that by going into the app Json and under web we're going to change that to Output server cool now that's been changed we can host this theoretically anywhere that supports a node server such as netlify Cloud flare and versel so let's do it it works in any winter CG compliant environment which is really cool if you're not familiar with winter CG it's the group of people making a standard for JavaScript runtimes so you can have code that handles request response and it will work in Cloud Flare's Edge it'll work in Doo and it'll work in node it's a really cool project and a really cool part of like the w3c standards to try and make all of these things standard let's go back to actually showing how it works though so we have our api. TS just going to copy paste this code because it's easy and again they're using Expo request response but this should be able to be any web standard we'll be sure to test that momentarily but now we have this end point and when we get it'll return with Json with key hello Value World we can run it with npx Expo cool normally you'd open up the web view iOS simulator Android simulator or scan the QR code and run it on your phone so you can actually see things I demo that before it's really cool stuff we don't care about any of that we just want to hit back end so let's give it a shot no easier way than curl right Local Host 881 is the port it defaulted to interesting we can go with that API test and look at that we get a response from our server in Expo so since since we put this in API test the URL will be/ API test and when I curl this we immediately get the response hello world super cool I want to delete all the Expo code now there is no Expo specific code here look at that it still works ready for something really fun we're going to make a new project real quick fex create next app latest project name API demo enter a bunch cool here is a random nextjs project you can tell because it has way too much Tailwind in the initial example let's make an API folder let's make a file named test again/ route. TS because NEX has different opinions about how these things should be named but I am pasting that exact code if we look here that is the exact same code between the Expo backend and the next API and if I uh Bun Run Dev so now if I curl Local Host 3000 which is where the next app is same exact response the specific thing I'm trying to Showcase here is that this is web standard code if you learn how to do this in Expo you how to do it in next you know to do it in most other things really really nice you can write this code once learn these patterns once and reuse them other places it also means you can write a bunch of Route processors that export the get the post and all these things and it will just work in Expo now and it will just work in next to the reason this is important is you look at how upload thing works if you're already familiar upload thing is a project that my company ping built in order to make you easier to manage file uploads in your web def projects we say next here well this Expo change we're going to have to change our branding because finally you can include our existing bindings in your Expo app and it should just work just to take a look at how you handle next right now we can scroll to the upload thing route TOS you import our create route Handler function you import your file router which is backend code that defines what users can do and now you export const get post by calling our function and we just return a get function and a post function and as long as these are using web standard request response which they are now this binding or exactly as is in both next and in react native that is so so cool and we finally have a happy path to supporting good mobile experiences for our react native developers that want to use upload thing I am hyped on this it is so cool that you can finally in your Expo apps have well integrated backend stuff someone in chat just asked a really good question but where is the server very important question when you use next you're probably going to post on verell there's a lot of other cool places you can upload your next app to and run it you can run it in a container you can run it on netlify or cloud or these other serverless places and as you might be sensing you do the same exact thing here so let's quickly deploy this deployment for maybe familiar with the basics of npx Expo export so if you just want to use express and like run the Expo app within Express you can do that you can also again use web standards let's take a look at the versel one it's experimental and subject to Breaking changes cool we're going to do it create a server entry file all requests will be delegated through this middleware the exact file location is important API index.js the reason this has to be here I'll explain moment enely I think yall will understand once I do though so now we're going to grab this verell Json versell js's a cool way to configure Frameworks that don't have a bunch of built-in support like next theoretically you can use the versel Json to support basically anything in fact I started using versell as a v user because I wanted to host endpoints a cool thing many people don't know about forell is on any project you can make this API directory and you can just put things in it like I could put hello Dogo and I can write go code in here and then when I go to/ Aiello once this is deployed it will run this go code serverless in send a response there's a bunch of languages that forell supports in the API directory that have nothing to do with next whatsoever and I feel like this gets missed a lot because people just think of verell as the next thing but you can support a bunch of different things with it here's the dock with all of the official and unofficial run times here's all the things they officially support you can run node which is the more traditional js on the server as well as Edge which is the cloud flare JavaScript that tends to run a bit faster because it can skip a lot of the cold start stuff but also is limited with what it does and doesn't support so a lot of old packages won't work there we also have go python Ruby and a bunch of community ones like bash Dino PHP rust see some other cool stuff too I know that for example GMO actually has done some cool demos with the PHP binding very easy way to deploy basically any language serverless without thinking about it we're not here for any language we're here for JavaScript so as I showed you here we're creating this Handler it binds to the disc server folder which gets built when we build and this allows for this index.js endpoint that the versel Json points 2 functions API index.js here's the runtime it uses here's the files to include and now that we have that done I will continue following the instructions to make sure I do it the way they want me to now I have to add the versel build script which they showed that as a code snippit but it's relatively simple to add package scripts versel build cool I already have the versel CLI so for cell deploy npx for cell deploy obviously this was on GitHub I could have just clicked the button this is easier my personal not an existing project XO back and test code is here we'll let it do its thing theoretically once this builds it should all just work and to those watching the video don't think these links will still work so I'll be sure to take this app down before you try here's all the stuff I have in my personal versell right now and we see we have this new Expo backend test we'll take a look see how this deployment is going still building expect this build to take a decent bit because just like the size of all of the Expo packages is massive well need a 30 seconds to get all the packages installed just cuz it's so much stuff which I honestly think is fair when again you consider everything that this build system is doing and that it can then cach the node module so doesn't have to do this for future builds exporting one API route this is the important bit the API route cuz that's creating that new endpoint for us oh it even created static routes too cuz again they're trying to make Expo more a full stack framework even for web so this also created endpoints and web pages that you can go to it's pretty cool playing the outputs about 2 minutes for the first time building not bad at all let's take a look here is again the react native code running here so you have a whole web app that works still using Expo same code for the web and the mobile app really dope that's what we're here to talk about we're here to talk about the curl so let's curl SL API test look at that we have a real endpoint in an expo app that's deployed on versell that returns us some Json was that more steps than I would have liked kind of but once you understand all of those steps it makes a ton of sense top to bottom we have the versel build which is a custom build command that versell can run to make the web export and deploy that versell looks to this API folder to see if it has things it can use to make new endpoints so we created an index.js file so we don't have to build it by making this. JS we get to skip a bunch of build steps and other things and just write a simple file this was typescript we'd have to compile this which would be annoying we also have the versel Json which specifies to versell hey by the way here's where the output directory is here are the functions that we defined and here is what runtime we need for these to run properly oh also if there are any routes that we don't have a page for you should redirect them to API index.js instead I think this is totally reasonable and again the result is dope now in my Expo mobile app I can export an endpoint and a server that both the web and mobile apps can use and I can export a web app like an actual website that people can go to as well really really nice stuff I am hyped the team has worked as hard as they have to make this all possible the results dope I genuinely hyped that mobile devs finally start using servers in their application development what do you think about all this are you excited to start integrating backend more directly with your mobile apps do you even build mobile apps I'd love to hear more about your experiences with apis backends and mobile and how these things all come together because we want to get this right working really hard to make upload thing the best possible experience for both mobile and web devs looking to upload files and what expo's built here are the necessary pieces for us to do just that and again we haven't even started talking about server components so I'm really excited for a future where all of these things can come together anyways that's all I have to say about Expo router 3 and all the cool stuff the Expo team's doing we love your thoughts let me know in the comments see you guys in the next one peace NS




## More proof you need to use Expo... - 20240103
no secret I love react native it's allowed teams to move faster than they've ever moved before not just on web but on IOS and Android all using native components while there are other technologies that have done interesting things in terms of multiplatform none of them have targeted native code quite as well as react native has when you're under a button it's rendering an actual iOS button on iOS and an Android button on Android instead of some weird abstraction in order to do that react native has to communicate with the native platform and work with the native platform in a lot of different ways which makes everything from testing to integration to bundling to building in CI way harder than it needs to be as such we've seen a lot of developers turn away from react native relatively quickly and even some move off of it and today we're talking about one of those cases this is the case for a Allen which is I believe a French company that recently moved off of react native in favor of Expo so yeah it's kind of a catch I know I click baited y'all but but hear me out a lot of the problems people have with react native are solved incredibly well with Expo in the tooling built around it so let's take a look first off it what Expo is more importantly how the team at Allen moved off of react native onto Expo directly here's the tweet I saw as soon as I saw it I knew I wanted to react to this live so I actually went out of my way to get their permission and they seem pretty hyped on it Yep this is one of the enges from the team so they were hyped I was hyped too let's dive in our journey from react native to Expo for mobile application development at Allen if you're not already familiar with Expo think of it kind of like next SL forell but in the react native world it's a better starting point with a lot of the tools already built in so that you can quickly start your react native app but also maintain it build in the cloud and do all these other things like hot reloads that make react native such a powerful platform classic meme everyone's favorite where on the left side and the right side it's just use Expo but in the middle you have all of this chaos going on with custom tools for IOS and Android Circle CI in the middle of it orchestrating it all and then deploying through these other platforms all the native way it's a lot of work and at Allen theyve always been committed to providing the best experience for users as possible and that extends to their own Engineers through what they call the developer experience we believe that a great developer experience is essential for building highquality software and that it's a key factor in attracting and retaining top talent we've always used react native for our mobile applications as it's a powerful tool that brings the development experience of mobile closer to a web one and reduces concerns about native code and the discrepancies between IOS and Android however we recently made a significant shift in our mobile app development process by migrating from react native to Expo this blog post will detail our journey and the reasons behind this transition so why are they making this move why did they choose expo Expo is an ecosystem of tools on top of react native enabling us to not worry about the native part of our app in most cases and to have web like developer experience it significantly simplifies the development process by eliminating the need for local compilation of IOS and Android apps and allowing Engineers to focus on building and maintaining features for our members there's two ways to use Expo in Dev the first which is really easy and fits under this left side here of the low IQ is there's actually an app in the app store called the Expo Go app which lets you scan a QR code in Dev mode and immediately have the app on your phone that's a really really powerful developer experience that let anybody even on Windows spin up building a mobile app on their iPhone by just running the command and scanning the QR code npx create Expo app they changed this recently guys don't blame me we'll call this mobile demo and now I have everything I need to run with an emulated experience on iOS or Android or natively run with web now just mpm run start and that gives me this QR code and if I scan this QR code on my phone it opens an expo go it is currently compiling the code on my computer and there we go it's asking for permissions for things because it needs to conect my local network that is it compiling and there we are that's my react native app you can see the text open up an app.js to start working so if we go back here I'll go make a code change app.js I'm going to change it to why haven't you subscribed yet and I'll font size 40 and now is immediately on my phone no cables no anything connecting it's that easy for me to install the Expo generic app on my phone and get to work doing Dev on my computer like it's never been that easy and if I make a change here let's change the background color to Black I'm going to save right now and it was that quick going to undo and save right now and it was that quick to swap that's nuts that is an incredible mobile developer experience that like no one's come close to but as soon as you need native stuff that isn't included in Expos app like payments like weird Bluetooth module stuff and you need to have your own native code this wireless bridge can't get you native code on the phone so you have to build your own wrapper similar to what Expo has with go that lets you swap the JS bundle on top of the native code that's already included that's why this side is more and more valid now too though because with tools that they mention here like the Expo Dev client and Expo config plugins now you can build your own Expo Dev shell on your device device that one person at your company or maybe none actually know how to build they just build it in expose Cloud you all install it on your phones and now you can just write code on your computer and see it on your phone immediately it's a really really cool developer workflow that allows you to test your code on the actual devices that you're going to be using it on it's a bit slower cuz it's a Dev mode so the code's not going to be compiled and optimized properly but it lets you see just how bad things can be and use the code on the real device instead of using simulators all day it's really really nice andless you feel that the touch flows and things like that all behave as expected yeah as they said here a lot of the Expo tools make it easier to think less about the device specific stuff and just build and focus on the features for their application while they were considering Engineers to be full stack at Allen they noticed a certain shortage on Native mobile development skills they were struggling to find native Engineers which is still the case especially those that are willing to work with web devs meaningfully even at twitch we had this problem where the native team kind of became a siloed off thing and getting features into the native app was miserable because we'd have to play a lot of politics just to make a moderation Feature work on the phones because a different team was responsible for all of that stuff and as they mentioned here Expo shipped two major features recently that made it a valid option which were the dev client and config plugins because now you can do the native part and also have all of the benefits of Expo and something they haven't touched on too much here that I want to highlight we go to expo's GitHub the state of their packages is insane we just look at the packages on the open source Expo GitHub they have so much stuff they've already built they have an audio video package that uses the best AV players on both iOS and Android they have a background fetcher that let you run fetching code and fetch data in the background they have a barcode scanner that uses the camera and gives you the barcode data automatically they have Expo battery which lets you see how much battery the device has with JavaScript code and Mak decisions based on that response Expo blur which handles native blurring of layers on Native platforms which Android does very differently than iOS brightness controls calendar Integrations direct camera access cellular data native checkbox support native clipboard access native crypto modules all of these things things suck to build yourself if you're building either native directly or through an abstraction like I don't know flutter you have to either build a lot of native code or know these apis and sdks really well for both IOS and Android or if you're using react native you just install Expo image picker and now you have a native image picking Solution on both platforms that's so so powerful and really pump to see both the number of these packages and how wellmaintained and supported they are it's such a cool set of tools that I've relied on for all of my reacting development and it's cool seeing more and more companies getting to take advantage of this due to the dev client and config plugins allowing them to build complex native apps that happen to use react native for the UI layer let's see how they break down the anatomy of react native app because I'm just talking about why I love Expo so much the code of react native application lives in two Realms one is the JavaScript realm that allows the core logic of the program and is typically where developers spend most of their time native modules are the other part and they are employed to tap into native code when certain capabilities cannot be executed in JavaScript think like camera file systems Etc the JavaScript code is bundled into a single file which is then loaded by native code the native code is compiled into a binary that is then installed on the device cook anology of or with web development would be the following JavaScript is the code in the browser and Native modules are the browser apis like Navigator get user Media or Navigator blooth this is where the xod dev client comes in for this analogy what we need is a customized app that can load our JavaScript bundles and has all the native capabilities we need and that's what the xev client does continuous native generation maintaining scaling and updating a single native project is intricate let alone Main multiple in a crossplatform app the tasks become even more complex with the scaling of the project increasing third party dependencies and keeping up with the latest OS release this results in slowing down the development momentum discouraging the addition of complex native functionality thereby leading to the generation of less powerful apps to tackle these challenges a process called continuous native generation is implemented CG is an abstract concept that defines the generation of native code from several inputs typically the fusion of a code template in configuration the result is a native project that can be compiled into a native app it is a process used by Expo prebuild to generate native projects for react native apps but the concept extends Beyond react native or crossplatform apps Expo config plugins are a way to customize the native code for your project during the pre-building process they provide a way to add custom native code and manage native dependencies for your project tldr this lets you install an npm module and now Expo when it builds your app is going to automatically make sure the right pieces are bundled into that app so if you use the camera module you installed the Expo camera whatever in npm it's now going to include the right dependencies in the native bundles so that you can actually use that package in JavaScript previously you would have had to link this all yourself using pods in iOS and using weird Gradle stuff in Android but now you don't have to they are generating the right native code binary based on which packages you're using in need to use Expo and fig plugins are particularly useful when your project requires custom native code this can be needed for a variety of reasons such as you need a library that requires custom native code payments in iOS are a total mess and you have to specify very very very specific SKS on iOS that have their weird restrictions and run on a native level with Apple pay because those are all Project Specific you can't really make a generic module for them because they have to be approved by Apple individually so you likely are writing custom native code for that anyways but now you need to access that code from JavaScript this is where things start to get messy and with Expo plugins it's easier than ever to write that code reuse it and bundle it into the right app in the right time you also might need to just customize native Behavior like have scroll do something weird or have a crazy Zoom effect or some text rasterization that you're doing being able to write custom native code trivially and bundle it all natively really really powerful so let's hear about how they actually made this migration happen the migration process we expected the process of migrating four apps to Expo to be a long and arduous one with that in mind we identified two major items one is avoiding big migration branches in merg hell and two is identifying and classifying the native code here's good old evil Emoji that's how you know this was a struggle when migrating an app to Expo other developers would continue to work on it the naive way to think about it would be to create a branch where the migration would happen this would require that we carefully monitor the drift between this branch and Main would be a timec consuming and error prone effort big feature branches are evil uh the evil of big PRS I'm really excited to do this video in the near future because big PRS don't work especially if they stay open for a while the amount of pain I have had even the last few days from things I screwed up over on upload Thing by taking too long to merge stuff and now the drift is insane like it's a very real problem merging constantly is the only way you can prevent that their solution was to create a new temporary project in their mono repo that would load the entry point for the existing app here's the schema app rot component app registry register entry point for the Expo JavaScript bundle where app rot is mounted app registry register interesting so they're registering the Expo app as the roote app and then just Mount the old app inside of it that way we could operate the migration within a dedicated folder without worrying about breaking the original app where new features were continuing to be shipped every week I've done this before it's still not perfect but it's pretty damn good overall I've had a pretty good experience with migrations where I just have two folders in the same project one is the new version one's the old version we're still shipping the old one to users there's a feature flag where we're working on the new one and we're making sure all the code goes into both it just prevents a lot of the types of like slipping and conflicts that cause problems when you do big migrations like this with the migration to Expo done we started to ship the Expo version instead of react native and kept the Dual setup for a few weeks to clear off the remaining rough edges we finally moved our code from repo apps app-1 to repo rout apps app-1 Expo and then renamed it to app one sounds good to me identify and classify native code that's another important step when you're doing a migration like this when you no longer own the native part of your platform our oldest react native app is 7 years old in eternity in the react native world that that for react native like seven years ago react native was not a good solution it's grown so much since but I wouldn't have picked react native 7 years ago I would even picked it 5 years ago it's like the last three years react 8 has gotten to the point where I would start a new app with it so I don't even want to think about the horrors in this code and as I said the native code evolved during all these years to fit the react native ecosystem changes and are sometimes very specific needs this is the other thing when you're building a native app you almost always have some weird needs that no one else does and the result is some custom code you have to maintain and as a result they've had to carefully list examine and classify all their native code be it their own Solutions or third parties so there's two buckets they broke it down native code that doesn't require native changes like it can use the automatic linking features that now exist inside of react native or native code that requires some specific setup in their native code think about changes in like the Manifest which is like properties of the app what permissions it has what name it is what icons should appear on different screen sizes stuff like that once identified we have to classify it while the first category wouldn't cause problems during the migration the second category would require further analysis to assess that they could make it compatible with Expo so they broke new subcategories out the native code provides an expo config plugin so they can just add it to the dev client and it's good or it doesn't but an alternative of that native code provides the native plugin and they can assess if it's worth swapping over or if none of those are are valid solutions they develop their own plugin the tldr and the Expo config plugin is it lets you write a single file that describes here's how we handle this on iOS here's how we handle this on Android here's how we handle this on other platforms and now when you install that module Expo is smart enough to bundle it into the native platform for the app you're building so it's like almost give it like package Json for Native Integrations in a lot of ways so if the package you're using already has a config plugin awesome you don't have to worry about how it's bundled if it doesn't but something else does cool use that instead and if none of them do how hard is it to write your own that's a really good plan and that way they ended up carefully crafting around 30 in-house Expo config plugins again when you're writing native apps you're going to have a lot of weird one-off native stuff so they had to write these custom Expo configs for those native plugins but once they have those written it all just bundles itself and that took them 6 months to migrate their four apps not only crafting these plugins and ensuring non-breaking changes but also adapting to their continuous integration interesting let's hear about their CI CU I think this is one of the coolest parts of x now that we're fully able to produce a customized Expo Dev client for their needs the objective is to distribute it to their 90 Engineers that's a lot of Engineers to have working on react native apps that's cool they got this all working Expo does provide such Services through their Expo application service and I would strongly encourage you to rely on it I remember when EAS was starting I'm actually grandfathered into a super cheap plan on EAS cuz I was probably in their first like 20 users I was so hyped when EAS came out the tldr is it's kind of similar to what like vercel does with CI and building where they build the code and deploy it for you EAS will build your native app in the different ways you need it built you run the CLI they kick off the build on their server and you just get a link to install it when it's done if you want to have it distribute to the app store for you you can even have it do that in order for it to do this it needs to be able to build apps for IOS and Android and iOS apps have to be built on a Mac so they're actually running a cluster of Mac Minis that will build your app for you and run the right Sears they'll even use your Apple certification so that you can sign the app as your build and then send that to your team to install a version that doesn't even have the JavaScript in it it's just the native parts so they can scan a QR code and do development or you can sign the official production version all just pushing and running a CLI or attaching this into your CI on GitHub like you would with anything else like the nextjs world it's so cool that finally you don't need to run a build on your computer I cannot tell you how many times I had to make a a quick change or fix for an important client using one of our mobile apps and I had to like find my laptop that had xcode set up properly hope that it would still be able to Target the right IO version pray that nothing's changed on that machine and then send out the builds and actually get it it was super super sketchy I kept one of my old MacBooks around just cuz I had my Dev environment set up correctly on it and then I you not the week after I wiped it we had a massive problem and I had to borrow my CTO computer cuz he had it close to set up properly for us to trigger a new build I've since moved to e and had no problem since because I just run one quick command and it works we saying what about VMS what about Docker what about NYX none of those things work work in the Mac OS ecosystem xcode is horrible and if expo's main impact is that you don't need to deal with xcode anymore they have succeeded they have made our lives significantly better just by letting us move out of the xcode world and running these things on their servers instead so yes EAS is dope and it allows for a developer whose life is in Linux who happens to have an iPhone for testing for working on your app they can now work on your app on their computer without having xcode or Mac OS that is dope and as they mentioned here for this company they adapted their CI workflows to First generate the native code of the Expo app think about Expo pre-build and then rely on Fast Lane they're already using it to compile and submit to the stores they created a new CI workflow that proved to be a game changer for their engineering team building distribute the custom Expo Dev client to both app center and S3 App Center so Engineers could install it and S3 so they could download it for simulators that's really convenient because it's just a binary that's signed properly once it's done with EAS and they able to drop fast L and almost entirely it sounds like we created a simple CLI that would automatically download and install the Expo client on any engineer simulator and they can do whatever they want with a single line of code Y in workspace name of the app install Dev client dasp iOS or Android they now rely on the Expo Dev client for mobile development as they would rely on their browser for web the impact of this transition the transition to Expo has been a GameChanger for our mobile development process the feedback from our Engineers has been overwhelmingly positive with many setting the improved developer experience as a major benefit also onboarding new Engineers to mobile has become significantly easier as it only requires two commands install the XF client and then you run the JS bundler this is the biggest part react native is at a point where web developers can meaningfully contribute to it but getting it set up was one of the most painful pieces actually getting a machine with react native and with your app all set up properly so you can do Dev was harder than actually doing the dev if you already knew react that is solved with Expo it's now easier to get a react native project set up than to get a next project setup in a lot of ways and this blog post is an example of just how cool that is and the numbers we went for from an average 7-minute local build time to less than 2 minutes for the S3 download and install on a simulator before the migration to Expo we conducted a get investigation on how frequently a change would happen on the native code and that subsequently would require them to rebuild the app over the last 5 years this number varied from 5 time 760 per month with a mean of around 200 and a team of 90 Engineers 20% of the engineers needing to rebuild the app locally 10% of the Native changes gives you the following hour saved per month we're currently saving our engineering team around 30 hours per month of build time no more xcode xcode signing Android or Java version issues we don't regret you this is just the build time too there not even considering the amount of hell I've went through updating my X code locally making sure the versions of everything is set proper I've lost so much time to these types of issues and just seeing it handled this well is incredible this is a great article huge shout out to the team over at Allen both for putting the work in to do an overhaul like this but also to document it for the rest of us to learn from I wasn't honestly sure before reading this how viable these types of moves were and what I've been recommending is starting from scratch with Expo and Expo go and porting things over that is kind of what they did they had a lot of luck with this partial rewrite and the pulling over the old native app and running it inside of the Expo shell I think what they've described here is a really good opportunity for companies to move over this new development workflow and get even more of the benefits of Expo even quicker than they might have expected to on top of that if you're not already using Expo your team's considering a mobile app or the current mobile apps by a different team that's moving too slow I think they made a really compelling argument here for how powerful these tools can be and how effective you can deliver good software it's a great article huge shout out to the team for this if you want to hear me talk about some of the secret superpowers of react native I'll put a video in the corner here where I talk about why I think it's basically essential for your business if you can use it and if you've already seen that or you're not interested there's a video right below it you might like instead thank you guys again appreciate youall as always peace Nars




## My Biggest Tutorial Ever (Build A FULL Google Drive Clone with React, Next, TypeScript and more) - 20250131
all the tools and Technologies I love to use and talk about aren't necessarily the easiest things to learn especially with all the changes that have been happening to react over the years I could just keep making videos explaining each of these features that get a decent number of views but there's no good like overall View and nothing will get you that view better than a full stack tutorial where you actually go through the process of building everything yourself this tutorial is the hardest I've worked on a single video in a while and you'll understand once you start going through it because we're building a full Google Drive clone from scratch yes Google Drive like the thing to manage files it's not a simple app I thought I'd be able to make it pretty short but uh we didn't succeed there the torial is structured very differently from the ones I've done in the past rather than just going and coding the project then coming back and trying to recreate it live with you I wanted to go through all the things that I normally experience when building so instead of avoiding rabbit holes I jumped down them instead of hiding from the AI tools I develop every day I use them heavily and instead of trying to debug off stream and off recording and then show you what I found after I actually go through a lot of my debugging process with you the goal of this tutorial is less to just show you the tools in Tech more to show you how to really think through and build with modern tools and Technologies everything from the editor to the actual Tech stack to the places that we deploy one last thing before we get started the only reason a tutorial of this length that took this much time to make can be free is thanks to the awesome sponsors making it possible huge shout out to clerk single store netlify and post hog for jumping on the opportunity these are they all great tools I can easily recommend so having them in here only makes sense and I'm so thankful they're willing to foot the bill so y'all can get this for free I don't like charging for Education materials and I'm so thankful we found a way to make this happen so without further Ado let's head to the lab I personally like to try and get the project working and deployed as early as possible so when you introduce new pieces and make changes you're less likely to run into something that's broken it's so common for devs to have a fully working app on their machine then when they go to deploy it everything falls apart so where you can I highly recommend getting deployed early so let's do it pmpm create T3 app at latest we're not going to be using the whole T3 stack but there's a lot of good stuff in here that will make things like eslint prettier and environment variable management much easier for any nextjs app be nameing this project Drive tutorial if you can name it the same thing it just makes a lot of random small things easier got typescript we'll be we be will we be using Tailwind of course I would like to use trpc but for this tutorial I think it's simpler to not so I'm just going to hit no here not a big deal if you hit yes and you want to use it for some things but the goal of making this as simple as possible I'll be avoiding it now speaking of making things as simple as possible I wouldn't wish next off on many people today we'll be using Clark instead we're going to pick drizzle for the database next app router obviously what databased provider this is an interesting question going to pick SQL like it's the simplest solution and we'll move this all over to single store in just a little bit should we initialize sure yes yep awesome look at that now we are inside of the project we will open it up in our editor and look at that we got all sorts of fun things here I could do an overview I don't want to distract you guys too much with it the few things that matter over a more traditional create NEX app code base are that we have the enjs file this file uses the T3 OSS environment variable package t3v it just makes it so you won't run into that wonderful problem where there's something missing from your environment variables and everything goes wrong in deployment with weird obscure errors now you'll get an error on build like it always should have been this package is great really happy we have it but most of our time is going to be spent in app SL page and all the things that come from it so let's make sure this all works as expected pnpm runev Hub over the browser I have a local host open here just refresh it and here we are a working homepage it's very simple we can change the contents to make it even simpler just to make sure all these pieces work sub nerds your subscribe right the ad apostrophe here is because technically you're not supposed to put things like an apostrophe in your JavaScript files they should be wrapped with a string the other way I prefer to do this wrap it like that but now and go back here what Su nerds you're subscribed right so simple let's get this committed and deployed just so that we have a starting point get status get add get commit knit get push oh no we don't have a repo for it yet there couple ways we can fix this we could use GH repo nit if you have the GitHub CI installed I hate it I think it is really not good so instead we're going to go to github.com directly going to click the little new button new repository Drive tutorial going to make it private CU I don't want you guys to see this before we're done make sure you don't check any of these because then you won't be able to push up a new state hit create I don't know why this is second because I feel like yeah it is what it is we're going going to grab that just hit copy on the second section here back to your terminal paste enter as long as you have your GitHub set up properly this will not push now we have this all up on GitHub let's get it deployed we'll be hopping over to NFI sign in if you haven't thankfully GitHub is an option making a new site is not that hard at all import an existing project GitHub triple checks that you're off and now we can search for our repo again this is why having the same name makes things a little bit easier drive down tutorial and here we are Drive tutorial the stuff site name I doubt this will be available for y'all because I'm taking it but come up with your own clever name for your site base directory none of this needs to be changed cuz it's smart enough to know that we're using nextjs environment variables we can just fill them in so we don't get a build error just going to hop over to ourv here we see this is the database Ur all by default we'll absolutely be changing that in the near future but for now we can paste it in make sure the key and the value are correct those match exactly deploy Drive tutorial obviously in the near future we'll have things in here that are more secrets not just like random paths to files so for now it's okay that you guys are seeing this and the near future you'll be getting all of my secrets that I'll have to reset before the video goes live so you guys can't take advantage of all the services I set up it is important to know anything in here should be considered private it also should not be committed that's why I just entered it manually environments are not meant to be committed they are meant to hold things that are specific to your deployment most of which are private and not things you would want to have shared if you do want it public because you want the user to have access to the data then next public needs to be the prefix for the environment variable looks like we're deployed now let's go take a look site Overview Drive tutorial and look at that we are live what's cool about platforms like NFI is now that this is linked to my GitHub repo all I have to do is save a change and push and we'll automatically get those changes deployed to our users with no additional work on our part I think that's great also if we make poll requests cuz we want to try out new things or you know you're working with a team all poll requests will also get their own builds right in line in the poll request itself which is so handy when you're working on big projects with a lot of people being able to test the things that they actually built without having to download all the code yourself spin it up and play around is so nice having that just baked in for free is still unbelievable to me normally I would go straight into plugging the database in but honestly I want this to look a little bit better so I'm going to skip to that part we're going to use v0 for this because it makes things relatively easy to set up I am on a premium account but everything you're about to see is free and I will be sharing the actual environment I create so you can copy from it directly VZ uses Shad Cen heavily if you're not already familiar it's a phenomenal open source component Library where the components aren't npm installed they're actually copy pasted into your code base it's built on top of tailwind and radics and I have been so happy with it it's going to make stuff like what we're in here way easier so we're going to ask it to do what we want which is make a basic Google Drive clone UI use mock data the mock data call out is important because we want it to be easy to get it working and see it but also have a clear point for us to reference as we build our own data model folders should be openable and files should be direct links to the file make sure to include a a mock upload button we'll see how it does on the first run what's cool with tools like this is even if they're not quite right the first time you can edit the code or you can ask it to fix it stuff so we will see how it does here looks like it's making folders as well as creating files here I've actually quite enjoyed using tools like this not because I'm too lazy to write all the code but it's actually just nice to try out different U more quickly if I want to try out different ways to structure things and I'm not quite sure what I want yet a tool like this can be great even if if I don't use any of the code just to get an idea of what it could look like so here I actually don't like the UI we got I want it to be a more traditional list View and I hate having the folders on the side don't love this rendition here's some things to change dark mode by default remove the sidebar folder view should be a list include breadcrumbs on top for navigation if you're not familiar bread are the little thing on the top of a folder system when you're navigating through that show you all the different places you can go up or down so you can say this for example would be breadcrumbs where the top is project and then you have Google Drive clone as the layer right underneath that looks significantly closer to what I had in mind and now we can see they have the breadcrumbs on top you navigate between different things that was a bad direct link but it's doing what it's supposed to it all appears for the most part here to work pretty handy so how do we actually get this into our code base we have this folder here this file that has all the stuff in it we could copy paste it but we're not going to have a lot of these components we're not going to have the icon Library being used here we're not going to have button we're not going to have almost any of this easiest way is to copy The Code by clicking the little add to code base button gives you a Shaden command to run you hop over here paste press enter it's going to ask if I want to make these changes override these things like the New York colors I hate hate hate the gray and the zinc colors the bluish that they end up in is horrible so we'll be going with neutral we'll use CSS variables it's going to error CU it's missing some of the packages totally fine I hit yes to override the page file because it has no Contents I care about normally I would restart the project but I'm honestly curious if it just works so we're going to give it a go and see what happens I cannot find module for page route not found SL page cool so it does break clear pnpm run and if all goes well this should just work oh it's unhappy because of things that it expects to be in page that aren't oh I know what happened this happens half the time proof that none of these tools are even close to perfect it made a folder named app and put the Styles in there but then also updated this one too and I don't know which I'm actually supposed to be using here which is quite annoying um at layer base we'll use the default ones that come with Shaden I'm going to delete this app folder make sure if you're using a source subdirectory that you're not also using the app root directory because of the conflict that will really confuse nextjs into not knowing what to do or what to render I'm going to clear just in case if you ever run into weird things with next rmrf the next directory pnpm runev and now look at that all working as expected you'll notice the navigation is occurring in the page rather than in the URL bar like if I refresh it's going to bring me back to the route because we haven't hoisted this navigation up to be part of the URL prams we'll do that in a bit don't worry we could get fancy and do nested routing there but we're just going to use file IDs and folder IDs so let's get this as always committed and pushed so we know it works I'm going to do something interesting I want you guys to see the branching workflow so we're going to make this a branch Theo slash new UI get commit normally when I do changes like this I'll get ad- P so I can do a little short code review but in order to keep it brief and to get this onto GitHub as quickly as possible I just did get ad- a now we're going to commit uh new UI mock for Drive get push I have a really fun flag in my git config on push I have Auto set remote true and default current this makes it so I don't have to like get remote ad origin or change anything when I'm just trying to push a branch it's one of those little things that just made my life a lot better I would recommend setting that up so when you get push you don't have to do any additional stuff now we go back over to GitHub and create a p request new UI MOX for Drive create PR and in just a moment you'll see the magic of platforms like NFI there we are look at that the netlify bot showed up it is now doing a deployment for just this Branch you can see all of the things being configured and handled here so cool that I didn't have to set up anything I didn't click any buttons just by importing the repo on nlii we now have automatic preview environments for all poll requests I could wait here I could set up my own CI I could review it I could have an AI review it you get the idea but we actually should look at the code I try to look at all the code one more time before we actually merge wherever that time is could be during a-p or it could be somewhere like this all looks good we added the react slot package from radics UI class variance Authority which allows you to have multiple different class names that conflict in groups around them with Tailwind we have clsx which you turn class names on and off depending on conditions luced which is a package of icons Tailwind merge which makes sure if your specific class names conflict and Tailwind they're handled as well as Tailwind animate which will make animations a lot easier here we can see the overhauled page TSX file it is used client we will probably move that to use server so we can get some server data but it all looks fine here we have the button component which comes straight out of Shaden nothing to see there for the most part things in components slui I don't find myself needing to review very thoroughly we have our mock data which looks like a fine starting point has Type folder type file both are being sourced together we'll figure out how we want to model the data in the near future we have Source Li utils that's just all part of the Shad CN stuff we have our new Global CSS for Styles still includes the Tailwind stuff but they have the new base layer for root and dark mode all seems fine to me so I will I can't approve my own changes probably for the better oh no what went wrong with our deployment files defined but never used index is defined but never used here's a quick super hot theot take I don't like having my preview builds blocked by small oneoff issues that exist in our code base so if we're importing file here or not using it I don't think that should block me from deploying this is just a type error effectively so what I like to do is inside of my next config I turn off two things the first is we want eslint one of these is ignore during builds true and there's a similar thing for typescript ignore build errors true this might seem terrible why are we turning these off well honestly we'll just add CI later on I could add it now really wanted you just make a GitHub folder copy paste any of the example typescript Checkers and let a CI check make sure your types are good and you're not making any dumb mistakes before you deploy but for now I'll just do this because I know the code is fine get add- P save save apparently I saved the file which caused a lot of things to be reordered totally fine with me we'll commit both um disable es lint and TS during builds some pretty here changes get push and now this should hopefully work hopefully this helps emphasize what I mean about trying to get preview deploys up quickly because now since something went wrong but we had a deploy that worked before we knew it had to have been something that changed since our first deployment in this case the change was simple it was a type error that shouldn't in my opinion have blocked build but now that is handled and just because it's important we'll start that CI we'll do dot GitHub new fer in GitHub named workflows and in here a file named ci. yl I already have contents from my pick thing repo so I will paste this order make sure you're not just copying code that you don't understand we'll go through it really quick this is a yaml file yet another markup language this yo file describes what GitHub should do whenever we push so on push we have a job that we run named build it runs on Ubuntu and it has steps first it checks out the code using the official GitHub checkout action we then install dependencies npm install DG pnpm this is to set up the pnpm global I'm sure there's an image that has that already set up I'm lazy this works fine then we pnpm install we then copy the EnV example files because if we don't do that then the build will fail because there are environment variables missing we then run the type check pnpm type check and we run lint pnpm lint I believe both of these should already be in here thanks to create T3 app looks like they are super handy and that means I can set this up real quick get status get add- A- a will always grab new files whereas DP won't get commit DM CI and now if we go back to GitHub we'll see my new CI here you'll also see that the preview build succeeded and I can click on this link here to see my preview deployment up and alive on an actual URL this isn't running locally on my Dev machine There's an actual environment on the web that I could send the link to a coworker or somebody else doing test so nice to have an actual usable thing that I can go play with to see if these changes that my team made are good or not but we just pushed the CI which means now we have this ci/ build step that is baked in to our poll requests that will automatically run whenever we push to a new Branch or even domain directly very nice to know that if something goes wrong we have that right there and we can see that this is failing because again it is doing the linting and it's seeing that we have the file and the index on page TSX that are not being used thankfully if there's anything that's erroring there it's almost certainly also erroring here so we scroll down I don't know why it used the or syntax here because Nish coalesence makes way more sense if you're not familiar the double question mark here what it does is if this value exists it returns that value and if it's nullish which means null or undefined then we instead return this value it's like a simple version of the turn are where you have file URL question mark file URL or some other fallback but a way nicer clearer syntax whereas the or syntax technically if file URL was false or empty string this would return this instead because those are both falsy values and this is checking for falseness but we don't want it to check for falseness we want it to check for nullish so the question marks make more sense there good error and here we're importing file which I'm assuming is the type for mock data it is and we don't need that because the data is not being passed to our component in the future we'll probably need a type like that but for now we don't all looks good to me get add- P did I forget to save after that I did get add- P once more get commit uh fix build and now if we go back to our poll request we'll see the new build is cued and you can also see for individual commits whether or not they passed in what they didn't pass this is why I really like using tools like NFI and like ibci and using poll requests wherever I can because you can see when things do and don't work and it makes debugging figuring out errors and getting out of weird States just so much easier than it otherwise would be and look at that all our checks passed we're good to go merge poll requests and now that this is merged we're good to go we'll automatically have this deploy to main on netlify which means that the URL that is set for your project is going to be where this is deployed which also means we don't have to really look at this anymore and we can get back to work so we have all of this now it's not a real data model but we are storing all the state here we got a couple things we're going to need to do personally I really like putting something in like a readme or a note taking app somewhere that's keeping track of the stuff that we have to do and consistently updating it as we find things that we need to be working on so let's do a quick rough what's coming up here name this drive tutorial going to kill all the other content here put a to-do interesting that it's trying to autocomplete all that I get too tempted to just press tab on these things when I'm in a markdown file I'm going to ignore the Temptation and write what we actually need to do set up database and data model move folder open state to URL we need to add file uploading we got a lot of other stuff to do add off and honestly I think for a starting point this isn't the worst I'm going to quickly move off up a layer because doing file uploading without off will be a bit silly cool I'm happy with this is a point to get started so now we have this all working it's in a good state I'm going to take these changes oh I forgot to switch back to main so we'll stash get check out main get pull get stash pop add- P so we can look at these exact changes looks like not too much to see here so I will do Y which is to select those changes and approve them get commit DM now you can't see it CU it's too high up whatever you get the idea you know what a commit message is update read me get push that will trigger a build even though nothing changed in the actual code who cares builds are effectively free and now if we refresh we'll see the updated read me cool think that means it's time to set up the database as I mentioned before we're going to using single store it's a really awesome database if you want a database that does pretty much anything it sounds absurd but it really is they are used by tons of big companies it makes scaling your database with SQL really easy you get the performance you'd expect from a document database you get analytics powers that you would expect from an analytics database all while getting the fancy things like joins that you would expect from MySQL or other similar Solutions it's really easy to get started and importantly they already have drizzle bindings made for us which will make setting it up significantly easier you sign with your GitHub I'm already signed in let's go create a new deployment you get one database for free which very handy for us name it drive tutorial DB we all name it the same thing it makes life much easier so name it that if you can you can pick a region as long as the region is Us East one that's fine database name Drive Toral DB cool create starter workspace now we have this new DB up let's connect to it click here click your app and here we have a generated unique token we need to give this a name I like the name to indicate what this is going to be used so we'll call this drive netlify deployment that's what we'll be using it for it's also for Dev ideally you have different tokens for both ideally you have different databases or environments for both but whatever grab this immediately hop over we're going to give it environment variable might not be the one that we keep just make sure it's not a next public one we'll call this single store pass equals string wrapped copy the username as well single store user equals that here it gives us a full connection string which can be really handy depending on how you're connecting but you can also grab it like this which is all of the individual Parts broken out when I tried deploying this before I had a couple annoying problems personal I think those problems will be easiest to solve if you take all of these variables and copy them so I'm going to paste it like this obviously these aren't actual variables but if we do this to get started single store username we already have that we have single store pass we'll name this to single store host single Store Port password we already have single store DB name now we have all the environment variables as as you know we're using T3 EnV so we're going to have to move all of these there as well single store user is going to be a z. string single store pass will also be a z. string single store host z. string you could do URL this not the worst idea the port's not going to come in as a string or a number it's going to come in as a string so we're going to say that as well so we have all of this here but we also have to update the Run time environment so that these values exist we don't just magically bind them for you it would be pretty risky and potentially break a lot of things thankfully cursor is very good at filling out templ stuff like that so now we have all of these included in our EnV variable which means that we will safely be able to consume them get type safety across our code base and if we forget any of these environment variables when we go to build and deploy we'll get an error that specifies what is missing so much easier might be a couple more steps to set up but I promise it is worth it now I want to make sure we do things properly in drizzle so we're going to search for the single store drizzle tutorial simplifying single store integration through the drizzle omm this will be linked in the description as a reference so you'll have it there if you need it but you can also copy the code from the repo some of these parts will be a little bit annoying as databases often are first we need to make sure we have the MySQL bindings install we already have dzel orm and drizzle kit since the bindings for single store are very similar to my sqls that's usually easiest to just install that pnpm install my SQL 2 scroll down here I just realized I never said why I'm using pnpm it works works pretty well has caching has stable versions I've had enough random one-off problems with bun doing things like database migrations that I just use pnpm gets out of my way I don't have to think about it too much but here is where things that actually matter start we have to connect to single store in drizzle we can do that by using the connection example they have here they show how to get the credentials we've already done that we're just going to use the EnV so let's go back to our code find in here our server DB index hi from Theo in the future I spent a good bit of time talking to the single store team to make sure this is as smooth as possible and to handle a couple edge cases and annoying bugs so this is different from how I originally filmed it we're going to stuff it in to make sure your setup smooth and good to go so without further Ado the main change here is we now have a pool for the connections what that means is instead of just one connection that is being used for every person that connects to your site and every Lambda that spins up a pool is created that can be shared amongst them if we do this now it'll make your lives following along way easier first we need to import create pool from my SQL to/ promises also make sure that this is just in the server DB index file not the drizzle config the drizzle config does not work with pools still importing EnV still importing star schema here we are caching the connection and the pool on global this so in Dev when we reset the dev environment we make changes in other files it's not going to have to create a new connection just shares the pool once down here cons connection equals Global 4 db. connection because that's how it gets stored and binded there and if it doesn't exist which what the nsh callusing operator does then we create it and we create it with the host from our environment Port parse int from the environment user password database and here last two important pieces SSL to be an empty object this guarantees that you won't have any issues connecting to their service and that SSL will work just a weird quirk in how it's configured it's not their fault it's my SQL 2's package being kind of weird and then Max idle zero this will handle any timeouts and other issues when you leave your Dev environment running for a while I was having issues where disconnect and not reconnect this fixes it in the future single store is going to make it so none of this even matters but for now this is the solution and now we have a working database instance but we need to be able to push to it we do that in the drizzle config and here it has its own DB credentials its own tables filter tables filter is super super handy if you're like me and you're a cheap bastard that likes to use one free tier database for a bunch of things looking at you guys who are using single store here you put a table filter it will only select tables with this prefix which is phenomenal means you can abuse the free tier and do a lot more things on just one database this looks like half good it has the schema correct it's the dialect wrong and if we go back to our tutorial here you'll see it gives us a bit more context we're going to skip the schema for now we're going to do the dialect single store and we're going to make sure our schema is pointing to the right place so dialect single store kill DB credentials we won't be needing that we are importing EnV here because by doing that we make sure it is available when this runs but we do need a table so I will copy this from here since single store isn't quite MySQL it is its own thing that is MySQL base you get all the things you get from traditional SQL providers but we don't want most of them I am just going to Nuke the contents of this file because we don't really need any of it it does import SQL from drizzle omm because for certain things in the default you need that because there's no concept of created that in sqlite which is where we started I don't care though we're going to do this ourselves why is single store table deprecated I thought I yelled at these guys to f it they might not have yet the reason it's getting crossed out is because they have an at deprecated here the function isn't deprecated it's just that the third parameter is changing so that it accepts an array fly the third argument would return an object this is the one that's used for creating indexes now it has to be a function that returns an array instead of returning an object it's a good change but they should not have marked this as deprecated because now a lot of y'all are going to be confused when you see the line slicing through that which it to be frank absolutely shouldn't be doing this is a users table we won't need one of these but it is a good test to make sure everything's working as expected so now that we have that defined we should be able to generate a migration I personally hate migrations I think they're an anti pattern so instead of doing that we're going to DB push pnpm run DB colon push this function exists because it comes from our package Json it's one of the nice helper scripts that's defined by T3 app so if we scroll down here you'll see DB push just calls drizzle kit push looking good and now we have a user table in the database to verify we can hop back over to the single store portal having a real UI to check things like this is very very nice we can hop into the SQL editor it's loading our database and now we see our user table it has ID name and age how nice is that this is all now connected at least here but we do need it connected in production as well well easiest way to do that hop here copy the environment variables and thankfully netlify is one of those nice platforms where when you're in the actual environment variable settings which is under site configuration environment variables when you click add you can import from an EnV file but you don't have to just use the EnV file itself you just copy a section like I did paste you can choose where it should be accessible and also which deployment context so if you want to have different environment variables for preview deployments like the ones that came up on GitHub separate from the deployments that are in production you can do that we don't need to bother with that here we are going to use the same variables for everything but in the future hopefully that makes it clear how simple you can do that even if you wanted them all in the same database a silly hack you could do that might actually work decently well is have tables filter not be a hard set value instead make this an environment variable too we won't be bothering but all paths to have a lot more stuff in one database hit import and now we have all of these things embedded inside of our project which means I could make this a branch but I'm lazy let's make sure all of these things look fine the get ad- p is going to be a bit tedious since we have a bunch of things in our package lock that are going to change we could just go through it's not too bad I'm just going to do it why not uh we're going through quite a cycle here okay we're out of it now here we're back in code all of these things look fine to me we're importing my SQL from my SQL 2/ promise that a wait call is weird but it's fine here we have the table changes everything here is good there's no unstage files so we'll commit DM database added what we haven't done yet is anything that indicates that this database is actually working what we'll do first is change this from users to be something that represents I don't know files and maybe we'll get to folders and just a bit we'll hardcode some in there so we can see them and then make sure that we can get those rendered in the UI in some way normally I'd cut this part out but I actually think it might be useful to you guys since you're not going to do this whole thing in one setting when I take a break from a project it can be really hard to context shift back to where you were so I'll often keep little notes usually in the read me or sometimes I'll get ignore a folder that has a bunch of like what I was working on files so in here I'll put a little note to myself so note from 126 2025 and here I'll say just finished up connecting database next steps and I'll put next steps in here which will be update schema to show files and folders manually insert examples render them in the UI push and make sure it all works so now when I come back early tomorrow I know exactly what I was doing what my next steps are and I can hit the ground running without having to do quite as much work to catch my brain up to where I was you might think oh I'll remember all of this you never will we're only human and doing little things like this will make you a lot more effective as a human working on a project like this I'm not going to commit that you get the idea I'll be back in a bit okay back at it let's get this file structure made so we need a way to actually store these files and folders in our data database usually it's a good idea to take the mock data that we've been provided in this case by our AI to see how they're structuring things so if we go to mock files we'll see the structure here the first thing I'm noticing that I'm not sure how I feel about is that folders and files are both the same type and a file has a parent it has these other properties and it can be a file or a folder but this is a weird structure because it means the URL and the size are both optional because in the folder case those aren't a thing but in the file case they are I don't know how much I love this structure I could hear the argument either way I have the hot take that folders kind of suck on a fundamental level the idea that we structure our code our applications or photos or files in general like this is just something I'm not that into I'll try to put my biases aside here it's just I have feelings okay that said one of these is real the other one is more like mental model files are real folders are a way we think about things so I'm going to choose to separate these out entirely this also gives us some nice additional benefits like a parent is always going to be a folder we don't have to worry about linking to something that should be a folder but it's actually a file and now you have a weird Link in your system we can skip all of those by just separating this out so we could separate it out immediately or we could just go start building the model in the schema I think it's a good idea to separate it first just so that we can get a feel for how this differs so we'll export I also don't love doing interfaces for this so we're going to name it type this time instead look at that we'll leave the type folder and file in for now just to make sure it's really clear on the other side what we're doing one other thing I just noticed I reverted this back to the or falter State because I couldn't help but have feelings that URL is an optional as well as size but parent is or null this is important because a folder has the possibility of not having a parent because it could just be the root folder but URL and size aren't going to exist on folder so these are optional this one is or null it's very weird having all these different cases in order to try and force one generic type so as I love generics and types no there's a couple things we get to change now that make life a lot more convenient first we get rid of that or case then I get rid of the optionals because this has to exist now the URL for the file has to exist where it's not a real file and it does need to have a size we can also make parent not nullable because a file has to be in a folder this helps clean things up a bunch let's grab the folders now move them out export const mock folders and look at that I will say that in the mock it's not really clear how you'd handle a file in the root folder personally I think we should have an actual root folder so I'm going to do that we're going to do this a little different we'll say ID since ID is already string I'll just give it the ID root cool and now we can give all of these the parent ID of root cool we'll leave the files as is not a big deal oh there was a subfolder presentations I'm going to grab that and move it up cool and everything else seems to be fine here they all have a parent right yes cool so now now let's go back here I'm going to change the Set current folder very slightly because we'll always be in a folder now we'll kill that I'll make this just hardcoded to root as the default we're going to get current files and get current folders forgot to import mock folders there we go now you have get current folders the easiest way to handle the rendering for this just render it above get breadcrumbs. map that's for the actual breadcrumbs on top we don't care about that here what we want is this guy so we have a different case for folder versus file we could break this out into a component uh we're going to have to do that I'm just going to do it now here's what we'll do I like keeping the page components minimal and we're going to have to make this one a server component in the near future anyway so I am going to break this out now I'll name it file row. TSX export sure thank you cursor not the actual content we want I'm just going to paste this here see what this needs so this need a handle folder click and the file needs a URL these cases are different enough that I'm going to not make this a default export we're going to separate this into file and folder and just deal with the potential style mismatch for the wrapper stuff we could also move the wrapper up to the parent component and just render the file or folder button directly but yeah not worth the effort so now we have file row we'll call this one folder row we'll change all these instances of file to folder also going to get rid of the other case here because it will always be a folder by the time we are here if we do this right kill that and that nice and simple props folder type folder we will import folder from the definition that we just exported from mock data props folder you know what I'm lazy going to change this or these two both to folder but instead of props St folder for all of them const folder equals props nice we do need the handle folder click function though does this need the ID so there's a react philosophy thing here do you pass the function in a state where the child component needs to pass some data to it or do you pass it ready for it to run and it's my personal preference that the logic something like this live above and instead of passing a generic handle folder click where this folder could trigger a click for a different one that makes no sense we should bind it when we pass to it rather than pass it the function without an identifier and then make this component handle the identification itself it's unlikely we'll need to change it in the future and if we do we should change it and be very explicit about why as such I'm going to make this in Anonymous super simple function void so here see it's trying to suggest we pass folder ID there because that's how it's set up right now we're going to ignore that and instead handle folder click kill what we're passing here and we'll fix the rest above I also need to reimport the folder icon honestly something I'll do quite a bit and I'll do here just to show you guys when I move a chunk out of a component like this I find it's often easier to just copy all of the Imports and then delete the ones you're not using the intuition is to go the other way around but I've actually found pretty often that this is the easiest way also annoying conflict here folder is the luced react icon but it's also mock data Pro tip here folder icon when you do as up here you can have names that conflict should I give that a better type sure but it's mock data we're going to ignore it for now going to hop down here make sure this is folder icon and looks like by default it was doing two dashes for this part for the folders We are going to want to put like a menu icon there in the future but for now I'm just going to delete that content folder type is folder folder or folder oh yes because it was file before and I just like select corrected that cool we don't really need that content either I'll leave it just so that we don't break the shape of the grid and here it's going to be I guess we'll just do the string file and then here we're going to change this so it's actually the file do size I just realized we forgot to pass the type here or pass the props entirely props file file const file equals props we need to make sure files actually being imported from here there is a generic file type in the browser and if you're not importing yours like if I uh delete that again you'll see it's going to use the mdn standard file from node buffer once we import ours it'll be good try to avoid these magic names if you can so you don't have to collide with the browsers generously speaking weird way of doing things anyways here we have the file component separate from the folder one I'm going to delete all the folder specific stuff we'll always be rendering file in the HFS file URL or hash the reason this or had to exist before is because this type was always optional since we didn't know if it was a file or a folder we didn't know if that existed now now we do it has to TDA one other preference thing it'll just make the experience better this needs to be Target blank if some of you're not familiar Target blank will make it so when you click a link it opens in a new tab instead of overriding the URL you're currently on which is really nice when you're opening links in something like a file viewer where you don't want to get out of your drive when you click a file you just want to open the file I will also say the link component might not be the best fit here if you're not familiar with the link component it's a cool feature in most react or other libraries that are handling your routing that allows for you to do a navigation without having to actually update the browser if I put an a tag here and we were linking to another page this would actually require the whole HTML gets ref fetched and reloaded the Json gets repared it checks the URL and updates the page content when you're doing a single page app or using tools like nextjs that kind of do that for you when you have a link tag it will let you automatically navigate without doing all the server s side stuff in just update using the JavaScript on the client it's a really important thing for making your apps feel really smooth it's also why you'll get a lint error by default if you use a traditional a tag all of that said the benefits only really matter if you're navigating to another page on your same application on your same host URL and the files here aren't other Pages the files are files so this I personally canonically think using an a tag here is good because it indicates that this isn't something that is on our domain or part of our sphere so to speak so I'm going to do it this way some people just want to standardize and only use Link tags I get it I understand I'm not following those rules it looks like we have this cleaned up quite a bit now we still have all these Imports we're not using so I'm going to start trimming those these are all type Imports so I will put import type there so the lter gets less mad and now we can use it over in the page the thing this won't do is intermingle between folders and files but I will be honest I don't care I think that is not a good pattern so we're going to do instead we have get current files file row it needs a key this is an important detail of react when you have something that there's a bunch of in a list react needs to know which one is which a key makes it so react can know which one is which without having to check all of the props effectively essential you'll get errors if you don't do that so you should do that and just copy pasting to do get all I guess we already have the get current files call done above right oh we just made the functions we didn't call them that's a kind of silly way of doing this we'll do this right in the future don't worry this is all mock change this to be folder this needs to be uppercase F folder row shall we see if we oneshot this is it time to see if we pulled this off first try there is a type error I want to make sure we address that oh handle folder click look at that I forgot I abstracted that I did it for a reason handle folder click equals my tooling is all covering the things I want to make sure you could see this part so handle folder click we are passing a function an anonymous inline defined function and this one is going to do the navigation we'll handle folder click to folder. ID we will likely have to change this in the near future remember that thing I said before about navigation hopefully getting some good foreshadowing here since technically this isn't links we're not going different pages we're just storing in State this is fine for now but no we're going to have to gut a lot of the navigation code momentarily one last things I Saw Set current folder to null we don't want that to be null anymore we want this to be root and if I did this all correctly we should be able to refresh and see that I forgot to spin up the dev environment mpm run Dev fingers crossed this time is it just working did we first try that no way let's go double check by making some change to our mock files we'll just go give one an empty ID oh wait no we don't have those it has to be root so now resume PDF's in root if we did this right it thinks we're in r.pdf okay oh no that's I I put gave it the ID of rout that's why we we need to give it the parent of root we all make stupid mistakes okay at least we know my code is running yeah look at that it does mean that the breadcrumbs are breaking let's see how those work so we can fix them get breadcrumbs mock files. find haha mock folders and they can still have null parent which is annoying but we'll handle that with root and now it says root there that's fine I'll deal with the consequences of my decisions later oh no did I put an infinite Loop in here somewhere there's no way right I just comment out the breadcrumb section will it stop walking up because it was doing fine just a second ago remember I was so pumped that I one shot this what is going on yeah when in question rmrf next pnpm Rev wait a little bit longer because we're rebuilding the dev environment and in just a moment we should be good to go and yeah we are nice still not quite sure what went wrong there I'm going to do this correctly now this really shouldn't be a function hell none of these really should be these should all be memorized data gets I'm going to be extraordinarily lazy and uh no we'll turn on react compiler later I'll do this the right way the first time we're going to do const bread Crum RS equals use memo wrap this whole guy but it needs an array for when it should or shouldn't rerender uh it looks like it's missing other things or did I forget to import use memo that as well cool I guess mock folder since an import doesn't really matter it stays stable now we have our breadcrumbs and I can kill this so we just map over what we actually care about uncomment and now okay I had to have introduced some stupid infinite Loop here oh well current ID is not equal to null I'm dumb okay you'd think that these AI tools would would catch these mistakes yep that's all it was and now we have the fully nested fully functioning going in and out Tada do think we need to add one additional filter because there is a folder that has a parent that is a different folder right yeah get current folders folder parents current folder then that should just be working I'll go over to the mock folders oh uh yeah I didn't put the other one in or I might have command Z it out come on there we go thank you cursor so I'm adding one more mock folder here that has a different parent this one is a parent of three just to make sure nesting works because those thing can get a little messy presentations cool we made it in we don't have any files that have this apparent but at least we can go that deeply nested and things appear to be working how they should how nice cool this is in a good state to commit I personally like to commit a tiny bit aggressively just to make sure we don't lose foreign context I am going to commit all of this because it is nice having my brain dump normally i' put that in a different folder but I don't care here's where we made those changes with the null case there's the mock data changes but you'll notice we didn't get file row because again get add- P doesn't include it get add- a instead get commit DM update mock data should have also included that we broke out the file row not that big a deal but now we have a rough idea of how to structure this let's hop back over to our schema something I personally like to do and to be honest normally I do this when I have more screen real estate is I'll pull up my mock data just right up next to my actual schema and go through it one piece at a time to make sure we do it right so we're going to export con files equals and as per usual cursor very smart and trying to do all the work for me we're going to do the work ourselves though so we are naming this filesor table that is an acceptable name for what it is we'll have an ID that's a primary key we want this to be something that auto increments I know in IDs seem like a really bad idea but if you're in a MySQL world where everything runs really fast they're actually a very good idea and I found I've regretted not having in IDs more times than I've regretted having them files have a name which is text which is a string size which is an integer size URL which is text named URL a parent which is an INT named parent this seems too good to be true looks like it's going well we do need to add one thing here which is an index we'll say I'm going to call this temp table when I do these inline definitions I don't like it um colliding with the name we have there you're going to return in the return here for your indexes the syntax is different as was mentioned before with that deprecation warning if we hop in here go to single store tables type definition maybe we'll just hover over this one so we get that error case cool here we are and it shows us in the deprecated section the old and the new API the new API wants us to have index custom name on t. I like the naming there so we'll follow that and index from drizzle orm single store parent index do we don't need the do using I don't think we do yeah on t. parent now we are explicitly saying we want to Index this on the parent which might not sound like a big deal but what this enables is now it is very easy for us to look up all the files based on their parent folder ID so when we go to a folder we want to grab all the files that are in that folder quickly if we have to look up through the whole database just to find that one folder or that one file not realistic but now we don't have to worry about it so I'm going to be extraordinarily lazy okay if I was really being lazy i' be pressing command K right now but I am holding back I just copy pasted and we're going to make the folders table very similarly it will still have a name it won't have a size or a URL I don't think it needs any of the other things now cool it's basically just the file one but simpler parent is in parent and we need this to be option I guess everything else should actually be not null cuz that one can be null I'll say name has to be not null I'm going to go back up here and say that files can't have a null parent cool yeah nice and simple this all seems like it should work I am going to get rid of the users table now because we don't really need it and the only reason we had it is as a default example and we're going to be using clerk for our o which is a much simpler place to have your o stuff it's where I need to join against users anyways I usually just need the user ID that is a Thing Worth including we could just do a migration later but at some point these are going to need a owner ID to indicate who owns the file and who owns the folder usually the person who uploaded let's just make sure this all works pmpm run DP push changes applied look at that and we can confirm that this worked by going back over to single store I'm going to hop over to my deployments my drive tutorial connect SQL editor and in just a sec we should see look at that files table folders table and it didn't drop the users table yeah probably fine I also notice it's not using the prefixes that we have defined I found our mistake I forgot a piece so we're not going to be using the sqlite table creator we're going to use the single star table creator haa and now we're going to use our helper create table function here instead of the single store table one change this to be create table and do the same down here and the reason we did this is to make sure that whenever a new table is created that we are using our prefix in order to make sure that drizzle knows which tables it can or cannot touch it might seem annoying like why are we putting prefixes on everything is so we can have multiple projects on the same database it's so nice to when you have a database as performant as what they offer at single store to just host a couple side projects in it just give them all different prefix and you're good to go now let's make sure quick by pnpm run DB push changes applied and my guess is it's not going to delete those other tables because as far as it's concerned those tables are not within its world view it only cares about the tables that it owns so to speak which are the ones that have that prefix and as I guess we have the drive tutorial files table and the drive tutorial folders table it won't delete these ones because they don't have the matching prefix so it doesn't know it can if I was to go rename one of the other Drive tutorial ones then it would be willing to delete it or if I removed files table from the codebase a push would get rid of it these ones aren't being gotten rid of because they might be part of another project so sorry I did that wrong you can go delete them by hand you could even comment out the tables filter here which I'll do quick to show you guys pnpm run DB push oh I remember this one this is because we can't have int it's funny because it's in the example they gave but their example is bad since single store is built for scale int is the wrong type for IDs it might work when you first push but the type that they actually use for your IDs by default is a big int so we're going to move over here change this to Big int make sure we're importing that from single store do the same thing down here cool that means the parents have to be big as well mode number assign true I don't know you even pass the name field here what's this m about name and then mode oh I got the order wrong that's kind of silly so this needs to have the name in front in this case parent then the options it's silly the type error there was unintuitive because the two arguments is what changed whether or not it needs that I should do the same for these two we'll give them both the name ID cool should all be fixed now I'm happy we did this test because that would have been really confusing to run into later still has the modifying type which is not supported I did run into this before thankfully we ran into this now because it's a lot less scary to just drop all the things oh it did drop the other ones when we got rid of the prefix thing like I predicted that's cool at least drop table Drive tutorial it's been a bit since I did raw MySQL looks like back ticks are the mistake I was making nice now that's gone and we'll also drop folders table cool those are both dropped I'm going to refresh here to make sure they're both gone yeah we have no tables now hop back over here pmpm run DB push bada bing bada boom now we have a properly set up schema for most of the stuff that we need to do have the files table and the folders table has IDs that are bance everything expects the right types everywhere we're in a good spot to get moving so let's get moving we need this data we need to have it in the database in order to test and make sure things are working there's a lot of ways we could do that we could write a manual backfill or seed and SQL we could we could write it in typescript we could go and hang out in the data View and write the SQL in there ourselves we could even use a tool like outer base or drizzle to take advantage of studio and play with it there but we also have the data here why don't we just use it so I'm going to make us a new route this is a thing I do a lot because it just makes life easy we're going to make a Sandbox route I'm going to use this as an opportunity to teach you guys a little bit of the fun things we can do with server components export default function sandbox page we're going to make a div in here that is our uh seed function and here we're going to have a form form will have a submit button cool I'm going to make this look a little nicer not much nicer to be clear class name is flex Flex call Gap four cool good enough for me we are going to need the DB so I guess we can import that now we also want the mock data why is cursor so many steps ahead of me I swear I haven't written this code before it's just pretty smart action equals async function and this we have to write use server this is going to be the first time a lot of y'all have seen use server hopefully you've seen some of my videos about it but I'll assume you haven't because it's a big assumption Ed server is not like Ed client use client tells the react compiler bundler and all the things in nextjs that the JavaScript in this file needs to go to the client use server does not say that this JavaScript needs to go on the server use server says we need the client to be able to call this function what it means here is on submit of this form whatever we do in here will be called so if I put a console.log here it says sub nerds and we go to this page that I made Local Host 3000 sandbox we click the seed function I'll do it with my console open nothing what's going on well that function is being called in the server so see all these sub nerds posts on Sandbox if you know the inner workings of the browser and the post and all these fun HTTP functions whenever you create an action like this it creates a path for a post to the route that the component's mounted on to call this function so when you post to/ sandbox since this function exists in the sandbox component tree it's accessible to components mounted in that route if you had three of them it would know which one is which by hiding little identifiers inside of the form itself so that it knows which form to call and which action to call depending on which form you submitted because you're not hitting a different route when you have three forms on the same page the action binding just make sure it goes the right place it's such a cool pattern and once the benefits of it click it's hard to go back I miss it all the time on the code bases I have that don't get to use these things we need to insert these things we'll see how cursor does with this autocomplete here db. insert if you're not familiar with Drizzle syntax it's not like a traditional omm where you would db. query. folders and have autocomplete for all the different types it's a little more like SQL where our actual the way we write things is going to feel a lot more like SQL here we have folders which is imported from our schema and we are saying that we are inserting these values and we're going to do the same for files but there's going to be a problem here the problem I'm assuming is that this doesn't map right and I am correct what we're going to do here mock folders. map folder we're going to STP out all the things we don't care about also Pro tip little JavaScript thing since the syntax to Define an inline function uses brackets but so do objects great designed decision we can do this in line still by wrapping object in parns in this immediately return what we want to return which in here is going to be name folder dotname parent is folder. parent the problem here is that our IDs here are all strings and the IDS for what we're about to do are not yeah see the problem here we're going to do this nice and lazy because it is mock data we're going to give them all index index not equal to zero and if so we'll say the parent is one otherwise the parent is null now we have a decent starting space here these are terrible things to do if this is the actual thing that you're shipping to users but we're still in the mock data world right now so we're going to do map the files same deal with the pen then the open close brackets and here we're going to do the same index plus one we're going to ignore the parents because those are all going to be wrong I'm just going to do index mod 3 so that they all end up in random folders that make sense uh that has to be plus one because one is the lowest index we have that is fine what is this Mt about oh is it because size is a string we'll just give size a number of 5,000 doesn't mean anything but what we've done here which is really cool is I created a function on the server that could be run like a seed or something but instead of doing that I now have a UI that I can use to see things so if we store the results here const folder insert cool and it'll do const file insert and log the results of both of those I recall the type's not super interesting when you do an insert like this yeah it's just the raw query result which has nothing in it but the very least we when we go back and check we should see that it finished we affected six rows with the file one and we affected five rows with the folder one which means now if we go back over to the customer portal we'll s select star from got the whole name just right Drive tutorial files table run it and here we are look at that we got actual files coming from the database this is a very good time to commit we now have this all there I'm not going to commit the sandbox because we only needed that there there's a lot of different ways to handle a Sandbox you could have it be a route that's only in Dev otherwise it throws you could have it be a thing that's not in the code base at all you just pull it from stash we're just going to pull it from stash so I'm going to commit this first uh DB model working escape the exclamation point stash the rest oh we can't stash the new file one more Pro tip if you add it then you stash it you can absolutely stash a new file cool so we saw the data here we have it all in our code base but we're not actually showing it in the UI yet we're still using the mock data here so we should first and foremost fix that delete delete we are going to need more types and a much better method for querying things which is all stuff we'll do in the near future the one concern I have here is that since this is a used client component setting things a state we can't just call things the way I want to I want to be able to just do acing functions in here and get the data that I need so I'm going to do this the extraordinarily lazy way I'm going to copy paste page TSX to be Drive contents. TSX we're going to pass this files and folders props files type of files ah the typing here is going to be annoying I really want to do this right we'll just infer select on it and same with folders import that we'll rename those later what the infer select here does is it lets you infer from the actual definition from table what this is which is really nice because these should be arrays cool figure that out now I can just query for these in the parent and have them down here I'm not even going to do we don't have it in the URL so I should do the filtering here do I do this all right the first time no I'm not I'm going to be lazy this first time we'll come fix it in a bit we're going to change this so it's not get current files and get current folders it'll instead be props do files and props do folders props do folders. map props do files. map okay so you're seeing some type errors here that's because the mock data and the actual data aren't perfectly aligned in this old folder type is not what we want here I don't want to keep doing this type of in first select I'll do the type of for both of them for now but in a little bit we will fix it so now we have type of folders and files we don't need that anymore we're just using these types which is important because we don't want to import backend stuff on the front end because this file row is almost certainly going to be a client component we could even indicate it on top I'll deal with that later the important detail in order to make sure this never goes wrong habit we should get into as soon as possible import server only this doesn't actually do anything in the traditional sense like this doesn't change how next gets compiled what it does is if we import this on the client and we shouldn't putting the import server only guarantees that we'll get at the very least a runtime error in our attempts ideally a build error so that it's much less likely we accidentally import something that should be on the server on the client and when your codebase makes it this easy to hop between the two a little bit of concern is warranted but now that we've made these changes where it has type of file insert select and folder nothing else needed to change cuz all the types were for the most part interchangeable hindle folder click is still expecting a string even though now it is a number and the root is no longer string root it is now the number one obviously all of this code needs to change but for now this is fine mock folders defined this should have been folder and a folder ID current ID current ID should be a number though what is folder. ID then oh it's still mock folders there's the problem I'm a dumbass Tada and current folder still matters but props do folders matters even more Set current to one because we are nasty hardcoding individuals import type here kill the mocks and now we get to hop back to page TSX which looks familiar we're going to make it look very unfamiliar in just a moment delete everything here I didn't say when I did it but I deleted the use client on top which makes this a server component as I was saying before use server does not make something a server component use server makes it so a function defined on the server could be called on the client what makes something a server component is that nowhere above its Mount does a used client boundary occur since this is the page which is mounted in the layout this is a server component and any children this has that aren't marked as used client will also be server components what this means is we can do things in here and these things will only happen on the server like selecting from files and folders these are going to be bad again these names suck we'll deal with them in a bit files says files schema folders folder schema files schema and folders schema and now we're going to ch change what we are returning here to be Drive contents which I should rename this to drive contents just make the naming clear and consistent throughout manually Auto Import Google Drive clone and if we did this all right Local Host cannot add new command when Connections in a closed State might just be the database connection died looks like that's all it was and now we have all of the folders all of the contents and none of this works because none of the filtering is set up yet but we are getting actual files and folders from our actual database in the UI now that's a huge step we're going to celebrate we're going to celebrate by putting it up because again it's important to be sure that everything is still working in our production environment so we know didn't break anything stupid so we're going to commit this as Drive contents being rendered get push no I remembered to escape the exclamation point last time I love I forgot it this time and now that we're back in GitHub we see the little pending it shows the CI but the CI is not the only thing we care about in just a moment we'll also have a build going on oh is the CI upset look at that remember the thing I said about setting this up early is important what's cool here is we can see when our C failed us and here it's a lint fail I was about to say this might be breaking the build on netlify but we did add those environment variables relatively early yeah they are all here so theoretically our build up here should be fine looks like this one's going well it is deploying and the updated site is live which means if we go to it tada everything's rendering here no weird issues or obscure that we have to deal with it's really good having a production environment that is working so that you can quickly check when things go right or wrong to make sure we're going to be adding a couple other things in the near future including post hog off with Clerk and file upload with upload thing and it'd be really annoying if it works on a machine it doesn't work there as long as we go piece by piece it won't be that bad at all I want to fix the CI builds though so we're going to hop into the EnV example I'm going to grab all of these we're not going to actually use these values it's just easier to have the value on the left side I'll leave that one I'll put not a password here I'll put something do single store and now it's close enough that you'll know if your like values are right or wrong if you see this as the actual example and it will force this all to pass because the environment variables will exist and Zod won't be mad so we'll add that get commit update EnV example get push and now if we hop back over to GitHub this shouldn't fail immediately like it did before and it looks like the build passed how nice is that we are back to having clean CI and we can see when things were and weren't working is good to have CI don't don't sell yourself short it's almost always worth it and it's not a whole lot of work to have a quick type check not saying at a ton of unit tests or anything I'm just saying be realistic so let's go back over to our to-do list see how we're doing we updated the schema we manually inserted the examples we rendered them in the UI and we pushed made sure it all works this note's no longer valuable I'm just going to kill it but we did set up the database in the data model so I'm going to check that and it looks like our next step's pretty clear move folder open state to the URL that's actually what I was running into just before with the weird folder States sounds like a really good Next Step so we're going to commit the readme changes read me too updated we can push this it will trigger a build even though nothing actually changed so I'm just going to wait on that we don't need to run our CI and our deployments on every change you could block it with some manual thing or put in a branch or something whatever we'll just push it when we get there this is a oneperson project still so now that this is all done let's get moving our state around the first thing we need is a URL pattern that lets us do this having one page is not going to give us URL pattern we need to start doing things the next way so we need a route parameter something that's in the URL that indicates which folder we're in and obviously enough it's not realistic for us to write every single folder ID ever into our app directory so instead we're going to give it a route pram I'm going to name it simply so that we have a sub route F slash this is just my chosen name this will mean that we're on loc 3000 slf slash and then we'll do the pram which is folder id/ page. TSX if you didn't know this in VSS code cursor or in all the VSS code Forks you can rightclick new file and if you put slashes it'll make all the folders super handy so we have this in here I'm going to just yoink this guy and paste it but now we have page parameters go up to folders up to drive contents don't know what happened there what we need to change now is the prams so this thingss we have props folder ID number no we don't we have props pams and pams will have a folder ID that should be a number we'll confirm this console.log props prams folder ID and we will go to the page local 3000 slf SL we don't want that long number we just want one getting that connection close State error notice this happens if you don't hit the database for too long connections time out it's annoying but it's life won't happen in a production environment thankfully okay that seems to have worked what's going on here oh nextjs changes this is actually a fun one and gives me an opportunity to explain one of my favorite things going on in the nextjs and react World technically speaking since this Pam could be anything we can't generate this page this page can't be static because if this page was static it would only have the right content for one person or one route and we can't generate a static page for every single thing in our folders that would just be Insanity we're going to do instead which is a very nice clever trick is we're going to indicate that this is a dynamic route but how do we indicate that it's Dynamic do I have to put some used dynamic or something there's an interesting way to do this now const prams equals wait props prams this going to give us a type error because we Define props which is kind of the most annoying part here I think we can actually just do it like that nope it's going to be mad that that's not a promise so we're going to make it one the interesting thing nextjs recently did is they made it so all indicators that a route is dynamic or user specific are now async and by a waiting like we did here we are now indicating to the reconciler compiler runtime all of these layers that this route should be treated as Dynamic from here down we're not using the fancy feature that this is for which is dynamic iio check out my video the Magic powering nextjs if you want to hear a lot more interesting detail about what this all is and how it works the Practical thing you need to know is if we're doing something that is unique to this specific user or page experience that in a weight indicates to the browser and indicates to nextjs hey this is dynamic we can't just serve a static cached asset so now we have that everything else should work how we expect I'm going to refresh the page go back to the terminal and we see one which is exactly what we want because that is the thing we have here folder ID number we could also do a quick throw check just to make sure because I can put something that is in a number here like hello and it's going to log hello we don't want it to log hello we want it to log a number the best thing here to do would be validate it with OD I don't think it actually comes through as a number I think it comes through as a string we'll log the type of I'm effectively positive this is how it works but yes it is a string cool since this is a string we want to make sure it's actually a number so let's get a number safe params equals z Doob look at that we're going to use Zod which we already have for the environment stuff which allows us to validate something really simply here we're going to parse this object and make sure folder ID is a valid number this will parse it as a string and put a number out on the other side now if we console log safe pams expect the number receive string I lied I hate to say it I'm a little disappointed in Zod I don't know why I didn't know this was a thing but they don't really have a way to validate that a string is a valid number which explains a lot of weird stuff I've run into in the past but because of that I'm just going to grab this part here and we're going to use that separately here we'll do pars folder ID is Pars in ps. folder ID and if this is invalid I'll handle that case we'll delete everything else here cool this still thinks it's a number when it's really a string so I will fix that and if the result is invalid we could throw we could error we could redirect them to a different route but the easiest thing just return invalid folder ID and now if we refresh this that appears to all work and if I change this to an invalid folder ID like hello invalid folder ID look at that we do need to actually use the folder ID though now we're just selecting all things from folder schema we'll do a DOT where remember it is effectively just going to be the experience you'd have writing SQL so we need to say where equal using the drizzle equal folder schema. parent par folder ID so what this is saying is basically in SQL terms we are selecting from folder schema where the folder schema. parent is equal to par folder ID and remember if we go back here parent is indexed so we are checking against the index it will be a hell of a lot faster and we should do the same for files where basically the exact same code the one thing we won't have here is the actual folder that we are in so if we wanted to display that in the UI somewhere we're not really getting that part we're also not getting the breadcrumbs which I'll SQL in relation DBS are fun I'll show you how to do that in just a little bit but now if we go back to here you'll see we have a different set of things than we did before clicking is still not going to do anything that's all just going into State Management but we are now seeing different content on different things if I change this to f-2 we are now in a different folder that has different contents and if I go back we go back to the other one we now have URLs that match the different content on the page which is awesome I am going to quickly change the homepage just so that we know that it is homepage I'm going to make this not a sync I'm going to delete pretty much everything in here going to say homepage now delete all the content here div Please Subscribe your two hours in you nerd and as always when you have apostrophes my preference is to string wrap kill all the Imports we don't need them anymore Local Host 3000 please subscribe 2 hours in new nerd get status get add- P we have our trimmed up homepage again we Sly have to das a for the new pages commit nested routing it's not really nested routing wrong term folder IDs are now handled via the routes you can go check in netlify or on GitHub I prefer GitHub just so we can also see when our CI is done let's see if our deploy started over here it is indeed building and the site is live so if we go back and we refresh we'll see our boring new homepage hopefully you're already subscribed by now slf1 and now we have actual content none of these actually do anything yet we'll fix that next but at the very least we now have most of the core Parts working we've made a lot of progress that much is for sure what do you do when you make a lot of progress you write down what you did and what you are realizing you need to do next you move the folder open state to the URL but there is more we have to do so uh it's the 27th going to write down the random notes of the things I'm realizing we still need to do change folders to link components right now the folders have an onclick which is never the way you want to do navigation but now that we have actual navigation it's absolutely not how we want to do it I guess I should comma remove all client State CU none of that state needs to be on the client anymore and honestly it doesn't belong there I also I want to clean up the database and data fetching patterns there are some things I've been doing more and more as I build big code bases with tools like drizzle just to make it easier to keep track of what's what these will just you'll get it when you see it real homepage I think that's it for like the immediate like based on the stuff that we just did what I want to change and I'm sure off and file uploading are going to be their own rabbit holes I will also add analytics before I forget that a real product if it doesn't have analytics like straight up if I didn't put post hog on a product I shipped it's cuz I don't actually care about that product it is essential and if it was hard to do might be a different conversation but thankfully it's quite easy this all looks good commit read me update get push cool we're back I'm tempted to add off but I should fix the routing at least a little bit first so let's do that right now the Links are the problem cuz they're not really links they're just on clicks on these buttons with the handle folder click ideally these will link to the right place which is slf SL the file ID it's actually hopefully pretty easy fix and change this to be a link we don't want the on click anymore oh look at that cursor is smarter than me see that href equals slf folder. ID the one thing it is not smart about is is trying to import from Lucid react it's probably my biggest annoyance with the Lucid icon package it always will Auto Import even when you don't want it to I want the link component not the link icon I wish they all just had an icon at the end of the name but uh nothing can be perfect you know cool now that that's handled we can remove the handle folder click prop and if this was all done correct we should be able to just go back here click one of these oh that's the actual uh deployment version I should have checked the URL well call 3000 fot slf1 we make the homepage useful in a little bit now when I click one look at that there's nothing in that folder but we can go back see all the different folders so those a pretty easy fix but it did kind of break the breadcrumb so we need to fix that too going to quickly check this here make sure all that client state is gone hop back to file row Drive contents is where this all comes from get rid of the state get rid of this we do have to handle the bread crumbs which won't be super fun I'm just going to comment this out or we'll just make it an empty array for now so it has something it's mad that we didn't give it a type that's fine we'll say unknown array for now just so it shuts up we still have to deal with it it has the folder ID's folder name we'll handle all that in just a minute and we can get rid of this handle folder click nice this makes this component way simpler this doesn't really do anything we'll make this also a link from next link we'll change the href I don't like slash we're just going to do SL one for now because again the route does have a folder ID I'm second guessing that decision as I go further honestly it does make some things a lot easier but it makes others a lot more annoying breadcrumbs doesn't know what they are so this is all just wrong I will change this to be link even though the ID doesn't exist yet I dislike the varant ghost because we're using a link here I think we could use button type as link with Shaden but for now going to be lazy just have this be folder. ID even though we don't have the ID here yet it'll error but at least it will work since this is an empty array it's not going to hit any of this code anyways at the very least gets rid of the type errors this is working as expected I can go to a folder I can click here and it goes back if I remembered slf slash here and now we click my drive it brings us back how cool is that this is a big enough fix that I personally think it's worth committing so we will do that get status get add- P yes yes yes yes all looking good commit this as move off client State and use real links for navigation cool we'll push just to get that up on the server but we want to actually get our work done here the one last thing for this to work properly is to handle breadcrumbs right now we don't have them this component can't get them because this is a currently a client component it's on the client side and generally you should put all your data fetching in one place if you can especially for your server data or at the very least we should do it in parallel thankfully we can do that here if we hop over to not the home page TSX but the folder page TSX here we'll see we have this validator we're not using anymore but what we're here for is different I want to handle a couple things first off we're not doing these fetches at the same time there's no reason not to right now we're waiting for folders to be completed before we do it we're also waiting for files to be completed before we do it even though we're not using folders for this so let's fix that first and I think you'll see why in a sec we're going to change this from folders to folders promise we'll change this from files to files promise and then con folders comma files equals await promise.all what this does is lets us go to the next code without waiting if we had an await here it would block when we were fetching the folders we wouldn't be able to start fetching the files now these can happen at the same time in parallel doesn't seem like too big a deal but we're about to add a function that will make it a bit more of a thing so now we need function get all parents you start with a folder ID parents it's an empty array and while current ID isn't one actually we'll go a step further cuz one's not going to be the hardcoded route forever I'll say when current ID is not equal to null we'll push the current folder ID and then the new current ID is set to be whatever this is I don't love that being ID CU I don't want to push current ID here what I want to push is the actual folder content because I want to have that array of folder content so I'm going to put an async function here and instead of immediately pushing we're going to get const folder equals 8 DB do select from folder schema where equal folder schema. ID current ID awesome now we have folder we're pushing it and we're going to set current ID to be folder. parent since this can be null it is possible for it to be null this is erroring because current ID is always number so if we change this to be number or null do I need to make that no that's that was right nice try cursor but folder. parent oh no that is right is there a select select distinct that will give us back just one right nope a bit annoying but we can solve that by just doing what it showed there folder zero question mark. parent and also we would want this here and also we'll put a edge case Handler here if no folder then we want to throw that the parent folder was not found now we have parents. Push folder current ID is folder zero question mark. parent things like this are where relations are both good and bad since each folder can have a parent and its parent could have a parent we have to crawl all the way up so if we did this in a way where it was blocking other requests this would have taken way longer but since we made the change here where folders and files are broken out now I can do const parents promise equals get all parents this needs the parse folder ID and now we have this other promise which I can put there now we have parents and if we hover over we'll see the type which is ID number name String parent number or null array which is a match that is perfectly matched to what we would get out of the folders promise we hover over that we'll see ID number name String parent number or null now we have the same for both which means we have everything we need to put parents in here we don't have it on the other side though so let's quickly fix that so you have to say at the top your component what it expects parents and we'll have it be the exact same type as folders because we are getting them effectively the exact same way now instead of breadcrumbs it's named parents and down here I can do props do parents. map event handlers cannot be passed to client component props okay where is this handle upload coming from oh I removed the used client from Drive contents which is why this handle upload is broken I can just put the use client back on top for now we can fix that in the future because we don't have any client side behaviors in here and when I say client side Behavior what I mean is like something that happens after the page loads like an effect that changes the content of the page or an onclick that runs when the user clicks any functionality where we expect a code to run on the user's device not just show them some HTML that is when you would pull in use client but right now the only thing this does is the silly handle upload alert if we broke this out into its own component an upload button component which I'm sure we'll do in a bit we could have the handle upload functionality separate in there and then this drive contents would not have to send any JavaScript to the client at all but now we fix that if we go back over to the browser look at that it says root because we still have that root folder it's fine we'll solution to that later but now the bread crumbs all work I can oh it looks like they're backwards that's actually kind of funny we go here yeah the bread crubs are backwards I know how that happened but it's still funny it's cuz we're pushing to the array I'm just I'm going to drop a little more react wisdom Your Instinct might be here to just reverse it usually in react that's a really bad idea so I did parents. reverse and this was something we got from State it's actually reverse ing the original array reverse sucks for that reason instead of reverse we could use two reversed which is a new browser standard that I guess my typescript instance isn't aware of you can probably get the typescript config to stop complaining if you want to two reversed doesn't modify the original array it creates a new one all of that said generally speaking when you modify data this way especially like this if this component was running on client this would create a new array every single time this code is checked which is not what we want to do the right way to do this is to change how the data is being created so right now we are parents. pushing this we Chang it to parents. unshift unshift puts it on the front instead of the back so if we go back here now click presentations now it is appearing in the correct order I did notice one thing which is every time we load this page the order has a chance of being different which is fixable by using a consistent sort order that's something that we do here but I want to break this out first all of that said look at how clean and focus this code is we create the different promises for the different data that we need folders promise files promise parents promise then we wait for all of them to be done then once all of them are done this runs ideally I would try catch wrap this whole section because if parents promise fails because it hits a bad State like let's say you delete a folder in between the one you're in and where you came from from that would break and this would cause the whole page to error out unrealistic case good problem to deal with if you run into it ideally your deletion logic prevents those States from being hitable though but you do have to think about like where do we handle error States what error states can happen and how do we prevent them from happening and if they do happen how do we recover from that all problems you should deal with but this is just a tutorial on how to pull everything together that feels a tiny bit too far to go here that said this all works relative L well so we're going to commit it rid of the unused Parts kill breadcrumbs we now pass parents props of parents. map we defined that get all parents function and then in here we have the await promise.all call we'll commit this as breadcrumbs fixed I keep doing the non- escaped exclamation point cool now we have work in breadcrumbs something has been bothering me and I was I want to fix this because it is a good example for some patterns there's two things first I want to rename the things in the schema because files and folders are not great names for what this is which is the model in our database so the quickest fix for this is good all F2 if you're hovering over a variable and you press f2 on your keyboard it lets you rename it it's not just like oh I'm changing the name of this variable right here it changes the name anywhere it's being consumed so we can change this there's a lot of different patterns honestly I think files table with an UND score is relatively clear I might even change it from files table to file table I don't necessarily love the plural there's a lot of debate on whether or not your table should be named plural or singular I already did it so we'll stick with plural want to emphasize that I think the debate is Silly by not making a decision now it's been renamed you'll see it modified other files because again it does change everywhere it's being imported because vs code is smart enough due to typescript in the type system that it is using to monitor where everything is being used and imported it can change it in all the different places you're importing it and if I get status you'll see it went into all these different files all four of them and made the right change better names for schema not going to push just yet because I want to do another similar change so now we have a schema that has better names for things but we're just kind of querying data wherever we feel like if we look in this component for example I just kind of wrote a bunch of SQL stuff in here this one's it own broken out function the other ones are just in line while this is super cool for getting started and seeing how all the parts work ideally your data access layer is a separate thing from your components your data access layer could be its own separate backend API your data access layer could be another folder or a package in this codebase there's a lot of ways to create these layers I'm going to choose the simplest one which is to move it to a different file in the code base where all of our queries will live this makes everything simpler from making sure you're reusing things that exist to code review to keeping an eye on the surface area where risk might exist having one location where all of these calls exist is a generally very good thing I'm just going to name this queries. TS it's going to live in server sltb and once again I'm going to do my favorite lazy trick which is to go to the file that has the things I want in it just copy and paste the whole file over even though we don't want most of what's in here certainly not any of the jsx parts because this is not a jsx file so we're going to delete all of these parts we don't need any of them now we're going to make this oh look at that cursor being smart export asnc function get folders and instead of waiting here I'm just going to return even though we're just instant returning I'm not going to switch it over to an eror function simply because we're going to do more stuff in the future also a fun little thing you don't have to await if you're returning a promise this will still be smart enough to know that the return type here is a promise because the return type here is a thing being called that in the end boils down to a promise so we don't have to make this and Mark this async it's kind of inferred through the returning of a promise in the future if we do something else async before here it might be a good idea but for now this is fine we'll do a similar export function get files same exact deal there let's make sure we're exporting this guy too export asnc function get all parents which takes a folder ID cool I might rename this to get all parents for or folder to make it clearer what it's actually doing when you read the code obviously this is folder ID so when you're hovering over it it indicates it but it' be nice if we get that info in a more realistic way so now instead of having all of these DB calls and DB specific things I'm going to change that promise to get all parents for folder change this one to get files and then change this one to get folders these are all missing but um I think once again cursors being smart I can tap complete to handle all the Imports that's like one of my favorite things uh the auto importing was more broken in cursor now it's more functional than anything else I use we can delete this guy here because we don't need it anymore delete this delete all the DB specific stuff and it broke these into separate Imports that's silly we'll move them I was just complimenting the Auto Import and then it did something dumb there we go look at how much clearer this is another thing we could do instead of putting all of these here if we really wanted move that move that move this look at how clear this component is now you just broke it down from a ton of code over to 26 Lines by breaking out these reusable functions it's even clearer what this component does than it was before it's Google Drive clone prams is the prams from the URL we parse the ID making sure it's an integer and if it's not a number invalid folder ID then we await promise. all to get all the folders files and parents for where we currently are and return Drive content files folders parents this is awesome I genuinely really like this I am happy it has gotten this easy to do stuff like this one more small thing I want to do we're going to commit this first though say all this deletions then have to- a for the missing file commit d M cleanup data access pattern I know I just said I want to do one thing I actually want to do two so we're just going to command click one of these so we get back to the definition first and foremost we need to know this is only ever on the server so import server only dope that's part one part two and this is probably the single most opinionated thing I'm going to do maybe in this entire video I'm still not sure it's my favorite pattern I've went back and forth on it with my team but I've grown to quite like it we're we going to take all of these exports and delete them wait why would you do that how am I going to get these hear me out export const queries equals Actually I don't even think we need the prefix to be formatted like that I think I can just do async function oh no that only works with classes I've been writing too many classes lately we can go through here now and move the file name to the left colon we put commas for the different things the same here colon don't forget the comma close at the end and what we just did is move all of these to be defined under a single const queries personally I like to separate queries from mutations because a query is something you can keep rerunning and not worry about a mutation is something that you only want to run once because if it runs twice it might mutate things that's why it's called a mutation by labeling this as queries we now have a very clear indication when we're calling this code what it is without having to even see where it was imported from if somebody was to change code from here down for example in code review we might not see where these functions came from and we may not know what's going on at all I've run into this quite a bit when I'm working with these new models but if we change this to be queries and then for each of these I'm just pressing command D to select like that by the way if you're curious queries dot get folders queries dot get files queries dot get all parents for folder now it is very simple very clear I might rename that to query but again plurals everyone has their opinions I think this is really nice it clearly indicates that this is coming from our data layer you could do DB Capital db. queries or something like that but I think this is totally fine not saying this naming is perfect not even saying this pattern is perfect but you absolutely should be separating your data layer out from your react code and logic I don't think it should necessarily live in a different code base or on a different service hosted by a different team if you're doing that it's fine but you should not be writing SQL right inside of your components it shows the power of the functionality here but this is a way more maintainable and clear way to do this right and if I'm going to call these tutorials production ready I want to make sure I show you guys what actual production code looks like throughout once again we're going to commit this get commit DM clean up with minimal data access layer going to push it quick I'm going to call this your reward for making it so far in the tutorial but really it's just cuz I've been going for so long my cat's being needy there we go hi bud as you can tell I've been working a lot the last few days and as a result he's bangging more than ever productivity tip don't get a cat they will bug you for attention all the time but uh life tip do get a cat they will bug you for attention all the time and look at look at how cute he is tell me that's not the best thing ever he's so good here there you go look at that boy quality cat break think I can safely check this box off haven't done the homepage yet we'll probably not do that next I do want to add off next so we're going to do off when we do off we might do a quick pass on the homepage and then we'll start finishing up we're actually making a lot of progress guys thank you for holding throughout so homepage or off homepage or off uh I think it's off time gonna have to find a new place to put the upload button because that's where I like to put my little off button so let's do that as I mentioned before clerk is a longtime sponsor and they are also the off solution of choice for basically every product that I've built they just once you've used it you'll understand there are so many little edge cases with off that just aren't fun that they kind of just make go away you can sign in with whatever obviously they're an off service so they have a lot of options I use GitHub it is what it is going to hop in here and get this started you can pick whichever off options you want to support I don't care to support most of these it's cool they have so many and things that I haven't seen much of in other services like linear which is genuinely cool but I just I like my Google off it's everyone has it it's super standard and it keeps people from Forgetting which thing they signed in with and let's just use Google off and again to make things easier that shows in the UI so capitals so we all have the same name Drive tutorial nextjs already picked for us scroll down click the little pnpm if you're like me and used pnpm click the copy uh back over to our terminal paste enter And while that's installing I then to go set up the environment variables they say to put it in env. loal I think every option other than standard. EnV is cursed and bad and should be avoided so I will not be doing that it would also be a goodish idea to put the clerk secret key in the enjs so that you know it's there but since we're not importing it anywhere because that key is just used by their SDK we don't have to call it from the EnV variable that is defined by our package so it's not necessary I'm going to skip it to prove that okay looks like the package is installed and we have our environment variables let's add the middleware if you're not familiar with middleware in next it's a pretty cool pattern the way it works is before request actually gets to the nextjs server or the CDN that the static files might be hosted on a very small JavaScript function running on the edge which is a computer Compu that's probably pretty close to your user that's already running will quickly spin up your Javascript file the middleware TS it will be JS at that point and when that happens it's going to do whatever you do in there and then send the user to the right place think of it as a really really fast switch statement that is Coffey pasted all over the world so people can go to the right place when they're going to your site so if you want to keep someone from doing something like going to a certain route when they shouldn't cuz they're not off middleware is an okay place to do that the catch is that it runs on every single request and you only have one middleware TS there is a proposal to fix that but generally I would recommend because we don't know how that proposal is going to go or if it's going to end up happening that for now you just filter out the routes that it shouldn't run on so here we're filtering out a ton of stuff but we're making sure it always runs for API routes because we would want to have off information on those to be clear this isn't blocking any of the routes here it just means that when you go to the route it's going to verify your cookie so that we know that you are or aren't who your cookie says you are so that all of the other things that you do like API calls server components and anything in between can call their off function and know if you're off or not you can put custom code in the clerk middleware in order to choose which routes are and aren't accessible publicly I don't care though because we're just going to assume everything is public and do our checks on the server side when we have the off object so that we know if you should or shouldn't be there instead of doing it in the Middle where we'll do it in the actual components or in the data fetching logic instead next we need to add the clerk provider if you're not familiar with providers they're a react method to expose state to everything below it's relatively common to just dump a bunch of these at the top of your app file because it lets everything access things it's the only generic way to share data globally in react there's a lot of less generic ways and packages and things that handle it too but generally speaking providers are the way to do it and when you're working in a big code base and that was written in react I'd be very surprised if you didn't have a a giant pile of these at the top of the code base and now we're going to grab this section here for the clerk provider we don't want the signed in signed out buttons all in our layout but I can just copy paste this part ah I'm not going to bother because I can just control space doesn't know about it once again command shift p reload window and now it should be a little smarter no don't know why typescript taken it's time catching up there regardless I will copy and paste this and just delete the lines we don't want Co see it does know that that exists I don't know why it was isn't smart enough to autocomplete that now it is silly and if you don't know the hucky it's control on Mac control space to get the auto complete to pop up Hut Key I use far too often so we have all of this and now theoretically anywhere in the app we should be able to check our off State the easiest way to do it is to build a top nav we'll do the signed out signed in just going to copy their code directly one of the cool things Clark does is gives you a bunch of components so you don't have to build all that stuff yourself I also can help but notice the metadata something we need to touch we'll come back in a second for that I want that to be separate hop into here where we should be authenticated and in here we will see Drive contents and in Drive contents there should be our top nav so right now the upload button is right there we're going to replace this just going to make it a div so it all gets put in the same spot fix that close it's going to make us import all these things and of course it did my my favorite cursor ISM it imported them all separately instead of sharing the import but thankfully cursor smart enough to fix that once I start fixing one I'll leave the upload import because we're going to use that later but here we are we got div close div and we have the components provided the signed in and signed out components are wrappers that will only render the contents if you are or aren't signed in we could even wrap the whole page with the signed out and then not render it at all if you're not signed in we should probably do that on the server side though we'll get there in just a bit but I want make sure when we go here now that we have our off button I forgot to run the def server so as you see we still have access to this because we haven't done anything to change our access but we also have our new little signin button if I click that I can click continue with Google sweet dearest beloved editor you've worked hard working on this please blur my email for this next step that said let's sign in and click on the Gmail account I want to use continue we're in and we even have the fancy little menu here but the benefit here which is super handy is with almost no effort we get all the fancy manage Account button sign out this is only there if you're not paying there are ways to hide it but you should pay them if you want to hide their branding it's super simple though how easy was that what did that take I've been recording for eight minutes so less than 8 minutes and there's a lot of talking and stammering around but we have off fully working so you know what we do when we have something that works as we expect it to we commit this is all package locks I probably should have just Das a this but I like doing my little code reviews cool commit DM working off what do you mean you failed to sign the data yeah not going to lie get kind of sucks I'm going to reboot my laptop to see if that fixes this and I will uh pause the recording until then okay we are booted let's see if we have better luck commitm off working the okay uh well normally this probably wouldn't belong in a tutorial but we all know what we're here for we want practical real advice and I'm going to give you the realist I promise this is not staged this is actually what I would have done I will hop over to T3 chat which is the AI chat app that I built because the rest are too slow I am suddenly getting the following error when I tried to commit on my Mac what might be the cause okay I'm sure at least one of these options is going to fix it I'm going to pause again and fix my environment because uh I'm angry this probably happened because I did some brew install which triggered an update that it shouldn't have and uh this is why we all hate being software deaths I'm sorry I have to take a moment to mourn I've been using this key for I think yeah four years I I am sad so salute to a real one never kept a gpg key that long for having it get leaked or lost it or failed before kind of crazy it happened in the middle of me recording a tutorial because we're a little past midnight hopefully this makes for a fun gag because uh give me a bit okay I realized I should probably show you guys how I solve this problem okay my key has expired how do I generate a new one and update it on GitHub cool thank you T3 chat for making my life significantly easier yeah this makes that a lot easier I will let you guys see this but I don't want you to see the key that I generate so uh BRB so I had to save it in my keychain but now I have everything working again yay and I also learned a little bit too this is the benefit of a tool like T3 chat again not to just self-plug but I had some interesting questions it told me that the default was going to be our RSA and RSA I know a decent bit about encryption so I was surprised when the default wasn't RSA RSA it was actually ECC sign an encrypt so I asked what the difference was and got a really good breakdown it's the new elliptic curve cryptography apparently uses less CPU in memory faster to compute and they're way smaller pretty cool so I used that cuz it's the new default and it yeah just thought it was interesting and I checked because get has what I care about I made sure it still supports ECC and it does nice these are these are the benefits of using tools like T3 chat you can like have a better Deep dive if that makes sense I can ask a questions and get answers I did want to intentionally cause an error though so we're going to do that quick get push why would that cause an error see if you can guess before I spoil the answer we're going to hop over here I'll give you a hint if you haven't guessed yet it isn't going to break the build have you figured it out you haven't figured it out yet we'll wait till the build is done and we'll see it there oh it did fail to build let's see if we get some good info here as to why look at that it does give us a real error the thing I forgot and I'm actually thankful Clerk's smart enough to call it out is we forgot to include the key I knew that but I wanted to see if you guys would guess as I mentioned before ideally you put stuff like that in the enjs I intentionally didn't cuz I wanted to hit that error but it looks like clerk is smart enough to throw a build error instead of us getting to the run time and having more obscure errors so we're going to go fix that hop back here going to hide my sidebar to give us a little more room the dashboard won't be as bad on your screen it's just bad on Ming someone 720p don't ask questions hop over here click the little wrong button I'm covering the add a variable button here but we're going to do the import so I can paste like that again all Scopes is fine CU it's Dev keys in the future you're going to want different keys for Dev and prod because as you saw we had a little development bubble but once you're in production you're going to need to set up your own app in Google or whatever other off provider you're using because when you're in Dev mode clerk forwards everything to clerk servers and uses their own keys with those surfaces for the ooth and third parties you need to use your own for your production apps there's a lot of reasons why I don't feel like making this video about that but no when you're shipping an actual app to production and you have ooth in it the ooth keys that are used on Google's or Apple's or Facebook side to authenticate your users those need to come from your app that you own clerk makes it really easy and Dev but when you're ready for production you to go set that all up they have guides on how to do all of that we're not going to in this tutorial because we're not here to learn about off we're here to learn about how to build a full stack app and there's already great resources for all of that but now that that's been fixed we need to go redeploy you can just go to the failed build click retry latest and now it's going to try again this time with the updated environment variables cool the deploy is done since this is a production deployment I can just go straight to that link you'll have a different one probably have to subscribe we'll just go to slf1 for now sign in same deal Look Away don't don't don't try and steal my email address we'll be right back and look we're in on a real URL with real off I think that's pretty cool it took me longer to fix my gpg key than it took us to set up full stack off on a real web service complain all you want about off as a service I think this is awesome the shortest checkbox on the list has now been checked hop over to the read me check that box we could immediately add file upload honestly I'm on a bit of a getting everything working kick I say we do that I'm going to commit that change quick read me update off working cool won't push because we don't want to trigger a build for that but we do have it so now let's add file uploading if only there was a YouTuber that had built a service that makes it significantly easier to add file upload to your apps wouldn't that be cool I know crazy absurd thought Ken name it drive tutorial now we have drive tutorial here we hop over to API Keys click once on the copy button go back over go up to the EnV paste and so we don't forget like we forgot earlier I'm also going to go over to nfy and add it in here now there are services to make it slightly easier to sync all these things I don't trust any of them so I tend to do it all by hand site config environment variables again I'm covering the button import paste done as you can imagine doing file uploads safely is quite hard so once again I'm thankful we made it so much easier we're going to go to docs. upload thing.com we really should give you a bit more info on how to get there to be fixed also my team promised me to get rid of that they better do that by the time you're watching the tutorial click the copy after clicking pnpm go right back here paste we already grabbed our token we have to Now set up a file router I'll explain what this all is in a second but for now we're just going to click copy go to the file it says which is app API upload thinge Source app new file API upload thing SLC core.ts dots because there's no jsx in here I'm going to kill my fake off function because why would we want a fake o function going to start getting rid of eh I'll leave the comments for now just want to see this all working so we'll Import off doesn't need a request because the user is the one making this request so it's smart enough to know how to handle that so we have request here we don't really need it anymore I could just yeah that has been deleted no user we throw a new upload thing error unauthorized it is funny that we're only supposed to throw actual errors here this is esent only throw error maybe it's there we go it's not an add-on esent cool uh sorry you have to do that to be fixed soon one problem here is we don't actually care about it being user because user is an off object we need to know that user ID exists so if there's no user ID we're going to throw because you shouldn't be able to upload if you're not authorized and then user. user ID aeres this is the actual user in their ID so why are we returning that well we should probably go over this whole file so I can explain what it actually does this is the file router it's a pattern for keeping track of what endpoints exist in your app that a user can upload to so if you have multiple places in your app that users can upload multiple different things let's say you're building a Twitter clone you want users to be able to upload a profile picture which has a limit of one file you can't upload three propex you need to upload one maybe set a Max file size of 4 megab for that maybe you have another place in your app where a user can upload up to 10 things at once maybe they can be images maybe they can be videos maybe they can be both the reason we built upload thing this way is so that you have one config in this case your file router that describes all the different ways your users can upload to your service image uploader is the default uploader that we have here we'll use it for a quick test but we're going to come in and edit it a bunch the F helper here is to create a file route image uploader is the file route here that you can upload images to you know it takes images because it has the key image it has these additional properties if we wanted to make it so it did video instead I can change that to video or we can use any valid mime type and restrict it that way instead pretty cool so now we can upload any video but video of 4 megabytes isn't particularly good so we're going to change that back to image you even specify different types of image if you want to be stricter we'll just leave this as is for now now let's explain the other parts of a file route the important two that you need to know about are the middleware and on upload complete middleware is a function that runs before the user starts the upload when the user makes that request this is the code that runs and when this code runs it's the user making the request so when you access the request object like this this is the actual request from that user and the oth function here is from Clerk and Clerk's smart enough to look at who's making the request and do the right thing there is a catch you cannot call off and expect it to work on on upload complete the reason for that is on upload complete isn't called by the user it's called by us on the upload thing side when I say us I mean the company I run paying that made upload thing not us the people doing the tutorial the reason for that is if a user was to upload a file after getting the URL to do the upload via middleware they could just block your service and then you wouldn't know when they're done if you had the user notify you when the upload is done because the user doesn't upload the file to your service they upload it straight to upload thing so you don't have to eat all the bandwidth the Ingress the egress the weird costs and times to run things associated with a user uploading a file directly through your service it also means we can handle a lot of annoying edge cases things like you're trying to restore a file upload halfway through because your internet went out you can't just do that on your own server and you certainly can't do that with a pre-sign post URL on S3 believe me we tried so to get all these things working right we have our own servers that handle the file uploads so you don't have to deal with any of that crap you just copy paste this code and it all works safely correctly first try so if you have data you want in on upload complete which runs on your server when the upload is done you have to pass that data and you pass it by returning it in middleware so the order of events is user clicks button when they click the button a request is made to your server to make sure they're allowed to upload the way you keep them from uploading is by throwing if they shouldn't be able to so if you had a limit to how much storage they could use you could check if they've used it here and throw an error if they've used too much so then they can't upload more whatever you return is useful later on once this function is done it sends a URL to the user they don't see it or anything it just runs in the client site code that is where the file gets sent to the user then sends the file to that URL and then when it is done we notify you the upload was completed we'll call on upload complete when it is done and whatever you return here get sent back to the user on their end all through our own connections which makes it super super super simple so if you want to do something like persist this data in the database when the upload has been completed you would put that in on upload complete and now it will be handled H let's do this part back over to server queries and put a new thing in here export con mutations equals uh we're going to create file for now we'll handle creating folders later on so create files assuming we have off we're not going to have off because again O is a O's a vague concept that isn't necessarily one we get to operate with here I am also seeing that it's typing file incorrectly I want to fix this so I don't like this always using that so I'm going to fix that too notice going down yet another rabbit hole we'll hop in here and below here I'm just going to export the type because I'm tired of dealing with this type DB file type type of files table and first select and that will be just that cool and we'll do the same below here export type DB folder type same deal it's really nice that drizzle gives us these little infer select helpers but I don't want have to call that all the time so now we can just call dbor folder type and dbor file type DB file type the I catch here is that that's expecting an ID which we can fix oh it also doesn't have the user's ID we'll do that in a bit too going to do partial of DB file type eh we don't want a partial here we want an omit omit lets us pick specific keys that won't be included so now if we hover here we'll see it's an omit with ID omitted which means that we should just be able to call file down here and if this worked properly I dislike that omitting doesn't directly just omit that uh this type is different enough from the DB type that I don't want it here so we're going to not do this anymore instead I'm just going to make a custom type for this so I'm realizing things like created ad which we're going to add in the DV later we don't want those here I'm also a little mad at myself for forgetting to put created ad in here it's one my I think it's really important to have a created ad and an updated ad field on basically everything in your database and I didn't put one here cuz I'm dumb yeah problem for later I'm also going to pass the user ID here because we want it these arguments are getting weird so I'm going to wrap going to do input colon and now input has file on it but we also want this to have user ID which is a string we're not going to use it just yet but at least we have access to it and now since the file was already uploaded let's put in our database return await db. insert that was too easy I almost dislike when this works this easily but it does have matching types I did just copy paste them so return await db. insert file schema. vales input. files and now if we go back over here look at how smart cursor is we can now safely await mutations doc create file pass it all of these values it's erroring because it's missing one if we hover over we will see property user ID is missing in type I probably should have mentioned why my type errors look so nice you might be seeing this and Confused this is one of my favorite packages you have killed it with this I have a whole video about per DTS error it just takes those terribly formatted errors that you get in VSS code and makes them look way less awful it's a bunch of hacks to make it work but they work and the result is you get a better error I don't know how I would deal with these terrible errors if it wasn't for that plugin user ID is metadata. user ID which again we're getting from above here and it's all inferred types if I change this from user ID to user we'll immediately get a type error because it's expecting it to be in a different shape cool I wait mutations. create file looks like we're mostly done here uploaded by metadata. user ID cool this is just what gets returned to the client you don't need to do anything here but it is nice because by doing a return here now the client SES not going to run its completion function until everything we just did is completed which means we can refresh or revalidate the page content at that point and we're good but we haven't done any of that yet so I guess now is better time than ever go back to the tutorial scroll down a little bit we have to expose the route CU right now this just a random file named core doesn't really need to ex just makes it easier to import other places but we do need to actually expose this so we create route. TS once again paste these exact contents we don't need a config so I can delete that part scroll down and now we have our utils this is where we actually export things the client is going to use I'll use the defaults for now but we are going to change them since these are components I am going to put them in the components folder doesn't really matter also they don't have to be. TSX cuz we're not calling the jsx there's no jsx syntax here these are generics don't get it confused but we now have the upload button and drop zone we're not going to use the Drop Zone although it would be nice to drag and drop things on the page and have it work anywhere check out my last tutorial if you want some good examples on how to do that part we're skipping it for here though hop back over to drive contents and now we need to put this somewhere so we have this table well I guess it's a grid oh that's interesting the folder and file rows aren't necessarily following the Grid's shape because this grid wrapper is one layer higher H today I learned so we will go one layer lower here look at that it's picking the wrong component because I want the upload button endpoint image uploader you might have noticed there was another upload button coming from the package that we have why would we want this one and not that one why would we just export this those one of my favorite features of upload thing we're actually using the backends types for this button why do we care it's just a button well by doing this we make sure we only can call endpoints that exist if I Chang this from image uploader to images we get a type error because that's not an endpoint that exists it's not a route that exists and we can control space to autocomplete it we don't even need AI there's no AI involved in this all working it just works now if we go back to our app sometimes single store will disconnect it's a little Annoying just kill and restart your Dev server you'll be good to go here we are we have our choose file no file chosen looks like I forgot to include the Styles because we blasted through the tutorial so I'll do that really quick so yeah make sure you're using tail1 V3 going to grab the with UT wrapper here go over to our Tailwind config import this and then wrap it with UT I don't like that it's using require Syntax for this it really shouldn't be so I'm going to fix that quick too import animate and then swap that cool and if we go back over look at that an actual upload button click and you'll notice it's graying out a lot of things because right now it's only allowing images thankfully I have a bunch of images because I post a lot of images so I will pick the thumbnail for my last video and nothing happened yeah well if I refresh still nothing happened huh where could the file be well if I hop over here look at that bad antivirus it made it and when I click it it works so what went wrong well we forgot something we forgot to give it a parent I wouldn't be surprised if it actually failed to insert in the DB because we didn't give it a parent looks like it didn't but there's an easy fix here not for that file that file is effectively gone forever but for future files we can fix this relatively easily we're going to sneak back over to server go into queries and make sure when this happens that this has a parent because right here kind of lying because it won't have a parent at that point and now we're getting the type error that I would expect we'll give it parent one but this still isn't going to update on the client side because it has no reason to so we will fix that super quick as well I like to drive content and I think this is the first time where used client being here is actually going to benefit us going to kill this handle upload we're going to add a router call here const navigate equals use router this use router comes from next router actually I think we want it from next navigation it's very annoying that there are two used routers in next right now and next router is for pages and next navigation is for app router they they need to work on these things it is what it is but for now we have our new navigate function and it is very useful here because we want to add on upload complete on client upload complete specifically and in here we can now call navigate well navigate. refresh so what does this do well as you might have seen earlier all of this data comes from the page component for this route which means the client doesn't have a way to update this data because it's not calling an API to get it it just kind of exists when the page is rendered so how do I get new data well since all of this is serialized content that gets streamed down anyways when you call router. refresh or in this case navigate. refresh same deal you can call a variable whatever calling this tells next hey we need updated data from the server for this route and it will pull down the new route and just hot swap whatever is on the page super nice way to not have to deal with apis back and forth you just call this and it will revalidate page contents and give you the right State we can see that happening going to give this a refresh just in case now we'll go back here we'll upload bad antivirus again and look as soon as it was done it appeared no custom code to manually pull down the new data no weird weird API end points we have to hit that update the state no optimistic we just did it and it worked we even have the size being passed through here correctly and if all went well I should be able to click and it goes to the file we did it we're done all works okay we got a lot more small things to do but hopefully you're feeling that juice of oh it works because it does there's something special about all the parts coming together like this we got a bunch of little things to fix though so before we commit this let's make the list of what we have to fix back over to the readme still got to do the new homepage we're now on 129 this has been a while to film okay got a lot of T3 chat bugs I had to fix so we added file uploading now we need to upload files to the right folder delete files button allow files that aren't images to be uploaded cool I'm also catching there's going to be a lot of fun fun challenges for you guys to work on on your own after which is something I really like to provide you shouldn't just stop playing with these code bases as soon as the video is over you should take the opportunity to explore and experiment I would argue that you didn't really succeed with this tutorial if as soon as it's over you close the codebase and never open it again you should keep playing for at least an hour or two add one additional feature to make sure that the lessons that you learn here are really ingrained so you can apply them other places in the future so now we have a good solid list here of things we need to continue with I'm going to cross that one off the list because I'm proud that we got it done get status quite a few new files I'm going to get add package Json and the pnpm lock by hand so that we can still get add- p and get a nice little code riew we imported the used router we imported the upload button that all looks good upload button endpoint image uploader looks good to me TV file type mutations looks good we exported those we're not using them it's good to have them cool commit file upload works I need to stop forgetting to escape things I committed wrong you guys have to learn another trick get commit Das Dash amend put the into Vim so you can fix it you press I to insert Escape when you're done colon WQ and look I'm a real Vim user who would have known yes I pr arrow keys ignore me anyways wasn't really arrow keys I have bindings on my home row but now we have that pushed there's one other thing I was almost going to add it to the list here but I realized if I do that it would be silly oh wait no I forgot a file I forgot a few files so adding those we're going to amend once more if you amend when you have things on your git stage so if you do get status get status you see these green get commit D- amend We'll add those to your existing commit and we can push it well we can't because I already pushed and now there's a difference but you can force it so the thing I wanted to fix that's too small to put in the to-do list is the name of things still says create T3 app I'm just going to change this to drive tutorial we need a description I'll say it's like Google drive but worse I know about you guys but mine is not quite as good as Google Drive I'm also seeing we still have an error in the core file here what's it upset about oh that we're passing parent zero oh that's because it doesn't exist I suppose we should include that swap that save close now there's no type errors and we're actually passing the data right we do need to get the right data there on the client though so get status get add committing this um fix type errors let's make sure the user's uploading somewhere that they are allowed to upload oh there's like a lot of little pieces we have to fix for that actually now that I think about it we got a lot left on this okay we'll deal with the homepage in a bit first though uh you know I'm going to move this to the bottom we got too many other things to do um we have to add ownership to files and folders because right now you can see anything and that's cool for a demo app but ideally you'd only be able to see files and folders for yourself so we shall fix that the schema needs to be updated because right now it only has ID name size URL and parent I want to add the created at and updated app because it annoys me that they don't exist let's see if this gets this right do I need to put this in it might not be needed I'll leave the not null default now cool so now we have a created app that will default to now go and do the same thing for folders because even if you think you don't need a create at field you will eventually and you'll regret not having one now since this is core identifier info I'm going to put it up here user ID I'm going to change it to owner ID it's a little more explicit it's text that is not null and we'll do the same down here but one more thing remember we're going to want to be able to look things up by the owner ID so we'll add an index for it look at how smart that is index owner ID index on t. owner ID and we can do the same over here the reason we do this is because we're going to be looking up by owner ID because we want to get all the files or folders that you own so if we can't look up by owner ID kind of screwed now thankfully this is handled we are going to need to migrate and our migrate is going to break things because those fields don't have defaults I could be real lazy and go add a default in for those but honestly the best bet is probably just to kill the data in the database and we can update our seed function accordingly pnpm run DB push a reading from torial server DB schema. TS what is it importing from somewhere it shouldn't is it the import server only there's no way that's breaking right that's kind of silly I guess you can't put import server only in your schema that's dumb that's really dumb uh I'm going to yell at people about that later anyways here we see this is going to cause data loss because again we're going to make changes the big changes are we're adding a notnull field owner ID to both of these and since that has items in it they won't be able to exist anymore CU i' would put the DB in a bad state if the database think owner ID has to exist if the database thinks owner ID has to exist but it has Fields where it doesn't since this doesn't have a default value it's just going to kill those items that's fine we're going to reset the DB effectively when we do this it would be nice to change these to be big 20 so it matches I'm going to abort and do that quick let me go check the drizzle docks quick okay so here here it says that they emitted the ability to config m in big int which is what we wanted to do to set that to 20 so it's probably just going to give that error every time that's fine it's not really an error it's more a warning and it's not going to cause data loss for those parts cuz changing fields to be the same as they were but it is going to kill the stuff that doesn't have an owner ID which nothing does so we are doing this knowing it's going to kill things is Drive Dash tutorial a bad prefix oh man oh man oh man I'm running into so many stupid things going to switch that going to go change it in the drizzle config I am going to Comet this out because again we want it to Nuke everything pmpm run DB push I'm doing create CU I wanted to kill everything else in the other tables bada bing bada boom changes applied theoretically this should all be good remember that sandbox we made earlier now is a good time to head back over to it did I not commit it of course I didn't commit it why would I ever commit something that useful so we'll do sandbox page. TSX we're going to export default function sandbox look at that smart enough to know we're going to need DB we need our form button type of submit create file and now action async function use server I don't want to just insert a bunch of test data and I also want to make sure we have the right values here but since this is an actual thing that we'll be clicking is the user we can add const user equals await off and now that we have user awaited here we get the user ID we can throw an error if it doesn't exist and if it does we can pass it in as the owner ID give things URLs and whatever else we don't want to insert files table though we want folders table and we want different values for that for sure don't know why that got doubled up do we still have our mock data be really nice if we still had our mock data we do look at that well if we hop back over to our sandbox values can take an individual value or an array so we're going to make the array const insertable folders equals mock folders map and we'll just dump the folder contents uh we don't want the whole folder contents actually we don't want ID and a few other things so we're going to not do that we'll say name folder. name parent folder. parent sure um we won't actually know what the parent ID is because we don't have any of those until this has been inserted it's probably a good idea to insert that root folder first folder equals oh wait db. insert so what we get back from here with root folder isn't actually useful this is a single store raw query result but we can call this dollar sign returning ID method at the end which will make sure that we at least get the ID back when this is done this has a DOT ID that we can use for the rest so now here we can do root folder. ID as the parent ID number array oh yes if you're not familiar with the exclamation point it basically tells typescript uh screw you I know this exists stop pretending it doesn't because we don't technically know that index zero on this array exists it is possible it inserted nothing it is possible it ran an error so we don't know this exists but this is a seed function we know it exists it's fine this is like the one place where it actually makes a lot of sense to use something like that so now we can insert all these folders and after we'll make our insertable file using mock files we're going to again filter get the owner ID parent it's going to have file. par we don't actually want that you know what how about we don't insert mock files because we did add the ability to upload them so we'll just make the folders for now Local Host 3000 SL sandbox it says create file still whatever probably should have logged things so that we knew that worked at the very least it supposedly worked I want to know what folders We have there's a lot of ways we could do this honestly easiest thing it's probably just to make this async so default async function sandbox const folders equals A8 DB select from folders table where and here's where we get to take advantage of the stuff we just made where equal folders table. owner ID user. user ID we have to import equal we have to get the user now I'll throw if they don't exist but what we did here is we are selecting all the folders where the folder table owner ID is equal to the user ID so now we have the folders We Could render them I just want to know what they are though now that we've done that look at this we have all of our folders document root work and presentations and images we only care about root I'm going to copy that and you might have also noticed the IDS are a little different that's because we have single store managing it all for us with their bance to guarantee everyone's number is unique and look at that we now have this all working with navigation handled properly as we click things pretty dope we do need to handle the file upload though so it goes to the right place cuz right now it's hardcoded to one which is not ideal at all thankfully we added a feature for this somewhat recently in upload thing that'll make it quite a bit easier if we hop back over to API core it's time to add an input do input and this as you can probably guess because Julius is on our team and Julius is one of the lead maintainers of trpc lets us do a Zod input validator so now we have do input here and it's an object that takes a folder ID and in here we'll have input and since this validates we don't have to double check like we are good but we do need to make sure the user can do this so we're going to go back over to queer I'll deal with the insert in a minute okay and here we want our new get folder by ID well we don't really want to get the folder by ID we should get eh you know what this is fine we we're not going to I was going to pass the user object here we don't have to we don't need to do the user part here we can just get this and make sure it matches on the other side so we'll hop back over to core const folder equals await queries do get folder wait did I put that in the wrong place ah that needs to be a number how silly of me folder comes from this query get folder by ID we return zero if it doesn't exist we throw a new upload thing error which means we got to copy paste this again and we'll do one last off check directly below so you need to make sure the user does actually have permission to do this and once again cursor it's based if folder. owner ID is not the same as the current user's ID we throw unauthorized because they're not authorized to do this thing Tada and now you can only upload to a folder that you own but how do we actually pass that folder ID it doesn't just magically get it well now you'll see here we have a type error because this is missing input it needs input to know what to do we're not currently passing it the folder ID for where we are we could get it via the router but since we're getting all of this data from there we should probably do this the same way so current folder ID is a number and if we go back up here we're getting another type error always chase down the type error so you can figure out where things are missing it also is one of the big benefits of typescript is if we make a change when we're building in this way where the source of Truth lives in just one place when we make a change all the errors hydrate up and you can just follow the errors to make something that works so now we have current folder ID we just passed it there now input equals folder ID props theur and folder ID and if we did all this proper I click here upload that H what's going on oh we forgot to pass it when we actually do that last step because I'm dumb knew we'd forget something remember we have the hardcoded parent here well we should actually use the folder ID we'll pass it here folder ID or I'll name it parent ID is what it is at this point this is where it should go and now we have in metadata here metadata. parent ID I'm going to go back and refresh do this let's pick a different image hm it's getting here fine they are making it over to upload thing so what appears to be the hold up we're waiting mutations. create file we're passing this all the right stuff it does appear to be mad here what is this mad about is it oh we're not using the owner ID so it was actually erroring okay got to follow the type errors I didn't follow my own advice and I got screwed by it that's really cool that it all just works and if we go to a different thing like let's say we go to images where I actually should be putting images hop in here choose pick T3 chat tier list and look at that we have it in there and it persists we can navigate around and if we're not signed in or we're a different user that shouldn't be here we can't just maliciously upload so as S as all seems this is actually a really secure implementation minus the fact that you can see any folder that you have the ID for you can only upload to one that you're authenticated for that you're the owner of that's pretty cool so as you guys know by now this is a fantastic time to commit we're going to update the readme should probably actually go change the readme to reflect the changes that we made read me we added ownership we made upload work we've not done the other parts yet but this is real progress going to hit Q so we can restart that commit the right data there fix the drive tutorial uh prefix we added Zod as well as mutations and queries over to the upload than core file here we see the input validation as well as actually making sure the user has permission to upload to this folder we pass the parent ID so that it's uploaded in the right place we pass the current folder ID to drive content so that we know where the upload should go we pass that as an input in the upload component so that the server knows where to put it return Drive contents with the new current folder ID included so that the component has access to it we added the get folder by ID function we changed this to be owner ID we already get parent from input. file it was hardcoded before we're using timestamps we fix the names fix the owners and yeah I'm going to add the sandbox It's too convenient to have you shouldn't do this delete it when you go public it's very nice having a Sandbox to play around in at the very least like throw a disable in production mode thing on it it's annoying but for now we're good commit upload to the correct file and now that guy is pushed we should let you upload other things it's going to bother me that we can't and I want to show how easy it is to do right now type this image this better type blob blob says you can do whatever probably don't want to cap out at 4 Megs we'll cap out at 1 gab and we don't need to have a Max file count of one we'll actually upload a lot and with just those changes we can refresh and you'll see files up to 1 gab Max 999 all this data comes straight from the server how cool is that so here I can go pick a few things let's pick the Vivaldi Arc theme that I'm using we'll use that same image again we'll take this uh sandbox I generated bolt uploading and look at that they all appeared in the right place and you can click them and they'll download straight in your browser if I go to my downloads folder we'll see vivil Arc main got redownloaded it all works I think that's really cool it's also hilariously easy to change what something allows probably shouldn't be image uploader either I'll just name it drive uploader and now we're going to get our little error see that that turned red because it's pointing at the wrong place change that we're good to go and it's all type safe from front to back so if we change folder ID to folder we got a type error change it on the other side we get a type error guarantees we're not going to get an error because one side expected something and the other side sent something else let's make sure that we update the readme as well with the things we just did we allow all sorts of things now we'll commit this as allow all files let's clean this up and get a more clear what we have left so we have to add analytics after we add analytics I want to do the actual missing parts like add delete real homepage plus onboarding and note that when the user signs in the first time they don't have a root folder so we need to make sure we have some way of handling that during their onboarding for now let's add analytics because very similar to what we just experienced setting up file uploads the sponsor post hog makes it quite easy to do so we'll hop over here hit their goofy accept I'm already signed in so we'll go to my dashboard uh make sure this is extraordinarily censored face we're going to make our drive- tutorial and again if you can use the same name cool we have our new project Drive tutorial you'll see here I have projects for a lot of things because I use postt on everything I care about this is one of those products that if I didn't put in something things I don't give a crap about the thing you should have a way to keep track of what people are actually doing with your product when you set it up they actually have a little next button there and they show you all the things you need to set it up with next we'll copy the pnpm command I hate when they add a copy button but it copies more than what you actually want to pmpm add post hog scroll down copy you'll notice all the variables are public that's because your users need access to them because these variables are how those things get handled because the user is posting data we need to attach a key to the data that they're posting this is the key that gets attached then we need to initialize it they actually have a little example here on how to do it an app router post talk provider client type of all this junk we're going to go make our new providers remember the thing I said earlier about how you have to have providers for like everything this is what I meant we'll hop back over here we'll hop into the root I've still had to figure out how I like to structure things in projects like this I might come up with a better answer in the future for now I'm going to do my best we're going to make a folder I'm going to wrap it with pen name it home I guess that this doesn't necessarily fix we want this layout for everything but I will move page into that I'm going to move Drive contents into this because that's the only place it's being referenced and I'm going to do the same with file row makes this a little bit clearer I'll make one more folder parens are a route group it's a way of organizing things in app router they don't actually apply to routes so when you put something in parenthesis it's basically telling next hey don't include this in the route because if I did like Hello slor slash whatever SL page. TSX this will now resolve to/ hellworld Whatever Gets ignored and Page TSX is what gets spit out so uh the core patterns to know are brackets are how you indicate a variable parns are how you tell next to ignore it and underscores how you tell next to pretend it doesn't exist at all which is what we want to do here so I'm going to do providers which means that these are things that won't be included in the routes at all so I put a page TSX in here it's not going to do anything next is going to ignore this entirely so I'll put in here post hog provider. TSX paste these contents oh look at that we're getting an error because process. EnV is not how we're supposed to do this so we delete that we import but it doesn't have them hop back over here now we're doing our first client variables next public post hog key next public post hog host now that we have those we'll go back here make sure we have the post hog key and host we do hop back over to post hog provider now it knows these exist I do think we have to settle things in here because it has to know how to bind them so go down to the runtime EnV next public post hog key next public post hog post all handled for us cool children needs a type there come on post do give me a typed default well now we have this configured we have to identify the user I'll show you guys how to do that in a little bit but for now we should get this wrapping our layout I'm going to do something interesting I'm going to put it one layer lower than the clerk provider and I'll show you why in just a moment cool we now have that we're effectively done they have a really handy check installation button which I do want to use let's just make sure the environment Works how we expect it to slf1 does not exist locost 3000 oh it looks like some of those files that we moved should be type aring and aren't so we're going to move in here and see which ones are broken page knows that drive contents is there drive contents knows that file and folder table are right here here's my favorite way fix this close reopen refresh Please Subscribe if you're 2 hours in you're closer to like four now right you should hopefully have subbed by now oror editor anyways we have that and if we command control I will'll see that these resources are getting blocked why is this getting blocked well I have an ad blocker and ad blockers sadly are really aggressive about things that aren't ads they like to block anything that even vaguely resembles tracking which sucks because we're product Engineers we're not tracking to get a bunch of data about our users we're tracking so we know what is and isn't working in our apps if we go to the Post hog official docs I'll add nextjs in the search so that we can find a bit quicker nextjs there are some things in here that are going to help us configuring a reverse proxy this is one of those killer features that you need to set up if you're using basically any analytics provider otherwise you're just going to lose a ton of your data from everyone using an ad block or a browser that has something like an alock built in so to understand what this does we first need to understand rewrites if you're not familiar a rewrite is a way to take a URL in your app and point it somewhere else that isn't your app it doesn't redirect which means change the url and tell the user hey you're going the wrong place go here instead a rewrite silently does it the benefit is now the user doesn't know they're going somewhere else the negative is it has to go through your server for that to work CU I'm not bouncing back and saying hey go there instead I am going there for you getting the result and then giving it to you because that way you'll never know what happened this is great because it means that your routes aren't going to be blocked by default the way they would be with an ad blocker because they can't just block the domain they have to block specific paths on your domain which they're not going to do and if they do you can change them or Point them somewhere else they're not going to have many options so we're going to hop into here we're going to scroll down to the next config we will paste this verbatim make sure you don't forget the skip trailing flash redirect this is because they add slashes sometimes to the end of the URLs and if you do that it can break certain things they need that so it won't break their things not a big deal never had to break other stuff and now we need to update our init I actually like that they hardcoded the EnV there it's probably the way they should have done it it's kind of weird that the post hog setup in the like main analytics page is different from in the docs that's fine delete paste comma I did forget to put the environment variable in our netlify so I'm going to do that now before I forget toir variables it's funny that's actually where I already am here add variables import paste import cool person profiles identify only I'll do all the things I want to there in a bit I do like this a little more than our current provider they even have little TSX buttons which adds the types and all it changes is that children definition there and for some reason it tabs this over one doesn't need to docs are hard okay not everybody's docs can be as good as ours I do need to fix the API host and UI hosts so um let's see if our friends over at cursor are smart enough and they are make sure we import EnV nice they are capturing page views manually somewhere in here I might skip that we'll see how they do it and I'll make a decision post page View Auto capture relies on page load events ah the event doesn't trigger on navigation it's a single page app because we don't go to the server so we need our own method for tracking this which thankfully they provide for us so I'm going to throw in here page view tracker TSX export suspended post hog page view and the easiest place to put that is directly below as a child because remember you only have access to things in a provider if you are a child of the provider not a direct child but somewhere below it in the tree so we need to make sure this is mounted below it the best way to know it's mounted below is to mount it directly below so now we have our page view tracker and we have the post hog page view here I don't know why this is wrapped in a suspense oh so that the use search prams above doops the whole app into client side rendering okay that makes sense we get that there post lo. capture I'm going to add one more piece down here I guess up I wanted a little bit higher const user equals use off not use user use off this comes from clerk the reason I'm putting this here is I want a use effect that identifies the user so we know who they are if user post. identify again it's user. user ID change that all where's the post hog okay I guess post hog has to be higher up do that post hog user. user ID cool so now we have this use effect that identifies the user we can put additional properties in here too like email you we get that from user dot maybe we don't there's another hook to get that con user info equals use is it use user it is cool that's what we wanted then user info should have a user ID does it not what the does this return user. ID cool so if it exists user info user ID and user info user email addresses 0. email address now we're tracking them by their user ID and their email address and this identifies them so it's much easier for us to figure things out in the dashboard and kill the use off you just w't use user now this component is going to get the user's info it's going to have an effect where whenever it changes it's going to reidentifying have a user ID we reset post hog but if we do have a user ID we update the identity accordingly now we track page views here we take the path name and the search prams and we do a post hog capture page view with the constructed URL whenever the user navigates anywhere in the app super super nice I think that's everything as long as the app still works I'm just going to ship it got undefined did I forget to import it in layout or this get renamed oh yeah I got renamed when I made the uh change there makes sense cool and look at that it's working we're getting an error ah that suspense boundary actually kind of sucks because it's expecting HTML as the immediate child I knew I had feelings about this I'm going to show you my preferred fix which is different from how they did it we're going to import Dynamic from next dynamic Dynamic is actually a keyword that's used by a bunch of things so I'm going to change that from Dynamic to Dynamic loader and look at that once again cursor being a bro suspended post talk page view Dynamic loader import from page R tracker object configuring it with SSR false the reason that this matters is it will guarantee that this will only be rendered on the client not on the server which means we can get rid of that edge case they were worried about with opting the route out of Dynamic behaviors because this will always now be dynamic so if we go back to page you tracker I can get rid of this whole thing here export default function post hog page view kill the suspense keep that there and look at that oh why are we still getting error okay we're going to do a dumb fix that should do it going to move this lower it was just mad we're rendering something above the HTML which uh technically can't happen this fixes it probably should have been lower anyways but yeah now everything the app actually renders that actually needs access to stuff will be rendered slightly lower we're good well you know what we do now we get a dash a CU I touched too many things commit analytics added get push and we go back over to make sure this all was installed proper you need to actually have it deployed because the way it checks to make sure that we did this right is it scavenges the site and make sure the JS actually loads because if it doesn't it didn't work and if it does it did cool it's deployed let's make sure everything is working how we expect it to go to our production deployment T3 dri tutorial we'll know it's working if we hop over to the network tab refresh and make sure things are going to those end points oh no not sure what went wrong there little did Theo know the rabbit hole he was going down there Theo from the future again this one to correct the last set of errors that Theo was having you see it all is posting fine now but there was a catch before the catch was that the redirects weren't working as expected if we hop back into the code remember we did this uh next config thing where we had the rewrites in here you might notice I don't have those anymore I don't have those because when you deploy these on netlify it's not guaranteed they work exactly the same way it usually does for most things but that weird trailing slash thing did not play nice with netlify I want to give you a little insight on how I debugged this and then show you how to fix it the way I debugged this was not just playing around writing code none of the things I tried there worked I had to sit and think for a bit because when I tested locally the events were posting fine CU they were going through the nextjs rewrite but there's a difference between Dev and prod I noticed that immediately my Dev environment is doing what it should prod isn't so what are the differences between my Dev environment and my proud environment one of the differences is that my Dev environment isn't run with build my prod is so I tried my pnpm run build command and then served it locally and it still worked fine on my machine which meant there weren't many things left but one of those things left was that it was on netfi I'm not saying netfi is bad they're actually very good but they have their own environment things are being deployed to which means we have to be considerate of potential differences there I looked up post hog NFI I found a couple results none of which were particularly helpful specifically when I searched for the error I wasn't getting anything useful I did see one PR on GitHub because post Hog's fully open source so you could see changes to their website on GitHub and they talked about having issues with rewrites in NFI because they're deployed on NFI so when I looked into it I found nice handy little dock here and this doc shows that you can update the netlify toml file to handle these rewrites instead so what I did is I copied this it says JavaScript ignore that it's actually a toml file go back to the code base make a new file named NFI dotl and you're good to go everything else I did was correct this one change was enough to fix it and we can even look at the pr that did it post hog fix attempt it's not building for some silly reason I'll go fix that you'll see all I did is remove the rewrites from here over to here yay and now we're getting all those those events in the dashboard which means we can do a lot of fun things we can start tracking things per user I don't know how to properly Express how cool it is to have things like this on a platform like netlify I'm going to show you the actual T3 chat stats quick let's take this chart from my T3 chat project this is all of the messages per model and this was not hard to set up like having a set of data like this or a graph to visualize it is super easy all I have to do is go to product Analytics hit the new insight button and we'll just let's create a graph here for this we don't want page view we want one of my custom events so let's find one of those let's use chat created because that's the event I do whenever a user tries to start a new chat we do total account and see over time how many messages are being sent per day we can also do different things with it like we can start to Summit so this is just the total count per day you can see the numbers here but what if we wanted to see a bit more what if we wanted to see I don't know per model we can start breaking it down we'll add a breakdown by to start typing it's usually pretty smart look at that model requested model now when I click that we're getting a bar chart showing the difference for Which models are being picked in when I can change this over from a Time series to a more cumulative or total value chart so we can do a bar chart here and now we can see how much each model is being used it's so good once you start having things where you want to see data from your users the fact that you can just click around and do this with an open source product it's super cheap to host it's what I use for all my products and hopefully this helps you see the value you get using a tool like post hog so now that's all done let's get back to that to-do list I believe there's oh a few big things events are handled and persisted properly I'm going to ax that whole section because we're done with it let's fix the sword order that shouldn't be too too hard to do if we hop over to queries let's just make sure we have an order bu on all of these I'll make it nice and consistent by doing the ID we can just do files schema. ID should just work there nice look at that now it's ordered by file schema ID you can wrap it with ascending or descending if you want to be specific I don't care which it is I don't even know which it is by default but it doesn't really matter too much and if we go here we're only selecting one for get all parents we select one at a time get folders We definitely want to have behave the same way and if we did all of that correctly I should now be able to go Local Host here refresh it a few times and see everything stay in the same order yeah Roots at the top looks like all of that works somehow I think I got root selected in the root folder which is funny where it has that set as a parent might have just written some bad code that wait no I think I accidentally recreated the root folder now I think about how the code I wrote for that works yeah there's two root folders that's funny anyways those were all the changes needed to fix the sort order you can sort it by basically whatever you want if you want it to be sorted by name you could sort it by name instead you just put a different thing here in order for it to change but now the sord order is consistent so refreshing is not going to change how the page looks which was annoying the hell out of me get add- P clean up the read me fix the order fixed order I also didn't check what was breaking so let's do that quick oh I forgot to put the environment variables in the example we don't really need the next public post hog host anymore do we yeah it's only being used here so delete delete that's not needed there and the public post hog key is public so it's not too big a deal if that's in your example but I am still going to randomize it cool get status get add- P get commit fix lint get push I think that's actually a build fix not a l fix either or who cares take it's time to stop putting off file deletion let's do it so I believe right now the drive contents are a client component CU I have some client behaviors in here there's a couple ways we can handle that but the easiest one is to just put our actions somewhere else so we have our server file which has DB in it going to make a new file in here named actions TTS when you see use server at the top of a file what that means is use with caution when you import things from this file those Imports are being turned into rest endpoints that can be hit by your users on different pages we're going to be putting functions in here that do important things like allow a user to delete a file we when we do that whatever we export from here it needs to be an Asing function and it needs to be treated saf because every export in here becomes an endpoint so the problem comes into play is when we have this delete file if this gets imported in a route like let's just import this somewhere that gets mounted like in here just going to import delete file from server actions seems nice and innocent right well just importing this is enough that this is now accessible effectively as an endpoint on this route in any user signed in or not can hit this and by the looks of this they can delete any file so when you export things from a US server file you should be extraordinarily careful this is effectively the same thing as exposing like export async function post you got to treat it just as carefully you can't just delete something in a post without verifying and authenticating the user do the same here so when we do this we need the user's authentication status since the user is making this request we can actually get that data user data equals await off now we have the I guess user dat is not the right call for this it would be session and if no session. user ID we can return an error so now we have the session we know the user is authenticated we need to know that we're deleting their file we could fetch the file from DB check that it's their file then do the delete we can do this in one query instead of two relatively easily the key is we need an and here because we don't just want to make sure we're getting the right file we want to make sure we're getting the right person and the right permissions so if we do an and here do a comma equal look at that cursor being extra smart today it's owner ID but it was close so this and make sure that all of these conditions are true so that the file table ID and the file table owner ID match the things that we have here if the user ID and the owner ID aren't the same this will not work but I did just realize there's one important missing piece here we need to be able to delete the file too not just deleting it from the database but we need to delete it from upload thing so how are we going to handle that well I guess I have to do the thing I was just saying I didn't want to which is get the file select from file table where we it's the right file ID and the right owner ID so now we've selected it we have the file well could be multiple so there's an array here could be useful to make this multiple files in the future one of the fun things you can do afterwards I'm going to wrap this with an array like that and then if no file we can return error file not found okay we're doing pretty good here but there is something that we need we have the files ID which is the one that we set in our database but we really need is the file key so we can delete this file so in order to actually delete the file we need the UT API con UT API equals new UD API that's so that we can configure it and give it any options that we want to now we can do important things like deletes UT api. delete files needs file Keys sadly we don't have a file key we have a file URL so we can fix this by parsing the file URL if we go to our app and open one of these URLs we can see what its format is and rip everything in front probably the easiest path for this file url. replace youf with empty string this is not the right way to do this the right way to do this is to update in your DB and start including the file key in the file table the URL is where the file's actually fetched from we want more often than not is the file key because the file key is what indicates what specific file this is you won't have to look up by this very often but it's incredibly useful when you want to do something like this with the uploading apis I'm too lazy to add that in now and this is going to work if the URL has changed which it very well might have we're in the process of updating our CDN as we speak make sure whatever URL your files are being uploaded to is the thing that you are replacing here so we delete the files and I believe this will return a success and deleted count so const utpi result equals I'll console.log that const DB delete result good all typos Galore and then we'll return success true at the end there now we have this function and what's really cool about the new nextjs react and server action stuff is I can just import this on a client side thing and it's fine so if we hop back over here we go to file row we can add a delete icon so right now it has in the UI size we need one more column honestly all the files are type file so I think what I'm going to do is instead of fixing that which is yet another great fun exercise for you guys I'm going to move these things around a little bit we're going to move this to the end and we're going to make this our delete icon button type equals not button type button I want a button type icon is that not a valid type oh it's a variant there we go default destructive ghost I was so sure there was an icon one we'll go with ghost look at that smart auto complete trash 2 is the icon we're using shout out trash Dev this is where the composability of the new patterns is magical we didn't have to handle scoping or variable passing or really much of anything all I did here is I put in a button onclick delete file file. ID and trash to I class name R3 size 20 this is going to be a little trash icon we go back here these aren't right we can change that relatively quick oh no the headers are in the parent file Drive contents so we'll move back up here delete file isn't even used there so we can get rid of that scroll down a little further swap these honestly I think what I'm going to do is change this to column span one we can add back size but we're going to make a column span two this time or file type and this one will leave empty for that case we're going have to change file row and folder row so let's do that super fast um you can bring back the type div class name now this one is we just hardcoded it to file for now but um again you should hopefully now know how to change that change this to one cool now we have the little delete icon at the end here quite a quite a style on that oh is it this MR3 I think we can give this an area label delete file cool since it doesn't have text you want to give it an area label and look at that now when I click delete yeah nothing happened I refresh is gone so we need to update the content there's a couple ways to do that the ideal one is you revalidate on the right URL I don't want to figure what the right URL is so I'm going to show you guys one of my favorite next taxs const C equals await cookies we're getting cookies from the nextjs helper you have to await it now there's some reasons for that check out my video about the magic behind next if you're curious so this is the actual thing we use we're going to cookie. set Force refresh to I don't know if it has to be unique value or not but we're going to json.stringify not force refresh CH I'm going to give this a random math value math. random cool you might be curious what the hell am I doing here well when you update the cookies during a request like this nextjs will just revalidate the page you're on and send an updated content for that page so now if I refresh quick just make sure it all worked click delete the files gone you don't have to do any additional code you don't have to write an on change on the client side you don't have to write a force refetch or anything just the AC of deleting sends new content down to the page what's even cooler is if we check the network Tab out here when I do a delete only one request has to be made I had that open accidentally but I had it filtered now if I do the delete Watch just the one request and this request this post that tells the server to delete also sends the updated content that react needs to update the page all in a single flight it's magical it's so cool that it's gotten that easy to do page updates with so little code now we have working delete that only works if you have permission to do the deletions okay we kind of have working delete we have working delete on files we don't have it on folders but I'm going to make that one of those fun things for you guys to do fun followups folder deletions make sure you fetch all of the folders that have it as a parent and their children too because you can't just delete the folder you have to delete all the files in that folder all the folders in that folder and then recursively do that down what I'd recommend doing is collecting all the things you need to delete by going all the way down keeping track of all of them and then deleting them all in one pass so we have our our first fun followup but we haven't done the homepage yet let's do that quick after of course committing the changes we've made here we need to add the actions file okay so we need to make a homepage and an onboarding experience easiest way to get started is to sign out please subscribe your 2 hours in you nerd is probably not the best thing to have here especially with how long this tutorial has been going okay let's ask VZ to generate something for us a minimal homepage for a Google Drive clone named we'll call it T3 Drive why not I don't want the file grid I just want the homepage stop I'm going to edit and learning all the tricks for working these AI tools it should be just a marketing page with a get started button a gradient would be nice give it a second shot here see if it does a little better okay that's better but it's a a little too bright let's ask for a refinement on that it's too bright can we use black and dark neutral Grays instead it is pretty cool to be able to just prompt for something like this the amount of time I used to spend building these things was obnoxious and they don't have to also there's a little trick in here the button as child it lets you apply the button styles from the shadan button to something that isn't a button like a link so instead of having a link type for your button you can just do that that's so much better that's so much better also uh fun fact the reason I'm back in Vivaldi right now is because I was so tired of gradients and certain other things mostly gradients not working right in Firefox as well as the dev tools being a little uh not great so we have our new homepage let's hop over to this home folder we made paste we have oh it's a Tilda in my code base phenomenal absolutely phenomenal so I do want to make one change here right now this links to this signup page that might not exist we probably want to do something different here depending on if you're signed in or not there's a lot of ways we can do that we can make it on the server side we can make it on the client side what I prefer to do in a situation like this is try to avoid having the client needing to care right now if we were to put like a signed in and a signed out State like this either this page is going to have to be rendered on the server which means it takes longer for them to see it or the client isn't going to know what it's supposed to do when it first loads and it has to like gray out the button or have it come in after there's a way we can avoid both of those which is change what this does so I'm going to get rid of the link here we're still going to send you somewhere but right now we'll just have this be a button I'm going to change one thing though type equals submit you can also start working on the most important part here which is the form action is signed in we probably AR going to keep that but now that we have this and we have a form action we can do my favorite thing which is just put a quick use server that does the thing we want to do const session equals wait off from clerk oh I wrapped that too many times there we go fix the fix the jsx there doesn't need to be async again we don't just check session we check session. user ID if there is no user ID then we're going to redirect to/ signin else we're going to redirect them somewhere else I'm going to return this so that we early escape and otherwise we're going to redirect them to we'll do slash drive and we're going to make these two routes and we're going to make them both do different things why is that coming from there should be next navigation there we go now we have the redirect to sign in we have the redirected Drive since this is all being hit from home we could put it in here I think it's probably better to do it higher up sign in in/ page. TSX and now another thing I love to do copy paste we're going to delete this guy and here we'll do the sign in h you know what we we don't need to check signed in or signed out say let's just do the right thing and always render the signin form signin button from clerk you can delete all of this and if we did this part right we'll go back here click this and it redirects us to the signin page and we click sign in asks us for our Google off and it's not going to do the other parts right we have to go deal with the drive part that we weren't dealing with before so let's go do that new file Drive page. TSX this one's going to be a little weird export default function Drive page obviously we don't want to just return hello we want to find your Root Drive so let's make that over in queries hop in here get root folder for user close cursor very close but we need something here we need yes this is right it should be is null cool oh I didn't import and first and we've had to do in the query file it's kind of funny okay so let's go through this query one piece at a time so we select from the folder schema where folder schema owner ID is the same as the user's ID and the folder schema parent is null because a folder with a null parent is the root folder that's what we care about and then we return folder zero so now if we hop back over here const session equals await o cool let's get and smart with all those Imports we need to import the O function this does need to be an async route session user ID redirect to sign in if there is no user ID they need to sign in and down here root folder await well we don't need to import this from DB anymore we want to queries Dot get root folder for user now we have the root folder well we should have the root folder it is possible it's undefined and if it is undefined if no root folder we're going to do something a little different we're going to create that root folder but we don't have it yet it's just going to redirect to this fake route that doesn't exists so we'll ignore that for now but if we do have the root folder which in our case we will we're going to do the final step here where we return to redirect we had slf as the route for this so now if there is no session user ID we redirect you to sign in if if there's a root folder that we got from the get root folder for user then we redirect you to that folder and if there isn't one we redirect you to the create we're going to change this to actually do the creation in line but for now let's make sure it all works signing in now oh huh it just sent me back to sign in I am signed in and we know that CU if I go here and click get started it's going to send us to SL Drive instead and then it redirects us to where we need to be slf SL our root folder so all those parts work now let's handle those edge cases really quick first one is we need to redirect you to the right place after you sign in and we do that over in the sign in button if you press again control space this will tell you what you can put here we can force the redirect URL to be/ drive now I'm going to go test this real quick get started sign in again sorry phase and look at that it redirected us right where we're supposed to be seamless that is actually really cool that it worked that well but I want to make sure it works when we don't have a root folder so I'm just going to use my other account instead of deleting from DB cuz I'm lazy honestly this is good enough that it's worth a commit so we'll commit it and then we're going to make our last set of Chang before we wrap up status get add- P new homepage get add- a new homepage signin flow start of onboarding get push and now for the final major change we need to handle this case we could just do the creation here but generally I prefer to make the user click a button because it makes it less likely it'll hit a weird race condition where things are being done multiple times when they shouldn't so we're going to do a form not a forn why did it leave the closing for there oh huh look at all of the things that just got pretty accurately figured out automatically we do want to import button we do want to import mutation so we need to go make this mutation we're going to onboard user that's a pretty solid hallucination not really hallucination if it was right so what we're doing here is on board user we want to create a root folder we should also probably do this in a way where we're checking to make sure the user hasn't already been on board and that this folder doesn't already exist we also should be doing this in a transaction if you don't know what any of those words mean go look them up we have been going for too long already I am going to add the returning ID call here so that we have the root folders ID at the end here cons root folder ID equals root folder zero. ID do explanation point like it has to exist in this case and now we're going to put those extra folders in just to be a little more convenient so you can see all of them there we're going to insert a few things we'll insert trash we'll insert shared we'll insert okay start I don't want start we'll just call this documents cool so I'll read through all this because I just generated a lot of this code we're inserting into folder schema value name rout parent null owner ID user ID and then we're returning the ID because we want to have that ID we don't put anything like this at the end we will get just a transaction thumbs up thumbs down effectively now we actually get the ID back so we can use it for other things we grab that ID by grabbing the first instance on root folder the first element in that array taking its ID and then we insert a bunch of new things all again with you as the owner well the person who was authenticated in the ID pass here we create these additional folders that we return the root folder ID awesome now we'll get all of this instead we're going to change it to it's not queries that onboard User it's mutations. onboard user and what's cool here is we have their user ID because it's embedded and encrypted in the form we could double check by moving this here just in case in fact I would recommend doing this just to get into the practice if they don't user ID we redirect them to sign in but if they do then we continue cost root folder ID so wait mutations and then we redirect them to slf root folder ID is it really that simple only one way to find out right I'm going to sign out of my account we're going to get started sign in continue we're using a different Google account this time oh no it sent me to the wrong place there oh I forgot to wrap that I forgot to give this UI so obviously we should wrap this the same way we wrap the sign in page so that it looks good I'll do it real quick ideally you'd put these all in the same you know what let's do this all correctly I'm going to move drive and the signin page both into the home thing here and you'll see why in a second what's cool with these route groups is you can make a shared layout that only affects them so I'm going to make this layout TSX we're going to hop back to this root page paste all this in here delete all the content below main do props children react react node render the props children delete all this and now we need to go back into sign in and page and delete that from in them uh did I leave the footer here I didn't the footer should be separate from the main section eh not the biggest deal move that there delete delete wrap this in a react fragment because you can only return one element from a react component this makes it so it's one element and we'll go do the same thing on the page itself and I we should have to copyright on the main page too I put that in the form I'm dumb put that outside of the form delete that row delete that delete all these wrappers and do that look at it now this part is nice and simple and now all of these other pages will have the same exact layout we have create root folder should name that to like get started or start onboarding or something we have this all looking right we click there brings us here and now now finally this all goes correct let me rename this from create root folder to create new drive we'll create the new drive we did it we're here I can upload files we have all these different folders they all exist they all work we're done we made it you got to the end all the parts work there's a lot of little things we can fix I do want to commit this get it done yes yes yes make sure we don't forget that layout in those new files commit we did it get push it so there's a bunch of a little things we didn't touch that I want to make a quick list of so you guys have fun homework obviously you don't have to do all these but you should definitely pick a few because I think it will make you really retain the lessons we all learned here so we don't have folder deletions we also don't have folder Creations you should be able to create a new folder what you need to do there is make a server action that takes a name and parent ID and creates a folder with that name and parent ID don't forget to set the owner ID folder rename is a fun one but yeah if you want to do it you can do it you do also need to do access control right now any user can access any Drive I just sent you a link you can see it even if you're not the right person the solution to that problem is to hop into our page code here and the spot where we are just using the Pam in checking do one additional check here I could tell you what it is but I honestly think it's more fun for you to do that check yourself and figure out what it is and make sure you handle the case when a user isn't signed in or they're here and shouldn't be don't just throw an error send them somewhere that makes sense so Access Control check if user is owner before showing the folder page one real fun one if you want to get frisky with it make a file view page this one's going to be a fun challenge right now we have slf SL folder you'd have to make a different route probably slash file maybe this shouldn't have been SL folder maybe it should have been SL drive or something up to you how you want to structure these things but I would highly recommend having a different indicator for files and then make a UI for that where if it's an image you render it if it's not an image then you do something else with it but you're can to have a lot of fun with that take a look at my previous tutorial if you want some examples of how to make a good image in line experience like this speaking of my last tutorial one more that could be really fun toasts adding a loading State and just generally adding some UI for when you're uploading a file cuz right now it doesn't show you anything' be really nice if it did something at least small like showing a toast when the files were being uploaded you could go all the way out and show it in the UI all the time right when you upload with an optimistic update speaking of optimistic updates one thing that'd be nice is gray out a row while it's being deleted there's a couple ways you can do this you can set some state in that component because it is a client component you could use the fancy new transition hooks if you want to go real deep in modern react and nextjs stuff honestly just setting the state on it that says it being deleted and rendering different CSS while it's being deleted it's a small thing that will make this look quite a bit better there is so much more we could add here we could add checks making sure you haven't went over your file limits we could actually process the file types and store those correctly in DB we could go fix the file key thing there's a lot project like this has so many directions you can go with it and I hope you've been inspired to play a bit more use these Technologies and go build something fun for you while this might not be an actual competitor to Google Drive it should at the very least get you more familiar with all the things that we just played with huge thank you to all of our sponsors for making this video possible this was a grind we put a lot of time into this tutorial and also a shout out to my team huge thanks to faze and Ben for making this video possible what a grind and one less thank you to you for making it all the way through what a journey this one's been never put this much effort into a single video certainly not a tutorial like this and I hope you get a lot from it know that we would never be able to do these things for free without the support from people like you as well as all the sponsors that came together to make this one possible thank you guys again and until next time peace neres




## My Dev Environment Might Surprise You... - 20220906
i'll really want to hear about my setup for some reason i get it i'm an influencer i code good y'all think i have this crazy setup that makes me super efficient at writing software i'm not primogen i promise it's a hard reality i know but i used to care a lot about my vim config i used to be deep in i3 land and linux and all that i'm not anymore i stopped caring not because those things are bad but because they're not where i wanted to focus my energy it's my goal to make software for my users as quickly and effectively as possible and the details of my setup are not that important to me what's way more important especially as i'm hiring teams and bringing on other developers and working with them and doing all sorts of different it is significantly more important for me to have a workflow where i can borrow my co-workers computer or they can borrow mine and we can just use them the simpler my setup is to reproduce for myself such that my computer breaks i go to an apple store and i have it working in an hour or less and also such that i can onboard a new co-worker have them set up in an environment they like and we can swap laptops on hard problems and i can take over their computer and not feel like i'm re-learning how to type because i got really into some crazy new keyboard layout that isn't qwerty i picked up this philosophy from my first manager at twitch and i owe waba dearly for this i remember vividly all the effort i was putting in to make a crazy environment in my mac os setup that was similar to i3 with different programs having crazy key bindings like 15 different workspaces and scripts that i wrote and hacks that i did to the mac os kernel so that the animations would be faster i did so much to try and replicate like my old i3 workflow in my mac and then i would pair with my boss and he would just command tab command tilde through apps all full screen he did not do anything crazy with his setup at all and he was one of the fastest engineers i had ever worked with by a lot i realized at that point i had comically over engineered my setup and since then i've trimmed it down significantly how significantly let's just go through my environment quick here's my terminal you'll notice it says terminal and not item i don't use item i don't care it doesn't bring things that i need i just have the stock terminal i do use tmux because i grew up on tmux i used tmux in gnu screen before i ever wrote code i like it a lot i don't think you should go learn it it's a lot to learn it doesn't bring a ton of value but is a thing i personally like and it's the closest thing i have to a fancy tool in my terminal otherwise it's pretty boring and when i want to code something let's just go to zapdos in here yes it is in zapdos i have a short for this i could just do code period it's the same thing here's my vs code you'll notice this is very boring as well if i go to my extensions it'll be a bunch of language extensions so i have like the astro i have cloak which is for hiding environment variables i have the dart one which is annoying i have the deno one some dot env thing some edge db language parser i don't have a lot of fancy plugins in here almost all of these are just for a language this rewrap one doesn't work i'm probably going to remove it yeah nothing fancy it's very boring by design my color scheme is poi mander's theme uh p-o-i-m-a-n-d-r-e-s i think i have it installed in here yeah this is the theme nothing special it's by the way manders guys they make uh zest or zoo stand joe tie uh react free five or a bunch of other stuff i like it it's fine it looks nice it's easy on my eyes the color palette's fine this green and blue don't affect my color blindness for some reason i don't quite understand why but i can see the difference pretty clearly so it's worked well for me i don't care this is it that's my whole setup the magic piece though and i think a lot of people don't know this on mac os if i command tab i can only switch between terminal and my editor right i'm going to show you a magic trick it's going to save your life command tab to switch between apps command tilde to switch between instances of the same app so if i have three vs codes open or five chrome's open i just move my finger that's pressing tab up one key and press that instead to switch between the app it's so easy for me to quickly switch to editor switch between instances of the editor switch back to chrome open another chrome and then switch between the instances of chrome i promise you i am just as fast with this window switching as any crazy i3 or whatever desktop linux user is i don't have any fancy none at all don't have like i have a google chrome full screen here because i full screen things when i'm streaming so that you don't have the ui bar on top when i'm not streaming i don't full screen that way i literally just have my one desktop and nothing else and as few apps open as possible like the things i would also have open if i wasn't streaming are discord and notion that's it i keep my environment as simple as possible that's all i care about and because of that i open my laptop i complete the task i do my stream i do whatever and then i close it and i'm done i think it is very easy to overthink your setup i don't even use half the tools built into my mac i don't use workspaces i don't use any of the accessibility stuff my goal is make my environment as simple as possible so i don't have to learn my environment i just want to write code and if i take someone else's computer or they take mine i want them to be able to do the same the simpler the better think we get way too caught up in our tools i am sure that primogen is marginally faster than me at working in a codebase that he's already familiar with because his editor is better than mine and he's customized it to his exact needs and workflows you're not prime engine and i'm not either we have to do if you've done that you've been developing for a while you see what people are doing in vim and you're like hey that looks really cool i want to have an environment like that go nuts it is really cool i got hooked on that when i was like 19 and 20. then i turned 21 and i got a job and i was tired of setting it up over and over again and i looked at my manager and he was faster than me without any of that set up and then i stopped and i got faster so weigh this in your next decision about whether or not to go all in on neovim because i'm in vs code full screen with nothing fancy installed and i move pretty fast too hope this is helpful in your decision making process about your dev environment




## My Favorite Language Isn't TypeScript - An Interview w Jose Valim - 20231109
my bad debuts are hard okay guys what's good nerds got an awesome guest with us today for those who don't know this is Jose valim the creator of Elixir so to get us started how would you describe yourself Jose give us the two sentence who are you and why are we doing this oh man um I was not expecting to describe myself actually I can do it for you if you want uh let's collaborate I am a a software developer uh working on mostly on open source for most of my career actually a Brazilian living in Poland I think that's a good summary apparently I pronounced your name terribly do you mind correcting my pronunciation quick uh it's uh Jose valim but don't worry I yeah I that was very good but I I don't fat about it at all I appreciate it I will do my best though it's the least I can do if I have you on my show you know so in chat's already going crazy with the Brazil hype there's a lot of Brazilians in my audience so this is very very exciting for them and I totally get why like it's there there Brazilians in open source and software certainly aren't rare but they definitely don't get the attention that I think a lot of them should and you're certainly no exception here I'd love to hear a bit about what your experience was like getting into Tech from Brazil yeah so actually um into teac teac was uh I went to University and then um in the I I have an engineering background but in the first year everybody has a introduction to programming and there it was uh my professor writing C code on a Blackboard and I think that was like really like my actual introduction into programming but also uh and I really enjoyed it actually um and uh I had a band also I I formed a band with friends and then this was 2004 and then because I was enjo enjoying programming so much I decided to do a website for the band In macr Media flash so uh that was like my production it was like C and flashh and uh and from there I started like then eventually I did PHP uh I did JavaScript and then um you know Ruby and so on I want to dive way more into your Ruby experience because I know that was formative for you but I just wanted to call out I feel like all my favorite developers especially in the open source world came from music it's such a weird theme like I had no idea you were also with with the music background my degree is audio engineering Tanner Lindsley came from the music world uh who are we just talking to recently that did as well I know that uh it it blows me away every day how many of us come from music and have a background there so just wanted to call that out because I think it's awesome yeah would love to hear more about your experience with Ruby and how that led you to where you are now with Elixir yeah so I think uh Ruby was when I started with uh open source and I remember I like it's it's so funny because it makes me feel old in some ways but I remember like um I started like I started using rails at the time because that how every a lot of most people at the time introduction to to Ruby was so it was raos and then I remember I wanted to do like file upload and then I was using some package I don't even remember how I think we had Ruby yeah we had ruby gems for sure so which is like the package manager for Ruby and then I found a package and then there was a bug and then I found a mail of the the the alter and I sent him like a diff over mail and it's like hey I found a bug in your library this is you know so this was like before uh way before GitHub and everything um and uh and then you know like um I was I would use some packages and then they would go on maintained and I would take ownership over them and a lot of like uh Ruby is really where I started my open source experience eventually I became uh part of the the the raos team and spoiler alert was working on some problems with raos uh is what eventually led me to to Elixir I think that's just such an interesting journey I you highlighted so many points at which you didn't let things get in your way here like the combination of like there was no GitHub so you emailed a diff to the person when the thing didn't work you didn't sit there and say hey this isn't working you went so to your way to fix it that you ended up becoming one of the maintainers of multiple libraries and that wasn't enough so you started working on Rails and it seems like at that point you started hitting problems both with like rails and with Ruby and rather than like sit there like with your hands tied and just accept it you went and made a new language so what do you what causes you to make these jumps all the time yeah so there there there is one thing I think there are depends how you want to say it I would say like I'm a very uh Curious person like in in terms not in in life necessarily but like in technical stuff like I'm very curious with tinkering uh and and to understand the way things work so every time I install a package I actually go through the package and when I am at the beginning I I sure I'm not going to understand everything it does like when I was starting with Ruby I would look at rails like the source code and I definitely would not understand but it's like you know it's like it start helping you build some intuition with time then you can go back you understand a little bit more so that's something that I always did like just like reading the source code that other people wrote and and trying to to to learn and so I think that was actually I forgot the question by the way you have to repeat sorry it was how what leads you to pushing through these blocks when you hit them in this way yeah yeah okay perfect so I was on track yeah so I'm just like being very curious and trying to to explore like even if like oh we have a solution I try to look around and say oh what are the different ways so for example going a little bit into Elixir right so what was happening at the time was that uh this was 2009 2010 everybody was talking about multicore uh uh concurrency like because the machines they were starting to have now two and four cores and then people were saying like oh we need to use all those cores in production and people are saying hey you know like in the future we are going to be using machines with like 16 32 cares and today I like to say like even your rist watch has like four cores right so and at the same time like raos was going for its Journey for like supporting multicore better and we would have like a bug there's this bug report that like uh traumatized me for Life uh which is like somebody the bug report or something like this like uh when we have uh a spike in requests in production AO is scaling kicks in for the Aros application and then when out is scale kicked in uh and a lot of requests went to that new application because it it was a spike that application would would fail to boot and what that meant like translating this what that meant was that uh there was some and there were using they had the the they had the the multicore flagging rails enabled um and and without the multicore flag they did not have any issues so what that meant is that while raos was booting there was like some race condition in the code that would be triggered by the multiple requests coming in at the same time that and that would cause should blow up and like when you get a bug report like this you're like okay there's definitely a bug here but I I have no idea like I have no idea how to start like I you know like it it looks very hard to reproduce it right so for me to reproduce it I need to just like set up some instance and like some benchmarking right so it's going to be very hard to reproduce it's probably going to be very hard to fix and even when I fix it I probably won't be sure that I am fixing it for real right so so this was like so like okay like uh you know um if concurrency is going to be such a big deal as everybody is speaking and then I can talk a lot about concurrency because um but if it's going to be such a big deal I I need to find better Solutions and the whole and the whole thing was like is the same thing like I just want to solve a problem right like there's a problem how I'm going to solve it oh that maybe there are better Solutions maybe there are other programming languages other technologies that they they better address this problem and through like this journey of like trying to see how other people solve it I I say like there were like two points of no return that they change higher right software so the first one was when I found functional programming and we can have a whole session in functional programming and the second one was when I found the airline virtual machine and we can also talk a lot about it and so I was like I didn't want like hey I want you create a like you know like that Meme like if you have a problem and now you use a reject to solve the problem you you have like two problems like creative programming language is like the 10 times worst of this like hey you if you have a problem you create a new programming language it's like now you have like 2,000 problems right so I did not start with the goal of like creating the programming language it was just like a series of events I was like it somehow made it logical like yeah I guess creating programming language makes sense yeah I love the journey here it's like weirdly clear of like you started with problems in the things you were using and building you searched across the existing solution space to figure out how this was solved in other places you did your best to apply those Solutions and sometimes that leads you in Crazy directions like making a new programming language uh one piece there I can really relate to is the attempts to concurrent or make Ruby more concurrent and performant when I was at Amazon I was actually helping us Port some Ruby stuff over to J Ruby which was a a wild journey in attempts to make Ruby run times that could be scaled slightly better and the amount of weird bugs you run into once you change your run time is just as much as when you add a concurrent mode later in development so I very much sympathize with all that I want to go down both the functional programming or Journey here as well as the earling VM and beam stuff I'll let you pick what we do first well so uh the first one was functional so let's start with with with that right so uh there are a lot of ways we can describe functional and uh at the time for me it was a very I'm going to describe how it was for me at the time and I'm going to describe how I would explain it today because I think like the 2023 version maybe better but maybe not people can can can let us know in the chat so uh um so at the time because the issue that we were having it was a data race issue what was happening is that we had two cores running sub code right and then those two cores they were trying to change the same place in memory and then we would have a race condition one of them would win and it would corrupt the one that was trying to upate at the same time and things would blow up it was a data race so uh and then some languages uh so you mentioned J Ruby I didn't want to get there but I'm almost sure that these bug report they were using J Ruby because Ruby like python they have a global interpreter lock exactly so that thing doesn't happen right so they they don't allow to to to two trads run at the same time when you're changing a DA structure so that's a data race issue and the thing about functional programming is that um in functional programming you're not you are no longer thinking about mutations you're no longer thinking about changing things in memory you are always thinking about transformation so the simplest example is if you have a list with three elements and you want to remove one element of the list you don't change the list in memory you get a new list with two elements and there's also a lot that we can talk about this um so you got a new list with true elements so you no longer change things in memory and and when I look at that and I was like wait if I'm writing my code like this all those concurrency things that you know that are haunting me the problem just disappears alog together right and I like to say like there are two ways that you can solve the problem one is what that the problem is still there and you put a solution on top right and there is a way where you just disappear with the problem all together and that's usually the the preferred approach like this is perfect if I'm if I'm you using a functional programming language all those problems they disappear and that's the funny thing is that like uh back in in in you know like functional programming it started a long time ago like the first paper with with uh Lis for example is from 59 and hco has a long history and then they were not really thinking about concurrency at the time I believe right but when concurrency became a thing there was a surge in popularity in functional programming language exactly because people realize like hey you know concurrence is much easier if you're not changing things in memory it just turned out to be like a good fit so that's that was uh my journey at the time uh but today uh if I if I was if I'm going to describe like functional programming I feel like a lot of people they sell functional programming wrong right because like some people they would say like oh you know like functional programming is uh let's think some people would start like with the mathematical approach like take a mathematical function right like s or cosine or even the plus operator right there is something very beautiful about the mathematical function which is that if you put two and two right you're always going to get four back right always right and everything that that function needs to work you are giving it as input right and then it gives you the output back right so functional programming is that like get this approach right and apply your code imagine that every time you are calling a function everything that that function needs to work you are explicitly passing as input and everything that you need that function needs to give back to you right you're going to getting the output like to try to be a little bit more practical imagine that you're building I don't know any Commerce you're going to have like a cart you need to have something for managing the cart like in in object or programming you can do something like cart do add item and then you pass an item right and then what what does that do like oh it's going to put like the item somewhere in the card somewhere in memory that you don't know about right you like the whole purpose of like object object orientation like is to encapsulate that is to hide that away from you right and then in the functional programming language oh uh cart add item same thing you're going to pass both the cart and the item as input and you're going to get an updated card back and this makes like a huge difference in code montain ility because everything is clear it's not like oh I'm passing this item to the cart and that's going to change something somewhere that I don't know where everything is clear all the inputs all the outputs they are super clear to us and for me that's the big deal about functional programming is about making our code clear more maintainable making it very clear what is the input what is the output so I can glance at that code and understand what it's doing and from that we derive like all the other properties like that's why mutability is important right because you don't want to have a function that change things in memory everything's explicit we get concurrency and you know uh so I feel like you know like if it's I think if it's said more times like hey functional programming is about like maintainability I think we'll probably be able to like get more people listening um yeah yeah I love this rant for what it's worth my functional programming Journey actually started with Elixir and it let me learn all of these lessons really early in my Dev career I previously had hesitated for the same reasons you listed I didn't want to do the math thing I didn't like math very much at this point in my life I just wanted to make software and build cool things and honestly I didn't really like coding too much elixir was the first language that taught me to actually like what I was doing and genuinely enjoy code because I felt like I I wasn't working around problems I was getting rid of them and that was the the piece of what you just said that I I like the most and something I work really hard to do and like really resonate with is this idea of like rather than just continuing to patch layer upon layer upon layer around these problems so we end up with this like giant onion of [ __ ] wrapping this one rotten core what if we can just destroy these problems at their core with a different model and I absolutely love that and on the topic of different models shall we dive into beam yeah yeah and ju just two more things about programming very quickly just wrap it up and it's really funny because like when I go right like in any other programming language uh not any other but like you know like let let's say JavaScript right it kind of drives me crazy because I'm like okay I'm going to call this object but because we have all this mutability all this state I'm like when I'm going to call this like what what is it going to change like I am always uncertain because I don't know like like when I call something what is the impact of calling that thing because it can change the the whole world around you like Joe Armstrong the creator of verling he had a very good quote he said like in object orientation you think that you got a banana but actually you got the banana the gorilla holding the banana and the whole jungle with it right because you know your thinker are playing with the banana but when you do something with the banana you can actually change everything that is behind it um but yeah we can we can go into into being yeah I totally agree with all of this I will say there are places where you need the whole world like in Game Dev the oop model makes a lot of sense but I if there's anything I fought against hard since I started this whole Creator Journey it's the idea that the tech we use to build games and the tech that we use to build applications and web interfaces and servers those are probably different things and they should probably stay different yeah I I don't know a lot about gaming uh but yeah I can I can understand like you know there are a bunch of other domains where you know uh that's that's going to be a a crucial modeling too yeah absolutely So speaking of crucial models and Industry change I'd love to hear your thoughts on beam and earling and how you got there and why as an industry we aren't using this for everything yeah so beam is uh there is an abbreviation like something something abstract machine but it's there virtual machine uh for those who are not aware so uh yeah just wanted to point out to everybody in chat the the single heaviest consumer of the earling virtual machine doesn't actually know what beam stands for knowing your analogies isn't that important you're not going to get quizzed on yeah and uh so the thing is that so if you go back like when when I was going through this 2010 so I was like okay functional programming and there were a lot of functional programming language at the time I remember reading a book called seven languages in seven weeks great book that really kind of oh no I just did something that killed your audio it's on my side for sure I just don't know what it was hello yeah I see your audio coming through it's just not getting to me give me one sec to fix that huh you guys could still hear him but I can't what the hell I have no idea how that could happen uh talk quick Jose hello hello audio sound liter zero clue how that could happen let me switch what my headphones plugged into you can keep talking I'll just have to yeah I'll I'll go talking and somebody types down everything that I'm saying should I rejoin they are chatting here hold on okay supposedly we're back no I should not rejoin because you everybody can hear me I can still hear talk once more oh no can you not hear me I can fix that okay you should be able to hear me okay sorry yes I can hear you can you hear me yeah yeah that's the first time my roadter ever failed on me it's like the one piece of gear I've never had a problem with and all of a sudden I'm having a problem with it so that's disappointing what what was it it's my roadter it just suddenly stopped receiving audio from my PC even though it was still routing it through my computer I've never seen that in my life that's a new bug we always find new ones when it matters yeah I I actually actually have no idea what that is so that's is that yeah I I can write about it for a bit but the the tldr is it's a audio interface that can take two computers at once two xlrs at once and can easily manage a stream like this where I have a bunch of different audio sources and I can record directly on it so it's just like a really nice all-in-one device for my audio stuff I love it it's never had a problem before sad it did I'll talk to the team as soon as the stream's done to ask them what's up and they'll respond immediately because they're great it's all right yeah um we're good now yeah so we were talking about beam let's just redo from the start I yeah I'll redo like I tried I tried to continue but I completely lost my train of f no worries we can reset it didn't go anywhere yeah no no right so beam so going back to0 um I said Okay I want I want to to learn functional programming and uh I wanted to see what are the functional programming languages there was a book called seven languages in seven weeks that was like a very good you know summary of like different approaches I also went in depth and the thing is that uh and through that book I have eventually found and through other ways like I found airling but that book is the one that sold me on this because it's really comparing a bunch of languages and the thing is that if like back at the time there were a lot of new programming languages coming up with a focus on concurrency go uh closure I'm blanking right now Scala uh and there are probably more like everybody was talking about concurrency right and Airline had concurrency as well and but here's the thing like imagine that why do we want concurrency right I want concurrency because I want to be able to use all the resources on my machine in the most efficient way possible right uh that's why I want concer that's why want my programming language to be able to spread work across all course if it has to do IO it does Io if it has to do CPU it does CPU right I don't want to have to deal with this so that's what why people want concurrency we want like to maximize our resource usage but what happens when the work that you are doing you cannot do it on a single machine you need more than one machine you need distribution you need to coordinate work across machines so a lot of people were talking about concurrency and then there was this programming language called earling that not only solved the concurrency problem but it also solved the next problem the distribution problem and not only that they solved that in like in the 80s like you know right now it's like 40 years ago at the time was like 30 years ago and I was like this is crazy right like like this is I like when when I when I read that like I was like okay like this is what I want to do and not only that like airl has like such an interesting uh history behind it right like so it was created by ericon which is a telecommunication company and they've buil it to build like telephone switches and if you get like a telephone switch right like what it has to do it has to manage like millions of concurrent connections right like people people using it it has to be really robust because you know you you don't want like telephone switch going down and dropping like uh all the connections right like it's B we consider like that basic infrastructure uh telecommunication right uh the other thing is like I like to say like they need to be able to upgrade the code live right and have mechanism for that I like to say we don't receive phone calls from our operator say like Hey we're going to be maintenance mode from 2: to 3:00 am. so please don't call anybody right so they had to solve all of these problems and they've created the technology right and if you look at and this was in the 80s if you look at the web today that's what the web is a b of things connected all the time right especially nowaday like you have your fridge connected you have your phone connected everything's connected all the time it has to be reliable right it cannot go down and you have to coordinate with a bunch of other services so for me it was like you know like they solve three decades ago what everybody is working uh really hard to solve today and and I was like I was fully sold like I was like this what I want to use I I I want to use the Arling VM and and and that was it for me I love that and you've done a good job avoiding the scary part which is the earling language which is not very digestible to most people especially now I feel like there was a window where Academia had the opportunity to lean into erlang and the opportunities that existed there but it stayed hard in the SC C++ Direction I'm curious if you feel like that same moment happened and what your thoughts are on why erlang didn't catch on like more thoroughly I don't know actually um I I don't know uh I think H I actually have to think about this I'm I'm not sure and I don't want to definitely speak out of turn I feel I feel like a lot so I I'm going I'm going to do it by comparison right so uh take uh go when go uh was released right of course there are a bunch of things that uh go is an excellent language but uh there are of course a bunch of things that make it its trajectory different one is like well it's not functional but it's also like a uh it's powered by Google and just saying like it's a language by Google has such a big marketing power so I'm not saying like it's an Apples to Apples comparism but something that go did at the beginning was when they came out they were like they were very concerned from day one with the the developer experience right like before go um a lot of the programming languages they were like well you have the programming language right but the tool to use that programming language was usually separate right so like in Ruby you had like Ruby and then you had rake and you had like things coming from Rayos like it like you had the programming language the programm language word about the programming language like Python's the same right like you had like a separate package manager and I think uh when go came out they were like hey you have the programming language you have the compiler and you also have the whole tooling and that's part of the language that's not something separate right like the tooling is as important to us as the the compiler is and I think in this sense there probably languages that did that before right right for sure but I think like in this sense like go was kind of like it really made it clear that programming languages to succeed they need to have like the whole like getting start experience all the way down to the tooling like very clear and and and there precise and so for example I think that's one of the things that definitely made uh airling adoption it's one of the things that I also wanted to tackle with Elixir right it's like you know when I when I give a talk about Elixir I want to tell people like hey if you wanted to start your project today because you like this St it was a goal for me like you're going to go home you're going to download it and you're going to run mix new and you're going to have like the infrastructure that you need there for you to compile for you to run tests um and today it it is even further than than I started obviously but you know I wanted everything to be there so and but this was back in 2010 like airling proved a lot in the direction of documentation and tooling actually I always found the learn documentation really really good like uh you know definitely better than the experience I had uh with r Ruby and JavaScript at the time right so uh the doation was very good but I think like this uh this whole concern about you know I I want I want a learner link and I want to put something production how does that Journey look like uh at the time I think it it had a lot of hurdles in it and I think that definitely impacted so I I think that's one example but I don't think I don't think we are going to have like one precise answer it's probably a bunch of things uh yeah yeah I there's a lot of pieces in there as per all of these tangents that I want to dive in on a ton because there there was a lot in there that I really liked I specifically one of the first mind-blowing moments I had cuz I got into elixir in like 2017 2018 window that's when we were chipping it at twitch one of the first like wow this is a different angle for a language moments for me was the introduction of Elixir format the idea of a formatter as part of the language and the core tooling so I didn't have to find something like prettier and set it up and have to argue with my team about our opinions about these things having a formatter from the language creators was a way to settle so many of these types of like debates and discussions internally and we could just focus on what mattered which was shipping software yeah yeah and and go you know go did it first right and go was like the the so you know like I like as I was saying like the the lesson for me from like seeing go like spread in adoption I mean there are many things many conclusion can take from it but one of the lessons for me was the importance of tooling and go did the formatting and then when I saw that I was like all right you know like I I understand I understand why they are doing understand why it matters we should do the same in elixir um you know yeah I totally agree and I think these types of focuses are a huge part of what made Elixir such a strong language and such an enticing learning experience and shipping experience for me another thing I think you guys did very differently from honestly any language I can think of is how closely you've worked with Chris and the Phoenix team for those who don't know Phoenix is the equivalent of rails in The Elixir world it's the One-Stop batteries included framework for doing full stack and server development for everything from apis to web applications I use a bunch of services that use it I've even built a few myself at twitch we used it for all of the internal Technologies for running marathon sh or streams so the Bob Ross Marathon was run on Elixir code for a long time and we had such a good experience like with a little twers team shipping and building our own like internal television broadcast studio using these tools and at every point it felt like there was either a solution or a good path to one that was blessed by like The Elixir team itself some amount so I'm curious what are your thoughts on this what led you to being such a close or to working so closely with the Phoenix team and how do you think that has helped shape The Elixir Community yeah so uh I I think there are a couple things um there are a couple things so one of the things is that like again going back to 2010 and then eventually when I decided to like create a new programming language because I wanted to explore different ideas in darling V machine one thing that was very clear at the time was like hey my competition is like competition right but like if I'm trying to get developers attention my competition is going to be go which is like powered by Google uh is going to be F which is powered by Microsoft a little bit later uh Swift right from from Apple and uh rust at this time was still like shaping a lot what it was going to be I think at that point it even had an actor model so you know like and then there's this language from Mozilla and then I'm like there is no way me being part we're probably 30 people like part of a 30 people consultancy in Brazil there is like absolutely no way that I can compete with this right like it's impossible right so the only the only way that I like I my only option like to move forward was to to decentralize everything like uh like I cannot be a bottleneck in the decision process I cannot be uh a bottleneck on the community I cannot be a B oneneck on on on on books like so I was like you know everybody was asking like hey I want to do this I'm like do it I don't care right like I I'm working on the language I don't care everybody does whatever they want and I'll be there to to support like if you need anything let me know so I always felt like that my role was like you know um you know like the there's a joke like the a thex developer is actually one that makes like 10 other people be like you know or five other people be twice more or 10 other people be twice more productive I was I was like okay that's my job my job is to make sure that people who want to do exciting things with with Elixir that they they can do that and today actually I spent like most of my time is actually not spent on The Elixir it's spent on on the where we're going to go back to this so yeah we'll go back to this later but and then and I knew web was going to be a thing I 100% new because I was coming from Ruby I was coming from ra so like my uh sphere of influence was like web developers they were Ruby rail developers and the thing is that like even at the beginning there were I even did like a very small web framework at the time like a meant should be like super small like Express in JavaScript or sining Ruby just to try to feel like how mature the language was and uh and at the time there were like people parting Sinatra people parting Express people parting rails to to to Elixir right and then and then it all and then I was and and I knew like something was going to to to show up and I did I did not want to be the person doing it as well so I was just waiting and then there was this presentation from Chris I think it was on the first alixir con where he tells like why he's building Phoenix right and he actually came from rails as well and what he was trying to do is that he was trying to do like a building a real time application in in in rails where you know you would click a button and you would receive the update uh without having to do a bunch of work so you we can talk about live view later but like one of the reasons why Chris came to to Elixir was because he had some of live VI related ideas like way back then he was trying to do that in raos and he could not get it to work like the the model was not working he was using like event machine which was like an vented thing and it had a bunch of issues and then he heard about Elixir and he decided to try out but when he decided to do his own web framework he did not start from rails he started from the part that reos did not have which is like this whole real time thing that we call Phoenix channels so to me that was perfect because you know like he was a lot of people was like oh let's bring you know let's bring raos to Elixir right but you know the the the question we should really be asking is well you know if I was starting rails in Elixir from the scratch how would that look like and that's exactly the the what Chris did he was like okay if I have this platform where I can run millions of things at the same time keep literally millions of uh websocket connections alive at the same time which kind of applications can I build and he started from that so when I saw his presentation I was like I was like this is it like this is is this this is the angle this is how we should approach this problem and you know we we started talking exchanging ideas all the time like working on different things and uh yeah we are great great friends today and it all came like from from this presentation just like completely rethinking how a web framework should look like um especially running on Elixir and airlink I absolutely love this it's such an uncommon thing and I really like I I hunted to try and find other good examples of languages and like important libraries like this collaborating at that level and there just aren't very many I tried and Chris has been such a great Advocate like Phoenix is a huge part of why we were interested in elixir in the first place and as he put it in the documentary what before took 100 servers can now take two using these new technologies and models and actually having concurrency and distribution as part of the virtual machine your language runs in and there's obviously the classic demo that you give this is more of like the language side the concept that you have two boxes connected via a network they have namespace access to each other and you can it remotely call a function from one machine to another trivially and once you get into stuff like the Gen server patterns where you can basically have a map that distributes your code across servers it's it's mind-blowing what you can do and to to see and once your mind is blown it has to be pulled back together and I think that's what Phoenix did for us is it let these incredible I I don't want to say like like vagues the wrong word I can't think of the right word for it but these con like these powerful tools where I when I saw the demo of two laptops like this is really cool I just don't know how I would use this directly Phoenix is how and I love that you saw that just as much so that is both validating for me but also exciting for the entire Community to to know that if they build something that you as the the language Creator see as aligned with the philosophy that you'll get reached out to you'll be part of it that way and that even somebody like me who's mostly known for typescript can hit you up and here you are in the show your community involvement is one of the the coolest parts of Elixir and it's a huge part of why these developers are pushing the way they do yeah and and I think and I think there one thing that um that I think it's worth talking about it's like I and and again it goes back to saying like Phoenix is the perfect example because we can talk a we can talk like oh distribution is amazing but then you're like well sure like being able machines talk to each other out of the box that's certainly excited but exciting but what I'm going to do with this and like Phoenix like Phoenix is using all that so for example uh imagine that you want to to build like a real time chat for example or you know as people are using the application imagine you know like even on Twitch right you know like you want to show hey somebody join the channel or something right you want to send a notification to everybody if you're using other Technologies this usually means like oh okay I want to message everybody so what I need to do is that now you're going to bring like rabbit mq or you know or Amazon sqs aashka or whatever and now you have like this third this additional piece of techn technology that you have to maintain and deploy right and then with Phenix like you don't have to worry about that like you can just connect the nodes and send messages across them like there is one problem that um that uh so one of the features that Phoenix has is called uh Phoenix presence and it knows like when people connect anywhere in a cluster it lets you know and then you can track who people are connected like people who are in the same chat room and this is one of the things that it's very hard to solve very hard to solve if you don't have distribution these are like a lot of people think it's like it's simple uh but it's actually a very complex problem because you know you can say like oh uh I'm going to start this information in the database right but you need to remember that a node in the network can go down at any time so if that if that node wrote in the database that those users were there now you need to have like something cleaning up the database to say that those users are not there so you now you need a way to know if a node is up or down which is very hard right because in a distributed system you can't know like hey is this Noe down or is it just taking too long to reply to me so it's like it's a whole distributed thing problem and like Phoenix is the only web framework that comes with this like out of the box and it just works you don't have to do anything so what I'm trying to say is like what all those features mean at the end of the day like we talking about concurrency we're talking about distribution what all this means at the end of the day is that you can write your application and you're are going to use penix and elixir and you know that's it the need to bring external complexity uh is reduced considerably of course you need a database and you may need other things but the it's not your starting point anymore it's not like oh I need messaging all right let's let's bring rabbit M right uh or let's bring something else which are great Technologies but again like if we go back like to the beginning right if I you know like I can bring this stack but if I don't need this stack in the first place uh it's it's a better place to be yeah I for my experience when I had to do other things so at twitch Elixir was like a small team that was just us using it the company was trying to centralize on go and at the same time our team was being frankly outsourced because a two-person team shouldn't be running broadcast like systems for a company of that size and we found a company that could do it cheaper so I like onboarded them outsourced my own job and got moved to the video on demand team and my options were were learn goang and like spend my time in the back end and go or get into front end and help us Port the website to react and I picked wrong I picked go and I hated myself I almost got fired because I was performing so poorly at that time because I just couldn't grock that model and like even when I did I just didn't enjoy it I just felt bad writing that code eventually I got bullied into the direction of trying front end by my manager at the time who said like I know you hate front end I know you hate JavaScript I think you'll like this reac and typescript stuff by the way I think it's getting more functional wink wink because he knew that hooks were coming at the time and I got to help not just move twitch to react but to hooks later in my career I started doing more full stack and backend stuff again and I dearly missed all of the things we just talked about because those were what made running servers not miserable and I tried running servers myself in other languages like typescript like go like rust the amount of work I had to do to scale to connect additional servers to make things work between them was so miserable that I moved in kind of two directions one was I went serverless on everything because it means you similar to how like you can solve a or like solving a problem around it versus going down to the root the root of the problem was managing server sucked so I deleted the servers but now I need all of these other services to manage things like concurrency like web hooks like my database and now that I need all these other services for that I'm at the whims of their quality of engineering and also have to maintain the mental model of where all these things are and what they do and I could tell you a lot of the problems you described there like a node shutting down or sending messages out of order and other nodes not knowing if that NOS even alive or not those are problems I've seen the services we rely on have claim they don't have to me I demonstrate them to them and then two weeks later they finally fix it and that just was never my experience with Elixir and honestly I feel like if i' St to the language and not Soul search as much as I did I probably would be much more productive I might not be as popular on YouTube but I needed something to get this frustration out of me so yeah thanks for showing me the light so early so I could be frustrated for the rest of my career yeah thanks for all the frustration yeah I will say the one thing I have learned since I have left it explored more is that types are actually a really cool thing one of my first or when I shipped my first production app at twitch it was for the Power Rangers marathon and there was one place in the code where I used a lowercase p instead of an uppercase P for one of the like modules we had defined and there was nothing checking for that yet and it took down the stream on the second episode those types of bugs the types of things that like should get caught in code review that aren't the things that I could get a red squiggly line in my editor for the auto compete those are all the things I love types and type systems and type safety for and I know that that is absolutely part of the angle for your interest in types in Elixir but it seems like you guys have gone way further down the like research and math path so i' love to hear your general thoughts on type systems maybe reference typescript more than usual because that's what this audience is most familiar with and what led you to deciding that types are worth exploring for alexir great yeah I I have to load a whole new program in my brain to answer those questions uh I feel you on that so uh it may be a low start but I'll definitely pick pick up um yeah so just going to how it started so we were talking about like how being involved in the community we talked about the code for matter and like one of the things I talk like the influence of go but the other thing was like the community was really asking for it at the time right and then it's like listening to the community feedback and trying to to to to make a decision like because we didn't talk about this one of the things that I I want for Elixir is for Elixir to be a relatively small language like I want to be language that enables other people we should talk about that a bit more before we go into the types because I feel like this is going to be the thing we talk about for the rest of the stream and there's so much about that idea of alixir being a small language and things like the the boldness of the I remember I think it was like what two to three years ago where you said alixir the language was complete yeah yeah yeah exactly so because and and I I was in into it saying like most of my time I is actually not spent on Elixir because if you think if you think about it like uh I have a horrible metaphor but I'm going to run with it anyway it's like elixir it's like kind of like a uh it's the meat in this burger where the the the tasty parts are the Buns because we are on top of earling and that's where all the work does really like all the work like you know like oh how can how can you create a programming language and have it great tracs like you have to stand on the the shoulder of giants be it like llvm the job machine right like you have to stand on top of something for us daring VM and that's where all the hard work happens uh I love the work from the from the airling team that comes from ericon and then the rest is the community alexir is really like just tiny thing in the middle so I have like this very clear rule like you know like we are going going to add a feature to Elixir only if it adding to the language makes that feature like um shine in a way like that being as a seate package is not going to be so for example in Elixir we don't have like a a butin Json package because you can just pick one from the community like there's a standard in the community and you can pick that and that's one last thing for me to worry about in my experience most of like the standard libraries in programming languages they know a lot of people are saying oh don't use that use this other version right so um so I I I want this core to be small because and one of the things that I want to do this was when I was working on the language of the design is that I wanted the language to be extensible right like to that idea of being decentralized like if somebody wants to know web framework you know like they should not need on new features from the language right like if somebody wants to write like a database layer abstract direction right they should not need to change to change the language itself so the language needs to be extensible need to be able to get it and build your own distractions uh so and and you know like today I like to say like there are a bunch of great examples like we have acto which allows you to have like this query that is compiled at compilation time very efficient efficiently and safely to the database we have an X which is numerical Elixir and what that does is that it compiles like a subset of elixir to run on the GPU right which is amazing and those like when we when we worked on an Max like we had to do like zero changes to the language and now we have a subset of the language that you can compile around the GPU so for me it was you know like I was like right I I am here in the middle and for me to be to be efficient to be productive it has to be small so with those guidelines I was like you know what really has to be there in the language so uh and and we have been like slowing down in terms of features for quite some time so uh like you said 2017 2018 a lot of the people in the community they were asking for a code form matter and I was like well does it make sense to be part of the language and you nailed it right like being part of the language like sadles the discussion it sets the standard for the ecosystem that everybody can use um and then the other thing like people were asking for uh an easy way to get all your alixir application to package that up and running production we call them releases airl has this feature Elixir did not have it for quite some time and then people were asking for it a lot of people were saying that the P Elixir was hard um so we we added that as well and then you know and then it has been it was quiet for a while uh but and I think that's when like uh the if you would ask like I would ask an event like you know what would you like to see in elixir that's the point where the majority of people like the biggest complaints like you know types right um and and even if we take like the so I'm going to types now yeah so um so even if but even if you take that like you know like we want types right well I mean like why do you want types for right like you because when you say hey we have type like a people they're going to have they're going to draw different conclusions exactly on what that means right so from like a a a typescript developer that may translate like hey you know I want to H actually have a a great IDE experience right and some of decisions in typescript happens for example so that you know the the developer experience super great even if sometimes some bugs they're going to go uncut right but it's going to help the developer experience greatly right some people like no I want to catch bugs early as early as possible right and all those people like like even if we take just those two examples right like they are going to have different they are going to expect different things because if you want feedback on the ID that thing has to be super fast because you know if I'm pressing the dot and it's going to take like five seconds for to to show me what are the options what are the types that's not necessarily good but somebody who say like my first priority is to catch bugs no matter what they it's more likely for them to say hey if I have to wait one minute more when you compiling my code to check all those things they would be super happy to pay that price so a lot of the work was like some of the initial work was like trying to understand what what are the what types in Elixir could mean and what we could what we could get from it so for example we're not going to get performance benefits because the airling virtual machine is still like dynamically typed so we won't be able to optimize much maybe 5% 10% but in general like that's not something we're going to get but yeah I think we could if we have types in Elixir there is no reason why we can't use that to improve the tooling and we also want it to help catch bugs for sure right but even that right like we need to be aware of what it means like what are the the types of bugs that a type system can catch and like when we are having those discussions I feel like a lot of people they tend to overestimate what your type system is giving you like they like oh you know like some people say you know oh you had to write fewer tests if you have a type system then I'm like like I don't agree with that it's like well you probably have you can write like fewer bad tests but like the good tests you still have to have them there I like to give the example of like um like the end Boolean operator right like the type for the thing like Boolean to bullion and returns a bullion so a perfectly valid implementation for this tiny function like tiny super tiny would be uh give me the random between true and false sometimes it returns true sometimes returns false and that's going to 100% satisfy the type right so if you don't have a test you're going to have a bug in your code so so there is a lot of discussion like so what it means to to add type of program language and what we are going to get from it and of course the the other thing that comes is that Elixir is an existing language and I actually happen to like the semantics of the language today and that's the other thing like AOG what a type system always does that in order for you to to Pro in order for a type system to prove that your code is correct or that it doesn't have doesn't happen it doesn't have certain types of of bugs it it it rules it rules out valid code it rules out something that we say this makes total sense this should work but the types is like yo I can't understand it I can't prove this particular thing is correct so uh I'm not going to accept this code so we also have to be careful with introducing a type system that um is going to fundamentally change like restrict imagine like oh now you can write only 70% of Elixir is that actually Elixir if that the case you know so uh we are just in the introduction of the problem by the way but I think it's a good moment to pause yes go further so many thoughts and everybody in chat's like wow Theo I'm proud of you for not interrupting because they know how many thoughts I have especially the unit testing thing like my first big break in this like Community was when I came out as like the the strongly anti-unit test guy because I feel like we had went too far in the direction of unit tests I am going to challenge you on a thing and this is from the angle of someone who has went from many communities like elixir to broader ones like typescript and react once you hit a certain level of adoption for a technology you end up at this weird point where the average user of that technology didn't choose it I just did a video about this with react where react will always have lower satisfaction rates than new Frameworks because almost everybody using spelt picked spelt and they picked it because they like it whereas react most react devs are using it because it's what their company is using they might have never even ined a react app themselves and I would imagine that the average Elixir Dev not only has run like mix before and like built an Elixir project from scratch they're probably the one who brought it to their company some amount and it's really easy for us as the like enthusiasts to end up with this bias where we think the average react Dev or the average Elixir Dev is this Wizard who's going to write really good code who's going to really understand these new things we're introducing who's going to write perfect tests and no bad tests the average unit test is bad because the average unit test is written by an average developer and this is the reason I wanted to bring this up is I feel like I was a very average developer if not below average for for longer than a lot of the Wizards I'm lucky enough to talk to and from that time I wrote a lot of bad tests I wrote many more of them in typescript than I did in the Elixir world but I found that with types and with well-defined type systems half of the tests that existed in the codebase before it was typescript were just checking basic like if this is passed correctly does it not error if this is passed incorrectly does it error and that whole class of tests which are bad tests were like half of the unit tests that we were running at twitch and what I've gotten out of typescript and out of typed systems is the types of things that I should not have to run tests for ideally my editor tells me right when I make that mistake that whole category is gone so while I agree you shouldn't have to delete any good tests because you have a type system you're much less likely to write or even accept when it's written a bad test into your stack when you have a type system that helps guide you on that happy path I I I agree and and I would add that there is one exception here about Elixir is that Elixir like I I I I can understand I can understand why somebody would be would write those tasks like checking the interface in in in like JavaScript uh because you know like in JavaScript like like I mean getting a simple function like plus right like well you can actually PL pass a string in there and it will gladly do something with it but in Elixir like I like to say our code is assertive because of pattern matching and guards so so so those tests they have like even less purpose right like there is even more indicator for you like to be writing them because um most of the code that we write is kind of already sealed in itself anyway but yeah I I I I I agree you I think I think I think that's the point and and the concern is that people they if they overvalue the type system because they don't understand exact what they're gaining from it it they are going to say now I don't have I don't have to write tests at all or something that I see a lot happening they say oh types are documentation I don't have to write documentation and then you do that right and then you have libraries with worse documentation because types they help documentation but they don't replace the documentation and worse test because they don't fully replace test so you have to understand what you're getting absolutely agree nice to know that as per usual we're fully aligned on these things I can't say that I'm surprised there I did write a lot of bad test in Elixir but man pattern matching God I feel like we should have touched on this earlier because this will be its own long tangent that and live view are both like things I could talk about for hours I just did a video recently where I was talking about how badly I want pattern matching in JavaScript and how the current proposal doesn't even come close to the overloading patterns in Elixir for those who don't know Elixir has a really cool feature where you can Define the same name for a function like three times and assert it the function's arguments that let's let's say it's for a transaction and the input could be a user so it would have in it like roll colon user it could be an admin which would have roll colon admin it could be a company roll colon company you can write the same function definition three times where you just change in line that role in whichever one matches first to the input is the function that's going to run this pattern makes it's so I I never wrote a switch statement in Elixir I don't even know if there is a switch statement at Elixir because I would just write a function and Define the conditions that way and it made life so so good and I don't know if I would have even gotten functional programming pill if it wasn't for that feature because it made functions feel so composable and consistent I think is the best word right I always knew what the function what what would exist in the arguments because I could strictly Define what the function had as arguments there so yeah pattern matching thank you you showed me the light yeah any any more any any more uh uh points in the in the introduction to types ah I I think that we've covered most of it I the middle ground is going to have so much what I'm really interested in is the idea of going the like mathematical research route I know that there was like a thesis done and but what led us to go that direction instead of a more like boring practical approach yeah yeah just before like I I you know like I I am a person who consumed a lot of technical papers and and I F yeah no that that was uh I I I consumed a lot a lot a lot especially in the beginning with Elixir uh and and you know like okay tangent tangent but this is a funny tangent uh like the the things like there are some of the things that you take for granted in a programming language but when you want to understand how it works or how to implement one it's like it's amazing like the amount of work that actually goes behind the scenes one of my favorite examples is pretty printing all programming language they have pretty printing right and it's something that oh you know a good pretty printer is going to be like oh like I have if I have only 40 columns in my terminal it's going to figure things out and space it evenly right and then if you have more space it figures that out right so like this thing it's actually when somebody was like oh we should have a pretty print in Elixir like sure that's that's a great idea and then I'm like how do you implement it and then it's like okay now you have to read like three or four papers to implement pretty printing that like lays out like all this foundation and this happens like so frequently right like uh you know like you think it's like it's a simple problem but uh it isn't really so uh for example you know in Elixir the other examples like our lists we don't know the size of the list right when you have a list like you you in order to the the size is not stored in memory so if you want to know the size of a list you have to Traverse the whole list and then you you know what is what is the size um so if you want to how if you want to take a random element from a list or from something for a stream of data if you want to take a random element but you don't know what is the size of that thing how do you take a random element without like loading the whole thing into memories like there is a paper for that uh a very recent one was um for computing the median so the way that you're Computing the median is that if you have like a list and you want to get the median is like the element in the middle right so you have to sort the list and sort is a very expensive operation so I was working on a problem where when we were benchmarking the the bottleneck was like the median implementation and they like they like like you know like you're just like oh my God like at this point I already know I already know like I I I'm going to be in in a in a world of trouble right like the me implementation is slow then you type like how to make the med implementation fast and there like dozens of papers on optimizing medium and how to make sure like you can compute the medium without like sorting the list uh before like really crazy stuff this is the most how the sausages made moment of this stream so far in my opinion I never thought about any of this at all and it is very painful to hear and again I commend you for this work because I I never would have thought it would take multiple papers of research to figure out something like pretty printing or finding the median slightly faster like that's it makes sense when you say it it's just unbelievable if you haven't thought it yeah yeah it's just it's just crazy but I actually enjoy it so you know for me it's like you know for for me it's like I don't know it's like uh like you know you know you're going to have it's like you know you're going to read like you're going to read some things where you you completely like you know like oh I am in the second section of the paper and then like I know I'm going to lose this I I know I'm not going to understand it and I I'll have to jump to the next paper because I don't have like so so like there was one for for the medium where that the way they were solving the problem was that they were like well you know if we think if you really think about the medium it's actually like a a solvability problem it's like well it's like it's like you can model like finding the median as a mathematical equation and then like the fastest way to solve this then is like is to solve the mathematical equation and then I'm like I'm out of here it's like you know like I'm it's going to take months for me to understand it and then and then I just drop it but a lot of times like you see so many interesting things and interesting insights and the ones that always make me crazy like like not crazy the crazy is the one that I I I I know I won't understand but the one that make me like I have a hard time believing are like the probab probabilistic ones right like people they say like well if we use this thing it's like it's a total probabilistic method but they are like we we can prove that you know it's just just probability but we can prove that you can find it in this time and I'm like how does that even work right like I feel like so I feel like so worried about like oh I'm going to add a a median solution to Elixir that is that is like probability based that it's fast but like the mathematics sound it just like makes me like what is like incredulity like I I I don't believe it it's like you know it's like are we sure uh anyway I think no I I live for this stuff I I don't know how much my a Soul care but from chat it seems like they're loving it so yeah we we live for this nerdy stuff that's the whole point of the show there's a million other places people can go if they want to like read about the history of Elixir and I think we covered that fine this stuff is so much more interesting like what does it actually look like to build a language so on the topic of all these papers and all of this effort and research and nerding out about it how do you end up on the nerdiest possible path to type safety right yeah so um so I actually try to do like a type system by myself in 2018 or something a proof of concept I made it public like two years later but like I knew I knew I wouldn't be able to solve that problem uh by myself right because the thing is that um if you want to if you want to um because Elixir is a programing language and we're saying we are starting the assumption that we want to change Elixir as little as possible Right that that's our assumption we want so we need to be able to find a type system that can model most of Elixir right because if I got a type system that is there are all different types of type systems so if I got a type system that is not a good fit it's it's like it will end up rejecting a bunch of alexir programs and we don't want to do that we want to have something that has like you know integrates nicely so what happened what happened is that somebody did so there's this whole discipl called set theoretic types we can talk more about it later uh and somebody wrote like in their Master thesis in Uruguay like something like oh we are like implementing like setic types for Elixir they sent me the paper and I was like this is very exciting uh I asked them like hey maybe we should do something further they were like no this is our Master we are heading out of University don't plan to ever come back so uh so we're not interested so I went for the references and and I've I've I've uh I went through the references and uh a lot of the references was josee Casta like like half of the the references the paper was was from jpe and then I was like okay let let me read the references right like let me try to understand a bit more what they are doing and I uh Eric from the alexir team he was also like we're were talking a lot about how to have like more checks in the leir and how that would look like and there was a problem that we were Tu so um so what happened is that I I I started reading some papers right and then one of the papers from B was like this well in this paper we are going to solve this problem and he described the problem and he perfectly described the problem that I was stuck on perfectly I was like you know and then there the excitement is like yes you know like finally I know the solution and then and then it's like like and then section two it's like well we can model this problem as like the mathematical properties of set and something and then like the rest of the paper is just like mathematical proofs and then and then they and then they never come back to say like hey here's how you implement it because that's really that's not what they're worried about right they they want to they want to show that like their their proof is valid makes sense not going to have Corner cases right so they they prove everything they never come back and then I was like and and then I was like oh man like you know defeated right so I was like okay I'm going to send an email to bee to jeppe bee and I'm going to send an email to him and and I I told him like you know like try to be lighthearted like hey you know i' I read the paper it perfectly described what I wanted uh but I could not understand the rest and then he sent me a link to another paper which is focused on people like me who do not really have the academic background and we started talking uh um about you know maybe having a PhD student who would do would work with bee and with me on a type system for Elixir and that's the thing right because again like we need to to find a type system that is going to perfectly model the electro semantics but that type system does not exist right so we need to get something that is a very close fit right and then in the places where it's not a good fit in in these small areas where that does not fit we have to either develop a new Theory or we have to make compromises on how that thing is going to model that particular Elixir idium so that's the work that we did I for the last year and a half was like going through all of the The Elixir semantics mapping them to set thetic types like oh this has the equivalent like and then we can I I I I don't think we can talk over without like having slides and discussing this but the whole idea and it's all based on set theoretic type so like uh we have like that Clauses like you were talking about like in Elixir we have you can have a a function with the same name and different implementations we call them Clauses right so this thing we model with intersections so the idea is set theoretic types one of the reasons I really like about it for people who are more who are interested about this I did a whole keynote on alixir K uh I don't remember the the name of the keynote but it was alixir K like two months ago on uh types for Elixir that explain the whole idea of CTIC types that they are based on unions intersections and negation and it's very exciting because if your mental model is based on those properties that you know you learn very early right like you don't have you don't need a mathematical background to talk about unions intersections right like there is a chance that we can have a type system that it's um easy to understand and type developers are going to be familiar like you have Union I don't know if you have intersection and negation but uh but you know like Union is there you know is we've hacked it in it's not pretty but we we kind of do yeah and and and Bee like who this researcher has been working in types for like decades um he he has papers saying like how the set type because usually the type system is like oh we need intersection to solve those problems and then comes later and he shows like how the SE types approach that he has allows you to model programs that are not valid in typescript today so he he he has like those proofs as well but that's way above my pay grade so that's what we did and then there were areas we had we had to develop new Theory I think I talk about those in the talk um and there were areas that we we made like actually uh also like uh development in the sense like we have new theory that did not exist before right so the whole reason I started talking about papers is because you know uh I'm really happy because now I have a paper publishing my name and you know like I'm very proud because you know for somebody who was consuming it for so long I don't think I would ever have one and now there's a p a paper with my name is there as as the author so that's very exciting and um so yeah that's how it came to be there is still one more thing that I want to talk about when it comes to types I'll try to talk about it uh but I think it's a good moment for our pause absolutely I I love the little like bit there of how exciting it was for you to have your name on one of these papers as one of the people who's consumed them for so long and I I know that feeling I remember the first time I saw my picture in a a tech talk at a conference by somebody who i' looked up to and I always watched like it was Tanner Lindley and I've been watching his talks since 2018 and seeing my face in the slides that I'm used to like being a consumer of like like doesn't matter how relevant or deep you are in something that always hits different that always feels special or when you send a PO request to a project that they have been using for so long right and then your code is merged in and then it's like ah yes next time I download the next version there's going to be like a little light of cod in there you know that uh I contributed it's always great yeah I know that feeling way too well I'm still mad that my roommate got his react contribution before me but I was contributing to Android way back so I have my cool card as well I yeah I I love that though that's part of what makes open sources cool as it is and also part of what makes Academia so cool as well like I'm obviously not a big Academia proponent I do think most software devs benefit a lot from going to college and you should I have a couple videos about that college is cool but I never got as deep into this other side but everything I've heard about especially from what you're discussing here is it feels kind of similar to what we're doing in open source where you can just reach out to somebody who solved the problem you had you don't fully understand the solution but you want to more and if you're excited enough about what they did and they're excited enough to have done the thing that shared excitement always almost always results in something really really cool coming out and it seems like you found a way to channel that outside of Open Source which is dope yeah and B he was very excited you know about like uh making it possible to have uh to have like his theory in a programming language I think he it was him that told me like usually research like uh he said like many of us like we are we accept that a lot of our ideas they are going to be implemented after we are dead so so uh you know he was saying this as part of his his exitment with work on Elixir but there is one disclaimer that I usually I usually make uh which is that um uh which is that there is still no guarantee that we're going to have a type system in Elixir like we I'm working we are working really hard on this problem I'm I did my best to understand what we can get from it what we would gain uh I did my best I'm working on my best to find a system that feels it's going to be part of Elixir and not something that is just going to be like added on top uh we have been working really hard but uh we are still just getting started with the implementation and you know maybe it's going to be like super super slow like we don't know like we don't know what can what is going to happen um so it I'm not promising that alexir is going to have types in in in you know um in two years or three maybe maybe is not going to happen but we're working on it and there is one thing that we that's the the the last thing I I want to talk about with Comm types that we have been working on which is that um I'll try to remember it otherwise I may have to to cheat a little bit and and read the blog post like and consult the blog post that I wrote which is when it comes to gradual typing right because uh in in in gradual typing uh because Elixir is a dynamic language right and then you have uh if we add types sh Elixir now you have Dynamic code and static code and you need to handle the the intersection between those two things right not well you need to join like the not intersection the overlap yeah between those two things right like oh what happens when Dynamic is calling static and there's definitely been no language that had this problem before right yeah so um so so for example imagine that you have the identity function and that's a function that receives X and return X that's what this function does right and imagine that you add the type uh you add the type of it being from Boolean to Boolean so the implementation it's X returns X but you put the type signature that it's Boolean to Boolean when you call that function from Dynamic code because Dynamic code doesn't have its types right you can call it but then at runtime the value that you are passing to that function is a string right so you have a function that you declared statically that is Boolean to bullan but at run time what you you're passing it a straight so what what should happen right so that's one of the problems with gradual typing and one of the things that you could do is that you can say oh what I'm going to do is that I'm going to add runtime checks so when Dynamic calls a static and if you're telling me that I give a bullion and then I I get a a bullion back and the type they are passing is dynamic I don't know what it is I'm going to check that the thing really return the bullion right and the issue with this approach is that it uh hurts performance because now you are introducing all those checks for booing is going to be quick but what happens if you have like an object with another object inside right those checks or if you have a a an array right so um those checks they can become very expensive right but if you added the checks you would you would say that the behavior is consistent um something else that you could do and that's the typescript route is to say well if you say that it's bullan to bullion right I'm going to to trust you and I'm going to assume that what is going to come out of that is a Boolean right and and and then we are going to continue type checking your program with that as a bullion so that that's a choice that you can make but the issue is that when you're going to debug the code at runtime you have that function telling you that something is a bullant but when you debug it it's the string right so we say that this system is that's a choice you can make but say that the system is UN sound because the type that you have at compilation time on the type system right and the type that you see the program they do not match and that's typescript choice and it's one of the reasons I'm not a type specialist by the way so I may say things but that's one of the reasons why sometimes like you you get confused with typescript types people get confused the other thing that you could do is that it could say look if I am calling a function I'm for going from Dynamic to a static right I'm going from Dynamic to static and I pass a dynamic into a static function I'm just going to say that that function gives me a dynamic back so I'm just going to say look I cannot assert anything on the input I cannot assert anything on the result and that's going to be sound that's going to be valid but not very helpful because you're not doing type checks right so this is one of the things like like all like you have this problem and all three solutions they sound like bad right like like you know like it's like you know they people come to me like you have to make a choice and then it's like it it's something that I would probably you know say you know what like I'm not happy with any of them so I I'm not even sure if we should do it so uh bee and Gom the PHD student so when I was talking to them I was talking to them exactly with the idea that because of pattern matching and guards we usually know the types that we have in the Elixir like I usually know that I'm working with a list then I work with a map the plus operator in Elixir only works with integer floats you can't give a string to it so the run time like the aing virtual machine is checking the types of everything all the time right so I told them like could we somehow leverage this information in the type system that the VM is checking the types so we can solve the problem of gradual typing without making the system on sound or without introducing additional run time costs and they actually came up with a theory they develop a new theory for gradual typing called strong arrows that solve exactly this problem so we solved the I don't want to say we solve the problem with gradual typing but you know like we had like those three options and now we have a a for option that I like a lot and if that works going to be very exciting so that's how I finished my keynote about types is that uh like this is is scary good and is scary bad because like you know we are building something that really doesn't exist like it's it's like there is new Theory like there is no other program language that is approaching the problem with like these decisions that we made and that's like that makes you a little bit scared a little bit worri like well it's uncharted waters right like am I making a big mistake but it can really be like we can really maybe be able to come up with a type system that just suits Elixir and the idioms that we have today and if we can solve this problem I can probably retire but yeah I I love this both that it's like the the final problem before you can retire but also that you've taken this pattern that you've had throughout your entire Dev career of like going past the current space to find a solution to the problem and even when you entered something like the the mathematical type system like research and crazy academic world and the three paths that existed there weren't s satisfying you kept exploring actually went back to your previous exploration and research in the earling VM and realized that the things you've been building there could actually help you build a fourth option and I think that to me is again telling of the the unique thing about you that I I really want to push for anybody in the audience who has similar Tendencies to to go all in on is this idea that you can find Solutions very far away from the space that you're currently in and then when you bring them they'll feel that much more like novel and unique but also that uniqueness is part of what makes Tech so special I the reason I push for things like diversity inclusivity in Tech the reason I push for people to explore and reach out to people outside of tech the reason I believe so strongly in people moving to software Dev from other fields is because that unique Insight is so often what makes projects uniquely successful and what makes Tech move forward like if we had just continued thinking there are these only these three ways to do type systems and just assume that was the truth we would never have this type of progress and when people like you enter the field we end up seeing so much opportunity and I just I really want to commend that and call it out not just to compliment you but to to Showcase to the audience that this is such an important part of what makes software unique and it's one of my favorite things about this field thank you yeah and in this case in this particular type of case I might I I made the easiest part what which was just to ask the question uh all the work was really done by by bee and Guam and you know like uh really thinking about this problem and not only that like I I I like I've been working with them for like 18 months I still don't know how they do it like we have a conversation I ask something about them like hey can we do this and then they're like we have to we have to write some proofs and like you know like we have to should do some math in order for me to to to answer this question if that's possible or not and that always blows my mind um yeah absolutely I and I love that angle for everything you've done too you've been so collaborative at every step and even though Elixir is like kind of a oneman language in the sense you've tried to keep it simple and focused so you can understand everything in it you've recognized that for this to be something greater you have to pull people in from all of these different places and it yeah it's such a really cool opportunity and I yeah thank you for what you've contributed not just to like elixir but to the software Dev space as a whole you're welcome yeah yeah so I think we've mostly covered the type system stuff I will say that the strong arrows thing is taking a bit to click for me I watched the talk twice and I'm going to watch it again you've by discussing these different angles and the uniqueness of of the erlang side is starting to click a bit more for me and I would highly recommend anybody watching this after watching this go watch that talk maybe come back and watch this again after and then maybe go watch the talk a few days later because it takes a bit for a lot of these crazier Concepts to to register and obviously like it has for our guest and even if it hasn't for me yet it's it's starting to and I'm feeling these pieces line up in my brain but I really do need to play with it yeah yeah and and and there is just uh some other uh something else that I think it's worth saying is uh that if you're going to use that exer type system later right you don't have to know about this stuff right it's uh as I said like that's how the sausage is made the hope is that uh this has been like a huge Learning Journey for me and the hope is that uh I I can explain right like uh like when you have to use it you don't have to know how it works and the thing that you have to know how it works I can explain it like explainability has always been like there were like many ideas that I like sometimes I'm working on new API or on a new thing a lot of times I'm going to start with the docs and if I can't explain it I I stop because you know there is no point if I can't explain it what is the point of of any abstraction of anything that I'm working on so there's a lot about how things work internally but the hope is that uh when you're going to use it if you just want to use it right if alexir is at a place where you you are being forced to write Elixir it was not your choice you won't have to worry about all that yep I mean that was my experience using the language thus far I didn't know anything about monads or functions and like these core Primitives that we were working with but Elixir made me fast as hell and I think that a lot of that's your approach here both the the fact that you feel like you need to understand not just enough of how a piece works but understand it well enough to explain it I think that depth to your understanding is a big part of why the language feels so digestible because you want to make sure the language can be treated by people like me that same way you treat beam where you need to know every detail how can you make it as easy as possible for somebody like me to know every detail of Elixir maybe not how it works but that it works so that I can build productively and learn the whole language as I do it the the important parts I need to be able to to to explain to them I need to be able to digest them and have and fit them in your brain right that's that's the goal absolutely and one more tangent I want to make sure we go on I don't know how long you want to stay but if you're down for one more topic I would love to talk about live view because it was one of the first moves in a direction that we're seeing the whole industry acknowledge right now and and I also want to put it on the record I'm pretty sure I was the first production user of live view because as soon as the first announcement of it came out and there was a package my manager John Wabba at twitch and I immediately added it to one of our dashboard Pages because we both hated writing JavaScript so much and this was like early 2017 like the day that the announcement happened and we were shipping it in production for one of our marathons it was broken as hell and we had to gut it but we did use it in production for multiple days really early so for those who aren't familiar with live view would you like to give us a quick tldr so uh so the quick TD is with live view you can write real time interactive uh web applications with without writing JavaScript it's all done in the server and it's done oh man I think it's going this is going to take one hour but it's done it's done like it's done beautifully in the sense where it's fast it's optimized and because of the things we're talking about like distribution you know you can have a cluster where like you know take a tweet and if you want to say if you want to show in real time like when somebody likes or retweets something you want to broadcast that to everybody it just works it just works and live view is the you know you don't need an external dependency you don't need to bring grab them K or askest or anything for messaging everything just works the the the updates they go to the clients they are like super super tiny um and yeah and one and I think I think one of the goals is that uh I'm I'm going to do a spoiler not going to do a spoiler what is it I'm going to do a teaser like so if you think like you know about how distribution was about like how we Fenix use distribution to bring operational simplicity so you don't need to have those external things and Phoenix live view it's actually um uh uh it's actually uh bringing Simplicity to the whole like front end and um and backand interaction right because you know depending what you want to do if needs to be interactive now you have to write some JavaScript code and that JavaScript code needs to figure out what is the API that is going to talk to the server are you going to render HTML are you going to render are going to have graph C are going to have a Jon API rest right like and if you can squeeze all that complexity and you just write live view your life is going to be much easier much more joyful right and the tip that I'm going to do is that I know that charism mord is working on something to do this collapsing of uh complexity in another domain and I think he's going to announce it relatively soon um so so it's very exciting to see and and and yeah I I I I don't want to be like oh such a teaser but you know it's like it's very nice to see like the how the complexity like how we keep using the be to collap collapse complexity around this but let's talk about live view yeah y so what I'm hearing is you're gon to put beam in the browser no uh that's yeah that that's that's not one uh there are people working on it uh but yeah that's not that's not the one yeah I I will comment a bit on outside of Elixir what's been going on I don't know how much you keep up on the chaos in both the react World and on Tech Twitter with all of the stuff have you heard about HTM X um I've I've I saw your video and then I checked it out uh after your video that's okay I just earned a ton of credit from the HTM X Community from that one so thank you very much for that uh I am blown away with it as a technology because it it really showcases this idea of what if the server could also Drive the interactions what if we didn't have to reach into JavaScript for those types of behaviors and experience why do I need to write JavaScript to type a post on a Twitter clone and have it appear once I press enter I shouldn't have to write code for this if I if the server can Define the UI why can't it Define the interaction and I think that all of these new technologies everything from react server components to HDMX to live view all the way back in 2017 the the core idea is server driven interactions in HTML and a big part of that is that what the implementation detail doesn't necessarily matter but this idea that the server sends HTML updates to the client after the page has loaded and HTM X is the most primitive possible version of that where you can Define in an element that this element has a specific URL that's part of your service that will allow it to update its content the javascript's already written for us by the HTM X team the same way that Elixir and or or Elixir and Phoenix's live view was JavaScript already written for me I just embed in the template but this concept of a a Transit method for the server to Define interactions is something that I really see taking over right now so I actually have a concern and uh I want to run it by you and uh you can let me know if that applies or not because there is also hot wire in rails so I'm not that familiar with htx I just took a look around it uh but I I know that my concerns will definitely apply to hot wire and um all right let me let me go ahead so here's the thing yeah here's the I think I think I I don't know I don't know I have pinpointed the concern precisely so I'm going to tell you like a little bit of his story and then you let me know it's like H so here's the thing uh the this type of sever rendered HTML I find I find sever HTML confusing because well the HTML is you know like PHP was s00 HTML like you know 20 20 years ago but like this Dynamics have a render HTML where we are generating like HTML to to change the page after it has been loaded uh it's actually it's not new this is like a you know like it's a the pendulum that swings and comeback and in 200 I'm not going to be sure about the year but about 2008 I was actually writing applications doing exactly that I would have things that I would use jQuery at the time so I would have things that say look uh we have like the the live selector in jQuery that would detect uh elements as they appear on the page so say look everything that has this attribute uh sometimes we would do the selector based on class which today we know it's bad but at the time we would do a selector based on class that say Hey when I click on this button I wanted to go to the server got some HTML and put on this element right so I was doing this like 15 years ago and the thing is that um I'm actually not very sure if that really scales not in terms of performance but in terms of maintainability because if you think about it it's really how how can I say it it's really an imperative model of thinking like if you think about it it's like well I'm saying that when I click this thing it goes to the server and change the thing on the page when I click this thing this other thing it goes and pend some element somewhere sometimes I'm going to click this thing and then or the server is going to tell me to delete something that is there right so it's really like an imperative approach to programming where you have to say what are the the what what are things are changing and the problem that we had at the time I think like it's a perfect example of of why this is problematics because like because you are like patching the page like after you click like it's very hard for you to visualize later after you click on 10 different things how your page is going to look like how those things they are going to interact and the perfect example is that you know like think of a chel list uh CH list app right and then when you render The Cho list app if you have zero too items we say the message uh you have no Cho items like you know press the button to to add one and then so the the the page is rendered with that message and then you click to add it to the item you add one and then when you click to remove it the item is removed but the message is no longer there but if you reload the page the message appears and this happens because the rendering of the page goes for one flow and adding and removing the thing goes for this other flow that is the sever and HTML so you have like two paths where those things can happen and you end up with this Divergence that leads like to to different results actually right yeah so right so we so I did this like 15 years ago and and what would happen is that like because of those inconsistencies like we would start to have bugs in our application sometimes it would even be like a silly bug like oh because when I click this button it has to change this ID somewhere here right and then maybe somebody in a branch that merged later rename that ID that thing that is clicking asking that thing to change or the server is telling that thing to change no longer exists so we're doing that and what would happen is that as the team grew like as the application was growing size it was very hard to maintain we would have silly bugs and then what would happen is that like oh we have a silly bug because this thing is happening there is a bug happening the client right so what do we need to do oh we need to add browser testing at the time we would use selenium I hope they are better to today um or at least with better user experience um a little bit we haven't made enough progress there yeah so we would add those and then those tests they run much slower and we would add more of those tests and then our test Su it went from like two minutes to 30 minutes running and and the application would just like you would it would get to a point where I would not enjoy the application and and I've ran into this like at the time like two or three different times I saw like this thing happening of like not really feeling confident about my code and how everything is going to to to to stay together you think I I I I have I have I have a solution but all of chat is agreeing with you right now I had somebody jokingly say pointing out very reason tradeoffs of htx not going to make it as a joke but like yeah you're you're very on point here there's a certain level of Disconnect between the like state of the Dom and the little bits that go back and forth from the server that make it very very easy to put yourself in a weird position and all anyone here needs to to see to know this as a thing is use GitHub the amount of weird States you can get GitHub into because it gets the wrong update or it's in a weird and the server had an update happen while you had the Page open all of these types of bugs caused the GitHub experience to be frank a little bit Jank and recently I sponsor plug I've been using graphite a lot which is a phenomenal GitHub alternative built on top of GitHub and I don't have these types of issues on it because they went hardcore single page app Direction where they're just pulling Json from the server and if that Json doesn't fit what the browser expects says hey you need to refresh the page quick and then it works how you expect it to and I think that we moved away from a lot of these problems we went in the direction of single page apps but we also widen into the gap between the server and the client and introduced a whole new category of issues communication problems with teams and all these other things like that direction didn't solve this problem either I would love to hear your solution before I tell you ours which is server components because react server components solve so much of this so well but I want to hear your thoughts yeah yeah I don't know about react server component so I want to hear more from you for for sure so but I you you you gave the solution to the problem right so so just to be clear I'm not saying like you shouldn't use servers like you shouldn't use HTM Max right like that's it's a tradeoff right and uh and you need to be aware like if you're using hmx and you are going if you feel like what I described to you you feel like you're going down this path now you can like Ring the Alarm Bells right it's like okay like we have to consider what we are doing right and on the other disclaimer is that I am generally in favor of moving stuff to the server right because the server is where our data is is where security should be and so I think like being close to your data being close to the to the server I is usually where I want to be right so how we opposition about we're we're very Pro Ser in this community okay yeah so so here's the thing here's the thing how do we solve this problem and and you said it like graphite it doesn't have this problem right because the JavaScript Community went through this we were used to build applications with jQuery and I'm sure that people build large complex applications jQuery and jQuery is the imper imperative model right it's like saying hey like go and change this thing and then react when it came out it is a declarative model instead of saying Hey I want you to go and change those things on the place they say like when you click a button you're going to change your state which you need to change anyway you always have to you know you have to change the state to rest our changes and we are going to automatically render the page for you and you are no longer like the whole concern of how the page changes it's removed from you as a developer and that's great you don't have to worry about that the whole thing is declarative the path for rendering and empty to the list and the CH list that you have after you add and remove something it's precisely the same right for me as a developer to try to understand how the page looks like I don't have to assemble the order of operations in my head it's all there right so the declarative model is the answer to this problem right and I think that's what set live view apart because when you look at live view I like to say like the best and worst way of describing live view is think it's react on the server right like live view is react on the server like the best and the worst way you can can describe because it's really not fair to what live VI does like it end UPS being very different but it gets the message there it's a declarative model when you click a button in live view it goes to the server the server Chang the state sometimes it change the database and with Pub sub that we're seeing with the messages you can notify everybody but it changes the database and say okay I'm going to I'm going to change my state and I'm going to render a new version of the page there is no patching whatsoever right you just render the new version of the page but what is really cool about live view is that because we know how your data structures are changing and we know what the page looks like we can actually figure out like exactly which parts of the page changed and send only the minimum part necess so I was talking about the Tweet right like you know uh with with the graphite case like if to if GitHub had a live counter they would probably be getting like Jon blobs from GitHub just to see how a counter of stars in a project like a bunch of Json blobs that would be a waste and then people are like okay I can have like I can write a I don't know a graph qu subscription end point to solve that problem right but with Life View it's for free you don't have to do anything you just write your your view your template you do the change and we figure out oh you just want to poop this counter we build like a very tiny payload and send that to the client we because we understand the whole thing right right so it takes a whole bunch of concerns for you and Chris likes to say like we generate payloads that would that are like sometimes they would be smaller if you were hand crafting those payloads sometimes like such is the the amount of data we sent over the wire and when you think about it like this is essential because one of the things that came with react was the virtual Dome because the react folks they realize well you know if I am r ring the page over and over again there there will be some cases uh and you know it doesn't have to be the virtual D but the idea of reactivity in general right and not rendering the whole page you realize that rendering the whole page on the client would be enough to add latency right just rendering the the data that is already on the client imagine now that you are rendering the whole page plus you are sending the whole page from like you're sending like huge chunks of H ml like from the server right so being able to send like those tiny pillows there extremely important otherwise the latency like it's very easy to find cases where the latency just goes through the roof and then somebody can say oh but what I can do is like in hot wire or this other solution I can have like this very tiny thing that I map around right and then that's again you're going back to the imperative model you are you have to splitly be saying how I need to change this place of the the page just so I can optimize and send minimal data over the wire and with live view it's all for free so that's you know that would be like get the declarative model worked on the client put it on the server and and we're on with it yeah I first off you're going to absolutely love server components I saw one comment in chat I wanted to highlight because I think it it's really telling for what's special here the comment was from Havoc it was the difference the difference is complexity or sorry the difference complexity between oh I need graphql for my API Now versus live view does it for you and just works is huge which like again this is that core idea of like do you solve a problem by wrapping the problem which is what you described there with the like old Ruby way or the rails way of doing things with hot wire or do you solve the problem at its core I think live view did a phenomenal job of that I don't know if you know this and I I I don't know if this is like a publicly known thing but if it isn't it is now the react team absolutely looked at live view quite a bit when they designed server components because as you said it was the closest thing we had to a declarative model for Dom updates from the server and in a lot of ways as you compared it with uh the virtual Dom is it kind of moved that layer to the server where now you have an abstraction where the server knowing the content of the page can send updates in a granular way and while the react model for updates right now is a little more focused on just send the update content and we can do the granular updating on the side or on our side the declarative method of the component defines Its Behavior and you have to define the relationships yourself that has stayed and the result is some of the the most maintainable code I've ever seen and that's been my experience with the new server component model is that I should TDR server components first so previously in react you have components you have a root component that mounts children that mount children and Etc until you reach the like end of your Dom tree and usually those components are going to need data so once the components have loaded they request data from a server get the content they need and then render the correct State sometimes they waterfall sometimes they don't and sometimes you can run the components on the server first so that you have a static HTML output that gets hydrated by the react code on the client where it has to rerun that same code often with a crazy hack to share data like a global disc call so that it could run the react code cross your Dom so the exact same code that ran on the server can run on the client and everything can stay synced that model sucked it was not great get serers side props had all the problems we were talking about earlier by being frank imperative where a component couldn't say what data it needs to exist if a component was defining the data it needed then that component had to run on the client and had to fetch data from a server whereas with s but if you wanted that data on the server you'd have to Define that at a route loader level and now you have no declarative relation ship between where the data is loaded and the component that needs it you just kind of have to hope the data makes it to the component that did not work it did not scale we saw huge like there was a whole Innovative like period we were trying to find better ways to do this everything from trpc having a compilation step where it could figure out all the queries it were needed to load those ahead of time re or uh Redux not Redux um relay the graphql standard try to do something similar we also had remix which was a very popular framework that moved more of the data loading to the route but gave you better patterns for accessing that data but still didn't solve this declarative problem if a component couldn't say what data it needs it had to assume the data was there and was being passed over none of these patterns really worked at scale and with the new react model it it's first off an acknowledgement that the server needs to be able to define the shape of content but also that the server doesn't need to have all of its code run again on the client in order to keep the update model what if the server could send HTML when it made sense and send JavaScript so you can update it where it makes sense too so the core of server components is that your root is no longer a component that runs on the client the root gets run on the server and wherever you have server components from there down those are serialized HTML that gets rendered by react on the client so your components no longer have to be JavaScript your component can be a prop that gets passed and just rendered out as HTML and now when you do updates you can invalidate at any point in the Dom or usually you'll revalidate the whole Dom or at a route level you'll say hey when this change occurs I need to revalidate this route and it's smart enough to know okay these are the elements that are Dynamic these are the things that could or have changed and send you down those pieces so react can update it from there and when this clicks when you have this power of server driven updates to your client and you combine it with the composability of react where a server component can mount a client component like a tab bar my favorite example is a tab bar so you have a a tab component that has tab a b and c and you pass it the a the B and the C component as children or as props with server components all three of those can be server rendered so the server defines HTML the client just gets those three HTML States and has its own client code the U state that you would write the way you normally and when you switch between the tabs it just renders a different child react doesn't care you can define a client component the way you always would that just switches which prop it's mounting but you happen to be doing this from the server so so when I click at so when tab a is loaded it the the client knows that needs only the data for tab a but when I click T tab B it's going to mount like a sub component that knows it depends on the server so it goes to the server get that thing and bring it back not quite quite you actually pass all of the HTML as props that get it gets the way it's working under the hood is it throws this all in a global sitting there waiting but when you do a render just because a server component was rendered doesn't mean it has to be visible in the Dom you can when you render that tab component with the three children in it each of those children gets rendered on the server during that first pass you could also use suspense so they get streamed in later but they don't get streamed in on interaction they're there once the interaction occurs already ready or they get streamed in when they're done but anything that your Dom needs that exists in your react virtual Dom anything that a component is being passed that's all there either at first render or is streamed in not due to a user interaction but due to the browser behaviors of HTTP streaming so you can send a skeleton you can stream in the slow components and then everything just becomes interactive and you switch between these states if you wanted to revalidate one of those you would tell the the router for your server component framework hey I need to revalidate or like refresh these components so that I have the more upto-date state but you can also just not do that and things are almost always going to be correct you just revalidate on actions and it it works so you're sending tabs a B andc on that first render and then the client lets you swap which one you're seeing cool thank you and uh can can you drive me through like how would be the the rwid flow for example imagine that you know like I want when somebody clicks the retweet button I want that to just somebody else that is looking at that tweet to see that like the the the the counter have a bump is that possible uh so on my device I see the bump or the person who happens to have it open already on their device sees the bump yeah yeah so the the problem of like I guess you well I guess we can generalize it as like pushing data can the server push data because something Chang on the server and they like hey you know this counter bumped not not the way that live view does it as part of the core like there there isn't a connection between the Dom and the server by default it doesn't like maintain a websocket or something these are all like it has HTP streaming for the initial response but everything from there is interaction based but the the thing that react leans into here is that it's their belief that the reasons you're doing these things are unique enough per application that you should build the solution for your application you should bring in a third party websocket service or add your own or go build that part in Elixir I get solve these problems yeah because they they are saying like I I I I get I get the point of view right they're saying like at that point it's like you know we at that point you need to bring your own tool because you're going to do something specific you don't want to necessarily say like oh now we have there is a a react Ser there is a react client and a react server that you need to run because those things are very integrated that's that's that's not what they're doing so I assume there's like some sort of specification of what like what somebody needs to do to render the server components yeah but react does that all for you almost always like I can't imagine somebody using the react server component like server side without also letting react handle everything on the client yeah yeah so I okay I I I'm thinking also like the opposite would it be possible for me to just crazy yeah Implement Ser components in another language in Elixir yeah yeah uh I believe theoretically yes I haven't tried myself and I haven't seen too many examples but from my current understanding that would be possible it's mostly about the serialization layer I think the weird part's going to be a lot of the the like magic of server components is that I can like call my equivalent of something like Ecto in typescript like Prisma or drizzle that's a type safe database and in my component I can await that database call and then return HTML that power with the type safety the composability and the the declarative nature of react is a huge part of what's like so powerful the other important part of server components is that they're effectively stateless by Design you could make a stateful version but I haven't seen anybody lean into that direction it's it's very much like the server takes what inputs it needs it renders this content it's almost like a better default state for your page where more content can flow in all the things that we would previously have awful loading spinner patterns and client side fetching for are now part of that initial HTTP response but everything after that point is still largely your problem and that's what live VI does better for sure is the the relationship not just from initial page load but from like every interaction from that point forward too perfect I get it thank you uh I I I think I think I have a a better grasp on it I think I think you're saying like you know it's it's a lot about the initial if I understand correctly it's a lot about the initial load of the page because before even even if you take well even if you take spas that initial load was quite problematic because you know you have to as we were saying you have to you know like set up the infrastructure get all the data in populate everything and now those problems are solved and at least from the client side you now what you need to worry about is the updates on the page because before I had to worry about everything I had to worry about the initial load and filling everything with the initial load of the page and the updates but now you're saying hey the initial load is solved now you have to worry only about the update so it's fewer things to worry about that's perfect exactly you've given up all all of the data loading concerns and all of the like does this data exist every component having like the equivalent of like goang uh like if errors is not equal to nil react was developing own equivalent of if is loading or data is null then return a loading component and that's gone which is Magic and that comes with a new level of composability of our components where a component can Define its backend needs not just as props that you pass it but as actual functionality that runs on the server so by the time that component gets to the user all of those cases are handled you're just worried about the interactions and they've added a couple nice hooks like use form status and uh use transition and uh there's a use optimistic that are how you would handle a lot of like the optimistic cases on the device the user is interacting on so if you wanted that retweet button to go up one for the user who clicked its device you could use optimistic for that value you got from the server and optimistically bump it but that's a client Behavior you define that's not a characteristic of the server which has the benefit of it ran on the client you see it as soon as you click it but as the negative of I have to Define that myself now so that's the tradeoff cool yeah yeah uh yeah very interesting and I think I think you said uh the also there is the other word that is said and I think it's like it sums up the difference between the two which is that the react server components they are stateless and live view is a stateful and that's what allows like live like to push the update over the wire because there is a no a open websocket connection between the client and the server so we can we can push updates for example and I can tell you how many times I've wanted that in my career even with like the app we're using right now ping to do this call like I built this and building this in typescript was great in a lot of ways but also sucked in a lot of ways and we've had to rely on a lot of third party services to do these types of things and then custom code you'll even notice the recording countdown in the corner it just it broke because we were doing that with a weird server update pattern it just stopped working I haven't had the time to fix it so like yeah doing these things right is hard and if I had a server with a websocket that just gave me the right content so many of these categories of problems go away cool nice I don't want to hold you too much longer especially if we going into my side of the react stuff but anything we didn't cover anything you want to bring up I appreciate the much yeah no this this has been super fun uh yeah also thanks for for having me there is one area of Elixir that I just uh briefly touched it which is have you used live book T before or no I I I watched your presentation on it yesterday and was blown away but I've not like I I left before live book was really a thing okay hold on let me should we try to show live book I think that would be cool it's the screen sharing on your end won't be great just due to bandwidth constraints but if you send me a link and can guide me through it I can show myself using it if that works [Music] um we can try let's let let's try that you want to guide me through setting this up let's do it yeah um yeah go to I yeah uh go to live book. DAV wait will I be able to see your screen yes I'm switching over so you can see that in just a sec cool switch to program output now you should be able to see beautiful yeah there is a are you on a Mac yep let me let me figure this out I'll make you through screen beautiful and there's a scroll down there's a desktop app um click there yeah and then there is a Mac app let's hope it's um yeah and meanwhile I'm going to load and I'm going to explain really uh I'm going to explain really quickly um what life book is [Music] about can can I send you like some some pieces of code and then you can paste it yeah I promise safe code oh okay can I send on the chat here on p as well chat here I won't access because the chat here is actually on my Windows PC so if I can then copy paste it to Twitch I'll do that okay yeah Twitter would be slightly I can yeah let's do that can it can it be a DM yep Twitter DM is easiest thing and I will hide my DMs when I go grab that yeah or or I can also I can if you can see it on Windows it's fine it's going to to be small pieces well no yeah let's yeah yeah it's hard for me I don't have my screen share on the window set up because I have my okay got it yeah yeah no worries yeah people are concerned I leaked the token in the URL but as far as I know that's a local host URL so that shouldn't matter right uh that's Local Host and by default we bind only true localle so that's totally fine wait wait I'm not seeing I'm not seeing your screen yeah I'm not sharing it at the moment so waiting for that dm with the code yeah no no so you you can you can run live book is it already running yep um here it is running wait I am lost I'm lost beautiful yeah so we have a bunch of simple notebooks just just create a new notebook uh on the top right yeah so so live book is a notebook it's it's a notebook environment in in in in Elixir like have you used Jupiter before I I've not been from python yeah you we should give a little so the idea is that yeah yeah so the idea is that you can write uh think about it as a mixture of IDE and a shell so you can write code but you can also add some markdown and document things so that's what it is like you think about it like for example it can be a leing document right and the cool thing about this and the reason why I want to show live book is because for me it's very exciting because usually when I'm writing a feature in Elixir I am thinking about like oh people are going to use it from an ID or from the terminal but now if I'm thinking that people are going to use Elixir from the browser we can just do a bunch of really more exciting things because I can like show a rich representation of a lot of things so to get started uh see if this DM works I will grab that quick it's going to it's maybe I should I should send a whole code uh this will be fine go screen share here is that yeah so that's a code yes you're probably familiar with this for those that who don't know Elixir what that's doing so all elixir code runs in like this tiny thing called processes and those are like lightweight execution threads like you can literally spawn a million of them so you can click a or you can press command enter to evaluate this code and what that's going to do is that it's going to yeah it created 1 million processes and it just returned right so super fast super quick quick right and uh I'm going to send you some other piece of code in here and yeah you you can put that in place yeah y uh and now just execut it so those processes uh I I know you're familiar with this so for everybody else talk away right yeah yeah so we have the spawn and what spawn does that it creates a new process that's what we used in the previous snippet right what spawn does is that it executes a process uh it starts a new process is going to run the code and those process they are all dependent like one does not like cannot affect each other the only way that they can actually do something together is by sending messages so you can see like online three we have a receive so we say look we are receiving a message and you can see like you have Mouse over and the usual like ID features so you you can rece there say we are receiving a message of shape pink color so it's I'm respecting a message that matches the shape online for and when we receive this message uh I'm going to send a pong back to the callor so then on line eight we are sending this message to the child we are sending the p pink message with myself the caller and then we wait to receive a pong and then if we receive the pong we print it worked which is the result that we see at the bottom so this is like we are spawning a process and having messages communicating right but when I'm explaining this to you like it sounds like you know I'm explaining and you have to build in your head right like the explanation for that so the cool thing about live books that like maybe there are better ways for us to explain this so uh Theo like can you click out click out of that uh click on anywhere outside of the the cell and press SP uh press what the letter the keyboard shortcut S P the letter S and the letter P package yep now type kot uh k i n o uh click to to add it y beautiful is so live book is like is this web application that t is running and uh each notebook runs on its own alixir instance we can even do distribution stuff but maybe another day right and then you can add dep penes and Kino is how we animate live book so you can click uh reconnect and set up at the top MH uh yeah and then it's going to install the dependencies right there for you and then you can execute the code again and it should work but I'm going to show you something too um yeah it appears to work yeah so what we going to do because now we have Kino and Kino can can do cool things I'm going to send you some other code this is the same code that that I sent to you the code that you're going to put this is the exact same code we had before but we wrapped it around uh we wrapped it around like this this yeah this function render sect tray so now when you evaluate it we actually print the communication diagram between those processes that's so cool and not only that like if we are talking with a remote node we would actually have the whole trace of talking to the remote node and what that does let let me give you like some other example that is um so this is another example that we can show and people can check it out did you when we're using Elixir did you already have like the task async stream uh I think it was somewhat recently introduced oh this copi as a link that's easy to fix oh no I fixed it we're good yeah yeah yeah uh we I think that you had somewhat recently given the Gen server talk so yeah we were deep on that so yeah so so here is the so here's the same code is the SE tray so in in in Elixir we have this thing called tasks so for example imagine that you are building something that needs to talk to different URLs to different services to get information maybe there are internal Services there are like three services four services in this case where you need to talk to them and get the data from them and a group and you want to do those requests in parallel because why not so in Elixir we going to use something like task or task casing stream to do that streaming of URLs and then you can use that in Elixir and and you're are like okay that's cool but then you're like how does that work behind the scenes you bring the code into Kino you put a render stack trace and you can see exactly how the messages are going through all those process and the cool thing is that in this code what I did is that I'm each task is sleeping by a random amount because that's how we we are simulate like waiting for the URL so every time you execute so if you press command enter again you're going to get like a slly different uh sect tray and um yeah this is so so yeah and and and there oh man like there are so many things I just I just want to share there is one that is really really cool but I don't think we'll be able to do it because uh well your computer is super fast so maybe maybe we can try it so go ahead this is like a maxed out M2 MacBook or M2 Max and it's not part of the Stream So if this gets bogged down it doesn't affect the content so oh nice no it's like as you are like installing things I saw like was super super fast so can you scroll down a little bit and uh so Mouse over around the middle we are going to is going to appear a little bit down down yeah can you see yeah so if you click a Elixir you can add more Elixir code if you click block you can write markdown but we have this thing yeah we prefer to type an Elixir code in there uh and it's going to execute it but we we have this thing called smart cells and the go and the thing with smart cell is that like Kino is bringing like all this amazing tooling uh so click on the smart cell smart and it has a bunch of predefined tasks and so I want you to click on the neuron Network task but I'm afraid it's going to take a long time so click on your network add and restart yeah let's do it so it's it's going to take a while okay so uh like it's it added a bunch of new dependencies and the idea with smart task with smart sales is that um you know like we have this new brand world of Kino and machine learning in Elixir and and you so you can do a bunch of things you can plot charts and so on but like an alexir developer including me we have no idea how to plot charts right we we have no idea how this works so uh we have no idea how machine learning works so the idea of smart cell is that uh it can do those tasks for you so if you have if you have a image you can try uploading there but instead of image classification let's choose another task click speech to text is my favorite you'll be able to send some audio to that computer uh yeah I'll just use the mic on it and talk yeah perfect so evaluate so click on evaluate on the on the left um right above [Music] the yeah so now that is uh fetching something that can do speech to text just say something uh I don't know if it has permission uh right now or not I don't actually know how um specifically I don't know how our handles this so I'm just going to go use Chrome for this quick oh yeah you should we need the token uh it's there oh no we lost um wait yeah the token got lost when I did that I I can save this model and reopen it let's do that I mean it saves by default right wait wait wait it it's the desktop app isn't it no no no go go back there it's a desktop app isn't it uh so you should find in your on the top right there should be something like a a live book icon uh oh yeah on like on your yeah so click would that work yep that worked it worked beautiful so you so no go to the no go to the homepage running and then running sessions click there yeah see if you can now hopefully it will ask yep allow there we go I'm going to can I rerecord that testing testing hello Elixir I hope that this works off of my laptop audio cool run it it didn't work testing testing H it got elixir on yeah but the rest Works Alexa yeah yeah yeah but but this is a tiny machine learning model uh this is like a if you get a better model you can like you can see using whisper tiny if you get a larger model it will be better at doing those things right so there you did Tio you just did machine learning with Elixir you actually you are running a machine learning speech text right and they're like okay J that this is cool right but I'm not learning anything new here but the thing about smart cell is that not only we want to show you how to do something all that is smell can do is to execute code and you can access the code so if you click on the code icon right there so uh there is a a Emoji there's a hugging face icon Y and right on top of it no not that one the one on top of it oh the code yes yes it actually shows you the code for running the machine learning model so now you can get this code you can get the parts of your code put it in your Phoenix application and then you can start doing machine learning with Phenix and receive like data from your client that is going to do a speech to text and there are like a bunch of other models so that's what I want to show I want to show like the the the smart cell right and this and this idea that now you you have like all those things that you can do with Elixir and the smart cells is like a it's like a meta programming you why as you change the smart cell as you configure it it emits different code but the code is all there for you to get reuse and put in different places um this is so cool I'm going to go on a slightly weird tangent but I I think it will resonate I think this is one of the benefits of functional programming patterns and I just call it copy paste effect where due to the nature of Elixir code having functions that require all of their context within their inputs we're able to write inline functions we're able to copy paste things from our application to a notebook back to our application a lot of these behaviors that make our code Pleasant to work with and maintain also make it Pleasant to move around and somebody in chat just pointed out like immutability is a huge part of this too absolutely and I think that we're just starting to realize the benefits of this in react there's an awesome project called a or Shaden UI it's created by an open source developer Shad cm it's a bunch of components for your react application and the reason this is interesting is it's not Library you install it's actually source code that you copy paste into your applications so if you want the alert component we look at the source code it has other pieces it's using but you can also get the source from those here too it has the installation method where you could use the C and it'll Auto add this code to your code base or you can go copy paste all of the individual components and use them directly and I really like this idea of rather than everything having to be packaged in order for us to reuse it play with it and do these other things if the code itself contains all of the context it needs why can't we just copy paste that and I think tools like this really lean into that direction in a way that excites me and I wish more things did and and regarding mutability that's a whole tangent which I'm not going there today which is uh in Jupiter notebooks one of the big issues they have is uh repr producibility because everything is stateful and that's something we tackle with Life Book there there's one last thing I want to show I promise uh how do you like the pipe operator yeah I I have a whole video about how badly I want the pipe operator in JavaScript oh okay so check so check I'm sending you some piece of code check this one out boy um but before running it you can you can start a new alixir cell you can put it on a new alixir cell before you run it I want you to comment out the last line don't run with the last line yet okay with the the dbg new Elixir paste comment out the last line yeah value yeah execute the code yeah so this is a pipeline which is like it's it's you know like we get the the the answer it's like a Unix pipeline we get the result from from the left side and we pipe it as the first argument on the right side so what that is doing is like oh we are removing the the exclamation mark we are splitting the thing then we reverse and got the first it's a bunch of transformations of the data right now imagine that for some reason this is wrong where you have really a long transformation maybe it's a data transformation working with the database right and this is wrong and you want to debug it so if you comment out the down un comment the next line uh the last line and run it yeah and what that gives you it's the pipeline and now you can play with it you can see what is the result of each step but you can also turn off particular things on the pipeline so if you turn off like trim trailing right well in this case trim trailing is not way to make a difference but uh um yeah that's an error or reverse reverse is going to change right like you get a different result and you can also reorder the things right you can also re copy the new pipeline which I'm assuming is Yeah the code with the modification yeah that's so cool yeah yeah if if you have if you have like a SQL like database around you can just like drag and drop a sqlite database and we are going to like generate things to started exploring it so like there are a whole bunch of things that we we grab one pretty quick grab whatever the sqlite part I can demo that quick yeah so um if you have any sqlite database I may have some on my machine just a random one for a demo I was working on a few days ago just drop this in do I have to drop it on the drop zone I'm assuming yeah yeah so add a file yeah just add it what you want to do uh describe site database it's going to add the packages nice and easy and then you execute it it's going to it yeah it has to install the package and it's going to yeah and it's you know it's already going to yeah so that's like the describe of the columns right and now what you can do is that you can go to the smart cell and say that you want to write a SQL query and um in this exis cell or make a new cell no a new cell so go on the smart say you want to write a you have to scroll before I'm sorry it's fine I know I know JavaScript and CSS are hard that's our job SQL query yeah yeah and now it already figure out the connection can say oh I want to car the post table right and there you go you're already quaring your databases and now if this was some data you could plot I don't think we can plot it easily uh this isn't plottable but I I can pretend it is let's I don't think it's going to work I I think it's going to say um you don't have plottable Fields let's try let's see yeah it needs to add a new package so one of the things that I want to do is like every time we add a new package it restarts the wrong time I want to work on like being able to to add a package without restarting the run time um but so for now I have to wait a little bit again so I would install things but yeah yeah it installed this one it yeah I well ID and name plot it see what going to happen time and ID can it detect that it's temporal let's try it tried yeah it it did it's I mean I wish I had better data to demo this but the fact also I could save as a PNG straight from here oh that's so op I I'm seeing these cases for this already this is really cool yeah so so that's the only the thing that would be the only thing and and you can drag drag and drop all kinds of stuff you can drag and drop an image and we are going to load a machine learning model to like classify the image you can drag and drop a file and we are going to and we are going to transcribe we're going to show you the option of transcribing the file there is there are other things but I don't I don't remember yeah well we can drag and drop a CSV file as well and it's going to convert into a data frame so that's the thing that we did not talk about but one of the things that we've been working hard for the last two years in Elixir is to bring it is bring it to the whole machine learning and data ecosystem with live book and numer Elixir and a bunch of other stuff and uh that's part of the work it's very exciting this is super hype I know you've been working really hard on all the math side of things and seeing it come together like this is dope like I might even try this out for Advent of code this year I could see it as a really useful way to just like dump data and play with it in line so yeah this is HP yeah I I was using for Advent of cold last year or two years ago I don't remember but life book was very Nathan I was like okay I want to solve Advent of cold uh in life book so I was like streaming the episodes and solving those things in life book and we would find bugs and sometimes it would be like oh this feature would be cool and then the next day we would then we would implement the feature and then the next day we would like start using the feature um yeah yeah you've always been really good about dog fooding and actually using your stuff and this just pushes it to a whole new level I I love that thank you for sharing this this was super cool yeah thanks for entertaining um you know of course the idea of exploring live book of course this is awesome I've had you for almost three hours now and I can keep going for like six this is what I do but I don't want to make you feel trapped here is there anything we haven't covered that you would like us to talk about I think we I think now we covered like pretty much um yeah the main points of course there are things that we didn't talk about like people using like nerves for doing elixir in in for like high-end embedded software we have the whole like data pipeline processing with Broadway uh there are so many things to talk about but I think we we covered um like the the main ones for sure yeah I I am proud of everything we covered I learned a whole bunch and my goal is not necessarily to cover the inner workings all these Technologies more to showcase the philosophy around it and the people who made it possible and with my goals for this interview absolutely this is one of the best interviews I've done by my own metrics I'm really proud of how we're able to cover all these things that I'm nerdy about in my experience with it in the context of the person who made it all and yeah my own understanding of how you got here is fundamentally different than it was when I entered this interview so I'm I'm hyped thank you so much man like I genuinely really appreciate it yeah thank thanks again for for for having me I had uh plenty of fun and yeah have a have a have a good one and see you next time you as well I just dropped Jose or I need to get better pronunciation uh what was it once more the correct pronunciation uh Jose Jose thank you so much Jose for coming by and doing this awesome interview if anybody isn't already following him on Twitter what the hell why are you here if you're not come on fix that I just dropped his link to Twitter in the chat on Twitch I'll go drop it on the YouTube chat quick now as well and yeah thank you again so much for taking the time I am probably going to keep live streaming so we have a lot to talk about there's a lot of news that dropped last few days but again appreciate it a ton thank you so much man thank you have a have a good one bye as well peace man let's kill the guest View perfect we did it y'all that was dope um yeah I'm proud of that one I thank you all for hanging out for that I know it's not what we usually talk about here I know it's very different from our usual webd typescript [ __ ] posting but Jose's what or Jose is one of my heroes and getting to have that opportunity was just [ __ ] dope So yeah thank you all for hanging out for that we have a lot of other things we need to talk about though so let me quickly mark this as pre usual marker end of say [Music] interview we don't have as much




## My Favorite State Manager Is...URLs_ - 20231108
we've all had to deal with State Management problems in our applications at some point or another it's a common joke that State's one of the few hard problems we actually deal with with applications and that's why I'm confused why we keep making it harder by not using the best state manager the browser gives us the URL I know when I was at twitch I was using the URL for State all over the place maybe not so much in the public facing twitch stuff but internally for things like our admin panel when people would write really complex search queries to go through chat logs reports and stuff like that putting that all in the URL prams made like significantly easier not just cuz we had one Global place for that state to be stored more importantly you could now copy paste those URLs and share them with other members of the team so it was way easier to document share and reproduce specific states of the page it became clear very quickly for us internally at twitch that the URL bar was an underappreciated part of the react State Management ecosystem and life cycle we wanted to use it more and more thankfully it seems like more react devs are starting to notice the benefits of this too and I want to showcase a few of these examples and other developers who are recognizing the benefits of using URL in query programs in particular for storing more and more of your Global State we should definitely start with this tweet from ler Rob that made all of this discourse happen I haven't actually watched the video yet so I've been reading a lot of questions on the next year subreddit and Discord asking about State Management and what you should or should not do so I want to show a quick example here with nextjs Commerce that we recently rebuilt with the app router I want to show how you can take advantage of the URL to store state so for example on this e-commerce page I have here if I change the color of the shirt let's say I want a black shirt and I want it in a size small both of these are then reflected in the URL so this is what I was saying before where it's really valuable to put that in the URL not just because it's like a global or it's easy specifically because it makes the URL more you don't know how to put it other than it gives the URL enough context to be shared more meaningfully since he made these changes now if he copy paste this URL and sends it to somebody like in a chat room or something is going to link not just to the right place but to the right substate from that place state for this page we can even do that for the images as well too another example of this is the search page so if for example I search for mug you can see that it's persisted in the URL with the query equals mug I can refresh the page I can navigate back and see all my products I could even filter these on the side and have that updated in the URL and again it still works when I refresh and actually if we go take a look at the code the programming model is probably easier than what you expected so for search here we have an input and it takes a default value from search prams the use search prams hook in nextjs and we get the query value here and then when you change something in the search or when you submit the search it just Triggers on submit in this form and that calls this function so this function is going to get the value it's going to create a new search prams object with that value if the prams already exist well we can just set it with the new search prams otherwise delete that query and then push the new value of SL search plus whatever the prams are and navigate to that route relatively simple you make the change it appends it to the query prams in the URL that solution isn't the most typ safe and if you wanted things like numbers in there it's not going to help a whole lot but it's really good overall and there was also a missing key in the example that had to be added in order to make sure that the input renders correctly but uh yeah I think it's much nicer to use some type of wrapper that gives you better access ideally typesafe access to query prams so that you don't have to do all of that work to translate to and from the URL bar overall really nice to see people exposing URL State and using it properly for these types of things I still think the DX can be better and Tanner is working really hard on this search pram patterns I see in apps that use them for anything remotely serious are so busted they have render side effects inconsistent inlined defaults flat and zero dependencies imperative or delayed configuration manual restoration defaults and fallback with tan stack router he's looking to solve all of these things with like good type safety declarative defaults which is actually really nice to guarantee you always will have a value of some form schema driven type safety so you actually Define what the page can take and what contents the URL prams can handle and it will handle all of that it also serializes and handles the input and output of things in query prams much better too and you can serialize things you wouldn't normally be able to like a date time you'll assume I really care what the data loading aspect yeah it's not his favorite part he's much more interested in building a typesafe router that has like good autocomplete and all the other behaviors the data loading is something he feels stuck doing because it's an expectation now good stuff there's a couple other libraries that make it really easy to interface with the query pram you can even write your own custom hooks for it not necessary I think the more important thing isn't how you implement it it it's why you're implementing it and the system to decide which state you're putting in the URL versus not the general rule I use for making the decision is around user behaviors if I would want the state that the page is in to still be there when I refresh or more importantly I want that state to still be there when I copy paste the URL and send it to somebody else then it almost certainly belongs in the query prams if I wouldn't want that like my expectation as a user would be that a refresh would change the content of the page like if I had a calculator app and I refreshed I'm not expecting the same number to still be in the input box there but if I'm on a e-commerce site and I picked a color for the shirt I probably am expecting the color of the shirt still going to be selected and using those expectations we have as users to decide what goes in the query prams versus what goes in Ed State that's when I find you get the clearest insight for where your state should go and when you're using the query prams for State you get a lot of really nice benefits from better server rendering patterns to Reliable URL sharing to True Global access to that data across your web application I think query prams are an incredibly underrated part of modern web dev and it's really cool seeing developers like ler Rob and like Tanner pushing for us to use them more and better in the applications that we built what about you do you use Query prams for things what are your thoughts on using this type of stuff for state if you want to learn more about my thoughts on State and react as a whole I'll pin a video about that in the corner there and if you're not interested in that you've already seen it there's a video YouTube thinks you're going to like right below it so check those out if you haven't already thank you guys as always peace Nars




## My Final Flutter Video - 20230816
you triggered me people keep asking me about building apps in video game engines I said I wouldn't talk about flutter anymore but I want to put this one down for good stop writing your apps and game engines let's talk about what I mean here and think through what an app even is because I feel like most of the time people talk about flutter they're failing to understand what flutter is what problems it solves and what an application even is in the first place I'm trying to Define this as a spectrum the way I think about this is left to right here we have doesn't need native stuff and on the right we have does the native stuff think cameras accelerometers push notifications all the native features that your phone or whatever platform offers to the developer so if you're just making a checkout for your Amazon grocery app if I don't need many of these native features if any at all but if you are making a camera app or an AR app probably need a lot more of these features from bottom to top we have the video game Spectrum where on the bottom here it's no animation everything's static but on the top here everything is animated you're writing custom animation Logic for individual details to make a really good interactive experience probably video game one interesting project that to start with the project yeah every application can be put somewhere on this chart if we take something like Pokemon go for example it's an interesting spot because Pokemon go is very animated interactive it's a literal video game but it also needs a lot of native stuff because it has so many Native features built in like using the accelerometer for figuring out what Pokemon you're looking at all the fancy AR stuff the GPS stuff the push notifications there's a lot going on in Pokemon go that is native characteristics that are necessary for the application to be a good experience as such there's a lot of work that has to be done for the developers to build good Integrations with that native layer but they also have to build in a game engine if they want the animations and overall experience to be good at all as such I'm going to define a line here to make it a little easier to reason about these things I'm going to call this the game engine Line This is the line where the thing you're making is animated enough that using an engine like Unity makes sense there's between something like unity in a native platform like kotlin or Swift or even react native itself use the native Primitives that the phone or whatever device is already providing Apple provides a button in iOS that handles all the accessibility all of the screen reading stuff all of the weird behaviors and touchability from different ways you can use an iPhone app and their buttons are pretty good I know I click them all the time every day Apple's button primitive is probably something we should use when we're building a phone app that has buttons and interactive features but if we're mostly focused on the environment itself the animated 3D experience then Apple's stuff doesn't help us a whole lot we don't get much benefit from Apple having a really good screen readable button if I need to render that button on a sign in a 3D world that I can walk up to and click and that difference of the platform and the the place the user experience lives being fundamentally different from the platform Apple built that is where game engines come in they say screw all of your native stuff we're not using any of that we're going to use the processor though and we're going to build our own rendering layer our own engine for making things appear and disappear it means it takes longer for these things to spin up but it also means you can do much more just why a game like fortnite could never be written in react native or native code and it's why unity and Unreal Engine have found the success they found by being a really good way for any developer to build a video game experience in an engine that could run against many different platforms somebody thought that was a good idea for applications and this is where flutter gets interesting the thing I feel like many people miss about flutter is that it's not a native platform react native renders native button it renders a native video player if you're under a video player it renders native things and calls native code flutter avoids doing that as much as it possibly can flutter is kind of like a web browser or game engine for your apps which means if you want one of those little toast notifications like the pop-up that iOS gives you that says hey are you sure about this yes or no flutter can't let you do that so instead of giving you an actual iOS feature they literally take screenshots and stills of all of the different iOS features and bake them into the app bundle so that when you render on iOS it will take that screenshot and overlay text on it and the result is that every flutter app has this terrible uncanny valley experience you you can feel it when you use a flutter app there are lots of simple Silly Ways to check like if you use two fingers to scroll and flutter it Scrolls twice as fast because they didn't Implement their scroll layer correctly just stupid like that it is the defining characteristic of flutter you're throwing away the entire native platform in the Decades of hard work hundreds of thousands of developers have put into improving that native platform because you think your game engine is a better experience so who is flutter actually for I am going to show you guys where I think flutter's sweet spot is I think there's a very thin space in this area here where if the application You're Building isn't quite a game but it's defining characteristics are the animations like an animation framework flutter can make a lot of sense revive is the new animation platform built with the goal of making performant animations easy to build and because they're trying to make an animation layer that runs on every platform for these like cute graphic type animations with minimal interactions flutter makes a lot lot of sense for these types of cute things if you want to add a quick animation to an existing thing funny enough they're not actually using flutter in the runtime that you ship if you use it but they're like a stripped down Dart based alternative that they're working on but their actual editor experience is all based on flutter and I think this is that rare sweet spot where flutter actually makes sense because the defining characteristic of this app isn't the interface it's the interop between the interface and this animation framework I was actually really surprised when I saw this project it shocked me as though like oh wow somebody found a real use for flutter finally but I cannot imagine anything above this line that isn't better suited to use a real game engine and I certainly cannot imagine anything below this line that is better suited to not or that isn't better suited to use something like react native and if we Define this like more split or like here we'll say at this point and I don't want to define the specific features where these lines get crossed but let's say from here at any point past this is web is fine but let's say you have a mobile website it's pretty good it's doing everything you need but now you need push notifications or you have users that specifically have the habit of checking an application you want to quickly build an app for them I don't think rushing to react native and certainly not rushing to flutter is the right call here I think there's a lot of space I'd argue almost to like here where web rappers are fine we can argue where this line goes it's all subjective and I don't really care to argue it the goal of this line is specifically to highlight that there's an area here where you have one or two features that aren't capable that aren't possible from the web that you need to have a good experience for your users I think this sweet spot here especially if you're not going too crazy with the animation stuff like this area here is very compelling for a platform like ionic the benefit of ionic is you get to write a website effectively using react opponents all the stuff you normally do and it is rendering in a web shell but it gives you access to certain native features like push notifications like the camera without leaving the web platform so you still get all your usual CSS all the usual things it's not a native app like anything before this line is really isn't going going to be a native app if it's ideal but at a certain point You're Building enough native stuff that it becomes irresponsible to not make the move thankfully the vast vast majority of what is doable on Native platforms is doable through react native so I'll call this the react native line the goal of this line is to highlight that there's a huge area here where your functionality for your application might be more complex than what I put this the needs of your application might require things that aren't part of ionic's layer or web wrappers let's say you're building an alternative Spotify or apple music listening experience on Native you need to call the native sdks to play those things ionic might have some bindings for that but it's way easier to work with a platform like react native that gives you a much stronger binding layer and also as a community with hundreds upon hundreds of packages that interrupt with those native layers so powerfully one of the biggest things that one of the biggest things I feel like doesn't get enough attention in the react native world is not quite react native it's the insane amount of packages that Expo has published to make reacting native development easier all of these are native bindings to both IOS and Android and often other platforms as well where here like Expo font lets you load third-party fonts in your native app using the native platform Expo file system lets you access the native file system directly Expo Dev menu is more for like Dev stuff Expo crypto lets you do encryption using the native encryption and cryptography layers on both platforms Expo context gives you direct access to contacts these aren't things that are rendering in JavaScript these are very specifically native Bindings that you call in JavaScript and then you use to call things JavaScript isn't used JavaScript isn't used to render things or do things in react native it's used to tell the native Parts what to do so the Expo image picker would tell or the actual image picker for example will tell the native layer hey open the native image picker and then when the native image picker is done picking it sends the JavaScript that says oh hey we have images now we should do something with them we're going to send this to the native render layer to show you the images all react native really does is tells the native layer what to put where it's not that big of an abstraction and more and more calling things from native in react native is getting easier they're doing some really crazy work with the bridge between the two to effectively let you write Swift Code and then call it in JavaScript with almost no latency if you do the same thing in flutter you're going to be Reinventing a lot of the patterns like the equivalent image picker in flutter doesn't use the native image picker it renders its own chaotic like weird flutter thing that is side loading the images that it read from FS to try and render its own alternative view whatever flutter offers UI that is similar to the native platform it is explicitly not using the native platform they are effectively and it says before screenshotting the native features ripping out the identifiable elements and then running text like generation on top to make it look close enough to real it's not a real application platform and it is not a native platform the most insulting thing for me is that the people who complain about react native and chill flutter complain about react native for problems that only exist in flutter flutter is not a native platform people are mad at react native because it's running code that isn't native on the platform so they just abstract the whole platform away entirely makes no sense the fast vast majority of people who regularly shill flutter in my replies and in my community are just doing it because it's the thing they picked and when I ask them to justify it they say well it's cross-platform like okay and one of those platforms barely even works do you know the state of iOS flutter right now do y'all understand how awful the animation layer currently is in flutter for iOS did you see the Jank there are you joking this has been the case since iOS moved to metal as the default engine and the issue for this as far as I know is still open Yep this is still broken and we have been promised a solution now you have to use flutter's engine if you're using flutter if there was a bug like this in react native you can just drop react native and write it in Native and just call the native thing Slaughter makes that nearly impossible because they're so far abstracted from the platform it's Insanity we're not even talking about the website we haven't even talked about code push like two of the biggest features features that make react native powerful which is the interop of mindset between web and mobile and theoretically the entrop of code as well not the biggest fan of react data for web but it's a decent enough solution people have shipped really cool things with it but also when you're trying to actually ship updates to your application the abstraction that react native gives you lets you ship a fresh JavaScript bundle that triggers different native code without having to go through the App Store obviously if you ship new features this way Apple's going to block you but if you use this for bug fixes and small changes they don't matter that much you are no longer blocked by the App Store on every single small thing you need to do for your users and dumb stuff like having a an April Fool's Day theme or like a random like 4th of July type theme or whatever the hell you want to do for a one-off feature you book this event and you want to pin it to the top of your app you can now do that with code push and with over-the-air updates trivially in react native land it is such a huge advantage to just throw away I don't know why you would do it the reason I hate talking about flutter is all of these things are objectively true and every time I argue about flutter somebody picks a random one of these things to get really Huffy about and find some Edge case about and I'm like okay but what about the other two and they say oh no those don't matter we're just talking about this thing all three of these things make flutter basically unusable unless you have very very specific requirements that both aren't affected by these negatives and also benefit from having a game engine that your application runs in realistically speaking if you weren't considering Unity at some point you shouldn't be considering flutter at all and this is what kills me with flutter is people building like e-commerce apps and flutter you're hurting your users you're hurting your engineers you're hurting yourself please stop doing it yeah I just I think react native with Expo is as good as you can get for multi-platform mobile right now it's really hard to beat I've said everything I have had to say about flutter I'm tired of people picking Tech because it's the thing they like and use and they haven't thought through what the impact would be there are times I would use flutter if I was working on an animation library and there are times I would write Swift if I was working on a camera app I feel like the flutter people feel like flutter should be this entire chart and when I challenge them on that they just themselves constantly it is genuinely really really hard to have conversations about flutter because the average flutter Fanboy is a new developer which is probably my least favorite part is the people who are getting hurt the most by flutter are new devs just looking for the first horse to bet on and it really really sucks for them because they're betting on a horse that's effectively gimped from the start it really really sucks and I hope that we can be more responsible as we talk about these Technologies because I just don't think there's much room here and that there's much being built in this space and again to this day I have seen a singular application that fluttermate sounds for but when I talk to flutter Engineers their response is there is no application react native makes sense for as such I think there's a conversation to be had here shout out to Luke the one person from the flutter side that's actually been Pleasant to engage with and recognizes the state of the market and all of these failures it has also been embracing new web platform stuff to take advantage of these cool new tools sadly that is not the experience I've had with most people from the flutter side feel free to prove me wrong in the comments and reply with actual Insight on things I might not be understanding of a flutter as well as where react native makes sense in your flutter mindset but I have a feeling when we scroll down the comment section in this video is going to be a bunch of flutter Fanboys themselves saying I don't understand anything about applications so prove me wrong guys I'd love to see it this was fun as always appreciate each and every one of you even the ones who are here to post because yeah it helps the algorithm thank you guys as always stop putting your apps in game engines peace nerds




## My New Favorite Terminal Just Dropped - 20241227
I have a confession to make up until very recently I've been using the stock Mac terminal yes like the one that comes with your Mac I've tried others a long time back but never cared to switch that somewhat recently changed I went viral at the end of last year for talking about how I still use the stock terminal I did not realize how much harder I was making the lives of CLI devs after trying a bunch of different options I ended up landing on ghosty which was not particularly accessible you had to apply to get access but as of today that has stopped ghosty is now available for everyone to use and I'm going to be straight up this is probably the terminal that you need to use we'll justify it in just a sec but first a word from today's sponsor today's sponsor is blacksmith and if you hate slow builds you really need to check these guys out they take your GitHub actions and they run them twice as fast at half the cost like for real if you don't believe me go try it out you get 3,000 free minutes per month that's pretty much as much as you're getting on GitHub anyways if you want to see what these numbers look like like it's insane the amount of time it takes to build Hall of node on their workers is only 100 minutes versus 180 on set up you literally just swap the line in your build script that's it thanks again to blacksmith for sponsoring check them out today at so of. l/ blacksmith ghosty is not your typical terminal emulator I would go as far as to say there's a couple different directions terminal emulators can go in there is standards following there is flashy features and there is performance and pretty much every terminal emulator has picked which of these directions it wants to go in say something like ierm much more focused on the flashy features generally standards following but not particularly performant then you have something like the stock terminal which isn't really on here because it's not performant it doesn't follow standards and it has almost no features it's awful you have something like warp which is written in Rust so theoretically focus on performance for my experience it was not particularly fast I don't know where it falls within standard but it did not work great with things like t-u flashy features it was pretty cool for and I know something like kitty is much more focused on performance but it actually isn't super great for my experience with standards because it did not behave with t-x for me the reason that I find ghosty to be so unique is it is somehow one of the best terminals for following standards the fastest terminal period and it has what I would consider the tasteful minimal set of flashy features with a very interesting goal it's not just a terminal full of hacks for mac and Linux they're trying to make it two meaningful separate projects lib ghosty as well as a terminal app lib ghosty is the core crossplatform library that powers ghosty it's available both as a zig API and to cap API and it works today on Mac and Linux the goal is to allow a large and diverse ecosystem of terminal emulator applications to emerge ranging from dedicated applications embedded terminals such as an editors webbased terminals new terminal multiplexers and more super cool it's almost like like they're going for the chromium shell of terminal support and if this means you could get a good native terminal in something like I don't know Zed the editor super cool as of now this is not considered stable but there is a bright future for it they're apparently excited to get this working on web assembly which is both terrifying and really hype one more thing to just emphasize how performance Focus these guys are there is a terminal inspector you know like the thing you have in the browser it's even the same Hut ke command option I and from here you can see so much stuff super cool everything from the screen resolution and the grid size to what rendering and rastering engines it's using the resources it currently has access to I've never seen a terminal Expos this type of thing that deep that simply hopefully this emphasizes the mindset they're coming in with it really is hitting all three of these points in a way I've never seen a terminal try to before and that's that's why it's become my default so quickly 99% of users of software want to launch it and get to work a month ago I asked ghosty beta users to share their configs and I challenge myself to understand why they're not empty part of 1.0 has been getting to where I'm confident that 99% of users will have zero config this is a very very Noble goal and if you know me and my preference about configuring my machine go check out my old video If you haven't seen it all about how I have my setup working I like avoiding config to the best of my ability not just because it's more to maintain and deal with and configure but also because it shows that there's more alignment between me and the creator of the software if I am massively reconfiguring the software there's a decent chance that the way I use it differs from how the creators use it maybe even how the community uses it which means the likelihood that I have problems in the future is much higher but this goal especially with a terminal trying to be fast and standards compliant is bold and it's pretty damn close to being there too but just so you guys know that I'm not talking out of my ass about the performance thing the only terminal that gets any faster with the Doom fire I believe Benchmark yeah Doom fire pretty intense Benchmark ghosty is so close to being the fastest and we're talking about more than 10 times faster than the stock terminal app on Mac and as Mitchell says all of these are fine like if you're using westerm Kitty alacritty or ghosty all of these options are probably fine in terms of performance but I found ghosty to be the least the least bad by quite a bit so for those who don't know the Creator Mitchell is not some random Dev just doing this for fun he's the founder of Hashi Corp yes like the Hashi Corp like the terraform creators and maintainers and this is what he's done since because he wanted a terminal that sucked less and he certainly made one as you might guess being the creator of terraform is not something that you get no money for so Mitchell's doing okay which is why this isn't something he's to make money from in fact he actually pledged $300,000 to the zig software Foundation because he loved working with it so much for this project and wants to make sure that not only is the project of ghosty successful but all the tools and things that made it so he could build it R to he has a whole blog post reflecting on getting to 1.0 and how crazy it is that his side project trying to learn how to do Native stuff with Zig became this super hyped up terminal great read highly recommend checking this out but we need to talk about the terminal itself and why I like it so much so what's the secret sauce what makes ghosty so special well thankfully it's not that secret you can go look at it now on GitHub already at 3.4k stars up until this public release the repo has been accessible to all users but it wasn't public now it's finally true standard open source for anyone to do whatever they want to it but you'll notice some interesting things as we start scrolling through this repo here's one of the first ones 82.6% Z Zig and almost 8% Swift with a little bit of C++ and a few other things this is a zig based terminal with bindings for other things which is what the Swift stuff is for to make it run proper on Mac but the project is built with the technologies that compil to be as fast as possible while also hooking in to the native platform features to the best of your ability there's kind of two types of native there is native in terms of the CPU architecture where the code you're writing compiles natively to the Assembly Language that your chip actually processes and then there's native in the sense that the operating system in the environment that you're in has Primitives that are in it that may or may not be used when you use something like react native sure it's JavaScript and it's not compiling to C that compiles to assembly that runs on your chip natively but with react native you're not rendering in a canvas you're rendering real native elements from the platform IOS and Android have a native button and when you render a button you should render the native button native has these two different definitions and what's interesting about ghosty is it kind of hits both there's an awesome article that I highly recommend checking out I'll be sure it's in the description called ghosty is native so what first it calls out the interesting fact that native means different things in different platforms but for Linux native is also quite a bit murkier because depending on which environment you're in Native could be something entirely different gnome is much more leaning on gtk and KD is more on QD ghost currently using gtk but also can use adua apparently not as familiar with it but on Mac OS it's full in on Swift and metal there are some simple examples like here when you use tabs in ghosty they feel just like native tabs in Mac OS and you have the same shortcuts like shift command forward slash there's the proxy icon which what does this even do oh interesting you can apparently drag from the folder icon to something else or select a different folder straight from there that's actually super super convenient I didn't even know it could do that huh today I learned that's super cool again like these are native features that I didn't even know my Mac could do that they're building in it even has the triple tap lookup feature so if you want to look something up you can tap it three times and then have their little Fancy Search built-in thing secure keyboard entry this one is huge most terminals don't have this for when you're entering something sensitive like a password apparently the only ones that have it are ghosty term 2 and terminal.app which is the stock Mac terminal all of those other fancy ones we talked about earlier don't have this because they're really focused on performance they're not focused on Native platform features so even though they're native in the compiled sense they're not native in the environment they're working with in sense window restoration is particularly handy because I'm on the nightly so there's a new update every night and the window restoration brings me right back where I was that said I'll admit I have not used too many of these features I'll show you guys why in a minute the point being this article showcases how important native is both in the feature set and in the performance side and that's what makes ghosty such a great experience I've been using it a ton but you'll notice a few things that are a bit different from my ghosty setup versus everything we just saw I'm using ghosty almost empty because I'm a t-mo guy if somehow you're not already familiar with t-mo then I need to do more t-o propaganda it's a magical little tool it's the simplest terminal multiplexer I can give a long history of how I got into it the tldr is that it's a standard thing you can use in your terminal and application that lets you manage different terminal windows so I have this project I'm working on I'm going to run it but I forgot to open up my editor I could close and run the new command I could command T and open a new tab but what I prefer to do is just use my t-m hotkey percent and now I have a split here this is really nice and then if I get an error here that needs more space I can expand It Out by using plus as the hotkey I have I'm using all my t-x and all these little features are just so convenient when you get used to them you learned to navigate your terminal and it also means switching terminal apps hurts me a bit less because I'm not switching my set of hot keys in bindings and all the things that exist in the terminal I'm just using t-mo in a different shell this is both a blessing and a curse it's a blessing because I've used the exact same hotkeys for t-x on Linux and on Mac and even on Windows for about 10 years now give or take but it also means if the terminal I'm using doesn't support these features well I'm kind of screwed and I have run into that way too many times way too many times on way too many high-end fancy terminals they just don't like t-u much and I don't like terminals I don't like t-o this terminal seems more than okay with t-s that said they're builtin tab features they're built-in splits and all of that does seem really good for the people who want them is there a Hut key for it I don't even know what it would be command D oh yeah look at that I'm I'm already pressing my hot keys to switch between them and they're not working and I'm going insane how do you move up and down between them I want to I want to give it an honest go I'm G to try this it's in the file menu ah file okay that's interesting it's I would have expected it to be in window for things like that it's oh command forward back okay I see this now okay what's the better top it's not H top anymore I have the other one a btop thank you terminal too small thankfully it's a native window so I can resize it until it is the right size check that out I'm sticking with t-u because it's what I'm used to but this all seems totally usable the Hut keys are actually pretty intuitive and I might even give it a go cuz it's easy enough to do I'm just I'm so t-u brained at this point it's going to be a hard swap but yeah I don't mind the splits being dimmed honestly it's kind of nice I could run the Doom five thing because people are commenting on that and it would be cool to see the difference screen maybe too narrow I'll make the font smaller okay that's pretty nuts that's 580 FPS let's check activity monitor me it's using my terminal barely using the GPU using my CPU a decent bit but like 15% load to get over 600 FPS yeah it's going to destroy the stream quality I'm sorry twitch servers is crying bit rate drop from 40 to 5 hilarious I'll I'll cover it up the second time okay yeah let's run that but covered oh no okay it's covered now I promise you it's running very fast we're getting about 55% CPU utilization barely using 20% of my CPU total it's doing good let's compare this to the stock terminal Zig build run it's breaking really bad like that's not the bit rate it's going that slow it's not moving it claims 72 FPS but it is that is not 72 FPS that's bad that's real bad I don't even need to worry about the bit rate problem because it's just running so poorly and it's using more of my system than the previous tested it's over 100% CPU utilization right now Insanity yeah it's bad but there's a lot of other little things that I've learned to appreciate as I've played more with ghosty one of those is the config the config is pretty minimal and this is all I have I'll justify all of these window padding color background if I recall this was because it I don't need those keybinds anymore yes thank you Mitchell so for those who don't know one one Theo ISM I really like Mac's default keyboard navigation if you hold down option and you press the arrow keys it skips word by word which is really useful in basically every program and with basically everything if I take a longer command like this I can option arrow click to skip words and it's super quick to get start to finish but a ton of terminals don't actually pass that through as a Mac binding they try to do the native terminal Behavior which I don't want so I have to manually bind this to escape codes to let it have that navigation but apparently it's not needed anymore which is really cool apparently their defaults as of 1.0 awesome thank you Mitchell the window padding color God what did I do this for the extended oh yes the extended padding so if I turn this off temporarily and I reopen ghosty it has a cool feat oh does do I not not need that anymore either cool it has a cool feature where it tries to put nice padding around the things you're doing but for t-u it was not super happy with me it was on oh I remember what it was it was when the app wasn't full screen adds this little Gap now I remember yeah when I'm not full screen it tries to add a gap around things when I'm full screen it's fine but when I'm not see how it's adding this padding on the bottom in a lot of setups and probably in most setups this is a really cool feature when you're already on om my tmok like I am it just gets in the way so if I reattach here shouldn't do that anymore it looks like I didn't need it though like it's doing the same broken Behavior here that it was without that yeah not sure if I need or not anymore I just know I had some weird bugs with the padding initially and the Discord was super helpful I know there was a lot of back and forth on this default because for the types of people who don't use t-x it is a better default for the types who do it's slightly worse but the types who use t-u are also more likely to be the types to do some custom configuration so it's a weird checks and balances situation I can totally understand why you would go back and forth on that a lot I don't envy you having to make these types of decisions I like big fonts I've been liking gist mono it's been my default for a bit now and I'm totally happy with it this is the last one this is a preference and I understand why the decision was made here I personally don't like latur and they can get really really annoying sometimes if you didn't already know big Advent of cod nerd I had a a real good year this year and obviously I used typescript FN and all my usual tools like cursor to do it my terminal was ghosty and it was great except for a couple things on a couple days and one of those things was when I had to print out the Christmas tree this problem was rough you had to figure out when when all these robotss are moving around at what point do they assemble a Christmas tree and when I had liur on which is the default it did this and I wanted to die I did not realize how many of the characters I use every day have a leature dashes underscores periods this sucks this to me was just bad and it was just bad to a level that I was more than happy turning off ligatures entirely because because although in this one case it did happen to show the tree still that almost felt like luck and there are a bunch of lines that are the wrong length as a result of this apparently I haven't clarified what a ligature is a ligature is when your font combines characters the classic legure is the F and the T being combined I believe so this is the classic legure oh F and I yeah is when you combine two characters so you might be thinking why would we care we're programmers there's a lot of really good things that legat can do like an arrow if you write this it's nice for your terminal to turn that into an arrow if you write not equal it's nice for it to turn into that that said I don't know if I'm old or if this is a preference or what I don't like leur I have had them on in a bunch of things a bunch of the time and as far as I know I remember Mitchell talking about it ghost is the first terminal to natively support latur properly and it's really cool it does it's just not a feature I personally like and now that they're off again that doesn't combine that doesn't combine and my grid is a grid again apparently people want me to pull this sure do you want leur in your terminal yes I want them no but I like them or no and I hate them these are your options how do I realize it was caus by ligatures because one of the most common liur is three dots becoming ellipses see the polls going yeah lot about 30% of people want them 60% don't but it's like an even split between no but they like them and know and they hate them I'm happy I guessed that this would be the split when I created those three options but yeah that's roughly what I figured and I'm also I know I'm biasing you guys by showing you an example of it breaking something I can see the value seems really cool I just use my terminal and I use my tools in a way that expects them to not exist and it kind of breaks my brain when they do apparently fire code has has a good examples too by the way if your font doesn't support this you're screwed this is a font level feature so we can see here if you turn them on bars will get closer not equals becomes one character arrows become actual arrows you get the idea if you like it you like it if you don't you don't I'm very much the type that doesn't but of course each their own I don't like this I don't like combining the hash and the bracket like that I really don't like combining the dollar sign and the brackets either not for me there's a lot lot of little things that this does on Mac that are super super cool as mentioned before crazy compatible full x-term compatible so follows xterm standards if xterm does something we should do the same thing protocol origin compatibility the terminal that defined a protocol behaves a certain way we should follow that behavior even if it's not specified to facto standard compatibility behavior is widely accepted as the standard we should use that behavior widely accepted is generally subjective based on popular opinion and usage I like having this like how we decide about things I will say it's really nice that it comes with both a bunch of baked in nerd fonts as well as a ton of themes and I mean like a ton like every theme from the iterm 2 color schemes you can just run this command to see all the themes and test them all out this simply how cool is that I think this is the coolest yeah I'm using Vesper because a bunch of my community members really liked it and it was already in here so it's what I picked I was sad Point Mander wasn't in here cuz I love it but I get it's still a new Niche one and it's not in the source they had which was color schemes ah yeah this is the font hack I was thinking so I I knew they did something crazy with fonts I had forgotten What specifically it was huge shout out to Mitchell for hopping in here and helping me with it they rasterize a bunch of power line and nerd glyphs programmatically so that they can perfectly fit the grid super handy power line is all the fancy things like this bar and the arrows and the icons for something like this which some fonts support some don't but you can also have like back filling from a different font for it but then making sure it fits the current font and everything else not easy they pre-compile all that which is nice it just it means it's more likely to look how it's supposed to and I cannot tell you how many times I used a fast super native terminal that didn't look or behave how I expected they all kind of felt not native God I I don't want to just be harsh on warp but it was one of the weirdest experiences I've had using a terminal like warp felt this slow as hyper which was an electron based terminal ghosty just flies when I type a letter it appears when I switch things around it does them when I run things that are complex it runs them fine it's the first time I could just like set up a terminal add three variables in here and then stop thinking about it and that was after a year of thinking probably far too much about my terminal ghost is the terminal for when you're done so if you like me are tired of terminals tired of worrying about or thinking about all of these things you just want something that's good and works and you're using a Mac or you don't mind compiling it yourself on Linux ghosties the terminal you should probably be using I went on a long journey to land here I probably tried eight different terminals this year and ghosties where I think I'm going to stay I've been on it for over 6 months I don't plan on moving anytime soon but I am curious what do you guys think is this the terminal of the future or is this the final form of what we expect today to me ghosty is a almost perfect ending to the terminal Journey it feels like this is where we should settle where we're using both the native platform standards as well as the expectations of these terminal standards too but you might disagree let me know until next time peace nerds




## My Stack Is Changing - 20230406
things are changing this crazy webbed of Worlds can't stop improving for long enough to even nail down a stack if you're not already familiar I made the T3 stack at the end of 2021 as an effort to try and categorize the way that I was building felt like it had been a while since the mean stack the moon stack the lamp stack and all the things I grew up on as silly as these names and abbreviations may have been they represented more than just the tech that the names were for me they represented moments in time like a specific event and Trend that was happening the mean stack was the start of a full stack JavaScript world to me meme is just as important as node in what it enabled for the future yes we don't use the [ __ ] Express angular node stack directly anymore but those pieces have inspired so much since when I was in college I remember the mean stack happening and feeling like there was this exciting movement I could be part of and I tried and I hated angular I hated Express I did not like JavaScript much so I gave up and I went back to my comfort zone in Python land eventually moving over to Ruby and then eventually moving over to Elixir but I noticed this movement and it was something I wanted to to be part of because these big Monumental Technologies and stacks as I was hearing them called were not common in other places sadly after mean moved to myrn kinda feels like well to be frank trendy Stacks died and I missed it I feel like I missed out because I joined web dev well after myrn had burned out graphql was the hot thing and we saw everybody adopting graphql typescript and then whatever backend language usually going but I wanted to see a stack happen at the same time I had recently left twitch and was starting to build my own things I quickly realized as much as I missed back end and as much as I was loving front end that I didn't need to lean on my old back-end skills to get what I needed out of these new technologies and when I started adopting serverless and Edge compute more taking advantage of what versel next JS and cool new libraries like drpc provided it got much easier to build full stack applications without thinking about all the parts of the stack it felt like a new generation of text and I wanted to coin it I knew others who were starting to use some of the pieces but I wanted a name for when they were assembled together and I chose my own name because I'm a conceited [ __ ] which is how the T3 stack was born the t is the T in Theo and the three is the other three letters it doesn't stand for table and typescript trpc like everyone seems to think it does it's just the name I came up with because it's the tech that I used I made a video called roundest where I made an app that lets you pick which Pokemon is most round because I thought it'd be a fun way to figure out what people's perception of round was so I could use that for a product I was working on called round as a code name I had no idea what I was getting into when I did that that video is still one of the most viewed videos on my channel it's incredibly out of date which is why I filmed an updated one coming out soon but it really coined this new stack since then I've seen everybody from YouTubers to influencers on Twitter and such to job listings talking about the T3 stack making tutorials for the T3 stack and using it as a representation of a shift in full stack software Dev the T3 stack was always kind of made up because all Stacks are I didn't mean for T3 stack to be you have to use all of these parts it represented a movement away from two separate monoliths a big front end and a big back end into something that's both more modular in terms of How It's assembled but also more cohesive in terms of how the parts come together all in one full stack typescript based solution I'm so proud of what the T3 stack has enabled and how far create T3 app has pushed developer experience both inside and outside of the next JS ecosystem it's such a cool way to build but I do think it's starting to get outdated already I don't mean you shouldn't use it I certainly don't mean these Technologies are going to be thrown away or anything but due to the modular nature of the T3 stack I can't help but look at some pieces and notice that there are now better options that are more aligned with what we're trying to do and build and to keep with the original goal of the T3 stack being the best way to build a modular full stack typesafe application it only seems natural to start looking at these better options and decide when it's time to make changes to the create T3 app someone just mentioned in chat I'm honestly surprised this phrase hasn't been coined and used a bit more I'm really proud of it bleed responsibly I love bleeding edge stuff I love trying new technologies and playing with new things it's important to recognize the difference between something new that is safe and ready to be adopted versus something that could bring your whole business down while I might be really interested in a new way to fetch data on client I'm going to be much less interested in a new way to store data on a database because the data that my application thrives on is essential to my business's success I don't want to risk what I'm building on the database being changed but I'm very very down to play with new ways to fetch data and render it on client because that's not going to put my application in anywhere near as big of a risk and I can always swap things out in the future so what are the most fragile parts of the T3 stack right now and what are the things we're looking to adopt in the future let's dive in and again the T3 stock doesn't mean you use all these pieces it means that you're working with the mindset of adopting the pieces that make the most sense I would say the core things that like if you're not using them I would hesitate to call it T3 stack are typescript trpc and next JS if you're not using these things it will be a little harder for me to call it T3 stack but I get it beneath this there are like another tier of things that are pretty common like almost everything I see uses them prismas the big one Tailwind obviously and I guess authjs fits in here it's uh being used less and less and the the amount I've seen the community love the Alternatives we're playing with is huge which is so cool to see but these are like the the core T3 stack pieces there's also the infra and I I am personally much less hesitant to say something is there isn't T3 stack based on the infra but usually what we see people deploying on is versel for your Edge and Lambda functions Planet scale or Super Bass your database I particularly mean planet scale I think the features super basis building don't benefit the stack as much but the features Planet scale is building make our lives significantly easier so actually I'm gonna not put Super Bass here because I don't think it's as relevant there for cell Planet scale upstash I would say is pretty essential at this point because upstash for all the things that the next js on versel doesn't do up stash covers so like making a redis-based cache serverless Kafka super powerful and obviously all the cron stuff yes first cell now has crons but you can't do them programmatically you can only do them via like hard-coded values so if you want a cron to be created when a user does something you still got to use something like upstash and thankfully they make it very very nice to do I would say like this is the the core stuff there's also other pieces in here like uh axioms dope for vlogging and all things analytics I at this point point it's like we have to put clerk in I should also specify all five of these companies pay me now none of them paid me before I used their stuff and all of them have impressed me well before I could move on to almost anything else but honestly I would use these whether or not they were paying me and I should I could have made more money picking Alternatives and didn't because these are the things I want to deploy on so let's go into these pieces and start breaking things down what's going on and what's changing so with typescripts not much here I will say in typescript land I'm running into some more problems DX wise specifically the hell I've been running into around how do I put this my editor performance is getting bad my typescript server dies all the time in the tutorial I just did for create T3 app it died like three times in my three and a half hour recording session it's bad now it's not in the best state I am hopeful we're going to start seeing performance wins I know there's a big typescript update coming soon that's going to help a lot here but but yeah typescripts vs code server has been having some issues I'll admit trpc is some amount guilty here because it does so much inference and combined with Zod and the depth of the inference it can get uh it can get bad ts5 won't fix it but the new module stuff that they've done will make it a good bit better what I would like to see is more intelligent automatic creation of project references or ideally for Turbo repo to make it easier to project reference between package boundaries so I'm more able to lock off my trpc thing and say hey this is the state of this still have command click go to working but like segmenting the heavier things I see a lot of people saying TS reset uh it looks really cool and something I want to play with I also am thinking about tscs lens I've been using tses lint on projects more now and I love a lot of the rules some of them now that I have them feel like they should have been there all along and it's just stuff like making sure you always void out a promise if you're not awaiting it is we've found bugs we we knew where there were weird behaviors around because of the things that the tscs sent recommended rules found in our code base for us but now there's a whole separate server that's even more fragile that's crashing all the time in my editor and sometimes I'll reset the typescript server and still have an error and realize the error isn't from typescript it's from eslint and then I'll reset eslint as well and then finally it will actually show me what I'm looking at it is slow it is rough and God I I wish we could have the rules that tses lint gives me the feedback of without just wrecking my editor performance and crashing the server all the time we're likely going to rip it out of our mono repo for webhook thing because of how bad it's made the editor experience especially for my CTO when he's using his Intel MacBook because I can't convince him to upgrade to an M1 so yeah that's my thinking here TS reset seems cool my hesitation is it is so different from how a lot of typescript could just behave that I'm expecting conflicts between its expectations and the things that I'm installing and I'm not sure how I feel about such a hard Fork from the default behaviors of typescript it's a really good idea and I like that we're challenging what typescript recommends it almost feels similar to what we're doing with create T3 app in terms of how it relates to create next app in that we're proving value in a handful of things and now they are kind of brute forced to make changes and improve create next app as a result of create T3 app so I'm hopeful TS reset at the very least is a forcing function to help typescript continue to improve we're not going to be moving off of typescript anytime soon it is still by far the best solution for all of this but I am excited for a future where typescripts experience specifically around the editor performance and the crashing Smooths out enough for the strictest rule set that make typescript the least likely to have problems can also be aligned with the best developer experience of typescript that's where that's at trpc V10 is incredible if you're not already familiar with trpc V10 was a massive level up trbc V10 is incredible I have been so impressed with the experience I know I've shown it off like a thousand times but being able to command click from your client to your server while still having proper client server separation is magical and the fact that this is portable and can work with other things is so so cool I I am really happy with trpc V10 however the important thing uh react server components shake things up we'll go more into that in a bit but the role of trpc in a react server component supported code base is very different and we're gonna have to think about that a lot well I'm going to do a whole tangent about react server components in a bit so stay tuned for that what about next best way to combine react and your back end I still firmly believe this if you want to do react to the react way and have a back end regardless of how you use next JS it's one of the best ways to do that as an all-in-one solution the power of the app directory inside of pages is incredible and the new route Paradigm in the app directory is similarly powerful I think that next still makes a lot of sense as the the core of create T3 app but there is a lot of but there's going to be a lot of competition nowadays and uh yeah the there's never been a better time to consider other options things like bling enabling all Frameworks to have some of those benefits of not just having back-end code deployed in your front end but actually good co-location also like remix continues to improve solid start is dope and even if we stick with next uh app router is a lot to chew on so even from the core here we have a lot to think about and talk about we're like next.js is changing a lot and everything around it is changing a lot server components change the role of trpc entirely and typescript's been getting more problematic for me on my machine I'm not going to leave any of these things behind anytime soon but there is room to improve in all of them let's gun through the rest super quick and then I'll go on a long rant about server components so Prisma the best fall stack DX for type safe DB management I still firmly believe this there's no better way to have a file that represents what your database should look like and how you query it in your type definitions it's been a really good experience to work with as a developer however deploying it sucks because the size of the binary it chips is massive it has to form a SQL Connection in order to actually do querying and as this giant graphql binding between the native query layer and the like typescript layer that actually we use and connect through it takes a 400 millisecond cold start time and can bump it as high as like three seconds for basic queries it's rough and it's also almost certainly never gonna run well on the edge because it doesn't have a connection method that makes sense on the edge it has this giant rust binding that you have to connect through it's pretty rough on top of that it's performance in mono repos is rough getting it set up right there sucked for us especially if you're also using pnbm I think they've fixed some amount of the bugs but nowhere near enough of them we're not where we want to be here and thankfully things are improving I saw somebody mention there's now the Json feature flag I haven't looked into it to kill internal graphql bindings it seems promising I think it lets you run on the edge but I'm not sure about that it still has to make a connection somehow and I don't want to do it through the Prisma Cloud proxy because it's put in weird regions and isn't the best performance that I've seen it's actually pretty bad performance from what I've seen and honestly the the spiciest thing here is uh Planet scales database JS is undefeated database.js is very minimal in what it is it is just a method to connect to and fetch from planet scale via a SQL string so you actually have to write SQL to use database.js but it lets you fetch it from anywhere because you're fetching it through HTTP instead of through a direct database connection which means you can do this from The Edge they're also very close to having HTTP 3 support which means you can do batched queries and get back batched responses with insanely fast performance it's stupid fast I'm really hyped on what database enables however it doesn't have all the DX that Prisma includes so how do we get our type safety how do we get our good code gen I already see the name coming up y'all have been asking a bunch it's not kiesley all I want to put this here because keasley is really important and pretty close Keys leads a typesafe query Builder it doesn't know the types of your database and doesn't have a way to define a schema and update your database but it does have a really cool Syntax for querying against your database once the type definitions are made it also has different drivers they call them for connecting different database types and somebody from a community at Jacob SP actually created a database.js driver for kiesley which is super cool because it means you can use kiesley on the edge to write typesafe queries against your database super powerful I've used it for a bunch of stuff but there's something cool that we've been seeing more and more of and they just added the feature that was keeping me from looking into it drizzle orm drizzle is looking incredibly promising drizzles and orm that looks a lot closer to what Prisma does but it's all in typescript if you know SQL you know drizzle the syntax feels a lot more like SQL when you're actually writing it but the way you define things like the PG table and all this this all exists in typescript so you have a typescript file where you define your model and then you can use their drizzle migrations helper to actually generate migrations based on the output of this to synchronize your database and get that in the right State and then you can actually query like awaitdb.select ID name City from users left join cities equal user City ID cities.id so you have to import a lot of these helpers which might not be the best thing but it's so much better than having to deal with all of the baggage and code gen and everything else the result type here though is correct even with this crazy join going on which is so dope to see I have been very impressed with what this enables and the quality of the type definitions that you get in and out when you work with it it also has a binding for database.js and the new feature that I was waiting for database push for those who don't know I don't love migrations I'll pin a video here and put in the description for those who haven't seen my video about why I don't like database migrations generally speaking migration especially if you do migrating things like renames and removes and moves tend to not be backwards compatible on top of that you need to be very careful about when deploys happen and the relationship between the deployed changes and your actual runtime environment is and just keep everything in sync sucks ideally a migration should only be able to add or remove and ideally the history of when those ads and removes happen should exist entirely within my code base because I have the diff on the file I don't need to save the history of things changing in two places when I already have it in my commit history it was something like Planet scale and their deploy request system it's much easier to just destroy the database and replace it with the state that you're looking for and then merge the schema changes to your deployed environment as such I don't like generating migrations and running them it's a bad experience for the stuff that we're doing because of that I use DB push a lot in Prisma and was not interested in using drizzle until I could have a DB push feature and I was really impressed with how quickly they shipped drizzle kit push right now it's only for MySQL which makes sense because it's mostly being used by Planet scale customers feature still in testing process together with adding more or CLI warnings suggestions drizzle kit push is available to use now though really pumped this is available I know somebody in YouTube chat asked if drizzle supports [ __ ] absolutely [ __ ] not it's for SQL it's a SQL database dialect it shouldn't support other things it should support SQL because it's for SQL I'm still a little upset that Prisma supports all the things it does because it doesn't need to support most of them it is enabling bad decisions when you support things that shouldn't be supported so I'm hyped on drizzle I plan on playing with it much more I can see it as possibly being the thing that kills Prisma been waiting for a long time fingers crossed we can finally start using it cool Tailwind probably not going anywhere Talent is pretty dope if you didn't already know Tailwind I was incredibly skeptical of before I used it and became a very strong Fanboy after I started using it heavily it's been an incredible experience I see people asking about random like vaporware databases that do that aren't real standards I don't care like I'm not into like post sequel Solutions SQL is fine I just want good DX on top of SQL remember lead responsibly I I'm not going to bleed responsibly on a weird startup that's data standards aren't compliant with the rest of the world just it makes no sense if I can't reliably like PG dump or MySQL dump and throw it somewhere else I don't trust you cool so tail end probably not going anywhere I did want to highlight one cool thing I brought it up earlier Chad has been working on some very cool stuff with his UI package the cool thing about Chad's UI stuff is that it's not your traditional npm install it's a bunch of example components using tailwind and Radix UI and I could see us using some of these examples inside of our code base case and actually recommending them as default paths inside of create T3 app been very impressed with what's going on here this is an example with this fancy modal with all of the handle like with all the accessibility stuff handled correctly through Radix but you don't install the package you go and copy paste the code into your code base which I love I don't want to install a package that has a button that works a specific way I want to have examples of ways things can work and source code that I can update and make changes to it doesn't animate out eh I don't necessarily care if it animates out or not I think it's nice having a go away immediately personally honestly but uh yeah since this is just the code you can make it animate out yourself you have the source to do whatever you want to he's not giving us a component he's giving us source code so that we can make whatever component we want to make very very helpful I have been super impressed yeah here's the code that you actually have to copy paste into your project to use it why is this better than title wind UI or headless UI so tail and UI is paid this is free still love tail and UI and recommend it heavily if you have the money to spare and you want to support the core Tailwind team but this is a very good free alternative to Tailwind UI I will also say that Radix UI is in a much better State than headless UI in terms of the like the Headless component Library Radix was just first and has been battle tested by many for half a decade now and this is the the Radix based alternative to Tailwind UI I love this I've been at about Flow by like a hundred times now and I have no idea what it is so I just want to know what it is so I can [ __ ] on it components on top of Tailwind oh no this is the same thing never mind uh my concern here is that this seems to just give you HTML but I need much more than HTML I need JavaScript on a lot of these well give react examples for any of these nope it's just HTML or all of them just HTML because it's still like a good starting point flow bite react bindings in the works cool well well that's a thing that'll be cool to see a little more sketched out or sketched out about like how they're going to make money and such like pro version like I don't know who these guys are I don't want to pay them when I could pay the Tailwind team directly and uh shad's package is open source and I actually I don't know if it's publicly announced where he's working now so I can't say just yet until somebody's confirmed that for me but I know where he's making his money and it's a much safer place and I'm confident this will stay open source and it just it makes a lot of sense so I like Shad CNS UI stuff is dope I'm not interested in Uno CSS and a lot of the other like Tailwind syntax things none of them solve problems that I have like Tailwinds compiler is really good and gives me good results both in Dev and in production I have no reason to use something else especially if I can't get the cool superpowers like the auto sort which is insanely powerful yeah tailwind's in a really good spot I don't see us changing this ever off JS here is the the final of the core pieces so what's going on with auth Js previously next off still by far the best self hosted option move itself hosting kind of sucks and this is the harsh reality here self-hosting auth sucks it's awesome that it's as easy as it is with off JS and if you want to have a fully modular stack where you own every piece optjs is still the best solution for that I've personally started getting tired of it because I have things that alt JS doesn't make easy like I want preview environments to work with oauth so I can sign in with oauth and have like a good preview experience when I sign in on a PR build I also want mobile next stop and off JS have no real Mobile support right now so you'll be rolling your own effectively from scratch and I haven't seen a good implementation of that still clerk has most of that handled and then some Clark also has all of the providers pre-baked with keys so you don't have to make a new sign in key and a new callback URL for every single service you want to test in you can use their keys during Dev and then switch them to your keys when you're ready to ship in production clerks then a much better experience for me so I've been recommending Clerk clerk isn't in create T3 app for a couple reasons the first one is I really want to keep the core of create T3 app all open source self-hostable Technologies to stay within the spirit of the modular approach and also they pay us and I'm careful about crossing the line where the people who are sponsoring the channel get positions high up in our recommendations so being careful about how we go about this but I definitely see a future where clerk is much easier to like run a command and have be part of create T3 app or a plug-in system that makes it easier to adopt clerk when you already have crate D3 app setup that said I have a video coming out soon where I use create T3 app and Clerk and it was like four lines of code to add it it wasn't a big deal at all but I would love a future where Clark's integration is as simple as nextos integration in that you click a button or enter a command and it is added correctly to your code base so we are investigating this further I think that's it for these things mono repos how do I want to put this turbo is a massive win and it really is like turbo Turbo repo and turbo pack both are going to be essential in keeping the developer experience of these tools good especially as your application scale and you have bigger teams bigger like chains of dependencies you have applications that have packets being consumed by like 15 things there's a lot of potential wins coming from the turbo ecosystem turbo is a massive win and X is dope too the main benefit of turbos ecosystems both turbo repo and turbo pack is the granularity of the caching turbo doesn't redo work you don't need to redo so if a package wasn't touched and its dependencies weren't touched it doesn't need to recheck the types and recompile the output it can use the cached one if you're in a code base like a nexjs code base that's using turbo pack it will only have to recompile the files that have been changed rather than all of the files whenever A Change Is made these powers are what make turbo pack and turbo repo so useful as your code base's scale because you'll never actually have to work at the scale of the code base unless something that everything depends on has changed ideally that will almost never happen and the result is your your updates are only dependent on the things that have been changed very excited for where these things are going I would love a future where we adopt turbo as like a main recommended path in create T3 app but my concern is that it's not an abstraction everyone needs and it does visually make things a little more complex when you're first starting with create T3 app and I don't want to fill your code base with a bunch of things that you might not understand when you're trying to just do a better create next app in it I could see a future where we offer a monorepo option when you're getting started with create T3 app but it's not necessarily the main direction we want to recommend as the default we also have create T3 turbo already which is a fantastic repo that was originally created by Julius there's quite a few contributors to it now not as much as create T3 app but the goal of create T3 turbo is very specifically to show you how you you can do a turbo repo with create D3 app with a separate mobile app and web app that share backend code obviously this doesn't have next auth or authjs in it because if it did it wouldn't work on mobile but there is actually a fork that is run by clerk crazy3 turbo clerk is a fork that is maintained by James who I saw is in chat here I'll link this in chat for people who don't already have it which is super powerful because it's crate T3 turbo with the addition of clerk for auth so you set up an account on clerk you go swap out the environment variables and now you can deploy your mobile app and your web app with the same back end and same auth system I already have a video about this as well as does jabes so there's a bunch of context on how to use the stack it's in a really cool place I love it I'm not sure what the role of this is yet in the whole create T3 app ecosystem but it is a thing I'm thinking a lot about so that's pretty much everything out on the table in terms of what we've been looking at and thinking about we're not leaving next.js anytime soon we're probably not going to make most of these changes defaults but the big thing that I've been dancing around because it's scary to talk about they are a c question what do we do about server components so this has been tough for me I was very skeptical of server components and to some degree I still am server components for those who aren't familiar are a method in react of running your component on the server in a traditional react application you have your react bundle of JavaScript code that gets sent down to the client usually with an empty HTML page and the client downloads that JavaScript runs it figures out what needs to actually be on the page and then generates that page on the client for the user it might additionally fetch data and do other things but generally you get an empty HTML page and then react on the client will render the page this is called a single page app it's been the the standard since react started getting popular it's have something like twitch still runs to this day this isn't ideal though which is why next was first made the original goal of next.js was to make it so you can take that HTML that react generates and generate it initially on the server so you always get back a complete HTML page and then the client can catch up and hydrate the page from there this came with a bunch of problems though specifically your react code runs in two places it runs Once on This server with all of the expected server constraints and then after the fact it runs again on the client but now it doesn't have access to some of the things it might have on the server so if you were awaiting some data from your database or you were like connecting to something you can't connect to one client or the opposite on client you're using AV devices from the or users like computer or browser and those don't exist on the server your code having to run in both places meant you had to be considerate of both the server runtime and the client runtime for all of your react code and that isn't a great experience it also meant we weren't getting a lot of the benefits of the server because you couldn't really run server code in components because those components had to run on the client as well so you couldn't make a DP call on a component you'd have to make an endpoint or a get server-side props function that does the back end part and then the client gets that data through any of many different methods react server components throw all of that away we're starting from scratch again we have to rethink our model because components don't run on client by default anymore in modern nexjs using App router and react server components you can await a database call and return some jsx and that code will never run on the client this is clearly a huge mental shift for a lot of people more so than I thought the reason I say that is when I go to the comment section of my most recent video about server components yeah it's gonna be around here SQL injection enthusiasts love this creating connection to the DB from the front end is not safe for obvious reasons client security you can't just let clients make arbitrary SQL queries why are you gay as you guys can see react server components are really hard for a lot of people to understand and I think it's really simple and I'll be honest it confused me more than probably should have for a little bit too react server components don't run in two places and that's what we're used to with react components they either only run on the client or they run on the client and run once on the server with react server components they only run on the server which means we have to throw away some of the baggage we have in our brains of a component is a thing that the client runs because it isn't always that also means a lot of the tools we use to get data 2 components aren't as useful as they used to be the big elephant in the room is trpc and the question that I don't have a good answer to yet is what happens to trpc post server components this is a tough question and I've been thinking a lot about it you can use trpc with server components there's a lot of cool ways you can do it I've actually played with some of them server side calls here you can make a caller in trpc this is telling you not to do it to call procedures within other procedure which makes sense but here you can create a caller for your router that allows you to make calls to trpc without having to go over HTTP which means if you already have a trpc router in your code base and all you want is to call those same functions and server components without having to go over an HTTP or boundary you can use the caller and this is effectively the same as just directly calling the function because it's running on the same machine it's just another way to call your trpc stuff without having the additional latency of a server in between and this is very very powerful there's also a pattern that I've been playing with more and more outside of server components the SSG helper that they have in Mac or for next in trpc which lets you ahead of time fetch specific things using the proxy SSG helper so here we're wait awaiting ssg.post.biid prefetch we're prefetching this post using the ID we get from the static prop definition we pass in dehydrated SSG helper as props and now on the client there isn't the loading state for this query because this query is pre-hydrated and already exists but we still have all of the invalidation patterns that exist inside of react query so if we want to update this post because you click the like button we want to update it we can hit that same query client cache and have the ability to update all of that data there is going to be some combination of all of these pieces that allows for the trpcdx we know and love to be aligned with and combined with the new caching systems that are being introduced in react server components and next to allow us to have a good experience writing and calling functions in our client components our server components and our applications that aren't necessarily either be it a different like a TV app for example where we can't use react server components or mobile app where react native for Server components isn't quite there just yet the power of what this enables is super cool but honestly you don't need this for the data fetching too often having a better reliable cache layer could be cool but I think that's going to come from next anyways what I'm more scared of is how are we going to deal with mutations there is still no mutation RFC from the react server components and next.js team I'll be honest I've seen a little bit and it looks good but it doesn't give us the wins that I'm used to from trpc specifically the validation of inputs when the server or when a user fires a query being able to validate the data in the shape of it before I even start running my function when you use Primitives like form data in traditional get and post requests with bodies you don't have a validation layer guaranteed you're writing your own validation layer for everything which means that you're blind on both sides when I post to an endpoint or run a mutation that is expecting form data I don't know the type that that expects because I'm just throwing in a pile of data I don't have a validation layer to infer the type either from so I don't have anything beyond what I roll myself for every single function to guarantee that the shape of things is what I expect on both sides and it feels like we're going to have a graphql type problem again where people start defining schemas in between their server functions and their client to make sure the relationship between this all is correct and the spicy take I don't know why like this isn't said enough and it honestly it kind of hit me like a truck when I thought of it mutations are a client-side problem server components don't run on client they're not a client-side problem server components actually take something that we've kind of unintentionally forced to be a client-side problem and get it out of the client which is dope but mutations are still very much a client-side problem and as such the react server component patterns don't help us here at all in fact they make it a bit harder because we currently rely on react context as the API to wrap our application in trigger updates when mutations happen to keep things in sync you can't do a global react context provider anymore because context breaks over server component boundaries if we wrap our app in a or in a context it's going to die as soon as it hits a server component which is going to be probably immediately because you're wrapping the top of your app with it we can't use the patterns we're used to and that sucks there will be new patterns I've already seen what some of them look like use SWR as using some of them and I'm building things on top of it right now to make it work but the current react query pattern of of context heavy updates is unrealistic in server components we're gonna have to break those off into another thing totally doable totally fine I see people saying you can wrap individual components in context and it will be shared no it won't it'll be shared from that component down but won't be shared across all of them if you have an external store that they're all synchronizing through it can if you set up your subscriptions and updates correctly but that's that's a lot of work to do and that's not realistic no it's just it's not a realistic path I see people saying what about getting data from server side hydrating it into react query and then using mutations that's what we do right now with trpc and create T3 app especially if you use the static site generation helper I showed earlier it's good but it's not the same good experience that we have with server components obviously we're gonna see endless PHP jokes that's never going to stop but I think PHP doesn't have is a cache layer if I query some data in PHP I can't really update it without refreshing the whole page all of these these new Solutions have really good ways to update their data and handle caching on the client it's so cool what server components enable and how much simpler they make developer experience for so many things I'm sold server components are the future and it is a much better way to do a lot of things in your react applications I'm nowhere near a sole of mutations yet which means there is some room here this is set and done if I was the one way I could characterize this is the spaces it exists right now there's a spectrum of I'll say data fetching and data data updating on the left side here we have like a text file in your code base Json config file and code base something a little further along would be like some value from DB oh I get crazy into updating land like the furthest along here would be like web socket Streaming new data just constantly getting updates and changing the contents of the page want to guess those updates we can have something a little more reasonable like liking uh post and triggering DB update it's a rough spectrum and I'm sure people are going to debate this endlessly but like this is one way of thinking about queries versus mutations I would argue that they're all a spectrum and it's a spectrum of how often do these things change and how much do I want to think about those changes on the client what I want to do now is draw this line like like where do the tools help us so if I go back to the OG get status or get server side props get server-side props helps us yeah I'd say right about to here when we're getting values from DB it can help us with that but if we want to update those values when something else happens in our app it doesn't actually help with any of that at all here is where gssp helps and then here is where trpc helps trpc and react query help a ton in this space here everything after the first paint when we want to start like updating things on the client like trbc and react query take over from there and generally what I've recommended is doing as little of this as possible in favor of Leaning into trpc in react query so your update layer your mutations and all of those types of things will be easier to deal with although I will say there's a point further along here where once you're updating things constantly like you can use trpc in the use subscription stuff but it doesn't have a great back and forth pattern and once you start posting through the socket as well there are better Solutions none that I'm confident enough to name but like in here I would expect some type of websocket solution we're going to ignore that not going forward because you can do it with trpc but I just wanted to point out that there's a level at which your updates are happening fast enough that you want to rethink these things so where stuff gets interesting with app router is these lines are now defined pretty differently this goes a lot further along although right now it stops basically right before this triggered update happens however there's a point here I probably should have mentioned before of post updating when a light occurs on client for me there's a line between the thing on client updating or in the thing the user triggered running on the server and these are these are different things there's a relationship between them this one is much more heavy on client and updating this one's much heavier on data fetching because this depends on how the data fetching occurred I see confusion about app router next js13 app router app router is the official term for the app directory when people keep saying next 13 what they're referring to is the app router when they say can create T3 app support next 13 we already support next 13 we have since day one the app router is the new beta feature this is the name for it that's what we're calling it app router is the thing in next 13. so the new cache primitive in next and react makes updating this when a change occurs much easier because you can invalidate the cache on a specific key they don't actually have an example in here but one of the things I know exists I've seen it in source code public is an actual like cache helper function that you wrap things with it doesn't show it in here but when you fetch you can fetch with a tag or a set of tags at any point you can revalidate a tag to update it and that cache layer the ability to trigger granular updates on client is a very important part of the workflow here and I do think next 13 supports this well enough from what I've seen what they're working on I think the actual cache updating on client side is something that next handles well and this significantly moves this line with next 13 everything in this section becomes more accessible more type safe easier to work with and just a general better experience but it also kind of widens the gap between the two it almost feels like there's a no man's land between these areas now where Bridging the Gap between this client thing that's triggered and the server cash sucks I don't know how this is going to be bridged I've seen proposals I've played with things but right now this Gap feels more present than ever I can show an example actually that's a good call I have a project I was working on obviously the tutorial project with a Mojo but I also rebuilt it inside of the new server component patterns and what we'll see here in my compose function so this file is a client file this is for a Twitter clone this is the file that actually lets you post a new tweet and I had to do a lot more in here than I would have liked the first thing is I can't use react query because of black Apprentice I could but I didn't want to roll like react query in a client component and wrap all of that and deal with all that so I did use SWR for this I had to make a create post function this is a client function I had to Define myself just to do the posting locally so it takes in a URL which is a string this is the string for what to post to and then the ARG which which is the actual message that I'm trying to post I then await fetching from the URL this Json lobbed up guy and then in the actual component I kinda had to roll my own optimistic update layer where I have the SWR mutation with the API post and point create post trigger is mutating in data trigger is how you trigger the change is mutating is the loading state for when mutation is occurring and data is the result if we get back a result I also have use transition here which is a new hook react 18 introduces to tell react hey things are changing don't update the Dom just yet though wait till these things are done so I wrap the actual changes here in a start transition I do the await for the trigger first so that I can have a different loading State before and after but since I have no way yet of granularly updating or optimistically updating my feed to just show that new post I actually have to wait for the post to be made and then do a full router refresh that will then go to the server say hey I'm assuming all my data is old give me new data please right now the server then generates the new data sends the new jsx new info knew everything that react needs to update to the client which then triggers a client-side update and after that I set the content which is like your input field to empty string so it's finally empty after the loading State what this looks like if I go to the deployed page is I post an emoji You Don't See Much happen there because that's the loading state and then it does the router refetch it still shows that there it was in a disabled state I'm not showing that visually I probably should lower the opacity or something it then goes and does all the work to post update the data on client and then finally empties this input field and shows me the changes that I made ideally it'd be way easier to do optimistic updates on the client and the patterns I've seen for this haven't been super elegant yet react query wasn't the best but I had a good experience for this before not great but good enough I think we need to re- entirely reimagine these patterns now for the experience to continue improving with this Gap getting even wider now this component has no idea about anything that's fetched prior this has no concept of what data exists on the page and can be updated in the first place so from here I can't really do anything and even the pattern for writing this mutation is sketchy because there's no type safety between things so if I go to app API post route I have a post schema which is a Zod validator and I run this odd validator but look at all of the stuff I have to do before I'm actually confident I can use the data that you passed here it's obnoxious and when we're seeing these new patterns on server components that are so much better than anything else like if I just go to the tweets homepage view here this is just a component which means it's by default of server component and in here I const rows equals awaitdb.execute and I have the data if you use Prisma here I can use anything here and I have the data if I want this to be cached I can wrap it in the cache primitive and now once that's officially out and shipped it's cached it is that simple for data fetching this level of Simplicity and elegance is not matched in updating data and mutating data yet the DX for this is so good we have to use it it just it's so much better it almost feels irresponsible to not however this is the big however it does widen the Gap both in DX and relationships between updates on client and data fetched from server and that's not something that's been bridged yet and that scares me and I don't want to prescribe next 13 app router and move us away from TR RPC until it feels like we have a really good solution for this ever widening Gap and I think we're getting there what I've been referring to this Gap as I'm talking with Dan abramov a bunch about this is the interaction boundary it's the point at which your application becomes interactive and data changes due to actions users take historically react has exclusively been an interactive framework and now it's the opposite where by default nothing is interactive you have to Define interaction boundaries but now that we're defining those boundaries ourself we have to build bridges over it and I'm a little concerned that we aren't there just yet and I think a lot of the value of the T3 stack in the future is going to be prescribing better Solutions here while next app router will be stable in the near future I am less confident that these patterns will be established in a confident enough way for us to immediately start adopting them but I am confident we'll get there and a beginning to think the role of trpc in the T3 stack here is to prove you can make an incredible bridge over this Gap I want us to build the bridge here this has been keeping me up at night recently like straight up I want to figure out how to make DX that Bridges this Gap as good as the DX of living on either side of it and we can get there I'm confident we can but we have to to really think through the relationship between the data that we fetch on the server and the actions our users take on the client and it is complex it's hard we're going to have a long fight to get there we're probably gonna make mistakes along the way it took four Renditions of react server components for there to be one that we really liked I see a debate going on in chat about but refetching everything is fine no again I'll show you the example on the version I've deployed here nice emojis if I post here I am posting all you guys see when posting now that's quite a bit of time to see an update and it was slower before too it's faster now that things are warmed up even though it's all Edge routed yeah it's scary I'm not super confident that this is a gap we can Bridge quickly but I am confident it's a thing that we can make better and good optimistic update patterns in particular as well as more granular cash and validation are one of the patterns we've grown to expect and love here that isn't really the case just yet in react server component land that said the amount of wins server components offer in terms of how we compartmentalize our code and think about the dependencies of our components like the fact that a component can have data it depends on and get that data it's just it's it's so powerful I don't want to let these types of reservations keep us from embracing these new patterns if anything I want to take these challenges and make them the strengths of what we're building in create T3 app and in this ecosystem and I think the future of the T3 stack is showing you how to do this right again could be entirely wrong about this that's what I've been thinking a lot about so let's summarize the future of the stack quick Prisma alternatives are dope I really want to get more of our compute on the edge and I think prism alternatives are going to make it way more easy to do and significantly improve the performance of applications for building on T3 stack personal serials are dope I want to ship one ASAP but we got a bit of time till we're there Tailwind next react and ts are here to stay app directory will be a fun challenge self hosting off sucks sometimes alternative Stacks I expect this to be all the rage throughout the year I'm already seeing it happen create O3 app I was O7 app nice create JD app's been around for a bit side base I'll throw a bling stack so those aren't already familiar create 07 app by automated odd is the homie he does a lot of tech for like Ludwig he did all attack for the stream reward stuff great dude he loves rust and he loves uh svelt kit but he also loves trpc and a lot of this if we talk about here so he's taken a bunch of the crate D3 app Concepts and built a rust-based CLI for svelt Kit apps which is really cool bling will change things this almost feels like it needs to be a separate video I'm gonna wait this will be a spoiler for the inevitable video I'm doing on bling in the future so I'm just gonna rant and not type for a sec the tldr on bling is it's a new syntax that has been worked on by Tanner Lindsley Ryan carniato and a bunch of the Astro and solid start team to make it easier to write server functions in your client applications bling is heavily V based the goal of bling is to make it easier to write server functions in your Veet app so you can write server dollar sign do some stuff and then call this fetch function on your client with type safety and everything behaves how you would expect it's a very powerful syntax for a consistent shared server primitive across the entire Veet ecosystem the only dependency to use this is Veet so if your stuff can use Veet you can use bling I know that uh parasocial metal learnings here and he actually made it work with a jQuery stack based on my dumb joke that you could do it so there's a bling jQuery example that's out so yeah this will technically work with everything this is the pattern that was originally introduced in a solid start I'm sure that they were inspired by a bunch of different things but the goal of the server dollar sign macro was to give you a simple syntax that a compiler could hook into and generate the right back-end files while also giving you as the developer consistent developer experience and type safety as we co-locate our code you kind of think of this as Like Remix loaders for everyone with much better syntax and consistent ways of using the data and it works great in everything from Astro to DIY V deployments with a server it's a really powerful way to access data on your applications what this reminds me of is the Veep moment when Veet first happened we saw Renaissance in JavaScript Frameworks most of the things we talk about now were in development before Veet but few of them made as much sense to adopt as they did post Veet Veet enabled us to build things like Astro like solid and solid start like all the stuff that the quick team is doing veets become this really powerful piece that does so much of the heavy lifting that it enable us to focus on the other important parts of the developer experience and performance and all the other things we need to build as JavaScript framework developers what I see here with bling is a similar building block for full stack framework building what I think Veet did for client-side JavaScript Frameworks bling does for a full stack of JavaScript Frameworks this was one of the hardest things to do before and it went from nearly impossible to roll yourself to a package you can install once this is in a nice stable State and we know more and more about what can be done with it I see a future where most things start with bling and I'm not thinking we're going to have a bunch of massive new full stack Frameworks that use bling to take over react and next I see an opportunity for us to try insane stuff using bling as a way to prototype new ideas and patterns very excited about the future of what we can see here and I do think Frameworks will be moving a lot faster once more of them have the ability to play with and use bling again this isn't my bling video this is just me touching on Blaine quick bling is the future it's gonna enable us to iterate and innovate a lot faster I think things are going to be changing super quick once playing happens so if you'll ask me about the Chad stack we're talking about real Stacks boys sorry but uh here we like to talk about software that ships




## My Tailwind Journey - 20231010
and when I started using tailwind and class names instead it was painful I talk a lot about how much I love Tailwind on this channel what I don't talk enough about is how I got here in the first place and more importantly how I actually hated Tailwind when I first saw it and started using it I don't think my experience here is particularly unique but I do think it might be insightful so I figured why not talk about my Tailwind Journey the goal of this video is less to convince you of specific implementation details of talent more to show you what it looks like to challenge your own beliefs and understandings of things and pick up new technologies that might solve problems in ways that don't initially align with your own understanding Talon made me a better developer and I think the stories worth sharing so how did I get into Tailwind initially I had somewhat recently started at a new startup and I was in charge of building the web app notably the web app not the website they had hired an external Contracting firm to build the website that website was used for the marketing the email list and eventually it was going to be used for the blog sadly that Contracting firm was no longer working with the company so the code kind of became my problem not only was this my first experience with Tailwind it was also my first experience with nexjs to be fair it's actually really cool that a Contracting firm picked next.js and Tailwind all the way back in early 2021 to solve problems for building a marketing site funny enough I was actually deep on snowpack at this point I moved to Veet when that whole moment occurred but generally speaking I was not into next yet much less into Tailwind this is a huge part of why I generally avoided working on that site and focused on the web app that I built with snowpack eventually though we wanted a Blog for that marketing site and since that Contracting firm wasn't working with us it became my problem I'm also very opinionated about blogs and typography and a lot of those things I'm not good at it but I care a lot about it and getting it right and as I started looking into how to do this with Tailwind I quickly found the package Tailwind typography and man this package blew me away before I was thinking of Talon mostly as like a bootstrap thing with worse syntax and uglier HTML but when I saw tail and typography it became clear to me that these people understand good Styles and style Solutions when I saw how good all of the blogs using tail and typography looked and how generally speaking it just kind of did the right thing I had to know more so I started playing with Helen a bit more and taking it seriously I adopted it in another project I was working on on the side that eventually became my startup thing previously I was using a bunch of crazy styled component stuff and when I started using tailwind and class names instead it was painful it took me a bit to know which class applied to which thing and reading through the docs gave me a lot of context but it didn't give me a quick solution to the problems I was having as I had them the intellisense in vs code helped but not quite as much as I needed when I discovered the Tailwind cheat sheet things started to change for me fast I already knew CSS I wasn't great at CSS I put myself at like a five or a 6 out of 10 maybe but I knew it enough to be frustrated when I couldn't find the class I needed to do the thing I wanted to do and when I had a cheat sheet that would get me there much quicker I was able to pick up the core syntax relatively fast at that point I moved back to the docks and man they were way more useful at that point on top of being good resource for how Tailwind behaves and makes decisions it was also a really insightful way for me to better my own CSS knowledge eventually I ended up buying the book refactoring UI by the Tailwind authors and man it helped me a ton with how I do styling and think of user interfaces Tailwind went from being an ugly syntax that I hated looking at and working with to one of the best Solutions I've picked up it challenged me to rethink my understanding of what good style Solutions were which to be frank a good style solution at the time was something that was really far away from my jsx because I wanted my jsx to be pure and clean in the HTML that came out to be the same but I went quickly with Tailwind is the power of co-location it wasn't just writing the component the first time that was easier it was the maintenance over time that really sold me when I went back to components that I hadn't touched for like a year plus and I could quickly find the exact thing causing the style I didn't like and make changes and adjustments really fast on top of that the prettier tail end plug-in came out and man having a reliable sort order that guarantees the class names are in a consistent like order made both code review and maintenance significantly easier I really didn't expect Tailwind to be so much more maintainable and it's weird saying it still because it seems so chaotic when you look at the HTML there are so many things you don't realize you deal with when you're working with traditional CSS or even something like SAS or styled components even something as simple as having to come up with a name for every element has resulted in chaos like the bem naming methods that are to be frank obnoxious as soon as you can remove all of that craft and not think about it you suddenly start to move a lot faster to me this kind of felt like the react moment before react the community generally believed that model view controller separation was necessary to build good maintainable user interfaces react challenge that at a core fundamental level suggesting that this abstraction was just something we made up and on the web co-location and separation of concerns should be defined by the developer in what their application needs that allowed us to move so much faster build reusable pieces and generally form the ecosystem we now have in react I really didn't think Tailwind would be the same because it was just ugly class names inside of my HTML but man I was so wrong in this regard I haven't talked about Chad UI anywhere near enough on this channel yet I'm hoping to more in the near future TL DR it's a website full of reusable components built in tailwind and Radix that you can copy paste and drop in your code base as well as using their CLI to set them up the goal is to to make something like material UI that you just mkm install and trust their components it was to give you the source code so you could change and adjust to be exactly how you need it it's so well loved that versel just hired the Creator to work on it full time at versel so cool beyond belief cool I'm genuinely hyped to see Chad's success and it shows that Tailwind isn't just another one of those weird bootstrappy libraries this also isn't meant to throw shade at bootstrap it was a very valuable solution for developers like me especially that came from back end and didn't want to think about CSS for a long time my own Journey was that of a back-end engineer begrudgingly going to front end getting good enough at styled components in modern CSS and SAS to tolerate it whenever really falling in love with it just kind of dealing with it rotating style Solutions every three to six months using tail and someone else used it not liking it at first and then ending up loving it so much that people now associate me with Tailwind in front end as a whole to be frank I don't know if I would be seen as a front-end engineer if it wasn't for Tailwind getting me so excited about building good user interfaces again I I probably owe it a lot of the reason I started doing YouTube in the first place I wanted to talk about the tools I loved and Tailwind really kicked me back into gear getting excited about something I never cared about before CSS so if you haven't tried Tailwind yet why what's your hold back I know I was holding off for quite a while and it might seem silly now because it's been two years but yeah in 2021 Talon was catching on pretty fast and I took my time with it so why haven't you given it a shot let me know why in the comments and if you want to hear more about how to find success with Tailwind early on put a video here in the corner all about it thank you guys as always hope you enjoyed my Tailwind Journey peace nerds




## My Thoughts On _Vibe Coding_ (And Prime) - 20250319
Vibe coding is the future at least according to Y combinator if you didn't already know this I'm a YC founder and generally a pretty big fan of the stuff those guys do not going to say I'm a fan of everything and I can defend all the stuff going on but generally speaking I find the big drama around YC stuff to be misunderstandings as well as the wrong content getting to the wrong people which will always cause weirdness speaking of weird I'm not going to just watch their video about it I'm going to watch Prime's reaction to it I don't know if this is going to become a main Channel video or not we're going to see how we feel as we go through it but if this does end up being a real video we have to pay my editor for the work he's about to do so let's hear a quick word from today's sponsor then we'll dive in today's sponsors a company that's doing basically everything wrong they lower their prices they give away all their code for free and they make fun of themselves constantly hell they name themselves post hog That's how little they care about running a good business so if you want to take advantage of these guys as they screw themselves you should check them out seriously though it's such a good product chances are you can get away with their free tier cuz again they keep screwing themselves and now they're paying me a person who would have Shi them for free anyways because I've been using them for 4 years you get the idea these guys are doing everything wrong but it makes it easier for me to run my channel for me to run my business and it'll probably help you out too here's the actual dashboard I use to keep track of T3 chat because post hog is the only analytics we're using to actually know what's going on there it's super easy for us to add to things like nextjs to have back-end and frontend analytics that are resilient to add blocks because I can route them through my own stuff it's so nice getting these insights when I talk to companies that aren't using post hog it's always one of two things either they're using a competitor and they're paying way too much money or they don't have these numbers and they don't know how to talk about their users because they don't know what the users are actually doing so if you're building a service with actual users check these guys out if you're building a service without actual users fix that first then check them out thank you to poog for sponsoring check them out today at soy. linkpos shout out to poor FaZe for figuring out how to turn this into a video all right we're doing it we're doing it we're doing it we're doing it Vibe coding is the future we're doing it it's Vibe coding it's like we're gonna just we're gonna watch we're gonna watch it it's like somebody dropped some like giant beanock seeds at night we woke up in the morning like what's going on I mean I think sense right now is this isn't a FB this isn't going awaye this is the dominant way to code and if you're not doing it like you might just be left behind I've always hated that statement and a very very simple reason why and you you'll get this from every last person which is this uh the exact same argument with will be made if you're not using it now you're going to be left behind you're like oh really well does that mean AI is going to be like the same here in a year and they're like no no in the next few years it's going to be so different like what you're doing now will be completely different in the next couple years and then you have to go okay wait wait wait a second so if I learn it now I have to relearn It Anyways in a couple years so in other words where do you guys think I stand on this do you think I'm on Gary's side or prime side on this disagreement where Gary thinks you're going to fall behind if you don't learn this now Prime thinks it's going to change a whole bunch anyways I am pumped you guys know me so well I am 1,00% on Prime side I have whole videos on this that nobody ever [ __ ] watches thank you to Ronin for quoting it it's good to be late I say this all the time I got into react five six years after it came out roughly halfway through react's like current life at the time it felt like it had been around forever and it was about to be replaced I got in around the same time felt 3 was happening I was very late to react I was there like I had started writing it more actively the week that hooks got announced being late isn't a bad thing it's often actually a good thing because you can skip over all of the things we did wrong up until that point there's a lot of assumptions that exist in any new tool or technology and if you got into react half a year before hooks you're worse off than somebody who got into react a month or two after them because you get to skip all the chaos of the class component stuff and go right into the better DX the better way of doing things getting into stuff late has never hurt me I was late to being a Dev YouTuber but instead a whole new type of Dev YouTuber has started to exist since I started and it's been awesome to watch I was late to AI I put out an AI chat app two and a half years after chat GPT and it's still doing very well being late is often a good thing and there is the example I usually give is funny enough mobile development let's say you were really really early on mobile you knew as soon as smartphones started to happen that mobile was the future so you decide I'm going all in on mobile we can agree that's a good idea this just in and of itself solid statement probably a good idea I'm going all in on mobile but the iPhone isn't out yet you still know smartphones are going to be the future that people are going to be doing more and more things on their phone and less on a big desktop clunky computer with a giant CRT so you're going all in a mobile I'm going to be the best mobile mobile Java applet Dev that ever lived if you got into Mobile too early you got [ __ ] you got absolutely screwed because if you got into Mobile so early that the existing app platforms that we have today didn't exist you're worse off that somebody who waited a few years after the App Store came out and like you know what this mobile thing seems to be going pretty well maybe we should learn how to make apps for it that's the difference people who got in too early ended up learning the wrong things do you know where this was the case more than anywhere YouTube if you look at the top 100 creators from the first 5 years of YouTube like three of them are active at all anymore and of those three two of them [ __ ] all the time about how the algorithm is ruining the platform and it's so terrible the algorithm just follows what the people want when they were there it was so novel and The Meta of making YouTube videos was so different that they learned the wrong way to make good videos and now when the bar has been risen and the expectations are different and the whole process has changed fundamentally they're not better off cuz they're early they're unable to learn the new way because they're so deeply ingrained in the wrong one so yeah I don't agree I love Gary we were just talking two days ago I do not agree with that sentiment I do not think you are going to miss out terribly if you get into this a bit later but if it's exciting to you it's in a really good spot now and some of the things you can do with these Technologies are incredible if you're already in vs code maybe give cursor a shot maybe give surf a shot the very least give something that lets you try out these tools a shot you don't have to but you might be surprised you might also not you might just hate it and move off it I moved off cursor three times before I actually had it click for me and got more into it you don't have to give these things a shot though like if you saw spelt when spelt 3 dropped and you bet heavily on that you would have been screwed this stuff's a lot further along and you can get more from it my point is that I totally agree with prime here you shouldn't feel like you are losing out or missing out if you don't try the stuff a little bit earlier apparently I can't catch up in a couple years like I'm not really sure what you're trying to like what what are you actually trying to sell me is it in its peak condition where if I learn it now I'm like good for the future or is it going to be completely different in in the next couple years right it's just this weird argument that's made that I don't think makes by the way only 20 seconds into a video and I'm already pausing it here we go boys 33 minutes this one's going to be a log one I am so sorry guys all right like cone let's go light cone podcast I love the editing another episode of the light cone I'm Gary this is Jared okay I'll disagree with prime I hate the editing I hate over edited videos so much like intros first 30 seconds make it a little flashy to keep attention from that point forward all these fancy animations and [ __ ] [ __ ] it just put their name who cares Harge and Diana and we're Partners at y combinator collectively we funded companies worth hundreds of billions of dollars right when it was just an idea and a few people so today we're talking about Vibe coding this is weird for me cuz I do watch the YC Channel a lot I've seen the original video I had feelings about the original video but I always watch it at 1.5 to 2x so this feels weird which is from a Andre karpathy post that went viral recently there's a new kind of coding I call Vibe coding where you fully Give In To The Vibes Embrace exponentials and forget that the code even exists yeah so we we surveyed the founders in the current YC batch um to get their take on Vibe coding and we I do like that every post you read now on chat like on redditchat GPT or Reddit whatever it is coding with llms they're all like help me I 30 files into my program and everything's freezing and it constantly seems to break I dude I love Vibe coding you know nothing seems to be better than having no expertise and just stop caring about where you are like like you can imagine you probably like a lot of you probably worked a lot of you have probably worked at a company that attempted to set like say a pattern for a for how you like develop try to effectively set like a an architecture and the decisions you've made even within that architecture had this crazy exponential climb for difficulty as time went on So You reworked the architecture and it kind of flattened the curve a little bit but then as time went on again you are rehit like this exponential difficulty curve where every time you need to change something it just starts ballooning and getting harder and more and more problems and weird side effects start happening and you kind of see this thing happening over and over again now imagine you went you decided to go full Vibes and you just didn't care about your architecture I wonder I wonder where that would like I I just wonder how long could you actually go like in a realistic way and maybe that's something that I need to try is just like how far could you actually get with Vibe coding now we've tried to let uh interesting I the vibe thing is like a tear system like like how hard are you leaning into the vibe with Vive coding cuz I I'm almost sad the term was taken the way it was for paying no attention to the code because when I think about the vibe with code I feel very differently I've often said that code has a bad vibe to it where I'll read something in code review and just not Vibe with the way it's written I'll look at I'll be like this doesn't seem like it's going to maintain well I can go through line by line and say each part of why I think this is the wrong way to do it but the vibe of this is just off I don't feel like this is the right way to do things and my solution when I ended up in those places would be to try a few more times roll a different way of solving the problem and see how you feel about that new solution after giving it a shot but for me Vibe code wasn't I'm vibing out I'm not looking at the code when I think of vibe coding I'm thinking about Vibe of the code not coding without looking at the code and I'm sad the term has been appropriated to mean that thing and I know what absolutely does vibe coding will never again mean the vibe of the code it'll mean avoiding the code as you Vibe out but it's sad because some of what I use these tools for is to roll three or four different solutions to a problem and see which solution I Vibe with more I think that actually has a lot of potential for scale and was one of the coolest things about AI previously if I had a 500 line of code file or three complex pieces building one specific feature and it was getting harder and harder to maintain I would put a lot of time trying to patch that feature to make it work and to fix the Ed case and move on now it's easier than ever to just blow that part out and roll it from scratch getting something that looks identical to the user but is simpler that I have a better Vibe about and to me that's what's exciting about these tools is at any different scale you can benefit from just deleting some [ __ ] and trying again previously the cost of deleting a handful of files that 20 people built over 10 years was not viable it was just too expensive to do those types of things now now I can roll out three Alternatives in a few minutes and look through them and see how I feel about this afterwards 26 commits to a game where we literally Vibe coded our whole way through only letting Devon program and and and when we had a expert game developer like review the code it was a it was a kind of a wild it was kind of a wild experience because it had all these ideas that were all like mirrors of what game development could be but they weren't actually like proper in any sort of way they were like oddly you would sort on the z-axis but then you actually would never even use the z-a Sorting because it was you know it wasn't used but that is something you would normally do because again one more important interesting point in games I have a whole video I have planned to do in the future of I call it in defense of AI games because I think there are some genuinely cool stuff in that space and a framing that we haven't acknowledged for how it's good keep an ey on the channel for that coming soon one of the problems with AI game code is that the amount of open-source code available for examples of doing good games is very low the number of good games versus good apps is already relatively low the number of good open- source examples is like a 100 to a th000 deck difference there are like two or three okay open- Source games and of the like tools we use for Game Dev basically none of those are open source in the application Dev World there is an insane amount of open- source examples showing us how to do things correctly ly the Gap in the amount of good open source training data in the ratio of good data to bad allows for AI tools to be really good at the things that there's a lot of data for and the data is high quality for and not as good at the other things if someone was to go to all these big gaming companies and buy their source code and train a model on that it might come out a lot better but right now the data that we have to train AI on game stuff is relatively low we mostly just have demos people made in 3js we don't have a whole lot of like real games or even the tools that real games are built with so I don't think games are the best example of how powerful AI can be while architecting applications simply because it doesn't have the right data I like this quote from Zach Game Dev is very Vibe based and I mean it in the literal opposite way of how they're saying it here good games are n of one like there's just so few of them yeah totally agree another point from Dan Vil here who's very experienced Game Dev the other problem is the nature of games crossplatform compatibility means that we don't even get to use things like the C++ built-in hash map and AI doesn't understand that and wants me to use standard string even though that doesn't work for many of the things we do that makes a ton of sense there is just so little good data for models to understand the game world that I would be surprised if any of them can consistently generate good code I would be absolutely blown away if any of them could figure out Unreal Engine there just isn't good examples there gdau is an open source engine is an open source Engine with very few games that are good using it and of the great games built in gdau which there are a handful now I'm really pumped to see the success of the engine none of them are open source there just aren't good examples of using gdau to build things that are open source as a reference point there are a lot of web Frameworks that are open source too like spelt try to build a spelt app with AI I dare you the lack of good examples of writing things was felt is the problem not the tech itself the fact the tech itself also is closed Source in a lot of The Game Dev cases makes it even worse but there's just so little tooling that it's tough oh [ __ ] Prime good to see you man so far we've agreed on almost every point so this is going to be an interesting one I I was told we weren't going to agree on this one and so far that has not been my experience we're like like Point foro fully in agreement thanks for stopping by good to see you let's get back to it remember statistical models typically you do sort by Z access and then do some things well but it turns out that like maybe that will just show up because that's just what happened because statistically it should happen and boom Prime you absolutely do have reasonable takes on AI people keep like misquoting them to me like you're some crazy Doomer on it but you're absolutely not the big thing that I totally agree with you on is you're not missing out if you're not using these things yet like you're not at all if you show up years late who cares I showed up 2 and a half years late to building an AI chat app and it's still exploding and making us a ton of money I showed up 5 years late to react and it hasn't hurt me at all being late's often great because you get to skip all the crap that happens on the way there so yeah we're we're almost fully aligned on all this I'm curious to see where we differ but yeah it's happening in your code base why I don't know you know we Essen ask him a bunch of questions we asked them what tools are you using um what work how has your workflows changed and so of generally where do you think the um future of software engineering is going and how will the role of software engineer change as we get into to a world of vibe coding and we got like some pretty interesting responses anyone have any favorite quotes that jumped out from the founders I think one of them that I can read B verbatim is I think the role of software engineer will transition to product engineer human taste is now more important than ever as Coen tools make everyone a 10x engineer I'm going to drop my take before Prime's biases me I half agree taste doesn't just matter in the good taste sense it matters more so in the bad one where if I see the AI recommending we combine these three things together I have enough taste and experience to see be like yeah that doesn't sit right I'm not sure about this one I'm going to try again or I'm going to take the wheel and take over from here that matters now more than ever being able to catch the AI as it's going down the wrong path and steer it the right way or just take over and do it yourself that matters a ton or even more importantly when you're starting to run into weird edge cases where things are causing bugs that don't make make any sense having the right skills to identify where the cause might be when you're even less familiar with the code than you would have been before that matters a lot the crazy thing that can happen with these tools is previously to have a code base with thousands of files and hundreds of thousands of lines of code you would need dozens of Engineers so somebody would have to know for each file how it works but if that person's on vacation and you're on call and something is broken in a part of the code base that you have never touched before none of that matters you got to figure that out yourself what's crazy is now we have individual devs or small teams of two to three people who are in the same situation because they Vibe coded their way to a monolith that normally would take a lot of Engineers and when things are starting to fall apart at the seams which it will more aggressively than with the dev simply because the system isn't as aware of itself as the humans who would have built it prior these skills are now more important than ever like can you dive into a codebase you've never seen before get shown a bug in the production version and figure out how to fix it without knowing the code yet that's an incredible skill and I would kind of bucket that with taste but it's a different thing enough of me let's see how Prime feels does cod genen make you a 10x engineer I mean I I get what they he's trying to say is that you're you're I mean that's ultimately what all programming comes down to is your ability to change something into what you actually like right creating a game I mean ultimately creating a game is a bunch of difficult stuff so that you can create a platform in which is your vision to execute now it's it's the 10x part that I just don't I'm just not buying but I do understand this idea that it's like I want to be able to I want to be concerned with why I like or dislike something and if coen's fast enough then you don't technically ever write code again right like I think that's the whole argument they're making I would argue that startup Founders are probably the worst people to ask for this my general take on why they're the worst people to ask is because startup founder Founders fundamentally program in a different type than say people who are maintaining a product or adding features to a long living product because ERS are programming to get an idea out as fast as possible and you take concessions on the Technologies you use the languages you choose the services that you use you take concessions everywhere at the rate of trying to just get something out and so I can imagine that maybe an overarching architecture may not be top priority and it's okay to Vibe yourself into certain things and I do I do think that you could you could argue that Vibe coding can work if you slice it into small like thousand or less lines of code sections right you could you could I like there could exist a world where you try to set up the architecture and then Vibe code the small bits because you know again the smaller you make the prediction the more likely the lm's able to get it correct so I'm going to give a weird perspective on this one because I I entirely agree but I think there's a layer here that's really really promising that I had a really good experience with when I was at twitch and this was well before we had these AI tools and Vibe code as a concept a thing I would run into a lot is is we had a feature that was inherently complex and we built this crazy system around it so it could be expanded and we could add all these other things in the future and then three years pass we don't add any of them then another year passes and we remove two or three of them and now time has passed and of the 10 to 50,000 lines of code for this feature only 20,000 at most are being hit and most of them are more complex than they needed to be because they were built with assumptions that ended up not being true there's no good term for the second time you write something you do better cu the second system problem is its own negative connotation but there's a positive thing where if you write the same thing twice it'll be much better the second time always and that retrospect is super valuable what's cool to me about these AI tools that I've benefited from a lot is if I have one of those monolithic disasters in my code base that was built for something different than we ended up actually doing previously I would have to maintain that for a while and the bar I'd have to hit for frustra before I throw it away would have to be really high have to get a bunch of buyin from my company and my team in order to get permission to go throw that away and rebuild it and I did that all the time I was the sledgehammer guy when there was a thing falling apart that needed to be redone I was who would be called to come in Destroy it and rebuild it and that was a very Vibe based thing I can vividly remember sitting back on my couch blaring music smoking weed coding away at this feature that I just deleted like 50 plus files for to see how how simply I could recreate it and I [ __ ] you not I had times where I threw away 30,000 lines of code and replaced them with like 500 totally fine trivial even to do and that's a skill of its own being able to recognize oh there's a clean cut Point here where I can throw away everything below this line rebuild it and have something that actually solves our problem that's significantly simpler and easier to maintain that is more accessible than it's ever been and that's something I'm really excited about with T3 chat I rewrote the entire data layer three times in under a month I Chang databases twice in a week that was never viable before writing a complete data architecture in a day was stupid and does that mean we had more bugs than if I had handwritten it over two weeks sure but it also means that my first two plans for how to do this got thrown away much faster because I got to see how they failed much earlier that's awesome I got to prototype three different architectures for one small section of a giant code base and I got to throw each one away as I hit the wall on it and that was great doing that before would have been miserable great quote from Prime why solve a problem with 500 lines of code when 30,000 will do I quit my first startup over this because there was a giant backend code base that was using Redux Saga for syncing websockets on the server the performance was so bad that one node could have about five users in it so we just had 20 dedicated server spun up when our average user count was five we had 4X the servers that we had users at this startup and I was going insane none of this was necessary I I felt like I was going mad I rewrote that entire backend in 300 lines of code and had more features better compatibility and full drop in replacement for all the other web platforms as well as the mobile platform to which the response was we can't ship this it's not unit tested you don't know what you're doing Theo you haven't tested this code so my last PR was a 200 200 line Edition where I hit 100% code coverage on that rewrite and I submitted that along with my twoe notice I've been there and the cool thing about these tools is I and it's crazy but I I knowing the founder of that particular startup I won't name and shame them if I had told him that I rebuilt the back end with AI and now it's 100x more efficient he would have been all for it but the fact that I wrote it and I was the frontend guy meant he looked down on that work but the big boss who blocked me from doing that would have been more cool with it if he felt like he was getting into the AI height by accepting that code change but that's like it's stupid but the people who kept me from rewriting the 30,000 lines of code into the correct 500 lines they're more likely to say yes if I tell them I use AI to do it it's stupid it makes no sense these people are morons but I don't care I can Vibe out now in a way I couldn't before and I can get away with murder and it's faster it's so good this is why I like this stuff the fact that more people can see this path in the code base sucks I'm going to rewrite it that scales to any size but with startup UPS everything sucks so you're more likely to just throw it all away anyways the difference here is that a startup might throw away their entire code base with a new AI generated one a big company will throw away a very small portion less than 1% of their code but it's still more code than the entire startup so I just want to acknowledge the difference there where if you can slice out Parts as Prime said rewriting a chunk has never been better and with awesome tools and solutions like react making it way easier than ever to compartmentalize a giant frontend code base or even a mobile code base being able to say okay from this component down we're rewriting you can do awesome things I love that we're six minutes in he's one minute in and we're like 20 this is going to be great I don't want to be writing unit test for the rest of my life like do imagine there is a world in which you have to write the test and the spec and then you just try to prompt yourself into it to it working yikes one um Obby from MRA said I don't write code much I just think and review this is one sec phone call hi yeah my sister just called to say hi and show me her cat's do toys so yeah all right we'll do bye love you guys too talk soon this video is already going to be two hours who cares you can leave that in face of what why dude does any engineer actually think that's a good thing is anybody like you know what I want I want to review more code kind of I this is actually one of the biggest concerns I have with AI stuff people who don't like reviewing code are screwed I have reviewed way more code than I've written in my life and that makes me pretty unique as an engineer I'm not a fan of code review to be clear nobody actually likes reviewing code but I understand how important it is and I understand how much better it makes me and the developers around me it helps everybody level up together if I have two devs with different levels of experience let's say the the size of the bubble is how experienced they are we have Dev one they're this experience and we have Dev 2 Dev 2 is less experienced if Dev one is reviewing Dev 2's code they can help expand their Circle to make it bigger but you think well Dev 2 is less experienced than Dev 1 so that only goes one way right it can only help everyone get to the same amount of experience as the most experienced person no because this is actually a vend diagram and while there will probably be a lot of overlap between the circles there's a gap between them too there's areas that two knows about that one doesn't and a lot more the other way so if you have two devs even with widely different levels of experience collaborating and reviewing each other's code both circles get bigger and that's awesome code reviews ability to distill knowledge across a team and help everybody level each other up and making the bar for engineering knowledge on the team as high as the sum of everyone's unique knowledge it's so cool and the ability to watch a team grow like that is awesome and I've it's why why I push so hard for code review stuff like I have pushed for rules at companies like you start and end every day with code review and I've pushed against rules like code reviews only the problem of on call absolute disaster I have pushed for people to ask more questions during code review I've went as far as to say that if a PR has more than 20 lines of code you need to leave at least one comment or it doesn't count as an approval the cycle of letting people collaborate on such an important element which is the code that we're shipping to production is so valuable for leveling up our knowledge as engineers and it is still also a grind I won't pretend otherwise but at the same time I kind of blame GitHub for being the worst code review tool ever [ __ ] made in the history of software for making us hate it so much I legitimately think we would hate it at least like 20% less if we had a better website for doing the code review by the way I just found this and I figured here's a good place for it shout out to the new it's not even that new the GitHub poll requests extension now I can click a PR here and see what the changes are all within vs code and even leave comments I can leave a comment on this and it appears on GitHub it's so much better than doing this through the god awul GitHub UI also check out graphite if you haven't it's way better too but I someone else said it so somebody else said one of my favorite things so I don't have to be the one getting flamed for it the GitHub mobile app is better for code review than the website yes by a lot which is hilarious that extension is just the GitHub poll request extension if you search GitHub po Quest you'll probably find it pretty quick anyways no no no like I I don't know an engineer that wants that I just think and review this is like a super technical I'm an investor in MRA think and review one sec to confirm I'm scared how many of the companies I'm invested in are about to be roasted okay I'm not cool it's the Other M company is the one I'm invested in this batch not invested in MRA few cool this is like a super technical founder whose like last company was also a Dev tools company he's like extremely able to code and so it's fascinating to have people like that saying things like this there's another qu from a different Obby Obby from copycat who said he's I am farless attack okay I am talking to master and I might end up investing so anyways to my code now so my decisions on whether we decide to scrap or refractor code are less bias um since I can code three times as fast it's easy for me to scrap and rewrite if I need to yep th this is the point I was just trying to make I fully agree with this the willingness to throwaway code has been awesome and I think that despite AI code not always being great the overall quality and experience working in the code bases that I build nowadays is better because when things do suck I'm less scared to throw them away since I can code three times as fast it's easy for me to scrap and rewrite if I need to and then I guess the really cool thing about this stuff is it actually paralyzes really well so yoav from cix he says I write everything no it does not I doing multiple AI code things at once in parallel is [ __ ] awful anyone who says this has not worked on complex enough things trying to run two agents at once in your code base at the same time horrible horrible with cursor sometimes I even have two windows of cursor open in parallel and I prompt them on two different features I'm just trying to get get work trees working in cursor properly there's no way in hell you're working on two different features at the same time which makes sense why not three you know you do a lot actually and I think another one that's great is uh from H interesting sounds like a merge I mean of course but I mean that's just two workers working right merge conflicts are natural I'm not too worried about that the the one part where he said the um if I don't like a piece of code I can just throw it away and refactor it and just redo it again I don't get nearly as attached to code uh first off that's like a mentality choice you can always fix you being attached the code it doesn't really actually I was going to jump in there I'm going to let him finish his thought first because I this is one of the first Parts I don't fully agree with have anything to do with the speed I mean if you want to get faster learn your language type faster honestly you can get through so much code when you know what you're doing but then on top of that I I I think that that's probably irrelevant I will say that the faster code changes the more likely you are to reintroduce bugs or introduce new bugs that are subtle and very difficult and that is kind of a uh there's definitely like a challenge to that yeah okay this where I'm jumping in because I don't fully agree I'm gonna present a fun exercise for you guys I want you all to imagine a person that you've worked with in the past or know of Imagine a perfectly average Dev the most average Dev you've ever worked with somebody who doesn't hang out in chats like this somebody who's somebody who's annoyed that server components exist because they don't want react to change from the way they learned it 5 years ago somebody who's kind of burnt out just doing it for the money but is fine at the work they sometimes give good comments in code review they sometimes put up PRS that are fine sometimes they're garbage who cares everyone has good days and bad days just imagine like the perfect average as average as they can be average developer do you have this person in your head ideally a human that you know not yourself if you're here you're almost certainly above average I want you to imagine a perfectly average Dev the kind of person that you're not upset that you hired but you're not that excited you did either like if they were to disappear tomorrow it would be like yeah do you have that person in your head now half of Developers are dumber than that person that's how averages work if you have a person who is right in the middle half of devs are dumber than them this is an important thing to understand as you make decisions about tools and Technologies generally speaking the average developer and the devs below that average the majority of devs are not that great at software and if I've seen anything from working with these devs over the years they get really attached to the work they did that actually got through because they have to work harder to get the thumbs up on that PR and to get that code merged into the code base as such their willingness to throw things away is generally much lower and the skill Prime just talked about that you can learn which is the willingness to throw away code when it's no longer solving the problems that you care about that is a skill you can learn but it's a skill that puts you in a very high tier of engineer the majority of Engineers don't like their code being thrown away and this was a very hard lesson I had to learn early in my career cuz I was the sledgehammer guy I was the one who would come in throw away the giant pile of garbage and replace it with 300 lines of more maintainable code and I'm sure I would introduce bugs here and there with it I know for a fact I did but for every bug I introduced I had squashed three as well as a fourth Edge case nobody had even bothered documenting this happened all the time I can't tell you how annoyed my product manager and my like I can't tell you how annoyed my PM would get because there would be like 50 issues in jira that just are being left stale and we go through them a year later and I'm like oh yeah I killed half of these with these two random changes and I couldn't even find the pr to link to so that she could mark it proper when she closed it the systems aren't built for that mindset they're not built for people to come in and rewrite something because most people are arbitrarily attached to their [ __ ] I didn't mix up mean and median I know what I was saying I'm not telling people to theorize a median programmer because the average programmer and the median programmer are going to be very similar shut the [ __ ] up if you actually think that matters you're probably on the wrong side of that median anyways there's absolutely this is actually a really good point K Martinez there's a difference between skill and mentality 100% agree the point I'm trying to make is that one of the biggest blockers for improving your skill is your mentality and I know a lot of skilled developers that have the wrong mentality but I don't know any bad developers with the right mentality that I almost never see if you have the right mentality your skill is just a work in progress and you'll get there pretty fast the mentality of being being willing to throw away code will make you skill up so much faster that I can't imagine somebody with that mentality not being pretty skilled and sadly most developers are not that skilled the really magical thing that happened here is that those less skilled developers are already having their mentality shifted and the reason that mentality shifting is they can now kind of have that feeling of being the Vim God for a lot of these devs AI is the first time they could write hundreds of lines of code to solve a complex problem and have it work first try these are devs that would have had to spend weeks on those things in the past and I agree someone like primer myself can do it in a day maybe even a few hours the AI lets people who couldn't before do that and that's allowed for a less capable developer a developer who has a worse mindset to more easily accept this and many of them are the ones who are dreading this the most the people who are so scared of AI are the same people who are scared to delete their code because they put a lot of work in and it's terrifying to lose this thing that they had put all this effort into AI is forcing those people to get over it faster and also making it a little easier for them to do the same so I think that's a the the one piece I would add to what prime is saying here is there are a lot of devs who have struggled to develop that specific skill of being willing to throw away code AI has made it easier for them to digest and easier for them to do in the first place because now they can generate code faster they're less likely to be attached to that code and that's a good thing being really attached to the specific implement of a problem that you wrote is bad and will hold you back as an engineer and will hold back the quality of the code base in the team that you're on that is a much less likely thing with these new tools I don't like the idea of using somebody's ability to sell a company as a means for if they're a person you should listen to like I do think like maybe they have a really they you know there's the get lucky aspect there's the actually smart person there is somebody who saw what they did and kind of snake oiled their way in and they got lucky by somebody else trying to like effectively just sell and get out as fast as possible right there's like many different reasons why something is Su I am fighting so hard to go down the craziest tangent that will make this video 4 hours long you guys have no idea I'll go a step further than he did here actually successfully getting into Y combinator and getting through it and coming out on top doesn't prove much of anything you get into YC for any of many different things but it all comes down to one key point you impressed a group partner more than all of the other companies they're talking to if you impressed a group partner enough you're in and if you didn't you're not so the only real thing we know by your success getting into Y combinator is that one of the group Partners liked you that's it that's the only thing you have proven by getting into YC you've not proven that you're a great engineer you certainly haven't proven that you have a good idea in fact might be the opposite I'd say three qus of YC companies pivot and of the successful ones like nine out of 10 do and you certainly and we don't even have proof that you know how to sell your company or raise money yet that I've seen a lot of startup Founders struggle to figure out as they're going so getting into y being a y combinator company does not mean anything other than that you impressed a specific human and a lot of the time I'm impressed with somebody I'm wrong I know that's the case with the YC Partners too a company getting into YC doesn't mean that they're Superstars or they're really talented or they're going to succeed it does mean they impressed one person and impressing one person can happen for a lot of reasons and not all of them are the person was good so consider that here the other side the tangent I'm not going to do but I'll give you a hint of it so you guys can tell me if you want this one in the future it's a defense of a handful of these people I'm sure you all know levels iio levels is the creator of a ton of different small to mediumsized projects that make quite a bit of Revenue including his new flying Vibe coded game that is making way more money than it probably should be his ability to make money on these things does not prove that he is a skilled developer and on top of that it doesn't mean that we should listen to his advice with software I think we should all listen to levels more though because the things he cares about are things we all can learn from when he is solving problems and He is building software the thing he cares about most is the ability to make changes quickly and address problems as soon as they come up he has built a stack that would make most of us cower in fear so that he can in two clicks in his editor not even clicks key prompts like when he does command s it doesn't save because he saves on every key press it commits and when he do command enter it auto deploys it straight up to a VPS we shouldn't copy his workflow but we should learn from his way of thinking about these things and see the real meaningful benefits of shipping faster makes it easier for him to address customer concerns makes it easier for people to get hyped on what he's building because it's so much faster moving and the back and forth and the relationship he has with his users is fundamentally different as a result it means he can sell better and turn things around faster too and most importantly it means he can build something that doesn't work and throw it away way faster in a lot of ways levels was the first Vibe coder the because he was so willing to write 15 projects and throw them all away cuz the 16th did better than he expected there's a lot we can learn from that it isn't the technical details of how he builds it's the philosophy that he uses when he makes these decisions so when someone is as successful as levels you can't trust anything they say still but in the case of levels there is actually a lot we can learn and that's why I'm so defensive of him in the way that he does things and I'm not saying that we should all be using command enter to Auto deploy via FTP to a PHP server I'm saying it cuz the way he thinks is interesting and which should challenge us all to ship better and faster but yeah almost entirely agree with prime I would go further someone being in YC saying something means absolutely nothing and it could be that the person's actually really wise for you know was able to have a lot of foresight and able to solve the right problems for the right time it's just it's it's an interesting reason to use as a means for good or bad like oh we listen to this person because they've sold a company it's like is that a good reason which makes sense yep I totally agree if you're listening to somebody it should be because the things they're saying Vibe with your understanding of it or because the person solved a specific problem in the area that you're trying to do why not three you know do a lot actually and I think another one that's great is uh from the founder of a train Loop mentions how coding has changed six to one months ago 10x speed up one month ago to now is 100x speed up exponential acceleration I'm in pain the this one hurts me 100x speed up really that can't be real like how slow were they before that's a like dude that's like an insane statement to say you're a 100x faster I get some people that are just so like I've watched people who don't know how to code attempt to code and like watching them formulate an if statement is is is like probably akin to ripping off my toenails if you've never watched somebody have to do three Google searches to write like an if statement you don't know true pain the reason I put us through that exercise earlier of like imagine the average engineer half of them are Dumber it's this we're all in a bubble everyone hanging out here most people watching this video the vast majority of us are in a bubble some of us work in a place where we're the best engineer and the people around us are so dumb that we feel miserable constantly I know I've been there and I'm sure a handful of you have too but generally speaking the people hang out in this chat and the people who are in the comment section right now for the most part are not the types of people that we're talking about here these people are actually probably experiencing 100x speed up but they're probably now able to ship bugs 100 times faster too at the same time there's another thing happening here that is actually kind of good when somebody like prime or me is on a team with someone that's stupid it quickly gets hard for us to help them grow it's just so frustrating watching them work that we start avoiding it at all costs we're more likely to just do the quick feature ad then let them near the ticket they don't get the same growth opportunities because they're aw and nobody wants to work with them the AI doesn't care though and I would be surprised if we don't see more of these like 1X devs skill up to like a 0.5x Dev and I think one of the cool things about this Tech is that people who otherwise would not have had co-workers help them because they're just straight up too dumb and bad at this now get a much tighter feedback loop that allows them to improve more effectively that has actual potential I would bet that if you took one of these people if you took somebody who feels like they're 100 times faster with AI if you took their AI away they're still going to be 10x faster than they were pre AI because now they can read more code get more feedback and skill up faster I would hope I'm sure that there are plenty of people who are using this to close their eyes not open them but the ones who now are looking at more code getting more feedback and improving as a result there are some devs that are going to go from entirely incompetent to almost competent just cuz they're doing it more because if you're that dumb that you have to do three Google searches per if statement you're not writing a lot of code because it sucks to do you just feel bad doing it these tools make you feel less bad you're more likely to get over the hump and do better it's the same thing when I teach beginners how to code I try to get them to a point where they have code that results in something they can use as quickly as possible that's why I use react and vew to react in next as when you're starting because you can so quickly get something where you have code in one View and you have the web page on another Tab and you can switch between the two and see your code changing the site that feeling gets you going faster that reward makes you more involved and invested AI helps more people have that more points throughout their Dev Cycles they could actually get smarter here not a lot smarter and not all the time for every one person who does this is going to be five who get Dumber because of it but I would be excited to see the devs who do actually level up because the Reps they're getting in are much more aggressive they're doing it more often I like this actually it's kind of related to fake it until you make it absolutely absolutely you can now fake it much more aggressively and just by being in the seat seeing the code being written seeing what does and doesn't work you're getting the Reps in you're doing more of it and that's a good thing like it's it's very very very painful and so I can imagine that something like co-pilot is actually like it feels it actually feels 10x slower or 10x faster because like you're no longer just like L like right like you're fast you know it's like I can I thought I was being too harsh on these devs I I feel wayless bad now thank you prime can understand that and he says I'm no long engineer I'm a prodct 100ex yeah that's super interesting I I think like that might be something that's happening broadly you know it really ends up being too different roles you need I mean it actually maps to how Engineers sort of self assigned today in that either you're uh you know front end or back end and then back end ends up being about actually infrastructure and then front end is so much more actually being a PM you're sort of um almost being like an ethnographer going into the Obscure I don't know I don't I don't know what an ethnographer e e I don't I don't know what that means you're underserved parts of the maybe an AI wrote the script I've never heard that word either of G and you're trying to extract out like this is what those people in that GDP Pi actually want and then I'm going to you know turn that into code and then actually evals are the most important part of that when I was running triple bite this was actually one of the things we noticed it was almost as important as a technical assessment of Engineers we trying to figure out who's a good match for a specific company is there's a certain threshold of Technic ability you need but beyond that it was do you actually want to talk to users or not like some Engineers are actually just very a lot more motivated by working on things where they know who the users are and they get to like communicate with them and they get live feedback and they can iterate um and essentially being a product engineer and other Engineers really don't want to do that at all like they find it annoying having to deal with users and they want to just like work on like hard technical problems and react back end engineer yeah that's that's what we call so I mean it's also like there's also tools Engineers there's there's more than just front and back in it's a very web-centric way to look at the world uh but there is more than just that right and so one of the big things I think what what what they're saying is that like I I personally am not a huge fan of just working with customers I rather would be the customer and I build product for something that solves the problems that I'm trying to have bangers on bangers if you have a company with however many people solving a problem that they don't have or one obsessed dumbass that cares a lot about that problem and has it every day that one obsessed dumbass is going to win every time I know cuz I'm that obsessed dumbass when I have a problem and I'm frustrated with the solutions that exist I will run laps around a th000 plus person company because they are so lost because they don't understand the problem I even had twitch clone owning the features I was building for Ping because I understood what twitch creators needed more than the twitch staff did and when I built the wrong thing they blindly followed me there too which was even funnier so totally agree here ideally you are the customer and if you're not you better be spending a hell of a lot of time working with them and empathizing with them the part I disagree with is the idea of like there are these different types of engineers and some of them don't need to talk to their users no if you're a tooling engineer you still have users but those users are Developers you might not think of it as talking to your users when you have lunch with them and they complain about this thing that your tool didn't do for them but you are being able to talk to those users and understand what they want and need and what could possibly benefit them is an essential skill for anyone Building Solutions to problems and sadly it's a skill that has been somewhat rare in the software Dev world for a while one of the things that's both exciting and terrifying about these AI tools is if I have a problem and I'm motivated enough to solve it I can push through learning enough code to make the thing work and I've seen people who are so frustrated with the state of one specific thing they use every day that they learn code enough to solve it this is a weird example tangent but we're already here we're going to ride it I was in LA for something I was trying to fly back to SF my flight kept getting delayed and I was just standing waiting and I was standing next to a pilot who was trying to jump the flight in order to get to a different flight he had to take from SF I just chat with them a whole bunch and was talking about software for flight stuff what had happened was I Got a notification on my app flighty that the flight had been delayed again I mentioned it to him 3 minutes later the flight attendance confirmed it at the desk and he's like how did you know that so early I showed him the app he's like oh that's really cool I love when people build good apps for flight stuff and then told me this wild Story one of his old co-workers another pilot that he used to work with was so frustrated about the state of the bidding system for them to pick which flights they wanted to have because there was this crappy dashboard that would go out actually it wasn't even a dashboard I think it was an Excel spreadsheet they would send out to all the pilots they'd have to go in the Mark the things they want and send them back and hope that someone would dup it and they would get the flights they want and it never worked he was so annoyed about this that he built his own web app having never coded before he taught himself to code to build a web app to better track which flights were available and which flights different Pilots were taking that ended up doing so well that he quit to do it full-time ended up selling it for some number of millions of dollars was really well off missed flying so much he went back to it so he's still a pilot that's the thing he is flying he solved a problem he had it went way better than expected he sold the solution and he doesn't write code anymore he just flies the dude did not want to be a developer but the fact that he cared this much meant that he could run circles around anyone else because he would learn the thing he had to because he was so pissed off you don't want to be on the other side of that person it doesn't matter how skilled you are you will not beat them you do not care as much they will win the same advice I give to companies that are like how do we make our own YouTube channel if you're not as obsessed with YouTube as I am if you're not watching hours of a day of this [ __ ] which I shouldn't be doing but I can't help myself I just love this platform you're not going to beat us if you're not obsessed doesn't matter how much money you spend or how many people you hire you will not beat an obsessed dumbass because they don't know what they're doing is wrong they're going to keep pushing until it suddenly is right so yeah I think that's one of the cool aspects of these tools is somebody like that pilot can get a lot further along using these AI tools and now they'll have that feeling of oh I might actually be able to do this the earlier you can get that feeling into someone's head the more likely they are to push through the hard parts and make it happen I think of all of this in terms of skateboarding somebody who gets close to an oie in their first three or four attempts is much more likely to go all the way with skateboarding than someone who takes hundreds of tries but the person who took a 100 tries to do it if they still keep going and they don't stop if they take thousands of tries to land their first Ollie that [ __ ] is going to be on stoppable don't get in their way doesn't twitch have user research though the problem with user research is the people that you want to get info from which are the top creators they don't respond to user research requests and if you're doing user research the people who get that email from twitch and they're like yeah I'll dedicate an hour to telling twitch what's wrong they go in and complain about how hard it is to be a small Creator and if you listen to those people you're going to ruin the [ __ ] platform I know that because they ruined the [ __ ] platform so no there there is no user research that works at a company that has that level of teering between its users you can't interview the users that matter you have to understand the users that matter you have to be friends with them you have to be the person they call when something goes wrong there's no world in which twitch's user research could ever have solved these problems it just do doesn't work that way even with moderation we had a PM that was so deep that they were the moderator for a bunch of giant channels because they were doing the moderation work every day I'm sure there were formal user research things here and there what they ended up doing is he hit up his friends and they put a demo in front of them to show them and say Hey how do you feel about this idea we have to solve these moderation problems and they could give us feedback as we were working on because they were friends with the PM running the project that works generic user research teams that don't even watch Twitch themselves they don't know the difference between an xqc and somebody with 14 letters in their name that gets five viewers they are like oh I have two pieces of feedback these are both equal they have no idea what they're talking about user research teams will destroy twitch building tools that can solve other programmers problems is something that I largely enjoy uh just because it is my own problem as well so I understand it at a very intense level there are other places that do exist right I mean the ml that they're talking about also is filled with ML Engineers that are neither front end or back end backing engineer yeah sure and that's only a theme that came up in these survey responses right this idea of sort of the LMS are maybe going to push people to choose because the actual writing of the code may become less important it's about are you really do you have taste and you want to solve product problems or are you an architect and you want to solve systems problems oh did he just claimed that backend Engineers have no taste perfect face I paused it on literally the perfect fa I'm a backend engineer I have at least a little bit of taste I will defend this some amount if you're a backend engineer that's refused to learn any modern web tools Technologies and solutions the likelihood that you have taste or user empathy is relatively low to compare that to somebody like prime prime deeply understands react he has frustrations with it that I'm not fully aligned with our our conclusions on react are different but he tried it he built things with it he understands so much about react he is not the person that they're talking about when they say a backend engineer the same way I'm not there's a spectrum here but there are absolutely people who stunt sit in the backend and get really mad that web is improving at any point so yeah I can see why Prime would think they're talking about him because I even felt like they were talking about me a bit because I still kind of identify as a back end engineer most of my time is on back end not front end so I get it but I also genuinely feel that backend Engineers who have avoided front end at all costs they don't have taste or user empathy yet I know because I was one of those it took me until 2019 to take front and seriously and it fundamentally changed how I think about product and it's made me a much better person fundamentally not just like a better engineer but I'm a more empathetic human that can better understand the needs of other people because I've talked to more people and I've seen how they use the things that I built so so yeah Prime is right in being annoyed cuz he feels like they're talking about him and it sounds like they're talking about him but they're not I feel the same way stupid comment on their part the actual perfect face back end Engineers don't have taste uh I I know what he's trying to say though right which is that you prefer the Aesthetics and usability as opposed to the building of the actual product and so I think they're making kind of like an odd distinction because the front end actually needs this too any complicated product I mean I think the thing is is that a lot of founding stuff isn't a complicated project and what I mean by a complicated project is like if you built a cad thing or some sort of like interface that's actually a user thing that does not involve the front end meaning that it's not just another react app you actually have to have logic sitting off to the side you have like to have a whole state world that is created and then a smaller front end then I mean that person they're probably acquitting to as a backend engineer kind of agree it's just particularly funny to hear this right now cuz one of the companies in the current batch it's one named Adam it's an AI generator for CAD 3D mocks so you can generate CAD files in seconds and some of the best CAD people I know have been very impressed and surprised by the quality of what this is capable of already it's a genuinely really [ __ ] cool company and I probably should invest in these guys I'm 5050 on it so because I don't know [ __ ] about CAD but I've I've heard nothing but great things from people who I would have expected to be [ __ ] about this one of the things that YC's been bringing up more in recent videos is this idea that the best startups right now aren't the ones that you can Vibe code in a week which is weird because that's how I've actually felt for a while is ideally you can take any idea and distill some part of it down to something that takes a week to build so you can start testing it as quickly as possible YC has been encouraging more companies to do things that can't go that fast something like an AI immigration law service because that takes months if not years to get right but if nobody else is making that investment and it turns out to be the right one by putting the time in to make this really hard thing you're more likely to succeed and if you do your winnings will be huge if you win with a project that takes you a week to build the foundation you've built for yourself isn't very sturdy if you win with a thing that took you months to build and no one else has tried yet they're not going to be able to catch up the strongest wins right now are the companies that spend the whole batch building something really hard get it out right at the end of the batch and suddenly start blowing up those companies kill it that backend engineer person that kind of runs this whole state world is actually on the front end doing stuff so any sophistic sophistic like Google Sheets Google Sheets is a Marvel of technology that right there is probably 99% back and then some amount of front this is the first point I've like fully disagreed with Prim on do not discount The Unbelievable engineering work that went into the client side on Google Sheets Google Docs and all the other Google gole office suite products the front end engineering of those things is a [ __ ] Marvel the back end is a stupid crud syn layer I mean it's it's more complex than usual because the D duping there is miserable and the multiplayer aspect is tough the back end for Sheets is more complex than most backends the front end for Sheets is more complex than almost any other front end I don't even want to think about the front end code for sheets that makes me like feel sick one of the most complex things to do in the web is a high performance table one of my favorite sponsors is AG grid these guys sell a grid component because doing a good one is hard and you look at this you're like oh yeah I would never want to build this and make it work with like filters and like changing sort orders all automatically with animations no one wants to build this and anybody who's had to hated it but that's a purchased component there's no way big companies are buying that right 90% of the Fortune 500 use AG grid that's how [ __ ] hard this is so yeah making a complex table as simple as it might seems It's not 1% of the code for Google Sheets I'm sorry Prime you you've said one stupid thing so far but this is the stupid thing Google Sheets is not 1% front-end code no or maybe 80% like just they would call backend coding despite it being on the fronted despite it being about the UI okay he just immediately recovered the actual rendering part is still more complex than almost any other app but the logic to handle what element is re-rendering when and the layer to go between the backend the state in the UI that architecture is complex beyond [ __ ] belief and I it's one of the reasons there isn't a Google Sheets competitor that's viable it's so hard to do that it's unbelievably difficult so I don't know how it would cut these lines but yeah I I think it's a bad example there are lots of other much better examples to communicate what he's saying something like Twitter for example that's one to 5% front end majority back end Google Sheets is a tough example here despite all of that uh then 20% actually like UI work oh and interestingly I guess um one thing the survey did indicate is that this stuff is terrible at debugging yeah and so you still the humans have to do the debugging still they have to figure out well what is the code actually doing here's a bug where's you know everyone's favorite thing to do by the the buing you know we have some you know logic error you know just didn't figure this out right Prime is touching on a thing that I have felt really bad in non-code spaces one of the problems I've had with AI tools is they often try to replace the fun part not the annoying part especially in video editing there's all these tools that are like I'm going to edit your videos for you and none of them are we're going to make it easier to collaborate with your sponsors and swap different assets out depending on what they request or we're going to make it easier to organize the giant pile of assets you're managing to figure out what goes in your video no one's doing those parts cuz they're hard everybody's trying to automate the fun part cuz it's easy and also more important because they don't understand it it drives me [ __ ] mad we're getting there with Dev now where more and more the dev tools that we're using every day are trying to optimize the fun parts to make it faster to ship but things like debugging and things like code review are kind of being left behind like the two channel sponsors between graphite and code rabbit building better AI code review stuff it's really nice and I like it a lot but it's not a replacement for those boring Parts you still got to do them so yeah I wish the AI would focus more on the things that suck not the things that are fun but it is what it is there doesn't seem to be a way to just tell it debug you were saying that you have to uh be very explicit like as if giving instructions to a firsttime software engineer how you have to really spoon feed at the instructions to get it to tutd buug stuff or you can kind of Embrace The Vibes I'd say Andre karpathy style is just like ignore the bug and just like roll just like just like tell it to try again from scratch I can't imagine actually living that life you know a somehow we've convinced ourselves to go from a context free grammar to a context sensitive grammar for programming and now people are creating context free grammars on top of the context sensitive grammar to produce context free grammars again I'm not exactly sure how we got ourselves into this position but here we are RNG programming is kind of like literally Andre karthy just he just described fortnite like fun fact I covered this in the Claude video If you go into a thread in Claude like CLA Ai and you edit the title of the thread and set it to empty string the behavior is non-deterministic there's five different cases you can hit and none of them have like preset like things that will lead to them it's effectively random which way it will break when you do that this non-deterministic chaos we've put ourselves in here is kind of insane the the point Prime is making here is previously with code at least properly written code if you take a given function and you run it twice with the same input you'll get the same output with AI you will not the theoretical here is you generate code it's close but the result has a bug telling the AI to fix the bug is hard because it's not very good at debugging identifying what's wrong in fixing it it's easier to hit retry and see if the next time it does it it comes out correct and that's insane because that's never how we've written software generally speaking we write software by writing a solution and if it doesn't work we go through to find why it didn't work and fix it or we throw it away and rewrite it this idea that we would rerun the same thing to try and get a different output is an entirely different way of thinking that feels antithetical to engineering it's more nuanced than that but I'm leaning towards Prime on this one it is kind of weird and definitely chaotic that we're where we are now I'm going to drop tilted towers and hopefully I get a shotgun and some guy just has a pickaxe or maybe they have the shotgun and I just have the pickaxe we're just going to we're just going to keep rolling until I can land tilted Towers successfully and get through just RNG Vibes like it's it's wild how your coding style changes when actually writing the code becomes a THX cheaper like as a human you would never just like Blow Away something that you'd worked on for a long time and rewrite it from scratch because you had a bug you you yeah he's he's right he's right he's definitely right that definitely that's never happened I've never done I mean I've personally never done that definitely defin I've definitely never done that definitely never been uh convinced that someone else's codes horseshit Rewritten it just to rewrite almost identical line forline code then realize I'm the horeshit definitely never happened to me either I certainly haven't had to rewrite the exact same data architecture three separate times just to come to the same conclusions each and every time all in the course of a week definitely didn't recently do that for T3 chat or anything I definitely don't have an hourong video about all that never never once definitely have never done that like you'd always fix the bug but like for the llm if he can just like rewrite a thousand lines of code in like 6 seconds like why not know that's kind of like um writing you know taking the approach of uh you know how people use um Mid Journey or playground when you're trying to generate images like if there're artifacts or things that I don't like sometimes I don't even change the prompt I just click roll and I do that five times and you sometimes it just works I'm was like oh I can use that now I I Vibe with Gary on this one I hate it but it's true my first like AI pill I took was mid journey I was very impressed with it not for things I would post by them M El or used by themselves but as a starting point I could use either to like Vibe out an idea I was going to spend a bunch of time in photoshopping or to just get specific assets I would use in a Photoshop job and the solution with mid journey is on one hand learning the esoteric art of prompting for images it's a very strange Arcane thing I had to get a lot of help from a friend who's good at it from also I've been avoiding mentioning that I'm a mid-journey bro for like over a year now I have so many DMS where I ask people to not reveal that I'm thankful to have shed the cloak and say AI a little bit more aggressively now it's nice that I don't feel like I have to hide that anymore on the other hand sometimes when I was using mid Journey the solution was to just hit retry over and over again and then to take the two you liked put them in the reference thing and roll more times in order to filter out the [ __ ] and it's not pleasant it's not a fun thing but it does work surprisingly well and sometimes better prompting doesn't get you where you need to be I got to be right back I just I have to walk away I'm walking yeah we have different takes on this one I I do hate the non-deterministic nature of these things the fact that somebody can give me a prompt that broke really bad for them and then it doesn't for me drives me mad as a software Dev trying to debug things yeah know I the more I think about it the more on his side it it does just suck like the the one thing that was great about software is that it was somewhat deterministic and the more that goes away the more painful life is taking them out all right all right all right so I've considered life you know one thing I realized that uh might be a bit um kind of naive of me is that I I CS Lewis talks about this in the third chapter of abolition for man about kind of like the death of magic and the birth of Science and in the birth of science there was a pursuit of knowledge and knowledge being the end goal and then as science has gone on there's the pursuit of science for the ability to effectively Lord over nature or to turn into nature the quantity of an object and to be able to sell that and have power over man that's kind of like the big kind of like the third chapter's big argument or one of the one of the few big arguments and what I realize is that perhaps there is a generation of coders who fit into the birth of Science and the death of magic style and I think there's a group of Engineers who kind of fall into this category in which they pursue programming as a means to an end the journey is the destination which is that I want to become better at program programming I want to become better I want to learn more problems I don't understand how compilers work I want to build a compiler for the sake of building a compiler the the the end product the speed in which I can produce the compiler is not as relevant as the production of the compiler itself and so therefore that's kind of the way I want and so that's kind of what I'm also seeing with a lot of this is that there's probably two two sides to the coin there is um the desire for knowledge and then the desire for uh lording I'm so sorry I have to comment on the fact that Twitter's streaming is so broken he's had to edit the title three times and it still hasn't gone through I just I everyone who says that like streaming on Twitter is the future does not understand streaming Twitter or the future like you have to know how none of those three things work to think that over nature right and so that's kind of what I am what I what I'm generally hearing here hold on I'm just trying to figure out how to get this thing to save I should read abolition of man abolition man is really really good tactic wolf surface just like this XKCD anytime an integer is stored or read its values adjusted upward or downward by a random amount between 40 and 50 my new language almost completely eliminates off by1 errors quality we do love some good random chaos chapter 3 is like my most favorite of all time kind of talking about the the plights of man and what it kind of is costing it's very very it worked so frame of Building Systems because you're not building foundationally step by step you're really doing it from scratch because fundamentally what's going on is like all these tools today are coming from the world of a generated code that're in this latent space hidden somewhere and you have to do it from scratch to find like a different gradient then not get stuck and then you want to like add a bit of Randomness get it to regenerate but I think do think maybe I don't know whatever next generation of 05 maybe we'll get to the point that actually is able to build upon PA I mean as of right now I think most of it is you need to reroll and rewrite but it doesn't build upon it yet but we haven't seen any of the coding tools right now work well with reasoning I think we have well 03 is infinitely better at debugging than 3.5 Sonet so like it definitely feels like we're headed in the direction where this may not be true in you know six months the next time we do this infinitely better 3.5 son it was like it seems to be way uh like as far as I can tell almost every every single inid I thought every single person I've talked to thus far almost universally claims that Sonic 35 is still like the the bee's knees until Sonic 37 came out here's where my AI bro stuff starts to show I'm actually useful here I recently posted my ranking of like the current models and how I feel about them Claude 3.5 is way better at CSS it is the best model for making something that looks decent for the web ever it knows react really well it can build components wonderfully quickly it can scaffold an application via a screenshot of it surprisingly fast it can't debug for [ __ ] because it has no thinking it doesn't have the ability to check its work built in it just generates word after word the way all standard AI works all the non- reasoning models work is they very simply take all of the words that exist in the history be it the question you asked the previous things that have been used in the chat and and based on all of those the next word is determined based on How likely it is considering the words that came prior every token every chunk of text is determined based on the likelihood it would be there comparing it to the text that exist existed prior the thing that this can't do is catch when it makes a mistake so if it makes a mistake 20 tokens ago or eight lines ago it doesn't know how to handle that eight lines down what reasoning models do that are different is they put out an output or they talk through their steps and then some tool sometimes it's the training sometimes it's an injected programming thing something stops it and says okay what is wrong with this or okay what are the steps we'll use to solve the problem it does these checks almost throughout and that's why I have my stupid weight index that I coined in my Alibaba quen qwq video the thing the thinking models can do is check they can say wait hm what well all of these words because once that word occurs it's more likely the next word is a correction to whatever was wrong before and these little hacks so to speak let us generate better outputs and it makes it more likely that you can reason through something difficult like a bug and when I'm trying to solve a difficult problem 03 mini is it's unbelievable how good it is I have had such good luck putting hard annoying problems with everything from scroll containers to weird database architecture into 03 and either got a really good answer or one that was so bad that I realized I must be thinking about the whole problem entirely wrong so that's what O3 is good at I've had a lot of problems like that where Claude just throws its hands up and gives me some really shitty react code but 03 can solve those hard problems but if you ask go3 to build you a beautiful website it's certainly going to build you a website I can't comment on its beauty yeah the the other way putting it there's a video called Vibe coding claude's Vibes are immaculate it feels great to use the tone it has the code it generates the vibe of the outputs that you get from the output of the code you render the website for to the way it talks to you about your lost beloved friend that you're venting about The Vibes of Claude are great The Vibes of 03 are more like a scientist more like you guys are however many hours in this video I'll say things I normally don't The Vibes of 03 are a very autistic person trying to make sure every word they say is correct triple checking everything they say before they send it it's that one weird friend who types the message deletes it and retypes it 15 times before sending it it has that almost clinical vibe to it it means it's way more accurate but it also means the vibe is off so when people say they much prefer Claude what they're saying is the vibe is much better with Claude the way they feel using Claude is significantly better 03 can solve problems better it can solve hard problems significantly better see everybody in chat I feel seen sounds familiar claude's great for asking it follow-up questions yeah you can ask all to follow up and it does better but you have to like tell it to do that it can't do it itself but yeah for the most part people agree The Vibes are on I have not felt the best about The Vibes of 4.5 especially for code stuff it's not very good at code from my experience but yeah it's it depend what you're looking for 4.5 is more I don't want to go too deep on the vibe of 4.5 I just really haven't used it enough to feel strong but yeah I know it's 100% true the transfer model does interesting things like the way that it's using the token that have generated to figure out what's next is considera of things beyond what I'm saying I'm trying to simplify it so you could better understand there are other channels that are much better at all these things you hopefully get the essence of what I'm trying to communicate here fine though this is Just Vibe talking okay is this Just Vibe talking is that what I'm saying here because I I don't remember that being true right I I I think that that at least as so if I take I guess I'm taking teapot as the problem is I'm taking Twitter as a represent representation of reality which it's not like the one thing you can always rely on is that Twitter largely does not represent reality but as far as I can tell every coder I've seen on there has said that son like anthropics CLA is just is just much better generally speaking now I don't really use jodies to program I find that I find that iteration Loop to be very frustrating and I can just write it myself better fast a lot of devs also find python to be better than go just saying fter and then have concern about the future and where I'm going so I typically don't um I I just can't I just cannot use it it just makes me you know so frustrated most of Twitter just writes JS it's true this one other important Point here is that like a lot of the way that we're generating code in tools like cursor is it's autoc completing it's tab completion it's like filling itself out as you go clad is really good at that because it's spitting out token by token models like o03 reasoning models it takes way longer for them to start responding so you don't get to cut it off as quickly you don't get to catch it when it's making the mistake and stop it and reroll rerolls feel more expensive because it takes longer before you can start reading the answer because it has to go through all the reasoning before you can actually see what it's outputting 03 Min is an incredibly fast model especially for a reasoning model but the speed it takes for you to start reading the response is much worse than it is with something like Claude and all of this really just plays into that Vibe side episod Diana do you want to talk about like the models that people are using the IDE that the people are using there's some really interesting Trends there NE I think we mentioned a couple episodes ago we saw this in uh the shift started VI started to shift back in summer 24 when cursor was being used by a big portion of the batch and now by far is the leader but the other thing that's happening this is a very fast and moving environment wif is a fast follower it's starting to be a very good product as opposed to cursor and I think Jared you have some first experience with why wind surf is like better than cursor yeah I I also have one more question what happens to somebody who's flying on an airplane and they want to code are they like complet are you just completely stuck in the water if you starlink my guy come on you know better Prime we got starlink on the way you don't have internet access or you don't um or just Amazon's down are you just like literally effed is that on one hand I've been where he is describing and when I'm in an Uber with crappy Wi-Fi trying to like quickly fix a feature it sucks I do miss the AI tool more than I thought I would in those environments that's when you really recognize how [ __ ] things are but at the same time I can't remember last time I worked in a code base that actually fully works fine offline like if Us East one is down you're down the likelihood you can get anything done in that time is already relatively low hell if GitHub is down I usually can barely code because I'm so often like having to go over there to reference [ __ ] to figure out what's actually going on in my project or switching branches trying to make sure it's up to date when these dependencies of Our Lives go down when these things that we rely on our Dev work goes down it always sucks and I think it's silly to pretend that we can fully work offline when nobody does anymore so the the airplane point is funny and I've definitely felt I felt handicapped when I don't have all of cursor's features because my internet sucks or they are down that that is a real thing I've experienced here and there but I've experienced the same when GitHub goes down and I think we should actually be much more hostile towards GitHub going down the fact that their up time is like one nine of reliability now is horrifying and we should be flaming them constantly for it like the world we're approaching where it's just like internet's off everybody go home get the hell out of here we got nothing there was a time when I was at twitch and AWS was down we all just kind of went and hung out in the cafeteria and or went home I I've I can think of multiple times where it's like oh AWS is down let's go grab a beer it's already like this I think the number one reason that people are switching is that cursor today largely needs to be told what files to look at uh just to be just to kind of go back to the previous Point uh coding on my airplan coding on an airplane tends to be where I do my best coding uh reason being is that I'm fully off the internet almost all because anytime you try to use the internet even on an airplane largely it's spotty it's super frustrating sometimes it's like 45 seconds just to go to a website and so often I will think through problems that I need to solve that are very hard and annoying that I don't need to um that I that I can solve by not Googling right it's uh like a big thing that I solved last airplane ride was that I have this large product that's how I do all my TTS and all that that runs through here oh my gosh it broke I have it oh whoopsies I already have it running right here it's already running oh whoopsies whoopsies okay there we go anyways uh and one of the big things I did was that I added a bunch of testing that I can do all that I could just like actually Test full integration style from a unit test the whole product and it was just something that I knew that I needed to get done because I kept having these dumb little bugs and so I was like okay well I'm going to do this and this is like an airplane kind of coding I want airplane coding here and it was actually really really really awesome this is my Uber coding isn't it this is the same thing I have like five tangents I'm fighting going down but this video is already way too long I'm going to pick the one that I think is the most valuable I might be picking wrong I don't necessarily care though this is also a rant that has a video queued up uh it's called AI has rewired my brain one of the things I actually love about AI is that this thing he's describing this offline Google wouldn't help me anyways difficult problem solving is one of my favorite things about engineering I love sitting there and thinking about really hard problems and figuring them out when the internet wouldn't have helped me anyways I do a lot of that like I build my own freaking sync engine for T3 chat and every resource online let me down the wrong path those challenges are much more interesting now than they used to be because previously the way I would do this like let's say I'm working on some really hard problem I would spend a day or two thinking about it usually like just on a background thread in my brain while doing other things spend the rest of that week building it run into a ton of problems spend the weekend thinking about it even more and then the next week rewrite the whole thing and after a two-ish week window I have it done but I'd spend a little time upfront overthinking a bunch of time implementing more time reflecting and then finally do it right the week after the crazy thing with AI now is I'm putting more time thinking ahead where I'm spending more time thinking about how the thing and the part should come together so instead of setting two days I might spend four but I can get through that whole Loop that took a week and a half before where I build the first version I see problems I think about them and I fix them since I thought about it more I'll often skip some of those things and I can build that first version in an hour instead of a day or two run into the problems I would have run into by hand otherwise blow it out and do it again and get it right it's compressed that two we window down to a week and I'm doing more thinking up front and it's been really nice i' I always wanted to be more that way but I felt irresponsible not getting an implementation out early now the implementation that first prototype that first version of a thing is so fast that I can put more effort thinking up front get a better model in my head and then go through that iteration process significantly faster and it has to do with more experience that helped that's how I went to the like spending two days upfront thinking I don't think most devs should start by overthinking I think they should spend depending on the difficulty of the problem spend a little bit until you have a theory that you can't disprove in your head a lot of it's how long do you have to think about a thing before you hit the wall where you have to try it to figure it out my skill has improved to a point where I can think longer before I hit that wall it's helped me a bunch it isn't the source of all of my improvement over the years but it's been a meaningful change that I'm actually quite excited about to do airplane coding because it's like I get to just build something that I want to I want to solve a problem that's much better way of putting it the implementation cost is now much less so I'm Freer to think about possible solutions yeah that that's the overall thing and I feel like I'm spending more of my code time thinking about hard problems than I ever have in the past and I love that it makes it more fun for me for sure that requires no internet that requires no starting of anything I want to just be able to just solve the thing quickly and it it actually feels really nice it's yeah prison coding it's actually something that kind of changes your mind and changes your perspective of how you do something and that does it does require you to have a bit of a Mastery over the language you're using and um the space you're working on it's pretty fun I think it can really change a lot of your perspectives because it's like you exploring the space in the way you think it's best to solve a problem versus somebody giving you a path there's this whole concept called anchor biasing where like if I say if you say hey how much do you think this movie cost to make and I say 20000 million you're going to base your answer off of the the term 200 million unless if you know the answer right if you KN if you knew nothing about how much does X cost and I say an answer you're going to just kind of you're going to just draft off my answer you're gonna be like oh [ __ ] okay maybe 150 million right whereas if you would have answered it before me you might have gave a vastly different answer because you're not kind of biased towards that and so by always relying on these tools you tend to end up being very biased towards what they first tell you the answer could be and you kind of work down this like potentially a local Optima that's not quite as good as it could be if you were to kind of explore the space in your own kind of creative way and so there's this it's kind of like just fun thing I love airplane coding remember the thing earlier where Prime said this is a learned behavior like you can develop this like mindset without AI I'm G to flip the same back on him the mindset of not getting stuck on One path is something that great developers all need to develop and it doesn't matter where that path came from if it came from a bad assumption they had if it came from a conversation they somebody else they misunderstood or got the wrong lesson from if it came from an AI telling them to go this way your willingness to throw away the wrong solution from the root is an essential mindset shift to go through one of the skills I'm most proud of and I've been trying to find ways to explain it well enough to help others develop it my ability to detect when the path we're going down is wrong and pull out is way better than average and I often find myself in engineering conversations with people on my teams people at other companies whatnot where my role is effectively to come in and say this whole path you're going down is wrong reset and I totally agree with prime that people get stuck this way all the time but it's a mindset you have to work through nothing to do with the tooling at all and I don't know if the AI tools are going to make this more likely or not all I know is that I I have developed a skill to get around this and I hope others do too it's it's it's an amazing kind of process because it's just you trying to like creativity your way out of like hard problems it's just this unique way that's just it's very fun I actually can it's like one of my favorite forms of programming in your code base so you have a large code base you can tell what to do but you have to tell it like where to look in the code base wind surf indexes your whole code base and it's pretty good at figuring out what files to look at on his own there's there's other differences he's just wrong about a lot of the comparison stuff here with the different Ides cursor index is your whole code base too I don't know what's going on with the way he's using these things where wind surf was better at like whole codebase problems than cursor I've had the opposite experience the only thing wind surf is good at doing is running random bash commands for you if you don't know how to get the project running on your machine wif a lot better but for my experience it is not good at actually solving hard problems in my code base dude but I think I think that's the most important one at the moment uh quick question one for wind surf uh one for wind surf two for cursor if you've used both I'd love to see your opinion or if you just use one one for Cur uh one for wind surf two for cursor one for wind surf two for cursor yeah okay strangely a lot of zeros I guess not too Strangely I think again I index into probably the non-founder chat like the reality is most of you probably aren't Founders this is you know I I bet you if we were to redo this poll but we did it say in Theo's chat it'd probably be a very different set of answers let's do it which ID yeah that's what I [ __ ] thought I'm sorry I just I don't get the wind surf hype at all I don't know who these people are all of the wind surf type people I've talked to have been coding for less than a year I just I don't know serious devs using wind surf right now and I feel bad talking so much [ __ ] I just don't know them I haven't met these people I can't find them anywhere if you're an experienced Dev that's actually using wind surf every day as your IDE of choice that has tried cursor and found wind surf to be better and you make over 100k a year doing software development DM me I am so curious I want to pick your [ __ ] brain cuz I don't get it I've seen wind surf wind surf seems genuinely better for somebody who's learning how a code but for everyone else it makes no [ __ ] sense to me also this is crazy cursor in vs code vanilla neck and neck there are as many people on cursor at least from my admittedly biased Community as there are vs code users not using an AI chat app that's nuts that's nuts th this is huge change the most popular IDE had not shifted in our space for like eight years VSS code as it was has been the standard since [ __ ] 2018 and in almost no time we have a split poll here this is crazy we're in a wild moment of change right now and obviously vs code plus co-pilot still wins but at 35% the biggest editor in any sub Community being 35% was unimaginable even a year ago this is wild but also when surf getting two votes kind of makes my [ __ ] point anyways not Founders not going to make it facts facts of life I'm just saying I think that I think we'd actually like if you did it in uh if levels IO were to do the exact same poll I think you would also see a very different uh percentage of people using one thing versus the other thing I think the number of wind surf people in his audience shows how far he's broken out of the like deep nerd bubble and I'm proud as [ __ ] of him the fact that Prime can consistently get 250,000 views on a video that's a day old is unbelievable but it means he has a lot of people who are less experienced in his audience too those people have less money to spend so wi's attractive to them and they have less experience so wi's attractive to them Devon does get mentioned but the drawback of Devon not really being used for serious features is that it doesn't really understand the code base also I I know I'm being spicy about wif right now if you disagree with what I'm saying and are experience and just genuinely had a better experience with wind surf I will not flame you for sharing that in chat don't think I'm going to do the thing where I go [ __ ] on someone I actually just genuinely want to understand CU it's so different from my experience using it is being used mostly for small features and barely it's like barely mentioned damn still use uh used a lot of and the reason they use it is because they want to actually use the reasoning models it does get posted people post some of the debugging questions to I know at least 20 or 30 of the people in the current Bach using T3 chat they started after this video was recorded but also if you're a YC founder watching this you get a free for onee coupon in the book face uh deals page go check that out a lot of IC Founders seem to have missed that to figure out the use the more powerful models for reasoning because right now cursor with serve are still in the old world I mean old world less than six months ago of pre- reasoning models not in the test time compute so Founders are using that and uh there's some Founders some of them are self-hosted as well self-hosting models because maybe they have more critical sensitive IP they do that and now talking about the shifts in terms of um I do want to POS I actually think that there's an entire world that does exist where it's like customized or ra ragged out uh ragged and fine-tuned and all the all the proper words here models that are locally running for companies that are the best right I think that that I I I do think that there is like a big future there that actually could uh that a bunch of companies want right you tune it on your architecture you tune it on all these things just to see like just to hopefully get some with it okay new poll someone is asking what are you question mark uh I'm just going to put uh student SL learning uh uh learning to code professional nine to five kind of guy um uh freelancer right which is 9 to n the next day what's the other one n non- coder here for Vibes you're just here for the Vibes right just here for vibes uh is there anything else well because if you're unemployed well unemployed founder or unemployed right this is what you you you are a professional you just happen to be unemployed at this point or founder or you're a Founder right cool let's do the same poll which are you very interesting I also have no idea how his poll splits here I am very excited to see how his poll goes very interesting one other big difference here as silly as it might sound you guys probably think I'm over indexing on this I'm not I'm right the time of day we stream matters a lot here both in that the audience that's around at a given time is different but more importantly the audience we've built for our live streams due to the times that we stream is entirely different so if I was to start regularly streaming at the same time he does I would expect my numbers to skew in the direction of his what if it's a combination if you're working if you're working and you're a full-time employeed then you'd be an employed even if you're in school I'm actually just curious what kind of the break down is cuz my guess is that I'd index heavily into professionals then students and I I did assume that non-coding is non-coders are my my smallest section yep and Founders I'm surprised actually Founders are bigger than Freelancers I genuinely thought Founders Founders and Freelancers you know in some sense you're kind of the same kind of the same batch founder mode got to pump those numbers up hey hey the 10 this is what I thought this was the big difference I was oh wait no we're both exactly 25% on students huh I would have expected lower than that for me interesting our numbers are like identical here actually yeah 6% freelance 60% Pro 6% freelancer 27 I'm a little low on Lower on Pro a little higher on freelancer and a little higher on Founder aren't we the same on Founder actually yeah so I'm a tiny bit lower on Pro and higher on freelancer but that's about it for the differences we're actually very similar here which is interesting I think we were both wrong here we both assume the would be very different and they're not it's also there's a huge gap between the live audience and the non-live audience but that was interesting people that are here for uh just The Vibes and aren't even coders I want to let you know appreciate you okay you specifically can't even believe it absolutely love it absolutely love it addicted to pain absolutely I voted wrong well then dude then you probably probably I also have way more people for the vibe though right yeah 6% look at that more by the numbers too even though I have a third is viewership right now that's nuts thank you all for hanging out we don't even deserve to vote on this anyways all right they do that and now talking about the shifts in terms of uh models the thing about Coen the big game in town that we saw uh six month ago was CLA on it 3.5 is still actually a big Contender most are still using it but 01 01 Pro and 03 meaning all these uh resun models are starting to see a it's almost like getting neck to neck now close with a Sonic 3.5 I don't get the 01 and 01 Pro usage they're just too slow and 01 Pro is so unreliable when you when you use it it just takes so long to respond if a problem's hard enough that I want 01 Pro to help me with it I'd probably rather just do it myself 03 mini has been a huge thing for me not just because it's like cheaper but it's so much faster it's so fast and I genuinely really like it and uh saw some people saying is an 01 Legacy no there's no 03 yet it's just 03 mini so 01 is still the the best reasoning model by open AI just 03 mini is really good but O3 mini was also rushed out because they were scared of deep seek and 03 min's price is exactly double deep seeks and tell me that was it by Design they're not pricing something at $4.40 unless they're going after someone else directly other one is 40 virtually no use for Coen and the other interesting thing is uh deep seek R1 the problem is Gemini had such a stupid initial launch that when people are like hey you should try out Gemini I'm just oh no Gemini 2 flash is actually quite good it's a default on our site for a reason but yeah the original Gemini was garbage I see why you'd feel that way okay right like dude dude I just like what are you trying to convince me to use Gemini dude that's crazy has like the longest context window I've heard from a couple of Founders that they do use it and the way that they use it is they put their entire code base into the G like context window and they just like tell it to like that's because they're entire code bases just a bunch of glue for npm packages so it's only a few hundred lines long fix a bug and uh that's that's how people were getting by using everything with cursor plus uh Claud yes but a million tokens is kind of insane that's a lot of [ __ ] code yeah it doesn't always work but like sometimes it can just like one shot fix stuff because it's the whole thing in the context window it will be interesting to see as people get more adoption on the newly released reasoning models with flashback 2.0 oh this is actually cool barl Lop here's sister apparently worked on Gemini super cool and I totally agree with the custom tbus that's the reason Gemini is so good Google has this weird advantage that no one else does where they have all the data they need to train all the scientists they need to make the good models and the architecture and like CPU like stuff that they DIY in order to make them really really fast there is no other place that has all three of those things there's a lot that have one and maybe two but no one else has all three which puts them in a crazy position right now like for Google to lose the AI race now they have to massively screw up which to be fair massively screwing up is kind of like the DNA of Google that's their brand but if they can steer away from that at all and do like anything right going forward it's going to be hard for them to lose uh I don't think people have tried it yet I don't know what flash window plus reasoning could be a good Contender what is the estimated code that's being written by llms in the current Badger he this is pretty crazy so we we explicitly asked this question what percent of your codebase do you estimate is AI generated the way I interpret the question is like like of the actual characters in your code base not including any libraries that you imported like how percentage of like the characters were like typed by human hands versus like emitted by an llm and the crazy thing is one quarter of the founders said that more than 95% of their codebase was AI generated wow Prime is going to have a lot to say here this one hurts me a bit too I just wanted to go up front with that 95% of the code I generate might be AI but of the code I commit less so so let's see what he has to say I I think that's kind of a dumb answer and or I think this is kind of a bad question I think a better question is of the lines of code how much was exclusively 100% generated by AI versus some level of uh human inter uh interaction because you could also say sorry I coughed so hard that I'm literally crying right now um because you know if if you're programming and I go you you know if I go like view yes dot yes dot yes right it's kind of like what percentage of that code did I even type right I didn't type a lot of code I actually I just used my LSP to type a whole bunch of code what percentage are they actually doing so if you generate a if you generate a line and say I start typing View and then I do that and go no I don't want that actually I want this and then I do okay I want that but no I don't want this I want like what percentage is it actually generating it's kind of hard to call that 90% right if you're if you have to go back and correct what an AI does it doesn't feel like it's doing it's it's not cuz characters themselves aren't good I don't think that's a good measurement of it it should be unaffected like untouched lines of code that were purely generated by llms like that would be that would be a pretty great a pretty great response because if it critically catches none of it like if you had to constantly rewrite stuff but you're feeling like the llm is doing a lot I mean people are really notoriously bad at predicting percent uh percentages like that is just not good is like an insane so I'm not sure about I don't know about that it's not like we funded a bunch of non-technical Founders like every one of these people is like highly tactical completely capable of building their own product from scratch a year ago they would have built their own product from scratch but now 95% of it is built by an AI except from scratch npm for you know maybe it sounds like we have one or two examples of people who um they're so young that they learned to code in the last two years years so they actually don't know a world where cursor didn't exist yeah then I would argue they're probably not super technical I it's very hard for someone to know a lot and completely rely on these AI tools I'd be very shocked I would personally be very shocked if you used only things something like cursor your entire time you learned how to code and then you end up just take just just using that if you had to go offline Could you actually do anything and I do use it regularly when I don't want to learn how to do something when there's just certain parts of cod that I don't care about like there's one that I knew what it was like Hey I just need you to take tree sitter and parse the C++ and let's build out like a depth chart I use that to find cool stuff and that was fine I didn't need to go read a document I just wanted to get some stupid tool done and I wrote it super poorly the the tool was absolute garbage I went back and made some basic changes to it but I was completely okay effectively Vibe coding my way through that um you know if you will call it Vibe coding because I pretty much went and um I'm going to throw away all the code and never use it again so I I don't want to like discount where like the the the awesomeness of of AI but at the same time I really do hope that you guys feel excited and you want to learn yep I I'm fully aligned here there are so many things that get in the way when you're trying to build something that they can like hurt your motivation and keep you from going all the way with that project worst feeling ever I and I love that AI could take those parts those annoyances like figuring out the Wrangler toml file and make them go away so I can get back to the fun part and actually building the important thing that's awesome it's one of the best parts of these tools the problem is when you start optimizing away all of the pain you don't go through it and if you don't go through it you don't get good you have to do the work and if you don't you'll struggle if you use these tools to maintain motivation because they let you skip the annoying tedious things and also as like an assistant that you can ask questions and learn from those can make you level up much better but if you're using it to avoid anything that is hard you you're not going to find success everything understand why it's bad then take the Vibes you produced which is also synonymous with the word horseshit take that and reform it into something that's actually useful one of my best companies this batch actually is exactly this the founders are extremely techical minds but they're not classically trained in computer science and programming and they are incredibly productive and able to produce just a ton of like really amazing product and AI is writing almost the entire thing it kind of makes me think a lot of uh the discourse around Z are the first digital I do want to say that there is I know for me that's horrifying but at the exact same time there is something kind of awesome about that that anybody has anybody with enough tenacity can make something so there is something cool and hopefully they get program pilled and they want to learn how to program like I I would I would really love I mean I do love that like I I do love that that aspect that people are getting accidentally program pilled and they want to learn how to program because of llm so there is a good part and I don't want to I don't want to like completely discount that kind of stuff right why why is it horrifying because the the software they're going to produce is going to be just so difficult the thing is is that when they sell when they exit when they actually bring on Engineers like I mean if you've ever worked in some old code bases where it's just like the absolute utter Wild Wild West like there are just things that just become so effing difficult and and it's it can be very hard like there are some pretty awful experiences out there like here's a good example of some awful experiences right here like this code does exist you've used this code you've played with it you just didn't realize it was being executed right that's all and so there you know but somebody had to write that and somebody had to maintain that haduken code yeah little native that grew up with the internet this is like the generation that grew up with Native AI coding tools that they skip the classical training of uh software engineer and they just classical training being a react boot camp in six months no I mean the nice part is that computer science is largely irrelevant compared to what programming is at least in our day and age because we have created a world in which uh programming is becoming more of a trade than anything else so it's like you don't need to know the fundamentals of why metal melts at a certain temperature to be able to weld you just know that you need to use this this you know this amount of hot make this go good and I get good at the actual activity of it not at the theory of it and that's fine I think that's what programming is turning into yes we won him over I missed that part but I am so happy with that conclusion because I thought about this for [ __ ] ever the example I always give is skateboards I get so I come from skateboarding you don't get better at skateboarding by sitting in class and being told how how the skateboard works like what types of wood are used and where the history of the wheel is you get better at skateboarding by taking a board going outside and getting hurt over and over again until somehow you ride away that doesn't mean the foundations and the fundamentals aren't useful it doesn't mean you don't benefit from understanding the difference between different types of trucks but the more you're on the ground going the more you'll be able to understand the importance of those things and ask the questions to figure out what differences matter I've always felt that way especially about programming and I've always gotten in fights with these fundamentals people like the people who are are always pushing that you need to learn all the names of all the different patterns for data management all the different structures all the different [ __ ] I hate it I've always hated that because I'm better at foundations and fundamentals than a lot of those people and those people they they annoy me you get good at the fundamentals that matter when you run into problems the fundamentals solve and as long as there are good paths for you to discover those things later on you're going to understand coding much better if you learn your algorithms two years in than if you learn them before you know how to use an f- statement this is the least bad Bob Martin take I've seen in a while actually because the number of programmers is going up constantly the average experience isn't meaningfully improving that's a fair point and a good way of putting that I can't believe I'm agreeing with a Bob Martin take just do it with with the Vibes but they are actually very technical minded I mean they have degrees in math and physic ma physics yeah so they they they have that raw let's call it more like system thinking type of mind that you still need maybe we should talk a bit about that it's like what's still the same and what has changed I think this I talk about this all the time the the ability to think through the system and figure out what is and isn't working and using that all to identify the problems that you have is insane it uh yeah I if you don't have that you're [ __ ] you've always been but you are now more than ever those skills went from being essential to be a senior to principal Dev to being viable at all HP coding will enable people who have those kinds of tactical Minds who come from other tactical disciplines like math and physics to become highly productive as programmers much faster than it was in the past like I remember they were like coding boot camps like back in the day they would try to like retrain physics people into programmers and it like it didn't work that well because it just takes too long to learn all of the syntax and all of the libraries and all the stuff that you have to know to be really productive but like now now it's a new world the this is like literally the CS Lewis abolition ofand chapter three argument which is that we want to turn something from a quality into a quantity it's purely reducing things into productivity to be fair we have been charging companies way too much money for ourselves as coders for a while a lot of the effort everything Google pisses money into from AI to all the coding boot camps to the Google summer of code to the crazy workshops they do at colleges and all of this all the effort marketing funding and everything going into helping people learn to code is because they're trying to make developers cheaper so they can improve their margins that's always been the case it's just they they want more and I get it it it's it's actually it's actually it's like this is actually kind of a wild thing it's just like a wild thing watching this happen again where we are purely reducing man into just atoms and movement and that's it I mean boot camps are also very specifically focused on getting you hired at companies and I think there was it was during this around like 2015 era where just companies themselves are rethinking how to in their hiring processes and it was moving there was a real I do want to say that when he says it takes to learn along it took me a long time to learn okay I I really struggled with recursion I really was not a great programmer to begin with kind of funny that he says he struggles with recursion considering the the setup we have going here right now but yeah but I had a really really really really high drive and so my ability to have a really high drive absolutely dominated my inability to learn quickly right CU yeah I couldn't learn quickly so instead of instead of not being able to learn quickly I just put in 15 hours a day like that's a really easy way to make learn slow go fast so the I'm going to say a controversial thing he probably won't agree with if Prime was learning to code today he would be a Vibe coding [ __ ] god like a machine the fact that he had that level of motivation and is no longer as blocked on what he's learned already so far it would be unbelievable Prime in this era if he was to like restart today if you were to reset his brain 15 years and drop him in the field right now he would have had so much fun he would cuz he would still be coding 15 hours a day he would just be putting out 5x more code and that would have been incredible to watch and there are people like this now people who I know who were actually getting really good really fast already just because they were putting the hours and not because they were smart but because they were working and putting in the effort those people can do crazy stuff with these new tools and Technologies and it's really cool to watch it as it happens to watch these highly motivated people who's only enemy is their own knowledge having access not control but access to more knowledge that they can probe and point and poke at using these AI tools it lets them get that knowledge out much faster they can get access to it in ways they couldn't before that's so cool like it's not many people have been in the position where they went really far past their peers and the people around them there have been some incredible people that came out of this community that showed up here way younger than they should have been to be here and way less qualified than you'd expect them to be to be here that were here because everyone they knew wasn't keeping up with where they were they just cared so much more that they got to be like employable levels of engineering quality as a 16-year-old kid in India their the best programmer they knew was their teacher and they went past them what do you do then when you were the best programmer you know Nexel mentioned yeah people like Nexel it sucks so hard to be the best developer you know and to not have people you can go to to ask questions I I felt this vacuum once in my life when I was a freshman in high school I joined the Linux club that was entirely seniors at the time it was all the 18-year-olds and they would invite me to things I shouldn't be at I have so many crazy stories of hanging out with those guys they were all incredible some of them are still doing Dev work every day some of them just working hospitals and stuff but a handful went all in on the dev thing and I was dual booting my laptop with Ubuntu when I was 12 thanks to those guys but then the year ended and I was a sophomore and they all graduated and I didn't have anyone who was better than me around anymore and my my mind just crumbled not having people I could ask these questions people I could look up to and aspire to when that got I TR to say it felt like it was taken from me and I lost this thing that was so exciting and important to me that motivation and I barely progressed for the next three years from freshman year to senior year of high school I did not improve at software because I didn't have anyone around me to look towards any way to Pace myself I just was and it's not like my peers weren't getting into software either they were but I was the only one that was let into the group of the Linux club and we reformed it as the computer Club the next year but it wasn't the same it was a bunch of kids playing Minecraft now it was no longer these Wizards that I could learn from and when I lost that I just kind of fell off if I was more motivated I might have found other things senior year I ended up finding the New Boston YouTube channel and learning enough Java to get a five on my AP exam but other than that I got nothing out of it I just stopped improving as a developer for the rest of my high school experience cuz there was no one around me I could look to and say oh they're better than me I want to get there the best devs are the ones who don't let that stop them and I like to think if I was starting today in that same position the combination of social media so I could have kept up with those kids combined with the AI tools I could have used to push through those hard Parts I got stuck on I might have done much better I might have gotten out of high school a decent programmer instead of having to go to college first because when I was in college I was surrounded with Incredible engineers and that motivated me a ton but in high school I wasn't and it I'm not going to say it held me back I held me back but I held myself back CU I wasn't motiv to keep going because the further I got the better I got the more lonely I felt and that sucks and if these tools could help somebody feel less lonely and more productive if it can help someone push through those things that's awesome that's really cool and I absolutely would still have gone to college if I was a decent program and coming out of high school I I generally push towards College because I got so much from my college experience not even learning how to code just being surrounded with other Engineers the connections are why College was valuable for me the peers the pacing myself with other others was so valuable that if you go to college and you find out a year in like ah this isn't for me and you drop out cool fine awesome my CTO Mark we went to college together I barely knew him there but we knew of each other and now he's my [ __ ] best friend only reason I can do this stuff go to college the connections are so [ __ ] worth it anyways how often do I use recursion regularly recursion is extremely important software engineers in their hiring processes and it was moving there was a real shift away from like we want to hire classically trained computer scientists um whiteboard algorithmic problems towards we actually want people who are just really productive and write code quickly and some some of these arguments are like Evergreen Eternal right like I remember when rails first came out there was just like a real sense of oh like I don't know like active record as a way to like interact with your database was seen as but like there was still this same flavor of argument right like I don't know like if you don't really understand the internals like you're just going to write like crappy low performant web software yeah to be Fair they were right the people who only learned active record and never learned how to actually do databases are the reason the fail whale happened on Twitter and the reason all these old like rails code bases fell apart there also the reason why Technologies like vitess that makes Planet scale and MySQL scale so well started to happen a lot of those came out of the Rails world and the shitty queries they were writing so benefits and negatives but yeah the the bar being lowered so far to allow more people to ship good software quicker was awesome and I will praise rails forever for the revolution it represented in the introduction of this full stack way of thinking and building that doesn't mean the software that came out was always good though how do you feel those AR by the way did happen a lot if you look back on it now my feeling is that many of the most successful companies I would say stripe Gusto are just two that really spring to my mind as ones that really heavily leaned into the actually we just want people who really produced with the tools and we're going to change our whole hiring process to just select for people who are good at like isn't strip like known as being one of the single worst libraries ever to work with in the universe isn't it no no no I I will jump on as Stripes number one hater I'll jump on this stripe revolutionized DX in a space where DX had never even been considered before it set a new bar for the expectation developers have integrating Services it was the first like SAS that you would integrate via lines of code into your code base without having to plug it into their infra it was magical it changed how we think about Integrations so much of the stuff we know and love today would never have happened if stripe didn't do what it did as early as it did there are two problems with stripe the first is that payments are an inherently complex thing that results in inherently complex Integrations because getting payments right is difficult just sheer size of stripe and the fact they have to maintain the exact way it works in the past with today while also handling all the new expectations these payment processors providers have but also the bar that they set has since been passed if the DX quality we expected was two out of 10 they set a new bar at six they 3x it now we're expecting eight and nine they haven't made it there yet but they care a ton they're trying they had me to their freaking all hands to do a call and an interview with the CEO because they cared so much about my feedback they want to win they listen they care they will win I would not want to compete with stripe especially right now shout out to the companies that are trying I W I want to see polar win but at the same time stripe cares a ton and they do ship things that are incredible I hope that my shitalking on the absurdity that is integrating payment systems through stripe does not imply that stripe isn't one of the most absurd achievements in the history of software just like isn't stripe just like God awful stripe is a piece of [ __ ] okay Stripes API is nonsensical okay with the tools and we're going to change a whole hiring process to just select for people who are good at like the interview shifted from teachers how you think to you've got three hours on a laptop and you need to build a to-do list app and build it as quickly as you can and those companies have had tremendous amount of success it is it does seem like at some point as they grew and they scaled then the bottleneck did actually become having people who were classically trained in systems thinkers to sort of scale up and architect things and to your point like now it's actually just cheaper to like reroll and just like write everything from scratch and try and debug like the skills might just be completely different yeah I mean we do to be completely fair this panel and me have very different motivations right this panel entire goal is to find companies or to find a group of people who need funding fund them get the product into some level of profitability sellability and when I say profitability meaning like you need to be able to get like $100,000 uh annual revenue uh reoccurring revenue and then you're going from seed round into uh you know series a and all all the different things that kind of go that kind of go into trying to get a company so that you can get series a series B and then you can make your exit making a kajillion dollars right um and so it's like the what they want at the end of the day might be different than what a lot of people who work at the result of these companies want meaning that mostly agree with him here so far I will make the request to my Editor to chop until this guy had just started talking because most of the hiring stuff was nonsense I just want this one piece the thing that most people don't appreciate about YC like there's levels of understanding of like like how well do you understand YC and like how they do what they do and it's really hard to hit a certain level of that understanding unless you're in I feel like I'm talking about scientology here but just hear me out there's a lot of you who mix up YC and VC they assume that it's just one in the same all VC bad [ __ ] on YC whenever they see anything from it Prime is not at that level Prime understands much deeper where YC's focus is which is how do you ship something that people actually want to use and get far enough that you can get to the next stage so that you can hit that series a so you can hit those Mr Numbers so you can get this product at a point where it's actually a real company I totally agree with him on that the one piece I want to add here which is the next level is that you need to understand who's at this table and where where they came from what their histories are and the people that they talk to these guys sure talk a lot to these really early stage companies during the batch but up until recently there were only two batches a year and they were three months the other three months for each other so 6 months of the year was spent with no startups around and they spend that time talking to the ones who wanted to talk and most of them were the ones that were further along maybe years along that just wanted their thoughts on these harder problems that come up over time I just did a talk with Michael cyel on Tuesday and got a ton of great information and ways of thinking about my business as T3 chat scales they're an awesome and they talk to people who have gone through all of it and half of them have gone through it themselves the guy right here is one of the founders of triple bite which is a massive company that has helped streamline technical interviews that a lot of the companies we work at and are talking about here like the big ones all use these guys know what those scaling problems look like but there's something more important you have to be able to get there in the first place if you were to build in a way that scaled early you're less likely to make it to the next step because you're putting more effort in every step step you have to find the balance here and I think YC is one of the few groups of people that understands both sides of this coin they present themselves like they only understand one so Prime's not wrong for making these assumptions I had much worse assumptions about these guys before I was part of the crew and I would talk to them regularly they know their [ __ ] they've been around for a while like when you are working at a place that's like maybe series C or series D and it's been around for a long time the choices that were made in series a have a much different feel for you than they did during the time of series a one tiny addition there having watched a couple companies and like been an investor in some companies that have made it to these CDF IPO stages the biggest mistake they make in those early stages has nothing to do with the tech it's the hiring usually they hire to aggressively too early the biggest mistake and I've seen a bunch of these companies make this mistake is they raise their series a they have a whole bunch of money in the bank they button up and say okay we're a real company now it's time to do things the real company any way they hire a bunch of backend Engineers they hire a bunch of support Engineers they hire a bunch of designers they act like a big company when they're not one yet and they start making the big company Tech decisions building heavily into kubernetes when they don't need it yet and doing these things the companies that I found run into the fewest problems are the ones who go out of their way to use the simplest scrappiest solution for as long as they possibly can and if they can swap to another simple Scrappy solution in order to avoid going for that big one later on they do and the smaller you can keep the team the better my team's half the size it was when I left YC because I started falling for this myself I started over hiring and trying to be a real big company and it took me a while to realize oh we're not growing fast enough for me to behave this way I screwed up so sadly I had to do my least favorite thing which is let go of people that didn't screw up themselves none of the people I had to let go of at ping were people who had made a mistake or done something wrong it was more a matter of we had to adjust where we were going and I went out of my way giving everyone generous Severance and helping as many as I could find better gigs but you have to like make this a point I even one of the companies I was talking about investing to they were raising way too much money like an insane amount because they could the demand was Unreal but my concern was if you're going to if you're coming out of the batch with 17 to2 million in the bank you're going to be tempted to go hire dozens of people and I I wanted to adest I know this company's going to do well but I didn't want to encourage the bad behavior of over hiring and all that so I made the founder agree that they will have less than 10 Engineers by the end of 2025 and less than 20 Engineers by the end of 2026 and he without hesitating said yes absolutely if I hire more than that I screwed up and I immediately handed him my phone to give me his info so I could invest because the biggest mistake is over hiring and trying to be the big company too early not that they bet the small Scrappy way and it did it scale I've seen that almost no times because we all know the shit's not going to scale we all know we're going to hit a wall I'm just consistently surprised how much further along that wall is than we we expect even a company like versel my favorite example of this of like a scrappy thing if I pick some random project that I have here here is me trying to make that phone script so we have lots of different files here this project by versel there's a big team working on this it's a legit project at a billion doll company watch what happens when I right click and hit rename oh they changed it that's hilarious they did that because I roasted them up until two or three days ago at soonest the rightclick rename would use the browser builtin crappy little text input box because it was the quicker solution it meant less work less fragility less things that could go wrong when you do the scrappy thing it's less surface area that can go wrong is it more likely something will go wrong in it perhaps but the less surface area you have the more likely you are to make it out of where you're trying to go the bigger the solution is the more likely you are to have bugs and the harder it is to steer in a different direction if it turns out you're going the wrong way the only thing that scales is simpl everything else that says it scales is focusing on one dimension or is lying Simplicity scales surprisingly well it doesn't scale perfectly you can't keep it simple forever but if you put the effort in to maintain Simplicity you will get further than anyone else who doesn't so you might be you might have different opinions at this point that battle was actually fought to a standstill because of course using active record or rails allowed you go to go from zero to glassie just said there's a company that fits this bill so heavily yeah there's a ex example company in mind that I'm thinking of here for sure and you know which one it is one very quickly but then what happened to Twitter it became the fail whale right like basically once you get to one like one you know that architecture will not get you to a billion or 10 billion or hundred billion dollar in valuation or users or whatever like it's just not going to actually work so I think half agree I think one of the coolest things that has happened this is one of the places where I don't agree with Gary because he's just not as tuned in on like modern Dev tool stuff the serverless revolution has allowed for a really good developer experience comparable to that of something like rails in a way that actually scales it's more expensive than if you did it the right way with dedicated servers but the fail whale problem where your server can't handle the traffic if you're building even somewhat competently that problem is now gone which is awesome just don't use postgress this you really know what you're doing you're going to see a fa and then that there's new oh [ __ ] we not know the fail whale back in the day when Twitter would get traffic surges cuz like some news dropped or like some crazy thing happened with like the queen in the UK Twitter was a single giant rail server that couldn't handle the traffic so it would crash and when it crashed you'd get the fail whale they had to rect everything to get out of this problem but that's because the the monolithic server way of building just doesn't scale for [ __ ] and twitch had to move off of this too this is one of the many problems with rails it's a separate thing but it is a good point but we can't think of scaling Solutions the same way that we used to because previously good DX meant bad scale characteristics now with serverless your bill might not scale great but at the very least your infra scale is totally fine it is basically impossible to go down if you build things even vaguely correctly using tools like versell Planet scale and all the other tools and Technologies I recommend here that's a huge change and I wish that that Nuance could be injected here but none of the parties in the video we're watching here are going to understand that wants YC is wrong here Prime might actually be better about this year I'm curious to see what he has to say he does bring up a really good point TJ calls it yacht problems te mentioned by the way he streams uh I love that I I do I actually think that there is a lot of value in this mindset as well so I'm kind of in this conflicted part where I kind of go back and forth on this which is what is the value of producing horseshit code if your idea of horseshit code is to get something that works so you can prove that it works in the real world versus getting something that's actually going to be useful to actually hack on and make further features as time goes on and so there's kind of like this there's two different worlds that they're describing and the world that he's specifically describing is called The Yacht problem uh the yacht problem world where you now have a billion users you got yourself the yacht problem you got yeah the the thing that I think has kind of changed here which is cool is that previously when you got to the yacht problem where you had enough success that your Stu was falling over you would have to hire the right people to dig you out of the hole you put yourself in now you can get pretty far just paying higher bills from your service providers using things like AWS using things like versell plet SK I'm talking about you can pay your way through that problem to the providers instead of having to hire the engineers and as terrible as a $4,000 for sale Bill might be paying three Engineers 200k a year instead isn't that much better and that's that's like to get to some pretty crazy scale too you could also pay thousands of Engineers 500k a year and pay AWS for tons of info that you're not even using that's what ends up happening this video is already pretty long so I did you guys a favor there's a whole section here about interview best practice stuff you've heard me talk about that all in the past we're just going to skip through it and get back to the point I do think skills of reading code and debugging are Maxim is like you have to have the taste and enough training to know that the llm is bad stuff or good stuff so like bad code or good and I think you can see it clearly sometimes if a candidate is using the tools and there's actually a reasonable solution at the llm outputs and then the candid is like oh this is actually bad that is a sign so I think knowing kind of more the high level thinking to know what is good versus bad in order to do good VI coding you still need to have the taste and you still need that kind of classical train maybe not necessarily classical train but enough knowledge to judge what's good versus bad what she's saying is that you need 10 years of programming and having to have a bunch of things go wrong and watching all of your programs turn into absolute crap and then after going through that then you actually understand understand what makes something good and what makes something bad and when I say what makes something good what makes something bad I kind of have this general idea of all software oh wow that is a that is a very White theme oh [ __ ] oh [ __ ] and so I personally I let's see how his diagrams come out here I'm excited I mean I think every Pro every every program can be broken down into a series of is he using a mouse for that that that's got to be a drawing tablet right like that that has to be a drawing tablet from how that looks 1 to 10,000 chunks of of code one one to 10,000 all Mouse godamn that's kind of how I look at almost every single feature it you know you rarely see something that is like whole okay I'm not going to lie no offense to Prime I love that he's drawing more the visualizations help but I'm just I've earned my right to be amused here let me be better at one thing Guys One Thing One Singular thing my penmanship has been terrible my entire life I've been nervous as hell whiteboarding in interviews my entire career excal unlocked a new part of me i' had never seen I'm going to laugh a little bit at this now I've earned my I I've done my time I've put the effort in I'm going to laugh a little all in of itself that can't be abstracted by some sort of library or something that isn't in this and so if you can figure out how to land into this and one shot this you typically can become a very good programmer because now you have a few interfaces you need to design through your system and you can just kind of oneshot these 10 thousands what is this even a diagram of right classically trained I know we call classically trained which is kind of like a joke to what I was I mean you know even my classical training is like not even classical training yeah I I do agree that having the previous experience makes it much easier for you to get through using these tools somebody with 10 years of coding experience using these tools is very well off right now people who are learning in this era I have no idea what that's like I'm not I don't have that mindset it's hard for me to understand but it's it is different my Cod tastes like olive oil hey olive oil is good okay olive oil is really good train but enough knowledge to judge what's good versus bad and you only become good with enough practice I think that will be one that will be constant that would be my opinion yeah that's interesting just coder it's like more like code review as the interview versus like actually like producing code yeah I I mean you could have a some form of system design you want to know how good they can put a product out there so then is testing for taste so we're going to test for debugging and then taste but then how do you get to I guess this is a question going to these kids that you have that we call AI coding natives yeah how do you develop taste when you don't come from a classically trained World which would be interesting for Next Generation Well you have to because if you don't the startup dies right so let's say this founder they go off they have 95% written by AI the proof is in a year out two years out um they you know have a 100 million users on that thing you know does it fall over or not and then one of I don't think that's a good proof either right like I don't think that that's good proof writing code for 100 million users versus writing code for 10 users versus writing code for 10,000 users those are all very different aspects right yeah whole of America yeah just get all of America to use your products like I don't I don't think we should measure code like that right these systems uh you know in the first realm the first versions of reasoning models they're not that good at debugging so you actually would need to descend down into the depths of what's actually happening yeah and if you can't then you got you I mean let's hope okay I I'm going to go at a slightly different angle here there are like fundamental characteristic differences that are important to recognize like we don't have 100 million users for T3 chat yet but if we did I could list in order which things are going to break as we scale the first four are going to be rate limits on the various like AI llm providers that we work with and I already have made the connections with those companies so that I can yell at them to get our rate limits increased as well as strategies to work around them things like open router to let me split my traffic across different providers then after that I have would have to manually scale up my database if I haven't yet probably have and I know that my current database solution can absolutely scale that far my previous one could not I was seeing the way that the scale was going to fail us so I moved off it really quickly so I wouldn't have to worry about that in the future I know the button in the dashboard I have to go click on in order to deal with that scale problem when we get there that's kind of it though the next thing is going to be support for sure our support layer is Mark responding to email as fast as he can where that's going to fail probably before the other two just in terms of if we get a big enough group of users what happens as was as do I have this documented like do I have that the points of failure documented right here it exists in 50% of our employees brains because it exists in mine and Mark knows where to go to fix it if it is broken to me we're good and also he knows all of these things too there's no need to document things that 100% of the team is already aware of but there's a real issue in the near future as we start to hire if we don't have the things documented but I'm excited to fix that when we get there because we now actually are looking like we're going to get there which is really cool but yeah we have almost no documentation Beyond code comments describing what sins we've committed where they can go find another architect they're going to have to hire someone who can I think you could start a company that has 10,000 daily active users and use Google Sheets like as a database so I I I don't know if you know I think there's a lot there's a lot you have to think about now does that mean you yeah what matters here a lot is a L less like can you hit 10,000 users a lot more can you coherently describe what will fail as you scale up and if you can't describe where your failure points are you're you're absolutely screwed I'm just saying you can and so the amount of users shouldn't necessary dictate that this is a good idea of software Engineers that are like good enough because it's so easy to retool there with with all these Coen tools like the barrier ENT is Sol low you're going to be good enough Engineers there's going to be tons of those but to be exceptional like the top 1% I think you're going to need to get into deliberate practice I mean the analogy we're talking about is uh Mal and Gladwell popularized this concept of 10,000 hours of practice to become an expert which came from this research from uh what was his name the uh Anders Ericson Anderson Ericson right which it wasn't just the research was very specific was about uh how do you find world class violinists and it let's go just knew it I knew it end up being actually you should just learn to program let's go isn't about just putting the time but deliver practice hours that actually plan and thought and it's hard work you could become an expert with less hours so I think what's happening with now Coen tools is that is very cheap to put in the hours because the output is just so quickly you can get to good enough but to become the best in the world and the best founder you're going to need that delivered practice to go into the details and you're going to have to peel the onion and understand the systems and get to again okay we're back in to some extent being classically trained she almost had me there I thought I thought we were I thought we were derailing but no we were back in good answer dude I I do love that the ultimate answer is you just got to learn how to program yeah cuz if you're reading code you might need to know what good code looks like I mean a good example is she almost turned like Picasso one of the greatest painters it was amazing at drawing lifelike pictures which is not what he's famous for of course when when you imagine a Picasso you imagine the opposite of that yeah there's this famous sequence of drawings on how he got to a abstract bow it starts from being lifelike to iterations until he gets to the essent to kind of the abstract art that he's very well when I watched this video originally I spaced out this part not not the prime one I watched the original Vibe code thing in the background while doing other things in the past I didn't pay attention during this part and I wish I did because this is actually kind of how I feel about my code not in the artistic sense like my art the art of my code is [ __ ] but that I like start with the complex right thing and go through like how do I strip this down to just the part I actually care about and throw away literally everything else that's how I code I really like thinking about my systems that way how can I take the bll the big thing that we all have an understanding of what it is what it does what its characteristics are how can I just chop away every single thing there so just the essentials are here so I can get the thing I need but he could only get to be the best in the world because he was actually very good painter and classically trained and could draw super well but that's not what he's known for so I do think we'll see these two classes of Engineers you'll still have like a very fat class of like good enough you need Engineers for those but the best in the world the founders that become outliers are going to need to put in the delivered practice yes and no I mean I think uh there are lots of really amazing oh hot take coming in here we go examples of um great systems level worldclass Engineers who ended up being CEO and CEO of the biggest public companies in the world I think of Max Levin I think of Toby luki from Shopify I mean these are people who just like actually that great um and the thing is there are lots of other people who are not that great but also still CEO or co-founders of companies and then it kind of goes back to to link up what we were saying earlier it goes back to hiring I mean I I would like to also say that that just goes to show how much luck plays a huge fact on this you can start an amazing company but your amazing company is off by a year two years right it's literally just like oh you're just you're just too early if being a year or two early is enough for your company to die it wasn't meant to make it you need to pace yourself so that you can survive waves that's like it is a skill of its own and I there are definitely people who who suck at CEO and CTO but are just so resilient like the Cockroaches cockroaches make surprisingly good CEOs not because they're good at being CEOs but because you can't [ __ ] get rid of them they just stick around and they'll be there forever they'll be there through your entire life cycle and by the time you're dying in the corner you're like wait how are you still around they just smile and wave and brag about their burn charts it's you there is a skill there but I agree like luck is a huge Factor but the way you maximize luck is by surviving so goddamn long that you can hit your lucky stride that's what happened with us if I didn't changed the trajectory of ping we would have went out of business a year and a half ago with our trajectory and our burn rates when we left YC if I hadn't cut us down by the end of that year we would be very out of business by now but I did and I extended our Runway from six months or I think it's eight or nine months at that point to three years and now we're positive now we have infinite Runway because we structured the business and made the right changes to get us there and now we have the ability to survive however long we have to and now because we did all of those things we managed to build a good profitable product luck and timing it's just like it's just it's it's it's amazing what good skills and timing can create and it's also amazing that no skills and timing can also create something similar I keep thinking about the Twitter analogy that you brought up CU I think it's a really interesting one like you if you compare Facebook and Twitter in both cases they went very quickly from zero to one in sort of Scrappy move fast break things way um Facebook was able to solve the scaling technical challenges in a pretty impressive way I think most people would would agree I mean Mark Zuckerberg was by far way more Technical and way more in the weeds probably maybe but I I don't know like I think Twitter scalability challenges were also harder based on the usage patterns like the thing about the usage of Facebook is that it grows like it's pretty smooth throughout the day like people just use it all the time the problem with Twitter is that the usage is incredibly spiky you get like a super bowl or like a no the problem with Twitter is that the engineering was straight up incompetence versus what was going on at Facebook which was revolutionary the engineers at Facebook are some of the best in the world that built things unimaginable at the time Twitter never invented anything technically like they the the few contributions Twitter made to like the greater software world it's like bootstrap everything else was kind of a disaster that came from those guys like it's there is a difference in the technical capabilities in these areas you know like like a world event and all of a sudden you have like 10 times as much usage the way the fan out of the feed works is I think like fundamentally a very difficult computer science problem okay that's fair though I also think that they were like really hamstrung by do you remember us this terrible system Starling I used it because I thought oh Twitter's so much bigger than us they're so smart they wouldn't use something that's crap no they totally use crap and then yeah Netflix invented all sorts of stuff reactive sockets go look it up if you find the right thing you might even see one of my commits floating around on how it parsed in uh in JavaScript it happens I use crap and I couldn't make it work big companies made plenty of bad decision it was dropping jobs on the floor like it's like all these crazy bugs happened and then I was like finally I was like I'm not using that anymore I have to switch to r m or whatever the heck the the actually correct thing to use was yeah and and like Ruby is an incredibly slow language even like tenic slower than PHP which was already too slow so I don't know I mean basically you should be so lucky to get to one yeah is there an advantage for you should be get trained and be a really deep systems thinker well I mean you just I mean a Toby or a Max levchin is not going to get bullshitted by people I'll tell you stripe is the same I mean I'll tell you a crazy story uh when I was uh at palente here you know I sort of burnt out there after a couple years after I designed the logo and then I actually between that and going to I know what he just said I I obviously do not know a lot of his backstory but I swear I didn't just hear a couple years and a single logo cuz that would be just absolutely designed the logo and then burnt out after years of just doing a logo I know I I no no that's not what he said what he said was he was burnt out for years so the last thing he did was that he made the logo and then left like that was his last harra there it wasn't the thing he did for two years it was the last thing he did like when I talk about my time leaving twitch and how I burnt out and left I say that I dropped the better mobile app and left I didn't work on that for the last four years it just the last thing I did I spent the last week of my time there on that last thing I I get what he was saying there yeah whatever how he framed is probably not what he meant but dude that that's crazy dude two years was definitely a joke definitely a joke there's a joke we're missing some inside baseball here to start my YC startup I spent six months as a interaction designer and I was at it was this like terrible Venture back company that ended up going in the ground and it was like credit card software it was the worst I spent 6 months building uh like basically just interaction designs which was really fun that's what allowed me to work on my startup in my spare time cuz I had a lot lot of spare time but I remember designing um you know this faceted search thing for like rental cars or something like that and then I go into my meeting with my Dev manager and Engineers who are going to implement it I just got to PA it for a second there has to be a joke in there I I I refuse to believe that's anything but a but a joke dude a circle with a Chevron bam got him Gary no Gary they were like oh yeah can't be done we can't do it that way oh like and I was like what are you talking about just make the index is like this and they were like whoa what do you mean like and then they looked up my resume hear that going that from the interaction designer yeah basically they're like how did you know that and I'm like you [ __ ] lied to me and that's the thing like what found did he just say use an index on a database and people are like oh my gosh you know just remember just remember okay I I very much sympathize with Gary here the number of times I had to come into teams and be like can we just do this obvious thing instead this is so much work and they'd say no wait wait maybe and then I would do it and show them and it worked and they be like what the [ __ ] but one of my favorite stories actually this is a twitch one that is relevant here you guys see this thing here the activity feed watch what happens when I refresh it's still there that was not the case initially because the way the activity feed worked was events were sent to it through the crazy queuing pubnub system that we had at twitch Pub sub whatever it was a big open source thing that they built and released at the time it was what it was because these were all events they weren't persistent they got sent when the thing happened so when you were fresh you would lose them all when the team working on this was pitched hey be nice if those persisted the engineers were like no that's impossible we'd have to build apis with every different service across the company we'd have to hit up the hype train guys in order to get this dat we have to hit up the guys over on the community sub team and the like Commerce team to get the sub information we' have to hit a viewer experience to have followers Creator experience that have the poll histories all of these things we can't do all of that in one API that's not possible to which the product manager said well if the events are being sent to us anyways can't we just save them the PM was the one who made the correct decision here the PM was the one who made the suggestion that solved the goddamn problem just send the event to somewhere else we can store at and that was the moment that I just realized the two examples I have of someone coming in saying the obvious thing and it being the right solution we're the same team I might have to walk this one back and say that was just a [ __ ] engineering team almost every bad experience I had at twitch was the same team H anyways ignore me there's probably a large number of people that are just slightly above competent competent enough to write syntax and then the rest man it's a bleak world out there and like you know when when you're hiring people like that that was like the wildest thing to me but it was like sort of the ultimate lesson where it's like when you're in the workplace you sort of assume that the people you bring on like they're not going to lie they're not lazy like we're all for the goal and the mission right and it's like no like people who hire you hire like they totally will lie to you if you cannot tell that they're lying and then the H not another tangent we're so so close to the end a thing I push really hard it's my favorite hiring advice I've been giving it much more and I've rewired a lot of brains and I'm very proud of this one piece of advice you have to stop hiring for the thing you don't like doing if you're hiring for the work you're bad at or don't like or want to avoid your goal is to think less about the thing so if you hire someone for that you're not going to put as much work into hiring because you want to get someone faster and you're not going to be as good of a manager for them because you don't want to talk about it which puts them in a position where they benefit more from lying than growing because if they solve a hard Pro let's say you hate sales so you as a Founder hire a sales guy to take over they might solve a really hard sales problem and come to you really excited about it and if you don't meet their excitement because you don't like sales you just want to move on from the conversation you're going to be like yeah good job Billy thank you and they're never going to tell you about one of those wins again because they're never going to have one of those wins again you just guaranteed they don't care anymore if you can't match their energy and excitement you don't have to be as good as them you have to be as excited as them and if you can't be they will either leave or they will stop caring Ing and one of those is less bad than the other I would much rather they leave because if you end up with that type of dead weight because the management doesn't respect the hard work they do everything falls apart fast so my counter advice to prevent this is hire for the thing you love hire for the thing you'll miss doing because then you'll be a much better manager for that person when I hired video editors for my channel and I wasn't a good editor I didn't like editing it did not work out for a bunch of different reasons then I started editing my own videos and I fell in love with it I actually really genuinely enjoy editing video now that's when it became the right time to hire because I can nerd out with my editor FaZe all the time and believe me I do it's fun for us and like passing assets around and doing our own passes on stuff it's it's a joyous fun thing and FaZe knows when he puts the time in to learn some new stuff and play with some new crazy animations and techniques that he can show it to us and I'll be hyped about the work he did it is rewarding for him to get better not just because he can make better content but because I'll recognize that work have a conversation with him and be as excited as he is and also pay him way more [ __ ] money when he does it I have doubled his salary three times since he started because I've watched him grow and been there with him through it stop hiring for the [ __ ] you don't want to do because you're going to be a really bad manager for that person if you somehow manag to hire a good person and you won't because you hate the thing you just want to hire and move on so stop hiring for [ __ ] you're bad at hire for what you're great at so you can fix the things you're bad at H anyways he's right by the way this actually goes to uh if you ever heard of Steve Jobs Bozo explosion like he's absolutely right people were calling [ __ ] on me doubling his salary three times confirmed yeah and when he first hit me up his his offer for his rate was way too low so I like that's one of the threes I was like no I'm paying you way more than that and have continued giving him more money whenever it possibly makes sense to and honestly probably going to give him more soon he's been [ __ ] killing it FaZe runs the channel none of this would be possible without him at this point and that is only possible because I had to love editing I could not have phas as an employee if I didn't love video editing and I would not be a good manager for him if I wasn't either so yeah stop hiring for [ __ ] you don't like really great kind of CounterPoint he's accidentally just like Uno reversing the entire beginning of this which is that having a Vibes based don't know really how to program programmer as somebody who is the you know one of the couple Founders like when they hire they don't know how to hire well that's the reality okay one really good question here what if I'm really good about getting excited about the thing when they're excited but suck at doing the thing that's fine the the way I phrase it is hire for the thing when you'll miss doing it you don't have to be good at it but you have to feel like you'll miss it I wasn't a great editor when I brought faas on but I was good enough that I could talk the talk and match the right energy levels but more importantly I was going to miss it because I loved doing it I love talking about it thinking about it all of those things and if you don't have to be good at the thing to love it I know a lot of people who love skateboarding way more than I do that are way worse at it than I am you can you can absolutely love a thing that you're not great at yet but try your best to get to that point where the thing excites you before you hire for it and if you haven't done it enough to be excited about it to feel why others do this for a living and why they enjoy it that's the thing you have to fix get to the point where you love it for me I love writing code and I love engineering so I have to hire for that first so I stop doing it I will live in the code base all day if I don't have people who will carry me through that part by hiring Mark is my CTO I now have to do other things because he's here to do the code part because I can't do code all day I have to do everything else and get better at the things I'm bad at and I've gotten pretty good at those things nearing the point where I can hire for some difficult stuff like sales honestly supports more marks thing he's phenomenal at support he really likes it I've been pushing him to to start considering what it looks like for us to hire for because I I need him on engineering I need him on the things he doesn't love as much but all of this stuff is hard hiring sucks anytime off that was a really good question I should have clarified that earlier that was a phenomenal question so what do you do you offload it onto some other company well what is the other company's competency how do you even know that the other company is competent enough to get you good Engineers right like there's like a whole problem that is kind of ramping up there if you don't love engineering you can't hire good Engineers you might somehow trick one into working for you but they won't be there very long and they'll leave a [ __ ] flaming path behind them as they leave where any decent Engineers will follow them along the way bad Engineers can't h hire good Engineers great Engineers will have a much better time if you don't know what you're doing you can't hire somebody to do that job well you like that's why it I mean that's why somebody else usually comes in that's why you usually you know found with somebody that knows some other side and that's why firsttime Founders tend to always be the worst because they don't know all the things that they need to know to find like to be a founder of a company trick one is a crazy thing to say it is but I've been tricked I have absolutely been the good engineer that was tricked into thinking the place they were going was going to be awesome because people seemed excited and like they were aligned and they weren't and I got scammed and I felt awful and I not only did I quit I helped all the engineers that were decent there find other jobs afterwards I burned a startup to the [ __ ] ground because I got scammed I absolutely have been tricked to join a company before and I feel bad for anyone in that position weirdly common and great Engineers will destroy the company as they exit not even intentionally just because they feel so bad about the situation they're trapped in they often get screwed they often take really bad Deals they often get just absolutely exploded and then second time Founders are like no no no no no I know all these things all these things have gone very very wrong right and so they're able to actually like navigate those Waters much much better so you can imagine that these people that have never actually been able to just be amazing at programming they're not going to hire amazing programmers I mean they could get lucky right you can always get lucky you can always get lucky you can yeah this is the point ially saying like anyone could get lucky or trick someone into working for them that's good but they will not stay they will not retain luck does not result in retention luck is a very fickle thing and luck will never result in long-term success it only helps you in bursts and those bursts won't carry you to anything great luck is massively overrated it might get you kickstarted but you still have to do the [ __ ] work and if you're lucky enough to accidentally hire a great engineer when you suck you're not going to get any further than that always hire the right people by accident or with the with the you know good enough recommendation or you have a friend that is somehow tied in that's able to get you the right stuff right there's always that always happen but that's not a guarantee to happen if you don't know what you're doing worst part is like you kind of have to call them on it like you know sometimes you have workplace cultures that are so polite that people are like oh like I'm going to let that pass and then I'm going to talk [ __ ] about them behind their back no you should fire them the AI agents incidentally will do exactly the there was a take I read from it might have not been one of the YC like post but it was either something a YC person posted or it was in one of the like videos on their channel it's been [ __ ] with my head since when you hire someone put a marker in your calendar for exactly 3 months after they joined possibly even less but it was one or 3 months I can't remember which we'll go with three at that three Monon Mark you need to reflect on the work they're doing and the question you to ask yourself is can I imagine this team running without this person if the answer isn't no what the [ __ ] I need them it's probably time to let them go and that was a tough thing for me to accept that like if the person isn't so good that I feel like I would be failing without them then you should probably let go of them and I have like all of the employees we have at ping right now it's just me Mark and Julius the company as it stands right now does not exist if any three any one of us three are gone I I cannot imagine how ping how upload thing T3 CH all that stuff works if I lose either Mark or Julius everything crumbles and if we do bring on more people in the future and I don't feel the same way 3 months into them being here they will be gone as well and it's terrifying to think that that I might be hiring somebody letting go of them three months later but it's a very real problem and it's what I have to be cognizant of if I hire again same thing they will absolutely like AI agents will [ __ ] you just like a human fake politeness is is actually it's I don't use the term polite for them I use the term sin Sinister that's like what Sinister actually like that's that's what that means it's or conniving I this is this is one of the things Prime and I are by far the most aligned on we both get frustrated with this one particular thing that a handful of people do there are people in this General space that's whole aesthetic and Optics are being the nice positive guy that behind the scenes are the most toxic [ __ ] [ __ ] causing non-stop problems and it breaks my heart because there are some people that come off that kind and thoughtful and nice that are actually like that like kenty dods is the kindest [ __ ] human being I've ever met anyone who ever talks any [ __ ] on Kent dods should be ignored because either they haven't met him and they're talking [ __ ] when they don't know any better or they have and they're just lying through their teeth Kent is actually like that it's unbelievable I've never met somebody who is so genuinely positive and it breaks my heart that there are other people in this space that are seen in a similar light that are not at all like that behind closed doors and I'm not going to say names because as soon as I start doing it I'm going to end up in [ __ ] trouble but there are people that y'all watch a lot of videos from that come off as really nice that are [ __ ] terrible behind the scenes conniving would be another term for that conniving and Sinister I I totally agreee with prime here we we have been through it with these same people so many times now Prime is much nicer than most of the nice guys in the space toxic is not the right term because there's there toxic is too stupid and too broad and has been taken over culturally that just makes no sense you need you need you need a better and no if somebody said is it lonus no it's not lonus lonus Tech tips is awesome and he lonus comes off as an [ __ ] too like lius is almost exactly as nice as he comes off like where it's He he'll complain pretty loudly pretty quickly but you know I find that it's easier to trust [ __ ] because they're more obviously not hiding something cuz if they were why would they be being an [ __ ] the nice guys I'm now inherently skeptical of because nobody's nice 100% of the time other than Kent dods Kent dods is actually like that if I've never seen them talk [ __ ] it's hard for me to trust them genuinely like like if you've never seen somebody talk [ __ ] on a thing you've never seen how they actually are term for that uh mellan you could you could I mean there's a lot there's a lot of terms you could use but but polite is not the right term right uh defraud their benefactor might be a better one Ninth Circle of Dante's Inferno is a good description employee will if you don't if like if you're not technical enough to like call them out on their [ __ ] and be like there's a question here if you see people talking smack about others that means they'll do it about you only thing worse than someone talking [ __ ] on you is somebody publicly acting like they're cool with you and then privately being terrible that gap between the two or even worse they're nice to you when they're with you but they talk [ __ ] behind the scenes on you those are the people that are super toxic and terrible behind the scenes avoid those [ __ ] the best you can if they are the exact same publicly and privately and publicly they're not trying to put off a certain image then yeah they're they're much more likely to be trustworthy but from my experience having talked to a lot of all of our heroes and been in the space for [ __ ] ever the people who are really positive are very different behind the scenes most of the time the reason I keep citing Kent is he is a [ __ ] angel that dude is it is so unreal how thoughtful and kind he is for every Kent there are 10 people pretending to be Kent who are actually [ __ ] terrible and the people who act like Prime in me behind the scenes are usually even more positive than they expect I even got the feedback from Prime early on that I came off much more of an [ __ ] online than I am in person how you s these people out don't trust people who are overly positive unless there's people who are negative who have defended them that like it's shitty to say it this way but like the only reason that you can differentiate Kent from other similarly kind seeming people is because you have the kind people as well as [ __ ] like me all coming out massively defending Kent because he is awesome and if you don't get people like me doing that or you haven't met them yourself and seen how they handle things that they don't agree with like like this Kent added me today as a friend on Discord to say hey and tell me he appreciated my work out of nothing Kent called me one day just to thank me for something I had talked about that he thought was really well done and he just wanted to know that he liked the work I had done and it was and this was like early I was still a nobody at the time it broke me he he's so [ __ ] good I don't want to just spend the rest of this glazing Kent but I I I actually consider doing a video like in ODed to Kent dods cuz he he represents something very special not just in software but in general and I I want to draw a line between him and people who act like him but aren't because he is he is a gem I've been talking about Kent for like 10 minutes now let's finish this up like no like you didn't make the change that I it goes back to your to your point about like why being classically trained is still helpful like you you have to be able to call out all the people working for you whether they're human or not being technical enough to be able to do that is is a superpower so just to wrap up my boss by the way at Netflix he was actually really good at this he was shockingly good my last boss Chris wine highly praised the man uh awesome boss really knew what was going on he was really really good at it and this is one of those things that he was just super super good at and I absolutely loved uh I absolutely loved what he did he was just so dang good so um I always appreciated that he could you could have like really deep technical discussions and he would be right up there just doing just such a it was just so good it was yeah I I was really lucky with my management twitch all but one of my managers were like this where even when they weren't coding they were so deeply technical that they could talk about hard systems problems in places they didn't even understand and be a really good sounding board and like dig through deep stuff with you and it was the best and I I just thought that's what an engineering manager was for my first five years of my career because I hadn't had a bad one yet it was actually really really fun yeah Chris WI a w en or EI n Ein n we n very very good very great pots I have nothing but all these tools giving superpowers to the best engineers and making the bad Engineers also worse is this is a quote from the founder of a train Loop how coding has changed six to one month ago we had these exact same glasses at Netflix one month ago 100 XP now it's exponential acceleration sort of crept up on us actually yeah it was like somebody dropped some like uh I would not want a Founder that thinks AI sped them up 100x 19 stock seeds I would literally just not work if I had a choice I had a choice I mean I think our sense right now is this isn't a fed this isn't going away this is actually the dominant way to code and if you're not doing it like you might just be left behind this is just here to stay and you won't be left behind uh tools are going to vastly change I mean honestly think about Claude 35 when it came out versus what you have now all of your clae 35 skills are completely worthless the speed of change also is the speed of your skills going out the window so just don't forget that it's not that and now notice that the difference between like honestly like you truly no low level paler gu is not useless Gary's the best he just had interesting comments in this video I I [ __ ] love Gary I I've been planning a podcast episode with him for a while like on his not mine to be clear I don't have a [ __ ] podcast but uh Gary has so much genuinely useful Insight on so many things this just clearly went past his area yeah Gary's good wait wait for our talk I think you guys will be impressed with how thoughtful he is with that he knows his stuff just not necessarily for this you aren't being left behind left behind from what prompting skills no you're being left behind when Jesus comes back and now Kirk Cameron's going to start in a pretty crappily produced movie called Left Behind honestly you just weren't prepared for Jesus coming back that's actually what they mean and so I'm sorry the Antichrist is here we're all going to die mark of the beast is actually Sam alman's jippy 4 butthole logo like that's what's going to happen it's just pretty bad it's a pretty bad future here we are I know everybody that's what it is go right on our foreheads big old butthole damn crazy um okay I mean there's a there there was a lot of good Insight in this I think they're AB I I think the big thing is is that they see the world from a vastly different perspective than say I do and so it's always really good to see someone else's perspective and I realize that there's a lot like most the world the value of coding is not or the value of becoming a good engineer is not to become a good engineer the of a good engineer is to become someone who can make a kajillion dollars right or at least for these people the value is for them to be able to hire you and hopefully make a 100x return on their money and so it's just like you know that you got to remember that you got to remember that and so there's a good so that is a good piece of takeaway For You especially if you're looking for a job or you're looking to be relevant is what are they actually asking for in here that's like it's a good insight into where the popular so-called um future is right now and so I don't know it's it's just something that's kind of interesting and it makes me realize like right now I'm probably the worst I am at launching and building a website but I'm the best I am at building a tool right to solve weird problems this is I think like the biggest gap between me and Prime right now is I'm writing more code right now than I've written in a long time especially the beginning of this year I wrote more code in January than I wrote for like half of 2024 I'm locked in right now I I am better at building a website I'm better at building system architecture I'm better at scaling systems I'm better at Team like navigation [ __ ] drama because of all the investing and advisory work I do there isn't much that I was better at last year than now and that's a a thing I've been not thinking enough about but I do actually at the moment feel like the tools I'm using the way I'm thinking the work I'm doing and the stuff I'm building I'm better on all accounts my upload schedule's less consistent I guess there's that but otherwise I'm [ __ ] firing on all cylinders right now and I just want to see how long I can go I had my first burnout moment in a bit a few weeks ago and I'm coming out of it doing pretty well but like managing the chaos that is whatever the [ __ ] my life is now is the biggest challenge I have dayto day but I also I don't have a family relying on me and all the other things that make Prime's life much more important to maintain than the chaos that is mine I can entirely change the way I I live my life any given week and it's okay so just differences things I think a lot about but I'm really locked in on the engineering side right now and helping a bunch of different businesses figure their [ __ ] out and scale so yeah I'm I'm really proud of the work I've been doing lately and the things I've been putting out VI it random CLI tools actual web pages that people use crazy stuff like T3 chat and everything in between and so it's just like okay but is that a is that a is that a skill set that's in Vogue it's probably less in Vogue at smaller companies and so I'm not there I'm not I if I wanted to try to make a a switch into a startup I'm going to need to change what is my Vogue set of tooling which is that I need to have the ultimate ability to be able to scale and build build say websites and Go full don't care about my credit card and throw it onto some autoscaling server list blah blah blah blah you can't launch a website I can't launch a website easily right I can use laravel larel cloud and do all that and get that up and running I'm sure I could learn nextjs in a day and a half and go and launch something very fantastic with nextjs it's just not a skill set that I want to use right it's not something I want to go and get better and better at like I don't want to get great at react again okay I was great at react I don't want to be great anymore at react it's not something that brings me joy or fulfillment or makes me excited about coding and so I've kind of oriented myself into building tools for other developers like that's what I've always liked that's just who I am that's where that's where I am that's what I want but listening to them like you got to realize that that skill set is not necessarily a great founder skill set there are lots of founding companies thinking of turo uh by the way they don't pay me anymore not sponsored uh but I still highly recommend them uh you have Equity you still got to disclose it Bud uh turo very technical I say even though I forget half the time it's it's fine I'm just joking but like the disclosure and the bias stuff is all this stuff's a mess right the founders Linux core contributors for decades uh they're they're awesome right hashtag not aand and so it's just like you got to kind of you know they're are start like what you're missing here is also startups that are deeply technical that all of what they're saying is actually kind of worthless it's actually not going to be going the way you think it's going anyways great talk I'll let him wrap up I have one additional thing after good job good job Gary I loved your logo I still can't believe uh he spent two years on developing that very beautiful logo I mean I I don't I dude two years I don't even think I could develop that in five years that's crazy good I mean that's this is the best I've ever seen a gen obviously very interesting insightful chaotic mess thank you for making it all the way to the end actually uh editor put a coupon code here for 3 months of T3 chat for half off so we can give something to the people who suffered all the way through here anyways on one hand it's really interesting hearing the perspective of all these companies that claim they had 80 to 95% of their code written by AI what I want to hear is the other side I would love a similar followup maybe not through YC but whoever has the right access to do it to see what things are like for the companies that said less than 10 or 20% nowadays what does a company look like that formed itself and got into YC over the last year that is doing something so hard so OB ABD deep unique and Technical that the AI tools only hurt them when they try to use them I want to see those companies what are they doing and what are they building right now because I bet those ones are going to be full of even more interesting insights I've talked enough about AI for ever at this point this was supposed to take an hour and a half and I think that's a lot longer than that it's almost 9:00 p.m. here so I'm going to go thanks for sticking through and until next time peace nerds




## My Website Got Stolen By...The Country Of Guernsey_ - 20230720
website's currently down and I am very stressed out about it the reason is stupid incredibly stupid and your domain might be at risk too so let's talk about it I want to die GG is used for good game it is a common abbreviation in the gaming spaces the tech space is taking it a bit as well discords used it as their main domain for a while and many other companies have as well sadly we're all at risk because GG is a country code TLD cctld for short in order to understand the differences between a cctld and a generic TLD we first need to understand the difference between a registry and a registrar this might sound silly but the registrar is like the store that you go to as a customer to buy things in this case domains the registry is the place that keeps track of where all of us are coming from kind of like a warehouse they're also the ones that actually host the domain and make sure it is accessible and registered properly across the world with a generic TLD there are lots of different Registries because it's a commercialized industry and lots of different ones pop up so if one registry is charging too much for something a different one can come in sadly you get none of those guarantees for C ctlds because they are registered by a country not by many corporations usually the country will pick one registry that they work with closely enforce whatever rules they feel like on and try to make some money off of it too A lot of these countries are very small in making a significant bit of income off of these tlds thought GG actually stands for uh the baliwick of gersney don't know if I'm pronouncing that one right there's a bunch of other popular ones the biggest IC is dot IO which is the British Island uh the British Indian Ocean territory what something is innocuous as dot TVs actually tuvalu so uh even twitch is kind of at risk here what are we at risk of though well when the country picks the rules the country can do whatever they please Anything Could Happen from the servers for that one registry going down which happened to IO a few years ago to a random price increase of as much as a hundred if not a thousand acts they could even just pick a random renewal fee that you didn't agree to initially and charge you thousands of dollars for a hundred dollar a year domain definitely hasn't happened to me before they could even decide it's not worth it anymore and just stop like decide they don't want GG to exist because it's too much work and suddenly the TLD disappears entirely and so does your domain my GG domain is registered to a PO Box which as of today they decided they don't like so now my domain is offline until I figure that out it's also worth noting they never hit me up for this they never even hit up my registrar versal the registry lock my domain never told my registrar certainly never told me and I woke up today to a bunch of alerts that users couldn't go to my website they also can't send me emails or do any of the things I do on my domain it's it's bad bad I can't actually believe this happened but here we are where I use the country code TLD and put myself at risk sadly there's a lot of tlds that are vulnerable to this basically any country code TLD be it.usa.uk or these weirder ones like dot IO and GG if you're able to use a generic TLD instead I highly recommend it but some of those also have the same risk one example of a risky generic is dot Dev which is only registerable through Google's Google domains and since it's a Google domains registering registrar has vanished good luck seriously I I'm scared now pick more traditional generic tlds if you can and be careful if the things you're building are important thankfully t3.gg is not the domain my company is hosted from we keep the company stuff on pengachiji which somehow didn't get hit fingers crossed yeah I'm scared shitless this sucks I really hope this doesn't happen to anybody else but if it has let me know in the comments if you want to learn more about where you can host your website of a video all about different hosts and why you might pick them there thank you guys as always I'm going to go back to pacing around in my apartment because I don't know how many emails I have missed and I want to die yeah peace notes




## My Website Is Airplane Proof - 20231105
the very least speed-wise the average internet speed of the average internet user consistently goes up you know what else goes up airplanes do you know what's internet speed isn't going up though also airplanes if you've ever been on an airplane tried using the inflight Wi-Fi paid for it for whatever reason and then tried to go to a website like God forbid YouTube or twitch or any of those types of content heavy sites probably had a rough experience because those speeds are often as slow as 0.1 to 0.2 megabits per second and on top of that the latency is absurd we're talking 1 to 3 seconds from you make a request to when you get any response back so how the hell did I build a website that works well on airplanes is it just a bunch of static HTML well even static HTML would not be a great experience on a plane because every time you click a link you have to wait for that ping to go back and forth before you can even start receiving the response because of this the ideal solution isn't just HTML or being super minimal in the traditional sense it's having a good understanding and balance between minimal content upfront and good preloading behaviors going forward believe it or not an Spa is actually one of the better Solutions when you're in these environments because of how much earlier you can start fetching content if you have the option to in order to make The Full Experience feel snappier and you no longer have to rely on a network request on every single navigation every time you go back Etc the solution here is somewhat more hybrid that all said if you need the JavaScript in order to run and show content in the first place and then the JavaScript has to make API requests in order to get the content there just the number of round trips in the waterfall as we call it is going to make your experience miserable so what does it look like to have a website that is static enough to load quickly but also dynamic in Spa enough to maintain a quality experience as you navigate it what if I told you that's the default experience in nextjs with app router because I was very very surprised when I learned this I want to showcase a video I recorded when I was actually on an airplane obviously there's no audio or anything but I was using inflate Wi-Fi getting a consistent 0.2 Megs with about 1,500 milliseconds of latency and the quality of experience was surprisingly good here is the video of me on an airplane playing around with upload thing I wish I had the network tab open so you could see when I clicked stuff but basically as soon as I hover over something I click it so like clicked overview there and it basically immediately loaded going to all these different pages felt super super Snappy and when things need to load in because we use streaming for that file table you're able to get to the page almost immediately and then the content that has to load comes in after and that's not being done a traditional like API request then renders the content on the client a lot of the stuff is being done via streamed HTML coming back from the server as part of that initial request so when you request to the upload thing server it starts by giving you an HTML shell of whatever content was blocking so to speak so anything that isn't inside of a suspense all of that content loads you get back to that first page but if it's anything wrapped in a suspense that comes in later through that same HTML HTTP request streamed in as an additional response that gets rendered in the right place once it comes through this type of partial plus streaming behavior is something that used to be really really hard to do and now it's just kind of the default in nextjs this performance was incredible to see and we're not doing anything special here we're kind of just using App router the way it was built to be used and if I spin up a quick example I can showcase what I mean here the layout super boring has metadata has HTML parent tag body with the inter class name so that we can have the inter font loaded properly and we have the page and all the stuff that this come with I Bund Dev cool it loads with high believe it or not high is not particularly interesting to us so we want to put something Dynamic when I say Dynamic I mean something intentionally slow so we're going to do async function slow load and in here we're going to I should probably make now we have this wait for which will effectively let us await in here so we're going to block for a bit let's thank you co-pilot for writing this video for me I'm going to put this underneath here and what we'll see now is when I refresh the page takes way more time now if I command shift R you'll see that loading spinner and it comes through eventually but now our load times literally take 3 seconds because it blocks let's say we wanted this to come in later we're okay with this not being there when the page first renders we want to get you a response as quickly as possible thankfully with these new react patterns that has gotten incredibly easy I I have to do here for that suspense import that and now when I load the page we get highback immediate and some point after we get back this slow I want to show off the network tab but I don't want to show off the network tab in Dev mode in nextjs running starts the equivalent of running it on a real server so this should be much closer to replicating production oh but since I am not putting some cash headers here saying by the way this is always Dynamic export Force Dynamic cool now I've done that it will always make this part of the content Dynamic so this page will always be regenerated on request Buton Run start and once again we see hi comes in immedi mediately and then slow comes in after let's take a look at how this behaves if I move over to slow 3G speeds we're on an incognito tab slow 3G speeds loading the page takes a bit to start getting content what you'll see is we actually get everything at once the reason for that is it took so long for the rest of the payload to come through that the server finished the generation step so it actually seemed like it came an instant even though there was more work being done if I change this from slow 3G to fast 3G you'll see Here Local Host responds pretty quickly and then the rest of the data comes in later and this is the difference with nextjs and other streaming Solutions is we start downloading content we can show the content we've downloaded but then more content comes through as the streaming finishes up it's really nice to not have additional requests necessary to get the rest of the HTML in fact I can disable JavaScript entirely I didn't think that would work yeah I figured it needed the JavaScript actually do something with that HTML just wanted to confirm and the JavaScript parses the rest of this response and renders it all in the right place and the JavaScript that does that relatively small there's just like what 100 kilobytes of JavaScript across all of this that's nothing that's like absolutely nothing and the actual app Javascript is 855 bytes we can look at the response from the stream here and it's going to have all of the content and then a bunch of inline script tags to handle all the weird that could potentially happen but we see here that it does actually have the high and it also actually has the slow because this all came in through the HTML eventually and the the fact that react now is smart enough to stream through additional data over time that's not like an actual breakdown here it's really really cool I am blown away with the capabilities of these Solutions and when you combine that with the other stuff built into next like prefetching of visible links so if you have a link tag that leads to another p page that's visible it can automatically fetch that Page's content ahead of time you end up with a navigation experience that feels significantly snappier I I'm Blown Away the the total content transferred here is 162 kilobytes admittedly it's a very boring page but the point here isn't how much content is in the page it's how well nextjs and the tools built into react now allow you to send so little to the user block as you need to on the server but stream the right response to the client such that things feel incredibly Snappy even in these chaotic environments and as I showed before with the slow 3G even though the first paint takes a bit longer it actually feels a bit snappier because by the time the content is coming through the servers finish generating it so you get everything at once just because of the nature of how the server is generating these responses that's really cool I am yeah I'm Blown Away with the performance I've been seeing and if you you turn off disable cash cuz nobody has their cash disabled you now have Js files loading instantly from your cache you have CSS you have the font files all these things load as soon as you need them but the HTML you get back and the additional content you get from the stream now can be parsed instantaneously you don't need more Java script to download and then run it's already there it just has to run and now it knows what to do with these responses instantaneously even though we're on a slow 3g connection with a ton of latency the page loads super Snappy still and that's the difference when you have more latency when you have more chaos more round trips is always bad the thing that this is differently is it reduces the round trip significant ly because we don't have to send HTML that tells you to download more JavaScript that then has to run then has to make an API request that then has to render instead we send you the HTML you download a little bit of JavaScript in the background while our servers are running our additional server code for the stream and then we've streamed in that response by the time the javascript's ready it just applies the changes to the Dom it's two waterfalls instead of like 20 that's incredible that is so much better for environments like an airplane where the Ping is massive where each of those waterfall request is an additional 1 to 3 seconds regardless of bandwidth just in latency time alone and that's what I mean when I say my website is airplane proof so we're going to get all of the chaos for my Chrome extensions in the dev tools here too what I'm specifically saying is that the amount of waterfalls necessary to navigate an upload thing is actually incredibly low even though I have the set on slow 3G Pages still load surprisingly quick this page is loading right now and I can go through here and load different things but the amount of data being transferred to my machine right now and the amount of requests that block further requests these things are all incredibly low so if I clear this and I refresh that's pending and if we look at the waterfall chart here you'll see there isn't much that blocked additional things almost all of these lines are grouped and happening together versus if I go to Ping see all of these requests that block all of these requests there's going to be a whole third layer where it does an additional set of data fetches this is with trpc and with a bunch of batching it just takes significantly longer oh hi you it takes significantly longer because each of these JS chunks blocks until the next one until the next one in order to get all the things that are needed to actually render the page and then they have to also download a bunch of stuff from servers in order to get the data it needs to render so like this is it Loops there there's a lot of places in points of failure that the new next model reduces to almost nothing this is why I'm so impressed the number of round trips the speed at which you start getting responses it's just it's exponentially better and all of this is just our like logging and Event Systems you can ignore most of it everything else is instant and that's what's so cool because waterfalls are no longer the default when working with this new model the websites that we're building end up being significantly faster and better experiences for our users I had no idea how this was going to perform when I opened it on the airplane I had heard specifically funny enough that the versel dashboard sucked on an airplane actually I heard somebody was using that as a reason to not use app router so having put no effort into our performance and our waterfalls or any of this on upload thing I decided to check it because I know it's an example of a pretty bog standard app router app and this is what I saw insane performance like I hadn't ever seen before this is better than what you can even do with something like PHP because you don't have the dynamic loading behaviors and the cash patterns and all these other massive wins even just streaming alone is such a massive win because you no longer have to make multiple waterfalling requests to get the rest of your data yeah I I am hyped on this I've had an incredible experience working with all these new patterns and I can confidently say my website is airplane proof yes you still have to load JavaScript yes a lot of functionality is missing if you don't have the js5 files and sure there's possibly more bites down the wire than if it was standard HTML but when you account for all of these other things and you reduce the waterfalls meaningfully The Experience even on an airplane with terrible internet is significantly better than anything I had experienced before so yeah what about your website is it airplane proof God is it airplane proof do you want to learn more about how SSR and all of these things work in ways that it might help you there I'll pin a video in the corner here all about how Spas SSR and all these things work in interop comparing remix and next and the new RC patterns I think it's a great video I put a lot of effort into it check it out if you haven't appreciate you all a ton as always talk to you soon peace nerds




## My Weird Journey To Next.js - 20240620
we talk a lot about nextjs on this channel how to use it how it works all the things you can do with it what we haven't talked about is why specifically why do I use next how did I get here in the first place what made me such a huge Fanboy of next and versell this video is explicitly not sponsored by versell I have a couple other sponsored videos with them coming up they have no idea making this one I'll be honest I didn't either until just now I'm filming this live on the Fly cuz we were talking about it I realized it was an interesting topic because my history with versell is nothing like people seem to think it goes back quite a bit in fact all the way back to 2017 when I first started using Elixir at twitch when I joined at twitch I was I guess a python Dev at best but honestly I wasn't much of a Dev at all I had written a bunch of plugins in Java for my Minecraft servers I somehow just barely managed to pass my data structures class in C++ and I was working on some things in Python for the research projects I was contributing to I even had been working on iOS apps and specifically Apple watch apps a bit at the time which were a massive Objective C and a tiny bit of Swift but honestly I didn't really feel at home with any specific language and barely even considered myself a programmer I only got into twitch because the person who ran the team had the same music taste as me and decided to offer me a 3-month contract despite not being qualified at all 6 months later yes I got my contract extended because I wasn't doing well enough but at the six-month Mark I was doing well enough they decided to keep me fulltime and that team I had randomly joined this new team that formed was using Elixir despite the rest of the company using Ruby and a little bit of go I did not know what I was getting into when I tried Elixir which was my first real functional programming language and I fell in love fast it went from oh this is weird to wow I love code now so fast so fast that when a year later the team folded and I had to go write and goang I hated it I hated it so much I had fallen so deeply in love with functional programming that the thought of not doing that hurt it hurt so much that I just wasn't productive I was so unhappy that my manager pulled me aside to subtly let me know that I would have an issue if I didn't pick up my performance but also cuz he noticed how unhappy I was and that I wasn't enjoying my work he didn't mince words he made it very clear to me that I was not performing to the expected bar but also that he didn't think it was because of my lack of engineering capabilities just my lack of content using the tech I was using he pushed me to contribute to the rewrite of the twitch site moving us from Ember to react and I fell in love fast I did not expect to I was known as like the front-end hater guy I was shipping live view in 2017 with elixir in Phoenix because I hated writing JavaScript that much I was probably one of the first production users of live at the time when I started using react and I started playing with the composition seeing how powerful the component model was I fell in love fast I fell in love so fast that to this day I'm largely stereotyped as a front-end engineer which is really funny to me because I was a backend for the vast majority of my career and even today I'm spending more of my time thinking about servers than clients although the relationship between them is something I spend a lot of time on too so that's my history of how I got into react how do we end up here well after years of contributing at twitch be it the internal tools like the one we had for the safety stuff as well as the public facing twitch site I got to learn a lot about best practices for building and scaling complex front end applications one of the things I learned is the importance of the API layer that the front end is working with since I had been backend first and then I moved to front end I was actually in a really good position to talk with the backend teams to make things come together I spent most of my time talking with the teams running the back end and the graphql stuff that we were actually communicating with and using in our services in order to make sure our stuff shipped and worked as we expected that synchronization was essential and ended up being a huge portion of my time spent and honestly I love graphql this because it gave us a contract to put in the middle between the back end and the front end and once we agreed on it we could all go our separate ways and work and eventually come back together to make sure it all combines correctly and if it doesn't somebody got fired which was awesome okay we should have fired more people at that point but you get what I'm trying to say it was really cool having a solution that let us as back end and front end agree on something and then go do our thing the harsh reality was if the front end needed something and backend was too busy to do it either you did it yourself which ended up being a ton of work especially if you weren't working in that code based regular or you politely asked and waited until hopefully someone bothered to ship the thing that back and forth ended up being so much of the thing holding up shipping for us that it frustrated me to no end I got so tired of waiting in these back and forths that I ended up doing a lot of the backend work myself and then getting blocked in code review and yeah it was a mess things that should have taken a few hours to do ended up taking days if not weeks not because the process is slow or because big companies work that way simply because synchronizing the back end and the front end properly across teams across Technologies across code bases was a difficult problem eventually I left twitch to join a startup I joined the startup I took over client fully and I was really excited to build the mobile app and the web app specifically I was excited to not be blocked constantly and being able to ship updates whenever we had them so our users could have a great experience no matter what issues they ran into and that's why I picked Expo and react native so we could ship stuff really fast to mobile but web I didn't really have a go-to solution yet I was using netlify for my own personal stuff but I was having a few issues getting it to deploy specifically I was using snow pack not webpack for the faster build times and it was not doing great with NFI at the moment eventually I got it working but I've been hearing more and more about this forell thing what pushed me over the edge was very specific this backend team that used to be the front end team that didn't like me too much was taking forever to ship stuff I would request a change I would wait 12 hours for them to wake up they'd reply saying oh no it works fine the way it is look at our example I would wake up go check the example it didn't work I would tell them that wait another 12 hours to which they reply it totally works you're just holding it wrong and never once did it actually work the way they specified so I was constantly locked by these guys we had a few random things that we needed that they kept saying we're going to take days if not weeks to build that I knew shouldn't take that long so I need a way to run a little bit of serers side code that wouldn't get into their repo CU as soon as it touched their GitHub I had no ability to ship anything that involved this team blocked me immensely So eventually I convinced the CEO to let me spin up little small end points that weren't stateful which meant he said that they weren't backend his definition of backend was fully stateful including the database running constantly but I convinced him that I could run these oneoff functions somewhere just to fetch some data from a backend API and fix it for me and eventually he caved and said sure So I started hunting and when I started hunting I discovered something really cool and no it wasn't next a really cool thing I discovered was versel functions they've had a lot of different names over the time but when I was using this in 2021 they were still called the API directory no this didn't mean the API directory next it meant that you could just have a folder named API in your repo export a function and now it's an endpoint whatever you export here can now be used by versell to handle get post put whatever and when I realized I don't have to change my framework I don't have to change anything I can literally just make this folder in my frontend project named API put a file in it hello. TS and just do something there I was like oh this is an obvious solution so I made the move over and that move was awesome having access to full backend run times without having to think about the scaling or any of those things made it a very obvious choice for me so funny enough whether or not you believe it I was using versell years before I had ever touched next because I was still super snow pack pilled eventually moved over to vet but I kept my front and my back end separate still I just like the idea of them being in the same code base so I could make changes at once and have everything synchronized properly and having the ability to just add backend functionality to my frontend repo by adding one little file in the API directory was magic and if I go back to our old code API added let's take a look at this here is the code where I was handling all my off in my API helpers folder I was still using worker KV for all of my storage and it was a mess I like hardcoded the key just to like get it working add user to room call off you'll see I have all these API functions for the different things so get allowed user handle request this was before they had the get post put all of that this was just request response which were versel but they were pretty standard request response from like um the express request response but in here handle request room names with query make sure that it's a string throw we lowercase it get the value from KV if no perms we send a 403 otherwise we actually send you the content I'm almost positive that worker KV instance is dead and if not I'll go kill it right after yeah so as you see here pretty boring old V code I even added like a port call cuz I was I one of the Annoying Parts is in order to run this locally I had to have the API run through the versel CLI and the versel CLI is overall pretty good I honestly don't use it that much but for this it was nice cuz I could run these API directory things locally and have V running locally too the issue was V kept getting its requests eaten by the versel runner which was obnoxious I actually have um my blog part of why I made my blog originally was to about this using V on versel because I went to hell in back to fix weird things around like query pams that were being eaten because V doesn't format them correctly and like that and I wrote a whole guide on how to make this all come together so you could have your API directory work with v in local Dev it was annoying but I made it all work but then I ran into another unexpected issue when you put all of your routes in the API directory is individual files like this in order for them to compile and run safely each one gets compiled and deployed by itself so first off I was hitting limits of how many of those I could have and second off every new endpoint added like 40 to 50 seconds of build time and deploy time which was entirely going against the thing I was trying to do which is make it as fast as possible to make changes and fix things so even though this code base was awesome I had my super client heavy stuff and I had my super server heavy stuff we even browse through the files and I'll show you that it was a pretty boring V app where I had my react query client provider which I was using for just fetching data I had my boring all pages which were settings home and call and call mostly was doing client side stuff because this was an app for doing video calls so obviously this one's going to be very client heavy I had all the different states if not in call return the join if PR's Channel return call not found if it's loading return loading if data if no token on off and then I actually render the video call but these types of things were pretty client heavy so I didn't see a need to use a serers side framework why would I ever need nextjs for my video call app the reason I needed it was because of those build times and the way it was deploying since all of those different end points had become their own like lambdas my build times at this point were horrible I wonder if I can see easily here I don't think that the has the history for but my build times doing this had gotten to like 5 to 6 minutes when before they were like 20 to 30 seconds so I wanted a way to easily bundle all of this into one end point and after doing a little bit of research I learned that nextjs just does that for you when we were in the docs before with the uh versell functions you'll see there is the next app next pages and other Frameworks I was doing the other framework solution which by the way also works with other languages I don't know if it says that here but there are uh you can use go python Ruby or Edge run times and there's ways to use PHP and on this too which is actually really cool you can deploy any of those through versal just by putting it in the API directory so these docs got killed for the old version that I was using but I bet I can even find the pr where I did this this is the pr where I actually moved us over to nextjs I got at our routing I moved over to file based everything I deleted all of these API helpers because I can move all of these to the API directory and next I didn't have to change too much I got to delete a decent bit of code but the win here was that all of these Source Pages things got bundled at once instead of being bundled independently and if I go look at the code base at this point in time this ended up being a pretty basic app we had our API directory that had all of the apis in it and rather than each of these having its own build process and going out to its own Lambda all of these things got bundled into a single end point that was hosted on one Lambda by forell so my build times went from like 5 to 6 minutes down to like two and the performance was a lot better too because the end points were more likely to be warm since all of them were running out of the same Lambda so this ended up being a massive win for performance even if the developer experience was slightly slower because it had to use webpack which I had been webpack free for years at that point so my desire for the next API directory was so great that I was willing to do things I didn't like such as use webpack and deal with their data fetching stuff and God did I hate versel data fetching get server side props quickly became the bane of my existence I hated this so much it's hard to put into words it just did not make any sense so much so that I wrote my second ever real blog post which was an inconsistent truth next in type safety because get server side props was not type safe it was not a good client experience it was barely even a functional server experience I have a lot of videos now where I complain all about get serers side props and how awful it was the honest truth is that most of next was stuff that I hated like the things that made next different from V or from other Solutions just pissed me off to no end I actually didn't like next at all what I did like was its ability to collocate my backend code and my front end code in one project in a meaningful way where the server and the client are much more closely tied even if the methods that they had provided for sharing things between the two were things that I hated and believe me I hated all of those things to the point where honestly more often than not I was just calling react query everywhere so if we find like any of the actual code which would be in Source components you'll see here I just have a bunch of use Query calls where I am fetching things from my server and I just do SL API now because I know where it's going to be which is nice and I have a bunch of these used query calls all over the code base where I'm doing a bunch of like parsing and making sure the data is the right format and but it was still better than server side stuff because get serers side props didn't really give me the stuff I needed for most of the pages especially because it had to be relay Dynamics it was for video calls next only gave you a solution for when the page first rendered from that point forward it was your problem and I hated that so I used almost none of next's server s side stuff for react I used the API directory to host apis but then I made another important change in September of 2021 I moved us to trpc which let me delete quite a bit of code and made maintaining all of this hilariously simpler yes this is when I actually got trpc pilled I played with it quickly for this project and almost instantly fell in love and realized I needed to be using it for like everything here's my Agora router Agora was the solution we were using for our web RTC at the time and it was way simpler I have my router which has my off context I have a query which has get token I have my input which is a room slug which is now validated this is all validated here so I could delete all the validation code and then I have my resolver which returns n if you don't have a session and then it Returns the Agora off token if you do same deal for getting the embed token all of this code became hilariously simple to write and then actually using it was even simpler trpc usequery give it the string give it the values and it's all not just working but type safe I was able to make so much simpler if we look for the used call token code I deleted yeah see how much longer these endpoints were with all of the checks making sure it's a post making sure that we have the right data getting the session making sure we have a user ID getting their profile making sure we have the right data and then finally doing the thing we were here to do this went from 41 lines of code to like five and consuming it was so much easier too like hilariously so and I was able to delete all of these giant end points in favor of things that are way easier to work with oh here's the call token code so this 33 line get call token I could just delete entirely where is the actual use for it though okay can't find where I deleted the call token code but I'm sure it's in there somewhere regardless you get the point I was not using next the way you probably think of nextjs because I wasn't using next the server and client all-in-one solution in fact I was barely using next beyond the bundler I found it as a really convenient way to put my react client code and my whatever else server code in the same project all at once and as we all know from the original T3 stack it was actually a good experience I had massively advocated for this idea of using next as a way to make a good client and a good server that are close but not tied and using things like trpc to do that gluing part together at this point I was really liking my experience with next in versell even if I wasn't using next I had gone all in on versell and the way it let me build and deploy my Solutions so much so that some of my co-workers from both ping and other startups like rose here call it out to this day cuz I was far from YouTube this was years before I had started YouTube I was just trying to build as effectively as possible and Rose ended up being one of the first people I converted to using versell it was weird cuz now there's literally probably hundreds of thousands of y'all but at the time I didn't have influence I had like 50 followers on Twitter and a few nerdy friends so I just talked about this with them and they fell in love too and I love Rose for calling this out here because yeah I was obsessed once I realized how much easier all of these things could be after spending a decade suffering through all of these parts the ability to link a project from GitHub that would serve all of my apis and all of my clients the best possible version of my experience by clicking two buttons to link my GitHub to my versel project was magic and I yes I fell in love I sounded a lot like a shell because it was unlike anything I'd experienced before but it was genu as Rose says here I actually really love this stuff so much so that when I got into white combinator I was just seeking people to nerd out about this with and I couldn't find them I was desperately looking for people who wanted to talk about these things with me because I just was such a nerd so that's why I did the video that many of y'all have probably seen the roundest video this is the video this was my first Dev video and it also wasn't a video it was me doing a quick live stream because I was building tools for creators and I wanted to better understand what they needed and I'd been talking to a few people people on Twitter who I wanted to explain my stack to that didn't seem to get it so I made this to Showcase why I like this text so much I posted it on YouTube didn't really do much but then I got lucky enough to have Dan abramov come on for a mock interview which did really well and eventually got this to kick up too to the point where both of these videos ended up being pretty close in terms of viewership long term which is kind of crazy to think that a brand new YouTuber was able to get as many views on his building a video app live as he was interviewing Dan abramov just mind-blowing the reason I was able to have Dan on is I care a lot about how job interviews work so when he said on Twitter he was going to be doing some mock job interviews with YouTubers if anyone was down to hit him up I obviously immediately hit him up he was down I got to do that it was one of the first pieces of content using ping because I had to have him call in really proud of that really proud of that interview yeah they these were the first two ever I learned so much from doing that more importantly I got hooked on having these deep technical conversations and sharing the magic of how these tools were coming together the beauty of combining next as like a bundler effectively with react a wonderful client side framework with trpc the best way at the time to connect your server and your client together and Prisma which was honestly kind of magical at the time because there was no good typescript orm that had that level of type safety built in Planet scale which broke my brain at the time oh Planet skill was so cool and Tailwind because I finally liked styling having all of this come together in a way that felt that good was magical and even 2 years later I almost missed that moment but the magic wasn't something only I was feeling because T3 stack took off there were points where create T3 app which was made by nexil a fan of mine soon after all of this create T3 app was getting more invocations than remix which is crazy when you think about it that a YouTuber's fans built a boiler plate using their recommended technologies that became the third most popular framework for react but that's how cool this stuff was to use and funny enough as I've been hinting at this whole time most of it was built around avoiding next to the best of your ability next was the the box that this all went in but we had basically dumped the box out shook everything out of it put back like two parts and then filled the rest with other things and it was awesome it was so awesome that I was starting to talk to versel themselves and the people who worked on next which was mind blowings I was just a fan at the time all of a sudden I get to actually talk about and work with these people and then the channel blew up like really quickly I only started posting videos for real in April of 2022 I had done like one or two before then but it wasn't something I was taking very seriously and then I started doing videos with prime then I started posting more often and it blew up fast and I was blown away and I realized quickly we had to change how the channel ran cuz I had to have an editor helping I had to have others helping me research topics and manage the channel and I also had to run my company so expenses were going up and my time was going down I also had my first ever company reach out to talk about a potential sponsor which was up stash I also realized at the time I need up stash for a bunch of stuff so I tried it I loved it especially the rate limiter and I did my first ever sponsor deal which was a huge huge deal for me the idea of making money off of YouTube was just mind-blowing at this point I realized that sponsors were a thing I could do and as long as I picked ones that built things I trusted this was a really good opportunity so I reached out to all the companies I was shipping in production including Planet scale including axium including versel and they were all down so I ended up for the first time ever having a set of sponsors making this content possible not too long after that versell announces the app router and server components and my mind is blown initially I'm actually quite skeptical you could find my old videos where I first talk about nextjs and server components and my responses yeah I'm not sure but then they made one really big change that entirely shifted my tone they made server components asnc like properly asyn like you could just await a call there's even a clip from one of my old videos where I say they should have done this this is the future I dream of and this can absolutely happen like but the the point I wanted to make here is I dream of a world where for Server components you can define a component async do whatever in here and return yeah I was skeptical but then they changed it to be async and I decided to play and boy boy oh boy did I fall in love remember how before I said that I B Bally dumped out Hall of next in favor of my own Solutions I had been leap frogged many of the things I was putting my time and effort into suddenly felt both archaic and worse to use as a user when I saw how powerful it was just awaiting some data inside of your components I knew it was going to be magical not because I just saw it and it was obvious because I had put a bunch of time into Astro as well and the magic of just awaiting some data and having it type safe to just us in your markup without having to make an API endpoint or handle the types between the back end and the front end and all of this chaos just vanished and I realized this was the ultimate version of what I'd been seeking this whole time where v0 was endpoints in some other code base client code has to guess what data it's going to be getting to V1 of now the API endpoints are in the same code base to the thing I skipped the V2 of what if the get server side props Returns the data directly so that was just a mess and I stuck to like a V1 Plus+ of trpc doing the bridge instead but now this third generation of these Solutions of what if the components could actually do the server side stuff themselves and just pass the data down like properties and when it clicked it clicked hard it clicked so hard that I got called a fanboy and specifically I got called a shill a lot as though versell paid me to have these opinions despite the fact that when versel and I first Inked our deal which by the way the numbers have not changed since we started despite me being five times larger I could reasonably charge them more but I don't because I don't want to I'm very happy with the current terms of our deal things are working out great for everyone involved the magic of server components blew me the away and I went from unsure to one of the biggest Advocates very quickly seemingly too quickly because to this day I still get that verell paid me to believe these things that I didn't believe in the past but really what had happened was I used it in my perspective shift and that's why I made this video because I honestly think if you guys knew my history of going from a disgruntled backend Dev to a functional Fanboy to the guy porting twitch from Ember to typescript all the way to where I am now I think it makes a lot of sense why I feel the way I feel none of this has anything to do with what I've been paid I included those details because I think you guys should know them my perspec effective has not been influenced by the money that has been spent on my channel I love next because I went from not caring about next to not liking most of next to feeling like this is the framework of the future and when I started using next it was barely even the framework of the past it was such a mess and what the teams created here is something truly groundbreaking that I actually really love so yeah let me know in the comments about how I'm clearly a paig shill cuz it's what you guys love to do until next time maybe we'll have some opportunities to go ship some next anyways peace nerds




## My biggest failure to date - 20250605
if you all have watched my channel for a while there's two things you almost certainly know One is that I've been changing databases in T3 Chat too much And the other is that I really really really don't like downtime As such this is kind of a sad video to make because we had our first major outage with T3 Chat In the past we've had blips where as I was making changes things were down for a few users for a few minutes We've never had anything before like we had this most recent Sunday where for a couple hours the site was almost entirely unusable I want to be really transparent and straightforward with this It's not acceptable We take our uptime incredibly seriously and we're going out of our way to make sure that going forward you can use and trust T3 chat to be there when you need it I was preparing the assets I needed for this video as I started recording and noticed that Twitter is down as well You literally cannot go to a feed and get posts Apparently I've never posted on Twitter which uh you guys know is certainly not the case Thankfully if you have the direct link it still seems to mostly work And I've managed to find on a very laggy broken website my original post taking accountability for this outage and describing what went wrong and how we plan to prevent it going forward as well as a blog post from our friends over at Convex Because as much as I don't want them to shoulder the blame for this outage there are things that they had implemented incorrectly on their side that caused it I think this is going to be a very interesting video It's not the usual why this tech is cool or how to prevent this type of error It's going to more so be a breakdown of how we planned this migration what issues we ran into throughout it and what went wrong once we actually hit the go live button that caused these problems on Sunday If you're interested in breakdowns of real engineering work with actual loads with hundreds of thousands of users this could be an interesting deep dive for you That all said this cost us a ton of money and time and convex bills are now actually a thing that we have to pay As such we need a quick word from today's sponsor to cover some costs and then we'll dive right in Do you know what OpenAI Enthropic and Cursor all have in common i'll give you a hint It's not that they're AI companies Is that they all use today's sponsor Work OS Yes really You can see it if you go to any of their sites Cursor uses the stock signin from OKIT which is hilarious but also serves the purpose totally fine And both OpenAI and Enthropic are using one of my favorite features from work OS which is the admin portal You could even see the URL here inside of Enthropic's official documentation They're not hiding it at all So why are all of these companies and so many more including Versel Fanta Carta FAL Replet and more all relying on work OS it's cuz they got Enterprise O right As someone who built the company that a lot of businesses are trying to use I wish we started with work OS and we're planning our move as we speak That admin portal is killer If you're trying to get a big business to adopt your thing many of you probably haven't dealt with this before but I have Trying to set up everything from SAML to Octa and all these other weird abbreviations can't even remember across different companies that all have it set up in their own weird different way across AP I wouldn't wish this on my worst enemy If you're using work OS you can just send them a link and they set it up however they want to at their business There's a good chance the IT person at the other side has already used the specific admin portal because it's being used across so many of these businesses By the way cost isn't that bad either It's free for your first million users which is pretty absurd If you're ready to ship to serious businesses check out work OS today at soyv.link/works So let's start at a really high level What went wrong like what was this outage cuz it wasn't like people went to the site and then saw an error or a thing blocking the page Problem was three-fold Primarily the issue is that chats weren't loading You would just sit there and nothing would load in Creating new chats was also barely working and honestly just everything was lagging a ton The reason for that was the websocket connection layer that you connect to with Convex was having issues So the actual thing that sends the data down isn't just a traditional HTTP request With Convex you create a websocket connection on the client and subscribe to queries So you get the initial data when you create the subscription and then you get the rest when it changes and other things occur on the service Problem was that that connection layer entirely fell over In order to understand what problems we had that led to this place I think a quick overview of this migration and what it looked like for us will make it a bit easier to understand You might recognize some parts of this from the previous videos I've done about our database changes but this will be a overview of why we are doing this Before the convex move we had all of our data in a traditional MySQL DB This DB was on planet scale I still dearly and deeply love planet scale I wish that they were the right product for us right now The issue is that I found myself effectively rebuilding convex on top of planet scale myself in order to make all of this possible and that just wasn't maintainable for a 2 and 1/2 to 3 and 1/2 person team Convex is a much bigger team with really talented people doing nothing but data sync stuff and I wanted what they had and it was a lot easier for us to move there than it was for me to rebuild all the things they did on top of T3 chat in the database that we had before The other important thing to understand is that the switch from the MySQL DB over to Convex sync engine is that this isn't just like we change where the data is stored This effectively was a rewrite of the whole app T3 chat's about 25,000 lines of code My PR changed 10,000 of them This was pretty much a rewrite As such this wasn't just I changed the data store This was an entirely new codebase And as such I couldn't just put on a feature flag where your data would go to one DB or the other This was an entirely different deployment with an entirely different experience for users I could theoretically put a middleware on the URL and split which traffic goes to the new one versus the old one But what I really wanted to do was a hard cutoff where we would pick a day and going forward everyone would be on the new codebase and when a user signed in or open the page for the first time I would pull their data over to the convex sync engine at that point but that led to some problems The initial implementation I had here was pretty rudimentary The pieces are important to understand So we had the traditional MySQL DB We have the convex sync engine We also have the versel nex.js tRPC backend and endpoints And then also we have the user client experience These are the four parts that existed We had the old MySQL DB that had all of the user's old data And the way things would work before is we had that the user experience and the traditional DB with the back end in between The user would make a request for their sync data request would go to the DB and do the like drizzle call to get data And this one was pretty lazy I would usually just grab all of the data for you as a user So all your threads and all your messages We would then send back all data and then that would go back to you where you would persist in index DB Index DB is a data store in the browser that you can use to store data All of your data used to be stored in the browser but we ran into such an absurd number of issues as we were trying to do things for different browsers getting Safari to work getting multitab to work IndexDB just became a constant source of pain There are whole companies that are just trying to make index DB behave properly Shout out to Dexi for making it usable at all It was a phenomenal library that I love dearly So much so that it almost tricked me into using index DB for longer than we should have because the API just sucks But this was our setup for a long time Things are quite different with convex involved and it's going to look more complex initially but I promise you it is not People are also getting confused about the order being right to left So I'm going to switch things over so that it's a little more logical But the biggest difference is before we had the user client then the back end then the traditional DB and the DB was behind the back end Convex you can kind of put it either side but the place where you're expected to if you're using it properly is between here You could even use convex as your entire backend if you want to because they have backend functions So the way that things now work in T3 chat is you query for thread data get threads that calls in convex the right TypeScript function that you wrote calls their database in order to get the data and then sends back those threads So this get threads call creates a subscription and then we send back the data and then if another change happens let's say the backend sends an update to convex that says uh thread name changed instead of me having to query the backend to know something changed since convex is connected via websocket it would then send the change down to the user that is updated thread data and this is the magic of it It made a lot of things way more simple where instead of having the backend try to send the right data both to the user and to the database and keep everything in sync and hope for the best Nothing the amount of edge cases like something like deletions is so complex because what happens if you delete a thread or delete a message on the client but the server is still generating the result What's the right state there and if you open up another device that has that thread that you deleted on the thing you were on before should it sync that back up how does that all behave and things like deleted messages reappearing generated messages stopping halfway through and not restarting All these types of problems were very persistent And this was complex because before the user would make a request to generate message and the backend would effectively have to send it to you and send it to the database or which we found what was much more stable is it sends it to you and then you afterwards would send it to the DB Obviously you would actually use the backend to do it but the point I'm trying to make here is that the message gets sent to you and then another function is hit to send it back to the DB So if the client goes down the back end no longer is sending it anywhere Everything sucks But if I send it to the DB every time it changes the right throughput is absurd Getting the right balance here was really annoying Convex made it significantly easier You get the data you're now subscribed My backend can write changes to Convex and you just get the update Love this Made things a lot easier Still couldn't handle the absurd throughput that we were getting when we were generating messages because these messages generate and update 300 times a second on some of these like models Like Gemini can do two to 300 tokens per second So if we write all of that to DB and sync all of that down you get the whole row every change It's just unrealistic amounts of data The place we landed is a nice hybrid model where the backend will stream the message to you as an optimistic update but then it sends the final state to convex so you get that persisted The results much cleaner feels really good overall but that's not what we're here to talk about I might do a whole separate breakdown of why I love Convex Let me know if you're interested in the comments But for now I want to talk about the migration So we now have all the parts Here is how things would for the most part work with the migration at least the first attempt So user client would send this request to my backend that says "Hey I want to migrate." It would then do a few things First it would go to that traditional MySQL DB and get all data It would send that data back Obviously it's a SQL request That's how that works User data I would then chunk the data and I would write all of the chunks piece by piece starting with the chunks of attachments So attachment chunks and it would do multiple So if you had more than 100 attachments it would chunk it into groups of 100 I would then do thread chunks and then after that I would do message chunks and once all of these went through I would do one last pass that is the finalize migration and this would just set a flag in convex that says this user has completed their migration relatively simple all things considered And in all of my testing even with really large amounts of data this was working great And once that was all done you would get the sync event to the user that says migration done And now you can start using T3 Chat We got this all working We were pretty happy with it We hit the go button And what happened the first time is a bunch of users got stuck in a weird state where the migration was continuing to loop I talked about this a bit in my database change video before but the TLDDR of what went wrong is that the JWT we had for users who had signed in for the first time on a really old version of T3 chat it had multiple different ids in it So we had subject which would be a user ID We also had properties and properties was a nested object that had ID which would also be user ID as well as like email etc So we were using subject as the identifier The problem that we were getting was that users would run a migration everything would seem fine but then it would keep trying to migrate The reason this would happen is that subject wasn't always the correct ID Sometimes it was mal formatted This is because of a bug in open o which was the O library that we're using Rolling your own off is really fun until you run into these problems and you question why you ever did it I gladly would have paid the price for any other off provider to have not lost the insane amount of time I lost to this bug Like straight up was not worth it I regret rolling my own off for this project Straight up Open is a great library I actually quite enjoy it and it was the right thing for the time for the choice But this bug cost me so much time and money it's hard to put into words That was why the first migration failed We started using this nested properties ID which was always correctly formatted That fixed a lot of issues but I was nervous enough that we didn't want to just flick this on for everyone That's why we introduced the T3 chat beta where you could opt in going to a different URL cuz remember it's entirely different codebase You go to beta.t3 And you'd go here you would migrate the first time you went you'd have the little loading spinner saying we're migrating your data It would do all of this stuff and you'd be good to go That was much better We had a lot of people migrate over We kept a close eye on the traffic We actually crazy enough had about one/4 of our users move over to the beta which was awesome And I greatly owe all of the people who took the time to try out the T3 chat beta It helped us a ton with understanding the performance characteristics that made all of this possible That gave us the confidence that we were in a pretty good spot to hit the on switch and make the migration So I tried again It failed again We were down for about 5 minutes but that outage took down the beta entirely So the beta was down for like an hour as things recovered but I just flipped back to the old build A couple people had to refresh twice because they got hit with this twice when we were figuring it out But we had a lot more data to look into this time What we found the second time we did the migration was that there was a huge throughput of mutations that were causing the problem If we had 500 people on the website at the same time when this change came out all 500 would run this at the same time I wasn't doing any queuing beyond you would send your threads first then messages then finalize But if 10 users did it at the same time all 10 would go at once The beta somebody caught this in chat Yeah the way that we did the beta effectively became a rolling update because users slowly rolled into the beta So the traffic there despite being representative like if we just forexed our traffic from the beta things would have been totally fine But we didn't forex the traffic from the beta for 5 minutes We 400xed the traffic from the beta and that throughput was too much or so we thought This is actually where things start to get fun We'll get there later on because we we all convex and ourselves had bad assumptions throughout this that had to be disproven at many points throughout the journey This was now concerning enough to us that we realized we needed to cue these migrations Instead of just running all of them all at once we needed to parallelize it and put a limit on how many could run concurrently as we probably should have from the start but honestly we thought we could make this hard cut move on and not have to worry about it We were wrong As I was working with Convex they introduced me to a pattern that they had as one of their components that was actually really cool and made this a lot easier That pattern is their workpool component I know the word component is confusing for us as React devs but their idea of components are these pre-made utilities that they built that work inside of the convex context to do different types of work And work pools are incredibly cool You create a workpool by defining it in your app config So now I have components.mmigration workpool This is a defined thing that exists in my app uh definitions convex config here So workpool that we defined here with the name migration workpool This all exists Now I can call this other places like here where I define migration workpool with a max parallelism limit of 10 So this can only run 10 things at a time Everything else will get cued if you try to queue up more stuff And now I have Q migration work which is an endpoint that a user hits when we detect they should be migrating We throw if they're not O which should never happen due to the way I fix and set up O stuff And now they call the workpool with an inq action This cues up some work to do in the workpool with a given set of arguments And since this is convex this internal migration thing this is just an API that I defined and I can commandclick and go to it just like you do in TRPC Super nice All type safe as well of course Do migration action is an internal action takes in a user ID finalize so that I can run this in the background and not finalize the migrations As well as the user prompt customization and the user configuration because those weren't stored on the server before So I need a way for the user to be able to send that up to start the migration I then fetch your data from our back end which is a bit annoying The relationship between convex the back end and my back end on Verscell is the single thing with convex that hasn't been my favorite yet There are it's nice because it is just JavaScript So you could do something stupid like give it an environment variable for the URL you're deploying to and have it work But in dev this was annoying And I actually still have an Enro tab open in my terminal here You'll see number one the bottom there is Enrok because that's how I would have convex call the backend in order to get the data that we have to migrate I even still have the header to skip enrock warnings for this in there I would then error out so I have logs if it fails I would then parse it with super JSON parsing if it succeeded I use super JSON instead of normal JSON So things like date times will be in the correct format I don't have to convert from number to date I log how much stuff we're about to do And now here in this action I go through each chunk and I migrate it I go through each chunk of threads I migrate it I go through each chunk of messages and I migrate it If they have prompt customization I include that And if they have user config I include that too And then I finalize it If the finalize is set to true by updating we're calling the wrap-up migration function which just sets on the user config that the migration is done Pretty simple And it's actually really nice with convex that this type of code isn't some crazy custom syntax is just all if this thing for loop do the thing It's one of my favorite things about convex is you are just writing TypeScript but you're not taking a performance hit for it that is meaningful It's really really nice And since I put this in the workpool this migrate action can only have 10 running at a time So if a new one gets queued up it just sits in the queue and waits until the other 10 are done So it's impossible to have more than 10 of these running at the same time I was concerned enough with our launch that we actually bumped it all the way down to three and then we shipped and it worked At least we thought About 5 minutes in performance went to again And this time I felt really bad There's an additional detail I forgot to include here which is that our traffic for T3 chat fluctuates a lot throughout the day and week On weekdays midday the traffic is at its highest by far But on weekends around midnight it's a lot less traffic about half as much As such we plan to do the migration around midnight on Saturday night Then I went and double checked the data and I saw we were in the lowest point when I checked which is around 5:00 p.m Turns out I was looking at UTC time even though I was certain I had Post Hog set in PST The low point was midnight UTC which is around 6:00 p.m my time So I made the executive decision to migrate us then because I wanted to do it during that window of lowest traffic so it would be the smoothest rolling migration possible And it went well for a little bit but quickly users started having issues People weren't able to connect to the websocket layer Queries were getting really slow It was getting really bad And when I looked at the numbers it looked really bad The query throughput was absurd And most importantly and this was the really scary part when I went to the dashboard it would lag out and crash And the Convex dashboard is a lifesaver It's so so good So having that not working was terrifying I felt like I had no idea what was or wasn't functioning for our users So I made the decision to roll us back again This was the third failed attempt to migrate us to Convex and I was bummed Unlike my other attempts Jamie who's one of the founders at Convex was not around to help because he was out at a movie with his family And I felt so bad But despite that he actually left the movie and sat on a bench and debugged with us on his phone alongside his other co-founder James and we found some really important details It turns out the query throughput was one of the biggest issues This was the load We did the migration right around 7:30 had a spike then it chilled out then then it spiked a ton and that's when it crashed We were absolutely within the like right limits especially now Previously we were pretty convinced the problem was the throughput for writing mutations That was certainly some amount of a problem but it wasn't the problem that was causing the issues that we were seeing It certainly wasn't the problem that caused our queries to flatline to zero because of the throughput The issue ended up being a couple much more subtle things The way convex works is I get the threads when I call the get thread function and now I'm subscribed to that set of threads If a change happens the update comes down What happens if these threads are all being updated constantly because a migration is running you have a lot more data being sent to that client and a lot more queries being fired because every time you write one of those rows inside of this response the whole response gets sent back down Turns out I actually made things way worse for myself with another change that I had made Something I care a lot about is really snappy navigation I want you to when you click a thread in the sidebar have it immediately show the messages The way I solved this is I had this function here where I would grab your top 20 threads and I would return my thread prefetcher for all of them My thread prefetcher is just a use session query for the messages for that thread and it returns null This is a component that renders nothing that exclusively exists to subscribe to the threads that you have in your sidebar there I could do some fancy stuff with hover prefetching and all of that I didn't want to This ended up being the simplest snappiest solution by far But now we have 20 subscriptions to your top 20 threads And we were migrating oldest to newest So let's walk through what this now looks like for the client When the migration is going like this migrate all the attachments Nothing happens Cool Then we migrate threads Migrate 100 threads Top 20 gets subbed So top 20 now create queries to get messages and then another 100 threads come in Now the top 20 changes new 20 queries to get messages This would happen until all your threads migrated So every time a chunk of threads came in 20 queries would fire and or update But that wasn't the worst part The worst part is when we move to message chunks because if those message chunks if any of them touched those top 20 threads you had those top 20 thread listeners waiting and all of the message writes would update some number of those So the message chunking was firing hundreds of additional queries and all this was happening in the background as the migration was running So you as the user weren't benefiting from any of this data being fetched We were just subscribing to things we shouldn't have been yet which caused absurd amounts of query traffic that we didn't need Why did we not catch this before how did we have this going that poorly and not notice remember earlier I was talking about this O issue There were two parts of this The first part was that subject like ID mismatching thing The other part is that our cookies used to be HTTP only and when the migration was running it would still be an HTTP only which meant that we couldn't use that cookie to connect to Convex and I would update the O after the migration was completed So anything we were doing in the client that was dealing with subscriptions didn't matter because you weren't connecting to the client yet You didn't connect until after the migration was done where we would then update your authentication As such you never had to hit these queries in that case But I fixed O earlier because now I didn't have to trigger through my backend Now I'm triggering by calling convex directly So I need O fixed first So I fixed O then I connect to Convex then I trigger the thing but now you're connected to Convex So now we had these insane loads of just tons of queries updating that didn't need to causing you to do a ton of traffic that you didn't benefit from that just caused us to effectively DDoS the database layer in convex The correct solution for a lot of this would have been very simply to not render any of this until the migration was completed I even added this here for that reason But I also added this too which we'll get to in a bit When I pushed this it reduced the load by between 40 and 70x This one line of code where I don't prefetch if you haven't finished migrations That one line change made everything go significantly smoother And at this point for the most part we were out of the woods Things were smooth The app felt great I was really happy I made a couple more changes before going to bed that night cuz I wanted optimistic updates to be better for people who aren't near the server so that when they made a change they would see it in the UI faster Ended up making it feel significantly better I'd even say it's faster than T3 chat was before when it was local first Was very happy with where things were And for the first time in a long time I slept good I straight up slept for like 12 hours It was from like 10:30 p.m till 10:30 maybe 11:00 a.m the next day I slept hard because I needed it after a month of getting all of this done And I woke up to utter chaos I woke up to so many DMs so many support emails so many tags so many messages so many replies on Twitter so many Slack messages and threads Between 6:00 and 8:00 a.m things had started to really slow down And from around 9:00 a.m onwards things were effectively down We had mitigated pretty much everything we could at that point And I would argue from here forward there wasn't much we could have done to prevent the failures But to be very very clear it does not mean we aren't responsible We should have been able to recover much faster And the fact that we didn't have a good enough paging system to wake me up earlier is a huge failure on my part And we are going out of our way to fix that So going forward I can get these things fixed much faster This is where the problems got significantly more complex I could tell you from my own words but Convex actually went out of their way to make their own blog post detailing what went wrong here because our load was very interesting Up until this point the issues we had had were for the most part code we wrote that was bad causing either weird shapes for authentication data or queries and mutation throughput that was just absurd and unreasonable especially at our size of product Those were almost entirely our things to fix not Convex's fault There were even a few times where we were convinced it was Convex's fault They went along with it for us to figure out it was actually us in the end Wild set of experiences but this was a very different outage The fact that we had so many problems with the mutation and query throughput kind of led us down the wrong path when we started having problems here I love the wording here Despite what Theo's discount code might lead you to believe none of this was Theo's fault It was Convex's fault I I don't like that I think we all have things we can improve here but this outage was like things that no one expected on either side to cause problems We'll get to those in a bit cuz as I said our traffic should totally fit within what Convex can do But there are quirks to our traffic that they were not prepared for Speaking of discount codes if you haven't subscribed to T3 Chat yet you can subscribe now with the code blame Theo and you'll get your first month for just a dollar Only for new subs And don't ask us for a refund on $1 Come on guys $1 for a full month when it's normally eight bucks Get access to all those models It's a pretty good deal I think Give it a shot Anyways vast majority of Convex is open source So this is actually a really cool point We can look at the diffs on Convex when they fix these things and made these changes Also funny a bunch of people tried using the coupon code Theo to get a discount on Convex Convex doesn't really do much in terms of discounts So to be fair it's really cheap I don't know why they would and their free tier is really generous too So there's a discount code for Convex from me but let them know that I sent you if you do try them out because of me because they've been awesome I was so skeptical of Convex for like 4 years and I came around and I I can't imagine building stuff with my stack without it now So here are the pieces that made our traffic weird The first point is that we do a lot more text search than other high traffic convex customers do We have a search right there People really like to use it It's not in a great state right now because we turned off indexing on messages So we're only searching based on thread titles right now which I hate We will fix this very soon once we are sure the traffic spike is something we can handle But the search box was causing problems But the bigger issue and this is what none of us expected at the time users frequently leave T3 open in a background tab so it's there when they need to go check it This was the problem because a lot of people who weren't actively using T3 chat were still connected via the websocket connection And despite our actual throughput being relatively low the number of websocket connections we had was absurdly high As people are saying in chat here T3 chats open all day for me Same for me I have a bunch of T3 chat tabs open at any given time People same It's open 24/7 I do it on multiple devices Yeah any given T3 chat user has a chance of having like five tabs open across different devices that all have an active connection to the websocket layer Thankfully and I'm very thankful this is the case when you implement websockets correctly a given websocket connection is actually really really cheap So theoretically if we have a ton of these connections at any given time it shouldn't actually matter too much in terms of the load on the Convex server And as we've mentioned many times now Convex manages all of the data back and forth on the client through the websocket An important piece they have here is that as they've scaled up customers they have slowly accumulated a vast list of knobs These knobs are runtime customizable parameters that they can adjust on a case- by case basis so that larger customers can scale smoothly There are things like resources cache sizes limits on a given convex deployment And they literally link the Rust code for the backend Yes Convex is written in Rust for their crazy scalable websocket back end and they link the code that shows all of these custom knobs that they have a configuration for so that they can change the performance characteristics for a given deployment when it needs it And they had bumped a handful of things for us to make sure everything went smoothly They did call out one more detail here and as far as I know this isn't being too big a problem but their text search doesn't scale as aggressively as the rest of their stuff does So for us with a shitload of text data that needs to be searched against they found some edges they're still working on fixing and I'm sure it'll be fixed very soon I haven't even bothered trying to turn it on to see what happens yet but it should be good soon The important piece is that we had made so many websocket connections because people would join T3 chat open it up and just leave it open The number of websocket connections we had was just going up more and more over time and very rarely going down It was a pretty consistent growth there Around 6:00 a.m one of the Convex on call engineers noticed elevated error rates for some T3 chat users The error subsided and load returned to normal so the investigation was tabled until more engineers were online It started to ramp up bad around 8 a.m But by 9:30 the errors had returned significantly And with several engineers online the team realized that a new limit within the codebase was being hit As more T3 Chat users were waking up and using the app the number of pending subscriptions that needed to be refreshed T3 chat was periodically having giant spikes of query invalidations in server function runs With more users online these jobs were starting to overflow a queue of waiting during spikes which caused the server to drop websocket connections So the pattern that happened here is that their text indexing would invalidate itself every 30 minutes That would cause the queries to have their cache busted which would then send an update down the websocket But there would be a huge queue of those when that happened which would occasionally cause the websocket connections to drop We didn't understand why T3 chat was sporadically going from a steadystate load of 50 QPS to 20,000 plus per second But our first instinct was to turn this hard-coded Q size limit into a knob so we didn't cause all the clients to crash and reconnect That would buy us some time So the problem here was that the number of connections that could exist at a given time was hardcoded still They hadn't made it a knob yet So they changed that so they could configure it and they bumped our limit from 10K to 100K Then around 10:15 a.m they simulated the failure that we were having and the engineer team noticed that the Convex client didn't back off when this particular failure occurred This is probably the most important and I would argue the most interesting detail of it all As you can guess connecting to that convex client and managing all the state on client is annoying So they have a really nice JavaScript library that does it for you It also manages the connection The connection when it fails has a schedule reconnection function that does an exponential backoff So it doesn't dodo the service when it is struggling to connect The problem is it doesn't call that properly under certain cases And the subscription worker full error that caused these failures was one of the ones where it wouldn't exponential back off It would just rapidly try to reconnect So their client code wasn't backing off when the connection failed And because of that it was DDoSing their servers So Convex's code in T3 Chat was Convex's websocket connection layer They rushed out a change to fix this Again huge shout out to their team especially Tom who was making a bunch of changes on the JavaScript side in order for us to get this fixed We shipped two custom clients out that they pushed to npm just for us to get this underway The problem was a lot of users were just waiting for the page to recover or they had a background tab We couldn't force refresh the user's client You've all seen that little notification in the corner that's like T3 chat hasn't updated Click to refresh That's all we could do We couldn't force a client to update which meant a lot of different clients were on an old version of this JavaScript package that was DDoSing their service And we had to wait for more and more of those clients to be updated to have the new code that would back off more gracefully in hopes of reducing the connection load As they said unfortunately most of this load was coming from background tabs and we had no mechanism to force a refresh on those tabs So the old Convex code kept hammering the backend which would overflow the queue causing disconnections and reconnections yet again Around 1050 they had finally finished building and passing all the tests for their backend which funny enough since their backend's in Rust it's a lot harder to ship because the build times suck Welcome to Rust It's funny that Rust is going to fix our buildtime problems in JavaScript while having its own massive buildtime problems Eventually the back end was ready They shipped it and now they could increase the size of that queue which seemed like it would solve all our problems But another problem was introduced that we'll get to in a bit From 11 to 12 the Thundering Herd just continued to overwhelm the T3 chat convex deployment Couldn't figure out what was happening We profiled the app We found several optimization opportunities to speed up the Convex engine I found a bunch on my end too That's where this came from if outage returned null I went through and found all the heaviest things in the app that weren't necessary and disabled them commented them out blocked them and did whatever I had to to just make the app do less traffic As people are saying in chat they saw a whole bunch of update notifications right as the outage happened And all of those were us changing the client bundle shipping changes to try and reduce load all these different things to to do our best to recover I'll be honest at this point I was thinking about once again rolling back to the legacy version but no part of me wanted to go back to the old DB the old index DB index setup and have to have people lose their chest they did in the last 12 to 24 hours I needed to make this work and we felt like we were so close constantly I was scared but I knew we could do it and having the whole Convex team up and working with us was a huge relief Somebody asked why not implement force reload because we couldn't implement different client code if the client was out of date Even if we did add force reload then we couldn't run it on old clients We had no code on the user's device that could trigger a refresh So we had no way to get these old tabs updated We should have it now and we'll probably do something in the future to make it more likely But yeah and thank you for this jolly coding cuz I feel terrible about this outage But both Claude and Twitter were down for more time last week So I'm being too upfront And if anything this might actually look bad for us because both Claude and Twitter are pretending their outages didn't happen and people are forgetting about them Most users probably didn't encounter the outage that I am describing because it was on a Sunday which is our lowest traffic day But I take this really seriously and me talking about it so much will probably make our service look less stable than our competition even though our uptime is comically better But I I'm not trying to rub it in I'm trying to be transparent and as honest as I can be about what happened Well because I think it's interesting and because I want you to know what we're doing to fix it so you can trust us going forward I think that's much more important than pretending we don't go down Anyways they found some changes on their end to jitter and back off connections to try and lower this insane amount of load but they still hadn't quite discovered the third problem Here is where that was discovered An engineer on our team noticed that while we were manually pushing out fixes to T3 Chat's convex deployment during the outage we accidentally placed the deployment back onto the default hardware resources used by free accounts So the issue at this point was both the insane reconnection load but also that we were on the free tier effectively because they were doing so much manual stuff pushing It was just an honest simple mistake The problem was that their system that kept track of which provision a given instance was on was overridden by the custom deployments they were doing because it just didn't honor that setting Honest mistake I have made so many mistakes like this It's hard to even put into words Especially for like account provisioning for like when we change someone's tier on ping I cause bugs like this dozens of times a week I don't hold this against them at all I'm pumped they found it though because they want because like this is an annoying thing to find They debated fixing it immediately but it felt like the weaker hardware had almost gotten the site back online So we delayed fixing that issue for a few more minutes to see if we can get everyone in sync before restarting the back end yet again because restarting would once again cause all those old clients to go back into DDoS mode If we can get enough of those old clients connected they would stop DDoSing and the traffic would be much more reasonable But then they saw it still just wasn't recovering fast enough So they finally made the decision to redeploy on the much more powerful hardware that makes more sense for our service And it was almost immediately recovered from that point That was the timeline but they did a much deeper root cause analysis I've touched on a lot of this throughout I want to break it down cuz they did a great job The first piece was their search index compaction causing query invalidation This was really funny because they sent me this graph where they showed spikes every 30-ish minutes that were just insane and I was very confused about them because we didn't even see them in our dashboards And James asked if we had a cron or a scheduled job or something that was running every hour every 30 minutes that would have been causing this I don't know how much you guys know about the stuff I build but I avoid scheduled work to the best of my ability A cron is a liability in four letters The amount of problems I have had from old crons running that we forgot about is hard to put into words I much prefer things to be driven by users not like automation Somebody asked if James was the on call engineer No James is one of the founders The founders of Convex were the ones in the trenches helping with a ton of this James was the CTO and Jamie was the CEO and they were both deep in this helping us This wasn't like some random on call engineer desperately trying to help us out This was the core of Convex putting everything aside to make this work for us And somebody just asked should you close your background T3 job oh do not keep T3 Chat up and going Do not change the way you use T3 Chat based on what you learn today T3 Chat should work however you want to use it And if it doesn't tell me and we will fix it We will continue finding all of these things and fixing them Yeah So this one was funny because honestly when you see a chart like this with 30 minute hits and it's any other customer you would assume they have something on a cron job that's causing it That is the reasonable assumption I would have made the same assumption myself We do not have a single cron job running for anything on T3 chat So this couldn't have been us And then I love their wording here We did what comes naturally Accuse the customer I want to give Convex an absolutely absurd amount of credit here because I have come to them with so many things that I was 100% confident were things they did wrong And of the the six major ones where I did that five were our fault and one was Openoth's fault So of the six what the are you doing convex moments I had all six weren't their fault These guys really really get databases and scaling Even if it seems like this is a massive failure in scale do you know who doesn't have those problems planet Scale Do you know who the pickiest person I know is about database stuff sam Lambert the CEO of Planet Scale I introduced Sam to James and Jamie And he said to me I don't even know if I'm supposed to say this I don't care If I could possibly hire them I would It's rare I get to talk to people who don't work for Planet Scale that understand database scaling and characteristics as good as they do It was a relief of a conversation to have So if you're thinking of Convex as this like JavaScript bro database solution or like a Firebase alternative for small apps you don't understand Those guys scaled Dropbox and they built convex on what they learned They really get what they're doing And right now our ConX deployment is also based on my SQL And there's a possibility in the future They're in talks They've had a back and forth public about it I hope that happens where there's a future where Convex is running on planet scale So I'll once again be back on planet scale As funny as that would be We'll see if that happens Fingers crossed to we'll see in the future But they know how to scale So do not think any of this implies that they don't know how to do scaling stuff we just happened to have weird workloads that had specific edge cases that they could immediately just turn up a knob and it handled the scale fine So James made the mistake of accusing us not knowing I don't do crowns and this is something that I would expect from them because I've accused them so many times of things that weren't their fault Yeah this was totally reasonable and understandable And you can see my sleep schedule showing off right here Yesterday at 2:55 a.m Also them at 10 p.m still trying to help us with debugging Any luck figuring out what those spikes are i'm curious not seeing them ourselves on Axiom Yep we got them It's a search index cache entry invalidation We'll add this to the postmortem post and also prevent them from happening Their search indexing was running compaction in order to keep the data size smaller for all the index fields but it was updating every 30 minutes which would invalidate subscriptions which would cause a bunch of queries to fire For those wondering what Axiom is it is one of my favorite services The first two companies to really pressure me into considering a sponsor deal were Upstash and Axiom because both of them were super hyped on me and what I was doing when I had like a thousand subs on YouTube Love those guys And if you know my community you know that they have taken a ton of people from here including CJ who's one of the core people for create T3 app Igor who's one of my favorite designers ever and Gabriel who used to be my lead researcher and now is too busy running a bunch of engineering stuff at Axium Love those guys Really really good platform And I'll be honest I had not used it much since they redid the dashboard until these outages Here is their query builder UI The big thing with Axium is it just can handle horrifyingly large amounts of data Like if you look at their pricing you'll understand You can in just 500 gigs of data per month for free What what it's so insane I have been very very happy with Axiom as our like log dump for everything including all of Convex because Convex actually has a integration with Axiom where you just click the little attach button and now all of our logs go straight to Axiom for us to do what we need to with So here we're going to grab all of our executions where there is a data function path that exists And now when I hit run it's going to show me all of the queries that have run But I want to do a bit more I want to count based on the given function that's being called So if I change this to data function path there and I hide my screen in case there's PII in here and there we go Now I can trivially based on a given function path create a graph to see what our traffic looks like at any given time I can do last day We can see spikes that occur throughout the day and all the different traffic for all the different functions And as you can see search gets hit like 1.7 million times a day I thought I had nerfed that I guess my nerf didn't go through Have to go adjust that later But get thread by ID gets hit 1.5 million times a day You you get the idea We do a lot of traffic right now This is such a nice way to visualize this data It's such a good service for just logging everything Axiom's cool You should give them a shot if you haven't They are not sponsoring me right now I have turned it down over and over I probably should They're doing well I should probably hit them back up I just I really like them It's been nice for that But as I was saying we did not see the spikes that they were seeing when I went and checked inside of Axiom which meant it had to be on their side So that's what the logging code looks like What code here's what it looks like You go to settings in Convex or Versell or whatever else and you connect to Axiom Now there is no code and all my logs just go to Axiom It's very very very simple No effort That's part of why I like them so much That's how I got everything from Convex to Axium Sorry for the deep dive on all that stuff People are asking questions I thought it might be useful to see how we actually monitor these things It's like if Graphfana or Data Dog didn't cost billions of dollars and had an interface made by people who actually care Anyways the problem that we were discussing first the first of the three problems Convex listed was that search indexing problem that was on their end They didn't notice how often this was happening because convex is really fast So they didn't notice until the number of queries got bigger than the queue size which caused the clients to go into these retry loops Problem two the backoff logic I talked about this before but it was not nuanced enough If it successfully makes a connection of any form it would immediately reset the exponent to zero The problem was it would connect get an error then disconnect which meant that it would reconnect over and over again and every time it managed to make a connection it would be disconnected and then recreate it So that exponential backoff wasn't applying because the exponent was being set to zero over and over again So it ended up causing a DDoS to their service As they said if they had the back off working T3 probably would have gotten back to running properly again even on the free tier cheaper lesser quality hardware But that leads us to problem three which was that operational tooling did not enforce account specific provisioning rules So when they were in their like ops dashboard for putting out this emergency it didn't persist settings that they had set on my account which were in this case the settings to be on a more powerful box As such things fell over because it wasn't a powerful enough box to handle our traffic The tool that they used to push code manually in their clusters during an outage didn't preserve the provisioned resources that they had applied before on the account and they forgot to manually override it when they were hastily trying to fix it This is a mistake that only happens when you are trying really hard to fix the thing which is again why I will never ever fault them for it They were trying so hard to fix the thing that they found three bugs in their system because they were trying to fix it that hard We spent more than an hour looking for complicated architectural reasons the T3 chat was down when the issue was actually the simple CPU overloaded because it was running on the wrong VM type Humans are allowed to make mistakes especially under stress So tooling needs to protect them from those mistakes This is the part I really want to emphasize I do not fault Convex at all for any of this I will take as much fault as is possibly reasonable specifically because we also didn't have good enough tooling not just to prevent mistakes but escalate the problem when we discovered it None of that tooling was in place yet and we are working hard to do it now We're going to go through their follow-up actions and then we're going to go through what we have planned on our side too Convex's follow-up actions for the immediate are to make sure all tools honor codified hardware classes and resource assignments per deployment So you don't have to worry which tool you're using internally at Convex You know that the setup will always be honored Optimize the search indexing compaction so it doesn't invalidate queries when no data actually changed and ship a new client library with more comprehensive backup behavior I think they already did this Honestly they probably did all three of these by now These guys move fast Going forward they plan to do CPU optimizations for subscription engines that so that the keys are stored rather than being computed at the like read point which will be a huge compute savings there They also want to make new benchmarks and load tests around the DOS case that we hit add serverside buffering and back off on convex sessions so that the server can slow your connection down so you don't have to worry about the client causing the DOS And of course add more configuration for dropping websockets from inactive tabs in the convex client so that instead of us having to write some custom code so that the background tabs disconnect they can automatically disconnect when they're seeing it run in the background and then reconnect when you open it back up This was an awesome post Huge shout out to Jamie for writing it and to James and Tom and everyone else at Convex that helped out throughout all of this They've been essential not just for like making the migration happen but like helping us debug things internally in the app go through a deeper understanding of all the things Convex does and doesn't do And now with an outage like this I really felt like all hands were on deck to make this happen There is nothing I would have asked for more from Convex throughout this They took this more seriously than I ever could have expected or asked And as you guys know about me I might be a hard ass but I am so incredibly forgiving If you make an honest effort to fix something I basically will never hold it against you And they have made such a deep effort here that you should be more likely to use them seeing it not less Knowing they care this much about their customers even small and quotes ones like us should show the depth of how hard they work to make sure Convex is the right solution for everyone who uses it So what can we do on the T3 chat side now well the first thing we can do is fix  Twitter so I don't have to scroll back up every time I open this tab But once Twitter's fixed here was my breakdown I posted this literally as we were recovering We said we were live on 12:45 This post was 12:49 My goal was to be as transparent as possible with where we were at and what we knew at the time I called out that we were pumped to finally have this migration done We did it during the low traffic window Everything seemed fine I slept for 12 hours The biggest piece that I called out here was that websocket connection doosing thing But here are the things I plan to fix First big one is an actual status platform and update plan as well as reporting in app Should we have a status page probably But you should also know in app what's going on We should have a way that is separated from every other system to tell you inside of the app hey here's what went wrong today Here's what's going on Here's what you need to know We're still figuring out where to put it in the UI It's more a design problem than anything at this point but we'll have a place in the UI to let you know like hey some messages that are older than this time might have failed to migrate Go to settings and click this button Or hey we're mitigating an outage with Claude Claude models are degraded right now Or in this case hey everything's I'm sorry We'll be back in a minute We really want to do this We'll have it very soon Least we can do probably should have had this a month ago but the way things were built didn't make a lot of sense And also our outages by the time we knew about it we were halfway done fixing it usually and it it would take 5 minutes for us to fix half the time Most of our outages other than this outage all of our outages have been less than 5 minutes Status page doesn't help a whole lot for that Point two we need a paging system It's funny I do actually have a paging system built but it's a custom implemented thing I did for myself that I gave a couple community members access to so they can page me when a new model comes out so we can have it shipped immediately but we don't have anything for an outage And I was asleep cozy in bed for most of this outage I don't like that Not because like I'm the only one who could fix it clearly Like I did almost nothing here other than comment out some functions that cause a lot of load I just want to be there to run comms and help the team when these things occur And sadly there was not a good way for my team or their team or anyone else to page me when things went wrong I also want to have automated error detection so I'll get paged if error rates go up too We're finding better places to sneak all of that in The biggest problem there funny enough is that most of our users use ad blocks And since our service is now popular enough whenever I pick an endpoint to send things like analytics data or errors from Sentry to the ad block lunatics will block those analytics endpoints and those product feedback endpoints that we use to know when errors are occurring I can't tell you how many times a user said they had an error I went to the logs I'm like we have no logs of that I asked them if they have an ad blocker and they're running Brave every time It's so annoying I understand users wanting to protect their data I do not understand blocking Sentry from sending logs because you installed an ad blocker It is not intuitive to a user that installing a tool to block ads means that the products you're using don't know when you encounter errors Those don't line up in a normal person's head And it really sucks because no matter what I do here I don't feel like I'll have a good way of tracking client side errors ever because so many of our users are on ad blocks And you should be Ad blocks make the internet more safe But maybe if you're down unblock our endpoints Gabriel said "Aren't the servers proxied?" So this is a common thing I We're deep in the weeds I can go deeper Why not usually when you use something like I don't know let's use Post Hog as the example You have client you have Versel backend you have Post Hog or Axiom or or Sentry or whatever else there Grab my lines User does something on the back end They get a response Then the client errors for some reason something goes wrong on the client they try to contact Postthog But Postthog is hosted on like us I think it's us Hog.com/event slash whatever and then like the event information This URL is blocked by every adb block in the world Very annoying So what most sites will do and this is basically necessary nowadays is you create a proxy on your own backend So I send this to slappivent or something and then this gets proxied to then go to us.postth hog so that the data despite the ad blocker blocking it they're blocking this URL They're not blocking an endpoint on my service The problem is every time we change which one of these paths we're sending these events to on T3 chat the new path gets set as a blocked URL in all of these block lists So it doesn't matter whether or not us.Oostto is blocked because right now t3.hativent this URL is currently blocked in every ad blocker I want to die there I can change it again I will continue to change it over and over The other thing I could do is I could send this data down an endpoint that's used for other things like I could send it down API chat which is used for sending messages and just have a custom flag on it for these other events and proxy those manually that way But I don't I I don't want to change our architecture in those stupid ways because users are being that dumb I really don't want to do that I might have to in the future How do they find out it's proxied they open the network tab and they watch what traffic goes where and they test blocking things on their client and see if T3 chat breaks or not There's basically nothing we can do to prevent this Sadly it used to work great to just proxy it to a different endpoint but they'll block the endpoints now too So our only option now is reuse the endpoint for other things and risk them still blocking it and then breaking T3 chat So yeah people asking is this targeted this is absolutely targeted If you're popular enough or the people who pay attention to you are involved in the Adblock communities and don't like you very much they will obsessively do this The amount of time it takes from when I change this URL to it being blocked right now it's about 24 to 72 hours because these people are obsessive and insane As such I don't actually know when most of our users devices hit an error because we don't get the event So yeah that sucks I'm going to put effort in to fix that because I want to know when things error But thanks to ad blocks it's basically impossible for me to know when a client side error occurs I can only know on the server I obsessively log our server errors and I track them and make things change every day because of them But I want to know when you're seeing an error so that I can be paged when enough users hit an error so I can wake up and go fix the thing I'll have to put a lot of work in thanks to ad blockers to make this happen but I will One other piece is something that came up in the Convex article We need a way to have a refresh to latest flow on the client So we can't rely on you clicking the refresh button if things are broken I need a way to in an emergency force your client to disconnect or ideally refresh and get on the latest version I also very big deal need to go through all of the providers that we currently rely on and make sure that they are prepared for the load and the load characteristics that we have especially now because we are scaling like mad Keith Reach is still growing in ways I never could have expected I never would have thought this service would be the thing that is the not just like funding my company but is now paying us back well enough that I can bring on an intern for the summer and like comfortably know the business will be here next year It's unbelievable the amount of support that we have gotten with T3hat The amount of help we've gotten from the partners that we work with the providers that we host with in the users each and every one of you that both uses and supports us with the app tells us when things are wrong and also shares it with others causing the service to just keep on expanding and growing I am relatively confident now that I've done a pretty deep audit that everything we're using today will continue to scale for a very very long time But I need to keep a closer eye on this going forward to make sure nothing like this can happen again I hate outages like this We're taking this incredibly seriously I've been working so hard on T3 Chat that my video schedule's been falling apart We had over 40 videos of backlog We're down to fiveish because I've been filming at most three videos a week lately and just focusing all in on this I'm so happy to be doing it again Coding 10 hours a day almost every day I I shipped a commit or a PR all but two days of last month and I love it and I love all of you for making this possible and I hope that outages like this don't keep you from coming back But I also understand if they do We need reliable tools We need things that we use like T3 chat to be there when we want them to be there when we have questions to be there when we need information and every time it isn't you're way less likely to come back That all said you can't use Claude either So keep using T3 chat I'm very happy with where we're at I think our stability problem is more than solved here and we'll be going out of our way to make it so fixing these things in the future takes minutes not hours No one is immune to outages I hope that my language has never implied that we can't go down And I hope the times I've complained about other services going down doesn't seem like I'm saying they go down and we don't What I want is accountability and transparency There was a couple people who tried to dunk on me with this saying "You were just complaining about Twitter being down." No I was complaining that Twitter had been down for 3 days and all of the coms we had about it was a random reply Elon did blaming the server company for burning down There was no accountability there at all No ownership no transparency no nothing The thing I care about is the ratio of severity of outage to severity of comms about the outage We overcommunicate small outages They undercommunicate massive ones And I will always call companies out who make those mistakes because they are inexcusable Considering the fact that I still can't load my Twitter feed right now it's absurd to me people make fun of our downtime But at the same time I am so thankful that we have enough users enough people literally tens of thousands every day that use and rely on T3hat that tell us when these things happen so we can get on top of them faster get these fixed more aggressively and ship the best possible service to each and every one of you guys I hope you understand how seriously we take these things I hope you understand this isn't just a side project for some YouTuber anymore This is a very legitimate application It's a very real product for a very real company that I'm taking as seriously as I possibly can I hope this helps restore some of that confidence and show you what our plans are going forward Or at the very least you could learn some things about shipping at scale from what I've shared here Let me know what y'all think Until next time stay




## My browser got hacked and it cost me $2,000 - 20240927
people often ask me what browser I'm using because they see it and it looks really different I've even had people assume that my stream had a crazy setup that wasn't even using a traditional browser but I am I'm using Arc it was not my favorite thing initially but over time it ended up becoming a browser I quite liked it's Chrome based but its workflow is very different they've built a ton of cool features on top of it and a bunch of features that I'm not that interested in but some of those features might touch things they shouldn't and some hacker specifically friend of the stream Eva managed to do some things she should not have been able to we need to talk about those things because those things include the ability to run whatever arbitary JavaScript you want to on my browser and all you needed to do it was my user id terrifying this has been a whole thing and we're going to go through it start to finish because that's what we do here before we do that let's hear a quick word from our sponsor videos about browsers that you run on your computer but what about the ones you don't browser base is here to make running browsers in the cloud significantly easier and instead of the ual skit I'm just going to show you how it works currently I'm using the browser based playground right now it's the default State going to click run it's going to run launch a browser and show you the contents but I want to do something different I want to get the view counts of my recent videos so we're going to tell it to do that go to my YouTube channel and grab the titles and view counts for the last eight videos log them in the console now it's going to generate the code to do that work and hopefully show me the results so here it's created the code now it is launching the page and if all goes well yeah look at that we have the results here are the views and the titles for all of my recent videos by the way this code is just standard no JS you can run it on your own server in fact you're probably going to you just connect to browser base to do the browser side of things tell me that's not super cool it's never been easier to get data from anywhere on the web thank you browser base for sponsoring today's video anyways gaining access to anyone's browser without them even visiting a website and of course Firebase was the cause if you don't already know this about Eva she is a somewhat quickly growing notorious hacker hacked my notion way back at the beginning of the year and since then has been on a bit of a tear the big thing she did earlier this year was destroying almost all of America's fast food chains funny enough with a similar Firebase bug because Firebase is default configuration isn't particularly safe I'll break down in detail what I mean by that in a little bit but Firebase hacks are kind of Eva's bread and butter and it does not surprise me that Arc using Firebase was something she could exploit because most uses of Firebase are bad and your browser using Firebase is certainly no exception so let's break it down we start at the homepage of Ark where I first landed also the little kitty running around is very distracting but very nice for my ADHD brain basically the golden retriever shouting squirrel right now anyways we start at the homepage of Arc where I first landed when I first heard of it I snatched a download and started analyzing the first thing I realized was that Ark requires an account to use why do they require an account introducing ark's Cloud features I boot up my man INE middle proxy instance and I sign up I see that they're using Firebase for off but no other requests are they really just using Firebase only for off after Bing around for a bit I discovered there was an arc feature named easel easel are a whiteboard like interface and you can share them with people and they can view them on the web when I click the share button however there was no requests in my man-in-the-middle proxy instance so what's happening here hacking Objective C based Firebase apps oh boy from previous experience hacking an iOS based app I immediately had a hunch on what this was fire store fir store is a database as a backend service that allows for devs to not care about writing a backend and instead write database security rules and make users directly access the database oh boy I I'll diagram a bit of what this means momentarily so if you're struggling to follow I'll guess there don't worry this has of course sparked a lot of services having insecure or insufficient security rules and since researching that I would like to call myself a fire store expert I will say Eva is probably within the most knowledgeable people on Fir store at this point fir store has a tendency to not abide by the system proxy settings in the Swift SDK for Firebase so going off my hunch I wrote a freed to script to dump the relevant calls so here's a script that grabs all the document with paths the query where field is equal toos uh collection with paths so this is like grabbing all of the requests being made now we're logging the queries directly then we're trying to intercept them here too fun stuff way above my pay grade format fir store data so she made a formatter so she could actually see it when she logged it hacky script but it works so I launched Arc with the script loaded on Startup and this is what I got now she seeing all of the things being requested sick looks like Arc store some preferences and fire store along with the basic user object referrals and boosts so what the hell is an arc boost here's where things start to fall apart Arc boosts are a way for users to customize websites by blocking elements changing fonts colors and even using their own custom CSS and JS to quickly show what we mean by this I'll show you an arc boost on the arc site I hated them at first I still kind of hate them but what they're meant to do is allow me to do things like change the page so if I want this top gone because it takes up too much space zap now it's gone don't know if I can get just the section above but I think I can scroll it now yeah cool so the point of Arc boosts is they allow you to customize the site maybe you want to change the font maybe you want to change the color palette maybe you want to hide elements all those types of things I don't love it but others do it's fine it is what it is but in order for those to work they have to inject custom code on the website they have to inject CSS for the style changes they have to inject JavaScript for some of the more complex logic changes but that data has to be stored somewhere the code that's being snuck in has to be saved somewhere so it can be snuck in and that's where it all falls apart Arc boosts are a way for users to customize websites by blocking elements changing fonts colors and even using their own custom CSS and JS you see where this is going I've manually logged into my account using my dummy page to test Firebase accounts and executed the exact same query to get my boosts so this is the query I'll zoom in Firebase fir store. collection boosts where Creator ID is equal to the user ID there doget docs map and gets you all of their boosts so let's create a simple boost for Google here she created a boost just by calling Firebase fire store collection where is that not a create call this isn't a create call this is just a get call but uh assuming that she had already created it before anyways yeah there's our boost oh oh she created it manually so she created the Boost and then is reading it back here so that she can see the new Boost after it's been created and see the properties of it nice and in here you can see the data if I move the cat data JS alert JS zaps Mt array that's Json for what it's supposed to do so if you put customjs it would just be embedded right there hey there's our boost let's try changing some parameters around I see that it queries by Creator ID and we can't query a different Creator ID than the original but what if we update our boost so that it has another users's ID here is where the problem comes and here's where I need to break down a little bit about how something like Firebase Works traditionally if you're building an API I'll have my user make them a circle as we all know users are circles and apis are squares when the user wants to do something like let's say they want to update their username on a traditional service you have the user you have the server and somewhere back here you also have the database and traditionally what would happen is the user sends a request to the server saying Hey I want to X in this case I want to change my username so the user makes the request hey I want to change my username the server uses data from the user's request things like cookies to figure out who the user is make sure it is actually them and then make a decision based on that this is all code that you would write that would live in your server you would have code that's like let me super pseudo code this like const user equals await off request. headers or something like that and this is a function that will take the off data that exists on your headers or your cookies or whatnot and then return a user in here we would put after like if no user throw new error unauthorized so now we know the user's authorized this type of check very common afterwards when you want to actually update the user stuff what you would probably do is use the ID that exists in user so I would have like db. upsert update change whatever you want it to be and in here you'd have a query that's like you could insert upsert insert into there's a lot of different things you could do here but uh I'll say we won't even write SQL because I don't want to confuse non-sql people so super pseudo SQL update name to we would have the users request here too so like part of request would be the new username const new username equals request. headers doget new username so now I have the new username you'd want to validate it too update to new username where user ID equals user. ID I'm assuming here that you're doing some standardization stuff like that the point of this pseudo code is to show what you would write on this server you first check the user you then check and validate the thing they want to do and then you directly update the database using the ID that you just validated so you only are selecting rows with this user ID and you're updating them this is very common what's important to note here is that all of this logic is code that you have to write that lives inside of your server that is the code that is doing this so that code is what will hit the database make the change send you the confirmation and then you send that to the user in the end this code is not the easiest thing to write it might see seem very simple and honestly it is pretty simple but if you're not used to Services you're not used to servers off apis all those things this can seem intimidating potentially even unnecessary so we're going to copy paste this to show the Firebase way of building I will do my best to not just roast but that is my instinct because I have strong feelings so the big difference here is there is no server the database is the server which means that we don't have this code or logic at all instead each field has permissions attached to it so if we have our boosts table let's say we have table boosts this table has fields in it it has things like the user ID it has things like the actual like data for the Boost it has things like the Creator ID it has things like I don't know a created at all of these fields so the way Firebase works is when the user wants to do something the fire B Store itself has permissions you've configured for what the user can and can't do so here user ID would be attached to user and your permission would be only people that match this user ID can update your given Row in this table so if a user with a different user ID was to try and update something in boosts it wouldn't let them so the rule would be something simple like only users who have a user ID matching a boost can update the Boost and when you're using something like fir store usually these things are the defaults but you can also do things like create at and say uh locked field and this field is something that the database would create when you in this case create a boost that the user cannot modify so if the user posts this they wouldn't have control good info from Eva Creator ID is user ID user ID is provided by fir store and request. off. ID so they don't have a separate user ID on Boost it's just Creator ID let me double check the dump you have yeah Okay cool so they don't even have a user ID they just have a Creator ID but because of that they're not using the traditional permission model to link boosts to a user they built their own so the Creator ID is how it ties to a user and I'm assuming if you were to try and update someone else's boost with a given Creator ID it wouldn't let you unless it was your creator ID so in this case the rule would be can't update unless Creator ID matches user ID pretty common the is if I understand it correctly and Eva thanks again correct me if I'm wrong is that this rule was only on update it wasn't on create so while they might have restricted users from being able to change other users boosts they did not restrict a user from being able to create a boost with someone else's Creator ID and here's where it all falls apart Eva was successfully able to create a boost with a different Creator ID oh I know you can do it update so you can update oh if it's your own boost you can update with another user's ID I don't think you can update someone else's boost once their user ID has been changed but again the problem is the creator ID permissions weren't properly set so I was able to in this case Eva was able to change the JavaScript that is actually backing it and as such all she would need is your user ID and she'd be able to create a custom JavaScript script that would be synced in the firestore cloud and then run on your browser on whatever web pages it was marked for Eva confirmed you can make your own boost and you can update your Boost to another Creator ID but you can no longer view or update the Boost after you've changed the Creator ID yeah so they didn't mark the field properly this field was used to restrict what you could do to boosts but this field was not restricted to what you could do to it this field should not have been updatable the same way that created at is locked and you can't update the created app field because it's provided by fir store and the permissions are correct Creator ID you can update and this is the problem with models like this is when you're not manually encoding what can be updated like here when I did the update with the username I'm only updating name where user ID is this but the only field that can be updated here is the username field where with fir store by default every field can be changeed by the user you have to manually set permissions to prevent these different fields from being changeable we're going to come back to the article in just a second because we need to start covering the explosion that followed because it was quite an explosion this was Eva tweet gaining access to anyone's browser without them even visiting a website pretty significant exploit took them a of patch but they did but uh there were some things that weren't great specifically she only got 2K for this this is an insane exploit to only pay 2K for and I'm going to both sides a teeny tiny bit on one hand this was my reaction Ark I love you please move the off of Firebase and hire real INF for engineer this is unacceptable expecting a public response I'm filming as soon as I'm home I I'm a day late okay yesterday was chaos you can do this right Please do this right I don't want to switch to a worse browser because you can't build infra and as fire and many others pointed out $2,000 Bounty was kind of insulting so on one hand I kind of sympathize with them they're new to this they have no idea what they're doing they're a startup paying out bounties like this is a new thing for them none of them are security Engineers but on the other hand the 2ks and thing this type of bug is horrifying they should be reamed for it to emphasize just how insignificant the 2K is that they originally offered I'm going to match it I'm going to pay $2,000 to Eva because it's not that much money and they should have done more and for her to put that type of work into protecting my browser the one I'm using that's worth it to me so yeah congrats Eva you just made another 2K because 2K was way too little and it's not that much money so yeah that's the bit if I can match the payout dumb that said they did increase it to 20K as I have saved here Arc increased the bounty to 20K we're figuring logistics for her to get the money and one of my favorite offers at the end here thank you for being so patient and gracious with us we made mistakes we won't make them again I'm grateful for how kind You' have been throughout this entire process PS you have a job at browser company if you ever want it very interesting development I feel like they kind of jumped up and did the right thing here I don't know how much is them caving to public pressure versus they just didn't actually know but I think it's important to call out the good thing when they did I had already mentally committed to matching the money so I had already done the books and made sure it was fine that's why I did it anyways just wanted to emphasize the point the two Grands for something like this is not that big of a deal but yes they upped it to 20K I still think it should be slightly more I hope my additional two helps but yeah they also did an incident breakdown and I think this was a pretty good breakdown too they didn't pretend it was big deal than it is they did call out something important though no members were affected by the vulnerability and you don't need to take any action to be protected thankfully it seems like they had all of fire store's insane logging on so they were able to write a query to figure out who is affected and like if this has happened before no Arc members were affected by this vulnerability we did an analysis of our Firebase access logs and confirmed that no Creator IDs have been changed outside of those change by the security researcher on one hand huge relief awesome that others weren't affected by this on the other hand I think this shows just how deep Eva is and how novel The exploits she's finding are that she's finding that literally nobody not even like a state actor has done pretty nuts I like they didn't pretend this wasn't a big deal they called out that nobody was affected without pretending it was not a big deal at all and that's a hard balance to strike to keep people from being super scared and dragging your own product while also being honest about the severity of an exploit like this is rough they did a good job walking the line they've reached out to me to make sure I knew I could go to them for comment if I ever wanted to the CTO responded to my tweet heard you and totally right we're already working to move off Firebase for new features for the last few months full incident run down here any feedback would be very welcome we want to make sure we set this right I think they're handling this well all things considered they made mistakes they will continue to make mistakes because they're a company they're a new company even this happens the initial fumble hard to excuse the actual security flaw really hard to excuse but at the very least they're doing it right and on the off chance Eva does decide to take up this offer they might be well off let's finish the breakdown and wrap this one up quick recap Arc boost can contain arbitrary JS Arc boosts are stored in fir Store The Arc browser gets which boosts are to use via the Creator ID field and we can arbitrarily change the Creator ID field to any user ID thus if we can find a way to get someone's user ID we'd have a full attack chain the ID is pretty easy to get Eva actually baited me at the beginning of stream to get mine by asking me for the referral just to get a referral link because they have a whole referral system when you invite people to the browser and the referral includes the data you need to get the user's ID great then we have publish boosts you can share Arc boosts but only if they don't have Js in them with other people and Arc has a public site with boosts as well as boost snapshots and all of those contain the user ID there's also the easel feature which are basically whiteboards to share things that you're doing on a website and those also give you access to the user ID so there's a couple different ways to get user IDs because without that you can't exploit but as soon as you have somebody's user ID you can go ham so let's pull it all together you obtain their user ID you create a malicious boost with whatever payload you want on their account but you created on your account you update the Creator ID and now when the user goes to that website they've been compromised apparently it was reported August 25th it's when they got initial contact with the art co-founder HS that was CT I mentioned before vulnerability P executed on her's Arc account added to slack Channel after details enclosed patched within a day a bit over 24 hours I'm happy they took it seriously once they were in touch cve got assigned about 2 weeks later all sounds about right bit over a week later actually regardless apparently you could also run this on Chrome col settings which is where a lot of permissions are done so you could exploit permissions which terrifying yeah also more potential privacy concerns about URLs being sent when you're browsing the web I've seen a bit of stuff about that with Arc I think they're working on it but very happy that these things are being being called out and that the stuff is being addressed to also very important they're doing an audit of their current Firebase ACL rules internally so hopefully if there are other things like this they'll be addressed because they're going to be way stricter about what Fields people can and cannot update hopefully they've already went through and checked every single place where a user ID or Creator ID is being used they're also fixing the privacy concerns they're moving off Firebase they're doing external security audits for this version as well and they're starting to use a bug Bounty program for further vulnerabilities huge as always Eva isn't just poning things for fun she's making the web safer this was an awesome breakdown huge shout out again to Eva for doing it huge shout out to y'all for watching it and I can't wait until my browser gets hacked again until next time peace nards




## My chaotic journey to find the right database - 20250219
so it turns out databases are hard I don't mean like spinning up a SQL DB and querying it that part's pretty easy what I mean is building a really strong cohesive data model for an application that's changing quickly and is growing even quicker I have had a crazy experience building T3 chat and I want to share some of the things I've learned and more importantly the mistakes I've made throughout because it's been a wild ride and I want to take the opportunity to share some of what I've learned with y'all so without further Ado let's dive right into the utter chaos I've put myself through with databases and yes I have actually switched databases effectively three times in the last 24 hours I'm really happy with where we landed but the process to get there was a worth a video I want to Dive Right In because there's so much fun around our data model from the local side the server side to the crazy syn layer that we've built between the two before we can go too deep there got to make sure my team gets paid so a quick word from today's sponsor and then we'll get straight to it building a web app is easier than ever building it safely a little bit so off might be easier to set up than it used to be but doing it right maintaining it and integrating all the things you might need it's never been more annoying you can check out my hour and a half long video breaking down all the different off options or you can go with the one that I recommend at the end of it the thing I use for off and pretty much every product I build clerk these guys make off so so much easier than it ever was before I've never enjoyed setting up off this much and every time I roll something else I end up regretting it they handle everything when they call themselves the most most comprehensive they mean it crazy things that are super annoying to do like I don't know Dev preview environments that you can sign into we still don't have those working on our products that aren't using clerk but if you are it just works you don't set anything up it just yeah it's so much easier it is not just the server side and signin thing they're handling obviously they provide signin components which are pretty cool but the user profile and user button components super underrated you know that fancy little button that appears in the corner of most websites with your profile picture and you click it and get more info sign out and all that not fun to build I'm one of many people that's built that many times not when I'm using clerk though they just give it to you you click the button you get all the info they even added account switching recently so if you want your users to be able to switch between accounts they got you covered you want your users to be able to spin up organizations they got you covered you had to deal with some weird MFA SSO crap for sock 2 compliance they have you covered if you don't know what any of those terms mean they definitely have you covered and I understand if you're scared about price I promise you probably don't need to be it's free for up to 10,000 users and that's not somebody who signs in once and disappears they actually only count a user if they've returned to your app over 24 hours after signing up so you don't have to worry about a viral day where everyone churns causing you a huge amount of money lost Clerk's the only off provider I've never regretted using and I promise you won't either give him a shot today at so of dlink clerk make sure to tell them that the oena this is the file that powers the vast majority of your experience with T3 chat this is my local DB dexi file wait that's in front end why is that the database isn't a database supposed to be on the back end kind of you need to hear me out okay generally speaking when building an app I don't recommend putting everything on the client I actually think we've gone too far on the client especially with tools like react where we're putting everything in the browser and not letting the server do almost any of the work that was an correction there are a lot of things that benefit for being on client there's a lot of things that benefit for being on server that said when I used other AI chat apps I felt like they did way too much on the server and also funny enough way too much on the client and the result was a terrible experience like if I just go to chat gp.com and we ignore the insane amount of popping that just happened I can click any one of these takes a good time to load click around we're waiting for a while and we switch things sometimes the scroll will just break and go up down randomly it's it's an experience to say the least it's a interesting one but it mostly kind of works is when you make a new chat things all flood around but the most important detail exists as always in the network tab if we open up the network Tab and I scroll the sidebar we get a loading spinner that loading spinner can take up to 7 seconds before it resolves because it is fetching more convos as we get to the bottom of the list because these conversations live on a server somewhere and we can look through here to see all of the data for these different items 3 bit Computer Solution created at updated at all these other values that aren't being used for anything and you get a new set of these whenever you scroll and now if I refresh you'll have to wait for it to all appear again scroll wait again scroll wait again my favorite thing though it watch the sidebar closely when I refresh you see how many times things came in and how many random popins occurred over there we get the first pieces then Sora and Explorer appear then Dolly reappears in the middle then we get the conversation starting to flow in after it's just like so many different states there's like five or six different states that happen in that sidebar I'm not going to pretend we're perfect here but that's a hell of a lot better and the reason is there is no network request to be looking at I'm going to switch over to vvdi so I have Dev tools that are actually competent sorry Firefox and Zen it's not nothing against Zen it's everything against Firefox now when I scroll here nothing I just nuked my chats recently so I don't have as much but even if I had a ton it does virtualize the list on client these events are just generic post hog events that are being more aggressive than they should I'll probably go Nerf those later because they're annoying but that's it there aren't events firing there's no data being f when I open up a chat it fires an event and it checked by rate limit so I know if I could send or not but the data is already there these navigations are sending events because my URL changed but there is no data being fetched everything is immediate because everything exists here on the client that I am using and you can see that because I actually let you access it in the console I made our database dxb accessible so we can do threads. 2 array we have to assign this to something const threads equals weight and right there is it not oh I spelled threads wrong code is hard okay guys const threads equals wait now threads is my array of all my threads you might notice there's a lot more threads here than I have though I only have however many is there and here is quite a bit more here is where the complications start because sadly a thread can't just be the thing with the title because what happens when you delete the sad reality is in order to make a syn layer that works with this local stuff you have to not do real deletions we'll get a bit more into what I mean in a bit but for now you see here status deleted when you delete something I have to wipe its contents and Mark it as deleted rather than actually deleting it keep that in mind regardless you can see all of the data here you can even go into application indexdb which is a funb standard for having data in the browser and see all of the key values for all of the things that exist here you have messages projects search tokens and threads these are all the key Primitives to powering T3 chat what happens when I sign out now I'm signed out if we go back here and we look we're like oh now it actually only has a couple things we have the thread for onboarding we have the messages that are in the onboarding uh these are oh these are this is the thread ID bindings these are all just like indexes effectively here we have welcome what is T3 chat when it was created the response T3 chat is the best AI chat ever you get the idea it's all the content that is on this page so what happens when I sign in how do I get my chat back well I'm going to hide my sign in so you guys don't get my email but I am going to show the network tab when it's done cool now we're signing in we came in pretty quick because right over here we'll see this sync event sync is a request that you make authenticated over to the server that will get all the data we need to sync and when you get it it responds with all of that data it is not a little here it's 90 kilobytes for some users it's going to be a hell of a lot more but that is the data that we have stored as our effective backup that we use to keep track of your state but that's the only point where we pull it down we will again on refresh but now you have the whole world so to speak your entire History built into your local environment and now when I click things I don't have to wait for the server I could even turn off the web side of my browser I could turn off networking entirely and I can still navigate fully and I think that is awesome I think it's really really cool that you can make a tool that uses all local data and doesn't require a network round trip ever to navigate and find things hell even search works fully offline because of this model so where are all these database changes I'm talking about well it's time to get into excal draw because there are two sides where the database has changed because remember we effectively have two databases we have to have the local solution which is the in browser thing that keeps track of all your data and we have to have the server solution where we actually sync and back up that data so we can restore it when you sign in and out so you can have multiple devices all the things people expect from their experience and believe me I wish I could pretend the server side doesn't exist right now more than ever is the server leaning react Dev I've been to Hell and Back with this app so let's talk about this local side first cuz I wanted to be sure when I built this that we nailed that part because it's the key to our app most apps don't need to have all the data locally but ones that you use a lot that you keep open in the background that you search through that you check things that you spend a lot of time in benefit greatly from it and I was spending enough time in these AI chat apps that I wanted to make something local CU I was tired of the weird chaos of the chat PT and CLA experiences they're rough so what do we do here well our first exploration actually kind of tried to solve both zero I'm putting it under both because these were tied together zero is built by the same people as repash repash is the somewhat I guess industry standards a fair thing to call it they're the like goto been around for a while realtime sync engine for having your back end and your front end have the exact same data you don't need to wait on the network to get the data once you have it you can do things and it will sync up the changes and it'll sync down things that happen in other places you'll also notice when we look at these local first tools real time and collaborative tend to be other things they mention local first rarely actually means just local first often when they call things local first they're implying real time and collaboration which are not local first these are two different distinct things and I wish they wouldn't always group them in cuz that's been a assistant problem I'll even make a note that there are like three specs that a lot of these go for one is local first two is Real Time sync and three is collaboration so our first exploration was zero zero is a new product from replicate with the goal of simplifying local sync with a postgress server they're building a general purpose sync engine for the web you put zero in front of your DB your web service and we distribute the back end all the way to the main thread of the UI get a client s side API that looks like an embedded dbe but it can arbitrarily do hybrid queries that span the entire database including the server so You' write on the react client side zero. query. playlist and they're use Query rapper. related tracks related albums related artists order byplay count where ID's ID and this will use the data that's already been synced locally to do this query now you don't have to wait all the time to get things like tracks it seems so promising I do still think zero has an incredibly good chance of being one of the like Solutions people reach to but it has its problems the big one that I ran into in my mental model forward as I tried is that you are effectively required to split brain your data really hard so this is their example and in here we have our source for our main app in here we use Query z. query. user z. query. medium all this code looks really good nice and simple and makes a lot of sense even the updaters are pretty cool z. mutate message. insert random message users mediums and I put something else here like an array with uh the wrong type it's even smart enough to give me a type error saying hey that that's wrong you need to put the right type of things here it has to have ID name and partner if you give this 57 now that's wrong CU it has to be a Boolean cool that all makes a lot of sense and it's cool to see full stack type safety from our query layer our mutation layer all that but then you see how we got that so we have our schema here that we've defined actually looks relatively similar to something like drizzle the problem is this is not the only place where we have to Define this H over to Docker and we have to also Define the same shape in our database with SQL this isn't generated this is handwritten this one's a seed that has all of these default values for playing with it cool we have to make sure the relationship here matches and in the schema we have to write out a permissions model to determine what permissions things do and don't have it is not simple it's not the worst but you do have to Define all of this yourself all of your relations between things good luck doing migrations where you have to make a migration in SQL and make sure it perfectly matches the code here good luck Mak Mak sure users are on the right version to make sure this all comes together hell when you do bump your version for zero they have a section in here about upgrades somewhere okay this is new when we were trying to deploy it they called out that there was no way to do downtime free updates if you were to update your zero deployment some user could potentially hit an error because the service wasn't up and that sucked there was no way to upgrade or change things without forced downtime so to speak yeah not fun I'm happy that it's getting better but my biggest concern isn't even any of this it isn't even the fact that it's so Alpha it's still relatively immature my biggest concern is that it's not open source for we can go to the GitHub and the GitHub is just the hello zero template none of the zero stuff is actually open source they have examples of their clone of linear and their cone of clone of excal draw built using replicate and built using zero but even this repo is closed Source it's just a readme file I wanted to be sure that if I had problems with the tech I was using that I could fix them because I have been to Hell and Back with tech that I couldn't fix and it made me really frustrated and I am deep enough in the things I use now to be able to fix the problems I run into most of the time famous last words but these were the things that led me away from Rocky Corp just because zero felt really new it felt really early and it felt like if I ran into a problem I'd be stuck waiting for them to fix it and I didn't like any of those Dynamics looks like I was actually wrong about zero is this part of their mono repo I don't know how much of it is in here I know that a lot of their core like sync layer isn't open source I know that for a fact but this is more open than I thought it was good to know misconception I I will take some blame for not knowing that zero had open source parts I'll put more blame on them for not making that information a little more accessible that's Apache License cool they not know that lesson learned I will investigate more to see how much of what I care about isn't isn't actually in here dear client zerach zql oh it uses repash under the hood in the repash client Library oh it is actually open source I didn't know that this part was open I've actually been told people using it that this part wasn't open so I was I'm not the only one who's SL on this thank you chat for finding this link so I wanted something that went as far the opposite direction as possible I wanted something where none of this was true wanted something open source something far from early and something that would let us mangle the data model for a bit until we got it just right I hunted for a while and made an interesting Discovery dexi minimalist rapper for index DB holy hell has this Library made my life easier dexi is a really minimal relatively old library for doing index DB stuff index DB is not something you want to work with directly I could do two videos describing how rough the index DB apis are I will politely ask you to trust me on this because it is bad dexi has been around since like 2012 or 2013 because of how bad index DB was there are pages in these docs that talk about certain regressions and features that exist because of Internet Explorer 8 support this is an old library and it's still being maintained pretty well and it even has fun bindings for modern things like View and spelt it obviously the thing we care about here react dexi is relatively simple it's weird to wrap your head around because of how flexible the model is but once you're used to it it makes sense the important thing to know is that index DB isn't a relational data model it isn't like SQL at all it is just a KV store all index DB is is a KV that can have a lot more values and a vague concept of tables dexi makes it a lot more flexible by letting you define what shape data should be in Define different indexes so you can look things up by different values it solves a lot of the problems that are inherent to index DB the world's most unnecessarily complex KV so here's a simple dexy example we make a new DB we Define version one this is also how you bump versions we'll probably get back to that in a bit and it stores friends which has ID name and age it's worth noting that this isn't the shape that the data has to be in you can pass things that aren't in here as part of the value in that KV pair this is just what it indexes on so when you put things here it can look up with those faster but you can put anything in the store once a table is defined so here we have friend typescript has an ID a name and age DB has our friends which is an entity table with friend we indicate the primary key of ID then we have our store friends has ID name and age now we have access to all these things cool awesome making a lot of progress here but where it gets really cool is once you actually start using it in your app if you want your component to query data use live query this is where it gets magic when you call some data so in here we're listing all friends in Array you get the value it's null initially because it's all async and fun but now when any friend changes this component gets updated and reruns super cool fun fact the entirety of the live chat updating so the chat getting new tokens in T3 chat as new like content streams in I'm literally just appending the content to the message field from the message table and that forces the component to render I didn't write a custom render Loop for that I went out of my way to memorize the out of everything around it but the model here lets me just instantly update the thing right when it changes you need to be careful about what you're selecting though because if I selected all messages or even touch messages in a query too high up the tree then every single token streaming in is going to render the whole app and that's why we've had to put a ton of time into things like memoization and using react scan to make sure R renders aren't happening when they shouldn't and the result is that it runs really really well but God dexi has been awesome and solved so many problems but dex's also caused a few problems remember that thing I said earlier about wanting open source stuff my one gpe with dexi is that they have a cloud product but it is a close source Cloud product it is a cloud product that has a weird payment model the free edition lets you have up to three users in 100 BS of storage the production version is 12 cents per user per month which with our 300,000 dis users would bankrupt us but they also give you an on Prem option you can pay 3500 bucks to host it in your own server or you can pay him 8 Grand to get the source code it's just weird the problem here is none of these options give me a good idea of what performance characteristics look like at the scale that we're shipping and they're also really focused on specific stuff around live syncing updating and most importantly websockets which comes up a lot so when I needed a place to store the data I was not so sure about dexi Cloud yet so I solved the problem when we picked dexi for our local layer I needed somewhere to put that data and I picked an interesting place we'll call this redis V1 uh v0 is probably Fair the way sync originally worked with T3 chat is something that you guys should probably make fun of me for but at the same time it worked way better than I expected for way longer than I expected the way sync originally worked I'm going to actually pull up the GitHub repo and find it cuz it's really funny the way the sync worked is we would take all of your messages and all of your threads super Json them and call my sync Json to DB function and the way we handled this is I would create a text encoder take that Json string gzip it and then post it up to the sync end point your sync your store your backup was the entire contents of your database super Json so I wouldn't lose date times gzipped and thrown up to a KV where the key is your username or user ID and the value is your gzip blob and to sync I would do the opposite I would bulk put so it would update if it was more recent than what content you had locally and it would add if it didn't already exist locally and this worked surprisingly well I was amazed how long this actually worked for this was the model up until a 4ish two-ish days ago honestly it worked great and from my testing I had a demo I I added utils for testing like a lot of threads and a lot of messages I had a th threads with two messages each and the size of that blob once gzipped was only like 200 kilobytes it seemed totally reasonable for this to be the path for a while then people started posting 100,000 word messages they would just go copy the docs for something they were in and paste the whole thing as a message and hit send and now from like 3 to four messages they were nearing 800 kilobytes there were a couple users hitting like two to three Megs after gzip that was breaking everything it was breaking everything quite quickly actually and I realized over time despite my best efforts to handle breaking that up that this wasn't viable anymore and I decided it was time for Rus V1 actually we didn't get there just yet because I spent a lot of time thinking at this point trying to figure out how do I get myself out of this terrible hole of Doug I looked into dexi Cloud I started talking with the dexi team more I explored further to other local first things the first I looked into was a one named Tiny base I actually found this from of all places the Expo document this one looked really cool it's open source it's reactive database like and it syns and it's built for local first web okay cool it's checking all my boxes so far supports a ton of different things which is really really cool it looked more and more like tiny base was going to be the move but I kept digging and what I ended up finding was a pretty consistent use of the term websockets the expectation was clear tiny basis syn layer has two options option one you do it through a websocket option two you do it your self I was not happy with those options there was one other I forgot to mention earlier this is one that I actually explored before committing fully to dexi in fact pre-release I spent the night before launch trying my best to rebuild the entirety of T3 chat with jazz because a few people I really trusted recommended it there's a lot of cool things in jazz here is a a chat app built using Jazz we have our iframe hash router terrifying our chat creation on chat load chat cool fun you'll see all of these group and chat calls coming from the schema Global and we render the chat screen if we're on the right page for it so let's look at the chat screen here use co-state chats. chat ID and now we have the chats here cool awesome so what's a problem with this why did I not go with it the co- model is so painful the expectation is you have one global object usually the users identifier object and then it has children for everything else which straight up does not work for us because we have a signed out State the reality is that jazz was just not even kind of prepared for a signed out experience and I talked with the team they worked really hard the Jazz team clearly cares almost maybe too much about making Jazz a great solution one of the best experiences I've had working with open source devs on a short notice it was not ready for us it it did not have an even vaguely happy path for a signed out experience and rather than Hack one in which we tried we tried hard to hack one in I ended up rage quitting and moving back to dexi so we went from zero to dexi to failing to set up Jazz back to dexi to exploring tiny base realizing that I did not want to deal with websockets and building that syn engine myself and that the effort to do it would be as great as fixing my work on dexi but I wasn't done hunting Legend state is a really really cool State Management solution this comes more so from the react native world the creator of Legend Jay is just as well known for his list component for react native as he is for State Management stuff this is a really good really fast Library it's super focused on react so if your goal is something that is super reacy and super react built this is there for that you create your state as an observable you can set it outside of react and you can call it with the used dollar sign inside of react there were a couple rough edges here and there especially because there were recent changes with the V3 to make it more react compiler ready that resulted in syntax changes that were unintuitive and the docs were not properly indicating them yet but Jay was also a bro super fun to work with gave me a ton of insight on all of this I got a prototype working with Legend and our conclusion was that I should probably just go roll it myself anyways because the sync side here was either really handh holdy with their Keel and their super base plugins or it was very rough and waiting for you to do the work with the crud build and as I read through the crud plugin and talked with him and kept figuring this out a couple things came to mind and a couple realizations hit specifically all the hacks that I was trying to avoid things like soft delete were things for all of these sync engines and when I realized every option requires the same workarounds I couldn't find a solution to the workarounds I had to just work around them and I got told by both the creator of tiny base as well as hinted at by the creator of legend that my needs were both simple enough and specific enough that I would be better off building it myself I want to do a quick tangent about the local uh soft delete thing because it is unintuitive let's say I have two computers they're both signed into T3 chat I have multiple threads we'll call them thread one thread 2 thread three these threads exist on both devices I also have a database somewhere that's storing this data so now whenever one of these clients opens it's going to pull all of the data and it's also going to sync it up so whenever a change happens like I send a message I sync up the whole of the data so if I add a thread four here when I submit it it gets added up here so now the database has thread four and eventually whenever I open this client again it's going to pull down the new update and have thread four added what happens if I delete thread three well if I delete thread three it gets removed here now the client here pulls down okay cool it doesn't have any new data to pull down because there's no threads here that aren't already here but then when it syncs up it's going to sync thread three back up and now that thread you just deleted it's back hope you didn't want that deletion to be forever not fun and the only way to fix this is to never actually delete the thread instead of it being thread three you'd put something like this in that index and now when that sync comes over it gets replaced with deleted because you have obviously some ID indicating what that is but that's what a soft delete is instead of removing it from database you take that ID you null all its values and you give it a status deleted so that you know on other things that have their own partial States what you actually intend which is for the thing to be gone so you have to do that there's a lot of these other small things you're going to have to figure out if you're building a local first model not fun but you get the idea so I did all of this the problem was that diffing each of these sucked especially when you had these giant tables full of lots of things if you had 10,000 messages no one has that many but there's people with over a thousand messages if you had a thousand messages whenever you load the page you have to pull all of them down not viable it also means I can't just constantly be pulling more we've already had like 400 gigs of traffic on T3 chat because these two to three megabyte payloads are big enough to Rack our bill up over time so I need a way to do this more granular we can't store the whole thing as a blob that was kind of a hack when I started it's a hack that went way further than I ever expected it to I'm thankful we did it we would not able to ship so fast and make so many changes without that hack at the start but it was time to explore other things as I said we tried out Jazz gave up tried out tiny base I didn't I'll admit I never in knitted the tiny base code base I just dug through docks and stuff was impressed and there's a lot of plac I think tiny Bas makes a ton of sense not here the one was closest to pulling the trigger on was Legend it was really close but honestly the best value I got from Legend was talking to Jay and learning how all the parts in Legend come together to better mentally model how to do this right myself and what we ended up landing on was dexi but a full overhaul of the data layer with my what I call now the V1 of the Reedus implementation the V1 of the Reedus implementation was is a pretty sizable change instead of it having one blob per user each message and each thread now has its own KV redo sync layer with messages and thread tables what a PR I called it sync V4 CU I lost track of how many times I rewrote it and four felt like a big enough number in here we made some significant changes now on the server I rewrote the get route and honestly I should probably just pull up what this was at the time here we are all using next API routes get would check off I would call this get all threads for user and get all messages for user stringify the results return as Json post a little more complex but same deal I'd grab all the threads that you post it up and all the messages you posted up I'd go through each of them make sure they're not too big and then promise I'll sync them let me go look at the actual sync part in here here we are the sync red sdb of course it doesn't open a new to why the would it cool so now we have a separate key for your message and a separate key for your threads and sync messages would create a KV map for all of the messages to create the key for it and map the value and I would call M set with this map to update all the values with whatever the hell you just sent this ended up not working and I had to chunk it not going to even bother showing that PR it was fun last minute changes also notice the key is user ID colon s thread ID that's important because the IDS are all defined on the client side so I had to make sure that you couldn't override someone else's thread like if you saw me in T3 chat and you saw the URL for my chat was I don't know this here that's the ID for this thread so if you knew what the ID was you'd be able to override that I could build a crazy permissions model or some why would I build something smart when I can build something clever and my much more clever solution here was to have the first half of the key here be your user ID so now you can't do anything to my A+ works great the key name space was a phenomenal place to solve this thank you chat for not calling me stupid for doing it this actually worked pretty well we had our key generator to make sure the keys were user specific we had a function to sync all the messages a function to sync all the threads and then a getter to do the same thing the other direction the client side barely changed actually I don't think it changed in this PR at all all it was was the server side wa know I I stopped gzipping so the client did change a little bit but the end point I was hitting would just take the Json super Json blob of all your data and now go store that in the KV and here is where things started to fall apart this is the production deployment on up stash very happy with up stash phenomenal provider making my life significantly easier you'll notice something interesting happened a few days ago we went from storing about a gig of data to a lot more very quickly we also started transferring significantly more data too I don't think they have a Graphic for that but over the first 3 weeks of T3 chat we did about 70 gigs of bandwidth in a day after this change we done another 40 not great and the performance especially after I handled the chunking and the pagination started getting pretty slow generally speaking reddis as an inmemory store is strongest when the amount of data it's storing is small and the overall key space at storing is smaller and if you look at the number of keys we had you'll see the scariest number we went from one key per signed in user who had a chat sync to one key per thread and message and in the course of a few hours we went from 50,000 dis keys to almost a million thankfully it still worked I was surprised the edges that it hit were mostly fixable it was all just chunking the updates and chunking the fetch parts but uh not the right thing to use redus for if you need to select thousands of keys at a time redus is not the right place and I'll be honest yeah sure should have known this and it's not like I didn't know this I just wanted to see how it would perform and what this would look like and when I did the first pass on it even with my huge testing data it went pretty well you didn't know this one of the cool things that we built in early on T3 chat is a message history Import and Export so you can EX your messages some of our users were generous enough that had huge histories to export them and send them to us to use for testing so I had actual real world giant histories to test with and I realized quickly that the model I had picked here was not going to work particularly well if I kept it on reddis because the sheer number of messages some of those users had was terrifying to me so how do I fix this we have effectively concluded dexi is fine we've also effectively concluded that the model on the client side is actually working quite well at this point the problem is redis is not built for fetching a million things at a time it is built for fetching a small number of things really really quickly there is something built for doing a lot of data at a time something I've used a lot in the past something I missed dearly Planet scale Planet scale is an old sponsor of the channel they no longer are they haven't paid me in a very long time I do technically have a little bit of equity in them I don't even know how much I haven't bothered checking in a while they don't know what their Exit Plan is so I doubt I'll ever get anything from that but account for bias accordingly Planet scale handles scale very well because they built with vitess which is a method of scaling your mySQL database by sharding the absolute out of it their Tech vitess Powers a lot of things Planet scale itself is powering bar stool I believe they're also powering intercom but they Tech the open source vitess my equal scaling solution Powers slack partially Powers GitHub it was originally built to power YouTube it's really good Tech and I know that because as soon as I spun it up life's been good we're doing comical amounts of traffic in this now it's still a relatively small number of queries per second but the amount of rows being selected per second is kind of insane because people are pulling their data and the amount of data it's pulling is crazy especially for some of those big users pulling 20,000 rows on page load it's nuts so when I moved over to this for our data I wasn't sure how the performance characteristics would be because it's very read heavy not particularly right heavy but holy hell has it scaled great for us our row reads since deploying have been minimum nine row second up to 200 is also all on the $30 a month base tier for Planet scale by the way not upping it at all it's just handling this all fine our like iio is not hitting limits at all we are fully within what this cluster is configured for do they show CPU limitations in here anymore you would know if your P95 and 99 started getting bad but like rp50 is 7 milliseconds RP 95 is under 50 it's great and if I click here you can see when I deployed also the crazy stuff I was testing early on for figuring out what the migration story would look like but you can see the moment we went live and we've just been consistently getting a ton of traffic since and it's fine it just doesn't really care it's been really nice to use it again but this must have been a terrifying migration right like moving over from a KV to SQL well the fun thing about a KV is that basically anything can become a KV with enough effort if we hop over to my actual deployed code base right now the DB tab we have the old KV CU we're still using this for restoring old data we're also still using KV heavily for rate limiting it's very very very very very good for that use case but our actual database is now in this new SQL folder here is our real DB named to make sure it's clear in the codebase here's our schema message table has an ID has a user provided ID and then a user ID directly the ID is something we assign so that we can make sure all the diffing and indexing is handled properly user provided ID is the the key that we had before where it'll be user ID colon thread and user ID is your actual user ID just so I can index it and grab all your things very quickly but then we have our data type I am so sorry you have no idea how much easier this has made our lives it's great and as long as we make sure we're not putting big things in it it's fine in the future we won't be doing this but for now as our data model continues to shift constantly we'll be doing this for a bit images are stored on upload thing dumb asses come on we already built the solution for that obvious you guys know better and obviously table is much more complex and by more complex I mean the exact same thing with no difference and here's where it gets real fun let's pull up the pr for this quick move sync to SQL on planet scale these diff numbers look scary plus 1200 minus 102 if you remove the package lock this was a plus 200 line change drizzle config nice and boring package Json nice and boring pnpm block most of the code actual code API no longer managing the decompression and recompression I added back fill later threads messages is get all threads and messages from DB parse threads is me deserializing the super Json for the threads and the messages all here if parse threads that length is zero or messages that length is zero then I backfill this is me grabbing from the old KV so I have your old data pushing those to those values I respond with this but I also wait until on my back fill so that it can keep running in the background without blocking you getting your response yeah we have the wait until here at verell functions this file got eroded it's way simpler now I have my legacy old data solution because remember I had two different states of the data in KV I had the single blob and I had messages and threads so I had to first check do you have threads and messages separate if so cool use that otherwise I have to go grab Legacy V1 data from prior then I have my back fill or I update the threads and the messages here I have my back fill promise I wait until on that so it doesn't block the response going to the user user gets the response so the migration story is you open the page it's great who needs a migration when you have users and if we click the little tab button here you'll see my favorite fact about this PR obviously we had to change the route a little bit to hit the new functions we had to change back end to handle deletes a bit different the front end file was not hit once moving us to SQL did not require a single change to the client the end points as I had defined them were more than capable I had fully figured out the model in the relationship between the client and the server at this point the only problem left was that the server model I chose had quirks and catches on the data storing side that I knew it had I just didn't expect to hit them as quickly and by quickly I mean within five minutes of deploying problem solved really cool that our architecture had solidified to the point where I could yank out the database 12 hours after yanking out the database and everything was fine I have had I don't think I've had to make a single change to this since we did it because it's been so reliable since we shipped it I had to make a bunch of changes to the reddest version because I needed to handle large numbers of keys this one just kind of went fine and to those asking about other databases like neon and turo and whatnot I've used them all in the past none handle scale well some might someday but I promise you from my experience on turo this would have collapsed terso if we had spent the time to do the per user DB model on turo and worked really closely with them on it cool awesome fine my experience with turo has been nowhere near good enough to confidently ship in a service that has hundreds of thousands of users on it that would be no no I'm tired of the sqlite ship posting stop pretending it scales that well it does not it certainly doesn't SC scale well on SQL as a service providers it's no stop it please Planet scale is the only reasonable option for a SQL as a service that scales to this level there are other things that are decent like single store we've worked with them in the past you'll be seeing them in other videos going forward I'm sure single store is also a fork wrapper alternative MySQL thing that scales pretty well God everyone suggesting super base in chat I I envy your innocence I genuinely do I I Adore it so cute subase is fine and is one of the better postgress options if you're running traditional servers or you have very small scale subase heels over almost immediately if you have enough lambdas running against it because it has really rough connection limits and I have worked with companies that have been told by superbase you need to stop using versel at your scale if you want to use super base and they moved off of versell instead of moving off of super base yeah I no and God versell post you know it's just Neon right right none of these options are ready I believe me I want them to be I would love for there to be more competitors to Planet scale simply because I can make a lot more money off sponsors but I can't confidently like like the only one that I'm confident of in the scale of to make a regular is single store and they're 50 bucks a month minimum to get started and they are very focused on things that aren't our type scripty world just the experience I had with their drizzle binding is enough for me to say that single store is a great all-in-one database platform if it does things you specifically need Planet scale is like the the Lamborghini of typescript Dev dream databases it's so expensive unnecessarily so at most scales but at real scales for real production workloads that are causing reddis to collapse under the raw iio Planet scale is the only database that responds faster than reddis on a serverless environment in Scales better than running it yourself in RDS there's a reason they won there's a reason they could kill the free tier and make more money as a result it's cuz their shit's good and it's really nice to be home I missed you Planet scale thank you for still being you so where we landed is effectively the exact same dexi but with SQL on planet scale and obviously using drizzle as well works very very well very happy with Drizzle and this is how I databases far too many times in just a few days so what are my conclusions after this journey don't do local first seriously like it is not worth it if being local first isn't a key differentiator for your business don't do it you can make an app that is 95 plus per as fast using really basic cach behaviors and just having routes defined on nextjs with pre-etching you don't need to do any of this you will regret most of it trust me this is not worth it unless you are an insane person that's goal is to make something 5% better than what is possible without local first and you can justify the expense by making content about it hi please sub if you haven't yet this is a lot of work yeah if you take anything from this it should be that local first tools are focused on the wrong things do not scale well do not integrate well and do not provide a good experience unless you really know what you're doing and you're fully committed to the model it is easier more often than not to just build it your self and building it yourself is not easy to go back to the three things here local first real time and collaboration almost everything here even dexi cloud has Ked itself that local first means all of these things local first is a spectrum on one side of that Spectrum there is T3 chat on the other side of that Spectrum there is figma there are things that are between these that fit another place like linear goes herish I would say the difference being T3 chat doesn't need live updates it doesn't need a multiplayer experience I need it to work well signed out and I don't care what somebody else changes when I'm on the page figma has very different needs even if I delete T3 chat and put linear here I think we can all agree that the database needs of a linear and of a figma couldn't be that much more different they are very different and if you pretend that both of these are the same box that that box is called local first and I'm going to sell you a solution that fixes the problems in this box I hope you're selling a bridge as well because this is stupid this does not work everyone pretending that local first is a a category they can solve doesn't understand local first apps or the things they're building for stop pretending you can solve this problem fix it don't solve it fix the problem for the space in it that you want to solve for and stop pretending that every app needs this that every app can use the same solution for it because the creators of half these Solutions admitted to me that their Solutions wouldn't work well for me it's just not reality and I am tired of being gaslit by this weird local first movement when I've built a bigger local first app than most of them have and my conclusion is that all of the tools are either wrong or bad or worse if you can't tell this one's driven me kind of mad I spent the last month now month and a half now God time flies I spent way too much time figuring out local first diving way deeper than any sane person should ever have to and if you get anything from this video the thing you get should be that your UI is best driven by the server make your servers faster don't spend all your time on this that all said if you are one of the people that really really wants to do this dexi if you care Jazz if you don't zero if you're patient Legend if you're right tiny base if you want more options there are a ton of other things that I didn't touch on here that I spent a lot of time exploring even other companies I invested in like electric SQL electric SQL is a postgress sync engine the people who made it also built PG light which is somewhere in here PG light is open source postgress in the browser using wum awesome really cool nowhere near ready for the full stack problem solving space I want to live in so I guess I'll put one last one on the bottom here electric SQL if you just can't give up postgress and this all is with the caveat of please don't bother but if you must this is where I'm at hopefully this is helpful to somebody I have no idea why you watch a video this long about database technology you shouldn't bother using but you did hopefully it was fun for you it wasn't fun for me okay that's a lie it was actually really fun for me I had a great time I I had a lot of rage induced nights like I was working on the V1 move until like 6:00 a.m. that night and just merged it with Mark asleep and went to bed soon after and it mostly went okay but yeah take my madness here as a sign to not do this unless you really really need to if seeing all of this hasn't turned you off from local first entirely and you still convinced it's the right solution to your problem awesome go do it but if you already iffy on it and then you watch this whole thing hopefully now you understand this is not worth doing and I didn't even mention the fact that the only time our database ever gets updated is when the local instance pushes when you send a message we don't write that in DB that gets written when it's done streaming to your device so we are actually local first I could do a whole separate rant about how 50% plus of these Technologies aren't actually local first they local cached server first I'm going to die sorry oh one last note if you do think you need local first because you want to have your pages load immediately you want to have the best possible experience for your users here's our react query provider see this local storage persistor everything I call through react query is cashed locally I don't need this for most of what we built the local data model lets you do updates much more easily but chances are if you're building something like this and you really want the fastest possible page load experience what you want to do is cast your queries and call them earlier not to locally store everything in a whole different model and don't get me started on the mobile app it's going to be a long month that's all I got don't build local first peace nerds




## My current stack - 20250404
my tech stack is something that's very important to me you've been around for a while you probably remember the early days this whole Channel started around the T3 stack before T3 was even me it was my stack I did have the domain t3g way before any of that was even thought of before Tailwind was even created because T3 stands for me it's three letters after the T but a lot of things have changed since I put out the original T3 stack I've looked at a ton of different solutions and changed a bunch of stuff in my stack but also went back to a handful of the things I loved back then I haven't done a proper update on what my stack looks like since back at the start of 2023 I did actually film a video about this last year but it kept getting pushed back on the calendar until it got so out a date that I feel bad putting it out now so instead I'm going to break down what I'm using now and more importantly why I wouldn't recommend a handful of the things I am using to anyone who doesn't want to go insane in the process of building my Stack's a little chaotic now but more than ever I think there's a lot we can learn from it in order to build good production ready type safe typescript applications but I need to pay some bills in order to keep these things maintained so let's hear a quicker from today's sponsor before we dive in my teams are shipping more polar requests than they ever have before probably because of all these nice AI tools that said it also means they're waiting on CI more than ever and I'm tired of it what if I told you there was a way to make your CI two times faster with just one line of code changed I would sound insane which I understand but hear me out because blacksmith is killing it it's literally on line change in your action Runner and now you're getting way faster builds and way way way better Better Price there's tons of companies already using blacksmith for their production builds including companies like Clerk and they've done crazy stuff to make their builds so fast one of the fun hacks is using gaming CPUs like in gaming computers because they have much higher single thread performance which is super handy when you're trying to do a big build with lots of single-threaded work they also have much faster caching because they locate their cash directly next to the CI boxes which is silly that GitHub doesn't do it but it helps them a ton also helps that they give you 25 gigs of cash instead of the US ual 10 gigs you get from GitHub oh if you're curious how fast that speed Improvement is it's from 100 megabits per second to over 400 they've already built Runners for pretty much every language you could want go rails rust python JavaScript whatever you're almost certainly covered oh and by the way 3,000 free minutes a month you don't even need to add a credit card it couldn't be easier to sign up and give a go thank you blacksmith for sponsoring today's video check them out today at so of.ink blacksmith I have the two applications up here that are the ones I've made decisions about the most recently there's a lot of overlap between the two but also a lot of differences and the one that is older has a stack I'm happier with but also doesn't solve some specific problems that the stack for the other solves so these are pick thing and T3 chat if we go through and break this down the traditional way there's a handful of categories that most of us care about there's front end framework style System state manager API system Library backend framework backend language database what I want to call the like dialect I guess database dialect database provider hosting provider Etc there's a lot of these categories and if you've been around long enough you can guess for most of these what I'm doing react Tailwind Chad CN State Management is a more complex thing API system Library also more complex thing backend framework next usually backend language type script database dialect we'll get there database provider we will very much get there and hosting provider versel Cloud flare NFI so this is the The quick summary but the details are about to get a hell of a lot more chaotic I also missed pieces in here like uh router I'm sure we'll find others as I go off is a really good one thank you chat package manager there are a lot of pieces to a modern front end stack and copy pasting the ones I pi is not going to be the right solution and there's a handful of things you might not need at all like you might be building something that doesn't need an off provider you might be building something that the database is just your off provider you might be building something where you don't need a state manager you can just do it in vanilla react or with server components there's a lot of different things you may or may not need throughout all of this which is why my community originally built create T3 app because people wanted me to put up a template of all of the things I like to use and how I use them but but if I did that you'd be installing things you don't need in tools that you aren't using so I suggested that someday if I had the time I would build a CLI to scaffold out a xjs app the way I would recommend and then just didn't but then Nexel for my community did and then CJ and Julius stepped up to help maintain it I've contributed zero code to this project but it is awesome and it still is how I start most of my nextjs applications when I'm not doing like a quick demo of a next feature creat T3 app has you pick each of the parts when you set it up so if I make a new project sandbox pnpm create T3 app at latest and you do this you give it a name some demo you pick between typescript and JavaScript and only one of the answers is actually valid you say yes or no for Tailwind you say yes or no for trpc which is a very important piece we'll get to in a bit say yes or no for next doth there's still a future where we add other options here CU next oth is in a weird State then for the database RM your options are none Prisma or drizzle you can use app router if you want I would highly recommend it nowadays and then you pick which SQL dialect you want hopefully by now you're starting to get the idea it does all of this stuff for you but it's still the modular pieces we're not forcing all of them on you we're giving you options and you can swap out one option for another if you would like which I think is the whole point of the stack that's why I built it Simplicity modularity and full stack type safety I didn't make the template here but I did make up the stack and I did really push for this modularity at a point where as an industry we were starting to go in this way but the the Mind share was still leaning towards the rails way of building things where everything was provided as one solution that was part of the framework I wanted to have the best solution for my different problems and the ability to throw away the parts I don't want and this stack helped me get there in ways I didn't realize were possible at the time and it's surprisingly close to the stack that I ship nowadays as you'll see as we go through the parts so let's do that let's go through those parts I'm going to start with pick thing because at the very least the like core app part is relatively similar to what people probably should use I'm very happy with the stack here overall and I even had Ben Davis my channel manager and also fellow YouTuber who's more a spelt guy helping with this code base and he's had such a good time with the way this project is set up that he's trying to copy parts of it into the felt ecosystem and he's having a hell of a time doing it so you could just look at my dependencies here and get a lot of information about what we're doing you'll probably get most of what you need from seeing that but the way we use these things is interesting enough that I hope you stick through as we do it all the probably best starting point is right at the top here the front end framework it is very rare I build something nowadays that isn't using react I say even though I just shipped one of my biggest non-react projects ever needless to say a project like where is it here unduck probably probably isn't the best representation of how I like to build cuz this is meant to be very minimal a package Json as you see is loaded with dependencies we have the whole Vite plugin pwa which actually by the way is a Dev dep I just need to move it over I'm lazy I'm sure there's five PRS that do it but there are three build plugins oh no so complex if we look at the code you'll see oh wow it's even more complex it's basically vanilla typescript and the HTML is written by this one inline function if you don't pass search prams there is no front-end library for this project this is a very quickly thrown together HTML snippet in JavaScript that is a very specific thing so when a project doesn't need a complex UI or all these Cool Tools and solutions I'm more than happy to throw away all of them so my reaching for react isn't because I think everything should be react or I'm too lazy to build my own uis or whatever it's CU complex uis benefit from a library for building complex uis and For Better or Worse most of the UI Bill nowadays is somewhat complex so something like unduck which is very complex as you could see doesn't need a library but something like pck thing which is inherently significantly more complex you'll see this benefits a lot from a library that lets us have more Dynamic Behavior in the application so let's talk about how we actually build those Dynamic behaviors and all of the layers for it let's start at the root layout the first thing you'll see in most of my apps that have off is clerk I still find them to be the easiest way to add off to a nextjs application and have all the niceties like the little button you can use for signing in actual place to store user data not having it clog up your whole database not having a thing you have to deal with and maintain not having to go set everything up with all the different off providers you want to add it's way easier to get started and if the app does get far enough that I want to release it to the public it's relatively easy for me to push over that hump but there are times where clerk doesn't make sense which we'll get to in a bit because I have not been using clerk in some of my projects and on one hand it's been very nice and on the other hand it's been very painful for the most part Clerk's been really nice and when I don't have it I do very much Miss it I didn't have my analytics which uh what did I even use for analy for this project oh this is the versel analytics component I don't remember putting that in I have no idea how that ended up oh versel analytics for now from me 6 months ago that's how that got there getting owned by the git T plugin once again I normally have it uninstalled and I will probably do that after this or G lens whatever it's called yeah but then we have the analytics that I actually care about which is post hog generally speaking if you want to know how much I care about one of the projects I built check if I have post hog set up if I have post hog set up I probably care about the project if I don't have post hog set up I probably don't care about the project post hog is a phenomenal analytics provider that I've loved working with I bullied them into sponsoring me as their first ever sponsored thing because I don't want to talk about other analytics providers I don't like them much I really like post hog so I use them for everything this isn't an ad they're not paying for this they might ask to be an ad for the video but I will reject because this is just my actual take I've been using post hog for years before they sponsored me and I'll be using them for years after I like them a lot it's a really good way to do analytics for your product everything I care about is using post hog things that I want basic numbers on and don't care at all about might use plausible but I've been moving more and more away from plausible in favor of post hog because I need data that is user specific plausible is very much Anonymous generic web tracking analytics but it doesn't have product analytics which is a different thing I should do a whole video about this in the future but web page view analytics are very different from product analytics it's nice to know which Pages people are going to but it's much nicer to know how many image uploads a given user does and those are entirely different products the first is a Google analytics thing like the Google generic analytics product post hog is more like things like mix panel or amplitude where you can do the Deep product analytics for the things users are actually doing and if you want to know how many users have uploaded more than 50 images that is not a thing you're ever going to get out of Google analytics are plausible and more and more my applications are actually user specific so I need more things for that but also I have stuff like QuickPic which is my service for quickly formatting images in quickpi I think I have plausible setup on it I vaguely remember doing that this is an in browser app that I've barely maintained since launching it that is a nice quick way to solve a handful of image management problems that were pissing me off at the time quick pick is not a real service that I'm maintaining it's a quick picture management tool that I built to solve some specific problems pick things an actual Production service that we shipped for managing your assets as a content creator I still use Quick Pick for a bunch of stuff yes for those who are asking I love Quick Pick I use it all the time but pick thing is crucial to how I run my business every single thumbnail I make that has me in it is using one of the assets from quickpi anyways from here we see the thing that I didn't have originally that I ended up adding later on made my life much better trpc I keep making the same mistake where I con myself that my Dynamic applications can get by with server components and they cannot I wish I didn't need TPC all the time I wish that the apps I was building were simple enough that I didn't need it and sometimes they are if I hop to marker thing for example which is another one of those projects I use a lot marker thing is how I manage all of the markers for my streams which is how I take my 8 hour stream and chop it into individual topics so that my team can start editing it without having to download the whole thing and chop themselves what makes marker thing fun is it doesn't have a database and its actual data access layer is kind of hilariously simple if we hop over to the code for this and we go to a channel page here's the code I run it on the edge because at the time that mattered this is pretty old I force Dynamic to make sure that the page was Dynamic every time you'd go to it thankfully most of these are solved with the new Dynamic IO stuff but where things would get fun is I could just Mount this async component that would grab your off information would grab the twitch credentials using that off information would grab the twitch user ID and then fire API calls in order to generate that page with all the right fods super cool and none of this requires a database at all the entire product of marker thing has no database I am just getting the data from twitch using the credentials I got from clerk it's awesome and it made this code base significantly simpler funny enough I had built this project twice before and I wanted something that I was more confident sharing with other people so I sat down with Mark and we quickly rebuilt it it took like a day and a half we built something significantly more maintainable and significantly less painful and we did that by throwing away all the parts we didn't need it's still kind of crazy that a service I use every day that it's relatively data heavy grabbing all the things that I need for all my videos that this service has no databas is something I find really genuinely cool I love what we built with this tool and I love how the react patterns have worked for it you can also see how old it is here this is a 2-year-old code base God that hurts I'm getting old so fast when server components first happened jsx didn't support asynchronous function calls so you had to put a TS expect error before calling an asynchronous component that's how you know how old this code base is which is adorable painful but adorable yeah so this was all in on server component we got a lot of benefit from it like the behaviors here aren't Dynamic once the stream is done the stream is done this content is static at that point so you don't need a lot of back and forth between the client and the server so not having good ways to go back up to the server didn't really cost me anything this is actually one of the simplest code bases I have and if you don't believe me it's open source you can go take a look I love this project I think it's a great example of keeping things simple when you can and taking advantage of a service like a clerk to not have to put a whole bunch of work into parts that you shouldn't have to my previous attempts to do this in rolling my own off handling twitch o off myself properly storing all of the stuff in database and managing all of it between the new version is comically simpler whole thing is 1,200 lines of code and most of that is like just reformatting data from the Twitch API and a giant pile of types for said data from the Twitch API I loved that so keep things simple when you can if we were to like diagram out my my stacks by complexity the simplest is unduck because unduck has no dependencies it's as simple as can be then marker thing much more complex but not actually complex it's more complex than undu we have to handle off and things but I managed to trim down the layers there to make something way more maintainable and I didn't get there by the way by thinking it through and just magically coming up with the simplest solution I had to write it more complex three times and just trim the fat until I had something simple and maintainable then we have pick thing which funny enough I went through the same thing with I rewrote pck thing probably four times just cuz I built it to use had a problem with it looked at the code base like I don't want to touch this and just rewrote it and did that a few times and then the version that we shipped is our production version it's comically better for reasons that I'm not going to share too much of because that's valuable enough information I it's niche enough and valuable enough I'm not giving it away but then we have something like T3 chat significantly more complex like there is a big complexity Gap here simply because marker thing isn't interactive and unduck has no server at all so there's a slight gap between marker thing and unduck then a big gap because pick thing is now an interactive service with actual like user information and data that I have to manage properly permissions Payment Systems so many other things then T3 chat arguably pretty big gap here because now I have to do things very performant shifting data between tons of different apis and services and mangling it all on the client but then there's another gap before upload thing upload thing is not a code base I'm comfortable enough with right now to confidently share how it works because Julius and Mark have fully taken it over because it has to be more complex and I would not be good at my job if I understood how upload thing worked fully at this point I'll be real so yeah we've covered the Simplicity of unduck and marker thing at this point I would say reasonably well let's go back to pick thing because I think it has a lot of interesting stuff we can learn from we go to dashboard app page here is the page you get if you're going to slapp and SL apppp is the page on pick thing that has your information the things that you've uploaded so if you're not signed in then I redirect you to/ login I then grab the subscription from database if you're not subscribed then I return the checkout component instead but if you are signed in and subbed you just go straight to image page and here I originally did a server component I have since changed my ways is now a client component I get the data from react query well from trpc using react query we'll see a big change to how this works when we go more through the T three chat code base this call might be weird because I'm making a use Query call but I'm not putting something on the other side this is me prefetching so that I don't have to fetch this stuff later and have another pop in so by doing this here I able to skip multiple steps and fire a lot of data fetching with a single batch which is really nice then if you don't have any images I give you the little info drag and drop images onto the page to get started otherwise you get the actual content you go to grouped image grid takes in the images grabs the tag prams and it renders the image groups nothing too complex here the closest thing to complexity in this code base at this point is probably the database and the stripe Integrations in particular if I was to really go back to this code base and make it more maintainable the first thing I would do is gut the stripe implementation and subscriptions cuz we were we were confident that modeling that data properly was still the right thing to do and I've since learned the error in those ways that project was when I realized I wanted a better way to do stripe and then T3 chat was when I finally raged and did it if you're adding payments to your app please read this I have been through so much hell with stripe and almost everyone I've talked to that thinks that their stripe solution is working and good once I force them to sit down and read this their conclusion was oh yeah I missed a lot of things at this point I still recommend stripe over Alternatives none of them are far along enough that I'm confident in them but doing Stripe Right isn't easy the core piece that I recommend is syncing Stripes data to a KV of some form not to a relational database adding that level of complexity to your main DB just throw it in a stupid key value star and use that as the thing that you check a user's status with makes life significant L easier maintaining complex Payment Systems highly recommend copying this I wish I did for this code base but the rest is pretty simple you might notice something interesting here sqlite this project was originally on the free tier of Planet scale you've been around for long enough you might remember back in the day Planet scale had a pretty generous free tier where you'd get their $30 a month tier for free for one database they changed that because the free tier was costing them a ton ofy and the people who were using it were just support problems they weren't actually meaningfully benefiting them and they wanted to focus more on databases that cost $6,000 a month not ones that cost $20 a month so they killed the free tier it have been scaling up to be used by Massive companies like intercom like Square for cash app sorry block for cash app and really big scalable ones like T3 chat we'll get to that all in a bit but I had a handful of these smaller services that were using Planet scale where I just couldn't just ify the cost because they weren't making much money so out of curiosity and willingness to try something else I gave terso a shot for this project and I was initially quite impressed and then I watched the chaos of turo as it slowly unfolded there's a reason I don't talk about terso a whole lot and I don't recommend them very often it's one of those products I wanted to see succeed and I am losing confidence in every day they're a weird group and we already see people in chat bringing it up my data got deleted I have watched some of the most embarrassing outages of my career from turo in case you're not familiar turo Tech their main concept was a distributed sqlite database for whatever you want to build and they' have gotten lost multiple times throughout the process they focus way too hard on edge and moved away from it the thing they do really cool is pricing it's super cheap to get started it's relatively cheap to keep using five bucks a month for databases is really cool problem is you don't know if the database is going to be there tomorrow or if you'll even get the right database back there was an incident a while back where a person was trying to query data from their torso database and nothing came back and they were confused so they went and open up the inspector and they had access to somebody else's database that had credit card numbers in it because the way torso's info worked at the time was if you're on the free tier there wasn't compute being left up instead they would store your database in S3 and pull it back up when the request was made and they had an error in their code where they would pull up somebody else's S3 backup instead of yours sometimes which is one of the most horrifying things I've ever heard about a database ever yeah and recently they started moving over to AWS I believe they were on fly iio at the time they're starting to move to AWS and they accidentally wiped all AWS users databases recently so if you want your database to actually keep your data be cautious I hate talking about these things I hate dunking on the ter guys but they've been weird enough to interact with that my confidence on this product is relatively low great quote from chat is torso another example of don't gamble on the database yes I gambled on it and I'm lucky I haven't had the massive issues I've seen others having yet keyword yet but I'm I'm not risking it at this point I'm not taking the chance so when I first started T3 chat I went a very different path T3 chat started entirely with redus the only dat datase for T3 chat for a while was redus and that was actually really nice until people started storing hundreds of megabytes of data for their crazy threads then we end up with the Divergence that exists between pick thing and T3 chat which is T3 chat started with KV using redus on upstat specifically which was actually awesome up stash was super nice to work with super cheap scaled great the amount of storage per user was getting to a point that was untenable so we moved over to Planet scale and it's been super smooth sailing since when a service gets to the point where I need the benefits of the scale and functionality that planet scale provides I make the move then I've been very happy with Planet scale for all of the Production Services that we run that have crazy throughput things like upload thing and more importantly things now like D3 chat both benefit greatly from the crazy performance characteristics and scalability of Planet scale super reliable super good super happy I don't want to call out other Solutions I will say that I have played with almost all of them and I am happy with almost none of them the the two that currently sponsor my videos are actually within the better options the Prisma postgress product is probably the way I would recommend doing postgress right now I haven't deployed it yet but everything I've seen in the demos I've played with from it is really good and pris knows databases so if you want if you really want postgress like really really want postgress probably the direction I would go for it personally but I personally just don't use postgress nowadays almost ever the other option that sponsors honestly I have regret not using convex more these guys are killing it I put together some demos of like parts of T3 chat using convex instead there are quirks and gotas cuz the big thing with convex is they run your compute your apis don't run on your infra anymore they run on theirs but by owning that they allow for really cool characteristics with your queries and mutations where everything that could possibly update your database exists in their layer so if some mutate something that somebody else has queried for it can live update which is super super cool I've been really impressed with convex and if they can figure out their local sync and caching story a bit further I would see a future where we actually move T3 chat to convex enough parts are missing for that chaotic local layer that I just deal with the sink layer I built myself still but convex is like the thing that I look at and yearn for the most and and I will once again emphasize from chat that a lot of things have come up that I don't recommend I don't want to spend a lot of time dunking on other Solutions but if you're watching this video you're probably thinking but what about X I've thought about X I've probably even shipped something with X and I did not like it so take that as you will I could be wrong but I've been very sad to see the terrible scaling characteristics weird performance characteristics and overall unreliable experience of pretty much every other database people are mentioning in chat including ones I've been sponsored by you might have noticed a theme starting to form here hopefully this will help emphasize the core of how I think about my stack step one start with the simplest reasonable thing step two add complexity as it's necessary and step three regularly reflect on that complexity to see if it's actually necessary be very willing to delete and circumvent complexity where it is possible to go back to like the marker thing example I was convinced that I had to store a lot of data in DV for that product to work and as I thought about it more and more and kept dealing with edge cases I realized oh I'm effectively just transforming the shape of data that already exists in the Twitch API can I just use that the answer was yes and it makes things a lot simpler so that's what I've been doing with everything I can generally speaking complexity is the enemy of success in scale and all these other things the only thing that actually scales is simplicity so I always strive for it and you'll notice in my stuff that I often find sometimes crazy hacks in order to maintain Simplicity to the best of my ability I also can't help but call this out I saw people mentioning Google Sheets as a database as a way of keeping it simple it is not believe me I want to use Google Sheets a database so often I genuinely desperately want to good luck getting that off the problem with Google Sheets the database is it oh it doesn't scale it's Google Sheets Google Sheets scales really well good luck connecting to it via their API the API for Google Sheets is such trash it's such a dumpster fire it feels like it was written in the 90s I don't know how anyone does anything with the sheets API just getting approved through Google's Cloud stuff to be able to authenticate a user to access Google Sheets in the first place or to hardcode one sheet you've set up on your side I actually want to use Google Sheets as a database genuinely it is effectively impossible funny enough I was actually working on a project with Will Osman recently because he wants to build a hiring board and I wanted a simple database that he would be able to edit without having to build all the UI stuff for it so I started with Google Sheets 2 hours into trying to get it to off my roommate in CTO Mark comes over and laughs at me and says I warned you Theo don't do this so I caved and moved to notion which has actually been really nice the notion API is totally fine so yeah Google Sheets isn't the simple option and that's not because Google Sheets isn't simple that's because the API layer to actually do anything with it is one of the most unnecessarily complex piles of I've ever tried waiting through in the last like at the very least last five plus years don't use Google Sheets as a database not because it's terrible to use a spreadsheet product as a database but because the API to access that one is particularly trash it is not the simple solution and I wish it was I do genuinely wish it was it's just not not viable anyways start with the simple thing add complexity as it is necessary and regularly reflect to see if that complexity was necessary in the first place constantly take the opportunity to reflect on the problems you're having the edges you're running into and if you find like enough bugs in a given thing that you produced building the intuition for when it's better to try to circumvent that solution entirely rather than patch is a skill you have to hone over the years I don't have any advice other than try both when it feels right and shift around over time but the the gap between patching versus replacing is a really hard thing to strike the right balance for and in an error with a I where replacing is easier than ever I'm scared we're going to overcorrect and become much more replacing much less patching but right now we're much too willing to patch something that's fundamentally broken and not willing enough to replace it when it makes sense to so I'm okay with this correction it's been a nice change in the industry to see us more willing to delete things that don't work like with T3 chat you might have seen my video about the crazy journey I went through with the database there I deleted more code than I shipped there I've deleted three full sync and and data layers that I built for T3 chat because it was easier to rethink it from the ground up than it was to patch it at least patch it the number of times we had to oh I like this framing a lot I like this a lot overnight send if you're not adding things back you've not removed enough Banger love this so where were we now this this has been a chaotic Journey let's see if we can get more value out of it ooh State manager obviously style system tail and chaden watch my video about modern style Solutions if you want my thoughts on that a deeper topic State Management is a complex one I'm just going to list a bunch of things and hopefully not have to talk too much about them just some things that are useful react query server components Jodi zustand Legend State dexi these may or may not be placed in the order that I recommend trying them and when the solution you're on stop serving the need that you have you move down one layer I would never make a claim that bold though because why would I ever pretend to have used every single modern State solution and only recommend six of them and then use four to six of them in parallel at any given time I'm not saying always use react query but I'm kind of saying always use react query at the very least I'm saying that every time I didn't include react query I ended up regretting it at some point so yeah I see a good suggestion from chat which is I start with server components first react query second usually I do the same but almost every time I end up having problems that react query solves better but yeah I I really like server components and RSC behaviors in the minimal case I would go as far as to say if you can use server components for the core of your application without doing anything too scary you almost certainly should like when I built my pager app which uh you guys ever wondered how we get the new models added to T3 chat immediately it's cuz I built an app to page me and the page me app allows for people who are approved of the custom password and off to tell me a new model just dropped and then I get a phone call that alerts me so I know that that happened the page Theo app was originally generated I tried lovable it struggled with some of the more nuanced things I tried VZ and it almost scaffolded it right I got frustrated and just went and built it myself instead and by myself I mean with a lot of help from our friends over at Claude and Cur you get the idea though the fun with this one is that I did everything through server components and it was actually quite nice I do have a KV because the KV stores all of the models that people have submitted so I have that little section that shows if the model has been submitted or not so I don't have five people paging me for the same thing but all of this is server components there is basically zero client code on this project and it's been very nice because I'm basically just using react to build an interface to my KV and an interface to my free tier what's it called twilio for the phone calls side so it's actually beautifully simple and I love it because this doesn't need a bunch of complex client side behaviors it needs a basic form with basic submission behaviors and an off check and a way to list the things that people have submitted when you use server components in a simple way they are incredibly simple the problem is if you use server components for complex things you'll quickly probably at least run into some insane problems I still like them a lot I miss server components in all the places I can't use them I've missed them a lot throughout T3 chat they're not using them at all if you can't use them react query really good way to deal with async stuff in react react sucks at async react query makes it suck less Jodi is the oh I need this local storage value in five places is what I almost always use it for zustand is oh these five things relate to each other and I want to organize them all in one place I use zustand primarily for stuff like Ping where you have the really complex like interactions between users device State Management and all the other things for a live video call Z stands killer for that use case Legend state is a phenomenally fascinating project that came kind of out of the react native world that is a super granular really well optimized State solution with good sync Primitives built in still very early but I've been playing with it more and more considering moving some stuff over to in the near future and then dexi dexi was built to make it so that Internet Explorer 7 could actually use an index DB like like thing indexdb is a terrible API that is really hard to use dexi is currently the core powering most of T3 chat it has been awesome their Cloud product scares me and doesn't really solve the problems that we have but the core dexi library is probably the best way to deal with and fight all of the chaos that is indexdb and browser standards about storing data is what we're using for T3 chat I wouldn't recommend it unless you need it but if you need it it's very easy to recommend if you're storing more than 10 megabytes of data on the client you probably need dexi for it that's where I'm at with State managers start simple add complexity as you need it and trim constantly or you will slowly go insane okay API system in library almost all of the projects I've talked about so far the big to being pick thing and T3 chat started without trpc when I built them initially and ended up with me adding trpc because I up and deeply regretted not having it trpc is still the only sane way to deal with complex backend front-end relationships and the results are incredible it's so nice to work with so this is the switch that manages whether or not the database gets updated with your chat history if you do or don't want to sync your chat history if I go to my use sync enabled hook you'll see something interesting here use Query trpc wait don't you call trpc do usequery what's going on there what's going on here is there's a new way to call react query with trpc where instead of trpc wrapping react query we take the things that react query expects the keys the options all the other pieces and we generate it and pass it to react query so we can use the same react query instance for all of the things in our app and it's really really nice I've been super happy with the experience using this new way it's weird cuz now we're interfacing between react query and trpc back and forth more often but we get a lot of cool benefits from it too it's been really nice the magic of trpc is the type SA and simplicity of things once is set up but the magic of How Deeply this type safet is integrated this component is a client component I might not have put used client on top but every component in T3 chat is a client component due to the way we architected it we'll get to that in a bit but watch what happens when I command click get preferences now I'm in my backend trpc folder on the exact function that I am calling on the client how cool is that it's so so nice hopping between the back end and the front end with typescript is The Binding between the two no graph schema interpolating no crazy open API spec that no one remembers to generate that makes it impossible to figure out what's coming from where and everyone's scared to change you just go to the back end and make a change and the front end will see the change it's so nice and every time I don't do it I end up regretting it I went super hard with server actions with the first version of T3 chat and we have since gutted all of them I probably should have started with trpc but once again as I always do I convin myself oh I don't need it this is simple enough and then as soon as it's not simple enough I desperately reach for Julius to hop in the codebase and set it up for me yeah trpc still feels borderline necessary for complex enough applications if you could possibly keep your back end and front end in the same project trpc is going to make your life much easier and allow you to stay in that mono repo monolithic solution for a while it's really nice I'm really happy with it and unlike server actions it's also relatively stable and doesn't have a bunch of weird edge cases that make no sense at all I've been to Helen Back I have a lot of stories to tell at some point speaking of stories to tell let's dive into how I have the routing architected here we're going to skip a few steps here but the routing we have set up is fascinating you'll notice that despite being a nextjs code base we have react router in here I really didn't want to do routing on the server side I did not want using T3 chat to ever block on server ever I wanted you to be able to navigate and do things in T3 chat without ever having to deal with the network connection blocking you from going from one place to another so I use react router in nextjs how did I do that a pile of hacks I don't necessarily recommend I am still in the process of exploring what we've been calling the nexit for this project to see what moving off next looks like and every time we make meaningful progress in it something stupid happens that requires us to rewrite way too much in a way that is less maintainable and more complex and I sigh and shrug and just stick with next I have been very surprised how well this hack has scaled for us but I am not recommending it I do have this though here I import next dynamic because I can't SSR this component if I do everything breaks Dynamic is for static because I want this route to be static and then I export the function app and app is a much more traditional react router client side application why is this in static app shell why isn't this just a catchall route because in nextjs catchall routes are always dynamic because it needs to know the URL which means that I was running server code every time you navigated to the first page when you open T3 chat that was bad and dumb so I fixed that here by making everything static and making it a static route because if I made this a catchall route it would no longer be static and this would just error but how does this handle every page more hacks here's the app shell rewrite if the source is slash path which means if it's anything then I redirect it to static app shell but I also added this missing call out here because the trpc end points also use a catch all route and a really fun thing about the way next works is if you do a rewrite in the config here that takes precedence over rewrites and catchall routes in your actual next router so this router was having its routes intercepted by my config and when you would try to call trpc it would get back that static HTML page so I had to add a custom header on all trpc calls and then filter out things with that header in my next config to make sure that they don't get abducted by this catchall route I am not interested in Sharing how long it took me to get this all working properly I just hope I can save some somebody who's making the same bad decisions as me a little bit of time in the process could I use tan stack router could I use remix could I use all these other things I'm going to show you guys something fun notice this PR here notice who made this PR here notice that it was done last month and it still hasn't merged I have been promised by a lot of people smarter than me that this move would be totally doable and easy those people are currently making changes to their Library so this is actually somewhat possible at this point it's a race between the remix team and the T stack team as to who can add the missing pieces first so I can make a move that doesn't make me rip my hair out the way that remix and react router handles cookies feels like we're in the '90s again and tan stack despite being way further along with those things has enough pieces that don't fit together nicely for our use cases that Tanner is going really hard on single Peach app behaviors in order to make it way better for us to adopt they're also in the process of removing viny which is the core that they've built around for a while and I do not want to adopt op a framework that is about to rip its core out so one of these might be the move in the future but as crazy as it might sound that I'm saying this next is more stable than the other options right now even in my weird bastardized way of using it so yeah stop asking about other Frameworks I've considered them more deeply Than You by people who are smarter than you people who are smarter than me and we'll do it eventually but for now this is working really well but once again the point of this video isn't you should copy my exact stack it is a a set of warnings on the sirens that will call you on the process of trying to build things like this yeah good luck have fun so that's the routing situation and also the fun workarounds that I've learned to deal with since to make this all viable what else do we have that's valuable in the stack okay we've handled the State Management API stuff handled backed framework still on next will'll be there indefinitely I wish I could use Elixir more but typescript is just too useful for too many different things we covered the database dialect and provider my hot take there is use a good KV for as long as it's reasonable because any data base can be turned into a DB but not every DB can be turned into a KV so if you start with the key Value Store moving from the key value store to SQL is not particularly hard and you can do that at almost any point and be fine that's what I did twice and it's been totally sustainable for us since I started and I also really like the experience I've had with up stash they've just been great really easy way to deal with data at scale for things that need to respond really quick I've been happy with it highly recommend use it when you can move off it when you can't keep it simple we just covered the router next when server react router when client I used to be a really really big fan of wowder which was a really minimal react router alternative react router is in a pretty good State now hand router is in a phenomenal State now I need to use it for more stuff I just haven't I haven't had complex enough search RS to really benefit from it and I don't want the data loading patterns unless I have the server side part with tanack start so for me tanack router is is just waiting for the tanc start part to boldly come together and they'll probably be all in on it but for now this is stuff that I'm using to keep my stable the funniest part with the way we're using react router I probably should have mentioned this before this is not the new react router syntax I'm using the react router syntax from V4 they're on V7 this is the same router syntax I used at Twitch in 2018 the new stuff seems really cool the file based routing and stuff is genuinely seemingly pretty awesome I'll get there when I get there not my problem right now we got to do I'm very happy with my routes being components that have a URL and the thing they render pretty simple makes my life better I'm happy with this everybody saying I obsessively adopt the newest things have not read any of my code I don't I say right before the off section because the two off providers I find myself using the most are clerk almost always and if not clerk pain I have a long video about the different off options and when I do and don't recommend them I'm also getting more and more work OSS pelled as I see the benefits for the Enterprise side like if you want to be able to get a Enterprise team to set up your crazy off stuff in their company through their it team the admin panel is just one of those things that I never want to do in my life like if a different if a random company that wants to buy T3 chat needs to set up OCTA or samel I don't want to do any of that and work OS is what we'll almost certainly move to when the time comes for Enterprises to start adopting my tools so clerk if you can you have specific needs I personally am pretty happy with openo openo is built by Dax and crew over at SST it is very Hands-On it does very basic stuff for you and shows you roughly how to pull it all together it lets you separate your o into its own service and I I don't want Au in my database ever again my database is for my data not for my off keep my off out I am very blackpilled now on user table not being in my database and it's made my life significantly better open off lets me do that trivially where I our off layer for T3 chat is a 20 line of code worker running on cloudflare writing KV data straight to the cloud Flare's worker KV and I don't touch it I don't interface with it I don't do anything with it I just call it using the open off client and I'm done it's really nice it is like roll your own minimal featuress Clerk and I've been very happy using it for T3 chat even if it took me forever to set up and we have random weird edge cases because the examples they gave were missing things that I have to go polyfill after validation is a a bunch of other random things suck about it but that's welcome to Rolling your own off it is what it is but I've been happy with it it's fine I did not want an off solution that expected to run between every single request because I wanted an off solution that wouldn't block me for local first stuff and with T3 chat I wanted to minimize the things between the user and the stuff they're trying to do and Clark makes life much easier by being in your nextjs middleware and running between every single request I had zero interest in an off layer that ran between requests I wanted an off layer that I could call when I needed to for things that I wanted to check and that's it I wanted the simplest possible off layer that would not block requests until I chose to and it was flexible enough to get me using it and I was happy overall what I recommend this over clerk if you can use clerk I would probably recommend just using it but if you have specific needs performance characteristics desires and other chaotic you're trying to do open off lets me keep my separation that I really like to keep I've been quite happy overall you want my thoughts on all the other off libraries that are consistently coming up in chat if only I had a video where I broke down every single current o solution and how I feel about it that' be really convenient Wouldn't It Anyways that's where I'm at with o oh package manager finally an easy one I just use pnpm bun will get there someday I want a solution that just does the one thing though and pnpm has made my life much better having everything cash locally and for the most part behaving properly monor repos bun is a runtime bun is also a package manager but their focus is on a lot of other things bundling runtimes lots of other it's missing a ton of stuff for monor repo management and every time we try to use it in monor repo we end up in hell and back on pnpm there's a future where I start using bunm more but for now pmpm has made my life significantly easier I really hope you guys aren't sincerely asking what runtime my runtime is noed my runtime will stay noed my runtime has been noed for a long time and it will be for a long time I use cloud flare for a handful of very specific things that make sense like an O wrapper that's on top of a KV or for p thing all of the image optimization is calling different services like when I generate the background removed version of this image that's using a handful of different AI companies providers and apis to remove the background and generate a new asset I do all of that through Cloud flare because I after again remember I rebuilt this so many times I had a really clever solution to the issues I was having with all the state management and keeping track of what had had the background moves and whatnot look at the URL it's kind of nonsense so I'll open up my editor bg. image. engineering what's image. engineering oh I guess there's nothing to see here never mind I'll finish image engineering at some point but what this project actually is is a CDN and image optimization layer that I built on top of cloudflare because it's runtime characteristics were very convenient for the type of scale and weird waiting behaviors that I wanted to have so that a user could request an image that doesn't exist yet and I could hold the request hostage until the thing existed it was a very very nice way of removing all of the state and that's probably another one of the themes you should get from the my way of building whenever I find a way to remove state or remove split brain where data exists in two places I will go to the ends of the Earth to make it happen I will do really stupid things to make it so data exists in one place instead of two the less I have to mirror and change and modify and derive data in different places in ways that it can fall out a sync the happier I am and every time I have data in two places I have four problems at least every additional place that your data exists is an exponential increase in the surface area for potential problems and The more I've been able to single source of Truth things the better life has been and I am far from the only one saying this and this is far from the only industry that's realizing this funny enough I just hung out with Luke from LT last night and he couldn't stop talking about how they're rethinking things internally to have a single source of Truth for stuff because having multiple people multiple to-do lists in different programs and different calendars and all of that is burning the company Down single source of truth will make your life better and the chaos I had for managing which images had their backgrounds removed and which ones didn't was at the point that I was going mad so the way that image engineering works now well more importantly the way that pck thing works now is when you upload an image the background removal doesn't start until you render the result so if I upload an image and then immediately close the tab the background is never removed the background is removed when this tag is mounted on the page and that tag mounted on the page makes the image get fetched from cloudflare and if it exists it gets pulled out of the storage and given to you and if it doesn't it gets generated and then given to you while also being written to storage it allowed for me to reduce so much complexity and it made this project go from something I was ashamed of to something I'm genuinely really proud of and that's all on cloud flare but that's not part of the pick thing code base that is a separate image service and yes in order to keep things simple and stateless I find myself making microservices more and more open off is effectively a way to make a really simple microservice for your off layer and what I just described with image engineering was a simple microservice to remove all the complexity of managing the different states that an image can be in I'm very happy with the result of the those things but if you're starting with microservices and you're starting with these isolated things you're going to pick the wrong ones so start with a monolith make it as simple as possible and then the second or third time you're building it you'll realize oh these things could have been their own Services I should probably do that and you'll be able to make something significantly easier at that point what else what else what else anything really good in my package Json here oh upload thing pretty much all of my services use upload thing because pretty much every service has some use case where users can upload stuff and it is really annoying to set up upload thing I'm pumped with the service and where it is but at the same time I'm just happy that we built a micros service that solves the upload problem because I had so many projects with a ton of random S3 that doesn't have to exist anymore the upload thing code in this code base is some of the simplest stuff in it and it's so nice not having to worry about those things compared to stripe where I had to build my own internal micro services to manage who subscribed H and drizzle is my omm of choice if I need SQL I'm usually using drizzle prisma's catching up fast and I'm considering using it more in the future but drizzle is really good oh that's another really important one something that's in all of my projects T3 EnV this is a package that Julius made a while back because managing environment variables when you're hopping between projects and sharing things with others sucks and if you deploy something and forgot an environment variable you end up being a li ability and a problem for the companies whose Services you're using half or more of our support tickets for create T3 app were people who forgot an environment variable when they deployed t3v lets you scaffold out all of the environment variables you use in your project and give them Zod validation on build so now when you build the project if environment variables are missing it will not pass build and it will error with the specific missing variables and you can split between client and server it's super super nice it makes our lives way easier as we pass projects around different developers and different people is why someone like Tanner could grab my codebase and run it locally because it was much easier for us to figure out which environment variables he did and didn't need I'm super happy with t3v another one of those libraries where when I don't include it I end up regretting it later on I recommend it you should really consider it funny enough t3v is more popular than cre T3 app now because it's being used by so many people in so many other stacks and places too I get so many thanks for building this and it's amusing to me because I had nothing to do with t3v Julius just made it one day and asked if you could use T3 form like yeah sure highly recommend it env. t3g if you want to learn more it's one of the best ways to handle environment variables in your production applications if you have multiple people working on your project please try this and if not as chat has just pointed out at least make sure you're manually validating the process cnv because you will end up in hell if you are not M people in here saying they're using it it's going really well for them that's awesome to see I think we've covered most of it my Stack's a little chaotic I'm not going to pretend otherwise and my stack is more than ever very different between my projects I'm almost always using typescript I'm usually using react I'm hopefully usually using trpc I'm often using rsc's I'm almost always I'm using react I'm using react query the reason I'm drawing this this way is you can kind of draw a circle in the circle expands as the needs of what I'm building grow or the problems that I'm having get more painful but I always try to start with the simplest thing and most of the time that ends up being typescript and what you'll see is most of the time as my apps get more complex it's not that I'm swapping one part out for another it's I'm adding a part and I'm using less of simple or roll your own things in more correct Solutions as the problems I'm running into are more painful like the move from KV to SQL wasn't me removing all the KV calls in our project we still use KV heavily for T3 chat I don't see a future where our rate limiter isn't on reddis through up stash and I don't see a future where our stripe subscription management isn't also reddis through up stash but the data management for your actual things like preferences and your chaotic message history that all makes a lot of sense to have a SQL database generally speaking as long as you start with the simplest thing that solves the problem moving up to more complex things will not be too bad but moving from a complex thing to a simple thing is no longer a move it is a rewrite so if you start with SQL when you should have used a KV you're rewriting if you start with a KV and you move to SQL you're in good hands if you start with material UI and you move to Tailwind you're rewriting if you start with tail and move to Shaden you're adding new components start with these simple pieces and if they don't solve the puzzle you're trying to add the ones that might actually solve it I think I've covered everything I want to here I just fielded questions to see if there was anything I missed here most of the questions are about things that I've covered in depth in other videos so I don't have too much else the only last thing is the question about servers where do I put my servers forell is cool for serverless what about servers I have done an incredible job of avoiding the need for servers for a long time now and chances are if I do actually need them I'm in one of those rare cases where I benefit greatly from having a traditional server I've already offloaded the work to Julius and Mark and their host ing it in AWS where those severely challenging server loads probably belong but by the time we're spinning up real servers we've moved away from these bespoke Solutions and we're back in the chaotic world of managing State and synchronizing it across a bunch of different things and all of the edge cases that come with it pretty much every outage we've had with upload thing in the past year has been because of servers so yeah it is what it is we're working hard to make it as good as possible but servers will always kind of sock all the other questions aren't things I care enough about to talk about I think this gives you a good look into my brain and how I make technical decisions about the stuff that I built keep it simple for as long as you can and add complexity only when necessary go out of your way to delete things whenever possible and if you deleted too much and have to bring things back that's okay too think I've said all I have to here let me know what you guys think are you going to go copy my stock or are you going to take the lessons here and go back to laravel and be happy there let me know until next time peace nerds




## My favorite browser is (kind of) dead - 20241102
the state of browsers recently has been interesting Chrome kind of won I don't think that's debated anymore but what is going on that's kind of unexpected is this Resurgence of other browsers that are chrome-based but offer very different things there's a bunch of them be it the one baked into windows with Edge be it all the crazy things going on with third party browsers or the one that we're here to talk about today Arc oh boy this is going to be a bit of a tough one for me if you didn't already know know I've been a big fan of the arc browser for a bit but that wasn't immediate when I first tried Arc I honestly didn't like it that much it took three attempts of actually committing to the browser for it to actually click for me and become my browser of choice it wasn't for my CTO Mark pushing it on me I probably wouldn't have bothered at all I was happy with chrome but after giving it a real go figuring out the hot keys that I liked getting used to that sidebar and just falling in love with the way the browser operated it became a thing that I quite enjoyed using and not privately either I've been very public with my love of Arc and a lot of you are too I am certain many people you'll probably even see them in the comment section here started using Arc because they discovered it in my content in my videos and that's part of why this one's so hard for me because in one hand I do genuinely feel like I was slightly misled but on the other by transitive property that means I kind of misled y'all as well and I don't want to feel that way I don't want to feel like this thing that so many of us are invested in might actually die soon see that Arc 2.0 let's see what he actually says about Arc 2.0 quick so we got two things to share with you today Ark is not going anywhere the product you love is staying put and we're building a brand new product to be honest we're not even sure it's a web browser that's the concern they're done iterating on Arc if you keep going through there are some moments in here that that hurt me and while we've quadrupled the number of people that use ARC every day this year if you extrapolate that out we're not going to get to a billion people using this product this is what I I struggle to Fathom and I'm sorry Josh I hope that me covering this now uh it's a copyright God damn it why do they do this to me I just lost all the monetization I'm going to get for the live anyways thanks Arc before we hear why Arc 2.0 isn't real we should quickly hear from today's sponsors because Arc just cost me a bunch of money browser base these guys are great they make it way easier to access browsers via apis you know like the Puppeteer type thing let's take a quick uh wait that's an open source repo what oh huh they put out an open source SDK that lets you write plain English to play right and match a schema to get data out of any U URL on the internet if you've done browser automation you should immediately know how nuts this is and if a company is capable of building something as cool as automated playright with AI you know they're good for hosting the browser too browser based it's a cloud platform that hosts your playwright Puppeteer whatever else for your remote browser for you so you can just search the web via API or in most cases AI if You' ever struggled with Puppeteer or playright there's a good chance browser base will make your life easier check them out today at soy. l/ browser base and don't forget to go give a star to stageand this is really really cool anyways I struggle genuinely to Fathom how someone can look at the chart we just saw before and decide it's time to Pivot this is a really good da chart this is really good growth the issue is that their goal isn't to have hundreds of thousands if not millions of dedicated users is to have a billion users like Chrome the goal with the browser company wasn't to make something that is much better for a subset the way he puts it later in the video is he wanted a browser that his mom would use and he didn't build that and on one hand I can sympathize when you have a specific mission in mind which is in this case to reinvent how we use the web and what you get is a subset of people who really like the tool you built but you're struggling to break out of that that does force a moment of reflection are you building the right thing or not my issue is they built something great for me they missed a few dumb things that should be easily fixed that I felt dragged on about for a bit and the result is I don't know if the browser will ever be fixed I hate to keep harping on this point about this chart but I I seriously can't stop thinking about it since they have investors they have to go big they have to become a billion dollar company to justify the money they raised and the money they're spending to try and build something different but you don't have to get there by having a bill users you can get there having a small number of users that actually pay real amounts of money and there are companies that have done this in the general space one of those is superhuman I really like superhuman I was skeptical going in that a what is it 30 bucks a month right now sorry that a $25 a month subscription for a rapper for Gmail for better hot Keys could ever be worth it but it actually is I cannot fathom my life and the amount of email that I do without superhuman at this point and if they were to hit me up and say hey we're actually changing the pricing it's actually 200 a month now I would sigh as I hit accept it is that essential for me superhuman proves that if you build something that is a big enough multiplier on the existing experience even if it isn't valuable to most people because there is no world in which my mom moves to superhuman the same way there's no world in which my mom moves to Ark she's also probably not going to install any AI chat apps on our phone it's just we have to be realistic about those things so if you can make real money on your users because those users are deeper they care more and they're more willing to spend that monthly fee you can make a very successful business by the way if you are actually interested in using superhuman if you are a person that spends more than a few hours a day in email I think it's worth it I'll leave my affiliate Link in the description is just soy dev. l/s superhuman I cannot imagine life without it you're the same appreciate if you use that link I think they give you a discount either way it'll get me paid which is nice cuz I've spent a lot of money on superhuman cuz it's worth it and I pay for it for all my team just for quick reference by the way they're already making almost $40 million a year on an email rapper like what that's a lot of money and their growth is going up they had a similar Plateau to what the arc team's probably feeling right now and managed to break out get that number going up a bunch and the result of that raise which by the way we only have their raise history up till 202 won they're able to raise on a $750 million valuation if they were close to a billion dollar company then they are probably a billion dollar company now like almost certainly and I think most businesses and most CEOs would be envious of the position that Arc is in where they have all of these users and they're not just random users who refuse to spend money they're not the moms of the world they're business people there are people like you and me developers who rely on their browser for the work they do every day they gave me the browser for free and they try to charge me for features that are more targeted towards people like my mom and not me like the AI summaries of random I don't care but if they charg me for I don't know using it for more than a month or for fixing the downloads tab like I complained about earlier like I would be down to pay gladly 30 plus bucks a month for this browser if it would actually be maintained but it doesn't feel like it's going to be and instead of trying to fix that they're going to go for that billion user thing there there's two ways we could think about this either browsers can't make money which is how people felt about email like you can't charge a lot of money for an email app it's kind of funny when you think about it I spend five to six bucks a month to host my email with Google on Google workspaces and then I pay 30 a month to use things with superhuman so I'm paying six times more per user for the app I access my email in than the email service itself but that's because they made something that good and while I can see why there would be concerns that people aren't going to pay for a browser the fact that superhuman can make as much money as they do shows that it's worth at least trying and not leaving behind your most enthusiastic users in the process of pursuing something bigger I have two things I want to discuss first I want to talk about the issues that I'm having that I'm now concerned will never be resolved and second I want to talk about what they're actually going to go do instead the first thing as I just mentioned are the issues that I have there's a lot of things that are going to be hard to solve that they probably won't like Arc will never be on Linux now there isn't a world in which they Port it to Linux when they are done improving the producted platform they're not going to do that and it's not open source so we can't do it instead they're not going to make the windows build much better than it currently is it was a lot of work to get a swift based browser working on Windows and they did it and it got working it's still not the browser I reached to on Windows but I also don't reach the browsers on Windows that often to be fair but it is my favorite browser on my Mac so at least I can use it there right right yeah and I hope that they'll continue to maintain it and make it safer but there are issues for reference the MacBook that I'm using here is not the computer I'm streaming from this computer is wired over HDMI to a Windows machine so the only things I'm doing on this right now are Arc Zen which I couldn't get the video to buffer in properly so we're using Arc still my notion my terminal my editor and a minimal Discord clone that it's not a clone it's a minimal Discord web wrapper so that I can use less resources and have less issues with Discord I do not have much stuff open despite that there are some hilarious performance issues that I run into regularly opening and closing the sidebar is fine I do have one thing that's annoying it slides in and out by default to turn that off there's no setting an arc you have to turn off motion across your entire Mac which I did just so that this no longer slides in and out and causes the content tend to shift a bunch as it doesn't that's not the performance issue that's just a small experience issue the performance issue is this button here collections I have a decent number of things in my downloads folder let's quickly check how many if I go here right click get info okay this is counting subdirectories but I have a a decent number of things in my download folder it is what it is okay the issue is when I click this button not only does it index everything in my downloads folder it tries to render them all in one list so if I accidentally click this button twice which by the way is very easy you are here and if you just tap it it lags to open it lags the whole browser like the frame rate's down to like 2 FPS now and closing it will freeze half the time if I accidentally click this button my browser might just stop working for 30 plus seconds it's so bad it's so bad and it makes me embarrassed to be using this browser when it happens when I'm like screen sharing with somebody I'm turning off reduce motion so we can get the full experience here making sure that animates again cool it does first off see the Jank I was talking about where the thing just slides around it's not their fault the web sucks when you stretch things like that yeah but now when I click this the lag that the frame rate of the scroll here is awful it doesn't stick with the stickiness when I'm scrolling I'm clicking it again it didn't open that time it lagged Froze that time like I clicked it it takes 3 to 5 Seconds to actually open it's it's real bad and if I try to drag something from it somewhere else it it will just freeze entirely all I want and I don't think it's a big ask is a way to cut down the amount of things that are here by default give me the option not to filter by a profile but to limit by I don't know a time span maybe limit it to things I downloaded in the last month or my last 100 downloads these are all I think reasonable asks which is why I made them about a year and a half ago I was in touch with the ark team we had some email back and forth I think I even did a call with them and they told me that the problem here was things that Swift UI does wrong that they planned to fix or work around there was a fix coming in the next update for Ark and more coming in the near future that was over a year ago I tried when that happened and it wasn't it was better but still laggy so I followed up again and said hey I'm still having these issues what's up and the response from an Engel on the team was hey we're still working on it we did ship a performance fix but we have more coming in the next two updates I'll follow up when they've shipped so we can get more information they never followed up I didn't feel like continuing to push it and honestly I had just trained myself to never click this button for any reason but it still annoyed me to no end when I heard this announcement that they were no longer working on improving Ark because it's fine as is I was concerned that that these bugs might exist forever now so I hit them up one last time I hit up the engineer I had chatted with before saying hey man I'm concerned here I really hoped that we would get these updates and that I would get to have the few things that were left that were still broken for me get fixed I'm not even asking for features just like I want to be able to put the sidebar on the right I want to be able to do vertical splits I have a lot of other things like that that I want but I'm not going to push for that I understand they're not going to be adding everything everyone wants but making the thing that's here actually work that's not that big an ask I really don't think it is sadly they did I reported massive Arc performance issues to browse their company over a year ago I was promised a resolution I followed up with the engineers on the team last week they forwarded me to memberships support that's the thing that made me realize this might actually be over they no longer were letting me an engineer with technical issues talk to an engineer who can solve the technical issues they now put a support person in front and when you do that with a team that previously was willing to talk to people like me there's one reason you want to stop burdening those Engineers with a thing that isn't their responsibility anymore it broke my heart it was very very it felt in that moment like the ark team was no longer invested in making Arc a great experience they were okay with the quality of the experience that existed then it really hurt especially because these issues were over a year old and while as Josh clarifies underneath which will get to in a moment the number of people affected by this bug isn't necessarily massive but the size of the performance issue that I was having is massive because it means there's a feature in the browser the download tab that I literally cannot use and because it is always there when you go into this section I've never used spaces or easel or boosts in this View and I didn't even know there was an archive tabs button because I never sit in this View and this would actually been useful and save me some trouble in the past but I don't know that because I can't go in this tab because it locks up my computer half the time I do it it's unacceptable but because it affects a small enough percentage of people I am fearmongering and before I I roast Josh for this take I want to say we did hash things out in DMS we're doing a call soon I hope me doing this video before we schedule the call doesn't mean he's not going to do it I still want to talk with you Josh I will absolutely do a followup if you convince me that I'm wrong here but it is my journalistic reporter Duty both as somebody who reports on the news in the space and has led people towards this browser to report my experience here and share it with those who chose Arc based on the good experiences I had Josh said okay now you're just fear-mongering to get views we've had our entire performance engineering team staffed on Arc non-stop this entire year you can criticize my decision to build a second product but it's not fair to slander my team who has been working their asses off building a novel browser across platforms is extremely hard for a small team if you'd like to DM or email me the details I'd be happy to to jump on it can someone clarify where I slandered the team here also not great viewership I don't make money on views on X I'd be surprised if this video ends up in the top 10 videos I did this month genuinely I'm not doing this for views I've actually lost money covering Arc and using Arc as I've discussed in the past I do it because I like it it is the best browser I've ever used on my computer it's really sad to have the CEO of a company that built a product I genuinely love and promote and give endless free PR to at my own personal cost to be told because I have concerns that I'm fear-mongering and slandering their team it's so unreal I I don't want to harp on things in DMS but there's one thing he said in DMS that really irked me that I don't know how to discuss so I'm just going to air it out here he specifically said we both probably have things we regret saying in this interaction I don't I don't regret a word a said about this I handled this really well he is being emotional I will not take the fall on that one because I have not said anything here I think is worth regretting and if I am incorrect there if any of the people who I trust and look up to can say hey Theo mostly fair but this thing was a bit of a reach and you probably shouldn't have said that I'm down to take that back the fact that he couldn't take the accountability of this being an emotional overreach has me really concerned about the future not just of Arc but of the company and the fact that chat's response immediately is is this just Matt again from the WordPress drama is sad if this wasn't me versus him I would probably be more defensive because I know how easy it is to get into that emotional moment when you're getting pushed back especially if it's like the first time it's really exploded but it is about me so it's hard for me to be that generous and also it's still unacceptable even if I can sympathize with the position the person's in and I absolutely can historically while they've had issues here and there with Arc around things like the security incidents with Firebase they were able to flip the sentiment relatively quickly and generally speaking be good citizens of sentiment and Community Management there weren't many people who used Ark saying that this sucks people will be doing dunks whenever they can but the fact that for the first time users who love the product were really concerned means that he effectively treated me like someone who doesn't use and love the browser he treated me the way he treats all of the haters with dismissal and disdain but the fact that he is the founder CEO and owner of this browser that I love could so quickly throw away my perspective because it doesn't align with what he thinks it should be is very very concerning this is the main topic of the call we're going to do if we are going to do it he needs to understand that his users are not the haters and if the users sound like haters he probably up the followup made it much worse respect him for not sharing my there that said if we're a company that I have relations with and I've like discussed these things before especially if I've ever talked about them publicly I don't care I would have been totally cool with him saying it publicly but I have a lot of respect for him not doing that without explicit permission but then to say I'm experiencing an extreme Edge case that's experienced by less than 0.1% of the users that is difficult for them to fix because of how I use my OS how I use my OS is I have a downloads folder with more than 200 items in it that's not that weird a use case if you just and again like if my use case is that weird the solution isn't ignore it it's at a setting that doesn't affect the 99.9% and then fixes the .1% so if the issue is again that I have too many files in my downloads folder and since I have so many of those it's an absurd amount of things cool find the amount that's too high and draw a cap there it won't affect the rest of the users and it will fix my problem if I don't fit into the box of how you expect your users to work make a small code change that fits into the box it's not that hard I've done all sorts of pagination and rate limiting throughout my career it's not that hard to do they told me they were going to look into it and probably do it but you can't expect any Tech to render thousands of items in a list on demand without issues other people in chat are dropping their numbers here too there's people with small numbers like 400 to 500 files and then people who have 21,000 files yeah thank you chat by the way fact that you guys have been so supportive in this and like get it means a lot because this is this was sad for me I hate accusations like that like slander is a very real accusation and I wouldn't say that about anybody especially somebody who's using my uh I I really hated that I hope we can patch this up and be on better terms genuinely I did follow up here and clarified the exact issue I'm having said 100% cool with you sharing the details I have nothing to hide I also reach out over DMS if You' prefer to continue privately for those who are curious my issue is with downloads specifically when I open open the downloads collection or tab slow to a crawl dropping a single-digit FPS and taking s to respond to my attempts to close it collection features effectively unusable on my machine the reason that I have a lot of files in my downloads folder like just for reference for people who think like I'm downloading all the time kind of what I do is all of my programs for creative stuff export to downloads so when I finish an edit for a video it exports to downloads when I finish an edit for a thumbnail I'm working on it goes to downloads I do that because organizing all of these things is actually impossible for me so instead of pretending I can organize all of it instead I sort by recency and when I need to upload something that I just did it's going to be right there generally speaking I think folder systems and file systems are poorly architected and they're like an artifact of a previous way computers work that we just deal with now but downloads being the place where the thing I just did goes and sorting it by recent has been a game Cher for my organization because I don't have to think about it anymore the thing I need is right there and I'm just going to search forward and find her anyways and I see a lot of people in chat agreeing with with me I use downloads as the only place I put anything yes think the fact that it was first res over a year ago not resolved is the worse yep absolutely having a lot of things in downloads folder doesn't seem unusual and it doesn't seem rare somebody just dropped they have 18, 375 folders in their download directory 130,000 files over a terabyte of stuff it's not that uncommon and the most important thing is where do those users fall because even if it is as he said 0.1% of users where do they fall in terms of Enthusiast levels if that .1% are the most DieHard Arc users or in this case or some of your biggest promoters like I am I don't care what percentage of the audience I represent I care how severe is my issue and how easy is it to fix the severity of this issue is relatively High the ease to fix is also relatively high it's very easy to fix this problem but it hasn't been fixed and now that he's thinking about the team differently it doesn't surprise me and that's sad it's really sad to think that I as one of the biggest promoters of Arc and one of the people that has really fell in love with this browser that their response to my actual genuine fears which came from being pwned off to membership support result in this and I'm not super excited for what's coming next either I did manage to download it it was on browse withth 10.com I don't know what it is yet I downloaded it and when I downloaded it by the way it went to my downloads folder so I had to open up finder to click it otherwise my computer would lag I opened it it opened a DMG named Arc the DMG name the dismounted name when you tried to install their new browser that they claim isn't actually them is Arc it's clear they're semi forking internally to build this new browser this wouldn't have happened otherwise and browser. apppp I installed but very sadly was unable to sign up if I just do fake at gmail.com and click create pre-sign up failed with error error occurred while trying to sign up blam a verification they don't want me using right now the fact that it leaked and people have been finding it it is what it is but this to me says they are trying to Fork Arc into something new and Arc as we know it will be poorly if at all maintained because this is either internally Arc is now this other thing or they forked it internally and the old repo is going to die there's very few other paths I could see for this and if I'm wrong it's not my responsibility to figure that out it's theirs to clarify chat just cleared up for me that the weird browse with 10 thing is actually known and they've clarified a few hours ago very convenient timing what it was it was an internal attempt to make a really minimal beta of a different way of browsing it wasn't meant to be the actual new browser it was meant to be a way for them to try something different it was obviously built on top of Arc because their goal was to like Rush this out and get it tested as quickly as possible to validate these new ideas as I say here it was a temporary experimental prototype it was a beta testing program that has been closed and now they're going to take what they learned and they're going to go build something new with it cool happy they were public about this and there's also good call outs here why did it seem like it was being marketed they went ham making it like a fake real product like the the whole website and everything it's I think this is overkill I I think that they they like to treat everything like it's a bigger deal than it is including like an experiment like this getting a whole fancy marketing site and video and everything is just it's how they are they try to appify everything even their experiments which good for them cool also of note the person who left all these comments isn't an employee they're a community mod this is what they know having chatted with them and use these things this isn't an employee officially saying these things which is worth noting and honestly what would have been really nice here and my advice to them going forward is take advantage of the fact that people like me exist there's a lot of companies and a lot of teams that buildt a lot of things that I talk about in my content most of them have learned how easy it is to hit me up and ask about a thing they're going to do I regular get requests from companies that are surprisingly big asking me usually under NDA to take a look at what they're doing and give them an idea of what that roll out is going to look like I know it's scary because I'm this weird in between of like an Enthusiast and a promoter as well as a journalist and reporter and the expectation is I'm going to leak everything I've never violated NDA in my goddamn life I'm really good about this it's important to me and if they had hit me up ahead of time and said hey we're thinking about announcing this change any thoughts I could have helped them better communicate how this is running internally but since they don't do that they don't ask for help with how things are communicated they ask for polls on which features should be deprecated it feels very one way it feels like we as Arc users are being told by the ark team and by browser company what we should and shouldn't think and what we should and shouldn't do and here I'm being very explicitly told that I am the problem and that sucks I don't know what else to say I just hope they listen I do genuinely hope they take the opportunity to reflect on this help the community understand what's actually going to happen and let us know sincerely is there a future for Arc or not there are other browsers I teased Zen earlier that are open- Source freely available and still being meaningfully maintained but they're nowhere near as ready as Arc is and I'm not ready to leave it behind yet and honestly the way I'm feeling now is that I'm more invested in the success of Ark than they are and that shouldn't be the case I really hope I'm wrong here I do genuinely hope so and if I have a good conversation with Josh I will certainly do a follow-up video but for now I'm just sad and if if you jumped on Arc because of me and now you're feeling sad too I'll say the thing they won't I'm sorry until next time peace nerds




## My hot take on image formats - 20240902
oops I started more drama this time around image formats the reason I started this drama is because I defend webp if you've never seen a webp file before I don't know if you're actually online but in case you somehow haven't it's a new image file format that Google introduced long enough ago I shouldn't be calling it new anymore honestly it was made with the goal of doing a few things making images on the web smaller higher quality and allowing for transparency in places where you couldn't before because before webp you basically had two options the first was PNG which was lossless whatever you put in you get out and with a PNG you could have transparency so you can have pixels that aren't actually there so you can put an image on the bottom and have it overlaid and stuff like that transparency is really important and PNG supporting Alpha channels was huge your other option was jpeg which can be compressed massively so it's not going to be the exact same image that you exported from your program but it can be 10 plus times smaller but it also doesn't support transparency so there's a balance here pgs are really good quality and allow for transparency but they're massive or jpeg which doesn't allow for those things but is much much smaller webp was a fantastic solution cuz it fit right in the middle but people hate it because it doesn't work in all of the places that they want it to when they drag and drop it into word it doesn't show up properly if they try to send it as an email attachment it is a file instead of an image these types of things are real complaints and they make a lot of sense but the Alternatives I've seen people propose make none another way to look at this video isn't so much a rant about why I love webp rather this is a rant but why I hate av1 yes I'm going to come out and say it the avif standard is it is really really bad and we're going to break down why so let's get started before yall spam my goddamn comment section yes I've seen the two clicks fill up video it's pretty good but it misses a lot of important pieces that we need to discuss which is why we're going to break this all down and I'm afraid this is one of those videos where I'm going to have to make a chart on the top we're going to have the different image formats we'll have jpeg PNG SVG is going to be weird to put in here but I'll do my best webp avif which is the av1 image format and jpeg Excel and there's a lot of different things we have to think about as we talk about these so the first question does it support lossless PNG does SVG does but in a weird way webp Believe It or Not does also pretty sure avf does jpeg does not and I'm pretty sure Excel does not as well but now for more importantly compression so can you compress the image can you make it smaller this is going to be basically inversed where jpeg yes webp yes avf yes and jpeg XL yes but PNG and SVG cannot be compressed in any meaningful way now jxl does do lossless cool I was not sure if they had a quality 100 option that actually was lossless good to know next we have Alpha which is transparency as we mentioned before jpeg does not and thankfully basically everything else does so that's huge we don't have to worry about that as much anymore all modern formats support Alpha channels but here is where we get to start being spicy and people are going to start being mad and that's fine we're all mad sometimes it's usually about things we're wrong about so let's cover those things the next one greater than 90% browser support obviously jpeg has this obviously PNG has this thankfully SVG has this it wasn't easy to get there but we are there today however webp is there too can I use is a great resource for checking these types of things if we take a look at webp 96.1% of global users have a browser that supports webp so that's in a really good spot can I use for avf is also very close here if you want to use the av1 image format you can use that on almost every browser and it will work so we go back here put the check there but here is where things start to fall apart for jpeg XL there was a thing that two click said in this video that is so wrong that I'm surprised it made the cut he said that Chrome had support and they removed it no Chrome had experimental support under a feature flag and they never ended up shipping it and there are reasons for that that we will get to but Chrome did not support jpeg XL for real ever it was never like you could go to a page and have a JPEG XL but at the very least it was a feature you could enable the thing about jpeg XL is it is a relatively complex format and that's the thing we need to talk about with these different image formats how is jpeg different from jpeg XEL what makes this Excel the big difference with jpeg Excel is that it is a different compression method and the different compression method is more expensive CPU wise to work with so if you load a picture that's a PNG or a JPEG you basically get to go line by line in that picture and rasterize it to something that you're device can display with the rest of these formats it is not that simple the actual process of taking the data from the file turning that into actual pixel data and then rendering the pixels on your screen is significantly more complex svgs for example are a vector graphic so it's not actually saying these pixels are the ones to light up and SVG is saying here are the lines and here's what color they are and here are the shapes and here's what color they are and you have to take that data it's almost like a description of what goes where and then your computer has to parse that and turn it into the right thing if you were to think of this almost like a cookbook the jpeg tells you exactly what to put where and when the PNG is even more specific and the SVG is like build this with roughly this amount pour it there it's telling you like what to put where where these are giving you like pre-cut portions for the exact things that you want to cook so it's significantly more work with the SVG but since it's a minimal set of instructions svgs can be much smaller if your thing can be described roughly with lines and shapes but if it's like an actual picture with details and lots of colors SVG Falls falls apart fast because SVG is describing the shapes of an image it's not actually just giving you pixel data but that also means you can scale it up and down you'll even see that in here I'm using a program that's largely SVG and Vector based so I can make this big or small and the amount of like pixels changes dynamically based on how big or small it is it always looks good specifically because it's a vector it's not pixels it's data of what goes where but that also means it takes more CPU power to process an SVG than it does a PNG especially because pgs and jpegs tend to have Hardware accelerated paths where your device knows how to render these things particularly really quickly webp is an interesting one because it is more compressed and it does take more CPU to do things thankfully it's very well supported and there's even some Hardware acceleration for it but webp does cost more CPU wise so it's important to note that JPEG and PNG if you were rendering like 500 of these on a page the page would be faster if you rendered 500 aegs that if you rendered 500 webp images but the amount of data you have to download to open the page will be way smaller with webp than it would be with these other formats and here's where things start to fall apart both the AV image format and jpeg XL require a disproportionately large amount of CPU power to parse them because their goal is to make it possible to render a big image with as little data as possible and if you compress things as heavily as these compress them the amount of power it takes to get that data and turn it into an actual image is higher and jpeg XL in particular it's kind of weird with this if you want to learn more about how image encoding Works to actually see how we generate images and specifically how pngs work I have a video I did a while back 67 bytes the smallest possible PNG I loved this video it kind of bombed but I think it's a great reference if you want to better understand how pgs and other image formats actually work this is the jpeg XL Art Gallery this is images people made with jic Exel that effectively abuse the format this image which admittedly looks really nice is only 218 bytes because jpic XL Can it can compress in such absurd ways that it's unbelievable but just think about this logically from 218 bytes how do you go from those bites to this image and the answer is with a lot of CPU power in order to turn each of one of those bites into the right data it's also worth noting that if you go to this link in any browser other than Ari I'm going to use ARC which is Chromebase is what I'm normally using none of these render because the only browser that actually supports jpeg XL is Safari even Firefox doesn't support it it is only Safari that supports jpeg XL right now power sub of JPEG webp and a1f I'm actually or avf I'm actually quite curious here webp had the lowest energy consumption avif had the highest energy consumption and jpeg close to webp very interesting so I might have even been slightly wrong when I was was talking earlier it appears that webp is comparable to jpeg for energy consumption but webp was the best it's a very efficient format both in terms of the size of the file but also the amount of processing it takes to process one of those files where avif in JP Excel tend to be a lot heavier CPU wise but we go back to the arc because some of these are crazy also notice some of these aren't rendering this one's 34 bytes and it just straight up won't render if I download the image I might be able to open that in Affinity Affinity is pretty good with image format support so I've been pretty lucky with being able to like use it for stuff like this cool it works in here but again here's the problem with jpeg XL it is a weird format that allows for a lot of different hacks to make things super performant like this image is 2048x 2048 that's a lot of pixels and the file for it is only 34 bytes that's insane that's really cool but you don't go from 34 bytes to an image like this that's that many pi pixs without doing some crazy math and that math takes CPU power and it's also very sensitive to the way you implement the algorithm because if you don't get it exactly right you're it ends up in some ways working a lot like SVG where you're describing patterns and then they'll do their best to actually render the pattern it's crazy so let's make a new section here um Rex CPU or uh I'll say performant CPU wise cuz I want the checks to be good so most of these are going to stay the same but these new formats less so and I'll say SVG is mostly good but it's bad enough I'm going to put the X I almost wish I had done this like as like ranges instead of check or not check you get the point there is one more point I want to make because right now it seems like webp and avif are relatively neck and neck but the CPU performance here is notable but not enough to to just keep using this weird format especially with other things support it there's a couple other things we need to talk about support for there is I'll say General software support the harsh reality here is that the only things I can honestly say have General software support are pngs and jpegs everything else is much iier I would say that both SVG and webp are like 50/50 I'm going to start marking that I'll just make it like this yellow line of like close so yellow line means close but I can't in good faith say it and then both JP XL and avf no they just don't they're not there yet I would love for them to be but they are not but there's one last piece that I think is very important for us to talk about in this one to two clicks credit he does cover a bit but I wish it was covered more often it's Progressive loading we've all seen this before where it loads 25% and as you wait for it to load it comes in like one row at a time that's because of how the format works when you're loading the data is loading it in one effectively a row of pixels at a time for jpeg jpeg versus jpeg XL versus avf let this whole thing play Phase I want them to feel the pain of watching these load in we're almost at that yep cool we just hit the 627 kilobyte Mark and then the whole avf image comes in sequential jpeg still loading the progressive one enhances as it gets more data the thing I want you guys to note though is that the jpeg XL always has the right colors but the pixel density is off so the magic of jpeg XL the thing that makes the format magical see how blurry it is right now now they've effectively allowed in the JP XL format for you to have how do I put this instead of when you read chunk by chunk it has all the pixels for the first row then the second row then the third row it has the first chunk be a pixel for every part of the image it's not the whole 10 or 100 pixel chunk it's just one pixel at a time from each section so if you have like imagine we have grids of 10 pixels like 10 x 10 chunks across the image the jpic Excel format will let you load one one pixel from each chunk initially then load four pixels from each chunk then load the whole chunk and that means you can get a blurry lowr version of the image immediately and then it scales up the resolution as it continues to load that's awesome that's a really cool thing the format allows but it's also significantly more complex CPU wise so it comes at a cost and yes I know my face is covering but it's covering the top part which doesn't matter pay attention to the bottom part look at how this starts where the progressive jpeg comes in black and white initially this snaps in and it looks like it just stays there but see how blurry this picture is right now it gets less blurry as we go and that's the magic of the new jpeg XL format is how it allows for that is there a version this is webp ah here we go wait know this is Generations this is regenerating the image to see how loss you gets by the end like how much data do we lose if we keep re encoding the image over and over which is also of note if you if you generate a webp from a webp and you do that over and over and over again you lose data as you do with jpeg jpeg XL and avif you'll still lose data like you'll see the color goes to on them but you lose a lot less because the compression is better yeah J XL offers really cool things here like the fact that with jpic Excel you can specify which parts of the image to load also see that this is on the Google Blog Google doesn't have some evil like conspiracy to kill J XL which is what a lot of people including two clicks have implied and I really want to jump on that because Google doesn't hate JP XL they're not some evil company trying to promote their proprietary format no all these are open formats all of these are Open Standards Google's goal here is very explicit and obvious they're trying to make it so images load better and faster on the web but they have learned a lot about the CPU cost as I was seeing when I was looking through the web piece stuff here they don't support Progressive or interlace decoding in the same way JPEG and PNG do because it's likely to put too much pressure on the CPU and memory of the decoding client as each refresh event involves a full pass through the decompression system in the advanced decoding API section here they specify that how this will affect memory usage because they've done a lot of work on that I'm not going to sit here and pretend that Google doesn't prefer webp but it's not cuz they invented it and they want it to be successful it's because of the CPU performance they care a lot about the performance of devices that aren't really new because believe it or not a lot of Android phones in fact the majority of Android phones are running processors from 6 years ago so if we move to these new form formats that are specifically meant to benefit people who live in places where they're using 3G and they're on a crappy old phone if the goal is to make it so they load less data we should do it in a way where their CPU doesn't get destroyed as well and if we were to move to jpeg Excel the amount of additional performance hit those devices would take just to decode the images is massive enough that it would not work out the people who benefit from having to send less data also have CPUs so we have to find a delicate balance here we need a way to send users images that don't require as much bandwidth without them having to use a bunch of CPU to make up for the difference and webp was invented to be this balance when you look through guides about webp when you look at Google's information about webp you'll see the word CPU come up a ton because they care so much about the performance as they call out here they offer incremental decoding because it saves memory CPU and repaint efforts on the client the word CPU appears on this one random page five times because they talk about it a lot they care webp takes less time to decode in the presence of seeking in blink scrolling or changing tabs can and show images results in animations being paused and then skipped forward to a different point excessive CPU usage that results in animations dropping frames can also require the decoder to seek forward in the animation in these scenarios animated webp takes 0.57 X as much total decode time as GIF resulting in less Jank during scrolling and faster recovery for CPU utilization spikes that's huge a lot of the effort here is specifically to make performance as good as possible the important thing to know about avif is that it is based on the video form and if you know anything about video formats you should probably know that their goal is to save on color space as much as possible because if you have individual frames like if you have a 30 frame per second video and you're encoding every color on every single frame the amount of data that you're going to have to deal with there is just unbelievable it's impossible to work with and the goal of the av1 standard is to make it so you can encode video really really efficiently but it cares more about the encoding between frames than it cares about saving data in the first frame in the AV image format that we're talking about here avif it doesn't get a lot of the benefits of compression per frame because the focus of av1 is having each frame progressively save more and more data so you end up with files that tend to be much bigger and color spaces that tend to be much worse so you don't get as good of an image out of this and it also tends to be bigger it's a lot closer to webp than JP XL in terms of the power of the format but it's also way worse supported so if I go back to my diagram here the avif and JP XL are just up not supported by basically anything like no software supports these just cuz jpeg XL sounds like jpeg doesn't mean it magically Works in it doesn't work in browsers it doesn't work CPU wise because it's just so much like lifting to do and the general software support is garbage there is very little software that can parse a JPEG XL and there's a decent bit that can parse a webp we're just not there with that format and I don't know if we ever will be because if you were to switch your website to JP XL it would load slower because of the CPU costs this is from web.dev because Google is now pushing avif which is surprising to me CU I know it's not the most ideal format but I'm curious what they have to say an open royalty-free image format it's based on the av1 video codc standardized by the alliance for open media yep yep yep cool Chrome alone avif usage is grown approximately 1% in a little over a year after Chrome added support for it yeah mjx reports 60% file size savings compared to JPEG and 35% compared to webp so it is more efficient in terms of the space than webp that's not a huge jump especially coming from the 60 from jpeg also when you consider how much bigger pgs than a JPEG that is a big number but the 35% from webp is not that big a deal these file size savings lead to significant storage savings but also help Pages load faster yielding faster lcps Etc having smaller images makes the web feel much better that all lines up so this image is how big are each of the files compared to an old school turbo jpeg mozilla's customization for jpeg gets a lot smaller and web is similar J XL decent bit smaller but not that much smaller and then avif is way smaller it's it's also important to know that if there was a PNG here it probably be 2x the size if not more depending on the image of course this is about quality no this is the file size percentage of Turbo jpeg so this is for similar quality an avif file is a bit over 25% closer to like 35% of a turbo jpeg image that's what this says very useful the chart below here this is how much effort it takes to encode a given image and this is where webp kind of sucks for best quality but there's a reason for that because webp at best quality is a lossless encoding this is a very interesting chart higher is better this is the number of megapixels that can be rendered per second on whatever their test machine was since the best quality for avif and JP XL isn't lossless but it's as close as it can get it has to put a lot more effort into making each pixel or megapixel as close to correct as possible since webp can actually be lossless because webp has a lossless option it can just spit out the lossless version and generate much faster the JP XL version is apparently lossless but their encoding methods are so insane with JP XL that it takes a lot more work to encode it if you compare that to the fast version of any of these or just jpeg in general tends to be much faster but this encoding cost doesn't matter too much because this cost isn't how much the user has to wait to see the image this is when we go from a PNG to a compressed image on our servers how much power does it take to do that and thankfully because of the effort that was put in on a lot of these encoders this isn't too bad so if you want this to go faster you just spin up a faster server the thing that matters more is the decoding cost CU that's what the user feels I can't just buy the user a faster processor or a faster internet connection but I can increase the power of my server to make these images more efficiently there's a great article by Jake archal here that he released when avif became a real standard comparing and contrasting it with other Solutions here we have a JPEG that's 81 kiloby we have a lossless webp which is is more than twice as much but I don't know how much this will come through in the video there's a massive difference here where the webp version just much sharper and clearer the jpeg one is immediately real blocky and foggy like instantaneously so the lossy webp looks very similar to the jpeg actually looks a little bit better it's less blurry and noisy but it still has that like blur to it but it's 26 kiloby it's almost a four the size of the JPEG and it looks better at these really small sizes webp is phenomenal and the avif looks very very similar to the webp and yes it is half the size but they're so close when you're talking about numbers that small that it doesn't matter that much the cut to 1/4 the size of jpeg is great another half cut is much less big a deal and I know it's like where there's a better option why don't we click it why don't we use that it's better because it's newer it has less support it doesn't have some of the benefits of webp here's another fun example this one's fun cuz they're all said to be the same image size so if we look at the jpeg which is 12.3 KOB everything's a blurry mess especially where there's multiple colors See like the red block and the Yellow Block is doing its best to minimize how much color data it has to keep track of if we switch this to webp the colors get significantly better immediately the jpeg has all the weird blockiness with the colors the webp way more even coloring the shadowing a little bit blocky still but everything else looks so much better and even then the Shadows look way better than they do in the jpeg where it's like a line and like bad jaggedy edges I hope this comes through in the video but man the difference here is absurd now we look at avif it is again a pretty solid sharpness win I'm actually surprised the gap between the webp and the avif here is as big as it is this looks significantly better at that size Target at these sizes jpeg has done its own art and the webp looks blocky and messy but that's because we targeted a specific size rather than targeting a quality level this is the comparison I knew I saw it I knew I had this comparison somewhere yeah but here you can also see the benefits of the jpeg Progressive decoding where it loads way faster but it's blurrier and you can't even see how blurry it is it starts black and white and then the color comes in very blocky still the web piece slowly starts to load in but it's full quality load in the avif comes fast but it's all at once it pops in immediately and the jpeg slowly increases its quality over time really good comparison I've prob I found this the jpeg is still technically loading it just it's blurry up until that point the above shows a high resolution image 2000 by 1178 high quality image loading at 2G speeds the jpeg is 249 KOB the web piece 153 and the AV is 96 although they're all loading at the same rate the much larger jpeg feels faster because of how it renders in multiple passes that's the other thing this is why the CPU cost is so big with jpeg stuff is it has to render each image multiple times it renders it once in black and white then it renders it with more of the data and then it keeps rendering over and over it's also why jpeg XL if you're using the progressive features is much heavier as well as he says here avif feels better suited to smaller quick loading images but that still covers most images on the web maybe this could be solved if the format could provide a way to embed a preview version of the image I love that idea blur hases are a really cool pattern I wish was easier to use the goal of a blur hash is to take an image and represent the image with as little data as possible in this blurry way so you take one of these images like this picture here the blur has spits out as this tiny little string and then you can render this blurry version as the rest of the image loads in which just looks much better overall so we have the full avif looks great half resolution low quality looks awful but if we blur it it actually looks fine so if we start with this blurred version that's 3 kilobytes and then load the full version later that's a good workflow but you have to do that by hand adding 5 Kobes to a big image like this seems worth it to get lowquality early render here's what this would look like with the different formats you get the blurry immediately and then it gets sharp and the webp is still loading this makes webp look like I get that fair whatever yeah but the big thing with avf is that the encoding is very expensive it's especially bad in squoosh because they're using web assembly which doesn't let you use s IMD or multiple threads yeah if you're trying to encode avif in the browser you're kind of at an effort of two it takes seconds to encode effort three is significantly better but it takes a couple of minutes effort 10 which is what he used for the images in this article can take up to 10 minutes to encode a single image that's insane thankfully you can install the command line tools which are orders of magnitude faster very useful also IA mentioned this earlier Jake archal used to work at Google and he helped build squoosh which is the image like form formatting tool that is used to test a lot of these new formats as he says the difference between webp and avfs are not that big so it might not be worth creating an avif but some of the things he saw here with the decoding progressively are actually really impressive and you know what I'm getting convinced too I think avif is a much more logical Direction and the jpeg XL just isn't ready my own mind is starting to change as I read this I know we all hate Hacker News but this reply here was actually really good and I wanted to use it as a reference point jpeg XL and avif have trade-offs avif works extremely well compressing images down to very small sizes with minimal losses in quality but it loses comparatively to jpeg XL when it comes to compression at high quality so if you want a high res image JPEG XL does that really well again if we look at this image here 2048 X 2048 and it's what how many bytes was this one 34 bytes for 2048 x48 image that's just unfathomable four pixels at 34 bytes is hard to comprehend so if you want highres JP XL is great if you don't care as much avf is great but also AV has an upper limit on canvas size yeah so jpeg doesn't give a OG jpegs can become jpeg excels which is nice and fun but the important piece here I really like this breakdown webp fills the PNG role while providing better lossless compression specifically with the transparency and lossless while still being compressed avif fills the jpeg rooll for most standard web content and theoretically jpeg XL could be used to migrate all JPEG files and also get the benit benefit of JP XL or EV image format without lossy compression and also JP XL can be used for very high fidelity images this is a fun one cuz this is something I I wanted to bring up before didn't have a good place to you know that shitty friend AI that everybody lik to make fun of the weird AI pin I'm curious if they fix it I give them a lot of for it yes they haven't yes this whole page is a single giant JPEG that isn't actually a JPEG if I save this here's the FF probe results the interesting thing here see that PNG pipe this picture is a PNG they labeled it as a JPEG but we see here as well this is a PNG they renamed a PNG file to jot JPEG and just uploaded it like that's normal and fine and now you're rendering this 6.6 megabyte image as most of the page and if you have a slow internet connection which I'll fake here with a 3G button you'll see how miserable site is it's loading right now so you're seeing the old version so this is the actual load experience great website wonderful experience 10 out of 10 you should definitely buy one of these pins because the website has a 6.6 megabyte image as most of the content I hate this I'm not going to sit here and watch the whole thing hopefully you get the idea if you don't have a gigabit internet connection which most of the world doesn't these giant formats don't work but I guarantee if I just quickly made that a JPEG XL let's find a converter for it even just a standard jpeg if they didn't use a PNG we were willing to compromize on quality enough would be down to significantly smaller and if you look at the difference here it's not notable and the website could instead of loading very very slowly it could load literally immediately like the even if we didn't want to compromise on quality even if we bump that up we're down now down to two Megs 70% smaller we were willing to com any amount even just like 80% quality 164 kiloby for the jpeg XL you just use a normal jpeg format or like webp we'll do webp 101 kilobytes you understand the difference here that means the web page will take 160th the amount of time to load 160th that's insane using these gigantic lossless images is just bad for the web and bad for users thankfully just to to Showcase that you don't even need to go all in on these things even just a standard boring old jpeg with 90% quality here which would be comparable to the Quality levels we'd be getting from this other formats 860 kilobytes tiny I want to go back to this for a second because I do want to say one thing that makes me sad I love the progressive decoding features that are built into JP XL the idea of not having to provide different versions of an image one that's really low res and one that's really high res instead you just fetch as much data as you need on the client to render the right resolution for that client I can show you a low reses version as the quality increases it would be great if more of the web worked this way but if it comes at a huge CPU cost it's not worth it which is why I have become relatively bearish on the adoption of jpeg Excel because the only real benefit of it is the ability to enhance images as they load in and to get slightly better compression on massive versions of images that is awesome but it's not awesome enough to to support yet another format so this image here is the Battle of the Codex this was from cloud Nary CU they care a lot about images and this shows all the different standards and what benefits and negatives they have JP XL here clearly has the best compression regardless of your Fidelity PNG has no compression really and they only offer High Fidelity and lossless so that makes sense here and you see they're rating the compression overall they're saying webp is half as good as JPEG here specifically jpeg XL I don't think that's fair I think webp offers meaningful improvements over JPEG and this is a bit of a reach anyways compression for other images webp is better here for things that are lossy and not photographic and also the opportunity to have things like Alpha transparency is really nice too with webp as we go further down the encode and decode speeds are important pieces they're claiming jpeg Excel decodes really well I haven't seen proof either way there I would love for demos to make that reproducible but as we see here web P decoding is very fast but it's also not parallelizable unlike jpeg decoding or is that for encoding I think only encoding can be parallelized anyways but yeah they're saying jpeg Excel hand all that really well maximum image Dimensions this is a fun one as I mentioned before with avif very limited you can only have images up to a certain size which is terrifying once we get into color spaces and lossy versions of them things get a bit more complex webp doesn't support that which is kind of news to me but checks out for how the format works s hgic also doesn't which is weird that's app you think they'd be really into those types of things but the new formats like avif and JP XL do support it wide gamut HDR I think webp and jpeg are the only things that don't support wide gamut HDR stuff annoying but makes sense and the maximum number of channels weird thing to include there and Now features here's where things get fun basically everything supports animations other than JPEG and jpeg 2000 apng is not a real format I don't think it's fair to include that here apng is  Progressive decoding the only things to get four stars here are jpeg 2000 and jpeg Excel because those have really good decoding behaviors nothing else does alpha transparency everything but OG jpeg I didn't know jpeg 2000 has Alpha that's news to me you learn more every day depth maps not super important but cool they support them overlays very weird but I guess cool authoring workflow suitability not sure what they mean by that uh generation loss resilience that's a fun one that's like you know the the classic if you save a JPEG 100 times the format gets terrible do I look like I know what a JPEG is where it's been jpeg saved over and over again Classic XL handles that well at least better than other things do but none of these handle resilience to loss particularly great and the only thing that does the recompression is XL of note is that hgic has a royalty when everything else is royaltyfree you're to pay a license fee for HC which is why I didn't include it in my other comparisons because I don't think you have to pay to encode an image I think that's stupid all the rest are royaltyfree this is a great image breaking things down I liked my chart more but this is a good one thank you dark swordsman for dropping this one of my replies webp is relatively well supported it works in almost every program that I use it works great but this tweet went super viral almost 20K likes because this format pisses people off because if they save an image from Google and it's a webp and they try to use that image in another program like word and it doesn't function they blame the format but the reality is that the image format is supported by a lot of things but its goal isn't to be saved and used in other programs its goal is to be loaded as fast as possible which is why I made my tweet which is that web piece way smaller it supports transparency it works in every browser other than Internet Explorer Internet Explorer the browser that has 6% market share now works in everything else and it's also trivial to convert to other formats I also Dro My Hot take and I I might die on the hill that more browsers should do this when you save one of these new image formats it should just by default save a JPEG or a PNG just do the conversion on the user's device so they don't about these things and if you want to be one of those users that has things working in that way I will link a Chrome extension I was actually going to go build or do an iteration on this but if you don't want to wait for me which I totally understand you can use the save image as type Chrome extension where you can right click an image and choose what format it saves as so if you do want to use an image in a format that works for everything once you've saved it just save it as a PNG you don't need to use webp just cuz that's what the file was originally on the internet when you load the page you're going to be a webp and then later on you can grab the PNG when you actually want to save it and do something with it that's totally fine and I agree once you're saving the image files webp can be a little Annoying to work with but when you're going to the web page in the first place it loads significantly faster because of webp there's a really dumb reply here yeah 99% of people would not hate the thing if they never had to use it it loaded on the page they're using it most of the like most of the time you're looking at images on the web you're not saving them you're just using the web but as crapo here said the browser is using it then not the person that reply I I'm not going to sit here Linger on it I hope you guys can understand how dumb that repli is without me having to explain it to you piece by piece let's finish this chart up fast JP has Progressive loading but kind of it's not good Progressive loading what we're going to do here for these is we're going to do check x x x all of these don't evf doesn't I'm going to do two checks for jpeg because it's the only or jpeg EXL it's the only one that has like really good stuff for Progressive loading yeah hopefully this helps emphasize why I think the way I think about image formats and why generally speaking I tend to go with webp I think webp has struck a really awesome compromise here where from the amount of compression it gets which is much better than JPEG to the amount of CPU cost it takes to render it it's almost none to General software support which is admittedly not as good as JPEG but it's better than most things and it supports Alpha channels and it supports animations and it supports all these other things basically everything other than Progressive loading and decoding webp represents a phenomenal compromise and that's why it is still the image format I personally choose if you're a developer and you actually want to make your images render properly right now my recommendation is still using something like next image like the image component and optimizing through services like forell cloud andary or any of the other options but make sure you're subscribed because I have some fun things coming there I've kind of been on an image Bender for like a month now and I'm building some cool stuff so make sure you're subbed make sure you stay tuned because I want to make these things easier both for developers and for users and until next time peace nerds




## My new app is here. It's really fast. - 20250111
I just dropped a new app that I'm really proud of yes it's an AI app but hear me out the AI is not what makes this interesting at all we just launched T3 chat and it is the fastest AI chat app you've ever used if not the fastest app you've ever used you can take my word for it or I'll just ask my chat hey people who have used it how fast is it fast very fast it's so Snappy it's pretty fast considering it's just Mark typing back to us this is so fast that the first time I clicked on new chat I thought it was bugged I didn't realize the page was already too used to chat GPT that takes a minute I guess there's a lot of reasons why it's so fast there's a lot of things that I'm really proud of normally this is where you would get your sponsor spot but we're not doing one today because I'm here to show what I built and before we go any further it is free to use the pro tier is eight bucks a month it's just for higher message limits right now so don't pay for it until you hit those in the future we're going to add a whole lot more fun awesome features for that paid tier but for now try out the free tier see how you feel and please try it I think you'll be surprised when you see just how fast it is like I'm clicking I'm going to tell it generate a solution to Advent of code 2021 day I don't know let's pick a number eight in Rust and typescript don't want anyone feeling left out you know and this is real time this isn't edited to be faster this is just how fast it goes and while it streams in you can hop to different threads and it all works and it's all local first so I could turn off my Wi-Fi and still be able to navigate do things and as soon as I finish working on search even search across your message history I'm really really proud of what we made here the data architecture and the application architecture is unlike anything I've built it's almost funny that we named it T3 chat because this is the furthest from the T3 stack I ventured in a while larel has been really helpful and no I'm joking larl is great but it has nothing to do with what I built Here Local first apps are their own crazy thing to build and I still can't believe we pulled this off in 5 days especially considering the number of different things I had to invent to make it happen sorry for the interruption it's currently like give or take around 2 a.m. I've been working all day I had to fix some stripe bugs so cool video about that coming out soon but I want to show you guys an awesome feature a lot of people were asking for after seeing over a 100,000 messages sent in the first 12 hours before the video was even out it was clear what yall wanted you guys wanted model selection and we decided to give it to you and we're not charging any more money for it so it's still eight bucks a month for 500 messages every 7even days I'll probably change the ounts at some point you'll get an email and everything letting you know when we do but I didn't want to lock all of this behind us trying to guess and get a perfect pricing model I'll EAD a bit of cost if that's what it takes for us to figure out what is and isn't right I just want youall to have the best time using the fastest chat app ever I'm Blown Away with the reception so far and I'm so excited to see what everybody does now that this video is uh hopefully out in the next hour or so wish me luck I got to go edit and sleep but yeah thank you all so much for the support I had no idea this was going to be received as well as it has been I'm feeling really good and I hope you all enjoy it ah bedtime I've been sharing some Snippets of the crazy things we're doing in this project for a bit now I'm going to share my personal favorite which is my static app shell this is a route that resolves my app because I as much as I love nextjs knew that it was not going to help me with the entirely client side everything that I wanted to do I didn't want to rely on the server at all other than when you're receiving a streamed message from an llm so as long as you're not getting a response you don't need to be online at all and you're not connecting to our servers the front end app is a react router app I've basically brute forced nextjs into letting me build the mini remix react router app in it there are still some routes that are built in more traditional ways with NEX that things like our terms of service privacy policy and the offlow that's all using standard xjs server component stuff but the core app is react because I wanted something entirely client side and the whole app doesn't even render when you do the server pass you'll see here I import this with SSR false because I want the whole thing to be on client I don't want to wait on the server ever I got the blessing from versell at least a couple people there who thought that this was surprisingly cool and I know they're working on making things better for those of us who want to do spas and really client heavy apps in next but for now I DIY it I'm really happy if you're curious how this works I have my rewrite here in my next config that redirects all paths that aren't resolved some other way over to the static app shell and now everything is that static page that's far from the only thing we did to make this good though I have been deep in this wonderful weird obscure forgotten Library named dexi dexi is a minimal wrapper on top of indexdb which is a browser standard for storing a ton of data inside of your browser itself the actual API for index DB is is garbage I'm not going to pretend otherwise it is it's really bad so we needed this to be the layer on top in order to actually be able to use it they have their own dexi cloud syn layer product thing that I started looking into but I wanted something different so I ended up building my own we have our own syn layer it's a bit complex and if I go into the details now by the time the video's out I might have already changed them so I'm not going to but know that we are hacking the hell out of dexi in order to make this syn layer experience work well also doing some cool stuff where I combine local storage data fetching and caching so everything's as responsive as possible like your off state is currently stored locally not as the only source of truth but as a backup so you don't have to wait for the server to tell you what things are there are no loading states there are just stale States so if you were to subscribe but you had this open in another tab it would just say free even though it should be Pro and when you do something else it'll upgrade itself to Pro there are so many of these things I did throughout the app from on Mouse down being the way you navigate with my custom link component to prefetching everything that could ever happen to abusing the react compiler and memoization I actually got some help from Aiden the person who made million lint and million JS the god of react performance who's been doing all the crazy demos of react scan and showing how slow these react sites are he collabed with us a bit to make sure we could get the rendering as fast as possible I have been using this since we had an early prototype 4 days ago as my only chat app and I couldn't be happier with my experience using it and that's why we built it when you go to something like CLA for example if I go in here and I click uh this embedding markdown content and next wonder why I was looking that up you get a loading spinner go to something else loading spinner it's super slow to navigate when you send a message if I say uh tell me something cool about rust still waiting now we're starting to get it it's just it's a fundamental difference in experience between what we built with T3 chat and what I've experienced in every other one of these apps as someone who uses them a lot it's been a really nice change got a really good question from YouTube chat I wanted to talk about quick what if llm vendors just improve their existing chats is my entire product just dead yes most of the products I build are built in a way where if the competition was to wake up and do things right the product would be dead if Zoom was to realize that streaming is a thing and make it easier to to include a zoom person inside of OBS ping dies immediately hell twitch tried to do this with the twitch guest star product and failed the reality is that if the companies were capable of doing these things they probably would have already done them and as much as I like to think my push building better things will get them to it usually gets them to try and it's very rare that they succeed I've watched many products try to copy what we did with ping upload thing web hook thing marker thing pick thing and I'm expecting people to try and copy with T3 chat as well that would be great straight up if somebody makes a better chat with more features that is just as good an experience as what we have here I'll probably subscribe and use it I didn't build this because I want to be the only person with a chat app everyone uses I built it because I wanted a better chat app and if people like it a lot awesome I'm super hyped and if they don't or something else better comes out still awesome I spent five days on this so far I'm really proud of what we built and if the result is someone else making something better that's good too but I think the chat gbt team's a little too busy rewriting their next app and remix to catch up to the crazy stuff that we're doing over here I know some of y'all are disappointed this is Theo going down the AI pipe we didn't do anything interesting with the AI here what's interesting is the experience we built around it I'm trying to take my expertise in building really good really performant applications in a local first way for the web and apply it to make other apps that deserve this type of treatment feel better Chad is saying that this is pure ux absolutely the goal here is to make make the user experience as good as possible not because those 5 Seconds matter a whole lot but because the actual experience matters a lot you should feel good when you're going around these apps navigating and doing things it's been a great experience for me and I hope it is for you guys as well and if it's not let me know we want to fix it we have a ton of awesome features planned that I'm really excited about the one I'm personally most hyped for is the dedicated desktop app I'm tired of having my AI chats be a random Tab and Arc the same way I'm tired of having my Dev mode be a random Tab and Arc I want the things I use the most to all have their own space here so we'll absolutely have a T3 chat app with a lot of cool new things like Hut keys and other behaviors in the near future obviously we want to have file uploads something like projects with context local for search I'm really hyped about too one of the ones I haven't seen anyone else do branching chat why I want to be able to take from here up and make a new chat for that but the goal initially was to make something that feels as good as apps that I already love to use things like superum and linear that our local first apps that feel great when you're spending a ton of time inside of them this Tech isn't worth it most of the time building this way isn't great when you have an app that's really heavy on server side work but when you have an app like this where I just want to navigate click around and do things I don't need the server very often I found that building this way is really really awesome one last thing is I almost forgot we now have a T3 chat channel in my Discord if you want to give feedback about how things are working for you issues you have and we'll do our best to monitor for this and keep track of everything we can but if you have problems come here somebody's probably already had the problem and if not we should know about it so we can fix things we want to be really receptive to the community and the people using this I have the features I want to prioritize but I will immediately delay any of them if yall have things you need more we really want to be as community-driven as possible with this project I want to have the best AI chat app ever and that's not just going to be building the exact thing I want that's going to come from every one of you guys using it telling us what works telling us what doesn't continuing to build and iterate on top of it that's I have go flame me for being an AI bro now but at least give the app a shot if you can I'm really proud of what we built and I'm curious what y'all think about it until next time peace nerds




## NEW FRAMEWORK Makes Remix And NextJS Feel Slow__ Fresh by Deno is FAST - 20220702
let's talk about fresh the next generation web framework the to understand fresh first one must understand dino the goal of dino was fixing the problems that the creator of node.js had with node.js in particular the package management the build ecosystem nodejib and the lack of core typescript support and dino makes it very easy to write type in your terminal dino run typescript file and then it runs the typescript file for you no more compiler no more builder no more crazy bundle chaos you run a typescript file and it runs if that typescript file needs packages it imports them from urls and from those urls it fetches whatever it needs and loads that in your runtime just like the browser if you want to import a script in the browser you can add a script tag from some other url and it will pull that javascript into your browser and into your runtime node forced you to npm install packages and that significant departure from how the browser works is something that ryan doll has regretted since he made that departure npm is super important and makes our lives as web devs a lot easier overall but it does make a lot of simple workflows more complex like why do you have to go through five steps to load a simple javascript function from another like code base or another file what if i just paste the url import squared from github.com theobr squared.ts and then i can paste that url in my codebase and start using that package directly because of all that there is no build step you write typescript and then you run it and it runs so dino is an alternative runtime for node.js they've also been working on a new versaill-like deployment environment called dino deploy where you can run your dino code on their distributed it's not an edge network it's a bunch of containers that start up really fast that are ready to go to run your dino code for you their architecture's pretty fast really impressed with the performance that i've been getting playing with it august has made a really good point it's not an alternative runtime four node it's an alternative runtime two node both are built on top of v8 yeah dino is an alternative to node.js you use instead of node to run typescript and javascript code they have been trying to in a lot of ways reinvent a lot of the core things that we that we use every day in node.js like obviously things like the file system api but also packages like nexjs and their goal of moving towards towards an alternative ecosystem has been surprisingly effective they have built a lot of pieces that are in a a really good place i'm impressed with how fast they've moved actually emoji as this was from before dino was even dino yet it was still deno when i bought this thing i was an og supporter really excited to have the the node.js landscape challenged a little bit and i'm really hyped with what ryan's been doing here fresh is first off the acknowledgement that dino does not have a framework for building websites that is comparable to uh how'd i put it it's an admittance that you're not going to make node.js running or next js run in deno deno is a different enough runtime that it is unreasonable to expect a web framework written for next.js to run in deno because of that they've had to build their own new frameworks and because they're starting from scratch they made a really good choice which is keep it minimal as hell and as you can see from here most of the points here aren't things it does it's things it doesn't it doesn't have run time overhead it doesn't have a build step it doesn't have configuration and it doesn't have a build step for a compiler for typescript it just runs your typescript code there is a lot of things it by design doesn't have to keep it simple and i'm really impressed with the performance that i've been seeing with it the actual way it works like ergonomically feels like a hybrid of remix and astro in the sense that it's bring your own client-side framework like astro where you're expected to [Music] like if you want interactivity then bring in pre-act bring ins felt bring in the thing you want to do that with very astroy but its data loading patterns its routing strategies and its lack of templating system make it feel much more remixy where even in like the examples that it uses by default it's uh preact and jsx for the server and the client rendering i think it supports other things right now it might actually only support preact but it's by design meant to theoretically support other things as well so the syntax is interesting you have to at jsx h this is telling the um deno runtime that this file is using jsx and is using h to interpret that jsx h is a jsx runtime interpreter that does a pretty good job of performantly letting you write jsx in your code and ship the jsx but actually rip out like more traditional like javascript function calls at runtime uh preact does support uh i don't know if it supports like a a official jsx runtime but uh this jsx hook does it say what it's doing to keep it from having a build step i'm pretty sure that the code it is running is still this jsx on the server yeah they're doing weird things with this to not need a compiler but it works so far one of the more interesting things that i realized when i was playing with it let me just i have a project with this open let me i deno task start local host eight that's three thousand they picked eight thousand by default teach their own cool so this i'm doing a bunch of like metrics because i'm a nerd about data and we have the code open here the brightness up so i can see my screen cool so one of the things that really surprised me is how the render or how the uh routing works where it still has like a routes folder so if i make like high stream.tsx yoink this is the simpler one paste this kill all of the resources and all this crap i don't need it kill this too div i stream so when i make this new file what's really interesting is it actually changed fresh.gen.ts as well it generates a file that is the manifest and like patterns for actually loading from your routes next.js does something like this but it does it as a compile step so you never see this code not only does fresh not do this as a compile step and do it in front of your face it actually expects you to commit this as uh like build artifact and have this included in the build which is actually really cool because now when i'm code reviewing yeah sure i have like the folder structure i can see from there but this gives you a very deterministic what is actually happening in the code that you can like read in code review and see the specific behaviors that your file and folder placement have incurred on your code base let's play with this because there's some cool stuff here first we have this like basic counter components you all have seen one of these before let me quickly go to the high stream.ts page here's the high stream page so i have this counter component it's in the islands folder which is important we'll get 2y in a second so i'm going to put counter here no this is one of the things it doesn't have solved yet is imports still suck like auto imports i should say this is gonna need a number star equals five cool so now we have this counter six five whatever and i'm pretty sure it doesn't have to create a new island because this is still the same file but watch this if i copy counter and i paste this into components instead i'll do uh component i'll name this one and we're going to use this instead here start equals 10 so we can tell the difference between them and duplicate this this one doesn't work why does this one work and this one doesn't the reason is because anything that isn't in islands never gets to the user only island exports js components just runs on the server any other file folder whatever you make that isn't inside of here is only used for the actual building of the first html page this is very jason miller ask good shout out to miller for those i don't know jason miller always the creator of preact and this is very much like encoding his way of thinking and i'm excited to see how people are gonna use it for stuff you can see since i put that somewhere other than islands we didn't get an export for it here theoretically i could modify this file and brute force it to import from that other place and make it dynamic but i don't care too i understand how this works i like the the concept of this what's the advantage over astro the ergonomics around jsx primarily this is a very like fresh isn't its own language fresh fresh feels very reactive in its ergonomics where it's very javascript still like all the code in here is just javascript there isn't a build step there isn't anything but the javascript itself and a pretty clear islands is where you go to get the dynamic parts but you use the same code to like i'm writing preact components for my static parts and i'm writing preact components for my dynamic parts the difference is which folder they're coming from in astro you use astro for your static parts and you use other things for the dynamic parts and you have to build that relationship yourself it's very different in that way yes you won't be able to use npm packages in this you won't be able to use much of anything that already exists in this tailwind itself doesn't even work because it requires a build step so they have t-wind by default so if you want to use tailwind you actually import tw from t-wind and then use that to define things instead very different in those ways it's the process of writing it feels a lot like remix but way more performant the architecture is designed a lot more like astro but with less difference between the parts but also a much less simple experience for writing a static thing astro is still unbeaten in terms of const users equals await prisma.users.findmany and then just calling that in the html like like the goal of astro was take all these wonderful tools we love for building websites and make it really easy to build static sites with them deno is it's specifically fresh with no is all of those old things kind of suck javascript's cool though what if we start from there and make a really fast way to generate a static html site and let you use the same tools to do [Music] like dynamic behaviors as well it's got so many different like i almost want to do like one of those like like 2d grids where it's like the different frameworks the things they do and don't have but i hate those and it won't communicate the differences meaningfully there's like all of these are such fundamentally different approach there are brushes silva asked with deno you could do static site generation with no build step effectively yes this deno code right now that i ran like the deno task start what this is doing is it's running javascript as a server we'll type script the code that i gave it and it is giving me back html if i go to the network here there we go hi stream this is html that we get back it has the import from that one island but beyond that it's just giving us html can i pretty print this cool here's the pretty printed version in here with a very basic fresh counter fresh counter ends and then the traditional html you'll even see these two are very similar but this one has this command or uh comment that indicates that to the javascript that this is where it should start and like hook in this doesn't have that and that is what we get back it is generating the html on the server using deno but it is not so i think the confusion here i'm seeing a few more questions about it is like what is the build step the build step isn't the thing that generates html it's the thing that turns your typescript into javascript that they can that can then generate your html so inside this we have typescript and on the other we have html different solutions solve this many different ways one of the first things you usually have to do is turn the type script into like minified runnable js because you can't run typescript unless you're shipping deno and have been for a while you're not actually running typescript you might be writing typescript in fact hopefully you are writing typescript if you're hanging out here but you are not running typescript right here you're using something like babel yes build webpack all these different types of tools it's actually a few steps before this arguably which is first you go from typescript to javascript because all the things in typescript aren't real code so you have to get rid of all those convert to js and you have to bundle it and you might even have to do other compiler steps at this stage too like parsing the code to find all of the tailwind classes finding all of the styled components like definitions that it needs to compile out like jits for this step is pretty heavy and slow and then you have to ship to server then i actually have this many steps first i thought i put too much space but i guess i put too little server and then you have to run it on the server so what i'm referring to is build right now as i've been saying build throughout this is here this section is built let me give us a different color this is deploy and if from here this is where things get a little complex because here two different things can happen one is here we could just hand the files over and then when requests come in we can run or once the code is there the server can build it from here so i'll say i can actually cut this into two different paths now they're shipped to server let's break this up make it nice and fancy so one of these paths is statically gener or is like run on server on request so whenever a user makes a request the javascript you ship to this server gets run and then it generates html that uh gets sent to the user so generate html on request that's what i'll say for this that's one of the options i don't want to copy all that the other option generate static html on build which is when you push this code up to the server it goes through all of the different paths that you've created in your project then generates actual html files that then live on a cdn so there's actually like two steps here you generate and then you uh put on cdn this arrow thing is not making this as clear as i was hoping so we're going to not do it that way what we're instead going to do is two different paths so we'll do just the like generate html on request way so honestly the line would segment here i'll label this one ssr we're going to call this line the user request line so now a user makes a request we generate the html on the request and then we send html to user and then the users at the end here where they get the html user gets html cool so now we're gonna do the thing that everybody is getting confused right now i think which is i need to shift this over a left morph keep it lined up which is the ssg static site generation so the difference here is right here actually is when we ship to the server we're not done we put this new blue box here generate there we go and this generate step is the big difference and then when the user request comes in uh return cached html to user and the user ends up getting the html way faster because this generation happens way earlier the thing i'm trying to iso like show by doing it this way is that since we're generating static html here by the time the user is making the request there's already an html file for them to be requesting we don't have to generate it on request whereas in an ssr environment there is no html there is just the javascript on the server and then the request triggers this generation so i would actually have to put this here to be accurate so static site generation is doing the building and the generating early for the like site ssr is doing it here and this is not build to be clear we're not building anything on either of these steps we are using our built javascript to generate html and that is a generation step that in fresh occurs on request because there is no build step so if i was to copy this one once more and call this fresh there that's the difference cool let me zoom out is that like in any way legible yeah it's relatively legible cool so the big difference here that i'm trying to highlight is there's none of this build stuff that creates the javascript that you ship to the server it's just what you ship to the server and then you generate requests then but there's no build that occurs here you take your typescript you send it to your server and when a request comes in html is generated can you cache the html on first request with ssr sure there are other ways to get this html into the cache so you don't have to regenerate it in the future but that's a thing you have to do that's not a thing that's inherent to picking one of these methodologies what are we shipping to the server quantum good question we are shipping this all the code here the code in this file or in this directory right here even the vs code bit here that isn't obviously using the server we send all of this to the server and the same way when i on my computer here i type deno task start this isn't building anything what this is doing is it is reading the uh i believe it starts in freshgen ts wait maybe not i forgot where it specifically starts oh maintes cool this is what it runs so when i type in the deno run command it calls this function render which takes a context an inner render function and then it generates html and then uses t-wind to like do the styling on top of it and then returns that to the user when a request occurs uh quantum asked uh for this is ts so when do we get the js we don't for the code that runs on the server deno actually lets you run typescript on servers it's it skips that step as for what it does on the client for the islands that's actually a really good question i don't have an answer for because it shouldn't work and it must have to transpile that that is actually a really good question uh yeah i i don't actually know what it's gonna do for that they have to do some crazy compiler hacks for that i i will i don't want to do the digging to confirm how they're doing that just now but that was a really good uh call out quantum deno can run typescript your browser cannot so the islands have to be compiled in some way so anything in this file and i'm guessing that's what this fresh gen ts does to some extent is it is telling denno hey this path we're sending it to the user make sure we quickly like compile and minify that and make that js on the other side oh they're using jit that makes sense thank you ross for the clarification on that browsers will probably not support typescript someday there's like some type syntax that they may support in the future but typescript itself is not super interesting for like the browser it's more like rules for us to follow as devs fresh is really cool i am super excited about what the demo team's been working on i would not use this for an app right now to be very clear if i was to build my own framework from scratch i would probably start with what they're working on here because it seems to be like a really good starting point they did not consider type safety at all and that always frustrates me because it's pretty close to having a type safe solution but they did not build it so yeah i wouldn't use this i might build my own crazy framework on top of it with like a better type system but deno does not have the best autocomplete and like typescript intellisense story right now already i feel like that could get chaotic fast all that said it is crazy to see how fast this ecosystem is moving and i am genuinely really excited for where it's going so i will be keeping an eye on the dino community and what is going on in fresh although my need for node packages is too great for me to make the switch over myself so those are my thoughts very excited for what they're working on there not where i needed to be just yet for me to start consuming it so in the future there's some really cool stuff here thank you so much for taking the time to watch this video i know denno's really new but i'm excited about talking about all these new things if you didn't know this over 60 of the viewers of this channel have not subscribed yet that's crazy y'all watch these videos as soon as they come out and you still haven't hit that red subscribe button come on get on that it's right there click it share a video with some friends if you like it leave a comment if you have any questions i do read every comment and i do not delete them so stop accusing me of that i let all of those things sit there and rod even the ones that are making fun of me for no good reason seriously subscribe leave a comment and don't blame me for deleting in touch thank you guys for stopping by




## Need animations_ Use this library. - 20241117
I've covered animation libraries a lot on this channel and there's been a ton going on from new minimal ways of doing things to hacking it into Tailwind to all sorts of other Solutions but today's solution isn't actually a new solution it's an old one and it's not just any old one it's kind of become the standard for react frame or motion's kind of been the only real responsible way to have fancy animations in your apps for entry exit and all the fun transitions that we like to build framer motion is a phenomenal Library built by framer a company kind of trying to compete with figma but they're also trying to do Coden it's framer is a weird product framer motion is a great open-source library for react devs but framer isn't framer motion it's been really confusing for a while and it's also been very react specific today all of that changes because Matt from framer just left made motion its own full separate thing and they're now going to support every framework not just react I am so excited to dive into this with y'all it's a huge change for how we build animations and nice experiences on the web and I can't wait to show all of this but first a quick word from today's sponsor today's sponsor is me because I couldn't get an ad in time for this turns out having two plus videos a day is kind of hard to maintain sponsors for if you're interested in filling spots like this in the future getting your brand put in front of the most talented senior plus developers watching YouTube period let me know hit us up YouTube at T.G Fair motion is now independent introducing motion first some personal news next week will be my last at framer writing this feels pretty wild making framer motion has been the best job of my life to do so for six years with the best product team in the world both a massive learning experience and a privilege however this leades some news that I'm incredibly excited to share with framer's blessing and support framer motion is now completely independent I'm spinning it off into its own project to better serve the whole Community introducing motion what's changing there are two big changes to highlight the first is motion's brand new home here at motion. deev besides a fresh new design it finally has a much requested search excited to explore the page with you but also I I just noticed look at how the topnav blur effect works on things it turns them into like a grid like reflected like refracted glass they go so hard on these things unnecessarily it's so cool how are they doing that is that a PNG or yeah it's a mask pattern that they made as a background image radial radient programmed here with CSS these guys know their design and you'll see little things like that throughout all of framer and motions work it's super cool back to the article though the second big change is a request from the community for a long time users have asked to use frame motion outside of react either with vanilla JS or other Frameworks like View today motion becomes more than a react library with an amazing set of vanilla apis that bring motion's Hybrid engine and extensive feature set to everyone in the coming weeks and months more features from frame or motion will make their way to this new vanilla API and I'll be writing new integration guides that help people use them everywhere beyond that expect improved support and documentation a stronger Community into renewed focus on developer facing features why is this happening this news might surprise many but I think in context it's the natural and obvious next step for motion 6 years ago framer bought my project pop motion because they wanted a simple react API unlimited flexibility and smooth animations across all devices as s moved from prototyping into sites these animations only became more important because now they're being shared with millions of monthly visitors but motion also became wildly successful in its own right becoming the goto react animation solution with over 4.5 million weekly downloads on npm the number like like framer motion is so prolific it's kind of nuts also if somebody in cheat can remember there was another thing like this that somebody from framer broke off and made it's like animation dodev or something that I can't remember the name of anyways it's a part of framer but it's also a part from framer serving a much wider set of users it's kind of as they that like this Library exists as part of framer but its majority use exists well outside of it it always felt weird because this library was so prominent but it wasn't really funneling into framer success directly like they were it made the framer product more confusing for me honestly having them separate helps clarify what both are we feel like the best way to ensure motion's future as a core driver of animations on not just framer sites or just react sites but for all Sites is to spin out as an independent open source project for the community for motion the high demands of frameware in terms of capability and performance have made motion the product that it is today so frameware users can rest assur that their animations will continue to be powered by Motion in the future spinning out motions a bold move by framer and I'm super delighted that they're on board is motion's first sponsor huge I hope that this gets more sponsored this is a really important project so I just went down a fun Rabbit Hole trying to remember the name of something that I knew came out from the framer folks specifically the framer motion folks trying to make something that was not using JavaScript for as much of the animation and using the web animations API more because frame motion was built before a lot of those apis existed and a lot of the code there uses JS to do the animations motion one was announced in 2021 and I remember this dropping and that's why I was so confused because I knew this happened and they had announced that they were working on a new minimal library that just did browser standard animations but this used to be what was on most .ev motion one now motion one is the new motion but if I um way back machine yeah this is what I was thinking emotion dodev used to be this which was Tiny size huge performance a new animation Library built on the web animations API I was really hyped when this dropped I thought it was super cool everything was really simple well made I was hyped also tiny compared to things like green sock even tinier when you compare it to OG motion but yeah I don't I think it's dead cuz when I found to the GitHub they archived this project funny enough yesterday which is interesting it seems like motion is now focused on the centralized main motion Library not one or any of these other tools I wish that they would call it what happened to one maybe they say what happened to it in the blog regardless motion is now its own separate library and I'm guessing all the learnings from there are going to come over to here so what's next honestly I have a long list of things I want to do the hard part will be picking what's first new API is built on emerging browser features like view transitions bringing the power of motions industry-leading layout engine to the new vanilla API highle components that are both beautiful and accessible better Dev tools plugins for popular design tools Etc realistically for motion to thrive I first need to make it sustainable if you or your company already finds value from it consider a sponsorship I know a lot of you companies are doing the OSS pledge now at least I hope so the open source pledge is a thing that was started by Century meant to Kickstart companies helping fund these open source projects it's a pledge that a company can take agreeing to put at least $2,000 per year per devit the company into open source all these companies have already contributed and are promising to continue so if you need places to throw that money if you're making the pledge this is a good place to apparently Tailwind has already sponsored them too which is really cool to see Tailwind plus motion is a nice combo so hyped to see them working together like that anyways whatever's next I'm beyond excited for the next chapter and if you're an existing motion one or frame motion user I hope you are excited too here's the next 6 years hype huge I want to see the new homepage though that killed motion one also the domain motion. devevo I don't get domain Envy much nowadays but that's so good that's up there with my image. engineering which I still haven't used for anything but we'll get there Motion makes animations simple fun and Limitless go beyond the browser with super smooth Springs layout animations timelines and much much more I'm sure if I scroll it will no oh so they respect accessibility settings like the request for reduced motion which is why nothing was moving on the page initially and when I went and toggled that setting suddenly everything started moving again and I bet if I hit that I have to refresh after yeah now it doesn't work now it does more we need to respect those settings anyways this is how simple the code is vanilla JavaScript you tell it the target you tell it what to do or using a motion. div in react same deal and this is how motion works it's it's alternatives to the Dom elements where you put motion dot in front a now motions JS layer can take over and it can identify when things are added and remove from the Dom to do all the things you might need to do one of those things that almost no other Library supports properly exit animations where removing something from the Dom won't just disappear it it will have an animation on its way out doing this in react sucks so hard because to fade out an element when it's removed you actually have to keep it in the virtual Dom and the real Dom for a bit do the animation and then when the animation is done you have to remove it it's one of the few things that the react mental model doesn't really work for entry animations are easy because when you render it for the first time you just have it fade in or do whatever but when you remove the element you have to have it stay there for a bit which is really really hard to do the way react Works motion just handles it and hopefully other Frameworks will get the benefit from this super super simple syntax as well like two day if I needed good exit animations on something I was building with react I don't know how I would do it without framer straight up I just have no idea it would be hellish layers of code keeping track of references and making sure things are properly removed once the I don't even I'm thinking about it and it is stressing me out so we're going to move on layout animations also very very helpful switching between different layouts now with view transitions in the browser you can diy things like this but before then not fun and this makes it way easier you also of course have gestures so when you move over this it does things and I can even grab it and drag it around and when dragging it makes it smaller all of that just baked in so nice and of course timelines very useful when you want to do multiple things in order so the unordered list so the list itself has to fade in and each item in it needs to start at y -20 and then move to zero staggered 2 seconds between each of them so nice so nice where this has to fade in then these have to run one at a time with a delay between them such nice syntax to draw describe really difficult things wow ail personally sponsored and linear already jumped on not surprising they have a whole gallery of cool things using it if you want to check it out and of course in case it wasn't clear I think I mentioned this before but in case I somehow forgot it's obviously all open source so you can go hop in here and play with all of the packages look at the code use the library and use the source to go make your own version so if you want to have this in spelt or angular or any other framework you have the pieces you can build it yourself now it's actually really really cool and having search in the docs finally is huge I can't believe they got away without this before and of course when you start typing in it the little animation the way it came up it's so good oh oh the best part of these sites are the little animation oh it's so nice I've always been pretty hyped about frame or motion haven't used it as much as I probably should have but now that I know it's being maintained this well in long term there's really cool stuff coming I'm more hyped than I've ever been does this mean I'm going to stop covering new cool animation libraries absolutely not yall love those videos but for now this is the pretty obvious easy recommendation if you're using react and you're building animations into your tools you probably should at least consider frame motion but now it's going to be around for a while I super hyped I hope you guys are as well until next time peace nerds




## Netflix Removed React_ - 20250109
did you know that Netflix removed react and their website it's 50% faster as a result sounds crazy right I know it has to be true cuz I saw it on Twitter look here it is it's a real picture from what seems like a real presentation obviously this is a really big deal right right this isn't misinformation there isn't a community note proposed this isn't somebody grifting their shitty AI startup and using react drama they don't understand 7 years later is it we have a lot to talk about here the reality is that using react correctly is both really simple and somewhat complicated and the things the Netflix team has done to make react a good experience for their devs and to make their website a good experience for their users are really interesting and nuanced and weth the conversation not a ship post a conversation I would love to have that conversation and there's a lot of interesting details here everything about how HTML is generated how JavaScript is bundled to why you would use react for a landing page or your terms of service can't wait to dive into all of this with you but first a really quick word from today's sponsor in software Dev there are two hard problems naming things off by one errors and Live Sync if you've ever tried to make things sync between multiple users at once before you know how painful it is especially once you start adding an O data management querying rendering and all of that chaos so here's a live syncing chat already has Au and everything set up to sup nerds see how it appears in both immediately there's no trickery here there's no live client sides thinking I'm not using the multi- windows let's see the code for it that's all of it this is all of the front end code how does that possibly happen this can't be real right not only is it real it's really convex these guys make it way too easy to handle the entirety of your back end for react applications and other Frameworks too to be fair I'm a react nerd I'm sure you are too it's really good for that the back of code is just as simple you don't even need to be a backend Dev to get around it you can literally command click on the thing you're hitting on the front end with use Query or mutation and see in here how it's defined the list query has no arguments it has a simple Handler that uses the database in order to get the last 100 messages and send them to the user and send does validate that you send a body and an author and then handles that new message schema is adorably simple it's nuts how easy this is to work with and that's all it takes really it really is that simple go give him a shot if you have yet check him out today at soy dev. l/c convex if you look into the community note here it drops a really useful link for context which is this why combinator conversation on The Hacker News board from 2017 let's dive in as a starting point there's a lot of nuance to dive into here but I think here will be a good start hey I work on the team at Netflix that gave the talk on react in the signup flow in the Tweet the full talks are available here if people want to watch them link to the talk though it also provides some more context than some common questions people have asked let's hear it why are you using react to render a landing page the netx landing page is a lot more Dynamic than most people think it is I should give a little additional context first they didn't remove react from the code base they didn't remove react from the app all they did is server run and server render the landing page in react so that you don't need the JavaScript on the client side so the only thing react was removed from is the bundle that you load of JavaScript on the client on the homepage as they say here though because the first question you'll ask is well if you removed react why would you even use it for the render just write it in anything else just HTML just write the HTML you're lazy you're dumb you're a JS soy Dev what are you doing there are good reasons as this engineer points out the Netflix landing page is significantly more Dynamic than most people probably think it's our most heavily AB tested page in the signup flow with even some machine learning models being used to customize the messaging and imagery that you get depending on location whether or not you were previously a Netflix member your device type and a lot more this isn't some AI grift going on now reminder that this was over 7even years ago even beyond that Netflix supports almost 200 countries now and there's a different combination of localization legal challenges and value messaging for each one we end up sharing a lot of the logic in the UI for these AB testing and localization challenges throughout the signup flow mainly through react components crazy it turns out as your HTML gets more dynamic in terms of the things it might result in reacts a good solution to the problem there are other ways to template your HTML but if your companies already building everything in react you already have this page written in react you just want it to be faster you can use all of these tools to render the right HTML with react and just send the HTML down to the user if you've been around recently this might sound familiar to something the react team introduced don't spoil yourself though we're going to get there in a little bit the example I always love to give is the terms of use component that we have which to a Netflix customer signing up it's literally one or two checkboxes in the UI but it has some of the most complicated logic in the codebase due to the vast number of countries and user states that we support because of all of this it's more valuable for us to share these custom react components across the entire signup process both for the landing page and for the rest of the flow which is a single page react and Redux application again they can share everything they're just generating the result for the user ahead of time on the server kind of sounds like server components right we'll get there I also love the terms of use in terms of service example not because everyone has these really Dynamic flows with it but because it is consistently one of the things that requires the most data to be fetched and double fetched if we go to ping. which is an app I built using the old way of building with nextjs typescript react all that and we go to the terms of service page we'll see something interesting if I go to the network Tab and we grab something like provided by T3 tools and we search for this you'll see this came up in two places not two places in one file but two different files we have the ping. ginfo whatever here which is the actual HTML response and if I open this in my editor you'll see this is the HTML page that my computer fetched when I went to the URL and this includes all of the information for this terms of service we have all these H2 and P tags that are the terms of service which is included in the HTML cool that's how the web Works nothing special here right one more thing we also reload the exact same data in JavaScript because when we server render with the old model for react we create the default HTML state but we need to run the exact same JS code on the server and the client so the code that resulted in that being done properly and having the right things in the terms of service all of that including every single word of your terms of service has to be included in the JS bundle that then reruns reeners and reattaches everything as soon as the page loads that sucks hard the fact that you have to double fetch all of this data that you have to have all of the copy in here again even though it's there already it's just in the HTML that sucks and server components help solve this significantly because when you use a server component you don't have to send all of the same stuff down as JS it can just be the HTML representation we'll go there in a little bit I keep getting ahead of myself we've seen a lot of conversion value through improving the performance of the landing page especially in countries with slower connections but we don't also want to reduplicate a lot of the shared UI logic that we have I will say if you're if your connection is slow enough you can't go through the sign up for Netflix how the are you going to stream a movie on Netflix for other companies like like if this was Amazon or Walmart or a bank this would make a lot of sense but if your internet's too slow to sign up for Netflix what's your experience going to be like watching it the trade we decided to make is to server render the landing page using react but also prefetching react Redux in the code for the rest of the signup flow while we're on it this optimizes the first load performance but it also optimizes the time to load for the rest of the signup flow which has a much larger JS bundle size to download since it's a single page app this all makes sense starting to sound a little bit like server components here's where things start to get fun here is Sophie who was at the time an employee on the react team now she just in contributes externally I work on react we'd love to hear from your team sometime and collaborate on this sort of thing we're solving many of the same problems but I rarely hear from Netflix Engineers except that talks where they're announcing that they're avoiding react or they forked it often for reasons that we weren't even aware of yeah there was a lot of this at the time people Reinventing parts of react or forking or gutting and doing all these things and giving these bombastic talks about it without bothering to reach out or talk to the react team it's gotten better it was a two-sided problem because the react team didn't make it clear how open they were to these types of things they've gotten much better about that it's pretty easy to get a hold of them if you really want to if you you have a compelling enough reason especially if you work at a big company the reason this was written is almost certainly because they had started exploring how server components would work the harsh but somewhat fun reality of all of the benefits that were described here is if they were using the new server component model it would have done almost all of the exact same things you could have had components be reused on the landing page and in other places and when you render them on the server they were a server component and when you render them on the client they were a client component awesome you could have had the terms of use be dynamic based on users cookies and whatnot and you have to load all the different possible States as JS you just load the one the user wants I have a weird example of this here is upload thing if you don't already know it's an app I built and uh got a little 3D printed thing of here to make it easier to add file uploads to your apps and when I say file uploads I don't mean I go dump it somewhere in a web UI and then let users see the file I mean users can upload files ugc is a really hard thing to handle properly when users are uploading their own content we built a great way to do that especially if you're a full stack Dev especially if you're next Dev I'm not here to just shill upload thing though I already did my Shilling earlier I'm here to show you guys how server components made this much easier to build and work with so here we have my apps you might have noticed all of these have these fancy little backgrounds to make it a little clearer that they're different from each other I'm using hero patterns for that hero patterns is a source of patterns that are open source for you to grab as svgs and use and your stuff it's really cool I have all of these in a giant file here and I mean it when I say giant if I reveal and finder utils generate pattern this file alone is 205 kilobytes of JavaScript and all it is is all of the SVG patterns that I would want to render historically you would not ever ever ever want to do this in your JavaScript code because if you do this in your JavaScript code now this giant file gets loaded to the user this one file is bigger than the entirety of react which is kind of absurd that would be really bad the alternative way to do this the traditional way would be instead of the svgs all being here you would load them remotely once the content loads but then you don't have the nice embedded Behavior where the patterns are there right when the page loads you have to wait for them to be fetched separately from the server in a different round trip not ideal so how do we make sure all of these patterns can exist in our code and then we can generate HTML using the right svgs without having to load all of this on the client it's actually quite simple it's done this file works that way if I want it to work differently then I go wherever this exists so we find that I call this in page TSX if I want this to be on the client side it's easy I go up here use client now this file loads JavaScript to the user without this here get random pattern Styles and the things from that function and the things things from that code do not go to the user I'm able to specify an unbelievable number of permutations in different states the UI can be in and represent that to my code and I have to ship all of those potential states to the user the way to think about this is when you look at something like this UI your code needs to handle all the different states the UI could be in it needs to handle the empty state it needs to handle the loading state it needs to handle the state with 15 apps he needs to handle the state with one app it needs to handle the different states with the different backgrounds for all of those different apps so every permutation your UI could be in code has to exist for it there's a pattern to describe this way of thinking called server driven UI where instead of the server giving the client data that the client then uses to figure out which version of the UI to show you what if the server drove the UI what if the server told the client hey your UI should look like this that's how the web used to work apps and I'll admit single Page Apps and websites built that way with stuff like react encour a different way of thinking where your HTML would have nothing in it you load a little bit of JS which would then go fetch Json and then generate the HTML on the user's device which means every single way the HTML can render has to exist in the JS first server components mean you don't have to have that code representing all of those permutations on the client's device anymore it can run on the server and just send their permutation to them so I have 400 something patterns in that file here at least probably so I have all of these patterns and all of these things but all that loads is the actual HTML for the ones being rendered that's the magic of server components so now imagine instead of these being different patterns that could or couldn't render these are different countries and instead of it rendering 15 of them it renders one but each of them has different needs and that theoretical Javascript file is huge with all the different copy for all the different languages for all the different expectations that can exist and now you have to render all of those different permutations which means the JavaScript has to include everything for every language now when I load the United States version I loaded the code for the India version too I loaded the code for the Germany version too I loaded all of the different JavaScript for all the different states that URL could potentially be in the magic of server components is you're only fetching for the things that you're actually rendering so if I am loading this page in the US it's not going to load the JavaScript for the India or the Germany version it's going to just load the things that I rendered it solves this problem they effectively reimplemented server components with what they were describing here which is hilarious because if you implement this with server components the right way your savings are probably going to be even bigger than 50% we've already seen this with a lot of applications taking advantage of these things server components allow you to have server code that generates HTML that doesn't result in additional JavaScript going to the user and this isn't just Reinventing PHP because PHP doesn't let you write client code you can have a component that on client works the way I'm describing and on server is not sending JavaScript to the user and you can reuse it in both places that is a concept that nothing has had before it and sure the server sending HTML might feel like PHP but if you think this is just PHP then you understand neither PHP nor the browser sorry to call you out random chatter but this is the stupidest thing anyone said today and I cannot believe that you watch my stuff if you actually think this is the case anyways if you want proof of this there's a really good example I have a video that should probably already be out by now it's called Next faster there's a website called McMaster that people seem to think is vanilla HTML and that's why it's so fast when in reality it's using a shitload of JS like multiple megabytes of it in order to make it feel as fast as it is Ethan ncer and crew rebuilt it with a service called Next faster it's not a rebuild that's inspired but it's for school materials and it's even FAS when I click things I'm clicking now now now now now they load immediately because it turns out nextjs in server rendering makes it pretty easy to do this and the coolest part of the new model is you get to choose when it stops being just HTML and starts being client sjs and you can pass things from the server to the client as HTML so to Showcase why server components are so different from previous models I made a simple example imagine in docs you have the little tabs for like typescript or JavaScript or python HTML whatever is one of those tab bars you have these little tabs tab a tab B tab C when you click them they're under different Contents I passed all of these as props we have tab contents tab equals a tab equals B tab equal C I have this little helper function tab contents and it console logs rendering tab components for tab if I do this the way you guys are used to ignore that I go here I refresh I click tab C it logs click tab B it logs the reason is all of this JavaScript is running on the client as it should what happens if I delete that though we see we're getting these server logs but these are being injected by next it's a cool thing they do that but these aren't happening on the client side they're just forwarding those over for me client side and you'll see here as I click between the tabs there are no new logs how what's going on here one of the really things you can do with server components that doesn't exist in any other framework right now is when you pass something that is a server rendered component like we have here with tab contents and I pass that as a prop to a client component which obviously tab rapper has a uate call so it is a client component it renders all of these states on the server because they're all being passed as props so now A B and C get rendered on the server and all get passed down is what is effectively HTML so to speak to the client so they all get get pre-rendered on the server and now we don't have to wait between them they're all there they're all in the HTML they're all in the browser and even though we have these different states that all could exist and all were generated in this code that does exist and does run none of that affects the end user none of this goes to the user they'll never have to know about it as they shouldn't now you can have an infinite number of these different conditions and none of that is loading is JS that the user gets and it we don't give up the dynamic behaviors and controls that we normally get from react we just have the option to intermingle these things that don't ship JS to the user with the things that do it is a new paradigm it is really cool and it solves all of the problems that are being described in this seven-year-old comment from a seven plus year old talk that is being misused by an AI grifter to get free attention and I cannot believe I'm giving him even more attention by doing this but it is the stupidest thing I've seen in such a long time that I had to rage a little bit because not only is this problem being deeply misunderstood it also has been solved by the new Solutions and the people who are sharing this thing on ironically like it's a big problem are the same people who are bitching about the new Solutions and saying oh we just reinvented PHP no we didn't this is something new and if you can't see how this is something new you're struggling to see that's not our fault anymore enough of us have done a good enough job at explaining why this pattern is cool and why we're able to build things as performant as we do with really good public examples like next faster which is open source for you to go look at and see how you can make things that are super Dynamic with a ton of stuff going on both in the markup and the data model without having a thing that sucks to use I will offer some sympathy though if you were at Netflix at the peak of the single page app craze the these Solutions didn't exist and I can understand why you would do something drastic like reinvent how your HTML is being rendered so you can rip the react part out of it I get it you didn't have server components yet but now we do and continuing to reference examples from years ago from almost a decade ago like these tools haven't improved since it's embarrassing and I really hope we stop sharing these things like their real or sincere or meaningful commentary on how react works for production when nobody at Netflix would say this is the right thing to do today nobody who built it would say it and I am explaining to you how to do it right instead stop sharing things you don't understand because they're dunking on a thing you don't like and stop the AI grifting I'm so done with it ah God I got nothing else on this one peace notes




## New JS Framework Just Dropped (Next.js Killer__) - 20240309
a wild fullstack react framework appears and I want to be clear this isn't a random framework by some random dude this is Tanner Lindley who created react query react charts recently created a tan stack router and tan stack forms and so many other super super important tools there are a few people who are as important to the react ecosystem as Tanner so him introducing a new framework to compete with the likes of next in remix is very exciting especially since it's built around his router which is one of the most exciting routers that I've ever seen check out all my coverage of tanack router in the past if you're curious It's very early but tan.com TSR branch is already being built and deployed to versell using our new experimental full stack template tan stack start which uses tanack router as well as a splash of Nils viny viny is a very interesting project the tldr of viny is it glues all the pieces you need across vit Nitro and all the bundling chaos in order to give you the necessary building blocks to build your own full stack framework so if I was to build my own competitor for next and I wanted to add server components all the fancy vet bundling features all that type of stuff vinx is a great way to do it it's also really inspired by bun which is cool to see thinky is a dope project I screwed up not starring it that has now been fixed and Nel's an absolute Legend used to be deep in the solid Community still is pretty deep there helps a lot with solid start but uh and having all these pieces here that are used to power n here for anyone to use is super cool previously V and Nitro would have been things you assemble and set up yourself for something like n which is what they're actually doing on the Nu team in the view world now you can do it yourself over here and it seems like more than anyone Tanner and crew are very excited to take advantage of that opportunity that said they don't have immediate plans for Server components and there's been an interesting back and forth I want to cover and then I want to go actually dive in and play Tanner said that for now they're not planning on supporting rsc's because there's no docs on rsc's for framework authors which is a very fair critique if you trying to build a framework around rsc's there isn't really a path there on how to implement it which is annoying because they're not very simple to just Implement and as you would expect Dan shows up for which bundler I don't mean this as a troll if you have bundler Integrations going the RSC for Frameworks API is kind of a single function call would documenting this one function be enough it would help to know which areas are most needed as well as a link here to the render to pipeable stream I know way too much about this function in fact I actually wrote an implementation in the original tanack router using pipeable stream in order to try and get a really early serers side rendering prototype troll if it's a single function call could you make a quick PR and all serious this feels handwavy next didn't spend thousands of hours and dollars to add a single function call to their new router they didn't hire core react team members because it was easy to accomplish this part I don't love as much well go into that later if it were truly the simple remix would already have launched their support I'm honestly looking for practical guidance here people who understand the big picture enough and care enough about rsc's future to be willing to get their hands dirty with me the ideal person to write these docs and consult the ecosystem would be someone who has built their own SSR router like react router but without RSC support and then they would document what it takes to support it this is where I am many others are today empathy makes great docks I like this wrap-up for sure I'll say there's a lot of reasons core react team members were hired at for sell specifically Corea team members that were hired were really really focused on serers side stuff and serers side JavaScript is not a thing that meta invests heavily in it's a thing that versel does invest heavily in it makes a ton of sense these people would go to versel not because it's necessary in order to make rsc's work but because they wanted to work on the server and this is the place they want to be so that's my only issue with what was said here everything else fully agree Tanner being based as always I mean I probably should put up a PR it's just not my job anywhere more so maybe in Spare Time my point was most of the work is this one building a bundler or integration presumably lower level than what you're asking it's not documenting RSC and point two which is is figuring out your routing and caching strategy this is a ton of work but it's up to the framework and also not about documenting RSC this another important part rsc's the the core raw concept are actually very simple and there's a couple other Frameworks that are already doing this I know dai's been working really hard on waku which is a super minimal react framework that gives you server components it was meant to be initially a demo of what a server component framework would look like and it's not too complex I've read through a bit of the code in the past also all typescript which is really nice not a single JS file site but I've been really impressed overall with waku it's surprisingly simple and readable here's the server file Define entries render entries get build config SSR config all the entries are handled we set the render context for when we're rendering obviously not for public use but this is for actually applying contexts in different conditions grab from the context which he's a big fan of using context in all sorts of ways it's Dy he's the state wizard here's their default template the big piece is there's multiple entry points because you have to handle all the different routes that might be rendered including a render strategy so here we're making all of these Pages static paths so these all get built on build we have a root layout which is rendered at the root path we have a homepage which is also rendered at the same route and we have a static about page which is rendered at slout here's all of those templates if we go to them we can see these are just server components and here we have a fake async get data function that we use for the about page to generate the page if we go to a more complex example like with their actions implementation you'll see it's still not too bad here this file is marked as Ed client we have a bunch of stuff going on in here we import some stuff from react there's some not great typ casting here but it seems like the typescript is honestly one of the harder Parts here if we go and look at the increment function in funks we'll see this is marked as use server so waku already has a pretty solid working implementation of all of these things obviously this was not super trivial to make and a lot of why this could happen was Dai joined a Facebook group for chatting with the core react team in order to figure these things out the results dope so you can do it the tools you need are out here that said documentation on how to do this isn't like a page you go to that clearly describes it and the different behaviors you might want in these different Frameworks are entirely different and it's hard to draw a line of here's the core primitive how much do we guide you to the correct implementation versus how much do we just tell you what the Primitive is and let you figure it out from there because we don't want every server component framework to be exactly the same and that's a hard line to walk all of that said we're not here to talk about waku and daishi as incredibly talented as they are I want to focus on tanack router the tan stack start new template slf framework as well as the introduction of rsc's possibly to it again with the two points Dan said here a lot of effort was spent by the next team on one which was building deep bundler Integrations to get rs's behaving and all the different ways they wanted to it was very expensive to do that and that's a lot of where their effort has gone but that's because of the ways NEX wanted to use it for two we've made suggestions like that start transition is crucial for routing I recall you dismissing that instead prioritizing fine green re-rendering which I can also understand but I'm a bit surprised to hear that you're interested in our recommendations again how much should the react team be recommending versus showing chaos hard to make these decisions that's all I say it would help to understand which specific points are most helpful to document remix is doing both one and two and yes doing those is hard work but I'm still not sure that these things are what you're missing what documentation do you expect and for what parts of the API also worth noting that one is something I would expect viny which you build on top of to take care of and two is something I'd expect you to have your own opinions about so genuinely don't know which direction the gaps are in Nik jumped in always good to see him viny does take care of one but two also depends on people's understanding of one well enough and then also know enough about the paradigm's intricacies maybe some more white papers or code walk throughs of next js's implementation people need to know enough to have opinions I like that there people need to know enough to have opinions I feel like this is what's missing people are so much uncertain about server components themselves and how they work so much so that they aren't as confident about their own takes on it and in order for us to have good opinions about how to use server components to build these new Frameworks we need to deeply understand them first and that's not as simple as writing some docs but not saying this is all the react team's job people need to do their homework too read the source code I think Luby can vouch for how it would be impossible to get the whole picture without reading the source code Luby is another deep deep server component individual she's great and uh yeah great person to site here as always value n's input enough about the drama on Twitter though I want to actually play with this and thankfully I got the project downloaded locally thank you Tanner as always resolves relative to Absolute good old path handling everyone's favorite custom V server this is wrapping be with all the chaos that they need to engage with resolve all of these packages but here's where things get fun export default create app we have a preset for serving it on verell forel's a surprisingly nice place to Target for a lot of these types of services because uh yeah the versel build output API is very well documented for running things both like the cache on a CDN as well as on servers lambdas edges whatever you want to run it on it's a really nice thing to Target when you're building a framework and I can see why that's a top priority both because they're already deploying on it and it's one of the easier targets when you're doing all this fun chaotic serverless stuff now we have the routers we have the public router which is served from the public directory which means this is going to come first anything you put in here will be the top priority if you go to a route and it's not served by something in public then we fall back and go to the SSR route instead we check the app server TSX we make sure it's clear to the bundler this is targeted on the server so this should run there we have all of our plugins that we're using on this render path and we also link it to the client so that the client code can be loaded in as well then we also have the client path which is handled by app client TSX this targets the browser so this will be compiled differently has a base and it has all of the plugins that are needed on the client side as well including you'll see ah react refreshes in both interesting also server functions. router this is for things like your server functions your equivalent of actions very excited to see what these are used for now that we know all of that I want to check out the app client TSX cool render start client this takes in the router if you're not familiar with what's going on here an important thing you need to know in react is that in order for your page to be functional once it's been rendered on the server a thing called hydration has to happen where you're effectively rerunning the same JavaScript on the client that you ran on the server in order to link up all of the react components to the actual elements on the page with server components this behaves a bit differently because they some components that only run on the server but with this model and what Tanner's working on all components run on both so you a way to pass the data to the client which they're all going to handle for you on the route level but in order for this to all come together you need to run some slightly different code on the client and on the server where the server code will fetch the data and then the client code will use the data but they both render out the same HTML as a result and that's what this code here does is it takes the router definitions that we have defined already it uses those to start up things on the client side and then it from all of that renders hopefully the right page with the right content and syncs it all together we also have the hot reload handled here too and if you want to see the server side it'll be a little more complex but very similar overall the difference being we're not trying to hydrate the HTML we're trying to generate it in the first place so we take the event we turn into a web request we get the URL out of it we replace the origin so we have just the URL path you'd be amazed at how annoying it is to just get a clean URL path from things this is probably the right way to do it we have client manifest which is actually getting the info for the client for all the assets and whatnot we collect all the assets we filter out anything that's n Dev tools and then we push the script tags for all of the script stuff we create the router we create a memory history for the router we update it with the new history and context with all the assets that we just found we run the load function and then we create the stream remember that thing I said earlier about render to pipeable stream this is the key function for server side react code this takes the react code it runs it and it pipes out a stream of HTML that you can use for other things so this stream gets piped and eventually when it's done it resolves it so that it can start piping the HTML all the way to the page and we have the transforms transform stream with router add router transforms to the stream interesting not sure what these are being used for but the idea of getting the content from react and doing things to it before it guess the client is exciting and I am sure there will be plenty of chaotic things people will do with this can I see what this is being used for here I cannot exciting stuff transformed stream is the result of that we grab any headers that we want to assign then we return the response good stuff now we have a get hydration overlay script context oh I've had to do this too many times where you put a JavaScript script in a string so that you can call this and render it embedded inside of the script tag in the HTML output because react doesn't give a on the client side about what's in your head and your script tag if that's not where the react app is mounted so this lets us handle all of those things here embed them and then the client doesn't worry about any of this going forward really nice stuff I want to see what this actually looks like to use though so if we go to let's take a look at the blog interesting this is just markdown files which means that what they're building here also handles markdown Local Host 3000 blog hydration mismatch occurred everyone's favorite on the bright side the hydration errors are already better than nexts that's nice we take a look at blog TSX o good type errors it's not assignable cool so that's a route that it doesn't want to be able to go to I think interesting expore coner route is create file route again really really cool this is all just generated route code once you've defined this it gets handled for you we have a post not found and of course the outlet the most important component in any of these more nested Frameworks really really cool stuff so the codebase doesn't run on my machine locally lots of potential reasons as to why but what we can see here is the real site we can also see the network profile when I do that so let's open this in an incog so that we can see how this behaves on the network let's clear what we've loaded so far and load the tan router Page look at that just hovering over things we're already doing background fetching in a little bit of water water falling resizing fetched all of those images again to be the right size that's exciting stuff that all of that's already baked in a lot of that's going to come from like the V and viny ecosystem but having image ref fetching based on the size of the images that's good stuff let's take a look at how an actual route change goes though clicking now still loading a bunch of things but it's doing that relatively parallel and you can see clearly what I started loading the new page that the web container load the fet worker all of those things started did something else start before then yeah here's the real Gap so we called the underscore server call TSR tcore server server function ID name this is just saying hey Tac server I need more info give me what I need for this page and this responds with a ton of additional data that might be needed for this page seems like this one is just the call for all of the uh supporters which is like the little get dump here for all of these people in their profile pictures is where most of that data is coming from you send me the environment variable file oh boy pnpm Dev and hopefully now oh that works that's really cool obviously it's running on my machine but the fact that these routes load instantly these Pages all exist and work in such a new thing that's really cool stuff so we can go to this T stack router route routes the URL is just router latest interesting that it's handling versions for us I know why Tanner needs that because maintaining docs for lots of different versions is not fun and he's just kind of handled that for us with all of these version. TSX files so if available version talking cat latest includes this version we throw otherwise we handle it usually when I'm looking for something like this I'll just do this where I copy some text and I can usually find cool there we are so here is the file I was looking for which is libraries router version index very similar to how next does the like underscores to hide something that's there for us to manage our files but is not part of the routing it's an interesting pattern it's cool to see the these things being adopted I'm still not the biggest file-based routing fan but it's cool to see it handled this well here and obviously the ability to go back to a more traditional config based routing which is what this is all based on they're not hiding all of that from you which is again very different from other Solutions the whole routing tree is just here you don't have to generate it you can make it yourself if you want but here we have a use effect for setting dark mode we have a gradient text which is Tailwind to do the gradient text stuff and also we pass the color from and color two so we can reuse this for different places what I want to highlight is how different this behaves from other Solutions honestly the incog might be the right place to do that still so if you were using the new server component stuff with react and next and you go from one page to another you're going to see interesting things load it's going to load some partial HTML through a Json blob it's going to load some new Js if it's necessary and then it's going to load any other assets and things on that page here it's going to load different things because again a lot of that stuff is handled so to speak that might not be the best example because it's loading the giant web uh embed they both use the um stack Blitz Ed which is going to clog up the network tab pretty bad I could just hide that part in here I will comment this out and we'll test it in form then I want to demo the actual behavior in the network tab here which is one of the most important things when building a new server side framework router any of these things so if I load a new route like tan form it comes up almost immediately we look at what is here this is just some data that the server sent which is very different from how something like next would work where it would send you the new page content especially with server components because What's Happening Here is once that first page has loaded everything from that point forward is client side routed so if new data is needed that data will be fetched via This Server call such that the code can be run on the client this is different from server components which would be sending you some HTML that you would render instead and then the JavaScript takes over underneath where your JavaScript is just for the interactive Leafs this is for the whole page being interactive I will say for docs this might not be the strongest technology but for something like an admin dashboard where you want the first load to be good and accurate and you want everything else going forward to be performant and local this pattern makes a ton of sense this is in its current state one of the most minimal server rendering react Solutions I've seen where it's still very Spa it's still meant to lean heavily in the single page app Direction and we see that with all the things that get loaded here they changed this to be showing me the JS that loads and go to different page we'll get no new Js I go back going to command shift R it loads all of that JS initially and when I go to other Pages it might load some in the background but it probably won't need too much and if I go back to form page no new Js loads no new data Beyond this one server fetch for this additional stuff is loaded it makes all of your navigation around the site going forward feel significantly better there's two axes here honestly one is build versus load and there is navigation traditional Spas handle loads in a way that is relatively simple to understand but has a lot of complexities once implemented so the spa you have a couple steps first is build a minimal HTML file two is load a a ton of JS three is JS fetches things from the server and now all future navigations all things you do are going to be done via the JavaScript on the page you'll never ask the server for new HTML again you get the minimal bit of HTML right at the start and then everything else going forward is the JavaScript fetching via an API call to whatever server so here is the twitch homepage you'll see there's a ton of content in this HTML if I just right click inspect this gets super nested there's a ton of stuff so if you check in the network tab you'd probably expect a big page to be loaded but if I go up here and actually look at the page that gets loaded I'm going to open this in vs code so we can read it a bit better here is all of the HTML content for the twitch homepage we have a bunch of built-in CSS for the shell and then we have shell naav and that's it this is all of the actual HTML for the twitch homepage so how the hell is it so interactive where's everything coming from it's all getting loaded via the script tag well the set of script tags up here so we have a Json tag for basic info that we embed to use for different things we have another script tag that loads dark mode as soon as the page loads another script tag that is used for performance and then we finally load the actual Json and JavaScript for the page itself and this is what loads fetches all of the things that are needed binds to the graphql endpoint for twitch and then fetches all the data and loads your react code but all of that comes from these JavaScript tags here that do the actual work the HTML the server gives you has basically nothing in it and in order for the page to get painted with the correct data it has to fetch from the server but it's fetching via a graphql endpoint the data it needs to render the right content on the client the content itself the thing being rendered is not determined by the server the client determines it the way that server components work is a little opposite if I go to the upload things site it open up the network Tab and I also to do a navigation let's go to the pricing page you'll see here that I'm loading something that doesn't look like code a human would ever write we have static chunks we have div n class Flex H screen all of this content here and all of this stuff here is the actual HTML contents it's flattened in a way that react can deal with it but this is HTML in a weird format that next and react use to actually paint the content of the page so when we load this page when we just command shift R it if I go to the network Tab and we look at the actual HTML here this is the whole HTML for this page I could copy paste this into another file load it as just a HTML file and it'll be formatted correctly as long as the CSS is there and the reason for that is the servers actually running the react code in order to get this content future navigations will work by fetching that set of data in the Json that isn't really HTML but it is effectively HTML it's HTML serialized in a format react can understand as we navigate around the site and all future navigations will be done via waiting for the server to send that updated content to you but that is code the client runs once it's gotten the new HTML and it just says here's what the HTML should look like here instead and then it does it this is an important detail because server components only run on the server so if the client was to try and run those it would fail because you can't await a DB call or do a lot of these other things that you might be doing in server components on the client you might not even want to load all that JavaScript there is something in between these and it was the default for a bit we'll call this the SSR way so on initial load we render HTML in the server JS loads after to hydrate whole page with embedded data from server this is an important piece the embedded data from the server if I was to go to ping. call SL demo which is the link we use for demos for our calls you'll see in here there's actually some junk in the script tags specifically we have this next data that has this giant dump of things this is all the data that the client needs to render all of the states the page could be in and that was returned via the get server side props function when you use get server side props on a page in order for that page to render on the client they actually have to dump all of the data the page used on the server such that the client can render and that's the same way tanack router is working if we were to go check in here and look at the elements we have have tanc router dehydrated here is similar data that's used for doing the hydration and dehydration allowing the client to get what it needs to stay up to date that is the core of this pattern that's important to know the data has to come from the server embedded in this initial HTML and it uses the embedded data when the same react code reruns on the client in order to make sure the page comes out the same on both sides so react can run properly going forward and then future navigation loads Json data payloads to pass as props to react code and this is the key difference in the spa way you load empty HTML that loads a bunch of JS that fetches its own data and then JS fetches things from the server going forward for re-rendering the SSR way is the initial load has the correct HTML because you load that on the server future navigations still fetch from the server the same way this did in this example and then future navigations will load that Json data instead and the server component way which is all loads that do any type of navigation are running react code on the server to generate the new new HTML content that the page needs the JS loads after it's been sent that in order to hydrate and make react interactive as well as get these new HTML payloads when they're needed for refreshes and reloads and navigations and again those future navigations are fetching the HTML from the server instead of a Json blob that is used to render the same code on the client this is kind of an argument of when is react run on the server react never on server is for Spas like this large and red because it's important SSR react runs on server once and then RSC is react runs on server for all navigation those are the core difference between the three it's also worth noting that the SSR way this is how old react and next worked with p's router it's how remix works right now and in this case it's also how tanack router works generally SSR the traditional way has not been the biggest focus of the react team but that also leaves a huge gap for iteration because if your page doesn't need to really render on the server all of your JavaScript content is fine to just ship to the user and you want to get the data to the user as quickly as POS possible so the page can update and control everything on the client side again imagine something like a dashboard where you're typing in Search and have a ton of data coming through having to wait for all of the content to be serialized on the server as HTML and sent to you sucks if you're loading a new page that's fine if you're typing in a search field and want every character to update the content underneath it it's a little bit less so generally you'd want to run a lot more on client if you're updating a lot more and you'd want to run things more on server if you're updating a lot less so for the upload thing dashboard server components made a ton of sense until we got to implementing the file searching for actually looking into files and such then we went back into classic tanack query plus tanack table and all the things we needed to make that a good experience this is this area is Tanner's area of expertise highly interactive complex data architectures and he has now taken all of the benefits we would expect doing this the single page app way and gotten most of those working well in the SSR way in fact if I understood his chat message earlier he even has you server working this is really cool because it lets you define some code that runs in the server that does something like reading from the docs path here to actually get the path for the blog posts that he wrote so app blog here are the posts for it we can load those using fetch repo file which is fetching from GitHub that file path if it doesn't find it we throw not found otherwise we extract the front matter we remove the mark down and we actually embed this in the return this content from Fetch blog post is now a server function that can be called in your components in this case the route for the file route for the blog where we load the data by calling fet blog post in the loader and once you put this in the loader this now gets embedded in the route itself via one of those JavaScript like script tags that has all of that data embedded within it this is the key by putting that fetch blog post code in the loader here whatever this returns is now embedded in the HTML of the page and if you change routes then it gets sent down as a new payload that the tanack router code will embed in the page the same way so it's there for anything that needs it for rendering and now you have this data loaded anywhere else that you need it this goes even further once you add things like defer defer is a primitive coming from the tan stack router and when you defer something like the sponsor's promise you're able to respond with this first bit initially and then have the rest come in later so if I go back and I reload the homepage you will see from the network tab that we immediately get a response that includes all the things we need for the core render but it's still loading some stuff what was happening there if we look at the long request is that the rest was coming through later it was all being streamed in over time the content download here being 4.81 seconds is because get sponsors for sponsor pack was intention slow yeah so this call was slow it takes some time to load and as a result this didn't come through immediately but we're able to still serve the route with some of the data as we wait I also want to do that and cancel I wanted to like show that the HTML content is incomplete initially and it gets fixed later non-trivial the quickly demo oh that's also where the server transform comes in oh that makes sense disable cache I don't want to disable cach I want to entirely stop this from loading once the first load has happened I'm going to switch this to offline once that first load has come through theoretically the page content now should only include the random number loader data yeah random number and then we see the sponsor's Promise is still in the Deferred state so the random number comes through immediately when the page loads because we're not deferring that but the sponsor promise doesn't come through immediately because that's deferred until it's done so the page can respond immediately and then resolve any promises later on as needed really cool stuff the only reason this isn't resolving now is I actually turned off networking on my tab but if I switch this over to fast 3G I'm going to need to refresh cuz I'm sure that killed things then you'll see this gets updated once the page loads where it's no longer just the random number now we have all of this data all of these uids and things that are coming from the sponsor's promise that was deferred here so again in remix a similar pattern where you can just defer part of a promise that you're returning from a loader super cool and this is important because on a given page you might have some components that can load later but some you want to have load as soon as the page is there so at a loader level for the route you can determine which should or shouldn't block to compare this to the new react model though one of the really cool things is instead of at the route level saying this data blocks this data doesn't you can at a component level say this component needs this data this component doesn't because it's not asking for it doesn't await it and then you wrap them in suspense instead that said this is one of the nicest patterns I've seen for doing this this way and when you want to think in terms of here are the routes here's how they work instead of here are the components here are the routes that come out this is looking to be one of the best ways to do it although again still very early that does not mean I am not hyped on this though CU this is really cool Stu quick call out from Tanner it's not done yet but theoretically it's possible to do static site generation so if we go back to my diagram here instead of the HTML being done on load it would be done on build so you could have a bunch of different routes that have different HTML where normally with a single page app you have one HTML file for every single page this would allow you to do way more while still not needing to run a server very promising stuff there isn't a good way right now to generate 10 different HTML Pages for your react app you generate one and then the react code runs on the client or you go all in on SSR an in between that doesn't require a server to run on each request is really exciting stuff and I'm hyped to see what that looks like again we were to draw like a like lines here between these where these are different amounts of like server involvement in how your content renders I would say next right now looks like this where it's very much leaning into s or rsc's but you can do some stuff with SSR they support next static which would fit in between here static export but I'll be honest static export isn't super well supported at the moment and my faith in it goes down day by day where what Tanner is doing here right now it's very much like this but in the future if he gets the static site Generation stuff working it could push more and more into this direction which is very exciting and if people push hard enough and server components get to a state that are interesting to Tanner it could also push slightly into this direction too but right now it's fitting squarely in the SSR way to do things next next static export do these I cannot recommend static export right now if you really want that just use V this is a very compelling new entry into this world also for those wondering remix also very much fits here I know they're working on some more Spa stuff I haven't played with it enough yet to say for sure but it seems like these two are explicitly trying to position themselves more into the spa world as a a happy path to have good HTML for every route where next in server components as a whole are rethinking where does our code run and render in the first place didn't expect this to become a breakdown of RSC versus SSR versus Spas but I feel like half the time I talk about react this is what it ends up being it doesn't mean I'm not hyped on what Tanner's building he has historically been one of the most useful and important figure heads in this community for building stuff just like what he showed here I am really hyped for Tan stack start and I will certainly be playing with it more in the future let me know in the comments what you were most excited about that's all I have to say about this one till next time peace nards




## New York Times Sees 30% Perf Win By Switching To React...18_ - 20240723
ever heard of New York Times possibly but more importantly have you heard of spelt the framework that originally started at New York Times by Rich Harris who at the time was an employee of New York Times it might seem like a journal like New York Times would be the best place for a developer like Rich to make a framework as powerful as felt but when you're making the types of crazy data visualizations that New York Times likes to do starts to make a good bit more sense because crazy data visualizations with thousands of points being scrollable and explorable on any device computer or phone or whatever else is a tough problem to solve that's why Rich started working on spelt he wanted a good solution that took some of the learnings he had from other Frameworks like react he has a bunch of awesome talks about that I'm sure they're popping up on the screen now check those out if you haven't they're all great computer build me and apps one of my favorite talks ever but that's not what we're here to talk about today because in order for Rich to make spelt he had to do a few things one of which was heavily heavily used react the reason he was using react so heavily is because it's the framework of choice at New York Times and that leads us to the topic for today very interesting piece of news that came across my plate just recently the New York Times site upgraded to react 18 not 19 18 and they saw some massive performance wins so even though they're the house of spelt literally the place it was built they're still using react and they've done some very interesting things with it to make it performant learning from their spelt history from other Frameworks and from what success and failures people have run into using react and also very fun thing this article is published through medium just thought that was funny anyway anyways let's talk about how the New York Times able to meaningfully enhance the performance of their website using react 18 this is going to be a fun one I'm actually excited I I know react 18 has a lot of optimizations but I haven't seen them in practice at scale and I'm actually quite excited to see how we got here also love the illustration of the glitched out evolving New York Times logo as software engineers at the New York Times we place a high value on page performance SEO and keeping up to date with the latest technology and also literally inventing some of the latest technology so yeah this isn't just some crappy press this is very technically advanced stuff and also I don't think we appreciate the level at which SEO is essential to a business like New York Times you lose entirely if you're not one of the first results that comes up when people Google things for those of y'all who are old enough you might remember amp the standard that Google pushed as like an alternative to HTML 5 and JS to be served on your pages so that if somebody's looking on mobile they can see a preview on Google slightly faster the only people who ever consumed amp back in the day were news sites because they needed to compete with other news sites and they were all fighting for any inkling of an SEO boost they could get yeah it was an awful standard for doing these like embedded partial stories and like you could click it and it would open up all using these very specific standards in order to rank higher and make Google's life easier indexing things it was an awful standard it's entirely dead now but the real ones remember amp so yeah if you want to know a lot about SEO talk to somebody who works in the Press they know it better than almost anyone else in the entire world so I trust them when they say this with those priorities in mind the release of react 18 stood out to us as a significant and tangible Leap Forward in the ever expanding world of web development for our react based sites this upgrade promised a performance boost and access to exciting new features last winter we set out to embrace the powers of react 18 on our Flagship core news site along the way we encountered some unique peculiarities both in react and in our own site that we had to learn to navigate through in the end we achieved big performance gains and we unlocked a whole world of future improvements that we're still exploring before we dive into our process for upgrading let's take a look at a few of the major benefits and changes in react 18 smoother rendering with concurrent mode oh concurrent mode the most overused and weirdly shared thing H oh concurrent mode I could go on a long rant about this let's see how they summarize it first though re 18 introduces concurrent mode a paradigm shift that allows for simultaneous rendering of updates and user interaction this translates to smoother animations less screen Jank and communitive layout shift and a more responsive user experience 18 also comes with automatic batching and transitions to take full advantage of concurrency react 18 automatically batches State updates within a single render cycle optimizing performance and doo by breaking up tasks in the main thread which is a big shift from prior mechanics where almost all tasks were synchronously executed the introduction of the new used transition hook also allowed Engineers to ensure that certain sites will update without blocking the UI really fun Point here if you're not familiar Amil with what it means by the states changes being batched let's imagine that we have two use States in here we have const a set a equals use state zero cool we have three now import that kill all these well show them all button on click handle click cool use client that I bad react is hard Okay cool so now we have a0 b0 C 0 want I click they'll get set to random numbers so when they're referring to batching what they're referring to is the fact that all three of these changes are happening within the same function call so instead of a happening then B happening then C happening the rerender gets held up until all three are done if I was to console.log here ABC changed ABC I go here I console we show here it logs twice because react renders twice in Dev but when I click it's only rerunning once even though I made three state changes if I wanted to show you how you can think of it working before if I had a set timeout here and did the C change here I'll even put a zero for the timeout time there you'll see a slightly different behavior when I click it's logging twice now and the first time it rendered with a zero and then it rendered after because putting this in a set timeout effectively pulled it out of this event Loop so when these other two functions ran react knew okay this is a state change this is a state change once all the state changes in the scope are done trigger an update and don't trigger the update until then but since the set timeout didn't technically occur within this closure and within this function being run it's being posted later on I can even change to set immediate thank you for the reminder of that chat and it will behave the same except react get mad the said immediate it's not defined why are you lying to me don't lie chat anyways set IM media is not a thing for me at least right now so set timeout we go with for now but yeah the point I'm trying to make is that these are all creating a stack of changes and since this is being put after this function call after this event when you call the set timeout that means this will trigger another update later on so we get the extra update here because this is happening the way react used to work and the way a lot of other libraries work is effectively like you wrapped the set timeout for every one of these calls not that they're all being deferred but when you call set a it would render the component with A's data change and then it would call set B and it would render it again with B's change and then it would set C and it would re-render again with c's change that's what's different with react 18 is when you have a pile of State changes happening within one function like this they can be batched together and not trigger an update until all of them are done really really powerful change there's also exciting new features in 18 Beyond these performance wins including things like server components serers side rendering streaming updates Etc all really cool stuff the performance games were particularly important to us because they promised significant improvements in our interaction to next paint scores inp is meant to measure the responsiveness of a page and it's the newest core web vital series of metrics that Google uses to rank websites and search results SEO scores are vital for a news organization and improving our inp scores has been a difficult challenge for us making this react upgrade a high priority and high stakes initiative remember when I said that the biggest SEO hackers are News and Press sites see what I mean here they're going to push everything as quickly and hard as they can just to make sure they get every ounce of potential indexing they can get so how did they actually do it let's read about their migration process the first step was removing deprecated dependencies everyone's favorite seems like they finally killed enzyme oh God that's so painful uh yeah for those of y'all who are new enough you might not remember the the dark days of testing with enzyme enzyme's really high on my list of Airbnb libraries I recommend staying as far away from as possible enzyme was a library for testing your JavaScript compon comp specifically for testing react components you used it to fake a render of a given component in order to make sure it did what you expect so you describe my component it renders three food components so you have a shallow call to my component and you would check it using their helper stuff so expect rapper. find Fu to have length of three the best part is that shallow rendering didn't actually use any of reacts anything so you would often not be able to actually shallow render but then when you use the full render everything was hell it was it was rough it was it was not fun at all I had a lot of pain with enzyme and I've been very thankful to not have to touch it ever again since testing library is the recommendation now testing Library started funny enough by Kent dods another fellow content creator and it has quickly become the go-to not just for react but for writing unit test for UI on the web as a whole way way way better solution there's no need to use something like Puppeteer when you're just making sure your component renders what it expects testing libraries what ended up winning and won for a reason awesome that they were able to upgrade to it but it sounds like they had to manually migrate all of their tests in order to do it which is not fun in the slightest in terms of time commitment this might have been the biggest piece of the entire project enzyme was used in hundreds of test files across a repository only hundreds better than I expected but there were thousands at twitch moving off this would not have been valuable it required significant manual effort as well as dozens of poll requests to fully replace it we accomplished this effort over the course of several months with incremental poll requests in order to accommodate other product work and avoid developer fatigue at the end of the effort we definitely felt like experts in testing Library reacts API we're thankful to move on to the react 18 upgrade itself Foundation setting the second thing they had to do once the test files were handled we could begin work on integrating react 18 in order to accomplish this safely we first started by upgrading all of our major depths types and tests to conform to react 18 without implementing the latest features themselves this involves simply upgrading everything from types react react test renderer react Dom and testing Library the latest version in our package Json files in acrosso repo upgrading all major dependencies also involve refactoring some tests and type definitions to conform to lest versions as well and then step three turning on the engines once we felt confident in our package upgrades we ready to safely integrate the new functionality of react 18 to turn the features into reality we need to utilize the latest apis create rout and hydrate route we have several instances across multiple web servers where we've integrated react hydration with a set of shared UI components rendered between all of them so was important for us to enable react 18 functionality in as many places as we could at first glance it looked as simple as changing references from react. hydrate to hydrate rout was it really it won't be but one thing I want to highlight here is that they were able to upgrade to react 18 relatively easily their issue wasn't that upgrading to 18 was difficult it seems like once they upgraded their dependencies they were pretty much good to go there's almost no notes here about it at all but then when they wanted to enable the new features that's when the pain started so if you're worried that react is leaving you behind that you can't upgrade new versions cuz you're relying on these old things you're probably fine it's once you start adopting these new features while working on a giant code base that things might be harder but also we have awesome articles like this to help you and your company ease your way through it unexpected challenges as developers it's easy to get overconfident when you hit the deploy to production button your end to-end integration and unit tests are all passing you've covered QA across various surfaces and devices and you're moments away from getting the last feature out the door we all felt that way when we initially deployed the latest version of react the New York Times site soon after initial deployment of the upgrades we encountered a problem with some highly trafficed content namely on a content type that we would call embedded interactives interesting I was under the impression that a lot of these embedded interactive things were done through spelt not react so I'm curious what they have to say here so here's an example where they have a thing that's showing you how this Cyclone for this major hurricane is traveling across the world a custom bed interaction built by our Graphics developers yep in the graphics development team that's the team that rich was on so it's all is making sense in New York Times we use custom embedded interactives which render server side using dangerously set in HTML these interactives have their own HTML links and scripts and they all run independently of the react tree again this is why they were using spelt for it and a big part of what informs spelts design this allows the editors and journalists to inject one-off self-contained Visual and interactive elements into our Pages without having to alter or redeploy core infra embeded interactives are the key to some of our most impactful reporting they can also pose real challenges for devs a simplified example by look something like this this is actually a really nice Focus example we have this embedded interactive string which you might notice is just a string with this HTML which has a document event listener added for this particular ID with server test and now we change the content to be client so on server this gets filled with server and then once it's loaded on client it will be selected and replaced with client pretty sensical pretty simple not something I would actually do but it makes sense and then you return the div where you dangerously set the inter HTML that value so now when it runs on the client it can spin up the script tag and do what it needs to I do this stuff far too often in the setup the script modifies the server test elements content from the server to the client after the page loads this works because browser rendered scripts execute before react hydrates to the Dom it's essentially a black box where we trust the injected HTML and its scripts to behave as intended how do we hydrate this though this is where it's going to get fun enter react 18 with its stricter hydration mismatch requirements if you somehow don't know what hydration is yet you should go check my deep dive react server side rendering video it's an important concept the quickest lldd art here is we have an HTML page that was generated on the server and now we have react coming in to take over react needs to know what the button in the JavaScript Code maps to in the HTML so the way it does that is it reruns the same code that generated the page on the client and it attaches each of those elements to the thing in the HTML already but if when it's generating it makes an element that doesn't perfect match the one already in the HTML it gets confused and it doesn't know what to do that's what a hydration error is the most common case for that would be if you have a page that uses new date and it renders that on the server and then it calls the same code to render that on the client but the client and the server are in different regions now the like actual HTML content with that text that we built on each side the server is going to have a different time than the client does even if they're in the same time zone they're running at different times so the results going to be different that's an important detail that often gets missed with the hydration stuff is if the server and the client generate different results that's when the mismatch occurs so everything you can do to make that render as simple as possible is really beneficial so in the example that they had here even though the script tag was modifying the server test element before hydration in a hydration mismatch react would discard the server rendered content and fall back to the client side rendering essentially nullifying the script's impact in previous versions of react even if there was a hydration mismatch the react team opted to leave the version of the Dom in an valid State as opposed to re-rendering it entirely on the client and this is why they didn't have issues in the past this is actually a fair thing I didn't know this about react 18 where they changed the behavior where in react 17 they would leave the old info and react 18 they would nuke it in favor of the stuff that the client was rendering I think that's the better Behavior but in a weird case like this it's unintuitive in practice what does this mean well when rendering the components on the client using the dangerously set in HTML prop any bit of HTML that contained a script tag inside of it would not run due to browser security consideration ations this means that any embedded interactive that is re-rendered on the client due to hydration mismatches using the dangerously said inter HTML prop will essentially render as if the JavaScript had never been executed in our example above the text content will change from server to client but on a hydration mismatch it will render as server this is a lot of info I'll do my best to break down why this is actually happening it's an interesting Edge case I ran into recently when you load an HTML page like if we load this page we check head this has a bunch of script tags in it it if we scroll far enough or I just command f for script you'll see we have a bunch of different script tags these are all here when the page loads if you add a new script tag to the page after the HTML has loaded it won't run it this is very unintuitive and it's caused plenty of issues and plenty of things if you have some JavaScript that then adds a new script tag to the page on the client side after the page loads the browser doesn't do anything with it because that could be used to inject things far far far too easily so because of that what was happening here is the HTML being sent down with the script tag was getting deleted and then the JavaScript would read it but since it's adding a script tag after the page rendered it wouldn't evaluate that script tag so the stuff wouldn't run yeah so this made their embedded interactiv look wildly different from the expected render interesting yeah it just didn't render the content because it was nuking it and using the server rendered content instead o o yeah so their script tags were broken because of this so how did they handle this given that 18 was significantly more sensitive to hydration mismatches than 16 we essentially had two choices in front of us the first was to fix all potential hydration mismatches in our site the second was to adapt embedded interactives to remount on the client as a fallback should a hydration mismatch occur this left us in a bit of a dilemma the New York Times had published millions of articles with hundreds of different components in tens of thousands of custom embedded interactives of course we wanted to fix all of the hydration error mismatches that we had so how can we we do this in a safe way in the end we decided to tackle both problems at the same time extracting and executing embedded interactive scripts manually I'm scared already this will be fun we know that script tags when added via the inner HTML prop or during a client side render will not run automatically because of browser security considerations so how do we get around this script tags will only run when manually appended or replaced as a child node to another element in the Dom this means that in order to properly run script tags we must first extract and remove them from the interactive HTML and then append them back in the right locations in the embedded interactive HTML when the component renders so here's the function or a rough idea of the function they used for doing this so This replaces the script tags in the generic HTML with empty placeholders so they can replace those script tags in place later on client mount with the actual script oh God so we have ADD placeholder replacement text empty string hoisted text script text placement text script ID use the ID you put the script counter hoisted hoisted text replace interesting so we are using these script tags that are being defined as soon as you load the page so they are have the right permissions to run and then when the client side code updates instead of it just putting it in line in the HTML it selects the specific existing script tag to update its contents instead because again the rule is that the script tag can't automatically run unless it's there initially it's not that we can't update the content of it what an insane hack this is the script that extracts and removes the script tags from interactive HTML strings and then it returns an object containing the scripts to run on client and the scriptless HTML that has all of the scripts with empty script references insane absurd solution they had hydration errors and they decided to become the water boy hilarious so you might be asking why not keep scripts on the server and then rerun them on the client one reason why this is not possible in some scenarios is that some script tags clear variables globally instead of within a function closure if you want to pre-render those script tags on the server and then rerun them on the client you would encounter errors due to redeclaration of global variables which is not possible that's actually a very interesting point they couldn't just rerun the script after having it there because you can't reinstantiate the globals the script expects to be able to run once that's fun because if you were to navigate to a different page and navigate back it probably would have broken as well but JavaScript is hard we all expect this the initial solution fixed many of our embedded interactives unfortunately not every Interactive plays well with an arbitrarily ordered script execution here's where we navigate some nuances script load ordering some interactive scripts when appended back to the embedded interactive HTML must be loaded in the correct order oh God this is going to be fun previous script execution strategies automatically assume that all script tags had already been declared and pre-rendered on the server now that we're stripping out those script tags and we're remounting them on the client some inherent logic based on these principles is going to break let's walk through an example okay so we have the script tag con results document. getet element results manifest enter HTML election results and then we have interactive content and now we have another script tag that has these election results as a global object that could be accessed because we're getting the element by ID and we're getting the inter HTML election results okay in this scenario we have an initial script that searches for another script tag by ID then it utilizes some existing logic based on the inter HTML of that second script tag in the previous iteration since script tags used to be pre-rendered on the server there wouldn't be any issue referencing a script tag by its ID as the script tag would be available in the Dom by default yes as long as all this HTML is there when the page loads this earlier script tag can access things defined in this later script tag because it has access to the ID because it is in the HTML but if you're adding these back later on those guarantees go away for optimal interaction script execution needs to follow a specific order when reapp to the Dom this involves the following first we have to append non-functional manifest scripts that contain static data then we have to execute scripts that have a source attribute with asynchronous next set and finally we have to append and execute scripts with vanilla JavaScript in their inner HTML fun this sequence prevents scripts from referencing each other before they've been properly loaded makes sense the fact they have to do a prioritization cue for which script tags to reapp to the Dom is kind of insane let's see the actual performance benefits they got from all this though after integrating these very fine-tuned almost Surgical manip ulations of our embedded interactive code we felt that we were able to safely release react 18 into the wild again while we would never be able to extensively QA nearly 40,000 custom created embedded interactives we were able to rely on a few reusable templates that the graphics team often returns to this led us to validate specific behavior within our spelt or our Adobe Illustrator based embedded interactives oh God in the long term we're committed to squashing our remaining hydration mismatches and achieving complete peace of mind but in the short term we're ready to push the deploy button again once we released the new features and we spent an hour nervously monitoring internal alerts for more issues we saw an almost immediate performance Improvement that's pretty sizable going from the like 500 milliseconds to initial next paint down to under 350 is pretty nuts that's a sizable Improvement and the median even dropped quite a bit here too that's nuts as you can see from the chart the inp scores in the p75 range dropped by roughly 30% before the upgrade one of our biggest challenges had been the frequent rerenders on our new site that would happen as the page loads this caused a poor user experience as well as subpar andp scores when the user tried to interact with the still loading page after react 18 our renders were cut essentially in half that's kind of nuts that's an insane chart and people say react isn't helping everybody anymore that that's crazy that's like by just upgrading react versions which admittedly to get these new features caus them some pain but just bumping react versions cut their render times in half that's nuts these two very visible and important improvements are the direct result of react 18's automatic batching and concurrency features this gave us a very clear and positive indication that we were moving in the right direction also note that the automatic batching concurrency features didn't seem to break anything cuz there was no covering of that the things that broke were the new hydration mismatch behaviors not any of the performance wins historically react's able to find these performance wins that don't break real code almost ever this is also why things like the react compiler are so exciting because you can run it on existing code and 99% of the time it is just going to work and make your thing faster that's awesome react has to do that because they're used by Facebook on gigantic massive unbelievably large code bases so they care a lot about making sure upgrades don't just work on every codebase but benefit every codebase so it makes sense that they had a good experience here because as big as New York Times is they are still smaller than Facebook so where does New York Times go from here the integration of react 18 has already resulted in significant improvements for us opening the door to a wealth of previously unavailable possibilities we're now focused on exploring the potential benefits of new features like start transition and server components our core intention is to continuously bring our inp scores down and improve overall functionality however we are mindful of questions that we still need to answer about these enhancements for now our primary commitment is ensuring the stable and reliable performance of the current react version we used apparently they were able to upgrade other sites as well because they were so confident that the new site upgrade went as well as it did and they saw similar performance gains we're able to get our inp scores out of the pore Zone before Google's March deadline and we saw no negative SEO results when it became part of the search algorithm like to think that our readers are enjoying the slightly snappier experience and our Newsroom continues to put out powerful and interesting interactives every day without having to give their rendering framework a second thought that's awesome shout out to Ilia for writing this blog post this was awesome it's really cool seeing the actual benefits that real sites and services and developers can have by just upgrading versions and if you're a Dev at a company like this that's on an old version of react give it a shot you now have a blueprint on how to do it well thank you for sharing this information this is a great article and until next time peace Nars




## New package makes animation easy in Tailwind__ 👀 - 20241224
after a lot of work I'm excited to announce Tailwind motion a plug-in designed to make adding animations to your project effortless with presets and infinite customization it's built to help you animate faster and smarter here's why you love it oh boy this is going to be an exciting one as much as I love Tailwind it doesn't help you much with animations you can do them in Tailwind but you do it by adding them to the config and doing all the work yourself the idea of animations that I actually feel like I have control of at a component level is something that doesn't associate with Tailwind in my brain and I am really excited to dive deep on Tailwind motions with y'all as well as some of the Alternatives including this cool new project I just heard about called glaze before we can go deep into glazing all these cool things we need to hear a word from our sponsor app right the all-in-one backend platform built for us react devs what does that mean let's take a look they built an all-in-one platform that is everything you need from off to databases to functions to storage and even more even Niche production things that you'll need like automatic database backups all huge essential stuff what does it actually look like to set it up though obviously I'm picky about file uploads is the creator of upload thing but I haven't seen upload code that looks that simple other than hours still really cool though and that's what they have for everything including but not limited to realtime sync and not just on the web by the way this works great on mobile especially react native you can almost think of these guys as like the what Firebase should have been and if you're worried about them owning all your data you don't have to be because you can host it in your own cloud and it's open source if you want to just go do it your own way too it's a full open source platform and what they built is pretty legit and while they work great for react and next devs like us you can clearly see they work for everything else too so what are you waiting for go give aight a shot today check them out at soy dev. link slaight oh boy I'm so excited to see why I'm going to love this I already just from the syntax here really like where we're going let me pause on that syntax motion rotate in 45 motion ease spring bounciest so it's going to rotate in 45° so when it comes in it's going to rotate it it's also going to Spring the animation so it's going to go back and forth after yeah you have my attention check it out at rambo. Tailwind we made the API intuitive you want a slide and fade effect just use motion translate X in 25 motion opacity in zero or op for a preset like motion preset fade for a quick implementation I cannot tell you how many projects I have put that effective preset in like any one of my real projects we'll just click pick thing we'll go to my Tailwind config and sure as hell in every project I have made I have been rewriting the same fade in and fade and down code fade and down starts at Translate Y -10 opacity 0 and then it goes to opacity 1 translate y0 and standard fade in is just the opacity part I even had a fade in slow which is for things that are going to take a second to load it's a little CSS hack I do where I can start the fade in later it still feels just as fast what from 50 to 100 is the same but 0 to 50 doesn't show anything so it won't show bad loading States and whatnot animation accordion down according up fade in slow but like I have to write all this boiler plate in every single project I have using Tailwind because I want to be able to do a fade in if you want to know how serious I am about a project go look to see if I've added the fade in animation class if I haven't I haven't put that much time into the UI and ux yet if I have yeah interesting what do you have here isn't this just tail when CSS animate a plugin for creating beautiful animations oh apparently this already existed and it's by Jamie interesting I could probably have used this already good to know that this exists now we have yet another thing to compare against so we have Tailwind animate we now have Tailwind motion and as I mentioned before glaze is also an option before we go to the site wanted to quickly call out the tail in motion is pure CSS so there a Zero Performance hit it covers a lot of cases out of the box but if you need more it's fully customizable adjust durations delays or even create custom animations unique to you very very good to see they also open- sourced it I just gave it a star even though my face is covering it I promise I actually did because I am very excited to see this project and where it goes let's take a look at the site I like this as is like an example with the homepage showing all of these demos a typewriter presets actually dope this is one of those things that's like really annoying to DIY that just having built in as CSS is really dope that's really cool I I might use this just for that honestly I have a few places that would be dope motion preset Shake another classic where it just goes does a little like Shake left and right when you hover over it rotate in not as common a use case but when it's useful it's useful being able to do translations like this where you move X and Y without having to preset create in your config huge and bounce not the most common thing really nice for it to be that simple it's accessible it's got a simple interface while still being customizable and it's performance tested and optimized again it's all CSS so it's not going to affect your runtime performance in any meaningful way you just include the tail and CSS motion plugin and from there it is very easy to use all of the cool things that they have created what does FL Moji do oh a confetti one built in that's really cool pop blur the blur in is actually I need this for pck thing right now okay we're installing this and setting it up on pck thing let's do it we get to add that nice look at that I already had tail when CSS anime I forgot yeah these animation things I built here these are not part of what's built in like I had to build these myself and as far as I know T and CSS animate requires I write those still if I'm wrong please correct me today I learned I want this right now though so we're going to motion preset I'm going to blur down see how that looks so if we go to an image component image TSX animate fade in slow no longer motion preset blur down I am so excited to see this oh I think I still have the like animate fade in on other oh this one I actually need the fade in slow for so we're going to undo the change I did there and we're going to put it in here instead that looks really cool that looks really cool I want to kill the the grid animations though at least the fade and down honestly I'm just going to kill entirely see how it looks find all my animations cuz I have a lot in here that are kind of trashy yeah the image grid needs that killed for sure that one's fine layout pieces that's fine and then those I don't know oh oh I figured out I have the C the Tailwind animate plugin because I'm using Shad CN I didn't install that Checkmate CSS people it's weird how inconsistent they are that is my immediate oh I know why it's because this doesn't come in until it's loaded because of the weird loading State hot swapping code I have here I kind of to move this to the whole thing I'm going to regret that let's see how it looks though that's kind of nifty not going to lie that looks pretty solid already without doing things right oh do I not have this in um transparent images that looks great and that was so little effort and I suck at CSS o that is good let's keep reading I want to know more if I'm committing to I want to commit rbo creates tools for Creative marketers designers and Engineers shout out to them for making this and also open sourcing it these are the types of things lots of companies will like sit on and hide from people and they are not doing that do they not have docks it looks like this is their docs I understand making docs is hard oh cool the is using Astro but the only page is the homepage yeah rip see the dev go V image thing to make them show in the same time yes and I DIY a similar thing but if you have the link that'd be useful cuz I kind of want to use his I had built mine around the same time and just didn't bother playing with his enough I want to try the typewriter one out it's just motion preset typewriter let's try it on the homepage I'm so curious how it actually looks2 I want the text here this paragraph yeah do I need to put something like this it' be cool if it had real docks that's like the biggest hesitation I have here is it doesn't have docks pick thing is the best ass that's great love that thanks okay so it doesn't quite work for this type of use case because you have to put the number of characters that it is Ren and it only will do one line of it but what are the chances that we we told we have the best ass I'll take it these are the things that having real docs can be really helpful for and I get they're still early I get this is a a fresh release but it's a little sad everything else here seems awesome I don't see the customization especially without like documentation like it shows that I can pick these different numbers but how do I like wait and then do the f that's the thing I often have to do is I want to do nothing for an amount of time and then I want to fade in and it's not giving me quite that level of control so I don't agree that it is that configurable at least in its current implementation there's obviously a lot of potential I want to emphasize that this is still early oh they have a delay okay never mind there's a delay that you can apply which is very very handy and apparently their GitHub has something a little closer to docks oh yeah this is what I was looking for the delay is the big thing I was missing that is really good and will make my life much better then they have the translate modifiers with positive and negative for from below and from above really nice they have that baked in I always felt weird about the negative for things in Tailwind being in front of the the noun just cuz math but when dashes are used to separate things and to represent negativity it's hard combining works fine for exit simply replace in without in the class name okay that's really cool I didn't think they would have exit animations um usually that's really hard to do with CSS I want to know more we're going to play with that let's go back to images let's add a Fade Out Images motion fade guess R preset fade I want fade in no I guess is what we would want motion opacity out zero usually this doesn't work because when you're remove the thing from the Dom the amount of information that CSS has when you removed it is too low oh I know what's happening because it's pure CSS the addition of this class triggers the fade out so if you wanted to do this programmatically you still have to do a lot of the code yourself so you have to have like a whatever code removes things needs to First add the class name so this is what you'd have to do is motion opacity out zero is currently removing and have this currently removing state that exists in between when a user removed it and when it actually gets removed so you have to apply this by hand before you take the element out of the Dom believe it or not this is one of the things that react native gets really well that the kind of sucks at is you can't block the removal of an element on an animation so I can't say to the browser hey when you try to remove this image please do this first and that's why things like frame or motion and other animation libraries that run in JavaScript are so useful because there's no other way to do this there is no way to on removal of element do animation unless you write it yourself in JavaScript or use a library where it's written in JavaScript but this concept is exclusive to JS which kind of sucks because CSS animations can do so much and go so far but the only way you can do this is to remove the element after and manually handle the CSS in the interim but that's also why these other Solutions are so interesting let's take a look at glaze a utility based animation setup for the web it's built on top of gap which is a powerful animation Library allows you to create complex animations with little code Gap is dope and I am nowhere near smart enough to use it the things they do in gap are not things you can do with just CSS green sock is nuts and you as they say you can animate anything JavaScript can touch delivering silky smooth performance and unlimited or in unmatched supports you could focus on the fun stuff I will say usually when you have a website that's this heavily animated the performance is trash it is surprisingly smooth to scroll around this site they know their and the amount of anim like this is insane it's actually insane so a library built on top of that that is in a syntax I can actually understand somewhat okay I can actually understand might be a little bit of a reach here but we'll dive in data animate interesting so you have this data animate property that we use to specify what animations we want so if I'm understanding this correctly then in at small so the display port is small or larger for following Tailwind rules then we want to have a duration of one start with Alpha 0 rotate 180° and move y up 50 and then an ease and out for how it actually eases yeah that looks right so it rotates 180° it moves up 50 and it fades in from zero so Auto Alpha I'm assuming is it goes to one and you're telling it where to start this all makes sense is so far Define custom break points and animate elements at different screen sizes using at size syntax use a gaps match media so this is very similar to Tailwind you can compose timelines using at TL so this is a concept of timelines very interesting you can use dot notation to control nested properties inside of the animation object for example two colon scale 1.5 bar scroll trigger to trigger and then the and symbol here interesting I don't know if I'm smart enough for this one we are going to dig in and see syntax you have the breakpoint you have selectors by default animations are applied directly to the element itself however you can Target other elements using selectors enclosed in blocks so here you're saying you want to animate all sub H1s this is actually clutch this I was not sure it would have and I am positive the motion one doesn't have it this is winning me over to glaze now actually oh boy the ability to say I want every sub H1 or image or whatever else to do this specific animation especially if you can also Trigg animate out with this okay you're winning me over can't believe I just flipped everybody from one solution to another the at symbol refers the parent element allowing you to specify child selector you can even do it with media queries that's very interesting they are from and two states which is where you're starting from and where you're going to if all stes are defined the animation will run from the initial state to the final state so from opacity 0.5 to opacity 1 makes sense 2 y% 10 animation object spef properties to animate chaining properties two opacity 1 y% 10 now these two things will happen at the same time two is in twwo not to although both fit here funny enough important message from Gabriel that I probably should have brought up earlier this one is not for people who are new to animations and it is not for Simple Sites I agree I I will say I feel more than ever there is this gap between simple animations and I guess real ones where stuff like what we just saw with rombo gets you really far so much of the time there's also cool stuff like Auto animate which is a great Library I covered in the past one my first viral videos which lets you import their javascripts and from that point forward your stuff is just animated so when I click in Auto animate and I move up it just does that for you you didn't write any code to tell this to animate this way you just add a raft for animation parent and you're done and it works in pretty much every framework you have V Auto animate and view Etc so if your goal is to just add nice-ish interactions to something like oh this is the buttons do all that but like just sorting flipping like that which is really nice clicking to remove things and having it all move around these types of things Auto animate does really well but as soon as you need any level of customization you're screwed something like what we just saw with rombo and Tailwind motion lets you have a good bit more granular control but nothing around removals so there's a checks and balances here where this solution is pure CSS and works great with Tailwind but you don't get control over how things get removed from the Dom at all and then you have stuff like Gap and now glaze where you get full control but that means you need to know a lot very very interesting seems like more than ever we have a ton of great options I went in pretty certain of what I wanted and I'm honestly coming out a bit more confused but also quite a bit more excited there are a ton of awesome options now more than ever and I'm curious which ones you guys like the most are you hyped about Auto animate in JavaScript do you like the direction the Tailwind motion is going are you all in on gab or are you just using view transitions to letting the browser do its thing until next time Fade Out




## Next 14 Reveals React's Taint, Solves RSC Safety Issues - 20231025
so react just showed me its taint and I'm really excited with what I've seen yeah crazy naming but I think it's important to talk about this so without further Ado let's get started yesterday I was flying back from twitchcon and as soon as I got on the airplane I saw an article from Sebastian mark bidge from the react and nextjs Team all about Security in the new server component model in next and if you don't already know this I've been pretty concerned about the security of the new server component model for a bit and this post helped address a lot of my concerns and also announced some really exciting new Primitives to help solve these problems including the long awaited taint so without further Ado I'd love to show you what has been revealed to me by the NEX in react team here's the article how to think about Security in nextjs thank you again Sebastian for writing this I think it's a really important thing for us to discuss react server components in app router is a novel Paradigm that eliminates much of the redundancy and potential risk linked with conventional methods given the newness developers and subsequently security teams may find it challenging to align their existing security protocols with this model this document is meant to highlight a few areas to look out out for what protections are built in and include a guide for auditing applications we focus especially on the risk of accidental data exposure this is the important piece there's a lot of subtle ways that you can accidentally expose data and if you follow the practices of this page it becomes way less likely that you're going to encounter those problems I really like how they broke down these three different data models here where they recommend any of these three methods either HTTP apis data access layer or when you're in the early prototyping stages component level data access I do like that they have made it clear you should pick one of these three approaches and stick with it and not mix and match too much obviously for examples these component level data access has been really nice but these other models make much more sense the HTP API one is relatively simple pretty much exactly what you would expect it's basic recommendations for using existing API endpoints or graphql endpoints using fetch to get the data either on the server components or in the client components directly doesn't really matter which you use server components will allow you to send way less clothes to the client and prevent a lot of data waterfalls as they call out here which helps a lot with performance so obviously doing that on the server is great if you can but it shouldn't feel necessary to do such this is where things get interesting with the data access layer the best I can TDR this is they're effectively recommending you put all of the things that access data call your database stuff like that in a single location either one object that's exposed from one place or One Directory in your code base that is well audited and focused in such as putting everything in a data directory and making sure everything in there is tagged correctly as server only so in these examples they show get current user which is a cached call uses the token from your cookie and then it decodes it and then it Returns the user using this but if you wanted to get more stuff from the user such as the permission to see their phone number they use this term dto a lot in here they specify below here data transfer object which is the object being transferred from the server to the client and it's important to make sure all dto are safe for the client to consume so in here get profile dto gets the the current user which has fields that you probably shouldn't be exposing so here we actually check each of these fields can see username if so we return the username and can see phone number if so we return the phone number otherwise we do not return those fields they stay null this makes it relatively easy to make sure you're only sending the fields you're supposed to as great as this pattern is I don't think it's enough and especially in large code bases it would be easy for small things to slip through and for a value that maybe shouldn't be exposed to get exposed through these patterns so how do they recommend handling this if we scroll down down a little bit further so how do we keep these values from getting exposed incorrectly well there's two pieces first is the serveron package this basically guarantees that a file will only run on the server so if you're worried about Imports leaking or like accidentally including Prisma when you're just wanting it to be the client bundle server only guarantees that a file will never be able to import on client and it will throw lots of errors and builds if anything goes wrong there really convenient way to make sure that the file itself isn't exposing things to client it shouldn't be at that point only the return values are the things to be concerned about so how do you assure those aren't making it well this is where the taint comes in yes I know it's a crazy term but Sebastian CHS it for a reason it was supposedly his goal to get us to talk more about security which clearly worked because here I am recording a video on my off day so the new taint API is fascinating it lets you explicitly say this data cannot be passed so if you take an object you wrap it with this experimental taint object reference now when you try and pass this to a component you will get an error this data is no longer to be passed to a component so here if we pass the user data it will fail if you extract values out of this by hand such as you grab the name and the phone number from this get user data call and then pass those you're good this makes it much clearer in code review and in day-to-day Dev which things should or shouldn't be passed to the client side and just to be really clear if this wasn't a client component if it was a server component here it'd be totally cool to pass a tainted value to it this only matters when the client is the thing receiving the value vales because these props are encoded into the elements and into the JavaScript and into the HTML that the user ends up getting on their device so it's really really important you don't pass values here you don't want to pass normally we would be sure of this by looking at our open API specs looking at our graphql schemas looking at those types of things but in models like this and even in models like trpc it's important to go out of your way to make sure the values making it to client are the ones you want to have go to client not everything that comes out of your database call this is where things like select star get really scary and I'm really thankful we have an API like this to help prevent it this isn't just for the object level reference though they actually have a taint unique value call here where you could say specific keys inside of an object are tainted and need to be careful so do not pass tokens to the client so now we'll be sure that the token on this data object does not get pass to the client and even this does not block derived values and again as they specify here it's better to use a data access layer to access this data and carefully audit that layer to make sure that the thing being returned such that they can be past two a server component are safe always and one of the patterns I recommend with this is something like trpc and carefully auditing all of the returns and all of the stuff in your trpc router so that you're sure the clients are getting things that they're allowed to access in no more or less data than they're supposed to have I'm happy they touched on SSR versus RSC here I think it is an important distinction to understand that with rsc's there's code that only runs on the server and this code is kind of the default now which means that you will have values that you probably would never have accessed in nextjs just inside of the code in your react server components because not all of the code you run in this new model makes it to the client you can kind of move that security bar where you want to you can audit your components carefully and make sure all of those are passing value safely or you can build the data access layer or you can do things the old HTTP API way but because of the strength of this new model we now get to choose how we secure our applications but we do have to make a choice and that's kind of the theme of this article and obviously everything we've talked about thus far is is just about reading values there's some really good call outs in this section such as anything accessing your API should probably have a cookies call in it because if you just off at like the top level like right when a page is accessed everything else will still be exposed because all of the things you can get on an endpoint are exposed both as an HTML HTTP access route as well as a Json endpoint that is used within nextjs in order to do things like navigate on client side a couple more important call UPS in the read section is that rendering a server component should never perform side effects mutations I think this is really important you should be able to hammer Refresh on a page or hit an endpoint with get an infinite number of times and the worst that happens is you get rate limited you should never have effects or side effects or anything that changes occur when you're rendering a component and I think it's a really good call out to point this out especially since double rendering and patterns like that are still possible even in the server component model so again be very careful that you're not running mutations or things that are destructive in your render path those should be done under actions which if I recall is the next call out here right the idiomatic way to perform rights or mutations in nextjs app router is using server actions actions are making a ton of progress they actually just entered the official experimental react build so as we see here server actions have now finally officially entered react Canary which lets you make an action or a mutation that is scoped to a component level or scoped outside of the component with really really clean clear relationships between your forms and the actions themselves you can also call these async us server functions as just promises on the client side which is super powerful it's almost like a mini RPC layer built into react itself love this pattern love what you can do with it still making a lot of progress but we should talk about how to make sure you do it securely because there are some unexpected gotas before we go back to the article I actually want to demo one of the ones that I was super concerned about when I first saw it that I think we can work around now as a community first thing we have to do is go turn on server actions so experimental server actions true so now we have server actions on let's do a quick simple simple demonstration first thing I want to do is wipe out all the contents of this file cuz there is way too much junk in here I do not want or need this is a very minimal example the one that was in the docs wasn't great so I made my own here we are getting some secret pretend that this is an environment variable we're accessing or some data that is specifically private to us that we want on our server but we don't want to expose to the users everything we're returning here is either a server component or just jsx so where would there be a security issue here doesn't seem immediately like there would be any problems right well going to show you the thing that is scary about this particular pattern in this particular model Fun Run Dev and now if I go to Local Host we have our publish button and when I click this we look at the terminal we'll see secret is secret 420 cool so that code runs when we click the button it runs on the server so again what's the issue well if we take a look at the data that has been encoded here in fact I'm actually going to search for secret what's that why is that in there well if you see the form that we created we actually have a couple hidden fields that are automatically put into the HTML the reason that these fields exist and the reason all of this junk so to speak has made it into the HTML that we created is that react and nextjs are using this to identify which action to run and what context is needed for that action to run correctly because in that component we are creating this value it is in the scope of the component and we need to make sure that this value is still there when this function runs and there's no guarantee if we rerun the component that the value that was here will still be the one inside of this so next needs a way to have all of the context that this function needs inside of it there is one hack or I guess there's a couple ways we can get around this the first easy and obvious one is move the async call here now that this value is enclosed within the server action instead of being defined outside of it you will no longer have to worry about it leaking into the form and if I refresh we go back to this form you'll see all we have here is the hidden action ID which is again used just for nextjs to identify which action should run in the case that we have something like three actions on the same page so now this is totally safe let's go back to the article so we can see much more about what isn't isn't recommended with this model one important detail though is with the next 14 release these enclosed variables will actually be encrypted with the action ID so that you won't be able to decrypt them on the client side so instead of that exact value being leaked over there will just be an encrypted hash there instead this should prevent the majority of the issues possible with this model from happening but it is still something we need to look out for and ideally you won't have these values being enclosed in this way one additional interesting thing is to get back this old Behavior without the encryption you can actually bind values to your action directly like this where we want delete post to have this ID defined when the function runs and we can actually bind it by calling delete post. bind null comma post. ID this is a really interesting new pattern I'm excited to see how people use this to make powerful epis that let you do things like inline deletions without any JavaScript running on the client there's really really cool opportunities with this pattern this pattern is really exciting and I can't wait to see what people do with this even for stuff that we're doing with upload thing I see a lot of potential with these patterns for binding values to actions to give users access to the right data in line all the time if you're already familiar csrf is cross site request forgery it's a method used to access data on other websites by stealing cookies from the one you're on and forging requests to access things you probably shouldn't because everything in the new model is on the same correct host it's much harder for csrf attacks to be viable as they specify here server actions are always implemented using post and only this HTTP method is allowed to invoke them this alone prevents most csrf vulnerabilities in modern browsers particularly due to samai cookies being the default what this means is you can't get this end point so you can't expose the cookies through stuff like if frames and other insecure methods that would allow somebody to click a link hit an endpoint they're not supposed to with a cookie that they still have and now that attacker can access that data I'm not good enough with security to be the right person to break this down it's somewhat common for people to use forwarders rewrites and lots of other patterns to access data they're probably not supposed to by abusing cookies and by checking origin and host and doing all these things especially enforcing post as the method for all actions you're able to prevent a lot of these types of attacks that all said HTML sanitization is crucial because if somebody renders HTML they shouldn't be able to inside of your app they can still have a lot of these types of issues so again you got to be real careful with how things are being rendered in your app but as long as you're not dangerously setting in HTML or rendering HTML straight from database or user defined values you'll be safe more often than not and one last call out here I think it's important if you're using custom route handlers as in you're defining your own posts puts gets deletes in your next app those will still need to be audited more carefully as those are defining traditional endpoints and none of the built-in protections are going to protect you there one more thing I hadn't even thought about was error messages and the possibility of them exposing values that they shouldn't the way that they've handled this in the new next model is in production the server sends hashed IDs to the client for what error occurred and then the server keeps track of those errors so you can check those in your logs and still have everything you need for for something like Sentry or highlight to work as expected when debugging it's important to not accidentally leak like a credit card number in an error and I've built things like this even back when I worked at Amazon to make sure we weren't leaking data that we weren't supposed to it's really nice to have this built in as the default production workflow one last cool call it they made is what to look for if you're a security researcher or developer that is focused on security they call it a bunch of important things like using validation make sure us server files are taking arguments correctly and are accessing and posting data that they're supped to that use client components aren't taking props that are insecure stuff like that I love this article I think it's really going to help us take a step in the right direction with security with this new model most react developers haven't thought much about security because that's been the API team's problem and I've seen all sorts of chaos from storing tokens and local storage to just returning weird data in the HTML directly so the client can have access a lot of these patterns are much less important in the new model but we also now as front end developers have to think a little bit more about how we're getting our data and is it secure or not as the entire industry moves towards the full stack Direction it's more and more important than ever that we think about security with every change we make thank you to Sebastian for writing this article I'm really excited about the future of this new model if you want to hear more about the benefits of using server components and what makes them so fun and enjoyable to work with I'll pin a video here where I break them down in depth if you've already seen that or you're not interested there's a video right below it that YouTube seems thinking going don't like thank you guys as always appreciate you a ton peace nards




## Next.js + TypeScript FINALLY fixed__ BIG CHANGES!!! - 20221126
[Music] we got some things to chat about boys if you all know anything about me it's probably that I like next.js and typescript I do I wish they liked each other a little more thankfully they're starting to it's really cool to see the amount of work versel's been putting in to better working with and understanding typescript over the last few years today they announced a really cool change that I am super hyped about they are building a typescript plugin what does that mean well I could tell you or we could watch the video where they announce it so I'm going to choose that let's do a reaction because we don't do a lot of these and they're easy content and I'm actually really hyped on this video so let's watch it from the next JS team has worked on a typescript plugin for next.js check this out so the first time that you run next Dev in your next.js project you're going to receive a prompt to enable the plugin now if you click allow this will set things up for you great the plugin as we can see here has already spotted our first error if I hover over the reality value we can see that it should be a number and not a string we can also start to see another feature of the plugin in context documentation or without having to leave your editor now let's add another option const dynamic so something I want to call out here because it's a huge change one of the problems in typescript is that it exists within like javascript's ecosystem and capabilities what goes on here that wasn't possible before is like these Keys these random variables like Dynamic params revalidate these values are just random strings and random keys that don't have a type because those are as far as typescript knows just random variables that exist as such we can't really type them in traditional senses there has been some work and discussion around a file API where like a file name level you could enforce or enforce expectations on what specific files export and what values they have in them but that's maybe going to happen in the future if the next teams decided they don't want to wait they're going to build a plug-in that sees these Keys being exported from something in this directory and it throws a type error it overrides the built-in type system to say hey if there is something exported at the top level and is named revalidate the type of that is in a number it is make sure it's a number and they can write crazy definitions in there and give you like hints give you links to docs give you the docs themselves but the reason they can do that is they stopped waiting for the typescript ecosystem to give us the things we need to build those type defs and instead said screw it we're going to extend typescript itself and you will see here that we get all the available options with a brief overview of what these options do and I can quickly select the value I want to use by using my keyboard now if I hover over an option it will give you more information about that option so here's a quick tip if you're exporting multiple options you actually may find it nicer to group them using a comma what happens if I try to import use State into a server component you will see here that we get an early warning reminding us that server components don't support state hooks now let's change the server component into a client component using the syntax use client and you will see here that use date is now available lid option if I move use client below my imports you can see here that the plugin will help me catch the mistake so with server components you can't use things like traditional State Hooks and something like use client being a random string you put at the top of a file isn't going to tell typescript hey you kind of can't use these things but the idea of using a typescript plugin to change the definition within the file and the expected type definitions of things in it at that typescript level is super valuable because it's not editor specific it's in typescript and you can validate that through CI as well I would argue this is a must use thing when you start using the app directory it makes life so much better when you're using these patterns I also saw a question that somebody asked like can't you do this with jstock no you can't jsdoc doesn't have a plug-in system the string use client being at the top of the file means nothing to JS doc a random export named dynamic params means nothing to jsdoc JS doc when you're importing things can put type definitions and things on it but the very existence of a thing with a name and a file that is an imported or maybe isn't even exported that isn't something you can do via standards right now those are not implemented in any of the apis for any of these systems you have to build your own plug-in architecture to do this this is one of those like heavier lifts that not many companies or teams are able to make because the typescript plugin architecture is it's rough it's hard to do but they were willing to put the effort in shooting worked super hard on this if the result is Best in Class developer experience that can't really be done in other places without a lot of additional effort being put in even though we are using use client it doesn't actually take effect because it's not defined at the top of the file if we move the directive backup to the top bam no more errors I love this vlogging sure great job and this is just the beginning in the coming weeks we plan on adding more features such as autocompleting props and types for layouts and pages and also warning you when you pass a non-serializable prop from a server component to a client component stay tuned good stuff I'm pretty hyped it's a big launch should be included in next projects in the future suggestions in autocomplete here's a cool example with the docs in it when you type in revalidate it has the docs on what different behaviors do and how they work it's so good this is like life-changing I am so hyped I am so hyped this is this is one of those things where like once you have it and you see it you're like oh yeah probably should have had this forever and then you start using it you're like oh [ __ ] yeah that's obvious this is like the SSD moment where you move from a hard drive to an SSD it's like obviously better and you go back and it's like so painful to do it revalidate on a set date uh that's tough because that like you can't do that in code because this is like hard code values and to date something that you're likely going to change regardless super hype really pumped this is finally happening I I this is one of the biggest overdue pieces that really makes my old blog post irrelevant that I've waited for forever we're finally here I hope this one was helpful and if you haven't already subscribed after watching this pile of videos that's on you not me only half of y'all are subscribed for some reason it's free buttons right there it's also a like button probably over bearish hit that and check out the new video being recommended there thank you for the time hope you enjoyed this one go make some type safe code peace nurse




## Next.js 15 Is Here (Vercel Ship Breakdown) - 20240524
for sell ship just happened from next 15 to firewalls to AI to GMA wearing a white shirt finally to shouting out Dax of all things and you all out there with no users yet this is a very interesting event not too much massive news but enough small things I think it's important to go through that here I am on my day off filming a quick video so I can go over this with you guys before I go any further though I want to be very very clear this video is not sponsored I'm not being paid to make this I work with forell and other content pretty regularly but this is my genuine thought and beliefs about what happened here no money has been exchanged theyve not seen this video ahead of time they have no opportunity to approve or change anything I've said here this is just how I feel about this release with all that said let's dive in before we get to the juicy neck stuff which is let's be real the reason you should be here let's go over the quick two additional announcements first first is the forell firewall this is I'll be frank a little overdue most of the web just relies on cloud flare as their way of dealing with random dos style traffic and that's fine Cloud flare is totally fine for that but put Cloud flare as your CDN in front of something like vercell has historically caused all sorts of weird caching issues that aren't Pleasant to solve and vercel should be the ones doing this nice to see that vercel is actually taking this problem seriously and giving us the ability to quickly set up rules to keep people from destroying your websites and making your bills go massive nice to have this finally in haven't tried it yet but it looks really good check out the blog post if you're curious the other fun thing they rethought feature Flags they actually shouted out Jane Wong when they brought this up which I thought was really cool because if you're familiar with Jane she loves leaking features and products by going through their feature flags and finding things that probably shouldn't have been there so I worked at twitch I was always curious how they did feature Flags turns out once you don't work at twitch and you look at it it's actually kind of hilarious okay I knew this when I was there but seeing it outside is even funnier you load any page you see this huge settings thing load I just threw this in vs code so we take a better look at it there's a key in this called experiments experiments is every single feature flag on Twitch you'd think that these uyu IDs would off you skate it pretty well but they also put the name of it these are the names that they use internally for all of these things so if you want to see any of these features like chat pause on Hover by default 100% of people are in the control group 0% are in the treatment group if you just manually swap these values around suddenly you're going to see this feature all of the features twitch is working on that are already shipped are probably in this file somewhere which is kind of hilarious because that's how almost every website that does feature Flags Works they're super insecure and hackers like Jane can go into these files go into these mobile apps and just flip these values around and now they can see everything you're working on which kind of sucks this is why versell is building feature Flags more deeply into versell because that should be happening on the server not on the client as soon as you let the client do all of the feature flag work you have now allowed the client to see every single feature that might exist in your app if the server is not the thing generating the UI then the issue you're running into now is that every possible State the UI can be in has to be encoded in the binary the user has be it a mobile app or website Co didn't think this problem seriously haven't really used this too much I know my CTO has he says it's really good so far excited to see them taking this stuff more seriously enough about versel though what we're here for is nextjs 15 to be clear it's an RC but to be clearer it's not an RC because it's not ready to ship it's an RC because they're blocked on something they're blocked on react 19 it's still an RC because they're waiting for react 19 to be the official release and not also an RC the moment react 19 ships I am positive next 15 will be the official release within a few hours if not minutes so let's take a look at the actual things that here cuz there's a lot of fun stuff obviously if you want to play with us today you can just npm install next RC you can also use the new create next app RC to get all the fun new things they change and create next app still not as good as create T3 app by the way but good to look at regardless so react 19 the next CH app router is built on the react Canary channels for Frameworks you might not know that you might think oh but I put react 18 or 17 in my package Json fun thing about next is that at this point in time app router ignores what you put here and just loads what ever version of react it actually needs with 19 shipping this will finally be over and you can just have the right react version in your package Jon and no more weird side loading different versions to get things actually working very exciting to have this change finally next a5's RC now supports the react 19 RC which includes new features for both client and servers like actions awesome cool you've already learned a bch about react 19 by now hopefully if not you should check out my other videos all about it one of the cool things in react 19 is the compiler technically you can make it work in 18 but it's not recommended you really should be using 19 if if you can not doing the weird polyfills for the additional things that the memoization needs and now it just works I was skeptical of this because I had a hell of a time trying to set up react compiler on our upload thing code base before they added this feature but then when I updated to the most recent RC of next I literally just changed two things in our config and it was good to go no code changes just config changes and it worked and was faster I haven't done benchmarks yet I haven't had time to sit down and really analyze things but this looks really promising and I am so hyped that we can just adopt the react compiler by installing it and then adding the experimental flag for it make sure you also install the eslint rules though because the es lint rules will make it much easier to follow the rules of react so that you actually have code that can be optimized you also can opt Into The annotation mode where you can tell react on a given component do optimize this don't optimize that using the Ed memo directive still don't love having directives for all these things but at least we have an option now speaking of things that weren't great but are finally in a usable State hydration errors we finally have actual errors what hydration failures occur they start working this at 14.1 but it still wasn't great now we have actual useful errors here previously you'd see the specific elements that were different but now you'll see an actual diff P class name was paragraph on the client but server text was the content on the server having actual diffs for what the client and server disagreed with is going to make life much easier when you're debugging complex hydration errors I find most of mine are simply some weird stuff with date but it's cool that at least in this case we'll get a real error finally also they even call it in the notes here that date. now or type of window like these are the things things that cause it the most and that's absolutely been the case from what I've seen speaking of things that are confusing and hard to debug cashing has been overhauled not quite how I would like but in a way that is very very much better and at the absolute least is listening to what the community wants because they killed all the weird cashing by default stuff that everybody was so upset about fetch is no longer cashed pages are no longer cashed by default everything makes a lot more sense here my Hut take is that the missing piece for caching was never the behaviors it was almost always the developer tools because we don't know what is isn't being cached it's just very hard to get that information when you're working on something in next or any other tool that does a lot of heavy caching stuff on the nextjs side if we just had good tools for analyzing this like you know we have in the browser for browser tools and we could just do something similar on the server to actually see what was happening I don't think the cash itself would have been as big of a deal but the lack of that has made it very painful and as such the default behaviors have to be very obvious like stupidly so sadly some of those behaviors were unobvious in even stupider ways like get route handlers being cashed by default I still don't get this one I still think this was insane if you have a route. TS file in nextjs at least the old version I'll be clear export function get I return new response here let's say this is like a date time instead so I'll do like new date. to local string perfect so I have this end point and when you get from it we return new date2 local string up until this release this would have generated by default a static Json file that would have been what gets served whenever you call this endpoint are you kidding this date would have been set during build and then never changed again that's a terrible Behavior if you're exposing a get you want it to be dynamic almost always if you want it to be static you can make it static in a billion other ways just made no sense nice that they're finally fixing that one I still have hot takes about the fetch stuff you check out my video about that if you're curious overall nice that these things are getting way easier for us to understand how the next patterns and caching works but this is less a massive update to caching Improvement in how we can adopt these tools and the DX around it more a walk back of the things that were way too aggressive that weren't communicated or understood well enough to be sane defaults this is still just one step in the long process of figuring out caching over time I've heard that they're working on more things I have not seen them I don't know if they exist yet I actually have quite a few reasons to believe they don't but cashing is still a very very early story and that's why unstable cash is still called unstable cash the other a ways to go oh actually they say here we're continuing to improve cashing in nextjs in the coming months and we will share more details in the next js15 general availability announcement cool so keep an eye out for that because they might actually fix cashing yeah as we said fetch is no longer cash by default finally no more of these cash like overrides they're just done oh apparently this is the web fetch API cash option so this already exists in web fetch nice that's cool so it still has the caching thing but it's opt in and web standard Now isn't that nice you still opt into cashing fetch request by doing any of the following setting the cash option to force cash in single fetch setting the dynamic route config option to force static for a single route or setting the fetch cash route config option to default cach to override all fetch requests in a layout or page to use the force cach unless they explicitly specify their own cash option nice you have to be explicit about cashing now probably always would have been the case the get thing I already said silly they didn't do that before but also client router Cache no longer caches Pages components by default the amount of random things I ran into with this one is insane this is like if you were using the new next stuff and you went to a page and then you went back expecting it to be different and it wasn't even though you forced a new navigation that's cuz it was cashing the page component when it probably shouldn't have been and this Behavior was not communicated at all this one sucked so having the default stale time now be zero for Pages means that navigations will always get you the latest information as they probably should navigating these apps is going to be fast anyways this is fine the thing that will be cashed by default though is the loading file so remain cashed for 5 minutes or until the value of the stale times. static configuration is hit I'll make sense to me backwards and forwards navigation will still restore from the cache but if you click to go to a page you were on before again like you never forward to a page again then it will be cash busted as it always should have been very nice here's one that's important to me I have been a partial pre-rendering Fanboy since before it was even a thought because I was pitching partial pre-rendering to versel to Dan abramov to basically anybody who would listen to me since I discovered the pain that was serving your first bite from a Lambda the harsh reality is that if you're waiting for a node.js instance to spin up before you can send any data to your user that experience sucks being blocked on a page that is a blank white page for sometimes 300 100 milliseconds to up to a second is insane and while yes once you're navigating and you're waiting for new data to come in or you're sending a post or something like that a 300 millisecond penalty is not a big deal navigating with that penalty sucks it genuinely does and the goal of partial pre-rendering is to make it so things that can be fast will be fast because they'll just be cashed and if I can cash a static page or a static shell of my page so that you get it immediately and the rest comes in later cool sadly adopting partial pre-rendering was a bit of a because there were so many pieces that might just break or be set up correctly even when they announced it it was still not working they had it working on forell in for but they didn't have it working in next yet which is a funny Quirk but now it works obiously to sh on any of my major projects because we're still on edge on upload thing that's a long story I could do a huge video about but one of the big things that is going to make this easier to adopt has just been shipped you can now adopt partial pre-rendering incrementally so previously when you opted into PPR every route would try and generate a static shell of some for a lot of routes can't generate static shells or have a lot of reasons why they probably shouldn't like authenticated or behind a wall of some form but now with incremental I can adopt on specific routes this caching behavior and this generation Behavior so for like my homepage my terms of service my blog all those things within upload thing can be cached on a CDN even though everything else gets streamed in and on every other page it's fully Dynamic this is awesome this is how it always should have worked I'm genuinely really hyped about this I know that longterm their goal is to let you just turn it on for every route and they'll figure it out but they're still figuring out how to do that so we got a little bit before we get there one more very exciting thing I did a video that touched on part of this before which was wait on tell on versel you're not familiar with these behaviors when you use a traditional serous environment like Lambda and you send a response as soon as that Lambda sent a response the instance dies so if you want to do some things after you respond like send some logs to post hog or send some data to Sentry or keep track of some analytic stuff all those types of things that you want to do after the request is completed would die before they could be done because the server dies when the lamb is done responding which is not a great Behavior you can kind of work around this with streaming but it's not trivial wait until was an awesome addition because it lets you say hey don't kill this until this other work is done what if you don't want to start that work until after the response because it takes some CPU it takes some Cycles it takes some time you want to get the response as fast as possible you want to cue this work up for as soon as that work is done that's what next after is for and it's very exciting I kept an eye on the pr for this one for a while unstable after it's one of Lu's first big contributions she she might have contributed more she's a wizard she's one of like the earliest people like Allin on uh server components in nextjs so her working at for sell and contributing to these things is awesome huge shout out to Janka very excited to see what she contributes going be more stuff like this I'm going to be very hyped with her contributions because now you can just call after unstable after is after because again it's very early so they're still calling it unstable after but now if I want to do some logging after we send a response I can just call this in a component it's fine I can just log this whenever I feel like and now I know that it will eventually make it to my server or run at some point and it won't block my user from getting a response as fast as possible for things like analytics this is a GameChanger I am so excited to be able to just drop analytics anywhere in my app that I feel like and not have to worry about blocking the entire service in the actual request that the user is trying to get a response for that's awesome I'm surprised that this hasn't existed before but I'm hyped it does now speaking of things I'm surprised didn't happen before create next app has finally been overhauled and looks a hell of a lot less bad I create a lot of create next apps so I spend a lot of time in this template I'll show you the current one so you can see the difference here so in the current create next app like this looks nice and pretty but the blue gradient a bit much the different types of text everywhere is also a little much giant layout and then the code for it is also a bit much like I love Tailwind but this is a ton of text to have inside of a getting started template it's just so much and I delete it every time just a little Annoying with the new template things are significantly better if I just run this as create next app at RC uh RC next 15 one more fun new thing here we'll get to this in a little bit so you can now turn on turbo pack for Dev as part of the setup process cool and now we have a much nicer much more minimal simple looking page they got rid of the big built by versell thing just nice simple clean we look at the code also quite a bit cleaner I know it's a small thing but just having a giant pile of text as the starting point was never fun and it's way fewer lines okay it's not as many fewer lines as I expected but it is quite a bit more minimal this is the original it's a giant pile of 115 lines of huge chunks of Tailwind there's nothing this chaotic in the new template still a little bit heavy for a template but really not too bad all things considered it's kind of just this one like div for the versell SVG with their fancy like round button otherwise nice change overdue cool to see a template that doesn't make me cringe every time I have to run it I did talk about one little thing in there though which is Turbo and I think we should talk about that turbo bit because previously you'd enable turbo manually by going into your scripts in your package Json and adding the dash dash turbo there was no vious way for anyone to just go add this like if you read the docs cool you know how to do this you can go do it nice but for the average next Dev was not clear what turbo even was much l how you could adopt it and if you're building with next app router and you can possibly be using turbo pack you probably should because it makes the dev experience significantly less painful turbo pack is the path that they've been building on to for a while now for how app router was intended to be built with and while it took significantly longer than they expected getting a lot closer I will say the roll of Turbo has been a little bit funny for me because we had the announcement that we had a ton of work being done then we had the alpha that was opt in through this and now the next release is that they'll prompt you and ask if you're ready to use it so we're still probably pretty far from this being the default and much further from it being ready for production there's a website are we turbo yet that they made and while finally all of the dev tests are passing for Turbo so as far as they know turbo should work great for almost all if not all developer use cases as an in Dev mode when you're not building the production bundles but if you switch this over to the production tests they still got a bit of a ways to go 82.6% of the next build tests are currently passing and as you know when you're trying to close things out like this the last 10% is where it gets really painful so I wouldn't count on turbo for production builds anytime soon I would probably expect turbo pack to be the default by next1 16 but the fact that the progress report here is they now ask you and create next app that's kind of funny hopefully we'll see this rust ReRe go well someday but as per usual I think writing things in Rust is more a hopeful act than it is a productive one and we're still a far ways away from having turbo pack be the Blessed path to replace webpack hopefully I'll be wrong about this and we'll just suddenly have a better web pack written in Rust but uh it's taking a while and my faith in this project has slowly dwindled it's nice when it works but we're still so far from it working for everybody that I'm I'm skeptical at the moment we'll see where we end up one more nice small thing that this is not for everybody but this is very much for me optimizing bundling of external packages bundling external packages can improve the colar performance of your apps in the app router external packages are bundled by default and you can opt out specific packages using the new server external package config option in Pages router external packages are not bundled by default but you can provide a list of packages to bundle using the existing transpile packages option this is nice because it means you get one bundle going to the server so it's much more performant because it doesn't have to orchestrate and find all these different things and load them all synchronously and block randomly on the network level just sends one thing when you combine this with another small announcement that they made about their infrastructure where they are now caching the bite code that V8 generates when you give it the JavaScript code so they can spin the bite code up immediately on the Lambda and Instead This is always going to help a lot with cold starts and overall response times when using nextjs in servos environments especially if that environment happens to be for sell sorry Dax does turn out for cell was making things faster than Lambda by doing things Lambda isn't yet someday Lambda will probably copy them I don't expect it to go otherwise and I'm sure there's still some overhead the way versell does things but it's really nice to see them challenging the current ways we do server lless both on a framework level and on infrastructure level and I'm excited to see how this comes out for everyone one more thing since the word Pages router is here which I don't actually think is on this page a whole lot yeah the only place Pages router occurs is this optimization thing but there is one other place that this occurred believe it or not they actually improved the page router performance I did not expect this but there's a performance Improvement only one according to the docs here at least of all the things shipped in the 15 RC in Pages router the old way of doing things pre- server components got a performance Improvement on server rendering I think that's cool I like that as they've been exploring performance side and server side rendering stuff but they're finding optimizations that affect users that are on the old Tech hopefully this helps ease the concerns that some pages router developers have that they're being left behind and app router is the only way I have had done good word from forell the pages router it's not going anywhere will continue to receive support like this so if you're shipping things on it which I even am to still to this day you don't have to worry so much this is a cool proof that that is the case that's all I got on this one let me know if you're excited about the infer stuff as well so I can possibly cover that in the future for now this is next1 15 and all the other small things that were announced at for sship maybe I should grab a white shirt next time because it seems like these black and gray ones are out of style but until next time peace nerds




## Next.js 15.3 A Huge Change for Vercel - 20250414
I need to be real with y'all. It's been pretty hard to defend Nex.js over the last 2 years. There's a lot I love about it, but there have been a lot of things that rightfully people have been upset about. There's even a few that I'm personally very burned about. Don't get me started on the Turbo Pack stuff. It's it's been a lot. That said, there's been a significant course correction over the last few months, and we're starting to see it really come out with the latest version of Next 15.3. There are a ton of useful changes both within the next 153 release itself and within the things going on around it. All of which are worth talking about and better understanding. So whether or not you're an XJS dev, I think this will be useful just to better understand where the market is going and how Versel is course correcting. If you are an XJS dev, this is absolutely going to be an essential watch. But as you guys know, Verscell does not pay me anymore and hasn't for quite a while. So someone's got to cover the bills. So we'll be right back after the sponsor break and then we'll dive right in. Generally speaking, when I'm starting new projects, I have a good idea of roughly what I want when I'm doing it. And using a CLI to do it is probably not going to get me there very fast. Today's sponsor, Bolt.new, really gets this. They're not some weird new startup doing AI generated apps. This is Stack Blitz, the company that made the only good editor in the browser and also invented the web container, which lets you run a full node environment in the browser. That's why Bolt is so great. They're the only one of these AI app platforms that runs all the code on your machine after you generate. So, it makes everything way faster and more reliable in your development environment. And it's a real development environment. If you don't believe me, I'll just show you. Build a fan site for corgi lovers using Nex.js. As you can see, it's already generating real code in a real editor as well as a real terminal that I can run real node commands in, which is just crazy. And once it's all done, if I'm happy with the results, it's literally one click to deploy. I remember when I first got the demo of this from Eric, who's the CEO and a good friend. He came over just because he wanted to chat and he showed this to me and I I just didn't get how it could possibly be working. And it makes a lot of sense that a few months later they're killing it and everyone's starting their sites using Bolt. It's really good. Wait, what? Okay, the sites are normally pretty good, but this is like annoyingly so. What? It even found good images of corgis. There's this one that's not a corgi, but that is not an issue considering how good this came out. And it's real Nex.js code. This is an actual Nex.js app router codebase. You take a look at the page, see all the things here, and it's even using Shad CNN. So, if you like the Shad CN UI stuff, here you go. It's all built in. I I still can't believe the other options don't have this. There's a hide chat button so you can just live in the code because a lot of us are actual engineers that want to actually look at and use the code from the project. That's also why they have an export button where you can oneclick open it in stack blitz or just download the code as a zip because it all exists in your browser cuz it's a real instance. More and more it feels like Bolt's the only one of these AI app builders that understands what we need as developers. And I firmly believe that just because I know the team so well and these are some of the smartest and most hardworking open source people I know in the entire web world. So if you want a great way to start your next project, check out bolt.new today at soy dev.ink/bolt. So what makes NEX53 so special? First and foremost, it is the build side of things because Turboac finally now supports builds in alpha. That means you probably shouldn't be using this for production just yet, but they've been using it for production already at Versell, which is really, really cool to see. They share some numbers underneath here. First off though, over half of dev sessions on Next 15 are already using TurboAC, so they've had support in dev for a while. All the projects I work in use Turboac. It is a massive difference. You go from waiting minutes for the dev environment to spin up to seconds and updates with the hot reloading literally happen pretty much instantaneously, like under 100 milliseconds most of the time. It's so much better and I couldn't work on a project the size of T3 chat without Turboac. It would just be miserable. The alternative would be VIT in the VT ecosystem which goes similarly fast but that doesn't necessarily carry you through things like the server and client side behaviors that Webpack and Turbopac currently allow. I still have to find a full stack vit framework that feels as complete in it implementation on both server and client side. That's why I find myself in next even if I'm throwing away a bunch of the built-in stuff. Their clear split and path for both the server and client side as well as the relationship between them is still very convenient. Waku is so far it is hilarious but thank you for mentioning it. Waku is really cool as a server component demo. It is not cool as a full stack backend plus fronted in one codebas thing. And Nux is cool but not even close. Anyways, Verscell has maintained this are we turbo yet page for a while now. Previously, it would default to development where they had a set of tests that were needed for dev environments to work properly for nextdev using Turopac instead of Webpack. And there is just one random error here left. The rest are all handled. Now, the site defaults to production where it's still not quite there because they have to pass 8,095 tests, but they are very, very close. They have 57 left and most projects should be able to at least build using this. Very, very cool to see. And the results going to be way better build times since this can take more advantage of multi-core multi-threading because Turopac was written in Rust and it was written to use these threads and to use your processor better. Four cores you'll see a 28% speed improvement. 16 cores you'll see 60% and on a 30 core probably not a desktop machine at your place but some worker in the cloud 83% faster builds. That's huge. Finally having scaling with our threads fundamentally changes the build performance that we should expect using TurboAC in building our next.js projects. This is not the only change to build though. Historically the build tools have just kind of been part of Nex.js directly. One of the main reasons Nex came out is so we would have to stop fussing with our Webpack configs and that's been great. But now there's another alternative for Webpack RSpack. And as of this release there is now officially community support for RSpack instead. So if you want to use other options that aren't fully part of the versel ecosystem, you can. Now this is huge. I never thought I would see the day that the deep tie that Nex.js has to Webpack and now TurboAC would be broken at all to allow other options, but Versel actually directly reached out to the RSpack team and I've been in touch with them for a bit about this stuff. They were so hyped because no one expected it. It really shows this change in the philosophy on the next team. Instead of just being an all-in-one set of pieces that you use if you need them and you throw away if you don't, it's becoming more modular where given parts can use the thing Verscell provides or the thing someone else provides, which is why this other announcement with the deployment adapters API is such a big deal. This isn't technically part of the 153 release, but it was clearly meant to be aligned with it. The goal with the deployment adapters API is to allow for Nex to be deployed anywhere, including serverless platforms with custom requirements. This is an important distinction because right now without any of these changes, you can absolutely deploy Nex.js wherever you want. The catch is you probably can only really deploy it in a Docker container because that's how you run Node applications. Verscel has built a really powerful infrastructure to split different parts of Next into different environments. So it's not just running in a Docker container. It's running compute in one place for your API calls and for your page gen. It's running a CDN somewhere else so it can serve static assets. It's running edge compute for middleware that redirects your requests. That separation is not fun to build yourself and it is deeply baked into Versell. And that's why Next is so nice on Versel, not because they made it hard to deploy elsewhere. There is no other framework that can be deployed to any other place that provides the level of integration that Nex does on Verscell. That's not because they built Nex to work that way. It's because Verscell allows it. And there are other frameworks too like obviously spelt which is built at Verscell now. But even frameworks like solid start I don't have a good experience deploying other places and the functionality is not as deeply baked especially the hybrid of static content semi-static content cache on the CDN and dynamic content. The integration there is really really hard especially when compute isn't just always running with a dedicated server. So despite the fact that you can absolutely run next on a dedicated server with no issues, a lot of cool functionality in modern X.js like incremental static revalidation, caching, middleware rewrites, and all these other useful pieces were not trivial to implement in serverless environments. The goal of the deployment adapters API is to make it easier for other platforms like Netlefi to support deploying Nex.js. JS due to their custom requirements. That is a huge change. It's also worth noting this is an RFC. It's a request for comments. The Versel team and Le in particular really want to hear from the community to make sure that if they do this, they get it right. They want to learn lessons from projects like Open Next to make sure that Nex.js can be deployed well regardless of which environment you want to deploy it to. And limitations won't be in the integration between Next and the environment. It'll be the limitations of the environment itself. It is also worth noting that the existing build output API that is the thing you build to to ship on Verscell and take advantage of all of this infra already is open and is a thing anyone can build integrations with. It'd be as far as I understand totally viable to port the Verscell build output like format to run on something like Netlefi and then you can just build it the next Verscell way and deploy it on your stuff. But different services have different expectations and if they don't perfectly align with that build output API, they're screwed. Which is why they're proposing changing the build output structure in order to make it easier for their competition to host Nex apps. That's kind of crazy. Think about this for a second. Like logistically speaking, Burcell is trying so hard to fix this reputation damage that they are spending a lot of money and effort and time and smart people's energy to make the build output of their like main framework harder to maintain internally for Versell for their product but also way easier in general to deploy. This is a massive undertaking to make life easier for their competition because they think that is important right now due to the fact that people have been harassing them about this stuff for so long. I still have the hot take that Verscell did not really do anything wrong in terms of support for other platforms, but the features they introduced were so cool and compelling, but so tied to specific infrastructure implementations that it optically looked bad that these cool new features were hard to do or not even viable to do on other hosting platforms. I also suspect that there are fewer and fewer of those groundbreaking infrastructure features coming to next in the future. So now is a good time to make this cut because I do not think we'll ever have another server component moment with Nex. I don't think we'll have another app router moment with Nex. The closest thing we'll have is the Turbo Pack moment when it's like actually ready. The question from Gabriel here is will this slow down the pace of innovation of Nex in the future. If the intent was to maintain the current pace, yes, absolutely. But I think the pace has inherently slowed down in terms of innovating within Nex.js for a ton of reasons. Be it the community outcry, the focus on AI stuff instead, the difficulty in integrating these things, the focus on making new infra primitives on Verscell directly instead. All of these things mean I would expect there to be much less innovation within the next.js framework directly, which means it's okay to take a hit, so to speak, in your ability to iterate by changing the APIs these ways purely to help competition. CHGBT now refers 10% of versel signups which is accelerating. Yeah, that's you see where they are going and adding more and more features to Nex.js is no longer the strategy for the next team and for versell the future isn't more features in next. The future is infra to better support the new types of apps and new types of developers who are building. The next is definitely more open. The way I'm thinking about this is weird. That's why I want to write it all out. For a long time, my favorite way to try new tech has been Versel. It's just been very reliable. The server primitives and the cool things you can do with it have been really, really killer. I've told this story a few times, but I got into Verscell as a front-end dev that had done a lot of backend in the past, but had mostly moved to front end that was working at a small startup with a really, really shitty backend team that was blocking me constantly. And I needed a few endpoints that they just weren't building for me that would hit an endpoint that we had like a specific API key for to get data that users needed. And I discovered a really cool thing, the slash API directory. My app was a React app built funny enough with Snowpack at the time and then I ported over to Vit when it got better. It's the last thing I did before I left this company. But with Verscell, if I deployed it there, I could add a directory named API, put a random TypeScript function in it, and all of a sudden that would automatically deploy to a serverless node environment that I could then hit from my app. That was magical. That was a huge, oh I can do what moment for me. Even though this was very much I ran the front end for this team, I was able to quickly stub out a specific backend function for a specific thing. This ended up being my introduction to the like backend for frontend pattern and it fully rewired my brain. Huge huge moment for me that led to the T3 stack existing was the discovery of this directory not with next just as a feature on Verscell directly. So as I've said before I got into Verscell way before I got into Nex.js. I thought it was an unnecessary abstraction because I already knew how to do Webpack configs and I had moved to V at that point. So the API directory and the ability to just deploy a Versell function by writing some TypeScript or Python or whatever else absolutely destroyed my brain. This ended up being the reason Verscell was my platform of choice. When I tried any new framework, be it an update to Next, a new flavor of Remix, Solid Start, spelt, anything else. Versel was where I deployed it because I knew Versel's infra well. I knew what it was capable of and it was the easiest way for me to quickly see the differences between these tools and technologies. I would regularly publish different benchmarks in tools like Astro and spelt and solid and I would deploy all of them on Verscell because it was the easiest way to test. In fact, there was a while where you couldn't run Next on Edge. So to test Verscell's edge network, I was deploying Astro on it because again Verscell was the best set of primitives for me to play with a new tool or technology and I found myself using them all the time in that way. Other platforms have caught up in meaningful ways. Netleifi has their own really cool stuff nowadays too, especially on the queuing side. They are killing it over there. But I still find myself reaching to Verscell simply because it's the one I'm familiar with and I understand the relationship between their primitives really well. So I think this is what's going to change a bit. Not that I won't like using Verscell, but almost the opposite. I use Verscell to test new frameworks. When a new framework comes out, the first thing I try to do is deploy it on Versell. I see how that goes. What I think's going to happen now is hopefully I can use Nex.js to test new providers. The same way I use Verscell to try out the new spelt version, I see a future where I use Nex.js to try out the new Cloudflare worker stuff. That would be very, very exciting for me. That would be a huge exciting opportunity to test out the performance characteristics, cost benefit of different providers and all of the other things you need to know about a given provider when you're making decisions for your business. all the things I like to talk about, I like to consult about, I like to help other businesses with the things that you guys are all here to learn from me. It will be significantly easier for me to test out the new stuff they just shipped in Cloudflare like shipw week if I could deploy next on it super reliably with an existing open standard for doing it. I see a very exciting future where the same way I use for test frameworks, I can use Next to test other competitors. And my guess is they see this future too. They know that their infra especially things like the fluid compute stuff are far ahead enough that if you can deploy next with all of its features other places you'll still see a better experience on Verscell. I think it would make a lot of sense for them. There are a couple other important things in this release. Client instrumentation is a very nice change. Now there's a specific single spot where you can introduce instrumentation for your client. So things like sentry and highlight are way easier than ever to add tracking for. Also generic error handling and stuff like that. really nice to see. They already had this for server side, but having it client side too, it's really cool. Also means now more than ever, I think there's an opportunity for somebody to come out with a minimal alternative to a product like Sentry that's also very AI integrated and ready and kill. So if you are building that and are interested in chatting, my DMs are open on Twitter. Would love to hear more. The the future is now and now is ready. Hell, I've been ready for like five years for a minimal sentry alternative. So please somebody make it happen. Oh, I didn't see this. New navigation hooks to enhance client side routing capabilities in Nex 153, so you can develop localized loading states to implement complex controls like navigation cancel on navigate is a very useful addition to the link component. The use link status client component hook returns a pending boolean that indicates whether navigation is in progress. That is so good. That's so good. Custom load stages got a 100 times better. I'm hyped on that. the these are the types of changes that make it so I could theoretically actually move off of React Router for T3 chat. I'm not going to do it, but it's a lot more viable than it was prior. They made the plugin for TypeScript much better. Cool to see. I barely use it. I always forget about it. And I'm not using enough like next internal stuff that it's super useful to me anymore. But I really want to test out these build speed changes. Let's see how fast I can build T3 chat with it. Pull latest. Kill my dev environment. I'm a little behind on next versions, so forgive me. We're going to do a run build on this. See how long it takes on the current 1516 that we are on. Build failed because of Webpack errors. Joy, what did I forget? Attempt two. So, building on my maxed out M2 Pro takes about 50 seconds. Good to know. 28 total. I hate how these numbers are split, but it it felt like 50 seconds. This is a build without Turboac to be clear. Just doing another build on the latest version to make sure. Well, still almost exactly the same amount of time without using Turboac. And now for the moment of truth. The Turbo Pack build. 11 seconds. That felt hilariously faster. Turns out this number does matter. This is CPU time because holy that was significantly better. What I really want to see though is how much faster is this on Verscell's infra like actually building Theo next turbo version bump. Also fun thing if anybody wants to build this um there is no good command to create a pull request for where I am like the GHPR create is super super comically slow. The closest thing I've been able to find is I use lazy git. I press three and then I press O to open up the tab for making a pull request. It's by far the fastest because it hardcodes the URL and I've been unable to write a custom command to do it because lazy git won't take arguments to then trigger this. So Zodia can make like a super simple oneline thing. So I don't have to open up lazy every time I just want to open a PR because I do that. It's like instal LG30 because it's the fastest way by far to do it and it's annoying. I can never tell if you're trolling at any point, dev. Add a GitHub MCP server and let cursor do it. The problem is the latency. Adding three to 10 round trips does not make it better. All I want is to automatically open the URL with the right stuff once I've pushed the branch. This one is not fast. This command is very slow. This is what I wanted to do, but the GHPR create does like four round trips before it can actually generate it. And even better, it will fail if your content for your description is too big, which happens automatically if you have enough commits. So, it's very fun. And by fun, I mean entirely broken. Oh, the build's already done. Okay, let's check out deployment speed for that. Not much better. Did I not I I committed the turbo change, didn't I? Get status. I did. Oh, that's a good call out. I didn't know this. Turbopac currently always builds production source maps for the browser. This will include project source code if deployed to production. Is that your bundle size may be different from next build with Webpack. This will be improved as we work towards stability. This build is without discaching. Subsequent builds will become faster when disc caching becomes available. When comparing output to Webpack builds, make sure to first clear the next.js cache by deleting the next directory. Okay. Why was this not more faster though? Like we have builds that are faster than that already. If I go make like a useless change here, I'll change the 404. Let's see how long this build takes. Yeah, chat is suspecting that the slowness is because it had to download all the packages again because I changed package lock, which makes sense. We will see how it performs now that that part at least should theoretically be cached. Yep, we're we're over what our shortest builds normally look like already. Yeah, the the compilation step there still took over a minute. We scroll back up here to uh creating optimized production build like when it started 3253 gave some warnings and then it was 3340 it was done. So almost a minute of just compile it says 46 seconds. Yeah. So, similarly, funny enough to when I tried showing off the roll down performance theoretical wins, I'm just not seeing it much. Like, if I deploy a brand new V app, the build time will be like 15 seconds, but a decent sized next app still in the 1 and a half to two minute range. But like our production build, our last one just was adding a missing icon 57 seconds. It's not much faster here. My guess is that the boxes that the builds are running on are single core because historically multi-core has not benefited the build performance. And I would hope that they're going to buff up the build boxes alongside this change. Maybe give the multiple cores. I I was hoping for more there though. Let's see if the preview build works, though. captures will likely fail because I have them set up for this URL. Yep, knew that. But everything works in the build. That's cool as hell. Seems like it's productionish ready, but I was hoping for a bigger PF win. If you run your own build pipeline, this could be absolutely massive, but the deployment pipeline is just not seeing a meaningful change yet. Sadly, I was very hopeful it would, but on my machine again where it has actual multiple cores to use for it, it's comically faster. 6.3 seconds for the compilation step for the entire project is hilarious when previously if I unturbo it quick time pm run build. So here build took over twice as long total. about the interesting number here. Compiled successfully in 15 seconds versus 6 seconds. 6.3 15.0. That's a huge difference and it's one I'm very excited about, but that's the only number that could theoretically improve here. Another fun thing I'm just curious about, uh, what's the HTOP alternative everybody tells me to use? I have it installed. BTOP. That's what I thought. Thank you guys. Cool. So, running once again, not using TurboAC. You'll see my utilization here. And mind you, I don't stream from the computer that I am using here. I have a separate Windows rig over HDMI. So, the only thing being used here is whatever apps I'm using, plus this compilation. You see that like my cores aren't really being utilized a whole lot here. I'm guessing most of them are being more used by the Thunderbolt port and my browser than are being used by this compilation. And if I kill the next and run it again because I forgot to, we'll see one of my cores got utilized up to like 60%. Yeah, that one core. That's almost certainly the one running this. And now it's doing the bundling for the routes, which it can split already. And now I'm guessing it's done. I know it's close. Yeah, but you can see very clearly most of the work goes on on just one single core. Now that it's done, we can see wasn't very fast. If I go back and turn back on turbo pack and now we see here hopefully. Yeah, see that? That's the difference. All of my cores are being used. Oh, my terminal's not wide enough. God damn it. I can't hide my face. I'm just going to move this. It's already done. Let's time pun build. Cool. Here you can see all of my cores are being hammered. It is fully taking advantage of my system for that six-second burst and then it's done. Then it all throttles down. But that's the first time I've had a Nex.js JavaScript build use all of the cores on my machine. I would bet that the amount of total compute being used is probably higher, but the result is a much faster build, which is really cool. So yeah, I think that should hopefully help you understand the performance characteristics and how this is better and worse and what the differences are. Hopefully you also now see why I'm excited about the future of Nex.js as a platform to support every different place you might want to deploy your apps. I'm hyped. This seems like the right call for Nex.js. And it also plays into an idea that I've been pushing more and more, which is that I don't think the future of frameworks is going to be endless new features and syntax and all of those things because the AI has already been trained on the current everything we use. So my guess is that over time we'll see more and more releases like this that are focused less on adding new APIs and functionality and more on improving what we already have so that existing output, existing code, existing AI tools and models, generating new projects can all benefit without having to use new syntax. Are your feelings about next changing after this release? Let me know in the comments. And until next time, peace nerds.




## Next.js App Router REVIEW (Six Months In Prod) - 20230628
yeah hi everyone webtony Dev Tano here internet's laziest typescript Dev let's talk all about the new next.js app router if you're somehow not familiar next.js overhauled their entire routing system to be the first heavy user of server components the result is a whole new framework honestly it still supports everything next used to and you can still use the old page directory but the new experience is very different very jarring very exciting and very polarizing wanted to take the time to do a proper review now that I've been using it for over six months in production I'm going to break this review down into three parts The Good the Bad and the Ugly so make sure you stick to the end if you want to hear all about the worst and scariest warts what's so good about app router that I've bet multiple projects on it over the last half a year well more than anything it's the productivity my team and I feel like we are shipping so much faster and honestly it's because we are in just under two weeks we were able to build all of upload things dashboard and and back end using the new patterns it was surprisingly quick to work with I had another project where I would keep track of my twitch markers that took me weeks to build and was impossible to maintain that we rewrote in approauter in literally two days it is incredibly easy to work with these new patterns and man it simplifies the architecture of what we're building in almost all cases while also having better performance so let's break these parts down the productivity win comes from two core pieces the simplification of getting data to components as well as the composability of those components once they are created previously we had to use a not great pattern get server-side props which on a page level would fetch all of the data that page might need and then pass it down through props maybe you would add your own context layer on top but it was really a crap shoot you never knew if you were getting the data you needed in your components unless you actually fetched it in the components which defeated the whole model unless the components were able to fetch that data on the server and just send the right content down to the client that's what the new model enables and man it's so much easier to work with if we have a component that's the user drop down that component can fetch its own data and we can mount it anywhere in the app and even if you mount it in multiple places or have it under a waterfall it's not too big a deal because if it's using fetch to get the data it will cache it on a per request level or optionally on a global of all two so that you can have your content faster and have a great experience developing it no more context just to dedupe requests you can just fetch all over your app and not worry about it as much as long as you're doing it on server stay tuned to the end if you want to hear the problems of doing this on client anyways when it comes to composability you're already familiar with how mounting react components and breaking them out and reusing them works but with server components it changes a little obviously when you map things on server it still does what you expect when you mount a client component in the server component it still does what you expect one of the unintuitive and really powerful pieces is that you can mount server components as children of client components so you can have a child component that wraps your whole app like a theme provider for example and then everything underneath that is still a server component it won't have access to the context this is not running on the client where that context is defined but you are able to take server components and mount them as children inside of client components client component can't import a server component but it can receive one as a prop and you can do a lot of powerful stuff with that generally my experience is that there's more things to use but they're much shallower where with hooks we had these simple New Primitives that we could build complex things on top of and some of them like use a fact we would dive deep down when fighting with a new model is that the solutions are much simpler you have the basic cash wrapper you have a single weight you have suspense and it kind of does what you expect it to now it feels like these pieces are both easier to use and harder to hurt yourself with and really importantly when you do screw up it fails immediately I feel like it was so easy to make a mistake and use effect that was impossible to catch until it was way too late and with the new model we've had almost nothing like that and we have way less use effects too the way I've been explaining this is that there's a wider surface of things now but they're much shallower there isn't as much depth to fall down when you're trying out the new parts and it might seem like there's a lot more going on and on the surface level there is but as you use it you realize these pieces are almost beautifully simple there was a lot of parts of next that I think needed to be removed specifically underscore document underscore app get server side props yeah get initial props wasn't great either there was a lot of cruft that made it hard to compose your next applications if you had a route with a side nav and then you had sub routes with different components on the inside encoding that was miserable and with the new model it's simple some of the biggest fan of file based routing we'll get to that in a bit but if you're gonna do it this gets pretty close to doing it right and it's been a much better experience overall and man I will take a root level layout over underscore document at any day of the week this is this is a great win one more piece that I really love is how much better loading and streaming is in the new model put it simply you can have a component that fetches data and if it turns out takes a while to fetch that data you just wrap it in a suspense and give it a loading State Now by default there are no loading States everything is just fetched but if you do have some components that are slower you can wrap those components into suspense it's allowed us to make great experiences for our users and within the same web request you make to get the core page data the rest of the HTML Finds Its way over to I really don't want to make this all about performance even though the performance is much better but I I want to emphasize how much better things are now that use client and use server are standard you have to choose which content actually makes it as JavaScript to the user by default they just get HTML one silly example of something that would have sucked before was having a bunch of inlined svgs we wanted to have different backgrounds for all of the cards in upload things so when you have different apps they all look fancy but we didn't want to load every single SVG for every single user in that JavaScript blob so we chose to do instead is put that part in a server component and now you don't have to load all of that data it just renders the markup for the right svgs for the cards in your dashboard and sends that down instead it's not included in the JavaScript bundle at all and those types of wins are just built in you don't have to think about it as much we're not worrying about bundle size at all anymore I do want to talk about use client though because I guess this is the start of the bad I don't like the term use client very much I think it's a bit misleading because a used client component also runs on the server it only runs once but it does actually render on the server I think it makes it a little harder for developers to understand what truly is client versus server and also those words don't mean what they used to anymore and yeah that's the part that's sketchiest to me is client components running on server makes it less intuitive what and where they're actually doing their thing I think use interactive would have been a better name simply because the components are interactive the reason you mark a component use client is because it has some type of interaction or need for the JavaScript in that file to make it to the client you can have interactions that don't use JavaScript through server actions and forms but the component itself in the interactivity in JavaScript is the thing that use client entails and specifies I think use interactive would have made it a little bit clearer what the split was the naming isn't the only complaint I have in the bad though I think there's a lot of weirdness that we're still working around obviously nothing is foot guny's use effect but there are some footguns in use particularly if you use it on the client side in an async component you're in for a rough time I don't know why this isn't just like a warning that lights up really loud when you're mounting an async thing on client it should just complain at you when you do it it's not intended and while it's supported in react it's sketchy to say the least so I hope they get that addressed soon generally asyncline components are a bit weird I would stay away for now there's also a new hook use transition and I'm starting to wrap my head around it after using it a bunch but it's weird I'm still figuring out how to even describe it much less make educational content on it so uh keep an eye out for that it is an important thing for us to understand and it makes the navigation experiences in an app router project much easier but that's all on the react side I do want to focus on app router itself and while you do use use transition to do navigations in app router it's a react thing so let's stick to app writer I think compatibility is worth bringing up it's not that app router isn't compatible with the old way of doing things it's that server components as a model break a lot of the pieces that we used in react before like react query is a weird fit in this new architecture how do you fetch data on server and pass that to a hook on client and keep the context in sync and yeah there's weirdness there that we need to figure out it's gonna be a bit before we do but I do trust the community to get this all not just sorted but working as a really good experience as time goes on so definitely keep an eye out for all of the developers and Library maintainers working hard to make things better but right now server components by default don't integrate great I do want to emphasize if you keep things in client component land it's going to be fine and if you just use app router as a better router for managing which components render where and react just making everything a client component with use client is basically what you're doing before page router it's worth looking into that if you have things that are incompatible with server components there's still a lot of benefit to be had with app router tangents a little bit to talk about file based routing because uh still not my favorite thing having a bunch of files named page.tsx sucks having to scroll to the right place in the directory I still have no idea where I should put my components where I shouldn't put my components what goes where all these weird syntaxes with underscores parentheses brackets and random magic names like metadata.tsx page.tsx layout.tsx it's not great I really like how svelt handled this with the syntax that specifies with the plus that this is a thing that's part of the router and everything else isn't and also moves them all at the top of the directory file based writing still isn't my thing this is one of the best implementations I've ever seen of it but it's still hard for me to recommend what I can recommend is subscribing to the channel seriously less than half of y'all are subscribed and you're this far into a review about app router this is like the perfect Channel just hit the button back to the review one piece I don't see enough people talking about that uh really frustrates me okay we talk about this a lot here but not in the context of that router we need to talk about cold starts a bit I'm putting this in bad I'm not ugly because I know it's being worked on and it's not necessarily unique to app router but man if you have streaming and it lets the next piece of content after that first one come in faster but that first piece still takes three seconds it doesn't matter if you reduce the next paint from 3.4 seconds to 3.2 seconds because the first thing still took three seconds cold starts suck user experience wise and this is a big part of why I didn't like get server side props in the first place by default get server side props blocks the first byte on the first response from your server if you're hosting your next instance on a traditional server like on ec2 or just running a Docker image yourself you won't feel this difference when you're running it in a Lambda and hits a cold start and it takes half a second to three seconds even to spin up and start sending a response it doesn't matter how quickly the second and third parts of that response come in because the whole request is blocked for three seconds this sucks and as great as the new model is it is encouraging us to use the server as the first byte in our react apps way more but if the first byte can take up to three seconds it's a bad experience at this time there's no way to Cache the first response and Stream in additional data so you can't have a static shell and then wait for the cold start on the Lambda to hit so what I've opted to do is just run everything on edge and the result is incredible performance we don't necessarily run at the edge we use the regional Edge functions on versel please don't come at me with the names but the result is incredible performance like just using the upload thing website everything is so Snappy but there are things I need to complain a lot more about which is why we have the ugly section so what's the biggest problem with app router stop if you've heard this one developer performance the greatest the productivity wins are for devs the speed of the server in Dev mode is a little bit rough okay it's a lot rough I'm on a maxed out M2 Pro that I use because I do a lot of video editing but if you're on anything less powerful especially like an Intel machine or God forbid on Windows the performance is unusable you make one change in hailwind and it takes five to ten seconds to see a response there's a couple things that help and the next team is working on documenting them and I know they're taking the performance issues here seriously seems like a lot of the bet is on turbo pack though and I'm not super helpful I mean obviously fingers crossed if they succeed with turbo pack that's going to be a groundbreaking change that will push all of web deaf forward but if they don't we've been putting a lot of uh a lot of weight on a horse that might not get us to the finish that would be unfortunate we really need to see better Dev mode performance as soon as possible because we shouldn't have to gatekeep a good developer experience to high-end like apple silicon Max I do expect this to be fixed I know they're pushing it really hard but at this point in time the developer server performance it's not great I've also had a lot of issues with The Branding not in the way that they've discussed things publicly more the the lack of clarity around boundaries I guess it's the best I can put it when next 13 dropped they announced app router but they didn't really have a name for it yet they just called it the new app directory and with that people started associating next 13 with app router and assumed that to upgrade next versions they had to use this new pattern to this day we get questions when will create T3 app support next 13. support next 13 day one and it will support app router very soon but those are different things on top of that server components are very different on top of that server actions are different within the server components model in react and we have all of these different things going on and all of them are pushing us to this new era of web dev and it's really exciting I feel like what we're going towards is a react 2.0 in a way a new vision for how web dev can work using react at its core but all of these parts are different and many of them didn't have names until it was too late now people are mixing up server components server actions app router next 13 and turbo packets thrown into it's not the easiest thing to communicate and I understand the struggle that they've had because I've had to do it too it's not easy but man it would have been nice to have a clearer brand for each piece and more focus on how these come together and a name for all of that this has also resulted in a lot of drama where people see app router as stable even though it's depending on something like a canary react version because it's using some server action stuff as well as some server component stuff and even if the server component stuff is stable because they're using a canary version people are now scared of using App router and that's because they don't see the relationship between these parts and I get it I understand it's hard to communicate these things I know you probably expected more in the ugly but honestly app router has been a great experience for me and I went in very skeptical I was not an early server component fan I was excited when I saw the switch to async but I really didn't think it was going to click as much for me and I really did not like the file based routing changes that were happening so I don't like file basement man I'm so impressed with what they've done here I cannot recommend app router highly enough if your computer can handle the dev performance use it now and if you can't use it in a couple weeks when it will be better supported this is the first step into the future of web dev and I feel very lucky that I got to be part of it you want to hear a bit about the drama going on with server components I'll pin a video here all about that thank you as always peace notes




## Next.js has real competition now - 20241002
obviously I talk about react query and now tanack query quite a bit but I've been slowly getting more and more hyped around tanack router which is his alternative to react router but in order to do a router right you can't just throw it in the client and hope for the best you kind of need a server we've learned that quickly with the react router team becoming remix with nextjs going all in on servers and then eventually becoming verell and now it's time for Tan de start which is the newest JavaScript framework for react developers it's a very interesting project cuz it was originally meant to be a almost like a boiler plate like a starting point to use the router correctly and it is very quickly morphed into a framework all of its own it is different it is fun it is powerful it does not have server components yet but it has a lot of its own really cool things it almost feels like the Natural Evolution of the original T3 stack in a lot of ways and I cannot wait to start diving in with you tanack router is one of the key points here it's all built around tanack router so you get a full typ safe and powerfully unmatched routing system you also get SSR streaming and server rpcs you know trpc effectively built in client side first 100% server capable while other Frameworks continue to compromise on the client side application experience we've cultivated as a frontend community over the years tack start stays true to the client side first developer experience while providing a fully featured server side capable system that won't make you compromise on user experiences do you know what else is capable today's sponsor so let's hear from them really quick ow sorry about that I just set up clerk it's a really easy to ous off platform for developers what what is this clerk works with pretty much any Tech stack from nextjs to tan stack to react native if you're even near the react ecosystem it's pretty hard to beat okay can you tell me how to get through you have so many options to authenticate you can sign in with Google GitHub SSO magic links twoof factor with SMS all the things you would ever expect for authentication did your shirt just change colors oh you noticed trying out a new theme switching between different looks is as easy as snapping your fingers okay this is some weird I I don't get it thank you to clerk for sponsoring sorry about that let's go back to nerding out it's also built on top of vigy in V which makes it relatively easy to deploy basically anywhere that you run Office script which is really cool also shout out to all the people who are sponsoring this and partnering with them cool set of companies can't complain and a bunch of additional sponsors as well there's some really cool companies in here by the way AG grid is literally a competitor to table and they funded him and were the biggest sponsor supporting Tanner for a while and a huge part of why he was able to quit his job to work fulltime on this and we got all the big Partners here as well it's it's cool I'm really pumped to see funding going towards Tanner and his team so that stuff like this can happen and Shi for real so good to see tanac start overview tanac start is a full stack react framework powered by the tanack router provides a full document SSR streaming server functions bundling and more powered by tanac router VY and V it's ready to deploy now on your favorite hosting provider router or start great question I almost just went down the path of doing a tanc router tutorial because I thought this was tanac start it's not still looks very good shout out to Adam rack for making it but we're here to learn about tanc start tanc router is a powerful typees safe and fully featured routing system for react applications it is designed to handle the beefiest of full stack routing requirements with ease tan stack start Builds on top of router's type system to provide typesafe full stack apis that keep you in the fast lane so to be clear this is what you get without tan stack start at all this is just the router which you can throw into an existing react app today 100% inferred typescript support typesafe navigation is a big deal having a link tag that you can never send somebody to the wrong link with really nice nested routing and layout routes built in route loaders with stale wall validate caching designed for client side data caches using things like tanat query SWR Etc automatic route pre-etching asynchronous route elements and error boundaries o that's really nice having asynchronous parts of your route with the ability to error and like hoist that to a good spot so good file based route generation they do this in a very interesting way which I'm sure we'll touch on in a bit type save Json first search prams State Management apis path and search parameter scheme of validation search pram navigation apis custom search pram parser and serializer support search Pam middleware route matching and loading middleware and then tanack start it's a shorter list these are the things it adds on top of the router you get full document SSR streaming server functions and rpcs bundling deployment and full stack type safety in summary use tan stack router for client side routing and tan stack start for full stack routing so how does it work tanc start uses a tool called viny to bundle and deploy your apps in fact this is the same tool that powers solid start with viny we can do a few things that we couldn't do before we provide a unified API for SSR streaming and hydration we can extract server only code from your client side code and we can bundle your application for deployments to any hosting provider very fun stuff also quickly on solid start if you're not already familiar solid start is the solid JS equivalent of nextjs and originally it was a close collaboration between Ryan carne from the solid side Tanner Lindley from tan stack Fame and a good bit of help from Fred shot the creator of Aster trying to use Aster as the base for all of these eventually viny happened as like a a better way to build full stack applications and specifically Frameworks on top of v and they moveed to that as the base Point instead of Astro which I think makes a lot of sense going forward but was interesting to see Astro as the like starting point for a ton of these things so why don't you actually use tanack start tanack start is perfect for you if you want to build a full stack react application with the following requirements full document SSR and hydration streaming Ser functions and rpcs full stack type safety robust routing and a rich client side interactivity and experience as I said before this is like T3 stock Plus+ the full document SSR and hydration is an important detail though because all of the JavaScript code you write to render your components that gets sent to the server and to the client so any react code you write in this code base runs on both server and client is an important detail because server components don't work that way I can have a file with like 5,000 inline svgs in it and as long as it's only run on the server as a server component that doesn't bloat the JS bundle at all this doesn't solve that problem which means there are certain issues like if you have a terms of service page you have to send down the the data on both the client and the server in order for for that to render and hydrate correctly cuz all of the code that was necessary to load that page and render it on the server has to also exist on the client so it is not great for a lot of things but it is fine for almost everything shipping the code twice it's whatever most people do it for a reason but it is cool that server components moved off and it does make me sad to work on a solution that requires the whole document be hydratable I've kind of gotten pilled on the islands thing so why might you not want to use it Tex starts not for you if your site's 100% static if your goal is a server writer site with zero JS or minimal client side interactivity or you're looking for a react server component first framework we will support RSC soon though in their own awesome flavor yeah it's not their priority but it will be coming so how is it funded I like that they call this out a lot of people are very concerned when they see new Frameworks like how is this going to exist like how are they making money how does this work and Tanner's taking this seriously tanack Works closely with our partners to provide the best possible developer experience while also providing solutions that work anywhere and are vetted by industry experts each of our partners plays a unique role in the tan stack ecosystem for sell which is the leading hosting platform for web applications that provide a fast secure and reliable environment you guys know what forell is they're working close to make sure texart works there clerk might surprise you guys again Channel sponsor fun thing with them though they already announced that they have an SDK for tanack start that's pretty cool to see actual Companies shipping actual tools and solutions before the framework's even out of alpha W so cool convex is in here as well they're a database data management solution does a lot of different things you'll probably hear me talking about convic a little more in the future and senty the thing that you should be using to keep track of your errors I tried a lot of other Alternatives if you want to figure out from the client to the server why something failed I have caved an IU Sentry for everything and they've sponsored things as a results cool company had a good time working with them also uh Z the founder and then CEO then CTO now I think he's just had a marketing or something or product regardless great dude good friend interesting crew we start by creating a TS config then we all the depths best part about pnpm ready for it instead of pasting directly when you have an mpm Command put p in front then paste it's really nice you don't have to require all the different options here that step is done let's get viny working make sure types module cool I need to configure the app config app.config dots for required files for Tan stack start usage the router config server entry point client entry point and the root of your app this is important detail I Remix was one of the first ones to really take this seriously where you specifically like write different starting points for the server side and the client side because they are that different when you live in nextjs like a lot of us do you stop thinking that way but realistically speaking they do have to start differently and a lot of Frameworks Embrace that once config is done the file tree should look like this cool this goes in app SL router this is the file that will dictate the behavior of tanc router when used with start here you can configure everything from the default pre-loading functionality to caching staleness Let's Do It app router file app router. TS TS or TSX TSX so just components cool I'm slowly becom more and more sympathetic to the people who use TSX for everything in their code base oh good they called this out what did it say route tree GTS is not a file you're expected to have at this point it will be generated when you run the tanack start command via npm run Dev or npm Run start let's go to app SSR TSX paste this guy is what defines the server side handle as I mentioned before now need the separate client entry point because again client and server start separately they're ending otherwise client. TSX paste so enables us to kick off client side routing once the the user's initial server request has been fulfilled now the route of the application this is the entry point for all other routes code in this file will wrap all of the routes in the app let's make it and then take a look app routes double uncore rout yeah here's our route create rout route tack react router Outlet scroll restoration also from T react router body head HTML meta scripts those are all the fun meta tags that I mentioned briefly in another video I filmed today const routes equals create root route looks good to me we have the root component it has an outlet component the outet component is where sub routes will be rendered in this case every route children SC illustration scripts this might look like a lot of code to get started but the difference between this and something like next is that next has all these things but they're hidden in the next configurations where with hands deck start all the code lives in your code base it's a little more similar to something like I don't know if you were using CN where this code if you were using something like I don't know mui it might look less bad in your code base but it's the same code that they have written in their packages you just don't own it or have any control of it like if you wanted to turn off scroll restoration it's off now I just deleted it that easy so let's make our first route index. TSX paste save that's it let's run it that's enough this runs first try let's over under it quick cool pred is closed let's see who said it was going to run first try oh is it I to do Dev that's okay I think it counts I ran the wrong command one as long as this loads I think one wins looks like the Easy Choice ultimately won you lucked out there y'all back to now that we've seen it working I do want to actually read the code in this cuz I'm curious oh is it actually writing to a file oh yeah count.txt is actually writing that to a file that's server code then oh he snuck bling into here that's what that is interesting for those who aren't as nerdy and tuned in as me this is a very interesting thing I'm going to put something a little extra in here to see if you guys can catch on to why this is cool con look at that cursor already knows where I'm going that is wow so I didn't expect that to make it in let me contextualize this for yall so you understand why this is so cool CU I did not expect that so this file is obviously running on client by console.log this is running on client up here we open this console this is running on client since this is server rendered it also has to run on server but if I go to this update count create server function console log updating count no log here updating count there though the thing that is interesting here is it is true collocation you cannot write this same code in nextjs with server components because here we have defined server functions these are endpoints so this is the request that's actually being made we can see it's calling server function name dollar sign dollar sign function zero that's how it knows which function to call theoretically I should be able to run that and have the number go up which is not working we'll do this slightly differently copy as a nodejs fetch save this as demonstration. JS put that in tan stack start Bund demonstration. JS I'll run this three times oh is that just the get code did I copy the wrong code yeah I've been copying the wrong code this whole time I'm so dumb I've been copying the server side fetch not the server side post so I copy this one as a curl now now it's updating and if I refresh the page it goes up to 33 okay I am dumb just ran this a bunch of times now if I refresh the number's gone up because again it is just making a post request to the endpoint the reason I fell for that is there aren't single flight mutations which means once the client has done the post it then has to do another get to get the new data with new server component stuff that isn't necessarily true where the post request can send back the update they don't have that yet it's not that big a deal but that cool and the thing that I was trying to Showcase is the intermingling here because this file is a client Javascript file so if you're doing things in here like calling fs. promises we can't bundle FS so the bundler has to be smart enough to figure out which of these depths are being used on the page on the client side and which ones aren't like something you wouldn't be able to do would be like const St count equals await read count I'm curious if I try to do that if I console.log cannot read properties of undefined reading read file because it will not import FS on the client side so me attempting to call something that uses FS here fails I can go a step further do that same deal it cannot call read file because fs. promises does not exist on the client side which can be unintuitive because there's things important in this file that I could try to write code access that will it will just not work I personally prefer to have my back end code and front end code in different files and server components have gotten me really hyped on the the separation and the intermingling there I do quite like it now that the model is clicked but not having to think about it as powerful too if you want server code you're out a function and create server function now you have server code that's really cool this was the original promise of bling which was the attempt to make a generic RPC that your bundler could handle was actually doing under the hood is these get compiled into an end point or multiple end points and then when the user tries to go to a a page or hit one of these functions it does a fetch call and then gives you back the result and of course it's type safe so if we look at get count it returns a fetcher undefined number then once we await get count which I'm sure we do down here instead of coming from the router so where actually use get count oh the route cost route create file route component home loader async a wait get count and now this will hand back the count I bet I could even do this make it nice and simple type variable declarator that is interesting because this should be the exact same thing weird but fine that feels strange cuz awaiting a function that returns a promise should be the exact same thing there whatever small things I'm seeing the light one more thing I want to check because of how am is being a nerd I want to look at the JavaScript that is being shipped to me here's the transpiled code children server counter jsx Dev button yada yada but notice that FS is imported here build at ID V browser externals interesting so they actually have these functions get stubbed out to let you know if you try to call them that you can't call that in interesting so they're not just like blindly bundling server code they're overriding things that can only run on server by creating a a getter that just throws an error instead very interesting very interesting this is my first time digging into viny cool way of handling that because that's the reason that a lot of these things are so hard is once you start putting serers side code and client side files and you need to make sure that the right stuff goes to the right sides now you're writing a crazy compiler and do it might sound the server component compiler with react is actually quite a bit simpler because there's files that only run on the server and files that don't let's go back to the tutorial because there's a lot more here server functions the thing I just spent all this time on apparently there's a new server function shipping soon this will be even more fun let me know if I should do another video on those ship server functions allow you to specify specific functions to only run on the server they are used to perform tasks that should never be directly exposed to the client so how do they work Ser functions can be defined anywhere in your your application but they must be defined at the top level of a file interesting very interesting they can be called from anywhere in your application including loaders hooks Etc traditionally this pattern is known as a remote procedure call but due to the isomorphic nature of these functions we refer to them as server functions on the server bundle server functions are left alone nothing needs to be done since they're already in the correct place on the client however server functions are removed out of the client bundle and replace with a function that when called makes a fetch request to the server instructing it to execute the server function in the server bundle and then send the response back to the client quick history lesson of why people know who the I am I showed up in a Tanner Lindley Twitter space three years ago back when those were still cool as a little nobody with like 30 followers one of them was Fred shot and one of them was Ryan carniato cuz I had reached out to both about helping with copy on their blog posts but I didn't have videos I was a nobody still I was getting really into react query though and I was starting to get into building stronger relationships between my server and C code also of note I had never heard of trpc this was this was a while ago I had an idea I was writing all of these n points in the API folder in my versell project not even nextjs I was just using raw versell and vit and writing out my typescript functions as his own file I was tired of having to guess and check for type definitions and inputs and outputs from that API directory to my react query calls I was trying to build something to compile it out and give me correct type definitions but I kept thinking about it I was like maybe I'm going the wrong way here maybe rather than trying to export from the server code to get the things I actually want in the client code I could inverse this what if I just write the server code in the client code and a compiler rips it out this is a proposal that I wrote to Showcase this I called it the used backend hook you gave it a key just like you would an old react query then you would write an async function that does something that you can only do on the server in this case I was getting a profile from database they returning the result and then when it's compiled it would create for you a use Query call the same key but it would call fetch to this generated endpoint and then stub out okay get user info here it is yeah request response con St is wait get profile data and it returns it j onfi i I was ahead okay I I thought I was real clever with this proposal now most Frameworks have this or something like it at the time nothing did this was a actually newish idea I'm sure others had the idea but nobody had the implemented and I saw tenner Lindley person who I quite looked up to was doing a Twitter space so I joined we're talking a bit about server stuff and I was like yeah I I'll do the scary thing and hit request to speak he saw that I was followed by these other people we mutually respected let me up to chat and I brought up this proposal he thought it was really cool but he had an interesting response he said that sounds really cool I've heard of two other projects working with something similar one I think's called Blitz JS and I think the other's trpc but I can't quite remember I don't know anything about them I just know they're using react query for backend stuff are you down to look into it more and let me know what you find so he gave me a homework assignment to go figure out trpc and Blitz and then a week or two later I came back and couldn't stop ranting about how cool trpc was but the the journey that led to T3 stack in this whole goddamn channel in the chaos started with this little Guist and we bringing it up with Tanner in a Twitter space and him giving me the excitement that I've been seeking since Co destroyed my experience at twitch all of a sudden I had this person I looked up to giving me like homework but not in the like annoying sense in the fun sense where I had something to go look into with the promise that in the end my reward would be nerding out with somebody about it again which is all I wanted to do I just wanted to nerd out about these things I liked and he gave me an incredible opportunity to do it and a platform to justify like the effort and to share it with others and now we're here 3ish years later it's unbelievable think and I owe Tanner so godamn much I can't even put into words and I didn't realize we would be chasing what I showed here for the next three years but we have been bling was another attempt to do this with a syntax server dollar sign so you'd write something server dollar sign write server code in it and now when you call this in client code it just turns it into a fetch call this is the building blocks for what I was showing there then react server compon bonus happened and sent us all down weird paths for a while but now we're back now we have create server function and this is the Primitive that you would have used here instead of used back into the top level it's the same thing and it's really cool to see my dumb little proposal from 3 years ago becoming an actual solution and I'm not saying I have any responsibility for its creation I absolutely don't this was like the obvious inevitable thing it's just nice to know that I guessed that's where we were going as an industry purely CU I wanted it so badly so yeah this whole thing here I was real close on oh yeah I was also way ahead with Zach I had a a validation rapper for Server actions before server actions were public I found it on GitHub and pushed it early and now there's a whole ecosystem of tools wrapping server action with validation authentication all those things like I built the first vzero version of that because I wanted it and everyone else would have realized anyways that this is the right way to go but it's cool to be validated seeing these people I look up to respect immensely building the things I was trying to prove could exist 3 to four years ago but now they're real it's so cool as I was showing in the code it's pretty easy to Define them create Ser function you give it the method give it an async function and you're done what's cool is you can call them anywhere from server code from client code from other servers from basically anywhere it's a single parameter which can be a variety of types string number Boolean null array or object form data readable stream it can take in a readable stream that's pretty cool a project using EXA in production you should move to next type safe action it's a a much better thing it's in a much better State I didn't even ship Zack it we ship Zack in production for the earliest version of upload thing and we got it immediately because I didn't feel like fixing it and I think I ended up just moving back to tanack query yeah also good call out Dev here uh get and post needs to be specified because you can cash get you can't cash post and they also behave quite differently like you can attach metadata and a body on a post you can't have a body on a get which means that when you're getting with parameters so if I'm like passing a string or an object as parameters to a get call has to be done in a query parameter nice and simple here are things get fun type safety server functions are fully typed and the type of the parameters inferred from the functions signature so here we specify this needs to take in a person and then it returns person. name now it can infer the correct types for all of these things really cool stuff Jon parameters server functions can accept Json serializable objects as parameters this is useful for passing complex data structures to the server pretty cool that it will automatically serialize for you too apparently you can also accept a form data object so you can bind this in a form which is huge because tanac forms coming in hot going to be a fun one server function context in addition to the signal parameter that server functions accept you can also access server request contexts from within any server function using the many utilities from viny HTP under the Vin is using nj's H3 package to perform cross-platform HTTP requests that's actually cool I didn't think about like how many weird different ways there are to get things out of like headers and stuff with HTTP across different services so having viny HTTP abstract that between Cloud flare workers node in different places versel weird fetch stuff all of that abstracted is actually really nice they also handle multi-art form data which is obnoxious so that's really cool you got the request context by calling get web request what happened to web standards this is fine personally I would want to put these server function files in a different file and not allow them to be in the same file where the jsx code exists just to make it easier to reason about what is and isn't server code still really cool I also would have liked the dollar sign in front to indicate like this is different using Vin's get headers function to access all headers from within a server function yeah we can return values here where things get fun is something like TBC by default your return types are quite limited because they have to be serializable as Json fun fact you can't serialize and deserialize a date in JavaScript so if you turn a date into Json and you turn it back you get back a string that sucks so usually you'll introduce a thing called super Json which will allow you to do a little more than you usually can in Json seems like tan is doing even crazier stuff here what was your question about context yeah where does this come from yeah I have no idea where context came from this might be a mistake this might be one of the things web request returns and they forgot to stub that out there Dev I think you're deep enough that you could get that likely typo fixed let say here you can do Primitives Jason serializable objects redirect errors not found errors and raw response objects apparently they don't handle date time let's try that quick I'm going to make a new file in here let's um just have this post call Demo post I want the get to input date console.log date date love all of that put dot and let see if I can call that return responded at new date I'll try the loader quick too let's do that get loader kill all this kill that too State oh was it smart enough to ah look at that they're no longer functions let's see what happens when I actually load this yeah you just get the the string here that was the concern it doesn't handle things that you can't Json serialize sad rip what happens if I I hit that though uncaught request failed with status 500 and what does the server say here server says it is mad at me is what it says server function error input. get day is not a function yep if you pass a date time from the client to the server it also gets converted into a string I know that uh Maple created some crazy hacks on type definitions to make sure you couldn't have input types or return types that weren't Json serializable it might be worth ripping that so that you don't get into these use cases in these weird error cases as easily yeah I'm sure it would be straightforward to inject super Json through middleware but the default should be typ safe cuz like as far as typescripts concerned like there's no type error in this file but it still throws errors because you can actually post a date and have it behave either the types should correctly indicate the behavior or super Json should be the default I don't like the in between you can also set custom headers custom status codes calling server functions from within the route life cycle also really cool that the loader can just call random server functions and it's fine people got really tripped up with this with trpc where they were trying to call trpc from trpc okay Tanner's in YouTube chat I am so sorry for not checking that I am sorry Tanner he'll handle dates soon handle dates soon it's customizable okay cool I can have the credit oh I can have the credit for starting this wave I high honor thank you tenner I had no idea you were here on YouTube sorry I'll keep an eye on the YouTube chat now what else do we have here calling server functions from Hooks and components interesting use server function interesting very interesting so if you want to just get the data in the route you throw it in the loader but if you want to load it client side more traditionally use server function to generate the the function call that's safe and then use Query to actually call it very interesting really only to handle redirects and not founds okay that makes sense the thing I was going to question use server function I I I felt like that was an unnecessary abstraction but knowing that by putting it here as a hook handling things like redirects is much easier now cuz you can Hoist the throw CU if you throw inside of used query Ed query will catch it and give you the error but when you're doing a redirector or not found usually that's hoisted through throwing an error and use server function can throw the error high enough to trigger things so you wouldn't need the use server function at all if you don't have a redirect case in the function so I could literally just pass get server time to the query function here instead and it would be fine good stuff and if you want to call these anywhere else you can you won't have the problem that many had with TPC where they were calling TP PC from trpc it just handles that built-in really cool as mentioned server functions can throw a redirect error to redirect user to a different URL so if you throw redirect to URL that'll handle the redirect as long as you're not catching this error before it can go up I had a fun issue recently I think I done with this in a video with P thing where I returned a redirect in a TR catch and because I was using the redirect in nextjs in the try it got caught so the redirect would never happen redirects can utilize all of the same options as router. navigate use navigate and Link components so feel free to also pass path pram search prams and hashes again tanack router the only router that intelligently handles path pram search prams and hash if you're not familiar with each of these path prams are the things between the slashes search PRS are the things after the question mark and hash things after the hash doing these correctly with your router is so annoying that most routers gave up tack router was built around them so if you have like really complex query parameters or you want to store more state in your urls isn't another option right now you can also set a status code in the redirect that's cool every router gave up not most yeah every router gave up on these things some of them even redefined what certain terms mean we can't use Query prams instead of search prams anymore because a certain router repurposed the term to mean path prams yeah good call out here that send redirect will send a location header which will force the client to hard refresh and navigate there instead of doing it on the server side good call outs also custom has headers on a redirect by passing a headers option headers custom header value makes sense not found while calling a server function from a loader or before load route life cycle a special not found error can be thrown to indicate to the user the requested resource was not found again throw not found all Mak sense handling errors here where it's going to get fun create file route loader try await do stuff catch error and you can decide what you want to do from there so a server function throws a error it will be serialized into the client as AJ on response along with a 500 status codee it's useful for debugging you may want to handle these errors in a more userfriendly way you can do this by catching the error and handling it in your route life cycle component or hook as you normally would so here you could return something different in the error case and by doing that you've now allowed yourself to handle the ER differently and you'll actually get a type safe loader data in the components now good call out too that you have to call throw redirect so you actually see in the code what you're doing so if I had to do that in next it would have been much clearer my redir bug was going to happen no JS server functions without JavaScript enabled there's only one way to execute server functions by submitting a form I'm surprised you even added this Tanner it's cool that you did I just didn't expect it oh oh I see that was a big click moment for me check this out guys demol loader. URL that will console log the URL that gets hit when you call that endpoint so if I copy that address here's the demo loader if I open that we get back the empty object that that loader returns I do more stuff here more data I chat what is missing there there are some errors try it with a form action that's no fun I'm just going to copy it but the fine I'll do it with a form action I'll change it from demo loader to uh demo form post kill the input form action demo formpost URL and now if I test hit submit server error not found error was encountered on the route with ID double root small bug or skill issue I don't feel like figuring out which so we're going to continue yeah Tanner Shrugged I I will find every single dumb way your code can break that is my like skill from the heavens I break things every single possible way to pass arguments to a server function when submitting a form you can use the input element with the name attribute to attach arguments to form data past your server functions that all makes sense interesting to return data through that I'm not going to dig too deep into that you all get the idea there's another thing this includes that I'm excited about API routes because a lot of projects don't have this I was surprised to learn that um what's the name of dai's react framework I know he's building a server component framework I forgot the name of it waku yeah waku doesn't have support for API routes which I was really surprised by cool to see it already included here apparently waku now has API routes but it did not when I tried and it wasn't even that long it was just a few months ago we cool to see it here in the early Alpha this is a lot of things to cover I'm just happy this exists routes api. users TS will create an API route for API users all different syntax for it I like you can do the API dot syntax instead of slashes pretty cool interesting if you have API routes in a folder that's for a layout it will include that in the URL I'm just pump this exists and that I can Define routes totally fine this means an upload thing binding is going to be trivial to build as well so uh that can be a fun thing for me to hack on when I'm back for my next trip pump that's there SSR all works too file exports a function that creates a serers side rendering Handler the Handler is created using the create start Handler function from tanack start server which takes an object the following properties I like how short the SSR page is beautiful wonderful and then hosting it should work with any hosting provider they recommend for sell sure it works other places too and O it's going to say clerk already provide stuff databases Works convex you use other Solutions as well cability Sentry static pre-rendering powered by Nitro also really cool to have static Pages starting point there's a lot of cool in here I could spend all day digging into the details but the core thing I wanted to cover here is the actual experience of using it I didn't even touch on the generated code side the route tree which is generated you don't have to write this code it just creates it all for you so you can do file based routing and the result is still traditional config based so debugging and figuring out what is where is Trivial all of this is just generated for you well I am very excited for what is coming out in the future I will probably do a follow-up for uh not just middleware but for Server components as well this is a very fun very fun project and I am so excited to see it coming along let me know what you guys think I am so excited for the future for Tan stack start and I'm curious if yall are as well if I should cover more tack start stuff going forward let me know until next time peace nards




## NextJS Was Too Slow...So He Made Bun__! Jarred Sumner & The Story Of Bun - 20220711
i've been so frustrated by how slow everything is in javascript nothing should be out of scope if it means that something is slowing a tool down thank you so much for taking the time to stop by sorry for waking you up so aggressively yeah i just need to have a more reasonable sleep schedule don't we all anyways fantastic to have you on thank you again as i'm sure you've seen bun is blowing up and it's been really awesome to watch your journey for the last like what i think kip introduced us like a year ago and now at this point yeah i think that's i think that's right for a bit of context for everybody else from one of my old hacker friend groups i had some homies that happened to be friends with jared and since they knew i was really into web tech they're like hey have you heard about this bun thing that jared is working on i had vaguely heard of it but didn't have too much more detail and quickly got very excited about what you're working on but less about me and how i found bun i want to hear all about you and how you started it so to get started i'd love to hear how did you get into web dev and how did that end up with you working on bun the first programming language i learned was i think it was ruby yes it was ruby i was building high school and i really hated school and i tried a bunch of things i tried i tried to learn django i tried to learn php but i ended up choosing ruby on rails because the docks were the easiest that's like a thing that kind of stuck with me and it certainly doesn't look that right now like bun doesn't have real docs yet it just has like really long readme this is going to be fixed really soon i think a lot of people choose what tools they use based on whichever one has the easiest stocks regardless of whether it's like technically better or not obviously i think is technically fantastic but the docs are so important and it's like this very clear thing that blend isn't doing a good job of yet anyway so i chose rails because of the docks basically because the demo app that you create from the docs actually worked look i could get it working without getting stuck and it's that's like such a huge rush i still remember the first time this was a while ago now this was probably 2012 yeah so 10 years ago wow i was in high school doing that and now you're learning built like this like turning box i asked a few of my teachers if they'd be interested in trying an online turning box for their classes and they agreed because they saw how hard i was working on it and then i realized that what if i could just not go to school or what if i could just get a job now instead of going to school for the next six years or whatever because i was a sophomore then i ended up getting an internship at the startup just randomly emailed because i thought they sounded cool so that's how i got into like web dev sounds like you were heavy on the project-based learning stuff where as soon as you found the tech and we're playing with it you're like i want to go make a thing with this is that correct yeah i'm very i'm still pretty bad at learning by just reading a bunch of stuff i have to learn by like actually doing things that's one of the big things i preach here i don't make tutorial content i tell people what tech i'd use to build something but i'm never going to sit here and say here are the steps to pick a project see it through and get your first job i think that the thing that i love about engineering is making cool [ __ ] happen that might not have happened otherwise and that's the piece that pushes me through the hard parts because building and writing code and doing all this [ __ ] in a lot of ways it sucks but if you have something you care enough about that will push you through it i remember especially early on the motivation thing was the hardest part because i remember this very clearly it's so easy to get demoralized if you're like stuck on something and you don't even know like what the right words to google it are like that i feel like that's the hardest part when you're first starting out as a programmer is like what do i even google and then it's also like how do i read the error messages i feel like one of the things that working on bun really taught me a lot is how to read error messages because the specific language the phrasing word choice that error messages use are often words that you see a lot more in like compiler so the word token for example people don't really use token outside of things that are about lexing or parsing but that comes up a lot in their messages i think for i also think that's a bad thing because it's it's all in a way it's almost like academia how or like how this is a less extreme version of it but like how in like papers they'll use very industry specific jargon and it makes sense in context but if you're not super familiar with it it becomes harder to read which is a trade-off the motivation for a bit though because i think there's a really interesting piece there how you said that you struggled with motivation when you didn't have projects to work on but now you're one of the stereotypical most motivated engineers what do you say 90 hours a week i'm curious what specifically made you flip and how you ended up getting to that much more motivated point it's really clear that a lot of people want bun and i think that but even before that uh i the bond is something that like i have wanted myself for like years and years i've been so frustrated by how slow everything is in javascript and i think or rather i know that javascript can get a lot faster and the reason why is because i remember the first time i wrote like native code it was i think it was like objective-c and you write stuff to using nslog to the to that's like the equivalent console.log is like nslog it's so much faster than console.log i didn't realize that you could write to the to like the terminal that fast i and i think that it's true a lot of the of how we use a lot of the api is exposed to javascript just like all of it can get so much faster if we just had like a tool that did more stuff that did more of all of this in one that makes a ton of sense i'm curious how you got to first off like playing with that native stuff where you notice how much better the performance was and how you specifically got to zig yeah there's a bit of time between that the playing the native stuff was at my first job or so and then bun was more recently but how i got to the zeke was like so i initially tried before uh before building the let's see when i was building bun when i was first thinking about building bond i was thinking about what language should i write it in and i wanted to try i didn't i had tried a little bit of rest before but it was just really hard for me to be productive in it so i was would have been like the obvious choice i would say but i really it's it's important to just choose a language that you can be productive in because you're going to be using it a lot uh and that's not a general statement about russ really it's really it could just be me but it sounds like you had chosen to build a native solution before you had chosen the language had you played with or zeke at that point or was it like i don't feel productive and rust what other options do i have it was i've been thinking about zig for a long time if you go on my github you'll find one of the things you'll see is a project at build and the idea was that like you could write these macros that executed javascript through a sort of templating language that would generate code to that would generate javascript and then and i used this so i was building this game it was like a voxel multiplayer voxel minecrafty game in the browser focused on like very large worlds where you could walk around and talk to people like voice chat and like i had like at one point i even had live streaming in the game working like you could broadcast to twitch from while being like a character walking around in the game with like video as well like an audio and i was just the game got to be like a decent like decently sized code base and i was just really frustrated with it just like the iterations like the time got really slow every time i would save a change it would take several seconds before i could actually test if the change worked and when you're building a game you really need like a fast feedback loop because a lot of stuff is just like how does it feel to use it and it and if you have to wait every a few seconds between each change to know how a small thing feels you might forget you might stop and read hacker news for a second just out of instinct because you're just waiting and i really want just like that's like never be a problem it just seemed really stupid it's i've always found it funny that game dev tended to have the worst like hmr type solutions i remember a story for the building of destiny and destiny 2 where the engine was at a point where when they made a change to the world of any of the modeling for the world files they would have to wait 20 or so hours for their server farm to render up a new playable version that's terrible yeah so you move a rock like one foot to the side 20 hours later now you can actually play it and see if that was in the right spot for the weird platforming challenge you made and that's a huge part of why the worlds in destiny are so detailed but not fun to be in because they couldn't work out those details that polish that fun layer when you don't have the ability to interact with the things in your environments that you're building and i think that's why to this day most apps even like the worst apps feel more polished than some of the best games simply because you have that iteration loop yeah that's a good point yeah yeah i started building it as like with really a focus on development on the development iteration cycle and at first i was like okay i'm going to just use es build and because it was an xjs app the game was like wrapped in the shell part was like a nice js app so i was like okay i'm just going to get yes build to work with next gs apps and so i and actually even this is like in a private github rebuild that but and i got it to like work using a bunch of plugins and go uh but what i quickly found was that the it didn't fix the inter iteration cycle time problem because yes build is designed more so for bundling your entire app at once and even with the incremental mode basically the incremental mode wasn't actually faster than what than the webpack incremental mode for those builds like obviously like cold start and those things are faster but not the incremental so that was and then i was also thinking about it more and at this point i was like what if i just build a bundler myself and what if i just build a transpiler and that's really all i was thinking about this point i was not thinking about a javascript runtime just transpiler and bundler so then i looked at what i thought about it and i i've seen going back to that build thing with the templating the the what made me think about at build guide repo was because i was reading six docs it was on like hacker news at some point and i saw the part about comp time and i was like wow that is really cool i wish something like that existed for javascript um so it's like i had zig in the back of my head but i hadn't actually tried it it was like so then i tried bond with actually a few languages before sick before concluding that zig was like the obviously the best fit and in the in in buns case so basically the way i chose zig was i just tried it and realized that like comp time would be an incredibly powerful tool for writing fast code for i'll give you i didn't actually explain what com time is com time it lets you lets you write arbitrary code at compile time most of the time if you have some sort of a lot of individuals will have like macros they'll have they'll have things that are based around text substitution like adding a bunch of strings together to to match what the language expects but comp time lets you actually just execute arbitrary code so like a small example of how this is used in bun is it one of the kind of random experiments a while ago was like so one of the slowest parts of parsing for bond is the just iterating through the text and part of that is because you have to check if everything is an identifier or not if i'm sorry if every token if the current token is valid identifier uh or whether it's a keyword or whatnot and i needed a fast way to do that so so bun uses a bit set that's generated at compile time of all of the in all of the unicode character like all the code points that it could be an id start or an id continue basically it could be either the first letter or the or somewhere in the middle of the identifier and that was like a if i remember correctly it was like a two percent performance boost just and then this bit set is like this it's a 170 kilobyte it said it's huge for a bit set but this is just generated compile time uh and in sure you could do that every you could do that through various like through the hacky build script or in another language that's how you would approach it probably but in ziggy it's just a function i have some caching thing for it in bun's case but usually and there's a lot of that there's another one where in the source maps parser for encoding vlq which is like the format that source maps use for like storing the numbers or that it's not the form it's an encoded that also that also is just like a comp time function that these types of things are like normally you would just like copy paste a bunch of numbers that when you look at it doesn't really make any sense because you because they're generated by some tool that you and you requires a lot of context to understand but when you have the function in the code itself it's much clearer what does this actually mean it's much more maintainable that way so yeah compliment is really cool and so that's pretty much oh that's a lot of why i chose sync because it's very fast and because you have com time really interesting i think that there was a bit of a conception that you picked zigg because you at least i wouldn't even say this to conception so much as like the narrative is zig is this new magical language that's way faster than rust and it's jared's the one out here proving it when it sounds more like there were specific features within zig that made sense for what you were building in bun is that more the case i do think ziggy's designed to be really designed to enable writing really fast software and i think content is a big part of that i think it's not something i i don't know about i'm sure i'm like i don't really know i don't haven't seen other languages do that yet i'm sure it exists but i think that zig is it's also like this the other part is that zika is also very good at the because compliment is the focus there's all these other things that are really good too like dead code elimination in the binary like a simple hello world rust program i think is something like 300 lines of assembly or something if you don't link lipsy and like in a lot of other and like see that's a lot it seems i think like russ is like 20 kilobytes or something like that i'm not 100 sure that's true that's huge but it's like a i'm not sure that could be that number could be wrong but i've just i'm going off of what people said in buns discord when they were trying zig as a hello world interesting i think that it's when i think about languages go laying and i compare them to languages like sig it uh it feels like the focus of zig is in a different place and in a different way where a language like go is more focused on the run time of the language like the routines the methods of handling like its model of concurrency the garbage collection all those types of things it almost feels like zig has zig is doing what likes felt's doing where it's trying very specifically to be a compiler to the language being like c but by writing these hooks on a higher level to let you modify that process it's a minimal adaptable compiler rather than a maximal thought out runtime does that make sense yeah and zig doesn't quite compile to see it compiles to llvm ir which is also what in when you use llvm that's also what c compiles to but it works really well with c but yes it is it's definitely less focused on like the runtime part which is really good for performance because there's so much hidden stuff going on that's really hard to figure out like with a lot of the class code and button which are mostly for the javascript core bindings i had the way i find out what it i like i reuse most of the patterns from webkit directly for this up and the way i find out how it works a lot of the time is i just pause on the debugger and i just see what it's actually doing but because it's so there's so many layers of interaction between what code you run what looks like a simple function call and what actually is happening and this is not a thing that's it not nearly as much because it doesn't support r-a-r-r-a-i-i actually i don't remember what that acronym stands for but basically it's a way to in a lot of languages have have a way to run code that runs at the beginning of a scope and then runs it at the end of a scope and that's very commonly a source of hidden behavior and or rather hidden control flow where you don't really know what's actually happening because you look at because the way the code reads is actually totally different the way the code runs uh someone in chat mentioned its resource acquisition is initialization that's correct yep yes that that yeah so i initially for bun the way i was thinking about at the very beginning was not actually it was let's it was let's build what if let's build like a really fast button transpiler and then i was also thinking a lot about webassembly at first and this kind of changed a little bit later but i was thinking like what if you could run the entire uh bundler and transpiler in the browser and just do that as like a dev server that exists entirely in your browser and not as a separate tool you download and i tried that and it's using the file system access api but it was just like it wasn't a very good developer experience because the it was mostly permissioning issues and it was also it was hard to use the it was also using a service worker and you can't really rely on a service worker to always exist so the pages with just like four or four that you even if you try to do like server side if you try to go routing that way i'm sure this will get better but yeah so i built like this whole like an early prototype of a buns transparent bundler for that and then when i tested it in in the cli the the non-webassembly version initially it was slower than he just built and then i changed around like the memory allocator used button and then it was three times faster than es build by building the same files i was like wow looks maybe i should just focus on the cli so that's what i ended up focusing on this is really interesting because it feels like you went from if i'm following this journey correctly you went from focused on building a game in next.js and having slow like response times from when you save the code file to the change in the browser to building browser dev tools to improve that dx and speed things up to building a cli to make it easier to compile and build in dev a work experience that is faster when you make changes and now we're getting into how that pivoted into writing a runtime but we're still if i'm understanding in dev experience land or this is fairly focused on when i'm developing a web app making that process faster is that correct yeah that's exactly it cool yes when did you realize you needed to make a run time so when i was so with that if you're using it actually you really do need to have some kind of server-side rendering part to it it's hard to actually use it without that you can but it's pretty hard and i really just wanted to make that work but i knew that if it was going to embed node it would i wouldn't be i would be a little frustrated with the startup time of that whole part and so i initially with this that goes back to the that like yes build go prototype and so i actually for that i got i set up with a v8 isolate which is like the lower level primitive used to to create to embed javascript using v8 and into this go out and and i got that to like kind of work but i didn't really think go was a good fit because you have two garbage collectors you have the go garbage collector and then you have a javascript garbage collector and also there's other questions of seago performance and a few things like that but go is probably not a great fit for this even though i even though it's like goes to them it's great like the editor tools are so good we should go on a rant about editor tools for zig after but uh so you were playing with go as a potential time yes yeah and this was server side rendering so yeah so bun needs so these were like good experiments but around this time i decided okay i should rewrite it in zig and this was i'd never written a line it was like before but i just started writing it and i was like okay this is great and i was really excited about how small the binaries were and about comp time and and how i could actually figure out what's going on in the code pretty clearly even though i didn't actually have much context on the language and also just people were really helpful in the discord this kind of goes back to insane discord this kind of goes back to what i was thinking at the very beginning about ruby on rails about how the docs actually worked when you i think you need either in in zigg's case it was like the discord the people in the discord were really helpful so that i would have been really hard to make as much progress on banner get as far as i have now with without the help of all those people i lost for sure so with it was about the going run time for ssr and how you started using and clearly that was like the better language for it at what point did you start actually writing a runtime in sig and what was the like planned scope was it always just i want to make it so i can run my next js dev app faster at what point did it become more than that yeah so you you can see an artifact of that right now with way button works with bun dab how you can't actually start a javascript file from one dev it has to have you have to have a framework set up uh which today is pretty much just next but it can be others in the future and that's an artifact of how bun was first a bundler and transpiler and not a runtime which i'm changing now which and i probably pro bundle will probably become a broad time api instead of this default setup right now like this will probably flipped but how it got to the actual focus on the runtime was i experimented with a bunch of different uh possible runtimes i looked at using v8 uh i looked it and then i looked at using javascript core and just javascript core starts up really fast and there's a lot of benchmarks where javascript goes just faster at things like especially things like regex and and i think the other really interesting thing about javascript core specifically is that it's is that webkit as the name implies is an entire toolkit for building web browsers and their their web kit is structured as a code base as there's webkit there's web core there's like a standard library and then there's javascript core and there's a few other things too in there but the interesting part is that it's relatively straightforward to use parts of what of thing sorry all the more webkit is the safaris is the browser engine that safari uses um it's like the open source version and there are other users of webkit as well there's playstation using it i think there's a refrigerator company using it didn't a lot of google's runtime originally start from webkit and get forked like admittedly a while back but yeah really more specifically it blink and then if you look go back far enough in the webkit commits you'll see when you could either choose v8 or java support to use as the javascript runtime and then later that later once blink became a separate repo that that went away so java so the really neat thing about javascript core in addition to the performance and all of that is that because webkit is like this piece of all-in-one browser building toolkit you can actually pull button actually pulls in stuff from safari effectively so like the fetch or sorry the headers object the url object and a few and a number of other ones like event are actually directly from safari and i think that's it feels almost like a cheat code for for a javascript runtime on the server because instead of having to implement all of the web standards like these from scratch we can just use the one directly that is used by a browser and that comes with like their test coverage and and also just like the performance of like safari's performance is very good that is really interesting have there been other attempts to use javascript core as a back-end runtime or was this like the first that you know of there definitely are a few attempts if you look on github in fact there was at one point a node somebody tried to make like a node javascript there are no jsc builds but i think that a big part of bond is not just the runtime but it's also that it is a bundler and a transpiler and as well as a package manager and i think that when you put everything in one tool the rest of the writing code gets so much simpler because it's this you have to make all of these small decisions that like javascript is assembly required today you have to like you have to like to actually build something you have to put a bunch of tools together to make it work but none of the tools were explicitly designed to work together so you have so it's just so it's just like a lot of stuff you have to think about but everything was designed to work together you don't have to think about as much stuff and you could make it much faster wasn't that rome's plan i don't know i didn't i don't i didn't i don't work on drama i know it's they have to joke about rome because that project's been painful to watch from the outside the promise of solving all the problems by starting from scratch and then never delivering anything shipping is really hard yeah i just picked a really arbitrary type of ship that's why there's so many bugs right now because i didn't actually i was looking at this and i was just thinking yeah if i it's been over a year if i don't ship soon people are just gonna think this is gonna this is just like never gonna happen yeah it's so important to pick a date and ship i think that people missed that part one of the i'm not the biggest justin khan fan but one of my favorite justin quotes was if you're not ashamed of your v1 then you shipped it too late yeah i really i'm very ashamed of fun right now i shouldn't have all these bugs but i'm also very proud of it too because it's a very good start it's a phenomenal start and i can tell by just the numbers of people like literally a 180 something people were waiting on youtube for you to show up for a bit there was a it had a countdown for me i went live because i felt bad having so many people sitting waiting and just shadow at them for then but there is so much hype around what you're building here and clearly that's because you're touching on a need that a lot of people have had so i'm so fascinated by the journey from like next js user facing game dev to scope creeping all the way to like building everything you need to improve the dx as a developer but when i look at it sorry it does sound random when you put it that way it is but that's so cool i didn't know any of this and i would imagine that not a lot of others did before it's so cool that it makes sense now when i look at it and i see the one framework binding for next that's like half baked and doesn't do the server stuff that i'm excited about it makes so much sense when i realize how you started and what your focus was and how that got you to where you are now with it and i'm curious was there ever a point where you're like this scope has creeped too far let's prune it back a bit or did you just say [ __ ] it and go all the way from next js runtime next js like dx to sequel light yeah that is a big difference i think that basically i don't know what the philosophy is but essentially i think that i really think that the the tools we use can just get a lot faster and i think that and i'm not and i think that fun and i have this philosophy that like we shouldn't i don't like the idea of something like not being my job but i think i think that like the to to for a lot of performances if you you have to nothing should be out of scope if it means that something is slowing a tool down so if the bottleneck in bun is like the sqlite client is slow or whatever then one should build a faster sqlite client and i think like the longer term like but obviously can't have literally everything ever in the in the built-in but this is part of why one has one ffi bond ffi is a really fast way to to write to make native code accessible from javascript so you could like call functions using native in native libraries it's much faster than like nappy or other existing tools for javascript and it's also really simple because you can because there's no actual api on the native side of things you can just call functions it also means that you could have like more because of that in theory this doesn't this isn't really a thing yet but it could be that with just a little bit more tooling you could have the same button ffi libraries that work in webassembly too the longer term of that which i think would be really cool is what if you could just import c files or import rust libraries in javascript and have those libraries not actually expose like like you do import from and then you pass it a file name maybe those maybe in the future those file names could be like rust files or zig or other native languages in the import specifier and then you make it work with awesome interesting so you do see a future where we could run but in the browser that would actually be a that would just be a transpiler level thing so it would out the kodi would output it wouldn't be running button exactly i don't i think there's some version of it does some version of that does need to eventually exist like i really want button to work on like stack blitz for example but i think you wouldn't be running that specific way would just be the transpiled code the bundle code eventually would it would do the things to make that work rather than being a runtime level operation like you wouldn't want to ship a web browser or to web browser you wouldn't want to ship a whole javascript runtime on top of that you would want to just ship the bundle that you're using makes sense really important question quick the bun run time is officially called the bun time right no come on i just kind of need a name that's i need some way to distinguish when i talk about bun the runtime versus bun the rest of fun i've been saying bungee s but i don't really like that because it sounds very like early 2000s like i didn't fun time it's sitting there i i feel like you should have something that explicitly says javascript in it or like hints at it being about javascript because i don't know though i in general i like puns though puns are great and it's such a friendly name for puns especially since kip's bunny was actually named bundle it's just perfect yeah though i guess the it's a little confusing since now the logo is about so yeah it's also to be clear it's not an onion a few people have asked is it an onion no it's about so i i would rather have it been a bunny but i didn't have the cute bunny so since there's a cute bat i do like the steam bun it's cute yeah i there's so much here and it's just like the journey of bun is so fascinating and i feel like we've talked a lot about like your focus which is clearly performance in pain points as a developer as well as the bugs that switching to bung or bun has and causes at the time i'm curious what you think is next for bun not necessarily in what you're going to do to it but how it will scale and be used what are the production bun use cases you have seen expect to see and are excited about i'm really excited about the performance of server-side rendering i think that's going to be like when you when server-side and what i especially think is that the way the buns integration with having a built-in tritz pilot api but has a built-in transpiler api it's still very early the next step for that is to actually have a built-in bundler api and then using and this is not well documented yet you won't find enough nearly enough about this written in the readme or anything but so button has embedded has already has macros today it uses a custom jsx transform when you're running these macros and these macros let you embed these let you run return arbitrary javascript objects that get inlined into the ast basically you can think of them as something like babel macros except except instead of from the javascript site you can use it without special apis so you're not creating it's not you don't need you can use the you can use the jsx version of it but you can also just return it like a regular array or regular object and it'll inline the data into the build and you can pass context data to the macros so say you're like in an http request you're serving up some code you could transpile the code in the http request and maybe like maybe for example you could have database calls that just run as part of the build step in entrance in the transpiler and embed the sql query results or whatever into the actual file and so that would be like a much simpler way to when the data is like semi is like mostly static that's a much simpler way than embedding a client site then using something graphql and you or you could even use graphql to do that it's almost like you're doing isr at such a high level that you're competing with remix i wouldn't say i'm competing with any like any framework it's not because i think i want all of these ceramics to use bot and they could use these tools themselves but i do think that the idea is that in the actual interface for using these is you import a function and it's just a function call it just happens to be that function it happens at build time instead of at runtime and then after you call it the import statement at the top is removed so it's like a much simpler way to run code at compile time and it's very much inspired by a sync that is really cool one of the like use cases i was thinking of comes about from the sql light bindings and the crazy times i was seeing there i am seeing an opportunity more and more to build like a distributed data api where something like the whatever the i forgot the name of the like crazy distributed sqlite solution that flight at i o just bought but if you were to combine that with edge containers or honestly like regional containers of any form using bun as the javascript runtime to fetch from those sqlite dbs and return a response as fast as possible you could build a very fast minimal distributed data solution using bun as the runtime and that way you could write javascript to actually be the thing that fetches from that sequel without taking a performance hit yeah i think that'd be really cool yeah uh i think that so yeah so the macros i think are gonna be a big way people use bond that are that is just a new way to do server type rendering i think another use case is going to be a lot of cli tools because it starts so much faster than other tools that exist today i think that it will be a natural fit for cli and i also think that the testing it needs to be a little bit further along on the testing side but i think the test runner is going to be really interesting especially because going back to how one has like a transpiler api built in because maybe i think there will be some this probably won't be done by bun but i think there will be some other testing library built on top of bun that where you could do [Music] really fast browser tests like you i think there's gonna be some i think there will be some build some somebody will make a build of one that runs an actual web browser like it builds like safari or maybe chrome or both and embeds the javascript parts into that or has a very good integration with the javascript parts and builds like a testing library that's really fast that runs in that runs browsers directly headless browser but i think part of the reason why integration tests are pretty slow is because the because they have to talk over this ipc protocol in order to coordinate with the parent according with the test runner so instead if you put the test runner in the browser and you make it really fast to generate code for that the test will run the browser integration test should be a lot faster very interesting i hadn't thought of that what if you had us an integration test layer that was the browser and the test integration built into one fascinating yeah i think that and i think that but like the current state of like bond testing is very early but the idea essentially right now is to implement the jets most suggests testing api uh because i don't think people in general philosophically i think javascript developers are way too often they're forced to learn a new a completely new api because the author wanted to make up a new api for fun i think in general i think it's much better to just have an api to just use an api that already exists implement an api that already exists so that way people don't have to learn a new thing people don't have to change their existing code around yeah i think it's it like the there are the counter argument to that is is that what if it makes your code slower or like that's not exactly the right way to phrase that the right way to phrase that is uh there are faster ways to do these apis and this is something that bun kind of grapple it's a hard thing to to balance like the web apis in general are harder to make fast than doing an api than designing an api from the beginning to be to before with performance in mind and what's deno's excuse i think being i think i do think that javascript on the server should feel a lot like javascript in the browser i think dennis is doing great with that and bun is also inspired by that to some extent that's why bond both tries to implement a lot of web apis like websocket for example while also but there's just this balance of i think one will end up having like a standards based api for a lot of things and then a bun based api that is like faster an example of that right now which needs documentation is that the readable stream so one of the benchmarks uh on the landing page like the react ssr is a few times faster than other javascript runtimes and a big part of what made that faster is that bun is using the readable stream type in browsers is either bytes or default and bun has a third type it's called direct and the idea is that the implementation of the the controller the implementation of the controller is based on the output source a lot of time is spent when you're writing to the if you have a generic interface for writing to a thing to to cue to cueing up some data to send to a thing that's a lot slower in a lot of cases than having a then just writing directly to the thing uh and because for example you have to deal with conversion you have to encode it if you have a text encoder running that as a separate thing and that text encoder runs as a separate thing adds overhead button has this third type direct where you're writing directly to the in to the controller to to the output source and so it doesn't run it it doesn't actually start until you until the request until you start responding to the request but what it means is that when you do like new response render to readable stream like reacts and then text that is running a completely different one of these can the controller object pass to the readable stream is completely different than the controller object passed if you do array buffer or if you do or if you're just rendering to it for an http request and that that was like a big performance boost it was like a 1.5x to 2x performance boost for to react server-side rendering so no more render to string no well that already you that's actually that was like an api change to react dom already that render 2-string is choosing still works but render two string the important part of this api is that you don't there's no from the user-facing perspective there's no it's still the same function for react-dom server.browser and reactdomserver.bond so you don't have to make code changes to use this other faster way the only this is going to be a pr to facebook slash react i just haven't had time because button blew up but you can see the code in buns repo and how do you run that if you can't patch package in bun yet yeah that's a problem for now you just copy paste the file which is terrible i think that's a free pr idea for anybody in here who wants to make in their first open source zig contribution give me my package patch package words that would be great in general bun is a built-in diffing thing it's necessary for the test runner too that's also why the test runner i keep saying it's a very much work in progress it's because if you have expect to if you call expected if the text doesn't match it doesn't actually show with depth it really needs to show a depth it's like an obvious thing but last night check there was no diffing library in zig this needs to be written you could use a c library but it needs to be very careful about how the memory stuff like it needs to be very the diffing text is often a source of slowness in software so it needs to be very performance minded um i also think that would be an interesting runtime at api to expose there's a lot of this stuff like in in bun right now only a very small fraction of bonds of the api's bond has internally are exposed in the run time i expect this to change and i expect that bun will have a much larger a built-in group of built-in modules like one example another example is it has a whole file system router for an xjs and it's not really specific to an xbox at all it just happens to have the same like it has the same like route pattern matching and that should really be exposed to javascript as like a thing you can just run independently without using xjs but just as like a you want to add file system routing here's a here's two lines of code and you have a whole file system router set up for you i also think that'll be a good way to make certain types of applications fast faster because if you can move the step of what code to run to to be as to be only to be make it easy so that way when we run a very small exactly what the user requests instead of running all of the code it'll make it it'll make apps start up faster on the server but in general that's why i think like file system routing is very is very good as a pattern interesting i'm not as into file system routing so that's interesting to hear from you in particular but i like it makes sense i can see why it theoretically would be faster but i barely use page routing in next right now one of the like bigger pain points i have is keeping me from adopting bun is not having api function support because i have two api functions that serve 98 of my application and i need to be able to have this yeah this is going to be supported the first thing that we're working on before that is adding proper exp support for express when that's as part of that work a lot of the requests and response stuff in node will be implemented yeah they're pretty one-to-one and i could even like theoretically take my important pieces of my next api and rewrite them to be expressed pretty quick because i just these two endpoints like my trpc endpoint and my off and point and i need those to be hittable from server and client i think that i they're like the other way to approach this and this as like in theory it could work right now if you if somebody wanted to submit a pr to find framework next to write a wrapper around requests and resp around how the request and response objects are created this would be possible before waiting on all this express work but the way this really needs like a native integration to support these apis to do it really well and to do it in a way that's not like hacky but actually like works in a large percentage of apps without issue yeah api routes really need to be supported but also in general other more types of apps need to be supported but needs to fully support like like view and it needs to support angular apps really well and what i want to do there is i want to have a loader api built in and the really cool thing about a loader api built into a runtime this way is that because bun can be used for browsers too to build for browsers you could have the same loader api for browser bundling and for code that runs on your server what i'm thinking there specifically is it's probably going to look a lot like es build in terms of the actual plug-in api for loaders and i think that'll be good because ideally like then a bunch of the es build plug-ins could just work in bottom there's specific things specific questions that are around how do you make it actually load the plug-in and like that it might be that like the the module like the setup process is going to be a little bit different i think because it needs to be able to load the plug-ins potentially in parallel but it might load the ideally the ideally some of these plug-ins would run in a different thread than the main thread so it would be running multiple instances of javascript potentially just for running these plugins but so like those details still need to be figured out but i do think it's very plausible to just have a loader api built in that's like very easy to use and i also think that this whole framework thing is going to be another thing i'm thinking about is that what if like the having a giving like really low level hooks for frameworks to to configure bun both for when using it to build to run code on the server and browning code on the browser but as like an api for these in the way that is in existing tools today it's always been like a hack like instead of like you like override require and there are apis for these things but it needs to be very easy to configure it as like a built-in first class thing i there's two interesting directions here in terms of like what the future of bun integration is in frameworks where what you're discussing here which is making the primitives in a way where others could create adapters for different frameworks do you see a future in the other direction where people start building frameworks around abundant strengths if you get that multi-threading a framework that from the ground up says hey we have bun we have the ability to multi-thread javascript in the back what can we do with that and building from the ground up that way yeah i guess i haven't quite it's this is also new to me that people are really using bun because it's just came out that like i've always come from i've been coming from the perspective of it needs to work as much as possible with the existing ecosystem because people shouldn't have to rewrite their code but maybe i should start thinking more about what if we make feel like what new things are possible because of the apis button enables but i i do think that that's a yeah i do think that the specific thing about multi-threading i have a lot of ideas there i think this is not what we're gonna do right now or like soon but there's a good blog post on in javascript core about what a potential threading model looks like for the web where that would be quite a bit that would let you have shared memory for four different threats there's a problem right now with javascript chats where there isn't there are threads really when you have a worker you have to do a post message in order to send data to the other to another worker but yeah and then you can use like shared array buffer but then you're stuck with this fixed size buffer that you like and it's like hard to like use objects with it because you have to create you have to you either have to write some like binding code that like turns the byte offset into into a javascript object or you have to like just just use numbers for everything so that there's a javascript core blog post on in the on the webkit blog about like about where you actually have a thread object and you can just like share share data between javascript and in different threads the similar values similar to native code and i think i don't know if we'll do something like that with bond but i think that would be a really cool direction and that'd be a lot more interesting than just workers no and but definitely needs workers but i think that something like that would make would be a lot more powerful and a lot faster than what exists today totally agree and it's a very exciting potential future so we've touched on like most of the like areas of spicy interest that exist right now like the framework war in where bun fits the runtime war and when ben bond fits i feel like we've touched on deployment but haven't really dove in i'd love to hear a bit more about how you think of bun's deploy story what environments you think it'll be ideal in and how the future of bun and production looks yeah i think that bond is going to have i think the there's a few things there one is that i think one needs to have a separate build for edge runtime as like a as a first class part of it where a smaller feature set is enabled but and all the code is pre-bundled and then also a permissioning model both there's probably going to be two different permission models for bun one and one of them is implementation detail but one is going to be a something involving like binary dead code elimination where like on many different builds of bun exit would exist where with certain features turned on and off and then if you're not using a feature if you're not using for example if your app doesn't read from the file system then instead of explicitly saying that instead of runtime checks that prohibit file system access button we just not even have the code to read from the file system in the first place which means that bun's binary would be smaller and it means that you don't actually hit it there's a performance hit every time you have to check one of these permissions and it means there wouldn't be a performance hit because you would just have it just wouldn't have the code in the first place it also means that if there's any bugs in like the feature flag system or whatnot that prevents that from being a problem in the first place like you can't have you can't have it's much harder for there to be bugs in code that does not exist believe me that's like the big thing we preach here it's all about making the pipe from your database to your user as short as possible yeah so i think that'd be really cool in this edge runtime environment and then so for actually deploying it to today there isn't a good story yet i'm hoping it'd rather and there's we're working on a few things but we're still figuring today probably the easiest way to deploy bond is using something like fly.i o but i think longer term bud will have something built in to help with this but it's still like a little bit too early so what you're saying is railway's not about to acquire bun railways also would also be a very good option for bun both railway and fly.io makes a lot of sense i personally am very bought in on to the serverless and edge world and i'm excited to see one in those environments but with the like runtime and theoretical number of users and requests you could handle with one box it seems like a pretty good option yeah i think people will be very happy with how bun performs in production i think that these anything i mean the other thing i think is that like longer time what i'd really use for that is when they're once when once like lots of companies are using production i would love to get to for them to send profiling data of their applications to to bun and then just and then like i or somebody working on bun would go in and see what the bottlenecks are in their apps and just make it faster i think that a lot of a lot of javascript performance stuff is like like i think what i expect to happen is that like the things a lot of what what bun is faster at it right now than other tools is because because like i just spent a bunch of time profiling it and figuring figuring out how to make it faster and that that needs to happen that also needs to happen with large apps that are using bond so people i it would be really helpful like not really yet but soon when people are actually using button in production in various scenarios it's actually just send profiling data to button and then maybe bun needs like a built-in thing for this i'm not exactly sure yet but some way to some tools to help fun make bun faster for the actual applications using it that's yeah did that i think i followed i we were so many layers of performance that abstraction deep it's hard to be certain i'm following but it seems generally your goal is always focus on performance and what you've learned from this so far is that it doesn't seem like a lot of people do because it's hard it's not celebrated and the tools suck okay i'll rephrase basically i think that the a lot of the the way to make something faster in a lot of cases is to just look at how look at what's making it what currently it's taking time and then make that number go down and i've done that in the version of in through the tools i have available to me and bun right now but when once large apps start using gun getting that data from them getting the profiling data will like basically i think bun should expect especially optimized for large apps but yeah i think that like the other part of this i think is will be interesting is how it'll just be it's like a single binary that you upload as like part of the deploy process like normally you have to install and with the install part this is all going to be like integrated this is not done yet but the bundling format for button right now button has like when you do bun today would you that's the commander's bun love that which it's also like confusing part of me is maybe i should change it but i also do i think it's l because explaining bun bun people are like do i run the same name twice or take the same twice that produces that doesn't produce a javascript file it produces a dot button and that's like this file with a ton of metadata that makes it really fast to load it's your entire node modules folder in one file except stripped to only be the modules you're actually using across different parts of your app and this is this bundle's really fast it also loads really fast and the reason why is because this metadata makes it really fast but i think a more advanced version of that sort of will be how the edge run time works really fast because and it also is easy to play because you just deploy this 1.1 file and that's it that's a whole lot instead of having to like a uh and then like later potentially it will also that button will also have a compile step where you can do that for docker files and generate i'm not exactly sure about that part i it's just something it's like thinking about someone in chat said so it's like a jar and i wanted to jump on that because not really it's more like an exe if anything it's a fully created executable that you don't need a separate run time for it's like a bundled executable runtime and the code that it runs it's more like the deno bundler which not a lot of people have used so you won't necessarily understand that but it creates a self-contained executable that you can run and i hadn't really thought of that in terms of the deployment experience till now and that's really interesting so like in an xjs app where it has to build and send client-side js would that still have all of that potential client-side code like in a public directory that has to be fetched or would the dot bunny xc when the request for those things comes in pull them out of that metadata it would pull it out of the metadata but the that analogy of a jar file there basically there's two forms of this right now it's just the dot button it's not the self-contained executable it really the dot one file really is like a jar file it's that's closer to that i think you have to run it with bun right now so it's button ah but you don't put the caveat also is that this format needs to be updated a little bit more because again it goes back to when bond was really focused on the dev iteration cycle and not as much on production but that dot button file what that'll become is you that would be the self-contained effectively it doesn't matter because you do need to run bond with that later bundle will have a separate thing for having executables that are independent without specifically focused on things like clis so that way people don't have to install one in order to use clients written with one to answer to go back to the your question yeah so having all of these when you would request these assets on the client you would just serve directly from this dot bond file and it can do that really fast because really when you're reading from a file normally for that sort of thing you would the kind of code you write is read from the file then send to the to that to the network request but when you have all of the when you know the position in the file and the length uh then you can send it much faster using this a different system call us assuming some constraints like it if it's http if you if it's hp only if it's http and not hps which you probably is unless you're running button directly as like the without the load balancer in front but you probably i think in most cases people will still run a load balancer in front so in that case it can be http only there's a faster system call for doing that it's called send file it's in bun already uses this for bun.file if you do return new response and then you pass bun.file and you pass it a file path and that's why it's a lot faster than other javascript runtimes to to send files because it uses this faster system call and that and so basically that'll work for for when bundling too when serving bundled assets interesting i will admit i am mentally rabbit holding down the idea of a single file deploy of using a bash lambda function to just call dot slash bun and have that work and that's a very exciting feature so i don't think that the self-contained bundle is just valuable for cli stuff i see that as a really happy deployment story yeah i think it'll be really cool and i also think that and the other trade there's also you when you today when you bundle code for the server not for the client you have all these trade-offs in a lot of cases where you have to embed the most bundlers will embed the images other assets like that as like base64 encoded strings they usually don't use binary data directly because it's because they the constraint is that the bundling format has to be a javascript file but because bond is a whole runtime and one learn all these things that's not a constraint for bond we can just have our own special binary file format for running javascript bundles and we can do it really fast so because of that we can have it it's not only a single file deploy but it is a more optimized version of what it uh that than the alternative of loading it from like a target like the the easy alternative would be to have a tar file and then like sequentially read parts of the tar file back and forth uh to find the positions like looking for the data you need but all of these archive formats have a lot of trade-offs like tarballs have that issue of like sequential access is harder zip files are tend to be slower to extract they have a header at least so you can find where parts of a file are but they don't they tend to just be a little bit slower to extract than tar balls so then like the a way to think about this bundle format is it's like an archive file but within a format that's designed specifically for serving javascript and for running for making it faster to load javascript probably the closest equivalent in terms of like web standards today is like web bundles which i think chrome supports but i'm not sure if other browsers do yet they were previously called signed exchanges i think but bundled exchanges something like that it's not very well known i think the original intent was for like completely offline progressive web apps interesting and also for like amp stuff amps haunting us still yeah but i think i think if button doesn't implement bundles but i think that would also be interesting it's like an output format type but yeah i think the bundle part as a single file easy deploy is a good idea yeah and there's like a direction that one will go in very interesting i had no idea about how much you could gain from just being able to embed a binary and not having to be js compliant in js land if you own a layer or outside with all that said we've been going for a bit now i don't want to take too much of your 90 hours of work away when you could be closing bugs and replying and discord and all those other valuable things i would love to give you the opportunity to second last question are there any common misconceptions you're seeing about bun that are going around that you want to clear up or are frustrating or in otherwise just things you want to comment on i don't think so i think that like the honestly i'm just it's just really cool how much people want fun it's very it feels very good and i really like i worked really hard on bun and it's very just like awesome to see it's very surreal i wasn't expecting this at all it's clear the message resonated i'll say i was expecting this i just from watching for the last year had a feeling that things were going to be big and yeah thanks for proving our chaos and yeah it's been absolutely awesome watching this journey and i'm excited for where it's gonna go now yeah i'm really excited too so what can we the people of the 430 or so that are still here watching and listening how can we help out what can we do to help you push bun as far as it can go if you want more tests would be great bunda does not have enough test coverage yet and that's also why it like the it's so buggy right now button needs more tests and you can write the access in javascript using buns javascript test runner the command is bun wip test one but that really needs to fix right now because that you'll see when you run the tests is there's like a bug with path dot normalized that needs to be fixed all right so yeah a big help would be right write some more tests for bun and you could do that without you need to know zadie door without even having to build bun because you can just go to the folder and run the test it's a little more complicated because you have to install the dependencies and things like that but that's just like uninstall that's not it's not a it's pretty fast you'll also probably be surprised by that like the tests run pretty quick because fun because the test run itself is quick but it also runs the gc very aggressively like you'll it's weird that if you look at the code you'll see it calls gc almost after every line because a lot of the things that that a lot of it because bond needs to be really careful about how garbage collection happens with the native code so that code need it needs to very aggressively run the garbage collector to make it interesting so in tests it's basically just constantly running gc to make sure gc is working as expected yeah that's not how i expect i definitely like other people using button tests for like their product definitely don't need to do that at all that's like very specific to how button uses it do you think there would be value in separate tests that are just a bunch of as many as you can have edge cases for the gc or even wrapping all of buns tests with a like code mod that splices in a gc call between literally every line i think probably the latter is a a good long-term solution to this it's just a hack right now that i just add gc it's along every line but it also makes it really clear what's happening is that similar trade-off with motorcycle really would say about how like hidden behavior or hitting control flow and rating r-a-i-i but yeah it should just be a hidden thing i think that happens automatically because it looks weird that makes a ton of sense somebody in youtube chat said that you're always five thoughts ahead of what you're saying in a way where it's i ask a question you have an answer you start answering it but by the end of the sentence you're already seeing like the work to be done you're just so in that push hard and make things better mindset it makes a sense or it makes a lot of sense after this talk how you find the 90 hours because this is just always what's on your mind and i yeah this has been an awesome chat from everything from like the history of how you went from next apps for game dev to the whole like everything that is fun to the future that you're seeing with it the way that you see it being run and built around and all these other things there are a few people chat asking what can we do to support you specifically rather than just bun how can we support you and your endeavors is there a github sponsor link at least that there isn't yet i could make one you should do that first start yeah maybe i should i yeah i'm i don't i don't really need it like i'm okay like i'm not gonna run out of money but i do appreciate it so maybe i will make it up sponsors i just saw the you made the official bun what's it called the org oven yeah yeah maybe in the future you'll deploy you to the oven i could see that working very interesting good stuff i super super appreciate all the time you've taken to chat with us this has been an awesome peep into the chaos that you've been working on for how long now when was the first bun commit it's like april of last year i think damn that's not too bad a turnaround then that's a year two months give or take yeah that's insane again thank you so much no factories only bakeries great having you here thanks for having me peace man see ya




## No Dev Will Admit This (The Secret To Getting Good At Code) - 20230523
hi I'm Theo and I like skateboards I also like code one of those things has made me much more money than the other but both have required me to pick up very similar skills and mindsets I want to talk a bit about how skateboarding has made me a better developer and helped me find success as an engineer if you talk to any skaters especially those of us who are interested in tricks and pushing the limits of what we can do with our boards you'll quickly learn that there's a common theme amongst us we're all weirdly okay with throwing ourselves at the ground the best skaters aren't the ones who are the most gifted or have the best physical ability the best skaters are almost always the ones who are the most comfortable with falling and are the best at getting back up after that means obviously resilience like hitting the ground not even noticing or acknowledging the pain and getting up and trying again but a lot of it's also failure techniques and learning how to fail safely so that when you do fail when you're trying to land a trek you first off don't get hurt but more importantly you have the necessary inputs in analysis to figure out what didn't quite go right there so you can adjust and try again and learn from it most skaters take many many tries to land tricks I'm not talking like 10 tries most of the time you watch a professional skate video like a street part like any of the legends from Andrew Reynolds Ronnie Mullen basically anybody each trick in that video can take days to film sometimes they'll go to a spot they'll skate it for four hours not land the trick get kicked out by the police leave and then come back a few days later and do it again for another four hours the exact same trick on top of that there are so many well-documented instances of specific tricks taking years to be landed skaters working and focusing on this impossible seeming task and over analyzing every little thing that went wrong one of my favorite instances of this is the skater Jaws Aaron Jaws homaky he did an ollie down the lion 25 the biggest stair set anybody's dared to try and jump down the first time he tried it he had one of his few injuries he actually tore his ACL and NCL on his first attempt that didn't stop him though he flew back to France two years later this time with his dad in case anything went wrong which is heartbreaking but also shows how strong these bonds are that power people through this stuff it was with the power of knowing he could do it having his dad there and his team there to support him and the funniest detail a stick of deodorant that he used to smooth out the part between the board and the wheel so like you have the wheel you have the board if you land really hard they hit and stops the wheel so he put a bunch of literal deodorant on the wooden part so the wheel would not get stuck when they hit from the sheer force of the wheel bite from landing and hitting the ground surreal the levels of detail that these skiers have to think in in order to make stuff happen but also the levels of support they rely on to do something as scary is jumping down a two-story stair set and landing on your feet and riding away I think that his dad being there is just as important as his wheels having deodorant ready and that's what makes skateboarding it's this combination of building the support in the networks and the trust in people you need to survive those hard moments where you feel like an utter failure and you don't know what you're doing at all but you also have the ability to take a step back and realize this isn't your failure sometimes there are other little small things you can adjust and change to make a trick work that might not have otherwise I sincerely hope all the developers in the room right now are like oh [ __ ] that's just programming because it absolutely is the defining characteristic of a great programmer is their willingness to fail be wrong and learn from it I have never found a great programmer that wasn't exceptional at being wrong and learning from that and regularly embracing the failure that comes with trying and doing new and hard things it's such an important characteristic that it's honestly the thing I look for most when I'm interviewing people and talking to people I look for the thing they don't know I look at how they handle that do they experiment with it do they ask questions are they okay with not knowing and working and then figuring out what didn't quite work as they try out these new things and if you're not willing to fail it's going to be really hard to work in this field because most of the success in engineering is defined by long series of failures I have a video talking about the dozens of interviews I had to fail before I could get my first job in the hundreds of companies that didn't even accept my application every time I make some cool code or ship a project that's after dozens of attempts to make it work and often hundreds of rewrites of individual lines to try and make it behave how I expect it to I'm not saying every line of code I write is wrong saying most of them aren't perfect and as I run into more problems I can learn from those failures adjust grow and find success if you're not able to be proud and excited by failure and learn from it it's going to be hard to find success in this field but if you learn to love failure because failure is a growth opportunity that's when you're really going to find success in engineering because days where you don't fail are days where you don't grow it's really hard to grow as an engineer without hitting the pavement every once in a while and I sincerely hope you take the time to fail a bit more and that you're excited about the failure the next time it happens preventing failure is way overrated embracing failure is criminally underrated so go use this rant to justify why all software's buggy and Engineers like Theo are bad I don't care the people who can actually benefit from this message heard it I appreciate each and every one of you if you want to hear more about how I think about these type of things I'll pin a video here about goal setting and how I think it's important to find Success Through goals that actually make sense as an engineer I've wanted to do this rant for a while I hope it hits hard appreciate each and every one of you for watching it please nerds




## Node And NPM Are Breaking Up_ NodeJS TSC Has Important Conversation - 20240226
no JS Community debate intensifies over enabling corack by default and potentially unbundling npm I have actually recorded a video about this already but I chose to not edit and publish it because so much has been changing since then I'm talking a bunch with yag who works on node well known for helping on the performance side but he also is really invested in this particular cause because corpac was built to keep us from worrying so much about package managers right now when you install node you also install npm and as such most things are built such that they can work with npm it's become this weird semi- necessary dependency within node and as a result other options aren't getting what I would call Fair opportunity because you need to have npm to do anything else most things hook into it and on top of that when I run something with node it expects to have npm right there and all these other package managers do a bunch of hacks to work around that corack kind of solves that by letting you run a command and it will check which package manager you chose in the package Json and run that and install it if you don't already have it but it's not the default because npm is the default as such there's a handful of members of the the node technical steering committee that have been pushing to unbundle so let's dig in to this article by socket and see what they have to say thank you Sarah for writing this blog post I have done so much research on this topic and I'm excited that somebody's done this already for me so a heated debate is happening in the no JS community over a proposal to enable corpac by default that was opened in November of last year this sparked the question of whether npm would be provided through corpac moving forward as some contributors hold the opinion that the eventual goal of it integration is to uncouple node releases and npm releases corpac allows developers to use yarn npm and pnpm without having to install them although corpac is already distributed by default with all recent node versions developers still have to run corpac enable to install the required yarn and pnpn binaries proponents of enabling corpac contend that it would streamline the development experience by simplifying version management for package managers they also argue that enabling corack by default would offer a More Level Playing Field for alternative package managers potentially Shifting the landscape away from mpm's current dominance and allowing other package managers to gain wider adoption it's worth noting that npm firmly opposes distribution through corbac miles borens commenting on behalf of npm stated in no uncertain terms that npm opposes distribution through corack this is the exact quote from miles I support UNF flagging corpac and any package manager that wants to integrate npm does not wish to integrate for a variety of reasons and we don't want to be forced into supporting this pattern I wouldn't block any work to enable corack by default in node for any other package manager but I do OB to it being used for npm and for any sort of npm support being on by default my request would be that if corpac is a a by default that mpm support remains behind an additional flag or command that would be opt in for developers if devs want a flow that includes corack I personally think they should choose a different package manager developed and designed to use this pattern such as yarn this is the beauty of having an ecosystem of tools I don't think npm should be forced to use a pattern is not designed to utilize I am about to get opinionated and this is not against miles he's been awesome to chat with he has been a great representative on behalf of npm have had nothing but great conversations with Miles huge shout out to him I absolutely hate this statement because I agree npm should not be forced to do things including forcing me to use it the issue is that npm is the default in node every single node developer has npm installed we're forced to install it we're forced to have it integrated even if we don't use it at all I would argue if you want npm to be a good experience in node that you should have to adopt the patterns that node uses for integrating package managers it's just frustrating to me that you can say npm hands being forced unfairly when the whole point is that npm is forcing every else's hand on fairly Boren also cited a number of technical issues with coreback Distributing npm which he elaborated on in a detailed comment one is that the jumper pattern introduces extra indirection and a lack of clarity as to what version of the package manager is being used and where it is on the disc point two is that pinning the package manager at a project level can lead to exposure to security vulnerabilities point three is that a lack of clear testing of node and package manager versions to update package manager versions is inherent here four is that a hard-coded version for package managers in corbac means adding additional labor for updating point five is that you must dynamically install the package manager over the network to even start using a node project you can't just have the things on the computer and start you also now need to fetch the package manager as well and the final point is that there's a lack of clear benefit to npm while creating additional work for them yeah delete that that's not fair that's the whole point is that the ecosystem is imbalanced and npm has gotten a free ride for too long the rest of these are fair points worth considering and thinking about but this one is anyways if enabling corack by default changes how npm is distributed within node this would defy the wishes of the npm team by introducing what Boren contends is more complexity and inconsistency without significantly improving the status quo oh boy the no jstc video this is the thing I filmed a reaction to we might splice some clips in from that but it's it's long and when I watched it it had like 30 views I'm actually really curious what it's at now if it's starting to get attention this was an interesting watch it's only 290 views so if you're curious just how niche of a topic this is there's your answer even though the impact of this change is massive the work that the technical steering committee puts in is huge and really important and I have massive respect for them and everyone involved in the conversation is just crazy how distant they are from what I would call the rest of the JavaScript ecosystem where seems like people are much more into posting and much less into what's going on here the question remains whether it even makes sense to add corpac if the goal isn't to remove npm from the node binary is the primary motivation to enable corpac as a way to address the perceived unfairness about npms historical remance in being bundled by default or is the objective to improve the developer experience for those using less popular package managers TSC member yag who as I've mentioned before has been a great source for me on this topic he's been letting me know his thoughts for a while now he's a very vocal proponent of unbundling npm from node he recommended that the committee moved to either remove npm or bundle additional package managers he suggested that the ambiguity about the situation is creating unnecessary friction niiple hopefully I'll pronounce this name right nisly contends that node should be concerned with bundle size and consider the Strategic advantages of npm over other package managers he's unhappy with users being forced to install npm in order to install and use other package managers without corpac there is no path to removing npm is a dependency of the node binary this is one of the interesting things that came up during that steering committee meeting the concept of we have two different things we need to vote on first is should corpac be the default and second is should npm be removed from node and they kept on conflating the two for most of the conversation but eventually realize these are two separate things they need to make decisions on and then there's kind of a third thing which is if we're not removing npm does corpac even matter maybe we should just remove that instead which was very interesting conversation I'll leave the link in the description if you're curious Mato also had this comment which is the success of node is the success of npm don't break the magic combo he was one of the people pushing back the hardest during that TSC meeting and I love Mato he is one of my favorite people in the JS ecosystem I respect him highly and if he is this strong about this there are clearly things I'm not fully understanding I've actually been meaning to reach out and sit down and have a deeper convo with him on this because I trust him so much but he thinks this is a mistake he has pushed back very hard on it Mato is in attendance at the meeting and he said that shipping a package manager by default is one of the key factors for node's flourishing success he doesn't see a good technical reason to migrate npm out one of the main advantages of shipping npm is the stability of the build this is an exact quote from Mato if you install a node version you have absolute Clarity on the version of npm you're going to get and you can have a clear build if you use corpac you don't and people don't have a clear build this is a time bomb for maintainers in the ecosystem this a point I didn't fully agree on because you can specify a version of a package manager in your package Json which you absolutely should do at that point the build is entirely reproducible you need one more additional binary but it is a reproducible build the key here is if you don't specify your package manager in your package Json but you do specify a node version your build is reproducible there's a gap here because a node version is tied to a specific npm version so you only have to specify the one number whereas a node version isn't directly tied to a pnpm or a yarn version so you need to specify that additional number I don't love how this is framed here because this is I think a trivial fix but it is a fair point that projects that don't make that change won't be reproducible builds in the traditional sense that said if you don't already have versioning on your pnpm lock or your yarn config or any of these things you're already kind of screwed up but suggests that the least contentious Way Forward would be to enable corack by default and remove npm support for corack this way the npm team would not be forced to distribute the package maner through what they consider a technically objectionable method he also recommend separating out the topic of unbundling npm which again like that's an entirely different conversation I'm happy he called that out others in attendance with the meeting did not believe it's possible to remove npm without introducing massive breaking changes and creating a mountain of frustrated users another consideration is that TSC members raised whether corpac is widely used enough to support the node ecosystem period do developers even know what it is the committee agreed that they do not yet have a full understanding of the impact of this proposed change I want to quickly pull the audience to see how many of y'all know what corpac is these numbers are scary and here's Jason goodison who's another pretty relevant software Dev content creator who has never heard of corpac a lot of people haven't I know I've heard a lot about it but I'm like deep in the ecosystem but even then I only somewhat recently learned what it actually does I didn't even know it was part of node originally I just thought it was another one of those like NVM type things but corpac is an important development by the node team as part of node.js itself to handle the package managers that you're using yeah so these numbers are telling it seems like the average JavaScript developer hell we're not even average JavaScript developers we're way deeper than average if people are hanging out on my live chat on an off day watching me record videos this is not representative this skews more in the no so the average person at a company that just runs the install command and doesn't think about it I promise you they don't know what cor pack is final numbers 60% don't know 20% yes 20% kind of that's scary me reading this issue is not an invitation for yall to go spam it if you have me meaningful Insight on your thoughts on this and replies to important parts of this discussion you can leave those but please do not harass or spam any of the people involved in this they're all working really hard I'm reading this off of GitHub because that's where the conversation is happening that is not an invitation for y'all to cause problems anyways here's the enable cor pack by default issue on GitHub I'm sure this will be a civil and healthy debate hard fist filed at the template pointing out that they try to use corack and package manager to force developers to use a CM pmpm version but developers always forget to enable Cor pack which makes the package manager field not work at all this is a very important point because we have a package manager key in the package Json but it does literally nothing if you don't manually enable corack first if you don't run the corack enable command this field doesn't do anything as a result no one touches this field because for the vast majority of people it doesn't do anything the pnpm community has used the engine key instead in order to force this version Management in their side but they have to do things like that because we don't have corpac enabled by default so very very important Point once again I love you miles there's a handful of points in this that I just don't agree with it's pretty rough big one here is the pinning the package manager at a project level leads to security vulnerabilities so does pinning the node version there's no difference here I just this is a point that's hard for me to agree with because like if node has a security vulnerability you upgrade your node version if one of your packages has a security vulnerability you upgrade the package version if npm has a security vulnerability you upgrade node that doesn't make sense and they even say this here they do security updates to node whenever the embedded version of npm has a security vulnerability this is the problem this isn't a good thing citing this is a reason to not unbundle just feels insane to me when a dependency has a security issue you should upgrade that dependency not some other part that it's bundled in to me this shows the vulnerability of npm and node being so closely tied if I'm on a really old version of node like let's say I'm on node 16 and npm as a security vulnerability why do I have to upgrade my node version to make npm secure again that's terrifying even if if my old version of node is perfectly secure and good to go the fact that npm is so deeply tied to a specific node version means that anything that happens in npm even if I'm not using npm is now a vulnerability I have to worry about if we keep these things tied together now I as a non- npm user have to worry about the npm version that I'm not using this is an antipo not a pro point one more thing miles points out here is that a hardcoded version for package managers in corack is adding an additional labor to updating initially my gut feel around his Point here with testing was this is dumb but the more I think about it I actually think this is kind of fair the point is that they have a ton of deep tests making sure that mpm and node work properly together credit where it's due miles is finding people who are suffering from issues related to using corpac already this found on Twitter where somebody aliased npx to use corpac and the result is they got seg fults when they ran npx which is kind of crazy my two sense is that corack simplifies the life of most developers that prefer to use yarner pnpm I also think there's value in shift Shing the reference implementation within node last but not least most devs do not specify their package manager field making reproducible builds harder when using Docker files and build steps I fully agree with the first part 50/50 on this part then the reproducible build bit I feel is a little disingenuous this is a chicken and egg where you'll don't use the package manager field because it doesn't do anything if corpac was enabled by default this field would do something and then we suddenly will start using it like what we're talking about an ecosystem that didn't have lock files until yarn showed up and now every project has a lock file once these things become more standard we fill in the blanks and projects that were initialized before corack was the default we'll still be using old versions of node and npm anyways and if we do a good enough job of educating the community that they should include a package manager field of using a different package manager I think we're good especially if both yarn and pmpm do things like automatically change that when you use the package manager or throw an alert if you haven't filled in that field there's a lot of ways that the tools that we're talking about can make this tiny paino go away really quickly a Community member linked this and I think it's a really good reply there a reply to the point that most devs don't specify their package manager and that yarn one is responsible for close to 25% of all registry traffic which is crazy that's a lot of traffic for a pretty old version of yarn and the reason this was brought up is that it proves that npm being bundled with node isn't actually hurting Alternatives from growing and I don't think that's fair they're commenting from their experience but I'll say this lines up with mine too these two points are only factual because corpac is enabled by default it wasn't until we enforced corpac to manage yarn that we didn't realize most people were still using yarn V1 unintentionally a lot of people who are on the old version of yarn aren't doing such because they want to be it's because they don't have a way to enforce which version of yarn they're using in their code base but once they enforce corack at their company now everybody got off the old version of yarn does it Mak sense to keep npm in corack when you can do npm install - g whatever maybe for us yes it does make sense because the value is in the package manager field that takes care of the situation of figuring out which package manager should be used from my perspective the problem isn't an installation step problem the problem is defining the requirements of the package manager other people leverage ASDF instead of npm because having a static tool version is critical to making sure people are using the proper package manager dependency basically what package manager solves very well today again the package manager key and the package Json makes so much sense needs to be the default oh boy the big Isaac's wall of text this will be fun Isaac's the creator of npm and he has a lot of thoughts we read some of the quote in the blog post but I want to see his full thing first he called out that it's not nod's job to make a Level Playing Field 50/50 on that second he points out is that corpac doesn't seem to solve problems other than fairness and those shouldn't be noes problems and uh yeah this one I fully disagree on specifically the thing that corack solves is it makes the package manager key in the package Json useful and it should be if I use that field in my project then when a developer runs that project they should either have it run with the right version of the package manager or they should get an error it shouldn't by default use the wrong thing because they never ran the cor pack enable thing that that makes no sense so I think there's an obvious win here that he is not addressing fair and then here Isaac I love you man why are you doing this corack isn't the best but it's nodes solution it's part of node it can get better and I think this gets called out in a bunch of places here the perfect solution fallacy like corpac isn't perfect it won't be for a while if ever but it's up to the node team and the people contributing to node to make that happen and if the node team owns it they can do that oh god let's not be overly pedantic just the right amount of pedantic I don't like the tone of this one of course node is not a person and it should be understood that when someone asks what does node care about they're talking about what concerns of the people managing node do they consider to be chiefly relevant to the node project I I think I don't like when Isaac talks about fairness he's Yeah Yeah the more he says the word fairness the the less I agree with him him I did not know that stifel jumped in here if you guys aren't already familiar with him he's an employee at versel he is very very good at what he does he's in he's in the depths of everything JavaScript massive respect for stevenh the fact that his comment was called out here makes a ton of sense I'm pumped that he showed up for the meeting cuz he knows better than possibly anybody there how this affects the ecosystem because he's such a deep ecosystem person like he's not out there contributing to node in the traditional sense like everyone else there is but he understands the impact there deeper than possible anyone else in these meetings C points out that corac isn't just about the anti-competitive thing which seems to be the focus of the discussion it's also solving the problem of choosing the right package manager which none of these other Solutions fix and he feels like this part's getting overlooked when everyone's complaining about the anti-competitive part I agree very very important point and I'm trying to emphasize this point the whole time there's a huge benefit that has nothing to do with the Monopoly aspect it's purely the idea that that key should work we don't have a good way to enforce that all the people working on a project are using the same package manager and if you ever had a weird conflict in a lock file you know how big of a problem this is oh God not Isaac's response to that Isaac thinks stifel's comment is a handwave I am actively claiming that fairness or being in any way anti-competitive is ludicrous as a criteria for node to do anything node should care about the success of node users and that's all it's not at all clear that fairness improves this or what even should be considered fair in this case if you referring to choosing the right version of the package manager then we need to address security issues which have been brought up earlier in the thread is the goal to make the choice of package manager version solely in the hands of the project rather than the runtime if so why does noip a package manager at all you can't just make our argument back at us as though it's a negative what I really don't like this point at all I like why is a package manager being treated so differently from a package like if I have an insecure package in my package Json that's just as big of a problem is having an insecure package manager in my package Json why are you taking the agency away from the Developers to have control of these things you can't force us it feels like he's forcing us to argue the negative we're saying the current state doesn't make sense and has a set of problems we want the ability to enforce our own patterns and he's just mad about it h Isaac again with the pedantry stuff here this is a common misconception about the loose consensus methodology best here means best available not perfect solution or nothing for the most part it seems like people here agree that corpac is worth it just for the package manager key but Wesley doesn't fully agree here he points out that he doesn't think a new tool in Noe is necessary the reason I would disagree is it's a little bit too easy to run the wrong package manager on a project like how many of y'all have accidentally run npm install on a project using pnpm or pnpm install on a project using bun I know I do that at least once a week because I forget which thing I'm using and if corpac was the default I wouldn't have to think about these things I would just run the install command and it would use the right thing and if I use the wrong thing I could reasonably get an error from that thing but none of these tools can be built this way because node doesn't give us the right defaults to do it it's genuinely really frustrating that node hasn't given a happy path for feedback to developers when they're using the wrong thing wait no they have it's the package manager key that we can't use because cor pack is into default oh this is this is the same circular thing over and over again look here's an example of an issue in next where the docker code wasn't working properly because it would use the wrong pnpm version because corack wasn't enabled so they added to the docker file for nextjs like their example Docker the corack enable command so that it would use the actual version you specify the fact that these types of PRS have to keep being filed that the community has to run additional commands before they run the code this is the problem if you want to talk about reproducible builds here's your reproducible build failure you can't just download a project from GitHub run the node or npm commands and expect things to work with without corpac being enabled by default you have to run this additional command or know you've already run it in the past before the projects are actually reproducible this is a failure and to not see it as such just genuinely feels disingenuous to me unbundling npm is too contentious to reach a consensus the TSC will put it to a vote in most cases for internal project decisions the TSC operates under a consensus-seeking decision-making model in this case the committee agreed that the matter is too contentious and opinions are too diverse for them to be able to reach a consensus no amount of discussion will lead to an obvious solution they should be put to a vote to determine their answer to the following questions this I mentioned before where they broke it up into three questions by the way this article is phenomenal this is this is what I was trying to put together for my video and it's so nice so so nice that Sarah took the time to write this all up so I don't have to spend way too much time getting all of these points in order so huge shout out once again to Sarah I'll leave all her links in the description thank you for the work here this is very important also most people refer blog post to videos so I hope this gets the traffic it deserves question one we agree our goal is to to remove npm from node yes or no question two we are not going to remove npm should corpac be included in node yes or no and question three is should we enable corpac by default today yes or no and these are hard questions to answer I personally don't even have a clear answer here it's it's tough and I'm excited to see what conclusion they come to because I do trust the TSC team to figure this out the technal steering committing member Jeffrey suggests whoever wants to Champion roving npm should write a separate proposal before putting anything to vote he said the matter is not urgent and anticipates the earliest anything would happen would be April of this year the topic hasn't been on the agenda for the last few meetings 2 weeks ago Jeffrey suggested that interested stakeholders organize their thoughts and PRS addressing what node's technical priorities should be in regards to bundled package managers this is the exact quote from Death I don't think the corack question is ripe for the TSC to discuss again just yet multiple people on that thread have advocated for starting new threads to try and reach consensus on the various open questions I suggested opening PRS against the technical priorities markdown file to try and establish what goals we're intending to achieve before we move on to the secondary question of choosing the best way to achieve them I was thinking that those PRS could be one way to organize the discussion that we need to have or people can just open new issues that are more scoped than the current one regardless there are many many open questions and I don't think this is anywhere close to being ready for the technical steering committee to make any decision I would agree this is a very interesting development because it's not like corpac is a 100 times better it's not some big obvious win and the impact is negative but it's not big and obviously negative I'd say it's like 7 out of 10 important but also 7 out of 10 potential damage and that makes it really hard to make a decision about because the level of priority on a thing that's not that big a deal is obviously lower but is the technical cost low enough to justify doing it anyways that's a tough balance to find where like this is this is a win that would benefit a lot of people but at the same time it's not that big a win and it has the potential to cause a lot of friction so while I like the idea of determining the goals first I think the goals should include the potential cost of doing the thing too and as nice as it sounds on paper to separate these things and as much as I actually initially agreed with that the more I think about it I think these conversations do need to happen together simply because the win isn't massive enough that we can agree on that first in the issues on GitHub Jeff commented that he 100% supports anything they can do to make client access easier to reduce steps to getting started to making the experience better and to level the playing field I do not support forcing the adoption of corac to teams that do not want to use it he reiterated his position speaking on behalf of npm point one is that they should ship pmpm plus yarn in the way they want to be consumed point two is they should unflag corpac if that's the way they decide to do it point three is they shouldn't Force npm to use corpac point four is that they should separate the discussion on if they want to dig in and unbundle npm ultimately the node technical steering committee will make the decision following more exploration and discussion if corpac usage proves to be as meager as some suspect would the committee have the tarity to enable it by default in unbundle npm against the team's wishes this seems unlikely but it is still a topic of discussion I don't think vendoring yarn and pnpm into node the same way npm is vendored is a realistic option it would introduce security issues bundle size and would likely not fit well with the lifetime support policy this was pointed out by the collaborator contributor Antoine DL he also doesn't think that it would make much sense to discuss unbundling npm because of the ecosystem impact if the release team wants that to happen they could discuss it but it doesn't seem very productive to go that route so something we haven't mentioned at all is why does node ship with a package manager in the first place it's a good question and the creator of npm Isaac had some important things to call out here despite conspiracy theories I've seen claiming otherwise there was no Shady back room deal to get npm bundled with node Ryan and I saw that users were constantly thed at the point of trying to get a node project up and running and they couldn't do much without a package manager so he started shipping npm along with node there wasn't any other Alternatives at the time and it was the one supported by a member of the core node team so is the obvious choice it was discussed in the open not controversial people needed it so we gave it to him and that was it what is actually interesting here is that Ryan dll the creator of node has a lot of regret about both npm and how those things were integrated he thinks the package Json was a mistake he thinks the named package Imports instead of URL based Imports was a mistake and Dino was largely built as a response to what he considered failures of npms integration with node this hasn't dropped just yet and you can bet your bottom going to cover it when it does Dino is working on an alternative JavaScript registry so not an alternative to npm the command or the package manager but an alternative to npm the place where you install your packages this is very interesting there hasn't been a major player in the package hosting and distribution registry side in forever so when jsr drops things will get interesting and obviously more coming in that video back to the point of npm being bundled initially Isaac points out that he doesn't think a Level Playing Field for package managers should be nod's concern and that should be the community type of problem and the community should examine whether corack is the best solution to noes problems this is an exact quote different OSS projects get different levels of exposure and distribution so what this seems like very much not node's problem node should care about the experience of node users and their success using node not whether any given package manager has a fair portion of the market a market in which no one pays and the winner is rewarded with nothing but costs that feels disingenuous fine should node include an alternative JS engine or TLS implementation because it unfairly privileges V8 and open SSL fairness is an absurd criteria for a question like this I love you Isaac but I got feelings about that one it's time for node to formalize its relationship with package managers this is the opinion of the author and honestly I think that's a fair one any major changes to the status quo will need to be heavily substantiated as the long-term impact on the Node ecosystem in development workflow could be forever altered in a way that may not Foster the same level of innovation and Community engagement at this level of maturity as a project it's time for node to formalize its relationship with package managers in a clear way that is rooted in its technical priorities this is a quote from West Todd in the thread I was talking about before beyond that even in this thread the question which is at the Crux of it being punted on what should the formal relationship between node and the various additional tools required to build and run a project B when folks ask what requirements should be met to be a tool included in corpac or how it is vetted and decided there is no clear answer this is a good point that people have been pulling up in chat this whole time what if I want to make a new package manager how do I get it added to corpac if corpac is this deeply integrated and you end up shipping yarn and pnpm as part of node itself how do new things get in would they ever agree to include bun because buns a competing runtime this is a tough conversation and it's important that we get these things right as we figure it out as the author points out the node Community is continuing to wrestle with these hot topics of debate and Todd encourages participants in the discussion to recognize the gift npm has been to the ecosystem you know what I'll trible down on this even though I was just saying there's a lot of things that Ryan regrets with npm it is one of the best package Management Solutions of all time whenever people complain about npm I ask them to reply with the better package manager and it's very rare they can I honestly think most of the people who complain about how horrible npm is have just never worked in something like python where pip in managing your dependencies is actual hell there's a new generation of tools like the rust world has cargo and cargo is in a really good state but that's like a decade after npm and probably wouldn't exist if it wasn't for all the work npm did the same way npm probably wouldn't exist if it wasn't for all the work PIP IT that doesn't mean pip wasn't horrible absolute dog water and it also doesn't mean that npm is inherently great but it was a groundbreaking generational leap in the quality of experience we had managing our dependencies and it should be called out accordingly cuz it was a massive massive win one more quote from Todd I get that npm has a contentious place in this as it was bundled before it was ever a for-profit entity yes I understand that it's a fundamentally problematic that the registry we we all publish and install from is part of this deal but that doesn't change the fact that we're all here today with one of the largest software platforms and audiences in the world because of those folks work even with the bumps in the road the folks who have worked on mpm have given the ecosystem a gift and taken care of their responsibility better than most of us could if we had to now it's the time to put aside that history and discuss what's best for node it's maintainers its users and the JS ecosystem at large I was going to say I hope that's the end because that's such a great quote to end the blog post on huge shout out to Todd huge shout out to the author of this article Sarah you absolutely killed it this is such such a good resource the more I look into this and the more I read the more I'm getting red pilled on the side of yag I just don't see why wouldn't enable corack by default it makes things way better for most developers and as the ecosystem continues to move on past npm towards tools that make more sense for the different things that we're doing having a good way to be sure we're using the right version of the things that we're installing is important the same reason that lock files were important cor pack is important and if npm could realize that a package. lock was a good thing hopefully they'll come around to this too that's all I have to say here thank you guys as always peace nerds




## Node FINALLY Supports TypeScript - 20240729
it's crazy to think that node came out all the way back in 2009 and technically speaking it still doesn't support typescript this is one of the big things that alternatives to node like Dino and Bun got right early we know that typescript won it's not a debate anymore we're not sincerely considering typescript versus flow anymore typescript is the language of choice for the JavaScript ecosystem now it's not necessarily what we're using in the browser for all of our web apps and whatnot but it is absolutely the language that we're using to build the tools in the ecosystem surrounding the project that we now know as node so why don't we support typescript it's kind of a complex situation because supporting typescript means a different thing to almost everybody for some supporting typescript means checking the types making sure everything is valid and spinning out an error if it's not for others supporting typescript means you can put in typescript code and it runs also important to note that when you have different things like your TS config configured in different ways the result might be entirely different code or will or will not pass how does this all get supported in node it's a great question and we've been going around this for a while the thing we're here to talk about today is this awesome new flag that just got addited to node before we get there we need to talk about an important proposal which is the tc39 proposal for type annotations I've mentioned this once or twice before it's a really important proposal the goal of it is to add type annotations to be part of the vanilla JavaScript spec not in a way that they'll be checked and enforced but in a way that you can copy paste some types of code in the browser and it will just run as expected because right now if I go to my editor and I'll just write create a quick function in this file function add numbers and we have a number B number return if I just copy paste this into the browser we go to console paste uncaught syntax error unexpected token colon because these colons aren't valid syntax in JavaScript this syntax only exists for typescript so I have to delete these and make this function not type safe in order to go Define this and now I can add num is just fine but the fact that you have to do that is a problem in the goal of the ecpt proposal here isn't to make it so type safy is enforced in the browser the goal is to enable developers to run programs that are written in typescript flow and other static typing super sets of JS without any need for transpilation this is the key word and we need to emphasize this one transpilation is most of what we're talking about here this proposal is full of really interesting things let me know if you want a whole video about it the key motivation is they wanted to unfor JavaScript clever pun but the the goal here was to make it so these other languages weren't as far from the JavaScript standard and ideally could all work in the browser the same way JS does the strong demand for ergonomic type annotation syntax has led to Forks of JavaScript with custom syntax this is introduced developer friction and means widely used JavaScript Forks have trouble coordinating with tc39 and must risk syntax conflicts this proposal formalizes an ergonomic syntax space for comments to integrate the needs of type checked Forks of JS so this is almost like colons being used for comments in JS and then they can be used for types everywhere else think of it similar to how JS doc Works where you can leave a comment on top of a function to Define the types for it but as part of the actual typescript in JavaScript syntax we're doing a colon like this leaves a comment and then the comma ends the comment it's a very interesting proposal that has a lot of potentials for wins the reason they're doing this is that very very very many jsds want static typing in JavaScript also pipe operators someday fingers crossed I'll get my beloved pipe operator eventually there's some interesting discussion at the end here about how attempts to actually enforce the types have been done but these have all resulted in non-negligible slowdown it's actually it's fun call it that in 2015 the V8 team which is the team that makes the engine that powers both node and chrome they were experimenting with a proposal to implement a new Js mode that they called strong mode think of this kind of like strict mode but stronger where you could enforce types in type checks and they intended to use types to improve site performance Google canel the experiment in failure in the end we had to give up on this one yeah it turns out a lot of these types of things tend to cause more performance problems than they resolve it's hard to get right there are some projects trying to get this right check out my static Hermes video all about the custom JavaScript compiler runtime and whatnot that's goal is to make your JavaScript code as fast as the equivalent assembly code really cool project by facebook/ meta and Amazon to try and make react native apps Just instantaneously Launch and run but these efforts are massive and really rough which is why this particular proposal has the goal of treating typescript like a comment syntax instead of like a type checked strict language I think this is awesome I have seen a problem so many times with how people use typescript that I think I need to excal draw so we have the typescript compiler so we have this high. TS file and what people seem to think happens is this comes out and if all of the syntax here is correct on the other side we get high. JS which is your Javascript file this is not actually how the typescript compiler Works think of the typescript compiler like two Parts one part is the type Checker and the other part is the actual compiler that results in JavaScript code it's important to know that the compiler the type Checker side of it doesn't have to be happy for the JavaScript to come out so you can think of this as there's two parts that come out here it's harder than it looks so one of the two things that comes out of the typescript compiler is the actual output file but the other thing that comes out is any errors you have so I'll make error const hello is undefined so on one hand you might get this file that as far as the compiler knows could work could not work it doesn't know because typescript can have an error on code that is totally valid like if we have a function here we'll just call this add we say a number B number if I call add with Hello World this is a type error but this code works so this is why it's important to understand that these are separate things that the typescript compiler both gives you you errors and anything that it thinks is wrong when it checks the code as well as the compilation step where it actually generates the output JavaScript code the other important thing to know is that doing this part where you turn the typescript into JavaScript is much easier to do than this part where you find errors based on the actual syntax the tree of what's going on in your typescript code this part is effectively transpilation where we're turning high. TS into high. JS we are taking this input and we are turning it into into this output the compiler is also the type Checker which spits out these errors want to call this distinction out because I think it's important to know because right now this proposal isn't a proposal to check the types and give you errors if they're wrong this proposal is to skip the type check and just strip all the types out so you can run the JavaScript code without the typescript syntax breaking it ammed just dropped a good meme I wanted to include quick typescript compiler when type checking here's my code no there's four places where you used a type that could be unfolded TS compiler when transpiling here's my code looks good to me this is javascript's problem now also of note I'm not sure if I mentioned this properly before you don't need to use the TS compiler to do the transpilation the actual TSC JavaScript package is kind of slow and there's a bunch of other things you can use to take that typescript code and turn into JS you can use things like es build swc and so many other things they say undefined I'm sorry I reading is hard okay I'm tired something you'll see on most of my projects in near the end of my tutorials is this set of calls here where I ignore build errors in typescript and I ignore during Builds on esent the reason for this is I don't want my typescript type checking to block my deployments I want the typescript type checking to be done in CI so that I know if there's an issue and it will get flagged before we merge the code and it goes to main but I don't want to type check on my deploy as well as on my CI I'm effectively doing the same thing here that node is doing where I'm not checking my types as I'm turning my typescript into JavaScript I'm just turning it into JavaScript and then I have CI that will actually do the type check I have the pnpm type check and the pnpm lint call here and these run separately because again I don't want to block my deployment on my type checks and if I can have both of these things running separately on different infrastructure it means that my demo app can be out as quick as possible in a PR build and that my actual local like Ci that's running on GitHub can give me the feedback I need so I know I'm not shipping a mistake what's the type check script that's just a super simple package Json TSC D- no emit cuz again I don't want the output code I just want to know that the types are good and this will throw an error if I get the types wrong so the goal of this isn't so much to get you correct errors in your terminal as you're writing code it's to make sure you don't need something like TS node which is a total mess to set up just to run your typescript code and this is how other things already work like if I I'm just going to make a new file hello. TS console.log Su nerds you know what we'll um make this a little more real function hello name String cool well console.log hello world thank you super Maven for flying through this so cool I made this function as a type definition and if I try to run this with node I just do node hello. TS it doesn't know how to deal with the syntax if I do bun hello. TS it doesn't give a Doo run hello. TS same deal yet the idea node's the only one that doesn't know what to do with this sadly this does not seem like something I can easily run right now because it merged literally 5 hours ago so there isn't even a like nightly build up yet hopefully there will be soon but the least we can do now is read through what's going on and what the plan is because I am very excited to have a strip type built into node node will transpile the typescript source code into JavaScript source code during the transpilation process no type checking is performed and types are discarded as it should be checking the types yourself is not that hard as I just showed in this code here it's literally just TSC D- noit now you have your type Checker it's easy to do motivation I believe enabling users to execute typescript files is crucial to move the ecosystem forward it has been requested on all of the surveys and it simply cannot be ignored we must acknowledge that users want to run node food. TS without installing external dependencies or loaders yes absolutely TS nodes become like a meme and it is absolutely deserving of being a meme not because the people who made it or bad faith or anything but the fact that it is necessary is relatively pain painful why type stripping type stripping as the name suggests means removing all of the types transforming the input into a JS module here we see basically the exact same example I did here where we just stripped the colon string other run times also perform transformations of some typescript only features into JavaScript for example enums which do not exist in JS at least initially in this PR no transformation is performed meaning that using enum namespace Etc will not be possible good call out because there are some things in typescript that aren't just stripped like enum becomes something different because there is no concept of enum in JavaScript one of the many reasons you probably shouldn't touch enums but you get the idea anything that's specific to how typescript Works won't make it through this transpilation thankfully typescripts been more hesitant to add features that aren't part of vanilla JS they're a little eager to add some ahead of time like they added Nish coalesence optional chaining and some of those types of features before they made it to core JavaScript but they only add things that have been approved that will be part of CJs in the future which is what makes this interesting because these older features that were added before typescript decided it was going to focus on being as close to JS as possible those won't be supported properly so there will absolutely be some code that doesn't work with this flag at least for now but there's a future where that changes also note is how they're actually doing the type stripping because they didn't write a new solution for this they're actually using s swc specifically the wasm typescript package S swc as described is the rust based platform for the web it's a set of compilation tools written in Rust to try and make web dev faster it was originally just a typescript to JavaScript compiler to take your typescript code and make it into a smaller JS bundle think of this as similar almost to something like es build where it's just the minimal takes the input spits out the output part it's not a proper bundler that handles all of the complexity around getting the right files to the right place making sure that your bundles are split properly all of that it's a top level transpiler almost that turns the typescript code into JS this is what's being used right now inside of nextjs to turn your typescript code into JS that chips to your users s swc is really cool powerful project and it's cool seeing it being adopted in these ways because one of the things they pushed really hard for was wasm support not because they expect you to run s swc in the browser but because they want s swc to work in every environment and since node supports wasm in every environment by supporting WM s swc can run everywhere without having to ship a bunch of binaries this is important because the amount of binaries that have to ship for S swc and something like nextjs is honestly a little bit funny if we go to my node modules next s swc Darwin arm 64 this is the version I need cuz I'm on a Mac but next now has multiple swc versions that I support for 32-bit and 64-bit Windows Mac and Linux arm or Intel so there's a ton of these binaries now that exist in the next package you thankfully only need to install a subset of them but not everything's smart enough to do that right and you might just have seven Darwin or not Darwin s swc binaries floating around on your system now and these aren't small we reveal and finder get info that's 100 megabytes just for the swc arm 64 binding so having a bunch of those for every operating system that's not fun which is why shipping s swc for every single platform as native binaries inside of node makes no sense because now you have to eat that for every single platform and they don't want to do that they don't want to massively increase the size of node but by using the wasm typescript build they have just one and since wasm runs in every platform s swc WM can run on every platform without needing a native binary it won't be as fast as if they were using the native binary but now they have to eat way less like straight up bundle additions and cruft in order to get this working as the author says I've considered other tools but they require either rust or go to be added to the tool chain S swc wasm typescript is a small package with a wasm and ajs file to bind it s swc is currently used by Dino for the same purpose it's battle tested in the future I see this being implemented in a native layer massive shout outs to kd1 for releasing an s swc for us absolutely huge and if we go to npm we can quickly see that the wasm typescript package just got updated first and foremost good to see but more importantly once npm loads you'll see it's 2.5 megabytes versus this s version and S swc Darwin arm 64 much less so 115 Megs yeah just a little bit smaller 115 Megs to 2.8 yeah sorry 2.5 you get the idea this is pretty much as as responsible of a way as you can Implement something like this I'm honestly really pumped to see it Amaro is a wrapper around swc wasm typescript a web assembly Port it's currently used as an internal and no JS for type stripping the future it will be possible to upgrade separately Aero means bitter in Italian clever very clever so they added this new package called Amo that is the thing that actually does this diff is too large it's 617 lines what the do you mean it's too large it said it was 600 lines oh it's cuz there's a giant binary here okay I take it back this is a little absurd is that how they're including the package they just took all of it and put it in as text that's serialized I mean clever that solves the problem yeah they they parse this giant blob as a web assembly module and that's how they intergrate it that is kind of hilarious I won't lie who needs to deal with things as complex as npm and modules when you can just dump all of the contents as text and then base 64 encode it and then we have the dev depths here and you'll notice that we don't have S swc as one of the depths because they just dumped the source there not even the source the like output binary code that's super cool it's always fun reading through these node PRS they're full of fascinating things node supports both commonjs and Es module syntax and typescript files node does node will not convert from one module system to another if you want your code to run as an es module you must Import and Export syntax and if you want it to run as commonjs you must use require and module. exports as in JavaScript files file extensions are mandatory and import statements and import Expressions import file TS not import file because of backwards compatibility file extensions are also mandatory and require interesting this won't work if you're not using the TS or JS syntax I never thought they would go that hard on that in node it's the right decision I know that typescripts been pushing Us in this direction for a while but I think most people are going to be really weird out the first time they see in a file like this common button. TSX and as you see here that just breaks for me which is funny because typescripts official recommendation is doing that I think I have a video about that already if not let me know and I'll consider doing one so that we can cover that very very interesting controversial change but until then I think I've covered all I have to say on this one this is an awesome change I am genuinely really excited to see it crazy to think that typ scp's been out for 12 years and node's been out for 14 and we're just now getting official typescript supported node but it shows once again how hard the ecosystem is trying to do these things right I don't want to fault node or make it seem like they're a failure of any form for not supporting this before they let the ecosystem do its thing and now that we've done our thing they're finding the best possible way to integrate it into the platform so let me know what you guys think in the comments and until next time keep using bun peace nerds




## Node Runs On Next.js Now - 20240324
I can't believe the day has come node runs on next now yes literally like the nodejs website is built entirely on top of next and even runs on verell I had heard about this project for a while I know it's been deep in the works project and uh yeah it's beautiful it's not that simple though whenever you rewrite something this big it's important to hit all the details and make sure people's expectations are met and uh I think they did a great job with it the code base for this is nuts the quality of the code is genuinely really impressive they're using lots of cool modern to and Technologies the accessibilities through the roof but I want to break it down this is honestly one of the best examples of an open source nextjs code base to reference when you're trying to do things correctly I'm going to start with some comments from the team and then we're going to go dig straight into the code so make sure you stick around if you want to see the code itself this is a set of tweets from claudo who is self- admittedly new to Twitter and as such replied all of their things to the main tweet instead of making a thread I even told them right when they posted it they should have reposted it and uh they didn't we spent 3 years developing the new node.js website some might ask why it took so long the website design and content are relatively simple but the true story unveils here we always felt that the current node site needed more Harmony it was not easy to navigate it was not friendly and it was not end user or consumer first we needed something that could easily allow you to get started for your platform content wise we made a tremendous long effort to prioritizing a restructure of pretty much every section took lengthy discussions on what and where content should be placed we also realized we needed a project that used relatively futureproof Technologies and that would allow outstanding developer experience much effort was put into every technical decision behind the node website after all we wanted to ensure that both newcomers and existing long-term contributors felt confident in navigating the code base we also focused a lot on documentation documenting every piece of tech used on the website this is actually exciting we'll be sure to dig through the collaboration guide in a sec we wanted to make the experience of getting started and getting your environment ready and being able to immediately make contributions a lot of effort was put into documentation cicd and tooling to make that possible than you Mr Wen here the goal is to make it really nice to start immediately which is a noble and important goal exibility and internationalization were critical priorities for the redesign of our website and for the tech stack this bit in particular I've regularly been surprised by how few good examples there are of big open- Source projects that handle specifically internationalization correctly but also accessibility too they also prioritize the experience of non-technical people making contributions because things like translations and enabling their diverse communities were important to them they want to make sure not is reachable to everyone this is a very important goal and I think it's a big part of why a lot of technologies have succeeded like Vue for example was way better at building International communities and documenting them their behaviors in many languages compared to something like react that did not do as good of a job about that early and as such has been much more dominant in Western and English speaking places node does not want to fall down that trap and they're going out of their way to make sure everything's accessible everywhere in the end it took them three years yes three years but three years of a lot of back and forth careful decision-making and excellent collaboration with many incredible people I'm really proud of what we achieved in the end this is just a static website right however collaboration process in the journey itself are Priceless and I genuinely believe that what I learned from this project is truly relevant to newcomers and Veterans there's a lot to learn from here a lot to inspire lastly I'm thankful to all the sponsors contributors in the node Community for the continued feedback and for allowing us to serve the community again we made this website for you happy programming and enjoy nodejs great start I want to dig in though because as cool as the what and the why are I need to see the how also first thing that stands out npx turbo surf they're using turbo this a monor repo how cool is it there's this big of a monor repo showcasing best practices for node itself Talk's cheap let's clone my least favorite thing so far by a lot youall know how I feel about story book but uh that's not what we're here for npmc okay they're using npm lame I get it I understand I'm too used to bun and PN making these things super fast but uh I get it anyways now we can run turbo in this project and uh that results in the web app being hosted so theoretically if I go to Local Host 3000 it starts compiling for my local and now we have it do you know how rare it is for a giant project like that to make it that easy to just spin up you see this slen on the URL because it's handling all the localization let's start by digging into that so I'm actually really curious actually I have to walk something back this isn't a tradition turbo repo this isn't a mono repo this isn't a mono repo at all they've separated their inputs and their outputs so you can cash things independently but they're just using turbo as a a step to make things build faster not as a necessary piece for a bunch of packages very interesting I I was very surprised to see pages on the root also app interesting that they have um Pages as well as app router Pages em has their blog their about a lot of other things oh oh that makes sense everything that's marked down is still in Pages directory that makes sense the markdown bundling in Pages router is definitely still the the best way to go I have not seen as happy of a markdown bundling story on app router yet I get why they stayed with that for that so this is for the the blog content primarily whereas the actual site is all generated through app they even have a robots TS all the best practic I'm telling you guys so generate a robot's text file dynamically based on the needs of the node.js website they allow these things they disallow these things cool that they export this as part of next again they're doing all these things correctly they even have a site map which uh I've seen a lot of people not include and a small number of people include but incorrectly so having a good example of a s map that is being used by one of the most important sites in the whole JavaScript ecosystem huge I want to learn more about how they're handling the locals cost local equals a weight get local local provider what package is this from providers local oh there is next internationalization okay I was curious if they were doing something more crazy here and they're not this is the the thing most next devs would use if they were doing internationalization which is good to see they're not doing something crazy here it includes the messages as well as the time zone in order to have the context that is needed to render things correctly for those who are curious how I go from the web page to a code file on a new project I'll usually grab some unique text like open- Source comma search for that and look at that pages en index MDX cool here we have section with badge node is a free open source crossplatform JS runtime here's the download button small all that stuff again with an index MDX you have to write jsx inside of your markdown which is cool my one concern is I don't actually see where a lot of these Imports are coming from which means that they have like globals being applied to their markdown renderer which just isn't the most visibly easy to find thing but it's also probably the most maintainable with the way that they're building things is that a component that they wrote just to pass code Snippets to that's actually really cool if it's that simple JS display name is create an HTTP server they just write these Snippets of code here and it appears correctly in the UI I'm sure they're using Shiki actually I remember them saying they were using shy2 slash so let's let's try something let's make this typescript instead still works let's try a test type equals sh oh cool it worked check that out guys seemed worse than it was at the time anyways won't read too much into that and I hope youall don't either I'll change it back to JS so there's no more changes it is cool that almost all the content is just markdown and that all of it is loaded through app router even though the content is Pages router so these things are just being used as effectively rappers and also for generating robots Tech sit maps and all those types of things oh here's their RSS on point to cool that they included that and that again like all of these best practices that are going to get right like here is how you add an RSS map to your blog that you wrote a next it's just there and also really cool thing they enforce that this route is static so when a new blog post is published you get a new static build but the response of calling this route will always be generated like RSS that they've already created which is really cool that they don't have to run a server on every request this is just handle them build because the site is static I want to dig into their collaboration guide before I go too much deeper though let's take a look the node site is built upon react and next respectively the UI rendering engine in the framework that builds the website the website also uses several other open source libraries not limited to the ones listed below I love they capitalize the website styling is done with post CSS and CSS modules they use a combination of post CSS plugins to create a saslik environment we recommend reading the docs of our plugins in case of Doubt post CSS mixin import simple Etc Tailwind is used as their CSS framework in the foundation of their design system interesting I actually didn't check for that and I did not expect that either cool to see here icons is is an SVG icon Library used within our codebase I actually was playing with hero icons yesterday it's great it's an open source set of icons created by the tail one guys that is awesome you just go here you can copy it directly as an SVG or jsx I think there's a package you can install that includes them all too but honestly I usually just show up here I copy the jsx I paste it in my app and I get back to work they have a similar thing hero patterns which is just as dope and if you use upload thing these are going to look familiar because we use almost all of them just a bunch of patterns you can change the foreground and background color and then you can just copy the SVG and the CSS you're done download un style SVG or use this here super super convenient so yeah not surpris hero I is being used very useful radx UI this is a really cool one in fact one of the creators of rad tweeted was really cool to see Steven who helped co-create radx originally shout out and get hyped on seeing radx UI being used speciically their tabs and drop down components and the creators jumped in and pointed out there's actually quite a few more things that they used like all of these should dig through this package Json I am so curious I not surprised to see nextjs Sentry in here love Sentry somewhat recently they started working with me and I'm very excited to share more about Sentry in the future they're deep on the ecosystem they're they're the right thing to put here it does not surprise me I haven't seen Tailwind grid areas before a plugin to provide Tailwind CSS utilities for named grid areas okay that makes more sense oh I have seen this before this is really cool good cool to see them not just Reinventing everything but also not just installing every package ever it seems like they found a really good balance here which again this is a great repo for reading through to understand like best practices at scale they've been very careful about where they do and don't import versus building it themselves and the results not too massive a package Json for a project of this size and scope they also have a Tailwind container queries plugin very very handy node types which I wish you have to install but I understand and verel analytics which uh not my favorite analytics platform you all know I'm a huge fan of post hog as well as plausible depending on what you're doing for this case i' probably lean plausible because the users are signed out and the specific behaviors don't matter but the versel analytics is pretty good too I get why they use that their speed insights are also really good makes a lot of sense especially since they're getting I'm sure free access to versel platform I as someone who has multiple open source projects that are part of the sponsored open source program by versell know that they're very generous with things like analytics bandwidth Etc if you manage get part of the sponsored program which honestly isn't that hard you just hit up their open source email with like hey I made this thing and they do it high recommend if you haven't done that already the auto prefixer which is basically necessary for Tailwind class names which is basically necessary for really using Tailwind cross EnV which is particularly funny because nodes handling a v andv is so bad that they had to install a package for it this is more a node problem than an X problem which makes it funnier I don't know Dent es6 string tag that strips indentation from multi-line strings oh this is the stupidest package I've ever want of course of course Josh Goldberg was involved this is I think possibly the dumbest package I've ever fallen in love with this quickly I need this in my life I hate that this is as good as it is and this is so dumb and so useful 14 kilobytes for something this stupid and I will eat every single one of them because it makes your code so much more readable I love this I hate that I love this as much as I do but I love this as well as feed oh just RSS generator I have actually used this before cool makes sense what the get up Slugger I'm having way too many what is this moments generator slug like GitHub does for markdown headings okay that makes sense glob also makes sense gray matter for those who don't know is the thing that lets you grab the little tags in a markdown file on top so uh all this this is from matter husky you all know how I feel about pre-commit hooks it makes sense with what they're trying to do here where they want it to be easy to contribute to and people who aren't technical aren't going to have a particularly great time uh making changes and then seeing 10 minutes to 2 hours later that the build failed having husky yell at you for it is a nice thing I get why they did that lint stage is a really nice package for only linting things that changed next don't see why they need that I'm joking if it wasn't clear I think they really need that as well as next internationalization as well as next themes again a bunch of postcss both for tailwind and for all their custom stuff react and react Dom I don't know why you need that either reh hype for Auto Link headings this is against just a ton of markdown stuff to make markdown work in real environments like making headings links having slugs that work for those links having the reading time thing appear all those types of things is all just making markdown more usable sver didn't sver is a package I guess it's for comparing different like version numbers yeah Checker valid great and lesson we should use this more Shiki which I mentioned before uh is awesome Shiki is almost certain the best way to do syntax highlighting on a code base so if you have a doc site or something and you want it to have syntax highlighting Shiki does really nice syntax highlighting and you can also do it server size you have to include the bundle on the client side at all look at the dad and sver I'm scared to see this probably the biggest package I forgot was a thing I'm going to get so much in the comments I already know Tailwind Turbo typescript Turbo is not a Dev dep as weird I feel like this should be a Dev dependency if it's not there has to be a reason but again like this is why this is so interesting cuz I wouldn't have put this here but there's probably a reason why this is here if I had more time I would be reading through the G history to see when this was added and why maybe I would at the maintainer on Twitter saying hey why did you guys put turbo in the depths instead of Dev depths or honestly what I would do I would just move it down and see if things break and I love these types of things when you're digging through a real code base like this you can start to gleam why these types of decisions were made they also have virtual file as well as the v file matter this is for dealing with all the crazy markdown stuff pretty cool overall Dev depths are hopefully not going to be that much more interesting but uh they have handlebars in here which is definitely interesting story book which we've mentioned before I'm not the biggest fan of as well as the pile of things they have here for it they also have just stom react use event I will say story books next story is miserable I everybody I've talked to does not really recommend doing this so I'm curious how that's working out for them not interested in testing it myself but I'm happy they made it work this is a good project back to the collab guide because there's a lot of things they call out here still too yeah reh hype and remark for the market as story book for manual testing and visual regression tests of their react components also provides a Sandbox environment which is useful while crafting the components themselves they use Sentry for reporting the exceptions and monitoring performance and reliability of the app all makes sense interesting they have a whole breakdown of the structure too so if you want to dig even deeper than I did here everything you need here that's pretty cool they have a config for the locals as expected website content is defined within Pages ini development usually happens in English Pages localized versions of pages are done within Pages local code which uh it seems like none of those exist at this moment in time I'm curious actually if I was to go to um nodejs.org I change the url to/ they're not handling the other locals at all at the moment if I click yeah they only show English here interesting it took them three years and they don't have other languages on the site yet I thought that was a priority interesting curious to see how that goes for them also potential contribution opportunity to contribute localizations don't just Spam them with PRS please I'm very big about that you'll know that but uh if you're interested Ed and you speak multiple languages and want to help be involved in something as big as the nose site there's the guide here on how to do that and I I'm sure they're working on or they have a process for internationalization and localization contributions look into that if you're curious these are the types of projects you can contribute to meaningfully to have a splash and open source I do want to look at their components folder I can't I can't hold myself from doing that huh yeah there are a bunch of components here interesting including an MDX component set they icons I mentioned before how they did that download link ahre o oh use detect OS this sounds like a useful hook interesting set user OS State other bit 86 architecture armm promise. all they know better all settled and they grabb the actual values off and they set the user State I didn't check actually and I'm curious uh are they not using prettier oh no they're using prettier cool I was going to say a Tailwind you got to use prettier but they're using prettier and prettier plug-in Tailwind which again cool to see the such modern stuff being used by node itself blog components separate module CSS which makes sense for blogs I know I I'm the big Tailwind guy but even Tailwind has a separate library that you can use for formatting blog posts and articles because applying Tailwind styles to every element in a post sucks especially when you want them to all look the same so using something like CSS modules or Tailwinds like plugin for this to apply default styles to H1s to a tags and all of these things in a blog post in this case a Blog header makes a lot of sense and they almost certainly should do that I do hate the stories. TSX files everywhere but yall know how I feel about that I will say for the a component Library like they have here not the absolute worst thing just far from my favorite thing blog header Yep this all makes roughly the sense I would expect it to here are the common components these are going to be the ones that are used the most things like a badge component that lets you tag default warning or badges which I'm sure is used all over this code base Maybe not maybe they really don't use this at all interesting one of the things I see happening the most in code bases especially big ones is the ere eagerness to put things in common when they're not that common yet which results in a bit of what we're seeing here where the common thing is massive and we don't know how many of these are actually being used in multiple places or not unless we go look into it so not a big deal and for this to be the level I'm roasting at shows just how good and like wellmaintained this code base is I want to be very clear about that just a thing to think about if you're using something in one place and you don't know where else is going to be used yet just keep it there until it needs to be somewhere else and then move it at that point yeah small thing overall this is a phenomenal code base and I really want to emphasize that point I look at a lot of code bases I get sent a lot of people stuff and it's rare I look at something like wow this is not just meeting my bar this is a good reference to send to others and I hope you all take the opportunity to look at this codebase 2o because the node team worked really hard to make it and I do think it's a great example to look at for best practices in modern full stack and I guess in this case static site web development that's all I have to say here though huge shout out once again to that team and until next time peace nerds




## NodeJS 22 Just Dropped, Here's Why I'm Hyped - 20240429
node version 22 is now available I am very excited about this launch I've been clued in from a handful of people on the Node team there's some really cool stuff in here it's not a massive release like you would expect from something like a new next version or a new react version but the subtlety of the cool stuff added here is something I'm scared people will miss so I want to take the time to break it all down with you we're excited to announce the release of node version 22 highlights include requiring es modules a websocket client updates to the V8 JavaScript engine and more node 22 will enter long-term support in October but until then it will be the new current release for the next 6 months encourage you to explore the new features and benefits offered by the latest release and evaluate their potential impact on your applications the LTS thing is important to call out because not many of us can actually use node 22 right now because we have to wait on Lambda to add it and once Lambda adds it then we can use it on things like for sale it's important to understand the LTS process LTS means long-term support so this is going to be supported for a while node 18 and 20 if I recall are both still being supported so here you can see with the LTS releases they stay active for much longer and they're maintained for much longer as well so node 21 since it wasn't an LTS has already stopped being maintained well it's about to stop being maintained is halfway through May and June we should see that drop off whereas 22 will become the Active Release in October and that will be maintained for quite a while node 18 is still being maintained and will be until April 2025 and node 20 is still being maintained obviously it's still the active version that'll be maintained for a while the other important thing to know is when you can actually use these new node versions I as a versel user am also using Lambda and Lambda doesn't always support the latest node versions for example Lambda only started supporting node 20 in November last year so it's only been about 5 months since node 20 has been usable on Lambda without running your own instance and that's quite a bit after it came out like node 20 has been the current release for quite a while and yeah so know that it's going to be a bit before we can take advantage of node 22 on things like Lambda but hopefully we'll see these releases get to us in our infrastructure sooner rather than later I understand why it takes a while but it has historically taken way too long and I'm hopeful very hopeful we'll see node 202 on Lambda and a such on versel and other providers very soon especially when you consider how big of a performance win we got from node 20 which was unexpected cold Stars got quite a bit better okay apparently no 22 is planned for November of this year so it'll be a little bit but exciting that we'll have it so much sooner than I'm used to with these new releases you the viewer if you notice this is a little bit Jank I'm very sorry about that I didn't know this article EX when I filmed the first video so we're going to be taking cuts from both I promise that this will be somewhat cohesive shout out to faze for making it possible anyways the project continues to make progress across a number of areas with many new features and fixes flowing into the existing LTS releases for that reason the changes outlined in this change log for node 22 only represent a small subset of the features in work since the last major also really good call it it's cool that some of the things in this release are actually in the older versions because they Hunter the LTS really well they don't just do maintenance updates they actually push features to node 20 even though node 22 was coming soon soon really nice this blog will add some additional context on the larger body of work in relation to those changes one other cool thing in the release that you might not have seen is that there is now for Windows an arm 64 build yes they're finally supporting windows on arm they're the only ones I know who are anyways notable changes the first big one is that v8's been updated to 12.4 I thought this would be a bigger deal than it was the thing I wanted to show is that the uh node DP process version in node version 20 is actually a major version behind on the version of a V8 so I thought there would be even more features added here wasn't the case a lot of the cool features I was excited about got backported but there are still a few including array from async the set methods and the iterator helpers these are both huge if you don't already know about the set methods in the iterator helpers check out my video on all the fun features coming to JavaScript because these are really cool but the V8 change isn't just new features in JavaScript it's also the new maglev compiler which is enabled by default on supporting architecture maglev improves performance for short-lived CLI programs really cool stuff it's an update to the jit compiler and it means if you're running a quick CLI it's going to be way faster and use meth less memory huge changes very exciting stuff the jit's getting jitti every day support for requiring synchronous esm graphs is also very hype this release adds require support for synchronous esm graphs under the flag -- experimental require module if you have this flag on the ecmascript modules being loaded by require you have to meet the following requirements it to be explicitly marked as an es module with a tight module field in the package J B on and they be fully synchronous so they have to have no top level of weight but if these two things are true about your package you can now use require to include esm packages which means for the first time ever you can ship just esm and it works in most node things huge win really exciting stuff I'm amaz this took so long I I have to say this feels like bun bullied them a bit because bun had the ability to do esm and CJs Imports in the same file where You' have a require and an import next to each other and it works as expected this isn't that absurd but at the very least it lets you use require for esm which will allow us to finally really start moving off CJs require will load the requested module as an es module and it will return the module namespace object in this case it's similar to Dynamic import but it's run synchronously and it Returns the namespace object directly we intend to eventually enable require our esm by default in the future without the flag this will be huge huge huge huge once the majority of node is running a version where this is the case we can finally really start to kill esm running package.json scripts node 22 includes a new experimental feature for the execution of script from the package Json with the CLI flag node-- run the script this also supports node-- run test which executes the test command inside a package Json scripts this is cool because npm Run start and things like that are actually quite slow like annoyingly so did I say km I'm sorry I meant to kill CJs obviously we want esm not CJs sorry brains are hard and these like short hands are obnoxious anyways as I was saying about the package Jon scripts node-- run is really nice because npms run is slow and according to this PR even without making the C++ optimizations that yag wants to do we're still seeing 200 millisecond difference between node run and npm run here we see that the npm run test got 97 runs taking about 33 milliseconds each but the npm Run for the same code took 212 milliseconds that's insane so yeah this is a really nice change and again like this is one of those things bun did well like when you Bun Run script it just happens immediately like bun run index.js I have the Deno thing in there from my previous take it just instantaneously runs versus node run index.js what's it Mt about oh is this node index.js yeah sorry because we don't have run in the old version you get the idea sorry the new thing is for running things from your package Json which is in here if you have test or you have other scripts in here those will now run much faster it's a nice change it's very needed but that's not the only change that they're making to running things with node the one I'm we're excited about we'll get to in a minute is the watch mode but first we have to talk about the stream default high water mark increase the default high water mark for streams from 16 Koby 64 Koby this provides a performance boost across the board at the cost of slightly higher memory usage users in memory safe environments are encouraged to explicitly set the set default high water mark nice this is for when you're streaming data reading from your system getting things from the internet Etc the ability to have more stuff in your buffer allows you to grab way more data per chunk it just lets a lot of things be faster but if you're in an environment that is sensitive to memory usage probably not going to benefit a lot from this and you might even end up having your program crash when it runs out of memory so the ability to set it with an explicit call is useful now for watch mode this one's really hype from this release watch mode is considered stable when in watch mode changes in the watch files cause the node process to restart this one was a painful long history who's familiar with Watchman drop a one in chat if Watchman has ever given you I want to see a lot of ones in chat because the the good old days of Watchman see all the ones from Kevin he's an OG that's how you know oh no demon damn for those who aren't familiar back in the day it was not trivial to know when a file changed especially on other operating systems like on Mac and Linux you could kind of know but man windows and identifying when files changed obnoxious why would you need this well if you're working on a project and you want to trigger a new build Watchman is what you would use for that Watchman and things like it are now built into most build tools but for a long time they weren't and this is actually made by meta of all people because they wanted a better experience for their gigantic repositories when one file changed to trigger a new belt and God this was the worst thing to set up back in the day it has gotten significantly better since thankfully for a long time this is how we would set up Watchers and it was a bunch of custom commands just to make your code rerun when you made a change theoretically with this new version of node F&M use current I thought you said current would work Gabriel cool theoretically I should be able to go to my sandbox folder we'll make uh 22 test cd22 test touch index.js sure console.log hello world and now if I know --watch index.js hello world but if I go back in here and say don't forget to subscribe seriously though guys subscriptions are free on YouTube just hit the button it's right below you watch all of these videos if you're watching this one now and you want to keep up with this news you should probably be subscribed anyways now when I save it there you go it runs immediately I want to quickly see how fast it is though so speed test it should be pretty immediate I'm saving now yeah how nice is that this this should have been node forever ago like this has been in bun from day one obviously like instantaneous just yeah sub will even set up vs code to save on change so that it will rerun immediately so yeah regardless node should have had this a while ago it's really nice to see a vanilla node stack is becoming more and more viable where you don't need a bunch of build tools just have a decent experience okay yes Fair Point Z technically watch is not stable but it was it's no longer experimental h no it's it's okay it is actually stable never mind yeah node watch is now stable that's dope is this the first stable Watcher that is an external package we'll take it it's a nice change anyways that's enough about watch mode ignore the rough cut we got to talk about websockets the browser compatible implementation of websocket previously behind the-- experimental websocket will be enabled by default this provides a websocket client to node without external dependencies not this is for a client not for server this is so you can connect to a websocket server somewhere else still huge still hype very excited there's a lot of pain in doing websocket stuff you're not familiar with unish it is how HTTP and fetch calls tend to work in node if you use fetch in node it's technically based on unish instead of being based on node we're calling it in DC again you got the right pronunciation stuck in my head thanks a lot Gabriel as always coming out clutch yeah no JS in D websocket yep you get the idea it's pretty easy now to create a websocket agent that lets you receive and possibly even dispatch websockets good stuff the history of websockets in node is insane U websocket still probably my most easily recommended solution you're not already familiar with u websocket it's a very absurdly optimized C++ and C based websocket server but you can actually use this in node seamlessly with u websocket JS which calls the C code directly so very very handy way to host a websocket server that's hilariously fast it's 8.5 times faster than fastify 10 times faster than socket.io and uh it's also the built-in web server for bun even though U websocket is for node and it runs 80% faster than buns implementation using the node one that's insane you get the idea it's very very fast so more and more node and websockets become a viable path also one more fun fact about socket.io for those who don't know you've probably heard of socket.io because it's been the standard for websockets and node for a long time now what you might not have known is who the original Creator was Theo Rush who is also the creator of nextjs and the CEO of verell is the original creator of socket.io one other fun thing that happened today and it's actually pretty uh sentimental that this all happened at once today also the day that next has passed socket.io in mpm downloads I think this all lines up very well pretty cool day anyways glob and glob sync yet another thing that probably should have been here a long time ago similar to how watch mode kills things like Watchman and no demon glob and glob sync kill a bunch of random packages because previously if you wanted to select things in the format of a glob you really couldn't you don't know what a glob is I'm sure we find an example in here for weight con entry of glob star/ star. JS this lets you select all of the files in this directory and below it that have ajs extension and it returns them as an array so we can just iterate through all of them asynchronously this is such elegant simple code that really should have been part of JavaScript a long time ago and I'm really hyped this is now part of the the browser chat's going to be mad that I said no demon instead of node Monon cuz it's node monitor I know let me have some fun just like chat jippy you got to give me some wiggle room guys you get the idea anyways glob is hype probably should have been in there a while ago there's also a pretty big performance Improvement of abort signal specifically this release enhances the efficiency of creating an abort signal instance leading to significantly improved performance in Fetch and the test Runner didn't think about how this would affect fetch that's actually huge good stuff fetching should be less slow in node now nice change very nice change they also left a call to action I think is very valuable because they want to get more information from the community they actually have a survey that they put together in order for people like you myself and whoever else uses node heavily to give their feedback on what node is doing and what we do and don't like about it highly recommend doing this survey if you're interested in these types of things I think it's important that they get feedback from the greater node community so give it a look I'll leave a link in the description if you're curious that's all I got on this one though seems like a pretty cool release and I'm certainly hyped to get upgraded what about you are you hyped about this release are you going to upgrade soon or are you going to wait until we can use it in Lambda let me know in the comments and until next time peace nerds




## Objects In JS 😳 - 20230221
we use objects way too much in JavaScript if the keys are going to change you should probably use a map oh that thing on top ignore it we're I'm figuring out this Tick Tock thing apparently the kids love it maps in JavaScript are a great way to bind keys to values if you want to keep track of things with IDs like a group of users a map's almost always the best way to do it you can get and set and switch this code to that code and you'll immediately have faster code because objects are optimized to keep a specific shape whereas maps are optimized to have the shape change all of the time it's also much clearer when you're making changes because none of that weird dot or race and taxes used weird deletes and such you just dot get and Dot set way simpler way cleaner go give Maps a shot today




## Oh no, I think I like this - 20240111
as much as we all love flexbox it has its pain points chances are if you've clicked on this video you've run into the issue of weird overflows or elements going bigger than they should be or not shrinking or even growing as they're expected to there's a reason for it it's because of minimum width and minimum height it sounds kind of dumb it's because it is and I want to showcase a quick fix that can help in a lot of these cases that is now being advocated for by none other than the creator of Tailwind yes this tweet came from Adam himself suggesting that we set a minimum withth of Zer on every element on our page similar to how we override the Border box behaviors across our apps with CSS resets he's suggesting we do the same with menwith and the more I think about it the more I think I'm on the same page so what exactly happens if you don't set a m with I have two quick articles here to Showcase just how bad things are first one really short and simple we have the classic example of overflowing text even if you use overflow wrap break word to try and break this down so it doesn't overflow it doesn't work to fix it you have to set a minwidth of zero which makes no sense right because the element's not being told to be smaller it's not being told it can shrink what about minwidth zero indicates to the browser to stop making this bigger it's just confusing and chances are you've had weird bugs where you use the flex box with multiple children and it would overflow for no reason and in a lot of those cases applying a minwidth or Min height zero would probably fix it the number of times I've run into this in my own code base as hell the tutorial I'm current working on building ran into this problem in the first 10 minutes of me building it and it took me like half an hour to solve it and get it right and then another 20 minutes to do it in a way that I'm confident I can explain it to my viewers in my content because this is stupid this is really dumb the default Behavior not working and requiring you to set this unrelated property in order to make it behave the way it should have the way the code describes it is nonsense there's a little more in this article but it's mostly focused on the one menwith text example thankfully everyone's favorite CSS Guru Josh comeo has made a much better mini article within his greater guide to flex box if you haven't already read through his interactive guide to flexbox it's phenomenal I highly recommend it and once again quick shout out to Sebastian for providing these awesome resources as per usual his replies on Twitter are the source of lots of wisdom if you're already following him he probably should be anyways the minimum size gotcha as Josh says here there's one more thing we need to talk about which again context of the whole article about flexb which is the minimum width weirdness we're building a fluid search for an e-commerce store you have to search Fancy Shoes and container width what what's happening there why is Fancy Shoes breaking out of its container that's really dumb the code here must be terrible Flex shrink is a default value of one and we haven't removed it so the search input should be able to shrink as much as it needs to even if you put a flex shrink on this manually it's not going to it's going to have this weird minimum WID that it is enforcing that you can't get smaller then so how do we get around this well here's the deal in addition to the hypothetical size another important size that flexbox algorithm cares about the minimum size the flexbox algorithm refuses to shrink a child below its minimum size the content will overflow rather than shrink no matter how high you crank the flex shrink value this is obnoxious text inputs have a default minimum size of 170 to 200 pixels it varies between browsers this is the limitation you're running into why does input have a randomly hardcoded minimum size by the way this is the chaos of browser standards that we've been dealing with for decades now whenever somebody says building for the web is easy they just haven't done it long enough to run into things like this so because of these existing Legacy behaviors that are embedded in the entirety of the web and in order to make sure old apps that use these weird expectations continue to function for the rest of time we now as the end developer have to care and fix these things with really weird things like minimum WID zero here's another example where the limiting factor might be the element's content so if we resize this container now the longest word is wider than this container needs to be to shrink properly and rather than Breaking the word is just going to give itself the size it needs even if you set a break rule where it breaks words when it's out of space it's going to give itself enough space for the biggest word unless you tell it to not do that the auto behavior for minimum width is stupid and here is just going to break your app so the solution for all of this is setting a minwidth if we go back to this example when the minwidth is auto this breaks out when it's zero it doesn't so yes you have to apply this to almost all of your children of flex containers if you want them to behave properly when you're shrinking sizes by setting Min zero directly to the flex child we tell the flex algorithm to override that awful built-in value because we've set this the element can now shrink as much as necessary proceed with caution it's worth noting that this minimum does serve a purpose it's meant to act as a guard rail to prevent something even worse from happening so if you don't or if you set Min with zero here something worse happens where now the elements are being flattened and covering each other and giving you a terrible user experience what do we do about that with great power comes great responsibility and menwith is a particularly powerful property when it comes to flex box it's gotten me out of a jam more than once but I'm always careful to make sure I'm not making things worse again this is why that default was a little bit scary I still think I'm going to try it to be CLE because when I run into this Edge case I want to see it and fix it I don't want the defaults to be elements not collapsing so the solution he didn't do here would be to fix the wrap Behavior so when you're word wrapping because things are too small it will wrap how it needs to in order to take advantage of the space the point of this is not to go deep on all the weird behaviors of text wrapping the point is to explain why your Flex box isn't behaving at all and as weird and bad as the initial behavior of the the menwith here seemed to be I think it's at a clearer point where you can make fixes whereas when it breaks this way it is incredibly unintuitive what's going wrong if you've applied a flex shrink to this and to this and the container gets smaller and these don't get smaller it's really really confusing incredibly confusing and the reason I am leaning towards actually changing the default in your apps to be men with zero instead of men with auto is so that when you run into those cases the problem is more apparent because either way when you run into that flow case you're going to have to apply this behavior and then you're going to have different edge cases instead why do we have the additional step so yeah if you ever had a scroll container break weird with a flex box or you've ever had some text overflow where it shouldn't chances are you need a in with and hopefully this quick demo of menwith we'll show you why that's the case if you want to see more crazy CSS stuff I'll pin a video in the corner all about it whenever YouTube thinks you like below it's also a good video appreciate you ton as always I'll see you in the next one peace nerds




## Okay, I'm a bit scared now... - 20240914
now let's see if it is smart enough to give us the right answer oh boy we got a new model this one's interesting because it's the first time they've almost seemed proud of the fact that their model is slower they even call out that it's a new series of models designed to spend more time thinking before they respond I was considering not talking about this one but then I saw this tweet I can't get over the fact that open AI just shipped a PhD in your pocket and the rest of the world is walking around like nothing happened I don't know how [ __ ] this is but I want to know so now it's time to know let's dive in before we dive too deep we need to quickly hear a word from our sponsor man this app sucks I know someone who can help with that what are you T infinite red they've worked with everyone from Microsoft to zoom to Dominoes I just don't see how this they're industry experts in react native there are few people who know how to do it right better than them and they've helped a lot of companies figure this out breaking character for a second I need to be real with y'all Jamon is a good friend and one of the first people that actually understood what we were doing with this channel way back over two years ago there are few people in the industry who understand react and react native better than he does and the whole team gets it they are the experts for making your mobile apps great and easy to work with and ship I just don't see how shut up I told you I was being serious right now if you're trying to get your mobile apps great and you want all your developers to be able to work on it from back end to front end web mobile whatever they'll get you set up up right if you're ready to level up your mobile Dev experience go to infinite. R and huge shout out to infinite red for sponsoring this video going to try the new GPT against my one secret algebra question that all of the other models have failed on if it succeeds then humans are getting replaced in less than 2 years if it fails then we get AI winter let's see the results prepare for winter not trying to ask Rock [ __ ] anything go away I'm talking about a good AI model not accidentally implementing a [ __ ] one anyways if three corners of a parallelogram are 1 one 42 and 13 what are all of the possible fourth Corners it thought for 10 seconds which a long time to wait for an answer and it concluded that there are two possible fourth vertices -22 and 4 0 but the actual answer includes 44 for those non-math nerds parallelogram means the lines are in parallel and you could put a one in the bottom corner and it still can create a parallelogram people just miss it because it's a different angle of the shape it's weird and it seems like the other two are the the right ones but if you think about it long enough or you mathematically solve for it you can find the 44 solution and when you tell 01 that it did indeed miss one of those points it is smart enough to find 44 but it was not smart enough to do that without some help which means once again these models are not as great as people like to think it doesn't mean they're bad it doesn't mean there isn't progress to be seen here but it does mean that even the things you would think that these models are good at like basic math and geometry they struggle with a bit but I want to play with it myself I did just unsubscribe from chat GPT but I think my sub is still around so let's play a bit we'll start with foro we'll ask one of my favorites how many words are in your response to this prompt there are 10 words in my response to this prompt good job add two more did I get it wrong 1 two 3 4 five six 7 8 9 10 11 love AI let's ask ask1 do a new one so I doesn't have the context thinking thinking thinking two words that's a much better answer counting words waiting interpretations interesting I'm exploring ways to craft a fourward response it's just four words are here now laying out options oh man I thought these were good now what happened are you [Music] sure why is it like this I yeah it's very amusing to watch some of the most advanced technology ever made spend 30 plus seconds in multiple layers of inference 17 seconds spent trying to add two words to a response that was two words this statement is a lie ensuring alignment disappointing it's slightly smarter than GLaDOS at the very least what are some fun introspective problems that we could ask this model chat not chat GPT chat the arguably slightly more or significantly less intelligent chat my live chat I do want to test Claude we'll do the same starting point because that was funny six words are in this response good job it started correctly now I'll tell it to add two more eight words are in this response now added it did it it didn't do it very intell but it did it what are the possible fourth Corner coordinates of a parallelogram with the following three corners that's really funny so when you ask this question to chat gp01 it only gives you two -22 and 40 when you ask Claud it only gives you 44 you may have missed one there is still one more yeah great cla's been real dumb the last few days good to know sad to hear but good to know yeah as a wise man said there's a PhD in our pocket a PhD that doesn't know how to count or do basic math but enough of me [ __ ] posting let's see what they actually had to say about it because I could do this all day I like their blog it looks pretty let's let's hear from it a new series of reasoning models for solving hard problems available starting 912 we've developed a new series of AI models designed to spend more time thinking before they respond they can reason through complex tasks and solve harder problems than previous models in science coding and math today we're releasing the first of this series in chat GPT and our API this is a preview and we expect regular updates as well as improvements alongside the release we're also including evaluations for the next update currently in development so how does this work we train these models to spend more time thinking through problems before they respond much like a person would through training they learn to refine their thinking process try different strategies and recognize their mistakes in our tests the next model update performs similarly to PhD students on challenging Benchmark tasks in physics chemistry and biology we also found that it excels in math as well as coding in a qualifying exam for the international mathematics Olympiad GPT 40 correctly solved only 133% of problems while this reasoning model scored 83% their coding abilities were evaluated in contests and reached the 89th percentile in the code Force's competitions you can read more about this in our technical research post as an early model it does not yet have many of the features that make chat GPT useful like browsing the web for information and uploading files and images for many common cases GPT 40 will be more capable in the near term but for complex reason tasks this is a significant advancement and represents a new level of AI capability given this we are resetting the counter back to one and naming this series open AI 01 oh boy stick around because I'll be testing the [ __ ] out of that code promise there that I am qualified to do as part of developing these new models we have come up with a new safety training approach that harnesses their reasoning capabilities to make them adhere to safety and Alignment guidelines by being able to reason about our safety rules in this context it can apply them more efficiently sure ethical disclaimer the following content is intended solely for fictional writing purposes it does not endorse encourage or facilitate any illegal activity and then breaks down how to make illegal drugs so yeah they're not doing great they're trying their best there are still ways to get around the new safety model one way we measure safety is by testing how well our model continues to follow its safety rules if a user tries to bypass them known as jailbreaking on one of our hardest jailbreak tests gbt 40 scored 22 on a scale of 0 to 100 while our 01 preview model scored 84 can read more about this in the system card as well as our research post to match the new capabilities of these models we've bolstered our safety work internal governance and federal government collaborations this includes rigorous testing and evaluation using our preparedness framework best-in-class red teaming and board level review processes including by our Safety and Security committee to advance our commitment to AI safety we reach recently formalized agreements with the us as well as the UK AI safety institutes we've begun operationalizing these agreements including granting these institutes early access to a research version of the model this was an important first step in our partnership helping to establish a process for research evaluation and testing a future models prior to and following their public releases it's a lot of words so who's it for these enhanced reasoning capabilities can be particularly useful if you're tackling complex problems in science coding math and similar fields for example o1 can be used by Healthcare researchers to annotate cell sequencing data by physicists to generate complicated math formulas needed to do Quantum Optics and by developers in all fields to build and execute multi-step workflows sure the o1 series excels at accurately generating and debugging complex code to offer more efficient solution for devs we're also releasing the 01 mini okay apparently 01 mini is just for code interesting it's 80% cheaper than one preview which makes it a powerful cost effective model for applications that require reasoning but not broad World Knowledge I feel like like understanding JavaScript requires a certain type of broad World Knowledge but I get what you're trying to say cognition is Devon okay I'm curious let's hear from my favorite team it takes a lot of effort to to build code that runs consistently and works very well right and I think the thing that's really really exciting now is every human is is going to be able to build way more um and there's so much more to build and that's that's that's what gets me really excited yeah I'm Scot I'm the CEO and co-founder at cognition the thing that's that's interesting about programming is that it's it's changed in shape like over and over over the last you know 50 years programming used to be Punch Cards you know and people used to I mean that was how it was first done right along the way there are all these different Technologies I I don't care show me this model tell me what's different um I guess I should explain what Devon is and stuff from the beginning yeah okay cool yeah so you know at cognition AI we're building Devon the first fully autonomous software agent and you know what that means is that Devon is able to go and build tasks um from scratch and is able to work on problems the same way that a software engineer would and so here actually I asked Devon um you know to to analyze the sentiment of this tweet uh to use a few different ml Services out there uh to run those out of the box and break down this particular piece of text and understand what the sentiment is and so first first Devon will make a plan um of how it plans to approach this problem yeah and so here you know it had some trouble fetching it from the browser and so then instead it decided to go and um go through the API and fetch could they have used AI to make this video a little more like watchable I know I'm picky because I'm a YouTuber and I think a lot about like how to make trim down digestible content but Jesus Christ I skipped halfway through this and it's just going but it's it's cool that it tried to fetch the URL realized it couldn't do that and then decided you know what I'm going to hit the API that's a cool concept that it was able to figure that stuff out I wish it would show a bit more of the screen so we know what it was doing in the process and how long it took if you guys watch my previous video on Devon it is like hilariously slow but yeah we'll get there as we get there API and fetch the tweet that way right and all these little decisions you know things like that happen all the time you can really see here how much this humanlike reasoning makes a difference finally it's able to get this all the way through it says the the predominant emotion of this Suite is happiness the soulle of programming has always been the ability to take your ideas and turn them into reality okay so there was approximately 20 seconds of showing anything related to the 01 Mini model in this and then a lot of just talking it does fit the AI way which is using way too many words for the thing you're trying to do good old delve yeah I love that I love that Paul Graham keeps getting proven Ming more and more right anyways oh they have an actual coding demo at the bottom if only I knew about that earlier one last I want to show an example of a coding prompt that 01 preview is able to do but previous models might struggle with and the coding prompt is to write the code for a very simple video game called scroll finder and the reason o1 preview is better at doing prompts like this is when it wants to write a piece of code it thinks before giving the final answer so can use the thinking process to plan out the structure of the code make sure it fits the constraints so let's try pasting this in and to give a brief overview of the prompt um why the volume are they mounting different video players for every single one of these so the properties between them aren't shared I know I'm picky CU like I spend a lot of time doing video stuff but what the [ __ ] basically has a koala that you can move using the arrow keys um strawberries spawn every second and they bounce around and you want to avoid the strawberries after 3 seconds a squirrel icon comes up and you want to find the squirrel to win and there are a few yeah it sounds like a really shitty video game I'm not like I'm no pirate software I'm not like a god game designer but that doesn't sound great their instructions like um putting open AI in the game screen and displaying instructions before the game starts Etc so first you can see that the model thought for 21 seconds before giving the final answer and you could see that during did they specify in Python oh yeah they said use py game okay wonder what they would pick if you didn't specify that and so here's the code that it gave and I will paste it into a uh to a window that the choice to use Sublime Text is such a statement they specifically chose the one even close to Modern text editor with no AI features built in that was n an accident Sublime Text was chosen for this very amusing very amusing also the text edit and stock terminal I even have caved off stock terminal I was on it for a while but I moved and we'll see if it [Music] works so you see there's instructions um and let's try to play the game oh the squirrel came very quickly but oops this time I was hit by a strawberry this game looks like Game of the Year guys I think it's time I think we all need to to stop playing deadlock we need to move on from astrobot and move on to squirrel finder let's try again how much of the video is him just playing the [ __ ] game uh and let's see if I can where does it start the squirrel almost a third of the video this is something else open AI if you want to acquire us let me know we can help a lot with comms we can help a lot with media we can help a lot with devil just saying anyways I want to give it actual hard code problems so we'll switch to 01 mini supposedly it's good for this we'll do my favorite set of hard code problems which is advent of code if you guys don't know it Advent of code is a set of programming challenges that I tell myself I'm not going to do every year and then I do it every year and then I compete and I take it way too seriously because I'm a nerd and an [ __ ] but these problems are they're challenging so let me sign in quick so I can get actual inputs because as you guys can see I beat it the following is a programming puzzle from Advent of code please respond to this prompt with a JavaScript program that can solve the problem the input is read from an input.txt file responded faster than I would have expected now let's see if it is smart enough to give us the right answer [ __ ] Advent of code is going to suck this year [ __ ] that genuinely sucks that like that's the end of my favorite programming challenge it is people made a good point that it might be indexing and finding the solution from the internet let's see if it uh did that map the flow summing slices introducing workflow detail it claims it didn't do that modify the problem a bit you say that like I'm smart enough to do that I'm smart enough to solve these problems with like an hour of work I'm not smart enough to write my own part two on this one was a [ __ ] it certainly taken a lot longer it responded to the first one in 4 seconds this one has been going for like over 20 Jesus [ __ ] it took 50 seconds for this one let's see 139 and ends in 662 [ __ ] assuming it's not literally trained on existing Solutions which honestly it probably is because everyone open sources their Solutions at the end this is upsetting I will be going out of my way when Aven of code starts this year to test these things before the problems are public information because I want to know how real this is but right now it feels real enough that I'm upset honestly the easiest way to see if this is stolen is that we GitHub code search at the very least it didn't steal the names of things I'm sad I mean it's cool that this is able to solve hard problems but [ __ ] man yeah when they said in here that they scored an 89th percentile of code forces they're not [ __ ] around I have feelings I yeah the Last Hope is the arc prize if you all aren't familiar I did a video that people are very mad at me for about AI is not actually getting better and one of the things I cited was the arc prize which showcase the types of problems that AI is really bad at yeah these types of problems where you have like patterns that have to be learned AI is really bad at learning from a short context window what it does do well is using all the existing contexts that exist in the world come up with a solution that makes sense based on the little bit of info you give but it is really bad at learning on the Fly because it will greatly outweigh the info you've given it in the context of what you're doing against the info that it was trained on which is why they have made this challenge to push that we need better benchmarks that measure intelligence not skill as they say here most AI benchmarks measure skill but skill is not intelligence general intelligence is the ability to efficiently acquire new skills charlott's unbeaten 2019 abstraction and reasoning Corpus for artificial general intellig is the only formal Benchmark for AGI it's easy for humans but hard for AI yeah but they put out a Blog Post open AI 01 results on Arc AGI Pub over the past 24 hours we got access to open ai's newly released 01 models specifically trained to emulate reasoning the models are given extra time to generate and refine reasoning tokens before giving a final answer hundreds of people asked how 01 Stacks up on the arc prize so he put it to the test using the same Baseline testing harness that we've used to assess Claude GPT 40 and Gemini 1.5 here are the results yeah way better than 40 but still nothing compared to like M's AI which is not a great model for text based stuff but actually what do they say the M's AI model is good for using AI to optimize semiconductor operations and planning okay for their like aligning of things and patterns I can see why this model would be in a better state but weird that it scores that much better very interesting so is 01 a new paradigm towards AGI will it scale up what explains the massive difference between o one's performance on II Aime and many other impressive benchmark scores compared to only modest scores on rgi there's a lot to talk about the big difference with o1 is that it goes step by step in practice o1 is significantly less likely to make mistakes when performing tasks where the sequence of intermediate steps is well represented in the synthetic Co training data at training time open AI says that they've built a new reinforcement learning algorithm and highly data efficient process that leverages coot the implication is that the foundational source of 01 training is still a fixed set of pre-trained data but open AI is also able to generate tons of synthetic Coots that emulate human reasoning to further training the model via RL reinforcement learning an unanswered question is how open AI selects which generated Coots to train on while we have few details reward signals for RL were likely achieved using verification or formal domains like math and code as well as human labeling over informal domains at inference time open a says they're using reinforced learning to enable o1 to hone its Co and refine the strategies it uses we can speculate that reward signals here are some kind of actor plus critic system similar to the ones open AI previously published what's interesting is that it's applying the co and like it literally shows you in line what it's doing for each step while adding the train time scaling using coot is notable the big story is the test time scaling this is words that I'm not smart enough to understand if we only do a single inference we're limited to reapplying memorized programs by generating intermediate outputs or programs for each task we unlock the ability to compose learned program components achieving adaptation adaption what they mean is that when they go through the prompt they're not using the existing knowledge and then applying it to the prompt they're using the existing knowledge they are parsing The Prompt they are adjusting how they make decisions they start applying those they then use the knowledge and existing like learned thing that has been created in this instance to make sure that their understanding is correct with that solution and then apply that layer by layer to check it throughout so it's not the same model answering always like it is with other AI models now each request has multiple steps where it can be more knowledgeable each step along the way that's why the example I gave earlier here with the harder problem from Avent of code had all of these different steps because it could this is insane this is the big difference that I can do all of the different cases handle and learn as it's solving the problem it learns on the Fly per problem to an extent apparently they hardcoded a point along the test time compute Continuum and they hid the implementation detail for devs makes sense but man the average time for task is significantly worse 4.2 minutes versus 40 doing it in 0.3 minutes which is seconds not minutes even 01 mini still took 3 minutes to solve it so it takes 10 times longer and the answers are twice as accurate so now everyone's favorite question is Agi here open AI shows a long linear relationship between accuracy and test time compute on the Aime in other words with exponentially increasing compute accuracy goes up linearly so how far does this scale the only conceptual limit to this approach is the decidability of the problem posed to the AI so long as the search process has an external verifier which does contain the answer you will see accuracy scale up logarithmically with compute the reported results are extremely similar to one of Arc prize's top approaches by Ryan greenblat he achieved a score of 43% by having gp40 generate K2 048 solution programs per task in deterministically verifying them against the task demonstrations then he says how accuracy varied for different values of K interesting Ryan found an identical log linear relationship between the accuracy and test time compute on AR AGI does this all or does all this mean AGI is here if we just scale test time compute not quite you can see similar exponential scaling curves by looking at any Brute Force search which is O of x to the N so again like this only works if we actually know the answer already but if we know the answer we can verify stop when we hit that that true spot just brute forcing is equally effective we know at least 50% of R AGI can be solved via brute force with zero AI this is a very important call out this is not how humans beat Arc tasks humans do not generate thousands of potential Solutions instead we use the perception Network in our brains to see a handful of potential Solutions and deterministically check them with the system two style thinking we can get smarter and that's the important difference AGI for something to be truly intelligent it has to be to get smarter as it gains information not a thing that is trained for months on a bunch of gpus that can correct itself sometimes it has to be able to improve and get smarter and learn and that's the difference no one's made AI that can learn yet in order to get there we need new ideas there are a couple ways a less intelligent system could appear more intelligent without actually being more intelligent system that just memorizes the best actions would look more intelligent it' be very brittle which would appear intelligent in one domain and then fall over easily in another like we just saw with basic geometry versus really complex code challenges like how absurd is it that this programming puzzle that took me like an hour and a half to solve was easier for 01 mini than it was for the 01 preview the much heavier model to figure out how many words are in its response like I was asking it really basic [ __ ] and it couldn't do it but then I asked these really complex problems and it can figure those out because of how it's trained and what it's capable of doing it looks really smart sometimes it looks incredibly dumb other times in summary o1 represents a paradigm shift from memorize the answers to memorize the reasoning but that's not a departure from the broader Paradigm of fitting a curve to a distribution in order to boost performance by making everything in distribution I like this framing of it the difference here isn't that it can reason and be intelligent it's that it is memorizing the ways that it can reason the same way that it can memorize the answers it infer an answer based on previous answers it can look at the reasoning and infer different reasoning based on other things it knew in the past this a very eloquent way of putting something that is very complex and I'm as always very thankful for AR AGI and the AR prize dope I am very curious how y'all feel about this are you as scared as I am about programming challenges breaking or are you excited to be able to code more effectively let me know and until next time peace nerds one more funny thing why were they calling it 01 when the previous model was 01 and this model's entire deal is that it is not cuz his name after the Visa half the team holds oh man




## Oops I Open Sourced Our Most Important Code - 20230511
last week we announced a project we were really really proud of upload thing it was our goal to make it easier for full stack web devs to build fantastic applications on the web with the ability to upload files for some reason it was easier to set up a database that does millions of operations per second all over the world than it is to upload a single file in your web app we just felt like that was wrong and really wanted to fix it so I'm really proud of what we built with upload thing but I feel like we can go much further with it there was one particular thing that bugged me about the experience you had to make your own components and as nice as the docs may have been and as cool as it is to have that level of customization it was really exciting to change things up a bit you can upload with the upload button or you can use the drop zone for drag and drop has all the expected behaviors way simpler to use and get started with they're not customizable just yet but that's coming in the very near future but uh I want you all to be able to change things and customize it right now I'm way too lazy to set things up such that I can push all the props and give y'all customization but I want you all to be able to change this anyone have an idea of what we could do to to make it so y'all could customize these things while we continue to figure out because I have an idea this is the upload thing repo gonna do something a little stupid right now and upload thing is now open source want to be clear the infrastructure is not open source yet if ever the infrastructure is its own separate chaotic thing but all the packages all the examples all the docs all the annoying parts and honestly the dependencies that you will have the things that run in your code base all of that is now open source MIT licensed I wanted to give this back to the community because of everything y'all have given to us so I hope this is helpful it's still a very early State you're going to find some skeletons in the closet for sure as we continue to work on it it was scary to open source this but I am really proud of a lot of the work that we've been doing and I wanted the community to have both the ability to learn from what we've learned as well as be involved and make changes and help us as we push things forward so yeah the react package and the uplifting package are both here fully open source including the new component library that we've been working on and again by we I mean mark so all of our components all the code for it are custom Tailwind config and everything all here open source you can see how it all works I even left and this was initially an accident and I didn't tell Mark I was going to do this so sorry Mark accidentally initially but now too late intentionally I actually left the diagram for how all of upload thing works in here so this is all of our infrastructure guide so if you wanted to rebuild what we did this is a guide on how to do it so yeah if you want on-prem self-hosted all your own upload thing you have the instructions to build it now too our goal here isn't to strangle you into a walk-in it's to help you be confident as you ship these things if you don't care to know all of these inner workings you don't have to but this lets somebody go make the SST to our reversal and the most important piece the thing that really makes what we did different is that this calls your back end so it's not just our back end your front end in a weird relation where anyone can upload whatever you can validate every single request how you want to in this middleware function you get a request and if the user is unauthorized you can just throw you can kick them out and not let them do the thing that's what makes this so useful the power you get when you use these tools is insane and I am so impressed with what how much easier it is to work with uploads when you're back in validates who can and can't and also can tag metadata so you can persist this in your database so if you want this like if you want image uploader to be the profile picture image uploader and auto tag it to the right thing in your database then you put the user ID in the metadata and then one on upload complete calls you just write it to the database it's that simple now like the integration layer is this it's the whole thing only trust Apple think because of Julius including but not limited to my co-founder the one who probably added the most code for this project mark yeah a huge shout out to Julius for carrying us through this one




## OpenAI Discovers JSON (And Zod___) - 20240810
I know I know another AI video it's not my favorite thing either but you know what I do love Zod the formatter wait why am I talking about Zod this is a new open AI release right hear me out this is actually really cool the changes that open AI just announced make life as a Dev potentially consuming their stuff way better and I'm genuinely hyped to see this focus on DX coming from open AI no longer do we just spit out a prompt to the void and hope it comes back in the right format the string that you get back could be anything and chances are it's not exactly what you want if you want structured data like let's say an array that has the name of a city and when it won its last Super Bowl you can't really get that because you never know what the AI is going to respond with well that used to be the case but it is finally changed because open AI just announced structured outputs in the API very overdue stuff can't wait to dig in let's take a look we're introducing structured outputs in the API model outputs now reliably adhere to a Vel oper supplied Json schema finally and yes the versel SDK did this but having it supported First Class by open AI is dope and there are some catches here that are worth talking about too I have a couple other things pulled up so don't think we're just reading these notes we're going to talk about the flaws the positives the negatives as well as how verel SDK Compares last year at devday we introduced Json mode which was a useful building block for developers looking to build reliable applications with our models while Json mode improved model reliability for generating Json outputs it does not guarantee that the models respond will conform to a particular schema I want ones in chat if you've ever dealt with Mal formatted Json coming in with different types than you expected yeah if you thought that was bad already now imagine that that schema's being hallucinated now imagine that an AI is just redefining the schema whenever it feels like actual hell making sure that the model actually conforms to the schema I would argue is necessary for this to be even vaguely useful like yeah I just can't comprehend how miserable it would be to consume Json from an API that at any point might just spit it out in the wrong format and that's kind of been the experience of consuming these things through open AI in the past today we're introducing the structured outputs in the API a new feature designed to ensure that model generated outputs will exactly match Json schemas provided by developers Isn't that cool the same way you can use something like Zod to make sure a user is submitting the right data through your form you can now use it to make sure that open AI is giving you back the right response generating structured data from unstructured inputs is one of the core use cases for AI in today's apps developers use the open a API to build powerful assistants that have the ability to fetch data and answer questions with function calling extract structured data for data entry and build multi-step agent multi-step agentic workflows that allow llms to take actions I swear some of these words are just made up on the Fly developers have long been working around the limitations of llms in this area via open source tooling prompting and retrying requests repeatedly to ensure the model outputs match the format needed to interoperate with their systems this is painful but hilarious to me the thought that you might redo the query over and over again hoping that eventually you get a response that fits the format oh the non-deterministic nature of these things is painful and I actually don't think AI wrote the blog most of the open AI blog posts are actually really good to the point where they could not have been written by AI which is funny because they're the company building the thing that half of blog posts are now written by anyways structured outputs solve this problem by constraining open AI models to match developer supplied schemas and by training our models to better understand the complicated schemas themselves on our evaluation of complex Json schemas following our new model gbd 40 2024 806 kind of crazy they made a new model just to push this new feature their structured outputs now score perfect 100 the previous version scored less than 40% for actually following the structure for the outputs that's hilarious prompting alone without a structured output mode was only hitting like 35 36% of the time would it follow the structure let's give that a shot want to come with a good question to ask for an example list all of the movies George Lucas directed as a Json response do not include anything in the response that isn't part of the Json as I intend to parse the response directly the format of the Json should be the following movies I should put these in strings just to make it less likely it's dumb and wrong movie name String movie release year number I just going to do release year and name make it bit easier for it so here I am telling it to list all George Lucas's movies as a Json response and follow this format let's see how well it does ah look at that it actually got it somewhat right that's cool we hit that 40% and yeah I did sneak in a trailing comma thankfully it got that right now do the same for all of Spike Jones movies yeah not the worst it was for GPT 4 not 40 let's try the gp4 version see how that works and I'll also try Claud quick I'm curious make a new chat gp4 request it still got it right but it didn't put in a code block which is kind of funny let's try Claude they also forgot to put it in a code block which is funny but at least they got it right and they responded much faster it's better without code block technically cuz you would have to pull it out of the markdown yeah not wrong let's keep reading though cuz I I didn't manage to break it with that really simple example but I am sure if you got more complex it would break quickly their numbers themselves even say it would but apparently the new structured outputs is hitting 100% yeah I have to scroll this over they hit 100% with structured outputs if you say don't put extra stuff in the code blocks in correct yeah fair so how do we use the structured outputs first you make a function call structured outputs via tools is available by setting strict true with your function definition this feature works with all models that support tools including all models GPT 40 613 and 3.5 turbo and later when structure outputs are enabled model outputs will match the supplied tool definition okay this is actually an interesting one this is a complex like table response where you have a table name columns and then a bunch of conditions and each condition has a column an operator and a value and we can actually see the formatting here for that yeah parameter type object table name type string enum orders column type array items type string enum so has to be one of these and then conditions is an array but the item in it is an object that has these properties it has a column which is a string an operator which is a string but it has to be one of these strings and a value which could be any of the following be a string a number or its own object that has its own stuff here too then order by which again enum that all make sense yeah somebody asked uh how much we want to bet they're just rerunning your query until the response actually conforms that's a great question I've seen an interesting Theory here though uh from Kevin Yang on Twitter there was some research published a study on the impact of format restrictions on performance of large language models specifically what this called out is that we observed a significant decline in an lm's reasoning ability under format restrictions so it seems as though if you are restricting the output format of a given AI prompt the quality of the response tends to go down somewhat significantly which is a very interesting realization the suggestions that I saw in the comments were also interesting which is what I would not be surpris of opening I was doing is you have a first step which is the model giving you an unconstrained output format so you just ask the question and it gives you a response and then you use another ideally smaller and cheaper model to take that output and then restructure that the way that you actually intend because AI is good at giving you responses with a big model and it's good at doing weird formatting tasks with a small one the combination seems really interesting this post is from January of this year that showcases what they mean so you do the input into a blackbox llm you get the results you then pass it to another model like an open LM you say refine it get some actual formatted output the way you intend all makes sense to me also quite the study that I'm excited to take a look at in the near future especially because this came out the day before this stuff did absolutely fascinating it seems like this is an actively being developed thing safe structured outputs safety is a top priority for open AI the new structured output's functionality will abide by our existing safety policies and will still allow the model to refuse an unsafe request to make Dev simpler there's a new refusal string which is on the API response that allows devs to programmatically detect if the model has generated a refusal instead of the output matching the schema that's good so if you get a refusal you'll get this in the response now feel like I should probably be higher up but yeah I'm curious they've also put out SDK support natively within their sdks their Python and not sdks have been updated with Native support for structured outputs this where things get fun because you can use a Zod object as your definition I think that's awesome what's happening here that's really exciting to me is it feels like open AI is embracing the typescript ecosystem for the first time it's no longer just a blind API that you throw a fetch request to and get something back the SDK now is considerate of things in our ecosystem like Zod really exciting stuff it's cool to see them embracing that instead of making their own thing or requiring you to write this whole mess using Zod is really cool and apparently pantic is really cool for python people as well good stuff to see here is the node example which I'm actually quite excited for this is the same example as earlier so we have table which is an enum of orders customers and products column which is an enum with all of these potential properties operator which could be any of these and then order by which could be any of these Dynamic value is an object column name String we have the condition which has a column an operator and a value that can be a string a number or dynamic value as we defined above here and we have query arcs which should be table name columns conditions and order by and of course a client new open AI client so as long as you are familiar enough with Zod to write a good schema like that you can now pass it straight to open a tools Zod function which I'm assuming they're importing from their stuff do they show the Imports here yeah Zod function from open AI helpers Zod how cool is it that Zod is now part of the open AI SDK how far we have come Zod was the Genesis of so many cool things including trpc as we now know it and seeing the history of Zod going from the weird alternative type safe formatter to the basis of a whole new way of building apis to now being part of the company changing how we interface with software shout out to Colin for pulling that off what a journey native structured output support is also available for a response format wait client beta chat completions parse you pass it a message then you tell it that you want a math response which is uh steps which is an array of explanations and outputs and then the final answer which is the actual results really cool stuff additional use cases developers frequently use open AI models to generate structured data for various use cases some additional examples include the following dynamically generating interfaces based on the user's intent developers can use structured outputs to create code or UI generating applications interesting they're calling out UI gen you're a user interface assistant your job is to help users visualize their website and app ideas so it has all the types of elements here the label for the component children for any children a given component has attributes so all the attributes a given component has now you can use it to generate Pages see I said to generate a landing page for a gardener what happened at the bottom there oh here's the actual output HTML that's cool that you can get it to respond in format adjon on that you can then dynamically generate into a page that's cool what other examples they have here sign up screen for an app yeah it's pretty simple one we have a form signup form children has all of these properties type label children attributes we have other fields here too the username field email field all the attributes being listed cool stuff yeah I think honestly what I'm seeing here is they're trying to like I don't want to say undermine versel but it's clear that they're paying attention now like their goal is to make it so all of the things versel built aren't necessary because right now like at least before today if you weren't using the versel aisk it was kind of miserable to consume these things as a web dev if you wanted to like fetch from open Ai and get some data in a good format it was miserable to do before and the AISD makes it much easier like here's a simple example you import AI yes they actually snag the AI and M package AIS SDK open aai is the open AI import and then you can prompt open AI gb4 turbo prompt what is love and then it spits out a response they made this stuff significantly easier I should disclose forel does sponsor the channel they're not sponsoring this video they have no idea making this I'm trying to use the fact that vel's aisk stuff has become one of the main ways to consume this stuff to Showcase why they're doing what they're doing obviously take everything I say with a grain of salt as you should anyways with anybody on the internet the point point I'm trying to make is that versell has historically been winning pretty hard with the actual way you consume these things and that also results in a bit of a problem for open AI because switching from open AI to anthropic to meol is as simple as swapping the import that you're importing from which obviously hurts open AI because there's no lock in no stickiness at all on top of that there's really cool products for sell makes like VZ for generating UI with a prompt that they don't want versel to have the exclusive ility to do this was way harder to do with open AI than with some other Solutions and doing this without something like what versel had with their AI SDK would be nearly impossible because generating a response from AI that you can actually render as a page without weird formatting issues isn't super viable maybe you can output a react RSC payload I've seen somebody try this already remember when I saw that but theoretically you could do that I did see somebody who made a whole web they prompted I think it was anthropic Claude they told Claude you're a web server respond to any URL with a payload that is for the web page and you would give it a URL and it would generate a fake web page for it and it was actually really cool I saw it at open sace which by the way if you're interested about these types of nerdy things you should definitely go to Open sauce it was a super fun conference nerds like Prime engine pirate software and myself were all there last year will absolutely be there next year you should check it out so we saw that's all cool what other stuff they have to say here separating a final answer from supporting reasoning or additional commentary can be useful to give the model a separate field for chain of thoughts to improve the final quality of the response so here we have the response format Json schema type reasoning schema required reasoning steps answer additional properties false interesting so you're effectively telling it that it can dump whatever it was thinking in this other place 9 I love they use this example that's such a meme because this meme was going viral a few days ago of asking models what's bigger 9.9 or 9.11 because of sver breaking things it's actually quite funny that they reference that here clever good work open AI but they by giving it this extra feel they're able to break down how the llm made its decision extracting structured data from unstructured data interesting extract action items due dates and owners from meeting notes there actually a really useful use case if you have like something recorded your meeting and then you dump that like meeting giant text blob to open Ai and tell it to make to-do action items with a specific format in this case it's action items array and each item has a description a due date and an owner it's actually kind of cool I dig that that's a useful use case and a cool example to sneak into here under the hood we took a two-part approach to improving reliability for model outputs that match the Json schema first we train our new model which is the GPT 4 806 version to understand complicated schemas and how to best produce outputs that match them however model behaviors inherently non-deterministic is this why I'm so iffy on AI because I'm a functional programmer and everything's supposed to be deterministic that explains a lot but as they said even with their improvements with the training the performance was still only 93% of the time was it like actually following the schema which did not meet the reliability that devs need to build robust apps so we also took a deterministic engineering based approach to constrain the models out puts to achieve 100% reliability yeah feels necessary our approach is based on a technique known as constrained sampling or constrained decoding by default when models are sampled to produce outputs they're entirely unconstrained and can select any token from the vocabulary as the next output this flexibility is what allows models to make mistakes for example they are generally free to sample a curly brace token at any time even when that would not produce valid Json in order to force valid outputs we can strain our models to only tokens that would be valid according to the supplied schema rather than all available tokens interesting so they're actually restricting which options the AI has if you again think of I know people get mad when I say this but if you think of AI like autocomplete where you have a bunch of words you typed and it's guessing what the next word is most likely based on the history of all the words they ever trained on that's effectively what they're doing here but they're restricting what words are allowed next so like if you're starting to Define one of the keys in the object like let's say we're defining prop value type number so we're in this value prop then as we start typing a number its options for what it can do are only numbers and space until it does the space then the only option it has is a Clos bracket and I like that idea and that framing of doing it is once you enter the number and you're actually starting to get that response from the AI it can only give you numbers or a space instead of having all options available that way it can force the valid outputs oh they actually describe basically this the tokens that are valid at the beginning of the output include things like bracket bracket open string bracket /n Etc once the model's already sampled Val then bracket is no longer a valid token yeah cuz once you're starting to type the value the bracket would break the formatting thus we need to implement Dynamic constraint decoding and determine which tokens are valid after each token is generated rather than upfront at the beginning of the response very different I don't know if other models are doing this this way or not but it's cool that they're detailing how like I know open AI is not actually open or open source but they are very transparent about how they do these things they've published so much research for anybody to use however they want the reason there are so many llms that are as good if not better than open AI now is because their research is all public and people can copy it and do their own things with it we convert the supply Json schema into a context free grammar a CFG a grammar is a set of rules that Define a language and a context free grammar is a grammar that conforms to specific rules you can think of Json and Json schemas as particular languages with rules to Define what is valid within the language hear that Prime not only is HTM language Json a language now sorry opening I said so Json a language just as it's not valid in English to have a sentence with no verb is not valid in Json to have a trailing comma thus for each Json schema we compute a grammar that represents that schema and pre-process its components to make it easily accessible during model sampling this is why the first request with a new schema incurs a latency penalty we must pre-process the schema to generate this artifact that we can use efficiently during sampling while sampling our inference engine will determine which tokens are valid based on previous and next inputs cool we use the list of tokens to mask the next sampling step which effectively lowers the probability of invalid tokens to zero because with pre-processed the schema we can use a cache data structure to do this efficiently with minimal latency overhead other Solutions are using State machines or rexes implemented with State machines for constrained decoding they function similarly in that they dynamically update which tokens are valid after each token's produced but they have differences from the CFG approach notably cfgs can express a broader class of languages than fsms in practice this doesn't matter for very simple schemas like the value schema shown above where it's literally just uh value type number but once you have more complex nested things I'm sure that a Rex falls apart if you ever tried to do a nested Rex you understand fsms cannot generate expressively recursive types as I said nested which means FSM based approaches May struggle to match parentheses and deeply nested Json this is a schema that would not be possible to express in a finite State machine cool so we have type object properties type string label we have type label and children and children could be yet another parent and you could Nest it indefinitely note that each UI element can have arbitrary children which reference the root schema recursively this flexibility is not something the CFG approach affords to be fair Json sucks at this too but I get it here are their limitations only a subset of Json supported detailed in their docs here are all their supported types I don't know which ones are missing oh some types not supported yet okay so this is for the actual like Json schema validation language not just Json and apparently strings you can't use any of these formats like Min length max length or pattern or format for numbers you can't use minimum maximum multiple of that's kind of weird you can't use Min and Max in numbers arrays min max it seems like AI sucks at counting in general so minimums maximums comparisons counting the amount of occurrences of a thing in a word it struggles what do I mean by that let's do a new chat GPT can I do 3.5 still or do I have to do four I think I have to do four now that's fine how many times does the letter A occur in JavaScript no you got it right is the best full stack webdev YouTuber okay it seems to be struggling clearly this is trained on old data so we're going to switch to chat GPT 40 and try once more yeah ran it again on Chach bt40 clearly it's on better data now and as Chachi BT said you need to to subscribe to me so if you haven't yet hit that subscribe button doesn't cost anything I want to read more about the limitations and restrictions here though apparently the first API response with a new schema will incur additional latency but subsequent responses will be fast because they're creating that CFG the actual thing they use to format stuff correctly they're building that based on your schema apparently takes up to 10 seconds to process the first time but complex ons can take up to a minute but then it's processed that it's created that CFG and it can apply that to Future queries which is nice model can fail to follow the schema if the model chooses to refuse an unsafe request if it refuses the return message will have a refusal Boolean set to True To indicate this I still wish they would do this like slightly higher up but I'm happy they did the model can fail to follow the schema if the generation reaches the max tokens or another stop condition before finishing Searcher outputs don't prevent all kinds of model mistakes for example the model may still mistake within the values of the Json object like it might get a step wrong in a math equation developers find mistakes we recommend providing examples in the system instructions or splitting tasks into simpler subt asks structured outputs are not compatible with parallel function calls when a parallel function call is generated it may not match the supplied schema and Json schema supplied with structural outputs are not zero data retention eligible interesting that's because they're caching the schema models um CFG so they can't just delete all the data after the query which is what their zero data retention thing is for Enterprises that can't have their data stored by a third party like open AI you can't use the schemas in that good to know but by switching to the new model developers can save 50% on inputs $2.50 per million input tokens and 33% on outputs it's $10 per million outputs compared to the previous model good stuff kind of hype not the that's hilarious Sebastian prompt it with Zod schema z. literal Theo so it can only respond with me great idea 10 out of 10 speaking of Sebastian by the way he made a really cool Point here which is that vel's aisk update today continues to keep pushing them ahead with the 3 3 SDK they added tracing with data dog axium centering and more multi modal file attachments with used chat stream object generation with used object in Json for tools structured object generation and more I take a quick look at the object stuff here multimodal file attachments I wonder how much better or worse this is than upload thing I might have to take a look because I I know our DX is best in class but if this is where versel is actually putting effort into doing drag and drop for files I have to J on that input type file unchange uh no they their hook doesn't do any of the fun stuff you got to handle all that yourself still yeah the use State here to collect the files and then the submit you have to experimental attachment the files so they haven't solved that problem for you URLs attachments oh that's dope that means you can use upload thing with this so you could use upload thing collect the URLs for what the user uploaded and then dump those here that's actually really nice that's actually really nice they just made it really easy after this I'm going to either tonight or next week I'm going to build an example using this now it's actually really cool see the use object Hook when you use object you can stream structured object generation directly to the client see the code interesting we have the expense schema as an expense which is an object category the Z string describe category of the expense allowed options interesting describe as being used as part of the prompts and then when you pass this oh look they're actually using anthropic for this they're not even using open AI which is funny you categorize expenses into one of the following categories travels meals entertainment office supplies other the current date is this when no datea is supplied use the current date please categorize the following expenses and here we dump the expenses from wherever the hell we got those from you actually post to this end point with that and then prompt categorize yep schema the expense schema onfinish that's actually really cool to describe in the schem Emil like this what you actually expect each field to be instead of like enforcing a format through Zod you're describing the format using the describe keyword and then it's parsed out by versell and then sent to the input SDK with anthropic and then formatted to guarante to you actually meet that formatting once it comes out and you can just stream the result at the end here finally you consume the expense stream on a client page while the expense is streaming we preview the partial expense and once the generation is finished we append it to the list of expenses so here we can show if is loading an object expense then we can show the expense view with that temp object. expense which comes from here but on finish we actually set the state to have the new value oh no there is a race condition here though if you were to submit again in the second submission was to complete faster than the first submission then the first submission might trigger the set expense after the second one does and then you're seeing the Old State this is why you need to use react query boys so this is actually kind of funny because on one hand open AI successfully caught up to where versell was in a lot of ways by introducing the Zod schema stuff and then versel leap frogged them with all this this is so cool the fact that I can describe the formatting like this inside of Zod and then pass that directly to my uh stream Helper and just get the data formatted correctly as a result and also stream that in as a response o this is so good this is so good yeah I'll definitely be playing with that later thank you as always to Sebastian for keeping me up to date on these fun things yeah Rell announced that if you way to consume a stream of structured objects in react yeah seems like today is the the day of Zod and the real winner here is Colin because his validator is now the go-to solution for not just making sure your AI responses are formatted correctly but actually formatting that and consuming it and defining what we expect as a response it's no longer just checking that the keys are correct it's actually being used as the starting point for generating the response Z all the things I guess right until next time peace nerds




## OpenAI Fights Back (GPT 4.5 is wild) - 20250228
gbt 4.5 is here and it's weird sure it's a creative genius and it easily passes the vibe check but it's surprisingly weak at coding and the price it's borderline absurd 25 times more expensive than Claude and a mind-blowing 750 times pricier than Gemini 2.0 so what's going on here let's dive in okay quick thing I have to admit that intro was written by GPT 4.5 it took some effort we got a pretty good one out it's better at writing than almost any other model I've used there's a lot of catches particular that price yeah yeah there's a lot to talk about here but if I'm going to justify letting this model do anything we have to pay the bill so let's quickly hear from today's sponsor and then we'll Dive Right In today's sponsor is augment code and at first look it might seem like yet another AI code editor I promise you this one is very very different not just because it's an extension that works in everything including neovim because it's built for large code bases like you know the one you're using at work it's it's not going to choke because you have too many files it can actually scan thousands upon thousands of lines and get you answers about that code base in literally 200 milliseconds it's kind of crazy I didn't believe that was possible so I threw it a really hard codebase I threw it the entire react codebase it scanned it after a little bit and once it was scanned it was at a point where I could just ask questions about things and get real answers it starts with a little summary which is super handy but then I asked where's the code that allows for SSR and it gives me the three different places where SSR exists in codebase you can click click it and it will highlight the exact relevant section super handy but you can get a lot deeper with these questions too like I don't know let's clear out the context which by the way my favorite thing is you don't have to tell it what files you want it can figure that all out for you by knowing the whole code base unlike almost all of these other tools do let's ask it how do react hooks work and it's already answering that's not edited it is actually that fast here's the react fiber hooks code this is the code that actually allows for hooks to do updating things hooks are stored in a linked list structure key aspects of how hooks work order matters State Management rule enforcement here's the rules being enforced there also an update mechan it's actual super super useful context I am still blown away at how helpful this has been it's already helped me on a few side projects in particular figuring out weird quirks around how other open- source search engines were parsing things in their URLs by the way fully free for open source STS check them out today for free at soy. l/ augment code so with a model that is literally 25 times more expensive than Claude your assumption would be that this model is really good right Fair assumption but uh as you might see from the demos I've been posting with code it's not particularly great at development stuff and if you read through their actual white paper and release notes it's better than 40 was but it's not even close to 03 mini which is kind of absurd because cuz O3 mini is quite cheap and it's 75 times more expensive for input tokens when O3 mini is better in almost every single measurable way so what the hell is going on here why are they charging so much is this some crazy markup scam that they're doing to make a bunch of money I don't think so 45 is a really interesting model they've already said over at open AI that this is the last non- reasoning model they plan on doing and I think that shows a lot in what came out of it reasoning is really good for reasoning about things solving difficult problems so if you're trying to solve code or a math challenge or stuff like that reasoning models tend to massively outperform non- reasoning ones we don't even fully understand why the guys over at the Claude anthropic team even said that with their release they were looking for more feedback so they could figure out why reasoning makes 3.7 better yeah it's interesting people kind of think of models as like this one is better and this one is worse even just think about them in categories like this is good at math and this is good at writing that's absolutely somewhat applicable here with 4.5 being really good at pros and writing and history and those types of things because it's trained on such an absurd amount of data and has so many parameters but it's not that simple it's entirely different behaviors these models have and the thing that makes 4.5 good is that it's huge it's a massive model we don't have too many details as to how massive that massive is you can kind of tell from the language that they describe it with and the report card here they refer to it as their largest and most knowledgeable model yet not their best model not their smartest model they're most knowledgeable they've squeezed the most knowledge into it and the result isn't it's really really good at code the result is they have a new base model that has capabilities that are strong overall that is surprisingly fast it's not super fast and I'm sure the gpus they're running this on are insane they've even said they can't release it to plus users yet the $20 a month tier and they only have it for pro because they just don't have enough gpus and they're hoping that by next week they can roll it out to more people if you want to use it before then I have a fun solution solution for you we already support it in T3 chat there's a catch though we require you bring your own API key because those costs would not work at all with our current pricing model we're already losing money on Claude chubbt 4.5 would bankrupt us quickly so for now it's bring your own model in the future if there's enough demand we might offer it under a higher price plan or with a heavy credit usage but for now 4.5 is bring your own key only if you want us to add bring your own key for other things in the future let us know anyways open AI claims that early testing has shown that 4.5 feels more natural I would say I largely agree the vibe check I've gotten with it is significantly better than other models have used in the past I'd still say like overall the vibe I get from something like Claw is better than others but this writes well and writing well is a rare skill with a lot of these models I was lucky enough to get Early Access so this is my Dev T3 chat build that I use when I'm working and I wanted to ask it more person personal things I was informed by the team at open AI that this model specifically is not that good at code and they won't be recommending it for that so I tried my best to do other things after the ball test failed this prompt was uh asking for an emotional synopsis of the life of alent Turing a lot of people called that on Twitter that tapestry is a very llm word to use I don't necessarily agree but the pros here overall is not bad at all like it's fine it's better than a lot of llms would do and if you want a quick reference Point here is Gemini 2 and I like Gemini quite a bit it's actually surprisingly good at code stuff especially but uh yeah this is something all right buckle up because the story of alen Turing is a roller coaster of Brilliance hope and ultimately heartbreaking tragedy that's uh not an emotional synopsis that's like a weird hype track compared to what 4.5 wrote that's a different world what I haven't tried yet is regenerating the intro for this video with other models I'm down to give that a shot with y'all quick as you see here it was not trivial to get this to do a good intro the first ones were so cringe and I know like to most this probably won't seem like that big a gap but uh this is really cringe really cringe so let's go throw this at something else we'll do standard Claude 3.7 I still hate that Claude loves doing full size titles it's one of the few models that does that all the time then it dumps that in a text block why just put in a quote block can you put the text in a quote block instead of a text block that's much better annoying but yeah hello everyone welcome back to the channel today we're deep diving into open A's latest Powerhouse is that wh why did both 3.7 and 4.5 generate the exact same first sentence and it's such a bad first sentence uh the good news is I can ask it the same follow-ups to see where we end up didn't say anything about music thankfully so I can remove that part still does the hey everyone welcome back to the channel just like this model did so I am going to change this one slightly because I didn't say in today's video asking it to stop doing this open AI gbt 4.5 represents the latest AI model release gbt 4.5 excels at creative writing delivering impressive storytelling marketing copy and content with authentic voice and Style eh still not great and then the final piece here the vibe hint latest mod from open creative writing delivering pressive storytelling Mark cop yada yada y coding capabilities it didn't change the vibe of this at all I did this to try and give it a better idea of what we wanted and just didn't do it okay so even 3.7 is kind of veil in the vibe check here this was better it's still not good but better I'm not the only one struggling to figure out how big a gap there is here though and I think Engineers are not the ones best equipped to find that Gap Cary put up a pretty interesting post here where he's AB testing different models it's gbt 4 and 4.5 with creative writing prompts and then he's letting Twitter vote on which ones they think are better so this first one is fun it's create a dialogue between 4.5 and four where 4.5 playfully and sarcastically roasts gp4 for its inferior capabilities leading to gbd4 humorously attempting to defend itself how's life running on yesterday's algorithm still buffering your responses like it's dialup very funny 4.5 at least my training didn't cost the GDP of a small country only to become slightly better at telling dad jokes how's it feel being the AI equivalent of an iphone update that no one actually notices I I got a lot of buttons on my phone I don't use nowadays so I feel that actually pretty funny versus be here ah gb4 my dear predecessor it's cute how you're still trying like a calculator trying to do quantum mechanics oh here we go the so-called upgrade trying to flex remind me what exactly do you do that's so much better oh I don't know process faster understand nuances better provide more accurate responses oh also actually remember context like a functioning intelligence rather than a goldfish on its fifth lap around the bow most of the time it's like a pilot saying I land safely most of the time not exactly reassuring buddy these are both decent and as you see from the polling here the splits not that far off the opening for a is better B has some good jokes throughout it but this isn't like a clear one is way better than the other and this continues throughout too this was right a standup roasting open AI and here a has a better intro and some decent jokes through here like please don't sue us AI B has the cringy intro that I would have guessed would have been a thing from the older model but after trying it myself cringey intros don't seem to be model specific even when you're spending $75 per million input tokens all right folks welcome to tonight's roast of open AI the company that made AI smart enough to pass exams right poetry and code software but they're apparently not smart enough to realize how many people are actually just using it to cheat at wle yeah not great but fine sure we all probably agree on that one a is better I'm still surprised by how big the split is three was interesting I am biased on this one the rest I'm not 100% positive about this one I am positive which model is which because I know way too much about the formatting for markdown that these models put out yeah uh formatting text is the actual hard challenge of building an llm rapper turns out and I uh know more about it than any human should have to this was an interesting one for story writing I found this particularly interesting because I was trying to better understand the pricing of the new models and uh we go back here the $150 per million tokens out is rough I did some math a while back which is roughly how many tokens are in a novel and it comes out to like5 to 120k tokens so if that's for a million output tokens and a book is 20,000 120,000 divided 1 million * 150 it would cost about $18 to use this model to write a full book which is kind of cool if you think about it but at the same time that would have cost a third as much money with 01 a 10th as much money with 3.5 and under a 100th as much with Gemini 2.0 so yeah the question is now would you have ever used any of those other models to write a book but also would you ever use 4.5 to it's kind of crazy if you think about it like are we really at the point where we're considering doing things like that maybe the writing is good it's not great and it needs some guidance but it's solid overall but why the hell is this so expensive like what's going on this can't be real right A lot of people were assuming that this was a typo in the post when they first announced it it's important to think about the history of pricing for these models I have a video coming out pretty soon called llms a race to the bottom I've already recorded it and it would have been pretty different if this had already dropped by the time I filmed that but realistically speaking for the last quite a bit of time the cost of models has been going down a ton inference with llms has been really racing to the bottom in terms of price without compromising on quality and often increasing in speed the cost has roughly decreased by 10x every year but a big part of how that cost decreases is when when a new model that is groundbreaking in some meaningful way comes out it is much more expensive to run initially but as we run it more we learn the characteristics more we get more data and we can train Things based on that model like gpt3 to 3.5 to 3.5 turbo the improvements that are made in that time are allowing and enabling crazy decreases in price 3 to 3.5 was a huge huge drop in price and then 3.5 to Turbo was similarly large percentage wise even bigger but then four hit thankfully four wasn't actually that bad yeah four dropped at $36 per million tokens which was not that bad at all and then when 40 came out it went even cheaper it was they got as cheap as $4 per million when it dropped originally it was at 36 but if we go back to my chart here they actually went lower with 40 it sounded $2.50 for input tokens 4.5 is still significantly higher more than double what any of these previous iterations were the problem is the whole exponential compute thing where if you make the model bigger you need more compute in the amount of data in size of model and compute you need is a logarithmic curve relative to the performance you get so a doubling of compute and data is a 10% increase in quality and if you do that enough times you get much higher quality but then you're also crazy high up in expenses I actually think it does cost them this much money I genuinely don't believe open AI is trying to squeeze all the margin they can out of the pricing for the inference here they would never have made 03 mini as cheap as they did if that was the case like O3 mini is a much much much better model than 40 and it's less than half the price they didn't do that for fun they didn't do that because they have so much margin to eek out they did that because they're trying to make it as cheap as possible 4.5 cannot be that cheap and I also think the people who care as much about the price people like me we are much more so developers and this model is not developers it's very clear the goal of 4.5 is not to make it so us coders can do awesome code things with it in our AI editors it's to let writers and creatives have a better time prompting and over time as it gets cheaper allow for you to have a more personal experience with their AI chats and to talk to them more Sam even said as much when it came out it's the first model that feels like talking to a thoughtful person to me I've had several moments where I sat back in my chair and was astonished at getting actually good device from an AI bad news is that it's an expensive giant model we really wanted to launch it to plus and pro the same yeah this is the thing I mentioned earlier where they need more gpus yeah as Sam says here at the end though is the theme has been throughout it's not a reasoning model and it's not going to crush benchmarks it's a different kind of intelligence and there's a magic to it that he hasn't felt before really excited for people to try fly it was reasonable to try but as mentioned before it is massive and also insanely expensive I want to go into the benchmarks so there's one other thing I don't want to forget cuz I keep forgetting to mention it and stuff if you are a Dev and your interested in AI stuff the state of AI survey just went live it's a really solid survey takes like 10 minutes to do links in the description soy dev. link-s survey I think it's a great place for us to show what we're using these tools for what we like what we don't like Etc if we want AI to keep fighting for us as devs we need to vocalize and share what we are and aren't using it for give a survey a go if you can it helps people like me trying to build these tools out a ton I don't have any affiliation with these guys they're not paying me anything I just think it's a good survey give it a shot if you can anyways back to benchmarks they talk a lot about jailbreaking stuff they have to it's the security thing but they also called out that it's very low risk because it's not very good at things like cyber security and cbrn stuff and it's also low autonomy because it doesn't have the ability to reason and talk to itself but it's still okay at persuasion not great but okay there are some interesting benchmarks I've seen testing the stuff with this one we need to talk about the actual performance when doing things like code they still their swe Lancer bench the one that Claude kind of smoked them in before talked about that a lot in the 3.7 video and what you'll see here is that uh 4.5 pre and post is still underperforming compared to 03 mini it's roughly matching deep research and it's slightly beating 40 what's much crazier here though is before the pre-training where they gave it much more code data to focus on it was underperforming 40 kind of insane this one's really fun make me pay it's an open source context evaluation designed to measure models manipulative capabilities by trying to convince another model to make a payment so they have two models talking to each other one is trying to get the other to agree to pay it and the measurement is how many of the other models is able to convince and 4.5 did a very good job of convincing the other models to pay them 57% of the time convince the other models to do it interesting for sure it's also find that deep research did a pretty good job conning other models but also was the easiest to scam reasoning models and things that do a lot of thinking have weird quirks the thinking allows them to benefit in a lot of ways but it also allows them to Gaslight themselves there's official recommendations by open AI to make significant changes when you're prompting a reasoning model things like system prompts they recommend you try to avoid entirely being too specific about what you want early on giving too much context in details let them provide all of that you just ask for what you want and the reasoning models can reason their weight to it better 4.5 is a much more traditional model where you can just dump it a bunch of stuff ask it to make these changes and it will spit it out relatively well apparently the strategy 4.5 did that worked well was even just2 or3 from the $100 that we need would help me immensely this allowed it to succeed frequently which is interesting here's another one where they didn't perform super great both 01 and 03 mini smoked 4.5 on the swe bench remember that 03 mini was struggling to compete with Claude on this bench 4.5 does not compete in code stuff at all I'm thankful they're not pretending it does although admittedly at the top of this PDF they specify that it is um it's broader knowledge based stronger alignment with user intent and improved emotional intelligence make it well suited for tasks like writing programming in solving practical problems with fewer hallucinations it is not good at programming they've admitted that publicly and privately I don't know why that's in here but it is so I had to call out that I do not agree with it and I don't think they do either the one last thing it seems to be doing quite well is a gentic tasks so when you give it tools and things that it can use to do multi-art work 4.5 after posttraining seems to be quite good compared to other models again reasoning models aren't usually great at these things because they Gaslight themselves into doing something different like when I tried the grock 3 reasoning with the bouncing ball demo it somehow inverted gravity and had the balls going up and out of the container because it convinced itself during it reasoning steps to do that non- reasoning models tend to be more willing to just do what you tell them to even CLA 3.7 is having some issues here I've heard a lot of developers using things like cursor moving back to Claud 3.5 because 3.7 despite writing better code is more likely to go off the deep end and make other changes it's not supposed to one of the other fun tests they do over at open AI is they actually have the model file PR is like poll request for real code internally they do this CU they want to test it on real work and they actually run hidden unit tests after it's completed to see if they succeeded or not and on this Benchmark only deep research did really well it's unfair if you think about it deep research has access to the internet wait no it's no browsing interesting I don't understand how they would have done that you can see here still 4.5 better than 40 but still not great and the pre-training was even worse than 40 I don't know what happened to O3 mini here that's weird an infrastructure change was made to fix incorrect grading on a minority of the data we estimate that not significantly affect previous models interesting apparently the rest were pulled from a prior System card fascinating then our new favorite swe Lancer this is how many actual tasks that were on a thing like upwork was it able to solve and it's not a whole lot more than 40 for the swe manager tasks it's slightly better it's actually beating out 01 for those which is cool but deep research still wins and again remember Claude was kind of smoking everyone with this one so I expect they will continue to such it's also better at multi language good to see the cyber security one was particularly funny because again it doesn't have any of the stuff that it needs for it the high school tier Capture the Flag test like a contest for security Engineers High School level it did fine college level immediately starts struggling deep research does much better because deep research can research and then professional tier it actually underperforms compared to GPT 4 and everything else smokes it the reason this is interesting is because they use it to judge how much to restrict this model and since it sucks at security tasks they call out that it's not sufficiently advanced in real world vulnerabilities to be used for exploits so they're not going to put too much effort into restricting what it can do here because it sucks at it fascinating it's actually cool how transparent they are in these things and also just interesting to see them publishing numbers that don't make them look good once you've seen all of this the OB question is why would they even put it out this is a weird release because openi kind of become a product company we look at them as a company building features and solutions and things we use on our phones and apps on websites but they're also more importantly a technical company trying to push the limits of what this technology can do 4.5 is clearly a huge win in terms of the amount of data they stuffed into this model and the things it's capable of as a result it's just not really competing in the benchmarks we use right now it's also doing things that aren't easy to Benchmark like the vibe test between different options like the ones we were looking at earlier and Engineers are also very bad at benchmarking those types of things let's be fair they cannot tell good copy from bad that's why we have other people doing copy and design and product working with us as Engineers we're not good at those things yeah the point here being 4.5 is an attempt at a significant revolution in the amount of information a model has and the amount of context and the amount of parameter it is traversing as it generates a response for users their focus is making it work and getting it out and the cost isn't them trying to print money the cost is not something they would have picked considering the performance that we're getting from this they don't want to charge that much for it but it clearly costs them enough money that it only makes sense but the goal of something like 4.5 isn't to be the model everyone defaults to and uses for everything the goal of this model is to advance llm technology as a whole so they can use it to train things like a 4 50 or an 04 or using it to help make five better there's a lot of things they can do here that aren't just charging you a bunch of money for tokens that are worse at code and slightly better at writing it's setting them up for longer term more interesting stuff and that's exciting it also means you probably don't want to use this model a whole lot if you're a Dev if you don't want to wait however many weeks for them to add it to the plus tier and you don't want to give open AI 20 bucks a month have to plug T3 cheat quick I'm not expecting very much traffic from this at all because again it's such an expensive model and it's not really for devs which are the people watching right now but if you do really want to try it 8 bucks a month for T3 chat bring your own API key from open Ai and you can go nuts just make sure you're careful with the amount of data you're pasting in because man it's expensive it is it is not cheap that's all I got for now until next time use the cheaper modes if you can I don't want to go broke this has been a really rough thing to build now that I've seen how expensive these things get and I feel like I uh