albert's blog

2016/12/05

[Chrome Extension] Create a simple chrome extenstion with AngularJS 1.X

The steps are as bellows:

1. Download AngularJS 1 from https://angularjs.org/

2. Download Bootstrap from https://getbootstrap.com/

3. Create manifest.json

{
  "manifest_version": 2,
  "name": "Build Chrome Extension With AngularJS",
  "description": "利用 AngularJS 建置 Chrome Extension ",
  "version": "1.0",
  "permissions": [ "activeTab" ],
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "todo.html",
    "default_title": "Build Chrome Extension With AngularJS"
  }
}

4. Create popup window

<!DOCTYPE html>
<html style="min-width:220px;">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Todo list Page</title>
        <script src="js/angular.min.js"></script>
        <script src="js/todo.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <div ng-app="todoApp" ng-controller="todoController" class="container">
            <form id='myForm'>
                <div class="row">
                    <input type="text" ng-model="task">
                    <button class="btn btn-primary btn-xs" ng-click="addTask()">
                        <i class="glyphicon glyphicon-plus"></i>
                    </button>
                </div>               
            </form>

            <div class="row">
                <ul>
                    <li ng-repeat="t in tasks track by $index">{{ t }} 
                        <button class="btn btn-default btn-xs" ng-click="deleteTask()">
                            <i class="glyphicon glyphicon-minus"></i>
                        </button>
                    </li>
                </ul>
            </div>
            
        </div>
    </body>
</html>

5. Create a JS file for popup window

angular.module('todoApp', [])
    .controller('todoController', function($scope) {

        $scope.tasks = [];
        
        $scope.addTask = function() {
            if(isNotEmptyOrUndefined($scope.task)){
                 $scope.tasks.push($scope.task);
                $scope.task = '';
            } else {
                alert('task name cannot be null');
            }           
        }
        
        $scope.deleteTask = function() {
            $scope.tasks.splice(this.$index, 1);
        }

});

// 檢查是串是否不為空值且不為undefined
function isNotEmptyOrUndefined(str) {
    return str != '' && !angular.isUndefined(str) && str != null;
}

6. Install to Chrome and do test

Source code: https://github.com/junyuo/ChromeExtensions/tree/master/ChromeExtensionWithAngular

2016/12/04

[Chrome Extension] Create a simple chrome extenstion to search picture in Flicker

Steps are as bellows:

1. Create manifest.json

{
  "manifest_version": 2,
  "name": "搜尋Flicker照片",
  "description": "Flicker Search Extension",
  "version": "1.0",
  "permissions": [ "activeTab" ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "helloworld.html",
    "default_title": "搜尋Flicker照片"
  }
}

2. Get icons
icon for chrome extension: https://goo.gl/7x1ID8
icon for pupup window: https://goo.gl/YldO4J

3. Create pop up window

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

4. Create a JS file for popup window

/* The DOMContentLoaded event is fired when the initial HTML document 
 * has been completely loaded and parsed, without waiting for stylesheets, 
 * images, and subframes to finish loading.
 */
document.addEventListener('DOMContentLoaded', function() {

    var searchBtn = document.getElementById('doSearch'); 

    // Execute the following steps as user click Search button       
    searchBtn.addEventListener('click', function(){      
        // Gets query string 
        var queryString = document.getElementById('queryString').value;

        // Create URL with query string
        var newUrl = 'https://www.flickr.com/search/?q='+queryString;

        // Creates a new tab.
        chrome.tabs.create({ url : newUrl});
    }, false);

}, false);

5. Install to Chrome and do Test

Source code: https://goo.gl/sSRCz0

2016/12/03

[Git] fatal: LF would be replaced by CRLF

Problem
As I try to use the git add command adds a change in the working directory to the staging area.

It show the fatal error message as bellows:

albert@albert-PC MINGW64 /d/git/ChromeExtensions (master)
$ git add --all
fatal: LF would be replaced by CRLF in HelloWorld/manifest.json

How-to
This fatal error message results from this command fail to pass crlf check.

Here has the solution to fix this file's crlf problem.
If you have Notepad++ installed in your computer, simply follow these steps.
[1] Open the file that is having the fatal issue.
[2] Click Edit -> EOL Conversion, then select Windows Format and save it.

2016/12/02

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

有些人似乎永遠都會把水弄的更濁，或無法見樹又見林。能夠從看似複雜的情境裡，分析出最基本、最關鍵的要素，是一種智慧，而且通常必須從經驗累積而成。在這個能力上的差異，會使兩個在各方面都旗鼓相當的人分出高下
大多數危機在一開始看似很糟糕，但其實根本沒有這麼嚴重，所以要格外謹慎，不要把不好的情勢給誇大了
任何會議的重點，都在於面對問題和解決問題。人往往會有規避問題的傾向，不是會延遲行動，就是希望事情會自己自動解決。要是在散會前，與會者尚未明確了解工作任務的內容、負責人及時間表，這就是一場失敗的會議
養成決策明快俐落的習慣，有些主管甚至在決定非常小的問題上，都非常痛苦掙扎，主要是因為他們從來沒有克服對於犯錯的恐懼
不要讓犯錯的危險，把你的進取新壓抑到「無所冒險，無所得」的程度。預期自己有可能會犯錯，偶而冒一些風險，並且在失敗時承擔苦果是比較健康的。很少錯誤是找不出益處的，就算只有累積了經驗，也算是一種收獲
以下是執行專案的準則，也可以說是 SOP：

界定專案目標
規劃工作

列出帶完成的每一個步驟
界定所需的資源，包含人力、資金和設備
備妥明確的時間表

執行計畫
監督進度，並在偏離進度時做出回應

留意「瓶頸」、「進度停滯」及「中斷的環節」：挹注額外的時間、資金和人力，以追趕落後的工作項目
如果有必要，修正你的時間表

盡全力準時完成專案

過度專注追求安全感，很容易導致更大的危險。身處競爭激烈的世界，你必須冒點風險，放手一搏，因為你不這麼做，其他人也會去做，而他們通常是最後的贏家，他們會讓你為了趕上他們而跑的上氣不接下氣
積極大膽的計畫原本就會有風險，為了將風險降到最低，在實際可行的前提下，提供替代方案，或是確保有後路可退，避免徹底失敗
當員工根本不知道自己的工作內容，也不清楚該負責什麼任務時，將嚴重損及士氣和效率。如果指派的任務不明確，很容易就會產生沒完沒了的爭執、混淆和不好的感覺
如果你對於部屬的工作表現不滿意，應該在一發現這樣的情況時，就立即與他們展開會談，這是你責無旁貸的事情，但是，要做到這點通常不太容易，這需要許多圓融的智慧，以免使部屬感到受挫或被冒犯
如果你必須開除某個部屬，你必須回答兩個尖銳的問題：『為什麼你要花五年的時間，才發現我能力不足？』以及『你為什麼沒給過我公平的機會，去修正這些缺失？』切記，當你以能力不足開除某人時，不只是該名員工表現差勁，也表示你個人督導不周
成功的主管會清楚地說明它們對於部屬的要求、目標和期望，之後再予以督導，提供支援
主管自然而然地想直接行使他們的管理權限，以前迅速明快地解決事情，卻因此沒能顧慮到已經被指派該項工作的人，此舉會嚴重打擊該名部屬的工作士氣
在對部屬職責的各種粗糙對待中，僅次於職責未被賦予權限的，就是位能讓部屬獲得充分資訊。當員工被指派負責某項專案，如果他們對於專案的過往歷史、現況或未來，都尚未取得足夠的資訊之際，就要求他們展現出可信度，是非常不公平的
薪資的調整，無論是透過什麼形式，都是對於工作表現優異、承擔更大職責或是為公司增加價值，最恰當的獎勵或報酬
信心、團隊和人際溝通、工作動力、成就感、適應能力、領導潛力、求知慾、誠信和情緒控制這些技能和特質，才是區分稱職員工與卓越員工的決定條件
能與各式各樣人相處的能力，是最珍貴的人格特質之一
與人為善的具體原則

學會欣賞每個人的優點，而非挑剔他人的缺點
不要因為受到挑釁，就失去耐心和惱怒
因為真誠的意見分歧而發生爭論之後，千萬不要心懷怨恨
養成體貼他人感覺和利益的習慣
不要太過專注於自己的私利
養成一有機會就協助他人的習慣
格外留意，無論在任何場合都要公正無私
不要對自己太嚴苛，或是太嚴肅看待工作
多費一點心思，真誠地與人打招呼
如果你對於別人的動機有所懷疑，先假定他們是無辜的，尤其是當你能夠這麼做的時候

留心避免和他人爭吵，可是萬一爭端已起，就應該讓對方知道你不是可以輕侮的
太過刻意地要與每個人和睦相處，因而一味地討人喜歡、甚至是屈服順從，當然是錯誤的作法，遲早有人會利用你這點
將個人誠信視為你最重要的資產之一，如果你擁有高度的個人誠信，你就會誠實、有品德、值得信賴、負責而且真誠。不妥協和堅守誠信，必然會得到珍貴的報償：信心，亦即同事、部屬和外人對你的信心
不要低估專業職責和個人責任的範圍，遵循以下幾個簡單的指導原則：

以有系統的方式處理你所有的工作，尤其是在開發新產品、流程或設備的時候
找出所需的專業知識和技能，並將之應用到所有活動上
確實了解合適的規範與標準，並加以採用
盡可能採行既有的程序
記錄你自己和部門的活動

留意你的個人儀表對其他人所造成的影響，還有反過來對你自己的影響
你必須設法趕上自己領域的最新科技，因為如果你等待別人給你機會，就等於是等著自己被淘汰

2016/12/01

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

Balance Sheet 是一家公司在特定時間的資產與負債的snapshot
當一家公司的資產價值超過獲利能力，代表管理階層未妥善利用公司資產；當一家公司的獲利能力超過資產價值，公司就必須採取一些手段，維護競爭優勢；若公司的資產價值與獲利能力差不多，代表公司對資產有做合理的管理與沒有甚麼特殊措施避免競爭
投資人應該對於想要買的股票進行 assets valuation，這樣才能對於該公司能夠有完整的picture，投資人也比較有自信能夠抓出適當的 margin of safety
Asset Valuation 包含了主觀與客觀的衡量方式，如在財務報表中無法呈現公司品牌的價值，這部分就屬於主觀；淨利則是透過公司的收入減去支出所得到的數字，則是屬於客觀。其方法包括收益現值法、重置成本法、現行市價法以及清算價格法等等
研究balance sheet你可以得知：企業花多少資金投資；公司的財務狀況（也就是營運資金）吃緊與否；資本結構的詳細資訊；驗證營收報告的有效性；分析公司收入來源
Book value （帳面價值）是公司之會計紀錄上所記資產的價值，它通常指資產的取得成本減去累積折舊的餘額，並非現金流量，使用不同的折舊方法會有不同的帳面價值。帳面價值只包含形資產，不包含無形資產。實務上，book value 的重要性逐漸式微
帳面價值的缺憾是無法測量公司的創意與革新 (因為此部分屬於無形資產)。帳面價值最管用的是分析那些有龐大且有形的資產的公司，如鋼鐵業者
債券票面價值是指債券票面所列價值，即發行人在到期日必須支付的金額。股票票面價值是指公司發行的股票票面上所載明的金額。當發行價格<票面價值，為折價發行(under par)；發行價格>票面價值，為溢價發行(over par)；當發行價格=票面價值時，是平價發行(at par)
current assets (流動資產) 是指現金或銀行存款、短期投資、應收帳款、應收票據、存貨、預付費用等，具有高度流動性的皆屬於current assets；大樓、設備、不動產等則屬於 fixed assets (固定資產) 。相較於有形資產（只需花錢投資設備），若是靠無形資產所創造出來的營收，受到競爭者的威脅會比較低
股票的流動資產的價值，其遠比book value 重要。其可作為清算價值的約略的指標。當一家公司價格低於清算價值時，本質上是不合邏輯的，其可能是市場判斷、公司管理的政策或股東對公司資產的態度等等所造成
清算價值（Liquidation Value）是指公司撤銷或解散時，資產經過清算後，每一股份所代表的實際價值。在理論上，清算價值等於清算時的帳面價值，但由於公司的大多數資產只以低價售出，再扣除清算費用後，清算價值往往小於帳面價值
當一家公司的股價低於其清算價值(liquidation value)時，不是價格太低，就是公司應該要被清理。對於股民來說，要判斷是不是一個購買點(若該公司可以永續經營勝過破產)；對於公司來說，代表著公司錯誤的政策所導致，經營者應該進行矯正措施
若此檔股票的價格低於清算價值、很清楚沒有浪費公司資產且從過往記錄可以顯示強大的營收能力時，若於此時買進將會是划算的交易，可藉此擴大margin of safety，降低本金損失的風險
清算價值（Liquidation Value）的重要性不高，因為一般公司並沒有清算的打算。儘管公司的清算價值低於股價，仍不建議買進的原因是：(1) 公司的獲利差強人意；(2) 公司並沒有進行清算的打算
挑選股票只是一個單一的動作，但是擁有股票則是一個持續的過程
選股的藝術在於選擇管理良好的企業，濾掉管理不良的企業 。許多企業的管理者都是不稱職且沒有效率的
公司的股價取決營收，然而清算的價值取決所擁有的資產
低股價的原因通常在於營收衰退與不規則的股利政策
股票的賣出是根據其營收與股利政策，不是其現金資產價值，除非這些現金資產在未來很有展望
謹慎的投資人會從資產負債表中，分析公司手上現金是否充裕、流動資產與流動負債的比率是否適當、有沒有即將到期的債務會影響公司財務
一家公司手上應該有多少現金才夠？Graham的建議是，流動資產至少是流動負債的兩倍才夠。另外一個評估財務強度的指標稱之為acid test，其條件是流動資產扣除庫存後，至少要等於流動負債，超過越多越好
分析資產負債表有三個重要的層面：(1) 檢查報表上中的EPS；(2) 確認損失或獲利對於公司財務報表中的影響；(3) 追蹤公司長期的resources 與 earning power 之間的關係
錯誤的價格無法持續太久
證券市場的估價常常是毫無邏輯且錯誤百出的，出價的過程不是自動或是有規劃的產生，完全是群眾的心理，而群眾的心理卻是最難理解的
人們在股市常犯的三個錯誤：誇大 (exaggeration), 過度簡化 (oversimplification) or 疏忽 (neglect)
試著想抓住市場的鐘擺是不可行的，你無法知道高點與低點在何時出現
標準的或大型的公司，其所發行的股票的股價，會針對其獲利數字做快速反應；一些較小型或比較不為人所熟悉的公司，則看市場的專業作手而決定，如果缺乏市場作手的興趣，其股價就會落後其營收表現；若得到市場作手關愛的眼神，則不管其營收表現，股價一樣一飛衝天
不要因為今年配發股利增加，就花更多的錢去追高
預測未來股價不是 security analysis 的工作
依照過去的歷史紀錄來預測未來有幾個問題：(1) 分析的行為本身並不科學，且無法讓你持續成功；(2) 不是個可靠的方法可以讓你在股市賺錢；(3) 理論基礎基於一個有缺陷的邏輯或僅僅是一個假說
Security analysis 與 market analysis 的差異是，security analyst 會透過 margin of safety (安全邊際) 來保護自己。Security analysis 強調為了面對未來可能的動盪，要做好安全邊際。若遭逢重大股災，至少有防護網做一定程度的保護，market analysis 則無此概念，若預測失誤，就只有賠錢的份
Market forecasting 本身是一門藝術，其需要分析師的天賦、判斷力、直覺以及其他人格特質，沒有制式的規則或程序來保證預測成功。
在經濟的領域，具備科學性與完全可靠的預測方法，在邏輯上是不可能的
無論你是在華爾街或其他地方，沒有一個可靠的分析方法讓你容易且快速的賺錢
因為預測明年營收良好而受推薦的股票，有兩個地方要注意：ㄧ、有可能預測失準；二、即使預測正確，有可能現價已經貼現或過度貼現了
無論是那種分析方法或準備工作，成功的交易不是一種暫時與偶然，不然就是一種高度罕見的天賦。所以，大部分的投資人無可避免地都會以失敗收場
Simple businesses with strong franchises can be run by any idiot.

2016/11/30

[Travel] 2016/11

容軒步道

情人湖觀景台

2016/11/10

[Java 8] Optional

Assume I have a List of project:

1
2
3

 OptionalTest.Project(id=1, name=FMS)
 OptionalTest.Project(id=1, name=NSS)
 OptionalTest.Project(id=1, name=DBM)

If we use a non-existing project name to do search, it will throw java.lang.NullPointerException

@Slf4j
public class OptionalTest {

    public static void main(String[] args) {
        OptionalTest test = new OptionalTest();        

        Project test1 = test.getProjectByName("test");
        log.debug("test1 = " + test1.toString());
    }
    

    private Project getProjectByName(String name) {
        return getProjects().stream().filter(p -> p.getName().equals(name)).findAny().orElse(null);
    }
}

Therefore, we need to add if-else statement to stay away from java.lang.NullPointerException

@Slf4j
public class OptionalTest {

    public static void main(String[] args) {
        OptionalTest test = new OptionalTest();
        Project test1 = test.getProjectByName("test");
        if (test1 != null) {
            log.debug("test1 = " + test1.toString());
        } else {
            throw new RuntimeException("無資料");
        }
    }
    
    private Project getProjectByName(String name) {
        return getProjects().stream().filter(p -> p.getName().equals(name)).findAny().orElse(null);
    }
}

Optional is a container object which is used to contain not-null objects. Optional object is used to represent null with absent value. This class has various utility methods to facilitate code to handle values as ‘available’ or ‘not available’ instead of checking null values. It is introduced in Java 8 and is similar to what Optional is in Guava.

For example, it will return Optional instead of Project in getProjectByNameWithOptional method. Owing to using Optional, if you find nothing it will throw java.util.NoSuchElementException: No value present

@Slf4j
public class OptionalTest {

    public static void main(String[] args) {
        OptionalTest test = new OptionalTest();

        Project test2 = test.getProjectByNameWithOptional("test").get();
        log.debug("test2 = " + test2.toString());
    }
    

    private Project getProjectByName(String name) {
        return getProjects().stream().filter(p -> p.getName().equals(name)).findAny().orElse(null);
    }

    private Optional<Project> getProjectByNameWithOptional(String name) {
        Optional<Project> project = Optional.ofNullable(getProjects().stream()
                .filter(p -> p.getName().equals(name)).findAny().orElse(null));
        return project;
    }
}

If you would like use customized error message instead of java.util.NoSuchElementException: No value present, you can do this way:

@Slf4j
public class OptionalTest {

    public static void main(String[] args) {
        OptionalTest test = new OptionalTest();

        Project test2 = test.getProjectByNameWithOptional("test").get();
        log.debug("test2 = " + test2.toString());
    }
    

    private Project getProjectByName(String name) {
        return getProjects().stream().filter(p -> p.getName().equals(name)).findAny().orElse(null);
    }

    private Optional<Project> getProjectByNameWithOptional(String name) {
        Optional<Project> project = Optional.ofNullable(getProjects().stream()
                .filter(p -> p.getName().equals(name)).findAny().orElse(null));
        project.orElseThrow(() -> new RuntimeException("查無資料"));
        return project;
    }
}

Reference
[1] https://docs.oracle.com/javase/8/docs/api/java/util/Optional.html

Total Pageviews