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.
UD5 Toolkit
Split a secret string into N shares where K are needed to recover. Educational cryptography demo. Uses simple XOR-based scheme. Local.
Place multiple grid items into the same cells to create overlapping layouts. Learn the technique visually. Copy code.
Use anchor positioning to perfectly center a popover relative to its anchor. No JavaScript. See the modern approach.
Test your device's built‑in biometric (Touch ID, Face ID, Windows Hello) using the Web Authentication API. Register and verify.
Control image‑orientation: from-image vs none. See how the browser interprets EXIF rotation. Fix portrait photos.
Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.
Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.
Use the new `commandfor` and `command` attributes to invoke actions on other elements without JavaScript. See the spec live.
Test the upcoming <selectlist> element for a fully customizable, stylable select dropdown. Experimental browser feature.
Use the CSS Custom Highlight API to style arbitrary text ranges without modifying the DOM. See the future of find‑in‑page.
Experiment with scroll‑state container queries to style elements when they are stuck, snapped, or overflowed. Experimental.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Test how `content‑type: text/html` vs `content‑type: image/svg+xml` affects SVG rendering in the browser. Modern performance hint.
See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.
Hover over tiles to see every CSS cursor value in action. Quick visual reference for choosing the right UI feedback.
See how a PWA can extend content into the title bar area on desktop. Customize the window controls overlay.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
A textarea that expands in height as you type. See the implementation and copy the code. No library needed.
Send a test CSP violation report and see the ReportingObserver in action. Understand how monitoring works.
Use the document.fonts API to check if a font is loaded. Watch the ready promise. Avoid FOUT. JavaScript demo.
Set up a Shared Worker that shares state across multiple browser tabs. Counter and messaging demo. Advanced web.
See how WeakMap and WeakSet work. Add objects as keys and watch references. Understand memory‑efficient collections.
Create and dispatch custom events with detail. Listen on other elements. Understand pub/sub pattern in vanilla JS.
Select text and see the Selection object properties. Create ranges programmatically. Understand how rich‑text editors work.
Overlay colored blocks and images and apply all mix‑blend‑mode values. Understand how each mode works live.
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.
Process audio faster than real‑time with OfflineAudioContext. Apply filters and export the result. Dev tool.
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
Write a module and import it. See how browser handles module scripts. Learn modern JS structure.
Reset native styling on form elements with appearance: none. See before and after. Essential for custom forms.
Change the text input cursor color. See the effect live. Copy the minimal CSS. Simple but delightful.
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
Implement a dark/light theme toggle that respects prefers‑color‑scheme. Copy the complete JavaScript and CSS.
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
See how Trusted Types prevents unsafe HTML assignment. Test against injected scripts. Modern security practice.
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
Press Ctrl+V to paste an image from your clipboard into the page. See dimensions and download. Simple utility.
Use the <template> tag to hold hidden HTML that is cloned and injected by JavaScript. Common pattern.
Create a custom element with named slots and see content projection in action. Learn Web Components basics.
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
Request notification permission and create a push subscription. See the subscription object. Learn how web push works.
Demonstrate how to add custom headers and POST‑like functionality to EventSource using a polyfill. Code and example.
Place two containers side by side to see how inline‑flex differs from flex. Understand block vs inline formatting.
Scroll a container and see how sticky elements behave. Adjust top, bottom, and scroll margins. Copy the code.
Compare visibility: hidden vs display: none. See how each affects layout and event listeners. Inline code.
See how overflow: visible, hidden, scroll, and auto behave with real content. Clone to test with your text.
Make an element resizable horizontally, vertically, or both. See the handle and code. Useful for textareas.
Set the inset property and see its logical shorthand equivalents. Copy the modern CSS for absolutely positioned elements.
Try all object‑fit values (fill, contain, cover, scale‑down) on an image. Adjust object‑position. Copy the CSS.
See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.
Place a table caption on top, bottom, or inline‑start/end. See the live change. Copy the code.
Toggle between show and hide for empty table cells. Understand how it affects borders and backgrounds.
Set tab‑size to any number and see how tabs are displayed in a pre element. Essential for code snippets.
Toggle between normal, nowrap, pre, pre‑wrap, and pre‑line to understand how whitespace is handled. Live text example.
See how to implement file upload progress using both fetch and XHR. Real‑time bar and code snippets for your project.
See the difference between :focus and :focus‑visible on interactive elements. Learn which to use for better UX.