Hey there friends. So yesterday I was just a fanboying I guess about Prisma. If you haven't heard of Prisma, it is a Oh what does that? It's ORN, I can't remember what what the word for that is but it interfaces between you and a backend database. So it supports post-grass and SQLite my sequel and a MongoDB support is coming.

So yeah, just so you have a database and you tell it what database what kind of,Database you're hitting and how to connect to it or what the connection URL is. And then it manages connecting to it and you have the rest of your code doesn't have to worry about what type of database it is.

You just work with Prisma. And what makes Prisma especially special is that it has a really great way for defining your schema for the types or the models that your database supports. It has a really nice way of making the database match that so it'll create the tables for you and everything.

It has a great way for my great.Hitting so if you need to change the column name or something then it will automate that process and and that can be part of your deployment pipeline is to alter tables to add columns and stuff like that. It doesn't quite help you with like breaking changes.

It they have some articles to help, you know, how to go about doing that and I have successfully done that with Prisma. But yeah, and and it's it's not like a terribly difficult thing to do necessarily but I mean if it's a really great big breaking change then having zero downtime is tricky.

But yeah, I've had a couple like the situations where I needed to remove an enum value and stuff and I was able to do that without too much trouble. Thanks to a lot to prism as migrate feature, but then the thing that you experience on a regular basis working with Prisma that just I love is its type script support.

So you define this schema and then it generates TypeScript types. So that as you're using Prisma you say Prisma dot and then the,The table that you want to get and info from and then find many and then you have a select and aware and an order by and if there's relations so like a user has many posts or something then you can get all that users posts or if you're looking for posts, you can get the the author and data from that and it's all just so nice with TypeScript.

It's it's brilliant. So if you are using one of those databases and you haven't tried Prisma yet give it a look it is fantastic. I'm really really happy with it. Hope you're having an awesome day andWe'll talk to you later.

https://github.com/johnlindquist/kit/discussions/310 https://www.scriptkit.com/

Hello friends. So this morning, I finished something that I was working on a little bit yesterday. It's a script kit script to call Cloud Nary upload which allows me to very easily upload images to my cloud nary account. It uses the cloud nary API and yeah, I just need a couple of environment variables and and you can use this too.

You get script kit, you can copy the same script. And yeah, you just need a couple environment variables and then it uses the script kit. UI which is basically kind of like,Spotlight or Alfred where you say I want to run the culinary upload and then it asks you which folder you want to upload it to and it gives you this way to navigate around those so you can say on the current folder.

I want one folder one directory yep or I want to go into this directory and so you can kind of navigate the folder structure of cloud nary which is really useful for me because I know that I could just like throw all of my blog post images and all of my epic react article images and all of my other images throughout my site into one giant bucket andReference those URLs and whatever but I don't know about you I just really like to have things organized and directory makes the most sense.

And so, you can navigate around the directory as you would expect. You can create a new directory and I also cash the other folders that are within a directory so I don't have to hit the API every time you go you're as your navigating around. And so I give you an option to refresh the cash for a particular directory.

And and yeah, and so once you've selected your directory, then it gives you a drag and drop little UI where you can drop as many images.As you like and then it goes through each one of those images and asks you what you want the name of the image to be it gives the default for whatever the file name is And then yeah and then it'll upload it.

And when you're all done, it will open up your browser to show you to the directory that you chose so that you can see all the images. It also copies the URL for each image that you uploaded and so if you have if you're just uploading one then that's the one that's in your code board.

If you upload multiples and they're gonna overwrite each other, which is why I think it's really good idea to have a clipboard history with Alfred is is how I do that. And so yeah, I just updated.My 2010 decade and review posts in their like 20 images in that post and I uploaded those all of those and updated the blog post in like just five minutes.

It was really nice. So eventually, I'm gonna automate the whole process of putting all of my images on cautionary for all my blog posts, but this was a really good first take it what it's gonna be like for writing new blog posts and uploading new images. So anyway, this is another example of where script kit is awesome.

I'll put a link to the script in the description and I hope that's interesting and helpful. Have a nice day.

Hello friends, so I wanted to talk today about whether or not you should make a custom hook for everything. So a few days ago, maybe last week there was this thing going around where people were recommending that you never ever use the react built-in hooks inside of a component, you always extract it to a custom hook.

This is terrible advice. Don't do that at all. So the way that I think about hooks in React is the they're basically functions that have the,Only special distinction of being functions that actually call other hooks. That's the only thing special about them. So everything else about this function is the same as regular functions.

And you don't make a function for every line of code that you write right? Like that would be ridiculous. The reason that we make functions is to encapsulate certain logic. And most of the time it's useful mostly for reuse. Sometimes it could be nice to take a bunch of chunks of code.

And logically put it together so that it can be separate from the rest of our our code, but you've got to keep in mind that every single time you abstract something into another function you're adding complexity. And now you have to pass parameters and and maybe you didn't pass enough and so now you need to update those in the except the additional parameters and and and then if you're doing TypeScript, you have to make sure that you're typing for those parameters is correct and and potentially worry about the return value and then oh what if now weDecide that there's some logic in this function that says never mind let's return early or let's throw an error or something like that.

Now, you have to start worrying about the consumer and say, oh well, they wanted to return early from here. So, I'll return early. It just gets to be more complex. There are more things to think about. So you can't avoid adding complexity when you start abstracting things into functions.

It's just the way that it is it always adds complexity. Now whether or not it makes your code simple or more simple.Is a different matter or sorry let me say that differently whether or not it makes it easier for you as the the writer of the coder and the maintainer of the code to understand what's going on.

That's a different matter. But the fact is that it will always increase complexity to extract things into separate functions and that is no different with hooks. This is especially relevant if you wanted to abstract just the use effect part, but you want to pass in some sort of function that's going to get called within that effect.

That means that you'll either need to.Call back that your passing in or you have to use the latest ref pattern to always use the latest function. So anyway, hope that helps.

https://stackoverflow.com/a/46780568/971592

Hello there friends. Sorry, it's been a little bit of a break but I was working on something and I wanted to measure how fast it was but yeah and so I'm gonna use the Chrome DevTools profiling performance tab to profile it. And it's always so frustrating to like try and find the part of the code that you're trying to profile in that flame graph.

It's really kind of a confusing area. And I remembered that there's the performance mark API and so you have the ability to add your own custom timings and so,You can say okay here's the start of what I'm trying to measure and here's the end. And how long did all of that take?

And you can do like performance down now console log in and then like compare and stuff. But I wanted to look at the flame graph. And so I it didn't work right away and I looked up and found a stack overflow post that showed exactly how to do this and so I'll link to that in the notes of this episode.

But basically, it's a combination of the mark and measure APIs on the performance object. So you say performance dot mark and you give it a string to label that mark.And then another performance you do whatever it is you want to do So in my case I wanted to measure the reading time of a blog post and I'm using this module called reading hyphen time, which I think is what like all the gaps people logs and everything used for this.

And so I call that function and I'm on a really big blog post and to test this out. I call that function and then on the next line you say performance.mark and you give it another label and then you say right after that performance dot measure and you give three arguments the first is the label for.

The measurement the second is for the start marker So whatever you put for the first performance dot mark, that's what the second argument here. And then the last argument is whatever you put for the end. So you give it a name and then the start in the end and then that will show up in your dev tools in the performance profiling tab and it just makes it so much easier to make sure that you're honing in on the area of the code that you actually care about.

Unfortunately, I don't know whether this works very well for asynchronous code. So, I cure it's we're gonna do an await here and then afterThat away I don't think that's gonna work very well But for synchronous code it works great And actually if we're talking about async code and there is some performance profiling metrics that you can do with React app specifically and they do have the ability to do some sort of timings for that with asynchrony.

It's actually very cool and I teach you about it on epic react. So if you're if you're not done the performance workshop yet, or the actually the performance section of the bookshelf app, then you may not have run up against that. But it's really cool. All right, hopefully that's helpful.

I'll chat with you later.

Hello there friends. Welcome to June I am thinking about Postgres and Prisma and that sort of thing a lot lately because I'm working on my website and doing that sort of thing and one tip that I have for you if you ever do database sort of things is try to make sorry to make your data as.

As restrictive as possible. Early on as as you're trying to make things. So like make things if you're like, I don't know if there should be a required field or not make it required. If you're this is an enum but we could have this we could have a lot of different values for this potentially have the fewest number of values possible to get you to the next phase.

The reason is because it's a lot easier to later do a migration.That expands the permissive venous of that schema than going the other direction because when you go the other direction, you have to find all of the data rows that don't go into the new schema and update those so that they they fit.

So, for example, if you have a first name field and you decide to make it optional first and then after you have a bunch of users you come in later and you decide no no this first name field needs to.Be required. Well, now you have to first go and update all of the usernames to be like unknown or something before you can do that schema update.

And so yeah, just try to when you're starting a new project or when you're yeah, I guess not even a new project but when you're adding a new model or something like that try to be as restrictive as possible early and then you can loosen things up later when you have more context and you know, what makes more sense.

So yeah, hopefully that's helpful and interesting. IIt's this is just personally affected me because I I was really loose at the start of this project and then I had to tighten things up and it's kind of annoying. So anyway, I hope that's interesting helpful. Ah, but a nice day.

https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render https://kentcdodds.com/blog/colocation https://epicreact.dev/improve-the-performance-of-your-react-forms

Hello there friends. So today somebody shared a lightbri with me and I assumed that it was just a library to help you track rerenders. But it turns out it's like a state management library and that helps you avoid rerenders but my initial reaction and thought about tracking re-renders is the tools like that.

I think lead people to jump directly to the natural and obvious solution, which is often not the best solution and I'm talking about memoization. So when,If you're tracking rerenders and that's how you measure whether something's faster or not you're gonna say, oh well this component didn't need to rerender so therefore.

I will apply the re-render hammer to solve this problem and that is react memo. And then you have to use memo or use callback all the things that you pass to it. And that spiders in into the rest of your code base really easily. And so what I recommend is I have a blog post called fix the slow render before you fix the rerender and so you have to put a little bit more thought into it, but you find out what part of you.

Here rendering is slow because even if you fix the rerender at some point you've got to render like there are necessary renders. And if those are slow then that's not a great user experience either. And so if you can fix that then maybe you'll be able to avoid needing to worry about rerenders.

But sometimes you just there's nothing that's slow in particular. It's just a lot of things that add up to make the experience slower and so fixing renders is kind of the the best approach for that. And when you're in that situation, then I actually wrote.Another blog post called state look colocation can make your react apps faster and just recently wrote a blog post that takes an angle on the like forms and how you can use state collocation with forms and I'll link all of those at the top of this the description this episode.

But basically, I think that we can get a lot by using state co-location also composability and composing our components, especially like layout components, so you don't have to pass.Props through all these other you know app components And as with a combination of the way that you structure things you often don't have to worry about unnecessary renders because they just can't happen.

So anyway, the library itself was a state management tool and and some people get a kick out of that and that's great. That's awesome. I haven't found myself needing to reach for many state management tools outside of react query and went with Remix. I don't really need a state management tool.

It's pretty awesome. But yeah, those are just some of the thoughts that I had when I first saw the name of this librarian. So hope that,Is interesting and helpful have a nice day.

Hello there friends, so I was thinking this morning about utilities and you know these little utility functions that we write and we put it in like a utils modular or something and sometimes when we're running these we want to split things out to make it just.Easier to manage or something and and it's just kind of a natural thing at least for me to want to split things out into individual files, so each utility is in its own file, you know, if it's just a single line or something.

I typically just keep it on one but if it's kind of complicated or maybe there are group of utilities that make a lot of sense together. I just feel naturally inclined to move those into a separate file. But what I've found is in my experience is that you're often better off just leaving utilities all in the same file and thenMaybe using code comments or something to separate different parts of that file because what what I found happens over and over again is one utility depends on another and that utility depends on this other utility which depends on the first one and so you have like a cyclic dependency or cyclical dependency sort of thing and so when you try to start pulling things out into different utility or into different files, now you have to extract the other files.

Or other utilities into separate files as well ultimately leading to basically a lot of files that have just a couple lines of utilities. And I definitely don't see that as being any simpler. And in fact, it can be even more complex when you start adding type script and now you have types that you need to extract it to different files so you can use them together.

So, but there is a reason that we like to keep our files shorter and that's because when when you have a really big utility that can be really complicated. I,Worked on a a backbone view that was like 3,000 lines long once and it was not fun and I did not like having such a big file, but I've been thinking about this and I think that the problem isn't necessarily the size of the file the problem is the size of the the individual component.

And so and just the number of concerns it was mixing. That was what made it really difficult. And so yeah, the the length of the file that doesn't really matter all that much. It's the number of mixed concerns that makes things really difficult. So, I would encourage you to.

Think twice before extracting utility files or your utility functions into individual files and maybe first try to organize that file a little bit to make it easier to manage. I hope that's helpful and interesting have a nice day.

Good morning or afternoon or evening friends, I wanted to talk today about a saying that my wife has I think when my kids grow up they're gonna remember my mom always used to say this and and so what she says is we'll cross that bridge when we come to it now, of course this isn't like an original saying but she just says it a lot and what she's saying is that she doesn't want to make these decisions right now or use up the mental energy to decide whether or not.

She wants to let the kids do a certain thing or whatever and I've taken to saying it myself, um and what I'll often say is if you want me to answer now, I'll just say no so why don't you wait until I'm able to think about this but it was I was thinking about this in the context of programming and that's kind of what doing calculations within an if statement or the right side of a ternary operator something that's kind of what that's like, so sometimes I will have a block.

Of code where I'm doing some calculations and then I have an if statement that says if such and such then use the value of those calculations otherwise do nothing or otherwise do something else and so if you do your calculations first, then you're kind of crossing the bridge before you came to it you're making a calculation for a value for which you may not actually need at all if you don't end up going into the consequent and actually using that value and and so I get instead you put the calculation within the if block or what we call the consequent then.

Then you're crossing the bridge when you come to it you don't actually need to make that calculation until you actually need to get that value now there are I explain this to my wife last night and I thought oh that would be a good thing for three minutes with Kenton and she said well now what are the situations in which you would ever want to do the calculation before, you know, you actually need it and I said well, sometimes it can be useful just for the way the code is structured you do all the calculations up here, sometimes it's easy to calculate one thing while you're calculating another thing even ifYou may not need both of those things and so there are reasons where you might want to cross the bridge before you come to it, but I I think in those situations you want to make sure that you're not ending up with a performance problem of some kind so mentoring can help out a lot so at the end of the day it comes down to readability and what's the most readable and then the exception is for those times where it's a performance problem then then you do things anyway just thought it was kind of interesting analogy or metaphor.

Hope you're having a nice day, we'll talk to you later.

Hello there friends So this morning I was just thinking about this little tip that I share with you. It's pretty quick. In my global git ignore, which is located in my home directory dot get ignore underscore global. I have a couple of things in here that I wanted to shout out and specifically this morning.

I was thinking about my ignored global good ignore. So I am I have a two rules that will ignore any files that or any directories that end in dot ignored in any files that include dot ignored dot in the file name and so what this allows me to do is very easy.

Within the context of my project create a temporary file like temp dot ignored.js where I can script up a little things. I can require dependencies and require files in my application and whatever all within the context of the app and I can mess around kind of like a playground sort of thing to work on something until I have it solid and then I can take that code over to where it actually is.

This can be really helpful when the feature that I'm working on is difficult to like navigate to or whatever the case may be. And so yeah,Or like it takes a series of steps even if it's not a UI thing if it takes a series of steps to get it to this particular state.

Having a little file that I can use as a playground that doesn't have anything to do with get or whatever is really helpful. So yeah, the way that I do that is a star dot ignored slash and so that's for directories that end in dot ignored and star dot ignored dot star which will ignore any of the files that I included dot ignored.

A couple other things that I have in here that sometimes people don't have. So this isGoogle ignore this applies to all of the get projects in my on my computer a dot ds underscore store and so when you open up a directory in in the Finder app on a Mac and creates this really annoying file and I still get pull requests from people all the time that included dot ds store and so I think I actually add that to my get ignore for each project as well when it's like an open source thing just to not deal with that.

Also dot VS code. I know sometimes you can set like,Little local settings in there and so sometimes I'll force add those but by default. I don't want that in there dot idea for web storm and then you've got some like NPM and yarn debug stuff some VIM stuff in here with a star dots SWP and yeah anyway just kind of some helpful tips.

I think the biggest one is the diagnord. I also have dot local sometimes. I'll put that in projects for like here's the dot EMV dot local, so it's just the stuff that's local on my machine. I don't want to commit that. Hope that.Helps. Have a wonderful day.

Hello friends so I mostly recording this one so that I can hopefully not forget it because I was working with doctor yesterday and I don't work with Docker a lot but I'm kind of thinking about in the next version of Epic React. I want to take the application that we build and make it even more real world.

We're going to jump off of Create. React app and use Remix. Don't worry, they're probably going to have some sort of free tier or a trial version or something. So, I'm not going to force people to have a license to remix to take epic react. But I do want to teach you the the best way to build React applications andI think that that's remix and so it'd be a responsible for me to do it any other way.

So anyway, we're going to be probably using remix and we're probably going to use a real database and this presents a lot of challenges because I'm here to teach you how to build React applications and I need to limit the scope otherwise it the course will be just enormous.

And so I don't want to teach you how to set up a database and the easiest way to do that is to have you use Docker but then doctors and entirely different subject as well, that is also not easy. If you've never used it before I I'm struggling with it myself.

But anyway in the process of I'm gonna try and like give you a bunch of scripts that you just run these scripts and and everything will work and that's the hope provided that you get docker installed properly. So we'll see hopefully that works out nicely. But my the thing that I learned yesterday or kind of today is that there I set up a postgres database inside a Docker container and I have a Docker composed file and I was following a tutorial and one of the things that had in there was.

I guess I probably should have had this pulled up and ready for you it's Docker compose.Yeah, and it had oh I actually lost it had some like volume thing in here. And the and setting up the particular volume is basically where Docker is going to persist all of the data that is in the Postgres database so that when you close down the Docker container you can open it back up and all the data is still there.

And I had a lot of trouble because I would try and delete the image delete the container and create it all brand new but it would reuse the same volume and so,I wasn't able to just delete all the tables and whatnot. So finally, I figured out how to do that and and it was from help from people on the YouTube comments of the Line Street I needed yesterday and it's a simple as using Docker volume LS to list out all of the volumes that you have and then Docker volume RM and then providing the the name of the volume you want to remove and that deletes all the data.

And you can also do ducker volume prune and that will remove them all. So, that's what I learned.

Hello there friends, so I've just been thinking about incentives and companies and and the yeah, like what what motivates people to have different opinions and stuff like that. And I want to use myself as an example here because I think it's a there's a lot of nuance with the way that we kind of automatically think that people are have ulterior motives.

So, I created epic react to teach people how to learn react. And so my question is did did I create epic react?And then say hey everybody it's React is amazing and like is my ulterior motive in telling people that react as awesome and they should use it so that I can sell courses or did I discover react and I got really excited about it and I and I just think that it's a fantastic way to build it web applications and so as a result of this I create epic reacts as well as all of my other material and stuff.

To convince people to use it just because I think that it's a really great framework. And then I finance my my free work by selling.Epic React I can tell you that it's the latter but how do you know. You can't really trust my word for it because my I could have an ulterior motive.

And I think this is the sort of thing that's really new on. So just to give you another example, let's say that there's somebody who's really bullish on a particular stock. They maybe it's Apple or something. And so, they they create a YouTube channel that just goes all on on and on and on about how great Apple is.

Now our did they create like what order did this happen in did they create the channel and then they say,Wow this is a great way for me to get people to buy the stock. I'm gonna pump the stock up and then I'll my purchase of the stock will be worth a lot.

Or is it a kind of more of a combination where they are really bullish about Apple so they buy a lot of stock and they're like man. I just this is such an awesome company. I'm also going to start this YouTube channel to talk about why I think it's such a you know, a great investment or whatever.

So anytime you see somebody who seems to have a conflict of interest.It's a very very possible that that conflict of interest is the entire reason that their motivated to behave in the way that they're behaving or speak and say the things that they're saying. It's entirely possible that there's that bias and that's controlling everything.

But keep in mind like kind of walk history back a little bit and and think okay, maybe they really have this solid conviction and that's what made it motivated them to go and buy the stock or what motivated them to create this thing and pump it up because they already had that conviction and they don't maybe have an ulterior motive.

Hey there friends. Have you heard of progressive enhancement or progressive web apps? Well, I thought of a real world thing that kind of resembles what this actually means and what it doesn't. So, you know how like there's all these memes of like I got a smart thermostat and now it's broken because my internet went down or something like that and so now I'm like steaming hot like why did I do this and and we have the same sort of thing with my watch and so I have a smartwatch.

It's a,Nice one. It's a fossil I guess. And then I also have an aura ring and both of them are useful in their own different ways. But when my watch breaks or if it runs out of battery, which is more often, it doesn't break very like ever. But when it runs out of battery, I'm no longer able to even tell the time.

So, it's like totally a break. It's useless as just like a break on my wrist. That is not great. But when my ring runs out of battery,That's also not great but it's still functions as a ring. And so in this context progressive enhancement would be like my ring will always function as a ring but it progressively enhances in that when it has battery it also functions as a way of taking my my pulse and different things like that.

Whereas with the watch if it doesn't have power, it doesn't do anything. It's it's not serving its purpose at all unless I suppose if you just like appearing like you have a watch but it's basically.Other than that. And so when we're talking about progressive enhancement or progressive web apps, we're talking about taking advantage of the tools and capabilities of the web and all the modern and cool stuff but not exclusively not at the exclude exclusion of functionality for browsers that don't support those modern features.

And so we progressively become a even more capable web app when those features are available. And so in my contacts with the,Watch in the ring that the extra feature that's available is power. And with the watch it doesn't progressively enhance, it just doesn't work at all without that extra feature of power.

Whereas with my ring it functions as a ring just fine whether or not it has power and then if it does then improgressively enhances to do a lot of other cool things. But anyway, that's kind of what I think about progressive enhancement progressive web apps. It's kind of an interesting thought.

And yeah, shout out to remix particular for taking this.So seriously. I hope that's helpful to you have a wonderful day.

https://kcd.im/trophy

https://kentcdodds.com/blog/eliminate-an-entire-category-of-bugs-with-a-few-simple-tools

TypeScript is tests. Tests are type script. So type script is just a way to give yourself more confidence. Sure, it helps you in your workflow, it makes you a faster as you're developing because you have autocomplete and stuff like that. And testing does the same thing as well as you refactoring, you know that you didn't break anything you get a much faster feedback when you you're running your tests as you're working on things.

And both of these also make the initial code take longer. So it takes more time to think.About the types that you're writing takes more time to actually write the tests. And they can also be an enormous time sink where you spend a ton of time working on a task or a ton of time working on the on the types and then you've later realized that you don't need that code at all so you just throw all that work away.

So, I I find that typescript and testing are way more related than they are or similar than they are different. And I think this is a good thing though, the whole goal is to be more confident in the changes that were.Making in the application that were shipping. And the cool thing about TypeScript is that it eliminates an entire category of bugs.

I actually have a blog post about that. And it also eliminates an entire category of tests, which you're probably not writing but maybe you should. So one of the things about code coverage is that it doesn't what we really actually need is data coverage or use case coverage because you may have a function called ad that accepts two numbers and add.

S them together and you could write a couple of tests for that if you wanted to but you're probably not writing like it's not very normal for people to write a test that says what happens if I pass a string what happens if I pass a boolean but you know, what a you might have a test that says what happens if I don't pass the arguments or something and because there are some defaults.

But and that and because there are defaults you're going to want to cover that. But we've very often don't do a whole lot of defensive programming and runtime and type assertions of.You know, what the arguments that were passed? Maybe you do that for some of your functions, but probably not all.

And so you can you don't get a much confidence in in that aspect. And you you could but it's just way easier to just use a type to language like TypeScript and then that entire category of bugs in the entire category of tests don't need to be written. So type script is tests.

Good morning or afternoon or whatever it is for you friends, it's morning for me. I wanted to talk about how I type a raise in TypeScript, so there are two ways that I'm aware of that you can type an array and of course I guess there are a couple ways depending on what type of an array you want to make but just like a regular array you can either specify the type and then immediately thereafter with no space a open and closing bracket like the the syntax for an array and the alternative is there is a built-in.

Array type which is a generic and you say array and then open bracket no that what are these angle brackets that's what is called an open angle bracket and then the type of that's in the array and then a closing angle bracket and I prefer the latter. I like using the generic array and the reason that I prefer that I I think that I just like just kind of preferred to that from the beginning, but I think the reason that I prefer using the generic array is because I don't,Like reading my type and then getting to the end and be like, oh this is an array of those things so I I see we've got um user and then I see the opening closing bracket and I say oh no, actually it's not a user it's an array of users, whereas if I use the generic I can see oh we've got an array and the things that are in the array are users and so I'm when I'm reading from left to right it just seems to make more sense to me to to read it in that way, it's kind of like in English it.

I I like how in Spanish and you have the,If you have like an exclamation you're going to have that upset upside down exclamation point I don't know what that's called but you have that upside down exclamation point at the beginning of the sentence so you know ahead of time that the thing you're about to read is an exclamation rather than getting to the end of the sentence and being oh yeah, I'm supposed to be like excited about in saying this or something like that when I'm reading a book my kid or something and so I kind of see that in the same way and that's why I prefer using the generic over the the special syntax for specifying arrays, it is a little bit more type.

Of being or more characters but I actually don't care too much about that and then that comes with the benefit of switching from a regular array to a read-only array, you know being a bit easier and stuff like that so anyway. I just thought that would be something I'd share today.

I hope you're having a wonderful day and I'll chat with you soon.

https://twitter.com/kentcdodds/status/1394420201542668289?s=20

So the other day I tweeted about how I really want people to stop minifying and bundling what they send to NPM. And just to clarify I it's fine if you want to minify and bundle as one of the things you distribute as part of your package, but it shouldn't be the only thing and there are a couple of reasons and what I do for my packages is I actually do have a UMD module that is bundled and I have a minified version of that as well.

So we have two of those and then I've got an ESM.R version which is like fake ESM right now eventually I'll get around to making a native VSM supported version. And then a common JS and those are the the four formats that I shipped to NPM. So the reason that I really really don't want people to exclusively ship minified code is even with source maps can it can be really difficult to debug and especially when we're talking about libraries that I'm interacting with well even even transitive dependencies.

I like to be able to.Stick a console log in there or to step through with a debugger and it's just really difficult to do that if you've minified your code and in particular what motivated me to tweet this in the first place was I was working with a library that minified everything and it ended up minifying its implementation of an abort signal and so the constructor name was incorrect and node fetch actually checks the constructor name to know if what you've passed is an abort signal which we could argue about whether that's necessary or not, but the fact is that it does and becauseThey were minifying it totally is unusable which is a less super annoying.

So that's notification then on the bundling side of things this can get to be a real problem like if for example your bundling a particular library and I'm already using that library in my project MPM can't dedupe that and do means it says, oh you're using this library in this other dependency uses that library too.

So we'll just have them both use the same files and therefore we don't have to send.That code to the browser twice so we don't have to require that code and evaluate it in person all that stuff. And so there are arguments that people make about bundling as like performance improvement so like you could do that with some tools and and that could be useful but it could also be a big problem because then I can't like change the versions of the things that I'm using and I don't have any control over that.

So there are a lot of issues there in general. So, please don't bundle don't minify it's better this way. Let meDo that.

Hey friends, so I'm working on this little remix app and just something about remix that I just this so cool the fact that your server and client side code run is written in the same file if in case you didn't know that that's that's what you do and it's really cool for validation so you can start by validating just a hundred percent on the server and remix makes it quite nice to be able to do that and that's where your validation should absolutely.

100% go by default that's like if you're gonna do it anywhere do it right there, but having client side validation can be nice for you know, showing error messages and stuff and so because the client side and silver side code is written in the same file, you don't want to like duplicate that that logic and so you just extract it to a function and then in the server you call that function and the client you call that function and when remix shakes out all of the stuff that function will appear in both places, but you don't have to write it twice and so.

I'm just writing out a form right now and I had a a maximum length for a particular field and so I can just put that variable outside of everything and make sure that I only have one specific place where I say what the max length of this is gonna be and then I just use it in the client and in the server all in that same one file.

I don't need to like put in a different module and import it or anything it's all just right there and I just think that's awesome that I I'd share that with you remix is just my friends it is something else. IFeel super productive working with this and yeah I the cool thing is that it's I feel like it's both pretty quick to get at for it to become familiar so it doesn't take the long for it to become easy relative to other stuff that I've worked with but it also seems so simple and so therefore I can build simple applications with it and and and and I I mean, I haven't written an application in a million lines of code with remix and,You think but I feel like this would scale well to that based on the experience I have in writing and working on enormous applications, so yeah anyway remakes it's it's awesome and I know that I gush over it but there's a reason it's not it's certainly not because Ryan and Michael are paying me in fact I paid them to be able to use it so there's there's no conflict of interest there, they're my friends, so they're there's a full disclosure but this thing is out of this world, so if you haven't taken a lucky remix yet and give a good look at it.

See ya.

https://kentcdodds.com/blog/make-your-test-fail

Hello there friends. I'm just driving now. I was thinking about a blog post that I wrote a while ago. I think it was called break your tests or something like that, but the idea is that it's just really easy to write a test that passes and so you feel really good about it this this especially happens if you're testing after you've already implemented something if you're doing TDD this is maybe less of a problem, but it's really easy to write a test that's green and we're happy with it and,So we commit it and we move on and then we later find out that that test wasn't running to completion or it was the it wasn't testing what we thought it was testing wasn't making the right assertions or something and so it wasn't actually doing what we thought it was and so then the thing that we were intending to test ends up breaking in that test doesn't doesn't save us from that and so what I suggest that you do is you take the time to actually try and make the thing that you're testing break, so you simulate a failure this could be.

I'm pretty much like any any step of the process of what it is that you're testing maybe you're making a request to get some data and then you're displaying that data in your asserting that the data is displayed properly and so you could just comment out the code that updates the state or something like that and so it's normally very easy and it's a manual check.

I don't think that there would be a whole lot of use in like at this point you're testing the tests and I don't see a whole lot of benefit and like how far do you go, do you test the test the test the test?It's just sorry cracking myself up um yeah so like at some point you have to say okay, we're good with just doing a manual verification of this and so that's that's what this is is just a manual verification that yes this is indeed testing what I think it is and I verified that by commenting out the implementation or changing the implementation and in a certain way to make sure that the test will catch me if I mistakenly change the implementation in this way, so yeah, as you're writing your test for your software, I suggest that you break the test and I will.

Add a link to the blog post where I dive into this little in a little bit more detail at the top of the notes for this episode so you can go take a look at that. I hope you have a wonderful day and we will chat with you later bye.

Friends I'm out and about today so we might hear some like music in the background and stuff but yeah today I wanted to talk about cypress driven development. I was working on something that I'm working on for the new website where you can submit a recording of a question and then I'll be able to answer it's gonna be really cool but it's all like in browser recording stuff and lots of what I was testing was like required me to have to record something and then to continue on through the the work.

Or the flow and that was super annoying to have to you know, make a change and then go through that whole flow again and so I was like, well, this is the perfect situation for cypress different driven development so I made like a I don't know ten lines cypress function or or test that went through that I did have to do a couple fancy things to make it so that cypress would accept a fake wave file as input which I made a maniacal laugh and I found online but uh, yeah, once I had that I'll set up it was really.

Cool every time I made a change to anything I would just have cypress rerun it would rerun automatically and and then I could look at the terminal output or the console output and get a good idea of what what was going on so yeah I was really it was like nail on the head for cypress driven development.

I don't think that it's always necessary but especially when you're working on workflows and stuff and like this is the sort of thing that hot module replacement like yeah, maybe that work okay, but just is not going to do it for you.For this sort of thing like I never really trusted how much of a replacement and so the and this is the one situation where people say, oh yeah how much replacements really nice if you're like what you're working on is pretty far into some workflow or something that you don't want to have to do over and over again, well, sometimes you do need to refresh for one reason or another and having cypress just get me back into that state and like a half a second yeah that's awesome and it's like a real actual experience so if you've not tried cypress driven development.

I suggest that you give it.A shot because it's really helped me be really productive and at the end of it. I'm I may actually be able to use this as a test as an actual test to keep me confident so there's that I hope that's interesting and helpful and useful to you and hope you have a spectacular day you take care and all talk to you later.

Hello friends So today a friend of mine on the KCD Discord is named Rupert. I'm not sure. I'm pretty sure that's how you say their name. But I created their very first poll request for open source. I wasn't aware it's the first poll request but they did a great job.

And it was for the KCD Discord bond. And so the discord has a lot of cool things you can do with it and one of them is they're a bunch of commands that you can give. One of those commands is the thanks command where you can give somebody extra kudos to say thank you and we'll record.

The that in a thanks channel so you can look at and see all the people who've received gratitude and who've given gratitude and then it will log that in a github gist. That's our storage mechanism for this bot. And and actually, I think this is the only thing that requires storage that we have but um, it's ends up being just this giant JSON object.

And so we've had this for a while Marco built it initially and it was cool because you could say thanks ranked top and it would give you the top.10 people who'd received the most thanks. But I wanted to also have a rank for the people who give the most gratitude as well because I think it's a nice to to have that.

So he Rupert made the a change to also allow you to say thanks gratitude ranked top and that would give you the the top 10 most grateful people in the server. And it was just kind of a way to recognize people who are making our community special and and grateful thankful.

And,Yeah, so I just kind of wanted to talk about that just a little bit and say, hey, you know gratitude is important and it's helpful and in fostering a community that I want to be a part of and hopefully you do as well. And by giving a just the little bit more recognition for people who are grateful, but also the people who are being thanked, so the people who are doing helpful things.

I think goes a long way to making people more encouraged to continue to do helpful and,And good things and and also to be more grateful. So and gratitude has been scientifically proven to improve people's overall happiness. So if you're a grateful person, you're happier. So go be grateful today, and if you're a member of the KCD discord, then go say thanks to somebody using the Thanks command.

And if you're not then joined because it's a cool place to hang out. All right. I hope you have an awesome day and we'll talk to you later.

So let's say that you want to convince your coworkers to try a new tech or something like a new library or whatever and you think it's a really good idea but people aren't convinced. So what typically happens is you want to prepare a couple of ideas and stuff and bring it to a meeting and say, okay, here's here's what I think and why I think this is a good idea.

And then people will present their reasons why they they don't think it's a good idea. And people may come to the meeting kind of predisposed to disagree and and want to just say,No this is just extra work that you're making me do and and so as soon as somebody gives a reasonable good argument against you against your idea for everybody else that just is like the thing that they can latch on to and if you're not prepared to deal with that then then you just lose everything.

So this is what I do and what I've done to convince members of my team that my idea is a good one. And that is first you have to like that obviously you have to really believe that it is a good idea and you wouldn't want to present something that's not necessarily a good idea.

But then,What I have done is I will reach out to everybody who's going to be coming into the meeting all the decision makers, but also just the people who are going to show up so even people that may not be making the decision they just might voice a concern of some kind.

And I will just ask them what are their preconceived issues that they have with this idea? And I'm just talk a little bit about it not. We're not here to have an argument or anything about the merits of the idea. We're just here to gather their hang-ups with it.

And do that with everybody who's coming to the meeting so that you can prepare and bring up their arguments before they have a chance to bring them up and and you bring it up in such a way that you can immediately address it and say now some of you were worried about this, let me explain why that's not a problem.

Or you may not even need to bring that up. You can just solve that problem before they before mentioning the problem in the first place. As part of your presentation, this will go miles to help you convince people that your idea is a good one and help alleviate concerns and they're concerned.

The real and you need to address them But if you want to have success and convincing people you want to avoid the mob mentality where one person shares something that's like now this is not going to work for this reason and everybody just latches on and they won't listen to your explanation.

And maybe you'll get caught off guard too in that situation. And so by asking ahead of time you are made aware of things that you may not have considered and you make sure you address those and it's also possible that you can cancel a meeting because you realize that oh actually this isn't a good idea because of these concerns.

So anyway, this is something that's helped me in the past. I hope it helps you and I hope you.

https://staltz.com/your-ide-as-a-presentation-tool.html

Hello friends you may have noticed that sometimes I use my editor as my slides in lots of the talks that I've given over the last few years and that was originally inspired by André Staultz who has the a blog post on his website called your IDE as a presentation tool where he kind of explains why he has done that and it's a good blog post you can take a look at that and even gives tips on how to do this effectively and stuff.

But I would just thought I'd mention why I like doing this. I actually am working on some slides right now for.A talk that I'm giving and I I've gone through so many different ways of making slides like I started with you know, Google Drive and or PowerPoint and and went on to I actually used Prezi for a while which was fun and and slides.com is probably where most of my slides are and I really like that one quite a bit.

I've made things simple. I used MDX deck tried to code my slides. And finally, I've kind of landed at using my editor for my,Slides because I think that just makes the most sense or it's just the the easiest for the types of presentations that I make which involve me moving my cursor around the screen highlighting text and maybe even adding text especially if I have some code samples or stuff or I want to like demo something.

It's all just right there in my editor I can type and add things and it just makes things a lot a lot easier and I would be lying if I didn't add or if I didn't say that there's a piece of me that kind of likes this approach because it's just,Way easier to make these kinds of slides.

And I sometimes see people who make just the most beautiful slides slide decks, and and everything is custom often like related to the conference specifically and and I am really impressed by that stuff and I think it's awesome and if that's something that you want to get into that's super great and I'm yeah, I'm impressed by that.

That making things look good is a real struggle point for me and thinking about like animations and stuff like that too.When I did MDX stack I struggled a lot with making things responsive so that it would look good regardless of the size of my screen and stuff and it was just such a pain.

So using my editor just gives me a lot of benefits and then I don't have to worry about all the extra things that I struggle with. I use markdown for pretty much every slide and then sometimes I'll have a gif in there as technically a slide. And you can take a look at this blog post that I'll add a link to to get a better idea of how I do this.

Anyway, I just thought I'd share that.Maybe give it a try. See ya.

https://epicreact.dev/the-latest-ref-pattern-in-react

Hey your friends. So I get this question of fair amount and so I thought I'd try to answer it and podcast form and the question is why don't why is it not a good idea to set a ref during your render function? So there are exceptions to this and understanding the reasoning will help you understand what those exceptions are.

But basically, if you read my blog post on the Epic React dot dev slash articles, there's a blog post about the latest ref pattern and in that I put a use layout effect and,There with ref dot current equals some callback or whatever And a lot of people ask me why do you need to put that in a use effect?

Why can't you just put that? You know you're calling it every render anyway so you may as well just put it directly in the render function. So the reason that you don't want to do this is it actually is mostly just for future proofing. So right now that will technically work and it and it there shouldn't be any problem with it, but when eventually if the reacting does finally release concurrent mode as an official feature of React,Then you could wind up in a problem and that problem would be very difficult to reproduce and very difficult to debug.

So in general, this is why the react team is just been so adamant about your render methods being item potent, which basically means that it can be called as many times as it reacts once to and the same thing will occur regardless of how many times this function is called.

That's like an oversimplification of what that means but anyway, so imagine a scenario with a concurrent mode where reacted.The rendering your reactor and then a high priority event happens as it's going through rendering and so it says okay never mind, let's stop rendering will deal with this high priority event and then we'll come back and we'll re-render stuff and so if you set it during the render function, you may actually be setting it to a value that is never actually used and so potentially if you end up using that you're using a value that was created for a render that was never actually committed to the DOM.

It's hard to describe the bugs that you.Could have there but hopefully you understand why that could be a problem. And and so it because there's no real issue with putting something inside of a user factor used layout effect and that's really the only time where you can run code and be certain that the render was actually committed to the DOM then you may as well just put it there and make sure that you keep your render functions side effect free.

So, hopefully that kind of made sense is interesting and useful. I hope you have a fabulous day andTake care.

Hey friends I had an interesting thought this morning. So a lot of people when they start using a new technology like when next was released or when you know a new version of Reactor or or any React library or whatever they often will say, okay, how do you I use this with an existing technology that I already enjoy like, so how do I use next with glamorous?

That was an early thing. I remember or how do I use? Next with Jest or you know, whatever whatever it is. I would encourage you to when you're using anNew technology to avoid bringing in your previous and older or like the the previous technologies that you were using in conjunction with this new thing too early.

So what I mean by that is often we get really that we're using an existing thing and say we're using create react app. And we really like emotion for our styling. And so then we decide okay, I'm gonna switch over to a remix from Create. React app and I'm gonna say okay now I really like emotion for my styling so I'm gonna come in to.

That and try and figure out how to use emotion with Remix And I would discourage you from doing something like that right from the get-go. And the reason is that part of why we love our tools so much is because they solve problems and and that's that's great and they solve them in a way that we really enjoy.

But if you bring all of your old tools to the new technology or to the new framework or to the new other thing, you might find that things don't work together quite right and that could give you a bad sense of what is possible or whatever like a it might.

Put a bad taste in your mouth for that new technology When in actuality it turns out that you don't need or let me rephrase that you don't have the same problems that made you fall in love with this original tool. So remix is a great example of this because it just eliminates so many problems and so if you try to bring in solutions to problems that don't exist then yeah, you're probably going to have a hard time.

You're going to be like, well, what is what is remakes all about? I'm not actually this wasn't triggered by anything specific. I haven't seen anybody say wow. I don't like remakes because it's hard to use this tool. It was just a thought that I had this morning.And yeah probably would be a bit of a pain to to use some tools with remix but just make sure that those tools are still awesome when you have a framework that may eliminate that problem altogether.

So when you're learning something new, this is why I do my super simple start blog posts just to give you an idea of what this thing has to offer all by itself and in particular with remix actually just regular CSS files, you'll be blown away how good it works with just that.

Anyway, I hope that's interesting and applies to more than just Remix have a wonderful week.And a wonderful day. Whatever you listen to this have a wonderful one.

https://www.scriptkit.com/

https://kentcdodds.com/blog/automation

Hey friends So you know how sometimes you do things so many times that you're like you know what I'm just gonna write a script for this and we'll run it and whatever and so I don't have to do this over and over again. And like some of those things can be pretty extensive, like there's a lot of stuff that you end up doing like you gotta open up this webpage and then you gotta click on that and then you gotta go do this, whatever.

And some of those things can be like really simple. So I just need to open this file add a line to this and save it and then close my editor or whatever. And you can speed all of those things up using like little CLI to.Pull that you make or something and the the value of this isn't necessarily in the amount of time that it saves you but in the amount of context switching it saves you from.

So so you don't have to pull up your whole editor, you don't need to pull up this tab or whatever it is. I actually have a blog post about like why saving time isn't the only reason to automate things which is kind of a good blog post. You can go check it out.

But what I wanted to tell you about today was there's a much better way to automate stuff. Especially if you're a Mac user Windows support for this is coming.Eventually but what I wanted to tell you about is this tool called script kit by John Linquist. So if you haven't heard of script kit, it's sort of like a spotlight or Alfred or or what what's the thing on Windows that you like you just hit the Windows key and then you can type something.

But yeah, it's just this little key combination that you can execute anywhere and then you type something and you can execute some little script that you have. So script kit it's it's really really cool and once you start creating these little auto.Mations and there are a lot of cool things you can do.

And it has some really awesome APIs for accepting arguments and and for prompting you for additional information, you can drag and drop files all sorts of really cool things that I just strongly urge you to take a look at and see how it can improve your life. So one thing that I do is I have a script that will automatically update dependencies for all of the epic reacts workshops, and so yeah.

I just run this script. It opens up. What is it seven?To terminals for the seven repos that epic or maybe eight repost synaptic react has and and it updates all of the dependencies and and then pushes that up automatically for me. And so that I can keep things fresh and quick and it doesn't take any time.

I've got another one that allows me to quickly open up any project that I have in VS Code and it's just it's much quicker than opening up a terminal and doing it like executing a script. So take a look at script kit, it's super cool. Have a nice.Day.

https://youtube.com/c/RyanFlorence

Hey friends So I was watching a live stream from Ryan Florence last night while I was putting my kids to bed They were falling asleep and I was in the room to make sure that they didn't go all whacko and stuff while they're trying to fall asleep. And so I was just watching Ryan codeps some stuff.

You should check it out. Actually Ryan has gotten some really good live streams recently, especially if you're interested in remix and stuff. And and actually sometimes I'll just watch it during the day. I'll just have it on in a different tab while I'm working and if I hear something that sounds interesting I can go over there.

So, it's kind of fun and interesting.And and yeah it's kind of fun to be on this side of the live streaming stuff at home but anyway one thing that I noticed that Ryan doesn't and I've seen him do this any time that I've seen him code not just in this livestream.

So he's been doing this for a while as far as I know. But he has this document open in his editor that's just like marked down format stuff. That outlines exactly what he plans on doing for that coding session, or at least he kind of keeps notes of the things that he's still needs to do.

That's not exactly pseudo code, but like, you know, create a user then save that users.Session in the database and then, you know, whatever else. And it I I I like this approach for me. I typically just have in my mind this idea of what I want to do and then I just go scramble around and and do the activities until those things are all finished but it's not as directed and I feel like I could definitely improve in this way and and get a little bit better at making sure that I'm accomplishing some specific tasks and and it also at the end of the day, you feel like you got a lot more done.

I do have a notepad that I,Where I write down all the things that I'm gonna do for the day but normally that includes stuff outside of coding and then I've got like work on this work on the website or whatever. And it would be cool to get a little more granular especially when you're working on new features and and stuff like that.

So I just thought that would be an interesting tip to share so next time you start working on a particular feature go ahead and just open up a text file and write out kind of outline the different tasks that you need to get accomplished and every couple minutes or so review that.

And see what you've finished and and what you need to work on next kind of help direct your your thought process and and implementation so that you get things done. And of course, you can always do it like test-driven development style if you want to but some of these things would be a little hard to test drive.

So in those situations having a list can be really helpful. Anyway, I'm gonna give this a shot some time and hope you do too and I hope it's helpful to you. Have a good day.

https://twitter.com/kentcdodds/status/1388561641382420480?s=20

Hey friends So a few days ago I tweeted something about like don't solve problems you should eliminate to problems before you try to solve the problem. Something like that. And I've been thinking about this quite a bit recently and probably going to write a blog post maybe even make a talk and for this concept.

But I just wanted to share with you all while I'm thinking about it and and there there are lots of examples of where eliminating a problem was much better than trying to find a solution to the problem. And you can find these as.Sorts of examples in real life as well as in programming.

So like an example in real life and actually I was watching a video about this this is what kind of made me start thinking about this was Tesla how they eliminated a ton of problems with gas-powered vehicles by making an electric vehicle. And so we no longer have I mean and we kind of create new categories of problems that we need to solve but by taking a completely different approach you can eliminate the existing problems.

And so, hopefully the new category of problems that you create.Are not as bad or easier to solve than the problems that you're eliminating. And they've got actually lots of really cool innovations that they've done that have eliminated problems like for example, they have this gigapress thing that I'm kind of cast a huge part of the the car all at once and so they don't need to worry about like the dozens of robots and welding and different stuff like that.

They just eliminated all those problems all together, which I think is really pretty cool. And in a program,Ming situation, we've got remix has eliminated a lot of problems by just having nested routes and they eliminate problems with caching and and a bunch of the the like all of the abstractions that we build like react query or formic or different things like that, those problems are eliminated by embracing the fundamental aspects of the web and just the way that they solve these problems.

I'll have more time to delve into some of these examples and in a blog post might?Talk but remix is another great example of eliminating problems and again you do create new problems but hopefully the problems you create are not as bad or easier to solve. And then finally react hooks eliminated a bunch of problems with classes.

We have some new problems but they are definitely classes had so many more problems than hooks, so I'm really glad of this change too. So anyway, I'm trying to think today of like some things that you use or some problems you have and see if you can eliminate those and yeah good luck with that.

See you.

https://kentcdodds.com/blog/solidifying-what-you-learn

Hello friends So recently somebody asked on the KCD discord whether they should bother writing a blog post because the topic had already been covered a thousand times by other people who may have more experience in whatever. And I shared with them a blog post that I wrote quite a while back called solidifying your understanding or something like that.

And in it I mentioned a an interesting phenomena that I'm sure you've noticed sometimes you will be walking down the street and you'll see there's a McDonald's I really like a burger or whatever but then right.Next to it, you'll see a burger king. And then like we wonder sometimes like why would Burger King put a building here if there's a McDonald's right next door like they already solved the I need a burger problem why why would they bother doing that?

And the reason is because people's taste are different and people enjoy the the burgers, you know, or whatever quizzing you want to use as an analogy here. They enjoy that differently and they,And they have a different take on that But even if you don't have a different take even if it's exactly the same there's still value in that.

There's a street intersection down in Texas somewhere that has three Starbucks on it. So they're missing one Starbucks to get all four corners three Starbucks, I think one's in a Barnes & Noble and others in some sort of internet cafe or something and then there's an actual Starbucks but you you can get Starbucks on any three of those corners and and and it works and it's fine and people enjoy it and they you know, clearly there'sThere's business for that and in the same way there the internet is so vast and your reach is different from my reach is different from his research is different from her reach, whatever we're all over in just the way that we can reach people, especially if you know a language other than English if that's the case then you can reach people.

I simply can't. So definitely right that blog post to create that video make that content because the other side of this is that the,Content creation isn't just for the people consuming the content In fact it's often especially the beginning it's more for the person who is creating the content.

You learn a great deal by creating content at educational content of some kind explaining things. You can teach yourself in the future. You can go reference it later, but also the process of creating that content is going to make you understand it better. So, yes, I strongly advise that even though that everybody's already written about this or whatever go ahead and write about it yourself.

You'll learn more and you'll reach more people thanAre already being reached. Hope that's helpful. Have a good day.

https://www.typingtest.com/test.html?minutes=1&textfile=mediumText.txt&mode=sent&result_url=/result.html&bt=0

Hello friends. So this morning in my discord we had a little bit of a conversation about touch typing. One of my friends there asked if they should get into Vim and they were thinking that Vim you can move a little faster and well I think that's that can be true.

I think there's a little bit of an illusion to moving quickly just because you're using a special text editor or editor or a VIM like key bindings thing. I think you can get just as fast without them. And I've been on both sides, but yeah, andNow I'm not using them keen bitings But anyway I think, we kind of came around to touch typing was the thing that was selling them down.

They could improve their speed if they just were able to type a little faster. And so I thought yeah, I just got me thinking this morning about how valuable it can be to be able to type very quickly. I think most of us have been in a situation where the interface to the computer wasn't fast enough for our brain where we knew exactly what we wanted and it was just a matter of getting what we wanted into our hands andInto the keyboard and into the computer.

And so in particular, sometimes I say hey if you aren't sure about which direction to go with some API or something then focus on building both versions and choose which one you dislike the least is kind of my approach to things and so what it's it's not without cost to do that like it does cost to build it both ways, but if you like have it in your mind of what those ways are going to look like and and it's not like a huge.

Investment of mental energy to do it then the investment just comes down to how quickly can you type and you can reduce that investment by learning to type quicker. And so if you are not at right now I took a typing test and in a kind of real world sort of test.

I'm at around 88 words per minute and so I'm a pretty fast typer or typist however you want to say that. If you're not at around that pace then let me just tell you that the human body is capable of really amazing things our brains are are capable of amazing things and you can probably work your way up.

To to much quicker than you are And I would encourage you to put some intentional practice into that if you want to improve your typing speed. Now, there's a lot more to coding than just the typing speed. So don't worry about that. I spend way more time thinking than I do typing but I know situations where typing is the bottleneck it's really frustrating if you're not very fast at it.

So I'd encourage you to give it some intentional practice. Anyway, I hope that's helpful and interesting I will add a link to a the typing test that I took so you can take it yourself.Have a good day.

Live stream link: https://youtu.be/4dOAFJUOi-s

Hey friends. So today is an important day for a friend of mine. Our friends of mine Michael Jackson and Ryan Florence are releasing the beta 1.0 release of remix. And if you've been watching my Twitter or just kind of me in general, I've been really excited about remix. I've been reading writing can't seedance.com to remix and it's just been a total joy.

I am super excited about the potential that remakes has and really excited about the approach that they're taking and.From a progressive web app standpoint whatever So if you're listening to this on the same day that I'm recording it then don't miss their live stream that's happening later today because it's going to be great.

I'm certain of it like they haven't given me a preview or anything but I'm sure it's going to be great. And I really encourage you to give some serious thought to remix as an option for the apps that you build in the future because it's phenomenal. The their approach to focusing on the foundations of the web and the and the features like we spend so much time.

Building JavaScript libraries and and abstractions for what is already built into the web platform just because we don't want to use it the way that the web platform has it for whatever reason but remix kind of brings it all back to those fundamentals and what that means is that the knowledge that you gain as you work with Remix is very transferable.

It's all based on the the platform that we've had for decades and it's much more powerful than just our own little abstractions that that we try to build.So anyway, it is really incredible. I'm really excited about remix and I am yeah don't miss their live stream about it today.

I will put a link in the transcript here but you can just go on YouTube and search for remix JS and you'll find their channel and you can watch the live stream today. Yeah. I think that's all that. I I don't want to dive too deep into things because I don't have enough time in this three-minute podcast, but yeah, I have never felt.

So excited about a framework before or like a meta framework like remix. It is phenomenal. So anyway, I'll stop using all these fluffy words to describe it. And you'll see more about remix coming from me, absolutely. So look forward to that. Hope you have a great day and I'll see you around.

Hey friends so I wanted to talk a little bit about open source. I have been doing open source for almost as long as I've been doing software development. And it has been just an enormous benefit to me. I I can't tell you how how much I've learned and how much of what I know I learned through open source and so I strongly advise people to get into open source for various reasons.

In particular, like it makes you a better software developer, you write higher quality software, you can reuse the software that you create.In a other projects and so yeah it's a lot of fun to get involved but a lot of people ask me how well there's there's two sides of this how do I get started and then how do I make sure I avoid burnout as that is the thing that happens for open source developers.

It's a pretty thankless job in general like that, you don't get financially compensated most of the time and stuff. So first of all how to get involved. I have a blog post that goes into more depth on this. It's called what open search project should I contribute to or something like that.

And the assertion is that you contribute that.Is to something that you use regularly or that you have experience with. And so when people ask me, hey, do you have anything that I could work on which does happen occasionally. I always have a hard time answering that because I don't know what you use.

So it'd be better if you find something that you're using and you can work on improving that in some way. So think about the tools or or the libraries that you use and find ways to contribute directly to those to make those things better for yourself and for other users.

And then,On the other side of things if you get too into open source and you kind of lose track of things and and are starting to burn out. My strategy for that is I never work on anything that's an open source that I don't need or don't want to work on just for fun.

And so when somebody opens an issue on my project or something if if it's a feature enhancement or something that they want, but I don't need it then sometimes I'll just ignore it. Normally it's nice to to let them know that they can make a pull request or whatever andEnable them to do that But other times I just don't have the time and so I just kind of ignore it and and you know, they can always fork it.

So it's never like a dead end for them or anything. So yeah, that's kind of how I avoid burnouts. If I don't particularly want to do it for the fun of it, or I don't need to do it for my own stuff then I just don't bother and I've been doing open source for I don't know like six years or so or seven years and it's worked out pretty well for me.

So yeah, I encourage you to get into open source. Have a good time with it. Bye.

Hey friends So I am working on a rewrite of my website can see downs.com and one thing that I'm adding is user accounts so you can set up an account and I'm not going to tell you why you might want to do that. I have a little bit of a surprise.

But the reason that I mentioned this is because I'm using Firebase authentication and I started out with the username and password regular old username password sort of thing that you're used to. And it worked pretty well. I had a password reset. I had forgot my password. I had changed password and updated email all that stuff was all implemented butIn as I was working on all of this I started to I think personally I actually really like the magic link for stuff because for various reasons it's it's incredibly more secure.

So like if I were to have a data breach which of course, it wouldn't be me it would be Firebase I would have the data breach. So, I'm not really worried about that. But if that were to happen or rather for services that I use I prefer and that they use magical links because if they were to have a data breach all that's lost is my email address, which is,Everywhere There's nothing secret or private about my email address.

They wouldn't be able to get my password. And I do use a password manager, but I wouldn't need most lots of my family doesn't use password managers. They have either some sort of algorithm. They've come up with for generating passwords, which I used to do actually or they have they just reuse passwords or whatever.

And so data breaches don't reveal any passwords of any kind. And so that's it's way more secure in that way. Because there's just no data to lose. But,The other nice thing about this is or or the like the biggest concern that people have with this as well. I do use a password manager and if you don't have a password then I can't put you in my password manager.

And no, that is false. You can definitely create a an email only entry in your password manager. And the reason that you'd want to do this is if you have multiple email addresses, or you use email aliases or something. Sometimes you can forget which email you use for a given service.

So you just add an entry to that email or password.With the email that you use and just don't have a password. And then it makes the implementation way easier as well. So there's no need to worry about password reset or or securing the password or changing the password or any of that.

So like forgot my password all that stuff just goes away. So you can get rid of a ton of complexity just by eliminating the password. So I am all in on magic links. I think that they're great and if you don't log people out automatically after a couple days then or you keep them logged in for a month or so.

Then,There's no problem with the user experience either. Have a good day.

Hey friends So some of you may be familiar with my super simple start series of blog posts. I've got like six or seven of those and basically the idea is let's strip down everything else outside of the thing that we're trying to focus on and just bring in the abstractions or tools that are 100% necessary for whatever whatever it is we're learning and that means if we're talking about CSS variables or custom properties, that means we're not bringing in Webpack or any of that nonsense, it's all just index HTML and then style sheets and stuff.

And we're talking about react same story. We get rid of the build tools just get rid of all of that stuff and see how minimal we can make something work just kind of the hello world of this. We we don't care about whether this solution scales or anything and the idea is if we can separate the specific thing that we're trying to learn from all the extra things you need around it to make something practical you'll understand a lot more what the the role of that thing that you're trying to learn is.

And so,It just has helped me enormously where with regard to working with node modules like native ES modules or even the native ES modules in the browser. And so this is something an approach that I take when I'm trying to learn something new or maybe when I'm trying to introduce something new to somebody as I try to just pair it down as much as I possibly can to remove all of the noise and just focus on what we're trying to actually learn and it's been really effective and so I wanted to share that with you as an.

Idea if there's something that you're trying to learn and you want to just really get a solid grasp or understanding of a specific technology or whatever then try to make a super simple start to whatever it is that you're trying to learn. And I think that you'll find it's surprisingly easy to do typically or it's a lot easier because you can just ignore a ton of other things that we always have to think about when we're building real apps.

And then it also helps a great deal and actually being useful. So anyway, I hopeThat's helpful and I hope you have a wonderful day.

Hey folks, so today I want to talk about trust the process which I just barely looked up and apparently it's a slogan used by fans of the NBA's Philadelphia 76ers and now it's just everybody uses this and I use this and one of the things I think that I mentioned on three minutes with Kent months ago, when I started this new year one of my or my kind of goal or theme for the year was planning and the way that I executed that theme was I have a notebook and a pen that I keep in my pocket.

And at the beginning of the day I'll just look at my calendar and the things that I'm I need to do or maybe at the end of the day for the day the next day and I write down a list of all the things I want to get accomplished and so far this year.

I've done a really good job of keeping up with that process it's worked out pretty well. I had slipped up a couple times for like when we do spring break and stuff with the kids, but for the most part I've been doing this really well and it's worked out just phenomenally so I it's a pretty small thing.

But it's it makes me feel a lot more productive especially during on those days where you don't really feel like you get a lot done and you can look at your list at the end of day and say yeah sweet I did get a lot done or maybe like wow that one item on this list just took the whole day.

I didn't expect to expect it to to take all that time, but at least you can kind of reevaluate and think about the things that you got done and you can prioritize things and make sure that you don't spend so much time on the little things on your list that you miss the more important things and so you.

Can see it all in front of you and prioritize so this is worked out really well and there are times where I think man I'm just not getting as much done that I want to but then I just trust in the process and make sure that a I'm being as productive as I can and I can't really ask much more of myself so anyway for today.

I just want to encourage you to trust in whatever process you come up with and if you don't have a process, you don't have a goal or something specific that you're trying to achieve then I recommend that you get one and actually it's Scott Hanselman was on.Chats with Kent a while ago and he and I had a great conversation about being intentional about what you want and about how you spend your time and I just listened to it again today.

I'd suggest that if you haven't listened to it already go listen to it and if you have give it another listen because it Scott is just really inspiring has a lot of really good ideas and so yeah, if you haven't listened to that go go to https://kcd.im/podcast and give that a listen.

I hope that's interesting and helpful to you have a wonderful day.

Hey folks So I have had a couple of in situations when I was writing some tests where I had some code that would give me some sort of warning maybe it's using the invariant module or I'm just doing a console.air or consultant more or something like that. Or maybe I'm rendering a React component that will throw an error or something like that and I want to write a test to make sure that that error is thrown or whatever.

So in in these sorts of scenarios, you're going to get console.errors getting logged. And so, I just wanted to talk about how I do that. So what I do,Is I am I do just that spy on console error and do that in a before each and then inside the test itself.

I will define what I want it to be mocked as and I don't want to have my tests muddied up by all the console output from my source. So whether that's console.org, or error or log or anything, I want my test to be totally free of all of those things.

And so if I'm expecting to have some logs of some kind as I'm running my tests, I'm going to need to mock all of those things. So that I don't have aBunch of noise in my test output And so typically console.ir is going to be mocked and I'll say mock implementation empty arrow function, so it doesn't actually log anything.

But sometimes this can be a problem because sometimes let's say that you are expecting to get an error but you're not going to be getting the like the error that you get when you first write it actually you get a different error for a different reason later and if you don't assert on the error that you actually got then you'll be in a bit of a bind and so you when you mock the implementation like that, you want to make.

Sure that you are asserting that yes, this was called and we know what it was called with. So you want to insert what it's called with?The other side of this is let's say that you want to make sure that an error is not called because you're handling a situation where maybe react with typically error like for example when you unmounted component and a request finishes you want to make sure that there's no error about setting state on an unmounted component, for example.

And so in that case, what I did just today was I set my error at or I I did spy on my error, but I did not want it to want to mock the implementation. I want to keep the original implementation.And then, I perform all my actions, whatever NI assert that the console error was not called.

In this case, you do not want to unlock the implementation because if you do have an error you want to be able to see what that error was. So anyway, I thought that might be interesting. And in yeah, if you ever run into situations where you have a bunch of errors or logs or anything, just make sure you clean those up.

So, they're not distracting from the output of the test. Hope that's interesting. Have a wonderful day.

Your friends it's a beautiful day it's Monday and I wanted to share just something that I discovered while I was working on something just kind of an interesting workflow that I've come to start to use and that is if you are trying to use something and you don't know what type it requires rather than and assuming that it's written in touch script or at least has type definitions so like say you're passing a function to an API and some sort of callback, for example, maybe you're on an input in a j in your JSX and you have an on change in your not sure what type.

The event should be or that first argument or you don't even know whether it accepts arguments or anything so the way that I do this is rather than opening up the docks and digging around and trying to find how this is to find out what I'm expected to do here you put in a function that you're pretty confident is going to break the types in some way and so for our input on change example, you can just put an inline function in there that takes a single argument that you type as null or something and then you're going to get an error and the error is going to give you.

That the last line on the error is going to say that type such and such is not assignable to type null so in our example. I literally have this pulled up that's where this example came from but in our example it's type change event. HTML input event is not assignable to type null, so now you know that it's a type change event and if you're not sure where that change event is coming from then you can F12 into the unchange prop and it will take you right to where that is and here I see it's a type change event handler is what that type is and if we F12 into that we just keep on F1 eventually we're going to.

Find that this is typed as an event handler that accepts a change event input type or type as it's input ultimately this ends up just extending this synthetic event and it has one additional property a target interestingly that's an event target of the the given element so what was interesting about that actually is that that means that the target for a change event is equal to the input or to the current target.

I'm guessing so that's interesting anyway, so yeah, that's just kind of a general tip if you.You're working with something you're not sure what at least for our function you're passing this function you're not sure what arguments it should take pass it something that's just bogus that you you don't know if it's right or you're pretty confident it's wrong and the error message should give you an idea of what you are actually supposed to do there and you can do the same with the return value as well so like return a symbol or something that you're confident will not be what you're supposed to return and you'll get an error message indicating to you or giving you an idea of what you should return hope that's useful and interesting have a wonderful day.

https://youtu.be/gzq5AFCH5jk

Hey, you're folks. So today I listened to a podcast interview. It's about 50 minutes on. And it is on a podcast called Tesla daily. I which is a kind of interesting daily podcast about tests huh? But normally it's it's like a 15 minute long thing, but this one was 50 minutes and it was an interview with this fellow by the name of well, it's not showing the full name here.

James Duma and yeah, I,Don't I've never heard of this person before but they are really great at explaining neural nets and so I wanted to share this with you wanted to um, just encourage you to go give it a listen. Some of it was like hmm, I'm not sure I get this but after like thinking about it more and and listening carefully to that James explain it, um, I I feel like I have a much better understanding of neural nets now than I did before and I thought that you all find that to be kind of interesting, so I'm gonna include a link to theIt's on YouTube I I'm guessing this is also gonna be published as part of the the daily podcast that you can subscribe in your podcast reader or can whatever app that you use but I was really interesting kind of explaining how neural nets work especially in the like thinking about it from the context of Tesla and their autonomous driving they talk about that, but it's not specifically about that.

There and there's a little bit of the history of neural nets as well. In here, so this person was very knowledgeable.And goes pretty deep technically. So I wouldn't listen to this one on three Xs I'm saying. Anyway, give this a listen it's kind of interesting and yeah. I think it's kind of fun to broaden your understanding.

I know that I'm primarily a UI JavaScript kind of developer but yeah. I think that it's good to expand your horizons. So give this one a listen and I hope it does that for you. Okay, take care.

https://twitter.com/kentcdodds/status/1381453907730128900?s=20

Hey friends So last night I tweeted this TypeScript question. When have you used never in a production codebase links to examples welcome? And I failed to mute the conversation and so I ended up waking up the next morning with tons of notifications, which was great. So many people were happy to share and I just wanted to share with you a couple or the like basic themes of the different examples that people shared.

So the first is discriminating union. Oh and by the way, if you've never heard of never before the basic idea is it's a way for you to say.Hey the type script type checker as it's flowing through the types of my application, it should never be able to hit this type.

So it's like those situations where you like this should never happen. That's basically when you use never. So anyway, the first is discriminating unions and a common example for this was if you had a component that could take a variety of different props. So an example is a component that could like draw a shape so you could be rectangle or a square or a circle and depending on the type of shape you want to draw you're going.

To have different props And so square will have a width Rectangle will also have a height in addition to that. And then circle won't have either of those it'll have like a diameter something. So the you know, the discriminating union's use case for never would be when you union those props together you want to be able to say hey when it's a circle I never want to have a height or a width and when it it's a square.

I never want to have a height because I just get it from the width and I never want to have a diameter because it's not a circle. In my mind,Actually most of the examples were similar to that and in my mind most of the time you're actually probably better off just making two separate components or yeah different components entirely that are responsible for doing that specific thing.

However, sometimes there are definitely use cases for you know, if if you're going to provide me this prop, you also must provide me this prop, but if you provide this other one, then you must not provide this this other. So like aria described by versus already described stuff like that.

So that was like the primary use case in addition.Switch out ifs and else statements this is where you can make a function that is basically they would call it a certain ever and it would return never it would throw an error. And basically your time typescript well by calling that function you get a type error.

And so if you put this as the default case or something and you're not handling every case then type script is going to cause a problem for you. And then the last one was conditional types and that one still pretty hazy for me. I can't really explain it. So anyway, hopefully some of that was interesting.

And I hope you have a wonderful day. Bye.

Clickbait? Yes.

Hey folks today, we're gonna go with the untraditional not tech related really podcast so I got my first dose of the modern of vaccine yesterday. I strongly advise that you do the same if you are able all of the data points to this being safe despite it how fast it was produced and everything so I if if you're not if you don't get the vaccine but you're able to then you're putting other people at more and greater risk unnecessarily so just please get the,Team let's get our lives back to as normal as we can so we can work on all the other terrible things that we need to work on and focus our energy on making the world a better place and yeah just for me this first dose has been this morning.

I woke up feeling like I got hit in the in the arm really hard and so it felt kind of bruised and then I felt fine and right now I'm writing around on my one wheel so I I'm not super terrible but I am feeling a little achy and that sort of thing.

I hear that the second dose is work.S and so we will see what we will see there but whatever issues I have it is worth the cost. I actually did have to test positive for the virus in October but yeah just getting vaccinated clearly. I guess this is affecting me anyway so so yes, I'm glad to be getting vaccinated.

I'm hoping that we can return to our regular lives as soon as possible and I hope that you get yourself vaccinated too.And we can all just get back to a better situation than we are now all right that's all I had to share with you. I hope you have a glorious day it is beautiful here in Utah right now and it's just glorious so I hope your day is equally amazing and I wish you the best of luck in all of your personal and professional pursuits because yeah, sometimes we need a little luck so take care bye.

Hey there friends, so I have a question somebody's asking on the KCD office hours channel in discord and I decided this is something that I can answer in the three minutes with Kent alright podcast, so the question is what are my thoughts on PWAs nowadays should all websites be PWAs are there const making your site's PWAs so in general or to be clear a PWA stands for progressive web application and normally when we're talking about this we're talking about something that can be like installed.

You can have background notification like push notifications and stuff like that works offline, in fact Chrome recently started requiring or is going to require offline functionality to be present for your app to be installable as a PWA, so I have actually had my website installable as a PWA before and I've had a couple other a little apps or sites that I've made PWAs installable and it's kind of cool.

I would caution people against just saying let's make everything a PWA because I have had some sad experiences with service workers with Gatsby in particular it was just so easy to turn on offline capabilities, which is a plug-in but unfortunately that plug-in had a dependency that had a funny problem with it and so I ended up having testing JavaScript.com install a,Service worker that would never get updated ever and so we launched testing JavaScript.com, it's like here's this is coming soon and then when it was officially launched a ton of people did not see the update and so they couldn't buy the course and it was just a total nightmare disaster.

I had some frustration and annoyance with the PWA I had for my website and because people would come to see my blog and then I do an update between the last time they saw the flag and this time and so let's see old.Content and I'd have to do a notification that said hey there's some new content downloaded now and most the time people don't really care to have it offline and so it was just an annoyance so I would say that unless you're doing some offline support stuff then there's not really a great reason to make it installable and and whatever you have to have a good use case for your thing to actually be like an app and useful in that sort of context for making it a PWA, those are my thoughts on it.

I hope that's useful in interesting take care.

Hey there friends. So a while ago, I wrote well actually several years ago. I wrote a blog post called a newspaper code structure where I described the way that I like to structure my code to basically make it. I don't know easier for me to parse as I come into a new file and the idea is that anytime I have some sort of block of code that returns some value or whether that be a function or a module where your exporting values and stuff.

I always,Like to do the the thing that it returns or the exports at the very top of the file and the reason for this is in a newspaper article and they make it they write it so that they add just kind of a high level first and then they slowly fill in with details and the reason they do that is so or at least maybe they used to do that this way is so that you could clip the article at any point to size it for where it needs to be and it would still be coherent to make sense.

And in the same way I like to make my code so that it makes sense.Reading from the top down and if you need additional details then you can dive into the function there. And so what it ended up looking like is you'd have a function and like one of the first couple lines would be a return statement and then all of the guts of the function would be in a other functions that are below the return statement.

This is actually like a thing that you can do. You can define functions below a return statement and they will get hoisted the declaration and the definition will get hoisted above the return statement. So it technically actually works. So I did.The first for a long time but I eventually stopped doing this and the reason is because I I was bothered that I couldn't put the exports and the return statement at the very very first at the very very top because any time like so the the hoisting functionality I'm talking about that works for function declarations, but it will not work for arrow functions, it won't work for variable declarations.

So, I'd have to just put everything in enough function if I needed to use any variables and so what ended up happening.Was I'd have a couple of variables that I define at the top and then I never returned statement and then I'd have all the other functions or in a module I'd have you have to put all the import statements at the top.

Well, you don't have to those get hoisted too but it just looks funny if you don't. So I put all those at the top and then I have some variable declarations and stuff and then my exports and so what I ended up with was a return statement and the exports that were just like in the middle of all the code.

So now I just put everything at the bottom and it's easier to find. So, that's that's why I made that change. This is an answer to somebody in Discord. I hope you're having a great day. Bye.

So the last question in this email has to do with how do you know why where to start testing because you're adding testing to an existing project and so most of your tests are actually writing tests for code that exists and so it's not like there's no test driven development there or anything like that.

And so, how do you know like how far do I go and testing when when can I stop and say that this component is tested? Does it have to do with code coverage or whatever? And my answer to that is I actually do have a blog post how to get started with testing or how to add tests to an existing code base.

Where I talk about with just kind of in general you want to start with a single end-to-end test and you add some static testing and then you add the tooling for and unit integration and then just add over time and you can go take a look at that for a little bit deeper read on that, but if we're talking specifically about I have this component and I want to add tests to it where do I start and for me it comes down to thinking about use cases more than thinking about code coverage.

And I actually have a blog post ofAbout that as well. But basically the idea is I don't really care about code coverage. Lines of code is basically irrelevant. All that the the code coverage report tells me is the use cases that I'm not covering. That's what I'm thinking about when I'm looking at the code coverage report.

So if there's like an if statement that is not covered then that just says, oh, okay, so whatever use case that code exists for that's a use case that I'm not testing for because use cases are all that we care about. We care about this.Code working for the users whether that be developer users who are calling our functions or rendering our components or end users who are clicking the buttons were rendering whatever.

And so you want to think about the use cases that you're covering and then you weigh them relative to the confidence that you need for other use cases of other components as well as the features that you need to build and bugs you need to fix and things like that.

So it really comes down to what we said before about weighing the return on your investment of time for writing.Versus features that you can work on Now let's say that you live in a world where it doesn't matter You don't need to work on features you can just totally focus on tests.

There is a stopping point for sure and the stopping point is when you feel like you've covered all the use cases. Now for like open source libraries and stuff it typically end up covering all of the use cases you get a hundred percent code coverage, but for applications. I never find myself in a situation where I can just spend a ton of time on tests.

I need to work on features and that's where you just need to kind of weigh, what are the things that I am going to write test for.Versus new features or whatever. Hope that helps Ciao.

Hey friends this is another answer to that lengthy email from Poeter I'm not sure how to say that but properly sorry but the question is how do you write code that can be easily tested and they go at length to explain, you know, sometimes you write, you know smaller functions and we can test those easier but ultimately like, it doesn't always work that way components typically grow and splitting them up makes it feel harder to maintain and I totally agree with that.

I have a blog post called when to break up a react component.And I typically preferred don't break it up if you can help it avoid breaking up your components unnecessarily so yeah, so I prefer having bigger components but then like okay, so how do I test this it's got a bunch of use effects and whatever else in it and then they also bring up the container or yeah the like the smart and dumb components sort of thing or whatever we landed on for the macular for that but I actually never liked that pattern either.

I didn't think that it was a useful.Mechanism for splitting components up or anything it didn't make any sense to me. I mean, I understood like what the rules were but the rules were stupid. I thought and never got any value out of that, so how do we write react components or just code in general let's easier to test well.

I think that if you're testing from a user's perspective and focusing not on building like running necessarily testable code, but just code that's that's sensible that makes sense like there's you're not breaking things up unnecessarily and you're.Associating things across like that are in the same vertical I guess like yeah just not breaking things up unnecessarily and then you test them from the user's perspective, it really doesn't end up mattering how complicated the code within it is necessarily especially when you're we're talking about unit or integration tests where you're mocking HTTP calls that stuff as long as you have MSW to intercept requests and and mock those out and then occasionally maybe mocking a third.

Party library that's complicated or something from there it's it's just rendered the thing and interact with the thing the way that the user does and then assert on its output. I never really think too much about making my code testable necessarily and maybe that's just the curse of knowledge on me just learn to do that naturally and it's something you develop over time, but it's not really something.

I'm thinking about a whole lot. I guess one thing that I do is I I typically avoid doing side effects in the root level of a module and I always put those in a function and that can help make things a little more testable but in general, I'm not really.

Thinking about it too much. I hope that's sort of helpful bye.

Hey your friends So I am going to for the next couple days answer some questions that I got in an email from somebody. I don't know how to pronounce this name. It looks like pejor or push actor. I'm not sure they're from the Netherlands. And anyway, they actually wrote me quite a nice email about testing JavaScript.com and just had some additional questions because the course mostly goes into the how to get things done and that doesn't get as much into like some of the philosoph well it actually yeah, we we get into that a bit.

But there's no like specific lesson on how to write your code, so it's testable or whatever. So anyway, um, most of that knowledge I share on my blog. So if you go to Cansee dots.com slash blog and then type in test then you'll see I've got dozens of blog posts about testing and so that's kind of where I direct people to for when they have questions like this, but I thought I just answered a couple of these on the three-minute podcast.

So for this first one, the question is what should you write tests for and whatnot?To write test for and why? So and they acknowledge that yes you want to avoid testing implementation details but how do you know that you're done writing tests for a component? So for one thing I actually recently had a question from somebody who said like should I make assertions that certain things don't show up in my output, you know, so we're asserting that the login button shows up and I can click on it but like should I also assert that the register button doesn't show up or whatever the case may be?

And,So anyway the answer to this question is everything that you do in software is trade-off and it has a cost and that cost is equal for everything and the cost is your time. So how much time do you spend working on any given problem and and you weigh everything relative to the amount of benefit that you get for the time and it isn't exactly a science is a bit of an art but you generally just think okay, so I'm gonna write this test for this component and the reason that I'm doing it isn't just to write a test but it's because what I get out of writing it.

To test is more confidence And so at every moment of the day or whenever you're making it a decision on what you should work on you should think okay so I could write some more tests for this component and maybe I've been working on this component working on its test or I could go implement this new feature or fix this bag or whatever.

And you just have to decide okay based on the amount of cost that it takes from the time aspect versus the amount of benefit with more confidence or nice feature for more users or whatever and you just weigh those and make a decision on what is most valuable. So you're not just testing because you want to tend to.

Ask but you're testing because you're trying to get something out of it. I hope that's helpful. Good luck.

Hey there friends. So today I'm going to answer a question from Lean or Leon I'm not sure how to say your name sorry but this is asked in the react hooks channel of the discord the KCD discord under the Epic Reactive category and it's talking about exercise six where we show it's it's an exercise on managing state for asynchrony, so we've got to use effect in there and stuff.

And we have this status status and that is the status of the promise. So whether it's idle pending reject,Ed or resolved and we render different things based on that. And in my solution, I just do an if statement. So if status is idle, then this outsift status is pending then render this also status is rejected then do this.

And that I I was pretty happy with that. But I there are obviously several different ways to do this and one natural thing that people sometimes will do is a switch statement which is what this individual suggested why don't we do the switch statement, but then they got some pushback on that.

Hat from a co-worker. I think that suggested using an object instead and so you can say here's a a object that has the status value so you have idle pending rejected results and each one of those is assigned a as a property the the value is going to be the react element that should be rendered.

So I mentioned that I would talk about this. So in the next version of Epic React, so if you look in this repo on the next branch, I actually switched to not only TypeScript.And but I also switched to using a switch statement Just because I think that it makes a little bit more sense in this context.

Like I said, I often don't use switch statements. I prefer if else or maybe even ternaries but in this case, it just seemed to look a little cleaner and so I use the switch statement there. Definitely know hard and fast rule on that. It's just try them both and pick the one that you dislike the least.

Um, but I did mention in this discord chat that it actually is really not a good idea to use the object approach for something like this. And the reason is that,Sometimes you're gonna be switching on something like in our case we're displaying a Pokemon. And if you're going to create React Elements that reference properties of that Pokemon then you you're going to be accessing properties that may not exist based on the status like if you have idle the Pokemon could be null.

And so if you're even though those different properties of that object won't actually get rendered you do have to access those properties to create the React elements. So, that's why you don't want to use the object form in this case at all. So, I hopeThat's useful and interesting and I hope you have an awesome day.

Goodbye.

CORRECTION: I came up with the concept of AHA Programming but I did not come up with the acronym. AHA (pronounced Aha! like you just made a discovery) is an acronym I got from Cher Scarlett which stands for Avoid Hasty Abstractions.

Hey friends, just something that I've been thinking about recently is this acronym that I came up with a few years ago. It's AHA and it's pronounced aha and so that's aha programming and it stands for avoid hasty abstractions and this is actually a blog post that I wrote with some time ago and it talks a lot about how like dry do not repeat yourself as to dugmatic and wet programming which is a variant of that is right everything twice is also.

Two dogmatic and more we should be more mindful of the types of abstractions that we create and and I talk a lot about in the blog post, which I suggest you go take a look at but one part of this and is at kind of the micro level and that's what I have been thinking about recently just today.

As you're working on a new feature or something is really really often in my programming at least I'm working through something and I start I'm thinking about how I'm going to implement something and I instantly decide okay, I'm going to need.A function that does this And so often that ends up being the wrong decision I end up making and especially with TypeScript actually.

This is a big pain because then you have to there's just a lot of boilerplate with making a function. But even even not without TypeScript, you have to think about okay, what are the parameters what order are they going to be in or is it going to be an object that AD structure?

And it just adds a lot of stuff that for code that you don't even really know what it's going to look like yet and and on top of that if you decide oh actually this function needs to change like weWe just add a lot of extra work and thought before we've actually written the code just by making a function for this thing that we think we might want to function for where in actuality.

I find I'm so much more productive if I just start by writing the code and inlining as much as I possibly can even if that means I'm copy pasting from one part of the code base to another and just in line everything as much as you can make a big long function.

And then before you commit at that point, you look atThe code that you've written and you think okay, so now what are the abstractions that I see now that the code has been written? And so, I find a lot of my problem comes with when I try to abstract the code that's not there yet.

And I find a much more productive if I abstract the code that exists after I've written it. So anyway, hopefully that's helpful to you next time you feel the urge to write a function for code that doesn't exist yet. Maybe take a step back and write the code first then make the function.

Have a wonderful day.

Hey friends the future is the edge We've got the now-fight edge thing CloudFlare workers things we want to be able to deploy our code and have it run as close to the user as possible. Before it's always just been static files that you put on a CDN like Akamai or Cloudflare or fastify or something like that because that's really easy to do.

You just you deploy and then the provider will send these static files all around the world to their servers and and then users can get those files really quickly, but anytime you needed to get data you had to go to wherever the data.To the center was. And so that like pretty much doing a server rendered application would require that at some point you're going to be going to to have to go to some central place to to get that data.

And so it's going to end up being slow. And like in particular for server side rendering stuff it. It's not very useful unless you are doing stuff with data anyway. So things are changing. We've got these contour workers, so you can actually run server rendered.Staff or server side logic on the edge.

So close to the user and then we have fauna DB and I'm sure there are others like it that's the only one that I know of where the data lives on the edge as well. So when you do a right to the database Fana will push out the the right to all of its CDN clients or whatever all all of its servers all over the world.

And so then you're running compute on the edge and your data is right there on the edge too.And so it's just outrageously fast and it's really cheap like very cheap. Sometimes free if it's a very small sort of thing that you're building, but you're latency is going to be very like I'm looking at Cloudflare right now.

It says your actual latency is 16 milliseconds. It's like that's that's my latency on this page. I just tested again. It's 15 milliseconds. It's outrageous. Oh, how fast this stuff is? And so the future is the edge. We're going to have data on the edge. We'll have compute on the edge.

It'll be very.Very very fast. No cold starts cold starts are you know here on the clock for our workers page their support for zero millisecond cold starts. We're it's it's basically free it's outrageous and it's an exciting future. I'm not saying that you need to rewrite your app so that it works in a cloudflower worker or anything but I am saying that this is kind of the endgame for remix.

It's a definitely a target for what remix is trying to do and I'm super here for it. Yeah. I hope that's interesting. Have a good day.

What is up friends so this is another one in the real world programming analogies segment I guess so actually a long time ago. I wrote this down as something I could do for a blog post but you know TV remotes and how like you either have like 30 different remotes to control like your TV and the receiver and the the Chromecast, you know, like all the different and remotes that you need for that it's a disaster or you can get a universal remote.

And what's interesting about universal remotes is that they're to make them actually universal first of all there's a lot of work to make it work with all these different technologies, but then they're like 20,000 buttons on these things and nobody knows what they do because they have to be generic enough to be universal and I was and and so like either one of those is isn't great but it just made me think about abstractions and trying to make your stuff overly useful or satisfy at.

Every use case and actually I was listening to syntax recently and I think it was last week's article our podcast where Scott mentioned that he was trying to use some I think it was like an authentication thing and I think it's like account JS or something like that anyway, it supports like pretty much anything that you could imagine from a backend perspective and things and he realized that he had to do just a ton of work to glue everything together and only ended up on using like 10% of.

What this abstraction offered and realized that he could just write that 10% himself which he did and ended up being in a much better place and I have definitely experienced similar things myself where things are just so generic that it is basically not doing anything for you and so like there you're you've got both both sides of the coin and coin so like over modularity is a problem where you know, it just does so much that it's hard to make things or like you have to do a,Lot of work just to make it work and then you end up not using all of the features that are supported and on top of that maybe the library is going to the client side and so it's really big and that's a problem but also bad abstractions are a problem too and and so like making something too focused on a specific use case may not make it useful for general solutions or general problems and so yeah, like it just was something I always thinking about over modularity can be a problem just be careful of that and I hope that.

Is interesting take care.

So one thing that I do, you know, how you like you do something just you've done it forever and then when you show it to somebody they're like blown away like, oh man, what a good idea, whatever nobody is said that to me on this one but I thought I'd be one of those things that um that I just do it naturally in and you might find it to be useful so in my global git ignore for my machine.

I have a pattern for ignoring anything that includes the text dot ignored dot and and so then I can create a folder.That's like temp dot ignored dot staff or more often I'll create a file that's like temp dot ignored dot js and what this allows me to do is I create a file like that within my project that I just want to play around with stuff and I don't want to have to install all the same dependencies in a different project or whatever and I don't want to mess up the other files that I have in my project and then I can mess around with things and I do this a lot for interacting with third-party APIs, I'm just trying to learn about like what's the code that I need to write to consume?

This API and transform it into whatever I need it to be and then forward that on to the rest of my my code base and and then adding types to it and everything and so yeah just having the ability to quickly create little files that will be ignored by git is really quite useful and and files within the project so I can import other files and things and if I want to write it all in typescript then I can use TS node to run it but normally I just do it in JavaScript because often script.

Just kind of in the way there especially since I configure type script to be unstrict mode and everything I'm just rapidly iterating over some code and then when I'm all done with that, I can copy it into where it should be in my project and add types to it and everything like that so anyway.

I think that it can be useful to have a little kind of a playground sort of area for you to to experiment with different ideas and stuff if you want to take it to the next level there's quokka by Wallaby JS and I do have quokka and I use that sometimes but what I'm interacting with third-party APIs, I want.

To be explicit about when I'm rerunning the code and so yeah having just a separate file for that can be quite useful. I've done this for years and maybe that'll be interesting or useful to you hope you have a great day bye.

Hey friends, so I am at ski resort in Utah right now and they have this kind of a funny story that in the bathroom they have the urinals covered up like every other one covered up for social distancing and a few weeks ago when I brought my son up here he needed to use the bathroom and all of the and he's he's kind of small so normal he just uses the pot but all of the those were being used and he really needed to go and so I was going to.

Have him use the urinal but they covered up the only small or short urinal so they because they covered up every other one they just happened to cover up the only short one and so I I ripped off the garbage bag that was tied on to it and so he could go but it just made me think like the the this is has something to do with like accessibility and the importance of diversity in your team because I imagine that the the person who is assigned to cover those up like they didn't tell them which ones to cover up they just covered it they chose one and they did every other one and it just happened to cover.

Up the the shorter one but if they'd been apparent then maybe they were a parent of small children or something then maybe they would have thought oh let's make sure we keep this one uncovered so that smaller or shorter as smaller children are shorter people can use this one and that's the sort of thing that you just miss out on if you don't have a diverse team so I I think that is like it's kind of a silly example, but it is an example of a situation where having a broader set of experiences on your team can expose you to more needs that.

Your users might have and so yeah those are some of my mind this morning. I just thinking about the importance of diversity. I hope that is interesting and useful to you and I hope you have a fantastic day and we'll catch you on the other side.

Hey friends, so I was just working on something for the last hour or so and I got to a point where I decided, you know what this I probably shouldn't be doing this like it was an optimization basically. I wanted to be able to change content on my site, so I whether it be a blog post or the about page or something like that, but not actually trigger a redeploy and I'm using GitHub actions right now for this site and there are ways that you can determine okay, what was the last successful deploy?

And what should be the you know what files are changed between that deploying this one and if they were only content files then just don't deploy them. And so, this is absolutely possible and I was working on it and I spent about an hour or so working on this and then I finally decided hey, you know what?

I don't think that I need to worry about this right now. It's an optimization so what if I'd redeploy on a content only change? Right now, I'm just trying to create the site in the first place. I'm not I'm barely even deploying. So yeah, I'm trying to solve a problem that I don't have and it's very.

Possible that when I'm all finished, I'm gonna switch from GitHub actions to to Netlify or something completely different and yeah, it just seems to me that this is way premature and I should be working on other things just to get this site up and going before worrying about you know, am I deploying unnecessarily?

So yeah, that was just a thought that I wanted to share with you all just make sure that you when when you realize that what you're doing may or may not be used.Full and there are other things that you could be doing that would be more useful then stop doing what that thing.

And I just made a branch and committed to changes that I made I pushed that branch up and so I'll have that code if I ever need it but I I don't think that I will honestly but in any case I've got it there and I can shift over to something that can provide more value and more of what I'm looking for.

So anyway, I hope that's helpful to you and I also hope you have a splendiferous day.

Hey friends. So today I was working on a little problem that I had with Create React app. So if you don't know Epic React is a combination of a bunch of React workshops that I have given many times in a life setting and it's a recorded version of kind of a live workshop that's kind of the feel.

Anyway, all of the workshops there are powered by create react app under the hood and I've got a abstraction on top of that to share a bunch of code between all these different workshops.So I am in the process of moving everything over to TypeScript and I want to be able to have two different versions of TypeScript or of texture configuration for the exercises versus the final version.

So I want to make sure that as we're moving everything over to TypeScript if you don't want to do TypeScript, it's as like easy as possible or if you've got very limited experience or no experience with TypeScript, you should still be able to get a lot of out of the workshops without having to have a bunch of red squigglies all over the place with their messages that you don't understand.

And so,I don't want to have strict mode on of course for the those exercises because that would be against that goal. But I do want to have strict mode on for the final version of all the the exercises so I you know, because there's good reason to have strict mode and and it kind of helps me as I'm working on it to make sure that I'm doing everything the way that you probably should in a real application.

And so, unfortunately with Korea react app if you don't have the TS config set up proper well here let me back up so.You can do this by having using project references and so you have just your main TS config that references other TS configs and then those can include an exclude different files.

So I can get that set up but the problem is that in create react app if you're root TS config isn't doesn't have all the right properties then it will fill those in automatically for you and that messes up the references stuff. So, it just doesn't support references which is a big bummer.

I made an issue about this. But what I did for,The foreseeable future unless create react to app ad support for references is I used this package on NPM called Patch Package and it allows you to install all of your dependencies and then you make a change to one of the files in your node modules and then you run the script and it will generate a patch for you and then you just set a post-install script in your package JSON and it will after your people install it it will apply that patch.

And so, I was able to make a small change to create react app to support this. So give patch package a look it's pretty cool. It's kind of interesting. IHope that was interesting to you and I'll talk to you later.

Hey folks, so today I want to tell you about ES. Build so if you haven't heard of ES. Build it's been making a lot of noise recently. I think it's I I didn't check but I think it's been around for at least a year. I think is the first time I heard of it.

But basically, it is kind of you you can think of it as a bundler like webpack but written and go and apparently go as much better suited for bundler tasks because it is wicked fast. Like I've tried it myself and you think that it's broken.Because it's so fast like you think it just didn't run and because you execute ES build and it's instantly done.

It's it's outrageously cool. And so it's starting to take over I've noticed in lots of different areas like the new meta frameworks that I'm seeing are using ES build bite the the view meta framework tool. I think it's like gonna be the new view CLI or something eventually but it's powered by ES build Remix, they're currently working on moving over to ES build.

I I'm using ES Build in MDX Bundler and a couple of the like newer smaller things like from Jason Miller the creator of Preact he's using ES build for his thing WMR or something. I think is what is called um, but yeah, it's just like oh and there's a new testing firmware called UVU that is using ES.

Build under the hood to just be just outrageously fast. For compiling typescript and everything. The only downside to using ES build currently that I can see is there's,No support for custom babble plugins which is a shame but these days I don't really use custom babble plugins for anything other than like code transformations like like code gen or prevalent and these are macros and I'm thinking we may be able to make a macros sort of plug-in thing that works with ES build.

So that's that's something I still need to investigate but and I think some people have tried some experiments to make Babel work with the US build but when you start doing that stuff, you kind of negate all of the benefits.The performance benefits of ease build because then you have to do AST compilation in node again and yeah that can be slow.

So anyway, if you haven't looked into ES build yet. I'm not telling you that you need to take your work application and and migrate everything from webpack over to ES build, but it is pretty powerful and it's something to keep an eye out for and there are other things.

I think there was one like SWC or something like that, that's written in rest. But yeah, it's exciting times and I thought I'd just share that with you. Hope you have an awesome day. We'll,Talk to you later.

Hey friends So today. I just want to mention something that I've been working on for the last couple days. So if you didn't know node version 10 is the last version of node that so does not support native ECMAScript modules without a flag. So you can use ECMAScript modules with node version 10, but you need to pass it a flag version 12 and above I'll do not require a flag they just support a native ESM out of the box.

And what's exciting about this is it means that package authors can start using native ES module.'s and and we can consume them as native modules and we don't have to compile down or compile away those ES modules. This is a good thing but it also comes with a fair number of complications.

For one thing we're not there are interesting semantics with the way that ESM works native ESM. For example, you cannot use require for a native ES module. So, you can't just require a library or another module that you've written. You.Have to use an import statement. Now, you're probably working in if you're working in a node application, you're probably working in one that is not using native ESM if you if you are using native that's awesome good for you, but most of us probably aren't.

So we're either compiling our import statements to require or we're requiring writing require ourselves. And so if you want to start using packages that are built with native ESM, then you're going to need to do things a little bit differently. So you.Can't use an import statement in a common JS module.

So a non-ESM module. And so the only way to get a ESM module into your common JS module is by using a dynamic import statement, which looks like a function when you call import. It's an asynchronous operation, so you need to use asynchle weight. Luckily for us node version, or yeah recently at some point.

I think version 14, we know have support for root or or module async await. Unfortunately,That only works in native ESM modules So if you want to use a if you're writing a common JS module and you want to import a ESM module the only way to do it is to use a dynamic import and you have to it's asynch weight and so or or promise I guess.

And so, you have to write an async function to be able to import anything from ESM. There's I'm going to need to like write a blog post about this and stuff because there are a couple of interesting things here. It's going to be a little bit painful, but I think in the end we're all going to be much.

Better off just going full native ESM. I hope that's interesting. Bye.

Hey friends So today I'm going to talk about investing. And so, let's just like close your eyes maybe and imagine with me a graph of the stock price of any stock. Typically, it's going to have some ups and downs and things and let's say that the point at the end is at a certain level.

And I want you to imagine or to answer me the question. When would have been like thinking historically, when would have been a good time to buy the stock. And in your mind, you might be looking at some of the dips in the price of this stock.You and you might be thinking oh like very at the very beginning it would have been really good to buy the stock.

The answer that question is actually any point where the stock price is less than you think it's going to be in the future. That's the answer to this question. So when is it a good time to buy a stock? It's when you think the stock price is less than it is going to be in the future.

So the best time or a good time to buy this stock, you know, of course the best time to buy the stock would be at the very beginning, you know of any successful company the the very initial offering or whatever.But barring that when's a good time to buy the stock it's just any time you think that the price is lower than it's going to be in the future.

So, I think a lot of people make the mistake of looking at a stock price and be like, oh there's the dip that would have been an awesome time to buy the stock. Yeah probably but I mean when when you're talking about investing there there are two types of quote-unquote investors.

There's the investor that's doing high frequency trading and they're day trading they're looking at stock and hoping that it's going to go up in the next couple days, so they can sell or whatever.This isn't an investor. This is a gambler. And Gamblers they can make some they can lose some but they spend their lives just stressed over stock.

The other kind of investors an actual investor the person who researches a company has a good idea of what that company has to offer and what it's potential is and invest in that company for the long term. This is a type of investor that I am and I am I focus on a few select positions, so I companies that I think are going to do.

Really well in the future whether or not the stock is overpriced right now is totally irrelevant all in concern about is will that stock price go up. And and yeah, so don't worry about like stock prices going up and down. I'm just focus on is the the stock price lower than it's going to be in the future based on the research that I've done.

So I know that's not at all tech related but it was just something that I was thinking about I this is not investment advice whatever all that disclosure stuff but it's just kind of my,Thought process around investing. Hope that's useful. Have a wonderful day.

Hey friends so I was waiting in line for something and I needed to get this thing done so I can move on to my next thing so I wouldn't be late and whatever and there was just this big group of people in front of me that they were just taking a long time and they should have come earlier to do the thing that they were doing because they were gonna be late for what they were doing to and and so it was a little bit frustrating to me and I was part of me wanted to like say something I got or like can I cut in front of you because you know, I just,I'm mine's really quick or whatever but I realized that you know, I wanted to assert myself and be rude to generate like basically to save myself a few minutes it really wasn't a lot of time and it made me ponder a little bit on how how much time are you willing to give to a like to be rude and how much time does it take before you decide that it's better to be rude?

I'm now there of course sometimes where it like you, you know, you're it's spouses having a baby or something like they're you need to hurry up whatever but in general I think that it's just better to learn to be patient like if it's really just a matter of a few minutes and maybe you're gonna be a little bit late to a lunch or or some meeting or something, you know, is it really worth being rude or maybe cutting somebody off of driving unsafely or whatever just to save yourself a few minutes or be less late, you know, I,I that was just something that I was thinking about and I realized that typically I share on this three-minute podcast some of my thoughts on software development and the career thereof and whatever but I one of the things that I think is really important and actually was the first episode of three minutes with Kent was how important it is to be kind so you know is it my father-in-law I like to quote him saying is it more important to be a hard worker or to be smart and it's more important to be a hard worker and isn't more important to be a hard worker to be nice it's more important.

To be nice and I feel like that's a general principle that we should explore and a little bit in our lives and and try to emphasize being kind to other people. I have this laptop sticker on my laptop. I I'm very fond of stickers and I saw this on a youtubers laptop and I just had to find it and get it and so I did and it's actually it's a circle and it has Fred Rogers mr Rogers in there and it says the words be kind and I actually got two of them so that when I get my next laptop I make sure I have another one.

Of those I love it anyway. I hope that's helpful and interesting have a wonderfully.

Hey friends So today I was writing a blog post as I often do and I wanted to ask a question of some TypeScript folks always in the Tit script community and my question sparked a long discussion kind of argument between people about whether a assertion function is tricking the compiler if you're not throwing an error in the function.

So let me explain I actually recently wrote a blog post about the different function syntaxes that you have in TypeScript and one of the things that you can do is make an assertion.Function and basically what that does is you say, hey type script this function asserts that the given argument is of a certain type.

And so therefore you can do some type narrowing by calling that function. So say you've got a an array and you want to filter out anything that's not a number then you can write a filter function that asserts that things are or maybe rather not filtering out a number but you want to make sure that everything's a number and so if one of them isn't a number then you want to throw an error or something like that.

And so you can make a function that asserts that it's input is a number and if it's not then that won't be accepted and so what some people are arguing is it's totally fine to not actually throughout the error and just make an assertion function that that says that the types cannot be anything but a number.

But this one an individual is saying no that's tricking the compiler you need to make sure that you actually do throw an error if the type is not a number. So my opinion is I agree with that. I think that you should not be doing things with theCompiler that are basically saying hey type script my code does this but your code doesn't actually do that.

You're just tricking the compiler into thinking that your code does that so that you can make the compiler do what you want it to do. So basically, I want to make sure that the code that I end up shipping to the browser operates in the way that I'm telling TypeScript it's going to operate and if you're so like if you trust so much the compiler to make sure that your types are all correct and everything then you shouldn't ever run into the situation.

When you actually do throw because your type should be correct But if something weird happens, then you actually do want to have that that error thrown because unexpected things could happen down the line which could make things even worse. So I would really recommend that you don't try to trick the compiler when you tell type script a thing as of a certain type it better be of that type when you're making an assertion function, you better be doing some assertions.

I think that's important though. Anyway, I hope that's interesting. Have a wonderful awesome typescript.

Hey friends so today is office hour stay and I am answered a question on office hours that I thought I'd share with you and it's from Salem and the question was hey can't can you walk us through the process for when you get stuck on a problem and what I do is I try to find where the problem is.

I don't try to just do a bunch of random things and hope that one of them works or the solves a bug or whatever because what can happen is, you can implement the wrong solution in the right place and and move the problem andSo that you like you haven't actually saw the problem you just moved it somewhere else and now you think that you've solved the problem but you're gonna hear about this in the future and or like you might implement something wrong and and somebody else can create this problem all over again, so you need to understand why the problem exists as well as how you can avoid it in the future and then it can actually help to have a test in place to make sure that the problem doesn't show up again, so one thing that can be helpful is to write a test that that reproduces the problem first because that way like,You just have a much better iteration cycle on did I fix it no or yes or whatever but another really critical piece of this is to isolate that problem so remove as much as you can and the best way to do this is to reproduce it in a small isolated example, so try to take it outside of your app just install the dependencies that you know, you need or whatever bring in the code that you know, you need and reproduce it in that small example sometimes that's possible sometimes it's not but that's the best possible thing.

That you can do is to just remove as much as you can in a completely isolated example sometimes it's a very difficult so if you can't then the next best thing is to take your existing app where you're experiencing the problem and remove pieces of code until ultimately eventually you'll wind up with nothing on the page except the component that's giving you the headache or whatever the case may be or you're running only a single file on node that is causing the problem and and that can help you isolate the problem sometimes that's difficult and so especially when you're talking about like async stuff rate.

Conditions or whatever console logs can be really helpful in in those situations but yeah really finding where the problem is and if it's a regression then finding which commit caused the regression can also be quite helpful so doing a get bisect whether using the command or just doing it kind of by hand can also be really helpful in isolating the problem, so hopefully all that is helpful good luck to you in dealing with these types of problems, it's no fun, but I know you can do it have a great day.

Hey friends, so I want to talk about making processes not goals. So I noticed recently that I cannot stretch as much as I used to so I could try to put my hands down and try and touch my toes and I'm not even close and and and bothers me and I'd like to be able to be more flexible and my muscles are sore and stuff.

So I want to do more stretching. But I I have you know lived life for long enough and and made enough goals to realize that making goals with an end in themselves.Especially like big Harry audacious goals are it's it's difficult and and there's nothing wrong with setting your sights high on something that you want, but it can be overwhelming and often it leads me to just kind of giving up or just saying oh not today, like I'm having an off day or something.

But if instead if I focus on the process rather than the specific outcome, then it's a lot more straightforward. It's a lot easier. We often talk about like taking a big goal and making smaller goal.S but I think that if you can take a big goal something that you want to have accomplished like I want to have a job or I want you know, and often some of these goals are things that you can't make happen yourself like it depends on other people but anyway you take one of these big goals and you figure out a process that will get you to that goal.

So if you do a codecata every day, or if you do, you know, whatever it is, just like find something that you can do. So for me, I have this notebook that I keep in my pocket of all the things that I do or that I want to get done in the day.

And I look at it regularly throughout the day to remind myself of what I'm trying to accomplish for the day. And I put on their stretch and so every time I pull out my list I see stretching away. Oh, yeah, I need to stretch and so I'll just do a stretch for a couple minute or for, you know, a couple seconds like 30 seconds.

And I do that throughout the day and and this can become a process for me where ultimately by following the process and trusting in the process. I will have my ultimate goal, which is to be able to to stretch and feel comfortable andYeah and just not feel so tight all the time.

So anyway, I hope that's useful to you think about the like really big thing that you want to accomplish and instead of just thinking about it every single day and like I need to do things to get me there. Think about the process. Think about something that you can do that is simple that you can just make a regular thing that will ultimately get you to where you want to be.

I hope that's useful. Have a wonderful day.

https://github.com/chentsulin/awesome-react-renderer

Hey friends So today I want to tell you about this repo I found called Awesome React Renderer and I'll add a link to it in the notes here, but you know how you have the reactant module and then you have react on and then you have react native. Well, these are called renderers so react is responsible for creating the elements and stuff.

And then these different renderers are responsible for taking those elements when things are supposed to be rendered and showing it up in whatever environment that it's in whether that be in the web or if it's on an aided device or whereverWell it turns out that because of this plugal went nature people are able to innovate and do some really cool things with react and this repo lists a bunch of different custom renderers that people have built.

So you've got React dominant here, but you also have react to tiny dom which is a minimal implementation of React on using React Reconcilary, which is interesting. I'm not sure I'd recommend using it in production, but maybe there's yeah, there's tons of stuff in here you've got React Art React Canvas for rendering in Canvas popular one that you may be aware of.

Is react three fiber, which is for rendering to three JS so you can get some really awesome 3D stuff going on in the web, which I just think is so so cool. You may have heard of React to Native Dom which is supposed to allow you to have the same code run in the web as well as in native ends up being pretty cool.

I know a lot of people have used that. There's a reactive VR which is cool and that is actually like an official. React renderer for virtual reality.And then you also have desktop renderers So I'm just looking at the list and reading a couple of the interesting ones So we've got this proton native which is a reactive environment for cross-platform native desktop apps and you got a bunch of others here, we've got react native of course for mobile.

There's also a reactant native script and then command line interfaces we've got three of these react blessed and ink and react CLI I think I've heard a lot of good things about React blessed and ink before. So yeah, you can like render stuff to the terminal and have like kind of a UI in that terminal along with your seat.

Belies Very cool There's React TV for television There's React hardware, so you can interact with like maybe making hardware applications. It's just mind-blowing. There's one for email. There's one for working with PDFs and Word documents and stuff. There's one for music called Wax, which is kind of interesting. So anyway, there's just a ton of React Figma is in here.

You've got React Slack renderer and there was one that's a React AST, which is like mind-blowing very very interesting stuff. So definitely come take a look at this. It's fascinating what you can do.With React these days. I love it. Take care.

So I've been working with Remax for a little while and I'm still trying to learn enough about it that I can articulate my feelings on it really well because I know a lot of people are comparing it to next year yes and and likewise should I pay for something when there's a free option?

Trust me, this is gonna be huge and I'm super excited for when they do things to make it so people can try it out a little bit more. But as I was working with it, I,Am or just over the last few months that I've been working with it it embraces browser-level caching and CDN caching so naturally that this becomes really nice.

So when we're talking about like resources that can be cached heavily regardless of the user even with the user honestly like with user data one of the nice things about that sort of caching strategy is it means that?You can not be lazy but be more ambitious with the sorts of performance things that you're doing on the server.

And so like, for example, I had I'm able to have my blogs be built and calculated or like compiled from MDX on the fly because I know that the like things are going to be cash and no users actually going to have to wait for the time that it takes to compile on the flying.

And yeah, so it's really,Awesome that way like we don't have to worry about building ahead of time we can update the blog post and then have it immediately update the cache and and and no users have to wait or anything. There's actually a really great video that Ryan Florence put together on the remix channel on YouTube talking about caching and you should definitely go look that up but being able to just say I'm gonna do this performance intensive thing or maybe not even like perform or like computationally expensive butWe have to like hit the network and go get this and whatever, I don't care how long it takes because none of my users is gonna feel that I'm going to hit it first as part of my build problem or part of my deployment process or my cash invalidation strategy and so I'll hit it first.

I'll make sure that the cash is updated before any users even and know that the cash risk changed. I'm really looking forward to being able to actually demo some of this stuff. Remix is amazing. I can't wait for you all to see this stuff that I'm thinking about doing with my web.

Site with it. It's gonna be awesome. Okay, hope that's useful in interesting have a wonderful day.

Hey friends So today I just want to talk about password managers really quick So like, this is gonna be pretty short but I just wanted to beg you for all that is good in the world. Please use a password manager. I use one password. I've been using it for a few years and I love it.

I can't even imagine my life without this. Especially with my wife and I who we share a lot of logins for like our insurance and stuff like that, like I just can't even imagine having to manage that between the two of us. We used to have like a little algorithm to generate the password based on the service.

It's so like it that we just memorized it was no good. Use a password manager. Now one thing that I wanted to mention about password managers is like one password is you can actually save your one-time passwords or like your two-factor authentication stuff within one password. And that sort of defeats the purpose of QFA but not exactly I'm actually fine.

I putting it directly in one password. It's it is so easy. It's actually makes two factor authentication just like dead simple. And if you have a secure enough password for your,One password then not even one password could get into that. Like it's it is really encrypted and and secure.

I I'm not afraid of losing access or losing or having my one password credentials hacked or anything like that. I'm really confident in that. And so given that I am all for the convenience that that storing these passwords in one password along with the two-factor authentication codes and just makes it so easy.

Man, I love it. I love it. It's so awesome.Definitely if you are not using a password manager seriously like you think that it's gonna be a lot of work and it will but it's something you can do over time and you will thank yourself over and over and you'll maybe maybe you'll thank me.

If you're not using a password manager right now, then shoot me a message and ask me or and like after you've started using it and say thanks can't because you will. It is so great. All right, hopefully that is helpful have a wonderful password manager day and we'll talk to you later.

Bye.

Yesterday I taught my son Sudoku because he told me that he enjoys math games which was you know, exciting for me to hear and so he yeah, we we just had some sudoku puzzles that I'd printed and laying around and so my wife was working on one and and I was working on one and we were just talking about how we solved Sudoku puzzles and I just mentioned that I pretty much just go with very methodically and I was I was explaining a very methodical process for solving these puzzles and maybe it's not the fastest or anything.

I don't really take notes or any.Like write the numbers and or any you know, the possible numbers it could be whatever I just go yeah just think about okay can this number be here no it can't okay let's just move on to the next thing and and eventually you get the whole thing filled out and it works out pretty well and I was just thinking about that and how we do the same thing or I find the most effective thing for me when I'm debugging is to be very methodical about it and and trial and error and and mostly like I find that most.

Effective when I troubleshoot in such a way that makes the as few changes as possible and then sees what impact that may makes and then slowly we get closer and closer to the part of the code that where the bug resides in rather than just making a ton of changes and you know shot in the dark and hope that and that things work when I was early in my career, I really spent a lot of time just changing all sorts of things in the hopes that one of those things would fix the problem and what happens when you do that is you.

Change a bunch of things and and sometimes the changes that you make are sub-optimal but you're just like doing your best try to figure out what the problem is and so if you make a bunch of sub-optimal changes and one of those fixes the problem, then you may not actually go back and fix all those sub-optimal changes that you made you just may end up shipping a bunch of stuff optimal things leading to the potential for more bugs in the future and completely different ones potentially and so being very focused when you're debugging and just change one thing and then see if that works and ifIt doesn't then then move on to the next and another thing that just for some reason I was just thinking about is trying to find where the last time in place where the code was working properly if this is like a regression or something can be really helpful to so as your debugging be very methodical about it just go step by step and and don't skip or don't try to do a bunch of things at once and and hopefully you figure out what the actual problem is so that you can have a better solution for that anyway hope that's awful have a wonderful.

Thing bye.

Hey friends so I'm rendering a blog post today and I learned to something that, I thought you might find interesting. I'm not specifically the thing that I learned but just the thing that I learned about when you're trying to teach something. Anyway, so the if you're entering something new you're getting into a new space and and there are a lot of things that seem similar to you and you're like, I don't know what to use this or that or whatever and they just seem like they satisfied same use cases.

It can be really useful to list out and kind of try to categorize all of those.At a different use cases or the different things that seem similar So specifically I'm talking about functions with type script. Now with regular JavaScript, there are lots of different ways to write functions, you've got properties on objects, you have methods on objects you have class methods.

You have arrow functions. You have function declarations and expressions and so there are a lot of different ways to write functions and then you add typescript on top of that and you can write a typing for a function and then you can add that as an annotation on a function expression.

Lots of different ways to.Type these things too And so it was just kind of boggling my mind and so I'm just listing them all out here are all the different ways to write functions and type script. And I'm learning that there are certain realizations that kind of come upon you as you're listening these things out.

Some things that you hadn't really considered and you get a better understanding or at least I'm getting a better understanding of when these different things are necessary or useful and then when you're all done, you have a reference to to go luck and you say, oh I need to do this.

I remember that's like one of the ways that I read.A function whatever so I'll just go look at that reference that I wrote And there may be references sort of like this in existence In fact, I'm looking at the TypeScript Docs right now that talk about functions and it does have some of the stuff but writing it yourself you you come up with your own examples and and you think about things done a little different way.

It just there's something to be said about the process of creating this content that helps you really solidify it a lot better. So that's what I would suggest to you if you're entering something new or maybe even something old I've been using TypeScript for a lot.Of time. This is always bugged me.

So you're just like not super solid on something especially when there multiple ways to do the same thing and you're not sure about the use cases for those different ways. Try to list them out and you could do this in a box post or just in your own notes, but try to list out all of the different ways to do the same thing and you'll learn different things about them.

I hope that's helpful and I hope you have a fabulous awesome day Ciao.

Hey friends. So in the three minutes podcast channel on the KCD Community on Discord, I got a question from Sandrina about any tips for switching from working in the office to working remotely. And I made that switch several years ago. I when I was working at Alianza, I worked from home a couple days out of the week sometimes and and then when I worked at PayPal part of the the deal was I didn't want to move to California and so,They said okay we can have you work remotely I was joining a team that was halfway remote anyway and so it ended up working out nicely that way that wasn't a very normal thing to do and Sundrino also mentions that like a lot of people are kind of being forced into this remote environment and so it makes things a little challenging so just to some tips for me on working remote since I've been doing it for like five years now maybe more.

I think one of the things that,Helps me the most is being able to have a designated space. I do have an office but I don't think you need an office for this to be successful. So you have a special place that is just for work and when you're there you're working because one of the big challenges with working from home is there's not really a separation between life and work.

It's all just kind of been in the same space. And so, it can be hard to stop working or hard to start working. And so having a special place that you say,Okay when I'm in this position or in this spot of my home that is working time. And when I leave this spot that is done with working time.

That helps a great deal. I have four children and so that can be a challenge. My wife is a full-time mom and so she's able to take care of the kids, but of course the kids want to interrupt me throughout the day to show me stuff and I'm more than happy to be interrupted by them when I'm able just like when you're in an office, you get interrupted by coworkers all the time telling you about like what happened in the soccer game.

Or whatever like different things that may or may not be relevant to your actually work, and I see my kids interruptions as basically the same thing except. I actually care about them. I of course, I care about my coworkers, but I love my kids. So it's different. So, I don't stress over those interruptions.

And in general, they're pretty respectful. If if they weren't like if my family wasn't respectful my work time, then I would need to have a conversation with them about that and it does take a bit of a team effort. So if you're family isn't being respectful of your work time, then have aConversation make that work.

All right, good luck.

https://writingexcuses.com/2021/02/21/16-8-smart-promotion/

Hey friends. So some of you may not know this but I am a hobbyist novel writer and I listen every week to a 15-minute podcast. Well, it actually they end up talking for like 25 minutes normally but they call it the 15 minutes long because you're in a hurry and we're not that smart but the episode for this last Sunday was episode 8 of season 16 and it's titled Smart Promotion and they're talking about promoting yourself as an author but I thought some of the things that they talk about in here.

Are really really applicable to promoting yourself as a software engineer. And this isn't only if you want to be like a content creative or like me or anything like that, but just in general, how do you promote yourself so that you can have the flexibility and power to do the things do the work that you want to do?

And that's all I wanted to share today is going to be a quick one. So, I'll provide a link to this episode in in the notes for this episode of three minutes we can't but yeah, so,I really want to convince you to listen to this so, I'll just read the background here so it says let's talk about how to promote yourself and your work and how to do it well.

The tools we use for this continue to involve and in this discussion discussion, we'll cover things that have worked things that have stopped working things we use now and strategies we apply to not sync beneath the turning disruptions and demick to promoting books or really anything else. And that last bit or really anything else seriously this is just a really great short.

Podcast episode that I strongly advise that you give some time to listening to because it's really solid advice. Yeah, it's 24 minutes long. So give this a listen and you won't regret it. And yeah, I hope that's helpful and useful to you have a glorious day and we'll chat with you later.

Hey there friends. So this is another one of those computer science topics in the real world. So the other day I was picking up my son from school and they have this the very efficient system for picking up kids because it and they don't have school bus or anything.

So everybody's picking up their kids at the same time. And so they have to be efficient. And so you put this number on your car and like windshield so that they know and then they look it up in their phone and and send a message to let that kid.

Know it's their turn to come out for their parents. And my son who was with me the other another son who I wasn't picking up but he was in the car with me any said, why did you like what how does Nathan know when to come out and I said well we have this number and that's on my on the car and and they look at that up and some sort of spreadsheet or an app on their phone or something and then they send that number over to the people who tell the kids that it's time for.

Them to go. And and I realize that that's very much like DNS. So we have it except sort of in the reverse. So where it's easier for us to do a number because then they don't have to like we don't have to tell them or they don't have to read the name and then misread it or something a number is just easier for them.

But it's like the opposite of DNS where we take a URL or a domain and so like Google.com or or something. And and we look it up in a table that have.As that domain name associated to a specific IP address. And and once you identify that IP address then the packets and everything on the network can go find the server that respond or that is assigned to that IP address.

And yeah that was just kind of an interesting interesting thing we just found it inefficient way to pick up our kids by using reverse DNS where we give a number and that maps to a person. So anyway,Just thought that was kind of interesting and if you don't know about DNS that's something that can be useful to know about.

So go give that a look. In fact, I'll just check really quick as MDN have an article MDN is just awesome about these sorts of topics. So let me see if they they do have a web docs glossary and they have just a very short thing on DNS, but it also has some links to to other articles and things that you can go look it up.

So yeah, look at the MTN web docs. Okay, take care bye.

https://kcd.im/meetups

Hey friends, sorry that I didn't get one of these recorded yesterday was just busy I guess but today I want to tell you about this new thing that I worked on this last few days called Meetups so you probably know what a meetup is or like what we typically think of where people meet up and and talk about a specific subject but I was intrigued by the app clubhouse that's been hyping up recently and the just the idea of getting people together to talk about things audibly and,I realized that like compounds doesn't do a whole lot more than what I have in my discord, but there are some things that I can do with my bot to facilitate that sort of experience for people more frequently and so I decided to work on that and that's what we're calling meetups and so meetups are like the the goal is to help develop friendships within the community to make the world a more pleasant place for all of us, so that's the basic idea, but what you can use meetups for is basically boundless so long as you're following the code of conduct you can.

Talk about anything you could play a game together you could collaborate on a solution like mob programming or you could practice a talk or you could talk about a movie or a book or give a demo of your work or chat about world events or whatever else you could imagine and that's kind of the idea is that it's totally open-ended in the KCD discord.

I have my office hours. I also live stream there and it kind of felt weird because the KCD discord is more than just KCD it's there's so many people in there in fact. I'm not even the one who's sending the most messages on there anymore.Um and so it just felt kind of odd to have a special place for me and not for everybody else and so now my office hours and my live stuff are just meetups and anybody else in the whole community can do that same thing if they want to and just using the regular meetup command so I just introduced it today.

I just made a video that I'll link you to that you can go watch and see kind of a demo of what meetups are and how the bot works with it and I'd love for you to go try it if nothing else you can at least go and follow me.

Using the follow me channel on discord so that you can be notified when I start I start a meet up and you can join me whenever you're available it's kind of fun and I hope you find it interesting and really I just want to connect people especially during this time where we're not really as connected we don't just like meet people randomly this hopefully can be a place where we can connect more with humans so anyway.

I hope that's helpful and I will see you all in the future goodbye.

https://mdn.io

Hey there so today I wrote my blog post and in the process of doing that I realized that I was doing something kind of weird. So, I have this project that's the KCD discord bot and the bot is responsible for a whole bunch of things that happen on my discord and it's awesome.

You'll meet the bot the it's the first thing that you experience when you join the discord because you can't join the discord without answering the bots questions. So I was making some changes to it and I in writing my blog anytime I write my blog. I'm always going to be writing about something that I'm working on recently or something.

I've been.Thinking about a lot recently or whatever. And so I found some code that I'd written in the bot and for a listifying an array of elements for display. So you'd say, you know, we have a thanks command so you can think a list of developers for a specific thing and we want to have the bot say thank you these list of developers for or these list of people for this thing.

So you have to have the common the right place you need to and whatever. And so I decided hey, I'll just explain how I wrote this because it was using a reduced and it was.Actually really interesting and good use case for reduced because the doing the same thing with a for loop was kind of more complicated.

And so I was writing it and then I remembered oh yeah, there's like a built-in thing and in the in toll library built into JavaScript for formatting a list. And I think I probably used that or at least explain that and then explain why I needed to write this thing myself.

And as I was writing the blog post, I realized I didn't need to write the listified function myself or at least I didn't need to write the inner workings of it. I could just wrap theList format utility that's built into the Intel API in JavaScript. And so, I I tried that out and it ended up working and so what I wanted to share with you today was that sometimes you might be doing more work than you need to because the platform already gives you a lot of really interesting things and especially the Intel API has a lot to offer that I find myself and others re-implementing like when it comes to dates and stuff like that too like formatting things for display is a lot of what the Intel API.

Allows you to do So that would be something to go give a look at it's kind of interesting and yeah, sometimes the platform is lacking in certain ways but often like this is platform that we build on is pretty capable and there are a lot of really cool things that it can do and spending some time on MDN is a good use of your time.

So next time you're stuck in a checkout line or something if you do that thing during coffee I guess but next time you're you're stuck in a line or or just waiting for something go check out FDN and look up some stuff you haven't learned before. It's aGood spot.

See ya.

Hey there friends. I'm just out doing some shopping and I thought I'd record today so right now I just want to talk about MDX Bundler. This is a open source library that I just created. Yeah a couple days ago and it's pretty cool. Basically a lot of packages and things that you have for compiling MDX.

Oh actually if you have never heard of MDX, it's like marked down except it allows you to import react components and render those and what's awesome about that does it means that you.Get all the benefits of easy content creation and and management with markdown because it's just such a nice syntax for that.

But then you get all of the flexibility of react components and so you can have really cool demos and things that are kind of interleaved with all the content that you've got. So MDX Bundler.Is kind of unique because it enables you to bundle all the dependencies for a particular post because what with MDX what you're looking at is actually like JavaScript.

That's what it needs to get compiled into. And JavaScript often has to benefit. So, of course, it'll have react as it dependency because this it's going to render react components. But then like maybe you're rendering a D3 chart and so then you've got D3 in there, and maybe you're using some sort of library to like load ash or something like that.

So you've got,Dependencies and most MDX compilers won't handle those. But like, I mean, you've got Gatsby and everything and next like pretty much everywhere it ends up being put together in tandem with a another framework or something but this is totally meta framework agnostic where you're able to have it generate the code and you have control over whether certain things are considered global variables or whatever and so you generate this code either during build time or on the server you send that to your client or even ifIt's server side rendered then you'd send it to the client which is being rendered on the server.

And and then you'd provide any of those libraries as quote unquote global variables. They're not actually globally because you're actually passing them as variables. Anyway, the example in the readme is a pretty straightforward hopefully so if if that didn't make any sense you can go take a look at that.

But I'm excited about NDX Bendler. I'm gonna be using it for my blog that I'm rebuilding in Remix and it just makes things really quite nice.Actually. So go ahead and give that a look. It's MDX Bundler on my github, and I hope that's interesting. Bye.

Hey there friends. So today I want to talk with you about Typescript. So my friend Tanner Lindsley was tweeting about how it's kind of frustrating. He's been into typescript for the last few months doing some open source stuff and and if you've never written like a generic abstraction in TypeScript like a library or something then you may not know that Apple type script is way way easier than library type script.

Making something.Eric and and can handle all sorts of different use cases and stuff in TypeScript is very very very difficult and that's not to you know, not or under appreciate the difficulty of just type script in general, but library type script is just very much harder in general not not always been in general.

So he's just been kind of frustrated and I definitely can relate to this frustration because most of the TypeScript that I have written has also been library level type script and it is frustrating.Especially for people like tenor and me who've been doing JavaScript for quite some time and we feel pretty confident with it.

It can be really frustrating when like you feel like you have to relearn everything. In fact, I've been doing a lot of snowboarding and I decided to get a private lesson and I knew that I developed a bunch of bad habits and stuff but man, it was it's just really frustrating when I feel really proficient as a snow border, but then I have to break all these bad habits and so I end up being a worse.

Snowboarder for a while while I'm learning the right way to snowboard efficiently. And I think it's sort of the same as same sort of feeling that Tanner and I are having around typescript and and what I want the reason I wanted to bring this up today was often you are really comfortable and the framework that you're using or the the tools or technologies that you're using in your day to day job.

And occasionally, you have to jump into something new and new is not necessarily bad.But it does mean that you're going to slow down for a little bit and you have to be really patient with yourself when you do this. Otherwise you can just be a very frustrating experience and I think most of us have probably had an experience like this before but what I would suggest is if the goal is worthwhile then stick to it and you know find people to talk with about your frustrations because maybe that that can help but if it's a worthy goal then stick to it just power through and eventually you'llDevelop the experience that you're hoping for.

Good luck.

https://twitter.com/DavidKPiano/status/1361353521648590853?s=19

What up folks Happy President's Day for those in the US I wanted to talk about this tweet that I saw from David K. Piano that's his Twitter handle his last name is Korshid and the tweet is can we stop with the myth that more code means more complexity? Sometimes less code means more edge casings ignored which means willfully and dangerously ignoring complexity not reducing it.

And he gives some a sample of some simple code that just awaits fetch from API and then returns the data and it's saying here are some of the ignored.Complexity error handling data validation timeout handling cancellation interruption, etc. I super duper agree with David here and I very often will have people ask me about the complexity of some code because there's a lot of it.

And the code that they're talking about is maybe some class name for tailwind, you know, a tailwind has tons of class names or maybe they're talking about inline styles with the CSS prop or sorry CSS and JS or like maybe they're talking about.JSX and this component just has like 200 lines of JSX or something.

Whatever the case may be the number of lines of code is maybe correlated but not necessarily correlated even with the amount of complexity. You could have a list of all the countries in the United States. And now that would be that would be represented by a lot of lines of code.

Sorry, did I say all the countries? I meant, like all the cities in the United States. That would be a lot of code but it would not be complex.At all. So the there's a very subtle if any relationship between the amount of code and the complexity thereof and I think that it's an important thing to to keep in mind.

So just because there's a lot of code doesn't mean that this is going to be a maintainability nightmare or it's going to be complex. I actually find that prematurely abstracting some of that stuff because you think it's complex can make things even more complex, for example, if you have a I don't know some like tons of.

TSS or something like that CSS like class names or something you try to abstract that away with some fancy higher order component or something then that would be even worse. Or if you like have a bunch of JSX and then you wind up trying to like extract these into little components then now you have to worry about passing props and everything and that just increases the complexity.

Now, I'm not saying that's always the case but just keep that in mind. There's not necessarily relationship between the amount of code and how complex that code is. I hope that's helpful. I have an awesome day. Goodbye.

Code comments, they're important you need to have them but what you say in the code comment is important so I worked at a place where we were starting to transition to ES6 and you know from using var to constant lead and you know all the new cool features, you know, JavaScript and gotten a lot of new and interesting things in a long time and so we're all starting to use these new things and I saw a lot of comments from some of my coworkers about like basically describing what the syntax.

Was doing because it was unfamiliar done oh so that was I was installing with NPM and so in the in the code you would just find all sorts of places where just described what the syntax was doing because we were we weren't used to it. I never wrote those comments because those comments were not really helpful and I would not recommend to anybody write those kinds of comments and like you could do the same thing for APIs to libraries that that you're using that you're not used to like or you know, you could say,Maybe you have a function component that returns null you could add a comment that says you when you return no it doesn't render anything, you know, like you just go forever on code comments so it comes down to what is the code comment actually telling and what's useful about it and yeah like there there's a difference between a code comment that says what you and you're doing and it could comment that says why you're doing it and that's what you really should be focusing on is what you're doing if it needs to be explained then you should be doing what you're doing a little differently.

Because code comment won't necessarily make it any easier to understand so yeah, if if your code comment is just saying this assigns the variable root to the string hello world like that is not gonna be at all useful but you could explain why you're doing that now you say well our back end expects us to send a hello world string because of this weird historical fact something that somebody couldn't just Google and figure out you know, what it's going on, you know, what with?

With syntax that's something people can figure out but when it comes to like business domain specific things that's the sort of thing that you want to write a code comment about it's especially useful when you're default like what you would expect somebody to do would be X but you can't do that for reason why and so then you explain why you're doing something that may not be what people would expect you to be due doing that's what could comments are for it's to explain why you're doing something that may be unexpected.

I hope that's useful have.A wonderful day.

Hey friends I've just been thinking a lot about remix recently, so if you haven't heard of remix this that's what I want to tell you about just to try and convince you to go give it a serious look so remakes is a react framework that is both server side and client side it's a lot of people compare it to next but it's pretty fundamentally different from the way that next operates it is file system based routing though, there is a imperative API that you can use to declare routes programming programmatically, but what?

Makes remix really special is it's embracing of the web platform and not just brand new features though, it does leverage newer features and things and take advantage of those when they're available but also like age-old features like http caching very heavily and gives you just really nice APIs for that sort of thing and I'm like resource preloading and prefetching a lot of really really cool things.

Frankly that we reached for or we were excited about suspense for so like react suspense we're trying to optimize for loading resources and preloading them and whatever remix has like solves pretty much all the same problems and it's built in and it works for the first initial load where suspense can't help you with any of that stuff you have to get suspense into the browser before it can do anything to help you so yeah anyway, I'm just super impressed by what remix has to offer and what's cool is I've talked with Ryan Florence about this.

Right so remix has created by Ryan Florence and Michael Jackson's Jackson the creator creators of Reactor and Ryan has told me that their plan is to put a lot of what is in remakes into react router and there will be plenty of stuff that's in remix to like all the build and the file system stuff and whatever but a lot of the really cool features that I I'm personally really enjoying will be a part of React router and so I think that that's gonna be pretty legit we'll look forward to.

An official release of reactive router V6, you know nested routing oh it's awesome yeah lots of really cool things coming to react around her but in general remix will wire things together for us really nicely to make some really fantastic user experiences and just with a really great developer experience so I would encourage you to take a look at remix maybe you don't have to buy a license right away but like go to check out the YouTube channel and watch a couple videos, it's awesome take care.

Yeah.

Hey folks I know it's a little bit noisy I'm in my car with the fans on because it's cold I just wanted to mention something that I thought was going to interesting. I was just thinking about how sometimes we argue about taking it technological choices, like what framework we use whatever and I thought of a kind of a real world situation that is kind of like this and let's say that you're talking to somebody and they're talking about how much they love their truck and and it's just the best and they can do anything they want to with it, you know, like what the like whatever I my sudan is amazing theKnowledge all this stuff is amazing like it's does everything that I need to and you can like argue and argue all day long about why you're sedan is better your hatchback or you're or the track or whatever but at the end of the day these things serve different and use cases for different people and so just like there's no one vehicle that can solve everybody's problems and there's no one JavaScript framework or it's tool or technology that can solve everyone's problems either it is a vast world of use cases and user experience that we're trying.

To create and whatever it's just there's so much out there that we're trying to accomplish with the web and with software in general that there can't be a silver bullet for for everything that you could possibly imagine so and keep that in mind next time you are talking with people about different things.

I know sometimes I can be a little dogmatic on certain of my opinions. I kept like especially shallow rendering you should never shallower but um, most of the time there are nuances and trade-offs that were all making and we're all just trying to get.Hit by and do our best to avoid you know doing the wrong thing making the wrong choice but also make sure that we're you know, and doing the best that we can and keep keep those trade offs in mind and the fact that your problems may not be in line with someone else's problems, you may have different problems from another person maybe you don't need to haul number and maybe they do and that's why they like their truck, you know, whatever the occasion maybe so anyway, especially when you're having these kinds of conversations that people be sure.

To be nice to each other and yeah and just keep in mind that your problems may not be their problems. Cheers.

What is up my friends all right, so today I wanted to talk about investing the time at the right and appropriate time so I actually talked with my friend Jacob about this and yo-yo Jacob if you're listening and just in general we're talking about you have this really big plan for a big and exciting thing and you want to like create a business out of it or you want to build a whole new application or something like that and so you have these really giant plans what I want to tell you is try to.

Avoid doing as much work as possible and like sorry let me say that again try to avoid solving problems that you don't yet have but thank you will so you have really have to have a compelling reason to solve a problem that you think you're going to have rather than solving problems that you know that you have right now so let me give you example of this my sister about a year ago when covet started she is a violinist she's very good and she all of her violinist friends were just not doing great becauseCovid and everything just messed up their lives and so she had this idea that she could make an app that would enable violin professionals to teach online and she done a lot of research and everything said there wasn't anything quite like what she was thinking and so she wanted to hire a developer to build something for her she basically wanted an app that was like zoom and Tito for the ticketing and like had all of these things built in as.

You know an app and it would be a really cool thing potentially and so she was ready to like go go hire an engineer paid hundreds of thousands of dollars to make this dream of hers a reality probably more is what it would end up costing and I and she asked me because I'm a developer and so I could tell her about some of that aspect of stuff and I told her hey, it's great that you think this is gonna be so awesome and it probably like a very much could be awesome but really really try to avoid.

Doing all of this stuff until you're like solving all these problems until you're certain that you know what the problems are because often you'll get into things and you'll just you think that you know what promise you need solve okay, we need this feature in that feature in that feature and then by the time you're done you find out that you're no longer into it at all and so you don't even need the solutions in the first place or you misunderstood the problem and so the solution doesn't fit the problem yeah that I maybe need a little bit more time to talk about this but yeah just avoid like I don't own any domains for apps that I haven't built I built the app first then I buy the domain.

Yeah take that and run with it good luck see you later.

Hey folks a common question that I get about testing and especially since react testing library or testing library in general you query the DOM by giving it the text that you're looking for so you say hey I want to get a button and it's accessible name is submit. And so the comment question that I get is well that must not work for internationalized websites that's probably just for like little toy apps or internal apps or whatever where you don't have any internationalization going on, no different languages because the word submit in English is not the same as it is in French orWhatever.

So yeah, this is a really common question and what my answer is. Well, just use the default language. So if you're agency in Spain and so most of your websites your default language is Spanish then write the tests using the Spanish text and you when you run the test make sure that the all the languages and stuff are accessible to the tests so that when the components are rendered and the actual default language text is there and you can query off of it.

And,So then the next question is well, okay, but I'm not managing the those strings myself. We've got a an internationalization team or we've got somebody responsible for managing that content and I just put in the IDs and that's not my responsibility and so the problem there is okay, so now my the localization team is it's possible for them to break my tests.

And so my response to that is well, okay, so let's say that you're testing the login form and you're accepting the username and password and then,It comes around and changes that content on you as you propose they can and they change it to email and password instead. Well in that situation, I'd actually be glad for my test to fail and catch that and and notify me that this change was made because I don't want the content editors to make a change like that without me giving that go ahead because I'm going to need to change my implementation.

If we change from username to email well now I'm going to need to change maybe even the back end on how we store this invalidate this and also on the front.End as well So I I don't really worry too much about that Now let's say that it's something innocuous like who we don't know it's it's just two ways of saying the same thing they change it to the other way.

If that does happen, then it is going to break and and it's not going to actually be a problem for the user. So that'll be annoying but those sorts of things are super easy to go and fix. You know exactly what went wrong with the error messages that you get and you can go back and fix it and and then move forward.

So, I suggest just use the regular text and it's it use the default text.And it's pretty straightforward to do that. Good luck.

Hey friends so I got a question on discord from somebody who asked effectively is it okay to put async away on a function that doesn't need it and you can get useless rules that will prevent this. I think I have the enabled because I don't typically want to do this but there are situations sometimes where you want to start with an API that isn't asynchronous now but you're pretty confident that it's going to be asynchronous in the future and it's just easier.

To plan with that asynchrony from the get-go rather than try to retrofit everything to work with asynchrony in the future and so yes, it's I think it's acceptable and it's okay to make something async when it doesn't need to be and you just have to be aware that any consumer is going to have to consume an async API rather than a synchronous one and you'll have to consider the fact that because it's async it it is like as soon as you attach that async keyword onto the function onto the function keyword like right in front of that function keyword or in front of theParentheses if you're doing an arrow function whatever as soon as you put that async keyword on there it immediately means that no matter what the function does it's returning a promise and the any consuming code cannot proceed until the next tick of the event loop, you know, I'm talking about like if the consuming code is using async away if it's using promises with dot then then the the success handler of that promise is going to run on the next tick of the event loop and so that means that just has some interesting implications around you know closures andStillness and but in in practice that's not normally going to be too much of an issue so I would say that yeah it's okay to put async on a function that doesn't need it but I wouldn't do it for no reason so like there would need to be an explanation and in a code base where you have coworkers who are going to look at this code and and even yourself who's going to look at this code in the future, it would be useful for you to write a code comment to explain why you're doing this so that people don't remove it and then accidentally break some consuming code because you're not using type script, for example.

If you're using textcript then you know, maybe it's okay, but anyway, I hope that is useful to you and I hope that you had a marvelous day in that or that you're going to whenever this is, you know, good afternoon good evening tonight. Truman shows now and I'll talk to you later bye.

Hey there friend so today I want to talk to you about my transparency page. So I just added a new page to my website can't see Dodds.com slash transparency and I created this website or this page after I was thinking about something over the last few days about actually started with clubhouse.

So actually, you know, what even before Covas I've always really been concerned about the incentives of companies. And how messed up incentives can give us companies that will pollute the planet and sell users.Data And so if you have the right incentives and you know like for example a company that includes the planet needs to pay for the cost of cleaning that pollution up if that were to be the case then we would not have nearly the problem that we have now.

And so just getting an incentives aligned in in the right way can solve a lot of problems. However regulation isn't there yet and and I don't know if it ever will be and I'm not here to talk about politics or anything. But incentives are important and so as consumers we should be thinking about theIncentives of the companies that we consume or the companies that we support.

And so with clubhouse recently I was thinking about well, we don't know how they make money and so I'm unsure whether I want to really support them because we don't know how they make money. I realize that I do interact on Twitter and they make the way they make their money is something.

I don't necessarily agree with either but that's a decide the point. Anyway, I'm interested in.In understanding at least where companies make money and I feel like and this is what I tweeted the other day I feel like every company should have a page that describes how they make money and if they don't make money yet and they're just like burning through VC funds or something then they should explain what they what their plan is for making money eventually and if they don't know then they should at least tell us whether they're going to turn their users into the product or if they're going to sell a product to their users.

And so as I was thinking about this and I said, every company should have a page like this, I realize oh I have a company. I guess I could make aA page like this and so I did and this that's what the transparency pages. It's all about helping you get an idea of what my incentives are.

So that when you're supporting me you understand where what you are actually supporting. And so go ahead and go take a look at it. I also break down like where my money comes from who pays for the things that I'm selling and and then what I do with that money as well.

So go ahead and take a look at that page and I hope you have a spectacular awesome day. Bye.

Hey friends. So today I wanted to talk about looping over a raise and stuff like that. And pretty much I'm mostly want to talk about for loops. Early on in my software developer career that's pretty much exclusively how I looked over things and I learned about filter and map and reduced and all of those things and for each and all that and I went full in on that stuff.

More recently, I've been getting into using four of loops for stuff. And I find that to work out really nicely.To the point where I don't think you'll ever ever catch me use a for each on an array anymore I and like I can't think of a scenario where that would be more simple than just doing a four of loop.

With potentially the exception of you've got a function over here already to find and you're just gonna pass it as the argument to for each. Maybe that I guess could make sense but most of the time I'm just gonna be using a forever. So anyway, I Yeah, I don't really have much more to say about that.

It's just kind of.Something interesting to think about and I do have a blog post actually about using map and filter versus reduce and a regular old sea style loop where you have the index and everything like that. And so you could go take a look at that if you're interested in diving little deeper, it even has an egg-head video on there.

But yeah, just look at my blog look for reduce or filter. You'll find it on there. But yeah, I find myself like early on. I used those sea style loops and,Then and full on a raise and now I'm kind of yeah between array methods, sometimes I'll use reduced but not often I'm mostly on filter and map.

If I really need performance gains of using reduced then I'll go with that just fine but anyway hope that is interesting and useful and insightful. If you haven't been using four ofs and you've been finding you're using for each then yeah, go ahead and give a four of trying they're pretty great.

Thanks bye.

Hey there friend so today I wanted to talk about something that I've been thinking about a little bit and it is client side routing. So Ryan Florence actually tweeted about this. I think like a year ago or something and and I talked about it recently on a podcast that I was on I think Dev mode FM or something.

But yeah his tweet was basically like I kind of feel like client side routing is a mistake and we're better off with like actually going to get the document on it, you know, full-page refresh basically on every page. AndI I've talked with Ryan Florence about this quite a bit.

And here are just some thoughts that I have about it. And I kind of agree with him sort of. So basically what what I'm thinking is that with client side routing by default or let's take a step back. So like before client side routing goes the thing you'd find a link on the page you'd click on that link and then you would see like the browser would give you some indication that something's happening.

So you'd get the spinner at the top where the favicon is and you'd get.Like some information on the bottom typically telling you that you're waiting on a particular resource and then while that's happening you actually still get to see the page that you were on before. So you still may be able to make use of that information or something or notice something or whatever.

And then when we move to client side routing then pretty often what happens is you click on the link and you immediately navigate to the page that you're going to and then you see a bunch of spinners all over the place. Or even worse you don't see spinners andYou just you land on the page and then things pop into place as they become available and that typically will happen when the developer who worked on the page was on a really fast internet connection just didn't really consider what a loading experience would be like.

And in fact, very very often our designers don't design loading experiences. And so we have to be explicit about it. And so what's interesting is that the the default behavior gives you all the right affordances for the loading state. And when you go to client side routing,You have to opt into giving those affordances so there's some indication that a loading state is showing it's something is loading and you have to worry about when things load and when things pop into place and stuff and so yeah, it's it's a little bit of a step back maybe you just have to be a lot more intentional and so maybe the default of having it do a full page refresh essentially is an entirely a bad one from that perspective and then when you go to client side routing, you just really have to think about those things.

So anyway, just some thoughts hopefully,

https://kentcdodds.com/discord

Hey there friends I want to make an invitation to you So yeah you're not gonna learn a whole lot in this one. Feel free to skip if you want but my invitation is I opened a well reopened channel on my discord you can find it at Kensie dots.com slash discord and that channel is three minutes with Kent and so that's a place for you to discuss the episodes but more importantly in the reason I'm bringing it up is it's a place for you to ask for particular episodes so you can ask questions or you can say hey, what do you think about this or whatever you want to andHopefully my answer can be within three minutes if it can't then or you have like, hey I have a block of code that I want you to review or something like that.

If that's a case then you can actually come to my office hours which you'll find at Kensington / office hyphen hours. In any case, yeah, I just invite you to come to my discord. It's a fun community, we're awesome. It's a great. I prefer hanging out on Discord way more than I like hanging out on Twitter.

And so yeah, it's a fun place and there's a special channel the three minutes with Kent channel where you can.Talk about different episodes and you can with other people who listen myself included. And you can request topics and ask specific questions and stuff and and I have plenty of ideas of things that I want to talk about on this three-minute podcast that we enjoy each and every day.

But yeah, I'd love to hear what you all would like to me to talk about. So, I'm not just trying to create this thing in a vacuum. I want to make this be something that's more of a I don't know. Inspired by the things that you.Do want to hear.

So anyway, so you go to ketots.com slash discord to go join the discord and enjoy all the other awesome topics that we've got there. We have a channel about just life outside of software development. We also have a react specific channel and a the yeah, it should be I should just like pulled up and look at and and just list off we have the KCD clubs is in there.

There's also an OSS raid group that's open source group of people who like go on these raids where they do.Just contribute a ton of stuff to different open source libraries and projects and stuff. It's really really cool. So that is organized there. We've got some like my own stuff so I do live streams there coding live streams and and my office hours every Saturday.

So yeah, it's a good time. So if you come for no other reason than to just be a part of all of that, that would be cool, but then also have that special channel for this podcast. Anyway, I hope you have a marvelous day and we'll see you hopefully on the discord.

Bye.

Hello friends, so today I'm driving so that's the background noise you're hearing but I wanted to talk about how I make a decision about which direction to go when I'm talking about like writing code in multiple ways so like when the writing code there's like infinite ways to do things and you really can just slice this in any direction that you choose and lots of those decisions are pretty arbitrary and,Yeah just like it's not so cut and dry it's subjective and so the best method that I've found now sometimes you can't really do this, but if it's for like a you know, utility function or a handful of utility functions or something like that the best method that I've found for fixing or determining the best approach is to just take both approaches and so this may take a little bit of time depending upbeat how big the thing is, but you just build it one way and now you have a good idea of what the requirements are for.

That method of madness and then you build it in the other way and you get an idea of what that looks like and then you have way more context to know which way is the better approach for whatever you're trying to accomplish and so it may be it will take a little bit more time, but it's I I think that it's worth the investment if you're concerned that one way might be better than the other and sometimes if it if it's just like a small utility function like the one that inspired me to talk about this today was just like a 20 line function and so like it.

Didn't take me a whole lot of time to try both and then you know comment out one coming in the other and just see which way I liked it better and yeah and and so like you don't have to just always go with the first way that works. I think we do this a lot and we don't really have to do it that way so anyway.

I hope that is marginally useful to you at least and really interesting and insightful to you at best and yeah take care.

Hey friends so today I wanted to talk about how important it is to communicate and in particular I want to highlight the importance of communicating what you and your team have done to your higher-ups. So anytime that you or your member of your team does something spectacular you should send an email to your boss or to your teammates bought.

So there's nothing wrong with saying hey boss, I did this thing and it was really difficult and I really glad that it worked out and I just wanted to let you know kind of celebratory whatever.Theres there's a way to do this that isn't cocky um and the way that you do that is most of the time you don't accomplish this without the assistance of anyone else.

And so you can say, hey I boss like I had this problem and I worked with these other people and we figured it out and we just did an awesome job and I just wanted to let you know that your team is awesome. I love working here. A Boston lab stitch here emails like that.

You can also do this if it wasn't your accomplishment, but somebody else's and so you'd say, hey, I just wanted to you to know that Sammy did.This amazing thing and she's just a rock star awesome person and yeah, I love working with her whatever you wanted to say there um, and I think the reason that I think that this it's important for you to communicate these sorts of things is most of the time like this is the manager's part of the manager's job is to get an idea of what's going on on the ground, like actually working on the product and it just helps them to accomplish their job, but it also helps you to communicate to your boss the sorts of things that you like to work on.

So,You know if you really enjoyed working on this particular task, then you say I loved working in this it was really awesome opportunity. Thank you for giving me this opportunity. If you didn't really like it you say, hey I accomplished the thing. I'm glad that it's over. I never want to work on this again.

It just gives you an opportunity to connect with your higher-ups. And if you're saying something like this to someone else's boss that's even better because it makes that person and you don't have to include them you might like BCC them.On the email to their boss's boss or whatever But it makes them feel really good and feel a connection and maybe there will be some reciprocity, but that's not why you do it.

It just it increases the positivity in your organization, which I think is good. It might give them a pay raise whatever and especially for those of us in privilege positions. I think that it's really useful to do this as a mechanism for lining your privilege to so I would really recommend this for you in that position.

So anyway, I hope that you take an opportunity this week and just like,Find something that you can send to somebody's boss or your own and do it. See, ya.

Hello everyone. So today I want to talk about testing redux. So I know that I don't really use redox like a lot of people know that I am not a huge fan of redux any redex project. I worked in would just became very difficult to work in. But I know that a lot of people are using redux and especially if you are probably using redux tool kit, which is great.

So anyway, as far as testing redex goes. You shouldn't actually ever be testing redex. You pretty much always want to test the components that are using redux.And only sometimes when you have maybe something that's really complicated and redex or something you should probably extract that complicated logic into its own pure function and test that by itself.

But most of the time you don't need to bother most the time just rest the components that use redex you wrap your component inside of the the redex store provider and everything and and and then just test it as if it's not using redex and the benefit to this is if you decide that oh this state doesn't need to be in redox.

I can move this to local state or whatever then that's actually.Straightforward to do and the test will help you confirm that you didn't break any behavior in the process of doing of doing that. And on top of that, you can go the other way too. So if you decide, oh this state needs to be in redux, if you've written your test so that everything's wrapped in the ReadX context provider, then moving it over to redex the test should be able to tell you that you didn't make any mistakes in that process either.

So readax is an implementation detail. Don't bother testing read explicitly. I don't test my action create.Ters I don't test yeah or when I was using readx I didn't test the action creators didn't test the reducers. I tested the components that use those things and I didn't mock those those things.

And on top of that you also get your map dispatched to props and whatever else those I can't remember what those things are called anymore, but you don't need to bother testing those in isolation you get those covered because you're testing the component the connected version of the component.

So, you don't have to worry about refactors breaking your tests, the the test can actually.Give you confidence in the refactor. Hopefully, that's helpful. Have a awesome day. We'll see you around.

Hello friends, this is a little bit later than usual but I just wanted to get this in because I want to do this every weekday. So today I want to talk about TypeScript and in particular map. So I wrote a blog post recently that talked about converting typescript or fetch a fetch implemented or calling fetch in a function over to TypeScript because when you call fetch the return value from the dot JSON on that response is going to be any and so you have to explicitly.

Give that a type annotation. And anyway, one of the as I was migrating this code one of the things that I pointed out was that like we were iterating over some of the values that came back from that response.json call. And in the process of migrating the code if you just go about it in a certain way before you add the type annotation, you'll find that iterating over it requires that you type that map.

Callback function. And so in our example, we had an array of errors that could come back from this API call and we're going to iterate over those array of errors to kind of join them up into a single error. And so the idea in in this example was you would get a implicit error or implicit any problem on that map callback function and as a result you had to type that explicitly and so I just say okay, well the argument to this is.

An object that has a message property. So anytime you are you have a dot map call on an array and type script is telling you that you have to give an explicit type to the arguments of that callback function. This would also apply to like a filter or any array of any kind.

So anytime that callback function requires that you add type annotations. That is a sign that the array itself is not typed. So you want to skip the whole typing of that?Callback function and go back to where that array itself is defined and make sure that it has a proper type annotation of some kind so that you don't have to worry about typing the callback for an array method.

So if you're ever doing a radon map or a radar every or a radar sum or a radar filter or reduce or any of that and type script is saying, hey, I don't know what type this is. This isn't implicit any you need to add a type for this function.

Don't do that go fix the array first. Hope that's helpful. Take care.

Today I was in a piano discussion for test JS Summit and a question was asked about like what's the use case for unit tests if we focus on integration and component level tests. And I talked about this and and it was kind of more about like what what's the shape of our testing trophy or testing pyramid or whatever like where do we focus our tests?

And I talk about how I recommend that you focus on integration and component-type tests and try to mock as little as possible. I typically don't mock modules all that often and most often will just.Mock HTTP requests unless we're doing end tests in which case you mock nothing. And the the way that I think about it is like if you just have 100% unit tests and that's all that you're writing and you get a hundred percent code coverage with that you're still very likely to have lots of bugs creep up as integrations between different pieces of these units change.

And that can be very difficult to track when you are just mocking all the modules and just unit unit testing everything. And so you're gonna start moving over to component or integration.And type tests and with that you end up realizing that you don't need those unit tests as much because they're covered by the integration test and so okay now we just don't bother writing those and we just focus on integration tests but event at some point if you just say, oh let's just do all integration tests you're gonna find that it's a lot very repetitive to cover certain cases.

Maybe you have some functions that are doing some computations in there a lot of different parts of the algorithm that you're using or whatever, you know, tons of branches if statements turn areas all over the place that you have to cover.To you know feel confident that you can ship this code And so those are the types of things that I actually move over to unit testing.

And so we'll have a single integration task that's or maybe a handful of integration tests that are testing the more common use cases, but then you'd have a unit test for the specific unit of code that is more complex. It's typically these are going to be pure functions but not always but they'll often be pure functions that you just call it with some arguments.

You get some result back. And these types of tests run really fast and they're really quite easy to run.And maintain and so that's kind of where I see unit tests fit into the spectrum of what types of tests that you write. I've written about this on my blog.

If you go to https://kcd.im/trophy, you'll find it it's a static versus unit versus integration versus end testing. A kind of lays out the differences there. Anyway, I hope that's helpful to you have a wonderful awesome day and we'll chat with you later.

Hey there friends So none of you are content creators none of you aspire to that or anything but I kind of want to change your mind on that a little bit. Creating content isn't just for the people who are out there creating content and getting paid for it like me or whatever I didn't start getting paid with the concept that I create and much the content.

I create is actually not paid. My but like I often actually get asked about like, how do you learn stuff and and how do you like know the stuff that you know. And and my answer is that I kind of cheat and I say, hey, I want to learn about.

How to use Angular with React and so I'm going to make a conference talk proposal that is that. So, I know it's possible. I just I've never done it before maybe but I know that it's possible. So I'm going to make a conference talk proposal. It gets accepted and so now I have like, I'm forced to go and learn this thing.

And in the process of creating that content, I'm learning a lot about both of these frameworks. So creating content is a mechanism for solidifying in your mind the things that you want to learn about. And so this is why I want to encourage you to write a blog or create content.

In whatever form you want but blog is pretty straightforward most people can do it without too much trouble And your first couple blog posts may not be very good and that's totally fine but as you do it more you're going to get more experience and you'll get better at it.

So don't worry about it and and really your goal isn't necessarily to create this blog that everybody reads and it's the next thing CSS tricks or whatever maybe that's what you want to do, but that's not relevant to what I'm talking about. Your goal is to create the content and force yourself to think about the things that you're writing.

I'll give you an example yesterday.I was writing my weekly blog that I decided I do a weekly blog a couple years ago and it's been going for a while and it's awesome. And I was writing in my weekly blog. I grabbed some code that was in one of my workshops.

It was a fetch implementation for fetching Pokemon using this API. Anyway, and as I was writing the blog post, I realized that there was a small bug in my implementation. Even after I moved it over to TypeScript, there was still a back. In fact, I found two now I think about it.

And so in the process of creating this blog post, I learned.More about the code that I was writing about So this is just wanting of many many examples Like I've written libraries based on things that I learned as I was creating content. In fact, testing library Dom testing library cypress testing library react testing labor all of that came because I was creating content on how to test and and then I decided oh this is too hard.

I'm gonna make a library to do that. So anyway, I would encourage you to take a little bit of time to write down what you're learning create some content to dig a little deeper into the things that you feel like, you know, really well.I hope that helps have a wonderful day.

https://github.com/kentcdodds/rename-gh-to-main

Hello there friends. So today I'm going to talk about what I did yesterday and that is I spent just like an hour to renaming all of the default branches on my GitHub repos from Master to Maine. Now, I'm not going to really explain directly why I actually have a article that you can go read but Git and and GitHub are moving the default branch from master to main fork historical reasons and you know references to slavery and that sort of thing.

And so I decided I wanted to support that and I wanted to.Get everything consistent but I have over almost 300 repositories where it's the source repository not a fork I have. Yeah, just a lot of repositories. I didn't want to spend all the time. And as far as I know there's no GitHub API for for updating the default branch from Master to Maine.

And so I needed to use the UI. So what I did yesterday is I actually livestream this and you can go watch it, but I used Cyprus to automate navigating to every one of these repos. I wanted to and,Rename and we'd go to the slash branches URL for each one of the repos and select the the little edit button for the default branch and then enter main as the name and then you know rename the branch and click that button.

It was actually pretty straightforward. They're just a handful of lines of code and it's all open source you can go take a look at how it it's all set up but it was really cool to write this really quick. Cyprus quote-unquote test automation and and see it in the browser and what was cool is the way that I was able.

To develop it because Cypress actually pulls up a real browser and you can interact with that browsing you can type in and because I was live streaming I didn't want to actually have Cyprus enter in my username and password so I was able to have it pause the execution of the test so that I could take the browser off of the window and type in my username and password and then have a proceed and and go through everything.

So you should go take a look at that. It was like an hour and a half you could speed it up and just skip to the parts that are interesting. But yeah, it was pretty pretty cool and I I like using Cyprus for this sort of thing.If you were doing like legit long-term web scraping or something, maybe puppeteer would be a better fit but Cyprus makes manual processes like this like just so nice and easy.

So yeah give that a look. It's kind of interesting and I hope that you find it fascinating and fun and I hope you have a marvelous day. Bye.

Hey there friends. So today I'm going to talk about testing and the users of your code and how you should think about like how what do I test? So pretty common question. And the answer is basically you take a unit of code that you want to have tested that could be a single function or it could be an entire application.

It really just comes down to what you want to get confidence in. Most of us are probably in the camp of like I just want my to be sure that my entire application works and that's great. And that'sTypically where where I'm thinking and in my own mindset sometimes though, it's hard to accomplish the thing that you're trying to test from a whole application perspective and that's when you go to lower level forms of testing but that's not what I'm going to talk about today.

So once you've identified the unit of code that you want to have tested the next thing you need to do is think about who the users of that code are. So if we're talking about a react component, for example, then you're going to have two users of your code.

And in fact most of the time,You're going to have two users of your code, unless you're doing full-on and to end testing with nothing mocked. And the two users are the end user who's going to be interacting with that code and the developer user who's going to be making network requests to your API handler or maybe they're calling into your function or their rendering your component, whatever it is.

So you have those two two users of your code. And so then as you're thinking about what you know, what you should write.For your test you're going to say okay well so what is the what do mind users do What are the use cases that this code supports and how do I make like what are of those use cases what are the most important things that I ensured don't break?

Because they're like for an application there are some parts of the application that matter more than others. And so you're going to identify all the use cases that you want to support and kind of sort them in your mind or maybe even write it down. The order of priority for those things.

So once you have decided what use cases you want to support you just go one.By one to write a test for that particular use case. And the way that you write that is you could even write this in code comments or something before you write the test you just say how do if I were a user manually testing this whether you're the end user or the developer user probably both how would I interact with this component to make it do the thing that I'm trying to support?

How do I show that use case in my test? And then you write code to do that. I hope that's helpful and I hope you have a splendid day. Good luck.And writing those tests get yourself a lot of confidence and we'll see you around.

Hello everyone So today I'm going to talk about TypeScript and tricking type script versus fixing your code So, you know, the the null non-null assertion thing where you put the exclamation point at the end of something to say, hey type script this isn't going to be no or whatever.

I don't really use that. There's actually two reasons. One of them is because it looks like when you're looking at the code that looks like that's a feature of JavaScript, but it's not and so I don't really like using things that look like they could be a feature of JavaScript but aren't I don't know maybe that's just weird of me.

But the the biggest reason is that most often if TypeScript thinks that this can be null it's most likely that it actually can be no and and you could put that bang there or you can do type assertions or casting and whatever but it's I I don't like telling TypeScript that no this like this won't be this value when it actually could be that value.

So I'm thinking about a specific example that my friend Peter on discord on during office hours today brought up and I was.Live streaming and I was reading a value out of local storage and and then parsing that with JSON down parse. And JSON parts can technically accept anything and then it stringifies it and so you can pass it null it will stringify it to null and the result will be null.

Sorry, it will stringify it to the string of null and then the result of parsing that will be no. And so yeah, you can just pass in no but the typescript definitions for that except specifically a string. It has to be a string that you pass to it. Even though you can technically pass anything and it'll just get stringified automatically.

So,What I did was I did the double question marks, whatever that's called the I can't remember what that operator is called but yeah. So I'd say okay read in the locust storage if that's null then it will just pass in the string of null and then that will result in an old value.

And he suggested that oh why don't you just do a bang on that on the end of that and then that should work just fine just say, you know, hey type script this is not going to be null, but it actually will be it'll just be okay that it'll be null.

And so,But he also suggested you could also just pass it to the string constructor and then that would stringify null and then you could pass it in And I opted for passing it to the string constructor because I don't want to tell TypeScript that this will never be this null value.

What it actually will be in reality. And so it's not just communicating to TypeScript. It's also communicating to the other people who are going to be reading the code. So anyway, I hope that's sort of useful and train of thought try not to convince. TypeScript that something will not be of a certain type what it actually could be.

Hope you're having an awesome day, we'll see you all next time.

Hey friends so I've been thinking a lot about productivity this year because that has been my theme for the year has been planning and I want to be really productive because with the covet situation in my family, I have the I spend the morning with my kids and then I work in the afternoon so I actually only work half days which is awesome, but it also means that I don't have much time to get stuff done and so I am I just try to be super productive at the time that I have.

And so, I've learned a couple of things about that and one thing that I want to talk.About specifically is the productivity of like the time you're actually at work working and something that helped me a lot even before all of this was live streaming. So I've been live streaming my work for a long time and from the very beginning the the kind of motivation behind my live streaming wasn't to create content at all.

If that had been the motivation then the content that I created would be of higher quality. But the actual motivation was to keep myself on task because I can get,Distracted pretty easily. And so by live streaming if I get distracted by Twitter or something, I have to acknowledge what I'm doing to anybody who's watching.

And not always are people watching sometimes nobody tunes into livestream, which is fine. And this is why I don't actually look and see whether anybody's watching. So, I don't like I don't always sorry about that. I don't always interact with the people that are watching the livestream. I do have a chat.

And so sometimes I'll chat but I I don't ever see how many people are watching live because it doesn't matter. What I'm doing is I'm trying to be productive and so just the thought that somebody could be watching and and it's actually recorded so people could be watching the future.

And that just keeps me on task and I get so much done when I'm live streaming. So that's something that I would suggest and you don't need a bunch of complicated software or anything. I I've used OBS and you get a higher quality experience there. I have a green screen and everything.

But I found that it's just a little more work to set up when like my purpose isn't the the content or anything. So what I do now is instead is I just use zoom and zoom has the ability to live stream and I don't know whether that's a paid thing or not.

So you may have to look at that, but it doesn't have to be really complicated. You can get software to do it. The the whole purpose is just let's make myself believe that people are watching so that I can be really productive and it works really well.So, I'd give that a I recommend that give that a shot and see how you feel about live streaming your stuff.

You can't always do it, but when you can it's cool. See ya.

Hi there so today I wanted to talk about the merits of a framework I get this question quite often like when do I decide to bring in a framework or even just bringing in libraries versus just build it yourself. And so first on like the framework side of things if you're building something that's like basically a HTML page or you're doing some surveyor server template thing and you just need to enhance your app a little bit with some JavaScript so therefore it's more of a website than an app.

Then yeah, you probably don't need a framework the browser differences are pretty.Smooth to over by now and yeah you may not need a framework in that case, but like my audience of the the people that I'm working with mostly are very primarily focused on building web applications and for that if you don't want to build or use a framework and and they're legitimate reasons to not want to use a framework, but if you don't what is going to happen is you're going to build a framework for yourself.

Eventually, you'll build abstractions for everything. And the difference between your framework and one of the more popular andTry to true frameworks is your framework is used by only you and it is not battle tested. It is also maybe not even tested. It hasn't gone through the rigor of being deployed to production by lots of other people and so there are a lot of bugs that you just don't know about.

And so I would really strongly advise against building your own framework unless you have just some very particular needs that none of the other frameworks can satisfy. And I would suggest that 99.9% of applications the,That you would build for the web there's a framework that is well suited for the task And in fact most frameworks can cover 90% of the needs of most web applications today.

I'm sure. So even deciding between which framework is less of an important point at this point, they can all pretty much do what you want them to do. And so as far as like libraries when should it just bring in libraries? I mean, there's always the risk of you know, some security vulnerability.

There's there's this article a while ago about somebody who's been stealing credit card credentials because they published something to.NPM which of course that was not true they'd hadn't actually done that but they were saying this is a thing that I could have done and it absolutely is and it's terrifying but do you want to build a product or do you want to build a bunch of libraries.

Because ultimately if you don't use libraries to do things you're going to build your own and there's nothing wrong with that. You can like copy some code and and put it into your vendor directory or something like that. Like there's nothing wrong with that. You can totally do that.

But it is a trade-off and you just need to acknowledge that fact. So, I can't give you a solid answer on that but hopefully that was at least thought provoking for you. Have a nice day.

Hey folks so I guess I need to do this because people keep on bringing it up and so I'm just gonna mention it. If you aren't aware a month or two ago, I unfollowed everybody on Twitter and now I follow zero people on Twitter and I changed to lists and so the reason that I mentioned this is because a lot of people see this as some sort of power move or some nefarious purpose.

I've done this. I don't know. I don't understand why people have yeah and I know that not everybody has but several people have assigned some now intent to the fact that I don't follow anybody on.Twitter I use lists and so it's not like I don't keep track of what people are doing or whatever I just found the the reason that I did this was because the Twitter algorithm just messes up my list or my my home feed really bad.

I just didn't like what the Twitter algorithm was doing and so I said, hey, well, I'll just unfollow everybody and I'll use a list instead and it's been great. I use tweet deck and it I'm able to segment the people that I'm quote unquote following and I I like it way better and Twitter's.

Them is not impacting me at all And so that's the that is literally the only reason why I unfollowed everybody it's not some sort of like I don't need to follow anybody. I'm so awesome. That's stupid. Anybody who would do that? I think is is that's not a good luck or anything but for me.

I it's not some sort of flex or power statement or anything like that. It's 100% just because I didn't like the way that Twitter's algorithm worked with the the people that I was following. So, I just don't followed everybody in and switched to using lessons data and it works out great.

And that's literally all that it is So, I don't know. I'm just gonna make a short URL for this and I'll reply. So if you got here because you made some sort of comment and I gave you a short URL. Sorry that I didn't answer you specifically but I this is what I do when I answer the same question over and over again because I make I answer it once and then I send it links to people instead of having to answer them or having to just ignore them, which is what I often do.

So anyway, I hope you're having a stellar day and we'll see you around.

Hi there friends So today, I wanted to talk about understanding the syntax of JavaScript. Now, I most of us when we're learning JavaScript, we are introduced to each part of syntax and some of its capabilities and we just kind of learn about that syntax through experience of working with it and there's nothing wrong with that approach that's pretty like the the best way to learn anything is really just practical application.

But there are often things that you skip over when you just focus on practical application ofThe of knowledge And especially if JavaScript is the first language that you learn maybe because it does borrow syntax from other languages. Maybe there are things that you just don't know are possible or don't really have a good good grasp on because you don't understand the fundamentals of that syntax in particular.

So what I'm going to suggest to you is that anytime you see some syntax that you're not super familiar with or you think it's one way but things aren't working the way that you expect or something like that. Anytime you see something syntax? I want you to copy that code.

Into a tool called AST Explorer dot net. It's AST is an acronym for abstract syntax trees, which does sound pretty complicated but I promise you that it's nothing magic. It's something that you can learn but go to AST explorer.net paste in the code on the editor on the left and on the right side, you're going to see a representation of that code in what's called an abstract syntax tree.

You can represent it as like an JSON object or something. And each element of syntax.Has a particular node name and a type and as you click around you should be able to see the name of the AST node for the part of the code that you're looking at.

And so AST Explorer can be a really great way for you to get an understanding of what the different parts of the code represent for the computer and it can also help you get an idea of like, oh this is called an import specifier, but then when I do this with an object that's called an object pattern.

So, maybe those two things like the structuring and imports are not the same.Thing which they aren't So you can go ahead and try some of that. And you'll get a little deeper understanding. The other nice thing about this is that it makes those things Googleable. So instead of saying, hey what's that thing at the import statement or whatever.

You can say I want to learn about import specifiers and then you can Google around about that. So, hopefully that's helpful to use kind of interesting to play around with AST explorer.net. I wish you the best of luck and I hope you have a stellar day and we'll see you in the future.

Hey there friends. So today I wanted to talk about TypeScript again, and I want to talk about adopting TypeScript. So when I first started into TypeScript I was working. I I'd been doing flow for a long time and then I switched over to TypeScript. This is at PayPal. And one of the first projects that I used TypeScript in was this project called PP React, which is short for PayPal React.

It was a component library. And I I was working with a lot of abstractions as my first and my first foray.Into TypeScript and when you work with abstractions sometimes you the typings for those things can be a little bit more complicated than when you're just like doing everyday consuming of abstractions or calling functions or making reactant components or whatever.

And so it was a little bit more challenging but then I made it even more challenging because I tried to make an abstraction for some of the the components that I was using that was a higher order component and if you have experience with types and higher order components, you know that it's just really hard.

It's a disaster. So anyway, I was,Doing this and I developed this opinion where I'd say, you know, what I think that it's better. And I actually ended up giving up on the HOC. It didn't really add a whole lot of value anyway. But I developed this opinion where I think that it's better when you're just barely adopting a typed language or you know, something like that.

Yeah, basically when you're adopting TypeScript, it's you're you're better off focusing on getting like not focusing on getting everything perfect. So, you don't want to enable strict.Type checking right from the get-go You're really bad at TypeScript when you're just barely getting started. And so it's way better if you just embrace that fact and say I'm going to use any or I'm going to use unknown as my argument type here.

And I'm joined I'm going to cast all the types all over the place and whatever. And maybe you're not getting all the value out of the type system that you can you you aren't when you do that. But you're not going to be spending so much time trying to make the types perfect with your imperfect knowledge of TypeScript that

Hello everyone, so today I want to talk about saying yes more so and maybe yes is a default. So yesterday I was talking with my sister and I was just over at her house and and her son came over and asked if he could have a soda and she said yes and I we continue talking and I said, oh man, it just feels so nice to be able to say yes to your kids right and she said yes, or I really nice and and she said I tried to say yes as much as I can and yeah the way that I feel about it.

Is like my kids will sometimes ask me why I say no all the time and I say no you got this backwards you just ask me questions that I'll say no to all the time that's the problem and and so anyway, I've just been thinking about this and I feel like more of my default should be to say yes as a default so I I should be like the burden of proof should be on the no answer so it should be more of like why should you why would you say no rather than trying to justify the yes and the reason that I'm sharing this with?

You all is not because I know the you're not all parents and stuff um, but because I feel like this is like parenting is a really great example or am an what's the word I can't think of the word I'm looking for but like it it relates very closely to relationships in general and um as much as we like to pretend it's not software is a lot about relationships, especially when you're working at a company and so if you're a team.

Lead or you're managing a team of engineers or something like that you want to default to guess and so rather than just kind of seeing these people that you're you've got a relationship with as you know, it's somebody that you have to endure or appease or whatever you should be trying to see how like how you can help them be happy and satisfied with the relationship and that I I think defaulting to yes, most of the time is a good practice and so,For a lot of the time I default to know with my kids if they want to ask me something I'm automatically thinking okay, how can I say no but I'm I think that it is better to switch that up and instead think how can I say yes and focus more on finding reasons to say yes and there should be more weight on the yes than on the no so anyway hope that's kind of useful to you in whatever you're doing relationships are awesome and have a wonderful day.

Hey there friends I've been making notes of different things that I do or like see in the real world that is like a good analogy for programming concepts and one that I thought about recently was the programming programming concept of a deep bounce and scanners at the grocery store.

So, I don't know about you but I I haven't used an actual like person skinning in my groceries for years. I use the self checkout now. I like that a lot better and even though maybe it's not as fast. I don't know. I just like doing it myself.And one thing that you notice when you scan something in is that you can scan it and then it will wait like let's say that you have you bought like two pieces of chapstick and so you're gonna scan it in and you can scan the same piece and so if you you scan it and then you have to wait for a second before you can scan it again because they've implemented a debounce and so basically the use case for a defense is like well this scanner can scan probably once every millisecond or something is it's very fast, but because people,Can't move that fast or rather they're like putting the barcode up to the scanner.

So quickly in it can get those values in so quickly we don't want to actually scan it all the time. So what we're going to do and this is actually a reverse debounce. Normally you do it in the other direction, but what we do is as soon as we call that function or whatever to actually do the scan, we're not going to call that function again until a given amount of time after that first call.

And that's why it's a reverse debounce because a regular deep.Bounce is going to say once it's going to be called actually wait for a second to see if we want to to be called again thereafter. So another use case for this sort of thing would be if I'm typing in an input to do some sort of search or filter and that process is really expensive or something like that.

Then we're going to wait 200 milliseconds before actually executing the async call to go get the data response or something like that. And so we're going to wait until the user stops typing. And so yeah, anyway, that was just kind of an interesting thought that I had of like a real world.

Physical experience of you know, scanning things in with a scanner. It's a reverse debounce so we go ahead and scan it right away and then wait for a certain amount of time with the input like a search input. We're going to wait 200 milliseconds first or 300 milliseconds or whatever before we actually execute the the function.

So interesting concept debounce. It's actually a fun thing to implement on your own the simple case is pretty easy to do. So go ahead and give that a shot today. See ya.

Hey there friends so I've been doing some live streaming through discord a live stream at actually I'm on zoom and then I live stream it to YouTube and then we chat on Discord. It's a fun time if you haven't joined us then you should because it's a good time.

So anyway yesterday I was live streaming and I made a discovery thanks to some of the folks who were hanging out with us in the live stream. So when you respond to a change event or on submit event for a form or something we're talking about react here or just vanilla JavaScript Dom APIs when youYour event handler that gets called is going to get called with an event object and that object is going to have a target and it's also going to have a current target.

Well, I always thought that Target is pretty much what you want all the time and I just realized because I was moving some stuff over to TypeScript and that's what I've been live streaming is moving my epic react workshops to TypeScript. And I realized that when you do event.Target with TypeScript, it says, hey, I realized that this event is on an HTML input element.

But I don't know what event.Target is going to be so you're going to have to do some sort of casting or something like that. And that always bothered me for a long time. Well during the live stream somebody mentioned that I could use current target instead and that would always be the input element and and so I tried it and of course it worked and and then it it dawned on me the implications of how these things work and and using TypeScript in general and so now I pretty much just use current target pretty much all the time.

So I've switched from default to target and use current target when I need to I've,Switched that now I default to current target So let me just describe that really quick A target is the element that triggered the event. So let's say you have a button and inside of that button you have a span that says like a side one and then another span that says side two and then you click on the side one.

Target is going to be the span inside of the button, but if you put the event handler on the button itself and then current target is going to be the button itself. So the current target is going to be where the event was bound and target is going to be where the event happened.

Well most of the time in react you're going to like that value is going to be the same either way like especially when we're talking about inputs and and buttons and stuff most of the time what you really want is the button itself or or the input is what we're typically looking for or the form.

And so only if you're doing like your own version of event delegation, do you want to use target? So that's something that I learned yesterday kind of interesting. Use event dot current target instead of event dot target by default. Hope that's helpful. Have an awesome day. We'll chat with you later.

Hey folks I was just thinking about something that yeah, I get questions about how do I break into the content creation world and stuff like that pretty regularly and something just occurred to me that I thought was kind of interesting and that is that I occasionally will see people with a handful of followers on Twitter and and like no sense of a newsletter of any kind or anything publishing books and making courses, you know, paid courses and things like that.

And I think that I mean, I'm I'm not sure maybe that is working out okay for them, but IThink that's a little bit backwards You need to be able to earn the trust of the people that you're asking money from before you start asking money from them. And it's indicative to me that they haven't actually done that if you don't have any sense of a following of people or some sort of newsletter or some sort of tribe I guess of people who are committed to you and your content.

And so what I'd recommend for people is before you start going out selling content, I mean feel free to do whatever you want and you can sell content maybe make.A couple backs but if you want to be successful at this you need to find a way to get the trust of the people that you're trying to reach.

And the best way that I found to do this is to create a silly amount of free content. And because people, you know, this is their hard-earned money and they want to know for sure that this is going to be worth their time. It's not just their money. You can offer like a 30-day money-back guarantee, which I do.

But still people are like, it's not like everybody takes it to to see if it's gonna work out for them because it'sIt's not just money It's time It's the amount of time that it takes people to go through the material to see if it's worthwhile for them. And so what I would suggest is you spend a lot of time creating free content and this takes a lot of time.

If you're like if you've been working on this for a couple months and you're frustrated because you only have a 300 followers or something keep at it, it takes a multiple years really to build up a following but it's if this is what you want to do, then it's worth your while I think.

So yeah, we're work on creating.Really good high quality free stuff as much as you are able and then you'll gain the trust of some people develop some sort of tribe. I actually there's there's this book that's like tribes why we need you to need to follow you or something like that that I would recommend but yeah get a base of people who trust you and share your material and then once you have that base then you can go and start asking for money from people and they'll trust you they'll know you that your call your content is good.

So, I hope that's helpful. Good luck. See ya.

Hey there friends. So today I wanted to talk about something that was just on my mind yesterday. I was meeting with one of my learning clubs friends who were going through Epic React.dev and it was just so fun to talk with them and things and they asked me about how I'm productive and and get a lot of things done.

And I mentioned that I I pretty much like over the last several years have just made sure that everything that I do is has a I increase the value of the impact and I've got a blog post.About this on my blog. It's how I am so predictive and it's interesting read you should go take a look at it but one thing that I thought was interesting is as I was talking with them.

I realized that maybe like three years ago or something. I would never have agreed to do a like a small group chat without recording that chat and putting it on YouTube. This was like, I don't know there was seven or eight people in this chat and it was just us talking it up and I I would have agreed to it as fine years ago, but IAlways always would have recorded that so that I could increase the impact of the value that I was creating.

And I think there's something to be said for that but there's the reason that I bring it up today is because I think there's something to be said for just having genuine experiences between you know, just a handful of people. So, you don't have to maximize the the impact of the value that you're creating all of the time.

I think that it's really valuable to to do so and maybe have some sort of deliverable out of things like you can take notes or something. But,And yeah it was just it occurred to me that I just really enjoyed spending that time talking with them, you know, and they're going through my material and everything and so we're all kind of in the same context of what we're talking about.

So anyway, I guess the the takeaway for today is yes be productive yes increase the impact of the value that you're creating but don't forget to be a human to and just have enjoyable relationship building experiences with other people because there's a lot to be said for that sort of.

Experience too. So, I hope that you're having a stellar day and I'll chat with you tomorrow.

Hey there friends Today is January 11th 2021, and I want to talk about single variable names in TypeScript. Well think of variable names in general, but for some reason in TypeScript when we're making like generic types or type names whatever we've just I don't know where it came from.

I guess people say it came from C sharp and stuff they do this, but using the letter T to denote the type force like a generic or something. Pretty ridiculous. I mean, there are some situations where it's obvious that like what what the types are.And there's no real better name necessarily assuming that everybody understands the convention that T stands for type.

But there are so many cases where you've got a couple of different types that you're providing. Each one has a unique purpose and we could just communicate that purpose with a actual variable name but instead for some reason we're using single letter variables. I'm not sure where this came from but it does need to stop please stop doing this and just use a descriptive variable name.

And now like this is more like in general, I just noticed.This a lot with TypeScript definitions you know And it's fine if it's like you're inside of your own little function and you know like with a map or something we are mapping over some data and you use D or whatever.

I don't really care about that. I'm just talking about when you're exposing types to consumers. You wouldn't have like a single letter function that your consumers are calling or or like objects with single letters for D is duration, like nobody knows that. So given an actual variable name so that people know what they're working with and what they need to pass.

As those arguments and we're better I don't like I feel like we don't need to have this conversation because it's kind of one of those things that we just everybody knows a single letter variable names not a good thing. Types are no different make your types longer variable names so that we know what those things are for.

It's kind of a rant but I yeah just keep in mind that people if you're going to expose something as like for other developers to use the developers are going to use them and they may not know what you're talking about when you.Using single letter variables. So yeah, that's all that.

I have to say about that. I hope you have a stellar week and we'll catch you all around. Bye.

Hello friends it is January 9th, this is a Saturday and I guess I'm recording this on a Saturday, okay, so um, I wanted to talk about today type script and why I am starting to think that I'm gonna be doing my material and typescription stuff so first of all, I started using TypeScript right toward the end of my time at PayPal we had been using flow for a long time and and I liked it it was okay, but it was very clear that TypeScript was gonna be the winner of this game and so I decided let's switch over to type.

Script so I made PayPal scripts completely. TypeScript supporting project and everything and and then the template I made default to type script and everything so like I was all in and I type script the PayPal or PP React. React component library that I was working on was completely in TypeScript and then I went full-time educator and I stopped using TypeScript and the reason that I have never used or I had never used TypeScript in my open source or in my instructional material is because I didn't wantIt to be a barrier for people So with open source I didn't want it to be the sort of thing that people couldn't contribute to open source because they didn't know TypeScript.

And for my my educational content, I didn't want to make it so that people couldn't enjoy my educational content because they couldn't they didn't know type script. And so like it would just drastically limit the number of people who could benefit. So a few things have changed for one for the whole time with my open source stuff.

I always use that as an excuse like no, I don't want to be a barrier for people butLike I knew that was bogus because anybody who's going to contribute to my project also needs to write some tests and that's basically what TypeScript is So they are going to need to learn how to write the tests and so yeah, it ends up being six is anyway, like if they don't know how to write test they're going to commit it and will help them write the test that'll be the same with text script.

And for my educational content, I talked with Ryan Florence about this and he told me that a long time ago, they went full on TypeScript and a big reason was because a lot of them were like a lot of the people they were teaching were already using TypeScript and also it like you don't have.

To go full on TypeScript on the educational material so like the people who don't know TypeScript they don't have to add types if you configure TypeScript correctly and then those of you or those people who are using TypeScript regularly and know it they'll get the editor hints and everything and and even if you're not using TypeScript yourself, if you're consuming an API that exposes types you get editor hints and everything's really nice.

So it ends up being a better experience for everybody and so that's why I'm gonna be switching completely over to TypeScript and I'll probably have something there to help people who don't know TypeScript yet as well. So anyway, hope you have aSplendid day. Bye.

Hello there. Friends, it is a little late for me. I was hanging out with the family today, but I did want to get my three minute podcast in for today and so I'm doing it while I am changing laundry. So what I wanted to talk about today was just a little bit about reactor server components and that thing that everybody's super excited about I think we have good reason to be excited.

It I'm not going to explain exactly what it is. So you have to go Google it and and get an idea there's a video with.Stuff. But yeah, my initial reaction to it was pretty met just like huh. And what's interesting is that like this is probably not not quite as big as hooks at all but it is like some progress on the whole solving the problem that suspense and concurrent mode is supposed to solve or at least helping solve some of those problems.

And so it is a big deal and there's a lot of cool things that it does. But the reason that I was so just like,Not impressed or not super interested. It isn't because it's not impressive and it's not like great in whatever but because I discovered solutions to most of these problems that it's intended to solve just a few months ago when I started using Remix and a remix if you haven't heard is Ryan Florence and Michael Jackson's business that they're working on this this paid software project.

That's a framework for react and it is phenomenal. Seriously, it is so good. I'm really happy with it and it's currently like pre-beta like Alpha stage software so you know, I'm actually paying to as like a developer preview sort of thing to to use this and and learn about it, but anyway, yeah, it just solves all these these problems so if you haven't given a remix of solid look yet and then I would advise that you.

Do you don't have to become a developer preview, you know paying subscriber anything. It is not software that you should ship to production and necessarily but it is going to really shake things up I think. So yeah give remix a look it solves many of the problems that react server components are going to solve and it does so in a way that I just think is remarkable really good stuff.

And yeah, I feel like there's something else I was going to say about that, but that's that's it. That's my,Three minutes. Hope you're having an awesome day and we'll catch you later. Bye.

Hi there friends So today I wanted to talk about how a water damage thing that I discovered in my house and it relates to software. So a few days ago, we discovered in two of our closets in the basement that we have some water damage on the baseboards and the carpet.

And we had no idea where this came from or how long had been or where it came like what the cause of the the problem was. So, I eventually found out that it was our water or not our water heater, but the furnace and it has some condensation and so there's this.

Pipe that will take that condensation out of the house and there was a leak there just a little small little leak that it would drip like maybe once a minute not very much but this had clearly been going on for months and we just never noticed and eventually, you know, really damaged our baseboards and and the carpet and everything.

So that would that's super annoying because now we're gonna have to you know, replace a bunch of stuff and it's gonna be expensive and we have homeowners insurance but yeah, what a pain. So I always thinking about how this is related to software.And that like there are often little things that you may or may not know about in your software that like little abstractions that grow over time or little things that you need, you know, you need to deal with but you never make time for them because by themselves they're not like a really big deal.

Like for us we we didn't know about this, but there was this little drip and it really wasn't a big deal but after a long amount of time that turns into something just so much worse. And it's always this balancing act ofDo I invest a bunch of time into making this thing not so bad.

So like how do I spend some time fixing this problem or do I just let it continue to be a bit of a problem because it's not that big of a problem. It doesn't justify the time that would take to make it better. And like you with software like with the house that's that's a little bit different but with software you can so easily just throw stuff away and so you need to also consider like if I work on this and and make this aspect better.

Will that actually return on my investment or do we end up to deleting that feature completely and get rid of all of that code and stuff. And so my investment into making that code better is just gone. And we don't really do that with homes, but yeah, it was just something that was kind of on my mind of a you know, it's something to keep in mind that when you do have little problems that seem, you know, the subtraction is in all that great and so you slip through a code review or whatever.

But think about the long-term impact of those things and also consider the deletability of things. I hope that'sAt least interesting. See you later.

What is up my friends so I'm a little bit late today, sorry but it is January 6, 20 21 and I'm excited to talk about testing so I had a bug on my website kidsdance.com slash contact where you'd fill out a contact form and one of the things that happens is server side validation, so that uses a serverless function that I have running on Netlify, it is great, it's awesome the way that it works but yeah one of what it does is it uses a,NPM module called OW to do validation and on my website.

I pretty much just like every week when I write a blog post I just update all the packages sometimes. I'll take a look at some of the breaking changes like major version bumps and stuff but often I just like I pull up and ship it because I don't really care and that's actually kind of what I wanted to talk about is.

I I do have some tests on my website. I have one or I,Handful of unit tests and then a cypress test that just makes sure that you can pull it up and and click on this on a link and stuff so I know that at least it does open but I didn't have any sort of test for my contact form which is why this bug slipped out but here's here's the reason why I haven't invested any time into testing my own site, which is kind of like a lot of people would think that's paradoxical like hold on a second can't see.

Dodds doesn't even test his own website, well the thing is that I think that it's important that you measure or that you think about.The things that you have to do all relative to one another and that includes tests so tests is just another task on your list of things to do and you need to think consider things relative to their return on the investment and for me writing some tests for my website has a pretty low return on investment frankly, like if something breaks it's not a huge deal.

I'm not like taking people's money there or storing their you know, secure information or anything like that, it's not like a big deal of something breaks and that was the case here somebody sent me an email and said, hey your contact form is broken and that's why I sent you.

Direct email so yeah maybe I missed a couple of contacts you know people saying trying to contact me but actually I don't really care how much so yeah so it ended up not being a big deal. I fixed it and I pushed that out and hopefully the context form is working now but I just wanted to talk about that.

I do have a blog post actually about this, you know, whether you should fix the bug or write a test, you know, just how you prioritize testing and for me, I prioritize it like everything else that I do just consider the return on investment and focus on the highest return hope that's helpful have a wonderful day.

What is up friends it is the fifth of January Tuesday 2021 and today I want to talk about why I watch my own talks and workshops and listen to my own podcasts and all that stuff so I know a lot of people who give talks and say that like one of their least favorite things to do short of talking in front of people is listening to themselves talking front of people and I I don't share that feeling.

I I don't dread listening to myself talk on like,Podcasts or wherever I but I I it's not like I just do it as a what's the I can't remember the word so many just loved myself whatever that word is but um, the reason I was thinking about this was just because in my blog post that I was yesterday, it was my review of 2020.

I mentioned how like I think it's important to review your you know, how things go and so I said that I watch almost every talk and video.Cast that I produce and I use that as an opportunity to identify ways to improve and I think that that's really important so if you're the type of person that just like hates hearing yourself talk or whatever I think that I mean, that's that's fine but maybe get over it because how can you identify ways to improve the way that you deliver a talk or the way that you created a video or the podcast that you recorded whether you're the host or the guest how can you identify ways to improve if you don't.

Review that material so this is just an invitation to you to find some content that you've created or whatever and give it a little review and try to look at it from the eyes of somebody who doesn't know the subject matter and see if or or yeah really just look at it through the eyes of your intended audience and see if you deliver the material in the way that your intended audience needs it to be delivered and maybe you can take notes.

I don't really take notes.When I go through this stuff, but maybe you could and see ways that you could improve that so anyway. I hope that's helpful to you and I hope you have an awesome day and do check out this review of 2020 on my blog KCD to IM / blog and then you'll find 2028 review okay, that was fun happy day, we'll see you around bye.

Hey there friends. This is your friend Kent on Monday January 4th 2021, and today I just wanted to talk about how things change constantly. So I was updating the bookshelf app the app that we built together on Epic React.dev and just realized that there are a handful of well actually.

I think only one major thing that has changed since I released this and that is React query version 3 came out. And it's just it would there are so many videos that that impacts.Even though the impacts themselves are relatively small it just like destroys so many of the videos I had to re-record all of those.

And yeah, so I was just thinking about how things change and not only do our dependencies change but like the way that I recommend to doing things change and also like there's another one of the workshops the testing react apps in there. I have one exercise where we're dealing with a hook that allows you to get the geolocation of the current user.

And so we're mocking that out, of course, you wouldn't be able to do that in a test because like,If you run it locally on your machine it's gonna be one place and if you run it on CI it'll be a different So even if it was supported in the environment you're gonna want to mock it out.

Anyway, so the way that I approach doing that was a little complicated because you had to use act directly and somebody just recommended hey, why don't you use wait for element to be removed you wait for the spinner to go away and and then you don't have to use act directly and so like little things like this come up all the time and and I say well, you know the way that I showed works and and I would like it.

It's it's a reasonably good way to solve this problem.But your suggestion is is arguably better. So I would suggest going with that. And so yeah, we've got things that change because just developers make cooler new things and then we've got things that change because the ideas are new and things and testing JavaScript has gone through this as well.

And it's I guess I don't really have a whole lot positive to say about this, but it's it's just something to keep in mind that things are always going to change and you can't just wait for the next thing to to come out.All ways because you're always going to be waiting It's like waiting for you know the new addition of the best car You're always going to be waiting.

There's always going to be a better car. So you just buy the one that you can afford right now that accomplishes your purposes and then just close your eyes anytime there's the new one out or something like that, but we've got to bet on technologies at some point and you've got a bet today.

So just make the best decision and know that it's impossible to make a perfect one and do the best which with with what we have today. I hope you have an awesome day. We'll see you all later.

What up friends this is Kent C. Dodds on three minutes with Kent and I am here it's a 21st or the yeah 2021 the first of January and I've been thinking about a lot of things, you know, you've got New Year's resolutions and stuff and my New Year's resolution my word of the year is planning so what I was in fifth grade, I was homeschooled and by my mom she has a degree in elementary education, so she homeschooled me and my two sisters that right my little sister and sister.

To just older than me and we it worked out really well for me at some point after a month or so of of going through homeschool. I started wanting to get my school done really quickly and my mom was just like well, I've got to take care of your sisters too, so I'll just write down a list of all the things that you have to do and then you can do them whenever you want because I was I was pretty like a self-starter and so yeah, she would write it down the night before and then in the morning I would wake up sometimes around like,Four or five I'm not not too much later than that though and I would get working I would stop for a little bit to have breakfast with the family while the rest of the my siblings went to school and stuff and then I get back to it and I'd finish my school for the day like nine or ten in the morning and then I have the whole day to do whatever I wanted unfortunately at the time lots of what I wanted to do was hang out on the computer playing games and stuff which are not proud of but it like I changed a huge amount during that time.

I became much more of a self-starter and and a very task-oriented.And goal-oriented it made a huge impact on my life, so yeah, I was just super productive so I've been thinking about that and just kind of wanting to have that level of productivity back and so for this year.

I'm gonna be I I have a notebook that I'm gonna be using to write down what I'm supposed to do and the next day just like my plans what the things that I want to make sure I do and it's not like super planned out or anything like not the time of day necessarily but it's just like here the things that I'm going to accomplish tomorrow.

And I've tried it the last couple days and I haven't been like working or anything it's been like family stuff but it's been working pretty great so that's what I'm gonna be trying to do. I hope you all had a wonderful new year so operation and have a great start to your new year.

I think one of the things that I'm gonna try and plan is every weekday. I'll I'll do something here on the three minutes with Kent podcast, so if you want to subscribe and keep up with my journey, it'll be around like coding topics and just life topics and stuff like that three minutes on hope you have a wonderful day bye.

Check it out! https://EpicReact.Dev

#788

#789

Super simple start to serverless

#787

#784

An Argument for Automation

Checkout the record and livestream scripts I wrote on GitHub.

Going off-script a bit for this one, but hopefully it helps you think intentionally about the types of things you want to accomplish. Good luck!

#750

#782

#754

Colocation

#781

TestingJavaScript.com egghead.io/sale

#735

#691

#711

#732

#672

685

#680

#677

#653

#659

#664

#643

Introducing BucketStreams (concept)

#639

#640

Read the extended story here: #1

#571

This discount is over in a few hours so don't miss: https://ti.to/kent-c-dodds/learn-react-hooks-with-kent-2019-04-17/discount/early Keep up with my upcoming workshops here: https://kentcdodds.com/workshops/

And make sure you're subscribed to my mailing list to not miss announcements about more remote workshops coming soon: http://kcd.im/news

#606

#630

Notes:

• How to join: https://www.ecma-international.org/memento/join.htm
• List of Proposals: https://github.com/tc39/proposals
• Process Document: https://tc39.github.io/process-document/
• Contributing: https://github.com/tc39/ecma262/blob/master/CONTRIBUTING.md

Note: I'm no longer a delegate to the TC39 because I'm no longer employed by PayPal.

#632

629

626

#609

610

611 and 614

#574

#533

#579

#577

#576

• reactjs.org/hooks
• kcd.im/hooks-and-suspense
• kcd.im/refactor-react

#569

Wooo!

#567

#563

#564

#561

#560

Here's the YouTube video I referenced: https://www.youtube.com/watch?v=R1_nGU0x3Wk

#546

Transcript:

[00:00:00] Hey everybody today is January 24th, it's a Thursday and I am running late today. Had a couple of things going on. You know taxes and stuff had to do this morning. But today I'm answering question number five hundred and forty six. The question is titled Imposter syndrome and self-doubt. The Oscars name is Ritchie from Melbourne Australia. And the question asks about or says I've been in the industry for 10 plus years and it's only recently I began doubting myself as a developer. How or have you or do you know somebody who has experience imposter syndrome. If so how did you or they overcome it. So I think that everybody like imposter syndrome is something that a lot of people can relate to. I have definitely felt imposter syndrome. Sometimes I especially early on in my career I was like I'm literally just spending all of my time asking other people questions and I feel like that's probably the same anytime you try something new. Even with 10 plus years experience you find yourself spending just a ton of time asking people questions. But at the end of the day you're probably pushing out some stuff that is helpful to people and that's one of the cool things about software is that once you have it written it can continue to provide value even when you're sleeping and you can create a lot of value. So imposter syndrome how do you deal with that. So I don't know. [00:01:28][87.4] [00:01:28] I think that you need to place your value in things that you can control and be mindful of the emotions and feelings that you're having if you... Yeah if you focus mostly on you know I did better today than I or like I. I worked hard even though I made no progress on my ticket or whatever I'm working on I worked hard and that's all that I can expect. Definitely don't compare yourself to the rest of the world like often we can think hey there are two people in this world it's me and everybody else and we lump everybody else into this category and so then when we compare ourselves to this other person on the planet which is everybody else we like obviously fall short and we'll never reach the level of experience and intelligence that they all have but that's like totally not a reasonable comparison at all. And so focusing mostly on not comparing yourself to other people but maybe comparing yourself to yourself and continuously improving and being mindful and compassionate toward yourself I think can really help you overcome self-doubt and imposter syndrome and yeah just focus on in improving yourself. And definitely don't compare yourself to other people and you'll get there. It's great. We're doing good things. I hope you have a wonderful day. And I will see you all later. I mean I won't see you but I'll hear you all or you'll hear me. Good bye. [00:01:28][0.0] [87.4]

#547

Transcript:

[00:00:00] What does up everybody today is January 23. It's a Wednesday. And the snow is starting to melt. We are going to be talking about question number five hundred forty seven. Thoughts on graft GraphQL and Apollo. This is from somebody named John bebb. Sorry should have practiced that before. And there are questions about graft you on Apollo. They say that they've been building stuff with GraphQL on Apollo and they really liked it. apollo-link-state for local state management and react and a bunch of stuff to feel like it's a really good way to separate the front end from the back end to have it more flexible on the front and you can make changes really quickly without having to necessarily go to the back end to make some changes. And they're just wondering like what my thoughts are about that and if they're missing something. Pros and cons. So I'll preface this first by saying I have not used Apollo at all. I have definitely used GraphQL a little bit and the I've used. What is it called a graphql-request I think is the package graphql-request on npm and I use that because it's small. So yeah I don't really typically. I haven't had a real use case for something like Appollo which is actually very large. So what are my thoughts. [00:01:24][84.0]

[00:01:25] I think that's probably the biggest thing Apollo and GraphQL client-side libraries are enormous typically mostly to handle caching and the merging of GraphQL queries and stuff like that and so it would... I'd Have to really be doing a lot of GraphQL queries and stuff for it to justify the size. But other than that I am super super gung ho about GraphQL and I'm really excited about the opportunities that we have for building front ends that are totally separated from the back and I feel like that's the right architecture for most apps. Now if you're building an app that is really SEO like super super important with SEO or something it's not logged in or whatever then I would strongly recommend Gatsby. In which case you can still use GraphQL and things but it has the server rendering aspect and even if it's SEO is not a huge concern then Gatsby is still probably a really awesome bet. I'm really excited about Gatsby. And there are only a few cases where Gatsby probably isn't enough. So yeah. GraphQL. It's awesome. Separating in front end from the back end super super great. Yeah I'm really excited about that. It's something that we're investigating heavily at PayPal as well. And yeah thank you so much for the question. And I will be in your ears tomorrow. Goodbye. [00:01:25][0.0] [84.0]

#548

#550

#531

#528

#541

#540

Register for the webinar to get a link to the recording: https://go.applitools.com/190101-KentCDodds-React-Frontend-webinar.html

#526

#523

#537

• My Book Shurlan (https://kcd.im/shurlan)
• My faith
• Can I give you a million dollars?
• Can I translate your articles?
• Anything that I can turn into impactful content.

I'm not huge on answering questions about specific coding issues for free. I am willing to do consulting, but I'm a little expensive.

#520

@kentcdodds I really admire your patience when it comes to putting in the work and waiting for results

umm, how? 😅

• losing hope too quickly
• optimising for the short term (with maybe poorer results)
• not undertaking long projects at all

#522

Now that you started migrating your personal projects to TypeScript, I some questions for you:

1. What are your recommendations on moving from flow to TS?
2. When developing a library, what should I take into account regarding build process?
3. Will you be updating your testing JS course with TS?

#517

This is question #581

On my AMA

Someone asked me about this on my AMA.

Someone asked me this on my AMA and here's my answer.

On my AMA

Someone asked me a few questions so here's my answer!

An answer for a question on my AMA.

Links:

• Testing JavaScript Applications Workshop - Here's the barebones example

Another answer for a question on my AMA.

Here's another question on my AMA.

Links:

• codetheweb.blog
• css-tricks.com
• blog.kentcdodds.com
• Kent C. Dodds News

Another answer to a question on my AMA about react-router.

This is an answer to a question on my AMA about babel-preset-env.

Links:

• browserslist - The library babel-preset-env uses to know what browsers support.

Here's another answer to a question on my AMA.

Links:

• How getting into Open Source has been awesome for me

This is an answer to this question on my AMA.

Links:

• Why semver ranges are literally the worst
• semver.npmjs.com

My answer to this question on my AMA.

Someone asked me some questions about using React and here are my answers :)

In this episode, I talk about my blogpost Newspaper Code Structure and Function Declarations. Enjoy!

I had a friend send me this testing code:

describe('handleChangeStatusConditionSearchText', () => {
  test('should handle changing status search text within FormWizard', () =>
{
    const wrapper = shallow(<FormWizard />);
    const state = {
      ...wrapper.instance().state,
      statusConditionSearchText: 'poop'
    };
    wrapper.instance().handleChangeStatusConditionSearchText('poop');
    expect(wrapper.instance().state).toEqual(state);
  });
});

And I had a few concerns with it, so I decided to record my thoughts :) (Learn more about enzyme and shallow rendering, and then never shallow render again... 😉)

Just some ramblings for my personal feelings around classes in JavaScript. I'd much rather just use objects and closures :)

Some brief and deeper thoughts about Wicked.

Just some thoughts about why I open source my stuff by default. Links:

• generator-kcd-oss
• How getting into Open Source has been awesome for me

Have a nice day!

I had a friend help me out on a project last night. His PR had a few linting issues so I asked him to fix some of them and later saw him on twitter expressing frustrating that ESLint can get in the way of building stuff. I agree with him to a point. This is how I feel about ESLint.

Links:

• ESLint
• eslint-config-kentcdodds

See you all around!

Back in January, James Long introduced us to his new JavaScript code formatting tool prettier. It gained popularity quickly and just two days later I released prettier-eslint. Since then, a bunch of tooling has been built around these tools to make the experience and workflow really awesome. I'm excited to say that we're now using it on my team's project at PayPal!

In this brief, I talk a bit about the challenges we've faced so far adopting prettier-eslint. Fun stuff!

Here's a quick synopsis of my blog post An Argument for Automation. I also talk about my yeoman generator kcd-oss which has been really influential in me getting new high quality projects spun up really quickly.

See yah!

I created a library to make the testing lesson of my babel egghead course easier (to learn and teach).

One of my best internet friends Sarah Drasner recently tweeted something really nice about me:

IMHO the contributions @kentcdodds makes are huge because he teaches people how to contribute to OSS. That's time investment that scales 🎖

I really appreciated that validation and those kind words and I want to talk about it a little bit more so here are my thoughts on that.

In addition, here are some resources:

1. What open source project should I contribute to?
2. How to Write an Open Source JavaScript Library
3. MakeAPullRequest.com
4. First Timers Only
5. How getting into Open Source has been awesome for me

See ya'll around!

I get a lot of questions about when it's appropriate to use Jest snapshot testing, or why you wouldn't use snapshots for pretty much everything. This brief is my answer.

If you're unfamiliar with Jest snapshot testing, it's really great and you can learn about what it is and how it works here.

I hope this is helpful! See you around!

This is another answer to a question on my ama: Why not use a scoped package for nps?

Just some thoughts on how to structure tests (specifically setup) in a way that makes them easier to understand in the future.

I got a question on my AMA asking me how to learn new tech and work on side projects. Here's my answer.

Links:

• Repeat TODO
• RealWorld example apps
• TodoMVC

See you all on twitter!

I got a question on my AMA asking me how I read and learn codebases. Here's my answer!

See you all on twitter!

I got a question on my AMA asking me about whether I prefer TypeScript or Babel. I prefer Babel because it has better interop and a wider community. For more, listen to this 3 minute podcast :)

See you all on twitter!

I've recently been working on prettier-eslint and an accomanying cli and it's been a lot of fun. I really think that doing this kind of thing can really change the pace of your day-to-day and encourage you to do the same!

See you all on twitter!

David asked me about my Deploy/Build process and it was easier to answer in audio form :)

Links: What we can learn about testing from the wheel (my talk at Ignite Fluent 2016)

See you all on twitter!

My co-worker asked me about why the babel-plugin-lodash module is useful and I explain that and the lodash-webpack-plugin too :-)

I got a question about why we test our pre-transpiled code (or rather, instrument that code for coverage) rather than our post-transpiled code. So here's my answer. I reference babel-plugin-__coverage__ (use this with karma) and nyc (use this with tests run in node, like with mocha or ava).

Good luck!

I had an enlightening experience today after hearing my 4 year old daughter Becca's response to watching some of the JavaScript Air episode on webpack today. Pam Selle is a regular panelist.

I was asked on my AMA about my opinoin on Test Driven Development (or TDD).

Alex Booker asks:

Hi, Kent

I've seen you advocating Aphrodite on Twitter and noticed you're using it for the JavaScript Air site

Just wondering what drew you to Aphrodite over it's competitors (most notably Radium)

I have a small amount of exposure to both and they seem to accomplish same thing but Radium is more mature

Thanks

P.S. I hope you're having a nice trip, mate 😀

Also, you might be interested in this CSS in JS comparison. (Note this PR)

I hope this answer helps!

At first I was really bothered that AVA didn't have support for nested tests, but now I consider nesting tests to be an anti-pattern.

Here's an example of the kind of thing I mean (see this in a syntax-highlighted gist here):

Mocha with nesting (don't mind the actual tests, just imagine what this would be like with a larger test file):

import Customers from './Customers'
import getMockCustomers from './Customers/mocks'
describe('Customers', () => {

  let mockCustomers

  beforeEach(() => {
    Customers.setCustomers([]) // initialize to empty for most tests
    mockCustomers = getMockCustomers() // have mock customers available
  })

  afterEach(() => {
    Customers.setCustomers([]) // clean up just in case
  })

  describe('getCustomers', () => {
    beforeEach(() => {
      Customers.setCustomers(mockCustomers)
    })

    it('should return the existing customers', () => {
      const customers = Customers.getCustomers()
      expect(customers).to.be.eql(mockCustomers)
      // questions you must ask if you're not familiar with this file and
it's bigger:
      // - where does `mockCustomers` come from?
      // - what make `getCustomers` return the mockCustomers?
    })
  })

  describe('setCustomers', () => {
    it('should set the customers array', () => {
      Customers.setCustomers(mockCustomers)
      const customers = Customers.getCustomers()
      expect(customers).to.be.eql(mockCustomers)
      // question you must ask if you're not familiar with this file and
it's bigger:
      // - where does `mockCustomers` come from? What is it initialized as?
    })
  })
})

Here's what it would look like without nesting (with AVA, though you could mostly do this with Mocha too):

import test from 'ava'

test('getCustomers: should return the existing customers', t => {
  const mockCustomers = initializeCustomers()
  const customers = Customers.getCustomers()
  t.deepEqual(customers, mockCustomers)
  cleanupCustomers()
})

test('setCustomers: should set the customers array', t => {
  initializeCustomers([])
  const mockCustomers = getMockCustomers()
  Customers.setCustomers(mockCustomers)
  const customers = Customers.getCustomers()
  t.deepEqual(customers, mockCustomers)
  cleanupCustomers()
})

function initializeCustomers(initialCustomers = getMockCustomers()) {
  Customers.setCustomers(initialCustomers)
  return initialCustomers
}

function cleanupCustomers() {
  Customers.setCustomers([])
}

Like I said, this may be a bad example. Don't be distracted by the tests themselves. Just look at the it blocks above in the Mocha tests and compare it to the test block in the AVA tests below. The difference is that with the it blocks, you have to keep in your head what's going on in a beforeEach and that relationship is implicit. In the test block, there is a level of abstraction, but it's explicit so you don't need to worry about keeping it in your head because it's in front of your face.

I hope this is helpful!

Check out the Open Source Definition. A license is required for your project to be considered Open Source. I recommend you choose a license.

There are thousands of generators, boilerplates, and starter kits available on npm right now. While these tools are super handy to get started, using them will bite you in the long run. I recommend that you make and use your own, and only use others as a reference.

I was just thinking about my AMA and decided that I'd talk about how I've found it to be valuable and encourage you to start your own!

Here's mine: https://github.com/kentcdodds/ama Here's Sindre's: https://github.com/sindresorhus/ama

I was talking with my good friend Jamund Ferguson today and he mentioned that he just really likes the simplicity of using regular (non-preprocessed) CSS with BEM and here are some of the reasons I still prefer Aphrodite.

I didn't mention in this that I also love that Aphrodite automatically vendor-prefixes everything for me as well.

Hope this is helpful!

JavaScript Air just passed 100,000 downloads on the audio podcast hosted by podbean.com 🎉 🎊

Things are going really well for the show so I wanted to share a bunch of stats about the show with you today. Here are the promised stats screenshots: http://jsair.io/stats-2016-04

See you on twitter!

My friend Matt Winchester asked me what I think of Aphrodite compared to css-modules. Here's my answer.

Here's an example of me migrating from CSS (processed with PostCSS) to Aphrodite: https://github.com/javascriptair/site/commit/d8b8bf349f6c94a1d00539bb285240615baf5b7d

Oh! And one other thing I didn't mention as a benefit of Aphrodite that can be a killer feature is because your CSS is colocated with the components that are using it, you can ship only the styles that are needed and used, rather than shipping ALL of your styles. A lot of problems go away when you have an explicit relationship between your styles and your components 👍

I hope this is helpful :-) Feel free to ask more questions on my AMA

Adam Morgan asked me how I record audio and video for JavaScript Air. Here's my answer.

Links:

• How to start a podcast like JavaScript Air
• Mostly Node podcast
• Heil PR-40 microphone
• Heil HB-1 Microphone Boom
• Hangouts on air

I hope this is helpful! Feel free to ask me more questions on my AMA

Just a quick explanation of how tools instrument your JavaScript code to record and report code coverage. Common tools:

• istanbul
• nyc with ava are great for coverage of node-running tests (use jsdom to mock a DOM like I do).
• babel-plugin-__coverage__
• karma-coverage with karma and the babel plugin are great for coverage of code when you want to run your tests in a browser
• isparta (no longer maintained, try the babel plugin)

You may also be interested in this video + this repo where I go through setting up code coverage with ES6, Webpack, and Karma. Just replace where I use isparta with using babel-plugin-__coverage__ (like this) and it should work great 👍

I hope this is helpful!

See you on twitter!

Just a quick pro-tip for those of you working from home. Keep the snacks outside of arms reach! And drink lots of water!

I've automated a ton of stuff for JavaScript Air. There's definitely still more to do, but I'm pretty happy with how much is automated. You can find most of the automation stuff in the npm scripts in the package.json in the repo. Many of these reference scripts found in the other directory.

Automation is great. In fact, this very episode used some of the automation found in this repo to make it mono and compress the audio. As I often say: Saving time is not the only reason to automate workflows.

See you on twitter!

For the last 24 hours I've been using Atom with vim mode and so far I'm liking it a lot. Here are the plugins I've installed so far:

• ava
• custom-invisibles
• git-plus
• language-babel
• linter-eslint
• open-this
• relative-numbers
• vim-mode

See you on twitter!

I was talking with some of the other Fluent Conf speakers this evening about one of my favorite features of our community: The more we share with each other, the better it is for everyone.

See you on twitter

The best part of going to meetups and conferences is getting to know new people you haven't met before and learn about their perspective and experiences. It will make you a better person and software developer 👍

See you on twitter!

Today I'm playing with my kids and I'm reminded how important they are in life. I am giving two talks at Fluent Conf next week and doing a live JavaScript Air show and I have a lot to prepare and practice. However today I'm focusing on one of the most important things in my life: my relationship with my children. Don't forget what matters most.

When making a pull request it's often really helpful to take a screenshot of before/after, make an animated gif, or do a screencast. Here are some handy resources about this:

• LICEcap - Record gifs
• CloudApp
• My Animated GIF Workflow 🔥 - By Wes Bos

See you on twitter!

Links:

• The First Pull Request
• All Contributors Spec
• Live React: Hot Reloading with Time Travel - Talk by Dan Abramov that started Redux
• angular-formly
• issuetemplate.com
• GitHub issue templates

Find places to give talks here:

• @calltospeakers
• @devcfp
• @CallbackWomen
• lanyrd.com
• meetup.com

See you on twitter

I just finished the show Live at React Conf. This is just a few lessons learned from this experience.

See you on twitter!

Got an email asking me to help someone by basically doing their job for them. I realize that this crazy world of the web can be a little exhausting with all the tooling and stuff, and I'm really motivated to help people learn. But I just simply don't have the time to help everyone that asks me for help. Here's a little bit on why.

Angular and Webpack for Modular Applications

See you on twitter!

Just my opinion on React's new versioning scheme in which I reference semver.org.

See you on twitter!

I just made an ignite talk proposal about testing that I think could really help clear up the question about what and how to test your applications. Here's a little teaser of what it's about.

Submit your own proposal here.

See you on twitter!

Every weekday I tweet at the hashtag #eggheadADay. I share this with my co-workers and we have a discussion about the lesson of the day. It's a great way to keep your skills sharp. Here's the Google Doc I use.

See you on twitter.

This explains the what, why, and how for me requesting a new maintainer (or several) for the angular-formly project. Links:

• The issue
• Open Source Stamina

See you on twitter!

Super excited that my first pull request to the ReactJS project was merged last night! It was based on this issue I filed. So excited to have something I've done help the React community :-)

Big thank you to Dan Abramov, Paul O’Shannessy, Jim, and Facebook Community Bot for iterating on the PR with me :-)

In this show I give a few tips about contributing to open source projects and reference my (free) Egghead.io series: How to Contribute to an Open Source Project on GitHub. Also check out my blogpost What open source project should I contribute to? This gives tips on how to identify how you can contribute.

See you on twitter!

Been refactoring a big react component into smaller stateless components to make it easier to understand dependencies for the different pieces of the component. Merrick Christensen demonstrates how to do this in his Egghead.io lesson Extracting Private React Components

See you on twitter!

Last week I gave a workshop about using the AVA framework to test React. One thing that I tried is this idea from A better way to teach technical skills to a group by Dean Hochman which utilizes post-it notes in an interesting way.

I also utilized a little emoji I affectionately call Terry the Tiger 🐯 to direct people to the actionable items in my thorough workshop instructions

See you on twitter!

In this first episode of 3 minutes with Kent, I talk about the value of being nice in our industry.