呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #react #性能优化
这篇写的是真棒,单独拉出来。
Advanced React in the Wild
author Addy Osmani, Hassan Djirdeh
这篇写的是真棒,单独拉出来。
Advanced React in the Wild
AI 摘要:本文通过五个真实案例(Vio、DoorDash、Preply、GeekyAnts、Inngest)探讨了 React 和 Next.js 在大型项目中的高级实践,涵盖性能优化(如 INP、LCP 指标)、服务端渲染(SSR)与客户端渲染(CSR)的平衡、缓存策略、状态管理改进及开发者体验提升,最终提炼出 2022-2025 年的行业最佳实践。
1. Introduction
• React 和 Next.js 被用于高性能项目,案例聚焦性能优化(如 INP、LCP)、SSR/CSR 权衡、缓存策略及开发者体验改进。
2. Featured Case Studies
• Vio:通过代码分割、事件优化和状态管理,将 INP 从 380ms 降至 175ms。
• 关键措施:性能分析、React.lazy() 懒加载、事件防抖、React.memo 减少重渲染。
• DoorDash:从 CSR 迁移至 Next.js SSR,LCP 提升 65%-67%,页面加载速度提高 12%-15%。
• 策略:增量迁移、SSR 懒加载、共享状态桥接(AppContext)。
• Preply:未使用 React Server Components 仍优化 INP 至 200ms 以下,预估年节省 20 万美元。
• 方法:性能分析、React 18 并发特性(Suspense)、事件处理优化、代码分割。
• GeekyAnts:升级至 Next.js 13 并采用 RSC,Lighthouse 分数从 50 提升至 90+。
• 改进:服务端组件减少客户端 JS、数据获取迁移至服务端、流式 SSR。
• Inngest:采用 Next.js App Router 实现即时 UX 和更好 DX。
• 亮点:静态预渲染 + 流式 SSR、嵌套布局状态保留、缓存控制优化。
3. Aggregated Takeaways (2022–2025)
• 性能优化:聚焦 Core Web Vitals(如 INP、LCP),减少 JS 负载,拆分长任务。
• SSR/CSR 平衡:SSR 用于首屏和 SEO,CSR 增强交互性,渐进式水合提升体验。
• 缓存策略:CDN 边缘缓存、Next.js 数据缓存、客户端状态缓存(如 React Query)。
• 状态管理简化:减少全局状态,优先使用 Context 和专用库(如 Zustand、React Query)。
• 开发者体验:Next.js 约定式路由、TurboPack 加速构建、Suspense/Error Boundaries 标准化。
• 可访问性:语义化 HTML、ARIA 标签、键盘导航测试。
• 用户体验:快速加载(如 DoorDash 的 LCP 优化)、无缝导航(流式渲染)、跨设备一致性。
4. Conclusion
• 核心建议:测量关键指标、采用 Next.js 高级功能(RSC、App Router)、合理缓存、简化状态管理,并将可访问性和 UX 纳入设计阶段。
author Addy Osmani, Hassan Djirdeh
#优质博文 #前端 #新动态
🚀 Frontend Focus #688 — April 16, 2025
🚀 Frontend Focus #688 — April 16, 2025
AI 摘要(注:重复多次的内容会手动删一下):本期 Frontend Focus 涵盖前端领域多项重要动态,包括浏览器默认样式更新、桌面应用开发框架对比、AI 对开发者角色的影响,以及最新的工具和教程资源。核心内容涉及 H1 元素样式变更、Tauri 与 Electron 的对比、CSS 新特性实践指南,以及 Astro 5.7 等工具更新。
1. 社区动态
• H1 元素默认样式变更:浏览器正在调整嵌套标题的默认样式,开发者需关注兼容性问题(Simon Pieters)。
• Edge 134 性能显著提升,Opera Mini 浏览器集成 AI 助手。
• 🙁 和许多其他人一样,我们很遗憾地听到 Adam Argyle 不再在 Google 工作。 多年来,他一直是 Chrome 的 CSS 开发者代言人,是一股重要的正义力量。
• Astro 5.7 发布: 引入了 SVG 组件、实验性字体 API 支持、错误修复等。
2. 博文与工具
• Item Flow 本文解释了什么是 Item Flow,以及它对 Flexbox 和 Grid 的影响。 #css
• CSS shape() 函数:创建自适应比例的形状(Simon Fraser)。
• 在 2025 中使用 currentColor: 当然,自定义属性也可以做同样的事情,但 Chris 着眼于这个关键字替代方案的效用。
• 无障碍暗色模式设计:优化暗色主题的对比度与可读性,如何制作适合所有人的深色模式的指南(Alex Williams)。 #设计。
• 一个好的副业的幸福禅 —— “享受探索可能性的自由,并愉快地追随任何引人注目的奇思妙想——这就是一个好的副业的幸福禅意。”
• 使用 Chrome 的(预览版)Prompt API 进行数据汇总
• 减小网站上 HTML 文件大小的五种方法 #性能优化 #html
• 设计师 Noah Davis 批评细字体对可用性的负面影响。
• Tailwind CSS 速查表:覆盖 v3/v4 的实用类检索工具(kombai)。
#优质博文 #react #前端 #next #新动态 #AI
React Status #425
author Peter Cooper
React Status #425
AI 摘要:本期 React Status 虽因复活节缩短篇幅:5 个团队的高级 React 实战案例、Dan Abramov 对服务端-客户端数据传递的思考、AI 聊天界面开发指南等。
1. 专题文章
• 《Advanced React in the Wild》
• Addy Osmani 和 Hassan Djirdeh 汇总 5 个工程团队的 React 极限优化案例,涵盖性能、Core Web Vitals 和缓存等实战成果。
• 《JSX Over the Wire》
• Dan Abramov 探讨服务端到客户端数据传递的演进,对比 REST 与 BFF(Backend For Frontend)模式,提出基于 React 组件树的 ViewModel 设计思路。
• 《React.js AI Chat with OpenAI API》
• Robin Wieruch 为 OpenAI 的模型(例如新的仅限 API 的 GPT 4.1 模型)创建自己的流式聊天 UI,提供了一些入门指南。
2. 工具与库更新
• Next.js 15.3(Turbopack 生产构建 alpha 支持)
• react-photo-sphere-viewer(360° 照片查看组件) 一个演示
• Agent Hooks(将 React Hooks 变成 LLM 工具)
3. 社区动态
• Grep 搜索引擎从 CRA 迁移至 Next.js —— Vercel 团队分享从 Create React App 迁移的技术细节。
• TC39 撤回 records/tuples 提案。
author Peter Cooper
#优质博文 #AI
浅谈 AI 时代下的技术自学
author AlexTheNomad(少数派作者,公众号:staySimple)
浅谈 AI 时代下的技术自学
到这一步,也终于该写写代码了,当然,还有半篇文章都没提起的 AI。
毫无疑问,AI 可以为自学过程带来相当之大的提升,它解决了许多痛点,尤其是在从零到一的方面。
其实对于大部分初学者,最难的地方也就是从零到一,因为真正优秀的新手教程实在太少了,那种上来先让你背「gank 到底有几种方法」的就不多提了,即使是实践为主的教程,你学习的时候,也不是在做你真正想去做的那个东西,这就很难让人坚持下来。
AI 的出现改变了这一切,这就是前面我为什么说要准备自己的项目,在 AI 的帮助下,你完全可以定制一个专属自己的新手教程,并且把控其中的每一个教学节点,不用再去翻文档,不用再先做一个跟你毫无关系的东西,现在你可以同时做两件事:解决自己的实际问题,并且在这个过程中学习你想学的技术。
AI 摘要:本文探讨了在 AI 时代如何高效自学技术,强调学习动机、问题导向和 AI 辅助的重要性。作者通过编程案例(如构建 to-do list)拆解自学核心逻辑,提出「技术是手段而非目的」,并分享如何利用 AI 工具优化学习路径,最终实现从入门到精通的成长闭环。
author AlexTheNomad(少数派作者,公众号:staySimple)
#优质博文 #前端 #node #javascript #新动态
Node Weekly #574
Node Weekly #574
AI 摘要:本期 Node Weekly 聚焦 JavaScript 生态的最新动态,涵盖 Fastify + React 的高性能组合、Prisma ORM、Bun 运行时等工具更新。同时推荐了 TypeScript 新书、云服务集成方案及 AI 开发工具等,为开发者提供全面的技术参考。
1. 更新动态
• Fastify + React – 比 Next.js 快 7 倍? —— Fastify 框架的 Vite 插件 @fastify/react 发布 1.0 版本,支持快速构建高性能 React 应用,测试显示其速度可达 Next.js 的 7 倍。
• 比 Next.js 更轻但具有出色文档的 Waku 也值得一试。
• Lexe :将 Node 应用打包为单文件(<10MB),基于 Amazon LLRT 引擎,但仅支持部分 Node API。
• Prisma ORM 6.6.0 :引入了一个新的 prisma-client 生成器,该生成器更加灵活,并带有 ESM 支持,以及 MCP 服务器的预览版,可让 AI 代理和工具管理 Postgres。
• Chrono 2.8 :自然语言日期解析库,支持灵活的时间描述。
• 其他工具更新:OpenAI Node 库支持 GPT-4.1、Tesseract.js 6.0.1(OCR)、Javet(Node.js 嵌入 Java)。
2. 社区动态
• 新书发布 :Dr. Axel Rauschmayer 的 Exploring TypeScript: TS 5.8 Edition 可免费在线阅读
• ESLint 新增批量抑制规则功能,便于管理严格代码检查。
• npm 注册表短暂故障导致访问令牌丢失,已修复。
• Bun 1.2.9 发布,持续提升 Node.js 兼容性。
• Cloudflare 开发者周:支持 Next.js 一键部署至 Workers,集成全栈应用部署。
• Google 推出 Firebase Studio:AI 开发环境类似 Cursor 或 v0。
3. 资源推荐
• NPM 安全最佳实践 OWASP 备忘单系列
• 在 Bun 中调试 JavaScript 内存泄漏
Tuple & Record 提案被废弃,取而代之的是 Composite 提案:
https://github.com/tc39/proposal-composites/
我们在此先不讨论 Composite 好用与否,但我们注意到该提案对 Array.prototype.indexOf 与 Array.prototype.lastIndexOf 的一个改动:
即,如果参数是 Composite,将采用 SameValueZero 语义而非 IsStrictEqual。(其它类型的值仍采用 IsStrictEqual 语义)这无疑会使得 indexOf 与 lastIndexOf 变复杂,同时导致一致性变差。
https://github.com/tc39/proposal-composites/
我们在此先不讨论 Composite 好用与否,但我们注意到该提案对 Array.prototype.indexOf 与 Array.prototype.lastIndexOf 的一个改动:
即,如果参数是 Composite,将采用 SameValueZero 语义而非 IsStrictEqual。(其它类型的值仍采用 IsStrictEqual 语义)这无疑会使得 indexOf 与 lastIndexOf 变复杂,同时导致一致性变差。
#优质博文 #开源
我先前也读到过这篇文章,当时的感觉也是这样,感觉教科书级别的范例,有理有据,是很理性的人写出来的。
读《对「假开源」事件的反省》有感
author So!azy
我先前也读到过这篇文章,当时的感觉也是这样,感觉教科书级别的范例,有理有据,是很理性的人写出来的。
读《对「假开源」事件的反省》有感
AI 摘要:文章高度评价了 Owen 在其博客上发布的《对「假开源」事件的反省》。文章结构清晰,针对用户提出的问题逐一回应,并提供验证链接。Owen 坦诚承认沟通不足,并通过行动回应质疑,展现了开放、透明的态度。文章末尾分享了关于开源协议的知识,具有借鉴意义。总的来说,该文章是处理争议、与用户沟通的优秀范例,强调了开发者以开放态度面对社区的重要性。
author So!azy
招到了招到了
#优质博文 #前端 #AI
The Post-Developer Era
author Josh W. Comeau
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
#优质博文 #前端 #css #UX
Next Level CSS Styling for Cursors | CSS-Tricks
author Geoff Graham
Next Level CSS Styling for Cursors | CSS-Tricks
AI 摘要:本文探讨了通过 CSS 和 JavaScript 实现高级自定义光标样式的方法,强调在提升视觉效果的同时需兼顾用户体验和可访问性,强调谨慎替换原生功能,保持默认可访问性,避免过度设计。
author Geoff Graham