Ubuntu 架設 Jenkins 紀錄

一個多月前我有在 digitalOcean 買了最小號的雲端空間，有架了一下 Jenkins，不過也忘得差不多了，紀錄一下沿途遇到的重點，這不是一篇很有價值的文章... 只是我自己的雜記而已。

• 裝 apache (https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkins+on+Ubuntu)
• 裝 Jenkins
• sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'
• sudo apt-get update
• sudo apt-get install jenkins
• 設定 apache proxy
• sudo aptitude install apache2
• sudo a2enmod proxy
• sudo a2enmod proxy_http
• 記得要 service apache2 restart  重啟 apache

• 幫 Jenkins 換 Port，可以參考這篇，主要是要把 HTTP_PORT 改成你要的 port，修改 apache 的 virtualHost。
• sudo a2ensite jenkins
• Reloading web server apache2
• service apache2 reload
• Starting Jenkins Continuous Integration Server jenkins
• /etc/init.d/jenkins start

[ PHP 也有 Day ] Laravel 開發小型專案經驗分享

12/18，我在 PHP 也有 Day 講了這場 Talk。大概的方向是使用 Laravel 的 Blade，跟過去開發小型專案的分享。一直很忙，本來想要好好記錄一下自己說了什麼，不過後來放棄了... 我的熱情已被工作磨的差不多了 T_T

Blade 比較沒有什麼特別的技巧，就是熟，把他弄熟...習慣它，不過因為我平常都是用 Jade Template，用法跟 Blade 很像，所以就是也挺上手的，那天忘記說，如果不習慣 Blade，可以改用 twig 也是不錯的選擇。

至於專案經驗，或許有點過於 case by case，但就是給大家參考參考摟...，我是盡量濃縮到大部分的人在開發上會做的功能有哪些，可能遇到的問題，大概點一下方向。

Model 跟 Controller 在這次分享比較少提及，也許是我也不是很熟拉，不知道能怎麼講，所以就著重在 View 的分享。

不過這次比較抱歉的是沒有提及前端的測試，不過前端的測試是另一門學問了，如果真的想要深入，也能要另闢新的講題來演講。


希望大家不嫌棄～
小的我 2015 會繼續努力的。

2014 年的我....

今年。

• 跟 Matz 大神合照，跟 node.js 的櫻桃哥合照。
• 跟 Expr 學習寫 IOS APP，雖然最後只幫上一點小忙..
• 完成 Objective-C 學習筆記。
• 去 whoscall 面試，談到以『當時』的能力來說，人生最高的月薪 (別問我，我是不會說的 xdd)，還可以飛國外跟日本,韓國人共事的好機會，雖然最後沒去...。
• 台科資管所沒上，goodbye~
• 精進後端語言，學習 Koa(node.ks),  Laravel(PHP)
• 前端技能弱化... (相對於前一筆xd)
• 開始上手 Node.js，跟同事共事後更比較熟悉 Node.js 了，在 Web 開發技能上學習到很多，學習 Node.js ，學習使用 Redis 做 Cache，學習 Logging，學習 API 怎麼寫。
• 因為專案時程壓力而把 code 寫得很糟，覺得很羞恥...，但也不是故意的...
• 剛接手一個 Project 時，判斷專案時程跟專案可行性的準確度好像有越來越準的趨勢 (希望我不是自我感覺良好)
• 學習簡單的 Python (主要是爬資料)
• 至今接觸過最多專案的一年，相對來說也是過的最辛苦的一年...。
• 如果沒有人情因素的話，不要做不開心的案子，兩個心得: 1. 做賠錢生意不如在家睡覺 2. 如果案主屬於很難聯絡到的人，那也是放棄
• 講了兩場小 Talk，分別是在前端社群跟 PHP 也有 Day。準備 talk 其實蠻辛苦的我覺得，也許是我太緊張 ;) 不過要學會習慣上台的感覺。
• 本來很想退隱社群，不過好像很難，但是我有在努力，越來越少 follow 一些群組，我沒有要刻意做這件事情，而是我很不喜歡 Facebook 一直有推播跟通知，所以我寧可選擇想看在自己點過去看 xdd。
• 人生第一次出國。
• 最喜歡的活動是 Hitcon girl。
• 最快登出的活動是資料科學年會。
• 認識很多不是程式界的朋友，感覺很不錯。
• 今年養成了一個習慣，我不知道是好還是不好，我覺得 facebook 跟 line 都不是應該要我立馬回你訊息的軟體，同樣的我也不覺得對方需要立刻回應我，如果真的有急事，我想大部份會直接 call 手機的。 (可能是我覺得打字聊天很花時間吧... 除非我閒下來了xd)
• 愛到卡慘死

明年目標我就不多說了，說了也不準，每次結果都跟之前想的不一樣 XD

Laravel-Excel 匯出 Excel (xls) 心得

最近在工作上一直處理匯出報表這件事情，整體來說， Laravel-Excel 已經能符合大部分的需求，安裝與使用上，也不是很複雜 (難的是撈資料啊....)。


不過，有個很懊惱的問題是，如同這位先生問的一樣:
exporting large files in separate sheets

我的問題不完全跟他一樣，但重點很像。如果資料量太大，要用 excel 匯出，會非常吃 memory，(PHPExcel是在 memory 中處理所有資料)，一等就是遙遙無期 ( 我改用 fputcsv 超級快... 但是在mac會有亂碼問題 )，可能檔案還沒下載下來，畫面就先掛掉了，除此之外，你還可能會經歷兩種 fatal error:

(1) PHP Fatal error:  Allowed memory size of 16777216 bytes exhausted (tried to allocate 32 bytes)

(2) PHP Fatal error:  Maximum execution time of 60 seconds exceeded


第一個是，memory 不夠了，怎麼辦?! 你願意拿 memory 來換 xls 檔嗎? 可以的話，就不用吝嗇付出更多的 memory，設定一下 memory_limit (example: ini_set('memory_limit', '1G')) 。

第二個，時間不夠用。你可以等嗎? 那你可以把 max_execution_time 調高 ( ini_set('max_execution_time', 600);)。


以上兩種調整，可以讓 xls 成功匯出，但可能一等就是十分鐘，經測試，絕對不是 Query 慢，再慢也不會是這樣，而是 PHP 會等資料都 ready 好之後，再放到 xls 檔，所以佔用記憶體，你必須等...。

還有一種方法，就是把這樣的任務放到 background 去跑，礙於時程壓力，經驗不夠，我沒有走這種方式，我也不曉得測出來的結果如何，簡直悲劇一場。

結論: 我不想讓客戶久等，我暫時用 fputcsv 來擋一下當時專案匯出報表的需求...。至於 xls 我目前只會用在小量資料匯出。

(PS: fputcsv 要處理 select query 回來的 2 維陣列，又有一點麻煩之處，有空再紀錄 xdd)

Mac 電腦新增 ssh 用的 pem 檔

常常需要 ssh 到公司專案新開的 Amazon 機器。所以紀錄一下新增 pem 檔的過程，不然常常忘記。


1. 首先要到自己的家目錄下，進入到 .ssh

$ cd ~/.ssh

2. 新增一個 pem 檔

$ touch your_filename.pem

3. 然後，把你的 key 加到 .pem 檔

    -----BEGIN RSA PRIVATE KEY-----   
    MIIEowIBXXX......    .....    ....    ....    ....
    -----END RSA PRIVATE KEY-----

4. 很重要的步驟 (權限改 400)，不然很有可能無法 ssh 成功哦

chmod 400 your_filename.pem

5. 然後就可以 ssh 了

 ssh -i your_filename.pem YOUR_SERVER@IP

HITCON GIRLS 2014 參加心得

https://medium.com/@winwu/hitcon-girls-2014-d0487a9a3cdd

MySQL 設定 group_concat_max_len 的最大長度

其實這篇的來由是延續昨天的 GROUP_CONCAT 用法，我沒想到 GROUP_CONCAT 出來的字串會有最大值的限制，以至於在某個頁面上，爬出來的 JSON 格式發現錯誤....。

查了一下 MySQL 的手冊才得知，GROUP_CONCAT 最大值預設是 1024 個字元。

因此，要改變這個最大值的設定，有兩種方法(恩...對我來說是兩種)

1. 修改 my.cnf 檔案，在 [mysqld] 的後面再加上 group_concat_max...

[mysqld]
socket=/tmp/mysql.sock
group_concat_max_len=6000

group_concat_max_len=val，再填入你要的最大值。
如果你是走這個方式，記得存檔後，重啟 MySQL。


2. 在程式端修改
因為我是用 node.js 在開發 web application，所以也就是搭配 co-mysql 的套件，反正各種 web 開發的程式語言大部份都有可以搭配的 mysql 連線跟使用方式，像我就是直接在程式寫下類似這樣的 query 就可以了:


yield $db.query("SET GLOBAL group_concat_max_len=6000");


完。
其實選擇 2. 的原因沒有其他的，只是覺得別人要 clone 這個專案時，我還要特地說明請他去修改 my.cnf ，我會覺得太煩雜而已。


這篇也寫得蠻清楚的:  mysql 环境变量之 group_concat_max_len。

用 MySQL 的 GROUP_CONCAT 組成 Object 格式字串

這邊文章寫得很詳細: MySQL 的 GROUP_CONCAT 函數

今天被 DISTINCT 整個很徹底，嚴格來說也不是整拉，因為我也沒用過，就求一個方便，希望把關聯的資料都 concat 進來，就不用一直撈其他的 table，哎，無力說明，很無奈 xdd。

不過我還是想留一下記錄，畢竟這個對我來說太常用了。

因為我不想在一個網頁上，一直額外的去 query 其他關聯的 table，所以我就想要把關聯的資料用同一隻 Query 就 Query 出來，但是關聯的表單，可能又是一對多，因此我就必須要 concat 那幾筆所有的資料為 Object 的格式(Object 格式只是為了方便我拆解資料而已.. ，也可以依照喜歡的字串去組合)，然後就看到了 GROUP_CONCAT 這個功能。


這是我預期的結果:

{ id:"11", title:"第一次，維多利亞港", slogan:"浪漫夜景一日遊" },
{ id:"12", title:"山頂纜車", slogan:"鳥瞰香港" },
{ id:"13", title:"一點心美食", slogan:"便宜又好吃" }",

這是 Query :

SELECT
  .... 
  ...
  GROUP_CONCAT(
       DISTINCT CONCAT(
          '{id:"', titles.id, '", title:"',titles.title,'", slogan:"',titles.slogan,'"}'
       )
       ORDER BY titles.id ASC separator ', ' )  AS titles,
  .... 

  FROM XXX as XX
  LEFT JOIN ....
  WHERE ....  

如果不是跟這麼多 select  一起處理的話，簡單的寫法大概是參考這個: Export MySQL to Json 。

寫法類似這樣，也是能夠得到類似的結果，只是沒有跟其他 table 做 join 而已。

SELECT 
  CONCAT("[",
   GROUP_CONCAT(
       CONCAT("{ \"id\":  \" ",  id  , " \" "),
       CONCAT(", \"title\": \" ",  title), " \"}")
       ,"]")
AS json FROM `table_name` WHERE XXX = XXX;

結果是這樣 :  (因為我前後有加 "[", "]"，因此 output 結果會直接變成一個 object 的 Array)

[
    { "id":  " 11 " , "title": " 第一次，維多利亞港 "},
    { "id":  " 12 " , "title": " 山頂纜車 "},
    { "id":  " 13 " , "title": " 一點心美食 "}
]

大概是這樣...
這樣的結果還算滿意，至少有達到我要的結果，至於付出多少時間也就值了 T_T 。

『FED Party 14』持續進展的專案 - Hubot 介紹

序
這次 11 月的前端社群聚會，剛好被宇庭問到要不要上去講一場 Hubot，老實說我並不是 Hubot 的重度使用者，而且在我任職的公司，也不是由我負責 devOps 的架設，不過想說是一場 lighting talk，也可以藉此機會，學習如何串起 chatOps。 我為了 lighting talk，而有動力去學習這件事情，認真說起來也算是發懶太久了。



Hubot 簡短介紹
原先由 github 發起的，後來變成了 open project，一個放在 chatroom 的 robot，主要用來幫助團隊開發過程中，進行一些自動化流程，通知等等功能，甚至是任何客製化的服務。

使用 Hubot 必須要有一個 adapter，這個 adapter 指的就是聊天室的管道是誰，像是紅了一陣子 slack, Hipchat，以及 IRC, skype 都是。

透過 hubot 架設，adapter 銜接起 hubot 跟團隊溝通的橋樑，再加上適用的 hubot script，跟一些 git  repo notification 的 hook 串接，可以讓團隊的人隨時知道其他人正在做些什麼事情, 剛剛 push 了那些 code，解決了哪些 issue，甚至是 jenkins, redmine,
nagios 等 service 串接起整個公司內部的通知系統。

你甚至可以透過 coffeescript 或是 livescript，撰寫自己公司內部使用的客製化 script。


結論
我認為 hubot 本身不是困難的 (都是一些零碎的小細節需要注意而已，安裝不困難)，而是後面跟 adapter 銜接起來之後，你要如何整合公司的一些開發流程跟通知系統，任何的 service 都要被整合 (github, bitbucket, git lab, jenkins, redmine, jira 等等 )。 要整套都做起來，才會有成就感。

如果要我講個秘訣，那就是一步一步做吧。 還有真的蠻推薦 slack 的。
BTW，前端社群在尋找新血加入，有興趣請 fb 搜尋 Front-End Developer Taiwan ，你也可以跟小莊或是宇庭聯絡。

謝謝! 

[聽演講筆記] PHP 也有 Day - 那些金流的二三事

非常幸運的有報到 11 月的 php 也有 Day，Ricky 大大要講金流處理的分享，我最這塊也是超有興趣的，還好有來聽，學習到很多經驗。

以下的筆記，是我個人在聽的一些紀錄，建議還是看影片比較真實哦。

相關網址:

Youtube:

Slideshow 連結。 

以下是我的筆記，其實跟 slideshow 差不多拉，因為我去就是瘋狂紀錄這樣 XDD :

PHP 也有 Day - 那些金流的二三事

• 講者: Ricky Su
• 時間: 2014-11-20
• 活動網址: http://phptheday.kktix.cc/events/c80ec9f8-b9614e-4948f4-687e44-296d6c-929ace-716173-a6aa5e-d317e9-fb9523

金流類型

• 線上付款
• 付款即時確認
• credit card
• WebATM
• Paypal
• 支付寶
• 離現金流
• 訂單成立後有一段緩衝時間讓 user 付款，付款完成後才算成立。
• 超商繳費 (ibon, 條碼繳費)
• ATM 轉帳 (一次性) (虛擬帳號)
• 某些不讓你臨櫃繳款 lol
• 超商繳費: 金額不可以超過 20000 元 :8ball:
• 虛擬帳號 ATM: 使用繳費方式，不受三萬塊方式 :+1:   (請記得選繳費而非轉帳)
• 轉帳:: 非約定戶單日上限 3 萬

金流 API 

廠商要你簽 NDA，簽完才給你 API，再決定簽哪家之前只能問朋友了 xdd

API 串接流程

線上付款:

• 消費者-->請求付款--> 做一個 forward request (怕詐騙)
• 有些時候刷卡動作會把你導向一些金流平台，進行刷卡動作。
• 提供 redirect url 給金流平台。
• 驗證完成後會 callback 讓你知道有刷過還是沒有刷過。
• 有些金流廠商的 callback，是把訊息封裝完之後，由 user 端帶回來給你 (類似加密過的資訊直接帶給消費者的瀏覽器)
• 付款請求資訊欄位
• 簽約完之後會給你一組商家代碼
• 訂單編號
• 付款方式
• 金額
• 繳費截止時間 (虛擬帳號或是ibon，有些平台允許你加入繳費截止時間，時間都是以『天』來算)
• ibon 會要求你提供訂單明細(繳費單會列項目是什麼)

離線金流:

• user 請求付款，電商回傳繳費代碼。
• 銷帳: user 至超商，一繳錢/匯款後，就會通知金流平台-->繳費成功-->繳費成功通知，進入結賬程序-->通知 user 已收到錢。

付款結果通知欄位

• 商家代碼
• 訂單編號
• 付款方式
• 金額
• 交易狀態(成功或失敗)
• 交易時間
•  (有些金流商不讓你設定繳款時間，因為有 user 就是未超過繳費時間才繳費，最後我們會用人工的方式去確認繳費時間)

如何驗證欄位

金流商最後要給我們的 callback。

 Note: 你不會知道這是不是真的金流商送的，相對的金流商也不知道是不是真的你。通常他們首先都會先產生一組 key(共同持有)，將欄位加密後傳後，能解密 callback 的資料就是真的資料。

• 某綠色金流商採用的方式為
• key/IV 由金流商以及商家共同持有。
• 簽完約金流商就會給你了。
• 資料已 XML 封裝。
• 要簽湊齊 16 bytes 的整數倍。
• 要補 padding(PKCS7 padding)
•   PHP:
•     加密: function AESEncrypt($xml, $key, $iv)...
•     解密: function AESDecrypt(...)
•       要把padding 解掉。
• AES 128 CBC Mode..... 加密。
• CBC 是以一塊一塊的方式來加密，所以是有固定的長度的。
• 將欄位與 key 依照特定格式 加密為 MD5...??@#@$@% (沒跟到 T_T )
• 接收端驗證 MD5

訂單資料結構

• 訂單狀態 (有效/作廢)
• 交易方式 (credit  card/ ATM / ibon)
• 交易狀態 (succes / ing / fail)
• 繳款代碼
• 交易有效期限
• 付款時間
• 訂單建立時間

程式架構

• 跟金流商串接
• callback 接
• 一條龍的程式架構
• 金流方式一直增加，以上流程無限迴圈 ?
• 最可怕的事，在串接新的金流時，有些廠商沒有測試平台 (OS: 真是驚人..... )

分為商業邏輯跟金流處理

商業邏輯

• 處理 user 付款流程
• 專注在跟訂單相關的事件
• 變動訂單的狀態
• 處理動作是由事件驅動
• 一堆 callback 等著商業邏輯來 call
• Example :
• 更新資料庫繳款代碼
• 發送簡訊
• 寄送email

金流處理

1. 加密
2. hash
3. 送請求到金流廠商
4. 不處理資料庫寫入的動作

• 離線金流的話要先建立事件通知 (event) 商業邏輯。
• 當消費者繳費了，金流商會給我們 callback 處理，一樣是處理事件通知。

返回 (Redirect Url)

• 返回到商業邏輯，帶著訂單編號等資料，從資料庫 match data，然後做訂單狀態顯示。
• 訂單狀態 response http status code 為依據

實作 Event

• Symfony (Laravel) / Pear Event Dispatcher
• 自己刻一個 XD

如何測試

• 金流處理如何送出 Event?
• 我發出訊息給金流廠商，廠商回傳繳費代碼
• 實作邏輯兩件事:
• 收到繳費代碼事件的 callback
• 負責更新狀態
• 送 email
• 送簡訊...

Event callback works?

• by 事件 event 去 call 他。
• 一開始程式就要註冊好，收到 event 之後要做什麼事情。

Note

注意 : 

ATM 繳款的話，要看你的金流廠商怎麼做，比如說多繳錢或是少繳錢，有些廠商會給錯誤訊息，但有些廠商會給成功訊息。

Q: 產生訂單編號都用哪些方法?

  產生訂單編號，最忌諱流水號，因為容易被猜到。

  講者的慣例是 :

  第一位按照訂單類型編號

  第二位為年 (ex: 2014 只取 14)，哪一年的哪一天(太陽日，一年之類的第幾天)

  幾點幾分幾秒產生 (同一秒會有人同時交易，所以後面會有 randon 三位數 rand (100, 999) )

國外金流手續費太高 paypal lol

(光抽的 % 數就差很多)

銀聯卡

會有固定匯率的問題，每半年程式就要調整。 (可能是國外的金流才有這個問題)

Q: 有無串國外金流的部分?

國外金流手續費太高 paypal  (光抽的 % 數就差很多)

銀聯卡

會有固定匯率的問題，每半年程式就要調整。 (可能是國外的金流才有這個問題)

Q: 多久掃一次繳費截止時間?

常常去掃的話會太頻繁。

有人下訂單才會去掃，有效跟無效的，在計算已經超過繳費時間的一次作廢掉。

Q: 離線金流要怎麼知道 user 已經繳費

如果你是透過這些金流廠商，有些廠商會主動 callback。

有些虛擬帳號的部分不會主動 callback，你要定期去要，回傳恐怖的 CSV XDD

Q: 什麼時間點去扣庫存 ? 先扣還是後扣？

這通常是無解的問題... 

只要有訂單下訂，我們就會保留名額，會有時間限制 (ex: 過了一天沒繳費就把庫存加回來，然後此訂單作廢)

來賓發言: 只要有人把東西放到購物車，就會先扣，這個問題就會比較少。

Q: 分期處理是否有相關的經驗 ?

有些銀行期數太多，手續費是不一樣的

基本上只是剛開始帶入的參數不一樣，即使分期，實際上收錢是銀行跟 user 慢慢收，而你的訂單的金額，銀行會把錢一次性的給你。 

完。

如何同時擁有多個 Bitbucket 帳號

這標題下得有點詭異，如果想要同時擁有多個 bitbucket 帳號，當然是一直申辦就有，不過我想說的是，因為不同帳號，可是擁有同一組 SSH public key，就會發生 『 Someone has already registered that SSH key.』 這樣的悲劇。所以問題就在於， SSH public key 不能共享。

最近公司剛好從 Gitlab 轉移到 bitbucket 的服務，不過由於我使用 bitbucket 有好長一段時間，並不希望個人 email 使用的帳戶跟公事的帳戶綁在一起，所以另以公司使用的 email 申請一組新的 account。


Step 1 : 產生另一組獨立使用的 SSH Key

$ ssh-keygen -f ~/.ssh/YOUR_NEW_ACCOUNT_NAME  -C “email”
$ pbcopy < ~/.ssh/YOUR_NEW_ACCOUNT_NAME.pub


範例，以我的 new account 為 winwu_youmeb : 
    $ ssh-keygen -f ~/.ssh/winwu_youmeb -C “win.wu[at]youmeb.com”
    $ pbcopy < ~/.ssh/winwu_youmeb.pub

將複製的這組 pub key 加到 bitbucket 的 account setting。

Step 2 : 修改 ~/.ssh/config

預設你可能已經有一組 HOST bitbucket.org，接著你要為為新加的 public key，設一組 host:

Clone Repo 上面所設定的 Host 跟你在 clone 新帳號的 repo 時大有關係。

接下來如果你是要 clone 新的 account 裡面的 repo，

• 原本是 :   git clone git@bitbucket.org:youmeb/project-name.git
  (因為用這組會衝突到你之前的帳號)

• 改成 :       git clone git@bitbucket-youmeb:youmeb/project-name.git

原本的 account 則不需要調整 clone repo 時的 HOST。






修改專案的 remote 位置

畢竟我們是從 gitlab 轉移至 bitbucket，因為本來的 repo 的 git remote 位置就必須修改:
你可以修正 .git/config。

完畢。

2014 PHPConf Taiwan 參加記錄

又是一篇流水賬，事隔好幾天了，我都詞窮了 :P

今年的 PHPConf 辦在輔仁大學，是 10/18 (六)，活動網站點這個，然後一如往常，
如果沒有參加的朋友，通常都是看 PPT 比較多，不過我個人非常推薦了解一下今年的 phpconf 議題，很妙的是，我覺得大部份的議題跟 PHP 本身沒有太多的關係，架構面跟效能處理上的議題比較多 (ex: mongoDB, MySQL...)，而且都蠻實務的，一整天聽下來有物超所值的感覺哦 !


以下就由本 blog 特派員小 win 做個簡單的 conf 記錄!~

場地來說，雖然也不是第一次到輔大了，不過那個會場真的是有些遠，好熱啊... (不知道為什麼今天特別的熱)。但是學校場地能這樣子也算不錯了，雖然下午會議室有點悶，不過是可接受範圍，感謝辛苦的工作人員還搬電扇來 :)。

一去就是滿滿的人潮在簽到。

這袋子跟去年的很像內，大象就是可愛!

個人識別證。



微博 LAMP 優化之路

第一場，微博 LAMP 演變，講者是中國最有影響力的 PHP 技術專家惠新宸，Laruence，採用 live 的方式進行議程，挺炫的啊，第一次體驗這種 live 議程，不過訊號斷斷續續有點可惜，有興趣可以先看這個網址。

大部份在講網站性能優化/結構優化，前端 php 後端 C, 從 LAMP 到 LNMP, O+ 替換 APC 等分享。很多專有名詞我沒有聽過 (ex: yaf, apc...)...，唯一的心得是覺得在台灣做網站，流量也很少有機會需要這樣優化我的網站，機會很少，有點可惜...。

然後聽完這場之後學到一個很有趣的名詞:  首屏時間 (頁面整個 load 完的時間 (數據填滿用戶瀏覽器的時間))。



創意與專案管理的冰與火之爭

這場我沒有太多的想法耶 XDD 抱歉。
只是很少再跟程式相關的場合聽到跟 PM 有關的議程，這也是一種開創呀~

whoscall & MongoDB

gogolook CTO 分享 mongoDB 的應用，雖然我沒有用過 MongoDB，不過是很實戰的分享經驗，講者說明了從 GAE 轉換到 AWS 使用 MongoDB 的過程之中遇到什麼樣的問題以及以何種方式去解決等等。

聽完之後我才知道原來 Time Sync (時間同步) 這麼重要，index size fit in memory，有多少資料配多少的記憶體，採用高水準 DISK等等。

希望之後會有 ppt 可以看，我很想收藏啊~

PHP Extension  開發實務

我的 PHP 程度很普通，所以這場是有點半登出的狀態，講者問: 『有誰看過 php 的原始碼?』 我想會場大概不超過 10 個吧，其實我也沒看過... Orz



運用 Docker 部署PHP專案 (Fntsrlike)

Docker 這陣子真的是很火紅。

這場真是大爆滿啊，不知道是不是因為最近 Docker 越來越多人用了。
這場我很難做些什麼筆記，講者的整個介紹算是很完整了，剩下的就是需要靠自己去學習 Docker 的部分了。

順便推薦一下臺北有個 Docker-Taipei。




HTTP accelerator - Varnish 應用 (Ninja)
今天聽下來最喜歡的一場議程，在講述 Varnish 的應用，如何用 Varnish 做 cache，為什麼選擇 Varnish? 使用之後的問題是什麼?

抱歉，以下這段是我記錄給自己的簡短的 note，請大家還是看 PPT 吧，當時要邊聽議程邊打字，可能難免有誤。

Web Server 安裝 Varnish

• 優點: 線上服務快速部署
• 但是線上服務已經在 hosting 了，當時的狀況是把一台下下來，另一台前端檔一個 Varnish。
• Varnish 是檔在 apache 之前，varnish 會判斷 request 有沒有 cache 的資料，沒有才會跟 apache 溝通。

新的問題

• Hit Rate 遞減
• Cache 空間浪費
• 後來發現機器越開越多，網站反而變慢，因為 hit rate 降低了 (被 cache 在 varnish 的次數變少了)。

架構調整

• 幾台 varnish 擋在 apache 前
• 風險: 單點失效影響服務。如果某檯機器失效的話，導致後端服務的 web server 可能會承受到 2,3 倍以上的量。
• Warm up 存在 gap。
   cache miss storm

避免 warm up

• 依舊保留 varnish 擋在 apache 之前
• (單點失效的時候)短時間有問題而導致 varnish 掛掉的話，使用 switch 調配 ( 但是這是一個理想的情況)

VCL (Varnish config language) - 聽講者的介紹，是個方便的東西呀

VarnishStat 即時狀態

VarnishHist 線上網頁來源

議程後面有一段在講 cache-control，我覺得好像是蠻重要的部分，雖然我是有做筆記，不過很亂，不好意思放上來。

這場議程會後，我有點想知道 Nginx 跟 Varnish 的差別是什麼...

結語

其實還有幾場是我去聽但是沒有做記錄的，因為電腦快沒電了...，然後也沒有特別的想法，就沒再多描述了，Sorry。

隨著工作的時間跟累積的經驗，越來越能聽得懂某些議程的議題是什麼，感覺還不錯。
去年聽 PHP Conf，沒有像今年這麼的有心得，不完全跟今年的議程安排有關係，一方面也是隨著工作上遇到的問題，越來越能聽得懂某些議程想要分享的內容。

一年的工作累積，有差。進步總是很漫長，短時間內看不出結果，但累積到一定的量，還是會有收獲的 :D


我想今年台灣的 Conference 也算夠多的了，不知不覺也參加了好幾場....
偶爾要放下電腦，停停走走，走走... 停停...

做 Mobile Web 的兩三事...

是說編編擔任前端一職至今也兩年了，也有做過幾次 Mobile Web，(雖然稱不上專業...，但是我沒有放棄要努力好好學的意思...)，之前一直想要記錄一下心路歷程，但是一直停留在我那點好幾次分頁的 google 草稿，再加上今年年中有一段懶散，一直沒有寫文章 。

對了，我喜歡片段式的記錄自己學的東西，然後再一次集結起來。

(此圖僅是示意圖而已)

我見過兩種手機版網站的開發的方法

1. 一種是真的當作另一個網站在開發

MySQL Error Code: 1175 錯誤

其完整的錯誤描述如下:
Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.


事件起因:
我想要刪除某個 id 在多對多 table 的所有 row。


解法:
在 Delete From ... 之前加上

SET SQL_SAFE_UPDATES = 0; 

即可解決。

MySQL Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) ... 錯誤

在執行 MySQL 的 Stored Procedures 時，因參數帶入中文而有這樣的錯誤訊息。

簡單來說是跟語系的設定有關，但不管我怎麼修改 database 的 charset 或是 table 的語系，依舊沒有解決這樣的問題，因此在 stored procedures 裡面加了 COLLATE 的語法。

要注意的是 COLLATE 不是加在參數設定的地方，而是在 WHERE = 時為該 field 設定 COLLATE utf8_unicode_ci 的設定。

Example:  不能這樣寫

如果將 COLLATE 的設定寫在參數的地方，MySQL 將會回傳 Error 1235: This version of MySQL doesn't yet support 'COLLATE with no CHARACTER SET in SP parameters,... 的訊息。

DELIMITER $$
CREATE PROCEDURE `ls_cn_sp_getadminuser`(
      IN `_admin_account`  VARCHAR(255) COLLATE utf8_unicode_ci,
      IN `_admin_password` VARCHAR(255) COLLATE utf8_unicode_ci
                                  )
begin
  # 撈出該 adminUser 的資料
  SELECT *
  FROM   `ls_cn_admin_user`
  WHERE  `admin_account` = _admin_account
  AND    `admin_password` = _admin_password;
END

Example:改成這樣寫

DELIMITER $$
CREATE PROCEDURE `ls_cn_sp_getadminuser`(
     IN `_admin_account`  VARCHAR(255),
     IN `_admin_password` VARCHAR(255))
begin
  # 撈出該 adminUser 的資料
  SELECT *
  FROM   `ls_cn_admin_user`
  WHERE  `admin_account` = _admin_account COLLATE utf8_unicode_ci
  AND    `admin_password` = _admin_password COLLATE utf8_unicode_ci;END

『程式設計人應該知道的 97 件事』讀後感

這本書非常適合在寫程式寫到腦袋有點鈍掉，又不想停下來好好休息的人拿去咖啡廳坐著看一看。

我不知道大家 coding 到有點 co 不下去的時候會做些什麼事情，如果是我，就是在臺北東區亂走路，但又不至於走9遍忠孝東路，或是焦慮的喝著有咖啡因的液體...，沒有要幹嘛，但就是也不想睡覺休息 XD。常常我是邊走路邊想事情。

這本書，整體來說，並沒有什麼總結，只是很多人對於工程師的一些想法，不論思考, 做事的方式, coding 跟重構等等。

有些人的想法，看了會很有共鳴，你會覺得，好像我也是這樣做, 好像...我也是這樣想。有些人的想法，可能跟你互斥，不過都是別人的經驗，你可以汲取你認為好的，或是思考一下，不想做 plan A，那如果是你，你會有什麼樣的 Plan B，因為方法沒有一定，端看你的工作環境,  coding 方式, 同事, 客戶等等。


蠻意外的共同點

• 有幾位專家認為增進 coding 的能力之一是共同參與別人的 open project，或是去看那些開源的專案的程式碼。
• 這點我自己承認我沒做好，因為我沒什麼耐心看別人的 code，除非是我很有興趣的專案，像是一些用 JavaScript 寫出來的效果等等... :P (還需要多培養....)

註解不是邪惡

• P.32 那篇是個很好的故事，簡單來說就是，作者在念大學的時候，老師出了一題算出平均值的程式，題目不難，作者得到了一個勉強的分數，但是老師在評分卷上寫著: 『沒有註解 ?』 。老師會這樣問的原因是，老師跟作者都知道這段程式碼目的是要做什麼 (因為已經知道題目了)，但是這樣還不夠，『程式碼必須可以對下一個的程式設計師解釋他自己』。
• 但是也不該過度註解，註解最好可以用來解釋程式無法解釋地清楚的地方 (可以跟『在程式碼無法表達之處註解』, P.34  做比較)
• 總是有機會會寫到很複雜的功能
• 『如果這東西很難寫，那麼也應該很難讀』，這句的意思為反意，要注意程式碼的可讀性 (update 2015-01-15，謝謝 洪象成)。

學習程式以外的語言

• 是的，這篇我很有體悟，尤其剛參加完英文講者蠻多的 JSDC 之後，要好好學英文...

程式碼的審查. P.28

• 這篇建議可以給會被 code review 的新人看看，我曾經有犯過這種錯，就是被別人 code review，但是我覺得那是對方的偏見，改了我的 code 有時候心情蠻差的。但我後來是蠻喜歡被 code review 的...，有時候就是這樣，當你很討厭被 code review 時，就一直有人會來 code review 你，當你想要有人幫你 review 時，卻很難有這樣的人 XDD 這機會很棒啊，如果有人要 code review，要心存感激啊 !
  
  程式碼的審查不是用來指正新人的錯誤，而是分享知識，這個很重要。不要讓 code review 變得很嚴肅，如果公司能把 code review 變成一個快樂的點心跟下午茶時間，那會很不錯。

別在你的測試資料裝可愛. P.50

• 這篇非常有趣，因為真的很容易發生這樣的事情，簡單來說就是，多為你的客人著想 XDD，情境有點類似假如客戶提出了很奇怪的要求，然後你在 log 或是 alert 寫下一些情趣化的 log (ex: 別再按這個鈕了，沒有功能，你這白癡) 之類的話，或許工程師覺得好玩或是無心寫下，當做 debug 用的訊息而已，但是如果忘記拿掉，在客戶面前 demo 時，會給客戶留下很不好的印象，也會很尷尬 XDD 
• 要這樣寫測試的 log 也要記得拿掉呀 XDDD

學會評估時程

• 這個是我覺得很難學的部分，因為一個需求，怎樣算完整，我又該怎麼估時間呢 ><，建議以後做一個功能自己記錄一下所花費的時間跟工作內容的細節。
• 不過這篇的重點不是要工程師給上級一個明確的時程，重要的是釐清需求是什麼, 評估目標跟如何達到自己的承諾。

有幾篇是在講重構跟 pattern，這個可能給有寫過比較大型或是 C++/Java 專案的人看的，我就比較難融入在其中。


P.45。最後，做大量審慎的練習，『達成專門技術最重要的元素，就是你花在進行審慎練習的時間，先天的資質不是主要的原因』。審慎地練習是一種學習，這學習會改變你，也會改變你的行為。這篇是很好的分享啊~ 我很喜歡 :)


我只有記錄幾篇我認為很印象深刻的，
再多說就破太多梗了，要給書商賺點 $$，
有興趣的捧油可以去書店翻翻這本書 :)

JSDC 2014 會後

今年的 JSDC 一樣是辦在中研院，這是第二次參加了，

不過上次是工作人員，這次是會眾。
(我很抱歉中途離開了 JSDC 的工作人員的 member。)

和以往很不同的是，今年的票價是 (早鳥 4500 ) 5500 台幣，議程講者較多國外講者，然後有現場口譯。
整體的滿意度是:

• 票價: ***
• 議程: *****
• 中餐跟點心: ******

現場口譯個人認為還不錯，挺需要的，口譯人員的翻譯我也覺得不錯。



然後不知道為什麼，每次去中研院天氣都很普通.....
在三天連假有其中兩天 7 點就要起床前往中研院參與這樣的盛事，不是一件簡單的事情，我曾經早起睏到後悔報名 XDDD，但是心裡知道不能如此墮落。

Day 1，第一天的入場程序不知道為什麼卡很久，真的不知道為什麼 XD....


Future of Enterprise Web Applications
接著是第一場的 Sencha 的講者，老實說第一場完全處於登出狀態，理由是自以為聽得懂英文，太晚戴上口譯翻譯機，第二點是這個議程的結束讓我完全處於有點錯愕的狀態，有點可惜，我覺得好像沒有聽到太多關於架構面的事情，我想或許他們把重點放在 Day2 的 Workshop 吧...，不過我沒參加 Day2 的 workshop。

mobile web 的 scroll 行為調整

最近研究起 Mobile Web，發現某區塊在上下滑動的時候沒有那種很滑的感覺(不好意思... 真的不知道怎麼形容這種感覺)，想要這種感覺的話，可以試試 overflow-scrolling 的屬性:

-webkit-overflow-scrolling: touch;
overflow-y: scroll

畢竟 mobile web 不是 native App，如果想要 scroll 很順的話，可以參考看看。不過要很抱歉的說我並沒有細心的研究這個 CSS 的用法，不過上網查到的都是介紹使用 overflow-scrolling 。有機會我會再詳細補上。

參考:
Native Scrolling on Touch Devices & Polyfilling
Momentum Scrolling on iOS Overflow Elements

skrollr 製作滾動視差 ( Parallax Scrolling )

Skrollr 網址。

這篇不是教學文，只是稍微提及，製作滾動視差的話，Skrollr 是我遇過目前很好的入門，問題是寫到最後難以避免整個 HTML 架構跟 inline-style 混搭風，如果你能接受 HTML 充斥著 data-attribute 跟 inline-style 倒是可以試試看這款。


問題點 :
小的在使用 Skrollr 上發現在 Mobile 觀看時會綁架整個頁面，也有不少人在 Stackoverflow 提及此問題。最後我很孬的只有結論出兩種解法 :

1. 要嘛就是在 Mobile 或是 Tablet 拿掉 skrollr。 (我最後選擇了這種...)
2. 修正他。

參考 :

• 如何使用 skrollr 做出簡易的 Parallax Scrolling 網頁

Laravel 如何接住沒有連上 Redis 的 Error

如果沒有連上 Redis 理當的確會顯示 error message，我還為了測出這個 Error 刻意把 Redis 停掉，不過這是必要的，因為網站放到 Server 之後，也是必須考慮會有 Redis 未開的情況。

這是 Error Message，當在 database 有設定連線 Redis 時，因為連不上 6379 Port:

我的解法其實也沒什麼特別的，雖然有用 try，但是並不打算把 catch 到的 expection 接起來，畢竟把 error 丟給 user 看，沒什麼太大的意義，撈不到 redis 資料就看不到畫面，也不是很合理 :P 那就讓撈不到 Redis 時，直接從 Database Query 出資料吧 :)

我的寫法並不高深，也不會很炫，但至少不會給 User 難看的錯誤訊息畫面...

try { // 先嘗試 Redis 連線，連到的話測試使否拿的到要的 Key $app = app(); $redis = $app['redis']->connection(); $your_data = json_decode($redis->get('YOUR_KEY')); //echo '從 Redis 取得'; if ($your_data == "") { // 如果 Redis 要不到資料，那就先跟資料庫拿，拿完之後打入 Redis //echo '跟資料庫要'; $data_from_db = Model::orderBy('createdAt','desc')->get(); $redis->set('YOUR_KEY', json_encode($data_from_db)); $your_data = json_decode($redis->get('YOUR_KEY')); }else{ $your_data = Model::orderBy('createdAt','desc')->get(); } } catch(Exception $e) { // 連不到 Redis 那就直接跟資料庫拿 //echo '跟資料庫要'; $your_data = Model::orderBy('createdAt','desc')->get(); }

Laravel4 使用 Redis 出現 Call to undefined method Redis::connection() 錯誤

以下次錯誤訊息:


Symfony \ Component \ Debug \ Exception \ FatalErrorException
Call to undefined method Redis::connection()

本來的連線方式是:
$redis = Redis::connection();

後來改用:
$app = app();
$redis = $app['redis']->connection();

參考:
stackoverflow Laravel 4 : Call to undefined method Redis::connection()

解決 Fatal: Unable to create '.... /.git/index.lock': File exists. 錯誤

git commit 時一直出現 index.lock 的狀況，導致檔案無法加入 commit 的項目：

解法就是砍掉 .lock

rm -f ./.git/index.lock

就可以 commit，不知道有無更好的解法 :)

Reference

Lazy Line Painter (具有做 SVG 描線動畫的 JS 產生功能)

前陣子找到的工具，因為在研究如何做出描線的動畫，而且畫質要好，第一個想到的就是 SVG，但是我對 SVG animation 也不熟，後來就找到這個工具了。

首先呢，他不能畫塊狀的東西，你要畫的，要是『線』。

Then? 準備好你的 SVG 檔案，拖到網站下方的這個框框，就會幫你產出 JS。
至於有些基本的 Config，你可以再額外調整，像是線條寬度/ 線條的顏色等等。

是不是很 Easy 呀～ 喜歡嗎? 喜歡就還是要多利用時間了解 SVG animation 比較實用哦，工具畢竟是工具，了解背後的原理似乎比較 high :)

老實說我也不常用，但是常常就會遇到想要用的時候忘記哪時候見過他 XD

臺北的生活

每天晚上，如果無聊，就是打電腦⋯  

下班後的扣打是電腦的充電量用到 20% 就可以洗洗睡、發呆，

好處是學什麼速度都加快，缺點就是容易被別人覺得宅
（因此才會常常往咖啡店走 xd)

不過⋯這也不是很重要的事xd
台北對我而言，就是工作的地方，

這裡沒有親情，

亦不是家鄉，

哎⋯有時候難免還是會想家，

甚至懷念大學刻木頭的日子⋯(那種當學生的感覺真的很好，一切都單純)

但是就是沒辦法，這很現實。
除非我有經濟上的自由，否則很難為所欲為，就算有經濟上的自由，也很難為所欲為。

一轉眼來台北也兩年了⋯ 我得到了什麼，也留下了什麼，當然也失去了什麼，習慣就好，開心生活很重要～。我常在心中告訴自己，過去的美好是很好的回憶，但不能一直活在過去，現在當下的自己，也會是以後的過去，回憶是很兩極的事情，不好的回憶，想起來會是心裡的疤，丟臉的, 難過的, 羞愧的都有，所以之後就會避免留下疤痕，You know :)

發這篇不是因為中樂透還是發票，也不是明天有颱風，只是突然想打字，

一如往常，

明天照常上班 :D

就這樣偶爾放肆的過吧

『 就這樣偶爾放肆的過吧。』

我的這個程式相關的 Blog，荒廢了許久，好久沒寫了...

不過，今天不聊技術，不講 Js ...，讓我偶爾廢話一下，自己的生活吧。

差一點我都要忘記以前常寫文章的自己，是如何在下班後，窩在房間，狂飆文字的人生是怎麼過的。只能說，今年發生了好多好多事，各種挫折/憂心/難過/怪怪的事，好像都在今年發生了，讓我重新的看待自己的人生，好像到了另一個層次，也越來越了解，自己想要的東西是什麼。

安裝 elasticsearch-head 界面

elasticsearch-head  是 A web front end for an elastic search cluster，簡單來說裝了之後能夠提供一個界面來顯示 elasticsearch 叢集(cluster)，說是界面，其實就是利用 port (9200)，但是網址是 /_plugin/head，在 browser 跑這個畫面，可以直接透過  elasticsearch-head 做搜尋，安裝方式非常簡單，首先可以在 github 下載。

如果不習慣 curl ，或是需要一個同時可以查看 cluster 狀態, 搜尋 index 等操作的功能，

安裝方式
提供兩種方式給你安裝:

1. 安裝在 node 的環境下
如果有使用 node 的朋友，你的選擇就是 clone 這個專案，然後 npm install，最後用 grunt server 去跑。



2. 以 plugin 的方式安裝在 elasticsearch 的 plugin 資料夾，並且啟動它 (本文使用這種)
真實的路徑要看你把 elasticsearch 裝在哪裡...

sudo elasticsearch/bin/plugin -install mobz/elasticsearch-head

安裝完成

➜ elasticsearch-1.2.1  sudo bin/plugin -install mobz/elasticsearch-head
Password:
-> Installing mobz/elasticsearch-head...
Trying https://github.com/mobz/elasticsearch-head/archive/master.zip...
Downloading .......................................................................................................................................................................................................................................................................................................................................DONE
Installed mobz/elasticsearch-head into /Users/win/elasticsearch-1.2.1/plugins/head
Identified as a _site plugin, moving to _site structure ...

下指令開啟瀏覽器，或是直接開瀏覽器連到 http://localhost:9200/_plugin/head/

open http://localhost:9200/_plugin/head/

畫面:

首頁是可以一覽所有 cluster 的界面，真悲哀，我目前還沒有東西可以玩，不知道怎麼介紹 xddd ，等我把工具們研究一番之後，再來玩一下...  Orz

切換到 Browser 頁籤，可以依照 index 查看 type，甚至單筆資料

 elasticsearch-head  只是 ES 的工具之ㄧ，主要用來看資料的部分，不過要小心，透過這個界面，是可以直接刪除一個 index 的，小心手滑。



還有其他的工具需要在研究，目標放在日誌 (log)，跟分析的工具，待續...。

使用 elasticsearch-river-jdbc 匯入 MySQL 到 elasticsearch

Github Repo: Elasticsearch-river-jdbc

(本文若有用到 ES，用來代表 elasticsearch 這個詞)

為什麼要用 Elasticsearch-river-jdbc?
因為我想知道怎麼把 MySQL 的資料轉進去，但是，Elastic Search 原生並不支援 MySQL，所以我們需要用一些特殊的方式，去觸發 Elasticsearch 去 reindexing (重新建立 index)，而 elasticsearch-river-jdbc 正好是其中一種選擇。



Elasticsearch River
在 elasticsearch 中，river 這個字代表的是一個資料的來源，也是其他資料庫同步資料到 ES 的方法，通常他是以一種 plugin 或是說外掛的方式，裝在一個 ES 上的服務，透過讀取 river 中的資料並且把它 index 到 ES，像是現在官方有提供的 river 有 couchdb, rabbitmq, twitter, wikipedia。


下載與安裝方式

./bin/plugin --install jdbc --url http://xbib.org/repository/org/xbib/elasticsearch/plugin/elasticsearch-river-jdbc/1.2.1.1/elasticsearch-river-jdbc-1.2.1.1-plugin.zip

Elasticsearch 第一發 - 入門筆記

是說....，你是否有搜尋過，單字的 『Elastic』 是什麼意思嗎 :P


Elasticsearch 是一個開源的資料搜尋分析系統，它可以解決現在 Web 去做資料庫的搜尋的種種問題，嚴格來說也不只是 web，(有可能是為了撈資料的效能，或是 schema free,  real-time 等等)。

Elasticsearch 的目標就是為了解決這些問題，甚至是更多 (做分析等等)。能夠做到類似事情的分析系統除了它之外，也有一套叫做 Solr，兩種都是 Apache Lecene 的骨子。

Elasticsearch 的優點像是安裝簡單， Model 是基於 JSON， Schema free (自由的搜尋模式) and Document Oriented，透過 HTTP 使用 JSON 索引資料，實現多租戶 (Multi Tenant) ，以及分佈式可以對搜尋做 cluster 等等...。

想到 Elasticsearch 的話，就是開源 / RESTful 的搜尋引擎 / Distributed (分佈式的)，一言以蔽之，就是 A Distributed RESTful Search Engine。

可以透過以下的 git repo 跟網址了解更多關於 Elasticsearch:

• Elasticsearch  Github: https://github.com/elasticsearch/elasticsearch/
• http://www.elasticsearch.com/
• 書籍: Elasticsearch Server

Getting Start

剛開始研究 Elasticsearch 時會有很多專有名詞的疑惑，在來是使用 Elasticsearch 要搭配 Java 的環境。

[IOS] 使用 FacebookSDK 實作 Facebook 登入 (二)

延續 [IOS] 使用 FacebookSDK 實作 Facebook 登入 (一) 的內容，上一篇我們做了這些事:

• 建立 App 以及申請 Facebook 的 App
• 加入 FacebookSDK 到專案裡面
• 設定 .plist

這篇我們會按照 Facebook Login for iOS 這篇的教學，繼續進行製作 Facebook Login 的功能 (使用 Facebook Login 的按鈕)。

1. 增加 Facebook 的 Login UI Control

在你需要置入 Facebook Login 按鈕的 controller 的 .h 檔案 (以我的例子來說，我是在我的 rootViewController 加上 Facebook Login Button ) 把 FacebookSDK import 進來: (同樣的事情也請在 AppDelegate.h 做一次)

#import <UIKit/UIKit.h>

#import <FacebookSDK/FacebookSDK.h>

@interface rootViewController : UIViewController

@end

接著在該 controller 的實作檔 (.m)，初始化一個 FBLoginView: (通常我都是放在 
viewDidLoad 裡面)

[IOS] 使用 FacebookSDK 實作 Facebook 登入 (一)

這篇文章會有時效性的問題，請注意 xcode 版本跟 Facebook Login for iOS 的版本，若有更新則本篇的參考價值不大。

最近剛好在研究如何實作 IOS 的 Facebook 登入 (我的開發環境為 Xcode5.1.1)
由於我對 IOS 是新手，如果你也是，以下先提供幾個必要的參考連結，我已經按照觀看順序排列 :) 如果錯誤，歡迎糾正><

[IOS] 筆記 Todo App + Core Data Use

這是最近在學習 IOS 的一些筆記，但為了求快速，後面都暫時用英文寫了，只是過程記錄，請小心服用，完整的 hackpad 網址。不過因為我沒有完整的貼 code 過來，建議看 github repo 的 diff 去看，會更明瞭些。

安裝 CocoaPods + import AFNetworking

其實這邊文章主要是要寫如何使用 AFNetworking，但是因為我看文件後發現，使用 AFNetworking 要用 CocoaPods，所以也就跟著做了，原文出處為此: Getting Started with AFNetworking。

(本來以為 CocoaPods 很複雜，一直沒有裝，沒想到裝了之後覺得還蠻好裝的xd，每次這種要一步一步安裝的事情，我都希望一切順利...)


安裝 CocoaPods 的主要步驟如下

• Step 1: 使用 gem 安裝
• Step 2: 建立一個 Podfile
• Step 3: 建立環境
• Step 4: 安裝相依性套件
• Step 5: 在需要使用 AFNetworking 的 class #import AFNetworking

Step 1: 使用 gem 安裝 CocoaPods

$ sudo gem install cocoapods

Step 2: 建立一個 Podfile
你的相依性套件管理需要一個 Podfile 作為管理，而 Podfile 要放在跟 Xcode project(.xcodeproj) 同一個目錄下。

$ touch Podfile

編輯 Podfile

platform :ios, '7.0'
pod 'AFNetworking', '~> 2.0'

Step 3: 建立環境
跑 pod setup 指令，建立 CocoaPods 環境給這個 Project

$ pod setup

pod setup 完成後會出現這樣的 log:

Setting up CocoaPods master repo
Setup completed (read-only access)

Step 4: 安裝相依性套件
使用 pod install 指令:

$ pod install
Analyzing dependencies
Downloading dependencies
Installing AFNetworking (2.2.3)
Generating Pods project
Integrating client project

[!] From now on use `mosquitoSpace.xcworkspace`.

注意，跑完 pod install 之後這個 project 就改使用 .xcworkspace，不使用 .xcodeproj。

Step 5: 在需要使用 AFNetworking 的 class #import AFNetworking

#import <AFNetworking/AFNetworking.h>

參考連結

• http://cocoadocs.org/docsets/AFNetworking/2.2.3/
• https://github.com/AFNetworking/AFNetworking/wiki/Getting-Started-with-AFNetworking
• Should I ignore the Pods directory in source control?  應該把 /pods 資料夾加到 .gitignore 嗎?

heroku 遇到 Push rejected, no Cedar-supported app detected 問題

因為我傳了一個純靜態頁面的網站上去，所以在 git push heroku master 時遇到了這個問題:

!     Push rejected, no Cedar-supported app detected

原因是因為我少了幾個關鍵的檔案，
(我上網查過其他人為什麼會遇到這樣的原因，不過我只是其中一種可能)

所以 heroku 無法判斷我的 app 是什麼樣的類別
(heroku 支援很多種開發環境，ex: node, Java, Ruby, PHP... 等等)，

所以我在猜想是不是因為我純靜態的頁面沒有一些主要的檔案讓他猜測我是要哪一種環境?!
果然多 touch 一個 index.php 就成功了 push 上去了。

$ git push heroku master
Fetching repository, done.
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 629 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)

-----> PHP app detected
-----> Bundling mcrypt version 2.5.8
-----> Bundling Apache version 2.2.25
-----> Bundling PHP version 5.3.27
-----> Discovering process types
       Procfile declares types -> (none)
       Default types for PHP   -> web

-----> Compressing... done, 22.7MB
-----> Launching... done, v4
       http://YOUR_APP_NAME.herokuapp.com/ deployed to Heroku

所謂的關鍵檔案就是類似:
開發環境是 php 那就要給 index.php
開發環境是 python 那就要給 requirements.txt
開發環境是 ruby 那就要給 Gemfile...等等。 

我倒是第一次遇到這個問題，雖然純靜態網站用 heroku 有點浪費，但是 deploy 真的很快，也不用額外申請外面的免費空間，帶來一堆沒必要的廣告。xd

結論就是呢... 有問題的是我 :P

查詢用 WordPress 做的網站所使用的 Theme (Template)

使用 WPThemeDetector 反查 WordPress 的 Theme

因為要幫忙朋友查看網站使用哪個 Template (Theme)，但我不熟 WordPress，還好找到了這個好工具，只要輸入網址，就可幫你看該網站是使用哪個 Template (Theme)。
(但一定要是用 WordPress 做的網站哦 )

http://www.wpthemedetector.com/

ECMAScript6 on Node.js 環境

只是剛好想要研究一下 generator，才發現自己的環境不太ok。因為我的 node 環境只有 v0.10.x，沒有支援 generator。

如果想要讓 node 的環境支援更多的 ECMAScript6 的 Feature，建議更新到 v0.11.x 的版本，會支援更多，只不過 v0.11.X 的版本是 unstable，如果心臟不夠大顆，不敢亂升級版本，建議用 nvm 跑其他/切換 node 的版本。

版本你可以查看 http://blog.nodejs.org/release/。

以我目前的 node 的版本是 0.10.13 來說:

$ node -v
v0.10.13

Ruby on Rails 的 View 初學雜記

這篇筆記記錄了 Ruby on Rails (以下簡稱 ROR) 關於 view 的 render 的相關記錄。

新手上路，如果有寫錯，歡迎拍磚 :P

ROR 或是其他有遵循 MVC 架構的 Framework，像是 PHP 的 Framework 或是 Node.js 的 Express, Sails 等等，通常關於 view (MVC的V) 的部分，都可以使用 Template Engine 去編寫你的 HTML，並且在 Template 內可執行該語言的程式，進行資料的重複 render，甚至 template 再分出 template (有點像是 widget 或是 partials 的觀念)，主要是為了遵循 DRY 結構，模組化你畫面上的 HTML 結構等。

Ruby on Rails 的 Controller 初學雜記

新手上路，如果有寫錯，歡迎拍磚 :P

這篇筆記記錄了 Ruby on Rails (以下簡稱 ROR) 關於 Controller 的相關記錄。

熬夜看了 Code School 的 railsforzombies 之後，提到 controller 是一個 App 的 Brain 真是一點都沒錯。(我看的是 http://railsforzombies.org/ 系列)，這個系列的影片每打開一次就要聽一次片頭曲，有點煩就是了，都是一些殭屍的動畫，不過這個系列，免費觀看，讚。

接著又順便參考了 RailsGuides 的 Creating a New Rails Project，別怕，請服用。

MVC

Ruby on Rails 遵循 MVC 的架構，這章是在簡單的記錄 C 的部分。

Controller

controller 是用來接收某個 http request 之後決定做出什麼樣反應的功能，也跟你的 routing 設定有些關係， routing 設定能決定接收 request 之後，該由哪個 controller 處理。通常來說，每個 controller 有一個以上的 routing，不同的 routing 也可以對應到某個 controller 的某個 action，action 通常的用途則是去跟 model 要資料，然後把資料，丟給 view (也不一定完全都是要去資料，也可以單純地只是對應到某個呈現給 user 看的 view)，端看需求而定。

Ruby on Rails 之環境建立過程筆記

這篇算是去 2014 Ruby Conference 行前準備吧，一直以來沒碰過 ruby，很高興今年買到 Ruby Conf Taiwan 2014 的票，既然要去聽，還是做點功課，這篇其實就純粹是記錄安裝過程而已，如有需要，請多上網搜尋各式各樣的裝法 :)

我的電腦是 Mac
首先是環境的確定:

1. 確認有 Ruby & 如何在 Mac 跑 Ruby

確認有 ruby 的執行環境，
mac 預設有 ruby 的環境，
你可以輸入 ruby -v 看一下你所擁有的 ruby 版本:

$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]

如果有看到版本的結果的話，
可以試著 touch 一個檔案，如 hello.rb

$ touch hello.rb

然後編輯 hello.rb，
寫入這段:

$ vi hello.rb

puts "Hi, i am win"


接著執行一下 hello.rb，
執行的話就是用 ruby 去執行:

$ ruby hello.rb
Hi, i am win

這樣就會印出 Hi, i am win 的結果了。

PHP 匯出 Excel 功能，所遇到的 SYLK 錯誤

今天在幫忙做 PHP 匯出 Excel 功能時，才發現微軟的微妙...
匯出 Excel 的過程沒有問題，可以卻在打開檔案的那一刻，出錯 error
其 SYLK 的錯誤就是檔案格式錯誤，雖然不影響觀看 Excel ，可是每次開這個 Excel 就要這樣被說一次，實在很麻煩。


說明在此:
開啟檔案時，出現「SYLK:檔案格式無效」的錯誤訊息

看了之後才知道解法不難，重點是匯出成 Excel 的前面兩個字元不可以是大寫的『I』 或 『D』，很不巧的我後端資料表的欄位，第一個 field 就是 ID...，最後只要把大寫的字轉成小寫就可以了 (我是使用 strtolower)。

使用 GreenSock 的 backgroundPosition 讓動畫在 FireFox 也能動

最近常常在使用  jQuery 的 Animation 發現，若想要對某個元素產生 animation 時，而且是更改其 css 的 background-position-x/y，在 Firefox 並不管用。雖然網路上有人也提了一樣的問題，不過我試了一樣是沒有成功。

這則 stackoverflow 的答案得到重點是

background-position-x/y is not really part of any CSS spec

以及

Opera and Firefox do not accept it

問題
因此後來為了不想繞路，後來我選擇了使用 GreenSock，去做任何某個 site 需要的 animation，而且 GreenSock 的寫法更直覺，效果更多，不料，一樣問題也發生了:

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});

解決
一樣的問題發生在 background-position 在 FireFox 不管用，後來在 forums 得到了解法(FireFox animating background position)，
你可以改用 backgroundPosition，記住，沒有'-'，而且 P 大寫，就可以解決在 FireFox 的問題:

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});

最後的寫法變成這樣 (我額外加上了 FireFox 的判斷):

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
if( $.browser.mozilla ){
        TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});
}else{
        TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});
}

Objective-C 學習筆記連結

(這一本是前幾個月在學 Objective-C 的書，不過現在已經出到第六版嘍)

前陣子寫的 Objective-C 的筆記，暫時記錄在 github 上，有需要朋友歡迎到 github repo 下載，若有錯誤的地方，也歡迎開 issue。

主網址 : Obj-C 學習 - Win Wu's Note
筆記清單 :

• Ch01 - 簡單的歷史介紹跟 Objective-C 簡介
• Ch02 - 藉由 Xcode 來介紹第一支 Objective-C
• Ch03 - 介紹 Objective-C 的各種資料型別
• Ch04 - 介紹 Objective-C 的運算式以及一些運算子
• Ch05 - 介紹 Objective-C 迴圈
• Ch06 - 介紹 Objective-C 的流程控制
• Ch07 - 介紹 Objective-C 類別(1)
• Ch08 - 介紹 Objective-C 類別(2)
• Ch09 - 介紹 Objective-C 繼承

這些純粹學習 objective-C 的筆記或許會再增加，但也或許不會再增加...

不過由於之後於 Xcode 實作，會開始需要頻繁的上圖跟解說，所以之後的筆記會放回現在這個 blog (這個...因為一直 commit 到 github 動作有點多...)，po 這邊基礎的筆記作為一個開端，告訴大家，我正在悄悄的偷偷學習的 APP  的開發思維~ Let's GO

[講座|分享-snippet note] 2014 Windows Azure Bootcamp 2014 TW

 [請小心服用] 這是昨天參加聚會的一些筆記，只是個人一些片段的內容小筆記，不一定完全正確，只是當個參考。

• Date: 2014/03/29 13:00
• 活動詳情 : http://study4-tw.kktix.cc/events/2014march
• 參與人數 : 約 60 人

Agenda

Time	Agenda
1:00 - 1:30	笑CC讓網站上雲端 - KKBruce
1:35 - 2:05	由本地應用到雲端應用：構思與實現 - 小朱
2:45 - 3:15	被雲搞死的天空 - Sky
3:20 - 3:50	資訊服務輕鬆做 - Chia Chi
4:30 - 5:00	在VM上面玩VM - 卡神
5:05 - 5:35	Azure - 加速你的創業夢 - James

[Head First Note] Ch02 - IOS 應用程式設計模式 筆記

[深入淺出 iPhone 與 iPad 開發(第二版)] Ch02 筆記

Ch02 - IOS 應用程式設計模式

這篇筆記除了是 Head First 第二章的心得之外，還包含一些延伸的學習筆記。算是非常片段的筆記，建議看過 Head First 之後再來看吧 :P :P :P

• Q: 如何規劃你的應用程式配置?
  A: 一切從草圖開始 -> 建立 GUI -> 規劃如何使用畫面的控制項 -> 處理資料。
  使用性跟美感是 iPhone 的成功關鍵。

IOS HIG 應用程式設計規則

ios Human Interface Guide (HIG，人機介面指南)

• Apple 公司有發佈一份文件作為指導如何開發要在 App Store 要賣的 APP，當你要準備送審 APP 時，你必須同意你的 APP 符合 HIG 規範。

[不專業的開箱文] Superdry Scuba 深潛探險矽膠腕錶

今天去買了自己喜歡很久的一隻手錶，極度乾燥系列。

極度乾燥不是只有賣衣服, 耳機, 手錶也都有賣，然而手機的代理跟賣衣服的代理似乎是分開的? 我還沒有在賣極度乾燥衣服的門市有看到手錶。

我很少買這種形式的手錶，但是因為色彩非常的跳，就想說買一隻來戴戴看，這隻手錶的特色如下，其實也是跟一般手錶差不多啦 xd

• 淺藍綠/38mm (SYL120m)
• 10ATM防水功能 
• 矽膠包覆錶帶 
• 日本機芯 

[聽演講的 snippet 筆記] GDG Taipei #2 - Introduction to Google App Engine for PHP

離上次聽這個活動有好一陣子了，不過還是把筆記留起來，雖然很片段...，可能各位客官看不懂，抱歉了...，可以看看簡報網址的內容 :)

• 活動詳細: GDG Taipei #2 - Introduction to Google App Engine for PHP
• 時間 : 2014/02/12
• 講者 : Nevin Chen
• 簡報網址 : http://goo.gl/i9eDKx

活動照片:

html2jade 初次見面以及使用

* 這個工具感謝先前在製作 Node.js Taiwan 靜態頁時由 Poying 以及 Caesar 介紹。

要講 html2jade 這個工具之前，我必須先講一下 Jade 是在做什麼的。
html2jade 的 github 連結

Jade 是一個 Node Template Engine ，如果你用過 Express，那麼你或許聽過 ejs，ejs 也是一種 Template Engine，硬要說成中文的話，也可以說是樣板引擎，如果你是寫 PHP 的人，那麼就像 Smarty 之於 PHP 一樣。

你可以想像 Jade 只是把一般的 HTML 轉換成用比較簡單的方式所寫成的樣板，透過 Node 的環境，進行編譯 (編譯成 HTML)，當然還有一些蠻特別的功能，比方說一些基本的樣板能夠有 includes 功能, block, mixin, filter 等等...，不過這都不是我這邊所要表達的事情，若真的要講 Jade，或許到時候再分另外一篇寫也不遲。

目的

幫你把 html 轉成 Jade。之所以介紹 html2jade 這個工具，是因為假如一個專案已經進行中，要把過去已經完成的 HTML 轉換成 Jade 來使用，只要透過這個工具，就可以幫助你直接做把 HTML 轉換成 Jade 的工作，但是對於轉換的結果，只能盡善盡美，不能抱持能夠 100% 轉換的很完整的心情去使用，就像 github 專頁上寫的一樣 『Converts HTML to Jade template. Not perfect but useful enough for non-daily conversions.』，雖然不夠完美但也夠用，至少你不需要一個一個 html 頁面自己手動轉換成 Jade。