Learn Chai, Jekyll and Ngrx-store

RxJS powered state management for Angular applications, inspired by Redux.

ngrx

Using string literal types together with switch types, we can build powerful type guarded logic flows. In this lesson, we will look at how we can take advantage of this, and build a reducer that automatically infers the action and payload type based on which switch statement case we are in.

Automatically infer TypeScript types in switch statements

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

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

chai

In this lesson, you will learn how to verify your API server is returning HTTP 400 responses when clients submit incorrect data. Returning HTTP 400 ensures that your clients are notified of the incorrect usage. Testing for them ensures your API returns errors instead of incorrect responses when supplied with incorrect data.

Test for HTTP 400 responses with Mocha and Chai

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Testing ES6 Promises in Node.js using Mocha and Chai

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

This lesson summarizes everything the course has covered and how Angular 2, RxJS, and ngrx/store work together to achive a reactive application.

Review of Angular 2, RxJS, and Reducers from ngrx/store

RxJS allows you to combine streams in various ways. This lesson shows you how to take a click stream and combine it with a store stream to use a value from the store inside a reducer.

Use a Value from the Store in a Reducer

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

Use a Reducer to Change an Object's Property Inside an Array

Reducers can easily be used inside one another to update related state. This lesson shows how you can use the clock reducer inside of the people reducer to create the time for each new person.

Use Two Reducers Together

Stores can accept as many reducers as you need. This lesson covers adding a second reducer that will be used to control an array of people.

Add a Second Reducer to the Store

The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a Component.

Pass Observables into Components with Async Pipe

Angular allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.

Pass Template Input Values to Reducers

While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. This lesson shows you how to pass an action payload along with your action type to update the state.

Dispatch Action Payloads to Reducers

A reducer needs to know what you want it to do whenever it's called. You do this by passing along an action type then the reducer can switch based on the type to achieve the logic you need. This lesson covers dispatching action types to your reducer to update the state based on that type.

Dispatch Action Types to Reducers

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

Use ngrx/store and Reducers for Angular Application State

While you have multiple streams flowing into your scan operator, you'll need to map each stream to the specific values you need to update your state the way that you want. This lesson covers using the map operator to determine what the click and interval should do when the state is updated.

Map Streams to Values to Affect State

The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves just as a reduce function would, but scan is able to collect values from streams over time. This lesson covers using startWith to set the initial accumulator value then using scan to update the value of the clock from the clicks and interval.

Manage State in RxJS with StartWith and Scan

Observable.merge allows you take two different source streams and use either one of them to make changes to the same state of your data. This lesson shows how you can use a stream of clicks and an interval stream and use either one to update the clock.

Handle Clicks and Intervals Together with Merge

While Angular usually uses event handlers to manage events and RxJS typically uses Observable.fromEvent, a good practice when using Angular and RxJS combined is to use Subjects and push the value through each event so that you can use it as part of your stream.

Handle Click Events with Subjects

Angular templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular and then to render it out in the template.

https://github.com/johnlindquist/rxjs-in-angular2/tree/11aa4c29a4536dad0ef26b78d8f7f503e4372f74/src

Render an Observable with the Async Pipe

Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual Dates. We'll still use the Async pipe, but we'll also add on the Date pipe with some formatting to display the Date just the way we want it.

Render an Observable Date with the Async and  Date Pipes

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

John Lindquist

How to Work with AI-Generated Code You Don't Understand

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Tomasz Ducin

Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


Excessive properties refer to any additional attributes that are not explicitly listed in an object schema. When creating an object based on a schema, it is important to ensure that only the defined properties are included.

In TypeScript, if an object is created with an extra property that isn't defined in the schema, TypeScript will not raise an error unless the type is explicitly annotated. When the type is annotated, TypeScript will issue an error indicating that the extra property is not allowed.

Zod provides a strict utility to enforce similar checks. This feature ensures that only specified properties are allowed in an object schema. When unnecessary properties are added at both the top level and within nested schemas, Zod will throw errors indicating unrecognized keys.

Adding an unrecognized property to a Zod schema results in an error message that specifies which keys are not recognized. Applying strict checks on nested schemas ensures that all levels of the data structure are validated correctly.


Make Excessive Object Properties Fail on Zod Validation

Prevent excessive properties in TypeScript and Zod schemas using strict checks for better data validation

In this lesson we discuss how Zod works with TypeScript to handle special types like `undefined`, `null`, `any`, `unknown`, `never` and `void`.

We modify our room booking schema to demonstrate the use of `optional` and `nullable` Zod utilities.

By using `.optional`, we allow a property to be either its _original type_ or `undefined`. With `.nullable`, we allow it to be either its _original type_ or `null`. Finally, `.nullish` allows a value to be either its _original type_, `null`, or `undefined`.

For all cases, we run tests to show how these schemas work in practice, as well as how TypeScript infers types.


Declare Lack of Value in zod (optional, nullable and nullish)

use Zod for TypeScript schemas, including handling undefined, null, and special types like optional and nullable values, as well as any, unknown never and void

In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

In this lesson we'll use a few predefined schemas which will serve as constituents to create union and intersection schemas.

Three room booking schemas are defined: _single_, _double_, and _suite_. Each schema has slight differences in the structure.

The `z.union` utility is used to create a union of these schemas, allowing for validation against any of them. Type inference (using `z.infer`) for the room booking schema produces a union of object literals, exactly like in TypeScript.

We also create an intersection using `z.intersection`, combining room booking details with discount information.

These techniques enhance data validation and allow to make `zod` aligned even more with `TypeScript`.


Define Unions and Intersections with Zod

implement unions and intersections in Zod schemas for example domain related objects, enhancing TypeScript validation with clear examples

This lesson demonstrates how to provide runtime type-safety for arrays in TypeScript applications.

First we need to understand the challenges behind ensuring array type-safety in TypeScript. We explain how TypeScript infers arrays with an undefined length, making it difficult to guarantee that array accesses are safe.

Zod schemas provide the `z.array` to define arrays of various element types. 

We compare how utilities such as `.min`, `.max` and `.nonempty` get reflected in inferred TypeScript types, and how zod processes the validation.


Declare Precise Array Types within Zod Schemas

Provide array type safety in TypeScript using Zod schemas, including handling non-empty arrays for better validation

In this lesson we make string-based schemas more specific using Zod in TypeScript. We focus on defining allowed values for a room type, showing how to use literals and enums effectively.

Zod's `z.literal` method allows us to specify a single allowed value for a string schema. For example, if we want to define a room type as `"premium"` and make it backward-type-safe in TypeScript, we can use `z.literal("premium")` to ensure that only this value is valid.

`z.enum` lets us define a set of allowed string values. This is useful when we have multiple options for room types, like `"standard",` `"premium"` or `"childrenFriendly"`. 

`z.enum` creates a union of TypeScript-compatible string literals, making it easy to validate against multiple values. Zod enums can be used to extract or exclude specific values from the enum.

Finally, zod's `z.nativeEnum` a native enum creates an equivalent of TypeScript's native `enum` ("real enums", we could say).

We can validate against all these values just like we do with literals and enums.


Work with Zod Literals and Enums Effectively

Use Zod for string schemas in TypeScript, including literals, enums, and native enums for room type validation

In this lesson, we dive into the Zod's `refine` utility, allowing defining more complex schema validation **on top of existing schemas and utilities**.

Sometimes, we need special validation rules for our applications to work correctly. The `refine` utility lets developers create their own validation rules. This method's uses a callback to check if the input is valid. We also create meaningful messages when something doesn’t meet the validation rules.

We use a practical example involving a room booking schemawith `dueDate` and `price` property refinement.


Apply Schema Custom Refinement with Zod

Enhance your TypeScript validation skills with Zod's refine utility for custom room booking schemas, focusing on date and price validation.


Search

Search Results