Learn Egghead, Linux and Serverless

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

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Now that we are SSH'ed into our EC2 instance we can start modifying the server to actually run the application that we want to to run. Before we do that we want to switch users because you initially SSH you are the root user.

We will start by adding a `ghost-admin` user that we will give sudo permissions to. Once we are logged into that user we will update the server to ensure we are on the latest and greatest versions before installing additional software.


Add and Log In to an AWS EC2 Instance with a sudo User

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Ghost has two hard dependencies which need to be installed before it can run. Those are Nginx and Node.js.

We will start by installing Nginx and set Nginx up to control the traffic coming into the EC2 server. After this, we'll install NVM using the raw install script that they provide on GitHub. With NVM installed we can then install the latest version of Node.js


Install Nginx and Node.js on a AWS EC2 Server

To run Ghost, we first need to install the ghost cli. This can be done with npm now that Node.js is installed on the server.

After installing the CLI we will create a directory `/var/www/ghost` that the actual installation of Ghost will occur in. We'll update the permissions of this file to include the `ghost-admin` user that we are logged in as.


Install Ghost CLI and Create Directory

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

In this video you'll learn how to deploy a React app to AWS using AWS Amplify Hosting's drag and drop folder functionality. The app will also automatically be globally distributed on AWS's global CDN.

Deploy a React App to AWS in 24 seconds

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Environment variables set in a `.env` file can be imported using the Netlify CLI with the following command: `netlify env:import`.

This allows you to manage environment variables directly on Netlify, providing the benefit of security and flexibility of sharing environment variables with your team. 

From inside Netlify, you can access the environment variables in:

`Site settings` > `Build & deploy` > `Environment` > `Environment variables`

Import and Set Environment Variables from a .env file using Netlify CLI

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: `id`, `name`, `favoriteSong` for each corgi. 

[http://no-cors-api.netlify.app/api/corgis](http://no-cors-api.netlify.app/api/corgis)

We will also use `node-fetch` a light-weight module that brings the `fetch` API to fetch the data into our application.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions 

There are a few ways you can run Netlify serverless functions while you are developing them. 

You can: 

- Navigate to the directory under the `/.netlify/functions/` path
- Curl them using the full URL
- Use an app like Postman

Manually Trigger Netlify Serverless Functions Locally

Netlify makes deploying to production a breeze by configuring your Netlify CLI to your Netlify account and integrating with GitHub.

We'll log in to Netlify through the CLI and initialize a site by completing all the options that the CLI runs us through. Once this is done, Netlify will trigger new builds for your site every time you push to GitHub.

Deploy Serverless Functions to Production on Netlify using the Netlify CLI

Netlify makes developing serverless functions easy with the netlify-cli (`ntl` for short). You'll be able to build and test functions locally as well as publish your functions from the CLI. 

We will install netlify-cli globally and create a `netlify.toml` file that will configure where the CLI should look to run functions that we define, in our case `functions/`. When the application is served up, Netlify runs functions under `/.netlify/functions/`.

Set up a Local Development Environment for Serverless Functions Using Netlify

A serverless function is something that is going to allow us to do server-like things without having to manage servers, but an important distinction here is that serverless does not mean that there are **no** servers. 

The environment is actually running on top of an operating system and uses physical servers, but the responsibility for provisioning and managing the infrastructure belongs entirely to the service provider.

Some of the benefits of using serverless functions: 

- **Enhanced scalability.** No need for developers to implement code to scale. It scales automatically.
- **Reduced time to market.** Serverless is an optimized set of tools for building quickly.
- **No boiler code.** A serverless function is just a tiny piece of logic. Reducing the complexity of software.
- **More time for user experience.** Serverless functions allow teams to focus resources on the user experience and not on managing servers.
- **Security.** We can call third-party APIs securely without exposing important data on the client-side.

What Are Serverless Functions?

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

Speeding up a clip can be useful for moving quickly past parts of your video that are not critical such as periods of typing or installing dependencies. In this lesson you will learn multiple ways to adjust the speed and duration of a clip.



Adjust play speed in ScreenFlow

Use annotations to highlight specific areas of your screen. In this lesson you will learn how to draw annotations with ScreenFlow. We'll choose a shape and color, and then fade it in and out using a video action with easing.

Add Annotations with ScreenFlow

Zooming in to an important part of your screen can eliminate distractions and focus the viewer's attention on what's important at the time. In this lesson you will learn how to create a zoom in and out animation with easing in ScreenFlow.

Zoom in and out with ScreenFlow

Next.js is a minimalistic framework for server-rendered React applications.

With the Auth0 set up in our Next.js project, the next step is to integrate the authentication flow into our app.

In this lesson, we'll set up the API routes Auth0 needs to handle the auth process - `/api/login`, `/api/logout` and `/api/callback`. Then, we'll use the `getServerSideProps` lifecycle method in Next.js to authenticate users on the server-side. Finally, we'll update our `/secret` page component to have different states depending on the login session status of a visitor.

After this lesson, you will understand how to implement the user authentication logic in a Next.js app with Auth0.

Implement user Authentication in a Next.js app with Auth0

This first lesson shows off the workflow after automating all of the mundane tasks away. Throughout the playlist, we'll cover everything shown in this overview in more depth.

Overview of Automate Everything

The second most common action is dragging around the timeline. We can use karabiner for this sequence with the :afterup hook to make sure it switches back to our arrow once we're done dragging.

Bind the Middle Mouse Button to Dragging the Screenflow Timeline Using Karabiner

While much focus in AI has been on optimizing input and generating concise outputs, a new model in Google's AI Studio dramatically expands output possibilities with a capacity of 65,000 tokens. This represents a significant shift, opening doors to new application scenarios, especially for developers and creators. This lesson explores a practical and immediately useful scenario: leveraging this large output capability within Google's AI Studio to generate extensive sample datasets for your projects. Whether you are developing a new application, building a resource, or require robust datasets for testing and validation, this model offers a powerful solution. We'll demonstrate how to move beyond the constraints of short responses and utilize the full potential of large output models to generate the data volume and variety you need, enhancing your development workflow through Google's AI Studio.

AI Studio's New 65k Output Opens Exciting Possibilities

This lesson explores how to use Cursor to generate and maintain English specifications as a form of living documentation. Learn how these automatically created documents can serve as a consistent and up-to-date representation of your code's behavior. The video highlights how reviewing and refining these English specifications can help ensure that code modifications align with the intended purpose and that documentation accurately reflects the current codebase, promoting better long-term code maintainability and clarity.

Here's the "english-spec.md" used in the video:

```markdown
> You are an AI specialized in analyzing source code and producing structured, plain-English representations of its functionality.  
>  
> **Your Task**:  
> 1. Read and interpret the code I provide.  
> 2. Produce a technical, English-only summary of what the code does.  
> 3. Use headings and bullet points to clearly outline the roles of each function, class, variable, or important logic block.  
> 4. **Do not include any actual code** in your final output. Instead, translate the code’s content into an English explanation (like a specification or documentation).  
> 5. Keep the explanation concise but thorough. Focus on explaining the purpose, process, and relationships between functions or modules in the code.  

**User Prompt to the AI**:

> **Instruction**: Convert the following code into a single file of pure English text that outlines exactly what each part of the code does. Use bullet points, headings, and descriptive language. Do not show any code—only explain how the code behaves. This is intended to serve as a human-readable spec or “translation” of the code.  
>  
> **Code**:  
> ~~~  
> [PASTE YOUR CODE HERE]  
> ~~~  

**Example Input/Output #1**:

- **Example Code (Input):**
  ~~~js
  // example1.js
  const greetUser = (userName) => {
    const greeting = `Hello, ${userName}!`;
    console.log(greeting);
  };

  greetUser("Alice");
  ~~~

- **Example Explanation (Output)**:
  ~~~
  # Overview
  - This file defines a single function which greets a user by name and prints a message to the console.
  
  # Function: greetUser
  - Accepts one parameter (`userName`).
  - Constructs a greeting string that combines static text with the `userName`.
  - Outputs the greeting using `console.log`.

  # Behavior Flow
  - The function is called with the argument "Alice".
  - Upon invocation, "Hello, Alice!" is logged to the console.

  # Key Points
  - Shows how to create a greeting with a dynamic name.
  - Demonstrates basic string interpolation and console logging.
  ~~~

**Example Input/Output #2**:

- **Example Code (Input):**
  ~~~py
  # example2.py
  class Calculator:
      def __init__(self, initial=0):
          self.value = initial
      
      def add(self, amount):
          self.value += amount
      
      def subtract(self, amount):
          self.value -= amount
      
      def get_value(self):
          return self.value

  calc = Calculator(10)
  calc.add(5)
  calc.subtract(3)
  result = calc.get_value()
  print(result)
  ~~~

- **Example Explanation (Output):**
  ~~~
  # Overview
  - This file defines a `Calculator` class that keeps track of an internal numerical value and provides methods to modify it.
  
  # Class: Calculator
  - **Constructor** (`__init__`):
    - Accepts an optional initial value (default is 0).
    - Stores the initial value in a `value` property.
  - **Method: add**:
    - Takes an `amount` and increments the internal `value` by that amount.
  - **Method: subtract**:
    - Takes an `amount` and decrements the internal `value` by that amount.
  - **Method: get_value**:
    - Returns the current internal `value`.
  
  # Behavior Flow
  - An instance of `Calculator` is created with an initial value of 10.
  - The `add` method is called with 5, raising the value to 15.
  - The `subtract` method is called with 3, lowering the value to 12.
  - The `get_value` method is called to retrieve the current value (12).
  - The result (12) is printed to the console.

  # Key Points
  - Demonstrates basic OOP with a class that manages state.
  - Showcases constructor, addition, subtraction, and retrieval of a stored value.
  ~~~  

---

## Final Prompt

Below is a full, combined version of the prompt you can provide to an AI to guide it in generating the English-only, bullet-pointed explanation. Feel free to modify or adapt this as needed:

~~~
You are an AI specialized in analyzing source code and producing structured, plain-English representations of its functionality.

Your Task:
1. Read and interpret the code I provide.
2. Produce a technical, English-only summary of what the code does.
3. Use headings (e.g. # Overview, # Functions, # Classes, # Behavior Flow) and bullet points.
4. Do not include any code in your final output—only explain how the code behaves.
5. Keep it concise but thorough, focusing on purpose, process, and relationships between functions or modules.

Below are some examples of how code might be transformed into an English-only explanation:

Example Input:
-------------------
~~~js
// example1.js
const greetUser = (userName) => {
  const greeting = `Hello, ${userName}!`;
  console.log(greeting);
};

greetUser("Alice");
~~~
Example Output:
-------------------
# Overview
- This file defines a single function which greets a user by name and prints a message to the console.

# Function: greetUser
- Accepts one parameter (`userName`).
- Constructs a greeting string that combines static text with the `userName`.
- Outputs the greeting using `console.log`.

# Behavior Flow
- The function is called with the argument "Alice".
- Upon invocation, "Hello, Alice!" is logged to the console.

# Key Points
- Shows how to create a greeting with a dynamic name.
- Demonstrates basic string interpolation and console logging.


Example Input:
-------------------
~~~py
# example2.py
class Calculator:
    def __init__(self, initial=0):
        self.value = initial
    
    def add(self, amount):
        self.value += amount
    
    def subtract(self, amount):
        self.value -= amount
    
    def get_value(self):
        return self.value

calc = Calculator(10)
calc.add(5)
calc.subtract(3)
result = calc.get_value()
print(result)
~~~
Example Output:
-------------------
# Overview
- This file defines a `Calculator` class that keeps track of an internal numerical value and provides methods to modify it.

# Class: Calculator
- **Constructor** (`__init__`):
  - Accepts an optional initial value (default is 0).
  - Stores the initial value in a `value` property.
- **Method: add**:
  - Takes an `amount` and increments the internal `value` by that amount.
- **Method: subtract**:
  - Takes an `amount` and decrements the internal `value` by that amount.
- **Method: get_value**:
  - Returns the current internal `value`.

# Behavior Flow
- An instance of `Calculator` is created with an initial value of 10.
- The `add` method is called with 5, raising the value to 15.
- The `subtract` method is called with 3, lowering the value to 12.
- The `get_value` method is called to retrieve the current value (12).
- The result (12) is printed to the console.

# Key Points
- Demonstrates basic OOP with a class that manages state.
- Showcases constructor, addition, subtraction, and retrieval of a stored value.

---

**Now**: Please apply the same conversion process to the following code. Convert it into a plain-English document that describes what the code does in detail, using bullet points and headings. Create the document next to the original with the filename as `${fileName}.md`. Do not include any source code in the output—only the explanation:

[INSERT YOUR CODE HERE]
```

Programming in English with Cursor

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.