3 Minutes With Kent

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

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.

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

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

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

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

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 w

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

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 i

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

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

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

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 w

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 st

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 somet

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

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 th

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

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 re

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 o