hiccupFX.js

Reminds me of the time someone put a string concatenation function behind a server as a dependency just to see how many unskilled programmers would connect to it

They even made a docker package

_s2fz• 5 years ago

Have you got a name? I'm curious.

roryokane2• 5 years ago

Maybe they were thinking of http://left-pad.io/. I found a left-pad Docker image, too, but it’s by someone else: https://hub.docker.com/r/wbinnssmith/leftpad (source: https://github.com/wbinnssmith/leftpad-cli).

vortico• 5 years ago

Bonus: Can this be a pure CSS library?

jspash2• 5 years ago

I thought CSS was generated by JS these days? Apparently it was too difficult to remain its own thing.

brundolf• 5 years ago

I think you could do it with keyframes, though the "randomness" would have to be hard-coded (the same every time)

roryokane2• 5 years ago

Yes, most of it can. I remade this effect using CSS animations, as an exercise:

Demo: https://css-demo-client-side-render-jankiness.roryokane1.rep...

Source code: https://replit.com/@RoryOKane1/CSS-demo-client-side-render-j...

However, a limitation of not using JavaScript is that I can’t randomize the changed properties: the page changes in the same way after every reload.

g8oz• 5 years ago

I do love thinking about all the tree shaking, minifiying and bundling that went into slimming down a website as my browser struggles to decode a few MB of json and makes 20 async calls before fully rendering the screen.

y4mi• 5 years ago

These 20 async calls don't actually need to reestablish the connection nowadays, so you don't actually get a significant performance penalty anymore for doing multiple requests.

Unless the requests are triggered after another request finished of course. That's still significantly impacting loading times

hamburglar• 5 years ago

Not having to reestablish the connection is a nice thing, but 20 round trips is still 20 round trips. Lots of opportunity for delay there.

jcelerier• 5 years ago

These 20 async calls don't actually need to reestablish the connection nowadays, so you don't actually get a significant performance penalty anymore for doing multiple requests.

why is everything so terrible to use then :-(

crate_barre• 5 years ago

A lot of this happens due to a basic lack of understanding of how documents flow at best, pure negligence at worst. Ads and lazy loaded content are being dropped into elements without min heights causing everything to just suddenly shift down. The other thing some of these sites do is take raw lazy loaded json and render a whole view (who would have thought, an on-demand slideshow is jarring if you didn’t account for how it’s gonna just be plopped onto the page). They are also dynamically formatting dates, author names, titles, plopping in client side a/b testing, etc.

Some people really should be fired honestly.

louissan• 5 years ago

Someone must send this to the Google core web vitals (or whatever it's called) team. Their CLS guys/gals will have a fit :-)

blurbleblurble• 5 years ago

sometimes I even click on the wrong thing

thorum• 5 years ago

My favorite is when the link you’re trying to open jumps away 1 nanosecond before you click on it and you wind up clicking something else entirely.

yawnxyz• 5 years ago

Google does this by popping up a bunch of "related links" as soon as you're trying to click on the second link... I honestly thought all those well-paid engineers and UX designers who work there could make something better than that

DarylZero• 5 years ago

They get paid the big bucks to make it worse in the way that benefits the owner

bogwog• 5 years ago

I wonder if that’s the same team responsible for making embedded youtube videos start playing on mobile safari if your finger touches it while you’re just trying to scroll.

Aka, the Evil Department.

nkozyra• 5 years ago

This is so bad I refuse to believe it's inadvertent.

giantrobot2• 5 years ago

I honestly thought all those well-paid engineers and UX designers who work there could make something better than that

Don't forget that you are not Google's customers. Their advertisers are their customers. You're just a product they sell. So the UX does exactly what it is supposed to do: get eyeballs on advertisements.

Even if you click back at Google's scale inadvertent clicks are big money. Besides you seeing something advertised/promoted they got some free tracking data to sell. So long as whatever they linked to managed to load some tracking pixels or even full tracking scripts before you hit the back button that's more tracking data hoovered up. Even just the request for the resource is data for tracking purposes.

jez• 5 years ago

This is yet another reason why I’m glad to have switched away from using Google search. Not even for privacy/advertising/tracking considerations, just general quality of life things like being able to click the whole search result bounding box (not just the top link), never having to suffer with related links appearing on back navigation, no AMP pages, etc.

democracy• 5 years ago

I am sure they can fix it but the fix is going to bring the revenue down so some heads can get chopped. Who wants to put their CV "improved Google search results user experience by increasing the ad revenue by -3%"

8note• 5 years ago

I find the chrome android browser to be the worst for that.

Not only does the page load new things, but google resizes everything just as you click

sneak• 5 years ago

This actually happens on the mobile website during the amazon.com one click checkout when you try to change your payment method.

It's absolutely insane to me that they haven't fixed it yet.

samwillis• 5 years ago

Love it, feels like browsing the web about 20 years ago. (Or a few bad websites now…)

So this is an example of Cumulative Layout Shift (CLS)[0]. It is a metric (coined and named by Google) which indicates how much “movement” there is during the initial render of a page, caused by reflowing the layout. Ideally you have very little or none of it for better UX. I believe it can have an impact on organic search ranking and potentially ad rank.

The most common cause is images included without width and height attributes, therefore the page has to reflow after the image has been downloaded.

Other things that can cause it are multiple css files overriding each other and loading slowly, or JavaScript effecting the layout after it has loaded.

You can use Google Lighthouse [1] to measure this (and other things) on a site.

0: https://web.dev/cls/

1: https://web.dev/measure/

andrepd• 5 years ago

a few

nexuist3• 5 years ago

The irony being that Google themselves doesn't even get good scores on Lighthouse. Check out the report for a simple search for "tomatoes":

https://i.imgur.com/qcaMTBh.png

...although I guess they got a green light on CLS, lol.

URL for transparency: https://www.google.com/search?q=tomatoes&sxsrf=AOaemvKVS3_Ep...

sdflhasjd• 5 years ago

Google search results have these annoying info boxes that automatically slide open, then they score themselves green

amelius2• 5 years ago

Love it, feels like browsing the web about 20 years ago. (Or a few bad websites now…)

Facebook: scroll down your timeline, scroll back up and everything has changed ...

Google: see a nice ad, accidentally click on a different link, click "back", ad is gone ...

joshspankit• 5 years ago

Honestly, this stuff bothers me so much. I’m now subconsciously nervous about clicking the wrong thing and missing the thing I wanted.

reaperducer2• 5 years ago

feels like browsing the web about 20 years ago. (Or a few bad websites now…)

A few? You an I must use very different web sites.

Both of the too-big-to-fail bank web sites I went to today have this problem.

My health insurance web site does this.

I just checked, and unless you're on a really fast connection and a newish computer, Starbucks, Instructables, Pinion Coffee, my local honey farm, Target, PetSmart, and Chewy, Amazon, Twitter, and PetCo all do this.

easrng• 5 years ago

Also web fonts with fallbacks that have different sizes.

zxcvbn40382• 5 years ago

Check out https://nypost.com/ - shifts and redraws constantly, freezes completely needing page killed on a regular basis, consumes high while completely idle, makes iPhone hot if left open on NYPost page (swear their ad network must be mining crypto or something), routine usage crashes iOS browsers. No additional css needed!

jb19913• 5 years ago

Doesn't do this for me, but then all the ad blocking stuff I have installed probably helps.

Sainth• 5 years ago

Not only the NYPost, I have an old gen1 or gen2 iPad and it can't render many modern pages. The browser crashes when it tries to load the ads on many pages. Still perfect for reading HN though.

bgia• 5 years ago

This definitely hits a nerve. Google does that nowadays and I cannot count how many times I have clicked by mistake on these suggested links that show up after all results have already loaded.

hwers• 5 years ago

I feel like this is a symptom of google etc not having enough real competition. If google and twitter were scared for their survival they wouldn't allow slack like janky sites and disrespecting the free speech of their users as much as twitter does.

moralestapia• 5 years ago

Twitter IS scared for its survival though, they just have truly incompetent product leads (+ all the damage from Dopesey's leadership).

Google is only playing deaf while revenue keeps coming.

I don't know which one is worse.

peckrob• 5 years ago

It's hilarious to me how much Google is hammering on content layout shift as a web vital for ranking websites when they're one of the most annoying offenders. I can't tell you how often I have accidentally clicked that "People also search for" box that sometimes loads in beneath the first result, when I am actually trying to click the second result.

It's infuriating, and makes me wonder if anyone at Google actually uses their own product.

richnftio• 5 years ago

It happens when you click on a result, then hit the back button and want to click the next link. Then, just before you click, the suggested links appear.

Maybe they measured clicks and thought this must be a really useful feature.

phist_mcgee• 5 years ago

There's an extension [1] and a ublock filter [2] for this

[1] https://chrome.google.com/webstore/detail/remove-people-also...

[2] google.*##[id^="eob_"]

PaulHoule• 5 years ago

It's not an accident at all. I'm sure some sites are moving content around to make it likely you'll click on an ad. Other forms of click fraud are rife:

This site has ads that cover the content

https://tonyortega.org/

and when you try to close them you will frequently click on the ad instead of the tiny close button. Back in the day the Scientologists would have reported him for click fraud but today they are a shadow of the terror they once were.

mukesh610• 5 years ago

"Suggested searches" are not ads. I'm pretty sure Google does not financially benefit from a user mis-clicking on suggested searches.

nyellin• 5 years ago

Now we're just missing that feature from Google Search which randomizes the order of buttons on the page.

beebeepka2• 5 years ago

Forgive me for saying this but I find all these complaints shallow, or a sign of youth.

Hear me out, though. The reasons are real. The modern web sucks bad but it's been like that for many, many years. Certainly longer than a decade.

From my point of view, as someone who writes js for a living, I started using NoScript a while ago and the web is generally very fast and nothing shifts position on my screen as things (ads) load. Yeah, I don't do social media and some sites are nothing but a blank page. It's a blessing.

I guess my point is: avoid doing things that annoy you. If you don't like js heavy sites - stop using them. Or just adopt NoScript. No, ublock isn't the exact same thing. The granularity is counter productive in this respect.

cyborgx72• 5 years ago

"Don't use some of the most popular sites on the internet if shifting around during loading is annoying to you." isn't very productive advice.

beebeepka2• 5 years ago

Productive? Don't have a short response to the implications here.

In any case, doing things because they are popular doesn't sit well with me. Fast food is popular, and yet I would advise to stay away from most of it

togaen• 5 years ago

The hero we need.

ryanmccullagh• 5 years ago

Lowes.com has the word jankines I've ever used.

jb19913• 5 years ago

We've been using this in production for about six months, with various reactions from users. The results are mixed -- some really like it but others have sent us terrifying emails and we've lost two support staff in the great resignation over it. Your mileage may vary.

hiccupFX.js

Related Stories