// json object   		
var dates = [ {"time":"October 11, 2011 11:13:00"},{"time":"October 20, 2011 11:13:00"},{"time":"October 30, 2011 11:13:00"},{"time":"October 01, 2011 11:13:00"}];
 
/* function sort by ascending
  *@param date1 first date to compare
  *@param date2 second date to compare
*/
var date_sort_asc = function (date1, date2) {
  if (new Date(date1.time) > new Date(date2.time)) return 1;
  if (new Date(date1.time) < new Date(date2.time)) return -1;
  return 0;
};
 
/* function sort by descending
  *@param date1 first date to compare
  *@param date2 second date to compare
*/
var date_sort_desc = function (date1, date2) {
  if (new Date(date1.time) > new Date(date2.time)) return -1;
  if (new Date(date1.time) < new Date(date2.time)) return 1;
  return 0;
};
 
 
// SORT THE DATES
 
dates.sort(date_sort_asc);
 
document.write('<h3>Ascending Order (oldest to newest)</h3>');
for (var i = 0; i < dates.length; i++) {
  document.write(new Date(dates[i].time) + '<br>');
}
 
dates.sort(date_sort_desc);
 
document.write('<h3>Descending order (newest to oldest)</h3>');
for (var i = 0; i < dates.length; i++) {
  document.write(new Date(dates[i].time) + '<br>');
}

Result:

Ascending Order (oldest to newest)

Sat Oct 01 2011 11:13:00 GMT-0700 (PST)
Tue Oct 11 2011 11:13:00 GMT-0700 (PST)
Thu Oct 20 2011 11:13:00 GMT-0700 (PST)
Sun Oct 30 2011 11:13:00 GMT-0700 (PST)

Descending order (newest to oldest)

Sun Oct 30 2011 11:13:00 GMT-0700 (PST)
Thu Oct 20 2011 11:13:00 GMT-0700 (PST)
Tue Oct 11 2011 11:13:00 GMT-0700 (PST)
Sat Oct 01 2011 11:13:00 GMT-0700 (PST)

I wanted a networked hard drive with a lot of space and I wanted it to be a RAID hard drive, however I didn’t want to pay a thousand dollars for a network drive so I got an old Dell Optiplex from work and a LaCie 4TB 2big Quadra 2-Disk RAID Hard Drive. The Dell was free and the 4TB drive was about $500 and was a birthday gift (yeah, I asked for a hard drive for my birthday). I installed Ubuntu onto the Dell. You don’t need a fast computer, any old computer will work. I installed Ubuntu on the Dell and s3cmd to backup my files to my Amazon S3 account. There are some more configurations I made to the Ubuntu box, but I’m not going to list them all here (unless you ask). I plugged the LaCie drive into the Ubuntu box and formatted it to ext 3.

On my mac laptop I wrote this script:

#!/bin/bash
wakeonlan xx:xx:xx:xx:xx:xx
rsync -rztO --exclude=".DS_Store" Documents/ steve@192.168.0.4:/media/backup1/backupDocuments
rsync -rvztO --exclude=".svn" Sites/ steve@192.168.0.4:/media/backup1/backupSites
rsync -rvztO --exclude=".DS_Store" Pictures/ steve@192.168.0.4:/media/backup1/backupPictures
rsync -rvztO --exclude=".DS_Store" Music/ steve@192.168.0.4:/media/backup1/backupMusic
ssh steve@192.168.0.4'sh s3-backup.sh'
exit

wakeonlan – xx:xx:xx:xx:xx:xx is the mac address. This starts up the old Dell (boots it up not wake it up from sleep).
rsync – Copies the files from my laptop to the Lacie Drive over the local network.
ssh – Logs into the Ubuntu box and runs an Amazon S3 script on that machine.

Amazon S3 script to run.

#!/bin/bash
s3cmd sync -r /media/backup1/backupPictures/ s3://mybackup.com/Pictures/
s3cmd sync -r /media/backup1/backupSites/DEV/ s3://mybackup.com/Sites/
s3cmd sync -r /media/backup1/backupSites/m21m-wpmu.com/wp-content/themes/ s3://mybackup.com/Themes/
s3cmd sync -r /media/backup1/backupDocuments/ s3://mybackup.com/Documents/
sudo halt

What this script does is uses s3cmd to copy the files from the Lacie Drive to my Amazon S3 account. And when it’s done it shuts down the Ubuntu box.

So a couple times I week I type this into the terminal:

~ sh runscipt.sh

All my file are backed up onto a my Lacie RAID over my local network and they are also backed up onto my Amazon S3 account. The first time I ran it it took awhile to upload all the files, now it takes a few minutes to backup all my files and I don’t have to carry around a pocket drive or thumb drive or anything. I just run the script in the background while I’m working.

After about a year of working on the framework the sound lab is up and running. It launched on March 27, 2010!

Video from King 5 News about the EMP upgrade.

I’ll explain this pipe from the top down. I added three RSS feeds (Amazon, Twitter and this website M21M), I truncated each feed to 10, I didn’t want my twitter user name to show up 100 times so I replaced it with nothing (you can do the same or replace it with an image or go as crazy as you want), then I did a union on the feeds and sorted them by date published. That creates one RSS feed. Save it, run it and grab the URL. Change the URL, http://pipes.yahoo.com/ to http://pipes.yahooapis.com/ and you’re good to go. You don’t need a proxy file to load your RSS file because yahoo has a crossdomain policy for Flash.

Here’s the ActionScript code.

package com.m21m{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Loader;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextFormat;
	import com.m21m.util.Scroll;
	public class RSSReader extends MovieClip {
		private var RSS_URL:String="http://pipes.yahooapis.com/pipes/pipe.run?_id=2699f2f60ac7027fa560a539dde7d1f5&_render=rss";
		public function RSSReader() {
			var xmlURLLoader:URLLoader = new URLLoader();
			var xmlURLRequest:URLRequest=new URLRequest(RSS_URL);
			xmlURLLoader.load( xmlURLRequest );
			var sb:Scroll=new Scroll(main_mc);
			xmlURLLoader.addEventListener( Event.COMPLETE , dataLoaded );
		}
		private function dataLoaded(event:Event):void {
			var myXMLData:XML=new XML(event.target.data);
			var xmlList=myXMLData..item;
			for (var i:int=0; i<xmlList.length(); ++i) {
				var feed_mc:Feed = new Feed();
				feed_mc.feed_txt.htmlText="<a href='"+xmlList[i].link+"'>"+xmlList[i].title+"</a>";
				main_mc.content_mc.addChild(feed_mc);
			}
			orderFeeds();
		}
		private function orderFeeds() {
			//loop through the feeds and stack them
			for (var i:int=1; i < main_mc.content_mc.numChildren; i++) {
				main_mc.content_mc.getChildAt(i).y=main_mc.content_mc.getChildAt(i-1).y+main_mc.content_mc.getChildAt(i-1).height+1;
			}
		}
	}
}

Of course this is just a quick sample Flash file you can customize the graphics and go as crazy as you want with Yahoo Pipes.

Again you can download the source here. Good luck and if you have questions ask them in the comments.

Here’s what the final project looks like.

This is one text field, with multiple fonts loaded into it and styled with CSS.

First, create the font swf files you want to use in your Flash project.

1) Create a new file in Flash.

2) Open up the library and select New Font.

3) Select the font you want to use in your project and give it a unique name. I used “Akzidenz-Grotesk BQ Light.” Click “Export for ActionScript.”

4) Select the first frame in the timeline and paste in this code:

import flash.text.Font;
Font.registerFont(fontname);

fontname is the name of the Class field from step 3.

Mine looks like this.

5) Export the file into a folder called fonts.

Repeat steps 1-5 to export more fonts. As a rule of thumb don’t use more than three type faces in your project. A lot of different type faces usually makes your design look horsey. Here’s a good article on using typography.

I export my fonts into a folder called fonts, but you can use your own naming convention, just make sure it matches your XML source path.

Once you have exported your swf files create an XML file. Copy the code below and save it in a folder called “xml.”

<?xml version="1.0" encoding="utf-8"?>
<m21m:fontapp xmlns:m21m='http://www.m21m.com/schema/m21m'>
	<m21m:assets>
		<m21m:font src="fonts/akzidenzGroteskBQBDCnd.swf"/>
		<m21m:font src="fonts/akzidenzGroteskBQLtCD.swf" />
	</m21m:assets>
	<m21m:textfield><![CDATA[<p class="hdr">The quick brown fox jumped over the lazy dog.</p><br/><p class="bdy">The quick brown fox jumped over the lazy dog.</p>]]></m21m:textfield>
</m21m:fontapp>

Change the src attributes to match the location of your font swf files you exported.

Here’s the CSS.

.hdr {
  font-family: Akzidenz-Grotesk BQ Medium Condensed;
  font-size: 20;
  color:#000000;
}
.bdy {
  font-family: Akzidenz-Grotesk BQ Light;
  font-size: 16;
  color:#ff0000;
}

Change the font-family styles to match the name field from step 3 above. Style your CSS however you want. Here’s a reference for more information on CSS in ActionScript 3.

Create a new flash file and add a reference to the class in the class field on the properties panel.

Here’s the actionscript code.

package com.m21m{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.StyleSheet;
	public class LoadFonts extends MovieClip {
		private var allFontsLoaded:int=0;
		private var fontLen:int=0;
		private var htmlText:String;
		private var sheet:StyleSheet = new StyleSheet();
		private var STYLESHEET:String='styles.css';
		private var XMLFILE:String='xml/fonts.xml';
		private var XMLNAMESPACE:String='m21m';
		public function LoadFonts() {
			loadStyleSheet();
		}
 
		/**
		  * Load the style sheet first
		*/
		private function loadStyleSheet() {
			var loader:URLLoader = new URLLoader();
			var req:URLRequest=new URLRequest(STYLESHEET);
			loader.load(req);
			//When the style sheet is loaded load the XML file
			loader.addEventListener(Event.COMPLETE, loadXML);
		}
 
		/**
		  * Parse the XML
		*/
		private function loadXML(event:Event) {
			sheet.parseCSS(event.target.data);
			var xml:URLRequest=new URLRequest(XMLFILE);
			var urlLoader:URLLoader=new URLLoader  ;
			//When the XML is loaded parse the XML
			urlLoader.addEventListener(Event.COMPLETE,parseXML);
			urlLoader.load(xml);
		}
 
		/**
		  * Parse the XML
		*/
		private function parseXML(event:Event):void {
			var xml=XML(event.target.data);
			xml.ignoreWhitespace=true;
			var m21m:Namespace=xml.namespace(XMLNAMESPACE);
			var fonts=xml..m21m::font;
			//the text to display
			htmlText=xml..m21m::textfield.text();
			//total number of fonts
			fontLen=fonts.length();
			//When the XML is parsed load all the fonts
			loadAllFont(fonts);
		}
 
		/**
		  * Load each font
		  * @param fonts all the font nodes from the XML file
		*/
		private function loadAllFont(fonts) {
			//load each font
			for (var f:int=0; f<fontLen; ++f) {
				loadFont(fonts[f].attribute('src'));
			}
		}
 
		/**
		  * font loader
		  *
		  * @param URL the swf file of the font to load
		*/
		private function loadFont(URL) {
			var fontLoader:Loader=new Loader  ;
			var fontLoaderInfo:LoaderInfo=fontLoader.contentLoaderInfo;
			fontLoaderInfo.addEventListener(Event.INIT,initHandler);
			fontLoader.load(new URLRequest(URL));
		}
 
		/**
		  * When the fonts are loaded build the first panel
		  *
		*/
		private function initHandler(event:Event) {
			//the number of fonts currently loaded
			++allFontsLoaded;
			if (allFontsLoaded==fontLen) {
				//When the fonts are loaded build the first panel
				createTextfield();
			}
		}
 
		/**
		  * Once the fonts are loaded create a text field
		*/
		private function createTextfield() {
			var my_txt:TextField = new TextField();
			my_txt.wordWrap=true;
			my_txt.multiline=true;
			var format=new TextFormat();
			format.leading=10;
			my_txt.defaultTextFormat=format;
			my_txt.antiAliasType='advanced';
			my_txt.embedFonts=true;
			my_txt.styleSheet=sheet;
			my_txt.htmlText=htmlText;
			my_txt.x=10;
			my_txt.y=10;
			my_txt.width=320;
			stage.addChild(my_txt);
		}
	}
}

I’ve commented this file pretty well. Basically all it does is loads the CSS file, when the CSS file is loaded it loads the XML file, when the XML file is loaded it loads the font swf files, when all the fonts are loaded it creates a text field and displays our CSS formated text from the XML file.

If you have questions ask in the comments below. Again you can download the source files here.

Web Usability

If you don’t get any of the books listed below at the very least get this book. I anyone who works on web sites or is going to hire someone to build them a web site, should read this book. It describes some really basic web usability practices people take for granted.

Learn HTML

There are a ton of references online to learn HTML however it’s good to have a manual right next to you. This is a great book to teach you the right way to use HTML and XHTML.

Dreamweaver is a good WYSIWYG (What you see is what you get. Sounds like wizzy-wig.) editor to use if you are learning how to build web sites. It has a great GUI and is a great code editor. Many web developers only use Dreamweaver to code their entire web projects. Dreamweaver can also be used to help you learn what’s going on visually. For instance you can drop some elements onto the screen (images, text, etc.) and then switch to the code view to see what is happening in the background. I found this book online to walk you through some projects. It looks like it got some good reviews. I haven’t read it, but these are types of books I used to learn HTML.

A program I use on the mac is BBedit. BBedit is in my opinion the best tool for programing on the mac. BBedit has a ton of features and if you know how to use them they make developing very easy.

Learn CSS

This is another manual type of book, but you can actually read straight through this book and learn a ton. I bought this book a few years ago and didn’t even know CSS could do so much. This book teaches the right way to write CSS. The author (Eric Meyer) is known as “The CSS GURU” in the web world.

Learn JavaScript

Once you are familiar with HTML and CSS you should learn some basic JavaScript. This book is more of a manual than a straight read.

A helpful JavaScript library you should get familiar with is JQuery. JQuery makes doing things (like animation, form validation, show and hide screen elements) in JavaScript easy. You don’t need to be a guru to use it, however knowing some basic JavaScript will help.

If you learn HTML, CSS and JavaScript you can do just about any front end project.

Download Firefox

Firefox is the best web browser in my opinion. It has many great features and you can add helpful plug-ins to make it better.

Get some useful plug-ins for Firefox

Web Developer. Web Developer plug-in is very useful for designing and debugging. You can add rules to your page like Photoshop guides to see if elements are lining up onscreen. It has a ruler, html validation, css validation and other validation tools, outline elements and a ton of other tools to help you visually see what is going on for any given web page.

Firebug. Firebug is probably what every web developer has to debug javascript and see what is going on on a page. One of the features I use on a daily basis is the ‘inspect’ feature. If you press inspect you can rollover elements on the screen and view the css for each element. You can even edit the css in the browser to make live changes. The changes aren’t permanent but it really helps to debug. There are many more features you can use with Firebug.

Use Google

I know this sounds like a no brainer but if you cannot figure something out google it. Chances are someone has ran across the same problem. Also you can google “learn HTML” or “learn CSS” and get a ton of tutorials.

Get your own host

Dreamhost is super cheap. For $6 a month and you get host unlimited domains, a free domain and tons of disk space. Use this promo code ( STEVEM21M0NE ) when you sign up and you will get an extra free domain (it saves you $10 a year).

Use WordPress

With a dreamhost account you can use one-click to install a WordPress site. WordPress is the way to go. You can tweak the templates or design your own.

WordPress isn’t just a blogging tool you can use it create sites with the functionality to update your own content. I only create sites using WordPress.

I have read a ton of other useful books, but I think most are beyond this blog post. I’ll publish another post with more books, tools and sites I use for development.