139

Thanks to the incredibly positive reception and great feedback on our announcement of Stack Snippets, today we've shipped version 2.0. Don't know what Stack Snippets are? Just read the link above for a quick overview.

What changed in Stack Snippets 2.0?

A whole bunch of things, mainly due to your feedback! Some of the major changes include:

  • Editable Snippets: When editing a question, a link will appear below the Snippet that you can click to re-launch the Snippet editor with your existing code. Upon closing the editor, changes will overwrite your existing Snippet markdown.
  • Copyable Snippets: Click the Copy snippet to answer button to "fork" a snippet to your own answer!
  • Collapsible Snippets: You may now indicate whether or not to hide a Snippet when creating it. This allows you to focus on the relevant code which has changed, instead of all of the Snippet code.

A bunch of other minor stuff got fixed and improved, too.

Why collapsible Snippets are important

As many people mentioned, highlighting/showcasing the difference between the posting Snippet code and the "working" or "fixed" code is essential. This just wasn't possible in the prior version of Stack Snippets. In 2.0, we feel we have a much better solution.

Suppose that you had this Snippet in the original question (totally my favourite one BTW):

//Made for Stack Overflow Code Testing

//Unicorn Inspired by http://drbl.in/kayh

//Made by Mr. Alien


/*
 * Just created in a hurry, so won't refactor my CSS
 * as of now, also I can drastically reduce
 * the markup but I won't do it right now
*/
html, body {
  height: 450px;
  background: -webkit-radial-gradient(center, ellipse, #fce300 0%, #ffc700 46%, #ff7f00 100%);
  background: radial-gradient(ellipse at center, #fce300 0%,#ffc700 46%,#ff7f00 100%);
}

.unicorn {
  position: absolute;
  left: 50%;
  top: 170px;
  margin-left: -250px;
}

.tail > div,
.body > div,
.leg > div,
.leg2 > div,
.leg3 > div,
.unihorn {
  width: 0; 
  height: 0;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.tail .pone{ 
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 30px solid #ffb82b;
  -webkit-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
          transform: rotate(6deg);
}

.tail .ptwo {
  border-left: 40px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #FD8A07;
  -webkit-transform: rotate(-39deg);
      -ms-transform: rotate(-39deg);
          transform: rotate(-39deg);
  top: 26px;
  left: -30px;
}

.tail .pthree {
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent; 
  border-right: 30px solid #ffb82b; 
  -webkit-transform: rotate(5deg); 
      -ms-transform: rotate(5deg); 
          transform: rotate(5deg);
  top: 45px;
  left: -12px;
}

.tail .pfour {
  top: 72px;
  left: 17px;
  border-bottom: 35px solid #FD8A07;
  border-right: 35px solid transparent;
  -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
          transform: rotate(5deg);
}

div.body .pone {
  border-top: 10px solid transparent;
  border-left: 221px solid #FD8A07;
  border-bottom: 60px solid transparent;
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
  top: 65px;
  left: 45px;
}

div.body .ptwo {
  border-bottom: 70px solid #ffb82b;
  border-left: 90px solid transparent;
  border-right: 130px solid transparent;
  -webkit-transform: rotate(43deg);
      -ms-transform: rotate(43deg);
          transform: rotate(43deg);
  top: 15px;
  left: 87px;
}

div.body .pthree {
  border-bottom: 100px solid #FD8A07;
  border-left: 20px solid transparent;
  border-right: 130px solid transparent;
  -webkit-transform: rotate(71deg);
      -ms-transform: rotate(71deg);
          transform: rotate(71deg);
  top: 15px;
  left: 200px;
}

div.body .pfour {
  border-bottom: 100px solid #ffb82b;
  border-left: 30px solid transparent;
  border-right: 130px solid transparent;
  -webkit-transform: rotate(109deg);
      -ms-transform: rotate(109deg);
          transform: rotate(109deg);
  top: 38px;
  left: 246px;
}

div.body .pfive {
  border-bottom: 60px solid #FD8A07;
  border-right: 105px solid transparent;
  left: 310px;
  top: -27px;
  -webkit-transform: rotate(34deg);
      -ms-transform: rotate(34deg);
          transform: rotate(34deg);
}

div.body .psix {
  border-top: 85px solid #ffb82b;
  border-left: 85px solid transparent;
  left: 319px;
  top: -40px;
  -webkit-transform: rotate(19deg);
      -ms-transform: rotate(19deg);
          transform: rotate(19deg);
}

div.body .pseven {
  border-bottom: 110px solid #FD8A07;
  border-left: 85px solid transparent;
  left: 350px;
  top: -144px;
  -webkit-transform: rotate(19deg);
      -ms-transform: rotate(19deg);
          transform: rotate(19deg);
}

div.body .peight {
  border-bottom: 90px solid #ffb82b;
  border-right: 120px solid transparent;
  left: 425px;
  top: -92px;
  -webkit-transform: rotate(18deg);
      -ms-transform: rotate(18deg);
          transform: rotate(18deg);
}

div.body > div.eye {
  background-color: #000;
  top: -70px;
  left: 445px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  z-index: 1;
}

div.nose {
  border-bottom: 40px solid #f27d00;
  border-right: 40px solid transparent;
  -webkit-transform: rotate(-28deg);
      -ms-transform: rotate(-28deg);
          transform: rotate(-28deg);
  left: 480px;
  top: -15px;
}

div.extreme-left {
  border-top: 115px solid transparent;
  border-right: 30px solid #ffb82b;
  border-bottom: 110px solid transparent;
  -webkit-transform: rotate(-65deg);
      -ms-transform: rotate(-65deg);
          transform: rotate(-65deg);
  left: 130px;
  top: 4px;
}

div.leg .pone {
  border-top: 120px solid transparent;
  border-right: 60px solid #FD8A07;
  border-bottom: 0px solid transparent;
  -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
          transform: rotate(-50deg);
  top: 55px;
  left: 45px; 
}

div.leg .ptwo {
  border-top: 20px solid transparent;
  border-right: 30px solid #ffb82b;
  border-bottom: 20px solid transparent;
  top: 145px;
  -webkit-transform: rotate(-24deg);
      -ms-transform: rotate(-24deg);
          transform: rotate(-24deg);
  left: 66px;
}

div.leg .pthree {
  border-top: 15px solid transparent;
  border-right: 33px solid #FD8A07;
  border-bottom: 20px solid transparent;
  top: 164px;
  -webkit-transform: rotate(34deg);
      -ms-transform: rotate(34deg);
          transform: rotate(34deg);
  left: 63px;
}

div.leg .pfour {
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #ffb82b;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  top: 165px;
  left: 80px;
}

div.leg .pfive {
  border-bottom: 30px solid #FD8A07;
  border-right: 30px solid transparent;
  top: 235px;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  left: 89px;
}

div.body .extreme-right {
  left: 246px;
  top: 100px;
  border-top: 30px solid #FD8A07;
  border-left: 80px solid transparent;
  border-right: 85px solid transparent;
  -webkit-transform: rotate(-33deg);
      -ms-transform: rotate(-33deg);
          transform: rotate(-33deg);
}

div.leg2 div.pone {
  border-top: 50px solid #ffb82b;
  border-right: 85px solid transparent;
  left: 339px;
  top: 84px;
  -webkit-transform: rotate(-53deg);
      -ms-transform: rotate(-53deg);
          transform: rotate(-53deg);
}

div.leg2 div.ptwo {
  border-bottom: 20px solid #FD8A07;
  border-left: 42px solid transparent;
  border-right: 30px solid transparent;
  -webkit-transform: rotate(62deg);
      -ms-transform: rotate(62deg);
          transform: rotate(62deg);
  left: 328px;
  top: 146px;
}

div.leg2 .pthree {
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #ffb82b;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  top: 154px;
  left: 368px;
}

div.leg2 .pfour {
  border-bottom: 30px solid #FD8A07;
  border-right: 30px solid transparent;
  top: 230px;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  left: 378px;
}

div.leg3 div.pone {
  border-top: 50px solid transparent;
  border-left: 60px solid #ef7b00;
  border-bottom: 30px solid transparent;
  left: 382px;
  top: 60px;
  -webkit-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
          transform: rotate(6deg);
}

div.leg3 div.ptwo {
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 50px solid #e87604;
  left: 419px;
  top: 116px;
  -webkit-transform: rotate(-18deg);
      -ms-transform: rotate(-18deg);
          transform: rotate(-18deg);
}

div.leg3 div.pthree {
  border-bottom: 30px solid #e5892d;
  border-left: 13px solid transparent;
  left: 411px;
  top: 143px;
  -webkit-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
          transform: rotate(-17deg);
}

div.leg3 .pfour {
  border-bottom: 30px solid #FD8A07;
  border-right: 30px solid transparent;
  top: 173px;
  -webkit-transform: rotate(76deg);
      -ms-transform: rotate(76deg);
          transform: rotate(76deg);
  left: 403px;
}

.unihorn {
  top: -130px;
  left: 446px;
  border-top: 10px solid transparent;
  border-left: 120px solid #FD8A07;
  border-bottom: 10px solid transparent;
  -webkit-transform: rotate(-36deg);
      -ms-transform: rotate(-36deg);
          transform: rotate(-36deg);
}
<div class="unicorn">
  <div class="tail">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
  </div>
  <div class="body">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
    <div class="pfive"></div>
    <div class="psix"></div>
    <div class="pseven"></div>
    <div class="peight"></div>
    <div class="eye"></div>
    <div class="nose"></div>
    <div class="extreme-left"></div>
    <div class="extreme-right"></div>
  </div>
  <div class="leg">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
    <div class="pfive"></div>
  </div>
  <div class="leg2">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
  </div>
  <div class="leg3">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
  </div>
  <div class="unihorn"></div>
</div>

It's safe to say that this is a TON of code to display, especially if I just want to highlight the fact that I changed the colours around a little. With collapsible snippets I can highlight just the lines I changed:

html, body {
  height: 450px;
  background: -webkit-radial-gradient(center, ellipse, #300fce 0%, #700ffc 46%, #f00ff7 100%);
  background: radial-gradient(ellipse at center, #300fce 0%,#700ffc 46%,#f00ff7 100%);
}

And the snippet can be expanded and run to see the net result.

//Made for Stack Overflow Code Testing

//Unicorn Inspired by http://drbl.in/kayh

//Made by Mr. Alien


/*
 * Just created in a hurry, so won't refactor my CSS
 * as of now, also I can drastically reduce
 * the markup but I won't do it right now
*/
html, body {
  height: 450px;
  background: -webkit-radial-gradient(center, ellipse, #300fce 0%, #700ffc 46%, #f00ff7 100%);
  background: radial-gradient(ellipse at center, #300fce 0%,#700ffc 46%,#f00ff7 100%);
}

.unicorn {
  position: absolute;
  left: 50%;
  top: 170px;
  margin-left: -250px;
}

.tail > div,
.body > div,
.leg > div,
.leg2 > div,
.leg3 > div,
.unihorn {
  width: 0; 
  height: 0;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.tail .pone{ 
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 30px solid #ffb82b;
  -webkit-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
          transform: rotate(6deg);
}

.tail .ptwo {
  border-left: 40px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #FD8A07;
  -webkit-transform: rotate(-39deg);
      -ms-transform: rotate(-39deg);
          transform: rotate(-39deg);
  top: 26px;
  left: -30px;
}

.tail .pthree {
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent; 
  border-right: 30px solid #ffb82b; 
  -webkit-transform: rotate(5deg); 
      -ms-transform: rotate(5deg); 
          transform: rotate(5deg);
  top: 45px;
  left: -12px;
}

.tail .pfour {
  top: 72px;
  left: 17px;
  border-bottom: 35px solid #FD8A07;
  border-right: 35px solid transparent;
  -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
          transform: rotate(5deg);
}

div.body .pone {
  border-top: 10px solid transparent;
  border-left: 221px solid #FD8A07;
  border-bottom: 60px solid transparent;
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
  top: 65px;
  left: 45px;
}

div.body .ptwo {
  border-bottom: 70px solid #ffb82b;
  border-left: 90px solid transparent;
  border-right: 130px solid transparent;
  -webkit-transform: rotate(43deg);
      -ms-transform: rotate(43deg);
          transform: rotate(43deg);
  top: 15px;
  left: 87px;
}

div.body .pthree {
  border-bottom: 100px solid #FD8A07;
  border-left: 20px solid transparent;
  border-right: 130px solid transparent;
  -webkit-transform: rotate(71deg);
      -ms-transform: rotate(71deg);
          transform: rotate(71deg);
  top: 15px;
  left: 200px;
}

div.body .pfour {
  border-bottom: 100px solid #ffb82b;
  border-left: 30px solid transparent;
  border-right: 130px solid transparent;
  -webkit-transform: rotate(109deg);
      -ms-transform: rotate(109deg);
          transform: rotate(109deg);
  top: 38px;
  left: 246px;
}

div.body .pfive {
  border-bottom: 60px solid #FD8A07;
  border-right: 105px solid transparent;
  left: 310px;
  top: -27px;
  -webkit-transform: rotate(34deg);
      -ms-transform: rotate(34deg);
          transform: rotate(34deg);
}

div.body .psix {
  border-top: 85px solid #ffb82b;
  border-left: 85px solid transparent;
  left: 319px;
  top: -40px;
  -webkit-transform: rotate(19deg);
      -ms-transform: rotate(19deg);
          transform: rotate(19deg);
}

div.body .pseven {
  border-bottom: 110px solid #FD8A07;
  border-left: 85px solid transparent;
  left: 350px;
  top: -144px;
  -webkit-transform: rotate(19deg);
      -ms-transform: rotate(19deg);
          transform: rotate(19deg);
}

div.body .peight {
  border-bottom: 90px solid #ffb82b;
  border-right: 120px solid transparent;
  left: 425px;
  top: -92px;
  -webkit-transform: rotate(18deg);
      -ms-transform: rotate(18deg);
          transform: rotate(18deg);
}

div.body > div.eye {
  background-color: #000;
  top: -70px;
  left: 445px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  z-index: 1;
}

div.nose {
  border-bottom: 40px solid #f27d00;
  border-right: 40px solid transparent;
  -webkit-transform: rotate(-28deg);
      -ms-transform: rotate(-28deg);
          transform: rotate(-28deg);
  left: 480px;
  top: -15px;
}

div.extreme-left {
  border-top: 115px solid transparent;
  border-right: 30px solid #ffb82b;
  border-bottom: 110px solid transparent;
  -webkit-transform: rotate(-65deg);
      -ms-transform: rotate(-65deg);
          transform: rotate(-65deg);
  left: 130px;
  top: 4px;
}

div.leg .pone {
  border-top: 120px solid transparent;
  border-right: 60px solid #FD8A07;
  border-bottom: 0px solid transparent;
  -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
          transform: rotate(-50deg);
  top: 55px;
  left: 45px; 
}

div.leg .ptwo {
  border-top: 20px solid transparent;
  border-right: 30px solid #ffb82b;
  border-bottom: 20px solid transparent;
  top: 145px;
  -webkit-transform: rotate(-24deg);
      -ms-transform: rotate(-24deg);
          transform: rotate(-24deg);
  left: 66px;
}

div.leg .pthree {
  border-top: 15px solid transparent;
  border-right: 33px solid #FD8A07;
  border-bottom: 20px solid transparent;
  top: 164px;
  -webkit-transform: rotate(34deg);
      -ms-transform: rotate(34deg);
          transform: rotate(34deg);
  left: 63px;
}

div.leg .pfour {
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #ffb82b;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  top: 165px;
  left: 80px;
}

div.leg .pfive {
  border-bottom: 30px solid #FD8A07;
  border-right: 30px solid transparent;
  top: 235px;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  left: 89px;
}

div.body .extreme-right {
  left: 246px;
  top: 100px;
  border-top: 30px solid #FD8A07;
  border-left: 80px solid transparent;
  border-right: 85px solid transparent;
  -webkit-transform: rotate(-33deg);
      -ms-transform: rotate(-33deg);
          transform: rotate(-33deg);
}

div.leg2 div.pone {
  border-top: 50px solid #ffb82b;
  border-right: 85px solid transparent;
  left: 339px;
  top: 84px;
  -webkit-transform: rotate(-53deg);
      -ms-transform: rotate(-53deg);
          transform: rotate(-53deg);
}

div.leg2 div.ptwo {
  border-bottom: 20px solid #FD8A07;
  border-left: 42px solid transparent;
  border-right: 30px solid transparent;
  -webkit-transform: rotate(62deg);
      -ms-transform: rotate(62deg);
          transform: rotate(62deg);
  left: 328px;
  top: 146px;
}

div.leg2 .pthree {
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #ffb82b;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  top: 154px;
  left: 368px;
}

div.leg2 .pfour {
  border-bottom: 30px solid #FD8A07;
  border-right: 30px solid transparent;
  top: 230px;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  left: 378px;
}

div.leg3 div.pone {
  border-top: 50px solid transparent;
  border-left: 60px solid #ef7b00;
  border-bottom: 30px solid transparent;
  left: 382px;
  top: 60px;
  -webkit-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
          transform: rotate(6deg);
}

div.leg3 div.ptwo {
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 50px solid #e87604;
  left: 419px;
  top: 116px;
  -webkit-transform: rotate(-18deg);
      -ms-transform: rotate(-18deg);
          transform: rotate(-18deg);
}

div.leg3 div.pthree {
  border-bottom: 30px solid #e5892d;
  border-left: 13px solid transparent;
  left: 411px;
  top: 143px;
  -webkit-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
          transform: rotate(-17deg);
}

div.leg3 .pfour {
  border-bottom: 30px solid #FD8A07;
  border-right: 30px solid transparent;
  top: 173px;
  -webkit-transform: rotate(76deg);
      -ms-transform: rotate(76deg);
          transform: rotate(76deg);
  left: 403px;
}

.unihorn {
  top: -130px;
  left: 446px;
  border-top: 10px solid transparent;
  border-left: 120px solid #FD8A07;
  border-bottom: 10px solid transparent;
  -webkit-transform: rotate(-36deg);
      -ms-transform: rotate(-36deg);
          transform: rotate(-36deg);
}
<div class="unicorn">
  <div class="tail">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
  </div>
  <div class="body">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
    <div class="pfive"></div>
    <div class="psix"></div>
    <div class="pseven"></div>
    <div class="peight"></div>
    <div class="eye"></div>
    <div class="nose"></div>
    <div class="extreme-left"></div>
    <div class="extreme-right"></div>
  </div>
  <div class="leg">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
    <div class="pfive"></div>
  </div>
  <div class="leg2">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
  </div>
  <div class="leg3">
    <div class="pone"></div>
    <div class="ptwo"></div>
    <div class="pthree"></div>
    <div class="pfour"></div>
  </div>
  <div class="unihorn"></div>
</div>

Much easier on the eyes!

Try Stack Snippets 2.0

Here's the sandbox for trying out the feature. Note that Stack Snippets 2.0 is backwards compatible to the original code, so all existing demos should work properly.

Feedback is definitely welcomed and appreciated.

31
  • 1
    Is it just me, or is the editor bar for the answers not showing up? I'm using Chrome, getting a console error "Cannot read property 'toLowerCase' of undefined" inside "snippet-javascript.en.js"
    – gunr2171
    Commented Sep 8, 2014 at 16:43
  • 4
    @gunr2171 yeah that's a bug. I'll push a fix momentarily. Please let me know if it then works for you.
    – Haney Staff
    Commented Sep 8, 2014 at 16:44
  • 2
    @gunr2171 fix deployed, how about now?
    – Haney Staff
    Commented Sep 8, 2014 at 16:55
  • 2
    Yes, it's fixed. Thanks for you hard work!
    – gunr2171
    Commented Sep 8, 2014 at 16:56
  • @gunr2171 thanks for pointing it out. I test with IE and FF locally, and of course both don't seem to care if you call undefined.toLowerCase() and Chrome clearly does. Damned JS lack of standards!
    – Haney Staff
    Commented Sep 8, 2014 at 16:56
  • meta.stackoverflow.com/a/269899/526741 still applies.
    – 0b10011
    Commented Sep 8, 2014 at 18:55
  • 6
    We should have something like revision control, so a column on the left side which shows the code forks, and the revisions, say 1, 2, 3 etc.... or I can rollback to a specific revision and so on..
    – Mr. Alien
    Commented Sep 8, 2014 at 20:07
  • 2
    Still doesn't work with NoScript. Tried whitelisting all variations of http://stacksnippets.net/js and *.stackoverflow.com. Anybody figured this out? Commented Sep 8, 2014 at 20:22
  • 5
    Is there anything planned for letting others know if the code is safe or not? For instance are we just going to be downvoting, flagging Other for answers/questions that have snippets we find "unsafe" (ie infinite loops etc), or is there going to be something like voting the snippet itself as safe/unsafe? Commented Sep 8, 2014 at 21:01
  • 2
    @Haney, (Re)tried https:// and ^https?:// variants. Still no-go so far. I know I'm not the only one experiencing this. :( Commented Sep 8, 2014 at 21:24
  • 1
    It will be better if the codes are given heading like CSS, html or javascript. (UX)
    – Mr_Green
    Commented Sep 9, 2014 at 5:52
  • 3
    Why are jQuery, Prototype and Angular prioritized over every other library? Commented Sep 9, 2014 at 15:30
  • 2
    Will the editing feature make it too easy for users to accidentally overwrite other people's snippets when they meant to fork them, or even simply to watch their changes take effect? I've seen a user post a fiddle of over 400 revisions, presumably because they thought they needed to save every time they wanted to run their code.
    – BoltClock Mod
    Commented Sep 10, 2014 at 4:22
  • 2
    Please add a button to tidy up the code.
    – j08691
    Commented Sep 10, 2014 at 15:46
  • 6
    <!-- Begin snippet: js hide: true --> that syntax is confusing. Add a comma: <!-- Begin snippet: js, hide: true -->.
    – usr
    Commented Sep 10, 2014 at 21:37

22 Answers 22

35

Feature Request

Please continue to display the "run code snippet" button even when the snippet source is collapsed.

run snippet button

I'd like to hide the implementation details and still show the demo. This answer, for instance, has a lot of irrelevant css and html. I'd prefer if the user didn't have to click twice (once to expand and once to run) in order to run the demo.

17
  • 14
    Doesn't that risk "surprises"? Commented Sep 8, 2014 at 21:11
  • 15
    Yeah, I don't think we should encourage people to just run code they haven't even looked at.
    – Adam Lear StaffMod
    Commented Sep 8, 2014 at 21:27
  • As @AnnaLear says, my concern here is I show the "brief" code as a harmless change to your original Snippet, but my hidden code is an infinite loop or some other craziness. I feel like you should have to stare at it before you run it.
    – Haney Staff
    Commented Sep 8, 2014 at 21:38
  • 29
    @Haney if somebody wants to abuse it though, it's trivial to include an external file that looks like some sort of dependency (like a JS library of some sort) but is actually malicious. It wouldn't be too hard to get code running that people haven't looked at.
    – nhinkle
    Commented Sep 8, 2014 at 22:04
  • You're right @nhinkle, and unfortunately this is one of the "grey areas" of this project. How do you prevent maliciousness on an open-ended tool? Detecting it is difficult for the exact reason you just stated. So we have to trust the community to downvote bad Snippets. Additionally, HTML 5 iframe sandboxing helps to protect the user.
    – Haney Staff
    Commented Sep 8, 2014 at 22:08
  • 6
    @Haney It could be a rep based privilege on the grounds that someone who has invested the time and effort to get to, say, 10k is unlikely to want to risk suspension by abusing this. Commented Sep 8, 2014 at 22:52
  • 2
    @MartinSmith Since this has to be based off the privilege of the snippet's author rather than the viewer, that kind of rep-based unlock is unfortunately likely to cause more confusion with the majority than anything. "Why does this snippet have a run button and this one doesn't?" kind of thing.
    – Adam Lear StaffMod
    Commented Sep 8, 2014 at 23:07
  • 17
    +1 from me. I'm not going to read the code before running anyway. Especially if they make the code nice and long. (which is the whole point of collapsible snippets) Commented Sep 9, 2014 at 0:05
  • @canon Sure. We still don't need to be implicitly encouraging people to click before looking.
    – Adam Lear StaffMod
    Commented Sep 9, 2014 at 15:26
  • 16
    I ran the Unicorn example without actually inspecting it.
    – daveloyall
    Commented Sep 9, 2014 at 15:34
  • @canon I think I already explained the entirety of my argument. We aren't jsFiddle so we might do some things differently. In the end, it's not me you need to convince, it's Haney. The only thing I have a strong objection to here is making this privilege-based.
    – Adam Lear StaffMod
    Commented Sep 9, 2014 at 15:34
  • 1
    Provide a big hammer for the "oh crap! This snippet is stealing SE cookies and posting copies of itself all over SE" situation. This hammer needs to prevent the snippet content from being sent to browsers, period. When designing this hammer, keep in mind that your real enemy is a specially crafted snippet which can take over the user's browser when they merely view the page, ie, a snippet that contains an unpatched exploit. I recommend a "show content as text anyway" button. We're grownups.
    – daveloyall
    Commented Sep 9, 2014 at 15:41
  • 4
    I agree with the request here. The concerns are valid, too, but in balance I think the community will police this well, especially if there is a flag specific to "has malicious code snippet" Commented Sep 9, 2014 at 21:45
  • This is bad idea. I am sure surprises will happen even now. You don't know people man. Many invest a lot of effort to get their account hacked, much more than just clicking a button. Commented Jan 22, 2016 at 14:49
  • 1
    @canon I'm not sure what the options are and frankly I didn't realize the iframe is actually sandboxed. Commented Jan 22, 2016 at 14:55
30

So apparently this is in the next build. Thanks everyone who supported the feature request.


Feature request:

Don't prioritize Angular, jQuery and Prototype above other libraries. Instead, let users select from a wider selection of libraries. Even if we ignore how unpopular Prototype already is, there are a lot of questions about React, Knockout, Ember, D3, Q and a whole bunch of other stuff.

For the very least - I think the 50 most popular libraries should be included, unless we're going to allow 3rd party libraries.

12
  • 2
    I'm definitely not against this, but I'm also a pretty crappy designer in terms of UI. Anyone got a recommendation on HOW to stuff 50 or so libs into the editor in a way that doesn't suck?
    – Haney Staff
    Commented Sep 9, 2014 at 19:05
  • 2
    @Haney Maybe some sort of two-level select: 1) Select library: jQuery/Angular/etc. 2) Select version: v1/2/3... Also thinking it might be useful to have an "Other" option that takes a URL and just inserts a <script> tag, since a lot of people don't quite get that you can add anything you want this way.
    – David Fullerton Mod
    Commented Sep 9, 2014 at 19:11
  • @DavidFullerton I like this other idea. I don't like having 50 hard-coded versions of 50 libs in the app because I see it becoming maintenance hell with posts like "Why doesn't Snippets have the latest jQuery version?" and so on. Maybe we move to JUST other insert? I like that idea a lot.
    – Haney Staff
    Commented Sep 9, 2014 at 19:13
  • @Haney having quick select options for the most common libraries makes life a lot easier for users, so I think there should be some built-in stuff. But if you have an "other" option, you can probably get away with just a handful of libraries.
    – David Fullerton Mod
    Commented Sep 9, 2014 at 19:39
  • 1
    @DavidFullerton exactly. My goal is to dodge having to update this every other day for a new version of a lib. I might refine the lib selection to more common stuff perhaps. Take out Prototype, add in React, KnockOut, Ember, etc.
    – Haney Staff
    Commented Sep 9, 2014 at 19:59
  • 3
    @Haney as for adding lots of libraries in a way that doesn't suck. You already have that mechanism, the tag system. Also, while on that line of thought, it would be nice to automatically include libraries that match tags for known libraries (i.e. snippets on questions tagged jquery should by default include jQuery). Commented Sep 10, 2014 at 6:37
  • 1
    @Haney I think what JSFiddle does in this case is very reasonable, they let you select from the common ones but then also include third party libraries. Just remember that there is a lot of room for abuse with third party libraries since they run code the user doesn't directly see (JSFiddle is banned on Facebook for example) so it should probably be a privilege that requires some amount of rep. Commented Sep 10, 2014 at 10:36
  • I have integrated a button for easily adding third party JS and CSS files! It'll go live in the next build.
    – Haney Staff
    Commented Sep 10, 2014 at 15:17
  • 3
    security implications of loading arbitrary script files? Commented Sep 10, 2014 at 16:22
  • @RobertLevy in my opinion they should be privileged (as in - require X rep) but remember that the potential for mischeif isn't too high anyway since it's all run in an iframe. Commented Sep 10, 2014 at 16:35
  • Requiring rep or not, can we have some kind of warning that a snippet requires an external library before running it (either some sort of obvious notation, or a msgbox)?
    – Joe
    Commented Sep 10, 2014 at 16:55
  • 2
    @Haney: An autocompleter along the lines of select2 or typeahead or a dozen others: A small text box which, on focus, gets a drop-down under it of all the standard libs (very long list). Typing in the box filters the list. E.g., I know I want jQuery, so I type "jq" and that narrows the drop-down list to anything containing "jq". Or I know I want d3, so I type "d3", and... This is both more useful and less real estate. Choosing one could add it (like a tag) with an [x] to remove it. Commented Sep 19, 2014 at 10:19
23

Disclaimer: My photo editing skills are pathetic: this is the best i could come up with in order to explain the features i wish to see in Stack Snippet, as well as to address few feature requests by other users (and yes i admit that it's a bit jsfiddlish).

TL;DR:

My Stack Snippet window will probably look familiar to the following once it has all the features mentioned below:

enter image description here


The current implementation seems to have addressed many previous requests. Still:

  • Show/Hide code Snippet option doesn't actually solve the problem of having to scroll through all the irrelevant code. Still user has to scroll to the bottom of entire the code to view the result. Related Feature Request Related Request @ MSE

  • The user have to edit the post or click Copy snippet to answer and then click Edit the above snippet in order to just launch the code in Stack Snippet Editor. Related Feature Request

  • Some libraries seems to have given too much importance by having individual dropdowns for each, this also unnecessarily consumes space in the UI. Related Feature Request

  • Most of the online editors use external library option to keep the HTML tidy & readable. Currently, The links to libraries are visible in HTML block and needs to be removed manually. This decreases the readability of HTML and kind of questions the need for the external library button in UI.

    Also, displaying the <link> along with the content of <body> will be misleading for beginners, since the best practice is to include <link> inside <head>, as mentioned by Dan in this Related Feature Request which also suggests a different UI to approach this issue

  • No option for switching to full Page view from the stack Snippet editor

  • The Hide Snippet By Default checkbox and 3 tiny buttons consumes too much unnecessary space in UI:

enter image description here


Following are my suggestions to address these issues along with feature requests:

Have an option to display the most relevant piece of code, by hiding the unnecessary parts using a comment such as <!-- Hide code snippet --> as requested here. (a Hide Selected button that hides the selected content by adding respective comments in each language will be great!)

Below the relevant code , have the following instead of the Show/Hide code Snippet option:

enter image description here

(Clicking the first two buttons will tun them into Hide Results and Hide Full Code respectively.)

  • The Display Result button will directly display the result below, Addresses this Feature Request as well as this one.

  • The Display Full Code button will reveal the code hidden by <!-- Hide code snippet -->

  • The Edit Snippet button will open the snippet in Stack Snippet window. Addresses this Feature Request


Once the Stack Snippet window is launched, User will be able to perform the following actions:

1. Select External Libraries (if required)

  • 1.1 Select the external library using an autocomplete textbox1. If it is unavailable goto 1.3. addresses this Feature request as well as this one. Suggested here

  • 1.2 If different versions of the selected library is found, display a dropdown which allows the user to choose the desired version.

  • 1.3 Add an external link to the required library

  • 1.4 Remove the added libraries if not required

2. Adjust the interface

  • 2.1 Close the unwanted windows: The user might not be always working with all 3 languages (HTML,CSS,JS). It'll be nice to have an option to close unwanted windows to utilize the space.

  • 2.2 Resize the windows accordingly:

    In many CSS responsive questions, the default size of the result window or the full page view might not be sufficient to view or solve the problem. The layout might be breaking in between these. Related feature request @ MSE

3. Tidy Up the Code (Please !) (This one is implemented :)

Already requested here

4. Run the tidy - Code.

If everything is fine, goto step 6, if everything is broke, goto step5

5. Reset the entire stuff.

( Since I even broke whatever was already working? :D )

6. Choose The Display Options

  • 6.1 Choose whether to display the code in post.

    The code will be hidden by default, as requested here. (The default state could be decided based on the presence of <!-- hide code snippet --> comment, total length of the snippet etc as well, upto the community)

  • 6.2 Choose whether to display the result in Full Page view while clicking the Display Result button.

    This will be particularly helpful in many CSS related questions where the layout can be properly seen only in fullscreen. Here is an Example

7. Complete/Submit The Stack Snippet

  • 7.1 Insert Into Post:

    This option will either open the corresponding post in edit view (If it is not already in edit view) or directly edit the post the user is currently working with. Whichever majority of the community prefers.

    If the later, Edits from users having <2000 rep, goes to the Suggested Edits review queue.

  • 7.2 Fork Into Answer:

    Similar to the existing Copy snippet to answer option, but inside the editor, and will be visible only if the user playing with the snippet is not it's creator. (Really, Why Am i currently shown an option to fork my own snippet to another answer? ideally i should update my existing answer.)

8. View The Result In Full Page view

9. Intercept Console.log!

Related Feature Request, Feature Request @ MSE if the community wants it. Else just expand the sidebar! :)

this can be achieved now by adding the following script (thanks to tj crowder):

  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

usage: snippet.log(msg); (demo answer)

Update

The Full page button in post is hiding the results as shown below:

enter image description here

Would be better if it is moved to the menu bar above (We've plenty of space there):

enter image description here

Or even better, just an icon with a tooltip:

enter image description here


P.S: If you haven't noticed, The color scheme in image is used intentionally; The existing color scheme is still metaish. Please add some orange here and there :)

1 The source of autocomplete could be the existing wiki's for the libraries and plugins. There should be an option to insert special external link to libraries (Maybe a privilege), something like

[Version 1][CDN:1.0]

[Version 2][CDN:2.0]


[CDN:1.0]: http://path to version 1

[CDN:2.0]: http://path to version 2

Which will be maintained by the community, protected by the the review queues.

0
18

Update: This bug has been fixed!


Got another potential bug.

enter image description here

Notice how the "Html" label is hidden behind the scroll bar. This is not causing any functional problems as far as I can see, but looks wrong.

This seems to be the case for any of the quadrants that have a scroll bar.

I'm using Chrome 37.0.2062.103 m, and there are no console/javascript errors.

2
  • 4
    Good one. I'll move those out a few pixels to provide a buffer. That'll go live in an "eventual" build over the next few days vs ASAP since it isn't destroying anything.
    – Haney Staff
    Commented Sep 8, 2014 at 17:03
  • 1
    Fixed and will be live in the next build.
    – Haney Staff
    Commented Sep 8, 2014 at 20:54
13

I'd say let it roll!

Time for real-world testing before we make any major changes, IMO.


Though I would change the words No jQuery to --use jQuery--

Seriously though, use something besides the word No No No No :)

img { max-width: 100%; }
<img src="https://i.sstatic.net/Mf81d.png"/>

7
  • I like this one. I'll be changing it up tomorrow. ;)
    – Haney Staff
    Commented Sep 9, 2014 at 0:38
  • 9
    -1, I like the explicit No. (and it seems to encourage native JS :-)
    – Bergi
    Commented Sep 9, 2014 at 2:46
  • Hmmm, I'll wait for more votes to decide what it should be.
    – Haney Staff
    Commented Sep 9, 2014 at 5:24
  • 2
    I think like @Bergi, but I think that showing something like --jQuery: off-- (or --jQuery: version_number-- when turned on) could be a reasonable compromise, because it does not encourage the people to use jQuery and does still sound better than "No jQuery".
    – Theolodis
    Commented Sep 9, 2014 at 10:52
  • 1
    @Theolodis' --jQuery: off-- makes the most sense. The problem with replacing the default values with --use jQuery-- is that, once you click on the dropdown, it doesn't make sense that "use jQuery" is the option you select to not use jQuery.
    – AmeliaBR
    Commented Sep 9, 2014 at 14:28
  • @AmeliaBR also that. But it does also ask the user to "use jQuery", which I wouldn't recommend either.
    – Theolodis
    Commented Sep 9, 2014 at 14:36
  • 2
    I'm gonna be honest, I don't think the naming/phrasing of the drop downs matters that much in the long run. There are pros and cons to each approach, so for now I plan to leave as-is. Gotta pick my battles. :)
    – Haney Staff
    Commented Sep 9, 2014 at 15:47
11

Rename "Fullscreen" to something else as it really doesn't fill my computer screen.

Also, could you push onto the history state so the back button will close "fullscreen"?

I also noted this on George's show/hide snippet - the dotted border seems to carry across the chevron.

enter image description here

And the icon seems too bright in the toolbar for meta.

4
  • 9
    Perhaps "Full page"?
    – Mark Hurd
    Commented Sep 9, 2014 at 3:58
  • 1
    Changed to "Full page". I don't plan to mess with the history stack because I fundamentally do not believe in altering the history of a browser. Additionally, it isn't uniformly supported and might create confusing / an inconsistent experience.
    – Haney Staff
    Commented Sep 9, 2014 at 15:49
  • 11
    Hitting Esc would be a more standard way of exiting fullscreen.
    – tcooc
    Commented Sep 9, 2014 at 22:44
  • As for the toolbar icon, I believe that that is what it will look like on the main site and that that design is just being used here to demonstrate what it will look like there.
    – AstroCB
    Commented Sep 14, 2014 at 15:30
10

Feature Request:

I think that hiding a snipped by default when posting is good, but it would even better if I, the user, could choose to hide all snippets by default.

Why? Well, basically because I see the case where someone does post a ton of code in a snipped that is not hidden by default, and I'll have to scroll to either edit if it was not legit, or see the answers/other answers - Much scroll, no time.

8

Looking good. One little annoyance (and this is something that always bugs me with JSFiddle, too):

The auto-indenting feature over-rides the correct indentation pattern for multi-line function chains in Javascript.

E.g., when I type the following:

var td = tr.selectAll("td")
           .data(function(d,i){ return d3.range(0,255); });

As soon as I type a {, the second line gets pushed flush-left. I fix it, and then get to the }, and it happens again. Urgh.

This is a common code pattern in d3 and JQuery, so it would be nice if the auto-indenting algorithm recognized that a line starting with . is a wrap-around from the previous line, and should be indented.

Of course, how much it should be indented is a matter of debate; some people always use a standard two-space indent, I tend to align it with a . on the previous line. Mike Bostock's introduction to d3 advises:

The recommended indentation pattern for method chaining is four spaces for methods that preserve the current selection and two spaces for methods that change the selection.

...which isn't exactly something a general purpose code-tidying algorithm is going to determine. Can you instead just turn off the auto-indenting function for lines that start with .?

3
  • 2
    or don't auto-indent if I pressed <kbd>Shift+enter</kbd>
    – hjpotter92
    Commented Sep 9, 2014 at 8:01
  • 1
    ...or just don't auto indent at all, please.
    – SeinopSys
    Commented Sep 10, 2014 at 21:01
  • @DJDavid98: That looks like the plan for now, according to Haney's response to my post on the sandbox; he suggested that it might eventually be an option that you could turn on or off.
    – AmeliaBR
    Commented Sep 10, 2014 at 21:05
8

This is , as per the comment.


Probably a tiny thing, but if someone has added an external library, it would be nice if it indicated that when re-editing an existing snippet.

As of right now, anytime you load the editor, you will always get "No jQuery", "No D3", "No Knockout", and "No AngularJS" even if it has already loaded those libraries.

screenshot

2
  • 1
    I bet I can make this happen. Stand by for potential progress!
    – Haney Staff
    Commented Sep 10, 2014 at 17:17
  • 3
    Patched this up and it should work in the next build.
    – Haney Staff
    Commented Sep 10, 2014 at 18:54
5

Automatic slow/bad code warning system

I disagree with the entire safety system, voting as safe, etc. idea, as this puts extra load on the user whilst there is already a system in place where users can manually provide such feedback. However queuing a callback after 15 seconds which checks whether at most 20 seconds have past and gives a "green light" call to SO.com if it was quick enough. If at least 75% of the "Runs" (and minimally 5 runs) did not trigger this ajax call this will automatically trigger a warning message. After all realistically the only type of 'malicious' code in JavaScript nowadays is code that either crashes your tab or makes it run infinitely slow. Oh well, just an idea, vote with your votes :D .

Just thinking, there's an even better way to do this possibly with WebWorkers which will only report back if the code is slow. That would however not catch crashes, still worth testing out maybe.

2
  • Although you certainly have a point, I'm afraid deciding on the 'how long does it have to take to be slow' and 'how often does it need to be slow to be flagged' will make this an ambiguous feature.
    – Mast
    Commented Sep 11, 2014 at 6:21
  • Ambiguous features are however not bad features. This feature tries to quantify a realistic concern the community has. People who disagree can still run the code, but an advance warning is always nice. You can always just show the average execution time instead alternatively, though I personally would find that less beautiful UX technically as it adds extra load on the user. Commented Sep 11, 2014 at 6:38
4

I might be a bit late for a feature request on the awesome running stack snippet but anyway :

Am I the only one to read HTML code first then the related CSS and read JS code at the end? In the stack snippet,JS code is displayed first then CSS and HTML last.

Could they be displayed the other way around?

like this :
HTML
CSS
JS

2
4

Feature Request - Intercept console.log()

Sometimes a question is all JavaScript and not HTML. If you want to just display the output of an expression, it is easy to say console.log(myValue). But, that isn't visible on the page. To get the output on the page, we are stuck with something like document.body.appendChild(document.createTextNode(myValue)).

It would be nice if, within a runnable snippet, console.log() was intercepted and redirected to somewhere visible on the page. You could inject a custom console object into the running context:

var console = {
    log: function(s) {
        document.body.appendChild(document.createElement("div"))
            .appendChild(document.createTextNode(s));
    }
};

console.log("Look at me!");

Or, expose a print() function that does the same thing.

9
  • Have you tried document.write()? If not, let me know if it works for you.
    – Haney Staff
    Commented Sep 18, 2014 at 20:13
  • @Haney - Yes, document.write() works ok. Still, there are cases where you can't use document.write(), and it might be nice to have access to a visible console.
    – gilly3
    Commented Sep 18, 2014 at 22:30
  • I hear you. It's definitely a thought. I'll give it some thinking and see what I can imagine. Or, if you envision something, show me! :)
    – Haney Staff
    Commented Sep 18, 2014 at 22:57
  • 1
    @Haney Here's a demo. It requires you to nest the snippet another frame deeper so the console doesn't pollute its DOM. Even so, you'd need to inject a <script>window.parent.attachConsole()</script>. See this post.
    – canon
    Commented Oct 13, 2014 at 19:57
  • This one is implemented: snippet.log() :)
    – T J
    Commented Nov 9, 2014 at 19:11
  • Related: meta.stackexchange.com/questions/239706/…
    – Scimonster
    Commented Nov 9, 2014 at 21:17
  • @TJ Really? It doesn't for me.
    – Scimonster
    Commented Nov 9, 2014 at 21:18
  • @Scimonster stackoverflow.com/a/26831914/2333214
    – T J
    Commented Nov 10, 2014 at 5:47
  • 1
    @TJ Only by including the script, but OK.
    – Scimonster
    Commented Nov 10, 2014 at 7:53
4

Pretty please:

Make it harder for newbies to post snippets by mistake

Clearly, the <> icon is misleading -- it looks a lot like the "I want to post some code" icon in many other on-line editors, while the {} looks to me like, uh, I dunno, JSON? Maybe just switching the order of the icons would already help.

The big slow multi-pane editor window must also be incredibly confusing when you click it by mistake.

Maybe disable this feature in tags where it has been predominantly used by mistake? Some quick querying should indicate where a large amount of posted snippets in a tag have been posted by low-rep users and removed by high-rep users.

3

Just reconfirming the bug noted here and confirmed here: specifically, if the post is greyed out, when you go Fullscreen the rest of the Q&A is still visible and mostly somewhat still interactive.

4
  • 4
    Fixed this by disabling heavily downvoted Snippets, which also gives users control over disabling malicious snippets.
    – Haney Staff
    Commented Sep 9, 2014 at 18:35
  • 1
    @Haney That seemed like an overkill, but it is still only one more click to edit the post first, then the code can be run again, so I'm happy with that.
    – Mark Hurd
    Commented Sep 10, 2014 at 0:47
  • 1
    Mark - it might be "overkill" but it adds a layer of user-controlled security. Snippet is malicious? Downvote it and it becomes un-runnable. Best option we could come up with after discussions.
    – Haney Staff
    Commented Sep 10, 2014 at 15:16
  • 2
    @Haney I think a better option would be a message saying it's disabled due to low score but with a button to run it anyway. Actually malicious posts should get deleted by flags before too long (average is probably 10 minutes or so). This doesn't put control of snippet running in the hands of users so much as the mob, writ large.
    – TylerH
    Commented Nov 12, 2019 at 20:55
3

Show editor/playgroud instead of all code in blocks in the post itself

Rather than collapsing the code, and then showing the full code below each other, why not just show the editor itself with the code loaded and the result loaded in one of the frames. One of the great things about jsFiddle is that the user can change stuff around and thus learn how the code works exactly. This playground aspect is a huge part of the reason why jsFiddles are so useful. Possibly allow the code author to choose whether he wants to inline it in his post or just fire up the editor/playground.

1
  • 1
    I love the way how the results are shown inline in the post rather than showing me a popup or taking me to a new tab... i'd prefer an Edit or Play buttons instead to load the editor/playground... it's just one click for the playboys...
    – T J
    Commented Sep 20, 2014 at 7:16
3

Feature Request

Please allow us to set a line-number to auto-scroll long snippets to the pertinent section of code, i.e.:

<!-- language: lang-js, line: 42 -->

In this particular answer, there's a large object literal that the rest of the code is dependent upon. In order to ensure that the important part of the code wasn't hidden beyond the scroll-height, I stringified the object and tucked it into an <input type="hidden">. That seems hackish. I'd prefer to have that object literal, nicely formatted, at the beginning of my code. I'd just like to skip past it initially in order to highlight the important stuff.

2

Please consider having a way to play with existing snippets in the snippet editor, with a single click--without having to click "edit" on the post and then "edit the above snippet".

I only want to play with it! I don't want to edit their post or create a new answer!

Stack Snippets is an excellent new feature.

1

What! No Dojo? Not even an empty menu reading "No Dojo"? Why is my favorite toolkit left out of the love?

All snark aside, it would be really nice to see more toolkits supported, and Dojo is an important one. Judging from the number of questions, it's also less confusing to people than jQuery. (Oops, this was supposed to be the no-snark paragraph.)

1
  • 1
    I have no argument as to Dojo being important. I just picked 4 popular libs somewhat in passing. I have added a new external library button that allows you to easily add external JS or CSS files to your snippet. I've also replaced Prototype with Knockout.
    – Haney Staff
    Commented Sep 10, 2014 at 15:18
1

So I noticed something, and I'm not sure it's a huge deal, but wanted to point it out anyway. In the sandbox for snippets, one of the answers is downvoted due to the poster wanting to test something. They've edited a couple times.

Their answer no longer has a runnable snippet, something people were asking for, which is great! What I noticed, however, is in the revision history, the snippet is still playable.

Here's some screenshots of what I mean:

Answer

And the revision history:

Revision showing play button Revision being played

While I don't think it's a huge issue, I thought it'd be good to point it out.

4
  • Definitely good to point out. Not sure of a way around that to be honest. Would have to consider it for a bit. :)
    – Haney Staff
    Commented Sep 22, 2014 at 14:58
  • Would it be easy to make snippets not runnable in the history period? I don't know how easy/hard that would be, but it would definitely prevent this, or someone editing a potential browser-crashing snippet to a fixed version, and someone else running it in revision.
    – Kendra
    Commented Sep 22, 2014 at 15:00
  • I enabled them in revision history as I was asked to do so. I will see if I can do something to disable them if the post is downvoted perhaps?
    – Haney Staff
    Commented Sep 22, 2014 at 15:09
  • Sounds good- I didn't know someone had asked for that specifically. :)
    – Kendra
    Commented Sep 22, 2014 at 15:10
1

Feature Requests

I am a great fan of Stack Snippets, and plan to use it now in most of my answers. There are a few things that will make life easier when answering questions - particularly Twitter Bootstrap, d3.js or ajax-related ones:

  1. Additional Libraries

I have seen the first answer, and just want to lend my voice to ask for more 3rd party libraries - particularly JQuery-UI and Twitter-Bootstrap as external library drop-downs. I noticed Bootstrap has now been added as a selectable option to JSFiddle when you select the latest JQuery version.

  1. Adding data files to the snippet

One advantage to Plunker is the ability to add files like JSON, XML or TXT files that can be accessed in the JavaScript code. This is particularly useful for d3.js answers. This allows you to replicate the code from d3 questions as it loads data files from the server, rather than having to rewrite JavaScript to use variables to load in the data.

  1. Ajax-friendly snippets

The number of ajax-tagged questions, as of this request, is over 100K on Stackoverflow. For mocking up ajax issues, JS Fiddle offers echo functionality. I personally have been using mockjax to mock up ajax responses when trying to recreate ajax-related problems. It would be cool if Stackoverflow could offer a similar capability for someone creating a snippet to add a similar mockup response.

Thanks.

0

Here's how you can fit hundreds of external libraries into a pretty UI: Make the external resource textbox autocomplete like codepen.io does. IMHO it's actually easier to use an autocompleting text box than a dropdown of even modest length.

-4

Suggestions/Feature Requests

  • Allow a safety review or rating for snippets: That way, those that run the snippet can mark it as stable/safe etc. or have some numerical rating system. It would reward those that make sure their code is at least not crashy (if it is, you can always just use a code block instead), encourage checking the code carefully before the question is posted and it would provide a quick and easy indicator that would help avoid bad code, for at least those that follow the first few that visit the question and run the code. Alternatively, being able to flag snippets for bad performance/crashyness/safety would probably also work fine.

(edit: as canon suggested in the comments, this should be per version of the snippet, perhaps keeping 1 undo to make sure mistakes aren't punished by clearing the entire rating; the same system that works for post revisions should work for this as well)

(edit: l4mpi in the comments makes a good case for why this would be redundant (ratings/flagging for snippets). Although I'm now less convinced ratings/flagging would be a good idea, I'll leave it here for now, to make the discussion in the comments clearer.)

  • Have a "number of runs" counter and perhaps even show which users have run the specific snippet (if the snippet changes, clear the counter and information on runs). This could work as a less secure alternative to a review and would also prevent claims that "it doesn't work" if someone hasn't even run the code (although this is quite rare and might be disruptive - just thinking out loud).

  • Titles and descriptions for snippets: This would not only make clear what the snippet is and what it's supposed to do (while being collapsible with the rest of the snippet, at least the description) and would also prepare the system for a possible future indexing of snippets on SO, so that it would be possible to have a searchable database of snippets (with ratings, at least for safety), with links to the questions they come from. It could make SO much, much more potent for the developer community and it would be wise, if that ever is a plan, to have titling from the start, so old snippets aren't left in an anonymous and unrecognizable state without someone having to look them over again.

  • Preferences for snippets: Such as, auto-collapse or auto-expand by default and, if in the future embedding is the solution of choice, auto-executing the embed or just presenting a button to do it manually (and prevent extra-long loading times and wasting of server resources).

Why embedding is better

First of all, I suggest embedding jsFiddle and other engines with a fallback to the StackSnippets system. That way, downtime is less of an issue. Also, embedding will allow SO to much faster and much more efficiently add support for languages and take advantages of all the web software and engines already available and the work that has been put into them. As suggested above, ideally these embeds would not load automatically by default.

What I'm thinking of is, a StackSnippet element that POSTs the code from the snippet to jsFiddle or something else and embeds the returned page. I feel that embedding is what makes overall much more software design sense and the possible disadvantages are fewer than what a fully SO-dependent StackSnippets system would have. Also, it is in agreement with the community-modded model of StackExchange in general - like community modding, the website grows with its community. Likewise, with embeds, the StackSnippets system would grow with the development tools and popularity of them, not depending on specific StackOverflow initiatives (which are fine, but I think embedding is much more beneficial in the long-term).

(edit: an additional advantage would be to attach API POSTs to other engines as well. Instead of having snippets runnable with just StackSnippets or jsFiddle, other alternatives would be easy to add such as CodePen, providing further redundancy through existing infrastructure.)

If embedding means making deals with websites, I think that's fine. It can be done incrementally and sites like jsFiddle and regex101 have helped SO so much, it's only fair (if economically viable of course) to return the favor with explicit cooperation.

17
  • I like the safety rating idea a lot. Could potentially tie it in to a rep bonus/punishment, but that may give a way for people to exploit the system.
    – TMH
    Commented Sep 9, 2014 at 11:31
  • @TomHart How would a rep system for snippets, on a website that already has one that works, be more exploitable than the already existing rep system? Note that I'm not recommending a rep system, I feel it would be redundant, but I do think that a minimal safety rating would work smoothly enough. Now that I think of it, flagging could also work well.
    – mechalynx
    Commented Sep 9, 2014 at 12:05
  • It was just an idea, to backup how safe the snippet (is/should) be. As far as exploiting I was thinking maybe people would start writing snippets where they're not really necessary just for the rep. It was just a passing thought, but seems a tad overkill/just pointless haha.
    – TMH
    Commented Sep 9, 2014 at 12:57
  • @TomHart I might have come off as more hard than I intended :P Didn't mean to be that critical, just using your idea as an excuse to further argue in favor of my own and perhaps some day, take over the world.
    – mechalynx
    Commented Sep 9, 2014 at 13:03
  • Haha it's okay, I was kinda just typing as I was thinking, but again to reiterate, I think the safety idea or yours is a great idea :).
    – TMH
    Commented Sep 9, 2014 at 13:06
  • @canon 1. Agreed 100% on per-version ratings; I had this in the count suggestion but it makes perfect sense here as well. I don't understand how it could be gamed and I don't understand what you mean on user recovery. The way I see it the security rating isn't a code quality rating, just a warning to prevent problems in the future. If there is a known severe bug, it can just be a code listing instead. 2. why exclude them? The idea for me is to provide some metric of how much the snippet has been tested. If you need to exclude them, use the same system used for views on questions.
    – mechalynx
    Commented Sep 9, 2014 at 13:27
  • @canon ah ok, that makes more sense. I just added an edit, where I mention that the same versioning system for posts can be used for snippets, thus allowing backtracking to restore the rating, if there is such malice. In any case, the same can happen with questions and SO seems to be doing fine :P
    – mechalynx
    Commented Sep 9, 2014 at 13:31
  • @canon btw, on embedding, I think that my suggestion has a possible solution for that (if the problem is stability as the post you linked states): Store the snippet on StackOverflow and the embed is just a POST to the API of whatever web app is to be embedded, essentially creating a temporary jsFiddle in our case. If jsFiddle is down, it falls back to the built-in Snippet engine on StackOverflow. This would require less storage on the side of jsFiddle and other engines as well.
    – mechalynx
    Commented Sep 9, 2014 at 13:34
  • @canon perhaps, but still, unless we consider the rep system broken and requiring changes, this should also be fine in the same sense. Its practically the same system, even the same infrastructure could be used if it's generalized enough. On the side of social mechanics, it should work just as well (no matter how broken the rep system may be) - also, there is the case of having a snippet downvoted to hell in a highly rated question, which provides more resistance to trollish downvoting in my opinion (but this is of course, speculation).
    – mechalynx
    Commented Sep 9, 2014 at 13:36
  • "Allow a safety review or rating for snippets" - We already have that, it's called voting and commenting. Downvote and optionally comment on posts with snippets that contain bad code, just like you would when the code in question is not in a snippet but simply in a code block. Adding extra functionality which only exists for code snippets would only complicate things.
    – l4mpi
    Commented Sep 9, 2014 at 13:39
  • @l4mpi It would complicate things, but in my opinion, there is a usability difference between code listings and runnable snippets. Nobody bats an eye at clicking on a linked fiddle, so why would people not just run snippets blindly? I also added that flagging would work just as well, which would be much less complicated (I'd be interested in what your opinion is on that, as an alternative).
    – mechalynx
    Commented Sep 9, 2014 at 13:41
  • @canon If we have both, we can have our pie and eat it too. StackSnippets would not have to have the full feature set of jsFiddle, could be used only as a fallback, while maintaining use of jsFiddle overall, which I think is best as it is a tool specialized in that job, whereas StackSnippets in part of a larger structure. If having both isn't beneficial, why then have StackSnippets in the first place? The same logic can be applied. My idea is to make them complement each other, rather than have StackSnippets replace jsFiddle entirely.
    – mechalynx
    Commented Sep 9, 2014 at 13:45
  • @canon well I was just elaborating on the theoretical benefits, but to be specific, it can, just not in 100% of cases, which is fine by me, for a backup. jsFiddle has support for Coffeescript, SCSS, AJAX, jsHint, jsTidy, sharing, collaboration, accounts, DTDs, document load events and a cornucopia of libraries. These aren't useless, but the vast majority of fiddles don't use them. StackSnippets can add support slowly and carefully, based on feedback which would be based on usage, while having jsFiddle cover it in the meanwhile. Would StackSnippets even have all those from the start?
    – mechalynx
    Commented Sep 9, 2014 at 13:58
  • 3
    @ivy_lynx so, what do you currently do when a post contains a link to a jsfiddle which is unsafe, bad, or just generally disagreeable? Simply do the exact same thing for a post that contains a Stack Snippet which is unsafe, bad, etc. Flagging should be reserved for extreme cases, e.g. a snippet purposefully written for crashing a users browser (or making it unresponsive) should be flagged with a custom flag explaining the issue. A snippet that makes the browser unresponsive because it's bad code should simply be downvoted and commented on - mod time is too valuable to handle cases like that.
    – l4mpi
    Commented Sep 9, 2014 at 13:58
  • @canon on your edit: we'd only have to save to jsFiddle what StackSnippets can't handle itself. I don't see that as pointless.
    – mechalynx
    Commented Sep 9, 2014 at 14:00

You must log in to answer this question.

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