呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#前端 #优质博文 #新动态 #javascript
🔊 JavaScript Weekly #735
🔊 JavaScript Weekly #735
AI 摘要:本期《JavaScript Weekly》 (#735, 2025年5月9日) 聚焦 JavaScript 生态系统的最新动态,涵盖工具发布、框架更新和技术文章。文章主要介绍了 k6 1.0 负载测试工具、Node.js 24 的最新发布、VS Code 1.100 版本的特性更新,以及多个 JavaScript 相关库和工具的新版本发布,如 ESLint、Mantine 等。此外,还包括了关于 React、Astro、Electron 等技术的深入文章和教程,以及对 CSS 和数据库等周边技术的讨论,为开发者提供了丰富的资源和灵感。
1. 主要工具与发布
• k6 1.0: Go-Powered Load Testing with JavaScript:由 Grafana Labs 推出,基于 Sobek Go 引擎,支持用 JavaScript 编写测试脚本,1.0 版本强调稳定性、TypeScript 支持和扩展性。
• Node 24 (Current) Released:Node.js 最新“Current”版本,取代 v23,包含 npm 11、V8 13.6 引擎(支持 RegExp.escape、Float16Array 等新特性)、默认启用的 URLPattern API,以及 Undici 7。值得注意的是,v24.0.1 临时恢复了一些 EOL 特性以解决依赖问题。
• Visual Studio Code Version 1.100:为 JavaScript 开发者带来多项改进,包括“Next Edit Suggestions”(建议添加缺失导入)、支持 Node 的增强网络调试功能、提升类型信息可见性、远程 MCP 服务器支持,以及默认使用 GPT 4.1 模型。
• Releases:
• ESLint v9.26.0:支持 MCP,使其可直接被 AI 模型和编码代理使用。
• Mapbox GL JS 3.12:基于 WebGL 的交互式矢量地图库。
• Relay v19:Facebook 的 React/GraphQL 声明式框架。
• Material UI 7.1:现在 Tailwind CSS 4。
• 其他更新包括 Rspack 1.3.9、Babylon.js 8.7 和 Electron 36。
2. 文章与教程
• The Power of the Spread and Rest Syntax:简要介绍 JavaScript 中扩展和剩余语法的强大功能(作者:Matt Smith)。
• Migrating a Project from Prettier and ESLint to Biome:讨论从 Prettier 和 ESLint 迁移到 Biome 的过程,强调 Biome 作为一体化工具的潜力(作者:Damilola Olatunji)。
• 其他文章包括 React 编译器简介、Angular 中 DDD 的误解,以及 Fastify 与 Vue 的结合故事。
3. 代码与工具
• HelloCSV:一个前端 CSV 导入工作流工具,方便用户导入 CSV 文件。
• PptxGenJS 4.0:用 JavaScript 构建 PowerPoint 演示文稿,支持图形、文本、表格等,兼容多种演示工具。
• Hyparquet:无依赖的 JavaScript Parquet 文件解析库,支持浏览器环境。
• react-sounds:为 React 应用添加音效,示例设计精良。
• mono-jsx:无需构建步骤的服务器端 JSX 运行时,支持将 <html> 渲染为 Response。
• 其他工具包括 Prisma v6.7(从 Rust 向 TypeScript 迁移)、DOCX 9.5(生成 Word 文档)等。
4. 简讯与周边生态
• Node.js Next 10 Survey:Node.js 团队邀请开发者参与调查,指导未来优先事项。
• CSS Overflow 5 Spec:支持纯 CSS 滚动和轮播体验,Sara Soueidan 提供了可访问性和可用性分析。
• Postgres 18 Beta 1:重点优化 Linux 上的 IO 性能,预计 9 月或 10 月发布正式版。
• Google Gemini 2.5 Pro Update:据称在构建前端应用和美学网页开发方面表现更出色。
• 其他动态:包括 OpenJS 基金会新董事会成员公布、从 Next.js 迁移到 Ruby on Rails 的案例分享,以及 Sam Rose 关于“reservoir sampling”的可视化文章。
#新动态 #前端
Chrome 137 beta | Blog | Chrome for Developers
author Rachel Andrew
Chrome 137 beta | Blog | Chrome for Developers
AI 摘要:Chrome 137 Beta 版本引入了多项 CSS/UI 增强(如条件函数 if()、阅读流属性、SVG 变换支持)和 Web API 改进(如 WebAuthn 错误对齐、Blob URL 分区、WebAssembly 分支提示),并新增了 4 项 Origin Trials(全帧率渲染阻塞、非渲染 iframe 媒体暂停等)。此外,还扩展了系统强调色支持至 Windows/ChromeOS,优化了开发者工具链。
1. CSS 和 UI 更新
• if() 函数:支持条件值表达式,简化复杂逻辑。
• 阅读流属性:reading-flow 和 reading-order 控制无障碍工具的元素顺序。
• SVG 增强:
• 支持 transform 属性直接应用于 <svg> 根元素。
• <use> 元素可省略片段引用外部文档根元素。
• 系统强调色:accent-color 扩展支持 Windows 和 ChromeOS。
• 视图过渡:view-transition-name: match-element 为单页应用提供动画支持。
2. Web API 改进
• WebAuthn:统一支付凭证创建时的错误类型为 NotAllowedError。
• Blob URL 分区:按存储键(站点、来源等)分区访问,提升安全性。
• 崩溃报告:捕获未响应页面的 JavaScript 调用栈。
• Canvas:支持浮点像素格式,适用于高精度场景。
• Web Cryptography:新增 Ed25519 曲线算法支持。
• WebGPU:
• 允许 GPUTextureView 用于 externalTexture 绑定。
• 简化 copyBufferToBuffer 方法的重载。
3. 新增 Origin Trials
• 全帧率渲染阻塞:通过 full-frame-rate 令牌降低渲染帧率以优化资源分配。
• 非渲染 iframe 媒体暂停:通过权限策略控制不可见 iframe 的媒体播放。
• Rewriter/Writer API:基于设备端 AI 模型实现文本改写与生成功能。
author Rachel Andrew
#优质博文 #前端 #新动态 #javascript #css #node
Web Weekly #158
author Stefan Judis
Web Weekly #158
AI 摘要:本期 Web Weekly 聚焦前端开发领域的新提案、工具优化与实用技巧,涵盖 Edge 团队的 ariaNotify() 和 console.context() 提案、Node.js 双包风险、CSS 新单位 lh 的应用,以及 Chrome 原生 CSS 轮播的可访问性分析。同时推荐了有趣的 CSS 全息效果、小众浏览器和 JavaScript Set 新方法等资源。
1. Edge 团队新提案
• document.ariaNotify() :简化无障碍通知的 DOM 操作,直接通过 JavaScript 触发屏幕阅读器提示。
• console.context() :提供日志分组、样式和过滤功能,优化调试体验。
2. Node.js 双包风险警告
• 官方建议仅发布一种模块格式(CJS 或 ESM),避免因混合格式导致的兼容性问题。
3. CSS 新特性与实践
• lh 单位:基于行高的垂直间距控制,提升视觉一致性。
• Chrome 原生 CSS 轮播:新增 scroll-marker-group 等属性,但当前可访问性不足(Sara 评估,她的结论是:他们还没有准备好,但你自己要多读一读)。
• 纯 CSS 全息效果:纯 CSS 实现,利用 mix-blend-mode 和 background-attachment 实现。 解释博客
4. JavaScript 更新
• JavaScript Set 新方法:difference()、intersection() 等集合操作。
• JavaScript 类中的静态初始化块 - 不久前,我了解到您可以将 "nameless static " 块放入 ECMAScript 类中。他们是做什么的?
• RegExp.escape():自动转义正则表达式特殊字符(Chromium 136+)。
5. 工具与资源推荐
• 小众浏览器:Vivaldi 及其他非主流选项。
• 自然语言日期解析库 wanasit/chrono
• Node.js 测试最佳实践指南 #测试
• MCP 服务器的集合 punkpeye/awesome-mcp-servers 。 #AI #MCP
6. 其他亮点
• 趣味网站:owlsintowels.org(猫头鹰主题)。
• 设计技巧:复杂曲线边框的 CSS 实现方案。
• My Three Strikes Rule for Blogging 第三次在对话中使用某个想法时,您必须将其写在博客上。 #技术写作
author Stefan Judis
#优质博文 #网络安全 #passkeys #科普
Passkeys for Normal People
author Troy Hunt
Passkeys for Normal People
AI 摘要:本文深入探讨了传统双因素认证(2FA)的漏洞(如钓鱼攻击风险),并介绍了更安全的替代方案——通行密钥(Passkeys)。文章通过 WhatsApp、LinkedIn 和 Ubiquiti 的实际案例,详细解析了通行密钥的设置流程、优势(如防钓鱼、跨设备同步)和局限性(如服务间实现差异),并进一步探讨了物理安全密钥(如 YubiKey)的强化作用。最后,作者呼吁用户尽早采用通行密钥,并推动更多服务支持这一技术。
1. 传统 2FA 的漏洞
• 问题描述:通过模拟 Mailchimp 钓鱼攻击案例,说明即使启用 2FA(如验证码),攻击者仍可诱导用户提交动态密码(OTP),从而入侵账户。
• 核心缺陷:OTP 和短信验证码可被钓鱼,无法从根本上抵御社会工程攻击。
2. 通行密钥(Passkeys)的解决方案
• 定义:基于加密技术的数字凭证,存储在设备或密码管理器中,无需手动输入。
• 优势:
• 防钓鱼:密钥与域名绑定,无法被伪造网站窃取。
• 便捷性:支持生物识别(如 Face ID)一键登录。
• 跨设备同步:可通过 iCloud、1Password 等工具多端共享。
3. 通行密钥实践案例
• WhatsApp(移动端):
• 设置流程:通过 iPhone 的 iCloud Keychain 或 1Password 存储密钥。
• 局限性:部分服务(如 WhatsApp)未提供明确的登录测试路径。
• LinkedIn(PC 端):
• 混合验证模式:通行密钥与密码共存,仍保留可被钓鱼的 OTP 2FA。
• 用户体验:1Password 自动填充密钥实现秒级登录。
• Ubiquiti(强化 2FA):
• 完全替代 OTP:通行密钥作为唯一 2FA 方式,支持物理安全密钥(YubiKey)。
• 安全升级:移除邮箱验证,降低中间人攻击风险。
4. 物理安全密钥(U2F)
• 原理:如 YubiKey 通过 USB/NFC 存储通行密钥,需物理接触才能使用。
• 优势:
• 抵御远程攻击:即使密码管理器被入侵,物理密钥仍可保护账户。
• 冗余设计:建议配置多个密钥以防丢失。
5. 通行密钥的推广现状
• 支持平台:1Password 的 passkeys.directory 列出已支持的服务(如 Google、Microsoft)。
• 用户行动建议:
• 优先为关键账户(如邮箱、银行)启用通行密钥。
• 向未支持的服务(如 Twitter)投票施压。
6. 总结与展望
• 防御纵深:通行密钥需与其他安全实践(如警惕钓鱼邮件、使用密码管理器)结合。
• 行业趋势:微软已默认启用无密码登录,通行密钥普及临近拐点。
author Troy Hunt
#视频 #碎碎念 #旅游
https://www.youtube.com/watch?v=4H2i3dL__UA
平平无奇丽江古城 120s 延时摄影纯享版
@余弦Cocos:
出行 - pocket3 拍摄
在众觅咖啡拍的。
先放一个纯享版,还拍了很多别的,后面再剪一下
https://www.youtube.com/watch?v=4H2i3dL__UA
平平无奇丽江古城 120s 延时摄影纯享版
@余弦Cocos:
出行 - pocket3 拍摄
在众觅咖啡拍的。
先放一个纯享版,还拍了很多别的,后面再剪一下