Short URL is commonly used today for several reasons: avoid url garbling, take smallest space especially for long url which need to be posted at limited space format eg: twitter, also often used to manipulate user for specific purposes eg: hiding orginal url for phising and ads/affiliation links.

There are many websites that provide shortening url services, tinyurl, bit.ly, hex.io are some of them, and as addition to my simple twitter, plurk and facebook api implementation, i have created a PHP script to create short url on the fly, currently support: tinyURL, bit.ly, is.gd, tr.im and hex.io, but you can easily add other providers.

PHP Class

<?php
/*
** Title: Shortening URL Class
** Author: chazzuka <ariel@chazzuka.com>
** Author URL: http://www.chazzuka.com
** Latest Updated: September 24 2009
*/
class ShortUrl {

	public static function create($url,$provider='tinyurl',$user='',$key='') {
		$api_url = sprintf(self::api($provider),urlencode($url),$user,$key);
		return self::inspect($provider,self::execute($api_url));
	}

	private static function execute($url) {
		$ch = curl_init();
		curl_setopt ($ch, CURLOPT_URL, $url);
		curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 5);
		$text = curl_exec($ch);
		curl_close($ch);
		return $text;
	}

	private static function inspect($provider,$xml) {
		if(!empty($xml)) {
			switch(strtolower(trim($provider))){
				case "bitly":
					$o = new SimpleXMLElement($xml);
					return (string)$o->results->nodeKeyVal->shortUrl;
					break;
				case "trim":
					$o = new SimpleXMLElement($xml);
					return (string)$o->url;
					break;
				case "isgd":
				case "hexio":
				default:
					return $xml;
			}
		}
		return false;
	}

	private static function api($provider) {
		switch(strtolower(trim($provider))){
			case "bitly":
				$return = "http://api.bit.ly/shorten?version=2.0.1&format=xml&longUrl=%s&login=%s&apiKey=%s";
				break;
			case "isgd":
				$return = "http://is.gd/api.php?longurl=%s";
				break;
			case "hexio":
				$return = "http://hex.io/api-create.php?url=%s";
				break;
			case "digg":
				$return = "http://services.digg.com/url/short/create?url=%s&appkey=%s&type=xml";
				break;
			case "trim":
				$return = "http://api.tr.im/v1/trim_url.xml?url=%s";
				break;
			default:
				$return = "http://tinyurl.com/api-create.php?url=%s";
		}
		return $return;
	}
}
?>

Sample of usage:

<?php
$url = 'http://www.chazzuka.com/blog/?p=192';
echo ShortUrl::create($url,'trim');
echo '<hr />';
echo ShortUrl::create($url,'tinyurl');
echo '<hr />';
echo ShortUrl::create($url,'isgd');
echo '<hr />';
echo ShortUrl::create($url,'hexio');
echo '<hr />';
echo ShortUrl::create($url,'bitly','your_user_name','your_api_key');
?>

I had signup with plurk a year ago but haven’t “plurking” since i use twitter a lot, and for me both of them were created for same purpose, microblogging, sharing what you’re up to in few sentences and follow what your friends up to. Today i had re-theming my personal blog and use free seven five wordpress theme by press75 which is very simple and already integrated with twitter status, delicious bookmarks, and external RSS feed, then i thinks its good to add plurk also.

Theres a wordpress plugin to achieve this purpose already, but here i only need to fetch status update, and dont need any widget or possibility to update my status from my blog, and here we go,

// fetch plurk messages
function plurk_messages(
	$username = '',
	$num = 1,
	$list = true,
	$show_username = false,
	$show_moods = true,
	$encode_utf8 = false)
{
	$plurk_url = 'http://www.plurk.com';

	$plurk_moods = array('loves','likes','shares','gives','hates','wants','wishes','needs','will','hopes','asks','has','was','wonders','feels','thinks','says','is');
	array_walk($plurk_moods, 'plurk_addspace');

	$plurk_mood_replace = array();
	$plurk_mood_replacer = array();

	include_once(ABSPATH . WPINC . '/rss.php');

	$messages = fetch_rss('http://www.plurk.com/user/' . $username . '.xml');

	if ($list) echo '<ul class="plurk">';

	if ($username == '')
	{
		if ($list) echo '<li>';
		echo 'RSS not configured';
		if ($list) echo '</li>';
	}
	else
	{
			if ( empty($messages->items) )
			{
				if ($list) echo '<li>';
				echo 'No public plurk messages.';
				if ($list) echo '</li>';
			}
			else
			{
				// start fetching
				$i = 0;
				foreach ( $messages->items as $message )
				{
					$msg = $message['atom_content'];
					$author_name = $message['author_name'];
					$link = $plurk_url.$message['link_'];
					$time = strtotime($message['published']);

					if(!$show_moods) { $msg = str_replace($plurk_moods,'',$msg); }
					else {
						if(empty($plurk_mood_replace)||empty($plurk_moods_replacer)){
							list($plurk_mood_replace,$plurk_mood_replacer) = plurk_moods_format($plurk_moods,$author_name);
						}
						$msg = str_replace($plurk_mood_replace,$plurk_mood_replacer,$msg);
					}

					if(!$show_username) { $msg = str_replace($author_name.' ','',$msg); }
					else { $msg = str_replace($author_name,'<a class="plurk_username" href="'.$plurk_url.'/'.$username.'">'.$author_name.'</a>',$msg); }

					if($encode_utf8) $msg = utf8_encode($msg);

					if ($list) { echo '<li class="plurk-item">'; } else { echo '<p class="plurk-message">'; }

					$msg = preg_replace("/<a href=["' ]?([^"' >]+)["' ]?[^>]*>(.*?)</a>/i",'$1',$msg);
					$msg = plurk_hyperlinks($msg);
					$msg = plurk_users($msg);

					echo $msg;

					if ( ( abs( time() - $time) ) < 86400 ) {  $h_time = sprintf( __('%s ago'), human_time_diff( $time ) ); }
					else{ $h_time = date(__('Y/m/d'), $time); }

					echo '<span class="plurk-timestamp"><abbr title="' . date(__('Y/m/d H:i:s'), $time) . '">' . $h_time . '</abbr></span>';

					if ($list) { echo '</li>'; } else { echo '</p>'; }

					$i++;
					if ( $i >= $num ) break;
				}
				// end fetching -->
			}
	}
	if ($list) echo '</ul>';
}
// set pattern + replacement for message prefix (says, is etc.)
function plurk_moods_format($plurk_moods,$user){
	$plurk_moods_replace = $plurk_moods_replacer = array();
	foreach($plurk_moods as $mood){
		$plurk_moods_replace[] = "$user $mood";
		$plurk_moods_replacer[] = $user.' <span class="plurk-'.trim($mood).'">'.trim($mood).'</span> ';
	}
	return array($plurk_moods_replace,$plurk_moods_replacer);
}
// add spaces into moods
function plurk_addspace(&$item,$key) { $item = "$item "; }

And couple of functions below taken from Twitter for Wordpress plugin by Ricardo Gonzalez to format autolink and in-reply message.

// format autolink
function plurk_hyperlinks($text) {
    // Props to Allen Shaw & webmancers.com
    // match protocol://address/path/file.extension?some=variable&another=asf%
    //$text = preg_replace("/([a-zA-Z]+://[a-z][a-z0-9\_.-]*[a-z]{2,6}[a-zA-Z0-9/*-?&\%]*)/i","<a href="$1" class="plurk-link">$1</a>", $text);
    $text = preg_replace('/([a-zA-Z]+://[w_.-]+.[a-zA-Z]{2,6}[/w-~.?=&%#+$*!]*)/i',"<a href="$1" class="plurk-link">$1</a>", $text);
    // match www.something.domain/path/file.extension?some=variable&another=asf%
    //$text = preg_replace("/(www.[a-z][a-z0-9\_.-]*[a-z]{2,6}[a-zA-Z0-9/*-?&\%]*)/i","<a href="http://$1" class="plurk-link">$1</a>", $text);
    $text = preg_replace('/(?<!://)(www.[w_.-]+.[a-zA-Z]{2,6}[/w-~.?=&%#+$*!]*)/i',"<a href="http://$1" class="plurk-link">$1</a>", $text);    

    // match name@address
    $text = preg_replace("/([a-zA-Z][a-zA-Z0-9\_.-]*[a-zA-Z]*@[a-zA-Z][a-zA-Z0-9\_.-]*[a-zA-Z]{2,6})/i","<a href="mailto://$1" class="plurk-link">$1</a>", $text);
        //mach #trendingtopics. Props to Michael Voigt
    $text = preg_replace('/([.|,|:|¡|¿|>|{|(]?)#{1}(w*)([.|,|:|!|?|>|}|)]?)s/i', "$1<a href="http://plurk.com/#search?q=$2" class="plurk-link">#$2</a>$3 ", $text);
    return $text;
}
// in-reply to
function plurk_users($text) {
       $text = preg_replace('/([.|,|:|¡|¿|>|{|(]?)@{1}(w*)([.|,|:|!|?|>|}|)]?)s/i', "$1<a href="http://plurk.com/$2" class="plurk-user">@$2</a>$3 ", $text);
       return $text;
}

Copy those functions in your functions.php at your active theme folder, or you can put it in separate file then include it in your functions.php file.

The implementation is simple, just call the function in your file where you need your plurk status to be placed.

plurk_messages('username',10) ;

The function tahe few parameters in sequential order as follow:

1. Username
2. Number of status to be displayed
3. Flag true/false Use unordinal list or note (ul li or p)
4. Flag true/false show your username in the message
5. Flag true/false show the message prefix or not
6. Flag true/false Encode the message in UTF8 or not

How to styling? you need to add CSS for few class of the HTML tag which are auto generated by the function

ul.plurk, li.plurk-item. p.plurk-message, a.plurk_username, span.plurk-timestamp, a.plurk-link, a.pluk-user, also series of span with classes prefix by plurk- and followed by message prefix eg: span.plurk-says, span.plurk-loves etc.

Do you plurking? add me!

Thas it, hopely it usefull for you.

Thomas Fuchs has announced the alpha release of scripty2, the successor of well known, powerful and flexible javascript library script.aculo.us. scripty2 is designed to help you write your own delicious visual effects & user interfaces.

Check out the demo to see the possibilities scripty2 can do, however as it is still in alpha version which means there will be tweaking and rewrite into the library and it is not yet recommended for production use.

80+ social network icons which consists of 40+ 16 pixel x 16 pixel icons and 40+ 32 pixel by 32 pixel icons all in 32-bit PNG format by komodomedia.

Download it here

jQuery validation engine, yet another nice form validation plugin for jquery javascript framework, comes with language localization supported and many predefined validation rules:

• optional: Special: Only validate when the field is not empty
• required: Field is required
• length[0,100] : Between x and x characters allowed
• minCheckbox[7] : Set the maximum checkbox autorized for a group
• confirm[fieldID] : Match the other field (ie:confirm password)
• telephone : Match telephone regEx rule.
• email : Match email regEx rule.
• onlyNumber : Numbers only
• noSpecialCaracters : No special characters allowed
• onlyLetter : Letters only
• date : Invalid date, must be in YYYY-MM-DD format

but you also could define a custom validation rule i.e:

"telephone":{
"regex":"/^[0-9-()]+$/",
"alertText":"* Invalid phone number"},

Has been tested in Internet Exploder 6 & 7, Firefox 3+, Safari 4, Chrome 1+

Download and Demos

JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OOP.

JS.Class is designed to make JavaScript behave like Ruby in terms of its OOP structures. To this end, it provides the following features:

1. Classes and modules with Ruby-compatible inheritance
2. Subclassing and mixins
3. Late-binding arguments-optional super calls to parent classes and mixins
4. Singleton methods and eigenclasses
5. included, extended and inherited hooks
6. Method binding
7. Ports of various standard Ruby modules, including Enumerable, Hash, Set, Observable, Comparable, Forwardable

Its inheritance system supports late-bound super() calls to parent classes and modules, including calls from singleton methods. It has been designed to mimick Ruby as closely as possible, so if you know Ruby you should feel right at home.

var Animal = new JS.Class({
        initialize: function(name) {
            this.name = name;
        },

        speak: function(things) {
            return 'My name is ' + this.name + ' and I like ' + things;
        }
    });

Download & example available at it’s official website

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

Features:

• Multiple Data Representations,
  Treemaps, Radial Layouts, HyperTrees/Graphs, SpaceTree-like Layouts, and more…
• Major Browsers Support,
  IE6+, Firefox2+, Safari3+, Opera9.5+
• Open Source,
  Licensed under the BSD License
• Library Agnostic,
  You may use the JIT with your favorite DOM manipulation framework
• Extensible,
  All visualization classes are mutable, so you can easily add/override any method you want.
• Composable,
  Visualizations can be combined in order to create new visualization methods.

Check out the demo page along with source code example

Matt has announced the new release of wordpress 2.8 – Baker, with over 790 bugs fixed, and over 180 new features, changes, upgrades, and improvements.

The Major Improvements:

1. Wordpress style and scripting has changed which makes the new wordpress 2.8 is way faster to use.
2. Enabled browse the entire theme directory and install a theme with one click
3. CodePress editor gives syntax highlighting to the previously-plain editor. Also there is now contextual documentation for the functions in the file you’re editing linked right below the editor.
4. widgets interface redesigned, also with much cleaner and robust widget API
5. new Screen Options on every page

Ready to upgrade? grab the new wordpress 2.8 here

Once i have performance issue in a website project i am working at, and i have wasted hours of my time to fix it up both in the server-side and client-side, for future checklist i searched on web and found great list of best practices to speed up our web page load at yahoo developer network.

Below are the summary:

1. Minimize HTTP Requests, this can be done with the following practices:
   • Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script
   • CSS Sprites, combined your background image into a single image and use CSS property to control the position of image segment
   • Image maps combine multiple images into a single image
   • Inline images use the data: URL scheme to embed the image data in the actual page
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header:
   • For static components: implement “Never expire” policy by setting far future Expires header
   • For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
4. Compress HTTP text response with Gzip Components (text, html, json, xml)
5. Put CSS/stylesheets declarations at the Top
6. Put client side scripts at the bottom, some scripts can be placed at the bottom but some may not, so use it as neccessary
7. Avoid CSS Expressions, since it is evaluated more than we expect: on load, resize, scrolled, and even on mousemove
8. Make JavaScript and CSS External, take the benefit of browser caching mechanism
9. Reduce DNS Lookups in server’s settings
10. Minify JavaScript and CSS, you can use JSMin and YUI Compressor to achieve this goal
11. Avoid Redirects, one of the common mistaken is missing a trailing slash (/) from a URL, i.e: http://www.domain.tld/directory will be 301 redirected to http://www.domain.tld/directory/
12. Avoid scripts duplication
13. Configure ETags, Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server.
14. Make Ajax Response Cacheable, some rules should apply also to ajax are: Add an Expires or a Cache-Control Header, Compress HTTP reponse with Gzip component, Reduce DNS Lookups, Minify JavaScript, Avoid Redirects, Configure ETags
15. Flush the Response Buffer Early, in php there is flush(), and response.flush in asp
16. Use GET for AJAX Requests, because POST method is implemented in the browsers as a two-step process: sending the headers first, then sending data.
17. Post-load Components, Load page element only when it is neccessary or after the top priority elements is loaded. Have a l ook at YUI Image Loader, YUI Get Utility, or jQuery Lazy Load
18. Preload Components
    • Unconditional preload – as soon as onload fires, you go ahead and fetch some extra components.
    • Conditional preload – based on a user action you make an educated guess where the user is headed next and preload accordingly.
    • Anticipated preload – preload in advance before launching a redesign.
19. Reduce the Number of DOM Elements, means you need to optimize your markup, do not use new element if you can solve the issue in different ways
20. Split Components Across Domains, Splitting components allows you to maximize parallel downloads.
21. Avoid using iframes (and frames either)
22. No 404s, because the HTTP request is expensive
23. Reduce Cookie Size, It’s important to keep the size of cookies as low as possible to minimize the impact on the user’s response time
24. Use Cookie-free Domains for Components, You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.
25. Minimize DOM Access:
    • Cache references to accessed elements
    • Update nodes “offline” and then add them to the tree
    • Avoid fixing layout with JavaScript
26. Develop Smart Event Handlers, attach event handler via parent elemnt wherever possible
27. Choose
    over @import for stylesheets
28. Avoid Filters, mostly comes when dealing with IE6, YDN recommended using PNG8 which working fine in IE, but for me better shoot the IE6 with a machine gun (a lot headache cos of IE6 already)
29. Optimize Images: Try converting GIFs to PNGs, Run pngcrush (or any other PNG optimizer tool) on all your PNGs, Run jpegtran on all your JPEGs
30. Optimize CSS Sprites:
    • Arranging the images in the sprite horizontally as opposed to vertically
    • Combining similar colors in a sprite helps you keep the color count low
    • “Be mobile-friendly” and don’t leave big gaps between the images in a sprite.
31. Don’t Scale Images in HTML
32. Make favicon.ico Small and Cacheable
33. Keep Components under 25K
34. Pack Components into a Multipart Document

Check out the original article at YDN

Awsome free icons at smashingmagazine available for download, 2 different set of high quality icons in PNG format with different sizes and downlaodable along with PSD & AI (adobe illustrator format) source for free, allow you to make any modifications to the icons to fit your needs.

Flavours Icon Set by Oliver Twardowski, aimed to help designers in their Web and user interface designs, contains 177 icons in a resolution of 48×48 pixels. The files are available for in the PNG and PSD sources.

Cute Twitters Icon Set, This set was designed by the talented Mirjami Manninen, this new set contains eight transparent PNG icons for Twitter, available in resolutions of 128×128 pixels, 256×256 and 512×512. The sources are in EPS files (for CS4 and CS3), PSD files and AI files (for CS4).