O'Reilly

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API....

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

  • CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of 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!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...