How to transter form Front-end developer to Client-side developer

最近在準備整理該如何教一位 Front-end developer 快速上手成為一位 Android/iOS Developer，以下整理個幾個同事問我的問題：

記憶體管理

但是 objective-c arc/java gc/ swift 雖然看起來差不多(不需要去處理 retain count/ pointer)，但還是有很多最佳實踐方式不同。

看的到，选不到

在web上只要看得到的元素都可以用 selector 找到然後修改，在 native 上卻是要找到相對應的記憶體才可以修改，不管是 xcode 還是 android studio 之類的 IDE 對這方面其實都有很強大的索引功能，只是需要花點時間習慣。

档案碎片化，找不到到你是哪個檔案

一般 web 開發可能全部寫在一個檔案或分成幾個 js 載入，看先後順序就知道能不能用，native 上使用的語言都比起 js 看起來更結構化，如果習慣 AMD 架構的 js 可以更快上手。

HTML/CSS/JS 好像被組合起來了，想要調整樣式找不到位置

native 所提供的 SDK UI 組件可以看做是 web component，不論在 iOS, android 都有提供大多數基礎的 UI 組件，但這些組件也都會和原本系統的 UI 樣式相同，因次該如何 hack 他就會成了你非常常去查詢的問題，大多數原生的組件都有提供非常可靠的客製化功能，遠遠比起自己重寫可靠。

不知道該從哪裡切入？

這問題應該是最常聽到，就如同作事一樣，如果沒有目標，作起事來完全沒效率，關於這點目前是參考 Mozilla 相同的作法，每個版本都會有些小 bug，小如圖片放錯、顏色調整，這類的 bug 就很適合給新手來切入，順便在了解過程中就一併開始看架構，就像寫書法一樣，在開始創作前肯定有臨摹的階段。

環境、環境、環境

web 算是個相對成熟的架構，對前端來說不論你用 nginx, apache, nodejs, python, ruby, go 都可以很方便的幫你起一個 server 來開始工作，甚至只要有瀏覽器就可以馬上開始工作，環境這塊還是建議交給專業的來，請專業的人先幫你配置好，或有文件可以參考來靠自己建立起來，這就依賴時間緊迫程度來變動，簡單還是一句話「讓專業的來」。

專業分工

我認為大多數的前端都是對於畫面有一定程度的美感，對細節體驗有一定程度的要求，尤其是有「圖層」的觀念，從這方面出發我認為陣痛期是最短的，因為你負責的還是 UI 相關的事，底層的事可以讓原本熟悉框架的專業人士來負責，一來有成就感（作完馬上可以看到畫面，別再老是看 Hello world!），二來在前端的追求細節精神可以連貫下去。如果不小心寫出興趣還可以往圖學發展XD

Multiple thread

這就牽涉到語言的特性，需要搞清楚點觀念，只要作過 UI 的都知道，main thread 絕對不要處理任何會卡住的事情，任何 http request, 大量運算處理都要做 async 處理，這道理就像你做一個 web application 但是你絕對不會等到所有東西都載入完成後才出現畫面。



最後我想要說的是，最近身邊、老闆總是在談 native 吃掉 web 這回事，我本身是完全不認同，web 不會消失，市場也不會縮減，目前唯一可以跨平台的方案就是 web ，只是他在手機上的方式還不比在 pc 上成熟，效率上無法跟 native 相比，我認為最大原因就是歷史包袱，ios 只需要考慮在 iphone 的使用狀況，不需要考慮在 android, windows phone, browser 上跑起來的狀況，自然可以效率高許多，就像一把瑞士刀肯定不比菜刀好切菜。

多學一種技能也是挺有趣的，可以讓你有不同觀點來切入一件事情，思考上也可以更靈活，在我看來換個語言、平台都是差不多的，就像你會用中文罵「幹」會用英文罵「Fuck」一樣，沒什麼了不起，熟能生巧罷了。多學一點對自己肯定不會吃虧的，如果真的不知道該從哪種語言、平台開始，就找的自己看順眼喜歡的吧，我相信再過不久前端(Front-end) 就會變為客戶端(Client) 或終端工程師跑出來，把控這與使用者接觸的最後一哩路。

html5 video player full screen issues

這問題被問許多次，就是 iPhone/iPad 上的影片是不是可以不要全畫面播放，這問題其實官方已經寫的很清楚，以下節錄至 Safari developer：

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

Note: Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays inline on iOS 4.0 and later, on all devices.

最後這段重點就是，為了給小畫面最好的瀏覽品質，所以在 iphone 使用 mobile safari 或 webview(APP 中) 會用全畫面播放，而 iPad 因為畫面夠大，所以可以提供使用者/開發者選擇是否全畫面播放。

但是在 App 中還是有例外，因為小畫面無法非全畫面播放這件事情在 iOS SDK 中是一個參數，可以提供給開發者修改，在 webview 可以修改「allowsInlineMediaPlayback」參數，預設 iPhone 設定為「NO」，也就是強制播放影片時都是全畫面播放，如果設定為「YES」就可以在 webview 中直接播放影片，交給開發者自行配置。

相關連接 http://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

iOS AFNetworking error 1005

iOS AFNetworking error 1005

Error Domain=NSURLErrorDomain Code=–1005 “The network connection was lost.”

When you got this message can restart your simulator to solve this problem.

Chrome default font size

Chrome 預設字體大小為 tiny. 也就是不受限制的縮小，但是今天遇到一位中國同事說 Chrome 安裝後預設最小字體大小被設定為 12px

下圖為我的預設環境

IE6,7 calc 解決方案 expressions

過去支援 IE6, 7, 8 在 CSS 上少了 calc 這個好用的功能實在很不方便，今天才知道原來在 IE7 以前的版本其實是有類似的東西可以解決「expressions」

微軟官方已經表示不再支援 expressions，但在 IE7 前還是可以使用 http://msdn.microsoft.com/en-us/library/ie/dn384050(v=vs.85).aspx

使用方式也與 calc 不太相同，在 expressions 寫的是 javascript，官方給的範例如下： <DIV ID="oDiv" STYLE="background-color: #CFCFCF; position: absolute; left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2); top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)"> Example DIV </DIV>

詳細範例可以參考： http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx

相關連結 http://msdn.microsoft.com/en-us/library/ie/dn384050(v=vs.85).aspx http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx

nodejs run coffeescript via javascript

CoffeeScript 一直都是我很愛用的語言，但使用上常常需要先 compile 成 javascript 才可以執行，如果是 F2E 的還好，畢竟在出 build 過程中直接 compile 就可以，但 nodejs 上這樣感覺有點怪，能夠直接跑 coffee 當然是最好，好在 CoffeeScript 1.7 後有了這項功能。

首先必須在專案中安裝 CoffeeScript

npm install coffee-script --save

安裝完後在程式進入點如下，其中 './lib/main' 就是 './lib/main.coffee'，之後的檔案也就直接使用 CoffeeScript 來撰寫就好

require('coffee-script').register();
require('./lib/main');

相關連結
CoffeeScript

Mac OSX Yosemite window close button

Yosemite beta build 裝了以後發現 UI 不少怪問題，但其實都感覺還好，視窗關閉（最左邊紅色）按鈕感覺歪歪的，但實際上放大後卻是正的

平常看的樣子，感覺向左偏了 1px


放大後


感覺應該是圖縮小後因為 pixel 是偶數所以一定要偏一邊，因為圖片太小所以感覺特別嚴重

git show commit user and count

github 上有個很酷的圖表是看到所有人的 commit 數量以及增減多少行 code，相同功能在 git 上也有，如同下方的顯示方式可以很清楚的看到所有 commit 數量以及是誰 commit

1266 Isken ******
139 Kyle ******
3 Randy **

只要使用以下指令就可以叫出上方這列表

git shortlog -sn

其中 shortlog 有以下幾個指令可以使用

usage: git shortlog [] [] [[--] [...]]

-n, --numbered sort output according to the number of commits per author（依照 commit 數量降覓排序）
-s, --summary Suppress commit descriptions, only provides commit count（不顯示 commit 內容，只顯示 commit 數量）
-e, --email Show the email address of each author （顯示 email 來分別不同 user）
-w[] Linewrap output

如果指令改為 -sne 會再加上 email 來判斷為不同人，所以同一個名字可能會出現兩個

git shortlog -sne

1266 Isken ******
216 Isken ******
139 Kyle ******
3 Randy **

如果後面再加上檔案路徑就只會顯示針對這檔案的 commit 數量

資料來源
https://www.kernel.org/pub/software/scm/git/docs/git-shortlog.html

javascript 強轉 boolean，數學運算

一些小小的 javascript 數學運算，第一個是快速的無條件設去的方式，但是用 "~~" 開頭會在 jslint 被擋下，雖然是較為快速，但使用時還是必須考量一下整體的 coding style，下面的是把變數強轉為 boolean，這也是個更快速的方式，但一樣會被 jslint 擋下，斟酌使用。

web 小觀念， id 自動會變為 global 變數

如同標題，只要用加上 id，基本上都可以直接 console.log 出來 dom element，除非你用其他變數覆蓋過去，小觀念。

Javascript URL parsing

這也忘記是從哪來的，沒記錯應該是 stackoverflow.com 上找到（有發現記得告訴我），這是個快速 parsing url 的方式，使用了 html 本身的功能來做 parser，效能上當然不用多說。

Log 變為模糊

此方式可將 inspect 打開後所看到的 log 變模糊，但不是每個瀏覽器都適用，目前測試 Chrome, Safair, Opera 可以正常運作。

Javascript random string

這段真的忘記從哪來的，但相當實用，幫你產出亂碼字串，用的方式相當棒，先直接產生亂數再轉為 36 進位，其中帶入參數為想要產生幾位數的亂數。

禁止使用 iframe 讀取你的頁面

算是個小技巧，幫自己筆記一下，加上這行後別的網站就無法使用 iframe 的方式把你的網站 load 進來。

if (window.location != window.parent.location) window.parent.location = window.location;

iOS7 safari mobile minimal navigation bar

在手機上畫面基本上已經不大，又被討厭的網址列、上一頁、下一頁 等按鈕佔去了上方與下方一部分真的很礙眼，還好 iOS7 有解決了這件事，就是在 head 內的 viewport 加上 minimal-ui，如同下方的方式：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

加入 minimal-ui 前，上方的網址列以及下方的按鈕列都存在


加入 minimal-ui 後，上方的網址列以及下方的按鈕列消失，旨剩下 page title


點擊上方的 page title 後網址列、按鈕列才會出現，中間那塊加上灰色遮照來做區隔

Raspberry pi 一日心得

圖片來源：www.raspberrypi.org


其實早就想買一塊 PI 來玩，但是一直找不到時間（講白點就是懶）所以拖到現在，簡單來說明一下從購買到現在實際玩了一天的心得：

購買
由於台灣想要經由官方購買較為麻煩，畢竟光是郵費以及時間就讓人想打退堂鼓，透過經銷商「e絡盟」購買是一個方式，但是看了「e絡盟台灣個人戶經銷商」的購買方式後還是放棄，但訂單居然是 google doc，我相信這是為了方便處理訂單，也相信每個人都是為人正直，但這種方式對消費者好像沒什麼保障，最後還是放棄，後來開始 google 發現到台灣還是有很多不同的管道可以取得，包含些電子材料行、C2C 網拍都有販賣，最後考量到運費、價格、快速取得等因素夠過網拍取得。

由家中原本就有相當多的 micro usb 線，以及一張用了好幾年的 4GB SD 卡，所以只透過網拍買了 Raspberry PI + 外殼，原本以為這樣就可以開始快快樂樂的使用 Raspberry PI，沒想到問題才剛要開始......orz

安裝
由於官方有提供「NOOBS」來提供快速的安裝系統，只要先把檔案解壓縮後放到記憶卡中，再把電源、記憶卡接上基本上就就會有 GUI 出來讓你選擇要安裝的 OS，但是前面提過了「這張記憶卡只有 4GB」，也就是如果是下載 NOOBS(offline and network install) 版，放入後「Raspbian」也就是建議安裝的版本就沒辦法裝了...但是當你把記憶卡插入開機後已經來不及了，已經被重新格式化過，如果 4gb 還是需要安裝必須在解壓縮進記憶卡後打開 os 資料夾，資料夾名稱就是 OS 的名稱，可以把沒有要用的 OS 直接整個資料夾砍掉，砍了幾個後就會有足夠空間可以安裝 Raspbian，但是都搞定後卻又發生新的問題，由於安裝同時必須完全依賴鍵盤，對於一個整天用 Macbook 的人來說生出一個鍵盤是相當頭大的，所以臨時又去買了一個 USB 鍵盤來應急，這故事告訴我們想要開始玩 Raspberry PI 必須要先準備以下配備較為方便：

1. Raspberry PI
2. micro usb 線一條
3. usb adapter 5v/1.5a+ (非必須，可直接接電腦)
4. 螢幕（Raspberry PI 為 HDMI 接頭，所以螢幕最好也有 HDMI 孔比較方便，不然要再另外買轉接）
5. HDMI 線一條（依照螢幕而定）
6. USB 鍵盤
7. USB 滑鼠（非必須）
8. 網路線 or USB 網路卡

Raspbian
安裝後發生先開始遇到了新的問題，首先是鍵盤，預設為「gk」而台灣一般所使用為「us」配置，所以在打些符號上會略有不同，再來是網路必須要自己配置，就算有用 DHCP 也是要進去設定，如果是 USB 網路卡就必須要設定 SSID 以及密碼（如果有設定），其實還蠻容易的，稍微有點 linux 的基礎很快就可以上手，我也嘗試在上面 build 了 nodejs，build 的過程非常順暢，唯一的問題點就是 build 的很慢 XD，畢竟是 ARM 還是別太強求，後來開始嘗試 build XBMC，在這遇到鐵板了...沒想到我最大的敵人是「4GB 記憶卡」，沒想到 plugin 裝到一半容量就滿了，完全 GG，但是原本想要使用 Raspberry PI 就是希望可以成為家裡的多媒體中心，配合 NAS 來播放多媒體，所以 XBMC 勢必是個必要的東西，可以最快速的把整個環境架設完成，也因次決定重裝 OS，改裝為 build 帶有 XBMC 並優化的版本，這邊選擇了「OpenELEC」。

OpenELEC
安裝起來比起「Raspbian」還要簡單很多，連鍵盤、網路等問題都在安裝流程中解決，整體來說就是快，安裝完後就可以開始順暢的使用，目前測試下來推的動 1080 的影片，並且可以透過 add-on 加入更多功能，再安裝了一個透過 www.hdpfans.com 提供的 add-on，增加了很多內地的電視頻道、BT工廠以及百度雲的 add-on，透過這些 add-on 已經基本能達到想要的內容，但是百度雲速度還是很慢，stream 超級慢，字幕部分可以裝上射手網的 add-on，即時去找字幕下來，所以就差完整的影片來源，這也是目前欠缺的一塊，也是接下來的目標，當然是希望可以變得跟 popcorn time 一樣方便好用。

Raspberry PI 真的很好玩，也讓我開始想起過去玩互動的感覺，經過幾年的軟體經驗，相信現在應該可以做出更穩定的產品，由多媒體中心開始慢慢的開始控制客廳的其他家電，一步一步努力！GO！


相關連結
Raspberry PI
NOOBS
Raspbian
XBMC
www.hdpfans.com
popcorn time
e絡盟
OpenELEC
nodejs

git hooks deploy (nodejs)

deploy(部屬) 是個 production 的必經階段，該怎樣做的方便又穩定是個重要的關鍵，先來談談一般 web server deploy (以 nodejs 為例，這邊暫時不談 server side 架構)

(假設使用 bitbucket host git repo)

1. 把 local source code push (本地端原碼推到) bitbucket
2. ssh 連到 web server
3. git pull 想要的版本
4. npm install（更新 package）
5. restart node process (重起線程)

以上的步驟看起來其實也不難，ssh 連到 web server 的步驟也可以使用 key 的方式來減少輸入密碼步驟，進入後需要進行的東做也不是很難，但總是要問自己一下 "還能不能更好？"，立馬想到先前使用些 saas 的經驗，如 heroku, openshift, nodejitsu ... 等，使用方式非常簡單，只需要把 code push 上 saas server，就自動可以跑起來，這種感覺真的太棒了！以 heroku 為例，會要求你在原本的 local repo 加入一個 remote 的位置(如下)，之後想要 deploy 只要 `git push heroku master` 就可以丟上 heroku 並自動重起。

git add remote heroku GIT_REPO_URL

想要自己實作這段就必須使用 git hooks，以 bitbucket 為例(下圖)，可在 repo 設定收到 push 後要執行哪些指令，bitbucket 很貼心的與很多不同的 service 合作，讓 hooks 更方便(一般常見的 git host 都有實作，不論是 github, gitlab...等都有)。


這段收到 push 後必須執行哪些指令的行為就是 git hooks 的 post-receive，收到 push 後想要執行哪些指令，pust-receive 為 bash script，所以可以方變得跟各種 cmd 整合，基本上可以將最上面的步驟 3, 4, 5 整合，pull 想要的版本、更新package、重起 node process，但還是缺少了最重要的東西，git 要 push 到哪？

首先建立一個 git repo 並且使用 bare



接著更新 $HOME/deploy.git/hooks/post-receive（範例中使用 forever 來管理 node process，亦可使用 nodeman, pm2 等來管理）


最後就是在開發的 repo 中加入 remote 路徑，ssh user, ip 就與 ssh 登入是相同的

git remote add production SSH_USER@SSH_IP:~/deploy.git

完成後 deploy 就與 heroku, nodejitsu, openshift 一樣只要下指令就自動完成 deploy 所有流程（更新最新版 source code，更新 node package，重啟 nodejs process）

git push production master

相關連結
heroku
openshift
nodejitsu
bitbucket
github
gitlab
git hooks
forever
nodeman
pm2

nvm on ubuntu issue Syntax error: "(" unexpected (expecting ";;")

這幾天在處理 git hook 來 deploy 的問題卻一直遇到下面這段錯誤訊息

.nvm/nvm.sh: 502: .nvm/nvm.sh: Syntax error: "(" unexpected (expecting ";;")

查到後來才發現原來 ubuntu 6.10 起把預設的 bash shell 改為 dash shell，所以當你使用 /bin/sh 同時其實是使用 dash，要把 shell 改回 bash 使用以下指令：

sudo dpkg-reconfigure dash

輸入後會跳出以下畫面，選擇 no 就會把 shell 改為 bash

get ubuntu version

Get ubuntu version

lsb_release -a

ubuntu install phantomjs

先前在 ubuntu 上安裝 phantomjs 屢屢失敗，第一次安裝立馬使用 "apt-get" 搜尋，找到後就很放心的安裝，沒想到裝完後還是沒辦法正常使用，後來去 phantom 官方找，官方也提供了一套安裝方式，但還是有問題，還好我有個好朋友叫 google

下面這段 script 的 3-7 行其實是在反安裝 phantomjs 從 apt-get 的版本， 9-15 行為重新安裝 phantomjs 並設定位置，17 行為確認目前 phantom 版本、安裝狀況


其中特別要注意的就是 phantomjs 以及 ubuntu 的版本，必須依照所需來調整

32-bit： phantomjs-1.9.0-linux-i686.tar.bz2
64-bit： phantomjs-1.9.0-linux-x86_64.tar.bz2

CantOS install mongodb

Step1. 修改 yum 設定

vi /etc/yum.repos.d/mongodb.repo

如果是 64

[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=1

如果是 x86

[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/i686/
gpgcheck=0
enabled=1

Step2. 安裝 mongoDB

yum install mongo-10gen mongo-10gen-server

如果是特別需要安裝某個版本可以在安裝的package後面加上版本號

yum install mongo-10gen-2.2.3 mongo-10gen-server-2.2.3

Step3. 改 yum 設定

/etc/yum.conf

加上

exclude=mongo-10gen,mongo-10gen-server

到這邊已經完成安裝，mongo 預設的 config 會設定在 /var/log/mongo/mongod.log，如果要啟動或停止 mongo 可以直接下指令

service mongod start | stop | restart

如果要使用特定的 config 啟動 mongodb 指令為

mongod -f
// sample: mongod -f /etc/mongod.conf

相關連結
MongoDB 官方網站

centos yum install Cannot find a valid baseurl for repo: base

CentOS 在從 yum install 同時收到以下這段錯誤訊息

Loaded plugins: fastestmirror, refresh-packagekit, security
Loading mirror speeds from cached hostfile
Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch=x86_64&repo=os error was
14: PYCURL ERROR 6 - "Couldn't resolve host 'mirrorlist.centos.org'"
Error: Cannot find a valid baseurl for repo: base

可以使用以下方式解決
Step1. 修改 "vi /etc/resolv.conf"

Step2. 加上 google 的 nameserver

# OpenDNS
nameserver 208.67.222.222
nameserver 208.67.220.220

# GoogleDNS
nameserver 8.8.8.8
nameserver 8.8.4.4

相關連結
https://www.centos.org/forums/viewtopic.php?t=8892

Youtube api

Youtube 是個很棒的串流影音服務，也開放初完整的 API 提供開發者使用，在這邊唯一要幫自己筆記的一件事就是，找出影片的內容

首先是下面這影片，關鍵就是紅色 highlight 出來那段，這 11 碼就是影片的 id

http://www.youtube.com/watch?v=lAM3p_rp78Q

如果是要用 iframe 嵌入 html 中使用方式如下，也可以從上連結中找到"分享"找出

<iframe width="560" height="315" src="//www.youtube.com/embed/lAM3p_rp78Q" frameborder="0" allowfullscreen></iframe>

如果使用 GET 來送 http request 到下面這連結就可以看到完整的影片資訊

http://gdata.youtube.com/feeds/api/videos/8mKivE8WqI4?v=2&alt=jsonc

相關連結
Youtube
Youtube Docs