iT邦幫忙

modern web相關文章
共有 509 則文章
鐵人賽 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 鐵人賽了。 第一篇不免俗讓我廢話一下聊聊選題動機,關於...

鐵人賽 Modern Web DAY 2

技術 Day 2 Git Strategy - Git Flow

前情提要 昨天我們介紹了git的一些常用指令,學會了之後我們就可以研究更多的東西。 Git Strategy 為什麼我們會需要git strategy呢?身為一...

鐵人賽 Modern Web DAY 3

技術 Day 3: Vee-Validate 和 TypeScript 實現表單驗證的最佳實踐

介紹 表單驗證是 Web 開發中不可或缺的一部分。通過表單驗證,我們能保證用戶提交的數據正確無誤。今天我們將介紹如何使用 Vee-Validate 和 Zod...

鐵人賽 Modern Web DAY 2

技術 Day 2: Zod 與 TypeScript 的結合:如何進行數據驗證與解析

介紹 在前端開發中,數據驗證是一個不可忽視的重要步驟,特別是當你處理表單輸入或 API 響應數據時。雖然 TypeScript 提供了靜態型別檢查功能,確保代...

鐵人賽 Modern Web DAY 1

技術 Day 1 前言 + Git流程

今年是第三次參加IT Home鐵人賽,身為一個後端工程師,希望藉由這次的鐵人賽來整理並且分享學到的知識。主要會以這篇Backend Developer按讚數超多...

鐵人賽 Modern Web DAY 1

技術 Day 1: 使用 Vite 和 UnoCSS 快速搭建 Vue 3 + TypeScript 開發環境

前言 在現代前端開發中,效率與性能變得越來越重要。Vue 3 的 Composition API、TypeScript 的強型別系統,以及 Vite 的超快打...

鐵人賽 JavaScript DAY 1

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

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

鐵人賽 Modern Web DAY 1

技術 Day01 Vue.js 前言:從後端到前端的蛻變,帶你進入 Vue.js 互動世界

前言:從後端到前端,一起體驗互動設計的樂趣 嗨,大家好!歡迎來到這次的 IT 鐵人賽專題。我是一名專注於 PHP 和 Python 的後端工程師,這次會和大家...

技術 Caco的奇幻之旅2-Web Worker即時渲染效能實測(上)

前言 大家好,這裡是Caco的不嚴謹Web Worker效能測試,繼上次的Loka Veterra後,我為粒子加入了簡單的物理引擎,每個粒子都會被中心點的重力所...

技術 Source Map 的原理

來源映射的原理是建立原始程式碼和轉換後的程式碼之間的映射關係,以便在開發和調試過程中能夠追蹤到轉換後的程式碼到原始程式碼的對應關係。這允許開發人員在調試壓縮、轉...

技術 Source Map 的功用

來源映射(Source Map)是一種在 Web 開發中廣泛使用的工具,它們用於將轉換後的程式碼(例如,經過壓縮、混淆或編譯的 JavaScript、CSS 或...

技術 監聽 Watch

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

技術 Loaders 的順序

在Webpack中,載入器(Loaders)的順序非常重要,因為它們按照配置的順序依次處理模組。這可以影響最終生成的代碼或資源。載入器的順序是從右往左(或從下到...

技術 模組的解析

Webpack 中的模組解析規則和判定是透過設定檔中的module屬性和resolve屬性來定義的。這些規則和判定告訴 Webpack 如何處理不同類型的模組和...

技術 模組的規則

Webpack 中的模組解析規則和判定是透過設定檔中的module屬性和resolve屬性來定義的。這些規則和判定告訴 Webpack 如何處理不同類型的模組和...

技術 解析 Resolve

**Webpack 中的解析(Resolution)是指 Webpack 在編譯和壓縮過程中,如何找到和解析模組的過程。Webpack 需要知道在你的專案中哪些...

技術 輸出 Output

Webpack是一個JavaScript模塊打包工具,用於將JavaScript文件及其相關資源(如CSS、圖像等)捆綁在一起,以優化網頁應用程序的性能和可維護...

技術 入口 Entry

Webpack是一個用於建立現代JavaScript應用程式的工具,它透過入口(entry)來指定應用程式的起點。入口告訴Webpack從哪裡開始建立依賴圖並產...