LagRadar
It's a sexy little component for demonstrating performance - or lack of in your javascript application.
Add this to any javascript application and you can see when the app drops below
60fps as the radar sweep changes colour and gets janky.
Get your live demo
Extra awesome as Bookmarklet
Usage
The radar is published as a zero dependency es6 javascript module.
import lagRadar from './lag-radar.js';
const destroy = lagRadar({
frames: 50, // number of frames to draw, more = worse performance
speed: 0.0017, // how fast the sweep moves (rads per ms)
size: 300, // outer frame px
inset: 3, // circle inset px
parent: document.body, // DOM node to attach to
});
// later ...
destroy();
It also exposes css class hooks for styling the radar
To run the demo
npm install
npm start
open http://localhost:9080/
Genesis
This version authored by @mobz with ideas and contributions from others
for this talk
by @dan_abramov and shared to the world with love.