2015 Summary，每年最後一篇網誌，總是一些流水帳....

心情
2015 年的心情算是中下吧，總結一句話就是燒錢的一年，忙忙碌碌，最後好像也搞得自己一場空?! 也許是短時間內看不出成果吧 反正都過去了，也差不多迎接新的開始，要認命一點。

(攝於成都 天府廣場站)

旅行
今年去了三個國家，都不敢說自己是出去開拓視野，因為真的是出去玩 XD
* 美國-舊金山
* 日本-北九州
* 中國-成都 (現在想起來遊記還沒發佈，晚點再來整理 :P)

出國玩還蠻開心的，越來越能夠獨立的做一些事情，不過三次出國還好有都朋友幫忙，不然我可不敢一個人出國 XD  2016 年我還想要再去 1-2 個國家玩玩 :P 現在最想去的是英國吧(但是要存很多很多錢...)...

戰果
2015 在公司做些什麼我就不多說了XD，我也不能說 :D 科科。
在公司學到最多的應該是測試，接觸到 travis 的感覺很新鮮，剛開始動不動就會想要去等結果 XD，但是我寫得很爛啦 XD 很不熟其實...，還是要感謝公司同事的包容跟教學相長 XD (天吶我好官腔!!!)

2015 年的閒暇時間，總共完成 14 個專案，其中 1 個是跟新加坡人合作 UI 設計，3-4 個主要以前端切版與 RWD 為主，剩下的則為 Full Stack 狀態，開發主要還是以 PHP 為主，有些專案是我 standalone，有些是跟別人一起，coding 的對象都是比我強的人，覺得小有成就感~，只有一個案子很可惜，我跟一個很棒的 team 合作，但是成果最後 fail 了 :'(。

前端常用的整合工具，目前還是離不開 gulp 的生態，還有我也沒有追上 react，倒是 PHP 經歷 laravel 4 -> Laravel 5 的過程學到很多，對 class, interface, trait 的用法比較懂了。

說不上離開前端這個領域很遠，只是在實作上，真正應用在可以客戶所追求的地方上，我確實也無法用這些這麼潮的框架...(時間上也沒有這麼閒可以一直追新東西)，客戶多半要的是穩定，可以好找到人接手的環境跟技術。當然，有一種夥伴也會要求我用新的東西，通常那種就不是普通的合作對象，而是對方自己就是 coder XD，不過這種合作以我的狀況我是不太愛接觸(既然是閒暇時間就想做一些有把握的事)。

我現在覺得在 blog 上寫的好像很簡單似的，可是想起一些過程還算是歷歷在目的，有些情況也是很有壓力... 像是第一次接觸用 Laravle 做多國語系，串接臉書 API 做 tag 朋友, 發文功能，這些看似很平常的功能，當這些事情全部落在我一個人手上時，處處都有細節要處理。默默的開始假裝自己是半個 PM，假如一個專案上線扣除臉書 api 審核的時間，以及被退回的時間大概還剩幾天可以開發, 測試之類的。偶爾也成為朋友想要發包網站出去時的半個顧問職，朋友嘛 :) 出一張嘴的工作當然隨時都能聊聊 XD (逃)


學習
除了年初的 Bing Ad,  Google Analytics 證照之外，剩下的就是拿了五門 Coursera 課程，還有在五倍紅寶石講了6次的 Basic JavaScript (雖然我也不知道講得好不好 XD)

Coursera 的 R Programming 我上了兩次，作業沒時間寫，就沒畢業，好難過 QQ

研討會的話也常跑中研院，只是多半都是跟資料科學有關，Data Science 是離我很遠的世界 (遠目)，很遙遠但是可以刻意接觸他，反正很多事都不是一蹴可幾 (我說了成語了嗎?!)，我也不是主要靠資料科學吃飯，只是還有興趣就多聽聽，研討會的價位都算便宜了


目標
年末年初，我過的日子多半是看一些跟軟體開發有關的書，不管是把規模做大的書，還是整合工具的介紹，測試等等的。心中是有想做的事情，只是還想保留一下，因為很多事都不確定。我想我是個怪咖吧... 也許是自己快要 26 了，有點小緊張，我喜歡默默地去做一些往目標走的事情，等做到了再來說，科科 :P

新年快樂啦

我終於看完大話重構了...

之前一直看到朋友在 FB 牆上推薦這本書，買了 2-3 個月，這週終於把他看完了，適合有 coding 經驗的人，有一定的工作經驗，書本的範例讀起來會更有感覺，而且會默默地(也沒有真的到多默默啦... 畢竟目錄也有寫 :P)大概瞭解到幾種設計模式，像是 SRP, OCP, AOP, DIP, 橋接, 策略, 命令, 裝飾者模式~

最有感觸的段落是:
* 如何解決繼承氾濫
* 減少使用 if else 的幾個方法


封面講的重構七步驟其實就是:
1. 拆分大函數 (大函數是罪惡根源 XD) (Extract Method)
2. Extract Class
3. 提高程式的復用率 (DRY, 抽方法, 抽類別, 封裝, 抽取父類別)
4. 找出可擴展點 (幾個方法: OCP, hooks, AOP)
5. 降低程式依賴度 (工廠, 依賴反轉, 橋接, 策略, 命令, 組合, 裝飾者)
6. 分層 (比方說 web 是有幾種層次, MVC 層, BUS 層, DAO層等等)
7. 領域驅動設計

老實說，第9章我自己是看得很吃力，講的那幾個模式 (橋接, 策略, 命令, 裝飾者)，我有點不知道如果是 php 會怎麼實作(也許我應該去讀一下 PHP設計模式那本書)... 然後書中的範例主要都是用 java 的 Spring 框架，用了一堆 <Bean>  也是開始會有點亂掉 ><。然後 OCP 本來覺得沒有這麼複雜，看了第九章之後，慢慢 fadeOut 了~ 可能我要再過一段時間再回來看這本書吧... 等級沒這麼高，還需要時間培養一下...


最終的重點就也是那些網路上大神的常談:
1. 有時候無招勝有招，學了 Design Pattern 不一定要急著用在自己的專案上，主要還是要考量情況
2. 沒有人可以一次重構就到位，小碎步前進
3. 重構是一種習慣，重點在於你有沒有這樣的意識


看完之後，確實手癢癢，可是主要是如果有人帶你學這些，會更快，我也希望我早點遇到一個可以教我 refactor 我的程式碼的人。以重構七步驟來說，1-3 step 都曾經在工作上有前人的教導我才慢慢起步。

(我是很想學重構，也算有興趣，只是時程有壓力的話，我承認還是拋開我的羞恥心了...，客戶是我的老大)

Meteor 安裝 jQuery validation

用 meteor 指令安裝 jQuery Validation(套件網址)

指令:
meteor add themeteorchef:jquery-validation


用法:
一樣參考套件網址，主要有兩種做法，一個是把驗證的設定寫在 input 的 attribute 裡面，像是 <input type="text" name="name" class="required"> ，但是一樣要用 js 去呼叫 validation 執行($("XXXX").validate())。

另一做法是把驗證的規則寫在 validate 的 options 裡面。像是:

基本上做法一,二都會在 onRender 的地方呼叫。
記得也要把 submit 那顆按鈕的預設行為取消 (submit preventDefault 那一段)，不然也許邊驗證時也早就 redirect 到 action 出去的頁面了 XD。

樣式改寫 for Bootstrap:
因為 jQuery Validation 在驗證到錯誤或是未填的 input 時，會在 input 附近塞入 error message，但是預設的樣式並不符合 bootstrap 的樣式，像是:

為了讓錯誤的樣式符合 bootstrap 的樣子，要改寫一下 jQuery Validation 的 setDefault 的一些 method，像是 highlight, unhightlight...，但是因為整個網站下，有很多頁面只要有用到 jquery validation 的地方都必須要改寫驗證，為了節省一直複製貼上這一段到每一個頁面/template 的 onRender 去，所以我把這段改寫放到 Meteor.startup 的 function 去(我在根目錄下新增一個 startup.js 來擺這段 code):

改寫後，暫時符合預期:

其實在網路上有找到兩個解法，這個是我用起來比較順的，只是寫出來分享一下而已，也不知道好不好~自己斟酌摟 :P。

參考:
http://jsfiddle.net/m2o6c2vj/3/
http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin

讓 Meteor 在換頁時頁面定位到最上方

最近在用 meteor 搭配 iron-router 做一個 web 後台的雛形出來，但因為 meteor 的設計還蠻特別的，所以有些行為跟一般做換頁的網頁效果不太一樣，主要是比較像是 Single Page Application，你在換頁的時候感受不到瀏覽器有在重新 loading 的感覺，所以換頁時，你的 viewport 可能會停留在上一頁的看到的地方，為了不讓 user 感到困擾(<- 視頁面情況..)，在 github issue 上面找到一個解法，要在 iron-router 的 filter 加上一個方法，這個方法用來讓頁面捲到最上方，然後把這個方法掛在 Router 的 onAfterAction。


(＊ 我的 meteor 版本是 Meteor 1.2.1)

那一串 github issue 有很多討論，但是我是用這個方法。
有成功拉，好險好險 :)

2015 年末的小認真之 Coursera 上上課

人生啊...

課程

(1) Courser 的延世大學 - Big Data, Cloud Computing, & CDN Emerging Technologies

12 月最先開跑的學習是關於 IoT 的一些基本觀念，首先上的課程是 Coursera 延世大學的 Big Data, Cloud Computing, & CDN Emerging Technologies，這真是一門基礎到不能再基礎，而且濃縮所有基本觀念的課程，w1 真的就是在講一些 big data，w2 是 Hadoop 的基本觀念，是有稍微提到 YARN, 還有一點點 RDBMS，w3 就是 CDN 的觀念跟這個產業的幾個公司，大概知道一下那個市場範圍在哪裡，但是光看課程是感受不出技術上的難度跟落實的難度有多複雜啦，anyway 我只是有時間的時候當作影集在看，題目也蠻簡單的，有認真上一定 pass. 雖然我最後只拿80分結業，汗顏 XD

哦對了老師好像是韓國人?!，雖然我覺的老師的英文腔調很特別，不過聽到 w2 就習慣了啦 :D
老實說這種基礎觀念的課程不拿專項課程真的很可惜，不過就看我時間，其實我是很想整個專項都拿下來。哎，循序漸進嘛... 資質卑劣.. 太難的我也不懂啊

(2) Coursera 杜克大學 Java Programming: Solving Problems with Software

Duke 大學的 Java 課程很有條理，我覺得蠻推薦的，而且這門課超級不太 web，但很有新鮮感。Duke 設計這門課程還寫了一個叫做 BlueJ 的工具，上課講 code 都是用這個工具，我是覺得蠻適合 Java 新手，是還蠻厲害的!

week1 教你用 java 去選取圖片，然後針對圖片做簡單的影像處理，像是灰階, 或是 RGB 中間兩個色系互換之類的，聽起來很難但真的... 不難 QQ w2 開始就有點複雜了..。

w2 課程是要教你在 DNA 的 String 找出基因，但其實就是在教 String 的操作啦! 但我覺得上起來相對蠻悶的 XD 有點難，w2 後面段是要教你爬網頁的 html 的內容，像是找出幾個 link，哪些 link 是 https 結尾等等。

w3 是 CSV 檔案的處理，上這堂課才知道 CSV 是一個 standard XD (IETF RFC 4180: comma separated values)，然後用 apache CSVParser 這個 lib 去練習寫 CSV Parser。

anyway... 我還在修，但我覺得我不會 pass

(3) Coursera 約翰霍普金斯大學 A Crash Course in Data Science

Executive Data Science 數據科學管理專項課程是最近才看到的課程，比較輕鬆引導式的方式，我還差三門要上，現在就只有上 Cash Course in Data Science 跟如何建立 Data Science Team，但這門課很基礎，所以，想知道什麼就自己去看看好了，課程很短。


(4) Coursera 約翰霍普金斯大學 Building a Data Science Team

如何建立資料科學團隊，這是接續上一堂的課程，看完之後覺得... 哎呀 台灣有幾家注重資料科學團隊的公司?! 有幾家願意投資時間做資料科學的?! 因為做資料科學是很有挫折的事情。也許花個一年半載的，才有機會發現有 value 的東西，可是願意讓這種團隊在公司待個一年半載才看到成果的公司，少之又少的 feel~ 錢跟時間都要燒得起QQ。我是覺得跟公司文化有很大的關係(不確定? 只是覺得...)


(5) Coursera 倫敦大學 & Goldsmiths, University of London  的 Introduction to Meteor.js Development

在過去一年曾經整年都在用 node.js 寫 web application，只不過用的是超輕量的 koa.js，在過去用 node.js 的期間常耳聞 Meteor 這個 framework，但就是台灣用的人太少了 (->也許是我朋友太少!?)  剛好趁這個機會探探 meteor 的用法。

上這門課只是開開眼界，多看看不同 framework 的做法，至於好不好很難評論，一個 framework 就是一種生態， by case 你會有你想選擇的 best one, 也沒有好不好的問題。

結論就是 Meteor 跟 MongoDB 是蠻搭的，只是我手邊沒有案子可以玩這種架構。上完的心情就是我很愉快但是 see you next time.  真的想不出拿時候用的到，maybe 做個網站或是 app 的 prototype 會有機會。


目前生活總結
本來正在寫 PHP，後來劈腿 Java，還跟 node.js 繼續曖昧，現在處在一個很亂的關係當中

很窮但很快樂.  希望心想事成!

現在還有幾堂課正在上，有什麼心得就再說啦! 考驗我的意志力

Mac 安裝 Eclipse

最近開始在看一些 Java 的書，比較尷尬的是現在最新的 Java 是 8，但是很多書都還是 Java 7。

要寫 Java 就要先安裝 JDK (Java Development Kit)，也不是第一次學程式了，這些基本的 SOP 上網 google 一下 XD

IDE(編輯器)的話，你可以選擇裝 Eclipse 或是 NetBeans IDE, 或是 IntelliJ IDEA。

因為還是 Java 新手，圖書館的書隨手一拿，我看書的是歐萊禮的 Learning Java Foutth Edition (<- 但我並不覺得這是本很好的入門書 XD 需要有寫過一點程式的經驗再看比較適合)，書上的範例用 Eclipse。 在 mac 上推薦裝 Eclipse IDE for Eclipse Committers X.X.X (我是裝 4.5.1)。但是檔案非常大(約 243 MB)，如果你跟我一樣在星巴克而且手機沒有吃到飽請你先別衝動。

另外安裝 Eclipse 也要先安裝 Java Runtime Environment (JRE)。
基本上，缺什麼就裝什麼，警告訊息會帶你到正確的路。

Mac 安裝 JDK 的路徑

剛剛在跑 android studio 的時候
那個 JDK 的位子一直說我只有 jdk 1.6.0
但我裝了 jdk 1.7.0, 1.8.0  都沒有看到
原來是目錄錯了...
因為它裝在  /Library/Java/JavaVirtualMachines 目錄下
而 Mac 本身就有裝 Java，天生安裝好的 Java 路徑是在  /System/Library/Java/JavaVirtualMachines

所以，指定目錄的時候，不要跑錯地方，不是沒裝好 JDK...

如何比較無雷地安裝 PHP7

前幾天同事 R 內部分享了如何正確地安裝 PHP7
據他本人分享，踩騙千千萬萬個雷，歸納出來的重點是:
『看 Laravel 的老爸怎麼裝，就怎麼裝!』

別說編編沒有讓大家看到這篇的重點，
https://github.com/laravel/settler/blob/php-7/scripts/provision.sh
這是實用的 script，
如果你是用 aws 起 ec2，在 user-data 的地方只要貼上這個 script，
如果你不想整包都靠這隻 script，那就看 script 把你不要的地方捨去掉，
主要是這包 script 把一些東西都裝好了，除了 php7 之外
composer, hhvm, nginx 什麼的都會裝。

台胞證申請

最近辦了台胞證
去旅行社跟櫃台說 你要辦台胞證
會給你一份申請表格，帶著你的

1. 照片
2. 護照(有照片的那一頁)影本
3. 身分證正反面影版本

還有費用，因為我是普通速度案件，所以 1300 台幣(急件會比較貴)，不包含申請當天，五天後可以拿到。

如果你想幫別人代辦，也ok，但建議先去旅行社拿那張申請表，因為表格下方需要申請人簽名。

表格比較有趣的是，職業不能亂填，有一張表可以對照，然後填寫表格的職業文字。


大概是這樣，沒什麼特別的，接下來就是機票，跟換好人民幣，就可以出國啦!
如果你跟我一樣都是 Android 的手機，記得出國前把必裝 app 裝好，像是 VPN 工具，滴滴打車，大眾點評，QQ，WeChat，百度地圖等等。

translate3d 為什麼會讓子層的 css position fixed 失效... ?!

在處理一個 header 位子要固定的問題時，發現怎麼樣也都無法 fixed

超級詭異....

找超久才發現原來是因為我在 body 加上了這個 css 屬性: 

-webkit-transform:translate3d(0, 0, 0);

-moz-transform:translate3d(0, 0, 0);

原因不明，我也想知道為什麼，如果有人知道，請告訴我謝謝 :)

這是造成無法 fixed 的 demo:

http://jsbin.com/suroginozi/edit?html,css,output

如果把 body 的 transform:translate3d 拿掉，就正常了..... 

來個參考連結:
https://code.google.com/p/chromium/issues/detail?id=20574
http://www.w3.org/TR/css3-2d-transforms/#transform-rendering
http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue/15256339#15256339

人生第一次去日本之九州九天的觀察

當你對人生感到煩躁的時候，就只能靠旅行來排解了。

PHP 進行斷字還是用 mb_ 開頭的好?! (substr v.s mb_substr)

我們常在什麼 XX 列表上，有時候因為一行文字過長，所以會有想把文字做截斷的動作，比方說 『i love you so much, do you know』，假設這段文字剛好擺進 div 時就是會過長，所以我想要把他截斷成 『i love you so much, do...』，最後還故意加了 ... 來表示。

假設這個問題只會發生在單行文字，那我會建議你用 css  的 ellipsis 解決掉，因為單行的段字做 ... 結尾用 css 蠻快的，但是發生在兩行或三行是就不能用 css 了。

這裏有一段很簡陋的程式碼，用意是每一筆 title 我都會判斷它的長度是否超過我認為的最常的可能性 (目前看起來是我希望他不要超過 39 個字)，過長我就會用 substr 把它截斷，從第 0 個位子截到 39，最後補上 ... 字串：

不過很可惜這樣的做法有問題，我假設我存在資料庫的字串都是正確的字符編碼，可是經過這個 substr 截出來的字串，卻讓我得 � 奇怪的詭異符號，為什麼？！

經 google 發現原來 substr 算的是 bytes 而不是 characters，取而代之的是，如果你使用 mb_ 開頭的 function，可以額外處理 multi-byte encodings 的部分。

後來我用 mb_substr 將以上的程式碼改寫了一下: (要注意 function 的參數跟 substr 數量不太一樣)

每次在追這種怪問題都覺得心疲，但是得到解答後就覺得好多了

這個需求讓我想到以前工作的一些經驗，因為英文字跟中文字算出來的大概要擷取的數量是不一樣的，所以... 挺麻煩的。有時候 不要為了一些沒必要的堅持而堅持。

如果還有什麼不瞭解的地方可以 google substr vs mb_substr。

只是我還是不知道，到底在什麼情況下，我們會只用 substr ?

Rails Girls Weekly - JavaScript Basic For 6 Weeks（5/6)

剛剛上完了第五週的課程 jQuery 基礎，其實是真的非常基礎 :P 花了一個多小時帶一下。另外也有提到 Framework 跟 library 是不一樣的概念，如果想學 jQuery，把 css selector 弄懂很重要，如果你是初學者，可以學習以下兩個網站為開端:


http://flukeout.github.io/
https://www.codecademy.com/en/tracks/jquery

[隨筆] 用 css mask-image 做遮罩

晚上剛好幫我朋友看一個 colorbox 的問題，起初我以為只是一個改改 css  border-radius 就好的問題，沒想到弄到最後竟然去找 mask-image 的方法。

情況是他希望在 colorbox 打開時，四邊都維持某種程度的 border-radius，但是在 colorbox 的 iframe 裡面，當你 scroll 時，border-radius 就失效了，其實不是失效，而是裡面的 div 的背景色本來就存在於那個區域，所以 content 是滿的沒有錯

廢話不多說，我只能講最後我用了這個方法，他使用了 mask-image 的方式去做遮罩的概念，在 colorbox 那一個 iframe 做這層，就可以一直 mask 四邊都有 border-radius 的效果:  How to make CSS3 rounded corners hide overflow in Chrome/Opera。

改完之後不管裡面怎麼捲，都能維持外框有 border-radius 的情況:

太久沒有好好研究 css，已經退化到這種程度也真是一種悲哀。
因為 colorbox 一直都是網頁製作 popup/lightbox 當紅炸子雞的套件，所以我還是記一下，以防以後有需要用到又忘了。

Rails Girls Weekly - JavaScript Basic For 6 Weeks（4/6)

昨天本來要發文，但是想說早上還要去參加 phpconf 2015 所以就早早睡了 :P

week4 講了基礎的 array, object 怎麼定義，還有 JSON，雖然講到 JSON 有點難了..sorry。
因為加了一小時講一點怎麼 commit 到 github，所以昨天有兩個 slide，只是最後 live demo 的時候沒有成功，不知道網路還是 github 怎麼了，有點可惜就是.. 下次我還是不要嘗試做這種 live demo 的事好了 QQ

老實說簡報都很基本，但是還是要看個人的接受程度，也有有些人會覺得很難，只是有些事情，就算當下的聽眾不能接受，我還是必須說一下，主要是因為這些都是"定義"，該描述出來的事情還是得說一下...。