KD's Tech Blog

軟體工程和產品專案管理現場觀察：關於軟體開發/程式設計/工程思維的技術部落格

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

前言LESS（Leaner Style Sheets）是一種 CSS 預處理器，它在 CSS 的基礎上加入了變數、嵌套、混合（Mixins）、函式等功能，使樣式表的管理更加靈活且易於維護。LESS 文件最終會被編譯成標準的 CSS，並可在瀏覽器或 Node.js 環境中使用。 1. 安裝與使用LESS 可以透過以下幾種方式使用： 1.1 透過 LESS.js 在瀏覽器中運行這種方式適合......

Posted by kdchang on 2023-05-31

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

前言在使用 Vue 進行開發時，常常會遇到「資料已經更新，但畫面上的 DOM 尚未更新完成」的情況。這是因為 Vue 採用了 **非同步更新策略 (asynchronous update strategy)**，它會先收集多次資料變動，再一次性地進行 DOM 更新，以提升效能。但這也意味著，如果我們想在資料變更後立即操作更新後的 DOM，往往會發現 DOM 還停留在舊的狀態。 為了解決這個問......

Posted by kdchang on 2023-05-31

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

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

Posted by kdchang on 2023-03-22

30 Days of JavaScript 入門教學筆記 | 學習筆記

問題研討一、Closures 二、Basic Array Transformations 三、Function Transformations 四、Promises and Time 五、JSON 六、Classes ...

Posted by kdchang on 2023-02-08

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

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

Posted by kdchang on 2022-12-13

Responsive Design 響應式設計入門教學筆記 | 學習筆記

Responsive Design 響應式設計入門教學筆記一、什麼是響應式設計響應式設計 (Responsive Design) 是一種網頁設計方法，使網頁能夠根據不同裝置的螢幕尺寸與解析度，自動調整版面配置，以提供最佳的使用體驗。 二、響應式設計的重要概念1. 視圖 (Viewport)<meta name="viewport" content="wid......

Posted by kdchang on 2022-06-09

CSS 權重（Specificity）入門教學筆記 | 學習筆記

1. 什麼是 CSS 權重？CSS 權重（Specificity）是指當多個選擇器同時作用於同一個元素時，瀏覽器決定應用哪條 CSS 規則的優先級機制。不同選擇器具有不同的權重，權重高的樣式會覆蓋權重低的樣式。 2. CSS 權重的計算方式CSS 權重由四個部分組成，從高到低分別是： 行內樣式（Inline Styles） ID 選擇器（ID Selectors） 類別、偽類與屬......

Posted by kdchang on 2021-12-15

JavaScript Hoisting 入門教學筆記 | 學習筆記

1. 什麼是 Hoisting？Hoisting（提升）是 JavaScript 中的一種行為，它允許變數與函式在執行時被提升到作用域的頂部，這表示你可以在宣告之前使用它們，而不會發生錯誤。「建立期」（Creation Phase）和「執行期」（Execution Phase），建立期主要為定義變數名稱，執行期為執行程式和指定賦值。 在 JavaScript 中，Hoisting 影響兩種類......

Posted by kdchang on 2021-12-15

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

1. 什麼是 CSS？CSS（Cascading Style Sheets，層疊樣式表）是一種用來美化 HTML 頁面的樣式語言。透過 CSS，可以設定字體、顏色、間距、佈局等，讓網頁更具吸引力和可讀性。 CSS 透過選擇器（Selectors）來指定 HTML 元素，並套用樣式規則（Rules）。 2. CSS 的使用方式有三種方式可以在 HTML 文件中使用 CSS： 2.......

Posted by kdchang on 2021-12-14

CSS Stacking Context 入門教學筆記 | 學習筆記

前言在網頁開發中，當多個 HTML 元素重疊時，決定它們顯示順序的機制稱為 Stacking Context（堆疊上下文）。這是一個重要概念，影響 z-index 的行為，並決定元素在畫面上的排列順序。 1. 什麼是 Stacking ContextStacking Context 是一個獨立的層級空間，內部的元素會依照特定規則進行排序，但不會影響外部的層級。當一個元素建立了 Stacki......

Posted by kdchang on 2021-12-14

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

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

FRIENDS