localStorage.setItem("history", JSON.stringify(myObject));

The error caused my app to break, refreshing the page and rendering the app useless!  After a bit of research, I found that the reason for the error was that my Mobile Safari’s Private Browsing was turned on.  You’d expect a silent error when this mode is one, but nope — simply a bricked app.  Since there’s no way to detect if the user’s browser is in “Private Browsing” is turned on (feature detection still works), the best solution is to wrap localStorage setters in try {} / catch() {} blocks:

try {
	localStorage.setItem("history", JSON.stringify(myObject));
}
catch(e) {}

I’m not seeing a better solution at the moment.  Since there’s now way to track Private Mode, and certain interactions break in this mode, using try {} / catch() {} blocks appears to be the best solution.

QUOTA_EXCEEDED_ERR in Mobile Safari is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I was recently looking at popular development site and found the following snippet:

jQuery("#subscribe-main li:nth-child(4)")....

This snippet found the desired elements in 1ms according to FireBug’s console.  A millisecond is lightning fast, but if you slightly change the selector code, you get a faster result:

jQuery("li:nth-child(4)", "#subscribe-main");

// Could use this as well
// jQuery("#subscribe-main").find("li:nth-child(4)")....

The selection code above returns the same elements in 0ms.  A millisecond difference is negligible in one instance, but in a large application, these milliseconds will add up!

This post simply acts a a reminder that selector composition is important.  Here’s a task for you:  go to the sites you’ve written the JavaScript selectors for and compare your selectors like I have above.  If you aren’t familiar with basic selector time testing via the console, here’s how you do it:

console.time("someKey");
jQuery("#mySelector .more .stuff")...
console.timeEnd("someKey");

The console doesn’t do better than millisecond precision, but a different result at that precision gets you started in selector enhancement.  Happy selector revising!

Selector Engines: Right to Left is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Convert an Image to Canvas with JavaScript

To convert an image to canvas, you use a canvas element’s context’s drawImage method:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

The 0, 0 arguments map to coordinates on the canvas where the image data should be placed.

Convert Canvas to an Image with JavaScript

Assuming modifications to the image have been made, you can easily convert the canvas data to image data with the following snippet:

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

The code above magically converts the canvas to a PNG data URI!

Alas, converting an image to canvas and canvas to an image is probably much easier than you think. In future posts, I’ll detail how you can apply different image filters to your canvased image. In the mean time, start buying fancy cars and houses with the future billion you’ll have!

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

The HTML

All that’s required is a parent element with which we’d like to listen to node insertions within:

<ul id="parentElement"></ul>

You can use any selector helper you’d like, but I’ve chosen an ID here.

The CSS

In order to get a handle on node insertion detection, we need to set up a series of keyframe animations which will start when the node is inserted. The clip property is used since it has no effect on the node itself:

/* set up the keyframes */
@keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }  
}

@-moz-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-webkit-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-ms-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-o-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

With the keyframes created, the animation needs to be applied on the elements you’d like to listen for. Note the tiny duration; that relaxes the animation footprint on the browser.

#parentElement > li {
    animation-duration: 0.001s;
    -o-animation-duration: 0.001s;
    -ms-animation-duration: 0.001s;
    -moz-animation-duration: 0.001s;
    -webkit-animation-duration: 0.001s;
    animation-name: nodeInserted;
    -o-animation-name: nodeInserted;
    -ms-animation-name: nodeInserted;        
    -moz-animation-name: nodeInserted;
    -webkit-animation-name: nodeInserted;
}

Add the animation to the child nodes you are listening for. When the animation ends, the insertion event will fire!

The JavaScript

The first step is creating an function which will act as the event listener callback. Within the function, an initial event.animationName check must be made to ensure it’s the animation name we want to listen for in this specific case:

var insertListener = function(event){
	if (event.animationName == "nodeInserted") {
		// This is the debug for knowing our listener worked!
		// event.target is the new node!
		console.warn("Another node has been inserted! ", event, event.target);
	}
}

If the animation name matches the desired animation, we know a DOM node has been injected. Now it’s time to add the event listener to the parent:

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

How awesomely simple is that?!

Daniel created this solution to aid in his forthcoming web components initiative, an initiative I’ll be covering more in depth very soon. This node insertion hack is useful and uses no framework, so it’s an incredible mechanism that can be used by anyone. Well done to Daniel!

Detect DOM Node Insertions with JavaScript and CSS Animations is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The JavaScript

As you could probably guess, this task is best accomplished with regular expressions:

function camelize(str) {
	return (str + "").replace(/-\D/g, function(match) {
		return match.charAt(1).toUpperCase();
	});
}
camelize("border-bottom-color"); // "borderBottomColor"


function hyphenate(str) {
	return (str + "").replace(/[A-Z]/g, function(match) {
		return "-" + match.toLowerCase();
	});
}
hyphenate("borderBottomColor"); // "border-bottom-color"

A couple of really handy JavaScript String to corresponding String format functions. Instead of expecting strings in only one format, your mini library can now accept both!

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

In fairness to XStyle, it’s more than just an AMD plugin for loading stylesheets. XStyle provides the capability to:

• Shim and extend CSS
• Load stylesheets and execute callbacks
• Nested @import loading

Shimming and extending CSS is great but doesn’t seem to be something I would need often; loading CSS with JavaScript modules is nice because:

1. Loading modules and templates together but needing to add LINK tags manually sucks
2. One define() to define a complete widget from JS, to template, and CSS, is ideal; especially for third party components

So consider a great JavaScript loader like curl.js. With curl.js, all you need to do to load a CSS file is:

curl(["css!path/to/file.css"], function() {
    // defineCSS loaded, do stuff!
});

Sweet, right? With a different loader, you can load your CSS files with other modules by coding:

define(["xstyle!./path/to/file.css"], function(){
    // module starts after css is loaded
});

Outstanding! With XStyle we can define a complete component, stylesheet and all!

XStyle is capable of much more than what I’ve presented above, but just the ability to load stylesheets with every other piece of a given module is priceless. Improves organization and speed of coding; well done Kris!

Load CSS Files via AMD with XStyle is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Super Quick AMD Primer

If you aren’t familiar with AMD structure, I’m going to give you the most oversimplified explanation you’ll ever hear. AMD is a system by which you define and require modules asynchronously. A define returns one or zero objects. The first argument of both define and require is (usually) an array of dependencies. The second argument is a function; the define returns the result, the require executes a basic callback:

// "define" a module
define(["namespace/dependencyA", "namespace/dependencyB"], function(depA, depB) {
	// Whole bunch of processing
	
	
	// Return what this module defines
	return function() {
		// Or an object, or whatever
	}
});

// "require" to use modules:
require(["namespace/dependencyC"], function(depC) {
	
	// depC can be used in here only
	// Yay for modularity!
	
});

The slashes in the dependency array items represent paths to module JavaScript files. Once dependencies are loaded, the action is allowed to begin.

As I said, this is a very simple, vanilla example; there are exceptions to every rule, so don’t bother pointing out what-ifs.

Configuring Module Loading with curl

And of course I start out with a few of the exceptions to the rule. Instead of a require function, curl.js defines curl in its place. Additionally, curl.js allows for an object literal as a first parameter, allowing for configuration of loaded modules:

curl({
		baseUrl: "/path/to/js",
		pluginPath: "curl/src/curl/plugin"
	}, 
	["namespace/depC", "namespace/otherDep"],
	function(depC, otherDep) {
		// Do stuff
	}
);

This configuration allows you to provide plugin paths, modules paths, and more.

Basic define and require with curl.js

Basic usage of curl.js is as you would expect from a JavaScript loader; dependency array as the first argument, callback with the second:

define(["namespace/depA", "namespace/depB"], function(depA, depB) {
	// Do something with the dependencies
	
	// Pump out a return obj
	return myFinalObject;
});

With a module defined, the same syntax requires and works with the dependencies:

curl(["namespace/depC"], function(depC) {
	// Do some stuff!
});

This is the same syntax you will have used with any JS loader, with the obvious exception of require being replaced by curl.

curl.js with next

The next method allows for chaining of module loading:

curl(["js!someFile.js"])
	.next(["dep1", "dep2", "dep3"], function (dep1, dep2, dep3) {
		// Execute regardless of domReady status
	})
	.next(["domReady!"])
	.then(
		function () {
		// do something after the dom is ready
		},
		function (ex) {
		// show an error to the user
		}
	);

This syntax may suit your fancy more than others.

curl.js with Deferred Syntax

If you work with the Dojo Toolkit, or more recently with jQuery, Deferreds are becoming more prevalent and incredibly useful; curl.js provides you the ability to write your loader JavaScript in the same fashion:

curl(["namespace/depA"]).then(
	function(depA) { // success callback
	
	},
	function(depB) { // errback
	
	}
);

The deferred format and ability to pass the result of an XHR pool can be very powerful.

Loading Non-AMD JavaScript Files

Sometimes you need to load JavaScript files that aren’t in AMD format, like loading MooTools or jQuery from CDN. curl.js makes that easy:

curl(
	["js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"]
).next(["namespace/MooModule"], function() {
	// We loaded Moo first, then once loaded, loaded a dependency that requires MooTools
	// At this point, both are loaded and we can work with them!
	
});

All you need to do add the js! prefix to the dependency string and you’re set; your callback will be fire when the basic JavaScript file is loaded. Note that you can mix AMD modules with basic JavaScript files:

curl(
	[
		"js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js",
		"js!http://davidwalsh.name/mootools-ftw.js",
		"namespace/independentModule"
	]
).next(["namespace/MooModule"], function() {
	// We loaded Moo first, then once loaded, loaded a dependency that requires MooTools
	// At this point, both are loaded and we can work with them!
	
});	

Loading CSS Files

Of course one of the strengths of AMD is modularity, so why not load your stylesheets with your scripts?

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with MyWidget
		// The CSS reference isn't in the signature because we don't care about it;
		// we just care that it is now in the page
	}
});

LINK tags don’t provide an onLoad event in all browsers, but curl.js’ shim provides a reliable method of detecting stylesheet load. Since stylesheets are a large part of UI-driven, JavaScript-powered widgets, creating modules with stylesheet dependencies is becoming much more abundant.

More curl Plugins

curl is much more than just a basic JS loader. I’ve already mentioned the JS and CSS plugins above, but curl has a few more. curl features a domReady plugin, as well as a text plugin and an internationalization plugin:

curl(
	[
		"i18n!stuff/nls/strings", // Load string content for the user's namespace
		"text!myWidget/resources/template.html", // Loads a file as text,
		"domReady!" // Don't fire the callback until the DOM is ready
	],
	function(nlsStringObject, template) { // Callback
		// Do something now that we have the NLS object, template, and domContentLoaded has fired
	}
);

These plugins are quick and easy enhancers to existing functionality!

curl is an absolute beast of a JavaScript loader. Beyond simple AMD loading, curl is fit with numerous configuration options, plugins, and multiple syntax structures to all the developer to code the way they want. This blog uses curl.js to asynchronously load JavaScript modules and stylesheets, manage domReady, and more; the best endorsement I can give!

curl.js: Incredible AMD Loader is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

orientationchange Event

This method is what you would expect from a mobile API; a simple orientationchange event on the window:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
	// Announce the new orientation number
	alert(window.orientation);
}, false);

During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.

resize Event

Some devices haven’t provided the orientationchange event, but do fire the window’s resize event:

// Listen for resize changes
window.addEventListener("resize", function() {
	// Get screen size (inner/outerWidth, inner/outerHeight)
	
}, false);

A bit less obvious than the orientationchange event, but works very well.

Screen Sizing

There are a few properties you can retrieve from the window object to get screen size and what I consider “virtual” screen size:

• outerWidth, outerHeight: the real pixel realestate (ex: 320×356 on iPhone, portrait)
• innerWidth, innerHeight: the virtual pixel realestate (ex: 980×1091 on iPhone, portrait)

These don’t give you the orientation, of course, but using some simple math, you can find out if the window is currently wider or taller.

Media Queries

We can identify orientation by CSS media queries as well:

/* portrait */
@media screen and (orientation:portrait) {
	/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
}

If you’d like to get clever, you can code a periodical “watcher” with JavaScript to check the background color of a block and fire your own orientation change.

matchMedia

The native window.matchMedia method allows for live media-querying. We can use the media queries above to find out if we’re in portrait or landscape view:

// Find matches
var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
	// Portrait orientation
} else {  
	// Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
	if(m.matches) {
		// Changed to portrait
	}
	else {
		// Changed to landscape
	}
});

So there are a few ideas and options for you. I’d love to hear any more practical techniques you’ve used!

Detect Orientation Change on Mobile Devices is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Most people would assume that sort would take no method and simply sort the basic items within the array:

[1, 3, 9, 2].sort();
	// Returns: [1, 2, 3, 9]
	
[1, "a", function(){}, {}, 12, "c"].sort();
	// Returns: [1, 12, Object, "a", "c", function (){}]

But nay, broseph! If you provide a function expression to the sort method, you can sort objects within the array using simple logic. Let’s say you have an array of objects representing persons and you want to sort them by age. Oh yes, it can be done, and quite easily:

[
	{ name: "Robin Van Persie", age: 28 },
	{ name: "Theo Walcott", age: 22 },
	{ name: "Bacary Sagna", age: 26  }
].sort(function(obj1, obj2) {
	// Ascending: first age less than the previous
	return obj1.age - obj2.age;
});
	// Returns:  
	// [
	//	  { name: "Theo Walcott", age: 22 },
	//	  { name: "Bacary Sagna", age: 26  },
	//	  { name: "Robin Van Persie", age: 28 }
	// ]
	

The anonymous function returns whether or not the first object’s age is less than the second’s, thus sorting the entire array in ascending order by age. Reverse the first and second arguments to sort in descending order.

So brochacho, now you know how to sort an array of objects using JavaScript. Get to it!

Sort an Array of Objects by Property Using sort(fn) is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})();

..but ensuring styling during print was a whole different story. Despite the JavaScript shim above, the elements still wouldn’t style correctly when I went to print. After trying a variety of solutions, my last attempt was the most successful; Modernizr’s “print-shiv” extra! This shim wraps your HTML5 elements with printer-friendly elements during the onbeforeprint event, then cleans up after itself when the onafterprint event is fired. There are no special configurations to set, simply include the JavaScript file within the page. Just wanted to pass this quick tip on; head over to GitHub and download it!

HTML5 Element Printing in Internet Explorer is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.