前端周刊431期(2025年9月8日–9月14日)

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

本期最突出的主题有两个:安全与原生化 。npm 包接连被劫持,影响范围达到每周 20 亿次下载,说明供应链攻击已经不只是"安全部门"的问题,而是前端开发者必须随时警惕的风险。同时,原生 Web API 的能力正在不断增强,从 <dialog>Subgrid,再到"安全数组方法",都在逐步替代我们过去依赖的冗余封装和 polyfill,这背后是浏览器平台快速进化的体现。

工具生态方面,Cursor、Bun、Deno、Vite、Fresh 等仍在快速迭代,开发者既兴奋又焦虑:选择太多,踩坑风险也大。AI 工具的排行榜则再次证明,AI 已经成为前端工具链的"默认选项" ,不再是锦上添花,而是开发体验的必需部分。

CSS 板块依旧火热,过去五年的百余特性几乎重塑了 CSS 的能力边界:subgridanchor-positioningcorner-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 的对比心路历程。推荐指数:⭐⭐⭐

相关推荐
Bear on Toilet2 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
风若飞2 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑2 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia2 小时前
如何找回Harbor密码
前端
码码哈哈0.02 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩2 小时前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆2 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了2 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆2 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js