記得2008 11月初的一天

歲末年終這兩天
跟家人一起到果園
說好一早 老爸要帶我們去 走走山邊的道路
還沒五點 天還沒亮
就已醒來 醒著 想著
2008 11月初的一天

坐著高鐵 從台北下來 換了火車
再搭著客運 下車在老滕林的農場
往山裡的方向 走去
筆直的道路 是通往家的方向

晚上在果園 走在林道上
只能透過月光 看著前方依稀道路的方向
沒記錯的話 草叢裡點點的亮光 應該是螢火蟲

天微微亮 時間應該只是五點多的清晨
敲敲木門 我爸已經起來等著
穿上長袖 在還昏暗的天色中 往山的方向 走去
快亮的天空 是混了黑夜的藍色
走在山路上 忘記了 一路上 只是走著
隨著 天亮了起來
也走到了山上 看到了如雲海般的景觀

那個時刻 沒有留下文字 沒有留下照片
這一天卻永遠 烙印在我心裡最深的角落

vue自訂元件 自訂event

在vue裡自訂元件 除了最常用的props使用
也會需要自訂event 以如同@click般的使用
這部分 只要在元件內使用$emit(event-name)發送
就可以在使用元件時透過 @evnet-name來觸發handler

例 自訂子元件my-component
透過emit發送事件,並同時發送data1,data2資料
this.$emit('event-name',data1,data2)
下是三種可能的使用方式

子元件發送
this.$emit('event-name',data1,data2)

父元件接收方式
1.handler取得發送event時所帶的資料
  若只是設定myHandler 
  取得data1,data2 是來自$emit送出之參數
  <my-component @event-name="myHandler">
  myHandler(data1,data2) {}
  
2.handler取得使用者自帶的資料
  設定handler時為執行myHandler(data1,data2) 
  取得data1,data2 是來自使用時所傳遞之參數
  <my-component @event-name="myHandler(data1,data2)">
  myHandler(data1,data2) {}
  
3.handler取得event帶過來的資料,並帶使用者自訂資料
  event所帶的資料透過$event取得
  <my-component @event-name="myHandler($event,data1,data2)">
  myHandler(evt,data1,data2) {}
  拿到到evt是event帶來的資料,data1,data2是使用者帶的資料

子元件如何判斷是否被使用時設定了event handler
會需要依照 元件被使用時,是否有設定了eventHandler來做後續處理
可透過this.$listeners.[事件名稱]來確認

my-component子元件
this.emit('beforeClick')
this.emit('afterClick)
computed:{
  hasBeforeListener() {
    return this.$listeners && this.$listeners.beforeClick !== undefined
  },
  hasAfterListener() {
    return this.$listeners && this.$listeners.afterClick !== undefined
  }
}
這時候就會
this.hasBeforeListener的結果會是true
this.hasAfterListener的結果會是false

ios上 safari 視窗過度拖拉問題

在iphone上當在操作頁面的拖拉scroll
會造成整個視窗被拖拉上下移動
而讓原本該scroll的內容
在一個同時被拖動的視窗內移動
要修正這問題
需要在container內
對於使用者 touch過度拖拉的問題做修正
在網路上有找到解法
透過偵測touch事件 擋住不該往下繼續傳遞的事件
來讓視窗可以固定

最外層的container 加上scroll設定

 <div id='app' style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">

加上script

<script>
  var overscroll = function(el) {
    el.addEventListener('touchstart', function() {
      var top = el.scrollTop
        , totalScroll = el.scrollHeight
        , currentScroll = top + el.offsetHeight
      if(top === 0) {
        el.scrollTop = 1
      } else if(currentScroll === totalScroll) {
        el.scrollTop = top - 1
      }
    },{passive: false})
    el.addEventListener('touchmove', function(evt) {
      if(el.offsetHeight < el.scrollHeight)
        evt._isScroller = true
    },{passive: false})
  }
  overscroll(document.querySelector('.scroll'));
  document.body.addEventListener('touchmove', function(evt) {
    if(!evt._isScroller) evt.preventDefault()
  },{passive: false})
</script>

解決preventDefault失效問題

Chrome addEventListener 預設passive 為true
用來提升tocuch 與 mouse wheel的效能
但副作用是 他造成preventDefault失效

但如果 是監聽的事件內會用到preventDefault
停止事件的傳遞
必須將 passive 設為true 才有作用
例

document.body.addEventListener('touchmove', function(evt) {

  evt.preventDefault()

},{passive: false})

iphone下使用iframe的問題

記錄一下iphone上的問題
最近遇到一個case需要在parent頁面透過iframe開啟child頁面
child頁面的scroll就出問題了
整理一下幾個問題點

1. css若position設定為fixed
   會有很多怪現象不要用
2. iframe內要抓取child頁面的高度
   window.innerHeight會隨內容的多少而增減
   不要使用,改用screen.height取得真正的高度
   再做計算
3. child頁要使用iscroll需要計算出外框的高度
   在iphone下高度用screen height取得高度後
   必須要扣掉parent 的 footer與header高度
   才會準確

SQL 一次更新多筆資料

一次更新多筆資料
SQL 一直不熟
紀錄一下會用到的語法

INSERT INTO tablename (id,position) VALUES //要更新的欄位一定要包含有pk的欄位

(6878,7),(6879,8),(6880,9) // 送入多筆要更新的資料

ON DUPLICATE KEY UPDATE

id=VALUES(id),position=VALUES(position) 

若要insert的資料值內容為null ,必須將值改成NULL才能插入
否則會出錯
例

INSERT INTO table(column_name) VALUES('null')
改成
INSERT INTO table(column_name) VALUES(NULL)

時間 就像河水一樣的流走

因為感冒 一整天精神不濟
渾渾噩噩 像是不屬於自己的身體
耳機裡的音樂
像是 一股清流 流過腦海 流過思緒
Time Flowing Like a River

Time, flowing like a river
Time, beckoning me
Who knows when we shall meet again
If ever
But time
Keeps flowing like a river
To the sea
Goodbye my love,
Maybe for forever
Goodbye my love,
The tide waits for me
Who knows when we shall meet again
If ever
But time
Keeps flowing like a river (on and on)
To the sea, to the sea
Till it's gone forever
Gone forever
Gone forevermore
Goodbye my friends (goodbye my love)
Maybe forever
Goodbye my friends (who knows when we shall meet again)
The stars wait for me
Who knows where we shall meet again
If ever
But time
Keeps flowing like a river (on and on)
To the sea, to the sea
Till it's gone forever
Gone forever
Gone forevermore
Forevermore
Forevermore
Forevermore

長濱

非假日的時間 休假
總有著 更像休假的氣氛
在颱風來前的這天 我們坐著火車 目標是
花蓮玉里

車廂中間 有個圓弧狀的拱門
南迴線的自強號 跟我當兵時所記得的還是一樣
大武過後 看到台東的海岸線
忍不住說起 當兵時 騎摩托車往來知本與金崙間的回憶
火車過關山後 壯麗的山景與寬闊遍綠的稻田
這是 我喜歡的台東 景象

三個多小時的車程到了玉里
我們決定騎摩托車 到長濱

車行的老闆娘 說明的很清楚
我們不用靠導航 就進入了玉長公路
這段是穿越山與海的東西向橫貫公路
沿途 往上的爬升
遼闊的視野 心裡的興奮
來自美麗的景觀
還有自己彷彿回到年輕時 騎著摩托車
上山下海的那份心境

隨著一路下坡 看到了海
長濱 我們到了
我們相約 一定要再來一次

八月

這個八月 連續兩三個禮拜的雨
終於停了下來
趁著好天氣
三樓露台外 媽媽曬著棉被枕頭
空氣中 是一股棉被曬著太陽後 溫暖的味道
在小弟房間 妹妹用著她叔叔的電腦
玩著MineCraft
我坐在地上 用電腦 在網路上閒逛
老媽 在旁邊 邊折著衣服 邊跟我聊天
感覺 像是高中時間的夏日
輕鬆 自在的 居家生活

以變數 動態使用RegExp

RegExp一直沒有摸得很熟
用到的部分就註記一下
ex:以oz取代字串中所有的ab
正常
str = "ab123ab456"
str.replace(/ab/g,'oz')
結果:oz123oz456

以變數方式使用
str = "ab123ab456"
x = 'ab'
y= 'oz'
str.replace(new RegExp(x,'g'),y)
結果:oz123oz456

vue-loader prettier錯誤

錯誤訊息
No parser and no filepath given, using 'babylon' the parser now
將prettier升級到1.12即可
npm install prettier@~1.12.0

巴奈 流浪記

巴奈一直是我最喜歡的台灣女歌手
10幾年前
一個人在辦公室加班的下午
戴著耳機 用著還是播放CD的隨身聽
一遍一遍的聽著巴奈流浪記
在女巫店 在河岸
一場一場的聽著巴奈的現場

到後來 看到他的新聞
都是在抗爭的現場
再聽到這個最新版本的流浪記
吉他變重了 節奏更強了
卻也讓人感到更加難過

element-theme 使用

1.cli安裝
  建議安裝在global 下
  npm install element-theme -g
2.專案內安裝
  1.在專案內先安裝預設的chalk theme
    npm install element-theme-chalk -D
  2.專案下執行
    et init
    產生 element-varable.scss設定檔案
  3.產生theme目錄
    專案目錄下 執行 et
    會依照設定檔產生theme目錄
3.專案內使用
  1.在project 進入點 entry.js加入
    import '../theme/index.css'
    如果原有已經有import theme-chalk則disable掉
  2.可以在專案下執行
    et --watch 監看element-varable.scss的變化自動更新產生theme目錄

ansible-galaxy使用

透過ansible-galaxy 可以找到許多已經寫好的role直接使用
不需要在自己寫,找可以用的role 需要確認要使用的os版本
對應上 比較不會有問題
以下是基本使用上的注意要點
一.安裝roles
1.安裝在global
  ansible-galaxy install xxxx.xxx(由網站找到)
  取得的roles會存在 ~/.ansible/roles/下
  所有的專案都可以吃的到global安裝的role
  但如果有需要因不同專案有不同設定的部分
  建議不要用這樣安裝在global 因為會所有的都吃到同樣設定
2.安裝在指定目錄下
  ansible-galaxy install --roles-path . xxx
  透過--roles-path 指定安裝的目錄
  .則裝在目前所在的目錄下
3.透過設定檔案一次安裝多個role
  ansible-galaxy install --role-path ./roles -r install_roles.yml
  將要安裝的role列表寫在 指定的yml檔案下
  檔案的設定可參考
  https://galaxy.ansible.com/intro
4.設定執行環境
  在playbook下執行role 系統會在幾個預設的位置
  找安裝的role 預設值為
  ~/.ansible/roles:/usr/share/ansible/roles:/etc/ansible/roles
  若在專案內要自訂尋找role安裝的的路徑
  可以在專案的ansible.cfg內設定
  roles_path = ./roles 指定要找roles的位置
5.使用role
  在playbook內使用
  roles:
  - { role: xxxx.xxx }
  執行

跟妹妹的小旅行-台南

走在台南的街道上
這個連假 租車店的摩托車 一台都沒有
跟妹妹說好 我們就徒步旅行
租車的錢 是我們可以拿來吃吃喝喝買禮物的費用

看著手機上的地圖
看著沿路走過的店家
路旁的小巷弄 就像是鹿港的街道一樣
那些老建築 像是停留在好久好久以前的時光

成大附近的店家很多
妹妹 還是想吃茶葉蛋
在育樂街坐下來吃點東西
邊走 邊跳著
走到圓環旁 台灣文學館 等一下我們一定要進去
再順著路走 林百貨 就在前面
妹妹很開心的去找他的禮物

老式建築裡 地板門窗 到處都是好熟悉
小時候老家曾經有過的一切
一直走上頂樓 還好妹妹沒放棄
這裡有豆花 可以吃

看看時間差不多了
走到馬路上 妹妹就腳酸了
我們還是要繼續走
又走到圓環邊
妹 餓了 路邊買了餡餅
妹大口咬下 噴出來的湯汁 讓他一路笑個不停
走到遠東百貨旁
妹 腳酸了
我們坐在路邊聊天 說話
其實火車站很近了

車站人很多 還好上車 有坐到位子
張三的歌裡寫著
"我要帶你到處去飛翔 走遍世界各地去觀賞"
爸爸現在就是這樣的心情

有一天 你長大了 希望你還記得這一天
我們一起在台南的街道上
像一場未知的冒險

讓object data 下的屬性異動可以觸發 watch

data內設定了obj物件
obj下的屬性如果異動
設定在data下的各個屬性,如果發生異動 應該就會觸發watch
但若屬性為object,而object下的prop被異動要能夠觸發watch
有兩種處理方式
1.宣告data時同時把下層的屬性都宣告
例

data(){
  return {
    obj:{x:1,y:1}
  }
}
methods:{
  update(){
    this.obj.x = 2
  }
}

2.宣告data時不宣告下層
改變下層屬性 透過$set執行
例

data(){
  return {
    obj:{}
  }
}
methods:{
  update(){
    this.$set(this.obj,x,2)
  }
}

3.若要改變的屬性是 array
即使是改變arry下一個物件的一個屬性,也是要把整個物件換掉

data(){
  return{
    arr:[
      {x:1,y:2},
      {x:100,y:23}
      ]
  }
},
methods:{
  update(){
    let newObj = {x:1,y5}
    this.$set(this.arr,0,newObj)
  }
}

利用npm outdated 找出已經過期需要update的module

Android 6.x Cordova Content-Security-Policy 異動

當cordova build跑在android 6.x的環境下
需要做調整
1.加上 default-src *
  當content類型沒有設定plolicy時會以這個當作預設設定
2.所有原本設定為* ,都改成http://*
3.圖檔的部分 必須以img-src設定policy