Learn 11ty, Firefox and Testing-library

In 2018, Kent C. Dodds wrote: "The more your tests resemble the way your software is used, the more confidence they can give you." This phrase became the guiding principle for the entire Testing Library ecosystem. 

A few years later, the React Testing Library became the de facto library for writing unit and integration tests in the React ecosystem.

Thanks to its user-centric perspective, our tests are closer to our user experience and far away from implementation details.

In this course, you will learn how to:

- render your components
- properly query your UI for elements while keeping accessibility and your users' experience in mind
- improve your testing experience with the usage of some utilities
- interact with your components to fire events
- leverage asynchronous utilities to customize your testing flow
- get rid of the annoying "not wrapped in act" warning

After this course, you should be able to write and debug any test using the React Testing Library!

The `@testing-library` family of packages helps you test UI components in a user-centric way.

You want to write maintainable tests that give you high confidence that your components are working for your users. As a part of this goal, you want your tests to avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

Testing Library accomplish these goals so you can be confident your application will work when it gets to the end user.

testing-library

An Introduction to the React Testing Library

Learn how to make flexible customized Twitch Scenes using the static site generator Eleventy (11ty), CSS, and ComfyJS.

Throughout this course, you'll create scenes for preshow, host, and main desktop display streaming purposes. Using ComfyJS, we'll add embedded chat and be able to create responses to chat commands. Finally, we'll see how to actually setup the scenes in OBS to prepare to use them for your stream.

Bonus: you'll learn a bit more about CSS grid layout, and also the "cicada principle" to be able to show the commands randomly across the scene!

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Develop Custom Twitch Scenes and Setup in OBS

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

Animations can make people sick, or worse! By adding animation toggles and listening in to the user's system preference for reducing motion on OSX and iOS, we can give them more control over our interfaces. Animation can be a safety issue; let's do something about it!

Warning: there is a flashing animation in the video.

In this lesson:
- [prefers-reduced-motion](https://webkit.org/blog/7551/responsive-design-for-motion/)

WCAG 2.1, Guideline 2.3: Seizure risks
- https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-seizure-does-not-violate

Your Interactive Makes Me Sick
- https://source.opennews.org/articles/motion-sick/

Accessible animations with reduced motion

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

chrome-devtools

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Cascading Style Sheets bring order and beauty to our applications.

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

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

Our Twitch Scenes will use the static site generator Eleventy (11ty) to leverage templating features for creating the scenes. This lesson covers the base project which is available in the project repo under `/lessons/00-base`.

This lesson includes templating for the stream details and initial styling of the details section within the scene layout. The primary templating language in use is [Nunjucks](https://mozilla.github.io/nunjucks/templating.html).

Setup Eleventy Project for Creating Twitch Scenes

Given how web pages are built nowadays, you might find yourself with multiple instances of the same element.

To avoid querying for a list of elements and then filtering them down, you can constrain your query to a specific area.

In this lesson, we are going to learn how to leverage the *within* helper to constrain our query to a specific element.

Constrain a Query to a Specific Element Using Within

Sometimes, you might need to wait for an element to disappear from your UI before proceeding with your test setup or making your assertion.

In this lesson, we will learn about a wrapper around the waitFor that allows you to wait until an element is removed from your UI: the *waitForElementToBeRemoved*.

Use the waitForElementToBeRemoved Async Util to Await Until an Element Disappears

Whilst fireEvent helps to interact with elements, that is not how a user interacts with them. When a user interacts with an element, more than a single event is fired. This means that by using fireEvent, we might be missing some scenarios that might be triggered accidentally by other events.

In this lesson, we are going to learn about the companion library of the React Testing Library that allows you to simulate full interactions with your elements: the *user-event* library.

Simulate All User Interactions With an Element by Using the user-event Library

After querying, the next important part of testing is interacting with our UI. To do this we need to fire events.

In this lesson, we are going to learn how we can fire a single event in our elements by using the *fireEvent*!

Fire a Single Event on an Element Using fireEvent

For many years, the most annoying thing about writing tests with the React Testing Library is when the "not wrapped in act(...)" warning appears in your console. act is a React testing util that ensures all UI updates are wrapped up before proceeding with your test case. What we often miss is that we actually don't need act and that this error is there to tell us something instead, and that is: You are not testing everything!

In this lesson, we are going to understand why the "not wrapped in act(...)" shows up and how to get rid of it!

Get Rid of the "not wrapped in act(...)" Warning

After querying and interacting with elements come assertions. Assertions are really important to assert that your test case really works. Sometimes due to the async nature of your code, your assertion might need to wait some time until it passes.

In this lesson, we will learn how to wait for a period of time until our assertion passes by using the *waitFor* util.

Leverage the waitFor Async Util to Await for an Assertion to Pass

There will be times when none of the queries accessible to everyone will work out for you. When this time arrives, you can resort to the semantic queries. While these queries make use of HTML5 and ARIa-compliant selectors the user experience when using these attributes varies across assistive technology and browsers.

In this lesson, we will look at one of the queries that are part of the semantic queries family and allow you to find an element by its title attribute: the *byTitle* query.



Get Elements With a Matching Title Attribute Using the byTitle Query

Navigating a form with a bunch of elements with filled-in values can be a way to refer to certain elements.

In this lesson, we will look at another one of the queries that are part of the queries accessible to everyone's family and helpful when querying for filled-in form values the *byDisplayValue* query.



Get Elements With a Matching Display Value Using the byDisplayValue Query

In order for you to interact with the elements in your tests, you need to query for them. Well, sometimes, they take time to show up in your UI.

In this lesson, we will learn about one of the query variants that allows you to search for something that you expect to show up eventually in your UI: the findBy*.


Use the findBy Query to get Elements that Will Show up on the Page

When interacting with form fields, the user knows what an element is supposed to do, thanks to its label. 

In this lesson, we will look at another one of the queries that are part of the queries accessible to everyone's family and really helpful when dealing with forms: the *byLabelText* query.



Get Elements Associated With a Label Using the byLabelText Query

Sometimes you may need to get more than just one result from your queries.

In this lesson, you are going to learn how you can leverage the AllBy variant to extend your queries to find an array of elements instead of a single one.

Use the AllBy variant to get Multiple Instances of an Element

In the previous lessons, we always destructured our queries for render. As your test grows and you need more queries, this can become annoying very quickly. 

Ideally, we would have an object that is pre-bound to the document.body and allows us to use all the queries without any need for restructuring.

In this lesson, we are going to see how to tidy our code and save some time by using the *screen* util.

Use the Screen Object to Avoid Query Destructuring From Render

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.

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

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.

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.

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

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