發表文章

目前顯示的是 五月, 2016的文章

Angular Smart-table 的 st-search not working in IE, Firefox

Angular 的 Smart-Table 的 st-search
我照個官方範例做一個 <select st-search="xxx">

但在 chrome 正常,而 IE, firefox 無法正常 filter 這個 st-search 的條件。

在網路上找很久發現有人多加了  st-input-event, st-delay
 <select st-search="XXXX" st-input-event="change" st-delay="0">
結果還真的 work 了...

angular templateUrl 位置

app.directive('XXXXXX', function(){   return {     templateUrl: location.protocol+ '//'                   + window.location.host                   + window.location.pathname                   + 'js/XXX/XXXXXX.html',

just Example.
因為換了一台主機發現 website 目錄被動過再深入一層 folder,結果寫死的 url 就會有問題,只好那種方式來判斷,拿到一定ok 的 Template Url。

Epson Smart Canvas 拉拉熊手錶 不專業開箱文

圖片
前幾天在新聞看到拉拉熊的手錶,(其實我也不管他是什麼手錶,總之看到超喜歡...,而且我還因為這隻手錶捨棄田馥甄代言的星辰錶...,現在那隻錶送給我媽媽了 :P)

立刻 google 看看台灣能不能買,結果發現 pchome24H, yahoo 都有在賣了,但因為習慣在 pchome 買東西,訂價台幣5490,所以一衝動就...  (從不同通路買可能會有不同的贈品,但是手錶, 錶帶價位都是一樣的)


24H 到貨超快速,現在在 phhome 買還送一個馬克杯 (雖然我沒有很喜歡...)
另外加購錶帶,可以延長保固一年哦!

但因為官網實在太難找到加保一年的登入點到底在哪裡..
所以這裡放了傳送門,如果你也有加購錶帶的話,請往這裡(要先去 Epson 官網註冊會員): https://www.epson.com.tw/epson/mbrclub/ismember.asp?event=SCSPE1606
(這個表單,要填的資訊蠻多的,填完之後要列印,連同購買證明例如發票等等,寄到活動的地址去)。或是你從活動網站上看 http://www.i-direct.com.tw/demo/Smart%20Canvas/#



盒子打開後,有說明書,保證書等等。 放心是中文XD

主要要注意的就是,手錶雖然有基本的防潑水,但不要拿去有蒸氣的地方,例如拿他去泡三溫暖....。


外面的一個殼...





整體看下來只有一個缺點:  電池無法自己更換,若沒電就只能寄回原廠處理了。(看說明書的意思應該是這樣沒錯...)。另外雖然叫 smart 但是沒有特別 smart 的功能,對我這種長依賴 3C 的人來說,他就是一隻....電子錶...

大概是這樣。若你有興趣
(1) 活動網站 http://www.i-direct.com.tw/demo/Smart%20Canvas/#
(2) 產品手冊下載 http://www.epson.com.tw/SportHealthSensingApplication/W2-RK10110/Drivers-Support

其實日本的 Epson 出的 smart canvas 有很多種...只是台灣有進的很少,不然我好想買星際大戰... 大概是這樣拉。因為這隻手錶讓我又關注 Epson 起來了,我對他的印象一直停留在還在讀國小時,當時很需要的...印表機... XD。


React Native 的 android 上的 Debug JS Remotely...

圖片
在 android 模擬器上面,我找個 『Debug JS Remotely』 找超久...
官網只說要找一個 menu button... 但我的找不到...
誰可以跟我說在這個畫面上哪一個叫做 menu button...



後來 stackoverflow 發現靠指令:  adb shell input keyevent 82 
也能叫出這個 menu buttons, 真是太好了 (淚奔!)



如果你在按下 Debug JS Remotely  之後出現紅背景,建議重啟動,跑 avd 以及 react-native run-android.。


(但我的紅背景是因為 geolocation 權限還沒有加上去 XD)

參考
Intro to Debugging React Native (iOS and Android) (蠻推薦)
cmd : react-native run-android on every file change

成長駭客常用工具箱

在范冰寫的這本成長駭客,列舉了一些成長駭客的工具箱,覺得還不錯,紀錄一下:

1. Google Analytics
2. Mixpanel (https://mixpanel.com/)
3. kissmetrics (https://www.kissmetrics.com/)
4. Usercycle (https://leanstack.com/usercycle/)
5. customer.io (https://customer.io/)
6. optimizely (https://www.optimizely.com/)
7. basecamp (https://basecamp.com/https://basecamp.com/)
8. 友盟 (https://www.umeng.com/)

這本書蠻不錯的,推薦!

React Native 的 Image 以及觸控

閱讀資訊: 以下文章常會見到 "RN" 字樣,我用來代表 React Native。 此文撰寫時,React Native 的版本為 0.26。 其實我也主要是在讀官方文件而已 XD 這篇文章寫的部分你可以對應到 <歐萊禮 React Native 學習手冊> 的第四章。
樣式
React Native 偏好重複使用有樣式的元件,而非重複使用樣式。p.48 <歐萊禮 React Native  學習手冊 - 使用 JavaScript 打造原生 App.>RN 的程式不能跟 React 用在 web 的共用。記得 RN 是 “Learning once, write anywhere”。RN 的 componet “樣式 (StyleSheet)” 並沒有繼承的概念,除了樣式要寫在樣式物件 (StyleSheet) 之外,你可以把有樣式的元件包起來。
Image
在 RN 引入圖片並不像 web 使用 img 標籤,而是使用 `<Image>`,另外屬性也不是 web img 的 src,而是 source。ex: 引入 local 圖片: <Image source={require('./my-icon.png')}></Image>ex: 引入外部圖片:<Image source={{ uri: 'http://xxx.xx.xx/xx.png'}} style={{width: xx, height xx}}></Image>引入外面的圖片需要指定寬高。引入外部的圖片需指定 uri。require 指定的路徑,會跟看 Javascript module 的方式一樣 (就先當作是...相對路徑)可針對平台載入同名的檔案,只要在圖檔命名上加入 platform。 my-icon.ios.png my-icon.android.png
針對不同的螢幕 densities,你可能會有 @2x, @3x, 等其他的後綴檔名圖片,可以這樣擺放:
// 假設這是一個 todo 的 component 資料夾 todo ├── todo.js └── img ├── check@2x.png …

React Native 如何跑在 android 實機上測試 (Draft...)

主要參考 : https://facebook.github.io/react-native/docs/running-on-device-android.html#content

注意: 這裡不介紹 android 需要哪些環境及安裝,假設你環境都已ok,且在本機的模擬器也跑得起來。
若有開模擬器,可先關掉 avd。手機要 enable USB Debugging。 (無法教你,看個人手機設定如何,請 google)把你的手機插上電腦。使用 adb devices 指令確認電腦知道這個 Physical device。重新 run 一次 react-native run-android。若出現紅色畫面,有出現 Reload JS 就按按看。還有問題的話嘗試執行 adb reverse tcp:8081 tcp:8081,再按一次 Reload JS。
其他好文

React Native for Android 入门老虎
[教學] React Native for Android - 1: 基礎

React Native: In next release empty section headers will be rendered... 訊息

完整訊息:

In this release you can use 'enableEmptySections' flag to render empty section headers.


在 ListView 加上 enableEmptySections={true} 的屬性,忽略這個 warning.


參考:
https://facebook.github.io/react-native/docs/listview.html
https://github.com/FaridSafi/react-native-gifted-listview/issues/39

React Native 學習手冊 讀書筆記之第三章

圖片
註: 書本資訊: 歐萊禮 React Native  學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一 譯

以下文章常會見到 RN 字樣,我用來代表 React Native。

照著官方網站安裝 RN 的開發環境,假如你是利用 homebrew 你可能會走以下流程: (我只大概 brief 一下而已,請以官方文件為主。)

你也可以參考我的另外一篇文章 http://winwu.github.io/react-native-note/2016/04/25/native-02/,撰寫於 2016/4, 如果你看這篇文章已經離這個日子有點久了,那就不要看了 XD 因為我並沒有把握 RN 多久更新一次安裝的方法之類的...。


brew install node brew install watchman brew install flow //optional start (可執行可不執行,看你自己) brew update brew upgrade //optional end // 安裝 recat native 的 commandLine 指令工具 npm install -g react-native-cli // 接下開始依照你要開發的平台安裝不同開發環境 // ios 相依或是 android 相依 總體來說,如果你是 mac 電腦, ios 的環境較簡單,android 比較複雜,倘若你也尚未接觸過一些 app 開發的 know how 的話,環境也許會耗掉你蠻多時間的 (<- 苦逼過來人 Orz)。
React Native 套件會用到 node 跟 watchman,如果這兩個套件有帶給你什麼麻煩,請你重新更新這些 package 的相依性試試看。flow 是 Facebook 檢查型別的函式庫。
利用 React Native Cli 建立新的應用程式

這是一個會需要等一下的指令...
react-native init FirstProj
這是目錄:
. ├── android ├── index.android.js ├── index.ios.js ├── ios ├── node_modules └── package.json
而 index.ios.js, index.androi…

React Native 學習手冊 讀書筆記之第二章

書本資訊: 歐萊禮 React Native  學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一 譯。如果你有興趣讀一讀請多購買書籍。這本書寫得不錯!

以下文章常會見到 RN 字樣,我用來代表 React Native。

第二章主要說明 RN 的運作方式,不會寫的太難,但我會試圖把一些中文翻譯改用英文寫筆記,例如假如我寫到 "元件",可能有時候會用 "Component" 表達。

說真的,用 JavaScript 來寫 Mobile App 我真的覺得很怪...
理解 RN 的底層技術,第一件要先想到 React 的功能之 ~ Virtual DOM.Virtual DOM: 沒有 virtual DOM 的時候,以前的 DOM 的渲染與更新是一個成本很高的步驟,大量的 DOM 甚至會造成效能的影響,簡單一句話就是『js 很快但 DOM 很慢 』,相較於此,React 使用記憶體版本的 DOM,計算必要的改變,只顯示有需要改變的 DOM。

這背後的演算法到底是如何我其實也不是很懂...  (另外什麼叫做記憶體版本... 我也不是很懂,若有人知道方便留言一下嗎 ><  我目前是猜在記憶體算一算在 render 出來)Virtual DOM 三步驟: 狀態改變 -> 計算差異(diff) -> 重新顯示有差異的 DOM。
因為 Virtaul DOM 在效能上帶來好處,這也就是為什麼它很厲害的原因吧。
你可以參考這些文章,或是自己 google,Virtual DOM 出來好一陣子了,現在文章應該很多: 

迷之前端轮子 - 实现一个简单的 Virtual DOM怎么更好的理解虚拟DOM?
RN 會呼叫 Objective-C,  Java 的 API 來顯示 UI 元件 (element)。RN 會把對應的標籤(元件),轉換為符合平台的元件,所以像是 <View> 這個標籤在 ios 上會被轉為 <UIView>。


React Native currently supports iOS and Android. Because of the abstraction layer provided by the Virtual DOM, Reac…

React Native 學習手冊 讀書筆記之第一章

書本資訊: 歐萊禮 React Native  學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一 譯

以下文章常會見到 RN 字樣,我用來代表 React Native。

React Native 是什麼?
基於 JavaScript 撰寫真正的行動應用程式。而 React Native 為 Facebook 開發出來的一套 JavaScript 函式庫,用來同時開發 Android 以及 IOS。它以 JavaScript 以及 JXS 混合撰寫,然後 RN 在底層以 Objective-C 或 Java 幫你橋接原生 API 的呼叫。目前已經使用 RN 用來打造行動應用的有: Facebook Palantir TaskRabbit
RN 的優點

過去 Web 應用程式使用 HTML/CSS/JavaScript 來作出手機應用,模擬很多在手機上的 UI,但還是無法做到存取原生平台的 UI 元素。雖然模擬這些原生的 UI 沒有什麼不對,但動畫等細節非常耗時 (工程師的開發時間),而且容易過時。

而 RN 可以:
RN 利用標籤幫你轉換成真正的原生 UI 元件。 (這裡指的標籤不是 HTML 標籤,而是一些 (盡量) 符合原生 UI 的標籤名稱)。RN 的工作與主要的 UI 元素執行緒分離。RN 的更新週期與 React 的運作方式相同 (props, state 改變的話,RN 也會重新更新畫面)。除錯可以直接使用瀏覽器的除錯工具。 (如: `Chrome Debugger`)。RN 的開發環境對一般 Web 開發者還蠻友善的。並不需要 (強迫) 你使用 xcode 或 Android Studio.(有點重要) RN 對產品發佈有方便之處。 Apple 允許透過無線載入 JavaScript 基礎的應用程式行為修改 (<- sorry, 我也不知道這是什麼意思),方便的意思就是有了這個優點你不需要經過額外的審查。          或許可參考看看:

https://facebook.github.io/react-native/docs/upgrading.htmlhttps://github.com/aerofs/react-native-auto-updater为什么说用react native 写的app…

《俗女養成記》我最近很喜歡的一本書

圖片
一個多月前在書店曾經被這本書的封面吸引,但是當時沒有79折,暫時作罷,後來上週去有打折,立馬出手。

書中其實都是一個段落一個段落閒聊南部小孩的日常,與家人的互動,家裡中藥房的事情。大概是因為我也是南部的小孩,有些台語看到真的是心有戚戚焉,超娛樂的一本書,邊看著,也會勾起小時候我跟外公的一些回憶,只能說因為有太多共鳴,總是可以讓我在睡前嘻嘻哈哈的,所以覺得很喜歡。 :) 如果想要放鬆一下,暫時放下手邊的工具書,看看這類輕鬆讀物~


Ref:
中藥行女兒的生活藥方──江鵝《俗女養成記》 (本人長得也是很可愛!~)


React Native 學習之旅

2016 中正大學 weic.tw - RWD 響應式網頁設計

圖片
這是上週六,去 weic.tw 講的 talk,因為跟現在的學生也不是很熟,所以決定講的比較基礎,較能 for 更多來自不同科系的學生,但我相信台下還是有能力很好的學生 :)。

週五晚飛奔南下,住在學校的宿舍。

第三位講者乙芳

鐵哥壓軸,每次聽鐵哥演講都覺得他氣度非凡!

第二位講者 Howard 講 Elm,挺有意思的,"函數式編程"!!,我對這種 language 真的完全不熟...,有時間我會瞭解一下...

這趟去我也學了不少,也是我第一次去中正大學走走,很感謝主辦學生們的用心!


BTW,學習 RWD 我個人推薦看一下這本書,歐萊禮出版的響應式網頁設計學習手冊,但我認為看這本書你能夠觀看的時機分兩次,一次是你初學,沒有做過任何 RWD 專案,大概只了解 RWD 約略 20-40% 的熟悉度,另一次是你實戰過 RWD 2-4 次之後再來看。我自己並不覺得它是初學者在看的書,起碼你用過 HTML/CSS/JavaScript,雖然他 overall 講到一些觀念跟方法,但...實作才有感覺摟! 等你實戰過後再來看他,會覺得醍醐灌頂! 雖然他已經出版幾年了,有些 tool 可能現在算是過時,不過觀念上,依舊。

製作 RWD 這類的網站,有個辛苦的點在於,它其實沒有標準,也就是說,只有等你遇過的專案種類越來越多,你才會慢慢挖掘到各種不一樣的技巧,未必單純是 Media Query, 還是 JavaScript,有些是設定,像是 meta 的 viewport,或是一些專門給手機瀏覽器讀的 meta tag 等等。

我現在也很難整理出個脈絡,只能說 RWD 對我而言是經驗至上,我很少聽到有人會說自己很會 RWD,因為真的 by case 而有不同的 RWD 解法。 一時想到,murmur 而已。

Github 利用 Issue Template 統一開 issue 的內容格式

圖片
記得這是在好幾週前發生的事情。有一次在 fb 看到我朋友放一個開 issue 的 link,點開來看那個 issue 的內容都有預設的格式,什麼時候有這麼神奇的功能(我已經這麼落伍了嗎 QQ),原來叫做 issue template,而且好像 redmine 也有這樣的功能 (stackoverflow 相關問題),但不管 redmine....,我沒在用 redmine XD,來看看如何在 github 設定你的 issue template 吧! 步驟都非常的簡單:


(step1)首先在你的 repo 底下你要建立一個新目錄,叫做 .github

mkdir .github && cd .github
(1) .github 這個目錄並不是必要 (畢竟太多東西放在根目錄下還蠻混亂的),而是如果你希望把這些設定的檔案放在一起的話,推薦遵循放到這個 .github 的資料夾。

(2) 另外你也可以把以下檔案都放到 .github 下:

CONTRIBUTING.mdISSUE_TEMPLATE.mdPULL_REQUEST_TEMPLATE.md

(step2)新增一個檔案,檔名為 ISSUE_TEMPLATE.md

touch ISSUE_TEMPLATE.md md 是用 markdown 來表示,內容就隨意編排摟 :P,若你真的不知道怎麼寫可以從這裡找到參考: http://issuetemplate.com/#/ 。

我大概簡單寫得粗糙的版本:




(step3) 提交你的 issue_template 
在本機做的事情都不算數哦,記得 commit。
接著你在 create issue 的時候就會看到你的 template 了:




你若有興趣,歡迎看看 githun 在 2016/2/18 發的這篇文章: Issue and Pull Request templates。另外發 Pull Request 也可以有 template 哦,檔名就是 PULL_REQUEST_TEMPLATE.md。請多加利用 template 幫助簡化口頭說明流程 XD (但團隊如果有人根本不會用 git 那就另當別論了)


Chrome 測試 Media Query 的 print 樣式

圖片
每次在測列印樣式,總不可能都按一次 『檔案』 -> 『列印』,這樣太浪費時間了。

開啟 F12 開發人員工具,然後選擇三個圓點的按鈕,在 『More tools』 -> 『Rendering Settings』。



在 Rendering Setting 勾選 Emulate Media 為 print。請注意如果你根本沒有針對 print 寫 Media Query,畫面應該是不會有變化的,你可以找個銀行的網站來參考試看看。有無勾選後的差別。


React Native 學習資源

Laravel 利用 orderByRaw 針對欄位順序排序

Laravel 的 orderBy 雖然可以多個下來 order, 但感覺這樣的 order 也只是以字串的開頭排序,而我要的是根據裡面是否有符合我要的字串,若有則依照欄位不同排序

如:
假設搜尋 class 跟 teacher 這兩個欄位有 "明" 這個字,但是所有的搜尋結果,要以 class 優先排序,再出現 teacher 的結果。

類似:

return $result ->orderByRaw('CASE WHEN `class ` LIKE \'%' . $query['query'] . '%\' THEN 0 ELSE 1 END ASC, id DESC') ->paginate($pageNumber);
參考:
http://stackoverflow.com/questions/6243678/specific-ordering-sql-command
Order by using multiple columns and manually array field in Laravel? By Itsolutionstuff
Laravel 5 orderByRaw 绑定参数问题
http://stackoverflow.com/questions/4798000/mysql-order-by-keyword-match

Piwik 開源的網站追蹤平台介紹

圖片
Piwik

如標題,piwik 是一個可以讓你架在公司內部的網站追蹤的平台,如果你有不想讓別的 web tracking (如 Google Analytics) 取得到你網站資料的困擾,也許 piwik 是一個選擇。

* piwik 裝起來的樣子,可以看 Demo
* piwik 的介紹影片

修正 laravel: Relationship method must return an object of type Illuminate\Database\Eloquent\Relations\Relation

應該是呼叫 model 方法是不正確

檢查是不是呼叫一個方法,如果是,改為加上 ( )

(如 $this->save  應該改為 $this->save() )

參考:
http://stackoverflow.com/questions/23773467/laravel-relationship-method-must-return-an-object-of-type-illuminate-database-e


#我不會寫code但我會google