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 網頁