Tag: Chemistry Demonstration Videos

CSS tab‑size Property Demo - Online Control Indentation

Set tab‑size to any number and see how tabs are displayed in a pre element. Essential for code snippets.

Developer Tools CSS demo indentation tab‑size

CSS Cursor Demo - 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

size‑container Demo - Online Intrinsic & Styled Queries

Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.

Developer Tools container queries CSS demo size‑container

CSS appearance Property Demo - Online Reset Native Styles

Reset native styling on form elements with appearance: none. See before and after. Essential for custom forms.

Developer Tools appearance CSS demo native

caret‑color CSS Demo - Online Colorful Text Cursors

Change the text input cursor color. See the effect live. Copy the minimal CSS. Simple but delightful.

Developer Tools caret‑color CSS cursor demo

commandfor & command Attribute Demo - Online Declarative Actions

Use the new `commandfor` and `command` attributes to invoke actions on other elements without JavaScript. See the spec live.

Developer Tools commandfor declarative demo HTML

animation‑composition Demo - Online Blend Multiple Animations

See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.

Developer Tools animation composition CSS demo

Font Loading API Demo - Online Wait for Fonts Ready

Use the document.fonts API to check if a font is loaded. Watch the ready promise. Avoid FOUT. JavaScript demo.

Developer Tools API demo document.fonts Font Loading

Trusted Types API Demo - Online Prevent XSS

See how Trusted Types prevents unsafe HTML assignment. Test against injected scripts. Modern security practice.

Developer Tools demo security Trusted Types XSS

flex vs inline‑flex Demo - Online Container Behavior

Place two containers side by side to see how inline‑flex differs from flex. Understand block vs inline formatting.

Developer Tools CSS demo flex inline‑flex

Fetch Upload Progress Demo - Online Track XHR & Fetch

See how to implement file upload progress using both fetch and XHR. Real‑time bar and code snippets for your project.

Developer Tools demo fetch progress upload

CSS Anchor Positioning Demo - Online Popover to Anchor

Position a popover relative to its anchor element with the new CSS anchor positioning. Adjust and copy the code.

Developer Tools anchor positioning CSS demo popover

Content Indexing API Demo - Online Show in System Launcher

Add web content to the device’s content index (like Google Discover). See the indexed items and delete them.

Developer Tools Content Indexing demo offline PWA

Custom Highlight API Demo - Online Highlight Text Programmatically

Use the CSS Custom Highlight API to style arbitrary text ranges without modifying the DOM. See the future of find‑in‑page.

Developer Tools CSS Custom Highlight API demo highlight

Selection & Range API Demo - Online Get/Set Selection

Select text and see the Selection object properties. Create ranges programmatically. Understand how rich‑text editors work.

Developer Tools API demo Range Selection

Element Blend Mode Tester - Online See mix-blend-mode

Overlay colored blocks and images and apply all mix‑blend‑mode values. Understand how each mode works live.

Design CSS demo mix-blend-mode overlay

CSS inset Property Demo - Online Shorthand for Top/Right/Bottom/Left

Set the inset property and see its logical shorthand equivalents. Copy the modern CSS for absolutely positioned elements.

Developer Tools CSS demo inset shorthand

caption‑side CSS Property Demo - Online Table Caption Position

Place a table caption on top, bottom, or inline‑start/end. See the live change. Copy the code.

Developer Tools caption‑side CSS demo table

empty‑cells CSS Property Demo - Online Table Visibility

Toggle between show and hide for empty table cells. Understand how it affects borders and backgrounds.

Developer Tools CSS demo empty‑cells table

Web Worker Heavy Task Demo - Online Non‑Blocking

Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.

Developer Tools demo non‑blocking performance Web Worker

Shamir's Secret Sharing Demo - Online Split & Recover Secret

Split a secret string into N shares where K are needed to recover. Educational cryptography demo. Uses simple XOR-based scheme. Local.

Demo demo secret sharing Shamir

Dialog Focus Manager Demo - Online A11y Trap & Restore

Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.

Accessibility a11y demo dialog focus trap

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

Auto‑Resize Textarea Demo - Online Grow with Content

A textarea that expands in height as you type. See the implementation and copy the code. No library needed.

Developer Tools auto‑resize demo JavaScript textarea

CSS Grid Named Lines Demo - Online Complex Layouts

Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.

Developer Tools CSS Grid demo layout named lines

Clipboard Image Paste Demo - Online Ctrl+V to Preview

Press Ctrl+V to paste an image from your clipboard into the page. See dimensions and download. Simple utility.

Developer Tools clipboard demo image paste

<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

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

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

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

: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

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

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

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