Learn D3, Electron and Puppeteer

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

In this lesson, we'll clean up some of our placeholder elements. We'll then look at D3's ordinal scale to create a color scale that maps our regions to colors. We'll apply the colors based on region to our data points via the SVG `g`(group) element to apply the color to both our bars and their corresponding inline labels.

Create a Color Scale with D3's scaleOrdinal

Looking at our bars against each other with the x-axis as a guide gives us some relative information, but doesn't deliver the most precise values. In this lesson, we'll add additional labels to show the exact values of each data point in the context of the individual bars.

Clarify Data in D3 with Additional Labels and Rounded Domain Values

In this lesson, we'll see how we can add labels down the y-axis using our band scale. We'll see how to render the labels in React and how we can precisely position the labels based on values calculated by D3 and our scales.

Render a Y Axis for a Bar Chart with D3 and React

In this lesson, we'll take advantage of our `xScale` and the bottom margin to create an axis to start giving our data meaning. We'll access `ticks` from the scale and then use React to render and position the SVG `rect` and `text` elements to create the x-axis for our chart.

Render an X Axis for a Bar Chart with D3 and React

When applying scales to data elements in D3, it's common to combine the scale with an accessor function in order to apply the scale to the appropriate key on a data object. In this lesson, we'll create scaled accessors to refactor and tighten up some existing code.

Create Scaled Accessor Functions from D3 Scales

A band scale allows us to map a discrete set of values to a continuous range. In this lesson, we'll use a band scale in D3 to take the distinct "region" keys in our sample data and map those to evenly spaced and sized elements on our y-axis. We'll use this band scale to show a bar in the bar chart for each region, setting their size and position based on this scale.

Layout SVG Elements on a Y Axis with a D3 Band Scale in React

Drawing data accurately requires a consistent and precise mechanism for mapping data values to pixels on the screen. We can accomplish this mapping in D3 using scales. There are various scales available in D3, depending on your needs. In this lesson we'll using a linear scale to map a data domain of continuous values to continuous range of pixel values. We'll render a new SVG element, setting its width from our scale.

Set an SVG Element's Width Based on a D3 Linear Scale in React

When you want to add data visualizations to your web app, D3 is pretty much the accepted standard.

In this course, we'll start from scratch and build out a bar chart for some sample data using D3's utilities to wrangle the data and then we'll handle the rendering with React.

We'll start by laying out the SVG element that will hold everything, then we'll move on to creating scales that will give us the information we need to render our data as well as axes to give our data some meaning.

Along the way, we'll cover accessor functions, linear scales, band scales and finally, we'll use an ordinal scale to map data objects to colors.

This course certainly won't cover all of D3, but we'll cover enough of the fundamentals to give you a solid jumping off point for future D3 and React data visualization work.

Introduction to Create a Bar Chart with React and D3

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

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

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

puppeteer

When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

Setting the viewport on a Playwright headless browser

In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that will render a line where ever the user hovers using `bisect` from D3. Then we'll show how to render another line path using the scales and manipulating our data. Finally we'll add another line split so we're rendering 2 line paths.

Create an Interactive Line Graph with a Hover Line Highlight using VX and D3

In this lesson we'll use `scaleLinear` to render a line, and additionally add data points using `circle`. Using `onMouseMove` we will call the `invert` function to do a reverse `range` to `domain` value interpolation. Then we will use `Math.round` and adjust the radius of the circle to highlight the selected point.

How to Use scaleLinear Invert to Find a Data Point to Highlight on Mouse Move

In this lesson we'll start by using `d3-scale` to build up a `scaleBand` for our `x` data and a `scaleLinear` for our `y` data points to allow them to map and extrapolate our data correctly to renderable bars. We'll add in `padding` between each bar, and then using the svg `rect` will render a collection of bars.

Fundamentals of Rendering Data as an SVG Bar Graph with D3, scaleBand, and scaleLinear

In this lesson we'll start by using `d3-scale` to build up a `scaleLinear` for both our `x` and `y` data points to allow them to map and extrapolate our data correctly to renderable points. Then we'll use `line` from `d3-shape` to build out our `path`. We'll supply it with different sets of data and explore how `range` can effect how our data renders. Finally we'll show off using `curveStep` to see how it changes our graph rendering.

How to Render Data as an SVG Line with D3 and scaleLinear

In this lesson we are going to use the firstPaintTime metric from chrome's load times, as well as the navigation start from the W3C window metrics, to calculate how long it takes a page to paint. We will set up a quick function and test it out on google.com

Calculate a Page's First Paint Time with Puppeteer

It can be helpful when automating tests, metrics, and integration tools to know not only how much JavaScript there is on a page but to calculate how much is not being used. We are able to calculate the percentage of JS used by getting metrics from the window object. 

Get the Percentage of Unused JS on a page with Puppeteer

In this lesson we are going to use Google's Puppeteer to gather metrics about a page's load time. We'll use a high level date subtraction method as well as gather data from the window performance timing. Then see how throttling the network to 3G affects the page's load time. 

Get a Page's Load Time with Puppeteer

In this lesson we are going to send commands to the chromium browser with Puppeteer. These commands will enable us to calculate both the total number of CSS stylesheets used on the page and the ruleUsage for each of those stylesheets. With these metrics we will be able to calculate the percentage of unused CSS on the page. 

Get the Percentage of Unused CSS on a Page with Google's Puppeteer

In this lesson you will learn how to use a D3 line graph with any framework. The video shows the examples of Angular, React and Cycle.js, but you can transfer the knowledge to other frameworks easily.

Use D3 with any Framework

In this lesson you will learn how to create a simple D3 line graph based on your own data. We will generate scaling functions to prepare the data and use a line generator to encode it into a string which we then can use to display our graph on the DOM.

Create a simple D3 line graph

When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column chart.

Animate Chart Axis Transitions in D3 v4

You will learn how to create and manage complex, nested schemas using a real world example (room bookings with guest details) used throughout all lessons. All created schemas are tested against potential bugs and we verify error messages.

The course covers topics such as:

- Utilizing Zod's shape and unwrap features to perform partial validations without losing the overall schema structure.
- Managing optional, nullable and nullish properties.
- Implementing unions and intersections to handle different types of data.
- Ensuring type safety with sets and maps, including custom validation logic for primitive values.
- Creating custom error messages for improved user feedback.

Get a solid understanding of how to leverage Zod to enhance runtime data validation in JavaScript/TypeScript applications 🔥

Tomasz Ducin

Advanced Type Checks with Zod

Get a solid understanding of how to leverage Zod to enhance runtime data validation in JavaScript or TypeScript applications

Get started with MongoDB and Docker really quick 🔥 even if you have no backend/fullstack experience.

This lesson guides you through installing Docker Desktop and setting up a MongoDB image.

We explain Docker images and containers, and their roles in providing isolated software environments.

We run a MongoDB image in 2 ways: using the terminal and Docker Desktop

We demonstrates configuring port settings for a container and accessing the MongoDB shell (`mongosh`) to interact with the database.

We learn how to manage Docker containers, configure settings, and run commands inside the container.

Grab the CLI command: 🔥 `docker run --name some-mongo -d mongo:latest` 🔥

Install Docker to run local MongoDB Container

Learn to install Docker Desktop, set up a MongoDB image, and manage containers. Configure ports and access the Mongo shell

[https://github.com/johnlindquist/mcp-cursor-tool-starter/tree/main](https://github.com/johnlindquist/mcp-cursor-tool-starter/tree/main)

Cursor's AI is powerful, but it can't do everything. What if you could give it the ability to interact with your specific workflows, tools, and data? This lesson shows you how to do exactly that by building a custom MCP tool – and we'll do it in under two minutes!

We'll leverage the Model Context Protocol (MCP), an open standard that bridges the gap between AI agents (like Cursor's Composer) and your custom code. By creating an MCP tool, you're essentially giving Cursor a new skill.

Here's the breakdown:

Understanding MCP: We'll briefly cover what the Model Context Protocol (MCP) is and why it's the key to extending Cursor's functionality. In short, it enables communication between the AI and your tools in a standardized way.

Fast Track Setup: We'll use a ready-made starter project (a single TypeScript file and package.json) to skip the boilerplate and get straight to the core concepts.

Step-by-Step Integration: We'll walk through the simple process of:

Cloning the starter project.

Installing dependencies with pnpm install.

Running the starter server.

Adding the tool to Cursor's MCP settings (under Features > MCP).

Verifying that your tool is working

Real-World Example: We'll demonstrate the tool in action, using Cursor's Composer to create a new GitHub issue using the gh CLI, all driven by our custom MCP tool.

This lesson is about more than just building one tool; it's about understanding how to extend Cursor's capabilities to fit your unique development needs. You'll learn the foundational steps to create a whole ecosystem of AI-powered tools.

Build Your First MCP Tool in Cursor in Just 2 Minutes

Displaying data in tables has been notoriously hard to implement. Naive implementations of data tables will leave your app slow and janky and many table libraries out there are restricted to a few select UI frameworks they use or aren't very customizable.

Tanstack Table is a 'headless' option meaning you have complete control of the presentation while taking advantage of the data side of the equation.

You'll be able to fetch and display remote data, handle pagination, and implement row virtualization for better performance.

Once you've implemented basic functionality you can take your tables to the next level customizing cells with your own JSX components, adding features like toggling column visibility, and ensuring your table is mobile-friendly with CSS pseudo-elements.

By the end, you'll have the skills to create efficient, user-friendly tables that elevate your applications. You can take what you learn here (using React) to any of the popular modern UI frameworks that fit your project requirements.

Ian Jones

Headless, Mobile-friendly Data Tables with Tanstack Table and React

Learn to display, paginate, and virtualize data effectively in a table with Tanstack table and React 19.

Install `ghx` with `npm i -g @johnlindquist/ghx`

https://github.com/johnlindquist/ghx

You've copied and pasted code, set up your project, and... *error*.  "Stream is not readable."  Sound familiar?  Generic Google searches and outdated Stack Overflow answers often leave you more confused than when you started.  You need more than just documentation; you need *context*.  You need to see how real developers solve this *exact* problem.

This lesson shows you a better way to debug, using real-world GitHub examples and the power of Cursor's Composer.

Here's the workflow we'll cover:

1.  **Identify the Error:** You've already done this!  You have a specific error message ("Stream is not readable") and the code that's causing it.
2.  **Find Real-World Solutions with `ghx`:** We'll use `ghx`, a tool for searching GitHub, to find *actual projects* that have encountered (and solved!) this same issue.  No more generic advice – you'll see working code.
3.  **Consolidate and Analyze:**  `ghx` brings those relevant code snippets into a single, easy-to-read file.
4.  **Leverage Cursor's Composer:** We'll use Cursor's Composer to directly interact with the examples and your problematic code.  Paste in your error, reference the `ghx`-generated file, and ask targeted questions like:
    *   "Based on these examples, how should I modify my code to fix the 'stream is not readable' error?"
    *   "What's the common cause of this error in the context of an MCP server?"
    *   "Show me the specific lines in the examples that handle stream readability correctly."
5. **Fix the Error:** Implement the solution using this workflow.

Instead of guessing, you'll learn directly from proven solutions.  You'll gain a deeper understanding of your issue and how to troubleshoot it effectively.  This approach transforms debugging from a frustrating hunt into a targeted learning experience.

Fix Real-World Coding Errors with GitHub Context through ghx and Cursor Composer

Learn how to test custom ESLint rules with Vitest and RuleTester.

In the [previous video](https://egghead.io/set-up-a-custom-es-lint-rule~kq49h), we created a custom eslint rule that gives us a warning when some of the class names don’t start with a lowercase letter.

Here, I'll show you how to test this or any other custom ESLint rule using unit tests without manually restarting the ESLint server or modifying production code to check if the rules work correctly. We'll look at the structure in which correct and incorrect code samples should be specific to RuleTester.

We'll also learn how to make our rule fixable and verify that the applied fix works as expected.

Test Custom ESLint Rules with Vitest and RuleTester

Learn to test a Custom ESLint Rule using Vitest and RuleTester.

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

How to Work with AI-Generated Code You Don't Understand with ghx and Gemini

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

Search

Search Results