Improve affordance of interactive examples

[Ryuno-Ki]

First off: I'm not entirely sure, whether this issue belongs into mdn/content or mdn/mdn-minimalist. Feel free to move it if you see apt.

My trigger for opening is a tweet by @codepo8 from the other day:

The flexbox explanation page of @MozDevNet is excellent, took me a while to realise that I can edit the code example boxes and play around with them. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

I asked him what could be done to improve the experience. His idea was to show a pen.

In my experience, a pen might be understandable to some people (basically anybody who have prior experience on editing on the web. Even GitHub shows a pen to edit files). I'm not :100: sure, whether it is universally understood, though. Perhaps a word would be easier?

That being said, it could be a sign of bad design to … expressively expose this affordance. Good design should feel intuitive. Nevertheless, it looks like even technical people struggle with our interactive examples, which should be reason enough to think about improvements here.

[avivmu]

The reset button gives a hint about the editing capability so I'm not sure how much of an issue it is. Plus the article gives specific instructions about this:

Change the size of the container or nested element and the nested element always remains centered.

Try the other values and see how all of the items align against each other in the flex container.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

[peterbe]

Can you make the cursor blink?

[Ryuno-Ki]

https://stackoverflow.com/a/42482756 sounds like it could work …

[rachelandrew]

The examples being discussed there aren't the Interactive Examples from this repo. Those are regular MDN examples, some of which are embedded right into the pages, I tend to do mine in the css-examples repo and then embed them (which is what these are). It works, but probably isn't the most elegant solution.

[Ryuno-Ki]

@rachelandrew Do you want me to fill an issue against another repository then?

[rachelandrew]

I'm on it :)