Popcorn Yield Calculator – Online Kernels to Popped Volume
Enter amount of kernels and see estimated popped volume. Plan movie night snacks perfectly.
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.
Enter amount of kernels and see estimated popped volume. Plan movie night snacks perfectly.
Place multiple grid items into the same cells to create overlapping layouts. Learn the technique visually. Copy code.
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSS‑in‑JS trade‑offs.
Control image‑orientation: from-image vs none. See how the browser interprets EXIF rotation. Fix portrait photos.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
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.
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Demonstrate how to add custom headers and POST‑like functionality to EventSource using a polyfill. Code and example.
Scroll a container and see how sticky elements behave. Adjust top, bottom, and scroll margins. Copy the code.
See how overflow: visible, hidden, scroll, and auto behave with real content. Clone to test with your text.
Adjust page characteristics (image size, server delay, layout shift) and see the simulated Core Web Vitals scores. Understand what impacts performance.
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.
Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.
Apply a convolution filter (blur, sharpen) using a Web Worker. See the UI stay responsive while processing. Learn multithreading in the browser.
Measure your browser's GPU compute power using a simple WebGPU matrix multiplication. See raw FLOPS and compare with peers. Fully client‑side.
Paste a raster image and an SVG, see the file size and rendering time. Understand when to use vector. Local.
Apply will‑change to any element and see its effect on compositing. Learn best practices for smooth animations.
Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Register a periodic background sync to fetch fresh data even when the tab is closed. Understand the API and limits.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Enter a URL and get a one‑page report of titles, description, headings, image alts, and broken links. All from browser.
Find safe mixing ratios for the classic elephant toothpaste demonstration. Volume adjustments for different container sizes.
Enter a URL and get a rough client-side performance simulation: request count, DOM size, and potential speed tips. No real Lighthouse.