Call Kent C. Dodds: Recent Episodes

Kent C. Dodds

Call Kent C. Dodds is a regular podcast where you call in with a question and Kent answers. Call in with your questions right from your web browser with any device at https://kentcdodds.com/call

Recently I quit my job as frontend development instructor and I'm aiming to get a job as frontend developer. Before I apply for job openings I'm planning to go through several courses, create complex projects for my portfolio and only then apply for the job.

My friends are saying I'm overcomplicating the process and I may get into the flow after I got the work. But as I'm aiming at middle level positions, I want to prepare as much time, as much my budget allows. So I can negotiate salary well with employers and will be more valuable worker.

What are your thoughts on this?

Am I stuck in tutorial heck?

Hi Kent, my name is Tim,

I have a few questions regarding scaling the Epic Stack within a single region.

With the assumption that we are having huge amount of users in one region, my question is would you recommend switching to other database technologies or would you have multiple SQLite replicas in the same region, with each of them being connected to remix apps in a 1-1 manner

My second question is, assuming that we have the epic stack setup, what would you do if one remix server can't just keep up anymore with the load. Would you introduce caching or any types of application or additional threads to distribute and keep up with the work load

Thank you

Scaling Epic-Stack in a single region

I am seeing Lazy initializers are not calling first, but in the diagram it motioned it calls first

React Lazy initializers Call Order

I would love to hear your thoughts on approaching major project refactors. We all have been in that situation where you want to use the newest things available, but the codebase is really old. Do you create a new project? Do you try to update component by component? Is there a "don't go that route"?

How do you approach major project updates

I was approached recently to give a full-day workshop at a conference I'm excited about. But... how hard is it to organize a curriculum? What questions should I ask the organizers ahead-of-time before saying yes?

How I Teach

Organizing your first workshop

Hey, Kent! I'm trying out @conform-to/react, specifically the useForm hook. I noticed that it sets novalidate: true on the form even if JavaScript is disabled. I'm wondering: Why does it add validation attributes to the inputs then if they're not being used for validation anyway, regardless of whether JavaScript is enabled or not?

Conform sets novalidate & validation attributes?

I have been in current team for couple years, and feel my skills are kind of stuck because I have spent too much time fighting with the team refusing to get better. I have learned only from myself, but not much from the others, and can't really fix everything by myself.

Business and Engineering alignment

My time has been spent inefficiently to be honest in the past few years because lots of the time I was staring at smelly and nonsense codes, trying to improve but never get the resource or momentum from the team. I start feeling left behind in terms of the skills the market really needs, and job is not secured considering the layoff happening at recent time.

I'd like to know if you have similar experience, how you handle this, or is it just the time I should leave to seek for better opportunity I can grow? Thanks!

My skill stuck at current job, should I quit?

Hi Kent!

I was wondering, how do you host your videos?

Such as: https://www.epicweb.dev/tips/quickly-determine-whether-a-module-is-bundled

It looks like they're custom hosted, so I was wondering how you do that.

The Epic Stack shows how you save images, and it would be interesting to learn how you host videos, too.

Thank you and best regards, Jan

Skill Recordings
Mux

How do you host your videos?

What's changed from 2018 in regards to how you're able to achieve such high levels of productivity? Do you still spend more time producing than ingesting courses?

How I am so productive

How are you still productive!?

Lots of examples demonstrate wrapping localStorage setters and getters in hook, but no one ever explains why they don't just use localStorage directly.

Best practice for using localStorage in React

With React Server Components getting more traction, this idea of each component being able to fetch its own data seems to getting more popular rather than data-fetching being purely route-based.

In Remix-land, you’ve had a talk about “full-stack components” with a similar concept where a “resource route” can have no default exports but still export a loader and a React component in order to have a reusable component with its own data fetching.

It seems there might be differences between React Server Components and these “full-stack components” though, especially in that Server Components don’t need to be defined in routes but Remix full-stack components do.

Firstly, how are the two approaches different?

I ask, because I know Remix is working on implementing Server Components without the foot-guns, so curious what how the mental model would change in the future.

You, also said that it isn’t a good practice to get into to commonly import components from other routes.

My second question is why is it not a good practice, and can you give examples for cases where it would or wouldn’t make sense to import full-stack components from other routes?

Thank you!

Full Stack Components

Remix Full-Stack Components (vs Server Components)

For 10 years, I feel that I've been separated away from my true love, which was coding. I'm 35 now, married, and have a kid. Some people say that its too late to be a developer now. But, I want to give it just one shot so I wouldn't have any regrets later. This time, I'm following my heart! Away I sail, onto this pathless path.

How to get experience as a software engineer
The Beginner's Guide to React
EpicReact.dev
EpicWeb.dev

A 10 year old itch to make a switch (QA to dev)

looking for direction

Should I go to college or not?

As my career has progressed, the types of problems I face have also progressed - questions like "How should we architect this solution" and "How should we decide between these trade-offs". However, I've struggled to find resources to help me learn these skills. Are there any resources that you would recommend and, in general, how do you continue to learn and progress even as you reach more senior levels of development?

How to get experience as a software engineer

Resources to learn senior development skills

If I was just using plain React, I would use the Context API or even global variables to keep track of the state of an application. Whats the best way to achieve this when using Remix?

useOutletContext

P.S. You can definitely still use context if you like!

Passing state across components in RemixJS

I have to manage my projects and outsource them, otherwise, I would never make enough money to keep my business afloat. I have this problem, where, when I start a project, the product owner will ask questions like, "What happens if you die?" and my best answer to that is, "That's why we have employees". But, when I go to hire employees, sometimes they completely just ignore the stack that I'm using and they go off and do their own thing, which becomes difficult to manage. Should I be ruling with an iron fist, or should I just be more of a liason between my clients and my developers?

How To Deal with Hiring Developers?

I've seen you're using the Express adapter for your Epic Stack and your personal website, as opposed to just running the Remix dev server. Why is that? Are there any performance implications?

Why do you use the Express adapter for your app?

What is the minimum skill set one need for a front end dev job. Do you need to know version control, testing, tooling etc or is js html css and a framework enough, also is typescript considered.

Minimum skills for a Frontend dev job?

With React Testing Library v14, what are the benefits of using the userEvent.setup() for every test vs not including it?

user event docs
user event setup docs

userEvent.setup vs not including it in unit tests

I'm looking into testing tables with testing library and was wondering, how would you approach testing a semantic HTML table with React testing library?

I found this issue (https://github.com/testing-library/dom-testing-library/issues/583#issuecomment-997347372) on Github, but there seems to be no definitive answer.

screen.logTestingPlaygroundURL()
Testing Playground
The Accessibility pane

Thanks a lot!

How to test semantic HTML tables?

Quality contents, quality contribution to React ecosystem.

Appreciation

Is it important to test the code in service files and in ngxs store files in angular? I was under the assumption that testing the component files were standard and I have been doing the same when using angular testing library

MSW

Testing Code in service files and NGXS Store files

can i use the md5 checksum of the json data as key for each row in react? so context here is that i have a bunch of rows to show, and they dont have an id, and i can't use index as their order may change. so i am using the md5 of the JSON.stringify of the rows data. but i am thinking that calculating the md5 or sha1 maybe a thing which shouldn't happen in the UI render cycle, specially cause the render can happen many times as things in the top change?

Is using md5 as key an anti-pattern in react?

can i use the md5 checksum of the json data as key for each row in react? so context here is that i have a bunch of rows to show, and they dont have an id, and i can't use index as their order may change. so i am using the md5 of the JSON.stringify of the rows data. but i am thinking that calculating the md5 or sha1 maybe a thing which shouldn't happen in the UI render cycle, specially cause the render can happen many times as things in the top change?

Is using md5 as key an anti-pattern in react?

When you do your live streams, you take breaks regularly. Why do you do that? What's the science behind it? And what do you do during those breaks to make them as effective as possible?

Centered (use the coupon code EPICFLOW for 50% off the first year of premium).

Why do you take short breaks when coding?

When you do your live streams, you take breaks regularly. Why do you do that? What's the science behind it? And what do you do during those breaks to make them as effective as possible?

Centered (use the coupon code EPICFLOW for 50% off the first year of premium).

Why do you take short breaks when coding?

addEventListener is usually frowned upon as an anti-pattern in the React world. Will this still be the case with Remix? What about in the framework-agnostic future of Remix?

Is addEventListener OK again?

addEventListener is usually frowned upon as an anti-pattern in the React world. Will this still be the case with Remix? What about in the framework-agnostic future of Remix?

Is addEventListener OK again?

What learning path do you recommend for a frontend dev learning to become full stack?

Remix

Frontend to Fullstack

What learning path do you recommend for a frontend dev learning to become full stack?

Remix

Frontend to Fullstack

Starting a new testing project, and I'm wondering if it's a bad practice to set up all the necessary seed data in a beforeAll to run the test suite then or if isolation is critical so that work should be done in a beforeEach. We have an application that requires a decent amount of data to get up and run, so we're trying to figure out what might be the best practices.

Avoid Nesting when you're Testing

Test Data: To BeforeAll or to BeforeEach

Starting a new testing project, and I'm wondering if it's a bad practice to set up all the necessary seed data in a beforeAll to run the test suite then or if isolation is critical so that work should be done in a beforeEach. We have an application that requires a decent amount of data to get up and run, so we're trying to figure out what might be the best practices.

Avoid Nesting when you're Testing

Test Data: To BeforeAll or to BeforeEach

what ways have you organized code for your courses? what are the trade offs and what is you preferred approach today?

Joe's Tweet
Kent's AMA answer

organizing course code

How do you recommend to implement feature flags with Remix? Do you recommend a third patry library? Do you recommend query params?

How to do feature flags with Remix?

How do you recommend to implement feature flags with Remix? Do you recommend a third patry library? Do you recommend query params?

How to do feature flags with Remix?

If there is a specific library that has a functionality you need, would you prefer to rewrite yourself or use the library?

Own Code vs Library

If there is a specific library that has a functionality you need, would you prefer to rewrite yourself or use the library?

Own Code vs Library

Why did you decide to migrate your tests from Cypress to Playwright? Are there any particular advantages? Would you recommend starting using playwright from now on?

Twitter Question

Would you recommend to use Playwright or Cypress?

self-promotion is a really difficult task to do either in public like on social media platforms or when you are among your co-workers and bosses and you wanted to talk about something you achieved but afraid that you will look like a bragger.

How to Shamelessly Self-Promote?

There are a lot of IDEs and text editors. Why did you choose VScode? Why not more complex solutions like Webstorm?

Why are you programming in VScode?

Whilst using remix I realized even after naming a file .client.ts and importing it into the remix page, it does not affect how remix generates html on the server. As an SSR framework it always generates the html on the server and so accessing the window becomes undefined. The solution to that is to run the code in useEffect. I was wondering if there are ways around that instead of having to throw in a bunch of useEffect to solve that. Next.JS has next/dynamic import which can be used and also by setting { ssr: false } , I don't have to worry about window being undefined.

Thanks

Remix: ways around window undefined

How to unit-test a graphical component? For example, how to unit-test a map or a chart in React since there is no text to select and to run tests against?

Testing a graphical component

Will there be a KCD Trilogy? https://EpicWeb.dev (https://kentcdodds.com/blog/i-m-building-epicweb-dev)

Will there be a KCD Trilogy? (Yes)

How do you automate KCD?

How I'm So Productive #automation
ScriptKit
kentcdodds/.kenv

How do you automate KCD?

in response to this tweet: https://twitter.com/Rovolutionary/status/1564338893691953154

Question about testing a reusable component

Why do we need full stack developer?

"Your job as CEO of a startup is to hire generalists to build and then hire specialists to scale. Pretty simple." - Adam Gazdecki

Full Stack Developers... Why?

I'm using Remix to create an app that displays a list of images, similar to a gallery. I am using Cloudinary for storage and Mantine for UI. Since I am using Mantine's DropZones control, it has an onDrop callback to handle dropped files, how could I direct it to Remix's ActionFunction to handle the dropped files since it's not a form, thus there's no post.

Example
useFetcher
useSubmit

Mantine's callback with Remix's ActionFunction

What arguments tend to convince engineers of how important E2E tests are in your experience?

The Testing Trophy and Tearing Classifications
Common Testing Mistakes

How do you convince your team to use E2E?

Seeking advice on pros and cons of migration an application from React/Rails to Remix

Remix Discord
Remix GitHub Discussions

Migration from React/Rails hybrid to Remix

I wanted to know if you had the chance to try it and some of your thoughts on it!

Do you have any thoughts on Playwright?

Hi, I have a personal website and I am wondering if there's a need to add a privacy and cookie policy. I also want to know your suggestions or recommendations around cookie policy managers and privacy policy content. If I were to use a self hosted or public analytics solution like umami or google analytics, do I then need to add a privacy/cookie policy to my site or it's always required to do so especially because of GDPR.

KCD Fathom
Transparency

Using cookie/privacy policies on personal websites

A question for Kent about spending time outside of work to learn new skills, while putting family first.

How I'm So Productive
Zero to Sixty in Software Development: How to Jumpstart Your Career

Leveling up your career while putting family first

To live load data when using a framework like Next.JS, I sometimes use swr or react query to do so. Since I am using the loaders in remix to initially load my data, how do I live load this data with remix, do I need to use swr/react-query with perhaps an api endpoint in my remix routes or is there a better way to fetch data from my remix loaders.

remix-sse-live-viewers

Live loading data with remix

Do you recommend the use of VPN when developing applications or is it something that should be left to the company, if the company requires it then you use it else there's no significant need for it.

Using VPN during software development

Wanted to know Kent's thoughts around the hate around React lately.

Why is there so much hate regarding React lately?

Where do the red lines go when the file gets too big?

todos.tsx
When to break up a component into multiple components -Colocation

Decomposing remix component

I was stuck being "mid" level developer from a long time and I would like to know how to become a senior developer.

Jump from mid level to senior react developer

React app that uses React library and transpiling through webpack and babel. It works on chrome and Edge and not on IE 11.

Remix Browser Support
Remix Philosophy: Progressive Enhancement
Babel present-env
MDN
Can I use...

React app doesn't work on IE11

Hey, it's been 2 years I started using RTL instead of Enzyme and recently I read your article about it and shared on Slack and that generated a huge thread with no conclusion, that's why I've asked on Twitter and now I'm doing the same here. Thanks

userEvent docs

Using userEvent vs fireEvent

I was on the project with some really cool developers(ex Amazon) and I saw them using useMemo inside of the jsx, like this:

So my question would be, do you think this is good practice or would you rather use React.memo for these kind of things....

Fix the slow render before you fix the re-render

useMemo vs React.Memo when it comes to JSX

Do you have some thoughts you want to share about why you stopped asking for calls on https://kcd.im/calls?

How to build a committed following

I am just curious if you have any good, high-quality materials I can learn from about Frontend Architecture.

Fundamentals of Software Architecture: An Engineering Approach
The Pragmatic Programmer: Your Journey To Mastery, 20th Anniversary Edition (2nd Edition)

Learning Frontend Architecture

The Pragmatic Programmer: Your Journey To Mastery, 20th Anniversary Edition (2nd Edition)

Fundamentals of Software Architecture: An Engineering Approach

Any way to pass data we fetched in some parent route to children route. There are cases where routes will need a same data. For example post details to show on details page and edit modal. Also user data is almost required on all the segments

Example of useMatches in the stacks

Querying the data in nested routes

Nivo charts are not rendering in rtl render method.

Nivo charts issue

Internationalization is an essential topic in many projects. However, as there is nothing about i18n in the official documentation, I wonder if you have any advice or best practices.

remix-i18next

i18n and Remix

Hi Kent!

My name is Jan. I'd like to ask you: How do you write tests for accessible error messages with testing library?

By accessible error messages, I mean, suppose you have a form with an input. You have a p tag which renders the error, if there is an error. And that p tag has an id.

And now you pass this p tags id to the input as a value for the aria-describedby property.

So far, I'm using byText to check for the existence of that error in my tests, but I was wondering whether there is a better query for that?

Thank you!

Custom Queries

Tests for accessible error messages

Should we assert on props.onClick while writing test cases in react-testing-library?

Testing Implementation Details

Asserting props.onClick in react-testing-library

Is it a valid pattern to use CatchBoundary's on empty datasets, and is it perhaps recommended by the Remix team?

Discord Thread
Stack Overflow Link
Status Codes
405
404

CatchBoundary on empty datasets

I'm building a new application with Remix and was curious if there were any emergent anti-patterns that you've seen appear in the community. Remix does a lot to structure the application, but sometimes it can feel like the initial structure isn't quite right or is missing some quality of life improvements.

Remix Anti-patterns

Why Framer Motion for animations?

Why Framer Motion for Animations

Hey Kent, when you began working as a developer, did you face issues when problem solving as in getting stuck? How did you manage to get through those? Is there anything that helped you "think better" or "think clearer" to solve issues?

Lack of experience when problem solving

Which is the best way to know inside of an action function in Remix with which button a form was submitted

In this example the name is "action", but again I prefer to call this "intent": https://github.com/remix-run/remix/blob/d0d500849fbd87eace23bb3d479b7c556e314109/examples/multiple-forms/app/routes/invitations.tsx#L70-L75

How to identify which button submits a form

Code review is an important practice and increases code quality as well as develops your dev team. What's your thinking process when starting to review a new pull request?

Dr. Michaela Greiler Makes Code Reviews Your Team's Superpower
10 Tips for Respectful and Constructive Code Review Feedback

Thinking process when reviewing code

Question about reading react sources in order to become a better programmer. Should one do this or it's not necessary at all. And if it's possible, give a clue, please, where to start to read and understand what's going on inside React library.

Do you read the React source code?

Having things isolated from one another makes more sense to me since scaling the application would be easier to do.

Isolate FE and BE apps vs Remix Full Stack

Understanding why its good to continue to use server sider rendering with a custom backend and adding the extra middle layer for Remix to handle

What feedback speed should we aim for in a frontend test suite? What's too slow?

How to understand what should be stored in the state and what should be derived from that state. And also how to understand there isn't need in useEffect hook.

https://kentcdodds.com/blog/dont-sync-state-derive-it

What should be the order of courses that I should take?

When a user enters the tab (btw it's a SPA) I call the api in useEffect and saving the response in redux store. May I know is it better approach to call the api again and again when the user leaves and enters the page? (In this case I see a flicker of loading every time) or storing the response in redux store (UX for this screen is good but is it harming the performance overall?) or storing the response in component state? (Is there any difference b/w this and above approach performance wise?)

Thanks again for this opportunity & Regards Rahimuddin

I recently joined a company where they use a lot of custom hooks for separating logics at the level of a component.

When to break up a component into multiple components

Hello Kent, my name is Joshua Osagie, I'm a software developer focusing mostly on front-end dev (https://www.joshx.dev my portfolio website).

I made this call because you've been a big inspiration and model in my React/JavaScript journey. I've taken some of your courses on egghead.io and recently I told my boss about your EpicReact course.

I really appreciate what you're doing in the React/JS ecosystem, and I do hope you receive this recording.

Thank you!

Startup says that we should be only testing on the backend, since the frontend is changing so fast, so no need to test the frontend, just a couple of integration tests.

Hey Kent! We've been using Hasura to generate CRUD APIs for our small team. Our existing web applications are all using Next.js, and consume the GraphQL API via Apollo Client and TypeScript hooks generated from the remote schema using graphql-code-generator. This workflow has saved us a lot of time, particularly in API development, and I love the generated type-safe hooks. After watching your new Remix content, we're very excited to try Remix as an alternative to Next, mostly to leverage the performance benefits and the effortless error boundaries within nested routes. Do you have some best practices for utilizing GraphQL queries in Remix loader functions? It would be great for us to continue to take advantage of code generation, if possible. Thank you so much!

Links:

Artem Zakharchenko
GraphQL Example in the Remix Repo

I am trying to figure out my stack on the backend side of things for Remix, more specifically services that will allow my server side code to run at the edge be it the server itself or the database or both so that everyone everywhere can use my app at super fast speeds. There are not a lot of resources out there about the best services out there that do this and I am wondering if you have any suggestions where I can begin to look for such services

I love your website! ITS BEAUTIFUL.

I would really prefer to use magic links for authentication rather than username/password. However, I'm running into an issue where several of our clients share a single account login which means many people logging in don't have access to the email inbox. We already don't charge per user, but have you come across this situation before? Any tips on how we can incentivize users to use individual accounts?

I have a question... could the useState be used without using the setter? because a teammate use it in that way to get an item from sessionStorage

const [initialScrollPosition] = useState(() => Number.parseFloat(sessionStorage.getItem('offset') || 0));

and argues that this is so that the component is not unnecessarily rerendered and to read the sessionStorage only once! 🤔 but I think we can use useMemo for those cases but the useState is still used in this form in several components.

useState lazy initialization and function updates

This is a question about: Improve the Performance of your React Forms

In the example, submitting the form successfully will still retain the current values of the fields.

I want the behavior such that"

when the server response says the form is NOT submitted successfully, then the form field will have the current values that has been inputted by the user
But when the server response says that the form is successfully submitted, then the form fields will be blank again.

What's do you think is the best and most performant (and readable) code to approach this in pure React? The approach which will reduce the amount of unnecessary rerenders of the fields?

Thank you!

Updated code sandbox

So this short call is about when to use which advanced react pattern to create re-usable components. Like are there any indications or things that make you think about why one approach is better than the other.

Your thoughts on staying positive and patient with unfriendly co-workers and/or leadership, and how to handle when they are disrespectful towards you.

There are many applications that consist mostly of a single page. Will we get any benefit if we use frameworks like Remix or Next.js for these?

I am using testing library to test my React app and one of my tests leaks or somehow affecting and causing another one to fail if they are in the same file. They work just fine in separate files. What can be the reason for this?

How did you approach versioning and dependency management when you were building this reusable component library at PayPal? I would like to know 1. How did you go about introducing breaking changes? 2. How did you make sure that people are using the latest version of your library or it doesn’t matter if they are using the same version? What’s bad about having different teams using different versions of the same library?

I have a question with regards to building out a minimum viable product. I am comparing using a full stack framework like django, that includes authentication and arm’s and routing and all the batteries builtin, versus creating a react app with all the backend farmed out to saas offering like auth0 for auth and the millions of sql/nosql/graphql.

With django approach, you have simple dynamic pages with server side generation and when you’re ready you can separate out the frontend to something built with react, import django rest framework and have your backend api ready to go

With the saas approach you can just focus on the front-end and scale as much as you want. And then build your own custom services to reduce costs when you’re ready. But you have to deal with integrating all those saas services to your application.

Remix Docs

Hello Kent, I learnt software development in a self-taught path and I really didn't do a good job (Now I know) because when I hear words like Serverless and others, I don't have the first clue what they are talking about. In summary, I'm clueless about a lot of things and I need help.

Your thoughts on Alfred and ScriptKit.

We're observing a lot of feedback about React and started to think "why". Why not Svetle or Vue? Why not something else.

And it's also inspired by what you have put on the epicreact.dev landing page about why React is awesome.

One of the good examples for more context please read: https://dev.to/jfbrennan/really-why-react-5958

Why I Love React
The Beginner's Guide to React

If useState contains a simple value like string or int, setting a new value that is the same as the existing value will not cause the component to re-render. However, if useState contains an object and I update the state with a new object that contains the exact same values, it will trigger the component to re-render. The React documentation says that is used Object.is to compare values. My 2 objects are identical, so why does the re-render happen?

useState lazy initialization and function updates

Trying to figure out whether a CSS in JS approach will take a significance performance hit when using Remix, and whether it would be better to stick to remote and plain stylesheets.

Also wondering whether Remix has any Babel-like class naming structure, or if there might be support for Babel in the future.

Why Remix over other React frameworks?
How Remix makes CSS clashes predictable

As web developers, we come across a lot of topics and want to build a solid foundation on them. We also need to know what to focus on at certain stages in our journey.

Deciding What Not To Learn
How to get started with programming
Dealing with FOMO
How to get experience as a software engineer
How to React ⚛️

Can I test drag and drop with React Testing library?

Hey Kent,

Thanks for the chance to ask you a question. This is about protected route and 3rd party payment flow, ending in a re-direct back to my website. The user would need to re-login again. How to avoid that?

Super Simple Start to Remix
Stop using client-side route redirects

As a designer/developer on a new team, where I'm also the most experienced, but haven't been given the path to recommending change wherever necessary. In other words, I was brought on to be an individual contributor, not specifically a consultant, although it's very obvious in many places that the app lacked a designer, and that the code lacked senior developers. For context, they don't do JavaScript testing because "the team was new when we started and we wanted them to get off and running." So the question is how one can implement change, and be a useful consultant to make the product better for the user, but do so diplomatically. Or does one just do one's job and not make suggestions?

Business and Engineering alignment

We are looking to build an open source website for students of our organization in college. What are some tips that can help with the building and management of such a project.

We use RTL at work and I also use it for personal project. I understand what RTL is and what it isn't. My question is what are you using alongside RTL in terms of frontend testing? At work I'm pondering implementing Visual Regression testing on a large React application to cover things like unwanted CSS changes, but am also afraid of the overhead. Also, have you found any times that unit testing > RTL?

Chromatic
Storybook
Percy.io
Applitools
The Testing Trophy and Testing Classifications

I wonder if you have any thoughts about creating web components in React.

When relying solely on passwordless magic links for signing users in to your application, you make the timely delivery of these links to people's inboxes a critical dependency for using your app. Though unlikely, it's not impossible that a mail service provider experiences an outage blocking your users for logging in. Less dramatic, but equally likely, your application might get throttled which could cause these login emails to arrive after the included links have already expired. What are your thoughts on this?

I wonder how you created the design for kentcdodds.com.It would be great if some resources or tips are shared.

Design for Developers by Sarah Drasner
Refactoring UI by Adam Wathan and Steve Schoger

How should I think about pricing a workshop when demand for it is low? I enjoy the topic so I'm happy to teach it, and I want to be paid fairly for my time, but I don't expect to get much re-sale value out of it.

I see you use XState on your new website. Why and how do you use it? Are there any best practices and pitfalls?

Implementing a simple state machine library in JavaScript

What do you use for dealing with forms in React?

Improve the Performance of your React Forms

I was wondering how to decide when the html is too trivial to turn into a component. For example turning msg into a component. Maybe it's useful for styled components? Thanks

When to break up a component into multiple components

Finding out more about the best places to use Fly.io's request replays, when to use it and when not to use it.

How I built a modern website in 2021

In the "Fix perf death by a thousand cuts" exercise in the Epic React Performance workshop, extra credit 3 "write an HOC to get a slice of app state": why is forwarding the ref in the HOC required to actually prevent all the Cells from re-rendering?

06.extra-3.js
Production deploy of that example

Your website currently uses magic links to sign in users. This seems to be a completely secure method of authentication, yet is still quite uncommon compared to the traditional username + password combo's. Why do you think that is? If it's just as secure, or perhaps more secure, how can we improve adoption of this method?

How I built a modern website in 2021 (I've got a section in here that describes the auth flow)

I need some tips to write a course and suggestions to choose the app idea, decompose it into lessons, things to focus on, deploy the app and writing tests.

Taylor Bell Chats About Effective Teaching
How I Teach

What brings you to Remix over other React frameworks like Next and Gatsby? Remix is going open source soon so I'd love to pad my excitement even further with knowing truly what it brings over its competitors.

How I Built a Modern Website in 2021 (blog post)
How I Built a Modern Website in 2021 (slides)
Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris

I'd like to learn more about paypal-scripts. What tasks did the package cover: linting, transpiling, CI, deploy, etc. Please share any advice you can about starting a similar toolkit.

Tools without config
Concerning Toolkits

Cam asks Kent his thoughts on the uprising JS framework, Svelte.

Remix

I wonder how you created those architecture diagrams with that hand drawn feel to them.

How I built a modern website in 2021
Excalidraw

I come from non-CS background, MIS. Since you also come from a non-CS background, did you find that you needed to fill in any holes in your knowledge to get to where you are today?

Epic React has been on my radar ever since you started teasing it on Twitter. To me it feels like a "must have" that I "can't have". Obviously, it has a pretty hefty price tag, which I'm sure it more than warrants. But because of that price tag, it becomes unaffordable to me personally, and with my workplace being quite small, they're not always as forthcoming as I'd hope when it comes to paying for something like this either.

I was wondering if you've ever considered adding payment options to your courses to make them more affordable in the short term, allowing people like me to pay over several months, potentially via a service similar to ClearPay or Klarna, or whatever else is out there!

I'm sure there are more intricacies to something like this, but would love to hear your thoughts!

Thanks!

EpicReact.dev Credits

Which of the approaches you have talked about (prop getters & compound components) is best for building UI-free components? Inspired by this thread.

P.S. I think you should definitely rename prop getters to the IKEA pattern.

downshift
How to give rendering control to users with prop getters

Libraries comparison: pros and cons of cypress Component Testing Library vs RTL

Cypress Testing Library

That’s a follow-up question to Call Kent Podcast 09 “How to style?"

Did you mention on "Call Kent Podcast 09 - How to style?" the remix capability to get the link tags removed from the page when the route is no longer active and with that, the styles could get removed as well, helping to avoid CSS clashes.

How does Remix manage situations where the page that is active has multiple components, and those components are using different CSS files and potentially changing the same selector style (both could be changing the p tag)? Or even if the page itself is using multiple CSS files?

How does remix manage situations where it needs to handle multiple CSS files that need to be used on the page that is active and it still needs to avoid clashes?

Thanks for answering, Kent!

Want to see what would be your opinions regarding MirageJs and if it could be a potential replacement of MSW.

There's no doubt that Kent C. Dodds is a top teacher on the web helping people write quality software. What does the work life balance look like for someone at this level? How can one continuously be on top of the latest changes on the web, while maintaining that work life balance.

Coming up with a huge precedence from testingjavascript people can tend to come up with unfair expectations for other content such as "Epic React", I would love to hear your thoughts on what to expect from your content while looking for seniority levels

The Coding Career Handbook
How to get experience as a software engineer

Question about documentation / tests / naming convention as an important software engineer skill

Nowadays, we have a bunch of approaches that we can take to style our applications, like: pure CSS, pre-processors, CSS Modules, utilities, component UI’s, CSS in JS and for some of them, we have another bunch of libraries that we can choose as well. Sometimes we can get lost in the middle of them trying to find the better one for our needs.

What do you take into consideration when choosing an approach to style?

Do you think that some use cases fit better in one approach than in another?

Is there a particular approach that you believe is ahead of the rest? Or do you prefer?

So, how to style?

Why do you think there’s still so much hype around JamStack and SSG, when form submissions and server redirects for data mutations tend to work better a lot of the time? There’s not a lot of ecosystem interest (outside of Remix) to lean on this baked-in superpower of the web, and I find that interesting. This is less about the tech, and more about the psychology in the JS ecosystem. Maybe it’s a funding or marketing thing?
next-runtime

I’ve been feeling burned out lately and wanted to hear how do you deal with it.

Boundaries, Updated and Expanded Edition: When to Say Yes, How to Say No to Take Control of Your Life
Self-Compassion: The Proven Power of Being Kind to Yourself

Boundaries Updated and Expanded Edition: When to Say Yes, How to Say No To Take Control of Your Life

In the book Make it Stick: The Science of Successful Learning. They suggest that for mastery of a subject you should be using interleave curves. The analogy given in the book to explain that is while practicing baseball you should be switching between straight and curveballs instead of doing just one or the other. What does that look like in practice while studying a topic?

As a self taught dev who is looking to get their first job in the industry, how do you think the best way to balance this course and personal projects is? What do you think is the best use of my time as a developer to not only gain the most from this course, but also show off and apply the knowledge.

How to get experience as a software engineer
Solidifying what you learn

Asking Kent for insight into how he finds new technologies to use for his projects.

Zero to 60 in Software Development: How to Jumpstart Your Career - Forward 4 Web Summit

What’s the difference between screen.getByText and const { getByText } = render()
More generically - what’s the difference between methods originating from these different objects

Common mistakes with React Testing Library - Not Using Screen

So I have a MainComponent, inside there are some “remote” components like OfficeSelect, that fetches data asynchronously on mount, using axios, everytime I test MainComponent I get the “act” warning on that OfficeSelect fetch, how do I deal with that?

Fix the “not wrapped in act(…)” warning

bit.dev is one option I’ve considered, but I’m curious what you would do.