periondev

@pericode

Joined on Jun 30, 2022

  • 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"會非常省事!
     Like  Bookmark
  • 2023/03/20 前言 本篇文章簡單紀錄既有開發中的專案原先使用yarn套件管理器,改為使用pnpm做為套件管理器的設定過程。 Migration 一、用npm安裝pnpm 安裝指令 npm install -g pnpm
     Like 1 Bookmark
  • 2023/08/11 Vue 是一個前端框架,它可以讓我們用簡單的方式開發出動態的網頁。學習使用 Vue 的一大重點就是它的響應式,也就是說當使用者在網頁改變了資料,網頁畫面也會自動更新。這篇文章將介紹什麼是響應式,以及如何使用 Vue 提供的 ref() 和 reactive() 函數來定義響應式的數據。 什麼是響應式的值? 與一般數值的不同? 在 JavaScript 中,我們可以用各種類型的值來儲存資料,例如數字、字串、陣列、物件等。這些值都是可變的,也就是說,我們可以隨時修改它們的內容。例如: let x = 1; // 定義一個數字 x = x + 1; // 修改數字 console.log(x); // 顯示 2
     Like  Bookmark
  • 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 靜態網頁的目的。
     Like  Bookmark
  • 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/':
     Like  Bookmark
  • 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專案中開發。
     Like  Bookmark
  • 2023/04/07 前言 Next.js 是 React 的網頁框架。在學習使用 Next.js 開發的時候,我們會接觸到四種常見的網頁渲染技術。我們需要考量該選擇使用哪些網頁渲染技術,較為適合開發中的網站或應用程式。 先解釋一下這四種技術的英文縮寫: SSR:Server Side Rendering,伺服器端渲染 SSG:Static Site Generation,靜態網站生成 ISR:Incremental Site Rendering,增量式的網站渲染
     Like 2 Bookmark
  • 2023/01/12 首先看官網安裝介紹 https://tailwindcss.com/docs/installation 基本上若有搭配框架使用開發app,例如Next.js 就請移駕至Framework Guides 選擇搭配使用的Framework,參考安裝說明步驟進行。 在不搭配框架下進行開發的話,可以執行安裝命令: npm install -D tailwindcss postcss autoprefixer
     Like  Bookmark