KD's Tech Blog

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

Tailwind CSS 入門教學筆記 | 學習筆記

一、什麼是 Tailwind CSS？Tailwind CSS 是一款以「工具類別優先」（Utility-First）為核心設計理念的 CSS 框架，與傳統的 CSS 框架（如 Bootstrap、Bulma）不同，它不提供預設的 UI 元件，而是提供大量的樣式工具類別，讓開發者可以快速組合來建構 UI，而不需要額外撰寫自訂 CSS。 相較於傳統 CSS 框架，Tailwind CSS ......

Posted by kdchang on 2024-11-30

React 與 Next.js 入門教學筆記 | 學習筆記

1. React 簡介React 是由 Facebook（現 Meta）開發的 JavaScript 前端函式庫，主要用於構建 UI 元件。它採用組件化開發方式，並透過 Virtual DOM 提升效能。 2. Next.js 簡介Next.js 是一個基於 React 的框架，提供伺服器端渲染（SSR）、靜態網站生成（SSG）等功能，讓開發者能夠更輕鬆地開發 SEO 友好的應用程式。 3.......

Posted by kdchang on 2024-11-16

Grid 網頁排版技巧入門教學筆記 | 學習筆記

前言在現今網頁設計中，排版的結構與呈現方式對於用戶體驗至關重要。隨著網頁設計的演進，CSS Grid 成為了最強大且靈活的排版工具之一。透過 CSS Grid，你可以輕鬆創建複雜的佈局，並且適應不同設備的需求。本文將介紹 CSS Grid 的基本概念與使用技巧，幫助你迅速掌握如何在網頁設計中使用 Grid。 1. 什麼是 CSS Grid？CSS Grid Layout（簡稱 Grid）是 ......

Posted by kdchang on 2024-11-15

Flexbox 網頁排版技巧入門教學筆記 | 學習筆記

1. Flexbox 簡介Flexbox（Flexible Box Layout）是一種 CSS3 佈局模式，專門用來設計一維的彈性佈局，適用於水平或垂直排列元素，使網頁排版更加靈活且易於維護。 1.1 為何使用 Flexbox？ 彈性調整：元素可根據可用空間動態調整大小。 簡化佈局：減少對 float、inline-block 及 position 依賴。 更好的對齊方式：內建強大的對齊與......

Posted by kdchang on 2024-11-14

Vue i18n 入門教學筆記 | 學習筆記

1. Vue I18n 簡介Vue i18n 是 Vue.js 的國際化（Internationalization）解決方案，可用於管理應用程式的多語系內容。當開發需要支援不同語言的應用時，Vue i18n 提供了一個高效的方式來處理翻譯、數字格式、日期格式等。 1.1 為何使用 Vue I18n？ 動態切換語言：讓使用者能夠即時更改語言。 簡化多語系管理：集中化翻譯內容，方便維護。 格式化......

Posted by kdchang on 2024-11-13

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

前言Cookie 是一種儲存在使用者瀏覽器上的小型文字檔案，用於保存使用者的狀態或資訊。常見用途包含： 紀錄登入狀態：讓使用者在網站上保持登入，不需每次重新輸入帳號。使用者偏好設定：保存使用者選擇的語言、主題等個人化設定。追蹤使用者行為：例如分析網站流量、廣告投放追蹤等。 重點摘要Cookie 依據不同的分類方式，可以分為以下幾種常見種類： 一、依用途分類： 功能性 Cookie（Funct......

Posted by kdchang on 2024-11-01

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

1. WebSocket 簡介WebSocket 是一種全雙工通訊協議，允許伺服器與客戶端建立持久連線，並在兩者之間即時傳輸數據。相較於傳統的 HTTP 請求-回應模式，WebSocket 提供了更低延遲的通訊方式。 1.1 為何選擇 WebSocket？ 即時雙向通訊：適用於聊天應用、即時通知、線上遊戲等。 減少 HTTP 開銷：不需要頻繁發送 HTTP 請求。 降低延遲：資料可以即時傳遞......

Posted by kdchang on 2024-07-10

HTML & CSS 切版入門教學筆記 | 學習筆記

1. HTML 基礎概念HTML（HyperText Markup Language）是網頁的基礎結構，透過標籤（Tag）定義不同的內容與結構。 1.1 常見標籤 <!DOCTYPE html>：宣告 HTML 文件類型。 <html>：HTML 文件的根標籤。 <head>：包含頁面設定、SEO 資訊、CSS 連結等。 <title>：設定網......

Posted by kdchang on 2024-07-01

SASS 語法介紹入門教學筆記 | 學習筆記

什麼是 SASS？SASS（Syntactically Awesome Style Sheets）是一種 CSS 預處理器，旨在提升 CSS 的功能性，讓開發者能夠以更加靈活和高效的方式編寫樣式表。它提供了許多比 CSS 更強大的功能，例如變數、巢狀規則、混合（mixins）、繼承等。SASS 語法有兩種主要形式：一種是較為常見的 SCSS（Sassy CSS），另一種則是 SASS，本文將......

Posted by kdchang on 2024-06-30

軟體工程師和 Web 前後端開發技能樹/學習藍圖（Roadmap）

前端工程Frontend Roadmap / Frontend Beginner Roadmap HTML CSS JavaScript Version Control Systems/Git/Github npm Vue React Angular Tailwind Vitest Cypress TypeScript PWA SA......

Posted by kdchang on 2024-06-22

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

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

FRIENDS