3 ms·

I've previously submitted this link, but given the interest in the pattern with yesterday's article [0] I thought it appropriate to post again. Hopefully someon

I've previously submitted this link, but given the interest in the pattern with yesterday's article [0] I thought it appropriate to post again. Hopefully someone finds it useful. Happy to answer any and all questions [0] https://news.ycombinator.com/item?id=7799687 https://news.ycombinator.com/item?id=7799687

danso 12y ago
Thanks for posting it...I think we've reached a point where there are so many good libraries on Github that even a 1,000+ star repo may be unknown to many of the people who would find it useful. This is something I would've tried to build on my own...but after seeing a repo with not only 3,000+ stars, which is more than the number of the library's bytes (in development), but also fewer than 5 open issues out of 60+...I'm happy to just use your solution. Nice work!
- WickyNilliams 12y ago
  I agree. I am continually finding repos on github that are massively popular, yet I've never come across them. Does anyone know any sites which are devoted to curating high-quality repos on github/elsewhere¹? Obviously high quality is a subjective metric, but some mix of popularity, file size, whether under active development, number of issues etc. should suffice. GitHub's explore feature is too time-sensitive to use for this purpose. ¹ I know there's unheap.com, but that's focussed specifically on jQuery plugins. I'm thinking something broader, any language, different parts of the stack etc
eduardordm 12y ago
It's pretty nice. In my ipad the header only shows/hides if I scroll up/down AND stop touching the screen. Maybe that needs to be changed.
- WickyNilliams 12y ago
  Unfortunately, this is a limitation of the scroll event on iOS. It does not given intermediate results - like it's debounced - only firing the scroll event when scrolling has stopped. This is a well-documented shortcoming of iOS. As Apple puts it [0], "One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving". There is no workaround at the moment. [0] https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html https://developer.apple.com/library/safari/documentation/app...
  - deleted 12y ago
    [deleted]
  - wiresurfer 12y ago
    I remember coming across this limitation while working on a canvas drawing mobile app. The work around was binding to touchmove, keeping a buffer of previous touchX and touchY values and then measuring the gradient of change for the values. If the gradient was mostly flat for both X and Y in a given window of touch movements you can assume the scroll has stopped even though the finger has not been lifted. Here is a jsfiddle which approximates the solution. [0] This is a very quick reconstruction of the code and has some heuristic values which I remember tuning to get the best response on the ipad. As an aside, this one has the mouse move event mapped too. But i have never found it very reliable with the same tolerance settings as touchmove. Sorry if this is useless code info. just thought of sharing. [0]http://jsfiddle.net/R6yLb/3/ http://jsfiddle.net/R6yLb/3/
  - WickyNilliams 12y ago
    wiresurfer, don't understand why you were down voted into oblivion, but now I can't reply to you. Anyway, massive thanks for that, really helpful starting point
    - wiresurfer 12y ago
      Till the time its seen by the right pair of eyes :) Will try and see if I can fork a version and add the "inferred " touchend hack to it. Have a good day.
diminish 12y ago
while reading the source for implementation, as a non-primary JS developer, I can't help but think that the actual functionality could be implemented in around 10 lines of code if we remove all js oo-ization and customization code.. actually I need the minimum lines of code to implement this inside to paste in my project.. any help would be appreciated..
- WickyNilliams 12y ago
  It started out a lot smaller! But as with most code, it starts out nice and pretty but get disfigured over time as corner cases and bugs are unearthed. There is also some necessary ceremony when dealing with scroll events to ensure good perf, otherwise you end up with stuttery scrolling which will annoy users to no end. However, my plan has always been to trim the fat for the next release. I won't drop any features, but I'll definitely drop bytes! Feel free to fork and strip out any code you don't need though

danso 12y ago

Thanks for posting it...I think we've reached a point where there are so many good libraries on Github that even a 1,000+ star repo may be unknown to many of the people who would find it useful. This is something I would've tried to build on my own...but after seeing a repo with not only 3,000+ stars, which is more than the number of the library's bytes (in development), but also fewer than 5 open issues out of 60+...I'm happy to just use your solution. Nice work!

WickyNilliams 12y ago
I agree. I am continually finding repos on github that are massively popular, yet I've never come across them. Does anyone know any sites which are devoted to curating high-quality repos on github/elsewhere¹? Obviously high quality is a subjective metric, but some mix of popularity, file size, whether under active development, number of issues etc. should suffice. GitHub's explore feature is too time-sensitive to use for this purpose. ¹ I know there's unheap.com, but that's focussed specifically on jQuery plugins. I'm thinking something broader, any language, different parts of the stack etc

eduardordm 12y ago

It's pretty nice. In my ipad the header only shows/hides if I scroll up/down AND stop touching the screen. Maybe that needs to be changed.

WickyNilliams 12y ago
Unfortunately, this is a limitation of the scroll event on iOS. It does not given intermediate results - like it's debounced - only firing the scroll event when scrolling has stopped. This is a well-documented shortcoming of iOS. As Apple puts it [0], "One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving". There is no workaround at the moment. [0] https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html https://developer.apple.com/library/safari/documentation/app...
- deleted 12y ago
  [deleted]
- wiresurfer 12y ago
  I remember coming across this limitation while working on a canvas drawing mobile app. The work around was binding to touchmove, keeping a buffer of previous touchX and touchY values and then measuring the gradient of change for the values. If the gradient was mostly flat for both X and Y in a given window of touch movements you can assume the scroll has stopped even though the finger has not been lifted. Here is a jsfiddle which approximates the solution. [0] This is a very quick reconstruction of the code and has some heuristic values which I remember tuning to get the best response on the ipad. As an aside, this one has the mouse move event mapped too. But i have never found it very reliable with the same tolerance settings as touchmove. Sorry if this is useless code info. just thought of sharing. [0]http://jsfiddle.net/R6yLb/3/ http://jsfiddle.net/R6yLb/3/
- WickyNilliams 12y ago
  wiresurfer, don't understand why you were down voted into oblivion, but now I can't reply to you. Anyway, massive thanks for that, really helpful starting point
  - wiresurfer 12y ago
    Till the time its seen by the right pair of eyes :) Will try and see if I can fork a version and add the "inferred " touchend hack to it. Have a good day.

diminish 12y ago

while reading the source for implementation, as a non-primary JS developer, I can't help but think that the actual functionality could be implemented in around 10 lines of code if we remove all js oo-ization and customization code.. actually I need the minimum lines of code to implement this inside to paste in my project.. any help would be appreciated..

WickyNilliams 12y ago
It started out a lot smaller! But as with most code, it starts out nice and pretty but get disfigured over time as corner cases and bugs are unearthed. There is also some necessary ceremony when dealing with scroll events to ensure good perf, otherwise you end up with stuttery scrolling which will annoy users to no end. However, my plan has always been to trim the fat for the next release. I won't drop any features, but I'll definitely drop bytes! Feel free to fork and strip out any code you don't need though