Learn Aria, Git and Reactfire

This workshop will start by breaking down the four states in which a file can exist, and we'll build up our mental model of git from there. Then, we'll look at how to move files between those states in different ways.

Once we've developed a new model for how git operates, we'll be able to purposefully get ourselves into some sticky situations, and then gracefully recover from them.

If you can handle git add/commit/push, but not much more - then this workshop is perfect for you.

You can finally get some proper git training, and will never have to worry about losing data or messing up the repo again!

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.

Fix Common Git Mistakes

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


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

Develop Accessible Web Apps with React

Knowing your everyday toolset increases your productivity as a developer. And Git is one of those tools you use on a daily basis. Mastering Git is tough; it has hundreds of different commands, often even inconsistent at how you pass in flags and configuration options. On the other side, there are a lot of good Git courses out there already, explaining all of these commands in detail. 

With this course, I aim at a different goal. You will walk through a series of scenarios which you’ll most commonly encounter in your daily work life as a developer. I’m talking:
 - updating your feature branch with the latest changes from master
 - polishing your git history to make it ready for being peer-reviewed
 - moving a set of commits to another branch
 - undoing accidental commits

The goal is not to cover everything, but those tasks that will greatly improve your daily productivity with Git.


Productive Git for Developers

As modern web developers, we are likely to use git on a daily basis. It's a wonderful distributed version control system, and with only a few commands in our toolbelt it is quite powerful and convenient.

In this course, you will learn the basics of using git, as well as some more advanced commands that you should find useful!

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/practical-git-for-everyday-professional-use-notes).

Practical Git for Everyday Professional Use

Accessibility (or a11y) is an important but often neglected in the world of web development. Many developers find themselves coding user interfaces without any knowledge of keyboard or screen reader requirements. 

The fact is that accessibility doesn't happen by accident. Often it is seen as too hard or time consuming. This doesn't have to be the case. By following a handful of high-value patterns and practices, we can open our web apps to humans that otherwise wouldn't be able to interact with them at all.

This course will introduce you to accessibility through hands-on, technical examples that are way more effective than reading 10-year-old static web content.



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

Start Building Accessible Web Applications Today

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

How to Contribute to an Open Source Project on GitHub

Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads.

CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page. 

Follow the steps in this course and you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations, focusing on Web Accessibility and Web Semantic.

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

A Unix command used to search files for the occurrence of a string of characters that matches a specified pattern.

grep

When you have a bunch of text to sift through, standard Unix command line utilities like `grep`, `sed`, `awk`, `cut`, `sort`, and `uniq` can help extract the information you want. For example, with a git log for a project, you might want to group commits by day in order to see which days you're most productive, or find out how many commits you made last year. In this lesson, you'll learn how to combine these commands with the pipe operator to extract this data from git logs.

Analyze Git Logs with the Command Line

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

chrome-devtools

What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.

For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1: 
- https://www.w3.org/TR/wai-aria-1.1/#namecalculation
- https://www.w3.org/TR/accname-1.1/

What is Accessible Name Calculation?

`git reflog` helps developers recover from their mistakes. The reflog keeps track of any changes or commits to each branch since cloning a repository. It's frequently used to keep track of changes made locally that are sometimes wiped out when pulling in remote changes.

This lesson demonstrates how to use git reflog to restore git commits and branches that have been lost. We will clone a repo, make some changes with commits and branches, remove all of those changes, and then use data from the reflog to restore them.

Restore Commits with git reflog

Git rebase is a super powerful tool, but one many devs shy away from for fear of messing up history. But when you know how to use it safely, you can make your pull requests much easier to understand and reason about.

For anyone interested in the gn log alias I use in this video, it's this:

git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

Rewrite Git History with Interactive Rebase

This lesson demonstrates how to use the git rebase command to reword a commit message deep in your git history.

Reword a Commit with Git Rebase

In this video you'll learn Git-based deployment for web applications for both front-end and back-end resources using AWS Amplify and the Amplify Console.

Hosting & Continuous Deployment for Front End and Serverless Back Ends using AWS Amplify

In this lesson, we are going to use aria-current to give a screen reader user more context about what the current page is. Historically, many developers use an `.active` class to indicate that the page in a menu is the same that you're on. 

Instead of using a class, we are going to use the aria-current attribute to add more semantic value to the HTML and use that attribute to style the active link.

Note: VoiceOver testing works best on the Native Safari Browser, hence why we should always use Safari to test.

More resources:
- [Using the aria current attribute](https://tink.uk/using-the-aria-current-attribute/)
- [W3 WAI-ARIA - aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current)
- [Breadcrumb Example - w3-WAI ARIA Practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html)

Add Semantic Styling to the Current Page of a Navigation Item with aria-current

Our first layer of defense when building accessible React applications is to add some auditing tools to our development workflow. This should include adding static analysis checking for common accessibility standards and best practices. We can get this with the latest eslint plugin: "eslint-plugin-jsx-a11y". If you are already linting your projects adding this plugin should fit very smoothly into your workflow.

## Resources
1. [List of all the rules supported by eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y#supported-rules)
2. [Comparison of the difference in rules between recommended and strict mode](https://github.com/evcohen/eslint-plugin-jsx-a11y#difference-between-recommended-and-strict-mode)
3. [Background on how the Accessibility API implemented by browsers interfaces with Assistive Technologies](https://github.com/evcohen/eslint-plugin-jsx-a11y#some-background-on-wai-aria-the-ax-tree-and-browsers)

Set up ESLint to Audit Accessibility Issues in React

Whenever I need to make a change to a file that includes a part I don't grasp I try to gather as much informations as possible. One tool that turned out to be very helpful to build up context was seeing who wrote the code & when.

In this lesson I demonstrate you how this can easily be achieved using the VS Code GitLens extension and how to set it up in a way that it's not constantly bothering you.

Get Git Blame insights directly in VS Code using GitLens

In this lesson, we will be going over the attribute `aria-expanded`. Instead of using a class like `.open` we are going to use the `aria-expanded` attribute to style.

This accomplished double duty because we have semantic value and visual indicators that a button is open and closed.

To test this, I opened up Safari and used CMD + F5 to turn VoiceOver on. 

- [An Introduction to ARIA States](https://www.a11ywithlindsey.com/blog/introduction-aria-states)
- [w3c Using aria-expanded to indicate the state of a collapsible element](https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element)

Add aria-expanded to add semantic value and styling

Continuing to add to our accessibility auditing toolset: react-axe goes hand in hand with eslint and specifically the eslint-plugin-jsx-a11y plugin.  While eslint analyzes our static code, react-axe is able to audit the elements that are available in the DOM at runtime.  As components get rendered into the DOM by React, react-axe is able to immediately check them for potential accessibility issues and will output any findings to the console.  Adding this tool to our workflow gives us accessibility checking as we're developing so that we can eliminate a plethora of potential issues as early as possible.

## Resources
* [List of all rules supported by react-axe](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md)
* [Documentation of the Configuration Object](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure)
* [How Deque Labs makes decisions on axe rules](https://github.com/dequelabs/axe-core/blob/develop/doc/accessibility-supported.md)

Use react-axe to Audit Accessibility Issues at Runtime during Development

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

Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using `aria-describedby` to create a relationship with the input and the tooltip. Then I use CSS to style the tooltip and control when it appears or disappears both on hover and focus.

In this video, we use VoiceOver. To test that on a MacOS, use CMD + F5.

A few resources:
- [CSS Triangle](https://css-tricks.com/snippets/css/css-triangle/)
- [a11y Style Guide - Tooltips](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-tooltips) - I used this to gut check and with some help with those transitions. 
- [Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)

Create an Accessible Tooltip on a Text Input

If you make a mistake in a commit message but HAVEN'T pushed it yet, you can change that commit message with --amend:

`git commit --amend -m "New message"`

This won't change any of the files in your commit - but will rewrite the commit with the new message.

Topics

Instructors

Content Type