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

161–170 of 276 posts

Re: Don't animate height

#161

Post by dylan604 »

Levitating wrote: post #153
xp84 wrote: post #39

Earlier quoted context omitted.

Yes! And the electron app 90% of the time can't work offline anyway (or often would be useless even if it tried). So it's just an extra 2 gigs of space wasted on my SSD for another copy of Chromium, instead of having the website be an "App" installed in Chrome or Edge and granted notification (etc) permission. In my opinion, most things shouldn't bother to make an "app," and certainly shouldn't try to push their apps…

> In my opinion, most things shouldn't bother to make an "app," and certainly shouldn't try to push their apps on me, unless they want to make an actual native app for their target platforms. It's as people have just forgotten that software used to integrate with the rest of the computer. I know people who install things like Netflix as apps just to have an icon on the taskbar.

Would the taskbar people be older people? There's something to be said about having a quick common place to get to the things you access the most. To that point, there are many many variations of launchers. I really wish webapps had taken off more, or having website create custom shortcuts for the various OSes so they can something like their red letter N logo on the desktop or wherever that just takes them to the website with a click rather launching the blue letter e then have to type something into a location bar or find it in some list of favorites. However, I think the sweet data analytics that apps allow companies to collect is too tempting and the web link just something to avoid.

Re: Don't animate height

#162

Post by pohuing »

zuhsetaqi wrote: post #88
HWR_14 wrote: post #9

What amazes me is that so much a M2 Mac's resources would be used to render a website even if it rendered everything from scratch. There is almost no graphic content compared to a video game produced decades ago, and they would easily render a frame in 1/2 the time on decades old hardware

Keep in mind that the percentage in Activity Monitor is 100 % per core, so a 10 core CPU can go up to 1000 % usage. So 60 % means 60 % of a single core not of the whole CPU.

And it's sensitive to dynamic scaling as well, isn't it? So it's possibly not 60% of a core at max clock, but maybe of a core clocked to 800mhz or something.

I fell for that shallow analysis myself once when I noticed just how apparently bad the gpu usage was for a big of animation in a web page, until I noticed my 30% load gpu still drew as much wattage as it did on idle.

Re: Don't animate height

#163

Post by sema4hacker »

legitster wrote: post #115
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 .

As an old-school webguy, fixes like this article make me sad. The average front-end person these days has so little respect for the DOM and then gets mystified about why the McMaster-Carr website is so good despite being build with ancient practices.

I just went to the McMaster-Carr home page and right-clicked for "View Page Source". There's a LOT of code there.

Re: Don't animate height

#164

Post by spankalee »

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 .

`contain: strict` is much better than `overflow: hidden` for this case, and implies `overflow: hidden`.

Re: Don't animate height

#165

Post by mkoryak »

zdragnar wrote: post #61
sampullman wrote: post #51

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.

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

Re: Don't animate height

#166

Post by socalgal2 »

notatoad wrote: post #142
alexchantavy wrote: post #108

Earlier quoted context omitted.

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

not really. the web is 30+ years of fixes, shortcuts, compatibility hacks, tech industry politics, and other assorted mistakes. the "first principles" to understand it all is the complete set of mailing list archives of the WhatWG, plus the archives of the bug trackers of all the major browsers.

I don't think it would be different for any other system. Trying to make a piece of computer software that is completely responsive to big displays, small displays, touch screens, mice, etc is just a ton of work and a ton of small details you can't easily learn until you need to learn them.

Re: Don't animate height

#167

Post by syngrog66 »

I love all things perf but stopped reading pretty early once I saw enough foundation mistakes (after which all else is folly anyway, haha):

1. making a note-taking app in 2025: 1st mistake. cuz well solved space with great existing tools/options going back to the 80s/90s

2. as a GUI

3. with animations (in a note taking app?!)

4. in a browser

Re: Don't animate height

#168

Post by socalgal2 »

HWR_14 wrote: post #9

What amazes me is that so much a M2 Mac's resources would be used to render a website even if it rendered everything from scratch. There is almost no graphic content compared to a video game produced decades ago, and they would easily render a frame in 1/2 the time on decades old hardware

Videos game rarely do any complex dynamic layout. That is where all the time is going

Re: Don't animate height

#170

Post by gronglo »

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…

> In 99% of cases I do not care at all about the "artistic vision" of the UI designer and in the other 1% of cases (say an in-browser game or some useful data-viz) I could choose to allow the tab to go crazy with my resources.

I'm with you 100%. Although I'd go one step further and say CSS just isn't needed at all, and should be removed from all browsers. Same goes for WebGL (if you want to play a game, download Steam).

This would fix all of your issues and save an unbelievable amount of energy across the planet. Unfortunately people like us are a dying breed!

Post reply on HN