Tag: Chemistry Demonstration Videos

0

Screen Recording Countdown Timer – On‑Screen Overlay

A minimalist countdown timer that overlays on your screen while recording tutorials or demos. Perfect for keeping videos concise without editing.

Productivity countdown demo overlay screen recording timer

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

<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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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