iT邦幫忙

modern web相關文章
共有 529 則文章
鐵人賽 Modern Web DAY 16

技術 30天React練功坊-攻克常見實務/面試問題 Day16: React.memo not working corretly with function as props

tags: ItIron2023 react 前言 真是沒完沒了是吧!昨天我們繼續看了一個不必要重複渲染的例子,了解到為什麼切context需要謹慎並再次的請出...

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

技術 30天React練功坊-攻克常見實務/面試問題 Day27: Add emojis to the page onclick PartII(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個還算有趣的問題,利用state控制整個emoji陣列並決定每個組件要在螢幕的哪處渲染,今天我...

鐵人賽 Modern Web DAY 7

技術 Day 7: 深入 Vue 組件間的通訊:使用 Props 和 Emit 傳遞數據與事件

介紹 在 Vue 應用中,父子組件之間的數據傳遞和事件通訊是開發中最常見的操作。Vue 提供了 props 和 emit 機制,用於解決父組件向子組件傳遞數據...

鐵人賽 Modern Web DAY 17

技術 Day 17: Vee-Validate 和 Zod 結合處理複雜的表單場景 - 進階特性深度探索

簡介 在現代 Web 應用程序中,處理複雜的表單場景需要強大的驗證工具和類型系統。本文將深入探討如何結合 Vee-Validate 和 Zod 的進階特性,以...

鐵人賽 Modern Web DAY 28

技術 30天React練功坊-攻克常見實務/面試問題 Day28: Fetch all synonyms for given word(interview question)

tags: ItIron2023 react 前言 昨天我們完成了add emoji onclick的問題,額外用了幾個state以及timer去達到題目的要求...

鐵人賽 Modern Web DAY 22

技術 Day22 Vue.js 動效分類實戰 (13) 極致表單特輯 - 掌控每次提交的反饋魔力

高效的表單處理與動效反饋設計 你是否曾經在填寫表單時,感覺整個過程有些枯燥乏味?或是點擊「提交」後遲遲沒有回應,讓人懷疑到底有沒有成功送出? 其實,表單不僅...

鐵人賽 Modern Web DAY 8

技術 30天React練功坊-攻克常見實務/面試問題 Day8: Using index as key might be a huge disaster

tags: ItIron2023 react 前言 我們昨天用了一個很簡單的例子展示useEffect可能造成的memory leak issue,今天我們來看...

鐵人賽 Modern Web DAY 15

技術 30天React練功坊-攻克常見實務/面試問題 Day15: Unintended Re-renders: The Pitfalls of useContext

tags: ItIron2023 react 前言 我們前兩天將重點放在React.memo使用上的一些情境與錯誤,接著我們將繼續探討其他造成不必要重複渲染的情...

鐵人賽 Modern Web DAY 18

技術 30天React練功坊-攻克常見實務/面試問題 Day18:UI flicker issue with useEffect

tags: ItIron2023 react 前言 昨天我們看了一個誤用useEffect的例子,了解到其實有些東西你不需要靠useEffect也能達成,今天我...

鐵人賽 Modern Web DAY 17

技術 Day17 Vue.js 動效分類實戰 (9) 萌兔吹泡泡特輯 - 顛覆等待的互動視覺體驗

用兔子吹泡泡動畫驚豔你的訪客,刷新等待體驗 你是否曾經因為網站載入速度太慢而感到焦慮? 在現代網站開發中,等待通常是訪客戶最不喜歡的環節。如何讓使用者在等待...

鐵人賽 Modern Web DAY 26

技術 30天React練功坊-攻克常見實務/面試問題 Day26: Add emojis to the page onclick(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個簡單的pagination題目,大致上了解一般實務是如何處理這類的情況,包含loading...

技術 監聽 Watch

Webpack 是一個用於建立前端應用程式的工具,它允許您將多個JavaScript 模組、CSS 檔案和其他資源壓縮成一個或多個最終的捆綁檔案。Webpack...

鐵人賽 Modern Web DAY 12

技術 Day 12: 在 UnoCSS 中設計響應式布局:從手機到桌面應用

介紹 響應式設計是現代 Web 開發中的關鍵能力,從手機到桌面應用,我們需要靈活地適應各種屏幕尺寸。UnoCSS 提供的 attributify 模式讓我們可...

鐵人賽 Modern Web DAY 14

技術 30天React練功坊-攻克常見實務/面試問題 Day14: Optimization with React.memo the wrong way

tags: ItIron2023 react 前言 我們昨天看了一個不必要re-render造成的效能問題並利用React.memo來解決,到這邊一切相安無事,...

鐵人賽 JavaScript DAY 1

技術 前言:TypeScript 這麼好,不推嗎?

前言:TypeScript 這麼好,不推嗎? 歡迎來到 30 天的 TypeScript 挑戰之旅!如果你曾經在開發中因為 TypeScript 錯誤而頭疼,...

技術 Webpack 的介紹

Webpack是一個強大的框架建立工具,用於備份和管理Web應用程式的資源。它的主要目標是多種不同類型的文件,如JavaScript、CSS、HTML、Imag...

鐵人賽 Modern Web DAY 1

技術 Day 1:關於 GraphQL

起源 GraphQL 是一種 API 查詢語言,Facebook 在 2012 年創造出來,並在 2015 年開源,然後在 2019 年 Facebook 與其...

鐵人賽 Modern Web DAY 20

技術 30天React練功坊-攻克常見實務/面試問題 Day20: useState with complex form

tags: ItIron2023 react 前言 我們昨天看了一個有趣的useState問題,了解到initialValue的一些限制,今天我們會再看一個與s...

鐵人賽 Modern Web DAY 14

技術 [Day-14] Flask登入功能(6)-管理者界面

前言 前幾天我們已經完成登入、註冊等功能,然而一般系統都會有管理者,今天就讓我們實現如何簡易的創建管理者,此管理者可以查看目前已註冊的user,並選擇要不要刪除...

鐵人賽 Modern Web DAY 15

技術 Day 15: 使用 TypeScript 和 Zod 進行後端 API 數據驗證

本文簡介 在現代 Web 應用開發中,確保數據的完整性和類型安全是至關重要的。今天,我們將探討如何使用 TypeScript 和 Zod 來進行後端 API...

鐵人賽 Modern Web DAY 5

技術 Day 5: Vue Router 與 TypeScript:型別安全的路由管理

介紹 在構建單頁應用(SPA)時,路由管理是一個至關重要的部分。Vue Router 是 Vue.js 官方提供的路由解決方案,與 Vue 3 的 Compo...

技術 新技術的崛起 1

「現代Web」是一個廣泛的概念,指隨著時間的推移,Web開發領域不斷地堅持出新技術和趨勢。這些新技術和趨勢推動著Web應用程式的發展,提供更好的效能、使用者體驗...

鐵人賽 Modern Web DAY 13

技術 Day 13: 使用 @vueuse/core 和自定義 Composables 提升 Vue 3 開發效率

介紹 在 Vue 3 的世界裡,Composition API 為我們帶來了更靈活、更強大的組件編寫方式。而 @vueuse/core 和自定義 Compos...

鐵人賽 Modern Web DAY 13

技術 Day13 Vue.js 動效分類實戰 (5) 視差滾動特輯 - 用 GSAP 編織日夜交替的視覺詩歌

讓畫面隨時光流動,用動效打造日與夜的邂逅! 哈囉大家!今天我們要來點浪漫的~🌙☀️當我們說到網頁動效,你是不是也曾幻想過,能不能讓畫面隨著時間的流動變換出日...

鐵人賽 Modern Web DAY 11

技術 Day 11: TypeScript 與 Pinia:如何定義強型別的 Store

介紹 在 Vue 3 中,Pinia 作為狀態管理庫,提供了靈活而強大的工具來管理應用的狀態。為了進一步提高 Pinia 的使用體驗,了解其底層機制和相關概念...

鐵人賽 Modern Web

技術 前端安全實踐:XSS、CSRF 到 CSP 的現代化防護策略

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

鐵人賽 Modern Web DAY 18

技術 Day18 Vue.js 動效分類實戰 (10) 旋轉特輯 - 打造讓你愛不釋手的互動小遊戲!

旋轉特效大解析:創造令人上癮的互動遊戲體驗 嘿!你有沒有注意過那些可愛的按鈕或圖標,在網頁上輕輕一碰就會旋轉起來,簡單卻讓人忍不住再多點幾次?其實這就是網頁...

鐵人賽 Modern Web DAY 0

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

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

鐵人賽 Modern Web DAY 5

技術 Day 5:使用 Strawberry 學習 GraphQL 型別 – 2

接著繼續編輯 User Type 進一步增加欄位與學習 Strawberry 的 GraphQL 型態。 @strawberry.type class User...