6 ms·

Ask PG: Why not use the ▲ unicode character instead of a gif on HN?

25 points by thomasfl 13y ago

bleke 13y ago
Probably one of reasons (I hope) : http://imgur.com/xnHmnap http://imgur.com/xnHmnap
- zoowar 13y ago
  But the up-vote is not otherwise present in your screen shot.
- captainmuon 13y ago
  Works for me: http://imgur.com/Ym6iIvd http://imgur.com/Ym6iIvd Terminals have supported unicode (at least partially) for a while. Also, arrows have been available in the charset since DOS times.
- mooism2 13y ago
  Why aren't you using a terminal that can handle UTF-8? Alternatively, why aren't you using a web browser that can handle UTF-8?
  - dded 13y ago
    > Why aren't you using a terminal that can handle UTF-8? Perhaps they're still on RHEL5. Many of us are.
onion2k 13y ago
When you get to 500 karma, you get a ▼ immediately below the up arrow. Making a decent layout for both, even using the small arrow equivalents (▴ and ▾) would be pretty tricky in text as it'd need to be a block element rather than the specifically sized div with background image trick that's used now. Interestingly (if you're a massive web nerd) is that the image asset request sets a no-cache header. Almost certainly just a default setting that's been overlooked but it could be a tracking image in disguise! :)
- thomasfl 13y ago
  Yes, but the gif looks awful if you zoom in. I didn't know about the downvote arrow. Makes me sad to see that even if my Hacker News account is almost 7 year old, I only got 312 karma points. :-(
  - RollAHardSix 13y ago
    That's ok, you make me feel better for when my account gets to almost 7 years old =)
- t0mas88 13y ago
  The cache issue is actually visible sometimes on very shitty wifi. That made me check it once, because it showed the images a few seconds later than the page. Which should never happen for a page you visit daily.
- elwell 13y ago
  False: when you get > 500 (not >= 500).
- true_religion 13y ago
  How about making the downvote arrow invisible by giving it the same colour as the background of HN, and taking away the cursor via CSS. That way you technically always have the same HTML though the user can't see the arrow or use it.
- EnderMB 13y ago
  I'm on exactly 500 karma right now, and I don't see any downvote arrows. Has the number changed?
captainmuon 13y ago
I'm more wondering why they use css* to rotate the image, instead of just using a sprite with both triangles and clipping. Granted, on a site as simple as HN this makes no difference at all. But I think there is an overall trend to push more work onto the client, which kinda makes sense since they have more and more CPU and RAM over time. OTOH, its bad because I can throw away my old "office" desktop and my "netbook" (it has net in the name!) because they can't browse the average webpage anymore!
- gus_massa 13y ago
  In IE10 the css trick doesn’t work and you get two ▲’s, one for upvoting and one for downvoting. See an IE10/Chrome comparison: http://imgur.com/Pe2yKe6 http://imgur.com/Pe2yKe6
  - pdenya 13y ago
    Still likely makes no difference on this site. The percent of people on here on IE10 has got to be almost 0.
daGrevis 13y ago
PG doesn't have time. Others do, so I introduce to you HN Special. http://gabrielecirulli.github.io/hn-special/ http://gabrielecirulli.github.io/hn-special/ P.S. It has unicode arrows.
- meerita 13y ago
  I love it. Very useful.
- thomasfl 13y ago
  Beautiful! I've started using it now to post comments. Wonderful unicode arrows!
- elwell 13y ago
  That's pretty great. Would like to have keyboard navigation though. j and k for up and down on post selection and Enter to open article, (maybe "c" for comments)
DanBC 13y ago
I wish theu up and down were not so close together. Fear of accidental downvoting prevents some people from upvoting. That's sub optimal.
- dictum 13y ago
  This has gotten worse for me with Safari on OS X Mavericks. Sometimes I click on the up arrow and OS X decides to scroll some 15px down, leaving me to wonder if I actually hit up or down.
_RPM 13y ago
Interestingly, you can style it however you want as well. Check this out http://jsfiddle.net/ePA3L/ http://jsfiddle.net/ePA3L/

25 points by thomasfl 13y ago

bleke 13y ago

Probably one of reasons (I hope) : http://imgur.com/xnHmnap http://imgur.com/xnHmnap

zoowar 13y ago
But the up-vote is not otherwise present in your screen shot.
captainmuon 13y ago
Works for me: http://imgur.com/Ym6iIvd http://imgur.com/Ym6iIvd Terminals have supported unicode (at least partially) for a while. Also, arrows have been available in the charset since DOS times.
mooism2 13y ago
Why aren't you using a terminal that can handle UTF-8? Alternatively, why aren't you using a web browser that can handle UTF-8?
- dded 13y ago
  > Why aren't you using a terminal that can handle UTF-8? Perhaps they're still on RHEL5. Many of us are.

onion2k 13y ago

When you get to 500 karma, you get a ▼ immediately below the up arrow. Making a decent layout for both, even using the small arrow equivalents (▴ and ▾) would be pretty tricky in text as it'd need to be a block element rather than the specifically sized div with background image trick that's used now. Interestingly (if you're a massive web nerd) is that the image asset request sets a no-cache header. Almost certainly just a default setting that's been overlooked but it could be a tracking image in disguise! :)

thomasfl 13y ago
Yes, but the gif looks awful if you zoom in. I didn't know about the downvote arrow. Makes me sad to see that even if my Hacker News account is almost 7 year old, I only got 312 karma points. :-(
- RollAHardSix 13y ago
  That's ok, you make me feel better for when my account gets to almost 7 years old =)
t0mas88 13y ago
The cache issue is actually visible sometimes on very shitty wifi. That made me check it once, because it showed the images a few seconds later than the page. Which should never happen for a page you visit daily.
elwell 13y ago
False: when you get > 500 (not >= 500).
true_religion 13y ago
How about making the downvote arrow invisible by giving it the same colour as the background of HN, and taking away the cursor via CSS. That way you technically always have the same HTML though the user can't see the arrow or use it.
EnderMB 13y ago
I'm on exactly 500 karma right now, and I don't see any downvote arrows. Has the number changed?

captainmuon 13y ago

I'm more wondering why they use css* to rotate the image, instead of just using a sprite with both triangles and clipping. Granted, on a site as simple as HN this makes no difference at all. But I think there is an overall trend to push more work onto the client, which kinda makes sense since they have more and more CPU and RAM over time. OTOH, its bad because I can throw away my old "office" desktop and my "netbook" (it has net in the name!) because they can't browse the average webpage anymore!

gus_massa 13y ago
In IE10 the css trick doesn’t work and you get two ▲’s, one for upvoting and one for downvoting. See an IE10/Chrome comparison: http://imgur.com/Pe2yKe6 http://imgur.com/Pe2yKe6
- pdenya 13y ago
  Still likely makes no difference on this site. The percent of people on here on IE10 has got to be almost 0.

daGrevis 13y ago

PG doesn't have time. Others do, so I introduce to you HN Special. http://gabrielecirulli.github.io/hn-special/ http://gabrielecirulli.github.io/hn-special/ P.S. It has unicode arrows.

meerita 13y ago
I love it. Very useful.
thomasfl 13y ago
Beautiful! I've started using it now to post comments. Wonderful unicode arrows!
elwell 13y ago
That's pretty great. Would like to have keyboard navigation though. j and k for up and down on post selection and Enter to open article, (maybe "c" for comments)

DanBC 13y ago

I wish theu up and down were not so close together. Fear of accidental downvoting prevents some people from upvoting. That's sub optimal.

dictum 13y ago
This has gotten worse for me with Safari on OS X Mavericks. Sometimes I click on the up arrow and OS X decides to scroll some 15px down, leaving me to wonder if I actually hit up or down.

_RPM 13y ago

Interestingly, you can style it however you want as well. Check this out http://jsfiddle.net/ePA3L/ http://jsfiddle.net/ePA3L/