These instructions will guide you through the process of setting up local, trusted websites on your own computer.
These instructions are intended to be used on Mac OSX Yosemite.
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdn.rawgit.com/zloirock/core-js/master/client/shim.min.js"></script> | |
<script src="https://wzrd.in/standalone/tape@latest"></script> | |
<script src="https://wzrd.in/standalone/tap-browser-color@latest"></script> | |
<script src="http://fb.me/react-with-addons-0.14.3.js"></script> | |
<script src="http://fb.me/react-dom-0.14.3.js"></script> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> |
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
/** | |
* Test for rebeccapurple, honoring Eric Meyer’s Daughter, Rebecca. | |
* Currently works in WebKit nightlies, other implementations soon to follow. | |
*/ | |
background: red; | |
background: rebeccapurple; | |
display: flex; |
<label for="toggle-1">I'm a toggle</label> | |
<input type="checkbox" id="toggle-1"> | |
<div>I'm controlled by toggle. No JavaScript!</div> |
.overflowed > p{ | |
width: 10em; | |
height: 5rem; | |
white-space: pre-line; | |
overflow: hidden; | |
outline: 1px dashed lime; | |
} | |
.overflowed-clip { | |
text-overflow: clip; |
/** | |
* CSS Box model demo | |
*/ | |
#box { | |
width: 300px; | |
height: 200px; | |
padding: 20px; | |
border-width: 15px; | |
box-sizing: border-box; |
// To test this code in Firefox, I encourage you to use Firefox Aurora | |
// and to include your script this way: | |
// <script type="application/javascript;version=1.8"> | |
/* let ********************************************* */ | |
// let is the new var :) | |
// Declares a block scope local variable | |
var a = 5; |
/** | |
* Scrolling shadows by @kizmarh and @leaverou | |
* Only works in browsers supporting background-attachment: local; & CSS gradients | |
* Degrades gracefully | |
*/ | |
html { | |
background: white; | |
font: 120% sans-serif; | |
} |
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
.teaser { | |
overflow: hidden; | |
height: 250px; | |
display: inline-block; | |
position: relative; | |
outline:0 none} |