Learn Firefox, Parti-corgi and Particle

An inclusive community of content creators helping each other grow.

parti-corgi

How to Livestream Code and Design on Twitch

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

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

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

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

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?

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

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

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the `React` browser tab, inspecting components in parallel with the `Elements` tab, using React components in the console, searching by component name, and debugging component state and props.

Debugging components with the React Developer Tools extension

particle

Before powering up the Particle Photon we are going to look at what each of the components are on the board.

Particle Photon Component Overview

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/

Topics

Instructors

Content Type