iT邦幫忙

modern web相關文章
共有 526 則文章
鐵人賽 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從哪裡開始建立依賴圖並產...

鐵人賽 Modern Web DAY 30

技術 30天React練功坊-攻克常見實務/面試問題 Day30: Memory Cards Game(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個基本的井字遊戲,基本上除了css的部分有些困難之外,基本的邏輯實踐其實相當的單純,今天我們反...

技術 配置物件的屬性

「配置物件」的屬性通常是根據特定應用程式、工具或庫的需求來定義的。每個常見配置物件可以包含不同的屬性,具體取決於其用途。然而,通常配置物件包括以下一些屬性:...

技術 配置物件是甚麼?

「配置物件」不是一個通用的程式設計術語,但可能是指配置物件(Configuration Object),通常在軟體開發中用於配置和設定參數的 JavaScrip...

技術 使用 Plugins

是一個比較廣泛的概念,可以概括一些不同的軟體和應用程式。插件通常是用於擴展或增強軟體功能的模組或元件。以下是可能涉及到插件的情境以及如何使用它們的一般步驟:...

鐵人賽 Modern Web DAY 29

技術 30天React練功坊-攻克常見實務/面試問題 Day29: Simple Tic-Tac-Toe game(interview question)

tags: ItIron2023 react 前言 我們昨天處理了一個實務上常見的面試問題,要你根據某份提供的api文件以及一些指示完成題目的要求,今天我們再來...

技術 為甚麼要選擇用 Webpack?

Webpack 是一個強大的前端打包工具,它的主要目的是將多個前端資源(如JavaScript、CSS、圖片等)整合在一起,以優化性能、管理依賴關係,並提供更好...

技術 如何使用 Loaders?

建立一個新的專案資料夾並初始化 npm 專案: 安裝 建立一個簡單的 JavaScript 檔案(例如index.js) 建立一個 Babel...

技術 介紹 Loaders

babel-loader:用於將新版本的JavaScript程式碼(如ES6、ES7)轉換為較舊的版本,以確保瀏覽器的相容性。 style-loader...

鐵人賽 Modern Web DAY 28

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

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

技術 使用 CLI 操作 Webpack

建立一個新的專案資料夾,並初始化 npm 專案: 2.** 安裝 Webpack 和 Webpack CLI 作為開發相依性:** 建立一個簡單的...

技術 安裝 Webpack

以下為安裝步驟: 1.確保你已經安裝了 Node.js 和 npm。如果你尚未安裝 Node.js,請前往 Node.js 官方網站 下載和安裝最新的版本。 2...

鐵人賽 Modern Web DAY 27

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

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

技術 webpack 實作(1)

實作過程: 初始化項目:i.建立一個新專案資料夾,並在終端機中導航到該資料夾。ii,執行以下命令來初始化一個新的npm專案: 這將建立一個package.j...