Hacker News Reader

Comment by rafram | Hacker News Reader

> One thing that is remarkable, the icon is displaying a circle, but the icon image is really a square with transparent corners (inside a div container that is a rectangle).

…Yes. Ever seen an image file with circular dimensions? No, because digital images (at least in standard formats) are always rectangles, sometimes with transparent areas that make them to appear to be other shapes.

There are so many shockingly basic misunderstandings in this post.

View on HN

Another thing is that they’re saying the animation is causing the entire page to reflow because it’s a square rotating out of bounds

My understanding is that transforms can’t cause reflows because they occur in the compositing layer. And as a sibling comment points out: everything round in css is actually a rectangle. Unless it’s a path drawn in an svg element. But then that lives in a rectangular frame. You could animate it with svg, though.

Regardless, I want to say I reject the premise here. I’m not sure why a transform would be so inefficient. I have a feeling it could be something else at work here.

Not to super rag on this person, but wow some of the other articles on their website...

They have an article on "cracking the hackerrank test" that straight up advocates for cheating on screeners companies are starting to do through hackerrank. I'm not about to claim that these tests are at all good at measuring your skill as a developer, but I would much rather a candidate engages with the process honestly than openly brags about cheating.

I didn’t see that one. If I saw someone publicly describe being dishonest in an interview process, I think I’d have to rule them out by default.

I know not everyone is perfectly honest all the time. But if you advertise cheating a process meant to reveal rather than conceal information, there’s a real problem.

> I’m not sure why a transform would be so inefficient

Last i asked, if you change a (1) pixel on a modern computer, you need to redraw the screen because it's a surface which is being updated.

This person has also stated the Linux kernel is hard-coded for 8 cores.

https://news.ycombinator.com/item?id=38260935

If you're wondering about that one from few weeks ago. One person from Intel noticed the article and confirmed the kernel bug, they ran some of the kernel benchmarks on their 24 core CPU and found up to 15% improvements when fixed (most difference on scheduler fifo benchmark, though 0% difference on most benchmarks).

I've ran the same on my computer at home and I also got double digit percent difference on a 32 cores AMD.

I thought the basic premise was wrong that the Kernel only uses a maximum of 8 cores. It was rather some scheduling logic that was implemented with a maximum of 8 cores in mind. So the author may have been right that something was wrong, but also wrong about the details (like in this article)

On the other hand he had very influential and interesting posts like this

https://thehftguy.com/2016/11/01/docker-in-production-an-his...

https://thehftguy.com/2017/02/23/docker-in-production-an-upd...

I’m trying to think about what the authors unspoken “better approach” could’ve been, because I’m with you—that doesn’t strike me as remarkable at all, it seems like it’s the way things have always been.

Maybe they were trying to argue that for something as simple as that, it could’ve been a div with a background and a font icon, and used CSS to make the div into a circle, and rotate that? It certainly seems more complicated at a glance, but I’m not a frontend dev, so, who knows?

> but I’m not a frontend dev, so, who knows?

Yeah I don’t get it either.

I kept reading it expecting something to jump out at me. He just goes on about how “a square cannot be rotated”.

This honestly feels like more of a chrome bug or more likely some really weird settings on behalf of the author. I’ve seen this exact approach on the web. Nothing struck me as odd.

What is odd is that he didn’t do any testing with a different browser, machine, or OS even. He just decided to make a blog post.

This is confusing. The author could explain what should be done instead. Even if it was an svg drawing a circle, the render engine will treat as it was a square because of the canvas, which is always an square. In fact rotating an element can overlap bounds, forcing to redraw all the elements around it, causing an extra work. That could easily be solved with an format with animation support (gif, svg, av1, webm...)

Animated gifs have been optimized to an absurd degree for decades. For achieving high-performance animations, this is what I'd try. Then benchmark real-world performance.

Sort of off-topic but I see a lot of round screens in sci-fi and especially retrofuturistic settings and that always wonder if there could be an alternate reality where they took off instead of rectangular monitors. After all for CRTs they were in some ways more optimal!

I dream of a polar-punk alternate reality where we address pixels not by (x, y) but by (r, θ).

Of course there's one big flaw with this line of thinking: even if we used circular (or elliptic) screens, we can't tile them with other circles. Circular windows would waste a lot of space. Maybe we could split in "slices" instead though?

Split the difference and make hexagons? You can still address pixels with (r, θ), and you can tile them with other hexagons (Or squares, if you're into that sort of thing).

> …Yes. Ever seen an image file with circular dimensions?

The browser isn't displaying a file, it is displaying data mapped to a rectangle. It is 2023 you should be able to spend some polygons on those shapes.

SVGs are, alas, also rectangular.

While I wouldn't be surprised if browsers still haven't managed to actually replace flash there have to be dozens of ways to rotate a circle without rotating the rectangle it is contained in. In the case of svg you can, as far as I can find, change the rotation of any shape directly using javascript.

You missed the forest:

>> A circle can be rotated in place. It doesn’t take more space than the initial circle. *A square cannot.*

Edit: and just in case you or someone else miss the forest again:

the site developer treats the image as a circle, assuming rotating the image would change only the image.

And it does only change the image, because it's a CSS animation. For page rendering purposes, browsers only use the size and position of the un-rotated image. It's even visible in the Grumpy Cat example, the rotated image overlaps the edges of the table because CSS transformations don't affect the rest of the page.

Reply on news.ycombinator.com