Learn A11y, Netlify and Reactfire

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

netlify

Serverless Function 4

Serverless Function 3

Serverless Function 2

Update fetchReply

Netlify Serverless Function 1

Netlify CLI

Add Netlify env var

Netlify sign-up

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y.

Accessibility is broken down into 4 categories of disability: visual, cognitive, auditory, motor. 

Regardless of the category of disability, accessibilities aim in web development is to make applications and websites usable for everyone.

a11y

In this course, we'll be focusing on building an accessible component by using a built-in browser API with React to implement best practices in accessibility custom features. 

Everyone is responsible for accessibility, and we need to start creating features and websites with that in mind. The goal of this course is for you to exploit your understanding of HTML and aria, and be able to look at any common features and identify the different accessibility patterns. 

With this course you won't only learn about accessibility, but also will learn about `HTMLMediaElement` API, and state management in React. 


 





Introduction to Creating a Custom Accessible Audio Player with React

React's `forwardRef` function allows a component to receive a ref that has been created outside of it. This can be useful in cases where you want to have a specific part of your component, such as a section of a long transcript or a specific part of an audio recording, referenced from outside the component.

One example of when this might be useful is if you have a "listicle" type of audio, such as "5 things your tech resume needs", and you want to allow users to jump to specific parts of the audio. By converting the component to a forwarded ref component, you can create a ref in the parent component (in this case, the "App" component) and pass it into the audio component. This allows you to create a few buttons in the parent component that can control the audio ref and jump to specific audio sections.

To convert a component to a forwarded ref component, you can use React's `forwardRef` function to wrap the component, and then remove the audio ref and replace all instances with the new ref.

By doing this, you can now control the audio component, like play, pause and jump to a specific time, by interacting with the `audioRef` ref object created in the parent component and passed into the audio component.

**Think about:** What ways to control the audio outside the component could help with accessibility?

Using a forwardRef to Create External Controls

We are creating an accessible popup menu for a web application. It covers various concepts, including handling keyboard events, creating a new dropdown component for reuse, using arrow keys to navigate through buttons, using the Tab key to close the menu and go to the next item in the tab order, using the Escape key to close the menu and focus on the button that closes it, using the `aria-expanded` attribute to communicate whether the menu is open or closed, and the difference between the tab index values of 0 and -1. 

**Think about:**
- Why tabindex -1?
- Why would you use arrows versus tab key to navigate through the dropdown?

Create a Dropdown Menu for Rates

In this lesson, we are using HTML, accessibility concepts, and ARIA attributes to improve the time scrubber feature of an audio player. 

The goal is to make it accessible to users of screen readers so that the time scrubber announces the actual time (e.g. 12 minutes and 15 seconds) rather than just the value (e.g. 735). 

We are also creating a new folder called "helpers" in the "src" folder and a new file called "format time.js" within it to hold a function called "format human read time" that takes time as a parameter and returns the human-readable equivalent of that time. Additionally, the author debugs the code and uses console.log to check the variable.

**Think about:** Why does a human-readable name help?

Create a Human Readable Time Formatter

I suggest using the previously learned approach but keep in mind that it may lead to an overly complex markup. We also use the `aria-label` attribute, which can be used to override the text within a label element.

**Think about:** Why would you use an `aria-label` instead of creating a visually hidden span?

Using Aria-Label as a Solution for Overly Complex Markup

We create an input range with a label, where the range is between 0 and 1 with a step of 0 - 1. The input's value should be determined by a ternary statement that checks if the volume is muted and sets it to 0 or to the current volume if not muted. 

An `onVolumeScrubberChange` function is also added that sets the volume to the event target value when the input value changes and updates the volume in the state and an audio reference. The `onVolumeChange` function does not need to be used and the logic needs to be adjusted to ensure that the volume can be updated and that it mutes when the volume reaches 0.

**Think about:** Why do we have to add `audioRef.current.volume === 0` in addition to `audioRef.current.muted`?

Implementing a Volume Range with an onChange Event

We are creating a toggle button for muting and unmuting an audio element using React hooks `useState` and `useRef`. It destructures `isMuted` from the `useState` hook and sets the initial state to false. 

The button's inner text is dependent on the state of `isMuted`, and a `toggleMute` function is created which sets `isMuted` to the opposite of its current state and also sets the `audioRef.current.muted` property to the opposite of `isMuted`. 

A `onVolumeChange` function is added to the audio element that sets the `isMuted` state based on the value of `audioRef.current.muted`. This allows the `isMuted` state to change even when the mute button on the audio element itself is pressed.

**Think about:** 
- Why do we have to add `onVolumeChange` for instead of `onMuted`? 
- How can we use `onVolumeChange` to check for things being muted?

Creating a Toggle Button for Muting and Unmuting an Audio Element in React

We are creating a playback rate button in a React application. An array of rates is created, and each element of the array is mapped to a button. Each button is given an onClick handler that calls an anonymous function called `changeRate`. 

`changeRate` sets the playback rate of an audio element to the rate passed as an argument. When the button is pressed in the browser, it shows the new playback rate.

**Think about:** We have all these states for volume, media time etc, why don't we have one for rate?

Creating a Playback Rate Button

We will create two buttons labeled "rewind 15 seconds" and "fast forward 15 seconds." Then, we created two functions, `onRewind` and `onFastForward`, to adjust the current time of a media by 15 seconds. The `onRewind` function will use `Math.max` to ensure that the time does not go into negative, and the `onFastForward` function will use `Math.min` to set a max limit. These functions will be added to the click events of the corresponding buttons. Finally, it sets the new time for the media state and the audio reference.

**Think about:** Why do you need the second parameter for `math.max` and `math.min`?

Add Fast-Forward and Rewind 15 Second Buttons

We Introduce [MDN Media docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) and all the APIs. 

In this lesson, we added the `useRef` and created an `audioRef` in our components. We also added the `ref` to the audio element to control it outside of the audio element. We use the `useState` hook, and we created an `isPlaying` state. And finally, we added a `button` that dynamically renders the text as pause and play depending on the `isPlaying` state. On click of that button, we toggle the `isPlaying` state, and depending on that state, we either pause or play it.


Creating a Toggle for Playing and Pausing the Audio

In this lesson we are going to create an `AudioPlayer` component that takes two props `src` and `transcript`, where it returns the audio element and renders the transcript, and we write some pseudo-code for the audio player to reference.

**Think about**: What do we get for free with common HTML elements?

Setup Native Audio and Plan our Audio Player Code

In this lesson, you'll learn how to set up a new Vite project and configure it to use React with TypeScript.

Set up a Vite project with React and TypeScript

In this lesson, you'll globally install the Netlify CLI and use its dev command to run your site locally. Netlify automatically detects if it's a Vite project!

Set up Vite local dev with the Netlify CLI

 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

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

Learn how to leverage the GitHub CLI to efficiently search through issues across multiple repositories and use that data with AI Studio for deeper insights.

You learn how to:

-  Search for specific issues across repositories using GitHub CLI
- Filtering issues based on criteria like comment count
- Extracting issue content and comments
- Using the collected data as context in AI Studio
- Creating practical applications like FAQs from issue discussions

The example demonstrates creating a Framer Motion FAQ by searching GitHub for issues with multiple comments, but the technique can be applied to any framework or library.

This workflow helps developers:
- Research common problems and solutions
- Understand recurring issues in specific technologies
- Generate useful documentation from real-world problems
- Make better use of existing GitHub discussions

This approach combines the power of GitHub's vast knowledge base with AI tools to create valuable insights for development work.

John Lindquist

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results