1. JavaScript Event Listener with CSS3 Webkit Animations

    March 13, 2011 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)

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

  3. Enable GZip in an .htaccess file

    March 3, 2011 by J.P.

    Here is the code to enable gzip in an .htaccess file.
    # compress text, html, javascript, css, xml:
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    Here is a good read on why to use GZIP.

    Once enabled you can see the site load improvement here: http://www.whatsmyip.org/http_compression/

    View the compression results for this site here.

    Category: codingComments (0)

  4. Pseudo Elements :before and :after with CSS 2.1

    by J.P.

    Here is a quick example of how to use Pseudo elements “:before” and “:after” with css.
    li{
    display:block;
    }
    li:before{
    content:"This is red from :before";
    color:red;
    }
    li:after{
    content:"This is blue from after";
    color:blue;
    }

    Click here for the demo page

    Category: coding, css 2.1, css/html, css/xhtmlComments (0)

  5. JS Closure Video

    February 28, 2011 by J.P.

    Stuart Langridge: Secrets of JavaScript Closures, part 1 from Ilja van den Berg on Vimeo.

    Category: JavaScript, codingComments (0)

  6. jQuery SlideDown SlideUp

    May 10, 2010 by J.P.

    Here is an basic example on how to create a jQeury toggle using the slideDown and SlideUp functions.
    I prefer to use this instead of the toggle function for a smoother animation.

    View the example

    jQuery code used:
    $(document).ready(function() {
    $('#toggle_control').bind('click', function() {
    if ( $('#copy_toggle').is(':hidden') ) {
    $("#copy_toggle").slideDown('medium', function() {
    });
    }
    else{
    $("#copy_toggle").slideUp('medium', function() {
    // Animation complete.
    });
    }
    return false;
    });
    });

    Category: codingComments (0)

  7. Font CSS Substitution Methods

    September 2, 2009 by J.P.

    font-image

    Many new methods of font substitution are coming of the wood work and old methods are now getting a second look.

    @font-face method

    The @font-face method was added to the CSS2 spec but then not recommended in CSS2.1. However with CSS3 it’s back and supported by most popular modern browsers. Read about @font-face at W3.org.

    This method requires the font being loaded on the server and will cause a slight flickering of the font rendering while it is stored in the cache. The plus side of this method is it’s easy to implement and requires no JavaScript.

    Here is an example of @font-face being used. Click Here

    Sample CSS code used (Note: font is stored on the server)

    @font-face {
    font-family: 'BrushScript';
    src: url('BrushScript.ttf') format("truetypefont");
    }
    /* for IE */
    @font-face {
    font-family: 'BrushScript';
    src: url(BrushScript.ttf);
    }
    body {
    font-family: 'BrushScript', helvetica; /*degrades to a standard web font if unavailable */
    font-size:1em;
    }

    Cufon JavaScript Method

    This currently my personal favorite method. No font is stored on the server and there is no flicker of the font while loading. The wizard also provides many options and settings so you can customize the needs for your site.

    Easy to add

    Cufon provides a simple method for converting fonts on your local machine into a js file that you include in the header along with the Cufon script. A simple replace call is used to substitute the font. Read more about Cufon here

    Example of the Cufon Method »

    Example Header Code

    <script src="cufon-yui.js" type="text/javascript"></script> <script src="AGaramondPro_400-AGaramondPro_700-AGaramondPro_italic_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">Cufon.replace('h1');Cufon.replace('p');</script>

    Background Image method

    This method is good for replacing a few headers and best method to use with the logo of your site. Detailed px to px cross browser look with the design is needed while the code remains semantic. This method has been implemented in this version of my site since for major section H1 headers and the logo of the site.

    XHTML Example Code

    <h3 id="Portfolio">Portfolio</h3>

    CSS Example Code

    h3#Portfolio
    {
    background:url('/portfolio/2009/gfx/title_portfolio-trans.png') no-repeat;
    text-indent: -9999px;
    width:229px;
    height:61px;
    }

    This will work with all browsers. A list will be added shortly of the other methods and their support.

    Category: coding, css/xhtmlComments (0)

  8. Work with PHP5 locally on your Mac

    August 12, 2009 by J.P.

    phpimage

    Here are few quick steps to turn on PHP5 on your mac. This an easy modification allowing you to work with in your WebServer folder.

    Note: To use this method 10.5+ is required.

    • With your favorite text editor (I recommend Textmate) open Macintosh HD/private/etc/apache2/httpd.conf. You must allow hidden files to be seem to view and open.
    • Once the httpd.conf file has been opened go to line #114 and edit the following #LoadModule php5_module      libexec/apache2/libphp5.so remove the “#” sign and save the file. You will be prompted to enter root password.
    • With Terminal open, type the following series of commands, each followed by Return:
      cd /private/etc
      sudo cp php.ini.default php.ini
    • Now open the file with your text editor.
    • Go to line #305 and change “error_reporting = E_ALL & ~E_NOTICE” to error_reporting = “E_ALL” and save the file and enter your root password.
    • Open your System Preferences click on Sharing and then turn on Web sharing.

    After the above steps have been completed PHP5 will be working with in your WebServer folder located in “Macintosh HD/Library/WebServer/Documents”.

    To confirm everything has been configured correct create a php file with the following:

    • <?php phpinfo(); ?>
    • Save the file with the documents folder as info.php.
    • In a browser window go to: http://localhost/info.php and you will see your php settings.

    Category: codingTags: , | Comments (0)

  9. HTML 5 Wordpress Theme (Naked)

    July 17, 2009 by J.P.

    naked

    Here is an updated version of the Naked Wordpress theme to support HTML5.

    Wordpress Naked has been put together by us as a simple Wordpress theme to assist developers that need to quickly implement a blog using Wordpress but don’t really have the time to spend looking under the hood in any detail or reading documentation when it comes to applying a custom theme (e.g. their clients’ design).

    Find out more about the original theme.

    Download HTML5 Theme

    Category: coding, css/html, html5Tags: , | Comments (14)

  10. HTML 5 Bundle For Textmate

    July 16, 2009 by J.P.

    html5_bundle_icon1

    Here is a download to the HTML 5 Bundle I have started for Textmate. This is my first attempt at creating a bundle from scratch please provide feedback and requests and I will add them.

    Download Here

    Update 7/19/2009

    Updated 3/21/2010
    Added localStorage Snippets

    The bundle has also been uploaded to Github.

    View Repository

    Category: applications, coding, css/html, html5, osxTags: , | Comments (6)


Older Posts »