albert's blog

2016/11/09

[Chrome Extension] How to adjust the width of popup window ?

Problem
In chrome extension, we will create a html file which will be rendered inside the popup window that's created in response to a user's click on the browser action.

I hope the image, search input text and search button are in the same row.
But it display in difference row.

How do I adjust the width of the popup window?

The popup window html content looks like:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
        <form id='myForm'>
            <img src="magnifier.png" height="20" width="20">
            <input type="text" id="queryString" style="width:100px">
            <button type="submit" id="doSearch">Search</button>
        </form>
    </body>
</html>

How-to
You can set the width of html tag. The updated popup window html content looks like:

<!DOCTYPE html>
<html style="min-width:210px;">
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
        <form id='myForm'>
            <img src="magnifier.png" height="20" width="20">
            <input type="text" id="queryString" style="width:100px">
            <button type="submit" id="doSearch">Search</button>
        </form>
    </body>
</html>

See it works!

Reference
[1] https://stackoverflow.com/questions/5020953/popup-html-change-width

2016/11/08

[Chrome Extension] Hello World Example

1. Create a manifest.json
In this manifest, I will declare a browser action, and the activeTab permission

{
  "manifest_version": 2,
  "name": "Hello World",
  "description": "My first Chrome extension",
  "version": "1.0",
  "permissions": [ "activeTab" ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "helloworld.html"
  }
}

2. Resources
Download a icon.png as an icon for this chrome extension

helloWorld.html will be rendered inside the popup window that's created in response to a user's click on the browser action.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
    </head>

    <body>
    Hello! It is my first Chrome extension!!!!
    </body>
</html>

3. Load the extension and test (remember to turn on developer mode)

If I would like to show a JavaScript alert message
1. Create a helloWorld.js

alert("Hello World! 測試測試");

2. Import helloWorld.js into helloWorld.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
    Hello! It is my first Chrome extension!!!!
    </body>
</html>

3. Reload the hello world extension and test

Reference
[1] https://developer.chrome.com/extensions/getstarted

2016/11/07

[Microsoft Outlook] 如何在 outlook 中，找出未讀取的信件

Problem
如何在 outlook 中，找出未讀取的信件

How-To
Step 1. 點選收件夾
Step 2. 點選搜尋方格
Step 3. 點選未讀取

2016/11/06

[Spring Boot] How to Update Code and Take Effect Immediately

Problem
Assume I have a controller:

package albert.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @RequestMapping("/")
    public String sayHello(){
        return "Hello! Spring Boot!";
    } 
}

After I start up spring boot application, then connect to http://localhost:8080/.
The page will look like:

If I would to change some wording in the sayHello() method, and I hope it takes effect immediately.
How to fulfill this requirement?

Solution
Add spring-boot-devtools dependency in pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
</dependency>

Update application.yml, and set spring.devtools.restart.enabled=true

spring:
  devtools:
    restart:
      enabled: true

When you set this property, immediately it takes effect and you need not manually stop and start the spring boot application.

Reference
[1] http://javabeat.net/spring-boot-devtools/

2016/11/05

[Spring Boot] Quick Start

Step 1. Download Eclipse from https://eclipse.org/downloads/

Step 2. Installed Spring Tool Suite (STS) in Eclipse Marketplace, then restart Eclipse

Step 3. Create a Spring Starter Project

Step 4. Fill in project name, group, artifact, package, and so on. Then click Next button.

Step 5. Choose Boot Version and check Web. Then click Next button.

Step 6. Click Finish button.

Step 7. Created demo project.

Step 8. Create a test controller.

package com.example.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @RequestMapping("/")
    public String sayHello(){
        return "Hello! Spring Boot!";
    }
 
}

Step 9. Start up Spring Boot App

Step 10. Test

2016/11/04

[Windows] 用 Excel 打開 CSV，繁體中文都是亂碼

Problem
當我在 Windows 7 打開一份 CSV 檔案，在 Mac 平台可以正常顯示繁體中文，但是在Windows 平台卻是亂碼

Solution
Step 1. 打開 Excel
Step 2. 資料 => 從文字檔

Step 3. 選取要匯入的 CSV 檔案

Step 4. 透過預覽的方式，選擇編碼方式，如原本是 UTF-8，將其修改為 BIG5 就可以正常顯示了

Reference
[1] http://goo.gl/an21Zo

2016/11/03

[Eclipse] Source not found Problem

Problem
I am working in a Maven Project in Eclipse.
As I tried to check the Apache POI's source code, but it show Source not found error message as bellows:

Solution
Step1. Go to Preferences => Maven
Step2. Check "Download Artifact Sources" and click "OK"

Check result:

2016/11/02

[閱讀筆記] The Unwritten Laws of Business (1/2)

在任何組織中，阻礙成功的主要因素，往往是人和管理的問題
如果你不先在目前的工作上力求表現，你就不太可能有機會去嘗試更符合自己志趣的工作
工作的執行力包含：

積極進取：即著手開始做事的幹勁
機智或靈巧：有能力想辦法達成想要的結果
堅持到底：即使遭遇困難、挫折，仍不屈不撓的精神

每當工作遭遇阻礙時，都要立即設法跨越，尋其他資源或權宜之計，讓工作持續運轉，不致於失去動能
要以書面形式確認你的指示和對方的工作承諾
有些事情若是單憑想像，可能會顯得太過抽象、難以捉摸，唯有透過第一手的直接觀察，才能得到充分、深入的了解
決策反覆會讓他人看輕你
一個安靜又膽小的人，一句話都不說，通常會被看成是沒有想法，所以無話可說
對專案內容侃侃而談的人，就會獲派去完成該項專案。如果你不想爭取那份工作，那就什麼都別說，而你一定會被略過，但是等到日後要指派更重大的職責時，你勢必也會被略過
如果你不知道答案，就說你不知道，但是同時也要說：「我會立刻找出答案。」如果你對自己的答案不是那麼有把握，就要表明你確定的程度。博得可靠和值得信賴的好名聲，是你最珍貴的資產之一
每一位主管都必須了解其職掌範圍內的所有狀況
無論你多麼努力想把工作做好，難免還是會出現出乎意料之外的問題或失誤。在此時，你應該在呈報問題的同時，一併提出解決辦法，以便在最短的時間內著手推行。沒有主管喜歡有人冷不妨地向他們丟出意料之外的問題，但是如果在提報問題時，也提出你對於解決方案的實用建議，你所面臨的困境將會大幅改善
你的上司就是你的老闆。你躲不開評估你績效的上司，必須能夠向上司展現出最起碼的個人忠誠度，同時感覺到我們是在協助上司完成重要的工作時，才會從工作中獲得更大的滿足感
你的主管絕對有充分的理由要求你立即完成工作，而且比起其他或許看似更急迫、但是卻較不引人注目的專案，主管指派的任務往往與你的績效考核更相關
忽略自己的工作，而去做他人的工作，並不會得到讚賞或感謝。但是，很常發生的情況是，如果你可以先把自己分內的事情處理得有條不紊，那麼你對於其他人的事務所展現的瞭解和積極的興趣，將會促使妳升遷到另一個承擔更大職責的職位
許多職員之所以獲得拔擢，主要是因為他們確實有能力協助處理其他人的事務，並同時做好自己的工作
面臨任何形式的對立時，你可以拋出這個問題：「你的建議是什麼？」這個問題會讓對方展開建設性的討論，並且避免爭端
向他人徵詢意見時，對於其他人的意見抱持高傲態度是沒必要且討人厭的。如果你無意聽取、採用或考慮他人提供的資訊或意見，那就根本不要徵詢他們的建議，因為你的同事不久就會認清這種假意謙遜的姿態
當你忽略他人的承諾或是任其打折扣，就等於是免除別人的責任，也會為自己惹來額外的責任
對另一個部門的服務有所不滿時，要向最直接負責相關工作的那個人，表達你的怨言。若跳過當事人，找上他的上司，會引起強烈的憤恨
與顧客和公司以外的人是往來時，切記你是代表公司，在別人眼中，你負有全部責任和職權
主管要通盤掌握全局，主要是指重大或顯著的進展，而不是要你對任務的每個細節窮追不捨。要是到了會妨礙事務的運作，就會變成一種惡行
事必躬親是很糟糕的事情，對你不好、對工作不好、對你的部屬也不好。即使你能夠獨立應付所有工作，還是必須授權。過度依賴一個人，並不是聰明的做法，對同事和部屬也不公平
無論是就個人或主管的層面而言，限制自己只從事能夠讓你發揮特殊才能、技巧或貢獻的工作，或是只做能夠讓你享有某些天生優勢的工作，會是個明智之舉。一般人普遍相信，人只要努力，什麼都做得成，這種看法頂多就是沒效率，糟的話還會招致徹底失敗。很少有人能夠多才多藝到事事都專精

2016/11/01

[閱讀筆記] Security Analysis (Part 5)

income statement (損益表) 中數字的意思並無法被全然理解，除非你參照 balance sheet (資產負債表) 一起看
在考察公司的盈利能力時，不僅要看公司的利潤金額，還要看公司的利潤結構，即區分利潤中哪些是可以持續獲得的，哪些是偶然獲得的。那些偶然獲得的，就是非經常項目（nonrecurrent items）
好的存貨是資產，不好的存貨是負債。企業想美化財報、提高獲利，若無法提高營收，就只能從降低成本來下手。而存貨正是企業用來調節成本、隱藏損失、藏污納垢、掩人耳目的最佳暫存區
存貨一旦售出，資產就發揮效用創造獲利，這時存貨成本就轉成銷貨成本，也就是從資產負債表的科目轉換到了損益表。如果企業在製作財報時，刻意把存貨當滯洪池來使用，就能適度的來調整損益了
公司銷售的產品若屬專案類型，營收與成本認列的時間點就在驗收日期。如專案剛好是在十二月驗收，而該專案因為成本控制不當導致專案虧損，若不想要讓此專案影響當年度獲利，只要跟客戶協商一下，把驗收日期挪到隔年一月才驗收，此虧損就不會在今年認列
企業在做存貨核算(inventory accounting)時，在預期存貨的價格不斷上漲時才選擇後進先出法，以達到遞延所得稅支出的目的，而當預期存貨價格將持續下跌時，則通過會計政策變更將存貨計價方法由後進先出法轉為先進先出法
按照會計制度的規定，企業的盈虧應當依照規定以損益表呈現。許多企業常透過資產評估，將壞賬、滯銷和毀損存貨、長期投資損失、固定資產損失以及遞延資產等潛虧確認為評估減值，沖抵“資本公積”，從而達到粉飾會計報表，虛增利潤的目的
當企業開始進行令人起疑的會計手段時，無論這家企業看起來多安全、多有吸引力，投資人還是要遠離這種公司
Security Analysis 必須估到其子企業的營收，不管是賺錢或賠錢。有些公司會因為子企業虧損而不報，或者是雖然子企業賺錢的時候先不報，等日後母公司業績不是很好的時候才拿出來報
折舊的中心概念，就是把買機器、設備花的錢分攤到使用年限的時間內，這樣我們才能客觀的從財報看到公司費用的分攤與資產情況。如蛋糕店要把買烤箱花的40萬元分成10份分攤到未來10年的損益之中
有些企業會利用折舊方法，來修飾自己的毛利率，如原本折舊年限從十年延長到二十年，如此每年攤提成本降低，毛利被拉高，但實際上公司並沒只有比較賺錢
折舊費用的高低可以檢視企業經營的狀況，如果一個公司折舊費用佔利潤比率過高，代表著必須一直將資金投入至先進的設備才能維持公司本身的競爭優勢。這會吞噬掉公司利潤，巴菲特認為不應該佔有太多的比率，否則一旦產業發生改變，將會造成巨幅的虧損
在研究營收紀錄時，security analysis有個重要的原則，只有在其資料有針對該公司的定性資料所支持下，其定量資料才是有用的
透過過去的營收記錄，是無法判斷這家公司是否穩定。你應該拋開數字，去研究其最根本的賺錢能力(earning power)
過去的營收趨勢向上，並不代表未來趨勢就一定向上，有可能競爭加劇、法規影響等，都會影響公司獲利
股票市場往往是先發生價格後，事後人們忙著找原因。股票市場的價格不是根據計算來的，是根據人們對事件的反應、掙扎而來。實務上來說，沒有一套公式或規則可算出一檔股票的proper value
盡管無法正確估出股票的proper value，但是你必須做到: (1) 有別於投機客，建立一套保守的投資估價方法；(2) 了解一家公司的資本結構與收入來源；(3) 找出資產負債表中不尋常的項目
我們建議，本益比20倍是購買一檔股票的上限
最近幾年的獲利狀況，可以作為預測未來營收的度量: 如果(1)最近幾年的市場狀況沒有特別的好；(2) 過去幾年營收的趨勢是往上的；(3) 投資人對於產業的研究讓他有信其公司會持續成長。這時，你才會比較有信心，這家公司未來是會成長的
無論你是投資客或是投機客，你的成績單是由未來的營收所決定，不是過去的營收
price-earnings ratio (本益比) 無法提供margin of safety(安全邊際)，price-earnings ratio (本益比)只能提供給投資者一個可能性，即本益比較低的股票，未來的營收可能會比過去好
An attractive common-stock investment is an attractive speculation
我們建議，本益比 12 或 12.5 倍是一個比較適當的數據，這是一個必要的條件之一，還不夠滿足全部的條件，其條件還包含公司財務結構、領導階層的能力、公司與產業的未來展望等等
雖然我們不建議購買本益比超過20倍的股票，但是不是說購買的行為是錯誤的，而是這樣的股票相對投機，長期來說，比較容易賠錢
用高價未來買進績優股，本質是投機的，因為未來是否會持續成長，都是未知數
資本結構(Capitalization Structure) 可以從資產負債表得到相關的訊息，資本結構是負債與業主權益的比例，當負債越高，則風險就會越高
造成投機性資本結構的原因有：債券和優先股的比例比普通股大很多；高負債；生產成本高、利潤率低，市值比銷售額小很多倍。前兩點是因為必須在淨利潤之前扣除每年必須優先償還的利息，第三點是因為低的利潤率導致淨利潤對銷售額的變化極其敏感
好公司並不一定就是好投資，一個公司的資本結構直接影響到公司的收益，從而影響股價。公司利用槓桿的程度是不同的，有的偏於保守，有的偏於激進，很多股市奇蹟其實是這些具有投機性資本結構的股票造成的
價格介於10～20元的股票歸類於低價股。低價股的波動傾向大於高價股；在牛市，低價股通常漲的比高價股多，在熊市時，低價股跌的比高價股少
Low-priced stock有分真的低價股或假的低價股，真的低價股是真實反映其營收不佳的事實；假的低價股是，公司內部已事先知道內線先予以拋售，所導致的low price，但此時不是真的low price，不知情的buyer逢低買進卻被套牢。大部份購買low-priced stock賠錢的原因是，它們是被倒貨的buyer，促成seller的利益
投資的行為是，經過徹底的分析，承諾本金的安全性與定義滿意的回報，若違反這些規則，就是投機，不是投資
股票的真實價值是經由以下事實所決定，包括資產、營收、股利、未來展望等；但是，市場的報價卻是建立在市場操作與人性
不適當或錯誤的資料，以及未來的不確定性，導致真實價值總是難以捉摸
投資永遠都要面對未來的不確定性，所以投資人再買進時，必須確認是否有足夠的Margin of safety 來彌補未來的不確定性
Balance Sheet 可以指出與公司營運有緊密關聯的資源的數量與本質；提供分析公司收入來源的本質與穩定性；債務端顯示公司的財務狀況；可以與過去幾年的balance sheet比較，分析營收的品質，可以搭配透過現金流量表了解資金動向

2016/10/31

[Travel] 2016/10

行天宮

松山文創園區

南子吝山

2016/10/10

[Java 8] Using lambda to convert a List of object to comma-separated string

If I java an object which named Group

    import lombok.Data;
    
    @Data
    public class Group {    
        private Integer id;
        private String name;
    }

The data in List of Group looks like:

1
2
3

    Group(id=1, name=Group A)
    Group(id=2, name=Group B)
    Group(id=3, name=Group C)

The expected result is to convert to comma-separated string:
Group A, Group B, Group c

If we does not utilize lambda expression, the code snippet is as following:

    List<Group> groups = dto.getUser().getGroups();
    StringBuilder groupStringBuilder = new StringBuilder();
    for (int i = 0; i < groups.size(); i++) {
        if (i == groups.size() - 1) {
            groupStringBuilder = groupStringBuilder.append(groups.get(i).getName());
        } else {
            groupStringBuilder = groupStringBuilder.append(groups.get(i).getName()).append(", ");
        }
    }

If we apply lambda expression, we only need to use one line of code to meet this requirement:

    String groupStr = groups.stream().map(g -> g.getName()).collect(Collectors.joining(", "));

2016/10/09

[Java 8] Convert a List of String to a Comma-Separated String

If I have a List of String looks like:

1
2
3

private List<String> getDummyPlayers() {
    return Arrays.asList("王 柏 融", "林 智 勝", "林 泓 育", "蔣 智 賢", "高 國 慶");
}

If I would like to convert it to String, and each player should separate with comma, i.e. 王柏融, 林智勝, 林泓育, 蔣智賢, 高國慶

Before Java 8, we may do this way:

private String separatePlayersWithComma(){
    List<String> players =getDummyPlayers();
    String playersWithComma = "";
    for (int i = 0; i < players.size(); i++) {
        if (i == players.size() - 1) {
            playersWithComma = playersWithComma + players.get(i);
        } else {
            playersWithComma = playersWithComma + players.get(i) +", "; 
        }
    }
    return playersWithComma;
}

In Java 8, it is very easy and straightforward:

private String separatePlayersWithComma_usingJDK8(){
    List<String> players =getDummyPlayers();
    String playersWithComma = players.stream().collect(Collectors.joining(", "));
    return playersWithComma;
}

Total Pageviews