# ErrorBaker 技術共筆部落格 > 一群軟體工程師，把踩過的坑烘成熱騰騰的技術文章。技術共筆部落格，由一群工程師共同撰寫，主題以 web 前後端為主，涵蓋 JavaScript、TypeScript、React、Node.js、Golang、CSS、工具與工程實踐等。提供繁體中文（原文）與 English / 日本語 / 简体中文 翻譯。 ## Articles - [Reduce | 完全手冊](https://blog.errorbaker.tw/posts/benben/16-reduce/): JavaScript Array.prototype.reduce 完全手冊：拆解 reduce 的規格、命名由來、參數意義，以及什麼時候該用、什麼時候不該用，帶你徹底搞懂這個最讓新手陌生的陣列方法。 - [Raycast | 不完全手冊](https://blog.errorbaker.tw/posts/benben/15-raycast-101/): Raycast 不完全手冊：從取代 Spotlight 的安裝設定開始，介紹剪貼簿記錄、Snippet、視窗管理、Store 外掛與 Raycast AI 等實用功能，帶 Mac 使用者打造高效啟動器。 - [New Architecture of Rreac Native](https://blog.errorbaker.tw/posts/ruofan/new-architecture-react-native/): 深入 React Native 0.76 的新架構：解析舊架構 Bridge 的序列化效能瓶頸、同步性與單執行緒限制，以及新架構如何用 JSI、Turbo Modules、Fabric 來解決這些問題。 - [克服 Django-allauth 開發問題](https://blog.errorbaker.tw/posts/cwc329/django-url-shortener-dev-log/): 用 Django 加 django-allauth 做縮網址服務的開發紀錄：如何克服 SPA 下的 CSRF Token 與 redirect URL 問題，並用 reverse proxy 解決 cookie same site 限制。 - [Leetcode Subsets and Golang Slice](https://blog.errorbaker.tw/posts/cwc329/leetcode-subsets-golang-slice/): 用 LeetCode 78 Subsets 練 Golang 時，踩到新手最常見的 slice 與 underlying array 陷阱。本文帶你看 backtracking 解法，並補上 Go slice 的基礎概念與最佳化。 - [2023 年度回顧 | 目標、效率、平衡](https://blog.errorbaker.tw/posts/benben/14-2023-wrapped/): 以目標、效率、平衡三個主題回顧 2023：分享轉職前如何設定明確目標、常用的效率工具與插件，以及在高強度加班下對工作生活平衡的反思，也談前端市場的變化。 - [Scroll-driven Animations](https://blog.errorbaker.tw/posts/ruofan/scroll-driven-animations/): 認識新的 Scroll-driven Animations API：對比傳統用 addEventListener 監聽捲動、在主執行緒跑 callback 的做法，介紹用捲動進度時間線與視圖進度時間線做出效能更好的滾動驅動動畫。 - [什麼時代了還在學 | 嘸蝦米輸入法](https://blog.errorbaker.tw/posts/benben/13-boshiamy/): 什麼時代還學嘸蝦米輸入法？作者分享約兩年的學習歷程與心得：嘸蝦米只用 26 個字母、免選字、可直接打數字與符號的優勢，以及苦練與遷移的實戰經驗。 - [Warp | 你的 21 世紀 AI Terminal](https://blog.errorbaker.tw/posts/benben/12-warp/): 介紹用 Rust 打造的 AI 終端機 Warp：對比 iTerm2、Windows Terminal，看它在個人化、自動補全、輸出複製與 AI 功能上的優勢，並分享安裝設定與實際使用心得。 - [Vim for beginners](https://blog.errorbaker.tw/posts/benben/11-vim-for-beginners/): 寫給初學者的 Vim 入門：認識 Vim 無所不在的精神、如何離開 Vim，以及輸入與儲存這兩個任何編輯器的第一課，帶你踏出用鍵盤取代滑鼠的第一步。 - [改善 CI/CD 中的 jest-coverage-report](https://blog.errorbaker.tw/posts/cwc329/improve-jest-coverage-report/): 改善 CI/CD 中跑太久的 Jest coverage report：從 --runInBand 的嘗試與失敗，到深入 jest-coverage-report action 原始碼，找出執行時間沒下降的真正原因，一段誠實的除錯歷程。 - [前端菜雞 - 轉職 1 年又 2 個月心得](https://blog.errorbaker.tw/posts/benben/10-one-year-and-two-month-experience/): 一篇誠實不美化的前端轉職心得：作者從保全轉職、一年二個月年薪破百的過程，聊如何在試用期反過來觀察公司、定期整理履歷與掌握跳槽時機，也適合正猶豫要不要轉職的人。 - [前端開發需了解的 GA 基礎](https://blog.errorbaker.tw/posts/xiang/ga-basic/): 前端開發需了解的 GA 基礎：以 GA4 為例，從「資料統計與分析」的本質切入，用前端視角說明 GA 事件（event）如何埋設、前端能提供哪些協助，讓你不被後台的圖表淹沒。 - [如何提升打字速度 - 從初心者轉職超級初心者](https://blog.errorbaker.tw/posts/benben/09-how-to-speed-up-typing/): 如何提升打字效率？本文從物理、心理、視覺三個面向，分享打字練習網站、VS Code 快捷與各種提速技巧，幫長時間敲鍵盤的開發者把「打字很快的感覺」練出來。 - [At a glance of Neo4j](https://blog.errorbaker.tw/posts/ruofan/neo4j/): 初探 Neo4j 與 graph database：先總覽 NoSQL 各種類型，再從七橋問題與 graph theory 談 graph 是什麼、適合的應用場景，並比較一般 SQL 與 Neo4j 的差異及不適合的資料。 - [Gatus demo](https://blog.errorbaker.tw/posts/cwc329/gatus-demo/): 介紹用 Go 撰寫的開源監控工具 Gatus：它與 Prometheus、CloudWatch 最大的不同是能主動測試 endpoint，不必等有流量才發現問題。附 Docker Compose demo 與實際使用情境的取捨。 - [Setup your react native project](https://blog.errorbaker.tw/posts/ruofan/react-native/): 設置 React Native 開發環境的踩坑紀錄：比較 Expo CLI 與 React Native CLI，說明 Expo、Expo Go、EAS Build 各自的用途與限制，並分享在電腦上設定 simulator 的過程。 - [Vue3 Composition API & React hooks](https://blog.errorbaker.tw/posts/benben/08-vue-composition-api-and-react-hook/): 並列比較 Vue3 Composition API 與 React Hooks 的用法：從最基本的 Counter 計數器範例，看兩者如何定義響應式資料並驅動畫面，適合已熟悉其中一方、想理解另一方的開發者。 - [RE [前端引路人計劃] - 我也能夠當個 mentor 嗎？](https://blog.errorbaker.tw/posts/benben/07-could-i-be-a-mentor-enough/): 轉職前端一年多的作者，如何從「前端引路人計畫」得到啟發，走上開讀書會、當微 mentor 的路。這是一篇關於心態、自我提升與經驗傳承的分享，寫給想開始帶人成長的工程師。 - [HSTORE vs JSONB in PostgreSQL](https://blog.errorbaker.tw/posts/ruofan/postgresql-datatypes/): PostgreSQL 中 HSTORE 與 JSONB 的差別：從 key/value 儲存與查詢效能、schemaless 的彈性比較兩種資料型態，並解釋 PostgreSQL 背後用 TOAST 處理大型資料的機制與對效能的影響。 - [用 sheetJS 匯出 excel](https://blog.errorbaker.tw/posts/ruofan/xlsx/): 用 SheetJS 匯出 Excel：透過簡潔的程式碼把資料轉成 xlsx 檔下載，並從原始碼觀察 SheetJS 背後如何組出 worksheet 與 workbook，適合有前端匯出報表需求的人。 - [Uno CSS - 一統天下的明日之星？](https://blog.errorbaker.tw/posts/benben/06-uno-css/): UnoCSS 是什麼？本文從 Tailwind 常見的痛點切入，說明 UnoCSS 如何用即時生成與正則配置解決 class 單位混亂、還要查文件的困擾，帶會 Tailwind 或 Bootstrap 的人快速上手。 - [來畫個圖吧 - P5.js 入門](https://blog.errorbaker.tw/posts/benben/05-p5-js/): P5.js 入門：認識這個藝術導向的 JavaScript 繪圖套件與資料導向 D3.js 的差異，透過 OpenProcessing 平台從畫布開始，一步步做出你的第一個創意繪圖作品。 - [帶你入門區塊鏈（二）](https://blog.errorbaker.tw/posts/xiang/block-chain-02/): 帶你入門區塊鏈（二）：直接用 Python 寫出單節點的區塊鏈範例，涵蓋建立創世塊、產生公私鑰、簽署與驗證交易、挖礦與調整難度、計算餘額，並附各步驟說明。 - [multipart/form-data 初探](https://blog.errorbaker.tw/posts/cwc329/multipart-form-data/): multipart/form-data 初探：當後端要一個 request 同時傳 JSON 與檔案並上傳 S3，從 OpenAPI 與 RFC 7578 出發，說明 boundary、各 part 的 header 與多檔案欄位處理。 - [儲存資料到 firestore 前，需要注意哪些事？](https://blog.errorbaker.tw/posts/ruofan/firestore/): 儲存資料到 Firestore 前要注意什麼？從官方每次 transaction 最多 500 筆寫入的限制出發，用實際情境說明容易踩到的坑，並分享在開發上可行的資料結構設計與解決方法。 - [實作專案套件化](https://blog.errorbaker.tw/posts/xiang/package-vue-project/): 實作專案套件化：不只把元件封裝成套件，而是把整份專案變成可重複使用的「核心」。以 Vue2 為例，分享如何設計可客製化的核心專案，讓未來新專案套入設定就能快速產生。 - [TS, JS 漫談 - 編譯與直譯](https://blog.errorbaker.tw/posts/cwc329/2022-03-27/): 從 TypeScript 與 JavaScript 的關係，談編譯語言與直譯語言的差異：為什麼 TS 要先經過 tsc 編譯成 JS，以及型別檢查如何讓錯誤在編譯階段就被抓出，而非等到上線才爆。 - [web Push Notifications](https://blog.errorbaker.tw/posts/ruofan/fcm/): 用 Firebase Cloud Messaging 在 web 推播通知：搭配 service worker 實作訊息接收與通知產生，說明 push service 的運作原理、各家瀏覽器支援度，以及 iOS 上的限制與注意事項。 - [帶你入門區塊鏈（ㄧ）](https://blog.errorbaker.tw/posts/xiang/block-chain-01/): 帶你入門區塊鏈（一）：不談虛擬貨幣與加密，用日常生活情境白話說明區塊鏈是什麼、有哪些特性與基本運作架構，寫給沒有程式基礎、想搞懂區塊鏈概念的人。 - [優化舊有專案（二）：加入 CI/CD with github actions](https://blog.errorbaker.tw/posts/cwc329/dev-tools-2/): 優化舊有專案（二）：為 Lidemy 期末專案 Podcastify 加上 CI/CD。分享帳號搬遷、前端部署到 GitHub Pages、後端部署到 Heroku，並用 GitHub Actions 自動化部署的實作過程。 - [從與工程師共事，到與工程師共識（二）](https://blog.errorbaker.tw/posts/xiang/cooperate-with-engineer-part2/): 從與工程師共事到共識（下）：延續基本技術觀念，聊工程師整天在想什麼、思維是什麼，以及如何用工程師聽得懂的方式描述需求、有效溝通，寫給需要跟工程師協作的非技術夥伴。 - [用 Vue 實作 Infinite Scroll](https://blog.errorbaker.tw/posts/ruofan/vue-infinite-scroll/): 用 Vue 實作無限捲動的兩種方法：一是監聽 scroll 搭配 throttling 偵測捲到底部，二是用 Intersection Observer API 偵測元素進入 viewport 時載入更多資料。 - [如何使用 react-intl + babel plugin 自動化產出多國語系檔？](https://blog.errorbaker.tw/posts/tian/react-intl-automation/): 如何用 react-intl 加 Babel plugin 自動化產出多國語系檔：介紹 IntlProvider、formatMessage 的基本操作，並說明如何用 Babel 在編譯階段自動抽取語系，省去手動維護。 - [淺談工作上遇到的 Circular Dependency](https://blog.errorbaker.tw/posts/cwc329/circular-dependency/): 淺談工作上遇到的循環相依（Circular Dependency）：什麼是循環相依、它會造成什麼問題，以及在導入 monorepo、ESLint no-cycle 規則與單元測試時如何面對與解決。 - [從與工程師共事，到與工程師共識（ㄧ）](https://blog.errorbaker.tw/posts/xiang/cooperate-with-engineer/): 從與工程師共事到共識（上）：寫給第一次要跟工程師合作、卻對程式一頭霧水的人。用生活化比喻建立心態，帶你認識網頁與程式的基本技術名詞，讓溝通不再被術語卡住。 - [等等我還想學 CLI - 微進階的 CLI](https://blog.errorbaker.tw/posts/benben/04-cli/): 寫給已入門者的 CLI 微進階指南：從 cd、ls、pwd 等基礎指令談起，分享作者在工作中累積的終端機操作心得與循序漸進的學習法，帶你把命令列用得更順手。 - [a simple RESTful api with Go](https://blog.errorbaker.tw/posts/ruofan/go-RESTful-api/): 透過實作一個簡單的 RESTful API 認識 Golang：從安裝、go mod init 專案初始化、用 gorilla/mux 管理套件，到實作 main 與 handler function，適合想入門 Go 的人。 - [monorepo 之我見](https://blog.errorbaker.tw/posts/cwc329/monorepo/): monorepo 之我見：解釋 monorepo 與 polyrepo 的差別，用前後端專案為例對比兩種目錄結構，並分享公司從 polyrepo 轉為 monorepo 後，作者在開發與維運上實際感受到的差異。 - [用 Fireorm interact with Cloud Firestore](https://blog.errorbaker.tw/posts/ruofan/express-firestore/): 用 Fireorm 操作 Cloud Firestore：認識 NoSQL 雲端資料庫與 firebase-admin 上的輕量 ORM，從環境設定到用 decorator 定義 schema，並以 repository 做 CRUD。 - [好玩 && 好用的 console log 技巧](https://blog.errorbaker.tw/posts/xiang/console-log/): 好玩又好用的 console.log 技巧：除了最基本的 log，還有哪些 console 方法能幫你更好 debug？本文整理印出資料的各種技巧與 console 特殊用法，讓 debug 生活更有效率。 - [用 NextAuth 實作第三方登入](https://blog.errorbaker.tw/posts/ruofan/next-auth/): 用 NextAuth 實作第三方登入：除了帶你認識如何在 Next.js 中整合登入，也完整示範 LINE、Google、Facebook 三家開發者後台的環境設定與 callback URL 配置。 - [async/await 到底在等什麼？](https://blog.errorbaker.tw/posts/cwc329/async-await-tips/): async/await 到底在等什麼？從它回傳 Promise 的本質，解釋 no-return-await 規則與 await 順序陷阱，並比較 Promise.all 與 for loop await 的差異。 - [來做一個 Gatsby Generic Plugin 吧](https://blog.errorbaker.tw/posts/YongChen/gatsby-generic-plugin/): 拆解 Gatsby Plugin 的檔案組成與五種類型命名規範，並用 Gatsby Node API 與 createNode 手把手做出一個最簡單的 Generic Plugin，適合想開發並發布自有外掛的人。 - [介紹 WeakMap](https://blog.errorbaker.tw/posts/umer/weak-map/): 介紹 ES6 的 WeakMap：說明弱引用與垃圾回收的關係、常見的記憶體洩漏情況（全域變數、閉包、event listener），並比較 Map 與 WeakMap 的差異與適合使用 WeakMap 的場景。 - [如何使用 Web Component 技術來製作元件](https://blog.errorbaker.tw/posts/xiang/build-webcomponent-element/): 用 Web Component 製作元件：延續表格元件基礎，介紹 LitElement，說明 Template、Style、Properties、Events、Lifecycle 等概念，實作可跨框架共用的元件庫。 - [render quill delta 的方式](https://blog.errorbaker.tw/posts/ruofan/react-quill/): 如何一致渲染 Quill 編輯器產出的內容：說明 Quill 產生的 Delta 是什麼、為何它是 JSON 的子集，並帶你實作讓後台編輯的資料能在前端一致呈現的方法。 - [從開發到產品的心得](https://blog.errorbaker.tw/posts/minw/product-interest/): 從開發到產品的心得：以開發者視角切入產品管理，分享如何從產品、使用者、利害關係人三個面向徹底了解產品，以及文件、開卡、小工具與流程上的實務紀錄。 - [用 11ty 寫部落格的心得](https://blog.errorbaker.tw/posts/lavi/blog-log/): 用 11ty（Eleventy）自架部落格的完整心得：從離開 Medium、CoderBridge 的理由，到規劃、設計、開發、搬家與部署的每個步驟，並分享圖片優化、CSP、CSS 等實作細節。 - [我所理解的 GitFlow](https://blog.errorbaker.tw/posts/tian/git-flow/): 我所理解的 GitFlow：以團隊從一人成長到多人的過程，說明版本控制流程如何從單一 master，逐步演變到 develop、feature 副分支與 Pull Request Review，達成穩定持續的交付。 - [共筆中的共筆 - 以 JavaScript30 為例](https://blog.errorbaker.tw/posts/benben/03-collaborative-writing/): 以 JavaScript30 為題發起共筆讀書會的實作回顧：如何用 HackMD 與 CodePen 搭建共筆環境、規劃分享流程，並談為別人分享而學帶來的學習動力，適合想發起讀書會的新手。 - [初探 swagger-ui](https://blog.errorbaker.tw/posts/cwc329/swagger-ui/): 初探 swagger-ui：如何依 OpenAPI 規範用 YAML 或 JSON 撰寫 API 文件並轉成可互動網頁，並用 swagger-ui-watcher 做模組化、即時預覽的分層管理，讓 API 文件更好寫也更好維護。 - [淺談 Base64 與應用實例分享](https://blog.errorbaker.tw/posts/cian/base64-qrcode/): 為什麼用 Base64 顯示 QRCode？本文從 Base64 的編碼原理談起，介紹 Data URIs 標準與 HTML 應用，並分享用 Base64 內嵌圖片達成優化的實例。 - [Debug 系列 01](https://blog.errorbaker.tw/posts/xiang/debug-case-01/): Debug 系列 01：分享工作上四個技術含量不高卻很值得一聊的實際 bug，包含 dispatchEvent 重複上傳、tab 導致跑版、font-weight 失控、表單 tab 無法跳題，帶你看實戰除錯過程。 - [聊聊 JavaScript 中的深拷貝 (上)](https://blog.errorbaker.tw/posts/clay/copy/): 聊聊 JavaScript 的深拷貝（上）：從 call by reference 的賦值陷阱談起，說明展開運算子只能處理淺拷貝，以及遇到多層物件、用 JSON.parse(JSON.stringify()) 深拷貝會踩到哪些問題。 - [介紹 Cookie 的新屬性 SameParty](https://blog.errorbaker.tw/posts/umer/cookie-sameparty/): 介紹 Cookie 的新屬性 SameParty：釐清第一方與第三方 Cookie 的相對概念、SameSite 三種值與缺點，再到 Chromium 的 First-Party Sets 與 SameParty 想解決的問題。 - [在 AWS EB 上部署 Nodejs 網站的入門指南](https://blog.errorbaker.tw/posts/sixwings/deploy-nodejs-to-AWS-EB-beginner's-guide/): 以新手視角在 AWS Elastic Beanstalk 上部署 Node.js 網站的入門指南：從建立環境、打包上傳，到解決 start script、資料庫連線、Sequelize migrate、環境變數與 HTTPS 等常見問題。 - [現代前端開發 - 那些我使用過的 Pattern 和 工具](https://blog.errorbaker.tw/posts/tian/ts-react-pattern-nested-todo-list/): 以 React Hook Form 加 TypeScript 做一個巢狀 Todo List：從 User Story 出發，示範 Type 組合、元件複用、CSS 複用與自訂 Hooks 等常見的前端 Pattern。 - [mongoose 中的 aggregate](https://blog.errorbaker.tw/posts/ruofan/mongoose-aggregate/): Mongoose 中的 aggregate 基本操作：認識這個 node.js 的 MongoDB ODM，並用範例帶你理解 $match、$project、$lookup、$unwind、$cond 等聚合管線運算子，附版本注意事項。 - [再看 D3.js](https://blog.errorbaker.tw/posts/minw/d3-intro/): 再看 D3.js：從資料視覺化的本質談起，說明 Visual Encoding 與資料型別（類別、等級、等距、等比）如何對應，並解釋為何 D3 直接操作 DOM 的做法最貼近視覺化的想像。 - [gRPC 和 HTTP/2 Streaming](https://blog.errorbaker.tw/posts/cian/grpc-streaming-n-http2/): 深入 gRPC 背後的 HTTP/2 與 Streaming：從 SPDY 的由來、stream 與 frame 傳輸結構，到 Server 與 Client 端 streaming 的實作，理解 gRPC 四種生命週期的技術基礎。 - [如何準確的 Google 到想要的內容](https://blog.errorbaker.tw/posts/simon198/google-searching-tips/): 如何準確 Google 到想要的內容：整理完全比對、site 指定網站、排除關鍵字、after／before 時間區間、萬用字元等搜尋技巧，幫你更快從搜尋結果撈到真正需要的答案。 - [React Ref 的一點研究](https://blog.errorbaker.tw/posts/lavi/react-ref-reference/): 更全面地理解 React Ref：除了取得 DOM 與存變數，本文深入 createRef、useRef、callback ref 與 component 的 ref，並分享 ref 與元件生命週期順序的一些實驗和發現。 - [為什麼要使用框架 - 你聽過最好的答案是什麼？](https://blog.errorbaker.tw/posts/benben/02-framework/): 與其死背面試答案，不如從歷史理解框架存在的理由。本文回顧 JavaScript、jQuery 到 React 的前端演進，帶你想清楚「為什麼要用框架」，找到能說服自己的答案。 - [原始碼探索](https://blog.errorbaker.tw/posts/cwc329/dig-in-source-code/): 原始碼探索：從 Sequelize eager loading 的驚豔出發，記錄作者第一次翻閱套件原始碼、找出它如何依照 model 關聯產生巢狀資料結構的過程與方法。 - [進階版 To do list](https://blog.errorbaker.tw/posts/xiang/advanced-todo-list/): 進階版 To do list：跳脫單純練習 CRUD 的框架，加入「群組」概念，讓待辦事項能依工作、採買、學習等類別歸類。本文拋出規格與資料規劃的思考方向，適合當作自我練習題。 - [初探 Google extension](https://blog.errorbaker.tw/posts/umer/google-extension/): 初探 Google（Chrome）擴充功能開發：認識 manifest.json、popup、background、content script 的組成與職責，並實作一個能把輸入訊息 prepend 到當前分頁的簡單 extension。 - [如何從 GitHub Template 更新 repo？](https://blog.errorbaker.tw/posts/sixwings/update-github-repo-from-template/): 如何從 GitHub Template 更新既有 repo？當參照的 Template 有新 commit 時，帶你用 git remote、fetch、merge 同步版本，處理 package.json 衝突，並合併到其他作業分支。 - [實作 Nest.js 中的 Migration 與 Seeder](https://blog.errorbaker.tw/posts/minw/nest-js-migration/): 在 Nest.js 中實作 Migration 與 Seeder：TypeORM 加 Nest 坑很多，分享調整 ormconfig 參考 build 目錄、用原生 Migration 產生與塞假資料的做法。 - [svelte 結合 firebase 實作登入](https://blog.errorbaker.tw/posts/ruofan/svelte/): 用 Svelte 結合 Firebase 實作登入：認識 Svelte 在 build time 編譯元件、效能出色的特色，並分享搭配 Firebase Google login 與狀態機工具 XState 管理登入流程的實作。 - [next-seo 初體驗](https://blog.errorbaker.tw/posts/clay/next-seo/): next-seo 初體驗：當 Next.js 專案各頁都要各自維護 SEO meta tag 容易失控，本文介紹用 next-seo 的 NextSeo 元件統一管理，並初探 JSON-LD 結構化資料的用法。 - [你可能不需要 React Memo](https://blog.errorbaker.tw/posts/tian/you-might-not-need-react-memo/): 你可能不需要 React memo：對 Functional Component 做渲染優化，不一定要用 memo，也能靠元件重組或 useMemo 達成。本文剖析 Pure Component 與各種優化的取捨成本。 - [探討幾種常見的 CSS 命名慣例](https://blog.errorbaker.tw/posts/simon198/css-naming-conventions/): 探討幾種常見的 CSS 命名慣例：先談語意化、case、抽象化命名等共通原則，再介紹 OOCSS 的結構與樣式分離、BEM 的 Block／Element／Modifier，讓你的 class 更好懂又實用。 - [使用 Golang 建立一個 gRPC 架構](https://blog.errorbaker.tw/posts/cian/grpc-unary/): 用 Golang 建立 gRPC 服務的入門：先搞懂 RPC 與 gRPC 是什麼、Protocol Buffers 如何序列化資料，再實作最基礎的 Unary 呼叫，從定義 .proto 到生成 stub code 一步步走過。 - [優化舊有專案（一）：加入 dotenv, nodemon, babel 優化開發](https://blog.errorbaker.tw/posts/cwc329/dev-tools/): 優化舊有專案（一）：在自己的 side project 中導入 dotenv、nodemon、babel-node。分享如何用 .env 管理環境變數、自動重啟與編譯，把工作上看到的好用工具在自己專案裡練起來。 - [人人都可以寫文章 - 從筆記到文章](https://blog.errorbaker.tw/posts/benben/01-article/): 從做筆記到寫出一篇完整文章的心法：釐清官方文件、技術文章、筆記、廢文之間的差異，並用親身經驗聊自我介紹與寫作起步，寫給想動筆卻不知從何開始的工程師。 - [用 Web Component 製作客製化表格元件](https://blog.errorbaker.tw/posts/xiang/build-webcomponent-to-table/): 用 Web Component 製作可客製化的表格元件：為了打造跨框架共用的元件庫，從 Web Component 與 shadow DOM 的基本概念談起，示範如何讓使用者自訂 column 與綁定 action 的 table 元件。 - [結合 Line bot 與 twitter 爬蟲的研究紀錄 實戰篇](https://blog.errorbaker.tw/posts/umer/line-bot/): 結合 LINE Bot 與 Twitter 爬蟲的實戰紀錄：從申請 Messaging API、撰寫 LINE Bot、部署到 EC2、用 Twint 爬推特，到用 crontab 排程每天定期把最新推文推送到 LINE 的完整流程。 - [從本地到雲端，淺談部署和各種部署姿勢](https://blog.errorbaker.tw/posts/lavi/deploy-and-cloud/): 從本地到雲端，淺談各種部署姿勢：用飲料販賣機比喻拆解「部署」是什麼，並比較本地、雲端主機（IaaS）、PaaS、容器與 Kubernetes、FaaS 各種方式的優缺與取捨。 - [一段的 React-markdown 研究之旅](https://blog.errorbaker.tw/posts/sixwings/survey-about-react-markdown/): 一段 React-markdown 研究之旅：從進度報告出現的怪異排版出發，追查 react-markdown、CommonMark 與 remark-gfm 如何影響解析，最終發現問題出在 remark-gfm 的除錯故事。 - [初探用 Nest.js 做出一個 CRUD 服務](https://blog.errorbaker.tw/posts/minw/nest-js-intro/): 初探用 Nest.js 做 CRUD 服務：認識 Controller、Provider、Module 與模組化 MVC 設計，用 Nest CLI 加 TypeORM 從零建立 user module，並補充依賴注入與 DTO 觀念。 - [用 k6 為 api 做 Load Testing](https://blog.errorbaker.tw/posts/ruofan/k6-load-testing/): 用 k6 為 API 做負載測試：認識這個以 Go 撰寫的開源效能測試工具與各種測試類型的差異，並實作 Load testing，含用 Webpack、Babel 打包並搭配 faker 產生假資料的完整設定。 ## Pages - [麵包櫃](https://blog.errorbaker.tw/archive/): 全部技術麵包的時間軸索引 - [烘焙師](https://blog.errorbaker.tw/about/): 關於 ErrorBaker 與烘焙師列表（依出爐數排序） - [Tags](https://blog.errorbaker.tw/tags/): 依主題標籤瀏覽 ## Feeds - [Atom feed](https://blog.errorbaker.tw/feed/feed.xml)