Treehouse

MooTools 1.3 Has Arrived!

By on  
MooTools FTW

After a year of hard work, listening to the MooTools community's needs, and some more hard work, the MooTools team is proud to release MooTools 1.3!  Below is a summary of what's awesome in MooTools at the moment.

Core 1.3

MooTools Core 1.3 is everything you got from 1.2 but with core pieces rewritten to make the entire framework faster and more efficient.  From the MooTools blog:

We have revised the whole base of our library to speed up MooTools, to provide an even more beautiful API and to make our library future-proof. In order to reduce the amount of global variables we have moved all $-prefixed functions into their according namespace ($splat » Array.from, …). In short we think that with 1.3 you are getting the best MooTools experience ever.

I promise that's the case.  A few other awesome improvements have been added:

  • Revised Core.js, added even more abstractions
  • Fixes for a lot of element attributes (maxlength etc.)
  • New Browser.js
  • New DOMReady implementation (!)
  • Array.each now chains! Yes, indeed.
  • Support for touch events on breakthrough communication devices
  • Array: forEach, map, some, every, filter now behave like the ES5 Spec in IE (skipping undefined values)
  • IE opacity style fixes
  • If you build without compatibility, Hash is gone. MooTools More 1.3 provides it from now on.
  • Elements now is an array-like-object instead of a real array.
  • Additions to Request - authentication, onprogress and other cool stuff
  • Numerous stability improvements

In short...MooTools.FTW++ !

More: 1.3RC

MooTools More's first release candidate is also ready to download.  While Core is a "stable" release, More is in release candidate mode and we would appreciate any and all feedback you could provide, including bug reports.

Slick!

MooTools 1.3 Core fully implements the powerful Slick selector engine created by Valerio, Thomas, and Fabio.  Slick is a beast of a selector engine and, as you would come to expect from a collaboration of MooTools Developers, Slick is extensible, compact, and powerful.  The piece of Slick and MooTools that I'm most excited about is the ability to create elements using a selector string:

var newElement = new Element('div#cow.moo.big[data-size=5]');

Awesome, huh?  Oh, and of course, Slick is extremely fast!

ART

Valerio and Sebastian have been working on a great vector graphics named ART.  While this project is not yet formally released, ART inches toward a 1.0 release.  Much like Slick, Art is modular, compact, and extremely powerful.  Click below to check out a few examples you can create with ART!

New Team Members!

The MooTools team has grown within the past year, adding Darren Waddell, Tim Wienk, Fabio Costa, and Arian Stolwijk.  Congratulations to these fine developers!  Their work is helping to push MooTools to a new level

FTW Factor

Needless to say, MooTools has increased its FTW factor exponentially.  Congratulations to the MooTools team and continued success!

ydkjs-6.png

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • Sliding Labels Using MooTools

    A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either! The HTML A...

  • MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

Discussion

  1. Bill

    So, what’s it take to upgrade? I’m on 1.2.1

    • There’s a great chance, depending on how “deep” your knowledge is, that the upgrade will be seamless. If you’ve done a lot of advanced development, you may have to change a few things. Not likely though.

  2. What a great news ! Thank’s a lot for this beautiful job, I’m gonna test this today !

  3. MooTools FTW!

  4. This just made my day! MooTools FTW!

  5. Oh, and btw, how can I get that shirt? :D

  6. Brandon

    Where can I find more info on the new touch events? I’m not seeing them in the docs.

  7. Brian

    I actually built a Dojo module that’ll let you create nodes from a CSS selector. I’ve never actually used it for anything, but I’m curious to know if you (or anybody reading) have any thoughts.

    http://dl.dropbox.com/u/557187/dojoModules/brian/util/create.js

  8. Brian

    Might’ve been nice to show you the test page for my module:
    http://dl.dropbox.com/u/557187/dojoModules/index.html

    You can play with it in Firebug like this:
    dirxml(brian.util.create(‘div#main>p.link*2>a[href=/foo/]‘))

  9. Smile

    Hello, first of all great news [MooTools FTW !!!]. But I’m sorry for may be a stupid question. How to replace “bindWithEvent” with “bind” within a class in case like this:


    this.someElement.addEvent('click', this.clickFunction.bindWithEvent(this, this.someOtherElement));

    ....

    clickFunction:function(e,someOtherElement){
    // something ..
    }

    I’m sorry for my bad English :)

    • Dan

      I would also like to know this.

    • this.someElement.addEvent('click', this.clickFunction.bindWithEvent(this, this.someOtherElement));
      

      try

      this.someElement.addEvent('click', function(event) {
      				event.stop();
      			    this.clickFunction.apply(this, [this.someOtherElement]);
      			}.bind(this));
      
    • oops….

      [event, this.someOtherElement]

  10. Also curious about the “Support for touch events on breakthrough communication devices”. Any reference links about this?

    • Expect a blog post in the next few days! :)

  11. Thomas

    Any word on when MooTools 1.3 will be hosted on http://code.google.com/apis/libraries/devguide.html ?
    This is something that would ease my life a lot.

    • I have the same question.. will make life so much easier

    • Very soon guys. There’s always a small delay in case a major bug needs to be fixed quickly.

  12. Nice News, Thanks for sharing, I was eagerly waiting for slick….

  13. MooTools 1.3 is now available on Google CDN.

    • Dan

      Will 1.3 without 1.2-compatibility-layer be uploaded to Google?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!