所有文章

2024

• Dec 2024 年度回顧
• Dec 如何撰寫具彈性的測試程式 | 2024 WebConf Taiwan
• Aug 載入效能：指標、測量、優化與監控
• Jul Translate and Sync to Repo：利用自動翻譯工具實現《前端測試指南》英文版
• Jun 關於這本書《前端測試指南：策略與實踐》(Frontend Testing Guide: Strategies and Practices)
• Jun 在組織中推行單元測試 | 單元測試的藝術 第 3 版 | 閱讀筆記
• Jun 規劃測試策略 | 單元測試的藝術 第 3 版 | 閱讀筆記
• May 隔離框架 | 單元測試的藝術 第 3 版 | 閱讀筆記
• Apr 利用模擬物件進行互動測試 | 單元測試的藝術 第 3 版 | 閱讀筆記
• Apr 如何打造出色的履歷
• Apr 利用 Stub 隔絕依賴 | 單元測試的藝術 第 3 版 | 閱讀筆記
• Apr 你好，單元測試 | 單元測試的藝術 第 3 版 | 閱讀筆記
• Mar 單元測試的基本概念 | 單元測試的藝術 第 3 版 | 閱讀筆記
• Mar JavaScript MV* Patterns | Learning JavaScript Design Patterns, 2e
• Feb Tailwind CSS 到底是良藥還是毒藥？
• Jan 善用 GitHub Copilot 和 ChatGPT 提高產能與加速學習

2023

• Dec 2023 年度回顧
• Dec Pre-push Mechanism
• Aug 優雅整合 Linter、Husky、Lint-Staged：寫扣看扣皆大歡喜的密技
• Aug 從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿
• Jul 利用 Cypress 和 Sentry 測試前端效能
• Jun 利用 Sentry 進行效能監控
• Jun 利用 Firebase 部署微前端專案 (Deploy and Host Micro Frontends Using Firebase)
• May 利用 React Context API + useReducer 實作 Redux
• Apr 島波海道。單車跳島之旅
• Mar 微前端的溝通 - 發布/訂閱 vs 傳遞自訂事件 (Cross Micro Frontends Communication: Pub/Sub vs Custom Events)
• Mar 2023 輪霸西濱 100K
• Jan 該用 Monorepo 嗎？比較 Monolith vs Multi-Repo vs Monorepo

2022

• Dec 2022 年度回顧
• Dec 給資淺工程師的建議
• Dec 利用 Serverless Framework 建置和部署專案
• Nov DynamoDB Pagination：利用 LastEvaluatedKey 與 ExclusiveStartKey 實作分頁
• Oct 利用 IAM User 共享資源
• Oct 利用 API Gateway + Lambda Function 從 DynamoDB 讀資料
• Oct JavaScript Date：計算不同時區的時間
• Oct Visual Testing | MOPCON 2022 逐字稿
• Sep Hello Lambda Function
• Sep 精通 Go 程式設計 - 程式結構 | 閱讀筆記
• Aug Visual Testing：忽略特定元件
• Aug Visual Testing：互動後的快照比對
• Jul Visual Testing 工具比較：選誰好？
• Jun 《美國四星上將教你打造黃金團隊》閱讀筆記 – 共享意識、賦權與自主成長，終能提升團體的實力
• Jun Architecting on AWS 筆記：Networking
• Jun Architecting on AWS 筆記：Backup and Restore
• May Architecting on AWS 筆記：Edge Services
• May Architecting on AWS 筆記：Serverless
• May Architecting on AWS 筆記：Container
• May Architecting on AWS 筆記：自動化服務 (Automation)
• May Architecting on AWS 筆記：Monitoring and Scaling
• May Architecting on AWS 筆記：資料庫服務 (Database Services)
• May Architecting on AWS 筆記：雲端儲存服務 (Cloud Storage)
• May Architecting on AWS 筆記：運算資源 (Compute Service)
• Apr Architecting on AWS 筆記：Account Security
• Apr Architecting on AWS 筆記：基礎設施
• Apr 在 Docker Container 跑 Visual Testing 之基本設定
• Mar 利用 Chromatic + Storybook 來做 Component-Level 的 Visual Testing
• Feb 利用 Cypress 與 Percy 來做 Visual Testing

2021

• Dec 2021 年度回顧
• Dec 導讀《打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵》逐字稿@新竹敏捷
• Dec 關於「打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵」這本書的點滴
• Oct 打造高速網站，從網站指標開始！(Speed Up Your App with Web Vitals) MOPCON 2021 逐字稿
• Sep Pendo Guides 小筆記
• Jul 10 個高蛋白/減醣/減糖甜點
• Jun Tipping Point Front-End Case Study and Practice: CSS
• Jun Pact：契約測試 (Contract Testing)
• May Ch6 整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試 | 可測試的 JavaScript (Testable JavaScript)
• May Ch4 單元測試 (Unit Tests) | 可測試的 JavaScript (Testable JavaScript)
• Apr Ch3 事件導向架構 (Event-Based Architectures) | 可測試的 JavaScript (Testable JavaScript)
• Mar 91 Unit Testing 單元測試實戰操練營 筆記 - 寫測試的正確姿勢
• Mar Ch2 複雜度（Complexity）| 可測試的 JavaScript (Testable JavaScript) 閱讀筆記
• Mar 約定式提交 Conventional Commits
• Feb Ch1 可測試的 JavaScript 程式（Testable JavaScript）| 可測試的 JavaScript (Testable JavaScript) 閱讀筆記
• Jan 使用 React Hooks 重構 React Class Component 的改造筆記

2020

• Dec 2020 年度回顧
• Dec Google 教我如何面對 Code Review
• Nov Google 教我如何進行 Code Review
• Oct 動森：分享我的小動物們與景點
• Oct 與成功有約：高效能人士的七個習慣。閱讀筆記
• Oct 動森日誌：賀！終於達成五星島嶼！(๑•̀ㅂ•́)و✧
• Oct 動森日誌：從入坑到達成三星島嶼
• Sep 利用 Firebase Performance 來做 Real User Monitoring
• Sep 利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring
• Sep Lighthouse Metrics：以使用者為出發點來探討效能的指標
• Aug 整合 Jenkins 來自動做前端效能測試
• Aug 單一職責原則（Single Responsibility Principle） | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Aug 利用 Lighthouse 與 Puppeteer 對全站網頁做效能檢測並產生報表
• Aug SOLID | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Jul JavaScript 常用編碼、解碼
• Jul 去除 try/catch，實作簡潔的 Async 和 Await！
• Jul 函數式程式設計 | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Jun 物件導向程式設計 | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Apr 使用 Jest 對 Redux 做單元測試 - Reducer 篇
• Apr 在家工作的小感想
• Mar 使用 Jest 對 Redux 做單元測試 - Action 篇
• Feb Start your app the better way with Styled System
• Feb 結構化程式設計 | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Feb 範式概論 | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Jan 產生器（Generator）
• Jan 行為與架構 | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Jan 設計與架構 | Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇 閱讀筆記
• Jan 迭代器（Iterator）

2019

• Dec 2019 年度回顧
• Dec Git: 列出分支、查看歷史提交紀錄
• Dec Git: 如何從特定 commit 切新的分支？
• Nov 利用 Styled System 建立一個更好的 UI 元件庫！
• Nov 到九州自然野生動物園餵動物！
• Nov Styled System 初探 (๑╹◡╹๑)
• Nov 前端工程師寫 Robot Framework，可以嗎？
• Oct 物件屬性取值
• Oct The DevOps Handbook：奠定部署管線的基礎、實現快速可靠的自動化測試
• Jul Scheduler
• Apr React Form: Redux Form vs React Final Form vs Formik and Yup
• Mar 一到冬季就好苦惱，臉部肌膚脫皮乾癢該怎麼辦？
• Feb Curry，Decorator 與 HOC
• Jan 2018 面試小記

2018

• Dec 2018 總回顧
• Nov 在瀏覽器輸入網址並送出後，到底發生了什麼事？
• Nov 從內部來看瀏覽器到底在做什麼？（Inside look at modern web browser）
• Nov 你懂 JavaScript 嗎？#30 總結
• Nov 你懂 JavaScript 嗎？#29 語法（Syntax）
• Nov 你懂 JavaScript 嗎？#28 ES? 現在 vs 未來
• Nov 你懂 JavaScript 嗎？#27 基準化分析與微調（Benchmarking and Tuning）- 使用 Benchmark.js 和 jsPerf 分析程式碼效能
• Nov 你懂 JavaScript 嗎？#26 程式效能（Program Performance）
• Nov 你懂 JavaScript 嗎？#25 產生器（Generator）
• Oct 你懂 JavaScript 嗎？#24 Promise
• Oct 你懂 JavaScript 嗎？#23 Callback
• Oct 你懂 JavaScript 嗎？#22 非同步：現在和以後
• Oct 你懂 JavaScript 嗎？#21 ES6 Class
• Oct 你懂 JavaScript 嗎？#20 行為委派（Behavior Delegation）
• Oct 你懂 JavaScript 嗎？#19 原型（Prototype）
• Oct 你懂 JavaScript 嗎？#18 （簡易版）物件導向概念
• Oct 你懂 JavaScript 嗎？#17 物件（Object）
• Oct 你懂 JavaScript 嗎？#16 this
• Oct 你懂 JavaScript 嗎？#15 閉包（Closure）
• Oct 你懂 JavaScript 嗎？#14 動態範疇（Dynamic Scope）
• Oct 你懂 JavaScript 嗎？#13 拉升（Hoisting）
• Oct 你懂 JavaScript 嗎？#12 函式範疇與區塊範疇（Function vs Block Scope）
• Oct 你懂 JavaScript 嗎？#11 語彙範疇（Lexical Scope）
• Oct 你懂 JavaScript 嗎？#10 範疇（Scope）
• Oct 你懂 JavaScript 嗎？#9 文法（Grammar）
• Oct 你懂 JavaScript 嗎？#8 強制轉型（Coercion）
• Oct 你懂 JavaScript 嗎？#7 原生功能（Natives）
• Oct 你懂 JavaScript 嗎？#6 值（Values）Part 2 - 特殊值
• Oct 你懂 JavaScript 嗎？#5 值（Values）Part 1 - 陣列、字串、數字
• Oct 你懂 JavaScript 嗎？#4 型別（Types）
• Oct 你懂 JavaScript 嗎？#3 暖身 (๑•̀ㅂ•́)و✧ Part 2 - 變數、嚴格模式、IIFEs、閉包、模組、this、原型、Polyfill 與 Transpiler
• Oct 你懂 JavaScript 嗎？#2 暖身 (๑•̀ㅂ•́)و✧ Part 1 - 運算子、運算式、值與型別、變數、條件式、迴圈
• Oct 你懂 JavaScript 嗎？#1 預備...GO!
• Sep 什麼是以使用者為中心的效能測量指標？
• Sep 加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例
• Sep 快取
• Sep 如何減少 HTTP Requests 的數量？
• Sep 加載效能檢測工具
• Sep 文字資源優化
• Sep Debounce Input Handlers
• Aug 響應式圖片（Responsive Images）
• Aug 如何做圖片壓縮？
• Aug SVG Sprites
• Aug CSS Modules：babel-plugin-react-css-modules 小記
• Aug PostCSS
• Jul Preload vs Prefetch
• Jul 圖片最佳化（Image Optimization）
• Jul HTTP Caching
• Jul Base64 Images
• Jul 瀏覽器渲染效能（Browser Rendering Performance）總整理 (ゝ∀･)
• Jul 改進渲染效能範例 2 - Newsticker
• Jul 改進渲染效能範例 1 - News Aggregator
• Jul 如何優化像素管道的 Paint 和 Composite？
• Jul 如何優化像素管道的 Styles 和 Layout？
• Jul 從 JavaScript 著手優化渲染效能
• Jul Web Workers
• Jul 如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯？
• Jul 從 App 的生命週期來看瀏覽器渲染效能優化
• Jul 關鍵轉譯路徑 Critical Rendering Path
• Jun 如何提升動畫效能？
• Jun Why did you update: 檢測 React 元件是否需要重新渲染的工具
• Jun Git: 四種將分支與主線同步的方法
• Jun JavaScript：使用 Array.map、Object.values 和 Object.keys 處理一連串的資料
• Jun CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS
• Jun Git: Rebase Squash vs Fixup
• May Git: Cherry-pick - 選擇某個分支的某些提交記錄
• May Git: 比較 Merge Squash 與 Rebase Squash
• May Git: 更新分支+解衝突
• May BEM
• May React.js: Higher-Order Components (HOC)
• Apr 建立一個 React Component 並發佈到 NPM 上
• Apr redux-promise
• Apr React.js: Container vs Presentational Components
• Apr React.js: Functional Components vs Class-based Components
• Apr Git 筆記
• Apr ES6 Top Features You Must Know
• Mar Nightwatch101：手牽手一起來學 Nightwatch！
• Feb 推播通知 Push Notification
• Feb 2017 總回顧
• Jan Nightwatch101 #30：總結
• Jan Nightwatch101 #29：Selenium IDE
• Jan Nightwatch101 #28：獨立使用 ChromeDriver 跑測試
• Jan Nightwatch101 #27：進階測試範例
• Jan Nightwatch101 #26：客製化測試報告
• Jan Nightwatch101 #25：客製化斷言（Custom Assertions）
• Jan Nightwatch101 #24：客製化指令（Custom Commands）
• Jan Nightwatch101 #23：使用 Sections 優化 Page Objects
• Jan Nightwatch101 #22：Page Objects

2017

• Dec Nightwatch101 #21：平行執行測試程式
• Dec Nightwatch101 #20：禁跑特定測試（Disable Tests）
• Dec Nightwatch101 #19：依照標籤做測試（Test Tags）
• Dec Nightwatch101 #18：依照分組做測試（Test Groups）
• Dec Nightwatch101 #17：Nightwatch Test Runner
• Dec Nightwatch101 #16：簡單測試範例
• Dec Nightwatch101 #15：External Globals
• Dec Nightwatch101 #14：Asynchronous Test Hooks
• Dec Nightwatch101 #13：Test Hooks
• Dec Nightwatch101 #12：BDD Verify
• Dec Nightwatch101 #11：BDD Assert
• Dec Nightwatch101 #10：BDD Expect
• Dec Nightwatch101 #9：指令 Part 3
• Dec Nightwatch101 #8：指令 Part 2
• Dec Nightwatch101 #7：指令 Part 1
• Dec Nightwatch101 #6：使用 Xpath 定位網頁元素
• Dec Nightwatch101 #5：使用 CSS Selector 定位網頁元素
• Dec Nightwatch101 #4：設定檔
• Dec Nightwatch101 #3：環境建置
• Dec Nightwatch101 #2：Nightwatch 與 Selenium Webdriver
• Dec Nightwatch101 #1：使用 Nightwatch 實現 End-to-End Testing
• Nov Vue.js: axios 與 axios-mock-adapter
• Oct Nightwatch.js
• Oct Vue.js: 動態元件 Dynamic Components
• Oct Vue.js: Slot
• Sep Vue.js: Mixins
• Sep 單元測試：Mocha、Chai 和 Sinon
• Sep jQuery .attr() vs .prop()
• Sep 在瀏覽器中使用 Mocha 和 Chai 進行單元測試
• Aug CSS3 Animation
• Jul Service Worker
• Jul Selenium IDE
• Jul Notification（通知）：利用 JavaScript 實作瀏覽器推播通知
• Jun 青の洞窟 - 北海道。小樽必玩 ♥
• Jun Vue.js: 進階過渡效果
• Jun Vue.js: 動畫 Animations
• May Vue.js: 樣式與漸變 Transitions
• May jQuery: Deferred Object
• May Vue.js: Filter 過濾器
• May Vue.js 學習筆記總整理
• May Vue.js: 元件 Components - Events Up 自定義事件
• May JavaScript：檢查日期是否存在
• May JavaScript：將指定日期加上 X 天
• May Vue.js: 元件 Components - Prop
• May Vue.js: 元件 Components 簡介 - 註冊與使用
• May JavaScript 陣列處理：找東西 - indexOf、$.inArray 與 filter
• May Vue.js: 自定義指令 Custom Directive
• May Vue.js: v-cloak
• Apr Vue.js: 列表渲染 v-for
• Apr Vue.js: 條件渲染 v-if、v-show
• Apr Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定
• Apr Vue.js: Methods 與事件處理 (Event Handling)
• Apr Vue.js: Watch
• Apr Vue.js: 計算屬性 Computed
• Apr Vue.js: data、v-model 與雙向綁定
• Apr Vue Instance
• Apr Vue.js 開發環境建置
• Apr 圖解 Flexbox 進階屬性
• Apr 圖解 Flexbox 基本屬性
• Apr 使用 xpepermint 建立 Vue.js 專案
• Apr vue-cli
• Apr Todo List: React and Redux Example
• Mar Virtual DOM 概述
• Mar RSS 與 SEO
• Mar Todo List with Vue.js and Vuex
• Mar 如何用 JavaScript 產生 UUID / GUID？
• Mar Todo List: Vue.js Example
• Feb Currying in JavaScript（柯里化）
• Feb Immutability 為何重要？淺談 immutable.js 和 seamless-immutable
• Feb 2016 總回顧
• Jan Todo List: Redux with jQuery Example
• Jan 利用 Object.defineProperty 和 MutationObserver 實作雙向綁定
• Jan babel-register 無法正確讀取 CSS 相關檔案

2016

• Nov 網站如何控制索引範圍？
• Oct ES6: let, const, Block-Level Scope
• Sep 利用 Prerender Node 為 SPA 做 SEO
• Sep 利用 PhantomJS 為 SPA 做 SEO
• Aug Node.js 中使用 Promise Q
• Aug 加速行動版網頁（AMP, Accelerated Mobile Pages）
• Aug Gulp 筆記：安裝、撰寫 Task、監看、例外錯誤處理和套件使用
• Aug T3: 構建大型網站的 JavaScript 框架
• Jul Hubot x Slack，製作自動回話與工作的機器人
• Jun DNS Prefetching：預先做 DNS 解析，幫助網頁載入速度更快
• May 結構化資料之「商品」範例 - 使用 JSON-LD
• Mar jQuery 的陣列操作：$.map() 與 $.grep()
• Mar 三天內學會 CSS3 動畫
• Feb JavaScript Object Oriented Programming
• Feb JavaScript Object Oriented Programming: Early and Late Binding
• Feb JavaScript Object Oriented Programming: Exceptions
• Feb JavaScript Object Oriented Programming: Factory Constructor Pattern
• Feb JavaScript Object Oriented Programming: All-in-one Constructor Pattern
• Feb JavaScript Object Oriented Programming: Pseudo-Classical Pattern
• Feb JavaScript Object Oriented Programming: The instanceof operator
• Feb JavaScript Object Oriented Programming: The constructor property
• Feb JavaScript Object Oriented Programming: Extending Natives
• Jan JavaScript Object Oriented Programming: Prototypal Inheritance

2015

• Dec Plugin 的撰寫
• Dec 常見的 Google 搜尋演算法（Search Algorithms）
• Dec 語意網 - HTML5文件的段落和綱要（Semantic Web - Sections and Outlines of an HTML5 Document）
• Nov Angular.js Form Example 表單練習
• Sep Node.js: 從 MongoDB 取得資料到套版
• Sep 使用 MongoVUE - GUI Tool for MongoDB
• Sep 使用平台 MongoLab 連接 MongoDB
• Sep 活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進
• Aug Node.js: 使用 Nodemailer 傳送 Email
• Aug Node.js: Cookie and Session
• Aug Node.js：表單處理與檔案上傳（Form Handling and File Uploads）
• Aug Node.js: 隱藏 Response Headers 資訊
• Aug Node.js: 使用模版引擎 Handlebars
• Aug Node.js: 使用 express-partials 製作 Partial View
• Aug Hello Node - 基本設定和簡單範例
• Jul AngularJS: TodoList
• Jul Strategy 策略模式
• Jul Event Delegation 事件委派
• Jun Iterator 迭代器模式
• Jun Factory 工廠模式
• Jun Singleton 單體模式
• Jun Code Reuse Patterns
• Jun 結構化資料之「活動」範例（Part 2）- 使用 Microdata 與 JSON-LD
• Jun 結構化資料之「活動」範例（Part 1）
• Jun Module Pattern
• May Modern Web 2015：電子商務與活動平台的 SEO 到底要做哪些事？
• May Decorator 裝飾者模式
• May JavaScript: JSON.parse and JSON.stringify
• May JavaScript: Call and Apply
• May JavaScript: Closure 與 Hoisting
• Apr Responsive Patterns: Layout
• Apr 利用 Bootstrap Grid System 排版的學習筆記
• Mar UXHK 2015
• Mar 赤柱（Stanley）- 悠閒愜意的異國風情小鎮
• Mar YHA 美荷樓青年旅舍（YHA Mei Ho House Youth Hostel）
• Feb 使用 Bootstrap 建立一個 RWD Template（Twitter Bootstrap in Responsive Web Design）
• Feb 吃什麼，どっち - 讓朋友幫你決定吃什麼（ALPHA Hackathon 2015）
• Jan 電子商務網站 SEO 實例探討

2014

• Dec App Store Optimization (ASO) Guideline
• Nov 談如何利用標籤（Tag）加強網站的近似辭彙（Relevant Terms）
• Nov 使用 Node.js + Express 建構一個簡單的微博網站
• Oct D3.js：Bar Chart 長條圖簡單範例
• Oct 使用 Graph API 上傳圖片到 Facebook 相簿、並設定為使用者大頭照
• Oct 響應式網頁（Responsive Web Design）實作筆記
• Oct 2014 SEO Ranking Factors - 點閱率是最重要的因子、利用標籤競爭排名
• Sep Facebook Graph API - Taggable Friends
• Aug 關鍵字 (Keyword) 與標籤 (Tag)－談選擇、聚焦與經營
• Jun Facebook Graph API 與 Demo Example
• May 搜尋引擎優化指南 (SEO Guideline) - 如何有系統的優化網站、評估與持續改進？
• Apr 粉多任務 x 一品禪 - 使用 Microdata 標記的網頁實例
• Mar Author Rank
• Mar RSS：概念與實作
• Feb 從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags
• Jan SEO：重複內容（Duplicate Content）
• Jan IA for SEO：使用 IA 增進自然搜尋流量

2013

• Oct Icon Fonts 教學
• Oct CKEditor HTML 網頁編輯器 + ASP.NET MVC3 範例