Live data from Hacker News

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

medium.com

141–150 of 223 posts

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

#141
post #22

Earlier quoted context omitted.

Writing good browser based software is about delivering the best possible experience for all users regardless of their browser choice. That doesn't mean withholding beneficial features just because they're not available everywhere. It means writing software to take advantage of every possible benefit that improves the user experience, and detecting browser support where necessary to provide fallbacks and polyfills if…

This is how you end up with "the performance sucks if you don't use chrome" complaints though. I imagine Google makes use of optimizations only possible in Chrome quite often making their applications provide sub par experiences on other browsers.

> I imagine Google makes use of optimizations only possible in Chrome

and by intentionally crippling performance in other browsers https://archive.vn/2019.04.15-165942/https://twitter.com/joh...

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

#143
post #69

Earlier quoted context omitted.

I wonder if pushing 40k rows to mobile is such a bad idea. Phones have tons of space now. HD video streaming pulls tons of data. I guess mediocre mobiles complicate matters. Usually there are other factors making it implausible. Such as not compressing/compacting the data on the server, and not being able to limit large blob data columns, unable to control the parsing of data, and lack of normalized relational cachin…

A web page that uses too much memory will cause other browser tabs to be unloaded. If you were writing a comment in another tab, you lose your work.

I'd have thought background tab would be written to it's domain-partitioned bit of the cache before being unloaded. I'm very surprised you lose the current state. To be honest, that sounds like a bug.

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

#144
post #59
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 is not one set of static requirements for lists. New UX paradigms are being invented all the time, which actually make things more usable. E.g. Think about Airtable vs Google Sheets. Also consider data sources and data binding. Do you bind a cell, a row, the entire table? How do you handle real-time updates or infinite scrolling. How is styling done? It always feels like we should just standardize the current t…

https://react-table.tanstack.com/

React Table is very good, in that it manages the table layout and rendering but allows you to fully customize the look of it.

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

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

I work in UX, I am constantly being given designs that don't work well with native/semantic elements- a great example is tables. As soon as the table needs some kind of animation, drag-drop behavior, anything like that, I can't use a anymore; or it becomes some frankenstein kafkaesque amalgamation that is impossible to maintain. Does the table really need an animation? (probably not) drag and drop? (probably not) But…

That is my exact same experience. In good tookits you have good native components, good Dropdown, GridView,DataView even AdvancedDataView , I could put in a native tookit 1 million items in such a widget and have no more performance hit then 20 items where with web the best practice is to implement pagination.

Imagine a CSV editor implemented in web with the "native" components, you will have to paginate the CSV file after each 20 rows.

In good toolkits you just drop the native widget and customize it, and if some idiot will say that native is not customizable then let me tell you that you have no idea what you are talking about, you could customize as much as you want, even paint the pixels one by one if needed and still get performance when you have a table with 1 million of customized widgets.

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

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

I work in UX, I am constantly being given designs that don't work well with native/semantic elements- a great example is tables. As soon as the table needs some kind of animation, drag-drop behavior, anything like that, I can't use a anymore; or it becomes some frankenstein kafkaesque amalgamation that is impossible to maintain. Does the table really need an animation? (probably not) drag and drop? (probably not) But…

Yeah, I've been in the same situation. I do think drag&drop has a place in tables, but definitely not like some (including our) designers want it to work. Luckily my boss was at least somewhat understanding and (after some convincing) let me implement drag&drop using an "insert line" (idk what to call it) instead of moving the element around for real.

- drag start: opacity: .5 the dragged row - drag move: if hovering over a row, apply border-bottom or border-top depending on which half the cursor is closer to - drag end: move the row to the hovered row, opacity: 1

EDIT: or maybe it was outline instead of border, or even a hard inset box-shadow... Whichever one of those ended up wasting the least time re-calculating layout in testing

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

#147

Earlier quoted context omitted.

A web page that uses too much memory will cause other browser tabs to be unloaded. If you were writing a comment in another tab, you lose your work.

I'd have thought background tab would be written to it's domain-partitioned bit of the cache before being unloaded. I'm very surprised you lose the current state. To be honest, that sounds like a bug.

Tab unloading is by design. The difference is that it happens more often on low-memory devices. I use Chrome, but it looks like they all do it:

https://www.chromium.org/chromium-os/chromiumos-design-docs/...

https://hacks.mozilla.org/2021/10/tab-unloading-in-firefox-9...

https://www.reddit.com/r/ipad/comments/gidzwc/why_does_safar...

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

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

>building a good component library is in itself a pretty daunting task.

Google could do a deal with Qt or Apache/Adobe Flex and use their APIs or even copy paste their code, this projects have years of experience and bug fixing, their components are advanced and super easy to use. Using Flex4 is at least 1000x faster then web native.

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

#149

Earlier quoted context omitted.

Tables like you mention, have infinite complexity and requirements. If all you need is the most basic grid, the built in element is fine. But what happens when you need inline editing, filters, searches, live updating data from a server, keyboard shortcuts, etc. A single standard element will never handle everyone's use cases. The parent comment is seeing new wheels being designed for a high speed train and wondering…

> The parent comment is seeing new wheels being designed for a high speed train and wondering why they are reinventing the wheel when wheels have existed forever. Nope. The parent is seeing reinvention of basic UI capabilities such as a basic table and virtualized scrolling and wondering why they are not available natively

I have wondered about this countless times... a game can render hundreds of thousands of polygons per frame but DOM cant handle more than a few thousands of elements without lagging. JavaScript has come a long way, wish the rest of it would catch up. If we as devs can virtualize it, surely browser vendors could too

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

#150

I expected a soft-sell somewhere in this article, and the depth of knowledge had me say “respect. I’ll check out this sell”, but I did not expect $2040/yr for the JS table library!

Not per year! The EUL license is USD 680/developer and is *perpetual* + support & upgrades are optional.
Post reply on HN