6 ms·

Show HN: PullToRefresh.js

119 points by rsoto 10y ago

ldom22 10y ago
mexican company in HN front page! fellow mexican here
- rsoto 10y ago
  Hello, how you doin'? What's your company?
  - ldom22 10y ago
    big semiconductor company in guadalajara
rsoto 10y ago
This library was born due to other existing libraries requiring to modify the layout's markup. Since we mostly use the flexbox trick to create a sticky footer, this would have required quite a rewrite. The focus on PullToRefresh.js is to manipulate the DOM and add the elements programatically, and allow its own proportions to push down the content.
- artursapek 10y ago
  You should make it clear the demos don't do anything on a non-mobile device. EDIT: point taken. Non-touch device
  - rsoto 10y ago
    Updated!
  - Retr0spectrum 10y ago
    It works in desktop Firefox if you have a touchscreen.
    - rsoto 10y ago
      It actually works virtually in every browser, if it has touch emulation.
  - Guillaume86 10y ago
    Little tip for devs: on chrome you can use the mobile device simulation mode to test these kind of libs.
  - deleted 10y ago
    [deleted]
k__ 10y ago
chrome uses pull to refresh already. So pulling refreshes the whole page AND triggers the library.
- rsoto 10y ago
  What OS/version are you on currently? When Chrome mobile detects there's a touch event, it prevents the native reload feature to be triggered.
  - k__ 10y ago
    Chrome Dev 56.0.2919.3 Android 6.0.0
    - rsoto 10y ago
      I'll take a look, but I have the same Android version, and I'm on Chrome 54, and everything works fine.
MichaelApproved 10y ago
Does anyone work with Ionic framework? Would something like this be a good replacement for their 1.x pull to refresh implementation? The one that comes with Ionic is a bit buggy and I'm looking to swap it out with another option.
- rsoto 10y ago
  I'm not familiar with Ionic, but thanks for the compliment! (Implying it's less buggy haha). I'd love it if the library can be in it. Maybe open a PR/issue?
  - MichaelApproved 10y ago
    http://ionicframework.com http://ionicframework.com is a hybrid framework built on top of Cordova. It's used for creating apps using HTML/CSS/JavaScript while still having access to native device features. Specifically, Ionic uses AngularJS as part of it's framework. So, implementing this would be a little more work than drop-in but I'm interested in trying, when I have some free time. Thanks for creating it.
grav 10y ago
Very nice feeling to it, although it's lacking overscroll (or overflow scroll) on iOS
- rsoto 10y ago
  Thanks! Yeah, it's the same with the native pull to refresh feature on Chrome; it is overridden when the site has certain touch events, as there's no standard to prevent the default behaviors. I guess it's the same with Safari, which I imply you're referring to.
- MichaelApproved 10y ago
  > lacking overscroll What does that mean?
  - rsoto 10y ago
    It's hard to explain, as I'm not on OSX/iOS, but I'm 90% sure it's when you scroll up too fast and you can see «behind» the website. Because of the touch events, the browser decides to not use those features, as it might affect it. Since there's no standard way to do it (like a meta tag), the browser has to decide with the events it has.
donjh 10y ago
Really clean - has a great feel to it. Nice work!
evo_9 10y ago
I've wondered for a while why this isn't built into all browsers it such a natural and initiative way to handle refreshing a webpage. Edit: typo
- rsoto 10y ago
  That's actually a feature, at least on mobile. Chrome has its native pull to refresh. The use case we're aiming with this library is that not always you want to refresh the whole page; sometimes you want to update just one section of the app (think Gmail), do something deferred with a worker, or set a timeout. Also, you want to be consistent across all browsers/platforms, and maybe add a little touch of personality or branding [1]. So, while I agree with you it should be standard, and maybe it should have an API, it has to be flexible enough for every and each thing you want to achieve... so you'll need a library, and we're full circle. 1: https://muz.li/blog/refresh-inspiration/ https://muz.li/blog/refresh-inspiration/
  - evo_9 10y ago
    That's even more awesome thx! Can't wait to add this to my side project, nice work man!
    - rsoto 10y ago
      Maybe we will be showcasing the webapps that use PulltoRefresh.js, when you're done, could you open an issue with your side project's URL?
      - evo_9 10y ago
        I will once it's public, it's a side project for me but not my business partner. ;)
  - deleted 10y ago
    [deleted]
- underdown 10y ago
  Its the only reason I dont use firefox on android - no pull to refresh.
ChrisArchitect 10y ago
wasn't this patented by Twitter awhile back?
- jamiesonbecker 10y ago
  The unanimous Supreme Court Alice v. CLS Bank decision in 2014 destroyed the validity of most software patents, for better or worse. http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-software-patents-post-alice/id=55142/ http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-so...
blauditore 10y ago
While it works quite nicely, it's maybe not a good idea UX-wise to use it on general websites, as it overrides native browser behaviour (at least for some mobile browsers). For example, I hate when websites (on desktop) override keyboard shortcuts like Ctrl+F or F5, or prevent the default right-click context menu in order to keep me from downloading an image. For HTML/JS apps though it's a whole different story and might help giving it much more native look and feel.
- rsoto 10y ago
  I agree with you, I also hate when websites hijack standard keyboard shortcuts. Altough I don't see this being the case: as it requires touch events, and even if you're on a touch-capable laptop or desktop PC, it won't override much (maybe the native pull to refresh from Chrome, at most). Also, what I said in a previous comment: maybe you want consistency across browsers/platforms or branding, customizing how it looks. And maybe you don't want to refresh the whole page, maybe just one section calling a JSON API, or perhaps you have a heavy job that requires a worker.
  - throwawayIndian 10y ago
    You can choose not to use the library created by OP for your websites and not share it with your friends. Stop selling your hatred bullshit as some sort of a standard that the entire planet must adhere to. Hackernews should probably strip out the word hate and its synonyms because as it is it is painful to see smart people going full dumbass on this forum.
    - MichaelApproved 10y ago
      ... you do realize that you are replying to OP, right? rsoto submitted this and is all over the comments having good discussions with other HN commentators. He/she is simply discussing use-cases for the product created.
      - throwawayIndian 10y ago
Kwpolska 10y ago
And on desktops? And how does this work on Chrome on mobile (which defaults to pull-to-F5)?
rfolstad 10y ago
i was hoping this was a library that would help me to disable pull to refresh. Anyone know of a good library that can help to disable this in browsers? Pull to refresh on mobile chrome or safari is really terrible ux for web apps. It's ok for content sites but if you have an app that you want to behave like a native app it's really terrible. A good example is maps.google.com. Even if you install it as a home screen app it still has the stupid pull to refresh gesture in chrome. I wish there was some way to disable it in browsers. I have tried many things like position: fixed or overflow-y:hidden but these have other side effects like preventing the keyboard from repositioning the window in chrome or safari. In general if a web browser overrides any touch gestures they should be able to be disabled by the page without having to handle every touchmove yourself.
- rsoto 10y ago
  I don't think you need a library for that, it's just a few lines. I'm currently a little busy, but there's one touch event that disables those «features» (can't remember which). I'd suggest you to download the library and delete some of the lines for the callbacks on the touch events, maybe you can isolate it and figure out what is achieving that result. Or, you could try something like this: PullToRefresh.init({ mainElement: '#main', distMax: 0, onRefresh: function(){} });
kinduff 10y ago
This is very nice. I've seen many solutions out there to accomplish this but got to say I love the style, implementation and the extensibility it has. Very well done, looking forward for more products from you two.
- rsoto 10y ago
  Thanks bro, when I grow up I want to be just like you. We should go out to grab some drinks soon!
greggman 10y ago
Pull to refresh is an anti-feature IMO. It makes me lose work all the time. I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work Please do not use pull to refresh on your site. And, if you're a browser ux designer please remove it. It's arguably as bad as using backspace for "previous". Possibly worse since most people have no need to refresh and those that do have other ways to do it.
- rsoto 10y ago
  > I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work That's not an anti-feature, that's poor UX. If you're entering data into a form that might get lost, the UX team should add an event that checks if you're trying to go somewhere else (or reload), to confirm whether that's the action you want to do. Your argument against pull to refresh could be the same for the reload, back and forward buttons in your web browser. Also, against the URL/search bar, because it might lose your progress. And all is fixed with a confirm() on the unload event, and it has nothing to do with the pull to reload feature.
  - kaishiro 10y ago
    I actually agree with most of what you're saying, except for the part about it being the same argument for reload, etc. Nobody is overloading the reload button to accomplish some other featurette. But pull to reload is overloading an existing paradigm - scrolling down - and implementing an entirely unrelated piece of functionality - loading new content.
    - systoll 10y ago
      Where it's appropriate, pull-to-refresh isn't unrelated functionality. In a reverse chronological listing, 'new' stuff is always at the top. Pull-to-refresh refreshes the listing, grabbing whatever could be placed 'above' the page, when you scroll past the top of what's currently loaded. it's just the other end of 'infinite scrolling'. Triggering `location.reload()` when you scroll past the top is a bad idea -- about as appropriate as triggering `location = nextPage`, when you get to the bottom. But most pull-to-refreshes don't do that.

119 points by rsoto 10y ago

ldom22 10y ago

mexican company in HN front page! fellow mexican here

rsoto 10y ago
Hello, how you doin'? What's your company?
- ldom22 10y ago
  big semiconductor company in guadalajara

rsoto 10y ago

This library was born due to other existing libraries requiring to modify the layout's markup. Since we mostly use the flexbox trick to create a sticky footer, this would have required quite a rewrite. The focus on PullToRefresh.js is to manipulate the DOM and add the elements programatically, and allow its own proportions to push down the content.

artursapek 10y ago
You should make it clear the demos don't do anything on a non-mobile device. EDIT: point taken. Non-touch device
- rsoto 10y ago
  Updated!
- Retr0spectrum 10y ago
  It works in desktop Firefox if you have a touchscreen.
  - rsoto 10y ago
    It actually works virtually in every browser, if it has touch emulation.
- Guillaume86 10y ago
  Little tip for devs: on chrome you can use the mobile device simulation mode to test these kind of libs.
- deleted 10y ago
  [deleted]

k__ 10y ago

chrome uses pull to refresh already. So pulling refreshes the whole page AND triggers the library.

rsoto 10y ago
What OS/version are you on currently? When Chrome mobile detects there's a touch event, it prevents the native reload feature to be triggered.
- k__ 10y ago
  Chrome Dev 56.0.2919.3 Android 6.0.0
  - rsoto 10y ago
    I'll take a look, but I have the same Android version, and I'm on Chrome 54, and everything works fine.

MichaelApproved 10y ago

Does anyone work with Ionic framework? Would something like this be a good replacement for their 1.x pull to refresh implementation? The one that comes with Ionic is a bit buggy and I'm looking to swap it out with another option.

rsoto 10y ago
I'm not familiar with Ionic, but thanks for the compliment! (Implying it's less buggy haha). I'd love it if the library can be in it. Maybe open a PR/issue?
- MichaelApproved 10y ago
  http://ionicframework.com http://ionicframework.com is a hybrid framework built on top of Cordova. It's used for creating apps using HTML/CSS/JavaScript while still having access to native device features. Specifically, Ionic uses AngularJS as part of it's framework. So, implementing this would be a little more work than drop-in but I'm interested in trying, when I have some free time. Thanks for creating it.

grav 10y ago

Very nice feeling to it, although it's lacking overscroll (or overflow scroll) on iOS

rsoto 10y ago
Thanks! Yeah, it's the same with the native pull to refresh feature on Chrome; it is overridden when the site has certain touch events, as there's no standard to prevent the default behaviors. I guess it's the same with Safari, which I imply you're referring to.
MichaelApproved 10y ago
> lacking overscroll What does that mean?
- rsoto 10y ago
  It's hard to explain, as I'm not on OSX/iOS, but I'm 90% sure it's when you scroll up too fast and you can see «behind» the website. Because of the touch events, the browser decides to not use those features, as it might affect it. Since there's no standard way to do it (like a meta tag), the browser has to decide with the events it has.

donjh 10y ago

Really clean - has a great feel to it. Nice work!

evo_9 10y ago

I've wondered for a while why this isn't built into all browsers it such a natural and initiative way to handle refreshing a webpage. Edit: typo

rsoto 10y ago
That's actually a feature, at least on mobile. Chrome has its native pull to refresh. The use case we're aiming with this library is that not always you want to refresh the whole page; sometimes you want to update just one section of the app (think Gmail), do something deferred with a worker, or set a timeout. Also, you want to be consistent across all browsers/platforms, and maybe add a little touch of personality or branding [1]. So, while I agree with you it should be standard, and maybe it should have an API, it has to be flexible enough for every and each thing you want to achieve... so you'll need a library, and we're full circle. 1: https://muz.li/blog/refresh-inspiration/ https://muz.li/blog/refresh-inspiration/
- evo_9 10y ago
  That's even more awesome thx! Can't wait to add this to my side project, nice work man!
  - rsoto 10y ago
    Maybe we will be showcasing the webapps that use PulltoRefresh.js, when you're done, could you open an issue with your side project's URL?
    - evo_9 10y ago
      I will once it's public, it's a side project for me but not my business partner. ;)
- deleted 10y ago
  [deleted]
underdown 10y ago
Its the only reason I dont use firefox on android - no pull to refresh.

ChrisArchitect 10y ago

wasn't this patented by Twitter awhile back?

jamiesonbecker 10y ago
The unanimous Supreme Court Alice v. CLS Bank decision in 2014 destroyed the validity of most software patents, for better or worse. http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-software-patents-post-alice/id=55142/ http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-so...

blauditore 10y ago

While it works quite nicely, it's maybe not a good idea UX-wise to use it on general websites, as it overrides native browser behaviour (at least for some mobile browsers). For example, I hate when websites (on desktop) override keyboard shortcuts like Ctrl+F or F5, or prevent the default right-click context menu in order to keep me from downloading an image. For HTML/JS apps though it's a whole different story and might help giving it much more native look and feel.

rsoto 10y ago
I agree with you, I also hate when websites hijack standard keyboard shortcuts. Altough I don't see this being the case: as it requires touch events, and even if you're on a touch-capable laptop or desktop PC, it won't override much (maybe the native pull to refresh from Chrome, at most). Also, what I said in a previous comment: maybe you want consistency across browsers/platforms or branding, customizing how it looks. And maybe you don't want to refresh the whole page, maybe just one section calling a JSON API, or perhaps you have a heavy job that requires a worker.
- throwawayIndian 10y ago
  You can choose not to use the library created by OP for your websites and not share it with your friends. Stop selling your hatred bullshit as some sort of a standard that the entire planet must adhere to. Hackernews should probably strip out the word hate and its synonyms because as it is it is painful to see smart people going full dumbass on this forum.
  - MichaelApproved 10y ago
    ... you do realize that you are replying to OP, right? rsoto submitted this and is all over the comments having good discussions with other HN commentators. He/she is simply discussing use-cases for the product created.
    - throwawayIndian 10y ago

Kwpolska 10y ago

And on desktops? And how does this work on Chrome on mobile (which defaults to pull-to-F5)?

rfolstad 10y ago

i was hoping this was a library that would help me to disable pull to refresh. Anyone know of a good library that can help to disable this in browsers? Pull to refresh on mobile chrome or safari is really terrible ux for web apps. It's ok for content sites but if you have an app that you want to behave like a native app it's really terrible. A good example is maps.google.com. Even if you install it as a home screen app it still has the stupid pull to refresh gesture in chrome. I wish there was some way to disable it in browsers. I have tried many things like position: fixed or overflow-y:hidden but these have other side effects like preventing the keyboard from repositioning the window in chrome or safari. In general if a web browser overrides any touch gestures they should be able to be disabled by the page without having to handle every touchmove yourself.

rsoto 10y ago
I don't think you need a library for that, it's just a few lines. I'm currently a little busy, but there's one touch event that disables those «features» (can't remember which). I'd suggest you to download the library and delete some of the lines for the callbacks on the touch events, maybe you can isolate it and figure out what is achieving that result. Or, you could try something like this: PullToRefresh.init({ mainElement: '#main', distMax: 0, onRefresh: function(){} });

kinduff 10y ago

This is very nice. I've seen many solutions out there to accomplish this but got to say I love the style, implementation and the extensibility it has. Very well done, looking forward for more products from you two.

rsoto 10y ago
Thanks bro, when I grow up I want to be just like you. We should go out to grab some drinks soon!

greggman 10y ago

Pull to refresh is an anti-feature IMO. It makes me lose work all the time. I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work Please do not use pull to refresh on your site. And, if you're a browser ux designer please remove it. It's arguably as bad as using backspace for "previous". Possibly worse since most people have no need to refresh and those that do have other ways to do it.

rsoto 10y ago
> I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work That's not an anti-feature, that's poor UX. If you're entering data into a form that might get lost, the UX team should add an event that checks if you're trying to go somewhere else (or reload), to confirm whether that's the action you want to do. Your argument against pull to refresh could be the same for the reload, back and forward buttons in your web browser. Also, against the URL/search bar, because it might lose your progress. And all is fixed with a confirm() on the unload event, and it has nothing to do with the pull to reload feature.
- kaishiro 10y ago
  I actually agree with most of what you're saying, except for the part about it being the same argument for reload, etc. Nobody is overloading the reload button to accomplish some other featurette. But pull to reload is overloading an existing paradigm - scrolling down - and implementing an entirely unrelated piece of functionality - loading new content.
  - systoll 10y ago
    Where it's appropriate, pull-to-refresh isn't unrelated functionality. In a reverse chronological listing, 'new' stuff is always at the top. Pull-to-refresh refreshes the listing, grabbing whatever could be placed 'above' the page, when you scroll past the top of what's currently loaded. it's just the other end of 'infinite scrolling'. Triggering `location.reload()` when you scroll past the top is a bad idea -- about as appropriate as triggering `location = nextPage`, when you get to the bottom. But most pull-to-refreshes don't do that.