On the road again...

It's 6:45am & we've already been driving for about 2.5 hours. Got about another 4 hours to go.
-Ben

Sent from my BlackBerry

"I don't have anything to wear..."

Me - *giggle*
-Ben

Sent from my BlackBerry

SEO stats

I don't consider myself to be big on the whole SEO (search engine optimization) front, the way I've got it figured, if I put out good posts, the hits will take care of themselves.

I do, however, have a hit counter provided by StatCounter.com. I was browsing through the stats it has collected and thought I'd share some of the more interesting bits:
Browsers -

1. MSIE 221
2. Firefox 206 (yay!)
   
3. Chrome 38 (also yay!)
   
4. Safari 13
5. Mozilla 12
6. Opera 8
7. Konqueror 1

Operating Systems -

1. Windows XP 284
2. Windows Vista 87
3. Linux 68 (yay!)
   
4. Unknown 23
5. Windows 2003 22
6. Windows NT6.1 13
7. Windows 2000 3

I'm happy that my work attracts such a large percentage of Linux & Firefox/Chrome users! =)

Here's to you guys/gals!

EVEN Better JavaScript Query String Parsing

A while back, I posted an article on how to parse the query string in JavaScript. Binny V A, a much more proficient JavaScripter than I, suggested a method by which one could create an associative array from the query string so that you can reference the variable through an array instead of having to declare individual variables in the script.

At the time, it was a bit out of my grasp to understand the subtlety of his code, I've since become a bit more knowledgeable concerning associative arrays and I've been able to whittle down my previous code example into something much more elegant.

I present to you for your scripting pleasure, the Better JavaScript Query String Parser:

var a = location.search.slice(1).split("&"), GET = [];
for (i in a) { GET[a[i].split("=")[0]] = a[i].split("=")[1]; }

This will return an array named "GET" that consists of query string variables that can be referenced by the following example:

http://example.com/index.html?id=1001&fname=Ben&lname=Bradley

alert("id = " + GET["id"]);
alert("first name = " + GET["fname"]);
alert("last name = " + GET["lname"]);

JavaScript IP Address Validation

In a couple projects that I've been working on lately, I've had to collect user input that included IP addresses. For those of you who don't work with IP addresses on a regular basis, it's really easy to get into a rhythm while typing them and mistype the address. This kind of typo can be immensely frustrating as it's easy to overlook after typing 20 dozen or so.

So here's a simple JavaScript function to validate the user entered an actual, valid IP address. Of course it won't validate that your user typed the CORRECT IP address, just that they did, in fact, type a valid IP.

function isIP(obj) {
 var ary = obj.value.split(".");
 var ip = true;
 
 for (var i in ary) { ip = (!ary[i].match(/^\d{1,3}$/) || (Number(ary[i]) > 255)) ? false : ip; }
 ip = (ary.length != 4) ? false : ip;

 if (!ip) {    // the value is NOT a valid IP address
  obj.style.background = "red";
  obj.value = "Not a valid IP address";
  obj.select();
 } else { obj.style.background = ""; } // the value IS a valid IP address
}

The best way that I've found to implement this code is to add an "onBlur" call in the <input ...> tag like so:

<input type="text" id="ip" onBlur="isIP(this)" />

Enjoy!

A dog & his boy

-Ben

Sent from my BlackBerry

A boy & his dog

-Ben

Sent from my BlackBerry

TP'd

Saw this on my way to coffee w/ the guys this morning.
-Ben

Sent from my BlackBerry

Moped lock fail

-Ben

Sent from my BlackBerry

Introducing taskd.me

I gave a bit of a preview of my latest project a few days ago. Basically it's an automated and online version of the Urgency vs. Importance task/time management system made popular by Steven Covey.

To review the theory behind this system, there are four basic categories that all tasks can be classified into:

1. Urgent & Important - Hitting the brakes as the light turns red.
2. Urgent & Not Important - Your cell phone ringing as your driving.
3. Not Urgent & Important - Getting your brakes checked routinely.
4. Not Urgent & Not Important - Tuning into your favorite station on the radio.

Hopefully the car example above illustrates the general classification guidelines that this system is based on. If not, you can read more about it here.

On with the goodness =)

taskd.me is my attempt to put that system online - it's still very much in a pre-alpha and I'd welcome any feedback or input about how to best develop it further. You can either create your own account or you can use the demo account:

• username = demo
• password = demo

### UPDATE - 15 June 2009###

I think I've knocked out the issue of date formatting by including a graphical calendar for date/time picking. Check it out - http://taskd.me

Javascript URL Linker

As a part of the task management system that I'm working on, I wanted to be able to extract URLs from simple text strings and turn them into links without allowing users the ability to manipulate my HTML. After a bit of scouring the web via Google, W3Schools.com provided the answer:

function makeLink(str) {
 var linkString = "";
 var ary = str.split(" ");
 var a=0;
 while (a < ary.length) {
  linkString += (ary[a].match("http")) ? ary[a].link(ary[a])+" " : ary[a]+" ";
  a+=1;
 }
 return linkString;
}

This code will extract URLs from a string, turn them into links, and insert them back into the string in their original position.

Enjoy!

Urgency vs Importance Task Management

I've been working on a little side project now for a few weeks that is quickly approaching what I feel is a pre-alpha stage. Truthfully, the idea has been swimming around in my head for a long time, but I've just now gotten my act together to get to work on it and I'm pretty pleased with how it's progressing!

So here's my elevator pitch:

It's a web-based task management system that is based on Steven Covey's Urgency vs. Importance matrix.

For the uninitiated, this matrix is simply a chart with four boxes, each with its own classification of urgent or not and important or not.

• The top-left box shows tasks that are urgent and important - if these tasks aren't accomplished very soon then very bad things happen.
• The top-right box shows tasks that are urgent, but not important - these tasks should be done soon or else things will get unpleasant.
• The bottom-left box shows tasks that are not urgent, but are important - these are tasks that have the potential to cause very bad things to happen, but not in the immediate future.
• And the bottom-right box shows tasks that are not urgent or important - these tasks would be nice if you got them done at some point, but no one will notice or care if you don't.

It hat always made a lot of sense to me and I tried a couple pen & paper methods of putting it into application, but found myself getting tired of having to keep track of the paper and everything that that brought with it.

So I built my own.

It's not ready for public consumption just yet, but I've sent out a couple pre-alpha invites to help me refine the user interface a bit & maybe add some features that I've overlooked.

Here's some screenshot goodness to help illustrate what I'm up to:

Munchkin Begins

It's table-top role playing without all that pesky role playing! =)
-Ben

Sent from my BlackBerry

Simple Javascript Date Validation

A quick Google search for "Javascript date validation" resulted in several solid hits, but each had custom functions and blocks of code to copy/paste ... it kinda made me go barf. I didn't want all that overhead just to check a variable to make sure it held a date value.

So here's what I came up with. I don't know if it will work in all situations, but it serves my purposes quite well:

if (!Date.parse(variable)) {
 alert("Not an acceptable date.");
 return false;
}

I hope it meets your needs as well =)

Enjoy!

Wintler Park

It turns out that we have our very own sand beach here in Vancouver!
-Ben

Sent from my BlackBerry

JavaScripting to find the difference between dates in hours, minutes, & seconds

Here's another little bit of JavaScript that I've found handy recently. It will calculate the difference between two dates and present the results in days, hours, and minutes. For the purposes of this post, I'm using today and Christmas day as the days that I'm trying to find the difference between.

 var today = new Date();
 var Christmas = new Date("12-25-2009");
 var diffMs = (Christmas - today); // milliseconds between now & Christmas
 var diffDays = Math.round(diffMs / 86400000); // days
 var diffHrs = Math.round((diffMs % 86400000) / 3600000); // hours
 var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
 alert(diffDays + " days, " + diffHrs + " hours, " + diffMins + " minutes until Christmas 2009 =)");

Create Multidimensional Associative Arrays in Javascript

Wooh, that title is a mouthful!

I've been using arrays more and more in my code and found that I enjoy the ease of being able to reference my multidimensional arrays by names instead of by number. That is to say

alert(myArray['row3']['column4']);

instead of

alert(myArray[2][3]);

The term 'associative' means using words instead of numbers to find data in your arrays.

Sure, sure. the second method is shorter and therefore more elegant, but I found myself getting tired of having to scroll around my script to find the array that I needed to work with and figure out which index related to which column. It was just a big pain in the rear.

I knew that it was possible to create a one dimensional array and use words to reference particular rows of the array, but I had never seen an example of how to accomplish this in a multidimensional array.

I dug around on Google for a while and here's what I came up with. I'm assuming that you have your own method of populating the array, I'm just going to show you the structure for how to create a basic multidimensional associative array with JavaScript:

var myArray = new Array();
myArray['row1'] = { 'col1':'BLARGH!!!', 'col2':'HONK!!!!' }
myArray['row2'] = { 'col1':'FOO!!!', 'col2':'BAR!!!!' }
myArray['row3'] = { 'col1':'FOUR!!!', 'col2':'GREGS!!!' }

document.write(myArray['row2']['col1'] + " - " + myArray['row3']['col2']);

This will produce the following as output:

FOO!!! - GREGS!!!

So hopefully my overuse of the keywords has helped rank this page high in the search algorithms and you've found my tip useful. Remember though, it's only really useful if you have a do while or for loop to populate the array.

Enjoy!