KD's Tech Blog

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

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

常見軟體工程師/網頁開發工具和學習資源整理

以下彙整常見 Web 網頁開發工具和資源整理： VS Code 套件 emmet Live Server Material Icon Theme Babel JavaScript Prettier CodeSnap JavaScript code snippets Peacock TODO Highlight Code Runner Live Share Color Highlight C......

Posted by kdchang on 2024-03-22

常見 Web Frontend 前端工程師面試準備題目清單

前端工程面試準備清單 掌握基礎知識：在開始解決複雜問題之前，您需要確保對前端開發的基礎知識有扎實的理解，包括 HTML、CSS 和 JavaScript，以及它們如何協作來創建響應式和互動式的網頁。如果您認為自己在這些主題上仍需學習，請參考前端學習路線圖。 練習寫程式：通過小型專案或在 LeetCode 和 HackerRank 等平台上解決問題，來提升您的前端寫程式技能。專注於與前端開發......

Posted by kdchang on 2024-01-22

HTTP/2 介紹與入門教學筆記 | 學習筆記

1. HTTP/2 簡介HTTP/2 是 HTTP/1.1 的後繼版本，由 IETF HTTP 工作小組開發，並於 2015 年 5 月成為正式標準（RFC 7540）。HTTP/2 的主要目標是提高 Web 的性能，減少延遲，並優化資源的傳輸方式。 2. HTTP/2 的核心特性2.1 二進制分幀層（Binary Framing Layer......

Posted by kdchang on 2023-12-16

常見軟體工程師/Web 開發技術面試及學習資源整理

以下彙整常見軟體工程師技術面試及學習資源整理： 程式解題網站 coderbyte codility hackerrank leetcode codewars testgorilla WeHelp Coding 程式解題系統 線上程式學習網站 scrimba codecademy pluralsight teamtreehouse udemy freecodecamp MDN Curricu......

Posted by kdchang on 2023-03-22

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

前言CSS transition 屬性允許元素在狀態變化時產生平滑的動畫效果，使 UI 更加流暢和自然。這項技術通常應用於按鈕、圖片、卡片等 UI 元素的互動效果，如懸停、點擊或狀態變更。 1. transition 基礎概念CSS transition 屬性用於定義當元素的某些 CSS 屬性發生變化時，該變化應如何逐漸呈現，而非立即改變。基本語法如下： transition: proper......

Posted by kdchang on 2022-12-13

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

前言CSS transform 屬性是一個強大的工具，可以用來對 HTML 元素進行旋轉、縮放、移動及傾斜等變換，而不會影響其他元素的佈局。這使得 transform 非常適合用來建立動畫效果、視覺調整以及 UI 微調。 1. transform 基礎概念transform 屬性可以接受一個或多個變換函數，使元素在不影響文檔流的情況下進行變換。這些變換主要包含： 平移 (translate......

Posted by kdchang on 2021-12-13

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

1. 什麼是 HTML？HTML（HyperText Markup Language，超文本標記語言）是建立網頁的標準語言。它用標籤（tags）來結構化內容，讓瀏覽器能夠解析並顯示網頁。HTML 主要負責網頁的結構，而樣式與行為則交由 CSS 和 JavaScript 負責。 2. HTML 文件基本結構一個基本的 HTML 文件包含以下部分： <!DOCTYPE html>......

Posted by kdchang on 2021-12-13

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

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

FRIENDS