2020年11月10日 星期二

1. import { map } from 'lodash';

image



2. import map from 'lodash/map';

image



3. import { map } from 'lodash/fp';

image



4. import map from 'lodash/fp/map';

image



5. import { map } from 'lodash';

with babel-plugin-lodash, same as 2.
image



6. import { map } from 'lodash';

with lodash-webpack-plugin
image



7. import { map } from 'lodash/fp';

with lodash-webpack-plugin
image



8. import { map } from 'lodash-es';

image

Read More ...

0 留言
2020年11月5日 星期四

 *為了方便對照,名詞上附上打中文 & 英文

[架構]
網站上埋了 GTM(Google Tag Manager) 的設定碼
所以前端只會對 GTM 送事件,觸發 GTM trigger 後再觸發 GTM tag
將事件轉送至 GA(Google Analtics) 和其他分析平台

[情境]
我們 GA 有一個事件(稱事件作 first_shop),程式邏輯上每個使用者只能觸發一次
同時我們定義了 GA 的一個客製維度(custom dimension) userId
觸發 first_shop 時會帶 userId

[觀察步驟]
1. 進入 GA,行為(Behavior) - 事件(Events) - 熱門事件(Top Events)
2. 使用 first_shop 過濾事件類別(Event Category)
3. 設定次要維度(secondary dimension)為 userId

[預期行為]
事件總數(Total Events) & 不重複事件(Unique Events) 數量應都為 1

[問題]
1. 上述兩項值不為 1,而且所有筆資料會一併都是 2 or 3,不像使用者行為所導致的數字
2. 為了測試,我另外定義個客製維度(custom dimension) debug,會送 userId, triggeredAt
   結果發現同筆資料事件總數(Total Events) & 不重複事件(Unique Events) 為 2
   代表同一時間觸發了兩次
3. 同上,我確定程式碼端不會造成重複送事件
4. 同上,同樣事件,另個平台次數確實為 1
5. 以下是觀察到的奇怪問題

[狀況 1] 同一天資料不同天看會得到不同結果(跟問題 1 有關)
我能夠透過次要維度去識別每筆資料(有 userId, triggeredAt)
假設我在不同的三天觀察並匯出(Export) 11/1 的資料
並將最大顯示筆數設為 5000
- 11/1 23:00 看 11/1 資料,總事件約為 1500,顯示筆數約為 1500,事件總數 & 不重複事件都為 1
- 11/2 23:00 看 11/1 資料,總事件約為 2500,顯示筆數約為 1200,事件總數 & 不重複事件都變為 2
- 11/3 23:00 看 11/1 資料,總事件約為 3000,顯示筆數約為 1000,事件總數 & 不重複事件都變為 3
- 假設 11/1 匯出的資料中有一筆 userId = AAA 的資料,但 11/2 匯出的資料中卻沒有,11/3 亦有同情況
推測 GA 因不明原因只挑了部分的資料回傳,但總數卻累加上去,並分配給顯示比數

[狀況 2] 時間區間內的資料中找不到單天的資料
假設我先在 11/1 看到一筆 userId = AAA 的資料
再將時間區間設為 10/31 ~ 11/2,資料中卻沒有上述該筆資料
並起總比數也不為 10/31 + 11/1 + 11/2,並將總次數分配到總比數上
此時每筆事件總數 & 不重複事件都約為 9
其實就是狀況 1 放大到多天的情況

[狀況 3]
我在 GTM 該 trigger 上多加一個 tag,這個 tag 會將事件送往另一個 GA
在另個 GA 中資料就都是正常的,不會有以上情形

[現況]
有試著聯絡 Google,但 Contact us 平台不通
透過其他部門回報也沒下文


Read More ...

0 留言
2020年9月5日 星期六

 


     素材


這個不能差分
大家可以回家啦~

Read More ...

0 留言
2020年8月30日 星期日

 


工作模式
只有 surface pro/go 能作到的體位(X

專注模式放 P 網吧

Read More ...

0 留言
2020年8月28日 星期五

 




安西教練,我想要有這種同事…
絕對不是我一天到晚把環境搞壞在逃避現實

Read More ...

0 留言
2020年8月17日 星期一

 


Surface Duo
雖然感覺不是很實用
但還是非常想要!

Read More ...

0 留言
2020年8月1日 星期六




最近莫名地就想畫包包頭

還是沒動力的跟條狗一樣
大概是繪圖板也被我感染到
昨天畫到一半驅動的靈壓居然就消失了
重裝後感壓變得怪怪的
現在線條畫起來都有股違和感

還有一張差分就放 P 網吧
Read More ...

0 留言
2020年7月26日 星期日


一定是因為沒有這種教練我才瘦不下來

最近什麼都不想做,只想吃巧克力…

Read More ...

0 留言
2020年7月19日 星期日



最近一整個沒動力…_(:з」∠)_

雖然有遊戲,但電腦實在不給力
到現在都還沒開
說起來…去年年初就在想換電腦
到現在都還沒換

差分 P 網
Read More ...

0 留言
2020年7月3日 星期五




一直在想
這種胸前簍空的服裝
像 FGO 傻巴泳裝那樣
有沒有專有名詞

P 網差分
Read More ...

0 留言
2020年6月25日 星期四



前幾天看日蝕時腦中浮現的畫面
不要問我為什麼

另外端午節快樂…
熱到不行…
去 P 網消消暑吧
Read More ...

0 留言
2020年6月20日 星期六




好久沒寫技術文章
不對,好像從來沒寫過
不過先上圖,不然一定沒人看
第二張可以拿來訓練恥ㄌ…當桌布
下面要開始認真囉,被腿釣進來的可以先行離席了
離席後可去 P 網領差分

那,這次主要就是介紹幾個 vuex + typescript 的套件
你是否曾經因為沒有型別而感到不安、焦慮、甚至顫抖

最近接觸新專案,全是 js
而且專案都還蠻大的,在想好像該導入 ts 會比較容易維護
vue 的部分是還好,現在 vue 對 ts 的支援其實還不錯
比較大的問題是 vuex
dispatch, commit 沒有提示、型別檢查,是要成為通靈王嗎
所以找了幾套讓 vuex 可以有型別檢查的套件,需求是
1. component 中使用 state, getters, mutations, actions 要有型別
2. component 中不需 import 型別
3. 可以透過 this.$myStore.xxx 直接呼叫 (有的話最好)
最後挑出了這幾套

1. vuex-simple
2. vuex-tstore
3. vuex-ts-enhance
4. vuex-ts-action

下面附上各套使用範例

vuex-simple


github: https://github.com/sascha245/vuex-simple
npm: https://www.npmjs.com/package/vuex-simple

最推這套,寫起來最簡潔
module 就當一般 class 寫就好
新專案或 store 架構還不大推薦就用這套
缺點
module 非 vuex 原生寫法
還有就是因為寫在同一個 class 的關係
mutation, action 不能同名

example

import { Mutation, State, Action, createVuexStore, useStore, Module } from 'vuex-simple';

class UserModule {
@State()
public name: string = '';

@Mutation()
public updateName(name: string) {
this.name = name;
}

@Action()
public async patchName(payload: { name: string }) {
this.updateName(payload.name);
return 'name';
}
}

class RootModule {
@Module()
public user = new UserModule();
}

export const store = createVuexStore(new RootModule());
export const $tstore: RootModule = useStore(store);

// bind $tstore to vue instance
// state: this.$tstore.user.name
// mutation: this.$tstore.user.updateName()
// action: this.$tstore.user.patchName()



vuex-tstore


github: https://github.com/stevethedev/vuex-tstore
npm: https://www.npmjs.com/package/vuex-tstore

跟 vuex-simple 其實蠻類似的
不過可以用 vuex 原生的寫法
如果想要型別又沒辦法大改寫法可以先用這套頂著
缺點
相較 vuex-simple,呼叫方法時寫起來有點冗長
在 action 呼叫 action/mutation 時沒有型別

example

import TStore from 'vuex-tstore';

const userState = {
name: '',
};

const userModule = {
state: userState,
mutations: {
updateName(state: typeof userState, name: string) {
state.name = name;
},
},
actions: {
async patchName(ctx: any, payload: { name: string }) {
ctx.commit('updateName', payload.name);
return 'name';
},
},
};

const rootModule = {
modules: {
user: userModule,
},
};

export const $tstore = new TStore.Store(rootModule);
export const store = $tstore.store;

// bind $tstore to vue instance
// state: this.$tstore.modules.user.state.name
// mutation: this.$tstore.modules.user.mutations.updateName()
// action: this.$tstore.modules.user.actions.patchName()


vuex-ts-enhance

github: https://github.com/zWingz/vuex-ts-enhance#readme
npm: https://www.npmjs.com/package/vuex-ts-enhance

珍惜下班時間,遠離 store mapping
這是針對 store mapping 提供提示與型別檢查
相信大家都踩過 mapXXX 的雷
在前公司我們還限制不准用
原本想說有 vuex-tstore 應該就夠了
但發現現在的專案滿滿 mapXXX,崩潰潰
找到這套也蠻意外的
不過它提供很有限
缺點
只能用在兩層 module 的 store,不能再多
在 action 呼叫 action/mutation 時沒有型別
example

import { EnhanceStore } from 'vuex-ts-enhance';

const userState = {
name: '',
};

const userModule = {
state: userState,
mutations: {
updateName(state: typeof userState, name: string) {
state.name = name;
},
},
actions: {
async patchName(ctx: any, payload: { name: string }) {
ctx.commit('updateName', payload.name);
return 'name';
},
},
};

const rootModule = {
modules: {
user: userModule,
},
};

export const {
store,
mapActions,
mapMutations,
mapState,
} = new EnhanceStore(rootModule);

// import { mapAction, mapMutations, mapState } from {store path};
// ...mapActions('user', ['patchName'])
// ...mapMutations('user', ['updateName'])
// it will suggest you and give type checking, but it only support the 1-depth submodules.


vuex-ts-action


github: https://github.com/natsusola/vuex-ts-action#readme
npm: https://www.npmjs.com/package/vuex-ts-action

自肥
這套是我寫的,不過也只是做個 interface 而已
如上面兩套提到的缺點,action 呼叫 action/mutation 時沒有型別
所以這個就是讓你在 action 呼叫 action/mutation 時有提示 & 型別
缺點
寫起來有點麻煩,要一直加型別
因為定義的關係不能使用 ActionTree/MutationTree 那種一次全定義的
或有人可以跟我說怎麼寫

example

import Vuex from 'vuex';
import { TActionContext } from 'vuex-ts-action';

const state = {
name: '',
};
type state = typeof state;

const mutations = {
updateName(state: state, name: string) {
state.name = name;
},
};

const actions = {
async patchName(ctx: TActionCtx, payload: { name: string }) {
ctx.commit('updateName', payload.name);
return 'name';
},
};
type TActionCtx = TActionContext<typeof mutations, typeof actions>

const module = {
state,
mutations,
actions,
};

export const store = new Vuex.Store(module);


總結
這次找的過程其實也蠻有趣的
在找到 vuex-tstore, vuex-ts-enhance 時
其實它們都些不完善的地方
vuex-tstore 原本不支援提示 submodule 的 state
vuex-ts-enhance 原本不支援 mapMutation 和回傳 mutation/action 型別
因為要用到,所以我就抓下來發 PR 給作者
為了改那些東西也讓我對 ts interface 有更進一步的認識
回到套件
推薦 vuex-simple > vuex-tstore > vuex-ts-enhance
後面兩個可以配合 vuex-ts-action 使用
除非既有專案的 module 非常大了
不然還是 vuex-simple 寫起來最舒服
如果以上套件對你有幫助的話
可以在 github 上給作者星星喔

Read More ...

0 留言
2020年6月13日 星期六



福利就放 P 網了
Read More ...

0 留言
2020年6月8日 星期一



恭喜小鹿老師出新書了~
你以為裙子是被風吹起來的嗎?
其實是…《天啊!這女高中生裙子底下有槍啊!》
原插畫角色都超可愛的

書名決定的心路歷程蠻好笑的
編輯部的秘密!? 原來輕小說的書名是這樣取出來的!
https://reurl.cc/lVMEGY

Read More ...

0 留言
2020年6月7日 星期日


久違的把參考書拿出來畫一下
不然好像都只有買的當下會翻一下
前幾天又看到好幾本想要的書
雖然知道買了幾乎沒在看,但就是想要啊!
Read More ...

0 留言