呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #AI
The Post-Developer Era

AI 摘要:作者反思两年前发表的"前端开发终结"一文,并重新评估 AI 对软件开发行业的实际影响。尽管 AI 工具在编程中的应用越来越广泛,但它们更多是作为开发者的辅助工具而非替代品。文章分析了 AI 工具的局限性、当前就业市场状况,并对开发者行业的未来给出了谨慎乐观的预测,鼓励有志成为开发者的人不要因 AI 炒作而气馁。

1. 回顾与现状
• 2023 年 3 月作者发表了 "The End of Front-End Development" 一文,当时许多人预测 AI 将很快取代人类开发者
• 两年后的今天,作者重新评估这一预测是否准确,我们是否已进入"后开发者时代"

2. 公司与 AI 的使用情况
• Forbes 报道谷歌 25% 的代码由 AI 编写,但这并不意味着 AI 独立完成了 25% 的工作
• AI 仍需人类开发者引导、编辑和整合输出结果
• 尚未有大型科技公司完全用 AI 替代开发团队
• 声称能完全替代人类开发者的初创公司产品(如 Devin)在实际使用中遇到很多问题

3. 作者的 AI 工具使用体验
• 使用 Cursor 这类 AI 驱动的 IDE 确实能显著提高效率
• 但 AI 需要持续引导,类似于高速公路上的"巡航控制",仍需人类"掌握方向盘"
• 如果不懂编码,无法识别 AI 输出中的细微但关键的问题
• 某些任务 AI 表现出色,但对很多任务而言,人工编码仍然更快更有效
• 理想的工作方式是人机配合,针对不同任务选择最佳解决方案

4. 当前的就业市场状况
• 就业市场仍然艰难,但并非因为公司用 AI 取代了开发者
• 困难的原因包括:宏观经济因素、大规模裁员导致市场上有大量高素质开发者、对 AI 能力的过度期待

5. 未来展望
• 公司仍然需要人类开发者构建产品
• AI 支持者仍在宣称 AI 即将取代人类开发者,但实际证据不支持这一观点
• AI 模型确实在不断进步,但更多是渐进式改进而非革命性突破
• 开发者可能面临的真正风险是过度依赖 AI 而不理解底层代码,从而失去必要的技能
• AI 实际上可以成为学习编程的强大辅助工具

6. 结论与建议
• 作者预测在不久的将来可能会出现"开发者复兴"
• 熟练的开发者配合强大的 LLM 可以创造惊人成果
• 鼓励有志从事软件开发的人不要因 AI 炒作而气馁
• 公司仍在招聘,这种情况在可预见的未来不会停止


author Josh W. Comeau The Post-Developer Era • Josh W. Comeau
GitHub目前已恢复中国大陆访问

Itdog

📮投稿 ☘️频道 🌸聊天
#优质博文 #react #前端 #next #auth
Authorization in Next.js
If you take one thing away from this tutorial, it should be that authorization should be as close as possible to your sensitive data. This means that you should have authorization checks in your API, Service, and Data Access Layers. This is the most important part of your application and should be implemented in a way that is secure and maintainable.


AI 摘要:本文深入探讨了在 Next.js 应用中实现授权的多层次策略,重点围绕 React Server Components 和 Server Actions 展开。作者强调授权应尽可能靠近数据源(如 API 层、服务层和数据访问层),并详细分析了路由、UI 和中间件中的授权实现方案及其权衡,同时指出中间件授权的性能隐患和局限性。

1. 数据访问授权
• 核心原则:授权应在 API 层作为读写操作的第一道防线,通过自定义查询函数和服务端动作(Server Actions)实现。
• 代码示例:
• getPosts 和 createPost 函数中通过 getAuth 校验用户会话,未授权时抛出错误或重定向。
• 使用 cache 优化会话验证性能,避免重复数据库查询。
• 分层架构:
• 服务层:处理业务逻辑和精细权限(如角色/所有者校验)。
• 数据访问层:作为最后防线,但建议权限逻辑集中在服务层。

2. 路由授权
• 页面组件检查:在 Server Component 的入口(如 PostsPage )调用 getAuthOrRedirect 实现基础防护
• 布局组件优化:
• 通过 AuthLayout 集中管理路由组(如 (authenticated))的授权,提升开发效率但存在安全风险(恶意用户可能绕过布局直接访问页面)
• 权衡策略:建议结合后端授权(策略1)或在页面组件重复校验(策略2)
• 多角色扩展:如 AdminLayout 实现管理员路由隔离

3. UI 授权
• 根据 useAuth 动态隐藏/禁用 UI 元素(如删除按钮),但强调这仅是辅助手段,核心安全仍需依赖后端校验

4. 中间件授权
• 性能问题:避免中间件中直接查询数据库,仅做轻量级检查(如会话 Cookie 存在性)
• 边缘运行时限制:不支持部分 Node.js 功能(如 Prisma ORM 需适配)
• 建议将关键授权逻辑保留在 API/服务层


author Robin Wieruch Authorization in Next.js
#碎碎念 ds 太便宜了泪目,我用 AI 摘要猛猛这俩月也就用了这么点儿,看来可以更猛猛造了
#优质博文 #前端 #性能优化 #react #工程化
How I Reduced My React Bundle Size by 30% (With Real Examples)

AI 摘要:本文通过实际案例演示了 7 种减少 React 应用打包体积的方法,最终实现 30% 的优化效果。核心策略包括消除副作用代码、清理未使用的依赖、避免 Barrel 文件、优化导出方式、替换重型库、动态加载非关键资源等,并提供了详细的代码对比和工具推荐。

1. 前言
• 问题背景:随着应用迭代,打包体积膨胀导致构建变慢、用户体验下降。
• 优化前 vs 优化后:从 283.39 kB 降至 198.33 kB,减少 30%。
2. 具体优化步骤
• Step 1: 消除文件副作用
• 移除 window 全局副作用代码,避免强制打包未使用的文件。
• Step 2: 清理未使用的文件和依赖
• 使用 npx knip 检测并删除冗余代码(如未使用的 lodash-es )。
• Step 3: 避免 Barrel 文件
• 直接导入组件而非通过 index.js 聚合,减少不必要的文件处理。
• Step 4: 直接导出函数而非对象/类
• 仅导出被调用的函数(如 getTimeInFormat ),避免打包未使用的方法。
• Step 5: 替换重型库
• 用轻量级 dayjs 替代 moment.js ,显著减小体积。
• Step 6: 动态加载非关键包
• 按需加载 fuse.js(搜索功能库),拆分初始包。
• Step 7: 动态加载非关键组件
• 使用 React.lazy 延迟加载非首屏组件(如 Dashboard)。
3. 额外建议
• 在 package.json 标记 "sideEffects": false 增强 Tree-Shaking。
• 使用 Bundlewatch 监控打包体积。


author Ndeye Fatou Diop ✨ How I Reduced My React Bundle Size by 30% (With Real Examples)
#优质博文 #前端 #tailwind #css
tailwind 总给我一种前端界的原神的感觉(暴论x
认真的说,这篇写挺好的,有一些 tailwind 实用小技巧。
Tailwind’s @apply Feature is Better Than it Sounds

AI 摘要:本文为 Tailwind CSS 的 @apply 功能辩护,认为其价值被严重低估。作者通过对比 Sass 的 @include 机制,展示了 @apply 在代码复用、响应式设计和可维护性上的优势,并提供了实用案例(如布局工具类)证明其灵活性,同时指出其虽不如 Sass 混入强大,但结合现代 CSS

1. 作者对 Tailwind 的矛盾态度
• 肯定 Tailwind 方法论在样式可维护性和性能上的优势,但批评原生 Tailwind 的某些设计。
• 强调 @apply 是被低估的核心功能,尽管 Tailwind 创始人 Adam Wathan 曾建议避免使用。

2. @apply 的功能解析
• 允许将 Tailwind 工具类复制到自定义 CSS 中,类似 Sass 的 @include
• 示例对比单属性工具类(如 p-4)与复杂工具类的应用场景。

3. 与 Sass 混入的对比
• 优势 :
• 直接用于 HTML 无需额外选择器(如 <div class="utility">)。
• 支持响应式变体(如 md:utility)。
• 劣势 :
• 不支持多变量或逻辑控制(如 Sass 的 @if/@for)。

4. 实用案例展示
• 布局工具类 :定义 vertical 和 horizontal 工具类,通过 flex-direction 快速切换布局,并支持响应式(如 sm:horizontal)。
• 网格系统 :grid-simple 工具类结合 CSS 变量(--cols)动态调整列数,减少重复代码。

5. 灵活使用建议
• 混合 @apply 与原生 CSS 编写复杂布局(如媒体查询内应用工具类)。
• 提倡将 Tailwind 视为工具而非教条,平衡实用性与可读性。


author Zell Liew Tailwind's @apply Feature is Better Than it Sounds | CSS-Tricks
#新动态 #前端 #优质博文 #react
JavaScript Weekly #731 — April 11, 2025

AI 摘要:本期 JavaScript Weekly 聚焦 2025 年前端生态的最新动态,涵盖 Next.js 15.3 的 Turbopack 构建优化、Node.js 测试最佳实践,以及 Tauri 与 Electron 的桌面应用开发对比。同时介绍了 JavaScript 新特性,以及多个开源工具更新。

1. 博文与教程
2025 年开发者应掌握的现代特性:迭代器助手、structuredClone() 深拷贝、集合操作等(Suren Enfiajyan 撰文)。
Node.js 测试最佳实践:一群精通 Node 的开发者撰写的关于现代 Node 测试的详细指南。
Tauri vs. Electron: performance, bundle size, and the real trade-offs:对比 Rust 框架 Tauri 的性能优势与适用场景(Costa Alexoglou 分析)。
React Reconciliation:组件背后的隐藏引擎:React 使用协调算法根据虚拟 DOM 的更改来更新 DOM。了解它的工作原理对于开发更快的应用程序至关重要。

2. 工具与库更新
Next.js 15.3:现在包括 Turbopack 构建
• Cloudflare 更新:支持 Next.js 一键部署至 WorkersCloudflare Vite 插件 v1 发布,现在可以在单 Worker 中部署全栈应用(支持 React Router、Astro、Vue.js、Svelte),可以在 Git 仓库中添加 “部署到 Workers”按钮
• pnpm 10.8、Prisma 6.6、React Native 0.79、Bun 1.2.9......

3. 社区动态
• npm 令牌问题:npm 注册表疑似清除所有访问令牌,建议用户临时创建新令牌。
• Git 20 周年: GitHub 的 Taylor Blau 采访了 Linus Torvalds, 讨论了这一里程碑和该项目的背景。
p5.j​​s 2.0 似乎即将发布——它的第八个 Beta 版本刚刚发布。beta 2 的发行说明详细介绍了即将推出的功能。
• Mozilla 的 Simon Pieters 告诉我们, H1 元素的默认样式正在发生变化 ,并且浏览器也开始对嵌套部分标题的默认样式进行更改。
Some features that every JavaScript developer should know in 2025
#优质博文 #前端 #css #svg #filter
1. CSS/SVG 中的圆角三角形框
AI 摘要:本文探讨了如何使用 CSS 和 SVG Filter ( feGaussianBlur ) 创建带有圆角的三角形框,并分享了作者在优化 CSS 选择器性能过程中的经验与教训。

2. CSS Shapes with rounded corners
AI 摘要:本文介绍了一种使用 CSS 和 SVG 滤镜为任意形状添加圆角的技巧,通过结合 clip-path 和 SVG 滤镜实现复杂形状的平滑圆角效果,并讨论了该技术的应用场景与浏览器兼容性问题。
#碎碎念 #前端 #趣站 #动画 #demo
感觉在手机上加个陀螺仪的效果会更美妙更好玩儿,点子源源不断的冒出来了!(为什么我想到了陀螺仪因为之前做过类似的需求,ios 上陀螺仪权限得请求,加了陀螺仪就是那种很好玩儿的游戏了hhh)
₍˄·͈༝·͈˄*₎◞ ̑̑

katon (@hellokaton):😎 听说你很懂 Web 渲染?
试试这个用 Three.js 和 Ammo.js 搞的 3D 物理引擎个人主页,
让你在浏览器里体验真实世界的碰撞和互动!
➤ 实时碰撞、互动,物理效果炸裂
➤ 光线投射,点哪打哪
➤ 移动端也能流畅运行
在线体验:https://0xfloyd.com
源码仓库:https://github.com/0xFloyd/Portfolio_2020


https://fixupx.com/hellokaton/status/1910125154929357277
#优质博文 #前端 #typescript
难得一见的比较不同的思路
Understanding the Value of TypeScript Enums

AI 摘要:本文为 TypeScript 的枚举(enum)功能辩护,指出当前对其的批评多源于误用而非特性本身的问题。作者强调枚举应作为符号化(symbolic)工具用于内部逻辑,而非直接绑定字面值或暴露为公共 API,并详细分析了错误使用枚举的三大风险及正确实践方法。

1. 引言与背景
• 近年来越来越多开发者批评 TypeScript 的枚举功能,倾向于使用联合类型或常量对象。
• 作者认为问题在于对枚举的误解和误用,而非特性本身。

2. 枚举的符号化本质
• 枚举应代表抽象概念而非具体值(如 "red" 或 #FF0000 ),类似 ES6 的 Symbol 特性。
• 示例:交通灯状态应通过 enum TrafficLight { Red, Yellow, Green } 抽象表示,而非绑定字符串或颜色代码。

3. TypeScript 枚举的陷阱
• 允许字面值赋值:如 enum TrafficLight { Red = "red" } 导致以下问题:
• 抽象泄漏:逻辑层与表示层耦合(如 UI 直接依赖 "red" 字符串)。
• 脆弱性:字符串比较易受大小写或拼写错误影响。
• 公共 API 污染:枚举值暴露后难以修改(如后端 API 返回 "Processing")。

4. 正确使用建议
• 仅用于内部逻辑:枚举值应作为代码中的符号标签,不直接序列化或展示。
• 显式转换层:通过 Map 或映射函数将枚举值转换为外部需要的表示形式。

5. 结论
• 批评者常抱怨枚举“不易序列化”,但作者指出这是误用——枚举本就不应直接用于序列化场景。
• TypeScript 枚举虽有设计差异,但在符号化场景中仍具价值,关键在于区分抽象与具体表示。


author Yazan Alaboudi Understanding the Value of TypeScript Enums
#优质博文 #前端 #css #javascript #性能优化 #新动态
Smashing Newsletter #502: New Front-End Techniques

AI 摘要:本期探讨了前端技术的最新进展,包括 CSS 自定义 <select> 菜单、更柔和的文本下划线样式、新的 command 和 commandfor 属性,以及 scheduler.yield() 方法优化任务调度。此外,还介绍了流体排版(fluid typography)的改进思路、高延迟环境下的性能优化策略,以及 Chrome 用户体验报告中新增的往返时间(RTT)指标。

1. 新交互属性:command 与 commandfor
• 替代 popovertargetaction 和 popovertarget,无需 JavaScript 即可触发浏览器内置行为,提升按钮交互的可访问性(如自动关联 aria-expanded)。
• 推荐阅读 Keith Cirkel 的技术解析及他在二月份伦敦 Web 标准聚会上的演讲

2. 链接样式优化方案:Chris Coyier 对经典的蓝色链接进行了改进 ,提出通过 currentColor 和透明度调整下划线,平衡可识别性与阅读流畅性。

3. 完全可定制的 <select> 元素
• Chrome 135+ 支持通过 CSS 定制下拉菜单的所有组件(包括选项图标),并支持嵌入 HTML 内容(如图片)。
• Adam Argyle 总结了您需要了解的有关可自定义 <select> 及其提供的创意可能性的所有信息

4. 高延迟环境优化策略:Chrome 用户体验报告新增 RTT(往返时间)指标,Harry Roberts 提供应对高延迟的实践建议:协议优化、缓存策略等。

5. 流体排版再思考:Miriam Suzanne 指出当前 clamp() 方案的局限性,主张以用户默认字体大小为基准,避免“魔法数字”计算。

6. Web 平台开发速查表
• Patrick Brosset 整理浏览器新特性追踪与开发者参与标准制定的速查表,它重点介绍了如何追踪可用的功能、浏览器的新功能,以及如何通过发表自己的意见来影响平台的开发。

7. 任务调度优化:scheduler.yield()
• 新的 scheduler.yield() 方法 可以帮助我们分解长任务,从而消除在返回主线程和完成任务之间出现延迟的风险
• 优先执行现有任务而非新建任务,减少主线程阻塞(需注意 Chromium 浏览器兼容性)。
• 该 API 目前仅适用于基于 Chromium 的浏览器,因此如果您决定使用它,则需要为其他浏览器提供回退功能。


author Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il). Introducing command and commandfor  |  Blog  |  Chrome for Developers
#demo #前端 #动画 #codepen
好酷,好有创意的黑洞。
Creative Black Hole
It's hard to avoid getting totally drawn in to the soft gradients and texture details of Antoine Wodniack's neon JavaScript black hole.
在 Antoine Wodniack 的霓虹 JavaScript 黑洞作品中,你很难不被柔和的渐变和纹理细节所吸引。
#优质博文 #新动态 #node #tools
Node Weekly #572

AI 摘要 :本期 Node Weekly 聚焦 JavaScript 生态的重要更新与工具动态,包括 Express 5.1 正式成为 npm 默认版本、Node.js LTS 版本生命周期提醒、npm 恶意软件事件,以及 V8 引擎优化进展。同时推荐了开发者工具链优化、开源替代方案(如 Teable 和 Neutralinojs),并汇总了 Vue.js 社区报告、LLM 与浏览器交互等前沿技术动态。

1. Express 5.1 成为 npm 默认版本
• Express 5.0 去年发布后经历安全审计和治理重构,5.1 版本现标记为 npm 官方 "latest" 版本。
• 升级需谨慎,官方提供迁移指南。
• 维护者 Wes Todd 幽默称 Express 如同“僵尸”般难以淘汰,团队努力使其恢复活力。(ref)

2. Node.js 版本更新与安全事件
• Node v18.20.8 (LTS) :本月将结束生命周期,建议升级至 v20/v22。 (ref)
• CI 基础设施漏洞 :Node.js 测试环境因未公开漏洞临时限制访问,完整报告待发布。
• npm 恶意软件 :首次发现本地安装包感染其他合法包的反向 Shell 攻击(ReversingLabs 报告)。

3. 工具与框架更新
Teable:Postgres 上的开源 Airtable 替代品 :基于 NestJS 和 Postgres 的开源 Airtable 替代方案。
Nōdo :通过 Unix Socket 实现 Ruby 调用 Node.js 函数的 IPC 工具。
Playwright MCP :微软推出的 LLM 与浏览器交互协议(支持 Claude、Cursor 等模型)。
Neutralinojs 6.0 :为 Electron 之类的东西提供了一种有趣的轻量级替代方案,因为它仍然允许您构建在 Linux、Windows 和 macOS 上运行的应用程序,但 Chromium 并未捆绑——而是使用现有安装的浏览器引擎。
ls-lint 是一个用于检查项目中文件和目录名称的成熟工具。
• 其他工具版本更新 :zx 8.5(Google 脚本工具)、node-llama-cpp 3.7(本地 LLM)、Fastify 5.2.2 等。
Gemini AI 新功能:支持生成 HTML/React 组件的画布模式。
开发者工具创新:Simon Willison 推出“不完整 JSON 格式化工具”解决调试痛点。

4. 教程与文章
Land Ahoy: Leaving the Sea of Nodes — V8 JavaScript 引擎团队核心成员发表的一篇技术性很强的文章,解释了 Turbofan(V8 的优化编译器之一)的局限性。如果您不关心 JavaScript 的内部编译和运行方式,请放心,V8 团队正在努力使其运行得更快!
•  如何使用 Node.js 和 Express 设置 TypeScript 本文详细介绍了如何在 Node.js 和 Express 项目中配置 TypeScript,包括初始化项目、安装依赖、配置编译器选项以及设置开发工具链(如 nodemon 和 concurrently)。
Trender07's comment on
#碎碎念 近况:吃布洛芬都挡不住的24h头痛和对世界的不真实感,好惨哦呜呜呜头痛的连发频道的心情都没有
Copilot 搞了个什么 Copilot as collaborator

然后这个 collaborator 在宣传图里面嗯把对的改成错的...

(useEffect 里面不能直接 await,一般写 promise.then(setState) 这种)

但是 LLM 不太会犯这种低级错误,说明是阿三做图做错了(
Back to Top