Flight School

Javascript Closures and Memory Leaks

Ace — Sat, 05 Mar 2011 01:24:35 +0000

This is me improving my understanding of closures in Javascript. Closures are a powerful part of the language but can also cause memory leaks, so here I’ll first define what they are, how they can be useful, followed by how they cause memory leaks. (I’m basically abridging with slight rewording what I read here and here so I take no credit for the content…).

What is a closure?

If you think a closure is a function within a function, you’re close but not quite there. Here are two examples of the same code, the first is not a closure, the second is:

function notClosure(x){
    var tmp = 3;
    function foo(y){
        alert(x+y+(++tmp));
    }
    foo(10);
}
notClosure(2); // Returns 16, no matter how many times you call it
 
function closureExample(x){
    var tmp = 3;
 
    // This returned function is the actual closure
    return function(y){
        alert(x+y+(++tmp));
    }
}
var foo = closureExample(2);
foo(10) // Returns 16
foo(10) // Returns 17 because as a closure it had access to tmp

So the idea here is the first one didn’t return a function (or at least didn’t have an inner function accessible from outside), and the second one did. What made it a closure is that the inner function closed over a variable from the outer function (in this case the variable tmp). This allowed us to access tmp even though it wasn’t in the immediate scope of the inner function and it wasn’t in the scope of our foo call. Another way of changing the non-closure function above into a closure would be:

// First example above modified to be a closure
var foo;
function nowaClosure(x){
    var tmp = 3;
    foo = function(y){
        alert(x+y+(++tmp));
    }
    foo(10);
}
notClosure(2); // Returns 16, no matter how many times you call it
foo(10); // Returns 17 because it has access to tmp again

Again in this example we had a pointer to a closure function so we could call it somewhere else and still have access to the variables it closed over. Javascript gives a pointer in closures to the variables in its original scope to make this possible. These pointers are what lead to the issues in memory leaks, which I’ll get to in a second. I

When are closures useful?

Before that I want to show instances where closures are very useful. When writing setTimeout’s often it is helpful to pass a parameter. The problem is that writing something like:

// WRONG!!!
setTimeout(speak("hello"), 1);
 
function speak(word){
    alert(word);
}

doesn’t work because setTimeout wants a reference to a function and since we’re trying to execute the function we’ll get the error that it’s not defined. If instead we use a closure:

setTimeout(function(){speak("hello");}, 1);
 
function speak(word){
    alert(word);
}

it works great because inside the closure we refer to the function we’re calling (if the anonymous function trips you up this is the same):

setTimeout(closure, 1);
 
function closure(){
    speak("hello");
}
function speak(word){
    alert(word);
}

How do closures cause memory leaks?

Now, getting to the matter of memory leaks (this is a digest version of a more complete treatment here). Javascript is a garbage collected language, which is why we don’t have to worry about allocating memory and all that jazz. It decides to give memory back to the heap when all references to an object are gone, like the ones we get in closures. However there are cases where there is circular reference (one object points to another that points back to the same) which is where the problems come in. Most systems handle it well, but IE doesn’t because it has two separate garbage collectors, one for native Javascript and the other for HTML DOM. So when native points to DOM, and DOM points back neither is aware of the other pointer and the circular reference slips under the radar. Ergo memory leaks in IE. For example:

function leakyFunction(){
    var domElement = document.getElementById("div_id");
    domElement.onclick = function(){
        // Closure over DOM element
        this.innerHTML = "I'm a leak";
    }
}

There are a couple ways to fix this. First the no closure route:

function notsoLeakyFunction(){
    var domElement = document.getElementById("div_id");
    domElement.onclick = clickHandler;
}
 
function clickHandler() { this.innerHTML = "Not leaking anymore"; }

Or just nullify the object after putting on the click event:

function notsoLeakyFunction(){
    var domElement = document.getElementById("div_id");
    domElement.onclick = function(){
        // Closure over DOM element
        this.innerHTML = "I won't be a leak as soon as the circular ref is nullified below";
    }
    domElement = null;  // Sigh of relief!  Circular avoided
}

Window.open Window Events (like onload)

Ace — Wed, 30 Mar 2011 23:34:43 +0000

Creating a cross browser compatible solution based on parent/child-window communication is surprisingly difficult (because of Microsoft, I wish IE would die already). This situation arises when using window.open, which returns a reference to the child window. Limited events are available from parent to child, due to security concerns, but for the most part it isn’t difficult to connect to window onblur, onfocus, and other events.

Something like:

var win = window.open("my/file");
win.onload = function(){
    // Do something
}

would work in just about all browsers (Safari doesn’t open the window without an event for security, and IE just doesn’t work).

Accessing Parent Window Functions

Accessing parent scripts is easy since that wouldn’t create a security issue. Any code can be accessed like this:

var parent = window.opener;
parent.globalFunction();

IE child window onload & running scripts on child windows

So what about IE? And what if we want to run scripts in the child window? Both are possible but require a little bit of gymnastics to accomplish. First the reason IE doesn’t allow you to connect to the onload event isn’t because it can’t be connected to, it’s because window.open may return before the window has actually been created. Any manipulation will subsequently give you an error telling you the window you’re working with is “null or not defined”. Instead you have to use setTimeout. The example below includes both that technique as well as a technique for injecting javascript in the child which works on all browsers:

var win = window.open('example.html');
var body;
function ieLoaded(){
    body = win.document.getElementsByTagName("body");
    if(body[0]==null){
        // Page isn't ready yet!
        setTimeout(ieLoaded, 10);
    }else{
        // Here you can inject javascript if you like
        var n = win.document.createElement("script");
        n.src = "injectableScript.js";
        body.appendChild(n);
    }
}
ieLoaded();

Top Ten Books!

Ace — Sun, 17 Apr 2011 23:44:56 +0000

Top ten books of all time according to some great authors:

Anna Karenina by Leo Tolstoy
Madame Bovary by Gustave Flaubert
War and Peace by Leo Tolstoy
Lolita by Vladimir Nabokov
The Adventures of Huckleberry Finn by Mark Twain
Hamlet by William Shakespeare
The Great Gatsby F. Scott Fitzgerald
In Search of Lost Time by Marcel Proust
The Stories of Anton Chekhov by Anton Chekhov
Middlemarch by George Eliot

Of course now I have to read the ones on this list that I haven’t yet.

This comes from these articles: http://www.time.com/time/arts/article/0,8599,1578073,00.html#ixzz1JNPALQ8q, http://www.toptenbooks.net/newsingle.cgi?1270583875.

Ford-Fulkerson – Capacity Scaling – C++

Ace — Fri, 06 May 2011 02:23:25 +0000

I recently implemented Ford-Fulkerson’s using Capacity Scaling in C++ and I thought I’d put it up. It’s not perfect but it works alright. First I have a graph class that can keep track of edges and edge weights as well as a source and sink node. My assumptions are that vertices start at 1 and are contiguous. The edges are numbered that way too. I only care about positive edge weights because those are the only that could have positive flow come across them. So here it is:

/* Summary:
 *		All of the edges and verteces are consecutive so I
 *		can use an array to store them.
 *
 *		The graph will be initialized with a dyn allocated
 *		array of
*/
 
struct nodeEdge {
	// Summary:
	//		Each node actually only needs to be identified
	//		by index.  This is meant to pair it with an edge
	//		weight in the graph.
	nodeEdge(int v, int w);
	nodeEdge* next;
	int weight;
	int vertex;
};
 
class Graph	{
	// Summary:
	//		The graph has a dyn allocated array of size nV.
	//		Each index is the vertex it represents, and out of
	//		it is a pointer to a list of nodes with their weight
	//		in that adj list.
	public:
		int nV, nE, s, t;
		nodeEdge **nodes;
		Graph(int nV,int nE);
		Graph(const Graph* other);
		Graph* bottleneckGraph(int b);
		~Graph();
		void setSourceSink(int s,int t);
		void addEdge(int u, nodeEdge* v);
		void removeEdge(int u, nodeEdge* v);
		int updateEdgeWeight(int u, int v, int w);
		void toString();
	private:
		int updateWeight(nodeEdge* u, int v, int w);
		void insertEdge(nodeEdge* u, nodeEdge* v);
		void extractEdge(nodeEdge* u, nodeEdge* v);
		void deleteNodes(nodeEdge *n);
};

#include 
#include 
#include "Graph.h"
using namespace std;
 
nodeEdge::nodeEdge(int v,int w){
	weight = w;
	vertex = v;
	next = NULL;
};
 
Graph::Graph(int nV,int nE){
	this->nV = nV+1; // Offsetting by 1 b/c node index starts at 1
	this->nE = nE;
 
	nodes = new nodeEdge*[this->nV];
	nodeEdge* edge = new nodeEdge(nE, 0);
	for (int i=0; i<this->nV; i++) {
		nodes[i] = i==0 ? edge : NULL;
		//cout << "Initializing: " << i << " val: " << nodes[i] << endl;
	}
};
 
Graph::Graph(const Graph* other){
	nV = other->nV;
	nE = other->nE;
	s = other->s;
	t = other->t;
	nodes = new nodeEdge*[nV];
	for (int i = 0; i < nV; i++) {
		nodeEdge* n = other->nodes[i];
		if (n!=NULL) {
			nodeEdge* o = nodes[i] = new nodeEdge(n->vertex, n->weight);
			while (n->next!=NULL) {
				o->next = new nodeEdge(n->next->vertex, n->next->weight);
				o = o->next;
				n = n->next;
			}
		} else {
			nodes[i]=NULL;
		}
	}
}
 
Graph* Graph::bottleneckGraph(int b){
	Graph* g = new Graph(nV-1,nE);
	g->s = s;
	g->t = t;
	for (int i=0; i<nV; i++) {
		nodeEdge* n = nodes[i];
		if (n!=NULL) {
			// Only copy nodes with high enough weight
			while (n!=NULL && n->weight<b) {
				n = n->next;
			}
			g->nodes[i] = n==NULL ? NULL : new nodeEdge(n->vertex, n->weight);
			nodeEdge* o = g->nodes[i];
			while (n!=NULL && n->next!=NULL) {
				if (n->next->weight>=b) {
					o->next = new nodeEdge(n->next->vertex, n->next->weight);
					o = o->next;
					n = n->next;
				} else {
					// Skip this one, not high enough weight
					n = n->next;
				}
			}
		} else {
			g->nodes[i] = NULL;
		}
	}
	return g;
}
 
Graph::~Graph(){
	for (int i=0; i < nV; i++) {
		// Go through nodes and tear down linked
		// list (each node should be from the heap)
		if(nodes[i]!=NULL) deleteNodes(nodes[i]);
	}
	delete(nodes);
};
 
void Graph::deleteNodes(nodeEdge *n){
	if (n->next!=NULL) {
		deleteNodes(n->next);
	};
	delete n;
};
 
void Graph::setSourceSink(int s,int t){
	if (1 > s || nV <= s || 1 > t || nV <= t) {
		cout << "Attempting to set a source or sink node that is outside the node range" << endl;
		exit(1);
	}
	this->s = s;
	this->t = t;
};
 
void Graph::addEdge(int u, nodeEdge* v){
	// summary:
	//		This takes an edge and tries to insert it.
	//		If there is no linked list, this starts it,
	//		otherwise it finds the end with insertEdge
	//
	//		Currently there is no check for double edges
	//		as this was not a requirements
	if(1 > u || nV <= u){
		cout << "Attempting to add an edge with a non-existant vertex" << endl;
		exit(1);
	}
	if(nodes[u]==NULL){
		// This is the first in the list
		nodes[u] = v;
	} else {
		insertEdge(nodes[u], v);
	}
}
 
void Graph::removeEdge(int u, nodeEdge* v){
	// summary:
	//		We have a node pointer to remove from list
	//		of vertex v.  Easy if it's the end of the list
	//		rewire if it's not.  If it's the only one...
	nodeEdge* tmp = NULL;
 
	if (nodes[u]->vertex == v->vertex) {
		// This is if it's the first one
		tmp = nodes[u]->next != NULL ? nodes[u]->next : NULL;
		delete nodes[u];
		nodes[u] = tmp;
		return;
	}
	extractEdge(nodes[u], v);
}
 
int Graph::updateEdgeWeight(int u, int v, int w){
	// Returns 0 if it needed to create an edge, 1 if it updates
 
	nodeEdge* nu = nodes[u];
	if (nu == NULL){
		// No edge yet, create it!
		nodes[u] = new nodeEdge(v, w);
		return 0;
	} else if (nu->vertex == v) {
		nu->weight += w;
		if (nu->weight == 0) {
			// Remove me!
			removeEdge(u, nu);
		}
		return 1;
	} else {
		return updateWeight(nu, v, w);
	}
}
 
void Graph::toString(){
	cout << "====Graph Details====" << endl;
	cout << "Source: " << s << " Sink: " << t << endl;
	cout << "----Adj List---------" << endl;
	for (int i=1; i < nV; i++) {
		cout << "Node " << i << ": " << endl;
		nodeEdge* n = nodes[i];
		if(n==NULL){
			cout << "NULL" << endl;
		} else {
			while(n!=NULL) {
				// Verify something first
				cout << "v: " << n->vertex << " w: " << n->weight << endl;
				n = n->next;
			};
		}
	}
}
 
int Graph::updateWeight(nodeEdge* u, int v, int w){
	if (u->next==NULL) {
		// I'm next
		u->next = new nodeEdge(v, w);
		return 0;
	} else {
		if (u->next->vertex == v) {
			u->next->weight += w;
			if (u->next->weight == 0) {
				// Remove me!
				extractEdge(u, u->next);
			}
			return 1;
		} else {
			return updateWeight(u->next, v, w);
		}
	}
}
 
void Graph::insertEdge(nodeEdge* u, nodeEdge* v){
	// summary:
	//		This takes a node, already inserted, and sees
	//		if it's the last in the linked list.  If not
	//		it will call this recursively with the next
	if(u->next == NULL){
		// Insert me here
		u->next = v;
	} else {
		// Look at the next one
		insertEdge(u->next, v);
	}
}
 
void Graph::extractEdge(nodeEdge* u, nodeEdge* v){
	if (u->next == NULL) {
		cout << "Error, didn't find the node" << endl;
		exit(1);
	}
	if (u->next->vertex == v->vertex) {
		nodeEdge *tmp = u->next->next;
		delete u->next;
		u->next = tmp;
	} else {
		u = u->next;
		extractEdge(u, v);
	}
}

That’s the hardest part of implementing Ford-Fulkerson. After that the algorithm is pretty simple. First I needed to find a path and the easiest way to do that was a specialized version of breadth first search. My implementation returns an array with the path and weights if minCut is set to false, and the minCut if it is true (just so I could output the min cut at the end if I want to). The bottleneck function finds the minimum edge weight on the discovered path which maxFlow uses to implement Ford-Fulkerson. Here it is:

#include "Graph.h"
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
using namespace std;
 
 
/** Summary:
 *		A special version of BFS which returns useful
 *		information for maxFlow: path with associated
 *		weights.  If minCut is set to true, BFS will
 *		instead return the set of nodes it can reach
 */
 
int* BFS(Graph *g, int s, int t, bool minCut){
	int nV = g->nV;
	queue<int> visit;
	bool found = false;
 
	// Initialize values to be used in the search
	// keeping track of parent and whether node has
	// been visited or not.
	int* visited = new int[nV];
	int* parent = new int[nV*2]; // This is a horrible hack of making a 2D array
	int* path = new int[nV*2];
	for (int i=0; i<nV; i++) {
		// Visited: 0 hasn't been visited, 1 is on the frontier, 2 is done
		visited[i] = 0;
		parent[i] = 0; //Only worry about 0 - keys, if a key is set I set the weight
		path[i] = 0;
	}
 
	// Enqueue the entry node, s, and search for t
	visit.push(s);
	visited[s] = 1;
	while (!visit.empty()) {
		// Search
		int u = visit.front();
		visit.pop();
 
		if(u==t){
			// Found it - build path array.
			found = true;
			int c = t;
			int p = parent[t];
			do {
				path[c] = p;
				path[c+nV] = parent[c+nV];
				c = p;
				p = parent[c];
			} while (p!=0);
			break;
		} else {
			// Color me, enqueue my children and color them
			visited[u] = 2;
			nodeEdge* adjList = g->nodes[u];
			while (adjList!=NULL) {
				// Get adj node, see if it's been visited and
				// if not it's my child
				int v = adjList->vertex;
				if(visited[v]==0){
					visit.push(v);
					parent[v] = u;
					parent[v+nV] = adjList->weight;
					visited[v] = 1;
				}
				adjList = adjList->next;
			}
		}		
	}
 
	!found && (path = NULL);
	minCut ? delete path : delete visited;
	delete parent;
 
	return minCut ? visited : path;
}
/** Summary:
 *		This finds the minimum edge weight along
 *		a path and returns it, since the flow cannot
 *		exceed that.
 */
int bottleNeck(int *path, int t, int nV){
	if(path==NULL) return 0;
	int m = 0, p = path[t], last=t;
	do {
		m = m==0 ? path[last+nV] : min(path[last+nV], m);
		last = p;
		p = path[last];
	} while (p!=0);
	//cout << "Bottleneck: " << m << endl;
	return m;
}
 
/** Summary:
 *		Capacity scaling implementation of Ford-
 *		Fulkerson algorithm.
 */
int maxFlow(Graph *g){
	ofstream output("output.txt", ios::out);
	if (!output) {
		cout << "Error: failed create output file" << endl;
		return -1;
	}
	// First create the residual graph by copying the original
	Graph *bG, *rG = new Graph(g);
	// C-capacity from source, mC-max capacity from A={s}, delta-nearest power of 2, rC-residual capacity
	int C=0, mC=0, delta=1, rC=0, s=g->s, t=g->t, nV=g->nV;
 
	// Get an upper bound on the flow by summing the
	// capacity coming out of the source node
	nodeEdge *src = rG->nodes[s];
	while (src!=NULL) {
		int tmp = src->weight;
		mC=max(tmp,mC);
		C+=tmp;
		src = src->next;
	}
 
	//cout << "Capacity: " << C << endl;
	if(mC>1){
		// Technically should also check for an upper bound which
		// depends on architecture, 32/64 bit.
		while (delta<mC) {
			delta<<=1;
		}
		if (delta>mC) {
			// Shift it back one so it's less than or equal to C
			delta>>=1;
		}
	}else if(mC==1){
		delta = 1;
		cout << "Edge weight is 1 so setting delta as 1 since lower power of 2 is 0" << endl;
	} else {
		cout << "There is no positive capacity, no positive flow exists" << endl;
		exit(1);
	}
 
	bG = rG->bottleneckGraph(delta);
	// Now find an aug path
	int* augPath = BFS(bG, s, t, false);
	while (delta>=1) {
		// Keep getting augPaths until down on delta
		output << "With DELTA=" << delta << ", ";
		while (augPath!=NULL) {
			// Get all augmenting paths for current delta	
			int p, c, b;
			if (augPath==NULL) {
				c = b = p = 0;
			} else {
				b = bottleNeck(augPath, t, nV);
				c = t;
				p = augPath[t];
			}
 
			while (p!=0){
				// I have an edge.  First reduce the weight on all edges we sent flow
				// through of the form p->c.  
				int success = rG->updateEdgeWeight(p, c, -b);
				if(success==0){
					// Means we created an edge, shouldn't have happened throw error
					cout << "Error, didn't find edge in adj list" << endl;
					exit(1);
				}
 
				// Now update the residual graph by either creating a c->p edge, or 
				// adding weight
				rG->updateEdgeWeight(c, p, b);
 
				c = p;
				p = augPath[c];
			}
			// Destroy my last bottleneck graph and make a new one
			delete bG;
			bG = rG->bottleneckGraph(delta);
			augPath = BFS(bG, s, t, false);
		}
		// I want to see my new graph for each augmentation
		//rG->toString();
 
		rC = 0;
		src = rG->nodes[s];
		while (src!=NULL) {
			rC+=src->weight;
			src = src->next;
		}
		output << "Flow value=" << C-rC << endl;
		// My residual graph has been updated with my last flow, find a new
		// augmenting path and try it again.
		delta =  delta/2;
		bG = rG->bottleneckGraph(delta);
		augPath = BFS(bG, s, t, false);
	}
 
	output << "Max-flow value=" << C-rC << endl;
 
	output << "The max-flow:" << endl;
	// Print the max flow by going through the edges in the original
	// graph and subtracting the
	for (int i=1; i<g->nV; i++) {
		nodeEdge *r, *n = g->nodes[i];
		while (n!=NULL) {
			r = rG->nodes[i]; // Start at the beginning each time since edges could be gone
			while (r!=NULL && r->vertex!=n->vertex) {
				r = r->next;
			}
			int wt = r==NULL ? n->weight : n->weight - r->weight;
			if(wt>0) output << i << " " << n->vertex << " " << wt << endl;
 
			n = n->next;
		}
	}
 
	// Now find and print the min-cut
	output << endl << "Min-cut capacity=" << C-rC << endl;
	output << "The min-cut:" << endl;
 
	// This assumes a connected graph
	int* minCut = BFS(rG, rG->s, rG->t, true);
	vector<int> S, T;
	for (int i=1; i<rG->nV; i++) {
		minCut[i]>0 ? S.push_back(i) : T.push_back(i);
	}
 
	output << "The set S:" << endl;	
	for (size_t i=0; i<S.size(); i++) {
		output << S[i] << ", ";
	}
	output << endl << "The set T:" << endl;
	for (size_t i=0; i<T.size(); i++) {
		output << T[i] << ", ";
	}
	output << endl;
	output.close();
	delete rG;
	return C-rC;
};
 
int main (int argc, char * const argv[]) {
	// Read in the data and construct the graph
	string line;
	ifstream myfile;
	myfile.open("input.txt");
	if(myfile.is_open()){
		int edgeCount, counter = 1;
		Graph* g = NULL;
 
		cout << "Successfully opened file" << endl;
		while (!myfile.eof()) {
			getline(myfile, line);
			vector<string> tokens;
			int a, b, c;
 
			if(line.empty()){
				// Skip me
			}else {
				stringstream iss(line);
				copy(istream_iterator<string>(iss), 
					istream_iterator<string>(), 
					back_inserter<vector<string> >(tokens));
 
				if(tokens.size()>3){
					cout << "Input error: too many values/line" << endl;
					myfile.close();
					return -1;
				}
				if(tokens.size()!=2 && counter<=2){
					cout << "Input error: only two values allowed in first two lines: nV and nE or s and t" << endl;
					return -1;
				}
				// Now that we have the vector, we need to make sure
				// the input is integer and then create our graph
				// Values here would be greater than 0
				a = atoi(tokens[0].c_str());
				b = atoi(tokens[1].c_str());
				c = tokens.size()>2 ? atoi(tokens[2].c_str()) : 0;
 
				if(a<1 || b<1 || (counter>2 && c<1)){
					// I asked professor XUE and he said throw an error for 0
					// edge weight as well as non integer.
					cout << "Input error: Non integer (or 0) input" << endl;
					myfile.close();
					return -1;
				}
 
				if(counter == 1){
					// Initialize graph
					edgeCount = b;
					g = new Graph(a,b);
				}	
				// Other setup
				if (counter == 2) g->setSourceSink(a,b);
 
				if(counter > 2){
					// Adding vertices and edges baby
					nodeEdge *n = new nodeEdge(b,c);
					g->addEdge(a,n);
				}
				counter++;
			}
			//cout << "Vector size: " << tokens.size() << " 1: " << a << " 2: " << b << " 3: " << c << endl;
 
		}
		myfile.close();
 
		// One last check, now that I've gone through the file does the
		// number of expected edges match with the number of actual edges given?
		if (edgeCount != counter-3) {
			cout << "Expected " << edgeCount << " edges but found " << counter-3 << endl;
			return -1;
		}
 
		// Begin max flow algorithm! -- I should do this from a function
		maxFlow(g);
		//cout << "Flow value: " << flow << endl;
 
	} else {
		// ELSE to opening file.  Major fail
		cout << "Error opening file" << endl;
		return -1;
	}
	return 0;
}

This expects a file formatted with the first line having number of vertices and number of edges. The next line has the number of the source and the sink node. All the remaining lines are edges with the first number being the source, the second the destination, and the third the edge weight. An example input with 6 vertices and 8 edges, with a start node of 1 and sink node of 4, and a first example edge starting at 1 ending in 2 with an edge weight of 3 looking like this:

The output is:

With DELTA=4, Flow Value=4
With DELTA=2, Flow Value=7
With DELTA=1, Flow Value=8
Max-flow value=8
The max-flow:
1 2 3
1 4 1
1 6 4
2 3 3
3 4 3
5 4 4
6 5 4
 
Min-cut capacity=8
The min-cut:
The set S:
1, 
The set T:
2, 3, 4, 5, 6,

I’ll throw in my makefile just for kicks:

CC=g++
CFLAGS=-c -Wall
LDFLAGS=
 
all: run
 
run: main.o Graph.o
		$(CC) main.o Graph.o -o run
 
main.o: main.cpp
		$(CC) $(CFLAGS) main.cpp
 
Graph.o: Graph.cpp Graph.h
		$(CC) $(CFLAGS) Graph.cpp
 
clean:
		rm -rf *o run

Zazzer – Some Real World RTMPF Application

Ace — Tue, 18 Oct 2011 00:45:29 +0000

I’ve put up a few examples using Red5 with some bare bones video chat stuff, so I thought I’d follow up and say a little about why I did it. The reason was to create http://Zazzer.me – a video chat based game. At first I thought I’d stream through the servers but then I heard about Cirrus and how they allow peer to peer connections and then I decided that was the way to go for me. So I wrote a simple chat application in flash with a Javascript control and a PHP backend. Maybe I’ll post the technical details later… for now here is just a little about how the game actually works (from how I describe it on the site).

WHAT IS ZAZZER ANYWAY

Ok you brave soul, here is a quick overview of Zazzer. The idea is, it’s an artificial intelligence built to introduce you to people in a fun way. Basically you’ve got a human social game. You get points by playing and meeting other people. You LOSE points by doing stupid stuff and offending people (don’t be a jerk – keep your clothes on).

I guess I should start by saying Zazzer is first and foremost a game, but you have some features baked in here to help you keep track of the new friends you make here. You can change colors, minimize labels and panels, upload a picture (if you click the house button at the top left it takes you to your profile – then just hover over your pic and you’ll see the camera icon you can see on mine at the top left of my head in screen shot below), and all kinds of stuff. Play around. When you add friends they’re always put in Zazzee (since Zazzer, presumably, introduced you) and from there you can put them in three different labels if you like. As you can see in mine above none of my friends have added their pictures yet. But mines up and this is here so there’s hope.

STARTING THE GAME

I hope you’ve noticed your notification, it pops up and lets you know what’s going on from time to time. Hovering over Zazzer’s little blue head at the bottom left will get him to talk to you (or at least show you what he’s said previously). Anyway that’s what the screen shot below is meant to show you. TO PLAY THE GAME just click the PLAY button and Zazzer will start looking for a match for you. Once it’s found one it will move your screen over to the game area for you (waaaaay to the right).

At that point if Flash isn’t being stupid, it will ask you for permission to your camera and you can start the game with your partner (right click on it and click settings if your camera or sound aren’t working). You should see something like this:

DONT BE A JERK

You’ll notice that there’s a report button – if you click it takes serious points away from your partner and immediately stops the game. IMPORTANT though, is that in your notification bubble that pops up with info – you can filter people based on their points. IF YOU REPORT someone who isn’t being a serious jerk then they’ll get filtered out of games. If you feel like you’ve been filtered unfairly, get in touch and we’ll look into it. Anyway bottom line, don’t be a jerk.

GAME PLAY/RULES

SO! On to the game (that’s why you’re here right?)! There are 2 60 second rounds; one for you to try to figure out what Zazzer matched you on and 1 for your partner. The purpose is for you to figure out the strongest thing you have in common faster than your partner (or at least be able to convince them that your idea is better). You see, at the end the videos pause and then you both choose which you thought was the best. If you both choose one you input, you get 10 points and they get 5. If you choose differently though, then choosing your own will get you 2 points, and choosing theirs will get you a big fat 0. So will you risk choosing theirs?

Also as you get more points you unlock special features (like being able to create labels instead of using the pre-set ones. Many more features are being worked on currently and quite a few of them will be tied to point totals. Also you can filter your games based on how high you want their points per game average to be (to help you avoid jerks.

Below is a screen shot of choosing the item at the end of the game…

One last curve ball. You can hang out and talk to the person after the game. You can add them as a friend. But you’re also allowed to give them +10 or -10 just for the heck of it (this is after scoring and they don’t find out).

ONE LAST THING

You can also be matched and just plain video chat with a random partner without having to play the game. Just uncheck game in your notification area. And if you’re really shy and want to just be matched with no game and be given the option to add that person… you have that too – menu that’s always at the bottom of your screen

I’m sure no one ever reads this far so I’m stopping now.

Chrome-script not running from loaded HTML in dojo.Dialog

Ace — Thu, 12 May 2011 03:15:13 +0000

While working on a site I’m building I had a dojo.Dialog that I was adding as a click event. It was supposed to load some HTML with script tags from a relative path and it worked on every browser just fine, just not Chrome. The HTML would still load in Chrome, it’s just that none of the scripts would execute.

I found out that lots of developers have run into this and the reason it happens is Chrome considers them outside of the local domain, so for security it doesn’t allow it. One workaround is to start Chrome from the command line with the parameter: –allow-file-access-from-files.

However the best option was just to use dojox.widget.DialogSimple. It is basically a dijit.Dialog with dojox.layout.ContentPane (which is a dijit.layout.ContentPane but with the ability to execute scripts on by default, and load css – off by default).

For more information on the first solution:
http://stackoverflow.com/questions/3430638/accessing-relative-urls-via-ajax-from-file-content
http://code.google.com/p/chromium/issues/detail?id=40787
http://code.google.com/p/chromium/issues/detail?id=47416

A Little About Zazzer

Ace — Sun, 23 Oct 2011 05:52:03 +0000

WHAT IS ZAZZER ANYWAY

First off here’s a blip from the homepage zazzer.me.

Ok you brave soul, here is a quick overview of Zazzer. I had the thought a while ago – wouldn’t it be cool if there were some technology, like an AI wingman, who could introduce you to people you’d want to hang out with? Not by introducing you to profiles with blind emails – I’m not in 4th grade anymore, anonymous notes don’t appeal to me. I wanted real life, face to face!

That idea grew into my graduate thesis, which required a real world implementation. That’s what this is. Now if you move into a new city and want someone to play tennis with you’ve got Zazzer to introduce you! The introductions happen through quick, video chat GAMES.

You should know I’ve actually spent a long time building this (longer than I’d care to admit) and that I have a long long list of killer ideas. What’s the point? That this is just the beginning. If you like it at all, support this by telling your friends about it, telling me when something doesn’t work, and just playing the game, and it will continue improving every day!

ABOUT the GAME

By the way I’m in rapid development cycles so these pictures are out of date, they’ll be updated soon and a movie will be posted to show the game

STARTING THE GAME

DONT BE A JERK

GAME PLAY/RULES

Below is a screen shot of choosing the item at the end of the game…

ONE LAST THING

I’m sure no one ever reads this far so I’m stopping now.

Zazzer – the Anti-Depressant

Ace — Thu, 27 Oct 2011 03:37:51 +0000

You might have read articles before on how Facebook leads to depression. People have come up with all sorts of reasons why, but the one that makes the most sense to me is that when you get on you’re always presented with how awesome everyone else’s lives are. They have pictures, events, and it’s easy to feel left out (or at least like you’re not having quite as good a time).

The trouble with Facebook and other social networking sites is that they’re geared towards exactly that. They’re there to let you post things about your life and to read about other people’s lives – and to talk I suppose – but they’re not there to get you actively involved with other people.

Zazzer changes all that by being centered around social games that require actual face to face interaction. It lets you write messages to people, organize your friends, input interests, but it also helps you meet people!

How does the game work? If you hit play you ask Zazzer (your artificial intelligence wingman) to find you someone you could be friends with. As soon as you’ve got a match your screen whizzes over to the game area.

There you have two 60 second rounds during which to guess what you were matched on (and what you have in common). This all happens face to face via video chat! As you input options they show up on the right and at the video pauses while each of you chooses which you thought was the best match.

If you choose the same one, the person that input that option into the list gets 10 points and the other gets 5. If you choose differently then you get either 2 points or 0 points – 2 points if you choose your own, 0 points if you choose your partners and they’ve chosen a different one.

After the game is over you also can either give 10 points to your partner or take ten away if you like. You can keep video chatting or you can end the stream and start a new game.

Why care about points? Well as you get more points you get more control over who you’re matched with. You can start putting in that you’d like to meet people who have similar interests – if you’re into baking well you can meet a fellow baker and collaborate on recipes! You can also begin choosing different kinds of games and you can customize your profile and interests more than those just starting out.

More importantly though you can screen people through points. In the notification area at the bottom there’s a little box that you can put points into. If you set it at 0 you won’t be matched with anyone who has a points per game total less than 0. That means if someone is a jerk and gets -10 in every game, their average will be -10 and you having 0 set means you won’t have to worry about being matched with them. It also means if someone exposes themselves and you click on the report button, they’ll get -50 points and unless you’re allowing people with negative points to play you, you’ll never have to worry about being exposed to that sort of thing.

Anyway I’m going to put up a better description soon along with pictures so it’s easer to follow, but that’s a quick overview of why http://Zazzer.me is good for your health!

The Novel

Ace — Sun, 13 Feb 2011 22:24:20 +0000

I have a novel in my mind that wants to be written somewhere so I’ve decided it’ll be here if I ever get around to it. I’ll release chapter by chapter as posts on this blog.

Dojo.forEach Error: No match found

Ace — Mon, 18 Oct 2010 21:59:07 +0000

Errors in Javascript can be irritating sometimes, so I thought I’d start posting when I ran across one that didn’t show up when I googled for it. Here’s my first one, it’s a simple error thrown by dojo.forEach.

I got this very descriptive error message in my console: “Error: No match found”.

Firebug Error for Dojo.forEach

I stared at it and then my code for a while before realizing that I had a reference to “this” inside my forEach loop, without giving the scope. I’d written:

1
2
3

dojo.forEach(array, function(entry){
     this.something;
});

When what I should have written was:

1
2
3

dojo.forEach(array, function(entry){
     this.something;
}, this);

The third parameter here, “this”, gave the scope forEach needed to be able to access the scope in the loop.

Setting Up Apple’s Aluminum Keyboard on Windows 7

Ace — Tue, 19 Oct 2010 04:38:23 +0000

I found this and it worked almost perfectly (I get an error on startup that says “HFS+ Disk Support did not start” which doesn’t bother me since my sound control etc work on the keyboard) so I decided to post to make sure I don’t lose it on the net. It works for both 64 and 32 bit systems. This is how to install the drivers for Apple’s keyboard on a Windows machine. Let me know if you want me to post the files themselves.

First of all boot in windows, then insert your Snow Leopard disc. Open a new window to explore disc content. Go to Folder “Boot Camp” > “Drivers” > “Apple”

Copy “BootCamp.msi” or “BootCamp64.msi” to your desktop.

In the same folder copy the file “AppleKeyboardInstaller.exe” or take the one in “x64″ folder if you’re on x64 system. When the two files are copied on your desktop you can eject the disk.

Then with an utility like Winrar or 7-Zip extract the “AppleKeyboardInstaller.exe” content. When it’s done run the file “DPInst.exe”

The keyboard will work now.

After that, search you need to run “BootCamp.msi” as administrator.

To run “BootCamp.msi” as administrator, first of all, you need to open cmd as administrator (“start menu” > “all programs” > accessories > “command prompt” then right click “run as administrator”). In the command prompt, go to your desktop (cd /Users/*your users’ name*/Desktop). Then type “BootCamp.msi”.

When the install is finish, reboot and it’s ok!

Git fatal: write error: Broken pipe

Ace — Thu, 04 Nov 2010 03:34:21 +0000

When doing a large commit with Git over HTTP, sometimes I get “fatal: write error: Broken pipe” and it hangs. The fix is pretty simple, it’s just adding to the buffer:

1	git config http.postBuffer 104857600

Magick++, VS 2010 and Access violation writing location

Ace — Wed, 03 Nov 2010 05:27:43 +0000

I’ve done the majority of my coding in Unix and Linux environments, so I’ve gotten used to the way they do things. Visual Studio 2010 has been a bit of an adjustment (with one or two headaches). I thought I’d write some tips in case this happens to be one of your headaches too.

I kept getting the error: “Unhandled exception … in …exe Access violation writing location” when trying to run Magick++ using the image class image(“my.image.jpg”). Everything else worked fine, and it took a while to figure out the problem so I provide the solution below (and everything else I did so you can get the whole picture).

If you’re trying to configure Magick++, there are a few things you want to make sure to do. First off open up the demo that installs as Magick++_Demo and right click on any of the projects. After clicking properties you’ll get the Property Page.

From there you’ll want to go to click on the arrow next to the “Linker” group, click on it and then click on “Input”. There you’ll find “Additional Dependencies”. In my case I copied all of this which happened to be:

CORE_RL_magick_.lib
CORE_RL_Magick++_.lib
X11.lib
odbc32.lib
odbccp32.lib
winmm.lib
wsock32.lib

You’ll also want to go to the “General” tab (also under “Linker”), and find the folder pointed to in the demo and put it in yours with the right path for “Additional Library Directories”.

Under “C/C++” click on “General” and do the same with “Additional Include Directories” there. It’s also good to go to “VC++ Directories” and choose “Include Directories” and add ImageMagick’s include (for me that was ImageMagick-6.6.5-Q16\include) and under “Library Directories” add the lib directory (same as last but lib instead of include).

The kicker, and the setting that took me the longest to discover and change is under “Configuration Properties/C/C++/Code Generation”. Make sure the “Runtime Library” is set to “Multi-Threaded DLL (/MD)” and not to “Multi-Threaded Debug DLL (/MDd)” which is the default for the Debug setup. Then under “Configuration Properties/C/C++/Preprocessor” I read some people had to change the “Preprocessor Definition” that is set to “_DEBUG” to “NDEBUG” (for me nothing was set so I left it alone).

Hopefully this helps anyone else that ran into the dreaded “Unhandled exception at… in… Access violation writing location” error. I’ll post screen shots if I get a minute (chances are I won’t unless you ask).

Zend_Json_Server and Dojox RPC

Ace — Fri, 18 Feb 2011 03:26:37 +0000

If you’re anything like me you happened on this while searching through all of the other tutorials that get you everything EXCEPT the last little bit to get this rolling. Honestly two more lines on most of the things I read would have made this the easiest thing in the world to do. Instead here I am, writing it in case someone else has the same problem I did.

The first thing you’ll notice if you read tutorials about setting up Zend_Json_Server is that the json_rpc.php file gets put all over the place (some people even put the script in the bootstrap). If you’re wondering, the right place to place it is in the public folder (I’m assuming you set up the Zend Framework with their default configuration that has an application folder with the Controllers, Views, and Models a Library folder, etc).

This is what public/api/json_rpc.php should look like:


set_include_path(implode(PATH_SEPARATOR, array(
    realpath(dirname(__FILE__) . '/../../library'),
    get_include_path(),
)));
 
require_once "Zend/Loader/Autoloader.php";
require_once "MyAppFolder/RPC.php";
 
$loader = Zend_Loader_Autoloader::getInstance();
 
$server = new Zend_Json_Server();
$server->setClass('RPC');
// RPC is my handler class that I included above
 
if('GET'==$_SERVER['REQUEST_METHOD']){
    // Here the target is the path of the $server->handle() which happens
    // to be this exact path
    $server->setTarget('/api/json-rpc.php')
            ->setEnvelope(Zend_Json_Server_Smd::ENV_JSONRPC_2);
    $smd = $server->getServiceMap();
 
    // I read articles that said you need to do this to set Dojo Compatibility
    // but it turns out that including the line below actually made it not work
    // so I commented it out below just as an FYI
    // $smd->setDojoCompatible(true);
 
    echo $smd;
    return;
}
$server->handle();
?>

As you can see from above, none of my RPC handling happens in the MVC framework. I avoid all of the overhead by doing this and it’s easier to deal with anyway. The json_rpc.php is in the public folder, and my RPC handling class is in the library folder alongside the Zend folder in a folder I named MyAppFolder.

Another important note. The class that I included and then loaded for the Zend_Json_Server needs to be parameterized in order for it to be able to create the SMD file to send to the client. If you don’t know what an SMD file is, take a look here. It defines the functions you can call remotely and defines what to expect in return.

What I mean by parameterize is:

class RPC 
{
    /**
     * Return a friendly message
     *
     * @param int id
     * @return string
     */
    public function getMessage($id){
        return "You sent: ".$id;
    }
}

The javascript for your front end is pretty easy too. I implemented mine with Dojo (which is awesome, I recommend it above all the other Javascript toolkits), and it looked like this:

dojo.require("dojox.rpc.Service");
 
var myRpc = new dojox.rpc.Service("api/json-rpc.php");
var dojoDeferredObject = myRpc.getMessage(123);
dojoDeferredObject.then(function(result){
     alert("You said: "+result);
});

This gives me a deferred object (has to wait for the server trip) which I can then use to create the alert or do whatever I want to with the result.

For a great article on dealing with deferred objects look here.

For the original information from Zend, look here.

Javascript Truthy Falsy

Ace — Sat, 14 Aug 2010 19:34:33 +0000

Every once in a while I get confused on truthy falsies in javascript, so I thought I’d compile some things I’ve found and write down the cases so I have something for future reference (and so it sticks).

First I’ll list the truthy/falsy cases, and then I’ll go over the difference between Javascript and traditional languages in what they return from operators such as && and || (Javascript doesn’t return true or false is what I’m driving at, that’ll make sense in a minute).

var emptyString = ""; //falsy
 
var nonEmptyString = "this is text"; // truthy
 
var numberZero = 0; // falsy
 
var numberOne = 1; // truthy
 
var emptyArray = []; // truthy, BUT []==false is true. More below.
 
var emptyObject = {}; // truthy
 
var notANumber = 5 / "tree"; // falsy
// NaN is a special javascript object for "Not a Number".
 
function exampleFunction(){
      alert("Test");
}
// examleFunction is truthy
// BUT exampleFunction() is falsy because it has no return (undefined)

Strings of some falsies from above are true:

var test = "0"; // this is a string, not a number
 
(test == false); // returns false, test string is truthy
 
(test * 1 == false); // returns true, test is now a number, falsy

Arrays can cause trouble. An empty array is already set aside, so it comes up as true. But comparing an empty array to a boollean is false.

if([] == false){
     // code runs
}
 
if( [] ) {
     // runs too
}
 
if([] == true){
     // doesn't run
}
 
if( ![] ){
     // doesn't run either
}

Difference between Javascript and PHP, Javascript: empty arrays are true. PHP they’re false. In PHP the string “0″ is also false.

 php
 
$emptyArray = arra(); // falsy in PHP
 
$stringZero = "0"; // falsy in PHP
 
?>

Ok so those are some of the basic for what evaluates as true and false, here they are in action. What happens is Javascript evaluates whether or not things are true and then returns them if they meet the criteria. For example:

Logical or, ||

("first string" || "second string"); // returns first string
 
("first string" || ""); // returns first string
 
(0 || "second string"); // returns "second string"
 
(0 || false); // returns false

That allows functions to have optional parameters:

function speak(word){
 
var word = word || "You gave me no word";
 
alert(word);
 
}
 
speak("Hello"); // alerts Hello
 
speak(); // alerts You gave me no word
//word is null when function is started

Logical and, &&:

("first string" && "second string"); // returns "second string"
 
("first string" && ""; // returns ""
 
(0 && "test two") // returns 0

That’s sweet because one variable can depend on other:

var checkbox = dojo.byId("agreeToTerms"); //or getElementById if you're not using dojo
 
var name = checkbox.checked && prompt("What is your name");
 
//name is either their name, or false if they haven't checked the agreeToTerms checkbox
 
// IMPORTANT NOTE: Internet Explorer 8 sucks as usual and breaks the prompt function.
 
var createArrowNav = createArrowNav || false; //parameter passed for creating arrow nav
 
createArrowNav && createArrowNav(); // function createArrowNav runs if the parameter is true, returns false otherwise

Logical not, ! (this one actually turns what it gets to the opposite truth value, as opposed to || and && returning the truth value)

(!"first string" || "second string"); // returns first string
 
(!"first string" || "second string"); // returns false
 
(!0 || !"second string"); // returns true
// 0 converts to true and is returned

You can use that to get true or false no matter what you’ve been given

(!!"test"); // returns true
 
(!!""); // returns false
 
(!!variableThatDoesntExist); // returns false even though checking for undefined variable

Javascript Functions, Scope, Call, Apply, and Gobblygook

Ace — Wed, 01 Sep 2010 05:48:02 +0000

If that title didn’t make any sense and you’re wondering if you came to the right place this will be about Javascript functions. I’ll touch on everything from how scope works with Javascript, to using it with objects and even bending it using call/apply. This is meant to be the beginning of an exploration of how Javascript can be an object oriented, class driven language even though at first its prototypal nature doesn’t seem to lend itself to it (with some Dojo Toolkit cheerleading along the way-because Dojo is awesome and for any who haven’t used it, it’s like JQuery on steroids. It supports classes and inheritance with its dojo.declare() object. To learn more look that up over at docs.dojotoolkit.org).

Before I get started I need to do a quick aside on firebug and the javascript console. If you already know all about it skip to the =======Done with the firebug aside===== line.

If you don’t know about it, firebug will make coding javascript much easier. It will also let you test my examples. So go to http://getfirebug.com/, install it on FireFox (the best browser to develop javascript in, that’s not just my opinion), and read a little about it. For this tutorial I’ll just use console.log() to show values returned by functions. If you read nothing else over there, at least glance at that.

=======Done with the firebug aside=======
Ok, now that’s out of the way lets start with functions. In javascript creating functions and calling them is as simple as:

function createArray(a, b){
     return [ this, a, b ];
}
 
var myArray = createArray('testing', 'check');
console.log(myArray);
// array members: window, "testing", and "check" print out in the console

If you want to create a well designed web app, this is not so good. Why? Because you created and called the function in the global namespace (notice that “this”, the first member returned in the array came back as “window”).

Context is a big deal in javascript, and if you don’t supply the context Javascript supplies it for you (hence the window, global object). It picks up all your stray functions, like a giant comfortable bus would pick up homeless in a perfect world. That doesn’t mean it’s a loose global function though. Instead it’s a method of the window object, which means you can call the function like this:

var myArray = window.createArray('testing', 'check');
console.log(myArray); 
// [ window, 'testing', 'check' ]
 
console.log(typeof(window.nonExistantMethod));
//undefined
console.log(typeof(window.createArray));
//function

So if you want to avoid globals in Javascript (as you should), then you should start playing with objects. An object is simply something between curly braces ({}). So lets make an object to attach this function to:

//First store the object as a var.  This would be its namespace
var arrayEr = {
     someProperty: 'a value of this object',
     ourFunction: 'createArray'
}
//Notice that in an object the value name is followed by a colon
//and then the value in the object
 
var test = arrayEr.ourFunction('testing','check');
console.log(test);
//[ arrayEr, 'testing','check' ]
 
//You could also call the function as if it were an array
var test = arrayEr['ourFunction']('testing','check');
console.log(test);
//[ arrayEr, 'testing','check' ]

We made the object “arrayEr” and for its method ourFunction we wrote the string ‘createArray’. That made it so that when we called arrayEr.ourFunction() as a method it looked for the function named ‘createArray’ and called it. The cool thing here is it called it in its scope. Instead of window it was arrayEr. We did this as an exercise, the best way to define this sort of thing would actually be like this:

var arrayEr = {
     someProperty: 'a value of this object',
     ourFunction: function(a, b){
          return [ this, this.someProperty, a, b ];
     }
}
var test = arrayEr.ourFunction('testing','whatever');
console.log(test);
//[arrayEr, 'a value of this object', 'testing', 'whatever' ]

Here instead of looking the function up by the name ‘createArray’ we have created it as a method named ‘ourFunction’. I added a little bit of code that would return the property of the object too, and it showed up in the returned array. Cool huh!

Scope can be a little tricky, so here’s an example that lets you get an idea of how it works:

Click the first button and you get “btn1″ because it’s a method invocation and this will be assigned the owner object (the button input element). Click the second button and you get “window” because buttonClicked is being called directly (i.e. not like obj.buttonClicked()). Clicking the third gives the same result, because assigning the event handler in the element’s tag calls it directly like the second did.

Dojo has handy functions for event handling, like dojo.connect(). With dojo.connect() you can specify the scope you want, again for a better look at that docs.dojotoolkit.org is a good place to go.

This can happen because Javascript has two handy functions, call and apply. These let you call functions in different scopes than their own. For example:

var Dog = {
     sound: "woof",
     talk: function(name, nature){
          console.log(this.sound + ", "+this.sound+", my name is "+name+" "+nature);
     }
}
var Cat = {
     sound: "meow",
     talk: function(name, nature){
          console.log(this.sound + ", "+this.sound+", my name is "+name+" "+nature);
     }
}
Dog.talk("fido","the dog");
//woof, woof, my name is fido the dog
Cat.talk("felix","the cat");
//meow, meow, my name is felix the cat
Cat.talk.call(Dog, "felix", "the cat");
//woof, woof, my name is felix the cat
Dog.talk.apply(Cat, ["fido","the dog"]);
//meow, meow, my name is fido the dog

Pretty cool right? Call and apply require the new scope, then call takes the parameters as separate arguments while apply takes them as an array. That lets you call functions in different scopes! A Cat object can be made to “woof” while a Dog can be made to “meow”. This may not seem like a lot at first glance, but it is one of the most powerful features in Javascript and mastering it lets you do all kinds of awesome things.

Abstract Factory vs Factory Method

Ace — Wed, 15 Sep 2010 05:38:59 +0000

Here’s a friendly dip into design patterns. It’s based on the ideas presented by the gang of four.

The Abstract Factory and Factory Method design patterns are similar in that they both decouple the creation of an object from its code. While Abstract Factory is used to create families of objects, the Factory Method is geared towards deferring creation of objects to subclasses in order to improve reusability of code among other things. Because of this they differ in many ways in the structure and use of classes (class relationships).

Abstract Factory

The Abstract Factory design takes a part of a program and encapsulates it (lets say the classes of objects determining look and feel). If we had different themes- tundra, nihilo, etc., the Abstract Factory would make it so that we could define which theme we wanted to be active at the outset of the program. That way we would have the flexibility to easily change from one to another.

The Abstract Factory class declares the interface for creating objects etc, but it’s the concrete classes that actually implement them. That ensures the interface stays uniform across all concrete subclasses. For example to make a button, the abstract factory would have the make_button() interface. However the individual themes would have code that would actually build the button to the theme’s specification when make_button() was called. That way none of the other classes have to know which theme was actually instantiated.

Factory Method

The Factory Method similarly defines an interface for creating objects. However the difference is that it lets subclasses decide how to instantiate.

For example, say we have an object that needs a window to contain it. As part of the constructor we could just write: new window(). The problem is that if I wanted a more flexible scrolling_window, I would have to write an entirely new class with: new scrolling_window() in the constructor to achieve the simple difference.

The Factory Method solves this by writing the class with functions that create the new object themselves. Instead of writing: new window(), I create a hook for subclasses, like a function create_window(). If the parent is an abstract class, create_window() will be blank for the concrete children to fill with things like: new window() or new scrolling_window(). If the parent isn’t abstract it will have a reasonable default value (like new window()) to be overwritten by application-specific children. In this way I maintain the interface while the subclasses instantiate with what they need and minimal extra code.

Compared

The structure and class relationships are similar in the sense that often they use subclassing to move from abstract classes to concrete classes in order to create flexibility. They maintain interfaces and they encapsulate the different implementations.

They differ in that the Abstract Factory is usually implemented as a Singleton which would create a family of objects. It’s usually set while the application loads and not changed afterwards. It is good for big groups of changes that need to happen based on which OS you’d be using, which theme, etc. It’s not to give flexibility for creating objects on demand, since usually once one concrete factory is chosen, it won’t be changed. An example diagram would be:

The Factory Method on the other hand isn’t usually a thematic group or a Singleton. Instead it is an implementation that allows flexibility in object creation. Thus it doesn’t necessarily create a family of objects as much as it gives a family of possible customizations. It isn’t set during loading like the Abstract Factory is, so any of its children can be instantiated during execution and interact with other objects. An example diagram here is:

Snow Leopard Defrag “Files cannot be moved”

Ace — Sun, 10 Oct 2010 02:54:40 +0000

I tried to set up Bootcamp and got the dreaded “Files cannot be moved” error. Basically what it was saying was even though I had 50 some odd gigs of extra space, I couldn’t get a 30 GB block of data. In other words my hard drive was fragmented.

If you read about that online you’ll find many Mac users that are adamant that OS X defrags automatically. It does, for small files, but for big ones it doesn’t. Then people argue over whether it makes a difference or not in system performance. That’s a no brainer, yes, your system runs better when it is defragmented (even if it’s just a little bit).

So I needed to defragment.

The next question was, how? After searching online the best option seemed to be iDefrag. It was one of the only options if you look at defragmenting a drive from a Windows perspective, and since the only drives I’ve ever formatted have been Windows drives, that’s how I was looking at it. While reading I came across people supporting this software by saying Apple’s official position of restoring the drive was ridiculous. At first I thought, yeah, that’s ridiculous. After thinking about it more I realized that not only did Apple’s position have merit, but it was by far the best one. This is why.

Restoring from Time Machine is faster and cleaner than iDefrag.

If you don’t have Time Machine set up, today is the day you will finally do what you should have had all along. You will buy an external drive and set it up. First of all not only does it back up your drive in case of a catastrophic error, it also backs up files from YOUR errors (we’ve all deleted files on accident). Second of all, if you have it set up, then this is what happens. Instead of having code run on all your files and try (based on algorithms) to place them in optimal positions and taking forever to do it, all you need to do is a system restore from Time Machine. Why is that better?

Because when Time Machine backs up your files and restores them, it doesn’t put them back in their same fragmented placement. It puts them back better than it could have put them there in the first place when you installed all of your files, because it already KNOWS exactly what you want to put on there ahead of time.

I had 240 GB of information to defrag and it took me 2 hours. All I did was put in my Snow Leopard DVD, and then when I got to the installer menu chose from utilities and restore from backup. That’s it. Afterwards I used the free version of iDefrag to see how well it worked and it was perfect. Beautiful.

PLUS, I magically gained over 10 GB! A lot was hiding in my mess of a disk.

Moral of the story. If you want to defrag your OS X system, just restore from your Time Machine backup every once in a while. It’s Apple’s suggestion and it works perfectly.

Iptables and Virtual Networks

Ace — Sun, 10 Oct 2010 18:52:04 +0000

I’ve been messing around with Networks lately. DHCP servers, Iptables, DNS, FTP, SSH, HTTP, and on. The best way to do it that I’ve found is through virtual machines. That way you can monitor everything all from one computer. Personally I’ve gone with a lightweight Fedora 8 install on VMWare. This post will be about Iptables, so for the network configuration I used two custom networks, both host-only.

I started by making three machines. One represented the private network (192.168.0.0/24), one represented the gateway/firewall, and one represented the public network (10.0.0.0/8). I then configured the machines so that the private network could access the public via only http, ping, and ftp. The public could access the private only via http and ssh, which were configured to map to a specific node (or web server). The gateway itself could access both public and private networks with ping and ssh, but could only be accessed via ssh by the private network. The forwarding was handled with NAT, or Network Address Translation.

Network Setup

Here’s what my network looks like. The words in all caps are variables that I use in my Iptables configuration file. I’ll include that at the end.

Software Packages

-Wireshark-gnome
-Vsftpd
-And the other common packages such as Apache

Quick Overview of Iptables

I’m not going to talk so much about what Iptables as I am about how to implement them. Because of that I’ll only give a quick, high level view of how they work. If this is your first time looking at Iptables I recommend reading something else to give you a little more background information… but this might be enough if you’re a learn by doing kind of person.

When packets arrive at the firewall, they’re processed and checked to see if the NAT (network address translation) table needs to translate them. This is because sometimes a server sits behind a firewall on a private network but needs a presence in the public internet. It uses the gateway’s public address, but the gateway has to know to forward those on. NAT does that.

It’s important that happen first because then the packets are processed. The packets being forwarded are added to the FORWARD chain. The packets meant for the gateway enter the INPUT chain. The packets ready to leave the gateway (not forwarded from the gateway, but originating from the gateway) go into the OUTPUT chain.

Each chain can have rules added to it (-A) and they are all processed sequentially. A packet will continue through the rules until it is accepted (ACCEPT) or dropped (DROP). Along the way it is common to see jump commands (-j) sending types of packets to rules meant to process together.

If the packet is accepted it reaches the firewall lets it through to its destination. DROP makes the packet go *poof, and REJECT sends a nice message to the sender of the packet that their communication has not been accepted so they don’t wait with the little spinner on their browser going until it times out.

Ok enough of the high level, lets get to the implementation.

Description

I used the whitelist approach, which is the most secure. This means that by default I drop all packets, only accepting those on my whitelist. (Blacklist is accepting all by default and marking packets to drop – not much of a firewall). During this description I’ll type relevant lines from my Iptables file and then include it in completed form at the end.

As I mentioned before I set up the network with two host-only networks (simulated switches). I set the private network to have the static IP 192.168.0.1 with the subnet mask 255.255.255.0 and the GW 192.168.0.254. The public network’s IP was 10.0.0.1 with a subnet mask 255.0.0.0 and a GW of 10.0.0.254 (in Fedora 8 setting this up is as simple as typing neat& in the command line and then adding a network adapter with the IP as static). The gateway had two ports (one to connect to the public network and one to connect to the private), which I matched to their respective pairs (public side to the public server, etc) so they’d be on the same switch. One was 192.168.0.254 with the same subnet mask as its pair (255.255.255.0) and itself as the gateway. The other followed the same pattern with its IP as 10.0.0.254.

After the network was ready I started working on my firewall. I set up the default drops like so:

$IPTABLES -P INPUT DROP
$IPTABLES -P OUTPUT DROP
$IPTABLES -P FORWARD DROP

FORWARDING and NAT

Once that was done I got to work on my first task. This was all about forwarding traffic correctly, and to save myself time later I set up the NAT (Network address translation. This setting makes it so my server changes my address so that whichever computer I’m talking to on the internet knows to send messages to it, and then it sends them to me). My settings were:

$IPTABLES -t nat -A PREROUTING -p tcp -d $LAN_0_IP --dport 80 -j DNAT --to $WEB_IP_ADDRESS:80
$IPTABLES -t nat -A POSTROUTING -s $INTERNAL_PRIVATE_SUBNET -o $LAN_0_IFACE -j SNAT --to $LAN_0_IP

For now making sense of this should be easy just referring to the network image above (again the variables are at the end of this post). The important point is that for pre-routing, when the destination was the public side of the gateway and was HTTP (port 80), it was forwarded to a node in the private network. Post routing took as a source the internal network’s IP address range and converted it as it left the public interface and gave it the gateway’s public address.

-A adds the chain, -p is the protocol, -d the destination –dport the destination port, –sport would be source port, -j is where to jump in the chain (this case jumps to DNAT – destination network address translation), -o is the output interface, -s the source, -t the table. This isn’t an exhaustive list, a good reference for a more in-depth look at the commands can be found here: http://www.dd-wrt.com/wiki/index.php/Iptables_command.

There will be screenshots showing this in motion soon. For now it lay the foundation so I could do task 1 without worrying about having to change anything later.

My next step was to enable HTTP, FTP, and ping from private to public. I did this by adding a new set of rules (-N) for TCP packets and adding rules (-A) allowing them:

$IPTABLES -N tcp_packets
$IPTABLES -N allowed
$IPTABLES -A tcp_packets -p TCP -s $INTERNAL_PRIVATE_SUBNET -m multiport --dport 80,20,21 -j allowed
$IPTABLES -A allowed -p TCP --syn -j ACCEPT
$IPTABLES -A allowed -p TCP -m state --state ESTABLISHED,RELATED -j ACCEPT
$IPTABLES -A allowed -p TCP -j DROP

These rules take TCP packets that originate from the private subnet with FTP (20 & 21) and HTTP (80) ports and allow them to be forwarded. They also allow communications that have been established or are created by established communications (-m state –state ESTABLISHED,RELATED >side note make sure there’s no space between ESTABLISHED,RELATED). All that’s left to do is attach the rules to the forwarding chain (since they’re not for the gateway) like so:

$IPTABLES -A FORWARD -p TCP -j tcp_packets
$IPTABLES -A FORWARD -p TCP -m state --state ESTABLISHED,RELATED -j ACCEPT

The second line allowed return traffic (for both ftp and http) once it had been initiated.

In order to get ping working I created another chain for ICMP packets:

$IPTABLES -N icmp_packets
$IPTABLES -A icmp_packets -p ICMP --icmp-type 0 -j ACCEPT
$IPTABLES -A icmp_packets -p ICMP --icmp-type 8 -j ACCEPT
$IPTABLES -A FORWARD -p ICMP -j icmp_packets

These accept all 8 (ping) and 0 (response) ICMP requests. With that I had FTP, HTTP, and ping ready to go so I started my firewall by typing “service iptables start”, and then I executed my script (in /etc/rc.d/) named rc.firewall by typing ./rc.firewall. That got the first bit working, below are screen shots for each scenario:

Here the private address 192.168.0.1 successfully gets a login to 10.0.0.1’s FTP server.

Here the ifconfig shows that our private network (192.168.0.1) successfully pulls up an HTML page from 10.0.0.1 via HTTP.

Again ifconfig shows a private address able to ping a public one.

FORWARDING – Disable Ping and FTP from Public

For my next task I disabled ping and FTP from the public network to the private.

I did ping by simply denying anyone outside from sending an 8 (ping) message into the network (this is a blacklist technique):

$IPTABLES -A icmp_packets -p icmp -d $INTERNAL_PRIVATE_SUBNET --icmp-type 8 -j REJECT

FTP was already denied by default (b/c of my blacklist policy). Below I have screen shots of both of these scenarios working. In the second I get the information about the packet source, destination, and content by using wireshark. So check it out if you haven’t yet.

Here the ifconfig command shows we are at 10.0.0.1, and its ping command returns that the destination port is unreachable. This is because it is not allowed to communicate.

As you can see above, the source is my public IP - 10.0.0.1, with the destination FTP never getting or responding to the SYN message.

If you’re not familiar with TCP protocols like FTP/HTTP etc, there’s usually a three way handshake where one party initiates by sending a [SYN] message, another acknowledges by sending [SYN,ACK], and then it is finalized with an [ACK] message. I don’t cover those here either but if you want to know more about the contents of these headers, I recommend looking at them with wireshark (a program that lets you inspect packets), and reading the information at these links: TCP header , and IP header (for both section 3 gives the specifications of the header).

NAT – HTTP Traffic

HTTP traffic needed to be enabled from public to private and it needed to map to an internal node. As I mentioned previously, I already implemented NAT which does this mapping for us. With the settings above it mapped to the internal node 192.168.0.1.

In order to enable the HTTP traffic I added another line to tcp_packets:

1	$IPTABLES -A tcp_packets -p TCP -d $WEB_IP_ADDRESS --dport 80 -j allowed

This allowed HTTP packets destined for my internal node (which $WEB_IP_ADDRESS was set to).

In order to demonstrate this working, first I turned off iptables and accessed my Gateway’s HTTP server. The address was 10.0.0.254 and the html page (from the apache server) said “I am the GW”:

Here the gateway's html is showing for 10.0.0.254

Next I turn my iptables back on, and attempt to access the same address from the same computer. Now the packet is forwarded on and I get my private server’s web page:

10.0.0.254 is now shows the private network

Even though the private server’s actual IP address is 192.168.0.1, it displays because it has been correctly mapped with NAT.

INPUT – Enable SSH

Next I wanted to enable ssh connections to the firewall from both public and private networks, but have the access from the public side go to the inner node again.

These rules need to attach to the INPUT chain as well as the FORWARD, because in one case the SSH is destined for the Gateway. I used the following command in order to allow this communication:

1 2	$IPTABLES -A INPUT -p TCP -m state --state ESTABLISHED,RELATED -j ACCEPT $IPTABLES -A INPUT -p TCP -i $LAN_1_IFACE -s $LAN_1_IP_RANGE --dport 22 -j ACCEPT

The first command allows all established communication to continue. The second takes the private network’s range and allows it to connect to the private side of the gateway.

In order to get the public side to connect to the private network again, I simply added another entry to the forwarding chain:

1	$IPTABLES -A tcp_packets -p TCP -d $WEB_IP_ADDRESS --dport 22 -j allowed

This connection is shown below:

SSH to gateway from the public side

As you can see the communication was initiated by 10.0.0.1, the public side, and its destination was 10.0.0.254, its side of the gateway. But after logging in with the ssh, typing ifconfig shows that the address logged into is in fact 192.168.0.1, the private server.

SSH from private to gateway

Here the SSH is initiated by the private network (192.168.0.1) and it connects to 192.168.0.254. Both addresses of the gateway came up after typing ifconfig, but in the picture only 10.0.0.254 is evident. Also notice that wireshark has SSH as the protocol.

OUTPUT – From the Firewall

Next I wanted to enable both SSH and ping from the firewall to public networks. Because they originate with the gateway, we add their entries to the output chain:

$IPTABLES -A OUTPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
$IPTABLES -A OUTPUT -p ICMP -j ACCEPT
$IPTABLES -A OUTPUT -p TCP -j tcp_packets
$IPTABLES -A tcp_packets -p TCP -s $LAN_1_IP --dport 22 -j allowed
$IPTABLES -A tcp_packets -p TCP -s $LAN_0_IP --dport 22 -j allowed

The first line again allows established communication to continue, while the second allows pings to be sent from the Gateway. The last three lines say that when originating from the gateway, TCP and SSH packets are allowed.

NAT in Action

This last bit is just to show a little bit of Wireshark and a little bit of NAT in action.

Inbound Packets Changed

Here you see the public address 10.0.0.1 accessing 10.0.0.254, the Public side of the Gateway. That address is then changed as we move over to the interface on the Private side of the Gateway, and it becomes 192.168.0.1 (the correct destination of the internal client).

The opposite also works:

Outbound Packets Changed

Last Words and Appendix

This is a very simple implementation, but Iptables can be much more sophisticated. Maybe at some point in the future I’ll do a part 2 with some of those features. Here’s the configuration file I promised:

# Static IP address of public network
#
LAN_0_IP="10.0.0.254"
LAN_0_IP_RANGE="10.0.0.0/8"
LAN_0_BCAST_ADRESS="10.255.255.255"
LAN_0_IFACE="eth5"
#
# 1.2 Local area network configuration.
#
#
#
# Internal firewall private side
#
LAN_1_IP="192.168.0.254"
LAN_1_IP_RANGE="192.168.0.0/24"
LAN_1_BCAST_ADRESS="192.168.0.255"
LAN_1_IFACE="eth6"
#
# IP aliases
#
LO_IFACE="lo"
LO_IP="127.0.0.1"
WEB_IP_ADDRESS="192.168.0.1"
INTERNAL_PRIVATE_SUBNET="192.168.0.0/24"
#
# 1.3 IPTables Configuration.
#
IPTABLES="/sbin/iptables"
#
###########################################################################
#
# 2. Module loading.
#
#
# Needed to initially load modules
#
/sbin/depmod -a	 
#
# flush iptables
#
/sbin/iptables -F 
/sbin/iptables -F -t nat
#
# 2.1 Required modules
#
/sbin/modprobe ip_tables
/sbin/modprobe ip_conntrack
/sbin/modprobe iptable_filter
/sbin/modprobe iptable_mangle
/sbin/modprobe iptable_nat
/sbin/modprobe ipt_LOG
/sbin/modprobe ipt_limit
/sbin/modprobe ipt_state
#
# 2.2 Non-Required modules
#
#/sbin/modprobe ipt_owner
#/sbin/modprobe ipt_REJECT
#/sbin/modprobe ipt_MASQUERADE
#/sbin/modprobe ip_conntrack_ftp
#/sbin/modprobe ip_conntrack_irc
#/sbin/modprobe ip_nat_ftp
#
###########################################################################
#
# 3. /proc set up.
#
#
# 3.1 Required proc configuration
#
#
# Enable ip_forward, this is critical since it is turned off as defaul in 
# Linux.
#
echo "1" > /proc/sys/net/ipv4/ip_forward
#
# 3.2 Non-Required proc configuration
#
#
# Dynamic IP users:
#
#echo "1" > /proc/sys/net/ipv4/ip_dynaddr
#
###########################################################################
#
# 4. rules set up.
#
#
# The kernel starts with three lists of rules; these lists are called firewall
# chains or just chains. The three chains are called INPUT, OUTPUT and FORWARD.
#
# The chains are arranged like so:
#
#                     _____
#                    /     \
#  -->[Routing ]--->|FORWARD|------->
#     [Decision]     \_____/        ^
#          |                        |
#          v                       ____
#         ___                     /    \
#        /   \                   |OUTPUT|
#       |INPUT|                   \____/
#        \___/                      ^
#          |                        |
#           ----> Local Process ----
#
# 1. When a packet comes in (say, through the Ethernet card) the kernel first 
#    looks at the destination of the packet: this is called `routing'.
# 2. If it's destined for this box, the packet passes downwards in the diagram, 
#    to the INPUT chain. If it passes this, any processes waiting for that 
#    packet will receive it. 
# 3. Otherwise, if the kernel does not have forwarding enabled, or it doesn't 
#    know how to forward the packet, the packet is dropped. If forwarding is 
#    enabled, and the packet is destined for another network interface (if you 
#    have another one), then the packet goes rightwards on our diagram to the 
#    FORWARD chain. If it is ACCEPTed, it will be sent out. 
# 4. Finally, a program running on the box can send network packets. These 
#    packets pass through the OUTPUT chain immediately: if it says ACCEPT, then 
#    the packet continues out to whatever interface it is destined for. 
#
######
# 4.1 Filter table
#
#
# 4.1.1 Set policies
#
#
# Set default policies for the INPUT, FORWARD and OUTPUT chains
#
$IPTABLES -P INPUT DROP
$IPTABLES -P OUTPUT DROP
$IPTABLES -P FORWARD DROP
# 
##################################################
# Create custom chains
##################################################
#
$IPTABLES -N allowed
$IPTABLES -N tcp_packets
$IPTABLES -N icmp_packets
#
#
# allowed rules
# new connections, established ones
$IPTABLES -A allowed -p TCP --syn -j ACCEPT
$IPTABLES -A allowed -p TCP -m state --state ESTABLISHED,RELATED -j ACCEPT
$IPTABLES -A allowed -p TCP -j DROP
#
# TCP rules
# 
$IPTABLES -A tcp_packets -p TCP -s $INTERNAL_PRIVATE_SUBNET -m multiport --dport 20,21,80 -j allowed
$IPTABLES -A tcp_packets -p TCP -d $WEB_IP_ADDRESS -m multiport --dport 22,80 -j allowed
$IPTABLES -A tcp_packets -p TCP -s $INTERNAL_PRIVATE_SUBNET -d $LAN_1_IP --dport 22 -j allowed
$IPTABLES -A tcp_packets -p TCP -s $LAN_1_IP --dport 22 -j allowed
$IPTABLES -A tcp_packets -p TCP -s $LAN_0_IP --dport 22 -j allowed
#
# ICMP rules
#
$IPTABLES -A icmp_packets -p icmp -d $INTERNAL_PRIVATE_SUBNET --icmp-type 8 -j REJECT
$IPTABLES -A icmp_packets -p icmp --icmp-type 0 -j ACCEPT
$IPTABLES -A icmp_packets -p icmp --icmp-type 8 -j ACCEPT
#
##############################################
# INPUT chain
###############################################
# 
$IPTABLES -A INPUT -p TCP -m state --state ESTABLISHED,RELATED --sport 22 -j ACCEPT
$IPTABLES -A INPUT -p TCP -i $LAN_1_IFACE -s $LAN_1_IP_RANGE --dport 22 -j ACCEPT
$IPTABLES -A INPUT -p ICMP --icmp-type 0 -j ACCEPT
#
##############################################
# FORWARD chain
#############################################
#
$IPTABLES -A FORWARD -p TCP -m state --state ESTABLISHED,RELATED -j ACCEPT
$IPTABLES -A FORWARD -p TCP -j tcp_packets
$IPTABLES -A FORWARD -p ICMP -j icmp_packets
#
#############################################
# OUTPUT chain
#############################################
#
$IPTABLES -A OUTPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
$IPTABLES -A OUTPUT -p TCP -j tcp_packets
$IPTABLES -A OUTPUT -p ICMP -s $LO_IP -j ACCEPT
$IPTABLES -A OUTPUT -p ICMP -j ACCEPT
#
############################################
# NAT routing
############################################
#
# Prerouting
#
$IPTABLES -t nat -A PREROUTING -p tcp -d $LAN_0_IP --dport 80 -j DNAT --to $WEB_IP_ADDRESS:80
$IPTABLES -t nat -A PREROUTING -p tcp -d $LAN_0_IP --dport 22 -j DNAT --to $WEB_IP_ADDRESS:22
#
# POSTROUTING chain.
#
$IPTABLES -t nat -A POSTROUTING -s $INTERNAL_PRIVATE_SUBNET -o $LAN_0_IFACE -j SNAT --to $LAN_0_IP
#
#

Red5 Server

Ace — Fri, 02 Jul 2010 04:44:26 +0000

Setting up the Red5 server turned out to be a little more of a challenge than I thought it would (just a reminder, as always I’m doing this on Snow Leopard). I installed the stand alone version in my applications folder (you can download it from http://red5.org/wiki/Releases), double clicked it and didn’t see anything happen. I was at least expecting some sort of interface to let me know it was running, but nothing. With a little searching I found that opening my browser with http://localhost:5080 would show me that it was up and running. Installing a few of the demos proved it was the real deal, but now I had to figure out the man behind the curtain: how the server was running, and how to make it run my stuff.

That simply took right clicking on the Red5 application and choosing “show package contents”. Annoyingly simple for the time it took me to figure out, I’m embarrassed to say. Under Content/Resources/Java you find the folder webapps, and that’s where the magic happens. Anything you want running on the server should be here.

Before I get to making Apps run on the server, I have to make a plug for the Red5 plugin for Eclipse. It makes a huge difference during development and has been a lifesaver for me. Long story short, use this tutorial to set up the Red5 plugin on your machine: http://red5.org/wiki/Red5Plugin. It didn’t quite match up with my version of Eclipse but it was close enough to make it work. Once you have that plugin installed, you’re ready to start working on your App.

On the same Red5 wiki they walk through creating a new Red5 project http://red5.org/wiki/Red5Plugin/CreatingRed5Projects. The only problem is that there really isn’t much there. So I thought I’d fill in a few of the gaps here, and if you see any more you’d like me to fill let me know. For now I’m just putting this up as a reference for myself, since getting a working app has taken me all over the web and back.

I was interested in creating a video chat application using flash. That’s why I needed Red5 in the first place instead of other open source servers out there. Red5 allows streaming with RTMP, which is necessary for live chats and overkill for non-streaming.

My video chat would need server side Java code (it turns out I used Cirrus Flash peer 2 peer instead and didn’t even need Red5 – if you want to see take a look at http://Zazzer.me) and probably PHP, along with the client stuff. In order to set up the server so that the client could actually find it took a decent amount of searching. I’m assuming you’ve already started by creating the project, and now you’re writing the Java source. Here is an example of what needs to be in the source for it to interact with the client:

package myPackageName;
import org.red5.server.adapter.ApplicationAdapter;
public class Application extends ApplicationAdapter
{
     public String hello(String name)
     {
          return name + "I see you";
     }
}

Here I’ve extended the ApplicationAdapter class, which is the one that listens for the client. So the big part is good to go, but the devil is in the details. What else do I have to configure in order to get this to work? Well there are a few simple files that are not configured for you (at least they weren’t for me) that you have to fix before any flash client will find this application. Those files are web.xml, red5-web.xml, and red5-web.properties.

In web.xml you must include:

        >
		>webAppRootKey>
		>/yourAppName>
	>
	>
		>rtmpt>
		>org.red5.server.net.rtmpt.RTMPTServlet>
		>1>
	>
	>
		>rtmpt>
		>/fcs/*>
	>
 
	>
		>rtmpt>
		>/open/*>
	>
 
	>
		>rtmpt>
		>/close/*>
	>
 
	>
		>rtmpt>
		>/send/*>
	>
 
	>
		>rtmpt>
		>/idle/*>
	>

Red5 uses webAppRootKey to create the handshake with the NetConnection class in Flash. In this case rtmp://yourServerName/yourAppName would be the string you pass to NetConnection in order make the connection.

Web.xml is done, next up: red5-web.xml. This one was tricky because every resource I came across just told me to include a bean specifying the web.handler. However it didn’t work until I had everything else you’ll find here. It may work with less for you, but like I said this is more a reference for me anyway so I’m putting it all up:

I didn’t really bother to check to see why it didn’t work before but did after the extra beans. If you’re interested you tell me! Last of all red5-web.properties is simple enough:

webapp.contextPath=/yourAppName
webapp.virtualHosts=*, localhost, localhost:8088, 127.0.0.1:8088

That should do it for the server. Once that’s rollin it’s just a matter of writing the client and connecting with the rtmp I mentioned before. For example:

package
{
  import flash.net.NetConnection;
        import flash.display.Sprite;
  import flash.text.TextField;
  import flash.events.NetStatusEvent;
 
  public class FMS3Connect extends Sprite
  {
        private var nc:NetConnection;
        private var rtmpNow:String;
        private var msg:String;
        private var connectText:TextField;
        private var posX:Number;
 
        var responder:Responder = new Responder(setValue, null);
 
	function setValue(obj:Object):void
		{
                    trace(obj.toString());
                }
 
        function Connect ()
        {
             nc=new NetConnection();
             nc.addEventListener (NetStatusEvent.NET_STATUS,checkConnect);
             rtmpNow="rtmp://yourServerName/yourAppName";
             nc.connect (rtmpNow);
        }
        private function checkConnect (event:NetStatusEvent):void
        {
             trace(event.info.code);
             switch(event.info.code)
             {
                  case "NetConnection.Connect.Success":
                        nc.call("hello",responder,"billy");
                        trace("success");
                        break;
                  default:
                        trace("no luck amigo");
        }
  }
}

Ok so I won’t swear by that code because I just wrote it now, but if it doesn’t work it’s damn close because it’s almost the same as what I have in my app and that works.

I think this is quite enough for one post. Hopefully it’s helpful to any hapless readers, let me know if I should fix anything (assuming anyone makes it to this line).

Also if you’re looking for more information to fill in the gaps, I’ll start posting links to resources I find below:

http://www.red5tutorials.net/index.php/Tutorials:Getting_Started_With_Red5_Server

Red5 Video Chat Example

Ace — Fri, 16 Jul 2010 18:42:44 +0000

Alright so I’ve finally got my Red5 server up, running and working with a simple video chat. It took some looking around, mostly because there aren’t a lot of comprehensive tutorials out there and most of the ones I did find were outdated, so hopefully this will make it easier for beginners to get up and running.

By the way, if you want to see my final product actually working, go to http://Zazzer.me! It actually doesn’t use the Red5 component (I decided Cirrus and peer to peer was much better for my purposes) but it covers part of this.

Debugging the server-side code, however, has still has been a bit of a mystery to me. I’ve been running the standalone Red5 server that you can find here: http://red5.org/wiki/0_9_1 (that’s the latest release at the time of this post, 9.1). From the searching I’ve done until now the only answer I got was to run the war from inside tomcat and debug it that way. I’ll probably resort to that once I run across a problem that logging doesn’t fix, but that hasn’t happened yet so I may follow this up later.

If you’re not using Eclipse, this won’t be quite as useful to you. I’m using the Red5 plugin which builds the project and deploys it to the Red5 server for you. Getting it working involves creatively following: http://red5.org/wiki/Red5Plugin and then, http://red5.org/wiki/Red5Plugin/CreatingRed5Projects.

Those two together should get you up and running with a new dynamic web project. For the sake of this tutorial I’m going to assume you called yours Chatter. From there you need to edit your web.xml file. Mine looks like this:

       >Chatter>
 
	>
		>webAppRootKey>
		>/Chatter>
	>
 
    >
	    >globalScope>
	    >default>
	>
 
    >
	    >contextConfigLocation>
	    >/WEB-INF/red5-*.xml>
	>
 
	>
		>locatorFactorySelector>
		>red5.xml>
	>
 
	>
		>parentContextKey>
		>default.context>
	>
 
	>
		>rtmpt>
		>org.red5.server.net.rtmpt.RTMPTServlet>
		>1>
	>
 
	>
		>rtmpt>
		>/fcs/*>
	>
 
	>
		>rtmpt>
		>/open/*>
	>
 
	>
		>rtmpt>
		>/close/*>
	>
 
	>
		>rtmpt>
		>/send/*>
	>
 
	>
		>rtmpt>
		>/idle/*>
	>

That will tell Red5 where it’s configuration files are. They should be placed along side it (in the WebContent/WEB-INF/ folder). The first, red5-web.properties should include:

1 2	webapp.contextPath=/Chatter webapp.virtualHosts=*, localhost, localhost:8088, 127.0.0.1:8088

Next red5-web.xml should include:

 
 version="1.0" encoding="UTF-8"?>

>
 
	 id="placeholderConfig" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
	     name="location" value="/WEB-INF/red5-web.properties" />
	>
 
	 id="web.context" class="org.red5.server.Context" 
		autowire="byType" />
 
	 id="web.scope" class="org.red5.server.WebScope"
		 init-method="register">
		 name="server" ref="red5.server" />
		 name="parent" ref="global.scope" />
		 name="context" ref="web.context" />
		 name="handler" ref="web.handler" />
		 name="contextPath" value="${webapp.contextPath}" />
		 name="virtualHosts" value="${webapp.virtualHosts}" />
	>
 
	 id="web.handler" 
	    class="chatter.Application" 
		singleton="true" />
 
>

The most important feature here is the “web.handler” bean. It directs red5 to where you keep your Java class that people connect to. In this case I wrote chatter.Application. Chatter is the package, Application is the name of the class. It extends ApplicationAdapter and is called Application by convention.

Here is an example Application file:

 
package chatter;
import java.util.HashMap;
 
import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;
import org.red5.server.api.Red5;
import org.red5.server.api.service.*;
import static java.lang.System.*;
import java.util.Stack;
 
public class Application extends ApplicationAdapter{
	//private static final Log log = LogFactory.getLog( Application.class );
 
	public HashMap<String,User> users = new HashMap<String,User>();
	public Stack<String> vidStreams = new Stack();
 
	public boolean appStart(IScope scope){
		out.println("Setting up"+vidStreams.size());
		vidStreams.push("left");
		vidStreams.push("right");
		return true;
	}
 
	public void appStop(){
	    // This function fires when the app is closing
	}
 
	public double addSomething(double a, double b){
            // This is a method we will call from our flash client
		out.println("Adding: "+a+" + "+b);
		return a+b;
	}
 
	public String streamer(Object name){
            // Here is another example of a method we'll call from the flash client
            // I'm using System.outs instead of logging because I've had some trouble
            // with the logging.  I'll update it if I get it working.
 
		out.println("StreamSelect parameter: "+ name.toString());
		IConnection current = Red5.getConnectionLocal();
		String uid = current.getClient().getId();
		out.println("current: "+current.getClient().toString());
		User user = users.get(uid);
		out.println("username: "+user.username);
		out.println("uid: "+uid);
		out.println("stream: "+user.stream);
		return user.stream;
	}
 
	public boolean connect(IConnection conn, IScope scope, Object[] params) {
            // This is the master connection method called every time someone connects
            // to the server.
 
		out.println("Number of parameters passed: "+ params.length+" Value: "+params[0]);
		out.println("vidStreams peek: "+vidStreams.peek());
 
		// Check if the user passed valid parameters.
		//params = pseudo onlineStatus role sexe  room world
 
 
		if (params == null || params.length == 0) {
			out.println("No Username Passed");
			//Reject client terminates the execution of current client
			rejectClient("Username required, client rejected.");
		}
 
		if (vidStreams.empty()){
			out.println("Quota full, rejected");
			rejectClient("Quota full, rejected");
		}
 
		//ID increments each connection
		String uid = conn.getClient().getId();
		String username = params[0].toString();		
		String stream = vidStreams.pop();
 
		out.println("User setup, username:"+username+" stream: "+stream);
		// Call original method of parent class.
		if (!super.connect(conn, scope, params)) {
			return false;
		}	
		out.println("1");
		User user = new User(uid,username,stream);
		users.put(uid, user);
 
		ServiceUtils.invokeOnAllConnections(scope, "joinuser", new Object[] {username,uid} );		
		return true;
	}
	/*
	 * (non-Javadoc)
	 * @see org.red5.server.adapter.ApplicationAdapter#disconnect(org.red5.server.api.IConnection, org.red5.server.api.IScope)
	 * disconnect an user form the chat and notify all others users 
	 */
	public void disconnect(IConnection conn, IScope scope) {
            // Function called every time someone disconnects from the server.
 
		// Get the previously stored username.
		String uid = conn.getClient().getId();	
		//out.println("Disconnection: "+uid);
		// Unregister user.
		String stream = users.get(uid).stream;
		String username = users.get(uid).username;
		users.remove(uid);
 
		vidStreams.push(stream);
 
		out.println("Removed: "+username+" with: "+stream+" and uid:"+uid);
 
		ServiceUtils.invokeOnAllConnections(scope, "removeuser", new Object[] {username,uid} );
		super.disconnect(conn, scope);
 
	}	
 
	public boolean joinuser(String username, String uid) {
		out.println("join invoked: "+username+" "+uid);
		return true;
	}
 
	public boolean removeuser(String username, String uid) {
		out.println("remove invoked: "+username+" "+uid);
		return true;
	}
 
}

I also have a separate class for Users:

package chatter;
 
public class User {
	public String uid = null;
	public String username = null;
	public String stream = null;
 
	public User(String uid,String username,String stream) {
	      this.uid = uid;
	      this.username = username;
	      this.stream = stream;		      
	}
}

Now that all of the server stuff is ready, create a new .fla file and in the properties inspector for the stage, go to Class and write whatever you want there. Since we’ve already named everything else Chatter we’ll stick with that. Flash will use the name of that class to look for .as files associated with it. Create a new file named “Chatter.as” (remember this name has to match whatever you named the class in Flash), and then put this actionscript in it:

package
{
  import flash.display.Sprite;
  import flash.display.MovieClip;
  import flash.events.NetStatusEvent;
  import flash.net.NetConnection;
  import flash.net.NetStream;
  import flash.media.Camera;
  import flash.media.Microphone;
  import flash.media.Video;
  import flash.net.Responder;
 
  public class Chatter extends Sprite
  {
        private var nc:NetConnection;
        private var good:Boolean;
        private var netOut:NetStream;
        private var netIn:NetStream;
        private var cam:Camera;
        private var mic:Microphone;
        private var responder:Responder;
	private var r:Responder;
        private var vidOut:Video;
        private var vidIn:Video;
        private var outStream:String;
        private var inStream:String;
 
        public function Chatter()
        {
             var rtmpNow:String="rtmp://localhost/Chatter";
             nc=new NetConnection;
             nc.connect(rtmpNow,"testName");
             nc.addEventListener(NetStatusEvent.NET_STATUS,getStream);
        }
 
        private function getStream(e:NetStatusEvent):void
        {
             good=e.info.code == "NetConnection.Connect.Success";
             if(good)
             {
                  // Here we call functions in our Java Application
                   responder=new Responder(streamNow);
		   r = new Responder(adder);
		   nc.call("addSomething",r,2,3);
                   nc.call("streamer",responder,"test");
             }
        }
 
		private function adder (obj:Object):void{
			trace("Total = ",obj.toString());
		}
 
        private function streamNow(streamSelect:Object):void
        {
             setCam();
             setMic();
             setVid();
	     trace("We've got our object",streamSelect.toString());
             switch(streamSelect.toString())
             {
                   case "left" :
                        outStream="left";
                        inStream="right";
                        break;
                   case "right" :
                        outStream="right";
                        inStream="left";
                        break;
             }
 
             //Publish local video
             netOut=new NetStream(nc);
             netOut.attachAudio(mic);
             netOut.attachCamera(cam);
             vidOut.attachCamera(cam);
             netOut.publish(outStream, "live");
 
             //Play streamed video
             netIn=new NetStream(nc);
             vidIn.attachNetStream(netIn);
             netIn.play(inStream);
        }
 
        private function setCam():void
        {
             cam=Camera.getCamera();
             cam.setMode(240,180,15);
             cam.setQuality(0,85);
        }
 
        private function setMic():void
        {
             mic=Microphone.getMicrophone();
             mic.rate=11;
             mic.setSilenceLevel(12,2000);
        }
 
        private function setVid():void
        {
             vidOut=new Video(240,180);
             addChild(vidOut);
             vidOut.x=25;
             vidOut.y=110;
 
             vidIn=new Video(240,180);
             addChild(vidIn);
             vidIn.x=vidOut.x+260;
             vidIn.y=110;
        }
  }
}

And that should be all of the pieces that you need to get a basic flash based, red5 using video chat up and running.

Unix Symbolic Links

Ace — Thu, 01 Jul 2010 23:21:41 +0000

I run quite a few servers on my machine so I use symbolic links quite a bit. That lets me have the files in one place, but still be able to access them on my server in another place, etc etc. I don’t make these links very often and when I do I usually look up how, so I thought I’d just post something about it so I remember for next time.

Using Unix (or Mac OSX) it’s a simple process. First open your Terminal in Applications/Utilities and then write:

1	ln -s /Location/of/fileorFolder /Location/of/alias/with/name/at/end

ln for link, -s for symbolic, and the source and destination.

So an actual example of this is:

1	ln -s ~/home/dev/ dev

That created a link to the folder “dev” in the folder I was in.

If you’re still getting the error “Forbidden: You don’t have permission to access / on this server” or the 403 forbidden “Symbolic link not allowed or link target not accessible” it’s probably because of the permissions in the original folder (not the link). You can change those by navigating to them and typing:

1	chmod 755 fileNameHere

So if the filename path was home/Documents/fileNameHere, then you would do the chmod like this:

1	chmod 755 /home/Documents

Caret Position Woes

Ace — Thu, 08 Jul 2010 23:10:00 +0000

Anyone that has tried to create a rich in-browser HTML text editor has had to deal with Internet Explorer and its caret positioning issues (For those wondering that’s the blinking line that shows where you’re typing. It’s also called a cursor but people usually reserve that to refer to the mouse). It isn’t too difficult if you use BODY, BUTTON, TEXTAREA, or an INPUT element having text type (TYPE=”text”). In that case it’s just a matter of using createTextRange() and finding the text position. For anyone trying to figure out how to do that, here is some example code:


 
 
 
  
 
  
 
   Text Field: 
   

   
   New Position:

Need something more powerful? Here’s a nifty little JQuery plugin.

If you’ve tried doing that with a contentEditable div, you’ll have realized that it’s much more difficult. You see friendly Internet Explorer doesn’t support createTextRange() for contentEditable divs, and since they are better for rich html, this creates a problem.

Solution: be tricky too. Instead of creating the text range on the node, create it on the BODY and then move it to the node! I’m a dojo man (take a look at the Dojo Toolkit here), so in dojo you type:

var range = dojo.doc.selection.createRange();
var rs = dojo.body().createTextRange();
rs.moveToElementText(yourContentEditableDivNode);
//Now duplicate the range so we can use one to get the end point
var re = rs.duplicate();
rs.moveToBookmark(range.getBookmark());
re.setEndPoint('EndToStart', rs);
//Now re is only the text up until the caret
console.warn("The text before the cursor is: ",re.text," Its position is: ",re.text.length);

Dojo has a rich text editor, and it uses a class dijit._editor.range which is a singleton and has quite a bit of useful text for getting ranges in IE. If you haven’t used dojo before for Javascript development I’d recommend it, it’s an incredible open source library. Click here to see an example implementation (you should really look at this it’s fantastic).

Google has some code that should give IE w3c selections. It’s here.

Refactoring

Ace — Fri, 02 Jul 2010 17:52:41 +0000

I’ve recently been introduced to refactoring code. It’s basically cleaning it up, making it more readable, and matching logic. High level blocks of code should be together and call mid level blocks of code, which should be grouped and call low level blocks of code (which would be the most detailed code). Naming should be intuitive, and so forth.

Refactoring is an essential part of the software development cycle, so I’ve decided to start paying more attention to it.

If you are like me and you’re just discovering this topic, there are some great screencasts available to give a clear idea of what it is. These are examples of code refactoring in Ruby using a plugin for Eclipse and can be found at http://r2.ifs.hsr.ch/trac/wiki/Screencasts. As I find more resources I’ll post them here. Until then here are a few other links I found useful:

http://www.refactoring.com/

http://en.wikipedia.org/wiki/Code_refactoring

Installing/Removing Gems

Ace — Wed, 07 Jul 2010 16:03:51 +0000

When installing gems I forget to use sudo all the time. What I end up with is warnings and gems being paced in my home folder ~/.gems instead of where I want them. It looks like this:

$ gem install <gem-name>
  WARNING:  Installing to ~/.gem since /usr/local/ruby-1.8.6-p287/lib/ruby/gems/1.8 and
    /usr/local/ruby-1.8.6-p287/bin aren't both writable.
  WARNING:  You don't have /Users/jamesmead/.gem/ruby/1.8/bin in your PATH,
    gem executables will not run.

If you just don’t like using sudo, here’s a good article on that: http://dev.innovationfactory.nl/2009/10/26/never-use-sudo-gem-install-again/.

If you installed them without using sudo and now want them in the right place, first you’ll need to uninstall them. A normal uninstall will give this error:

1
2
3

$ gem uninstall <gem-name>
  ERROR:  While executing gem ... (Gem::InstallError)
    Unknown gem <gem-name> >= 0

You might be tempted to just delete the gems folder (~/.gems). I tried that but when it gets installed the paths are stored somewhere else… long story short it won’t be pretty. Instead you need to use the –install-dir parameter when uninstalling like this:

1 2	$ gem uninstall <gem-name> --install-dir=~/.gem/ruby/1.8/ Successfully uninstalled <gem-name>-x.y.z

Andes Tutor Intro

Ace — Wed, 14 Jul 2010 21:10:02 +0000

One of my current projects is the Andes Physics Tutor. This is a project being developed at ASU, and occasionally I’ll be posting help videos that show how to use it. To watch it as it develops check http://gideon.eas.asu.edu/web-UI/login.html and try some problems. Before you do that check this video out to get an idea of how it works:

WhatATool (Assignment 1B & 2A)

Ace — Sun, 10 Jan 2010 11:23:59 +0000

The WhatATool Project

I’m going through the CS 193P iPhone Dev course that Stanford has put up on iTunes U, and I thought I’d go ahead and publish my code in case anyone else is going through it too and wants to see alternate ways of doing things. This is my solution for assignment 1B and 2A.

WhatATool.m

#import 
#import "PolygonShape.h"
 
void PrintPathInfo() {
 
	NSLog(@"===Print Path Info====");
	NSString *path = @"~";
 
	NSString *expand = [path stringByExpandingTildeInPath];
	NSLog(@"My home folder is at '%@'", expand);
 
	NSArray *comp = [expand pathComponents];
	for(NSString *pc in comp){
		NSLog(@"%@",pc);
	}
 
}
 
void PrintProcessInfo(){
 
	NSLog(@"\n");
	NSLog(@"===Print Process Info====");
 
	//NSString *processName = [[NSProcessInfo processInfo] processName];
	NSString *processName = NSProcessInfo.processInfo.processName;
	NSInteger processID = [[NSProcessInfo processInfo] processIdentifier];
 
	NSLog(@"Process Name: %@ Process ID: '%d'", processName, processID);
 
}
 
void PrintBookmarkInfo(){
 
	NSLog(@"\n");
	NSLog(@"===Print Bookmark Info====");
 
	NSMutableDictionary *bookInfo = [NSMutableDictionary dictionaryWithCapacity:10];
	[bookInfo setObject:[NSURL URLWithString:@"http://www.stanford.edu"] forKey:@"Stanford University"];
	[bookInfo setObject:[NSURL URLWithString:@"http://www.apple.com"] forKey:@"Apple"];
	[bookInfo setObject:[NSURL URLWithString:@"http://www.cs193p.stanford.edu"] forKey:@"CS193P"];
	[bookInfo setObject:[NSURL URLWithString:@"http://www.itunes.stanford.edu"] forKey:@"Stanford on iTunes U"];
	[bookInfo setObject:[NSURL URLWithString:@"http://www.stanfordshop.com"] forKey:@"Stanford Mall"];
 
	for (NSString *info in bookInfo){
		if ([info hasPrefix:@"Stanford"]) {
			NSLog(@"Key: '%@' URL: '%@'", info, [bookInfo objectForKey:info]);
		}
 
	}
}
 
void PrintIntrospectionInfo(){
 
	NSLog(@"\n");
	NSLog(@"===Print Introspection Info====");
 
	NSMutableArray *introSpec = [NSMutableArray arrayWithCapacity:10];
 
	NSURL *url = [NSURL URLWithString:@"http://www.stanford.edu"];
	NSString *str = @"Here's a string";
	NSString *processName = [[NSProcessInfo processInfo] processName];
	NSDictionary *dict = [NSDictionary dictionary];
	NSMutableString *mstr = [NSMutableString string];
	[mstr appendString:@"My hard "];
	[mstr appendFormat:@"work paid off"];
 
	[introSpec addObject:url];
	[introSpec addObject:str];
	[introSpec addObject:processName];
	[introSpec addObject:dict];
	[introSpec addObject:mstr];
 
	for(NSObject *intro in introSpec){
		NSLog(@"Class name: %@", [intro className]);
		NSLog(@"Is Member of NSString: %@", [intro isMemberOfClass:[NSString class]] ? @"YES" : @"NO");
		NSLog(@"Is Kind of NSString: %@", [intro isKindOfClass:[NSString class]] ? @"YES" : @"NO");
		//NSLog(@"Responds to lowercaseString: %@", [intro respondsToSelector:@selector(lowercaseString)] ? @"YES" : @"NO");
 
		SEL sel = @selector(lowercaseString);
 
		if ([intro respondsToSelector:sel]) {
			NSLog(@"Responds to lowercaseString: YES");
			NSLog(@"lowercaseString is: %@", [intro performSelector:sel withObject:intro]);
		} else {
			NSLog(@"Responds to lowercaseString: NO");
		}
 
		NSLog(@"==============================");
 
	}
 
}
 
void PrintPolygonInfo(){
 
	NSLog(@"===Print Polygon Info====");
 
	NSMutableArray *polygons = [[NSMutableArray alloc] init];
 
	PolygonShape *poly1 = [[PolygonShape alloc] initWithNumberOfSides:4 minimumNumberOfSides:3 maximumNumberOfSides:7];
	PolygonShape *poly2 = [[PolygonShape alloc] initWithNumberOfSides:6 minimumNumberOfSides:5 maximumNumberOfSides:9];
	PolygonShape *poly3 = [[PolygonShape alloc] init];
	[poly3 setNumberOfSides:12];
	poly3.minimumNumberOfSides = 9;
	poly3.maximumNumberOfSides = 12;
 
	[polygons addObject:poly1];
	[polygons addObject:poly2];
	[polygons addObject:poly3];
 
	for (id poly in polygons) {
		NSLog(@"%@",[poly description]);
	}
 
	for (id poly in polygons) {
		[poly setNumberOfSides:10];
	}
 
	for (id poly in polygons) {
		//NSLog(@"Releasing the %@",[poly name]);
		[poly release];
	}
 
	[polygons release];
 
}
 
int main (int argc, const char * argv[]) {
	NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
 
	PrintPathInfo(); // Section 1
	PrintProcessInfo(); // Section 2
	PrintBookmarkInfo(); // Section 3
	PrintIntrospectionInfo(); // Section 4
	PrintPolygonInfo(); //Section 6
 
	[pool release];
	return 0;
}

PolygonShape.h

#import 
 
@interface PolygonShape : NSObject {
	int numberOfSides;
	int minimumNumberOfSides;
	int maximumNumberOfSides;
}
 
//Properties
@property int numberOfSides;
@property int minimumNumberOfSides;
@property int maximumNumberOfSides;
@property (readonly) float angleInDegrees;
@property (readonly) float angleInRadians;
@property (readonly) NSString *name;
@property (readonly) NSString *description;
 
- (id)init;
- (id)initWithNumberOfSides:(int)sides minimumNumberOfSides:(int)min maximumNumberOfSides:(int)max;
- (void)dealloc;
 
@end

PolygonShape.m

//
//  PolygonShape.m
//  WhatATool
//
//  Created by Ace Sorensen on 1/9/10.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//
 
#import "PolygonShape.h"
 
 
@implementation PolygonShape
 
@synthesize numberOfSides;
@synthesize minimumNumberOfSides;
@synthesize maximumNumberOfSides;
 
- (void)dealloc {
	NSLog(@"Deallocating");
	[super dealloc];
}
 
- (id)init {
	return [self initWithNumberOfSides:5 minimumNumberOfSides:2 maximumNumberOfSides:12];
}
 
- (id)initWithNumberOfSides:(int)sides minimumNumberOfSides:(int)min maximumNumberOfSides:(int)max {
	if (self = [super init]) {
		[self setMaximumNumberOfSides:max];
		[self setMinimumNumberOfSides:min];
		[self setNumberOfSides:sides];
	}
	return self;
 
}
 
- (void)setNumberOfSides:(int)sides{
	if (sidesmaximumNumberOfSides) {
		if(sides){
			NSLog(@"Invalid number of sides: %d is less than the minimum number of %d allowed",sides,minimumNumberOfSides);
		} else {
			NSLog(@"Invalid number of sides: %d is more than the maximum number of %d allowed", sides, maximumNumberOfSides);
		}
	} else {
		numberOfSides = sides;
	}
 
}
 
- (void)setMinimumNumberOfSides:(int)min{
	if (min<3) {
		NSLog(@"Attempting to set too low");
	} else {
		minimumNumberOfSides = min;
	}
 
}
 
- (void)setMaximumNumberOfSides:(int)max{
	if (max>12) {
		NSLog(@"Attempting to set higher than min");
	} else {
		maximumNumberOfSides = max;
	}
 
}
 
- (float)angleInDegrees {
	return (180 * (numberOfSides - 2) / numberOfSides);
}
 
- (float)angleInRadians {
	return (M_PI * (numberOfSides - 2) / numberOfSides);
}
 
- (NSString *)name {
	NSDictionary *names = [NSDictionary dictionaryWithObjectsAndKeys:@"Triangle", [NSNumber numberWithInt:3],
						   @"Square", [NSNumber numberWithInt:4],
						   @"Pentagon", [NSNumber numberWithInt:5],
						   @"Hexagon", [NSNumber numberWithInt:6],
						   @"Heptagon", [NSNumber numberWithInt:7],
						   @"Octagon", [NSNumber numberWithInt:8],
						   @"Nonagon", [NSNumber numberWithInt:9],
						   @"Decagon", [NSNumber numberWithInt:10],
						   @"Hendecagon", [NSNumber numberWithInt:11],
						   @"Dodecagon", [NSNumber numberWithInt:12], nil];
	return [names objectForKey:[NSNumber numberWithInt:[self numberOfSides]]];
}
 
- (NSString *)description {
	return [NSString stringWithFormat:@"Hello I am a %d-sided polygon (aka a %@) with angles of %.0f degrees (%f radians).", [self numberOfSides], [self name], [self angleInDegrees], [self angleInRadians]];
}
 
@end

Auto Draft

Ace — Wed, 30 Nov -0001 00:00:00 +0000

The Curse of Personality Theory

Ace — Thu, 12 Aug 2010 19:34:56 +0000

I was 16 when I took my first Myers-Briggs Type Indicator personality test. I don’t know whether it was just the normal teenage narcissism of loving to hear about oneself or whether it was the fact that my personality only comprised 1-3% of the US population (which in my mind made me extraordinary), but I was hooked. I went on to take psychology just for the personality theory and read all the literature that I could find on it including Please Understand Me II, which was a revelation to me. From then on I’ve understood people from this context.

To me understanding “blue” or “red” personalities (or their roughly equivalent ENFJ’s and ENTJ’s) was much easier within this framework (in this article I’ll use colors since most people don’t know the types-blue being motivated by intimacy, red by power, white by peace, and yellow by fun). Everything about personality theory was good.

My perspective on that didn’t change until a course I took in college when I started to realize people were using the theories in a subtly different way. Instead of understanding other people through personality theory, they tried to understand themselves. I probably would have done this too except that I have the sometimes regrettable trait of never taking anyone else’s opinions on things that I should be able to figure out on my own (even if it takes me years to do).

The problem wasn’t that they were using it as a foundation of understanding, that wouldn’t have been as bad. The problem was that they were using it as an excuse. This would come up in conversation when a “red” person would say something tactless and when confronted say “Sorry I can’t help it, I’m red.” Or a white personality would avoid confronting problems and say, “I can’t help it I’m white”.

The minute personality theory goes from a framework to a definition, that’s when there are huge problems. That simple misunderstanding can make someone who should be thinking “I have a personality that makes me prone to certain weaknesses” think, “I have a personality with weaknesses.” The first uses personality theory to pinpoint weaknesses to improve on, the second uses it as an excuse.

This isn’t a conscious decision, it just happens when people are lazy thinkers (which happens to be most of the time). As a result I wonder if personality theory has done more damage than good.

Great Lumbering Machine

Ace — Sun, 05 Sep 2010 21:52:03 +0000

My mind is like a great lumbering machine. I approach a new problem or subject and it looks daunting, not because the problem is too difficult, but because it will take so much sweat to begin the machine. So I heave and I strain and the engine shows signs of life until finally, after I feel near exhaustion the pistons catch and it roars to life.

After that everything is child’s play, it’s as if I see the world with pure understanding. I get a rush, a high from the effort, but if ever I relax then I am faced again with the effort of going.

I suppose it’s that way with everything. Nothing worthwhile comes without a price.

Guilt

Ace — Mon, 06 Sep 2010 20:15:23 +0000

Guilt is an essential emotion, but like every emotion it has a degenerate form. Here I want to look at both and contrast them.

To me guilt is the experience of the mind realizing that the individuals actions do not meet the requirements of society (mostly based on ones self perception of what society would be if their personality were multiplied a few billion times). In other words it is the mind realizing the individual is not living up to the golden rule. It is meant to be a motivating emotion that helps the individual be socially acceptable. Since we are social beings, this is an essential experience.

Correct instances are when the child steals and realizes that they took advantage of another person. They feel motivation to correct the imbalance by returning it to the owner and offering reparation for the temporary loss. These cases are always characterized by the individual having done something to cause the imbalance and having the responsibility to set it right.

Incorrect instances would be a situation like a thin person feeling responsible for a large person’s feeling bad about themselves and their largeness in their presence. This happens most often with females, and the guilt usually comes when the larger female develops an eating disorder (but there are cases all across the board, the important thing here is the pattern).

This is the crippling form of guilt. It is not what the emotion was designed for and as a result has very damaging results from anxiety to depression. The fundamental error here is that people are taking responsibility for things that aren’t their fault. It’s not their fault that the other individual feels bad about themselves for being larger. They can’t take responsibility for it and fix the error. All they can really do is fret, which explains the anxiety.

What should really happen in cases like these is the person should feel empathy for the other individual and offer help so the individual can remedy their situation and no longer feel badly. In that case both parties sleep better at night.

The bottom line is that the difference is in responsibility. If I have done wrong, I feel guilt and make amends. If I have done no wrong but my presence creates a situation that feels wrong, I feel empathy or even sympathy but that is not my burden. It is the others.

Self Pity

Ace — Thu, 07 Oct 2010 07:31:26 +0000

I’m sitting here, late at night thinking about self pity. It’s like comfort food, or any other self destructive behavior that we as human beings just can’t get away from. Why are we such a self destructive race?

The answer off the top of my head is that it’s self preservation in a shortsighted way (usually in circumstances where people feel helpless and think the comforting act will add more help than damage. I mean what can one indulgence do, right? Except that “one” in sentences like those really means endless “ones”). Endorphines now to shield the immediate pain by adding more later. I don’t know.

I do know that I hate self pity and I’m probably too critical of those that indulge in it. I remember crying on the playground in fourth grade, feeling sorry for myself; when I got to looking around everyone had gone. No one wanted to be around me that way. It was the last time I cried in public. It was the first time I started taking a firm hold on any moments where I wanted to feel self pity.

I realized that much of the time I felt self pity because it let me feel better about myself when I knew I wasn’t living up to my standards. I think that one came while reading the Sword of Shannara (still a grade school experience-the book is built around the fascinating premise of a magical sword that has the power to make people face the truth about themselves, which is agonizing to everyone founded on lies). I realized how hard it is to really face the truth about ourselves.

Since then I’ve made it a practice of trying to do that as often as possible, because I’ve realized that if I throw away the paralyzing feelings of guilt, all of a sudden all I have is powerful motivation to be better. And it works better than almost anything. That’s probably why it causes so much pain, because it has such great potential for growth when used correctly. But used incorrectly and it will blight a person and forever stunt them.

Get You Back Syndrome

Ace — Fri, 09 Jul 2010 23:46:17 +0000

Going along with the Reactive Disorder is the less serious but much more immature Get You Back Syndrome. How do you identify these people? Usually these are the type that are preoccupied with what other people are doing. They are critical, willing to pick apart anyone in any conversation, and have an insecure, faked confident disdain for everyone else.

What actions characterize these people? They will usually get upset if asked to do something and reply “but you didn’t…”. They also take offense easily and assume that anything you do is meant to slight them.

Their motivations are nearly always selfish, and they can’t fathom a world where people act unselfishly for others. So any actions that might be unselfish they see as mind games, and attempts to convince them otherwise are seen as more evidence that there really is a mind game going on.

These people are warped by their own selfish, critical eye and are nearly impossible to deal with.

All of this stems from selfishness. You see the purpose of much of their criticism is to level the playing field, because these people at heart feel outmatched. The devilish irony in this disease is that all of their looking around assures that they will be outmatched. Other people who don’t care what people think and who are just doing things to make themselves better will become better. No brainer.

These people who stand around worrying about what other people think are always standing.

So their inaction digs their own grave.

Example situation-the classic one here is parent and child. Parent works all day to support the child. The child watches TV all day and eats the parents food. The parent makes dinner for the child, the child eats it and then is upset when asked to help with the dishes. “But you’re not doing them!” the child says in a whiny voice to the parent. Maybe the parent isn’t doing them, but they have already proven that they will act very unselfishly for the relationship to work. The child on the other hand is very willing to take as many handouts as he/she can, but very unwilling to do anything unselfish for the relationship.

Bottom line, selfish people in relationships suck. Avoid them like the plague because their relationships never end well. You either end the relationship or are stuck with a free-loader on your hands.

Measure a Man (or woman)

Ace — Sun, 11 Jul 2010 22:54:18 +0000

My modus operandi with people has always been based on the quote: “If you treat an individual as he is, he will stay as he is; but if you treat him as if he were what he ought to be and could be, he will become what he ought to be and could be” (Johann Wolfgang von Goethe). Couple that with the golden rule and I thought this was the best way to treat people. It sets a high bar, but makes all kinds of room for mistakes as long as the person is making an effort to improve. I like to call it laid back perfectionism.

The problem I’ve discovered is not a lot of people live up to what they ought to and should be. They LOVE being seen in this positive light (in fact more often than not they present themselves this way), but for some reason they don’t embrace what it takes to be that way. This isn’t because it’s difficult, which, if the only reason, would be admirable because honestly perfection is just unreasonable (it’s the goal because of the old adage, shoot for the stars land on the moon). They don’t live up to who they could be because of an ignoble lack of effort.

The worst part part about it is they try to tell themselves their lack of performance is ok. It’s not in the form of admitting, “I’m just totally ok with being mediocre”. Most people can’t admit to themselves that’s what their lack of action means. Admitting that would mean that they’re a lazy, smoke in mirrors representation of what they could be.

No, instead it comes in the form of a long string of excuses, lies these people tell themselves to feel better about their half-assed lives.

“If it weren’t for _____, I would be something to behold.”

The truth is that they’d rather feel depressed about their lives than do something about it. That’s what their actions scream anyway. Why would anyone be ok with that?

Because it’s easy.

It’s easy and the self-spoken lies numb the burn of their insignificant, passable, second-rate-at-best efforts.

But that’s only half of the reason. The other half is much more subtle, and I would argue much more… persuasive for keeping these people from action.

The second half is that, in this imaginary world where the lie that’s holding them back isn’t holding them back, they would have succeeded. They don’t say, “If it weren’t for _____, I would have still failed for another reason”; they always say they would have succeeded. The excuse gives them a reason not to try, because then they might actually fail. And failing after trying for these people would mean that they really were failures after all, which is something they are only vaguely aware of in the foggy depths of this sad way of thinking.

At some level they are aware that they lie to themselves to protect themselves from failure, but they only see this fleeting thought in the form of blind anger, lashing out at people who try to help them succeed, because to hold the thought would be unbearable. What they don’t understand is, if they tried they might actually have a chance at succeeding. And even if they didn’t succeed, they would be able to look in the mirror with self respect.

The path that they choose is inevitable failure and shame.

The saddest part about the situation is that this fear of failure usually hampers the unusually capable. These individuals really could be something special if they would make a pact with themselves to be able to look themselves in the eyes every night after a valiant days efforts. Even if they didn’t reach what they hoped they’d be, they would still be great. They would be infinitely better than they are with the lies and the excuses. The lies and excuses leave only the shell of themselves, the insides ravaged by the disease.

And that’s why I’ve begun to wonder if this is the best way to treat people. Giving everyone the benefit of the doubt, the benefit of what they could be, coupled with the fact that so many people don’t have the strength or capacity to let go of their pride and try, means that life will present a long string of stinging disappointments. I see people like I see my favorite sports teams. I’m elated when they perform, and heartbroken when they turn in half hearted efforts.

But I can’t stop treating people this way, because I wouldn’t accept it if someone stopped treating me this way. And who knows, maybe persistance is enough to get people to change after long strings of failures. And maybe when they see love in you, like the love of a die hard team fan still believing in a championship from a championship-less team, they will finally hang up their coat of lies and give life the effort it deserves.

Auto Draft

Ace — Wed, 30 Nov -0001 00:00:00 +0000

The Beginning: Cloud Computing

Ace — Fri, 29 Jan 2010 21:57:11 +0000

Well here it is. The future. Or at least the future the way I see it, dream it, or want to make it. Everything under the title “futurizing” will be my view of the future role computers will play with people and projects I’d like to take on to do my part in getting them there.

So getting right into it, there’s one subject I’ve thought about for a long time. I got my start with computers as a web developer. This idea was already in my head before then but it wasn’t until then that I could finally articulate it. Drum roll… I wanted to have all of my digital data accessible to me via any electronic device I was using at the time.

I know, I know, you’re probably thinking “here we go, Al Gore number two. This guy thinks he invented the idea of cloud computing and is too stupid to realize that it’s already happening”. You’re very smart, I am going to be talking about cloud computing. But not the way that it’s being done now.

Now cloud computing means, for the most part that data is kept on someone’s cloud. Whether it’s Google’s, Apple’s, etc etc, your data is on someone else’s machine (and controlled by them). While Google’s been the biggest force pushing for this with their docs, the new Android phones, and the soon to be Chrome OS, Apple is following suit with Mobile Me and even recent acquisitions (Apple’s Secret Cloud Strategy). And for the sake of being unbiased Microsoft is jumping on board too with mobile versions of office etc.

I like that everything can synch up easily this way and I like that things are moving towards a more unified cross platform solution, but there are some things I’m not so hot on.

Call me old fashioned but I like owning my stuff. I like having control over it and I don’t love the idea of depending on Google to keep its servers up and not poke around. I’m not paranoid, I don’t mind them gathering data to make my searches better and what have you, but I do like having a measure of privacy. So the version of cloud computing that I would like to have is more of a limited cloud.

What I would like to see is a cloud where we could set up our main computer as a server of sorts. All of our data could be kept on it, so that’s where we’d need all of our memory. Then we could access it from any other device that we wanted: laptops, phones, iPads, whatever. But more than that, ideally I’d like all of my other machines that are connected to my main machine to feel like they’re just smaller versions. So I’d still be using my computer, just a smaller version when all I have is my phone. This is more than the unified feel of the iPhone, iPad and Mac (though I love the coherence between the operating systems). While they are all versions of the same system there are still breaks between them.

I’m thinking more along the lines of browsers. This is where I think the genius of Google’s Chrome OS lies. What Chrome does is it makes the browser the main portal to computing and data. It’s the obvious choice because the web needs to be standard in order to be viewed by all computers alike. It is the natural glue that will make every operating system support it. But if we could have our own private cloud which we could connect to with all of our devices, and browser technology went one step further letting it be full screen so it feels like a desktop, we could run most of our applications from our phones, computers, netbooks, and they’d all look the same. Then only the memory intensive programs would be restricted to our main machines (programs like Photoshop or Pro Tools). All of a sudden we’d have access to all of our information in a uniform way from anywhere. Then we could stream our own music instead of subscribing to some streaming service. Our phones would only need enough memory to cache enough data to keep load times to a minimum.

Browsers are already making leaps and bounds in Javascript performance (except for Internet Explorer that despicable excuse for a browser). There are libraries now, like Dojo, which support very complex and rich browser applications. I think this is a very possible future and that future is very near. Google has almost done it. But to have private clouds that don’t need someone to be computer savvy to setup. That would be amazing.

Cyber Terror

Ace — Sat, 30 Jan 2010 07:05:04 +0000

Originally I posted this article about a week before the Google attacks; I feel like an oracle or something. Since then there has been considerable press on cyber terror that rounds this article out nicely. I’m updating this accordingly.

The FBI director has warned that there has been a shift towards cyber terror and that it has the same effect as a “well placed bomb”. The interesting thing about this is the phrasing. It’s moving away from characteristic, traditional ways of describing cyber terror (stolen credit card numbers and identities), towards actual terror fears. The idea is that cyber terror could begin to have physically devastating effects.

Have you seen the iPhone commercial where the woman turns off her lights remotely? As more and more goes on the grid, we become more and more susceptible to these smart bombs. If an embassy had systems like this and hackers were able to gain control, they could gain access to the compound just as if they had a “well placed bomb”.

That’s all the future still, you say. Not something to worry about now. Actually it is something we need to worry about now and to not worry about it would be naive. Maybe not with embassies, but our power plants are vulnerable and could be hit and that could be devastating. During WWII plants were built in secure locations to make it extremely hard for enemies to knock them out (Geneva Steel is one example in the mountains of Utah). Now, with our power plants online, they suddenly become accessible anywhere to someone with the right technology and resources. The article I linked to was just one of many.

What brings this all together is the recent Google attacks. To me it makes sense that the FBI would bring this up now because they realize the level government-pushed cyber terror could reach (China denies ties to the recent attacks, but Google has traced the source back to Chinese schools with strong military ties) . These hackers were able to get into Google and Intel among other tech companies. If they could hack into companies that are constantly warding off attacks and filled top to bottom with software engineers, then what about a power plant which has software written for it and doesn’t have the top minds monitoring networks all of the time?

That’s a real threat, leaving cities without power or other utilities could have pretty devastating effects. It’s also just one scenario where cyber terror becomes more physical and more terrifying.

As if it shouldn’t be terrifying enough already. Stolen intelligence means terrorists learn to duplicate our technologies which include nuclear weapons. This sort of attack doesn’t command the level of fear it probably should since the actual effects don’t manifest for quite a while. If we got into a war with a technologically advanced country it could be surprising find that our unbreakable navajo code wasn’t so unbreakable for hackers. Or that our missile tracking technology had already been countered by engineers who had the design to work from.

I’m not a doomsday guy and I’m not writing this to stir up fear. Honestly this kind of stuff doesn’t really keep me up at night. More than anything it was just a demonstration of the kinds of things that make me believe cyber terror will take the front seat as public fear no. 1. As we rely more and more on machines we become more vulnerable, and strong security is usually something learned, not planned.

On an unrelated note, I think it would be exciting if computer language was taught alongside Spanish, French and other foreign languages. It’s becoming increasingly more important as we tie ourselves more and more to computers, and being able to code makes things like starting a business many times easier than before. Instead of opening an actual physical space and fighting for clients, people familiar with web development can create an online store and reach millions of customers with little or no overhead. And maybe they could become heroes at their local power plants if they happened upon a security breach.

Why something better than Facebook could save the world

Ace — Wed, 10 Feb 2010 05:18:35 +0000

This article is about why I think something better than Facebook could save the world. Save the world? you’re asking. What do you mean save the world? I mean it could be the key to making society work, and not just in the puppy dogs and fairy tale way. Everything from government to philanthropies to getting through the current depression to rebuilding the American Dream. You think that’s a bit ambitious? We’ll see.

Social networks are on fire. Investors still love them while they don’t seem to love much right now, people can’t seem to get enough, and even jobs are being centered around how well people use them.

They’re also relatively young. That means they’re still maturing, as anyone with a Facebook account would be well aware of. It seems that Facebook makes a significant change to the site every other month. That in turn tells me that there’s still plenty of room for someone to do it better.

Google is banking on that (if you want a to know the way the ‘wind is blowing’ in technology, watching what Google is interested in is a good idea). After being snubbed by Facebook when they decided to do their searching through Bing (More info here), as well as possibly losing the default browser search position with Apple in a fascinating case where Apple and Microsoft may team up (More on that here), Google has to act fast or it will start losing ground.

Its solution is to make Gmail more “social”. If they succeed, not only will they retain their coveted spot atop the search engine market (no one could touch their search accuracy with as much information as they would have on everyone), but they could also make significant inroads into the multi-billion valued social space.

The problem is they’ve tried this before and haven’t had much success (More on their social troubles, Orkut for one, here). To me it’s interesting that as smart and forward looking a company as Google is having trouble here. These are the guys that made search profitable. They built Android preaching that handheld computing would become THE major player in human computer interaction (which is dead on, cars are being built that integrate with the iPhone, and the time isn’t far off when other devices will be controlled by them too. Computer phones are in place to be the key, wireless technology that control all the others and are taking the mobile handset market by storm).

So what are they doing wrong? Or more pointedly, what is the future of social networking? Will it always be micro-blogging and wallposts? Does Facebook have the model right or is there something missing there?

Clearly I think something is missing because the President on Twitter hasn’t done much to save the world. Up until now the focus is on bringing people to their computers and then bringing people together.

Basically we’ve made another way to keep in touch 24/7 and organize the process. At first the big fear in the news was that this would keep people from socializing in real life and all of our interactions would be reduced to electronic ones. Recent research suggests otherwise. It also found that most social network interactions were with people that were already friends outside of Facebook.

In other words it’s a tool that reinforces our already made connections in a virtual world. That’s great for helping us maintain structure and contact but that’s only part of what it means to be a social human being. What would it be like if we made it the other way around? What if instead of bringing us to computers, computers brought us to each other? What if it made it easier for us to meet each other and create group interaction? If it gave us tools to MEET people too, wouldn’t that be huge?

That’s not interesting, you say, there’s already a lot of this going on. Sure, there are dating sites make bank giving people tests and then helping them arrange meetings, but the drawback is that people see them as dating sites. Not much of a chance you’d go there to find people to play ball with. So where do you go for that sort of thing? The idea of meeting someone on Facebook and initiating a basketball game sounds like a terrible idea, at least to me. It doesn’t provide a situation where something like that would be socially acceptable.

Yes, you say, but there are sites like Meetup.com which are made specifically to get people together for activities and they’re gaining traction. That’s true. When I moved last fall I wanted to play football but hadn’t met anyone in my new neighborhood. All I had to do was go online, find a group, and I was playing the next Sunday morning. People expected strangers to show up because of the nature of the event so they were very friendly, and it was a great way to ease me in to my new location. All in all it was a great experience, but it still felt fragmented. Meetup was just one more site to keep up with (and who are we kidding, even though lots of us have lots of accounts we only really use the one or two we like best. The others just fade into the background).

Now we’re finally getting to the point of this article. If someone could bring together the maintenance of previously developed social networks and join them with the ability to easily meet people and encourage social events, they could have a seriously disruptive place in social networking. If the focus was on the human interaction and not the virtual world in-between, I think people would adopt it. Especially if it made the meeting fun. If it created a scenario where not only was it easy to meet people, it was also encouraged, people would eat that up! I mean how many updates have you seen on Facebook about mafia wars? And that’s some trite game. If people were getting points for hosting parties, events, games, etc. how many more of those would we see?

How does that save the world? It doesn’t sound like rocket science right? It doesn’t even sound much different than what we have.

Here’s how. I’m a philosopher first (that was my original degree), and I believe that there are few things that would be better for the human experience than creating an environment that fostered social connection. Robert Putnam conducted a study with a few other professors on what made governments successful. They had a fascinating case in Italy where the same structure was set up in different regions, but some were very successful while others failed. Some societies thrived while others self destructed.

When it came down to it what was the main difference? Was it that some regions had better leaders? Less people disposed to crime? Probably not (as a philosopher I can’t definitively say ‘no’ no matter how much I want to). It turned out that one of the best indicators for whether a region would be successful or not was how many back yard barbecues and book clubs there were (ie how socially connected the people were). Communities that brought people together were the ones that cultivated successful societies (if you want to read more, the paper can be found here).

If a social network could be put together that created the game, making it so people were encouraged to meet and get together, I think we’d see significant effects in society as a whole. For anyone that’s read the Tipping Point, this could be what’s needed for society to ‘tip’ towards the kind of involvement that existed when America was founded. We’ve used technology for so many advances up until this point, it’s about time we used it to augment something as powerful as social collaboration. The possibilities are limitless (yes, that was supposed to sound inspiring). I think it It would be a case where even Heidegger would have to agree that technology, for once, was helping people get in touch with what it means to be human instead of getting in the way.

This was the foundational argument for the idea. I’ll be posting more details in coming weeks to show how this could become a reality, and to show how I think it could create a whole new job market.

Augmented Football

Ace — Wed, 10 Feb 2010 19:32:31 +0000

The Super Bowl got me thinking again about how much I’d like to coach. This idea really came from spygate, when Bill Belichick had cameras spying on the other teams playcalling, but at that time I thought, what if you had the next best thing? What if you took every call a coach made in every situation and then did some data mining on it. Wouldn’t it be easy to pick out trends and predict they’re playcalling? And wouldn’t it make it easier to avoid being predictable yourself?

This has the added benefit of not being illegal. It’d just be smart.

So I’ve had the longstanding goal of generating the data and then analyzing to be able to do that sort of thing. Of course I’d have to pull some crazy sales job to get a coach to let me advise on something like that, but if it worked I’d be head coach in no time! And that would be one more human computer interaction to add to the booth replays, helmet communications, etc.

Getting Psychology Up To Speed

Ace — Wed, 17 Feb 2010 21:27:17 +0000

Psychology is behind. Philosophically and scientifically, but that’s not the point of this article. The point of this, is that they’re behind technologically and they could really use a push.

Anyone that’s been to a mental health hospital quickly sees a trend. Most people have been there more than once. They were committed two years ago, one year ago, six months ago, etc, for the same problem. Why do they keep going back? It’s not that they like the hospital.

It’s because as soon as they get out of the hospital, or leave their therapists, they go back to life as usual. They go back to their friends. If you’re a recovering heroin addict and you go back to hanging out with heroin addicts, chances are you’ll relapse. If you’ve come out of a deep depression but go back to people who continually tell you how pathetic you are, chances are you’ll drop again.

What they need is a way to find new, healthy, social connections. They need something like the ‘better than Facebook’ that could save the world I talked about before. The good news is this technology would not be difficult to create.

All it would take is a social networking site where people began by filling out in-depth personality profiles. This wouldn’t be hard to get, people fill those kinds of profiles out all the time because they love to see what the test has to say about them. If you made sure they had their friends do it too, and had their friends also fill out the profile, you could begin to find out what kind of people they get along with. I don’t think it’s too farfetched to think that you could find an algorithm that could predict friendships.

The network could start with volunteers. They would make sure to include their interests or hobbies. Maybe it’s having bbq’s, going rock climbing, fishing or seeing plays. These volunteers would know that they were volunteering to be the gateway for people who have struggled to re-enter normal life.

As a biproduct the volunteers would get their friends on it too (to get the data necessary to predict friendships). All of a sudden there would be a strong network of healthy people with designated entry points. From there it would just be a matter of matching people who are trying to change their lives with the right entry point.

All of a sudden these people would have people they’re likely to make friends with, who are healthy, and activities that would also be healthy. Instead of getting out of the Hospital to go right back into their old lives, they’d have a jump start to creating healthy habits. The gateway people probably wouldn’t even have to try that hard to integrate their assigned friends.

Technology could bridge the gap between the walls we all put up that make making new friends so difficult in the first place. This would work not because it would help those patients, but because as soon as healthy people started seeing how easy it is to make friends through recommendations they would be all about it. The missing factor from current social networks would be filled here.

GeoTunes

Ace — Wed, 03 Mar 2010 01:59:48 +0000

Satellite radio, normal radio, internet radio, iPod, location aware phones, playlists, social media, and adventure. What do all these things have in common? If you answered anything other than geoTunes you might be right but you didn’t read my mind. If you answered geoTunes I’m sure you got it from the title so again, you didn’t read my mind.

Imagine not listening to what labels are pushing but actually being able to hear the pulse of the people all around. Imagine going through cities and hearing music recommended and voted on by people. Imagine being able to share thoughts about certain landmarks that anyone could listen to, just by standing where you did. That’s the idea behind geoTunes. It’s being able to paint the world around you with music and sound. It’s being able to walk into a library and hear study music; to walk into a gym and hear workout music.

As people use the geoTunes software the songs they listen to will be tagged to the location they are. That way when you’re listening to your favorite music, it’s learning where you listen to which kinds. If you decide not to listen to your playlists one day you could then switch over to the geoTune generated list. Now you’ll be able to hear what other people are listening to around you.

A possible problem with that is that there are lots of people with lots of different tastes all in the same vicinity. Mixing them all together would create a cacophony of sound and that doesn’t sound like something that would attract the user base we’re looking for. Instead as the music was tagged it would be sorted based on genre. That way each location would have ‘stations’.

Each location would have a primary station. That would be the most popular genre for the area. If you wanted to understand your city better, this would be the one to listen to. Moving from old neighborhoods to young neighborhoods, from the suburbs to the city would give a fascinating blend of the areas subculture.

Likewise some people just like music that sucks. You wouldn’t want that to come up all of the time in general listening. So each song would give the user the ability to like or dislike it, and the playlist generating algorithm would serve up higher ranked songs more often while not letting them completely drown out the less known/understood songs (like what happens on radio stations these days). That algorithm would factor in the number of people tagging specific songs as well as personal preferences which would be kept out of the global listening sphere.

If you like a song enough you have the ability to save it to your personal playlist. That way you can listen to it again even if you’re not in the location where you first heard it. That allows you to aggregate songs you like and ‘take them with you’.

That’s how music would be separated and easily managed and listened to. It would also take care of song ranking. I believe it would also make music listening viral. Local musicians would create a fan base which would make their music rise to the top for their area. All of a sudden they would have a cities worth of listeners who would start letting people know about the music. Other people coming in on business, etc, would hear the local songs, save them to their playlists and take them home to start the sound there. Suddenly musicians don’t need big labels to keep them going. It takes the internet music revolution to a whole new level.

Another important part of this would be geotagging sound. Say you’re visiting Egypt and you’re walking through the temple at Luxor. You want to know what a guided tour but you don’t really trust the onslaught of locals. All you have to do is turn on the sound station for this area and you start hearing what people have recorded in the different parts of the temple. Say professors have visited this site, recorded their insights and geotagged them. Other users found them interesting and voted them up. The nonsense tagged there was voted down and isn’t played anymore. You get a nice, location guided sound tour and you don’t even need a guide.

The same goes for cities, war sites, etc. Sound could be played over the top of music, so you could have both on if you want to discover the area around you. That way not only do you get the music, you get users input overlayed on top of that whenever you happen upon such a location.

That takes me to the ‘how this would be funded’ part. Businesses would have a new way to lure people in if they could do location based advertising. Say you’re by a McDonalds. An advertisement would come up to come down the street and get a snack. Local companies could do advertising too, and since it would be very specific it wouldn’t have to cost much. At the same time because this kind of advertising would be all over and because it would be highly targeted it should convert more and should bring in enough different buyers to support a music listening network. The advertising would only come up when traveling from place to place, and an algorithm would make sure that they weren’t served up too frequently as to become disruptive.

This is some of my vision for what geoTunes is going to look like. I think it’s an exciting idea.

What Good is Technology Anyway

Ace — Thu, 04 Mar 2010 07:30:47 +0000

Growing up my dad used to tell me how lucky I was not to be growing up in the dark ages (this was when I used every stick I found as a sword). He, like most people, talked about how great technology is in its own terms. The iPhone is amazing because it lets us interact in ways we’ve never been able to. The internet is incredible because we have more information available to us than ever before. Fridges change the way we live because we can store perishable food. Cars let us go farther and faster than we’ve ever been able to before. Yes, technology in its own terms is incredible. And I, like anyone, get caught up in the fray. In that excitement it seems almost ridiculous to ask, but is technology really good? That’s a given, right? The only people that wouldn’t think so would be disconnected philosophers completely detached from reality, right?

This is where I say no, I don’t think it’s a given that technology is good and I don’t think that’s a far-fetched question to ask. I could site some philosophers (Heidegger for one) that said the same thing but then we’d be right back to the -detached from reality- thing. Instead I’ll go with a more practical approach. Some people just live in a way that gives them meaning and happiness but that’s not everyone. If that isn’t me, I would like to be able to figure out why and fix it, wouldn’t you? In order to fix it I’d have to ask the right question, and I’m proposing that question is: ‘what makes a good life as a human being?’ To answer that question, technology has to be considered.

Technology permeates so much of life as a human being these days that it becomes important to know if it’s possibly getting in the way of the good life. If it is, then it would be important to know what parts of it get in the way and what parts of it possibly enhance our ability to live the good life. That way we could maximize the positive and minimize the negative.

We already know that technology isn’t the great answer to the good life because people had good lives long before technology. In fact much of the research I’ve looked at makes it seem like people that are worried about where the next meal is coming from tend to be happier just from the mere fact that happiness doesn’t cross their mind, they’re too busy with the task at hand. If that doesn’t qualify for happy or meaningful in your book then I have another example.

I’m attracted to third world countries maybe partly because of the happy, meaningful lives I’ve come across in them. I spent two years in Brazil and Argentina, a month in Guatemala and a couple in Egypt and surrounding countries. I’ve been to Russia, Europe, and everywhere I go I try to live like the locals. I take local transportation, I eat where the locals eat (which often ends in terrible diarrhea, I’m sure you wanted to know that), I sleep where the locals sleep. On arriving in a new city one of my favorite things to do is find a local family that could use money and offer to help in return for a room. I’ve seen a lot of the culture that way, and like I said, the third world technology deprived countries have lots of people who seem very happy and fulfilled to me.

Why are they happy and fulfilled? My answer is that they have meaningful, healthy relationships. It has lead me to believe that fundamentally human beings are social creatures, and in order to have happy and fulfilled lives, we need to embrace that. Part of what’s sad to me about technology is that we forget our place in the social web and try to solve problems through chemicals or otherwise that used to be solved by falling back on these strong social ties.

Technology has the tendency to get in the way of our relationships. We’re immediately accessible as a resource to so many people that we would never want to see after work. Because of that we give up our time and attention to those people more and more and we nurture our meaningful relationships less and less. While it was easy for our evolving ancestors to create relationships with people they hunted with (co-workers) and have those relationships become multi dimensional, now it becomes more difficult. We have way too many surface relationships pulling at us.

For fear of people walking away from this thinking I’m anti technology, I’d like to be clear at this point and say that I’m not. I’m very pro technology. But in order to understand what makes me pro, I think it’s important to understand what makes me against it. That way everything I say from here on can be framed in the context of, if it’s getting in the way of meaningful relationships and life as a social being then it’s bad.

So what is there to be pro about? We have ways to create relationships and develop them like never before. Improved communication and travel insures that. Technology enables us to do work in new ways that also enable relationships. As a web developer I have time to spend with people I care about because as long as I get the project done on time, it doesn’t matter when I do it. Likewise I have freedom to travel and learn about the global human family because of the same things. Even though that doesn’t qualify as a meaningful relationship in exactly the same terms I framed earlier I think that it does create a different sort of relationship that is meaningful and lasting with humanity. My travels were some of the happiest times of my life.

Looking at technology from this perspective opens up a whole new way of creating technology. If we looked to enhance our happiness and meaning it would give direction to technology that I don’t think exists right now. And while we can all enjoy the benefits of technology by having self control and learning how to filter out the happiness/meaning depriving noise that we’re bombarded with everyday, it would be nice if it wasn’t so hard. Maybe that would reduce the number of Americans on anti-depressants too.

The Rise of the Social-Geography

Ace — Thu, 25 Mar 2010 23:05:32 +0000

Social gaming has taken the market by storm. All of a sudden there are games making millions of dollars that hardly cost anything to create. Academics are looking at this closely, working on predicting what is next. Below is a video talking about that very idea, so take a look and then you’ll have a context for what I say after it.

Xbox 360 Games – E3 2010 – Guitar Hero 5

Philosophers make a big deal of people being able to connect with their world. Psychologists make a big deal of being able to connect with humanity. I think anything that enables those two goals while helping people to think about things in a positive or novel light is bound to be successful.

That’s why I think location based gaming and technology is going to be huge. Anyone paying any attention to tech news will have seen countless articles on FourSquare, MyTown, GoWalla, and others (sorry others) and the buzz they made at SXSW (for all non-nerd readers that’s a tech conference in Austin, Texas). People are jumping on the bandwagon and this is only the beginning.

Why? Because they have a new way of connecting with people. It happens as they connect to their world, and they’re seeing discovery in a new light. That’s why this is only the first wave. It’s why neogeography is here to stay.

Whoever figures out the best way to harness this technology in the ways I mentioned above will have lots of success. That is why I’m currently working on GeoTunes-The Underground.

This technology will allow fans and bands to interact in an entirely new way. Instead of being pushed music by labels and radio stations, users will be able to share it in communities which will create a viral phenomena. No more sitting at computers to find new music, it will be pushed to mobile devices (which have now reached over 90% market penetration. Yes, Google was right to put their money on mobile computing). Now it will have the chance to spread across the nation on its own, and it will upend the music industry as we know it.

These ideas will reshape experience with technology. Originally scholars saw the internet as the great leveler. The disruptor of geography. Now all of a sudden there is a new movement towards enhanced geography. Neogeography. And it’ll be huge.

Aardvark is Geniousness

Ace — Fri, 09 Apr 2010 06:52:40 +0000

Aardvark is a fifty million dollar idea, at least that’s what Google thought when they bought the company. It takes search to a new level, incorporating social networks to find answers from people instead of document vectors and page ranks finding information from machines. It moves search from just library look-up to a village-style, ask your neighbor, experience. This in turn allows people to relate through computers in an entirely new way, and it’s able to do that because it has applied data mining in a new, novel way.

Data mining has been used with social networks before. A lot of research centers around the social graphs of Facebook and other networks, but as far as I know, none of the previous research has done what Aardvark does.

First of all Aardvark uses information it gathers about people to classify them as data generators. That may not seem profound at first blush but it is subtly brilliant! This is a successful implementation of the idea that behavior can be predicted and harnessed.

It is done by first collecting data about users. By asking which topics they are experts in and then asking their friends to confirm, a lot of great data is generated. Combine that with crawls of Facebook, blogs they write, and other online content and you have a solid base of raw data describing a user. However in this raw form it’s not very useful; it needs to be processed.

Using mathematical voodoo, the data is arranged into topics. Each user gets topics associated with them that are either directly, or inderectly derived from the raw data. This data is then used as a training set for predicting what information a user can generate.

Bayes theorem and probability theory drive these predictions; each user has probabilities assigned for how well suited they are to respond to certain topics. Once they are categorized it’s just a matter of searching when a query comes in to find the best set of experts on a subject.

Other elements combine with this to optimize response (such as matching people based on how well they know each other and how similar they are). Together it combines to an experience that for many people is exciting and very useful, especially since questions can be asked (in natural language) for things like advice, that is more difficult to get from Google.

Another interesting, if not quite so ground-breaking, idea in this paper is query classification. When a query comes, decision trees are used to decide whether the information is obscene, or spam, or a waste of time for people to answer (yes, some people ask things like “what time is it?”). If it makes it through those filters, the question is classified as location specific or not and then is sent out to users based on how well they match.

This is a key element of the social search because if the quality of questions people are asked to answer is poor, they probably won’t continue using the service and they won’t recommend it to their friends. Aardvark’s effectiveness centers around having a user base large enough to answer queries, so it is imperative to keep the query quality high.

Aardvark also uses association rules to figure out when users are more likely to answer queries. It does this based on when the user passes on a question, when they’re not online or don’t answer for some other reason. The more the user participates in the service, the better Aardvark gets at predicting the best time to ask as well as acceptable frequency of questions.

The novel applications of data mining are what have made it explode in popularity. It will be fascinating to see how Google integrates it with its search in its growing war with Bing and now Apple in advertising and search.

As far as improving Aardvark goes, in its current form it is a great product. It is easy to use and very effective at what it does. It would be interesting to see it grow into something more.

It is surprising that Facebook hasn’t used any similar ideas to start generating profits to match its popularity. It sits on the richest data set available, it has no excuse not to be successful.

One possible application of these ideas in social computing is to mine the data to find people who are the hubs of their social circles. By identifying commonalities between them and all of their friends, individuals could be picked out who would be optimal targets for advertisers. They would be the most probable individuals to convince their friends to buy something, and advertisers would pay a lot to get that information.

Of course allowing advertisers to contact these people would have to be handled correctly, which is not in the scope of this paper, but that is one application of similar ideas here that would could be extremely lucrative.

Another application of these algorithms could be similar to that of dating sites. A central part of optimizing query response is making sure that the people who will get in touch have similar social patterns. If this was expanded into a social networking site, it would facilitate communication and interaction in an entirely new way. Instead of the static, Facebook-like recommendations of friends suddenly people would have ways to ‘break the ice’ and create new friendships.

All of these ideas are central to the revolution that is occurring online as people learn to live in this new age of technology. The technological revolution is still so recent in terms of human history that I don’t think many people see the scope of the change we will undergo as a species. It is breathtaking to consider!

The Lazy Spider

Ace — Wed, 12 May 2010 21:19:44 +0000

Facebook has begun to spider out from its main function as a social network to include a social organization of the entire web. If users visit a site while logged in to their facebook profiles, they can ‘like’ the site and see how many of their friends liked it too.

This level of feedback on webpages is unprecedented and unparalleled. Facebook has already surpassed Google’s usage numbers in sheer quantity, but now they are gathering information that could allow them to be major competitors in search. By indexing these sites and their likes, they have a new way of creating pagerank that Google doesn’t have access to. They also have much more information to what people like, which should allow them to better target advertisements.

It’s not unreasonable to consider that in the near future sites could be allowed to be aware of which users are visiting their site in order to better target content for those users. This would create an ultra-personalized web, but would create many privacy issues that could cause significant problems.

Already people are complaining about privacy issues with the like buttons alone, so only time will tell how far Facebook can take this. Given their history with privacy issues they will probably push the limit as far as they can.

Privacy aside, this is a fascinating new way of organizing the web. It is essentially a social indexing tool, as opposed to IR style indexing that Google employs. With Facebook’s record of innovation it is exciting to see where they will take this.

The web isn’t the only thing they are making more social. They are also expanding their reach to music, through their partnership with Pandora. People who allow Facebook to integrate with Pandora can see music their friends are listening to. This lets people to spread music in a radio social way which hasn’t been available until now.

What areas will Facebook spread to next? The social paradigm for content consumption is powerful and I believe it is the future of the web. Whether Facebook drives that future or some other company does depends on how well they apply the paradigm.

iPhone Prototype and What It Means

Ace — Wed, 12 May 2010 21:51:21 +0000

Until now all the hype about the new iPhone has been over how it has been purchased illegally and leaked. No one has talked about one part of it which will revolutionize the phone industry again.

When Gizmodo reviewed the new iPhone, they mentioned something new that has never been on successful phones before. A front facing camera. Why do I think this is such a big deal? Because every sci-fi movie I’ve watched since I was a kid, people have had video phones. Skype and other technologies have been hugely successful with video chats, but that always has required computers in the past.

Now we finally have phones which support internet connections AND have front facing cameras. Skype already has an app for the iPhone. Creating a video call app would be child’s play. Now they have the hardware to support it. I believe that when the new iPhone goes on sale and proceeds to sell at the same blistering pace its predecessors have, people will begin making video phone calls far more than they do now.

Android will do what it does best, follow suit. New handsets with front facing cameras will become commonplace, and video calling will rapidly become ubiquitous. I would be very surprised if Google Voice and other internet implementations of phone numbers and connections wouldn’t start supporting audio calls, text messages, AND video calls.

With phone numbers finally supporting video calls, the transformation that has begun with Skype and webcams will be complete. The communications industry is in for some major changes in the near future. They’d better start getting serous about upping their support for internet connections because video calls could run heavy.

Converging Technology

Ace — Wed, 12 May 2010 22:09:44 +0000

As smartphones become smarter, they are emerging more and more as the hub for computer interactions. Google got into smartphones in the first place because they recognized the central role it would play in the near future. The beginning of that is showing with cars and their ability to sync with phones.

Google is currently in talks with GM to get the android operating systems installed in vehicles. This would allow users to start their cars remotely, unlock them via phone, and would give strong GPS navigation. This is only the beginning. The first cars to be able to output performance stats to graphical displays on smarthphones, such as fuel levels and oil cleanliness etc, will be hugely successful.

Apple, Google and Microsoft’s most recent phone software has been created with desktop variants. As these platforms mature the mobile platform will act as the portable computer, leaving heavy computing to home computers, navigational computing to car computers, home systems computing to home sensory computers, and work computing to the computer at work. Interfacing with each, it will specialize in information and applications people want with them all the time. Soon smartphones will become more important than the home computer.

Introduction

Ace — Sun, 29 Nov 2009 20:51:39 +0000

There are great tutorials for creating web pages all over the web, so why would you do this one? I mean it’s longer than most, and I don’t even really get into design details in photoshop very much. Sounds bad right? Maybe if this weren’t awesome! Yes, I’m presumptuously slapping awesome on this like a badge. Why, you may ask. Because this document outlines best practices for creating web pages in Photoshop so they can then be cut up and coded for the web and it follows the latest trends in web design. Put this together with visual tutorials and you’ll be very educated in current web design.

Who is this for?

Aspiring designers who want to design and code their website. This will take you through from start to getting ready for publishing online; the next will step you through the actual coding and publishing.

How?

We’ll design a portfolio and similar sites. The principles work for everything but I’m targetting this specific group (so hopefully you have some work you’d like to put up online).

First Things First

We start with the Home Page. I’m sure you’ve noticed good websites have the same header and footer for all their pages (the same looking menu that stays in the same place the whole time, etc). That gives the site a unified feel and makes it easier for you during the design process because you can keep using the same header and footer for all the pages.

It also makes the Home Page design the most important part of designing a website because that’s when you come up with the feel of the entire thing. So you’ll spend more time on the Home Page than you will on the subpages.

So below first you’ll find a quick run through of good design principles for web pages. Then you’ll find a section on the technical details for designing your page. That includes how big it should be, what fonts to use, etc etc. The last section in this chapter has step by step instructions for setting up the Photoshop document so you can get designing.

Good Web Design Principles

Ace — Sun, 29 Nov 2009 20:59:09 +0000

Titles:

I’ve put this first because it’s probably the most important. People don’t want to have to sort through all the information on your website. They want to know what they’ll be reading about before they read it. That means that you should have a very strong title structure so people can scan to find what they’re looking for.

If you have a paragraph about yourself on your About Me page, give it a title like ‘A Little About Myself’. If you have a welcome paragraph on your home page, title it something like ‘Welcome to My Site’ (but more interesting of course). I’m sure you’re getting the picture, but if not I’ll revisit this later.

Color Scheme:

Color scheme is key to coming up with a good website. The trend right now is to use up to three colors, with the rest of the site designed in greyscale (though I’ve seen sites pull off more colors than that). A good tool to help you come up with good schemes can be found at: http://colorschemedesigner.com/. It lets you choose how many colors you want in your color scheme, and then the primary color to build the scheme from.

No matter what colors you use, you will usually use shades of grey for text and other content (for example grey text on a white background) so you don’t give people color overload.

Don’t:

Don’t use black text on a white background. Use grey text instead, it’s easier on the eyes.
Don’t use complimentary colors as foreground and background (like red text on a green background). Also colors like bright red on black don’t look good. The general rule here is if you wouldn’t read a book in those colors, people probably wont read your website in them.

General Layout:

Your job is to guide the user to the most important parts of the website. The logo is generally in the top left because, since we read top to bottom left to right, that’s the first place most people look. After that you’ll want to take the reader to some text, maybe a catchy image, with the navigation being secondary but very clear.

You can do that through (this list comes from a great article at http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design):

Position — Where something is on a page clearly influences in what order the user sees it.
Color — Using bold and subtle colors is a simple way to tell your user where to look.
Contrast — Being different makes things stand out, while being the same makes them secondary.
Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?

You can get more great information from: http://psd.tutsplus.com/designing-tutorials/elements-of-great-web-design-the-polish/.

Etc.

Other regular design principles apply. Try not to use too many fonts; if you use different fonts, make they’re very different (one’s serif and the other’s sans-serif). Etc. etc.

If you’re having trouble coming up with a logo, here are some great articles:

If you’re having trouble coming up with general ideas, here are some helpful articles/sites:

http://designwashere.com/ (great resources and tutorials)
http://psdthemes.com/ (fantastic resource for getting ideas on good themes).
http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/ (Some of these are advanced techniques you won’t use, but there are a lot of good ideas here too).
http://bestwebgallery.com/ (great collections of good sites)
http://cssremix.com/ (also a good collection)
http://www.bestcssgallery.com/ (also a good collection)

Technical Details for Web Design

Ace — Sun, 29 Nov 2009 21:23:04 +0000

When designing for web there are a few technical details to keep in mind so that your web site can be developed effectively.

Size:

History:

For a long time the standard has been 800 * 600, since many people had monitors with this resolution. Over the last few years the majority of monitors in the most developed countries have changed to 1024 * 768 or above (for statistics visit: http://www.w3schools.com/browsers/browsers_display.asp, however note the disclaimer on the statistics). In countries where computers are harder to come by many users may still be using 800 * 600. It is also possible the numbers are higher here too.

Because of that you’ll find that most of the best developers online either develop their width at 800 or 960 px. 900 pixels is a good compromise, making it so users with 800′s don’t miss much, and so those with higher resolution don’t feel like the site is small.

Recommendation:

When using Photoshop to create new web designs, do so with 900 * 600 in mind. To do that it is wise to open a document 1100 * 800 so you can have 100 pixels of padding on each side to get an idea of what your page will look like outside of the content.

Put guides 100px in on either side so you know how big the content area is you’ll be working with. (if you’re not sure what I’m talking about look below at the steps, I have screen shots).

Font:

Web Standard:

Not everyone has the same fonts that you do. In fact there are only a few fonts that are standard on most machines. Some examples are Arial, Verdana, Georgia, Times New Roman, and Garamond. For a complete list see: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.

When you are making your website, you want the majority of the content to be in one of these fonts. If you use other fonts, you have to use a process where you cut pictures of them out individually to put in place that will be described later. That is time consuming and you can’t update it easily, so get used to using web standard fonts.

Times when it is appropriate to use a non web-standard fonts:

In your Logo
For the font of your main menu
For the font of main headings or titles that are short and not used very often.

Times when it is NOT appropriate to use non web-standard fonts:

Body text (like the paragraph about you on your About Me page)
Footer menu and copyright information.

Layer Grouping

Example Layer Grouping

Lots of times Web Development companies keep designers and coders separate. If that’s your case, that means someone else is going to have to find their way around your PSD (photoshop document). So, to help them (and yourself if you put this project down for a month or two), you need to organize your layers.

You do that by selecting similar layers (in the example to the right it’s all the menu options), and grouping them by pushing ⌘ + G or by going into the Layer menu and choosing Group Layers.

If you’ve grouped your layers right they’ll look like the example does. There’s a Main Menu group, which has menu options Specialties, Portfolio, Contact, Pricing, and Home. In the Specialties folder you find the text, its formatting, and a layer for the hover over state (called Specialties Hover-it’s highlited).

Background:

Background is essential and you should always design with it in mind. That’s why we make the document 100px larger than it has to be on each side. It helps focus on your page looks like in a browser that is bigger than your photoshop design.

Ask yourself, what will this look like if someone looks at it with a monitor bigger than what I’ve got here. Will it suddenly cut off? Or will it repeat nicely?

Repeating Backgrounds:

Many backgrounds use gradients. If you decide to use a gradient it’s best to make it horizontal or vertical. That’s because when we code websites we use techniques to repeat images either in the horizontal or vertical directions. I’ll explain that later, but what you should take away from that is if your background can’t be repeated horizontally or vertically you’ll have to cut out the entire thing, and that could result in big files sizes (which is BAD for websites).

Implementation

Ace — Sun, 29 Nov 2009 21:38:30 +0000

Start with your home page:

This section has step by step instructions on how to get your Home Page started. Once you have that polished the subpages will be easy.

Step by step instructions:

In Photoshop open a new document (pressing ⌘ + N, or going to new in the File menu), and at the opening screen create a document that is 1100 pixels wide and 800 pixels tall. For resolution choose 72 ppi (this is a web page so the resolution doesn’t have to be very high). It should look like this:
Example Setup Page
Make rulers visible by clicking Rulers in the View menu (or pressing ⌘ + R); make sure they are in pixels (if not right clicking on them will allow you to change them). Then click in the ruler area and drag out guides for the size of your page (as in the image below). Notice the guides frame the web page.
Example Guides
Layout your page. In this class we’ll be using a standard portfolio layout. Make sure that you keep the Header area separate from the content area and the footer area. Each should fit in their own box, like the example below:
Example Home Page Breakdown

An example of a good portfolio site following this layout can be found at http://www.toggle.uk.com/. In this case they don’t have to worry about what’s off the page because it’s just white all around the design.

Great Portfolio Example
If you’d like you can plan for part of your content to have flash elements (flash is what plays video and animation online) that you will be able to create in the third class. But have a placeholder image or text that will be there until you take the flash class.
Start designing!

Sub Page Design

Ace — Sun, 29 Nov 2009 21:43:55 +0000

Introduction

Once you’ve finished with your home page, you’ll be ready to start on your sub pages. They’ll be quite a bit easier, and this is why: good web pages keep the same header (logo and menu) and footer on all of their pages. It gives the site continuity. The only thing that really changes in most cases is just which menu option is highlited (for example, if you’re on the portfolio page, the portfolio option in the main menu would be highlited).

So the hardest part of the site is out of the way (phew!). But you’ve still got a lot of important work to do.

Photoshop Tip:

If you’re wondering what the best way is to do these subpages in photoshop, I prefer making groups (folders) for the header and footer. They should stay the same on all your pages so you won’t really touch them for subpages. I usually have separate folders inbetween for the content of the pages (for example a folder named Home, Portfolio, Contact, etc).

I also use layer comps to organize the different views (if you look under the Window menu option in Photoshop you’ll find an option for Layer Comp). At this point the specifics of how to do this is outside the scope of this document, but it would be worth your time to do a few searches online.

Sub Pages

Since this is a tutorial on how to create a simple portfolio, we’re going to have three subpages: Portfolio, About Me, and Contact. Over the next few pages I’ll be covering each one.

Portfolio Page

Ace — Sun, 29 Nov 2009 21:56:30 +0000

In the portfolio section the easiest way to do it is just to include a bunch of thumbnails of your work. Here are a few example from some designers that I like.

Example 1-http://www.spoongraphics.co.uk/portfolio.html

Example Portfolio

Example 2-http://www.qualityxhtml.com/examples.php

Example Portfolio

Example 3-http://www.darrenhoyt.com/

Portfolio Example

Example 4-http://www.kevadamson.com/portfolio/freelance-graphic-design

Example Portfolio

Take Aways

As you can see, none of them included their entire pieces in their portfolio. So don’t just slap on an entire portfolio piece. Find an artistic way to present it (by zooming in and only showing an interesting part of it -example 2- or by turning it sideways like example 3).

Going along with that notice that every portfolio preview piece is the same size. That might seem obvious but you’d be surprised at how often people make their pieces different sizes.

Also each one of them has used some sort of border to separate their portfolio piece from the page. Example 1 probably has the most noticeable borders; example 2 and example 3 both have white borders, and example 4 has what look like hand drawn borders.

So in a nutshell:

Present portfolio pieces artistically (zoom in or turn them sideways or something).
Make each piece the same size.
Use borders to separate the pieces from the page.

Other Ideas

After that the rest is just details. You can put a description by your piece if you’d like (like example 2 did). You could also put some text on the page describing your portfolio like example 3 did, but you’ll be just fine leaving the pieces to speak for themselves if you’d like to.

Since the scope of this document is just a simple portfolio we won’t talk about presenting each portfolio piece. Our method will be to open the full piece by itself in a new window when someone clicks on the thumbnail.

So if you want any sort of explanation make sure to include it on the Portfolio page.

About Me Page

Ace — Sun, 29 Nov 2009 22:05:20 +0000

About Me Page:

There are a few ways to do About Me pages. I prefer to use it as a Resume and I usually name the page that instead of About Me. Even going that route you can still include a paragraph about yourself on the right if you’d like or combine the two, giving you the best of both. Here are a few examples from good designers:

Example 1-http://milesdowsett.com/index.php/about

About Me Page

Example 2-http://www.branded07.com/about-me/

About Me Page

Example 3-http://www.dgundermann.com/resume/

About Me Page, Resume Example

Take Aways

Notice that two of the three had pictures of themselves on that page. You almost always want to do that because it builds since people can put a face to the name—that personal touch can go a long way. Especially if you hope to get clients that don’t live close enough to meet face to face.

The only one that didn’t do it was example 3. He’s catering towards clients that would need a security clearnance, so maybe he can get away with it but even in his case I think he’d be better off with his picture.

Also notice that example 1 is pureley about Miles Dowsett, example 2 is a hybrid of an ‘about me’ paragraph and a resume, and example 3 is a pure resume. You have a lot of flexibility here, any one of the three would work just fine. But whatever you write, make sure that it centers around you as a designer.

Each one of the pages has clear structure, with titles in bold, or different colors, to set them apart and make it easy to navigate quickly.

So in a nutshell:

Include a picture of yourself on this page.
Write a little about yourself as a designer, a resume, or a hybrid of the two.
Have clear structure (with titles etc).

Contact Page

Ace — Sun, 29 Nov 2009 22:11:56 +0000

The contact page is pretty simple. Here are some examples from sites I like:

Example 1-http://www.villagecreative.com/contact/

Example Contact Page

Example 2-http://eankadesign.com/contact/

Example Contact Page

Example 3-http://www.usdigital.co.uk/getintouch.php

Example Contact Page

Take Aways

In two of these examples they had forms. This is an effective, easy way to get people to get in touch with you. People are more likely to do things that are easy, clear, and convenient. Making them call you, or send you an email like the last example adds one more step that you can lose customers on.

With that said, just having your contact information works fine too if that’s what you want. Usually both is best.

Also notice that each one of them has a small paragraph telling people why they’d be contacting them. It seems obvious, but you’d be surprised how many people won’t fill out a contact form without being told what it’s for (even if your paragraph says it’s for just about anything, like example 1′s ‘just say hi’ statement).

For our purposes your design should only have a name, email, and message box. When we code the site that’s what the script allows right now.

In a nutshell:

Forms are effective, a simple name, email, and message will do.
Include other contact information too.
Include a paragraph telling them to get in touch.

Conclusion

Those are a few examples of how to do your subpages. If you click on the links you can see them in all their glory, and if you’d like to try to find more examples, you’ll see I found a lot of these on http://deliciouscss.com as well as http://bestwebgallery.com/, and they have more great examples (like http://www.brightcreative.com/ for example).

Cutting Web Pages Out (Slicing) – Introduction

Ace — Fri, 04 Dec 2009 20:49:27 +0000

In the early days of the internet it wasn’t visual at all. Web sites were super boring with normal fonts and hardly any graphical elements.

Since then things have changed quite a bit. Now when you surf the web you find vibrant sites with visual navigation, nice backgrounds, and all that jazz. That’s because now we have more power to code sites.

They work basically like a puzzle. You start with your design, cut it into peices, and then put it back together online with code. It’s a little different than a puzzle because you don’t have to cut out everything. Code can make things look right in a lot of cases, and basically fill in the gaps. So this chapter will start by teaching you basic ideas of code, followed by what NOT to cut out, then what TO cut out, and then HOW to cut things out.

One more thing before we get into that. If you’ve ever had to wait for a web page to load, you know how important it is to make it so that they load fast. The way you do that is you keep file sizes small. Keep that in mind as you read this chapter; I’ll bring it up during relevant parts.

Code Basics for Web Designers

Ace — Fri, 04 Dec 2009 20:56:17 +0000

If you’re wondering why we’re cutting things out already without knowing how to code, it’s because this is a good introduction to code from a design perspective, and will help you when you actually get into coding. That being said here’s a quick idea of what you can do with code.

Layers

You can do basically what you do in photoshop and stack images on top of each other. That way you can make a solid background color and then put the content on top.

Fonts

Earlier I introduced the idea of web standard fonts. The reason we use web standard fonts is because browsers get the fonts they use from people’s computers. That means that you have to use fonts that EVERYONE has, or people won’t be able to see your pages the way you’ve designed them. Remember most people aren’t designers, and don’t have any more fonts installed than what came with the computer.

So if you designed most of your content with web standard fonts, like I suggested, code can do that. You don’t have to cut that out as a jpg or a gif. So go ahead and go into your PSD and turn off the layers that are web standard font (by clicking the eye next to them). They were useful to help you design things but you won’t need them when you actually code the site. If you’ve forgotten what fonts are web standard, this site can help you: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.

Solid Colors

Code can do solid colors too for fonts or even backgrounds. If you use it to make a background color though, it can only do it in square shapes. For example, if you have a header made up of a solid color and the color goes off the page on each side and has a straight border on the bottom, you won’t have to cut it out at all because you can code that. However if it has a curvy side, you can still do the main area with code, but you’d have to cut out the curvy edge.

Here’s an example:

Example 1- http://simpleslice.com

Example box structure

In this example the footer is made of a solid color that fits in a square shape. Code can make that.

Like I said before, code allows for layering so even if you can’t see part of the square shape if you can tell it’s square behind things, that counts. Above the gradient goes on to the left and right and fits in a square shape, even though it has the content box over the top of it.

Repeating Images

Some things, like gradients, repeat over and over again. Again, in Example 1 above you’ll notice there is a gradient going behind the content. That gradient can be done with code by repeating a thin pixel slice over and over next to itself like this:

Example 2

How background repeating works

The example above shows how code does repeating in the x direction (horizontally). It can also do that in the y direction (vertically), so if you have a gradient repeating down the page you can do that the same way by cutting out a thin slice. When code puts things together like this you can’t even tell, it looks like a solid image.

The reason you’d want to do this is because it keeps file sizes small. If you only save a tiny slice of something (1 pixel across), it is MUCH smaller than saving an entire background.

Wrap up

Now that you’ve got some idea of how code works, the next section will talk about the basics of web based images.

Image Basics for Web Developers

Ace — Fri, 04 Dec 2009 21:03:38 +0000

In order to understand how to cut out the images, you need to understand the evolution of images on the internet.

Images on the Internet

You have three ways you can save images for the internet: JPG, GIF and PNG. Here’s a mini history lesson. GIF’s were patented by Unisys in the 80′s and people were afraid that they’d have to start paying to use the format (programs like Photoshop had to until 2006). So they came up with a free version, the PNG, to replace it. Well, other than software makers no one else had to pay for the GIF, so it kept going strong which leaves us all three today.

JPG Pros and Cons

JPG’s are great for images and keeping their file sizes small. They support 16 million colors so if you’re saving a complex graphic or an image for the web, this is the way to go. The drawback of using JPG’s is that they use compression to get rid of things we can’t detect with our eye. That means that you lose some quality in your picture that you can’t get back, so if you use this format to compress your picture, keep your original.

GIF Pros and Cons

GIF’s are great for icons and things with not very many colors. They only support 256 colors, which is plenty for web, and if there are only a few colors in what you’re saving the file size will be much smaller than what the JPG would be. They offer lossless compression so you lose quality by having less colors instead of getting rid of information like the JPG does.

GIF’s also support simple animation and simple transparency (honestly if you want animation that bad Flash is usually a better way to go). However transparency only works for one color, so unless the background is a solid color with no designs this transparency doesn’t work very well.

PNG Pros and Cons

PNG’s are amazing for alpha transparency. The 24-bit, interlaced transparent PNG’s go seamlessly on any background. Their compression is also just a touch better than GIFs. So you’d think they’d be better than GIFs (since GIFs only allow transparency with one color), but there are a couple of problems.

First of all in order for PNG transparency to work in Internet Explorer 6, you have to do a lot of extra work, otherwise things won’t look so good (or you can do like I did here and just tell people that Internet Explorer 6 is no good and they should get a better browser like Google Chrome or Firefox. If you didn’t notice that then you’re probably not using IE 6, it only shows up to people using it). Also PNGs have Gamma support, which should be a good thing but sometimes throws off your color in Internet Explorer (by the way, Internet Explorer is the worst thing that ever happened to the internet. If you use it please, please change now. Use Firefox or Chrome or Safari or Opera or ANYTHING but Internet Explorer). So if that happens to you you’ll have to go through a process to strip the Gamma out for it to look okay, which could be more trouble than it’s worth.

Summary

So. To put it simply:

Use whichever format gives you the smallest file size with the best quality.
Usually JPG’s are best for pictures and complex graphics.
Usually GIF’s are best for images with few colors, like lines or logos.
PNG’s are best for transparency but getting them to work in some browsers can be difficult, so I usually use PNGs as a last resort (which is sad, they’re so great).

To Cut or Not To Cut

Ace — Fri, 04 Dec 2009 21:06:36 +0000

What NOT to Cut

A lot of this section comes from last section. Since code file sizes are much smaller than picture file sizes, you want to do as much with code as you can. That way your page will load faster since the files are smaller, and people will like you more… I mean who wants to wait for a page to load?

Web Standard Fonts

I’ve already mentioned this but if you have paragraphs written in web standard fonts, go ahead and click the eye next to those layers in Photoshop because you won’t need to be cutting them out. The only time you would cut these out is if you gave it a drop shadow, outer glow, or some other effect directly on the text. If it has a cool background you turn off the text and cut out the background by itself.

Solid Colors

Since you can make solid colors with code, don’t cut them out.

Entire Gradients

Cut out a thin slice instead, like I mentioned above. That keeps file sizes small.

What TO Cut Out

That leaves pretty much everything else. So why are you reading this part you might ask? Because I have one important point to make.

When you’re cutting out everything else, you should do it so you can stack things like layers. So cut your logo out separate from your header. Cut your images out separate from your background, etc etc.

How to Cut/Slice from Photoshop

Ace — Fri, 04 Dec 2009 21:18:27 +0000

That leaves (drum roll…) the most important part. HOW?

There are two basic techniques: copying and slicing. I use copying the majority of the time, but sometimes it’s good to use slicing. I’ll cover both in the next few sections, but before you actually do that you have to get ready to save the images.

Set Up

If you haven’t already, create a folder for your web page. Inside that folder make a folder named ‘images’ (lower case i). That’s where you’ll be saving your images. Since you’ll be saving them for the web you need to write file names a certain way so coding will be easier (which is why I said to name images with a lower case i).

Each file you save should be all lower case, and if you want a space you should do it with an underscore just_like_this. So an example jpg name would be ‘my_saved_image.jpg’.

Ok now that’s out of the way, so roll up your sleeves, lets get to work! We’ll be working with examples from http://acylt.com in this next section.

Copy Method for Cutting Pages From Photoshop

Ace — Fri, 04 Dec 2009 21:34:12 +0000

For this technique there are three basic steps:

Target the Image.
Isolate it.
Save it for web.

Target the Image

First you need to target the image. In order to do that you have to decide whether you’ll be using transparency or not. If you are, you need to turn off the background in Photoshop (by clicking the eye), so there are only transparent pixels behind what you’re targeting. If not, you leave the background on.

Here is the example I mentioned before:

Example 1: acylt.com

Example

In this example, if I wanted to line the logo up perfectly with the background then I could cut the logo out as a JPG or a GIF (and just make sure it joins seamlessly with the sky). Instead I’ll cut it out as a PNG so it will work over whatever background I want.

So to target the image, I turn off the background layers. It looks like this:

Example 2:

Hide the Background

Then I use the Marquee tool (pushing M on the keyboard or selecting the dotted square on the toolbar), click so the marching ants are around the image, like so:

Marquee Selection

Isolate the Image

Push ⌘ + Shift + C or go into the Edit menu and choose Copy Merged. The reason we do copy merged instead of just copy, is copy only gets the layer that you’re on. So if I’m on the ‘web design’ text layer when I copy the selection above, it won’t copy the ship. If I push copy merged it will copy everything there, because it will get all the layers.

New Document

Next I open a new document pushing ⌘ + N or going into File and choosing New. If I’ve done copy merged right, the box that comes up (like the example on the right) will give me options that will fit what I’ve just copied perfectly, so just push enter. Don’t even worry about what the settings are.

It will automatically give your image a background, so turn it off like in the example below, and now that you’ve got your image targeted and isolated (in a document of its own, its own size), you’re ready to save for web.

Save for Web

To save for web either push ⌘ + Shift + Option + S or go into File and choose Save for Web & Devices.

You’ll get a dialogue box with lots of options. Here I have an example of saving a JPG, a GIF, and a PNG. I’ve labeled the options you should pay attention to:

Example 1:

Example Saving with JPGs

Example 2:

Example Saving with GIFs

Example 3:

Example Saving with PNG

The first example was a JPG, so it didn’t have transparency and wouldn’t work. The second, a GIF, was smaller than the JPG (9.561K vs 11.57K), but because it can only be transparent with one color it would look very bad on a backdrop of stars.

The third option, PNG-24, is the biggest file size but the only one with the transparency that we need. So we have to go with that.

IMPORTANT!

When you save for web, remember remember remember to save the names of your images all lower case and with_underscores_for_spaces.

Slicing Method for Web Sites in Photoshop

Ace — Fri, 04 Dec 2009 22:01:13 +0000

Slicing is similar to copying but uses the slice tool. I only use it when I want things I’m cutting out to be the same height and line up right next to each other.

For example, the acylt example we’ve been using, if I want to cut the menu out as JPGs instead of PNGs, I have to make sure that everything’s exactly the right size so it all matches with the background. In that case I’d use the slice tool.

To do that choose it by pushing C (if it’s the first option), or clicking on the crop tool and holding so you can choose the slice tool underneath.

Once you’ve got the tool, select the entire menu like this:

Slice Tool Menu Selected

For this to work you want each menu option cut out separately, so you have to divide the slice. This is easy, just right click (or control click) inside the orange slice above. You’ll get a menu that looks like this:

How to Divide a Slice

Next choose how many pieces. In this case there are five menu options and they needed to be divided vertically so I chose:

Divide Option Dialogue Box

Then resize the slices so they fit your menu (or whatever you’re slicing) and Save for Web.

You’ll get a box similar to the one we’ve seen before but with slices now instead of just a preview of what you’re saving. It’ll look like this:

Web Slice Save Options

Shift click on each one of your slices in the middle so they all have orange around them and are darker colors, like in the image above. Then choose the way you want to save them (I chose JPG because it was the smallest filesize and still looked great).

When it asks you what to save, make sure to choose ‘Selected Slices’ like I did below, or it will save a lot of extra files you don’t want.

Save ONLY Selected

It will automatically make a folder and put all the saved slices in it, so just drag those into your images folder and you’ll be good to go!

And there you have it: copying and slicing.

Summary

Remember use copy most of the time, and slice only when you have to cut multiple things out so that they’re the same height.

Last Details

Ace — Fri, 04 Dec 2009 22:02:25 +0000

Now that you know how to cut things out here are a few more details that will hopefully clarify things a little bit.

Cutting Out Menus

The reason we cut these out separately is so we can make our hover overs work. If your menu doesn’t have hover over states you should go back and put some in.

When you’re cutting out your menu you cut out one version of your menu in the normal state, and then one in the hover over state. They should be the same height and width. If you want to be really fancy you can put them both on one image, with the hover over above the normal state but that’s not necessary.

Conclusion

Now you’ve got the tools you need to be able to cut out a website. I haven’t included all of the possible scenarios, so if you’re confused at all just do your best and get ready to code. You’ll probably have to re-cut out some things while you’re coding, but this will have helped you quite a bit so that it’s easier to do once you’re coding.

HTML Introduction

Ace — Wed, 23 Dec 2009 03:52:14 +0000

Introduction

What is this for?

This is for the daunting task of coding a portfolio-style website from scratch. It builds on a tutorial for creating that page in Photoshop; if you haven’t done that yet you should. If you have, then even if you’ve never seen code before in your life, this is for you. The basic format of the website will be:

This specific example is of a home page, but the point is that you should have a header area with a logo and main menu, a content area that is the same width and has content, and a footer with a footer menu and a copyright notice. If your design looks different (for example if you have your main menu down the left side of the content) then you can still use this, you’ll just have to be creative to make it work. I won’t explain how to do that sort of thing explicitly.

You can add more information but just keep in mind that the only part of the site that should change from page to page is the content area. The header and footer should be reusable.

W3Schools.com

This is not meant to be used alone, in fact it will rely heavily on w3Schools.com. This just fills in the gaps that w3schools doesn’t. They’re great about teaching the details of web design, but they don’t put it all together very well.

This will put everything together, but that means that you’ll have to have an iternet connection to use this because you’ll be going to w3schools quite a bit.

HTML5

This is rather bad timing to be writing this document, because HTML 5 is starting to gain momentum. Eventually it will take over, but for now it’s still being developed and isn’t fully supported, and the HTML 4 here provides the groundwork for easy learning later.

One of the main purposes of this is to teach you how to find answers online for how to do this sort of thing. I learned web design from resources online. Everything you need is there, it’s just a matter of training yourself to find it, and knowing the best ways to find it.

Dreamweaver?

To write HTML you need a text editor. In case you were wondering, yes we will be doing this in dreamweaver. However the way that this is written you could do this in anything (including the most simple text editors—however word isn’t very good because it adds code).

Dreamweaver is great, but most companies don’t want to pay the license fee to Adobe. Instead they use free editors, like Eclipse, Notepad ++, etc. So when we code it will always be in CODE mode (highliting code like the example on the right), and always be taught as if we didn’t get all the help from Dreamweaver (partially because dreamweaver can make a mess of your code if you’re using all of its helps).

HTML Basics

Ace — Wed, 23 Dec 2009 03:57:41 +0000

Beautiful, now we’re ready to get started. If you didn’t notice the title of this chapter I’ll write it again, this is all about HTML.

Are you ready? Here are the basic ideas.

My First Heading

Browsers don’t just automatically know what you want your page to look like. They need to know what kind of HTML you’re using, and what you want to show and how. This is done by marking up documents with what I call ‘alligators’ (which are really greater and less than signs < >).

Anything between the alligators- <, > -is meant for the browser to read. Since it’s marking up the document for the browser, it’s called a markup language.

For a browser to show a big ‘My First Heading’, it would need something like this:

My First Heading

The browser sees this code and knows first that it’s html (), then that you want to display content () then that the content is the title ‘My First Heading’ (

). To understand better how this works, go to http://w3schools.com/html/html_intro.asp.

You’ll see a button. Go ahead and click on that and try putting in your own code.

Also try out http://w3schools.com/html/html_primary.asp. That has a few basic tags and will get you more familiar with what HTML looks like.

Once you’ve read about tags come back here.

TAG Basics

Ace — Wed, 23 Dec 2009 04:18:48 +0000

Tags & Elements

If you went to the w3schools link above you’ll know that tags almost always come in pairs. An

tag needs to have a closing

tag. The entire thing (

The text inside

) is an element. The code on each side of the element content describes it (in this case everything between the h1 tags the browser would recognize as a heading or title because that’s what the tags tell the browser).

There are a few tags that are self closing. Those tags look like this: . Notice that in the tag the ‘/’ is right before the last alligator, indicating that the tag doesn’t need another one to close it.

KEY TAGS

If you’ve looked over the list of HTML tags, you may be feeling a bit overwhelmed. There are quite a few! Luckily only a few of them are used most of the time. Here is the list of tags you need to know, and where you can find more information about them:

Headings (titles):

…

These tags are used for titles. So if you have titles and subtitles on your webpage, you would use these tags. It is also common practice to use these for the logo.

http://w3schools.com/html/html_headings.asp

Paragraphs:

It should be pretty obvious that these tags are for paragraphs. Pretty much any content other than titles would fall between

tags.

http://w3schools.com/html/html_paragraphs.asp

Anchor (Link):

These tags are for links and make the text clickable.

http://w3schools.com/html/html_links.asp

Image:

These tags allow you to put in images in your document. We’ll get more into this later, but you should use this for images on the page, not background images (like the content background, etc). We’ll put background images on differently.

http://w3schools.com/html/html_images.asp

Table:

(table row)

(table data)

Tables used to be used for layout and are rarely used for that anymore. One common use for tables would be the form on the contact page (it helps line everything up). Other than that tables should usually be avoided.

http://w3schools.com/html/html_tables.asp

List:

(list item)

This creates lists with bullets next to them. If you wanted numbers instead you would put

menus

http://www.w3schools.com/html/html_lists.asp

Forms:

These are used to get information from people online. They allow people to input data and click submit.

http://w3schools.com/html/html_forms.asp

Divisions:

You will probably use div’s more than any other tag, they are how we create layout. They group things together and are very versatile. You can put pretty much anything inside of them.

http://www.w3schools.com/tags/tag_DIV.asp

Spans:

Spans are like divs, but for inline content. So while div’s are used for big layout, spans would be used to change the color of a little text, or make text bold, italicized, or anything else like that.

Separate Style from Markup

You may have noticed there are html tags for making things bold, italic, etc. The reason we’d use spans instead is because best practice is to separate all styling from html markup, and spans let us do the styling with CSS (Cascading Stylesheets, we’ll discuss those at length in the next chapter)

http://www.w3schools.com/tags/tag_span.asp

That’s it! That may feel like quite a few tags, but it’s really not that bad. Once you’ve mastered these tags you’ll know your way around 95% of all websites. Now that you know some of the tags we’re going to cover how to use them.

Nesting

Ace — Wed, 23 Dec 2009 04:26:48 +0000

Nesting is a very important concept. Ever seen nesting dolls from europe? They’re made of wood, and when you open one doll, you find another inside. Opening the one inside you find another.

The smallest doll fits inside the second smallest. That fits inside the third smallest, and so forth until you get to the biggest one. That’s how code works.

This is a heading

As you can see the ‘smallest’ tag, h1, goes inside the next smallest, div, goes inside the bigger body, goes inside the biggest html.

Doing something like this:

Doesn’t work. It’s like trying to put the top of the biggest doll together with the next biggest dolls bottom. It doesn’t fit. The browser will get confused if you do something like that. Instead it needs to look like this:

Something like this works too:

Both head and body are nested inside of html.

Now go to http://w3schools.com/html/html_elements.asp to get more information.

Required Attributes

Ace — Wed, 23 Dec 2009 05:01:19 +0000

Each element can have attributes. Basically what they do is give the browser more information about a tag. They can tell a link where it should link to, identify a tag so it stands out from all the others, and do many other things. However some tags require attributes. They will be discussed here.

Links:

The first tag that requires an attribute is the anchor tag. Attributes always follow the tag identifier. For example, an anchor tag isn’t just . It needs to tell the browser where to go when it’s clicked on. So it uses the attribute ‘href’, which stands for hyperlink reference. So a full anchor tag would look like:

Link to w3schools.com

Here you would see ‘Link to w3schools.com’ underlined. You wouldn’t see the actuall link but when you clicked on it, it would take you to w3schools.com.

Images

Another attribute would be on the image tag. You need to tell the browser where to get the image to display. If you have your images in an ‘images’ folder, it would look like this:

You probably noticed that one attribute gave the source (src). The other gives the alternate (alt), just in case the browser can’t find your image, or for people who are blind. It should be a description of your image, and if you don’t include the alt tag, your code won’t be up to standard.

Forms:

Form is another tag that requires some attributes. I won’t explain these much in this document since HTML and CSS in and of themselves can’t process forms, but basically ‘method’ tells the form how to process the information users put in, and ‘action’ tells it what will process the information. Here’s an example:

Other Attributes

Ace — Wed, 23 Dec 2009 05:06:34 +0000

If you went to the link above, you should have seen some attributes we haven’t talked about yet. Those are the most important attributes and I’ll explain why here. Specifically I’m talking about title, id, and class. Style is actually an attribute you should never use, which I will also explain here.

Title:

First of all title is an important attribute. If you put that on a tag (like

) then if someone hovers over that paragraph with their mouse, they’ll see ‘My Paragraph’ written there.

This is useful if you want to give people tips, help them around the document, or just increase the clarity of your website. It can go on pretty much any tag, but is most commonly put on h1-h6 tags.

Another benefit to title has to do with SEO (or search engine optimization). If you haven’t heard of it, this is the process of getting your website to rank higher in search engines like google. They see titles as helpful for getting people to navigate your site and reward you for that.

Id:

Id is another hugely important attribute.

To understand it, think of a classroom with students. The id is like a students name. If there are more than one students with a name, it makes it very confusing when the teacher tries to get the attention of one of them. Often the teacher will give one of them a nickname, or a way to distinguish them from the rest of the class.

In a similar way, you can name the tags in your HTML document so you can get their attention later when you want to tell one of them to be big and bold, and another to be a different color, and another to have a background-image, etc etc. But remember, only give each id once per page or it will cause confusion, like it would in a class. So, for example, if I have the id blue on my Home Page:

Here is my Blue Title

I have to make sure that for the rest of that HTML page I don’t give anything else the id=’blue’. I can put id=’blue’ on my About Me page too, since it’s a different page, I just can’t have it twice on a page (the Home, About Me, Portfolio and Contact pages will all be saved as separate HTML documents). This isn’t just preference, it’s essential to keeping your code up to standards.

Class:

What if you have three or four things you want to be blue? Then you would use class. Thinking about the classroom again, even though everyone has a different name, they are all part of a classroom. So if you asked them if they were in such and such a class, they would say yes.

In the same way, if I want to have lots of blue things on a page, I would use class instead of id. It would look like this:

Here is a main title

Here is another main title

Each one of those is part of the group named ‘blue’. It’s also just fine to have just one member of a class, making it like id (for example if you had a class only once on one page because you knew on another page you’d want to use it more than once). But if you’re sure you’ll only have one of something, id is much better (you should have quite a few more id’s than classes)

If you tried putting class=’blue’ on your own HTML you might be wondering why they didn’t actually turn blue yet. That’s because we’ve only given them a name so far. Id and class just name tags. Later on we’ll use those names to tell them what to look like with CSS (Cascading Style Sheets).

Style:

Which brings me to the attribute style. If you’ve seen style used on tags, you’ll notice that it actually does make things look different. For example if you have:

The paragraph will turn blue. The reason you should NEVER NEVER NEVER NEVER do this is because then your styling is in your HTML and remember, we try to separate the markup (HTML) from the actual look of the site (done with CSS).

The basic reason is that if you have your styling in line then if you decide you really wanted all the color on your site to be orange instead of blue, you would have to change every single line where you said you wanted it blue. If instead you did it with CSS then you would only have to change it once, and that would cascade down through everything and make it all the right color. It’s much easier if you do all your styling with CSS. I won’t explain it in any more depth here because it won’t make much sense yet but trust me, if you keep your styling and markup separate it will save you a lot of time.

Tab In

Ace — Wed, 23 Dec 2009 05:13:44 +0000

When you actually write your HTML, you should follow some guidelines. They will help you A LOT.

Tab In

You may have noticed that when I write examples, I always tab in when I’m inside a tag. That’s becuase it helps you to lay your code out visually. Then you know what’s inside what, and you can see whether you ended a tag or not.

So every time you put a tag inside another, tab in. Here’s an example of a very simple web page:

This is an example paragraph.

In the code above, it’s easy to see that everything is inside the tags. Everything else is inside the wrapper. In the wrapper you have two things, a header and content. Inside the header is an

with some content. Inside the content is a
with content. It’s all lined up, and if one of the tags were missing it would be easy to spot. Which takes me to my next point.

Write the End Tag!

Ace — Wed, 23 Dec 2009 05:18:41 +0000

Always write your end tag when you write your first tag. I’m going to write that again. Always write your end tag when you write your first tag. If I write I would push enter and write immediately. Then I’d arrow up and write what’s inside of it. If you do this it will save you all kinds of trouble in the future because you won’t forget end tags. If you don’t you’ll have all kinds of bugs that will be hard to find.

Wrapup

In this chapter you’ve learned all the HTML basics you need to start coding your page. You’ve learned about Elements, Attributes, and Nesting. In the next chapter you’ll start to learn how to make it all start to look right with CSS.

Included with this are two sets of example HTML files. The first example is for websites designed to have the backgrounds of each section (header, body and footer) go off forever in both directions, like http://milesdowsett.com/index.php. I call that HTML Three Wrappers. The second example is for websites designed to have the backgrounds for each section (header, body and footer) in the middle of the page, with a main background going off forever in both directions, like http://www.darrenhoyt.com/ and http://www.toggle.uk.com/ (with toggle they don’t have a main background going on in each direction, they just have backgrounds for their header, body and footer that stay in the middle). I call that HTML Big Wrapper.

IMPORTANT NOTE- The contact page form will act funny until you upload it to a server. That’s because it was written to be sent online, not from your computer. You can still test it; you should get emails if you fill it out right with your email address. It just won’t redirect you back to your page if you do that from your computer.

CSS!

Ace — Wed, 23 Dec 2009 05:22:46 +0000

This chapter is a quick introduction to CSS (cascading style sheets). As such it will just cover the basics you need to know before you can actually start styling your html. But before we get into that, here’s a quick plug for Firefox.

FIREFOX

If you’re using Internet Explorer, stop now. It is notoriously slow, buggy, and non standards compliant. The security on it is the worst of all browsers too, especially if you have an older version.

Instead for all of our development here we’ll be using Firefox. That’s because Firefox has some useful add-ons for web developers and because it is fast, safe, and very standards compliant.

If you like Safari, Chrome or even Opera, go ahead and use them for everything else, but for web development stick with Firefox because of its resources.

Head and CSS

Ace — Wed, 23 Dec 2009 05:27:07 +0000

Getting to Know the Head Part of HTML

By now hopefully you’ve noticed that HTML documents are made up basically like this:

We’ve already said that if you want something to show up in the browser, you should put it inside the body tags. Now we’re going to talk about the head tags.

The head tags are meant to contain information about the document and how it should show up, but not any of the actual text that will show up. So, for example, in the index.html file I included (and you hopefully opened with dreamweaver at the end of the last chapter) you’ll notice at the top of each document, inside the head tags, there is a tag that looks like this:

Home Page

If you go into Firefox and open that document up, you’ll notice in the top of the browser it says ‘Home Page’ (I’ve underlined it in the example below).

Notice that the title isn’t in the actually body. Only what was written between the tags shows up there.

Internal/External Stylesheets

Ace — Wed, 23 Dec 2009 05:33:53 +0000

Internal Style Sheet (CSS)

The reason I bring all of this up is because that’s where we’re going to put the CSS.

One way you can do that is to put in tags like this:

But if we do it that way then if we wanted to change how the main menu looked on each page, we’d have to go into the style on each page. It would be so much better if we could just change it once, right?

External Style Sheet (CSS the best way)

You may have noticed in the example HTML files I gave you there’s a line like this:

That line tells the browser that the CSS for the document is in its own file called style.css. That way each page points to that one file, and if you change what the main menu looks like in that one file, it will change what it looks like on each page saving us all the time and effort of changing them one by one.

For more information on how that works go to http://www.w3schools.com/css/css_intro.asp. Also for more information on the different Style Sheets go to http://www.w3schools.com/css/css_howto.asp.

CSS Formatting and Selecting

Ace — Wed, 23 Dec 2009 05:36:41 +0000

Opening the style.css file you’ll see a the code I put there with its explanation. If you want to look around feel free, but it will still seem pretty obscure until you read the next couple chapters. For now you need to understand how CSS is formatted. W3Schools explains it great here: http://www.w3schools.com/css/css_syntax.asp.

As part of that hopefully you noticed that we have a way in CSS to find classes and id. Putting a period before the class name lets the code know we’re looking for a certain class ( .blue will find the class named blue, or everywhere in our HTML that we have a class=’blue’). Putting a hash or pound sign before a name says we’re looking for a certain id ( #blue will find the id named blue, or everywhere in our HTML that we have an id=’blue’).

This is a very important concept, because lots of the styling we do with CSS is done by finding classes and ids in HTML and telling them how they should look.

You’ll notice too that you can find things by writing tag names. For example, just having ‘a’ written would select all of the anchor tags in the html ().

Wrapup

Now that you know where the style sheet goes and some basics of how it works, you’re ready to start making your page look like your design. The next chapter will help you get everything the right size.