iT邦幫忙

modern web相關文章
共有 526 則文章
鐵人賽 Modern Web DAY 11

技術 Day 11 Authentication - Basic Authentication

今天我們要來介紹很基本的基本授權觀念,一開始我以為它就是standard username and password authentication,其實是不對的...

鐵人賽 Modern Web DAY 20

技術 Day 20: 使用 TypeScript 與 UnoCSS 打造可重用的 UI 元件庫

在現代前端開發中,擁有一個可靠、可重用且類型安全的UI元件庫是提高開發效率和維護性的關鍵。本文將介紹如何使用 TypeScript 和 UnoCSS 來創建一...

鐵人賽 Modern Web DAY 19

技術 Day 19: 在 Pinia 中管理 Vue 3 應用的全局狀態與本地存儲

簡介 在現代 Vue 3 應用中,有效管理全局狀態和本地存儲是構建可靠且高性能應用的關鍵。本文將深入探討如何使用 Pinia 結合多種先進技術來實現全面的狀態...

鐵人賽 Modern Web DAY 18

技術 Day 18: 使用 Vue Router 實現多級嵌套路由與導航守衛

簡介 在現代的單頁應用程序(SPA)中,路由管理是一個核心功能。Vue Router 不僅提供了基本的路由功能,還支持多級嵌套路由和強大的導航守衛系統。今天,...

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

技術 Day 16: 如何使用 Pinia 儲存並管理 API 請求的異步數據

簡介 在現代前端開發中,有效管理 API 請求和異步數據是至關重要的。本文將介紹如何結合 Pinia、@vueuse/core 的 createFetch、Z...

鐵人賽 Modern Web DAY 10

技術 Day 10 Authentication - OAuth2.0

今天我們要來了解OAuth是甚麼東西? OAuth 根據wiki的解釋開放授權(OAuth)是一個開放標準,允許使用者讓第三方應用訪問該使用者在某一網站上儲存的...

鐵人賽 Modern Web DAY 9

技術 Day 9 Authentication - JWT

今天我們要開始朝向Authentication來學習。第一步就先來多了解非常常見的JWT是什麼吧~ JWT(JSON Web Token) JSON Web T...

鐵人賽 Modern Web DAY 8

技術 Day08 Vue.js 簡單迷人的網頁動態效果 - TransitionGroup 篇

使用 Vue <TransitionGroup> 打造出色的卡片動態效果 是否覺得網站上的卡片或列表元素看起來呆板?新增或移除元素時,總是顯得「生...

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

技術 Day 14: Pinia 與 Vue Router 的結合:實現高級應用狀態的導航守衛

介紹 在現代 Vue.js 應用程序中,Pinia 和 Vue Router 的結合使用為我們提供了強大的狀態管理和路由控制能力。今天,我們將深入探討如何將這...

鐵人賽 Modern Web DAY 7

技術 Day07 Vue.js 簡單迷人的網頁動態效果 - 鉤子 Hooks 篇

讓網頁進場更優雅!深入 Vue.js Transition Hooks,搞定背景閃白問題! 大家好!今天要聊的是 Vue.js 的 Transition Ho...

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 8

技術 Day 8 The 12 Factor app (II)

前言 昨天認識了前6種方式,今天要來理解剩下的6種! VII. Port binding Export services via port binding...

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

技術 Day 10: 使用 Vue Router 實現基於角色的路由權限控制

介紹 在開發大型應用時,確保用戶只能訪問他們有權限的頁面是非常重要的。Vue Router 提供了靈活的路由控制能力,可以結合角色權限實現應用的安全性。本文將...

鐵人賽 Modern Web DAY 9

技術 Day 9: 高階組件設計:使用 Zod 和 Vee-Validate 進行動態表單驗證

介紹 在 Vue 應用開發中,表單驗證是一項至關重要的功能,尤其是當表單數據變得複雜且需要高度自定義時。Zod 作為一個強大的 JavaScript 驗證庫,...

鐵人賽 Modern Web DAY 7

技術 Day 7 The 12 Factor app (I)

前言 學會了git的策略後,我們要來學一下如何寫出好的軟體,那麼遵循12 Factor app可以幫助我們寫出品質比較好的軟體,今天我們就來一條一條的了解吧 T...

鐵人賽 Modern Web DAY 6

技術 Day 6 Repository Strategy

除了git strategy,管理repo也有策略可以學習,使用得當對我們的開發部屬上面也會有幫助,那麼我們就來了解一下吧! 總共有三種模式,monolith...

鐵人賽 Modern Web DAY 5

技術 Day5 Git Strategy - Trunk-Based Development

前情提要 昨天我們介紹了gitlab Flow,今天雖然要介紹branch strategy,但他其實不一定需要分支。 Trunk-Based Developm...

鐵人賽 Modern Web DAY 4

技術 Day 4 Git Strategy - Gitlab Flow

前情提要 昨天我們介紹了github Flow,今天要介紹跟他名字很像的gitlab flow。 Gitlab Flow GitLab Flow是GitFlo...

鐵人賽 Modern Web DAY 8

技術 Day 8: 使用 Pinia 實現 Vue 中的複雜狀態管理

介紹 在 Vue 3 中,Composition API 是一種更靈活的狀態管理方式,特別是當應用變得更加複雜時。Pinia 完全支持 Composition...

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

技術 Day 6: 在 UnoCSS 中應用原子 CSS 規則進行靈活的樣式設計

介紹 在現代前端開發中,CSS 工具和框架正在迅速演變。隨著應用的增長和設計的複雜化,如何靈活且高效地設計樣式變得至關重要。UnoCSS 是一個功能強大且靈活...

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

技術 Day 4: Pinia 的基本用法:在 Vue 中管理應用狀態

介紹 在現代 Vue 應用中,狀態管理是一個非常重要的部分,尤其是當應用變得越來越複雜時,如何有效地管理全局狀態變得至關重要。Pinia 作為 Vue 的新一...

鐵人賽 Modern Web DAY 3

技術 Day 3 Git Strategy - Github Flow

前情提要 昨天我們介紹了git Flow,雖然用git flow基本上就可以打天下了~嗎(? 不過我們多了解一點東西對團隊也是好事XD Github Flow...

鐵人賽 Modern Web DAY 1

技術 開場:為什麼選擇 Electron 和 React

在當今的開發環境中,桌面應用程式的開發方式有了巨大的改變,從原生的桌面應用開發到跨平台技術的應用開發,隨著 Modern Web 技術的迅速發展,我們現在已經可...

鐵人賽 Modern Web DAY 1

技術 Day 01:前言、大綱

文章已同步發表於個人部落格,也可以前往觀賞好讀版。 關於主題 嗨,大家好,最後還是想不開來參加 IT 鐵人賽了。 第一篇不免俗讓我廢話一下聊聊選題動機,關於...