Mar 3, 2019
6 min read
前言 這個月大多在適應新的生活環境，第一次來新竹工作，不意外地在新手村落腳。在還沒來新竹之前，就聽聞過新竹可能是個比台北無聊的地方，那時候覺得反正我生活也很宅，不是 coding 就是買化妝品，只要有舒適的套房和康是美就可以存活了，但是實際上沒有我想的這麼簡單XD 畢竟新竹的社群活動真的少很多，讓假日少了一些樂趣。既然沒有實體活動，只能在線上多參與一些活動或是多看別人分享的文章了。
本月份學習內容除了加強 React 之外，也開始加入多一點 Golang 內容，不意外的話，之後工作使用語言應該會是 JavaScript 和 Golang，所以先安排階段性的練習，在之後專案中也能比較快上手。
學習回顧 React React 在大致上用過一輪主流的 libs 後，開始慢慢把學習重心放在 source code 研究。例如 build form 常用的 formlik，看一下他是怎樣透過簡單的 loadash.toPath function 取得 value，讓 formlik 可以用在複雜的 nested form 上。另外也研究 react-bootsrap 和 material UI 中 styled component 架構，希望對於往後開發相關 component 有幫助。
Feb 27, 2019
7 min read
前言 React Hooks 自從正式 release 後，就出現很多相關教學文章，所以這篇不是講如何實作，而是說他如何在 stateless functional component 中保存當前 state。 此外，最近也開始嘗試把 class component 轉換成使用 hooks 的 components，但過程中還是需要蠻多調整，包含之前有使用一些 lifecycle functions ，藉此機會順便檢視是否真的必要使用這些 functions，是否可以透過其他架構方式來簡化。
useState 以下是我們使用 useState function 的基本範例：
1
2
3
4
5
6
7
function Example ( props ) {
const [ state , setState ] = useState ( initialState )
return (
/// ReactElement
)
}
依照 functional component 邏輯，我們應該每次都會新建一個 state，導致 state 值無法保存。不過透過 React Hooks，我們卻可以在每次 render 時得到上次更新後的 state 值，這是為什麼呢？
Feb 3, 2019
6 min read
又到了每個月檢討念書進度的日子了，這次 2019 新的一年有蠻多人生大轉變，像是離職換了一個新的工作環境，以及脫離媽寶身份，跑去新竹生活等。 Moxa 算是我轉職後第一份的正式工作，而在這一年中其實學到很多經驗，但是也對一些流程和開發方式有些疑問。我很想要根據這些問題提出自己的見解，可惜經驗少，又沒有其他公司經驗可以參考，因此總有很想要提出改善，卻又不知道該如何改善的感覺。
而在年底時，剛好有這個機會可以去趨勢工作，在考量趨勢科技是一家成熟軟體公司的情況下，雖然目前開發經驗還累積不足，但還是決定前往了。我不能説決定是不是正確的，但是我覺得人生就是充滿各種契機，只要在過程中很努力的學習，相信最後都還是值得的結果。
話又說回來，這次學習主軸又拉回前端，並且參雜一點 Network 理論。這次學習是以 React 以及相關 lib 為主，而 network 則是清大開放課程的 區域網路 ，之前上完這位教授的網路概論，覺得收穫良多，所以繼續上教授的另一門課程。
此外，這次在學習紀錄上則是採用 91哥 所提到的 Trello + Calendar Plugin，不過比較不方便的是因為每天紀錄都要開一張卡，寫 blog 時不好統整，因此又自己寫了一個小工具，可以讓這些 Card 擷取並轉換成自己的格式。
學習回顧 React 由於已經學習過一個框架，所以在學習另一個框架的時候，就把重點擺在它的實作原理和在應用時應該要注意的事項。像是 Lifecycle 一定要知道（React 16 版本）還有 render 時的流程，要如何避免它會 over render。甚至當這些畫面沒有如你預期更新時。可能是哪些流程出了問題等。
Jan 23, 2019
6 min read
問題： 今天收到 back-end 同事回饋，說是在新版本的 APP UI 中出現不正常行為。由於我們的 menu 必須根據 Embedded System 中的 Applcation 來增減，因此就使用 menu state 來讓其他 component 也可以透過 dispatch 控制 menu 項目。
menu state 中有一個 property 是用來記錄 menu 的縮放，結果現在這個縮放行為會在使用者按 menu item 時出現異常，property value 會回到原始狀態 (initial state)。
找出原因： 當同事回報這個問題時，第一個想到的就是在 menu state 被 re-create，才會引發 re-render 行為，進而讓 menu 回到沒有縮放的初始狀態。
Jan 17, 2019
10 min read
前言 網路上有很多關於如何使用 redux and react-redux 的教學文章，所以在這邊就不寫如何去應用，而是會著重在一些可能會忽略的細節以及大概的 實作原理。其實這些細節都寫在官網上，不過一般在教學文章內較少著墨，所以特別摘錄出來，讓大家在使用 react-redux 時能注意到可能會發生的問題。
mapStateToProps Issues首先來談談在建立 connectHOC 常用到的 mapStateToProps，由於這個
function 關係到 component props，所以就容易產生沒有發生 render 或是 render 次數過多的問題。
1. render() 沒有被觸發 關於這部分，官網也有提出相關內容：
By default, React Redux decides whether the contents of the object returned from mapStateToProps are different using === comparison (a “shallow equality” check) on each fields of the returned object.
Oct 5, 2018
4 min read
9月份目標 把 Effective Go 看完 複習 JavaScript 概念，釐清各細節 工作上用到的 Protocol 相關知識 目標回顧 1. 把 Effective Go 看完 已看完，印象比較深刻的部分包含：
New - It’s a built-in function that allocates memory, but unlike its namesakes in some other languages it does not initialize the memory, it only zeros it.
Sep 24, 2018
9 min read
前言 由於專案需要整合 Node-RED ，我們必須開發自己的 Node 來讓用戶可以直接透過視覺化方式來建立簡單邏輯，又我們的 SDK 是 C 版本，因此有這機會可以接觸 Node.js 所提供的 C/C++ Addons 功能。另外，自己寫 server-side 都是使用 Golang，所以這也是難得的機會可以試試 Node.js。
目前網路上使用 Node.js N-API v10.x 版本的範例並不多，初期在使用時也因為對於原理不熟悉，因而踩過一些坑，希望這篇文章能講述基本概念，讓其他使用者能避免也踩到相同的坑。
相關技術 C Node.js N-API 與v8一些原理知識 JavaScript How C/C++ Addons Work With JavaScript C/C++ Addons Node.js Addons are dynamically-linked shared objects, written in C++, that can be loaded into Node.js using the require() function, and used just as if they were an ordinary Node.js module.
Aug 5, 2018
11 min read
前言： 最近專案需要提供工具讓外部人員一同參與 Web App 的開發，由於我們的 Web App 已經有基本架構和開發方式，為了讓外部人員能夠更方便的 follow 架構，所以就決定使用 Schematics 來創建專屬樣板，讓協作開發人員可以迅速地建立專案用的 component page，然後他們只需要修改部分程式碼即可。
Angular Schematics 因為我們使用 Angular 框架，所以就使用 Angular Schematics 來建立樣板。Schematics 是一個改善 workflow 的工具，而透過 Angular Schematics ，我們可以模組化地調整專案現有檔案，例如在專案內新增指定檔案，或是修改既有檔案的內容等，減少手動調整 effort 和錯誤發生。
如同圖片所示，我們使用 Schematics 將要修改的部分（橘色方塊）apply 在 staging area，當所有內容調整完成，再 apply 到既有的專案中。（為什麼要有 staging area，主要是因為
Schematics 中可能有不只一個修改步驟，透過先應用在 staging area ，可以避免中間有錯誤發生，而導致直接影響到既有專案）
Jul 15, 2018
7 min read
前言 這篇文章是基於 Redux Anti-Patterns - Part 1. State Management 所進行的探討，包含在專案內是否有犯類似的錯誤，以及後續該如何改善。文章會結合目前專案所使用的 Redux(ngrx)，並檢視使用 Ngrx 是否能避免這些錯誤發生。
1. State Duplication 問題點 錯誤的建立 state 導致 state 內部 property 或是與其他 state 內容重複。文章內以 session 為例子：
1
2
3
4
5
interface Store {
sessions : Session [];
/** The currentSession would be a part of sessions*/
currentSession : Session ;
}
解決方式 如上面的例子，將 currentSession 改成 index 檢索，所以我們實際取用資料時，還是使用 sessions 內的資料，而不是複製一份到 currentSession。
Jun 24, 2018
6 min read
前言 Chrome 66 版本全新支援 CSS Typed Object Model，透過這種新型的 CSS Typed OM，可以有效提升使用 JavaScript 操作 CSSOM 屬性的效率。雖然目前僅有 Chrome 支援（ Firefox 據說在努力中， Edge 目前沒下文），不過既然此方式能對網頁呈現效能有所提升，讓開發者和使用者都因此受惠，未來想必會成為主流方式。
CSSOM & CSS Typed Object Model CSSOM 傳統的 CSSOM 是使用 string 格式來進行 style 修改或是讀取等行為，當開發者傳遞一個 string 內容給 CSSOM 時，它會再解析 string 成真正需要的數值。這樣一來一往需要蠻大的成本，再加上開發者傳送 string 時不好偵錯，以及不方便開發者進行一些數值的運算等，讓傳統 CSSOM 似乎不太適合樣式操作。
Image source：http://recurship.com/blog/2018/5/31/xfvrq9aauqkayhkd4kzp7gsbfg2bfl