(I feel that I should have this stuff under my belt, but I often have to remind myself of the weird rules of JavaScript. I should probably be studying the writings of Doug Crockford more.)

So I start to wonder about this sort of thing, and I turn to the awesome JS Bin. I set up a test there, and I can provide you with a link to the test… I love that.

But JS Bin is rather impermanent, and just in case that’s not working out, here is the original test and the results.

code

/* check for an absent argument to a function */

var testIt = function(one, two){
  gnomeSane = '';
  if(two === undefined){
    gnomeSane += "two is undefined. (two === undefined)<br />";
  }
  if(two === null){
    gnomeSane += "two is null. (two === null)<br />";
  }
  if(two === false){
    gnomeSane += "two is false. (two === false)<br />";
  }
  if(two === ''){
    gnomeSane += "two is an empty string. (two === '')<br />";
  }
  if(two === 0){
    gnomeSane += "two is zero. (two === 0)<br />";
  }

  if(two == undefined){
    gnomeSane += "two is equivalent to undefined. (two == undefined)<br />";
  }
  if(two == null){
    gnomeSane += "two is equivalent to null. (two == null)<br />";
  }
  if(two == false){
    gnomeSane += "two is equivalent to false. (two == false)<br />";
  }
  if(two == ''){
    gnomeSane += "two is equivalent to an empty string. (two == '')<br />";
  }
  if(two == 0){
    gnomeSane += "two is equivalent to zero. (two == 0)<br />";
  }

  if(typeof two == "undefined"){
    gnomeSane += "type of two is 'undefined'. (typeof two == 'undefined')<br />";
  }

  if(!two){
    gnomeSane += "not two is true. (!two)<br />";
  }

  gnomeSane = gnomeSane == '' ? 'two is '+two : gnomeSane;
  document.write('<p>'+one+'<br />'+gnomeSane+'</p>');
}

testIt('<b>The second argument is not being passed to the function.</b>');
testIt('<b>Now the second argument is null.</b>', null);
testIt('<b>Now the second argument is false.</b>', false);
testIt('<b>Now the second argument is an empty string.</b>', '');
testIt('<b>Now the second argument is zero.</b>', 0);
​

results

The second argument is not being passed to the function.
two is undefined. (two === undefined)
two is equivalent to undefined. (two == undefined)
two is equivalent to null. (two == null)
type of two is 'undefined'. (typeof two == 'undefined')
not two is true. (!two)

Now the second argument is null.
two is null. (two === null)
two is equivalent to undefined. (two == undefined)
two is equivalent to null. (two == null)
not two is true. (!two)

Now the second argument is false.
two is false. (two === false)
two is equivalent to false. (two == false)
two is equivalent to an empty string. (two == '')
two is equivalent to zero. (two == 0)
not two is true. (!two)

Now the second argument is an empty string.
two is an empty string. (two === '')
two is equivalent to false. (two == false)
two is equivalent to an empty string. (two == '')
two is equivalent to zero. (two == 0)
not two is true. (!two)

Now the second argument is zero.
two is zero. (two === 0)
two is equivalent to false. (two == false)
two is equivalent to an empty string. (two == '')
two is equivalent to zero. (two == 0)
not two is true. (!two)

conclusions

If you want to really just test for an undefined argument use:

two === undefined

or

typeof two == 'undefined'

I prefer the terseness of the former. Also, note that typeof null is equivalent to ‘object’.

If you want to test for undefined or null use either:

two == undefined

or

two == null

Using both might make the code more clear, but it is not strictly necessary.

If you want to test for all “off values” (undefined, null, false, empty string, zero), then use:

!two

This is another test to see how easy I can make it for a client to post to their blog. But maybe my real problem is all the bugs on my computer.

Posted via email from Bill’s posterous

Before now, this was something only possible with tools like Mapnik, Cascadenik and OpenStreetMap. And for white-label maps or extremely customized maps, those tools are still quite relevant.

Resources

• Google Maps API
• Google Styled Maps Documentation
• Google Styled Maps Wizard

Original vCard

BEGIN:VCARD
VERSION:3.0
N:Gump;Forrest
FN:Forrest Gump
ORG:Bubba Gump Shrimp Co.
TITLE:Shrimp Man
TEL;TYPE=WORK,VOICE:(111) 555-1212
TEL;TYPE=HOME,VOICE:(404) 555-1212
ADR;TYPE=WORK:;;100 Waters Edge;Baytown;LA;30314;United States of America
LABEL;TYPE=WORK:100 Waters Edge\nBaytown, LA 30314\nUnited States of America
ADR;TYPE=HOME:;;42 Plantation St.;Baytown;LA;30314;United States of America
LABEL;TYPE=HOME:42 Plantation St.\nBaytown, LA 30314\nUnited States of America
EMAIL;TYPE=PREF,INTERNET:forrestgump@example.com
REV:20080424T195243Z
END:VCARD

vCard Encoded for a URL

BEGIN%3AVCARD%0AVERSION%3A3.0%0AN%3AGump%3BForrest%0AFN%3AForrest%20Gump%0AORG%3ABubba%20Gump%20Shrimp%20Co.%0ATITLE%3AShrimp%20Man%0ATEL%3BTYPE%3DWORK%2CVOICE%3A%28111%29%20555-1212%0ATEL%3BTYPE%3DHOME%2CVOICE%3A%28404%29%20555-1212%0AADR%3BTYPE%3DWORK%3A%3B%3B100%20Waters%20Edge%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0ALABEL%3BTYPE%3DWORK%3A100%20Waters%20Edge%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0AADR%3BTYPE%3DHOME%3A%3B%3B42%20Plantation%20St.%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0ALABEL%3BTYPE%3DHOME%3A42%20Plantation%20St.%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0AEMAIL%3BTYPE%3DPREF%2CINTERNET%3Aforrestgump%40example.com%0AREV%3A20080424T195243Z%0AEND%3AVCARD

Encoded, but perhaps easier to read

BEGIN%3AVCARD%0A
VERSION%3A3.0%0A
N%3AGump%3BForrest%0A
FN%3AForrest%20Gump%0A
ORG%3ABubba%20Gump%20Shrimp%20Co.%0A
TITLE%3AShrimp%20Man%0A
TEL%3BTYPE%3DWORK%2CVOICE%3A%28111%29%20555-1212%0A
TEL%3BTYPE%3DHOME%2CVOICE%3A%28404%29%20555-1212%0A
ADR%3BTYPE%3DWORK%3A%3B%3B100%20Waters%20Edge%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0A
LABEL%3BTYPE%3DWORK%3A100%20Waters%20Edge%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0A
ADR%3BTYPE%3DHOME%3A%3B%3B42%20Plantation%20St.%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0A
LABEL%3BTYPE%3DHOME%3A42%20Plantation%20St.%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0A
EMAIL%3BTYPE%3DPREF%2CINTERNET%3Aforrestgump%40example.com%0A
REV%3A20080424T195243Z%0A
END%3AVCARD

Submit to Google

This can now be submitted to Google’s Chart API as a URL:

http://chart.apis.google.com/chart?cht=qr&chs=400x400&chl=BEGIN:VCARD%0AVERSION:3.0%0AN:Gump;Forrest%0AFN:Forrest%20Gump%0AORG:Bubba%20Gump%20Shrimp%20Co.%0ATITLE:Shrimp%20Man%0ATEL;TYPE%3DWORK,VOICE:(111)%20555-1212%0ATEL;TYPE%3DHOME,VOICE:(404)%20555-1212%0AADR;TYPE%3DWORK:;;100%20Waters%20Edge;Baytown;LA;30314;United%20States%20of%20America%0ALABEL;TYPE%3DWORK:100%20Waters%20Edge\nBaytown,%20LA%2030314\nUnited%20States%20of%20America%0AADR;TYPE%3DHOME:;;42%20Plantation%20St.;Baytown;LA;30314;United%20States%20of%20America%0ALABEL;TYPE%3DHOME:42%20Plantation%20St.\nBaytown,%20LA%2030314\nUnited%20States%20of%20America%0AEMAIL;TYPE%3DPREF,INTERNET:forrestgump%40example.com%0AREV:20080424T195243Z%0AEND:VCARD&chld=L

The Result

The image below is coming from the Google Chart API, not an image file on my server.

Resources

• vCard
• URL Encode and Decode Generator Tool
• PHP urlencode
• Google Image Chart API – QR Code Generator

The creepy thing, however, is that I had to give my Twitter login info to Tarpipe to get this rolling. Even if I decided that I trust these people, how can that be secure? They must be submitting this info to Twitter in plain text, right? That means they are storing it in plain text, right? Or maybe I don’t understand their advanced cryptography? My understanding was that once you encrypted something, that’s it. You can’t de-encrypt it. You’re supposed to simply compare two encrypted values… something tells me this is not happening.

I also wonder how this is achieved on Posterous or Tumblr, with their native autoposting to other services.

Anyhoo… it might be incredibly useful at some point, so I’m just checking it out for now. But my Twitter password will probably change very soon.

UPDATE: Looks like Tarpipe is pretty much barely beta, and it’s not as useful as I originally thought… probably will be after they start using PubSubHubbub or cron jobs or some other way of turning regular RSS/Atom feeds into real-time feeds. Apparently, one needs to develop a custom application to use much of what they have built. That’s cool, but not easy for a quick test.

On the page where the testimonial should appear, the client would have the option of getting a specific Testimonial to appear in the left column. However, if the client forgot to specify a Testimonial post, then a random testimonial would appear instead.

Here is the code that went in index.php…

<?php
    if(in_array("testimonial_id", get_post_custom_keys())){
        $custom_fields = get_post_custom();
        //get_custom_field_value() is in functions.php
        $excerpt_id = get_custom_field_value('testimonial_id', $custom_fields);
        $wp_post_obj = get_post($excerpt_id);
    }
    else{ //no testimonial_id set, so use random testimonial post
        $rand_posts = get_posts('showposts=1&category_name=Testimonial&orderby=rand');
        $wp_post_obj = $rand_posts[0];
    }
    $testimonial_custom_fields = get_post_custom($wp_post_obj->ID);
    $blockquote = $wp_post_obj->post_excerpt;
    $cite = get_custom_field_value('testimonial_person', $testimonial_custom_fields);
    $location = get_custom_field_value('testimonial_location', $testimonial_custom_fields);
?>
<blockquote><?php echo($blockquote); ?></blockquote>
<p><cite><?php echo($cite); ?></cite></p>
<p><?php echo($location); ?></p>

There are a couple of notable things about that code. First, we test to see if the client put a testimonial_id custom field in the page where the testimonial appears. If the custom field is there, then we retrieve the value of it with a custom function stored in functions.php (more on that below). If not, then we get a random post within the Testimonial category. Second, we take the post object and retrieve the Excerpt from it, as well as two custom fields using our same custom function.

Here is the code that goes in functions.php…

/* ********************************
get_custom_field_value($custom_field_key, $custom_fields_array)

purpose:
    to retrieve the value of a custom field.
args:
    $custom_field_key : the name of the custom field.
    $custom_fields_array : the associative array of custom fields returned by get_custom_fields().
returns:
    the value of the custom field, or if the custom field does not exist, an empty string.
example:
    $custom_fields = get_post_custom();
    $excerpt_id = get_custom_field_value('testimonial_id', $custom_fields);
    - or further reduced to -
    $excerpt_id = get_custom_field_value('testimonial_id', get_post_custom());
******************************** */
function get_custom_field_value($custom_field_key, $custom_fields_array) {
    if(isset($custom_fields_array[$custom_field_key])){
        foreach ($custom_fields_array[$custom_field_key] as $key => $value) {
            $return = $value; //use the last one, if the custom field is accidentally used more than once.
        }
        return $return;
}
    else{
        return "";
    }
}

For example, I may have a page on my site called “Super Funky”, and some child pages dedicated to James Brown, Sly Stone, Parliament-Funkadelic, etc. On these pages, I have some special code that prevents them from uncontrollably getting down on the dancefloor… but the question is, how do we set up the logic that will check whether we are within the Super Funky section of the site?

Let’s say the Super Funky page’s ID number is 74. I could easily check to see if the current page has page-id-74 as an ancestor with the following code:

$ancestors = get_post_ancestors($post);
if(in_array(74, $ancestors)) {
    // Code that will be parsed when this page has a ancestor with id 74
}

I found that code snippet on Coen Jacobs' blog.

However, that code won't include the Super Funky page itself. So if we want to have some conditional logic for code that should only execute in the Super Funky section of the site, we might want to write a function and put it in the /wp-content/themes/my_theme/functions.php file. Here is my suggestion:

/* ********************************

is_in_section($section_post_id, $post_obj)

purpose: to see if the current post/page is either the descendant of a specified post/page,
	or if it is the specified post/page itself.

args:
	$section_post_id : this is the post id number.
	$post_obj : this is the object returned by $wp_query->get_queried_object();

example:
	if( !is_in_section(74, $wp_query->get_queried_object()) ){
		//this code does not execute within page-id-74, or any of its descendants
	}

******************************** */
function is_in_section($section_post_id, $post_obj) {
      $post_ancestors = get_post_ancestors($post_obj->ID);
      if( $post_obj->ID == $section_post_id || (in_array($section_post_id, $post_ancestors)) ){
      	return true;
      }
      else{
      	return false;
      }
}

I hope that's useful!

Here is an example of the “file URL” option — not so great.  The upload functionality on the WordPress backend is nice, but of course the video playback over HTTP is not happening — basically you either have to download the file or have Quicktime installed.

jumps

Another option is the “from URL” option — pick your favorite video service: YouTube, Vimeo, etc.  Am I doing something wrong?  This is just a link.

Two Equations

iBox allows me to use a link to a YouTube video.  In this case, I wanted my link to look like a video clip, so I used Grab on my MacBook to get an image of the video player on my YouTube player test page.

That worked fine, but to prevent those “related videos” from popping up at the end of the playback, I had to edit the iBox JavaScript file. Basically, I had to update the HTML string that would be dynamically added to the DOM to bring it inline with YouTube’s current recommendations for modifying the player. And then I had to tweak the player.

So this was the original block of code from iBox.js:

var html='<object width="100%" height="100%" style="overflow: hidden; display: block;">

And this was my modification:

 var html = '<object ' +
                'width="100%" ' +
                'height="100%" ' +
                'style="overflow:hidden; display:block;" ' +
                'data="http://www.' + domain + '/v/' + id +
                    '&hl=en' +
                    '&fs=1' +
                    '&rel=0' +
                    '&showinfo=0' +
                '" ' +
                'type="application/x-shockwave-flash" ' +
            '>' +
                '<param ' +
                    'name="src" ' +
                    'value="http://www.' + domain + '/v/' + id +
                        '&hl=en' +
                        '&fs=1' +
                        '&rel=0' +
                        '&showinfo=0' +
                        '&autoplay=1' +
                '" />' +
                '<param name="allowfullscreen" value="true" />' +
            '</object>';

And here is the result: