8 ms·

Overengineered Anchor Links

392 points by matser 1y ago

lugao 1y ago
[flagged]
- nkozyra 1y ago
  I think you can look at UX like this less like a web page and more like a presentation. In that framing it's more palatable. In general we consume blogs more like traditional web pages, so it feels ... "wrong," but in some ways it keeps all of the content at hand and lets you navigate linearly or back and forth pretty reasonably, the way you might traverse a PPT.
- matser 1y ago
  It's something new IMO but we are definitely working on improving UX still. Fixing the overscroll issue as we speak. I'm assuming you're using mobile, would you prefer it of the 'tiles' all started in an open state? It is not an experiment in how bad front end design can be pushed to be... Although that would be a fun blog post
  - meowface 1y ago
    I think the site looks fine. Just remove whatever is changing the scrolling and adding "smoothness" to it or whatever. Showing stuff as you scroll is cool, but interfering with the scrolling itself is not cool.
  - lugao 1y ago
    I am not on mobile. It all boils down to the way decade old convetions/expectations are broken. The things that look like buttons (and are spans in the html code, not even anchors!) trigger non-local transitions (the left panel thing) when hovered... and they close the opened panel when clicked, so if I move my mouse to click on it the end result is a panel that flashes. I need to keep ignoring the usual button affordance of being clicked and force myself to think they are tiggered on hover. If this isn't bad UX I don't kown what it is.
  - zote 1y ago
    While you're here the little colored buttons, that expand to show more info are neat (note the first one in this article has template text at the moment) ; and when they expand and highlight the text with color they can clip other nearby text
- deleted 1y ago
  [deleted]
carlosdp 1y ago
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 1y ago
  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!
  - ramoz 1y ago
    Just flip them.
  - whiddershins 1y ago
    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?
  - silveraxe93 1y ago
    The way https://gwern.net/ https://gwern.net/ does it is quite good. The links open in a window, so you can still have centre aligned text with popups.
Y-bar 1y 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 1y 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 1y 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?
trainspottinfly 1y ago
Interesting solution. One little tip, I would advise picking a different heading for the section "The final solution". That phrase has a bit of unfortunate historical baggage.
- matser 1y ago
  Ouch, thanks for the heads up
- johnisgood 1y ago
  I have no idea what "The final solution" refers to in terms of this website that is negative; context matters.
  - larusso 1y ago
    It refers to the “Endlösung” of the Jew problem in Nazi germany.
    - deleted 1y ago
      [deleted]
  - unclad5968 1y ago
    https://en.wikipedia.org/wiki/Final_Solution https://en.wikipedia.org/wiki/Final_Solution
  - deleted 1y ago
    [deleted]
  - Jeremy1026 1y ago
    It is the culmination of the holocaust.
    - immibis 1y ago
      The penultimate step. The final step was the Allies stopped the German final solution, and sent them off to colonize Palestine instead (while keeping the gays in the concentration camps because the Allies were homophobic too).
meowface 1y ago
I'm sorry but anything that hijacks the scrollbar in any way is just a no-go. You have to not interfere with scrolling. (Taking some other action on the page during scrolling can be okay, but actually affecting the scrolling itself in any way while you are scrolling should be verboten, in my opinion.)
- matser 1y ago
  Lenis.js (smooth scrolling lib) was actually implemented for some technical reason that is no longer required; so might actually remove it indeed.
- deleted 1y ago
  [deleted]
- Sohcahtoa82 1y ago
  Pages interfering with how scrolling works infuriates me so much that I've often considered writing an extension that tries to disable that behavior, or even compile my own Firefox if I had to.
  - encom 1y ago
    I hope you do. And while you're at it, make it so websites are no longer able to fuck with the scrollbar in any way whatsoever, including but not limited to changing its size or colour.
nizarmah 1y ago
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.
cynicalsecurity 1y ago
Why not open a modal dialog instead?
- encom 1y ago
  The answer to this question should always be "no". Under all circumstances.
awayto 1y ago
I dabbled with this kind of issue in my docs and ended up using JavaScript's Intersection Observer [0]. It's not a perfect solution [1], but I think it worked well enough [2]. It just identifies when the element comes on screen and then marks it as active however you please. I do appreciate the depth the article went into though! [0] https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio... [1] https://github.com/keybittech/awayto-v3/blob/main/landing/layouts/_default/baseof.html#L29 https://github.com/keybittech/awayto-v3/blob/main/landing/la... [2] https://awayto.dev/docs/0.3.0/ https://awayto.dev/docs/0.3.0/
- ruduhudi 1y ago
  This is by far the best solution. Super simple and covers all those issues.
- mason55 1y ago
  FYI - you aren't handling the "scroll up" case. To see what I mean, click "Creating a Feature" then start scrolling up. Notice that "Creating a Feature" is still highlighted even though the entire screen is made up of text from the "Software" section. I probably only noticed this because I recently implemented a similar "active anchor" solution with Intersection Observer.
wrsh07 1y ago
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
- noahjk 1y ago
  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.)
  - creata 1y ago
    Yeah, styling it as a link makes it a bit unclear as to what it's going to do.
    - matser 1y ago
      Thanks!
      - creata 1y ago
        Thanks for publishing the article. Idk if my comment sounded too harsh; sorry if it did. If you're taking more unsolicited nitpicky suggestions, imo the ToC items on the left could use cursor:pointer and a background color change on hover.
  - jw_cook 1y ago
    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?
inetknght 1y ago
So what's going on for someone who doesn't have javascript enabled? No anchor links are available at all.
Philip-J-Fry 1y ago
Sounds like a nice solution. Seems like if you open the "he thinks" image thing at the bottom, and then go back to the "beautiful" result, then it no longer works and the Conclusion heading doesn't get activated. That's how I reproduced it anyway.
soneca 1y ago
Nice read. Although I much prefer the first solution, the hotfix of adding extra padding to the bottom. UX-wise, not just because it is simpler. On large screens I prefer to not read texts at the bottom (I always scroll things enough so I am looking at them at the middle or top of the screen). Also, the positioning of the heading relatively to the screen is always the same on every scroll.
- noahjk 1y ago
  While I usually detest giant footers, this is one use-case they lend benefit to, without causing a large empty space (which some people would then want to fill with an image). I agree from a UX perspective that I prefer when sites act the way I expect them to, and not try to do novel calculations of stuff (minus usability stuff like the ‘dead zone’ dropdown menu polygon calculation). On most pages, I expect a reading section to start when I scroll past a heading, and I prefer anchors to deliver the heading at the top of my viewport.
type_enthusiast 1y 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.
- swyx 1y ago
  or if you sticky the current header, thats 1 line of CSS
  - dahauns 1y ago
    Please...don't. Vertical space is chronically in short supply.
    - lukasb 1y 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.
- layer8 1y 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.
kubb 1y ago
Cool I like the exercise in futility :)
hombre_fatal 1y 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 1y ago
  Absolutely this. You can use that space by having a generous footer with all your contact links and such.
  - hombre_fatal 1y ago
    Yeah, good point. It's kinda common to have a big footer. Examples: https://getbootstrap.com/ https://getbootstrap.com/, https://discord.com/ https://discord.com/, https://tailwindcss.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 1y ago
  Yes, the boring solution is often the best.
  - rage4774 1y 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!
anon115 1y ago
can you make them automatically trigger on scroll if you get close to its section?
deleted 1y ago
[deleted]
LinuxAmbulance 1y 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).
- nkrisc 1y ago
  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 1y ago
    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.
    - nkrisc 1y ago
      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.
      - thaumasiotes 1y ago
        > 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. Yes, you click on the link and the text you were supposed to have jumped to is in the wrong place. But the "solution" here takes this very problem and expands it to cover the entire sample article instead of just the bottom of the sample article. How is that an improvement?
asynchronousx 1y ago
Just came to say the blog site itself is awesome, I’d advocate for opening the diagrams automatically on mobile, they’re amazingly slick.
- layer8 1y ago
  I missed that there were diagrams because I immediately activated reader mode at the top.
Etheryte 1y ago
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.
sprobertson 1y ago
FYI on the topic of scroll position, it seems inconsistent between history navigation. For example scroll to the very bottom, click your Internship blog post, and go back - it ends up somewhere towards the end but not quite. (Chrome Mac) On mobile just clicking the other blog post takes me to the end of that post. (Chrome iOS)
jer0me 1y ago
Another solution I quite like is highlighting the headings of all the sections that are currently on screen.
- codazoda 1y ago
  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 1y ago
  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.
sntran 1y ago
The new CSS Overflow Specification 5 has scroll-marker that can replace anchor link. From my short test in Chrome 135, they seem to scroll to the right place.
whirlwin 1y ago
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/Fragment/Text_fragments https://developer.mozilla.org/en-US/docs/Web/URI/Reference/F...
- mhitza 1y ago
  Interesting that none of those examples work on Brave on mobile. I wonder if those been used covertly for user tracking somehow before.
hn_is_all_bots 1y ago
[flagged]
JackYoustra 1y ago
Fantastic blog post. I love constrained optimization, it's always pretty to throw a solver at a well-defined problem
daef 1y ago
my first instinct would be to let the triggerline move with the scrollposition, i.e. at scrollTop = 0 the triggerline is at 0vh and at scrollTop=max at 100vh... am i missing something?
- riz_ 1y ago
  this is the best solution.
miragecraft 1y ago
In the final demo, when I click on "Conclusion" in the side nav, it doesn't even bring the content into view.
- deleted 1y ago
  [deleted]
j_san 1y ago
Hey, another overengineer! :D My solution was to just highlight the last anchor if the user scrolled to the very bottom. Although this might skip the second last heading if its too close to the bottom. See here: https://sharezone.net/privacy-policy https://sharezone.net/privacy-policy (most visible on desktop, on mobile you have to open the "Inhaltsverzeichnis" at the bottom)
watersb 1y ago
As of iOS 18.4, macOS 15.4, Details/Summary HTML tags can be styled with CSS. Which might be an approach for the first few examples. I am sure there are other cases that would need anchors.
cmgriffing 1y ago
I recently discovered the way Tanstack does this. Basically, if the heading of the section is in the viewport, then the list item is highlighted. So you could have multiple items highlighted, but it still "works" somewhat intuitively for the end user. The drawback is that it requires JS via intersection observer. But maybe the CSS standards committee could see value in this kind of thing eventually.
uses 1y ago
It's an interesting problem - the approach I've taken in the past is to simply highlight all sections that are on the screen. This is pretty straightforward to do nowadays with intersectionObserver.
porridgeraisin 1y ago
On Android, both the first and last example scroll to "Conclusion" in the exact same way for me, and the heading shows up in the same place within the div they are showing the examples in.
jineshkrishnan 1y ago
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.
NanoYohaneTSU 1y ago
Terrible culture that rewards psychopathy. Every CEO is an insane individual that has no remorse for any terrible action they do. This makes perfect sense that their entire corporation would reward breaking rules. It's what they would do afterall.
robertlagrant 1y ago
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.
- jiehong 1y ago
  Highlighting the heading to scroll to is a must. It’s what headings maps extension does when you click on one [0]. [0]: https://addons.mozilla.org/en-US/firefox/addon/headingsmap/ https://addons.mozilla.org/en-US/firefox/addon/headingsmap/
askew 1y ago
It's a shame that the overengineered anchor links in TFA don't work with the keyboard.
hk1337 1y ago
Reading the main content at the bottom right of the window is weird.
DamonHD 1y ago
So over-engineered that I cannot even see them until I enable multiple rounds of JavaScript. And the colour scheme ignores my preferences and hurts my eyes. I backed right out of whatever that was.
crooked-v 1y ago
I find this layout extremely weird and distracting to the point that I couldn't manage to get through the article at all. I would much rather have the fancy stuff as inline callouts, with none of the giant attention-grabbing bright buttons in the middle of the text.
hoten 1y ago
Another potential option is to allow for multiple "active" states (everything in view). If the content is long enough, it can kinda work out. As you transition from one section to the next, both headers would be "active". For short content it would highlight too much though. snake-y example: https://zquestclassic.com/releases/2.55.0/ https://zquestclassic.com/releases/2.55.0/
DavidVoid 1y ago
IMO, the most important UX features for anchor links is that you should be able to send them to other people (and save them via bookmarks). Say that you find yourself needing to check the "Control code table" section of the Wikipedia ASCII article from time to time (for some reason). Being able to bookmark that specific section[1] is much more convenient than having to always start from the top of the page[2] and then scroll down (or click some on some anchor link) to get where you actually want to go. This thirty-five website doesn't seem to offer that functionality because it doesn't use #anchor-name URLs. [1]: https://en.wikipedia.org/wiki/ASCII#Control_code_table https://en.wikipedia.org/wiki/ASCII#Control_code_table [2]: https://en.wikipedia.org/wiki/ASCII https://en.wikipedia.org/wiki/ASCII
Georgesortiz900 1y ago
[dead]

392 points by matser 1y ago

lugao 1y ago

[flagged]

nkozyra 1y ago
I think you can look at UX like this less like a web page and more like a presentation. In that framing it's more palatable. In general we consume blogs more like traditional web pages, so it feels ... "wrong," but in some ways it keeps all of the content at hand and lets you navigate linearly or back and forth pretty reasonably, the way you might traverse a PPT.
matser 1y ago
It's something new IMO but we are definitely working on improving UX still. Fixing the overscroll issue as we speak. I'm assuming you're using mobile, would you prefer it of the 'tiles' all started in an open state? It is not an experiment in how bad front end design can be pushed to be... Although that would be a fun blog post
- meowface 1y ago
  I think the site looks fine. Just remove whatever is changing the scrolling and adding "smoothness" to it or whatever. Showing stuff as you scroll is cool, but interfering with the scrolling itself is not cool.
- lugao 1y ago
  I am not on mobile. It all boils down to the way decade old convetions/expectations are broken. The things that look like buttons (and are spans in the html code, not even anchors!) trigger non-local transitions (the left panel thing) when hovered... and they close the opened panel when clicked, so if I move my mouse to click on it the end result is a panel that flashes. I need to keep ignoring the usual button affordance of being clicked and force myself to think they are tiggered on hover. If this isn't bad UX I don't kown what it is.
- zote 1y ago
  While you're here the little colored buttons, that expand to show more info are neat (note the first one in this article has template text at the moment) ; and when they expand and highlight the text with color they can clip other nearby text
deleted 1y ago
[deleted]

carlosdp 1y ago

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 1y ago
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!
- ramoz 1y ago
  Just flip them.
- whiddershins 1y ago
  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?
- silveraxe93 1y ago
  The way https://gwern.net/ https://gwern.net/ does it is quite good. The links open in a window, so you can still have centre aligned text with popups.

Y-bar 1y 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 1y 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 1y 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?

trainspottinfly 1y ago

Interesting solution. One little tip, I would advise picking a different heading for the section "The final solution". That phrase has a bit of unfortunate historical baggage.

matser 1y ago
Ouch, thanks for the heads up
johnisgood 1y ago
I have no idea what "The final solution" refers to in terms of this website that is negative; context matters.
- larusso 1y ago
  It refers to the “Endlösung” of the Jew problem in Nazi germany.
  - deleted 1y ago
    [deleted]
- unclad5968 1y ago
  https://en.wikipedia.org/wiki/Final_Solution https://en.wikipedia.org/wiki/Final_Solution
- deleted 1y ago
  [deleted]
- Jeremy1026 1y ago
  It is the culmination of the holocaust.
  - immibis 1y ago
    The penultimate step. The final step was the Allies stopped the German final solution, and sent them off to colonize Palestine instead (while keeping the gays in the concentration camps because the Allies were homophobic too).

meowface 1y ago

I'm sorry but anything that hijacks the scrollbar in any way is just a no-go. You have to not interfere with scrolling. (Taking some other action on the page during scrolling can be okay, but actually affecting the scrolling itself in any way while you are scrolling should be verboten, in my opinion.)

matser 1y ago
Lenis.js (smooth scrolling lib) was actually implemented for some technical reason that is no longer required; so might actually remove it indeed.
deleted 1y ago
[deleted]
Sohcahtoa82 1y ago
Pages interfering with how scrolling works infuriates me so much that I've often considered writing an extension that tries to disable that behavior, or even compile my own Firefox if I had to.
- encom 1y ago
  I hope you do. And while you're at it, make it so websites are no longer able to fuck with the scrollbar in any way whatsoever, including but not limited to changing its size or colour.

nizarmah 1y ago

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.

cynicalsecurity 1y ago

Why not open a modal dialog instead?

encom 1y ago
The answer to this question should always be "no". Under all circumstances.

awayto 1y ago

I dabbled with this kind of issue in my docs and ended up using JavaScript's Intersection Observer [0]. It's not a perfect solution [1], but I think it worked well enough [2]. It just identifies when the element comes on screen and then marks it as active however you please. I do appreciate the depth the article went into though! [0] https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio... [1] https://github.com/keybittech/awayto-v3/blob/main/landing/layouts/_default/baseof.html#L29 https://github.com/keybittech/awayto-v3/blob/main/landing/la... [2] https://awayto.dev/docs/0.3.0/ https://awayto.dev/docs/0.3.0/

ruduhudi 1y ago
This is by far the best solution. Super simple and covers all those issues.
mason55 1y ago
FYI - you aren't handling the "scroll up" case. To see what I mean, click "Creating a Feature" then start scrolling up. Notice that "Creating a Feature" is still highlighted even though the entire screen is made up of text from the "Software" section. I probably only noticed this because I recently implemented a similar "active anchor" solution with Intersection Observer.

wrsh07 1y ago

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

noahjk 1y ago
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.)
- creata 1y ago
  Yeah, styling it as a link makes it a bit unclear as to what it's going to do.
  - matser 1y ago
    Thanks!
    - creata 1y ago
      Thanks for publishing the article. Idk if my comment sounded too harsh; sorry if it did. If you're taking more unsolicited nitpicky suggestions, imo the ToC items on the left could use cursor:pointer and a background color change on hover.
- jw_cook 1y ago
  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?

inetknght 1y ago

So what's going on for someone who doesn't have javascript enabled? No anchor links are available at all.

Philip-J-Fry 1y ago

Sounds like a nice solution. Seems like if you open the "he thinks" image thing at the bottom, and then go back to the "beautiful" result, then it no longer works and the Conclusion heading doesn't get activated. That's how I reproduced it anyway.

soneca 1y ago

Nice read. Although I much prefer the first solution, the hotfix of adding extra padding to the bottom. UX-wise, not just because it is simpler. On large screens I prefer to not read texts at the bottom (I always scroll things enough so I am looking at them at the middle or top of the screen). Also, the positioning of the heading relatively to the screen is always the same on every scroll.

noahjk 1y ago
While I usually detest giant footers, this is one use-case they lend benefit to, without causing a large empty space (which some people would then want to fill with an image). I agree from a UX perspective that I prefer when sites act the way I expect them to, and not try to do novel calculations of stuff (minus usability stuff like the ‘dead zone’ dropdown menu polygon calculation). On most pages, I expect a reading section to start when I scroll past a heading, and I prefer anchors to deliver the heading at the top of my viewport.

type_enthusiast 1y 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.

swyx 1y ago
or if you sticky the current header, thats 1 line of CSS
- dahauns 1y ago
  Please...don't. Vertical space is chronically in short supply.
  - lukasb 1y 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.
layer8 1y 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.

kubb 1y ago

Cool I like the exercise in futility :)

hombre_fatal 1y 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 1y ago
Absolutely this. You can use that space by having a generous footer with all your contact links and such.
- hombre_fatal 1y ago
  Yeah, good point. It's kinda common to have a big footer. Examples: https://getbootstrap.com/ https://getbootstrap.com/, https://discord.com/ https://discord.com/, https://tailwindcss.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 1y ago
Yes, the boring solution is often the best.
- rage4774 1y 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!

anon115 1y ago

can you make them automatically trigger on scroll if you get close to its section?

deleted 1y ago

[deleted]

LinuxAmbulance 1y 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).

nkrisc 1y ago
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 1y ago
  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.
  - nkrisc 1y ago
    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.
    - thaumasiotes 1y ago
      > 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. Yes, you click on the link and the text you were supposed to have jumped to is in the wrong place. But the "solution" here takes this very problem and expands it to cover the entire sample article instead of just the bottom of the sample article. How is that an improvement?

asynchronousx 1y ago

Just came to say the blog site itself is awesome, I’d advocate for opening the diagrams automatically on mobile, they’re amazingly slick.

layer8 1y ago
I missed that there were diagrams because I immediately activated reader mode at the top.

Etheryte 1y ago

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.

sprobertson 1y ago

FYI on the topic of scroll position, it seems inconsistent between history navigation. For example scroll to the very bottom, click your Internship blog post, and go back - it ends up somewhere towards the end but not quite. (Chrome Mac) On mobile just clicking the other blog post takes me to the end of that post. (Chrome iOS)

jer0me 1y ago

Another solution I quite like is highlighting the headings of all the sections that are currently on screen.

codazoda 1y ago
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 1y ago
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.

sntran 1y ago

The new CSS Overflow Specification 5 has scroll-marker that can replace anchor link. From my short test in Chrome 135, they seem to scroll to the right place.

whirlwin 1y ago

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/Fragment/Text_fragments https://developer.mozilla.org/en-US/docs/Web/URI/Reference/F...

mhitza 1y ago
Interesting that none of those examples work on Brave on mobile. I wonder if those been used covertly for user tracking somehow before.

hn_is_all_bots 1y ago

[flagged]

JackYoustra 1y ago

Fantastic blog post. I love constrained optimization, it's always pretty to throw a solver at a well-defined problem

daef 1y ago

my first instinct would be to let the triggerline move with the scrollposition, i.e. at scrollTop = 0 the triggerline is at 0vh and at scrollTop=max at 100vh... am i missing something?

riz_ 1y ago
this is the best solution.

miragecraft 1y ago

In the final demo, when I click on "Conclusion" in the side nav, it doesn't even bring the content into view.

deleted 1y ago
[deleted]

j_san 1y ago

Hey, another overengineer! :D My solution was to just highlight the last anchor if the user scrolled to the very bottom. Although this might skip the second last heading if its too close to the bottom. See here: https://sharezone.net/privacy-policy https://sharezone.net/privacy-policy (most visible on desktop, on mobile you have to open the "Inhaltsverzeichnis" at the bottom)

watersb 1y ago

As of iOS 18.4, macOS 15.4, Details/Summary HTML tags can be styled with CSS. Which might be an approach for the first few examples. I am sure there are other cases that would need anchors.

cmgriffing 1y ago

I recently discovered the way Tanstack does this. Basically, if the heading of the section is in the viewport, then the list item is highlighted. So you could have multiple items highlighted, but it still "works" somewhat intuitively for the end user. The drawback is that it requires JS via intersection observer. But maybe the CSS standards committee could see value in this kind of thing eventually.

uses 1y ago

It's an interesting problem - the approach I've taken in the past is to simply highlight all sections that are on the screen. This is pretty straightforward to do nowadays with intersectionObserver.

porridgeraisin 1y ago

On Android, both the first and last example scroll to "Conclusion" in the exact same way for me, and the heading shows up in the same place within the div they are showing the examples in.

jineshkrishnan 1y ago

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.

NanoYohaneTSU 1y ago

Terrible culture that rewards psychopathy. Every CEO is an insane individual that has no remorse for any terrible action they do. This makes perfect sense that their entire corporation would reward breaking rules. It's what they would do afterall.

robertlagrant 1y ago

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.

jiehong 1y ago
Highlighting the heading to scroll to is a must. It’s what headings maps extension does when you click on one [0]. [0]: https://addons.mozilla.org/en-US/firefox/addon/headingsmap/ https://addons.mozilla.org/en-US/firefox/addon/headingsmap/

askew 1y ago

It's a shame that the overengineered anchor links in TFA don't work with the keyboard.

hk1337 1y ago

Reading the main content at the bottom right of the window is weird.

DamonHD 1y ago

So over-engineered that I cannot even see them until I enable multiple rounds of JavaScript. And the colour scheme ignores my preferences and hurts my eyes. I backed right out of whatever that was.

crooked-v 1y ago

I find this layout extremely weird and distracting to the point that I couldn't manage to get through the article at all. I would much rather have the fancy stuff as inline callouts, with none of the giant attention-grabbing bright buttons in the middle of the text.

hoten 1y ago

Another potential option is to allow for multiple "active" states (everything in view). If the content is long enough, it can kinda work out. As you transition from one section to the next, both headers would be "active". For short content it would highlight too much though. snake-y example: https://zquestclassic.com/releases/2.55.0/ https://zquestclassic.com/releases/2.55.0/

DavidVoid 1y ago

IMO, the most important UX features for anchor links is that you should be able to send them to other people (and save them via bookmarks). Say that you find yourself needing to check the "Control code table" section of the Wikipedia ASCII article from time to time (for some reason). Being able to bookmark that specific section[1] is much more convenient than having to always start from the top of the page[2] and then scroll down (or click some on some anchor link) to get where you actually want to go. This thirty-five website doesn't seem to offer that functionality because it doesn't use #anchor-name URLs. [1]: https://en.wikipedia.org/wiki/ASCII#Control_code_table https://en.wikipedia.org/wiki/ASCII#Control_code_table [2]: https://en.wikipedia.org/wiki/ASCII https://en.wikipedia.org/wiki/ASCII

Georgesortiz900 1y ago

[dead]