via ajaxian: read the full article

The DOM can be a painful beast at times. When you ask for the childNodes of an element, most of the time you’re just wanting the element nodes only and you’d like to completely ignore the text nodes. Using Prototype, you could write something like the code below:

element = $(element);
element.cleanWhitespace();
$A(element.childNodes).each(function(element) {
  element.setStyle({color: '#ccc'});
});

That would be a quick fix, but remember, we’re not supposed to be repeating ourselves. Read the rest of this entry »

I’ve been working on a little project that involves creating some tools for any of CNET’s sites including our back end tools. I’ll post more on the project when it’s presentable, but in the process of working on this I have, of course, run into questions about cross domain security brick walls and how to transport portions of the data to create a consistent and persistent experience for the user.

Here are a couple of articles that I’ve found that I think could be useful:

Mashup Data Formats: JSON versus XML
This is a nice article outlining from a fairly objective perspective the differences between these two data formats/transport systems. They both have advantages and disadvantages, but it’s helped me understand when to use one vs. the other and how to get around certain problems by making the right choice at the right time.

The Case For JSON: What Is It and Why Use It?
Another article on why to use JSON that’s a little more detailed. This fellow definitely has his mind made up, so he’s not really going into xml’s positive aspects so much, but he does a great job of shining a light on JSON.

Look Ma, Cross-Domain Scripting!
Same author as the previous link but focused on one of JSON’s biggest assets: it’s ability to get across domains. It’s tricky stuff, and it’s not clear to me how to make the data go both ways (to and from a foreign server), but it has some useful code snips and demonstrations on how do do some of it.

Get your AJAX indicators here. Simple yet useful. (via Ajax Review) Read the rest of this entry »

At the bottom of the prototype tutorial I just posted is this great article on Encytemedia.com that digs into the Enumerable and Hash functions of the library in greater detail. There’s a lot of great stuff in here.

each and friends

I used to find myself writing a lot of for loops. Although, Prototype doesn’t by any means eliminate the need to do for loops, it does give you access to what I consider to be a cleaner, easier to read method in each.

for(var i = 0; i < F.Numbers.length; i++) {
  logger.info(F.Numbers[i]);
}

each allows us to iterate over these objects Ruby style.

F.Numbers.each(function(num) {
  logger.info(num);
});

//Output
0
1
4
5
98
32
12
9

each takes one argument, the iterator or block in Ruby terms. This iterator is invoked once for every item in the array, and that item along with the optional index is passed to the iterator. So if we also needed the index we could do something like the code below.

F.Numbers.each(function(num, index) {
  logger.info(index + ": " + num);
});

//Output
0: 0
1: 1
2: 4
3: 5
4: 98
5: 32
6: 12
7: 9

Bill Graham was asking me about where to put javascript events today. window.onload? At the bottom of the html document? Attached to the onload event of an image somewhere in the page?

Here’s an article by Dean Edwards on an interesting solution that works for IE and Firefox.

For the life of me, I can’t find the article that I read a week or so ago on this topic that outlined numerous strategies on dealing with window.onload issues, but one option to consider is using event monitoring in prototype to monitor the browser for an element to be present before performing an action on it.