Let’s be honest…WordPress’ search functionality isn’t great. Let’s be more honest…no search functionality is better than Google’s. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API. Let me show you how to implement this awesome API within your own website!

Sign Up!

Google’s AJAX Search API requires that you sign up for an API key.  Signing up is free and you’ll be done with the process of retrieving a key in a few minutes.

You’ll also need to provide a domain for which they key will work for; one key per domain.

The HTML

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
	<!-- HTML5 SEARCH BOX!  -->
	<input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
	<!-- SEARCH davidwalsh.name ONLY! -->
	<input type="hidden" name="sitesearch" value="davidwalsh.name" />
	<!-- SEARCH BUTTON -->
	<input id="search-submit" type="submit" value="Search" />
</form>

<!-- ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY"></script>
<script type="text/javascript">
	google.load('mootools','1.2.4');
	google.load('search','1');
</script>

You’ll want to use a “real” form so that if the user doesn’t have JavaScript, they’ll get directed to Google for their search.  Beyond that, follow the hidden input line to ensure your search will work.  You may also note that the search box has autocomplete and placeholder attributes — those are HTML5 functionality, nothing to do with Google’s AJAX Search API.

The CSS

/* results positioning */
#search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

The CSS above simply position the elements where I want them per my design. I even used a CSS triangle!

The JavaScript

window.addEvent('domready',function(){

	/* search */
	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

		/*
			We're lazyloading all of the search stuff.
			After all, why create elements, add listeners, etc. if the user never gets there?
		*/
		if(!searchLoaded) {
			searchLoaded = true; //set searchLoaded to "true"; no more loading!

			//build elements!
			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
			var wrapper = new Element('div',{
				styles: {
					position: 'relative'
				}
			}).inject(container);
			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
			var closer = new Element('a', {
				href: 'javascript:;',
				text: 'Close',
				styles: {
					position: 'absolute', //position the "Close" link
					bottom: 35,
					right: 20
				},
				events: {
					click: function() {
						container.fade(0);
					}
				}
			}).inject(wrapper);

			//google interaction
			var search = new google.search.WebSearch(),
				control = new google.search.SearchControl(),
				options = new google.search.DrawOptions();

			//set google options
			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
			options.setInput(searchBox);

			//set search options
			search.setUserDefinedClassSuffix('siteSearch');
			search.setSiteRestriction('davidwalsh.name');
			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

			//set search controls
			control.addSearcher(search);
			control.draw(contentContainer,options);
			control.setNoResultsString('No results were found.');

			//add listeners to search box
			searchBox.addEvents({
				keyup: function(e) {
					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
						container.fade(0.9);
						control.execute(searchBox.value);
					}
					else {
						container.fade(0);
					}
				}
			});
			searchBox.removeEvent('focus',searchFn);
		}
	};
	searchBox.addEvent('focus',searchFn);
});

There’s a fair amount of JavaScript above so stay with me.  The following are the steps for implementing the Google AJAX API:

• Create an element to house the results of the search.
• Create a “Close” link which will allow the user to close the search results window.
• Create our Google-given class instance:
  • A Web Search (you can also create Local Search if you’d like…). google.search.WebSearch options. I’ve chosen to add tabs and set the input as my search box.
  • A SearchControl instance. google.search.SearchControl options. “siteSearch” is my suffix for results, I’ve restricted my search to the davidwalsh.name domain, and form submission will trigger results to display in the current window (instead of a new window).
  • A DrawOptions instance. google.search.DrawOptions options. With my DrawOptions instance, I’ve set search control, set the draw container with the options we’ve created, and I’ve decided to use Google’s default “no results” message

Once the search controls are created, it’s time to attach events to the search box to show and hide the search results container based on the contents of the search box. That’s all!

As you can see, I’ve chosen to use the MooTools (FTW) JavaScript toolkit to create the element that houses the results, the “Close” link, and to bind events to the search box. You could just as easily use Dojo or jQuery for element creation and even handling.

In all honesty, I couldn’t believe how easy it was to implement Google AJAX search.  It’s an easy want to implement search on your website, especially if you’re currently using WordPress’ search.  I recommend taking the time to implement Google’s AJAX Search API — the day it takes you to get it working will save your users hours of pain!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Implement the Google AJAX Search API

Related posts:

1. Search Type Options with MooTools
2. Create a Dynamic Flickr Image Search with the Dojo Toolkit
3. google.load(): Utilize Google’s AJAX Libraries API
4. AJAX Username Availability Checker Using MooTools 1.2
5. Form Element AJAX Spinner Attachment Using jQuery

Font Request Format

Many of the fonts within Google’s font archive are available not only in standard format but also in Italic, Bold, and Italic Bold.  The format for requesting a given font variant is:

{font}:{variant1},{variant2}

Here are a few examples of requesting each variant:

Cantarell
Cantarell:bold
Cantarell:italic
Cantarell:bolditalic

Now let’s see how we can include special fonts in our page and use these them.

The CSS Stylesheet Method

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell" />

The stylesheet gets included into the page like any other stylesheet would be.  A query string with a family parameter is appended to the stylesheet’s URL containing the font(s) to be loaded.  Multiple fonts can be requested with the use of the “|” (pipe) character.  A few examples:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn:bold" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn|IM+Fell+Great+Primer" />

Take a moment to examine the stylesheet from Google:

@font-face {
	font-family: 'IM Fell Great Primer';
	font-style: normal;
	font-weight: normal;
	src: local('IM Fell Great Primer'), url('http://themes.googleusercontent.com/font?kit=AL8ALGNthei20f9Cu3e93rvDyRCRMn38Ifm6ee4fjno') format('truetype');
}
@font-face {
	font-family: 'Vollkorn';
	font-style: normal;
	font-weight: normal;
	src: local('Vollkorn'), url('http://themes.googleusercontent.com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype');
}

The @font-face method of font embedding is Google’s chosen method.  Using the font is as simple as using a system font:

.mySpecialFontClass	{ font-family:'Vollkorn', serif; }

You may also embed the font within the “style” attribute of a given element:

<p style="font-family:'Vollkorn';">Lorem ipsum....</p>

I t doesn’t get more painless than that.

The Simple JavaScript Method

Google also provides a simple JavaScript method for including custom fonts within a page.  This method requires including the JSAPI JavaScript file and a very small snippet of JavaScript:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('webfont','1');
	google.setOnLoadCallback(function() {
		WebFont.load({
			google: {
				families: ['Tangerine','Cantarell']
			}
		});
	});
</script>

Selecting font variants is done with a simple “:” delimiter between the font and the variant:

WebFont.load({
	google: {
		families: ['Tangerine:bold']
	}
});

You may also load multiple fonts within the families array:

WebFont.load({
	google: {
		families: ['Tangerine:bold','Cantarell','Lobster']
	}
});

Simple, no?  If it’s too simple for you, there’s more advanced method.

The Advanced JavaScript Method

The advanced JavaScript method employes an async JavaScript method paired with a WebFontConfig object.  The advanced method also adds callbacks for font requests:

WebFontConfig = {
	google: {
		families: [ 'Tangerine', 'Cantarell' ]
	},
	/* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
	loading: function() {
		// do something
	},
	/* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontloading: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontactive: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontinactive: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
	active: function() {
		// do something
	},
	/* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
	inactive: function() {
		// do something
	}
};

/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

If you’re like me, you loooooooove JavaScript callbacks.  You would use this method if you wanted to “preload” fonts before assigning fonts to specific elements. What’s also great about this method is that Google uses “active” and “inactive” CSS class representations on the HTML element to designate what an element’s settings should be before and after a font has been loaded:

.wf-inactive p { /* Show paragraphs in serif font until fonts have loaded. */
	font-family: serif
}
.wf-active p { /* Show paragraphs in Tangerine when the fonts have loaded. */
	font-family: 'Tangerine', serif
}
.wf-inactive h1 { /* Show heading in serif font until fonts have loaded. */
	font-family: serif;
	font-size: 16px
}
.wf-active h1 { /* Show heading in Cantarell when the fonts have loaded. */
	font-family: 'Cantarell', serif;
	font-size: 16px
}

Unfortunately you need to add these directives to you stylesheet; I prefer not to.

What do you think of Google latest JavaScript API?  On one side I see the Font API as extremely useful but the other side of me sees Google trying to grab a stronger hold of the Web;  trying to make websites dependent upon them.  What are your thoughts?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Google Font API

Related posts:

1. Font Replacement Using Cufón
2. My CSS Wishlist
3. MooTools FontChecker Plugin
4. Combine Your CSS Media Styles Into One File
5. Secure (SSL) Google Analytics

Clearly Google knows the importance of the World Cup. And for that…I will always use Google.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Google and the World Cup

Related posts:

1. Async Google Analytics
2. Dynamically Create Charts Using jQuery Flot and Google Analytics
3. Google Grabber — Using PHP to Find Out How Many Pages Your Domain Has Listed in Google
4. First Impressions of Google Chrome
5. Track File Downloads in Google Analytics Using MooTools

After you watch some of it, let me know what you think.  Oh, and trust me, I’ve seen your JS — you need this.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Video: Speed Up Your JavaScript

Related posts:

1. JavaScript: The Good Parts
2. Automate YouTube Video and MP3 Rips with Bash Shell Scripting
3. Change Text Size On Click With JavaScript
4. PHP Optimization – Using A Timer To Benchmark Code And Increase Speed
5. Contact

Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don’t display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter — no need for more clutter. Here’s how you can implement a similar system with MooTools or jQuery.

The HTML

<body>
	<div id="fade1" class="fadein">{ fade area 1 }</div>
	<div id="fade2" class="fadein">{ fade area 2 }</div>
	<div id="fade3" class="fadein">{ fade area 3 }</div>
	<!-- other stuff here -->
</body>

Place the HTML where you’d like — it has no bearing on our system besides needing each element to have the fadein CSS class.

The CSS

@media all {
	.fadein	{ visibility:hidden; }
	#fade1	{ /* place wherever on the page */ }
	#fade2	{ /* place wherever on the page */ }
	#fade3	{ /* place wherever on the page */ }
}
@media handheld {
	.fadein	{ visibility:visible; }
}

The elements that will fade in will need to have their visibility set to hidden. We’ll accommodate for the no-JavaScript user below.

The MooTools JavaScript

/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);
		});
	}
});

/* make it happen! */
window.addEvent('domready',function() {
	var fades = $$('.fadein').setStyle('opacity',0);
	var doFadeIn = function(e) {
		if(!e.key || e.key == 'tab') {
			fades.fade('in');
		}
	};
	$(document.body).oneEvent('mousemove',doFadeIn);
	$('s').oneEvent('blur',doFadeIn);
});

When the DOM is ready, we grab all of the elements that are mean to fade in and…get this…fade them in.

The jQuery JavaScript

$(document).ready(function() {
	var doFadeIn = function() {
		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
	};
	$('body').one('mousemove',doFadeIn);
	$('#s').one('blur',doFadeIn);
});

This is the equivalent jQuery JavaScript code.

Accommodating for No-Javascript Users

<noscript>
	<style type="text/css">
		.fadein	{ visibility:visible; }
	</style>
</noscript>

We undo the initial hiding of the elements. Duh.

It’s a subtle effect but a good idea on Google’s part.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Google-Style Element Fading Using MooTools or jQuery

Related posts:

1. Form Element AJAX Spinner Attachment Using jQuery
2. WordPress-Style Comment Controls Using MooTools or jQuery
3. Fading Links Using jQuery: dwFadingLinks
4. MooTools-Like Element Creation in jQuery
5. Form Element AJAX Spinner Attachment Using MooTools

Google Analytics JavaScript

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-#######-#']); //your code here
    _gaq.push(['_trackPageview']);
</script>
<script type="text/javascript">
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
</script>

The one thing you’ll notice is the async attribute being set to true. Obviously you’ll want to use your own Analytics code within the top portion of the JavaScript. You’ll also want to put this at the top of the BODY. What a difference the async version can make — my website seems to load faster due to this upgrade!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Async Google Analytics

Related posts:

1. Secure (SSL) Google Analytics
2. Track File Downloads in Google Analytics Using MooTools
3. Retrieve Google Analytics Visits and PageViews with PHP
4. Using MooTools to Instruct Google Analytics to Track Outbound Links
5. Track AJAX Link Clicks Using Google Analytics

Earlier in the week I published a popular article titled Dynamically Create Charts Using MooTools MilkChart and Google Analytics. My post showed you how to use MooTools MilkChart and a splash of PHP to create beautiful charts of Google Analytics data. I was interested in seeing what jQuery had to offer in the charting department. jQuery Flot is what I found.

The PHP

/* defaults */
$month = date('n');
$year = date('Y');

/* submission? */
if($_GET['month'] || $_GET['year']):
	/* cleanse lookups */
	$month = (int) $_GET['month']; if(!$month) { $month = 1; }
	$year = (int) $_GET['year']; if(!$year) { $year = date('Y'); }
	/* retrieve information from google analytics */
	require 'ga/analytics.class.php';
	$analytics = new analytics('youraccount@gmail.com', 'password');
	$analytics->setProfileByName('yourdomain.com');
	$analytics->setMonth($month,$year);
	$visits = $analytics->getVisitors();
	$views = $analytics->getPageviews();
	/* build tables */
	if(count($visits)) {
		foreach($visits as $day=>$visit) { 
			$flot_datas_visits[] = '['.$day.','.$visit.']';
			$flot_datas_views[] = '['.$day.','.$views[$day].']';
		}
		$flot_data_visits = '['.implode(',',$flot_datas_visits).']';
		$flot_data_views = '['.implode(',',$flot_datas_views).']';
	}
endif;

The above code is the same as my MooTools post with the exception of the statistics output format. jQuery flot prefers arrays instead of a HTML table.

The jQuery Flot JavaScript

$(document).ready(function() {
	var visits = <?php echo $flot_data_visits; ?>;
	var views = <?php echo $flot_data_views; ?>;
	$('#placeholder').css({
		height: '400px',
		width: '600px'
	});
	$.plot($('#placeholder'),[
			{ label: 'Visits', data: visits },
			{ label: 'Pageviews', data: views }
		],{
	        lines: { show: true },
	        points: { show: true },
	        grid: { backgroundColor: '#fffaff' }
	});
});

The above is a simple example of using jQuery Flot’s plot method. Simply provide the placeholder and statistical data from the PHP above.

Comparison

• jQuery Flot provides IE support via ExCanvas, which is great.
• MilkChart allows for pie charts while Flot doesn’t. I prefer pie charts to other chart types.
• MilkChart allows for easy creation of charts from HTML tables (good for accessibility) while jQuery Flot requires an array syntax.

What do you think? Which method do you prefer?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Dynamically Create Charts Using jQuery Flot and Google Analytics

Related posts:

1. Dynamically Create Charts Using MooTools MilkChart and Google Analytics
2. Retrieve Google Analytics Visits and PageViews with PHP
3. Secure (SSL) Google Analytics
4. Track AJAX Link Clicks Using Google Analytics
5. Async Google Analytics

The PHP

//settings
$dir = 'js-libs/';
$url = 'http://code.google.com/apis/ajaxlibs/documentation/index.html';

//open file
$content = get_content($url);
echo 'Retrieved page from Google.';

//parse
$regex = '/http:\/\/ajax.googleapis.com\/ajax\/libs\/.*.js/isU';

//match?
preg_match_all($regex,$content,$matches);

//make sure there are no repeated files
$js_files = array_unique($matches[0]);

//download every file and save locally
foreach($js_files as $file) {
	//download
	$content = get_content($file);
	//save
	$filename = str_replace(array('http://ajax.googleapis.com/ajax/libs/','/'),array('','-'),$file);
	file_put_contents($dir.$filename,$content);
	//
	echo 'saving ',$file;
}

//function to grab content from a url
function get_content($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_USERAGENT,'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,5);
	$content = curl_exec($ch);
	curl_close($ch);
	return $content;
}

Pow! One quick script to get you all of the popular JavaScript libraries in 10 seconds. You may not know how to use each library but it sure doesn’t hurt to have them around.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Remotely Download Google AJAX Libraries Using PHP

Related posts:

1. google.load(): Utilize Google’s AJAX Libraries API
2. Detect an AJAX Request in PHP
3. Implement the Google AJAX Search API
4. Google Font API
5. Download a URL’s Content Using PHP cURL

The PHP Library

The PHP class I found, analytics, can be downloaded at http://www.swis.nl/ga/. The site also gives a few solid examples.

The PHP

//session_start for caching, if desired
session_start();
//get the class
require 'ga/analytics.class.php';
//sign in and grab profile
$analytics = new analytics('david@davidwalsh.name', 'myP@ssw0rd');
$analytics->setProfileByName('davidwalsh.name');
//set the date range for which I want stats for (could also be $analytics->setDateRange('YYYY-MM-DD', 'YYYY-MM-DD'))
$analytics->setMonth(date('n'), date('Y'));
//get array of visitors by day
print_r($analytics->getVisitors());
//get array of pageviews by day
print_r($analytics->getPageviews());

As you’d expect, we first grab the class and immediately sign providing your credentials and website profile (you can just use your domain). Once authenticated we set a date range and retrieve our visitors and pageviews.

The Sample PHP Results

The above code retrieved visits and pageviews for the current month. What’s returned is an array that looks as follows:

Array
(
    [01] => 6539
    [02] => 6677
    [03] => 6160
    [04] => 5563
    [05] => 2964
    [06] => 2973
    [07] => 5080
    [08] => 6078
    [09] => 5927
    [10] => 6177
	...
)

A very simple array numbered by day. You could do anything you wanted with the array — create averages, peaks, lows, etc.

Advanced Usage

The analytics class also allows you to retrieve search keywords and anything else you might like:

$keywords = $analytics->getData(array(
						'dimensions' => 'ga:keyword',
		                'metrics' => 'ga:visits',
		                'sort' => 'ga:keyword'
						)
					);

The PHP analytics class is a masterpiece. Rest assured I’ll be doing a ton of work with this class for customers and my own websites! Do you have any ideas as to what you could use this class for? Share!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Retrieve Google Analytics Visits and PageViews with PHP

Related posts:

1. Dynamically Create Charts Using MooTools MilkChart and Google Analytics
2. Dynamically Create Charts Using jQuery Flot and Google Analytics
3. Async Google Analytics
4. Using MooTools to Instruct Google Analytics to Track Outbound Links
5. Secure (SSL) Google Analytics

I’m just going to cut to the chase: Internet Explorer is rubbish. I don’t care what version you throw at me — 6, 7, 8…rubbish. Apparently Google agrees with me because they’ve released Google Chrome Frame, a browser plugin and META tag system that allows you to turn IE installs into a virtual “Chrome” install so that IE will support HTML5′s canvas tag and take advantage of JavaScript performance improvements featured in Google Chrome.

Step 1: The Plugin

The user must first download the Chrome Frame plugin at the Google Chrome Frame page. The install works on XP and Vista operating systems, IE browser versions 6, 7, and 8.

Step 2: The HTML META tag

To activate Chromified Internet Explorer you must add the following META tag to your pages:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

That’s it! Check out a demo here:

More Details

Jump over to the Google Chrome Frame page to get more details about this project. There’s a great video featuring Alex Russell (of Dojo fame) where he explains the reason for Chrome Frame and usage.

Our Savior?

I don’t believe so. There are two big problems I see:

• Most IT teams are keeping their businesses employees in the dark world of IE6. Chrome Frame would be a great solution for employees looking to get with the 90′s but how many businesses give their employees proper permissions to install applications? No many.
• Users who don’t know the difference wont put an effort into downloading this plugin (i.e. my grandmother doesn’t even know what a browser is, much less IE and why it’s bad).

Thoughts?

I’m very interested in seeing what you all think of this. Crap? Gold? Let me know what you think!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Turn Internet Explorer into Chrome with Chrome Frame

Related posts:

1. First Impressions of Google Chrome
2. IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”
3. Rounded Corners in Internet Explorer
4. CSS Image Filters in Internet Explorer
5. Detecting Google Chrome Using JavaScript