My little pasture on the web.

The Moo-log (blog) of Mark

June 24, 2013
by mark
0 comments

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.

October 28, 2012
by mark
0 comments

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)

July 10, 2012
by mark
0 comments

List of all the HTML/Javascript/CSS online app

http://jsfiddle.net/

http://jsbin.com/

http://jsdo.it/

http://plunker.no.de/

http://dabblet.com/

https://thimble.webmaker.org

http://fiddlesalad.com/

http://www.webdevout.net/

http://codepen.io/

I think that is it.

June 6, 2012
by mark
2 Comments

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

May 28, 2012
by mark
0 comments

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

May 23, 2012
by mark
0 comments

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.

March 25, 2012
by mark
0 comments

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.

November 20, 2011
by mark
0 comments

Javascript: OOP in javascript using Objects and prototypes

HTML5 PoweredJavascript does not support real oop and classes but you can fake it and get the similar effects using Objects and prototypes.

First, to create a “Car” class with some properties, make a function Car and set internal properties using “this” reference:

function Car(s, w) {
  this.speed = s;
  this.weight = w;
}

To add methods to your Car class, use the prototype to that class and assign then anonymous functions:

Car.prototype.go() {
 console.log("car speed is : " + this.speed);
}

Car.prototype.stop() {
  console.log("car weight is : " + this.weight);
}

Here is an example of your Car class being used:

var car = new Car(65, 2000);
car.go();
car.stop();

If you are coming from actionscript or any other modern programming language, you are probably laughing, but this is how it goes and it is the future of the web.