Today marks a huge day in the history of the MooTools project: the public release of the MooTools Forge. The Forge is masterful plugin repository system created by MooTools Core Developer Guillermo Rauch. The Forge currently features numerous plugins created by the Contributors and Core Developers of the MooTools team — by this time tomorrow, the Forge will be (hopefully) filled with MooTools plugins from developers like yourself!

Without going into too much technical detail, the Forge is based on having a developer’s plugins being hosted with the GitHub system. If you don’t have a GitHub account, I highly recommend you create one. Once you have an account and each plugin’s repository is structured and tagged properly, you may quickly add that plugin to the Forge for the world to use!

Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone’s method of showing/hiding the last character in a password field. This gem of a MooTools plugin, which conquers some problems that plague jQuery counterparts, was authored by valued MooTools contributors Luis Merino and Nathan Querido.

The MooTools PassShark Usage

window.addEvent('load',function() {
	new PassShark('pass',{
		interval: 300,
        	duration: 1500,
        	replacement: '%u25CF',
        	debug: false
    });
});

The only required parameter is the ID of the input/password element you’d like to act as an iPhone password field. Options include:

I’ve been working with the Magento eCommerce solution a lot lately and I’ve taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the top of the window and the opacity set to 50%. I’ve implemented this technique in my current design and have gotten numerous requests for a tutorial so…here you go!

The HTML

	Top of Page
	Bottom of Page
	

A DIV with whatever elements and structure you’d like within it.

One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, “masthead” images is a classy enhancement. Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.

Reflection.js is a javascript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE — if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.

This post is a proof of concept post — the functionality is yet to be perfected.

Picture this: you’ve found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It’s an artistic site so you accept that the site scrolls left to right. You’re ready to see more of the page so you use the scroll wheel like you usually do but…nothing. Nothing happens. Your mouse’s scroll wheel is absolutely useless. Now you have to use your browser’s scrollbar / arrow keys to see other parts of the page. In a word: lame.