Articles on JavaScript

A proof-of-concept for the future of MooTools and client-side libraries. I've broken MooTools down to separate modules, published them on npm, and can now build them with ender.

The Element module in MooTools is your gateway to the DOM. In addition to creating, selecting, and manipulating elements, it features element getters, setters, and storage. Also, the Element module, along with Slick, provide a few more of places to put your code.

Welcome to JavaScript with Class. The Class type in MooTools is one of the defining parts of the framework. The sooner you master Class, the sooner you'll write maintainable, extensible MooTools code. After MooTools Core establishes a few things, nearly every other addition to the framework is a class.

You won't get this from the docs. The essence of MooTools in three minutes flat.

Nothing new or extraordinary here, but I run across enough jQuery plugins that don't provide options to warrant writing an article about it. You can meet a lot more use cases for your plugin if you provide the developer with some options.

Every plugin gets a namespace on the jQuery prototype. If you keep all of your functions, methods, and variables scoped inside the jQuery.fn function, others can't extend or alter the functionality of your plugin. Instead, take advantage of your block on jQuery street and let other developers take advantage of your plugin.

Server-side JavaScript is all the rage. Here's a practical application of JavaScript that I used today. I needed to populate a bunch of html files with some data so I did it with narwhal and json-template

Creating an animated news feed, or ticker as they are often called, is a snap with SlideShow

I've gotten some great response to combining MooTools Class with jQuery, therefore, I've created a site dedicated to the technique.

Just spoke at jQuery conference, the largest javascript conference to date. Here are my slides.

Almost every class that is centered around an element deserves a few element shortcuts. You've used them plenty of times already but maybe you haven't written one.

If Element and jQuery as a whole are practically the same, what's the big difference? Remove the overlap of the two frameworks and you're left with the inheritance API of MooTools. What happens if you use this API from MooTools and plug in jQuery for everything else? Yep, jQuery as a plugin for MooTools. Or inversely and maybe more appropriate, MooTools Object Oriented Programming for jQuery.

I recently read jQuery 1.4 Released, The 15 New Features you Must Know over at Nettuts and thought it would be interesting to compare the features of MooTools 1.2 to the new features in Jquery 1.4, released 18 months later. Enjoy!

A simple question

Last time we compartmentalized some code into a nice little MooTools Class called BouncyMenu that we can use anywhere. However, there are some HUGE improvements to be made. In this article we'll be talking about how to make your MooTools Class flexible by using `Implements`, `Options`, and `Events`. We'll also talk about managing events added to elements and some discussion about binding. If you still consider yourself a beginner, understanding this article should be a big deal. Once you master `Class` your javascript will never be the same.

When I first started working with MooTools I was writing code that was typically a series of functions and a lot of logic inside of my `domready` code. After a while I had a nagging feeling that there was a better way to write code. There is, and it's called `Class`. If MooTools were barbeque, `Class` would be the sauce--and the sauce is the boss.

So I did what every good mootools developer would ... extended MooTools to do the same.

Most of the time the whole point of using mootools is to manipulate an element or collection of elements. (But not always, as you'll see in Part 5.) Now that you know some basics we're going to get more in depth by learning the various ways to select dom elements to manipulate them--traversing the dom, as it were.

Ajax and JSON requests can subtly enhance the usability of a site where the user doesn't notice the site thinking as much as all the page loads of yesteryear. After going through this tutorial you'll have a solid foundation to use this powerful feature of the web with mootools.

In part one we made use of `Element.tween`. A lot of the mootools classes have what I call element shortcuts that look like `$('el').tween()`, `.morph()`, `.load()` etc. Instead of using these shortcuts you can create an instance of these classes in an object and open up a lot more control.