 Courses from Andy Van Slaars

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

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

In this lesson we'll set the stage for a data visualization by defining dimensions for our overall SVG as well as margins so we can create a bounded area inside the SVG. This will give us a distinct area to draw our visualized data points as well as space in the margins that will accommodate our axes. We'll render this SVG using React so we have a canvas (not the HTML element, though 😅) for the upcoming steps.

Draw an SVG for a Data Visualization 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

We often need to move in one direction or another in a JavaScript array to focus on one value at a time. When we hit an upper or lower bound, it's convenient to have the referenced index jump to the other end of the array so we can keep cycling through in that same direction. In this lesson, we'll apply this to a React UI, allowing the UI to "jump" to the beginning of the array when we hit "next" at the end of the array, and to jump to the last item in the array when moving "back" and we hit the lower bound of the array and we'll do it by taking advantage of the `%` (modulus) operator.

Cycle Through an Array of Values with the Modulus Operator

Before the hooks API was introduced, class components were the only way to create stateful components. With countless class-based React components in the wild, you'll need to know how to support them, even if other parts of your code base use hooks. In this lesson, we'll handle user events and update the component's state in response to those events with React's setState method.

Manage State and Respond to User Events in a Class Component 

In React, our UI is a function of state (and props). In this lesson, we'll create some internal state and pass some props into a class component and use them together to render some UI in the class component's `render` method.

Render UI Based on Props and State in a Class Component

The hooks API that brought us useState, useEffect, and others became available in React 16.8, but the class syntax for creating components is still fully supported. Unless you're only working on brand-new React code, odds are good that you're going to come across components built as classes. In this lesson, we'll build a new component using the class syntax.

Create a React Component Using the Class Syntax

From a user perspective, navigating your application should be the same whether its a server-rendered PHP app, or a single page app written with React. To avoid breaking known paradigms for our users, we want as link to behave like a link. A view change should come with corresponding updates to the browser's address bar and the back button should work as expected. In this lesson, we'll install @reach/router and set our application up with a second view that we can navigate to with a link. We'll also verify that the browser's back button works.

Support Multiple Views in a Single Page Application with @reach/router

When we reuse components that rely on HTML id attributes, we run the risk of rendering HTML that results in duplicate IDs in the HTML. IDs are meant to be unique and this is problematic when rendering multiple forms, where IDs are used to make the association between labels and inputs. If this association is broken, it leads to unexpected behavior and is an accessibility issue. In this lesson, we'll look at how we can conditionally assign IDs and ensure that we don't render duplicate IDs, even when rendering several instances of the same form component on the page.

Avoid Duplicate id Attributes when Reusing Form Components

The term "upsert" means to support both inserting a new record and update an existing record. In order to support upsert capabilities with a form in React, we need to determine which mode we're in and if we're performing an update, we need to make sure the form fields are populated the existing values for the item being updated. In this lesson, we'll refactor an exiting form to handle updates and verify that we've also maintained the ability to use that same form component to insert new records.

Make a React Form Component that Handles Inserts and Updates

Sometimes we want to conditionally render a child component based on some internal component state. In the case of inline editing, we need to be able to swap a component's rendered output between the read-only view of the data and the form for editing the data. In this lesson, we'll do exactly this, updating state based on user input and determining which of two components we should render based on that state value.

Conditionally Render Components in React

Sometimes, making your code more succinct can make the code more readable. Readable code is easier to grok for other developers and when everybody understands the code, it's easier to maintain and share the burden on a team. In this lesson, we'll refactor our code to make the JSX less verbose using object spread and destructuring.

Refactor React Components with Prop Spreading and Destructuring

The default behavior of an HTML form is to submit a GET request with the values of all its child inputs as URL query parameters. In React, we'd rather handle that within our components and avoid the need for server-side form handling code. In this lesson, we'll wire up a submit handler for a form and manage the submission and rendering updates in React.

Handle Form Submissions in React

We always want our rendered UI to be a function of our state. In order for that to hold, we need to control the rendered value of form inputs by making them controlled inputs. In this lesson, we'll create a form and use component state and event handling to maintain the input value in component state and control the rendering of our inputs based on that state.

Create a Form with Controlled Inputs in React

In React, we try to avoid mutating data structures and instead, treat them as immutable. This means an update to an object or an array should result in a new object or array that reflects the updates we want to make. This allows React to use reference comparison for optimization purposes. We don't always need this, but if we are consistent in treating data as immutable, we can take advantage of that whenever we need it without having to go back and change existing code. In this lesson, we'll see how we can remove an item from an array without mutating the original array.

Remove Items in a List Without Mutating the Source Array

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Andy Van Slaars

Search Results