David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Custom Getters and Setters with MooTools

2012-02-01T15:27:08Z

Working with Dojo all day and scoping out MooTools at night gives me a unique perspective; I get to constantly evaluate the two frameworks and mentally move functionalities from framework to framework. One small but handy feature within the Dojo Toolkit’s Dijit UI Framework is its set/get system. Dijit allows developers to add custom methods tied into simple get and set methods to allow manipulation properties into and on the way out of a class. I took a few moments to implement this system in MooTools.

The idea is that a Class instance has properties:

var MyClass = new Class({
	value: 10/*, more... */
});

Instead of simply setting and getting object properties directly, sometimes they need to be treated before coming in or going out. For setting, it can be a sort of internal formatting or validation. For getting, it’s mostly formatting. The method formats are _get[SomeAttrName]Attr and _set[SomeAttrName]Attr. With that in mind, it’s time to create the mixin class.

JavaScript GetSet for MooTools

This new functionality will be independently coded as a class meant as a Class mixin using the Implements property:

(function() {
	
	// Turns "thisPropertyName" into "ThisPropertyName"
	function getFunctionName(key, getSet) {
		return "_" + getSet + key.charAt(0).toUpperCase() + key.slice(1) + "Attr";
	}
	
	// Implement the getter / setter
	this.GetSet = new Class({
		// A custom getter that looks for _get
		get: function(key) {
			var fn = this[getFunctionName(key, "get")];
			return (fn && fn.call(this, key)) || this[key];
		},
		set: function(key, value) {
			var fn = this[getFunctionName(key, "set")];
			if(fn) {
				fn.call(this, value);
			}
			else {
				this[key] = value;
			}
			// Returning "this" to allow chaining
			return this;
		}
	});
	
})();

The GetSet will feature two method, get and set, and will check for the presence of custom set and get methods; if so, those methods are called, and if not, the property is simply set or returned. Now let’s look at a sample usage:

// Create a test class
var TestClass = new Class({
	// Implement the new class
	Implements: [GetSet],
	// The custom getter
	_getValueAttr: function() {
		return this.value / 10;
	},
	// The custom setter
	_setValueAttr: function(value) {
		this.value = value * 10;
	}
});

// Create a test class instance
var inst = new TestClass({
	value: 8
});

/*
	inst.set("value", 20);  // inst.value = 200
	inst.get("value");  // inst.value = 20
*/

In this case, we’ve set custom get and set methods which will handle the class’ value property. On the way in, the value is multiple by 10 and then set on the object. On the way out, the value is divided by 10. Of course, not the most realistic of scenarios, but this example provides a very simple illustration of how these methods can be used.

So what would be a more realistic scenario? As I said above, custom setters can be very useful as an internal validator. Both the getters and setters are valuable, however, because they also provide a way to “spy” on object properties and have multiple reactions to their changes.

Custom Getters and Setters with MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Upload Photos to Flickr with PHP

2012-01-31T15:20:44Z

I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram’s iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the photo to Instagram, Twitter, Facebook, and Flickr. This process made me wonder what it would take to upload photos to Flickr using PHP. This post details how you can authenticate and upload photos to Flickr using PHP with phpFlickr.

View Demo

Step 1: Flickr Application Key Creation

Just as with every other API usage, you need to go to Flickr to sign up for an API key. Put together a good description and title, but one key is that you set the callback/redirect URL to the example page (or at least I did).

Step 2: Grab phpFlickr

phpFlickr is a suggested PHP library by Flickr. The library is not perfect (there seems to be a few long-standing redirect issues) but it does well as an all-purpose Flickr API interface.

Step 3: Configuring and Authentication

It’s easiest to understand the process by looking at the code:

// Start the session since phpFlickr uses it but does not start it itself
session_start();

// Require the phpFlickr API
require_once('phpFlickr-3.1/phpFlickr.php');

// Create new phpFlickr object: new phpFlickr('[API Key]','[API Secret]')
$flickr = new phpFlickr('[API KEY]','[API SECRET]', true);

// Authenticate;  need the "IF" statement or an infinite redirect will occur
if(empty($_GET['frob'])) {
	$flickr->auth('write'); // redirects if none; write access to upload a photo
}
else {
	// Get the FROB token, refresh the page;  without a refresh, there will be "Invalid FROB" error
	$flickr->auth_getToken($_GET['frob']);
	header('Location: flickr.php');
	exit();
}

After starting the session and requiring the phpFlickr API library, an instance of phpFlickr needs to be created, providing it the API key and API secret. With the instance created, an if statement will be employed to react to a frob parameter from Flickr. If no frob is provided, the auth method should be called, which either confirms authentication or redirects the user to the Flickr site for sign in. If a frob is provided, the authentication token is set and the page needs to be refreshed (I’m not sure why the redirect needs to take place, but it was the only way to ensure authentication worked gracefully).

Step 4: Uploading a File

Uploading an image to Flickr is actually much easier with phpFlickr than authenticating. Uploading a file is as easy as one function call:

// Send an image sync_upload(photo, title, desc, tags)
// The returned value is an ID which represents the photo
$result = $flickr->sync_upload('logo.png', $_POST['title'], $_POST['description'], 'david walsh, php, mootools, dojo, javascript, css');

The sync_upload method allows many parameters, but the image, title, description, and tags are the most prominent. There is also an async_upload with may also be used.

phpFlickr also allows simple read access so that you may create a slideshow of photos, tags, etc., so don’t think that phpFlickr is just for uploading!

View Demo

My first attempt to create an independent PHP/Flickr script failed due to the need for OpenAuth. phpFlickr does a great job in managing the entire process, and the documentation is decent for getting started. I ran into a few problems with “too much redirection” (fixed by the “if” statement I added) and an “invalid frob” error (cured by the additional redirect) errors but beside those, phpFlickr is the right choice!

Upload Photos to Flickr with PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Image Data URIs with PHP

2012-01-30T16:42:40Z

If you troll page markup like me, you’ve no doubt seen the use of data URI’s within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves a network request for each image, and if you’re the paranoid type, can prevent exposure of directory paths. Since creating data URIs is incredibly easy, let me show you how to do it with PHP.

View Demo

The PHP

Start by reading in the image using file_get_contents (or any other PHP method you’d like), then convert the image to base64 using base64_encode:

// A few settings
$image = 'cricci.jpg';

// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format the image SRC:  data:{mime};base64,{data};
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

// Echo out a sample image
echo '';

With the image data in base64 format, the last step is placing that data within the data URI format, including the image’s MIME type. This would make for a good function:

function getDataURI($image, $mime = '') {
	return 'data: '.(function_exists('mime_content_type') ? mime_content_type($image) : $mime).';base64,'.base64_encode(file_get_contents($image));
}

View Demo

The thing to remember is that IE7 and lower don’t support data URIs, so keep that in mind if you’re considering switching from image paths to data URIs!

Image Data URIs with PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Images, max-width, and Mobile

2012-01-24T14:27:04Z

Many web developers prefer to keep as much control over the applications, especially when it comes down to how the application displays on a mobile device. I’ll often see developers prevent zooming in mobile browsers, allowing them to manage display size:

A useful snippet for any mobile developer. Another useful snippet, this one a small CSS helper, ensures that your images don’t exceed the fixed width on mobile devices:

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	img { max-width: 100%; }
}

By setting the max-width property of the image, the image cannot bleed to the right of the page, regardless of its size. You can add that same max-width property to images when it comes time for print too:

@media print {
	img { max-width: 100%; }
}

Keep this snippet handy for your current and future mobile web and print endeavors; it’s just another CSS directive to show your mobile and print users that you care!

Images, max-width, and Mobile is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Amazing 3D Animation with three.js

2012-01-23T18:47:08Z

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:

The aim of the project is to create a lightweight 3D engine with a very low level of complexity; in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.

The three.js engine allows developers to create mindblowing 2D and 3D animations with Canvas and WebGL, from basic cubes to advanced animations so smooth you’ll wet yourself.

Favorite three.js Demos

The three.js repository comes with several dozens examples of the engine’s capabilities. Here are a few of my favorites:

You can see all of the examples here: http://mrdoob.github.com/three.js/

Mind status: blown. three.js is an incredible project that allows developers to achieve amazing animations efficiently and without Flash. Mr.Doob: take a bow — three.js is ahead of its time.

Amazing 3D Animation with three.js is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

MooTools Mobile: It’s Touching!

2012-01-20T00:01:34Z

When the community asked the MooTools team to add basic mobile event listening to MooTools’ Event class, we listened; today MooTools supports all touch and gesture events. What if we want more detailed mobile event listeners though, like swipe with direction, pinch, or touchhold events? That’s where Christoph Pojer’s excellent MooTools Mobile comes in. MooTools Mobile isn’t a full mobile framework, but rather a set of utilities to make catering to mobile a bit more…touching. Let’s have a look at the resources provided by MooTools Mobile!

View Demo

As you’ve come to expect from members of the MooTools team, Christoph’s new Touch-based event classes are compact and modular. Each class will be found within the Touch path.

Swipe

By using the Touch/Swipe resource, you can attain the direction of the swipe, as well as the start and end coordinates:

// Add the swipe event listener
anyElement.addEvent("swipe", function(event){
    event.direction // "left" or "right"
    event.start // {x: Number, y: Number} Swipe start position
    event.end // {x: Number, y: Number} Swipe end position
});

// Configure minimal swipe distance and vertical swipe preferences
anyElement.store("swipe:distance", 30); // Default: 50
anyElement.store("swipe:cancelVertical", true); // Default: false

As you can see above, you may also configure minimum swipe distances and cancellation of vertical swipes.

Pinch

The Touch/Pinch resource allows you to listen for pinches, as well as configure the pinch threshold:

// Add a pinch event to anyElement
anyElement.addEvent("pinch", function(event){
    event.pinch // "in" or "out"
});

// Store a custom threshold
anyElement.store("pinch:threshold", 0.3); // Default: 0.5; Amount of scaling to be done to fire the pinch event

The pinch threshold is stored within elements themselves so you may customize to fit any element.

Touchhold

The touchhold event is used throughout all mobile operating systems, so why not implement touchhold within the browser?

//  Listen for touchhold on anyElement
anyElement.addEvent("touchhold", function(event){
    // Event fires
});

Any element may store an optional delay before the touchhold event fires:

anyElement.store("touchhold:delay", 1000); // Default: 750

Maximum versatility with minimal code!

Browser Enhancements!

Besides providing these custom touch events, MooTools Mobile provides additional information within the Browser object via a Device property:

Browser.Device // Object added to Browser
	Browser.Device.name // ipad / iphone / ipod OR other
	Browser.Device.ipad // true if on ipad
	Browser.Device.iphone // true if on iphone
	Browser.Device.ipod // true if on ipod
	Browser.hasHighResolution // true on iPhone 4
	Browser.isMobile // True on any platform that is not Windows / Linux / Mac

These properties give you further insight as to the device capabilities!

View Demo

With mobile development booming for the foreseeable future, it’s important to make sure your site is as mobile-friendly as possible. Christoph’s mobile contribution is just the tiny helper developers may need to make their MooTools-powered web apps more mobile device-friendly. MooTools (Mobile) FTW!

MooTools Mobile: It’s Touching! is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Interesting -webkit CSS Properties

2012-01-10T15:33:52Z

A few weeks back I touched on a handful of Mozilla-specific CSS properties that I found to be interesting. This week I’d like to share a few WebKit-specific CSS properties that make me all tingly inside.

-webkit-touch-callout

The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.

a.js-only {
	-webkit-touch-callout: none;
}

This would be very useful on apps that use A elements which aren’t traditional links, but simply trigger AJAX / JavaScript functions.

-webkit-user-drag

The -webkit-user-drag property specifies that an entire element should be draggable instead of its contents:

/* no dragging at all */
.content p.noDrag {
	-webkit-user-drag: none;
}

/* drags entire element, not the text/selection */
.sidebar div.elDrag {
	-webkit-user-drag: element;
}

-webkit-appearance

Using the -webkit-appearance property, you can make a SPAN tag look like a radio button, or textarea, or SELECT dropdown, or any of the other 50 supported properties.

span.lookLikeRadio {
	-webkit-appearance: radio;
}

span.lookLikeTextarea {
	-webkit-appearance: textarea;
}

span.lookLikeScrollbar {
	-webkit-appearance: scrollbartrack-horizontal;
}

Wanna see this one in action? Check out my post: WebKit-Specific Style: -webkit-appearance.

-webkit-text-security

Who knew you could customize the character which hides password characters?

input[type="password"] {
	-webkit-text-security: square;
}

Not necessarily useful but interesting that WebKit gives us this ability.

-webkit-user-select

The -webkit-user-select property allows us to prevent users from selecting text within a given element:

div {
	-webkit-user-select: none;
}

Preventing selection within a node can be helpful when on nodes which you prefer only be clicked.

I disliked browser-specific functionality when I was younger because I had the wrong mentality; you use them as enhancers, not for core functionality. Have a favorite WebKit-specific CSS property? Share it!

Interesting -webkit CSS Properties is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

JavaScript Enlightenment by Cody Lindley

2012-01-10T01:23:56Z

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:

This book is not about JavaScript design patterns or implementing an object-oriented paradigm with JavaScript code. It was not written to distinguish the good features of the JavaScript language from the bad. It is not meant to be a complete reference guide. It is not targeted at people new to programming or those completely new to JavaScript. Nor is this a cookbook of JavaScript recipes. Those books have been written. It was my intention to write a book to give the reader an accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances: complex values, primitive values, scope, inheritance, the head object, etc. I intend this book to be a short and digestible summary of the ECMA-262, Edition 3 specification, focused on the nature of objects in JavaScript.

In short, JavaScript Enlightment takes JavaScript back to its basics. The chapter summary is really drives that point home:

Constructing Objects
Working with Objects and Properties
Object()
Function()
The Head/Global Object
The this Keyword
Scope and Closures
Prototype Property
Array()
String()
Number()
Boolean()
Null
Undefined
Math Function

There are a couple of things I really enjoyed about Cody’s writing style:

Many authors write in a way to reinforce that they’re the smartest guy in the room. What people like them don’t understand is that eager-to-learn developers have already bought the book: they trust that you’re the expert, so you don’t have to use advanced verbiage to look intelligent. Cody skips that ego-centric exercise, explain JavaScript concepts in Leyman’s terms.
Each section covers one JavaScript object/concept, so the book is very focused. Too often development books bleed into and out of topics without true explanation.
Lindley’s book is packed full of code examples; if you’re anything like me, code examples tell you as much if not more than plan text. Every person has their own style of leaning, but there’s nothing like a solid code example you can play around with.

The books itself, when it comes to topics covered, is great for beginners and intermediates a like; there’s a lot of learning and reinforcing of core JavaScript concepts. Each code snippet provides a link to a working version of the code, which comes in handy if you want to quickly tinker with such code. Lastly, there’s plenty of personality in Lindley’s book; it’s not simply a reference to flick through — designers and developers will enjoy reading JavaScript Enlightenment.

Cody Lindley’s JavaScript Enlightenment is an essential resource for any designer or developer looking to to understand JavaScript at its core, regardless of skill level or JavaScript framework. Lindley’s ability to explain key JavaScript concepts with realistic, useful code examples is what really makes JavaScript Enlightenment shine. Don’t be a slave to your JavaScript framework, because copy’n'paste is no way to go through a development life! Get enlightened by JavaScript Enlightenment!

JavaScript Enlightenment by Cody Lindley is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Using dojo/aspect

2012-01-05T18:34:47Z

Simply put: the Dojo Toolkit has tools that other JavaScript toolkits don’t. One of those tools includes Dojo 1.7′s aspect, a module that allows developers to react to function calls by executing another function before or after that call. This aspect resource originates from Dojo’s awesome connect mechanism. Let’s check out how it works!

aspect Basics

The idea and value of aspect is that it allows you to be notified of function calls without needing to modify the original function’s contents. You also don’t need to implement pub/sub to know when methods are called. The basic setup looks like:

// Load the dojo/aspect dependency
require(["dojo/aspect"], function(aspect) {
	
	// Create an object and method to spy on
	var original = {
		someMethod: function(arg1, arg2) {
			console.warn("original.someMethod called: ", arg1, arg2);
			return "Hello " + arg1 + " " + arg2;
		}
	};
	
	// Use aspect.after ("before" also available)
	aspect.after(original, "someMethod", function(arg1, arg2) {
		console.warn("After method called with arguments: ", arg1, arg2);
	}, true);
	
	// ...and a while later, call the original method
	original.someMethod("David", "Walsh");
	
});

The first argument is the origin object, the second argument is the method to listen in on, and the third is the function to fire before or after, depending on which aspect method you call.

aspect.before

The before method will fire before the originally called method fires:

// Fire a function before the original
aspect.before(original, "someMethod", function(arg1, arg2) {
	console.warn("aspect.before: ", arg1, arg2);
});

// "aspect.before: ", David, Walsh
// "original.someMethod called:", David, Walsh

Since this method is fired before the original function call, the arguments passed to the original method are automatically received by the aspect method.

aspect.after

The after method fires after the original method fires, and accepts an extra parameter called receiveArguments, where you may direct the second method to receive the original method’s arguments, or the return value of the original method.

receiveArguments = true

Passing the receiveArguments as true will pass the two arguments from the original function call to the aspect method:

// First scenario:  aspect.after that accepts the same arguments as the origin function
// because the fourth argument is passed as "true"
aspect.after(original, "someMethod", function(arg1, arg2) {
	console.warn("After method called with arguments: ", arg1, arg2);
}, true);

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "original.someMethod called:", David, Walsh
// "aspect.after: ", David, Walsh

Removing the last argument instead allows the aspect method to receive the return value of the original function call:

// Second scenario: aspect.after that accepts the result of the original function call
aspect.after(original, "someMethod", function(arg1, arg2) {
	console.warn("aspect.after: ", arg1, arg2);
	
	// "arg2" will be "undefined" since only the return value is provided 
	
}); // No "true"

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "original someMethod: David Walsh"
// "aspect.after: ", David Walsh

In most cases, aspect.after is what you will want to use. An object with a remove method will be returned, allowing you to remove the connection whenever you’d like.

aspect.around

What if you want to execute code both before and after the original method? Simple: use aspect.around. The around method allows you to call the original function when you want, within your listener:

// Call the around method, which gets one argument, the original method
aspect.around(original, "someMethod", function(originalMethod) {
	// Return a new method, which receives the same arguments as the original, just like "aspect.after"
	return function(arg1, arg2) {
		// Execute "before" functionality
		console.warn("before!", arg1, arg2);
		
		// Execute the original method as desired
		originalMethod.apply(this, arguments);
		
		// Execute "after" functioanlity
		console.warn("after!");
	};
});

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "before!", David, Walsh
// "original someMethod: David Walsh"
// "after! David Walsh"

The idea behind aspect.around is very much like using this.inherited(arguments) within Dojo classes; you can make that call any time you’d like, so other code may run before or after.

Real Use of aspect

One realistic use of aspect relates to extending Dijit widgets, or building a Dijit layout that uses multiple widgets. Often you’ll see something like:

// When the onChange event fires
aspect.after(this.dropdown, "onChange", function(value) {
	// ...fire an xhr request to get information about it
	dojo.xhrGet({
		url: "/data.php?value=" + value
	}).then(function(data) { 
		// Do something with it.
	});
}, true);

When the dropdown’s value changes, an XHR request is fired to get information about that value.

Explaining aspect and the value of function-to-function connections can be difficult. I usually try a parent-to-child analogy that just further confuses people. Think of it this way: aspect allows you to know when other functions are called, without needing to modify the other function. This happens all over the Dijit UI framework, Brilliant!

Using dojo/aspect is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

JavaScript Battery API

2012-01-03T16:36:11Z

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!

View Demo

The battery object is located at window.navigator.battery, but since this is Mozilla’s initial offering and the API is not yet cemented, you’ll need to use window.navigator.mozBattery. The helpful mozBattery properties include:

charging: Represents if the system’s battery is charging. The attribute must be set to false if the battery is discharging, and set to true, if the battery is charging, full, the implementation is unable to report the state, or there is no battery attached to the system, or otherwise.
chargingTime: Represents the time remaining in seconds until the system’s battery is fully charged.
dischargingTime: Represents the time remaining in seconds until the system’s battery is completely discharged and the system is about to be suspended.
level: Represents the current battery level scaled from 0 to 1.0. The attribute must be set to 0 if the system’s battery is depleted and the system is about to be suspended, and to 1.0 if the battery is full, the implementation is unable to report the battery’s level, or there is no battery attached to the system.

Events for each of these statuses are provided, including onchargingchange, onchargingtimechange, ondischargingtimechange, and onlevelchange. Basic usage is simple:

// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// A few useful battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);

// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
	console.warn("Battery charge change: ", battery.charging);
}, false);
battery.addEventListener("chargingtimechange", function(e) {
	console.warn("Battery charge time change: ", battery.chargingTime);
}, false);
battery.addEventListener("dischargingtimechange", function(e) {
	console.warn("Battery discharging time change: ", battery.dischargingTime);
}, false);
battery.addEventListener("levelchange", function(e) {
	console.warn("Battery level change: ", battery.level);
}, false);

I promised a simple API, didn’t I? The battery API is the perfect API: simple, effective, and focused!

View Demo

So why use the battery API? Since many mobile apps live inside a browser wrapper (aren’t completely “native”), it’s great to have access to system information. Some processes are power-intensive and it may bear warning the user before starting the process that their device is low on battery. Either way, this simple API’s true usefulness should become apparent soon!

JavaScript Battery API is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.