 Resources from Kent C. Dodds in 2021

glamorous

Glamorous works great with whatever CSS framework you’re currently using. In this lesson we’ll see how to make glamorous integrate with your existing CSS solution so you can migrate overtime.

Use glamorous with existing CSS

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

[Public Class Fields](https://tc39.github.io/proposal-class-public-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.

Public Class Fields with React Components

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

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`](http://webpack.github.io/) to create a [`UMD`](https://github.com/umdjs/umd) (Universal Module Definition) build of our module so users can consume it in a browser.

Add a browser build to an npm module

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

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

Grouping vendor files with the Webpack CommonsChunkPlugin

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.

Maintain sane file sizes with webpack code splitting

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.

Intro to the Production Webpack Course

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](http://npm.im/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.

Validate your Webpack config with webpack-validator

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.

Tree shaking with Webpack 2

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](https://cdn.polyfill.io/v2/docs/) service to automatically polyfill this API (and others) for us.

Polyfill Promises for Webpack 2

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.

Hashing with Webpack for long term caching

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

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 with Webpack - ES6 with BabelJS

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.

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

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

Optimize React size and performance with Webpack production plugins

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

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.

Topics

Instructors

Content Type