Download Firefox -  a safer, easier to use web browser. Return to iribbit.net - Leap into the online experience! Return to iribbit.net - Leap into the online experience! iribbit.net - Leap into the online experience!

Project News :.

The latest project to launch was the site for Gorilla Offroad Company. Aside from their main site, a social media strategy was develop to launch the company into various industry specific automobile enthusist discussion board communities as well as popular social media fronts like Facebook, Pinterest, and Twitter.


Valid XHTML 1.0 Transitional

Valid CSS!

Section 508 Compliant

powered by: Macromedia ColdFusion MX

made with: Macromedia Dreamweaver MX

What is RSS

XML - often denotes RSS Feed information.

Macromedia - ColdFusion Programming
white horizontal rule

ColdFusion News :.

To bring a little life to my site, I've pulled a couple What is RSS Feeds into this page. You can currently choose between the technology related news stories from the following news sources:



You are currently viewing and RSS Feed from Raymond Camden's Blog.



Logs from Open PhoneGap Session

Thank you to everyone (especially the PhoneGap team!) who showed up to the open session that Holly and I ran today. We had a great size crowd and a very interesting set of questions. Between Holly and I and other PhoneGap members we were able to cover nearly everything. The pace picked up towards the end but we had a firm cut off time so we couldn't go long. We definitely plan on repeating this soon. I'm using Gists for the logs. First is the Q and A log:

And here is the chat log. This is a bit more free form but there are some good nuggets in here as well.


(Wed, 23 Apr 2014 15:46:00 -0400)
[view article in new window]

Project Parfait - PSD Introspection in the Browser

Today Adobe launched a pretty cool new site - Project Parfait. Project Parfait lets you work with PSDs via your web browser.

By default you're presented with a default PSD to work with, but you can quickly upload new PSDs by simply dragging them into the browser. I did multiple tests and the service didn't choke on any of them - even a large 30 megabyte one. Once you've uploaded the PSD the service will then start processing your file to extract data from it.

When done, you can open the PSD in the interface and start working with the various parts of the file. As a test, I grabbed a PSD a designer gave me for an older site of mine. This is a comp for a homepage redesign she did for me.

Lots of interesting information is available. The styles tab, for example, shows all available colors and fonts from the PSD.

If I select one particular element from my PSD, I get both the specific colors used for it as well as CSS information.

Notice that I can copy the CSS from the right panel, or directly from the blue call-out right below it. See the arrow? This will actually create an asset from the selecting layer. I did this with the logo and it is now available to me from the Assets tab.

You can also extract the text if you have something useful there as opposed to the typical Lorem Ipsum. Another tab gives you access to all the layers with the ability to show/hide items.

So yeah, I'm biased, but this is pretty damn nifty. This is exactly the kind of tool that is useful for me as a web developer. I have a lot of respect for Photoshop, but I find it hard to use at times as I don't use it very often. Something like Parfait is a heck of a lot simpler for me and I'm willing to bet a lot of developers would think the same. If you try it out, make note of the Chat option in the lower right corner. I found a small bug and reported it via that pod. You can also get support via the forums just launched for the project. Finally, check out this video below by my coworker Paul Traini. He covers Parfait as well as some of the other web-related options recently added to Photoshop.


(Tue, 22 Apr 2014 16:07:00 -0400)
[view article in new window]

PhoneGap Developer App

At the end of last week a really interesting new PhoneGap tool was launched - the PhoneGap Developer App. The PG Developer App is a "shell" application that you can install on a real device (both Android and iOS with Windows Phone coming soon) and test with a local copy of your code. You can skip the SDK. You can test iOS on Windows. All you need is the core PhoneGap CLI and you are good to go. Let's take a quick look.

First - ensure you have installed the phonegap CLI via npm. Ensure you have the latest version (see my guide if you are new to npm) and then create a new project.

At this point you do not have to add a platform. Next - fire up the server:

Make note of the IP address. It should be obvious, but this tool requires that your mobile device be able to "see" your development machine. If you aren't on the same network (or on one of those cluttered free WiFi networks) you may have an issue. Ok, now, run the PhoneGap you downloaded to your device. Here's mine running on my iPhone.

Simply enter your IP address and hit connect. What you're seeing now in the app is the code from your project. If you switch back to your command prompt, you can see a butt load of messages - essentially an access log of requests. Fire up your favorite editor, make a change, and just click save.

It should update automatically, but if it doesn't, try a four finger tap. But to be clear, you do not have to go to the command line and run anything. It just - plain - happens.

Another interesting feature of the Dev App is that will automatically load all the core plugins. So if you want to test the Camera API, you just do it. No need to install the plugin manually. This is cool... but I kinda worry it may trip people up when they stop using the Dev App. I tend to be a worry wart though.

Another issue is that you cannot use remote debugging with it. By that I mean Safari Remote Debugging or Chrome Remote Debugging. Weinre works fine with it though.

So - thoughts? I've said before that I tend to focus on the Cordova CLI, especially when I teach, but I definitely see me demonstrating this next time I present on PhoneGap/Cordova.


(Mon, 21 Apr 2014 13:53:00 -0400)
[view article in new window]

Recording: Debugging Mobile Applications Presentation

Thank you to everyone who attended (not sure how many - 20+ I think?) my Google Hangout presentation today. I think I'm getting used to the platform but as always, if anyone has any tips for how I could do these better, I'll gladly listen to your advice. You can watch the recording below. I'm not attaching the slide deck as there aren't any 'real' demo files for you to play with, but if anyone really wants it, I will.


(Fri, 18 Apr 2014 14:07:00 -0400)
[view article in new window]

Another Weekly to Sign Up For...

I've blogged before about some excellent newsletters to sign up in regards to web dev. A new one has just launched - Mobile Web Weekly. This newsletter is curated by two friends of mine - Brian Rinaldi and Holly Schinsky. Check it out. To get an idea of what they are covering, here is the latest issue, with a story by yours truly.


(Fri, 18 Apr 2014 10:27:00 -0400)
[view article in new window]

Article: HTML out of the Browser

Very happy to announce the first publication of an article of mine on the Mozilla Hacks blog. This article is a bit of a departure for me. Less techy and more touchy-feely. Broadly, the article is a look at how HTML (well, web standards in general) are branching out of the browser. Probably some (or most) of this is known to my readers, but I felt like a look at this phenomenon was worthwhile. I hope you enjoy it as well.

HTML out of the Browser


(Thu, 17 Apr 2014 09:06:00 -0400)
[view article in new window]

Open PhoneGap/Cordova Session next week

It has been a while, but next week (Wednesday, April 23rd) at 12PM CST, Holly Schinsky and I will be hosting an open Q and A session for PhoneGap and Cordova. We've run these before and they are pretty successful. There will not be any presentation, but we will take your questions and answer them to the best of our ability. These sessions tend to bring up great discussions and are a good chance to see what other people are struggling with as well. We won't make a recording, but we will share the text of the questions and answers after the session is complete.

We will use Connect for this and the URL will be: https://my.adobeconnect.com/r5ld5x2k7na/.


(Wed, 16 Apr 2014 15:02:00 -0400)
[view article in new window]

Example of Async Linting support in Brackets Sprint 38

One of the more cooler updates to Brackets recently was the linting API. This came out back in October and I wrote up a review of the API for the Brackets blog. It basically took 90% of the boiler plate code for linters and made it a heck of a lot simpler.

One thing that wasn't possible with the linter (or not easy at least) was handling linters that needed to do something asynchronously. One of my extensions, W3CValidation, made use of a remote API to perform validation on HTML. (I've also got a wrapper for another HTML validator: HTMLHint.)

Brackets Sprint 38 lands new support for handling asynchronous linters. The release notes aren't terribly clear on how you use this feature. They link to the bug report, which mainly just mentions scanFileAsync. Luckily the developer who landed the feature (and one who has helped out a lot on some of my extensions) shared an example that I was able to steal from. Credit for my update goes to busykai. Here is the entirety of the main.js file for my W3CValidator extension.

/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
/*global define, brackets, $, window, W3CValidator */

define(function (require, exports, module) {
	'use strict';
	
	var CodeInspection			= brackets.getModule("language/CodeInspection"),
		AppInit                 = brackets.getModule("utils/AppInit");

	require('w3cvalidator');
	
	function _handleValidation(text, fullPath) {
		var response = new $.Deferred();
		var result = {errors:[]};
			
		W3CValidator.validate(text, function (res) {
			var messages = res.messages;
			
			if (messages.length) {
									
				messages.forEach(function (item) {
					console.log('W3CValidation messsage ',item);
					var type = CodeInspection.Type.ERROR;
					if (item.type === "warning") {
                        type = CodeInspection.Type.WARNING;
                    }
					result.errors.push({
						pos: {line:item.lastLine-1, ch:0},
						message:item.message,
						type:type
					});
					
				});
		  
			}

			response.resolve(result);        
			
		}); 

		return response.promise();

	}
		
	AppInit.appReady(function () {


		CodeInspection.register("html", {
			name: "W3CValidation",
			scanFileAsync: _handleValidation
		});
		
	});
	
	
});

First - note the use of scanFileAsync in the CodeInspection.register method. I'm telling it to use _handleValidation and to expect an async response. The function then simply creates a new deferred object and returns the promise. My handler calls off to my W3C service and when done, massages the results into the expected format and resolves the promise.

And yeah - that's it. But as I said, it wasn't immediately obvious to me based on the release notes so I hope this helps others.


(Tue, 15 Apr 2014 16:46:00 -0400)
[view article in new window]

Google Hangout - Debugging Mobile Web/Cordova Apps - A Quick Review

This Friday at 1PM CST, I'll be hosting an online Google Hangout about debugging mobile web/Cordova applications. This is a repeat of what I did at this years FluentConf, so if you couldn't make it, this is your chance. Note that I've set the meeting length to 1.5 hours. It will be much shorter than that. The original presentation was 30 minutes and I anticipate it taking about the same. I'm not sure what Google Hangouts will do if I go past the end of a meeting so I wanted to ensure we didn't get cut off. For folks who can't make it, it will be posted to YouTube about an hour later.

Debugging Mobile Web/Cordova Apps - A Quick Review


(Tue, 15 Apr 2014 09:46:00 -0400)
[view article in new window]

Multi-File Uploads and Multiple Selects (Part 2)

A while back I wrote a simple example of using JavaScript to add file previews for a multi-file upload HTML control. You can find that entry here: Adding a file display list to a multi-file upload HTML control. I followed it up with another example (Multi-File Uploads and Multiple Selects) that demonstrated adding support for multiple selections. This weekend a reader asked for a way to remove files from the list before uploading. Here is an example of that.

First - I had to figure out how users would remove files. I could have added a button to each image preview, or a link. Anything really. But to make things simpler, I decided that a click on the image would remove it. Obviously that may not be the best UX. I added a title attribute to help make this clear. You should be able to easily modify my code to change how this works. Let's look at the code and then I'll explain the changed bits. (If you didn't read the previous entries though, please do so. I won't be going over the basics again.)

<!doctype html>
<html>
<head>
<title>Proper Title</title>
<style>
	#selectedFiles img {
		max-width: 200px;
		max-height: 200px;
		float: left;
		margin-bottom:10px;
	}
</style>
</head>
    
<body>
	
	<form id="myForm" method="post">

        Files: <input type="file" id="files" name="files" multiple><br/>

        <div id="selectedFiles"></div>

        <input type="submit">
	</form>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	
	<script>
	var selDiv = "";
	var storedFiles = [];
	
	$(document).ready(function() {
		$("#files").on("change", handleFileSelect);
		
		selDiv = $("#selectedFiles"); 
		$("#myForm").on("submit", handleForm);
		
		$("body").on("click", ".selFile", removeFile);
	});
		
	function handleFileSelect(e) {
		var files = e.target.files;
		var filesArr = Array.prototype.slice.call(files);
		filesArr.forEach(function(f) {			

			if(!f.type.match("image.*")) {
				return;
			}
			storedFiles.push(f);
			
			var reader = new FileReader();
			reader.onload = function (e) {
				var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
				selDiv.append(html);
				
			}
			reader.readAsDataURL(f); 
		});
		
	}
		
	function handleForm(e) {
		e.preventDefault();
		var data = new FormData();
		
		for(var i=0, len=storedFiles.length; i<len; i++) {
			data.append('files', storedFiles[i]);	
		}
		
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'handler.cfm', true);
		
		xhr.onload = function(e) {
			if(this.status == 200) {
				console.log(e.currentTarget.responseText);	
				alert(e.currentTarget.responseText + ' items uploaded.');
			}
		}
		
		xhr.send(data);
	}
		
	function removeFile(e) {
		var file = $(this).data("file");
		for(var i=0;i<storedFiles.length;i++) {
			if(storedFiles[i].name === file) {
				storedFiles.splice(i,1);
				break;
			}
		}
		$(this).parent().remove();
	}
	</script>

</body>
</html>

The first big difference in this version is the use of jQuery. I didn't really need it before so I used querySelector instead. I needed to make use of jQuery's simple handling of post-DOM manipulation event binding (let me know if that doesn't make sense) so I added in the library. I've added my click handler here:

$("body").on("click", ".selFile", removeFile);

I then modified the image display to include the class and title attribute.

var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";

Notice I added a div around the image and file name. This will make sense in a second. Now let's look at the handler.

function removeFile(e) {
	var file = $(this).data("file");
	for(var i=0;i<storedFiles.length;i++) {
		if(storedFiles[i].name === file) {
			storedFiles.splice(i,1);
			break;
		}
	}
	$(this).parent().remove();
}

Not really rocket science. I find the file in the existing list, remove it, and then remove the image/file text from the DOM. Done.


(Mon, 14 Apr 2014 08:57:00 -0400)
[view article in new window]

Results of PhoneGap Survey

Thank you to everyone (all 229 of you) who responded to my PhoneGap/Cordova survey. The survey asked what version of PhoneGap or Cordova you used, how quickly you upgrade, and asked what problems you had (in general) with PhoneGap and Cordova. I've included an Excel sheet of all the results below. Let's look at the numerical results first.

First up - what version of Cordova are you using.

I expected to see a set of folks still on 2.9.X as the 3.X change was big, and there does seem to be a set of folks not upgrading, but they are in the minority. This is good to know. Now let's look at the PhoneGap side.

Pretty much the same thing. No surprise there. Next I asked how quickly folks upgraded.

It looks like - for the most part - people upgrade when they can or right away. Which is a good thing I guess. It implies there isn't a strong barrier to upgrading.

So that covers the easy stuff. Now what about the problems folks had? If you download the XLS sheet (again, attached below) you can see the full set of comments. What follows is my personal take on the results. I do not speak for the PhoneGap team, or the Cordova project. I consider myself a "interested developer" just like y'all so keep that in mind when reading my comments.

One big theme was performance. I know this is an issue for older Android browsers. There are definitely steps you can do to improve performance in your Cordova apps, but maybe this needs to be addressed in the docs more clearly? For example, there is a privacy guide which is cool, so I think it makes sense to add one for performance as well. My gut tells me this isn't the kind of thing where they can provide a "magic bullet" solution, but I think some direction could be useful here.

And speaking of documentation, this also came up quite a bit in the responses. I saw specific mention of the FileSystem (I've gotten a crap ton of questions about this lately). I also saw folks call out the docs on new versions. I can say that the teams do blog posts on new versions, typically called out by platform, but you probably don't see that if your first entrance is just docs.cordova.io. Again - can we do something on the docs site perhaps to make it easier to see what has changed?

I should point out that by "blog" I mean the "News" section at cordova.apache.org. There is a subscribe link there but it is just RSS. A way to get these items via email would be nice as it would be more direct.

Debugging was mentioned a few times, and one user had this to say in particular: "Debugging is still painful - more so on Android, Safari remote inspector on iOS makes that a little more bearable." I wonder if they are aware that you can remote debug Cordova and Android now? Again - perhaps there should be a guide in the main doc table of contents to discuss this?

I saw a bunch of remarks about plugins. Some of these were for things out of our control, specifically third-party plugins. If someone makes a cool plugin and never updates it, you need to lean on them, not the PhoneGap/Cordova team. Other comments talked about discoverability. If you aren't aware, the Cordova Plugin Registry got a major overhaul in the past few days. Check it out.

Next, there were multiple comments about PhoneGap vs Cordova. This comment was quite interesting: "What the hell is Cordova anyway? Docs just start talking about it like I'm supposed to know, I thought I was using phonegap?" So it looks like not only are there some folks still confused by the split some aren't even aware that there was a split.

Speaking for myself... I'm focusing on Cordova. Period. When I present, I mention both CLIs, and I mention the excellent PhoneGap Build. But for all intents and purposes, I'm going to talk on Cordova, blog on Cordova, and pay attention to the Cordova CLI only. That makes it easier, and easier for my readers I think. (And when I say "I will only" - well, honestly, I'll probably screw up too. Heck, look at the title of this blog post.)

Finally, here are some comments regarding installation and usage. (As a quick edit - I want to be clear that I respect the fact that people took the time to answer this survey. I feel like I'm coming down on a few people in a somewhat harsh manner. Please know that it isn't personal. I think we can agree to disagree on things and hopefully you expect me to use this blog for my honest, somewhat-unbiased, opinion on things.)

"The 3.x installation. Phonegap requires node.js, requires ant, just to install. And then the install doesn't work and gives me cryptic messages. Please make a proper installer."

"Having to type things in to a command line. Why no GUI? Not ideal for beginners. The tutorials make too many assumptions. I just want to use PhoneGap Build with Dreamweaver and utilise a few features of PhoneGap to access basic phone functions. I thought I could just put a phonegap.js file into my development folder but now I'm told I need to use node.js and type in commands. I don't get it."

"The CLI is hard to setup and to use for web developers, particularly I had to install platform SDK. We need an easy to develop without any platform knowledge and installation."

Well, not to be rude, but I think you (and by you, I'm speaking generically of course!) need to get over it. Like it or not, Node, or more specifically, npm, is becoming a default requirement for modern web development. More and more tools make use of it for ease of installation and updates. You can't ignore it. Hell, you don't have to even really learn it per se, but you should get comfortable with using npm to install tools. It isn't going away.

I do think the 2.9 to 3.0 change could have been addressed a bit nicer for folks (which is why I tried to blog on it as soon as possible - it kind of caught me by surprise as well!).

What about the Dreamweaver and PhoneGap Build user? Well, PGB does make it rather easy. Write some code. Upload a zip (or use Dreamweaver's built-in support), and voilĂ , you get some bits. That's darn useful. That being said, you are going to want to learn how to do it the "manual" way at some point. Building locally is faster, easier to debug, and in the end, you get more control. Even if I were using PGB to handle my builds for a production release, I'd have my local environment set up so I could build locally during development.

And finally - the comment about "without any platform knowledge" is not only wrong, it is dangerous. You should not think of Cordova as "write once, run anywhere". Yes, you can write once and spit out builds for multiple platforms! But you need to be aware of every single platform. They all have their own performance considerations, their own UX considerations, and their own feature differences. I make the same argument about hardware. I can build for iOS using the simulator on a Mac. I can build for iOS using my PC and PhoneGap Build. But it would be ludicrous for me to assume that is good enough. I need to buy, and test, on real hardware or I am not doing my job. Period.

So... there ya go. Two more things I want to leave you with. I'm going to schedule a Google Hangout next week that will be a repeat of my FluentConf session on mobile debugging. If you want to see Remote Debug for iOS and Android, and Weinre too, come check it out. I'll record it for folks who can't attend. Also, the sessions I did in the past over Adobe Connect that were general Q and A worked very well I think. I don't know if a Google Hangout would work well for that, but I definitely plan on hosting an open Cordova QA session soon.


(Fri, 11 Apr 2014 14:07:00 -0400)
[view article in new window]

Update to my JavaScript Behance API

After "speaking" with a reader yesterday about my Behance JavaScript API, I've decided to go ahead and promote it to a proper GitHub repository. You can now find the code here: https://github.com/cfjedimaster/BehanceAPI.

I also updated the API to support getProject. There are still a lot of things missing. I'm basically adding functions as people ask for them, but with the number of demos I've built with it I thought it was time to move it over to GitHub. Enjoy.


(Fri, 11 Apr 2014 07:10:00 -0400)
[view article in new window]

Recording and demos from my ColdFusion 11 presentation

Thanks to the Salt Lake City UG for allowing me to present to them last night. You can watch a recording of the presentation via the link below. I've also attached a zip of the demo files.

Recording URL: http://experts.adobeconnect.com/p44kjhiqxjf/


(Thu, 10 Apr 2014 09:20:00 -0400)
[view article in new window]

getSafeHTML and ColdFusion 11

One of the cooler new features in the next version of ColdFusion is getSafeHTML. I had seen this mentioned a few times already but it never really clicked in my brain what it was doing. getSafeHTML makes use of the AntiSamy project. It takes user-generated content and replaces unsafe HTML. What is safe and what isn't? It is totally up to you. The functionality is driven by an XML file (a very complex XML file) that lets you get as granular as you want. Want to support the bold tag but not italics? Fine. Want to support colors for CSS but only some? You can do that. Let's look at a simple example - and one that happens to point out a little issue.

<cfsavecontent variable="test">
This is some <b>html</b>. Even <i>more</i> html!<br/>
<iframe src="http://www.cnn.com"></iframe>
</cfsavecontent>

<cfoutput>
<pre>
#getSafeHTML(test)#
</pre>
</cfoutput>

In my sample input, I've got a B tag, an I tag, and an iframe. getSafeContent will strip out just the iframe, leaving the bold and italics there. This is rather cool I think. But in my test I discovered a little bug. The actual result of the above code is this:

This is some <b>html</b>
. Even <i>more</i>
 html!<br />

See the line break after the closing B tag? That moves the period to a new line, which renders as a space in the browser. I did some research and discovered that there is a particular setting in AntiSamy that modifies the result with a bit of formatting. In this case, the formatting breaks my HTML. So how to fix?

As I mentioned, AntiSamy is configured by an XML file. There is a default one for the server. You can override the XML file at the Application.cfc level or in your call to getSafeHTML itself. I did some Googling, found a sample file, and then did the modification to the setting in question:

<directive name="formatOutput" value="false"/>

This goes within the directives block. I'm going to file an ER to add this to the default XML for ColdFusion 11.


(Wed, 09 Apr 2014 21:52:00 -0400)
[view article in new window]

Upcoming ColdFusion E-Seminars

Just a quick FYI to let you know about some upcoming ColdFusion e-seminars. These are online presentations open to the public.


(Wed, 09 Apr 2014 14:16:00 -0400)
[view article in new window]


© The connection to the CAMDEN's RSS feed has timed out - please try again later. We are sorry for any inconvenience this may have caused.