Yihui’s Blog

翻译作品索引

41 篇精选技术文章翻译,涵盖前端、后端、性能优化、架构设计等多个领域

📊 翻译统计

  • 总翻译数量: 41 篇
  • 翻译目录: 31 篇
  • 外文翻译: 10 篇
  • 涵盖技术领域: 15+ 个
  • 时间跨度: 2018-2024

🎯 快速导航

按技术分类

按发布年份

按推荐程度


📚 翻译目录 (31 篇)

React & 前端框架

1. React 服务器组件 (RSCs) 的深入分析 ⭐⭐⭐

英文标题: The Forensics Of React Server Components (RSCs)

📝 文章信息:

内容概要: 深入剖析 React Server Components 的工作原理,对比 SSR 和 CSR 的优缺点,解释 RSC 如何解决现有问题。包含大量实例和流程图,是理解 RSC 的最佳资源。

适合人群: React 开发者,对 SSR/RSC 感兴趣的前端工程师


2. 为什么 RSC 才是正确答案? ⭐⭐

英文标题: Why RSC is the Right Answer?

📝 文章信息:

内容概要: 从架构角度解释为什么 React Server Components 是未来的发展方向。


3. SolidStart 1.0:未来框架的形态 ⭐⭐

英文标题: SolidStart 1.0: The Shape of Frameworks to Come

📝 文章信息:

内容概要: 介绍 SolidStart 1.0 的新特性和设计理念,探讨未来前端框架的发展方向。


4. Astro 5.0 新功能概述 ⭐⭐⭐

英文标题: Introducing Astro 5.0

📝 文章信息:

内容概要: 详细介绍 Astro 5.0 的重大更新,包括内容层 API、服务器岛屿等新特性。

适合人群: 对静态站点生成和现代 Web 框架感兴趣的开发者


5. Islands Architecture 孤岛架构 ⭐⭐⭐

英文标题: Islands Architecture

📝 文章信息:

内容概要: 解释孤岛架构的概念、优势和应用场景,这是 Astro 等现代框架的核心设计理念。

适合人群: 架构师,对性能优化感兴趣的开发者


6. 如何编写 React 应用程序的样式 ⭐⭐

英文标题: How to Style a React Application

📝 文章信息:

内容概要: 对比 React 应用中的各种样式方案(CSS Modules, Styled Components, Tailwind 等),提供选择建议。


7. 如何为应用选择最佳渲染策略 ⭐⭐⭐

英文标题: How to choose the best rendering strategy for your app

📝 文章信息:

内容概要: 详细对比 SSG、SSR、CSR、ISR 等渲染策略,提供选择指南和决策树。

适合人群: 前端架构师,需要做技术选型的开发者


JavaScript & TypeScript

8. 这种模式将破坏你 React 应用的 TS 性能 ⭐⭐⭐

英文标题: This Pattern Will Wreck Your React App’s TS Performance

📝 文章信息:

内容概要: 揭示 React + TypeScript 项目中可能严重影响性能的代码模式,提供优化方案。

适合人群: React + TypeScript 开发者


9. 面向 JavaScript 开发人员的 TSConfig 简介 ⭐⭐

英文标题: An intro to TSConfig for JavaScript Developers

📝 文章信息:

内容概要: 为 JavaScript 开发者讲解 TSConfig 的各项配置,帮助快速上手 TypeScript。


10. 如何写出更好的 Typescript 代码 ⭐⭐

英文标题: How to write better Typescript codes?

📝 文章信息:

内容概要: TypeScript 最佳实践指南,包括工具类型的使用、类型推断技巧等。


11. JavaScript 舍入误差(在金融应用程序中) ⭐⭐⭐

英文标题: JavaScript Rounding Errors (in Financial Applications)

📝 文章信息:

内容概要: 深入讲解 JavaScript 浮点数运算误差的原因,提供金融应用中的解决方案。

适合人群: 开发金融、电商等对精度要求高的应用的开发者


12. 解析 JavaScript 中的循环依赖 ⭐⭐

英文标题: Unraveling Circular Dependencies in JavaScript

📝 文章信息:

内容概要: 解释 JavaScript 模块系统中的循环依赖问题及其解决方案。


13. 2024 年的 5 个 JavaScript 安全最佳实践 ⭐⭐⭐

英文标题: 5 JavaScript Security Best Practices for 2024

📝 文章信息:

内容概要: 2024 年 JavaScript 安全最佳实践,涵盖 XSS、CSRF、CSP 等常见安全问题的防护。

适合人群: 所有前端开发者


14. ECMAScript 装饰器的 10 年 ⭐⭐

英文标题: 10 Years of ECMAScript Decorators

📝 文章信息:

内容概要: 回顾装饰器提案的 10 年演变历程,解释最新的装饰器语法。


15. 谷歌在索引过程中如何处理 JavaScript ⭐⭐

英文标题: How Google handles JavaScript throughout the indexing process

📝 文章信息:

内容概要: 深入解析 Google 爬虫如何处理 JavaScript 应用,提供 SEO 优化建议。

适合人群: 前端开发者,SEO 工程师


Web 性能优化

16. 关于优化 LCP 的常见误解 ⭐⭐⭐

英文标题: Common misconceptions about how to optimize LCP

📝 文章信息:

内容概要: 纠正关于 LCP(Largest Contentful Paint)优化的常见误解,提供正确的优化思路。

适合人群: 关注 Web 性能的前端开发者


17. INP (Interaction to Next Paint) 与用户体验真的有关系吗? ⭐⭐

英文标题: Does INP Actually Correlate with User Experience?

📝 文章信息:

内容概要: 探讨新的 Core Web Vitals 指标 INP 与实际用户体验的相关性。


18. PRPL 模式 ⭐⭐

英文标题: PRPL Pattern

📝 文章信息:

内容概要: 介绍 Google 提出的 PRPL 模式(Push, Render, Pre-cache, Lazy-load),提升首屏性能。


19. 交互时导入 ⭐⭐

英文标题: Import on Interaction

📝 文章信息:

内容概要: 介绍交互时导入的性能优化模式,减少首次加载时间。


CSS & 样式

20. 现在如何使用容器查询 ⭐⭐⭐

英文标题: How to use container queries now

📝 文章信息:

内容概要: 详细介绍 CSS 容器查询的使用方法和应用场景,这是响应式设计的革命性特性。

适合人群: 前端开发者,UI/UX 工程师


21. 使用 CSS 解析器扩展来填充 CSS(提案) ⭐⭐

英文标题: CSS Parser Extensions (Proposal)

📝 文章信息:

内容概要: 介绍 CSS 解析器扩展提案,允许开发者自定义 CSS 功能。


22. 居中一个 div 的 N 种方法 ⭐⭐

英文标题: N Ways to Center a Div

📝 文章信息:

内容概要: 总结 CSS 中实现元素居中的多种方法,从经典到现代。


Node.js & 后端

23. Express.js v5.0 中的新增功能 ⭐⭐

英文标题: What’s new in Express.js v5.0

📝 文章信息:

内容概要: 介绍 Express.js v5.0 的新特性和破坏性变更。


24. 在企业环境中正确使用 Node.js 的九大原则 ⭐⭐⭐

英文标题: 9 Principles for Doing Node.js Right in Enterprise Environments

📝 文章信息:

内容概要: 企业级 Node.js 应用开发的 9 大原则,涵盖性能、安全、可维护性等方面。

适合人群: Node.js 后端开发者,技术负责人


25. 每个开发人员都应该知道的五大 Node.js 功能 ⭐⭐

英文标题: Top 5 Node.js Features Every Developer Should Know

📝 文章信息:

内容概要: 介绍 Node.js 中最实用的 5 个功能特性。


26. 用于调试和分析的 5 大 Node.js 工具 ⭐⭐

英文标题: Top 5 Node.js Tools for Debugging and Profiling

📝 文章信息:

内容概要: 推荐 Node.js 开发中最有用的 5 个调试和性能分析工具。


架构设计

27. 从领域开始 ⭐⭐⭐

英文标题: Start With the Domain

📝 文章信息:

内容概要: 讲解领域驱动设计(DDD)的核心思想,强调从业务领域出发设计系统。

适合人群: 架构师,技术负责人


28. 选择技术栈 ⭐⭐

英文标题: Picking a Tech Stack

📝 文章信息:

内容概要: 如何根据项目需求选择合适的技术栈,提供决策框架。


29. 如何初始化前端项目 ⭐⭐

英文标题: Setting Up the Project

📝 文章信息:

内容概要: 前端项目初始化的最佳实践,包括工具链配置、部署流程等。


30. 不要将 DTO 传递给用户界面组件 ⭐⭐

英文标题: Do not pass DTOs to UI components

📝 文章信息:

内容概要: 解释为什么不应该直接将后端 DTO 传递给前端组件,提供更好的架构方案。


31. 从简单到复杂 —— 软件四象限 ⭐⭐

英文标题: From trivial to complex – 4 software quadrants

📝 文章信息:

内容概要: 用四象限模型分析软件项目的复杂度,帮助选择合适的开发策略。


WebAssembly & Rust

32. 为 Rust 及所有语言优化 WebAssembly ⭐⭐⭐

英文标题: Making WebAssembly better for Rust & for all languages

📝 文章信息:

内容概要: Mozilla 工程师 Lin Clark 讲解如何通过 wasm-bindgen 优化 Rust 的 WebAssembly 体验。

适合人群: 对 WebAssembly 和 Rust 感兴趣的开发者


33. 使用 Rust 编程 WebAssembly 第一部分:从 WAT 到 WASM 集成 ⭐⭐

英文标题: Programming WebAssembly with Rust Part 1: From WAT to WASM Integration

📝 文章信息:

内容概要: Rust + WebAssembly 入门教程第一部分,从 WAT 文本格式开始学习。


安全

34. 什么是会话固定 ⭐⭐

英文标题: What is Session Fixation

📝 文章信息:

内容概要: 解释会话固定攻击的原理和防护方法。


35. 如何从头开始构建机器人检测脚本:分步指南 ⭐⭐

英文标题: How to Build a Bot Detection Script from Scratch: Step-by-Step Guide

📝 文章信息:

内容概要: 手把手教你构建前端机器人检测脚本,防止爬虫和自动化攻击。


DevOps & 工具

36. 编写 Dockerfile:从入门到精通 ⭐⭐⭐

英文标题: Writing Dockerfile: From Beginner to Master

📝 文章信息:

内容概要: Dockerfile 编写完整指南,从基础到进阶,涵盖最佳实践和优化技巧。

适合人群: DevOps 工程师,后端开发者


37. URL 设计最佳实践 ⭐⭐

英文标题: URL Design Best Practices

📝 文章信息:

内容概要: RESTful API 和 Web 应用的 URL 设计最佳实践。


编程理念

38. 命名在编程中的重要性 ⭐⭐⭐

英文标题: On the Importance of Naming in Programming

📝 文章信息:

内容概要: 深入探讨代码命名的重要性,提供命名最佳实践和常见陷阱。

适合人群: 所有开发者


AI & 前沿技术

39. Claude 4 重磅来袭:你需要了解的一切 ⭐⭐

英文标题: Claude 4 Release: Everything You Need to Know

📝 文章信息:

内容概要: 介绍 Claude 4 AI 模型的新特性和能力。


📅 按年份分类

2024 年翻译

  1. React 服务器组件 (RSCs) 的深入分析
  2. Astro 5.0 新功能概述
  3. 2024 年的 5 个 JavaScript 安全最佳实践
  4. 这种模式将破坏你 React 应用的 TS 性能
  5. 关于优化 LCP 的常见误解
  6. 如何为应用选择最佳渲染策略
  7. 谷歌在索引过程中如何处理 JavaScript
  8. 现在如何使用容器查询
  9. 如何从头开始构建机器人检测脚本
  10. Claude 4 重磅来袭
  11. INP 与用户体验真的有关系吗
  12. 为什么 RSC 才是正确答案

2023 年翻译

  1. SolidStart 1.0:未来框架的形态
  2. 命名在编程中的重要性
  3. 面向 JavaScript 开发人员的 TSConfig 简介
  4. Express.js v5.0 中的新增功能
  5. 从简单到复杂 —— 软件四象限
  6. 如何编写 React 应用程序的样式
  7. 选择技术栈
  8. ECMAScript 装饰器的 10 年

2022 年及之前

  1. 为 Rust 及所有语言优化 WebAssembly (2018)
  2. 使用 Rust 编程 WebAssembly 第一部分
  3. PRPL 模式
  4. Islands Architecture 孤岛架构
  5. JavaScript 舍入误差

⭐ 按推荐程度分类

强烈推荐 ⭐⭐⭐

  1. React 服务器组件 (RSCs) 的深入分析 - RSC 最佳学习资源
  2. 这种模式将破坏你 React 应用的 TS 性能 - React+TS 必读
  3. 关于优化 LCP 的常见误解 - 性能优化必读
  4. 如何为应用选择最佳渲染策略 - 架构设计必读
  5. 现在如何使用容器查询 - CSS 新特性必读
  6. 从领域开始 - DDD 入门必读
  7. 在企业环境中正确使用 Node.js 的九大原则 - Node.js 最佳实践
  8. 编写 Dockerfile:从入门到精通 - Docker 完整指南
  9. 为 Rust 及所有语言优化 WebAssembly - WASM 深入理解
  10. 命名在编程中的重要性 - 代码质量基础
  11. JavaScript 舍入误差(在金融应用程序中) - 精度计算必读
  12. 2024 年的 5 个 JavaScript 安全最佳实践 - 安全基础
  13. Astro 5.0 新功能概述 - Astro 开发者必读
  14. Islands Architecture 孤岛架构 - 现代架构必读

值得一读 ⭐⭐

(其余 20 篇翻译)


🏷️ 按主题标签分类

#React

  • React 服务器组件 (RSCs) 的深入分析
  • 这种模式将破坏你 React 应用的 TS 性能
  • 如何编写 React 应用程序的样式
  • 为什么 RSC 才是正确答案

#性能优化

  • 关于优化 LCP 的常见误解
  • INP 与用户体验真的有关系吗
  • PRPL 模式
  • 交互时导入
  • 如何为应用选择最佳渲染策略

#TypeScript

  • 这种模式将破坏你 React 应用的 TS 性能
  • 面向 JavaScript 开发人员的 TSConfig 简介
  • 如何写出更好的 Typescript 代码

#架构设计

  • 从领域开始
  • 选择技术栈
  • 不要将 DTO 传递给用户界面组件
  • 从简单到复杂 —— 软件四象限
  • Islands Architecture 孤岛架构

#Node.js

  • Express.js v5.0 中的新增功能
  • 在企业环境中正确使用 Node.js 的九大原则
  • 每个开发人员都应该知道的五大 Node.js 功能
  • 用于调试和分析的 5 大 Node.js 工具

#安全

  • 2024 年的 5 个 JavaScript 安全最佳实践
  • 什么是会话固定
  • 如何从头开始构建机器人检测脚本

#CSS

  • 现在如何使用容器查询
  • 使用 CSS 解析器扩展来填充 CSS(提案)
  • 居中一个 div 的 N 种方法

#WebAssembly

  • 为 Rust 及所有语言优化 WebAssembly
  • 使用 Rust 编程 WebAssembly 第一部分

💡 阅读建议

按角色推荐

前端初学者:

  1. 命名在编程中的重要性
  2. 居中一个 div 的 N 种方法
  3. 如何初始化前端项目
  4. URL 设计最佳实践

前端进阶:

  1. React 服务器组件 (RSCs) 的深入分析
  2. 这种模式将破坏你 React 应用的 TS 性能
  3. 关于优化 LCP 的常见误解
  4. 现在如何使用容器查询
  5. 2024 年的 5 个 JavaScript 安全最佳实践

全栈开发者:

  1. 从领域开始
  2. 选择技术栈
  3. 如何为应用选择最佳渲染策略
  4. 在企业环境中正确使用 Node.js 的九大原则
  5. 编写 Dockerfile:从入门到精通

架构师:

  1. 从领域开始
  2. 选择技术栈
  3. 从简单到复杂 —— 软件四象限
  4. Islands Architecture 孤岛架构
  5. 如何为应用选择最佳渲染策略

📖 学习路径建议

React 深度学习路径

  1. 如何编写 React 应用程序的样式
  2. 这种模式将破坏你 React 应用的 TS 性能
  3. React 服务器组件 (RSCs) 的深入分析
  4. 为什么 RSC 才是正确答案

性能优化路径

  1. PRPL 模式
  2. 交互时导入
  3. 关于优化 LCP 的常见误解
  4. INP 与用户体验真的有关系吗
  5. 谷歌在索引过程中如何处理 JavaScript

全栈架构路径

  1. 从领域开始
  2. 选择技术栈
  3. 如何初始化前端项目
  4. 如何为应用选择最佳渲染策略
  5. 不要将 DTO 传递给用户界面组件

🔍 原文来源统计

主要来源网站

  • Smashing Magazine (1 篇) - React RSC
  • web.dev (2 篇) - LCP, Container Queries
  • Vercel Blog (2 篇) - 渲染策略, Google JavaScript 索引
  • alexkondov.com (5 篇) - 全栈开发系列
  • Mozilla Hacks (1 篇) - WebAssembly
  • Medium (2 篇) - TypeScript, Rust WASM

知名作者

  • Matt Pocock - TypeScript 专家
  • Philip Walton - Google 性能工程师
  • Lin Clark - Mozilla WebAssembly 工程师
  • Alexander - 全栈开发系列作者
  • Brendan Kenny - Google Web 性能团队

📞 反馈与建议

如果您:

  • 发现翻译错误或不准确的地方
  • 有更好的翻译建议
  • 希望看到某篇文章的翻译
  • 想要参与翻译工作

欢迎通过 GitHub Issues 反馈!


持续更新中,感谢阅读 📚
最后更新: 2026-01-26

维护与整理 · Yihui在 GitHub 上编辑