Great, now sites can implement clicking in some confusing, subtly broken way? File this with sites that implement their own broken inertial scrolling, their own broken scrollbars, and their own broken pop-up menus.
Show HN: Make your site’s pages faster than instant in one minute
41–50 of 59 posts
Re: Show HN: Make your site’s pages faster than instant in one minute
#42Don't browsers do this themselves? Preload links on a page you visit? I think firefox calls it pre-fetching.
I don't believe so, no. Imagine how much potential wasted bandwidth that would be for someone on cell data
Chrome has at least experimented with doing it, I don't know if they currently ship it though.
Re: Show HN: Make your site’s pages faster than instant in one minute
#43This was on Show HN last year, big discussion:
Re: Show HN: Make your site’s pages faster than instant in one minute
#44>it triggers the page load when the user starts pressing their mouse This breaks the standard GUI interaction model. Buttons are typically triggered on mouse-up events, not mouse-down, and there's probably good reasons for that. Any client-side hacks that attempt to improve the perceived page speed are somehow bound to break something. If there really is a simple way, it's already been implemented at the browser leve…
Buttons are typically triggered on mouse-up events, not mouse-down, and there's probably good reasons for that.
So you can drag the link somewhere else. Like to the desktop or a text editor or a terminal window.
Re: Show HN: Make your site’s pages faster than instant in one minute
#45I've experimented with instant.page and other similar scripts and it's almost shocking how fast page loading becomes when you are used to a (slight) page loading delay. There are a couple of drawbacks that one has to be aware of - bandwidth, altered ui behavior - but for some use cases where performance is needed and the bandwidth usage is minor, preloading scripts can be very useful.
Re: Show HN: Make your site’s pages faster than instant in one minute
#46This is a clever trick (using mousedown to trigger a click), but breaks drag & dropping links, drag & dropping links to new tabs. and there is also a thing I tend to do: If I notice I pressed the mouse button down on the wrong link, I move the cursor away from that link and let the button go up on the correct or in free space, so the browser doesn't navigate (not sure how common this behaviour is, though)
Didn’t think of drag and dropping links to new tabs! Yeah, that’s a bit of a sad regression. The two other use cases you mention aren’t common at all though.
[deleted]
Re: Show HN: Make your site’s pages faster than instant in one minute
#47>it triggers the page load when the user starts pressing their mouse This breaks the standard GUI interaction model. Buttons are typically triggered on mouse-up events, not mouse-down, and there's probably good reasons for that. Any client-side hacks that attempt to improve the perceived page speed are somehow bound to break something. If there really is a simple way, it's already been implemented at the browser leve…
Buttons are typically triggered on mouse-up events, not mouse-down, and there's probably good reasons for that. So you can drag the link somewhere else. Like to the desktop or a text editor or a terminal window.
Yep. This convention also enables the cancellation of a click, which can be useful if you realise your error mid-click.
Another piece of software egregious for violating this UI convention is Adobe Reader. I remember upgrading to, IIRC v9? and finding that all buttons in it had been changed to actuate on mouse-down, and wondering what the christ the developers were thinking. Perhaps they thought it made their software seem more "responsive".
Re: Show HN: Make your site’s pages faster than instant in one minute
#48>InstantClick provides the smoothest experience possible, while still not requiring as much work as a framework (who give lesser results)
It's not the job of a framework to make such optimizations. But within any framework, you could trivially implement something similar. You could be quite aggressive and fetch + cache on hover.
Re: Show HN: Make your site’s pages faster than instant in one minute
#49Earlier quoted context omitted.
Didn’t think of drag and dropping links to new tabs! Yeah, that’s a bit of a sad regression. The two other use cases you mention aren’t common at all though.
It's extremely common. It is unclear to me if the mousedown event just kicks off preloading of the page, or actually forces you to navigate to the page. If it's the latter, you are breaking decades of mouse ux changing a click from a mousedown followed by mouseup.
+1 I do those as well. Never really thought about how common it could be, but it is pretty natural for me to drag the mouse and let it up somewhere else to prevent incorrect navigation.
Re: Show HN: Make your site’s pages faster than instant in one minute
#50I contemplated using the instant.page techniques a while back, and took version 1.2.2 and stripped it to its bones, removing configurability that I’m never going to use, and golfed it down to 981 bytes/532 gzipped (873/456 sans license comment).
No way would I go past 1.2.2, though, because all it does is introduce more configurability that I don’t want, complications, bugs and misfeatures. (I call triggering load on mouse down catastrophically wrong, 100% dealbreaker with prejudice.)
Here’s the ECMAScript Module (I call it a module so I can skip an IIFE without polluting globals) that I ended up with, in case anyone’s interested. It uses uncommon tricks like reusing variables for different purposes to save a couple of bytes, which will tend to make JITs unhappy, but the JIT would turn up its nose at this lightly-called functionality anyway.
/*! instant.page v1.2.2, (C) 2019 Alexandre Dieulot, https://instant.page/license, shrunk by Chris Morgan */var e,t,a,r=document,n=r.createElement("link"),s=n.relList,o=()=>{e=n.removeAttribute("href")},i=e=>{e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||(t?(clearTimeout(t),t=0):o())},c=t=>!(!t||!t.href)&&(e!=(t=t.href)&&((t=new URL(t)).origin==location.origin&&(!t.hash||t.pathname+t.search!=location.pathname+location.search)));!(s&&s.supports&&s.supports(n.rel="prefetch"))||(s=navigator.connection)&&s.saveData||(r.head.appendChild(n),r.addEventListener("touchstart",t=>{a=performance.now(),c(s=t.target.closest("a"))&&(s.addEventListener("touchcancel",o,{passive:!0}),s.addEventListener("touchend",o,{passive:!0}),n.href=e=s.href)},s={capture:!0,passive:!0}),r.addEventListener("mouseover",r=>{performance.now()-a{n.href=s.href,t=0},65))},s))
(No warranty whatsoever, don’t think I’ve even run the code.)