Markup Tutorials
Duplicate DeSandro’s CSS Effect
I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page. A brilliant idea, if I may say so myself (and I may). David's design is simplistic but features a few classy CSS effects, one of the most impressive being the footer "made this" animation. Let me show you how David accomplished this effect.
Using RTA Labels for Adult Content
Sometimes the web seems like a grab bag of anything because anyone can put just about anything up. There are, however, an increasingly large number of organizations that choose to be responsible about the adult or sensitive content they push. A standard called RTA, Restricted to Adults, has been created for robots, search engines, and general crawlers to notify them that the content on a given page or entire website should be viewed only by adults. There are multiple methods to communicating this standard — let me show you each of them!
Background Animations Using MooTools
Updated 4/25/2011: The background animation has been updated to work well with Internet Explorer 7 and 8, and more efficiently with every other browser. This was accomplished by adding the wait property to the animation, and using an initial setStyle assignment to work around an IE8 background-position bug.
Convert XML to JSON with JavaScript
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My mobile app connects to numerous social network APIs, some of which only provide an XML response. My mini "framework" uses JSON to dynamically create widgets so I've needed a way to turn XML into JSON. I found many solutions but none of them worked. After tweaking an existing function, I've found a solution that works great.
Create a Blank Favicon with Data
I was recently setting up a virtual host and diving into development when I needed to debug a JavaScript issue. One thing that started annoying me right away was the console message notifying me that the favicon.ico file couldn't be found. I hadn't put one there and had no desire to...but that damn message was bugging the hell out of me. I did a quick search and found a tiny data URL snippet to include a blank favicon within the page.
Create a Dojo Lightbox with dojox.image.Lightbox
One of the reasons I love the Dojo Toolkit is that it seems to have everything. No scouring for a plugin from this site and then another plugin from that site to build my application. Buried within the expansive dojox namespace of Dojo is dojox.image. dojox.image is host to many common UI plugins, the most popular being dojox.image.Lightbox, a great solution if you're looking to create a reliable, elegant Lightbox with Dojo. Let me show you how use dojox.image.Lightbox in your next web application!
How JavaScript Event Delegation Works
One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements. The base concept is fairly simple but many people don't understand just how event delegation works. Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.
RealTime Stock Quotes with MooTools Request.Stocks and YQL
It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power. One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP: Request.Stocks. Created by Enrique Erne, this great MooTools class acts as a wrapper for Request.JSON and Yahoo!'s YQL service. Let me show you how to user Enrique's awesome MooTools JavaScript class!
Prevent Form Field Autocomplete
Preventing autocompletion of form fields is incredibly important since we never know where our users are completing them from. They could complete them from a super secure computer or an incredibly public computer. Regardless of security level, some field values should never be remembered, like credit card number, social security number, etc. Preventing autocompletion is as simple as adding one attribute to a FORM tag for individual form fields.
Create Spinning, Fading Icons with CSS3 and jQuery
Last week I debuted a popular blog post titled Create Spinning, Fading Icons with CSS3 and MooTools. The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery.