[HN Gopher] Hiccupfx.js - Client side render feel
___________________________________________________________________
Hiccupfx.js - Client side render feel
Author : rvieira
Score : 227 points
Date : 2022-01-15 18:27 UTC (4 hours ago)
(HTM) web link (hiccupfx.telnet.asia)
(TXT) w3m dump (hiccupfx.telnet.asia)
| nyellin wrote:
| Now we're just missing that feature from Google Search which
| randomizes the order of buttons on the page.
| beebeepka wrote:
| 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.
| bob1029 wrote:
| This kind of jank _should be_ unforgivable in a modern webapp. I
| am happy to see it being shamed appropriately.
| Raed667 wrote:
| i didn't come here to be attacked like this /s
| ss108 wrote:
| Was literally just dealing with this issue while trying to use
| Gilt. Happens all the time nowadays. Less server-side rendering
| The_rationalist wrote:
| OK this is amazing
| louissan wrote:
| Someone must send this to the Google core web vitals (or whatever
| it's called) team. Their CLS guys/gals will have a fit :-)
| The_rationalist wrote:
| where's the code?
| Raed667 wrote:
| You can remove the `.min` from the URL and it easily readable
|
| https://cdn.jsdelivr.net/npm/hiccupfx@1.1.1/hiccupfx.js
| teaearlgraycold wrote:
| Why the leading ;?
| Raed667 wrote:
| It's for avoiding syntax issues, when you import multiple
| self-invoking functions.
|
| Here is a stackoverflow that explains it
| https://stackoverflow.com/a/7365214/4690715
| jspash wrote:
| Some build techniques simply concatenate scripts instead of
| transpiling etc. And there is no telling how the previous
| script ended (or not). I seem to remember this is done to
| mitigate some issues that can arise from poorly written
| scripts that come before this one.
| udia wrote:
| https://github.com/fanfare/hiccupfx/
| vmception wrote:
| 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
| bgia wrote:
| 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 wrote:
| 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.
| peckrob wrote:
| 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.
| macawfish wrote:
| sometimes I even click on the wrong thing
| vortico wrote:
| Bonus: Can this be a pure CSS library?
| jspash wrote:
| I thought CSS was generated by JS these days? Apparently it was
| too difficult to remain its own thing.
| samwillis wrote:
| 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/
| amelius wrote:
| > 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 ...
| andrepd wrote:
| >a few
| nexuist wrote:
| 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...
| thorum wrote:
| 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.
| 8note wrote:
| 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
| yawnxyz wrote:
| 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 wrote:
| They get paid the big bucks to make it worse in the way that
| benefits the owner
| draw_down wrote:
| bogwog wrote:
| 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.
| tobr wrote:
| Yeah what's up with that, it wasn't like that mere weeks
| ago.
| nkozyra wrote:
| This is so bad I refuse to believe it's inadvertent.
| g8oz wrote:
| 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 wrote:
| 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 wrote:
| 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.
| giantrobot wrote:
| Yeah this is something people love to gloss over. On good
| 5G the connection latency might be 15-20ms to some
| topographically "close" server. Realistically that's an
| absolute minimum and you'll see 50-100ms latency to actual
| servers.
|
| When work depends on those resources it can't even _start_
| until all the data is returned. Far too often nothing can
| happen until a case are of resources gets returned. Then
| there 's the fun outlier of some slow AdTech script that
| finally returns, screws with the DOM, and causes a layout
| and repaint.
|
| It's just today's "What Andy Giveth, Bill Taketh". Great
| job all around everyone.
| jcelerier wrote:
| > 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 :-(
| nexuist wrote:
| Ads, ads, and more ads. The Internet with an ad blocker vs.
| without is like a completely different universe.
|
| Most sites load pretty quickly with ads blocked, even
| complicated over-engineered SPAs.
| csande17 wrote:
| Because in practice, the 20 async calls are never actually
| made in parallel. The site makes one call, waits for it to
| finish, downloads a few more scripts, makes another call,
| parses the results of that call using an accidentally-
| quadratic-time algorithm, sends a bunch of tracking events
| over WebSockets and waits for them to finish, makes another
| call, uses that call to trigger a full-page React/Redux re-
| render, schedules _another_ call in an asynchronous render
| effect handler...
| erichanson wrote:
| LMAO
| crate_barre wrote:
| 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.
___________________________________________________________________
(page generated 2022-01-15 23:00 UTC)