Peppy and MooTools
This post has been updated after more tinkering and testing.
A while back James Donaghue boasted his new selector engine Peppy. Lets say for giggles that we wanted to use MooTools and Peppy together. Here's how I got things to work.
The JavaScript
//sets peppy as the default engine
Window.$$ = function(selector){
return new Elements(new peppy.query(selector));
}
//get elements
window.addEvent('domready',function() {
$$('div').each(function(el) { // straight cash homey
el.setStyle('color','#f00');
});
});
I have no idea why you'd want to do this; MooTools' selector engine is rock solid. I was simply playing around and wanted to show you what I came up with.
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![9 Incredible CodePen Demos]()
CodePen is a treasure trove of incredible demos harnessing the power of client side languages. The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do. Thanks to CSS...
![Making the Firefox Logo from HTML]()
When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt.
That had to change.
The basic...
Awesome! I’ve been waiting for this. The Peppy selector engine is really faster, and in some tests faster than Sizzle, I thought sizzle might make it’s way to MooTools but Peppy’s better ayway.
Have you even looked at the source of Peppy? I find it quite funny to compare it to Mootools or Sizzle, it’s not on the same level at all. For example binding DOM mutation events for caching slows down every DOM operation a lot! Way much more than the gain of the faster queries. It gets even the attribute getter wrong: e.getAttribute( a ) || e[a]; It’s good that it’s small but there’s a lot of space for improvements, so to say.
I’m not saying that I believe Peppy is better — quite frankly, it’s not. I just wanted to show you what I had at the end of my experimenting. Hell, I wouldn’t even say that this is quality. It’s not, quite honestly, but it worked.
Hey guys,
You can also use John Resig’s Sizzle in MooTools, by using this code:
Window.$$ = function(selector){ return new Elements(new Sizzle(selector)); }This overwrites the
$$function, but you can rename it to whatever you want, obviously.@Ryan: You stole my upcoming blog article! :) Thanks for the submission!