Live data from Hacker News

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

medium.com

111–120 of 223 posts

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

#111

Earlier quoted context omitted.

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.

I imagine that it could cause accusations from Apple that Google is trying to take their customers out of the ecosystem, putting a nice cash flow at risk.

Hasn't Google been accused of doing exactly that with YouTube and FireFox?

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

#112

Earlier quoted context omitted.

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…

Every time I’m given a table mockup, it’s flexible column widths with a sticky header. It’s damn near impossible even with JavaScript.

You might need table-layout:fixed and could also help to set a column width using colgroup col elements. I think that's what I'm doing on my little table component in this page:https://i5ik.github.io/_____/7guis/

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

#114

Earlier quoted context omitted.

Every time I’m given a table mockup, it’s flexible column widths with a sticky header. It’s damn near impossible even with JavaScript.

You might need table-layout:fixed and could also help to set a column width using colgroup col elements. I think that's what I'm doing on my little table component in this page: https://i5ik.github.io/_____/7guis/

That's why I included "flexible column widths" since it's definitely doable if you use a fixed layout table.

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

#115

Earlier quoted context omitted.

Every time I’m given a table mockup, it’s flexible column widths with a sticky header. It’s damn near impossible even with JavaScript.

You can do this all in CSS, if you’re willing to restyle all the table elements to use grid. I demoed this at my last job, and it worked pretty well. (This has its own trade offs)

We used to use tables to style things that should be grids, now we use grids to style what should be tables. Back to square one :)

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

#116
Shameless plug: we had a really hard time finding an accessible data grid that matches the specs, so we built one recently (in React) for our design system. It’s very minimal but completely composable. For example we don’t have virtualized rows or frozen columns but that’s something that can be added on later; we focused on a foundationally accessible data grid to start: https://paste.twilio.design/components/data-grid

I hope that other data grid libraries can mimic some of this to improve web accessibility. These components can be really tedious to interact with today

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

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

We've been solving the same problems over and over again ever since someone had the bright idea of putting a display on a computer.

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

#118
post #58

Earlier quoted context omitted.

I was going to suggest Google, except... they really don't, do they? They want everyone to use their own tools/sites/etc. Hmm, maybe Mozilla? But they've been firing all of their staff and cutting way back, so they won't do it. Microsoft? Save reasoning as Google. So... yeah, there probably is nobody that has the incentive to do this.

Microsoft is building a web component framework: https://developer.microsoft.com/en-us/fluentui#/get-started/...

I went to check this out, seems they're only focusing on React and beyond that, a maintainer mentions they're looking for funding. Doesn't sound too promising...

https://github.com/OfficeDev/office-ui-fabric-core/issues/12...

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

#119
post #108

Earlier quoted context omitted.

What you need is Open UI. The browser vendors are working on it. https://open-ui.org/ > The purpose of Open UI to the web platform is to allow web developers to style and extend built-in web UI controls, such as dropdowns, checkboxes, radio buttons, and date/color pickers. > To do that, we'll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility…

https://open-ui.org/charter > Most recent revision: April 1, 2020 That doesn't inspire confidence...

Well, it only took 25 years to get some real control over vertical alignment via grid, maybe selects will not be horrible by… 2029? I live in hope.

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

#120

Earlier quoted context omitted.

You might need table-layout:fixed and could also help to set a column width using colgroup col elements. I think that's what I'm doing on my little table component in this page: https://i5ik.github.io/_____/7guis/

That's why I included "flexible column widths" since it's definitely doable if you use a fixed layout table.

[deleted]
Post reply on HN