Hey all, I wrote to dang a few months ago -- the non sharp upvote button was bothering me on mobile (and desktop when zoomed in), and I felt like the Y could be sharper too. These were the only elements that were fuzzy - everything else is text, and scaled perfectly!
We collab'ed on it together (more praise for dang as if he needs it -- he was incredible through and through) and I'm so happy to see it live!!
I built two micro tools to help nail it down if anyone is curious (aka make it visually seamless):
My only suggestion is to optimise it, which we have :) (Lifting this from lower down in the thread). The following SVG fragment is a drop in replacement for the <img> tag and produces the same result, albeit completely symmetrical as a side effect of quantising the coordinates:
<svg width="18" height="18" viewBox="-32 -32 64 64"
style="background: #f60; border: 1px white solid;">
<path fill="#fff" d="m0-5l-8-12h-7L-3 1v16h6V1l12-18H8z"/>
</svg>
This reduces the total payload from 1448 bytes to 172 bytes including whitespace (I ungolfed it slightly to make it less hacky). By comparing both the inline <img> tag, and the svg file and it's HTTP header (which disappears when you inline).
Choosing a viewBox of size 64 as you have, is a much better choice than 100, because 64 is a power of 2. Symmetry is hard to achieve by hand with a path, and even harder if the origin is at the top left (0,0) instead of in the center (as you also have), because it's obvious that -3 is symmetrical to 3, and less immediately obvious that 47 is the opposite of 53 for example.
That said, if working entirely by hand, using elementary shapes can be easier to write and understand (I think); here's an attempt with using one rectangle three times for the Y (and another rectangle to mask the edges at the top):
The Y shape is visibly different to me, even at 18 px. In the new version, the "leg" is longer and the "arms" shorter and at a more obtuse angle to each other. Compare vs. the favicon: https://news.ycombinator.com/favicon.ico
Correct. Also, at 1x (which is what matters the most on desktop & mobile for me, I think) the bottom-most extent of the "leg" is not far enough down. There is too much orange under the leg. There should be more white at the bottom. The Y is getting crunched or fuzzed out at 1x. The Y is not prominent enough. The whole point is the Y. It used to not look floating like this. It should be crisp and clear and that trademark shape.
"A" for effort and constant improvement and all that, but iteration required, I think.
A weird observation: At first, I didn't know how the "the Y is too fuzzy" problem (that I never had) could have been solved with a visibly much fuzzier replacement (shouldn't even say fuzzier, since the original was unfuzzy for me). Then I realized, I think it might have to do with solving the "fuzzy when zoomed" problem, without sufficiently regression testing the "do not degrade the non-zoomed look" checkbox. And, maybe SVG is good for large images, but not great for tiny ones (like this "Y" at 1x). Or something like that. I never zoom HN, so the fix does nothing for me, but I do notice the regression. I hope the feedback can be integrated somehow.
Nice update. Btw. UX-wise on mobile the upvote / downvote arrows are so close together that you have to pinch-zoom first to be able to select the right one with your finger. A real improvement would be to add some extra spacing between them.. somehow, without spoiling visual appearance.
Sure, this question's probably pretty basic. Why draw it out with paths and all that instead of something like the following? Do SVG text elements not scale well?
<svg>
<text class="logo">Y</text>
</svg>
Or even just <span class="logo">Y</span> with the style providing color and border.
And the arrows could be text too: 🞁 and 🞃.
Just curious about why even make them images, given the note that "everything else is text, and scaled perfectly!"
Unsure why, but the arrow examples you have there show up as unicode code blocks for me in Firefox on a Mac. Probably one of the reasons not to use them like that!
Now that the Y is SVG rather than being an image, it shouldn't be too tricky to adjust the background color from orange to whatever the user has set for their topbar? I use blue for the topbar, and it kind of annoys me that the logo stays orange.
Heck, my instinct tells me that if we're lucky a transparent background would do the job without needing to make the SVG dynamically defined.
Edit: I see you're drawing the background color over the Y to give it flat tops. That makes the transparent background difficult. But I'd still like it if the background color was taken from the user's topcolor instead of always being orange.
Or just add the text "upvote" and "downvote" where "unvote" or "undown" currently appear after voting (and maybe move "on: ..." to a new line in the individual post view). I've found the text navigation (root|parent|prev|next) to be excellent and the text upvote and downvote would fit in well.
Thanks for dropping in. It looks… unsettling! Like any UI change.
I am sure we will look back on the old page as it appeared someday and wonder how anyone tolerated such a thing.
My question is: how long was it bothering you before you emailed dang? How did you put it forward? Was it essentially an email version of a bug report?
As long as I’ve been surfing on a high resolution mobile device I think..! It might have been a few years ago.
I wrote an email which felt like throwing a bottle to the sea - this is/was a very non urgent issue. I described what was going on, included screenshots, and I did a prototype of an svg version which I also included.
As an active-ish member of this community, it felt nice to try to make it 0.000001% better ha :)
I noticed this when the logo was missing (I have SVG disabled in the browser for security reasons). upvote/downvote buttons are totally invisible to me now as well and unlike the logo in the corner they don't show up as broken, just missing (although they can still be clicked on)
I don't expect many people will have these issues, I know I'm running in a very locked down environment that most people wouldn't want to put up with, and it shouldn't be very hard for me to fix this with a little custom css, I just thought I'd give the feedback since I was impacted and I do try to encourage sites to fail gracefully.
I'll say as someone who began on HN feeling contrarian and somewhat underepresented in viewpoint that dang is exceptionally responsive to all manner of suggestions. Not all have been implemented, though a few I've suggested have been picked up. Collapsable comments being one that comes to mind.
Hacking on HN itself can be fun. (I've got a few CSS tweaks linked from my profile page, so far no take-up, though I much prefer how the site looks using them.) That includes a dark mode, which though I don't usually use it, testing just now ... it's not bad if I may say so myself.
Your SVG tweak reminds me that it's possible to do such things in CSS (inline data attributes) as well.
Hmm, it's the same svg (https://news.ycombinator.com/triangle.svg) with the same votearrow CSS class on it; the down one just has an additional rotate180 class on it:
> I built two micro tools to help nail it down if anyone is curious (aka make it visually seamless)
Huh I would have thought they'd have some sort of document somewhere that gives clear dimensions and angles of the logo. Did someone just draw that freehand in Photoshop, saved it to png and then that was that?
I mean, when you first build something like this and you have no idea whether it will die in 6 months or live the next 20 years, do you really want to bother with the logo's format?
I find it funny that everyone is bikeshedding the symmetry of the "arms" and the length of the "leg" on the logo in an attempt to be pixel-perfect with the original low-res image.
While it's fine and funny to be doing so - I can't help but realize how little any of this matters. Imagine an alternate reality where the icon was changed for SVG and not announced. There might be 2 people max that complain about it for a day, and then it would blow over and be the new normal.
Also imagine if a whole stylistic remake of the website was done - I doubt anyone would notice if the icon was ever so slightly different.
Reminds me of memes about how a 10 line PR gets 10 comments, but a 1,000 line PR gets an "LGTM"
Interesting, I never realized the Y wasn't symmetrical. The left branch is slightly lower and to the left of the right branch in the Y. This also creates a gap in the center of it at high resolutions: https://i.imgur.com/vwPnz2j.png
If this wasn't intentional, here's a symmetrical version:
Fun fact: "Y" in your comment is not symmetrical either. Letter shapes are usually not symmetrical, Y/X/etc. even in gothic sans typefaces add asymmetries that make text easier to read.
For the benefit of people who don't follow such things attentively: /y18.svg has been /y18.gif for — at least 16 years, as a lower bound [0]. Some have filed bug reports [1] about it. The old one was rasterized and slightly fuzzy when zoomed.
Oh that ship already sailed. Click on the "parent" link. Notice that it breaks your browser history now because instead of being a link to an element in the document it runs some javascript to scroll the page… commence teeth gnashing.
This is why, on almost every website I visit where I know I'll be opening multiple links (which would normally require hitting the back button to view them all), I just open every link in a new tab and then close the tab when finished.
I suspect many people use HN (and similar) this way.
It's always a fun time when I occasionally use the browser/website "as intended" and hit the back button, but the scroll position has been completely lost so it takes a bit to find the exact place I was looking originally.
Readit News
We collab'ed on it together (more praise for dang as if he needs it -- he was incredible through and through) and I'm so happy to see it live!!
I built two micro tools to help nail it down if anyone is curious (aka make it visually seamless):
https://gregsadetsky.github.io/yc-logo-svg-comparison-editor...
https://gregsadetsky.github.io/yc-vote-button-editor/
(check the top right of both pages to see the UI controls)
Uh... AMA? Suggestions? Thoughts?
Thanks for the support -- so far nobody hates it? Does anyone hate it?
Cheers!
My only suggestion is to optimise it, which we have :) (Lifting this from lower down in the thread). The following SVG fragment is a drop in replacement for the <img> tag and produces the same result, albeit completely symmetrical as a side effect of quantising the coordinates:
This reduces the total payload from 1448 bytes to 172 bytes including whitespace (I ungolfed it slightly to make it less hacky). By comparing both the inline <img> tag, and the svg file and it's HTTP header (which disappears when you inline).That said, if working entirely by hand, using elementary shapes can be easier to write and understand (I think); here's an attempt with using one rectangle three times for the Y (and another rectangle to mask the edges at the top):
Manually tracing the favicon in Inkscape (and correcting what I believe to be an unintentional asymmetry) gives me this: https://news.ycombinator.com/item?id=35894797
The vote buttons look great. I noticed-but-didn't-notice after seeing this post.
EDIT: vs. the favicon, on my screen, the new version is "bolder" as well.
"A" for effort and constant improvement and all that, but iteration required, I think.
A weird observation: At first, I didn't know how the "the Y is too fuzzy" problem (that I never had) could have been solved with a visibly much fuzzier replacement (shouldn't even say fuzzier, since the original was unfuzzy for me). Then I realized, I think it might have to do with solving the "fuzzy when zoomed" problem, without sufficiently regression testing the "do not degrade the non-zoomed look" checkbox. And, maybe SVG is good for large images, but not great for tiny ones (like this "Y" at 1x). Or something like that. I never zoom HN, so the fix does nothing for me, but I do notice the regression. I hope the feedback can be integrated somehow.
I’ll try to collect all notes and follow up on them. Thanks for this!
Deleted Comment
And the arrows could be text too: 🞁 and 🞃.
Just curious about why even make them images, given the note that "everything else is text, and scaled perfectly!"
Now that the Y is SVG rather than being an image, it shouldn't be too tricky to adjust the background color from orange to whatever the user has set for their topbar? I use blue for the topbar, and it kind of annoys me that the logo stays orange.
Heck, my instinct tells me that if we're lucky a transparent background would do the job without needing to make the SVG dynamically defined.
Edit: I see you're drawing the background color over the Y to give it flat tops. That makes the transparent background difficult. But I'd still like it if the background color was taken from the user's topcolor instead of always being orange.
Thanks for dropping in. It looks… unsettling! Like any UI change.
I am sure we will look back on the old page as it appeared someday and wonder how anyone tolerated such a thing.
My question is: how long was it bothering you before you emailed dang? How did you put it forward? Was it essentially an email version of a bug report?
I wrote an email which felt like throwing a bottle to the sea - this is/was a very non urgent issue. I described what was going on, included screenshots, and I did a prototype of an svg version which I also included.
As an active-ish member of this community, it felt nice to try to make it 0.000001% better ha :)
I don't expect many people will have these issues, I know I'm running in a very locked down environment that most people wouldn't want to put up with, and it shouldn't be very hard for me to fix this with a little custom css, I just thought I'd give the feedback since I was impacted and I do try to encourage sites to fail gracefully.
I'll say as someone who began on HN feeling contrarian and somewhat underepresented in viewpoint that dang is exceptionally responsive to all manner of suggestions. Not all have been implemented, though a few I've suggested have been picked up. Collapsable comments being one that comes to mind.
Hacking on HN itself can be fun. (I've got a few CSS tweaks linked from my profile page, so far no take-up, though I much prefer how the site looks using them.) That includes a dark mode, which though I don't usually use it, testing just now ... it's not bad if I may say so myself.
Your SVG tweak reminds me that it's possible to do such things in CSS (inline data attributes) as well.
Huh I would have thought they'd have some sort of document somewhere that gives clear dimensions and angles of the logo. Did someone just draw that freehand in Photoshop, saved it to png and then that was that?
thank u
Dead Comment
While it's fine and funny to be doing so - I can't help but realize how little any of this matters. Imagine an alternate reality where the icon was changed for SVG and not announced. There might be 2 people max that complain about it for a day, and then it would blow over and be the new normal.
Also imagine if a whole stylistic remake of the website was done - I doubt anyone would notice if the icon was ever so slightly different.
Reminds me of memes about how a 10 line PR gets 10 comments, but a 1,000 line PR gets an "LGTM"
Dead Comment
If this wasn't intentional, here's a symmetrical version:
[0] https://hn.algolia.com/?query=y18.gif&type=all
[1] https://news.ycombinator.com/item?id=21544141 ("Can whoever is in charge of HN's site design convert this to an SVG image?" 'octosphere, 3 years ago)
Now if the mobile view could space items out a touch more so I don't periodically fat thumb the tiny flag/hide article links it would be perfect!
https://gist.github.com/selcuk/00948de9717b25d0d5e824c3e80da...
EDIT: since we're code golfing/bikeshedding, here's my own attempt, which matches the original proportions [1].
[1] Actually, the original is slightly asymmetric -- the right leg is slightly narrower. I've "corrected" this, making the right leg mirror the left.I suspect many people use HN (and similar) this way.
It's always a fun time when I occasionally use the browser/website "as intended" and hit the back button, but the scroll position has been completely lost so it takes a bit to find the exact place I was looking originally.
https://news.ycombinator.com/triangle.svg
Deleted Comment