Learn Egghead, Nightmare and Prisma

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

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

Prisma is a next-generation open-source ORM For Node.js and TypeScript that helps developers build faster and make fewer errors.

It supports the following databases: PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, and more recently, MongoDB (Preview).

Prisma provides a complete toolkit:

- Prisma Client: Auto-generated and type-safe database client
- Prisma Migrate: Declarative data modeling and customizable migrations
- Prisma Studio: Modern UI to view and edit data


prisma


Next up is creating a Planetscale database for our application. Planetscale works a lot like GitHub in that it uses branches for development and production.

We will create a new database and then create a dev branch to separate the data we create in dev from what is in production.

When the database is created, we'll set the `DATABASE_URL` in our `.env` file for the main and dev branches.

The last thing we will need to do is push the prisma schema to planetscale so that it can create the necessary tables for our application to function. 

Explore the prisma schema and tables created to get more familiar with what the application is doing.

Set up Planetscale Main and Dev Branches and Create Tables through Prisma

Prisma is an open-source ORM. It consists of the following parts: 

- Prisma Client: Auto-generated and type-safe query builder
- Prisma Migrate: Migration system
- Prisma Studio: GUI to view and edit data in your database

Prisma Client can be used in any Node.js or TypeScript backend application (including serverless applications and microservices). This can be a REST API, a GraphQL API, a gRPC API, or anything else that needs a database.

In this course, you will learn how to initialize Prisma in a TypeScript Node project, use Prisma Client to create and find records, use Express to create data dynamically, and more! 



Build a Backend with Prisma in a TypeScript Node Project

Prisma Client allows us to limit the amount of data that is returned from queries. It also allows us to be specific about which data should be included in the returned dataset. In this lesson, we use the select and include operators to be specific about the shape of our returned data.

Limit the Amount of Returned Data with Prisma Client

Prisma Client has a specific API for relating data from one table to another when creating new records. In this lesson, we use the connect operator to establish a link between two tables as new records are created.

Use Prisma Client to Connect Related Tables when Creating New Data

When two tables are related to one another, we can use Prisma Client to query for data through those relations. In this lesson, we see how to use Prisma Client to tie together data from two separate tables and pull it out in a nested fashion.

Use Prisma Client to Query for Related Data

Prisma Schema Language is used to model our database tables and establish relations between them. Prisma offers autocompletion to register the relations. In this lesson, we create a new model for a second database table and see how to relate our two tables together.

Create a Relation Between Two Tables in the Prisma Schema

Prisma is API-agnostic meaning that it doesn't matter how we build our APIs. They can be REST APIs, GraphQL APIs, or anything else. In this lesson, we see how to use express to accept JSON data to be forwarded off to Prisma to create new records in the database.

Use Express to Create Data Dynamically

Prisma Client offers methods to create new database records. These methods accept a data object and return the result to be consumed by clients. In this lesson, we use Prisma Client's create method to create new records in the database.

Create a Database Record with Prisma Client

Prisma Client has a full API for selecting subsets of data in our tables. We can use the WHERE clause to match specific conditions for which we would like to return data. In this lesson, we look at how to use the WHERE and its operators to return a subset of data.

Use Prima Client to Select a Subset of Data

Prisma Client is a fully type-safe database access client that is automatically generated based on our Prisma Schema files. In this lesson, we use Prisma Client to access records in our database programmatically. We show how to return the data from an endpoint built with express.

Use Prisma Client to Find Many Records in a Table

Prisma Studio is a GUI for viewing and interacting with our databases. In this lesson, we view our database with Prisma Studio and use it to create our first record.

Use Prisma Studio to Create a Record

Prisma offers a powerful database modeling language called the Prisma Schema Language. It allows us to describe the shape of our tables, the columns they should have (and their types), and relations between tables. In this lesson, we get started with our first table in our Prisma Schema file.

Create a Model for a Table and Run Migrations

The Prisma CLI comes with commands to initialize Prisma in a project, run migrations, generate Prisma Client and more. In this lesson, we install the relevant dependencies and initialize Prisma in a TypeScript Node project.

Initialize Prisma in a TypeScript Node Project

Prisma offers an extension for VS Code that enables syntax highlighting, autocompletion, and more for Prisma Schema files. In this lesson, we learn how to install the Prisma VS Code extension.

Install the Prisma VS Code Extension

A keyboard is the gateway to code. Your hands are the tools that manage the keyboard. Many people develop pain in their hands from repetitive stress injuries that can seriously damage their ability to code. This talk is about making your keyboard experience as gentle as possible on your hands so your hands are happier and you work more effeciently.

Save Your Hands and Save Your Time: Rethinking How to Use a Keyboard

While editing, you can make mistakes that you don't realize right away. One of these is cropping off part of a word that you didn't mean to.

If you don't notice right away, you could be convinced that you needed to undo all of your edits up to that point but that's not the case! When you ripple delete in ScreenFlow, it saves the portion of the clip that you deleted. All you have to do to recover that clip is to select the clip and drag it. Then you can make your desired edits again

Recover a Cropped Section of Video in Screenflow

In this lesson, we will learn how to model data relationships with Prisma Schema. 

We will be using a social network as our example, create data models such as users, posts, likes, comments, and model the relations between them. After this lesson, you should be able to model common relations like *one-to-one* (1:1), *one-to-many* (1:n), *many-to-many* (n:m) with Prisma.

At the time of recording this lesson, *Prisma Migrate* is in an experimental state, so the extra flag `--experimental` is needed to perform the `save` and `up` commands.


Work with Models and Relations with Prisma Schema

Apart from creating entries, it's also very intuitive to read, update, or delete data from the database with Prisma Client.

In this lesson, we will explore the [Prisma Client API](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/crud) for `findMany`, `findOne`, `updateMany`, `deleteMany` and so on.

Notice that since all these methods are tailored to the schema that we defined earlier, VS Code is aware of what is valid and is able to prompt us with helpful autocomplete options, making it much easier to explore the Prisma Client API.

Perform basic database queries (CRUD) with Prisma Client

In this lesson, we will write a code snippet which creates a new entry in the database. We will import and use the Prisma Client that we previously generated by running the command `npx prisma generate` to perform this query. 

Thanks to type-safety, we can now directly catch mismatched data field types while we are coding, drastically reducing the chance of having bugs in the code.

Tip - When in doubt, you can always use the key combination `ctrl-space` to invoke the autocomplete feature of VS Code. This is also a huge benefit made possible by Prisma's type-safety, and is super handy for exploring the Prisma Client API.

Create an entry in the database with Prisma Client

In this lesson, you'll discover how to style View Transitions using CSS pseudo-selectors to create custom animation effects. We'll transform the default cross-fade into a smooth slide transition by targeting the ::view-transition-old and ::view-transition-new pseudo-elements. You'll learn how these powerful selectors give you precise control over your transition animations, allowing you to create more engaging and personalized user experiences with just a few lines of CSS.

Customize View Transitions with CSS Using view-transition-old and view-transition-new

In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We'll create a simple example that demonstrates how to animate between different text states with just a few lines of code - no external libraries required. This powerful native API makes it easy to add professional-looking transitions to your user interface, enhancing the user experience with minimal effort.

Create Smooth UI Transitions with the Native View Transitions API

I've been using Cursor for a very long time and their "Agent" feature in Composer is fairly new, so I'm still getting used to it. But since Windsurf recently got onto the stage with their Cascade agent, they've slowly been gaining the mind share on the UX for coding agents. I decided to put them to the test by putting Windsurf and Cursor on the exact same screen side by side trying to accomplish the same task and to see which workflow I would prefer. I've been a diehard Cursor user for over a year now, so it's going to take a lot for me to switch to a different IDE. But I just have to say, even from this simple demo, Windsurf is looking pretty nice.

This lesson is just going to walk through creating a CLI using both tools to print out inspirational quotes and to explore how they approach the step-by-step of installing packages and running commands and setting up all the files we need to get this running.

Windsurf Cascade vs. Cursor Composer Agent Side-by-Side Comparison

This TypeScript tutorial explains how to use generics, allowing for different types to be passed as arguments. It discusses the use of shorthand syntax in generics and illustrates with examples. This method is useful for library creation, providing type safety and control to the user.

```typescript
interface PhotoMetadata<T> {
  title: string;
  takenAt: Date;
  customData: T;
}

// Function that processes a photo with custom metadata
function processPhoto<T>(photo: PhotoMetadata<T>): {
  processedTitle: string;
  daysSinceCapture: number;
  customDataSummary: T;
} {
  const today = new Date();
  const daysSinceCapture = Math.floor(
    (today.getTime() - photo.takenAt.getTime()) / (1000 * 60 * 60 * 24)
  );

  return {
    processedTitle: photo.title.toUpperCase(),
    daysSinceCapture,
    customDataSummary: photo.customData
  };
}

// Example usage with different custom data shapes
type CameraSettings = {
  iso: number;
  aperture: string;
  shutterSpeed: string;
}

type LocationData = {
  latitude: number;
  longitude: number;
  locationName: string;
}

// Using with camera settings
const photoWithCamera: PhotoMetadata<CameraSettings> = {
  title: "Sunset at beach",
  takenAt: new Date('2024-01-15'),
  customData: {
    iso: 100,
    aperture: "f/2.8",
    shutterSpeed: "1/1000"
  }
};

// Using with location data
const photoWithLocation: PhotoMetadata<LocationData> = {
  title: "Mountain vista",
  takenAt: new Date('2024-02-01'),
  customData: {
    latitude: 45.5231,
    longitude: -122.6765,
    locationName: "Mount Hood"
  }
};

const processedCameraPhoto = processPhoto(photoWithCamera);
const processedLocationPhoto = processPhoto(photoWithLocation);

processedCameraPhoto.customDataSummary.iso
processedLocationPhoto.customDataSummary.longitude

```

Basic Explanation of Typescript Generics

A very basic explanation of generic function arguments

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project


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.

Search

Search Results