HINA::工程幼稚園

[Vue] 有樣學樣的 Hook

去年年底比較大的新聞大概就是 React 推出了 Hook 的功能。不過因為我沒有寫 React，所以到底他在幹嘛其實我也不太清楚（欸）！然後 Vue 這邊真的就只是實驗性功能而已，請不要亂上 Production！關於 React Hook 可以參考這個影片介紹，個人理解若有錯誤煩請指正感恩 XD 然後 Vue 的老爸也做了一套 Hook，看起來就是向 React 致敬的感覺（連裡面的名字都差不多）。這個東西目前還是實驗性功能，所以官方並不推薦在正式環境中使用。實際上看過原始碼之後，其實實作的部分

Ghost

Ghost 新樣板造成的困擾

由於新的樣板有支援 responsive-image 的功能，而我原本的圖片並沒有這些東西，所以，整個部落格圖片就有點悲慘。

法國

[英法] 對望英吉利海峽 Day 1

其實是去年胎死腹中的蜜月旅行，被旅行社不成團之後，就只能等到今年才能出發。雖然也還是報名了同一家旅行社，但故意挑肯定會成團的時間，總不會再次流標了吧！然後，我們就到法國了。

土耳其

[土耳其] 長途巴士的浪漫 Day 5

第五天大概是凌晨三點起床，準備搭國內班機前往伊斯坦堡。無奈，早上風雪過大，我們所在的省份兩個國內機場全部關閉。根據機場人員表示，最快要到下午四點才有機會開放。所以，我們就展開了大長途時代。我們從下榻的地方開到機場之後，因為機場全數關閉，所以領隊決定前往土耳其首都安卡拉 (Ankara)，由安卡拉的機場飛往伊斯坦堡。整段的路途大概是 4.5 小時的車程，其實相當的遠。途中休息了兩次，窗外的風景大概有幾百公里都是這樣。中途有經過一個比較大的加油站，有稍作休息。最後約莫中午 11 點快半的時候，抵達安卡拉。然後一群人就匆匆忙忙的趕著去掛行李，跟這五天陪伴我們的司機道別，趕搭 1 點 05

土耳其

[土耳其] 長途巴士的浪漫 Day 4

由於昨天就得知今天熱氣球停飛，所以領隊佛心的讓我們今天睡到早上 9 點才叫我們起床。也因為熱氣球的行程沒了，所以就多帶我們去一些行程表上沒有的地方看看。然後昨晚就開始下雪，所以早上出門的溫度是零下 1 度。首先來到的是獵人谷 (Hunting Valley)，身為獎金獵人，參觀一下獵人谷也是很合理的。下大雪所以要堆個雪人～接著到某個奇妙的地點 (地圖定位)，這個地方我真的想不起來是不是有名字了。這是藍眼睛樹，就是綁上一堆藍眼睛，挺可愛的。持續曬老婆～然後中途有去參觀地毯工廠（不要問相片中的老師在地毯工廠都是屬於大師極人物，平均一張地毯，最快 1 個月，最長的可以長達四年！然後那個密密麻麻的上下線，現場看他們編織的時候，

土耳其

[土耳其] 長途巴士的浪漫 Day 3

第三天一樣是拉車行程，不過中途有經過一個驛站，七百多年的歷史！今天主要是走一些特殊地形的行程，有地下城、駱駝岩、蘑菇岩，而最有名的熱氣球也是在這個區域。火山岩地形真的相當特殊！首先是驛站 (Sultanhanı)，這個地方其實完全看不出來有七百多年的歷史。不過我們只是路過，所以沒有要入內參觀（就是上車睡覺，下車尿尿的意思）所以你看看這個雕工！也許是因為土耳其的古蹟都是石頭，所以要自燃難度可能比較高，所以保存的比較好吧（欸今天來到的區域稱為卡帕多奇亞 (Cappadocia)，囊括了四個省區，我們大多時間都在內夫謝希爾省 (Nevşehir) 的範圍內。第一站是地下城 (Kaymakli Underground City)。因為這個區域相當多火山岩地形，以前的人因為這個地方太荒涼，

土耳其

[土耳其] 長途巴士的浪漫 Day 2

昨天結束以佛所的行程後，就拉車到棉堡 (又稱帕慕卡雷 Pamukkale) 附近的飯店入住。畢竟是世界遺產，所以這個地方維持的還算不錯。一大早天才剛亮，就到了棉堡，因為巴士的車程從飯店出發只要 10 分鐘，所以我們算是很早抵達的團體之一。進入景點後，第一個點是運動場（當然還是廢墟）遠眺可以看到劇院，之後我們會走到上面去拍照！之所以會叫做棉花堡，並不是說他像棉花一樣柔軟，而是像棉花一樣雪白。由於該地會有溫泉水，是屬於碳酸鹽泉水，所以溫泉水流出來後，混合各種礦物成份的泉水乾枯，其中碳酸鈣風化就形成白色的結晶體（就是俗稱的石灰啦。所以整個地景景觀會像是雪白色的棉花一樣。棉堡是在山頂上，所以往下鳥瞰是整個城鎮。其實你會發現並不是每個地方都會被碳酸鹽覆蓋。根據領隊表示，尚未被列入世界遺產之前，

Trukey

[土耳其] 長途巴士的浪漫 Day 1

因為員工旅遊的關係，所以有機會去一趟可能這輩子沒有機會再去一次的國家，土耳其。但是我好像沿路上都沒看到土耳其火槍兵的說（不對！好啦，可能是看同學玩世紀帝國看太多的關係吧。我們的班機是晚上 10 點，要飛 12 個小時到伊斯坦堡，之後再轉國內線前往依茲密爾 (İzmir)，由於我們的天數比較短，所以頭尾兩天利用國內線航班，來縮短拉車的時間。我們抵達 İzmir 之後，上了遊覽車，準備前往第一個行程，賽爾丘克 (Selçuk)。拉車途中我們有經過奧圖曼帝國時期的城堡，不過只是遠觀而已。到了 Selçuk 之後，我們前往席林傑 (Şirince) 的一個小鎮逛街，

JavaScript

[測試] e2e 的測試方法 Day 2

前面大概敘述過 NightwatchJS 的運作方式，接著繼續來說明一些可能會有雷的地方。當然，我覺得這不是每個人都會遇到，應該是我天生比較帶賽的關係。像是鋤頭打到自己的腳之類的事情。運作順序畢竟他還是 JavaScript 的關係，所以運作的方式可能會跟我們想像的有點出入。舉個例子來說， browser .verify.ok(true, '第 1 次 Verify') browser .click('button[type="submit"], function() { browser.verify.ok(

JavaScript

[VueJS] 重新檢視 lifecycle 與 vue-router

由於遇到了一些 Google reCAPTCHA 的狀況，所以剛好找時間來重新檢視一下 Vue 元件的生命週期這件事。其實也不是 Vue 本身的問題，但是很奇妙的是，我真的就是遇到這種狀況。剛好複習一下也好。 Lifecycle 首先還是先複習一下官方這張說明圖片， https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 接著回想一下我上次寫過，關於 Vue-Router 外面的那些事情。然後我們來玩一下排列組合，在這邊只關注剛進去元件或是路由的情況， beforeRouteEnter beforeCreate

JavaScript

[JS] RegExp 參數的正確姿勢

雖然說寫了很多 JavaScript，但是還真的是頭一次遇到 global 的問題。其實也不是什麼問題，只是對於這個物件的不熟悉，所以覺得他是一個 Bug，後來才發現他是一個 Feature。 RegExp 在開始之前，我們可以先參考一下 MDN 的文件， https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions 然後可以看一下關於 Advanced Searching With Flags 的區段，

JavaScript

[測試] e2e 的測試方法 Day 1

上一篇解釋了虛擬碼的概念，這次直接進入撰寫測試的方法。當然，需要一點工具來輔助我們，這裡我們使用 nightwatch.js 來當作測試的框架。如果不是使用 nightwatch.js 的人，可以左轉沒關係。環境萬事起頭難，建立環境這件事情最難！雖然我們使用 nightwatch.js 來當做測試框架，但是我們還是需要具備一些基礎知識，好方便我們操作。首先，我們需要的有，可以運行 NodeJS 的環境可能需要安裝 Java SDK selenium-server-standalone 獨立執行檔 (*1)

JavaScript

[測試] e2e 的測試方法 Day 0

End-to-End 測試，是近幾年開始流行的測試方法。身為一個農夫，其實沒有寫測試也是很合理的（不是！因應開發需求，所以趕流行也得開始寫一點測試的東西，不然會不夠潮！這篇是相當入門的火星文，如果已經是火星人，請直接 End 謝謝。前置作業首先，測試工具有很多，在我們討論測試工具之前，要先釐清幾件事情：測試是什麼東西？該怎麼把想法變成測試程式？測試的程式該怎麼寫？要用哪一種測試工具？「測試」顧名思義就是一種測試（廢話，目的在於驗證結果是否正確，我們主要的目的在於確保那個黑盒子能夠正常運作。也就是說，在我們定義的邏輯沒有問題的前提下，

VueJS

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

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

VueJS

[VueJS] 關於動態載入這件事

因為有一些需求的緣故，所以需要做到動態載入元件。想當然爾，事情不是想像中的那麼簡單。雖然說 VueJS 已經很方便了，不過做起來還是有一些地方需要留意動態元件 VueJS 有一個 :is 可以用，詳細的使用辦法可以參考官方說明。 <component :is="myComponent"></component> import myComponent from 'components/myComponent.vue' export default { components:

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

JavaScript

[VueJS] 眼藥水 2.0

這年頭好像 2.0 比較夯，隔壁棚的 ng 也出了 2.0（而且聽說要重來，React 表示：推薦當然要先敗讀一下 Kuro 的大作， V1 與 V2 元件實體之差異官方文件 Render Function 實際操作所遇到的狀況你如果在獨立元件當中，不使用 Render Function 的話，官方會建議你去改 webpack 的設定（因為預設是使用