MooTools Tutorials
The release of MooTools 1.3 brings about a vast array of new functionality to the JavaScript framework. One big new addition to MooTools Core is the ability to detect mobile events: touchstart, touchmove, touchend, touchcancel, gesturestart, gesturechange, gestureend, and orientationchange. Let me show you how to listen for and react to each of these mobile events using the new MooTools touch/gesture functionality with the traditional MooTools event listener syntax!
MooTools 1.3 Has Arrived!
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.
Load MooTools Classes on Demand with RequireJS
RequireJS is a hugely popular JavaScript project right now thanks to what it does: asynchronously load JavaScript files and properly handle their introduction to a namespace flawlessly. Of course, callbacks are provided which allow you to work with the new code one it has been loaded. MooTools is a perfect match for RequireJS because of its modular structure. Let me show you how you can lazy load MooTools classes with the robust RequireJS library.
JavaScript Events: Save the Bubbles!
The more we work with advanced, accessible, and crawlable web applications, the more control we need over element events. Mouseenter/leave events, keypress events, and the classic click event are probably the most-listened to events. Unfortunately many people, including myself, have been incorrectly handling event stoppage. In short: a majority of JavaScript framework users are killing the bubbles without knowing it.
Fade Images with MooTools LazyLoad
I recently received an email from a MooTools developer asking a great question about my LazyLoad class:
String Regular Expressions with MooTools
Whether you like given JavaScript library or not , there are always snippets you can take from the code which accomplish a task you may need to address. We all know that I looooooove MooTools, but maybe you're a Dojo or jQuery developer that doesn't get a good look at Moo. The following are a choice selection of regular expression used with MooTools — maybe you have use for them?
Shaving Bytes with MooTools
With mobile web technology continuing to gain momentum, one of the major concerns facing JavaScript frameworks developers is file size. Most of the frameworks, most notably MooTools and Dojo, are extremely modular and allow you to add functionality as needed. Be that as it may, there are still some ways you can shave bytes from your MooTools code while keeping the code readable. Let's take a look at a few ways we can do this.
Fx.Rotate: Animated Element Rotation with MooTools
I was recently perusing the MooTools Forge and I saw a neat little plugin that allows for static element rotation: Fx.Rotate. Fx.Rotate is an extension of MooTools' native Fx class and rotates the element via CSS within each A-grade browser it supports. Let's examine how you can easily incorporate animated element rotation within your website.
An Interview with jsFiddle Creator Piotr Zalewa
One of the great code sharing tools was pastebin. It was simple and straight-forward but quickly grew out of its usefulness. That's where jsFiddle comes in. jsFiddle is a fresh tool that not only displays the code and highlights it but also executes its code within the browser for even better debugging. The creator of jsFiddle, Piotr Zalewa, took a few moments to answer my questions about his awesome creation.
MooTools Plugin: Event.Mock
Those of you who visit this blog often know that I have a certain love for the simple things: simple CSS enhancements, simple PHP scripts, and most importantly, simple JavaScript plugins. One plugin that recently caught my attention was Arieh Glazer Event.Mock plugin. Event.Mock is a tiny MooTools plugin (essentially just a small function; not a MooTools class) that does exactly what it says: provides a Mock event for easy use with Element.fireEvent.