Network on 技術、遊戲、生活通俗易懂的解釋

React 19 新功能：開發人員需要了解的內容

Wed, 08 Jul 2026 10:00:00 +0900

React 19 發生了什麼變化

React 19 不是一個小更新，而是一個範式轉移。穩定的伺服器元件、新的鉤子和 React 編譯器從根本上改變了開發人員編寫應用程式的方式。

穩定的伺服器元件

React 伺服器元件 (RSC) 現已投入生產。透過在伺服器上渲染並將 HTML 發送到客戶端，它們可以顯著減小包的大小。

// app/page.jsx — Server Component (default)
export default async function Home() {
 const posts = await db.query('SELECT * FROM posts');
 return (
 <ul>
 {posts.map(post => (
 <li key={post.id}>{post.title}</li>
 ))}
 </ul>
 );
}

使用 useState 或 useEffect 的元件必須在頂部宣告「use client」。

use() 鉤子

最值得注意的新功能是 use() 鉤子，它允許您直接在元件內部解析 Promise。

function Comments({ commentsPromise }) {
 const comments = use(commentsPromise);
 return comments.map(c => <p key={c.id}>{c.text}</p>);
}

與傳統的鉤子不同，use() 在條件語句和迴圈內部工作。

表單的伺服器操作

伺服器操作讓您無需編寫客戶端 JavaScript 即可處理表單提交。

Web Performance Monitoring 工具 Compared 2026

Wed, 08 Jul 2026 10:00:00 +0900

Why Lighthouse Is Not Enough

Lighthouse is an excellent diagnostic tool, but it only measures lab data, not real user experience. Standard practice in 2026 combines lab measurements with Real User Monitoring (RUM).

1. Web Vitals — Chrome UX Report and CrUX API

Google’s Chrome UX Report aggregates field data from real Chrome users. You can query it via API to analyze both your own and competitors’ sites.

const response = await fetch(
 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_KEY',
 {
 method: 'POST',
 body: JSON.stringify({
 origin: 'https://example.com',
 metrics: ['largest_contentful_paint', 'cumulative_layout_shift']
 })
 }
);

2. Sentry Performance

Well-known for error monitoring, Sentry also offers robust performance tracing. It captures transactions end-to-end, from frontend to backend, with automatic instrumentation for React and Next.js. Setup takes minutes.

Google I/O 2025：整合網路技術與人工智慧

Mon, 05 May 2025 00:00:00 +0900

介紹

在 Google 年度開發者大會 Google I/O 2025 上，重大公告強調了人工智慧和網路平台的融合。

對於 Web 開發人員來說，關注點已經擴展到雲端託管模型端點之外。業界正在向設備上人工智慧執行轉變，允許開發人員直接在客戶端瀏覽器內運行輕量級法學碩士。

本文回顧了 Google I/O 2025 中以 Web 為中心的關鍵 AI 公告，並解釋了它們將如何影響前端應用程式架構。

1. Chrome 中的裝置端 AI：標準化內建 AI API

Google I/O 2025 上最受關注的網路更新是 Chrome 原生 內建 AI API 的發布，它直接在瀏覽器中運行 Google 的輕量級 Gemini Nano 模型。

傳統上，向 Web 應用程式添加人工智慧功能（例如摘要或翻譯）需要在伺服器端託管昂貴的模型或透過安全代理伺服器路由用戶端呼叫以保護 API 金鑰。

Chrome 內建的人工智慧透過將處理卸載到用戶的本地硬體、在本地免費運行任務來改變這一點。

使用提示 API

async function askLocalAI(promptText) {
 // Verify if the browser supports the built-in Gemini Nano model
 const capabilities = await ai.assistant.capabilities();

 if (capabilities.available === "no") {
 console.error("On-device AI is not supported in this browser environment.");
 return;
 }

 // Spin up a new AI session thread
 const session = await ai.assistant.create();

 // Prompt the local model and retrieve the response
 const result = await session.prompt(promptText);

 // Clean up session resources
 session.destroy();

 return result;
}

// Usage Example
askLocalAI("Identify bugs in the following snippet and summarize corrections...")
 .then(console.log);

核心優勢

**低延遲和離線支援：**無需網路往返，回應即可快速解決，應用程式甚至可以在離線或飛行模式下運行。
隱私控制： 資料不會離開使用者的計算機，使這種方法符合嚴格的隱私法規。
無 API 開銷： 消除託管成本、令牌使用定價和速率限制問題。

2.Gemini API 升級：結構化 JSON 輸出

谷歌的雲端託管Gemini API也進行了升級。最新的 Gemini 1.5 Pro 和 Flash 型號現在透過 Google AI Studio 控制台支援開箱即用的結構化 JSON 輸出。

Web開發中XSS的防禦原則

Tue, 25 Feb 2025 00:00:00 +0900

介紹

在網路安全中，跨站腳本 (XSS) 是最古老、最持久的漏洞之一。

如果惡意腳本在受害者的瀏覽器上執行，它們可能會破壞整個會話、竊取會話令牌 (cookie)、劫持帳戶或動態變更頁面內容以取得敏感憑證。

本文回顧了消除現代 Web 應用程式中 XSS 漏洞所需的基本防禦原則。我們將探索上下文轉義、清理、安全 DOM 操作和防禦深度機制。

1.XSS的三種分類

根據惡意負載的傳輸方式，XSS 漏洞大致分為三類：

反射的XSS： 當惡意負載嵌入到連結或表單提交時會發生。當使用者點擊連結時，伺服器會將不受信任的輸入「反射」迴響應 HTML，而無需進行適當的轉義。
儲存（持久）XSS： 最危險的形式。有效負載儲存在伺服器的資料庫中（例如，論壇貼文、使用者簡介）並傳遞給任何存取該頁面的後續使用者。
基於 DOM 的 XSS： 與反射或儲存 XSS 不同，這完全發生在客戶端 JavaScript 中。此腳本處理不受信任的來源資料（例如 location.hash 或查詢參數）並使用不安全的 API 將其直接寫入 DOM。

2. 原則 1：上下文感知 HTML 轉義

XSS 的根本解決方法是在渲染不受信任的動態資料之前對其進行轉義。轉義將 HTML 語法中具有特殊意義的字元文字轉換為各自的惰性 HTML 實體（字元引用）。

基本字元映射表

& -> &
< -> <
> -> >
" -> "
' -> ' （或 '）

警告：上下文很重要

轉義規則會根據資料放置的「位置」而變化。

放置在元素標記內的文字需要標準實體轉義。
放置在元素屬性內的文字（例如 <input value="DYNAMIC_DATA">）需要嚴格的引號轉義。
單獨使用 HTML 轉義無法保護 <script> 區塊、CSS 版面配置或 URL 屬性 (href) 內呈現的資料。它們分別需要 JavaScript 轉義、CSS 轉義或 URL 編碼。

3. 原則 2：安全 DOM API（防止基於 DOM 的 XSS）

使用 JavaScript 動態更新頁面內容時，選擇錯誤的 API 可能會造成安全漏洞。

CSS 錨點定位簡介與範例

Mon, 10 Feb 2025 00:00:00 +0900

介紹

在 Web 開發中，相對於特定參考元素（錨點）定位浮動元素（例如工具提示、彈出視窗、下拉式選單和懸停卡）歷來是一項複雜的挑戰。

為了使浮動元素在視窗大小調整或頁面滾動時跟隨錨點積分，開發人員傳統上依靠連續的 JavaScript 座標計算（使用 getBoundingClientRect()）來動態更改內聯樣式。因此，像 Popper.js 或 Floating UI 這樣的函式庫成為了業界標準。但是，在滾動事件期間在主執行緒上執行腳本循環經常會導致渲染延遲和卡頓，尤其是在行動裝置上。

CSS 錨定位 API 透過在瀏覽器中本機處理浮動座標來解決這些缺點。在本指南中，我們將探索該標準的核心功能並逐步介紹實用的 UI 配方。

1.什麼是CSS錨點定位？

CSS 錨定位是一種原生樣式標準，可讓您完全使用 CSS 將絕對或固定位置元素（目標）直接錨定到另一個元素（錨）。

核心優勢

零 JavaScript： 消除了調整大小偵聽器、滾動事件觀察器和自訂座標計算邏輯的需求。
卓越的性能： 位置更新和渲染直接卸載到瀏覽器的合成器線程，以 60+ FPS 渲染流暢的視覺更新。
佈局隔離： 絕對或固定目標元素可以繞過父邊界剪切約束（例如 overflow: hidden），尤其是與 HTML <dialog> 元素或本機 popover 屬性配對時。

2. 基本設定和語法

讓我們來看看將工具提示容器綁定到按鈕元素的基本設定。

HTML結構

我們聲明一個錨元素（按鈕）及其目標浮動容器（div）。

<button class="my-anchor">Hover over me</button>
<div class="my-tooltip">This is a native CSS tooltip</div>

CSS 實現

為了在 CSS 中將元素連結在一起，我們遵循三個步驟：

在引用錨元素上聲明唯一的 anchor-name 識別碼。
定義 position: absolute 並在目標上使用 position-anchor 引用標識符。
透過 anchor() 定位功能對齊座標。

/* 1. Set up the Anchor */
.my-anchor {
 /* Anchor names must be formatted as dashed identifiers, similar to CSS custom properties */
 anchor-name: --anchor-button;
}

/* 2 & 3. Format the Target */
.my-tooltip {
 position: absolute;
 position-anchor: --anchor-button;

 /* Pin the top of the tooltip to the bottom boundary of the anchor button */
 top: anchor(bottom);
 /* Place the horizontal center of the tooltip to the center of the anchor */
 left: anchor(center);
 transform: translateX(-50%);

 /* Styling defaults */
 background: #333;
 color: #fff;
 padding: 8px;
 border-radius: 4px;
}

只需幾行 CSS，工具提示就可以直接捕捉到按鈕下方。即使使用者捲動文檔，佈局引擎也會自動更新位置。

Task Management 工具 for 初學者s: 選擇 the 正確的 One

Tue, 14 Jan 2025 00:00:00 +0900

你好! Today, I will explain “how to choose a task management tool” to manage your daily tasks more efficiently. It is very important to organize “things to do” in your daily life, whether it is work, schoolwork, or housework. But finding the right tool for you may be a bit difficult. So, here are some tips for beginners to help you choose the right one without hesitation!

**To begin with, 讓我們 take a look at some task management tools.

What is a task management tool anyway?

As the name suggests, a task management tool is a tool for organizing, recording, and tracking what you need to do on a daily basis. For example, they are useful in the following situations

Cloudflare Pages: Static Site 接待指南

Tue, 28 Nov 2023 00:00:00 +0900

Cloudflare Pages: Static Site Hosting for Modern Websites

Introduction

Cloudflare Pages is a static site hosting platform built on top of Cloudflare’s global network infrastructure. It combines the speed of a world-class CDN with an intuitive deployment pipeline, making it an excellent choice for developers who want to focus on building rather than configuring servers. From portfolio sites to full-featured web applications, Cloudflare Pages handles the heavy lifting of content delivery, SSL termination, and scaling — all with a generous free tier. This guide walks through every step of setting up and optimizing a site on Cloudflare Pages.

Cloudflare 設定指南: Security and Performance

Tue, 28 Nov 2023 00:00:00 +0900

Cloudflare Setup: Improving Website Security and Performance

Introduction

For any website owner, security and speed are two sides of the same coin. A slow site frustrates visitors and hurts conversions; an insecure site puts data and reputation at risk. Cloudflare addresses both challenges with an integrated platform that sits between your visitors and your origin server, acting as a reverse proxy, content delivery network, and security gateway all at once. This guide walks through configuring Cloudflare’s core features — from basic DNS setup to advanced security rules — so you can protect and accelerate your site with confidence.

Google Analytics: Implementation and Analytics 指南

Fri, 20 Oct 2023 00:00:00 +0900

Google Analytics: Implementation and Analytics Guide

Understanding how visitors interact with your website is essential for growth. Google Analytics (GA) is the industry standard for web analytics, providing deep insights into traffic sources, user behavior, and conversion performance. This guide walks through the complete implementation process, from account creation to advanced optimization, so you can start making data-driven decisions with confidence.

Step 1: Creating a Google Analytics Account

Before collecting any data, you need a Google Analytics account:

OWASP ZAP: Web 使用法 Security Testing 指南

Fri, 20 Oct 2023 00:00:00 +0900

OWASP ZAP: Web Application Security Testing Guide

Web application security is no longer optional — it is a fundamental requirement for protecting user data and maintaining trust. OWASP ZAP (Zed Attack Proxy) is one of the most popular open-source security testing tools available. It helps developers and security professionals identify vulnerabilities in web applications through automated scanning and manual testing features. This guide covers the full workflow, from installation to remediation.

方式back Machine: Exploring the Internet Archive

Mon, 11 Sep 2023 00:00:00 +0900

Wayback Machine: Exploring the Internet Archive

The Wayback Machine is a digital time capsule for the World Wide Web. Operated by the Internet Archive, a non-profit organization founded in 1996, it preserves snapshots of web pages across decades, allowing anyone to travel back in time and see what websites looked like years ago. Whether you are conducting research, recovering lost content, or simply curious about the internet’s history, the Wayback Machine is an indispensable tool.

如何 Set Up Hugo: Complete 指南 for 初學者s

Wed, 23 Aug 2023 00:00:00 +0900

How to install Hugo - Static Site Generator Installation Instructions

Hugo is a fast and simple static site generator and tool that makes building websites easy. This article details the steps to install Hugo.

Step 1: Download Hugo

To install Hugo, first download the appropriate version of the Hugo binary from the official download page.

go to the official Hugo download page. 2.
select the installation method appropriate for your operating system (Windows, macOS, Linux, etc.)
open a terminal (command prompt) and follow the instructions to download the Hugo binary.

Step 2: Confirm installation

After the Hugo binary has been downloaded, verify that the installation was successful. 1.

Network on 技術、遊戲、生活通俗易懂的解釋

React 19 新功能：開發人員需要了解的內容

React 19 發生了什麼變化

穩定的伺服器元件

use() 鉤子

表單的伺服器操作

Web Performance Monitoring 工具 Compared 2026

Why Lighthouse Is Not Enough

1. Web Vitals — Chrome UX Report and CrUX API

2. Sentry Performance

Google I/O 2025：整合網路技術與人工智慧

介紹

1. Chrome 中的裝置端 AI：標準化內建 AI API

使用提示 API

核心優勢

2.Gemini API 升級：結構化 JSON 輸出

Web開發中XSS的防禦原則

介紹

1.XSS的三種分類

2. 原則 1：上下文感知 HTML 轉義

基本字元映射表

警告：上下文很重要

3. 原則 2：安全 DOM API（防止基於 DOM 的 XSS）

CSS 錨點定位簡介與範例

介紹

1.什麼是CSS錨點定位？

核心優勢

2. 基本設定和語法

HTML結構

CSS 實現

Task Management 工具 for 初學者s: 選擇 the 正確的 One

**To begin with, 讓我們 take a look at some task management tools.

**What is a task management tool anyway? **

Cloudflare Pages: Static Site 接待 指南

Cloudflare Pages: Static Site Hosting for Modern Websites

Introduction

Cloudflare 設定指南: Security and Performance

Cloudflare Setup: Improving Website Security and Performance

Introduction

Google Analytics: Implementation and Analytics 指南

Google Analytics: Implementation and Analytics Guide

Step 1: Creating a Google Analytics Account

OWASP ZAP: Web 使用法 Security Testing 指南

OWASP ZAP: Web Application Security Testing Guide

方式back Machine: Exploring the Internet Archive

Wayback Machine: Exploring the Internet Archive

如何 Set Up Hugo: Complete 指南 for 初學者s

How to install Hugo - Static Site Generator Installation Instructions

Step 1: Download Hugo

Step 2: Confirm installation

What is a task management tool anyway?

Cloudflare Pages: Static Site 接待指南