<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <author>
    <name>Wang Casper</name>
  </author>
  <generator uri="https://hexo.io/">Hexo</generator>
  <id>https://www.casper.tw/</id>
  <link href="https://www.casper.tw/" rel="alternate"/>
  <link href="https://www.casper.tw/atom.xml" rel="self"/>
  <rights>All rights reserved 2026, Wang Casper</rights>
  <title>卡斯伯 Blog - 前端，沒有極限</title>
  <updated>2026-10-05T02:22:15.590Z</updated>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="develop" scheme="https://www.casper.tw/tags/develop/"/>
    <category term="資安" scheme="https://www.casper.tw/tags/%E8%B3%87%E5%AE%89/"/>
    <category term="security" scheme="https://www.casper.tw/tags/security/"/>
    <id>https://www.casper.tw/development/2026/10/05/security-habits/</id>
    <link href="https://www.casper.tw/development/2026/10/05/security-habits/"/>
    <published>2026-10-04T16:00:00.000Z</published>
    <summary>整理日常生活與開發的資安習慣：Passkey 與密碼管理、辨識釣魚網址、信用卡與個資保護、帳號安全性檢查，以及 API Key 的保管、上線前檢查、定期掃描與外洩後如何止血。</summary>
    <title>資安習慣養成：日常生活與開發的資安清單</title>
    <updated>2026-10-05T02:22:15.590Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="Vue" scheme="https://www.casper.tw/tags/Vue/"/>
    <category term="Cloudflare" scheme="https://www.casper.tw/tags/Cloudflare/"/>
    <category term="side project" scheme="https://www.casper.tw/tags/side-project/"/>
    <id>https://www.casper.tw/development/2026/07/16/taiwan-zipcode-side-project/</id>
    <link href="https://www.casper.tw/development/2026/07/16/taiwan-zipcode-side-project/"/>
    <published>2026-07-15T16:00:00.000Z</published>
    <summary>一個 side project 開發記：為了不想在中華郵政官網一層層下拉選單查 3+3 郵遞區號、也不想為了地址英譯輸入驗證碼，我用 Vue 3 + vite-ssg 做了台灣郵遞區號查詢工具，記錄自己寫 DBF parser、build-time 資料切塊與地址 parser 的幾個技術決策。</summary>
    <title>打造「台灣郵遞區號查詢」：一個純靜態 side project 的開發記</title>
    <updated>2026-07-16T07:03:27.459Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="AI" scheme="https://www.casper.tw/tags/AI/"/>
    <category term="Claude Code" scheme="https://www.casper.tw/tags/Claude-Code/"/>
    <id>https://www.casper.tw/development/2026/07/07/anthropic-loop-engineering/</id>
    <link href="https://www.casper.tw/development/2026/07/07/anthropic-loop-engineering/"/>
    <published>2026-07-06T16:00:00.000Z</published>
    <summary>Anthropic 介紹 Claude Code 如何實踐 Loop Engineering 的文章翻譯，把 agent 的工作循環依觸發與停止方式分成回合式、目標式、時間式、主動式四種，並說明如何控管 token 與維持程式碼品質。</summary>
    <title>Anthropic Getting started with loops（Loop Engineering 入門）| 翻譯文</title>
    <updated>2026-07-07T09:08:39.787Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/10/15/ironman-collection/</id>
    <link href="https://www.casper.tw/development/2023/10/15/ironman-collection/"/>
    <published>2023-10-14T16:00:00.000Z</published>
    <summary>
      <![CDATA[<p>大家好，我是卡斯伯老師，</p>
<p>我在 2023 年參加了 iThome 所舉辦的鐵人賽，這個比賽是連續 30 天每天都要寫一篇技術文章，系列主題名稱為：「Node.js 實戰密技與辦公室的小壞壞：即戰力釋放讓總裁的心動瞬間」，顧名思義主題會跟 Node.js]]>
    </summary>
    <title>Node.js 實戰密技大統整（套件運用、金流、第三方登入、雲服務、Docker）</title>
    <updated>2026-07-07T03:26:01.189Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <category term="traefik" scheme="https://www.casper.tw/tags/traefik/"/>
    <id>https://www.casper.tw/development/2023/10/14/traefik/</id>
    <link href="https://www.casper.tw/development/2023/10/14/traefik/"/>
    <published>2023-10-13T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/CV3pi8KQEy0" title="YouTube video player"]]>
    </summary>
    <title>在伺服器上建置 Traefik Proxy 反向代理伺服器</title>
    <updated>2026-05-31T07:18:15.539Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/10/11/portainer/</id>
    <link href="https://www.casper.tw/development/2023/10/11/portainer/"/>
    <published>2023-10-10T16:00:00.000Z</published>
    <summary>Portainer 安裝與環境建置教學，Docker 伺服器端最易上手的 GUI 管理工具，透過網頁介面管理容器、映像檔與服務，不必死記 docker 指令。</summary>
    <title>Portainer 環境建置 - Docker 伺服器端最易上手的 GUI 管理工具</title>
    <updated>2026-07-09T07:55:17.499Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/10/08/ubuntu-docker/</id>
    <link href="https://www.casper.tw/development/2023/10/08/ubuntu-docker/"/>
    <published>2023-10-07T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/JocSDHOFNzw" title="YouTube video player"]]>
    </summary>
    <title>在 Ubuntu 上加入 Docker 環境並部署 Node.js 專案</title>
    <updated>2026-05-31T07:18:15.539Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/10/07/docker-container/</id>
    <link href="https://www.casper.tw/development/2023/10/07/docker-container/"/>
    <published>2023-10-06T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/RsY5cCc9RGM" title="YouTube video player"]]>
    </summary>
    <title>在 Ubuntu 上加入 Docker 環境並部署 Node.js 專案</title>
    <updated>2026-05-31T07:18:15.539Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/10/04/nodejs-github-action/</id>
    <link href="https://www.casper.tw/development/2023/10/04/nodejs-github-action/"/>
    <published>2023-10-03T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/cUmSAGtP-70" title="YouTube video player"]]>
    </summary>
    <title>使用 GitHub Action 部署 Node.js 專案至虛擬主機上</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/10/03/unbuntu-and-pm2/</id>
    <link href="https://www.casper.tw/development/2023/10/03/unbuntu-and-pm2/"/>
    <published>2023-10-02T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/e9Y4sWcwsn8" title="YouTube video player"]]>
    </summary>
    <title>Ubuntu 虛擬主機部署 Node.js 服務，使用 PM2 服務管理</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/09/29/fireabase-storage/</id>
    <link href="https://www.casper.tw/development/2023/09/29/fireabase-storage/"/>
    <published>2023-09-28T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/H4GmskFhSJQ" title="YouTube video player"]]>
    </summary>
    <title>Firebase Storage 申請設定以及 Node.js 串接方式</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/09/28/aws-s3/</id>
    <link href="https://www.casper.tw/development/2023/09/28/aws-s3/"/>
    <published>2023-09-27T16:00:00.000Z</published>
    <summary>
      <![CDATA[<div class="ratio ratio-16x9">
<iframe width="100%" src="https://www.youtube.com/embed/y12KO8XM6jw" title="YouTube video player"]]>
    </summary>
    <title>AWS S3 申請設定以及 Node.js 串接方式</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2023/09/26/newebay/</id>
    <link href="https://www.casper.tw/development/2023/09/26/newebay/"/>
    <published>2023-09-25T16:00:00.000Z</published>
    <summary>
      <![CDATA[<p>這是鐵人賽相關文章，影片會在活動開始後發布</p>
<p>藍新金流官方正式網站：<a href="https://www.newebpay.com/">https://www.newebpay.com/</a><br>藍新金流測試站：<a]]>
    </summary>
    <title>藍新金流申請以及串接方式</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <id>https://www.casper.tw/development/2022/03/10/object-for-each/</id>
    <link href="https://www.casper.tw/development/2022/03/10/object-for-each/"/>
    <published>2022-03-09T16:00:00.000Z</published>
    <summary>
      <![CDATA[<p>陣列本身具有非常多好用的迴圈方法，如：<code>forEach</code>、<code>map</code>、<code>reduce</code>、<code>find</code>…，這些方法有助於處理各種陣列的資料。</p>
<p>但實戰中，不一定所有的資料格式都]]>
    </summary>
    <title>JS 中的物件迴圈手法</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="nodejs" scheme="https://www.casper.tw/tags/nodejs/"/>
    <id>https://www.casper.tw/development/2022/01/10/install-nvm/</id>
    <link href="https://www.casper.tw/development/2022/01/10/install-nvm/"/>
    <published>2022-01-09T16:00:00.000Z</published>
    <summary>nvm（Node Version Manager）版本管理安裝教學：Windows 用 nvm-windows、Mac 用指令安裝，示範 nvm install、切換 Node.js 版本與設定預設版本等常用指令。</summary>
    <title>nvm 安裝教學：Windows／Mac 設定 Node.js 版本管理與常用指令</title>
    <updated>2026-07-08T16:00:00.000Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="css" scheme="https://www.casper.tw/tags/css/"/>
    <id>https://www.casper.tw/development/2021/10/04/css-animation/</id>
    <link href="https://www.casper.tw/development/2021/10/04/css-animation/"/>
    <published>2021-10-03T16:00:00.000Z</published>
    <summary>
      <![CDATA[<p>網頁上看到許多 CSS Animation 套效想要參考使用，但卻不知道其中的屬性各自代表什麼意思嗎？本篇將介紹 CSS Animation 的各項屬性運用技巧，並提供一個模擬工具，讓大家可以快速的了解每個屬性的意義。</p>
<h2 id="建立第一個動畫"><a]]>
    </summary>
    <title>一個工具，帶你完整認識 CSS Animation</title>
    <updated>2026-05-31T07:18:15.538Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="mac" scheme="https://www.casper.tw/tags/mac/"/>
    <category term="osx" scheme="https://www.casper.tw/tags/osx/"/>
    <id>https://www.casper.tw/development/2021/09/28/mac-osx-screen-capture/</id>
    <link href="https://www.casper.tw/development/2021/09/28/mac-osx-screen-capture/"/>
    <published>2021-09-27T16:00:00.000Z</published>
    <summary>Mac OSX 截圖全說明，完整介紹單一視窗、全螢幕、指定區域截圖熱鍵，以及重設截圖儲存路徑、更改檔案格式與 Touch Bar 截圖技巧。</summary>
    <title>Mac OSX 截圖全說明（單一視窗、全螢幕、重設截圖路徑、Touch Bar）</title>
    <updated>2026-07-09T07:55:17.503Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="css" scheme="https://www.casper.tw/tags/css/"/>
    <id>https://www.casper.tw/development/2021/09/22/css-variables-bootstrap/</id>
    <link href="https://www.casper.tw/development/2021/09/22/css-variables-bootstrap/"/>
    <published>2021-09-21T16:00:00.000Z</published>
    <summary>
      <![CDATA[<p>在 Bootstrap 5 以後，大量導入 “CSS Variable” 的技巧，透過變數可以大幅增加 CSS 的可運用性，讓同一段程式碼透過修改變數的形式，大幅增加 CSS 的可用性，本篇將介紹 CSS 基本運用方式，以及在 Bootstrap 5]]>
    </summary>
    <title>CSS 變數必學知識 - 宣告、繼承及 Bootstrap 中的運用技巧</title>
    <updated>2026-05-31T07:18:15.537Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="履歷" scheme="https://www.casper.tw/tags/%E5%B1%A5%E6%AD%B7/"/>
    <id>https://www.casper.tw/development/2021/09/17/resume-skills/</id>
    <link href="https://www.casper.tw/development/2021/09/17/resume-skills/"/>
    <published>2021-09-16T16:00:00.000Z</published>
    <summary>
      <![CDATA[<p>履歷中的「技能」描述是個人專業技能的主述，徵才單位會透過其內容理解求職者的能力，更重要的是透過字詞中分析對於技能的<strong>掌握深度</strong>，如果沒有善加利用，可能會造成：</p>
<ul>
<li>資深開發者：但沒有透過履歷展現出應有的深度</li>
<l]]>
    </summary>
    <title>履歷避雷技巧 - 技能描述篇</title>
    <updated>2026-05-31T07:18:15.537Z</updated>
  </entry>
  <entry>
    <author>
      <name>Wang Casper</name>
    </author>
    <category term="development" scheme="https://www.casper.tw/categories/development/"/>
    <category term="javascript" scheme="https://www.casper.tw/tags/javascript/"/>
    <category term="js" scheme="https://www.casper.tw/tags/js/"/>
    <id>https://www.casper.tw/development/2021/09/14/js-console/</id>
    <link href="https://www.casper.tw/development/2021/09/14/js-console/"/>
    <published>2021-09-13T16:00:00.000Z</published>
    <summary>JavaScript console 運用技巧，精選 8 招讓你除錯更高效，除了 console.log 之外還有 console.table、group、time、assert 等實用語法，提升前端除錯效率。</summary>
    <title>JavaScript Console 運用技巧 - 8 招讓你除錯更高效</title>
    <updated>2026-07-09T07:55:17.502Z</updated>
  </entry>
</feed>
