2024/02/18 為什麼要使用 Typography？ 在幫網頁文章排版的時候，我們可能經常使用 TailwindCSS 的一些 class 來調整文字大小和間隔距離，例如： 文字大小：text-sm、text-lg、text-xl ... 字元間距：tracking-tight、tracking-wide、tracking-wider ... 行距：leading-6、leading-relaxed、leading-loose ... 使用這些 class 可以依照網頁的需求彈性調整文章的排版，但如果不想要花費時間思考特定的排版，希望能夠快速套用到大量文章，並提升閱讀舒適度，那麼使用 TailwindCSS 的官方擴充套件"Typography"會非常省事!

2023/03/20 前言 本篇文章簡單紀錄既有開發中的專案原先使用yarn套件管理器，改為使用pnpm做為套件管理器的設定過程。 Migration 一、用npm安裝pnpm 安裝指令 npm install -g pnpm

2023/08/11 Vue 是一個前端框架，它可以讓我們用簡單的方式開發出動態的網頁。學習使用 Vue 的一大重點就是它的響應式，也就是說當使用者在網頁改變了資料，網頁畫面也會自動更新。這篇文章將介紹什麼是響應式，以及如何使用 Vue 提供的 ref() 和 reactive() 函數來定義響應式的數據。 什麼是響應式的值? 與一般數值的不同? 在 JavaScript 中，我們可以用各種類型的值來儲存資料，例如數字、字串、陣列、物件等。這些值都是可變的，也就是說，我們可以隨時修改它們的內容。例如： let x = 1; // 定義一個數字 x = x + 1; // 修改數字 console.log(x); // 顯示 2

2023/10/07 前言 承上一篇文章手動部署 GitHub Pages，專案在 GitHub 遠端儲存庫已有main、gh-pages兩個分支，其中 main 作為開發更新的主要分支，gh-pages作為遠端部署 github pages 的來源，那麼我在本地更新程式碼並遞交程式碼，然後執行推送到遠端部署分支的命令:git subtree push --prefix dist origin gh-pages，每次部署都要重複同樣的瑣碎命令和流程，能不能將這個部署流程自動化? 當然可以! 只要撰寫腳本就行了。 實現自動部署功能 建立自動部署腳本的常見方式包含在本地專案創建deploy.sh腳本文件，或是藉由建立以 YAML (.yml)文件編寫的 Workflow 來控制一連串 GitHub Actions 來達到目的。 以本次專案為例，這個自動部署的功能如下: 當本地專案更新push推送至 GitHub 遠端庫 main 分支時，利用Workflow自動觸發 GitHub Actions 建構及部署等等指令，來達成程式碼更新並自動部署 GitHub Pages 靜態網頁的目的。

2023/10/03 使用工具和前置作業 Vite pnpm 已經建立好的 GitHub Repository 遠端庫 修改vite.config.ts 根據官方文件說明，若預期部署在https://<USERNAME>.github.io/<REPONAME>/ 網址上，首先需要在本地專案中的vite.config.ts新增或修改base屬性。 例如我的遠端庫名稱<REPONAME>為vue-weather-app，那麼就設定base 為'/vue-weather-app/':

2023/05/26 Dark Mode Switch with Next.js 13 隨著深色模式(Dark Mode)在現代網頁中越來越受歡迎，在網頁中提供Dark Mode切換功能好像是一種越來越常見的設計趨勢。 而Next.js是非常受歡迎的的React網頁框架，在最新版Next.js 13提供appDir作為beta版的功能，其特色是打造更少客戶端(Client)的JS程式碼，建構可重用的Layouts，以目錄作為Routes切換...等等。 由於beta版本的實驗性質，目前在next dev開發網頁深色模式功能時，經常會出現Hydration過程相關的錯誤, 本文將用簡化的例子講解我是如何在Next.js app開發自定義顏色的深色模式按鈕(Dark Mode Switch / Theme Toggle)，讓使用者在網頁點擊切換(switch)淺色模式(Light Mode)及深色模式(Dark Mode)，在開發時遇到的問題及目前的解決方式。 接下來的文章假設已經設置好Tailwind CSS在Next.js專案中開發。

2023/04/07 前言 Next.js 是 React 的網頁框架。在學習使用 Next.js 開發的時候，我們會接觸到四種常見的網頁渲染技術。我們需要考量該選擇使用哪些網頁渲染技術，較為適合開發中的網站或應用程式。 先解釋一下這四種技術的英文縮寫： SSR：Server Side Rendering，伺服器端渲染 SSG：Static Site Generation，靜態網站生成 ISR：Incremental Site Rendering，增量式的網站渲染

2023/01/12 首先看官網安裝介紹 https://tailwindcss.com/docs/installation 基本上若有搭配框架使用開發app,例如Next.js 就請移駕至Framework Guides 選擇搭配使用的Framework，參考安裝說明步驟進行。 在不搭配框架下進行開發的話，可以執行安裝命令: npm install -D tailwindcss postcss autoprefixer