They covered topics such as what is MooTools, the future, MooTools vs. jQuery, using MooTools and jQuery together, MooTools for frameworks and a bunch of other stuff.

Thanks for mentioning Neuro MVC, you guys! More on Neuro MVC later… but just a teaser: It’s an MVC I built with MooTools.

Garbage Collection?

Yes, garbage collection. Elements can take up a lot of memory. Add events and items stored with Element Storage to the mix and there are more things to worry about than just the elements themselves. To help with memory issues, MooTools helps with the garbage by removing events and items stored using Element Storage methods (Element.store and Element.retrieve). But it doesn’t do it with every method that involves removing elements.

Elements.dispose
The dispose method does not handle garbage collection. It only removes the element node from the parent node.

Elements.empty
The empty method does not handle garbage collection either. It uses the dispose method when removing the child nodes of an element.

Then What Do You Do?

Well, if you intend to remove a collection of elements completely, then the simple thing is to have them all destroyed. Keep in mind doing so means that if you want to add that element back (because you kept a reference of it somewhere) then it won’t have items stored in its storage or events you’ve previously attached.

1
2
3
4
5
6
7
8
9
10
11

//If you want to get all the elements in an element using the getElements method...
someElement.getElements('*').destroy();
 
// or if you want to use the getChildren method...
someElement.getChildren().destroy();
 
// or if you already have an array of elements...
[element1, element2, element3].invoke('destroy');
 
// or if you already have a collection of elements...
$$('.elementsToDestroy').destory();

The trick!

var iframe = new IFrame({
    src: 'javascript:""' // Workaround for HTTPs warning in IE6/7
});
 
// Need to inject so that iframe.contentWindow exists
iframe.inject(document.body)
 
var win = iframe.contentWindow,
    doc = win.document;
 
// Mootoolize window, document and body
Object.append(win, new Window);
Object.append(doc, new Document);
if (Browser.Element){
    var winElement = iframe.contentWindow.Element.prototype;
    for (var method in Element){ // methods from Element generics
        if (!method.test(/^[A-Z]|\$|prototype/)){
            winElement[method] = Element.prototype[method];
        }
    }
} else {
    document.id(doc.body);
}
 
// Write the HTML into the document
doc.open();
doc.write('');
doc.close();
 
// Place the markup into the iframe's document body
doc.body.innerHTML = '<p id="test">Test!</p>';
 
// Check that the iframe exists, and the parapgraph is retrievable with MooTools
console.log(iframe, doc.getElement('#test'), win.$('test'));

Thanks to Lim Chee Aun and MooEditable – A simple web-based WYSIWYG editor, written in MooTools that he wrote. That’s where I got this snippet!

twhat is ze cleanest way to remove duplicate items from an array

I wrote a few solutions until I got what I think is a fairly quick and short snippet to remove duplicate items in an array. It’s really basic. There are probably a few cases this doesn’t cover.. such as objects with different ordered items but containing the same contents. I also didn’t test these solutions for their performance.

Assuming the following code before each solution:

1

var orig = ['a', 'a', 'b', 'c', 'b'], arr = [];

1. Execute a function during each loop of the original array that checks if the new array contains the item using the Array.contains method. If it doesn’t exist, then add the item to the new array with the Array.push method.

1

orig.each(function(item){ if (!arr.contains(item)) {arr.push(item);} });

2. Same as 1. but checks for the index of the item in the new array. If the item doesn’t exist in the new array, Array.indexOf method will return -1. If so, then add the item to the new array with the Array.push method.

1

orig.each(function(item){ if (arr.indexOf(item) == -1) {arr.push(item);} });

3. Execute the MooTools Array.include method, which is bound to the new array, during each loop of the original array. The Array.include method will be executed to include the item in the original array if the new array does not already contain the item.

1

orig.each(arr.include.bind(arr));

4. Same as 3. with the exception that the Array.include method isn’t bound to the new array prior to executing the loop. The Array.include will be bound to the second argument, in this case the new array, during the loop.

1
2
3
4
5

orig.each(arr.include, arr);
// or
orig.filter(arr.include, arr);
// or
orig.map(arr.include, arr);

So, how do you undo a commit in git..?

But what is git?

If you don’t know what git is..

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Eureka! The solution:

I searched for a solution and happened upon a solution on Stock Overflow.

Undo a commit and redo

$ git commit ...
$ git reset --soft HEAD^ (1)
$ edit (2)
$ git add .... (3)
$ git commit -c ORIG_HEAD (4)

This is most often done when you remembered what you just committed is incomplete, or you misspelled your commit message, or both. Leaves working tree as it was before “reset”.

Make corrections to working tree files.

Stage changes for commit.

“reset” copies the old head to .git/ORIG_HEAD; redo the commit by starting with its log message. If you do not need to edit the message further, you can give -C option instead.

This has been super helpful.

But hey, something happened and I’m back in the game.

A little update: I’m now employed at Fitbit Inc. I left in March 2012. What made me do it? Lots of changes were going on that triggered my curiosity about the world beyond.

Things that haven’t changed: I’m still passionate about MooTools.

Anyways, I’ve got a few things to share. So I’ll start with this much. Stay tuned, if you’d like.

-Garrick-

Event Types

There are three types to what the value can be in the property: 0, 1, or 2.

Type 0 doesn’t usually appear in Element.NativeEvents because custom events are type 0 by default. Adding a custom event to the Element.NativeEvents object and setting it to type 0 is the same as it not existing in the object. Custom events need to be triggered with the fireEvent method.

Note: fireEvent method can also trigger native events.

Type 1 represents events that don’t have event information passing into the callback function. domready and load are two examples of events that don’t pass an event argument into the function attached to the event.

Type 2 represents events that DO have event information passing into the callback function. It also helps normalize the event object that is passed in. click, focus, and blur are three examples.

It’s Important Because…

MooTools or any other lib/plugin built with MooTools may not have added support for a native event that you need. With the knowledge of native event types, you can easily add them to the Element.NativeEvents object.

At the time of this writing, MooTools-Core 1.4.5 Element.NativeEvents objects code looks like:

1
2
3
4
5
6
7
8
9
10
11
12

Element.NativeEvents = {
	click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse buttons
	mousewheel: 2, DOMMouseScroll: 2, //mouse wheel
	mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //mouse movement
	keydown: 2, keypress: 2, keyup: 2, //keyboard
	orientationchange: 2, // mobile
	touchstart: 2, touchmove: 2, touchend: 2, touchcancel: 2, // touch
	gesturestart: 2, gesturechange: 2, gestureend: 2, // gesture
	focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, paste: 2, input: 2, //form elements
	load: 2, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window
	error: 1, abort: 1, scroll: 1 //misc
};

They show the native events that are available, but by no means is it a comprehensive of every single event out there.

With this list, you can basically add any native event listed to an element.

1
2
3
4
5
6
7
8
9
10
11
12
13

// Create an image element.
var element = new Element('img');
 
// Attach the load event. It's a Type 1 so data isn't passed into the function
element.addEvent('load', function(){
    // Once the image has loaded, inject it into the document body.
    this.inject($(document.body));
});
 
// Change the element's source so it will start loading an image.
// Setting the src of an image will automatically make it begin downloading.
// Once that's complete, it will trigger the load event that's attached to the element.
element.set('src', 'http://somePath.com/img/abcd.jpg');

More information about Element.NativeEvents has been added to the MooTools documentation.

Changes (and I quote!) to Core

• Fixed Slick bug with ~div-like selectors
• Fixed MooTools in the Node.js environment
• Fixed an exception in DOMReady in Chrome when the page with MooTools was in an IFrame
• Fixed setOpacity for very small numbers in IE
• Fixed an exception in FireFox 4 when MooTools tried to overwrite document.head
• Added the possibility to create elements with boolean values with an selector, e.g. new Element(‘input[checked]‘);

Changes to More (that I also quote):

• Rewritten Element.Position which solved some issues
• Added Table, as described above
• Ironed out some Event Delegation issues
• Additional fixes can be found at the Lighthouse for 1.3.2.1

Yay, MooTools developers! You guys are seriously stepping up with a quicker release. In the words of my friend David Walsh: MooTools FTW!

Changes (and I quote!)

• Lots (and by that I mean LOTS) of documentation improvements, clarifications and cleanups
• Updated Slick to 1.1.5 and improved the speed of our Slick selector engine
• Added delegation support for submit, focus, blur, reset, change and select events in MooTools More
• If available the native JSON methods are now used in JSON.decode and JSON.encode
• Multiple Pseudos click:relay(a):once (demo)
• Two new pseudo events: :throttle and :pause
• Added String.truncate to String.Extras in More
• More than two hundred changes to increase the stability of both Core & More

MooTools Dev, you’ve been quite awesome. Keep up the great work!