Archive for the ‘Projects’ Category

 

FX: Lightweight and Standalone Animation

It might seem like one of those unnecessary things, but it can help to bridge the gaps, adding that little something extra for the end-user’s experience. A smooth animation allows a user to fully understand the actions taking place by visually seeing components in transition. Here, I present to you my animation framework appropriately named FX. The motive here was to create a script with the mentality of keeping it simple, library independent, and lightweight. In the end all you get is a seamless transition in all browsers while maintaining complete control over the animation.

onDOMReady: No Browser Sniffing!

For the most part, I’ve typically relied on window.onload for my various projects; its simple, cross-browser, and the alternative onDOMReady functions were unreliable due to their utilization of browser sniffing in some fashion. However, the problem with window.onload, as I’m sure you’re all aware, is that it doesn’t fire until the entire page has loaded including all images. This can make for a usability nightmare for any page with a lot of images and/or anybody with a slow connection. If your page relies on JavaScript then there could very well be an extended amount of time whereby the user is interacting with the page and it hasn’t yet been initialized. An onDOMReady-related function is the more modern approach, allowing you to define a function that will execute as soon as the DOM is in a usable state, that is to say structurally complete. The main obstacle now is to create a solution that is not dependent on browser detection.

Cross-Browser XML and XSLT Processing

There is something inherently powerful about what direct data interaction and manipulation is capable of and the ease at which it performs. XSLT may be called a stylesheet but it is nothing like CSS, it deals directly in data management and presentation, utilizing advanced functionality typically reserved for a scripting language. Similar to what Smarty is to PHP templates, XSLT basically defines the rules for rendering an XML file, with one important distinction – the data is live. The data is subject to further XSL manipulation after the XML document has been initially transformed, facilitating many dynamic features. This has great implications on the web applications of the future; loading a widget could be as simple as dynamically loading an XML document which contains all settings and instructions, performing an XSLT transformation and appending the result document to the DOM. With those kind of capabilities the potential for such an application is limitless.