The html blog http://htmlblog.net The web sandbox of Asvin Balloo Mon, 29 Dec 2008 12:01:02 +0000 http://wordpress.org/?v=2.7 en hourly 1 twitree.com - see on which leaves the birds are… http://htmlblog.net/twitreecom-see-on-which-leaves-the-birds-are/ http://htmlblog.net/twitreecom-see-on-which-leaves-the-birds-are/#comments Mon, 29 Dec 2008 12:01:02 +0000 asvin http://htmlblog.net/?p=81 I am happy to announce the launch of twitree.com. It's a twitter application which allows a twitterer to view his followers in a tree-like navigation, which can be expanded.

twitree

twitree makes extensive use of the YUI library. The following components were used :

  • grids css - for the layout
  • yahoo dom event - for DOM and event handling
  • connection manager - for AJAX requests like getting the list of followers for a user
  • container family - to display modal dialogs like prompting for a twitter username, displaying the loading panel
  • JSON utility - to parse the JSON data twitree receives from the twitter servers
  • cookie utility - to fetch username information from a cookie so that the user doesn't have to input his username every time
  • and finally the treeview control which provides a nice tree and dynamically loads the data upon clicking on a node

The application is very much in an initial phase and there are some limitations, like only 100 followers are being returned, rate limiting, etc...

Stay tuned for further information

]]> http://htmlblog.net/twitreecom-see-on-which-leaves-the-birds-are/feed/ Alternate colors to table rows with javascript (YUI) http://htmlblog.net/alternate-colors-to-table-rows-with-javascript-yui/ http://htmlblog.net/alternate-colors-to-table-rows-with-javascript-yui/#comments Tue, 16 Dec 2008 16:49:36 +0000 asvin http://htmlblog.net/?p=71

This article will show you how to add alternate colors to table rows without any server side development or hard coding your scripts, thus providing good readability for your users and great flexibility for you. We will use the YUI library for that.

Demo
Download the demo

The HTML

We need to create our basic HTML file containing a table and adding a class name to it.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Alternate colors</title>
	</head>
	<body>
<table class="alternateRows">
<tr>
<td>First Row</td>
</tr>
<tr>
<td>Second Row</td>
</tr>
<tr>
<td>Third Row</td>
</tr>
<tr>
<td>Fourth Row</td>
</tr>
<tr>
<td>Fifth Row</td>
</tr>
</table>
 
	</body>
</html>
 

The Javascript

Next we need to include the YUI libraries, served from their CDN. We need the

  • YAHOO global object which contains a number of methods that are used throughout the library
  • DOM collection which provides methods that simplify common DOM-scripting tasks, including element positioning and CSS style management
  • Event utility for various event handling
 
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
 

And also our javascript file, alternate.js

 
<script type="text/javascript" src="alternate.js"></script>
 

So our HTML page looks like this:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="alternate.js"></script>
		<title>Alternate colors</title>
	</head>
	<body>
<table class="alternateRows">
<tr>
<td>First Row</td>
</tr>
<tr>
<td>Second Row</td>
</tr>
<tr>
<td>Third Row</td>
</tr>
<tr>
<td>Fourth Row</td>
</tr>
<tr>
<td>Fifth Row</td>
</tr>
</table>
 
	</body>
</html>
 

Invoking the javascript

To add the alternate colors to your table rows, you just have to put the following javascript code in your HTML page.

 
	YAHOO.util.Event.on(window, 'load', function(){
		YAHOO.htmlblog.alternateRows.init('alternateRows', '#fff', '#ccc');
	});
 

That means that after the page has been loaded, we call the alternateRows.init function, with 3 parameters:

  • the table class name, in our case it's "alternateRows"
  • the first color in hex, e.g #fff
  • the second color in hex, e.g #ccc




Our complete HTML page

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: -->
<script type="text/javascript"src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="alternate.js"></script>
		<script type="text/javascript">
			YAHOO.util.Event.on(window, 'load', function(){
				YAHOO.htmlblog.alternateRows.init('alternateRows', '#fff', '#ccc');
			});
		</script>
		<title>Alternate colors</title>
	</head>
	<body>
<table class="alternateRows">
<tr>
<td>First Row</td>
</tr>
<tr>
<td>Second Row</td>
</tr>
<tr>
<td>Third Row</td>
</tr>
<tr>
<td>Fourth Row</td>
</tr>
<tr>
<td>Fifth Row</td>
</tr>
</table>
 
	</body>
</html>
 

Demo
Download the demo

]]> http://htmlblog.net/alternate-colors-to-table-rows-with-javascript-yui/feed/ Bubble menu javascript or playing with YUI’s event delegation http://htmlblog.net/bubble-menu-javascript-or-playing-with-yuis-event-delegation/ http://htmlblog.net/bubble-menu-javascript-or-playing-with-yuis-event-delegation/#comments Mon, 24 Nov 2008 15:10:41 +0000 asvin http://htmlblog.net/?p=63 bubble
Image courtesy of jobee59's photostream

Event delegation refers to the use of a single event listener on a parent object to listen for events happening on its children (or deeper descendants). Event delegation allows developers to be sparse in their application of event listeners while still reacting to events as they happen on highly specific targets. This proves to be a key strategy for maintaining high performance in event-rich web projects, where the creation of hundreds of event listeners can quickly degrade performance. More on event delegation including examples.

This post illustrates the use of event delegation to create a "bubble" menu, inspired by Bedrich Rios' post on Nettuts.

Demo
Download sample file



The HTML

We'll need the following components from the YUI library:

So our basic HTML page is like this:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: -->
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
	</head>
	<body>
 
	</body>
</html>
 

Next we'll add some structural markup, a simple list, with "menu" as class name and with 5 items.

 
<ul class="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
 

Updated HTML page:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: -->
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
	</head>
	<body>
<ul class="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
 
	</body>
</html>
 

The Javascript

Then we just have to add the bubble.js javascript file to our page and it's done, we'll have a nice "bubble" menu.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: -->
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
		<!-- our bubble file -->
		<script type="text/javascript" src="bubble.js"></script>
	</head>
	<body>
<ul class="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
 
	</body>
</html>
 

bubble.js

 
/**
*	Bubble Menu
*	@author Asvin Balloo (http://htmlblog.net)
*/
bubbleMenu = {
	// private variables
	// class name of our menu
	menuClassName: null,
	// by how much we are sliding
	moveToLength : 10,
 
	/**
	*	Init the whole process here
	*	@method init
	*	@params menuClassName {string} class name of our menus
	*/
	init: function(menuClassName){
		// set our class name to be used later one
		bubbleMenu.menuClassName = menuClassName;
 
		// get all the lists with the class name
		var list = YAHOO.util.Dom.getElementsByClassName(menuClassName);
 
		// loop through them
		for(var i=0; i
<list.length; i++) {
			// add the onmouseover event to it, call the mouseOverHandler function
			YAHOO.util.Event.on(list[i], "mouseover", bubbleMenu.mouseOverHandler);
 
			// get the first child and its padding left for future reference. Useful when using onmouseout to 
 
restore the item to original state
			var listItems = list[i].getElementsByTagName('li');
			var startingPadding = parseInt(YAHOO.util.Dom.getStyle(listItems[0], 'paddingLeft'));
 
			// add the onmouseout event, call the mouseOutHandler function
			YAHOO.util.Event.on(list[i], "mouseout", bubbleMenu.mouseOutHandler, {'list':list[i], "padding" : 
 
startingPadding});
		}
	},
 
	/**
	*	Mouse over handler
	*	@params e {Event} the event
	*/
	mouseOverHandler: function(e){
		// get the target
		var elTarget = YAHOO.util.Event.getTarget(e);
 
		// calculate the current padding left
		var paddingLeft = parseInt(YAHOO.util.Dom.getStyle(elTarget, 'paddingLeft'));
 
		// call the delegate method, with the target and the padding left value
		bubbleMenu.delegate(elTarget, paddingLeft);
	},
 
	/**
	*	Mouse out handler
	*	@params e {Event} the event
	*	@params o {JSON} JSON data containing the list + padding value, eg. {'list': mylist, 'padding': 10}
	*/
	mouseOutHandler: function(e, o){
		// get the target
		var elTarget = YAHOO.util.Event.getTarget(e);
 
		// calculate the left padding, the original padding value - by how much we have padded
		var paddingLeft = o.padding - bubbleMenu.moveToLength;
 
		// call the delegate method with the target and padding value
		bubbleMenu.delegate(elTarget, paddingLeft);
	},
 
	/**
	*	Cool things go here, like animation
	*	@params elTarget {Target} our target
	*	@params padding {Int} by how much we are going to padd
	*/
	delegate: function(elTarget, padding){
		//walk up the DOM tree looking for an <li> in the target's ancestry; desist when you reach the container with our class name
		while (elTarget.className != bubbleMenu.menuClassName) {
			// are you an LI?
			if(elTarget.nodeName.toUpperCase() == "LI") {
				// if so then animate, set the attributes, in our case the left padding
				var attributes = { paddingLeft: {"to": [padding + bubbleMenu.moveToLength] } };
 
				// create our animation
				var anim = new YAHOO.util.Motion(elTarget, attributes, 0.6, YAHOO.util.Easing.bounceOut);
 
				// then animate
				anim.animate();
				break;
			}
			else {
				// it's not an li, so we keep looking and looking
	            elTarget = elTarget.parentNode;
	        }
		}
	}
};
 
// init the whole thing here
YAHOO.util.Event.on(window, "load", function(){
	bubbleMenu.init("menu");
});
 

You can have unlimited (don't abuse) number of bubble menus by just adding the "menu" class to each one of them and including the bubble.js file.
If you're not happy with the menu class or you found another cool class name, then you'll have to update the bubble.js file towards the end:

 
// init the whole thing here
YAHOO.util.Event.on(window, "load", function(){
	bubbleMenu.init("mycoolclass");
});
 

Also you can modify by how much an item slides by modifying the moveToLength variable (default 10):

 
 
// by how much we are sliding
moveToLength : 30,
 

Note that the demo is using reset-fonts-grids CSS and the page has been styled with the following:

 
body {
	margin: 0;
	padding: 0;
	background: #1d1d1d;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}
 
.menu li{
	padding-left: 20px;
	line-height: 2em;
	width: 150px;
	color: #999;
 
	background: #222;
	border: 1px solid #1a1a1a;
	-moz-border-radius: 10px;
}
 
]]> http://htmlblog.net/bubble-menu-javascript-or-playing-with-yuis-event-delegation/feed/ 9 tips to validate your XHTML code http://htmlblog.net/9-tips-to-validate-your-xhtml-code/ http://htmlblog.net/9-tips-to-validate-your-xhtml-code/#comments Wed, 12 Nov 2008 15:29:14 +0000 asvin http://htmlblog.net/?p=41 HTML Code

What is validation ?
According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language.

Why taking the trouble to validate your XHTML ?

  • Properly written XHTML code will render better, render on more browsers, and render faster than XHTML with errors. It's also more easily adapted to print and alternative browsing devices like mobile phones and handheld computers.
  • Properly written XHTML code is more likely to be "future-proof" (backward compatible with future standards and future web browsers).
  • Browsers are becoming more standards compliant, and it is becoming increasingly necessary and important to write valid and standards compliant XHTML code
  • Poorly written XHTML can greatly reduce the amount of traffic your web site receives from search engines.
  • Write XHTML code right the first time and write it once.
  • You don't want to look foolish among your friends while not knowing the rules, uh?

Tip 1: Specify a DOCTYPE and namespace
Include a DOCTYPE at the top of your page and specify the namespace

For XHTML1.0 Strict

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

For XHTML1.0 Transitional

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

For XHTML1.0 Frameset

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

Tip 2: Specify the character encoding

 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

Tip 3: Avoid using deprecated tags and attributes.
Deprecated tags :

  • applet
  • basefont
  • center
  • dir
  • font
  • isindex
  • menu
  • s
  • strike
  • u

Deprecated attributes and tags in which they are deprecated :

  • align (caption, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p)
  • alink, link, vlink (body)
  • background (body)
  • bgcolor (table, tr, td, th, body)
  • border (img, object)
  • clear (br)
  • compact (dl, ol, ul)
  • height (td, th)
  • hspace (img, object)
  • language (script)
  • name (img, a, applet, form, frame, iframe, map)
  • noshade (hr)
  • nowrap (td, th)
  • size (hr)
  • start (ol)
  • target (a)
  • text (body)
  • type (li, ol, ul)
  • value (li)
  • version (html)
  • vspace (img, object)
  • width (hr, td, th, pre)

Tip 4: All tags in lowercase
All tags and attribute names must be in lower case and attribute values must be between double quotes ("), i.e

 
<DIV>
	<Img src="test.jpg" ID=myimage alt='logo' />
</DIV>
 

is incorrect while correct version goes like this:

 
<div>
	<img src="test.jpg" id="myimage" alt="logo" />
</div>
 

Tip 5: XHTML must be well-formed
All opening tags must have closing ones, or if the tag is empty, like br tag, it must have a closing slash. For e.g

 
<div>
 
this is a paragraph
 
	<br>
<hr>
	<img src="images.jpg" alt="my company">
</div>
 

is invalid. The correct code:

 
<div>
 
this is a paragraph
 
 
<hr />
	<img src="images.jpg" alt="my company" />
</div>
 

Also, tags must be properly nested can can't overlap. An example of bad nesting is

 
 
<div><strong>this is a paragraph</div>
 
</strong>
 
 

It should be like this in order to validate:

 
<div>
 
<strong>this is a paragraph</strong>
</div>
 

Tip 6: Images must always have alt attribute
According to the W3C recommendations, the "alt" attribute specifies an alternate text for user agents that cannot display images. Including the alt attribute will not only validate your code but also improve your search engine rankings. In Google's webmaster guidelines, they advise the use of alternative text for images since they can't see the images. Instead they rely on the alt attribute.

Correct code :

 
	<img src="images/logo.jpg" alt="My Company" />
 

Tip 7: Surround your javascript between CDATA tags
If you're not using external javascript files, to prevent the validator from spitting errors from your javascript code,

simply surround them within CDATA tags, like this:

 
<script type="text/javascript">
/* <![CDATA[ */
var myfunction = function(){
 
};
/* ]]> */
</script>
 

Tip 8 : Encode HTML character entities

 
	<!-- incorrect -->
	my brother & me
 
	<!-- correct -->
	my brother &amp; me
 

Tip 9: Correct way to embed flash movies
Code which won't validate

 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="30" height="30"><param name="movie" value="music/sound.swf"><param name="quality" value="high"><embed src="music/sound.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30"></embed></object>
 

Correct way to embed flash movies

 
<object type="application/x-shockwave-flash" data="music/sound.swf" width="0" height="0"><param name="movie" value="music/sound.swf" /><param name="quality" value="high"/></object>
 

Or if you want you can use swfobject which offers optimized Flash Player embed methods.

]]> http://htmlblog.net/9-tips-to-validate-your-xhtml-code/feed/ 8 practical tips to make your web pages faster http://htmlblog.net/8-practical-tips-to-make-your-web-pages-faster/ http://htmlblog.net/8-practical-tips-to-make-your-web-pages-faster/#comments Thu, 06 Nov 2008 16:36:23 +0000 asvin http://htmlblog.net/?p=40

Yahoo's Exceptional Performance team has compiled a list of 34 best practices to have faster web pages. In this post I'll show you 8 tips which helped me to get a B grade in YSlow! for web pages that I develop. Currently YSlow's web page analysis is based on 13 identified basic rules that affect web page performance. In decreasing order of priority they are:

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags

You can get more info by clicking on each item. Of course using a CDN is not affordable by everybody, including me. This didn't prevent me to have a B grade though. I will guide you through some of the items which worked for me.

Make Fewer HTTP Requests
If you're using the YUI library, the good news is that recently the team graciously offered a Combo Handler Service, served from their CDN. This helps us to eliminate HTTP requests by requesting a single file. For example, to use the Rich Text editor, it needed 6 separate HTTP requests:

 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script>
 

Now with the Combo Handler service, it has been stripped to only 1 file:

 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/container/container_core-min.js&2.5.2/build/menu/menu-min.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/button/button-min.js&2.5.2/build/editor/editor-beta-min.js"></script>
 

If you're not using the YUI library or not interested in using the Combo Handler service, you can try Minify!
Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.

Another tool which can be helpful is Dojo Shrinksafe which not only minifies your javascript code but also allows you to upload several javascript files and have them compressed in 1 single file.

Another way to make fewer HTTP requests is by using CSS sprites which are big images containing lots of smaller ones. An online tool which can make CSS sprites out of your smaller ones is the CSS Sprite Generator. You just have to upload your pics and it will generate your sprite together with the CSS code. More info about CSS sprites can be found on CSS Tricks.

Add an Expires Header
For this to work on Apache, you'll need to have mod_expires enabled. Then create an .htaccess file or edit your httpd.conf with the following content:

 
ExpiresActive On
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType application/javascript "access plus 2 years"
ExpiresByTYpe text/css "access plus 2 years"
 

In the above listing, all images(jpg/jpeg/gif) will have an expires header 2 years in the future.

Gzip Components
You must have mod_deflate enabled and drop these lines in your httpd.conf file

 
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
 
Put CSS at the Top
All CSS must be between your head tag, like that :

 
	<html>
		<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		</head>
		<body>
 
		</body>
	</html>
 
Move Scripts to the Bottom
While the CSS are sitting at the top of your page, javascripts must be moved towards the lower part of your page, typically in the body tag. I usually put them before the closing body tag.

 
	<html>
		<head>
		</head>
		<body>
		...
		...
		<script type="text/javascript" src="myjs.js"></script>
		</body>
	</html>
 
Reduce DNS Lookups
I don't usually have more than 2 DNS lookups in my scripts, else YSlow will be removing some points.

Minify JavaScript
As I mentioned earlier on, Dojo Shrinksafe is an online tool which minifies your code.

Another great command line tool is Julien Lecomte YUI Compressor.

In order to use it you must have Java installed (>= 1.4).

Douglas Crockford also has something similar in JSMin

Configure ETags
Just drop this line in your httpd.conf:

 
FileETag None
 

;-)

]]> http://htmlblog.net/8-practical-tips-to-make-your-web-pages-faster/feed/ 10 code snippets for PHP developers http://htmlblog.net/10-code-snippets-for-php-developers/ http://htmlblog.net/10-code-snippets-for-php-developers/#comments Mon, 03 Nov 2008 16:48:31 +0000 asvin http://htmlblog.net/?p=38 I've compiled a small list of some useful code snippets which might help you when writing your PHP scripts...

Email address check
Checks for a valid email address using the php-email-address-validation class.
Source and docs: http://code.google.com/p/php-email-address-validation/

 
include('EmailAddressValidator.php');
 
$validator = new EmailAddressValidator;
if ($validator->check_email_address('test@example.org')) {
    // Email address is technically valid
}
else {
    // Email not valid
}
 

Random password generator
PHP password generator is a complete, working random password generation function for PHP. It allows the developer to customize the password: set its length and strength. Just include this function anywhere in your code and then use it.
Source : http://www.webtoolkit.info/php-random-password-generator.html

 
function generatePassword($length=9, $strength=0) {
    $vowels = 'aeuy';
    $consonants = 'bdghjmnpqrstvz';
    if ($strength & 1) {
        $consonants .= 'BDGHJLMNPQRSTVWXZ';
    }
    if ($strength & 2) {
        $vowels .= "AEUY";
    }
    if ($strength & 4) {
        $consonants .= '23456789';
    }
    if ($strength & 8) {
        $consonants .= '@#$%';
    }
 
    $password = '';
    $alt = time() % 2;
    for ($i = 0; $i < $length; $i++) {
        if ($alt == 1) {
            $password .= $consonants[(rand() % strlen($consonants))];
            $alt = 0;
        } else {
            $password .= $vowels[(rand() % strlen($vowels))];
            $alt = 1;
        }
    }
    return $password;
}
 

Get IP address
Returns the real IP address of a visitor, even when connecting via a proxy.
Source : http://roshanbh.com.np/2007/12/getting-real-ip-address-in-php.html

 
function getRealIpAddr(){
	if (!empty($_SERVER['HTTP_CLIENT_IP'])){
		//check ip from share internet
		$ip = $_SERVER['HTTP_CLIENT_IP'];
	}
	elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
		//to check ip is pass from proxy
		$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
	}
	else{
		$ip = $_SERVER['REMOTE_ADDR'];
	}
	return $ip;
}
 

XSL transformation
PHP5 version
Source : http://www.tonymarston.net/php-mysql/xsl.html

 
$xp = new XsltProcessor();
 
// create a DOM document and load the XSL stylesheet
$xsl = new DomDocument;
$xsl->load('something.xsl');
 
// import the XSL styelsheet into the XSLT process
$xp->importStylesheet($xsl);
 
// create a DOM document and load the XML datat
$xml_doc = new DomDocument;
$xml_doc->load('something.xml');
 
// transform the XML into HTML using the XSL file
if ($html = $xp->transformToXML($xml_doc)) {
	echo $html;
}
else {
	trigger_error('XSL transformation failed.', E_USER_ERROR);
} // if
 

PHP4 version

 
function xml2html($xmldata, $xsl){
   /* $xmldata -> your XML */
   /* $xsl -> XSLT file */
 
   $arguments = array('/_xml' => $xmldata);
   $xsltproc = xslt_create();
   xslt_set_encoding($xsltproc, 'ISO-8859-1');
   $html = xslt_process($xsltproc, $xmldata, $xsl, NULL, $arguments);
 
   if (empty($html)) {
       die('XSLT processing error: '. xslt_error($xsltproc));
   }
   xslt_free($xsltproc);
   return $html;
}
 
echo xml2html('myxmml.xml', 'myxsl.xsl');
 

Force downloading of a file
Forces a user to download a file, for e.g you have an image but you want the user to download it instead of displaying it in his browser.

 
header("Content-type: application/octet-stream");
 
// displays progress bar when downloading (credits to Felix ;-))
header("Content-Length: " . filesize('myImage.jpg'));
 
// file name of download file
header('Content-Disposition: attachment; filename="myImage.jpg"');
 
// reads the file on the server
readfile('myImage.jpg');
 

String encoding to prevent harmful code
Web applications face any number of threats; one of them is cross-site scripting and related injection attacks. The Reform library attempts to provide a solid set of functions for encoding output for the most common context targets in web applications (e.g. HTML, XML, JavaScript, etc)
Source : http://phed.org/reform-encoding-library/

 
include('Reform.php');
Reform::HtmlEncode('a potentially harmful string');
 

Sending mail
Using PHPMailer
PHPMailer a powerful email transport class with a big features and small footprint that is simple to use and integrate into your own software.
Source : http://phpmailer.codeworxtech.com/

 
include("class.phpmailer.php");
$mail = new PHPMailer();
$mail->From = 'noreply@htmlblog.net';
$mail->FromName = 'HTML Blog';
$mail->Host = 'smtp.site.com';
$mail->Mailer = 'smtp';
$mail->Subject = 'My Subject';
$mail->IsHTML(true);
$body = 'Hello<br/>How are you ?';
$textBody = 'Hello, how are you ?';
$mail->Body = $body;
$mail->AltBody = $textBody;
$mail->AddAddress('asvin [@] gmail.com');
if(!$mail->Send())
	echo 'There has been a mail error !';
 

Using Swift Mailer
Swift Mailer is an alternative to PHPMailer and is a fully OOP library for sending e-mails from PHP websites and applications.
Source : http://swiftmailer.org/

 
// include classes
require_once "lib/Swift.php";
require_once "lib/Swift/Connection/SMTP.php";
 
$swift =& new Swift(new Swift_Connection_SMTP("smtp.site.com", 25));
$message =& new Swift_Message("My Subject", "Hello<br/>How are you ?", "text/html");
if ($swift->send($message, "asvin [@] gmail.com", "noreply@htmlblog.net")){
    echo "Message sent";
}
else{
    echo 'There has been a mail error !';
}
 
//It's polite to do this when you're finished
$swift->disconnect();
 

Uploading of files
Using class.upload.php from Colin Verot
Source : http://www.verot.net/php_class_upload.htm

 
$uploadedImage = new Upload($_FILES['uploadImage']);
 
if ($uploadedImage->uploaded) {
	$uploadedImage->Process('myuploads');
	if ($uploadedImage->processed) {
		echo 'file has been uploaded';
	}
}
 

List files in directory
List all files in a directory and return an array.
Source : http://www.laughing-buddha.net/jon/php/dirlist/

 
function dirList ($directory) {
    // create an array to hold directory list
    $results = array();
 
    // create a handler for the directory
    $handler = opendir($directory);
 
    // keep going until all files in directory have been read
    while ($file = readdir($handler)) {
 
        // if $file isn't this directory or its parent,
        // add it to the results array
        if ($file != '.' && $file != '..')
            $results[] = $file;
    }
 
    // tidy up: close the handler
    closedir($handler);
 
    // done!
    return $results;
}
 

Querying RDBMS with MDB2 (for e.g MySQL)
PEAR MDB2 provides a common API for all supported RDBMS.

Source : http://pear.php.net/package/MDB2

 
// include MDB2 class
include('MDB2.php');
 
// connection info
$db =& MDB2::factory('mysql://username:password@host/database');
// set fetch mode
$db->setFetchMode(MDB2_FETCHMODE_ASSOC);
 
// querying data
$query = 'SELECT id,label FROM myTable';
$result = $db->queryAll($query);
 
// inserting data
// prepare statement
$statement = $db->prepare('INSERT INTO mytable(id,label) VALUES(?,?)');
// our data
$sqlData = array($id, $label);
// execute
$statement->execute($sqlData);
$statement->free();
 
// disconnect from db
$db->disconnect();
 
]]> http://htmlblog.net/10-code-snippets-for-php-developers/feed/ Pixidou - an Open Source AJAX Image Editor (PHP and YUI based) http://htmlblog.net/pixidou-an-open-source-ajax-image-editor-