Directory/Tools
// Tools
Small utilities, generators, and experiments — built for fun and daily use. Each tool runs entirely in your browser.
- Available
- 39
- Runtime
- client-side
-
Stock Chart Patterns
Interactive gallery of common technical-analysis chart patterns — head & shoulders, double tops, triangles, flags — drawn with neckline, breakout, and target annotations.
investing charts demo -
Vietlott Mega Draw
Random number generator for Vietlott 6/45 & 6/55 with animated draw experience.
random game phaser -
Workflow Canvas Demo
Interactive workflow editor with draggable HTML nodes and canvas bezier edges. Demo for HTML-in-Canvas blog post.
canvas workflow demo -
Placeholder & Skeleton Demo
Interactive demo of loading placeholders: spinner vs skeleton vs blur-up, the flash problem, and page-level loading islands.
ux loading demo -
Generators & yield Demo
Step through a generator with .next(), watch a lazy filter→map→take pipeline, and race a blocking loop against cooperative scheduling.
javascript generators demo -
Modern CSS Features Demo
Live examples of container queries, :has(), <dialog>, the Popover API, scroll-driven animations, and color-mix().
css web-platform demo -
Cookie Playground & Security Demo
Set, read, and delete cookies with real attributes, see why HttpOnly defeats XSS, compare storage, and explore SameSite/CSRF.
security cookies demo -
CORS Request Inspector
Configure a cross-origin request and see if it is simple or preflighted, the generated OPTIONS, required response headers, and what bypasses CORS.
cors http demo -
CORS Decision Flow
An html-in-canvas flowchart that lights up the path the browser takes to decide if your JS can read a response — READ, BLOCKED, or OPAQUE.
cors canvas demo
JavaScript Deep Dive · js_10
-
JavaScript Event Loop
Step through call stack, Web APIs, microtask vs macrotask queues, and console ordering — the production event-loop mental model.
javascript demo js_10 -
Closures, Scope & this
Lexical environments, closure counters, loop bugs, and binding rules — with live scope inspection.
javascript demo js_10 -
Async Patterns Playground
Promise combinators, sequential vs parallel pitfalls, AbortController cancellation, and concurrency pools.
javascript demo js_10 -
Debounce, Throttle & rAF
Compare debounce, throttle, and requestAnimationFrame on scroll/input — leading, trailing, and maxWait behavior.
javascript demo js_10 -
Event Delegation Lab
One listener vs many, closest() delegation, and DOM batching — see propagation and performance trade-offs.
javascript demo js_10 -
Fetch Resilience Simulator
Timeouts, retries, exponential backoff, stale-response races, and deduplication — client-side fetch hardening.
javascript demo js_10 -
Error Handling Sandbox
Sync throws, promise rejections, async/await, Error.cause chains, and global handlers in one iframe sandbox.
javascript demo js_10 -
Form Validation Playground
Constraint Validation API: ValidityState, setCustomValidity, async cross-field checks, and accessible error UI.
javascript demo js_10 -
Immutability & structuredClone
Reference vs value, shallow-copy traps, nested mutation, Object.freeze, and change-detection patterns.
javascript demo js_10 -
Intl Formatting Explorer
Intl.NumberFormat, DateTimeFormat, PluralRules, Collator, and locale-aware sorting — no hand-rolled i18n.
javascript demo js_10
CSS Deep Dive · css_10
-
Flexbox vs Grid Playground
Toggle flex vs grid, resize containers, and see axis alignment, fr tracks, and intrinsic sizing live.
css demo css_10 -
Advanced Grid Lab
auto-fit vs auto-fill, subgrid, dense packing, named areas, and masonry-style layouts.
css demo css_10 -
Container Queries Demo
@container, container-type, cqi units, and component-local breakpoints — not viewport media queries.
css demo css_10 -
Custom Properties & @property
Runtime theming, cascade scoping, fallbacks, and typed @property for animatable gradients.
css demo css_10 -
OKLCH & color-mix()
Perceptually uniform palettes, P3 gamut, relative colors, and HSL vs OKLCH side by side.
css demo css_10 -
Cascade & Specificity
@layer order, (a,b,c) specificity, :is/:where/:has(), and which rule wins — full resolution order.
css demo css_10 -
Animations & Easing
Transitions, keyframes, cubic-bezier vs steps, WAAPI, and compositor-friendly motion.
css demo css_10 -
Scroll-Driven Animations
animation-timeline: scroll() and view(), animation-range, and compositor-native scroll UX without JS.
css demo css_10 -
Stacking Contexts & Anchors
Paint order, z-index scoping, sticky pitfalls, and CSS anchor positioning for popovers.
css demo css_10 -
Fluid Type clamp() Builder
Build clamp() type scales, preview at any viewport width, and export copy-paste CSS.
css demo css_10
Building AI Agents · llm_10
-
Tokenizer & Context Budget
Subword tokenization, context window math, and agent budgeting — the hard limit every agent respects.
ai demo llm_10 -
LLM Sampling Visualizer
Temperature, top_p, top_k reshape logits live — sample tokens and see greedy vs creative output.
ai demo llm_10 -
Agent Prompt Builder
Compose system/user messages, few-shot examples, JSON schema output, and injection guard patterns.
ai demo llm_10 -
Stopping Criteria Simulator
EOS tokens, max_tokens, stop sequences, finish_reason — streaming truncation and runaway cost guards.
ai demo llm_10 -
Context Window Packer
Pack system prompt, tools, history, RAG chunks, and output reserve into a fixed context budget.
ai demo llm_10 -
Fine-tune vs Prompt vs RAG
Decision tree: knowledge vs behavior, data needs, cost, privacy — when to retrieve, prompt, or train.
ai demo llm_10 -
LLM & Agent Eval Lab
Golden sets, offline metrics, LLM-as-judge rubrics, A/B bars, and regression-style scoring.
ai demo llm_10 -
Model Selector Matrix
Capability tiers, context size, modality, cost, privacy, and tool-use — pick models beyond leaderboards.
ai demo llm_10 -
Function Calling Loop
JSON Schema tools, request→execute→result loop, parallel calls, validation errors, and security traps.
ai demo llm_10 -
Agent Loop (ReAct)
ReAct, reflection, and planning steps — watch a multi-turn agent loop with tool calls and guardrails.
ai demo llm_10