前端周刊:与全球前端开发者同步成长~ 💬 扫码进群

本期最突出的主题有两个:安全与原生化 。npm 包接连被劫持,影响范围达到每周 20 亿次下载,说明供应链攻击已经不只是"安全部门"的问题,而是前端开发者必须随时警惕的风险。同时,原生 Web API 的能力正在不断增强,从
<dialog>
到Subgrid
,再到"安全数组方法",都在逐步替代我们过去依赖的冗余封装和 polyfill,这背后是浏览器平台快速进化的体现。工具生态方面,Cursor、Bun、Deno、Vite、Fresh 等仍在快速迭代,开发者既兴奋又焦虑:选择太多,踩坑风险也大。AI 工具的排行榜则再次证明,AI 已经成为前端工具链的"默认选项" ,不再是锦上添花,而是开发体验的必需部分。
CSS 板块依旧火热,过去五年的百余特性几乎重塑了 CSS 的能力边界:
subgrid
、anchor-positioning
、corner-shape
都让布局与交互更精细、更语义化。这意味着前端的"技巧型黑魔法"会越来越少,取而代之的是标准化、可维护的写法。
Web 开发
🔹学习 Web 开发:实现 Web 服务器:从零动手写 Web 服务器,理解核心运行机制。推荐指数:⭐⭐⭐
🔹如何控制好 package.json:依赖管理的最佳实践,避免项目被依赖拖垮。推荐指数:⭐⭐⭐⭐
🔹学习 Web 开发:前端框架:带你梳理主流前端框架的优缺点与选择逻辑。推荐指数:⭐⭐⭐
🔹黑客劫持每周下载 20 亿次的 npm 包,供应链攻击再现:影响范围极大的 npm 安全事件。推荐指数:⭐⭐⭐⭐⭐
🔹npm 的 debug 和 chalk 包被攻破:知名调试与终端输出工具遭受攻击。推荐指数:⭐⭐⭐⭐
🔹告别自定义弹窗:原生 <dialog>
元素的力量:为什么该抛弃冗余的自定义 Modal,拥抱原生能力。推荐指数:⭐⭐⭐⭐
🔹2025 年,原生 Web API 能取代自定义组件吗?:探讨 Web 平台 API 是否足够强大替代繁杂封装。推荐指数:⭐⭐⭐
工具
🔹如何在 Cursor 中选择合适的模型:用对模型,提升 AI 辅助开发体验。推荐指数:⭐⭐⭐⭐
🔹Deno 2.5:配置文件中新增权限控制:更精细化的权限管理,提升安全性。推荐指数:⭐⭐⭐
🔹Fresh + Vite:新一代全栈框架:结合 Fresh 的服务端能力与 Vite 的极速构建。推荐指数:⭐⭐⭐⭐
🔹幕后揭秘:Bun install 如何运作:Bun 团队带你看安装流程背后的优化细节。推荐指数:⭐⭐⭐⭐
🔹前端工具太多了?如何管理工具过载:在"工具爆炸"时代找到平衡点。推荐指数:⭐⭐⭐⭐⭐
🔹AI 开发工具排行榜与对比(2025 年 9 月版):盘点当下最火 AI 开发工具。推荐指数:⭐⭐⭐⭐
Demo
🔹基于 Rapier & Three.js 的有机粒子实验:交互式 3D 粒子实验展示。推荐指数:⭐⭐⭐
🔹浏览器中的"液态玻璃":CSS 与 SVG 折射效果:酷炫的玻璃质感动画效果实现。推荐指数:⭐⭐⭐⭐
CSS
🔹修 Bug 的时候,也顺手修关键问题:别只顾表面优化,基础才是关键。推荐指数:⭐⭐⭐
🔹过去 5 年的 100+ CSS 新特性大盘点:一次性带你过完现代 CSS 进化史。推荐指数:⭐⭐⭐⭐⭐
🔹CSS 色彩渐变动画探索:如何让颜色在网页上自然流动。推荐指数:⭐⭐⭐⭐
🔹CSS 锚点定位下的"跟随者"模式:用 anchor-positioning 实现动态跟随效果。推荐指数:⭐⭐⭐⭐
🔹把 CSS 层级引入现有项目:渐进式改造的思路。推荐指数:⭐⭐⭐
🔹不要继承 Box Model:盒模型继承陷阱解析。推荐指数:⭐⭐⭐
🔹断点列布局的五种实现方式:不同方法的优缺点对比。推荐指数:⭐⭐⭐⭐
🔹corner-shape 能做什么?:探索 CSS 新属性的潜力。推荐指数:⭐⭐⭐
🔹CSS 中的组合思想:像写函数一样写 CSS。推荐指数:⭐⭐⭐
🔹Astro 组件中不用 important 也能覆盖 CSS:利用层级覆盖样式。推荐指数:⭐⭐⭐⭐
🔹Subgrid:让元素完美对齐:CSS 网格布局的"完全体"。推荐指数:⭐⭐⭐⭐⭐
JavaScript
🔹终于来了:安全的数组方法:JS 新增安全方法,避免因索引越界崩溃。推荐指数:⭐⭐⭐⭐
React
🔹构建一个状态管理库:React 状态管理实践。推荐指数:⭐⭐⭐
🔹常见 React 错误及其修复方法:帮你避开踩坑。推荐指数:⭐⭐⭐⭐
🔹React Router v7 的基于文件路由 ------ 为什么还要可选?:文件式路由的争议点。推荐指数:⭐⭐⭐
🔹React 基础:如何高效使用 useCallback:避免不必要的渲染。推荐指数:⭐⭐⭐⭐
🔹Cursor 的项目规则如何提升 Next.js 开发体验:借助 AI 工具提升大型项目可维护性。推荐指数:⭐⭐⭐⭐
Libraries
🔹发布 Reciprocate:让 HTML Web Components 响应式的甜蜜方案:增强组件响应性的新库。推荐指数:⭐⭐⭐
🔹Mediabunny ------ 浏览器端的视频音频读写转换库:直接在浏览器里操作媒体文件,比其他方案更快。推荐指数:⭐⭐⭐⭐
🔹试过 Solid.js 后,我开始讨厌 React:开发者对 Solid.js 与 React 的对比心路历程。推荐指数:⭐⭐⭐