Snippets

Google said late Thursday that it had made a major change to its algorithm in an effort to improve the rankings of high-quality Web sites in its search results — and to reduce the visibility of low-quality sites. While the company did not say so explicitly, the change appears to be directed in part at so-called content farms like eHow and Answerbag, which generate articles based on popular search queries so they will rise to the top of the rankings and attract clicks.

Google has been facing criticism from some users for allowing articles that aren’t useful to appear prominently in search results. That has now changed, according to the company

It’s no surprise to me when developers decide to publish data, often times, it’s formatted in XML. It allows for content to be published once and viewed on many different platforms. The widespread adoption and ease of use allow XML to be the de facto standard when it comes to content syndication.

If you aren’t already familiar with XML, the example below illustrates how easily the document can be interpreted by humans and machines.

<?xml version="1.0"?>
<music>
	<song>
		<title>Hooch</title>
		<artist>Melvins</artist>
		<album>Houdini</album>
	</song>
	<song>
		<title>Sixtyniner</title>
		<artist>Boards Of Canada</artist>
		<album>Twoism</album>
	</song>
</music>

PHP DOM Extension

Built in support for DOM parsing in PHP makes retrieving data and inserting it into an XML document fairly simple. The DOM functions available in PHP are much similar to those in Javascript. If you are already comfortable navigating the DOM in Javascript then this should be quite easy to pick up.

require('configure.php');
$table = 'demo_xml';
$query = "SELECT * FROM $table";
$result = mysql_query($query);

To begin, establish a database connection and retrieve all values within the specified database table.

$xmlDoc = new DomDocument('1.0');

With our data readily available, we can begin creating our XML document using version 1.0.

$root = $xmlDoc->createElement('music');

All XML documents require a root element and in this case, we are calling it “music”.

$root = $xmlDoc->appendChild($root);

Using the appendChildfunction, our new element will be written to the XML document.

while($row = mysql_fetch_assoc($result)) {

The while statement retrieves each row as an associative array with “name=value” pairs to make things easier later when looping through the data.

$rowContainer = $xmlDoc->createElement('song');
$rowContainer = $root->appendChild($rowContainer);

For each data pair, create a new row labeled “song” and write them to the XML document.

foreach ($row as $fieldName => $fieldValue) {
	$child = $xmlDoc->createElement($fieldName);
	$child = $rowContainer->appendChild($child);
	$value = $xmlDoc->createTextNode($fieldValue);
	$value = $child->appendChild($value);
}

For every row available, insert each field name and its value.

$xmlString = $xmlDoc->saveXML();
echo $xmlString;
$xmlDoc->save("songs.xml")

Completing the script, the XML document is saved as a string and when viewed in a browser the values will be displayed. Finally, save the the XML file as “songs.xml”.

In its entirety, the script below handles the complete output of the XML document.

<?php 

require('configure.php');
$table = 'demo_xml';
$query = "SELECT * FROM $table";
$result = mysql_query($query);

$xmlDoc = new DomDocument('1.0');
$root = $xmlDoc->createElement('music');
$root = $xmlDoc->appendChild($root);

while($row = mysql_fetch_assoc($result)) {
	$rowContainer = $xmlDoc->createElement('song');
  	$rowContainer = $root->appendChild($xmlDoc);

	foreach ($row as $fieldName => $fieldValue) {
		$child = $xmlDoc->createElement($fieldName);
		$child = $rowContainer->appendChild($child);
		$value = $xmlDoc->createTextNode($fieldValue);
	        $value = $child->appendChild($value);
	}
}

$xmlString = $xmlDoc->saveXML();
echo $xmlString;
$xmlDoc->save("songs.xml")

?>

Resources

Chaos Theory – Splinter Cell 3 Soundtrack

A web form is a prime example of an application that AJAX can enhance its responsiveness and usability. At a bare minimum, a form should do the following:

Check for empty fields
Check for valid characters
Check for duplicates

If everything is ‘ok’, submit the form.

Faced with a multi-field form, it would be great if our inputs were validated on the fly. That way, you could correct any errors before the form is submitted.

XMLHttpRequest object = AJAX

All data is stored in XMLHttpRequest object which is transferred between the browser and server. Before any data can be handled we need to create an instance of this object.

function ajaxInit() {
	// XMLHttpRequest object
	var ajaxRequest = false;

	try {
		// Supports IE7+, Firefox, Chrome, Opera, Safari
		ajaxRequest = new XMLHttpRequest();

	} catch (e) {

		try {
			// Supports IE6, IE5
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			// Browser doesn't support XMLHttpRequest objects
			ajaxRequest = false;
			alert("Your browser does not support the AJAX methods!");
		}
	}
        return ajaxRequest
}

This function checks your browser for XMLHttpRequest support. If the browser doesn’t support the object, the function returns false and throws up an error message rendering AJAX capabilities useless.

Get Form Values

To pass data to our server, we will have to construct a function that creates the query sent to the server.

// Get form values
function checkFields(){
	document.getElementById('user-form').onkeyup = function(){
		var params = '';
		var username = document.getElementById("name");
		var action = "action=checkUsername";

		params += username.name;
		params += '=';
		params += username.value;
		params += "&";
		params += action;

		return sendData(params);
	}
}

The onkeyup event triggers the function and when complete, the variable params holds a string of names and values taken from the form. This data will then be passed to the sendData function.

Passing Data to the Server

Three critical components involved in this process include:

onreadystatechange
open
send

Without those components functioning, no data could be passed to the server.

// Send form values to the server
function sendData(params){
	var request = ajaxInit();
	if(request){
		request.onreadystatechange = function(){
			handleData(request);
		}
		request.open("POST", "register.php", true);
		request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		request.send(params);
		return true;
	} else {
		return false;
	}
}

After our onreadystatechange function fires and sends a request to the server, we have to deal with handling the server’s response.

Processing the Server’s Response

The evalstatement executes the JSON formatted data sent from the server. All JSON values are now accessible as properties of the variable resp.

function handleData(request){
	if(request.readyState == 4 && request.status == 200){
		var resp = eval('('+request.responseText+')');
		var result = resp.ok;
		var msg = resp.msg;
		var placeholder = document.getElementById("validation");

		if(!result){
			placeholder.innerHTML = msg;
		} else {
			placeholder.innerHTML = msg;
		}

		return true
	} else {
		return false;
	}
}

The innerHTMLproperty then updates the HTML element with the data stored in the variable.

Load The Script

Finally, to extract the user’s input from the form field, the checkFieldsfunction needs to be loaded into the document when requested from the server.

window.onload = checkFields();

Resources

Check out the demo to see this script in action or download the files to use for yourself.

Call me old fashioned, but I would have never thought to purchase cabinets online. I was going about my remodel the traditional way, price shopping in Home Depot and private show rooms in my neighborhood. My taste and my budget were not coinciding with the quotes that I was getting, so my options were to either buy cabinets that I was not one hundred percent sold on or go over my budget.

Thanks to my internet savvy friend, that wasn’t necessary. He told me to search the internet for kitchen cabinets , and I did. I came across www.kitchencabinetkings.com, and it was love at first sight. The site was so professional compared to the other sites that I found; the layout was simple and easy to navigate. There were about a dozen cabinets to choose from, and I immediately was drawn to the New Yorker. What to do next was a mystery to me; I had no idea how to proceed.

I figured the customer service line was for just this problem, so I gave it a try. I spoke to a very friendly woman named Jessica who explained thoroughly the pluses to ordering a sample before placing a complete order. She informed me about the design services available and put me in touch with a gentleman named Anthony. Anthony was very knowledgeable about the renovation process. He walked me through the entire procedure, and I wound up loving my sample and design.

I eventually became comfortable enough with the site and the staff that I ordered my cabinets on the website. I am completely satisfied with the service and the product. It wound up being much cheaper and more convenient for me to shop on the internet.

Wouldn’t you agree?

I believe I can speak on behalf of any web developer who has ever tested a web site in IE when I say how problematic and time consuming it can be to render a site correctly. Specifically, I am talking about IE6 and IE7 that cause most of the headaches, although, IE8 is not without its faults too.

Unfortunately, support for these browsers must go on and these beasts of burden need to be tamed if you want your site to be cross browser accessible.

To make my life easier and in affect yours too, I’ve listed all IE specific bugs I have come across as well as the solutions I’ve used to make IE obey. This list is certainly not complete and welcomes any input that would make this list a more definitive source.

Transparency Support in IE6

IE6 doesn’t support alpha-transparency natively, but there are a few workarounds that will enable the browser to have near-native support for alpha-transparency.

24 ways Javascript PNG Support – I highly recommend this fix as it is a sure fire method to force IE6 into behaving more like a modern browser.

<script type="text/javascript" src="supersleight-min.js"></script>

Essentially, this script applies Microsoft’s proprietary filter property to PNG images located in the document. It supports inline and background images as well as background images that are repeated and tiled. There are a few more settings one could configure, but compared to other solutions, this script is the most simple and robust solution available.

:First-Child Pseudo Class in IE6

Introduced in CSS 2, the :first-child class represents an element that is the first child of some other element. For example, to style the first li element in a ul element with an ID of “list” you would write:

#list li:first-child { margin-left:0 }

Unfortunately, IE6 doesn’t support this class but we can emulate that CSS property using Javascript instead.

document.getElementById("list").getElementsByTagName("li")[0].style.marginLeft="0";

Attach that snippet to an event handler and IE6 will apply the same styling originally expressed in CSS.

Inline-Block in IE6/IE7

The inline-block value for the display property can be quite useful when you need an element to exhibit properties of both an inline and block element.

For example, let’s say you have an h1 element styled with the border-bottom property. Since the h1 is a block element, it inherits the width of the containing area. The problem then becomes apparent because the length of the border is also equal to the width of the containing area. You could style the h1 element with an inline value, but you lose the ability to set a top or bottom margin/padding (Technically, the values can still be set but there will be no visible change in the surrounding content).

Instead, go ahead and set the element with a value of inline-block. This will retain the ability to set a top or bottom margin/padding, like a block element, while the element loses an inherit width, like an inline element. This value is quite handy when elements need to be displayed inline while retaining block like properties.

As useful as this property is, both IE6 and IE7 don’t support the inline-block value which leaves many developers scratching their heads. Javascript won’t solve this problem as there is no inline-block value in Javascript. Never fear though, the solution comes in the form of a browser hack.

Warning – this solution does not validate which is why it’s important to use browser specific stylesheets.

h1 { zoom:1; *display:inline; _height:30px; }

For the inline-block value to work, a hidden property called hasLayout needs to be enabled. In other words, an elements style properties are to be rendered when hasLayout is set to “true”. Setting the zoom property, which is a not a supported standard but rather a Microsoft proprietary property, in conjunction with an inline value triggers the hasLayout property. Notice that the display property uses an asterisk, which is ignored by all other browsers except Internet Explorer. Even though the element has an inline value, the asterisk forces Internet Explorer to apply block properties.

This is all fine and dandy for IE7, but for IE6, a height needs to be added to the element. The underscore is also ignored by all other browsers, even IE7, but finally IE6 properly renders an element exhibiting inline-block properties.

Maxvoltar started it. I’m continuing it. You can join in on the fun too. Go to the address bar in your browser and type one letter. Start with “a” and end with “z”.

cometton

PHP DOM Extension

Resources

XMLHttpRequest object = AJAX

Get Form Values

Passing Data to the Server

Processing the Server’s Response

Load The Script

Resources

The Node Reference Field

The Content Type Nodes

The Views Module

Embedding A View

Resources

Transparency Support in IE6

:First-Child Pseudo Class in IE6

Inline-Block in IE6/IE7