a:4:{s:5:"child";a:1:{s:0:"";a:1:{s:3:"rss";a:1:{i:0;a:6:{s:4:"data";s:3:" ";s:7:"attribs";a:1:{s:0:"";a:1:{s:7:"version";s:3:"2.0";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:1:{s:0:"";a:1:{s:7:"channel";a:1:{i:0;a:6:{s:4:"data";s:65:" ";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:4:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:8:"MooTools";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:24:"http://mootools.net/blog";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:8:"The Blog";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:13:"lastBuildDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Fri, 02 Dec 2011 21:30:16 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"language";a:1:{i:0;a:5:{s:4:"data";s:2:"en";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:9:"generator";a:1:{i:0;a:5:{s:4:"data";s:29:"http://wordpress.org/?v=3.0.1";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"item";a:15:{i:0;a:6:{s:4:"data";s:41:" ";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:23:"MooTools 1.4.2 Released";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/45J-BZc5yB0/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:69:"http://mootools.net/blog/2011/12/02/mootools-1-4-2-released/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Fri, 02 Dec 2011 21:03:31 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:32:"http://mootools.net/blog/?p=1508";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:354:"Today we release MooTools Core 1.4.2 which is a small maintenance release. Upgrading from 1.4.1 should not cause any backward incompatibilities. We recommend all users upgrade to 1.4.2 as soon as possible. Fixes #2073: Reduced redundant call to onTimeout if async option is true. #2083: Fixes Element.clone in IE. #2085: All specs are green across. [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:6:"ibolmo";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:3841:"
Today we release MooTools Core 1.4.2 which is a small maintenance release. Upgrading from 1.4.1 should not cause any backward incompatibilities. We recommend all users upgrade to 1.4.2 as soon as possible.
onTimeout if async option is true.Element.clone in IE. Element.erase('class') did not clear the class.button.set('type', 'button') is now fixed for webkit bug.Element.fade chain.$uid method is no longer exposedmouseenter and mouseleave. Element.fireEvent in IE is now accessible in via Element._fireEvent.Element.NativeEvents, Fx, Request.JSON, and conflicts between Array and Elements methods.Object.each enumerationElement.adoptElement.Delegation problem with non-elements.These issues will be fixed subsequently prior to release of the next maintenance release.
These fixes and improvements would not have happened if you didn’t submit an issue (ticket) to the MooTools Core Issues, or reporting your problems in the MooTools User Group. Send us your (MooTools) issues (or feature requests) so that your favorite JavaScript framework keeps getting better.
Just a quick update to let you know we’ve added comments through Disqus to all Forge plugins.
If you’re a plugin owner, you can subscribe by going to your plugin page and clicking ‘subscribe by email’ at the bottom.
Remember, if you find a bug in a plugin, you should always report it in that repository’s Github Issues.
As it stands, all comments will need to be moderated before they appear, just to make sure we don’t get trolled / spammed and we’re really looking forward to adding the ability to comment to the other parts of the website - particularly in documentation.
Thanks to Aaron for making this happen!
Today we release MooTools Core 1.4.1 which is a small maintenance release and as such only fixes bugs that were introduced in previous releases. We have fixed the mousewheel event in Firefox, Element.fade sets the visibility CSS-property again, Event.Delegation now behaves properly if you use fireEvent and we have fixed a couple of issues with Element.setProperty and Element.removeProperty.
Upgrading from 1.4.0 should not cause any backward incompatibilities. We recommend all users to update to 1.4.1 as soon as possible.
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’.
Element.setOpacity() and Element.set('opacity'). Element.setStyle('opacity') is the only correct way now (the same applies for getters).Element.getProperty, Element.setProperty. Element.getProperty uses Slick.getAttribute now to share this code and save some bytes.change event behavior across browsers.Event to DOMEvent so it will not conflict with the native Event object.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')
});
});
length validator to Form.Validatorupdate method to HtmlTable which let you update rowsIf 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.
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.
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:
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!
Every week the MooTools developers host an IRC OfficeDeveloper Hour where they work together to listen to your feedback, answer your questions, and develop MooTools. We do this every Tuesday at 11am EST at #mootools Freenode IRC Channel. Everyone’s welcomed to join us.
This recap includes:
Sean McArthur (seanmonstar) is working on a MooTools-based MVC Framework called Shipyard. The framework is made for working on the browser, but it can run on Node.JS. He’s been testing Shipyard and we mentioned that he should try the mootools-runner which runs the specs for Core and More. The Runner can be run via the browser, node.js, or CLI (via JsTestDriver). It’s lightning fast and easy to contribute to. All specs are written in Jasmine and mocked by Sinon.JS.
Another user talked to us that he’s in high school in Colorado, and that he’s trying to convert his church to use MooTools instead of jQuery. We recommended that he should try to ween the church off of jQuery by using Ryan Florence’s moo4q, a helper to bring Object Oriented programming to jQuery.
Another user had asked if anyone had worked on HTML5’s pushState, and we’ve pointed him to MooTools’ own Christoph Pojer’s PowerTools. In particular, if you’re looking for a history plugin I highly recommend mootools-history.
Last week we asked the channel: Where do you guys think MooTools can improve? We’re always glad to hear from our users and here are a few notable mentions from last week’s questionaire.
Lighter weight: alpha123 had mentioned that there are some utility methods that he never uses and could go. Likewise, xandros pointed out that between 1.2 and 1.3 the same build with specific dependencies had grown in size. I couldn’t agree more. We’ve always been careful with the size of your builds by giving you the power to build the smallest build possible with the online web builder or with Packager. Undoubtedly the 1.y.x branch has grown in size due to maturity and contributions from the team and our users. I’d like to personally try to arrange a “Dependency Cops” team that tries to monitor and reduce the baggage in some of the dependencies. We’d like for you to help us, though. In spare time (if any) read the source code and try to find sections of code that can be moved or refactored into its own file. This way we can reduce the bytes in the dependency chain. Send us a pull request.
Marketing and Evangelism: jazzman had mentioned that MooTools marketing and evangelism could definitely improve. Historically, MooTools core developers have shied away from marketing MooTools as a product. We’ve done this to reduce distractions and instead we’d focus strictly on the code. (If you build it, they will come.) I think that as a team we’re shifting our beliefs towards being more vocal and open about our philosophies and code. We love MooTools and think that others would be surprised with MooTools and how easy our principles help to code better. Not just for MooTools, but JavaScript. And so, we are warming up to the idea to be proactive with spreading the Moo. And so should you. Just be courteous and qualitative. MooTools is not infallible and it’s not always the best tool for the job. We need responsible and honest people whose interests lies in improving code, coming to a solution, and moving forward.
More UI Goodness: UI components have been around since the beginning of MooTools (see: Accordion madness). We understand that many of you are looking for the team to build a UI framework, and we’d like to serve your needs. At the moment, however, we have bigger fish to fry (MooTools 2.0). Instead, please see this blog post for some mentions of UI libraries that are built on top of MooTools, or to use other libraries/frameworks (we’re all friends here). If you’re interested in championing this cause, then the best way to get an official (sanctioned) MooTools repo is to: do it™ and to keep us in the loop (ask us to review your commits).
More sourced content: We’d like to work on more screencasts, slideshows, presentations, demonstrations and other content that would help you understand MooTools as well as show it off to your friends, nemesis, or colleagues. We understand that it’s hard to convince your team members or employer to adopt MooTools. We are working to improve this area, but we need your help. Leave us a comment on how we can help you understand or overcome hurdles when speaking with people. I’ve had a few ideas: providing you with introduction presentations that you can give to your peers, for example.
Any other areas that you think we need to improve?
Darren Waddell has been working on your suggestions from past Office (Dev) Hours. In this sneak preview: each method has its own page and its own comment section (ala PHP). We’ve only shared this sneak peak with a few people and we’re already seeing contribution. To see the improved docs you’ll have to create a new cookie newdocs. Confused? Here’s the instructions on how to use the new docs:
javascript:Cookie.write('newdocs', true, {path: '/'}) into your address bar (or into a console).If you did the above correctly, you should see that the Element Docs have been split into individual pages.
Darren has done a great job so far. If you’d like to help please leave your suggestions or fork the mootools-docs repository.
Remember that we’re having the next office hour this:
05:01 - Honolulu (Hast UTC-10)
08:01 - San Francisco (PDT UTC-7)
10:01 - Chicago (CDT UTC-5)
11:01 - New York (EDT UTC-4)
12:01 - Rio de Janeiro (BRT UTC-3)
16:01 - London (BST UTC+1)
17:01 - Vienna (CEST UTC+2)
18:01 - Kyiv (EEST UTC+3)
20:31 - Mumbai (IST UTC+5:30)
23:01 - Hong Kong (HKT UTC+8)
00:01 - Tokyo (JST UTC+9)
01:01 - Sydney (EST UTC+10)
03:01 - Auckland (NZST UTC+12)
We’ll be in the #mootools freenode.net channel.
We did very well last week in following the guidelines. I’ve included them in this post as a reminder.
Use this button to add the open office hour to your Google Calendar. You’ll need to setup the event so that it repeats weekly.
If you don’t have an IRC client you can use http://webchat.freenode.net/.
Every week the MooTools developers have an IRC office hour meeting where they work together to listen to your feedback, answer your questions, and develop on MooTools. We do this every Tuesday at 11am EST at #mootools Freenode IRC Channel. Everyone’s welcome so join us tomorrow.
This recap includes:
Last week we had a small conversation of the experimental branch that Valerio has for MooTools 2.0. The conversation covered most of the comments in last week’s post comments. Instead of going over them again, please take a look at last week’s post.
Like I had promised last week, I did want to start a repository for helping you understand what are the main differences (in code) between 1.3.x and the experimental 2.y.x. Last week the mootools-1-vs-2 repository to do just that. You can use Github’s awesome Compare View to view the differences between 1.3.x and 2.y.x (Valerio’s experimental branch).
The files included in the repo are meant to compare Core code, Plugin code, and Application code:
Core Code
Plugin Code
Database.js (by Daniel Buchner). You can find the original Database.js in the repo as well as in his csuwldcat/mootools-htmlx.
ScrollSpy.js (by David Walsh). You can find the original ScrollSpy.js in the MooTools Forge.
Application Code
The examples are not all encompassing of user behavior and usage. I did select the scripts, but I tried to be fair. You can fork the repository and add your files to the 1.3.x branch (the base branch) and send me a pull request and I’ll try to port your code. Please be considerate, and send me at most one file with recommended maximum of 500 lines.
The code will change as 2.0 is further defined. The 2.0 API is not final. Valerio is kicking butt everyday on his experimental branch. This compare 1.3.x vs. 2.y.x repo. is meant to assuage some of the concerns from the previous blog post about Valerio’s experimental 2.0 branch.
This repo is not a definitive guide to 2.0. We’re still working on that definitive guide for 2.0, but since the API is not strictly defined it’s premature to give you this. For now, leave your comments or join us tomorrow with your questions.
The repo doesn’t show Host.Install. The intention of the repo. is to show the default behavior of 2.0. I’m likely to create another branch and call it 2.y.x-installed so that you’ll see the differences between 1.3.x and 2.0.x with native extensions installed.
We were asked that Office Hours should have an agenda so that we can have a more directed conversation. I didn’t have a chance to inquire the team for items, but we should have some items for next week.
Any suggestions? Leave a comment below.
Similar to the above, it’s been suggested by Darren Wadell and Arian Stolwijk that we could dedicated actionable work hours. We could have demos office hour, documentation, bugfix or test office hours for example.
What do you think? Would you participate?
Remember that we’re having the next office hour this:
05:01 - Honolulu (Hast UTC-10)
08:01 - San Francisco (PDT UTC-7)
10:01 - Chicago (CDT UTC-5)
11:01 - New York (EDT UTC-4)
12:01 - Rio de Janeiro (BRT UTC-3)
16:01 - London (BST UTC+1)
17:01 - Vienna (CEST UTC+2)
20:31 - Mumbai (IST UTC+5:30)
23:01 - Hong Kong (HKT UTC+8)
00:01 - Tokyo (JST UTC+9)
01:01 - Sydney (EST UTC+10)
03:01 - Auckland (NZST UTC+12)
We’ll be in the #mootools freenode.net channel.
We did very well last week in following the guidelines. I’ve included them in this post as a reminder.
Use this button to add the open office hour to your Google Calendar. You’ll need to setup the event so that it repeats weekly.
If you don’t have an IRC client you can use http://webchat.freenode.net/.
Every week the MooTools developers have an IRC office hour meeting where they work together to listen to your feedback, answer your questions, and develop on MooTools. We do this every Tuesday at 11am EST at #mootools Freenode IRC Channel. Everyone’s welcome so join us tomorrow.
Last week’s office hour was dominated by the experimental define-2 branch by Valerio. This branch has the experimental support of Asynchronous Module Definition (AMD) and also has the proposed direction of MooTools 2.0 as mentioned in the previous blog post.
From the discussion in last week’s office hour, it seemed that there was confusion on the implications of adopting Valerio’s 2.0 branch. In particular there were concerns for: compatibility, native extensions (and minimum ES5 polyfills), chainability, and style.
At first, 2.0 will likely not be compatible with 1.3 without a builder and an upgrade script. Since we’ve yet to cross this road, please be vigilant of the changes and discussion that are underway. As always, rest assured that we would like to make your transition into 2.0 as easy and immediate as possible.
Without a dedicated blog post, I’d like to recap that there is a divide between the community and even the MooTools developers about the possible decision to not extend native objects (e.g. Array, Number, String, …) by default. One side of the argument is that this is a 180 degree shift in MooTools style and philosophy and that it ruins competitive differentiation (a marketing term). On the other side of the argument is that this is necessary to stay relevant in the discussion, that we’ve cornered ourselves between a rock and a hard place and that we just need to be better. Valerio had even quoted Steve Jobs as a perfect explanation on his position.
Instead of going further and making points for either argument, it’d be more appropriate if we make a definitive post on the matter.
The discussion is still not done. If you’d like to give us your $0.02 on the matter, we welcome your thoughts and concerns. If you’d like to contribute to the 2.0 Wish List, add your suggestion or talk to us on IRC. Remember that we’re having the next office hour this:
05:01 - Honolulu (Hast UTC-10)
08:01 - San Francisco (PDT UTC-7)
10:01 - Chicago (CDT UTC-5)
11:01 - New York (EDT UTC-4)
12:01 - Rio de Janeiro (BRT UTC-3)
16:01 - London (BST UTC+1)
17:01 - Vienna (CEST UTC+2)
20:31 - Mumbai (IST UTC+5:30)
23:01 - Hong Kong (HKT UTC+8)
00:01 - Tokyo (JST UTC+9)
01:01 - Sydney (EST UTC+10)
03:01 - Auckland (NZST UTC+12)
Add it to your Google Calendar.
We’ll be in the #mootools freenode.net channel.
We did very well last week in following the guidelines. I’ve included them in this post as a reminder.
Use this button to add the open office hour to your Google Calendar. You’ll need to setup the event so that it repeats weekly.
If you don’t have an IRC client you can use http://webchat.freenode.net/.
As suggested by our community, we’re going to release a recap, or summary, of the IRC Office Hour after every session. We want to encourage you to join us on Tuesday’s at 11am EST in the #mootools IRC channel, but if need be let this be your medium to discuss your perspective and your own ideas (you can also discuss in the Google Group).
We created a document and shared with the IRC channel a “wish list” to add requests of what MooTools 2.0 should include. You can find the wish list here. Please add your own requests. Periodically we’ll check the list and approve items for 2.0.
We talked about our efforts to improve the documentation. We were suggested in the channel to improve the argument list in the docs and include inherited properties and methods (plus link to the parent class).
We also want to make the experience more viral and social and we’d like to include social plugins (Facebook and Twitter). A comments section akin to PHP’s plus heavy moderation to have quality comments and shared experiences.
Analytics will also play a major role as we’d like to improve feedback. We’d like to know which methods and classes are most viewed, liked, and commented. Likewise, we want to make it easier for you to find what you’re looking for. Better SEO as well as navigation and search inside of the docs.
While you are in the documentation, we are also adding inlined jsfiddle so that you can run the examples/demos and modify them on the fly. This also means that you can contribute your own examples/demos.
Of course, the above is a lot of work and we welcome your participation. Darren Waddell has stepped up and already started working on this. Take a look at his repository (fakedarren/mootools-docs) and please fork. User, kpobococ, is already working with Darren thanks to the office hour.
A user had a question about the “wrapping” of the UI so that it extends to the complete window. It’s not built-in to MooTools, but we gave him a few suggestions on how to accomplish this. Ryan Florence mentioned his mootools-wallpaper and a jsfiddle example.
First, some context. require.js is a “file and module loader” which implements the Asynchronous Module Definition (AMD) CommonJS specification. This means that you can define modules and require (load) them only if they’re necessary. The philosophy is aligned to ours. We’ve never wanted our users to download the complete repository and load it blindly into a page. We’ve supported modularity, and speed, since day 1. Rest assured that MooTools 2.0 will be require.js ready out of the box.
Namespacing, is a loaded term. It may mean to “sandbox” MooTools so that it doesn’t mess with prototypes. Namespacing may also mean that you can apply, or install, methods into any given object. We’ll make a separate blog post about this, but it’s time to let the cat out of the bag.
We would like for MooTools 2.0 to play nice with everyone. This is a huge departure from 1.x days, but we’d like to position MooTools 2.0 so that you can drop it in any environment (that JavaScript can be run) and it will Just Work™.
Valerio Proietti has started to work on this in his own define-2 branch and we’re looking to you for feedback and opinions. Please fork and send feedback. Now is the time to make your voice heard. Once we release 2.0, there’s no going back.
And this brings us to the roadmap. Again, well deserving of its own blog post. Here’s the official word from Valerio, himself. We’re going straight to 2.0. There’s no date, yet, on when this will happen but a lot of work and time is being put to get it out the door.
This would be the time, for you to volunteer your time.
Oh and don’t run around frantically. 1.3.x will continued being developed but released as bug fixes and any improvements provided by the community or downgraded from 2.0.
Still in its infancy this pattern is very powerful. It’s deserving of its own blog post, but here’s the summary: with this pattern you can define and lookup functions and properties that are usually Objects now, like Class.Mutators or Element.Properties. Besides simple lookup, it can also do a match so a ‘protected’ Class Mutator can be defined so a Class method can be defined as ’protected foo’: function(){ so that the method cannot be run outside of the class. Have a look at the source.
Someone had asked to support events for when properties change in the form of change:foo. It’s doubtful we’ll have this, but developer, verylastminute, has already worked on something that might serve in the mean time: ElementSpy.
As you might have expected, there will be a new site for the launch of 2.0. We’re not yet in implementation stage, but we have screenshot of what it might look like. If you’d like to get involved in the design (for some street cred) join us in the IRC channel to get in touch with Nathan Querido, from QueridoDesign, since he’s leading that project.
There’s a strong request for an official UI and Mobile projects. Although we are not promising that we will get around to the UI and Mobile prior to 2.0 release, we do agree on having them. For now we’re supporting projects that fill this need.
For the mobile, we’re interested in jpdery/moobile-core and cpojer/mootools-mobile. Add your projects in the comment section.
For UI we have our own ART project which is almost ready to be released. Missing documentation and testing. There’s also projects we’re interested in: inviz/lsd, anutron/behavior, JxLib, and sixtyseconds/mootools-interface. Add your projects in the comment section.
We’re also promising that Event Delegation will be in Core before 2.0 is out the door. Still unknown if the API will change between 1.3.x and 2.0, but let’s revel in the news!
Again one of those, “deserving of its own blog post” we’re moving from Lighthouse Tickets to Github Issues. This means that we will accept any new issues in Github and discourage the use of Lighthouse. We will disable Lighthouse after we’ve migrated.
As you’re now aware, the MooTools Office Hours are very fun and informative. Remember that we’re having another this:
05:01 - Honolulu (Hast UTC-10)
08:01 - San Francisco (PDT UTC-7)
10:01 - Chicago (CDT UTC-5)
11:01 - New York (EDT UTC-4)
12:01 - Rio de Janeiro (BRT UTC-3)
16:01 - London (BST UTC+1)
17:01 - Vienna (CEST UTC+2)
20:31 - Mumbai (IST UTC+5:30)
23:01 - Hong Kong (HKT UTC+8)
00:01 - Tokyo (JST UTC+9)
01:01 - Sydney (EST UTC+10)
03:01 - Auckland (NZST UTC+12)
Add it to your Google Calendar.
We’ll be in the #mootools freenode.net channel.
We did very well last week in following the guidelines. I’ve included them in this post as a reminder.
Use this button to add the open office hour to your Google Calendar. You’ll need to setup the event so that it repeats weekly.
If you don’t have an IRC client you can use http://webchat.freenode.net/.
Last week we held our first IRC office hours in the #mootools channel on irc.freenode.net. Fifteen (15) MooTools team members were in attendance and we got a lot of responses from our community. We covered: sandboxing natives, namespacing, packaging, roadmap, MVC, and that I look like Sam from the Lord of the Rings.
This is a reminder that tomorrow (June 21st) we’re having another office hour and you’re cordially invited to join us.
Unlike last week, this week we’ll have a couple of questions ready to steer the conversation. This week we’ll talk about MooTools 2.0 and what you guys need to love MooTools even more. We’ll be taking names down as well, for those that would like to contribute.
Keep reading to learn the details.
If you’re familiar with last week’s office hour, you probably realize that I made a boo boo with the offset in different timezones. This is now fixed thanks to EveryTimeZone. Here’s a complete list of timezones just so that we’re all on the same page.
05:01 - Honolulu (Hast UTC-10)
08:01 - San Francisco (PDT UTC-7)
10:01 - Chicago (CDT UTC-5)
11:01 - New York (EDT UTC-4)
12:01 - Rio de Janeiro (BRT UTC-3)
16:01 - London (BST UTC+1)
17:01 - Vienna (CEST UTC+2)
20:31 - Mumbai (IST UTC+5:30)
23:01 - Hong Kong (HKT UTC+8)
00:01 - Tokyo (JST UTC+9)
01:01 - Sydney (EST UTC+10)
03:01 - Auckland (NZST UTC+12)
Add it to your Google Calendar.
We’ll be in the #mootools freenode.net channel.
We did very well last week in following the guidelines. I’ve included them in this post as a reminder.
Use this button to add the open office hour to your Google Calendar. You’ll need to setup the event so that it repeats weekly.
If you don’t have an IRC client you can use http://webchat.freenode.net/.
Remember that we’re doing this because we love to meet our community leaders. Bring your colleagues or even your boss if you have questions that you’re concerned with or would like solutions for.
Last week we had a lot of fun bringing a lot of MooTools developers together which spurred some development. Looking forward to tomorrow for a great hour.
Cheers.
Starting next week, we’re going to be holding regular IRC office hours for MooTools developers in the #mootools channel on irc.freenode.net. Members of the MooTools team will be on hand to answer your technical questions.
We’re following the footsteps of many successful office hours from other Open Source projects (Android, Mongo DB, Google App Engine, and Node.JS) because we think it’s the best way to help, meet, and listen to our community.
In fact, without IRC I wouldn’t have become a MooTools developer in the first place. Like many of the other MooTools developers. Maybe you will too.
We’re going to start with a single weekly meeting on Tuesday’s at 5pm - 6pm (CEST GMT) (11am - 12pm EDT EST). We chose this time since it best fits our schedule, but depending on response and returns (more development, more team members, etc.) we can have a dedicated time for Western and for Eastern hemispheres.
Our first meeting is next Tuesday, June 14th at 11am EDT EST (5pm CEST GMT).
With any endeavor there are some ground rules for efficacy.
Use this button to add the open office hour to your Google Calendar. You’ll need to setup the event so that it repeats weekly.
If you don’t have an IRC client you can use http://webchat.freenode.net/.
I expect this will be a lot of fun and a great learning experience to find out how our community has been prospering and using MooTools. Hope to see you in the IRC channel!
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.
~div-like selectorssetOpacity for very small numbers in IEdocument.headnew Element('input[checked]');A few months back we sent out a survey asking you where you’d like for the development team to focus its energies. Since then we’ve worked on demos and released a new version of the framework with new features based on that valuable feedback. Getting direct input from everyone who uses MooTools helps us as developers stay on target for the things you need.
One of the items that came up several times in the survey was a desire for more support for internationalization. MooTools More already ships with a system for localizing plugins, but this functionality isn’t baked deep into the framework. Several comments in the survey implied a desire to see this functionality available throughout MooTools Core. One respondent wrote, “It is difficult to understand MooTools as my English is not great. My website has many visitors from where I live and they need all to understand it. Thank you.”
You asked for a more culturally sensitive framework and we listened. Given that the MooTools development team is based all over the world from Italy to Austria to The Netherlands to Germany to Sweden we can understand the value of having MooTools available in your native tongue.
For the past few weeks we’ve been hard at work localizing all of MooTools. That’s right, you will be able to download MooTools Core and MooTools More in any of the several languages we support. We’re are not entirely ready yet and don’t have full coverage for each API, but nevertheless wanted to give you a preview of what we’re working on. We were able to do this because MooTools’ modularity and JavaScript’s flexibility which makes it easy to add and change methods on the fly.
To get started with using the translated API, you need to look at Github for now, since we’re still early in development. However we will provide a download page in the coming weeks so you can easily select your language and download the required components.
Here’s a quick example of the Italian translation in action:
Element.impostaStile('colore', 'rosso');
We also support British English now as well:
Element.setStyle('colour', 'red');
Or Dutch:
venster.gebeurtenisToevoegen('domklaar', function(){
$('kop').zet('tekst', 'MooTools!');
});
Everything is right were you expect it to be; it’s still just MooTools! All your users will recognize the difference of a site built using their native tongue.
We’ve also set up a repository on Github which you could use to add and improve translations. You could grab the Dutch translation (Locale.nl-NL.API.js) and translate it to your own language. We would like to add documentation for the translations as well, and are still looking how we could implement this in an efficient way in our future documenation system which is currently under development.
If you’re interested in helping us translate into additional languages please get in touch on the MooTools Google Group or at Github.
Here is an early demo with some working JSFiddles:
Dutch:
Ukrainian:
GERMAN:
In the coming months we hope to add a lot of new features that enrich the MooTools ecosystem. We’ve gotten a lot of requests to make MooTools Core suitable for mobile devices. Our plans are to make a modular system that allows you to include only the parts you need with small, powerful, and feature rich modules for effects and AJAX as well as enhancements to native objects like strings and functions. We plan to sell this in the iTunes store for 99¢. What features would you like to see next in MooTools? Leave a comment!
Update: Thanks to paraboul we added a beginning for French!
Update 2: Anyone wishing to find more information on our Localized API efforts, please read this.
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.
Element.Events represents DOM node event abstraction. The most simple example is, of course, adding a click event to a DOM Element:
For the sake of completeness I’ll explain this code step by step. First we grab the a element with the document.id method. Then we call the Element:addEvent method. The addEvent accepts two arguments: the event name, which is a string without the ‘on’ part (click, keydown, mouseover) and the callback, which is a function. This function will be called when the user clicks the element.
There are two interesting things you see there: first, the event argument of the callback function. This is an instance of the Event Type. This is a wrapper of the native event object so we do not have to worry about browser inconsistencies. In this case the stop method is called to stop all default behaviors, like following the link.
The second interesting thing is that we can use the this variable in the event callback which refers to the clickme element.
Once you’ve added events to an Element, you might want to remove them some time later. Removing events is pretty straightforward. We have to store a reference to the function if we only want to remove this single event.
// store a reference to the callback
var myCallback = function(event){
alert('hi');
};
// add the event
myElement.addEvent('click', myCallback);
// remove the event
myElement.removeEvent('click', myCallback);
You can remove all the click events when calling the removeEvents method.
myElement.removeEvents('click');
This is an interesting example what you can do when you only want to click an element twice:
It is possible to fire events manually with the fireEvent method. This is not a very common method but can be useful.
The following example is how you can call events you’ve added to an element manually:
It is important to note that the event callback of the clickme event checks if the event.stop method exists. When using fireEvent you’re not calling the callback through the DOM but directly with pure JavaScript. You can pass additional arguments as a second argument of the fireEvent, e.g:
clickme.fireEvent('click', [{stop: function(){}}, 'MooTools'], 500);
What am I doing here? The second argument of the fireEvent accepts a single argument or an array of arguments. In this case, I pass an array of arguments, which contains an Object as the first item in the array. The Object helps get rid of the if (event && event.stop) condition in the former example because it mimics the Event object. In the forge there is a more sophisticated Event.Mock.
Additionally, I’ve passed a third argument to fireEvent, 500. This third argument is used to delay the execution of the event callback.
You don’t necessarily have to use existing events like click or mouseenter. You can fire an event like grow as well. If you add an event grow to the element it will work fine:
clickme.addEvent('grow', function(height){
this.tween('height', this.getStyle('height').toInt() + height);
});
clickme.fireEvent('grow', 30);
An even lesser known method is the cloneEvents method. This method can be used to clone the events from the first element into the other, for example, after using the clone method.
The methods in Element.Events: addEvent, addEvents, removeEvent, removeEvents, fireEvent and cloneEvents, which are described above, are actually wrappers to native browser methods. Unfortunately those native methods are inconsistent across browsers. Most browsers use the W3C specification addEventListener except IE 8 and lower which uses the attachEvent method. A MooTools wrapper for the addEventListener is called addListener. This is a private method that will give us a cross-browser implementation for addEvent.
Another reason why we use our own methods is garbage collection. This happens when adding events to elements and the elements are removed from the DOM later. The events are still there, but the element is not; this might cause to memory leaks. Fortunately MooTools handles this problem and you don’t need to manually fix this issue.
Finally MooTools stores all the event callbacks using the store and retrieve methods. You could retrieve the object with all event callbacks using myElement.retrieve('events'). This is private and not recommended because it could break your code sooner or later. The reason why MooTools stores all the callbacks is so you can easily remove, fire, or clone them without passing a reference to the callbacks each time.
An interesting thing about the DOM is that elements can be nested. So what will happen if you add events to an element and to the element’s child element? What will happen is called ‘Event Bubbling’.
This is a quick example:
In this example there are two different elements, where the a element is nested into the div element. Each element has its own click event. Now when you click the a element, both events are fired, first the event of the a element, then the event of the div element. Also note that we cannot use the Event:stop or Event:stopPropagation methods anymore because this will block bubbling, we should use Event.preventDefault in this case.
This is actually nothing special of MooTools, but this is how it’s specified by the W3C. The W3C specification has a capture phase too, that will go the other way around. Unfortunately MooTools cannot support this because IE 8 and lower doesn’t support it. The three phases are clearly explained in this diagram
Event Delegation is a technique that uses event bubbling and the event.target property. The target property is always the element which is clicked (or hovered when using mouse* events). What you can do is add an event to one of the parent elements, which will fire too because of the bubbling, and check of the target property satisfies your constrains, for example if it matches a CSS selector.
A very basic example of event delegation is:
This example is very simple, but it can get more difficult with more complex delegates. That’s why MooTools More has the Element.Delegation component. This component makes it easy to use delegation.
This example uses Delegation. You can see that instead of using just click, click:relay(tr td.click) is used. With the Event Pseudo (will be explained later) relay we tell MooTools to check if the target or one of its parents matches the passed selector tr td.click. If the element is matched the callback gets fired.
Event Delegation has some important advantages. It especially improves performance. Imagine a page with hundreds of links or table rows. Instead of adding an event to every element, you can delegate the parent element by adding only one event. Secondly Event Delegation is useful when working with dynamic pages. In case you have the same large table which will update regularly by XHR Requests, you don’t have to add new events to the rows because the rows are added into the table which has the event. The click event will bubble up to the table element and when the new row is matched against the given selector the callback function is fired. This can save you a serious amount of code and logic.
Now we have seen how Element Events work, we’ll explore the Class Events. Class Events brings similar methods like addEvent, addEvents, removeEvent, removeEvents and fireEvent to MooTools Class.
First an example from the docs to illustrate how it works:
var Widget = new Class({
Implements: Events,
initialize: function(element){
// …
},
complete: function(){
this.fireEvent('complete');
}
});
var myWidget = new Widget();
myWidget.addEvent('complete', myFunction);
So what does this do? First it implements the Events mixin. The Implements mutator will copy the methods of the Events mixin into the Widget Class.
In the complete method it uses the fireEvent to fire all the added ‘complete’ events. Once the Widget class is instantiated the example uses the addEvent method to add an event ‘complete’ with the callback myFunction.
When you want to pass arguments to the callback function, you can use the second argument of the fireEvent method, which accepts any value for a single argument or an array for multiple arguments, just like Element:fireEvent.
This is a fairly unknown but useful feature. The third argument of the addEvent method is called the internal argument. This argument can be set to true when you do not want that the event can be removed.
Imagine you’re building a datepicker class. You split it up in two classes, a Picker class and a DatePicker class. The Picker Class is a generic picker which could be used for a ColorPicker or whatever picker too. It has an open method which opens the picker and fires the ‘open’ event. Now the DatePicker has to do some extra things on open. Now it could overwrite the ‘open’ method, but it can add an ‘open’ event too. Though you do not want that the user can remove the event when using myDatePicker.removeEvents('open'). In this case you set the internal argument to true.
If you’ve used Fx or Request you definitely have used this: events as options when instantiating a Class. This are functions which have property names like onEventname where Eventname (the first character should be uppercase) is the actual eventname and is prefixed by on.
new Fx({
onComplete: function(){
// Will get fired when the Fx is complete
},
onPause: function(){
// The Fx is paused
}
});
The setOptions method of the Options mixin will automatically detect this and use the addEvent method.
var myWidget = new Class({
Implements: Options,
options: { // Default options and events
onComplete: function(){
// Will get fired when the class is complete
},
onPause: function(){
// The class is paused
}
},
initialize: function(options){
// use the setOption method
this.setOptions(options);
}
});
We’ve seen already a glimpse of Events Pseudos when using Event Delegation. This is a new component in MooTools More 1.3. It allows you to use event names as CSS Pseudo Selectors, thus event:pseudo(value).
A quick example how to use the :once pseudo:
Because the Element and Class methods are so similar, Events Pseudos is actually implemented once for both. It is totally abstracted to a single (private) function Events.Pseudos. It returns an object with modified addEvent and removeEvent methods. These methods are implemented into Events and Element, so it monkey patches the old ones.
When using one of the methods it will detect if the eventname is a pseudo eventname, if that’s the case the eventname is parsed by Slick.Parse to an object. Finally it will add an event to the Class or Element with a custom callback. That callback fires the corresponding pseudo function. That pseudo function is actually a function in between that can do some extra stuff.
The ‘function in between that can do some stuff’ is actually the power of Events Pseudos. Like the :once pseudo function it will fire the passed callback function and remove itself, so the callback function can only be fired once. Another existing pseudo function for elements is :keys which waits till all passed keys are pressed until firing the callback. These psuedo functions can be defined by Events.definePseudo or Event.definePseudo. In MooTools More 1.3.1.1 the :pause and :throttle events were added.
At this point we come back at Event Delegation, because the :relay(selector) is a Pseudo Function too! That pseudo function basically uses Slick.match to check if the element matches the selector and should fire the callback function.
You can define your own pseudo functions. This can be done with the Events.definePseudo or Event.definePseudo functions. The first one for Class Events, the second one for Element Events.
This is an example how to create a pseudo event which only allows you to click an element with the right mousebutton based on the mousedown event:
This is a fairly simple example, but it is clear that you can do a lot of things with it while keeping your code clean and simple to read.
Another example that counts the number of clicks:
You can see that var event = args[0]; is used. The args argument is the argument that keeps the usual arguments passed into a normal event callback. Since we’re working with Element Events it has only one, so args[0] is the Event instance. Of course this argument can be different when working with Class events or when using the fireEvent method with multiple arguments.
The split argument contains an object with the parsed event name: event:pseudo(value). You can use the split.value property for example if you use the ( and ) for passing an extra value (like :relay(selector) for Event Delegation). The split.original property contains the whole string, so event:pseudo(value) which can be used to remove the event in the pseudo function, which is actually what the :once pseudo function does.
Finally we use fn.apply(this, args) to call the callback function (which highligts the a element). We use apply to be sure that this refers to the element and it is called with the same arguments as usually. You can do something else of course, but in most cases you want to use fn.apply(this, args).
Events are very powerful and you almost cannot write MooTools code without using Events. For the DOM, MooTools saves you a lot of pain and brings you the easy cross-browser API. Because of the nature of the DOM, it brings Event Bubbling which can be used for Event Delegation which can bring you several advantages. A unique part of MooTools is its Class, which brings the same API of DOM Events to Class. To give you even more power to Events, Events Pseudos can be used.
Also have a look at Company by Keeto or the PubSub pattern with the MooTools-Channels as MooTools implementation.
The MooTools team is very happy to announce a simultaneous update of both Core and More repositories. The past year was amazing for us. We had a great hackathon in London, we gave you MooTools 1.3, added a lot of new people to our team and improved everything around the code. The results of the MooTools survey clearly showed that we are doing the right things and we intend to make MooTools even better in 2011. We spent the past weeks fixing bugs and adding new features on both projects. This is what’s new:
submit, focus, blur, reset, change and select events in MooTools More:throttle and :pauseI am also pleased to announce our newest addition to the MooTools More team, Jacob Thornton, who is a great developer, currently working for Twitter. He has put a substantial amount of work into making MooTools More even better.
Be sure to check out the updated demos in our new demos section.