Published in手寫筆記·PinnedReact 狀態管理套件比較與原理實現 feat. Redux, Zustand, Jotai, Recoil, MobX, ValtioReact 狀態管理 狀態管理 React 是一個單向資料流的 library,在隨著元件越來越複雜之後,我們會選擇用不同的方式管理狀態,例如當兩個同層級的 Child 元件需要共用狀態時,首選的策略是 lifting state up,將原本在 Child 的狀態移動到 Parent 管理,再從 Parent 向下傳遞到需要共用狀態的 Child,這個是一個常見的情境。 再更複 …React36 min readReact36 min read
Published inStarbugs Weekly 星巴哥技術專欄·Pinned兩大 bundler 交鋒:Vite 與 Turbopack 的技術角力賽近幾年有很多在 bundler 領域的關鍵字 在 bundler 這個領域,近期最火的技術包括 Vite 與 Turbopack,而內部的技術包括像是 esbuild、SWC 等等,這幾個技術都是熱門的關鍵字。看著前端的各種技術不斷推陳出新,這時我就好奇為什麼公司和社群要推廣這些技術。例如,Vercel 不惜砸錢開發自己的 bundler。過去的 bundler 遇到什麼樣的問題呢? 基於這 …Vite15 min readVite15 min read
Published inHahow·Pinned這一年,我在新創教育平台 Hahow 的故事在 2017 年左右時因緣際會之下,我認識了 Hahow 這間公司,當時我還是一名大學生,因為興趣的關係,想要找一些網頁設計相關的課程,找著找著 Facebook(現在應該叫 Meta)就推薦了一門動畫互動網頁特效入門課程給我。當下點開了連結看到了裡面的內容真的非常令人驚艷,從來沒想過在網頁中使用 CSS 搭配 JavaScript 跟 Canv …Hahow7 min readHahow7 min read
Published inStarbugs Weekly 星巴哥技術專欄·Pinnedlodash | 如何正確的 import lodashfeat. babel-import-plugin, lodash-es — 前言 通常前端都會導入一些好用的第三方套件,但是有時後導入的套件並非是基於 es module 進行開發,webpack 沒辦法發揮 tree shaking 的功能,在 import 時一不注意就會載入一堆沒有必要的 function。 在這篇文章中以 lodash 作為舉例, lodash 是個能夠幫我們處理各種資料的函式庫,減少寫一些比較瑣碎的程式碼 …Lodash Es8 min readLodash Es8 min read
Published in手寫筆記·Oct 11, 2022消失的 5 天,在花蓮教召的日子2022/10/03~2022/10/07 — murmur 一下… 這個技術部落格已經許久未更新,距離上次產出竟然是 7 個月前,而且這次寫的內容還不是技術相關的內容,讓我想要再度提筆寫下的竟是教召的故事,自己也覺得有點好笑 😂 之前曾經寫過當兵的心得文,介紹了在北埔新訓四個月的經歷。接下來就讓我來跟各位介紹在一週內教召的心得,跟遇到兩顆流星的故事吧! 消失的 4個月,在北埔新訓的日子 E0122T 義務役到此一遊medium.com 我是在 2021/3 月初的時候退伍的,沒想到在新訓退伍後 1 年半就被教召了… 雖然收到教招通知單的時候,心底很不開心,因為必須要放下手邊的工作,並失去 5 天的自由時間,無論怎麼想都令人感到沮喪。不過,後來和許多人分享這件事,有些人說進軍營可以暫時卸下工作的壓力,讓自己無憂無慮的生活 5 天(加上國慶連假共 10 天),但我卻更喜歡工作的時光,回想起教招的 5 天,其實難以忍受無事可做的時間。花蓮教召6 min read花蓮教召6 min read
Published inStarbugs Weekly 星巴哥技術專欄·Jun 9, 2021Storybook | 用 addon-controls 打造更好的 storybook 體驗取代 addon-knobs 的官方插件 — 前言 在 2020 年以前使用 storybook 想要動態地操作 component 的 props 通常都是使用 @storybook/addon-knobs 這個套件,而在 2020 作為它的替代品 @storybook/addon-controls 出現了。從下載數來看,短短一年之間,controls 的下載次數急起直追,到了寫這篇文章的時間點 …React12 min readReact12 min read
Published in手寫筆記·Mar 28, 2021React Hooks | 既生 useState 何生 useReducer ?一個使用 useReducer 比 useState 更好的個案 — 前言 React Hooks 提供了兩個管理狀態的 hook,分別是 useState 跟 useReducer,你在寫 component 應該經常會想「什麼時候該用 useState,又在什麼時候才用 useReducer」,「 useReducer 跟 redux 這麼像,幹嘛不用 redux 就好」,「沒事 React 團隊幹嘛抄一個這麼像 r …React7 min readReact7 min read
Published in手寫筆記·Feb 24, 2021消失的4個月,在北埔新訓的日子E0122T 義務役到此一遊 — 當兵前… 4 個月前,我剛入職 Hahow 不久,天天都專注在如何盡快地步上軌道,希望能開發一些令人驚嘆的功能。時間一天一天的過,就在就職快要滿一個月時,突然一顆炸彈來到腳邊,我看到家人傳的 Line 訊息,以爲是日常的問候,結果點進去後才發現是徵招令,也就是所謂的兵單,看到上面寫著我的名字,並要求在 11 月 17 日早上 9 點準時在花蓮火車站報到,心 …當兵11 min read當兵11 min read
Published inStarbugs Weekly 星巴哥技術專欄·Jan 19, 2021Rethinking Design Practices | ReactConf AU 2020 筆記 — Part 3前言 前陣子研究了 GitHub 的 Primer 這套 design system,了解其內部的程式碼核心是如何設計,但是仍不得其解 Primer 的「設計」是如何與「工程」搭上邊的,剛好 ReactConf AU 便有一場演講是由 Seek 工作的 Mark Dalgleish 分享他的心得歷程,訴說他是如何建立一套 design system。 如果你 …React11 min readReact11 min read
Published inStarbugs Weekly 星巴哥技術專欄·Dec 15, 2020ReactConf AU 2020 | 筆記 — Part 2前言 之前看了 4 場 ReactConf AU 2020 的演講後,最近又陸續看了幾場,每一場真的都收益良多。但是礙於 medium 寫文章的長度,只能先整理 2 場跟大家分享。在整理了 2 場的演講筆記後,當我在整理第 3 場時,突然跳出通知說 medium 無法儲存太長的文章 😅。 這篇筆記包括兩場演講,分別是 react-final-form …Reactconf15 min readReactconf15 min read