Egghead Instructor Kent C. Dodds

Kent C. Dodds

a JavaScript developer who likes open source and teaching.



Unlock all of Kent C.'s PRO Lessons
click for instant access!

Browse Kent C. Dodds's lessons.

showing 110 lessons...

Public Class Fields with React Components

Use ES6 Proxies

Use Jest's Snapshot Testing Feature

Use Jest's Interactive Watch Mode

Track project code coverage with Jest

Add Babel Integration with Jest

Test JavaScript with Jest

Import a non-ES6 module with Webpack

P

Ensure all source files are included in test coverage reports with Webpack

P

Use Karma for Unit Testing with Webpack

P

Use Chai assertions for tests in a Karma project

P

Polyfill Promises for Webpack 2

P

Initialize a Webpack Project with Karma for Testing

P

Expose modules to dependencies with Webpack

P

Add Code Coverage to tests in a Webpack project

P

Optimize React size and performance with Webpack production plugins

P

Grouping vendor files with the Webpack CommonsChunkPlugin

P

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

P

Tree shaking with Webpack 2

P

Validate your Webpack config with webpack-validator

P

Hashing with Webpack for long term caching

P

Intro to the Production Webpack Course

Maintain sane file sizes with webpack code splitting

P

Add a browser build to an npm module

Git: How to change the most recent commit with `--amend`

P

Updating Babel 5 to 6

Getting a Pull Request Merged and Wrapping up

How to squash multiple git commits

How to rebase a git Pull Request branch

How to update a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

How to create a Pull Request on GitHub

Setting up the project locally

How to Fork and Clone a GitHub Repository

Identifying How to Contribute to an Open Source Project on GitHub

How to authenticate with GitHub using SSH

How to install Git SCM

Exploring a Repository

Exploring GitHub

Introduction to GitHub

Redirect the browser using JavaScript

The JSON.stringify API

How to use JavaScript's String.replace

P

The JSON.parse API

P

4 common ways to get a substring from a string in JavaScript

P

Limit Built Branches on Travis

Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support

Adding badges to your README

Add code coverage reporting

js tutorial about Public Class Fields with React Components

Public Class Fields with React Components

4:52 js

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

js tutorial about Use ES6 Proxies

Use ES6 Proxies

1:32 js

A JavaScript Proxy allows you to intercept operations performed on objects, arrays, or functions like property lookup, assignment, invocation, property deletion, and more to add custom behavior. In this lesson we look at how to intercept property lookup with the get "trap" that will allow us to get items starting from the end of the array with ease.

js tutorial about Use Jest's Snapshot Testing Feature

Use Jest's Snapshot Testing Feature

3:41 js

Often when testing, you use the actual result to create your assertion and have to manually update it as you make changes to the feature. With Jest snapshot testing, you can let Jest do this part for you and write more tests and features faster and with more confidence. Let's learn about how you can use Jest snapshot testing to improve your own workflow.

js tutorial about Use Jest's Interactive Watch Mode

Use Jest's Interactive Watch Mode

3:17 js

Jest ships with a pretty amazing interactive watch mode which you can initiate with jest --watch. Let's learn about the bits of interactivity and how this can really improve your workflow.

js tutorial about Track project code coverage with Jest

Track project code coverage with Jest

3:07 js

Jest comes pre-packaged with the ability to track code coverage for the modules you're testing, but it takes a little extra work to make it track untested files as well. Let's look at what Jest can do for you, what you have to do yourself, and how to setup code coverage thresholds so you can work to improving the code coverage numbers for your projects.

js tutorial about Add Babel Integration with Jest

Add Babel Integration with Jest

1:42 js

Jest will default to utilize babel when your node_modules contains babel-jest. Depending on your environment this may already be the case! In this quick lesson, find out why that is and how to ensure that continues to work.

js tutorial about Test JavaScript with Jest

Test JavaScript with Jest

4:04 js

Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this project and see how quick and easy it is to get things going with Jest.

otherjs tutorial about Import a non-ES6 module with Webpack

Import a non-ES6 module with Webpack

4:20 otherjs PRO

When you have a dependency that does not export itself properly, you can use the exports-loader to force it to export the pieces of the file that you need.

otherjs tutorial about Ensure all source files are included in test coverage reports with Webpack

Ensure all source files are included in test coverage reports with Webpack

4:59 otherjs PRO

If you’re only instrumenting the files in your project that are under test then your code coverage report will be misleading and it will be difficult for you to track or enforce improvements to application coverage over time. In this lesson we’ll learn how to ensure all source files are included in coverage reports and how to enforce a specific threshold so you can work toward improving application code coverage.

otherjs tutorial about Use Karma for Unit Testing with Webpack

Use Karma for Unit Testing with Webpack

4:53 otherjs PRO

When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to integrate webpack and Karma directly together. In this lesson we’ll see how to utilize the karma-webpack plugin and reuse our existing webpack configuration to preprocess our test files with webpack.

otherjs tutorial about Use Chai assertions for tests in a Karma project

Use Chai assertions for tests in a Karma project

1:17 otherjs PRO

Chai assertions work great with the Mocha testing framework. In this lesson we'll walk through out to install Chai and karma-chai so you can use the expect assertions in your tests.

otherjs tutorial about Polyfill Promises for Webpack 2

Polyfill Promises for Webpack 2

1:59 otherjs PRO

If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has support for the ES6 Promise API. This means that if you are required to support an old browser, you need to provide a polyfill. Polyfilling is relatively trivial to do with Webpack, but because Webpack itself depends on this particular polyfill, you have to come up with another way of doing so. In this lesson, we'll see how we can use the polyfill.io service to automatically polyfill this API (and others) for us.

otherjs tutorial about Initialize a Webpack Project with Karma for Testing

Initialize a Webpack Project with Karma for Testing

5:22 otherjs PRO

There are several steps involved with setting up Karma to work on your webpack project. In this first step we'll initialize our karma configuration and setup our package.json scripts.

otherjs tutorial about Expose modules to dependencies with Webpack

Expose modules to dependencies with Webpack

3:20 otherjs PRO

When you have a dependency that has dependencies on global variables (like jQuery or lodash) or assumes that this is bound to window, you can use the imports-loader to provide those dependencies explicitly.

otherjs tutorial about Add Code Coverage to tests in a Webpack project

Add Code Coverage to tests in a Webpack project

6:30 otherjs PRO

How much of your code runs during unit testing is an extremely valuable metric to track. Utilizing code the karma-coverage plugin and babel-plugin-__coverage__ plugin, we can get an accurate measure of how well we’re covering the files that we are testing.

otherjs tutorial about Optimize React size and performance with Webpack production plugins

Optimize React size and performance with Webpack production plugins

5:45 otherjs PRO

You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).

otherjs tutorial about Grouping vendor files with the Webpack CommonsChunkPlugin

Grouping vendor files with the Webpack CommonsChunkPlugin

5:36 otherjs PRO

Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).

otherjs tutorial about Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

4:11 otherjs PRO

If you have a multi-page application (as opposed to a single page app), you’re likely sharing modules between these pages. By chunking these common modules into a single common bundle, you can leverage the browser cache much more powerfully. In this lesson we’ll use webpack’s CommonsChunkPlugin to easily share common modules between apps.

otherjs tutorial about Tree shaking with Webpack 2

Tree shaking with Webpack 2

3:23 otherjs PRO

The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6 modules are statically analyzable, Webpack can determine which of your dependencies are used and which are not. In this lesson, see how to take advantage of this awesome feature in Webpack 2.

otherjs tutorial about Validate your Webpack config with webpack-validator

Validate your Webpack config with webpack-validator

4:06 otherjs PRO

It’s quite common to make a mistake while developing your webpack configuration. A simple typo can cost you hours of development time. With webpack-validator, you can save yourself a ton of time by validating that your webpack configuration is free of common mistakes.

Note: Webpack 2 now has validation baked in.

otherjs tutorial about Hashing with Webpack for long term caching

Hashing with Webpack for long term caching

3:46 otherjs PRO

Leveraging the browser cache is an important part of page load performance. A great way to utilize this cache is by versioning your resources. In this lesson, learn how to use Webpack’s hashing feature so you can take advantage of long term caching of your assets.

otherjs tutorial about Intro to the Production Webpack Course

Intro to the Production Webpack Course

2:14 otherjs

There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.

otherjs tutorial about Maintain sane file sizes with webpack code splitting

Maintain sane file sizes with webpack code splitting

2:38 otherjs PRO

As a Single Page Application grows in size, the size of the payload can become a real problem for performance. In this lesson, learn how to leverage code splitting to easily implement lazy loading for your application to load only the code necessary for a particular feature or functionality.

js tutorial about Add a browser build to an npm module

Add a browser build to an npm module

6:16 js

Currently, our library is being distributed as a CommonJS module, but we should support the browser as well. In this lesson, we're going to use webpack to create a UMD (Universal Module Definition) build of our module so users can consume it in a browser.

otherjs tutorial about Git: How to change the most recent commit with `--amend`

Git: How to change the most recent commit with `--amend`

1:49 otherjs PRO

If you make a mistake with a commit and need to make changes or you'd like to update the commit message of the most recent comment, you can do this with the git commit --amend command.

angularjs tutorial about Updating Babel 5 to 6

Updating Babel 5 to 6

5:00 angularjs

Babel 6 was a major change in how Babel works and is configured. In this lesson, find out how to update this Angular application built with Webpack to use Babel 6.

For more information about how modules have changed in Babel 6, see this blogpost by Kent.

js tutorial about Getting a Pull Request Merged and Wrapping up

Getting a Pull Request Merged and Wrapping up

1:13 js

Let’s look at the GitHub commits and list of contributors now that our pull request has been merged. And we’ll wrap this series up with a few tips. Feel free to practice on stack-overflow-copy-paste, and see the Pull Request demonstrated in this lesson here.

js tutorial about How to squash multiple git commits

How to squash multiple git commits

2:53 js

Often, project maintainers prefer that a single pull request be represented by a single commit. It makes the git history cleaner and easier to understand. So before your pull request is merged you’ll want to do an interactive git rebase to squash all of your commits and fix your commit message.

js tutorial about How to rebase a git Pull Request branch

How to rebase a git Pull Request branch

3:39 js

Sometimes your Pull Request can fall behind master in a repository and occasionally that will result in merge conflicts which you have to manage yourself. In this lesson we’ll learn how to use git rebase to update our pull request branch to the latest version of master and resolve merge conflicts with git.

js tutorial about How to update a Pull Request on GitHub

How to update a Pull Request on GitHub

2:57 js

Once you’ve made your code updates locally, all you need to do is commit those changes and push that commit to your Pull Request branch. In this lesson we’ll also talk about how to skip git hooks that may be included in the project when you just need help.

js tutorial about How to Collaborate on a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

2:21 js

It’s not often that you’ll get a Pull Request on GitHub just right the first time you try. You generally will iterate with the project maintainer on your solution before your PR gets merged. In this lesson, we’ll explore some of the tools that projects use to manage contributions to open source projects on GitHub.

js tutorial about How to create a Pull Request on GitHub

How to create a Pull Request on GitHub

6:19 js

Often when making a change, you want to verify your approach with the maintainer or ask them for help. In this lesson we’ll make a change and commit that WIP change. Then we’ll create a pull request requesting help from the project maintainer.

js tutorial about Setting up the project locally

Setting up the project locally

1:18 js

Before you start making your change, you often need to set up your environment for the changes. This is where the repositories contributing instructions come in really handy. In this lesson we’ll get our environment setup and ready for changes.

js tutorial about How to Fork and Clone a GitHub Repository

How to Fork and Clone a GitHub Repository

2:41 js

You cannot push code to repositories that you don’t own or have sufficient permission to. So instead, you make your own copy of the repository by “forking” it. You are then free to make any changes you wish to your repository.

js tutorial about Identifying How to Contribute to an Open Source Project on GitHub

Identifying How to Contribute to an Open Source Project on GitHub

2:15 js

When you find a bug in an open source project, you know exactly the change you want to make. Other times you just want to find a way to contribute. Either way, you’ll need to know how to the project maintainers want to run the project and work with them to come up with an implementation for the fix/feature. And if you don't even know what project to start contributing to, check out this blogpost for inspiration on how to identify a good project to contribute to.

js tutorial about How to authenticate with GitHub using SSH

How to authenticate with GitHub using SSH

3:34 js

Anytime you push code to GitHub, you must be authenticated so GitHub knows you are authorized to make changes. In this lesson we’ll learn how to authenticate with GitHub using SSH so we don’t have to enter our username and password each time we push code to GitHub.

js tutorial about How to install Git SCM

How to install Git SCM

2:15 js

Let’s install the Git Source Control Management software so we can interact with repositories hosted on GitHub.

js tutorial about Exploring a Repository

Exploring a Repository

4:07 js

The basic unit of GitHub is a repository. This is where you code is stored and GitHub allows you to interact with others and with the code in great ways. In this lesson we talk about Watching, Staring, and Forking a repository. We also cover GitHub issues and pull requests and various other stats about a GitHub repository.

js tutorial about Exploring GitHub

Exploring GitHub

1:47 js

GitHub adds a lot of great features on top of git repository hosting. We’ll take a look at some of these features including:

  • How to creating a repository and organization on GitHub
  • How to explore and find projects on GitHub
  • About GitHub gists
  • Searching pull requests and issues on GitHub
js tutorial about Introduction to GitHub

Introduction to GitHub

0:47 js

In this lesson we’ll talk about what GitHub is and how to sign up for a GitHub account so you can contribute to an open source project on GitHub.

js tutorial about Redirect the browser using JavaScript

Redirect the browser using JavaScript

2:13 js

There are two common ways to redirect the browser in JavaScript. Both use window.location but they differ in how they interact with Session History (and hence, the browser's back button). In this lesson, you'll learn how they're different and how to use each of them.

js tutorial about The JSON.stringify API

The JSON.stringify API

8:26 js

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to serialize a JavaScript object or array into a JSON string. This API allows you to customize the serialization very specifically as well.

js tutorial about How to use JavaScript's String.replace

How to use JavaScript's String.replace

5:26 js PRO

In JavaScript, you can change the content of a string using the replace method. This method signature is overloaded with a bunch of different ways to do string replacement in JavaScript. This lesson covers the entire API (including an interesting DSL for the replacement string).

js tutorial about The JSON.parse API

The JSON.parse API

3:35 js PRO

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to parse the JSON string into a JavaScript object. This API allows you to customize the parsing behavior very specifically as well.

js tutorial about 4 common ways to get a substring from a string in JavaScript

4 common ways to get a substring from a string in JavaScript

2:38 js PRO

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

js tutorial about Limit Built Branches on Travis

Limit Built Branches on Travis

3:38 js

By default, Travis will build all branches, tags, and Pull Requests. Because we're building our master branch before we release, we don't need Travis building our releases. Also, we don't care to have Travis build all the branches. So we're going to limit Travis to only build our master branch and Pull Requests by configuring travis via our .travis.yml file.

js tutorial about Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support to Tests using Mocha and Babel

5:02 js

By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the --compilers flag for Mocha.

js tutorial about Adding ES6 Support

Adding ES6 Support

8:35 js

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

js tutorial about Adding badges to your README

Adding badges to your README

2:28 js

It's nice to know the status of a project. Adding badges to your readme gives first-timers and old-timers an at-a-glance peek into the status of your project. In this lesson, we'll add several badges using shields.io

js tutorial about Add code coverage reporting

Add code coverage reporting

3:59 js

Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?