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

• About
• About

1. Basic Webkit Animation

   March 6, 2011 by J.P.

   This is the first part of a series of CSS webkit animations.
   #spinner {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -256px;
height: 256px;
width: 256px;
text-indent: -999em;
white-space: nowrap;
overflow: hidden;
-webkit-mask-image: url('../images/spinner.png');
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background:#ccc;
}
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}

   View the animation here.

   This original code was take from 24ways.org and modified.

   Category: CSS 3, motionComments (1)

   ---

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

   ---

3. CSS Transform Tool

   by J.P.

   
   Here is a rough proof of concept demo I created to show the CSS3 transform property.

   Click here to see demo

   Category: CSS 3, css/html, css/xhtml, jqueryComments (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. Difference between == and === Comparison Operators

   February 2, 2011 by J.P.

   Recently I was asked the difference between the “==” and “===” comparison operators so I thought I do a quick post since I few of my coworkers wanted to see a demo of the differences.

   == is equal to.

   === is exactly equal to (value and type).

   For example:

   var test1 = 1;

   var test2 = “1″;

   var test1 is equal to 1 and ‘1′ both number and string value.

   var test2 is also equal to 1 and ‘1′ both number and string value.

   var test1 is exactly equal to 1 since its a number but isn’t exactly equal to ‘1′ since its a string.

   The opposite can be said for var test2 since it’s a string and exactly equal to that string and is NaN.

   Here is sample code running through a series of alerts display what is equal to and exactly equal to.

   == is equal to.

   === is exactly equal to (value and type).

   Example:

   var test1 = 1;

   var test2 = “1″;

   var test1 is equal to 1 and ‘1′ both number and string value.

   var test2 is also equal to 1 and ‘1′ both number and string value.

   var test1 is exactly equal to 1 since its a number but isn’t exactly equal to ‘1′ since its a string.

   The opposite can be said for var test2 since it’s a string and exactly equal to that string and is NaN.

   Here is sample code running through a series of alerts display what is equal to and exactly equal to.

   Category: JavaScriptComments (0)

   ---

7. Auto Start a Video Element in IOS 4

   November 1, 2010 by J.P.

   This is example was to test if it was possible to create a video play list for IOS4 using MP4 video files. The below code will load a video in IOS 4 and/or IOS 3.2. Once the video has ended it will automatically play another video file. Please remember to test on a device that supports html5 with MP4 video support.
   window.onload = function()
{
var videoPlayer = document.getElementById("video");
videoPlayer.load();
videoPlayer.play();
document.getElementById("video").addEventListener('ended',myEventHandler,false);
function myEventHandler(e) {
alert('ended');
if(!e) { e = window.event; }
var moduleVideo = './video/sintel-trailer.mp4';
videoPlayer.src = moduleVideo;
videoPlayer.load()
videoPlayer.play();
}
}

   Here is a working example

   Category: html5Tags: html5, ios4, Mobile Safari, video tag | Comments (0)

   ---

8. Adobe Creates HTML5 Editing Tool

   October 26, 2010 by J.P.

   Category: html5Comments (0)

   ---

9. CSS3 :Target

   September 27, 2010 by J.P.

   
   “:traget” One of the new pseudo classes implemented in CSSS 3. Combined with CSS animation. It is very cool and easy to feature to implement.

   First lets define a css keyframe that will work with “target” (Not this will only work on webkit browsers. It is possible to run on FF maybe IE9? although I haven’t gone this deep with this POC.
   @-webkit-keyframes target {
from { background:#fff;}
50% { background:#ccc;}
to { background:#fff;}
}

   The next step is to apply the “animation” to the class with pseudo “:target”
   article{
padding:4px;
border:3px solid #e1d8c4;
margin:4px;
}
article:target{
border:10px solid #9f8b5e;
-webkit-animation:target 4.0s linear;
}

   Here is a full working example. With just a few lines of code you can see how easy

   Category: CSS 3Comments (0)

   ---

10. HTML5 Video Event List

    September 26, 2010 by J.P.

    The more I play with the html5 video element the more amazing things I discover. While working on a player I have compiled a list of events supported.

    Video Event List

    • loadstart
    • progress
    • suspend
    • abort
    • error
    • emptied
    • stalled
    • play
    • pause
    • loadedmetadata
    • loadeddata
    • waiting
    • playing
    • canplay
    • canplaythrough
    • seeking
    • seeked
    • timeupdate
    • ended
    • ratechange
    • durationchange
    • volumechange

    Category: html5Comments (1)

    ---