Freelance Web Development

I ran across a problem with LightView which is stated as requiring Prototype 1.6.1 and Scriptaculous 1.8.2. Yet it was failing even when I had scriptaculous 1.8.3 loaded.

Apparently LightView looks for the loader scriptaculous.js rather than the actual components (effect, builder, etc).

My previous compressed Prototype 1.6.1 and Scriptaculous 1.8.3 did not have the loader/stub scriptaculous.js file. Ideally, that’s never needed as long as you load the other scriptaculous js files.

So here is an updated package. Also in this archive is the PHP version of the ColdFusion file to server the jgz.

The combined file is now 273KB. The load order is as follows:

• prototype
• scriptaculous
• builder
• effects
• dragdrop
• controls
• slider
• sound

It includes all comments and credits. I gzipped it down to 62KB.

You’d load it like so:

<script type="text/javascript" charset="ISO-8859-1" src="/includes/js/scriptaculous/scriptaculous.cfm"></script>

Download it: wv-scripty-183.zip

ColdFusion, PHP, Scriptaculous

I manage a site with nearly 50GB of small PDFs. Thousands of directories and files. This makes CFFM super duper slow. I know it sounds silly, but when staring at a blank window, 15 seconds feels like 15 minutes. The problem is that with every page load, the entire directory tree below your initial directory is read. Crazy. Here is the fix…

At around line 648 of cffm.cfm, only turn on recursion if this particular action requires it:

<cfset variables.listAllFiles = cffm.directoryList(cffm.includeDir, (isdefined("url.action") and url.action eq 'copymoveForm'))>

… which is, when moving or copying. In my application, speed increased 10x.
And to get a little more speed when listing a directory with images…

At around line 67 of cffm.cfm, turn off image sizes:

<cfinvokeargument name="enableImageDimensionsInDirList" value="true">

ColdFusion cffm, cms, recursion, slow

CFSelect is nice because it can help you write out some code quicker. Just like the rest of ColdFusion. But I never used it because so many times I needed to display two columns in the <option>, such as “#lastName#, #firstName#”.

While working on a site I fell into the same routine. I start typing out CFSelect then grit my teeth when I get to the Display attribute. Being stubborn about it I stumbled upon a nice MySQL function called CONCAT(). Using that one can merge two columns in the query to be output as a single column name. Like so:

<cfquery name="emps" datasource="#application.datasource#">
SELECT
 id, CONCAT(lastname, ', ', firstname) AS fullName
FROM
 employees
ORDER BY
 lastname, firstname
</cfquery>

Then simply use that column name for the display (or elsewhere needed):

<cfselect name="employeeid" query="emps" selected="" value="id" display="fullName"/>

ColdFusion, MySQL, Web Coding cfquery, cfselect, column, concat(), display, option, query, select

A big thank to Mr. Camden for giving me a few minutes of his time! With his insight I was able to remove the required Vscope argument. Instead, multiple instances per page are tracked through Request. No more required argument, and it’s backwards compatible again.

Grab the update here: http://github.com/WebVeteran/cf-tinymce/

CF TinyMCE, ColdFusion, TinyMCE cfargument, Request, vScope

I have made quite a few Clips in Coda to make development a little speedier. Hopefully you can get some use out of them too.

Preview of Coda Clips - keep in mind the clips window only shows the first line of each clip.

Download the Clips here:
ColdFusion Coda Clips

Coda, ColdFusion clips

I updated CF tinyMCE with a small nicety. It now automatically handles multiple instance per page. Previously, it would have to be invoked like so:

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			content=read.en,
			element="en",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = ""

		)#
	</td>
	<td>
		#application.includes.tinymce(
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			loadbase='0',
			language='es',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = "",
			gecko_spellcheck = "false"
		)#
	</td>
</tr>
</cfoutput>

Notice the ‘loadbase=0′ argument on the second invocation. That told the previous version of CF TinyMCE to not all of TinyMCE again – just load the settings instead.

The new version automatically handles multiple instances and not loading TinyMCE all over again for subsequent invocations on the same page. Therefore, the new syntax example is:

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			VScope=Variables,
			content=read.en,
			element="en",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = ""

		)#
	</td>
	<td>
		#application.includes.tinymce(
			VScope=Variables,
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			language='es',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = "",
			gecko_spellcheck = "false"
		)#
	</td>
</tr>
</cfoutput>

No more loadbase! The key is the argument “Vscope=Variables”. That lets CF pass the Variables scope back and forth between a page and a function. It is a required argument which I am not happy about. But since it’s value never changes it’s not so bad.

Because of this fundamental change, CF TinyMCE 090612 is not backwards compatible. If anyone knows how to pass the Variables scope back and forth between a page and a function, without an argument like I am here – please let me know!

You can download CF TinyMCE at github: http://github.com/WebVeteran/cf-tinymce/

CF TinyMCE, ColdFusion, TinyMCE CFC, coldfusion function, vScope

In previous posts I found a fix for an intermittent problem with IE6 not loading compressed javascripts. IE was loading the first zero bytes of the gzipped javascripts. But if you copy-paste the url of the javascript it loads fine. And then the pages with those javascripts work just fine from there on. That fix was to exclude IE6 from receiving the compressed version.

Well, this fix is much better. Just add blank Pragma and Cache-control headers. No need to exclude IE6 from receiving the compressed js.

<cfif cgi.HTTP_ACCEPT_ENCODING contains "gzip">
	<cfheader name="Content-Encoding" value="gzip" >
	<cfheader name="Content-Disposition" value="inline; filename=""protoaculous182min.jgz""">
	<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
	<cfif cgi.HTTP_USER_AGENT contains 'MSIE 6.0; Windows'>
		<cfheader name="Pragma" value="">
		<cfheader name="Cache-control" value="">
	</cfif>
	<cfcontent deletefile="no" file="#expandpath('./protoaculous182min.jgz')#" type="application/x-javascript; charset=ISO-8859-1">
<cfelse>
	<cfheader name="Content-Disposition" value="inline; filename=""protoaculous182min.js""">
	<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
	<cfinclude template="protoaculous182min.js">
</cfif>

ColdFusion, JavaScript, Scriptaculous cfcontent, cfheader, HTTP_USER_AGENT, ie6

<cfif cgi.HTTP_ACCEPT_ENCODING contains "gzip" and cgi.HTTP_USER_AGENT does not contain 'MSIE 6.0; Windows'>
	<cfheader name="Content-Encoding" value="gzip" >
	<cfheader name="Content-Disposition" value="inline; filename=""protoaculous182min.jgz""">
	<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
	<cfcontent deletefile="no" file="#expandpath('./protoaculous182min.gz')#" type="application/x-javascript; charset=ISO-8859-1">
<cfelse>
	<cfheader name="Content-Disposition" value="inline; filename=""protoaculous182min.js""">
	<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
	<cfinclude template="protoaculous182min.js">
</cfif>

ColdFusion, JavaScript, Scriptaculous cfcontent, cfheader, Content-Disposition, Content-Type, gz, gzip, HTTP_ACCEPT_ENCODING, HTTP_USER_AGENT, safari

For the past two weeks I’ve been struggling with a website. In particular, IE bugs. Of course.

What I had the most problem with is an intermittent problem with IE6 not loading compressed javascripts. It spews out cryptic javascript errors. The debugger is a joke. If you hit reload, sometimes it works. Sometimes it does not. Then it works fine for quite a while. Then the client emails ‘broken’ messages. Argh what a mess.

It turns out to be a bug in IE that has been around since version 5.5 until version 7. Yes that’s right, 6 years! IE loads the first zero bytes of the gzipped javascripts. But if you copy-paste the url of the javascript it loads fine. And then the pages with those javascripts work just fine from there on (probably cached at that point). Wow. Nice work Redmond!

After figuring this out I quickly made a fix. I’ve been using prototype and scriptaculous compressed for quite some time. Since 99% of my work is on shared hosting I just use ColdFusion to server the gzipped version if the browser allows it (keep in mind this is the old code that can have problems in IE6):

<cfif cgi.HTTP_ACCEPT_ENCODING contains "gzip">
	<cfheader name="Content-Encoding" value="gzip" >
	<cfheader name="Content-Type" value="text/javascript" >
	<cfcontent deletefile="no" file="#expandpath('./protoaculous182min.gz')#" type="text/javascript">
<cfelse>
	<cfinclude template="protoaculous182min.js">
</cfif>

The fix then is to exclude IE6, too, from receiving the compressed version. I also added some other bits to make it nicer and more proper:

<cfif cgi.HTTP_ACCEPT_ENCODING contains "gzip" and cgi.HTTP_USER_AGENT does not contain 'MSIE 6.0; Windows'>
	<cfheader name="Content-Encoding" value="gzip" >
	<cfheader name="Content-Disposition" value="inline; filename=""protoaculous182min.gz""">
	<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
	<cfcontent deletefile="no" file="#expandpath('./protoaculous182min.gz')#" type="application/x-javascript; charset=ISO-8859-1">
<cfelse>
	<cfheader name="Content-Disposition" value="inline; filename=""protoaculous182min.js""">
	<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
	<cfinclude template="protoaculous182min.js">
</cfif>

That seems to work flawless in IE6, IE7, IE8, and Firefox3.

Whew. Hope someone out there finds this helpful!

ColdFusion, JavaScript, Scriptaculous cfcontent, cfheader, Content-Disposition, Content-Type, gz, gzip, HTTP_ACCEPT_ENCODING, HTTP_USER_AGENT, ie6

I’ve noticed in PhotoShop that it’s best to reduce images in multiple passes. For instance, to make a 100px thumbnail from a 1000px image requires 4 resize actions:

1. 1000 : 50% = 500
2. 500 : 50% = 250
3. 250 : 50% = 125
4. 125 : 100px = 100px

The smaller image is crisper. Then I wondered if the same would hold true for ColdFusion’s built in CFimage tag. Let’s check it out. In both cases I started with the same image (uncompressed TIF) and output to disk a JPG with quality set to 100%.

You can download the original uncompressed TIF here: grey.tif (12.8MB).

PhotoShop

Using the above steps (but more of them) I brought this 2112px image down to 200px. Interpolation is set to “Bicubic Sharper (best for reduction)”. The output is grey-stepped-ps.jpg (43KB). Then I did a single resize action to create grey-one-ps.jpg (65KB). I found it odd that the output sizes we off by 50%!

ColdFusion

Mimicking the PS work with CFimage is easy. Here I have Interpolation set to the default, “highestQuality’ and antialiasing turned on.

Here is the code I used for the multiple pass version of the resize:

<!--- READ THE TIF --->
<cfimage source="#expandPath('./')#grey.tif" name="myImage">
<cfset ImageSetAntialiasing(myImage,"on")>
<!--- TO 1056 --->
<cfset ImageResize(myImage, "50%", "50%")>
<!--- TO 528 --->
<cfset ImageResize(myImage, "50%", "50%")>
<!--- TO 264 --->
<cfset ImageResize(myImage, "50%", "50%")>
<!--- TO 200 --->
<cfset ImageResize(myImage, "200", "200")>
<!--- WRITE TO DISK --->
<cfimage source="#myImage#" action="write" destination="#expandPath('./')#grey-stepped-cf.jpg" overwrite="yes" quality="1">

The output is grey-stepped-cf.jpg, 43KB. The page took 9.3 seconds.

And here the single pass version:

<!--- READ THE TIF --->
<cfimage source="#expandPath('./')#grey.tif" name="myImage">
<cfset ImageSetAntialiasing(myImage,"on")>
<!--- TO 200 --->
<cfset ImageResize(myImage, "200", "200")>
<!--- WRITE TO DISK --->
<cfimage source="#myImage#" action="write" destination="#expandPath('./')#grey-one-cf.jpg" overwrite="yes" quality="1">

The output is grey-one-cf.jpg, also 43KB. The page took 4.8 seconds.

Outcome

Sure enough, the multiple pass method in PhotoShop yields a nicer image. However, it looks like a single pass resize with CFimage looks better.

ColdFusion, Web Coding