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

61–70 of 276 posts

Re: Don't animate height

#61

Post by zdragnar »

sampullman wrote: post #51
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.

They're generally static documents that could be served independently, and thus cached, like an image.

Many times, though, they're served up inline in the JavaScript code that templates the html, and thus is cached less aggressively, especially if the FE is deployed frequently.

Re: Don't animate height

#62

Post by filleduchaos »

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.

This seems like a rather knee-jerk response to someone arguing that they can build the same UI with less.

Re: Don't animate height

#63

Post by bobthepanda »

ajkjk wrote: post #58
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…

The problem is that everyone (browsers + developers) need to agree on a replacement, which is notoriously hard to do. Chrome got laughed out of the room with Dart/Flutter.

Re: Don't animate height

#64

Post by dylan604 »

threetonesun wrote: post #29
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.

Can't imagine anyone is deriving much information value from a visualizer with 3 bars. Apple Music has a similar animation and it will start bouncing when you click play, while the music is clearly downloading and there's no sound.

Just because it isn't useful to the user doesn't mean some dev hasn't spent the cycles doing it. I know I've personally had to write code that was an absolute waste, but some PM wanted and it was coded. Usually so it can be a bullet point in a demo that impresses low skilled PMs or sales drone, but techy user types just roll their eyes when it's pointed out to them.

Re: Don't animate height

#65

Post by tristor »

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.

Re: Don't animate height

#66

Post by drdec »

Varelion wrote: post #59
xp84 wrote: post #56

Earlier quoted context omitted.

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

> How long would the development cycle take, if everything is to be written in C?

Once upon a time I worked on a website backed by C. Development times were not appreciably longer.

We had a in-house templating language for generating HTML (also written in C). That implementation got to the complexity point to where even the original devs did not want to touch it to add anything.

But in terms of add a new screen collecting fields x,y,z it was fine. This was a job board, allowing search, applications, saved resumes, bulk opening uploads, i.e. there was some real functionality there.

Re: Don't animate height

#68

Post by Sharlin »

xp84 wrote: post #60
jakubmazanec wrote: post #35

Earlier quoted context omitted.

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

That GIF weighs one third of a megabyte. You could literally fit a fully featured bespoke 2D/3D rendering engine in the same space. Now, it could probably be optimized, but an aPNG would likely be vastly smaller. And these days aPNG is even reasonably widely supported! That said, an animated SVG would likely be the best option.

Re: Don't animate height

#69

Post by endemic »

ironic that the benefit of using web tech (platform abstractions) can be totally negated by such a small footgun, which then requires insane knowledge of the browser rendering pipeline to solve

Re: Don't animate height

#70

Post by Varelion »

drdec wrote: post #66
Varelion wrote: post #59

Earlier quoted context omitted.

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

> How long would the development cycle take, if everything is to be written in C? Once upon a time I worked on a website backed by C. Development times were not appreciably longer. We had a in-house templating language for generating HTML (also written in C). That implementation got to the complexity point to where even the original devs did not want to touch it to add anything. But in terms of add a new screen colle…

Interesting.

If this is the case, I do wonder why we do not see more of this.

Were you around for the original design phase? Why was C chosen? Did you and yours collect performance metrics to see if anything meaningful was gained?

Post reply on HN