Stephan van Opstal st3phan

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul id="thingy">
    <li><span><input type="checkbox" checked /></span>

## phantom.js
var page = require('webpage').create();
page.open('/url', function () {

	var items = ['selector1', 'selector2', 'selector3'];
	var items_length = items.length;

	for (var i = 0; i < items_length; i++) {
		var clipRect = page.evaluate(function (s) {
			var cr = document.querySelector(s).getBoundingClientRect();
			return cr;

## countdown timer
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function cdtd() {
	var wo = new Date("August 13, 2013 10:30:30");
	var now = new Date();
	var timeDiff = wo.getTime() - now.getTime();
	if (timeDiff <= 0) {

## gist:4078229
# try
#    48kbit/s for Dialup
#    64kbit/s for Edge
#   384kbit/s for 3G
#   768kbit/s for DSL
#  1572kbit/s for T1
#
# to simulate low bandwidths.
#
# And: You can play with the delay option.

## _shared.scss
// Using this structure, this file should be your canonical stylesheet where
// everything would be imported into, so that you can just `@import "shared";`
// in both your normal and IE stylesheets, only having to add libraries and
// such in one place.

// These styles are just a contrived example.
body {
  font-size: 18px;
  @include respond-to(desktops) {
    color: blue;

## _shared.scss
// Using this structure, this file should be your canonical stylesheet where
// everything would be imported into, so that you can just `@import "shared";`
// in both your normal and IE stylesheets, only having to add libraries and
// such in one place.

// These styles are just a contrived example.
body {
  font-size: 18px;
  @include respond-to(desktops) {
    color: blue;

## hack.sh
#!/usr/bin/env sh

##
# This is script with usefull tips taken from:
#   https://github.com/mathiasbynens/dotfiles/blob/master/.osx
#
# install it:
#   curl -sL https://raw.github.com/gist/2108403/hack.sh | sh
#

## dabblet.css
.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
}
.test2:hover {
	transform: translate(20px, 0);

## jquery.images-loader-deferred.js
// deferred obj callback
function loadImg(selector) {
  var dfd = $.Deferred();
  $(selector).load(function() { dfd.resolve(); });
  return dfd.promise();
}

// more elements
$.when(
  loadImg('#img1'),

## dabblet.css
/* Centered heading with rules */
h1 {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	text-overflow: ellipsis;

	font: 1.6em/1.1 Georgia;
	padding: .2em 0;
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<ul id="thingy">
	<li><span><input type="checkbox" checked /></span>
	var page = require('webpage').create();
	page.open('/url', function () {

	var items = ['selector1', 'selector2', 'selector3'];
	var items_length = items.length;

	for (var i = 0; i < items_length; i++) {
	var clipRect = page.evaluate(function (s) {
	var cr = document.querySelector(s).getBoundingClientRect();
	return cr;
	# try
	# 48kbit/s for Dialup
	# 64kbit/s for Edge
	# 384kbit/s for 3G
	# 768kbit/s for DSL
	# 1572kbit/s for T1
	#
	# to simulate low bandwidths.
	#
	# And: You can play with the delay option.
	// Using this structure, this file should be your canonical stylesheet where
	// everything would be imported into, so that you can just `@import "shared";`
	// in both your normal and IE stylesheets, only having to add libraries and
	// such in one place.

	// These styles are just a contrived example.
	body {
	font-size: 18px;
	@include respond-to(desktops) {
	color: blue;
	#!/usr/bin/env sh

	##
	# This is script with usefull tips taken from:
	# https://github.com/mathiasbynens/dotfiles/blob/master/.osx
	#
	# install it:
	# curl -sL https://raw.github.com/gist/2108403/hack.sh \| sh
	#
	.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
	}
	.test2:hover {
	transform: translate(20px, 0);
	// deferred obj callback
	function loadImg(selector) {
	var dfd = $.Deferred();
	$(selector).load(function() { dfd.resolve(); });
	return dfd.promise();
	}

	// more elements
	$.when(
	loadImg('#img1'),
	/* Centered heading with rules */
	h1 {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	text-overflow: ellipsis;

	font: 1.6em/1.1 Georgia;
	padding: .2em 0;