https://Rustaceans.rs -- Cloud Monk Losang Jinpa, Ph.D., MCSE / MCT, https://CloudRust.rs, Full Stack Cloud Native Rust DevOps Engineer - Rust Everywhere

Return to Web API Cookbook, Web APIs, Web API Bibliography, Web API DevOps

• Fair Use Source: B0CW1K187N (WbAPICook 2024)

“ (WbAPICook 2024)

Index

A

alert dialogs, Problem-Discussion

Animation objects, Animation Objects

animations, Problem(see also Web Animations API)

changes in height, Problem-Discussion

DOM transitions, Problem-Discussion

keyframe-based, Keyframe-Based Animation-Keyframe Animation with JavaScript

requestAnimationFrame, Problem-Discussion

respecting the user’s preference, Problem

reversing, Problem-Discussion

running multiple animations simultaneously, Problem-Discussion

scheduling updates with requestAnimationFrame, Problem

starting and stopping, Problem

AnimationTimeline interface, Discussion

API dataexporting to files, Problem-Discussion

exporting with download link, Problem-Discussion

arraysdisplaying an array of objects in a table, Problem

sorting an array of names, Problem-Discussion

async keyword, Problem

asynchronous APIs, Introduction-Discussionasync and await keywords, Problem

basics, Introduction-Promises

callback functions, Callback Functions

chaining Promises, Problem-Discussion

events, Events

fallback image loading, Problem-Discussion

Promises, Promises

Promises in parallel, Problem-Discussion

requestAnimationFrame animation, Problem-Discussion

working with Promises, Problem-Discussion

wrapping an event API in a Promise, Problem-Discussion

await keyword, Problem

B

Barcode Detection API, Barcode Detection API

Battery Status API, Problem-Discussion

Beacon APIreliability, Solution

sending a POST request with, Problem-Discussion

Blob object, Solution-Discussion, Solution

bouncing effect, Problem-Discussion

browser version, detecting, Detect Features, Not Browser Versions

button component, styled, Problem-Discussion

C

callback functions, asynchronous APIs and, Callback Functions

camerascapturing image from, Problem-Discussion

capturing video from, Problem-Discussion

CanIUse.com, CanIUse.com

catch method (Promise), Discussion

chaining Promises, Problem-Discussion

characters, counting, Problem-Discussion

checkbox groups, validating, Problem-Discussion

client-side routers, Problem-Discussion

client-side validation of forms, Problem-Discussion

Clipboard API, Problem-Discussion

complex objects, persisting to local storage, Problem-Discussion

confirmation dialogscreating customizable web component, Problem-Discussion

creating user prompt with Confirm/Cancel buttons, Problem-Discussion

console, Introduction-Discussionbasics, Introduction

console groups, Problem

console timers, Problem

counters, Problem

creating named loggers, Problem

displaying an array of objects in a table, Problem

examining an object’s properties, Problem

logging a variable and its value, Problem

logging stack traces, Problem

styling output, Problem

using log levels, Problem

validating expected values, Problem

Constraint Validation APIdetecting/marking invalid fields with, Problem-Discussion

performing validation check not supported by, Problem-Discussion

Cookie Store API, Cookie Store API

copying and pasting text, Problem-Discussion

counters, Problem

cross-site scripting (XSS) attacks, Disadvantages

CSS, Introduction-Discussionabsolute positioning, Discussion

animating DOM transitions, Problem-Discussion

basics, Introduction

conditionally setting a class, Problem

getting an element’s computed style, Problem-Discussion

highlighting text ranges, Problem-Discussion

matching media queries, Problem

modifying stylesheets at runtime, Problem

preventing a flash of unstyled text, Problem-Discussion

CSS Custom Highlight API, Problem-Discussion

CSS Font Loading API, Problem-Discussion

CSS Object Model (CSSOM), Introduction

cursors, searching for string values with, Problem-Discussion

custom elements, registering, Registering a Custom Element

custom grammar, Browser Support

D

data removal, from local storage, Problem

data URLloading an image as, Problem-Discussion

object URL versus, Discussion

databasecreating/reading/deleting objects in, Problem-Discussion

upgrading, Problem-Discussion

date formatting, Problemcreating a component to show today’s date, Problem

custom formatting, Problem-Discussion

getting parts of a formatted date, Problem

relative date formatting, Problem-Discussion

debugging (see console)

decimal places, rounding, Problem

<details> elementbasics, Details

for disclosure elements, Problem-Discussion

device integration, Introduction-Discussionbasics, Introduction

copying and pasting text, Problem-Discussion

getting device location, Problem-Discussion

getting orientation, Problem

reading battery status, Problem-Discussion

reading network status, Problem

sharing content with Web Share API, Problem

showing device location on a map, Problem-Discussion

vibration, Problem-Discussion

<dialog> element, Dialogsfor alert dialogs, Problem-Discussion

for customizable confirmation dialogs, Problem-Discussion

for user prompt with Confirm/Cancel buttons, Problem-Discussion

dictation, adding to text field, Problem-Discussion

disclosure elements, Problem-Discussion

disclosure web component, Problem-Discussion

DOM elements, Introduction-Discussionanimating changes in height, Problem-Discussion

animating insertion and removal, Problem-Discussion

animating transitions, Problem-Discussion

applying a transition when an element scrolls into view, Problem-Discussion

automatically pause and play a video, Problem-Discussion

basics, Introduction-IntersectionObserver

changing an element’s content based on size, Problem-Discussion

IntersectionObserver, IntersectionObserver

lazy loading an image when scrolled into view, Problem-Discussion

MutationObserver, MutationObserver

ResizeObserver, ResizeObserver

using infinite scrolling, Problem

wrapping IntersectionObserver with a Promise, Problem-Discussion

drag and droploading images with, Problem-Discussion

uploading a file with, Problem

E

easing functions, Discussion

elements property, looking up form fields using, Discussion

errors, Promises and, Discussion

event API, wrapping in a Promise, Problem-Discussion

eventsasynchronous APIs and, Events

Promises versus, Promises

EventSource API, Problem-Discussion

EyeDropper API, EyeDropper API

F

factory functions, Discussion

fade animation, Solution-Discussion, Solution-Discussion

fallback, loading an image with, Problem-Discussion

feature detection, Detect Features, Not Browser Versions

feedback component, Problem-Discussion

Fetch APIGET request with, Problem-Discussion

introduction of, Introduction

sending a POST request with, Problem

sending form data as JSON, Problem-Discussion

submitting a form with Fetch and the FormData API, Problem-Discussion

uploading a file with, Problem

uploading a file with drag and drop, Problem

FileReader object, Solution-Discussion

files, working with, Introduction-Discussionbasics, Introduction

checking and requesting permissions, Problem-Discussion

exporting API data to, Problem-Discussion

exporting API data with a download link, Problem-Discussion

loading a video as an object URL, Problem-Discussion

loading an image as a data URL, Problem-Discussion

loading an image with drag and drop, Problem-Discussion

loading text from, Problem-Discussion

uploading a file with drag and drop, Problem

filter effect, applying to video stream, Problem-Discussion

form fieldsasynchronous validation, Problem-Discussion

elements property for looking up, Discussion

making required, Problem

populating from local storage, Problem-Discussion

FormData API, FormData, Problem-Discussion

forms, Introduction-Discussionbasics, Introduction-Validation

constraining a number input, Problem

FormData API, FormData

making a form field required, Problem

populating a form field from local storage, Problem-Discussion

specifying a validation pattern, Problem

submitting a form with Fetch and the FormData API, Problem-Discussion

submitting as JSON, Problem-Discussion

using custom validation logic, Problem-Discussion

validating, Problem-Discussion

validating a checkbox group, Problem-Discussion

validating a field asynchronously, Problem-Discussion

Validation API, Validation

G

GATT (Generic Attribute) Profile, Web Bluetooth API

Geolocation API, Problem-Discussion

geolocation, geocoding versus, Discussion

GET requestsending with XMLHttpRequest, Problem-Discussion

with Fetch API, Problem-Discussion

getComputedStyle, Problem-Discussion

Google Maps API, Problem-Discussion

H

height, animating changes in, Problem-Discussion

highlighting text ranges, Problem-Discussion

history.pushState method, Solution-Solution

hover effect, Problem-Discussion

I

IDBKeyRange interface, Discussion

image capture, Problem-Discussion

Image element, Solution

imageslazy loading components, Problem-Discussion, Problem-Discussion

loading as data URL, Problem-Discussion

loading with drag and drop, Problem-Discussion

loading with fallback, Problem-Discussion

in-line keys, Keys

IndexedDB, Introduction-Discussionbasics, Introduction-Requests

creating/reading/deleting objects in a database, Problem-Discussion

keys, Keys

object stores and indexes, Object Stores and Indexes

paginating a large data set, Problem-Discussion

querying with indexes, Problem-Discussion

requests, Requests

searching for string values with cursors, Problem-Discussion

transactions, Transactions

upgrading an existing database, Problem-Discussion

using Promises with the IndexedDB API, Problem-Discussion

versioned databases, Discussion

indexedDB.open call, Problem-Discussion

indexesin IndexedDB, Object Stores and Indexes

querying with, Problem-Discussion

infinite scrolling, Problem

inline styles, Discussion

Internationalization APIs, Introduction-Discussionbasics, Introduction

counting characters/words/sentences, Problem-Discussion

date formatting, Problem

getting parts of a formatted date, Problem

list formatting, Problem

measurement units formatting, Problem

number formatting, Problem

pluralization rules, Problem-Discussion

price range formatting, Problem

relative date formatting, Problem-Discussion

rounding decimal places, Problem

sorting an array of names, Problem-Discussion

intersection ratio, IntersectionObserver

IntersectionObserver, IntersectionObserverapplying a transition when an element scrolls into view, Problem-Discussion

automatically pausing/playing video, Problem-Discussion

for lazy loading an image, Problem-Discussion

for lazy loading image component, Problem-Discussion

using for infinite scrolling, Problem

wrapping with a Promise, Problem-Discussion

Intl.Collator, Solution

Intl.DateTimeFormat, Solution-Discussion, Solution

Intl.ListFormat, Solution

Intl.NumberFormat, Problem

Intl.RelativeTimeFormat, Problem-Discussion

Intl.Segmenter, Solution

items, getting and setting, Getting and Setting Items

J

JavaScript, keyframe animation with, Keyframe Animation with JavaScript

JSONrequest body, Problem

string, Problem-Discussion

submitting a form as, Problem-Discussion

JSON.stringify, Solution-Discussion

K

key function, Problem-Discussion

key path, Keys

keyframe animationbasics, Keyframe-Based Animation

using JavaScript, Keyframe Animation with JavaScript

keysfinding all known keys, Problem-Discussion

in IndexedDB, Keys

L

language processing, speech recognition versus, Speech Recognition

lazy loadingfor images, Problem-Discussion, Problem-Discussion

in newer browsers, Discussion

length property, Problem-Discussion

libraries, third-party, Drawbacks of Third-Party Libraries, In Defense of Third-Party Libraries

lifecycle callbacks, Creating a Component

Light DOM, Light DOM

list formatting, Problem

loading indicator, for animation, Problem-Discussion

locale, for Internationalization API, Introduction

location,of devicegetting, Problem-Discussion

showing on a map, Problem-Discussion

logging (see console entries)

M

<mark> element, Discussion

MDN Web Docs, MDN Web Docs

measurement unit formatting, Problem

measuring performance (see performance measurement)

media, Introduction-Discussionapplying video filters, Problem-Discussion

basics, Introduction

capturing image from user’s camera, Problem-Discussion

capturing video from user’s camera, Problem-Discussion

determining system support for specific media type, Problem

matching/evaluating queries, Problem

recording the screen, Problem-Discussion

Media Capabilities API, Solution

modal dialog, Discussion

modeless dialog, Discussion

multistep tasks, profiling, Problem-Discussion

MutationObserver, MutationObserver, Solution-Discussion

N

names, sorting an array of, Problem-Discussion

natural language processing (NLP), speech recognition versus, Speech Recognition

Navigation Timing API, Introduction

Near-field communication (NFC), Web NFC API

network connection, reading status of, Problem

Network Information API, Problem

network requests, Introduction-Discussionbasics, Introduction

exchanging data in real time with WebSockets, Problem-Discussion

GET request with the Fetch API, Problem-Discussion

listening for remote events with server-sent events, Problem-Discussion

sending a beacon, Problem-Discussion

sending a POST request with the Fetch API, Problem

sending with XMLHttpRequest, Problem-Discussion

uploading a file with the Fetch API, Problem

network status API, reading, Problem

NLP (natural language processing), speech recognition versus, Speech Recognition

notificationsbasics, Notifications

push notifications versus, Solution

showing, Problem-Discussion

number formatting, Problemmeasurement units with, Problem

rounding decimal places, Problem

number input, constraining, Problem

O

object arrays, displaying in table, Problem

object stores, IndexedDB, Object Stores and Indexes

object URLdata URL versus, Discussion

loading video as, Problem-Discussion

objects (generally)complex, Problem-Discussion

examining properties of, Problem

simple, Problem-Discussion

observers, for watching DOM elements (see IntersectionObserver; MutationObserver; ResizeObserver)

orientation, of device, Problem

origin, of page, Introduction

out-of-line keys, Keys

P

page load performance measurement, Problem

page, origin of, Introduction

pagination, of large data set in IndexedDB, Problem-Discussion

passwords, asynchronous validation of, Problem-Discussion

patterns, matching routers to, Discussion

pausing speech, Problem

Payment APIs, Payment APIs

percent encoding, Discussion

performance entries, listening for, Problem-Discussion

performance measurement, Introduction-Discussionbasics, Introduction

finding slowest resources, Problem

finding timings for a specific resource, Problem

listening for performance entries, Problem-Discussion

page load, Problem

profiling multistep tasks, Problem-Discussion

profiling rendering performance, Problem-Discussion

resource, Problem

PerformanceObserver, Problem-Discussion

permissions, checking/requesting, Problem-Discussion

pluralization rules, Internationalization API, Problem-Discussion

polyfills, Preface, Polyfills

pop-up dialogs, Dialogs

popovers, Popoversmanually controlling, Problem-Discussion

positioning relative to an element, Problem-Discussion

showing, Problem-Discussion

showing tooltips, Problem-Discussion

popstate event, Solution-Solution

POST requestsending with Beacon API, Problem-Discussion

sending with Fetch API, Problem

uploading file data with the Fetch API, Problem

price ranges, formatting, Problem

profile card, web components for, Problem-Discussion

Promisesasynchronous APIs and, Promises

chaining, Problem-Discussion

creating a Promise helper for speech recognition, Problem-Discussion

event API wrapping, Problem-Discussion

events versus, Promises

handling error case, Discussion

Image element and, Solution

parallel, Problem-Discussion

using with IndexedDB API, Problem-Discussion

working with, Problem-Discussion

wrapping IntersectionObserver with, Problem-Discussion

push notifications, Solution

Q

QR codes, Barcode Detection API

query parameters, for URLsadding, Problem-Discussion

reading, Problem

removing, Problem

querying, with IndexedDB, Problem-Discussion

queryPermission function, Solution-Discussion

R

registering custom elements, Registering a Custom Element

relative URLs, resolving, Problem-Discussion

remote events, listening for, Problem-Discussion

rendering performance, profiling, Problem-Discussion

replacer function, Serializing with a replacer function

requestAnimationFrameanimating elements with, Problem-Discussion

scheduling updates with, Problem

requestsfinding timings for specific resource requests, Problem

in IndexedDB, Requests

ResizeObserver, ResizeObserver, Solution

resolving relative URLs, Problem-Discussion

Resource Timing API, Introduction

resourcesfinding slowest, Problem

finding timings for, Problem

performance measurement, Problem

reverse geocoding, Discussion

reviver function, Deserializing with the reviver function

RFC 3986 (Uniform Resource Identifier: Generic Syntax), Introduction

“ripple” animation, Problem-Discussion

rounding, of decimal places, Problem

routersclient-side, Problem-Discussion

matching to patterns, Discussion

routingadding query parameters for URLs, Problem-Discussion

creating a simple client-side router, Problem-Discussion

removing query parameters for URLs, Problem-Discussion

runtime, modifying stylesheets at, Problem

S

screen, capturing video of, Problem-Discussion

scroll progress indicator, Problem-Discussion

scroll-linked animation, Discussion

scrolling, infinite, Problem

ScrollTimeline, Discussion

sentences, counting, Problem-Discussion

server-sent events (SSEs), Problem-Discussion

setCustomValidity method, Problem-Discussion

shadow DOM, Shadow DOM, Solution-Discussion

simple objects, persisting to local storage, Problem-Discussion

<slot> element, Slotsfor customizable confirmation dialogs, Problem-Discussion

for disclosure web component, Problem-Discussion

for profile card, Problem-Discussion

for profile card components, Problem-Discussion

specifications and standards, sources for, Specifications

speech recognition, Speech Recognitioncreating a Promise helper, Problem-Discussion

language processing versus, Speech Recognition

speech synthesis, Speech Synthesis, Problemcustomizing parameters, Problem

getting available voices, Problem

Speech Synthesis Markup Language (SSML), Browser Support

SpeechRecognition interface, Problem-Discussion

SSEs (server-sent events), Problem-Discussion

stack traces, logging, Problem

storage (see Web Storage API)

Storage interface, Introduction

string data, persisting to local storage, Problem

string values, cursors for finding, Problem-Discussion

styled button component, Problem-Discussion

stylesheetsgetting an element’s computed style, Problem-Discussion

modifying at runtime, Problem

styling console output, Problem

synthesizing speech (see speech synthesis)

T

tables, displaying an array of objects in, Problem

tactile feedback, Problem-Discussion

tasks, profiling multistep, Problem-Discussion

<template> element, Templates

Temporal API, Introduction

textcopying and pasting, Problem-Discussion

highlighting text ranges, Problem-Discussion

preventing flash of unstyled text, Problem-Discussion

text fieldsadding dictation to, Problem-Discussion

specifying validation patterns, Problem

third-party libraries, Drawbacks of Third-Party Libraries, In Defense of Third-Party Libraries

threshold, with IntersectionObserver, IntersectionObserver

timeline, of animation, Discussion

timers, console, Problem

tooltips, Problem-Discussion

transactions, in IndexedDB, Transactions

transform animations, Problem-Discussion

transitionsanimating DOM transitions, Problem-Discussion

applying a transition when an element scrolls into view, Problem-Discussion

U

UI elements, Introduction-Discussionalert dialog, Problem-Discussion

basics, Introduction-Notifications

customizable confirmation dialog web component, Problem-Discussion

details, Details

dialogs, Dialogs

manually controlling a popover, Problem-Discussion

notifications, Notifications

popovers, Popovers

positioning a popover relative to an element, Problem-Discussion

showing a notification, Problem-Discussion

showing a popover, Problem-Discussion

showing a tooltip, Problem-Discussion

user prompt with Confirm/Cancel buttons, Problem-Discussion

using a disclosure element, Problem-Discussion

unstyled text, preventing flash of, Problem-Discussion

upgradeneeded event, Discussion, Problem-Discussion

URL Pattern API, Solution-Discussion

URLs, Introduction-Discussionadding query parameters to, Problem-Discussion

basics, Introduction

creating a simple client-side router, Problem-Discussion

defined, Introduction

matching to patterns, Discussion

parts, Parts of a URL

reading query parameters, Problem

removing query parameters, Problem-Discussion

resolving a relative URL, Problem-Discussion

routing and (see routing)

URLSearchParams objectfor adding query parameters to URL, Problem-Discussion

forEach method, Solution

user feedback, reusable component for, Problem-Discussion

user profiles, profile card component for, Problem-Discussion

User Timing API, Introduction

V

Validation API, Validation

validation logic, custom, Problem-Discussion

validation of forms (see under forms)

variables, logging, Problem

versioned databases, IndexedDB and, Discussion

Vibration API, Problem

<video> elementfor applying video filters, Problem-Discussion

for capturing image from user’s camera, Solution

for capturing video from user’s camera, Problem-Discussion

for recording user’s screen, Problem-Discussion

video capturefrom user’s camera, Problem-Discussion

of user’s screen, Problem-Discussion

video filters, Problem-Discussion

videosautomatically pausing and playing, Problem-Discussion

automatically playing, Discussion

loading as object URL, Problem-Discussion

pause and play automatically, Problem-Discussion

visibilitychange event, Solution

W

Web Animations API, Introduction-Discussionanimating DOM insertion and removal, Problem-Discussion

Animation objects, Animation Objects

applying a “ripple” effect on click, Problem-Discussion

basics, Introduction

keyframe-based, Keyframe-Based Animation

making an element bounce, Problem-Discussion

respecting the user’s animation preference, Problem

reversing, Problem-Discussion

running multiple animations simultaneously, Problem-Discussion

showing a loading animation, Problem-Discussion

showing a scroll progress indicator, Problem-Discussion

starting and stopping, Problem

Web Bluetooth API, Web Bluetooth API

web components, Introduction-Discussionbasics, Introduction-Light DOM

creating, Creating a Component

disclosure, Problem-Discussion

feedback, Problem-Discussion

lazy loading images, Problem-Discussion

Light DOM, Light DOM

profile cards, Problem-Discussion

registering custom elements, Registering a Custom Element

shadow DOM, Shadow DOM

slots, Slots

styled button component, Problem-Discussion

templates, Templates

to format custom date, Problem-Discussion

to show today’s date, Problem

web fonts, preventing flash of unstyled text with, Problem-Discussion

Web NFC API, Web NFC API

Web Share API, Problem

Web Speech API, Introduction-Discussionadding dictation to a text field, Problem-Discussion

automatically pausing speech, Problem

basics, Introduction-Browser Support

browser support, Browser Support

creating a Promise helper for speech recognition, Problem-Discussion

customizing speech synthesis parameters, Problem

getting the available voices, Problem

speech recognition, Speech Recognition

speech recognition versus language processing, Speech Recognition

synthesizing speech, Speech Synthesis, Problem

Web Storage API, Introduction-Discussionbasics, Introduction-Disadvantages

data removal, Problem

disadvantages, Disadvantages

finding all known keys, Problem-Discussion

getting and setting items, Getting and Setting Items

listening for storage changes, Problem

persisting complex objects, Problem-Discussion

persisting simple objects, Problem-Discussion

persisting string data, Problem

support, Problem

WebRTC API, Introduction

WebSocket API, exchanging data in real time with, Problem-Discussion

words, counting, Problem-Discussion

X

XMLHttpRequestintroduction of, Introduction

promisifying, Solution

sending GET request with, Problem-Discussion

XSS (cross-site scripting) attacks, Disadvantages

Fair Use Sources:

• B0CW1K187N (WbAPICook 2024)