CF Builder vs Sublime Text 2 Resources Comparison

Posted: May 15, 2013 in ColdFusion, Sublime Text
Tags: , ,
4

Now that I’ve got my Sublime Text 2 plugins all installed and configured to what I mostly prefer, here’s what both take up in terms of resources when first booted up:

IDE RAM Disk
CF Builder 2.0.1 185,420 K 525 MB
Sublime Text 2.0.1 47,232 K 20 MB + 67.5MB App Data

Also take into consideration that Sublime Text takes only a few seconds to start, which ColdFusion Builder takes around 1/2 minute.

Now if I could only get some better “IntelliSense” type support for CF like CFC introspection – that’d be awesome!

World Internet Usage Animated Map

Posted: May 15, 2013 in Uncategorized
0

This is pretty cool and informative – although the data was gathered by some perhaps illegal means. Found on psfk.

“Hackers have published a research paper detailing how they built a 420,000-node botnet resulting in an impressive map of the Internet over a 24-hour period.”

JavaScript Sort Object

Posted: May 9, 2013 in JavaScript
Tags: , , ,
0

I just created a JavaScript method that sorts a JavaScript object by key name case insensitive. Source at https://gist.github.com/CFJSGeek/5550678.

/**
 * Sort JavaScript Object
 * CF Webtools : Chris Tierney
 * obj = object to sort
 * order = 'asc' or 'desc'
 */
function sortObj( obj, order ) {
	"use strict";

	var key,
		tempArry = [],
		i,
		tempObj = {};

	for ( key in obj ) {
		tempArry.push(key);
	}

	tempArry.sort(
		function(a, b) {
			return a.toLowerCase().localeCompare( b.toLowerCase() );
		}
	);

	if( order === 'desc' ) {
		for ( i = tempArry.length - 1; i >= 0; i-- ) {
			tempObj[ tempArry[i] ] = obj[ tempArry[i] ];
		}
	} else {
		for ( i = 0; i < tempArry.length; i++ ) {
			tempObj[ tempArry[i] ] = obj[ tempArry[i] ];
		}
	}

	return tempObj;
}

jQuery UI Widget Factory Live Binding

Posted: May 8, 2013 in JavaScript
Tags: , , , , ,
0

I recently developed my first jQuery UI Custom Widget using the jQuery UI Widget Factory. I found the Widget Factory to be a nice framework for what I needed to do and took away a bit of the complexity normally needed for a UI plugin.

It did introduce a level of complexity for live event binding. For example, I want all dynamically generated anchor tags to run a method when clicked.

The Widget Factory wants us to use the “this._on” method to accomplish this. The Widget Factory is a little undocumented so it was hard to figure this one out.

At first I tried the following:

$.widget( "CFWT.myWidget", {

	_create: function() {
		this._on('.myClass', {
			click: function(event) {
				var $container = $(event.target);
				doSomething($container);
			}
		});
	}
	
	_doSomething: function(container) {
		console.log(container);
	}

});

However I quickly found out that the event was only bound with any classes created the first time. After some Q&A on Stack Overflow I finally figured out the correct way.

$.widget( "CFWT.myWidget", {

	_create: function() {
		this._on(this.element, {
			'click.myClass': function(event) {
				var $container = $(event.target);
				this._doSomething($container);
			}
		});
	}
	
	_doSomething: function($container) {
		console.log($container);
	}

});

This new code will bind any “myClass” class that is created inside the widget’s container. If you want it document wide then replace “this.element” with “document” or another container.

You may also notice that I use “$(event.target)” instead of “this”. That is because “this” doesn’t change to the event. Instead, I believe, it remains at the widget level, which can be pretty confusing.

A working example can be found at http://jsfiddle.net/vEAhq/8/

Sublime Tern

Posted: May 8, 2013 in JavaScript, Sublime Text
Tags: ,
0

Thanks to Emmet for releasing the “Sublime Tern” package. It implements TernJS into Sublime Text.

“TernJS is a JavaScript type inference engine written by Marijn Haverbeke. It analyses your JS code on-the-fly and provides autocompletion, function argument hints, jump-to-definition, and various automatic refactoring operations.”

I like stuff that “just works”, but since this package is pretty new it lacks a bit of documentation and Q&A.

I did also try the newly released official “TernJS for Sublime” package but that just became complicated compared to Emmet’s version and seemed to slow the editor way the heck down. So I uninstalled that rather quickly. I’m sure it’ll become much better as time goes on.

If you take a look at the TernJS Demo, you’ll see right away that using Ctrl-Space after the characters “co” will auto-complete to “console” or “confirm”. This is something I expected to “just happen” in the Sublime Tern package. But to my horror, it appeared that it just didn’t work.

After some discussion in GitHub, I finally figured out that you have to add some libraries into the project settings, which is kind of annoying. But I did just see that they released a new update to GitHub just now that will accept defaults for library loading which will be quite nice.

But basically here’s the answer to solve what appeared to be “broken” to me. Add this config object to your sublime-project file (Project > Edit Project):

"ternjs": { "libs": ["browser"] }

But I almost always use jQuery so I also added that:

"ternjs": { "libs": ["browser", "jquery"] }

Now I see the auto-completion options I was looking for.

If you program in JavaScript I highly recommend installed one of the two TernJS packages.

The reason I looked so deeply into this was because Adobe’s Brackets implemented it and it was touted as a great feature to have!

ColdFusion Console Display Terminal Style

Posted: May 1, 2013 in ColdFusion Servers
Tags: , , ,
2

One thing I loved about ColdFusion Builder was the console view. But I recently switched from ColdFusion Builder to Sublime Text 2, which doesn’t have that feature. So I needed a solution.

It seemed that running ColdFusion via a local service wouldn’t do the job, but running it from the command line would.

One approach was a simple batch file located on my desktop:

\ColdFusion9\runtime\bin\jrun -start coldfusion

You would then see a scrolling console display and press Crtl-C to stop ColdFusion. It was kind of annoying you’d have to press Y and enter afterwards too when prompting if you wanted to abort the batch file. I would always end up re-sizing the window as well to fit in with my email, Skype and TweetDeck on one dedicated screen.

On option I took note of after installing the Sublime Terminal plugin, was to run it inside Windows PowerShell with a default set of options. This works great and you don’t have to confirm aborting the batch file. I can even label the window.

I have the shortcut link and settings file in a Gist at https://gist.github.com/CFJSGeek/5498377

2013-05-01_1624

jQuery Issue With Multiple Selectors and clone()/appendTo()

Posted: May 1, 2013 in JavaScript
Tags: , , , , ,
0

On a current project, the website was and many interactive jQuery “modules” where supplied by a 3rd party designer. We I pieced it together with ColdFusion everything worked great on IE8+, FF and Chrome. However it was soon discovered that a large customer of the client couldn’t upgrade past IE7 at the moment. After running the JavaScript through jsLint, that fixed the majority of the issues. Heck, just a couple of commas out of place will make a nightmare out of IE7.

However there was an issue that took me a whole day to figure out. (We’re talking thousands of lines of code to debug with no error being thrown).

As a general description, the site is a customized e-commerce site in its basic functionality. It has a category navigation tree to the left, with a product result grid to the right. When an item on the grid is clicked, the grid is hidden and replaced by a product detail section populated via AJAX.

First of all, there where around 1,500 categories that where populated into the DOM on page load via an un-ordered list. It was then converted into a cascading tree. The way you’re supposed to do it for accessibility and SEO purposes right? Well, IE7 didn’t take too kindly to that and took about a whole minute to display. IE8+ took probably around a second.

To resolve this issue I created a jQuery UI Widget via the Widget Factory. This required upgrading the version of jQuery being used, and I chose the latest one at 1.9.1 that still supported IE7.

After the tree was created and implemented, it became clear that only one product in the product grid was showing as opposed to the 15 for each page.

I determined that jQuery 1.7.2 loaded the grid as expected, but both 1.8 and 1.9 versions only loaded one. The method used to populate the grid was to clone a hidden div, populate it, append it to the parent container and make it visible using data from an AJAX JSON data set. It was looped via an $.each() method.

Because there where no errors being thrown, and I needed that newer version of jQuery I started the process of elimination. That process took me to the bitter end. I found that I couldn’t use multiple elements inside a selector. For example:

$('#myDIV1,#myDIV2').hide();

The above would inhibit all but one cloned container to be displayed. The workaround was to split up the selectors:

$('#myDIV2').hide();
$('#myDIV2').hide();

This would only happen in IE7. IE8+, FF, and Chrome worked just fine. It also only happened in jQuery 1.8+.

I could reproduce this any time, ripping out most of the app down to the essentials.

However at this time, creating a basic app in another virtual site works just fine. I may try to figure it out at a later time, but right now I can’t duplicate the issue.

But I’m writing this in case anyone runs into this edge case and needs a workaround. Hopefully I can find the cause and submit a bug to the jQuery team.

Older Entries