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.

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?

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?