8 ms·

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

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): https://gregsadetsky.github.io/yc-logo-svg-comparison-editor/ https://gregsadetsky.github.io/yc-logo-svg-comparison-editor... https://gregsadetsky.github.io/yc-vote-button-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!

behnamoh 3y ago
Please leave some space between the upvote and downvote buttons. I often hit the wrong button with my big thumbs…
- nvy 3y ago
  There is an "unvote" clickable link/button available if you tap the timestamp, though I agree HN isn't great UX on mobile.
  - qup 3y ago
    I use it as a personal challenge. Growth mindset!
- aembleton 3y ago
  I seperated them by adding the following line to my uBO filters: news.ycombinator.com##.votearrow:style(margin-bottom:12px !important;) I've also added the following lines to highlight comments that I've upvoted or downvoted to make it easier to see: news.ycombinator.com##a[id^="un"]:has-text(unvote):upward(4):style(border-left: 1ch solid green !important; padding-left: 1ch !important;) news.ycombinator.com##a[id^="un"]:has-text(undown):upward(4):style(border-left: 1ch dotted red !important; padding-left: 1ch !important;)
  - behnamoh 3y ago
    the whole point is to make it easier on mobile, not desktop!
    - aembleton 3y ago
      Indeed, that's what I created those filters for. I run ubo on mobile.
      - behnamoh 3y ago
        Ahh, Android then, not iOS.
- joveian 3y ago
  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.
autoexec 3y ago
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.
colanderman 3y ago
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 https://news.ycombinator.com/favicon.ico 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 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.
- entrepy123 3y ago
  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.
- gregsadetsky 3y ago
  Thanks for the feedback! Ah and I also see you generated svg output that would be a bit shorter and more accurate. I’ll try to collect all notes and follow up on them. Thanks for this!
  - mustacheemperor 3y ago
    I did a quick comparison at 1x and 10x in photoshop, using guides to compare the geometry: https://imgur.com/a/jWjtmtZ https://imgur.com/a/jWjtmtZ The top of the "Y", at least optically, doesn't seem to extend as far in the PNG, and the intersection of the top legs seems to start higher in the SVG - it looks much higher in the 1x, IMO. I'm sure part of this is just the challenge/inherent mismatch of using a vector to "match" a lossy-compressed raster depiction of text. That said I did this for fun and I don't imagine it will ever bother me - the sharpness is nice! Thank you!
gardenhedge 3y ago
Do you know Dang irl? Most suggestions for HN get ignored. This isn't a criticism, just an observation.
- gregsadetsky 3y ago
  I don’t. I cold emailed him and absolutely didn’t expect a reply. This was also many many months ago.
Affric 3y ago
Hey Greg, 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?
- gregsadetsky 3y ago
  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 :)
joshxyz 3y ago
finally, new and improved upvote buttons for people with fat fingers like me thank u
Falkon1313 3y ago
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!"
- clone1018 3y ago
  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!
  - gibspaulding 3y ago
    They don't seem to work in Firefox on Linux either (Ubuntu 20.04), seem to be Windows only for whatever reason.
    - pwg 3y ago
      The two arrows work perfectly here with Slackware 15 and Firefox 102.9.0esr.
      - usr1106 3y ago
        They even work on the dinosaur age Firefox in Sailfish OS. I guess it's just whether the fonts used have the character or not, nothing to do with Firefox as such.
        MayeulC 3y ago
        Probably, they don't show up on Firefox Android (Fennec on LineageOS 20)
        3y ago
starmftronajoll 3y ago
They look great to me. Thanks for sprucing them up
tomxor 3y ago
Nice work! 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).
- bambax 3y ago
  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): <svg width="18" height="18" viewBox="-32 -32 64 64" style="background: #f60; border: 1px white solid;"> <rect x="-3" y="-2" width="6" height="24" fill="white" id="rc1"/> <use href="#rc1" y="-22" transform="rotate(-34) scale(1, 1.2)" id="rc2"/> <use href="#rc2" transform="scale(-1,1)"/> <rect x="-30" y="-30" width="60" height="12" fill="#f60"/> </svg>
  - social_quotient 3y ago
    Cool! Here is a little smaller version of yours. Spaces and color abbreviation. That word “background” sure is big here. <svg width="18" height="18" viewBox="-32 -32 64 64" style="background:#f60;border:1px #fff solid;"><rect x="-3" y="-2" width="6" height="24" fill="#fff" id="rc1"/><use href="#rc1" y="-22" transform="rotate(-34) scale(1, 1.2)" id="rc2"/><use href="#rc2" transform="scale(-1,1)"/><rect x="-30" y="-30" width="60" height="12" fill="#f60"/></svg>
altairprime 3y ago
Is it intentionally a very bright orange to stand out from the background?
- layer8 3y ago
  Might be inconsistent color space handling on your browser.
  - altairprime 3y ago
    This is correct; it ended up being Noir darkening the topbar but not the SVG.
layer8 3y ago
The downvote button always renders slightly larger for me than the upvote button. I suppose that's not intentional? 8)
- ehPReth 3y ago
  Hmm, it's the same svg (https://news.ycombinator.com/triangle.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: .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } on smaller screens (@media only screen and (min-width : 300px) and (max-width : 750px)) you additionally get: .votearrow { transform: scale(1.3,1.3); margin-right: 6px; } .votearrow.rotate180 { -webkit-transform: rotate(180deg) scale(1.3,1.3); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg) scale(1.3,1.3); /* FF */ -o-transform: rotate(180deg) scale(1.3,1.3); /* Opera */ -ms-transform: rotate(180deg) scale(1.3,1.3); /* IE9 */ transform: rotate(180deg) scale(1.3,1.3); /* W3C complaint browsers */ } same scale, though
  - layer8 3y ago
    Rasterization can still lead to different sizes due to rounding, if the edge (or the rotation point) just happens to coincide with the raster edge between pixels (or something like that). You can't just rely on the shape being the same mathematically, you have to take quantization effects into account. Using dedicated shapes instead of the transform may also be more reliable.
thaumasiotes 3y ago
> Uh... AMA? Suggestions? Thoughts? 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.
- bluehex 3y ago
  I made my top bar the same as the page color, so that might make the logo basically invisible for me or others with a brighter color defined.
- Tesl 3y ago
  How are you changing it? I don't see an option anywhere...?
  - thaumasiotes 3y ago
    Go to your profile page (by clicking on your name at the right of the topbar). You should see a field labeled `topcolor`. You can set the color of the topbar through that.
  - MayeulC 3y ago
    On your user page. It may require some karma? I like it as it tells me whether I'm logged in, and if I had multiple accounts they would be easy to differentiate.
realworldperson 3y ago
[dead]
tasuki 3y ago
I hated the pixelated up/down buttons. Thank you for the vectors!
rapnie 3y ago
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.
somedude895 3y ago
> 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?
- H8crilA 3y ago
  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?
dredmorbius 3y ago
Nice, and thanks. 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.
javifu 3y ago
A bolder reinterpretation of your "Y" adding rotational symmetry. <svg viewBox="0 0 64 64"> <path d="m1 1v62h62v-62z" fill="#f60" stroke="#fff" stroke-width="1"/> <path id="|" d="m32 28v28" stroke="#fff" stroke-width="8"/> <use transform="rotate(120 32 28)" xlink:href="#|"/> <use transform="rotate(240 32 28)" xlink:href="#|"/> </svg>

behnamoh 3y ago

Please leave some space between the upvote and downvote buttons. I often hit the wrong button with my big thumbs…

nvy 3y ago
There is an "unvote" clickable link/button available if you tap the timestamp, though I agree HN isn't great UX on mobile.
- qup 3y ago
  I use it as a personal challenge. Growth mindset!
aembleton 3y ago
I seperated them by adding the following line to my uBO filters: news.ycombinator.com##.votearrow:style(margin-bottom:12px !important;) I've also added the following lines to highlight comments that I've upvoted or downvoted to make it easier to see: news.ycombinator.com##a[id^="un"]:has-text(unvote):upward(4):style(border-left: 1ch solid green !important; padding-left: 1ch !important;) news.ycombinator.com##a[id^="un"]:has-text(undown):upward(4):style(border-left: 1ch dotted red !important; padding-left: 1ch !important;)
- behnamoh 3y ago
  the whole point is to make it easier on mobile, not desktop!
  - aembleton 3y ago
    Indeed, that's what I created those filters for. I run ubo on mobile.
    - behnamoh 3y ago
      Ahh, Android then, not iOS.
joveian 3y ago
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.

autoexec 3y ago

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.

colanderman 3y ago

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 https://news.ycombinator.com/favicon.ico 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 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.

entrepy123 3y ago
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.
gregsadetsky 3y ago
Thanks for the feedback! Ah and I also see you generated svg output that would be a bit shorter and more accurate. I’ll try to collect all notes and follow up on them. Thanks for this!
- mustacheemperor 3y ago
  I did a quick comparison at 1x and 10x in photoshop, using guides to compare the geometry: https://imgur.com/a/jWjtmtZ https://imgur.com/a/jWjtmtZ The top of the "Y", at least optically, doesn't seem to extend as far in the PNG, and the intersection of the top legs seems to start higher in the SVG - it looks much higher in the 1x, IMO. I'm sure part of this is just the challenge/inherent mismatch of using a vector to "match" a lossy-compressed raster depiction of text. That said I did this for fun and I don't imagine it will ever bother me - the sharpness is nice! Thank you!

gardenhedge 3y ago

Do you know Dang irl? Most suggestions for HN get ignored. This isn't a criticism, just an observation.

gregsadetsky 3y ago
I don’t. I cold emailed him and absolutely didn’t expect a reply. This was also many many months ago.

Affric 3y ago

Hey Greg, 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?

gregsadetsky 3y ago
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 :)

joshxyz 3y ago

finally, new and improved upvote buttons for people with fat fingers like me thank u

Falkon1313 3y ago

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!"

clone1018 3y ago
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!
- gibspaulding 3y ago
  They don't seem to work in Firefox on Linux either (Ubuntu 20.04), seem to be Windows only for whatever reason.
  - pwg 3y ago
    The two arrows work perfectly here with Slackware 15 and Firefox 102.9.0esr.
    - usr1106 3y ago
      They even work on the dinosaur age Firefox in Sailfish OS. I guess it's just whether the fonts used have the character or not, nothing to do with Firefox as such.
      - MayeulC 3y ago
        Probably, they don't show up on Firefox Android (Fennec on LineageOS 20)
        3y ago

starmftronajoll 3y ago

They look great to me. Thanks for sprucing them up

tomxor 3y ago

Nice work! 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).

bambax 3y ago
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): <svg width="18" height="18" viewBox="-32 -32 64 64" style="background: #f60; border: 1px white solid;"> <rect x="-3" y="-2" width="6" height="24" fill="white" id="rc1"/> <use href="#rc1" y="-22" transform="rotate(-34) scale(1, 1.2)" id="rc2"/> <use href="#rc2" transform="scale(-1,1)"/> <rect x="-30" y="-30" width="60" height="12" fill="#f60"/> </svg>
- social_quotient 3y ago
  Cool! Here is a little smaller version of yours. Spaces and color abbreviation. That word “background” sure is big here. <svg width="18" height="18" viewBox="-32 -32 64 64" style="background:#f60;border:1px #fff solid;"><rect x="-3" y="-2" width="6" height="24" fill="#fff" id="rc1"/><use href="#rc1" y="-22" transform="rotate(-34) scale(1, 1.2)" id="rc2"/><use href="#rc2" transform="scale(-1,1)"/><rect x="-30" y="-30" width="60" height="12" fill="#f60"/></svg>

altairprime 3y ago

Is it intentionally a very bright orange to stand out from the background?

layer8 3y ago
Might be inconsistent color space handling on your browser.
- altairprime 3y ago
  This is correct; it ended up being Noir darkening the topbar but not the SVG.

layer8 3y ago

The downvote button always renders slightly larger for me than the upvote button. I suppose that's not intentional? 8)

ehPReth 3y ago
Hmm, it's the same svg (https://news.ycombinator.com/triangle.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: .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } on smaller screens (@media only screen and (min-width : 300px) and (max-width : 750px)) you additionally get: .votearrow { transform: scale(1.3,1.3); margin-right: 6px; } .votearrow.rotate180 { -webkit-transform: rotate(180deg) scale(1.3,1.3); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg) scale(1.3,1.3); /* FF */ -o-transform: rotate(180deg) scale(1.3,1.3); /* Opera */ -ms-transform: rotate(180deg) scale(1.3,1.3); /* IE9 */ transform: rotate(180deg) scale(1.3,1.3); /* W3C complaint browsers */ } same scale, though
- layer8 3y ago
  Rasterization can still lead to different sizes due to rounding, if the edge (or the rotation point) just happens to coincide with the raster edge between pixels (or something like that). You can't just rely on the shape being the same mathematically, you have to take quantization effects into account. Using dedicated shapes instead of the transform may also be more reliable.

thaumasiotes 3y ago

> Uh... AMA? Suggestions? Thoughts? 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.

bluehex 3y ago
I made my top bar the same as the page color, so that might make the logo basically invisible for me or others with a brighter color defined.
Tesl 3y ago
How are you changing it? I don't see an option anywhere...?
- thaumasiotes 3y ago
  Go to your profile page (by clicking on your name at the right of the topbar). You should see a field labeled `topcolor`. You can set the color of the topbar through that.
- MayeulC 3y ago
  On your user page. It may require some karma? I like it as it tells me whether I'm logged in, and if I had multiple accounts they would be easy to differentiate.

realworldperson 3y ago

[dead]

tasuki 3y ago

I hated the pixelated up/down buttons. Thank you for the vectors!

rapnie 3y ago

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.

somedude895 3y ago

> 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?

H8crilA 3y ago
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?

dredmorbius 3y ago

Nice, and thanks. 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.

javifu 3y ago

A bolder reinterpretation of your "Y" adding rotational symmetry. <svg viewBox="0 0 64 64"> <path d="m1 1v62h62v-62z" fill="#f60" stroke="#fff" stroke-width="1"/> <path id="|" d="m32 28v28" stroke="#fff" stroke-width="8"/> <use transform="rotate(120 32 28)" xlink:href="#|"/> <use transform="rotate(240 32 28)" xlink:href="#|"/> </svg>