2016年3月12日 星期六

最近看的一本書,華爾街之狼從良記


華爾街之狼從良記

上週末偶然在書店看到的一本書,剛好他也沒有打折但我很有興趣,買回家看看,非常喜歡這本書,作者描述他在華爾街上班之後的人生,以及之後跟巴菲特共進一餐,身邊遇到一些良師的過程。

不知道該不該推薦給大家,只是我很喜歡看這種調性的書,而且也因為這本書,我才知道基金, 債卷的世界太複雜,這本書的描述,讓我覺得華爾街是個不缺人才的地方,每個人學歷都不差,卻是滿滿的競爭世界,既不像是團結,反而像是想辦法從投資人身上賺到錢的高材生,可是手段卻不一定是良的...

前面兩三個章節我覺得挺精彩的,後面就稍微平淡一點,但也是有特別的地方,包含作者經營自己的公司,持有一些基金,遇到的一些錯誤,另外他也有分享一些他做投資的幾種原則。

後繼有列出一些作者提供的書單,我覺得還不錯,他列的書不一定都是跟經濟 金融有關,有幾本我也很有興趣!


心得就是,金錢的遊戲應該不是我這種平凡之人能夠玩得起的,但是引以為鑒,有很多做事的方法,也通用在其他工作內容上.

2016年3月11日 星期五

鐵三角 ATH-MSR7 不專業開箱文


上週末難得有空去逛逛街,買了這隻鐵三角的 ATH-MSR7,其實只是路過看到,喜歡就...買了,其實我很少用耳罩式的耳機,只是最近會喜歡躺在床上聽音樂,既不用戴眼鏡,好像很適合買一隻耳罩式的回家用用!

2016年3月10日 星期四

Apache 開啟支援 SSI 功能

幫忙起一個我完全不熟悉的 Web Site 在 Apache 上,副檔名是 shtml,而且 shtml 裡面夾帶很多 <!--#include file="/XXX/XXX" --> 的這種格式,而我去 google 這種 include 的方式要讓 Apache 讀得懂,要開啟 SSI (Server Side Includes) 以及開啟 Include 。

主要的做法,請參考 http://httpd.apache.org/docs/current/howto/ssi.html,其實寫得很清楚~

而且, <!--#include file="" --> 好像不是 apache server 在看的格式,好像是 IIS 系列的 server,我後來發現 apache 根本看不懂 include file 這個詞,還要把 file 都換成 virtual 這個單字才行,否則爬出來會得到 [an error occurred while processing this directive] 這樣的錯誤訊息。 (如果有人知道怎麼讓 apache 也看得懂 file 這個詞來做 include 請跟我說 Orz 謝謝你!但前提是不改動 include 這個單字)

首先先讓你的 apache 啟用 Include, rewrite 的功能(rewrite 要不要我忘記了.)

1. apache 要開啟 include 的功能
a2enmod include

2. apache 要開啟 rewrite 的功能
a2enmod rewrite
記得重啟 apache。


接著 apache 修改的部分,修改 httpd.conf,在 Options 的地方加上 Includes。像是:
<Directory /var/www/>
        Options Indexes FollowSymLinks Includes
        AllowOverride All
        Require all granted
</Directory>
或是你只把 AllowOverride All 打開,然後在專案目錄下透過 .htaccess 來複寫也可以。如果你是想用 .htaccess:

.htaccess
Options Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
AddOutputFilters 加入 .shtml 表示只要付檔名是 shtml 就先經過 Inludes 的過濾,假如你的  <!--#include virtual ="" -->  是寫在副檔名是 php 的檔案情況下,則 AddOutputFilter INCLUDES .php .shtml,只要再加上 .php 就行。


就這樣,我 try 了好久,發現雷踩在根本忘記 a2enmod include 開啟 apache  的 include 模組。當初還以為 php -S 的方式就可以讀這種 include 的方式... 結果路要繞道用 apache 的方式去看, IIS 我又不熟 ... 不過好險,至少可以看到畫面了 :P

[過程記錄] Mac 上用 Docker 起 apache server

需求: 用 Docker 起 Apache Server,並且將 local (本機) 的 web 資料夾 Mount 到 Docker Container 的 web 資料夾。

安裝 Docker Toolbox
首先要安裝 Docker Toolbox,(昨天發現我還停留在 boot2docker...),進到官網,按下載,因為我是 Mac 所以我選左邊 Download~

2016年3月8日 星期二

[Bootstrap 補充技巧] Bootstrap 讓 Grid 的項目 column 能夠等高

怎麼讓 Bootstrap 的 Grid 的 column 等高呢?! 好奇怪感覺這需求應該很早就應該出現,結果我這幾天才發現到..

舉個例子,如果你每個 column 內容不一致,那麼每個 Row 的內容高度也會不一致:
(我用 jsbin 來寫 sample code),會向右邊那樣,我預期希望黃色跟藍色的區塊可以跟紅色的等高:


後來 Google 發現有人幫我處理好這個好用的功能了,他是利用 display 的 flex 的屬性來達到每個 column 等高,請參考 http://getbootstrap.com.vn/examples/equal-height-columns/。 用法文件寫得很清楚,要引用這個作者寫的 .row-eq-name 樣式 ,然後在需要等高的 row 上附加這個 class name .row-eq-height 

Example: <div class="row"> 加上 row-eq-height <div class="row row-eq-height">

注意事項
* Flex 只支援到 IE 10
* .row-eq-height 可能會改變原本的 column wrap 的行為,所以還是得取捨,至於差別在哪,你多測測 螢幕小一點的時候就知道了,原本設定的 column 變化可能會因為 row-eq-height 而有點不同哦!


2016年3月7日 星期一

新工作就這樣快開始了..


從去年 11 月離職到現在,大概也休息了快四個月了。

這四個月發生好多事,書我大概看了快15本,學了一點 Java 的皮毛,看了一些重構, 團隊合作方法的書籍。心裡是很滿足,如果可以一直這樣悠哉下去該有多好,可惜我也不是有錢人,在台灣現在這種經濟狀況下,還是要賺錢啊~

至於工作,這次求職主要都是主動出擊為主,恩.. 畢竟前兩份工作都是靠推薦/認識而錄取,我希望這次多多少少是零人脈關係而取得的工作機會,當然也有幾次面試的公司還是朋友介紹 Orz..,其實朋友介紹的工作也不錯(只是我有時候內心也會想,是不是大家當朋友會更適合呢?! )

前幾天我才跟我朋友說,我好想再休息一下。然後就被電了..."你還想再休息啊! 你已經休息很久了耶!",想想也是,我大概是個停不下腳步的人,硬要把自己弄得好忙好忙,再來靠腰自己好累,這個性子到底是怎麼來的...

Anyway, 我希望很順利 :)

Samsonite RED VORTEC 不專業開箱文

一直很想換一個平常上班也可以背出去的電腦背包,主要是可以放電腦,因為我出門幾乎會帶著電腦,這樣隨時可以工作。我上一個包包是 Outdoor,用了將近三年,因為質地太軟,我還因為這樣買了一個殼來裝筆電,再來是內容物不好喬位子,光是充電線就有兩三條。所以我這次換電腦包主要是想要有點殼狀的,最好是內搭筆電保護層,接著夾層多是其次。

然後我就買了 Samsonite RED xd,其實本來是想買李敏鎬代言的那一款,但是因為現場背,發現我真的不適合那種藍色,QQ 殘念,最後買了最新款,也是沒有打折的一款... Samsonite RED VORTEC! 定價台幣 5700。(如果你買到更便宜請不要告訴我謝謝 TT)


考量到我的工作習慣,我需要的包包實在太需要夾層了,不過我發現 Samsonite 的背包,夾層都不少(這款還不算多呢..)。






購買時會給保證書:

整體的感覺我覺得還是要親自到店家背背看才準,我昨天在網路上物色的款式,背上去都沒想像中喜歡。不過有一點我覺得蠻出乎我意外之外的是,Samsonite RED 我覺得挺耐看的,其實我本來沒打算買這款...,但到實體店面之後,看久了還是決定帶他走了~

至於紅色會不會很高調,其實是有一點拉.. 但我是覺得搭配衣服不會太難...,再來是還好他有一條藍色的滾邊,降低了一點高調的程度。

我就不放我本人背起來的樣子了,這種包包只有韓星背起來才充滿夢幻感,至於我,不過就是個南部來的台灣工程師而已,我怕這一放,降低大家想購買的意願 XD



接下來又得繼續努力工作了...

2016年2月28日 星期日

laravel 一個 input 的值同時用來搜尋多個 column

如: 同一個 search input 的值想要搜尋好幾個欄位,可以用 whereNested。

Example: 
if (isset($query['query']) && $query['query'] !== "" ) {
    $q->whereNested(function($seq) use ($query) {
        $seq->orwhere('name', 'LIKE', '%' . $query['query'] . '%');
        $seq->orwhere('subject', 'LIKE', '%' . $query['query'] . '%');
        $seq->orwhere('address', 'LIKE', '%' . $query['query'] . '%');
        $seq->orwhere('description', 'LIKE', '%' . $query['query'] . '%');
    }, 'and');
}


不確定有沒有更好的方式。

參考 http://stackoverflow.com/questions/15167770/laravel-eloquent-search-two-optional-fields

Laravel 5 以上請參考:
https://laravel.com/api/5.2/Illuminate/Database/Query/Builder.html#method_whereNested


2016年2月23日 星期二

Swiper 套件在 Bootstrap Modal 裡面會失效

如題,如果想知道為什麼可以 google 一下: swiper in bootstrap modal.

然後把呼叫(使用) Swiper 的地方,包進 Bootstrap Modal 的這個 Event 裡:  shown.bs.modal 。

$thisModal.on('shown.bs.modal', function (e) {
   // init Swiper
  //   var swiper =   new Swiper('.swiper-container-bank-query', {});
});


2016年2月14日 星期日

[看書] 告別瀑布,擁抱 Scrum


告別瀑布,擁抱Scrum:解析微軟與Adobe如何在30天內開發出新軟體

呼~~ 年假最後兩天把這本書看完了,因為書沒有很厚,所以也很快就看完了,心得 : 推!

這心得這樣寫雖然很敷衍...,但我覺得怎麼寫也不會在這裡把 scrum 的內容都打出來。不過我建議看書的話把重點放在 Scrum 本身,暫時就不要管那個解析微軟, adobe 如何在 30 天開發出新軟體這件事,重點是 Scrum 的 case study 是很值得一看,當然有成功,也有失敗。(我在猜想 30 天只是在強調 Scrum 的每個 Sprint 不要超過 30 天而已...)

老實說我也有待過使用敏捷開發的公司,30 天為一個 sprint 我還沒有遇過 XDD,我都是 7-14天的那種週期 sprint。可能是因為當下 run 的專案都很小吧.. 畢竟都是網站類型,稱不上什麼大型架構, 或是多個子架構, 部門協同開發之類的...

至於瀑布型的開發方式,我的第一份公司就是這樣 run 的,對我這種急性子的人,實在有點待不住,我在想,慣老闆應該會喜歡 Scrum 吧?! (逃, 畢竟 Scrum 可以定期看到增量...,有一種老闆就是急急急),哎 不過也不一定啦,畢竟 Scrum 很重要的一點就是開發人員要誠實的面對自己的進度,團隊要誠實的面對增量,如果每次都是假象的新增一點增量,最後導致成果根本沒有品質可言,隨便一測都要被客戶罵,那就沒有意義了...

這本書的後面附錄,感覺很像在複習前面講的內容,有一個是 Scrum 指南,網路上有,你有興趣也可以看看 http://www.scrumguides.org/docs/scrumguide/v1/Scrum-Guide-CN.pdf。


不知道為什麼。看完之後,好想去上個課.... 我想看書 v.s 實際有人用白板教你怎麼 run Scrum 應該很不一樣 :P


情人節快樂.

2016年2月13日 星期六

用 Sketch 匯出 Android APP 的 ICON

自從有了 Sketch 之後,匯出 Ios, Android 的 app icon 確實簡單多了,而且基本的 size 都有,偷懶的時候連 photoshop, Illustrator 就都不開了,也不用自己裁圖。

其實我用 sketch 的時機很少...,真的只有跟 Mobile 有關的應用才會打開它...。

在寫這篇文章時我的 sketch 版本是:


1. 新增一個 project
『File』-> 『New From Template』-> 『Android Icon Design』

接著你會看到這樣的 Layout


2.  擺上 Logo 配置到每個區塊

預設的 Layout 的名稱是有意義的,預設的 size guide 可以看到有  mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi 等等,對應的 px,Sketch 都規劃好了,你也可以參考 http://iconhandbook.co.uk/reference/chart/android/, http://developer.android.com/intl/zh-tw/guide/practices/screens_support.html。

其實從官方的文件上看,icon 的 size 其實是蠻多的,預設的 template 只是把部分的 size 列出來讓你編輯,但我想也夠用了啦 XD。

3. 匯出 icon
選擇 File->Export。



(附帶一提: 從 File->export 會匯出 Layout 上所有的 icon 組合。如果你想要匯出單張的,可以按下單張 icon,從右下角的 Export 開始:

)


4. 選擇 Export 的路徑

File->Export 後選擇要匯出的 Slices。


全部匯出後到當時選擇的資料夾查看:

這樣就行了。另外我有把檔名換掉,因為我不需要 _APP 這個名字出現在檔名中 (當初忘記在 sketch 編輯時就改掉 :P),只是方便覆蓋現有的 icon 而已。

使用這些 icon 的方法就是1. 直接複製到 Android 專案下的 icon 圖檔路徑,像是 專案名稱/app/src/main/res/ 底下,找到對應的 hdpi 的資料夾,把 icon 複製過去就行。

另一個方法是直接對圖片做複製(ctrl+c),然後在 Android studio 到對應的 folder 按 ctrl+ V做複製,android studio 很聰明,會問你是不是要覆蓋圖片,它會幫你處理的~


其實 IOS 的 icon 也是類似的手法,如果 Sketch 預設的 size 不夠你用,就自己再補 slice 上去吧!


測試
欸.. 當然就是跑跑看摟 :P 實機或是 AVD 都跑跑看!


2016年2月12日 星期五

Android 學習筆記 glUtilsParamSize: unknow param ...

在 Android 放 WebView 時,利用 AVD 跑 app 時一直出現類似這樣的 log:
02-12 18:07:53.976 7739-7808/today.winwu.blog.demoApp E/eglCodecCommon: glUtilsParamSize: unknow param XXXXXXXX


而且是一次來好幾個.. 上網查原因 http://stackoverflow.com/questions/29450746/how-to-solve-webview-error,是因為我使用的 AVD 設定有勾選 Use GPU Host,導致 log 一直出現。換成真正的手機就沒有這個問題了...  如果很在意的話,請繼續往下看...

如果要暫時解決這個,1. 改用手機測試,就不會出現這個 log。2. 把 AVD 的 use GPU Host 暫時關掉吧... 但關掉之後也會有一些額外的 log 會出現,只是至少比 glUtilsParamSize 還要少很多行 log...


勾消 use Host GPU 之後再重新 run 一次 app 吧。(記得開回來就是..)

怎麼覺得花了二十分鐘發現這個問題,內心  囧囧的...

Android 的 SQLite 學習筆記

Android 內建可使用 SQLite 資料庫。但是 SQLite 是屬於內建在系統裡面的 Database,如果資料量不多的話,可以考慮使用。 (通常我是不太用 SQLite, 我都接 API 的比較多...,但如果不是一些很重要的資料,只打算存在該支手機上的資料,我也會用這種方式存 XD)

2016年2月11日 星期四

[學習現場] ECMAScript 6 Tutorial

今天在看一篇 http://ccoenraets.github.io/es6-tutorial 的教學,覺得很有趣,但也採了一些雷...不過也蠻推薦想要學習 ES6 的人可以看這篇,真的是蠻簡單的 intro. 值得一看。


遇到問題
(1) 6. Setting Up Webpack 章節
這個章節主要是希望引導介紹 module 的概念,ES6 支援 module,但是 ES5 本身就沒有 module 這個 feature,但是當你編譯 ES6 的 module 到 ES5 的時候,編譯還是要靠第三方的 lib 讓 ES5 也能實作該 module,而這類的第三方工具,很有名的像是 webpack, Browerify,當然文章有提到 babel 兩種都有 support,但是文章以 webpack 為主。

所以,需要加入 babel-loader 以及 webpack 這兩個 package:

npm install babel-loader webpack --save-dev

但是加入 npm webpack 到專案的時候出現這個 log:  The package webpack does not satisfy its siblings' peerDependencies requirements!

就我猜可能是 babel-loader 需要的 webpack 版本可能相依性的關係... (單純猜測...)。

npm install babel-loader webpack@1.x --save-dev 就行。

參考:
https://github.com/webpack/webpack-dev-server/issues/6

Mac 安裝 MongoDB (Mac brew install MongoDB)

我是用 homebrew 安裝 Mongo 的,指令為 brew install mongodb
安裝之後要記得按照他給你的 command 執行,如 ln -sfv /usr... 那一段



安裝後直接用 mongo 指令就可以進入到 cli 的狀態:


初學 mongodb 可以看看這篇文章:
MongoDB 指令的使用與方法

~end.


Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...