showing 113 lessons...
In this lesson we’ll look at the amazing open source tool 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.
In this lesson, we'll write a brand new function called
arrayify using the Test Driven Development workflow of red-green-refactor. Test Driven Development (aka TDD) is great because it helps you focus on one task at a time and when you're all finished, you can refactor or add features with confidence because the test suite acts as a safety net. In this lesson we're using the amazing Jest testing framework.
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.
get "trap" that will allow us to get items starting from the end of the array with ease.
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.
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.
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.
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.
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.
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.
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
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.
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.
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
GitHub adds a lot of great features on top of git repository hosting. We’ll take a look at some of these features including:
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.
JSON string. This API allows you to customize the serialization very specifically as well.
JSON API that allows you to parse the
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