JavaScript Tutorials

  • Adaptive Images

    The landscape of web continues to change as we get more and more devices that we need to support. One concern when creating websites that should accommodate all screen sizes is image size. The acceptable size for an image is not the same across devices, so we usually end up compromising image size and quality on all devices; not the optimal solution, of course. Enter a solution called Adaptive Images, a PHP / .htaccess based solution for detecting screen size and delivering optimally sized images for the user's device.

  • JavaScript Coding with Class

    I've spent the last two weeks in London, eating fish'n'chips, drinking cup'o'tea, and being a hooligan at the Arsenal. Oh yeah, there was a MooTools hackathon too. The MooTools hackathon was hugely successful and I'll be providing more detail about what was accomplished and where MooTools is going over the coming weeks. It was also great to meet some of the development team in person instead of simple IRC. MooTools FTW!

  • JavaScript and CSS Spinners with spin.js

    I think it's safe to say the days of using images to provide the "small touches" are over.  We can now safely create gradients, drop shadows, rounded corners, and scaled, rotated, transformed animations.  It seems we've now moved on to replacing more complex effects, like spinner images.  A great project called spin.js has surfaced, allowing developers to create CSS-powered spinners where keyframes are available, and uses VML as a fallback for Internet Explorer. spin.js is very customizable and is built with pure JavaScript so that no toolkit is required (though a jQuery plugin is available within the site demo).   Let's have a look at how to use and customize spin.js!

  • Custom AJAX Content Handling with the Dojo Toolkit

    If you were to ask me for the top five words that should describe any JavaScript framework, one of them would be flexible.  The Dojo Toolkit is ultra-flexible in just about every way, using customizable classes and dojo-namespaced objects to to allow for maximal flexibility.  One of those dojo-namespaced objects, dojo.contentHandlers, is an object containing key->value pairs for handling the result of AJAX requests.  Let me show you how to use these content handlers and how you can create your own!

  • dat.gui: Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives being that they don't have the community behind them to drive growth and the developer that uses multiple micro-frameworks has to work with inconsistent APIs.  To each their own;  I don't have a strong feeling either way, as it depends on the project.

  • Full Awesomeness with dojo.partial and MooTools’ Function.partial

    Much like MooTools, the Dojo Toolkit features a host of JavaScript language helpers.  One of those helpers is dojo.partial.  This method, which lives in Dojo Base, allows you to call a method with additional arguments appended to the front of a function signature.  Sound a bit weird?  It did to me too.  Let's take a quick peek at dojo.partial's syntax and when you'd use it.

  • Add a Google+1 Badge to Your Website

    Google's new Google+ service is taking the development world by storm, and why shouldn't it?  It's minimalistic UI, use of cutting edge web techniques, and overall usability make it Google+ one of the more impressive web applications I've seen in quite a while (I was going to say "since Google Wave", but that one didn't end up well, did it?) Google+ allows you to share photos, links, statuses, and much more;  consider it a mesh between Twitter and Facebook.

  • The element.dataset API

    A while back I showed you the awesome classList API, which allows simple addition, removal, and toggling of CSS classes without the need for parsing the className.  Another simple API available in FireFox Aurora Firefox 6, at time of print and Chrome 8 is the element.dataset API.  This tiny API allows developers to get and set data- attribute values on HTML elements.   Let's take a look at how it works!

  • nude.js: Nudity Detection with JavaScript

    When I first heard about nude.js, the client side nudity detection software, I was very skeptical for a number of reasons:

  • Creating Plugins for SnackJS

    My SnackJS: A Tiny-But-Tasty JavaScript Framework post exposed you to Ryan Florence's new JavaScript framework called SnackJS.  SnackJS' motto is "Because sometimes, all you need is a snack" , and for good reason:  this 3KB micro-framework provides the functionality you need for most websites without the huge overhead of jQuery or other frameworks.  As SnackJS is in its infancy and its aim is to be tiny, the framework does not include some functionalities found in other frameworks;  in short, SnackJS assumes you know how to accomplish some tasks (like modifying element styles, etc.)  using basic JavaScript.