Learn Chrome, Npm and Xstream

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

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

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

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose together to build cool things. We can use packages by other developers, but we can also write and publish our own. 

In this course we will learn how to create, publish, and update our own packages. We will create a JavaScript utility module to filter out sensitive words from a string, including tests and development file watching. We will then cover publishing and updating our package. This same approach can be used to create and publish other types of packages too like components (React, Angular, Web Components etc.) and command line interfaces.

Publish JavaScript packages on npm

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

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

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

This is a small collection of videos to help you get familiar with Chrome browser's performance oriented developer tools.
In this collection, learn how to record a performance profile, tweak the settings to get the most relevant profile and finally a look into the different sections of the performance data visualisation.

Basics of Chrome's Performance Devtools

Anything related to JavaScript performance

Javascript Performance

ASP.NET is an open source web framework for building modern web apps and services with .NET. ASP.NET creates websites based on HTML5, CSS, and JavaScript that are simple, fast, and can scale to millions of users.

asp-net

ASP.NET Core SignalR can push events from the server into your Client Application. In this video we will build a client side Todo app with Angular which consumes events from a ASP.NET Core SignalR backend to see how we can consume and synchronize data between our client side Angular Applications.

Consume ASP.NET Core SignalR values in an Angular Application

The ability to pull in just about anything your project needs from npm is amazing, but it can also lead to bundle bloat if you aren't selective about what libraries you pull into your library. In this lesson, we'll take a look at bundlephobia.com, a tool that provides insights about a library's size. With bundlephobia, you can make informed decisions about what libraries you pull into your project and avoid unnecessary bundle bloat.

https://bundlephobia.com/

Make informed decisions about 3rd party npm libraries with bundlephobia

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

A modern web browser owned and maintained by Google.

chrome

It's very important to experience our web applications using the tools and techniques that our users are using. Many of our users out there may have vision impairments and may use tools to help them see better. Learn how to use a High Contrast browser extension to see your web application the way many of your users may be seeing it.  You may discover that a lack of contrast between foreground and background colors will cause things to be hard to see or even invisible in certain High Contrast tool settings.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph)

Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues

screen-reader

We can find issues with heading levels by utilizing our accessibility auditing tools.  The library react-axe, as well as the browser extension axe, will report any findings concerning heading levels.  The browser extension tota11y will annotate all heading levels on a page and show any in red that have issues.  Finally, we can check the Rotor in VoiceOver in Safari.  The Rotor should have a Headings menu and will list in order all of them that are found on the page.  If headings are missing or inappropriate this will help us find them as well.

Test for Heading Level Accessibility Issues

Similar to Landmark Regions, Heading Levels are used by web browsers, plug-ins, and assistive technologies to provide in-page navigation.

## Rules
* Each page should have at least one `<h1>`
* Pages should be structured in a hierarchical manner
    * `<h1>`: being the most important (usually page titles or main content heading)
    * `<h2>`: usually major section headings
    * `<h3>`: sub-sections of the `<h2>`
    * and so on
* Do not skip heading levels - always follow consecutive order
* Do not use text formatting, such as font size or bold to give the visual appearance of headings.  
    * Use actual heading (`<h1>` - `<h6>`) for all content headings
* Do not use heading levels to achieve visual results only

## References
* https://webaim.org/techniques/semanticstructure/
* https://www.w3.org/WAI/tutorials/page-structure/headings/

Correctly Define Heading Levels of a Web Page

The pluggable linting utility for JavaScript and JSX.

eslint

We have a number of options to use when testing for accessibility issues concerning alternative text for images.  The react-axe library and axe browser extension will both report when an image is missing alternative text.  The tota11y browser extension will annotate any images that are missing alternative text.  Running eslint with the eslint-plugin-jsx-a11y plugin installed will report on any `<img>` elements missing an `alt` attribute.  Finally, we can use a screen reader to actually hear what is read when an image has focus.

Test for Image Alternative Text Accessibility Issues

Images must have text alternatives that describe the information or function 
represented by them so they can be read and understood by those using screen readers.

## Alternative text for images
* All `<img>` elements should have an `alt` attribute provided
    * When not provided many screen readers will fallback to reading the file name instead
* The `alt` value should not include words like _“image”_, _“picture”_ or _“icon”_
    * Screen readers are already announcing that the element is an image
* Images that are decorative only and provide no information or function to the page should be hidden from Assistive Technologies by providing an empty `alt` attribute (`alt=””`)

## References
* https://www.w3.org/WAI/tutorials/images/
* https://www.w3.org/WAI/tutorials/images/decision-tree/
* https://www.w3.org/WAI/tutorials/images/tips/
* https://www.w3.org/WAI/tutorials/images/informative/
* https://www.w3.org/WAI/tutorials/images/functional/
* https://www.w3.org/WAI/tutorials/images/textual/

Define Images with Appropriate Text Alternatives

We should not use color alone as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  Users may not be able to see/understand the differences in color and require additional indicators.

Along with color, use additional indicators such as:
* typography
* shapes
* grids
* spaces
* and/or allocate more weight to important elements

## References:
* http://www.particletree.com/features/interfaces-and-color-blindness/
* https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/

Use More than Color Alone to Convey Information in a Web Page

Just about every tool in our accessibility auditing toolkit can help us identify any issues with sufficient color contrast ratio on a web page.  The react-axe library and axe browser extension both report findings on all elements with insufficient contrast ratios.  The tota11y browser extension will annotate any elements with their contrast ratios and color those that are insufficient in red.  

Additionally, we need to use our experience tools to see what some of our users out there may we seeing.  We need to test with high contrast browser extensions as well as the display settings in Windows and Mac.  If our users with visual impairments are using these tools we need to see what our application looks like using them because we may find that under a certain mode some things may suddenly be harder to read or virtually invisible.

## Resources
* https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html

Topics

Instructors

Content Type