AngularJS 1.5: component router with NPM

The new angular component router is changing quickly.

The current docs on angular which can be found here seems to be outdated
https://docs.angularjs.org/guide/component-router

The documentation ask for the following
npm install @angular/router –save

As of April 2016, the way to install the new angular component router using NPM is
npm install @angular/router@0.2.0 --save

angular_router_installation_banner

Once installed, include it in your script
<script src="/node_modules/@angular/router/angular1/angular_1_router.js">

AngularJS: DOM manipulation the angular way.

At first, when trying to manipulate a DOM with jQuery, you are tempted to do it in the controller. That is highly discouraged to enforce the concept of declarative approach.

Here is a very simple concept of DOM manipulation in AngularJS.
For example, say we have a box, and on click we want to fade it out.
The html would look like this (including 3 ways to pass in value):

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
     <div 
       class="box" 
       data-ng-click="boxClick(100)" 
       data-mm-box="200"
       data-fade-duration="300">
     </div>
  </div>
</div>

simple css:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

And the javascript:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.boxClick = function(value) {
      this.doBoxClick(value);
  };
}

myApp.directive("mmBox", function() {
  return {
    link: function(scope, elem, attrs) {
      var duration = parseInt(attrs.mmBox);
       scope.doBoxClick = function(value) {
         console.log("1. " + value);
         console.log("2. " + attrs.mmBox);
         console.log("3. " + attrs.fadeDuration); 
         elem.fadeOut(duration);
      }
    } 
  }
});

Notice I put in two other ways to pass in values so the directive is not hard coded to any value and can be reused.

Upgraded to windows 8?

if you did, you need to learn this basic shortcuts to make the transition easier:

Winkey: toggles between Start Menu and last app
Winkey + D: opens Desktop
Winkey + C: opens “Charms” bar
Winkey + E: opens file explorer
Winkey + F: searches for files
Winkey + I: opens the Settings charm (to shut down your computer, for example)
Winkey + Z: opens “app bar” (the menu user interface that is normally hidden when interacting with a Windows 8 app)
Winkey + X: opens the “power user” menu (which includes programs and features, power options, event viewer, system, device manager, disk management, computer management, command prompt, task manager, control panel, file explorer, search, run)

Javascript: A better alternative to setInterval

setInterval can be bad js because of its nature to continuously get called rather the methods inside is lagging or not.

setInterval(function() {
	doStuff..
}, 100)

A better approach is to use a self executing anonymous function.

(function() {
	
	doStuff..

	setTimeout(arguments.callee, 100)
})();

The only problem is that arguments.callee is deprecated so a work around is to name the anonymous function.

(function blah() {
	
	doStuff..

	setTimeout(blah, 100)
})();

GIT learning resources

Still using SVN? It’s time to switch to GIT. Here is a round up of resources:

Roundups
– Git Roundup by @kevinSuttle http://answers.oreilly.com/topic/801-how-to-learn-git-a-link-roundup/

Walkthroughs
– Git, the Simple Guide http://rogerdudler.github.com/git-guide/
– Gitimmersion http://gitimmersion.com/
– Github’s help documents http://help.github.com/
– Let’s suck at Github together by +Chris Coyier http://css-tricks.com/video-screencasts/101-lets-suck-at-github-together/
– Git for Designers http://hoth.entp.com/output/git_for_designers.html
– Think Like a Git http://think-like-a-git.net/ via +Ryan Anklam

eBooks
– Pro Git http://progit.org/book/
– Git from the Ground Up http://ftp.newartisans.com/pub/git.from.bottom.up.pdf
– Getting Good with Git http://rockablepress.com/books/getting-good-with-git via +Paul de Wouters

References
– Gitref http://gitref.org/
– Github’s help documents http://help.github.com/

Articles
– A Successful Git Branching Model http://nvie.com/posts/a-successful-git-branching-model/

Clients
– Git Tower http://www.git-tower.com/
– Git Box http://www.gitboxapp.com/

Training
– Online Github Training https://github.com/training/free

Originally posted here: https://plus.google.com/103751101313992876152/posts/XRT3CsuwBTo

Auto refresh browser during web development

The more I am doing web development, one thing I do more then anything else is to update my html/css/javascript code, save, switch to a browser and refresh.

This become tiring so I started looking for the best app that watches a folder for changes and updates the browser automatically.

The Best solution out there currently is CodeKit, which not only solves my basic issue but also does a lot more. It’s main purpose is to support preprocessing. Very handy when you start using more advanced features like sass, less or jade.

The only draw back to code kit is that it requires Mac Lion OS. This is a problem since my work computer has snow leopard. If you are in this situation then there is a second recommendation

Live reload does pretty much everything Code Kit does but runs on snow leopard. From reading both features, CodeKit has better performance since it utilizes the new features only found in Lion.

CodeKit will run you $20 while Live reload cost $10.

Cowcrossing.com version 2 launched!!

Just launched version 2 of my site for cowcrossing.com.

6 months in development from concept to design to production. It boasts HTML5, css3 and Javascript.  The site is built on ModX CMS backend for easy updating.

The decision was made to go with ModX over drupal for its flexibility. With ModX, you are not limited on what you can do creatively as you are with drupal, joomla or even wordpress.

You might wonder why it took so long, but consider having no experience in front end development. The first month was spent designing the site. One month spent learning HTML5, another month learning CSS3, another month learning JavaScript, and 2 months learning the ModX system and PHP 5.0.

Let me know if you have any constructive feedback.