iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 67 瀏覽

鐵人賽 Modern Web DAY 12

重溫 React 官方文件回到最初的起點系列第 12 篇

技術 Day 12 - 回應 Event

前面幾天的內容，都比較偏向靜態的 JSX 生成，接下來的幾個篇章，會開始介紹怎麼在 React 上增加網站的互動性（像是點擊按鈕，選取選單，輸入資料等），讓我們...

lihsuanh ‧ 2025-09-26

0 Like 0 留言 78 瀏覽

鐵人賽 Modern Web DAY 11

重溫 React 官方文件回到最初的起點系列第 11 篇

技術 Day 11 - 把 UI 想成 Tree

樹（Tree）是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構，以及使用 CSS 來完成外觀更動時，都會運用到相對應的...

lihsuanh ‧ 2025-09-25

0 Like 0 留言 76 瀏覽

鐵人賽 Modern Web DAY 10

重溫 React 官方文件回到最初的起點系列第 10 篇

技術 Day 10 - 保持 Component 的 Pure

今天要來介紹一個我們在寫 React Component 很重要的觀念，就是讓 Component 保持純淨（Pure）。前面的文章就有提到在寫 Compone...

lihsuanh ‧ 2025-09-24

0 Like 0 留言 154 瀏覽

鐵人賽 Modern Web DAY 9

不只是登入畫面！一起打造現代化登入系統系列第 9 篇

技術房門與門鎖[ 6 / 6 ]：完整流程 — Axios + JSON Server + Toast

在上一篇，我們加入了「社群登入」，讓使用者不用每次都輸入帳密，就能快速登入。而這一篇會是「房門與門鎖」的最後一個篇章🤩，我們要把整體流程補齊，並加點小巧思，...

阿杰 ‧ 2025-09-23 ‧團隊夢幻公牛

0 Like 0 留言 149 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 8 篇

技術元件化思維：從 jQuery 外掛到現代元件的設計哲學

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 8預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我們...

useKevin('front-end') ‧ 2025-09-24

0 Like 0 留言 101 瀏覽

鐵人賽 Modern Web DAY 8

重溫 React 官方文件回到最初的起點系列第 8 篇

技術 Day 08 - 條件式 Rendering

今天要來介紹也是在寫 React 的時候非常容易用到的功能，那就是條件式渲染（Conditional Rendering）。這邊的渲染（Render），就是在...

lihsuanh ‧ 2025-09-22

2 Like 0 留言 145 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 6 篇

技術 CSS 進化史：從 BEM 到 CSS-in-JS 到 Tailwind 的現代化選擇

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 6預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我們...

useKevin('front-end') ‧ 2025-09-22

0 Like 0 留言 80 瀏覽

鐵人賽 Modern Web DAY 7

重溫 React 官方文件回到最初的起點系列第 7 篇

技術 Day 07 - 傳遞 Prop 到 Comonent - part 2

處理多個 props 傳入繼續補充昨天的內容，昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...

lihsuanh ‧ 2025-09-21

0 Like 0 留言 133 瀏覽

鐵人賽 Modern Web DAY 6

重溫 React 官方文件回到最初的起點系列第 6 篇

技術 Day 06 - 傳遞 Prop 到 Comonent - part 1

昨天的文章介紹了在 JSX 上面使用參數，而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...

lihsuanh ‧ 2025-09-20

0 Like 0 留言 106 瀏覽

鐵人賽 Modern Web DAY 5

重溫 React 官方文件回到最初的起點系列第 5 篇

技術 Day 05 - 在 JSX 中使用 JavaScript 的大括號

在昨天的文章中介紹了 JSX 的基本用法，並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...

lihsuanh ‧ 2025-09-19

0 Like 0 留言 148 瀏覽

鐵人賽 Modern Web DAY 5

不只是登入畫面！一起打造現代化登入系統系列第 5 篇

技術房門與門鎖[ 2 / 6 ]：React 生態系導入 — 表單驗證 & Router 分頁

上一篇我們利用 Tailwind 打造了登入頁的基本樣貌，但光有門面還不夠，若沒有鎖與防護，這扇大門依然不安全😣。本篇我們將引入 React 生態系的函式庫進行...

阿杰 ‧ 2025-09-19 ‧團隊夢幻公牛

0 Like 0 留言 156 瀏覽

鐵人賽 Modern Web DAY 4

重溫 React 官方文件回到最初的起點系列第 4 篇

技術 Day 04 - Writing Markup with JSX

在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式，今天就會來介紹什麼是 JSX，並且他跟一般的 Ht...

lihsuanh ‧ 2025-09-18

0 Like 0 留言 440 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 5 篇

技術前端框架三強鼎立：React vs Vue vs Angular 的深度解析與選擇策略

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 5預計閱讀時間: 16 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我們...

useKevin('front-end') ‧ 2025-09-18

0 Like 0 留言 172 瀏覽

鐵人賽 Modern Web DAY 2

不只是登入畫面！一起打造現代化登入系統系列第 2 篇

技術打造地基 [ 1 / 2 ]：建立 React + TS 開發環境

鐵人賽在今天正式啟程啦🤩！建立新專案，打好基礎是最重要的一步。這也迎來這30天中的第一個主題 — 「打造地基」，這篇內容在網路或歷屆鐵人賽文章中都有非常多資源，...

阿杰 ‧ 2025-09-16 ‧團隊夢幻公牛

0 Like 0 留言 133 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 4 篇

技術 TypeScript：現代前端開發的必修課還是選修課？

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 4預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我們...

useKevin('front-end') ‧ 2025-09-17

0 Like 0 留言 319 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 3 篇

技術套件管理器選擇指南：npm、yarn、pnpm、bun

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 3預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我們...

useKevin('front-end') ‧ 2025-09-17

0 Like 0 留言 350 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 2 篇

技術告別設定地獄：Modern Web 開發環境的正確打開方式

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 2預計閱讀時間: 15 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在 Day 1 中，...

useKevin('front-end') ‧ 2025-09-16

0 Like 1 留言 109 瀏覽

鐵人賽 Modern Web DAY 1

重溫 React 官方文件回到最初的起點系列第 1 篇

技術 Day 01 - 前言

這是連續第三年參加鐵人賽，這次跟以往不同的棒球數據分析不同，選擇了跟網頁開發比較相關的主題。原因是我其實本來的正職就是網頁前端工程師，所以網頁開發是我更熟悉的部...

lihsuanh ‧ 2025-09-15

0 Like 1 留言 390 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 1 篇

技術重新思考前端開發：什麼是真正的 Modern Web？

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 1預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐☆☆ 📖 前言：一個全端工程師的技術反思...

useKevin('front-end') ‧ 2025-09-16

0 Like 0 留言 299 瀏覽

鐵人賽 Modern Web DAY 3

WordPress核心全端開發實戰系列第 3 篇

技術 WordPress主題(Theme)如何開發？

主題開發方式分成以下兩種：1.區塊佈景主題(BlockTheme) 從WordPress5.9版本開始可以使用的一種新型佈景主題。它是由HTML和一個佈景主題設...

ZhuangKai ‧ 2025-08-03

0 Like 1 留言 1156 瀏覽

鐵人賽 Modern Web DAY 30

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 30 篇

技術 Day30 Vue.js 最終：打造貓咪動效廣告牆的最後一哩路

用一點動態魔法讓你的網站更生動大家好！今天是 IT 鐵人賽的第三十天，真不知不覺我們已經走到了終點！這段旅程有很多調皮又溫馨的記憶，而今天我們要終於來做一個...

Sunny.Cat ‧ 2024-10-14

1 Like 1 留言 977 瀏覽

鐵人賽 Modern Web DAY 30

Backend Developer的學習Roadmap 系列第 30 篇

技術 Day 30 web server介紹

今天是30天挑戰的最後一天啦，我們就來介紹一下什麼是web server吧什麼是 Web Server? 「網路伺服器」（web server）可以指軟體、也...

linitachi ‧ 2024-10-14 ‧團隊震驚 2.0

0 Like 0 留言 691 瀏覽

鐵人賽 Modern Web DAY 29

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 29 篇

技術 Day29 Vue.js 動效分類實戰 (20) 蛋糕特輯 - 來過生日！吹氣 + 驚喜動畫，慶祝儀式感拉滿

🎂 生日蛋糕互動秀：吹氣熄蠟燭，還有彩帶灑滿天！🎉 嘿嘿嘿，今天要來和大家分享一個超可愛又好玩的生日蛋糕互動網站這個專案不但有超酷的動畫效果，還能用聲音把蠟燭...

Sunny.Cat ‧ 2024-10-13

0 Like 0 留言 713 瀏覽

鐵人賽 Modern Web DAY 28

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 28 篇

技術 Day 28 Vue.js 動效分類實戰 (19) 星球特輯 - 把宇宙裝進你的網頁

從行星選擇到動畫過渡，揭開星球切換背後的技術秘密在今天的實作中，我們將用 Vue.js 和動畫效果來實現一個超酷的行星選擇器！透過點擊文字，我們可以淡入淡...

Sunny.Cat ‧ 2024-10-12

0 Like 0 留言 337 瀏覽

鐵人賽 Modern Web DAY 29

Backend Developer的學習Roadmap 系列第 29 篇

技術 Day 29 Monitoring

今天我們要來介紹什麼是monitoring，他是一個很重要的概念，對我們的app品質的監控。 What is Monitor? 我們可以通過工具或是腳本或是平台...

linitachi ‧ 2024-10-13 ‧團隊震驚 2.0

0 Like 0 留言 754 瀏覽

鐵人賽 Modern Web DAY 27

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 27 篇

技術 Day 27 Vue.js 動效分類實戰 (18) 整合特輯 - 技術全解析，打造精緻的卡片翻牌遊戲

翻牌效果深入解析，帶你揭開背後的技術秘密！今天，我們將用 Vue.js 和 TypeScript 實現一個充滿趣味的翻牌遊戲，讓你不僅能挑戰自己的記憶力，...

Sunny.Cat ‧ 2024-10-11

0 Like 0 留言 482 瀏覽

鐵人賽 Modern Web DAY 28

Backend Developer的學習Roadmap 系列第 28 篇

技術 Day 28 Migration Strategies

當我們服務了一陣子以後，可能因為種種原因，例如公司政策改變(Docker企業版收費)等，我們需要將某項技術、DB等搬遷到另一個地方，就需要做migration。...

linitachi ‧ 2024-10-12 ‧團隊震驚 2.0

0 Like 0 留言 469 瀏覽

鐵人賽 Modern Web DAY 27

Backend Developer的學習Roadmap 系列第 27 篇

技術 Day 27 Mitigation Strategies - Circuit Breaker

Circuit Breaker是我們生活中很常見的東西，我們的總電源開關就是一個circuit breaker，當它的電流太大時，它就會自動切斷電源，來保護設備...

linitachi ‧ 2024-10-11 ‧團隊震驚 2.0

0 Like 0 留言 419 瀏覽

鐵人賽 Modern Web DAY 25

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 25 篇

技術 Day25 Vue.js 動效分類實戰 (16) 毛玻璃 + 五彩紙屑特輯 - 視覺與腦力的雙重挑戰，終極密碼遊戲

滑順毛玻璃，精緻視覺！玩遊戲還能這麼享受？你能破解這個終極密碼嗎？🌟 使用 Vue.js 與 TypeScript 打造的猜數字遊戲，搭配毛玻璃效果與繽紛...

Sunny.Cat ‧ 2024-10-09

0 Like 0 留言 871 瀏覽

鐵人賽 Modern Web DAY 26

Backend Developer的學習Roadmap 系列第 26 篇

技術 Day 26 Mitigation Strategies - Backpressure

今天要繼續來介紹對server穩定性會有影響的Backpressure。 Backpressure(背壓) 單純看中文翻譯會不知道這是在做什麼的今天下游系統無...

linitachi ‧ 2024-10-10 ‧團隊震驚 2.0

技術 Day 12 - 回應 Event

技術 Day 11 - 把 UI 想成 Tree

技術 Day 10 - 保持 Component 的 Pure

技術 房門與門鎖[ 6 / 6 ]：完整流程 — Axios + JSON Server + Toast

技術 元件化思維：從 jQuery 外掛到現代元件的設計哲學

技術 Day 08 - 條件式 Rendering

技術 CSS 進化史：從 BEM 到 CSS-in-JS 到 Tailwind 的現代化選擇

技術 Day 07 - 傳遞 Prop 到 Comonent - part 2

技術 Day 06 - 傳遞 Prop 到 Comonent - part 1

技術 Day 05 - 在 JSX 中使用 JavaScript 的大括號

技術 房門與門鎖[ 2 / 6 ]：React 生態系導入 — 表單驗證 & Router 分頁

技術 Day 04 - Writing Markup with JSX

技術 前端框架三強鼎立：React vs Vue vs Angular 的深度解析與選擇策略

技術 打造地基 [ 1 / 2 ]：建立 React + TS 開發環境

技術 TypeScript：現代前端開發的必修課還是選修課？

技術 套件管理器選擇指南：npm、yarn、pnpm、bun

技術 告別設定地獄：Modern Web 開發環境的正確打開方式

技術 Day 01 - 前言

技術 重新思考前端開發：什麼是真正的 Modern Web？

技術 WordPress主題(Theme)如何開發？

技術 Day30 Vue.js 最終：打造貓咪動效廣告牆的最後一哩路

技術 Day 30 web server介紹

技術 Day29 Vue.js 動效分類實戰 (20) 蛋糕特輯 - 來過生日！吹氣 + 驚喜動畫，慶祝儀式感拉滿

技術 Day 28 Vue.js 動效分類實戰 (19) 星球特輯 - 把宇宙裝進你的網頁

技術 Day 29 Monitoring

技術 Day 27 Vue.js 動效分類實戰 (18) 整合特輯 - 技術全解析，打造精緻的卡片翻牌遊戲

技術 Day 28 Migration Strategies

技術 Day 27 Mitigation Strategies - Circuit Breaker

技術 Day25 Vue.js 動效分類實戰 (16) 毛玻璃 + 五彩紙屑特輯 - 視覺與腦力的雙重挑戰，終極密碼遊戲

技術 Day 26 Mitigation Strategies - Backpressure

標記使用者

技術房門與門鎖[ 6 / 6 ]：完整流程 — Axios + JSON Server + Toast

技術元件化思維：從 jQuery 外掛到現代元件的設計哲學

技術房門與門鎖[ 2 / 6 ]：React 生態系導入 — 表單驗證 & Router 分頁

技術前端框架三強鼎立：React vs Vue vs Angular 的深度解析與選擇策略

技術打造地基 [ 1 / 2 ]：建立 React + TS 開發環境

技術套件管理器選擇指南：npm、yarn、pnpm、bun

技術告別設定地獄：Modern Web 開發環境的正確打開方式

技術重新思考前端開發：什麼是真正的 Modern Web？