Markup Tutorials
MooTools ASCII Art
I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous; ASCII art is good for a few giggles but that seems to be it. A new MooTools class has hit the Forge: MooAsciiArt. Let's have some fun by turning images and DOM nodes into glorious, character-driven ASCII art.
LightFace: Facebook Lightbox for MooTools
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox clone for MooTools. LightFace and its family of classes work well with iFrames, images, AJAX-requested content, static positioning, and static content.
Create a Dojo-Powered WordPress Website View
Yesterday I showed you WordPress' awesome JSON plugin named JSON API. Now that I can get my blog posts in JSON format, it's time to create an awesome AJAX'ed web app with that data. I've chosen to use the power of Dojo and Dijit to create a stylish, AJAX-powered web app which provides intelligent views of all of my blog posts. You wont want to miss this post!
Fx.Rotate: Animated Element Rotation with MooTools
I was recently perusing the MooTools Forge and I saw a neat little plugin that allows for static element rotation: Fx.Rotate. Fx.Rotate is an extension of MooTools' native Fx class and rotates the element via CSS within each A-grade browser it supports. Let's examine how you can easily incorporate animated element rotation within your website.
Creating Dojo Widgets Programmatically or Declaratively
The Dojo Toolkit has an awesome UI framework called Dijit. Dijit is an expansive set of Dojo widget that allow you to create highly themeable, functional forms, layouts, and much more. One of the highlights of Dijit, from a developer's perspective, is that you may create widgets in two ways: declaratively and programmatically. This blog posts aims to show you an example of each widget creation method and discuss the advantages of each.
Organized Selector Chaos with dojo.behavior
One of the most underrated parts of writing good JavaScript code is writing *maintainable* code: readable, modular, and clean. Just because you use a JavaScript framework doesn't mean your code is maintainable. Quick the contrary could be true — some frameworks make JavaScript uglier.
Duplicate the jQuery Homepage Tooltips
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and buzz. One of the widgets I love is Twitter's "Follow" button. Let me show you how you can implement this functionality with three popular JavaScript toolkits: MooTools, jQuery, and Dojo.
Create a Dynamic Flickr Image Search with the Dojo Toolkit
The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.
Dijit’s TabContainer Layout: Easy Tabbed Content
One of Dojo's major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very useful layout class is the TabContainer. TabContainer allows you to quickly create a tabbed content layout with minimal effort. Keep reading to see what you can create in just 10 minutes!