小河馬

Immutable 對於 React 重要性

Immutable 是我想寫很久的主題,前一份工作時,就大大的踩到關於 immutable 的雷,那時候依靠 google靠解掉這問題,但總該還債的,面試時候也被這個關內給卡到。現代網頁前端不只是要處理畫面更新,更多時間更會處理大量資料處理,不論是重複封裝、更新等等。React 更是把 Imutable 視為重要的開發準則。

閱讀全文

Puppeteer End-to-End Test React

最近接觸某個重要專案,這專案很特別,每個狀態都會對應不同 config 有不同回應,網頁操作、業務邏輯十分之複雜,大概就像是 tree structure 一樣。我負責翻新頁面的 login flow,雖然我對改動邏輯掌握度高,但我滿擔心是否有沒看到的功能,會關聯到舊邏輯。

閱讀全文

阻擋第三方(Block third-party) Cookie,各瀏覽器狀態

來分享個 cookie 相關的內容,是前陣子合作專案測試階段遇到的問題,發生情境是,合作廠商的手機瀏覽器會無法登入會員,主要都是 IOS 用戶。

閱讀全文

Redux multiple dispatch,batch redux-thunk

redux 核心更新 flow dispatch action => reducer => store,當你用 redux 運行多個 dispatch 時,每一個 dispatch 都會獨立更新下去的,這代表著你會 update component 多次,如果你的更新資料又彼此關聯,就可能會發生錯誤。

閱讀全文

React Unit Test with Jest 單元測試

Unit Test(單元測試),針對程式的最小單位,進行測試,最小單位可能是一個 function,或一個 component、class 等等,執行單元測試是為了確保每個功能都能夠正常執行,提早發現並找出問題所在。

閱讀全文

GA跨網域追蹤 google analytics cross-domain tracking

如果你有多個網站服務,每個服務又是各自在不同網域上,就會遇到一個棘手的問題,無法確切的追蹤使用者數據。或許你現在還沒遇到,但我來舉個例子讓你理解問題怎麼發生。

閱讀全文

React Context API 跨元件傳遞資料

React是單向資料流,利用 React.createElement 建構出整個 element tree 結構,使用者利用 state 及 props 處理元件資料,並搭配觸發 react 更新元件。因為 props 是需要傳遞的,所以時常會遇到 props 需要傳很多層。React為了解決這問題,建立了 context API 的功能,要功能就是跨元件傳遞資料,像是知名的 state 管理工具 react-redux 就是依賴 context 實現的。

閱讀全文

Google Analytics 自訂UserId 追蹤數據

分享一個google analytics滿好用的功能,設定User Id,可以讓你直接在報表上找出這個使用者的flow,包括停留時間等等詳細數據,假設你搭配會員系統給予id的話,你也能夠跨裝置的追蹤數據。

閱讀全文

第一份工作

回頭看第一份工作,我從充滿熱情、到充滿自信、最後充滿失望,總共兩年時光,離職前原本心中滿腹抱怨,但現在看只覺得感慨、感激,這就是人生啊。

閱讀全文

React Hooks Performance 效能處理

React發布了幾個月的Hooks,最近也開始嘗試接觸,後面會稍微提一下PureComponent,不會介紹hooks各種特殊用法,就只針對hooks performance優化做介紹,還有搭配redux的處理。

閱讀全文

Menu