Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Don't animate height

granola.ai

Post reply on HN
Print view View original

101–110 of 276 posts

Re: Don't animate height

#101

Post by DamonHD »

xp84 wrote: post #32
dylan604 wrote: post #17

Earlier quoted context omitted.

If the bars are not related to actual data and are purely just pre-canned animation, the gif would just come with additional file size for a one time cached type of download. If the bars do need to be animated to real-time data coming in, then the gif would not be the right fit for that need.

I've almost never seen these tiny icons to have any actual useful information being conveyed (meaning they are tracking amplitude or pitch). They're usually purely decorative, or boolean in function, meaning you can see they're flat if you are completely silent or they're bouncing around if not silent. You can have 2 GIFs for "silent" and "sound happening" if one cares to truly indicate if it's picking up sound / pla…

And won't annoy people who get over-stimulated.

I don't normally have that issue, but one site had (has?) a bright green thing that jumped periodically that was so vastly distracting that I could not read the text on the page without covering the 'thing' somehow, eg with my hand! Absolutely pointless. I had to give up using the site entirely, even though it was otherwise useful.

Re: Don't animate height

#102

Post by DamonHD »

tristor wrote: post #65

Man, I hate what the web has become in 2025. There is absolutely no respect from frontend developers for their users. It's obscene the amount of wasted CPU cycles, energy, battery life, bandwidth, and time we have in aggregate due to horrible frontend development practices.

Not just front-end!

https://www.earth.org.uk/RSS-efficiency.html

Re: Don't animate height

#103

Post by Dylan16807 »

another_one_112 wrote: post #27
alterom wrote: post #11

So, after all the optimization, they're using 6% of the CPU to display what amounts to a tiny animated GIF that 1990s PCs would have no problem with. But it's vector graphics! , you might say. Yeah, like Flash, which ran fine on Pentium II, with plenty CPU cycles to spare. Pardon me, and I don't say it lightly, but... WTF?!

I do miss flash, but we shall not forget that the performance boost came from low level access to the system (which made it a security risk).

I strongly doubt its ability to render a fast rounded rectangle needed that.

Re: Don't animate height

#104

Post by utopman »

MITSardine wrote: post #52
Varelion wrote: post #42

It seems beyond absurd to me, that this tiny animation should be costing as much as 6% of CPU. There has to be more optimal ways to do this.

So, the CRAY-2 built in 1985 was rated at 1.9 GFLOPS. The M2 the author uses seems to be benchmarked at around 6GFLOPs per core [1]. So this 6% of the author's CPU (assuming charitably this is a single core) corresponds to about 20% of the mid 80's peak supercomputer capacity. People were already using those computers for applications that go slightly beyond animating 5 x 3 green little bars up and down at the time..…

This.

I did not find other comments like this in this thread.

6% M2 cpu (even single core) is a huge computing budget for such a small feature.

At this point I don't really understand why OP seems happy with this result (sorry).

I think even a naive canvas implementation can really and quite easily cut most of this computing budget.

Also, a pure css animated thing should use mostly gpu in a right DOM implementation. I think some issues remains in this result.

Maybe OP displays it's app on a 240hz external screen which makes browser compute DOM animation at 240 fps requiring slighly more compute in a passive way (4o-mini suggests this, I am not sure browser works like this)

I remember too much of my pentium 1 166Mhz let run entire age of empires 2 game in 1997

Re: Don't animate height

#105

Post by rayiner »

thway15269037 wrote: post #99
rayiner wrote: post #93

Earlier quoted context omitted.

They should put in something that allows users to electroshock web designers for wasting their battery.

I don't think combined energy output of every power station on Earth would be enough after we have Electron apps for so long. (edit: typo)

They should call the feature “Electron.”

Re: Don't animate height

#106

Post by webstrand »

bijection wrote: post #15
bob1029 wrote: post #12

I would also suggest looking into the following in this case: https://developer.mozilla.org/en-US/docs/Web/CSS/contain https://developer.mozilla.org/en-US/docs/Web/CSS/will-change There are hints you can provide to the browser that may have an impact in scenarios where you are animating layout properties.

I was just starting a comment on this but you beat me to it! I believe contain: strict; on the parent element would have been sufficient here.

I tested `contain: strict` on their color changing SVG and didn't see any difference. Profiler says it's still doing layout.

Re: Don't animate height

#107

Post by orhmeh09 »

verall wrote: post #33

Is it possible to restrict this as a user? Like to force webpages to use under a certain amount of render/paint time/resources or else just break so that one dumb tab doesn't use up all my battery? Then I can opt-in to greater resources usage if it's a webpage I actually care about. I've seen the "This webpage is using alot of resources" popup before but I don't think it would happen in this case. Because honestly I…

Yes, with StopTheMadness https://underpassapp.com/StopTheMadness/

It works on Safari, Chrome, and Firefox, but you must buy it.

Re: Don't animate height

#108

Post by alexchantavy »

deepsun wrote: post #50

Just wrap it in a container with fixed height and "overflow: hidden". Now the layout engine knows that it doesn't need to recalculate positions of elements outside that wrapper, and it's much faster. By the way, the same trick was speeding up large rendering back in the day. As long as you know the size of your rows or columns ahead of time, which kinda defeats the purpose of .

Is there a good way to learn techniques like this from first principles other than trying to become an employed frontend dev?

Re: Don't animate height

#109

Post by socalgal2 »

verall wrote: post #33

Is it possible to restrict this as a user? Like to force webpages to use under a certain amount of render/paint time/resources or else just break so that one dumb tab doesn't use up all my battery? Then I can opt-in to greater resources usage if it's a webpage I actually care about. I've seen the "This webpage is using alot of resources" popup before but I don't think it would happen in this case. Because honestly I…

How about just not using that site?

Re: Don't animate height

#110

Post by [deleted] »

deepsun wrote: post #50

Just wrap it in a container with fixed height and "overflow: hidden". Now the layout engine knows that it doesn't need to recalculate positions of elements outside that wrapper, and it's much faster. By the way, the same trick was speeding up large rendering back in the day. As long as you know the size of your rows or columns ahead of time, which kinda defeats the purpose of .

[deleted]
Post reply on HN