thedaviddias

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  browserify = require('gulp-browserify'),
  concat = require('gulp-concat'),
  embedlr = require('gulp-embedlr'),
  refresh = require('gulp-livereload'),
  lrserver = require('tiny-lr')(),
  express = require('express'),
  livereload = require('connect-livereload')
  livereloadport = 35729,

thedaviddias

cat <<! > raspi-gmail.py
#!/usr/bin/env python

import RPi.GPIO as GPIO, feedparser, time

DEBUG = 1

USERNAME = "username"     # just the part before the @ sign, add yours here
PASSWORD = "password"     

thedaviddias

(function() { 
var CSSCriticalPath = function(w, d) {
  var css = {};
  var pushCSS = function(r) {
    // The last selector wins, so over-write
    // merging existing css will happen here...
    css[r.selectorText] = r.cssText; 
  };
  
  var parseTree = function() { 

thedaviddias

by Dale Sande

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

For many of us getting started with Sass, at one time or another have created a junk-drawer of files. For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

Large CSS files and increased complexity

CSS started out with very simple intentions, but as [tableless web design][1.1] began to really take a foothold, o

thedaviddias

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name

thedaviddias

require 'growl_notify'

GrowlNotify.config do |config|
  config.notifications = ["Compass Application"]
  config.default_notifications = ["Compass Application"] 
  config.application_name = "My Application"
end

http_path = '/'
css_dir = 'public/assets/stylesheets'

thedaviddias

Handlebars.registerHelper('l10n', function(keyword) {
		var lang = (navigator.language) ? navigator.language : navigator.userLanguage; 

		// pick the right dictionary
		var locale = window.locale[lang] || window.locale['en-US'];
		
		// loop through all the key hierarchy (if any)
		var target = locale;
		var key = keyword.split(".");
		for (i in key){

thedaviddias

Handlebars.registerHelper('loc', function(property, fn) {
  var str;
  // we are bound to a value, it is now the context
  if (fn.contexts && typeof fn.contexts[0] === 'string') {
    str = fn.contexts[0];

  // Convention, start all localization keys with _
  } else if (property[0] === '_') {
    str = property;

thedaviddias

Yeoman + Compass Sprites

Setup

generator-webapp has support for compass out of the box. However, in order to use one of my favorite features of it — sprites and the image_url helper — you have to make some adjustments to the Gruntfile.

Let's assume you use a SASS stylesheet like this one:

@import "design/*.png"

thedaviddias

// everyone's new favorite closure pattern:
(function(window,document,undefined){ ... })(this,this.document);

// when minified:
(function(w,d,u){ ... })(this,this.document);

// which means all uses of window/document/undefined inside the closure 
// will be single-lettered, so big gains in minification.

// it also will speed up scope chain traversal a tiny tiny little bit.