If you’re familiar with html5 boilerplate check it out here.

if (Modernizr.localstorage) {
alert('localStorage is available!');
// run localStorage code here...
}
else {
// no native support for local storage
alert('This Browser Doesn\'t Support Local Storage.');
}

View Example of Detection

If you’re not familar with Modernizer download and read up on it here.

First create an HTML file with an unordered list. The unordered list must have the html5 contenteditable=”true” attribute to allow the content to be modified. Also give the UL an ID so it can be targeted.

Here is the JS needed. Please note jQuery is needed for the following:
$(document).ready(function() {
var edit = document.getElementById('editableList');
$(edit).blur(function() {
localStorage.setItem('toDoData', this.innerHTML);
});
//when the page loads
if(localStorage.getItem('toDoData')){
edit.innerHTML = localStorage.getItem('toDoData');
}
});

View the Example

In the inspector you can deleted the stored data. Note the data is stored per browser.

A Little More About Local Storage

HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page (which takes extra time and precious bandwidth). HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded. – http://diveintohtml5.org/

Checkout my HTML5 Textmate Bundle, localStorage Snippets just added.

Required watching for all JS developers.

function cssAnimationEnd() {
//looks for the ID box from the css and fires the event listen when the animation is complete.
box.addEventListener( 'webkitAnimationEnd', function( event ){
alert( "Finished animation!" );
}, false );
}

Working with event listers like this it is possible to chain CSS animations. This is a great method to use on IOS devices to improve animation frames compared to only working wth JavaScript.

View the example Here.

Here is the code used to create the animation:
#box {
width:500px;
height:500px;
background:#fff;
padding:0;
margin:0 auto;
/*begin animation properties*/
-webkit-animation-name: Navfade;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes Navfade {
from {
opacity: 0;
-webkit-transition: opacity;
}
to {
opacity: 1;
}
}

Here is a link to another CSS3 animation post I created using the rotate with mask.

Copying bundles from one machine to another is cumbersome and easily forgotten.

I always find myself adding one command to a custom bundle at the office and then forgetting to add it to one of my machines at the house.

Before we begin you will need a Dropbox account. If you don’t already have one you can get a free one here

Once you have Dropbox running you can run these 3 steps in Terminal.app

It is highly recommend to run a backup of your bundles before attempting the steps below.

Step 1. Move to your the folder where the Textmate bundles are located:

$ cd ~/Library/Application\ Support/TextMate/

Step 2. Move the Bundles folder to your Dropbox folder:

$ mv Bundles ~/Dropbox/Bundles

Step 3. Create a symlink in the DropBox folder to the “Application Support/TextMate/” directory:

$ ln -s ~/Dropbox/Bundles/ Bundles

Repeat steps 1,2,3 on any machines that you need to sync up.

View Example Page Here

Here is a demo I made with jQuery mirroring what they are doing.

Here is the jQuery for the search box
var inputWdith = '200px';
var inputWdithReturn = '140px';
$(document).ready(function() {
$('input').focus(function(){
//clear the text in the box.
$(this).val(function() {
$(this).val('');
});
//animate the box
$(this).animate({
width: inputWdith
}, 500 )
});
$('input').blur(function(){
$(this).val('Enter Search Value');
$(this).animate({
width: inputWdithReturn
}, 800 )
});
});