3 Minutes With Kent

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 automa

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 m

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

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 m

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

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

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 uti

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 s

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 workin

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

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 yo

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

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 t

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 gett

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

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 wr

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 yo

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 ev

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

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