Egghead.io

Awesome lessons on modern web tools that you use to get work done.

• react: I'm really going to make another one
• [Course] react: Another Course
• cursor: Build MCP Tools Using Project Context for Custom Cursor IDE Automation
• cursor: Easy MCP Server Setup in Cursor IDE with Bundled Executables
• vite: Set up Vitest Browser Mode in a React Router app
• [Course] tanstack: Up and Running with Tanstack Router and React
• tanstack: Browse History in Tanstack Router
• tanstack: Hook into Route Lifecycle Hooks in Tanstack Router
• tanstack: Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router
• tanstack: Access Dynamic Route Parameters with useParams in Tanstack Router
• tanstack: Reorganize File-Based Routes in Tanstack Router
• tanstack: Parametrize Route Loader for Nested Route in Tanstack Router
• tanstack: Create Nested Route and Nested Outlets in Tanstack Router
• tanstack: Configure staleTime and gcTime in Tanstack Router
• tanstack: Cache Route Loader Data in Tanstack Router
• tanstack: Preload Routes in Tanstack Router
• tanstack: Use Loader to Feed a Route with Data in Tanstack Router
• tanstack: Troubleshoot Tanstack routeTree.gen Generator
• tanstack: Create a new Route in Tanstack Router
• tanstack: Use File-Based Routing in Tanstack Router
• mongodb: Perform simple operations on resultset using Mongosh Cursor
• tanstack: Scaffold new application with Tanstack Router
• [Course] mongodb: Get Started with MongoDB
• mongodb: Perform Multiple Operations using Bulk in MongoDB
• mongodb: Delete Documents in MongoDB Collections using deleteOne and deleteMany
• mongodb: Upsert Documents in MongoDB Collections using updateOne and replaceOne
• mongodb: Replace Documents in MongoDB Collections using replaceOne
• mongodb: Create or Modify Datetime properties using $currentDate in MongoDB
• mongodb: Rename fields in MongoDB Documents
• mongodb: Update Mongo Documents arrays using $push, $pull and $each operations
• mongodb: Update Mongo Documents using updateOne, updateMany, $set and $unset operations
• tanstack: WTF is Tanstack Router
• vscode: Personalize Your Cursor/VS Code Theme with workbench.colorCustomizations
• [Course] zod: Advanced Type Checks with Zod
• cursor: Launch Multiple Cursor Composer AI Agents to Work in Parallel
• cursor: Bulk Fixing AI-Generated Code Errors with Reasoning Models and Cursor Composer
• mongodb: Return a subset of properties of a MongoDB Document (projections, $slice)
• mongodb: Count documents satisfying a query in MongoDB Collection (countDocuments, $regex, $in)
• mongodb: Find Document by id in MongoDB Collections
• mongodb: Filtering Documents using Expressions in MongoDB Collections ($expr, $size, $in, $and, etc)
• mongodb: Combine Filtering Documents in MongoDB Collections ($and, $or, $in, $eq, etc)
• mongodb: Filtering Documents in MongoDB Collections (find, findOne)
• mongodb: Inserting Documents into MongoDB Collections (insertOne, insertMany)
• mongodb: Create or Remove MongoDB Collection
• mongodb: Access Mongo databases from MongoDB Compass
• mongodb: Install Docker to run local MongoDB Container
• cursor: Build Your First MCP Tool in Cursor in Just 2 Minutes
• eslint: Test Custom ESLint Rules with Vitest and RuleTester
• [Course] tanstack: Headless, Mobile-friendly Data Tables with Tanstack Table and React
• cursor: Fix Real-World Coding Errors with GitHub Context through ghx and Cursor Composer
• cursor: How to Work with AI-Generated Code You Don't Understand with ghx and Gemini
• zod: Use Zod Schemas partially using shape and unwrap
• zod: Validate maps and sets using Zod schemas
• zod: Create Custom Zod Schemas and Validate project-specific data
• zod: Declare Precise Array Types within Zod Schemas
• zod: Define Unions and Intersections with Zod
• zod: Make Excessive Object Properties Fail on Zod Validation
• zod: Declare Lack of Value in zod (optional, nullable and nullish)
• zod: Work with Zod Literals and Enums Effectively
• zod: Apply Schema Custom Refinement with Zod
• solid: Full-Stack Signals in Solid, AI Development, and the Future of Web Frameworks
• typescript: Use the erasableSyntaxOnly TypeScript compilation flag
• egghead: Setup and Dive into the React 19 Compiler Optimizations
• react: Fetch and render paginated data with React 19 use
• openai: Combine DeepSeek R1 Reasoning with GPT 3.5 Turbo for the Cheapest, Fastest, and Best AI
• genai: AI Studio's New 65k Output Opens Exciting Possibilities
• cursor: Programming in English with Cursor
• cursor: Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules
• jest: Generate composite objects with fast-check fc.record
• jest: Tidy up your test with @fast-check/jest
• typescript: Write a property-based test with TypeScript and fast-check
• egghead: Batch Fix Every File in Search Results with Cursor's Composer
• tanstack: Fetch and display row details with Promise.all in Tanstack Table
• tanstack: Render remote data in a Tanstack Table with React 19's use hook and a promise
• gemini: An Uncomfortable and Challenging Conversation with AI Studio
• genai: How to Brainstorm Your Project Features to Prepare for AI Agents
• cursor: Generate Custom .cursorrules for Your Project Based on Community Examples
• genai: Search 100s of Issues with GitHub CLI as Context for AI Studio
• cursor: Search All of GitHub's Code and Pass the Results to AI Agents in Cursor
• tanstack: Create a row virtualized HTML table with Tanstack Virtual
• openai: Planning AI Agent Sessions with Reasoning Models
• cursor: Leverage Git Diff to Fix AI Agents' Mistakes
• cursor: Commit Hooks are Critical with AI Agents in Cursor
• eslint: Set up a Custom ESLint Rule
• cursor: Generate Charts from Current Events with Gemini's Structured Output and Code Execution
• cursor: AI YOLO - Sit Back and Watch Cursor Automatically Run Terminal Commands
• gemini: Use Gemini to Analyze a GitHub Repo with GitIngest
• tanstack: Hide and Show Columns with Tanstack Table
• chrome-devtools: Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots
• react: Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command
• npm: Setup local Verdaccio server to release NPM packages
• javascript: Stop Avoiding Classes in TypeScript
• karabiner: Karabiner: Rethinking Right-Click as a Macro Command Center
• css: Create a mobile friendly table with the before pseudo-element
• typescript: Basic Explanation of Typescript Generics
• genai: Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings
• svelte: Get Started with Svelte 5 using the sv CLI
• karabiner: Use Karabiner to Trigger a Terminal Command and Get Notified of the Results
• chrome-devtools: Pause Script Execution in Chrome to Easily Inspect Elements
• gemini: Use Gemini 2.0 to Create Agent Instructions to Refactor an Entire Codebase
• tanstack: Render Custom JSX in a Tanstack Table cell
• next: Let AI Watch Your Screen: Build Next.js Pages with AIStudio's Stream Realtime
• tanstack: Display Tabular Data in React with Tanstack Table
• typescript: TypeScript's "satisfies" for Configuration
• cursor: Windsurf Cascade vs. Cursor Composer Agent: Build a Site from an Image
• css: Customize View Transitions with CSS Using view-transition-old and view-transition-new
• javascript: Create Smooth UI Transitions with the Native View Transitions API
• cursor: Windsurf Cascade vs. Cursor Composer Agent Side-by-Side Comparison
• cursor: Build a Word Game with Windsurf's Cascade AI Agent
• cursor: Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions
• cursor: Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project
• testing-library: Set up Vitest in a Vite Project to Unit Test React Applications using React Testing Library
• javascript: Always Name Functions in JavaScript
• javascript: Import the Same JavaScript Module Multiple Times with Cache Busting
• github: Use GitHub Actions Matrix Include for Complex Job Configurations
• zod: Customize zod Error Messages and Handle zod Errors Effectively
• zod: Use parse and safeParse Runtime Type-checks with zod
• zod: Validate HTTP API Response with zod, fetch and axios
• zod: Treat zod Schemas as Single Source of Truth
• zod: Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts
• zod: Perform Runtime Type-checks on Primitives and Objects with zod
• msw: Install Mock Service Worker (MSW)
• msw: Introduction to Mocking WebSocket APIs with Mock Service Worker
• msw: Override WebSocket Event Handling in Tests with MSW
• playwright: Test WebSockets in Playwright with MSW
• testing-library: Test WebSockets in Vitest with MSW
• msw: Understand WebSocket Logs in MSW
• msw: Prevent WebSocket Event Propagation Between Listeners with MSW
• msw: Prevent WebSocket Server Close Event with MSW
• msw: Send Mocked WebSocket Client Messages to the Original Server with MSW
• javascript: Prevent Server-to-client Message Forwarding in MSW
• msw: Intercept WebSocket Server Events with MSW
• msw: Close Multiple WebSocket Clients with MSW
• msw: Use a Custom Close Code to Close a WebSocket Connection with MSW
• msw: Close a WebSocket Client Connection with Mock Service Worker
• msw: Make a Type-safe and Runtime-safe WebSocket Communication with Zod
• msw: Replay a WebSocket Chat Conversation with Mock Service Worker
• msw: Modify WebSocket Client Events with Mock Service Worker
• msw: Broadcast a Mocked Message to All WebSocket Clients
• msw: Intercept WebSocket Client Events with Mock Service Worker
• msw: Intercept a WebSocket connection with Mock Service Worker
• msw: Set Up Mock Service Worker in the Browser
• next: Create AI Prompts Based on a Directory of Files
• cursor: Run an AI Refactor on Every File in a Directory with Cursor
• node: Efficient File Processing in Node.js with Async Generators and Array.fromAsync
• node: use pnpm as a Node.js version manager
• angular: Replace Angular Structural Directives with Control Flow Syntax using Angular Migrations
• angular: Replace Angular DI Constructor Injection with the inject function using Angular Migrations
• angular: Make Components, Directives and Pipes standalone using Angular Migrations
• angular: Make Angular Routes Lazy Loaded using Angular Migrations
• angular: Replace Input and Output Decorators with signal-based APIs using Angular Migrations
• [Course] angular: Angular Migrations in Practice
• vite: Configure a Vite React TypeScript Application on a Basic Nitro Server
• [Course] egghead: Productive Developer Workflows with AI Enhanced Cursor IDE
• vite: Create a Vite App with the React TypeScript Preset
• solid: Leverage SolidStart Server Actions to Enable Single Flight Mutations
• solid: Prefetch and Cache Data in SolidStart
• solid: Ensure Functions only Run on the Server with `use server` Directive in SolidStart
• solid: Perform Data Fetching and Mutations in SolidStart with createAsync
• solid: Create SolidStart API Routes to Expose Public Endpoints to Your Users
• solid: Install Solid-Router and Use File System Routing to Create Routes
• solid: Swap Between Server-Side Rendering and Client-Side Rendering
• solid: Set up and Run a SolidStart Application
• [Course] solid: Get Started with SolidStart
• ngrx: Integrating NGRX Signal Store with an existing Angular application
• react: Efficiently Render Script Tags in React 19 Components
• react: Deduplicate Title tags with React 19
• react: Hoist Title and Meta tags in React 19
• css: Course Outro: Professional Responsive Websites using Bootstrap
• css: Create a Simple Footer with Bootstrap
• css: Create Forms with Bootstrap
• css: Use Bootstrap to Build a Rotating Carousel of Images
• css: Create Stylish Card Components with Bootstrap
• css: Apply a Flexbox Layout with Bootstrap to a Group of Icons
• css: Create a Hero Image Landing Page Section with Bootstrap container-fluid
• css: Build a Responsive Navbar in Bootstrap
• css: Breakpoints and the Bootstrap Grid System
• css: Project Overview for Create Professional Responsive Websites using Bootstrap
• css: Components of Professional Sites
• css: Course Intro: Professional Responsive Websites using Bootstrap
• [Course] css: Create Professional Responsive Websites using Bootstrap
• vercel: What's Good with Dax Raad
• nitro: Nitro, Vinxi, and RSCs - What's Good with Dev Agrawal
• chrome-devtools: Profile tasks in an Nx workspace with Chrome Devtools
• angular: Configure Redux-style debugging for NGRX Signal Store
• angular: Initialize the NGRX Signal Store state from external APIs using Promises or Async/Await
• angular: Configure lifecycle hooks for an NGRX Signal Store using withHooks
• angular: Implement a simple State Machine using NGRX Signal Store
• angular: Initialize the NGRX Signal Store state from using RxJS Observables and rxMethod
• angular: Use an external Angular provider within withComputed or withMethod
• angular: Make state, computed or method private in NGRX Signal Store
• angular: Share state and perform updates from within component subtree using NGRX Signal Store
• angular: Use NGRX Signal Store methods to run batch updates
• angular: Simplify NGRX Signal Store advanced patchState usecases with Immer immutable utility
• angular: Update NGRX Signal Store state using withMethods calls
• angular: Define NGRX Signal Store Computed Signals
• angular: Use NGRX DeepSignal instances efficiently in Angular applications
• angular: Run quick and dirty NGRX Signal Store debugging
• angular: Retrieve and display the NGRX Signal Store state inside an Angular Component
• angular: Provide the NGRX Signal Store within a Component, a Route, or globally