發表文章

目前顯示的是 2016的文章

處理 Safari 無法播放 video mp4 的一些問題

最近開始覺得 Safari 大概是未來的 IE。

在使用 HTML5  的 video 播放影片時,遇到兩種影片播不出來的情況。

情況一

較少人會遇到,就是尚未更新成最新的 OS 作業系統,(我的情況是作業系統 OS X EI Capitan, safari版本: 9.0.2),很不巧的我是用自己 server 的 https,當你的 SSL 憑證不是可以信任的,safari 無法載入 mp4,解法是什麼,就只好把 https 改成 http 了。

這個問題找好久,而且還要找到一台尚未更新 OS 的 Mac 來測真的很有困難。參考: http://stackoverflow.com/questions/25709713/safari-will-not-play-mp4-over-httpsCannot view Quicktime movies over HTTPS in Safari or UIWebView

另外新版的 OS 沒有這個問題,即便我是 https,像我更新到 sierra 就沒有這個問題。


情況二

是針對 iphone 上用 safari 看 video 會出現播放鍵,而且還不會自動播放。
這個問題,要從 2 個方向著手:

1. 請先處理掉播放鍵的顯示,處理的意思就是隱藏。用 css 把 video 標籤的 video::-webkit-media-controls-start-playback-button 隱藏起來,如:

video::-webkit-media-controls-start-playback-button { display: none; }
可以參考: displaying html5 video in ios without play button overlay


2. 自動播放的問題比較麻煩,但是 IOS 10 有辦法,至於 10 以下的就很難說。
video 標籤的自動播放,要加上 autoplay  屬性,若你要針對 ios 10 的 safari,請你再加上 playsinline 的屬性。如:

<video loop muted autoplay playsinline> <source src="01.mp4" type="video/mp4"&…

[工作筆記] 原來 IE 不支援 SVG 的 animation...

參考: [SVG animation is not working on IE11] http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11

因為今天在處理一個 svg 的動畫發現在 IE 跑不出來,原本以為是因為使用 stroke-dasharray 跟 stroke-dashoffset... ,結果得到的解答是只有 Edge 會支援 SVG 的 Transition 跟 animation。簡單來說目前沒有特別方便快速的解法,網路上的解法建議是轉用 svg 的 library 像是 GreenSock 。

連我都還沒使用到 Edge 的人了,直接放棄在 IE 上的效果,結案。不過依舊要寫兩份樣式,先偵測瀏覽器是否為 IE,在 <body> 上 append 一個新的 css class,再用 .ie something, 跟 .not-ie something.. 類似的方式去做替換 SVG 的方案。

更新 macOS Sierra 之後 compass 指令不見

昨天更新 macOS Sierra 之後,執行 compass 出現 Operation not permitted - /usr/bin/compass,後來找到了一個方式,就是先切換成 root,再安裝:

sudo su sudo gem install -n /usr/local/bin compass
不過要小心,在你更新完作業系統的之後,也請你先更新 xcode再來處理這些 compass 路徑的問題。xcode 的安裝試試在 cli 執行 xcode-select --install,或是打開你的 App Store 找到他,然後更新,再來處理 compass 的安裝。


若這個解法不適合你,或者你是使用 homebrew 在安裝的話,你可以參考: Compass install fails on OS X 10.11 due to new rootless mode #2018。祝你也順利 :)

[工作筆記] git filemode 設定,避免檔案權限不同而進 git status

最近工作常常在 windows 跟 Mac, Linux 上切換來切換去,發現在 Mac 掛磁碟機近來的 Repo 莫名其妙都進 git status 變成需要 diff 的檔案,明明也沒修改什麼,也有可能是因為用 afp 掛進來的,然後我也完全忘記有檔案權限這件事情,還好同事英明,快速指出原因。

要讓 git 忽略這個問題,只要設定 git 的 filemode 就行:

git config core.fileMode false

若想要設定成全域,加上 --global 就可以。

參考:How do I make Git ignore file mode (chmod) changes? git tips: 设置filemode,避免NTFS文件权限变更引起的修改 git关于文件权限修改引起的冲突及忽略文件权限的办法

Chrome 開發人員工具 console 的一些快速選擇的用法

圖片
開發工具一直都是前端人員的求生工具之一,相信大家在使用瀏覽器 Debug 時通常也都會開啟 F12 的開發人員工具,最近我從書上學到一些快速 & 覺得實用的 selector (也許是老掉牙的知識了?!),紀錄一下:


(1) $0 選取目前被鎖定的元素
假如你已經在頁面上選擇某個元素了,那可以直接利用 $0 去選擇到你選到的 DOM。另外若你有載入 jQuery 的話,就可以直接利用 $($0) (或是 jQuery($0))去操作它。

其實 $( ) 代表的是 document.getElementById,但如果你裝的 library 也有 $( ) 這個 function,就會被你裝的 library 給取代。不過還好用 jQuery 感覺是沒差。

利用選取工具,去選擇你要的 DOM。

直接使用 $0:

而且 chrome 會記錄歷程,假設你選取過四個不同的 element,可以利用$0, $1, $2, $3,而 $0 是拿最近一次選取的元素,最多,記錄到 $4 這樣。
如果是想要用 CSS 選取元素,可以用 $$(),相當於 document.querySelectAll()。比方說取得所有的 img,可以用 $$(img)



(2) $x('XPATH') 使用 XPath 選到符合的元素
使用 $x() 這個函示可以直接把 XPath 的值當作 selector,首先你可以在選取的 selector 按下右鍵,複製 XPath,或是你知道規則,也就不需要複製。


接著利用 $x( ) 將 XPath 當作 selector 進行 Query:


(3) $0 拿最近一次計算的值的結果




除了這些還有 clear() 可以清除 console 的內容。
dir({key: value}),dir ( ) 函示可以放入一個 object,會以可以展開的形式呈現。
table(object),以 table 的形式列出資料,這個功能我超愛,看起來很有新鮮感 :

Firefox 也有哦


若你有興趣知道更多,其實官方文件都有,建議可以去看看 :) 會有挖到寶的感覺

轉址 301 與 302 的不同

剛開始在買這個 domain 的時候,其實 winwu.cc 以及 www.winwu.cc 都可以連到,問題是我希望搜尋引擎以 www.winwu.cc 為主要的網址,那麼,沒有 www 這個 domain 或是利用其他 domain 時,我要把 user 導到 www.winwu.cc,這時候要選擇哪一種轉址呢?!


Compass 編譯的 Warning: DEPRECATION WARNING on line ..._deprecated-support.scss:

在跑 Gulp Compass 編譯 scss 時,一直出現這個 Warning 讓我覺得很焦躁,雖然是可以不管他。

詳細的錯誤訊息是:
DEPRECATION WARNING on line 92 of XXXX/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version of Sass. To preserve the current behavior, use quotes: unquote('"$ie6-"#{$legacy-support-for-ie6} "$ie7-"#{$legacy-support-for-ie7} "$ie8-"#{$legacy-support-for-ie8}') You can use the sass-convert command to automatically fix most cases.
然後我找到了一個 github 上 issue 的解法,請尋找 mrpatricko 的回答,方法是要我們去修改你的那隻 _deorecated-support.scss,第 87 行,當然你也要對照一下是不是那一行,然後把那幾行利用雙引號刮起來,原本的單引號再變成雙引號。

建議是先備份一支起來,再做修改,以免改錯,不知如何還原.. 。改這種 source 我總覺得怕怕的,但很成功的 warning 被趕走了 :)

結論: 不過就是要改一行 scss 而已,花了好久把環境備好..

九月份

今年的九月份說起來也蠻忙的,我在 Women Who Code Taipei  講了四次的基礎前端講座,若您有興趣也可以看看這些投影片,但是精華部分比較少,這四次的上課走法講求希望讓來參與課程的同學可以實作,所以投影片內容都不多,上課時話比較多。有些投影片若內容不完整,我也是透過口頭說明,可能是剛好有一兩週比較忙 QQ

第一週
第二週
第三週
第四週


您也可以持續關注 Women Who Code Taipei 的活動,http://www.meetup.com/Women-Who-Code-Taipei/events。四周短短加起來不到10小時上課時數,不過有些同學也是很認真的交作業,很不簡單 :)  當初我也有點掙扎四周可以講些什麼內容 XD

---

九月份還有另外一個比較重大的變化就是離職,我換了一家新公司,新的開始,很希望可以待上個 3 年以上。離開的那家公司有很多不捨,總而言之,雖然今年有很多不順心的事,但也只能往前看了,很久沒有經歷過這種人生低潮期,(上一次是高中時期),希望會越來越好...

讓 git 將大小寫檔名修正視為不同的檔案

修改資料夾大小寫時,發現只修改大小寫沒有被視為 change 過的檔案
(這樣就沒辦法 commit 呀 !!)

將 git 的這個設定打開: git config core.ignorecase false

可以讓 git 將大小寫修正視為不同的檔案,這樣 git status 就會看到變化,進而可以正常 commit.


(久久沒發文竟然是因為這種小問題... QQ)

八月份

讀《30歲前,你一定要去小公司》

TIL - 文章筆記 看了一篇線性回歸的文章

http://adit.io/posts/2016-03-13-Logistic-Regression.html
這篇作者寫的線性回歸,涵蓋 Ng 在 Coursera 上的 ML 第三章的內容。
線性回歸是一個分類的演算法。

線性回歸說起來是還蠻簡單的:

1. 準備你的資料
2. 把資料灑到圖上 (graph)
3. 然後畫一條線 (應該會有最適合的.. 看題目是什麼...),可以把灑在圖上的資料做個切分 這條線叫做 Dicision Boundary.

---

* g (...) 也稱為 sigmoid function,我們用這個 function 來約束預測的結果,使結果只會介於 0 ~ 1,單位是百分比值,如結果是 .95 則預測結果是 95%。
* Dicision boundary 是一條可以把你的資料區分成兩塊 (也就是分類) 的線。
* 如果你需要非線性分類,選擇類神經網路或是 support vector machines (SVM)。

TypeScript 的 tsconfig.json 簡介

tsconfig.json 是 TypeScript 編譯時看的編譯設定檔案,能幫助你指定編譯的 TypeScript 檔案,輸出目錄等工作事項,像我在使用 Atom 編輯器時,若你的資料夾裡面有 .ts 檔案,而且你也有裝 IDE 針對 TypeScript 的一些 package,他會幫你掃掃看有無 tsconfig.json,若沒有會給你提示訊息。

TypeScript 簡介

圖片
TypeScript 是一個 JavaScript 型別化的超集 (“typed superset”),講『超集』兩字,要是沒有 google 我自己也都無法理解...,這裡有百度的解釋,若用那個網址的解釋圖來理解第一句話,大概是這個樣子: (BTW 我真的很認真在校正這一段,如果有畫錯請告訴我 QQ,我個人以前念書的時候就很沒自信看什麼子集, 超集...)

調整 Angular 2 編譯自動產生的 .js .map 檔路徑

圖片
最近照 Angular 2 的 Tutorial 做了一個 Heroes Dashboard,通常建立好 TypeScript 的檔案之後,會自行編譯出相對應的 .map 以及 .js。

這麼多檔案一同擠在 app 目錄下實在很崩潰,所以打算做個調整,把不是 TypeScript 的檔案都移到其他地方去,讓 app 保持在真正開發用的程式區域。


後來我才發現原來 systemjs.config.js 已經有提示我把 map 的 app 設定改為 dist 了。這個 dist 的資料夾表示輸出 .js .map 的資料夾路徑,你也可以換成你要的路徑。

1. 首先把 system.js.config.js 的 var map = { app: 'dist', ... 約略第八行的設定改為 'dist' (原為 app)
2. 在你的目錄下建立一個 dist 資料夾
3. 修改 tsconfig.json,在 compilerOptions 新增一個 outDir 的 key,值為 dist.  (你的輸出的資料夾目錄)

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false, "outDir": "dist" } }
處理完之後,記得重新 npm start.
這樣子 app 底下就會乾淨一點了... (另外 app 原本產生出來的 .map, .js 要自己刪掉哦! 也別不小心刪到 TypeScript …

Angular 2 404 traceur not found

圖片
討論參考: stackoverflow: Angular 2 - 404 traceur not found

剛起步就遇到這個鳥問題,原因很白痴,就是我把 .ts 的檔名打成 .js 了,基本上只要 node 版本跟 npm 版本都符合要求,照理說 npm i  整個全新的 angular 2 toturial  的教學應該是正常的,如果你也遇到這個 traceur 的問題,也請先試著檢查是否哪裡有 key 錯字。

Set up gulp-eslint to check JavaScript by Git pre-commit hook (using pre-commit package.)

我其實.. 也不知道當初為什麼要用英文寫,而且寫得蠻爛的,但我自己看得懂啦,應該是早上上班寫 code 很急,我也不想花太多時間整理了... If we can't control other developers, but we can control some commit rule for other developer. that's why i want to use pre-commit, it can help to check other developer code convention.

By Using gulp-eslint and pre-commit.
Because my project is fully frontend project. so... i use gulp-eslint replace with eslint.

Step summary:
1. install gulp-eslint
2. install pre-commit
3. create you eslint config file, there are serveral format for eslint config file, you can go here.

一些去上自動測試與 TDD 實務開發的心得

圖片
在文章開始之前,先提供一下一些背景 context:
* 課程資訊: Skilltree 自動測試與 TDD 實務開發(使用C#) 第六梯
* 授課講師: 91哥  可參考 91 敏捷開發之路30 天快速上手 TDD


感覺我好像很久沒有寫技術文了,因為七月前三週週末都在上 TDD,就算是週日,也在寫作業,複習 91 哥教的一些 Lab,只能說,這三週過得太精實了,如果看到我太久沒發文,一定就是有什麼作業要交,課程要上,或是交了男朋友了...

用 google spreadsheets 幫你翻譯文字

圖片
最近剛好有個需求要整理專案上的多國語系的名詞,因為多人協作,所以一開始在整理時我自己是採用 google 的 excel 來處理,大致上如下:


但因為要手動翻譯其他語系,打字實在很麻煩,以我來說,大概只有英文是比較知道如何下手的,但日文跟簡體中文呢?一直去找 google translate 也挺麻煩的,還好 google spreadsheets 有現成的函式可以幫我做到,看到這個功能眼淚都要掉出來了,因為當我有上百個字詞要翻譯的時候,根本不可能這麼“人工”,就算透過翻譯出來的英文沒有很準確,但至少我可以只挑我要修改的去修正就行。

考取 70-480 Programming in HTML5 with JavaScript and CSS3 證照

圖片
微軟的這張 70-480 證照,考得正是前端工程師的必備技能,也就是 HTML, CSS, JavaScript 三種科目的混合考。因為證照在今年 (2016) 七月中過後要漲價,我也是不經意地看到這個消息,就想說去考考看了。

React Native Redux 學習筆記

其實朋友們可以跳過這篇文章,我寫得很碎片式,只是寫給我自己看的。(如果有寫錯的地方 也麻煩留個言給我 導正我一下,目前,我還沒試出一個簡單架構出來...,也許 最近會開始嘗試吧,資料太多,暫時無法一次到位)
[粗人見解] 學習 redux 我建議去上網找一個簡單的 sample,跟著做。

Vue 用 porps 把父層的資料傳給 child component

圖片
just an example,
HTML:
<!--準備 CardComponent 的 Template--> <script type="x-template" id="cards-tmp"> <div id="cards-tmp"> <div class="card" v-for="card in cards"> <h2>{{ card.title }}</h2> <p>{{ card.description }}</p> <a href="#" v-on:click.prevent="openModal(card.id)">read more</a> </div> </script> <div id="app"> <h1>Vue App Example</h1> <div> <card-comp :cards="cardOriginal"></card-comp> </div> </div>
JS
// make an component var cardComponent = Vue.extend({ // 指定是哪個 Element template: '#cards-tmp', // what props you want to accept. props: ['cards'], methods: { openModal: function(id){ alert(id); } } }); new Vue({ el: '#app', components: { // register name is card-comp …

Vue Avatar 解決了我覺得大頭照那個位置一直很空洞的問題

圖片
Avatar 是大頭照的意思。其實之前在用 PHP 就發現有類似的 package (以 Laravel 來說,就有像是 laravolt/avatar),可以爬出一段使用者的名稱,回傳文字的簡寫。然後隨意找找還真的讓我找到 vue 也有好心的開發者作出產出 avatar 的 component。

Git Repo Demo 連結: https://eliep.github.io/vue-avatar/
Git Repo: https://github.com/eliep/vue-avatar

不過我還是用 ES5 的方式在使用,步驟如同官方說明。

載入 vue 以及 vue avater 的 js 檔案
<script src="/assets/js/vue.min.js"></script> <script src="/assets/js/vue-avatar.min.js"></script>
除了基本的載入 vue-avatar.min.js 之外,還要在 vue 初始化一個 instance 的地方加上 components 的設定,例如:
new Vue({ el: '#app', components: { 'avatar': Avatar.Avatar }, // 來一點示範的資料 data: { username1: 'Win.Wu 吳穎穎', username2: 'YIYING WU', username: "hello world", }, ....
在 HTML 的地方:
<avatar :username="username1" :size="40"></avatar> <avatar :username="username2" :size="40"></avatar> <avatar :username="username" :size="40&q…

看眼科記

最近一直覺得看東西容易失焦,會酸,用力瞇一下還會流眼淚。
今天就去東區諾貝爾眼科診所掛號,給醫生檢查一下,還好只是乾眼症,眼睛疲勞 (這對工程師來說,很難避免吧 Orz) 再加上我最近又很常看書,可能真的有用眼過勞。

Anyway 檢查一下比較心安,希望大家用心工作之後,也要多注意自己的健康,我最近是很走養生路線,下班盡量不看程式,而且我還刷了一年的健身房...

最後還是要撈叨一下,
公司不是自己的,但身體是自己的。
Scrum 是假的,但瀑布是真的。
不能改變別人是困難的,但改變自己的是可能的。
(硬要來一段這種詭異的結尾 XD)

Vue Instance Lifecycle Hooks 實例生命週期

一個簡單的 sample,主要我是在看整個 vue  的生命週期,對 vue 有些瞭解了。

var vm = new Vue({ el: '#app', data: { name: 'winwu', width: 900, height: 500, barColor: 'red', barHeight: 30, barXOffset: 10, dataset: [30, 20, 45, 12, 21] }, // https://vuejs.org/api/#Options-Lifecycle-Hooks init: function() { // init 這時候還沒有觀察到 data observation, event, watcher... console.log('init: my name is ' + this.name); }, created: function() { /* data observation, * computed properties, * methods, * watch/event callbacks. * 在這個階段完成 * 但,$el 這時候還沒有好,(DOM 的解析還沒開始) */ console.log('creadted: my name is ' + this.name); }, beforeCompile: function() { // 我也不曉得什麼時候會呼叫到這裡 console.log('beforeCompile: my name is ' + this.name); }, compiled: function() { console.log('compiled: my name is ' + this.name); }, ready: function() { // 在 vm.$el 插入 DOM 時呼叫。 console.log('ready:…

使用 Vue-cli 快速建立 Vue 專案樣板

圖片
Vue 官方提供了一個 vue-cli 工具可以快速建立 vue 的專案,首先你需要以下:
Node.js 環境Npm

Vue.js 改變分隔符的符號 Change Custom Delimiters

在使用 vue.js 重構舊有的專案時,發現 {{ variable }} 這樣的 expression 竟然怎麼樣都不顯示在畫面上,原來是因為我的 view 是 hbs (handlebarsjs) (因為是 express 的專案...),所以這 {{ }} 這個分隔符號會先被 handlebarsjs 吃掉,以至於我的變數反而沒被 vue 辨識。

Vue.js 學習資源

我堅持今天一定要寫點什麼東西 (別問我在堅持什麼 XD),所以先來談談 vue.js 這個 Library (暫時我還不知道,該定義它是 Library 還是 Framework,就目前的感覺,我覺得較像 Library )。

React Native: CameraRoll.getPhotos(tag, success, error) is deprecated. Use the returned Promise instead

在實作 <React Native 學習手冊> 第六章時,有個 cameraRoll 的功能,cameraRoll 很白話了吧?! 就跟相片有關係的 component,其中用 getPhotos 可以取得相簿的照片。

React Native 取得地理位置 navigator.geolocation 得到 location request timed out

我的測試手機是 samsung edge plus 6.
使用 react native 版本為: ^0.26.1
在抓取 location 一直拿不到,反而一直出現 error "location request timed out".

Vue.js select 下拉選單示範

這裡是示範一個下拉選單,其中的關係包含被選擇的項目,以及關聯的下一層選單。簡單練習而已,一定還是有更好的寫法。

Vue.js v-on:click get target Example ( click 事件取得自己 )

在重構工作上的一段小程式,轉而使用 Vue 寫一點小功能。

讀《使用者故事對照》與生活閒聊

圖片
其實我要講的有一半是來自於使用者故事對照這本書的讀書心得。上週,有次小主管帶我去聽演講 (Epoch-MIT ILP 專題演講),其中一場是 PicCollage founder John Fan 為主講人,他就問台下觀眾,什麼是 MVP,當時還聽的不是很清楚,回家也有忘了。接著週末,我就拿起這本書開始讀,結果我發現 User Story Mapping 提到 MVP 還有一些 Lean Startup,與我那天聽到演講的內容很有相關性。

MVP 也就是 "Minimum Viable Product" 最小可行產品。

為什麼需要 MVP 呢?! 我在猜想某部分原因是因為當我們在策劃一個解決問題的產品的時候,大部分情況是我們在“猜想”使用者會遇到什麼問題,所以當我們想出了一個 solution 時,(也許我們要想非常多個 solution),我們要做出一個 MVP 跟使用者互動,驗證我們是不是在對的方向,也用來驗證我們的猜測是不是越來越接近需求。所以會一直維持一種循環『build->measure->learn』 (看圖片)  不斷的試驗,不斷的學習,這樣的 iteration (循環),能夠越快越好,能夠越接近使用者的想要的產品,iteration 也不要太久,差不多一次的 sprint 衝刺時間約兩周,這樣一個月可以 iteration 兩次(sprint 的週期主要還是看公司的步調是什麼狀況...)。

實現想法不急著產出設計稿
其實 wireframe 我研究不多,但那天聽演講覺得要點就幾個:


討論快速修改也快速去除任何顏色,單純線稿,單色色塊表現 (因為顏色會影響判斷能力,也會增加很多考慮易用性的變因)

User Story Mapping
這些列的是我看書的學習心得 :P, 也許對看文章的你沒什麼很直接的幫助,我建議你可以直接買書,會比較好理解,因為有些細節要搭配照片看比較了解。或是看 YouTube,這裡有這本書的作者的演講: User Story Mapping with Jeff Patton

Story Mapping 幫助開發時聚焦在 user 跟使用經驗上,促成更好的流程(討論出來的)。故事對照 Mapping 是很容易的一件事情,基本上我們只需要準備便利貼(如果你不嫌貴的話,公司又願意花錢買便利貼...),由左而右的排序,寫…

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

Laravel update form 如果是 Unique 欄位驗證檢查如何排除當下更新的該筆記錄

use laravel 5.

when we update an form, example: "member" table.
and we want the email field should be unique on this table.

Counter Animation 計數動畫蒐集

圖片
在碰類似 dashboard 的介面,你一定很常看到各種有點假假的數字動畫,但真的要用到的時候發現我以前根本沒用過類似的套件XD所以就找了幾個套件,我認為看起來還不差的。

可能有些是 survey 到 angular 的版本,主要是因為我剛好在用 angular 啦...

Angular Counter
http://indrimuska.github.io/angular-counter/
設定比較多元,需要搭配 jquery easing

OCA, Java SE 7 Programmer I 1Z0-803 考試紀錄

圖片
今天去考了,不過沒有通過,大概差了 5-7 題吧,雖然這個結果我不意外.... Orz 確實沒有準備的很好。只好再接再厲,下個月再考一次瞜 :P

順便報告一下,考古題的比例大概只有 1/2, (<- 是我這次考試大概的感覺啦...),因為我大概有估算了一下。

去考場必帶項目:
(1) 身分證 (有照片的證件)
(2) 信用卡 (主要對英文名跟中文名)

建議事項:
(1) 提早到考場或是考場附近,可熟悉環境... ,攜帶參考書,以防你突然求知慾旺盛,無處可發洩。
(2) 若無帶電腦 (其實也真的不用帶... ),可以把 vue 的考試通知的信件內容都先印下來,因為 testing ID, 什麼一堆 ID 我想應該也記不起來
(3) 可以提早報到,最晚是15分鐘以前到考場報到,要先做簽到手續,會現場簽名,拍照等等,拍照是因為 vue 考試需要拍。

考試的空間是一個人一個小房間,會有置物的地方讓你放包包,只是會跟考場隔開,我的考場是有可以上鎖的櫃子可以借。考試過程若有問題可立刻舉手,房間有監視器,監考人員會過來,千萬不要擅自走動哦。

不可以自己攜帶紙筆,考試的時候會借你一個板子跟筆來使用。

考完試會再簽一次名,代表你知道你結束考試了。

結果:
我是沒有考完就知道結果,你會先拿到一張說明(考試中心給我的..),大概的意思就是30分鐘之類會通知告訴你結果出爐。


然後你大概出考場在路上走個十分鐘以內就會收到 Oracle 的信,告訴你結果出爐,但是那個信沒有結果,他只是個通知,真正的結果,信中有個連結,點過去會到 oracle 的頁面,需要登入 Oracle 帳號,在查詢成績,查詢的畫面大概長這樣:



說真的要從 email 的 link 到找到成績的這個畫面還麻蠻煩的,可能我剛好人在外面用手機收信很麻煩....,總之會有個 summary,大概是這次考試的概況。

左邊是你在考場報到時拍的照片,下面會列出針對你做錯的題目的考試方式是哪些,大概就是看一下這次沒考過的弱點是什麼這樣。




Anyway....
下個月再考一次吧...
(不然還能怎麼辦)