Creative Juices Bo. Co.

Happy New Year!

2009-01-02T03:01:40Z

Happy New Year Everyone!!

You might have been asking where I went, well rest assure I'm still around. I've been completely swamped with projects and as I wrap one up another seems to start. I'm starting to see the light at the end of the tunnel, but I think I'm still a couple of weeks away from some freedom.

In the meantime, how about a little present? Maybe CJ File Browser v2.0 (Beta)!!!

Thought you might like that. I've had this for awhile, but I just didn't have the time to clean up the documentation, comments etc. But I'll let you play with it and let me know if you come accross any problems.

The big change, that I've made this into a tinyMCE plug-in.

Download here: CJ File Browser v2.0 (Beta)

P.S. It's a ColdFusion File Browser for tinyMCE, in case you didn't know.

jQuery Editors

2008-11-22T07:11:04Z

Now that I'm diving head deep into jQuery, I've been cruising the intra-web looking at the different plug-ins and extensions for it. I have to admit, there are some pretty impressive scripts out there. One of them caught my eye, mainly since they deal with inline WYSIWYG editors.ﾠIts called Small Rich Text Editor, which boastﾠa small footprint (~18k), cross-browser compatibility, Ajax Image upload, HTML clean-up with PHP back-end (bet I could make this for ColdFusion!) and basic Rich Text functionality capabilities.ﾠ

I haven't had any time to play with it, but it looks promising. Once I get some time, I'm going to play with it to see what it can do. But in the meantime, I thought I would share with you guys.

I've Choosen My Javascript Framework

2008-11-20T01:11:03Z

Hello jQuery! Be Gentle.

Over the past year or so, I've been switching back and forth using two popular javascript frameworks, jQuery and Prototype. I don't always use them, I prefer to make most of my javascript non-dependant, but at times its unavoidable. An example would be trying to do some AJAX stuff, I just find it easier to implement one of the frameworks to handle the grunt work and I just build my script on top of it. For the most part I was leaning towards Prototype.

That is until 2 nights ago. I spent 5 hours trying to implement a simple AJAX request with a ColdFusion CFC and nothing was happening. There was no feedback at all. No error responses. No transport responses. Nothing! I tried using FireBug and great little FireFox extension, to try to determine what was going on. I traced through all the calls, and I could not find any problems or errors in the code.

At first, I thought it was my CFC, so I wasted a lot of time rewriting it, changing it, tweaking it, poking it, I did everything I could think of. I couldn't figure out what was going on. It seemed to be working fine. So I turned my attention to Prototype. I would think, if there was a problem, it would report it. Some kind of error or console message, but I wasn't seeing anything. So on a whim, I decided to try jQuery instead. Low and behold, it worked perfectly the first time I tried it.

Now, I'm not sure what was going on with Prototype, but to waste that much of my time kind of pissed me off. So I have now officially sworn of using it for any future projects.

I would be curious to hear back from you guys on your experience using various frameworks out there. Do you prefer one over the other, and if so why?

Hello Again... Again.

2008-11-15T12:11:39Z

Creative Juices Website Redesign, Act II

The past few months has been crazy. When I teased you a awhile back about relaunching the website, I didn't realize the amount of work I was about to undertake. Not with redesigning the site, but with my normal work load for my company. I've been working non-stop on client projects and I just didn't have time to tackle the giant task of redesigning and switching over the Create Juices website.

Well, I finally had a few spare hours and I decided to complete the task. So here it is, the new and improved (hopefully) Creative Juices website.ﾠThe big difference is that I decided to switch the blog from Ray Camden's BlogCFC to the open source Mango Blogﾠengine. So far I'm very impressed. I think this is going to allow me to post and organize projects a lot easier. Also, I love the fact that Mango allows me to create themes. This is going to allow me some freedom to stylize the site anyway I like.

Where did everything go?

I've decided that I'm going to organize the projects in their own pages, instead of leaving them in a post entry. This makes more sense, since I update these frequently and you should be able to visit the project page for the most current version, instead of searching through the post to find if something was updated. I need to go through all my post and pull out the project specific ones and place them on their own page. So bare with me for a couple of days while I sort everything out.

And speaking of updates, I have a ton of them. I've updated pretty much everything including CF_iBrowser, Html2Ascii as well as a handful of new ones. I just never had the time or patience to fight with BlogCFC to bother posting them. So expect to see all of these within the next few days. Also, I'm still in the process of moving all the old post and comments over from the old blog, so bare with me, they will be back shortly.

Let me know your thoughts on the new site and as always let me know if you have problems with anything.

Get Hit Count On Multiple Domains Using CJ Hitman

2008-07-30T02:07:00Z

CJ Hitman Tip & Trick

One of my clients is using the CJ Hitman link manager script I created to track various links on their website. They use about 15 domains that point people to different areas of their site and they we're curious if they could use the information gathered through the script to determine the total hit counts for each domain.

We sure can. CJ Hitman is recording the entire path, so all we need to do is perform a little SQL QUERY magic to group the results for the domains.

<cfquery datasource="#APPLICATION.DSN#" name="GetHits">
	SELECT id, link, COUNT(hits) AS total_hits, IF(INSTR(link,'/')>0,Left(link,INSTR(link,'/')-1),link) AS domain
	FROM tblbloghitman
	GROUP BY domain
	ORDER BY total_hits Desc
</cfquery>

Basically, all we are doing is trying to determine if the stored "link" contains a "/" path seperator. If it is, then we take it's position and find the left portion of the string up to that index number. If not, then we know that the stored "link" is the domain. We cast this result as the "domain" variable, which can then be used to group all those results.

Sheesh, I hope that makes sense. Well, trust me, it works. Let me know if you have any problems.

Use Idioms To Make Your Intentions More Concise

2008-06-30T06:06:00Z

To "===" or not to "=="

About 6 months ago, I came across an online tool called JSLint. It's a JavaScript program that looks for problems in JavaScript code. I began using it to check most of my scripts to see if I had any errors in them (I know, I know... you thought I was perfect). Well as it turns out, I had a lot of little mistakes, like using a function or object before it was defined or little formating issues. But one error I kept receiving made no sense to me and I honestly didn't understand why I was getting it.

Expected '===' and instead saw '=='.
Expected '!==' and instead saw '!='.

Granted, it wasn't like I didn't understand how to fix the issue, but JSLint wasn't very forthcoming on why I needed to make these changes. So, without fully understanding what was going on, I began using "===" and "!==" whenever I needed to make a logical comparision. And I've been doing this for the past 6 months, without a clue as to "why".

Say hello to my little friend, "why"

I'm not going to lie, every time I typed out "===" I said to myself, "Why am I doing this?!?". So I started looking around. Google and Yahoo were not a big help, because they like to search for text, not special characters. But I eventually came across a nice little paragraph that explained the whole thing.

First, let's take a look at an example script:

var x = 1;
if (x == true) {
	alert ("I'm a fuzzy match!");
} else {
	alert ("I'm strict, go away!");
}

If you run this script you will see an alert box pop up that says "I'm a fuzzy match!". Awww... isn't that nice? But let's take a look at that function. We first set a variable named X to a value of 1. And then we test to see if X equals TRUE. Because we all know, that 1 equals TRUE, right? Well, actually that's an assumption. Or more precisely, that's called "type coercion". And for the most part we can get away with this kind of "truey" and "falsey" behavior.

Let's try again, by changing the logic "==" to "===":

var x = 1;
if (x === true) {
	alert ("I'm a fuzzy match!");
} else {
	alert ("I'm strict, go away!");
}

How rude. Now we get the "I'm strict, go away!" message. The reason for this, is in reality X equals 1, not TRUE. This time we tested to see if X is the BOOLEAN value TRUE. It's not, we performed a strict comparision. So basically 1 == TRUE equals true, but 1 === TRUE equals false.

Conclusion

If your asking "What does this all mean and when and where should I use this?". I'm not sure I have that answer yet. I really don't understand a situation where I need to perform a strict test like this. Perhaps there will be a time when I have a variable that could have possible values of 1, true, 0 and false, or maybe a STRING value of "foo" and not an OBJECT named "foo", but I really can't recall, in my years of programming, a time when this mattered. Perhaps, this might help performance, I'm not sure. I don't think my skills are at the level where this makes a whole lot of difference. I guess will have to wait and see whenever the Web 2.0 era is in full swing.

So, even though there's still some question as to the "When", at least we now have a better understanding as to the "Why." If you have any insight into this, I would love to hear about it.

P.S. This is the website where I found the answer: http://javascript.crockford.com/style2.html

A Nice Book On Learning JavaScript

2008-06-27T10:06:00Z

Beginning Javascript with DOM Scripting and AJAX

In my lifetime I can honestly say that I have only bought two books on JavaScript programming. The first one was called "Special Edition: Using JavaScript" [Que-1996]. This was basically a reference book that described, and provided an example of, every function and method in JavaScript at that time.ﾠI don't think I have opened this book in about 8 years.

During this time, I have relied heavily on Google to provide information on any new tips and tricks that have come out. If I came across something that intrigued me, I would spend countless hours learning all I could from the internet.

Recently I purchased a new book called "Beginning Javascript with DOM Scripting and AJAX" [Apress-2006]. I primarily bought this to enhance my knowledge of DOM programming, but it also enlightened me to some new techniques that I've seen, but I really never fully understood.

So, if you need a refresher course or if you are just starting out in JavaScript programming, I highly recommend checking this out. It's well written and very easy to understand. The author provides a lot of code samples, which you can download from his site.

The one thing I would like to point out, is that he provides a few DOM functions in a DOM Utility Script. These functions are called:ﾠlastSibling, firstSibling and closestSibling. These are extremely useful, but I don't like how he's returning the value.

Here are the functions:

var DOMhelp={

	lastSibling:function(node){
		var tempObj=node.parentNode.lastChild;
		while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
			tempObj=tempObj.previousSibling;
		}
		return (tempObj.nodeType==1)?tempObj:false;
	},

	firstSibling:function(node){
		var tempObj=node.parentNode.firstChild;
		while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
			tempObj=tempObj.nextSibling;
		}
		return (tempObj.nodeType==1)?tempObj:false;
	},

	closestSibling:function(node,direction){
		var tempObj;
		if(direction==-1 && node.previousSibling!=null){
			tempObj=node.previousSibling;
			while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
				 tempObj=tempObj.previousSibling;
			}
		}else if(direction==1 && node.nextSibling!=null){
			tempObj=node.nextSibling;
			while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
				 tempObj=tempObj.nextSibling;
			}
		}
		return tempObj.nodeType==1?tempObj:false;
	}
	
}

I have a problem with the way he's returning the values:

return tempObj.nodeType == 1 ? tempObj: false;

What I don't like about this method is that he doesn't test to see if the tempObj is a valid object. Also, he's returning false. I don't think that this follows the standard form in which javascript returns results for objects. I think it should return "undefined" if it's not a valid DOM object. So, here's what I recommend changing the return value to:

return (tempObj && tempObj.nodeType == 1) ? tempObj: "undefined";

Still the book is a good read and his other examples are very nice. Check it out and let me know what you think.

Problem Using OnFocus and OnBlur Events with FireFox 2.x

2008-06-26T03:06:00Z

FormFieldinator's Dirty Little Secret

Brian comments on FormFieldinator:

...I tried the [FormFieldinator] tester and found some problems (http://www.cjboco.com/projects/FormFieldinator/). I'm using Firefox 2.0.0.14:

...I get an error message when I tab after pasting invalid text, but it moves to the next field anyway. Shouldn't it stay in that field until it's correct?

I have to admit, I was wondering when someone was going to call me out on this. If your not familiar with FormFieldinator, it was my attempt to create the ultimate JavaScript form and formfield utility library. I developed, what I thought, was a fairly robust set of tools to allow you to capture, validate and format form input. Heck, I even came up with a cool name.

What's the problem you ask? Well, I learned a long time ago, that performing any type of form validation should be done on the back-end. Quite frankly, front-end validation is a big pain-in-the-you-know-what and it causes way to many headaches. This particular problem lies within the doFormValidation script. It's supposed to check the field input after the field loses it's focus (i.e. when the user clicks or tabs out of the field). It works as expected in Safari and IE, but FireFox 2.x throws a hissy fit like you wouldn't believe.

It boils down to a Mozilla bug which you can read about here https://bugzilla.mozilla.org/show_bug.cgi?id=53118. In essense, FireFox isn't bubbling it's events properly. In our particular case, it's firing the onBlur event and then immediately firing the onFocus event. And if we use any kind of alert, prompt or confirm box, the field loses it's focus and the process starts all over again. Basically and endless loop of stupidness.

I played around with the script that day, for about 5 hours. I tried everything from intercepting the keydown or keypress to see if it was a tab, created a timer to focus on the field after a certain amount of time and even tried canceling the event bubble. Nothing worked. I got frustrated. Wept out loud. Called mom. It was a sad, cloudy day at ye ole Juice factory.

So Brian, to answer your question, yeah I'm aware of the problem, but there's not much I can do. When a major browser has bugs that won't allow us web developers to do the things we want to do (in a nice cross-browser friendly way), then we are forced to find other solutions. And in this case, I highly recommend performing your validations on the server side or checking the data before the form is submitted.

Note: One of the reasons I kind of let this go, is because the W3C spec for form user interface, suggests that we do not prevent the user from doing what they want to do. In this case, it's tabbing or clicking out of a field focus. So essentially, alerting the user to the problem, and then allowing them to leave the field is more in line with what should happen. I don't personally agree with this philosophy, but because forms do not have the capability to validate data on their own, we are forced to come up with our own solutions based on whatever means are at our disposal.

[Update 6-27-2008]: I went ahead and created a version that will stop the user from using the TAB key to leave a formfield if it does not pass the doFormValidate test. This version works, but it doesn't show an alert. It just prevents the TAB key from being used. If you take a look at the code, you can uncomment a section to throw an alert to see the FireFox bug for yourself.
Warning! Uncommenting this section will make FireFox 2.x go into a stupid alert loop. You will have to force quit FireFox to stop it!

View the example: FormFieldinator v1.1 (No Tab Example)
Download the source: FormFieldinator_v1.1_FFBug.zip

A Nice Find, Animator.js

2008-06-24T07:06:00Z

It's Like script.aculo.us and moo.fx, but Half the Calories

Right before I left on my vacation I came across a very nice JavaScript Animation class called Animator.js. In the past, I've switched between using script.aculo.us and moo.fx for various projects, but at times it seemed I would run into problems. Their frameworks sometimes interfere with the latest version of prototype.js, or they were overkill for whatever task I was trying to perform. I think that's why I kind of like Animator.js. It's a self contained class that allows you to perform various animation task. It's lightweight and extremely easy to implement.

I recommend checking out the authors site [BernieCode] to find out more and also, I've created a little demo that duplicates one of WebKit's new CSS animations. Check it out and let me know what you think.

Note: It wasn't really explained on Bernie's website, but you need to return window[Animator][Control Function] after you call new Animator() to get the animation to work.

Update, openWYSIWYG Is Now Working With Safari

2008-06-23T07:06:00Z

I fixed the bugs, now what?

Well, I'm back, relaxed and dove straight into working on the Safari fix for openWYSIWYG. I figured out the issue when attempting to insert a new TABLE into a blank editor window. That little bug has been squashed. You can grab the the Safari version by visiting this blog entry.

So, what next? Well, that's a darn good question. I still think this editor needs some improvements to make it more cross-browser friendly, make improvements on the some of the core functions (especially some of the node functions), improve how it handles the HTML code and a few other things that I think it needs help on.

One of the interesting things I discovered while working in the code, is where the original authors pulled some of their core functionality (Or they may have wrote it originally, not pointing any fingeres here). If you visit the Mozilla site, you will find a nice little demo editor that basically resembles our beloved openWYSIWYG editor. Which by the way shares the same Safari bug for the TABLE insert.

Mozilla - Converting an app using document.designMode from IE to Mozilla.
Mozilla - Rich Text Editing Demo

Look familiar? I thought so. This version seems to work rather well for Safari. My guess it that the openWYSIWYG team added the blocks for Safari in their version. All I did was pull the blocks back out.

Anyway, the most update version should work splendidly for everyone. If you run across some problems, please let me know. Keep coming back, because I plan on making even more improvements in the future!

ﾠ

Gone Fishing

2008-06-16T03:06:00Z

Taking a Much Needed Break

I just wanted to give everyone a heads up that I will be taking a small vacation until next Monday. My top priority will be to finish debugging openWYSIWYG for Safari, and once that is complete I plan on finishing a few of my other projects. This includes the new ColdFusion Wiki Thingy I've been working on (if you haven't already figured it out, openWYSIWYG is an integral part of that)

And in true vacation form, I am not taking a laptop with me... it wouldn't be much of a vacation if I did! So the blog posts may be light or non-existent until I get back.

Enjoy your week everyone!

The Ultimate openWYSIWYG Editor (Their words, not mine)

2008-06-12T02:06:00Z

WYSIWYG Cross Browser Editor

I came across this pretty nifty in-page HTML editor tonight called openWYSIWYG. The claim it was the ultimate cross-browser editor, but it didn't support Apple's Safari browser. Go figure. I liked it though. It's small and light and so far it seems like you can modify it fairly easily. Compared to FCKEditor or TinyMCE, which seems like brain surgery whenever I poke around in their code.

Well as of tonight, the Safari limitation has been changed. I have successfully modified the source to allow my brethren to enjoy it as well.

This has been tested (but not thouroghly) on the following browsers:

Safari v3.1.1, FireFox 2.0.0.14 (Mac OS X)
Internet Explorer 6 & 7, FireFox 2.0.0.6 (Windows XP)

I don't think this is going to work on any pre-3.0 Safari browsers, because WebKit didn't have the needed functions to make this style of editing possible, but if people can try it out and let me know, I'll add em to the list.

Be sure to check out openWYSIWYG at www.openwebware.com to find out more about this cool lil editor.

P.S. If this thing really works well, then I plan on porting CF_iBrowser to it!

The Source

openWYSIWYG (Safari Edition) v1.4.7

ﾠ

[UPDATE 6-13-2008] Fixed table, image, etc. insert. But it doesn't work if the content window is blank in Safari. Add some text, then try it. I'm still working on it, so let me know if you can help or if your getting some kind of error.

[Update 6-16-2008] I'm aware of the alert that says "Problems encountered loading the popup window." on ﾠthe table insert. Won't be able to track down the bug until Monday. Sorry!! (If you figure it out let me know)

[Update 6-16-2008] Ok, before I left for my vacation, I had to fix the "loading pop-up" error. It still has the "Blank Content" issue, but you should no longer see the other alert. (I'll work on the other issue when I get back!)

[Update 6-23-2008] I fixed the annoying Safari bug that was occurring when you try to do a TABLE insert into a blank editor window!

How Would You Improve Wiki?

2008-06-11T09:06:00Z

Improving Upon Wiki

I've been working on a little ColdFusion side project to improve my site for the past couple of days. I wanted to create a Wiki-Like portal that would allow me to post most of my ColdFusion and JavaScript snippets and also give the users the ability to add their own or make improvements by using a wiki like environment. I took a look at Canvas ColdFusion Wiki and I have to be honest, I really don't like working with the ModelGlue framework. I think it's great for some people, but I like to keep things simple.

It sounded fairly easy and I basically have the framework in place. My problem is when I came to the wiki parser. First I have to admit that I haven't used wiki's extensively. When I have, I always thought the wiki mark-up language was a little complex and cumbersome. And this has been reinforced since I began looking into parsing the language.

I've now come to a cross-roads:

Do I duplicate the wiki-markup language exactly?
Do I create an entirely new system taking the bits and parts from wiki and other formating systems?

I've been leaning towards #2. And since I was going to do that, I started thinking what are some of the other improvements that could be made to a Wiki style site. At this point, I really need to put a call out to the community to give me some feedback. I would like to hear what you guys think.

Here's my thoughts:

Improved the mark-up langage.
User management, with different levels of permissions for various task.
Straight ColdFusion templates to be used for top level pages (users should never have to edit these anyways)
True template pages that can be used for different styled pages.

I would like to here from you guys to know what your thoughts are. So if you have anything to add, let me know below. Also, I plan on making this open source once I have a working version of it.

Validating E-Mail and Web Addresses Using Regular Expressions with ColdFusion

2008-06-09T03:06:00Z

Two Useful Form Field Validation Functions

Here are two quick ColdFusion scripts to validate if a user supplied a real e-mail address or website URL using Regular Expressions.

To validate an e-mail address:

<cfif REFindNoCase("^[\w\.-]+@[\w\.-]+\.[a-zA-Z]{2,3}$",form.EMAIL) lt 1>
ﾠﾠﾠﾠ<--- E-mail address was not valid.... --->
</cfif>

... and to validate a website url:

<cfif REFindNoCase("^(http://|https://)[\w\.-]+\.[a-zA-Z]{2,3}(/?)$",form.WEBSITE) lt 1>
ﾠﾠﾠﾠ<--- Website URL was not valid.... --->
</cfif>

I wanted to post these real quick just so I have them handy, but also you might find them useful as well.

ColdFusion and Dynamic SES (Search Engine Safe) URL's : Part 2

2008-06-07T11:06:00Z

Revisiting SES's

If you read my last post on Search Engine Safe (SES) URL's, you may have noticed that it was pretty basic. But like everything I post, it's kind of a work in progress.

Anyways, I've been working on a project and I had to revisit using SES's and I discovered another trick. Basically what I had before, using a URL parameter, should still be valid. If you don't remember, it looked something like this:

http://www.whatever.com/products.cfm?id=2369/accessories/gloves/Fuzzy+Pink+Mittens/

I've been tracking a few of my websites using Google Analytics and so far this method seems to be working fine. The one thing that bothers me though, is that I still see sites using another method, and I couldn't figure out how they were doing it. Basically the URL looks something like this:

http://www.whatever.com/index.cfm/accessories/gloves/Fuzzy+Pink+Mittens/

Notice how they are not using a URL parameter? Yeah, that boggled me nogg'n. So I did some digging and some experimenting and here's what I came up with. Basically you can pull the part that's after the index.cfm by checking the CGI.PATH_INFOﾠparameter.ﾠ

<cfoutput>#CGI.PATH_INFO#</cfoutput>// Result -->ﾠ/accessories/gloves/Fuzzy+Pink+Mittens/

Now that I have this information I can use it for whatever my needs might be. QUERY's, CFC's, etc. I've made a little function that will return the results into an array.

<cffunction name="getCurrentPath" output="No" returntype="Array">
	<cfif CGI.PATH_INFO contains "&">
		<cfset url_str = ListGetAt(CGI.PATH_INFO,1,"&")>
	<cfelse>
		<cfset url_str = CGI.PATH_INFO>
	</cfif>
	<cfset url_str = REReplaceNoCase(url_str,"^\/|\/$","","ALL")>
	<cfset url_array = ListToArray(url_str,"/")>
	<cfloop index="i" from="1" to="#ArrayLen(url_array)#">
		<cfset url_array[i] = URLEncodedFormat(url_array[i])>
	</cfloop>
	<cfreturn url_array />
</cffunction>

This would return these results with the same example above:

[0] accessories[1] gloves[2] Fuzzy+Pink+Mittens

The only other thing I would like to figure out is how they do the same thing without actually using the index.cfm in the URL. Is suspect that this is done with ColdFusion 8, since you are able to use the Application.cfc which allows you to use onRequestStart method. Basically this is called before the page load, but I haven't played with this much yet. I'll be sure to let you know!