small-and-fast: show bar graphs with <progress> and CSS

[To1ne]

Instead of relying on Google Graph, or any other service to draw the
graphs, draw them with pure HTML and some CSS.

Fixes #1862.

Looks fairly decent on Firefox:

And Chromium:

I didn't get the tooltip working (fully) yet, if that's something we're looking for.

[dscho]

@To1ne do you have screenshots, too? Or are you deploying to https://To1ne.github.io/git-scm.com/?

[To1ne]

do you have screenshots, too?

@dscho Screenshots added.

Or are you deploying to https://to1ne.github.io/git-scm.com/?

If only I knew how?

[dscho]

do you have screenshots, too?

Screenshots added.

This looks so awesome! And it is really clever to do that with CSS only!

Or are you deploying to https://to1ne.github.io/git-scm.com/?

If only I knew how?

Ah, I see, there is a failed deployment. That's because it tries to build it as a Jekyll site, which is the default on GitHub.

Here is a complete set of steps how to deploy in your own fork (and yes, I should add this to the README.md, I just realized!):

1. In Settings > Actions > General, ensure that GitHub Actions are enabled.

2. In Settings > Pages, under the heading Build and deployment, switch the Source from Deploy from a branch to GitHub Actions

3. Push your changes to the gh-pages branch. This push should trigger a run of the deploy workflow.

   Alternatively, you could make sure that the default branch contains that .github/workflows/deploy.yml file, then navigate to the deploy workflow and trigger it manually on your branch by clicking the Run workflow ▼ button.

4. The workflow run should appear on the deploy workflow page.

The only thing I am unsure about is whether the current redirect from https://to1ne.github.io/ to https://iotcl.com/ would continue to work. It might require a new repository at https://github.com/to1ne/to1ne.github.io/ with a 404.html page whose contents would imitate what we do here with aliases.

[dscho]

I didn't get the tooltip working (fully) yet, if that's something we're looking for.

I had a look, and it does not seem as if <progress> supports :hover fully. At least when I try this in Firefox, it does not do anything.

So I looked and it seems that the <progress> element does not react to the :hover pseudo-class because it is a replaced element. Replaced elements, such as <progress>, <input>, and <textarea>, have their own intrinsic dimensions and rendering rules, which are defined by the browser and not by CSS. As a result, they do not respond to certain CSS pseudo-classes like :hover in the same way that non-replaced elements do.

What did work was to insert dd:hover, but unfortunately that only allowed to change properties of the <progress> element, but not to add the tooltip because ::after is only supported on <progress> elements on WebKit.

So maybe we should just forget about the tool-tip for now? Or do some Javascript trickery.

[To1ne]

3. Push your changes to the gh-pages branch. This push should trigger a run of the deploy workflow.

Ah, that's the trickery you were doing?

[dscho]

3. Push your changes to the gh-pages branch. This push should trigger a run of the deploy workflow.

Ah, that's the trickery you were doing?

Yup 😏

What did work was to insert dd:hover

Maybe this idea could work: Add the value attribute to the span, and then use a progress:has(+ .span) trickery to set the <progress> element's value as we as dd:hover .span::after to show the tooltip?

[To1ne]

@dscho I ditched the idea for having tooltips (for now) and cleaned up the code. What do you think, is this worth merging to get at least something shown on the page again?

[To1ne]

Deploys aren't working by the way, GitHub probably doesn't like me:

[dscho]

Deploys aren't working by the way

On https://github.com/To1ne/git-scm.com/settings/pages, do you see this?

If "Deploy from a branch" is selected, then I understand the symptoms. If "GitHub Actions" is selected, I don't.

I ditched the idea for having tooltips (for now) and cleaned up the code.

Thank you!

I did play a little with the idea of pure-CSS progress bars, but thanks to height: attr(value) not working (but height: var(--value) does work) and vice versa content: attr(value) not working (because reasons, and content: var(--value) works only if that CSS property is set to a string, and there are no casts in CSS), there is quite a bit of duplication there: https://jsfiddle.net/dt3gkufe/2/. Likewise, I was not able to overwrite the <span>'s contents with the class name. Essentially, I have to have redundant --value and --tooltip, where the former is a floating point value and the latter is a string, and also redundant class and <span> contents, to make it work.

What do you think, is this worth merging to get at least something shown on the page again?

Yes, that sounds like the best idea. I will merge it.

[To1ne]

I did play a little with the idea of pure-CSS progress bars, but thanks to height: attr(value) not working (but height: var(--value) does work) and vice versa content: attr(value) not working (because reasons, and content: var(--value) works only if that CSS property is set to a string, and there are no casts in CSS),

@dscho That has been bugging me in the past as well.

there is quite a bit of duplication there: https://jsfiddle.net/dt3gkufe/2/.

I don't think it's that bad. Actually, really nice work.

Likewise, I was not able to overwrite the 's contents with the class name. Essentially, I have to have redundant --value and --tooltip, where the former is a floating point value and the latter is a string, and also redundant class and contents, to make it work.

Well my solution also has that duplication, so that's not that bad.

[dscho]

@To1ne FWIW I'm a bit out of time so I won't be playing with this for quite a while, just in case you wondered 😉

[To1ne]

FWIW I'm a bit out of time so I won't be playing with this for quite a while, just in case you wondered 😉

@dscho To be honest, I don't care enough to try to fix it further.

But... it's broken on mobile:

I think that's easily fixable with css grid.