The default bug view has changed. See this FAQ.

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

RESOLVED FIXED

Status

Mozilla Developer Network
General
--
enhancement
RESOLVED FIXED
2 years ago
a year ago

People

(Reporter: sheppy, Unassigned)

Tracking

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)
(Reporter)

Description

2 years ago
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
I've prepared https://jsfiddle.net/zalun/mk29ttc2/ for testing
Duplicate of this bug: 780040
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
(Reporter)

Updated

2 years ago
User Story: (updated)
(Reporter)

Updated

2 years ago
Depends on: 1156920

Comment 6

2 years ago
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

2 years ago
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

Comment 8

2 years ago
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
Depends on: 1195352
Depends on: 1195351
No longer depends on: 1195352
Depends on: 1198301
No longer depends on: 1156920
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
Oops, closed this based on the V1 user story. V2 hasn't been addressed but is tracked in bug 1156920.
You need to log in before you can comment on or make changes to this bug.