 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

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.

Finalizing JWT Authentication with AngularJS

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

By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the `--compilers` flag for `Mocha`.

Adding ES6 Support to Tests using Mocha and Babel

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

Basic Server Setup for JWT Authentication

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.


Auth Interceptor in Angular for JWT

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

angular-formly: templateOptions

`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 parse the `JSON` string into a JavaScript object. This API allows you to customize the parsing behavior very specifically as well.

The JSON.parse API

Now that we have code coverage being reported, let's make sure that nobody commits code which drops code coverage below our standard by adding a `check-coverage` script that utilizes istanbul's built-in `check-coverage` command.

Adding code coverage checking

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

JSON Web Token (JWT) Introduction

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.

New in Angular 1.3 - $scope.$watchGroup

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.

angular-formly: Custom Templates

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.

New in Angular 1.3: Updates to forms

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

Server JWT Authentication Setup

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 `.travis.yml` file.

Limit Built Branches on Travis

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.

Reusing and Overriding ng-messages

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.

angular-formly: Default Options

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

In this lesson, we'll learn about how you can style react components using the style prop and className prop. We will go over how these props are differant than regular html style and class properties. Style, in JSX, takes an object, camel casing the property keys like `borderRadius` instead of `border-radius`.

Style React Components with className and In Line Styles

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.

New in Angular 1.3 - Stateless Filters

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](https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0) by Kent.

Updating Babel 5 to 6

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

Webpack CSS, Preprocessors, and url assets

Just like in regular JavaScript, when you want to reuse code, you create a function. With React, you create components. In this lesson, we'll walk through the process of creating custom React components and you'll walk away with a deep understanding of how to create and use basic components to compose a larger component you render. We will look at how JSX works by calling React.creatElement under the hood.

Create a Simple Reusable React Component

In this lesson, we'll learn how you can use the prop-types module to validate a custom React component's props. We will start by building out a Proptypes object that throws an error if the prop passed is not of the required type. Then, we will import the React team's [`prop-types`](https://www.npmjs.com/package/prop-types) module and look at some of the useful utilities it provides like `isRequired`. Function components define Proptypes off of a property while Class components define Proptypes off of a static method.

Topics

Instructors

Content Type