Archive for September, 2008

2 Essential FireFox plug-ins for CSS development

Saturday, September 13th, 2008

FireBug
Firebug allows the live editing of CSS, HTML, and JavaScript of any website. For tweaking the appearance of a webpage, this tool is indispensable for visually seeing the results of your changes to the source code of a webpage. The changes are made locally and are lost when the page is reloaded.

Dust-Me Selectors A thing that bothers me with CSS development is the feeling that there is a precarious ledge over which you are hanging, and as development progresses you are one step away from having a stylesheet that has become unmanageably disorganized and convoluted. This is particularly apparent when multiple people have a hand in editing the appearance of a page, or when you are creating a new stylesheet from an existing one. Dust-Me Selectors is a useful tool for finding CSS selectors that are no longer being used on a page. Additionally, it can spider a whole site to find the CSS selectors that are unused site-wide. The line number and stylesheet name of the unused selectors are provided, so that they can be manually removed. Clean and tidy is a wonderful thing!

The thing I miss about both these tools is the ability to apply the edits directly to the source code of the pages you are working on. A lot of time can be consumed manually applying the changes these tools find, but it is still quicker than making changes without these tools.

What other tools do you use?

State of the Art

Friday, September 5th, 2008

I’m always impressed by interactive graphics that realistically imitate nature. I think there is a lot of inspiration that can be derived from looking at the world around us. One such piece I saw today is a highly impressive work by Tomas Eriksson: Play with Spider. A truly realistic rendering of a spider’s appearance and behavior. Amazingly he wrote this without any third-party package like PaperVision3D. Amazing!

Teaching at Marietta College of Fine Arts

Friday, September 5th, 2008

This is kind of old news now, but I accepted a position as adjunct faculty at Marietta College, teaching a course this semester called Interaction and Motion. Essentially it is teaching Flash to graphic design majors.

Recursively convert XML into multidimensional array (AS2)

Thursday, September 4th, 2008

This is a code snippet I wrote awhile back that recursively works through an XML file and converts it from XML into a multidimensional array. This was from the days before E4X was a part of ActionScript, and as such this is an ActionScript 2.0 example, so it may not be as useful as it once was. But nonetheless, maybe someone will find it of use. Here it is (usage example is at the end):

//recursive function to convert an XML file to an array
function XMLtoArray(node:XMLNode, arr:Array):Array{
	var nodelen:Number = node.childNodes.length;//number of children nodes within a particular node
	var resultValue:Array = [];//result of a recursive call to this function
	var count:Number = 0;//index number of the current node relative to its siblings
 
	node = node.firstChild;
 
	//loop through node children
	for (var i=0; i < nodelen; i++) {
		//if the first child of that node does not have children
		//create an associative array with the node name equal to the node value
		if (node.firstChild.hasChildNodes() == false){
			arr[node.nodeName] = node.firstChild;
		}
		else{
			//else node has more nodes inside, make a recursive call to walk down the XML tree
			arr[count] = [];
			resultValue = XMLtoArray(node, arr[count]);
			if (resultValue != undefined){
				arr.push(resultValue);//push result into array
			}
		}
		//when loop is on its last iteration return the compiled array
		if (i == (nodelen-1)){
			return arr;
		}
		count++;
		node = node.nextSibling;
	}
 
	return undefined;
}
 
var imgXML:String = "<cat><img><filename>1.jpg</filename><caption>cap1</caption></img><img><filename>2.jpg</filename><caption>cap2</caption></img></cat>";
var xmlArray:Array = XMLtoArray(new XML(imgXML), new Array());
 
trace(xmlArray[0][0]["caption"]);
//xmlArray[0] goes into first node <cat>
//xmlArray[0][0] goes into second node <img>
//xmlArray[0][0]["caption"] retrieves contents of <caption>cap1</caption>
 
trace(xmlArray[0][1]["filename"]);
//outputs the filename of the second image