[IT] CSS Zen Garden

While I was at Half Price Books last week I ran across a book called "The Zen of CSS Design". The main author, Dave Shea, is a graphic designer, and cultivator of the CSS Zen garden. What is the CSS Zen garden? It started in May 8, 2003, to as Dave puts it "change how people perceive Web design, and somewhere along the way it ended up an international phenomenon".

The site at http://www.csszengarden.com/is meant to demonstrate the visual power of CSS-based design. On the site, you can select different CSS styles which changes the entire look of the site. These are submitted by various designers around the world using the same base HTML. All the CSS style sheets on the site are also perfectly downloadable. Just type in something like:

http://csszengarden.com/209/209.css

to download the 209th style sheet. Dave also has his own website at

http://www.mezzoblue.com/

which gets updated every other month or so with a graphics or web design tip. So check it out!

[IT] Facebook Automatic Selecter

Today while I was surfing around facebook like all young people do, I came across an annoying issue: Facebook doesn't allow me to select all my friends when I'm trying to suggest friends to someone new on Facebook. I have to manually click each one which is time-consuming and boring.

Naturally, there was a better way. I looked it up and saw a posting on facebook discussing this exact issue. Just paste this line of code into the address bar of your browser (where you type the URL), and your friends are automatically selected:

javascript:elms=document.getElementById('friends').getElementsByTagName('li');for(var fid in elms){if(typeof elms[fid] === 'object'){fs.click(elms[fid]);}}

If you're not as technically minded, you can go on your merry way and just use the code. I wanted to understand what it meant though. So to put it in more readable form:

elms = document.getElementByID('friends').getElementsByTagName('li');

for (var fid in elms) {

if (typeof elms[fid] === 'object') {

fs.click(elms[fid]);

}

}

With knowledge of DOM (Document Object Model) scripting and JavaScript, this is quite comprehensible. Let me write it step-by-step anyway though:

1. Assign the array variable 'elms' to be the array of elements (formally called collection) that is the listed items contained within the div tag named 'friends'. In this case, all the list elements are apparently objects.

2. Loop through all elements in the array 'elms'. For each loop, check whether the element is the type of data known as an object.

3. If so, activate the object called 'fs' to do the method 'click' on the 'fid'th element of the array 'elms'. Apparently, this method just selects the object for you which is the same method that is activated when you do a mouse click.

There are probably some other cool features that you can do to facebook. I'll keep my eyes peeled for some other places where code can come in handy.