J.P. McGarrity.com Focusing on the Front End

• About
• About

1. Paul Irish on HTML5 Boilerplate Build Script

   April 30, 2011 by J.P.

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

   Category: html5Comments (0)

   ---

2. Check If HTML5 Local Storage Is Supported Using Modernizr

   March 15, 2011 by J.P.

   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!');
// 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.

   Category: html5Tags: localstorage | Comments (0)

   ---

3. HTML5 Local Storage Example

   March 14, 2011 by J.P.

   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 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.

   Category: html5Tags: localstorage | Comments (0)

   ---

4. JavaScript: The Good Parts

   by J.P.

   Required watching for all JS developers.

   Category: JavaScript, videoComments (0)

   ---

5. Create Links to Call and SMS From iPhone On the Web

   March 13, 2011 by J.P.

   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"

   Category: IOS, html5Comments (0)

   ---

6. JavaScript Event Listener with CSS3 Webkit Animations

   by J.P.

   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 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.

   Category: CSS 3, IOS, JavaScript, coding, css/htmlComments (0)

   ---

7. CSS3 Webkit Fade Effect With KeyFrame

   March 12, 2011 by J.P.

   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 {
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.

   Category: CSS 3, IOS, html5Tags: css3, fade, webkit animation | Comments (0)

   ---

8. Sync Textmate Bundles Across All your Macs With DropBox

   by J.P.

   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 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.

   Category: applications, coding tool, osxTags: bundles, dropbox, sync, textmate | Comments (0)

   ---

9. Basic Javascript Closure

   March 9, 2011 by J.P.

   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 the param you passed in
function myNameIs(){ // define the inner function so garbage collection won't remove it.
alert('hello: '+name);
}
return myNameIs; //return the function
}
$(document).ready(function() {
var nameToPass = 'Johnny Quest'; // create the name for the function
var myWhoAmI = whoAmI(nameToPass); //create var for the class and pass the name in.
myWhoAmI(); // run instance of the class. Note:Passing name here will be undifined based on scope.
});

   View Example Page Here

   Category: JavaScript, coding, jqueryComments (0)

   ---

10. Expanding a HTML5 search input like Apple.com

    March 6, 2011 by J.P.

    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 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 )
});
});

    Category: JavaScript, html5, jqueryComments (0)

    ---