[HTML] How to arrange multiple elements in the same row

Problem
In this dialog, I hope the drop down list should be at the right side of the radio button, not in the new line.




The code snippet looks like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="row"> <div class="col-sm-12"> <div class="form-group" style="display:inline"> <label>即時應用系統異常追蹤整合</label> <div> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯 <span style="padding-left:20px"> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯 </span> <span style="padding-left:5px"> <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'" > <option value="" selected> 請選擇 </option> <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option> </select> </span> </div> </div> </div> </div>

How-to
You can use CSS to fulfill this requirement:

display:inline-block

Just add display:inline-block; to this drop down list's style, the updated code snippet is as bellowing:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="row"> <div class="col-sm-12"> <div class="form-group" style="display:inline"> <label>即時應用系統異常追蹤整合</label> <div> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯 <span style="padding-left:20px"> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯 </span> <span style="padding-left:5px"> <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'" style="display:inline-block;"> <option value="" selected> 請選擇 </option> <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option> </select> </span> </div> </div> </div> </div>

See...the radio buttons and drop down list are in the same row.
Reference
[1] https://www.quora.com/I-want-to-put-two-divs-in-HTML-in-the-same-line-but-one-always-comes-under-the-other-one-What-should-I-do
[2] http://crunchify.com/basic-html-how-do-you-create-blank-space-in-html/    

[閱讀筆記] The World Is Flat (2/2)

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. 今日油氣佔出口總額三成以上的國際，有34個低開發國，有1/3非民主國家，有12國的人均所得在1500美元以下
26. 人會改變，一定是他注意到什麼，而不是別人說了什麼敎

2017/02 Travel

南雅奇岩





基隆情人湖老鷹岩



嘉義北門車站





新港奉天宮

[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.

[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/

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 來做日常的決策是不切實際的，因為它運作緩慢且沒效率，我們能做的是：學習識別我們所處的情境的犯錯機率，當風險很高時要盡量避免犯下重大錯誤

[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

[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>

[Testing Tool] Postman

I am using Redmine Rest API to implement my web application. For example,  here has developer guide to teach us how to use rest API to find, create, update and delete project: https://www.redmine.org/projects/redmine/wiki/Rest_Projects

In order to make sure the JSON format for each action (i.e. CRUD) in request or response, we can make good use of Postman to assist us.

Installation


How-to
Firstly, we need to configure user name and password for logging into Redmine:


Secondly, we need to set content-type to application/json in Headers:


If I would like to test:

• List projects: GET /projects.json
• Select GET HTTP method, fill in URL and click Send button, then we can get the execution result

• Show a project: GET /projects/[id].json
• Select GET HTTP method, fill in URL and click Send button, then we can get the execution result

• Create a project: POST /projects.json
• Select POST HTTP method, fill in URL, prepare JSON string for creating a new project and click Send button, then we can get the execution result

• Update a project: PUT /projects/[id].json
• Select PUT HTTP method, fill in URL, prepare JSON string for updating  project and click Send button, then we can get the execution result

• Delete a project: DELETE /projects/[id].json
• Select DELETE HTTP method, fill in URL and click Send button, then we can get the execution result

Reference
[1] https://www.getpostman.com/
[2] https://dzone.com/articles/12-great-web-service-testing-tools?utm_content=bufferba092&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[Design Pattern] Strategy Pattern

Assume I have a data exporter which can export data to PDF, XLS or HTML format. It can export data to different format depends on your demand.

Firstly, creating a strategy interface:

package albert.practice.designpattern.strategy;

public interface ExportStrategy {

    void exportData(String data);
    
}

Secondly, creating concrete classes implements strategy interface.

package albert.practice.designpattern.strategy;

import lombok.extern.slf4j.Slf4j;

@Slf4j
public class ExcelExporter implements ExportStrategy {

    @Override
    public void exportData(String data) {
        log.debug("exporting " + data + " into excel file.");
    }

}

package albert.practice.designpattern.strategy;

import lombok.extern.slf4j.Slf4j;

@Slf4j
public class HtmlExporter implements ExportStrategy {

    @Override
    public void exportData(String data) {
        log.debug("exporting " + data + " into html file.");
    }

}

package albert.practice.designpattern.strategy;

import lombok.extern.slf4j.Slf4j;

@Slf4j
public class PdfExporter implements ExportStrategy {

    @Override
    public void exportData(String data) {
        log.debug("exporting " + data + " into pdf file.");
    }

}

The DataExport class will export data depends on client's demands.

package albert.practice.designpattern.strategy;

public class DataExport {

    public static void main(String[] args) {
        String data = "[test data]";
        
        DataExport exporter = new DataExport();
        exporter.exportData(FileTypeEnum.XLS, data);
        exporter.exportData(FileTypeEnum.PDF, data);
        exporter.exportData(FileTypeEnum.HTML, data);
    }

    public void exportData(FileTypeEnum fileType, String data) {
        ExportStrategy exporter = null;
        if (FileTypeEnum.XLS == fileType) {
            exporter = new ExcelExporter();
        } else if (FileTypeEnum.PDF == fileType) {
            exporter = new PdfExporter();
        } else if (FileTypeEnum.HTML == fileType) {
            exporter = new HtmlExporter();
        }
        exporter.exportData(data);
    }

}

We create objects which represent various export strategies, but we still expose if-else logic in client. Therefore, we create an ExportStrategy class which will change the executing algorithm of the context object (i.e. PdfExporter, HtmlExporter, and ExcelExporter).

package albert.practice.designpattern.strategy;

import lombok.Data;

@Data
public class ExporterContext {
    
    private String data;
    
    public void doExport(ExportStrategy strategy) {
        strategy.exportData(this.data);
    }
    
}

And the DataExport will be modified as bellows:

package albert.practice.designpattern.strategy;

public class DataExport {

    public static void main(String[] args) {
        String data = "[test data]";
        
        ExporterContext context = new ExporterContext();
        context.setData(data);
        context.doExport(new HtmlExporter());
        context.doExport(new ExcelExporter());
        context.doExport(new PdfExporter());
    }

}

To sum up, we create a ExportStrategy interface which define an exportData action and concrete strategy classes (i.e. PdfExporter, ExcelExporter, HtmlExporter) implementing the ExportStrategy interface. ExporterContext is a class which uses a Strategy.
DataExport, our demo class, use Context and strategy objects to demonstrate change in Context behaviour based on strategy  (i.e. PdfExporter, ExcelExporter, HtmlExporter) it uses.