MooTools Tutorials
New MooTools Methods: .from()
MooTools 1.3 beta 2 was recently released and you may see a few new methods implemented to String, Array, Number, and Function: from. The from method of each of those Types returns an object of that type. Simply put: you'll always receive back an object of that type based on what you give it.
DomReady Event Methods in JavaScript Frameworks
The "domready" event, as it is affectionately known as, is one of the best things since sliced bread. The domready event says "screw you window.load ... I don't have time to wait for you." The ability to execute your JavaScript method on DOM nodes before the page loads helps to make our effects and element modifications that much more seamless. Every JavaScript framework has their own method of domready so I wanted to take the time to list off each one, just in case you (or I) need to work with a framework that's (initially) outside of our comfort zone.
An Interview with Vimeo’s Kevin Sheurs, Lead Application Developer
Vimeo is quickly becoming one of my favorite websites. You can find videos on just about any website but Vimeo is different: the site has personality and the user experience is second to none. I recently had the opportunity to chat with Kevin Sheurs, Lead Application Developer for Vimeo, about Vimeo, MooTools, and a variety of other web development topics. Enjoy!
TextboxList for MooTools and jQuery by Guillermo Rauch
I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel Messi is. He lives in California so he doesn't have to deal with 3 months of bitter cold like I do in Madison. He even takes some of my chicks. All that said...he's just...just...so damn smart. In the end I think some of my bitterness about Guiller is that he's smarter than me. Better than me at MooTools, JavaScript, and even life.
Image onLoad Event + JavaScript Issue with Internet Explorer
I was recently coding an application that would inject an image into the page and then execute a given function when the image's onLoad event fires. My code was working everywhere except Internet Explorer. That wasn't all together shocking initially but the fact that even IE8 was failing to the fire the onLoad event was discouraging. Here's what my code looked like:
AJAX Username Availability Checker Using MooTools
Another one of my popular, early blog posts has been AJAX Username Availability Checker Using MooTools 1.2. Looking back now, the code is atrocious and very inflexible. I've taken some time to update the post to be more reliable, clean, and speedy.
Using jQuery or MooTools For Drag, Drop, Sort, Save
One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag'n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I've chosen to update the post with a faster, more efficient set of MooTools and PHP code. I've also provided a jQuery equivalent. Enjoy!
Quick Tip: Faster DOMReady Checks with MooTools
Digging into the source code of your favorite JavaScript framework is essential to becoming a {insert framework here} rock star. Digging into other JavaScript frameworks is essential to opening your mind about JavaScript and can give you new ideas to implement improvements in your favorite framework. I was recently looking at the jQuery source code and found that jQuery checks to see if the DOM is ready every 13 milliseconds. MooTools does this same check every 50 milliseconds. Speeding up MooTools' DOMReady check, however, is as easy as updating a periodical's interval.
Create Custom Pseudo Class Selectors Using the Slick Selector Engine
As I mentioned in my previous post about the Slick selector engine, Create Elements on the Fly with MooTools 1.3 and Slick, Slick is extremely flexible. Part of that flexibility is the ability for you to define custom pseudo class selectors to better gather the elements that meet your needs.
Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most repo sites are usually boring so they've spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design I love are the basic buttons. Lets examine how we can create our own GitHub-style buttons with a bit of HTML, CSS, and JavaScript.