Learn Angular-material, Openapi and Screen-reader

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

In this course, we will build a ToDo API that stores notes using the OpenAPI Specification (Swagger). We will start with a blank API definition using the Swagger Online Editor. The Swagger definition file will be used to create a Node.js API. Along the way, we will discover how to implement additional details required for a fully functional API requests and responses. We will also learn about the powerful capabilities of Swagger to generate server side code and client libraries.

Open API Initiative (OAI) is focused on creating, evolving and promoting a vendor neutral API Description Format based on the Swagger Specification

openapi

Build Node.js APIs with OpenAPI Spec (Swagger)

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

*presented by Thomas Burleson and Aaron Frost*

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

Introduction to AngularJS Material

The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts. 

In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.

> This course has been created by Thomas Burleson and Aaron Frost. 

Angular Material: Containers with the Layout API

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

Learn how to install Angular Material with `npm install`  and load the required libraries and stylesheets into your blank web page.

> This course has been created by Thomas Burleson and Aaron Frost

Angular Material: Installing with NPM

Swagger is a project used to describe restful APIs using the OpenAPI Specification. It allows you to document your API so consumers understand the endpoints, parameters, and responses. In this lesson, I'll show you how to install the swagger command line tool, create a new API project using swagger, and introduce you to the swagger API editor.

Create an API with Swagger

In this lesson, you will learn how to define an HTTP GET endpoint using Swagger with URL parameters to identify the ID of the Todo item being requested.

Define an HTTP GET Endpoint with URL Parameters for a Node.js Server with Swagger

Schema definitions allow you to define the format and types of data sent and received by your API. This allows consumers of your API to be confident in using your API. In this lesson, you will learn how to create a schema definition for the Todo API server. 

Create An API Schema Definition Using Swagger

In this lesson, you will learn how to create an HTTP GET endpoint for a node.js server using Swagger. This endpoint will be used to return all of the Todo items from Elasticsearch to the client.

Define an HTTP GET Endpoint for a Node.js API Server with Swagger

This lesson shows you how to delete a Todo item from Elasticsearch using the Todo ID from the URL parameters according to the specifications defined in your Swagger API docs.

Create a Node.js function for an HTTP DELETE request for a Swagger API

This lesson demonstrates how to access the ID of a Todo item being deleted from the URL parameters when used with an HTTP DELETE method.



Define an HTTP DELETE Endpoint for a Node.js API Server with Swagger

In this lesson, you will learn how to define HTTP POST operations for your Todo API server using Swagger. Creating the endpoint, passing the todo in the request body, and parsing the todo are all demonstrated.

Define an HTTP POST Endpoint for a Node.js Server with Swagger

This lesson will teach you how to create the javascript functions defined by the Swagger specification to return all Todo items to the client when requested with an HTTP GET method.

Create a Node.js function for an HTTP GET request for a Swagger API

In this lesson, you will learn how to define multiple parameters in the API specification to identify the ID of the Todo item being updated in the URL, as well as the contents for the updated Todo item in the body of the request.

Define an HTTP PUT Endpoint for a Node.js API Server with Swagger

APIs created with Swagger have a built-in mock function, allowing you to mock responses from your API prior to writing the backend code to make it functional. In addition to learning how to enable this feature, I will show you how to write your own functions to enhance the mock responses returned when using the Swagger mock feature.

Mock API Responses with Swagger

There are a lot of great monitoring tools available for Node.js. It is also incredibly easy to build monitoring into your application. In this lesson, we will add precision monitoring to the function calls in the Todo API server, log it to the console, and persist those results to Elasticsearch where they can later be reviewed, graphed, and analyzed.

Build Monitoring into your API Server

This lesson shows you how to create the functions defined in the Todo API specification to create new Todo items when received in HTTP POST methods. You will also see the errors you will get when CORS is not properly configured and how to resolve them by installing the NPM CORS package.

Create a Node.js function for an HTTP POST request for a Swagger API

This lesson will teach you how to update a Todo item in Elasticsearch when received from an HTTP PUT method in your API server built with Swagger.

Create a Node.js function for an HTTP PUT request for a Swagger API

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the `@angular/cdk` to update sidenav settings based on the users screen size.

Use the Angular Material Sidenav Component

In this lesson, you will learn how to create a function in your Node.js Todo API server that gets the ID of the Todo item being requested from the URL and retrieve the Todo item from Elasticsearch.

Search

Search Results