前端周刊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 的对比心路历程。推荐指数:⭐⭐⭐

相关推荐
沿着路走到底18 分钟前
JS事件循环
java·前端·javascript
子春一236 分钟前
Flutter 2025 可访问性(Accessibility)工程体系:从合规达标到包容设计,打造人人可用的数字产品
前端·javascript·flutter
白兰地空瓶42 分钟前
别再只会调 API 了!LangChain.js 才是前端 AI 工程化的真正起点
前端·langchain
jlspcsdn2 小时前
20251222项目练习
前端·javascript·html
行走的陀螺仪2 小时前
Sass 详细指南
前端·css·rust·sass
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ2 小时前
React 怎么区分导入的是组件还是函数,或者是对象
前端·react.js·前端框架
LYFlied2 小时前
【每日算法】LeetCode 136. 只出现一次的数字
前端·算法·leetcode·面试·职场和发展
子春一22 小时前
Flutter 2025 国际化与本地化工程体系:从多语言支持到文化适配,打造真正全球化的应用
前端·flutter
QT 小鲜肉3 小时前
【Linux命令大全】001.文件管理之file命令(实操篇)
linux·运维·前端·网络·chrome·笔记
羽沢313 小时前
ECharts 学习
前端·学习·echarts