cindyjs / website Goto Github PK

The links in https://cindyjs.org/ref/Alphabetical_Function_Index.html do not work (duplicate ref/). However, make ref within CindyJS produces a correct build/ref/Alphabetical_Function_Index.html

The section titled “Examples” on the current webpage appears to be pretty outdated: it references science-to-touch and the examples directory, but does not mention the main gallery. The project README suffers from the same problem.

For example, the link "View source" in the footer of the Sunflower example points to https://github.com/CindyJS/website/blob/master/src/gallery/main/Sunflower/index.json. I think it should point to https://github.com/CindyJS/website/blob/master/src/gallery/main/Sunflower/ instead.

Commit 33c1a76 added some !important rules to the CSS, but I don't think they should be neccessary and I think that having them will greatly reduce maintainability of the styling. Can we just drop them, or is there a particular reason we need them?

The examples from examples/cindygl/ seem to be missing on cindyjs.org/examples/.

72_InstanceSwappingCanvas.html and 73_InstanceSwappingElt.html break the layout as they append stuff to the HTML body.

The current website uses app.css to choose dimensions for some of the examples. At least in theory this leads to a race condition: if the CSS isn't loaded and applied by the time a CindyJS widget launches, it will have the wrong idea about its dimensions. And until we implement a resize sensor, we may fail to recover from this. So far I haven't managed to actually produce this scenario since Cindy.js takes longer to load than app.css. But with a flaky mobile connection I think this might well happen to some of our potential users.

One possible solution would be inlining the relevant part of the stylesheet into the HTML template, so that it is guaranteed to be available by the time the widgets start. Or we could inline the dimensions in the style attribute for each widget. Another possible solution would be implementing that resize sensor as suggested.

If you know of a way to ensure that a CSS got applied, we could defer widget launches while waiting for that event, but last I looked I couldn't find a suitable event for this. If I remember correctly, Firefox fires onload events for its <link> tags the moment they have loaded, but applies them asynchroneously after that event got processed.

I like the new website!

However, on my phone, the bouncing ball example is extremely slow. This can be a bad first impression, especially when one does not even see the other examples yet that are running in the background and causing the bad performance.

I tried the website in Firefox for Android, Chromium for Android and the stock Android browser, all with similarly bad performance. Each example on its own runs smoothly on the device.

As an improvement, I suggest using the visibilitychange event from Page Visibility API to only initialize and run visible examples.

What do you think?

When accessing the homepage on mobile devices, some examples in the gallery are to big for the screen. This makes scrolling impossible.

I am not sure wheather this can regulated through plain CSS, because we need a way to scale the canvases with keeping the aspect ratio. I guess it needs some work in Javascript...

According to https://www.mathjax.org/cdn-shutting-down/, cdn.mathjax.org is shutting down by the end of April and we should be migrating away from that. A suitable cdnjs.cloudflare.com configuration might be our best bet. Right now there are three gallery pages using that host, one conference presentation and two examples shipped with the source tree.

• website/src/gallery/main/JuliaConjugated/description.md
• website/src/gallery/cindygl/ComplexExplorer/description.md
• website/src/gallery/main/ComplexExplorer/description.md
• website/src/asis/pub/2016-icms/plugins/EuclidMJ.html
• CindyJS/examples/19_EuclidsAlgX2.html
• CindyJS/examples/cindygl/22_explorer.html