pascalduez

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Prototypal inheritance in Sass
// Disclaimer: might be totally contrived and useless...
// “It’s not about the destination, but the journey.”

// New operator

razwan

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

chriseppstein

// This approach lets you generically memoize any function by changing the call site:

@function something-slow-to-compute($arg-1, $arg-2) {
  @return ... slow calculation ... ;
}

$cached-values: ();
@function cached($function-name, $args...) {
  $cached-value: map-get($cached-values, ($function-name, $args));
  @if $cached-value {

LeaVerou

@function gray($intensity, $alpha: 1) {
  @return rgba($intensity, $intensity, $intensity, $alpha);
}

/* Thanks Chris Eppstein for simplifying my code! */

/* Testing our new function */
body {
	background: gray(50%);
	background: gray(255, .2);

jlong

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to

lelandbatey

Description

This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.

The script is here:

#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"

Results

csswizardry

I received this email from someone in response to my Code smells in CSS article in which I advocate the use of classes over not doing (you will need to read the article for full context).

Below is that email conversation, with names removed:

Hiya Harry,

Just wanted to drop you a line to say hi really as I am a fan of your work. I loved your talk about Big CSS, I even made my whole team watch it so they could learn a thing or two.

I have just read your latest blog article "Code Smells..." great stuff in there, some of which I am still guilty of even now. Generally I do try and make all my CSS as robust as it can be though. At my work I am the only one that takes things like HTML, CSS, JS seriously, it gets hard to try and pass on the enthusiasm for great sites onto other members of the team. I will be making them read this post aswell so thanks ;-) >>

Integralist

@include keyframe(fadeout) {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

LeaVerou

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

dirkschmid

$sprites: sprite-map("sprites/*.png")
$sprites-retina: sprite-map("sprites-retina/*.png")

=sprite-background($name)
  background-image: sprite-url($sprites)
  background-position: sprite-position($sprites, $name)
  background-repeat: no-repeat
  display: block
  height: image-height(sprite-file($sprites, $name))
  width: image-width(sprite-file($sprites, $name))