665735 - Live sample management (with jsFiddle)

Status: RESOLVED INVALID

(developer.mozilla.org Graveyard :: Wiki pages, defect, P3)

Comment 2

[John Karahalis [:openjck]]

On bug 665691, Raymond pointed out that the meta-goal is to "show live samples of HTML in action".

Comment 3

[John Karahalis [:openjck]]

In his user interview, Sheppy mentioned he would love if users were able to create and test HTML/CSS/JavaScript demos directly on the site rather than doing this work locally and uploading it.

He mentioned that he is not a fan of jsFiddle and pointed to Skywriter (now merged into Cloud9 IDE) as a possible alternative.

Sheppy: What do you dislike about jsFiddle?

Comment 4

[Eric Shepherd [:sheppy]]

My primary concerns are streamlining the development of examples. The less you have to go off-site or out of the typical workflow of the site in order to put together examples, the more and better examples we will have. jsFiddle isn't bad but is designed, it seems, to be a full-page experience rather than something you would use embedded in content.

Comment 5

[Luke Crouch [:groovecoder]]

I don't see any way to embed cloud9 examples into other pages. Do you know of any tools that offer the right kind of integration already? We have connections to the dev's of jsFiddle so they may help us out with it.

Comment 6

[Eric Shepherd [:sheppy]]

I was just using Cloud9 as an example.

Comment 7

[John Karahalis [:openjck]]

Points well taken, Sheppy. It does look like jsFiddle can be embedded (see http://doc.jsfiddle.net/use/embedding.html). Is this still not ideal in your opinion?

Comment 8

[Eric Shepherd [:sheppy]]

OK, that's kind of nice. I hadn't previously seen the embedding stuff in action before. However, it still takes you to a whole separate page to do the editing if you want to do that, which might not be ideal. But that may be a minor point worth playing with.

Can we store jsFiddle content on our own server? I'd hate to rely on another site for storage and risk the content vanishing on us someday.

Comment 9

[Jay Patel [:jay]]

Remember, Piotr [:zalun], the developer behind jsFiddle works for Mozilla and has been *waiting* for us to contact him about integrating the embedding stuff into Kuma.

Luke/Les:  Can you please reconnect with him and setup some time to discuss?  I'm adding him to this bug so he can follow along here as well.

Comment 10

[Piotr Zalewa [:zalun]]

Hi,

I had some email about Vidyo conference, but no date was provided.
I need to install Vidyo on my Gentoo and will be happy to talk about.

Comment 11

[Luke Crouch [:groovecoder]]

We can do a conference whenever, though we're still a way off from implementing and I'd rather talk about it right before we do it.

Maybe before 1.2 planning? (Sep 7)

Comment 12

[Piotr Zalewa [:zalun]]

I'm traveling the 6th, maybe 4th?

Comment 13

[Luke Crouch [:groovecoder]]

4th is a Sunday, how about the 5th? ;)

Comment 14

[Piotr Zalewa [:zalun]]

Could work - I've got no idea how available I'm gonna be.
Friday would be better.

Comment 16

[David Flanagan [:djf]]

jsfiddle and jsbin seem like simple enough but important enough components that we don't have to go with an off-the-shelf solution here.  We can develop something just right for MDN if jsfiddle isn't just right.

In particular, you might want to take a look at the live editor that Atul Varma has been developing for:

http://lovebomb.me/
http://toolness.github.com/webpage-maker-prototype/
http://webpad.hackasaurus.org/

Atul's solution is aimed at kids and "web makers", while MDN aimed at professional webdevs, but it might still be nice to use the same solution in both places.

Comment 17

[Atul Varma [:atul]]

Thanks David!

We've got plans to add context-sensitive help to webpage maker too, so that e.g. when the user hovers over an <a> tag, they get a bit of novice-friendly help on what that is, examples of its use, and so on--kind of like the related MDN page, but less intimidating for newcomers.

Another interesting thing about our solution is that the UX is static HTML and JS--all server-side storage is done by a separate RESTful API called "hackpub":

  https://github.com/hackasaurus/hackpub

Note, though, that webpad.hackasaurus.org is actually just a fork of jsbin, and we're probably abandoning it since the lovebomb.me/webpage-maker route is more optimal for our needs.

Comment 18

[Piotr Zalewa [:zalun]]

beta jsFiddle will have pluggable editors, so it might just be the case to add another editor to CodeMirror or Ace. I'm developing fiddle as a separate Django app to make it easy to plug into other projects.

Comment 19

[John Karahalis [:openjck]]

Whichever editor we go with, I think this could be a huge asset for the MDN. I once recommended the MDN to a friend of mine who was learning HTML and CSS, but she refused as w3schools.com allowed her to edit code and see the results immediately. In fact, I started learning about webdev with w3schools.com many moons ago for the same reason.

Comment 20

[Les Orchard [:lorchard]]

FWIW, I'd vote for moving this to block bug 756266 as a post-launch enhancement, rather than block Kuma launch in July.

Comment 21

[John Karahalis [:openjck]]

Agreed. I think it should be fairly high-priority after launch, though, due to the value it would provide.

Comment 22

[Luke Crouch [:groovecoder]]

longer-term bug

Comment 23

[Jean-Yves Perrier [:teoli]]

Pages like this one rely on this to have their live examples working in Kuma. (Dekiwiki was allowing <script> by admins, which we can't do right now in Kuma, and won't very likely).

https://developer-new.mozilla.org/en-US/docs/CSS/::first-line

We don't have many page so many pages with this kind of stuff in CSS, but we really want much more of them in the future.

(Adding the link here so that we don't forget to update it once this bug is fixed)

Comment 24

[Jean-Yves Perrier [:teoli]]

Still for remembering:
https://developer-new.mozilla.org/en-US/docs/CSS/:only-child

Comment 25

[Eric Shepherd [:sheppy]]

We'll use this as our tracking bug for the jsFiddle-based sample management system we're going to build.

Comment 26

[John Karahalis [:openjck]]

We already have code example features, so samples will not be simple jsFiddle integration as this bug originally assumed. We may still use jsFiddle as an optional editor for MDN code examples, but it will look much different than simple jsFiddle integration.

Closing this out. We will open other bugs if/when we need to integrate jsFiddle with our existing code example system.