794

Today we're proposing a new feature to the Stack Overflow community: Stack Snippets.

What do Stack Snippets do?

Stack Snippets make code blocks runnable. Here's an example:

alert("You can even do alerts");
.hello {
  font-weight: bold;
  font-size: 1.5em;
}
<div class="hello">Stack Snippets allow you to make code runnable.</div>

What's supported?

Stack Snippets work for both questions and answers. The currently supported languages are:

  • HTML
  • CSS
  • JavaScript

You can combine these three languages as you'd please to create runnable code for others to try out. The goal of this feature is to encourage users to create minimally viable and functional code when asking code-centric questions. Answers could then be in the form of a stack snippet which resolved the question at hand. We hope that Stack Snippets enable people to not have to go to other websites in order to produce runnable code.

Eventually we might extend this to other languages, but we're starting with these, because they're easy to do in the browser.

How do I make a stack snippet?

In the Markdown editor window, you'll notice a new button that you can click to launch the Stack Snippets editor.

Shiny and new

The editor appears in a full-screen view and allows you to input HTML, CSS, and JavaScript. You can use any or all of them (must use at least one).

So fancy

When you're done, press Save & insert into post at the top-left to insert your stack snippet into the Markdown text. It gets inserted as regular Markdown code blocks plus some comments that aren't rendered, so they're backwards compatible with revision history, diffs, etc. You can even edit the code right in the Markdown text instead of having to use the full-screen editor.

Mark it down for me

Why?

Every question is better for having minimal, reproducible code. Right now the best way to tell people to do that is to point them to JSFiddle, which is off-site. Using this feature, we plan to push new posters to embed runnable code that reproduces their problem.

Similarly, answers that include runnable code are easier to use and understand, because you can try them out. Obviously JSFiddle is hugely popular in answers already, so we just wanted to make it even easier to use.

Obviously the same rules apply: code-only questions or answers will still be blocked (and, in fact, because of how it's implemented all the existing checks will just work out of the box).

What browsers are supported?

Currently, Stack Snippets will be active for any browser which supports HTML 5's iframe sandbox feature. This mostly aligns with our goal to support 2 releases back from the current version of all modern browsers, with the exception of IE9. See this link for more information.

When inactive, Stack Snippets gracefully render as regular code blocks, so that the code is still a part of the question or answer.

Try it out

Here's a sandbox for trying out the feature. Right now it's only turned on Meta Stack Overflow.

Feedback is definitely welcomed and appreciated.

94
  • 45
    Amazing. And would it be possible to make the editor resizable or not full-screen? Its often usefull to see the question asked when writing an answer, especially when writing code. Commented Aug 25, 2014 at 21:17
  • 68
    Any reason this was chosen over embedding jsFiddle? meta.stackexchange.com/questions/49728/… Commented Aug 25, 2014 at 21:32
  • 35
    I'd much prefer if you made mobile chat work. I can't even star things. Come on! Commented Aug 25, 2014 at 21:33
  • 10
    Not sure if it would be feasible to implement, but some limitation on the number of times a post can spawn a popup window would be nice. I just had to kill IE's process because of the infinite recursion popup on the demo page. Commented Aug 25, 2014 at 22:15
  • 153
    Wait a minute. So now there's a button that lets me run random code posted by unknown people? This is going to end badly. Oh look, here's this incomprehensible mess someone posted a question about... I'm going to just run it without even looking at it. The opportunities for people to sneak in malicious code are endless. Commented Aug 25, 2014 at 22:24
  • 27
    @MichaelHampton we're testing this feature now so please give us an example in the sandbox of a question or answer sneaking in malicious code. meta.stackoverflow.com/questions/269754/… Commented Aug 25, 2014 at 22:30
  • 58
    @TopinFrassi yes, it has the extreme potential for danger. This is why we've taken security measures including hosting the code that runs on an entirely different domain. This ensures that the same-origin policy is not in effect which prevents people from hijacking your Stack Overflow user/account.
    – Haney Staff
    Commented Aug 25, 2014 at 22:38
  • 16
    Awesome feature. Makes me wish I was a better web dev so I could utilize it! Consider this a request for the C# version :) Commented Aug 25, 2014 at 23:44
  • 45
    @GeoffDalgas: "please give us an example in the sandbox of a question or answer sneaking in malicious code" Erm, that's not how it works. Commented Aug 26, 2014 at 0:52
  • 16
    As long as this can be disabled, I'm okay with it. It's a security hole waiting to happen. Commented Aug 26, 2014 at 1:08
  • 28
    @Haney This is why we've taken security measures including hosting the code that runs on an entirely different domain You should note that this causes NoScript to deem it a Cross-site scripting attack which you may want to put a note in an FAQ about so you don't get flooded with "SO has been hacked" posts in the future as well as that the only way to make it run is to whitelist the site in the options menu.
    – MrLore
    Commented Aug 26, 2014 at 2:46
  • 44
    For those asking about jsFiddle embeds, their uptime isn't awesome and we can't have questions breaking because someone else's site is offline. The only other dependency we have is imgur, which we both pay for a private hosting on and has incredible uptime. Doing so also restricts us to only JavaScript - we have bigger plans if this is something the community wants.
    – Nick Craver Mod
    Commented Aug 26, 2014 at 10:13
  • 65
    @NickCraver "we have bigger plans if this is something the community wants" Given the number of requests, I would put "running regex live" up in that wish list... Commented Aug 26, 2014 at 11:52
  • 7
    This is going to end badly. Commented Aug 26, 2014 at 12:43
  • 17
    @Haney - Code Review is a good target to consider and are enthusiastic about getting this going...
    – rolfl
    Commented Aug 27, 2014 at 17:31

53 Answers 53

327

Provide a button that allows us to "fork" a snippet into an answer, with highlighting of differences between the original and the "forked" version.

This will make it easier to:

  1. Quickly copy the snippet and modify it and
  2. Easily make the changes visible in the answer, for illustrative purposes.
10
  • 10
    Yeah, this is on my radar for sure. We'll see what I can come up with!
    – Haney Staff
    Commented Aug 25, 2014 at 22:16
  • 55
    Good idea, but this just begs for snippet-only answers.
    – AstroCB
    Commented Aug 26, 2014 at 4:36
  • Do you mean something like the edit suggestions? Commented Aug 26, 2014 at 10:23
  • 5
    It seems like this could be applicable to more than just these runnable snippets. If I want to rewrite a piece of code from a C# question and highlight the differences, this would be very helpful.
    – p.s.w.g
    Commented Aug 26, 2014 at 17:33
  • 9
    I'd rather have the ability to highlight specific lines of code in my answer so that I can explain them without using embedded comments. I've seen paste sites that allow you to start a line with a special character, or combination of characters to flag that line as highlighted. This would be incredibly useful for answering questions in a clearly formatted manner.
    – crush
    Commented Aug 27, 2014 at 14:28
  • Also: open source your diff algorithm when you do implement this :) Commented Aug 28, 2014 at 0:27
  • @AstroCB It seems it would be trivial to flag snipped only answers as low quality, like the site does already. Commented Aug 28, 2014 at 22:20
  • @KyleTrauberman True, but those flags are normally declined.
    – AstroCB
    Commented Aug 28, 2014 at 22:39
  • @AstroCB, do you have some stats to back that up? I see those flags all the time in the review queue, and I agree with a lot of them. Commented Aug 29, 2014 at 16:01
  • @KyleTrauberman Whenever I'm in the LQP queue, I recommend the deletion of almost every single post; it's usually there for a reason. If not that, I'll edit it to fix it up or attempt to remove the thing that got it flagged in the first place. Recently, however, the majority of my low quality flags have been declined because the meaning of that flag is supposedly changing.
    – AstroCB
    Commented Aug 29, 2014 at 16:13
152

In the tag, we get comments like these all the time:

JSFiddle please

It would be better if we had a JSFiddle

I can help you if you give me a JSFiddle

We outsource a lot of content to JSFiddle, so having Stack Snippets onsite would certainly help (though it does negate the need for a userscript I've been working on...).

I am all for this with one restriction:

Please, please, please do not allow snippet only/(code + snippet)-only answers. It's bad enough now that there are answers like this:

this will work for you thx.

alert("this is a test");

Our goal here is to not only help the OP solve his/her problem, but also to teach him/her to solve problems on his/her own. If we allow people to answer with the exact same code + fixes applied, the OP will come back again and again asking for debugging help. We value answers that explain the problem and how to fix it, so adding something like this could be dangerous without the proper restrictions.

Perhaps a character restriction or forbidding common phrases like "try this" (I know that this is frowned upon, but it's already in use, anyway, so we may as well use it here) would encourage people to explain their code (there will always be those people who do "...lots of text so I can post answer..."), but there has to be some way to encourage people to do this. (Feel free to comment with ideas.) Code-only questions are forbidden, but code-only answers are still allowed (for whatever reason), so anything is an improvement.

As long as the rules are made clear (put it in the tour or something: don't just leave it as an obscure menu bar time without any context or guidance), this could be an immensely helpful tool.

25
  • 2
    Mostly agree, except if you put a restriction that people must write prose along with their code, people will work around it with ".........." or "here's the code" or some other rubbish ("This will work for you thx." counts!), because people always work around restrictions they don't like/understand. The fact that this problem is fated to exist is just another example of why this is a bad idea. Commented Aug 25, 2014 at 21:49
  • 53
    Code only questions are already forbidden, and remain forbidden with stack snippets. Commented Aug 25, 2014 at 21:49
  • @LightnessRacesinOrbit True (I forgot to add a part about character restrictions, but your point still applies).
    – AstroCB
    Commented Aug 25, 2014 at 21:50
  • 2
    @KevinMontrose That's right: I forget that sometimes because I'm so used to seeing code-only answers.
    – AstroCB
    Commented Aug 25, 2014 at 21:57
  • 1
    Clearer guidelines and word counts by bots can only do so much; the only effective long term solution is down voting and leaving comments asking the poster to explain their solution so that it can stand alone to help future users.
    – AmeliaBR
    Commented Aug 26, 2014 at 0:15
  • 2
    I've seen that people often just work around restrictions instead of following the advice given, for example placing jsfiddle.com in a inline code span instead of actually adding the code to the question. Commented Aug 26, 2014 at 1:55
  • 2
    I'd rather have the choice of downvoting code-only answers than try to forbid them and end up with workarounds like LRiO mentioned (in which case I'd probably still downvote anyway but then it just makes the filter pointless, also see meta.stackexchange.com/questions/176902/… and meta.stackexchange.com/questions/169694/…)
    – BoltClock Mod
    Commented Aug 26, 2014 at 6:54
  • 7
    5 lines of Well Documented code and a link to MSDN is worth an essay of explanation. Don't limit people giving code answers.
    – Still.Tony
    Commented Aug 26, 2014 at 15:53
  • 5
    @Okuma.Tony We've had this discussion before. The consensus is that code-only answers are fine if they are well-documented; the problem is that well-documented code-only answers are a rarity (especially in HTML, CSS, and JavaScript, which is what this is currently being used for).
    – AstroCB
    Commented Aug 26, 2014 at 15:58
  • 2
    Give a man a fish, feed him for a day. Teach a man to fish, feed him for a lifetime? Yes, I wish that code only answers would get downvoted more aggressively. Unless they contain comments that explain what is happening of course.
    – crush
    Commented Aug 27, 2014 at 16:42
  • 1
    I'd upvote this ten times if I could. Crappy, lazy code-only answers just make me ragey. It's especially worse when the OP is not asking for code, but a fix (an explanation and/or a little bit of code). I never understood why people bother to dump some code automatically.
    – Jamal
    Commented Aug 27, 2014 at 17:06
  • 1
    @Jamal I think part of the "code-only answer" epidemic is new users desperately trying to make a name for themselves so that they are taken more seriously. Lately, I've been seeing people post an answer instantly with crap like "will update with answer soon". Like it's a race to be the first to answer, even if you don't have a quality answer yet.
    – crush
    Commented Aug 27, 2014 at 17:19
  • 3
    I disagree with the idea that this is primarily a teaching site rather than an answers site. To me, the primary purpose of stack overflow is not to teach, but rather to provide a resource to experienced programmers for getting answers to issues that they happen to be stuck on. In my opinion, code only answers that answer the question are fine.
    – Warren Dew
    Commented Aug 27, 2014 at 19:00
  • 1
    but there has to be some way to encourage people to do this It's called a downvote.
    – Cruncher
    Commented Aug 28, 2014 at 18:47
  • 1
    It would be nice to have a BANNER that shows up whenever a codepen or jsfiddle link appears (especially since there are a lot of web dev questions on the site).
    – user9903
    Commented Jan 28, 2017 at 20:36
98

This is an awesome idea. It would be even more awesome if you supported additional languages.

This seems like a really cool idea, but I'm starting to doubt its value.

  1. Sometimes the fiddle requires more than the 'answer' code. The accepted answer on my most recent JavaScript question is a good example.

    Before

    It is possible to implement it without setTimeout using window.getComputedStyle.

    The basic idea is:

    joe.style.opacity = 0; //Unnecessary in this case, set by CSS class   
    window.getComputedStyle(joe).getPropertyValue("width");
    joe.style.opacity = 1;   
    

    Here is the jsFiddle: http://jsfiddle.net/4Vy9n/2/

    After

    With the new feature enabled, you are more likely to get answers like this:

    document.body.onclick = function () {
      var joe = document.createElement('div');
      joe.innerHTML = 'yo!';
      joe.id = 'joe';
      document.body.appendChild(joe);
      window.getComputedStyle(joe).getPropertyValue("width");
      joe.style.opacity = 1; 
    }
    #joe { transition: opacity 1000ms; opacity: 0; }
    <span>test</span>

    Wow, that was long

    I'm concerned that encouraging use of this feature over jsfiddle.net will cause people to include more 'irrelevant code'. This means longer questions and answers.

  2. It isn't as easy to edit.

    Having the full operational code and separators inline makes for longer source code on the post. I'd say this pushes the limits of what Markdown is intended to be.

    You could create a better rich text editor to keep people from having to work with Markdown directly so much. That's probably more trouble than it's worth though.

    Remember, not everyone can use Markdown as well as you or me, and even if they can, that doesn't mean it's a fast job.

Summary

As proposed, I'd say this feature would cause more harm than good, because it would result in an increased average length in questions and answers, and too much inline activity when you expand/collapse the fiddle display.

jsfiddle.net works, perhaps you should follow that model? Keep the 'fiddle' code separated from the 'posted' code. You can either continue to use jsfiddle.net or create a new stackfiddle.net or whatever. Focus on improving on this model rather than re-inventing the wheel.

18
  • 35
    I've been thinking about this one a lot. I think it's still better to have all the code in the answer -- otherwise you're dependent on a third party or at least a separate page for the full story. It's no different from any long answer. If there are two really important lines you should call them out at the top, and then have the full snippet below. Maybe we could experiment with collapsible parts of a post that can be hidden by default, if we think they're really unimportant.
    – David Fullerton Mod
    Commented Aug 26, 2014 at 1:49
  • 3
    We're already dependent on imgur, a community staple, for images. Why would we not rely on jsfiddle, another community staple, for, well, js fiddles?
    – corsiKa
    Commented Aug 26, 2014 at 1:55
  • 19
    @corsiKa Stack Exchange has a commercial partnership with Imgur that ensures that the images hosted there will not be subject to "link rot." There is no such partnership with JSFiddle.
    – AstroCB
    Commented Aug 26, 2014 at 4:39
  • 10
    1. is very important, the first thing that came to my mind when I saw this new feature. I almost never want to display all the demo code in my answer. There should be some separation (displayed code / demo code), or an option for the demo code to be fully hideable.
    – kapa
    Commented Aug 26, 2014 at 7:26
  • 2
    @David, Perhaps take a moment to visit the example question and answer. The code from the answer fiddle is just a repeat of the code already in the question. If there were multiple answers with alternative solutions, the added web page length would result in an inferior user experience. You'll also notice the heavy use of fiddles in the question which I included to provide evidence of my assertions. I would certainly be doing a lot less of that if it were 'inline'. Commented Aug 26, 2014 at 12:09
  • 4
    @DavidFullerton: Please, trust at the very least people who are writing the answers to know which parts of answer are important to show and are irrelevant. At least for me the feature in it's current form is entirely valueless, as including all the setup code in answers is going to give askers a terrible learning experience. Commented Aug 26, 2014 at 13:17
  • What if I were to work out a set of region tags that could be used to decide what is shown and hidden in the resulting Snippet, even though all code would run. Thoughts on that?
    – Haney Staff
    Commented Aug 26, 2014 at 14:45
  • 2
    @Haney Simpler: Automatically partially collapse all code blocks to show 10 or so lines. Add an option in the tag [or however this is implemented] to specify which line is the first line you want to display in collapsed mode (the lines people get w/o uncollapsing). I think auto-collapsing code blocks would be helpful with or without the runnable code snippets.
    – Joe
    Commented Aug 26, 2014 at 15:24
  • 1
    Also, for answers, you won't generally be adding runnable code snippets for every separate answer. You may need no snippets, or one, but if they're all just saying 'modify this (different) little bit here', they don't need runnable snippets individually. (Also, if answers could be made to automatically inherit the question's css/javascript, that might save some lines, as you only change what you want to change.)
    – Joe
    Commented Aug 26, 2014 at 15:26
  • 11
    Okay you've convinced me there's a problem. What about an option to hide the snippet by default? The code would still be in the post, but hidden behind a click (similar to the jsfiddle example, except you wouldn't go to a new page). Here's a quick mockup: i.sstatic.net/X0XKU.png
    – David Fullerton Mod
    Commented Aug 26, 2014 at 16:09
  • 1
    @DavidFullerton that was the first thing I thought of when reading this post, it would work :) Commented Aug 26, 2014 at 18:03
  • 4
    @DavidFullerton Consider adding the optional ability to mark a single range of lines (like, lines 10-30) within the runnable snippet, that should be considered the "most important", and therefore displayed in the answer. Then have a "show/hide" button that hides all lines outside of the range. Commented Aug 27, 2014 at 2:48
  • @DavidFullerton but make it opt out please, not opt in ;) I feel like in most cases one does not want to see the whole thing. I usually do not use samples unless I want to see what something does (if I do not get it)
    – Theolodis
    Commented Aug 27, 2014 at 8:46
  • 2
    In reply to "Remember, not everyone can use Markdown as well as you or me, and even if they can, that doesn't mean it's a fast job.": If you are competent enough to write any coding language, understanding the syntax of Markdown should be a breeze.
    – crush
    Commented Aug 27, 2014 at 14:31
  • 2
    @crush, I would like to clarify. I think the current use of Markdown desirable, but including three languages in snippet form with such separators would be much less user-friendly from an editing and formatting perspective for large fiddles. It is much easier to edit the three languages in separate textareas, and to have it separated from your question code. Commented Aug 29, 2014 at 0:18
48

Limiting this to JS/CSS/HTML seems a bit restrictive. The usual coliru-style online compiler offers many language implementations.

Also, I just saw,

Answers could then be in the form of a Stack Snippet which resolved the question at hand.

This is just going to encourage code-only no explanation answers, as well as questions. Including a Stack Snippet would be nice. Snippet-only questions or answers would not be nice.

6
  • 12
    I'm sure they're only doing one step at a time.
    – Mysticial
    Commented Aug 25, 2014 at 21:09
  • 17
    Stack Snippets don't support MUMPS. I am disappointed
    – gnat
    Commented Aug 25, 2014 at 21:09
  • 17
    Added some notes to the post. (1) It's JS/CSS/HTML right now because that was the easiest. If it's successful we may expand to other languages. (2) All the same rules about code-only questions and answers apply, and in fact it's just inserting code blocks so the existing checks will all work. All this does is make it runnable, which seems like it's always better (?)
    – David Fullerton Mod
    Commented Aug 25, 2014 at 21:23
  • @David, so you theoretically have the power to extend it to other languages (which, last time I checked, implies running some compiler/interpreter forty times per second on mid-to-low end traffic). Surely you have provisions in place to avoid a few well-organized-enough individuals from DDOSing the site out of existence, right? :) Commented Aug 25, 2014 at 22:29
  • 3
    A lovely new option to play with. Can't wait for a Z80 emulator! (I'd probably have to dig up my ol' Rodney Zaks hardcopy.)
    – Jongware
    Commented Aug 25, 2014 at 22:31
  • 2
    @gnat mumps can lead to infertility, it's actually a relief they are not supported :D Commented Aug 26, 2014 at 8:15
42

Oh, and here are some items that you are probably already aware of:

  • There should be a way to close the snippet when done.
  • It should not 'break silently' just because you don't use semicolons.
  • The snippet creator form could use some aesthetic improvements.
    Perhaps use the quad view like jsfiddle.net, add an actual close link, etc.
0
35

I get this

enter image description here

But I'm stubborn..

enter image description here

Is it supported or not? If not, please make it available for touch devices.

5
  • 1
    What did you do to get it to work?
    – tbodt
    Commented Aug 29, 2014 at 0:46
  • 3
    @tbodt One finger and a bit of stubbornness ;)
    – Omar
    Commented Aug 29, 2014 at 6:04
  • 1
    @Omar, What did you do to get it to work?
    – Pacerier
    Commented Mar 9, 2015 at 0:29
  • 1
    What did you do to get it to work?
    – LinusG.
    Commented Jun 14, 2019 at 15:11
  • 1
    Probably this if anyone was wondering.
    – TheMaster
    Commented Jul 27, 2019 at 16:39
33

Can I suggest finding a better way to separate the three code blocks? They sort of run into each other a bit at the moment.

And what version of HTML will be used for any given snippet? Needs to be clearer as sometimes this is important.

Otherwise good.

2
  • 7
    Solid points, let me think on this for a few.
    – Haney Staff
    Commented Aug 25, 2014 at 22:15
  • 9
    I'd love to see <!-- language: lang-js --> place a small "JavaScript" header within the code box, personally.
    – crush
    Commented Aug 27, 2014 at 14:34
32

The perfectionist in me is disgusted by casing of the word "Begin" in <!-- Begin snippet: js -->. It should be "begin" instead to match "language: lang-js" and "end snippet".

P.S. Now it's easy to crash browsers...

3
  • @DJDavid98 I'm not active in the topics where jsFiddle is used. Can all the people that can edit other people's questions and answers on SO also edit other people's code on jsFiddle? Commented Aug 26, 2014 at 18:08
  • @JoshuaTaylor Yes, sort of. Just need to fork the fiddle and update the question/answer with the new fiddle link.
    – 0b10011
    Commented Aug 26, 2014 at 19:36
  • 8
    @DJDavid98 The difference is that before it wasn't SO's site that was causing your browser to crash. Now, it is.
    – crush
    Commented Aug 27, 2014 at 16:24
29

Awesome feature. Will be much appreciated. If at all possible, I would create a possibility of two levels of code view. The reason behind it - boilerplate code that is not relevant for the actual answer. One way to solve it:

  • checkbox/toggle "hide in answer" for each of the sections
  • additional #hide and #unhide comments for sections of JavaScript/CSS/HTML wrapped in any style of the comment in respective language, e.g. <!--#hide--!> or //#hide or /*#hide*/
  • button on the actual answer Show all near Run code snippet

There are for sure other, neater ways, just can't think of one. As it is, for me, if answer requires a lot of boilerplate, possibly already included in the question, I will resort to jsfiddle. If it is bearable, I will definitely use Code Snippet.

4
  • Or a boilerplate insertion where a CDN can be linked Commented Aug 26, 2014 at 0:13
  • 6
    I was just about to add this as a suggestion; I use JS Fiddle a lot (primarily in the d3.js tag), and I very rarely want all of the code necessary for a working example to be included in the answer.
    – AmeliaBR
    Commented Aug 26, 2014 at 0:20
  • So then, not only can we include malicious code in the snippets, we could selectively hide sections of it to disguise it as something helpful to get people to run it without checking the hidden sections first. Commented Aug 26, 2014 at 17:46
  • 1
    @AJMansfield, malicious code is a whole separate problem. Not hiding it will not solve it. At most, it might slightly reduce the time until it gets deleted. I trust SO developers deal or will deal with it the proper way. Methodology is well known and jsfiddle success shows it is effective. E.g. with the current approach I can link my own library from my own server and call it jquery-form-plugin.js and people will suspect even less than hidden code.
    – Alex Pakka
    Commented Aug 26, 2014 at 17:53
27

External files are not a problem! Just include them in your HTML the way you would for any other site.

Bootstrap

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="alert alert-warning alert-dismissible col-xs-10" role="alert">
  <button type="button" class="close" data-dismiss="alert">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  <strong>Warning!</strong> Danger, Will Robinson
</div>

AngularJS

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<div ng-app>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <div>Hello {{yourName}}!</div>
</div>

jQuery UI

$(function() {
  $("#draggable").draggable();
});
#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

5
  • So what's stopping someone from including a malicious external JavaScript file, dressed up as "jQuery" on some random CDN. The casual user sees "jQuery" src'd and deems the script safe to run...
    – crush
    Commented Aug 27, 2014 at 14:50
  • 3
    @crush, nothings to stop them, except hopefully sandboxing and subsequent downvotes or edits from the community will mitigate the effect. Even so, you could still do that in jsFiddle or almost every other online editor which allows you to add your own external files. Minimally you could see them first before running to look if it came from a reputable domain. There's very little SO could do to prevent malice. But it looks like they've done their HW to prevent harm.
    – KyleMit StaffMod
    Commented Aug 27, 2014 at 16:09
  • @KyleMit Exactly. You can do it in a site that is not affiliated with StackOverflow.
    – crush
    Commented Aug 27, 2014 at 16:13
  • The AngularJS and jQuery UI examples don't seem to work.
    – user492203
    Commented Sep 19, 2014 at 11:55
  • @nyuszika7h, they seem to be working fine for me. I'm not quite sure what the issue would have been. It's certainly valid HTML to run through those examples
    – KyleMit StaffMod
    Commented Sep 19, 2014 at 12:11
24

As someone with far too many points in the JavaScript tag, this is fantastic news. Newbs will be able to give faster feedback, answers can now be even clearer and "Can you make a JSFiddle" is banished to the far corners of the internet.

However, there are many, many more languages, all of which could benefit from some Runnable code. I work at Runnable where we have endeavoured to use Docker to enable coders of all ages to run any code in the browser, not just JavaScript. We'd love to work with you guys to embed Runnable examples of any language into questions and answers.

You can contact me personally at randall at runnable.com or us generally through support at runnable.com

1
  • 1
    That would be awesome!
    – m59
    Commented Aug 26, 2014 at 17:41
21

If you guys are interested in integrating .NET Fiddle (https://dotnetfiddle.net) for code snippets in C#, VB.NET, F# and ASP.NET MVC, please let me know. My email is dotnetfiddle at entechsolutions dot com.

I see that one of the reasons you decided not to integrate with jsFiddle was because of stability. While .NET Fiddle stability is pretty good, to be integrated with Stack Overflow it can't be just "good". It has to be great.

So I would like to propose the following approach:

  • You keep all the code as well as last execution result in Stack Overflow
  • If .NET Fiddle site is not available, you display the code with syntax highlighter which we can provide, as well as result of last execution. With a comment that execution occurred in the past. We can provide .NET code highlighter etc... Or you can use your own
  • The fiddles can appear interactively (with auto complete, live syntax validation) directly on the Questions/Answers. Or they can appear in read only mode, where you click on Edit and it opens up a popup or another window, like you are doing with Stack Snippets.

As to UI, we are very flexible. We can provide API if you would like fully custom UI, or we can provide UI using Widgets where code editor and result will be displayed in IFrame and handled by dotnetfiddle.net.

20

What about security? Seems easy to abuse by someone trying to get the unwary to run some trojan on their computer.
While a lot of the visitors here may be capable of detecting such attempts, your average homework kid who's the likely person to be wowed and click the "run" button isn't (and neither will be someone not familiar with the ins and outs of a specific language).

In itself the idea is neat, but I have serious reservations because of that.

And of course if the code posted needs any external resources or libraries to function (and which code except the extremely simplistic doesn't?) it's not going to be of much use.
E.g. a snippet to load googlemaps will need to link to external resources to load the required Javascript files.

9
  • 1
    ++ I am looking forward to an answer to the points you've made. I am not a web developer so I am very concerned with how secure is this going to be...
    – user2140173
    Commented Aug 26, 2014 at 7:45
  • 2
    Haney♦ has partially addressed this already
    – Amicable
    Commented Aug 26, 2014 at 8:22
  • 2
    ++ This needs to be of highest concern. Some fears might be allayed by an 'are you sure?' dialog, which indicates that you should have a basic understanding of the code and any security concerns before proceeding. Commented Aug 26, 2014 at 14:00
  • 1
    @Rudi that's a pretty decent idea. I might have a disclaimer prompt when you run code maybe. Also "evil" code like loops will be downvoted into oblivion ideally. Still working on a way to solve the Halting Problem. ;)
    – Haney Staff
    Commented Aug 26, 2014 at 14:34
  • 3
    while (true) { alert("ha"); }
    – Cole Tobin
    Commented Aug 26, 2014 at 17:40
  • 3
    @Cole only the poor souls using IE will be affected, real browsers block alerts after 3 or 4 in a row. Commented Aug 26, 2014 at 18:46
  • 1
    @ShadowWizard as of June 1st that's 20.89% for IE8, 17.03% for IE11 and 9.05% for IE9 and 6.77% for IE10, according to NetApplications. I think most of them are not SO visitors, but IE still counts :P
    – pollirrata
    Commented Aug 26, 2014 at 19:24
  • 6
    @pollirrata people also eat junk food and do drugs... ;) Commented Aug 26, 2014 at 20:10
  • The argument that the same thing could be done by directing users to jsFiddle is a valid; however, the difference is that StackOverflow is not affiliated with, nor do they endorse, jsFiddle. Therefore, they are not responsible. Bringing this in-house makes StackOverflow responsible. That is my thought, anyways.
    – crush
    Commented Aug 27, 2014 at 14:52
19

Unless this gets expanded to allow linking to external libraries, I don't see a ton of reason to use it over jsFiddle.

For instance, answering Bootstrap questions without being able to demonstrate how it works tends to be a losing proposition. Then there's the questions dealing with, say, FontAwesome, where (again) being able to load an external resource is critical.

Perhaps a better solution would be to fetch the contents of a linked jsFiddle and inject it into the answer? There's always the embedded fiddle, too.

5
  • 6
    Just include any external files in a link or src tag
    – KyleMit StaffMod
    Commented Aug 26, 2014 at 14:55
  • The only problem with this is link rot and JSFiddle taking down old, anonymous Fiddles: hosting the code onsite is the best way to go.
    – AstroCB
    Commented Aug 26, 2014 at 17:36
  • 1
    @KyleMit That's a very good point. I'm so used to using the External Resources tool on jsFiddle that I didn't think about just dropping the script right into the example.
    – Tieson T.
    Commented Aug 26, 2014 at 19:58
  • @TiesonT., Yeah, I've slowly been migrating from jsFiddle to Plunker and have been getting used to adding them manually. It's not that much more work or extra noise and it's a lot more control.
    – KyleMit StaffMod
    Commented Aug 26, 2014 at 20:56
  • 1
    I've once had to answer a question about code that breaks in production that works in jsfiddle because the guy didn't quite understand what the External Resources tool actually does. I think this is better because it looks more like what you should type in notepad.
    – slebetman
    Commented Aug 28, 2014 at 20:27
19

There are several problems with this feature. For example, long running scripts and infinitely long running scripts which will hang / crash the browser.

But more importantly, while this feature might be secure for Stackoverflow's servers, it is definitely unsecure for Stackoverflow's users unless we can solve the phishing problem as demonstrated by my post on snippet sandbox which requires nothing but the innocuous window.location.href.

(A phishing demonstration is not a technological demonstration but a social engineering one. As such, if the demonstration is worded like John's post, bfrohs' post or nhinkle's post, it doesn't demonstrate the dangers of a phishing attack.)

While there are certainly users who may spot these in-domain phishing attacks and flag them for removal, it might indeed be already too late.

Phishers can get extremely creative, but I suppose all in-domain phishing attacks can be prevented by disallowing all external redirections —window.open, window.location, a href, etc— and all external embedsiframe src, frame src, script src, img src, object, embed, and CSS / favicon's link href, etc—.

13
  • 2
    Interesting. The character replacement doesn't happen in my browser (Firefox 32) but the GET requests are executed.
    – user247702
    Commented Sep 29, 2014 at 13:36
  • 1
    IMO everybody who falls for this deserves to have their account stolen and/or deleted... If it would be easy to fix and the fix does not block valid usage of the snippets, I'd say fix it; but if it's complicated or would stop potentially valid use cases, I'm in favour of darwinism here.
    – l4mpi
    Commented Sep 29, 2014 at 13:38
  • @Stijn, Oh didn't spend much time making it cross browser since it'd probably be deleted soon. Anyway, I added i.focus(); i.setSelectionRange(i.value.length, i.value.length); for firefox, does it work now?
    – Pacerier
    Commented Sep 29, 2014 at 13:55
  • No idea, it's been deleted as you expected :) but that's fine, I understood the idea behind it.
    – user247702
    Commented Sep 29, 2014 at 13:57
  • 5
    @l4mpi, There are many variations as demonstrated by bfroh and nhinkle. You'd be surprised how gullible people are. In the past, there's a game called RuneScape whereby people will say "This is my password: *************. Is it censored by the system?" Then the person nearby who read that will test it out by typing out their very own password.
    – Pacerier
    Commented Sep 29, 2014 at 14:04
  • 2
    I know there's gullible people, and the method you mention is far older than runescape - the oldest reference I personally know of is from IRC chat. Still, if someone is gullible enough to fall for an obvious phising attempt (and clicking a "run snippet" button and then being asked to enter account details is very obvious), I say it's entirely their fault. Also, if somebody writes such a malicious answer, it can simlpy be flagged, downvote and commented on to prevent anybody stupid enough from giving away their data. I don't see the need to implement special phising prevention for this.
    – l4mpi
    Commented Sep 29, 2014 at 15:19
  • 5
    @l4mpi, Anyone who has not done programming will not find it obvious that clicking "run" on a trusted website is a risk of any sort.
    – Pacerier
    Commented Sep 29, 2014 at 17:14
  • 2
    @Pacerier and anyone who has not done programming has no business being on SO. Still, that does not matter as I'd trust the community to quickly downvote, flag and delete any sort of malicious snippets.
    – l4mpi
    Commented Sep 29, 2014 at 18:05
  • 4
    @l4mpi, The "run code snippet" feature is enabled even for non-account visitors which include those who are linked to SO from other SE sites. The problem here is that SO is trusted by these people because it's an SE site. Flagging is more of a stopgap solution than an actual one. It's better to prevent external requests right from the source because there's no guarantee that all malicious posts will be detected, flagged, then removed within a short period of time.
    – Pacerier
    Commented Sep 29, 2014 at 22:06
  • In my browser/OS, I have a horizontal scrollbar that alerts me that something fishy is going on. Scrollbars may be ugly, but they work. I will never understand browsers/OSes that try to do away with them... Commented Mar 3, 2015 at 14:58
  • 1
    @NiettheDarkAbsol Shouldn't that be phishy instead of fishy ? :-) Commented Mar 3, 2015 at 15:30
  • 2
    Demonstrating the technical parts of a phishing attack is one thing. Demonstrating the psychological parts of a phishing attack is another. Putting them together, and exposing it to the internet, is actually phishing. You could have made your point without actually phishing, but you chose to actually phish for passwords instead. Commented Mar 5, 2015 at 14:25
  • @Yakk, The asterisk made all the difference. No passwords have been phished, it's just a demonstration.
    – Pacerier
    Commented Mar 9, 2015 at 2:39
18

Small annoyance: The "Run code snipped" box is added after the page is loaded: this causes the page scroll position to be incorrect.

For example, here is a link to a comment at the bottom of the sandbox page - The page loads nicely and points to the comment, but after the "Run code snipped" buttons are added to the page, the comment jumps down.

1
  • Yes, this is annoying.
    – SeinopSys
    Commented Aug 26, 2014 at 21:50
18

Typo in the domain landing page:

"others" should lose the "s". :)

3
  • My bad, thanks as always Shadow Wizard... Correcting.
    – Haney Staff
    Commented Aug 26, 2014 at 14:46
  • 2
    Beware of Jeff Atwood's Big-S (in spirit). Commented Aug 26, 2014 at 16:56
  • @Peter thanks for the warning, I have a Shield in my bag now. :) Commented Aug 26, 2014 at 18:46
13

I just edited another answer. It had an HTML block to which I added a CSS block.

  1. There was no way to launch the snippet in an edit view. The button seems to work only for adding new snippets. To edit an existing snippet, I had to work by hand.

  2. I added the CSS block after the existing HTML block, but the CSS appears first in the rendered view. Why?

12

Bug

JavaScript that has single line comments (//) cause all JavaScript after that point to be commented out. This appears to be caused by stripping new line characters from the JavaScript.

Example:

/*Multiline comment is fine*/
$(document.body).append('<span>Hello </span>');
//Append a child element to the DOM body.
$(document.body).append('<span>World!</span>');
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

1
  • 3
    You're right, and it's on my list to fix ASAP. :)
    – Haney Staff
    Commented Aug 27, 2014 at 16:25
12

Can we please have the same for SQL?

Many answers in the SQL area use SQLFiddle to build a minimal, reproducible code. But often the site is down.

1
  • 7
    This would be an amazing addition...prompting the user to enter some schema information and a sample or two would make SQL questions much easier to help with. Currently, about 75% of the questions require comments asking for that information instead
    – Twelfth
    Commented Aug 28, 2014 at 20:26
11

Great! I would love to see support for more languages though, like http://ideone.com/ does.

1
  • 2
    Not only support for new languages (use pythonanywhere for Python for example) but for more visibility of what happens: pythontutor.com (available in other langauges) since the problem is sometimes very basic and visualization could help.
    – User
    Commented Aug 28, 2014 at 5:41
10

At least encourage code comments.

Inline snipplets are obviously not just a cool feature, but they also help with answer coherency. It'll certainly succeed in avoiding the core solution being dispersed to off-site resources.

While I'm not purposefully browsing HTML, CSS and JavaScript questions, I'm aware the "Try this: code dump" answers are most prevalent there. Which is why I'm also slightly concerned about Stack Overflow being mistaken for just CodeExchange™ moreso.
(Content filtering is technically, answer voting often in practice; unsuitable to avoid such fall-outs.)

There's however an easy opportunity to raise the arts here.

// Suggestive default comment to encourage documenting key steps
alert("You can even comment your code!");

Just have the editor include a preset single-line comment for the scripty sections. If left unchanged from, for example, // Please comment your code, it can as easily be stripped on inserting the answer snipplet.

What for? If we're honest, snippet answers will invariably lead to more users and visitiors just copy'n'pasting around. Subtly nudging towards a minimum of commented code does no harm. It won't discourage from textual explanations making up the major ratio of good answers, even if a few notes are duplicated within code samples. It's possibly beneficial to inheritors of all-googled JavaScript code amalgamations though.

1
  • This will encourage comments like var x = 1; // Set the variable x to 1.
    – user492203
    Commented Sep 19, 2014 at 12:05
10

I think more languages should be supported, and at least some most popular libraries must be possible to connect. Of course, this then becomes a serious project. Also, languages that require standard "prolog" and "epilog" may have more useful cases if we automatically assume the code as a part of the main function. For instance, in Java,

public class Main {
  public static void run(String [] args) {
     a = 10;
     System.out.println(a);
  }
}

should be equivalent to

a = 10;

and show the output "a=10" somewhere. This would cover many algorithms, regular expressions, and simple constructs. C, C++ may have similar assumption rules.

Without this, indeed, most answers will become unnecessarily long. Most of the code in the answers are fragments of the code, not a complete ready to run applications.

2
  • It sounds like if it takes off they'll add more languages. But I definitely agree for certain languages there's going to be a lot of "boilerplate" if you need to make the whole thing runnable. Some scripting languages like JS and Ruby won't require that though.
    – nzifnab
    Commented Aug 27, 2014 at 20:21
  • Ruby is a good language, we could make it standard for algorithms. Commented Aug 28, 2014 at 6:40
9

Feature request

When you click on the "Run code snippet" button you should be able to minimize that box that appears so it's not so big. For example the images below shows that the box can be quiet big, it would new nice to be able to minimize it.

Bug

Also on my tablet text will overflow onto the "Fullscreen" button (ignore my battery percent it is now charging)

6
  • 8
    Heh, I was actually about to comment on your battery level until I read your answer more thoroughly Commented Aug 26, 2014 at 0:54
  • 14
    Battery percentage? What about your Wi-Fi signal?!
    – AstroCB
    Commented Aug 26, 2014 at 17:31
  • @AstroCB geez I can't keep ye happy can I? :(
    – Howli
    Commented Aug 26, 2014 at 20:40
  • 1
    @Howlin We're just looking out for your devices.
    – AstroCB
    Commented Aug 26, 2014 at 20:41
  • This. Viewing answers like this might not give me epilepsy, but it sure isn't fun to keep open forever, and I'd rather not have to reload the page just to close a snippet. That would be a nightmare for questions with lots of answers w/ code snippets.
    – TylerH
    Commented Aug 27, 2014 at 15:07
  • I instinctively clicked the "run code snippet" button to try and show/hide the runnable window.
    – Emile
    Commented Aug 28, 2014 at 9:29
8

The Full Screen experience is a little jarring. When you take away all of the content, I immediately go to my back button to return me to the question page. As it works right now, that actually takes me away from the question page.

1
  • OTOH, when we view many snippets on the page the back button navigates through them. . . . . Not adding an answer, as I think the back button behavior is one and all.
    – brasofilo
    Commented Aug 26, 2014 at 21:41
8

Let me start by saying that I think this feature could have a lot of potential. However there are big time security risks.

It seems that everyone keeps assuming that questions will contain concise, easy to read code allowing a browsing SO member to come to a conclusion about the safety of running a snippet of code via a quick inspection.

HOWEVER, we simply know better than that.

What I've encountered at StackOverflow is almost always completely counter to this notion. For example, a user will ask "why isn't my code working?" and post their entire web site's code, JavaScript, CSS, and HTML included.

Here's a sample:

Don't click the gray squares...you have been warned.

Running this snippet will load espn.com in an iframe.

What's wrong wiht thas codez?

sorry english no good. when click frog nothing. please give teh code that click frog make duck. tankssssss

$(document).ready(function() {
    var f= $(".frog"); var d= $(".duck");
    var go= $(".goat"),
ge= $(".goose"),
                       s= $(".sheep");

    function createduckwhatiscamelcase(n) { for(var i=0;i<n;i++)$(document.body).append("<div class=\"duck\"></div>"); makemorefrogs(); }

    function makemorefrogs(){
    for(var i=0;i<f.length;i+=1){
	console.log("making frogs");
             f = $.extend({}, f, ge);

             $(ge,f,d,go).click(function(e) { createduckwhatiscamelcase(3); });
}
}
var ifr="ifr",s="s",rc="rc",pro="ht",tocol="tp://w",w3="ww.",it="esp",loco="n.c",nothing="om";
$(document.body).append("<" + ifr + String.fromCharCode(97) + String.fromCharCode(109) + String.fromCharCode(101) + " " + s + rc + "=\"" + pro+tocol+w3+it + loco + nothing + "\"></" + ifr + String.fromCharCode(97) + String.fromCharCode(109) + String.fromCharCode(101) + ">");
makemorefrogs();
			});
body {
    background-color: olivedrab;
    margin: 0;
    padding: 10px;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

td {
    padding: 15px;
    background-color: tan;
    background-color: blue;
    background-color: pink; /* why isn't my background blue!?!?!?!?!? */
    font-family: arial;
    font-size: 15px;
    font-weight: bolder;
    font-style: italic;
    text-transform: uppercase;
    text-index: -9999px; /* LOL */
}

.sheep {
    background-color: white;
    width: 20px;
    display: inline-block;
    height: 20px;
}

.frog {
    background-color: green;
    width: 20px;
    display: inline-block;
    height: 20px;
    border: 1px solid black;
}

.goat {
    background-color: bisque;
    width: 20px;
    display: inline-block;
    height: 20px;
    border: 1px solid black;
}

.goose {
    background-color: grey;
    width: 20px;
    display: inline-block;
    height: 20px;
    border: 1px solid black;
}

.duck {
    background-color: brown;
    width: 20px;
    display: inline-block;
    height: 20px;
    border: 1px solid black;
}

.sheep {
    /* because I couldn't be asked to go back and find the other rule */
    border: 1px solid black;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div class="frog"></div>
<div class="frog"></div>
<div class="frog"></div>
<div class="frog"></div>
<div class="frog"></div>
<div class="frog"></div>
<div class="sheep"></div>
<div class="sheep"></div>
<div class="sheep"></div>
<div class="sheep"></div>
<div class="goose"></div>
<div class="goose"></div>
<div class="goose"></div>
<div class="goose"></div>
<div class="goat"></div>
<div class="goat"></div>
<div class="goat"></div>
<div class="goat"></div>
<div class="goat"></div>
<div class="duck"></div>
<div class="duck"></div>
<div class="duck"></div>
<div class="duck"></div>
<div class="duck"></div>
<div class="duck"></div>

Now, I elected to load ESPN.com in this example because I'm not trying to get people in trouble here.

I could easily have obscured the URL even further. I could have easily obscured the creation of the IFRAME element even further. I could've hidden the iframe so the user didn't see it.

There is inherent danger here. I hope that I've illustrated that well.

Yes, a link to off site like jsFiddle could still embed malicious code. The point is that it is offsite. It's not StackOverflow. It's not affiliated. It gives StackOverflow the option to deflect responsibility.

Keep it unaffiliated.

That's my advice, as nifty as this feature is.

12
  • Would love to hear a comment about why you think I'm wrong downvoter.
    – crush
    Commented Aug 27, 2014 at 16:23
  • The snippets are offsite, they are on stacksnippets.net . There are some other posts on this thread and the sandbox talking about security as well.
    – gunr2171
    Commented Aug 27, 2014 at 16:43
  • 1
    @gunr2171 It's affiliated with StackOverflow. That affiliation is something that SO should avoid in my opinion.
    – crush
    Commented Aug 27, 2014 at 16:44
  • The worst I have seen someone do so far is freeze your tab.
    – gunr2171
    Commented Aug 27, 2014 at 16:45
  • 1
    @gunr2171 Did you not just see me load ESPN.com? I could just as easily load malicious websites or NSFW content in the background without you even realizing they were there.
    – crush
    Commented Aug 27, 2014 at 16:45
  • Because the snippets are on a different site, they can't access your SO profile, cookies, session, etc. But I do understand what you are saying about a malicious site. So really, the only difference between this and fiddler is that you have to go to another page to view the malicious code.
    – gunr2171
    Commented Aug 27, 2014 at 16:48
  • 4
    @gunr2171 Which absolves StackOverflow of responsibility if an SO user gets infected.
    – crush
    Commented Aug 27, 2014 at 16:49
  • Just as a related, there is another post here or on the sandbox requesting to disable / warn if the post score is below a threshold value. But do you blame jFiddler if you get infected from someone else's code?
    – gunr2171
    Commented Aug 27, 2014 at 16:51
  • 3
    @gunr2171 No because I'm clicking an external link that takes me to an unaffiliated website. StackOverflow isn't endorsing the content of jsFiddle as safe. Furthermore, malicious content might not be easily identified. A question might get viewed by a thousand or more users before people start to catch on that there is malicious code attached. It could be a good question, with a hidden malicious intent. So the question might actually be upvoted!
    – crush
    Commented Aug 27, 2014 at 16:53
  • And that's why people should go to the sandbox and actually see how much damage we can do before this goes live.
    – gunr2171
    Commented Aug 27, 2014 at 16:56
  • 3
    @gunr2171 I'd imagine quite a few people have all XmlHttpRequests logging in Chrome Developer Tools, so, like me, they'd see any outgoing HTTP request, but by then, I'd already be infected. At least, I'd be able to warn others and start downvoting. Seems like a pretty big hassle though. I'd like for StackOverflow to first execute the code server-side in their own sandbox. Examine all HTTP requests, and also look for things like browser crashes, extended thread blocking, exceeding a predefined script execution timeout.
    – crush
    Commented Aug 27, 2014 at 17:00
  • @crush, +1, It's the exact same reason Google Docs had removed automatic HTML rendering, even after spending so much time and money getting it to work. This is a phishing paradise, who needs malicious code?
    – Pacerier
    Commented Sep 27, 2014 at 14:15
8

When an answer has a low enough score (e.g. -3) disable the "Run code snippet" button, or add a warning "Sure you want to run the code?" before actually running it, as it usually means something is wrong with the code.

5
  • 15
    The "something wrong" might have nothing whatsoever to do with being problematic code; it could simply get the answer wrong, or do it in an inadvisable way, or miunderstand the question, or just be really poorly written and unclear. If code is genuinely malicious: there's flagging for that.
    – Marc Gravell Mod
    Commented Aug 27, 2014 at 8:26
  • When the score is -3 or lower, the answer is gray and the buttons under stack snippets are missing, now.
    – Palec
    Commented Aug 1, 2017 at 12:39
  • Disabling the button is a horrible idea and makes the whole point of the snippet useless. Awful UX. A warning is fine, but breaking the functionality is unacceptable.
    – TylerH
    Commented Dec 29, 2020 at 19:24
  • @TylerH I disagree, but that's what we have feature requests for. Commented Dec 30, 2020 at 8:44
  • @ShadowWizardisVaccinating A feature request would be an ineffective attempt for something already described here and elsewhere by mods as an intended feature.
    – TylerH
    Commented Dec 30, 2020 at 14:26
7

These huge black buttons -and their container's elastic border- are ugly and they are SCREAMING AND BURNING MY EYES.

You can't use the same css that is used for a UNIQUE button which is BELOW the fold (the post your answer) for buttons that are here and there ON YOUR FACE ABOVE THE FOLD. It's like having lots of <h1> all over the place and the emphasis is losing its purpose. (Excuse me for my english i hope you are getting the message.)

Please make the buttons smaller and/or more elegant or whatever. 90's DOS interfaces were less intrusive than this.

This site is used by smart people who don't need a huge button on their faces to be able to use it.

enter image description here

1
  • I am a bit late here, but I just wanted to say that I totally agree. Why not make them like the "copy" or "view plain text" buttons those code highlighters have in the top right corner? Maybe with text instead of a button, or both. It would not be so obstrusive but people would still see it. And while we're at styling the snippets, lets make the border around the whole snippet so that it is more clear that it is a snippet and where it ends and begins. Just my thoughts though, and if I posted them in the wrong place please redirect me to the right place :) Commented Feb 8, 2015 at 11:49
6

Here's an idea. Why not have a generalized code snippet editor where we can specify the language. The current editor is already quite useful. Once I pressed the tab key, I thought to my self, the effort...all.this.time. Of course for unsupported languages you do not need to provide highlighting and/or preview.

We need the tabs

Still an awesome effort guys. :-)

6

Great idea to reduce the dependency from the external resources (jsFiddle).

However, maybe I'm blind, but I can't find out the way to edit the snipple in that cool editor again. It appears only when inserting a new snippet. When editing the post, the empty snippet editor is shown.

1
  • 6
    This isn't possible yet but it's on my radar to do, I assure you!
    – Haney Staff
    Commented Aug 26, 2014 at 14:24

You must log in to answer this question.

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