Brian LeRoux brianleroux

Responsive layouts in stylus

Why this way?

There is no span1..15 styles, instead your css defines your layout and your html remains semantic and not polluted with display information. As it should be.
The markup is incredibly easy, you specify the wrappers width, and then each columns width in percentages. Every other grid framework I've found is incredibly complicated with this.
It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.

This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
 // the rest of your code goes here.

	###
	Modified from https://github.com/jashkenas/coffee-script/blob/master/Cakefile

	Part of an upcoming PeepCode screencast. This snippet is MIT Licensed.
	###

	{spawn, exec} = require 'child_process'

	task 'assets:watch', 'Watch source files and build JS & CSS', (options) ->
	runCommand = (name, args) ->

	<html>
	<head>
	<title>Compass Test</title>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, target-densityDpi=device-dpi" />
	<script type="text/javascript" src="phonegap.0.9.6.1.js"></script>
	<script type="text/javascript">
	var d = -45,
	e = null,
	w = null;
	function win(h) {

	ApacheCon NA 2011 - Vancouver
	ApacheCon NA 2010 - Atlanta
	ApacheCon US 2009 - Oakland
	ApacheCon EU 2009 - Amsterdam
	ApacheCon US 2008 - New Orleans
	ApacheCon EU 2008 - Amsterdam
	ApacheCon US 2007 - Atlanta
	ApacheCon EU 2007 - Amsterdam
	ApacheCon US 2006 - Austin
	ApacheCon AP 2006 - Colombo, Sri Lanka

	#!/usr/bin/env node

	var util = require('util'),
	fs = require('fs'),
	path = require('path'),
	mysql = require('mysql'),
	moment = require('moment-range'),
	async = require('async'),
	csv = require('csv'),
	YAML = require('libyaml'),

	gifify() {
	if [[ -n "$1" ]]; then
	if [[ $2 == '--good' ]]; then
	ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
	time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- \| gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
	rm out-static*.png
	else
	ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - \| gifsicle --optimize=3 --delay=3 > $1.gif
	fi
	else

	/**
	* ReactJS: JavaScript like you've always done it.
	*
	* This example renders your top ten most followed friends/followers, `filter`ing
	* only your favorites, and putting a star on all verified accounts.
	*
	* With ReactJS, any time your data changes, the UI is always brought up to date
	* automatically. If friends length changes, or followCount - it always shows what
	* `render` describes.
	*/

	#!/usr/bin/env bash
	getopts ":r:" RECURSE

	for dir in *; do
	if [ -d "${dir}" ]; then
	pushd "$dir" > /dev/null

	if [ -e package.json ]; then
	echo "reinstalling packages with npmd for: ${dir}"
	rm -rf node_modules