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

Facebook back in August, let super secret code out. Which made its rounds on the internet before it has now died down. Due to the fact that, a extremely large social network, let out it’s source code opened the alley for media to scrutinize Facebook.

Due to the code being leaked, a PHP developer wrote a article about securing your site, making sure no valuable code is leaked.

I suggest reading up on this, as any practice that secures your code, is a practice you should know.

I didn’t have time to pass this around over the holiday break, but the IE team announced a few weeks ago that they got IE8 to pass the ACID2 test!

[UPDATE] Garrett pointed out the IE team interview video linked page on the page. I thought it might be nice to link directly to it for you non-reader types.

After recently launching a flash site developed in AS3, a stupid, stupid bug appeared that caused a slight amount of brain trauma. In InternetExplorer 6 the site loaded, and worked fine. But when you would navigate elsewhere and come back to the site, everything was all screwy. The alignment was off and the site wouldn’t initialize. Clear your cache, reload and everything was perfect. So, obviously its a cache problem, and it only occurred in IE6.

Here’s how I had my project set up:

Read the rest of this entry »

So, my thanksgiving break consisted of 4 days of leftovers and HBO On Demand. I also decided to make this nice little thingy. I have been talking about the new SoundMixer class introduced in AS3 for some time now, but I never utilized it. Well, I decided to create an equalizer using the new SoundMixer, Graphics and ByteArray classes introduced in AS3. It’s not too hard and can be implemented in soooo many ways.
http://www.maxrox.com/expirements/equalizer/
Source Code

Taking it one step further, I decided to include a little papervision3d magic. The result ended up looking very cool. It didn’t require an insane amount of code and runs fairly smooth.
http://www.maxrox.com/expirements/3dequalizer/
Source Code

We’ve been using subversion pretty extensively recently and loving the idea of it (though it is rather finicky). When reusing files for multiple projects, often you’ll want to just copy and paste folders and files right into another project. This poses a problem when using subversion because if the folder already contains .svn files, you won’t be able to add it to another repository. So, you first must delete those files. This is the command line script we’ve been using to remove them (recursively from the directory you are currently in):

find . -name .svn -print0 | xargs -0 rm -rf

It’s a pain having to open terminal though, so here’s a nice way of accomplishing the same result using Automator:

You can find all of these actions under “Applications” in the Automator Library. Starting with (1) Ask for confirmation, we prompt the user to make sure they want to continue. (2) Gets a list of selected finder items [if you had a group of directories selected, it makes a list of those]. At (3), the script we were using before is run on each item (removing the “.svn” file in each directory):

for f in "$@"
do
	find "$f" -name .svn -print0 | xargs -0 rm -rf
	echo "$f"
done

Then at (4) it outputs the list of items cleared to a text file on the desktop. When compiling to a plug-in (explained further down) I have this “disabled” so I don’t get that textfile every time. Perhaps you could do something like output the results to the console.

You can then go to File > Save As Plugin… Save the file (I called it “ClearSVN”) as a Plug-in for: Finder. This enables you to right click a directory, go to Automator… and select “ClearSVN” which would clear the .svn files inside that directory!

NOTE that this is for OS Tiger. In Leopard, the actions seem to be slightly different, but could be updated to work the same way.

Download source

Working with ActionScript 3, we’re finding plenty of bugs that others have found and have experienced some intermittent crashing due to garbage fonts, but yesterday we had a doosy that lasted all day. The site was running fine and frame-rates were great, but we could pretty consistently crash (or at best get a spinning color wheel on ) any browser (safari, firefox, ie 6 + 7, mac, windows) when you closed the window containing the flash movie (closing the browser window with a hot key or clicking the close button). We started by removing all our code; first papervision code, then removing the content that was being displayed, then all embedded fonts … it was pretty stripped down. It was not until the content was removed that the browser crashes subsided. So, we started googling the hell out of “flash player 9 crashes closing window” and randomly came across this post where user nikonratm noted the following:

Tweening the position of a TextField that has a mask, as soon as I close the movie window the program crashes, whether it be in the Flash (CS3) IDE or in a browser.

This was the first instance we had found where the crash was specific to closing the window. So, we went through and removed all masking and no crashes. We then added each mask back and tested and got to a point where we slimmed down the crash culprit as a directly masked text field that had a TextFormat applied to it (also it had embedded fonts, not sure if that had anything to do with it), i.e. a TextField that had a mask applied to it and not a DisplayObject containing a text field with a mask appled to the DisplayObject. You always had to put text inside MovieClips to dynamically mask in AS2 so it seems that either the implementation is faulty in AS3 or just moving or changing the text after it has been masked causes some kind of memory leak (which causes the browser to crash on close). Something like this:

var titleMasked:TextField = new TextField();
titleMasked.mask = gradient;

Perhaps a fix would be to put the text inside a sprite (at this point, I’ve spent so much time I’m not bothering to test it):

var titleSprite:Sprite = new Sprite;
var titleMasked:TextField = new TextField();
titleSprite.addChild(titleMasked);
titleSprite.mask = gradient;

To fix some of these issues, Adobe seems to think downgrading to flash player 8 is a good idea. Should we also go back to AS2 while this is resolved? I’m ready to after yesterday. Their solutions to bugs leave something to be desired. For example, one of their comments regarded the Loader classe’s inability to close streams when uploaded:

You cannot expect an “unloaded” movie to close its net streams automatically.

Well, it may not close the stream automatically, but if you create method called “unload,” I’m going to have the expectation that it’ll unload something. Perhaps there’s an undocumented unloadAndCloseStreamAutomatically.

Macie J outlines ten cool new features in the latest Safari release. This is the version of Safari that ships with Leopard, and is included with the Tiger 10.4.11 software update. One of the biggest highlights for me is full support of the TinyMCE rich text editor.

There’s also quite a bit of other super advanced stuff, like SVG, CSS3 support and the new web inspector. Stuff we’ve been enjoying for a while in the WebKit nightly is finally in the real world. Good stuff.

[UPDATE] I can’t get the below process to work, but found that a thread on Marc Linyanage forum where he appears to be in the process of creating his PHP package installer. Have patience! Solution is eminent. I’m experimenting with his builds.

[UPDATE] PHP isn’t compiled with GD library by default. Here are instructions on how to recompile it with the necessary libraries. Fuck.

[UPDATE] The most comprehensive solution to date is here.

I just put Leopard on my MacBook this morning and can’t get MySQL running. Leopard comes with Apache 2, so some directories have changed. To get PHP running, you’ll need to modify your config file thusly.

As far as MySQL goes, nothing I’ve found on the internet works. Still hunting … I’ll keep you posted here. In the mean time, DO NOT UPGRADE