Learn A11y, Json-server and Parti-corgi

An inclusive community of content creators helping each other grow.

parti-corgi

How to Livestream Code and Design on Twitch

- Web audio APIs include support for features that aren't available by default in the native HTML audio element.
- The operating system includes basic controls
- Custom controls must be accessible with a keyboard, and make sense to a screen reader
- Don't hide the built-in controls until you know that your custom controls are working
- Listening to what VoiceOver reads should inform the a11y information you include
    - VoiceOver says "Elapsed Time" on its own, so we wouldn't want to write it in our code.
- `loadedmetadata` should have the duration to avoid glitches from new audio not being loaded.
- Elements should be labeled with a unique `id`

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

Create an Accessible Audio Player with the HTML Media Element and React

Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.

React fully supports building accessible websites, often by using standard HTML techniques.

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for auditing react apps for accessibility. In this course, you will go through different tools and libraries to audit components in a React app.

Fast, easy and reliable testing for anything that runs in a browser.

cypress

Auditing React Apps for Accessibility 

A short look at what I do before I change from my "Starting Soon" scene to my "live scene" and a brief overview of what to except from the collection

Introduction to Livestreaming

We cover some of the twitch interface and open a twitch account

Starting a Twitch account to livestream

We introduce OBS and compare it to SLOBS, download and set up our first scene including desktop capture and audio tips.

Introduction to OBS and creating your first scene

We cover how to get your stream key, how to use that stream key to test bandwidth and CPU usage settings, and go live on Twitch for the first time.

Going live on Twitch for the first time and testing bandwidth

While there are many useful tools and toys to pull together for a livestream, the truth is you don't need any of them to start.

What gear do I need to livestream?

It's likely that you will have many streams where no one is there, or people are there and they aren't telling you they are. Does it matter?

What if nobody comes to watch my livestream?

https://www.elgato.com/en/gaming/stream-deck

What is a Streamdeck?

[Streamlabs](https://streamlabs.com/) has two major halves: Streamlabs OBS, which is an OBS competitor, and Streamlabs-the-SaaS, which includes tools like chatbots, polls, giveaways, and loyalty rewards.

WTF is Streamlabs?

Many streamers use colorful banners on their stream pages that reflect their branding. Here's how you can create and use them.

* [Panel Maker](https://nerdordie.com/resources/free-resources/customizable-twitch-panels/)

Creating Panel Banners on Twitch

We can add accessibility testing to our `jest` unit tests with `jest-axe` which gives us:

* An easy way to automate accessibility auditing.
* The flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app.
* A safety net for any accessibility regressions.

Here we'll see how to use `jest-axe` with `ReactDOM` to render components for `jest-axe` to audit for accessibility.

## Resources
* https://github.com/nickcolley/jest-axe

Render Components with ReactDOM to Write Tests with Jest and jest-axe

We can add accessibility testing to our `jest` unit tests with `jest-axe` which gives us:

* An easy way to automate accessibility auditing
* the flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app
* A safety net for any accessibility regressions

Here we'll see how to use `jest-axe` with `react-testing-library` to render the components for `jest-axe` to audit for accessibility.

The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices.

## Resources
* jest-axe: https://github.com/nickcolley/jest-axe
* react-testing-library: https://testing-library.com/docs/react-testing-library/intro/

Write Better Unit Tests with react-testing-library and jest-axe

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

“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

The pluggable linting utility for JavaScript and JSX.

eslint

We can leverage GitHub Actions to automate the running of all of our accessibility auditing tools as part of a Continuous Integration (CI) workflow. 

Auditing tools will only catch a percentage of potential accessibility issues, it is no replacement for manual testing.  But being able to automate the auditing will add efficiencies to our testing and provide an early warning system that can be run much more frequently than it’s practical to perform manual testing.  Additionally, we can use our CI suite as a safety net to prevent code changes that break accessibility from being able to be merged.

## Resources
* https://app.egghead.io/lessons/react-set-up-eslint-to-audit-accessibility-issues-in-react
* https://docs.cypress.io/guides/continuous-integration/github-actions#Basic-Setup
* https://github.com/cypress-io/github-action

Automate Accessibility Audits with GitHub Actions

You’ve probably heard of Lighthouse before as it comes bundled with Chrome DevTools for performing a number of audits on things such as performance, SEO, best practices as well as accessibility. 

We can also use Lighthouse locally on our machines to test our application's rendered pages for accessibility issues before committing changes by using the Lighthouse CI CLI.

## Resources
* https://github.com/GoogleChrome/lighthouse-ci
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md

Audit an App's Rendered Pages Locally with Lighthouse CI CLI

To automate running Lighthouse audits on our application we can add the use of the Lighthouse CI tool to our Continuous Integration suite using GitHub Actions.  By making use of the Lighthouse CI GitHub App we can add to the checks in every Pull Request a report with the score from the audit run on each URL we configure for Lighthouse to audit.

## Resources
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md
* https://github.com/apps/lighthouse-ci

Automate Lighthouse Audits with GitHub Actions

We can add accessibility testing to our `jest` unit tests with `jest-axe` which gives us:

* An easy way to automate accessibility auditing.
* The flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app.
* A safety net for any accessibility regressions.

Here we'll see how to use `jest-axe` with `enzyme` to render the components for `jest-axe` to audit for accessibility.

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

## Resources
* jest-axe: https://github.com/nickcolley/jest-axe
* enzyme: https://enzymejs.github.io/enzyme

Write Unit Tests for Accessibility Using jest-axe and enzyme

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

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results