Well, I figured out a pretty easy way to do it with regular expressions (big surprise). First of all, we’ll need this extension method for regex escaping:

RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};

Then all we need is this little guy to do the rest:

var queryString = function(sParam) {
	var oExp = new RegExp("[\?\&]" + RegExp.escape(sParam) + "\=([^\?\&]*)", "ig");
	var aResult = oExp.exec(location.search);

	if (!aResult || aResult.length < 2)
		return null;

	return decodeURIComponent(aResult[1]);
};

As far as data parsing goes, that still ended up being fairly easy.

So, I recently decided that I want to spend more time immersed in the Linux/Unix world. Not too long ago, I saw my usage of OSX go up dramatically, and I’ve been surprised at how much I dislike it. I really wanted to like it, I swear, but I just found it awkward and bulky in totally different ways than Windows (which is awkward and bulky in ways I’m slightly more accustomed to). So I decided to install Ubuntu on a machine at home, since that’s the Linux distro that everyone is always raving about. I was very quickly amazed. Before I even downloaded Ubuntu and started setting up a CD/USB installer, I came across something called Wubi that piqued my interest: http://www.ubuntu.com/download/ubuntu/windows-installer

I’m sorry, did I hear that right? I don’t even need an install disc/drive? I can set up my new OS using a package installer that runs in my current OS? And it configures dual boot for me? Even if I don’t have any unpartitioned drive space? *face melt*

The only thing I really remember being daunting about Linux is setting it up, and this just made the first chapter of that story completely disappear. However, the other chapters (drivers, apps, plugins, etc.) were even easier than I had hoped too. Drivers were pretty much a non-issue as well, seeing that everything worked upon initial boot (I just needed a custom driver to enable 3D hardware acceleration on my video card, but that was a piece of cake). Apps were where I was really pleased though, since I didn’t have to open terminal one single time to get all my software installed and configured. I honestly found Synergy (a great tool, if you haven’t used it) much easier to set up on Linux than on Windows or OSX. Chrome was a little difficult to find in the universal package installer, but going to the Chrome web site found me a .deb installer that was just as easy anyways.

So what did I dislike? Well, the Wubi installer definitely has some less than ideal behavior. It’s a Python app, and has trouble with removable media, so it will bring up error messages when you run it saying the drive couldn’t be loaded. Don’t think it’s broken, fiddle with it, and kill the task (like I did). All you need to do is continue clicking OK until all the error messages are done; the program still runs as designed. After setup, getting Flash to work was harder than I would have liked. I think most of my difficulties stemmed from wanting to download installers and run them instead of using the universal package installer utility, so your mileage may vary, but I had to fiddle with it before getting it to work. What seemed to make it work right was installing browsers first, then installing the main Flash package. Don’t even try to download a Flash installer from the web; it will make you want to punch a baby in the face.

I was really pleased with this, and immediately set it up on my laptop too! So my laptop is now dual booting, and I used the System > Advanced system settings > Startup and Recovery dialog in Windows to make Ubuntu the primary boot option instead of Windows. Now I just need to format the drive on that home machine and reinstall with Ubuntu alone — I can’t believe how much better it’s gotten in the past few years!

Also, one last sidenote: Ubuntu One is a cloud drive solution that’s tightly integrated with the OS and gives you 5GB of storage for free! It also has native sync apps for Android, iOS, and Windows!

The only problem is the discontinuity of the user experience. There are a lot of new features of HTML5 that allow your site to work more like an “app” and less like a “page”, but I wanted to focus on one in particular that doesn’t get a lot of attention: application icons. You know that stupid favicon.ico file that you have to put at the root of the domain? And that you still have to have a link tag in the page head for the browsers who actually follow the standard? But then they don’t recognize any icon size between 16×16, because that’s all that’s in the standard? Well, thank the universe, the favicon is finally the red-headed step-child we always knew it was.

We now have a few different mechanisms for deploying these icons, and the best part: we can deploy multiple icons with different sizes!!! So we can finally have a cool little icon for the title bar, a spiffy medium icon for the home screen, and a mind-blasting hi-res icon for the launcher screen. Implementation is pretty easy too:

<link rel="shortcut icon" href="favicon.ico" />

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

As you can probably tell, this syntax is not the accepted standard, but you should still use it for one good reason: it’s already been proliferated. Other devices seeking to match iPhone feature sets have begun reading this metadata as well — remember, fortune favors the prepared. Alternatively, you can also change the rel attribute to apple-touch-icon-precomposed if you don’t want to bother with all the extra gloss and effects that an iPhone app icon is supposed to have. Instead, it will do a decent job applying the effects for you.

So let’s use that technique, along with the standard mechanism that allows us to actually supply different icon sizes.

<link rel="shortcut icon" href="favicon.ico" />

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<link rel="icon" sizes="57x57" type="image/png" href="app-icon-57.png" />
<link rel="icon" sizes="114x114" type="image/png" href="app-icon-114.png" />

And now we have a healthy mix of different icon sizes! I love it when a standard comes together!

^([^#\s]*)?\s*([^#\s]+\s*)*(#.*)?$

I know it might look like it’s more complicated than it needs to be, but this expression makes the entire parsing process incredibly simple. First of all, every line in a host file will match this expression (even the blank ones). Second, the capture groups are set up in a way that will make extracting the data elements simple: group 1 is the IP, each capture in group 2 is a host name, and group 3 is the comment.

Pretty simple, but makes the process pretty elegant.

Using an interface that defines all of the data operations, we can utilize delegates to streamline the caching process while still maintaining our façade pattern. That way, our caching mechanism can serve as a proxy, instead of just adding additional complexity.

First things first, we want to add our proxy method. Essentially, we’ll be able to call this method and pass the delegate that we want it to call for us. Instead of simply executing the method, we first need to check for it in the cache. After the value has been retrieved, we need to determine the TTL for the cache item and insert it (this part is using a custom CacheableAttribute class for annotation). So, here we go:

/// <summary>
/// Gets the data for the specified method call from the appropriate source. If the
/// data is already present in cache, the method will not be invoked. If the data is
/// not cached, but cacheable, the return value from the data layer provider will be
/// cached.
/// </summary>
/// <typeparam name="T">The return type of the data method.</typeparam>
/// <param name="oDataLayerFunc">The IDataLayer method from which data will be retrieved.
/// This method can be specified by a function pointer, delegate, or lambda expression.</param>
/// <returns>The value of the data method.</returns>
public T Get<T>(Func<IDataLayer, T> oDataLayerFunc)
{
	//Get the optimized cache key from the function below
	string sKey = GetCacheKey(oDataLayerFunc);

	//Determine if the data is cacheable based on whether or not the type has the Cacheable
	//attribute applied to it
	TimeSpan oLifetime = CacheableAttribute.GetLifetime(typeof(T));

	//If the data is cacheable, use the delegate's key to search cache for it
	if (oLifetime != CacheLifetime.None)
	{
		object oCacheValue = Cache[sKey];

		//If the value was found in cache, don't execute the data layer method
		if (oCacheValue != null && oCacheValue is T)
			return (T)oCacheValue;
	}

	//If the value couldn't be found in cache, invoke the data layer method
	T oDataValue = oDataLayerFunc.Invoke(DataLayer);

	//We also now want to look for a more specific cacheable attribute
	oLifetime = CacheableAttribute.GetLifetime(oDataValue);

	//If the data is cacheable, store the new value
	if (oLifetime != CacheLifetime.None)
	{
		Cache.Insert(sKey, oDataValue, null,
			DateTime.Now.Add(oLifetime), Cache.NoSlidingExpiration);
	}

	//Return the result
	return oDataValue;
}

I know, it’s kind of crazy. But wait, there’s more! That GetCacheKey method I referenced, how are we actually going to implement that? We need to cache the value by what method is being called and what arguments are being passed to it. And still, we want it to be as automatic as possible, so that we don’t create a maintenance nightmare down the line.

The solution requires a bit of reflection, but it doesn’t go too deep:

/// <summary>
/// Gets the cache key that should be used to identify the specified delegate.
/// </summary>
/// <param name="oFunction">The delegate function to identify.</param>
/// <returns>A string containing a unique identifier for the delegate and its
/// arguments.</returns>
public static string GetCacheKey(Delegate oFunction)
{
	//To make this easier to visualize, there are several comments along the way
	//referring to what the current key is when the StringBuilder is updated.
	//These all assume that the delegate is a call to IDataLayer.GetRegions(4)

	//The delegate will always be a member of IDataLayer, so all we need to
	//identify the method is its reflected name
	StringBuilder sbKey = new StringBuilder();
	sbKey.Append(oFunction.Method.Name);
	//Current key: <GetRegions>b__8

	//If we can identify information in the target object, these are essentially
	//query parameters/arguments -- they should be part of the cache key
	if (oFunction.Target != null)
	{
		//Get metadata about the target object and its fields
		object oTarget = oFunction.Target;
		Type tTargetType = oTarget.GetType();
		FieldInfo[] aMembers = tTargetType.GetFields();

		//All of the arguments must be added to the key
		//i.e. GetRegions(4) should have a different cache key than GetRegions(1)
		foreach (FieldInfo f in aMembers)
		{
			//Add a delimiter between arguments
			sbKey.Append(';');
			//Current key: <GetRegions>b__8;

			object oValue = f.GetValue(oTarget);
			//If the argument has a value, add it with delimiter characters escaped
			if (oValue != null)
			{
				sbKey.Append(oValue.ToString().Replace(";", @"\;"));
				//Current key: <GetRegions>b__8;4
			}
		}
	}

	//The compiled string is a unique method call identifier
	return sbKey.ToString();
	//Final key: <GetRegions>b__8;4
}

I know, you probably feel like you just watched Inception for the first time. But if you examine/test it until you figure out how it all works, I think you’ll see the elegance of it (or at least the reason why I have insomnia).

So here is what I could come up with, assuming that it should only work with US phone numbers:

1?[-(). ]{0,2}(\d{3})[-(). ]{0,2}(\d{3})[-(). ]{0,2}(\d{4})

I think this is a pretty good level of accuracy. It’ll support many formats, and the capture groups will also break up the area code, prefix, and line number for you. Now all I need to do is learn every other phone number format in the world…

Essentially, I just want to have easy access to load and save my options, without making some big process out of it. Also, since the options pages in Chrome don’t have save buttons, I’d ideally like to do the same; edit a setting and it’s automatically saved. So here’s a simple version of implementing such a device:

var options =
{
	//It's good to have default options, in case a setting doesn't yet exist
	_default: { },
	get: function()
	{
		var opt;
		//If they have options saved, load them
		if (!localStorage["options"])
			opt = { };
		else
			opt = JSON.parse(localStorage["options"]);

		//For any option that doesn't have a value, we'll just load in the default
		for (var o in options._default)
		{
			if (!opt[o])
				opt[o] = options._default[o];
		}

		return opt;
	},
	set: function(optionsFunction)
	{
		var opt = options.get();

		//this next line is where a good idea turns into pure genius
		var result = optionsFunction.call(opt);

		//Now just wrap it up, save it, and return the result
		localStorage.options = JSON.stringify(opt);
		return result;
	}
};

Did I blow your mind? Is your face melted? Of course not, because I haven’t yet shown you how fully awesome this is in implementation:

//Get an option value
$("#name").val(options.get().itemName);

//Set an option value
options.set(function() {
	this.itemName = $("#name").val();
});

That’s right — one simple operation to get and set options. It would obviously get a little longer than this when loading multiple values, but the structure scales nicely:

options.set(function() {
	this.itemName = $("#name").val();
	this.itemQuantity = $("#qty").val();
	this.itemPrice = $("#price").val();
});

I can think of no better way to describe this than with a quote I hold near and dear to my heart: “Good is awesome, but awesome is TOTALLY AWESOME!”

Say you’d like to create a spreadsheet to determine special facts about your stock portfolio (estimated taxes, net profit/loss, etc). Wouldn’t it be nice to be able to lay it out exactly how you want to in a spreadsheet? When I got to the part about the current quotes, I was ready to put on my scripting trousers, but it turned out to be totally unnecessary. All I needed was this:

=GoogleFinance("GOOG", "price")

How awesome is that?! For more details on this function, look at the function details or the example page. Also, a quick sidenote: there are other data services available through formulas.

Now all I needed was a vesting schedule for stock plans, to have this be even more useful! By creating a simple table with dates and vesting volume, I was then able to write a VLOOKUP formula to automatically determine my current number of shares! Nothing fancy, see:

=VLookup(Now(), A2:B22, 2, true)

In case that’s not 100% clear, all I had to do was put my vesting schedule in a table (A2:B22) with the vesting date in the first column and the volume in the second column (thus the 2 in the third argument). The use of Now() in the first argument and true in the fourth argument are to make sure that we look up the volume that corresponds to the current date (it doesn’t have to match, just be the closest without going over).

I love automation, especially when it helps me quickly view information that I shouldn’t need to calculate on my own (that’s what computers are for). Hope it helps you too!

For those of you who might not be familiar with the idea of toast notifications, it’s an elegantly simple idea: a box with the notification text fades in, it stays for a moment, then it fades out. No dismissing, no modaling, no ambiguity.

Well, doing this in JavaScript really isn’t all that hard. In fact, with jQuery, it’s downright simple.

Here’s my JavaScript:

	function toast(sMessage)
	{
		var container = $(document.createElement("div"));
		container.addClass("toast");

		var message = $(document.createElement("div"));
		message.addClass("message");
		message.text(sMessage);
		message.appendTo(container);

		container.appendTo(document.body);

		container.delay(100).fadeIn("slow", function()
		{
			$(this).delay(2000).fadeOut("slow", function()
			{
				$(this).remove();
			});
		});
	}

And here’s my CSS:

.toast {display: none; position: fixed; z-index: 99999; width: 100%; text-align: center; bottom: 2em;}

.toast .message {display: inline-block; color: #fff; padding: 5px; border-radius: 5px; box-shadow: 2px 2px 2px #666; -webkit-box-shadow: 2px 2px 2px #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .8em; background: #282324; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #554434), color-stop(1, #282324));}

Easy, clean, and awesome! Here’s a demo.

Try Me

First of all, this may sound obvious, but remember to upgrade to the appropriate version of jQuery as well (I used 1.6.2 to correct my issues). I hadn’t realized that my previous version was even out of date, but it was causing some major issues on any page with checkboxes.

Also on the subject of checkboxes, there’s a bug in the way they’re handled. Whenever you have multiple checkboxes with the same name (which is perfectly legal, useful, and awesome), it will make them mutually exclusive. I thought this was funny, because if I had wanted radio buttons, I would have asked for radio buttons. Some Googling ran me into this article: https://github.com/jquery/jquery-mobile/issues/1944

The fix mentioned there works great. Here’s a snippet of the jQuery file after modification:

// input set for common radio buttons will contain all the radio
// buttons, but will not for checkboxes. clearing the checked status
// of other radios ensures the active button state is applied properly
if (inputtype === "radio")
  self._getInputSet().not(input).prop('checked', false);
self._updateAll();
return false;


Other than that, it was a pretty easy upgrade. jQuery Mobile rocks, and I can’t wait to see what they bring in the future!