VueJS

[VUEJS] 關於 Functional Component 的邪門歪道

上一回有提到動態載入的事情，既然提到了動態的元件載入，就不得不提一下 functional component 這個東西。 是說，也沒有太多神奇的地方，只是借用了 React 的東西拿來班門弄斧一下而已。 Functional Component 官方文件 有提到詳細的功能，有興趣的人可以先去看看。基本上他就是一個無狀態、不屬於任何生命週期的一種元件。 用這種元件的好處是什麼？ 預先載入其他的元件 預先處理邏輯 官方的範例當中，就是提及使用他依據不同的條件，來載入不同的元件。這一點很有趣，因為我們可以做在 Vue-Route 裡面的事情，就能搬到函式化的元件裡面來做。當然，這麼做也不是沒有缺點，因為對於整個 Router
VueJS

[VueJS] 關於 vue-router 外面的兩三事

最近因為某些需求，所以需要把一些動作放在 Vue 外面，但是由於 Vue 整個生命週期的關係，所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到 vue-router 身上，後來發現，很多動作還是會有些意外發生。 我們就來聊一下那些看似合理的 意外！ 引言 以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試，如果你不是該版本或以上，請斟酌服用。 Lifecycle 與 Vue-router 2.5 一開始還是要請出官方的圖來打一點預防針， https:
JavaScript

[Prerender] Chrome headless 應用

現行的服務裡，有 prerender.io 可以使用，不過由於他是使用 PhantomJS 來當作背後的引擎，而，偏偏我自己開機器來做的時候，常常遇到一個畫面要處理超過 1 分鐘的窘境。 所以，只好拿 Google Chrome 新推出的 --headless 來試一下水溫。 安裝 目前是使用 Ubuntu 16.04LTS 來進行安裝，在伺服器上裝 Google Chrome 挺弔詭的就是。最簡單的方式就是透過 apt-get 來安裝，
VueJS

[VueJS] vuex 的五十道陰影

不是那個五十道陰影，是說我也還沒看過。只是說，人在江湖跑，哪有不挨刀，總是要挨個幾刀才能算是大哥嘛（是嗎？ 所以身為一個專業的菜蟲農夫，偶爾被鋤頭打到腳指頭也是很合理的（欸不對！ 最近很流行作弊的表，剛好 vuex 也有一份，如果你沒看過，現在讓你看看（當然不是我整理的，網路上神人很多。 https://vuejs-tips.github.io/vuex-cheatsheet/ 這表沒什麼大毛病，不過這樣的東西其實還是需要對 vuex 有相對程度的瞭解，看起來才會有些用處，不然對於初學者來說，她就只是一個整理得很漂亮的表單而已。 簡介 既然 vuex
VueJS

[VueJS] $watch 藏在原始碼裡的邊緣人

身為一個菜蟲，洗菜的時候抓到很多蟲應該超棒的（欸！只是說，有些蟲實在是很惱人，因為那也不算是蟲，只是個隱藏版的功能。至於為何沒有寫在文件裡？這就只能去問作者了！ $watch 的實際狀況與問題 文件裡面有特別寫到 $watch 的額外選項， deep immediate 這個就不多做解釋，可以去看官方文件 https://vuejs.org/v2/api/#vm-watch 我來聊一下關於 $watch 遇到的問題， methods: { ...mapActions(['setTick']) }, computed: { ...mapGetters(['getTick']
VueJS

[VueJS] Vuex 2.0 關於 plugins 的事情

身為一個專業農夫，持續耕耘一些地雷也是一件天經地義的事。不過這也不算是地雷，只是因為需求問題，所以需要一些比較奇技淫巧的處理方法。 不過也沒有很奇技淫巧啦其實。 Vuex Plugins 首先，這裡需要對於 Vuex 有一定的認識，比較基本的就不贅述，請去看文件，有簡體中文可以勉強看看，不然你看英文的也可以。 我們要提的是 Plugins 這一塊， https://vuex.vuejs.org/en/plugins.html 前情提要 我們用 Vuex 當然是希望我們在整個應用程式內，資料盡量都是統一的，但是，如果遇上了非同步傳輸的資料，
2016

[年終] 2016 歲末，哈囉 2017

這一年過得好像很快，感覺像是昨天才再討論要結婚的事情，然後，已經結完婚，今年也要過完了。貌似，什麼事情都沒有做到的樣子（當然，除了娶了個可愛老婆這件事情以外。 照慣例，列一下這一年來的清單， 一月依舊帶著乾兒子到處跑，去了一趟嘉義。 二月帶乾兒子去阿里山。 五月去拍婚紗，帶乾兒子去日月潭。 九月去吃前同事喜酒。 十月去朋友在花蓮開的民宿。 十一月結婚。 十二月去了一趟沖繩。 至於其他沒列出來的月份，就沒什麼特別的事情。今年把所有的演講全部都推掉了，事實上我也沒有什麼講題可以講，算是山窮水盡應該回家種田的概念。而且，我也沒報名到 COSCUP 跟 HITCONF（對啦，我每年都沒報到怎樣（摔筆
Caline

嘿，我們結婚了。

11/11 我跟 Caline 結婚了。特別挑了一個很多 1 的日子，一方面是因為是我生日，另一方面是因為好記，這樣就不用慶祝兩次，變成 生日暨結婚紀念日快樂 好像也不錯的樣子。 以後就變成閃光人夫了（歐耶！ 最多人問的事情是，你覺得結婚前跟結婚後有什麼差別？ 嗯，好像沒有特別明顯的差異。可以叫老婆老婆的感覺挺好（笑 其實婚宴還是挺累人的，雖然很早就慢慢的準備，不過還是有許多事情遇到了才知道。不過大抵上都算是相當順利，結婚嘛，不就大家都差不多嗎（欸不對，那些海外婚禮的不要來亂！ 其實餐廳去年 10 月就訂了，
Life

時速 100 公里的味道

印象中，對於距離這件事情，好像一直停留在新竹高雄四個小時的自強號上面。至於那種心理上的距離感，似乎沒有因為時間的縮短而拉近，反而更陌生。 時速三百公里的高速鐵路，像是掉到黑洞邊緣，重力時間膨脹拉出了成倍的 時間 感，真實，沒辦法抹滅。 開著車其實還有些許自由，當然比較害怕的除了三寶之外，大概就是怕顧路，不過，高速公路上什麼東西都有，出來跑得總是要中釘子，只是這個釘子貌似非常大。 人情味還是到處都有，只是說或許有些地方比較濃厚一點，像是補個胎 250 元應該是還蠻便宜的。不然休息站吃個飯輪胎就中招，萬一這條胎 GG 那我的這頓飯還真是有點貴。 我很喜歡國道三，嘉義水上到台南新營之間，如果下點雨也好。空氣中會有淡淡的下雨的味道、
PHP

[PHP] array_merge_recursive 的神奇狀況

平常除草之後，都會在田埂上寫點 PHP 以防老年痴呆，然後一路上經歷了 Phalcon 0.9x, 1.0, 2.x, 3.0.x，雖然都不小心送了點 PR，但是這次遇到的是一個頗神奇的情形。 大概就像是記者說巴拉刈很毒只要 15 c.c. 就會致死... 那是用喝的！ 那是用喝的！ 那是用喝的！ 老實說比起暗黑農會在推的什麼除草劑，巴拉刈還比較有效（以下不斷人財路就不多說惹... PHP 4.0.1
VueJS

[VueJS] 官方套件各種雷

首先，我因為不太常用眼藥水，所以，有關於眼睛酸澀流目油等事情，請不要來問我謝謝。至於是不是有這麼多雷，其實我也不太確定，只是我遇到了而已。 如果你沒有，那應該是我眼睛乾澀看錯，假的！ 關於 Lifecycle Diagram 舉一個 1.x 的例子來看，先抽離 vue-router 的狀況，實際上在瀏覽器上觸發的狀況大概就是官方的順序（底下先不討論離開畫面的東西， init created beforeCompile compiled attached ready 各別帶出來的 this 則是這樣， VueComponent，
VueJS

[DFP] 如果再給我一次機會，我打死都不用 DFP（沒有誤

我開始使用 DFP 的時候，是還要有 AdSense 的帳號提出申請的年代。然後呢，那時候知道是 Google 用了 DoubleClick（買來的？然後持續演進到今天的 GPT... 如果讓我再選一次，我今天就不會坐在這裡，寫這篇文章了（欸 GPT 的問題點 最常看到的問題，就是廣告顯示不出來，也是最長被討論，也是被討論的歷史最悠久的問題。 GPT 雖然有新版本的 JavaScript，但是問題依舊。 雖然有各種 workaround，但是依舊無法解決顯示問題。 依據新版本的 GPT

[VueJS] Style scoped 的問題與 Hack

身為 Vue (X) 眼藥水 (O) 的初學者，偶爾送送 PR 也是很合理的。 Vue-loader 提供了樣式、樣版的組合功能，基本上沒什麼好詬病的地方。但是，科技始終來自於惰性（無誤，所以，有些地方還是覺得不太夠用。 Why scoped 通常我們自己撰寫元件時，有的時候不希望樣式放在全域中被使用，只希望在這個元件（或是其子元件內發生，這個時候，就會在樣式加入 scoped 來確保樣式只會在子元件被渲染。 好處是樣式維護上比較不會那麼複雜，也不會發生樣式互相蓋版的問題。 壞處是，樣式好像比較不好維護（欸
VueJS

[VueJS] 大型專案開發 #假的

其實我最近在準備科技農夫的事情，只是說剛好遇到需要開發一點東西，所以順手筆記一下。VueJS 這個東西有 Kuro 這扛霸子持續佈道應該是妥當的，個人只是插花一下而已。 何謂大型專案？ 首先必須要認知的一件事情，沒有什麼大型專案，或者人人都是大型專案（欸！只是說，我們在開發的時候，總是會希望有一些事情是能保持該有的彈性的，這個彈性不管專案的大小，勢必是留一點空間給自己的一個作法。 投影片在這裡， http://www.slideshare.net/hinablue/vue-js 公司內訓直播在這裡， https://www.facebook.com/hinablue/videos/10208267619426295/
PHP

[PhalconPHP] Functional Test 與 PHPUnit mock 愛恨情愁

我不會寫測試第二蛋之我不會寫測試。俗話說 代致不是憨人想的那麼簡單。 PHPUnit Mock 在 PHPUnit 當中，有一個叫做 Mock 的東西，翻譯成中文大概可以叫做模仿。簡單來說，就是可以幫你的類產生出一個 替身，當然不是這種 替身， 好處是，你可以使用這個替身來做一些測試的事情，詳細可以上網 Google 一下，基於我對 PHPUnit 實在不熟，所以這邊就不獻寶了。 Mock with DI Phalcon 有很多東西可以放在 DI 裡面，
PHP

[PhalconPHP] 測試 Route 與 Controller 小技巧

其實我不會寫測試。 其實我不會寫測試。 其實我不會寫測試。 官方的測試工具 其實 PhalconPHP 有提供 Unit testing 測試的小小範例，但是他就真的跟飯粒一樣小，以致於我完全不知到該怎麼辦才好。加上 PHPUnit 我不熟（前情提要：我不會寫測試。所以基本上該踩的雷還是要踩一踩才知道該怎麼辦。 官方提供的開發工具庫 phalcon/incubator 裡面，確實有提供 Tests 的範例給你用，但是，他的 UnitTestCase.php 怪怪的， protected function setUp(
JavaScript

[VueJS] 工具開發心得

首先可以先看一下 Kuro 的投影片，先瞭解一下 VueJS 的基本運作方式，然後就可以收工了（喂 先求不傷身體 專案 Github 在這裡， https://github.com/hinablue/vuejs-gantt 這是隨意寫的工具，程式碼很亂請當作沒看到，謝謝。 再來講究效果 首先你可以參考任何一個 VueJS 的範例，利用他們的結構來建置你所想要的環境。或者你也可以使用 vue-cli 來安裝，也是挺方便的。 $ vue init webpack my-project
phalconphp

[php] PhalconPHP 雷區

生而為人，不小心採到別人的地雷是很合理的。但，生而為工程師，一直採到別人的地雷就不是很合理了。 PhalconPHP 身為一個 PHPer，用一些看起來很潮的 Framework 也是很合理的。而且，他還是包成 C-Extension 的方式執行，超級潮的！ PhalconPHP 是使用 Zephir 這個工具，將 .zep 包裝成 .so 的 C-Extension 餵給 PHP 去執行的。看，是不是很潮，核心錯誤訊息噴出來你也不知道怎麼改呢（欸
AngularJS

[ng] Angular Material Form Builder

種田閒暇時間，因為需求所以製造需求。 Angular Material Form Builder 東西都丟到 github 上面了， http://github.com/hinablue/ng-material-form-builder 目前還要解決幾個比較棘手的問題， Safari 拖曳沒有觸發 dragenter Firefox 拖曳的 drop 觸發了網址轉換（WTF!! IE 10/Edge 有不同狀況 DEMO Page 市面上也不是沒有這種表單建置工具，這只是 純粹自己寫爽的，所以自然寫起來就