AngularJS bind once musing

After reading this: http://angular-tips.com/blog/2013/08/removing-the-unneeded-watches/


I'm somehow convinced it's better to do the localization during logon only. So bindings on localizations on labels, titles, etc could be done once only


Other good sources on keeping the quantity of $watches low:
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
http://www.benlesh.com/2013/10/title.html

Thoughts On Best Practices

OH: “Do programmers have any specific superstitions?”

“Yeah, but we call them best practices.”

-- David Grandinetti

Good read on best practices:

"It has a chilling effect on our progress as an intellectual craft when people pretend that a best practice exists" -- James Bach

"Rather than simply stating what we've done and how we did it, we feel compelled to puff it up into a spiny, intimidating best practice. We attach our egos to our code frameworks. If someone doesn't agree with our approach, they're attacking us personally. If someone has a different best practice, they're amateurs who don't understand the problem domain" -- Jeff Atwood

My aversion on best practices, everyone has their own beliefs, it follows that everyone has their own notion of best practice


There's really no one best practice, everyone has one; or should we just take it the easy way and just find like-minded folks who share our notion of best practice? It's not good to find folks who'll just reinforce same beliefs, things are a lot better and interesting when we find others who can find loopholes or provide constructive criticism on things we believe are right



Lastly, most of the time, I find that people who tend to ask a best practice question can be classified in two types, either they are lazy and wanted to be spoonfed or an askhole



Believing our practice is the best practice, tends to make us crap on other people's choice and enthusiasm, and it's not good



Better not to believe there's a best practice at all especially if we will just use it on intimidating other people



Happy Coding!

When using jQuery, let its API do the heavy lifting

Instead of this:

var particles = $('.particle');
$('li').each(function() {
    if (!$(this).is(particles))
        $(this).css('color','red');
});    

Do this:

var particles = $('.particle');
$('li').not(particles).css('color','red')

On TypeScript, the this keyword doesn't always reference the instance of a class

///<reference path='jquery.d.ts' />

class Mate {
    public n : number;

    public name : string = "Freddie";

    public nick : string = "Fred";



    public message() : void {

        var people = new Array<Person>();



        {
            var p = new Person();
            p.name = "Ely";
            people.push(p);
        }

        {
            var p = new Person();
            p.name = "Raymund";
            people.push(p);
        }




        $.each(people, function() {
            alert('inline: ' + this.name + ' -- ' + this.nick);
        });
        /*
        Outputs:
        inline: Ely -- undefined
        inline: Raymund -- undefined
        */


        $.each(people, this.alerter);
        /*
        Coming from traditional OOP, I expected:
        Freddie -- Fred
        Freddie -- Fred

        What happens:
        Ely -- undefined
        Raymund -- undefined
        */



        $.each(people, () => alert('inline: ' + this.name + ' -- ' + this.nick) );
        /*
        Outputs:
        inline: Freddie -- Fred
        inline: Freddie -- Fred
        */


        $.each(people, () => this.alerter());
        /*
        Outputs:
        Freddie -- Fred
        Freddie -- Fred
        */


    }

    public alerter() : void {
        alert(this.name + ' -- ' + this.nick);

    }

}

class Person {
    public name : string;
}


$(function() {
    var m = new Mate();
    m.message();
});

JavaScript Technologies

Technologies don't know how to fight, and what's more, some of them even complement each other

PostgreSQL (mis)feature

Martin Smith pointed out a gotcha on Postgres feature I recommended


GROUP BY on alias doesn't work properly when the alias has a same name from the table's columns

select 'foo' as Table_name
from information_schema.tables 
group by Table_name

Live code: http://sqlfiddle.com/#!15/d41d8/1920

Dropdown in ng-grid

The controller:

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

app.controller('bodyController', function($scope, LanguageList) {
  $scope.myData = [{name: "Moroni", language: 'fr'},
                     {name: "Tiancum", language: 'en'},
                     {name: "Enos", language: 'nl'}];
    $scope.gridOptions = {
            data: 'myData',
                enableCellSelection: true,
                enableRowSelection: false,
                enableCellEditOnFocus: true,
            columnDefs: [
                {
                    field: 'language', enableFocusedCellEdit: true,
                    editableCellTemplate: 'language_edit.html',
                    cellFilter : 'LanguageMap'
                },
                {field: 'name', enableFocusedCellEdit: true }

            ],
            canSelectRows: false
        };
        
    $scope.languages = LanguageList;
    
})
.factory('LanguageList', function() {
  return [
      { language_code : 'en', language_title: 'English' },
      { language_code : 'fr', language_title: 'French' },
      { language_code : 'nl', language_title: 'Netherlands' }
      ];
})
.filter('LanguageMap', function(LanguageList) {
  
  return function(input) {
    
    var languagesMatched = LanguageList.filter(function(lang) {
      return lang.language_code == input;
    });
    
    if (languagesMatched.length == 1)
        return languagesMatched[0].language_title;
    else
        return '*unknown language*'
    
    
    return text;
  }
});

Main page

<!DOCTYPE html>
<html ng-app="app">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    
    <script type="text/javascript" src="ng-grid.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="ng-grid.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
<body ng-controller="bodyController">
    <div ng-grid="gridOptions" style="height: 400px">
    </div>
    
    
    {{myData}}
</body>

</html>

language_edit.html, dropdown template:

<select 
ng-cell-input 

ng-options='l.language_code as l.language_title for l in languages'

ng-class="'colt' + $index" ng-model="COL_FIELD" ng-input="COL_FIELD" data-placeholder="-- Select One --" 
>


</select>

Live code: http://plnkr.co/edit/IOBXNy2hcJWbtMXZS3SO?p=preview