With the release of Internet Explorer 9 on Monday (Mar 14th), I've been going through my various websites to ensure everything is working as expected in the new browser. For the most part, I have seen no problems and, in fact, I have only seen benefits of new CSS3 and HTML5 standards in IE9 (rounded corners, woohoo!). But, this post is dedicated to the only issue I've found so far... the "bgiframe" plugin for jQuery.

The Perfect Storm

There's a specific scenario in which this plugin will fail:

1. Windows Vista (Windows NT 6.0) or Windows Media Center in Windows 7 (Media Center PC 6.0)
2. Internet Explorer 9
3. Document rendering in Standards Mode (as opposed to Quirks Mode)

Got it? Good.

Why does it fail?

IE9 on these versions of Windows has the following User Agent (or very similar):

 
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; MS-RTC LM 8 )
 

The part we're interested in is the Windows versions, "Windows NT 6.0" and "Media Center PC 6.0". Clearly, these are the OS version, not the browser version. Unfortunately, the bgiframe plugin's browser version check is a bit too rudimentary to realize this. Here's the code from the most recent version (June 2007) of this plugin:

 
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
    /* ...other stuff here... */
}
 

This RegEx test looks for the existence of "6.0" anywhere in the UA string. As you saw above, we have "6.0" in there twice, even though I'm using IE9.

So, we need to fix this little flub to make it very specific to our needs:

 
if ( $.browser.msie && parseInt($.browser.version) === 6 ) {
    /* ...other stuff here... */
}
 

In this way, we utilize jQuery's browser version sniffer (which has the added benefit of jQuery upgrades, if the sniffer ever gets updated) and we also ensure that we're targeting IE6 directly, not a random instance of "6.0" from any number of OS's or plugins which add to the UA string. After all, that's what this plugin is designed to do -- fix the IE6 z-index bug.

The other component of this is "Standards Mode" rendering. This bug didn't come to light for me until now because the website I work on renders in Quirks Mode (don't get me started on this!), so the Javascript engine was more forgiving. When in Standards Mode, IE9 yells about this line in the plugin:

 
this.insertBefore( document.createElement(html), this.firstChild );
 

I haven't taken the time to understand why, but it doesn't like "this.insertBefore()" in this use. But, that's for another day.

A Little Background

I am involved in a project with a major airline, which has allowed me to devote the majority of my coding effort to Front-End (HTML/CSS/JS) development. This position has really allowed me to hone my Javascript skills and it's been a lot of fun to dive into best practices — I'm a nerd and I love it.

However, as a ColdFusion developer, I've missed some of the functionality that CF has built-in. There's a great project out there for CF developers called CFJS, which mimics CF functionality in JS. You should really check out, but this project doesn't include something very useful: The URL scope.

The Problem

What's the best way to access URL parameters in Javascript?

CF has the URL scope, which is something always took for granted. But JS doesn't have this concept, so what can we do to solve this?

The Solution

In order to mimic the URL scope concept from CF, I created a tiny little function in Javascript to parse a URL and provide us with a URL scope.

* Note: This solution is definitely not limited to CF developers. I think it's very useful for all JS developers.

Do a Google search for "javascript url query" and you'll most likely find a function like this:

 
function gup(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
}
 

So, for example, if you have this URL:

http://blog.robobrien.com/?bob=123&frank=321&tom=213#top

You would get the value of "frank" like this:

 
/* Get value */
alert(gup('frank'));
 
/* Test for existence */
if (gup('frank') != '') {
	alert('Frank is alive! ' + gup('frank'));
}
 

It's popular. It works. It's dandy. But, can we make it better? I don't like that it re-parses the URL every time we call "gup()", I don't like that we have to test for an empty string to determine a parameter's existence (what if it exists, but is blank?), and I don't like that it uses RegExp (who can read that?!)

Here's the solution I created and have used in multiple projects:

 
(function(location) {
	var url = window.url = {},
		query = location.search.substr(1),
		arrParams = [],
		param = '';
		len = 0,
		i = 0;
	url._location = location;
 
	arrParams = query.split("&");
	len = arrParams.length
	for (i=0; i<len; i++) {
		param = arrParams[i].split("=");
		url[param[0]] = unescape(param[1]);
	}
})(document.location);
 

Bam! We're done. Errr... wait, what?

Rather than just saying, "Here's a function. Use it!" Let's dig a little deeper...

First, I want to tackle the structure of the function. It may look a little odd at first, but it makes our lives better. This is an anonymous, self-executing function. That means it does not have a name assigned to it and it will execute itself as soon as it's loaded. There are two reasons I do this.

1. I only need to run the function once (which is also a performance boost over gup), so there's no need to name it and add a variable to the global namespace.
2. It helps with minification.

Next, let's talk about the "var" declaration. This ensures that all of our variables are local to the function. This means they're not available outside of the function and, more importantly, we don't have to worry about outside variables conflicting with our local variables. This will also help with minification.

Finally, the meat of our function: Parsing the URL. Every major browser supports the Javascript's Location Object. It contains information about the current URL for your page. So, we pass "document.location" into our function and start tearing it apart.

The first thing we do is save the Location Object to a new variable, "url._location". This is done for no other reason than convenience. Since all of our parsed data will live in the "window.url" object, let's make the rest of it available here, too.

Then, we split the query string into pieces (an array) and loop over them to create dynamically named name-value pairs within the "url" object. By doing this, we make the URL params into native JS variables for easy access. That's all there is to it.

So, take our earlier example URL:

http://blog.robobrien.com/?bob=123&frank=321&tom=213#top

After using our new function, we can reference the URL variables more elegantly:

 
/* Get value */
alert(url.frank); 
 
/* Test for existence */
if ('frank' in url) {
	alert('Frank is alive! ' + url.frank);
}
 

If you use a development tool like Firebug (you are, right?), then you can go to your "Script" tab and on the right side, in the "Watch" tab, type in "url" and explore the new object we've created.

Here's a screenshot:

On Minification

Minification is a monster all its own. I've mentioned it a few times in this article, so I want to address it quickly, but I won't go into detail.

First, what is minification? You would have to be under a rock or brand new to JS if you haven't heard of it. It's a way to make your code smaller, but still retain its functionality. It's an important concept in website performance. Read its Wikipedia article for more info.

I write all of my JS in a way that will (hopefully) maximize the benefits of minifcation. Not only will you boost your site's performance, but the process of writing minifiable (that can't be a real word...?) code will help you write better, more solid code.

I use Google's online Closure Compiler to minify my code. I definitely minify all of my code before using it on a production website, but I also minify it as I develop, too. This way, I can see the effects of minification and tweak my code to squeeze more bytes out of my scripts.

Our new function, for example, minifies down to this:

 
(function(c){var d=window.url={},e=c.search.substr(1),a=[],b="";i=len=0;d._location=c;a=e.split("&");len=a.length;for(i=0;i<len;i++){b=a[i].split("=");d[b[0]]=unescape(b[1])}})(document.location);
 

The original code is 325 bytes and is now 196 bytes. That's nearly a 40% savings. Granted, it may not seem like much at this small scale, but it will definitely add up over the life of a project and a lot more JS.

Hopefully that gets you off on the right foot. I look forward to your comments.

Social Media

Recently, I've been working on a few projects that involve Twitter. Integration, promotion, brand building, etc. I've also become involved in a local Social Media Club to keep the pulse of the online community and stay on top of the latest trends. It's really given me a chance to use Twitter and, more importantly, watch how other people use Twitter. It's led me to a new project that I'd like to share with you...

A little back-story...

What's been really interesting to me, personally, is how I react to what other people are willing to throw out onto the web without much thought or hesitation. It's not always a good thing, but neither is it always a bad thing. It actually makes for some really interesting reading. Sometimes, I'll find something interesting and decide to create a connection. Other times, a random person will say something to nonsensical or irrelevant that I'll unfollow them on the spot. It's the ebb and flow of social interaction. It's how all people function in real life.

But what always piqued my curiosity was how common phrases are used throughout our society on a macro level. Not just online, although Twitter gives us a great way to instantly view them. They've manifested themselves in Twitter hash tags, but I think they should be a little more organic than that in order to open up the social interaction. Even at the loss of subject-specific focus. So, I started searching Twitter for a few common phrases and really liked what I found. They were intriguing. Emotionally charged. And yes, sometimes complete crap. All-in-all, very interesting. So, I launched a website to share those phrases (and more) with the world.

TweetPhrases.com

So, the whole point of this article is to launch my site, yea? The new site is TweetPhrases.com. It's simple. It's straightforward. It's an ever evolving, real time look at what people are saying on Twitter. Limited only, of course, by the use of a selected phrase. The presentation of the tweets is what I really love. It's bold and in your face. Boom!

Check it out. Let me know what you think. If there are other phrases I should consider, don't be afraid to suggest them. I'm viewing this as a social experiment, so I want it to be very organic.

Geek Love

I have to give a little love to ColdFusion, the language used to create TweetPhrases. I am, after all, a ColdFusion developer and I like to promote it whenever I get the chance. It's a great language that allowed me to pop up this site very quickly.

Finally, I would be completely remiss if I didn't acknowledge great inspiration from another website, Twistori. When I came up with my concept, I quickly realized there was something similar out there already. They have a great site and I want to thank them for my inspiration.

Twitter was founded in 2006. In a few short years, it has gone from a "micro-blogging" site of 140-character updates to an essential internet tool that allows real-time information sharing en masse. It's no wonder that it has been transformed from a "What are you doing?" service into a "What's happening in the world?" service.

Because of this fundamental shift in how Twitter is used, internet marketers are flocking to the service and promoting their products, their services, and most importantly (to them) themselves. Twitter has become a bot-filled, automated marketing machine. With a flood of self-promoting, easy-money-making, do-no-work-and-sit-at-home marketing "gurus" out there hocking "the next big thing", how are legitimate businesses supposed to differentiate themselves and properly promote their brand online? Even more to the point: How are local businesses supposed to cut through the clutter?

There's nothing inherently wrong with automation. In fact, I'm a big supporter of automating monotonous, time-consuming tasks that could be better performed by a computer. After all, I am a programmer. However, these bot-using, spam-creating, shameless internet marketers are a stain on Twitter's potential.

So, in trying to find a balance between legitimate marketing and revolting spam, the question becomes: "How does one take advantage of Twitter's opportunities without getting lost in the clutter?"

It's more obvious than you might think: Go Local.

As Twitter has grown in popularity, users have focused on its global reach. Most people who use Twitter want everyone to know everything about what they have to say. More followers, more friends, more people, more voices... more more more. In reality, the real gold mine is in focused & local marketing.

This is the X-marks-the-spot-treasure for local businesses, civic organizations, and non-profits. For any group that has a local interest, Twitter can become an essential part of any marketing plan.

Do you own a neighborhood deli? Use Twitter to find local people talking about where to go for lunch and tell them about your specials.

A bar or restaurant? Connect with people who want to go out on a weekend night and offer them coupons.

How about the local skating rink? Establish a rapport with locally-based skaters, hockey players, roller derby enthusiasts, etc. and entice them to join a team or attend a public session.

The trick is to find people interested in your business or industry, then connect with them to build your customer base. All on a local level. As a local business owner, you wouldn't waste marketing dollars on a TV ad halfway across the country. You're interested in the people of your community. And guess what - they're interested in you, too. All you have to do is open a line of dialogue to pull them in.

The shift from a global to a local mindset in Twitter marketing is in its infancy. However, a company that has realized the importance of this opportunity is Tweetmatix.

Full disclosure: I have worked as a consultant with Tweetmatix since its inception.

Tweetmatix is a company focused on making Twitter a local resource for small business -- and I have to say, they do it simply and elegantly. Realizing that most people still find Twitter to be a confusing and/or unknown service, Tweetmatix has successfully allowed a straightforward interface to act as an intuitive gateway to the behind-the-scenes power that Twitter has to offer.

It is not a simple-minded, autofollowing service like the many websites which have sprung up across the internet. Rather, Tweetmatix is completely focused on quality connections instead of a high quantity of followers that the other services promote.

The icing on the cake: Tweetmatix does it locally. Something I've yet to see any other service focus upon.

It's the difference between a scalpel and a spoon -- or to put it in marketing terms: This is the difference between running an ad in every newspaper across the country vs. adding a flyer to the neighborhood association welcoming basket. The reach is smaller and more focused. The fact is: People who are too far away from your business will never become your customer anyway, why waste the time and effort? You'll only dilute your message.

When you decide to market your business or group on Twitter, your goal should be to build quality connections to potential customers and maintain brand loyalty within that group. A smaller group who is willing to spend money with you is infinitely more valuable than an enormous group of worldwide followers who will never spend a penny on your products.

I'm excited for this shift towards local Twitter marketing. Actually -- more to the point -- I'm excited to see the shift away from spam-based marketing. I really believe in the power of Twitter; I just don't want to see that value go down the toilet as Twitter users pull away from the service on account of spam. Quality over quantity will help all legitimate marketing interests thrive well into the future.

As the ColdFusion community gears up for the release of ColdFusion 9, I'd like to take a step back for a moment to reflect on a great addition to CF 8 that probably gets overlooked quite a bit, since it's not a feature that would draw a lot of attention.

Enter: Compound Assignment Operators!

oooOOoooo... sexy, right?

A little history... Back in the day when I was cutting my teeth on C programming, I was able to manipulate variables with a few shorthand strokes of the keyboard. It was easy; it was elegant. To accomplish the same tasks in CF, I needed to be redundant in my typing. I hated it.

Then, as I was preparing a new write-up in my UDF Series, I realized that I used a compound operator in the function. I started to explain what it was all about and how/why to modify the function if you're still using releases prior to CF8. But, I also realized that I'm long-winded. That means that my explanation turned into a full-blown rant, worthy of its own post. So, here we are.

Examples

Let's dig right into some examples to help understand where we were before compound operators.

Here's an example of incrementing a value in CF7 (using cfscript):

 
myValue = myValue + 5;
 

...or like this (using tags):

 
<cfset myValue = myValue + 5>
 

To accomplish the same task in C (and most other languages):

 
myValue += 5;
 

The difference should be pretty obvious. The C style is clean, simple and elegant. CF7 is redundant.

Now, I'll admit that my code isn't always the cleanest or most elegant. But, it really bummed me out that I was required to type the variable name twice in ColdFusion. It may not seem like a big deal, but it all adds up over time when you consider all of the code that you output in a day... a month... a career.

Then comes CF8 and the world (or maybe just me) rejoices!

How it Works

Using a compound operator is so simple that it may not be immediately clear what's happening. In this example, we're using the compound operator "+=" to perform two concurrent actions on myValue; both the + and the =. It's nicely explained by Adobe this way: "The variable on the right is used as both an element in the expression and the result variable. Thus, the expression a += b is equivalent to a = a +b." [source]

Now that we've learned a new trick, we can use it in CF8+ like this:

 
<cfset myValue += 5>
 

Ahhh... that's reeeeal nice!

Note that I did use the compound operator in a tag. I've seen 2 other blog posts that explicitly state that you can use these operators only in <cfscript>. I'm not sure if they're outdated or just incorrect, but you can definitely use compound operators within tags. Of course, use within <cfscript> works as well.

Other Operators

In addition to, well, addition... you can also subtract (-=), multiply (*=), and divide (/=). You can also use it for modulus (%=) and concatenation of strings (&=). There's also incrementing & decrementing by 1 (++ and --). That's pretty spiffy.

You should check out the Adobe LiveDocs for a full explanation.

Bottom Line

The addition of Compound Operators brings CF inline with more traditional syntax of other languages. I was glad to discover it in CF8 and I'm hoping to spread the word to anyone who hasn't discovered this little gem.

Has this solution saved you time?

I'm a firm believer in sharing knowledge for the sake of helping someone else. No strings attached. However, we all have bills to pay and hosting to maintain. If you feel like this post has saved you even an hour of development time, would you consider donating that hour to me?

Starting today and continuing sporadically, I will release some of my UDF library to the public. None of it is ultimately earth-shattering nor are all of them unique (CFLib.org is a great collection), but I realized that I do have some decent functions or variations of existing functions that could be helpful to other developers.

To start things off, here's a very simple function that will return the last day of any given month. It's easy, straightforward and very useful. I'm surprised that it's not directly included in CF.

 
<cffunction name="LastDayOfMonth" access="public" returntype="date">
	<cfargument name="Date" type="date" required="yes">
	<cfreturn CreateDate(year(Arguments.Date),month(Arguments.Date),DaysInMonth(Arguments.Date))>
</cffunction>
 

In order to use it, just pass in any valid date value:

 
<cfset LastDay = LastDayOfMonth(now())>
<cfset LastDay = LastDayOfMonth("3/17/2009")>
<cfset LastDay = LastDayOfMonth("March 17, 2009")>
 

And you'll get a nice and tidy date value back:

 
{ts '2009-03-31 00:00:00'}
 

That's all there is to it. Like I said, nothing earth-shattering. Hopefully just helpful knowledge.

Has this solution saved you time?

I'm a firm believer in sharing knowledge for the sake of helping someone else. No strings attached. However, we all have bills to pay and hosting to maintain. If you feel like this post has saved you even an hour of development time, would you consider donating that hour to me?

As I was developing more Twitter features for app's integration this morning, my requests suddenly stopped responding. I thought to myself, "Crap, did I hit my rate limit again?" and "Did I get my IP blacklisted?" But, then I realized what was going on... Twitter is down!

I found a great site. I presume it checks Twitter's status in real time: IsTwitterDown.com Another great tool (for all websites) is IsThisSiteDown.com

Twitter's own status page shows that it's up. Lame.

What I think is most interesting about today's outage is the perception of feeling lost -- or maybe more appropriately, disconnected. Yes, I was in the middle of developing features that required Twitter's participation, but I there was still a sense of "I want to talk about Twitter being down, but where? Twitter is down!" It really made me realize that there's nothing that even closely compares to Twitter. Not for real-time communication en masse.

Twitter: Please don't go away again. You complete me.

UPDATE: What's even more interesting is that Facebook also seems to be having difficulties this morning. I wonder if it's an influx of traffic from would-be Twitter users.

UPDATE #2: There was mention of AT&T having issues today as well. I do have UVerse internet service and an iPhone, but I'm not sure what any problems I encountered were ISP-related. Can anyone confirm AT&T troubles?

UPDATE #3: I'm sure everyone knows by now, but Twitter is reporting a DOS attack. By the way, Chuck Norris doesn't have to attack you, his thoughts give you Denial-of-Sanity and you attack yourself.

Adventures of Twitter Integration

So, it turns out that the timing of my new blog couldn't be better. I actually have something valuable to share!

Recently, I was tasked with integrating Twitter into a website that I work on (RinkTime.com). I initially thought it would be a piece of cake because there's always another developer out there who has shared code for a similar concept. Imagine my surprise (and ultimately, frustration) when there wasn't any example or even good documentation to learn from.

Well, I finally figured it out and now I'd like to share my knowledge with the ColdFusion community.

The Goal

My goal was to integrate Twitter using ColdFusion and the OAuth protocol. Twitter has said that they want to switch over to OAuth in the future, so I want to develop my app in a way that won't be obsolete 6 months or a year down the road. Plus, I won't have to deal with the security of users' login credentials.

My first stop was the Twitter API wiki, which has a couple ColdFusion libraries for the Twitter API, but neither takes advantage of OAuth. I bet they're both great solutions, but the lack of OAuth was a deal breaker for me.

Then I found Twitter4J by Yusuke Yamamoto. It's a Java solution with OAuth support. Score!

The Authentication Process

This is where I had the most trouble. I just couldn't seem to get a straight answer on the step-by-step details for the authentication process. It's actually pretty straightforward -- if it's laid out nicely. Luckily, that's exactly what I've done here:

1. Within the application, generate a Request Token and a Request Secret.
2. Using Twitter's authorization URL, you send the user to Twitter's website so that the user can Allow or Deny access to your application.
3. Presuming the user allows access, they are then redirected back to your application based upon the Callback URL you specify when registering with Twitter.
4. Once the user is back on your site, you have to swap out the Request Tokens for Access Tokens. This is the magic step where you finally gain access to the user's Twitter account.
5. Store the Access Tokens for future use however you'd like -- I store them in a database. They never expire, although they can be rejected in the future if the user chooses, so make sure you do your error checking.
6. Each time you want to access the user's account, you pull out the Access Tokens and go to town.

Of course, there's a lot more that goes on behind-the-scenes, but for the scope of this write-up, that's all we really need to know.

The Solution

1. Register your application with Twitter here and keep the Consumer Key & Secret values handy.
2. Download Twitter4J
3. Install the JAR file in ColdFusion. You'll want to place it in an existing Class Path (like "C:\ColdFusion8\lib\") or you can set up a new Class Path in "CF Admin > Server Settings > Java and JVM". Then restart CF.
4. Create the Java object in your application with the Twitter values from Step 1:

    
   <cfset Twitter = createObject("java", "twitter4j.Twitter")>
   <cfset Twitter.setOAuthConsumer(TwitterConsumerKey,TwitterConsumerSecret)>
    

5. Now we start the authentication process, which is where things get fun. First, we generate our Request tokens to send to Twitter. We have to save the Request Token and Request Secret values for later use when the user is transferred back to the application. I've chosen to do so in Session variables, but this can be accomplished however you'd prefer.

    
   <cfset RequestToken = Twitter.getOAuthRequestToken()>
   <cfset Session.oAuthRequestToken = RequestToken.getToken()>
   <cfset Session.oAuthRequestTokenSecret = RequestToken.getTokenSecret()>
   <cflocation url="#RequestToken.getAuthorizationURL()#" addtoken="No">
    

6. At this point, the user is on Twitter's site and have the opportunity to Allow or Deny access.
7. After Allowing access, the user is transferred back to your site and you exchange the Request Tokens for Access Tokens:

    
   <cfset AccessToken = Twitter.getOAuthAccessToken(Session.oAuthRequestToken,Session.oAuthRequestTokenSecret)>
   <!--- Store the Access Tokens, via: AccessToken.getToken() and AccessToken.getTokenSecret() --->
    

8. Now, with Access Tokens in hand, you have full access to the account.

   Update: The Authorization process (4-7 above) is only required once per user in order to obtain the user's unique Access Tokens. Only Step 9 needs to be executed each time you want to access the account.

9. Finally, to use your new powers, you only have to instantiate the Twitter object, load up a users Access Tokens, and then have fun with all of the methods Twitter4J offers.

    
   <cfset Twitter = createObject("java", "twitter4j.Twitter")>
   <cfset Twitter.setOAuthConsumer(TwitterConsumerKey,TwitterConsumerSecret)>
   <cfset Twitter.setOAuthAccessToken(StoredAccessToken,StoredAccessSecret)>
   <cfset Twitter.updateStatus("My first custom Twitter update! Thanks @RobOBrien!")>
    

Obviously, this only scratches the surface of what you can do with Twitter4J and how you implement the authorization process. What I've explained is a bare bones solution. I've actually wrapped it up in some CFCs and integrated it into my larger application, but that's up to your own situation and techniques.

I hope that this will help prevent the frustration that I had to endure to get this working. If you have any questions, let me know, but I can't promise any true support on this. I'm just sharing the knowledge.

Many thanks to Yusuke for all the work he's put into this library.

Have fun!

Has this solution saved you time?

I'm a firm believer in sharing knowledge for the sake of helping someone else. No strings attached. However, we all have bills to pay and hosting to maintain. If you feel like this post has saved you even an hour of development time, would you consider donating that hour to me?

Absolutely nothing.

No, really... at least not about me. That's why I have never started a blog.

However, as of today, I now have my own blog on the internets. I'm doing so primarily to test out new software and stay up-to-date on what other people are using. As a Web Developer, I just can't afford to fall behind in the latest trends, right? Turning your back on the web for a minute will leave you in the dust!

Regardless, hopefully I'll come up with some random knowledge to share with the world, but the fact of the matter is that I probably won't. I just don't have that much to say.

I'll probably talk about ColdFusion Development or maybe even my Travel and Adventure around the country. But, certainty not anything which will be of any interest to anyone but me and (maybe) a few friends.

So, welcome to my blog. It's going to be one heck of a boring ride.