Intro and Getting Started

Some very interesting CSS3 animations can be created using the Sass preprocessor, as this short but fun tutorial explains. You can preview the final result on Plunker
In order to use Sass, you first need to install Ruby on Rails. Only Windows users need to bother about installing Ruby since MacOS comes with this already installed.
Getting started with Sass is quite easy, this simple tutorial will get you up and running quickly.
Once you have Sass installed, you will need a task runner like Grunt or Gulp to compile your Sass (.scss) files to CSS automatically. There are several online tutorials to help get you started. Fortunately, some IDEs like WebStorm have built-in support for Sass, making your web development experience much easier.

Getting Sassy

In this example there are four primary Mixins, listed below, which need to be defined first because they are required in subsequent Mixins. It may seem confusing at first, but Mixins can be re-used, just like variables, in other Mixins .

1. prefixer – adds the browser specific CSS prefixes
2. rotate – takes the degree amount variable as argument and applies the CSS rotate transformation
3. translate – takes the x and y coordinate variables as arguments and applies the CSS translate transformation
4. transform – takes the type of transformation as argument and creates the browser specific CSS transformations

@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

@mixin scale ($x,$y) {
  @include transform(scale(#{$x,$y}));
}

@mixin translate ($x,$y) {
  @include transform(translate(#{$x,$y}));
}

Getting even Sassier

The primary Mixins can then be used to create CSS3 animation delay rules, using variables, logical operations and conditional loops. Sass can be used to produce repetitive CSS3 code that would be tedious to write manually. By using the $times variable in a @for loop the animation delay timing can be manipulated to great effect. The @mixin(s) take in the $times argument which represents time delay in seconds. And then call the @for loop to to loop each HTML child element in sequence while applying an increasing or decreasing value to the variable.

@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

@mixin animation-delay ($times...) {
  @include prefixer(animation-delay, $times, webkit moz spec);
}

@mixin reverse-delay($start, $end, $divisor) {
  @for $i from $start through $end {
    &:nth-child(#{$end - $i}) { @include transition-delay(#{$i/$divisor}s); }
  }
}

@mixin staging-delay($start, $end, $divisor) {
  @for $i from $start through $end {
    &:nth-child(#{$end - $i}) { @include animation-delay(#{$i/$divisor}s); }
  }
}

@mixin scale-delay($from, $to, $divisor) {
  @for $i from $from through $to {
    &:nth-child(#{$to - $i}) { @include animation-delay(#{$i/$divisor}s); }
  }
}

Sassy Keyframes

Finally, you get to apply the Mixins to CSS3 animation Keyframes which control how and when the HTML elements are animated across the page. Keyframes are usually defined from start: 0% to end: 100% with “tween” values in between, over the animation-duration length of time.

@mixin animate-sprite($animation-name) {

  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}
@include animate-sprite(turn-around){
  from{@include rotate(0);@include scale(0,0);}
  to{@include rotate(360);@include scale (1.0,1.0);}
}
@include animate-sprite(turn-around2){
  from{@include rotate(0); }
  to{@include rotate(60); }
}

@include animate-sprite(upscale){
  from{@include scale(0,0);}
  to{@include scale (1.0,1.0);}
}

@include animate-sprite(downscale){
  from{@include scale(1.0,1.0);}
  to{@include scale (0,0);}
}
@include animate-sprite(move-around){
  from{ @include translate(2px, 4px);}
  to{ @include translate(100px, 140px);}
}

When you need to exchange data between two custom directives without using a service, the ngModel directive can be used create a communication channel. Using this built in Directive you can pass data between custom directives as this example illustrates. For this technique to work certain conditions must be met:
1/ The directives must be enclosed within the same parent controller
2/ The custom directive attributes must be assigned to the same variable name

In the code sample on Plunker, we have two Phone Networks, Verizon and Sprint, representing the two custom directives. The phone type represents the data to be passed between the directives. The directives are named sprint-network and verizon-network and the parent controller is netController. The two directives are defined in the sprintModule.js file and they have separate template files: templatesprint.html and templateverizon.html.

netController is the parent controller which wraps the two directives within a common parent scope. And the samsung attribute in sprintNetwork directive is assigned to the phone scope variable. In the verizonNetwork directive, the iphone attribute gets assigned to the similar phone scope variable. These two scope variables belong to separate isolated scopes and would normally have different values. However using the ngModel directive through the require method in the verizonNetwork directive, the two variables are data bound. Placing the ^ character before ngModel makes the ngModel a required attribute in the verizonNetwork directive when it’s implemented in the index.html file. Using ? makes the attribute optional. Note that the link method in verizonNetwork directive takes ngModel as the fourth argument. To illustrate this technique, change the phone brand from the drop down in verizonNetwork (and click the “get phone” button) to update the phone scope variable in both directives.

var networkTwoApp = angular.module("networkApp", []);
networkTwoApp.controller("netController", function ($scope){
  $scope.phone = "Apple iPhone 5";
});

networkTwoApp.directive("sprintNetwork", function() {
  console.log("networkTwo");
  return {
    restrict: 'AE',
    scope:{
      samsung: "=",
     },

    templateUrl: "templatesprint.html",

    link: function(scope, element, attrs, ngModel) {

      ngModel.$setViewValue(scope.phone);

     ngModel.$viewChangeListeners.push(function(){
       console.log("sprint view change");
     });
    }

  };

});

networkTwoApp.directive("verizonNetwork", function () {

    return{
        restrict: 'AE',
        scope:{
          iphone: "=", 

        },

        templateUrl: "templateverizon.html",
        require: '^ngModel',
        link: function (scope, element, attrs, ngModel) {
          scope.phone = "my phone";
          ngModel.$setViewValue(scope.phone);
          scope.showPhone = function(){
            ngModel.$setViewValue("setviewvalue");

            ngModel.$setViewValue(scope.phone);
            console.log("clicked");
          };
          scope.phonedata = "my phone is cool";

        }
    }

});

What is AngularJS?

Google’s JavaScript MVC (Model-View-Controller) framework is a powerful tool in any web developer’s toolkit. Once you get over the steep learning curve and start thinking “the Angular way” you will appreciate its power to do so much with so little code.

Several new concepts like data binding, directives and dependency injection might seem esoteric at first (at least to non-Java developers), however after careful study, the “method to the madness” becomes clearer. Even though there will be quite a few frustrating – hair pulling moments, several subsequent aha moments make the pain of learning worthwhile.

Directives

AngularJS Directives help to abstract repetitive pieces of functionality such as form validation, data binding or even Google Maps API

Anatomy of a Directive

The directive typically has several important characteristics, such as the module which wraps it, the dependency injection, which imports other services that it requires, and also the controller and template.
The main directive function, which is similar to a Class constructor in OOP, has some important options, also known as the Directive Definition Object:

1. link: this function is normally used to manipulate the DOM
2. restrict: A – directive matches the attribute name; E – matches the element name; C – matches the class name
3. scope: isolate scope exists inside the directive only
4. templateUrl: the path to HTML template file or the hard coded HTML string
5. replace: replace the HTML element with directives content
6. transclude: process directive content in parent scope and insert the result in a designated part of the directive

Directive using HTML tag element:

<bare-bones attr1='number' attr2='string'>
</bare-bones>

Directive using tag attribute:

<div bare-bones="exp" attr1='number' attr2='string'>
</div>

Directive using CSS class:

<div class="bare-bones" attr1='number' attr2='string'>
</div>

A sample basic directive showing the most important methods and properties

// create a basic simple "barebones" directive
angular
.module("master")
.directive('bareBones', function () {
    'use strict';
     //declare directive variables here

        restrict: 'EAC', // directive can be initialized through Element, Attribute or CSS Class
        scope: { // creates an isolated scope for the directive
            attr1: '@', // destination attribute in directive tag is assigned to scope variable of same name
            attr2: '@',
            attr3: '=', // one way data binding from parent $scope in directive's controller to local scope variable zoom
        replace: true,
        templateUrl: '[Path to folder]/map-template.html',// relative path to the template HTML file
        compile: function (elem, attrs){
        // the compile function is executed before the directive is injected into the page. It does not have access to the directive scope

                 },
        link: function (scope, element, attrs) {
              scope.init = function () {
              //scope is the directives isolated scope
              //element is the HTML element created by the directive
              // attrs is the list of attributes (attr1, attr2, attr3) defined in the directive tag
            };  // close scope.init
            scope.init();

        } // close link function
    };
       return;
  });

The next part of this post will cover AngularJS Controllers.

CSS3 has been around for a few years now and what an impact it has made on web design. In the first tutorial we will be animating a Grandfather clock.

Basic HTML Page

First you need to create the basic HTML page with just a few lines of code. There are five parts of the clock included here:

1. Clock body
2. Clock dial
3. Hour hand
4. Minute hand
5. Pendulum

<div id="clockBody">
    <div id="clockDial">
        <div id="hourHand"></div>
        <div id="minuteHand"></div>
    </div>
    <div id="pendulum"></div>
</div>

Add CSS to style the clock

Next you add the CSS code to create the basic shapes for the clock. Using the CSS3 border-radius to create circles from the default square div tags. See the working example here

#clockBody{
    width: 200px;
    height: 700px;
    border: 2px solid darkred;
    background-color: saddlebrown;
    padding-top: 50px;
}

#clockDial{
    width: 120px;
    height: 120px;
    border-radius: 90px;
    background-color: ivory;
    border: 1px solid orange;
    margin: 0 auto;
}

#hourHand{
    width: 8px;
    height: 40px;
    background-color: #222;
    position: absolute;
    left: 105px;
    top: 120px;
}

#minuteHand{
    width: 15px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 105px;
    top: 120px;
}

#pendulum{
    width: 9px;
    height: 220px;
    background-color: darkorange;
    position: absolute;
    left: 110px;
}

Animate the clock hands

Now we make the clock hands rotate using keyframes. As a test we don’t use real time, so the hands will move faster than a real clock. Edit the animation-duration property to change the rotation speed.

@-moz-keyframes hourTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}

@-webkit-keyframes swingTick{
    0% {-webkit-transform:rotate(15deg) }

    50% { -webkit-transform:rotate(-15deg) }
    100% { -webkit-transform:rotate(15deg)}
}

@-moz-keyframes swingTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}
#hourHand{
    width: 8px;
    height: 40px;
    background-color: #222;
    position: absolute;
    left: 105px;
    top: 120px;

/*CSS3 animation code*/
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: hourTick;
    -moz-animation-name: hourTick;
    -webkit-animation-duration: 600s;
    -moz-animation-duration: 600s;
}

#minuteHand{
    width: 15px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 105px;
    top: 120px;

/*CSS3 animation code*/
    -webkit-transform-origin: 2px 0px;
    -moz-transform-origin: 2px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: minuteTick;
    -moz-animation-name: minuteTick;
    -webkit-animation-duration: 60s;
    -moz-animation-duration: 60s;
}

Make the pendulum swing

Next we animate the pendulum using the animation-timing-function’s ease-in-out property. This adds realistic movement with acceleration effects of gravity

#pendulum{
    width: 9px;
    height: 220px;
    background-color: darkorange;
    position: absolute;
    left: 110px;

/*CSS3 animation code*/
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 0px 0px;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: swingTick;
    -moz-animation-name: swingTick;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;

}

Add the images

Finally we add the graphic elements that make the clock more realistic. The images are vector based and create a simple, 2D animation. The clock body and dial use CSS background images while the pendulum and clock hands are images inserted into the HTML code.

   #clockBody{
    width: 200px;
    height: 500px;
    border: 2px solid saddlebrown;
    background-color: sandybrown;
    padding-top: 50px;
    background-image: url("http://www.portfour.com/homepage/wp-content/uploads/2014/07/clock_body.png");
    background-size: 200px;
    background-repeat: no-repeat;
}

#clockDial{
    width: 120px;
    height: 120px;
    border-radius: 90px;
    background-color: ivory;
    border: 1px solid orange;
    margin: 0 auto;
    background-image: url("http://www.portfour.com/homepage/wp-content/uploads/2014/07/dial.png");
    background-size: 120px;
}

#hourHand{
    width: 8px;
    height: 40px;
    background-color: transparent;
    position: absolute;
    left: 108px;
    top: 120px;
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: hourTick;
    -moz-animation-name: hourTick;
    -webkit-animation-duration: 600s;
    -moz-animation-duration: 600s;
}
#hourHand img{
    position: relative;
    top: -8px;
    left: 0px;
}
#minuteHand{
    width: 6px;
    height: 60px;
    background-color: transparent;
    position: absolute;
    left: 110px;
    top: 120px;
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: minuteTick;
    -moz-animation-name: minuteTick;
    -webkit-animation-duration: 60s;
    -moz-animation-duration: 60s;
}
#minuteHand img{
    position: relative;
    top: -10px;
    left: 0px;
}
#pendulum{
    width: 9px;
    height: 220px;
    background-color: transparent;
    position: absolute;
    left: 110px;
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: swingTick;
    -moz-animation-name: swingTick;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;

}
#pendulum img{
    position: relative;
    left: -24px;
}

Immediate functions

These are self-invoking functions, i.e functions that initialize themselves.
The general syntax looks like this:

(function() {
// do stuff here
})();

In the above code, the function operator (), in line 3, applies to the whole anonymous function, which is also enclosed in a set of parenthesis (...). So the anonymous function is being used like an expression just like common mathematical expressions: (6 + 2)*5 and 6 + (2*5). The parenthesis contain an expression that must be resolved first before applying the * or + operators respectively.

This technique is extremely useful in advanced JavaScript and is employed in most JavaScript libraries ranging from jQuery to Prototype. A single expression performs three main tasks:

1. It creates an instance of the anonymous function
2. It invokes the anonymous function
3. It removes all references to the anonymous function at the end of the statement

It’s important to note that the anonymous function creates a closure or self-contained scope.

Simulated access control

Immediate functions can be used to create OOP-like features in JavaScript. Self-contained scopes help to make modular constructs as well as private variables, possible. The snippet below illustrates an example.

(function() {
   var clickCount = 0;
   document.addEventListener("click", function(){
      alert(++clickCount);
   ), false);
})();

Since the anonymous or immediate function is invoked as soon as the script is launched, the click event handler is bound at the same time. This handler is within the same closure as the clickCount variable. As a result, clickCount acts like a private variable for the event handler. It can only be referenced within the self-contained scope of the anonymous function.

In the example above, the immediate function had no arguments or parameters. There are several very important practical applications for this technique. The most common is perhaps with the jQuery $ alias, which is also used by other libraries such as Prototype. When using two libraries that have the same alias, you can avoid name space conflicts by adding a parameter to the immediate function.

<body>
<input type="button" value="click" />
<script type="text/javascript">
  $ = function(){ alert ('$ is not jQuery!'); };
  (function($){
     $('input').on('click', function(e){
        $(e.target).addClass('btnclick');
      })

  })(jQuery);
</script>
</body>

run the code

Looping with immediate functions

Closures and loops require special attention in order to avoid common pitfalls. For example in the code below, the result is not what you might expect.

<body>
    <ul>
       <li>first item</li>
       <li>second item</li>
       <li>third item</li>
   </ul>
<script type="text/javascript">
    var items = document.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) {
      items[i].addEventListener("click", function() {
      alert("item # " + i + " was clicked");
      }, false);
    }
</script>
</body>

run the code
As you can see in the above code, the alert always points to the last item in the list. This happens because the closure references the enclosed variables and the last value over rides all previous values. There’s a simple solution to this problem using another immediate function but passing a parameter as the function’s argument as shown below:

<body>
    <ul>
       <li>first item</li>
       <li>second item</li>
       <li>third item</li>
   </ul>
<script type="text/javascript">
    var items = document.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) (function(count){
      items[i].addEventListener("click", function() {
      alert("item #" + count + " was clicked");
      }, false);
    })(count);
</script>
</body>

run the code

The body of the previous for loop has been replaced by the immediate function. Each time the loop runs the value of the counter is passed as the argument of the new immediate function, as result each loop has a different value. This value is then passed onto the alert, which is within the scope of the new immediate function.

Currying

Currying sounds like some secret sauce, however the name is derived from Haskell Brooks Curry, the American Mathematician (1900 – 1982).
This technique involves predefining a function, with a partial list of arguments using a sort of “proxy function”. Whenever you have to call the same function several times, using some of the arguments repeatedly, then Currying can be used to avoid repeated calls to the same function. The following snippet shows a general purpose Currying function.

Function.prototype.partial = function(){
    var fn = this, args = Array.prototype.slice.call(arguments);
    return function() {
     var arg = 0;
        for (var i = 0; i < args.length && arg < arguments.length; i++) {
            if (args[i] === undefined) {
             args[i] = arguments[arg++];
            }
        }
        return fn.apply(this, args);
    };
};

String.prototype.csv = String.prototype.split.partial(/,\s*/);
var results = ("Dock, Cruise, Pier").csv();
if(results[0] == "Dock" && results[1] == "Cruise" && results[2] == "Pier"){
   alert("The string was split as expected");
}

run the code

Memoization

Memoization is a technique that is often used to improve the performance of JavaScript functions, by storing precomputed values in a function’s property or cache. In this example, isPrime() is an immediate function that gets memoize() method applied to it. This method wraps the memoized() method around the original isPrime() function through a closure. So we end up with a chain of functions: isPrime() => memoize() => memoized().

Function.prototype.memoized = function(key){
    this._values = this._values || {};
    return this._values[key] !== undefined ?
        this._values[key] :
    this._values[key] = this.apply(this, arguments);

};

Function.prototype.memoize = function(){
  var fn = this;
    return function(){
      return fn.memoized.apply( fn, arguments );
    };
};

var isPrime = (function(num){
 var prime = num != 1;
    for (var i = 2; i < num; i++){
        if (num % i == 0){
            prime = false;
            break;
        }
    }
    return prime;
}).memoize();

if (isPrime(23)){
 alert ("23 is a prime number");
}

run the code

Function wrapping

The example below shows how the Prototype JavaScript library uses function wrapping to resolve a cross-browser issue with Opera’s implementation of accessing HTML title attributes. At first the code looks like a riddle wrapped in mystery, inside an enigma. Several things are happening in just a few lines of code. The wrap() function takes three arguments:

1. the object whose method is being wrapped,
2. then the method to be wrapped,
3. and finally the wrapping function.

Next we use the same technique used for memoization in the previous example to wrap the wrapper function around object[method] lines 2 – 6. In this case using apply() with object[] as context, and creating an arguments list by concatinating the original arguments with the method being wrapped. Effectively, object[method] now executes the wrapper function (via apply()). Note that the wrapper function has not being explicitly defined yet, it’s created when you use the wrap function in line 19. The apply() method is used to give the wrapper function its context and arguments list using the bind() method created in line 10. If you find this technique hard to digest, you are not alone. It may take a while to wrap your head around it (pun intended).

function wrap(object, method, wrapper) {
 var fn = object[method];
    return object[method] = funtion(){
                   return wrapper.apply(this, [fn.bind(this)].concat(
                       Arry.prototype.slice.call(arguments)));
                   };

}

Function.prototype.bind = function(){
 var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
    return function(){
     return fn.apply(object, args.concat(Array.prototype.slice.call(arguments)));
    }
}

if (Prototype.Browser.Opera) {
 wrap(Element.Methods, "readAttribute",
      function(original, elem, attr){
      return attr == "title" ?
          elem.title :
      original(elem, attr);
      });
}

run the code