3 Minutes with Kent

3 Minutes with Kent

By Kent C. DoddsTechnology
Download on the App Store

3 Minutes with Kent episodes

  • Prisma is amazing

    Hey there friends. So yesterday I was just a fanboying I guess about

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

    So yeah, just so you have a database and you tell it what database what

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

    You just work with Prisma. And what makes Prisma especially special is that

    it has a really great way for defining your schema for the types or the
    models that your database supports. It has a really nice way of making the
    database match that so it'll create the tables for you and everything.

    It has a great way for my great.Hitting so if you need to change the column

    name or something then it will automate that process and and that can be
    part of your deployment pipeline is to alter tables to add columns and
    stuff like that. It doesn't quite help you with like breaking changes.

    It they have some articles to help, you know, how to go about doing that

    and I have successfully done that with Prisma. But yeah, and and it's it's
    not like a terribly difficult thing to do necessarily but I mean if it's a
    really great big breaking change then having zero downtime is tricky.

    But yeah, I've had a couple like the situations where I needed to remove an

    enum value and stuff and I was able to do that without too much trouble.
    Thanks to a lot to prism as migrate feature, but then the thing that you
    experience on a regular basis working with Prisma that just I love is its
    type script support.

    So you define this schema and then it generates TypeScript types. So that

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

    It's it's brilliant. So if you are using one of those databases and you

    haven't tried Prisma yet give it a look it is fantastic. I'm really really
    happy with it. Hope you're having an awesome day andWe'll talk to you later.

    3 min
  • Using ScriptKit to easily upload images to @cloudinary

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

    https://www.scriptkit.com/

    Hello friends. So this morning, I finished something that I was working on

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

    You get script kit, you can copy the same script. And yeah, you just need a

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

    I want one folder one directory yep or I want to go into this directory and

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

    And so, you can navigate around the directory as you would expect. You can

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

    And and yeah, and so once you've selected your directory, then it gives you

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

    And when you're all done, it will open up your browser to show you to the

    directory that you chose so that you can see all the images. It also copies
    the URL for each image that you uploaded and so if you have if you're just
    uploading one then that's the one that's in your code board.

    If you upload multiples and they're gonna overwrite each other, which is

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

    It was really nice. So eventually, I'm gonna automate the whole process of

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

    I'll put a link to the script in the description and I hope that's

    interesting and helpful. Have a nice day.

    3 min
  • Avoid Hasty Abstractions: Hooks edition

    Hello friends, so I wanted to talk today about whether or not you should

    make a custom hook for everything. So a few days ago, maybe last week there
    was this thing going around where people were recommending that you never
    ever use the react built-in hooks inside of a component, you always extract
    it to a custom hook.

    This is terrible advice. Don't do that at all. So the way that I think

    about hooks in React is the they're basically functions that have the,Only
    special distinction of being functions that actually call other hooks.
    That's the only thing special about them. So everything else about this
    function is the same as regular functions.

    And you don't make a function for every line of code that you write right?

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

    And logically put it together so that it can be separate from the rest of

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

    Now, you have to start worrying about the consumer and say, oh well, they

    wanted to return early from here. So, I'll return early. It just gets to be
    more complex. There are more things to think about. So you can't avoid
    adding complexity when you start abstracting things into functions.

    It's just the way that it is it always adds complexity. Now whether or not

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

    That's a different matter. But the fact is that it will always increase

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

    That means that you'll either need to.Call back that your passing in or you

    have to use the latest ref pattern to always use the latest function. So
    anyway, hope that helps.

    3 min
  • performance.mark and performance.measure for improved DevTools profiling

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

    Hello there friends. Sorry, it's been a little bit of a break but I was

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

    It's really kind of a confusing area. And I remembered that there's the

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

    And you can do like performance down now console log in and then like

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

    But basically, it's a combination of the mark and measure APIs on the

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

    And so I call that function and I'm on a really big blog post and to test

    this out. I call that function and then on the next line you say
    performance.mark and you give it another label and then you say right after
    that performance dot measure and you give three arguments the first is the
    label for.

    The measurement the second is for the start marker So whatever you put for

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

    Unfortunately, I don't know whether this works very well for asynchronous

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

    It's actually very cool and I teach you about it on epic react. So if

    you're if you're not done the performance workshop yet, or the actually the
    performance section of the bookshelf app, then you may not have run up
    against that. But it's really cool. All right, hopefully that's helpful.

    I'll chat with you later.

    3 min
  • Make your DB schema as restrictive as possible for easier migrations

    Hello there friends. Welcome to June I am thinking about Postgres and

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

    As restrictive as possible. Early on as as you're trying to make things. So

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

    The reason is because it's a lot easier to later do a migration.That

    expands the permissive venous of that schema than going the other direction
    because when you go the other direction, you have to find all of the data
    rows that don't go into the new schema and update those so that they they
    fit.

    So, for example, if you have a first name field and you decide to make it

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

    And so yeah, just try to when you're starting a new project or when you're

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

    So yeah, hopefully that's helpful and interesting. IIt's this is just

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

    3 min
  • Fixating on fixing rerenders

    https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render

    https://kentcdodds.com/blog/colocation
    https://epicreact.dev/improve-the-performance-of-your-react-forms

    Hello there friends. So today somebody shared a lightbri with me and I

    assumed that it was just a library to help you track rerenders. But it
    turns out it's like a state management library and that helps you avoid
    rerenders but my initial reaction and thought about tracking re-renders is
    the tools like that.

    I think lead people to jump directly to the natural and obvious solution,

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

    I will apply the re-render hammer to solve this problem and that is react

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

    Here rendering is slow because even if you fix the rerender at some point

    you've got to render like there are necessary renders. And if those are
    slow then that's not a great user experience either. And so if you can fix
    that then maybe you'll be able to avoid needing to worry about rerenders.

    But sometimes you just there's nothing that's slow in particular. It's just

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

    But basically, I think that we can get a lot by using state co-location

    also composability and composing our components, especially like layout
    components, so you don't have to pass.Props through all these other you
    know app components And as with a combination of the way that you structure
    things you often don't have to worry about unnecessary renders because they
    just can't happen.

    So anyway, the library itself was a state management tool and and some

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

    It's pretty awesome. But yeah, those are just some of the thoughts that I

    had when I first saw the name of this librarian. So hope that,Is
    interesting and helpful have a nice day.

    3 min
  • Keep related utilities in a single file

    Hello there friends, so I was thinking this morning about utilities and you

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

    I typically just keep it on one but if it's kind of complicated or maybe

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

    Or other utilities into separate files as well ultimately leading to

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

    So, but there is a reason that we like to keep our files shorter and that's

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

    And so and just the number of concerns it was mixing. That was what made it

    really difficult. And so yeah, the the length of the file that doesn't
    really matter all that much. It's the number of mixed concerns that makes
    things really difficult. So, I would encourage you to.

    Think twice before extracting utility files or your utility functions into

    individual files and maybe first try to organize that file a little bit to
    make it easier to manage. I hope that's helpful and interesting have a nice
    day.

    3 min
  • if statements and "We'll cross that bridge when we come to it"

    Good morning or afternoon or evening friends, I wanted to talk today about

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

    She wants to let the kids do a certain thing or whatever and I've taken to

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

    Of code where I'm doing some calculations and then I have an if statement

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

    Then you're crossing the bridge when you come to it you don't actually need

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

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

    3 min
  • Global gitignore and .ignored files/folders

    Hello there friends So this morning I was just thinking about this little

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

    I was thinking about my ignored global good ignore. So I am I have a two

    rules that will ignore any files that or any directories that end in dot
    ignored in any files that include dot ignored dot in the file name and so
    what this allows me to do is very easy.

    Within the context of my project create a temporary file like temp dot

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

    This can be really helpful when the feature that I'm working on is

    difficult to like navigate to or whatever the case may be. And so yeah,Or
    like it takes a series of steps even if it's not a UI thing if it takes a
    series of steps to get it to this particular state.

    Having a little file that I can use as a playground that doesn't have

    anything to do with get or whatever is really helpful. So yeah, the way
    that I do that is a star dot ignored slash and so that's for directories
    that end in dot ignored and star dot ignored dot star which will ignore any
    of the files that I included dot ignored.

    A couple other things that I have in here that sometimes people don't have.

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

    Also dot VS code. I know sometimes you can set like,Little local settings

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

    I think the biggest one is the diagnord. I also have dot local sometimes.

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

    3 min
  • docker volume prune

    Hello friends so I mostly recording this one so that I can hopefully not

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

    We're going to jump off of Create. React app and use Remix. Don't worry,

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

    So anyway, we're going to be probably using remix and we're probably going

    to use a real database and this presents a lot of challenges because I'm
    here to teach you how to build React applications and I need to limit the
    scope otherwise it the course will be just enormous.

    And so I don't want to teach you how to set up a database and the easiest

    way to do that is to have you use Docker but then doctors and entirely
    different subject as well, that is also not easy. If you've never used it
    before I I'm struggling with it myself.

    But anyway in the process of I'm gonna try and like give you a bunch of

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

    I guess I probably should have had this pulled up and ready for you it's

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

    And I had a lot of trouble because I would try and delete the image delete

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

    And you can also do ducker volume prune and that will remove them all. So,

    that's what I learned.

    3 min

About 3 Minutes with Kent

From the publisher's feed

👋 Hi there! I'm Kent C. Dodds (https://twitter.com/kentcdodds). This is a (week)daily podcast where I give 3 minute thoughts about web development.