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...