Lets say, you are making a site, were everything is AJAX, and you rely on event handlers to know when people double click on this element, drag the image across the site, etc. Normally you would start listening to things once the DOM fires (when the page loads), but problem is, it only fires once.

Here is an example of a normal “onload” listener in Prototype.js:

Event.observe(window, 'load', function () {
$$('tr[rel="file"]').each(function(element) {
element.observe('click', function(event) {

new Ajax.Request('file_info.php', {
asynchronous: true,
method: 'get',
parameters: 'ajax=true',
onComplete: function(t) {
$('files').update(t.responseText);
}
});
event.stop();
});
});
});

So, once the window loads, tell every table row with the rel attribute named “file” to some things once its clicked (in this case, gets the file info). Problem is, with all the new table rows coming in, Prototype wasn’t told to listen to the new table rows, only the previous ones that are gone.
Read the rest of this entry »

I was wrapping up on a project, and the time came where the color on the lists (1, 2, 3) needed to be different colors than the actual <li> inside needed to be. The only solution is to wrap any content inside the <li> with some sort of tag to target the text to change the color. Although that has no problem at all, what if this needs to be site wide? It will be very cumbersome to remember, let alone do it to every list you create.

I decided to use JavaScript to search for every <ol> and for every <li> inside of it, then it goes ahead and wraps it in the selector that changes it back to default color. In this case its a <span>.

This is what it does, this will be the before HTML:

<ol>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
</ol>

And, after the JavaScript does its thing:

<ol>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
</ol>

Here is the JavaScript:

window.onload = function () {
   var li = document.getElementsByTagName('ol');
   for(i=0;i<li.length;i++) {
      if(li[i].childNodes[1].nodeName == 'LI') {
         var li_count = li[i].childNodes.length;
         for(b=0;b<li_count;b++) {
            li[i].childNodes[b].innerHTML = '<span>'+li[i].childNodes[b].innerHTML+'</span>';
         }
      }
   }
};

Here is the CSS:

.container ol {
	padding: 8px 10px 8px 25px;
	list-style-type: decimal;
	color: #c19203;
	font-weight: bold;
	}
	.container li {
		padding: 4px 0;
		}
	.container ol span {
		font-weight: normal;
		color: #333;
		}

Max and I were having trouble getting our flex project synced up with flex. It kept throwing errors, like:

Error: Error while performing action: Can't copy '/Volumes/Files/Project/Assets/Wireframe/bin-debug/.svn/text-base/index.template.html.svn-base' to '/Volumes/Files/Project/Assets/Wireframe/bin-debug/.svn/tmp/index.template.html.tmp.tmp': No such file or directory

Finally we decided we need to just ignore the bin folders. That stuff gets autogenerated all the time by flex, so I think it’s a reasonable solution. This article has some related info, but it’s for Flex 2 and I don’t think it applies directly. For now I’m just doing the bin folders and seeing if that’s enough to stop the svn errors.

First thing I do is have my mail forward from gmail to an imap account on our dreamhost dev server. This is because I don’t like how gmail handles flagging. But essentially, I setup Mail.app to check my mail via imap. I leave my Inbox in threaded view and I use that for looking up old conversations. The crux of what I do differently is I have a smart folder named “To Do” that I am in most of the time and essentially my real inbox. Here are it’s settings:

Thus, this smart folder shows anything I’ve flagged and anything that is new. Also, when you unflag or read something it doesn’t disappear. So really, this todo folder shows all recent stuff as well, until you click to look at a new folder. In addition, I color code emails too using groups in my address book. Green is BKWLD, blue is friends, orange is family, etc. So, my todo mailbox ends up looking like:

This way I can quickly keep track of new things and stuff that still needs attention. And I achieve the zero stuff in inbox serenity if I can work through all the flagged and unread emails without having to actually move or delete things.