Letter Formation Animator – Online Watch Handwrite Letters
Click a letter and watch an animated stroke order for print or cursive. Good for kids learning to write.
UD5 Toolkit
Click a letter and watch an animated stroke order for print or cursive. Good for kids learning to write.
Click to see a random dog breed with key facts (size, energy, lifespan). Built-in breed database. Fun way to explore dog breeds. Local only.
Place multiple grid items into the same cells to create overlapping layouts. Learn the technique visually. Copy code.
Use trigonometric functions in CSS to create circular animations and layouts without JavaScript. See the code.
Experiment with exponential, square root, and hypotenuse functions in CSS. See live computed values. Modern CSS math.
Use the abs() and sign() CSS functions to create interesting layouts. See computed values live. Cutting‑edge CSS.
Use anchor positioning to perfectly center a popover relative to its anchor. No JavaScript. See the modern approach.
Explore the new two‑value display syntax like `display: block flex`. See what each inner/outer pair does visually.
Test how fast you can convert between binary and decimal. Timed drills with increasing difficulty. Learn base‑2 fluency.
Randomly generated subnetting questions. Calculate network address, broadcast, and usable range. For CCNA prep.
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHED…) and see the animated transitions. Networking education.
Write a simple assembly program and see the pass‑1 and pass‑2 symbol tables and object code. Systems programming helper.
Set up resources and processes and run the Banker's algorithm to check for safe states. Classic OS deadlock avoidance demo.
Simulate memory page reference strings with FIFO, LRU, and Optimal algorithms. See page fault count. OS concept demo.
Enter processes and see how different scheduling algorithms handle them. Gantt chart generation. OS course helper.
Enter a simple regular expression and see its equivalent Deterministic Finite Automaton diagram. Learn how regex engines work.
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
Plot different Big‑O complexities on a chart. See how O(log n) stays flat while O(2^n) explodes. Educational reference.
Enter a decimal number and see a visual breakdown of bits, place values, and bitwise operations. Learn binary easily.
Write a Python range expression and instantly see the list of numbers it produces. Quick playground for beginners.
Control image‑orientation: from-image vs none. See how the browser interprets EXIF rotation. Fix portrait photos.
Set up multiple @layers and use revert‑layer to fall back. See the computed style and cascade resolution live.
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.
Paste two texts and see cosine and Jaccard similarity scores. Understand how close two documents are. All local math.
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.
Enter a password and see the estimated time it would take to crack using brute force at different speeds. Educational.
Test SQL injection inputs on a mock database and see the resulting query. Learn how to prevent SQLi. No real data.
Paste a potential XSS vector and see if it executes in a sandboxed iframe. For security researchers and education.
Enter two hex colors and compute the CIE76, CIE94, and CIEDE2000 color difference. Understand how humans perceive color similarity.
A textarea that expands in height as you type. See the implementation and copy the code. No library needed.
Create errors with the cause option and see chained error objects. Learn error wrapping for better debugging.
Practice positive/negative lookahead and lookbehind. See matches highlighted live. Master advanced regex.
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.
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
Browse the OKLCH color space with sliders for lightness, chroma, and hue. See the CSS oklch() code. Modern and accessible.
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
Test regular expressions with Unicode property escapes like \p{Emoji}. See matches live. Modern regex power.
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.
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
Create a Blob from text or a file and generate a temporary URL for it. Understand the Blob API. Dev demo.
Sign a message with a private key and verify the signature with the public key. Learn digital signature flow.
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
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.
Watch a simulation of how the JavaScript event loop handles synchronous code, microtasks, and macrotasks. Learn async.
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
Start a fetch request and cancel it with AbortController. See how to implement request cancellation. Interactive.
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
Rotate and explore the RGB color space as a 3D cube. Pick colors directly from the volume. Interactive Three.js.