Engagement/jsFiddle integration for Kuma

From MozillaWiki
Jump to: navigation, search

First off, it doesn't actually have to be jsFiddle. If there's another "fiddle-like" system that works better for our needs, great. (See also Dabblet, but it doesn't support JS.) The key components to this are:

  • Ability to look at sample code
  • Ability to manage sample code; users with appropriate privileges should be able to upload and update samples, admins should be able to delete them
  • Ability to run samples

Beyond that, this page is a wish-list for how we'd like things to work. This is not necessarily intended to be an exhaustive list! If something is missing that would make this better, please add it to the list, or let us know.

Storage

  • The source code needs to be hosted on a Mozilla server. This will future-proof us against a fiddle site disappearing in the future.
  • The source code needs some sort of version control; it could be using an actual version control system, or something handled in a database. This is an area where our webdev team can help figure out the way to go.

Viewing the code

  • It needs to be possible to use the same code data for both viewing and fiddling; that is, the writer should be able to upload a code sample once and connect it both to a fiddle user interface as well as embed snippets (or all) of the code into the article body.
  • Use a KumaScript template to embed code, such as Template:EmbedFile("filename", "JavaScript") to insert the file named "filename" with JavaScript syntax coloring.
  • Bonus points would let us do things like embed code into the body of the article by specifying a JavaScript function or object name to embed, or for HTML, the HTML ID of the block to embed, etc.

User experience

There's a lot of room to experiment here. Can it all be done in-page and be attractive and easy to use? Or should there be a button to open a separate fiddle window? This could be a button in the corner of the source listing, or maybe have a Template:FiddleButton("filename") template to insert a fiddle button. Or maybe both.

Managing samples

  • All users should be able to:
    • View samples
    • Fiddle with samples
    • Flag an example as needing to be checked due to errors
    • Clear the "needs checking" flag
    •  ? Submit a sample for posting after review by a "sample contributor" (easier than emailing samples)
  • Users with a "sample contributor" permission should additionally be able to:
    • Upload new samples
    • Upload revised versions of samples
    •  ? Save a new version after fiddling
  • Admin users should be also able to:
    • Delete samples
    • Assign and revoke "sample contributor" permission

Sample submissions and changes should have a comment saved with them to note what's changed and why.

Note that "upload samples" could also involve eventually an online IDE for writing them, but that's probably more of a long-term goal than one for this project.