> On my M2 MacBook, the renderer process is now using 6% CPU
Looking at the animation, I'd wager it's still way too much CPU use for what it is.
Don't animate height
191–200 of 276 posts
Re: Don't animate height
#192Earlier quoted context omitted.
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.
What is your point? The random first GIF I found is enormous in pixel size and many frames, thus large in filesize, but a few dancing green blobs would be tiny. You don't need that one's 640px size to scale, and 2x will work perfectly fine.
Re: Don't animate height
#193Earlier quoted context omitted.
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
GIFs scale quadratically with their resolution and they don't even support an alpha channel, which makes them inflexible.
You really don't need an alpha channel for some tiny lineart thing such as the article's example. A single color would even be perfectly sufficient to make an attractive 'dancing bars' animation to indicate "sound is happening." That's my point. Some overpaid "UX designer" decided something wildly complex was needed here, and they're wrong.
In the broader sense, especially in the 'flat design' era where we don't use gradients or complex backgrounds anywhere, a 256-color GIF with its 1-bit alpha (plain transparency) will work perfectly fine to do an animated flat non-3d, non-photorealistic icon that wiggles or whatever, on a background that is almost certainly a plain flat color, and not complex enough to need 16 million shades of transparency.
Re: Don't animate height
#194Earlier 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…
I didn't mean to suggest it would be practical to do the practical stuff people do today with Java, Ruby, Python etc -- web stuff or "app" stuff -- in say, 6502 assembly, or C. Just that doing a good job of the stuff contemporary to those in those languages (especially the 8-bit era stuff) is a tour de force in programming talent.
Re: Don't animate height
#195Earlier quoted context omitted.
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.
Ok, I want to add a pencil icon here, the pencil should be #ccc, here is #ddd, there is rebeccapurple, and over here it should be the same color as the container color. Please write a nodejs server that produces those tiny images, don't forgot to correctly set the caching headers...
Honestly, when people are making use of CSS to "reach into" the svg dynamically, or like your example, to color it dynamically, I'm not opposed to the strategy.
99% of the inline usages I see are people using js includes to inline an SVG which is itself stored in a .jsx file. This is just as lazy and wasteful as it would be if Styled Components were built not to generate classnames and a single stylesheet, but instead with all the rules simply inlined in style attributes on every element.
Re: Don't animate height
#196Earlier quoted context omitted.
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.
Wasting hundreds , well maybe a thousand of bytes in the process ! (I understand it's better to cache and things can go out of hand fast. But we're talking about small animations here.
Believe me, a few kb on every icon on every pageview adds up to a lot of wasted bandwidth and not everyone is on a gigabit connection at all times, even fancy iPhones are on shitty connections a lot more than you think. Inside parking garages, on deprioritized LTE, etc.
Re: Don't animate height
#197Here'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…
> 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. […] But modern "web designers" feel the need to spend how long carefully crafting that CSS animation which adds dozens of lines of code to the codebase and burns a ton of CPU...why? Just because you can, I assume? The animation (which is n…
I can't use the app in question, but I haven't seen any proof it doesn't just "dance when receiving audio". If it tracks amplitude and pitch, I'd still say it's overengineered, since in practice no one can discern anything useful except 2 or maybe 3 states (silent, quiet, not quiet).
Re: Don't animate height
#198Here'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…
Embedded doesn't require a new tcp connection to the server and can be a speed up depending on a number of factors.
An icon served from an is going to be served from browser cache (disk or even RAM) after the very first time it's encountered. Unless you're building something designed to be used for one visit ever (maybe a promotional landing page?) it's better to have a few more requests (HTTP2 especially makes this a non-issue anyway) and have a cache full of assets than to make your dynamic webpages bloated.
Re: Don't animate height
#199The fact that this little animation can have such heavy performance impact tells us one thing: CSS design is flawed. That‘s it. That‘s the whole story.
Re: Don't animate height
#200Here'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…
An engineer could build that much faster than it would take to build an animated GIF in an editor. (For a start, it's a much more complex animation than 6 frames.)
Does it need to be more than 6 frames to serve its purpose? It's 3 wiggling bars to be stuck into a 1/4 inch spot inside a button to serve a purpose of communicating a boolean state (sound happening or not?). The artist who actually designed that probably spent an hour plus getting it just right, wasting a ton of time before the engineer even wrote the "clever" GPU-destroying CSS, and then he had to rewrite the second version after discovering how resource-wasteful the first version was.