Usability enhancements

[fbender]

To improve readability of the list, I propose to:

• Drop/hide obsolete browsers, e. g. Firefox <17 (Fx 17 is ESR, so it will be around for at least a few months), Chrome <21 (usage numbers are near-zero or actually zero).
• Make columns hideable (so one can only display the columns he is interested in). This can be achieved with a small JS (which I'm happy to provide, but it may take some time before I can get to it).
• Highlight current row (and, if possible, column) on mouseover.
• A way to unfocus browser, by clicking on the focused browser again
• Separate browser+versions into 2 headers
• Fixed header
• Replace bottom notes with inline tooltips (for convenience)
• Expand subtests by clicking on entire cell (except link) not just "down" arrow

[kangax]

@fbender All good suggestions and all of these I've been planning to do in a near future!

[kangax]

@fbender If you're still interested in tackling these, I'd be happy to pull them in. Otherwise, I'll try to get to this within a month or so.

[fbender]

I'll have a look at it this week, however may not finish until the end of next week (depending on other work). If I don't report here, feel free to take over!

[kangax]

Sounds good.

On Sun, Sep 22, 2013 at 10:59 PM, Florian Bender
notifications@github.comwrote:

I'll have a look at it this week, however may not finish until the end of
next week (depending on other work). If I don't report here, feel free to
take over!

—
Reply to this email directly or view it on GitHubhttps://github.com/kangax/es5-compat-table/issues/75#issuecomment-24890439
.

[fbender]

I have a minimal (somewhat dirty) fix at https://github.com/fbender/es5-compat-table/commits/es6-ux – do you agree with the course I take? Should I do something else?

No PR yet, because this fix would benefit from a refactoring, and it does not include item 2 (hiding arbitrary columns) & 3 (highlight current row/column) mentioned above.

Edit: Also, I only did minimal testing in Firefox, though this should work in "modern" browsers incl. IE9 (IE8 may need a script to make the checkbox work). I don't know if the results get skewed because of the hiding, either.

[kangax]

@fbender Yes, I think it looks reasonable, although I already have a way of hiding old browsers in ES5 table. Not sure if you've seen — https://github.com/kangax/es5-compat-table/blob/gh-pages/master.css#L40-L46 It's purely presentational and done in CSS.

[fbender]

Yeah, I saw that while I was already coding. I decided to keep my approach as it separates the data, logic, and appearance. This allows for only updating the data file and nothing else, and everything works as expected. As you can see, there's only an extra field in the JSON (obsolete == (true || false)) which lets the build script add an obsolete class to the respective table cells. Hiding the resp. cells is all done via CSS, too (but does not require changing the CSS file once you add/change/delete engines).

If you like, I can also change the ES5 et al. tables to use my current approach. Just let me know!

I think I'll break up the parts mentioned in the original issue request and do PRs one-by-one over the coming days/weeks (depending on the spare time I have). I'll also have a look at refactoring some of the code if you don't mind, while leaving my current code pretty much unchanged for the first PR (doing small steps to get things done).

[fbender]

First part is now fixed in #88.

[kangax]

Finished in kangax/es5-compat-table@0c9c2ba

[fbender]

Yeah, that's much better, thanks a lot!

One more thing: I think it would be easier to make a column per software, and simply show a version for each feature-platform cell, like: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29 (with some adjustments, e.g. visually marking features that are only available in pre-release builds of a version but not the final builds).
This would be a bigger architectural change, and I'd like to give it a shot next week, if you give me a go.

[kangax]

Hm, not a bad idea! Additionally, I would want to make header (with engine name + version) fixed; perhaps only when scrolling down. It's a bit difficult to inspect entries on a bottom right now.

[fbender]

OK, I'll check it out.

The sticky header is a bit problematic, iirc in Firefox at least, but the new "position:sticky" property is being rolled out, and it should support what you'd like to see. Additionally, the script could break up the table into groups, so headers can be repeated between them … I'll see what I can do.

[kangax]

Suggestion from twitter — https://twitter.com/kangax/status/405089875944546304

[kangax]

Expanded checklist with more stuff

[fbender]

This would be a bigger architectural change, and I'd like to give it a shot next week, if you give me a go.

Unsurprisingly, this did not happen. Though I'm willing to look at it during the holidays, and I'll report back mid-January.

[fbender]

Though I'm willing to look at it during the holidays, and I'll report back mid-January.

Quick update: By now I built supporting infrastructure for the refactoring. I will continue with this work over the next few weeks. This is not on Github yet, I need to cleanup some stuff before I'm willing to push.

[kangax]

Thanks!

Sent from my iPhone

On Jan 11, 2014, at 7:41, Florian Bender notifications@github.com wrote:

Though I'm willing to look at it during the holidays, and I'll report back mid-January.

Quick update: By now I built supporting infrastructure for the refactoring. I will continue with this work over the next few weeks. This is not on Github yet, I need to cleanup some stuff before I'm willing to push.

—
Reply to this email directly or view it on GitHub.

[fbender]

Asana keeps bugging me to report my progress, unfortunately there's no progress to report. :(

It's still on my TODO but thesis and exams have priority right now. Will try to squeeze in more time in March / April.

[kangax]

Sure, don't stress it!

Sent from my iPhone

On Feb 19, 2014, at 9:43, Florian Bender notifications@github.com wrote:

Asana keeps bugging me to report my progress, unfortunately there's no progress to report. :(

It's still on my TODO but thesis and exams have priority right now. Will try to squeeze in more time in March / April.

—
Reply to this email directly or view it on GitHub.

[aeosynth]

how do i hide columns? clicking a header fades out the other columns, but they are still there taking up space

[kangax]

@aeosynth why do you need the space there?

[aeosynth]

i don't need the space there - it's simply easier to read if my eyes travel a shorter distance when flicking between the feature name and implementation. also, some users might not have widescreen monitors; removing the space would mean they could view the columns they're interested in without having to scroll

[kangax]

I guess it might make sense. I'll see what I can do.

[webbedspace]

I feel like my recent colourisation of Javascript engines sort-of fulfills the intended purpose of the last checkbox.

[kangax]

I agree. It definitely comes very close if not solves it completely. Marking as done.

[kangax]

@webbedspace Added 2 more things (on a bottom) that I think will improve overall experience. What do you think?

[fbender]

Is somebody working on:

Replace bottom notes with inline tooltips (for convenience)

Otherwise I will do this next week.

[kangax]

I think @webbedspace is working on eliminating some of the footnotes by adding corresponding subtests, but I'm not sure we'll be able to get rid of all footnotes this way; in which case, this could still be useful.

[fbender]

I'd just add tooltips and keep the existing footnotes so there's no need for scrolling but the full list is readily available. Will do that next week. =

[FranklinYu]

I see that "Make columns hideable" is checked as "done". How do I hide a column now? Let's say I want to hide all the servers/runtimes, how to?