Last Comment Bug 1148743 - [meta] Add a "View in JSFiddle" link to live samples
: [meta] Add a "View in JSFiddle" link to live samples
Status: RESOLVED FIXED
[specification][type:feature]
:
Product: Mozilla Developer Network
Classification: Other
Component: General (show other bugs)
: unspecified
: All Other
-- enhancement (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
:
Mentors:
: 780040 (view as bug list)
Depends on: 1187363 1195351 1198301
Blocks:
  Show dependency treegraph
 
Reported: 2015-03-28 04:21 PDT by Eric Shepherd [:sheppy]
Modified: 2016-01-07 13:40 PST (History)
2 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments

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)      
Description User image Eric Shepherd [:sheppy] 2015-03-28 04:21:15 PDT
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
Comment 1 User image Piotr Zalewa [:zalun] 2015-03-28 16:07:06 PDT
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
Comment 2 User image Piotr Zalewa [:zalun] 2015-03-30 00:55:36 PDT
 https://jsfiddle.net/api/mdn/ is ready for consumption
Comment 3 User image Piotr Zalewa [:zalun] 2015-03-30 00:58:01 PDT
I've prepared https://jsfiddle.net/zalun/mk29ttc2/ for testing
Comment 4 User image Justin Crawford [:hoosteeno] [:jcrawford] 2015-03-31 06:04:09 PDT
*** Bug 780040 has been marked as a duplicate of this bug. ***
Comment 5 User image Justin Crawford [:hoosteeno] [:jcrawford] 2015-03-31 06:24:42 PDT
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.
Comment 6 User image MDN Team (:mdn-dev) 2015-07-20 12:18:55 PDT
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
Comment 7 User image MDN Team (:mdn-dev) 2015-07-20 13:17:52 PDT
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
Comment 8 User image MDN Team (:mdn-dev) 2015-08-04 11:37:36 PDT
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/75acc5c985331996fb0870ec9f0b0bdfe71bb7a8
bug 1148743 - Enable JSFiddle

https://github.com/mozilla/kuma/commit/ea8ee69ad177775b7ca0907c6d1567b9d42b9ae2
Merge pull request #3382 from darkwing/1148743-jsfiddle

bug 1148743 - Enable JSFiddle
Comment 9 User image Stephanie Hobson [:shobson] 2016-01-07 13:40:36 PST
Oops, closed this based on the V1 user story. V2 hasn't been addressed but is tracked in bug 1156920.

Note You need to log in before you can comment on or make changes to this bug.