marufsiddiqui

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"

marufsiddiqui

/**
 * Module dependencies.
 */
var express = require('express');
var http = require('http');
var app = express();

// all environments
app.use(express.favicon());

marufsiddiqui

// Generated on 2013-04-23 using generator-webapp 0.1.7
'use strict';
var path = require('path');

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to match all subfolders:
// 'test/spec/**/*.js'

marufsiddiqui

This is a small collection of scripts showing how to use require.js. It's only one of several ways of setting up a require.js project, but it's enough to get started.

At its core, require.js is about three things:

1. Dependency management
2. Modularity
3. Dynamic script loading

The following files show how these are achieved.

marufsiddiqui

// articles per page
var limit = 10;

// pagination middleware function sets some
// local view variables that any view can use
function pagination(req, res, next) {
    var page = parseInt(req.params.page) || 1,
        num = page * limit;
    db.articles.count(function(err, total) {
        res.local("total", total);

marufsiddiqui

!(function (ng) {
    'use strict';
    ng.module('jquery', ['jquery.directives']);

    var jqdir = ng.module('jquery.directives', []);

    function tokenInput($parse, $timeout) {
        return {
            restrict: 'A',
            require: '?ngModel',

marufsiddiqui

function readDir(start, callback) {
    // Use lstat to resolve symlink if we are passed a symlink
    fs.lstat(start, function(err, stat) {
        if(err) {
            return callback(err);
        }
        var found = {dirs: [], files: []},
            total = 0,
            processed = 0;
        function isDir(abspath) {

marufsiddiqui

browser.get "/phones" # navigate to /phones URL
input.clear() # clear text input field


expect(browser.getTitle()).toMatch 'My Google Photo Gallery'
expect(browser.getCurrentUrl()).toMatch "/phones$"
expect(element.all(by_.repeater("phone in phones")).count()).toBe 8
expect(element.all(by_.repeater("phone in phones").column("phone.name")).first().getText()).toBe "Motorola XOOM"

# Find by...

marufsiddiqui

/*

# Usage in html template:

"xxx | nl2br"

<div ng-bind-html=" YourString | nl2br "></div>

or:

marufsiddiqui

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.