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.
UD5 Toolkit
Visualize how navigator.scheduling.isInputPending()
helps yield the main thread to keep UIs responsive during heavy computation.
Long task runs uninterrupted — input events are queued.
Checks for pending input & yields the main thread proactively.
navigator.scheduling.isInputPending() is a web API that allows JavaScript to check whether there are pending user input events (like clicks, key presses, or touches) waiting in the browser's event queue. It returns a boolean — true if input is waiting to be processed, false otherwise. This enables long-running tasks to proactively yield the main thread only when the user actually needs to interact, rather than yielding on a fixed schedule.
'scheduling' in navigator && 'isInputPending' in navigator.scheduling. For unsupported browsers, consider falling back to periodic setTimeout(0) yielding or using a polyfill.
click, keydown, keyup, mousedown, mouseup, touchstart, touchend — these indicate intentional user actions.{includeContinuous: true}): mousemove, wheel, touchmove, pointermove — these fire frequently during movement. Including them can cause excessive yielding, so only use this option when responsiveness to continuous input (like drawing or dragging) is critical.
isInputPending(), developers can break up long tasks and yield precisely when input is waiting, dramatically reducing interaction latency. This directly improves INP, Total Blocking Time (TBT), and the overall user experience — especially on slower devices or during heavy computation.
requestIdleCallback schedules work during browser idle periods — but it doesn't check for pending input specifically. A page can be "idle" in terms of rendering yet still have unprocessed input events. isInputPending() fills this gap by allowing synchronous, on-demand checking of the input queue, giving developers finer-grained control over when to yield. They can be used together for optimal scheduling.
setTimeout(0), postMessage, or scheduler.yield() to actually yield the thread.includeContinuous: true when necessary.false (or uses a timer-based heuristic) when isInputPending is unavailable. Combined with periodic setTimeout(0) yielding, this provides reasonable behavior across all browsers, though without the precision of the native API.
isInputPending() is designed to be extremely fast (sub-microsecond). It simply checks a flag maintained by the browser's event loop, without traversing the event queue or performing any heavy work. You can safely call it thousands of times per second. The real performance consideration is how often you yield — yielding too frequently can slow down the overall task, while yielding too rarely reduces responsiveness. Finding the right batch size is key.
scheduler.yield() is a newer proposal (part of the Prioritized Task Scheduling API) that actively yields the main thread and returns a promise. While isInputPending() is a read-only check, scheduler.yield() is an action. They complement each other: you can use isInputPending() to decide whether to yield, and scheduler.yield() (or setTimeout(0)) to actually perform the yield. This combination gives developers the most control over main-thread scheduling.
Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
Build <link> tags for preload, prefetch, preconnect, and dns‑prefetch. Improve page load speed with correct priorities. Copy the optimized HTML.
Fill in daily work hours and tasks, and generate a printable PDF timesheet. Clean, professional layout. Local.
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.
Set up resources and processes and run the Banker's algorithm to check for safe states. Classic OS deadlock avoidance demo.
Enter a cron expression and get a plain English description of when it runs. Understand complex schedules instantly. Developer friendly.
Use the document.fonts API to check if a font is loaded. Watch the ready promise. Avoid FOUT. JavaScript demo.
Create half‑hour time blocks for your day. Drag to resize and reorder. Export as image. All local.
Use your microphone to dictate text and see it appear live. Also upload an audio file for basic transcription. All local.
Use your microphone to dictate text and see it appear live. Also upload an audio file for transcription (limited). All local.
Take a normal sentence and reverse the word order. Sound like Yoda or just play with language.
Toggle browser‑generated bold and italic when a real italic is missing. Understand and control font fallback rendering.
Divide your day into blocks with color codes. Drag tasks into slots. See free time at a glance.
Visualize random-width plank layout and calculate total square footage plus waste for hardwood or laminate flooring.
Decode Base64 encoded strings back into viewable images and download them as PNG. Useful for debugging APIs and data URIs. Secure local processing.
Repeat the growing color sequence. How far can you go? Classic memory game with sound and animations.
Drag tasks into a 2x2 grid (Urgent vs. Important or Impact vs. Effort). Visual decision aid. Local.
Paste a git log and generate a polished changelog grouped by type (feat, fix, etc.). Follows Keep a Changelog format. Local.
Paste a corpus of text and generate new random sentences that mimic the style using Markov chains. Local only.
Create CSS animations and transitions without coding. Define keyframes, easing, and duration. Copy the @keyframes and animation code instantly.
Convert units of force: Newton, kilonewton, pound-force, dyne. Handy for physics homework and engineering. Private, no upload.
Re‑order words to sound like Master Yoda. Not perfect, but amusing, this tool is. Local and quick.
Enter a hexadecimal string and decode it as a 32‑bit or 64‑bit floating‑point number. Low‑level developer tool.
Click for an endless stream of random dad jokes and puns. Copy and share. Guaranteed to make you groan. All local.
Create multi‑step keyframe animations by adding stops and properties. Play and pause. Copy the complete CSS. Intuitive UI.
Paste Pug template code and compile it to HTML. See the rendered output instantly. For static site devs.
Build a responsive masonry layout using the column‑count property. No JavaScript. Copy the minimal CSS.
Try the experimental masonry layout in CSS Grid (enabled via flag). See how items flow. Copy the code. For cutting‑edge browsers.
Enter amount of kernels and see estimated popped volume. Plan movie night snacks perfectly.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.