呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #操作系统
操作系统内置应用的进化思考 - 少数派
author StephenFang(少数派)
操作系统内置应用的进化思考 - 少数派
AI 摘要:本文系统梳理了操作系统内置应用从命令行工具到图形界面应用,再到云端服务和 AI 驱动的演变历程,揭示了其如何随技术范式、用户习惯和生态战略不断重塑,并展望了未来 AI 与云端深度融合下「无形化」的操作系统体验。
author StephenFang(少数派)
#优质博文 #react #前端 #新动态
React Status #426
React Status #426
AI 摘要:本期 React Status 聚焦 React Compiler 进入 RC 阶段,介绍了 Dan Abramov 关于 "Impossible Components" 的深度解析,以及多项工具更新(如 React Three Map 1.0、ChartDB 等)。同时涵盖社区动态(如 RedwoodJS 拆分计划)和 JavaScript 生态新闻(如 pnpm 10.9 发布)。
1. 社区动态
• React Compiler 进入候选版本阶段,计划未来几个月正式发布。
• 该团队还一直与 swc 项目合作,本次版本包含实验性的 swc 支持。
• RedwoodJS 拆分为 Redwood GraphQL 和 RedwoodSDK,后者推出新主页。
• React Router 安全漏洞修复(Remix 2.16.3 / React Router 7.4.1)。
• pnpm 10.9 支持 JSR 包安装。
• Microsoft Edge 团队增强提案:建议增强 console.context() 方法, 以便通过视觉调整和过滤机制使其对开发人员更有用。
2. 工具与库更新
• React Lite YouTube Embed 2.5:更快速、隐私友好的 YouTube 视频嵌入方案。
• Next.js 15.4 Canary 多个测试版发布。
• React 组件更新:包括 json-edit-react(JSON 编辑器)、React Spinners(加载动画)、React Suite(组件库)和 React Uploady(文件上传工具)。
3. 博文与工具
• 📄Dan Abramov 探讨 "Impossible Components"(混合仅限服务端和仅限客户端特性的组件的所谓“不可能”组件),通过 React Server Components 实现解决方案。
• 关联阅读:Darius Cepulis 旧文《React 19 lets you write impossible components》
• 📄 在 React 应用中为受保护的路由自动执行 Cypress E2E 测试 Emeka Okoli
• 📄 2025 年基于 React 的静态站点生成器比较 Morel、Radakovic 和 Dwivedi
• 📄 如何在 RedwoodSDK 中使用 React 服务器函数流 Herman Stander
• 📄 使用 Vercel 的 AI SDK Robin Wieruch 构建全栈 AI 聊天
• Frimousse:轻量级无样式 React Emoji 选择器。 #组件库
• Spectacle:创建流畅的 React 演示文稿
• React Three Map 1.0:将 3D 对象带入 2D 地图。React Three Fiber 与 react-map-gl 之间的桥梁,很酷。 Demo
• ChartDB:开源数据库架构图编辑器,大学生课设最爱,支持 Postgres、MySQL、SQL Server、SQLite 等数据库,使用 React 构建,可自部署,在线演示
#优质博文 #AI #MCP
在 Docker 沙箱中运行 MCP Server
author 面条实验室
在 Docker 沙箱中运行 MCP Server
AI 摘要:本文介绍了 MCP 协议的安全风险及其解决方案 MCP Proxy。文章详细列举了近年来 NPM 和 PyPI 上的供应链攻击事件,强调了通过 Docker 运行 MCP Server 的 MCP Proxy 项目,以降低安全风险并支持移动端调用。
author 面条实验室
#优质博文 #前端 #新动态
Frontend Focus #689 — April 23, 2025
Frontend Focus #689 — April 23, 2025
AI 摘要:本期 Frontend Focus 涵盖前端领域多项重要动态:Google 宣布放弃移除 Chrome 第三方 Cookie 的计划,转而维持现有隐私设置;AG Grid 推广其高性能数据网格库;WebGL 渐变技术解析;此外还包括浏览器市场动态、前端工具更新(如 Polypane 24 和 Tailwind Trainer)、PWA 离线图像上传方案、CSS 预处理替代方案探讨,以及 AI 与可访问性的未来等深度文章。
1. 社区动态
• Chrome 隐私策略调整:Google 终止移除第三方 Cookie 的计划,用户仍需通过隐私设置手动管理。 #草
“ 考虑到所有这些因素,我们决定保持目前在 Chrome 中为用户提供第三方 cookie 选择的方法, 并且不会为第三方 Cookie 推出新的独立提示。用户可以继续在 Chrome 的隐私和安全 设置中选择最适合自己的选项。
• 谷歌可能被迫出售 Chrome, 猜猜谁想买? OpenAI。[Source]
• TLS 证书有效期将缩短至 47 天(2029 年起)。
• 从今天到 2026 年 3 月 15 日,TLS 证书最长生命周期为 398 天。
• 自 2026 年 3 月 15 日起,TLS 证书最长生命周期为 200 天。
• 自 2027 年 3 月 15 日起,TLS 证书最长生命周期为 100 天。
• 自 2029 年 3 月 15 日起,TLS 证书最长生命周期为 47 天。
• Web 开发引擎 Toddle 更名为 Nordcraft 并发布 1.0 版本。
• Heydon 的 Web 辅助功能高级指导原则集现已提供新增多语言版本(法语、日语等)。
2. 博文与工具
• AI is the Future of Accessibility:Karl Groves 通过汽车工业发展的类比,批判了当前无障碍设计领域对 AI 技术的消极态度,呼吁行业积极拥抱技术变革而非抵制。 #无障碍
• 网站“键盘导航”的真正含义:了解为什么能够使用键盘浏览我们的网站很重要,如何测试您当前的设置,并最终改进它。
• 构建离线友好的图像上传系统:利用 IndexedDB 和 Service Worker 提升弱网环境可靠性。
• Tailwind Trainer:通过游戏学习 Tailwind CSS 语法。 #tailwind #游戏
• Astro Font:自动优化字体的 Astro 插件,支持自定义字体、本地字体、任何 CDN 上的字体和 Google 字体的优化。
• Symbl:轻松搜索、复制和使用 HTML 符号、表情符号等。
• Markdown to Slides:将 Markdown 转换为 PDF/PPTX 幻灯片的在线工具。
• CSS Hell:挑战性 CSS 谜题游戏(仅限桌面端)。 答案
#demo #前端 #动画 #codepen #css
好爽!这个滚起来真解压吧~
文本圆圈动画(仅限 CSS )
原理上大致是通过
好爽!这个滚起来真解压吧~
文本圆圈动画(仅限 CSS )
Stijn Van Minnebruggen 使用旧的 CSS 重新创建了 David Faure 为 Codrops 制作的 Three.js 动画。滚动以转动单词之轮,并观察字母对滚动速度和长度的反应。
原理上大致是通过
@property
定义自定义变量控制旋转,使用 animation-timeline: scroll()
将动画与页面滚动绑定。单词均匀分布在圆周上,每个字母根据滚动速度计算位移和旋转值,并应用不同延迟创造瀑布效应。#优质博文 #前端 #node #新动态
🤖 Node Weekly #575
🤖 Node Weekly #575
AI 摘要:本期 Node Weekly 聚焦 Node.js 性能优化、安全警告及工具生态更新,涵盖 V8 垃圾回收调优、Node.js 在恶意软件中的滥用风险、LTS 版本发布,以及机器学习框架 node-mlx 等新工具。同时讨论了 JavaScript 生态的 TC39 提案动态和 VS Code 的 AI 增强功能。
1. 博文与工具
• Matteo Collina 分享 使用 V8 GC 优化优化 Node 性能:高内存占用未必是内存泄漏,详解 GC 工作原理及针对不同场景的调优方法。
• 由 Node 的核心模块提供支持的无依赖命令行应用程序(Liran Tal)。
• JavaScript 中的 Float16Array 类型解析(Trevor I. Lasn)。 #javascript
• 2025 年 Node.js 可观测性工具对比(Lizz Parody)。
• 📄 When to Use map() vs. forEach() (Matt Smith)
• 🤖 node-mlx 0.4:基于 Apple MLX 的 Node.js 机器学习框架(zcbenz)。
• Repomix:将代码库转换为 AI 友好格式(XML/MD 等)的 Node.js 工具。 #AI
2. 安全警告与版本更新
• 微软报告 Node.js 被广泛用于传播恶意软件,分析攻击案例及技术细节。
• Node v20.19.1 (LTS):依赖项升级为主的小幅更新,建议优先使用 Node 22 'Jod'。
• 工具链更新:pnpm 10.9(支持 JSR 包)、Fastify 5.3.2、zx 8.5.3 等。
• WebStorm 2025.1:支持 AI、Angular、monorepo 和 Next.js 的 IDE 更新。
3. JavaScript 生态动态(注:有重复不过还是写一下)
• TC39 撤回 "Records and Tuples" 提案,但推进枚举(enum)提案。
• Firefox 139 默认启用 Temporal API。
• Hako 引擎:基于 QuickJS 的 WebAssembly 编译型 JavaScript 运行时。
• VS Code "Agent Mode" 强化 Copilot 的 AI 编程辅助能力。
#优质博文 #前端 #css
使用CSS给标题添加书名号并超出省略
author 微信公众号 前端侦探
使用CSS给标题添加书名号并超出省略
AI 摘要:本文介绍了如何通过 CSS 在不修改 HTML 结构的情况下,为标题动态添加书名号,并实现书名号内文本超出省略的效果。文章详细讲解了使用伪元素、CSS quotes、绝对定位和浮动布局等技术实现这一需求的方法,并对比了不同方案的优缺点。
author 微信公众号 前端侦探