Khalil Zaidoun KhalilZaidoun

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

Prereq:

apt-get install zsh
apt-get install git-core

Getting zsh to work in ubuntu is weird, since sh does not understand the source command. So, you do this to install zsh

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

	/* Use this to cause a function to fire no more than once every 'ms' milliseconds.
	For example, an expensive mousemove handler:

	$('body').mouseover(ratelimit(function(ev) {
	// ...
	}, 250));
	*/

	function ratelimit(fn, ms) {
	var last = (new Date()).getTime();

	(function () {
	// IndexedDB
	var indexedDB = window.indexedDB \|\| window.webkitIndexedDB \|\| window.mozIndexedDB \|\| window.OIndexedDB \|\| window.msIndexedDB,
	IDBTransaction = window.IDBTransaction \|\| window.webkitIDBTransaction \|\| window.OIDBTransaction \|\| window.msIDBTransaction,
	dbVersion = 1.0;

	// Create/open database
	var request = indexedDB.open("elephantFiles", dbVersion),
	db,
	createObjectStore = function (dataBase) {

	<html>
	<h1>Playing Audio</h1>
	<button onclick="playAudio('brobob.mp3')">Play Some Audio</button>

	<script src="phonegap.js"></script>
	<script>
	function playAudio(src) {
	if (device.platform == 'Android') {
	src = '/android_asset/www/' + src;
	}

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"

	// set-up a connection between the client and the server
	var socket = io.connect();

	// let's assume that the client page, once rendered, knows what room it wants to join
	var room = "abc123";

	socket.on('connect', function() {
	// Connected, let's sign-up for to receive messages for this room
	socket.emit('room', room);
	});

	/** @jsx React.DOM */
	var MyComponent = React.createClass({
	getInitialState: function() {
	// set up the initial state. used for "logical" initialization code
	return {perMinute: '-', perDay: '-'};
	},
	componentDidMount: function() {
	// fired only once, when the component is added to the DOM
	// used for initialization code that has "side effects" i.e. i/o, jquery plugins, etc
	var socket = io.connect(this.props.url);