讓 git 將大小寫檔名修正視為不同的檔案

修改資料夾大小寫時，發現只修改大小寫沒有被視為 change 過的檔案
(這樣就沒辦法 commit 呀 !!)

將 git 的這個設定打開: git config core.ignorecase false

可以讓 git 將大小寫修正視為不同的檔案，這樣 git status 就會看到變化，進而可以正常 commit.


(久久沒發文竟然是因為這種小問題... QQ)

八月份

讀《30歲前，你一定要去小公司》

TIL - 文章筆記 看了一篇線性回歸的文章

http://adit.io/posts/2016-03-13-Logistic-Regression.html

這篇作者寫的線性回歸，涵蓋 Ng 在 Coursera 上的 ML 第三章的內容。
線性回歸是一個分類的演算法。

線性回歸說起來是還蠻簡單的:

1. 準備你的資料
2. 把資料灑到圖上 (graph)
3. 然後畫一條線 (應該會有最適合的.. 看題目是什麼...)，可以把灑在圖上的資料做個切分 這條線叫做 Dicision Boundary.

---

* g (...) 也稱為 sigmoid function，我們用這個 function 來約束預測的結果，使結果只會介於 0 ~ 1，單位是百分比值，如結果是 .95 則預測結果是 95%。
* Dicision boundary 是一條可以把你的資料區分成兩塊 (也就是分類) 的線。
* 如果你需要非線性分類，選擇類神經網路或是 support vector machines (SVM)。

TypeScript 的 tsconfig.json 簡介

tsconfig.json 是 TypeScript 編譯時看的編譯設定檔案，能幫助你指定編譯的 TypeScript 檔案，輸出目錄等工作事項，像我在使用 Atom 編輯器時，若你的資料夾裡面有 .ts 檔案，而且你也有裝 IDE 針對 TypeScript 的一些 package，他會幫你掃掃看有無 tsconfig.json，若沒有會給你提示訊息。

TypeScript 簡介

TypeScript 是一個 JavaScript 型別化的超集 (“typed superset”)，講『超集』兩字，要是沒有 google 我自己也都無法理解...，這裡有百度的解釋，若用那個網址的解釋圖來理解第一句話，大概是這個樣子: (BTW 我真的很認真在校正這一段，如果有畫錯請告訴我 QQ，我個人以前念書的時候就很沒自信看什麼子集, 超集...)

調整 Angular 2 編譯自動產生的 .js .map 檔路徑

最近照 Angular 2 的 Tutorial 做了一個 Heroes Dashboard，通常建立好 TypeScript 的檔案之後，會自行編譯出相對應的 .map 以及 .js。

這麼多檔案一同擠在 app 目錄下實在很崩潰，所以打算做個調整，把不是 TypeScript 的檔案都移到其他地方去，讓 app 保持在真正開發用的程式區域。

後來我才發現原來 systemjs.config.js 已經有提示我把 map 的 app 設定改為 dist 了。這個 dist 的資料夾表示輸出 .js .map 的資料夾路徑，你也可以換成你要的路徑。

1. 首先把 system.js.config.js 的 var map = { app: 'dist', ... 約略第八行的設定改為 'dist' (原為 app)
2. 在你的目錄下建立一個 dist 資料夾
3. 修改 tsconfig.json，在 compilerOptions 新增一個 outDir 的 key，值為 dist.  (你的輸出的資料夾目錄)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  }
}

處理完之後，記得重新 npm start.
這樣子 app 底下就會乾淨一點了... (另外 app 原本產生出來的 .map, .js 要自己刪掉哦! 也別不小心刪到 TypeScript (.ts) 的檔案...)

Angular 2 404 traceur not found

討論參考: stackoverflow: Angular 2 - 404 traceur not found

剛起步就遇到這個鳥問題，原因很白痴，就是我把 .ts 的檔名打成 .js 了，基本上只要 node 版本跟 npm 版本都符合要求，照理說 npm i  整個全新的 angular 2 toturial  的教學應該是正常的，如果你也遇到這個 traceur 的問題，也請先試著檢查是否哪裡有 key 錯字。

Set up gulp-eslint to check JavaScript by Git pre-commit hook (using pre-commit package.)

我其實.. 也不知道當初為什麼要用英文寫，而且寫得蠻爛的，但我自己看得懂啦，應該是早上上班寫 code 很急，我也不想花太多時間整理了...

If we can't control other developers, but we can control some commit rule for other developer. that's why i want to use pre-commit, it can help to check other developer code convention.

By Using gulp-eslint and pre-commit.
Because my project is fully frontend project. so... i use gulp-eslint replace with eslint.

Step summary:
1. install gulp-eslint
2. install pre-commit
3. create you eslint config file, there are serveral format for eslint config file, you can go here.

一些去上自動測試與 TDD 實務開發的心得

在文章開始之前，先提供一下一些背景 context:
* 課程資訊: Skilltree 自動測試與 TDD 實務開發(使用C#) 第六梯
* 授課講師: 91哥  可參考 91 敏捷開發之路  30 天快速上手 TDD


感覺我好像很久沒有寫技術文了，因為七月前三週週末都在上 TDD，就算是週日，也在寫作業，複習 91 哥教的一些 Lab，只能說，這三週過得太精實了，如果看到我太久沒發文，一定就是有什麼作業要交，課程要上，或是交了男朋友了...

用 google spreadsheets 幫你翻譯文字

最近剛好有個需求要整理專案上的多國語系的名詞，因為多人協作，所以一開始在整理時我自己是採用 google 的 excel 來處理，大致上如下:

但因為要手動翻譯其他語系，打字實在很麻煩，以我來說，大概只有英文是比較知道如何下手的，但日文跟簡體中文呢？一直去找 google translate 也挺麻煩的，還好 google spreadsheets 有現成的函式可以幫我做到，看到這個功能眼淚都要掉出來了，因為當我有上百個字詞要翻譯的時候，根本不可能這麼“人工”，就算透過翻譯出來的英文沒有很準確，但至少我可以只挑我要修改的去修正就行。

考取 70-480 Programming in HTML5 with JavaScript and CSS3 證照

微軟的這張 70-480 證照，考得正是前端工程師的必備技能，也就是 HTML, CSS, JavaScript 三種科目的混合考。因為證照在今年 (2016) 七月中過後要漲價，我也是不經意地看到這個消息，就想說去考考看了。

React Native Redux 學習筆記

其實朋友們可以跳過這篇文章，我寫得很碎片式，只是寫給我自己看的。(如果有寫錯的地方 也麻煩留個言給我 導正我一下，目前，我還沒試出一個簡單架構出來...，也許 最近會開始嘗試吧，資料太多，暫時無法一次到位)
[粗人見解] 學習 redux 我建議去上網找一個簡單的 sample，跟著做。

Vue 用 porps 把父層的資料傳給 child component

just an example，

HTML:

<!--準備 CardComponent 的 Template-->
<script type="x-template" id="cards-tmp">
  <div id="cards-tmp">
    <div class="card" v-for="card in cards">
      <h2>{{ card.title }}</h2>
      <p>{{ card.description }}</p>
      <a href="#" v-on:click.prevent="openModal(card.id)">read more</a>
  </div>
</script>
  
<div id="app">
  <h1>Vue App Example</h1>
  <div>
    <card-comp :cards="cardOriginal"></card-comp>  
  </div>
</div> 

JS

// make an component
var cardComponent = Vue.extend({
  // 指定是哪個 Element
  template: '#cards-tmp',
  // what props you want to accept.
  props: ['cards'],
  methods: {
    openModal: function(id){
      alert(id);
    }
  }
});

new Vue({
    el: '#app',
    components: {
      // register name is card-comp
      'card-comp': cardComponent
    },
    data: {
      cardOriginal: [
        {
          id: 123,
          title: 'Hello Vue',
          description: 'Good Morning!'
        },
        {
          id: 123,
          title: 'Hello Vue',
          description: 'Good Morning!'
        }
      ]
    }
  
});

jsbin:
JS Bin on jsbin.com

參考:
https://github.com/vuejs/vue/issues/1987

Vue Avatar 解決了我覺得大頭照那個位置一直很空洞的問題

Avatar 是大頭照的意思。其實之前在用 PHP 就發現有類似的 package (以 Laravel 來說，就有像是 laravolt/avatar)，可以爬出一段使用者的名稱，回傳文字的簡寫。然後隨意找找還真的讓我找到 vue 也有好心的開發者作出產出 avatar 的 component。

Git Repo Demo 連結: https://eliep.github.io/vue-avatar/
Git Repo: https://github.com/eliep/vue-avatar

不過我還是用 ES5 的方式在使用，步驟如同官方說明。

載入 vue 以及 vue avater 的 js 檔案

<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/vue-avatar.min.js"></script>

除了基本的載入 vue-avatar.min.js 之外，還要在 vue 初始化一個 instance 的地方加上 components 的設定，例如:

new Vue({
  el: '#app',
  components: {
    'avatar': Avatar.Avatar
  },
  // 來一點示範的資料
  data: {
    username1: 'Win.Wu 吳穎穎',
    username2: 'YIYING WU',
    username: "hello world",
  },
  ....

在 HTML 的地方:

<avatar :username="username1" :size="40"></avatar>
<avatar :username="username2" :size="40"></avatar>
<avatar :username="username" :size="40"></avatar>

結果:

<avatar> 這個 component 還有很多 attr/props 可以用，設定方式都在 git pages 上，如果你有想要客製化什麼部分，請從文件上找找吧。

只是做一般需要 member 登入的 website，就算是透過臉書也有可能是使用者沒有大頭照的情況，為了不讓那個位置空著，或是放個什麼奇怪的 icon，也許這是一種方式 :P

(我純粹是自己很喜歡而已 :))

看眼科記

最近一直覺得看東西容易失焦，會酸，用力瞇一下還會流眼淚。
今天就去東區諾貝爾眼科診所掛號，給醫生檢查一下，還好只是乾眼症，眼睛疲勞 (這對工程師來說，很難避免吧 Orz) 再加上我最近又很常看書，可能真的有用眼過勞。

Anyway 檢查一下比較心安，希望大家用心工作之後，也要多注意自己的健康，我最近是很走養生路線，下班盡量不看程式，而且我還刷了一年的健身房...

最後還是要撈叨一下，
公司不是自己的，但身體是自己的。
Scrum 是假的，但瀑布是真的。
不能改變別人是困難的，但改變自己的是可能的。
(硬要來一段這種詭異的結尾 XD)