念念不忘,必有迴響。有一口氣,點一盞燈,有燈就有人。

React 之 State Hook 與 Custom Hook

React 之 State Hook 與 Custom Hook

以萬年老梗 counter 來看 State Hook 如何改變 React 寫法,並使用 Custom Hook 加以重構。

React 之 Hello World

React 之 Hello World

React 16.8 的 Hooks 橫空出世後,其 Function Component 也能有 state 讓大家驚豔,React 從此可以不用寫 Class Component,朝 class-free 又邁進一大步。

如何在 Quokka 執行 RxJS ? (VS Code)

如何在 Quokka 執行 RxJS ? (VS Code)

RxJS 是 JavaScript 以 FP 解決 非同步 的神兵利器,透過 Quokka,我們可以更快速測試與學習 RxJS。

如何使用 Rx Observable 存取 API ?

如何使用 Rx Observable 存取 API ?

前端的難點之一是讀取 API 時,回傳為 Promise,這是 非同步 行為;若使用 RxJS,可視為 Observable,以 stream 方式處理 API 回傳資料。

如何將 DOM Event 綁定到 Rx Subject ?

如何將 DOM Event 綁定到 Rx Subject ?

RxJS 常見的應用之一就是綁定到 DOM Event,將 Event 視為 Stream,萬年老梗 Counter 若使用 RxJS 將如何實現呢 ?

Vue-rx 初體驗

Vue-rx 初體驗

若說 Ramda 是 FP 在 ECMAScript 對於 同步 的解決方案,RxJS 則是 FP 在 ECMAScript 對於 非同步 的解決方案。

RxJS 在 Angular 2 之後已經是 framework 的標準配備,Vue 也由官方將 RxJS 6 整合進 Vue,稱為 Vue-rx。

ECMAScript 之 void

ECMAScript 之 void

ECMAScript 如同 C 語言也有 void,但存在感很低,很多人甚至不知道 ECMAScript 有 void

Vue CLI 之 Mode 與 .env

Vue CLI 之 Mode 與 .env

實務上一定會遇到在不同 server ( developmentlabstagingproduction) ,且各有各的 環境變數,該如何設定這些環境變數並且自動切換呢 ?

如何對 API 回傳資料加上 Cache ?

如何對 API 回傳資料加上 Cache ?

若 API 每次傳入的 Query String 相同,所回傳的結果也相同,同時也沒對資料庫做任何異動,對於這類 API,其實可以加上 Cache,當參數相同時,就不再向後端打 API,如此不但節省後端資源,前端的反應也更為迅速,使用者體驗更佳。

事實上 ECMAScript 的 Closure + IIFE 就能實作出 Cache,並不需要依賴其他 Package。

GitHub Dark Theme for Typora

GitHub Dark Theme for Typora

自從 macOS Mojave 引進 Dark Mode 之後,我的所有 App 都已經切換成 Dark Mode,唯一一個沒切換的只剩 Typora,其實目前已經有不少 Typora Theme 支援 Dark Mode,但總是沒找到完全喜歡的,索性自己調了一個,特色是使用 Fira Code 與 Darcula 主題配色。