book

Web API Cookbook

by Joe Attardi

March 2024

Intermediate to advanced

286 pages

5h 28m

English

O'Reilly Media, Inc.

Read now

Unlock full access

The Power of Modern BrowsersDrawbacks of Third-Party LibrariesWho This Book Is ForWhat’s in This BookAdditional ResourcesCanIUse.comMDN Web DocsSpecificationsConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
IntroductionCallback FunctionsEventsPromisesWorking with PromisesProblemSolutionDiscussionLoading an Image with a FallbackProblemSolutionDiscussionChaining PromisesProblemSolutionDiscussionUsing the async and await KeywordsProblemSolutionDiscussionUsing Promises in ParallelProblemSolutionDiscussionAnimating an Element with requestAnimationFrameProblemSolutionDiscussionWrapping an Event API in a PromiseProblemSolutionDiscussion
IntroductionGetting and Setting ItemsDisadvantagesChecking for Web Storage SupportProblemSolutionDiscussionPersisting String DataProblemSolutionDiscussionPersisting Simple ObjectsProblemSolutionDiscussionPersisting Complex ObjectsProblemSolutionDiscussionListening for Storage ChangesProblemSolutionDiscussionFinding All Known KeysProblemSolutionDiscussionRemoving DataProblemSolutionDiscussion
IntroductionParts of a URLResolving a Relative URLProblemSolutionDiscussionRemoving Query Parameters From a URLProblemSolutionDiscussionAdding Query Parameters to a URLProblemSolutionDiscussionReading Query ParametersProblemSolutionDiscussionCreating a Simple Client-Side RouterProblemSolutionDiscussionMatching URLs to PatternsProblemSolutionDiscussion
IntroductionSending a Request with XMLHttpRequestProblemSolutionDiscussionSending a GET Request with the Fetch APIProblemSolutionDiscussionSending a POST Request with the Fetch APIProblemSolutionDiscussionUploading a File with the Fetch APIProblemSolutionDiscussionSending a BeaconProblemSolutionDiscussionListening for Remote Events with Server-Sent EventsProblemSolutionDiscussionExchanging Data in Real Time with WebSocketsProblemSolutionDiscussion
IntroductionObject Stores and IndexesKeysTransactionsRequestsCreating, Reading, and Deleting Objects in a DatabaseProblemSolutionDiscussionUpgrading an Existing DatabaseProblemSolutionDiscussionQuerying with IndexesProblemSolutionDiscussionSearching for String Values with CursorsProblemSolutionDiscussionPaginating a Large Data SetProblemSolutionDiscussionUsing Promises with the IndexedDB APIProblemSolutionDiscussion
IntroductionMutationObserverResizeObserverIntersectionObserverLazy Loading an Image When Scrolled into ViewProblemSolutionDiscussionWrapping IntersectionObserver with a PromiseProblemSolutionDiscussionAutomatically Pause and Play a VideoProblemSolutionDiscussionAnimating Changes in HeightProblemSolutionDiscussionChange an Element’s Content Based on SizeProblemSolutionDiscussionApplying a Transition When an Element Scrolls into ViewProblemSolutionDiscussionUsing Infinite ScrollingProblemSolutionDiscussion
IntroductionFormDataValidationPopulating a Form Field from Local StorageProblemSolutionDiscussionSubmitting a Form with Fetch and the FormData APIProblemSolutionDiscussionSubmitting a Form as JSONProblemSolutionDiscussionMaking a Form Field RequiredProblemSolutionDiscussionConstraining a Number InputProblemSolutionDiscussionSpecifying a Validation PatternProblemSolutionDiscussionValidating FormsProblemSolutionDiscussionUsing Custom Validation LogicProblemSolutionDiscussionValidating a Checkbox GroupProblemSolutionDiscussionValidating a Field AsynchronouslyProblemSolutionDiscussion
IntroductionKeyframe-Based AnimationKeyframe Animation with JavaScriptAnimation ObjectsApplying a “Ripple” Effect on ClickProblemSolutionDiscussionStarting and Stopping AnimationsProblemSolutionDiscussionAnimating DOM Insertion and RemovalProblemSolutionDiscussionReversing AnimationsProblemSolutionDiscussionShowing a Scroll Progress IndicatorProblemSolutionDiscussionMaking an Element BounceProblemSolutionDiscussionRunning Multiple Animations SimultaneouslyProblemSolutionDiscussionShowing a Loading AnimationProblemSolutionDiscussionRespecting the User’s Animation PreferenceProblemSolutionDiscussion
IntroductionSpeech RecognitionSpeech SynthesisBrowser SupportAdding Dictation to a Text FieldProblemSolutionDiscussionCreating a Promise Helper for Speech RecognitionProblemSolutionDiscussionGetting the Available VoicesProblemSolutionDiscussionSynthesizing SpeechProblemSolutionDiscussionCustomizing Speech Synthesis ParametersProblemSolutionDiscussionAutomatically Pausing SpeechProblemSolutionDiscussion

IntroductionLoading Text from a FileProblemSolutionDiscussionLoading an Image as a Data URLProblemSolutionDiscussionLoading a Video as an Object URLProblemSolutionDiscussionLoading an Image with Drag and DropProblemSolutionDiscussionChecking and Requesting PermissionsProblemSolutionDiscussionExporting API Data to a FileProblemSolutionDiscussionExporting API Data with a Download LinkProblemSolutionDiscussionUploading a File with Drag and DropProblemSolutionDiscussion
IntroductionFormatting a DateProblemSolutionDiscussionGetting the Parts of a Formatted DateProblemSolutionDiscussionFormatting a Relative DateProblemSolutionDiscussionFormatting NumbersProblemSolutionDiscussionRounding Decimal PlacesProblemSolutionFormatting a Price RangeProblemSolutionDiscussionFormatting Measurement UnitsProblemSolutionDiscussionApplying Pluralization RulesProblemSolutionDiscussionCounting Characters, Words, and SentencesProblemSolutionDiscussionFormatting ListsProblemSolutionDiscussionSorting an Array of NamesProblemSolutionDiscussion
IntroductionCreating a ComponentRegistering a Custom ElementTemplatesSlotsShadow DOMLight DOMCreating a Component to Show Today’s DateProblemSolutionDiscussionCreating a Component to Format a Custom DateProblemSolutionDiscussionCreating a Feedback ComponentProblemSolutionDiscussionCreating a Profile Card ComponentProblemSolutionDiscussionCreating a Lazy Loading Image ComponentProblemSolutionDiscussionCreating a Disclosure ComponentProblemSolutionDiscussionCreating a Styled Button ComponentProblemSolutionDiscussion
IntroductionDialogsDetailsPopoversNotificationsCreating an Alert DialogProblemSolutionDiscussionCreating a Confirmation DialogProblemSolutionDiscussionCreating a Confirmation Dialog Web ComponentProblemSolutionDiscussionUsing a Disclosure ElementProblemSolutionDiscussionShowing a PopoverProblemSolutionDiscussionManually Controlling a PopoverProblemSolutionDiscussionPositioning a Popover Relative to an ElementProblemSolutionDiscussionShowing a TooltipProblemSolutionDiscussionShowing a NotificationProblemSolutionDiscussion
IntroductionReading the Battery StatusProblemSolutionDiscussionReading the Network StatusProblemSolutionDiscussionGetting the Device LocationProblemSolutionDiscussionShowing the Device Location on a MapProblemSolutionDiscussionCopying and Pasting TextProblemSolutionDiscussionSharing Content with the Web Share APIProblemSolutionDiscussionMaking the Device VibrateProblemSolutionDiscussionGetting the Device OrientationProblemSolutionDiscussion
IntroductionMeasuring Page Load PerformanceProblemSolutionDiscussionMeasuring Resource PerformanceProblemSolutionDiscussionFinding the Slowest ResourcesProblemSolutionDiscussionFinding Timings for a Specific ResourceProblemSolutionDiscussionProfiling Rendering PerformanceProblemSolutionDiscussionProfiling Multistep TasksProblemSolutionDiscussionListening for Performance EntriesProblemSolutionDiscussion
IntroductionStyling Console OutputProblemSolutionDiscussionUsing Log LevelsProblemSolutionDiscussionCreating Named LoggersProblemSolutionDiscussionDisplaying an Array of Objects in a TableProblemSolutionDiscussionUsing Console TimersProblemSolutionDiscussionUsing Console GroupsProblemSolutionDiscussionUsing CountersProblemSolutionDiscussionLogging a Variable and Its ValueProblemSolutionDiscussionLogging a Stack TraceProblemSolutionDiscussionValidating Expected ValuesProblemSolutionDiscussionExamining an Object’s PropertiesProblemSolutionDiscussion
IntroductionHighlighting Text RangesProblemSolutionDiscussionPreventing a Flash of Unstyled TextProblemSolutionDiscussionAnimating DOM TransitionsProblemSolutionDiscussionModifying Stylesheets at RuntimeProblemSolutionDiscussionConditionally Setting a CSS ClassProblemSolutionDiscussionMatching Media QueriesProblemSolutionDiscussionGetting an Element’s Computed StyleProblemSolutionDiscussion
IntroductionRecording the ScreenProblemSolutionDiscussionCapturing an Image from the User’s CameraProblemSolutionDiscussionCapturing a Video from the User’s CameraProblemSolutionDiscussionDetermining the System Media CapabilitiesProblemSolutionDiscussionApplying Video FiltersProblemSolutionDiscussion
IntroductionIn Defense of Third-Party LibrariesDetect Features, Not Browser VersionsPolyfillsLooking Ahead to the FutureWeb Bluetooth APIWeb NFC APIEyeDropper APIBarcode Detection APICookie Store APIPayment APIsFinding What’s Next

Overview

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