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

51–60 of 276 posts

Re: Don't animate height

#51

Post by sampullman »

xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Why the embedded SVG hate? A simple icon should be just a few hundred bytes, is reusable, and styleable with CSS. It's not the right fit 100% of the time, but I think it's a very nice feature to have.

Re: Don't animate height

#52

Post by MITSardine »

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

I understand dev time cost > CPU time cost (for the company that hires the developpers anyways) but aren't things getting a little out of hand?

Even without comparing to an 80's supercomputer, what if someone with a 15 years old laptop tries to use their app? What will those 6% CPU on the dev's shiny M2 MBP become?

[1] https://boinc.bakerlab.org/rosetta/cpu_list.php

Re: Don't animate height

#53

Post by wetpaws »

panic wrote: post #40
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Won’t the GIF also burn a ton of CPU? I’m not convinced it would actually be more performant than sliding textures around.

[dead]

Re: Don't animate height

#54

Post by [deleted] »

nawgz wrote: post #34
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Yes you're right, most users LOVE barebones and classic websites, that's why HN is so popular and Reddit hardly has any users. For that matter, do we really need colors? Just ship it with browser default styles.

[deleted]

Re: Don't animate height

#55

Post by xp84 »

nawgz wrote: post #34
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Yes you're right, most users LOVE barebones and classic websites, that's why HN is so popular and Reddit hardly has any users. For that matter, do we really need colors? Just ship it with browser default styles.

I think it's funny that you think sites can't be attractive unless they include many megabytes of complex JS and CSS on every page. Craigslist lasted and was dominant a whole extra generation of the Web until Facebook Marketplace unseated it without even bothering with colors and certainly no animations. And FBM didn't win on clever animations and React UI complexity, it just won based on the fact that it was easier to detect Nigerian scammers since you can see when the buyer's FB account was created and a few other cues. Users don't care how clever your programmatic animations are. They hate how slow your site is. Look how much Jira sucks now. It's more sluggish on an M4 Pro than it was on my Core i5 in 2013 because of how much frontend bloat they've added in the meantime.

Re: Don't animate height

#56

Post by xp84 »

MITSardine wrote: post #44
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

The app taking "only" 6% of a $3k laptop's CPU to show two lines of text and a little 2D animation also gave me pause, but maybe this is just how it is. Still I wonder how people were squeezing pacman out of prehistoric machines, and we're using an 80's supercomputer worth of CPU power (not that far given they were in the ~ 1 GFLOP range) to animate three green bars today.

They actually knew how to code back then. I fancy myself someone who cares about performance and take a great effort to not do wasteful stupidity like those CSS animations for a decorative element, but compared to 80s programmers, I'm actually a complete fraud, because I do everything in interpreted languages that do 10,000 things behind the scenes for every line of code I write. I could never make an Atari computer or NES work.

There are of course a few who do, they all either work on embedded systems or making homebrew for retro computers. So much respect for that level of skill!

Re: Don't animate height

#57

Post by dleeftink »

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…

A bookmarklet that injects custom CSS and selects all/certain items and applies the `contain: content` and `content-visibility: auto;` rules could do to trick.

Additionally, the pseudo `:empty { display: none; }` selector may get you additional mileage.

Re: Don't animate height

#58

Post by ajkjk »

xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

This contempt is misplaced. It is obviously better in one sense to generate an animation on the fly using a short program instead of encoded its literal pixels in a much larger amount of data even after compression.

The ecosystem has largely moved towards that abstraction because it scales better for virtually every purpose, particularly for rendering in different formats.

Now web developers are brought up inside the abstraction and so don't even think to go outside of it by default. Which would be fine, except that the abstraction isn't designed very well: the browser is massively underpowered at building applications in an foolproof way. Part of that is historical cruft and part of it is (imo) a lack of vision--there should have been a (not-backwards-compatible) replacement for html/js/css years ago which solves its fundamental abstraction problems.

But anyway the present is still much better than the past. You must be nostalgic for the era when all monitors were the same size and websites weren't expected to do anything without reloading the page.

Re: Don't animate height

#59

Post by Varelion »

xp84 wrote: post #56
MITSardine wrote: post #44

Earlier quoted context omitted.

The app taking "only" 6% of a $3k laptop's CPU to show two lines of text and a little 2D animation also gave me pause, but maybe this is just how it is. Still I wonder how people were squeezing pacman out of prehistoric machines, and we're using an 80's supercomputer worth of CPU power (not that far given they were in the ~ 1 GFLOP range) to animate three green bars today.

They actually knew how to code back then. I fancy myself someone who cares about performance and take a great effort to not do wasteful stupidity like those CSS animations for a decorative element, but compared to 80s programmers, I'm actually a complete fraud, because I do everything in interpreted languages that do 10,000 things behind the scenes for every line of code I write. I could never make an Atari computer…

I aspire to be one who cares about performance, but I would like to address:

"I do everything in interpreted languages that do 10,000 things behind the scenes for every line of code I write."

Is it even possible to create a modern website, or product, without this? How long would the development cycle take, if everything is to be written in C?

I'd wager that replicating a "minimalist styling" for a react-based website with a dozen or so components would take dozens of times longer to produce.

Re: Don't animate height

#60

Post by xp84 »

jakubmazanec wrote: post #35
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

GIFs don't scale well (including 2x version is not enough); with CSS (and SVG) you get crisp graphics at any scale. And of course you can use asset SVG files that are cached [1]. [1] https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

Citation needed for 'GIFs don't scale well' (in terms of dimensions. They certainly don't scale well when abused as idiotic versions of videos.)

Is this the frontend developer's version of "Postgres doesn't scale. Mongo is Webscale"?

Here's a 640x640 GIF. Scales just fine for me, to half-size or to 100px. I'm using a "Retina" screen. https://cdn-icons-gif.flaticon.com/6172/6172533.gif

Post reply on HN