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.
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.
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?
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! 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.
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.
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.
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.
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.
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.
... 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.
Dang! I see it now, the comment was intended only for the parent though. I guess it's better left like this only.
It's only sad when developers sell UX gyaan on standards on one hand and screw the same standard with things like react elsewhere; only because some large corp says it's cool.
I realize you weren't abusing the person you thought you were, but that's no excuse for breaking HN's rules this badly. Since we've warned you repeatedly about this, we've banned your account.
If you don't want it to be banned, you're welcome to email hn@ycombinator.com. We unban accounts if people give us reason to believe they'll follow the rules in the future.
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.
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.
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.
> 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.
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.
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.
By 'pull too hard' I assume that you mean scrolling back to the top. At least on iOS tapping at the top of the screen performs a scroll to top. Knowing that you'll likely never accidentally pull too hard again.
51 comments
[ 0.20 ms ] story [ 98.0 ms ] threadThe focus on PullToRefresh.js is to manipulate the DOM and add the elements programatically, and allow its own proportions to push down the content.
EDIT: point taken. Non-touch device
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.
What does that mean?
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.
Edit: typo
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/
http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-so...
For HTML/JS apps though it's a whole different story and might help giving it much more native look and feel.
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.
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.
It's only sad when developers sell UX gyaan on standards on one hand and screw the same standard with things like react elsewhere; only because some large corp says it's cool.
I realize you weren't abusing the person you thought you were, but that's no excuse for breaking HN's rules this badly. Since we've warned you repeatedly about this, we've banned your account.
If you don't want it to be banned, you're welcome to email hn@ycombinator.com. We unban accounts if people give us reason to believe they'll follow the rules in the future.
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.
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:
Very well done, looking forward for more products from you two.
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.
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.
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.