Live data from Hacker News

How I made Google’s data grid scroll faster with a line of CSS

medium.com

11–20 of 223 posts

Re: How I made Google’s data grid scroll faster with a line of CSS

#11
post #2

I have never heard of the "contain" property before this article. It seems like it can be very useful.

Unfortunately, as is often the case when one learns of a new CSS property or a Web API, the browser support is just not there yet. Safari, for example, doesn't support this at all: https://caniuse.com/mdn-css_properties_contain

Re: How I made Google’s data grid scroll faster with a line of CSS

#12

Opinions are my own. I don't think this is recommended to use internally at Google because it's not supported on Safari.

That seems like a bizarre reason not to use it, given that it's strictly a performance optimisation, and browsers will simply ignore CSS rules they don't understand.

Re: How I made Google’s data grid scroll faster with a line of CSS

#13
post #8
post #3

I've been doing web development for 20 years now. I don't know if it's strictly endemic to web or frontend, but I feel like we're solving the same problems over and over again, using the same low levels of abstraction. There's no reason for lists to scroll slowly after so many years of scrolling lists. There should just be one way to do a scrolling list, implemented natively and left alone. Yet, in web development, t…

> There should just be one way to do a scrolling list, implemented natively and left alone. I can't even imagine how that would work without turning into something like that can only be minimally styled and has to be (usually poorly) re-implemented to get it to look the way you want it to.

Maybe webdevelopers should stop trying to make everything look different from its defaults. It used to be that you could reliably predict what clicking the mouse in a region of the screen would do. It wasn't progress, when webdevelopers threw that out...

Re: How I made Google’s data grid scroll faster with a line of CSS

#14
post #11
post #2

I have never heard of the "contain" property before this article. It seems like it can be very useful.

Unfortunately, as is often the case when one learns of a new CSS property or a Web API, the browser support is just not there yet. Safari, for example, doesn't support this at all: https://caniuse.com/mdn-css_properties_contain

It never surprises me to hear that SafarIE doesn't support something.

Re: How I made Google’s data grid scroll faster with a line of CSS

#15
post #8
post #3

I've been doing web development for 20 years now. I don't know if it's strictly endemic to web or frontend, but I feel like we're solving the same problems over and over again, using the same low levels of abstraction. There's no reason for lists to scroll slowly after so many years of scrolling lists. There should just be one way to do a scrolling list, implemented natively and left alone. Yet, in web development, t…

> There should just be one way to do a scrolling list, implemented natively and left alone. I can't even imagine how that would work without turning into something like that can only be minimally styled and has to be (usually poorly) re-implemented to get it to look the way you want it to.

You should see what you can do with and these days, no more do your native browser elements have to look like complete dog to receive free native device controls

Re: How I made Google’s data grid scroll faster with a line of CSS

#16
The article still doesn't answer how scrolling a page can cause layout change. Layout change occurs when elements are added or removed from DOM or when they change their size. I assume there is some Javascript that updates styles on scroll event.

Re: How I made Google’s data grid scroll faster with a line of CSS

#17
post #10

I’m not a frontend dev so I just stick to vanilla html and js. I created a simple table with 40k rows, slapped an input box above it, and had some vanilla js set CSS visibility on all rows depending on whether they matched. This would update live as I was typing (10ms trigger delay). No optimizations. So what are frontend devs doing that they break all of this so badly? Are they just trying to be too smart, I wonder?

They just all need to have the latest shiny thing, spurred on by the idea that a huge amount of abstraction is a good thing.

Abstraction is great, our modern world wouldn't exist without them, but it's a website.

Let's put our tinfoil hats on, and use this to discover that managers promote inefficient development to force higher management to put more funding into projects. It's clear now, the bloated hobby websites are just from that idea spreading.

Re: How I made Google’s data grid scroll faster with a line of CSS

#18
post #8

Earlier quoted context omitted.

> There should just be one way to do a scrolling list, implemented natively and left alone. I can't even imagine how that would work without turning into something like that can only be minimally styled and has to be (usually poorly) re-implemented to get it to look the way you want it to.

Maybe webdevelopers should stop trying to make everything look different from its defaults. It used to be that you could reliably predict what clicking the mouse in a region of the screen would do. It wasn't progress, when webdevelopers threw that out...

I understand what you're getting at, but that ship has long since sailed. It's also important to note that changing the look of elements doesn't necessarily mean making their functionality indecipherable. Bad design will always be possible, restrictions to try and stop it are pointless.

Re: How I made Google’s data grid scroll faster with a line of CSS

#19
post #3

I've been doing web development for 20 years now. I don't know if it's strictly endemic to web or frontend, but I feel like we're solving the same problems over and over again, using the same low levels of abstraction. There's no reason for lists to scroll slowly after so many years of scrolling lists. There should just be one way to do a scrolling list, implemented natively and left alone. Yet, in web development, t…

> There should just be one way to do a scrolling list, implemented natively and left alone.

Maybe this one implementation should not be implemented natively? (otherwise you would need a new implementation for every platform)

However, I agree with you, that in the web development we are missing a mature component library. Everybody seems to build his own library when he needs one. In addition, the libraries to connect components to applications (react, vue, etc.) have their own component formats and logic, so that building components that can be used with different libraries is difficult. Furthermore, building a good component library is in itself a pretty daunting task.

Re: How I made Google’s data grid scroll faster with a line of CSS

#20
post #8

Earlier quoted context omitted.

> There should just be one way to do a scrolling list, implemented natively and left alone. I can't even imagine how that would work without turning into something like that can only be minimally styled and has to be (usually poorly) re-implemented to get it to look the way you want it to.

Maybe webdevelopers should stop trying to make everything look different from its defaults. It used to be that you could reliably predict what clicking the mouse in a region of the screen would do. It wasn't progress, when webdevelopers threw that out...

What do you mean "look different from its defaults" in regards to scrolling lists of things?

I'm not sure what you meant with the second and third phrases, do they relate to the first point?

Post reply on HN