MooTools Tutorials

  • MooTools Wall Plugin

    One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show you a quick usage of the Wall!

  • Full Awesomeness with dojo.partial and MooTools’ Function.partial

    Much like MooTools, the Dojo Toolkit features a host of JavaScript language helpers.  One of those helpers is dojo.partial.  This method, which lives in Dojo Base, allows you to call a method with additional arguments appended to the front of a function signature.  Sound a bit weird?  It did to me too.  Let's take a quick peek at dojo.partial's syntax and when you'd use it.

  • Animating CSS3 Transforms with MooTools Fx

    I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools.  The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack animation.  The MooTools method took a bit of Fx exploration since MooTools doesn't animate CSS transform out of the box, and this exploration reminded me of just how amazing MooTools' Fx classes are.  We all know MooTools features the smoothest effects of any JavaScript toolkit, and now I'm confident in saying the Fx class is as flexible or more flexible than any toolkit available.  Let me show you how simple it is to override a Fx instance's set method  to animate any CSS property you'd like!

  • Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram provides a number of image filters to enhance the appearance of the image you've taken.  You can make your photo look brighter, darker, "older", and much more.  The photo is saved both on Instagram's service and your local phone.

  • Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them.  Outstanding!  I've researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript.

  • Lazy Load Content and Widgets with MooTools and RequireJS

    The idea of lazy loading content is not new;  we've been lazy loading images (check out my MooTools LazyLoad plugin) for quite a while now.  And why wouldn't you lazy load content?  There are SEO advantages, load time advantages, bandwidth savings, and more, so including a bit of extra JavaScript could help your large website immensely.  In my latest redesign, I took the time to lazy load not just images but static content and social networking widgets to make my website's initial load happen faster to make user experience and Google rank improve.  Let me show you how I used MooTools and RequireJS to lazy load content.

  • Introducing LazyLoad 2.0

    While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading — the images were loading regardless of the plugin, much like it always had with WebKit-based browsers.  Intercepting had continued to work within Internet Explorer but IE's reign of dominance is dying.  Clearly I needed to bite the bullet and code LazyLoad to use custom data- attributes to store the real image path.

  • MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately, at this point in the web, constant refreshes are the norm — but they don't have to be.  Christoph Pojer, a MooTools Core Developer, has added History to his PojerTools PowerTools library.  History replaces traditional same-site URL loading by providing a method to catch link clicks, load page content via AJAX (Mootools' Request.HTML class), modify the document's location object to keep "history" records, and re-evaluate content links to allow developers to create a fast, efficient one-page website.

  • Track AJAX Link Clicks Using Google Analytics

    4/22/2011: This blog post was completely rewritten to describe page tracking with Analytics' asynchronous loading method.

  • Google PageRank PHP Class

    It appears that Google has changed their Page Rank mechanism. I'm currently investigating ways to restore the functionality of this class.