Learn Firefox, Hapi and Redwoodjs

hapi is a battle-tested, full-featured, framework for building web applications and services with Node.js. With integrated support for essentials like authentication, caching and validation, and a powerful plugin system, hapi is ideal for projects and teams of any size.

This course will introduce hapi, some of it’s plugins, and guide you through many of hapi’s core features.

A rich framework for building applications and services hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

hapi

Introduction to Node Servers with Hapi.js

View engines, or template engines, allow you to maintain a clean separation between your presentation layer and the rest of your application. This video will demonstrate how to use the vision plugin with hapi to enable template support.

hapi.js - View engines 

hapi does not support serving static files out of the box. Instead it relies on a module called Inert. This lesson will cover serving static files using Inert's custom handlers.

hapi.js - Serving static files

Routing is a fundamental aspect of any framework. In this lesson, you'll learn how to use path parameters in hapi's router. We'll also touch on how the router uses specificity to order routes internally.

hapi.js - Route parameters

hapi doesn't ship with logging support baked in. Luckily, hapi's rich plugin ecosystem includes everything needed to configure logging for your application. This video will introduce good, a process monitor for hapi, and good-console, a reporter for good that outputs to standard out.

hapi.js - Logging with good and good-console

hapi makes handling POST and PUT payloads easy by buffering and parsing them automatically without requiring additional modules or middleware. This video will demonstrate how to handle JSON and form based request payloads via hapi's route configuration.

hapi.js - POST and PUT request payloads

hapi's reply interface is one of it's most powerful features. It's smart enough to detect and serialize objects, buffers, promises and even streams. This video will demonstrate first hand how to use the reply method to send your data to the client, no matter the format.

hapi.js - Replying to Requests

Think of hapi's `reply()` function as "what you want to say" and the `response` object as "how you want to say it". While `reply` controls the payload sent to the client, the `response` object will allow you to control how the client interprets the payload by manipulating status code, content type, state and more.

hapi.js - Using the response object

hapi automatically responds with JSON for any error passed to a route's `reply()` method. But what if your application needs errors rendered in HTML? This lesson shows how to implement friendly HTML error messages using hapi extension events.

hapi.js - Friendly error pages with extension events

hapi supports request validation out of the box using the joi module. Request path parameters, payloads, and querystring parameters can be validated with joi's simple, yet powerful, notation. This lesson covers the basics of validating requests using joi.

hapi.js - Request Validation with Joi

hapi has built-in support for parsing cookies from a request headers, and writing cookies to a response, making state management easy and straight-forward. It even has built in support for cookie encryption and auto detects when a cookie contains JSON, parsing or stringifying automatically.

hapi.js - Managing State with Cookies

hapi is a rock solid server framework for Node.js. Its focus on modularity and configuration-over-convention makes it the perfect match for any size development team. This video will introduce you to hapi by showing you the bare minimum needed to run a hapi server.

hapi.js - Up and running

Instead of using middlware, hapi provides a number of points during the lifecycle of a request that you can hook-in to provide additional functionality, called "extension events". This lesson will give you an introduction to using extension events, and show how they can be used to manipulate the request or response in-flight.

hapi.js - Extending the request with lifecycle events

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

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.

Search

Search Results