Allow quickly running and editing code examples

[dominiccooney]

Coverage of live examples on MDN is spotty, and many are not editable. For example:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox is not live
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids is live but not editable
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow live, interactive and editable, although maybe it's not very clear that it is editable (is that what the MDN logo silhouette means?)

If developers could expect to live edit "everything" then they could get more utility out of MDN without the friction of breaking out to jsfiddle, etc.

[Rumyra]

Hi @dominiccooney - we're having an ongoing discussion about representing interactive examples etc... (see https://github.com/mdn/yari-private/issues/65#issuecomment-889240424) Nothing concluded yet, but it's on the roadmap 👍

[Elchi3]

Thanks @Rumyra, unfortunately the discussion is in a closed source repository, so Dominic can't see it. I think I would like to close this issue a duplicate of "Fix examples on MDN" or "Live examples for APIs & the rest of MDN" but I'm not sure where we have such a project issue or discussion in the open. Maybe @wbamberg has pointers?

[Rumyra]

Apologies - for some reason i thought that was yari and not yari-private 🤦🏻‍♀️

[wbamberg]

Specifically on having interactive examples for Web/APIs, I can't find a bug but did apparently write this document: https://docs.google.com/document/d/1NyjlVdae8kL9VYlBqo8ttxw0-bpkl8XHw7zzuVdIixA/edit#heading=h.hoclswdmy4vb which I have no recollection of writing.

But it seems @dominiccooney 's proposal is broader than this, and is more about, why can't all our examples be interactive? I think this is a complicated question.

For example: not all examples can be interactive because many examples are not executable (for good reasons). Interactive examples (the things at the tops of pages like the one linked at https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow ) have a very specific interface that's completely different for CSS and even for JS and HTML is optimized for simple, short examples. I'm not sure the same interface would work well for longer examples, let alone examples which want to interleave code blocks and explanatory prose sections.

But: I do think our example systems are a mess, and I do think we could have many more interactive examples than we do, and I think "sorting our examples on MDN" is a really valuable project dear to my heart, and also quite a big project where there's analysis work needed on what we want to do and how to do it.

As you suggest there are lots of different overlapping example systems on MDN and it would be great to simplfy/rationalize/improve them. My suggestion would be to start with a document describing all the systems we have, their intended usages,and their pros and cons, and maybe we could use that to build a coherent way forward. I have been promising to write this for a while now.

[Elchi3]

I'm not really sure where this issue going, so I'm closing this for now.

My suggestion would be to start with a document describing all the systems we have, their intended usages,and their pros and cons, and maybe we could use that to build a coherent way forward.

I think this still makes sense and it would be good input into an mdn/content discussion. If there are specific outcomes or project proposals, then I'm happy to look at a new OWD project proposal.