fetch
Testing the compatibility and stability of the Fetch API when using different Node.js versions
Fetch API
fetch()
Using the JavaScript PerformanceMeasure interface of the Performance API to track and measure the timing of fetch operations.
PerformanceMeasure
Performance API
Using the HTML <template> content template element and Shadow DOM for creating isolated and modular user profile component.
<template>
Shadow DOM
Using the JavaScript CSSStyleSheet interface of the CSSOM API to dynamically manipulate CSS rules for interactive use cases.
CSSStyleSheet
CSSOM API
Using the JavaScript Gamepad API to display real-time connection status and button states of game controllers.
Gamepad API
Using the JavaScript WheelEvent Browser API interface to detect mouse wheel and trackpad events.
WheelEvent
Using the experimental JavaScript EyeDropper native browser API to pick colors from the screen including outside of the browser window.
EyeDropper
Using the FileList interface to display information about a list of files selected with the input of type="file" HTML element.
FileList
input
type="file"
Using the experimental AmbientLightSensor interface of the Sensor APIs to measure the light intensity around the device's camera.
AmbientLightSensor
Sensor APIs
DataTransfer
Using the HTML Drag and Drop API to copy and move elements with DataTransfer in JavaScript
HTML Drag and Drop API
Using the CSS Painting API to access CSS custom properties and make checkerboard patterns with JavaScript.
CSS Painting API
Using the Channel Messaging API to make a communication (Cross-window communication) between iframe and its parent app.
Using Chrome's experimental Face Detection API to dynamically detect and highlight faces in images with JavaScript.
Using enterpictureinpicture and leavepictureinpicture events to toggle Picture-in-Picture mode in videos with JavaScript.
enterpictureinpicture
leavepictureinpicture
JSON.parse()
Using JSON.parse() second parameter (reviver) to selectively alter JSON content.
Using useBattery hook and the native Battery Status API for tracking and displaying battery levels in React applications.
useBattery
Battery Status API
Using the Screen Capture API to make a browser based screen Recorder via JavaScript.
Screen Capture API
updateTiming
Using the JavaScript updateTiming method of the AnimationEffect interface to set multiple CSS animations to loop infinitely.
AnimationEffect
Using animationstart and animationend events in JavaScript to capture the start and end of a CSS animation's lifecycle.
animationstart
animationend
start
end
Play and Pause a video based on its visibility in the viewport.
Using the Browser File System Access API to read and write to files via JavaScript
GSAP
Animating text with a gradient during scrolling by creating an interactive scroll animation using GSAP's ScrollTrigger and CSS's mix-blend-mode.
ScrollTrigger
mix-blend-mode
|>
Using the JavaScript Pipeline Operator |> to pipe the value of an expression into a function.
Using Intl.PluralRules to create English ordinal number suffixes (st, nd, rd, th) for numbers.
Intl.PluralRules
Using the JS Keyboard Event getModifierState to toggle the element's class on and display ON or OFF text depending on the Caps Lock state.
getModifierState
ON
OFF
Using the Page Visibility API's visibilityChange event to pause the video when the browser tab is inactive and play it when active.
visibilityChange
Using importmap in <script> HTML tag to enable native module importing.
importmap
<script>
Using the JS visibilitychange event listener to change the favicon when switching browser tabs.
visibilitychange
insertAdjacentHTML
Using insertAdjacentHTML to insert Nodes in the DOM at Specified Positions.
Using dateInput.showPicker() to programmatically open the native browser picker of the date form control.
dateInput.showPicker()
date
||=
Using JavaScript ||= symbol for Logical OR Assignment, showing how to assign values conditionally in code.
#
Using JavaScript # symbol to define private class fields.