Hacker News Reader

Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!

If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again!

I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable.

(My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)

The flipping-between is a great hack -- as you said your eyes (really, brain) just do the work for you.

I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you.

I likewise tucked that little trick into my belt -- it comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free.

Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)

Whoa that's fascinating! Thank you so much for sharing this, I never would've thought of it that way at all.

If you put two proofs side by side, you can view from the right distance then uncross or cross your eyes like a stereogram till they converge, which makes differences shimmer.

Instant "spot the difference" solve.

// Long time in print and digital agency

And once you have the hang of this technique, congratulations! You can now enjoy those 3D "Magic Eye" images that stumped a significant portion of the population back in the 90s :)

e.g. https://old.reddit.com/r/woahdude/comments/1lxqd0l/the_most_...

Right, “like a stereogram”!

https://en.wikipedia.org/wiki/Autostereogram

I use ScreenFloat[0] in a similar way to catch differences between GUI settings, like the cPanel PHP extensions selector, which has tons of checkboxes. Position a screenshot of settings for site A over the settings for site B, adjust the transparency, and any differences will jump out.

[0] https://eternalstorms.at/ScreenFloat/

No, the opinion is valid. And it's not hard to do, what you're describing. In fact, it's easier than what I've actually done here.

I also had a lot of trouble figuring out which side was supposed to be which.

Don't even have a button. Just put both items next to each other.

I'd like to imagine I know which of each example were better designed, but the handle going to the side opposite from the label was making me second guess. Move handle away from the label to reveal is how I took it, so hope that's what you intended.

OTOH, I'm on touch screen (iPad/iOS26/WebKit) and it didn't go up and down, it went side to side.

As other feedback, the dumpster fire and deprecation warnings in the docs make me want to try this. I find builder-to-builder candor refreshingly helpful, treating your doc reader like an actual partner instead of like a euphemism. Appreciate your same candor throughout these comments.

Chainlift > Agency Services > Team menu option seems inert.

I'm not on LinkedIn all that much but I'm there.

I always found this UI pattern a bit odd, because there just aren't that many situations where you want to compare the left side of image A and the right side of image B.

I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied.

One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it.

But I made two additions to it that make it more useful IMO:

- have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at

- click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching)

I have a video of it in action here:

https://lutlab.com/#viewer-photo

I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.

it's bad UX. There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...

If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways!

(And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)

Ironically a UX double entendre that misses both.

I agree, the x-axis labels are not helpful! Thankfully, the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left (a bigger difference in quality than in the other two examples), which is visible when the slider is on the left.

Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.

Thanks for the tip! That actually was the first idea but I didn't end up doing it, for some reason. Thanks for the suggestion.

... just to be a (hopefully helpful) pedant:

If you were going to do this for the slider approach you can arrange the labels to the `block-start` and `block-end` of the image and support non-RTL scripts/languages natively.

> the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left

For me the better image appears on the left.

The left image has the icon in the centre of the radius and the right image has it in a random place.

I turned this into a game. Which image do I think looks better? Now I try to figure out which image is supposedly supposed to look better.