Index

A

accessibility, Accessibility-Discussion
- adding skip buttons to pages, Problem-Discussion
- adding skip-regions to pages, Problem-Discussion
- applying roles, alts, and titles, Problem-Discussion
- auditing or tracking down problems with, Accessibility
- browser testing automation with cypress-axe, Problem-Discussion
- capturing scope in modals, Problem-Discussion
- checking with eslint, Problem-Discussion
- creating page reader with Speech API, Problem-Discussion
- using axe DevTools at runtime, Problem-Discussion
- using landmarks, Problem-Discussion
actions, Problem
- dispatching and responding to in React Redux apps, Solution
- with side effects, creating using Redux middleware, Solution
- submitting to central store with useDispatch, Solution
- undoActions function, Solution
adb (Android Debug Bridge) command, Solution
admin console, building with React Admin, Problem-Discussion
Alert component, Solution
Android Debug Bridge (adb) command, Solution
Android device, testing React app on, Problem-Discussion
animations
- animating infographics using TweenOne, Problem-Discussion
- animating with CSS classes, Problem-Discussion
- creating transitions with react-transition-group, Problem-Discussion
- using React Animations, Problem-Discussion
  - choosing which animation to use, Discussion
  - importing animations and helper code from Radium, Solution
  - installing Radium and React Animations, Solution
APIs
- faking server requests/responses using Cypress, Discussion
- GraphQL, Problem, Discussion
- React apps connecting to, proxying in create-react-app, Discussion
- secured, Problem-Discussion
  - treating all endpoints as secured, Solution
- testing calls with slow response using Cypress, Discussion
Apollo GraphQL client
- installing, Solution
- useQuery and useMutation hooks, Solution
apollo-server framework, Solution
ApolloProvider, Solution
AppBar component (Material-UI), Solution
applications, creating, Creating Applications-Discussion
- client and server code, managing with Next.js, Problem-Discussion
- component development using Storybook, Problem-Discussion
- content-rich sites, using Gatsby, Problem-Discussion
- custom elements, creating with Preact, Problem-Discussion
- inserting React apps into Rails pages using Webpacker, Problem-Discussion
- libraries, building with nwb, Problem-Discussion
- simple application, Problem-Discussion
- testing code in browsers using Cypress, Problem-Discussion
- tiny apps, using Preact, Problem-Discussion
- Universal applications, using Razzle, Problem-Discussion
applyMiddleware function (Redux), Solution
aria-haspopup attribute, Solution, Solution
- set to true, Solution
- trash can icon with, Solution
aria-hidden attribute, Discussion
arrays
- of forms, Discussion
- messages array in Semantic UI, Solution
- representing state, Solution
- returned by useReducer, Solution
assertion, Solution
assertion (WebAuthn), Solution, Discussion, Solution
asset-manifest.json file, Solution
asynchronous code
- making asynchronous network requests, Solution
- multiple asynchronous requests, performace gains for, Discussion
- used inside a hook, network response coming after, Solution
- using await to handle promises, Solution
attestation (WebAuthn), Solution, Discussion, Solution
authentication
- for secured routes, Solution
- single-factor, Problem-Discussion
- using fingerprints, Problem-Discussion
- using physical tokens, Problem-Discussion
authenticators, Solution
autoComplete attribute, Solution
autoCorrect attribute, Solution
await function, Solution, Solution
axe DevTools, checking accessibility at runtime, Problem-Discussion
axe-core library, Solution
Axios library, Solution
- axiosMiddleware.js code to intercept SEARCH actions, Solution

B

background sync, Solution-Discussion
- cautions with, Discussion
backgroundColor for elements, Solution
beforeinstallprompt event, Solution
block element modifier (BEM) naming, Solution
Bootstrap library, Problem-Discussion
- forms, creating and laying out, Solution-Discussion
BrowserRouter, Solution
- MemoryRouter versus, Solution
browsers
- automating accessibility testing with cypress-axe, Problem-Discussion
- axe DevTools plugin, accessibility checks with, Problem-Discussion
- Background Sync, Solution
- checking ability to run service workers, Solution
- cross-testing visuals using ImageMagick, Problem-Discussion
- functions to use in recording vitals, Solution
- getting high-resolution time in Firefox, Solution
- hearing elements described while tabbing between them, Solution
- installation of PWAs, Problem
- installing service worker, Solution
- launch icon for PWA, Solution
- loading code bundles lazily, Solution
- login forms that are browser friendly, Problem-Discussion
- measuring using browser performance tools
  - metrics checked by Lighthouse, Solution
- mobile
  - adding console to, Problem-Discussion
  - opening on Android device and connecting to localhost, Solution
  - testing, Problem
- native support of landmarks, Discussion
- navigation preload optimization, Discussion
- network connection, checking, Problem
- old, no-onchange rule in jsx-ally, Solution
- open tabs controlled by service worker, Solution
- root certificates, Solution
- service worker clients, Solution
- service worker running in, Solution
- simulating offline working using Cypress, Solution-Discussion
- testing code using Cypress, Problem-Discussion
- testing in, using Selenium, Problem-Discussion
- tests, browser-based, Testing
- time-based tests in, Problem-Discussion
- using browser performance tools, Problem-Discussion
  - installing React Developer Tools, Solution
  - Lighthouse, Solution
  - Performance tab, Solution
  - recording performance sessions, Solution
  - web vital measured by Lighthouse, Solution
build script (create-react-app), Solution
buttons, Solution
- adding skip buttons for accessibility, Problem-Discussion
- button role and, Solution, Solution
- button role for trash can icon, Solution
- implementing as buttons, Solution
- tabbed to, Solution

C

cache-first strategy, Solution
caches.match, Solution
caching
- code or content by PWAs, Problem
- problems with code caching, Problem
- service worker downloading app files into local cache, Solution
- service worker returning files from local cache, Solution
- service workers pre-caching all application code, Solution
- strategies, Problem
- third-party resource caching by service workers, Problem-Discussion
- using service workers to precache application code, Problem
Calendar application example, tracking rendering with Profiler, Solution-Discussion
catch handler, Solution
certificates
- certificate signing requests (CSRs), Solution
- creating with openssl, Solution
- root, Solution
- self-signed SSL certificates, generating, Solution
- SSL, generating for application, Solution
chainable nature of Cypress, Solution
Chrome DevTools remote debugging protocol, Solution
click events having no keyboard response, Solution
clients and servers
- building with Razzle, Solution
- clients getting more complex, server APIs becoming simpler, Problem
- GraphQL, Problem
  - connecting to third-party server without proxy, Solution
  - creating a server, Solution
- GraphQL Playground client, Solution
- managing code with Next.js, Problem-Discussion
- service worker clients, Solution
clock, measuring time with, Problem-Discussion
CLS (Cumulative Layout Shift), Solution, Solution
code splitting, Solution
- interfering with offline functionality, Solution
- shrinking your app with, Problem-Discussion
  - app performance without/with code splitting, Solution
  - code splitting at route level, Discussion
  - low cost of code splitting, Discussion
  - splittinc code with lazy function, Solution
- using lazy function, Discussion
combined animations, Solution
compare command (ImageMagick), Solution
complexity, managing with reducers, Discussion
component libraries, Component Libraries-Discussion
- Material-UI with Material Design, Problem-Discussion
- React Admin, building admin console with, Problem-Discussion
- React Bootstrap, creating UI with, Problem-Discussion
- React Window, viewing data sets with, Problem-Discussion
components
- behaving like standard UI elements, creating, Problem
- building elements in virtual DOM, Solution
- creating with nwb, Solution
- using Storybook for development, Problem-Discussion
confirmation logins, Problem-Discussion
confirmations, modal question box, Solution
connecting to services (see network services, connecting to)
console.log function, Solution
Container components, Solution
content
- all page body content rendered inside landmarks, Discussion
- grouping main page content in main landmark, Solution
content-rich apps, generating with Gatsby, Problem-Discussion
contexts, Solution
- ErrorHandlerContext example, Solution
- FormContext example, Solution
contrast errors (accessibility), Solution
cookies, Solution
- HTTP-only, Solution
- Login component checking for userID cookies, Solution
- user ID in, Solution
Coordinated Universal Time (UTC), Solution
CORS (cross-origin resource sharing), Solution
CPU usage, TweenOne using JavaScript, Solution
cra-template-pwa, Solution
create-razzle-app command, Solution
create-react-app tool, Solution-Discussion
- application created with, enabling SSR, Solution
- building progressive web applications, Problem-Discussion
  - using templates, Solution
- HelpSequence, adding to default App.js code, Solution
- JSX transforms, Solution
- keeping your application up to date, Discussion
CreateMessage component, Solution
cross-origin resource sharing (CORS) errors, Solution
CSRs (certificate signing requests), Solution
CSS
- browsers applying in different ways, Problem
- focus-visible style, Discussion
- styles, defined in Material-UI themes, Solution
- stylesheets, including in React Bootstrap UI, Solution
CSS animations, Problem-Discussion
- benefits and limitations of, Problem
- block element modifier class names, Solution
- CSS-in-JS libraries, Solution
- generating styles for, Solution
- height property, Solution
- keeping track of, Solution
- transition property, Solution
- TweenOne and, Solution
CssBaseline component, Solution
CSSTransition components, Solution-Discussion
Cucumber tests, Problem
Cumulative Layout Shift (CLS), Solution, Solution
cy.intercept command, Solution
Cypress, Testing
- creating new command cy.random, Solution
- cypress-axe plugin, automating browser testing with, Problem-Discussion
  - configuring cypress-axe, Solution
- simulating time passing with cy.clock and cy.tick, Solution
- specifying current time with cy.clock command, Solution
- testing code in browsers, Problem-Discussion
- testing daylight saving time (DST), Solution
- testing without a server, Problem-Discussion
- using for offline testing, Problem-Discussion

D

data providers, Solution
data reducers (see reducers)
data sets, viewing with React Window, Problem-Discussion
data state, Solution
data-fetching options (Next.js), Solution
Date function, Problem
dates and time
- fixing time within a test, Problem-Discussion
- formatting library, MomentJS, Solution
- measuring time precisely, Problem-Discussion
- rendering dates with DateRow component, Solution
daylight saving time (DST), testing, Solution
debounced requests, reducing network load with, Problem-Discussion
declarative routing, Routing
decorators, stories using, Solution
Delete button in TaskForm, Solution
deletion sequence, using reducers to manage, Problem-Discussion
dialogs, Solution
- accessibility errors found with axe DevTools, Solution
- aria-haspopup attribute set to dialog, Solution
- custom modal dialogs, focus escaping from, Problem
- custom modal dialogs, trapping focus in, Solution
- responsive, creating with Material-UI, Problem-Discussion
- TaskForm modal dialog, Solution
discoverable UI, Discussion
dispatch function, Solution
Document Object Model (see DOM)
document.querySelector, Solution
DOM
- checking against rules by axe-core library in cypress-axe, Solution
- interaction between virtual DOM and browser DOM, Problem
- react-router-dom, Solution, Solution
- reducing number of scans to improve TBT, Solution
- render method updating virtual DOM, Solution
- standalone implementation for unit tests in React Testing library, Solution
- updating real DOM elements not matching virtual DOM, Solution
- viewing in Eruda Elements tab, Solution
- virtual DOM in Preact, Solution
DST (daylight saving time), testing, Solution
duration parameter, Solution

E

effective date, Solution
ejecting applications, Discussion
element (block element modifier naming), Solution
email input type attribute, Solution
empty object ({}), Solution
error handlers
- building centralized error handler, Problem-Discussion
  - ErrorContainer, Solution
  - ErrorHandlerContext, Solution
  - ErrorHandlerProvider component, Solution
  - information to pass on to end user, Solution
  - useErrorHandler hook, Solution
  - wrapping bulk of application in ErrorContainer, Solution
errors, Solution
- accessibility, found by eslint, Solution
- cross-origin resource sharing (CORS), Solution
- error object from SEARCH_RESULTS action, Solution
- error state, Solution
- failures to cope with missisng properties or data, Solution
- network call failures, testing in Cypress, Solution
- network request converted to hook, Solution
- not tracking in create function of useForum, Solution
- unauthorized access, Solution
Eruda, Solution-Discussion
eslint
- checking accessibility with, Problem-Discussion
  - configuring jsx-ally plugin, Solution
  - errors found, Solution
  - extending eslint with plugins, Solution
  - jsx-a11y plugin, Solution
  - running with rules enabled, Solution
- checking security with, Problem-Discussion
  - enabling eslint, Solution
  - installing plugin with security rules, Solution
  - no-dangerously-set-innerhtml rule, Solution
  - running checks with Git pre-commit hooks, Discussion
event.data.notifyMe, Solution
exceptions
- handling consistently in React applications, Problem
- network request throwing exception, Solution

F

fade-out animations, Solution
FCP (First Contentful Paint), Solution, Solution
Feed component, Solution
fetch command, Solution
fetch function, Solution
fetch request, dropping into useMessages hook, Solution
filter methods, screen object, Solution
fingerprints, authenticating with, Problem-Discussion
First Contentful Paint (FCP), Solution, Solution
First Input Delay (FID), Solution
FixedSizeList, Solution
flows in web authentication, Solution
focus
- buttons receiving from keyboard, Solution
- describing currently focused elemet in screen reader, Solution
- escaping from custom modal dialogs, Problem
- finding element receiving with document.querySelector, Solution
- function performing Tab operation, Solution
- listener for focusin events, Solution
- making clear to users where it is, Discussion
- SkipButtons in Skip component, Solution
- style for skip button having focus, Solution
- trapping within small subset of components, Problem-Discussion
footer tag, page metadata grouped in, Solution
forms
- adding form to post messages to forum, Problem
- building in Semantic UI, Solution
- creating and laying out with Bootstrap, Solution-Discussion
- creating and validating, Problem-Discussion
  - InputField component with validation, Solution
  - InputField component without validation, Solution
  - SimpleForm with validation code, Solution
  - SimpleForm without validation, Solution
- TaskForm modal dialog, Solution
forwardRef function, Solution
fullScreen property, dialogs in Material-UI, Solution

G

Gatsby
- building content-rich apps with, Problem-Discussion
  - directory structure, Solution
  - plugins, getting content into the application, Discussion
- prerendering pages at build time, Discussion
getUserConfirmation function, Solution
Git pre-commit hooks, Discussion
GitHub repository for this book, Discussion
Google Analytics, tracking web vitals with, Discussion
GraphQL data provider for admin console, Solution-Discussion
GraphQL server, Solution
GraphQL, connecting to, Problem-Discussion
- creating GraphQL server, Solution
- making query and mutation calls from Forum component, Solution
- React client code, Solution
- React Forum component code, Solution
Grid components, Solution
Gruber, John, guide to Markdown, Discussion

H

headings
- color contrast accessibility error in, Solution
- h1 and lower-level headings on page, Solution
- SkipButtons allowing user to skip, Discussion
headless content management system sources
- getting data with Next.js, Solution
height property (CSS), Solution
help system, interactive, Problem-Discussion
- HelpBubble component, displaying pop-up help message, Solution
- HelpSequence, adding to default App.js code, Solution
- HelpSequence, coordinating HelpBubbles, Solution
- showing sequence of help messages when user asks, Solution
history
- MemoryRouter faking browser history API, Solution
- undoHistory function, Solution
hooks
- converting network calls to, Problem-Discussion
  - useForum hook, Solution-Discussion
- extracting API calls into custom hooks, Discussion
- Git pre-commit hook, Discussion
- GraphQL useQuery and useMutation calls in custom hooks, Discussion
- moving Redux useDispatch/useSelector code into, Discussion
HTML
- attributes to improve usability of login forms, Solution
- converting Markdown to, Solution
- files generated for page components using Gatsby, Solution
- landmarks in HTML5, Discussion
- no-dangerously-set-innerhtml check in eslint, Solution
HTML elements
- applying roles to, Solution
- custom, creating with Preact, Problem-Discussion
- finding using Testing library, Solution-Solution
- landmarks, Solution
HTTP status 401 (Unauthorized), Solution, Solution
HTTPS, Solution, Problem
- enabling, Problem-Discussion
- loading service workers with, Solution, Solution

I

ImageMagick, cross-testing browser visuals, Problem-Discussion
InfernoJS, Discussion
infographics, animating with TweenOne, Problem-Discussion
installation UI (custom) for PWAs, Problem-Discussion
installEvent.prompt method, Solution
interaction design, Interaction Design-Discussion
- adding keyboard interaction, Problem-Discussion
- animating with CSS classes, Problem-Discussion
- animating with React Animations, Problem-Discussion
- centralized error handler, Problem-Discussion
- creating interactive help guide, Problem-Discussion
- using Markdown for rich content, Problem-Discussion
- using reducers for complex interactions, Problem-Discussion
intervals
- IntervalTicker for clock component, Solution
- ticking interval format, Solution

J

JavaScript
- application development, Creating Applications
- CSS-in-JS libraries, Solution
- dates not working with time zones, Solution
- default language for create-react-app, Solution
- generated file for page components using Gatsby, Solution
- Selenium WebDriver, Solution
- use by TweenOne, consequences of, Solution
Jest testing library, Solution
- running Selenium tests in src tree like unit tests, Solution
- test loading stories and passing them to Testing Library's render function, Solution
- timeout limit for tests, Solution
- unit test for performance written in, Discussion
John Gruber's original guide (to Markdown), Discussion
js-cookie library, Solution
JSON, Solution
- asset-manifest.json file, Solution
- cypress.json file, Solution
- enabling eslint in package.json file, Solution
- proxy property in package.json file, Solution
- setting proxy in package.json file, Discussion
- start and build scripts in package.json file, Solution
- traced interactions shown as JSON strings, Solution
- web vitals shown as JSON objects in JavaScript console, Solution
- webauth-json library, Solution
JSX, Solution
- passed to render function, Solution
- support in Preact applications, Solution
jsx-a11y plugin (eslint), Solution
- acccessibility rules, Solution
- benefits of, Discussion
- configuring, Solution
jumpiness, Solution, Solution
j_username as id and name of username field, Solution

K

keyboard
- click events handler, Solution
- importance of keyboard navigation, Discussion
- navigation with, Solution
- responding to click events, Solution
- tabbing to buttons with, Solution
keyboard interaction, adding to application, Problem-Discussion
- pressing keys causing arrow to rotate, Solution
- registering callback for keydown events on document, Solution
- useKeyListener hook, Solution

L

landmarks, Solution-Discussion
- browsers' native support for, Discussion
- main, grouping main page content, Solution
- metadata, grouped in footer tag, Solution
- ModalQuestion confirmation box, Solution
- nav, identifying navigation on pages, Solution
- rendered by React applications, Discussion
- versus roles, Discussion
- TaskForm modal dialog, Solution
Largest Contentful Paint (LCP), Solution
lazy function, Solution, Discussion
- returning placeholder component, Solution
lazy loading, Solution
- error without Suspense component, Solution
- performance gain from, Solution
LCP (Largest Contentful Paint), Solution
Lighthouse, Solution-Solution
- checking loading performance, Solution
- installing command-line, Solution
- Lighthouse tab with Chrome DevTools, Solution
- many factors affecting performance audit, Solution
- web vitals measured by performance audit, Solution
Link components, Solution
- NavLink, Solution
ListMessages component, Solution
lists
- list and listitem roles, Solution
- ul and li tags, Solution
Loadable Components library, Discussion
loading flag from SEARCH_RESULTS action, Solution
loading state, Solution
localhost
- configuring mobile device to access React app on, Problem
- service workers on, Solution
login/logout
- enabling login with a token, Solution
- invalid login attempts, Solution
- Login component checking for userID cookies, Solution
- making login forms browser friendly, Problem-Discussion
- placing in SecurityProvider, Solution
- for secured routes, Problem-Discussion
- using confirmaion logins, Problem-Discussion

M

Markdown
- using for rich content, Problem-Discussion
  - John Gruber's original guide, Discussion
- using to display help messages, Discussion
Material-UI library, Solution
- creating custom Alert dialog, Solution
- creating responsive dialogs, Problem-Discussion
- Popper component, Solution
- using Material Design, Problem-Discussion
  - core library, Solution
  - dialog window content, Solution
  - dialog windows, example of, Solution
  - icons, Solution
  - styling with themes, Solution
  - styling within, Solution
Math.random function, fixing return value of, Solution-Discussion
Media component, Solution
MemoryRouter, using for unit testing, Problem-Discussion
menus
- aria-haspopup seen as, Solution
- expected behavior of, Solution
- menu and menuitem roles, Solution
MessageFilter object, Solution
messages
- creating on admin console, Solution
- displaying on admin console, Solution
- Feed component in Semantic UI, Solution
- filtering by author and text on admin console, Solution
- making service worker respond to, Solution
- posting in Semantic UI, Solution
- service workers receiving, Solution
Messages resource, Solution
metadata, Solution
middleware (Redux), making network calls, Solution-Discussion
mobile devices
- adding console to mobile browsers, Problem-Discussion
- dialogs on, creating with Material-UI, Solution
- removable tokens and fingerprint sensors, Solution
- testing React app on Android device, Problem-Discussion
Modal component, Solution
Modal-dialog div, Solution
- title property applied to, Solution
ModalQuestion confirmation box, Solution
modals, capturing scope in, Problem-Discussion
modifier (block element modifier naming), Solution
MomentJS library, Solution
mutation (GraphQL), Solution
- AddMessage mutation, Solution

N

navigation
- keyboard, Solution
- keyboard, importance of, Discussion
- links looking like menu of options, Solution
- using nav landmark to identify, Solution
navigation preload, Discussion
navigator.sendBeacon function, Solution
navigator.serviceWorker.controller, Solution, Solution
navigator.serviceWorker.register function, Solution
NavLink components, Solution
Near-Field Communication (NFC), Solution
network connection, checking for browser, Solution
Network Only strategy, Solution
network services, connecting to, Connecting to Services-Discussion
- canceling network requests with tokens, Problem-Discussion
- converting network calls to hooks, Problem-Discussion
- reducing network load with debounced requests, Problem-Discussion
- refreshing automatically with state counters, Problem-Discussion
- using Redux middleware for network calls, Problem-Discussion
networks
- background sync queuing requests when server unavailable, Problem-Discussion
- combining network promises, Problem-Discussion
- emulating offline working using Chrome DevTools, Solution
- failures of, Problem
  - creating automated tests for failure cases, Solution-Discussion
Next.js, Discussion
- managing server and client code with, Problem-Discussion
NFC (Near-Field Communication), Solution
no-dangerously-set-innerhtml rule, Solution
no-onchange rule (jsx-ally), Solution
no-tools approach, Solution
Node
- backend server for example Rect application, Solution
- building server with Razzle, Solution
notifications from service workers, Solution-Discussion
- notification of task finishing, Solution
- notification-click handler, Solution
- posting messages to service workers, Solution
- sending user back to React application, Solution
- showing notification with registration object, Solution
- tag option, Solution
- title and options, Solution
- user granting permissions for, Solution
npm
- using with create-react-app, Solution
- using with Next.js applications, Solution
npx command
- calling create-razzle-app via, Solution
- calling create-react-app via, Solution
- initiating Storybook, Solution
- opening and running Cypress, Solution
- running Gatsby with, Solution
nth-child selector in CSS, Solution
nwb tool, building libraries with, Problem-Discussion

O

object destructuring, Solution
objects
- empty, Solution
- representing state, Solution, Solution
offline changes, making with background sync, Problem-Discussion
offline responses, providing, Problem-Discussion
offline testing, using Cypress, Problem
onAnimationEnd callback, Solution
onbeforeinstallprompt event, Solution, Solution
onBlur event handlers, Solution
onChange events, Solution
onKeyDown function, Solution
online and offline events, Solution
online status, monitoring for application, Problem-Discussion
onRender function, Solution, Solution
onUpdate function, Solution
onupdatefound handler, Solution
OpenSSL tool, Solution
optimizations
- checking impact on performance, Solution
- cost of, Discussion
- costs of, Performance
- premature, Performance
- server-side rendering, cost of, Discussion

P

packs, Solution
page exit confirmations, using Prompt for, Problem-Discussion
page reloads, surviving with Redux Persist, Problem-Discussion
password input type, avoiding on login forms, Solution
PEM (Privacy-Enhanced Mail) format, Solution
PeopleContainer, Solution
PeopleList component, Solution
performance, Performance-Discussion
- combining network promises, Problem-Discussion
- creating Profiler unit tests, Problem-Discussion
- essentialist approach to, Performance
- fixes, cost of, Performance
- measuring precisely, Performance
- measuring time precisely, Problem-Discussion
  - measuring less than milliseconds, Problem
  - performance.now, advantages over dates, Discussion
  - time and timeEnd functions, Problem
  - using Date function, Problem
  - using performance.now function, Solution
- measuring using browser performance tools, Problem-Discussion
  - browser Performance tab, Solution
  - Lighthouse, Solution
  - web vital measured by Lighthouse, Solution
- shrinking your app with code splitting, Problem-Discussion
- tracking rendering with Profiler, Problem-Discussion
- using browser performance tools
  - metrics checked by Lighthouse, Solution
- using server-side rendering, Problem-Discussion
- using web vitals, Problem-Discussion
Performance tab (in browser DevTools), Solution
- investigating long-running task, Solution
persisted reducers, Solution
PersistGate component, Solution
platform authenticator, Solution
Playground client (GraphQL), Solution
polling a network service, Solution
pop-ups
- aria-haspopup attribute, Solution, Solution
- dialogs, Problem
- modal, Problem
- usually associated with menus, Solution
Popper component, Solution
pre-commit hooks, Discussion
Preact
- creating custom elements with, Problem-Discussion
- creating tiny apps with, Problem-Discussion
preact-cli tool, Solution
preset-react Babel plugin, Solution
Privacy-Enhanced Mail (PEM) format, Solution
Profiler component, Performance
- creating Profiler unit tests, Problem-Discussion
  - adding Profiler to Calendar App component, Solution
  - building a unit test, Solution
  - example Calendar application, Solution
  - passing onRender function to child components, Solution
  - rendering information captured, Solution
- tracking rendering with, Problem-Discussion
  - example Calendar application, Solution
  - onRender function, Solution
  - performance statistics recorded, Solution
  - render statistics in JavaScript console, Solution
  - trace function, Solution
  - tracker function, Solution
  - wrapping Calendar app and buttons in Profiler, Solution
progressive web applications (PWAs), Progressive Web Applications-Discussion
- adding custom installation UI, Problem-Discussion
- adding notifications, Problem-Discussion
- building with create-react-app, Problem-Discussion
- caching third-party resources, Problem-Discussion
- creating service workers using Workbox, Problem-Discussion
- making offline changes using background sync, Problem-Discussion
- providing offline responses, Problem-Discussion
- reloading workers automatically, Problem-Discussion
- with service workers, hybrid between local and remote application, Discussion
projects (React), tool for building SPAs, Problem
promises, Solution
- cancelable promises proposal from ECMA, Solution
- combining network promises, Problem-Discussion
  - parallelizing requests with Promise.all function, Solution
  - receiving array of promises with Promise.all, Solution
- handling correctly with await, Solution
- returned by confirmLogin function, Solution, Solution
Prompt component, using for page exit confirmations, Problem-Discussion
properties (custom element), Solution
Provider context, Solution, Solution
- ErrorHandlerProvider component, Solution
- PersistGate inside of, Solution
proxies
- proxying network on Android-based device, Solution
- proxying web services, Discussion
- Selenium Grid server, Solution
public-key cryptography, Problem
- generating RSA private key, Solution
pulse animations, Solution
PWAs (see progressive web applications)

Q

query (GraphQL), Solution
- Messages query, Solution

R

Radium library, Solution
- importing animations and helper code from, Solution
- keyframes method, Solution
Rails, adding React to using Webpacker, Problem-Discussion
randomness, removing from tests, Problem-Discussion
Razzle, Discussion
- building universal apps with, Problem-Discussion
React Admin library, building an admin console, Problem-Discussion
React Animations library, Problem-Discussion
- combining animations with merge function, Solution
React Bootstrap (see Bootstrap library)
React Developer Tools
- installed in browser, performance statistics displayed, Solution
- installing in Chrome or Firefox, Solution
React Focus Lock library, Solution-Discussion
React Modal, Discussion
React Scripts library, Solution
- keeping updated with create-react-app, Discussion
React Testing library, Problem-Discussion
- providing headless DOM implementation, Solution
React Window library, Problem-Discussion
- creating large, fixed-size list, Solution-Discussion
react-helmet library, Solution
react-markdown, Solution
react-md-editor library, Solution
react-media, Solution
react-router-dom, Solution, Solution
- BrowserRouter, Solution
- MemoryRouter, Solution
- Prompt component, Solution
react-transition-group, Solution
ReactDOM.hydrate method, Solution
ReactDOM.render method, Solution
Redirect component, Solution
- adding to end of Switch, Solution
reducers, Managing State, Problem
- ensuring Redux code is stable, criteria for, Problem
- global state management with Redux, Problem
  - reducer component for shopping basket app, Solution
- persisted, Solution
- Redux middleware, storing SEARCH_RESULTS in central state, Solution
- Redux reducers updating central state, Solution
- using for complex interactions, Problem-Discussion
  - deletionReducer example, Solution-Discussion
- using to implement undo function, Problem-Discussion
- using to manage complex state, Problem-Discussion
  - use cases, Discussion
Redux library
- making network calls with middleware, Problem-Discussion
  - function signature for Redux middleware, Solution
  - registering middleware, Solution
  - Search component, Solution
- managing global state with, Problem-Discussion
Redux Persist, persisting state through page reloads, Problem-Discussion
references, components accepting, Solution
Referer header, Discussion
refreshes, automatic, using state counter, Problem-Discussion
refs, Solution
register function, Solution, Solution, Solution
registerRoute function, Solution
registerWorker function, Solution
registration, Discussion
- physical token for authentication, Solution
registration object, Solution
- showNotification method, Solution
registration.waiting, Solution
regression checks, Discussion
relying party (rp), Solution
render function
- JSX passed to, Solution
- passing Storybook stories to, Solution
rendering
- React components outside the browser in unit tests, Solution
- tracking performance with Profiler, Solution-Solution
- tracking with Profiler, Problem-Discussion
- using server-side rendering, Problem-Discussion
renderToString function, Solution
reportWebVitals function, Solution
require-text library, Solution
reselect library, calculating derived state, Problem-Discussion
resources, admin application browsing through, Solution
responsive routes, Solution-Discussion
rich content, using Markdown for, Problem-Discussion
Roboto typeface, Solution
roles, Solution-Discussion, Solution
- applying to elements with role attribute, Solution
- aria-haspopup attribute matching roles of component that appears, Solution
- button, Solution, Solution
- button role for trash can icon, Solution
- dialog, Solution
- lacking in eslint accessibility check, Solution
- versus landmarks, Discussion
- list and listitem, Solution
- menu and menuitem, Solution
- rules for, Solution, Solution
- typical roles applied to rendered HTML, Solution
root certificates, Solution
routing, Routing-Discussion
- creating interfaces with responsive routes, Problem-Discussion
- creating secured routes, Problem-Discussion
- creating transitions with react-transition-group, Problem-Discussion
- moving state into routes, Problem-Discussion
- registering explicit route using workbox-routing, Solution
- route to cache third-party resource, Solution
- routes for page components generated with Gatsby, Solution
- secured routes, Problem
- splitting code at route level, Discussion
- synchronized routes application, Problem
- using MemoryRouter for unit testing, Problem-Discussion
- using Prompt for page exit confirmations, Problem-Discussion
- using react-router, additional code for server-side rendering, Discussion
rp (relying party), Solution
rules
- accessibility
  - for jsx-ally eslint plugin, Solution
  - running eslint with rules enabled, Solution
- for roles, Solution, Solution

S

schemas (GraphQL), Solution
screen object, Solution
- filter methods, Solution
screen readers
- creating page reader with Speech API, Problem
- headings, handy navigation device in, Solution
- interpreting aria-haspopup as menu, Solution
- making clear purpose of dialog, Solution
- skip button and, Solution
- skipping over content, Problem
search engine optimization (SEO)
- Gatsby applications, Solution
- issues with Single Page Applications, Problem
Secure Sockets Layer (SSL), Solution
SecureRoute components, Solution
security, Security-Discussion
- authenticating with physical tokens, Problem-Discussion
- authentication with fingerprints, Problem-Discussion
- checking with eslint, Problem-Discussion
- creating secured routes, Problem-Discussion
- enabling HTTPS, Problem-Discussion
- making login forms browser friendly, Problem-Discussion
- secured API approach, Problem-Discussion
- secured routes and, Problem
- testing React app on Android device, Problem-Discussion
- using confirmation logins, Problem-Discussion
- using single-factor authentication, Problem-Discussion
SecurityContext, Solution
SecurityProvider components, Solution, Solution
- changing for API security model, Solution
- confirmation code centralized in, benefits of, Discussion
- confirmLogin function, Solution
- login and logout functions, Solution
- loginWithToken function, Solution
- onFailure function, Solution
selectors, Managing State
- associating screen events with pop-up help messages, Solution
- nth-child selector in CSS, Solution
- Redux, Solution
- reselect library, calculating derived state, Solution-Discussion
  - efficiency of selectors, Solution
  - summarizer selector, Solution
  - taxer selector, Solution
- using to read global state, Solution
Selenium library, Testing
- testing in browsers with, Problem-Discussion
- using in cross-testing browser visuals, Solution
  - script for screenshot captures, Solution
self variable, Solution, Solution
self-signed certificates, Solution, Discussion
self.clients, Solution
Semantic UI, Problem-Discussion
- message posting application, Solution
SEO (see search engine optimization)
server-side rendering, Problem-Discussion
- building server to host code, Solution
- converting SPA to SSR application, Discussion
- fixing React App code showing broken SVG image, Solution
- performance gain from, Solution
- React application showing broken SVG image, Solution
- React code to load and render App component, Solution
- rendering to a string, not to virtual DOM, Solution
- renderToString function, Solution
serverless applications, Problem
servers, Problem
- (see also clients and servers)
- building server to host server-side rendering code, Solution
service workers, Progressive Web Applications, Solution
- automatically reloading, Problem-Discussion
- background tasks in, Problem
- caching application code to work offline, Problem
- caching third-party resources, Solution
- creating notifications from, Solution-Discussion
- creating using Workbox, Solution-Discussion
  - calling clientsClaim function from workbox-core, Solution
  - converting service-worker.js file to service worker, Solution
  - downloading and registering service worker, Solution
  - problem loading page 2 with server offline, Solution
  - proving files are coming from service worker, Solution
  - re-opening application to activate new worker, Solution
  - registering route handler, Solution
  - registering service workers, Solution
  - registration object, Solution
  - updating of service workers, Solution
- PWA including, building with create-react-app, Solution-Discussion
- queuing network requests with Background Sync, Solution-Discussion
- using to precache application code, Problem
serviceWorkerRegistration.register function, Solution
setConfirmCallback function, Solution
setTimeout function, Solution
shake animations, Solution
shopping basket application example, Problem-Discussion
- adding items to basket using Boots component, Solution
- Basket component, Solution
- calculating derived state with reselect, Problem-Discussion
SI (Speed Index), Solution
side effects
- reducer functions and, Problem
- Redux middleware code, Solution
SimpleWebAuthn library, Discussion
single-factor authentication, Problem-Discussion
Single-Page Applications (SPAs)
- building with Razzle, Solution
- generating with create-react-app, Solution-Discussion
- performance issues, Problem
Sinon library, Solution
skip buttons, Problem-Discussion
- document.querySelector to find element receiving focus, Solution
- event handler for keyboard presses, Solution
- hiding button until user tabs into it, Solution
- inserting SkipButton near beginning of page, Solution
- SkipButton component, features needed, Solution
- wrapping SkipButton in forwardRef function, Solution
skip-regions, adding, Problem
- context or group of tasks, Solution
- function performing back-Tab operation, Solution
- function to perform Tab operation, Solution
- how skip-region will be used, Solution
- not adding too many, Discussion
- references allowing tracking of SkipButtons, Solution
- Skip component code, Solution
- Skip component that renders two SkipButtons, Solution
- SkipButton appearing when user tabs to/away from section of main content, Solution
- SkipButton only appearing when entering skip-region, Solution
- wrapping groups of tasks in Skip component, Solution
SKIP_WAITING message to new service worker, Solution
SPAs (see Single-Page Applications)
Speech API, creating page reader with, Problem-Discussion
Speed Index (SI), Solution
SSL (Secure Sockets Layer), Solution
SSL certificates, Discussion
- (see also certificates)
- generating for application, Solution
- self-signed, generating, Solution
SSR (see server-side rendering)
stale-while-revalidate strategy, Solution
starters (Gatsby), Discussion
state, Managing State-Discussion
- complex, managing with reducers, Problem-Discussion, Solution
  - reducer code, Solution
  - wiring up reducer to React component, Solution
- data, loading, and error, Solution
  - in custom hook, Solution
- derived, calculating with reselect, Problem-Discussion
- forms, creating and validating, Problem-Discussion
  - tracking form state in formFields object, Solution
- global, managing with Redux, Problem-Discussion
- implementing general undo function using undo-reducer, Problem-Discussion
- monitoring online status, Problem-Discussion
- moving into routes, Problem-Discussion
- React application responding to time of day, Problem-Discussion
- Redux reducer storing SEARCH_RESULTS in central state, Solution
- refreshing automatically with state counters, Problem-Discussion
- surviving page reloads with Redux Persist, Problem-Discussion
- updating central state in React Redux apps, Solution
StaticRouter, Discussion, Discussion
storage
- context as storage scope, Solution
- persisting global state in local storage, Discussion
- specifying for persistence of Redux state, Solution
Storybook, Testing
- component development with, Problem-Discussion
- reusing stories inside tests, Solution-Discussion
- similarities and differences between galleries and tests, Problem
- using BrowserMemory in, Solution
- using in cross-testing browser visuals, Solution
strategies (caching), Problem
- cache-first, Solution
- catch handler executed when Workbox strategy fails, Solution
- in Workbox, Solution
- Network Only, Solution
- stale-while-revalidate, Solution
Suspense component
- fallback component provided by, Solution
- lazy loading error without, Solution
SVG path animations, using TweenOne, Solution
synchronized routes application, Problem
syntax highlighters, Solution

T

Tab operation, function performing, Solution
tabIndex attribute, Solution, Solution
- possible problem in Focus Lock library, Solution
talkToMe screen reader example, Solution-Discussion
TaskForm
- accessibility checking with cypress-axe, Solution
- dialog role, Solution
- runtime accessibility check with axe DevTools, Solution
- updated component, Solution
TBT (Total blocking time), Solution
test-driven development (TDD), Solution
testing, Testing-Discussion
- adding console to mobile browsers, Problem-Discussion
- in a browser, using Selenium, Problem-Discussion
- browser-based, using Cypress, Problem-Discussion
- creating unit tests that call Profiler, Problem-Discussion
- cross-browser visuals, testing using ImageMagick, Problem-Discussion
- loosening defiinition of test, Testing
- network failures without server using Cypress, Problem-Discussion
- offline, using Cypress, Problem-Discussion
- React app on Android device, Problem-Discussion
- time-dependent code, Problem-Discussion
- using MemoryRouter for unit testing, Problem
- using React Testing library, Problem-Discussion
text, converting to speech, Solution
themes, Solution
third-party resource caching, Problem-Discussion, Problem
time, Problem
- (see also dates and time)
- measuring with a clock, Problem-Discussion
time function, Problem
Time to interactive (TTI), Solution
time zones, DST and, Solution
timeEnd function, Problem
timeouts, Solution
- Jest timeout limit for tests, Solution
timestamps
- creating at start and end of code with Date function, Problem
- messages posted to a list, Solution
- trace function, Solution
tiny apps, creating with Preact, Problem-Discussion
titles, Solution
tokens
- canceling network requests with, Problem-Discussion, Discussion
  - creating source for token, Solution
- fingerprint sensors as WebAuthn tokens, Solution
- physical, authenticating with, Problem-Discussion
- using in single-factor authentication, Problem-Discussion
Toolbar component (Material-UI), Solution
Total blocking time (TBT), Solution
transforms (CSS), Solution
TransitionGroup components, Solution
transitions
- creating with react-transition-group, Problem-Discussion
- CSS transition property, Solution
tree shaking, Solution
TTI (Time to interactive), Solution
TweenOne, animating infographics with, Problem-Discussion
two-factor authentication, Problem-Discussion
TypeScript
- Gatsby's built-in support for, Solution
- generating applications with create-react-app, Solution
Typography component (Material-UI), Solution

U

UIs (user interfaces), Interaction Design
- (see also interaction design)
- creating with React Bootstrap, Problem-Discussion
- custom installation UI for PWAs, Problem-Discussion
- making discoverable, Discussion
UMD (Universal Module Definition), Solution
Unauthorized (HTTP status), Solution, Solution
Undo feature, creating, Problem-Discussion
undoActions and undoHistory functions, Solution
unit tests, Problem-Discussion
- creating Profiler unit tests, Problem-Discussion
- early approaches, Problem
universal apps, building with Razzle, Problem-Discussion
Universal Module Definition (UMD), Solution
useCallback hook, Solution
useCancelableSearch custom hook, Solution
useClock hook, Solution-Discussion
useDebouncedSearch custom hook, Solution
useDispatch hook, Solution
useEffect hook, Solution, Solution, Solution
- fetch request inside of, Solution
- network call in, Solution
useErrorHandler hook, Solution
useForum hook, Solution-Discussion
useKeyListener hook, Solution
- only listening for events at body level, Discussion
useMessages hook, Solution
- adding form to post messages to forum server, Problem
useMutation hook, Solution
useOnline hook, Solution-Discussion
useQuery hook, Solution
User Event library, Solution
- simplifying generation of JavaScript events for HTML elements, Solution
user IDs
- accepted by loginWithToken, Solution
- finding current user ID from cookies, Solution
- setting cookie in browser with, Solution
user interfaces (see UIs)
useReducer hook, Solution
useSearch custom hook, Solution
useSecurity hook, Solution
useSelector hook, Solution
useStyles hook, Solution
useUndoReducer hook, Solution
UTC (Coordinated Universal Time), Solution
utterances, Solution

V

validation
- InputField component with validation, Solution
- simple form with field validation, Solution
Vercel platform, Solution
verification, Discussion
vibration for notifications, Solution
virtual DOM, Solution
- interaction between browser DOM and, Problem
vision problems
- inability to see visual styling of a component, Problem
- using landmarks instead of visual grouping for page structure, Problem

W

Web Context Accessibility Guidelines (WCAG), Accessibility
web driver tests, Solution-Discussion
web drivers, installing for cross-browser testing, Solution
Web Speech API, Solution
web vitals mesured by Lighthouse, Solution
- Cumulative Layout Shift (CLS), Solution
- First Contentful Paint (FCP), Solution
- First Input Delay (FID), Solution
- Largest Contentful Paint (LCP), Solution
- Speed Index (SI), Solution
- Time to interactive (TTI), Solution
- Total blocking time (TBT), Solution
web vitals, tracking, Problem-Discussion
- browser functions recording vitals, Solution
- reportWebVitals function, Solution
- sending data back to backend store, Solution
web workers, Problem, Solution
- background tasks in, Problem
WebAuthn, Security, Solution
- assertion, Solution
- attestation, Solution
- registration code for new device, Solution
- requiring HTTPS for domains other than Localhost, Problem
- using fingerprint sensors as tokens, Solution-Discussion
webauthn-json
- avoiding use of low-level data types with, Discussion
- get function, assertion request passed to, Solution
- installing from GitHub, Solution
Webpack
- generating service worker from src/service-worker.js, Solution
- svgr library replacing imports of SVG images, Solution
- Workbox Webpack Plugin, Solution
Webpack configuration, Solution
- keeping config file updated with create-react-app, Discussion
Webpacker, adding React to Rails applications, Problem-Discussion
WHATWG specification, Solution
windows, React Window library, Problem-Discussion
withMobileDialog function, Solution
wizard-style login screens, avoiding, Solution
Workbox Webpack Plugin, Solution
Workbox, creating service workers with, Solution-Discussion
- installing Workbox libraries, Solution
workbox-background-sync library, Solution
- resending requests to queue, Solution
workbox-core library, Solution
workbox-navigation-preload library, Discussion
workbox-precaching library, Solution
workbox-routing library, Solution, Solution

Y

yarn package manager
- installing before starting Rails server, Solution
- use with create-react-script, Solution
- using with Next.js applications, Solution
YubiKeys, Problem
- attestation request for, Solution
- built-in fingerprint sensors versus, Discussion

Z

zoomOut animations, Solution