Web API Cookbook

Web API Cookbook

by Joe Attardi
Released March 2024
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781098150693

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

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 library
  • Build more powerful and interactive web applications using native APIs
  • Understand the permissions model used by the browser to unlock functionality such as geolocation and push notifications

Publisher resources

View/Submit Errata

Table of contents

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

Product information

  • Title: Web API Cookbook
  • Author(s): Joe Attardi
  • Release date: March 2024
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781098150693