Learn Chai, Nx and Storybook

Beginner’s Guide to Storybook 7 with React

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

A Beginner’s Guide to Storybook 7 with React

In a monorepo, all of your apps and packages reside in a single repo. Structuring your code this way has many organizational benefits. You can more easily manage your dependencies, and you can maintain more consistency across your various apps. 

But, if you attempted to do this with just yarn or pnpm alone, you'll quickly start running into productivity issues. Your build times will be very long, and you'll have to make sure to run builds for any internal packages an app is depending on.

That's where Nx comes in.

Combining the speed of pnpm with the efficiency of Nx gives you an amazingly performant monorepo setup.

Nx builds a graph of your workspace and all of the connected dependencies. If there is a change anywhere, Nx will know about it and everything that is affected by it. 

Which means that Nx is able to use caching to prevent unnecessary builds when nothing has changed. Nx's caching features enable blazing fast <10ms build times 🔥

You get to have all the advantages of the monorepo with none of the performance issues! 

So start watching this course and learn how to achieve these speeds today. 

A Monorepo is where you have multiple projects inside a singular repository.

monorepo

Build High-Speed Monorepos with Nx and pnpm Workspaces

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

But there's a bit more to it than just those three steps.

The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

It can get hard to keep things straight in your head.

Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

More importantly, the focus of this course is more on the workflow than the implementation.

Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

Scale React Development with Nx

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx

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

chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

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

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

Nx helps architect, test, and build at any scale:
integrations with modern frameworks, distributed task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more.

If you work in a monorepo you want to make sure to have tooling that supports that. [Nx](https://nx.dev) comes with those baked in, allowing you to grow your monorepo from a single to multiple apps. One way Nx tackles this is by providing so-called [affected commands](https://nx.dev/l/r/core-extended/affected#rebuilding-and-retesting-what-is-affected).

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5).

Only Build What Changed with Nx Affected Commands

In an Nx monorepo, you typically have multiple applications and lots of libraries. When we configure [Vercel](https://vercel.com) for deployment, we set one Vercel deployment for each app in our monorepo. However, we would want to make sure that not all the apps are being deployed all the time, but only if the app was really affected by the change. [Nx affected commands](https://nx.dev/l/r/core-extended/affected#rebuilding-and-retesting-what-is-affected) can help here.

In this lesson we're going to create a simple script, that leverages the Nx affected commands to determine whether we should cancel or continue a given Vercel deployment.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5).

Only Deploy to Vercel What has Been Affected Using Nx

In this lesson, we're going to have a look at how to add [Nx](https://nx.dev) to a Yarn / NPM / PNPM monorepo for achieving faster task scheduling abilities. In particular, we also see how [Lerna](https://lerna.js.org) v5.1+ comes with an easy `useNx: true` opt-in flag, allowing to use Nx to run tasks, but keeping the old Lerna commands.

Add Nx to a Lerna based monorepo

Learn the difference between application-centric and package-centric projects then create a new pnpm workspace with an application-centric structure.

Create a pnpm Workspace

You can use pnpm's --filter flag to run scripts in any app in your monorepo from the root of the project. 

All you have to do is ensure that each of your app's have `name` set in their `package.json` file. Then you can run, for example, `pnpm --filter my-remix-app dev`.

Use pnpm Filter Commands to Run App Scripts From the Workspace Root

You can create private libraries in your monorepo that you can share between your other packages and applications. 

To do this all you need to do is create a new folder containing a package.json in your packages directory. You can then use pnpm filter commands to add external libraries to your package without ever having to cd into it! 

Then just make sure to create an entry point and set the `main` field in your package.json to where your code will compile when built. 

Create a Shared Library in a pnpm Workspace

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

In your pnpm monorepo, you can easily create new applications under your apps folder. 

Here, you'll create a new Remix app by running the command `pnpx create-remix@latest`. The app you generate functions just like any other full featured Remix app!

Add a Remix App to a pnpm Workspace Monorepo

As your workspace grows you may need to start using more advanced optimizations. 

A great option that Nx provides are "affected commands". These use git to determine the changes between your current branch and the base branch, and **run a command on all projects that were affected by the changes**

Further Optimize Your Nx Workspace with Affected Commands

Since dependencies on other local packages in the workspace are really just symlinks to those projects, we'll run into issues if we haven't ran their build script. 

We can make sure that this happens automatically by using Nx's task pipeline features. In our `nx.json` we can add a `dependsOn` field and set the commands that need to be ran within a project's dependencies. 

Use the Nx Task Pipeline to Run Commands Within Local Dependencies

By default, Nx considers all the files in the project as inputs to the cache, so any changes will invalidate it. But, that might not be the behavior we want. Especially if we are just doing something like updating a README.

To selectively ignore certain files, we can specify an inputs field where we are configuring the custom output. There, we can use a glob pattern to define the files you'd like to ignore. 

Configure Nx Cache to Ignore Changes to Specified Files

In this course we'll be focusing on a package-based monorepo setup. 

Basically, we have a collection of packages, each with their own `package.json`. We'll then use pnpm workspaces to set up a monorepo that allows us to share these packages between each other locally. 

As our app grows we'll bring in Nx to get more advanced features such as build pipelines and caching.

So let's dive right in! If you have any questions don't hesitate to leave a comment. 

Introduction to Build High-Speed Monorepos with Nx and pnpm Workspaces

Adding your local packages as dependencies in a pnpm worksapce mostly works the same way as adding external packages.

You can add them using the pnpm `add` command with a filter and the -`-workspace` flag set. For example, `pnpm add shared-ui --filter my-remix-app --workspace`

The workspace flag ensures that it'll search for the package locally. Just make sure that you've remembered to run the build script in your package!

Add a Local Package as a Dependency to an App Within a pnpm Workspace

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

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

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

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.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results