Total Pageviews

2017/02/10

[Astah] How to Change Font Size in Astah?

Problem
How to change font size in Astah?

How-to
Go to Tool => Project => Default Font, you can change font, font style and font size in this dialog.





PS. Font configuration only allow in Professional version, Community version is disallowed.


2017/02/09

[Sentry] Fail to Create a New Project via REST API

Problem
I am using spring boot to implement web application, and trying to use sentry's rest API to create a new sentry project. I get this exception as I use rest API:
1
2
3
4
5
org.springframework.web.client.HttpClientErrorException: 403 OK
 at org.springframework.web.client.DefaultResponseErrorHandler.handleError(DefaultResponseErrorHandler.java:91) ~[spring-web-4.3.2.RELEASE.jar:4.3.2.RELEASE]
 at org.springframework.web.client.RestTemplate.handleResponse(RestTemplate.java:667) ~[spring-web-4.3.2.RELEASE.jar:4.3.2.RELEASE]
 at org.springframework.web.client.RestTemplate.doExecute(RestTemplate.java:620) ~[spring-web-4.3.2.RELEASE.jar:4.3.2.RELEASE]
 at org.springframework.web.client.RestTemplate.execute(RestTemplate.java:580) ~[spring-web-4.3.2.RELEASE.jar:4.3.2.RELEASE]

I try to use Advanced REST Client to do test, it succeed. Why?



How-To
Owing this http request is triggered at server side, so we cannot use browser's developer tool to debug.

You can go to telerik to download fiddler to help us to do web debug and to figure out what's the response it returns to us.

Fiddler is a free web debugging proxy which logs all HTTP(s) traffic between your computer and the Internet. Use it to debug traffic from virtually any application that supports a proxy like IE, Chrome, Safari, Firefox, Opera and more.
Before using fiddler, you need to set proxy to spring boot to send web traffic to Fiddler.


You can see all requests in fiddler, it looks like:



We also see the bad request, and find out the problem results from the rest URL had unnecessary blank (%20)



The response looks like (sentry tell it violate CSRF problem, but the real problem is the wrong REST URL):



Reference
[1] https://docs.sentry.io/hosted/api/teams/post-team-project-index/

2017/02/08

The Bat and A Ball Problem

最近在看 Thinking, Fast and Slow 這本書,裡頭提到一個 The Bat and A Ball Problem,問題描述如下:
If a baseball and a bat cost $1.10 together, and the bat costs $1.00 more than the ball, how much does the ball cost?

根據作者的實驗,超過 80% 的大學生會回答 0.1 元,但是這個答案卻是錯的,因為題目是說,球棒比球多 1 元,沒有說球棒是 1 元,人習慣靠直覺 (System 1) 來快速得到答案,因為比較省時、省力,但是 System 1 很容易犯錯

以下是運算式,X 代表球的價錢,最後推導出 X = 0.05









回答 0.1 的人,比較偏向直覺思考者,即運用 System 1 的人;回答 0.05 的人,比較偏向理性思考者,即運用 System 2 的人。

兩種 system 有其本質的差異:
系統一 (System 1):是 automatic system,屬於自動化、反射性、快速、不費力的思考方式。如運算 1 + 1 等於多少、看著報紙念出一則報導、理解一個簡單的句子等。但是,System 1 會自動運作且無法隨心所欲地關閉它,所以我們無可避免的會產生直覺錯誤、認知幻覺,System 1 的偏誤是無法避免的
系統二 (System 2):是 effortful system,屬於較費力、需專注力、邏輯思考、牽涉複雜運算、推理的思考方式。如填寫稅單、比較兩隻手機的優缺點、把車子停在一個格子較小的停車格。但是,System 2 用來取代 System 1 來做日常的決策是不切實際的,因為它運作緩慢且沒效率,我們能做的是:學習識別我們所處的情境的犯錯機率,當風險很高時要盡量避免犯下重大錯誤

2017/02/07

[Angular2] Label Text Padding

Problem
This is my original modal dialog:


I hope the label can be looks like (it will be looks more pretty):



Here has the original code snippet:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<modal #newUserModal [size]="'lg'">
  <modal-header [show-close]="true">
    <h4 class="modal-title">新增用戶</h4>
  </modal-header>

  <modal-body>
    <div class="row">
      <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="newUserModal.close();"> 取消 </button>
      <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="createUser()"> 儲存 </button>
    </div>

    <div class="row">
      <div class="col-sm-10 form-inline">
        <label>帳戶名稱</label>
        <input type="text" class="form-control" id="login" [(ngModel)]="newUser.login" required>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-10 form-inline">
        <label>名字</label>
        <input type="text" class="form-control" id="lastName" [(ngModel)]="newUser.lastName" required>
      </div>
    </div>

    <!-- ignore some code -->

  </modal-body>
</modal>


How-To
We can add padding-left for each label, the padding-left property sets the left padding (space) of an element.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<modal #newUserModal [size]="'lg'">
  <modal-header [show-close]="true">
    <h4 class="modal-title">新增用戶</h4>
  </modal-header>

  <modal-body>
    <div class="row">
      <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="newUserModal.close();"> 取消 </button>
      <button type="button" class="btn btn-primary btn-raised" style="float: right;" (click)="createUser()"> 儲存 </button>
    </div>

    <div class="row">
      <div class="col-sm-10 form-inline">
        <label style="padding-left:64px">帳戶名稱</label>
        <input type="text" class="form-control" id="login" [(ngModel)]="newUser.login" required>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-10 form-inline">
        <label style="padding-left:96px">名字</label>
        <input type="text" class="form-control" id="lastName" [(ngModel)]="newUser.lastName" required>
      </div>
    </div>

    <!-- ignore some code -->

  </modal-body>
</modal>



Reference
[1] http://www.w3schools.com/cssref/pr_padding-left.asp

2017/02/06

[Angular2] Dynamic Dropdown List

Problem
We have a dropdown list in the modal dialog:


The code snippet regarding dropdown list looks like:
    <div class="row">
      <div class="col-sm-10 form-inline">
        <label>電子郵件提醒事項</label>        
        <select class="form-control" id="mailNotification" [(ngModel)]="newUser.mailNotification">
            <option value="all">提醒與我的專案有關的全部事件</option>
            <option value="only_my_events">只提醒我觀察中或參與中的事物</option>
            <option value="only_assigned">只提醒我被分派的事物</option>
            <option value="only_owner">只提醒我作為擁有者的事物</option>
            <option value="none">取消提醒</option>
        </select>
      </div>
    </div>      

If I would like to use dynamic way to generate this dropdown list instead of static way, how to do it?

How-to
Step 1. declare an array which contains the texts and values in the dropdown list, and given a name 'mailNotifications'
import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import * as bootbox from 'bootbox';

@Component({
  selector: 'user-list',
  templateUrl: 'user.list.html'
})

export class UserComponent {

  searchUser: User = new User();
  newUser: User = new User();
  mailNotifications: Array<any> = [
    { text: '提醒與我的專案有關的全部事件', value: 'all' },
    { text: '只提醒我觀察中或參與中的事物', value: 'only_my_events' },
    { text: '只提醒我被分派的事物', value: 'only_assigned' },
    { text: '只提醒我作為擁有者的事物', value: 'only_owner' },
    { text: '取消提醒', value: 'none' }
  ];

  ngOnInit() {
    this.searchUser.status = 1;
  }

}



Step 2. Make good use of *ngFor to iterate its text and value for the dropdown list:
    <div class="row">
      <div class="col-sm-10 form-inline">
        <label>電子郵件提醒事項</label>
        <select class="form-control" id="mailNotification" [(ngModel)]="newUser.mailNotification">
           <option *ngFor="let n of mailNotifications" [ngValue]="n.value">{{n.text}}</option>
      </select>
      </div>
    </div>