We all know JQuery is awesome right? That should be common knowledge by now. But, if you have ever created an app that makes use of several of the fantastic plugins available for JQuery, then you are going to end up with multiple tags for JQuery alone...not to mention any of your own external javascript files.

So, why is this a problem?

First of all, there is a little bit of bloat going on in this scenario. One could easily end up with over 200Kb of javascript in an assortment of these files. The other thing to consider is that the browser can only make so many concurrent connections to the web server (each external javascript file is one connection by the way) so add all of these files, a bunch of images, a couple .css files and we are making that user wait longer than really necessary.

Lets reduce the number of browser - to - server connections.

That seems easy enough. Instead of multiple external script calls:

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.jqModal.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.history_remote.pack.js"></script>

We could combine them all into one big javascript file and reference it:

<script type="text/javascript" src="/js/myBigScript.js"></script>

Well what happens when you want to make a change to one of the source js files? Or you need to change the order of how the files are included? Or maybe the javascript files needed vary based off of where you are in your app and you don't want to include ALL of the files every time? Thats where I think I can help...

I have just recently (as in today) finished up a custom tag to do just that. For lack of a better name I called it <cf_scriptalizer> Here is an example use of the custom tag.

<cf_scriptalizer 
	filePrefix="myscript"
		
	scriptalizerDirectory="/js" 
	
	scriptFileList="
		/js/jquery/jqModal.js,
		/js/jquery/jquery.js,
		/js/jquery/jquery.MultiFile.js,
		/js/jquery/jquery.blockUI.js,
		/js/jquery/jquery.corner.js,
		/js/jquery/jquery.form.js,
		/js/jquery/jquery.history_remote.pack.js,
		/js/jquery/jquery-dom.js
		"

	reload="true"
	>

• filePrefix (optional): prefix of the generated javascript file. "scriptalizer" by default
• scriptalizerDirectory: relative path to the desired output location
• scriptFileList: list of js files in the order you would include them
• reload (optional) - scriptalizer will inspect each js file for changes made since last access

More about reload: When/if you pass reload=true, <cf_scriptalizer> will inspect each of the source javascript files and if a change is detected, regenerate the combined javascript file.

Now that we have reduced the number of connections for external javascript files down to just one for this request, what can we do about reducing the size.

<cf_scriptalizer> takes an additional optional attribute of "minifierObject" as seen in the example below:

<cfset minifier = CreateObject("component","com.cfyuiminifier.cfYUIMinifier").init(path="/com/cfyuiminifier")/>

<cf_scriptalizer 
	filePrefix="myscript"
	scriptalizerDirectory="/js" 
	scriptFileList="
		/js/jquery/jqModal.js,
		/js/jquery/jquery.js,
		/js/jquery/jquery.MultiFile.js,
		/js/jquery/jquery.blockUI.js,
		/js/jquery/jquery.corner.js,
		/js/jquery/jquery.form.js,
		/js/jquery/jquery.history_remote.pack.js,
		/js/jquery/jquery-dom.js
		"
	minifierObject = #minifier#	
	reload="true"
	>

As you can see, I am passing in the object "minifier" that contains the method minify() that accepts a string of all of the comibined javascript and returns a string of the minified javascript.

This additional component was abstracted from the custom tag itself just in case the user has some issue with YUICompressor or wants to implement his/her own solution to compress/clean/minify/etc the source javascript.

In this example, the combined jquery files resulted in a 123.1 KB javascript file (pre-minification). But, once cfyuiminifier.minify() was run on the source, we ended up with a combined javascript file that was only 79.7 KB!

CAVEATS:

I have not yet run this on any live sites.

This is brand new code from my scribble pad, so please be aware you may encounter some bugs!

This was developed on my Linux machine and haven't tested it anywhere outside of this environment.

DOWNLOADS:

If anybody has any specific requests for features, or would like to contribute please let me know. I wrote this in an attempt solve a specfic need for some applications I have been working on, and ended up with something I thought might be beneficial to others. Please report back with any successes (or failures) with this tool...I am very interested in hearing about your experience(s).

Sproutbuilder is a new application that recently rolled out in a beta status. Basically it allows you to create widgets in a pretty nice Flex interface.

From their howitworks page:

Building a sprout is easy. Choose from dozens of pre-built templates or start from scratch. Drag-and-drop shapes, text, images, video, and more. Then add components such as slideshows, jukeboxes, and countdown clocks, as well as interactive services such as chat (Meebo), phone (Ribbit), fundraising (ChipIn), and more. Once you’ve got your content in place, use advanced editing and navigation tools to perfect your sprout.

Ultimately you end up with an embed code, like this

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="180" height="171" id="sUAAKe0cDAJqAatXf"><param name="wmode" value="transparent" /><param name="align" value="middle" /><param name="bgcolor" value="#ffffff" /><param /><param name="movie" value="http://farm.sproutbuilder.com/17661/load/UAAKe0cDAJqAatXf.swf" /><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://farm.sproutbuilder.com/17661/load/UAAKe0cDAJqAatXf.swf" width="180" height="171" wmode="transparent" align="middle" bgcolor="#ffffff" /></object>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/Jmx*PTEyMDE3OTA5NTUxMDcmcHQ9MTIwMTc5MDk1NTY5MSZwPTEyMDc*MSZkPTE4MjgyJm49.jpg" />

Now, to add it to your InstantSpot site...gotta tie that in right :)

Log in to the control panel and click on the Widgets section.

Then, once you are there, you can click to add a pod, reorder, deactivate, etc...

Then, on to the end result...go look at your Spot.

Great news to those of us who have been experiencing the illegalStateExceptions and the related corrupted/truncated cfquery calls. Adobe just released a hotfix for ColdFusion MX 7.02.

Get the fix here: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=kb401830

***EDIT***  New Link (thanks for the new link Rich): http://kb.adobe.com/selfservice/viewContent.do?externalId=kb402002&sliceId=1  

This was issued to resolve the strange behavior I blogged about here: Corrupted queries in ColdFusion MX 7

(Issue documentation from Adobe.com)

Issue

Adobe has resolved an issue with IllegalStateExceptions thrown intermittently by ModuleTag. The stacktrace generated is similar to the following:

java.lang.IllegalStateException
at coldfusion.tagext.lang.ModuleTag.doAfterBody(ModuleTag.java:439)
at cfindex2ecfm842540228.runPage(C:\InetPub\wwwroot\IllegalStateException\index.cfm:18)
at coldfusion.runtime.CfJspPage.invoke(CfJspPage.java:152)
at coldfusion.tagext.lang.IncludeTag.doStartTag(IncludeTag.java:349)
at coldfusion.filter.CfincludeFilter.invoke(CfincludeFilter.java:65)
at coldfusion.filter.ApplicationFilter.invoke(ApplicationFilter.java:219)
at coldfusion.filter.RequestMonitorFilter.invoke(RequestMonitorFilter.java:51)
...

The scenario where this problem occurs typically includes the following items:

1. Use of an application framework.
2. Use of Application.cfc and OnRequestEnd or OnSessionEnd method.
3. Calling methods on ColdFusion Components stored in shared scopes, often the application scope.
4. The use of custom tags.

Secondary issues caused by the IllegalStateException are often resolved by application of the patch. These issues have included query truncation and invalid parameter binding errors with cfquery and cfqueryparam.