React and the Vanishing Network (Dark Mode)

React and the Vanishing Network

How to be an Epic Web Dev

Career and life advice from my career and life

And Now You Understand React Server Components

You want to keep up with the future of React. React has evolved over the years and continues to push the component model further and further. Out of all the evolutions of React, server components are certainly the biggest advancement. It expands the component model further than ever before and as a result, requires some rethinking. Seasoned React developers need to unlearn the way we used to do things to be able to understand the improvements that React Server Components offer. In this talk, Kent will guide you through React Server Components start to finish so you can understand how React Server Components work and set you off on your journey into the future of components everywhere!

What Makes the Web Epic

The web is a special platform. It's different from anything else you can build on as a result of its openness and freedom from a central authority. It's about collaboration and cooperation. As a result, there's a degree of freedom we have on the web despite its weaknesses. In this talk, I want to explain why you should double-down your investment in web technologies in your own career and company offerings. If you do, we can keep the web epic for many years to come.

Stop Lying to Your Users

Chances are your app is lying to your users. I know you don't mean it. Building truthful apps is hard. But you've been lied to by so many other apps you use and it is extremely frustrating. This frustration not only makes everyone's day worse, but it also makes users get out of that app as quickly as possible which for most apps is bad for the bottom line. So what's the lie? Well you'll have to come to the talk to find out! Don't worry though, I'll not only explain to you what the lie is, but I'll also show you how to correct it and delight your users in a way that moves the needle.

Making Felix Felicis

Bring your wand and potions ingredients, because we're going to make liquid luck! In my career, I've worked extremely hard, but I've also experienced a lot of what some might call "luck." Some of what I've done is reproducible, and some of it is not. But I've learned a lot about how to increase my "luck surface area" and then make the most of the opportunities that come my way. In this talk, I'll share the ingredients I've used to make my own luck, and I hope it can help you make yours. Don't forget to bring your spell book!

The Epic Stack

The Epic Stack is an opinionated project starter that allows teams to ship their ideas to production faster and on a more stable foundation based on the experience of Kent C. Dodds and contributors.

Caching for Cash 🤑

It's often said that the two hardest problems in programming are caching, naming things, and off by one errors. Some degree of caching is required in almost every application to drastically improve performance. Unfortunately, not only is it easy to get wrong, there are also lots of different layers and methods to implement caching with different trade-offs. In this talk, Kent will explain the key principles of caching. We'll go through several real world examples of issues where caching is a great solution. We'll also explore different approaches and their associated trade-offs. We'll cover a ton of ground here. This one's gonna be fun!

The Web's Next Transition

The web. What started as a document sharing platform has evolved into an application platform. The web has been through a number of transformations over the years. From static HTML files to dynamic server-generated HTML responses. Then to REST or GraphQL APIs consumed by JavaScript-heavy clients with the Jamstack. The web is entering a completely new transformation. Modern infrastructure and techniques have changed the rules of what it means to make an excellent user experience. In this new future, what's old is new and what's modern is lacking. In this keynote, Kent C. Dodds will show you how this transformation will impact your user experience, your development productivity, and your business goals. The future of the web is distributed. It's faster. It's cheaper. It's exciting. Kent will show you what you can do to stay in front of it (and no, it's not web3).

Bringing Back Progressive Enhancement

One fun (sometimes frustrating) part of the web is that your application must run on countless variations of devices with different configurations, screen sizes, and capabilities. Over the years, technology has improved and we've been given some really awesome APIs to enhance our applications to make them more useful despite the uniquely challenging (and awesome) distribution mechanism of the web. Unfortunately, when we use these new features of the web platform to enable our application, we limit our application's usefulness to the trade-offs of those features which has surprisingly negative impacts (even if the device itself supports those features). In this talk, we're going to learn the true scope of Progressive Enhancement and what can be gained by using tools and techniques that allow features of the web to enhance your user's experience rather than enable it.

The Stack of the Future

When a brilliant idea strikes, you want to hit the ground running and focus on building out your idea. Unfortunately, for any ambitious project, it takes a significant amount of time configuring the tools you'll ultimately need to make your idea a reality. Far too often we either under prepare and our MVP-shortcuts end up being a pain in the neck for the next few years if we're successful, or we spend so much time in the setup process that we lose all motivation. In this talk, I'll show you how Remix can help you get started with a solid foundation so you can focus on building out your ideas. And when your MVP turns into a money maker, you won't feel like you have to rewrite your app from scratch! And for those of you starting new projects from scratch on a regular basis, I'll show you how you can make your own Remix stack to create these projects just like you want them again and again.

Server-side Auth with Remix, Prisma, and the Web Platform

In this talk, we'll get a live coded demo of building custom hand-rolled authentication. When you have the right tools (and we do), authentication can be quite simple and secure. This is more (and better) than just: "Install this library and you're good to go." When we're done we'll have our own auth code that can evolve with our ever-changing requirements without a need to learn some library-specific APIs. We'll be leveraging the Web Platform the way it was meant to be done to give us simple and secure server-side authentication for the web.

Super Simple Start to Remix

This a talk version of the post: https://kentcdodds.com/blog/super-simple-start-to-remix

How I Built a Modern Website in 2021 (full)

I just released a complete rewrite of my website. This isn't your regular developer blog though. You can actually log in, record some audio for a podcast, choose a "team" to be a part of, connect with discord, and much more. I'm using some of the coolest modern tech around including React, Remix, Prisma, Postgres, Redis, Fly.io, tailwind, TypeScript, and more! I want to take you on a tour of some of the highlights and talk about some of the problems I faced and decisions I had to make while building a brand new modern website in 2021.

How I Built a Modern Website in 2021

I just released a complete rewrite of my website. This isn't your regular developer blog though. You can actually log in, record some audio for a podcast, choose a "team" to be a part of, connect with discord, and much more. I'm using some of the coolest modern tech around including React, Remix, Prisma, Postgres, Redis, Fly.io, tailwind, TypeScript, and more! I want to take you on a tour of some of the highlights and talk about some of the problems I faced and decisions I had to make while building a brand new modern website in 2021.

Don't Solve Problems, Eliminate Them.

Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.

Consume ➡️ Build ➡️ Teach

How do you level up? How do you jumpstart your learning when getting into something new? Nobody has more than 24 hours a day, so how do you maximize the impact of your limited time? In this keynote, I'm going to tell you a bit of my own story, and some tips and tricks that I've learned so you can be as productive as you can be at learning new things and solidifying that knowledge so it's there when you need it.

Building the Open Source Community We Want

What kind of world do you want to live in? The world of Open Source Software is supremely vast, and it's growing. We can't sit idly by, coding alone in our closets with an attitude of "if you want something done right, you have to do it yourself." We don't want to live in a world like that. The community we want to build around OSS requires intentional effort to maximize the happiness of everyone involved. And the rewards of working toward that goal are serene. I'd like to personally welcome you to the open source community. Bring your distinctiveness and help to make our world a better place.

React, the future is now

Recently, React has received a number of incredible features that will make our React applications faster, smaller, and the codebase easier to write and maintain. Let's explore some of these new features!

The introduction to React you've been missing

In this talk I teach React from scratch in a single index.html file with no magic up my sleeves. We start with a basic Hello World in vanilla JavaScript and incrementally iterate through React APIs and JSX. We continue with introducing more of React's APIs.

Learn React

This course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React fundamentals, you'll come out of this course knowing what problems React can solve for you and how it goes about solving those problems. You will have a good grasp on what JSX is and how it translates to regular JavaScript function calls and objects. Each lesson in this course is just a single index.html file which will help you keep your focus on learning React and not distracted by all the tools that make production applications work. The course wraps up with a lesson on how to move from these index.html files to a more production ready development environment and even how to deploy your app to a great service like Netlify. Enjoy!

JS@PayPal

JavaScript + PayPal = ❤️

Confident React

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps? Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended.

Advanced React Patterns

Making React components that can be used in multiple places is not hard. What is hard is when the use cases differ. Without the right patterns, you can find yourself with a highly complex component that requires a lot of configuration props and way too many if statements. With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need. I have contributed to and published some of the most successful React components in the React ecosystem. Through that experience, I've learned and taught patterns that enhance flexibility, usefulness, and simplicity.

Simply React

One of the things I love about React is how easy it is to encapsulate UI code into a component. I love this because it makes reuse of those components easy. But is it easy? I’ve made my fair share of components that had to accept a bunch of props to handle a growing list of different use cases resulting in a complex render function full of conditional statements and a confusing API for people using this “reusable” component. Eventually it becomes too much and I had to make a new version of the same component to handle slightly different use cases. Lots of code/bug duplication there because my reusable component wasn’t reusable enough. There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we’ll go over 5 of these patterns that will make your React components more useful.

How open source has made me and the stuff I make better

The open source community and ecosystem have made me a better software developer and helped me develop better software. I get to see how other people work. Other people get to see how I work. It encourages me to put forth my best effort, think critically about the software I'm creating, and ensure it has great documentation. It's also easier to develop software in an isolated environment like an open source project. In this talk, we'll see how open source can help improve your skills and improve the software that you create. This makes you a much more skilled, marketable, and gives you work that you can share with the public and contribute to the open source ecosystem.

How to React

Learning React can be confusing. React is a library, but even more than that, React is an ecosystem of tools that you piece together to create a program. This is a powerful property of the React community, however that ecosystem can be frustratingly distracting when you’re a newcomer trying to get your feet wet. The key to avoiding this frustration and confusion is to learn React (and its ecosystem) in the right order. In this talk, we’ll go over what that order is and give a roadmap so you can have a vision of where you’re going. Let’s learn how to React!

Testing React and Web Applications

Developing and deploying production applications with React is one thing, but being confident that you’re not shipping a hidden bug is something else! Knowing how to configure and use testing tools is critical to your success in shipping with confidence, and React's model opens up testing productivity most of us couldn’t even dream of before.

Testing Practices and Principles

The goal of a test is to increase your confidence that the subject of your test is functioning the way it should be. Not all tests provide the same level of confidence (some provide very little confidence at all). If you’re not doing things correctly, you could be wasting your time and giving yourself a false sense of security (even worse than having no tests at all).

All About babel-plugin-macros

babel-plugin-macros is super cool

Write tests. Not too many. Mostly integration.

Guillermo Rauch tweeted this a while back. Let’s take a quick dive into what it means.

Maintainable CSS with React

TODO

Tools of modern JavaScript projects

The cry of JavaScript fatigue still echoes in the minds of developers everywhere as they try to wade through the waters of outdated blog posts, tutorials, Stack Overflow answers, and GitHub repos. Just when things seem to start settling in JavaScript, something new comes to shake things up a little bit. I’ll be you tour guide as we navigate through the tooling set up of a modern JavaScript project that’s leveraging these tools in a way that actually enhances the experience of users using the project and developers working on it.

Concerning CSS in JS

I no longer care about: specificity, CSS linters, CSS preprocessors, vendor prefixing, removing unused CSS, finding CSS dependencies and dependents. I now care more about: whether it’s fast enough, whether it’s small enough, whether it’s familiar enough. These are some of my trade-offs. Because I use CSS-in-JS. I’ve made trade-offs because I write HTML-in-JS. Despite these, I still do it, because the cost is minimal enough, and the benefit is great enough. Let’s tell stories, talk use-cases, explore trade-offs, and inspire more innovation to make the CSS-in-JS trade-offs less trade-offy.

Styling React Components

The CSS-in-JS movement is strong in the community and we're still figuring things out. But one thing is clear: keeping your UI logic, markup, and styles together to make a single component is a great way to build applications.

Code Transformation and Linting Workshop

Have you ever needed to change the API to a widely used function in your JavaScript application? Find and replace can really only take you so far. What about the frustration of iterating over and over again on pull requests because of simple code mistakes developers keep making? These are only some of the problems that you can solve with a basic understanding of Abstract Syntax Trees and the tools you can use to inspect and manipulate them.

Testing Workshop

1. Unit Testing with [Jest](http://facebook.github.io/jest) 2. Integration Testing with [Jest](http://facebook.github.io/jest) 3. End to End (E2E) Testing with [Cypress](https://www.cypress.io/) We'll mention other forms of testing, but these are the types we'll focus on and learn in this workshop. We'll learn about the benefits (and tradeoffs) of [TDD](https://en.wikipedia.org/wiki/Test-driven_development). We'll learn how to configure the tools and why, when, where, and what to test.

Faster JavaScript

This talk is about how a program slicing tool can help us learn code faster as well as ship less code (which will load, parse, and run faster).

Template

This is the template for my decks.

Testing React with Jest

This is a talk about testing React with Jest

Testing React with Mocha, Enzyme, and Chai

This is a talk about testing React with Mocha, Enzyme, and Chai

Writing an Open Source JavaScript Library

We’ll get started by giving an overview of what we’re going to build, then we’ll get our blank slate going with a package.json. We’ll talk about the significance of this file and the various properties we’ll use to help us with the distribution and management of our module and its dependencies. Then we’ll add the tooling needed for testing our library and adding code coverage. This is something that’s really important to get working early on in the project, so we’ll get it done early. Then we’ll jump into setting up the tooling for transpiling our source code from ESNext to ES5 so we distribute code that can be consumed by people delivering to older environments (like old Node or browsers). Then we’ll add the tooling we need to distribute a browser version of our library so people can consume our library in the context of a browser (without having to bundle it themselves). As contributions to our library grows, it’ll be important to be able to check that the contribution passes our unit tests automatically without having to pull down every pull request to test it locally. So we’re going to add continuous integration with TravisCI to automatically run our tests and report the code coverage reports to codecov.io With this infrastructure set up, we’ll then add semantic-release to automate releases of our library. This will help us reduce a great amount of human erro

Webpack Deep Dive

We’ll start out making sure that everyone’s on the same page with what webpack’s role in application development is and some of the core concepts like loaders and plugins. Then we’ll look at the application we’ll be testing our knowledge on and start it off with a basic webpack configuration. Then we’ll set up unit testing with Karma and webpack as this is one of the most important things to get right early on. We’ll go through the whole process including setting up code coverage. After lunch, we’ll dive into some of features that come with webpack which can be used to improve the performance of our applications. We’ll cover code splitting, fine tune our browser caching setup, and wrap up with the CommonsChunkPlugin to optimize how we share common code between different parts of the application.

Managing an Open Source Project

Awesome! You’ve made it big! You’ve published an open source project and people are actually using it to make the world a better place. Achievement unlocked! Great job! But wait… what’s this? An issue? Oh, it’s just a bug. Pretty quick and easy. Fixed, released, done, #likeaboss 😎. What’s this? A PR? How cool! Wait… That’s not quite right… Oh, a question! Cool! And another! And another… eh… and another… Uh oh… I think I’ve just sold my soul to this project. You start an open source project to scratch your own itch and suddenly other people start using it and they need your help. This can easily start eating up your time big time and before you know it, your kids start feeling neglected. I’ve had to deal with this in a few projects and I’ve learned a thing or two about work/life/oss balance. I have a few tricks that help you make the project manage itself a bit more while still being friendly and helpful to users of the project.

More than you want to know about ES6 Modules

ES6 Modules have been standardized and many have already started using them. They have a lot of benefits over CommonJS, AMD, and Globals. Unfortunately, there are many ways to deal with modules with this new syntax and it can be a bit confusing. In this talk, we'll explore the different ways you can use the new syntax and when you'd use the different methods. We'll also investigate what's going on at a high level. Buckle up for a firehose of ES6 information .

The First Pull Request

“Feel free to submit a pull request.” For some, this is a welcome invitation, but for many developers, pull requests are intimidating, discouraging them from contributing to the community. This talk demonstrates how easy and fun it is to create a pull request as a first timer.

Testing React with AVA workshop

This is a workshop for how to test React code with AVA.

Zero to 60 in software development

Our industry has a problem. We have a "talent shortage," so we're loading the industry with new developers from various bootcamps, but companies aren't willing to hire them. So these new developers are left to themselves to try and find ways to develop the skills they need to be "marketable." I graduated from college in April 2014, just shy of two years ago. In that time, I've been able to learn a ton, build a bunch of stuff, teach workshops, create egghead screencasts, speak at conferences, and generally contribute quite a bit to the JavaScript community. In this talk, I'll cover some solid principles of things that I’ve learned in my experience. This will help new-comers to jumpstart their career. And help old-timers know how they can help new-comers.

Writing custom Babel and ESLint plugins

The Abstract Syntax Tree. It sounds a lot worse than it is. It’s actually quite simple and enables some powerful tools. BabelJS uses it to transform your code from ES.Next to ES5. ESLint uses it to lint your code. And with a knowledge of how it works, you can extend these and other tools to do some mind bustingly powerful things. Prepare to be amazed by ASTs!