A Tour of Web Capabilities

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
4 hours, 10 minutes CC
A Tour of Web Capabilities

Course Description

Explore APIs you may not realize exist on the web! Get an overview of new Web APIs and their maturities, such as speech recognition, Permissions Policy and security, sensors, geolocation, OS integration (managing windows, file, and URL protocol handlers), and hardware-related capabilities. You’ll also see advanced features like face detection, augmented reality, and working with external hardware and devices. Along the way, you’ll build a “Cooking Masters” app to demonstrate the practical application of capabilities in real-life scenarios.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: July 11, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 5 minutes
  • Introduction
    Maximiliano Firtman reviews the topics discussed throughout the course. The code and demonstrations will cover permissions & security, sensors, speech, OS integration, and other hardware-related capabilities. The demo application and source code can be found on the course website.

Web Capabilities

Section Duration: 56 minutes

Sensors, Geolocation, & Input Devices

Section Duration: 1 hour, 20 minutes
  • Sensors
    Max introduces sensors and explains how the APIs will vary based on a device's capabilities. Available sensors may include an accelerometer, gyroscope, magnetometer, proximity, and light sensors. Global DOM APIs still exist for accessing sensor data. The Sensor API is the new promised-based API which is still gaining browser support.
  • Sensors API
    Max demonstrates how to use the new Sensor API. Each API has a constructor for creating a sensor object and events for reading and handling errors. Some APIs are behind a flag because the API is still experimental.
  • Geolocation API
    Max introduces the Geolocation API, which uses several metrics to determine a user's location. The metrics may include data from GPS satellites, WIFI networks, and other location-enabled devices.
  • Geolocation API Practice
    Max uses the GPS API to display the latitude and longitude information. A condition first checks to see if the API is available. Functions for receiving the position value and handling errors are created, and configuration options are reviewed.
  • Location Accuracy
    Max discusses some caveats with location accuracy on iOS and iPadOS. Users specify whether they want web applications to use precise or imprecise location data. This will apply to all web applications, and there is no API for determining which mode the user selected.
  • Orientation, Touch, & Virtual Keyboard APIs
    Max shares examples of APIs for device orientation, touch events, and working with virtual keyboards. Some APIs are JavaScript-based. Others, like the virtual keyboard, also provide CSS APIs for adjusting styles when the virtual keyboard is present.
  • Gamepad API
    Max introduces the Gamepad API. It works with both USB and Bluetooth controllers. Since the buttons and controls vary greatly across controllers, a game loop must be created using requestAnimationFrame to watch for input and determine which button was pressed.
  • Cooking Masters Project Overview
    Max walks through the Cooking Masters application. The application allows users to follow recipes without using traditional computer input controls. Users can use gamepads, audio commands, and other capabilities for navigating the interface.
  • WebHID API
    Max demonstrates how to use the Web Human Interface Device API, which is built on top of the widely adopted HID protocol. Permission is granted through a browser dialog and the API provides low-level control with the selected device.

Speech, Voice, & Camera

Section Duration: 32 minutes

External Hardware & Devices

Section Duration: 39 minutes

OS Integration

Section Duration: 33 minutes

Wrapping Up

Section Duration: 4 minutes
Devices can share data using ultrasounds. It blew my mind.
- I learnt 36 API's. Not heavy on coding, but gives you overview on powerful web capabilities.
- Very simple yet interesting demo's on the API usage.
- Covers differences in browsers in different operating systems.
Ashwini Kemshetty

Ashwini Kemshetty

AshwinisCosmos

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now