KD's Tech Blog

Hi, 我是 KD Chang 張凱迪，我在這書寫我的軟體開發/程式設計技術筆記 | KD 技術部落格

整合 Tailwind CSS 與 daisyUI 的入門教學筆記 | 學習筆記

一、前言：為什麼選擇 Tailwind CSS 搭配 daisyUI？在現代前端開發中，Tailwind CSS 提供了高度自訂、原子化的 CSS class，使得開發者能夠以更模組化與語意化的方式撰寫樣式。然而，Tailwind 並不內建 UI 元件，這就使得一些常見元件（如按鈕、表單、卡片）仍需手動組裝樣式。 這時，daisyUI 就成為極佳的搭檔。daisyUI 是一個基於 Tailw......

Posted by kdchang on 2024-10-16

Web 前端效能優化入門教學筆記 | 學習筆記

前言在網頁開發中，效能優化是一個不可忽視的重要課題。無論是企業網站、單頁應用（SPA），或是電商平台，效能表現都直接影響使用者體驗與轉換率。 本篇筆記將介紹 Web 前端效能優化的核心概念、常見策略與實務範例，幫助你為專案建立良好的基礎。 為什麼需要前端效能優化？前端效能不佳會導致： 首次載入時間過長 使用者等待過久，產生跳出行為 SEO 表現不佳（Google 會參考 LCP、CLS、......

Posted by kdchang on 2024-10-16

Web 資訊安全入門教學筆記 | 學習筆記

前言在現代網頁應用中，資安問題層出不窮，從簡單的跨站攻擊（XSS）到複雜的憑證竊取、身份偽造（CSRF），都可能導致個資外洩、系統遭入侵甚至企業商譽受損。 本篇筆記將從實務角度出發，介紹幾種常見 Web 資安風險及其防範策略，讓你能以最基本的方式保護網站與使用者安全。 一、常見 Web 資安威脅類型1. XSS（Cross-Site Scripting，跨站腳本攻擊）原理：攻擊者將惡意腳本......

Posted by kdchang on 2024-10-16

PostCSS 入門教學筆記 | 學習筆記

一、什麼是 PostCSS？PostCSS 是一個 CSS 的轉換工具（CSS Transformer），本身不是 CSS 預處理器（如 Sass）或框架（如 Tailwind CSS），但它可以透過「外掛（plugin）」的方式強化你的 CSS 工作流程。 簡單來說，PostCSS 是一個平台，讓你可以用 JavaScript 編寫規則，自動處理 CSS，像是： 自動加上瀏覽器前綴（au......

Posted by kdchang on 2024-09-16

AOS（Animate On Scroll Library）入門教學筆記 | 學習筆記

前言在現代網頁設計中，視覺效果和互動性已經成為提升使用者體驗的重要元素。當使用者向下滾動頁面時，如果某些區塊能夠平滑地出現、滑入、淡入或放大，能大大提升網站的專業感和吸引力。這類效果通常被稱為「滾動動畫」。 AOS (Animate On Scroll) 是一個輕量級的 JavaScript 函式庫，讓你可以輕鬆地為 HTML 元素加上動畫效果，並且在元素進入畫面時自動播放動畫。它不需要你手......

Posted by kdchang on 2024-08-31

Django CRUD（不使用 ModelForm）入門教學筆記 | 學習筆記

前言在 Django 中，ModelForm 提供了一個快速建立表單與驗證的工具，但在某些情境下，我們可能希望自己掌控表單結構與驗證流程。這篇筆記將示範如何不依賴 ModelForm，手動實作一套 CRUD 系統，幫助你更深入理解 Django 表單處理的基本原理。 我們將製作一個簡單的「書籍管理系統」，支援新增（Create）、讀取（Read）、更新（Update）與刪除（Delete）書......

Posted by kdchang on 2024-08-31

FastAPI 入門教學筆記：打造現代 Python Web API 的入門教學筆記 | 學習筆記

什麼是 FastAPI？FastAPI 是一個現代、快速（高效能）、基於 Python 3.7+ 類型提示的 Web 框架，用於建構 API。其核心優勢包含： 自動生成文件：內建 OpenAPI 與 Swagger UI 支援 高效能：基於 Starlette 和 Pydantic，效能可媲美 Node.js 與 Go 開發快速：強大的 IDE 支援與自動補全功能 自動驗證與序列化：透過 ......

Posted by kdchang on 2024-08-31

Python 指定使用 OpenSSL 介紹入門教學筆記 | 學習筆記

前言如果 python -c "import ssl; print(ssl.OPENSSL_VERSION)" 顯示的是 LibreSSL 2.8.3，這表示 Python 並沒有使用 Homebrew 安裝的 OpenSSL，而是使用了系統預設的 LibreSSL。這通常發生在 Python 編譯時，沒有正確地連結到 Homebrew 的 OpenSSL 庫。 為了解決......

Posted by kdchang on 2024-08-31

CSS Flexbox align-items 和 align-content 入門教學筆記 | 學習筆記

前言在 CSS Flexbox 和 Grid 佈局中，align-items 和 align-content 兩者都與「對齊」有關，但適用的情境不同（單行 vs 多行）： 1. align-items 作用於單行內容（單行 Flexbox 或 Grid 容器內的項目）。 控制子元素在交叉軸（cross-axis）上的對齊方式。 常見值 值 說明 stretch 預設值，子元素會拉......

Posted by kdchang on 2024-07-10

Flexbox Froggy 入門教學筆記 | 學習筆記

1. Flexbox 簡介Flexbox（Flexible Box Layout）是一種 CSS3 佈局模式，專門用來設計一維的彈性佈局，適用於水平或垂直排列元素，使網頁排版更加靈活且易於維護。 Flexbox Froggy 透過小青蛙過河遊戲化方式去介紹 Flexbox 使用方式： Level 1Welcome to Flexbox Froggy, a game where you hel......

Posted by kdchang on 2024-07-10

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品/專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS