Learn how Kent started working with egghead.

Kent's Instructor Journey

Open source is an excellent way to level up your skills as a developer. You don't need to be an expert to start contributing to open source. Learn how Kent recommends starting in open source.

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this course, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Kent C. Dodds

How to Contribute to an Open Source Project on GitHub

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

How to Write an Open Source JavaScript Library

What open source project should I contribute to?

Becoming an Open Source Project Maintainer

Get into Open Source

This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web apps in React right away.

The Beginner's Guide to React

Learn Hooks by taking a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.

Simplify React Apps with React Hooks

Use Suspense to Simplify Your Async UI

Launching Epic React

Kent C. Dodds chats with developers about life, career, and code.

Chats with Kent

Kent C. Dodds Landing Page

 Resources from Kent C. Dodds in 2021

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

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.

Introduction to angular-formly

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this lesson we’ll look at the amazing open source tool [ASTExplorer.net](https://astexplorer.net/). We’ll learn how we can use it to learn about ASTs generated by different tools. We’ll also see how it can be used to help us write plugins for ESLint, Babel, and other tools. The noted ESTree specification can be found on [GitHub](https://github.com/estree/estree).

Use ASTExplorer.net

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

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.

React and Firebase with ReactFire

In this lesson we'll build a stopwatch component that maintains its own state. We'll start by creating the static UI, then take the dynamic parts and accept them as props. After that we'll refactor that to state and add event handlers to update the state.

Use Component State with React

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.

New in Angular 1.3 - Bind Once

`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.

The JSON.stringify API

jest

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.

Add Babel Integration with Jest

In this lesson, we'll learn how we can call ReactDOM.render repeatedly with brand new React Elements and React will preserve element `focus` and only do the minimal required DOM operations for the re-render.

Rerender a React Application

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.

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

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.

Use Jest's Interactive Watch Mode

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

New in Angular 1.3 - $q constructor

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

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.

Webpack Loaders, Source Maps, and ES6

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

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

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.

Introduction to apiCheck.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.

Use Jest's Snapshot Testing Feature

In this lesson, we have a stopwatch component that will update the time since it was run in milliseconds. The problem is, if you unmount the component, there is a memory leak because the interval that is set when you start and the timer is not stopped. React provides the `componentWillUnmount` lifecycle method as an opportunity to clear anything that needs to be cleared when the component is unmounted or removed from the DOM.

Stop Memory Leaks with componentWillUnmount Lifecycle Method in React

Often you'll find there's a jQuery plugin or JavaScript library which needs access to DOM nodes to work in your application. Other times you need access to the DOM node directly to get the value of form fields or for other reasons. In this lesson we'll learn how to do this using React's `ref` prop.

Manipulate the DOM with React refs

Often to get user data you'll make an AJAX request using [`axios`](https://www.npmjs.com/package/axios) or [the `fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). In this lesson we'll get a GitHub user's company using [GitHub's GraphQL API](https://developer.github.com/v4/) using React's `componentDidMount` lifecycle method.

Make HTTP Requests with React

In this lesson, we will explore JSX a little further by looking at how to conditionally render JSX with a Javascript ternary operator. We will see how JSX is simply syntax sugar on top of the React API: React.createElement.

Conditionally Render A React Component

In this lesson, we'll learn about React's synthetic event system which allows React to use the same event system regardless of the platform (whether you're using react-native or react-dom for example). We'll see how to attach events directly to elements and React takes care of event delegation and optimization for you. We will look at some of the event handlers for an HTML button and go over the `onChange` event handler for an HTML input.

Use Event Handlers with React

In this lesson we'll look at a few ways to deal with issues around `this` when writing `class` components with React. We'll eventually land at [Public Class Fields syntax](https://github.com/tc39/proposal-class-fields) which is a stage 3 proposal in the ECMAScript standardization process.

Topics

Instructors

Content Type

Free or Pro