Reply here if you just want to see how your username looks like, so we avoid noise and keep that Show HN on the top. comments are really interesting
test post please ignore
Show HN: HN Avatars in 357 bytes
451–460 of 536 posts
Re: Show HN: HN Avatars in 357 bytes
#452Re: Show HN: HN Avatars in 357 bytes
#453Reply here if you just want to see how your username looks like, so we avoid noise and keep that Show HN on the top. comments are really interesting
Testing mine
Edit: a poker face with a strange hat, not bad
Re: Show HN: HN Avatars in 357 bytes
#454For better rendering on high-DPI screens and (more subjectively) screens of people that have zoomed in because HN’s text sizes are unreasonably small, add c.style.imageRendering='pixelated'. I was going to say that the insertion of these 24 bytes allows you to save ten bytes elsewhere by halving the size of the image (making features one pixel in size, rather than two), but then you’d also have to set the doubled ima…
It's a good point, I did consider using that feature but the problem is it's not very cross browser friendly, so I stuck with simpler DIY pixel scaling. In fairness I think there is basically two different values for chrome and firefox, although I'm not sure about safari and cannot test it...
Firefox shipped the value "pixelated" five months ago, so you don’t need to worry about a "crisp-edges" fallback any more. Safari, back in 2016. https://caniuse.com/css-crisp-edges
This is valuable for high-DPI and zoomed pages, to avoid bilinear or similar scaling; the matter of halving the canvas size was a red herring.
Re: Show HN: HN Avatars in 357 bytes
#455This is fun. One suggestion.. rather than creating a canvas for each user using a querySelectorAll and a loop, I'd use an IntersectionObserver and only create the canvases as they scroll into view. That way the user's device won't need to create hundreds of elements when the code runs. let observer = new IntersectionObserver( (entries) => { entries.forEach((entry, i) => { if (entry.isIntersecting) { const p = 2; cons…
Speaking performance/optimisations, interesting choice to destroy canvas when it leaves viewport and recreate it upon each re-entry. Personally I'd leave it created and stop observing the element instead, à la /* … */ if (entry.isIntersecting) { observer.unobserve(entry.target); /* … */ } Do you think (or know) that swapping observed node for canvas (potentially producing many canvases) is more expensive than keeping…
If it turns out there’s some upper bound where caching canvases in memory becomes a problem (eg large threads become not paginated), it’s pretty trivial to build a cache around [Weak]Map and get the ~best of both worlds.
Re: Show HN: HN Avatars in 357 bytes
#456Reply here if you just want to see how your username looks like, so we avoid noise and keep that Show HN on the top. comments are really interesting
hmmm
Re: Show HN: HN Avatars in 357 bytes
#457what is my avatar
Re: Show HN: HN Avatars in 357 bytes
#458checking my avatar
Re: Show HN: HN Avatars in 357 bytes
#459Hah! I got a really cool little icon that looks almost like the cassette tape pirate logo of Piratbyrån back in the day. I have old t-shirts with that logo. MAKE. THIS. PERMANENT! On the functional side, this really helps you see who is who in a long threaded discussion. Your eye is much quicker at following the little color icons than their names.
I do feel like HN needs avatars of some kind... just don't know if they should be customizable or fixed (like this one).
I'm for the fixed avatars. We are all born with certain unchangeable aspects.
Re: Show HN: HN Avatars in 357 bytes
#460test
test