Closed Bug 1148743 Opened 9 years ago Closed 8 years ago

[meta] Add a "View in JSFiddle" link to live samples

Categories

(developer.mozilla.org Graveyard :: General, enhancement)

All
Other
enhancement
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: sheppy, Unassigned)

References

Details

(Whiteboard: [specification][type:feature])

User Story

V1:
* A user in an approved group (admins? beta?) viewing a code sample on MDN will be able to open the code sample in a (tab? iframe?) that gives access to JSFiddle.net's editing/validation/testing features. 
* A product stakeholder will be able to learn how many viewers of the article on MDN used the feature.
* A product stakeholder will be able to learn how long users of the features spent using it.

V2:
* (opened to more users)
* An MDN contributor will be able to save their changes from JSFiddle into MDN's wiki.

V3 & beyond: 
* (more use cases based on what we learn in V2)
What problems would this solve?
===============================
This will let readers tinker with samples and experiment with them. It's also a first step toward eventually being able to edit samples in JSFiddle and save them back into MDN.

Who would use this?
===================
Everyone learning using MDN!

What would users see?
=====================
A button that will pop up a JSFiddle box with the CSS, HTML, and JS from the sample prepopulated. Maybe run the sample too automatically so the result is populated?

What would users do? What would happen as a result?
===================================================
Click the button and see the JSFiddle button.

Is there anything else we should know?
======================================
A few pages that will be good tests:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations

https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Action_menu/2.0

https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Dialog/2.0
Please use standard POST API for now
http://doc.jsfiddle.net/api/post.html

In the future (Monday) it's gonna be under this URL - https://jsfiddle.net/api/mdn/

Althought there are other fields I'd suggest to just use these:

css - CSS code (base64 encoded)
js - JS code (base64 encoded)
html - HTML code (base64 encoded)

This will create a standard HTML5 page with JS code after body
 https://jsfiddle.net/api/mdn/ is ready for consumption
We met during Hack on MDN in Berlin and charted a specific course for this feature that I want to maintain as a user story at the top of this bug.
User Story: (updated)
Summary: Add a "View in JSFiddle" link to live samples → [meta] Add a "View in JSFiddle" link to live samples
Severity: normal → enhancement
User Story: (updated)
Depends on: 1156920
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/1fe406aba7235905bdde64905962c9a4598f80ec
Bug 1148743 - Open jsfiddle and CodePen for Samples

https://github.com/mozilla/kuma/commit/e7db8a69d8610dbbb1cd4cfdf4b359d1e218c70a
Merge pull request #3276 from darkwing/codepen-fiddle

Bug 1148743 - Open jsfiddle and CodePen for Samples
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/98acaf3e1a5f6750543964647d9078d2e98d5994
Bug 1148743 - Do cleanup on generated forms

https://github.com/mozilla/kuma/commit/df4079242fbf9b5f03f08697c15de10d2fe4ef31
Merge pull request #3351 from darkwing/Bug-1148743

Bug 1148743 - Do cleanup on generated forms
Depends on: 1187363
No longer depends on: 1195352
No longer depends on: 1156920
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Oops, closed this based on the V1 user story. V2 hasn't been addressed but is tracked in bug 1156920.
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.