http://jpmcgarrity.com/blog Focusing on the Front End Sat, 30 Apr 2011 16:40:56 +0000 http://backend.userland.com/rss092 en If you're familiar with html5 boilerplate check it out here. http://jpmcgarrity.com/blog/2011/04/paul-irish-on-html5-boilerplate-build-script/ Here is a simple check that can be run if Modernizr is being used to check and see browser supports HTML5 Local Storage. if (Modernizr.localstorage) { alert('localStorage is available!'); ... http://jpmcgarrity.com/blog/2011/03/check-if-html5-local-storage-is-supported-using-modernizr/ Creating a local storage example using a To Do list. 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 ... http://jpmcgarrity.com/blog/2011/03/html5-local-storage-example/ Required watching for all JS developers. http://jpmcgarrity.com/blog/2011/03/javascript-the-good-parts/ Here are two key code snippets to add to your mobile website so users can contact you directly with their iPhone. Format for a Phone Call. href="tel:+1-212-555-1212" Format for SMS Message. href="sms:+1-212-555-1212" http://jpmcgarrity.com/blog/2011/03/create-links-to-call-and-sms-from-iphone-on-the-web/ CSS3 has a property called "webkitAnimationEnd" which can be used as an event lister in JavaScript. 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 ... http://jpmcgarrity.com/blog/2011/03/javascript-event-listener-with-css3-webkit-animations/ Here is an example of a basic fade animation using a CSS3 fade using "-webkit-transition: opacity" property. Please note you need to use a webkit browser to view the animation working. 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 ... http://jpmcgarrity.com/blog/2011/03/css3-webkit-fade-with-keyframe/ If you're a heavy lifter with Textmate and create and customize bundles all the time this post is for you.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 ... http://jpmcgarrity.com/blog/2011/03/sync-textmate-bundles-across-all-your-macs-with-dropbox/ Here is an example of a basic use of Javascript closure. A benefit of using a closure is it will not get cleaned up by garbage collection and cab be reused. function whoAmI(param){ // create the outer function and pass in the name var name = param; // name is equal to ... http://jpmcgarrity.com/blog/2011/03/basic-javascript-closure/ Apple recently converted their site to html 5 and introduced a new navigation. The search which has always mirrored aspects of OSX and now acts like the IOS safari search. Once the input is focused the width is animated. Here is a demo I made with jQuery mirroring what they are ... http://jpmcgarrity.com/blog/2011/03/expanding-a-html5-search-input-like-apple-com/