iT邦幫忙

前端相關文章
共有 633 則文章
鐵人賽 Modern Web DAY 12

技術 Day 12:被我掃的網頁,可以叫我的工具說它通過

Day 12 · W2 · AI 線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 11

技術 Day 11:我的工具把整個部落格當成訊息日誌

Day 11 · W2 · 無障礙線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 10

技術 Day 10:漸層背景上的白字,公式要吃哪一個顏色

Day 10 · W2 · 無障礙線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Vibe Coding DAY 23

技術 Day 23 | 用Claude製作「知識圖譜」呈現分析結果~

昨天確定了十個模型都能計算當然驗證結果仍需做校正目前是確認已經有了基本的運算內容那我預計還是要先把後面繼續完成的因此今天就要來做一件事把結果變成「一頁看懂、一...

鐵人賽 Modern Web DAY 9

技術 Day 09:同一條規則我寫了兩次,因為 lint 跟瀏覽器看到的不是同一個東西

Day 09 · W2 · AI 線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 8

技術 Day 08:Python 一行都不是我寫的,那我到底在做什麼

Day 08 · W2 · AI 線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 7

技術 Day 07:六個魔術數字都是我拍板的,所以我把程式碼送出去

Day 07 · W1 · AI 線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 6

技術 Day 06:規範換版對齊 WCAG 2.2,我以為要補 109 條,實際只有 7 條

Day 06 · W1 · 無障礙線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 5

技術 Day 05:axe-core、pa11y、Lighthouse 都跑過了,為什麼還要再蓋一把

Day 05 · W1 · 無障礙線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 4

技術 Day 04:20 秒裝好,然後它抓到自己

Day 04 · W1 · 無障礙線 · 難度 ★☆☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 3

技術 Day 03:一個晚上,AAA 自評覆蓋率從 12/20 跑到 20/20

Day 03 · W1 · AI 線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 2

技術 Day 02:我們的工具說「全綠」,人工審查回來 9 條

Day 02 · W1 · 無障礙線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

鐵人賽 Modern Web DAY 1

技術 Day 01:前端不寫 Python,照樣 ship 一把網頁無障礙 CLI

Day 01 · W1 · AI 線 + 無障礙線 · 難度 ★☆☆☆☆ 這 30 天系列由 AI 協作撰寫 內容、技術判斷、程式碼,皆由 light-des...

鐵人賽 JavaScript DAY 5

技術 Day 5|先決定座標系,再寫任何一行

模組二|工程底座與可驗收的 AI(Day 5–9) 昨天把範圍畫完了。今天進模組二,講開工那一刻第一個真正無法反悔的決定。 不是選 PixiJS,不是選 V...

鐵人賽 JavaScript DAY 1

技術 Day 1|一條線、一隻狗、十秒鐘:我要用 30 天講什麼

模組一|立案與選型(Day 1–4) 先給結果,再講過程。 遊戲在這裡,開了就能玩,不用註冊:https://save-the-dog-web.vercel...

鐵人賽 Modern Web DAY 1

技術 Day 1|為什麼 Vue 前端要認識 Flutter Web?系列開篇與學習地圖

模組一|心智模型轉換(Day 1–5) 我是寫了十年以上 Vue 的前端工程師,而且先自首:我不信 Flutter Web。在台灣業界它不流行,我環顧四周也...

技術 2026 年前端工程師的生存戰:當程式碼不再是瓶頸,什麼才是你的核心價值?

前幾年大家還在爭論,AI 到底能不能寫程式。現在這題差不多結束了。它不只會寫,還寫得很快。快到很多前端工程師開始有點不舒服,因為以前最值錢的那段能力,忽然沒那麼...

技術 前端工程的下一個十年:為何你需要開始為 Agent 設計介面

大家都在說 AI 遲早會把前端的飯碗端走。看著社群上每天冒出來的一鍵生成 UI 工具,這種焦慮很真實。但如果你有留意最近幾週的技術底層走向,會發現前端的戰場其實...

技術 功能設計: 搜尋、排序、分頁,click觸發時3功能的交互作用

搜尋 - filter(篩選條件) 排序 - sort 分頁 - pagination 這3個功能,觸發其中之一,另外2個要也有相應的行為。 cli...

鐵人賽 Modern Web DAY 1

技術 什麼 !? 登入系統也值得花 30 天來做?

登入功能幾乎是每個網站必備的核心,但你真的了解它是怎麼運作的嗎? 哈囉! 我是正在經歷 "畢業即失業" 的求職者🤣,目前正朝著競爭激烈的前端...

技術 Road To Full-Stack:前端轉全端的 Instagram 挑戰 - Day 1

前言 嗨,我是前端工程師 Jimmy,於 22 年初轉職,轉職後沒多久 GitHub Copilot 發布,在開發領域掀起不小的話題,同年底 OpenAI 發布...

鐵人賽 Vue.js DAY 6

技術 在 Vue 過氣前要學的第六件事 - 響應式到底為什麼那麼重要

前言 由於 Vue 是一個資料驅動畫面更新的框架,響應式系統是最基礎也是最重要的一環。 因此前面講解了幾個核心 API,而這個篇章中就要歸納前面幾篇重點並講解響...

鐵人賽 Vue.js DAY 5

技術 在 Vue 過氣前要學的第五件事 - 主動還是被動

前言 在上一篇 在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?我們講了 ref 跟 reactive 之間的差異,這篇就接著說入門會...

技術 vue的 Teleport

在 Vue 中,Teleport是一個特殊的內建元件,從Vue 3開始引入。元件的邏輯關聯性。 這對於一些需要特定 DOM 結構的功能(如模態框、通知、工具提示...

技術 JavaScript 深拷貝(Deep Copy)

在 JavaScript 中,深拷貝(Deep Copy)是一種創建對象完整副本的方式,其中所有的嵌套對象或數組也會被拷貝,而不是共享原始對象的引用。以下是一些...

技術 JavaScript 的apply 和 call

在 JavaScript 中,apply 和 call 是函數的兩個方法,用於顯式設置函數的 this 值,並傳遞參數來執行函數。它們的主要區別是傳遞參數的方式...

技術 JavaScript 的閉包

在 JavaScript 中,閉包(Closure) 是指一個函數能夠記住並訪問它的詞法作用域(Lexical Scope),即使這個函數在其作用域之外被執行。...

技術 JavaScript 的Symbol

在 JavaScript 中,Symbol 是一種原始數據類型,適合用於創建唯一的標識符。它主要用於避免命名衝突、保護對象的屬性,以及實現元編程。 適用情況...

技術 JavaScript 的prototype

在 JavaScript 中,prototype 適合用於 需要創建多個具有相同功能的對象 的情況,特別是在需要共享方法或屬性時。這樣可以避免每次創建新對象時都...

技術 JavaScript 的new Map()

在 JavaScript 中,new Map() 是一個用於存儲鍵值對的資料結構。它與普通的 JavaScript 物件({})類似,但提供了更多功能和更靈活的...