本文总结了 ViteLand 生态系统在 2025 年 7 月的主要动态，包括 Vite、Vitest、Oxc、Rolldown 等关键项目的最新进展，以及社区即将举办的线下盛会 ViteConf 的首场线下会议预告。Vite 团队将发布全新产品 Vite+，并聚焦前端开发领域的未来趋势。文章还预告了 Vite 纪录片的上线情况，为开发者提供了丰富的行业洞察和社区信息。

1. 生态系统进展
• 概述了 Vite、Vitest、Oxc、Rolldown 等项目在本月取得的主要更新和迭代。
• 着重强调了团队在提升开发者体验（DX, Developer Experience）方面的持续努力。

2. ViteConf 线下大会预告
• 预告 10 月将在阿姆斯特丹举行的首届线下 ViteConf，此前已有三届线上大会成功举办。
• 届时将首次发布 Vite+，介绍其功能和对团队工作流的提升作用。
• 大会将邀请知名演讲嘉宾，包括 Bolt.new/StackBlitz CEO Eric Simons 和 Netlify CEO Mathias Biilmann。
• 会议主题将围绕下一代开发工具（next-generation tooling）、智能 agent 体验等前端领域热点展开。

3. 社区与纪录片
• 宣布由 CultRepo 出品的 Vite 纪录片即将在活动中全球首映，展示 Vite 团队及 Svelte、Solid、Astro 等明星项目作者的未公开故事。
• 官方预告片已发布，可供提前观看，进一步增强社区凝聚力。

void(0)

What’s New in ViteLand: July 2025 Recap

July 2025 brings exciting updates in the Vite ecosystem, including the release of Vite 7, Rolldown's new features, and the upcoming ViteConf in Amsterdam. Discover the latest news in Vite, Vitest, Oxc, Rolldown and more!

发布视频-日常-轻手作
播放量:343.71万 弹幕:2429 评论:4317
点赞:18.72万 投币:1.39万 收藏:2.76万
发布日期:2025-07-31 09:09:42
时长:0:04:44

AI 摘要：本文章批判了将 SPA（单页应用，Single Page Application）作为优先方案的潮流，指出随着现代 CSS 和浏览器（如 View Transitions API、Speculation Rules 等）的进步，实现流畅、原生的页面交互已不再需要复杂的 JS 框架和大量前端代码。作者呼吁开发者回归标准的 HTML + CSS + 浏览器原生能力，构建更快速、可维护、SEO 友好的网站，并强调 SPA 带来的复杂性、性能损耗、可访问性问题，以及与浏览器发展脱节的弊端。

1. “类应用”迷思与 SPA 的错误假设
• 许多项目由于“要像 app 一样流畅”的陈旧要求选择了 SPA 架构，而忽略了是否真的需要。
• 选择 SPA 并非出于真正的技术需求，而是为交互流畅度妥协了架构简洁性。
• 现在的假设已过时，SPA 不再是唯一可实现流畅体验的方法。

2. SPA 的“伪流畅”与性能危害
• SPA 的“无刷新感”常常是假象，实际表现为加载动画、滚动错乱、路由行为不一致等问题。
• 大量 JavaScript 的引入导致性能下降，SEO 变得复杂，体验反而变差。
• 现代 SPA 阈值带来的技术负担，不成比例的为“流畅度”买单。

3. 现代 Web 平台演进（CSS 与浏览器原生特性）
• 浏览器原生已支持声明式页面过渡（View Transitions API），无需 JS 也能实现淡入淡出动画等高级体验。
• 结合 Speculation Rules（预测性预加载），可实现点击即开的导航体验，无需 JS 路由。
• 原生 MPA（多页面应用，Multi-page Application）方案能够通过 CSS 动画实现元素过渡、状态保存、URL 正确性等。
• 示例代码简明说明如何用 CSS 实现页面转场与共享元素动画。

4. 浏览器赋能与简单架构的优势
• 现代浏览器提供诸如 Back/Forward Cache（前进后退缓存）等特性，只要结构易读、无 JS 路由劫持即可天然获得极佳体验。
• 浏览器愿意协助性能优化，但前提是开发者不要人为增加复杂度。

5. 性能现实对比：SPA vs 现代 MPA
• 真实 SPA（如 Next.js 等）JS 体积大，加载慢，SEO 和导航表现不稳定。
• MPA + View Transitions + Speculation Rules 几乎无需 JS，加载极快，自然支持 SEO 和历史管理。
• 原生方法不仅替代 SPA 行为，而且性能和可维护性更佳。

6. 反思：“网站不是 APP”
• 普通网站无需 SPA 的状态管理、复杂路由、大量组件或 hydration。
• 使用过度的 JS 反而增加了网站开发、运维成本和用户负担。
• 理性选择开发手段，应“用网站的方式造网站”，拥抱标准技术栈。

7. 展望与建议：用现代 web 技术构建网站
• 原生 declarative transition（声明式过渡）、预渲染、降级兼容性、易维护架构等已足以满足绝大多数场景。
• SPA 是旧时代局限下的策略，如今实属多余。
• 建议开发者用现代服务端渲染和单纯 HTML + CSS 构建主站，只在必要时合理由加 JS 增强。

Jono Alderson

It's time for modern CSS to kill the SPA

Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.

AI 摘要：本期 Frontend Focus 报道了前端领域的最新动态和趋势，涵盖 CSS 新规范（如无 JavaScript 的走马灯、Masonry 布局、Scroll-Spy）、React/Next.js 开发中的常见陷阱、MDN 发展二十周年纪念，以及一批最新实用工具和开发资源。此外，简要提及了 Safari/Edge 等主流浏览器新特性和业界法规、社区大事件，适合前端开发者了解行业资讯和提升技术能力。

1. 前端社区动态与大事件
• MDN 文档网站庆祝成立 20 周年，目前拥有超 14,000 页内容，是 Web 开发的重要资料库
• 2025 Stack Overflow 开发者调查结果公布，涵盖开发工具、AI 代理、LLM 使用现状等
• W3C 发布关于组织使命与价值观的重要新文档
• HTML Day 活动将举办超 40 场全球盛会，HTML 技术持续推进
• Wikimedia 积极挑战英国在线安全法案，关注数字法规生态

2. CSS 新特性与最佳实践
• CSS Masonry 布局：探讨新规范进展与当前解决方案，兼顾未来性与可用性，附带交互反馈征集
• CSS Scroll-Spy ：Chrome 140 浏览器引入 scroll-target-group 和:target-current，可用两行 CSS 实现目录高亮跟踪效果
•  Responsive Video is (Almost) Easy Now：如何处理垂直和横向视频以适应不同场景，在上下文需要时提供垂直和水平版本。
• “现代 CSS 杀死 SPA”观点：提倡服务器渲染与页面级动画，倡导 CSS 动画和意图性预加载

3. Web 技术深度/创新话题
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• Performance Extensibility API：允许自定义轨迹供 Chrome DevTools 性能面板分析
• WebAssembly（WASM）与 DOM 互操作性进展，工具链提升正降低 WASM 开发门槛
• Liquid Glass ：苹果新一代视觉样式的网页实现尝试
• Web Components 及 Shadow DOM 实践解析

4. 工具、组件与资源推荐
• World Clock Slider：多城市世界时钟组件，支持暗黑模式
• FossFLOW：等距基础架构图形工具，支持丰富图标与数据管理 【这个挺酷炫的】
• StaticSearch：为静态站点增添搜索，无需后端，基于 Javascript，数据存储为 JSON
• Oklchroma：基于 OKLCH 色彩空间的色板生成器，提供基色，使用三角函数生成不同色阶
• difit：使用 GitHub 风格查看器查看和审查本地 git 差异的 CLI 工具，评论还可以作为 AI 提示进行复制。
• 7.css：忠实还原经典 Windows 7/XP UI 的 CSS 设计系统
• 使用 Three.js、WebGPU 和 TSL 进行交互式文本销毁

MDN Web Docs

Celebrating 20 years of MDN | MDN Blog

MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

AI 摘要：本文由 Makito 首次在 Project AIRI 的 DevLog 分享，聚焦于如何在前端应用中处理和实现流式 UTF-8 字节流的文本动画，尤其是在聊天或语音转写等实时场景下正确分割和显示「字素簇」（grapheme cluster）。作者深入探讨了 Unicode 编码、多码点合成字符的边界难题，以及利用 Web API，如 TextDecoder、Intl.Segmenter，实现安全高效的字素簇流式提取，并介绍了自己的开源库 Clustr。文章结合了丰富的实例和交互组件，面向希望在项目中实现高质量文本动画及多语言兼容的前端开发者，具有较高参考价值。

1. 背景与动机
• 投稿者首次在 DevLog 发文，介绍参与 Project AIRI 过程。
• 动画文本在现代 UI（如聊天消息）中的作用和实现难点。
• 第三方库（Anime.js, splt, GSAP）在文本动画实现上的进展与现有不足。
• 项目的需求：需实时处理和动画化接收自 UTF-8 字节流的数据。

2. Unicode 基础与「字素簇」难题
• 码点（Code point）与 UTF-8 字节流的对应关系，字节组装所需注意事项。
• Unicode「字素簇」的定义，即多个码点合为视觉整体的最小文本单元。
• 通过实际 Emoji 和南亚文字示例，阐释组合字符的裸数据和视觉表现。
• 传统 Web API 如 TextDecoder 能将字节流还原为码点字符，但不足以分割复杂字素簇。

3. Web API 应用与完善方案
• 利用 TextDecoder.decode（stream选项）实现流式解码，拼接字符串缓冲区。
• 使用 Intl.Segmenter 拆分字符串为字素簇，支持多语言处理。
• 提出解决方案：因为流数据随时变化，需确保不完整的字素簇不被导出，因而采用「丢弃最后一个」策略缓冲输出，避免合成字符的过早显示。

4. 流式字素簇库 Clustr 的诞生
• 市场调研发现缺乏专门处理流式 UTF-8 字节流并输出字素簇的库。
• 作者自研 Clustr，核心代码不到100行，实现了上述需求。
• Clustr 能帮助前端实时渲染流式文本动画，兼容多语言复杂字符。

5. 互动组件与社区交流
• 提供探索字素簇组合和实时代码交互的小组件。
• 鼓励开发者参与 Project AIRI 相关 GitHub 仓库，共同讨论和改进工具。

AI 摘要：本文深入介绍了 Web Components 中 Shadow DOM（影子 DOM）的原理和实际应用。作者不仅阐述了 Shadow DOM 在隔离 HTML 和 CSS、避免组件冲突中的重要性，也详细讲解了如何通过命令式和声明式方式创建 Shadow Root 以及相关配置（如克隆、序列化、焦点委托），并介绍了 slot（插槽）机制以实现内容分发。文章面向希望提升组件封装性、可维护性和安全性的前端开发者提供了清晰的实践指南。

1. Web Components 与 Shadow DOM 概述
• Web Components 由 Custom Elements（自定义元素）、HTML Templates（模板）和 Shadow DOM 等技术组成，三者可单独或组合使用。
• 传统 DOM 架构容易导致样式与脚本污染，难以维护。
• Shadow DOM 可实现 DOM、CSS、JS 的局部封装，提升组件独立性与安全性。

2. 为什么需要 Shadow DOM
• 现代应用常集成来自不同来源的组件，容易出现 ID 冲突与样式覆盖问题。
• 原生 HTML 元素如 video、details 等都标准使用 Shadow DOM 避免全局影响。

3. Shadow Root 的宿主元素与创建方式
• 多数 HTML 元素（如 div、section、span 等）均可作为 Shadow Root 宿主。
• 创建方式分为：
• 命令式（JavaScript）：attachShadow({mode})，可选择 open（开放）或 closed（私有）模式，建议默认使用 closed，以增强安全性。
• 声明式（HTML）：利用 <template shadowrootmode=""> 内嵌 shadow root，可和 Custom Elements 配合使用，支持 open/closed 模式。
• 讨论 open/closed 模式的脚本访问区别与安全考虑。

4. Shadow DOM 配置项
• clonable：允许带有 shadow root 的节点可被完整克隆（包括模板内容），提升组件复用性。
• serializable：能将 shadow root 内容序列化为字符串，便于缓存或跨节点注入，但需注意闭合模式下的数据泄露风险。
• delegatesFocus：启用后，宿主获得焦点时自动将焦点转移到 shadow root 内第一个可聚焦元素，常用于自定义表单组件，增强用户体验。

5. Slot（插槽）与内容分发
• 通过 slot，可实现宿主与 Shadow DOM 之间的内容插入与分发，支持默认与命名插槽，并可定义 fallback（回退）内容。
• slotchange 事件用于监听 slot 内容变化，便于实现响应式组件行为。
• slotted 内容仍属于 light DOM，可在文档级直接操作。

6. 实用建议与局限性
• 推荐以 closed-first 策略增强组件安全性，特殊场景下才使用 open。
• 注意表单与可访问性（ARIA）相关的局限，部分需要借助 ElementInternals 等新 API 进一步处理。

Smashing Magazine

Web Components: Working With Shadow DOM — Smashing Magazine

Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and…

AI 摘要：Google Chrome 的 Performance Extensibility API （性能扩展 API）允许开发者将自定义的性能标记（performance.mark）和测量（performance.measure）集成进 Chrome DevTools 的性能面板，使自有应用、团队代码与第三方包可实现更细粒度、结构化和可视化的性能剖析。文中不仅介绍 API 的最小可用实践和高级特性（如自定义 track、颜色、分组与元数据），还探讨了如何借助这些新能力更好地组织跨团队、跨模块或第三方依赖的性能数据，以提升前端调优的效率和可读性。

1. 背景与意义
• Google Chrome 推出的 Performance Extensibility API 能让开发者自定义性能分析数据，在 DevTools 性能面板中更清晰展现。
• 适用于关注特定应用片段性能、跨团队协作及 API/第三方包开发者等多类场景。

2. 现有能力回顾（性能.mark 与 .measure）
• 介绍 performance.mark() 与 performance.measure() 的基础用法，展示如何标记重要事件并测量阶段耗时。
• DevTools 能自动捕获这些标记，方便用时长和起止点可视化查看。

3. Extensibility API 的最小实现
• 启用 DevTools 新特性（Show custom tracks）。
• 使用 mark 时 dataType 必填，measure 时 track 必填，其他均为可选。
• mark 实现更明显的“标志”，但缺乏精确时间信息，偏向定位关注点而非精确计时。
• measure 则可直接建立自定义轨道，并展现分时区间。

4. 高级用法与增强能力
• 支持自定义颜色（限定调色板）、显示 toolTipText 与挂载元数据（properties）。
• measure 可作详细事件描述和元数据列举（例如资源加载性能拆解）。
• 所有扩展项 (color、tooltipText、properties) 均适用于 mark 与 measure，但 measure 的实用性更强。

5. track 与 trackGroup 的组织能力
• 支持创建自定义 track（如 CSS、JS、API）以区分不同事件流。
• 支持 trackGroup，将多个 track 归为一个分组（例如 First Party < CSS、JS>），适合团队协作及区分自有与第三方数据流。
• 实现方式简便，极大提升了跨团队、模块性能整理与溯源的效率。

6. 实践建议与最佳实践
• 推荐从最小实现用法入手，不建议对 mark 过度扩展。
• 优先使用 measure 进行自定义 track/trackGroup 的组织管理。
• 针对第三方库或框架，鼓励将自有 Instrumentation 移入单独 trackGroup，以提升定位和用例分析效率。

7. 附录：实用代码示例
• 提供结合 Resource Timing API 的实践 demo，展示如何自动获取和展示资源性能细节。

Csswizardry

Making Sense of the Performance Extensibility API – CSS Wizardry

Making sense—and use!—of the new Performance Extensibility API in Chrome DevTools.

AI 摘要：本文深入探讨了 React 的 useCallback（及部分 useMemo）在许多开发实践中被滥用、实际无效甚至带来额外复杂性的现象。作者指出，只有在需要“引用稳定性”（referential stability）时才有必要使用 memoization（记忆化），但多数情况下由于组件、props 或 state 的传递与依赖管理不当，memoization 实际无法带来性能提升，甚至反而让代码维护变得困难。作者以真实项目为例，分析了 memoization 的链式依赖是如何轻易被打破，进而推荐采用最新引用（Latest Ref Pattern）和即将推出的 useEffectEvent 方案来简化副作用依赖管理。

1. 记忆化的真正动机
• 只有两大理由：性能优化、降低副作用（effect）频繁触发。
• 核心是保持“引用稳定性”，以防止不必要的重新渲染或副作用。

2. 错误/无用的 useCallback 场景分析
• 如果目标组件本身未被 React.memo 包裹，useCallback/useMemo 完全无效。
• 组件自身如果不关心 props 的引用稳定性，多余的 memoization 没有任何作用，例如原生 button 的事件处理。
• 不应将传入的非原始 props 用作内部依赖（dependency array），因为无法控制其稳定性。

3. 真实工作中链式 memoization 失效的例子
• 多层 useMemo/useCallback、props 层层传递，一旦其中任意一环未 memoize，所有下游优化失效。
• 该问题不仅无法通过“层层 memoize”彻底修复，反而增加了理解和维护的负担，导致开发者难以溯源、清理无用优化。

4. 新的依赖管理模式推荐
• 最新引用（Latest Ref Pattern）：通过 useRef 保存当前最新值，通过 effect 始终同步，无需被动依赖。
• useEffectEvent（即将推出的 React 原生特性）：可直接在副作用 effect 内安全访问最新 props/state，无需显性依赖。

5. 结论与建议
• 仅在确有必要的场景使用 useCallback/useMemo，切勿滥用。
• 优先采用更健壮的依赖管理模式，减少人为记忆化的复杂性，提升组件可维护性和开发体验。

tkdodo.eu

The Useless useCallback

Why most memoization is downright useless...

AI 摘要：本文通过作者在调试 JavaScript 代码时遇到的一个由分号 (semicolon) 缺失引发的 TypeError: console.log(...) is not a function 问题，强调了分号在 JS 语法中的关键作用。作者通过简短实例和社区讨论，剖析了分号自动插入机制导致的意外行为，并分享了这一微小失误引发长时间调试的经历，提醒开发者关注代码细节。

1. 问题背景与经历
• 作者在调试时随意插入了 console.log('here') 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。
• 缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

2. 原因分析
• StackOverflow 社区成员 Sebastian Simon 解释了该错误机制：没有分号时，代码被解析为 console.log()(function(){})，而 console.log() 的返回值是 undefined，无法作为函数调用。
• 提供了最小可复现实例代码来说明问题本质。

3. 社区互动与反思
• 在 Mastodon 社区，Andre 提醒作者 Chris Coyier 的 Web Development Merit Badges（网页开发徽章）。
• 作者幽默地调侃自己，为“因为一个字符小失误花了一小时调试”自豪地领取了徽章，凸显开发中对细节的重视与共鸣。

Tomayac

What a diff'rence a semicolon makes

The personal blog of Thomas Steiner

AI 摘要：本文系统梳理了独立开发者在 Web 全栈开发过程中，如何以低成本（穷鬼套餐）快速启动和迭代产品。作者结合自身实战，详细分析了主流的技术栈（以 Next.js 为核心）、多种低成本云部署模式（如免费云平台、全栈 Cloudflare、自托管等），以及项目启动常见成本项（域名、邮件、支付等）的选择建议，旨在帮助新手独立开发者找到成本控制与效率兼顾、专注产品本身的最佳路径。

1. 最新技术栈的选择
• 推荐 Next.js 作为首选全栈开发框架，因其生态活跃、文档齐全、AI 代码生成友好。
• 详细列举配套库与工具（如 Drizzle ORM、Better Auth、Stripe、React Email、Tailwind CSS 等），并说明每类工具的优点与适用场景。
• 解释选择原则，强调“三方依赖的通用性”及“易于在不同平台部署”。

2. 明确你的需求和成本
• 强调“盈利/准备盈利”型项目需严肃对待成本预算。
• 简述独立开发三种低成本路径：A. 利用云平台免费额度（如 Supabase/Neon/Vercel 等），B. 全部服务基于 Cloudflare，C. 自托管（廉价 VPS + 开源 PaaS 平台）。
• 分析各模式优劣：云平台部署简单、运维压力小但成本不稳定；Cloudflare 适合高流量/无收入阶段；自托管自由度高但需解决运维/安全等问题。

3. 云平台方式
• 细分为“入门级完全免费组合”“面向小商业的稳定运营组合”，逐项对比主流云平台（Vercel、Railway、Fly.io）、数据库（Supabase、Neon、Upstash）、对象存储（Cloudflare R2）、邮件服务（Resend）等的免费额度与核心优缺点。
• 强调高流量/免费额度耗尽时，成本可能快速上涨，需要有盈利模式支撑。
• 建议新手优先选择云服务，节约运维精力，把重心放在产品与营销上。

4. 完全利用 Cloudflare 平台
• 总结 Cloudflare 作为一体化服务平台的优势（免费 CDN、极低成本、服务丰富），适用于“愿意折腾”及“高流量低收入”独立开发者。
• 介绍 Workers 计算、D1 数据库、KV 存储、R2 对象存储等服务的免费额度及场景限制。
• 结合实际项目案例，说明小型/海外流量项目长期运行的可行性。

5. 自托管部署
• 分析自托管的技术栈组合、支持工具（如 Dokploy、Coolify、Uptime Kuma、Umami、Unsend、n8n等），一并覆盖数据分析、监控、邮件、数据库等服务。
• 优点：极致成本控制与可控性，缺点：需自担安全、备份、扩容及持续运维压力。

6. 其它成本项
• 域名：推荐优先在 Cloudflare 购买，兼顾成本、速度、稳定性。
• 邮件服务：若依赖登录/营销可选择 Resend、plunk 或自托管方案（Unsend+AWS SES等）。
• 支付平台：建议优先 Stripe/Paddle，初期可探索 Creem.io 等新平台并分享认证/提现实战经验。

7. 最后
• 提醒“穷鬼套餐不等于无止境折腾”，独立开发应聚焦产品与市场验证，合理分配时间资源。
• 强推 NextDevKit 作为一键多平台部署利器，降低初学者技术门槛。
• 鼓励读者分享各自技术栈与实践经验，集思广益，持续优化开发与部署流程。

Guangzhengli

独立开发穷鬼套餐(Web实践篇)

AI 摘要：本文介绍了当前 CSS 渐进网格布局（Masonry Layout）的浏览器支持现状及其多种语法方案，并提出了一种通过简洁 JavaScript 实现兼容所有主流浏览器的马赛克布局方法。作者详细解释了实现原理、兼容图片和响应式布局的技巧，同时分享了相关工具库的使用方法，为 CSS Grid 用户提供了生产可用、灵活可控的 masonry 解决方案。

1. CSS Masonry 布局的社区动态与支持现状
• Masonry 布局的引入持续讨论中，语法有三种主要提案：display: masonry、grid-template-rows: masonry、item-pack: collapse
• 当前未达成统一标准，不同浏览器支持程度不一（如 Firefox、Chrome 正在分别测试不同语法）
2. JS Polyfill 实现 Masonry 兼容性
• 介绍如何检测浏览器是否原生支持 grid-template-rows: masonry
• 若未支持，则使用 Polyfill 方案，纯 JavaScript 实现 Masonry 效果（仅需约 66 行代码）
3. Masonry 实现原理详解
• 利用 CSS Grid 的特性，将 grid-auto-rows 设为 0，row-gap 设为 1px
• 通过 JS 获取每个网格项实际高度后，调整 grid-row-end，实现项自适应高度并“堆叠”
• 恢复正确的行间隔后，布局完成，兼容性强
4. 对图片和媒体的兼容处理
• 首次渲染时图片未加载完成会导致布局错乱，需监听图片/视频加载后再计算布局
• 提供相关 JS 辅助函数，确保所有媒体加载完毕再执行布局函数
5. 响应式自适配
• 使用 ResizeObserver 监听容器宽度变化，实现自适应响应式布局
6. 工具库与复用建议
• 推荐使用作者开源的 Splendid Labz 库快速集成 Masonry 布局及更多布局工具
• 提供 npm、CSS、JS 完整使用示例

CSS-Tricks

Making a Masonry Layout That Works Today | CSS-Tricks

I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.

◂Ⓘ▸YAYOI の 夢 (@Yayoi_no_yume)我不知道啊，我看见Nekopara我就进来了，结果发现这是一款2.9k Stars的超级长文本翻译工具！
如果有不好意思上传给平台的“正经”文本，还能调用本地的SakuraLLM（特别训练的中日翻译模型）来进行翻译。
先星星为敬！
https://github.com/NEKOparapa/AiNiee

GitHub

GitHub - NEKOparapa/AiNiee: 一款专注于Ai翻译的工具，一键自动翻译RPG SLG游戏，Epub TXT小说，Srt Vtt Lrc字幕，Word MD文档等等复杂长文本。

一款专注于Ai翻译的工具，一键自动翻译RPG SLG游戏，Epub TXT小说，Srt Vtt Lrc字幕，Word MD文档等等复杂长文本。 - NEKOparapa/AiNiee