Thibault thibaultboursier

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

Drop in replace functions for setTimeout and setInterval that make use of requestAnimationFrame.

See overview article and Paul Irish's earlier post.

Courtesty of Joe Lambert

Copyright 2011, Joe Lambert.
Free to use under the MIT license.
http://www.opensource.org/licenses/mit-license.php

Ctor: Lightweight Javascript Constructors with Inheritance

Author: Casey Duncan @iamnotcasey

This Javascript constructor with inheritance pattern is designed as a lightweight alternative to other methods I've seen while still providing a nice abstraction as a 13 line function that can be easily inlined into your code.

	/**
	* Image.js
	*
	* @description :: TODO: You might write a short summary of how this model works and what it represents here.
	* @docs :: http://sailsjs.org/#!documentation/models
	*/

	module.exports = {

	attributes: {

	module.exports = {
	get: function (req, res) {
	res.sendfile(req.path.substr(1));
	},
	_config: {
	rest: false,
	shortcuts: false
	}
	};

	// Greeter is a class of object that can greet people.
	// It can learn different ways of greeting people through
	// 'Strategies.'
	//
	// This is the Greeter constructor.
	var Greeter = function(strategy) {
	this.strategy = strategy;
	};

	// Greeter provides a greet function that is going to

	-----
	MAJOR
	-----
	These are what I refer to as 'major' breakpoints. They're defined on our link tags, and are on the 'outside'.
	All of our stylesheets are conditionally inserted (based off window innerWidth/innerHeight) into the page dynamically using javascript.

	<head>
	...
	<link rel="stylesheet" type="text/css" href="compact.css" media="(max-width: 640px)" />
	<link rel="stylesheet" type="text/css" href="tablet.css" media="(min-width: 641px)" />

	#
	# My Fancy Node.js project
	#

	PROJECT = "My Fancy Node.js project"


	all: install test server

	debug: ;@echo "Debugging ${PROJECT}.....http://0.0.0.0:8080/debug?port=5858 to start debugging"; \

	$(function () {
	"use strict";

	// for better performance - to avoid searching in DOM
	var content = $('#content');
	var input = $('#input');
	var status = $('#status');

	// my color assigned by the server
	var myColor = false;

	/*
	* object.watch polyfill
	*
	* 2012-04-03
	*
	* By Eli Grey, http://eligrey.com
	* Public Domain.
	* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
	*/