Overengineered Anchor Links
144 comments
·April 3, 2025LinuxAmbulance
hombre_fatal
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
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!
xnickb
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
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
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
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
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
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.
robertlagrant
> 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."
bathtub365
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.
mattpallissard
> 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
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.
myth2018
I think the biggest problem is that HTML and even HTTP weren't developed with those use cases in mind.
Before WWW was a thing we already had user interfaces and the fact that current users frequently prefer those ancient, text user interfaces over modern ones tells a real LOT.
lenkite
Well if it continues to be a mess, something like WASM-based flutter-web might just eat the frontend
busymom0
I believe it's because on the frontend, everyone wants to look different and have a unique identity. Whereas on the backend, everyone needs to be the same to follow standard best practices.
null
nkrisc
Because the default behavior, the problem they describe in the introduction, is bad. It confuses many people, I’ve seen it firsthand many times as an observer in usability testing.
erikpukinskis
Is it really necessary to highlight the heading at all?
I’m a passionate frontend engineer, but I do think we are often busy “asking if we could”, and ignore “if we should”.
Worth noticing, on mobile you can’t even read the conclusion in the “it’s beautiful” demo, because the navigation covers it.
I understand that it is just a demo, and that issue could be solved independently…
But I think it also points at the observation that when you try to do these kinds of unusual things, you open yourself to unintended consequences.
And while you can mitigate those consequences one by one, my experience is that you generally won’t have a chance nailing them all, unless you are also minimizing their number… by not getting too fancy.
hombre_fatal
> Is it really necessary to highlight the heading at all?
You should be able to take a given UX and ask yourself if it can be improved.
A table of contents that tells you where you are on the page is useful.
Here's an implementation: https://getbootstrap.com/docs/5.3/components/modal/
On desktop, the table of contents on the right shows you which header you're on.
nkrisc
All I know is the default browser behavior for anchor links within a page has real usability issues when you have anchored headings at the bottom of the page.
You are correct though that there are many cures worse than the disease, but it is a real "disease", so to speak.
matser
Because I thought it would be fun :)
steve_adams_86
It is fun! The person you're responding to isn't wrong; front end is a little horrifying. But it's kind of like a jungle in that the scary beasts, swamps, poisonous plants, and the harsh elements are accompanied by incredible opportunities to experiment, explore, discover, and appreciate beauty.
Backend presents some awesome opportunities too, but I absolutely love weird problems like the one you're solving here. It's in the realm of simultaneously necessary and totally unnecessary. This is where interesting stuff happens!
null
tshaddox
You say "backend" but I'm guessing you're not talking about modern cloud infrastructure work, the complexity at which I (as a frontend person) scream in similar abject horror.
megadata
> too far down to scroll
Yeah, when you can't easily scroll anymore because it's "too far" then something has gone very, very wrong.
robertlagrant
For my Firefox desktop, even the "beautiful solution" at the end highlights "Middle Section" even if the Conclusion is fully visible, but I'm just not quite at the bottom of the page in terms of scroll.
Surely the answer is to highlight all onscreen anchors. You don't know where my eyes are looking on a page with two headings on it.
type_enthusiast
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
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
The blur he put on the floating UI elements was also distracting af.
I would spend political capital not to hire this person.
swyx
or if you sticky the current header, thats 1 line of CSS
dahauns
Please...don't. Vertical space is chronically in short supply.
lukasb
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
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
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
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
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
Absolutely this. You can use that space by having a generous footer with all your contact links and such.
hombre_fatal
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
Yes, the boring solution is often the best.
whirlwin
In modern browsers, Text fragments let you highlight specific portions of text on a page, be it at the bottom or anywhere. In Chrome, just highlight the text and right click -> Copy link to highlight.
I use it every day instead of anchors to highlight very specific parts of the text, to avoid referring to the whole section with an anchor. Some pages don't even have anchors
Ref: https://developer.mozilla.org/en-US/docs/Web/URI/Reference/F...
mhitza
Interesting that none of those examples work on Brave on mobile. I wonder if those been used covertly for user tracking somehow before.
wrsh07
It's hilarious reading the other comments. I'm on mobile but my first thought was how interesting and novel the site design was and how clearly communicated the problem they were trying to solve
Cool post! It's refreshing to read a blog that doesn't ask me to subscribe with popups etc and gets into technical weeds
matser
Thanks! Site is still in stealth alpha and posted an article here in hopes to get -some- feedback. Didn't expect this kind of anger hahah. Very grateful for the positive comments though.
Im on the fence about pre-opening the 'tiles' on mobile. Do you (or anyone else) have any strong opinions on that?
wrsh07
I thought everything was pretty easy to use as soon as I realized what clicking a button would do (a little trickiness if you open the tile while the button is nearly off the top of the screen but honestly really great)
Because I don't know what the drop off rate is when someone reads this, take what I say with lots of salt.
Giving one button as a demo and then saying click on button to close (and leaving it implicit that the rest of the buttons need to be opened manually) seems good? Leaving them closed by default worked great for me!
tyzoid
I'm not seeing them show up, with or without JS enabled (firefox on android). I might suggest having some interaction for non-js users though (details element, perhaps?)
regularjack
Incredible work, ignore the naysayers. As I was reading the article, I was thinking "this is hacker spirit". Well done.
noahjk
Once I got over my fear of clicking their links, which I assumed would open a new page (but instead just expanded a pane in-line), I really enjoyed it. I’m very wary of opening new pages. (Also, I first tried to hold-click on the link to open in new tab, but it just behaved like regular text and highlighted, which led to a momentary confusion. I would have preferred a more obvious indication of what would happen when clicking, like a down chevron or something.)
jw_cook
I also assumed those were going to be links, but after a second of confusion I really liked the side pane with animations. It adds a lot to the article and it's more pleasant than the usual alternatives (lightbox on top of the text, or opening a bunch of tabs).
Off the top of my head, I'm not sure how else you'd visually communicate "this bit is interactive on click/hover but isn't a link." Maybe a different text color (without underline), background color, outline (replaced by the colored highlight bar on hover), or a slightly larger and more distinct icon to replace the generic 'image' icon?
gwern
> the site design was and how clearly communicated the problem they were trying to solve
I don't agree with either. Even after I enabled JS (no warning) and then after reading the whole page, finally realized that the implementation of popins was completely broken on Firefox and switched to Chrome to reread it (it doesn't help that the first 'link' is not a link†, and the link says it's 'broken' but it means broken in a different way from being actually broken so when you click on it and nothing happens, you infer that nothing was supposed to happen, which is why you were told it was broken...), I still couldn't understand WTF the problem was or how any of this could be remotely justified compared to an ordinary ToC and section headers or anchors.
† I'll just note that I have looked at many, many sidenote implementations (https://gwern.net/sidenotes) and the choice to make your sidenote/footnote link look exactly like a regular link is an... interesting choice.
null
carlosdp
The article is a neat read! The design of the blog itself is even more interesting. I don't love the right-aligned way it starts, but I love the inline activations of the left popup! So cool
matser
Thanks! It has some cons, like worse scanability. But I think its really cool that you can have something open next to your paragraph, especially when you need to consult the popup quite often. Like, a table with a bunch of data would also be quite nice with this approach I feel.
If you have any feedback I'd love to hear it!
silveraxe93
The way https://gwern.net/ does it is quite good.
The links open in a window, so you can still have centre aligned text with popups.
ramoz
Just flip them.
whiddershins
i've been wanting to implement a design like this for blogs for 5 or 10 years. Great work on the inline detail on mobile. genuinely better than whatever i would have made.
did you consider pushing the word(s) directly following the activation button to below the detail pane, rather than doing it based on line break?
jer0me
Another solution I quite like is highlighting the headings of all the sections that are currently on screen.
codazoda
I agree…
I don’t think this is a real problem that needs solving; or I at least think it’s a problem browser vendors should solve, but lets over engineer it while still trying to keep it simple and usable…
What I might do is something similar to what you’re suggesting. I would have the anchor tag be a regular old anchor tag. Then, I’d highlight the heading (maybe just temporarily) at the same time. I’d use CSS if I could figure that out or JS if I couldn’t. The end result would send the user to the normal place and flash a highlight on the heading for users with JS support.
Keep it simple, but over engineer it to make whoever requested this happy.
Edit: After re-reading your response we probably aren’t talking about the same thing, exactly.
technojamin
This seems like the obvious solution to me. You don't know what the user's eyes are looking at, so making the highlighting a visual representation of what's in the viewport seems preferable than nominating a single section as "current".
In fact the final solution is pretty bad. Sure, it looks nice when I scroll down, but when I use the alternative navigation method of clicking the sidebar items, it just scrolls to unexpected places.
Beautiful article, though.
Etheryte
Another aspect of over engineered anchor links seems to be that at least on Chrome on iOS, back navigation doesn't work properly on this site as a whole.
nizarmah
The animations on the left are exactly what my primitive mind needs to understand better and stay engaged while reading an article. I _love_ it.
jineshkrishnan
Nicely presented article. The way anchor opens up and not letting go the context is good. Overall visual and the ease to access information is appreciated.
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).