Live data from Hacker News

Don't animate height

granola.ai

121–130 of 276 posts

Re: Don't animate height

#121

You’re still okay with wasting 6% CPU and 1% gpu time on a simple note taking app?

In my wimpy work Virtual Desktop, this page eats 25-40% of my CPU just by scrolling up or down after fully loading. It's a severely limited VDI, I agree, but this performance is crazy for what is functionally a static page.

It certainly doesn't give me confidence in using their app, given this landing page can become as heavy as GMail while doing nothing. How optimized is their electron app? Is the iOS version as heavy? Are they OK with wasting all this energy for nothing?

Re: Don't animate height

#122
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?

Usually you try to build something, realize it’s slow, then do a combination of searching for possible solutions, trying them, and profiling again and again to gain this knowledge.

Experience is the best teacher.

Re: Don't animate height

#123
post #25

"What is Granola spending those cycles on? It's an Electron app" Yup. Matches my experience with pretty much every Electron app. Great that the dev tracked it down, but every Electron app is a waste of...electrons

Might be worth getting off of that high horse. You are not being very smart by saying 'akctually electron bad'. You know what else was a waste of electrons? Your comment, and my reply.

You could have a very, very long exchange of wasted electrons here to be in the scale of an Electron app starting up.

Re: Don't animate height

#124

Earlier quoted context omitted.

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.

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.

Re: Don't animate height

#125
post #32

Earlier quoted context omitted.

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.

If you use uBlock Origin on Firefox, it's very easy to remove that kind of annoyance using the "element zapper" mode. See:

https://github.com/gorhill/uBlock/wiki/Element-zapper

Re: Don't animate height

#126
post #34

Earlier quoted context omitted.

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 hear your snark, but Reddit isn't exactly a beauty contest winner.

Yeah I was thinking "but..." ah but yes I use old.reddit.com. well, case in point.

Re: Don't animate height

#127
post #120

Earlier quoted context omitted.

Seriously. It seems pretty reasonable to allow a web page a total amount of processing that is something like 100% CPU or GPU for 5 seconds. (E.g. can be 25% for 20 seconds.) And beyond that it gets throttled to 3% CPU cumulative max for however long it's been open so far. And make that the default for popular browsers, so sites are forced to be efficient or else be super super janky and stuttering. And allow a permi…

100% of the CPU for 5 seconds seems unreasonably long for a random webpage.

For a news article, absolutely. But I think it needs to be able to handle JavaScript-heavy webapps too.

My suggestion wasn't really about promoting maximum best practices, but just avoiding total runaway excess.

Re: Don't animate height

#128
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…

Embedded doesn't require a new tcp connection to the server and can be a speed up depending on a number of factors.

Re: Don't animate height

#129
post #66

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…

C on the modern web would terrify me. Devs are bad enough with interpreted languages, I can't imagine most of them using a language with a howitser sided footgun.

Re: Don't animate height

#130
> It's an Electron app

The worst modern invention. HTML/CSS is so bloody awful at rendering user interfaces. We should if at least contained it, if not killed it outright. But instead it’s a contagion that has spread far and wide.

How the hell does the optimized version use 6% of CPU? It should render at roughly 5000 frames per second.

What a tragic state of affairs we live in.

Post reply on HN