Articles by ‘Arian Stolwijk’

MooTools 1.4.5 Released

Written By Arian Stolwijk, on Sunday, February 26th 2012, 9:00pm

MooTools Core 1.4.5 is a maintenance release for the 1.4 branch.

1.4.5 brings a critical bugfix for Fx.CSS which caused many troubles for tweening and morphing your element styles. The bug was caused by a fix in 1.4.4 which should improve animating other length units like % or em (see #2160. Many of you noticed the bug and filled bugreports and also helped us testing this new release.

We have improved our tests and are planning to freeze the code for a new release for a longer period so we can gather more feedback to prevent potential regressions. If you’re interested in testing a new release in your application, you can ping us on IRC (#mootools on freenode.net), Twitter (@mootools / @astolwijk) or in the MooTools User Group.

Fixes

  • #2280 - Fx.CSS breaks Fx.Morph and Fx.Tween
  • #2289 - .setProperty() should trigger .toString()

Contribute

Send us issues (tickets) or feature requests to the MooTools Core Issues or report your problems in the MooTools User Group.

Get it!

MooTools 1.4.0

Written By Arian Stolwijk, on Saturday, September 10th 2011, 9:16am

As of today a new version of MooTools is available. This includes MooTools Core and MooTools More. We’ve communicated a lot about changes for 2.0 but we also felt we had some good stuff that would benefit you directly which we wanted to add to the 1.x releases. This good stuff contains of course numerous bugfixes but mostly one important new feature for MooTools Core: Delegation. This 1.4 release should be fully backward compatible with the MooTools 1.2 and 1.3 series’.

So all changes for 1.4.0:

  • Move Delegation into Core.
  • ECMAScript 5 compatibility fixes. Among them are Function.bind, Array.map and String.trim
  • Deprecate Element.setOpacity() and Element.set('opacity'). Element.setStyle('opacity') is the only correct way now (the same applies for getters).
  • Disable the 1.2 compat layer by default in the builder.
  • Revamp Element.getProperty, Element.setProperty. Element.getProperty uses Slick.getAttribute now to share this code and save some bytes.
  • IE7 doesn’t crash anymore when cloning an element twice.
  • The Selectors documentation is back and updated for Slick.
  • Update Slick to 1.1.6
  • Unified change event behavior across browsers.
  • Renamed Event to DOMEvent so it will not conflict with the native Event object.

Event Delegation

Event delegation is a common practice where an event listener is attached to a parent element to monitor its children rather than attach events to every single child element. It’s more efficient for dynamic content or highly interactive pages with a lot of DOM elements.

Example

var myElement = $('myElement');
var request = new Request({
    // other options
    onSuccess: function(text){
        myElement.set('html', text); // No need to attach more click events.
    }
});
// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    request.send({
        url: target.get('href')
    });
});

MooTools More

  • Removed Delegation. It’s now in Core obviously.
  • Added the length validator to Form.Validator
  • Added the update method to HtmlTable which let you update rows
  • Added ARIA accessibility to Tips.

If you’d like to know what exactly changed, checkout the compare view.

We would like to thank everybody who has contributed code, documentation fixes and ideas to make this release possible. Among them are arieh, Delapouite, madisvain, adamnbowen, mooyah, GCheung55, amadeus, rasmusfl0e, jasonwaters, realityking, Nico-B, mcfedr, donatj, csuwldcat, ibolmo, cpojer, kamicane, timwienk, fakedarren, anutron, subtlegradient and myself arian.

Bugs

Thanks to GitHub contributing is easier than ever. It’s very easy to fix them or to report them, especially since we moved to GitHub for our issues. Bugs can reported on the MooTools Core Bug Tracker and for MooTools More you can go to the More Bug Tracker.

If you have any questions, either about how to do something or about contributing you can ask, or something to share, just join the MooTools Mailing list or IRC (#mootools on freenode.net). We have an office hour each Tuesday but you can hang out there whenever you want.

Get it!

Moving to GitHub Issues

Written By Arian Stolwijk, on Monday, August 1st 2011, 7:14pm

We at the MooTools headquarters love GitHub for all its features which makes contributing and managing our code much easier than say, five years ago. GitHub is the place to be for all cool JavaScript projects which makes following your projects of interest a lot easier. When we moved to GitHub a long time ago, the ticket system was too basic to be a real solution. Fortunately this has since improved.

Especially the additions for milestones and assignees were important for us. With this in place GitHub issues can finally replace Lighthouse.

The main advantages are:

  • Everything at one place, one login
  • Easier to follow MooTools
  • Similar to pull requests

A disadvantage is that most of the current issues are in Lighthouse. Darren did an awesome job going through a lot of them but there are still some open or not fixed. A proposed option was to move all tickets to GithHub, but we decided to try to address as many as we can and just move on to GitHub.

Now every MooTools project has its issues on GitHub:

So if you know anything about any of the issues at GitHub or some old Tickets at Lighthouse, comments and fixes are highly appreciated!

MooTools Core 1.3.2 and More 1.3.2.1

Written By Arian Stolwijk, on Thursday, April 28th 2011, 3:23pm

Today we announce the simultaneous release of MooTools Core 1.3.2 and More 1.3.2.1. This is mostly a bugfix release and does not contain many new features. The most important fix is within our selector engine, Slick, which failed in some cases where the selectors began with an operator (ex. ~div).

A new component has been added to MooTools More: Table. Table was slated to be added in MooTools Core 2.0, but we’re making it available in MooTools More now. Table is similar to the JavaScript object literal, but where an object can only have a scalar value (string or number) as a key, Table can have any value as a key. Where the order of values in an object is not static like an array (by specification, usually browsers keep the order which they are defined), the values in Table will have a static order. These advantages come with a performance cost, where an object value is a direct look-up, Table uses indexOf which is less efficient, so use with care.

Notable changes in MooTools Core include:

  • 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]');

MooTools More:

  • 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

Get it!

Events with MooTools - Element, Class, Delegation and Pseudos

Written By Arian Stolwijk, on Monday, March 28th 2011, 2:18pm

One of the most useful and common part of MooTools is its Events Type. There are two Event usages: Element and Class. Element.Events is probably the most known because that’s probably one of the first things you’ve used when you started using MooTools. Furthermore, MooTools More 1.3 Events.Pseudos has been introduced to give even more power and control over Events and with Event Delegation can give your page a massive performance boost. This blog post will give you a deeper insight into all components.

(more…)