Tag: Chemistry Demonstration Videos

77

Elephant Toothpaste Demo Calculator - Online Reaction Ratios

Find safe mixing ratios for the classic elephant toothpaste demonstration. Volume adjustments for different container sizes.

Calculator chemistry demo elephant toothpaste ratio

74

Fullscreen API Tester - Online Request & Exit Demo

Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.

API demo Fullscreen API JavaScript test

63

Web Locks API Demo - Online Resource Coordination

Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.

API API concurrency demo Web Locks

60

Permissions Query API Demo - Online Check All APIs

Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.

API API demo Permissions query

58

View Transitions API Demo - Online Smooth Page Switch

See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.

Developer Tools animation API demo View Transitions

57

Launch Handler API Demo - Online Control App Launch Behavior

Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.

Developer Tools API demo Launch Handler PWA

57

UI Animation Timing Demo - Online Easing Presets

Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.

Design animation demo easing UI

56

Periodic Background Sync Demo - Online PWA Feature

Register a periodic background sync to fetch fresh data even when the tab is closed. Understand the API and limits.

Developer Tools background demo Periodic Sync PWA

55

CSS Scroll Snap Demo - Online Carousel & Gallery

Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.

Design carousel CSS demo scroll snap

54

position: sticky Playground - Online Sticky Headers & Footers

Scroll a container and see how sticky elements behave. Adjust top, bottom, and scroll margins. Copy the code.

Developer Tools CSS demo header position sticky

54

Built-in Translation API Demo - Online On‑Device Translate

Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.

AI API Chrome demo Translation

52

OfflineAudioContext Demo - Online Render Audio Fast

Process audio faster than real‑time with OfflineAudioContext. Apply filters and export the result. Dev tool.

Developer Tools demo OfflineAudioContext render Web Audio

52

scrollbar‑gutter Tester - Online Prevent Layout Shift

Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.

Developer Tools CSS demo layout shift scrollbar‑gutter

51

Drag & Drop File Upload Demo - Online With Preview

Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.

Developer Tools demo drag drop file upload

51

EventSource Polyfill Demo - Online See SSE with Custom Headers

Demonstrate how to add custom headers and POST‑like functionality to EventSource using a polyfill. Code and example.

Developer Tools demo EventSource polyfill SSE

51

scroll‑padding & scroll‑margin Demo - Online Anchor Position

See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.

Developer Tools CSS demo scroll‑margin scroll‑padding

51

Web Worker Image Filter - Online Heavy Processing Demo

Apply a convolution filter (blur, sharpen) using a Web Worker. See the UI stay responsive while processing. Learn multithreading in the browser.

Developer Tools demo filter image Web Worker

50

WebGPU Bunny Demo - Online Simple 3D Renderer

Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.

Developer Tools 3D demo render WebGPU

49

CSS Grid Overlap Demo - Online Layered Layout Techniques

Place multiple grid items into the same cells to create overlapping layouts. Learn the technique visually. Copy code.

Developer Tools CSS Grid demo layer overlap

48

image‑orientation CSS Demo - Online Fix Rotated Photos

Control image‑orientation: from-image vs none. See how the browser interprets EXIF rotation. Fix portrait photos.

Developer Tools CSS demo EXIF image orientation

48

CSS overflow Property Demo - Online Scroll & Clip Behavior

See how overflow: visible, hidden, scroll, and auto behave with real content. Clone to test with your text.

Developer Tools CSS demo overflow scroll

48

box‑decoration‑break Demo - Online Inline Box Fragmentation

See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.

Developer Tools box‑decoration‑break clone CSS demo

47

scroll‑state Container Query Demo - Online Test stuck/snapped

Experiment with scroll‑state container queries to style elements when they are stuck, snapped, or overflowed. Experimental.

Developer Tools container query CSS demo scroll state

47

CSS Cursor Playground - Online Preview All Pointer Styles

Hover over tiles to see every CSS cursor value in action. Quick visual reference for choosing the right UI feedback.

Developer Tools CSS cursor demo pointer reference

47

CSS Grid Baseline Alignment Demo - Online Typography Sync

See how align‑items: baseline works in grid to align different font sizes on the same baseline. Visual guide.

Developer Tools alignment baseline CSS Grid demo

46

object‑fit & object‑position Demo - Online Image Scale Control

Try all object‑fit values (fill, contain, cover, scale‑down) on an image. Adjust object‑position. Copy the CSS.

Developer Tools CSS demo image object‑fit

46

CSS Mask Parallax Demo - Online Scroll Reveal Effect

Use CSS masks and fixed backgrounds to create a unique parallax reveal effect. Copy the code. No JavaScript.

Design CSS mask demo parallax scroll

45

image‑rendering CSS Demo - Online Crisp or Smooth

Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.

Developer Tools CSS demo image‑rendering pixelated

45

Web Push Subscriber Demo - Online Test Notifications

Request notification permission and create a push subscription. See the subscription object. Learn how web push works.

Developer Tools demo notification subscribe Web Push

45

CSS resize Property Demo - Online User‑Resizable Element

Make an element resizable horizontally, vertically, or both. See the handle and code. Useful for textareas.

Developer Tools CSS demo resize textarea

45

CSS white‑space Property Demo - Online See Wrapping Behavior

Toggle between normal, nowrap, pre, pre‑wrap, and pre‑line to understand how whitespace is handled. Live text example.

Developer Tools CSS demo white‑space wrapping

45

:focus‑visible vs :focus Demo - Online Accessible Outlines

See the difference between :focus and :focus‑visible on interactive elements. Learn which to use for better UX.

Accessibility accessibility CSS demo focus‑visible

45

Roving Tabindex Keyboard Nav - Online Accessible List

See the roving tabindex pattern in action. Use arrow keys to navigate a list. Copy the accessible JavaScript pattern.

Accessibility a11y demo keyboard roving tabindex

44

Window Controls Overlay Demo - Online PWA Title Bar Customization

See how a PWA can extend content into the title bar area on desktop. Customize the window controls overlay.

Developer Tools demo PWA title bar Window Controls Overlay

44

ES Modules in Browser Demo - Online See Import/Export

Write a module and import it. See how browser handles module scripts. Learn modern JS structure.

Developer Tools demo ES modules export import

44

CSS Grid Auto Placement Demo - Online How Items Flow

See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.

Developer Tools auto-placement CSS Grid demo visual

44

overscroll‑behavior Tester - Online Prevent Pull‑to‑Refresh

Test overscroll‑behavior: contain to prevent background scroll or pull‑to‑refresh. See the effect in a live demo.

Developer Tools CSS demo overscroll‑behavior pull‑to‑refresh

43

CSS Anchor Positioning Center Demo - Online Pin to Parent

Use anchor positioning to perfectly center a popover relative to its anchor. No JavaScript. See the modern approach.

Developer Tools anchor positioning center CSS demo

43

WeakMap & WeakSet Demo - Online Garbage‑Collected Collections

See how WeakMap and WeakSet work. Add objects as keys and watch references. Understand memory‑efficient collections.

Developer Tools demo memory WeakMap WeakSet

43

Custom Event Dispatcher Demo - Online Send & Listen

Create and dispatch custom events with detail. Listen on other elements. Understand pub/sub pattern in vanilla JS.

Developer Tools CustomEvent demo dispatch JavaScript

43

CSS Smooth Scroll Demo - Online scroll‑behavior

Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.

Developer Tools CSS demo scroll‑behavior smooth

43

Auto‑Fill vs Auto‑Fit Visualizer - Online CSS Grid

Resize the container and see the difference between repeat(auto‑fill, …) and auto‑fit. Understand responsive grid behavior.

Developer Tools auto‑fill auto‑fit CSS Grid demo

43

Lazy Loading Demo - Online See Intersection Observer

Scroll down to see images load lazily. Code snippet provided. Learn how native loading='lazy' works.

Developer Tools demo Intersection Observer lazy load learn

42

overflow‑clip‑margin Demo - Online Visible Beyond Clip

Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.

Developer Tools clip margin CSS demo overflow

42

Reporting API Demo - Online See CSP & Deprecation Reports

Send a test CSP violation report and see the ReportingObserver in action. Understand how monitoring works.

Developer Tools CSP demo monitor Reporting API

42

Web Worker Fibonacci Demo - Online Non‑Blocking Calculation

Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.

Developer Tools demo non‑blocking performance Web Worker

42

prefers‑color‑scheme Live Preview - Online Dark/Light

Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.

Developer Tools CSS dark mode demo media query

42

HTML Input Type Playground - Online Test All Fields

See every HTML input type in one page. Check browser support and styling. Copy sample markup. Quick frontend reference.

Developer Tools demo form HTML input type

42

CSS Grid Implicit Tracks Tester - Online Auto‑Rows & Columns

Add grid items beyond defined tracks and see how implicit rows/columns expand. Set sizes interactively. Master the grid.

Developer Tools auto‑rows CSS Grid demo implicit tracks

41

Platform Authenticator Demo - Online Fingerprint & Face ID

Test your device's built‑in biometric (Touch ID, Face ID, Windows Hello) using the Web Authentication API. Register and verify.

API demo Face ID fingerprint WebAuthn

41

Shared Worker Demo - Online Cross‑Tab State

Set up a Shared Worker that shares state across multiple browser tabs. Counter and messaging demo. Advanced web.

API demo Shared Worker state tabs

41

Dark Mode Toggle Demo - Online Respect System Preference

Implement a dark/light theme toggle that respects prefers‑color‑scheme. Copy the complete JavaScript and CSS.

Design dark mode demo system toggle

41

isInputPending() API Demo - Online Yield to User

Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.

Developer Tools demo isInputPending performance yield

41

Web Component Slot Demo - Online Shadow DOM Playground

Create a custom element with named slots and see content projection in action. Learn Web Components basics.

Developer Tools demo shadow DOM slot Web Components

41

Reduced Motion Demo - Online Prefers‑Reduced‑Motion Switcher

Toggle between full and reduced motion on a live animated page. See how to design for vestibular disorders. Educational.

Accessibility a11y animation demo reduced motion

40

<selectlist> New HTML Element Demo - Online Rich Select

Test the upcoming <selectlist> element for a fully customizable, stylable select dropdown. Experimental browser feature.

Developer Tools demo HTML new selectlist

40

Rendering Intent Hint Demo - Online content‑type CSS

Test how `content‑type: text/html` vs `content‑type: image/svg+xml` affects SVG rendering in the browser. Modern performance hint.

Developer Tools CSS demo performance rendering intent

40

HTML Template Element Demo - Online Clone & Use

Use the <template> tag to hold hidden HTML that is cloned and injected by JavaScript. Common pattern.

Developer Tools clone demo HTML template

40

CSS visibility & display Demo - Online Show/Hide Effects

Compare visibility: hidden vs display: none. See how each affects layout and event listeners. Inline code.

Developer Tools CSS demo display visibility

40

<datalist> Autocomplete Tester - Online ComboBox Demo

See how <datalist> works across browsers. Test with many options. Copy the minimal markup. Simple native autocomplete.

Developer Tools autocomplete datalist demo HTML