一些平鋪直敘技術相關文: 2016

2016年11月11日星期五

處理 Safari 無法播放 video mp4 的一些問題

最近開始覺得 Safari 大概是未來的 IE。

在使用 HTML5 的 video 播放影片時，遇到兩種影片播不出來的情況。

情況一

較少人會遇到，就是尚未更新成最新的 OS 作業系統，(我的情況是作業系統 OS X EI Capitan, safari版本: 9.0.2)，很不巧的我是用自己 server 的 https，當你的 SSL 憑證不是可以信任的，safari 無法載入 mp4，解法是什麼，就只好把 https 改成 http 了。

這個問題找好久，而且還要找到一台尚未更新 OS 的 Mac 來測真的很有困難。參考: http://stackoverflow.com/questions/25709713/safari-will-not-play-mp4-over-https, Cannot view Quicktime movies over HTTPS in Safari or UIWebView

另外新版的 OS 沒有這個問題，即便我是 https，像我更新到 sierra 就沒有這個問題。

情況二

是針對 iphone 上用 safari 看 video 會出現播放鍵，而且還不會自動播放。
這個問題，要從 2 個方向著手:

1. 請先處理掉播放鍵的顯示，處理的意思就是隱藏。用 css 把 video 標籤的 video::-webkit-media-controls-start-playback-button 隱藏起來，如:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

可以參考: displaying html5 video in ios without play button overlay

2. 自動播放的問題比較麻煩，但是 IOS 10 有辦法，至於 10 以下的就很難說。
video 標籤的自動播放，要加上 autoplay 屬性，若你要針對 ios 10 的 safari，請你再加上 playsinline 的屬性。如:

<video loop muted autoplay playsinline>
   <source src="01.mp4" type="video/mp4">
</video>

注意， autoplay 跟 playinline 這兩個屬性一定要同時擁有，才會在 safari 自動播放! 這個部分你可以參考:

(1) IOS 10 支援 playinline 所以直接使用沒關係: New <video> Policies for iOS

(2) 但是 ios 10 以下的，可能要靠 javascript 套件來處理: https://github.com/bfred-it/iphone-inline-video (網路上看到有人推薦的，但我自己是沒有試過)

至於較舊版本的 safari，如果沒有特別想要處理，就記得放 poster 屬性在 video 上，如果影片播不出來，至少也別讓它看起來是空的。

情況一的問題讓我頭痛很久，有時候要注意，當你 google 不到這些問題的時候，可能真的不是大部分的人會遇到的問題，無奈，https 錯了嗎 QQ

2016年11月1日星期二

[工作筆記] 原來 IE 不支援 SVG 的 animation...

參考: [SVG animation is not working on IE11] http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11

因為今天在處理一個 svg 的動畫發現在 IE 跑不出來，原本以為是因為使用 stroke-dasharray 跟 stroke-dashoffset... ，結果得到的解答是只有 Edge 會支援 SVG 的 Transition 跟 animation。簡單來說目前沒有特別方便快速的解法，網路上的解法建議是轉用 svg 的 library 像是 GreenSock 。

連我都還沒使用到 Edge 的人了，直接放棄在 IE 上的效果，結案。不過依舊要寫兩份樣式，先偵測瀏覽器是否為 IE，在 <body> 上 append 一個新的 css class，再用 .ie something, 跟 .not-ie something.. 類似的方式去做替換 SVG 的方案。

2016年10月19日星期三

更新 macOS Sierra 之後 compass 指令不見

昨天更新 macOS Sierra 之後，執行 compass 出現 Operation not permitted - /usr/bin/compass，後來找到了一個方式，就是先切換成 root，再安裝:

sudo su

sudo gem install -n /usr/local/bin compass

不過要小心，在你更新完作業系統的之後，也請你先更新 xcode，再來處理這些 compass 路徑的問題。xcode 的安裝試試在 cli 執行 xcode-select --install，或是打開你的 App Store 找到他，然後更新，再來處理 compass 的安裝。

若這個解法不適合你，或者你是使用 homebrew 在安裝的話，你可以參考: Compass install fails on OS X 10.11 due to new rootless mode #2018。祝你也順利 :)

2016年10月17日星期一

[工作筆記] git filemode 設定，避免檔案權限不同而進 git status

最近工作常常在 windows 跟 Mac, Linux 上切換來切換去，發現在 Mac 掛磁碟機近來的 Repo 莫名其妙都進 git status 變成需要 diff 的檔案，明明也沒修改什麼，也有可能是因為用 afp 掛進來的，然後我也完全忘記有檔案權限這件事情，還好同事英明，快速指出原因。

要讓 git 忽略這個問題，只要設定 git 的 filemode 就行:

git config core.fileMode false

若想要設定成全域，加上 --global 就可以。

參考:

How do I make Git ignore file mode (chmod) changes?

git tips: 设置filemode，避免NTFS文件权限变更引起的修改

git关于文件权限修改引起的冲突及忽略文件权限的办法

2016年10月16日星期日

Chrome 開發人員工具 console 的一些快速選擇的用法

開發工具一直都是前端人員的求生工具之一，相信大家在使用瀏覽器 Debug 時通常也都會開啟 F12 的開發人員工具，最近我從書上學到一些快速 & 覺得實用的 selector (也許是老掉牙的知識了?!)，紀錄一下:

(1) $0 選取目前被鎖定的元素
假如你已經在頁面上選擇某個元素了，那可以直接利用 $0 去選擇到你選到的 DOM。另外若你有載入 jQuery 的話，就可以直接利用 $($0) (或是 jQuery($0))去操作它。

其實 $( ) 代表的是 document.getElementById，但如果你裝的 library 也有 $( ) 這個 function，就會被你裝的 library 給取代。不過還好用 jQuery 感覺是沒差。

利用選取工具，去選擇你要的 DOM。

直接使用 $0:

而且 chrome 會記錄歷程，假設你選取過四個不同的 element，可以利用 $0, $1, $2, $3，而 $0 是拿最近一次選取的元素，最多，記錄到 $4 這樣。

如果是想要用 CSS 選取元素，可以用 $$()，相當於 document.querySelectAll()。比方說取得所有的 img，可以用 $$(img)。

(2) $x('XPATH') 使用 XPath 選到符合的元素
使用 $x() 這個函示可以直接把 XPath 的值當作 selector，首先你可以在選取的 selector 按下右鍵，複製 XPath，或是你知道規則，也就不需要複製。

接著利用 $x( ) 將 XPath 當作 selector 進行 Query:

(3) $0 拿最近一次計算的值的結果

除了這些還有 clear() 可以清除 console 的內容。
dir({key: value})，dir ( ) 函示可以放入一個 object，會以可以展開的形式呈現。
table(object)，以 table 的形式列出資料，這個功能我超愛，看起來很有新鮮感 :

Firefox 也有哦

若你有興趣知道更多，其實官方文件都有，建議可以去看看 :) 會有挖到寶的感覺

2016年10月14日星期五

轉址 301 與 302 的不同

剛開始在買這個 domain 的時候，其實 winwu.cc 以及 www.winwu.cc 都可以連到，問題是我希望搜尋引擎以 www.winwu.cc 為主要的網址，那麼，沒有 www 這個 domain 或是利用其他 domain 時，我要把 user 導到 www.winwu.cc，這時候要選擇哪一種轉址呢?!

2016年10月13日星期四

Compass 編譯的 Warning: DEPRECATION WARNING on line ..._deprecated-support.scss:

在跑 Gulp Compass 編譯 scss 時，一直出現這個 Warning 讓我覺得很焦躁，雖然是可以不管他。

詳細的錯誤訊息是:

DEPRECATION WARNING on line 92 of 
XXXX/compass/css3/_deprecated-support.scss: #{}
interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

unquote('"$ie6-"#{$legacy-support-for-ie6} 
"$ie7-"#{$legacy-support-for-ie7} "$ie8-"#{$legacy-support-for-ie8}')

You can use the sass-convert command to automatically fix most cases.

然後我找到了一個 github 上 issue 的解法，請尋找 mrpatricko 的回答，方法是要我們去修改你的那隻 _deorecated-support.scss，第 87 行，當然你也要對照一下是不是那一行，然後把那幾行利用雙引號刮起來，原本的單引號再變成雙引號。

建議是先備份一支起來，再做修改，以免改錯，不知如何還原.. 。改這種 source 我總覺得怕怕的，但很成功的 warning 被趕走了 :)

結論: 不過就是要改一行 scss 而已，花了好久把環境備好..

2016年10月8日星期六

九月份

今年的九月份說起來也蠻忙的，我在 Women Who Code Taipei 講了四次的基礎前端講座，若您有興趣也可以看看這些投影片，但是精華部分比較少，這四次的上課走法講求希望讓來參與課程的同學可以實作，所以投影片內容都不多，上課時話比較多。有些投影片若內容不完整，我也是透過口頭說明，可能是剛好有一兩週比較忙 QQ

第一週
第二週
第三週
第四週

您也可以持續關注 Women Who Code Taipei 的活動，http://www.meetup.com/Women-Who-Code-Taipei/events。四周短短加起來不到10小時上課時數，不過有些同學也是很認真的交作業，很不簡單 :) 當初我也有點掙扎四周可以講些什麼內容 XD

---

九月份還有另外一個比較重大的變化就是離職，我換了一家新公司，新的開始，很希望可以待上個 3 年以上。離開的那家公司有很多不捨，總而言之，雖然今年有很多不順心的事，但也只能往前看了，很久沒有經歷過這種人生低潮期，(上一次是高中時期)，希望會越來越好...

2016年9月26日星期一

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

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

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

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

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

2016年8月30日星期二

八月份

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

2016年7月28日星期四

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)。

2016年7月26日星期二

TypeScript 的 tsconfig.json 簡介

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

2016年7月25日星期一

TypeScript 簡介

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

2016年7月21日星期四

調整 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) 的檔案...)

2016年7月19日星期二

Angular 2 404 traceur not found

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

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

2016年7月18日星期一

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.

2016年7月17日星期日

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

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

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

2016年7月8日星期五

用 google spreadsheets 幫你翻譯文字

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

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

2016年7月3日星期日

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

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

2016年6月21日星期二

React Native Redux 學習筆記

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

2016年6月20日星期一

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>

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

2016年6月19日星期日

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

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

2016年6月16日星期四

看眼科記

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

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

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

2016年6月15日星期三

Vue Instance Lifecycle Hooks 實例生命週期

一個簡單的 sample，主要我是在看整個 vue 的生命週期，對 vue 有些瞭解了。

var vm = new Vue({
  el: '#app',
  data: {
    name: 'winwu',
    width: 900,
    height: 500,
    barColor: 'red',
    barHeight: 30,
    barXOffset: 10,
    dataset: [30, 20, 45, 12, 21]
  },
  // https://vuejs.org/api/#Options-Lifecycle-Hooks
  init: function() {
    // init 這時候還沒有觀察到 data observation, event, watcher...
    console.log('init: my name is ' + this.name);
  },
  created: function() {
    /* data observation,
     * computed properties,
     * methods,
     * watch/event callbacks.
     * 在這個階段完成
     * 但，$el 這時候還沒有好，(DOM 的解析還沒開始)
     */
    console.log('creadted: my name is ' + this.name);
  },
  beforeCompile: function() {
    // 我也不曉得什麼時候會呼叫到這裡
    console.log('beforeCompile: my name is ' + this.name);
  },
  compiled: function() {
    console.log('compiled: my name is ' + this.name);
  },
  ready: function() {
    // 在 vm.$el 插入 DOM 時呼叫。
    console.log('ready: my name is ' + this.name);
  },
  attached: function() {
    console.log('attached');
  },
  beforeDestroy: function() {
    // 我也不曉得什麼時候會呼叫到這裡
    console.log('beforeDestroy');
  },
  destroyed : function() {
    console.log('destroyed: my name is ' + this.name);
  }
});

// call destroy, 才會觸發 destroyed func. 這時候長條圖已經不會隨著 data 連動
vm.$destroy();

// 第一個參數為是否 remove，若為 true，所有 DOM 的關聯會刪掉。
// vm.$destroy(true);

這是 log 結果:

init: my name is undefined
01.js:29 creadted: my name is winwu
01.js:33 beforeCompile: my name is winwu
01.js:36 compiled: my name is winwu
01.js:43 attached
01.js:40 ready: my name is winwu
01.js:46 beforeDestroy
01.js:49 destroyed: my name is winwu// vm.$destroy(true);

我放在 jsbin 上面，可能比較好讀:

JS Bin on jsbin.com
jsbin: http://jsbin.com/mibiya/1/edit?html,js,console,output
參考官方文件: https://vuejs.org/api/#Options-Lifecycle-Hooks

使用 Vue-cli 快速建立 Vue 專案樣板

Vue 官方提供了一個 vue-cli 工具可以快速建立 vue 的專案，首先你需要以下:

Node.js 環境
Npm

2016年6月12日星期日

Vue.js 改變分隔符的符號 Change Custom Delimiters

在使用 vue.js 重構舊有的專案時，發現 {{ variable }} 這樣的 expression 竟然怎麼樣都不顯示在畫面上，原來是因為我的 view 是 hbs (handlebarsjs) (因為是 express 的專案...)，所以這 {{ }} 這個分隔符號會先被 handlebarsjs 吃掉，以至於我的變數反而沒被 vue 辨識。

2016年6月9日星期四

Vue.js 學習資源

我堅持今天一定要寫點什麼東西 (別問我在堅持什麼 XD)，所以先來談談 vue.js 這個 Library (暫時我還不知道，該定義它是 Library 還是 Framework，就目前的感覺，我覺得較像 Library )。

2016年6月6日星期一

React Native: CameraRoll.getPhotos(tag, success, error) is deprecated. Use the returned Promise instead

在實作 <React Native 學習手冊> 第六章時，有個 cameraRoll 的功能，cameraRoll 很白話了吧?! 就跟相片有關係的 component，其中用 getPhotos 可以取得相簿的照片。

React Native 取得地理位置 navigator.geolocation 得到 location request timed out

我的測試手機是 samsung edge plus 6.
使用 react native 版本為: ^0.26.1
在抓取 location 一直拿不到，反而一直出現 error "location request timed out".

2016年6月5日星期日

Vue.js select 下拉選單示範

這裡是示範一個下拉選單，其中的關係包含被選擇的項目，以及關聯的下一層選單。簡單練習而已，一定還是有更好的寫法。

2016年6月4日星期六

Vue.js v-on:click get target Example ( click 事件取得自己 )

在重構工作上的一段小程式，轉而使用 Vue 寫一點小功能。

2016年6月2日星期四

讀《使用者故事對照》與生活閒聊

其實我要講的有一半是來自於使用者故事對照這本書的讀書心得。上週，有次小主管帶我去聽演講 (Epoch-MIT ILP 專題演講)，其中一場是 PicCollage founder John Fan 為主講人，他就問台下觀眾，什麼是 MVP，當時還聽的不是很清楚，回家也有忘了。接著週末，我就拿起這本書開始讀，結果我發現 User Story Mapping 提到 MVP 還有一些 Lean Startup，與我那天聽到演講的內容很有相關性。

MVP 也就是 "Minimum Viable Product" 最小可行產品。

為什麼需要 MVP 呢?! 我在猜想某部分原因是因為當我們在策劃一個解決問題的產品的時候，大部分情況是我們在“猜想”使用者會遇到什麼問題，所以當我們想出了一個 solution 時，(也許我們要想非常多個 solution)，我們要做出一個 MVP 跟使用者互動，驗證我們是不是在對的方向，也用來驗證我們的猜測是不是越來越接近需求。所以會一直維持一種循環『build->measure->learn』 (看圖片) 不斷的試驗，不斷的學習，這樣的 iteration (循環)，能夠越快越好，能夠越接近使用者的想要的產品，iteration 也不要太久，差不多一次的 sprint 衝刺時間約兩周，這樣一個月可以 iteration 兩次（sprint 的週期主要還是看公司的步調是什麼狀況...）。

實現想法不急著產出設計稿
其實 wireframe 我研究不多，但那天聽演講覺得要點就幾個:

討論快速
修改也快速
去除任何顏色，單純線稿，單色色塊表現 (因為顏色會影響判斷能力，也會增加很多考慮易用性的變因)

User Story Mapping
這些列的是我看書的學習心得 :P, 也許對看文章的你沒什麼很直接的幫助，我建議你可以直接買書，會比較好理解，因為有些細節要搭配照片看比較了解。或是看 YouTube，這裡有這本書的作者的演講: User Story Mapping with Jeff Patton

Story Mapping 幫助開發時聚焦在 user 跟使用經驗上，促成更好的流程(討論出來的)。
故事對照 Mapping 是很容易的一件事情，基本上我們只需要準備便利貼(如果你不嫌貴的話，公司又願意花錢買便利貼...)，由左而右的排序，寫下整個使用者在使用產品的故事。而細節是沿著每個步驟的下面，往下貼，也就是水平排序為故事的流程，而垂直的便利貼，表示該流程的一些細節。(看 slides) ，一個人也可以練習如何 User Story Mapping，基本上你可以把你某一天的早上所做的所有的事情透過便利貼描述出來，這是一種練習方式，書本某一章節有提到如何練習~
『分享文件不是分享共識. p.XXX』這句話還慢令人有所感觸的 XD，為什麼呢？！因為寫 spec 的人跟看 spec 的人可能認知不同，如果沒有確認大家對於這份文件所講的某件事情有相同的認知，那麼 spec 跟實際做出的東西可能會有很大的落差。即便大家都在 spec 上面簽了名... 也不代表大家想的是同一種預期的結果。
呈上點，個人結論是: spec 別寫得太完美... XD (其實我以前是開發完才補文件.... )
當在敘述故事的時候，所有的對話記錄，寫在白板上，貼在牆壁上的便利貼所有討論，過程照片，都可以任何形式記錄下來，如拍照等等，因為重要的不是被寫下來的文字，而是你看這些記錄可以讓你想起什麼討論的細節。
千萬要記住，User Story 絕對不能代表需求，而是利用文字, 圖像，透過大家共同討論, 述說故事，建立大家對 User Story 的共識。
大故事可拆解成好幾個小故事。(我覺得這樣做的好處也適合拿來拆成要製作的功能，但感覺又不能這麼工程師一面的想法... )
『在探索深度之前，先聚焦於使用者故事的寬度』 p.12，這句話的意思是，討論得很 high 的時候不要一直往細節討論，要拉回來照顧一下整體的 story 以及繼續往後面的 story 前進，書上的說法叫做"整體圖像"，討論細節之前請先以達到故事尾端為重，『思考寬度一英里，思考深度一英寸』 (我好喜歡這句話 :P)
Ron Jeffries 的三個 C: Card, Conversation, Confirmation
http://ronjeffries.com/xprog/articles/expcardconversationconfirmation/
魚缸協同合作模式 (人多未必好辦事)，這模式挺有趣的，意思就是，有興趣的人就加入對話，沒興趣的就離開魚缸的範圍 (其實是類似在一個房間界定魚缸的範圍)，如果你的團隊有人開會時表現的興趣缺缺，滑手機之類的症頭....==。類似的文章: https://blog.itcilo.org/2009/02/16/facilitate-a-fishbowl-discussion/
基本上想做的事情，跟擁有的時間，有很大的落差。但 User Story 會談到很多細節，可以拉出一條線，在線以上叫做 in，線下叫做 out，in 表示在某個階段之內可以先完成的，也許是一些必要的功能，out 則是暫時先不做，不代表捨棄那個流程的 detail. 可能在這個流程上會有一些便利貼會被移動 XD (感覺很像在走 scrum)
我也好想玩玩看但我公司應該沒有這種 project 可以玩這種流程 QQ

有興趣的話建議買書來看看吧! 要不是這本書，我真的沒聽過 User Story Mapping.

關於 User Story Mapping 你也可以參考:

如果有寫錯什麼內容，還麻煩留言指正指正，謝謝!
若有問題，或是有任何不妥的文字，歡迎來信 yiyingwu.1990小老鼠gmail[.]com

2016年5月30日星期一

Angular Smart-table 的 st-search not working in IE, Firefox

Angular 的 Smart-Table 的 st-search
我照個官方範例做一個 <select st-search="xxx">

但在 chrome 正常，而 IE, firefox 無法正常 filter 這個 st-search 的條件。

在網路上找很久發現有人多加了 st-input-event, st-delay
<select st-search="XXXX" st-input-event="change" st-delay="0">
結果還真的 work 了...

angular templateUrl 位置

app.directive('XXXXXX', function(){

  return {

    templateUrl: location.protocol+ '//'

                  + window.location.host

                  + window.location.pathname

                  + 'js/XXX/XXXXXX.html',

just Example.
因為換了一台主機發現 website 目錄被動過再深入一層 folder，結果寫死的 url 就會有問題，只好那種方式來判斷，拿到一定ok 的 Template Url。

2016年5月29日星期日

Epson Smart Canvas 拉拉熊手錶不專業開箱文

前幾天在新聞看到拉拉熊的手錶，(其實我也不管他是什麼手錶，總之看到超喜歡...，而且我還因為這隻手錶捨棄田馥甄代言的星辰錶...，現在那隻錶送給我媽媽了 :P)

立刻 google 看看台灣能不能買，結果發現 pchome24H, yahoo 都有在賣了，但因為習慣在 pchome 買東西，訂價台幣5490，所以一衝動就... (從不同通路買可能會有不同的贈品，但是手錶, 錶帶價位都是一樣的)

24H 到貨超快速，現在在 phhome 買還送一個馬克杯 (雖然我沒有很喜歡...)
另外加購錶帶，可以延長保固一年哦!

但因為官網實在太難找到加保一年的登入點到底在哪裡..
所以這裡放了傳送門，如果你也有加購錶帶的話，請往這裡(要先去 Epson 官網註冊會員): https://www.epson.com.tw/epson/mbrclub/ismember.asp?event=SCSPE1606
(這個表單，要填的資訊蠻多的，填完之後要列印，連同購買證明例如發票等等，寄到活動的地址去)。或是你從活動網站上看 http://www.i-direct.com.tw/demo/Smart%20Canvas/#

盒子打開後，有說明書，保證書等等。放心是中文ＸＤ

主要要注意的就是，手錶雖然有基本的防潑水，但不要拿去有蒸氣的地方，例如拿他去泡三溫暖....。

外面的一個殼...

整體看下來只有一個缺點: 電池無法自己更換，若沒電就只能寄回原廠處理了。(看說明書的意思應該是這樣沒錯...)。另外雖然叫 smart 但是沒有特別 smart 的功能，對我這種長依賴 3C 的人來說，他就是一隻....電子錶...

大概是這樣。若你有興趣
(1) 活動網站 http://www.i-direct.com.tw/demo/Smart%20Canvas/#
(2) 產品手冊下載 http://www.epson.com.tw/SportHealthSensingApplication/W2-RK10110/Drivers-Support

其實日本的 Epson 出的 smart canvas 有很多種...只是台灣有進的很少，不然我好想買星際大戰... 大概是這樣拉。因為這隻手錶讓我又關注 Epson 起來了，我對他的印象一直停留在還在讀國小時，當時很需要的...印表機... XD。

2016年5月26日星期四

React Native 的 android 上的 Debug JS Remotely...

在 android 模擬器上面，我找個『Debug JS Remotely』找超久...
官網只說要找一個 menu button... 但我的找不到...
誰可以跟我說在這個畫面上哪一個叫做 menu button...

後來 stackoverflow 發現靠指令: adb shell input keyevent 82
也能叫出這個 menu buttons, 真是太好了 (淚奔!)

如果你在按下 Debug JS Remotely 之後出現紅背景，建議重啟動,跑 avd 以及 react-native run-android.。

(但我的紅背景是因為 geolocation 權限還沒有加上去 XD)

參考
Intro to Debugging React Native (iOS and Android) (蠻推薦)
cmd : react-native run-android on every file change

2016年5月25日星期三

成長駭客常用工具箱

在范冰寫的這本成長駭客，列舉了一些成長駭客的工具箱，覺得還不錯，紀錄一下:

1. Google Analytics
2. Mixpanel (https://mixpanel.com/)
3. kissmetrics (https://www.kissmetrics.com/)
4. Usercycle (https://leanstack.com/usercycle/)
5. customer.io (https://customer.io/)
6. optimizely (https://www.optimizely.com/)
7. basecamp (https://basecamp.com/https://basecamp.com/)
8. 友盟 (https://www.umeng.com/)

這本書蠻不錯的，推薦!

2016年5月24日星期二

React Native 的 Image 以及觸控

閱讀資訊:
以下文章常會見到 "RN" 字樣，我用來代表 React Native。
此文撰寫時，React Native 的版本為 0.26。
其實我也主要是在讀官方文件而已 XD 
這篇文章寫的部分你可以對應到 <歐萊禮 React Native 學習手冊> 的第四章。

樣式

React Native 偏好重複使用有樣式的元件，而非重複使用樣式。p.48 <歐萊禮 React Native 學習手冊 - 使用 JavaScript 打造原生 App.>

RN 的程式不能跟 React 用在 web 的共用。記得 RN 是 “Learning once, write anywhere”。
RN 的 componet “樣式 (StyleSheet)” 並沒有繼承的概念，除了樣式要寫在樣式物件 (StyleSheet) 之外，你可以把有樣式的元件包起來。

Image

在 RN 引入圖片並不像 web 使用 img 標籤，而是使用 `<Image>`，另外屬性也不是 web img 的 src，而是 source。
ex: 引入 local 圖片: <Image source={require('./my-icon.png')}></Image>
ex: 引入外部圖片:

<Image
      source={{ uri: 'http://xxx.xx.xx/xx.png'}}
      style={{width: xx, height xx}}></Image>

引入外面的圖片需要指定寬高。
引入外部的圖片需指定 uri。
require 指定的路徑，會跟看 Javascript module 的方式一樣 (就先當作是...相對路徑)
可針對平台載入同名的檔案，只要在圖檔命名上加入 platform。

  my-icon.ios.png
  my-icon.android.png

針對不同的螢幕 densities，你可能會有 @2x, @3x, 等其他的後綴檔名圖片，可以這樣擺放:

// 假設這是一個 todo 的 component 資料夾
todo
  ├── todo.js
  └── img
      ├── check@2x.png
      └── check@3x.png

然而在 todo.js 裡面的 Image 可以這樣引入 check 這個圖片

<Image source={require('./img/check.png')} />

假若是 iphone5s 則會用到 check@2x (React Native 會知道要用 @2x，你無須擔心這個...，只要把 source 檔名寫好)，但在 Nexus 5 會用到 @3x，若沒有適合的圖片，RN 會選最接近的來用。
使用 windows 作業系統的人，假如你加入圖片到 project 下，可能需要重啟。

Image 的優點:

可同時使用在 ios, android 上。
Component self-contained. 圖片跟著 component. 跟 js code 放在同一層。
沒有 global namespace 的問題。
加圖片或是換圖片無須重新編譯，只要重新整理模擬器。

官方建議，在 require 裡面的值，應該要是 statically 的，請看官方的範例:

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD，把整個 require 的部分抽出來，放到 icon 變數下存取。
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

Local Filesystem Image 本地端圖片檔案

這個本機我想指的並不是你的電腦啦，應該是實際在 run 的那隻手機上裡面的圖片。這個部分可以看 CameraRoll 就有範例可以知道如何取得 local resource.

觸控介面

RN 提供 TouchableHighlight 元件, 以及 PanResponder, Gesture Responder System 兩個低階 API.
任何可以被處碰的 component 應該都要有 TouchableHighlight 包裝者(wrapper)。舉例來說，button 是可以被點按的地方，所以用一個 TouchableHighlight 把這個 Button 包起來。
TouchableHighlight 監聽 onPress 事件 (也有其他事件啦...，要看文件才知)，然後你把要 callback 的 function 寫好，等著發生時觸發相對應的動作。
PanResponder 比 Gesture Responder System 還要高階。
PanResponder 提供抽象。

TouchableHighlight 範例
如希望監聽某 Image 的 touch 事件 (範例改自官網): 要注意 TouchableHighlight 只能包覆一個子component 摟!

<TouchableHighlight onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('image!myButton')}
      />
</TouchableHighlight>

Gesture Responder System

手機上觸控的行為非常複雜，當然不只有觸碰而已，也有可能多點觸碰或其他 (scrolling, sliding on a widget, or tapping)。而手勢回應就跟 Gesture Responder System 有關。(在官網可看到 Gesture Responder 的詳細)
Gesture Responder 是處理特定觸碰事件的 View。要成為一個 Gesture Responder 的 View 有幾個一定要填寫的屬性:
(1) View.props.onStartShouldSetResponder: (evt) => true
(2) View.props.onMoveShouldSetResponder: (evt) => true
假如其中一個回傳 true (view 會嘗試 (attempts) 成為一個 responder)，以下兩個事件也會發生其中一個 (要嘛接受或是拒絕，會發生其中一個):
(3) View.props.onResponderGrant: (evt) => {}
(4) View.props.onResponderReject: (evt) => {}

其實也不只這些，後頭還有很多種 Handlers 可以用。但簡單來說整個 Gesture 的生命週期是: 開始 -> 移動 -> 釋放。所以你會很常看到 handlers 的名稱含有 start, release, move...等字樣。

Gesture Responder 具有冒泡事件的特性，如果要覆寫這些行為，可在父元件將
View.props.onStartShouldSetResponder, View.props.onMoveShouldSetResponder 回傳 true。

觸控事件發生之後，相關的 handlers 也會被呼叫。被呼叫的時候會接收 evt (nativeEvent) 參數，有很多屬性值可以取得，如觸碰的 ID，觸碰元素的 x,y 軸座標，時間... 等等。

參考自官方文件:

identifier - The ID of the touch
locationX - The X position of the touch, relative to the element
locationY - The Y position of the touch, relative to the element
pageX - The X position of the touch, relative to the root element
pageY - The Y position of the touch, relative to the root element
target - The node id of the element receiving the touch event
timestamp - A time identifier for the touch, useful for velocity calculation
touches - Array of all current touches on the screen
(source from: https://facebook.github.io/react-native/docs/gesture-responder-
system.html#content)

PanResponder
PanResponder 提供比較高階的 api 處理單點與多點觸控，也能存取原始的事件 (nativeEvent)。他的用法主要是透過 gestureState 可以得到一些你可能有需要的資訊:

stateID (只要螢幕上有至少一個碰觸)
moveX, moveY (最近一次觸碰移動的螢幕座標)
x0, y0
dx (從碰觸開始累計手勢的距離)
dy
vx (目前手勢的向量)
vy
numberActiveTouches (螢幕上碰觸的數量)

用法: 建立一個 PanResponder 的物件，你要準備一些 callback function。然後在 render 的方法中使用他。

componentWillMount: function() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => this._handlePanResponder,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {},
      onPanResponderMove: (evt, gestureState) => {},
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {},
      onPanResponderTerminate: (evt, gestureState) => {},
      onShouldBlockNativeResponder: (evt, gestureState) => {},
    });
  },

  render: function() {
    return (
      <View {...this._panResponder.panHandlers} />
    );
  },

結語

提供一般元件的觸碰回應，使用 TouchableHighlight。
自訂觸碰介面或是較複雜的應用如遊戲類，使用 PanResponder, Gesture Responder System。

參考

React Native 如何跑在 android 實機上測試 (Draft...)

主要參考 : https://facebook.github.io/react-native/docs/running-on-device-android.html#content

注意: 這裡不介紹 android 需要哪些環境及安裝，假設你環境都已ok，且在本機的模擬器也跑得起來。

若有開模擬器，可先關掉 avd。
手機要 enable USB Debugging。 (無法教你，看個人手機設定如何，請 google)
把你的手機插上電腦。
使用 adb devices 指令確認電腦知道這個 Physical device。
重新 run 一次 react-native run-android。
若出現紅色畫面，有出現 Reload JS 就按按看。
還有問題的話嘗試執行 adb reverse tcp:8081 tcp:8081，再按一次 Reload JS。

其他好文

React Native for Android 入门老虎
[教學] React Native for Android - 1：基礎

React Native: In next release empty section headers will be rendered... 訊息

完整訊息:

In this release you can use 'enableEmptySections' flag to render empty section headers.

在 ListView 加上 enableEmptySections={true} 的屬性，忽略這個 warning.

參考:
https://facebook.github.io/react-native/docs/listview.html
https://github.com/FaridSafi/react-native-gifted-listview/issues/39

2016年5月23日星期一

React Native 學習手冊讀書筆記之第三章

註: 書本資訊: 歐萊禮 React Native 學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一譯

以下文章常會見到 RN 字樣，我用來代表 React Native。

照著官方網站安裝 RN 的開發環境，假如你是利用 homebrew 你可能會走以下流程: (我只大概 brief 一下而已，請以官方文件為主。)

你也可以參考我的另外一篇文章 http://winwu.github.io/react-native-note/2016/04/25/native-02/，撰寫於 2016/4，如果你看這篇文章已經離這個日子有點久了，那就不要看了 XD 因為我並沒有把握 RN 多久更新一次安裝的方法之類的...。

brew install node
brew install watchman
brew install flow

//optional start (可執行可不執行，看你自己)
brew update
brew upgrade
//optional end


// 安裝 recat native 的 commandLine 指令工具
npm install  -g react-native-cli

// 接下開始依照你要開發的平台安裝不同開發環境
// ios 相依或是 android 相依

總體來說，如果你是 mac 電腦， ios 的環境較簡單，android 比較複雜，倘若你也尚未接觸過一些 app 開發的 know how 的話，環境也許會耗掉你蠻多時間的 (<- 苦逼過來人 Orz)。

React Native 套件會用到 node 跟 watchman，如果這兩個套件有帶給你什麼麻煩，請你重新更新這些 package 的相依性試試看。
flow 是 Facebook 檢查型別的函式庫。

利用 React Native Cli 建立新的應用程式

這是一個會需要等一下的指令...

react-native init FirstProj

這是目錄:

.
├── android
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
└── package.json

而 index.ios.js, index.android.js 是程式的進入點。

探索範例程式

ios 專案可用 xcode 開啟，有支 AppDelegate.m 的檔案可以詳讀。
看到 RTC 開頭的類別，即代表 React Native 的類別。
jsCodeLocation 則是未來要部署到實體裝飾可能會修改的設定。(詳細在註解看得到)
有個 moduleName (例: moduleName:@"FirstProj") 的設定在未來也有機會改到他。
moduleName 會對應到一個同名的 React 元件，開啟 index.ios.js 會看到一個登記頂層 component 的設定:
```
AppRegistry.registerComponent('FirstProj', () => FirstProj);
```

意思是暴露 FirstProj 讓 AppDelegate 可以使用它。其實你也不太會去修改這項設定。

而 Android 則要看 MainActivity.java (如果你有 android studio 可以開來看一下)。登記進入點的地方為 `mReactRootView.startReactApplication(mReactInstanceManager, "FirstProj", null)`。

RN 的 Import

// index.ios.js
  7 import React, { Component } from 'react';
  8 import {
  9   AppRegistry,
 10   StyleSheet,
 11   Text,
 12   View
 13 } from 'react-native';

RN 要求你必須明確的 import 每個你會用到的組件，最常用的為 StyleSheet, Text, View 等等。
RN 沒有 <div> 這種標籤，通常我們會用 <View>, <Text> 類似於 <div>, <span>。

這章節有個實作小練習，貼心提醒:

使用 http://openweathermap.org/ 的 API 請先註冊，註冊後請找到你的 APP ID，這很重要，以防你跟著範例卻要不到資料 (一般來說你會拿到 401 的錯誤碼)，因為你 fetch 發出去的 api 沒有權限。
拿到 APP ID 後把 APPID 的參數加到 fetch 的 url 後綴，如: http://api.openweathermap.org/data/2.5/ .....&APPID=YOURAPPID

有個地方教你如何加入圖片檔案，但如果新的 xcode，位置在此:

(不過這個方法我試了沒有成功，最後我是把圖片放在根目錄 img 底下，用相對路徑去拿)

2016年5月22日星期日

React Native 學習手冊讀書筆記之第二章

書本資訊: 歐萊禮 React Native 學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一譯。如果你有興趣讀一讀請多購買書籍。這本書寫得不錯!

以下文章常會見到 RN 字樣，我用來代表 React Native。

第二章主要說明 RN 的運作方式，不會寫的太難，但我會試圖把一些中文翻譯改用英文寫筆記，例如假如我寫到 "元件"，可能有時候會用 "Component" 表達。

說真的，用 JavaScript 來寫 Mobile App 我真的覺得很怪...

理解 RN 的底層技術，第一件要先想到 React 的功能之 ~ Virtual DOM.
Virtual DOM: 沒有 virtual DOM 的時候，以前的 DOM 的渲染與更新是一個成本很高的步驟，大量的 DOM 甚至會造成效能的影響，簡單一句話就是『js 很快但 DOM 很慢』，相較於此，React 使用記憶體版本的 DOM，計算必要的改變，只顯示有需要改變的 DOM。

這背後的演算法到底是如何我其實也不是很懂... (另外什麼叫做記憶體版本... 我也不是很懂，若有人知道方便留言一下嗎 >< 我目前是猜在記憶體算一算在 render 出來)

Virtual DOM 三步驟:
狀態改變 -> 計算差異(diff) -> 重新顯示有差異的 DOM。

因為 Virtaul DOM 在效能上帶來好處，這也就是為什麼它很厲害的原因吧。
你可以參考這些文章，或是自己 google，Virtual DOM 出來好一陣子了，現在文章應該很多:

RN 會呼叫 Objective-C, Java 的 API 來顯示 UI 元件 (element)。RN 會把對應的標籤(元件)，轉換為符合平台的元件，所以像是 <View> 這個標籤在 ios 上會被轉為 <UIView>。

React Native currently supports iOS and Android. Because of the abstraction layer provided by the Virtual DOM, React Native could target other platforms, too—some‐ one just needs to write the bridge. - Learning React Native p.9

意思就是，RN 支援 ios/android, 而且抽象層是 Virtual DOM, 因此 RN 也可以針對其他平台，只要有人寫出那個 Bridge(橋接) 來。

顯示的生命週期

RN 的顯示生命週期跟 React 大部分相同，唯一的不同在於顯示的部分需要橋接 (你就當作 bridge)，轉譯 JavaScript 並呼叫平台底層的 UI 元件。

在 React Native 中使用 Component

RN 使用的 component 跟 React 不同，大部分元件都有特定的元件名稱，少數必須針對不同平台，如 NavigatorIOS。
平台專屬的元件名稱有特定命名規則 (主要是放在後綴)，如 XXXXAndroid, XXIOS。
你可以參考 UIExplorer，裡面有各種 component 應用的 UI 樣子 (https://github.com/facebook/react-native/tree/master/Examples/UIExplorer)，clone 下來跑跑看...。
以 NavigatorIOS 來說，很顯然它不能在 Android 上使用，還好顯示用的元件是可以根據平台做替換的，你也可以指定平台專用的元件，例如 nav.ios.js 以及 nav.android.js。

關於 JXS

jsx 重視分離關注高於分離技術。 page 10.

(在 React 剛開始時，大多數的人對於把 HTML/CSS/JavaScript 寫在一起感到疑惑...(me, too...)，甚至有的人是因為不喜歡 html 夾雜在 JavaScript)。

RN 因為是在一個沒有瀏覽器的世界中。(要注意有些東西不存在於 RN 中，如 <div>)。
RN 的 .js 其實實際上可以說是 JSX 檔案。(開發 React Native 是一定會用到 jsx 的)。
RN 中撰寫 CSS 需要使用物件樣式來表示，只是用 Object 來表示，久而久之會習慣啦!，有些 CSS 的設定會受到限制，你不是在寫 web，主要的 CSS 佈局會以 Flexbox 為主。但是有些連著的單字需要以小駝峰式命名法（lower camel case）表示 (第一個單字以小寫字母開始；第二個單字的首字母大寫)，例如在 web 上的 css 背景顏色會用 background-color，但在 RN 的 CSS 表達則要轉換為 backgroundColor，其他的也是，會變成 fontSize, marginBottom, textAlign...。

React Native 學習手冊讀書筆記之第一章

書本資訊: 歐萊禮 React Native 學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一譯

以下文章常會見到 RN 字樣，我用來代表 React Native。

React Native 是什麼?

基於 JavaScript 撰寫真正的行動應用程式。
而 React Native 為 Facebook 開發出來的一套 JavaScript 函式庫，用來同時開發 Android 以及 IOS。它以 JavaScript 以及 JXS 混合撰寫，然後 RN 在底層以 Objective-C 或 Java 幫你橋接原生 API 的呼叫。
目前已經使用 RN 用來打造行動應用的有:

Facebook
Palantir
TaskRabbit

RN 的優點

過去 Web 應用程式使用 HTML/CSS/JavaScript 來作出手機應用，模擬很多在手機上的 UI，但還是無法做到存取原生平台的 UI 元素。雖然模擬這些原生的 UI 沒有什麼不對，但動畫等細節非常耗時 (工程師的開發時間)，而且容易過時。

而 RN 可以:

RN 利用標籤幫你轉換成真正的原生 UI 元件。 (這裡指的標籤不是 HTML 標籤，而是一些 (盡量) 符合原生 UI 的標籤名稱)。
RN 的工作與主要的 UI 元素執行緒分離。
RN 的更新週期與 React 的運作方式相同 (props, state 改變的話，RN 也會重新更新畫面)。
除錯可以直接使用瀏覽器的除錯工具。 (如: `Chrome Debugger`)。
RN 的開發環境對一般 Web 開發者還蠻友善的。並不需要 (強迫) 你使用 xcode 或 Android Studio.
(有點重要) RN 對產品發佈有方便之處。 Apple 允許透過無線載入 JavaScript 基礎的應用程式行為修改 (<- sorry, 我也不知道這是什麼意思)，方便的意思就是有了這個優點你不需要經過額外的審查。

或許可參考看看:

https://facebook.github.io/react-native/docs/upgrading.html
https://github.com/aerofs/react-native-auto-updater
为什么说用react native 写的app，可以不通过appstore 更新？

RN 的缺點

不是所有的程式都可以共用 for IOS/Android. 特定平台需要的功能需要額外撰寫 Java/objective-C。 (但大部分的程式是可共用的。以 Faceboook Ads Manager app 來說，android/ios 共用的程式可達 87%)
還太年幼，RN 目前最大的風險是成熟度，文件, 功能的支援還在改善中。

這本書我期待已久，因為之前看了一本雷書...
關於其他的 React Native 筆記，你可以參考看看我的 React Native 學習之旅。 http://winwu.github.io/react-native-note/ ，或是期待我惰性未發的下一篇....

2016年5月19日星期四

《俗女養成記》我最近很喜歡的一本書

一個多月前在書店曾經被這本書的封面吸引，但是當時沒有79折，暫時作罷，後來上週去有打折，立馬出手。

書中其實都是一個段落一個段落閒聊南部小孩的日常，與家人的互動，家裡中藥房的事情。大概是因為我也是南部的小孩，有些台語看到真的是心有戚戚焉，超娛樂的一本書，邊看著，也會勾起小時候我跟外公的一些回憶，只能說因為有太多共鳴，總是可以讓我在睡前嘻嘻哈哈的，所以覺得很喜歡。 :) 如果想要放鬆一下，暫時放下手邊的工具書，看看這類輕鬆讀物～

Ref:
中藥行女兒的生活藥方──江鵝《俗女養成記》 (本人長得也是很可愛!~)

2016年5月18日星期三

React Native 學習之旅

因為 blogger 有點難排版，就懶得把文章搬過來了，以下是不負責任之筆記文:
但暫時不會有任何新文章，因為我被調去做奇怪的專案了，就沒時間研究 RN...

第九卷 - 自己常用的 Snippet 05/02

第八卷 - React Native 除錯 Debug 05/02

第七卷 - Fetch 簡介以及 React Native 之 Fetch 的練習 05/02

第六卷 - React.createClass 跟 extends Component 的差別 04/27

第五卷 (附錄) - NavigatorIOS 範例 code 04/26

第五卷 - Navigator 04/26

第四卷 - 跟著官方 Toturial 做一遍 (勿入，草稿階段) 04/26

第三卷 - Sublime 套件 04/26

第二卷 - 環境以及快速開始 04/25

第一卷 - 環境 04/25

2016年5月17日星期二

2016 中正大學 weic.tw - RWD 響應式網頁設計

這是上週六，去 weic.tw 講的 talk，因為跟現在的學生也不是很熟，所以決定講的比較基礎，較能 for 更多來自不同科系的學生，但我相信台下還是有能力很好的學生 :)。

週五晚飛奔南下，住在學校的宿舍。

第三位講者乙芳

鐵哥壓軸，每次聽鐵哥演講都覺得他氣度非凡!

第二位講者 Howard 講 Elm，挺有意思的，"函數式編程"!!，我對這種 language 真的完全不熟...，有時間我會瞭解一下...

這趟去我也學了不少，也是我第一次去中正大學走走，很感謝主辦學生們的用心！

BTW，學習 RWD 我個人推薦看一下這本書，歐萊禮出版的響應式網頁設計學習手冊，但我認為看這本書你能夠觀看的時機分兩次，一次是你初學，沒有做過任何 RWD 專案，大概只了解 RWD 約略 20-40% 的熟悉度，另一次是你實戰過 RWD 2-4 次之後再來看。我自己並不覺得它是初學者在看的書，起碼你用過 HTML/CSS/JavaScript，雖然他 overall 講到一些觀念跟方法，但...實作才有感覺摟! 等你實戰過後再來看他，會覺得醍醐灌頂! 雖然他已經出版幾年了，有些 tool 可能現在算是過時，不過觀念上，依舊。

製作 RWD 這類的網站，有個辛苦的點在於，它其實沒有標準，也就是說，只有等你遇過的專案種類越來越多，你才會慢慢挖掘到各種不一樣的技巧，未必單純是 Media Query, 還是 JavaScript，有些是設定，像是 meta 的 viewport，或是一些專門給手機瀏覽器讀的 meta tag 等等。

我現在也很難整理出個脈絡，只能說 RWD 對我而言是經驗至上，我很少聽到有人會說自己很會 RWD，因為真的 by case 而有不同的 RWD 解法。一時想到，murmur 而已。

2016年5月16日星期一

Github 利用 Issue Template 統一開 issue 的內容格式

記得這是在好幾週前發生的事情。有一次在 fb 看到我朋友放一個開 issue 的 link，點開來看那個 issue 的內容都有預設的格式，什麼時候有這麼神奇的功能(我已經這麼落伍了嗎 QQ)，原來叫做 issue template，而且好像 redmine 也有這樣的功能 (stackoverflow 相關問題)，但不管 redmine....，我沒在用 redmine XD，來看看如何在 github 設定你的 issue template 吧！步驟都非常的簡單:

(step1)首先在你的 repo 底下你要建立一個新目錄，叫做 .github

mkdir .github && cd .github

(1) .github 這個目錄並不是必要 (畢竟太多東西放在根目錄下還蠻混亂的)，而是如果你希望把這些設定的檔案放在一起的話，推薦遵循放到這個 .github 的資料夾。

(2) 另外你也可以把以下檔案都放到 .github 下:

CONTRIBUTING.md
ISSUE_TEMPLATE.md
PULL_REQUEST_TEMPLATE.md

(step2)新增一個檔案，檔名為 ISSUE_TEMPLATE.md

touch ISSUE_TEMPLATE.md

md 是用 markdown 來表示，內容就隨意編排摟 :P，若你真的不知道怎麼寫可以從這裡找到參考: http://issuetemplate.com/#/ 。

我大概簡單寫得粗糙的版本:

(step3) 提交你的 issue_template
在本機做的事情都不算數哦，記得 commit。
接著你在 create issue 的時候就會看到你的 template 了:

你若有興趣，歡迎看看 githun 在 2016/2/18 發的這篇文章: Issue and Pull Request templates。另外發 Pull Request 也可以有 template 哦，檔名就是 PULL_REQUEST_TEMPLATE.md。請多加利用 template 幫助簡化口頭說明流程 XD (但團隊如果有人根本不會用 git 那就另當別論了)

Chrome 測試 Media Query 的 print 樣式

每次在測列印樣式，總不可能都按一次『檔案』 -> 『列印』，這樣太浪費時間了。

開啟 F12 開發人員工具，然後選擇三個圓點的按鈕，在『More tools』 -> 『Rendering Settings』。

在 Rendering Setting 勾選 Emulate Media 為 print。請注意如果你根本沒有針對 print 寫 Media Query，畫面應該是不會有變化的，你可以找個銀行的網站來參考試看看。有無勾選後的差別。

React Native 學習資源

React Native 中文社區
React-Native学习技术的三部曲
react-native-guide React Native指南汇集了各类react-native学习资源、开源App和组件
react native生命周期，与ListView和TouchableElement组件
React-Native 组件练习-购物app侧滑菜单
React Native资料
谈谈 React Native
Building a Store Locator With React Native
React Native 中 ScrollView 性能探究
探索react native首屏渲染最佳实践
React Native Part 1: Build Configuration with Travis

Laravel 利用 orderByRaw 針對欄位順序排序

Laravel 的 orderBy 雖然可以多個下來 order, 但感覺這樣的 order 也只是以字串的開頭排序，而我要的是根據裡面是否有符合我要的字串，若有則依照欄位不同排序

如:
假設搜尋 class 跟 teacher 這兩個欄位有 "明" 這個字，但是所有的搜尋結果，要以 class 優先排序，再出現 teacher 的結果。

類似:


return $result

    ->orderByRaw('CASE WHEN `class ` LIKE \'%' . $query['query'] . '%\' THEN 0 ELSE 1 END ASC, id DESC')

    ->paginate($pageNumber);

參考:
http://stackoverflow.com/questions/6243678/specific-ordering-sql-command
Order by using multiple columns and manually array field in Laravel? By Itsolutionstuff
Laravel 5 orderByRaw 绑定参数问题
http://stackoverflow.com/questions/4798000/mysql-order-by-keyword-match

訂閱：文章 (Atom)

2016年11月11日 星期五

2016年11月1日 星期二

2016年10月19日 星期三

2016年10月17日 星期一

2016年10月16日 星期日

2016年10月14日 星期五

2016年10月13日 星期四

2016年10月8日 星期六

2016年9月26日 星期一

2016年8月30日 星期二

2016年7月28日 星期四

2016年7月26日 星期二

2016年7月25日 星期一

2016年7月21日 星期四

2016年7月19日 星期二

2016年7月18日 星期一

2016年7月17日 星期日

2016年7月8日 星期五

2016年7月3日 星期日

2016年6月21日 星期二

2016年6月20日 星期一

2016年6月19日 星期日

2016年6月16日 星期四

2016年6月15日 星期三

2016年6月12日 星期日

2016年6月9日 星期四

2016年6月6日 星期一

2016年6月5日 星期日

2016年6月4日 星期六

2016年6月2日 星期四

2016年5月30日 星期一

2016年5月29日 星期日

2016年5月26日 星期四

2016年5月25日 星期三

2016年5月24日 星期二

2016年5月23日 星期一

2016年5月22日 星期日

2016年5月19日 星期四

2016年5月18日 星期三

2016年5月17日 星期二

2016年5月16日 星期一

2016年11月11日星期五

2016年11月1日星期二

2016年10月19日星期三

2016年10月17日星期一

2016年10月16日星期日

2016年10月14日星期五

2016年10月13日星期四

2016年10月8日星期六

2016年9月26日星期一

2016年8月30日星期二

2016年7月28日星期四

2016年7月26日星期二

2016年7月25日星期一

2016年7月21日星期四

2016年7月19日星期二

2016年7月18日星期一

2016年7月17日星期日

2016年7月8日星期五

2016年7月3日星期日

2016年6月21日星期二

2016年6月20日星期一

2016年6月19日星期日

2016年6月16日星期四

2016年6月15日星期三

2016年6月12日星期日

2016年6月9日星期四

2016年6月6日星期一

2016年6月5日星期日

2016年6月4日星期六

2016年6月2日星期四

2016年5月30日星期一

2016年5月29日星期日

2016年5月26日星期四

2016年5月25日星期三

2016年5月24日星期二

2016年5月23日星期一

2016年5月22日星期日

2016年5月19日星期四

2016年5月18日星期三

2016年5月17日星期二

2016年5月16日星期一