Show HN: HN Avatars in 357 bytes • Hacker News Board

Re: Show HN: HN Avatars in 357 bytes

#291

Post by tomxor » Mon, Mar 14, 2022, 3:55 PM UTC

chrismorgan wrote: post #21

For 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...

Re: Show HN: HN Avatars in 357 bytes

#292

Post by mrpf1ster » Mon, Mar 14, 2022, 3:56 PM UTC

alainchabat wrote: post #91

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

:)

Re: Show HN: HN Avatars in 357 bytes

#293

Post by throwthere » Mon, Mar 14, 2022, 3:57 PM UTC

How do I buy the NFT?

Re: Show HN: HN Avatars in 357 bytes

#294

Post by yayitswei » Mon, Mar 14, 2022, 3:57 PM UTC

alainchabat wrote: post #91

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

hi!

Re: Show HN: HN Avatars in 357 bytes

#295

Post by bak3y » Mon, Mar 14, 2022, 3:58 PM UTC

alainchabat wrote: post #91

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

edit - I'm an upside down android with antennae?

Re: Show HN: HN Avatars in 357 bytes

#296

Post by sswezey » Mon, Mar 14, 2022, 3:58 PM UTC

alainchabat wrote: post #91

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, please ignore

Re: Show HN: HN Avatars in 357 bytes

#297

Post by ask_b123 » Mon, Mar 14, 2022, 4:02 PM UTC

alainchabat wrote: post #91

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

Thanks!

Re: Show HN: HN Avatars in 357 bytes

#298

Post by rabuse » Mon, Mar 14, 2022, 4:02 PM UTC

alainchabat wrote: post #91

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

What... am... I?

Re: Show HN: HN Avatars in 357 bytes

#299

Post by hutzlibu » Mon, Mar 14, 2022, 4:06 PM UTC

I like it!

Btw. if you have browser extension installed, that add custom scripts to websites, like greasemonkey or tampermonkey - you can have those nice avatars all the time. (without opening up the console)

Re: Show HN: HN Avatars in 357 bytes

#300

Post by tomxor » Mon, Mar 14, 2022, 4:08 PM UTC

onion2k wrote: post #43

This 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…

Thanks, Interesting idea. I'm a little sceptical of the performance improvement, but I suppose that depends what we mean by performance.

Your strategy essentially trades a one time computation and DOM mutation with a continuous but lighter one with some added overhead. In this case I suspect the total power performance is worse over time; _however_ latency and UX should be _better_, since it removes the relationship between total comments on the page and the time to render avatars, which is currently about 100ms for this page on my machine.

I'm definitely biased towards preferring a one time change and making it as efficient as possible, but when the input has a high enough ceiling I can see how your strategy would make more sense - I'm not quite sure where I stand on HN threads - but thankfully this is just a user script so we can make our own choices :)