2 ms·

How does it accomplish it in 680 bytes? I tried reading the code but don't understand it.. there is a lot of stuff about css and keyframes that i don't get.

cheeaun 9y ago
From the code, it adds `animationstart` event that will be fired for any newly injected DOM https://github.com/muicss/sentineljs/blob/master/src/sentinel.js#L14 https://github.com/muicss/sentineljs/blob/master/src/sentine... It adds a faux `animation` keyframe for the specified CSS selector.
ry_ry 9y ago
Looks like it adds a keyframe animation to the elements, and when a child node is inserted that animation is triggered, and emits an event. Am on my phone tho, so may have misread.
projectant 9y ago
It adds a stylesheet to accept new stylerules. For every element set (CSS selector) you want to watch it adds a new stylerule that makes a no-op animation happen (transform:none -> transform:none). Every time such a node that matches your selector is added to the document, this animation is triggered. When this happens, Sentinel publishes an event to whatever handlers you ask it to, by listening to the 'AnimationStart' event emitted when an animation happens. Pretty clever, but simple, and I think this is not the first source to suggest this approach for watching DOM modification. Note, the unminified dist/sentinel.js is not 682 bytes!
- superasn 9y ago
  Wow that is just super clever and I'm guessing super fast also since it is triggered by the browser. I was thinking more on the lines of comparing nodes using setInterval which would of course never work because it would be slow and CPU intensive!
- gcb0 9y ago
  it will break when browser optimize a null animation, just like tons of code used to detect if some ad was in view in the past broke. edit: already happened once with this very project. they started animating clip, but then ie optimised it and now they use outlineColor.

cheeaun 9y ago

From the code, it adds `animationstart` event that will be fired for any newly injected DOM https://github.com/muicss/sentineljs/blob/master/src/sentinel.js#L14 https://github.com/muicss/sentineljs/blob/master/src/sentine... It adds a faux `animation` keyframe for the specified CSS selector.

ry_ry 9y ago

Looks like it adds a keyframe animation to the elements, and when a child node is inserted that animation is triggered, and emits an event. Am on my phone tho, so may have misread.

projectant 9y ago

It adds a stylesheet to accept new stylerules. For every element set (CSS selector) you want to watch it adds a new stylerule that makes a no-op animation happen (transform:none -> transform:none). Every time such a node that matches your selector is added to the document, this animation is triggered. When this happens, Sentinel publishes an event to whatever handlers you ask it to, by listening to the 'AnimationStart' event emitted when an animation happens. Pretty clever, but simple, and I think this is not the first source to suggest this approach for watching DOM modification. Note, the unminified dist/sentinel.js is not 682 bytes!

superasn 9y ago
Wow that is just super clever and I'm guessing super fast also since it is triggered by the browser. I was thinking more on the lines of comparing nodes using setInterval which would of course never work because it would be slow and CPU intensive!
gcb0 9y ago
it will break when browser optimize a null animation, just like tons of code used to detect if some ad was in view in the past broke. edit: already happened once with this very project. they started animating clip, but then ie optimised it and now they use outlineColor.