I’ve been working with JavaScript for roughly 4 or 5 years at this point. My first apps, if you can even call them that were randomized ads being server from an array on my buddies web site once his traffic picked up. It was not only my first attempt at JS, but also one of the early programming lessons of my life. With that said I’m old school, I can write an AJAX request by memory, I can tell you about the days of old using invisible iframes and having inter page communication between objects to do essentially what XMLHttpRequest does now (yes I know, using them is still a key to many apps). With that said doing a good ole getElementById(’x') never phased me in the least. The idea of building a DOM structure with document.createElement and document.appendChild…


var heart = document.createElement('heart');
chest.appendChild(heart);


With that said, I could continue down my route and stick to my ways, but a man that stands still in his knowledge is a man that gets left behind. So I’ve started researching JS frameworks and the pros and cons of these now necessary evils/saints.

I personally fell for jQuery. Clean syntax, ease of use, functionality… all of these things put it leaps and bounds ahead of it’s competitors in my book. Looking over Prototype.js markup usually makes me walk away from the computer grumbling about a nose bleed and makes me smoke a cigarette. With that said I’m not your typical JavaScript programmer from my experiences working with others in this field. I feel that a good JS program much like any other should consist of “Objects” since the language is considered OOP, or atleast some what I tend to take advantage of that. For more complex applications I’ll write a series of objects with self contained functionality to control multiple facets of an application. An example of this would be a web based jabber client I wrote about a year ago.

The interface and most every functionality was controlled via a series of objects. I’ll give a short example of what I mean.


function Chat()
{
this.connected = this.establishConnection();
etc.
}

Chat.prototype.handleMessage = function(ejabberdPacketObject)
{
var chatInstance = this.activeChats[ejabberdPacketObject['username']];
if(!chatInstance)
{
this.activeChats[ejabberdPacketObject['username']] = new Conversation(ejabberdPacketObject);
etc.
}
}

function Conversation(incomingConversation)
{
this.username = incomingConversation['username'];
this.appendChatLog(incomingConversation['message']);
}

Conversation.prototype.appendChatLog = function(msgText)
{
msgText = this.username+" : "+msgText;
this.chatLog += msgText;
etc...
}


For all of the fans of Object Literal Notation, I know I’m a sinner, but I really do believe prototyping objects is the way to go because of readability and memory management. I’ll make it up to you and write the next piece in OLN.

So long story short I’m working on a dynamic Pedigree builder, it’s rather simple really, it needs to build out the HTML DOM dynamically adding generations to a pedigree. But I figured I would use jQuery to ease some of the extra markup overhead of appendChild and getElementById calls plus get all the fancy fancy shiny flashy effects as well. I ran into an interesting issue that gave me a headache for a few hours so I wanted to present it to whoever may be running into the same issue and propose my fix.

See when I do development I like to store references to my DOM elements in Object properties to prevent looking over the DOM again plus it just makes it easier to grab DOM references in context.


this.myDiv = $('#gen1');
this.addGenBtn = $('#gen1 input.add_generation');


Using that with jQuery would fetch the input with a class name of ‘add_generation’ inside of the DIV with the ID ‘gen1′. Which is great, we get the correct element back and all the extra functionality supplied by jQuery including the ‘click()’ functionality… I know I know I could use ‘onclick’ but as my Grandpa says “If you’re gonna get wet, might as well go swimming”… basically what I’m saying here is if you’re using the framework, might as well implement it wherever you can. So now that we have the reference in place we can do stuff like this.


Pedigree.generations[5].myDiv.append('stuff');
Pedigree.generations[5].addGenBtn;


Another habit of mine is also passing the reference of the parent object to the DOM node itself for cross reference purposes. This way the DOM node can “phone home” easily and react to user information and interaction accordingly. Such as this.


this.addGenBtn.Parent = this;


Now this may seem kind of clumsy but I’ll show you why I do it personally.


function Generation()
{
this.myDiv = $('#gen1');
this.addGenBtn = $('#gen1 input.add_generation');
this.addGenBtn.Parent = this;
this.addGenBtn.click(this.addGeneration);
}
Generation.prototype = {
addGeneration:function()
{
this.Parent.myDiv.append(this.Parent.blankGenTemplate);
}
};


See now the functionality from an event also has a reference to it’s parent properties and methods. This can be very very handy in the long run. And this is where the problem set in. When the ‘click’ event handler fired, yes, it passed back the associated DOM element as expected. Meaning if I placed a console.log() call and logged ‘this’ to firebug I was seeing the DOM reference I expected. However, any properties and methods I added to that DOM object were neutered.


...
addGeneration:function()
{
console.log(this); // returned input DOM node...
console.log(this.Parent); // returned 'undefined'
}
...


Now me being an old school developer I’m used to saying “getElementById” and getting back exactly what I expected, any new methods or properties I add to that element will reside there until otherwise noted. So this threw me for a loop, but a simple loop that I was looking at from the wrong angle. See jQuery hands back an Object of it’s own when you “query” the DOM. This is what leads to all the fancy added functionality, so although it appears you’re getting back just your DOM node with some extra methods slapped on the end you’re really receiving and jQuery object with your DOM reference tucked neatly inside.

Long story short should someone run into something along the lines of this and require a cigarette much as I did when there is a very simple, very quick, and very easy fix… I almost don’t feel like even publishing this article because I know some people are going to go “well no shit dumbass” but I feel like there might be someone out there that could use this information. SO here it goes.

When you “query” the DOM as mentioned above it returns a custom jQuery object so appending methods/properties to that object does indeed append them, but it does so in the jQuery Object scope which could indeed be useful in some cases. However when using the event controls such as ‘click()’ the scope returns the event reporter. This is why in the example above logging ‘this’ outputs the input element, but it doesn’t see a .Parent reference. It doesn’t see this reference because we technically never put it in place. The trick to fixing this is damn simple though.

See when a jQuery object is returned it’s much like a prototyped/extended array. If you check the object out you’ll see it has a .length property and THIS is where it stores the raw DOM references. So basically using it like an array is the trick.


this.addGenBtn = $('#gen1 input.add_generation');
this.addGenBtn[0].Parent = this;
this.addGenBtn.click(this.addGeneration);


Now in that example we grabbed the first node of the array which is the raw DOM element to create our .Parent property. Now we can use the idea’s stated above without skipping a beat. Also note that if your “query” returns more than one item you can easily loop over the object just like an array and achieve the same idea like so.

this.divControls = $('div.collapsible');
// loop over DOM elements and reference parent object
for(var a=0,z=this.divControls.length; a(lt*)z ; a++)
{
this.divControls[a].Parent = this;
}
this.divControls.click(this.handleCascade);

*(lt) = word press won’t allow a less than because of template munge.. so yea, sorry.

So, with everything we’ve discussed here, I now give you an example (non functional) of the kind of functionality I was trying to achieve.


// pedigree class
function Pedigree()
{
this.init();
}
Pedigree.prototype = {
generations:[],
init:function()
{
// hook up DOM and such
}
},

// generation class
function Generation(parentGen)
{
this.init(parentGen)
}
Generation.prototype = {
init:function(parentGen)
{
this.parentGen = parentGen;
this.masterPedigree = this.parentGen.masterPedigree;
this.generation = this.parentGen.generation+1;
this.buildDOM();
this.hookupDOM();
},
buildDOM:function()
{
// create interface, skipping these
},
hookupDOM()
{
var divName = '#gen'+this.parentGen.generation+'-'+this.generation;
this.myDiv = $(divName);
this.addBtn = $(divName+' input.add_generation');
this.addBtn[0].Parent = this;
this.addBtn.click(this.addGeneration);
},
addGeneration()
{
this.Parent.masterPedigree.push(new Generation(this.Parent));
}
}


Hope this helps anyone else that runs into scoping/object confusion using jQuery later on. If anyone has any questions or comments I’d love to hear them. To the JS dev. community… I know my ways might seem a bit unorthodox so I’m sure I’ll get nice and crucified.

If anyone is going to the Ajaxian conference in Boston next week (Sept. 29th – Oct. 1st) and would like to hang out and shoot the shit feel free to drop your email here and I’ll get in touch.

For those interested in learning more about jQuery jQuery homepage.

Once again, hope this helps, and sorry it’s so damn long ;)

I sometimes come across sites that are just way too weird to write about on this site, while others such as this have me scratching my head when I think about what the title should be. So, truck spills is, well:

The website of odd, strange, interesting, and unbelievable things spilled on the road by trucks.

I was going to pick one of the random spills to talk about, such as the exploding whale, the goats or even the chicken parts spill. But I couldn’t do it, I couldn’t pick just one. But man, it is mind boggling the sorts of things there are sites for.

Read More

Are you a fan of Origami but can’t for the life of you figure out how they do it? Why not start small, with Cubeecraft? The site is as straightforward as it gets: click on a character on the page which links to the printable template image, then cut and assemble. There’s no need for any sort of adhesive which is encouraging. New characters will be added each week. If anyone is trying this out, let us know what how it came out! (Pics or it never happened.)

Read More

Want to use a web-based calendar but can’t because of syncing, or lack thereof? Google Calendar Sync was unveiled tonight allows you to sync your Google Calendar with your Outlook Calendar. The program works both ways and should prove useful for anyone who fancies having their Calendar data available wherever they are.

Read More

Tekzilla daily gives us this useful tip for searching any sites that you go to frequently. Make sure to set up keyword for UNEASYsilence!

I’m an avid Facebook user and I try to keep my Application use at a minimum. One major annoyance is the applications that require you to invite friends before you can do anything. Applications like Jetman do it in a less annoying way – you invite friends to get points to unlock new characters. But what if you don’t have the 20 friends required to be invited to use the application? Or what if you just want to cheat the system? Drag the “skip forced invites” bookmarklet to your Bookmarks toolbar and click on it when you’re on a page in Facebook for an application requiring you to invite friends. Now choose how many invites you want it to spoof the application into thinking you sent and you will be the envy of all your friends having unlocked the mermaid, Kirby and Magic Schoolbus on the same day in Jetman. Giggity, giggity.

Try It

Kill Dead Pixel is a new game where you play a lowly computer user who found a dead pixel on his LCD monitor and wants to try fixing it. Actually, sorry, it’s not a game, but pretty much just reality. So if you’re in the position above and want to try fixing a dead pixel, give this site a try. Simply drag the graphic to the dead pixel and leave it for an hour. If it doesn’t work, go in full screen mode and try it out for 12 hours. I sadly have no dead pixels to tell you if this works or not, but if any of you have use for this and try it out, let us know how it goes. Now I just need to figure out if killing a dead pixel means it’s now a brain-eating undead zombie pixel.

Try It.

Published in 1954, Fitts’s Law is one of the most important governing rules of good interaction and usability design. It’s a pretty complex and multi-layered concept, and while easy enough to explain in words, to really get a good understanding of it, one really needs pictures. The stunningly designed Particletree has a very good visual breakdown of the law, and some good commentary on best practices for its application. If you do any sort of UI design, you really do need to check this out.

The engineers in Cupertino aren’t historically ones to keep old technology around in their products for sentimental– or even practical– reasons. Apple was the first major computer manufacturer to move their entire product line to USB peripherals, the first to make FireWire standard, and one of the first to offer notebooks with ExpressCard instead of PCMCIA.

It makes one wonder then why on earth they’ve kept that useless caps lock key around. Sure, its part of the standard keyboard layout (and arguably not for much longer– the OLPC has no such key), but since when has Apple really cared that much about standards?

It seems, though, that even if Apple isn’t dropping caps lock all together, they’re at least making it less of a nuisance to those of us WHO DON’T SEND EVERY EMAIL AS IF WE’RE YELLING ACROSS A CROWDED CITY STREET.

Jonathan Rentzsch of Red Shed software has figured out that the slim new Apple Keyboards are smart enough to ignore accidental caps lock activation. A quick jab at the key, such as the kind one would do on accident, is insufficient to trigger virtual screaming. Instead, users must hold the key down for a few milliseconds to get the undesired result. All the gory details, plus video, at Wolf’s site.

Apple may be a cold, uncaring faceless corporation; absent any empathy for your bricked iPhone plight, but their employees are a different story. Mac Genius’s have long had the power to bend the rules under special circumstances, and it seems the trend is continuing with reports coming in that some very lucky hackers have had their iPhone’s restored by a caring Genius. If this is true, Apple has a secret re-locking app that they only make available to their employees. What I wouldn’t give to get my hand on that hunk of code!

I’m lucky to not have to try this, but here are a few tips for garnering the sympathy of your local Genius:

- Act Stupid: “My friend/brother/dealer gave me this iPhone for my birthday/graduation, and when I tried to update it last night, it stopped working!” Don’t say brick, don’t be geeky– act the way your grandma would if she was in your position. Refuse to accept that someone “unlocked” your phone, and make sure to ask what unlocking is.

– Find a Geeky Genius: A lot of people unlocked their iPhones just so they could see what happened and have the experience of doing so– something that anyone with the hacking gene can sympathize with. Hang around and try to spot the guy at the bar with the most passion for technology and least concern for the corporate line.

– Beg: If all else fails, resort to pleading. These guys are busy, and would rather just re-lock the thing instead of having you standing there for an hour arguing with them.