Learn Aria, Chrome and Cycle

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.

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

Optional Chaining

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

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

You will learn how to:

- **Use (experimental) CSS Overview to learn all about CSS used on a page in a minute**
- **Style console.log messages with CSS** - a _crucial_ skill for any senior developer (j/k)
- **Debug your code (on production and local environment) with logpoints**
- **Run a Lighthouse audit of your site**
- **Choose accessible colors for your website that have an AAA contrast ratio rating**
- **Force a DOM element state in Chrome DevTools**
- **Use Console utilities to make debugging easier**
- **Copy a network request as fetch or cURL with Chrome DevTools**

Have fun!

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

chrome-devtools

Chrome DevTools tips & tricks

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.

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

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

Debug the DOM in Chrome with the Devtools Elements Panel

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.



Start Building Accessible Web Applications Today

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the various things on the screen. Bundled into this panel, though, is the single most useful tool for any JavaScript developer - the JavaScript Debugger. We’ll use the Debugger to inspect JavaScript as it runs, allowing you to watch (and even interact with) the state of your application as it runs in ways that’ll blow your mind if you’ve mostly used console.log to debug your applications to this point. 

Debug JavaScript in Chrome with DevTool Sources

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

Debug HTTP with Chrome DevTools Network Panel

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows. 

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.  

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

> This course presented by Thomas Burleson and Aaron Frost

Angular Material: Theming and ARIA

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Overview of Cycle.js

 AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!


Examine AJAX Requests with Chrome Devtools

To understand the Network DevTool, you have to understand what HTTP is and how it works. Let’s use the Network DevTool to inspect an HTTP request and its corresponding response so that we can understand what the browser is doing.

Analyze HTTP Requests and Responses with Chrome Devtools

Most of today’s websites use optimized, compiled, minified and obfuscated javascript and CSS. Examining this stuff here has some severely limited utility, which is why when developing we rely on sourcemaps. We’ll set up a webpack workflow that uses sourcemaps to show you how they can help your debugging!

Unbundle your JavaScript with Source Maps in Chrome DevTools

Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.

Accessible Icon Buttons

Are you building a website or web application that takes user input? Then it's important for you to watch this demo. Learn how to create more accessible forms using basic HTML form labels, fieldsets and legends. You'll even learn a bit about what makes Safari's developer tools pretty awesome.

Building Forms with Accessibility in Mind

Webpages are more than simply how they look. By coding with headings, landmarks and semantic HTML, you can expose a rich document outline to users of assistive technologies, as well as search engines. 

Headings and semantic structure for accessible web pages

What is this thing called ARIA? In this lesson, you'll learn about about WAI-ARIA, a.k.a. Accessible Rich Internet Applications, the W3C spec for specifying accessibility information in HTML and SVG. I cover the basics of applying ARIA roles, states and properties, helpful information for creators of user-interface widgets and component libraries. But it's important to note that you might not need ARIA at all! Before using it, it's important to educate yourself on what ARIA does and doesn't do for you.

Intro to ARIA

Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the native HTML5 dialog element and experimental inert attribute (with polyfills) and JavaScript focus management. We'll explore how to make a DIV or non-modal dialog into a modal one to contrast the differences. Finally, we'll expose accessibility information for NVDA, Voiceover, JAWS and other screen readers.

For more details on creating accessible dialog content, check out this great article by Marco Zehe, Advanced ARIA Tip #2: Accessible Modal Dialogs: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

### Used in this lesson:
- Google dialog element polyfill: https://github.com/GoogleChrome/dialog-polyfill
- Inert attribute polyfill: https://github.com/WICG/inert

Search

Search Results