Hacker Remix

Overengineered Anchor Links

373 points by matser 1 day ago | 147 comments

LinuxAmbulance 1 day ago

As a backend person, sometimes I look at what's being done for front end stuff and pull back in ever so slight horror.

It's an excellent article, and the work within is very well done, but there's a part of me that screams "Why would you introduce this much complexity for what should be a simple scroll?" (overcoming technical hurdles to produce the desired end result aside).

hombre_fatal 20 hours ago

I don't get "as a backend engineer" comments like these.

OP is doing a basic analysis on what kind of solutions exist for a typical UX edge-case. They even provide the simple solution that most people use (margin-bottom).

And for fun they go on to see if they can solve it without the minor drawback of the simple solution.

We've got to stop acting like it's a badge of honor to avoid UX consideration. We might not be people who implement UIs, we use UIs all day and should be able to muster up a few opinions about how a UX interaction should work.

NanoYohaneTSU 14 hours ago

The issue is that UI/UX is in a terrible place. Your comments would be valid if this was 15 years ago.

UX is in the gutter with extra clicks and terrible workflows in almost every website. UI is a catastrophe of mobile first, but not really, but sort of kind of we want power users but we need regular users, and all our UI kits look like total ass that is incompatible with so many other things.

This website is a great example. The webpage doesn't load instantly and instead forces the user to wait for text to appear. Great UX engineering guys, make the user wait!

chatmasta 2 hours ago

Let’s not act like backend dev is much better. They’re two sides of the same coin.

The entire web stack – backend and frontend – is a mess because the nature of the web is cumulative development over two decades, leading to a pile of abstractions upon abstractions that by some miracle remain mostly interoperable and backwards compatible.

hnlmorg 28 minutes ago

More than 3 decades, not 2.

My first website is 3 decades old now.

xnickb 15 hours ago

Looking at the UI of modern apps and websites, I think we're too late with this.

What the mass user finds "intuitive" is already formed and it's in a horrible place and it's hard to go back.

softwreoutthere 15 hours ago

More people use computer applications effectively now than at any previous point in history. You might want to check your priors and consider that taste does not inform usefulness.

madeofpalk 1 day ago

I think the article does a pretty good job of explaining the gap between what can happen easily, and what a 110% over engineered "perfect" solution is to a UX problem.

Building excellent user interfaces is hard, regardless of the technical stack. You have to sweat a lot of the finer details, break out of any platform default behaviour where appropriate, and over engineer something in service of building a 'delightful' user experience.

Or, you can do as most do, and just not do this. #anchor-links with `scroll-behavior: smooth;` CSS will get you the basic smooth scrolling.

maccard 23 hours ago

The really hard part of that is that if you can’t build an excellent interface, you will build a worse one than if you used the native interface. So you either need to be prepared to sweat every last detail forever.

philsnow 1 day ago

Frontend is completely inaccessible to me.

From time to time I dip my toe in and try new things, but as productive as I can get with Astro, the illusion vanishes as soon as I have to understand any of the plumbing.

Fortunately, I can still party like it’s 1999 just fine: just yesterday, I worked on a janky brutalist web app (the same way I did back in 2002, cribbing from the O’Reilly “Dynamic HTML: the Definite Reference”) and “deployed” it with rsync to pico.sh. It’s practically unstyled and I didn’t even use jquery, but it works.

moron4hire 1 day ago

The thing is, backend stuff is largely solved. You need to store data? Here you go, here's a database. You need to process a bunch of strings for similarity? We got an algorithm for that.

But frontend stuff is messy. How do you tell a person what they're trying to do is wrong and they need to change their inputs? Oh, maybe we can highlight the input or we can pop a modal message. Haha, psyche! Users ignore that shit! Now what you gonna do, buddy?

Frontend is a mess because all you people are a mess.

bathtub365 1 day ago

Contempt for your users inevitably leads to bad products so it’s no wonder things are bad if this is the prevalent attitude among front end web developers.

singingboyo 1 day ago

There's a difference between contempt (i.e. "users are stupid") and realism, though. And realism can range from "users don't want to troubleshoot" to "some users are near-violently anti-tech and won't read errors", depending on context.

The unfortunate truth is that if you're doing B2C or even B2B outside of tech companies, the second one will often come up...

Bad devs exist. Bad users do too. Thing is, you can't usually fire the bad users.

Swizec 1 day ago

> And realism can range from "users don't want to troubleshoot" to "some users are near-violently anti-tech and won't read errors", depending on context.

No dude, I have things to do and your little software is a tiny roadblock in my day. I dont want to become a fellow expert in your niche, do the thing and get out of my way.

Building UI for work and for consumers is completely different. I’ve done both, user attitudes are veeeery different. Building an ecommerce page is also very different to building an engagement trap for users to sit in.

Problems start when engineers/designers/producters don’t understand their users and their goals. Or when the user is not also the customer (this is the worst)

oceanlinertax 3 hours ago

[flagged]

throwaway9w4 1 day ago

I agree with you

It reminds me of an online store in the beginning of 2000s

To buy a product, you had to drag&drop the product image over the shopping basket icon. It took me quite a while to figure that out, and I bet they lost a lot of customers.

[Edit: I acknowledge that a PM or manager may have forced the developer to do this, but it's just one example of many]

Sometimes the developers have to take the blame, instead of blaming "stupid" users. Some take that attitude to frameworks as well. If the users complain, they haven't understood how to use it correctly. Just look at the "how to make a todos in 5min" video on YouTube to be convinced of its beauty

moron4hire 1 day ago

Yeah, it's really easy to cherry pick an example from the past of an application probably built by a junior level employee being brow-beat into submission my an MBA-laden PM.

throwaway9w4 1 day ago

You may be right, but this is just one example

Also, backend people can be arrogant as well, but it seems that for some reason new ideas tend to be picked up quicker in frontend, which unfortunately results in bad ideas spreading fast too.

moron4hire 1 day ago

Nah, the front end is just visible. And any errors that originate get surfaced in the front end. All you get to see as a use is "website said no".

It's only now, in the days of "vibe coding" that I would firmly put the sole blame on developers for bad application interfaces, because it's usually just one clueless person who is YOLOing code out into the wild. Everywhere else: hidden icebergs of complexity and you didn't know what led to the current state.

hn_is_all_bots 1 day ago

[flagged]

xmprt 1 day ago

I don't read it as contempt but rather the equivalent of a backend engineer saying that you can't trust user inputs and need to validate, authenticate, and authorize every request.

ChrisMarshallNY 21 hours ago

I wouldn’t call what they wrote as “contempt.” It seems to me, to be cynical realism; something I tend to exhibit, myself.

I like people. I really do. I especially love the users of the software I write, and go well out of my way, to craft the best UI possible.

But I am constantly being blindsided by knuckleheads; some of whom, are really, really smart, educated, and inquisitive people.

I write iOS apps, and spend many, many hours, testing and tweaking. Right now, I am completely rewriting an app, because I couldn’t get the UI right, at the final stage. I realized my fundamentals were borked, and that I needed to go back to the ol’ drawing board, as Wile E. Coyote would say. Many developers would have shipped, but I have the luxury of being able to redo it (I have done it before).

It’s a cool trick, and one that I’d probably use, if I was dedicated to Web design, the way I am, to app design.

robertlagrant 14 hours ago

> The thing is, backend stuff is largely solved. You need to store data? Here you go, here's a database.

That's like saying "You need user interaction? Here you go, here's a frontend."

mattpallissard 1 day ago

> Frontend is a mess because all you people are a mess.

As a backend guy who considers himself extremely fortunate that nearly all of his users/customers are technical, this got an audible chuckle out of me.

pedroma 1 day ago

I'd imagine consumer hardware is the same.

For example, every Thunderbolt dock's internals are basically the same, while the outer shell tries to be as different as possible.

bgro 11 hours ago

Chrome developers keep adding unhinged complicated “features” that nobody wants or asked for and immediately are abused and broken.

Numerous autoplaying video methods for example especially when they follow the mouse, play in the background, or use lazy loading to be unkillable.

Speaking of lazy loading or whatever hundreds of variations probably exist around it now, the terrible front end devs of the world have decided to use that for everything. Everything is a sliding panel full of sliding panels and there’s no way to use browser back features coherently.

Scrolling down a site now loads a new site and destroys your history. Even if you scrolled to move content up because an autoplaying video anchored to the bottom of the screen is blocking the view. Scroll down too far causes a jump and the site decides you’re done and loads the next thing with no way to navigate back.

How do these developers have a job? How are features like this even invented with no critical thought or understanding of real world use cases questioned. It’s again and again and again that we see this.

And the Google team is so proud every time with their demo videos that is painfully obvious they put no thought into it outside of their bubble of them deciding some random thing was technically possible to do as a proof of concept and should therefore be immediately released as a fully supported feature.

type_enthusiast 1 day ago

One could ask: what's the UX purpose of the "active anchor" indicator on the side navigation?

One answer I can think of: if a reader is in the middle of a long section, and the heading is off the screen, it can remind them which section they're in relative to the others.

This indicates (to me, anyway) that it's not a function of which heading you've scrolled to; it's a function of which section is on screen. If you use section-screen-area or something similar to highlight the active section, fiddling with the heading positions becomes unnecessary.

If you have a tiny section at the end that can never take up the majority of the screen, then when the user is reading it, the active indicator won't really be useful anyway.

layer8 1 day ago

I find such active anchors incredibly distracting. It’s like something blinking at the side (or top) just because you’ve scrolled a bit.

Regarding the purported problem they solve, maybe browsers should have an option to show current-heading information, similar to how IDEs show in which function or the like you’re in within the current source file.

hinkley 1 day ago

The blur he put on the floating UI elements was also distracting af.

I would spend political capital not to hire this person.

swyx 1 day ago

or if you sticky the current header, thats 1 line of CSS

dahauns 1 day ago

Please...don't. Vertical space is chronically in short supply.

lukasb 15 hours ago

In my app the user could have an arbitrary number of long documents open on mobile at the same time, vertically stacked. (This UX makes sense for my app because most docs are daily journal entries.) Sticky headers are very useful here.

Now I’m just waiting for scroll-timeline or scroll-state to hit GA so I can shrink stickied headers in pure CSS.

Y-bar 1 day ago

I clicked, thinking that it was perhaps someone who like me was annoyed by Jira's anchors/permalinks which is a <span> with a <button> with a JS event listener on click to load what would normally be an <a href> into the DOM.

But this, this is similar, but different. I can't navigate to anchors with for example the keyboard.

Question for the author: Why not use the HTML <a> element rather than a JS event listener on a non-interactive element?

superkuh 1 day ago

I thought the same. And on this site I cannot even see the proposed anchor link because it's a badly implemented web component custom-element that is all JS defined instead of wrapping actual HTML elements/text. It's such an overengineered anchor link that unless you succssfully execute all the javascript it doesn't appear at all. Very fragile.

> But if you ever had to implement them, you might have encountered the .

Wikipedia is also bad about JS-dependent false anchor links. I can't count the number of times someone "linked" me an "anchor" to an image on a wikipedia article that simply did nothing without javascript. All wikipedia would have to do is put a real html a anchor next to the JS defined one to fix it but despite submitting bugs about this it's never been fixed.

ryandrake 1 day ago

This seems like another case of the web development industry (in general) "fixing" "problems" that aren't really serious problems. I don't know of any user who would be confused by simply being at the bottom of a web page. I didn't look at the code, but my guess is it's a lot of Javascript spending cycles on my machine to solve a non-problem.

I suppose the article author disclosed right away that it's "overegineered" so maybe the post is more of a joke or exercise in absurdity? Nobody would really spend time doing this for a real project, right? RIGHT?

hombre_fatal 1 day ago

Adding padding below the main page content seems ideal since it also fixes the issue where the tail end of the content is stuck at the bottom of the viewport instead of where you'd prefer it.

Maybe a 90vh margin for mobile and 50vh for everything larger.

Hmm, then again you'd still need TFA's solution for the latter case. The margin only solves it on mobile since a 90vh margin on desktop would look ridiculous.

layer8 1 day ago

Absolutely this. You can use that space by having a generous footer with all your contact links and such.

hombre_fatal 1 day ago

Yeah, good point. It's kinda common to have a big footer.

Examples: https://getbootstrap.com/, https://discord.com/, https://tailwindcss.com/

That way on desktop you could get away with a 50vh margin under the content and then another 50vh for the footer. That's free overscroll.

jopsen 1 day ago

Yes, the boring solution is often the best.

rage4774 11 hours ago

Boring or the most simple solution? Okkam’s Razor e.g. and on top of that I feel like problems are nowadays not looked anymore at something to be solved and forgotten but a quest? But I get your point!