Learn Chrome, Reactfire and Serverless

“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

In this video you'll learn how to deploy a React app to AWS using AWS Amplify Hosting's drag and drop folder functionality. The app will also automatically be globally distributed on AWS's global CDN.

Deploy a React App to AWS in 24 seconds

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

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

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

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Environment variables set in a `.env` file can be imported using the Netlify CLI with the following command: `netlify env:import`.

This allows you to manage environment variables directly on Netlify, providing the benefit of security and flexibility of sharing environment variables with your team. 

From inside Netlify, you can access the environment variables in:

`Site settings` > `Build & deploy` > `Environment` > `Environment variables`

Import and Set Environment Variables from a .env file using Netlify CLI

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: `id`, `name`, `favoriteSong` for each corgi. 

[http://no-cors-api.netlify.app/api/corgis](http://no-cors-api.netlify.app/api/corgis)

We will also use `node-fetch` a light-weight module that brings the `fetch` API to fetch the data into our application.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions 

There are a few ways you can run Netlify serverless functions while you are developing them. 

You can: 

- Navigate to the directory under the `/.netlify/functions/` path
- Curl them using the full URL
- Use an app like Postman

Manually Trigger Netlify Serverless Functions Locally

Netlify makes deploying to production a breeze by configuring your Netlify CLI to your Netlify account and integrating with GitHub.

We'll log in to Netlify through the CLI and initialize a site by completing all the options that the CLI runs us through. Once this is done, Netlify will trigger new builds for your site every time you push to GitHub.

Deploy Serverless Functions to Production on Netlify using the Netlify CLI

Netlify makes developing serverless functions easy with the netlify-cli (`ntl` for short). You'll be able to build and test functions locally as well as publish your functions from the CLI. 

We will install netlify-cli globally and create a `netlify.toml` file that will configure where the CLI should look to run functions that we define, in our case `functions/`. When the application is served up, Netlify runs functions under `/.netlify/functions/`.

Set up a Local Development Environment for Serverless Functions Using Netlify

A serverless function is something that is going to allow us to do server-like things without having to manage servers, but an important distinction here is that serverless does not mean that there are **no** servers. 

The environment is actually running on top of an operating system and uses physical servers, but the responsibility for provisioning and managing the infrastructure belongs entirely to the service provider.

Some of the benefits of using serverless functions: 

- **Enhanced scalability.** No need for developers to implement code to scale. It scales automatically.
- **Reduced time to market.** Serverless is an optimized set of tools for building quickly.
- **No boiler code.** A serverless function is just a tiny piece of logic. Reducing the complexity of software.
- **More time for user experience.** Serverless functions allow teams to focus resources on the user experience and not on managing servers.
- **Security.** We can call third-party APIs securely without exposing important data on the client-side.

What Are Serverless Functions?

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

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

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

In this lesson we will see how to measure the used JS heap size in chrome. This can be used for various needs from performance debugging to production monitoring of apps.

Measuring used JS heap size in chrome

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.