Long Task Detector - Online Identify INP Bottlenecks
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.
UD5 Toolkit
Non-blocking β UI stays responsive
Blocking β UI freezes during computation
| Metric | With Worker | Without Worker |
|---|---|---|
| Execution Time | β | β |
| Primes Found | β | β |
| UI Remained Responsive | Yes | No β Froze |
| User Could Interact | Yes | No |
| Can Be Cancelled | Yes (terminate) | No |
postMessage() and onmessage.
window object, or document directly. They cannot manipulate HTML elements. Communication is limited to structured cloning of data via messages. They cannot access localStorage or sessionStorage directly (though they can use IndexedDB). Each worker also consumes additional memory and has a startup cost.
navigator.hardwareConcurrency to detect the number of available logical cores. For truly parallel processing, divide your work across multiple workers β each runs independently on a separate thread. Just be mindful of memory overhead per worker.
worker.terminate() from the main thread to immediately stop a worker. This kills the worker thread instantly without allowing any cleanup inside the worker. Alternatively, you can implement a cooperative cancellation pattern by sending a custom message (e.g., {cmd: 'stop'}) and having the worker check for it periodically during its computation.
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.
Create halfβhour time blocks for your day. Drag to resize and reorder. Export as image. All local.
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
Divide your day into blocks with color codes. Drag tasks into slots. See free time at a glance.
Fill in daily work hours and tasks, and generate a printable PDF timesheet. Clean, professional layout. Local.
Set up resources and processes and run the Banker's algorithm to check for safe states. Classic OS deadlock avoidance demo.
Build <link> tags for preload, prefetch, preconnect, and dnsβprefetch. Improve page load speed with correct priorities. Copy the optimized HTML.
Drag tasks into a 2x2 grid (Urgent vs. Important or Impact vs. Effort). Visual decision aid. Local.
Try the experimental masonry layout in CSS Grid (enabled via flag). See how items flow. Copy the code. For cuttingβedge browsers.
Create CSS animations and transitions without coding. Define keyframes, easing, and duration. Copy the @keyframes and animation code instantly.
Enter a cron expression and get a plain English description of when it runs. Understand complex schedules instantly. Developer friendly.
Toggle browserβgenerated bold and italic when a real italic is missing. Understand and control font fallback rendering.
Visualize random-width plank layout and calculate total square footage plus waste for hardwood or laminate flooring.
Use your microphone to dictate text and see it appear live. Also upload an audio file for transcription (limited). All local.
Use your microphone to dictate text and see it appear live. Also upload an audio file for basic transcription. All local.
Use the document.fonts API to check if a font is loaded. Watch the ready promise. Avoid FOUT. JavaScript demo.
Paste a corpus of text and generate new random sentences that mimic the style using Markov chains. Local only.
Paste a git log and generate a polished changelog grouped by type (feat, fix, etc.). Follows Keep a Changelog format. Local.
Convert units of force: Newton, kilonewton, pound-force, dyne. Handy for physics homework and engineering. Private, no upload.
Create multiβstep keyframe animations by adding stops and properties. Play and pause. Copy the complete CSS. Intuitive UI.
Decode Base64 encoded strings back into viewable images and download them as PNG. Useful for debugging APIs and data URIs. Secure local processing.
Build a responsive masonry layout using the columnβcount property. No JavaScript. Copy the minimal CSS.
Take a normal sentence and reverse the word order. Sound like Yoda or just play with language.
Repeat the growing color sequence. How far can you go? Classic memory game with sound and animations.
Reβorder words to sound like Master Yoda. Not perfect, but amusing, this tool is. Local and quick.
Paste Pug template code and compile it to HTML. See the rendered output instantly. For static site devs.
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.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Toggle imageβrendering: auto, pixelated, crispβedges on a scaled image. Essential for pixel art display.