It’s called 7shifts and it’s an application where part-time employees can check/manage their availability and schedules online. It’s free to sign up for a trial, so if you’re a company that employs part-time staff, this could make your life a whole lot easier.

You can follow 7shifs on twitter as well.

1. Calling get_bloginfo() from within the WYSIWYG

Moving a WP site to another domain can sometimes be annoying, with broken image paths within the content fields etc. Yes, you could use a typical SQL REPLACE to fix all your paths – that’s definitely an option. Wouldn’t it be nice if you could code your path’s relatively and it would just work? Well, I think so. That’s why I’ve come up with this convention.

You know how you can call get_bloginfo(‘template_directory’) from a PHP file for the path to your template director? Awesome, but I want that same kind of functionality in the WYSIWYG content editor. Simple, just type {{ template_directory }} or {{ home }} or {{ rss2_url }} in the WYSIWYG. A full list of the options can be found here.

Put the code below in your themes functions.php file

// Add a filter to make all calls to the_content() run through our little custom filter.
add_filter('the_content', 'bloginfo_filter_content');
 
/**
* Handy-dandy find and replaces on things that are typed in the WYSIWYG
* Text betwen {{ }} should be keys for get_bloginfo();
*
* @param {String} $content The post_content passed in
*/
function bloginfo_filter_content($content){
 
    $c = $content;
 
    $pattern = "/{{(.*?)}}/";
    preg_match_all($pattern, $content, $matches);
 
    if($matches[1]){
        foreach($matches[1] as $i => $blog_option){
            $blog_option_clean = strtolower(trim($blog_option));
            $blog_val = get_bloginfo($blog_option_clean);
            // If we passed an invalid key argument (doesnt exist), skip over and do nothing
            // Note: invalid keys always default to the blogname key. That's how we check.
            if($blog_val == get_bloginfo() && $blog_option_clean != 'blogname'){
                continue; 
            }
            else {
                $c = str_replace($matches[0][$i], $blog_val, $c);
            }
        }
    }
 
    return $c;
 
}

Now whenever you call the_content() in your while loop, it will run it through this filter and do any necessary replacements.

2. List of tags without tag cloud weight

It seems kind of odd to me, but WordPress doesn’t seem to have a function to just list the tags like wp_list_categories() does. Instead it offers wp_tag_cloud(), which puts them in an ordered/unordered list but gives them a font-size weight (inline style attribute). It’s yucky if you’re not using it for an actual tag cloud and just want to display the tags in a list. You could just add a font-size: 11px !important; in your CSS to override any inline font-styles but I’m not a big fan of the !important declaration. Here’s a fix:

/**
* We want to list tags in an unordered list, but we don't want the style
* attribute to override our font-sizes that we set in the CSS
*/
function list_tags(){
 
    $tags = wp_tag_cloud(array('format' => 'list', 'echo' => false)); 
    // Get rid of that yucky style attribute that contains font-size
    return preg_replace('/style\s*=\s*(\'|").+(\'|")/i', '', $tags);
 
}

3. Get child pages from a parents page path

I wrote this function just because it’s short and useful. Getting all child pages based on a path has never been easier, pass in a path like ‘work/people’ or ‘people’ and you’ll get the child pages in an array.

/**
* Get an array of child pages based on a parents path
*
* @param {String} $path The path of the page (permalink slug) 
*/
function get_child_pages_by_page_path($path){
 
    $page_path = get_page_by_path($path);
    $pages = get_pages(array('child_of' => $page_path->ID));
    return $pages;
 
}

That is all.

For those who aren’t familiar with TaxiMe, it’s an app that I had created a year ago that estimates your cab fare for various cities across Canada and the US.

The iPhone app comes loaded with cool features that will make your pants drop. Check out the video, screenshots and more goodies at www.taxime.ca/iphone.

After reading various techniques on JavaScript templating, I decided to take John Resig’s idea of using script tags in your HTML. The reason I liked it was because you had your HTML in your HTML file. No funny stuff, just HTML where it belongs. I also liked the idea that it cached the templates – very good stuff. Here is what one of John’s examples looked like:

<script type="text/html" id="user_tmpl">
    <% for ( var i = 0; i < users.length; i++ ) { %>
        <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
</script>

Right off the bat, what do you think? Does it feel weird? Does it feel like someone just pissed in your corn flakes? To be honest, I felt that way when I first saw it. This could be partly due to the fact that I have never used a script tag with a type text/html before. As John points out, the browser doesn’t know how to treat it, so these script tags with text/html are ignored, which makes it a perfect cloaking device for sneaking in templates.

I love that it’s HTML right in the HTML, but I didn’t like that it still had JavaScript wrapped around it (for loop). In my case, all I want is simple templating with some caching, I don’t want to perform JavaScript actions. I would much rather pull in the template and then perform the JavaScript actions within the JavaScript file itself.

Ok, I’ll get down to the geeky stuff. Here is what I came up with.

Check out the Gist

Usage

HTML

// The following HTML is in a script tag and will not render out on the page
<script type="text/html" id="user_tpl">
    <div>
        <a href="<%= url %>"><%= user %></a>
        <span><%= something_in_span %></span>
    </div>
</script>

JavaScript

// @param 1 - The id/selector of the <script> element holding the HTML template
// @param 2 - The data object containing the replacements
// If you have jQuery you need to pass a jQuery selector
// or else just pass it an id (without #)
var tpl = Template.draw('user_tpl', { user: 'bob', url: 'http://cornflakes.com' });
alert(tpl); // outputs 
/*
<div>
        <a href="'http://cornflakes.com">bob</a>
        <span><%= something_in_span %></span>
</div>
*/

Oops, we forgot to run a replacement for <%= something_in_span %> – no problem. We can re-template the same string, by calling the append method.

tpl = Template.append(tpl, { something_in_span: 'Hi im text inside a span' })
alert(tpl); // outputs
/* 
<div>
        <a href="'http://cornflakes.com">bob</a>
        <span>Hi im text inside a span</span>
</div>
*/

There are a lot of templating scripts out there and by no means is this the all-in-one solution. This is just my approach to making something that’s lightweight, easy to use and utilizes caching.

UPDATE: I have an expanded version of this technique. It includes a destroy() method to restore the original function/method. Check out the gist on github.

The process would be to create a function that returns the method along with some custom arguments that have been tampered with (scary, I know). Here is something basic to achieve this effect:

jQuery.fn.css = (function(_jQueryCSS){
 
	return function(){
		// Run some custom code here and alter the arguments passed in
		return _jQueryCSS.call(this, arguments);
	}
 
})(jQuery.fn.css);

This technique has been done before by other developers. James Padolsey implements this technique in his cross-domain-ajax plugin and over-writes the jQuery.ajax method.

Normally I would stay clear of methods under another namespace (Don’t modify objects you don’t own -Nicholas Zakas) but sometimes it makes sense to over-write them to add your own custom bits like in James’ case (just be careful , he’s not hurting the current functionality of jQuery.ajax, he’s simply augmenting it. I’ve created a simple function to handle this type of hijacking.

The hijack function

/**
* Allows you to alter with arguments before the method is actually called
* @param {Function} method A method/function to call after doing some tampering
* @param {Function} cb A callback that is passed the arguments for you to play with
*/
function hijack(method, cb){
 
	// A function needs to be passed or there will be hell to pay
	if(Object.prototype.toString.call(cb) !== "[object Function]"){
		throw new Error('An anonymous function must be passed as the second parameter!');
	}
 
	return function(){
 
		// Turn arguments into a true array
		var args = Array.prototype.slice.call(arguments);
 
		// Call the copied method and pass it some 'tampered' arguments from our callback
		return method.apply(this, cb.call(this, args) || args);
 
	};
 
}

Usage

Here is a simple use-case of how you would hijack the CSS method in jQuery.

// Hijack the CSS method in jQuery
jQuery.fn.css = hijack(jQuery.fn.css, function(user_args){
 
	// Now store the arguments passed in by the user
	var args = user_args;
 
	// Do some checking and alter the arguments
	if(args[0] == 'background' && args[1] == 'this-will-be-replaced-with-green'){
		args[1] = 'green';
	}
 
	return args;
 
});

So now when I call:

$('body').css('background', 'this-will-be-replaced-with-green');

It will run through my hijacked function and replace ‘this-will-be-replaced-with-green’ with ‘green’. And voila, your background is green.

Here’s what my CakePHP’s config/database.php file looks like (PHP4 unfortunately). You’ll notice I have a set of options for my development environment ($dev) and one for my production environment ($prod). You’ll notice that when new DATABASE_CONFIG() is called, the __contruct method will fire and set $this->default to the appropriate environment that we’re in. It does this by checking to see if the domain that we’re on is the production domain.

class DATABASE_CONFIG {
 
	var $default = array(); // overridden
 
	// debugging enabled - development site
	var $dev = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'port' => '',
		'login' => 'root',
		'password' => 'root',
		'database' => 'polly_pocket',
		'schema' => '',
		'prefix' => '',
		'encoding' => ''
	);
 
	// debugging disabled - live site
	var $prod = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'port' => '',
		'login' => 'root',
		'password' => 'asodij390284niusofdiuh3823_SUPER_SECURE!!!',
		'database' => 'polly_pocket',
		'schema' => '',
		'prefix' => '',
		'encoding' => ''
	);
 
	function __construct(){
 
		$this->default = (str_replace('www.', '', $_SERVER['HTTP_HOST']) == 'prod-live-site.com') ? $this->prod : $this->dev;
 
	}
 
}

I’m sure there is a simpler way of doing this, maybe merging in the necessary key/values with array_merge instead of re-writing the entire array – but you get the idea.

Now I want to talk about accomplishing the same sort of idea but with JavaScript. I recently had to work on a project that was largely front-end. Different configurations had to be used for different environments. Here is what I came up with:

/**
* Fire it up and set options
* @constructor
*/	
var SiteName = function(){
 
	/**
	* We check the config host to load in and over-write the default settings
	* @private
	*/
	function setOptions(){
 
		var clean_host = (window.location.hostname).replace(/www./, '');
		if(config[clean_host] && typeof(config[clean_host]) === 'object'){
			this.opts = jQuery.extend({}, config.default, config[clean_host]);
		}
 
	}
 
	/**
	* Here is where we define our default set of options and our options to be merged/over-written with
	* options specific to the host name
	* @private
	*/
	var config = {
		"default" : {
			cache: true,
			backgroundAnimated: true,
			allowIE6Users: false,
			blowUpMachineIfIE6User: true,
			storeURL: '',
			blogURL: ''
		},
		"localhost" : {
			backgroundAnimated: false,
			blogURL : "http://localhost/blog",
			storeURL: "http://localhost/store"
		},
		"prod-live.com" : {
			blogURL : "http://prod-live.com/blog",
			storeURL : 'http://store.prod-live.com/main'
		}
	};
 
	/**
	* Once the configs are merged from setOptions, it puts it in this new clean options object
	* @public
	*/
	this.opts = {};
 
	setOptions.call(this);
 
}
 
var MySite = new SiteName();
console.log(MySite.opts);

All this is doing is running a check to see if the config exists for the domain that we’re on and if so, merge it with the defaults. It’s important to note that this technique uses jQuery’s extend method. If we are on the localhost domain then our SiteName.opts will look now like this:

{ 
	cache: true,
	backgroundAnimated: false,
	allowIE6Users: false,
	blowUpMachineIfIE6User: true,
	blogURL : "http://localhost/blog",
	storeURL: "http://localhost/store"
}

I’m sure storing config in an XML file and parsing it would be a logical approach as well. I’m open to any suggestions and thoughts on this approach.

First off, I hope everyone had fun over the holidays – I certainly did! With the release of jQuery 1.4 jQuery 1.4 on the horizon for early in the new year, I decided I wanted to try out some of its new functionality. I’ve been reading blogs of some of the jQuery core developers and I found a post by Brandon Aaron to be very interesting. He talks about adding custom events to jQuery using its special event API. So I started making my custom event plugin and then realized that you could not bind the event to the same element twice. Meaning, you can’t do this:

$(document).bind('myevent', { data: ['some data'] }, function(event){ });
$(document).bind('myevent', { data: ['more data'] }, function(event){ });

So I tried using namespaces and it still would only fire the first event bind, not the second. Wow, what a drag. Then I found that Brandon wrote a new article about two new methods that were added to the custom event hook: add and remove . They both get fired on an event “bind” and “unbind” – perfect! Uh oh, these two methods are not available in the latest stable release of jQuery (1.3.2). They are only available in the release of jQuery 1.4! So yes, unfortunately, you have to upgrade to jQuery 1.4.2 (or greater) to use this plugin.

What is Keystrokes? (Hot keys)

Keystrokes is a jQuery plugin that can capture a sequence of keys that are pressed. It would come in pretty handy if you were doing a web application and wanted to allow the users to use hot keys. It can even detect combo keys like ‘shift+ctrl’. It would operate exactly as you type it. In this case, the user would hold down shift, hit ctrl and the event you specified would fire.

This plugin has been tested in: Firefox 3.5, Safari 4, Opera 10 and IE 7+. It might work in IE 6 but I’m not promising anything.

Download It! (v2.0)

Demo It!

Setting it up

Make sure these are in the head of your document

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1.4.2');</script>
<script type="text/javascript" src="js/jquery.keystrokes.min.js"></script>

Adding a basic event

$(document).bind('keystrokes', {
	// The key pattern you set your element to listen for
	keys: ['i', 'p']				
}, function(event){
	// Throw a notification to the user what keys they successfully typed
	alert('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
 
});

If this is done correctly, when the user hits i then p, you will get an alert notification. See the demo page for a full the full effect.

Adding a basic event that unbinds itself upon successful key strokes

$(document).bind('keystrokes.SingleItem', {
	// The key pattern you set your element to listen for	
	keys: ['m', 'arrow down+r']		
}, function(event){
	// Unbind this event after it's been successfully typed
	$(this).unbind(event.keystrokes.stack_item.name);
	alert('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>.  You cannot type it again because it has been unbound!');
});

Adding a more complex notification that contains multiple key sets

$(document).bind('keystrokes.OtherNameSpace', [		
	{
		// Define typed keys in sequence
		keys: ['h', 'shift+p+o'],
		// If false, this will not execute the main callback, only the "success" callback on this stack item
		proceedToMainCallback: false,
		// The callback bound to this specific stack item
		success: function(event){
			alert('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>.  This has "proceedToMainCallback: false" so it will not call the main callback for this bound event.</em>');
		}
 
	},
	{
		// Define typed keys in sequence
		keys: ['j', 'k'],
		// The callback bound to this specific stack item
		success: function(event){
			alert('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
		}
	},
	{
		// Define typed keys in sequence
		keys: ['arrow up+comma+k', 1, 2, 3],
		// The callback bound to this specific stack item
		success: function(event){
			alert('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
		}
	}			
// The main callback that gets called with every successful key sequence
// This can be skipped by setting 'proceedToMainCallback: false' as an option in a stack item
], function(event){	
		// Maybe get the whole stack.. if you want?
		var stack = event.keystrokes.stack;
		// Get the specific stack item that was successfully typed
		var data_keys = event.keystrokes.stack_item.keys.join(', ');
		// Shout it out!
		alert('<span>This is the main callback for selected successful keystrokes. To skip this call, just set "proceedToMainCallback: false" in your stack item: </span> ' + data_keys);
 
	}
);

Key set options

Below is a list of all possible options that go with a key set.

String list

Below is a table of all possible key strings you can enter in your keys array.

You can also add/modify to the string list by adding this line above your event calls:

// Simply supply the key code and the string you wish to use.
$.extend($.event.special.keystrokes.codes, { 13 : 'my enter key' });

If you have something like Firebug and you want to do some debugging, you can add this line above your event calls:

$.event.special.keystrokes.debug = true;

Now, if you open up your console, you will be able to see what keys the script thinks you’re typing. If you hit a key that’s not registered in our string list, it will output that key code to the console and notify you. This makes it easy for you to do your own customizations.

By default, Keystrokes ignores when you’re typing keys in any input/textarea field. If you want to track keys on an input field you have to bind it directly to that input element.

I’m going to start off my dissecting and explaining a relatively simple method called noConflict. If you want to follow along you can download a development copy of jQuery. As of this post, we’re using version 1.3.2.

Open up the file and go to line 19. You’ll see the code below

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
 
jQuery = window.jQuery = window.$ = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	return new jQuery.fn.init( selector, context );
},

Right away you’ll notice that 2 variables are created with an underscore, this is to hold a reference to the old namespaces that might be in use. For example, if we load the Prototype JavaScript framework before jQuery, it uses the $ function, so jQuery makes a copy of that reference before it over writes it with it’s own below. Now if we ever want to get back to the Prototype $ reference, we can get at it with the _$ variable.

Note: If you load the jQuery library before Prototype, there is no need to call noConflict(). But you will have to set up a new way to target elements – see below.

This now brings us to the noConflict method. If you go to line 619 you’ll see our lovely method:

noConflict: function( deep ) {
	window.$ = _$;
 
	if ( deep )
		window.jQuery = _jQuery;
 
	return jQuery;
},

Remember that _$ variable that get’s set at the top of the jQuery file? There it is! If you remember, we copied an existing $ reference (Prototype) into the _$ variable to get at it later if we wanted. In this method we return the $ sign to it’s owner, which in this case is the Prototype $ function. It’s set by the line that says window.$ = _$. We use the window prefix to reference the global namespace. Now we want our $ function back so we can use it for Prototype, you can do this by calling the noConflict() method:

jQuery.noConflict();
$('someid').hide(); // The $ function is now using Prototype to target elements
jQuery('#someid').hide() // The jQuery function is used instead of the $ function

But I hate typing jQuery each time I target some elements, what can I do? Simple. Since the noConflict() method returns the jQuery object, we can store that in a variable.

var jQ = jQuery.noConflict();
$('someid').hide(); // The $ function is now using Prototype to target elements
jQ('#someid').hide() // The jQ function after we set it above

The noConflict() method also accepts one boolean parameter called deep. For the most part, this does not need to be set unless you’re working in a high conflict environment. For example, you might have 2 versions of jQuery running or something else using the jQuery namespace (god I hope not). That might be grounds for setting the deep parameter to true. For example you could move the jQuery object to an entirely new namespace:

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
var myNamespace = {};
myNamespace.query = jQuery.noConflict(true);
myNamespace.query('#my-id-with-new-version-of-jquery'); // This will execute using jQuery 1.3.2
jQuery('#my-id-with-old-version-of-jquery'); // This will execute using jQuery 1.3.1
$('my-id-with-prototype'); // This will execute using Prototype

View the the demo I made of jQuery.noConflict(true) in action.

I’m going to show you what I’ve done with the PHP package of JSMIN.

If you download the PHP package you’ll see how to use is simple:

<?
require 'jsmin-1.1.1.php';
echo JSMin::minify(file_get_contents('example.js'));
?>

Brilliant! It will output a bunch of ugly code right? Well who cares if it’s ugly, it’s only for production. What I wanted to do with this is have something that takes multiple JavaScript files, minifies them and then outputs it to 1 JavaScript file that’s all tightly bundled. Here’s how to do that.

First, you’ll want to make sure that the jsmin-1.1.1.php class is included. Then write a function to handle the minifying of multiple JavaScript files.

<?
/********************************************
* Handle an array of JavaScript files, minify them and output them into 1 file.
* @param string $final_file The path to the final JavaScript file that will contain all minified contents
* @param array $js_files The array of JavaScript files to minify
* @return string The script tag including the path to the final JavaScript file
*/
function drawMinJS($final_file, $js_files){
 
	$contents = '';
	foreach($js_files as $src){
		// We use a semicolon at the end to safely separate the files
		$contents .= JSMin::minify(file_get_contents($src)) . ';';
	}
	$str = '<script type="text/javascript" src="' . $final_file . '"></script>';
	file_put_contents($final_file, $contents);
 
	return $str;
 
}
?>

Then put the snippet below where ever you would like the script tag to appear. Sometimes people put it in the <head> of the document and sometimes right before the </body>

<?
// Not to worry, this outputs the actual <script> tag
echo drawMinJS(
	'js/finalfile.min.js',
	array(
		'js/global.js',
		'js/thickbox.js',
		'js/twitter.js',
		'js/events.js'
	)
);
?>

Voila! The function will take all those JavaScript files in that array, minify them and put them into finalfile.min.js.
I also recommend reading “The best way to load external JavaScript” by Nicholas C. Zakas if you’re looking for more ways to improve performance.