anselmh

.box {
	width: 400px;
	height: 300px;
	background: #999;
}

.box:after {
	background: orange;
	border: 1px solid white;
	color: white;

anselmh

/**
 * Pure CSS Toggle Page Layout
 */

.content > article {
	min-height: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	

anselmh

/**
 * The first commented line is your dabblet’s title
 */

.sticker {
	display: inline-block;
	
	width: 3rem;
	height: 3rem;
	

anselmh

/**
* Open external links in new tab/window
*/

// All http:// links should open in new tab/window. Internal links are relative.
var anchors = document.querySelectorAll('a');

for (var i = 0; i < anchors.length; i++) {
	if (anchors[i].host !== window.location.hostname) {
		anchors[i].setAttribute('target', '_blank');

anselmh

<!--

A quick demo of the three current candidates of Responsive Images syntax on a real world example for one image.

This on purpose does not include any of the proposed viewport syntaxes because this IMO adds confucion and 
is stylistic only (therefore should go in CSS IMO).

-->

<!-- This is the src-{N} way: http://tabatkins.github.io/specs/respimg/Overview.html -->

anselmh

/* Wildcard selector searches through any part of the string */

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

anselmh

/*
 * The trouble with collections is that they are live queries against the underlying document (the HTML page). This means that every time you access any collection’s length, you’re querying the live DOM, and DOM operations are expensive in general.
 * 
 * It's only good if you don't update the length by f.e. adding DOM nodes
 * 
 * That’s why a better pattern for for loops is to cache the length of the array (or collection) you’re iterating over, as shown in the following example:
 */

for (var i=0, max = myarray.length; i < max; i++) {
	// do sth.

anselmh

var inspect_me = 0,   
	result = '';  
switch (inspect_me) {   
case 0:  
	result = "zero";  
	break;   
case 1:  
	result = "one";  
	break;   
default:  

anselmh

// Debounce without jQuery
function debounce(fn, delay) {
	var timer = null;
	return function () {
		var context = this, args = arguments;
		clearTimeout(timer);
		timer = setTimeout(function () {
			fn.apply(context, args);
		}, delay);
	};

anselmh

(function (global) {
    'use strict';

    window.matchMedia = window.matchMedia || function (media) {
        if (!Modernizr) {
            throw new Error('Reference Error: Modernizr is undefined');
        }

        return {
            matches: Modernizr.mq(media)