SentinelJS
Dev tools
dom utility library
SHOW HN2017
How HN took it
5 positive, 16 neutral or asking, 0 mixed, 5 critical, out of 26 comments about the project. Thread score -0.03.
Idea: 1 for, 3 againstExecution: 1 for, 1 againstPerformance: 2 for, 0 againstDesign: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Clever use of CSS animation events to detect insertions
From 2 comments
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…
projectant on HNWow 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…
superasn on HN
Useful for managing behaviors on a page
From 1 comment
Nice work! I've also done a similar thing (https://github.com/rstacruz/onmount), and it's really useful in managing behaviors in a page. For those wondering what this is for,…
rstacruz on HN
Objections
Relies on a CSS animation hack that browsers may optimise away
From 2 comments
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…
gcb0 on HNWhat's the difference between SentinelJS and DOM Mutation Observers? I glanced at the source code, it seems this lib is using some kind of hack based on CSS animations. Why not…
yeasayer on HN
MutationObserver is the standard API and makes this unnecessary
From 3 comments
Don't we have mutation observers for this exact purpose? or is there a benefit to this approach?
have_faith on HNWhat's the difference between SentinelJS and DOM Mutation Observers? I glanced at the source code, it seems this lib is using some kind of hack based on CSS animations. Why not…
yeasayer on HNMutationObserver could handle this case instead of the animationstart hack yeah. Here's one impl I found:…
paulirish on HN
Questions
Why not use MutationObserver instead
From 2 comments
Don't we have mutation observers for this exact purpose? or is there a benefit to this approach?
have_faith on HNWhat's the difference between SentinelJS and DOM Mutation Observers? I glanced at the source code, it seems this lib is using some kind of hack based on CSS animations. Why not…
yeasayer on HN
Does it fire for elements present before DOMContentLoaded
From 2 comments
If the author is watching this thread or anyone else. Would this work for elements not yet loaded by the browser before DOMContentLoaded?
spand on HNThanks for the response and sorry. Maybe I was not quite clear. I was attempting ask if it would trigger the event handler before DOMContentLoaded (relevant on big document where…
spand on HN
Alternatives named
MutationObserver
From 2 comments
Don't we have mutation observers for this exact purpose? or is there a benefit to this approach?
have_faith on HNI have used mutation observers to do exactly this. They are very simple to use.
moheeb on HN
onmount (rstacruz)
From 1 comment
Nice work! I've also done a similar thing (https://github.com/rstacruz/onmount), and it's really useful in managing behaviors in a page. For those wondering what this is for,…
rstacruz on HN
SelectorListener
From 1 comment
And implementation by the same author: https://github.com/csuwildcat/SelectorListener
atmin on HN
wait-for-element.js
From 1 comment
MutationObserver could handle this case instead of the animationstart hack yeah. Here's one impl I found:…
paulirish on HN