BRIEFS logo BRIEFS

How to use TypeScript errors to guide your callbacks

04/19/2021 , 2m, 53s

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.

Neural nets podcast recommendation

04/15/2021 , 2m, 13s

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.

When to use TypeScript's `never` type

04/13/2021 , 2m, 58s

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.

Make the world better by doing this one simple thing

04/11/2021 , 2m, 11s

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.

Should every site be an installable PWA?

04/08/2021 , 2m, 55s

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.

Why I no longer use newspaper code structure

04/06/2021 , 2m, 55s

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.

How do I add tests to existing code

04/06/2021 , 2m, 58s

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.

Writing "Testable" React Components

04/02/2021 , 2m, 58s

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.

How to know when you're done testing something

03/31/2021 , 2m, 59s

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.

Rendering react elements with ifs, ternaries, switches, or object properties

03/30/2021 , 2m, 59s

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.

Write the code first, then make the abstraction

03/27/2021 , 2m, 51s

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.

The future is on the edge

03/25/2021 , 2m, 54s

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.

Universal remotes: So many use cases it's useless

03/23/2021 , 2m, 57s

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.

Create git-ignored playground files in your project

03/22/2021 , 2m, 32s

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.

The Diversity of your team is a feature

03/19/2021 , 2m, 1s

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.

Avoid the sunk costs fallacy

03/18/2021 , 2m, 18s

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.

Using patch-package to workaround a create-react-app issue

03/18/2021 , 2m, 57s

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.

esbuild is a FAST bundler ⚑

03/16/2021 , 2m, 56s

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.

Getting a Native ESM module imported into a CommonJS module

03/13/2021 , 2m, 59s

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.

When is a good time to buy a stock?

03/10/2021 , 2m, 58s

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.

Don't sell your kindness for time

03/09/2021 , 2m, 59s

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.

Don't Trick TypeScript

03/08/2021 , 2m, 58s

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.

How to solve programming problems

03/06/2021 , 2m, 54s

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.

Make Processes Instead of Goals

03/04/2021 , 2m, 50s

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.

You Can Use React EVERYWHERE: Custom React renderers

03/04/2021 , 2m, 55s

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.

Doesn't matter how slow something is if you can cache it before the user

03/02/2021 , 2m, 56s

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.

Use a password manager

03/01/2021 , 2m, 18s

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.

Sudoku and methodical debugging

02/27/2021 , 2m, 56s

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.

List out different things that appear to do the same thing

02/25/2021 , 2m, 50s

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.

Remote working tips

02/24/2021 , 2m, 58s

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.

Writing Excuses: Smart Promotion

02/23/2021 , 2m, 6s

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.

Reverse DNS in real life

02/22/2021 , 2m, 54s

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.

Introducing KCD Community Meetups

02/20/2021 , 2m, 52s

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.

Checkout MDN to replace boredom with learning.

02/19/2021 , 2m, 57s

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.

Introducing MDX-Bundler

02/17/2021 , 2m, 50s

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.

Stick with your worthy goals

02/17/2021 , 2m, 58s

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.

Lines of code !== Complexity

02/15/2021 , 2m, 54s

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: tell me "why," not "what"

02/13/2021 , 2m, 56s

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.

Keep an eye on Remix

02/13/2021 , 2m, 56s

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.

Different Problems, Different Solutions

02/11/2021 , 2m, 27s

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.

Don't build the solution before you understand the problem

02/11/2021 , 2m, 59s

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.

Testing with Text and Internationalization

02/09/2021 , 2m, 58s

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.

Is it okay to make a function async if it doesn't need to be async?

02/09/2021 , 2m, 31s

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.

Where my money comes from: my transparency page

02/06/2021 , 2m, 53s

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.

Rarely forEach, normally for..of

02/06/2021 , 2m, 15s

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.

When client-side routing is worse than server-side routing

02/04/2021 , 2m, 57s

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,

Join the KCD Discord and request podcast topics

02/03/2021 , 2m, 52s

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.

Write it both ways

02/02/2021 , 2m, 8s

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.

Tell the boss how great you and your co-workers are

02/02/2021 , 2m, 58s

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.

How to test Redux

01/30/2021 , 2m, 25s

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.

TypeScript: Don't type array method callbacks

01/30/2021 , 2m, 55s

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.

Where do unit tests fit?

01/28/2021 , 2m, 47s

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.

Creating Content: My Secret to Learning

01/27/2021 , 2m, 57s

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.

Automation with Cypress: Renaming GitHub Repo Default Branches

01/26/2021 , 2m, 41s

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.

How to approach writing tests

01/25/2021 , 2m, 56s

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.

Don't Side-step TypeScript

01/23/2021 , 2m, 56s

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.

Productivity through Live Streaming

01/22/2021 , 2m, 59s

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.

Concerning Libraries and Frameworks: Build or Install

01/21/2021 , 2m, 56s

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.

Why I Have 0 Followees

01/20/2021 , 2m, 18s

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.

Use ASTExplorer.net to deepen your understanding of JavaScript

01/19/2021 , 2m, 48s

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.

Use TypeScript any/unknown/casting when you're getting started

01/18/2021 , 2m, 54s

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

Default to "Yes"

01/16/2021 , 2m, 51s

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.

Real World Debounce

01/15/2021 , 2m, 53s

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.

Use event.currentTarget rather than event.target most of the time

01/14/2021 , 2m, 56s

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.

Work on that following first, then sell the courses and books

01/13/2021 , 2m, 55s

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.

Productivity and Relationships

01/12/2021 , 2m, 26s

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.

Single Letter Variables (and Types) Considered Harmful

01/11/2021 , 2m, 31s

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.

Why I'm Going 100% TypeScript in OSS and Teaching

01/09/2021 , 2m, 57s

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.

Remix means I'm not excited about React Server Components

01/09/2021 , 2m, 58s

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.

Consider Long-Term Impacts and Deletability

01/07/2021 , 2m, 57s

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.

Why I don't have tests for my blog

01/07/2021 , 2m, 55s

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.

Watch your own talks

01/05/2021 , 2m, 47s

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.

Things Change Constantly

01/04/2021 , 2m, 56s

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.

New Year, Daily Planning

01/01/2021 , 2m, 55s

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.

Automation

02/07/2020 , 2m, 57s

An Argument for Automation

Checkout the record and livestream scripts I wrote on GitHub.

Making Process-based Goals

02/06/2020 , 2m, 58s

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!

AMA: Virtual DOM vs DOM

08/29/2019 , 2m, 57s

AMA: Learning and Teaching

04/24/2019 , 2m, 53s

AMA: Visual Regression Testing

04/18/2019 , 2m, 55s

AMA: How did you start?

03/25/2019 , 2m, 53s

#640

Read the extended story here: #1

early bird pricing for "Learn React Hooks" remote workshop and more!

03/21/2019 , 2m, 57s

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

AMA: How did you become a member of the TC39 Committee?

03/19/2019 , 2m, 53s

#630

Notes:

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

AMA: What's the difference?

03/14/2019 , 2m, 58s

626

AMA: Company to work remotely

02/11/2019 , 2m, 58s

AMA: Capability of unit tests

02/01/2019 , 2m, 56s

AMA: How do you test for mobile?

01/31/2019 , 2m, 49s

AMA: Your thoughts about CSS in JavaScript?

01/28/2019 , 2m, 57s

#560

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

AMA: Impostor Syndrome and self doubt

01/24/2019 , 2m, 57s

#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]

AMA: Thoughts on GraphQL and Apollo?

01/23/2019 , 2m, 54s

#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]

AMA: Your opinion about A.I.

01/18/2019 , 2m, 57s

AMA: What do you wish you were asked?

01/08/2019 , 2m, 56s

#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.

AMA: How do you practice patience?

01/07/2019 , 2m, 47s

#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

AMA: TypeScript era

01/04/2019 , 2m, 47s

#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?

AMA: How to code faster?

01/03/2019 , 2m, 42s

AMA: What's it like working at PayPal?

05/14/2018 , 3m, 1s

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

react-router and some implantation details

11/16/2017 , 2m, 32s

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

Questions about babel-preset-env

11/16/2017 , 2m, 59s

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.

Using and making new tools

11/16/2017 , 2m, 42s

My answer to this question on my AMA.

React Questions

06/15/2017 , 2m, 56s

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

Newspaper Code Structure and Function Declarations

06/01/2017 , 2m, 52s

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

React Testing Patterns

05/31/2017 , 2m, 51s

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... πŸ˜‰)

Classes - A Premature Optimization

05/30/2017 , 2m, 58s

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

Wicked

05/24/2017 , 2m, 58s

Some brief and deeper thoughts about Wicked.

Why Open Source?

05/22/2017 , 2m, 58s

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

Have a nice day!

The Utility of ESLint

05/19/2017 , 2m, 56s

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:

See you all around!

Adopting prettier-eslint at work

05/18/2017 , 2m, 54s

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!

An Argument for Automation

05/17/2017 , 3m

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!

babel-plugin-tester

05/17/2017 , 2m, 55s

I created a library to make the testing lesson of my babel egghead course easier (to learn and teach).

Scaling OSS Management

05/15/2017 , 2m, 58s

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!

When to use Snapshots πŸ“Έ with Jest

05/11/2017 , 2m, 55s

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!

Why I don't normally use scoped packages

02/21/2017 , 2m, 56s

This is another answer to a question on my ama: Why not use a scoped package for nps?

Maintainable Tests

02/16/2017 , 2m, 43s

Just some thoughts on how to structure tests (specifically setup) in a way that makes them easier to understand in the future.

Learning new tech and working on side projects

02/10/2017 , 2m, 47s

I got a question on my AMA asking me how to learn new tech and work on side projects. Here's my answer.

Links:

See you all on twitter!

Learning Codebases

02/10/2017 , 2m, 43s

I got a question on my AMA asking me how I read and learn codebases. Here's my answer!

See you all on twitter!

AMA: TypeScript or Babel?

02/09/2017 , 2m, 54s

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!

Change the pace of your day-to-day

01/19/2017 , 2m, 38s

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!

Q&A: Deploying and Build Process

08/23/2016 , 2m, 51s

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!

Lodash Tooling and Optimizations

07/13/2016 , 2m, 58s

My co-worker asked me about why the babel-plugin-lodash module is useful and I explain that and the lodash-webpack-plugin too :-)

Testing and Transpilation

06/24/2016 , 2m, 59s

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!

My Daughter, JavaScript Air, Pam Selle, and Diversity in Tech

06/08/2016 , 2m, 56s

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.

Q&A: Thoughts on TDD (Test Driven Development)

06/07/2016 , 2m, 57s

I was asked on my AMA about my opinoin on Test Driven Development (or TDD).

Q&A: Aphrodite vs. Radium

06/06/2016 , 2m, 48s

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!

Nested Unit Tests: An Anti-Pattern

05/25/2016 , 2m, 58s

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!

OSS Licenses

05/25/2016 , 2m, 22s

Check out the Open Source Definition. A license is required for your project to be considered Open Source. I recommend you choose a license.

Generators, Boilerplates, and Starter Kits

05/25/2016 , 2m, 21s

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.

The value of an AMA

04/27/2016 , 2m, 42s

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

Aphrodite vs BEM (CSS)

04/21/2016 , 2m, 51s

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 Stats celebration (100k downloads!! πŸŽ‰)

04/18/2016 , 2m, 59s

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!

Q&A: Aphrodite vs CSS Modules?

04/08/2016 , 2m, 58s

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

Q&A: Recording audio/video for JavaScript Air

04/07/2016 , 2m, 10s

Adam Morgan asked me how I record audio and video for JavaScript Air. Here's my answer.

Links:

I hope this is helpful! Feel free to ask me more questions on my AMA

How JavaScript Code Coverage Works

04/06/2016 , 2m, 53s

Just a quick explanation of how tools instrument your JavaScript code to record and report code coverage. Common tools:

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!

Working from home: Snacks

04/05/2016 , 1m, 35s

Just a quick pro-tip for those of you working from home. Keep the snacks outside of arms reach! And drink lots of water!

Automating JavaScript Air

04/05/2016 , 2m, 54s

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!

From vim to Atom + vim mode

04/05/2016 , 2m, 58s

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:

See you on twitter!

Our Community is Like a Fire πŸ”₯

03/09/2016 , 1m, 28s

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

Go to meetups/conferences and meet new people

03/08/2016 , 2m, 26s

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!

First things first

03/05/2016 , 28s

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.

Gifs in PRs

02/29/2016 , 1m, 31s

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:

See you on twitter!

Lessons learned broadcasting live at React Conf

02/23/2016 , 2m, 52s

I just finished the show Live at React Conf. This is just a few lessons learned from this experience.

See you on twitter!

Why I can't do your job for you

02/23/2016 , 2m, 52s

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!

React's New Versioning Scheme

02/20/2016 , 2m, 59s

Just my opinion on React's new versioning scheme in which I reference semver.org.

See you on twitter!

Ignite Talk Proposal: What we can learn about testing from the wheel

02/19/2016 , 2m, 43s

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!

Sharing your learning: Egghead a day

02/18/2016 , 1m, 50s

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.

New maintainer(s) needed for angular-formly

02/18/2016 , 2m, 54s

This explains the what, why, and how for me requesting a new maintainer (or several) for the angular-formly project. Links:

See you on twitter!

Got a PR Merged into ReactJS πŸŽ‰ + Tips

02/18/2016 , 2m, 51s

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!

Refactoring Big React Components

02/17/2016 , 2m, 21s

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!

Workshop Tips

02/16/2016 , 2m, 31s

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!

Let's be nice

02/09/2016 , 2m, 57s

In this first episode of 3 minutes with Kent, I talk about the value of being nice in our industry.