Learn Aria, Reactfire and Yarn

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

We'll go over the work it takes to use ARIA to show why Semantic HTML is almost always the safer bet. 

Create a Semantic Checkbox vs an ARIA Checkbox

Debug Computed Accessibility Properties with Chrome Dev Tools

In this lesson, we use the element inspector in Chrome to test and improve our contrast to meet WCAG AA Contrast Ratio Standards.

Resources:
- [WebAIM - Contrast and Color Accessibility](https://webaim.org/articles/contrast/)

Debugging Accessible Contrast with Chrome Dev Tools

In this lesson, we are creating the audio player interface more visually appealing using icons from the React Icons library and Font Awesome, in this process, we are also ensuring that the interface remains accessible to screen readers by providing text descriptions for the icons, first by using the `title` prop on each icon, and then by implementing a `visually hidden` technique that hides the text descriptions from sighted users but makes them available to screen readers. This involves copying and pasting some CSS code to create a visually-hidden class, adding an `aria-hidden` attribute to each icon, wrapping each icon in a React fragment, and then adding a `span` element above each icon with the corresponding text description and the `visually-hidden` class.

**Think about:**  
- Why use `aria-hidden` or visually hide spans? 
- What value does this add to screen reader users?

Design Accessible Buttons Using Icons

In this lesson, we will create event listeners for the play and pause events on an audio player element and use these listeners to update the value of a variable called `isPlaying` that tracks the current state of the player (e.g., whether it is currently playing or paused). The event listeners, named `onPlay` and `onPause`, will be triggered when the user presses the play or pause button on the audio player element itself, not on a custom play button that may have been created.

Add Play and Pause Events to the Audio Player

We are creating an input of type range with an associated label, this input is to represent the current playback position in the audio, and the user will be able to change the playback position using the input.

The input value is set to be the media time state, it is added a minimum value of 0 and a maximum value as the duration. The demonstration shows how the media time state updates accordingly when the user changes the time using the input range.

A function called `onScrubberChange` is added, which takes in an event as an argument and `console.logs` the value of that event. The `onChange` event is added to the input, ensuring it works as expected. A variable sets the media time state and the current time on the audio ref.

**Think about:** Why do we use the `event.target.value` to set the new `mediaTime` (reminder that the value of the range is bound to `mediaTime`....maybe take a look at that with the formatter)

Create the Audio Scrubber to Control Playback Position

In this lesson, we are creating a new state called `mediaTime` with an initial value of 0, updating sample text in the markup to display the value of `mediaTime`, and adding an event listener to the audio element for the `timeUpdate` event.

In the `timeUpdate` event listener callback function, the `mediaTime` state is set to the audio element's current time, which can be accessed using the `audioRef.current.currentTime`. A function is added to the `onTimeUpdate` event of the audio element, to be able to track the current time. And a time formatter is added to format the time for displaying elapsed time and total time.

**Think about:** How often does onTimeUpdate update? (every second, not every millisecond) 

Tracking Audio Playback Progress by Adding Elapsed Time 

We created a duration state with an initial value of zero, then added an event listener to the audio element for the `loadedMetaData` event. In the event listener callback function, you set the duration state's value to be the audio element's current duration. This ensures that the value of the duration state is only set once the audio element metadata is loaded, allowing you to display the accurate total time of the audio file.

**Think about:** Why do we need to set the duration on the `onLoadedMetadata` event?

"The `onLoadedMetadata` event occurs when metadata for the specified audio/video has been loaded." You can read the docs [here](https://www.w3schools.com/tags/av_event_loadedmetadata.asp) 


 Implementing a Duration State 

Sometimes it's beneficial to add more context for a form field than can be provided by the label. In this lesson, we'll create the `.field-description` class to enable an additional field description. And we'll learn how to ensure users of assistive technology also receive the description in context by associating the description to the field with `aria-describedby`. This text span can also be used to provide validation messages.

Create and Style an Accessible Field Description

Accessible Rich Internet Applications Suite — WAI-ARIA — defines a way to make Web accessible to people with any type of disabilities and it’s also a good practice for skeleton loaders.

Attributes such as `tabindex`, `role`, and `aria-*` are essential for assistive technologies such as screen readers. So that, users with any type of visual disabilities can understand that the specific state of the fragment of your page is currently loading, having that validated by using different tools, such as Lighthouse integration via Chrome Devtools, as an example.

Use WAI-ARIA Attributes to improve Web Accessibility of your Skeleton Loader

Test web accessibility using the axe browser extension in Chrome, Firefox or Edge. Axe is an accessibility testing engine for websites and other HTML-based user interfaces.

The tool will run on your site and sort the errors it encounters in order of performance from Critical down to Minor. When you select issues, you'll get a detailed page of of what went wrong and how you can fix it.


Test Web Accessibility Using the Axe Browser Extension

Test web accessibility using the WAVE Web Accessibility Evaluation Tool. WAVE is developed and made available as a free community service by WebAIM. 

With the WAVE tool, you can test for accessibility directly in the context of the page. You'll be able to click on errors that you have to learn more about it, why it matters, and how to fix them.

In addition to a detailed summary of the issues on your page, WAVE has tabs for structure and color contrast to give you a detailed view of how your page is doing with both issues 



Test Web Accessibility Using the WAVE Browser Extension

Learn to test for accessibility using Google's Lighthouse tool -- an open-source, automated tool for auditing web pages.
Lighthouse can audit with quite a few different tests (SEO, performance, PWA, etc.). We will only be looking at the Accessibility portion. The audit will show any issues that the site has with links to learn more as well as which elements specifically failed the tests.  


Test Web Accessibility using Lighthouse

In this exercise, we will be going over 2 examples of when to use aria-hidden (hint: decoration) and when to use hidden.

In the first example, we will be hiding a "middle dot" that we have for formatting. This middle dot isn't necessary to be read out, so we add an aria-hidden attribute on that span.

When we use hidden, we will completely hide things from the viewport AND the screen reader.

aria-hidden vs. hidden

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Good accessibility is crucial in modern web apps. Keyboard navigation plays an important role in that undertaking. In this lesson we're going to explore how we can use the Chrome Devtools to easily debug the current active element on our DOM.

Use Chrome Devtools to debug the current active DOM element

Fast, reliable, and secure dependency management.

yarn

Yarn 2 is workspace aware. When you need to upgrade a package in one workspace, yarn will ask you if you want to resolve the version of the package to a version you use in a different package.

In this lesson, we go over `yarn up -i` to upgrade a package with an old version.

Use yarn up to Update Dependencies In A Yarn Workspace

`yarn dlx` can be used to run packages without installing them. This is useful for packages like `create-react-app` and `gatsby` that scaffold out apps for you, so you don't have to keep updating your global versions.



Use Yarn dlx to Execute Packages without Installing Them

This lesson goes over how to install yarn 2 through npm.

To install yarn 2 globally, we use `npm install -g yarn@berry`. 

To install yarn 2 to a specific project, we use `yarn policies set-version berry`. This creates a `.yarnrc` file and a `.yarn/` directory. `.yarnrc` that sets the path to our yarn instance in the created `.yarn/` directory that holds our new yarn version.

Install Yarn 2

Yarn PnP is a new feature set on **by default** with yarn 2. PnP gets rid of your projects `node_modules` in favor of a `.pnp.js` file.

This `.pnp.js` file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

WTF is Yarn Plug'n'Play (PnP)?

Yarn 2 (Berry) has finally [released a stable version](https://dev.to/arcanis/introducing-yarn-2-4eh1)! 

The yarn team has been working on this release for over 2 years. 

This collection goes over: 

- What yarn pnp is and how it tries to solve the `node_modules` problem
- How to install yarn globally and locally inside of a single project
- How to use `yarn dlx`
- How to use `yarn up` to manage yarn workspace dependencies



Yarn 2 AKA Berry

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The fastest way to create a robust, cross-platform compatible Node.js CLI (optionally typed with TypeScript) is by running `npx oclif single mycli`. Here we explain what this means and how and why to integrate this with Yarn Workspaces for an ideal developer experience.

Create a Single-Command Node.js CLI with Oclif, TypeScript and Yarn Workspaces

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 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

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

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

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.