anselmh

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

$map:
    ('a', 'b');

// Expected output: ('a', 'b')
// Actual output: "a", "b"

anselmh

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

$map:
    ('a', 'b');

.class {
  content: $map;

anselmh

WPDS Düsseldorf – HTML / SVG Group

Tracking

We’re tracking our efforts in this Google Doc.

Who does this belong to?

Chat to Anselm

anselmh

/*
* Clearfix for modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

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)

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

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

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

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

<!--

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