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 113 lessons...

JSON Web Token (JWT) Introduction

Basic Server Setup for JWT Authentication

Client Setup for JWT Authentication

JWT Authentication Setup

P

Server JWT Authentication Setup

P

Auth Interceptor in Angular for JWT

P

Finalizing JWT Authentication with AngularJS

P

AngularJS Batarang

New in Angular 1.3 - Stateless Filters

P

New in Angular 1.3 - $scope.$watchGroup

New in Angular 1.3 - Bind Once

P

New in Angular 1.3 - $q constructor

P

Introduction to ng-messages for AngularJS

Reusing and Overriding ng-messages

Using ng-messages with ng-animate

P

New in Angular 1.3: ng-model-options updateOn and debounce

P

Using ng-aria to automatically improve your AngularJS accessibility

New in Angular 1.3: Updates to forms

P

New in Angular 1.3: ng-model-options getters and setters

New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

P

React and Firebase with ReactFire

P

Intro to Webpack

Webpack Loaders, Source Maps, and ES6

P

Webpack CSS, Preprocessors, and url assets

P

Introduction to angular-formly

Angular with Webpack - Introduction

Angular with Webpack - Requiring Directives

P

Angular with Webpack - Requiring Templates

P

Angular with Webpack - ES6 with BabelJS

P

Angular with Webpack - Requiring CSS & Preprocessors

P

Angular with Webpack - Testing with Karma, Mocha, and Chai

P

angular-formly: Custom Templates

angular-formly: Custom Validation

angular-formly: expressionProperties

angular-formly: templateOptions

angular-formly: Default Values

angular-formly: Default Options

angular-formly: Extending Types

Angular with Webpack - Production Setup

P

Introduction to apiCheck.js

P

Angular with Webpack - Uglifying your JavaScript

P

Angular with Webpack - Production Source Maps

P

Introduction to How to Write an Open Source JavaScript Library

Setting up GitHub

Configuring npm and creating a package.json

Creating the library and adding dependencies

Pushing to GitHub

Publishing to npm

Releasing a version to GitHub

Releasing a new version to npm

angularjs tutorial about JSON Web Token (JWT) Introduction

JSON Web Token (JWT) Introduction

1:23 angularjs

A basic introduction to the mechanics of JWTs and the application we will be building in this lesson series.

angularjs tutorial about Basic Server Setup for JWT Authentication

Basic Server Setup for JWT Authentication

1:44 angularjs

Creating the basic node server to serve up random users via API endpoints.

angularjs tutorial about Client Setup for JWT Authentication

Client Setup for JWT Authentication

3:33 angularjs

Creating a basic Angular application to access the random users resource. Also setting up CORS on the node server to enable the resource sharing across different domains (ports in our case).

angularjs tutorial about JWT Authentication Setup

JWT Authentication Setup

4:15 angularjs PRO

Setting up a login on the angular app and an authentication endpoint on the server.

angularjs tutorial about Server JWT Authentication Setup

Server JWT Authentication Setup

4:03 angularjs PRO

Adding JWT support to the server. Signing a JSON object as a payload and sending the signed token to the browser on authentication.

angularjs tutorial about Auth Interceptor in Angular for JWT

Auth Interceptor in Angular for JWT

7:53 angularjs PRO

Adding JWT support to the client. Storing the token in local storage, then creating a http interceptor to add the token to requests made to the server. Also implementing logout.

angularjs tutorial about Finalizing JWT Authentication with AngularJS

Finalizing JWT Authentication with AngularJS

8:13 angularjs PRO

Adding middleware to the node server to decode and verify the token sent from the client. And tidying up the rest of the application. Finally, a walkthrough of the whole process.

angularjs tutorial about AngularJS Batarang

AngularJS Batarang

4:49 angularjs

AngularJS Batarang is a powerful Chrome extension that makes your developer tools "Angular aware".

angularjs tutorial about New in Angular 1.3 - Stateless Filters

New in Angular 1.3 - Stateless Filters

3:50 angularjs PRO

Filters in AngularJS can be a big performance hog. As of Angular 1.3, filters are "stateless" by default. This means that given the same input, a filter will not even run, and simply return the previous value.

angularjs tutorial about New in Angular 1.3 - $scope.$watchGroup

New in Angular 1.3 - $scope.$watchGroup

2:42 angularjs

With Angular 1.3 you now have access to $scope.$watchGroup. This allows you to monitor an array of expressions for change. This is useful when you want to perform the some logic when any item in a group changes.

angularjs tutorial about New in Angular 1.3 - Bind Once

New in Angular 1.3 - Bind Once

5:33 angularjs PRO

AngularJS's two-way binding is one of the "killer features" of the framework. The problem is that too many bindings can cause performance issues! Many times, all you need to do is bind a single time to get the data to display, and don't need dynamic two-way binding. In Angular 1.3, they've added new syntax to enable one-time data bindings.

angularjs tutorial about New in Angular 1.3 - $q constructor

New in Angular 1.3 - $q constructor

2:52 angularjs PRO

In AngularJS 1.3 there is a nice shorthand for $q.defer(). In fact, it removes the need for calling defer at all!

angularjs tutorial about Introduction to ng-messages for AngularJS

Introduction to ng-messages for AngularJS

4:13 angularjs

ng-messages is a directive added in AngularJS 1.3 that is used to display messages to the user. This is usually in relation to form error messages, and cleans up the syntax required to show feedback messages to the user.

angularjs tutorial about Reusing and Overriding ng-messages

Reusing and Overriding ng-messages

2:39 angularjs

One really handy trick with angular's ng-messages module is the ability to reuse messages with ease. With reuse comes the need to override messages for specific use cases.

angularjs tutorial about Using ng-messages with ng-animate

Using ng-messages with ng-animate

4:48 angularjs PRO

ngMessages works great with AngularJS's ngAnimate and makes the appearance of your messages more awesome.

angularjs tutorial about New in Angular 1.3: ng-model-options updateOn and debounce

New in Angular 1.3: ng-model-options updateOn and debounce

3:35 angularjs PRO

Now in Angular 1.3 you can cause updates to your ngModels to only occur for a given even (blur, focus, click, etc);

Debouncing means that only 1 action will be registered within a specific time. This is handy for text inputs, where an action triggers a process (such as asynchronous search). ngModelOptions allows you to debounce your ngModel inputs in AngularJS apps.

angularjs tutorial about Using ng-aria to automatically improve your AngularJS accessibility

Using ng-aria to automatically improve your AngularJS accessibility

5:15 angularjs

Accessibility is an often overlooked essential feature of a web application. a11y Is a critical component of your AngularJS application. It should be considered early in an applications life. The ng-aria module gets you started quickly, adding instant upgrades to your Angular app's accessibility.

Want to learn more about accessibility and AngularJS? Check out this great talk: AngularJS Accessibility by Marcy Sutton at ng-europe 2014

angularjs tutorial about New in Angular 1.3: Updates to forms

New in Angular 1.3: Updates to forms

1:06 angularjs PRO

With the release of AngularJS 1.3, we get some handy additions to forms, including a submitted state and the ability to bind input field names to an expression.

angularjs tutorial about New in Angular 1.3: ng-model-options getters and setters

New in Angular 1.3: ng-model-options getters and setters

3:34 angularjs

With ngModelOptions in Angular 1.3 you can turn your model into a getter/setter function to have greater control over your model.

angularjs tutorial about New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

1:19 angularjs PRO

ngModelOptions in angular allows you to set several handy options of your ngModels, including the timezone for dealing with dates and times.

react tutorial about React and Firebase with ReactFire

React and Firebase with ReactFire

6:32 react PRO

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

js tutorial about Intro to Webpack

Intro to Webpack

4:29 js

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

js tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 js PRO

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

js tutorial about Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09 js PRO

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

angularjs tutorial about Introduction to angular-formly

Introduction to angular-formly

5:43 angularjs

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

angularjs tutorial about Angular with Webpack - Introduction

Angular with Webpack - Introduction

4:20 angularjs

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

angularjs tutorial about Angular with Webpack - Requiring Directives

Angular with Webpack - Requiring Directives

3:48 angularjs PRO

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

angularjs tutorial about Angular with Webpack - Requiring Templates

Angular with Webpack - Requiring Templates

2:48 angularjs PRO

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

angularjs tutorial about Angular with Webpack - ES6 with BabelJS

Angular with Webpack - ES6 with BabelJS

2:43 angularjs PRO

Use the latest features of ECMAScript using BabelJS with Webpack. Simply add the right loader line in your webpack config and everything just works.

angularjs tutorial about Angular with Webpack - Requiring CSS & Preprocessors

Angular with Webpack - Requiring CSS & Preprocessors

6:07 angularjs PRO

Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.

angularjs tutorial about Angular with Webpack - Testing with Karma, Mocha, and Chai

Angular with Webpack - Testing with Karma, Mocha, and Chai

10:22 angularjs PRO

Testing in Angular applications takes a bit of setup. Webpack simplifies things considerably. In this lesson you'll see how to test an Angular application built with Webpack using karma, mocha, and chai.

angularjs tutorial about angular-formly: Custom Templates

angular-formly: Custom Templates

5:05 angularjs

The type functionality of the angular-formly library is powerful. In this lesson, see how you can use it to create custom templates for your field configurations and see what is available in the scope of each of your fields.

angularjs tutorial about angular-formly: Custom Validation

angular-formly: Custom Validation

3:14 angularjs

AngularJS validation can be tough, but angular-formly makes it extremely simple with a single validation API that enables basic and advanced field validation. You can specify a string expression, function that returns true/false, or a function that returns a promise which is resolved/rejected.

angularjs tutorial about angular-formly: expressionProperties

angular-formly: expressionProperties

4:27 angularjs

angular-formly provides a very simple API to dynamically change properties of your field (like disabled, hidden, and required) using the powerful expressionProperties property on your field.

angularjs tutorial about angular-formly: templateOptions

angular-formly: templateOptions

3:01 angularjs

angular-formly templateOptions bring a great deal of power and flexibility to your forms with angular without sacrificing simplicity in your templates. The templateOptions property allows you to specify some attributes that would normally exist on your ng-model like required, maxlength, and even ng-click. It also works great with expressionProperties.

angularjs tutorial about angular-formly: Default Values

angular-formly: Default Values

0:52 angularjs

angular-formly allows you to default the values of fields for your angular forms using the defaultValue property. To default the value of a field, you can either initialize the model with the default value, or use this defaultValue property on the field configuration.

angularjs tutorial about angular-formly: Default Options

angular-formly: Default Options

2:48 angularjs

angular-formly allows you to keep your forms as DRY as possible. The optionsTypes property is one way of composing your field configurations to keep your forms light-weight and DRY.

angularjs tutorial about angular-formly: Extending Types

angular-formly: Extending Types

2:17 angularjs

Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. When use responsibly, they can make it much easier to manage common types, allowing you to add a bit of functionality to a common type.

angularjs tutorial about Angular with Webpack - Production Setup

Angular with Webpack - Production Setup

2:05 angularjs PRO

Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.

js tutorial about Introduction to apiCheck.js

Introduction to apiCheck.js

3:52 js PRO

Because JavaScript is a typeless language, validating your api is a terrific way to help avoid bugs and instruct users of your API without requiring them to check documentation. See how api-check can help you do this. If you're familiar with ReactJS propTypes, this will be familiar to you.

angularjs tutorial about Angular with Webpack - Uglifying your JavaScript

Angular with Webpack - Uglifying your JavaScript

4:42 angularjs PRO

Angular requires some careful consideration when uglifying your code because of how angular's dependency injection system works. See how easy it is to add this consideration to your webpack configuration so you can minify your Angular JavaScript with Webpack.

angularjs tutorial about Angular with Webpack - Production Source Maps

Angular with Webpack - Production Source Maps

1:51 angularjs PRO

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

js tutorial about Introduction to How to Write an Open Source JavaScript Library

Introduction to How to Write an Open Source JavaScript Library

1:35 js

This is an introduction to the "How to Write a JavaScript Library" in which the scope of the series is presented. You will learn everything you need to know to create a library for JavaScript: set up the GitHub repo, publish a module to npm, set up a test suite with code coverage reporting (using Karma, Mocha, and Chai), add continuous integration, add ES6 (ES2015) with Babel, configure Webpack, and distribute the library as a "Universal JavaScript" (a.k.a. "Isomorphic JavaScript") module (consumable by both the browser and node).

js tutorial about Setting up GitHub

Setting up GitHub

1:31 js

In this lesson, you'll learn how to set up a GitHub account, create a new GitHub repository, and connect your local project with that new repository so you have a place to store and collaborate on your library code.

js tutorial about Configuring npm and creating a package.json

Configuring npm and creating a package.json

5:01 js

In this lesson, you'll learn how to set up your machine to publish to npm so people can install your library. You'll configure some helpful defaults and use those to create a package.json file for your project using npm init.

js tutorial about Creating the library and adding dependencies

Creating the library and adding dependencies

4:46 js

Don't reinvent the wheel. We're creating a great library here, but we don't have to write every line of code. Learn how to depend on other libraries while creating your own in this lesson.

js tutorial about Pushing to GitHub

Pushing to GitHub

2:34 js

Once you've written some code and you feel good about it, it's time to commit that code and push it up to your GitHub repository for storage and collaboration.

js tutorial about Publishing to npm

Publishing to npm

2:36 js

Putting your code up on GitHub is helpful, but publishing your library to npm makes it even easier for people to use your library. In this lesson, you'll learn how to publish your library and validate that it published correctly.

js tutorial about Releasing a version to GitHub

Releasing a version to GitHub

2:27 js

Now that you've released your module to npm, it's time to learn how to associate that release with a particular commit on GitHub. In this lesson learn how to create a tag using git tag and then how to associate that with a release on GitHub.

js tutorial about Releasing a new version to npm

Releasing a new version to npm

3:24 js

When you want to add a new feature, fix a bug, or push out a breaking API change, you need to take Semantic Versioning into account. In this lesson, learn what each number means as well as how to push out a new version of your library.

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