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-2.png

Recent Features

  • Creating Scrolling Parallax Effects with CSS

    I generally dislike ESPN because they're the McDonalds of sports news but they recently did a piece on Luis Suarez that was eye-catching.  The content itself was great but their use of parallax and imagery was outstanding.  They've employed this technique...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS;...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet...

Incredible Demos

  • jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless...

  • PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may...

  • pointer Media Query

    This media query has not yet been implemented and is currently only a proposed spec. I've written this post to raise awareness of it and get general thoughts about it. As more devices emerge and differences in device interaction are...

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!

Use Code Editor