JavaScript Tutorials

  • DOM Manipulation with put-selector

    DOM node manipulation is a big part of the web today; just look at how popular the jQuery JavaScript framework has gotten. The ability to easily work with the DOM allows us to do a lot of work in a little bit of code. Thanks to a new JavaScript module by Dojo Toolkit developer Kris Zyp, working with the DOM just got a lot more compact. With a name as short as the syntax itself, put could make you change the way you work with the DOM.

  • File Uploads and C:\fakepath\

    I was recently working on a project that required providing an AJAX uploading widget to users. I decided to use Dojo's dojox.form.FileInput widget so the "Upload" button would look just like every other button within the web application. Everything worked great until I tested the widget in Chrome and found that the value of the input node was being set to C:\fakepath\{Original File Name}. I then checked Internet Explorer and Safari; both of them were prepending "C:\fakepath" to the file name. WTF?!

  • 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!