David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. » APIs

Create a Dynamic Flickr Image Search with the Dojo Toolkit

David Walsh — Tue, 24 Aug 2010 01:46:49 +0000

The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.

This post aims to mesh the three collections together. We’ll be creating a tabbed interface for grabbing Flickr images using Dijit’s TabContainer, DojoX’s Flickr data store, and basic Dojo code for event handling and node manipulation.

View Demo

Select a Theme

There are two main steps in adding a theme to the page: importing the theme stylesheet and adding the theme as a class name to the BODY element.

The claro theme is new in Dojo 1.5 and happens to be my favorite.

Import Dojo From CDN, parseOnLoad:true

Pulling from Google’s CDN makes Dojo load lightning-fast. Adding a djConfig attribute with parseOnLoad:true instructs Dojo to scour the page looking for widgets.

Alternatively you could configure Dojo by using the djConfig JavaScript variable:

djConfig = {
	parseOnLoad: true
};

Either way will suffice.

Create the HTML Structure: Tab Container and Search Form

Setting up the form comes first. The form is going to be very simple, containing only a search box and a submit button. Each node (FORM, INPUT, and BUTTON) is converted to its Dijit widget equivalent to provide extra functionality and themed display.

The search box becomes a dijit.form.ValidationTextBox which allows me to require a value and display an error message if no term is provided. I’ve also used the placeholder attribute to display a message in the search box when there is no value. Dojo’s internal awesomeness adds JavaScript support for the same functionality if the user’s browser doesn’t support placeholder yet.

The second piece is placing the TabContainer and its initial content pane in the page. The initial ContentPane content will simply be a “welcome” tab so that there’s always one tab within the container:



	
	
		
		
			
				Welcome to the Flickr Search data store and Tab Container example.  
				Submit your search and watch the tab load!

Future tabs will be closable.

Require Dojo/Dijit/DojoX Dependencies

Before we can create our widgets and use Dojo classes, we need to load them:

/* require necessary classes */
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

Dojo’s internal functionality will also direct dependencies of dependencies to be loaded. If you aren’t familiar with Dojo class loading, be sure to read The Beauty of dojo.require().

Dojo, Dijit, DojoX: Make It Happen

Now that the theme is in place, HTML structure is there, and we’ve required the necessary classes, we can code our application-specific JavaScript. There’s a decent amount of JavaScript need to make this work so let’s break it down.

Start by creating an object which will hold all of our open tabs and an instance of dojox.data.FlickrStore which will be used to query Flickr:

/* settings */
var tabSubjects = {};
var flickrStore = new dojox.data.FlickrStore();

Then collect the form elements as well as the TabContainer:

/* collect proper elements */
var searchForm = dijit.byId('searchForm');
var searchBox = dijit.byId('searchBox');
var searchButton = dijit.byId('searchButton');
var tabContainer = dijit.byId('tabContainer');

Add a “submit” event listener to the TabContainer…

/* connect click event to search */
dojo.connect(searchForm,'onSubmit',function(e) {

…which stops the normal form submission:

//stop!
dojo.stopEvent(e);

…grabs the value of the search box:

//store value - set to lower case to save to caching object
var value = searchBox.get('value').toLowerCase();

If a value is present, make sure there isn’t currently a search tab open for that term. If there is, focus on it. If this is a new search term, direct the dojox.data.FlickrStore instance to search and return images for the given term. Upon search, a new tab for this term is created with a default title and content string, added to the TabContainer, and this new tab is selected:

//if a value exists...
if(value) {
	//if the tab isn't already there...
	if(!tabSubjects[value]) {
		//do the search...
		flickrStore.fetch({
			query: { tags: value },
			onBegin: function() {
				//create the tab
				tabSubjects[value] = new dijit.layout.ContentPane({ 
					title:value, 
					content:'Searching for ' + value + '...', 
					closable:true,
					onClose: function() {
						//remove this from our saved tabs when closed
						tabSubjects[value] = null;
						return true;
					}
				});
				//add to tabcontainer and select
				tabContainer.addChild(tabSubjects[value]);
				tabContainer.selectChild(tabSubjects[value]);
			},

When the search is complete, we clear the contents of the tab’s pane and loop through each returned image, injecting it into the content pane. Lastly, we create a tooltip for the image which displays the image name when the user focuses on the image:

	onComplete: function(items) {
		//if we got items...
		if(items.length) {
			//clear the tab's content'
			tabSubjects[value].set('content','');
			//cycle through each image returned, inject into new tab, add tooltip
			dojo.forEach(items,function(item,i) {
				//create the link's ID for the tooltip
				var id = new Date().getTime() + '_' + i;
				var a = dojo.create('a',{ 
					href: flickrStore.getValue(item,'link'),
					className: 'thumb',
					target: '_blank',
					id:  id,
					innerHTML: ''
				},tabSubjects[value].domNode);
				//tooltip!
				new dijit.Tooltip({ label: flickrStore.getValue(item,'title'), connectId: id });
			});
		}
		else {
			//provide "no images" content
			tabSubjects[value].set('content','There were no images available for this term.');
		}
		//empty the search box
		searchBox.set('value','');
		
	}
});

Here’s the complete JavaScript block for this app:

/* require necessary classes */
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

/* when all classes have loaded... */
dojo.ready(function() {
	
	/* settings */
	var tabSubjects = {};
	var flickrStore = new dojox.data.FlickrStore();
	
	/* collect proper elements */
	var searchForm = dijit.byId('searchForm');
	var searchBox = dijit.byId('searchBox');
	var searchButton = dijit.byId('searchButton');
	var tabContainer = dijit.byId('tabContainer');
	
	/* connect click event to search */
	dojo.connect(searchForm,'onSubmit',function(e) {
		//stop!
		dojo.stopEvent(e);
		//store value
		var value = searchBox.get('value').toLowerCase();
		//if a value exists...
		if(value) {
			//if the tab isn't already there...
			if(!tabSubjects[value]) {
				//do the search...
				flickrStore.fetch({
					query: { tags: value },
					onBegin: function() {
						//create the tab
						tabSubjects[value] = new dijit.layout.ContentPane({ 
							title:value, 
							content:'Searching for ' + value + '...', 
							closable:true,
							onClose: function() {
								//remove this from our saved tabs when closed
								tabSubjects[value] = null;
								return true;
							}
						});
						//add to tabcontainer and select
						tabContainer.addChild(tabSubjects[value]);
						tabContainer.selectChild(tabSubjects[value]);
					},
					onComplete: function(items) {
						//if we got items...
						if(items.length) {
							//clear the tab's content'
							tabSubjects[value].set('content','');
							//cycle through each image returned, inject into new tab, add tooltip
							dojo.forEach(items,function(item,i) {
								//create the link's ID for the tooltip
								var id = new Date().getTime() + '_' + i;
								var a = dojo.create('a',{ 
									href: flickrStore.getValue(item,'link'),
									className: 'thumb',
									target: '_blank',
									id:  id,
									innerHTML: ''
								},tabSubjects[value].domNode);
								//tooltip!
								if(flickrStore.getValue(item,'title')) { new dijit.Tooltip({ label: flickrStore.getValue(item,'title'), connectId: id }); }
							});
						}
						else {
							//provide "no images" content
							tabSubjects[value].set('content','There were no images available for this term.');
						}
						//empty the search box
						searchBox.set('value','');
						
					}
				});
			}
			//if it does exist, focus on it
			else {
				tabContainer.selectChild(tabSubjects[value]);
			}
		}
	});
});

How long would you say this took to write? Half hour? Hour? Three hours? Nope. This mini-application only took me about 15 minutes to write! DojoX also features a class for pulling images from Picasa.

View Demo

Nice, huh? Meshing Dojo, Dijit, and DojoX classes is a breeze thanks to Dojo’s tightly knit class system. I challenge you to create a simple application and see what you can do in an hour. Use Theme Tester as a helper should you need inspiration! And always share what you’ve created when you’re done!

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

Full David Walsh Blog Post: Create a Dynamic Flickr Image Search with the Dojo Toolkit

Change Category Slug within WordPress

David Walsh — Thu, 12 Aug 2010 14:16:04 +0000

When I first started this blog, I set the category “slug” to “sugar.” Why sugar? Because a lot of a good thing is candy; thus, a bunch of MooTools tutorials is as sweet as sugar. While I get a giggle out of calling my categories sugar, Google doesn’t find it nearly as funny, nor does Yahoo or Bing. In an effort to increase my SEO, I wanted to change my category slug to “tutorials.” That’s where the awesome Redirection plugin and a simple regular expression comes into place.

Changing the Slug

You can very easily change the category slug within WordPress’s admin panel by navigating to Settings >> Permalinks:

I changed the slug from “sugar” to “tutorials.”

WordPress Redirection

So why do we need the Redirection plugin? Because search engines like Google and users who have bookmarked your site will try to reach the old address. Thus, we need an appropriate redirect to push them to the new address. Not only do we need a redirection plugin but we need it to be reliable. I’ve been using Redirection for years so I knew this would be the best route.

While Redirection allows you to make a simple URL to URL redirection, I needed something a bit more powerful since almost anything could be after “/sugar/” in the URL. What I did was use Redirection’s regular expression capabilities to create a wildcard search on the URL to redirect all “/sugar/” URLs to “/tutorials/” URLS:

And there I have it; all category URLs are redirected as they should be! The (*) in the source URL grabs the text after “/sugar/” in the URL and the $1 in the Target URL places that text after the new category slug!

The Redirection plugin for WordPress is outstanding. As I mentioned above, I’ve used it for years, have hundreds of redirections in place, and it’s always been one of my most trusted plugins. Thanks to John Godley for his great plugin!

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

Full David Walsh Blog Post: Change Category Slug within WordPress

Async Google Analytics

David Walsh — Fri, 22 Jan 2010 14:16:53 +0000

It seems like every website these days uses Google Analytics. And why not? It’s an outstanding tool that gives you any and every statistic you could ever want. The problem with Google Analytics is that it’s been, well, slow loading at times. That’s why I was so pumped when I saw Google was releasing an async version of their script.

Google Analytics JavaScript

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

Using the GitHub API and PHP to Get Repository Information

David Walsh — Wed, 30 Dec 2009 14:10:17 +0000

GitHub is an awesome place to host your open source project code. MooTools, Prototype, and jQuery all use GitHub. As you probably know, the MooTools Forge requires your plugins be hosted on GitHub. The only problem with hosting all my MooTools plugins is that I lose traffic when I want people to see my code. Problem solved: use PHP, the GitHub API, and PHP Markdown to display files of my choice on my website.

Our goals with this code will be to:

Connect to GitHub via the API to retrieve repository information.
Retrieve the content of two files from the repository: a source file and the README.md Markdown file.
Cache the information for a given period of time to reduce the load on GitHub.
Use PHP Markdown to output a formatted README.md file.

I know that seems like a lot of work but you’ll be amazed at how easy the process is.

PHP MarkDown

You may download PHP Markdown at Michel Fortin’s website. It’s simple and full of features.

The PHP

The first step is to build a PHP function that will connect to GitHub using cURL:

/* gets url */
function get_content_from_github($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,1);
	$content = curl_exec($ch);
	curl_close($ch);
	return $content;
}

Next we need to define a few settings:

/* static settings */
$plugin = 'Overlay';
$cache_path = $_SERVER['DOCUMENT_ROOT'].'/plugin-cache/';
$cache_file = $plugin.'-github.txt';
$github_json = get_repo_json($cache_path.$cache_file,$plugin);

The next step is to create another PHP function that grabs the repository information (JSON-encoded, because I love JSON) — either fresh from GitHub (by first grabbing the most recent commit hash, then grabbing the contents of the two files) or our local cached information:

/* gets the contents of a file if it exists, otherwise grabs and caches */
function get_repo_json($file,$plugin) {
	//vars
	$current_time = time(); $expire_time = 24 * 60 * 60; $file_time = filemtime($file);
	//decisions, decisions
	if(file_exists($file) && ($current_time - $expire_time < $file_time)) {
		//echo 'returning from cached file';
		return json_decode(file_get_contents($file));
	}
	else {
		$json = array();
		$json['repo'] = json_decode(get_content_from_github('http://github.com/api/v2/json/repos/show/darkwing/'.$plugin),true);
		$json['commit'] = json_decode(get_content_from_github('http://github.com/api/v2/json/commits/list/darkwing/'.$plugin.'/master'),true);
		$json['readme'] = json_decode(get_content_from_github('http://github.com/api/v2/json/blob/show/darkwing/'.$plugin.'/'.$json['commit']['commits'][0]['parents'][0]['id'].'/Docs/'.$plugin.'.md'),true);
		$json['js'] = json_decode(get_content_from_github('http://github.com/api/v2/json/blob/show/darkwing/'.$plugin.'/'.$json['commit']['commits'][0]['parents'][0]['id'].'/Source/'.$plugin.'.js'),true);
		file_put_contents($file,json_encode($json));
		return $content;
	}
}

Once we've acquired the appropriate information, we output the information to screen:

/* build json */
if($github_json) {
	
	//get markdown
	include($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/walshbook3/PHP-Markdown-Extra-1.2.4/markdown.php');
	
	//build content
	$content = ''.$github_json['repo']['repository']['description'].'';
	$content.= 'MooTools JavaScript Class
'.$github_json['js']['blob']['data'].'

';
$content.= trim(str_replace(array('',''),'',Markdown($github_json['readme']['blob']['data'])));
}

That's all! Now I get the benefit of hosting my code on GitHub but displaying it on my own website. I've created a special WordPress template page to do so and recommend you do too!

Demo?

Visit my Projects page and click on the "Docs" link for any project. All of the information that comes up on individual project pages comes from GitHub. No more manual page creation!

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

Full David Walsh Blog Post: Using the GitHub API and PHP to Get Repository Information

Simple PHP Caching and Content Retrieval Function

David Walsh — Thu, 10 Dec 2009 17:52:58 +0000

One way to make your website exponentially faster is by caching both remote and internal requests. Why request your RSS subscriber count from FeedBurner more than once a day if that count is calculated once per day? Why hit your database on each page load if that content rarely changes? I’ve created a primitive request-and-cache function for PHP that checks for fresh content in the cache and retrieves content from a source if fresh content isn’t available.

The PHP Function

/* gets the contents of a file if it exists, otherwise grabs and caches */
function get_content($file,$url,$hours = 24,$fn = '',$fn_args = '') {
	//vars
	$current_time = time(); $expire_time = $hours * 60 * 60; $file_time = filemtime($file);
	//decisions, decisions
	if(file_exists($file) && ($current_time - $expire_time < $file_time)) {
		//echo 'returning from cached file';
		return file_get_contents($file);
	}
	else {
		$content = get_url($url);
		if($fn) { $content = $fn($content,$fn_args); }
		$content.= '';
		file_put_contents($file,$content);
		//echo 'retrieved fresh from '.$url.':: '.$content;
		return $content;
	}
}

/* gets content from a URL via curl */
function get_url($url) {
	$ch = curl_init();
	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;
}

My get_content function accepts four arguments:

The file to grab content from. If the file doesn’t exist, the file is created and content placed into.
The URL to get content from if cached content isn’t fresh.
A function name to pass the freshly received content to.
Arguments to pass to the third argument’s function.

The function is, of course, very primitive. I like that my function handles both retrieval and caching so that I don’t need to repeat code whenever I want cached content.

Sample Usage 1

/* usage */
$TWITTER_FOLLOWERS_FILE_NAME = 'twitter-followers.txt';
$TWITTER_FOLLOWERS_URL = 'http://twitter.com/users/show.json?screen_name=davidwalshblog';

$TWITTER_FOLLOWERS = get_content($TWITTER_FOLLOWERS_FILE_NAME,$TWITTER_FOLLOWERS_URL,3,'format_followers',array('file'=>$TWITTER_FOLLOWERS_FILE_NAME));
/* utility function */
function format_followers($content,$args) {
	$content = json_decode($content);
	$twitter_subscribers = $content->{'followers_count'};
	if($twitter_subscribers) {
		$twitter_subscribers = number_format($twitter_subscribers,0,'',',');
		file_put_contents($args['file'],$twitter_subscribers);
		return $twitter_subscribers;
	}
}

The above code retrieves my Twitter follower count, parses the code, and caches the content for three hours.

There are several more advanced PHP caching classes available but the simple function above covers most of my needs — hopefully it can help you out too!

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

Full David Walsh Blog Post: Simple PHP Caching and Content Retrieval Function

Get a URL’s Reddit Score Using PHP and JSON

David Walsh — Wed, 11 Nov 2009 14:04:13 +0000

Since we can see Digg turning more into a funny-pic-and-vid site each day, I’ve turned my attention to Reddit. Reddit just seems more controlled and programmer-friendly. Since I have respect for Reddit I thought I’d put together a quick tutorial on how you can retrieve a URL’s Reddit score using PHP.

The PHP

"; //21
	echo "Downs: $downs
"; //8
	echo "Score:  $score
"; //13

	/* utility function:  go get it! */
	function get_url($url) {
		$ch = curl_init();
		curl_setopt($ch,CURLOPT_URL,$url);
		curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
		curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,1);
		$content = curl_exec($ch);
		curl_close($ch);
		return $content;
	}

?>

Parsing the JSON is simple using json_encode with the value of true to make turn the JSON into an associate array. My example shows how you can grab the number of “ups” and “downs” — not just the score. As with every API/web service, I highly recommend caching the result of your request.

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

Full David Walsh Blog Post: Get a URL’s Reddit Score Using PHP and JSON

Dynamically Create Charts Using jQuery Flot and Google Analytics

David Walsh — Thu, 22 Oct 2009 12:34:25 +0000

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.

View Demo

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 = ;
	var 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.

View Demo

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

Dynamically Create Charts Using MooTools MilkChart and Google Analytics

David Walsh — Tue, 20 Oct 2009 13:22:07 +0000

The prospect of creating graphics charts with JavaScript is exciting. It’s also the perfect use of JavaScript — creating non-essential features with unobtrusive scripting. I’ve created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics, create an HTML table with the statistics for a given month, and use MooTools MilkChart to colorfully chart them out.

View Demo

The PHP

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

/* 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', 'yourP@ss');
	$analytics->setProfileByName('yourdomain.com');
	$analytics->setMonth($month,$year);
	$visits = $analytics->getVisitors();
	$views = $analytics->getPageviews();
	/* build tables */
	if(count($visits)) {
		//visits - php
		$visits_table_data = '';
		/* $visits_table_data.= ''; */
		$visits_table_data.= '';
		foreach($visits as $day=>$visit) { 
			/*
			$visits_table_data.= ''."\n"; 
			$visits_table_foot.= ''."\n";
			*/
			$visits_table_data.= ''."\n"; 
			$visits_table_foot.= ''."\n";
		}
		$visits_table_data.= '';
		$visits_table_data.= ''.$visits_table_foot.'';
		$visits_table_data.= 'Unique Visits PageViews
Unique Visits
'.$visit.' '.$views[$day].'
'.$day.' '.$day.'
'.$visit.'
'.$day.'
';
	}
endif;

Unique Visits	PageViews
'.$visit.'	'.$views[$day].'
'.$day.'	'.$day.'
'.$visit.'
'.$day.'

It all kicks off with grabbing the information from Google Analytics. Simply provide the time frame you would like statistics for. I usually choose to retrieve statistics by the month.

The Generated HTML & MooTools JavaScript

Select Your Month/Year

	
	
	
	


Visits', $visits_table_data,'
'; } 
?>

Using the THEAD, TBODY, and TFOOT elements is extremely important in the ensuring the correct labels are placed within the generated chart. The data table itself is very simple. MilkChart will take the above table and create a CANVAS element which will contain the chart.

There are five different chart types you may choose from: Column, Bar, Pie, Line, Scatter. MilkChart takes full advantage of MooTools’ inheritance model as each type of chart’s class extends the base MilkChart class.

View Demo

I love the way the MilkChart developer(s) utilized MooTools’ OOP/inheritance model to perfection. I also love that MilkChart requires the bare minimum of data for the HTML table. MilkChart isn’t without its flaws though. A few of the table types had a fit about including multiple dimensions (using both page views and visits within the same chart, for example) and value label placement has yet to be perfected.

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

Full David Walsh Blog Post: Dynamically Create Charts Using MooTools MilkChart and Google Analytics

Retrieve, Cache, and Display Your FeedBurner Subscriber Count

David Walsh — Fri, 09 Oct 2009 13:20:41 +0000

One way of significantly speeding up your website is by caching information you retrieve remotely from other websites or databases. Caching information is extremely simple and can save your users seconds of unnecessary waiting. Here’s how I cache my FeedBurner follower count on my site.

The PHP

/* settings */
$cache_path = '/cache/';
$rss_file_name = date('Y-m-d').'-rss.txt';

/* rss */
if(file_exists($cache_path.$rss_file_name)) {
	$rss_subcribers = file_get_contents($cache_path.$rss_file_name);
}
else {
	$rss_content = get_url('https://feedburner.google.com/api/awareness/1.0/GetFeedData?id=dfadajf324789fhSDFDf48');
	$subscribers = get_match('/circulation="(.*)"/isU',$rss_content);
	if($subscribers) {
		$subscribers = number_format($subscribers,0,'',',');
		file_put_contents($cache_path.$rss_file_name,$subscribers);
		$rss_subcribers = $subscribers;
	}
}

/* display */
echo 'My subscriber count is: ',$rss_subscribers;

/* connects to the URL, returns content */
function get_url($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,1);
	$content = curl_exec($ch);
	curl_close($ch);
	return $content;
}

/* helper: does the regex */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

The first thing we do is check to see if our cached file exists. If it does, we simply return its contents. If the cache file doesn’t exist, we connect to our private FeedBurner URL, parse the content, and save the feed to a file named after the current day. Note the way we can check if we had gotten the count for the current day is by naming the file in “year-month-day” format.

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

Full David Walsh Blog Post: Retrieve, Cache, and Display Your FeedBurner Subscriber Count

Create WordPress Page Templates with Custom Queries

David Walsh — Tue, 06 Oct 2009 13:08:18 +0000

One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What do those three topics have in common? The fact that I provide a sweet demo for each of them. Thus I set out to create an easy way to check out all of my demos — the Demos & Downloads page.

I could address my Demos and Downloads link to “/index.php?s=view+demo” but that’s ugly — not SEO friendly nor is it an address anyone will remember. The solution was to create a new page template that would act similar to a search results page but afford me much more flexibility.

The Strategy

The first step was to identify posts that had a demo. If I were starting my blog today I would add a custom field called “demo” and give all posts containing a demo a value of “1″. The issue is that I have 2 years worth of posts and no desire to add a custom field to all of those posts that contain demos. I do know, however, that the label of all of my demos is “View Demo” so any post containing that string would likely contain a demo. Problem solved: I will need a search parameter for my custom query that looks for the “view demo” string.

WP_Query

WP_Query is WordPress’ awesome database interaction class. WP_Query accepts dozens of helpful parameters in the form of a request string or an array to grab the posts you need (writing raw MySQL statements sucks). With my strategy mapped out and WP_Query researched, it was GO time.

The Page Template PHP




Demos & Downloads

have_posts()) : $demoPosts->the_post(); ?>

	
	
	(.*)<\/p>/isU',$content);
		$image = get_content_match('/src="(.*)" class="image"/isU',$content);
		$link = strip_tags(get_content_match('/href="http:\/\/davidwalsh.name\/dw-content\/(.*)">/isU',$content));
		if($image) { echo ''; }
		echo $intro;
	?>
	
	
		Continue Reading »
		View Demo
	




	
		« Older Posts
	
	
	
		Newer posts »

Notice that in order to use pagination within the demos section, I needed to set my own $paged variable and add it to the WP_Query parameters string. The other parameters should be self explanatory.

Once I had the posts for the page, I’d cycle throw each post and use some custom PHP (which you couldn’t easily do on the search page) to parse the post content to and pull out a supporting image and link to the demo. The result is my Demos and Downloads page.

Beautiful! Don’t be afraid to create custom page templates with content generated from your own custom queries. Have any other pages that you think would make the site better? Let me know!

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

Full David Walsh Blog Post: Create WordPress Page Templates with Custom Queries