Greasemonkey UserScript

// ==UserScript==
// @name           test
// @namespace      test
// @include        http://www.facebook.com/johnny.k.sunny
// @exclude        
// ==/UserScript==



document.getElementById('headerArea').innerHTML = 'Life is out!';

Big Pipe

test.js

	$('external_js').innerHTML = 'Ok';
	// Important, notice BigPipe that this file has been loaded
	if (BigPipe != undefined) { BigPipe.fileLoaded("test.js"); }

view raw gistfile1.js hosted with ❤ by GitHub

test2.js

	function test2(id, message) {
	$(id).innerHTML = message;
	}
	// Important, notice BigPipe that this file has been loaded
	if (BigPipe != undefined) { BigPipe.fileLoaded("test2.js"); }

view raw gistfile1.js hosted with ❤ by GitHub

prototypepatch.js

	/*
	* $Id: prototypepatch.js,v 1.20 2010/09/13 12:09:58 antti-pe Exp $
	*
	* Copyright � 2008 - 2009 Sulake Dynamoid Oy http://www.dynamoid.com/
	*
	* Patches for prototype 1.6.0.2
	*/
	Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
	Prototype.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
	Prototype.Browser.IE8 = Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7;
	/***** Event.observeOnce *****/
	var PrototypeEventPatch = {
	observeOnce: function(element, eventName, handler, predicate) {
	var onceHandler = function() {
	if (typeof predicate != 'function' || predicate.apply(this, arguments)) {
	handler.apply(this, arguments);
	Event.stopObserving(element, eventName, onceHandler);
	}
	}.bindAsEventListener(element);
	return Event.observe(element, eventName, onceHandler);
	}
	};
	Object.extend(window.Event, PrototypeEventPatch);
	Object.extend(document, {
	observeOnce: PrototypeEventPatch.observeOnce.methodize()
	});
	Element.addMethods({
	observeOnce: PrototypeEventPatch.observeOnce
	});
	/***** /Event.observeOnce *****/
	var PrototypeElementPatch = {
	delegate: function(element, selector, eventName, callback) {
	element = $(element);
	element.observe(eventName, function(callback, evt) {
	if (el = evt.findElement(selector)) {
	callback.bind(el, evt)();
	}
	}.curry(callback));
	return element;
	},
	preventTextSelection: function(element) {
	if (typeof element.onselectstart != 'undefined') {
	// IE
	element.observe('selectstart', function(evt) {
	evt.preventDefault();
	});
	} else if (typeof element.style.MozUserSelect != 'undefined') {
	// Mozilla
	element.style.MozUserSelect = 'none';
	} else {
	// Others
	element.observe('mousedown', function(evt) {
	evt.preventDefault();
	});
	}
	}
	};
	Element.addMethods(PrototypeElementPatch);
	function $RF(el, radioGroup) {
	if($(el).type && $(el).type.toLowerCase() == 'radio') {
	var radioGroup = $(el).name;
	var el = $(el).form;
	} else if ($(el).tagName.toLowerCase() != 'form') {
	return false;
	}
	var checked = $(el).getInputs('radio', radioGroup).find(function(re) { return re.checked; });
	return (checked) ? $F(checked) : null;
	}
	Object.extend(Element.Methods.ByTag, {
	"FORM": Object.clone(Form.Methods),
	"INPUT": Object.clone(Form.Element.Methods),
	"SELECT": Object.clone(Form.Element.Methods),
	"TEXTAREA": Object.clone(Form.Element.Methods),
	"BUTTON": Object.clone(Form.Element.Methods)
	});
	Element.addMethods();
	/**
	* Event.simulate(@element, eventName[, options]) -> Element
	*
	* - @element: element to fire event on
	* - eventName: name of event to fire (only MouseEvents and HTMLEvents interfaces are supported)
	* - options: optional object to fine-tune event properties - pointerX, pointerY, ctrlKey, etc.
	*
	* $('foo').simulate('click'); // => fires "click" event on an element with id=foo
	*
	* @license MIT
	* @copyright (c) 2009 Juriy Zaytsev
	*/
	(function() {
	var eventMatchers = {
	'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
	'MouseEvents': /^(?:click|mouse(?:down|up|over|move|out))$/
	}
	var defaultOptions = {
	pointerX: 0,
	pointerY: 0,
	button: 0,
	ctrlKey: false,
	altKey: false,
	shiftKey: false,
	metaKey: false,
	bubbles: true,
	cancelable: true
	}
	Event.simulate = function(element, eventName) {
	var options = Object.extend(defaultOptions, arguments[2] || { });
	var oEvent, eventType = null;
	element = $(element);
	for (var name in eventMatchers) {
	if (eventMatchers[name].test(eventName)) { eventType = name; break; }
	}
	if (!eventType)
	throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
	if (document.createEvent) {
	oEvent = document.createEvent(eventType);
	if (eventType == 'HTMLEvents') {
	oEvent.initEvent(eventName, options.bubbles, options.cancelable);
	} else {
	oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
	options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
	options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
	}
	element.dispatchEvent(oEvent);
	} else {
	options.clientX = options.pointerX;
	options.clientY = options.pointerY;
	oEvent = Object.extend(document.createEventObject(), options);
	element.fireEvent('on' + eventName, oEvent);
	}
	return element;
	}
	Element.addMethods({ simulate: Event.simulate });
	})();
	Object.extend(document, {
	bufferedEvents: new Hash(),
	fire: document.fire.wrap(function(proceed, eventName, memo) {
	var a = document.bufferedEvents.get(eventName);
	if (!a) {
	a = new Array();
	document.bufferedEvents.set(eventName, a);
	}
	a.push(proceed(eventName, memo));
	}),
	observe: document.observe.wrap(function(proceed, eventName, handler) {
	var a = document.bufferedEvents.get(eventName);
	if (a) {
	a.each(function(event) {
	handler(event)
	});
	}
	proceed(eventName, handler);
	})
	});
	Object.extend(Form.Element.Methods, {
	disable: Form.Element.Methods.disable.wrap(function(proceed, element) {
	element.fire('form:disable');
	return proceed(element);
	}),
	enable: Form.Element.Methods.enable.wrap(function(proceed, element) {
	element.fire('form:enable');
	return proceed(element);
	})
	});
	Element.addMethods([ 'FORM', 'INPUT', 'TEXTAREA', 'SELECT', 'BUTTON' ], { disable: Form.Element.Methods.disable, enable: Form.Element.Methods.enable });

view raw gistfile1.js hosted with ❤ by GitHub

bigpipe.js

	/***** BIGPIPE *****/
	/**
	* NOTE: THIS FILE IS PART OF THE startup.js COMPILATION. REMEMBER TO UPDATE THE COMPILATION AFTER MODIFICATIONS!
	*
	* This our BigPipe implementation which is modelled after the Facebook BigPipe, which is described at:
	* http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
	*/
	var globalEval = function globalEval(src) {
	if (window.execScript) {
	window.execScript(src);
	return;
	}
	var fn = function() {
	window.eval.call(window,src);
	};
	fn();
	};
	/**
	* A single pagelet resource which currently can be a css file or a javascript file. Note that this excludes Javascript
	* executable code which is not stored here but inside the Pagelet class.
	*/
	var PageletResource = Class.create({
	/**
	* Resource name: the filename without path
	* @param file string
	*/
	name: null,
	/**
	* Resource file with full path.
	* @param name string
	*/
	file: null,
	/**
	* Resource type: string "js" or "css"
	* @param type string
	*/
	type: null,
	/**
	* State of this resource. The state is used to track if the resource has been loaded
	* and later if all resources for a given pagelet has been loaded so that pagelet
	* state can proceed.
	*
	* @param phase integer
	*/
	phase: 0, // States:
	// 0: not started.
	// 1: started loading
	// 2: loading done.
	/**
	* Array of callbacks which will be called when this resource has been loaded.
	* @param belongs Array
	*/
	belongs: null,
	initialize: function(file, name, type) {
	this.name = name;
	this.file = file;
	this.type = type;
	this.belongs = new Array();
	BigPipe.debug("Pagelet " + name + " created as type " + type + " with file ", file);
	},
	/**
	* Attaches a callback to this resource. The callback will be called when this resource has been loaded.
	* @param callback
	*/
	attachToPagelet: function(callback) {
	this.belongs.push(callback);
	},
	/**
	* Starts loading this resource. Depending on the resource type (js|css) this will add a proper html
	* tag to the end of the document which kicks the browser to start loading the resource.
	*
	* JS resources must contain a BigPipe.fileLoaded() call to notify bigpipe that the js file
	* has been loaded and processed.
	*
	* {code}
	* if (BigPipe != undefined) { BigPipe.fileLoaded("geodata_google.js"); }
	* {code}
	*
	* TODO: CSS resources are tagged to be completed immediately after the css link tag has been inserted,
	* but in the future a better way would be needed so that the actual load moment would be detected.
	*
	*/
	startLoading: function() {
	if (this.phase != 0) {
	return;
	}
	BigPipe.debug("Started loading " + this.type + " resource:", this.file);
	if (this.type == 'css') {
	var ref = document.createElement('link');
	ref.setAttribute('rel', 'stylesheet');
	ref.setAttribute('type', 'text/css');
	ref.setAttribute('href', this.file);
	/*
	ref.observe('onload', function() {
	alert("moroo");
	});
	ref.onload = function() { alert("moroo"); };
	*/
	//$$('head').first().insert(ref);
	document.write('<li' + 'nk rel="stylesheet" type="text/css" href="' + this.file + '" />');
	this.phase = 1;
	this.onComplete();
	}
	if (this.type == 'js') {
	var js = document.createElement('script');
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', this.file);
	$$('head').first().insert(js);
	}
	},
	/**
	* Callback which is called when this resource has been loaded. On CSS files the startLoading does this
	* and on JS files the BigPipe will do this.
	*
	* This will set state = 2 (resource has been loaded) and call all callbacks.
	*/
	onComplete: function() {
	if (this.phase == 2) {
	return;
	}
	this.phase = 2;
	this.belongs.each(function(x) {
	x(this);
	}.bind(this));
	}
	});
	/**
	* A single Pagelet. Pagelet is a set of data which is streamed from web server and placed into correct elements
	* in the html page as soon as each pagelet has been delivered to the browser.
	*
	* Pagelet has different execution phases which are executed in certain order (the orders [1,4] are
	* loosely the same as the <i>phases</i> of this Pagelet):
	*
	* -1) Pagelet placeholder printing. This happens in web server and it prints a <div id="{this.id}"></div>
	*
	* 0) Pagelet arrives to browser. This includes all pagelet data which has been rendered by the web server
	*
	* 1) CSS loading: BigPipe asks each CSS PageletResource to start loading. This will kick browser to start
	* downloading the css resources. Currently BigPipe does not wait that these resources are loaded, but
	* immediately continue to the next phase:
	*
	* 2) HTML Injecting. After all CSS resources which are needed by this Pagelet are loaded, the BigPipe
	* will inject the HTML code to the placeholder div.
	*
	* 3) After ALL Pagelet are on phase 3 (eg. they're all on this step) the BigPipe will start to load
	* the .js files which are needed by its pagelets.
	*
	* 4) After all js resources which are needed by a Pagelet are loaded, the BigPipe will execute the jsCode
	* of the pagelet. This is done by evaluating with globalEval() call.
	*/
	var Pagelet = Class.create({
	/**
	* String of javascript code
	* @param jsCode string
	*/
	jsCode: null,
	/**
	* Array of PageletResources which are needed by this Pagelet.
	* @param cssResources Array
	*/
	cssResources: null,
	/**
	* Array of PageletResources which are needed by this Pagelet.
	* @param jsResources Array
	* @param json
	*/
	jsResources: null,
	/**
	* Id of this pagelet. This is also the id of the target object in the html page where the pagelet is injected.
	* @param id string
	*/
	id: "",
	/**
	* The html code of this pagelet which is injected into the div which id is this.id as the divs innerHTML.
	* @param innerHTML string
	*/
	innerHTML: "",
	/**
	* Stores the json data between initialize() and start()
	* @param json
	*/
	json: null,
	phase: 0, // Phases:
	// 0: not started
	// 1: loading css resources
	// 2: css resources loaded, injecting innerHTML
	// 3: innerHTML injected
	// 4: related JS resources loaded and executed
	/**
	* Initializes this pagelet. The json is directly the json data which the web server has transported
	* to the browser via the BigPipe.onArrive() call.
	* @param json
	*/
	initialize: function(json) {
	this.id = json.id;
	this.phase = 0;
	this.json = json;
	this.jsCode = json.js_code;
	this.cssResources = new Hash();
	this.jsResources = new Hash();
	this.innerHTML = json.innerHTML;
	},
	start: function() {
	this.json.css_files.each(function(x) {
	var cssResource = BigPipe.pageletResourceFactory(x, 'css');
	this.attachCssResource(cssResource);
	}.bind(this));
	this.json.js_files.each(function(x) {
	var jsResource = BigPipe.pageletResourceFactory(x, 'js');
	this.attachJsResource(jsResource);
	}.bind(this));
	this.cssResources.each(function(pair) {
	this.phase = 1;
	pair.value.startLoading();
	});
	// Check if we actually started to load any css files. if not, we can just skip ahead.
	if (this.phase == 0) {
	this.injectInnerHTML();
	}
	},
	/**
	* Attaches a CSS resource to this Pagelet.
	* @private
	* @param resource
	*/
	attachCssResource: function(resource) {
	BigPipe.debug("Attaching CSS resource " + resource.file + " to pagelet " + this.id, null);
	resource.attachToPagelet(this.onCssOnload.bind(this));
	this.cssResources.set(resource.file, resource);
	},
	/**
	* Attaches a JS resource to this Pagelet.
	* @private
	* @param resource
	*/
	attachJsResource: function(resource) {
	BigPipe.debug("Attaching JS resource " + resource.file + " to pagelet " + this.id, null);
	resource.attachToPagelet(this.onJsOnload.bind(this));
	this.jsResources.set(resource.file, resource);
	},
	/**
	* Callback which is called from PageletResource when a javascript file has been loaded.
	* If all js resources needed by this Pagelet are loaded then this function will proceed to the final
	* phase and evaluate the possible jsCode.
	*
	* @param x PageletResource which has just been loaded.
	*/
	onJsOnload: function(x) {
	if (this.phase > 3) {
	return;
	}
	var allLoaded = true;
	this.jsResources.each(function(pair) {
	if (pair.value.phase != 2) {
	allLoaded = false;
	}
	});
	if (!allLoaded) {
	return;
	}
	if (this.jsResources.size() > 0) {
	BigPipe.debug("pagelet " + this.id + ": All JS resources are loaded");
	}
	if (this.jsCode && this.jsCode != "") {
	try {
	BigPipe.debug("evaluating js code: ", this.jsCode);
	globalEval(this.jsCode);
	} catch (e) {
	BigPipe.debug("Error while evaluating " + x, e);
	}
	}
	this.phase = 4;
	},
	/**
	* Callback which is called from PageletResource when a css file has been loaded.
	* If all css resources needed by this Pagelet are loaded then this function will proceed to the next
	* phase and inject the HTML code.
	*
	* @param x PageletResource which has just been loaded.
	*/
	onCssOnload: function(x) {
	BigPipe.debug("pagelet " + this.id + " got notified that CSS resource is loaded: ", x);
	var allLoaded = true;
	this.cssResources.each(function(pair) {
	if (pair.value.phase != 2) {
	allLoaded = false;
	}
	});
	if (!allLoaded) {
	return;
	}
	BigPipe.debug("all resources loaded", this);
	this.injectInnerHTML();
	},
	/**
	* Injects the innerHTML code to the Pagelet div placeholder.
	* @private
	*/
	injectInnerHTML: function() {
	this.phase = 2;
	var div = $(this.id);
	BigPipe.debug("injecting innerHTML to " + this.id, this);
	if (div != null && typeof this.innerHTML == "string" && this.innerHTML != "") {
	//alert("Injecting inner html: " + this.id);
	//div.innerHTML = this.innerHTML;
	div.update(this.innerHTML);
	}
	this.phase = 3;
	BigPipe.pageletHTMLInjected(this);
	}
	});
	/**
	* BigPipe main class.
	*/
	var BigPipe = {
	/**
	* Map of all PageletResource objects. Resource name is used as the key and value is the PageletResource object
	*/
	pageletResources: new Hash(),
	/**
	* Map of all Pagelet objects. Pagelet id is used as the key.
	*/
	pagelets: new Hash(),
	phase: 0, // States:
	// 0: pagelets coming
	// 1: last pagelet has been receivered
	// 2: started to load js files
	/**
	* Global debugging valve for all BigPipe related stuff.
	*/
	debug_: true,
	/**
	* Called by web server when Pagelet has been arrived to the browser. In practice the web server
	* will render a <script>BigPipe.onArrive(...)</script> tag which executes this.
	* @param data
	*/
	onArrive: function(data) {
	this.debug("Pagelet arrived: ", data);
	// The last pagelet will have the is_last property set to true. This will signal
	// that we can start loading javascript resources.
	if (data.is_last != undefined && data.is_last) {
	this.debug("This pagelet was last:", data);
	this.phase = 1;
	}
	var pagelet = new Pagelet(data);
	this.pagelets.set(pagelet.id, pagelet);
	pagelet.start();
	},
	/**
	* Callback which is used from javascript resources to signal that the javascript file has been loaded.
	* This must be done by placing following javascript code to the end of the .js file:
	*
	* {code}
	* if (BigPipe != undefined) { BigPipe.fileLoaded("geodata.js"); }
	* {/code}
	*
	* @public
	* @param filename string Name of the javascript file without path.
	*/
	fileLoaded: function(filename) {
	var resource = this.pageletResources.get(filename);
	BigPipe.debug("js file loaded", filename);
	if (resource) {
	resource.onComplete();
	}
	},
	/**
	* Task has reached state 3 which means that it's ready for js loading. This is a callback
	* which is called from Pagelet.
	* @protected Called from a Pagelet
	* @param pagelet
	*/
	pageletHTMLInjected: function(pagelet) {
	var allLoaded = true;
	this.debug("pageletHTMLInjected", pagelet);
	this.pagelets.each(function(pair) {
	if (pair.value.phase < 3) {
	this.debug("pageletHTMLInjected pagelet still not loaded", pair.value);
	allLoaded = false;
	}
	}.bind(this));
	if (!allLoaded) {
	return;
	}
	if (this.phase == 1) {
	this.loadJSResources();
	}
	},
	/**
	* Starts loading javascript resources.
	* @private
	*/
	loadJSResources: function() {
	this.phase = 2;
	this.debug("Starting to load js resources...");
	var something_started = false;
	this.pageletResources.each(function(pair) {
	if (pair.value.type == 'js') {
	something_started = true;
	pair.value.startLoading();
	}
	});
	this.pagelets.each(function(pair) {
	if (pair.value.jsResources.size() == 0) {
	pair.value.onJsOnload();
	}
	}.bind(this));
	if (!something_started) {
	this.debug("No js resources in page, moving forward...");
	this.pagelets.each(function(pair) {
	pair.value.onJsOnload();
	}.bind(this));
	}
	},
	debug: function(funcName, data) {
	if (BigPipe.debug_ && typeof console != 'undefined' && typeof console.log != 'undefined') {
	console.log('BigPipe.' + funcName, data);
	}
	},
	/**
	* Returns a PageletResource from cache or creates new if the resource has not yet been created.
	*
	* @protected Called from Pagelet
	* @param file string Filename of the resource. eg "/js/talk.js"
	* @param type string type: "css" or "js"
	* @return PageletResource
	*/
	pageletResourceFactory: function(file, type) {
	var re = new RegExp("(?:.*\/)?(.+js)");
	var m = re.exec(file);
	var name = file;
	if (m) {
	name = m[1];
	}
	var res = this.pageletResources.get(name);
	if (res == null) {
	res = new PageletResource(file, name, type);
	this.pageletResources.set(name, res);
	}
	return res;
	}
	};
	/***** /BIGPIPE *****/

view raw gistfile1.js hosted with ❤ by GitHub

html

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>BigPipe example</title>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="prototypepatch.js"></script>
	<script type="text/javascript" src="bigpipe.js"></script>
	</head>
	<body>
	<h1 id="header">BigPipe test.</h1>
	<p>This version uses padding to fill out browser caches so that the bigpipe delayed rendering effect can be seen easily. This causes problems with firebug, because the page content is big. Use <a href="example.php?disable_padding=1">this</a> link to disable the padding so you can use firebug more easily.
	<!-- simulate that the page is much bigger than it is. Browsers have internal buffering which hides how bigpipe actual works.
	This allows us to simulate real world effect with a big page. -->
	<!-- -->
	<h2>Simple content replace</h2>
	<div id="content_replace"></div>
	<h2>Test delayed rendering (50 times)</h2>
	<span id="counter0"></span><span id="counter1"></span><span id="counter2"></span><span id="counter3"></span><span id="counter4"></span><span id="counter5"></span><span id="counter6"></span><span id="counter7"></span><span id="counter8"></span><span id="counter9"></span><span id="counter10"></span><span id="counter11"></span><span id="counter12"></span><span id="counter13"></span><span id="counter14"></span><span id="counter15"></span><span id="counter16"></span><span id="counter17"></span><span id="counter18"></span><span id="counter19"></span><span id="counter20"></span><span id="counter21"></span><span id="counter22"></span><span id="counter23"></span><span id="counter24"></span><span id="counter25"></span><span id="counter26"></span><span id="counter27"></span><span id="counter28"></span><span id="counter29"></span><span id="counter30"></span><span id="counter31"></span><span id="counter32"></span><span id="counter33"></span><span id="counter34"></span><span id="counter35"></span><span id="counter36"></span><span id="counter37"></span><span id="counter38"></span><span id="counter39"></span><span id="counter40"></span><span id="counter41"></span><span id="counter42"></span><span id="counter43"></span><span id="counter44"></span><span id="counter45"></span><span id="counter46"></span><span id="counter47"></span><span id="counter48"></span><span id="counter49"></span><span id="delayed_done"></span> <h2>Content replace with inline javascript</h2>
	<div id="inline_javascript_test"></div>
	<h2>Content replace with external javascript file</h2>
	<div id="external_js">Be patient, this will be completed in the end after delayed rendering</div>
	<div id="external_javascript_test"></div>
	<h2>Content replace with external javascript and inline javascript</h2>
	<div id="external_js2">be patient, this will be completed in the end after delayed rendering test</div>
	<div id="external_javascript_test2"></div><div id="google_analytics"></div><div id="final_ok"></div></body>
	<script id="content_replace_1">BigPipe.onArrive({"innerHTML":"Ok <!-- --><br>\n","id":"content_replace","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter0_2">BigPipe.onArrive({"innerHTML":"0 <!-- -->\n","id":"counter0","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter1_3">BigPipe.onArrive({"innerHTML":"1 <!-- -->\n","id":"counter1","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter2_4">BigPipe.onArrive({"innerHTML":"2 <!-- -->\n","id":"counter2","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter3_5">BigPipe.onArrive({"innerHTML":"3 <!-- -->\n","id":"counter3","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter4_6">BigPipe.onArrive({"innerHTML":"4 <!-- -->\n","id":"counter4","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter5_7">BigPipe.onArrive({"innerHTML":"5 <!-- -->\n","id":"counter5","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter6_8">BigPipe.onArrive({"innerHTML":"6 <!-- -->\n","id":"counter6","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter7_9">BigPipe.onArrive({"innerHTML":"7 <!-- -->\n","id":"counter7","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter8_10">BigPipe.onArrive({"innerHTML":"8 <!-- -->\n","id":"counter8","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter9_11">BigPipe.onArrive({"innerHTML":"9 <!-- -->\n","id":"counter9","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter10_12">BigPipe.onArrive({"innerHTML":"10 <!-- -->\n","id":"counter10","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter11_13">BigPipe.onArrive({"innerHTML":"11 <!-- -->\n","id":"counter11","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter12_14">BigPipe.onArrive({"innerHTML":"12 <!-- -->\n","id":"counter12","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter13_15">BigPipe.onArrive({"innerHTML":"13 <!-- -->\n","id":"counter13","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter14_16">BigPipe.onArrive({"innerHTML":"14 <!-- -->\n","id":"counter14","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter15_17">BigPipe.onArrive({"innerHTML":"15 <!-- -->\n","id":"counter15","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter16_18">BigPipe.onArrive({"innerHTML":"16 <!-- -->\n","id":"counter16","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter17_19">BigPipe.onArrive({"innerHTML":"17 <!-- -->\n","id":"counter17","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter18_20">BigPipe.onArrive({"innerHTML":"18 <!-- -->\n","id":"counter18","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter19_21">BigPipe.onArrive({"innerHTML":"19 <!-- -->\n","id":"counter19","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter20_22">BigPipe.onArrive({"innerHTML":"20 <!-- -->\n","id":"counter20","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter21_23">BigPipe.onArrive({"innerHTML":"21 <!-- -->\n","id":"counter21","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter22_24">BigPipe.onArrive({"innerHTML":"22 <!-- -->\n","id":"counter22","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter23_25">BigPipe.onArrive({"innerHTML":"23 <!-- -->\n","id":"counter23","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter24_26">BigPipe.onArrive({"innerHTML":"24 <!-- -->\n","id":"counter24","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter25_27">BigPipe.onArrive({"innerHTML":"25 <!-- -->\n","id":"counter25","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter26_28">BigPipe.onArrive({"innerHTML":"26 <!-- -->\n","id":"counter26","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter27_29">BigPipe.onArrive({"innerHTML":"27 <!-- -->\n","id":"counter27","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter28_30">BigPipe.onArrive({"innerHTML":"28 <!-- -->\n","id":"counter28","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter29_31">BigPipe.onArrive({"innerHTML":"29 <!-- -->\n","id":"counter29","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter30_32">BigPipe.onArrive({"innerHTML":"30 <!-- -->\n","id":"counter30","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter31_33">BigPipe.onArrive({"innerHTML":"31 <!-- -->\n","id":"counter31","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter32_34">BigPipe.onArrive({"innerHTML":"32 <!-- -->\n","id":"counter32","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter33_35">BigPipe.onArrive({"innerHTML":"33 <!-- -->\n","id":"counter33","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter34_36">BigPipe.onArrive({"innerHTML":"34 <!-- -->\n","id":"counter34","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter35_37">BigPipe.onArrive({"innerHTML":"35 <!-- -->\n","id":"counter35","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter36_38">BigPipe.onArrive({"innerHTML":"36 <!-- -->\n","id":"counter36","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter37_39">BigPipe.onArrive({"innerHTML":"37 <!-- -->\n","id":"counter37","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter38_40">BigPipe.onArrive({"innerHTML":"38 <!-- -->\n","id":"counter38","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter39_41">BigPipe.onArrive({"innerHTML":"39 <!-- -->\n","id":"counter39","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter40_42">BigPipe.onArrive({"innerHTML":"40 <!-- -->\n","id":"counter40","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter41_43">BigPipe.onArrive({"innerHTML":"41 <!-- -->\n","id":"counter41","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter42_44">BigPipe.onArrive({"innerHTML":"42 <!-- -->\n","id":"counter42","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter43_45">BigPipe.onArrive({"innerHTML":"43 <!-- -->\n","id":"counter43","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter44_46">BigPipe.onArrive({"innerHTML":"44 <!-- -->\n","id":"counter44","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter45_47">BigPipe.onArrive({"innerHTML":"45 <!-- -->\n","id":"counter45","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter46_48">BigPipe.onArrive({"innerHTML":"46 <!-- -->\n","id":"counter46","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter47_49">BigPipe.onArrive({"innerHTML":"47 <!-- -->\n","id":"counter47","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter48_50">BigPipe.onArrive({"innerHTML":"48 <!-- -->\n","id":"counter48","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="counter49_51">BigPipe.onArrive({"innerHTML":"49 <!-- -->\n","id":"counter49","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="delayed_done_52">BigPipe.onArrive({"innerHTML":"Ok <!-- --><br>\n","id":"delayed_done","css_files":[],"js_files":[],"js_code":""});</script>
	<script id="inline_javascript_test_53">BigPipe.onArrive({"innerHTML":"<div id=\"javascript_inline_test\">Be patient, this will be completed in the end after delayed rendering<\/div>","id":"inline_javascript_test","css_files":[],"js_files":[],"js_code":"$('javascript_inline_test').innerHTML = 'Ok';"});</script>
	<script id="external_javascript_test_54">BigPipe.onArrive({"innerHTML":"","id":"external_javascript_test","css_files":[],"js_files":["test.js"],"js_code":""});</script>
	<script id="external_javascript_test2_55">BigPipe.onArrive({"innerHTML":"","id":"external_javascript_test2","css_files":[],"js_files":["test2.js"],"js_code":"test2('external_js2', 'Ok');"});</script>
	<script id="google_analytics_56">BigPipe.onArrive({"innerHTML":"","id":"google_analytics","css_files":[],"js_files":[],"js_code":" var _gaq = _gaq || [];\n _gaq.push(['_setAccount', 'UA-18754626-1']);\n _gaq.push(['_trackPageview']);\n\n (function() {\n var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true;\n ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js';\n var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\n })();\n\n"});</script>
	<script id="final_ok_57">BigPipe.onArrive({"innerHTML":"","id":"final_ok","css_files":[],"js_files":["test.js"],"js_code":"$('header').innerHTML = 'All done';","is_last":true});</script>
	</html><!--html end tag from bigpipe renderer-->

view raw gistfile1.html hosted with ❤ by GitHub

http://www.juhonkoti.net/bigpipe/example.php

nice name for event

$tartup

design

http://www.premiumpixels.com

http://formalize.me/

http://formalize.me/

gallery

http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840

http://grids.heroku.com/

http://grids.heroku.com/

nodejs.org

backbone

documentcloud.github.com/backbone/#Introduction

presentation

http://imakewebthings.github.com/deck.js/

js

var classicModulePattern = function(){
var privateVar = 1;
function privateFunction(){
alert('private');
}
return {
publicVar:2,
publicFunction:function(){
classicModulePattern.anotherPublicFunction();
},
anotherPublicFunction:function(){
privateFunction();
}
}
}();
classicModulePattern.publicFunction();

http://christianheilmann.com/2008/02/07/five-things-to-do-to-a-script-before-handing-it-over-to-the-next-developer/ 

font: 12px/18px "Monaco","Courier New","Courier",monospace; }

code {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);

    border-radius: 3px 3px 3px 3px;

    color: #FFFFFF;

    padding: 2px 3px;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);

}

drop-in-modals #3 (line 181)

code, pre {

    color: #E33100;

    font: 12px/18px "Monaco","Courier New","Courier",monospace;

}

deep linking

http://www.thetutorialblog.com/demos/jQueryDeepLinking/#/test2

animate css

http://daneden.me/animate/slider/

css3 rebbons

 h1{
        text-align: center;
        position: relative;
        color: #fff;
        margin: 0 -30px 30px -30px;
        padding: 10px 0;
        text-shadow: 0 1px rgba(0,0,0,.8);
        background: #5c5c5c;
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
    }

    h1:before, h1:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }

    h1:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }

    h1:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }

php debuging

echo "<pre>";
var_dump(get_defined_vars());
exit;

grid system layout / template

http://960.gs/


http://grids.heroku.com/

css3 buttons

http://hellohappy.org/css3-buttons/CSS - http://hellohappy.org/css3-buttons/

Collapse All
Expand All

http://hellohappy.org/css3-buttons/
http://hellohappy.org/css3-buttons/css/buttons.css
http://www.webdesignerwall.com/demo/css-buttons.html


http://tutorialzine.com/

jquery slider

http://jqueryfordesigners.com/demo/simple-spy.html


http://janne.aukia.com/zoomooz/

url clean

def clean(string)
  string = string.strip
  string = string.tr(' ', '_')
  string = string.tr("'", "")
  string = string.tr("$", "")
  string = string.tr("&", "")
  string = string.tr("<", "")
  string = string.tr(">", "")
  string = string.tr("*", "")
  string = string.tr("@", "")
  string = string.tr(".", "")
  string = string.tr(":", "")
  string = string.tr("|", "")
  string = string.tr("~", "")
  string = string.tr("`", "")
  string = string.tr("(", "")
  string = string.tr(")", "")
  string = string.tr("%", "")
  string = string.tr("#", "")
  string = string.tr("^", "")
  string = string.tr("?", "")
  string = string.tr("/", "")
  string = string.tr("{", "")
  string = string.tr("}", "")
  string = string.tr(",", "")
  string = string.tr(";", "")
  string = string.tr("!", "")
  string = string.tr("+", "")
  string = string.tr("=", "")
  string = string.tr("-", "_")
end

ruby arrays

ruby arraysArrays are ordered, integer-indexed collections of any object. Array indexing starts at 0, as in C# or Java. A negative index is assumed to be relative to the end of the array-that is, an index of -1 indicates the last element of the array, -2 is the next to last element in the array, and so on.

Creating a new array

array = Array.new
# or
array = []

Adding array elements By position

array = []
array[0] = "first element"

To the end

array << "last element"
# This adds "last element" to the end of the array
# or
array.push("last element")
# This adds "last element" to the end of the array

To the beginning

array = ["first element", "second element"]
array.unshift("before first element")
# This adds "before first element" to the beginning of the array

Retrieving array elements

By position

array = ["first element", "second element", "third element"]
third_element = array[2]
# This returns the third element.

By positions

second_and_third_element = array[1, 2]
# This returns a new array that contains the second & third elements

Removing array elements

From the beginning

array = ["first element", "second element"]
first_element = array.shift
# This removes "first element" from the beginning of the array

From the end

last_element = array.pop
# This removes "second element" or the last element from the end of the array

Combining arrays

To a new array

array = [1, 2, 3]
array.concat([4, 5, 6, 7])
[1, 2, 3, 4, 5, 6, 7]
#or
new_array = array + [4, 5, 6]
# Using the "+" method returns a new array, but does not modify the original array

Modifying the array

array.replace([4, 5, 6])
[4, 5, 6]

Pairing items

array = [1, 2, 3]
new_paired_array = array.zip([4, 5, 6])
[[1,4],[2, 5],[3, 6]]
# This creates an array of arrays

Flattening array of arrays

array = [1, 2, 3]
new_paired_array_flattened = array.zip([4, 5, 6]).flatten
[1, 4, 2, 5, 3, 6]

This flattens the arrays of arrays into one Array.

Collecting array elements

array = [1, 2, 3]
array.collect {|x| x * 2 }
[2, 4, 6]

Invokes block once for each element of self. Creates a new array containing the values returned by the block.

Iterating over arrays

[1, 2, 3, 4] .each {|x| puts x}
1
2
3
4

Filtering arrays

[1, 2, 3, 4, 5, 6] .find {|x| puts x > 5}

This returns the first element that matches the block criteria.

Querying arrays

array.find_all {|item| criteria }

This returns a new array containing all the elements of the array that match the block criteria.

array.size

This returns the number of elements in the array.

array.empty?

This returns true if the array is empty; false otherwise.

array.include?(item)

This returns true if the array contains the item; false otherwise.

array.any? {|item| criteria }

This returns true if any item in the array matches the block criteria; false otherwise.

array.all? {|item| criteria }

This returns true if all items in the array match the block criteria; false otherwise
Hopefully if you are new to the Ruby or you have been doing some Rails work but have not really dug into Ruby, this very basic overview will spark deeper interest into the powerful (and very fun) world of Ruby.
http://carlosgabaldon.com/ruby/ruby-arrays/

books

• Software Architecture: Foundations, Theory, and Practice
• Pragmatic Thinking and Learning: Refactor Your Wetware (Pragmatic Programmers)
• The Passionate Programmer: Creating a Remarkable Career in Software Development
• Mastering the Requirements Process
• Absolute FreeBSD: The Complete Guide to FreeBSD
• Apache Cookbook: Solutions and Examples for Apache Administrators
• From Geek To Peak: Your First 365 Days As A Technical Consultant — wish I had this book when I started consulting
• The Back of the Napkin: Solving Problems and Selling Ideas with Pictures — great book for selling your idea to your client
• JavaScript: The Good Parts
• TextMate: Power Editing for the Mac
• The Ruby Programming Language
• Programming Erlang: Software for a Concurrent World
• Practices of an Agile Developer: Working in the Real World
• The Well-Grounded Rubyist

osx tools

http://carlosgabaldon.com/2010/05/30/rubyist-os-x-dev-setup/

Rails Common Commands

rvm ruby-1.9.2-p0 - ruby version manager; switches to Ruby 1.9.2
rvm --default ruby-1.9.2-p0 - ruby version manager; sets 1.9.2 as default
rvm system - ruby version manager; switches to Ruby 1.87
rails new - creates a new Rails application
rails server [s] - launches WEBrick web server
rails generate [g] - lists available generators
rails generate controller --help - provides usage documentation
rails generate model --help - provides usage documentation
rails generate migration --help - provides usage documentation
rails destroy controller [Name] - undo generate controller
rails destroy model [Name] - undo generate model
rails generate scaffold [Name] --skip --no-migration - scaffold skipping existing files
rake db:migrate - runs database migrations
rake db:test:clone - clones current environment's database schema
rake db:test:purge - empties the test database
rake routes - list of all of the available routes
rake -T - list of rake commands
git init - creates git repo
git add . - adds all files to working tree
git commit -m "Initial commit" - commits files to repo
git status - status of the working tree
git push origin master - merges local repo with remote
git checkout -b new-dev - creates topic branch
git checkout master - switches to master branch
git merge new-dev - merges new-dev branch into master branch
git checkout -f - undo uncommitted changes on working tree
git branch - list branches
git branch -d modify-README - deletes branch
git mv README README.markdown - renames files using move command
heroku create - creates app on Heroku servers
git push heroku master - pushs app on to Heroku servers
heroku rake db:migrate - runs database migrations on Heroku servers
heroku pg:reset --db SHARED_DATABASE_URL - deletes database file
heroku db:push - transfer an existing database to Heroku.
rails console - command line interface to Rails app
rails dbconsole - command line database interface
bundle install - installs gems from Gemfile

a nice sinatra tutorial

http://carlosgabaldon.com/ruby/singing-with-sinatra/

Compass CSS Authoring Framework.

http://compass-style.org/install/

Sintra quick realod on request

require 'rubygems'
require 'sinatra'

configure :development do
Sinatra::Application.reset!
use Rack::Reloader
end

Mouseover DOM Inspector,

Bookmark DOM Inspector



http://slayeroffice.com/tools/modi/v2.0/modi_help.html

JavaScript Reference

JavaScript Reference


https://developer.mozilla.org/en/JavaScript/Reference

.oh-my-zsh

	export ZSH=$HOME/.oh-my-zsh
	export ZSH_THEME="bruce"
	plugins=(git osx dribbble)
	source $ZSH/oh-my-zsh.sh
	export DISABLE_AUTO_UPDATE="true"
	################################################################################
	# PATH Setup
	export PATH=/usr/local/bin:/bin:/usr/sbin:/sbin:/usr/bin:/usr/local/sbin
	export PATH=$PATH:/usr/local/git/bin
	export PATH=$PATH:/usr/local/mongodb/bin
	export PATH=$PATH:/Applications/MAMP/bin/php5.3/bin/
	export PATH=$PATH:/opt/local/bin
	export PATH=$PATH:/Library/PostgreSQL/9.0/bin
	export PATH=$PATH:/Developer/usr/bin
	export PATH=$PATH:$HOME/.bin
	export PATH=$PATH:$rvm_path/bin
	export PATH=$PATH:bin
	export PATH=$PATH:/usr/local/texlive/2010/bin/x86_64-darwin
	################################################################################
	# Git completion
	autoload bashcompinit
	bashcompinit
	source `brew --prefix`/etc/bash_completion.d
	################################################################################
	# Aliases
	alias todo="grep -r 'TODO' *"
	alias wtc="git commit -m \"$(curl -s http://whatthecommit.com/ | grep '<p>' |cut -c 4-)\""
	alias bitch,="sudo"
	alias reload!="source ~/.zshrc"
	alias cmi="./configure && make && sudo make install"
	alias pg_start="pg_ctl -D /usr/local/var/postgres start"
	alias pg_restart="pg_ctl -D /usr/local/var/postgres restart -s -m fast"
	alias pg_stop="pg_ctl -D /usr/local/var/postgres stop -s -m fast"
	alias tunnel="ssh -D 8080 -C -N bruce@vps.brucespang.com"
	# Fix zsh's autocompletion
	alias dl="nocorrect dribbble log"
	alias dr="nocorrect dribbble"
	alias status='git status'
	alias pull="nocorrect pull"
	alias htty="nocorrect htty"
	alias terminitor='nocorrect terminitor'
	alias mvim='nocorrect mvim'
	alias knife="nocorrect knife"
	alias gsed="nocorrect gsed"
	alias rebar="nocorrect rebar"
	# chmod
	alias rw-='chmod 600'
	alias rwx='chmod 700'
	alias r--='chmod 644'
	alias r-x='chmod 755'
	function irc () {
	ssh -t bruce@fever.brucespang.com "screen -r irc || screen -S irc irssi"
	}
	# Start or resume irssi
	function irssi () {
	if grep irssi <<< `screen -ls`; then
	screen -x irssi
	else
	screen -S irssi irssi
	fi
	}
	# Quickly create a pow app
	function pow () {
	if [ ! ${1} ]
	then
	current_dir=`pwd`
	name=`basename $current_dir`
	ln -s $current_dir $HOME/.pow/$name
	elif [ $1 = "start" ]
	then
	echo "starting..."
	launchctl load "$HOME/Library/LaunchAgents/cx.pow.powd.plist"
	sudo launchctl load /Library/LaunchDaemons/cx.pow.firewall.plist
	elif [ $1 = "stop" ]
	then
	echo "stopping..."
	launchctl unload "$HOME/Library/LaunchAgents/cx.pow.powd.plist"
	sudo launchctl unload /Library/LaunchDaemons/cx.pow.firewall.plist
	fi
	}
	# Quickly evaluate erlang expressions
	function erlval() {
	erl -eval $1 -noshell -s init stop
	}
	function safesleep() {
	if [ ! ${1} ]
	then
	sudo pmset -a hibernatemode 3
	sudo nvram "use-nvramrc?"=true
	elif [ $1 = "enable" ]
	then
	sudo pmset -a hibernatemode 3
	sudo nvram "use-nvramrc?"=true
	elif [ $1 = "disable" ]
	then
	sudo pmset -a hibernatemode 0
	sudo nvram "use-nvramrc?"=false
	fi
	}
	################################################################################
	# Options
	# history:
	setopt append_history # append history list to the history file (important for multiple parallel zsh sessions!)
	setopt SHARE_HISTORY # import new commands from the history file also in other zsh-session
	setopt extended_history # save each command's beginning timestamp and the duration to the history file
	setopt hist_ignore_all_dups # If a new command line being added to the history
	# list duplicates an older one, the older command is removed from the list
	setopt hist_ignore_space # remove command lines from the history list when
	# the first character on the line is a space
	HISTFILE=$HOME/.zsh_history
	HISTSIZE=5000
	SAVEHIST=10000 # useful for setopt append_history
	setopt auto_cd # if a command is issued that can't be executed as a normal command,
	# and the command is the name of a directory, perform the cd command to that directory
	setopt extended_glob # in order to use #, ~ and ^ for filename generation
	# grep word *~(*.gz|*.bz|*.bz2|*.zip|*.Z) ->
	# -> searches for word not in compressed files
	# don't forget to quote '^', '~' and '#'!
	setopt longlistjobs # display PID when suspending processes as well
	setopt notify # report the status of backgrounds jobs immediately
	setopt hash_list_all # Whenever a command completion is attempted, make sure
	# the entire command path is hashed first.
	setopt nohup # and don't kill them, either
	# setopt auto_pushd # make cd push the old directory onto the directory stack.
	setopt nonomatch # try to avoid the 'zsh: no matches found...'
	setopt nobeep # avoid "beep"ing
	setopt pushd_ignore_dups # don't push the same dir twice.
	setopt noglobdots # * shouldn't match dotfiles. ever.
	setopt long_list_jobs # List jobs in long format
	################################################################################
	# Application settings
	# Kiji settings
	export RUBY_HEAP_MIN_SLOTS=1000000
	export RUBY_HEAP_SLOTS_INCREMENT=1000000
	export RUBY_HEAP_SLOTS_GROWTH_FACTOR=1
	export RUBY_HEAP_FREE_MIN=500000
	export JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Home/
	export SCALA_HOME=/usr/local/Cellar/scala/2.9.1
	export PATH=$PATH:$SCALA_HOME/bin
	# Avoid errors with things uncompatable with LLVM
	export CC=/usr/bin/gcc-4.2
	# Vim keybindings
	#bindkey -v
	# z setup
	. `brew --prefix`/etc/profile.d/z.sh
	function precmd () {
	z --add "$(pwd -P)"
	}
	[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"

view raw gistfile1.sh hosted with ❤ by GitHub

https://github.com/brucespang/dotfiles

Ruby on Rails on DreamHost Installation

Ruby on Rails on DreamHost Installation
http://www.fogel.ca/2009/02/10/ruby-on-rails-on-dreamhost-installation/

Play framework (Java)

git clone git://github.com/playframework/play.git
&&
cd play/framework &&
ant
&&
cd ..
&&
./play new myApp
&&
testApp
&&
./play run myApp/



In myApp/confing change the port to 9999 (default it 9000)

http://www.playframework.org/documentation/1.2.3/ide


Play and scala

http://www.jamesward.com/2011/10/19/running-play-framework-scala-apps-on-heroku

	ioannis-kolovos:hello ioannis$ heroku keys
	=== 2 keys for yannis.kolovos@gmail.com
	ssh-rsa AAAAB3NzaC...dXgcLhNw== yannis.kolovos@gmail.com
	ssh-rsa AAAAB3NzaC...eI0zlbmQ== yannis.kolovos@gmail.com
	ioannis-kolovos:hello ioannis$ git status
	# On branch master
	# Untracked files:
	# (use "git add ..." to include in what will be committed)
	#
	# .classpath
	# .project
	# .settings/
	# build.xml
	# eclipse/
	# test-result/
	# tmp/
	nothing added to commit but untracked files present (use "git add" to track)
	ioannis-kolovos:hello ioannis$ git add .
	ioannis-kolovos:hello ioannis$ git push heroku master
	Counting objects: 31, done.
	Delta compression using up to 4 threads.
	Compressing objects: 100% (25/25), done.
	Writing objects: 100% (31/31), 38.88 KiB, done.
	Total 31 (delta 1), reused 0 (delta 0)
	-----> Heroku receiving push
	-----> Play! app detected
	-----> Installing Play!..... done
	-----> Installing ivysettings.xml..... done
	-----> Building Play! application...
	~ _ _
	~ _ __ | | __ _ _ _| |
	~ | '_ \| |/ _' | || |_|
	~ | __/|_|\____|\__ (_)
	~ |_| |__/
	~
	~ play! 1.2.3, http://www.playframework.org
	~
	1.2.3
	Building Play! application at directory ./
	Resolving dependencies: .play/play dependencies ./ --forceCopy --silent -Duser.home=/tmp/build_2a16c95ct9pxx 2>&1
	~ Resolving dependencies using /tmp/build_2a16c95ct9pxx/conf/dependencies.yml,
	~
	:: loading settings :: file = /tmp/build_2a16c95ct9pxx/.ivy2/ivysettings.xml
	~
	~ No dependencies to install
	~
	~ Done!
	~
	Precompiling: .play/play precompile ./ --silent 2>&1
	Listening for transport dt_socket at address: 8000
	05:47:52,430 INFO ~ Starting /tmp/build_2a16c95ct9pxx
	05:47:53,068 INFO ~ Precompiling ...
	05:47:57,090 INFO ~ Done.
	-----> No Procfile found. Will use the following default process:
	play run --http.port=$PORT $PLAY_OPTS
	-----> Discovering process types
	Procfile declares types -> (none)
	Default types for Play! -> web
	-----> Compiled slug size is 26.2MB
	-----> Launching... done, v5
	http://blazing-sunset-9132.herokuapp.com deployed to Heroku
	To git@heroku.com:blazing-sunset-9132.git
	* [new branch] master -> master
	ioannis-kolovos:hello ioannis$ heroku open

view raw gistfile1.bat hosted with ❤ by GitHub

--> http://blazing-sunset-9132.herokuapp.com/application/sayhello?myName=say+hello

demos

http://css-tricks.com/downloads/


jquery plugin http://lab.smashup.it/flip/

template

class my_page
{
    public function template($name=null)
    {
        static $template = 'templates/page.html';
        if ($name) $template = "templates/{$name}.html";
        else return $template;
    }
}

$p = new my_page;
$p->template('product');
include $p->template();

php timeago

<?php
## alex at nyoc dot net
## Feel free to better for your needs

function timeago($referencedate=0, $timepointer='', $measureby='', $autotext=true){    ## Measureby can be: s, m, h, d, or y
    if($timepointer == '') $timepointer = time();
    $Raw = $timepointer-$referencedate;    ## Raw time difference
    $Clean = abs($Raw);
    $calcNum = array(array('s', 60), array('m', 60*60), array('h', 60*60*60), array('d', 60*60*60*24), array('y', 60*60*60*24*365));    ## Used for calculating
    $calc = array('s' => array(1, 'second'), 'm' => array(60, 'minute'), 'h' => array(60*60, 'hour'), 'd' => array(60*60*24, 'day'), 'y' => array(60*60*24*365, 'year'));    ## Used for units and determining actual differences per unit (there probably is a more efficient way to do this)
   
    if($measureby == ''){    ## Only use if nothing is referenced in the function parameters
        $usemeasure = 's';    ## Default unit
   
        for($i=0; $i<count($calcNum); $i++){    ## Loop through calcNum until we find a low enough unit
            if($Clean <= $calcNum[$i][1]){        ## Checks to see if the Raw is less than the unit, uses calcNum b/c system is based on seconds being 60
                $usemeasure = $calcNum[$i][0];    ## The if statement okayed the proposed unit, we will use this friendly key to output the time left
                $i = count($calcNum);            ## Skip all other units by maxing out the current loop position
            }       
        }
    }else{
        $usemeasure = $measureby;                ## Used if a unit is provided
    }
   
    $datedifference = floor($Clean/$calc[$usemeasure][0]);    ## Rounded date difference
   
    if($autotext==true && ($timepointer==time())){
        if($Raw < 0){
            $prospect = ' from now';
        }else{
            $prospect = ' ago';
        }
    }
   
    if($referencedate != 0){        ## Check to make sure a date in the past was supplied
        if($datedifference == 1){    ## Checks for grammar (plural/singular)
            return $datedifference . ' ' . $calc[$usemeasure][1] . ' ' . $prospect;
        }else{
            return $datedifference . ' ' . $calc[$usemeasure][1] . 's ' . $prospect;
        }
    }else{
        return 'No input time referenced.';
    }
}


$gmtimenow = time() - (int)substr(date('O'),0,3)*60*60; 


echo timeago($gmtimenow);

css tools web2

tools: http://pelfusion.com/tools/7-useful-css3-code-generators/

css 3 selectors:
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

How to save your youtube videos with javascript

index.php

<?php 
/**
* Save favorite youtube links in one place
 *
* @author Ioannis Kolovos
 * @version $Id$
* @copyright netWorks Inc!, 25 November, 2011
 * @package default
*javascript link: javascript: var l = window.location;  var t = escape(document.title); window.location ="HOST/?l="+ l + "&t="+t+"&h=02ce4c679b9a06815a8644a5d911e46b";
**/



$date = date('l jS \of F Y h:i:s A');
$url= $_GET[l];
$tmp= str_replace("::", " " , $_GET[t]);
$title = str_replace("- YouTube", "", $tmp);
$hash= $_GET[h];
$vdb = "videos.txt";
$line = file_get_contents($vdb);
$host = "/";
$validation = "02ce4c679b9a06815a8644a5d911e46b";
$cache ="./cache/";
$cache_imgs = scandir($cache);

 
function getImage($id)
{
 global $cache_imgs, $cache;

 if (in_array($id .".jpg", $cache_imgs)){
  return $cache.$id .".jpg";
 }


 else {
  $thumb = "http://img.youtube.com/vi/". $id. "/0.jpg";
  $get_image = file_get_contents($thumb);
  $local_image = $cache.$id.".jpg";
  file_put_contents($local_image, $get_image, FILE_APPEND | LOCK_EX);
  return $local_image;

 }



}



if (isset($hash) && $hash == $validation) {

 parse_str( parse_url( $url, PHP_URL_QUERY ), $getdata );
 $data = $getdata['v'];

 if ( preg_match( "/^" . $data . "/", $line ) )
 {
  print "<b>Video posted allready</b><br/>";
  exit();
 } else {
  $stringData = $title . "::" . $data . "::" . $date . "#";
  file_put_contents($vdb, $stringData, FILE_APPEND | LOCK_EX);
  echo"<meta http-equiv=\"refresh\" content=\"0; url= $host\">";
  echo "<div style=\"text-aling:center\"><h1>Video saved :)</h1></div>"; 



 }
}

else {


 ?>

 <!doctype html public "�">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  <title dir="ltr">:: Emergency Favorite Songs ::</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <link rel="stylesheet" media="screen" href="style.css?v=2" >
  <script src="http://code.jquery.com/jquery-latest.js"></script>

 <!--http://johnkolovos.blogspot.com/2011/11/how-to-save-youtube-links-in-your-page.html -->
 </head>
 <body>

  <?php

 $info = explode("#", $line);
 array_reverse($info);
 $size = count($info)-1;

 $i = 0;
 echo $i;

 foreach ($info as $value) { 
  if ($i<$size) {

   $video = split("::", $value); 
   ?>

   <div class="box">
    <!-- <h1><?php echo $video[0]; ?></h1>-->


   <?php 



   ?>

   <a  href="#"><img   id="<?php echo  $video[1]; ?>" style="height: 200; width: 200px"  src="<?php echo getImage( $video[1]); ?>" /></a>

   <p id="<?php echo  $video[1]; ?>_p" title="@<?php echo  $video[2]; ?>"><?php echo $video[0]; ?></p>



   <div id="<?php echo  $video[1]; ?>_" style="display:none">
   <object style="height: 200; width: 200px" >
    <param name="movie" value="http://www.youtube.com/v/<?php echo $video[1]; ?>?version=3&feature=player_detailpage&autoplay=1">
   <param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always">
    <embed src="http://www.youtube.com/v/<?php echo  $video[1]; ?>?version=3&feature=player_detailpage&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="200" height="200"></object>

   </div>


   </div>





   <?php }

   $i++; 

  }}


  ?>


  <script>
  $('img').click(function () {   
   var id =$(this).attr('id');
   $(this).fadeOut("fast");
   $('#'+id+'_p').css("display", "none");
   $('#'+id+'_').css("display", "inline");
   return false;

  });
  </script>

style.css

.video {
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
text-align:center;
padding-top:10px;

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6-IE9 */

 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
padding-bottom:20px;

 
  font-family:Georgia
}

p{

margin-top:-35px;
padding-bottom:10px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  
}
 

h1 {
padding-top:-35px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 

}

body{
background:#D1D1D1;
color:#323232;
 
 
  
 text-align:center;
 text-shadow:0 1px 0 #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 font-size: 13px;


}

.video {
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
text-align:center;
padding-top:10px;

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6-IE9 */

 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
padding-bottom:20px;

 
  font-family:Georgia
}

p{

margin-top:35px;
 
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  
}
 

h1 {
padding-top:-35px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 

}

body{
background:#D1D1D1;
color:#323232;
 
 
  
 text-align:center;
 text-shadow:0 1px 0 #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 font-size: 13px;


}

.box {
float:left;
width: 200px;
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */

height: 200px;
margin:10px;

 
 
}
 

javascript: var l = window.location;  var t = escape(document.title); window.location ="HOST/?l="+ l + "&t="+t+"&h=02ce4c679b9a06815a8644a5d911e46b"

drag drop link in bookmark : Save video


http://www.net-works.gr/music/

UPDATE:
javascript:%20var%20l%20=%20window.location.href.replace("#","").replace("!",%20"");;%20%20var%20t%20=%20escape(document.title);%20window.location%20="HOST/?l="+%20l%20+%20"&t="+t+"&h=02ce4c679b9a06815a8644a5d911e46b"

window.localStorage

// See if the property that we want is pre-cached in the localStorage
if ( window.localStorage !== null && window.localStorage.gameDict ) {
  dictReady( window.localStorage.gameDict );

// Load in the dictionary from the server
} else {
  jQuery.ajax({
    url: cdnHREF + "dict/dict.js",
    dataType: "jsonp",
    jsonp: false,
    jsonpCallback: "dictLoaded",
    success: function( txt ) {
      // Cache the dictionary, if possible
      if ( window.localStorage !== null ) {
        window.localStorage.gameDict = txt;
      }

      // Let the rest of the game know
      // that the dictionary is ready
      dictReady( txt );
    }
    // TODO: Add error/timeout handling
  });
}

scripts

Moment.js


http://momentjs.com/
http://listjs.com/examples/standard.html
http://gitlabhq.com/index.html

http://dhtmlx.github.com/message/

animate.css
http://daneden.me/animate/#cta
http://peerbind.com/


http://simplemodal.plasm.it/#examples

fire and assert key combination strings against elements and events
http://keithcirkel.co.uk/jwerty/
https://github.com/keithamus/jwerty/blob/master/README-DETAILED.md

https://github.com/jeresig/jquery.hotkeys

image class
http://imagine.readthedocs.org/en/latest/index.html
http://stefangabos.ro/php-libraries/zebra-image/

imagemapster
http://www.outsharked.com/imagemapster/
https://github.com/jamietre/ImageMapster
map->
http://socrtwo.info/image_map.htm
http://sourceforge.net/projects/inkscapemap/

http://www.boutell.com/mapedit/

add sliding (aka "floating") panel functionality to your web page
http://simianstudios.com/portamento/

restler
http://luracast.com/products/restler/
https://github.com/Luracast/Restler
http://singmood.com/Source.zip

http://www.webresourcesdepot.com/15-must-have-bookmarklets-for-web-designers-and-developers/

alert -->sticky
http://thrivingkings.com/sticky/
http://thrivingkings.com/apprise/


form
http://thrivingkings.com/formly/

css-->
http://lea.verou.me/chainvas/

read-->
http://perfectionkills.com/
http://ejohn.org/category/blog/page/2/

http://kangax.github.com/fabric.js/demos/


READ---->http://jsninja.com/

jquery.transit

http://ricostacruz.com/jquery.transit/

Geolocation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  <title>Getting the user location via  IP Geo lookup</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
  <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" type="text/css">
  <style type="text/css" media="screen">
  body,html{
    background:#333;
    color:#ccc;
  }
  #doc{
    background:#f8f8f8;
    color:#333;
    border:1em solid #f8f8f8;
    font-family:georgia,serif;
  }
  h1{
    font-size:180%;
    color:#363;
  }
  h2{
    font-size:150%;
    color:#393;
  }
  h3{
    font-size:140%;
    color:#696;
  }
  p,li{font-size:130%;}
  ul{margin:0 0 0 1.5em;}
  li{padding:.2em 0;}
  li strong{
    width:8em;
    float:left;
    display:block;
  }
  a{color:#363;}
  #ft p{
    font-size:80%;
    text-align:right;
  }
  #map{
    height:300px;
    width:300px;
    position:relative;
  }
  #map span{
    height:280px;
    width:280px;
    background:rgba(0,0,0,.5);
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    font-size:200%;
    padding:10px;
    overflow:hidden;
  }
  #map span strong{display:block;color:#0f0;}
  </style>
</head>
<body>
<div id="doc" class="yui-t7">

  <div id="hd" role="banner"><h1>Getting location from IP</h1></div>
  <div id="bd" role="main">
    <h2>Map and info</h2>
       <div class="yui-g">
         <div class="yui-u first"><div id="map"></div>
      </div>
      <div class="yui-u" id="info"></div>
    </div>

    <h2>Thanks</h2>
    <p>Thanks to <a href="http://www.maxmind.com">Maxmind</a> for the Geo IP database.</p>
  </div>
  <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com">Chris Heilmann</a></p></div>
</div>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>

<script>
(function(){

  var info = document.getElementById('info');
  var lat = geoip_latitude();
  var lon = geoip_longitude();
  var city = geoip_city();
  var out = '<h3>Information from your IP</h3>'+ 
            '<ul>'+
            '<li>Latitude: ' + lat + '</li>'+
            '<li>Longitude: ' + lon + '</li>'+
            '<li>City: ' + city + '</li>'+
            '<li>Region: ' + geoip_region() + '</li>'+
            '<li>Region Name: ' + geoip_region_name() + '</li>'+
            '<li>Postal Code: ' + geoip_postal_code() + '</li>'+
            '<li>Country Code: ' + geoip_country_code() + '</li>'+
            '<li>Country Name: ' + geoip_country_name() + '</li>'+
            '</ul>';
  info.innerHTML = out;
  var url = 'http://maps.google.com/maps/api/staticmap?center='+
            lat+','+lon+'&sensor=false&size=300x300&maptype=roadmap&key='+
            'ABQIAAAAijZqBZcz-rowoXZC1tt9iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQBCa'+
            'F1R_k1GBJV5uDLhAKaTePyQ&markers=color:blue|label:I|'+lat+
            ','+lon+'6&visible='+lat+','+lon+'|'+(+lat+1)+','+(+lon+1);
  var map = document.getElementById('map');
  map.innerHTML = '<img src="'+url+'" alt="'+city+'">';
  
})();
</script>
</body>
</html>

http://isithackday.com/hacks/geo/js-location.html

JavaScript_syntax

alert(a || b);    // When a is true, there is no reason to evaluate b.
alert(a && b);    // When a is false, there is no reason to evaluate b.
alert(c ? t : f); // When c is true, there is no reason to evaluate f.

alert(a || b); // if a is true, return a, otherwise return b
alert(a && b); // if a is false, return a, otherwise return b

var s = t || "(default)"; // assigns t, or the default value if t is null, empty, etc.  



str = "ab" + "cd";   // "abcd"
str += "e";          // "abcde"
 
str2 = "2"+2         // "22", not "4" or 4.


// SWICH: 

switch (expr) {
   case SOMEVALUE:
     //statements;
     break;
   case ANOTHERVALUE:
     //statements;
     break;
   default:
     //statements;
     break;
 }  




var z;
var  x= z || 1;


switch (x) {  
   case 2:  
    alert("");
     break;  
   case 1:  
    alert(x);

   default:  
     //statements;  
     break;  
 } 



//IN:

 

for (var property_name in some_object) {
   //statements using some_object[property_name];
 } 

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
alert(person[x] + " ");
}


//Object literals and array literals allow one to easily create flexible data structures:

var myStructure = {
  name: {
    first: "Mel",
    last: "Smith"
  },
  age: 33,
  hobbies: ["chess", "jogging"]
}; 

 --------------------



var myStructure = {  
  name: {  
    first: "Mel",  
    last: "Smith"  
  },  
  age: 33,  
  hobbies: ["chess", "jogging"]  
};   


for (x in myStructure)
{
alert(myStructure[x] + " ");
}

//Object
//33
//chess,jogging




alert(myStructure.name.first);

//Mel



alert(myStructure.hobbies[0]);
//chess

Javascript Object Literals

// Object Literals

timObject = {
 property1 : "Hello",
 property2 : "MmmMMm",
 property3 : ["mmm", 2, 3, 6, "kkk"],
 method1 : function(){alert("Method had been called" + this.property1)}
};

timObject.method1();
alert(timObject.property3[2]) // will yield 3

OR------------------------
 
 
 
 
 
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"

person.run = function() {
 this.state = "running"
 this.speed = "4ms^-1"
}
 
 
http://mckoss.com/jscript/object.htm 

Protype js example

 

function A()

{

    this.x = 1;

}

A.prototype.DoIt = function()    // Define Method

{

    this.x += 1;

}

function B()

{

    this.x = 1;

}

B.prototype.DoIt = function()    // Define Method

{

    this.x += 2;

}

a = new A;

b = new B;

a.DoIt();

b.DoIt();

document.write(a.x + ', ' + b.x);

 

 

Plain Javascript

// Object Literals

timObject = {
 property1 : "Hello",
 property2 : "MmmMMm",
 property3 : ["mmm", 2, 3, 6, "kkk"],
 method1 : function(){alert("Method had been called" + this.property1)}
};

timObject.method1();
alert(timObject.property3[2]) // will yield 3

var circle = { x : 0, y : 0, radius: 2 } // another example

// nesting is no problem.
var rectangle = { 
 upperLeft : { x : 2, y : 2 },
 lowerRight : { x : 4, y : 4}
}

alert(rectangle.upperLeft.x) // will yield 2 

 //With comments

/* Finds the lowest common multiple of two numbers */
function LCMCalculator(x, y) { // constructor function
    var checkInt = function (x) { // inner function
        if (x % 1 !== 0) {
            throw new TypeError(x + " is not an integer"); // throw an exception
        }
        return x;
    };
    this.a = checkInt(x)
    // ^ semicolons are optional
    this.b = checkInt(y);
}
// The prototype of object instances created by a constructor is 
// that constructor's "prototype" property.
LCMCalculator.prototype = { // object literal
    constructor: LCMCalculator, // when reassigning a prototype, set the constructor property appropriately
    gcd: function () { // method that calculates the greatest common divisor
        // Euclidean algorithm:
        var a = Math.abs(this.a), b = Math.abs(this.b), t;
        if (a < b) {
            // swap variables
            t = b; b = a;  a = t; 
        }
        while (b !== 0) {
            t = b;
            b = a % b;
            a = t;
        }
        // Only need to calculate GCD once, so "redefine" this method.
        // (Actually not redefinition - it's defined on the instance itself,
        // so that this.gcd refers to this "redefinition" instead of LCMCalculator.prototype.gcd.)
        // Also, 'gcd' == "gcd", this['gcd'] == this.gcd
        this['gcd'] = function() { 
            return a; 
        };
        return a;
    },
    "lcm"/* can use strings here */: function() {
        // Variable names don't collide with object properties, e.g. |lcm| is not |this.lcm|.
        // not using |this.a * this.b| to avoid FP precision issues
        var lcm = this.a / this.gcd() * this.b; 
        // Only need to calculate lcm once, so "redefine" this method.
        this.lcm = function() { 
            return lcm; 
        };
        return lcm;
    },
    toString: function () {
        return "LCMCalculator: a = " + this.a + ", b = " + this.b;
    }
};
 
//define generic output function; this implementation only works for web browsers
function output(x) { document.write(x + "
"); }
 
// Note: Array's map() and forEach() are defined in JavaScript 1.6.
// They are used here to demonstrate JavaScript's inherent functional nature.
[[25, 55],[21, 56],[22, 58],[28, 56]].map(function(pair) { // array literal + mapping function
    return new LCMCalculator(pair[0], pair[1]);
}).sort(function(a, b) { // sort with this comparative function
    return a.lcm() - b.lcm();
}).forEach(function(obj) {
    output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
});

 

 
//--------------------------------------------


function A()
{
    this.x = 1;
}
 
A.prototype.DoIt = function()    // Define Method
{
    this.x += 1;
}
 
function B()
{
    this.x = 1;
}
 
B.prototype.DoIt = function()    // Define Method
{
    this.x += 2;
}
 
a = new A;
b = new B;
 
a.DoIt();
b.DoIt();
document.write(a.x + ', ' + b.x);

.blind

     
     
     

.blind handles event(s)

 

 

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

$('#foo').bind('EVENT1 EVENT2', function() {
//what it will happens
}); 

 

OR

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

$('#foo').bind('click', function() {
  alert($(this).text());
}); 

 

 

passing data

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
}); 

 

 

 

function foo(e) {

 console.log(e.type);

};

$('li').bind({

  'click': foo,

  'mouseover': foo,

  'mouseout': foo

});

 

 

 

Load example with images

    
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Getting pictures!</title>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'helvetica neue', arial, helvetica;
}

a img {
  border: 0;
}

img {
/*  border: 5px solid #000;*/
/*  margin: 10px;*/
}

ul {
  width: 315px;
  height: 100%;
  overflow-y: auto;
  white-space: nowrap;
  list-style: none;
}

li {
  display: block;
  float: left;
  height: 75px;
  cursor: pointer;
}

#loadingStatus {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px 10px;
  background: #c00;
  color: #fff;
}

#main {
  position: fixed;
  left: 360px;
  top: 50px;
}

#main div {
  border: 10px solid #000;
  height: 400px;
  width: 400px;
  font-family: georgia;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,.3);
  font-size: 38px;
  text-align: center;
  line-height: 400px;
}

#main img {
  border: 10px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
}

#next { margin: 20px; }

/* via https://github.com/ubuwaits/css3-buttons */
button.cupid-blue {
  background: #d7e5f5;
  background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
  border-top: 1px solid #abbbcc;
  border-left: 1px solid #a7b6c7;
  border-bottom: 1px solid #a1afbf;
  border-right: 1px solid #a7b6c7;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: inset 0 1px 0 0 #fff;
  -webkit-box-shadow: inset 0 1px 0 0 #fff;
  box-shadow: inset 0 1px 0 0 #fff;
  color: #1a3e66;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 0 7px 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  width: 150px;
}

button.cupid-blue:hover {
  background: #ccd9e8;
  background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
  border-top: 1px solid #a1afbf;
  border-left: 1px solid #9caaba;
  border-bottom: 1px solid #96a3b3;
  border-right: 1px solid #9caaba;
  -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
  -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
  box-shadow: inset 0 1px 0 0 #f2f2f2;
  color: #163659;
  cursor: pointer;
}

button.cupid-blue:active {
  border: 1px solid #8c98a7;
  -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
}


</style>
</head>
<body>
<div id="loadingStatus">Loading</div>
<p><button id="next" class="cupid-blue">Next group</button></p>
<ul id="pictures">
  <li><img src="http://farm5.static.flickr.com/4132/5176187907_25d26f48f0_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4133/5176793736_d071069871_s.jpg"></li>

<li><img src="http://farm5.static.flickr.com/4148/5176790372_c5a6a3cc7a_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4103/5176188725_397e641c7f_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4110/5176791934_bb21e4b523_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4130/5176184917_92e4b89148_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4083/5176794362_c7543d2e29_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4128/5176189635_4030795e8d_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4129/5176789954_4f4e5edd2f_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4132/5176187515_27853af67d_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4128/5176792872_c146b28478_s.jpg"></li>

<li><img src="http://farm5.static.flickr.com/4107/5176790750_8c1471a753_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4110/5176789130_0d876b8489_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4132/5176788284_a98e4e92a0_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4147/5176789562_ed5e339f57_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4145/5176786398_d8fef3b0e1_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4147/5176181843_8c58178ea9_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4106/5176184049_bc11cbb7a9_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4126/5176767160_27d7c6346b_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4107/5176784060_3a55131a91_s.jpg"></li>

</ul>
<div id="main">
  <div>Click on a picture</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
var flickrURL = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&page=%page%&per_page=20&api_key=18702ea1538bc199e2c7e1d57270cd37&user_id=38257258%40N00&tags=fullfrontalconf&format=json&jsoncallback=?';

var $pictures = $('#pictures'),
    $main = $('#main'),
    $next = $('#next'),
    html = [],
    page = 1;

// $pictures.find('img').click(function () {
$pictures.delegate('img', 'click', function () {
  $('#loadingStatus').fadeIn();
  var src = this.src.replace(/_s/, '');
  $('<img>').attr('src', src).load(function () {
    $main.empty().append(this);
    $('#loadingStatus').stop(true, true).fadeOut();
  });
});

function getPage(page) {
  $.getJSON(flickrURL.replace(/%page%/, page), function (data) {
    html = [];
    $.each(data.photos.photo, function (i, photo) {
      html.push('<li><img src="http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_s.jpg" /></li>');
    });

    $pictures.empty().append(html.join(''));
    $('#loadingStatus').hide();  
  });
}

$next.click(function () {
  getPage(++page);
});

</script>
</body>
</html>

Load example

 

$(function () {
  

//Textfield's event

$('#name').keyup(function () {

 

//where to store      --Load from the server   --where to store again --params 

$('#results ul').load('load-example.php #results ul li', { name : this.value });
//Load load-example.php from the server and store it in #results ul with this params 

//{name:this.value} with is this inputs value  

 

 });
});

 

 

 

 

 

http://www.yensdesign.com/tutorials/contentajax/

 

parse and load html :)

</fieldset>
    </form>
    <div id="results">
        <h2>Results</h2>

<ul>
            <li>Nothing found for "tahoma"</li>
        </ul>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
   $('#name').keyup(function () {
       $('#results ul').load('load-example.php #results li', { name : this.value });
   });
});
</script>
</body>
</html> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery load example</title>
<style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; color: #000; padding: 20px;}
input, textarea { font-family: Arial; font-size: 100%; padding: 3px; margin-left: 10px; }
#wrapper { width: 600px; margin: 0 auto; }
</style>
</head>
<body>
<div id="wrapper">
    <h1>Font Finder</h1>
    <form action="load-example.php" method="post" accept-charset="utf-8">
        <fieldset>
            <legend>Find a font</legend>
            <label for="name">Name</label><input type="text" name="name" value="tahoma" id="name" />
            <input type="submit" value="Search &rarr;" />
        </fieldset>
    </form>
    <div id="results">
        <h2>Results</h2>
        <ul>
            <li>Nothing found for "tahoma"</li>
        </ul>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
   $('#name').keyup(function () {
       $('#results ul').load('load-example.php #results li', { name : this.value });
   });
});
</script>
</body>
</html>
 

jQuery Clone

    
1
    
2
    
3
    
4
    
5
foo - 1
foo - 2
foo - 3
foo - 4
foo - 5
bar - 1
bar - 2
bar - 3
bar - 4
bar - 5

jQuery After and before

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").after("<b>Hello</b>");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<b>Hello</b><p>I would like to say: </p>
<script>
$("p").after( $("b") );
</script>
</body>
</html> 

BEFORE

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<p> is what I said...</p>
<script>
$("p").before("<b>Hello</b>");
</script>
</body>
</html>

jQuery Serialize

jQuery Serialize

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]

Note: Because some frameworks have limited ability to parse serialized arrays, we should exercise caution when passing an obj argument that contains objects or arrays nested within another array.
In jQuery 1.4 HTML5 input elements are serialized, as well.
We can display a query string representation of an object and a URI-decoded version of the same as follows:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

The values of recursiveEncoded and recursiveDecoded are alerted as follows:
a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

Example : Serialize a key/value object.

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<div id="results"></div>
<script>
var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);
</script>
</body>
</html>

=========================================================================

<!DOCTYPE html>
<html>
<head>
<style>
body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>

<br />
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>

      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>

    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

    <label for="ch2">check2</label>
<br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>
<script>
function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>
</body>
</html>

 

TextMate Bundle for Ruby on Rails Development

 

mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/drnic/ruby-on-rails-tmbundle.git "Ruby on Rails.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

 

 

 

Last login: Wed Nov 16 22:18:21 on console
You have new mail.
ioannis-kolovos:~ ioannis$ mkdir -p ~/Library/Application\ Support/TextMate/Bundles
ioannis-kolovos:~ ioannis$ cd ~/Library/Application\ Support/TextMate/Bundles
ioannis-kolovos:Bundles ioannis$ pwd
/Users/ioannis/Library/Application Support/TextMate/Bundles
ioannis-kolovos:Bundles ioannis$ git clone git://github.com/drnic/ruby-on-rails-tmbundle.git "Ruby on Rails.tmbundle"
Cloning into Ruby on Rails.tmbundle...
remote: Counting objects: 1961, done.
remote: Compressing objects: 100% (664/664), done.
remote: Total 1961 (delta 1426), reused 1748 (delta 1250)
Receiving objects: 100% (1961/1961), 1.21 MiB | 395 KiB/s, done.
Resolving deltas: 100% (1426/1426), done.
ioannis-kolovos:Bundles ioannis$ osascript -e 'tell app "TextMate" to reload bundles'
ioannis-kolovos:Bundles ioannis$







UPDATE

1. Get with GitHub for Mac

2. Clone it to your ~/Library/Application Support/TextMate/Pristine Copy/Bundles
3. In TextMate choose the menu item… Bundles / Bundle Editor / Reload Bundles
4. If node is not installed in your PATH, go to TextMate → Preferences → Advanced → Shell Variables and add /usr/local/bin, basically the path to where node lives on your machine (which node).

UPDATE

defaults write com.macromates.textmate OakShellVariables -array-add "{ enabled = 1; variable = PATH; value = '$PATH'; }" && open "/Applications/TextMate.app"
ioannis-kolovos:~ ioannis$ defaults write com.macromates.textmate OakShellVariables -array-add "{ enabled = 1; variable = PATH; value = '$PATH'; }" && open "/Applications/TextMate.app"
ioannis-kolovos:~ ioannis$ echo $PATH
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/usr/local/git/bin/
ioannis-kolovos:~ ioannis$

Management

http://adam.heroku.com/past/2011/4/28/scaling_a_development_team/

Big pipe

http://www.juhonkoti.net/bigpipe/example.php






 https://github.com/msroot/bigpipe

window host

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');script.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
document.getElementsByTagName('head')[0].appendChild(script);




$(function() {


    var host =$(location).attr('host');

    var json = {
        "bwired": {
            "sites": [{
                "domain": "http://jsfiddle.net",
                "server": "blah"},

                {
                    "domain": "http://johnkolovos.blogspot.com",
                    "server": "sleeps.on.my.server",
                    }]
                }
            };





            $.each(json.bwired.sites, function(i, v) {
                if (v.domain == "http://"+host) {
                    alert(host + " lives on: "+ v.server);
                    return;
                }

            });
        });

Vic's mate paste

open a new file in TextMate and write this 3 lines:

tomato
basil
garlic


now do:

 select: tomato and press: command + c
 select: basil and press: command + c
 select: garlic and press: command + c

one command + c for each line ok?

now do:

 command + v
 command + shift + v
 command + shift + v

:)

ah ?

if google, apple, twitter and facebook joined forces and went non profit

Could you imagine?
That would save the world.

Goal Settings

Here are the twelve steps in goal setting.
The first step is desire
The second step is belief
The third step is to write the complete goal in detail
The fourth step is to determine how you will benefit from accomplishing your goal
The fifth step is to analyze your current status
The sixth step is to set a deadline
The seventh step is to identify the obstacles you will have to overcome to achieve your goal
The eight step is to clearly identify the knowledge you will require in order to accomplish your goal
The ninth step is to identify the people, groups and organizations whose cooperation and assistance you will need to attain your goal
The tenth step is to take all the details you have identified in the last three steps and make a plan
The eleventh step is to get a clear mental image of your goal as already attained
The twelfth step is to back your plan with determination, persistence and resolve to never give up

5 Black and White Photography Tips

http://best-photoshop-tutorials.blogspot.com/2008/12/create-professional-black-and-white.html

http://www.digital-photography-school.com/5-black-and-white-photography-tips

Mr. Data Converter

http://www.shancarter.com/data_converter/index.html

Bash Array

An array is a variable containing multiple values may be of same type or of different type.  There is no maximum limit to the size of an array, nor any requirement that member variables be indexed or assigned contiguously. Array index starts with zero.
In this article, let us review 15 various array operations in bash.

This article is part of the on-going Bash Tutorial series. For those who are new to bash scripting, get a jump-start from the Bash Scripting Introduction tutorial.

1. Declaring an Array and Assigning values

In bash, array is created automatically when a variable is used in the format like,

name[index]=value

• name is any name for an array
• index could be any number or expression that must evaluate to a number greater than or equal to zero.You can declare an explicit array using declare -a arrayname.

$ cat arraymanip.sh
#! /bin/bash
Unix[0]='Debian'
Unix[1]='Red hat'
Unix[2]='Ubuntu'
Unix[3]='Suse'

echo ${Unix[1]}

$./arraymanip.sh
Red hat

To access an element from an array use curly brackets like ${name[index]}.

2. Initializing an array during declaration

Instead of initializing an each element of an array separately, you can declare and initialize an array by specifying the list of elements (separated by white space) with in a curly braces.

Syntax:
declare -a arrayname=(element1 element2 element3)

If the elements has the white space character, enclose it with in a quotes.

#! /bin/bash
$cat arraymanip.sh
declare -a Unix=('Debian' 'Red hat' 'Red hat' 'Suse' 'Fedora');

declare -a declares an array and all the elements in the parentheses are the elements of an a


3. Print the Whole Bash Array
There are different ways to print the whole elements of the array. If the index number is @ or *, all members of an array are referenced. You can traverse through the array elements and print it, using looping statements in bash.

echo ${Unix[@]}

# Add the above echo statement into the arraymanip.sh
#./t.sh
Debian Red hat Ubuntu Suse

Referring to the content of a member variable of an array without providing an index number is the same as referring to the content of the first element, the one referenced with index number zero.

4. Length of the Bash Array

We can get the length of an array using the special parameter called $#.
${#arrayname[@]} gives you the length of the array.

$ cat arraymanip.sh
declare -a Unix=('Debian' 'Red hat' 'Suse' 'Fedora');
echo ${#Unix[@]} #Number of elements in the array
echo ${#Unix}  #Number of characters in the first element of the array.i.e Debian
$./arraymanip.sh
4
6

5. Length of the nth Element in an Array

${#arrayname[n]} should give the length of the nth element in an array.

$cat arraymanip.sh
#! /bin/bash

Unix[0]='Debian'
Unix[1]='Red hat'
Unix[2]='Ubuntu'
Unix[3]='Suse'

echo ${#Unix[3]} # length of the element located at index 3 i.e Suse

$./arraymanip.sh
4

6. Extraction by offset and length for an array

The following example shows the way to extract 2 elements starting from the position 3 from an array called Unix.

$cat arraymanip.sh
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
echo ${Unix[@]:3:2}

$./arraymanip.sh
Suse Fedora

The above example returns the elements in the 3rd index and fourth index. Index always starts with zero.

7. Extraction with offset and length, for a particular element of an array

To extract only first four elements from an array element . For example, Ubuntu which is located at the second index of an array, you can use offset and length for a particular element of an array.

$cat arraymanip.sh
#! /bin/bash

Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
echo ${Unix[2]:0:4}

./arraymanip.sh
Ubun

The above example extracts the first four characters from the 2nd indexed element of an array.

8. Search and Replace in an array elements

The following example, searches for Ubuntu in an array elements, and replace the same with the word ‘SCO Unix’.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');

echo ${Unix[@]/Ubuntu/SCO Unix}

$./arraymanip.sh
Debian Red hat SCO Unix Suse Fedora UTS OpenLinux

In this example, it replaces the element in the 2nd index ‘Ubuntu’ with ‘SCO Unix’. But this example will not permanently replace the array content.

9. Add an element to an existing Bash Array

The following example shows the way to add an element to the existing array.

$cat arraymanip.sh
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Unix=("${Unix[@]}" "AIX" "HP-UX")
echo ${Unix[7]}

$./arraymanip.sh
AIX

In the array called Unix, the elements ‘AIX’ and ‘HP-UX’ are added in 7th and 8th index respectively.

10. Remove an Element from an Array

unset is used to remove an element from an array.unset will have the same effect as assigning null to an element.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');

unset Unix[3]
echo ${Unix[3]}

The above script will just print null which is the value available in the 3rd index. The following example shows one of the way to remove an element completely from an array.

$ cat arraymanip.sh
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
pos=3
Unix=(${Unix[@]:0:$pos} ${Unix[@]:$(($pos + 1))})
echo ${Unix[@]}

$./arraymanip.sh
Debian Red hat Ubuntu Fedora UTS OpenLinux

In this example, ${Unix[@]:0:$pos} will give you 3 elements starting from 0th index i.e 0,1,2 and ${Unix[@]:4} will give the elements from 4th index to the last index. And merge both the above output. This is one of the workaround to remove an element from an array.

11. Remove Bash Array Elements using Patterns

In the search condition you can give the patterns, and stores the remaining element to an another array as shown below.

$ cat arraymanip.sh
#!/bin/bash
declare -a Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora');
declare -a patter=( ${Unix[@]/Red*/} )
echo ${patter[@]}

$ ./arraymanip.sh
Debian Ubuntu Suse Fedora

The above example removes the elements which has the patter Red*.

12. Copying an Array

Expand the array elements and store that into a new array as shown below.

#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Linux=("${Unix[@]}")
echo ${Linux[@]}

$ ./arraymanip.sh
Debian Red hat Ubuntu Fedora UTS OpenLinux

13. Concatenation of two Bash Arrays

Expand the elements of the two arrays and assign it to the new array.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Shell=('bash' 'csh' 'jsh' 'rsh' 'ksh' 'rc' 'tcsh');

UnixShell=("${Unix[@]}" "${Shell[@]}")
echo ${UnixShell[@]}
echo ${#UnixShell[@]}

$ ./arraymanip.sh
Debian Red hat Ubuntu Suse Fedora UTS OpenLinux bash csh jsh rsh ksh rc tcsh
14

It prints the array which has the elements of the both the array ‘Unix’ and ‘Shell’, and number of elements of the new array is 14.

14. Deleting an Entire Array

unset is used to delete an entire array.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Shell=('bash' 'csh' 'jsh' 'rsh' 'ksh' 'rc' 'tcsh');

UnixShell=("${Unix[@]}" "${Shell[@]}")
unset UnixShell
echo ${#UnixShell[@]}

$ ./arraymanip.sh
0

After unset an array, its length would be zero as shown above.

15. Load Content of a File into an Array

You can load the content of the file line by line into an array.

#Example file
$ cat logfile
Welcome
to
thegeekstuff
Linux
Unix

$ cat loadcontent.sh
#!/bin/bash
filecontent=( `cat "logfile" `)

for t in "${filecontent[@]}"
do
echo $t
done
echo "Read file content!"

$ ./loadcontent.sh
Welcome
to
thegeekstuff
Linux
Unix
Read file content!

In the above example, each index of an array element has printed through for loop.





http://www.thegeekstuff.com/2010/06/bash-array-tutorial/

wget

1. Download Single File with wget

The following example downloads a single file from internet and stores in the current directory.

$ wget http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2

While downloading it will show a progress bar with the following information:

• %age of download completion (for e.g. 31% as shown below)
• Total amount of bytes downloaded so far (for e.g. 1,213,592 bytes as shown below)
• Current download speed (for e.g. 68.2K/s as shown below)
• Remaining time to download (for e.g. eta 34 seconds as shown below)

Download in progress:

$ wget http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2
Saving to: `strx25-0.9.2.1.tar.bz2.1'

31% [=================> 1,213,592   68.2K/s  eta 34s

Download completed:

$ wget http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2
Saving to: `strx25-0.9.2.1.tar.bz2'

100%[======================>] 3,852,374   76.8K/s   in 55s    

2009-09-25 11:15:30 (68.7 KB/s) - `strx25-0.9.2.1.tar.bz2' saved [3852374/3852374]

2. Download and Store With a Different File name Using wget -O

By default wget will pick the filename from the last word after last forward slash, which may not be appropriate always.
Wrong: Following example will download and store the file with name: download_script.php?src_id=7701

$ wget http://www.vim.org/scripts/download_script.php?src_id=7701

Even though the downloaded file is in zip format, it will get stored in the file as shown below.

$ ls
download_script.php?src_id=7701

Correct: To correct this issue, we can specify the output file name using the -O option as:

$ wget -O taglist.zip http://www.vim.org/scripts/download_script.php?src_id=7701

3. Specify Download Speed / Download Rate Using wget –limit-rate

While executing the wget, by default it will try to occupy full possible bandwidth. This might not be acceptable when you are downloading huge files on production servers. So, to avoid that we can limit the download speed using the –limit-rate as shown below.
In the following example, the download speed is limited to 200k

$ wget --limit-rate=200k http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2

4. Continue the Incomplete Download Using wget -c

Restart a download which got stopped in the middle using wget -c option as shown below.

$ wget -c http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2

This is very helpful when you have initiated a very big file download which got interrupted in the middle. Instead of starting the whole download again, you can start the download from where it got interrupted using option -c
Note: If a download is stopped in middle, when you restart the download again without the option -c, wget will append .1 to the filename automatically as a file with the previous name already exist. If a file with .1 already exist, it will download the file with .2 at the end.

5. Download in the Background Using wget -b

For a huge download, put the download in background using wget option -b as shown below.

$ wget -b http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2
Continuing in background, pid 1984.
Output will be written to `wget-log'.

It will initiate the download and gives back the shell prompt to you. You can always check the status of the download using tail -f as shown below.

$ tail -f wget-log
Saving to: `strx25-0.9.2.1.tar.bz2.4'

     0K .......... .......... .......... .......... ..........  1% 65.5K 57s
    50K .......... .......... .......... .......... ..........  2% 85.9K 49s
   100K .......... .......... .......... .......... ..........  3% 83.3K 47s
   150K .......... .......... .......... .......... ..........  5% 86.6K 45s
   200K .......... .......... .......... .......... ..........  6% 33.9K 56s
   250K .......... .......... .......... .......... ..........  7%  182M 46s
   300K .......... .......... .......... .......... ..........  9% 57.9K 47s

Also, make sure to review our previous multitail article on how to use tail command effectively to view multiple files.

6. Mask User Agent and Display wget like Browser Using wget –user-agent

Some websites can disallow you to download its page by identifying that the user agent is not a browser. So you can mask the user agent by using –user-agent options and show wget like a browser as shown below.

$ wget --user-agent="Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092416 Firefox/3.0.3" URL-TO-DOWNLOAD

7. Test Download URL Using wget –spider

When you are going to do scheduled download, you should check whether download will happen fine or not at scheduled time. To do so, copy the line exactly from the schedule, and then add –spider option to check.

$ wget --spider DOWNLOAD-URL

If the URL given is correct, it will say

$ wget --spider download-url
Spider mode enabled. Check if remote file exists.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/html]
Remote file exists and could contain further links,
but recursion is disabled -- not retrieving.

This ensures that the downloading will get success at the scheduled time. But when you had give a wrong URL, you will get the following error.

$ wget --spider download-url
Spider mode enabled. Check if remote file exists.
HTTP request sent, awaiting response... 404 Not Found
Remote file does not exist -- broken link!!!

You can use the spider option under following scenarios:

• Check before scheduling a download.
• Monitoring whether a website is available or not at certain intervals.
• Check a list of pages from your bookmark, and find out which pages are still exists.

8. Increase Total Number of Retry Attempts Using wget –tries

If the internet connection has problem, and if the download file is large there is a chance of failures in the download. By default wget retries 20 times to make the download successful.
If needed, you can increase retry attempts using –tries option as shown below.

$ wget --tries=75 DOWNLOAD-URL

9. Download Multiple Files / URLs Using Wget -i

First, store all the download files or URLs in a text file as:

$ cat > download-file-list.txt
URL1
URL2
URL3
URL4

Next, give the download-file-list.txt as argument to wget using -i option as shown below.

$ wget -i download-file-list.txt

10. Download a Full Website Using wget –mirror

Following is the command line which you want to execute when you want to download a full website and made available for local viewing.

$ wget --mirror -p --convert-links -P ./LOCAL-DIR WEBSITE-URL

• –mirror : turn on options suitable for mirroring.
• -p : download all files that are necessary to properly display a given HTML page.
• –convert-links : after the download, convert the links in document for local viewing.
• -P ./LOCAL-DIR : save all the files and directories to the specified directory.

11. Reject Certain File Types while Downloading Using wget –reject

You have found a website which is useful, but don’t want to download the images you can specify the following.

$ wget --reject=gif WEBSITE-TO-BE-DOWNLOADED

12. Log messages to a log file instead of stderr Using wget -o

When you wanted the log to be redirected to a log file instead of the terminal.

$ wget -o download.log DOWNLOAD-URL

13. Quit Downloading When it Exceeds Certain Size Using wget -Q

When you want to stop download when it crosses 5 MB you can use the following wget command line.

$ wget -Q5m -i FILE-WHICH-HAS-URLS

Note: This quota will not get effect when you do a download a single URL. That is irrespective of the quota size everything will get downloaded when you specify a single file. This quota is applicable only for recursive downloads.

14. Download Only Certain File Types Using wget -r -A

You can use this under following situations:

• Download all images from a website
• Download all videos from a website
• Download all PDF files from a website

$ wget -r -A.pdf http://url-to-webpage-with-pdfs/

15. FTP Download With wget

You can use wget to perform FTP download as shown below.
Anonymous FTP download using Wget

$ wget ftp-url

FTP download using wget with username and password authentication.

$ wget --ftp-user=USERNAME --ftp-password=PASSWORD DOWNLOAD-URL

If you liked this article, please bookmark it with delicious or Stumble.


http://www.thegeekstuff.com/2009/09/the-ultimate-wget-download-guide-with-15-awesome-examples/