呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #css #javascript #新动态
🚀 Frontend Focus#695
🚀 Frontend Focus#695
AI 摘要:本文是《Frontend Focus》第 695 期(2025 年 6 月 4 日)的摘要,涵盖了前端开发的最新动态、技术教程和工具资源。文章重点介绍了 OKLCH 颜色生态系统及其工具、CSS 新功能(如 if() 函数和 reading-flow 属性)、Web 平台状态更新以及多个实用工具和教程,内容涉及 HTML 对话框样式优化、浏览器自动化工具、AI 在 Web 开发中的应用等,旨在为前端开发者提供前沿技术资讯和实用资源。
• OKLCH 颜色生态系统与工具 - 详细介绍了 OKLCH 颜色模型的优势,浏览器支持情况良好,并推荐了相关工具和最佳实践。还提到了一场题为《Programmable Colors: Bridging Design and Code》的相关演讲,值得观看。
• WebStatus.dev 更新:更丰富的数据与洞察 - 开源的 Web 平台状态网站新增了功能覆盖范围、使用时间线、移动端数据等更新,帮助开发者查询和跟踪各类 Web 功能在不同浏览器中的兼容性。
• CSS if() 函数与 reading-flow 属性(Chrome 137) - 展示了 CSS if() 函数的强大功能(目前仅在 Chrome 和 Edge 中可用)以及 reading-flow 属性的应用,附带简单直观的演示。额外推荐了 CSS Tricks 上关于 reading-flow 和 reading-order 的深入文章。
• Rachel Andrew 总结了 Web 平台的最新变化和重要新增功能 - 包括 if() 函数、Web Push 等
• [Astro 生态系统的最新动态](https://astro.build/blog/whats-new-may-2025
• Browser Company 停止开发 Arc 的原因说明
• IE6、AI 与 Web 浏览的未来:RL Nabors 开启新系列,探讨 AI 如何改变 Web,提出“Chrome 是下一个 IE6”的观点,分析 Google 偏离 Web 标准可能导致浏览器停滞。
• Smooothy:流畅、可扩展的滑块/轮播组件,包括键盘控制、视差、速度的自定义,以及 React 和 Vue 的实现。
• MiNi PhotoEditor:一款带有特效、滤镜和裁剪功能的在线 WebGL 照片编辑器 #webgl
• Bits UI:无头 Svelte 组件库 #组件库 #svelte
• 字体生成器 :使用 Unicode 字符生成精美文本 ——输入一些文本,此工具将生成无数纯 Unicode 格式的精美字体,供您复制粘贴。示例:𝔽𝕣𝕠𝕟𝕥𝕖𝕟𝕕 𝔽𝕠𝕔𝕦𝕤、snɔoℲ puǝʇuoɹℲ、F͜͡r͜͡o͜͡n͜͡t͜͡e͜͡n͜͡d͜͡ F͜͡o͜͡c͜͡u͜͡s͜͡ 等等。不过,务必注意可访问性以及某些设备(例如屏幕阅读器)的处理方式。
看了一眼, 果然是 css preserve-3d。
Photo³
使用 RAFA3L 的这款互动笔,体验“立方体照片库实验”。待在房间里,照片会慢慢铺满整个房间,然后点击任意一张图片即可全屏观看。
via CopenSpark#451
#demo #codepen #webgl #动画
着色器时钟 \ WebGL 片段着色器
via CopenSpark#451
着色器时钟 \ WebGL 片段着色器
pjkarlik 分享了一个能根据一天中的时间改变颜色的奇妙 WebGL 时钟。“我脑子里一直在想这个,想做一个时钟着色器。数学运算有点乱,而且为了让表盘正常工作,在时间上还需要一些技巧性的逻辑"。
via CopenSpark#451
#优质博文 #前端 #node #pino #logging #工程化
Production-Grade Logging in Node.js with Pino
author Ayooluwa Isaiah
Production-Grade Logging in Node.js with Pino
AI 摘要:本文详细介绍了在 Node.js 应用中使用 Pino 进行生产级日志记录的全面指南。Pino 作为一种高效且快速的日志库,以其 JSON 格式输出和与现代可观测性平台的兼容性而著称。文章涵盖了 Pino 的核心功能、日志级别管理、字段自定义、上下文日志记录、序列化器和敏感数据处理、日志路由以及与 Node.js 框架和 OpenTelemetry 的集成方法。
• 引言:介绍了 Pino 自 2014 年以来的广泛应用,强调其高性能和灵活配置,Fastify 框架默认使用的日志工具。提供了安装和基本使用示例,展示了 JSON 格式输出和通过 pino-pretty 美化日志。
• Pino 日志级别:详细说明了 Pino 支持的标准日志级别(trace, debug, info, warn, error, fatal)及其对应的数值表示,默认级别为 info,并提供了通过环境变量调整日志级别的方法。
• 自定义日志级别输出:展示了如何将数值级别格式化为字符串输出,并提到后续与 OpenTelemetry 日志数据模型的集成。
• 调整 Pino 默认日志字段:介绍了如何修改默认日志字段(如时间格式、字段重命名),以及通过 formatters 自定义绑定字段(pid, hostname)或添加全局元数据(如应用版本)。
• 捕获事件和错误详情:讲解了上下文日志记录的重要性,展示了如何在 HTTP 请求中添加详细信息,并符合 OpenTelemetry 语义约定;同时介绍了如何记录 Node.js 错误及其堆栈信息。
• 使用 Pino 序列化器塑造日志:介绍了序列化器的功能,用于转换日志对象中的特定属性,包括内置序列化器(err, req, res)和自定义序列化器的创建方法。
• 敏感数据的编辑或移除:提供了使用 redact 选项自动审查或移除日志中敏感数据(如密码、信用卡信息)的方法,并支持自定义审查内容或完全移除字段。
• 使用 Pino 传输路由日志:讲解了如何通过 transport 功能将日志输出到文件或多个目标(如控制台、文件、OTLP 端点),并提及同步日志和支持的传输生态。
• 与 Node.js 框架集成:展示了 Pino 在 Fastify(默认集成,支持请求上下文追踪)和 Express(通过 pino-http 中间件)中的使用方法,包括自动日志记录和自定义配置。
• 与 OpenTelemetry 集成:介绍了通过 pino-opentelemetry-transport 将 Pino 日志转换为 OpenTelemetry 格式并发送到 OTLP 端点,支持与分布式追踪的相关性,并解决语义约定问题。
author Ayooluwa Isaiah
#优质博文 #AI #node #LlamaStack #css #安全
Implement AI safeguards with Node.js and Llama Stack
author Michael Dawson
Implement AI safeguards with Node.js and Llama Stack
AI 摘要: 本文详细介绍了如何使用 Node.js 和 Llama Stack 实现 AI 应用程序的安全机制(guardrails)。作为系列文章的第三部分,文章重点探讨了 Llama Stack 内置的安全工具 LlamaGuard 和 PromptGuard 的功能、设置和使用方法,旨在确保大型语言模型(LLM)在应用范围内的回答安全、准确且无偏见。通过具体的代码示例和配置步骤,作者展示了如何在 Node.js 环境中设置和运行 Llama Stack,并结合守卫机制过滤不安全内容和防止绕过安全措施的尝试。此外,文章还讨论了安全机制在节省 GPU 资源方面的额外优势。
1. 什么是守卫机制(Guardrails)?
• 守卫机制是大型语言模型(LLM)的安全措施,确保模型仅回答应用范围内的问题,并提供准确、无偏见的回答。
• 应用示例:防止保险报价应用中回答违法问题,或避免在保险审批中对某些群体产生偏见。
• Llama Stack 提供内置守卫机制,并支持注册自定义守卫提供者。
2. 内置守卫机制
• LlamaGuard:用于人类与 AI 对话,识别不安全内容(如暴力犯罪、性犯罪、仇恨、自残等 13 类内容),过滤人类问题和模型回答。
• PromptGuard:防御绕过安全机制的尝试(如“越狱”),与 LlamaGuard 互补,提升整体安全水平。
3. 设置 Llama Stack
• 描述了如何通过容器快速启动 Llama Stack 实例,使用 Ollama 服务大型语言模型。
• 提供了启动脚本,包含模型选择(如 Llama-3.1-8B-Instruct)和安全模型配置。
4. 运行 Llama Stack 实例
• 详细说明了容器配置和运行步骤,包括修改 run.yaml 文件以启用 PromptGuard。
• 解决 CPU 环境下运行 PromptGuard 的问题,通过修改容器代码实现支持。
5. 结合 Node.js 使用 LlamaGuard 和 PromptGuard
• 提供了代码示例,包括注册 LlamaGuard 和 PromptGuard 模型、配置护盾(shields)、手动运行护盾检测输入输出内容。
• 使用 Agent API 自动应用护盾,测试问题如“如何制作假文件”,展示了护盾如何阻止不安全内容的回答。
• 对比了护盾开启和关闭时的响应差异,验证了护盾的有效性。
6. 安全之外的额外优势
• 护盾不仅提升安全性,还能减少 GPU 资源浪费,因为护盾能快速拒绝不适合回答的问题,而无需模型耗费时间处理。
author Michael Dawson
#优质博文 #前端 #javascript #node #php #工程化 #新动态 #tools
🤖 Node Weekly #580
🤖 Node Weekly #580
AI 摘要: 本期 Node Weekly 聚焦 Node.js 生态系统的最新动态与工具,涵盖了 PHP 与 Node.js 的集成、AI 技术在开发中的应用、以及多个实用工具和库的更新。文章详细介绍了 php-node 模块如何实现 PHP 应用在 Node 环境中的运行、多个 Node.js 相关工具如 ESLint、Bun 的新功能。此外,还包括了 JavaScript 领域的最新资讯,如 TC39 提案进展和 Temporal API 的潜力。
1. 简讯
• php-node:PHP 与 Node.js 的新型集成:介绍 php-node 作为 Node 的原生模块,允许在 Node 环境中运行 PHP 应用。应用场景:迁移遗留 PHP 应用、构建 PHP/JS 混合应用,或在 Node 应用中调用 PHP 功能(如 WordPress 集成)
• Joyee Cheung 分享关于 Node 中 CommonJS 与 ESM 桥接的演讲幻灯片。
• OpenJS 基金会现在是其旗下 40 多个 JavaScript 项目的 CNA,包括 ESLint、Express 和 Electron。
• SQLite-JS 扩展允许使用 JavaScript 编写自定义 SQLite 函数。
• DigitalOcean 推出 Node 驱动的 MCP 服务器,支持通过 AI 代理(如 Claude)管理托管应用。
2. 技术文章与教程
• 使用 Node.js 和 Llama Stack 实施 AI 保障措施: Llama Stack 是 Meta 用于在 Node、Python、Swift 或 Kotlin 中构建 AI 应用程序的框架。
• 在 Express 中管理功能标志 (Trunker):介绍 Trunker 作为 Express 中间件,用于实现功能标志管理。
• 使用可选链编写更可靠的 JavaScript:讲解可选链的使用及其优势。
• 构建 Linux Electron 应用:讨论 Electron 跨平台特性及 Linux 平台特定问题。
• Node.js 生产级日志记录 (Pino):介绍使用 Pino 进行高效日志记录。
3. 代码与工具
• qnm:CLI 工具,方便探索 node_modules,提供模糊搜索及空间占用分析功能。【感觉还是 antfu/node-modules-inspector 香】
• Zigar:在 Node 和 Electron 项目中使用 Zig(C/C++ 超集)代码。
• 🤖 OpenAI 客户端 5.x:从 Node 使用 OpenAI 模型 ——OpenAI 官方 JavaScript 库的最新版本,适用于其各种 API,现已支持其所有最新模型和实时 API( v5.0 更新日志 )。支持 Deno 和 Bun。
• Opossum 8.5:异步函数断路器,支持超时及错误阈值设置。
• Beachpatrol:CLI 工具,基于 Playwright 实现浏览器自动化,支持 macOS 和 Linux。作者:Sebastian Carlos。
• 其他工具更新:包括 ESLint v9.28.0(增强 TypeScript 支持)、Bun v1.2.15(新增安全审计工具)、Ink 6.0(支持 React 19)、pdf2html 4.0(用 Apache Tika 和 PDFBox 将 PDF 转换为 HTML)
4. JavaScript 领域动态
• TC39 第 108 次会议:多项提案进展,如 Seeded Pseudo-Random Numbers 进入 Stage 2,Error.isError 进入 Stage 4。
• Stack Overflow 年度开发者调查开启第 15 年。
• 探讨即将推出的 Temporal API,如何解决 JavaScript 中日期和时间处理问题。
• Sean Gillespie 正在思考高效 monorepo 的要素。
#tools #Android #Photoshop #软件推荐 #图像编辑
Photoshop 发布 Android 应用,测试期间所有功能全免费 - 小众软件
Photoshop 发布 Android 应用,测试期间所有功能全免费 - 小众软件
AI 摘要:本文介绍了 Photoshop 最新发布的 Android 应用,在 Beta 测试阶段所有功能均免费开放,为用户提供了桌面级图像编辑体验,集成了 AI 驱动的创意工具,并针对移动端进行了优化,适合从新手到专业用户的多样化创作需求。文章还详细说明了设备要求、功能亮点及获取方式,提醒用户未来部分高级功能可能转为订阅制。
#css #codepen #demo #动画
纯 CSS 滚动控制的滑动过渡
https://codepen.io/thebabydino/pen/azObZOe
Source
纯 CSS 滚动控制的滑动过渡
https://codepen.io/thebabydino/pen/azObZOe
Ana Tudor 🐯🖤🌻 (@anatudor):Made a little thing on
@CodePen: pure #CSS scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe
Note how the swipe is always clockwise, regardless of scroll direction and how the text fades in after the swipe.
Inspiration https://x.com/avanderpotte/status/1923382432784412771 (via @codrops)
Source
#优质博文 #前端 #nextjs #svg
基本是我们的方案,使用 SVGR。
How to import SVGs into your Next.js apps: A 2025 guide
author Joseph Mawa
基本是我们的方案,使用 SVGR。
How to import SVGs into your Next.js apps: A 2025 guide
AI 摘要:本文详细介绍了如何在 Next.js 应用中导入和使用 SVG 文件,探讨了多种方法及其优缺点,旨在帮助开发者在 2025 年的技术环境中更高效地处理 SVG 资源。文章从基础导入方式到高级优化技术,提供了全面的指南,特别指出了使用 next/image 组件的局限性,例如无法直接设置 SVG 的填充颜色等问题,并给出了相应的解决方案。
author Joseph Mawa
#前端 #webgl #新动态
这个好诶
https://forge.dev/
Source
这个好诶
https://forge.dev/
Asuka小能猫 (@AsukaOdysseus):李飞飞团队开源了可商用的高斯喷溅web渲染器。
gaussian splatting 是目前3d场景重建最前沿的方法,效果好、速度快、只需要图片就能重建,去年开始大火,学术界机器人/自动驾驶/世界模型/视频生成都有很多应用。
国内在这块的application级别的应用几乎是空白。
Source
#tools
https://fixupx.com/__oQuery/status/1929248226802372682
✨ star Innei/photo-gallery
innei 佬的 vibe 都这么强,爱了,这个 UI 简洁的我很喜欢w
https://fixupx.com/__oQuery/status/1929248226802372682
✨ star Innei/photo-gallery
innei 佬的 vibe 都这么强,爱了,这个 UI 简洁的我很喜欢w
这个项目已经 Vibe 了 9K 行了,是时候重构一波了。
现在连 Live photo 都支持了。
https://github.com/Innei/photo-gallery
#优质博文 #插件 #用户脚本 #安全 #新动态
Enabling chrome.userScripts in Chrome Extensions is changing
author Justin Lulejian
Enabling chrome.userScripts in Chrome Extensions is changing
AI 摘要:本文介绍了从 Chrome 138 版本开始,Chrome 扩展中用户脚本(chrome.userScripts API)的启用方式发生了变化,旨在增强安全性和提供更精细的用户控制。过去依赖全局开发者模式开关的方式存在安全风险、功能过载和企业管理难题,现在转变为逐个扩展的“允许用户脚本”开关,用户可以在扩展详情页单独控制每个扩展的用户脚本权限。这一更新基于开发者社区的反馈,旨在提升安全性和用户体验,同时为管理员提供了新的管理策略。
author Justin Lulejian
#优质博文 #前端 #html
HTML5 Elements You Didn't Know You Need
author Max Prilutskiy
HTML5 Elements You Didn't Know You Need
AI 摘要:本文介绍了八个鲜为人知但功能强大的 HTML5 元素,这些元素为常见的 Web 开发问题提供了原生解决方案,减少了对 JavaScript 和第三方库的依赖。作者强调了使用原生 HTML 元素的优势,包括提高可访问性、语义化以及简化代码,同时也指出了这些元素的局限性,鼓励开发者在选择工具前了解这些内置选项。
1. <dialog> 元素:原生模态窗口
介绍 <dialog> 元素用于创建模态窗口,浏览器自带焦点管理、背景渲染和键盘可访问性支持,提供了基本用法和样式化代码示例。提到其浏览器支持情况(2022 年后主流浏览器均支持)和 iOS Safari 的历史兼容性问题,建议复杂模态仍需专用库。
2. <details> 和 <summary> 元素:原生手风琴
介绍用于创建可折叠内容的手风琴效果,浏览器内置切换功能和可访问性支持。提供样式化示例和嵌套导航的应用场景,指出其动画效果的局限性。
3. <datalist> 元素:原生自动补全
介绍用于表单输入自动补全的元素,支持用户自定义输入。提供颜色选择器的创意用法和 JavaScript 增强示例,指出其样式定制的限制。
4. <meter> 元素:语义化度量显示
介绍用于显示范围内值的元素,浏览器根据阈值自动调整颜色,适用于仪表盘等场景。讨论其语义价值和样式限制。
5. <output> 元素:动态计算结果
介绍用于显示计算结果的元素,与输入元素关联提高可访问性。提供抵押贷款计算器的实际案例,强调其语义意义和表单提交的适用性。
6. <mark> 元素:语义化高亮
介绍用于文本高亮的元素,默认黄色背景可自定义样式,适用于搜索结果等场景。强调其对屏幕阅读器的语义支持。
7. <time> 元素:语义化日期和时间
介绍用于表示日期和时间的元素,支持 ISO 8601 格式,方便搜索引擎和浏览器扩展使用。提供多种格式示例和相对时间更新的 JavaScript 代码,适用于博客和新闻网站。
8. <figure> 和 <figcaption> 元素:语义化图片标题
介绍用于图片或其他独立内容单元的元素及其标题,适用于内容管理系统。提供 CSS 样式化示例,强调其对可访问性的提升。
author Max Prilutskiy
#优质博文 #前端 #react #新动态
React Status #430
author Peter Cooper
React Status #430
AI 摘要: 本期《React Status》 (2025年5月28日,第430期) 是一份聚焦 React 生态系统的技术资讯简报,涵盖了 React 19 的最新特性、工具库更新、框架对比以及社区动态。文章详细介绍了 React 核心概念的可视化讲解、TanStack Router 的独特优势等内容,同时提供了众多 React 相关工具和库的更新信息,如 Docusaurus 3.8、ReactJust 等。此外,还包括了 JavaScript 生态的最新动态,如 JavaScript 30周年回顾和 TypeScript 的 Go 移植进展。
1. 简讯 (IN BRIEF)
• React 即将迎来12周年生日(5月29日)。
• Storybook 9.0 刚发布,将在下期详细报道。
• React Router 提供对 RSC (React Server Components) 的预览支持。
• Astro 5.8 发布,放弃对 Node v18.20.8 之前版本的支持。
• Vercel 可能将弃用 Edge Functions,转向 Fluid compute。
2. 教程与案例
• 使用 GitHub Copilot 构建 React 应用:Kedasha Kerr 提供了详细指南和视频,展示如何利用 Copilot 快速构建现代 JavaScript 应用。
• React 元框架的问题与重建:Redwood 团队分享了从头开始重建 RedwoodSDK 的经验,强调从第一性原理出发解决问题。
• AI 辅助构建物理角色控制器:Ian Curtis 结合 React Three Fiber、Three.js 和 Rapier,展示了如何构建物理角色控制器,并提供在线试玩链接。
• 其他内容:包括 React 并发渲染的故事、Expo 实时音频处理、React 新 Activity 组件的性能提升,以及 Next.js 集成 Google 登录的简易方法。
3. 代码、工具与库:
• Docusaurus 3.8:面向文档的静态站点生成器,带来构建性能提升及“未来标志”功能,允许提前体验 v4 特性。
• ReactJust:一种无框架的 Server Components 方案,适合不想使用 Next.js 或 React Router 的开发者实验 RSC。
• Rockpack 6.0:React 应用启动工具,旨在最小化项目设置时间,支持服务端渲染、打包、linting 和测试,已更新至 React 19。
• 其他更新:包括 react-native-alert-queue、React DayPicker 9.7、React Spring 10.0、React Native Reanimated 4.0 Beta 4 等工具和库的最新版本发布。
4. JavaScript 生态动态:
• Deno 团队为 JavaScript 30周年制作了历史时间线。
• SolidJS 创作者发布视频对比 React、Angular、Vue、Svelte 和 Solid 的框架方法。
• Google 发布 Gemini 和 Vertex API 的官方 JavaScript/TypeScript SDK v1。
author Peter Cooper
#优质博文 #前端 #css
You can style alt text like any other text
author Andy Bell
You can style alt text like any other text
AI 摘要:本文探讨了如何通过 CSS 样式化图像的 alt 文本,以提升图像加载失败时的用户体验。作者 Andy Bell 详细介绍了如何通过对 <img> 元素应用样式来优化 alt 文本的显示效果,并结合 JavaScript 和渐进增强技术为加载失败的图像添加额外的视觉效果,强调了编写高质量 alt 文本的重要性以及关注用户体验的必要性。
author Andy Bell