前端工程師的技術學習筆記、踩過的坑，以及軟體開發心得https://bolaslien.github.io/blog/zh-twhttps://bolaslien.github.io/blog/2026/03/22/ai-frontend-development-flow/https://bolaslien.github.io/blog/2026/03/22/ai-frontend-development-flow/最近在研究AI前端開發流程，我覺得切版還是有很大的阻礙，AI對於設計稿（figma)的理解都是基於它的節點結構，不見得他真的知道「看起來如何」Sun, 22 Mar 2026 14:36:44 GMThttps://bolaslien.github.io/blog/2026/03/14/ai-amplifies-output-but-not-validation/https://bolaslien.github.io/blog/2026/03/14/ai-amplifies-output-but-not-validation/AI 讓產出變快，但掩蓋不了驗證能力的缺失。探討 AI 輔助開發時，工程師真正需要具備的核心能力。Sat, 14 Mar 2026 09:45:30 GMThttps://bolaslien.github.io/blog/2026/03/10/stop-fixing-code-start-completing-tasks/https://bolaslien.github.io/blog/2026/03/10/stop-fixing-code-start-completing-tasks/探討如何轉變使用 AI 工具的思維，不再只是請 AI 修幾行 code，而是讓 AI 幫你完成整個任務。Tue, 10 Mar 2026 04:00:00 GMThttps://bolaslien.github.io/blog/2026/03/02/my-ai-coding-journey/https://bolaslien.github.io/blog/2026/03/02/my-ai-coding-journey/記錄從 2023 年第一次使用 ChatGPT 到幾乎不手寫程式碼的 AI 輔助開發旅程與心路歷程。Mon, 02 Mar 2026 10:15:46 GMThttps://bolaslien.github.io/blog/2026/02/11/refactor-with-ai-agents/https://bolaslien.github.io/blog/2026/02/11/refactor-with-ai-agents/記錄使用 AI 代理程式（AI Agents）對多年前番茄鐘舊專案進行重構的完整過程與心得。Wed, 11 Feb 2026 06:01:55 GMThttps://bolaslien.github.io/blog/2026/01/30/value-of-engineer-with-ai/https://bolaslien.github.io/blog/2026/01/30/value-of-engineer-with-ai/探討 AI 時代下開發者的核心價值，思考當 AI 能代勞大部分實作時，工程師的不可取代之處。Fri, 30 Jan 2026 04:40:34 GMThttps://bolaslien.github.io/blog/2025/08/02/claude-code-first-use/https://bolaslien.github.io/blog/2025/08/02/claude-code-first-use/記錄第一次使用 Claude Code 的完整體驗，1.5 小時就燒光 token，卻也發現 AI 輔助開發的驚人潛力。Sat, 02 Aug 2025 06:27:12 GMThttps://bolaslien.github.io/blog/2023/02/23/mentoring-experience/https://bolaslien.github.io/blog/2023/02/23/mentoring-experience/分享帶新人的幾個收穫，記錄一段在技術成長與教學溝通上都令人難忘的 mentoring 經驗。Thu, 23 Feb 2023 12:21:31 GMThttps://bolaslien.github.io/blog/2023/02/18/refactor-suggestion/https://bolaslien.github.io/blog/2023/02/18/refactor-suggestion/分享針對購物車功能進行程式碼重構的經驗，記錄發現問題根源與改善架構的完整過程。Sat, 18 Feb 2023 02:05:37 GMThttps://bolaslien.github.io/blog/2023/02/02/three-tips-for-learning-a-new-skill/https://bolaslien.github.io/blog/2023/02/02/three-tips-for-learning-a-new-skill/分享有效學習新技術的三個訣竅，以成功上手 Cypress、Docker、Webpack 等前端技術為實際案例。Thu, 02 Feb 2023 09:18:50 GMThttps://bolaslien.github.io/blog/2022/12/30/2022-retrospective/https://bolaslien.github.io/blog/2022/12/30/2022-retrospective/2022 年的個人年度回顧，記錄這一年在健康、職涯與個人成長上的收穫與反思。Fri, 30 Dec 2022 02:36:49 GMThttps://bolaslien.github.io/blog/2022/10/26/webpack-esbuild-loader/https://bolaslien.github.io/blog/2022/10/26/webpack-esbuild-loader/介紹使用 esbuild-loader 替換 babel-loader 來大幅提升 Webpack 建構速度的實作方法。Wed, 26 Oct 2022 13:30:11 GMThttps://bolaslien.github.io/blog/2022/09/15/nodejs-path-sep/https://bolaslien.github.io/blog/2022/09/15/nodejs-path-sep/解決 Node.js 跨平台路徑分隔符號差異問題，修復從 Linux 移植到 Windows 時的路徑錯誤。Thu, 15 Sep 2022 02:54:01 GMThttps://bolaslien.github.io/blog/2022/07/19/css-img-and-background-image/https://bolaslien.github.io/blog/2022/07/19/css-img-and-background-image/比較 HTML img 標籤與 CSS background-image 屬性的差異，了解各自適合的使用情境。Tue, 19 Jul 2022 15:55:07 GMThttps://bolaslien.github.io/blog/2022/06/25/daily-meeting/https://bolaslien.github.io/blog/2022/06/25/daily-meeting/記錄參與 Scrum 每日站立會議的經驗，分享如何讓 15 分鐘的 Daily Meeting 更有效率。Sat, 25 Jun 2022 08:08:45 GMThttps://bolaslien.github.io/blog/2022/06/02/js-closure/https://bolaslien.github.io/blog/2022/06/02/js-closure/深入解析 JavaScript 閉包（Closure）的概念，理解函式執行後如何保留外部作用域的變數。Thu, 02 Jun 2022 02:05:18 GMThttps://bolaslien.github.io/blog/2022/03/02/copy-to-clipboard-using-javascript/https://bolaslien.github.io/blog/2022/03/02/copy-to-clipboard-using-javascript/介紹使用 JavaScript Clipboard API 實作點擊按鈕複製文字功能的方法，附完整範例程式碼。Wed, 02 Mar 2022 05:51:20 GMThttps://bolaslien.github.io/blog/2021/12/30/how-i-feel-after-i-being-frontend-developer-one-years/https://bolaslien.github.io/blog/2021/12/30/how-i-feel-after-i-being-frontend-developer-one-years/成為前端工程師一年後的心路歷程，從冒牌者症候群到逐漸找到自信的成長記錄。Thu, 30 Dec 2021 05:45:04 GMThttps://bolaslien.github.io/blog/2021/12/21/git-cross-os-config-setting/https://bolaslien.github.io/blog/2021/12/21/git-cross-os-config-setting/解決跨平台開發時，Git 未修改檔案出現換行警告（LF/CRLF）或檔案權限異動的設定方法。Tue, 21 Dec 2021 07:54:58 GMThttps://bolaslien.github.io/blog/2021/12/01/what-agile-is/https://bolaslien.github.io/blog/2021/12/01/what-agile-is/介紹敏捷開發（Agile）的核心概念與精神，比較傳統瀑布式開發流程的差異與優劣。Wed, 01 Dec 2021 08:00:25 GMThttps://bolaslien.github.io/blog/2021/11/02/js-type-coercion/https://bolaslien.github.io/blog/2021/11/02/js-type-coercion/解析 JavaScript 強制轉型（Type Coercion）的運作機制，避免開發時踩到隱性型別轉換的陷阱。Tue, 02 Nov 2021 07:11:07 GMThttps://bolaslien.github.io/blog/2021/10/27/js-expression-and-statement/https://bolaslien.github.io/blog/2021/10/27/js-expression-and-statement/解析 JavaScript 中表達式（Expression）與陳述式（Statement）的核心差異與使用方式。Wed, 27 Oct 2021 08:25:52 GMThttps://bolaslien.github.io/blog/2021/10/25/js-array-prototype-sort/https://bolaslien.github.io/blog/2021/10/25/js-array-prototype-sort/介紹 JavaScript Array.sort() 方法的排序規則，以及如何撰寫自訂比較函式進行排序。Mon, 25 Oct 2021 10:00:00 GMThttps://bolaslien.github.io/blog/2021/09/29/my-example-how-to-store-data-state/https://bolaslien.github.io/blog/2021/09/29/my-example-how-to-store-data-state/分享一個具挑戰性的前端資料狀態管理案例，完整記錄解題思路與實作過程。Wed, 29 Sep 2021 08:14:30 GMThttps://bolaslien.github.io/blog/2021/09/01/js-how-to-copy-an-array/https://bolaslien.github.io/blog/2021/09/01/js-how-to-copy-an-array/介紹在 JavaScript 中正確複製陣列的各種方法，避免參考賦值導致原始資料被意外修改。Wed, 01 Sep 2021 09:29:22 GMThttps://bolaslien.github.io/blog/2021/08/26/js-scope-chain-and-closure/https://bolaslien.github.io/blog/2021/08/26/js-scope-chain-and-closure/解析 JavaScript 作用域鏈（Scope Chain）的運作原理，以及與閉包（Closure）的關聯。Thu, 26 Aug 2021 09:39:17 GMThttps://bolaslien.github.io/blog/2021/08/24/js-bind-call-apply/https://bolaslien.github.io/blog/2021/08/24/js-bind-call-apply/比較 JavaScript bind()、call()、apply() 三種方法的差異，並說明各自適合的使用時機。Tue, 24 Aug 2021 09:33:00 GMThttps://bolaslien.github.io/blog/2021/08/13/project-todolist/https://bolaslien.github.io/blog/2021/08/13/project-todolist/探討為什麼做 TodoList 是學習前端開發的好起點，分享個人的 TodoList 專案開發心得。Fri, 13 Aug 2021 03:59:36 GMThttps://bolaslien.github.io/blog/2021/08/04/js-variables/https://bolaslien.github.io/blog/2021/08/04/js-variables/介紹 JavaScript 變數的基本概念，比較 var、let、const 的差異與各自的使用時機。Wed, 04 Aug 2021 13:43:35 GMThttps://bolaslien.github.io/blog/2021/07/14/js-variable-scope/https://bolaslien.github.io/blog/2021/07/14/js-variable-scope/介紹 JavaScript 變數作用域的概念，了解全域（Global）與區域（Local）作用域的有效範圍。Wed, 14 Jul 2021 04:45:02 GMThttps://bolaslien.github.io/blog/2021/07/13/js-variable-hoisting/https://bolaslien.github.io/blog/2021/07/13/js-variable-hoisting/介紹 JavaScript 變數提升（Hoisting）的概念，理解 var、let、const 宣告前的行為差異。Tue, 13 Jul 2021 04:35:22 GMThttps://bolaslien.github.io/blog/2021/07/08/css-height/https://bolaslien.github.io/blog/2021/07/08/css-height/解析 CSS height 不同單位（px、%、vh）的差別與使用時機，避免常見排版問題。Thu, 08 Jul 2021 07:03:59 GMThttps://bolaslien.github.io/blog/2021/07/05/css-flexbox/https://bolaslien.github.io/blog/2021/07/05/css-flexbox/詳細介紹 CSS Flexbox 的各種屬性與用法，幫助快速掌握現代響應式網頁排版技巧。Mon, 05 Jul 2021 07:41:56 GMThttps://bolaslien.github.io/blog/2021/06/18/js-short-circuit-evaluation/https://bolaslien.github.io/blog/2021/06/18/js-short-circuit-evaluation/介紹 JavaScript 短路求值（Short-circuit evaluation），活用 || 和 && 讓程式碼更精簡。Fri, 18 Jun 2021 08:13:53 GMThttps://bolaslien.github.io/blog/2021/06/08/js-dev-tools/https://bolaslien.github.io/blog/2021/06/08/js-dev-tools/介紹 JavaScript 開發中常用的瀏覽器開發者工具（DevTools）技巧與偵錯方法。Tue, 08 Jun 2021 07:56:23 GMThttps://bolaslien.github.io/blog/2021/05/28/js-array-prototype-every/https://bolaslien.github.io/blog/2021/05/28/js-array-prototype-every/介紹 JavaScript Array.every() 方法的用法，針對陣列所有元素執行條件驗證的應用範例。Fri, 28 May 2021 08:47:07 GMThttps://bolaslien.github.io/blog/2021/05/28/js-array-prototype-find/https://bolaslien.github.io/blog/2021/05/28/js-array-prototype-find/介紹 JavaScript Array.find() 方法的用法，從陣列中找出第一個符合條件的元素值。Fri, 28 May 2021 08:47:07 GMThttps://bolaslien.github.io/blog/2021/05/28/js-array-prototype-findIndex/https://bolaslien.github.io/blog/2021/05/28/js-array-prototype-findIndex/介紹 JavaScript Array.findIndex() 方法，找出陣列中第一個符合條件元素的索引值。Fri, 28 May 2021 08:47:07 GMThttps://bolaslien.github.io/blog/2021/05/28/js-array-prototype-some/https://bolaslien.github.io/blog/2021/05/28/js-array-prototype-some/介紹 JavaScript Array.some() 方法，判斷陣列中是否至少有一個元素符合指定條件。Fri, 28 May 2021 08:47:07 GMThttps://bolaslien.github.io/blog/2021/05/27/js-array-prototype-slice/https://bolaslien.github.io/blog/2021/05/27/js-array-prototype-slice/介紹 JavaScript Array.slice() 方法，實現陣列資料淺拷貝（Shallow Copy）的操作範例。Thu, 27 May 2021 10:06:58 GMThttps://bolaslien.github.io/blog/2021/05/27/js-array-prototype-splice/https://bolaslien.github.io/blog/2021/05/27/js-array-prototype-splice/介紹 JavaScript Array.splice() 方法，對陣列進行刪除或插入資料的操作方式與範例。Thu, 27 May 2021 10:06:58 GMThttps://bolaslien.github.io/blog/2021/05/12/git-rebase-remote-branch/https://bolaslien.github.io/blog/2021/05/12/git-rebase-remote-branch/介紹如何使用 Git rebase 同步 fork 專案與原始上游（upstream）專案的 commit 歷史。Wed, 12 May 2021 04:13:44 GMThttps://bolaslien.github.io/blog/2021/03/25/js-saveral-way-for-compare-strings/https://bolaslien.github.io/blog/2021/03/25/js-saveral-way-for-compare-strings/整理 JavaScript 中比較字串的幾種方法，包含處理 host 白名單驗證時的注意事項。Thu, 25 Mar 2021 03:04:05 GMThttps://bolaslien.github.io/blog/2021/02/24/what-git-is/https://bolaslien.github.io/blog/2021/02/24/what-git-is/介紹 Git 版本控制系統的基本概念，了解為什麼要用 Git 以及基本操作流程。Wed, 24 Feb 2021 08:53:03 GMThttps://bolaslien.github.io/blog/2021/02/18/vue-parent-emit/https://bolaslien.github.io/blog/2021/02/18/vue-parent-emit/介紹 Vue.js 中父子元件之間的事件溝通機制，包含 emit 的完整用法與實作範例。Thu, 18 Feb 2021 03:53:15 GMThttps://bolaslien.github.io/blog/2020/12/30/change-careers/https://bolaslien.github.io/blog/2020/12/30/change-careers/分享如何從遊戲開發 PM 成功轉職前端工程師，參加泰山職訓局前端班的過程與心得。Wed, 30 Dec 2020 07:45:44 GMThttps://bolaslien.github.io/blog/2020/12/22/cypress-intro-note-2/https://bolaslien.github.io/blog/2020/12/22/cypress-intro-note-2/Cypress 入門筆記（下），介紹斷言（Assertions）等進階 E2E 測試技巧與用法。Tue, 22 Dec 2020 03:01:33 GMThttps://bolaslien.github.io/blog/2020/12/21/css-specificity/https://bolaslien.github.io/blog/2020/12/21/css-specificity/解釋 CSS 選擇器的權重（Specificity）規則，幫助理解樣式衝突時的套用優先順序。Mon, 21 Dec 2020 10:07:34 GMThttps://bolaslien.github.io/blog/2020/12/18/cypress-intro-note/https://bolaslien.github.io/blog/2020/12/18/cypress-intro-note/Cypress 入門筆記（上），介紹元素查詢等基礎 E2E 測試操作與常用指令。Fri, 18 Dec 2020 06:42:13 GMThttps://bolaslien.github.io/blog/2020/12/15/cypress-in-docker/https://bolaslien.github.io/blog/2020/12/15/cypress-in-docker/介紹如何在 Docker 環境中執行 Cypress 測試，解決跨平台環境差異造成的測試問題。Tue, 15 Dec 2020 08:14:16 GMThttps://bolaslien.github.io/blog/2020/12/15/vscode-git-config/https://bolaslien.github.io/blog/2020/12/15/vscode-git-config/介紹如何設定 VS Code 的 Git 整合功能，提升日常開發中的版本控制操作效率。Tue, 15 Dec 2020 07:37:07 GMThttps://bolaslien.github.io/blog/2020/12/11/vuex-actions-and-mutations/https://bolaslien.github.io/blog/2020/12/11/vuex-actions-and-mutations/解析 Vuex 中 mutations 與 actions 的設計差異，理解為什麼狀態管理需要分開這兩種寫法。Fri, 11 Dec 2020 10:14:37 GMThttps://bolaslien.github.io/blog/2020/11/02/html-reusable-header-template/https://bolaslien.github.io/blog/2020/11/02/html-reusable-header-template/介紹如何用 HTML template 標籤製作可重用的 header 元件，告別每個頁面重複複製貼上的困擾。Mon, 02 Nov 2020 04:10:14 GMThttps://bolaslien.github.io/blog/2020/10/13/vue-child-to-parent-emit/https://bolaslien.github.io/blog/2020/10/13/vue-child-to-parent-emit/介紹 Vue.js 元件溝通中子傳父的 emit 機制，附完整程式碼範例說明使用方式。Tue, 13 Oct 2020 08:18:16 GMThttps://bolaslien.github.io/blog/2020/09/21/ssh-passwordless-login-with-putty/https://bolaslien.github.io/blog/2020/09/21/ssh-passwordless-login-with-putty/介紹如何使用 PuTTY 配合 SSH 金鑰登入遠端伺服器，實現免密碼的安全連線方式。Mon, 21 Sep 2020 07:48:45 GMThttps://bolaslien.github.io/blog/2020/08/28/nvm-windows/https://bolaslien.github.io/blog/2020/08/28/nvm-windows/介紹在 Windows 系統上安裝與使用 nvm（Node Version Manager）管理多個 Node.js 版本的方法。Fri, 28 Aug 2020 08:03:47 GMThttps://bolaslien.github.io/blog/2020/08/28/hexo-blog-setup-notes/https://bolaslien.github.io/blog/2020/08/28/hexo-blog-setup-notes/分享使用 Hexo 靜態網站產生器架設個人技術部落格的完整步驟與設定心得。Fri, 28 Aug 2020 05:55:28 GMThttps://bolaslien.github.io/blog/2020/08/19/leaving-game-industry-pm/https://bolaslien.github.io/blog/2020/08/19/leaving-game-industry-pm/分享從遊戲業聖騎士 PM 轉換職涯跑道的心路歷程，以及做出改變背後的思考與故事。Wed, 19 Aug 2020 05:42:11 GMThttps://bolaslien.github.io/blog/2020/08/18/jwt-login-authentication/https://bolaslien.github.io/blog/2020/08/18/jwt-login-authentication/介紹使用 JWT（JSON Web Token）實作安全登入驗證機制的完整流程與程式碼範例。Tue, 18 Aug 2020 04:09:18 GMThttps://bolaslien.github.io/blog/2020/04/29/build-a-line-bot/https://bolaslien.github.io/blog/2020/04/29/build-a-line-bot/介紹如何從零建立一個 LINE 聊天機器人，涵蓋專案設定、Webhook 串接等完整步驟。Wed, 29 Apr 2020 01:20:43 GMT