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 ;)

All of these methods work, success greatly varies depending on your work and thought style however. With this in mind I will say that Journler isn’t going to be for everyone… or maybe it is!

Price:
journler right from the get go won me over with it’s price … FREE! (as in beer. for now). This is a “feature” pretty much non-existent in this software market with some apps/suites costing up to $130! Now you probably noticed I said “(for now)” above, this is because the developers are moving the application over to a shareware model… everyone’s gotta make ends meet.

Features:
The feature set is what sold me (as it should be when using an App.) it can be as cut dry and simple or as needlessly complex as you desire. This is something we don’t usually see. From most of the “personal productivity” software I’ve used you’re given a series of tools and a set idea as to how they are going to be used. Not the case with journler.

Notes:
Keep your thoughts stored just how you had them. Attach files, record your own video or audio clip. Insert HTML elements … make a todo list with HTML checkboxes. Toss pre-fixes on list items or high light a line out of a copy and pasted paragraph. I would go so far as to say that the interface for composing and organizing your ideas inside your notes rivals Word or Open Office.

Organization:
Labels, Tags, and Folders on my! Corny I know, but seriously you’ve the ability to organize your notes any given way… even multiple ways! Using Labels and Folders would be enough to keep a veteran personal productivity app user happy. When you consider Tagging and Smart Folders along with this the way you organize your ideas almost becomes blaring obvious.

Smart Folders: (my favorite feature)
It’s like real time message filtering for your notes. You’ll create a Smart Folder that doesn’t actually contain anything, nor will it ever per-say. Smart Folders are more like a logic location, any give item can span multiple Smart Folders based on that items characteristics. I’ll give you a simple example.

I’m a web developer by choice and trade, I love it. With that said at any given time I’m usually juggling work, freelance, and my own projects simultaneously. This means I have serious collisions of time and ideas. I might have 50 separate tasks from 3 different projects 13 of which are Urgent. Now rather than look over notes from a 3 projects and find the ones I’ve labeled as “Urgent” I could simply create a smart folder. Using the stupid simple interface I could add a “requirement” or “exclusion” for items that should appear in this folder. In my example I’ll say I want “all” notes with a “label” or Urgent. The smart folder would instantly populate with my 13 labeled notes for all projects/categories/etc.

Great!… now lets say an entire project is placed on developmental hold, these tasks are no longer urgent because of the dev freeze but once that project begins development I’ll need them to remain urgent. I could now edit my Smart Folder and depending on your organizational preference exclude that project from showing up in said filter. If using folders you could tell the smart folder to “exclude” notes from folder “project foobar”… or if using tagging (my preference) “exclude” notes tagged “foobar”.

Application Integration:
Talk about stream line! Journler hooks into some of OS X’s most popular Apps. While composing a note attach a file (also note the files are reference pointers, so if you update that file… it’s updated in the note) using finder… or view an attached file in Finder. However you can also attach a contact from your Address book, or email a file/note from Mail. Attached an XLS file… have Office installed, it already knows and shows the Office Excel Icon as the viewing option. Listen to an MP3 file you’ve attached or watch a vid right inside the app using native Quicktime support. Hook dates into iCal and link them to existing iCal entries. It even hooks into Spotlight, just type in the title of the note you want to view and Spotlight tracks it down, hit enter and it opens right up in Journler. All of this is done so smoothly you’ll start to wonder why other applications don’t do it the same way. As if that wasn’t enough Apple Script integration allows you to write your own functionality!

Summary:
I consider journler although one of my newer Apps easily one of my MVP apps. As I get more used to it and discover new ways to use and implement it the more I fall in love with it’s simplicity and functionality. I’d suggest everyone give it a week worth of trial and see if you don’t agree. It’s so open anyone could find a way to utilize it…. and I mean anyone… Soccer Mom’s to NASA engineers.

check it out @ http://journler.com/

As a huge fan of single user sign on UNEASYsilence is now allowing commenting via OpenID. We are utilizing the WP-OpenID plugin and all you need to do is plugin your OpenID URL into the website field in our comment area and you are good to go!

A Comcast insider tells me the company is considering implementing very clear monthly caps, and may begin charging overage fees for customers who cross them. While still in the early stages of development, the plan — as it stands now — would work like this: all users get a 250GB per month cap. Users would get one free “slip up” in a twelve month period, after which users would pay a $15 charge for each 10 GB over the cap they travel. According to the source, the plan has “a lot of momentum behind it,” and initial testing is slated to begin in a month or two.

“The intent appears to be to go after the people who consistently download far more than the typical user without hurting those who may have a really big month infrequently,” says an insider familiar with the project, who prefers to remain anonymous. “As far as I am aware, uploads are not affected, at least not initially.” According to this source, the new system should only impact some 14,000 customers out of Comcast’s 14.1 million users (i.e. the top 0.1%).

[...]

The new cap will be coupled with plans to increase enforcement of DMCA letters sent to P2P pirates. “Up until now, letters sent out to account holders have not been tracked,” the source says. “This will change, with progressively increasing penalties, up to disconnection of the account after four letters within a 12 month period.” This will be one way Comcast can maintain their promise to be “protocol agnostic,” while still booting some high-consumption users.

How about before Comcast upgrades their billing and tracking system, they focus on better quality of service for their users.

Read More

This little guy is VERY similar to its Linux counterpart with the following specs:

• Intel® Celeron® M processor with 400MHz frontside bus and 900MHz processor speed
• 512MB DDR2 memory for multitasking power
• 7″ WVGA TFT-LCD widescreen display with 800 x 480 resolution
• 4GB flash-based hard drive; shock-proof design
• Intel® UMA graphics with up to 64MB shared video memory
• Built-in Web cam
• 3 high-speed USB 2.0 ports
• Built-in high-speed wireless LAN (802.11b/g); 10/100 Mbps Ethernet LAN (with RJ-45 connector)
• Microsoft Windows XP Home Edition

Not bad for $399 if you ask me and based upon my experience with the Linux eeePC that I installed Windows XP on the performance is perfectly acceptable for a secondary travel laptop.

Read More

Comcast has announced that it will lift the ban on BitTorrent traffic, which prevented its users from sharing files using the popular protocol. The ISP and BitTorrent Inc. will work together on finding customer friendly solutions for the congestion allegedly caused by BitTorrent traffic.

Comcast has announced that it will stop targeting BitTorrent transfers and has said it will invest in its network capacity. For the time being the company will throttle users who use the most bandwidth, not all BitTorrent users per se.

I’m glad that Comcast decided that spending money on capacity, rather then filtering equipment is the way to keep customers happy. A decision like this can also add to Comcasts bottom line in that with additional Comcast can offer premium data packages that customers could subscribe to.

Read More

How come my feed shows up full text in some readers and in some readers it is cut off?

The biggest offenders of cutting off a feed is the dumb .Mac reader on the iPhone and Firefox. I’m using Feedburner and am completely stumped. Any advice is welcomed. (This post WILL self destruct)

They are graciously (?!) offering FREE telephone tech support for compatibility problems up until March 18, 2009. If using a telephone isn’t your style they also offer online chat support as well as email responses.

Not a bad deal to help push this poorly adopted OS.

Read More

If you want to upgrade, now would be the time to do it.

Read More