search

mdn / interactive-examples

Home of the MDN live code editor interactive examples
Creative Commons Zero v1.0 Universal
725 stars 507 forks source link

CSS examples: make the diagrams in the transform functions docs redundant #557

Open wbamberg opened 6 years ago

wbamberg commented 6 years ago

I'm filing a bug for this because I think this is a good idea but it's not a thing that should block the current examples for transform functions, which are already a great improvement over what we had before.

Some of these MDN pages for transform functions already come with diagrams showing the effect of the function. The diagrams are...OK. They're quite illustrative I think, although they are quite poor quality PNGs:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

I asked @chrisdavidmills whether we should keep these diagrams, given that we have interactive examples for them:

what I’d really love for full marks is for the interactive examples to provide as much information as the diagram, but then go beyond it. so for example, include a “ghost” of the original image so you can see what it looks like compared to the transformed versions, and also include things like rulers/measures if they are needed. I’m not sure if this is completely possible in all cases, but it is a nice idea, to do away with the diagrams altogether.

Note that some of the interactive examples do already have "ghosts", making the diagrams redundant. For example: https://interactive-examples.mdn.mozilla.net/pages/css/translate.html https://interactive-examples.mdn.mozilla.net/pages/css/translateY.html

wbamberg commented 1 year ago

Update! We did remove those PNGs in the end, and a couple of the listed pages have "ghosts" now, e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate.

But it still seems like it would be a nice feature for the others.