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

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

When you have a dependency that does not export itself properly, you can use the [`exports-loader`](https://npmjs.com/package/exports-loader) to force it to export the pieces of the file that you need.

Import a non-ES6 module with Webpack

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.

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

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](https://github.com/webpack/imports-loader) to provide those dependencies explicitly.

Expose modules to dependencies with Webpack

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

[AngularJS Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en) is a powerful Chrome extension that makes your developer tools "Angular aware".

AngularJS Batarang

Karma is essentially a tool which spawns a web server that executes source code against test code for each of the browsers connected.

karma

There are several steps involved with setting up [`Karma`](http://karma-runner.github.io/) to work on your webpack project. In this first step we'll initialize our karma configuration and setup our `package.json` `scripts`.

Initialize a Webpack Project with Karma for Testing

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

[Chai](https://npmjs.com/package/chai) assertions work great with the [Mocha](https://npmjs.com/package/mocha) testing framework. In this lesson we'll walk through out to install Chai and [karma-chai](https://npmjs.com/package/karma-chai) so you can use the `expect` assertions in your tests.

Use Chai assertions for tests in a Karma project

How much of your code runs during unit testing is an extremely valuable metric to track. Utilizing code the [`karma-coverage`](https://npmjs.com/package/karma-coverage) plugin and [`babel-plugin-__coverage__`](https://www.npmjs.com/package/babel-plugin-__coverage__) plugin, we can get an accurate measure of how well we’re covering the files that we are testing.

Add Code Coverage to tests in a Webpack project

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`](https://npmjs.com/package/karma-webpack) plugin and reuse our existing webpack configuration to preprocess our test files with webpack.

Use Karma for Unit Testing with Webpack

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 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](https://en.wikipedia.org/wiki/Domain-specific_language) for the replacement string).

How to use JavaScript's String.replace

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

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.

Introduction to GitHub

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 create a repository and organization on GitHub
- How to explore and find projects on GitHub
- About GitHub gists
- Searching pull requests and issues on GitHub

Exploring GitHub

The basic unit of GitHub is a repository. This is where your 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, Starting, and Forking a repository. We also cover GitHub issues and pull requests and various other stats about a GitHub repository.

Exploring a Repository

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

How to install Git SCM

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.

How to authenticate with GitHub using SSH

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 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](https://medium.com/@kentcdodds/what-open-source-project-should-i-contribute-to-7d50ecfe1cb4) for inspiration on how to identify a good project to contribute to.

Identifying How to Contribute to an Open Source Project on GitHub

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.

How to Fork and Clone a GitHub Repository

Before you start making your changes, 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 set up and ready for changes.

Setting up the project locally

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 with Webpack - Requiring Directives

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.

How to create a Pull Request on GitHub

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

JWT Authentication Setup

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.

Topics

Instructors

Content Type

Free or Pro