Learn Chrome, Git and Reactfire

Next.js is a minimalistic framework for server-rendered React applications.

This project is a Next.js example of Kent C Dodd's Frontend Masters Advanced Remix Workshop project.

The aim of this project and course is to take a large project using the traditional Next.js pages architecture and migrate the full project to use the new app directory architecture.

We will fork project repo and clone it to get setup with the project locally. 

Fork and Clone the Next.js 13 Project to Get Started

“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

To audit our app for accessibility issues at runtime we can use Cypress to run our application in a browser environment and then with the aid of the axe-core `cypress-axe` library we can analyze the current page for any accessibility issues.

## Resources
* https://www.cypress.io/
* https://github.com/component-driven/cypress-axe
* https://mochajs.org/#bdd
* https://www.chaijs.com/guide/styles/

Write E2E Tests for Accessibility Using aXe-core and Cypress

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

To audit our app for accessibility issues at runtime we can use Selenium WebDriver to run our application in a browser environment and then with the aid of the aXe-core `webdriverjs` library we can analyze the current page for any accessibility issues.

## Resources
* https://www.selenium.dev/documentation/getting_started/installing_browser_drivers/
* https://github.com/dequelabs/axe-core-npm/blob/develop/packages/webdriverjs/README.md 

Test Accessibility at Runtime with Selenium WebDriver and aXe-Core

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 install the [Redux Dev Tools](https://github.com/zalmoxisus/redux-devtools-extension#installation) extension into Chrome and demonstrate how it lets you inspect the various actions passing through your redux store as well as all of the data it contains. We also briefly demonstrate the time travel debugging capability as we walk back through and un-add items to our shopping cart.

The key here is that because we used [configureStore](https://redux-toolkit.js.org/api/configureStore) from RTK which automatically includes support for redux dev tool without having to explicitly turn it on.

Using the Redux DevTool Support Built-in to Redux Toolkit

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Getting started with contributing to open source projects can be very confusing and stressful. This talk will help clear away the confusion and pinpoint why and how you can make your first open source contribution. 



How to Make Your First Open Source Contribution

It always happens again. We have some weird bug in our codebase, hard to debug and just looking at the Git history doesn't help much. Git has a powerful command to help us: `git bisect`.

We have to simply identify a commit where the bug was not present, and the bad commit (usually the latest of the `master` or `main` branch). Then we invoke `git bisect` with both of them. The rest is just following along and answering questions. Let's see how that works.

Find that bad commit that broke your App with Git Bisect

Cascading Style Sheets bring order and beauty to our applications.

In this lesson, we take a look at how to animate and transition custom properties with CSS Houdini @property. It hasn't been possible to animate and transition background-images and other properties until now. This demo will show you how to define custom properties and define type checking for them.

Check for [Browser Compatibility](https://caniuse.com/mdn-css_at-rules_property).

Use CSS @property to Animate and Transition Custom Properties

In this lesson, we take a look at the CSS aspect-ratio property and see how we can define different aspect ratios for elements.

Check for [browser compatibility](https://caniuse.com/mdn-css_properties_aspect-ratio).

Use CSS aspect-ratio to prescribe an aspect ratio for an element

CSS Media queries are heavily used across web pages for different reasons, such as make your web pages responsive, but what if we can use them to improve web accessibility as well?

In this video, I’m sharing How to use CSS Media Queries for web accessibility in your web app, combining the user preferences choice with `prefers-color-scheme` media query and enabling dark mode in your web app.

Create a Dark Mode Theme in Your Web App Using CSS Media Query

Optional chaining ?. in javascript is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing long chain of object properties in javascript.

Optional Chaining

You can create diffs in markdown to show what has changed in a code snippet. I use this in blog posts to highlight changed lines for readers. This works for code snippets in most markdown packages and on Dev.to.

To show a line of code changing in a function, you can do this:

```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```

First, instead of specifying the programming language, use diff after the backticks. Then at the beginning of any lines of code you want to show as removed, add a -. At the beginning of any lines of code you want to show as added, add a +.

The code would look like this:

````
```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```
````

Create a Diff in Markdown to Show What Has Changed in a Code Snippet

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

chrome-devtools

Lighthouse is a tool that analyses web apps and web pages, collecting modern performance metrics and insights on developer best practices.

It's built directly into the Chrome DevTools and in this quick lesson we're going to learn how to run the audit, how to read its results and why you should always run the Lighthouse audit in Incognito mode.



Run a Lighthouse audit in Chrome Devtools

Sometimes you encounter a backend issue which seems to occur only on your computer, with a very specific sets of headers, cookies etc. Because of that, it's useful to have a way of easily sharing network requests sent by your browser with other members of your team.

In this quick lesson we're going to learn how to copy a network request as `fetch` (so we can test it in the Chrome DevTools console/in a node.js script) or as cURL (so we can test it in a terminal).

Copy a network request as fetch or cURL with Chrome DevTools

Sometimes when debugging our CSS styles it's useful to be able to see what a DOM element is going to look like in a given state (e.g. `:focus`, `:active, `:hover`) etc.

Unfortunately it's not possible to both hover over an element and debug it in Chrome DevTools at the same time (since we only have a single cursor!).

In this quick lesson we're going to learn how to address this problem by explicitly forcing an element state to `:hover` with DevTools

Force a DOM element state in Chrome DevTools

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

In this lesson, we look at how you can use `content-visibility: auto` to significantly improve page load performance by applying it to `section` elements. The property tells the browser to skip rendering an element if it is off-screen and below the fold on the initial load. 

This can introduce some scroll jumping which we walk through how to combat with `contain-intrinsic-size`.

• Read more about `content-visibility` and `contain-intrinsic-size` here: https://web.dev/content-visibility/

Use content-visibility: auto to Improve Initial Page Load Time

Check out the new and currently experimental "CSS Overview" feature in Chrome's DevTools.

Use it to get an overview of details such as colors, fonts, media queries, and even unused declarations.

Explore a Site's CSS with Chrome DevTools CSS Overview

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch.

The key is to switch to a new branch before you add your first commit, I choose `main` in this lesson. When I push `main` up to Github as the first branch, it gets set to the default.

Configure a New Github Repo to Use a Different Default Branch

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch for an existing repo.

Configure an existing Github repo to use a different default branch

Using the [GitHub CLI](https://github.com/cli/cli) and a shell script, we will automate the process of monitoring pull requests in repositories we maintain. Specifically, open PRs we have created and those awaiting our review.

Monitor Pull Requests with the GitHub CLI

We scaffold out a new GitHub repo to deploy netlify functions and a small index.html file, while covering Makefile basics and netlify.toml. The lesson ends with a working Netlify site.

Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml

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

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.

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.