JavaScript Tutorials

  • ms: Tiny Millisecond Module by Guillermo Rauch

    This code snippet is now available with a GitHub repository: https://github.com/guille/ms.js

  • Amazing 3D Animation with three.js

    The hottest topic for client-side developers seems to be animation. Whether it be from CSS transformations, keyframe animations, or animations managed with JavaScript APIs, it seems like each day we come across another demo that shows us how can we've come outside of Flash. The latest shocker comes from the three.js project. The creators of three.js explains the project best:

  • JavaScript Enlightenment by Cody Lindley

    JavaScript Guru Douglas Crockford famously said "JavaScript is the only language people feel like they don't need to learn to use." A quote that will surely provide a laugh, but it's funny because it's true. What furthers this sentiment is that JavaScript frameworks like jQuery have turned JavaScript into a language different than what it truly is, and has made client-side coding so easy that there's sometimes no need to really learn JavaScript. Anyone worth their salt, however, knows that in order to expertly and efficiently use any tool, you have to start with the basics.That's where JavaScript Enlightenment comes in. JavaScript Enlightenment is an outstanding book by Cody Lindley, one of several members of the jQuery team. I'll let book's description speak for itself:

  • JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its charging status, and allows you to be notified of changes via a few events. Let's check it out!

  • JavaScript CDN Fallbacks

    CDNs are great for pulling shared resources from, especially JavaScript libraries. The advantage in the likelihood that a file is already cached before the user gets to our site is huge. The only problem with using a CDN is that it's out of control; more specifically, what if the CDN server is down? What a nightmare! Thousands if not millions of websites would be hurt...but not yours. Nope, you added a CDN fallback so that a failed CDN wouldn't hurt your site!

  • DOM Events in JavaScript

    Mozilla Firefox 7 introduced CSS' useful text-overflow: ellipsis, an outstanding method of dynamically and elegantly concatenating strings within their parent elements. Firefox was late to the text-overflow party, so the Dojo Toolkit offered dojox.ellipsis, a resource that would shim ellipsis functionality with an iFrame. When perusing the dojox.ellipsis code, I found that the creators used the DOMSubtreeModified event to recheck all nodes when the page structure changes. After a bit of research, I found a whole host of DOM events you can use to spy on the document.The DOM Tree EventsHere are the DOM tree events you can listen for:

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back? The Page Visibility API allows developers to react to changes in page visibility via the visibilitychange document event. New document.hidden and document.visibilityChange properties are also available.

  • iPhone Scrollbars with iScroll

    Since we've had web browsers and JavaScript, we've been intent on replacing native browser functionalities, and for many reasons. Whether it be that the native look or functionality is ugly, doesn't work the same across browsers, or isn't as feature-rich as it should be, we've always pushed the browser's limits to do better. One functionality we've tried desperately to emulate is scrollbars. iScroll, a fairly new scrolling lib, has done an exceptional job in emulating scrolling both within desktop and mobile browsers. iScroll also allows for scrolling of elements with overflow on older versions of Mobile Safari. Let's have a look at iScroll!

  • Detect Scrollbar Width with JavaScript

    I've recently been working on an advanced JavaScript-based grid solution and let me tell you: it's quite an undertaking. Making sure the grid is accessible, reactive, efficient, and cross-browser compatible is difficult, but even the minor workings of each of those are hard. One small task was detecting the width of the vertical scrollbar so that I know how wide the grid body truly was. Here's the tiny snippet to do it:

  • Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I cannot fathom how it's all done. Since I already covered booby nudity detection with JavaScript, I thought it would be worth some time to explore face detection. Facebook uses it, so maybe it has application in your websites.