KD's Tech Blog

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

常見 Web Frontend 前端工程師學習資源和工具


學習資源 前端開發大全手冊:The Front End Developer/Engineer Handbook 2024 100 天 CSS 練習挑戰 javascript30 greatfrontend 零基礎一年轉職前端工程師:完整路徑、心得、資源全公開 CSS daisyui TailwindCSS 新手入門:TailwindCSS 與 DaisyUI 的整合指南 重新認識......

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


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

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......

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


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

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


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

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


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

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


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

Vue.js 3 官方入門語法教學筆記 [13] - Slots 插槽 | 學習筆記


Slots 插槽除了透過 Props 傳遞資料外,父元件還可以透過插槽將模板片段傳遞給子元件: <template> <ChildComp> 這是一些插槽內容! </ChildComp></template> 在子元件中,可以使用 <slot> 元素作為插槽來渲染父元件傳遞的內容: <template> &......

Vue.js 3 官方入門語法教學筆記 [12] - Emits 事件傳遞 | 學習筆記


Emits 事件傳遞除了接收 Props 之外,子元件也可以向父元件觸發事件: <script setup>// 宣告要觸發的事件const emit = defineEmits(['response'])// 觸發事件並傳遞參數emit('response', 'hello from child')</scrip......

Vue.js 3 官方入門語法教學筆記 [11] - Props 屬性 | 學習筆記


Props 屬性子元件可以透過 Props 接收來自父元件的輸入。首先,子元件需要宣告它所接收的 Props: <!-- ChildComp.vue --><script setup>const props = defineProps({ msg: String})</script> 注意,defineProps() 是一個編譯時的......