 Courses from Isaac Mann

I go through the steps of taking an initial mockup, writing html, css layout, css styles and javascript to make a fully functioning webpage.

If you like the content so far, tweet @MannIsaac so I'll be motivated to finish the series.

Bite-size video tutorials for badass web developers.

egghead

From Mockup to Webpage

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

CSS Grid and Flexbox are very useful tools for providing the overall layout of a page.  I take a specific design and create the high level layout using css grid and then arrange an individual section using flex box.

Layout a webpage using css grid and flexbox

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

I break down a design mockup into its semantic information and encode that information into html.  I also show how to use Emmet tab completion to help speed up the repetitive task of making large html files.

Create html from a design mockup using Emmet tab completion

Cascading Style Sheets bring order and beauty to our applications.

Most webpages are nothing but rectangles, but css can do circles too.  We use css transforms (specifically translate and rotate) to break out of the rectangle mode and create a page where elements are positioned along the edge of a circle.

Layout a circular design using css transforms

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

Finite state machines force you to do some up front thinking and be explicit about the states and transitions that are valid for your program.  We’ll use the XState visualizer tool to create a state machine to manage an http request.

Handle http request state with XState

If a network call returns an empty list, that should be rendered differently than a list with elements in it.  We’ll create two substates of the http success state (withData and withoutData) and choose which substate to transition to based on the http response using an automatic transition and a guard.

Block a State Transition with a Guard

All of this code lives in one component so far, but our apps have multiple components.  We'll split the app into list components and a question component with each component having its own state machine.  Each component will update its own state machine when it receives an event from a different component.

Communicate between State Machines in Different Components

In order to make sure the user actually picked the answer they wanted, we’ll add a confirmation state to the state machine that gives them the option to submit their answer or go back and change it.  When they go back, we need the state machine to remember all the substates that were active in the previous state.  We’ll accomplish this using a history state.

Save Previous States with a History State

Activities are useful for anything that needs to be executed at the beginning and end of a state.  Like an animation that needs to stop or an observable that needs to be unsubscribed.  We'll add a completely spurious `Dark Side` mode for the quiz that makes all the ui elements float around the screen so that users have a more difficult time taking the quiz.  Leaving `Dark Side` mode should return all elements to their original locations.

Execute Code when Entering and Exiting States using Activities

It can be tedious to create a paired success and failure event for each external action that a state machine triggers.  Instead xstate can integrate directly with a promise and respond to the resolve or reject status of the promise itself.

Invoke an XState Service when Entering a State

To match an element from one list with an element in a second list, it doesn’t matter which list is selected first, but the question isn’t answered until both elements have been selected.  We’ll model this concept by keeping the selection status of each list in parallel states of a state machine.

Control Transitions Order with Parallel States

State machines give you the power to make sturdy UIs for three main reasons:

1. They encourage planning, so you know ahead of time what states your component should handle.
2. They've been used and refined for decades, so the technology has very few unexpected edge cases.
3. They can be rendered visually, so you can understand at a glance what is happening.

In Construct Sturdy UIs with XState, we'll create an app that allows users to match a Star Wars character with their home world.  We'll use XState to ensure that the UI is predictable and resilient.

Introducing Construct Sturdy UIs with XState

Our applications have lots of states that they can be in.

We usually remember “Loading” and “Successful”. If we’re having a particularly good day, we’ll get “Error” handled as well.

But what about other states that our application can be in?

Things like “Haven’t requested yet” or “The request was successful but there isn’t any data for us to show”.

It’s frustrating to think you’re “done” and then an edge case shows up (and this cycle repeats at least one more time).

Fed up with forgetting to handle the edge cases that appear when developing UIs, Isaac Mann started looking for a solution.

The answer? State machines.

In this course, Isaac will teach you how to plan and visualize your application’s states and the transitions between them through the creation of a React & XState powered Star Wars quiz app.

Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

xstate

Construct Sturdy UIs with XState

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

Thanks for checking out this course!

My goal is for you to be able to use the patterns described in this course to make your components more flexible and easy to use.  Many thanks to Kent C. Dodds for his Advanced React Component Patterns course which was a big inspiration for this course.

This course covers patterns that make a component's state, logic or ui configurable by a parent component.  The patterns include: Compound Components, Provider Components, TemplateRefs and State Reducers.

I hope you enjoy this course as much as I did making it.

Course Overview: Advanced Angular Component Patterns

Allow more than one child component of the same type.  Allow child components to be placed within the views of other custom components

Communicate Between Components Using Angular Dependency Injection

Allow the base toggle to be a tag (&lt;toggle>) or attribute (&lt;div toggle>).  The &lt;toggle> component has become less opinionated about the view, but has now taken on some responsibilities managing state.  We’ll decouple the state management piece by moving it into the toggleProvider directive. The toggleProvider directive provides state for all the &lt;toggle-off>, &lt;toggle-on> and &lt;toggle-button> components inside it.

Refactor Angular Component State Logic into Directives

What if we want to use some of the state in the toggle component inside of the customized view we’re providing.  Content components don’t have an easy way of accomplishing that.  However, TemplateRefs were specifically designed for this purpose.  TemplateRefs serve the same function as React’s Render Prop pattern.

Override Component UI with an Angular TemplateRef

Create a simple presentational component in Angular that encapsulates static view and logic decisions, but allows the parent component to set state with Inputs and listen to state changes with Outputs.

Expose an Angular Component’s State to the Parent Component

Allow the user to control the view of the toggle component.   Break the toggle component up into multiple composable components that can be rearranged by the app developer.

Write Compound Components with Angular’s ContentChild

If we’re going to make our toggle accessible, we’ll need to apply certain aria attributes to the control that does the toggling.  Instead of making the parent component handle that, we can provide a toggler directive that automatically applies the needed attributes.  Content directives allow the user to tell the UI component where to make those modifications.

Modify User Provided UI with Angular Content Directives

We’re getting into Inception territory here.  The user may want to override part of how the UI component Content Directives are modifying their provided UI.  So, we’ll let them configure the content directives.  The functionality of Content Directives is comparable to React’s Prop Getter pattern.

Allow Users to Configure Angular Content Directives

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

Isaac Mann

Search Results