FlashGot Addon for Firefox

You’ll want to install a Firefox extension called FlashGot in order to download the YouTube movie onto your computer.

Once you’ve installed FlashGot, go to YouTube and surf to the video that you want to download. In the lower-right corner of your browser, click the FlashGot icon to select where you’d like to download the video (.flv) file. It should automatically begin downloading.

Apt-Get the Stuff You Need

Before you can convert your Flash video (.flv) to an MP3, you need to install a few tools. Open terminal and type the following:

sudo apt-get install lame ffmpeg libavcodec-unstripped-52

Once the installation completes, you’re ready to convert your .flv file to an mp3 file.

From .flv to .mp3 in one line

Open terminal, cd to the directory where you’ve saved your Flash video, and run the following, replacing SOURCE_NAME and DESTINATION_NAME accordingly:

ffmpeg -i SOURCE_NAME.flv -acodec libmp3lame -ar 44100 -ab 160k -ac 2 DESTINATION_NAME.mp3

You should have yourself a nice, compressed .mp3 file.

Convert to other formats: mpeg, avi, wav, etc

With the power of ffmpeg, you can convert audio and video files to almost anything. Learn more about ffmpeg if you want to tweak your output.

Here’s an example of validating first, then executing:

	/* The good... */
	public function insertNewInvoiceItem($item, $quantity)
	{
		if(!$item instanceof Shop_Item) {
			throw new InvalidArgumentException ('Expecting an item to be an instance of Shop_Item.');
		}

		if(!is_numeric($quantity)) {
			throw new InvalidArgumentException('Quantity is not numeric.');
		}

		// We're good to go. Continue with the function...
	}

The method above is also much cleaner than if... else... statements and limits the extra (perhaps useless) work required by your code:

	/* The bad... */
	public function insertNewInvoiceItem($item, $quantity)
	{
		if($item instanceof Shop_Item) {
			// Do some $item stuff...

			if(is_numeric($quantity)) {
				// Do some $quantity calculations
			} else {
				// Uh oh, $quantity was bad but we've
				// run some Shop_Item logic already.
			}
		}
		else
		{
			// $item is not part of Shop_Item
		}
	}

I used a simple example to demonstrate my point but when this technique is used on more complex logic, it’s benefits are much more obvious.

Happy coding!

Let’s begin…

Alphabetize Your Code

Alphabetizing your code is an extra organizational step often overlooked. It’s especially helpful in PHP classes containing getter and setter functions, but it also comes in handy for CSS and JS. Often times similarly named elements will be somewhat related in function, so clustering them together makes them easier to find.

I’d recommend alphabetizing everything from JS class and function names, to CSS classes and ID’s. You’ll notice that every code example in this article is alphabetized to further exemplify the point.

Comment Everything

Comments are essential, especially among devs working in groups. The styles seem to vary slightly from person to person, but the theme is the same – you can never comment too much.

Here is my commenting style for JS / PHP:

/******************************************************
 * Cart.class.js
 *
 * A class of JS functions associated with the
 * tasks performed by the shopping cart.
 * @author Koa Metter em@mail.com
 * @copyright Copyright (c) 2010, Company
 ******************************************************/
var Cart = {

    // ...

    /**
     * Add item to cart
     * @param string item_id
     * @param string item_quantity
     * @todo Check for string validity
     */
    addCartItem: function (item_id, item_quantity)
    {
        if (!Utilities.isEmpty($('#cart-items')))
		{
			Cart.AJAX({
				data: 'call=addOfferingToCart&args[0]='+item_id+'&args[1]='+item_quantity,

				// Things we'd like to do upon 'status => success' ajax response
				success: function (msg)
				{
					Cart.displayNewCartItem(msg);

					// Update cart total price
					Cart.displayCartTotal();

					// Also update checkout rebilling terms!
					if (msg.response.rebilling_terms_agreement){
						$('#billing-terms-agreement-label').html(msg.response.rebilling_terms_agreement);
					}

					Cart.proceedBtnCheck();
				}
			});
		}
    }

}

When commenting in PHP, phpDocumentor can be used to build a comprehensive dev manual for your source code. I use the same documentation style for JS simply because I come from a PHP background.

Though CSS doesn’t need the phpDocumentor-type of commenting, it should nevertheless remain detailed to explain the elements and their purpose. Clustering elements that are related to the same stylistic area or function of the website helps in organizing without the need of many comment blocks.

Indent CSS

Indenting your code is an obvious standard with most programing languages, but often times CSS is left out of the loop. Indent a CSS element if it’s a child of a parent element, like so:

#container {
    color:#222;
    width:100%;
    z-index:1;
}

    #container .lg-block {
        height:300px;
    }

    #container .sm-block {
        height:100px;
    }

.etc {
    /* ... */
}

The above CSS example shows that the class .lg-block is specifically contained within the ID #container, thus we are indenting it to visually represent the same thing.

OOP-ish Javascript

This topic deviates slightly from actual “coding standards”, but I think it’s equally important – how to format your JS into usable, organized classes. This rule takes into account all other coding standards (alphabetization, indentation, commenting, etc) and applies them to JS, adding in OOP-like objects.

Here’s an example:

var Vehicles = {
    /*
     * Give us the word "Bus"
     * @return string
     */
    bus: function ()
    {
        return 'Bus';
    },

    /*
     * Give us the word "Car"
     * @return string
     */
    car: function ()
    {
        return 'Car.';
    },

    /*
     * Give both car() and truck()
     * @return string
     */
    getCarAndTruck: function ()
    {
        return this.car + ' and ' + this.truck;
    },

    /*
     * Give us the word "Truck"
     * @return string
     */
    truck: function()
    {
        return 'Truck.';
    }
}

// Let's call the function getCarAndTruck like so:
Vehicles.getCarAndTruck();

Shuffling your JS into objects helps associate functions with tasks / groups and thus creates a more organized codebase.

Hopefully this helps. If you have a different method of commenting and/or organizing your CSS or JS code, let me know!

All of the following PHP classes are “works in progress”, but hopefully each is mature enough to find its way into your code. Continue reading to view, download, and use each class.

Cache – Output & Object Caching

Though this class is old (three years), it does the trick, and quickly. Dragon Bosnjak wrote this gem, allowing for easy caching of webpage content into a directory (and filename) of your choosing.

Using Cache Class

Caching your web content is a breeze! Create a new Cache class by specifying a directory to store the cache file, and surround your webpage content in a while loop, like so:

$cache = new Cache("../cache/");

while ($cache->save("filename.cache", 30)) {
	// "30" is the number of seconds the content should remain cached.
	// Your cached content goes here...
 }

Download Cache

You can download and use this golden-nugget of love by visiting PHP Classes – perhaps the most poorly styled/organized website on the internet, but that’s another post entirely.

Last.fm API

If you have yet to discover the hotness of using “Magic Methods” in PHP, I suggest you read up on how to serve up a magic teapot of greatness using PHP5. These Magic Methods are exactly what I used to create this simple Last.fm API class. The result is the ability to quickly make almost any API call without having to continuously fiddle with API key variables, etc.

Using Last.fm API Class

After including the LastFm class file, you need to create a new instance of the LastFm() class.

// include class file
include_once('../inc/class.lastfm.php');

// initate LastFm class
$lastfm = new LastFm();
$lastfm->key = "1234567890"; // your LastFm API key

Then you can call your LastFm API action using the following conversion:

Let’s say we want to call User.getTopAlbums with the user argument set to bob and the period argument set to 3month:

$lastfm->user_getTopAlbums("user=iamkoa","period=3month");

The above PHP code will generate the following API call:

http://ws.audioscrobbler.com/2.0/?method=user.getTopAlbums&user=bob&period=3month&api_key=1234567890

Let The Class Parse Things For You…

The API call will return, for example, the following XML to Array:

Array
(
    [lfm] => Array
        (
            [attr] => Array
                (
                    [status] => ok
                )

            [recenttracks] => Array
                (
                    [attr] => Array
                        (
                            [user] => iamkoa
                            [page] => 1
                            [perPage] => 8
                            [totalPages] => 2777
                        )

                    [track] => Array
                        (
                            [0] => Array
                                (
                                    [artist] => Array
                                        (
                                            [value] => Black Eyed Peas
                                            [attr] => Array
                                                (
                                                    [mbid] => d5be5333-4171-427e-8e12-732087c6b78e
                                                )

                                        )
// etc...

To make any Last.fm API call, simply replace the . symbol with an _ symbol and include any arguments with a "var=bar" pattern. For example, here’s how to make a couple calls:

// call user.getWeeklyTrackChart
$lastfm->user_getWeeklyTrackChart("user=iamkoa");

// call group.getMembers
$lastfm->group_getMembers("group=groupName");

// etc...

Download Last.fm

Download and use the Last.fm PHP class. Please post any enhancements to the class here for others to use.

Time

Time is a bitch. It’s always against us. In the case of parsing a date string into a human-friendly string, it’s even more apparent that time sucks. Hopefully this Time class, though not entirely finished, will help with parsing dates.

Use it

It’s really, really simple to use:

$time = new Time();
echo $time->timeAgoInWords($date_string);

Depending upon when $date_string is relative to the current time, the above code might print one of the following:

"26 July, 2:45 PM", "Yesterday morning", "Today", "Last night", or "28 minutes ago", etc...

Editing the class is pretty simple, so I’ll let all you hackers dig into it for details.

Download Time

Download and use the Time PHP class. Please post any enhancements to the class here for others to use.

Flicka: Beta Teaser from Flicka on Vimeo.

Official Flicka website gives more information…

I’ve finished a simple, photography-showcasing website for myself – which comes with a super-unoriginal URL:
photos.iamkoa.net

If you’re interested in photography or have a showcase website of your own, leave a comment.

Props to Flickr, Cufon, jQuery, Masonry, and Lightbox for making the website dazzle.

An application for Android is about to win the hearts of Flickr fans and photography enthusiasts alike – it’s called Flicka, and it promises to bring the power of Flickr to your Android device.

Here’s a few key features as listed on Flicka’s blog:

Flicka needs to be on my phone. Now!

Mac OS X may not be as easy as Ubuntu to customize, but thanks to GeekTool, you can make your desktop background a little more useful than just eye-candy. I’ll show you how to easily add a calendar, multiple clocks (display both relative and non-relative time), a live system processes chart, and a system up-time timer (with load averages) to your desktop. Of course you can easily add more items, but this should be enough to get you started.

Sounds completely geeky (and it totally is), but GeekTool makes you and your desktop look awesome – it also increases sexual pleasure and makes you last longer in bed.

Get Your GeekTool Ready

Obviously none of this action would be possible without GeekTool, so go download yourself a copy and install it. The install should take you 30 seconds or less. Skim over the Introduction to give yourself a quick overview of your new best friend.

Add The Goods To GeekTool

Now that you have GeekTool installed, it’s time to add some magic to your desktop. (You can reference my desktop screenshot above as you add your GeekTool components.)

For each component you add, you can drag and resize the window in which they appear – you’ll see what I mean once you begin.

To add a new component, click “New Entry” in GeekTool and under the main configuration frame drop-down menu (#3 in the screenshot), choose “Shell”, then insert the following code into the “Command” textbox. The “Refresh” input box can be changed to rerun the Shell command every number of seconds.

Here we go from bottom to top of my desktop screenshot:

System Uptime Stats

uptime
Set refresh to ten.

System Processes Chart

top -l1 -u -o cpu -S -n 15
Edit the number “15″ at the end of the string to display more or less processes.

Local Time

date +%H:%M
You can change the format in which the date is displayed using these nifty conversion symbols.

Non-Relative Time

TZ=Pacific/Honolulu date +"Honolulu: %H:%M"
To change the timezone, edit the TZ variable above to something like “America/Los_Angeles” – a full list of possible TZ variables can be found here:
http://twiki.org/cgi-bin/xtra/tzdatepick.html

Calendar

cal | sed "s/^/ /;s/$/ /;s/ $(date +%e) / $(date +%e | sed 's/./#/g') /"

My Exact GeekTool Setup

Want to completely copy my style? Be my guest!

Colors and Font

White – Monaco
The font size is variable depending upon the component – it varies from 9, the uptime and system processes, to 71, the local time.

Text

Right-justified

Image Background

I can’t remember where I download the background from, but it’s called “Flow” and it insanely rules. (If you know to whom I should give credit, please let me know.)
Download Flow (~3MB)

Enjoy!

The Workaround

Below is a simple Javascript function you can use to convert Tiny-enhanced textareas back into regular form textareas:

var fixTiny = function(properties) {
	var properties = properties || new Object();
	var instance = properties.instance || 'mce_editor_0';
	tinyMCE.execInstanceCommand(instance,'mceCleanup');
	tinyMCE.triggerSave(true,true);
	return true;
}

Using The Goods

Using the above Javascript function is easy. Let’s assume we’re submitting two TinyMCE-enhanced textareas named “excerpt” and “body”, in a form with the id “myForm”. Here’s how to submit the form:

(The form submit code is taken directly from this Mootools demos page. Please refer to that page for further Ajax.Form reference.)

$('myForm').addEvent('submit', function(e) {
	/**
	 * Prevent the submit event
	 */
	new Event(e).stop();

	fixTiny({instance:'excerpt'});
	fixTiny({instance:'body'});

	/**
	 * This empties the log and shows the spinning indicator
	 */
	var log = $('log_res').empty().addClass('ajax-loading');

	/**
	 * send takes care of encoding and returns the Ajax instance.
	 * onComplete removes the spinner from the log.
	 */
	this.send({
		update: log,
		onComplete: function() {
			log.removeClass('ajax-loading');
		}
	});
});

All of this code, including the fixTiny function should be placed within a domready event.

Simple, Right?

If I’ve missed anything, shout at me. You can also refer to the Mootools forums for further examples of using both TinyMCE and the Ajax.Form class.