Thursday, August 21, 2014

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')

Thursday, July 24, 2014

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

Thursday, May 15, 2014

Tuesday, May 6, 2014

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

Tuesday, April 22, 2014

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>


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

Friday, March 14, 2014

Sprite Kit: Animation in English-Speak

Message sequence of actions to SKAction, then message that sequence of actions to repeatActionForever, then run that forever action to the player (SKSpriteNode)


Thursday, March 13, 2014

Sprite Kit: Up is down, down is up

There's no error on messaging the location.x to moveToX action of SKAction, think spaceship which just move left and right and remains stationary on its Y


-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* touched = [touches anyObject];
    

    CGPoint location = [touched locationInView:self.view];

    
    SKAction* moveAction = [SKAction moveToX: location.x duration:0.0];
    
    
    [player runAction: moveAction];
}


However, it's preferable to use locationInNode. If we want the spaceship to move in all direction yet we use locationInView, the app will exhibit this same error: http://stackoverflow.com/questions/21948027/skaction-moveto-goes-up-when-should-go-down

CGPoint location = [touched locationInView:self.view]
SKAction* moveAction = [SKAction moveTo: location duration:0.0];    


Though the spaceship's X will move accordingly to your touch, the spaceship's Y will not follow your finger movements.


To rectify that flaw, get the location from SKScene's view (self) instead of the UIView's view (self.view), then message that view to touched object's locationInNode instead of locationInView


CGPoint location = [touched locationInNode:self];
SKAction* moveAction = [SKAction moveTo: location duration:0.0];



Happy Coding! ツ