Learn Chai, Egghead and Vscode

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

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

We look at the various features of the VSCode Extension for Playwright and how it can help you with your testing workflow.

Playwright VSCode 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 use the [foambubble template](https://github.com/foambubble/foam-template) to get started building a second brain in VSCode. The template includes a number of extensions. The primary extention is foam itself which generates links between notes that you write similar to the popular personal knowledge management service Roam Research.

**Note:** foam is in alpha so the api is likely to change quite a bit. They project that they have implemented 10% of the features currently roadmapped.



Create a Second Brain in VSCode with Foam

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

When working in a codebase that has frontend, backend, middleware, service, and other concerns all in the same GIT repository, it can be helpful to color-code your editor windows to quickly recognize in what area of your stack you are working. 

We can easily do this with a few VS Code settings in the `.vscode/settings.json` file in a directory. We can then open those directories in new VS code windows and visually see the difference between our frontend code and our backend code, eliminating cognitive overhead and context switching between, for example, ReactJS and NodeJS.

An example configuration for this color coding:

```json
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#663399"
  }
}
```

Visually Organize Applications in VS Code with Window Color-Coding

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

Ripple Delete is the most common command you will perform when editing with Screenflow, thus we should make it the simplest action to perform. Unfortunately, it requires a mouse click + shift and a command + delete. We can bind this sequence to a right mouse click using Karabiner mappings.

Speed Editing in Screenflow by Remapping Your Mouse with Karabiner

Storing all the links to each repo and codesandbox inside of a markdown file will make it much easier to track where every lesson lives. This lesson walks you through using a zsh function to write out your info to a playlist.md file.

Write Your Lesson Information to a Markdown File From a ZSH Function

Rather than taking the time to open the terminal to type out a command, let's create a vs code extension that will do that for us!

Create a VS Code Extension to Pass Arguments to the Terminal

Alfred is a super speed booster when it comes to common tasks. If you're going to be creating a lot of lessons from templates, Alfred can save you from even opening your terminal.

Select a Lesson Template From an Alfred Workflow

Using Alfred, you can map a global keyboard shortcut to the process of cloning a lesson template repo and firing up your demo.

Launch a New Lesson From a Keyboard Shortcut

Forgetting to pass an argument to a zsh function could result in creating unnecessary folders or cloning code you didn't mean to. It's best to check for arguments to prevent unwanted results.

Add Conditions to ZSH Functions to Prevent Mistakes

Once you've finished your demo locally, it's time to commit, push it to github, and share your demo online. This zsh function breaks it down into a single call.

Branch and Create a Lesson in a Single ZSH Function

ZSH allows you to write functions to wrap around common commands. These allow you to easiest invoke a number of lesson creation steps by only typing out the command.

Automate Lesson Creation From Templates With ZSH Functions



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.

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

Search

Search Results