One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events. We’re going to create a simple slideshow from which we’ll build on.

The HTML

<div id="slideshow-container">
	<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>

The HTML is as simple as it can be — one slideshow container DIV and the images that will be part of the show. This slideshow doesn’t require that you use images — you could just as easily use DIVs instead.

One thing I love about the MooTools Forge is that it requires a strict structure for its plugins i.e. requiring a README.md file, Source directory, etc. I’ve created a shell script that I can run that creates the directory structure and files required to add my plugin to GitHub and then the Forge.

The Shell Script & Usage

The first step is creating the repository at GitHub. Once created at GitHub, I run the script, giving it the name of the plugin and repository (they must be the same):

./newPlugin.sh ScrollSpy

The script itself looks like:

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.