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):
Stop it! If you bastards optimize this any more, you'll hit the fractal limit, and drop into negative optimized space, renting local spacetime, killing us all!
Ok, but my point was to be readable and easy to understand by using elementary shapes (rectangles), not to be as small as possible. (My version is much bigger than the comment it was replying to.)
Speed is not the only criterion. Using network is a waste of energy and materials when the local cache was enough (even more when nobody sees the perf difference)
That's a valid point, for subsequent loads in this case the inline svg is so small that when compared to the image tag it's replacing the difference is pretty small.
But the other side of this is cache latency, this depends on the caching policy defined in the http header, for example some modes require validating caches with the server which incurs a round trip even if it doesn't require always reloading the resource. If it's fully offline caching then as a sibling comment pointed out, disk caching is not free either, under some threshold (which definitely applies here) inline is going to be the fastest way to get an svg rendering.
Oh I use 'unminified' for that. Even though someone deliberately wrote minified code rather than automatically, so sometimes people disagree. Maybe 'ungolfed' is better.
there's a difference. unminified refers to a program doing that, using single letter function names and such, but the underlying logic is unchanged. code golf is different from that because the human can make changes to the underlying logic if it saves some lines of code, so long as the output is the same.
more advanced minifiers do that as well, but the point remains, as a historical artifact because until we have AGI, there's still a difference between if a person did it vs a human
I personally also use 'unminified' to refer to a horrible person that doesn't care about anyone else maintaining their code doing the same thing, like they're
manually minifying their code to obscure it from their colleagues and future selves.
I wanted to make that definition more popular as there is no reason to write unsearchable code that requires someone else to maintain a mental map of meaningless names to their actual meanings while reading code.
A lot of people (you're one, nothing personal, but I explained this already in a parent comment) don't realize I'm deliberately calling attention to bad behavior and just think I'm confused though. I'll swap to ungolfed.
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.
I did a quick comparison at 1x and 10x in photoshop, using guides to compare the geometry: 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!
Compare also vs. the favicon, which is much higher resolution, and still visible in the browser on the same screen as the SVG version: https://news.ycombinator.com/favicon.ico
Personally, one of the things I like best about this site is that in the ~15 years I've been here, its UI basically hasn't changed. It's refreshing in a digital world where most companies change their UIs and brand identity for seemingly no reason every few quarters. Keeping the appearance of "Y" identical is comforting.
I think the technical term is pixel f*cking. Personally, I could care less about a venture capital firm's brand identity, but I absolutely sympathize with wanting to make a technical improvement as seamless as possible, and respectful of its less technical content. Furthermore, there is a valuable art in doing so. Even something like the separation of view and model is beautiful in itself.
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!
The more commonly-used characters are ▲ and ▼, BLACK {UP/DOWN}-POINTING TRIANGLE (U+25B2, U+25BC).
Parent comment used much newer characters 🞁 and 🞃, BLACK {UP/DOWN}-POINTING ISOSCELES RIGHT TRIANGLE (U+1F781, U+1F783). These were added in Unicode 7, June 2014, where the others have been around for thirty years. I’m mildly surprised at lack of font support on macOS. For me they’re being rendered with Noto Sans Math, and completely wrong: they’re not being drawn as right-angled triangles at all (the angle is about 53° rather than 90°)! I’m guessing the commenter also had a bad font on them, because as a right angle it’d look all wrong for this purpose. (I’ve filed a bug report at https://github.com/notofonts/math/issues/47. Curiously, Noto Sans Symbols 2 also includes the character and gets its shape right, but Noto Sans Math is higher in the font fallback list (`fc-match sans-serif --all`: 881 lines, NotoSansMath-Regular.ttf is 52nd and NotoSansSymbols2-Regular.ttf is 89th.)
There are also ⯅ and ⯆, BLACK {UP/DOWN}-POINTING TRIANGLE CENTRED (U+2BC5, U+2BC6). And more, but of roughly-these-sized ones, these are the ones.
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.
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.
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.
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:
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.
> 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.
By the tiniest of margins, 115. Deleted two spaces and an `l`. Largely inspired by `svgo`. Using `rsvg-convert` to render them both to PNG shows identical output between this and the 118 version. https://rjp.is/hn-svg.html seems to render them identically in Safari and Chrome.
That appears to be trigged by "-32-32" (broken) vs "-32 -32" (working). Looks like this has been a long-standing weirdness in Firefox[1] where it is allowed somewhere but not other places.
On the other hand, the spec[2] does specify whitespace or commas between the viewbox numbers.
Oh, if you then switch to the comma-style for viewBox, drop the / from the path tag, and drop the quotes from the style attributes, that takes it down to 109.
Safari, Chrome, and Firefox are all perfectly happy with it but then rsvg-convert chokes on all of those changes. 114 is probably the best that can be done and still be "conforming" (for want of a better word.)
Apart from being one-lined, the optimised version is more readable and roughly about as compressible. There’s really no reason to have transformation matrices for 2 squares and a simple polygon
transport compression isn't going to help with the unnecessary high precision coordinates.
There are also a bunch of things that are just the result of it being automatically generated by some vector package, such as the transforms, separate paths, masking of a bunch of strokes rather than just flattening the shape etc.
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.
This is some excellent planning. When a future request comes in for east votes and west votes, they can just update the rotate() parameter and push the changes straight to prod.
For anyone who wants to see the logo in action, I'd like to recommend checking out the SVG Playground link. It's a great tool for exploring and manipulating SVG code, and it makes it easy to see how the logo looks on different backgrounds and at different sizes.
The wider angle of the open "arms" of the Y is noticeable to me. The character of the logo is lost in the new design, imo.
Also, the top of the border line of the icon is not aligned with the "Hacker News" on mobile. It displays similarly to the desktop page zoomed in at 250%.
I have noticed this a little when using the site from across the room while very zoomed in. I like to check HN sometimes while I am on the couch in between episodes of shows. Sometimes I simply read a bit and sometimes I have Speechify read articles to me in the voice of Snoop Dogg.
> the Y is not bold enough to look much different than a plain orange square
Seconded, it feels like the spacing between the Y and the borders is a bit too large. I would make the Y a bit thicker.
Other than that, it looks good. Voting arrows particularly so. I have memories of browsing HN on the TV at >200% zoom, the logo was very blurry in that situation.
Oh, bravo! Hacker News now has its very own shiny favicon. How avant-garde! Who knew we were so desperate to keep up with the Kardashians of the digital world? But hey, it's just a favicon, right? Nothing to get all hot and bothered about. Except that it's not just about the favicon, it's about the principle of the thing!
Remember when Hacker News was the final fortress of the internet where content was king, and design was as minimalistic as the wardrobe of a monastic hermit? A place where intellectuals could congregate without being assaulted by the visual diarrhea that characterizes every other website on the planet. Those were the days when it was the text that mattered, not the tiny, shiny icons. But alas, those days are as dead as dial-up!
Once you start prioritizing style over substance, it's a downhill race on a greased slide. Today, it's just an innocuous favicon. But who's to say tomorrow we won't be suffering through animated logos, retina-burning background images, and God knows what other visual atrocities? Before we know it, we'll be swimming in a sea of unnecessary UI elements, auto-playing videos that nobody asked for, and a homepage that's more ad than actual content.
You certainly raise some valid points about the evolution of Hacker News, and indeed many other digital spaces. Minimalism and content-focus have traditionally been valued in certain corners of the internet. For these spaces, adding a favicon or any other aesthetic elements can be perceived as a step away from these principles.
However, it's important to remember that design and aesthetics are also a part of the user experience, and can contribute to usability and accessibility. A favicon, for instance, can make it easier to distinguish between tabs in a browser, improving navigation and efficiency. While it's true that overdoing it with design elements can lead to clutter and distract from the content, there is a balance to be struck.
Your concerns about this being a slippery slope towards a more ad-heavy, visually cluttered site are understandable. However, it's also possible that the addition of a favicon is merely a small design tweak to improve usability, rather than a sign of a larger shift in priorities.
Ultimately, it's crucial that the community voices these concerns and helps steer the direction of the platform. After all, it's the users who make a platform like Hacker News what it is, and their input should be valued and considered.
It would be good to have native dark mode without the need for different browser extensions or hacks. This way we would be able to read HN from mobile, tablet, computer no matter what the browser or OS is.
In Firefox on my iPhone XR, the logo looks too small in portrait mode. It’s being dwarfed by the title and rows of text. Switching to landscape mode looks better because the logo takes up the entire height of the top bar.
Sounds like a nightmare to check the logo in every combination of OS and rendering engine to make sure the 'Y' is perfectly centered in the box and has the same weight.
It doesn't have the same weight or even shape as the old one, so I'm honestly not sure this was a priority. But in principle you are right, SVG is the correct choice.
Is this really an improvement? The logo is tiny enough that I'm guessing we are better off keeping the old logo as it may use fewer resources (not that this page is slow, unlike most of the web today).
In this case the extra request to the server (and associated response) to check if the file has been modified is several times larger than the minified size of the SVG inline. It's literally faster and fewer requests to inline it.
Off topic for this post. This may sound snarky, but I’m saying in all seriousness. HN needs more people to volunteer their time and effort for free to improve its UX, which has been terrible on mobile/tablets, really bad for accessibility, and so on. All this while retaining the core of HN’s simplicity on any web browser (without extensions or HN specific apps). I’ve been waiting for years to see some change, but now this logo change gives me hope.
That's already happened, the forum UI is atrocious, but the Hack mobile app is one of the best forum reading app out there, so it's not a matter of more people volunteering time, it's about HN not willing to implement any improvements
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!