hooray for readability!

October 20, 2011 11:15 AM

hey! Cool new triangle linked comment highlight!

This will be super-useful. Plus it's cute! Thanks!

posted by peachfuzz to MetaFilter-Related at 11:15 AM (112 comments total)

No problem, glad you like it. I made the announcement in the original thread a few minutes ago.
posted by pb (staff) at 11:16 AM on October 20, 2011 [1 favorite]

Thanks! This is something pb and co have been working on in response to this thread.
posted by jessamyn (staff) at 11:16 AM on October 20, 2011

For various reasons this makes my metafilter life a lot easier!
posted by muddgirl at 11:18 AM on October 20, 2011

oh that is cool
posted by Think_Long at 11:19 AM on October 20, 2011 [1 favorite]

stupid question - does it automatically do that for any comment we link by using the time stamp?
posted by Think_Long at 11:20 AM on October 20, 2011

This is awesome. Yay for pb!
posted by PhoBWanKenobi at 11:22 AM on October 20, 2011

Sweet!
posted by phunniemee at 11:22 AM on October 20, 2011

Anytime you view a page with a targeted comment it will add the triangle. If the page URL has a hash (#) followed by a number, you'll get the triangle. So yeah, if you link to a specific comment using the timestamp and someone clicks that link to read it, they should see a triangle pointing to it.
posted by pb (staff) at 11:22 AM on October 20, 2011 [1 favorite]

Ha. I just saw it and figured that it was a greasemonkey script I'd installed and forgotten about!
posted by rtha at 11:32 AM on October 20, 2011 [8 favorites]

This is something pb and co have been working on in response to this thread.

Who is this "and co?" Please tell me it's someone whose name starts with a J, so we may henceforth refer to them as "pb and j."
posted by jedicus at 11:34 AM on October 20, 2011 [6 favorites]

Why does the one in my browser have an unblinking eye in the centre of the triangle?
posted by Abiezer at 11:34 AM on October 20, 2011 [5 favorites]

Cool; I just noticed it in AskMe and was trying to figure out what it was for.
posted by TedW at 11:34 AM on October 20, 2011

All we need now is a script to change it to a leaping narwhal.
posted by elizardbits at 11:36 AM on October 20, 2011

*waits*
posted by elizardbits at 11:36 AM on October 20, 2011

Just noticed this and I'm glad it's been added. Thanks!
posted by immlass at 11:40 AM on October 20, 2011

Let me know if you'd like any other suggestions or anything about how to improve the site. Mind you, only the first one is free.
posted by le morte de bea arthur at 11:42 AM on October 20, 2011

I dub him Triangle Man.
posted by roger ackroyd at 11:43 AM on October 20, 2011

pb, I love that you added a id attribute so that people can style it if need be.
posted by Foci for Analysis at 11:49 AM on October 20, 2011 [1 favorite]

All we need now is a script to change it to a leaping narwhal.

But we already have a narwhal! I'm thinking an aardvark. His squishy little tube nose can point the way.
posted by phunniemee at 11:52 AM on October 20, 2011

Why does the one in my browser have an unblinking eye in the centre of the triangle?

Fnord.
posted by kmz at 11:53 AM on October 20, 2011

I'd love to sit in (silently, of course) on one of the meetings where priorities are assigned to MetaFilter programming tasks. (But it would probably make my head asplode.)
posted by Crabby Appleton at 11:55 AM on October 20, 2011

I was just about to come to metatalk and say that I was glad this has been added. I guess I don't have to now.
posted by madcaptenor at 11:57 AM on October 20, 2011

This is great. Thank you.

I'm not just saying that because my last comment on the blue now has a snazzy triangle by it, to denote HOW IMPORTANT A COMMENT IT IS, though NOT EVEN REMOTELY as IMPORTANT as the COMMENT IT LINKS TO, which ought to get a star or a special font or something. I'm saying it because it's great. Well, ok, partly. Anyway, thank you.
posted by motty at 12:14 PM on October 20, 2011

This is quite a nice little feature, especially for links to comments near the bottom of a thread where it's not guaranteed it'll be able to scroll down far enough to make it the top comment on screen.
posted by FishBike at 12:14 PM on October 20, 2011

It's also really nice for keeping track of your place in a thread. I tend to click the timestamp of the last comment I read so that it's at the top of the page, but then sometimes I'll come back and scroll the page before remembering why I left it like that.
posted by lucidium at 12:15 PM on October 20, 2011 [1 favorite]

At first I was all like, "whaaaaaa?"

But now I'm like totally, "ooooh."

Soon I'll be all, "meh?" then I'll probably, "oof" and glaaaagle."
posted by The 10th Regiment of Foot at 12:36 PM on October 20, 2011 [2 favorites]

Wait, does this mean I could make it a little ferret instead of a triangle?

It totally means that. Go style your ferret, son.
posted by jessamyn (staff) at 12:55 PM on October 20, 2011 [11 favorites]

Why did kmz reprint Abiezer's question and then just leave a blank space after it?
posted by Faint of Butt at 12:57 PM on October 20, 2011 [1 favorite]

Nifty!
posted by Kevin Street at 12:57 PM on October 20, 2011 [1 favorite]

This is great. Thanks, PB!

I look forward to the inevitable 1000 comment thread three years from now when the angle of the triangle is changed ever so slightly.
posted by bondcliff at 12:58 PM on October 20, 2011 [1 favorite]

The only way this could be better is if it starred Ingrid Bergman in the role of hypotenuse.
posted by Capt. Renault at 1:00 PM on October 20, 2011 [2 favorites]

This is wonderful. I've previously had fun and exciting times linking to, for example, Nattie's post on her life as a lady and this will make things like that a lot easier.
posted by kavasa at 1:18 PM on October 20, 2011

I look forward to the inevitable 1000 comment thread three years from now when the angle of the triangle is changed ever so slightly.

It should be EQUILATERAL, dammit, not ISOSCELES!
posted by cortex (staff) at 1:19 PM on October 20, 2011 [1 favorite]

Actually, I have a suggestion about how it could be better. I don't have any idea how difficult it would be to do, though. What if the arrow—which is the color of a link and looks like a link and demands to be clicked—what if it took you back where you came from when you clicked it? I just tried it, sort of expecting it to take me back and it totally didn't do anything at all because it isn't a link.
posted by cgc373 at 1:46 PM on October 20, 2011

Ah. "Use the back button in your browser, cgc373." Yes, that will work fine, thanks.
posted by cgc373 at 1:48 PM on October 20, 2011 [2 favorites]

Like.
posted by benito.strauss at 1:50 PM on October 20, 2011

I literally said "whooooa" outloud when I saw this for the first time. I like it, so thanks to everyone who suggested it and to pb for making it!
posted by lilac girl at 1:52 PM on October 20, 2011

Cool! I'm not seeing things, too, so that's cool as well.
posted by carter at 2:13 PM on October 20, 2011

I just noticed that triangle and I like it and now it's my friend!
posted by The Great Big Mulp at 3:19 PM on October 20, 2011 [1 favorite]

It should be EQUILATERAL, dammit, not ISOSCELES!

Get out of my head!

No really, an equlateral triangle would best represent the three separate-but-equal major subsites: the blue, the green, and the grey. Although "isosceles" is more fun to say.
posted by FishBike at 3:20 PM on October 20, 2011

(There's no "I" in team, and apparently there's not one in "equilateral" in my world, either.)
posted by FishBike at 3:22 PM on October 20, 2011

No complaints, did someone secretly replace my Metafilter with Sanka?
posted by Mick at 3:32 PM on October 20, 2011

An equulateral is an advanced polo maneuver.
posted by Wolfdog at 3:56 PM on October 20, 2011

No really, an equlateral triangle would best represent the three separate-but-equal major subsites: the blue, the green, and the grey. Although "isosceles" is more fun to say.

The gray isn't as major as the blue and green. So two sides should be longer than the third.
posted by madcaptenor at 4:17 PM on October 20, 2011

For a moment, I thought I was imagining it.
posted by box at 5:04 PM on October 20, 2011

So maybe I'm being slower than normal for me but I'm not really getting it. What is a linked comment? Should the triangle be doing something when I click on it? I see the triangle on madcaptenor's comment but I don't understand what that tells me about his comment.
posted by octothorpe at 5:47 PM on October 20, 2011

Ha! Just found several in a row through my "Contact Activity".
Very cool. Thanks.
posted by bru at 5:53 PM on October 20, 2011

The reported problem had been, IIRC, that linking to a longer comment could take you to a position on the page where it was ambiguous as to which comment you were directing someone to.
posted by Abiezer at 5:54 PM on October 20, 2011

What is a linked comment?

Yeah, exactly what Abiezer says above. Basically if you have a MeFi URL that contains a direct link to a comment...

http://metatalk.metafilter.com/21102/hooray-for-readability#936705

Clicking on that will drop down to the comment [which it always did] but also put a little triangle next to the specific comment so you can see which one is indicated.
posted by jessamyn (staff) at 5:59 PM on October 20, 2011

Oh, I see. Duh.
posted by octothorpe at 6:10 PM on October 20, 2011

pb, I love that you added a id attribute so that people can style it if need be.

Can someone make a Greasemonkey script to turn the triangle into a very small unicorn?
posted by killdevil at 6:31 PM on October 20, 2011

Pls make mine a hedgehog. Preferably this one.
posted by jessamyn (staff) at 6:32 PM on October 20, 2011 [3 favorites]

What's this guy, a mole?
posted by box at 6:40 PM on October 20, 2011

Can someone make a Greasemonkey script to turn the triangle into a very small unicorn?

Or a rotating gallery of F7U12 faces.
posted by villanelles at dawn at 6:43 PM on October 20, 2011

Or Oolong, hopping forever back and forth, head swaddled in pancake.
posted by cortex (staff) at 7:25 PM on October 20, 2011 [2 favorites]

Is Oolong a thing that is not tea?
posted by villanelles at dawn at 7:28 PM on October 20, 2011 [1 favorite]

Holy shit it's a rabbit that puts things on its head and nobody told me.
posted by villanelles at dawn at 7:29 PM on October 20, 2011 [1 favorite]

He's just begging to be made into Peking Rabbit though.
posted by villanelles at dawn at 7:30 PM on October 20, 2011

Holy shit it's a rabbit that puts things on its head and nobody told me.

Hie thee to the wiki!
posted by jessamyn (staff) at 7:35 PM on October 20, 2011

Just when I thought I knew all the food-related in jokes. Truly, you people are a riddle wrapped in an enigma wrapped in a crepe.
posted by villanelles at dawn at 7:39 PM on October 20, 2011 [1 favorite]

Perhaps roll truck roll and potch should get an honorary "→" in their username for a while.
posted by ceribus peribus at 8:00 PM on October 20, 2011 [1 favorite]

I like crepes.
posted by phunniemee at 8:01 PM on October 20, 2011

So when are you adding this triangle to jk scrolling?
posted by pwnguin at 9:32 PM on October 20, 2011

So, uh, a little added functionality pony, if it's possible? Chalk it up to paranoia (if bad) or needing to bask in the warm glow of praise (if good), but it would seem I've got a big yellow triangle aimed at something I wrote, and I have no way of knowing who linked it, where they linked to it from, or why. It's kinda of freaking me out, a little bit.

Would there be any way to add a splash of web magic and make the triangle clickable, taking you to the place it was linked from? To? With? About?
posted by Ghidorah at 9:35 PM on October 20, 2011 [1 favorite]

Wait, I think I figured it out, though it's also a bit odd: if you click through from Recent Activity, bam, there your comment is, complete with a little yellow triangle. I'm not sure I understand the pony.
posted by Ghidorah at 9:37 PM on October 20, 2011

I also have a triangled comment and am wondering who or what linked to it. Links from offsite will generate a triangle, yes?
posted by hydrophonic at 9:44 PM on October 20, 2011

So when are you adding this triangle to jk scrolling?

We're not going to add it there. The triangle is really supposed to be pointing out the comment that's targeted in the URL. As you use j/k, you're not targeting a new comment each time, you're scrolling up or down.

I also have a triangled comment and am wondering who or what linked to it.

Don't think of the triangle as a status that gets added to a comment. It doesn't work like that. The triangle is a pointer that shows you which comment is targeted on the page. You're the only one who sees it.

Every MetaFilter thread has a unique URL. Here's the URL for this thread:

http://metatalk.metafilter.com/21102/hooray-for-readability

You can see it in your browser address bar. If someone wants to link to a specific comment on the page, we have a handy targeting feature. It's the URL plus the comment id. Like this:

http://metatalk.metafilter.com/21102/hooray-for-readability#936707

Note the #936707 at the end of the URL. That tells the browser to bring that particular comment up to the top of the page so you can read it. It now also tells MetaFilter to add a little triangle to highlight that comment a bit more.

So the triangle is just a little helper to let you know where you jumped into a particular thread. If you happen to link directly to one of your own comments, you'll see triangle. It doesn't mean anyone else has done anything.
posted by pb (staff) at 9:53 PM on October 20, 2011

Also, try clicking on the timestamp of any comment. As you do, the targeted comment on the page will change and the arrow will move accordingly. That might give you a better sense of how it works too.
posted by pb (staff) at 9:55 PM on October 20, 2011

I'm not sure I understand the pony.

I think it may just seem like it's more than it is. Here is the over-explaining version.

First of all:

1. The triangle is next to a comment because you clicked on a link to that comment. It is a graphical indicator that the url you're at contains a #xxxxxx anchor tag with that comment's id.
2. The triangle is only there for you. There is no triangle on the site in general, no thing happening that is visible to all users, nothing in the database saying "oh, this comment is a thing to keep an eye on".

So, what is the deal with the triangle?

Back in the old days of prior-to-this-morning, everything worked exactly the same as it does now except there was no triangle: if you visited a thread by clicking on a link to a specific comment, the browser would have a #xxxxxx anchor tag at the end of the url and the page would load scrolled to the top of the comment you'd followed a link to.

You might have followed a link to a specific comment because:

- someone linked manually to a comment (from another thread, or from twitter, or while quoting or otherwise referring to that comment later in the same thread)
- you clicked into a thread from Recent Activity (by clicking on that comment's datestamp, or by clicking on the "your most recent comment" link at the top of a given RA thread recap
- you clicked on a "x comments (y new)" link from the front page of one of the subsites, which took you to whatever the first of those new comments was

For whatever reason, it was just a link to a specific comment in a thread instead of to the top of the thread itself.

Now: there is a triangle. That is literally the only new thing; instead of the browser scrolling down to the linked comment and listing the comment's id as the #xxxxxx anchor tag at the end of the url, it does both of those things and also draws a little triangle pointing at the left side of the specified comment.

It's handy for making clear what comment was linked, either because your browser ends up scrolling funny or because you're linking to a comment at the bottom of a thread where vertical scrolling can't bring the comment to the top of the browser window, or maybe just because you're sending a link to someone who doesn't know how to figure out what comment they're supposed to be looking at when directed to a mefi thread.
posted by cortex (staff) at 9:57 PM on October 20, 2011 [1 favorite]

I now clearly understand the pony. Thanks for the explanation, pb and cortex. I had imagined the pony to be other than it is, and now I see the pony in its true, somewhat whelming light. I mean, it's cool for what it is (and really, it is). I'd just misunderstood, thinking the pony would be an indication that someone, somewhere had referenced the comment. Now I see that the triangle was coming from inside the house.
posted by Ghidorah at 10:31 PM on October 20, 2011

Cool, thanks!
posted by roll truck roll at 12:40 AM on October 21, 2011

This is a neat feature -- thanks to everyone involved in developing it! The triangle is very clear and works well.

Pls make mine a hedgehog. Preferably this one.

I was thinking of customizing the pointer for when I use Firefox, so thanks for providing a file to work with. I just posted a Greasemonkey script that shows that hedgehog for the comment pointer. (Note: I've only tried it in Firefox 7.0.1 for Windows, so no guarantees it will work anywhere else -- but hopefully it will.)

If anyone has an image of an aardvark, ferret, unicorn, narwal, etc. to use instead (you can convert the image to base64 and replace the hedgehog), by all means feel free to modify the script to your liking. Also feel free to modify it for use with Stylish, since it's essentially just style rules.
posted by rangefinder 1.4 at 2:31 AM on October 21, 2011

*narwhal! Not narwal. I had to correct the spelling, at least for the sake of my narwhal preview button.
posted by rangefinder 1.4 at 2:39 AM on October 21, 2011

I came to metatalk to look for that original thread where the request was made, so that I could go back and say how cool the yellow triangle looks! It's purty! and useful! Yay!
posted by bardophile at 7:11 AM on October 21, 2011

I look forward to the inevitable 1000 comment thread three years from now when the angle of the triangle is changed ever so slightly.

It should be EQUILATERAL, dammit, not ISOSCELES!

Just write up a greasemonkey script that changes the spacetime curvature of your browser. No need to make pb do EVERYTHING.
posted by solotoro at 7:39 AM on October 21, 2011

I just want to say yay for hedgehogs.
posted by arcticseal at 7:53 AM on October 21, 2011

this is going to revolutionize the whole "real-time reverse-chronological website with periodic archival feature" world. just like the invention of the permalink.
posted by quonsar II: smock fishpants and the temple of foon at 8:04 AM on October 21, 2011

I really like this, especially that you can mark a comment by clicking on the timestamp. It'll be really useful for marking a comment I want respond to in a long thread so can find it later when I'm ready to respond. (This can be a real pain if I don't remember the exact wording well enough to use Crtl-F, or the commenter's user name.)

If people catch on to this, it might help with the issue albrecht was complaining about.
posted by nangar at 8:07 AM on October 21, 2011

I noticed it a day or two ago wand was trying to figure out WFT it was.
posted by TomMelee at 8:08 AM on October 21, 2011

WFT...that's the sound a wiffle-ball bat makes when it swings through the air. It also engenders the degree to which I was full of $*&%.
posted by TomMelee at 8:09 AM on October 21, 2011

<3 Thanks for hedgehog! I can confirm it works for Mac.
posted by jessamyn (staff) at 8:54 AM on October 21, 2011

Hedgehog is a go in Chrome for Windows.
posted by SpiffyRob at 9:29 AM on October 21, 2011

This is the best thing since the MeFi Navigator script
posted by exogenous at 9:49 AM on October 21, 2011

What if... When you pressed the j and k keys to move around between comments, the triangle moved, too?
posted by kaibutsu at 9:52 AM on October 21, 2011

What if... When you pressed the j and k keys to move around between comments, the triangle moved, too?

The triangle is pointing out a targeted comment, and as you use j/k you're not targeting a new comment each time, you're just scrolling the page.

I could see there might be times when you want each scroll of the page to select a new comment, but I think keeping the triangle tied to the targeted comment is important. We're still seeing how people are going to use it, but I think it's going to be very handy for remembering where you jumped into a thread. If it moved on scroll you'd lose that marker of where you started.
posted by pb (staff) at 9:55 AM on October 21, 2011

the best thing since the MeFi Navigator script

Hmmm, and I think the script might be broken now in MetaTalk. Weird.
posted by exogenous at 9:57 AM on October 21, 2011

kaibutsu, MeFi Scroll Tag does (among other things) something very similar to what you're describing.
posted by SpiffyRob at 10:09 AM on October 21, 2011

Is the triangle above or below the comment that has been linked?
posted by Solomon at 10:24 AM on October 21, 2011

It points right at it. Example.
posted by jessamyn (staff) at 10:33 AM on October 21, 2011

Yep, it should point right at it.
posted by pb (staff) at 10:35 AM on October 21, 2011

More explicitly, it points right at the first line of the comment. So for a multi-line comment, it's at the top.
posted by cortex (staff) at 10:38 AM on October 21, 2011

As usual, pb knocks it out of the park. Perfect refinement of the original idea- honored to have a contribution baked into the site. Thanks!
posted by potch at 11:04 AM on October 21, 2011

This is what I'm seeing.

I think it might be due to NoSquint, though. By fiddling with the zoom, I can make the triangle "move" up and down the page.
posted by Solomon at 11:08 AM on October 21, 2011

Jessamyn uses the white background so mathowie doesn't know she reads Metafilter at work.
posted by roll truck roll at 11:08 AM on October 21, 2011 [4 favorites]

Yeah, it looks like the triangle isn't working well with one of your browser extensions or Greasemonkey scripts, Solomon. You could try disabling them one by one to find the culprit, or you could use Stylish to disable the triangle if you find it distracting.
posted by pb (staff) at 11:11 AM on October 21, 2011

I like this triangular object!
posted by trip and a half at 12:27 PM on October 21, 2011

Solomon: "This is what I'm seeing."

I remember having a similar problem with an older version of MeFi Navigator. The "Admin" or "Poster" or "Me" graphic was like a single pixel to tall, and would stretch out the page slightly, so the farther you were down the page, farther the MeFi Scroll Tag would be above the comment it was supposed to be pointing at. You could try updating the Navigator script and see if that's the issue.
posted by team lowkey at 4:19 PM on October 21, 2011

Hedgehog is a go for Mac with Chrome 14.x! I love it.

Thanks for the triangle idea and implementation, and the ferret derivative, all you smart techy people!

I really do want to urge any of you who might have been feeling a bit snarky or confrontational of late to try some of these cute extensions out. The unicorn and narwhal buttons script, for instance, has completely changed my attitude. I feel like I'm smiling every time I hit post now!
posted by misha at 6:17 PM on October 21, 2011

I'm gonna style my triangle with a Brazilian coz I hear that's the in thing.
posted by a humble nudibranch at 8:37 PM on October 21, 2011

Hey, glad to hear that the hedgehog Greasemonkey script is working on Mac and also in Chrome. Yay! Thanks for confirming.

BTW (I second misha's recommendation), here's the link for Rhomboid's unicorn and narwhal buttons user script (which I basically used as a model for the hedgehog script, so thanks, Rhomboid!).

Solomon: I think it might be due to NoSquint, though. By fiddling with the zoom, I can make the triangle "move" up and down the page.

FWIW, it might be something else...I'm using NoSquint as well, and the triangle (or hedgehog) still lines up properly with the top of the comment. I just tried adjusting the zoom and it changes the location of the triangle for me, too; but once I settle on the zoom level (text zoom and/or full zoom) and reload a comment link, the comment indicator appears in the correct place.
posted by rangefinder 1.4 at 10:59 PM on October 22, 2011

Really cool addition! Thank you.
posted by HMSSM at 12:28 AM on October 23, 2011

o O (I wonder if this will look like I, the hedgehog, am thinking this very sentence.)
posted by SpiffyRob at 8:28 AM on October 24, 2011

o O (It totally does! But someone else can probably make it better.)
posted by SpiffyRob at 8:29 AM on October 24, 2011

o O (It totally does! But someone else can probably make it better.)

Greasemonkey doesn't work in whatever version of firefox I'm using, so I'm sans hedgehog. But maybe you can play around with this?
posted by phunniemee at 8:45 AM on October 24, 2011

Hedgehog.
posted by TomMelee at 9:29 AM on October 24, 2011

The trajectory of the hedgehog's blowing makes that a bit less than perfect, phunniemee.

Screenshot of bubble blowing and thinking.
posted by SpiffyRob at 10:57 AM on October 24, 2011

As a point of curiosity rather than any sort of complaint, I've noticed that if I change the text zoom (ctrl-plus and ctrl-minus) the alignment of the triangle goes off, in both Chrome and IE.
posted by XMLicious at 6:35 AM on October 25, 2011

I'm seeing the same thing. It works fine for whatever your text size is on load, but then jumps around until you reload or click a new timestamp.

Added bonus: The hedgehog grows, shrinks, and wanders. Like right now he's hanging with my unicorn and narwhal.
posted by SpiffyRob at 7:49 AM on October 25, 2011

I just added a change that should help when you're resizing text.
posted by pb (staff) at 12:06 PM on October 25, 2011

Yup, that did the trick. Hedgehog is grounded.
posted by SpiffyRob at 12:32 PM on October 25, 2011

Works for me too.
posted by XMLicious at 12:45 PM on October 25, 2011

This is fantastic.
posted by From Bklyn at 11:47 PM on October 25, 2011