What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

So, I'm a JavaScript developer (mainly), and I've been using Stack Overflow for a bit now. I keep finding myself needing to use http://jsfiddle.net/ (or similar) in order provide demos in my answers. jsFiddle is great; however, I was wondering if Stack Overflow has any plans to create its own (slightly-more-permanent) code playground for its users?

jsFiddle seems incredibly simple to make, and more often than not the code I find posted in my answers is demo-ready (that is, its real code that doesn't contain place-holders). One way I can imagine implementing this is with a "run this" button which takes the codeblocks from within a post, tries to execute them, and then opens the results in an overlay (or a new window).

share|improve this question
1  
What about non-JS code? Also, I think this has already been suggested in another post... –  Maxim Zaslavsky May 13 '10 at 2:08
    
It's a good point. But over time, I think we'll see services like jsFiddle for Flash (ActionScript), Silverlight (.NET languages), and possibly x86 code (code.google.com/p/nativeclient)? –  Adam May 14 '10 at 22:30
1  
there is that service for Flash (wonderfl.net/about) –  Corey Sep 9 '10 at 16:55
7  
Just came here to suggest this myself; you beat me to it by about 9 months. :] –  Nathan Taylor Jan 25 '11 at 16:58
    
Since it is possible for these sites to succumb to linkrot, this should be implemented. Could only be for javascript at start, then could expand. This is not subject to linkrot because as long as the Exchange is up theoretically the fiddle is up (and vise versa). Also we can make it so these StackFiddles could be oneboxed in chat and many other goodies that we cannot do with other fiddle sites. –  amanaP lanaC A nalP A naM A Dec 6 '11 at 16:42
4  
I just wanted to say that I have a deep desire to see super tight integration with jsFiddle and stackoverflow! –  Gourneau Dec 10 '11 at 4:56
1  
You may want to check out [this nifty userscript[(meta.stackexchange.com/a/99598/178438). Once installed, you can run JS code in marked code blocks :) –  Manishearth May 18 '12 at 8:18
1  
@MrLister ideone.com ? –  Bart May 25 '12 at 10:10
2  
+1 Let's bring sqlfiddle along too! (Yes I realise it would have significantly more overhead) –  Ricardo Altamirano Jul 11 '12 at 3:36
    
This is also licencing to consider as Stack Overflow is CC where JSFiddle is "All code belongs to the poster and no license is enforced." –  Christopher Hackett May 28 '13 at 16:37
    
I have to agree with this completely! I have just posted an example of a working model of my jsFiddle jsfiddle.net/sixfootjames/LY5y5/35 where people can see the efforts I have put in, rather than just asking and expecting others to fix the problem. Now I have to copy all my code back to SO stackoverflow.com/questions/21574424/… which is very lengthy and not many people have the time to read through so much code. It would be far more useful if there were an soFiddle of sorts. –  SixfootJames Feb 5 at 10:24

9 Answers 9

jsFiddle is my project. Is there anything what could be done to make jsFiddle work better with stackOverflow?

share|improve this answer
46  
You made it? Great website, btw. –  uɐɯsO uɐɥʇɐN May 16 '10 at 1:12
3  
Yes, great site indeed. Hmm, not sure. The main reason I'm asking for this is because while I'm worried about jsF's longevity. I can think of one thing you guys could do though: under the share dropdown, provide a third string for posting to SO, perhaps: "**HTML**\n\n" + html + "\n\n**CSS**\n\n" + css + "\n\n**JS**\n\n" + js, where html, css, and js are the code strings with tabs prepended to each line (so that they become codeblocks in SO). As you can see, this is usually end up doing by hand: stackoverflow.com/questions/2807599/…. –  Adam May 16 '10 at 15:51
24  
JSFiddle is brilliant, thanks for providing this great service! –  Pëkka Oct 24 '10 at 20:35
3  
I would suggest including an API so that stackoverflow can access the fiddles and store them locally. This way, there is no inherent fear that the links will disappear, and render some answers useless in due time. On StackOverflow I just got reprimanded for including a fiddle for a simple solution without providing the code snippet in my answer. I see how fiddle links are beneficial in short term, but in the long run this could be an issue. –  DSKVR Jan 2 '11 at 7:46
2  
I've started to write API - it's "unwriteable" - MooTools is using it for demos (doc.jsfiddle.net/api/post.html), but their use case is different. There is always an ability to create a fiddle and download the code from it (add /show_css/ to get CSS part of the fiddle). It's undocummented, but I think it wont change with the beta version ... –  zalun Jan 10 '11 at 10:38
2  
go go go jsFiddle man!!! :-) –  xanatos Sep 5 '11 at 5:14
7  
The main issue I have is speed during peak periods. The response time is just so lagy because everyone uses the thing. I know someone managed to contact you regarding donations but they were declined. I'd love to help you guys get more servers so we don't have to deal with the lag, and I'm sure the people who use your site would as well. –  Incognito Dec 6 '11 at 16:51
6  
The other issue is auto-loading of fiddles that crash the browser or at least the tab. we should have a URL-hack like adding a /norun or something so we can look at the code. –  Incognito Dec 6 '11 at 16:52
    
@user147116 are you still here to answer questions? –  amanaP lanaC A nalP A naM A Dec 12 '11 at 18:13
3  
@Incognito That already exists. just add /embedded to the end. Example: jsfiddle.net/maniator/K3wCM/embedded –  amanaP lanaC A nalP A naM A Dec 12 '11 at 18:15
    
peak time is inddeed problematic - I'm working mostly on beta, but I'm pretty close to add more servers to jsfiddle (it wasn't designed to be scalable...) –  zalun Dec 20 '11 at 8:56
    
I've just added the second server yesteday, this should get rid of the ugly 502. I need still to tweak mysql configuration. –  zalun Jan 11 '12 at 16:19
2  
How has this not been baked into SO yet? I remember reading this months ago. It should be their #1 priority. –  switz Mar 4 '12 at 13:55
2  
I really want jsFiddle integration with SO –  Gourneau Mar 29 '12 at 21:36
1  
A fast and easy way to flag a license for the code, and a visible spot where the license is displayed. If you want to target the site for SO, put "Public domain/'free for all'" and "Creative Commons Attribution-ShareAlike" first in the list. –  Emil Vikström Jun 20 '12 at 16:47

Maybe SO could include stripped-down jsFiddle pages in iframes if it sees a link to jsFiddle posted, or host its own installation. In any event, this would be a great addition, because I find myself wanting to promote jsFiddle every time I see someone posting sample code.

share|improve this answer

I know this is an old thread, but I thought I would add an updated answer as I recently decided to implement a convention for embedding jsFiddles into Markdown posts (while remaining sanitized)

The convention I came up with was the following:

// render jsFiddle embed iframe with default options
$[http://jsfiddle.net/uzMPU/]

// render jsFiddle embed iframe with specific tabs
$[http://jsfiddle.net/uzMPU/][result,js,css]

In addition, following similar convention to links and images, referencing the link by id will also be valid:

// render jsFiddle embed iframe with default options
$[1]

// render jsFiddle embed iframe with specific tabs
$[1][result,js,css]

  [1]: http://jsfiddle.net/uzMPU/

This would result in the following iframes being rendered as the following:

<iframe src="http://jsfiddle.net/uzMPU/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<iframe src="http://jsfiddle.net/uzMPU/embedded/result,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

(In reality, I have modified this slightly, and included a style tag: width: 100%; height: 300px; by default)

In addition to the $[] syntax, I have made it a requirement that the $[] be entirely on it's own line. As a result, writing the following:

This is an inline $[http://jsfiddle.net/uzMPU] fiddle looking link

will not result in an iframe being rendered.

I implemented this with some additions to MarkdownSharp (which is what stack uses to process the markdown AFAIK) and blogged about it in my post Extending Markdown/MarkdownSharp for jsFiddle embedding

I am definitely in the camp that this would be very helpful and nice for js/html/css tagged questions... Although I also think that there would be issues having too many "links as answers" essentially.

share|improve this answer

We've implemented something like this here:

Feedback requested: Runnable code snippets in questions and answers

We thought about just embedding JSFiddle, but we really wanted to make sure that all the code was natively contained in the post itself instead of reliant on a third party. Also there were some license concerns. We decided to just roll our own for now, since it was pretty straightforward to get it doing what we wanted.

share|improve this answer

I would like something like an embedded JSFiddle Frame that can be enabled for questions tagged with JavaScript. Basically, you shouldn't need to click on a link to go and see the wonders of JSFiddle, they should be presented on Stackoverflow itself.

share|improve this answer
1  
I agree, my idea is instead of having code samples in your question, you supply your code in frames similar to jsfiddle. The code could render in your question the same, but there would be a "fiddle" button that would open up the StackFiddle in a new window with the code all ready to play with. then in stead of creating updates or forks and supplying links you could just answer the question with your fiddle. –  ShemSeger Jul 18 at 17:55

Total integration of jsFiddle into Stack Overflow would be wonderful of course. I can't disagree with that.

However, maybe something simpler hosted directly in Stack Overflow pages would prove even more useful? Perhaps something conceptually similar to what you see in Eloquent JavaScript would work. For stand-alone JavaScript code, that's a ready-made solution. For more complex questions and answers that require CSS, HTML, other libraries, etc, a solution hosted directly within Stack Overflow is still preferable to integrating with a third-party project to host code upon which Stack Overflow questions and answers depend.

share|improve this answer

Security/abuse concerns

There are some important design aspects this possible fiddle system should follow: it should be certifiable and run optionally.

The first point meaning the Fiddle should be very clear about what it does: The code and the actual fiddle itself should be intertwined so the poster would not be able to fake what the possible outcome is before the fiddle actually runs.

Secondly, the fiddle should run only upon request of the user looking at the fiddle. This would, again, allow the user to first ascertain whether they actually want to run the code or no.

I don't think the reasoning as to why these two points are important needs further explaining, the possibilities for exploit are too numerous.

Possible functionality

The fiddle could feature generated previews of the final outcome as a comfort-of-use functionality. These previews could be generated server-side using the headless Webkit PhantomJS. Strict performance limitations, API call limits and sandboxing would obviously apply to reduce the risk of possible attack vectors.

A central problem of the design of the fiddle is the question whether it should complement the currently existing code tags or be a new, completely separate system altogether.

share|improve this answer

I realize this can be complicated to implement (and I'm more than willing to help with development :P) and that there are issues that needs addressing, but I think it's plausible, and that we will all deeply benefit from such a feature. I know I would. Here are some ways:

  • It's a bit cumbersome to have to visit an external page just for the sake of viewing the relevant demo. We don't want to leave the website. Ever.

  • It would act as a catalyst for finding solutions (by the OPs), or for the least will provide a further step towards a solution, as such a feature would drive those who hadn't even attempt to isolate the problems with their own code to give it a go — potentially identifying fundamental issues with it.

There are be several points to consider:

  • We probably wouldn't want to simply embed an editable version of the demo, just point to a live preview. Directly Allowing editing that demo inside the post would probably be a bad idea (the post changes content and loses meaning).

    To allow for editing, the embedded frame can provide a link at the bottom, e.g. Edit this demo. This link can create a fork (new demo for editing) in the demo service.

  • Syntax should be simple and straightforward. Perhaps prefixing a link-like markdown declaration with a special sign. Suggested syntax (I just picked @ to indicate a preview as it resembles an eye):

    @[alt-text][http://jsfiddle.net/mydemo/embedded]
    

    This kind of special declaration will also allow for restrictions to be enforced on such links, like those mentioned in the last point; for example, it must be on jsFiddle, and has to be in the form http://jsfiddle.net/[{user}/]{demoId}/embedded/. This will make sure the demo is a read-only (embedded mode on jsFiddle effectively prevents editing).

share|improve this answer

Embeded panel for live code and you can choose frames between JSFIDDLE, PLUNKR,JSBIN,CODEPEN and so on

So that you can include live code examples in questions/answers and both Stack and Services Providers will benefit of this.


| JSFIDDLE | JSBIN | CODEPEN | PLUNKR | ETC.. |

enter image description here

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .