Flog Blog

Playing with YUI

Tue, 28 Jul 2009 15:59:23 GMT

In an effort to further my JS knowledge, I started playing with a new javascript framework. I've played with a few in the past, but I don't think I'd given YUI a fair shake. I've used some the CSS parts of the framework and their JS compressor is probably the best one I've used. The one missing element was my lack of real world use of the JS part of it. I was recently presented an opportunity to give it a try, so I decided to see what it's all about.

I decided that the best way for me to figure out if I can get used to using it would be to take some old code and port it to YUI. My first test was to see if I could port my img onerror handler into YUI. The point of the error handler was to replace broken images on the page with a known working image. The problem was figuring out how to do it unobtrusively and figuring out when to check for image errors.

When shifting my jQuery thought process to a YUI thought process, I really only needed to learn about a few of the YUI objects. Since jQuery has a magic $ object that knows everything, it became a matter of figuring out which YUI objects replace the different jQuery functions. The YUI docs made it quite easy.

Below is the code for my readjusted img error handler. A working example can be seen here.

< script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></ script> < script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></ script> < script src="http://yui.yahooapis.com/2.7.0/build/selector/selector-min.js"></ script> < script type="text/javascript" > function errorReplace(arg){ arg.setAttribute('src', '/weblog/assets/content/041509/images/funny_monkey.jpg'); } YAHOO.util.Event.on(window, "load", function() { yimages = YAHOO.util.Selector.query('img'); for(var imgs in yimages) { var i = yimages[imgs] if((typeof i.naturalWidth != "undefined" && i.naturalWidth == 0 ) || i.readyState == 'uninitialized' ) { errorReplace(i); } }; }) </ script>

So in this case, I just had to learn how to select elements and how to attach events to elements. Selecting was handled by the query function of the YAHOO.util.Selector object. "$(object)" simply becomes "YAHOO.util.Selector.query(object)".

Event binding was handled by the on function of the YAHOO.util.Event object. "$(object).bind(event,function)" simply becomes "YAHOO.util.Event.on(object,event,function)".

I was quite surprised by how easy the documentation was to use and how quickly I was able to write a few lines of code.

cfoutput, what are you doing?

Thu, 25 Jun 2009 17:55:08 GMT

When Seb Dugan pointed out in his blog that cfoutput can only accept the name of a query when looping over a variable, it got me thinking about the inner workings of a query based cfoutput. Is the recordset local to the loop or does it mutate the passed in recordset? I tried the following to see what would happen. I'm adding a row to the query with every loop, then adjusting the value of the next row. I put a maxrows attribute on the query just in case it tries to run infinitely.

<cfquery name="getContent" > SELECT Top 5 0 as id FROM tblname </cfquery> <cfoutput maxrows="20" query="getContent"> <cfscript> queryAddRow(getContent) ; getContent[ 'id' ][ getContent.currentrow +1 ] = 2200+getContent.RecordCount ; getContent[ 'id' ][ getContent.RecordCount ] = 1100+getContent.RecordCount ; writeOutput("#getContent.currentrow#:#id#<br>"); </cfscript> </cfoutput> ----------------------<br> <cfoutput query="getContent">#getContent.currentrow#:#id#<br></cfoutput>

The output looks like this.

1:0
2:2206
3:2207
4:2208
5:2209
----------------------
1:0
2:2206
3:2207
4:2208
5:2209
6:2210
7:1107
8:1108
9:1109
10:1110

So the loop definitely changes the query variable, but the maxrows get set before anything happens. If the query doesn't have enough rows compared to "maxrows" when the loop starts, then the maxrows attribute becomes the size of the recordset. This seems similar to Barney Boisvert's issue with cfloop.

But wait, there's more. To add to my confusion, it appears as though the recordset in the loop isn't really getting mutated. It all depends on how you try to mutate the recordset. The following code should use a cfquery to delete rows from the record set.

<cfoutput query="getContent"> <cfscript> currentId = getContent[ 'id' ][ getContent.RecordCount ] ; writeOutput("#getContent.currentrow#:#id#<br>"); </cfscript> <cfquery dbtype="query" name="getContent" > SELECT * from getContent WHERE id <> #currentid# </cfquery> </cfoutput> ----------------------<br> <cfoutput query="getContent">#getContent.currentrow#:#id#<br></cfoutput>

The result looks like this.

1:0
1:2206
1:2207
1:2208
1:2209
1:2210
1:1107
1:1108
1:1109
1:1110
----------------------

So even though the recordset is empty when it leaves the loop, it still has values from inside the loop. What's even more interesting to me is that the current row is always 1. I'm not sure what to make of this.

Rhino on Railo

Mon, 18 May 2009 20:50:38 GMT

After reading about Barney Boisvert's CFGroovy, I was inspired to try to get Rhino running on Railo (I actually tried CF8 first, but couldn't get it to do anything useful). For those that don't know, Rhino is an open source implementation of JavaScript written in Java. I've never actually used the Rhino implementation that comes with Java 1.6 or any of the JSR 223 interfaces, so this looked like it could be a fun experiment.

To start, I downloaded Barney's CFGroovy project from his SVN repository. The actually CFGroovy jar isn't needed, but the classloader and the taglib are. Once I put the taglib in the appropriate location, I was able to get a hold of Rhino by adding lang="js" (or javascript, rhino or ecmascript) to the script tag.

While that part was easy, the part that I had difficulty figuring out was how to deal with the CF variables in Javascript. This would have been easier if I could cfdump in JS, but I just used the tra and see method. First, I made the incorrect assumption that I could use dot notation to access members of the CF objects. After I realized that was returning nulls, I tried bracket notation. That also didn't work. What I realized is that the objects that I was dealing with weren't actually javascript objects, they were still CF (or Java, depending on how you want to look at it) objects. It seems as though I could only access objects using get/set methods .

<g:script lang="javascript" > // assuming that variables.myArray already exists var g = variables.get('myArray'); g.set(g.size(),{'test':1}); g.set(g.size(),[1,2,3]); </g:script>

There was more fun trying to get the JS back into CF. It seems as though the objects make it back to CF as type "sun.org.mozilla.javascript.internal.NativeObject" for the JS object and "sun.org.mozilla.javascript.internal.NativeArray" for the array. I had to do the following trickery just to get the data out of these. The get methods for both types are expecting an object of type "sun.org.mozilla.javascript.internal.Scriptable" as the second argument.

<cfdump var="#variables.myArray[0].get('test',variables.myArray[0])#" /> <cfdump var="#variables.myArray[1].get(0,variables.myArray[1])#" />

This didn't seem very fun to me at all. I think the next step is to take the cfgroovy wrapper and alter it so that the variables getting passed back and forth get converted to JS arrays and objects in the JS and then back to CF arrays and structs when they return. I couldn't get any of this to work in CF8 because of an array out of bounds exception in the JS set method, but that's another thing. I've already wasted enough time doing this, so I'll save those issues for another day.

Goodbye sIFR

Fri, 15 May 2009 18:12:42 GMT

A few weeks ago a colleague of mine pointed me to a relatively new replacement for sIFR, so I thought I would try it out and see how it worked. It's called Cufón and it seems to work much better than sIFR. Here are some of the advantages:

No Flash Needed - Not for the end user and I don't need it to make my fonts. I just upload a font to their generator
Less http requests - sIFR makes a request to the server for a Flash piece to replace the text, it does that for every block of text it replaces.

Of course it does have it's faults, particularly:

Text is not selectable - At least not in any browser that doesn't call itself IE
Some missing features - Things like text decoration don't work in IE

I replaced all the h1, h2 and h3 tags on the site with cufón fonts in only a few minutes and so far I think it looks great.

My math should not be trusted

Fri, 15 May 2009 15:27:31 GMT

After reading a blog post on codinghorror.com (http://www.codinghorror.com/blog/archives/001266.html), I thought about the Kember hash script that I wrote a few days ago. The script I wrote would likely never find the identity hash because it makes use of converting an int into a hexidecimal string. I think that a CF int is just a signed Java Integer, so at most it can only go up to (2^31)-1 or 2,147,483,647. So in base 16 it would go to 7FFFFFFF, which is 24 digits short of making it to a full md5 hash result. I didn't write the script to actually try to find the Kember hash, mostly because I don't think it can be found in a reasonable amount of time. I wrote in a very short amount of time that morning, so don't take it seriously.

Coldfusion method initialization

Thu, 14 May 2009 18:33:34 GMT

I was playing around with CF to see if it was possible to have a function change it self after it has been called. This something that I have done in JS a few times, like so.

var test = function() { var a = 1; test = function() { return ++a; } return a; }

Doing this allow me to initialize a function, then change the behavior for the next time that it is called. In the above example, the function keeps track of a variable locally, but doesn't make it globally exposed to the page. While trying to do this in CF, I was think of using the idea to build some way of caching variables. To get started I just tried creating an method that just creates another object and saves it to be used later. I realize that I can do the following, but I thought it would be fun to try something different.

CF doesn't allow functions to be created inside other functions like JS does, so I thought I could trick it by creating another function, then replacing the original function with the other function dynamically. Here's what I tried. The first function is what I want it to do after the first time it is run. The second is the function that should initialize the method.

<cffunction name="getOtherObjectAfterSet" output="true" access="private" > <cfset variables.instance['otherobject'].Something += 1 /> <cfdump var="#variables.instance['otherobject']#" label="i came from getOtherObjectAfterSet"> <cfreturn variables.instance['otherobject']> </cffunction> <cffunction name="getOtherObject" output="true" access="public" > <cfset var local = structNew() /> <cfset local.other = createObject("component", 'otherobject').init() /> <cfscript> local.other.Something = 1; local.other.doSomethingComplicated('!!!'); local.other.doSomethingDifferent(); </cfscript> <cflock name="otherobj" timeout="10" type="exclusive"> <cfset StructInsert(variables.instance,'otherobject', local.other,true) /> </cflock> <cfset this.getOtherObject = getOtherObjectAfterSet /> <cfdump var="#variables.instance['otherobject']#" label="i came from getOtherObject"> <cfreturn variables.instance['otherobject']> </cffunction>

I tried this in Railo and CF8 and it worked. Not sure when I would actually use this, but it was good to know that I could.

Railo EQ seems wrong

Wed, 13 May 2009 17:54:18 GMT

It appears as though Railo is doing something wrong. The following should not return true, but it does in Railo. Submitting bug...

<cfoutput>#"0000000000000000000000000696E433" eq "5625627186710640143152E540486175"#</cfoutput>

Kember Identity search

Wed, 13 May 2009 16:03:43 GMT

After reading about the Kember identity hash, I decided to see if I could write something to find it. My attempt will more than likely never find it since it is just starting from 0 and going up until it finds it, but I thought I would give it a try anyway.

The basic idea of it is that it makes ajax calls to the server and keeps calling the server until it finds the solution. It starts at 0, then keeps incrementing. It would probably be easier to find it by generating random numbers, but I was trying to avoid checking the same string twice. I set it up so that I can tell it where to start, how many open http requests it should have and how many tests each http request should make. It also has a link to make it stop. Below is the code. I'm not very proud of it, but I slapped it together very quickly and have had it running all morning. The file name should be coldfusion-Fojas.cfc

<cfcomponent>  <cffunction name="getKemberIdentity" access="remote" output="true" returntype="struct" returnformat="JSON" hint="I try to find a string that when hashed, will return itself."> <cfargument name="startFrom" type="numeric" required="false" default="0" /> <cfargument name="timesToTry" type="numeric" required="false" default="1000" /> <cfset var kemberResult = structNew() /><cfset var randstr = "" /><cfset var hashstr = "" /><cfset var i = "" /> <cfsilent> <cfloop from="#val(arguments.startFrom)#" to="#val(arguments.timesToTry) + val(arguments.startFrom)#" index="i" > <cfset randstr = ucase(FormatBaseN(i,16))> <cfset randstr = RepeatString("0",32-Len(randstr))&randstr> <cfset hashstr = hash(randstr, "MD5", "UTF-8") /> <cfif randstr.Equals( hashstr)> <cfset kemberResult.str = "#randstr# = #hashstr# - matched!!!!" /> <cfset kemberResult.success = 1 /> <cfreturn kemberResult /> </cfif> </cfloop> </cfsilent> <cfset kemberResult.str = "No! (startFrom: #arguments.startFrom# ): #randstr# - #hashstr#" /> <cfset kemberResult.success = 0 /> <cfreturn (kemberResult) /> </cffunction> <cffunction name="successalert" access="remote" output="true" > <cfargument name="str" type="string" required="true" /> <cfdump var="#arguments.str#" /> </cffunction> <cffunction name="displayPage" access="remote" output="true" > <cfargument name="startFrom" type="numeric" required="false" default="0" /> <cfargument name="timesToTry" type="numeric" required="false" default="200000" /> <cfargument name="openrequests" type="numeric" required="false" default="8" /> <cfset var local = structNew() /> <cfoutput> <cfsavecontent variable="local.retVal" > <html> <head> < script > var tried=#arguments.timesToTry#, starton=#arguments.startFrom#,keepgoing=1; var request = function(divid) { var that = this; this.divid = divid; this.xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); this.readyChange = function(){ if ( that.xhr && that.xhr.readyState == 4 && that.xhr.status == 200) { var response = that.xhr.responseText; response = window["eval"]("(" + response + ")"); if(response.SUCCESS) { window.location = 'coldfusion-Fojas.cfc?method=successalert&success='+response.STR; } else { document.getElementById(divid).innerHTML = response.STR; setTimeout(function(){that.makeRequest(starton, tried)},200); starton += (1*tried); } } }; this.xhr.onreadystatechange = this.readyChange; this.makeRequest = function(startFrom,timesToTry){ if(keepgoing) { this.xhr.open('get','coldfusion-Fojas.cfc?method=getKemberIdentity&startFrom='+startFrom+'&timesToTry='+timesToTry); this.xhr.send(null); } } } var r = []; for(var i = 1;i<=#arguments.openrequests#;i++) { r[i] = new request('d'+i); r[i].makeRequest(starton+(tried*(i-1)),tried); } starton += (#arguments.openrequests#*tried); </script> </head> <body> <cfloop from="1" to="#arguments.openrequests#" index="local.i" > <div id="d#local.i#"></div> </cfloop> <a href="##" onclick="keepgoing=0;">stop the madness</a> </body> </html> </cfsavecontent>#local.retVal# </cfoutput> </cffunction> </cfcomponent>

Using CF to detect mobile browsers

Mon, 11 May 2009 17:52:42 GMT

Mostly for my reference, I'm writing about a ColdFusion function that can be used to test if a user is browsing with a mobile device. This function can be adjusted depending on what needs to be done, but it treats iPhones, Android and Opera Mini as regular web browsers.

Rethinking img onerror

Mon, 27 Apr 2009 16:11:38 GMT

After reevaluating a previous attempt at preventing broken images on pages, I decided on a different solution. The image should have a readyState if we are using IE and a naturalwidth for other browsers, so I used these to test if the image was there.

I tested this in IE7, FF3, Chrome 2 and Safari3. This time I loop through all the images after the window is done loading (not after dom is done). By waiting until the window is done, I can be sure that all images are done loading.

The code can be seen working here.

function errorReplace(arg){ $(arg).attr('src', 'images/funny_monkey.jpg'); } $(window).bind('load', function() { $('img').each(function() { if((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0 ) || this.readyState == 'uninitialized' ) { errorReplace(this); } }); })

Railo allow extending a cfc with a relative path

Thu, 16 Apr 2009 15:51:50 GMT

While bored, I just ran a quick test in Railo to see if I can can extend a cfc that was sitting in a parent directory and it turns out I can. I tested this by having a component extend another component using "../" in the extends attribute.

In the parent object "/ExtendMe.cfc":

<cfcomponent name="ExtendMe"> <cffunction name="CallMe" > <cfreturn "I am Your Father."> </cffunction> </cfcomponent>

In the child object "/child/Object.cfc":

<cfcomponent name="object" extends="../ExtendMe"> <cffunction name="Test" access="public" output="false" returntype="any"> <cfreturn this /> </cffunction> </cfcomponent>

Then a simple template to display my results:

<cfset test = createObject('component','child.Object')> <cfdump var="#test.callme()#"><br>

This gives me this result.

The elusive img onerror event

Wed, 15 Apr 2009 14:14:15 GMT

While reading a quickie post from Raymond Camden at InsideRIA about using jQuery to fix broken images (http://www.insideria.com/2009/03/jquery-quickie---broken-images.html), I became a little confused that it actually worked. It relies on the error event that is fired by an image being intercepted by jQuery to know when to replace a broken image. The problem that I was seeing is that if the event gets attached when the DOM is ready, wouldn't it be possible for the image to fire its error event before the DOM is ready?

I tested this by creating the following file. I used a sleeping thread to cause the page load to take longer than normal. The first broken image should finish its request before the page has been completely downloaded. I tried replacing the images with an inline script as well because I couldn't think of any other way of fixing it.

<html> <head> <title>Image Test</title> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> < script> function errorReplace(arg){ $(arg).attr('src', 'images/funny_monkey.jpg'); } $(document).ready(function() { $('img').error(function() { errorReplace(this); }); }); </script> </head> <body> <div id="content"> <p> This is some content. Here is the first image... </p> <p> <img src="images/monkeyvk.gif" > </p> <p> Another paragraph, first broken image... </p> <p> <img src="images/test-bad.jpg"> </p> <p> Another paragraph, another broken image... this time replace with inline error </p> <p> <img src="images/test-badstill.jpg" onerror="errorReplace(this)"> </p>  <cfflush> <cfset thread = CreateObject("java", "java.lang.Thread")> <cfset thread.sleep(500)> <p> Good image. After a delay </p> <p> <img src="images/monkeyvk1.gif"> </p> <p> Another paragraph, another bad image. </p> <p> <img src="images/test-badagain.jpg"> </p> <p> Last paragraph, another bad image. inline replace </p> <p> <img src="images/test-badagainstill.jpg" onerror="errorReplace(this)"> </p> </div> </body> </html>

You can see the results here, http://www.fojasaur.us/weblog/assets/content/041509/test.cfm

As you can see the first broken image never gets replaced because it has already fired its error before jQuery gets a hold of it. In addition to the jQuery way not working if the error happens before DOM load, it also doesn't work in IE at all. It appears as though using the inline onerror is the only way to get it to work consistently.

Dont put all scripts at the bottom

Thu, 09 Apr 2009 16:09:28 GMT

While looking at Hal Helm's post on learning jQuery, I though about how the "Yahoo! Best practices for Speeding Up Your Web Site" may be making developers do things without thinking about it. I'm guilty of thinking that putting all the scripts at the bottom makes your website faster, but then I ran into a case where it made it seem slower.

The case where the issue occurred was when I was using swfobject to replace an image on the page with a swf. When the scripts were at the bottom, swfobject wouldn't replace the image until the js at the bottom of the page told it to do so. When it was at the top, the script blocked the page load, but as soon as the swf was inserted into the page before the image could be seen.

Here's what I mean. I created the following test files to prove my point. The first file is the js that tells swf object what to do.

// loader.js (function(){ swfobject.embedSWF( "http://www.youtube.com/v/h5X4TSbGreA&hl=en&fs=1", "flash", "560", "340", "8.0.0", null, null, {wmode: "transparent"} ); })();

I created a cfm file to simulate a long load time. This will be included as a js include before the swf object config.

 <cfset thread = CreateObject("java", "java.lang.Thread")> <cfset thread.sleep(50)> var a=1

Then I have 2 test pages, one with the scripts at the top, the other with the scripts at the bottom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home Page</title> </head> <body> I have scripts at the bottom <div id="wrapper" ><a name="top"></a> <div id="flash" ><img id="alt-img" src="holder.jpg" alt="Home Flash" style="height:340px;width:560px;" /></div> </div> < script type="text/javascript" src="swfobject.js" ></script> < script type="text/javascript" src="blocker.cfm" ></script> < script type="text/javascript" src="loader.js" ></script> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home Page</title> < script type="text/javascript" src="swfobject.js" ></script> < script type="text/javascript" src="blocker.cfm" ></script> < script type="text/javascript" src="loader.js" ></script> </head> <body> I have scripts at the top <div id="wrapper" ><a name="top"></a> <div id="flash" ><img id="alt-img" src="holder.jpg" alt="Home Flash" style="height:340px;width:560px;" /></div> </div> </body> </html>

You can see it all slapped together here (scripts at bottom) and here (scripts at top). While the page appears to load slower for scripts on top page, the user doesn't get the placeholder image displayed. Since the place holder is there for users without JS enabled, it could get confusing if they see the placeholder, then get the real thing a little bit later. Some may have the opinion that it's fine if the image loads, but it just bothers me.

Coldfusion Implicit Structs are confusing

Tue, 07 Apr 2009 18:39:40 GMT

While trying to comprehend why CF allows stupid code like the code found here in Ben Nadel's Post, I realized that I could probably make CF do even dumber things. There is definitely something screwy with the way that coldfusion creats structs. I slapped to gether the following code to see what was up. The first array is incrementing a variable on the left side, this is where the badness happens.

Oddly these are the results.

Not sure what that code compiles to, but it seems as though the i on the left side is local to that cfset somehow. Railo gets the correct results below,

Mango Blog and CFFormProtect again

Thu, 02 Apr 2009 21:26:05 GMT

It has been brought to my attention by Mark Aplet that there is a baseplugin.cfc that makes plugin development easier. In my last post (http://fojasaur.us/weblog/post.cfm/mangoblog-and-cfformprotect), I put the cfformprotect files in the root directory. I used the getAssetPath() function from the baseplugin so that I could put the cfformprotect files where ever I want. There is one minor change that I made to the cfformprotect files. CFFormProtect takes a path at the beginning of the cffp.cfm file, so I changed the cfset to a cfparam. Line 3 should now look like this:

<cfparam name="cffpPath" default="/cfformprotect">

That makes it so that I can set a file path before I include cfformprotect.

The installation is the same, except now you need to put cfformprotect in the /assets/plugin folder. This makes it easier if you do not have access to the webroot.

Download CFFormProtect Plugin