Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story). But every time when you commit copy and paste that of ticket number is annoy…

So I created a script using git hook to add ticket number to your commit automatically.

Script

$ mkdir -p ~/.git-templates/hooks
$ touch ~/.git-templates/hooks/prepare-commit-msg
$ chmod u+x ~/.git-templates/hooks/prepare-commit-msg

Then you can copy & paste this script to prepare-commit-msg

#!/bin/sh

LF=$'\\\x0A'
BRANCH_NAME=$(git symbolic-ref --short HEAD)

if [[ $BRANCH_NAME =~ .*\/[0-9]* ]]; then
  PREFIX=$(echo $BRANCH_NAME | sed -e 's/\(.*\)\/\([0-9]*\)/\1/')
  NUMBER=$(echo $BRANCH_NAME | sed -e 's/\(.*\)\/\([0-9]*\)/\2/')
  if [ $PREFIX = 'story' ]; then
      MESSAGE="[#$NUMBER]"
  else
      MESSAGE="GH-$NUMBER"
  fi
  if [ $NUMBER ]; then
    sed -i.back "1s/^/$LF$LF$MESSAGE$LF/" "$1"
  fi
fi

Configuration

To enable this script run this command.

$ git config core.hooksPath ~/.git-templates/hooks/

Usage

This script expects that your branch is named using this format

Pivotal Tracker

story/1111

Github

issue/1111
fix/1111
feature/1111

When every time you commit script add that number using this format to you commit !!

Pivotal Tracker

[#1111]

Github

GH-1111

TL;DL

I think that it is better or easy to build front-end source code like javascript, css and also image outside back-end development emvironment. Because If we build them together we will be tired to debug, to maintain and to update kind of back-end module which wrap front-end build module which is mainly written by node like javascript, css transpiler and image compressor.

I created sample Django app which has front-end code and back-end code and build them separately.

https://github.com/tomoyukikashiro/django_frontend_integration

Thought

I am tired to build front-end source code in back-end development environment. I know there are many back-end modules which build front-end source code in back-end build process.

etc…

It’s easy to use at first but those module use node module to build front-end source code so…

If you want to use one option which the node module has but back-end module do not use latest node module so you can not use the option.

If you have problem of building front-end source code you have to investigate both side of codes. It might be front-end build process problem or back-end one.

If you find new node module to build front-end source code you have to search or create plugin(library) to use inside back-end build process.

You know front-end build tools are written by node mainly and there are many reference to explain or to use it. You need not to create plugin to use them inside back-end.

Example

I created sample Django app which has front-end code and back-end code and build them separately to explain this philosophies. I will be glad to agree with me. :)

https://github.com/tomoyukikashiro/django_frontend_integration

Outline

Angular controllers are initialized from parent to child. So child controllers can not get any event from parent controller when parent controller is initialized.

Detail

This is simple sample.

JS Bin on jsbin.com

Controller’s code is really simple. They outpu their name in conole after initialized. In this sample, controller are declared from thirdController, secondController, firstController in order.

But their names outputed in conole are bellow.

"init firstController"
"init secondController"
"init thirdController"

Because Angular controller are initialized from parent dom to child dom regardless of the declared order.

So be careful childredn controllers (thirdController, secondController) can not get any event from parent controller when parent controller is initialized (child controllers are not initialized).

Outline

for data binding, scope.$digest() is needed in angular directive unit test

code

directive

(function() {
  'use strict';

  angular
    .module('Testapp', [])
    .directive('supert-button', superButton);

  function supertButton() {
    var directive = {
      link: link,
      restrict: 'E',
      replace: true,
      scope: {
        text: '='
      },
      template: [
        '<div class="alert-button">', 
          '<button ng-bind="text"></button>', 
        '</div>'
      ].join('')
    };
    function link(scope, element) {}
    return directive;
  }
})();

unit test

(function() {

  'use strict';

  describe('superButton', function(){

    var element, scope;
    beforeEach(module('Testapp'));
    beforeEach(inject(function ($rootScope) {
      scope = $rootScope.$new();
    }));

    describe('check text', function(){
      beforeEach(inject(function($compile){
        element = angular.element('<super-button text="I\'m super man"></super-button>');
        element = $compile(element)(scope);
        scope.$digest(); // you must need to call $digest() to bind text attribute into directive.
      }));
      afterEach(function() {
        element.remove();
        element = null;
      });
      it('test data binding', function(){
        expect(element.innerText).to.eql('I\'m super man')
      });
    });

  });

})();

Background

I develped some web applications. This application use session cookie. I expected session cookie data is deleted when user close browse window.

But browser keep having data after closing browser window. I wonder how long dose browser keep data in client storage.

Outline

survey how long dose typical bower storage keep data.

Survey

browser

  • Chrome (43.0.2357.81)
  • Firefox (38.0.5)
  • Safari (8.0.6)
  • IOS safari (io 8.3)
  • IOS chrome (44.0.2357.51)

All in mack.

Target

  • Cookie(Session or Permanent)
  • WebStorage (SessionStorage or LocalStorage)

How to

check the data is stil alive after those actions.

  • reload window
  • open another window(tab)
  • close window (in mobile, back to home screen and return browser app)
  • quit browser and re-open

test page

http://jsbin.com/mitila/

this page..

  • save new data to each storage
  • check the data still alive and show result

Result

summary

If you want to delete data in client after session Sessionstorage is best but you need to implement expire logic to delete data. Because some browsers did not delete data after session.

e.g.

SessionStorage was not deleted afeter back to home screen and return browser window in iOS safari, iOS chrome.

Data

  • ●:alive
  • ✕:deleted
  • ?:unexpected

Expected result

  reload new window close restart
session cookie
permanent cookie
session storage
local storage

Chrome

  reload new window close restart
session cookie ●? ●?
permanent cookie
session storage
local storage

Firefox

  reload new window close restart
session cookie ●? ●?
permanent cookie
session storage
local storage

Safari

  reload new window close restart
session cookie ●? ●?
permanent cookie
session storage
local storage

iOS safari

  reload new window close restart
session cookie ●? ●?
permanent cookie
session storage ●?
local storage

iOS chrome

  reload new window close restart
session cookie ●? ●? ●?
permanent cookie
session storage ●?
local storage