Web API Cookbook: Level Up Your JavaScript Applications

✍ Scribed by Joe Attardi

• Publisher: O'Reilly Media
• Year: 2023
• Tongue: English
• Leaves: 278
• Category: Library

✦ Synopsis

JavaScript gives web developers great power to create rich interactive browser experiences, and much of that power is provided by the browser itself. Modern web APIs enable web-based applications to come to life like never before, supporting actions that once required browser plug-ins. Some are still in an experimental stage, but many are ready for use today.

With this hands-on cookbook, author Joe Attardi helps you explore the powerful APIs available in modern browsers and guides you through the specific tasks that they unlock. Because these features are web standards, there is comprehensive documentation available from trusted resources such as MDN Web Docs. The knowledge you'll gain is transferable across different companies and projects.

Learn the breadth of functionality available in modern browser APIs

Explore future APIs that are still in an experimental stage

Discover newer elements, such as dialog that replaces the need for a third-party...

✦ Table of Contents

Preface
The Power of Modern Browsers
Drawbacks of Third-Party Libraries
Who This Book Is For
What’s in This Book
Additional Resources
CanIUse.com
MDN Web Docs
Specifications
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
1. Asynchronous APIs
Introduction
Callback Functions
Events
Promises
Working with Promises
Problem
Solution
Discussion
Loading an Image with a Fallback
Problem
Solution
Discussion
Chaining Promises
Problem
Solution
Discussion
Using the async and await Keywords
Problem
Solution
Discussion
Using Promises in Parallel
Problem
Solution
Discussion
Animating an Element with requestAnimationFrame
Problem
Solution
Discussion
Wrapping an Event API in a Promise
Problem
Solution
Discussion
2. Simple Persistence with the Web Storage API
Introduction
Getting and Setting Items
Disadvantages
Checking for Web Storage Support
Problem
Solution
Discussion
Persisting String Data
Problem
Solution
Discussion
Persisting Simple Objects
Problem
Solution
Discussion
Persisting Complex Objects
Problem
Solution
Serializing with a replacer function
Deserializing with the reviver function
Discussion
Listening for Storage Changes
Problem
Solution
Discussion
Finding All Known Keys
Problem
Solution
Discussion
Removing Data
Problem
Solution
Discussion
3. URLs and Routing
Introduction
Parts of a URL
Resolving a Relative URL
Problem
Solution
Discussion
Removing Query Parameters From a URL
Problem
Solution
Discussion
Adding Query Parameters to a URL
Problem
Solution
Discussion
Reading Query Parameters
Problem
Solution
Discussion
Creating a Simple Client-Side Router
Problem
Solution
Discussion
Matching URLs to Patterns
Problem
Solution
Discussion
4. Network Requests
Introduction
Sending a Request with XMLHttpRequest
Problem
Solution
Discussion
Sending a GET Request with the Fetch API
Problem
Solution
Discussion
Sending a POST Request with the Fetch API
Problem
Solution
Discussion
Uploading a File with the Fetch API
Problem
Solution
Discussion
Sending a Beacon
Problem
Solution
Discussion
Listening for Remote Events with Server-Sent Events
Problem
Solution
Discussion
Exchanging Data in Real Time with WebSockets
Problem
Solution
Discussion
5. IndexedDB
Introduction
Object Stores and Indexes
Keys
Transactions
Requests
Creating, Reading, and Deleting Objects in a Database
Problem
Solution
Discussion
Upgrading an Existing Database
Problem
Solution
Discussion
Querying with Indexes
Problem
Solution
Discussion
Searching for String Values with Cursors
Problem
Solution
Discussion
Paginating a Large Data Set
Problem
Solution
Discussion
Using Promises with the IndexedDB API
Problem
Solution
Discussion
6. Observing DOM Elements
Introduction
MutationObserver
ResizeObserver
IntersectionObserver
Lazy Loading an Image When Scrolled into View
Problem
Solution
Discussion
Wrapping IntersectionObserver with a Promise
Problem
Solution
Discussion
Automatically Pause and Play a Video
Problem
Solution
Discussion
Animating Changes in Height
Problem
Solution
Discussion
Change an Element’s Content Based on Size
Problem
Solution
Discussion
Applying a Transition When an Element Scrolls into View
Problem
Solution
Discussion
Using Infinite Scrolling
Problem
Solution
Discussion
7. Forms
Introduction
FormData
Validation
Populating a Form Field from Local Storage
Problem
Solution
Discussion
Submitting a Form with Fetch and the FormData API
Problem
Solution
Discussion
Submitting a Form as JSON
Problem
Solution
Discussion
Making a Form Field Required
Problem
Solution
Discussion
Constraining a Number Input
Problem
Solution
Discussion
Specifying a Validation Pattern
Problem
Solution
Discussion
Validating Forms
Problem
Solution
Discussion
Using Custom Validation Logic
Problem
Solution
Discussion
Validating a Checkbox Group
Problem
Solution
Discussion
Validating a Field Asynchronously
Problem
Solution
Discussion
8. The Web Animations API
Introduction
Keyframe-Based Animation
Keyframe Animation with JavaScript
Animation Objects
Applying a “Ripple” Effect on Click
Problem
Solution
Discussion
Starting and Stopping Animations
Problem
Solution
Discussion
Animating DOM Insertion and Removal
Problem
Solution
Discussion
Reversing Animations
Problem
Solution
Discussion
Showing a Scroll Progress Indicator
Problem
Solution
Discussion
Making an Element Bounce
Problem
Solution
Discussion
Running Multiple Animations Simultaneously
Problem
Solution
Discussion
Showing a Loading Animation
Problem
Solution
Discussion
Respecting the User’s Animation Preference
Problem
Solution
Discussion
9. The Web Speech API
Introduction
Speech Recognition
Speech Synthesis
Browser Support
Adding Dictation to a Text Field
Problem
Solution
Discussion
Creating a Promise Helper for Speech Recognition
Problem
Solution
Discussion
Getting the Available Voices
Problem
Solution
Discussion
Synthesizing Speech
Problem
Solution
Discussion
Customizing Speech Synthesis Parameters
Problem
Solution
Discussion
Automatically Pausing Speech
Problem
Solution
Discussion
10. Working with Files
Introduction
Loading Text from a File
Problem
Solution
Discussion
Loading an Image as a Data URL
Problem
Solution
Discussion
Loading a Video as an Object URL
Problem
Solution
Discussion
Loading an Image with Drag and Drop
Problem
Solution
Discussion
Checking and Requesting Permissions
Problem
Solution
Discussion
Exporting API Data to a File
Problem
Solution
Discussion
Exporting API Data with a Download Link
Problem
Solution
Discussion
Uploading a File with Drag and Drop
Problem
Solution
Discussion
11. Internationalization
Introduction
Formatting a Date
Problem
Solution
Discussion
Getting the Parts of a Formatted Date
Problem
Solution
Discussion
Formatting a Relative Date
Problem
Solution
Discussion
Formatting Numbers
Problem
Solution
Discussion
Rounding Decimal Places
Problem
Solution
Formatting a Price Range
Problem
Solution
Discussion
Formatting Measurement Units
Problem
Solution
Discussion
Applying Pluralization Rules
Problem
Solution
Discussion
Counting Characters, Words, and Sentences
Problem
Solution
Discussion
Formatting Lists
Problem
Solution
Discussion
Sorting an Array of Names
Problem
Solution
Discussion
12. Web Components
Introduction
Creating a Component
Registering a Custom Element
Templates
Slots
Shadow DOM
Light DOM
Creating a Component to Show Today’s Date
Problem
Solution
Discussion
Creating a Component to Format a Custom Date
Problem
Solution
Discussion
Creating a Feedback Component
Problem
Solution
Discussion
Creating a Profile Card Component
Problem
Solution
Discussion
Creating a Lazy Loading Image Component
Problem
Solution
Discussion
Creating a Disclosure Component
Problem
Solution
Discussion
Creating a Styled Button Component
Problem
Solution
Discussion
13. UI Elements
Introduction
Dialogs
Details
Popovers
Notifications
Creating an Alert Dialog
Problem
Solution
Discussion
Creating a Confirmation Dialog
Problem
Solution
Discussion
Creating a Confirmation Dialog Web Component
Problem
Solution
Discussion
Using a Disclosure Element
Problem
Solution
Discussion
Showing a Popover
Problem
Solution
Discussion
Manually Controlling a Popover
Problem
Solution
Discussion
Positioning a Popover Relative to an Element
Problem
Solution
Discussion
Showing a Tooltip
Problem
Solution
Discussion
Showing a Notification
Problem
Solution
Discussion
14. Device Integration
Introduction
Reading the Battery Status
Problem
Solution
Discussion
Reading the Network Status
Problem
Solution
Discussion
Getting the Device Location
Problem
Solution
Discussion
Showing the Device Location on a Map
Problem
Solution
Discussion
Copying and Pasting Text
Problem
Solution
Discussion
Sharing Content with the Web Share API
Problem
Solution
Discussion
Making the Device Vibrate
Problem
Solution
Discussion
Getting the Device Orientation
Problem
Solution
Discussion
15. Measuring Performance
Introduction
Measuring Page Load Performance
Problem
Solution
Discussion
Measuring Resource Performance
Problem
Solution
Discussion
Finding the Slowest Resources
Problem
Solution
Discussion
Finding Timings for a Specific Resource
Problem
Solution
Discussion
Profiling Rendering Performance
Problem
Solution
Discussion
Profiling Multistep Tasks
Problem
Solution
Discussion
Listening for Performance Entries
Problem
Solution
Discussion
16. Working with the Console
Introduction
Styling Console Output
Problem
Solution
Discussion
Using Log Levels
Problem
Solution
Discussion
Creating Named Loggers
Problem
Solution
Discussion
Displaying an Array of Objects in a Table
Problem
Solution
Discussion
Using Console Timers
Problem
Solution
Discussion
Using Console Groups
Problem
Solution
Discussion
Using Counters
Problem
Solution
Discussion
Logging a Variable and Its Value
Problem
Solution
Discussion
Logging a Stack Trace
Problem
Solution
Discussion
Validating Expected Values
Problem
Solution
Discussion
Examining an Object’s Properties
Problem
Solution
Discussion
17. CSS
Introduction
Highlighting Text Ranges
Problem
Solution
Discussion
Preventing a Flash of Unstyled Text
Problem
Solution
Discussion
Animating DOM Transitions
Problem
Solution
Discussion
Modifying Stylesheets at Runtime
Problem
Solution
Discussion
Conditionally Setting a CSS Class
Problem
Solution
Discussion
Matching Media Queries
Problem
Solution
Discussion
Getting an Element’s Computed Style
Problem
Solution
Discussion
18. Media
Introduction
Recording the Screen
Problem
Solution
Discussion
Capturing an Image from the User’s Camera
Problem
Solution
Discussion
Capturing a Video from the User’s Camera
Problem
Solution
Discussion
Determining the System Media Capabilities
Problem
Solution
Discussion
Applying Video Filters
Problem
Solution
Discussion
19. Closing Thoughts
Introduction
In Defense of Third-Party Libraries
Detect Features, Not Browser Versions
Polyfills
Looking Ahead to the Future
Web Bluetooth API
Web NFC API
EyeDropper API
Barcode Detection API
Cookie Store API
Payment APIs
Finding What’s Next
Index