呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页: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 #chrome #新特性
New in Chrome 139
author Rachel Andrew
New in Chrome 139
AI 摘要:Chrome 139 带来了多项面向开发者的重要新功能,包括本地 Web Speech API(语音识别)、CSS corner shaping(角样式)、CSS custom functions(自定义函数)等,进一步提升了 Web 应用的性能、安全性和界面设计能力。本文亮点简要梳理了此次版本中的主要更新和对开发者生态的影响。
1. 本地 Web 语音识别(Web Speech API)
• Web Speech API 现支持在本地进行语音识别,无需将音频数据上传至第三方服务,提升了隐私和安全性。
• 开发者可以检测本地语音识别能力、提示用户安装相关资源,并按需选择本地或云端识别方案。
• 有助于为多语言和对隐私敏感的场景提供更优支持。
2. CSS 角样式(CSS corner shaping)
• 新增 CSS 属性允许开发者自定义角的形状与曲度,超越传统的 border-radius。
• 支持创建如 squircles(圆角矩形)、notches(凹口)、scoops(挖口)等更为丰富的视觉样式,并可实现动画切换。
• 拓宽了 Web 设计在 UI 形状表现上的空间。
3. CSS 自定义函数(CSS custom functions)
• 引入 @function 规则,使开发者可像自定义属性一样定义函数,实现基于参数、条件的动态样式生成。
• 支持函数内调用变量,显著增强了 CSS 的可复用性与逻辑性,推动 CSS 向编程化发展。
• 这一特性属于 CSS Custom Functions and Mixins(函数与混入)规范的一部分。
4. 其他新特性与改进
• web app manifest 新增 scope_extensions 字段,方便多子域、多顶级域的站点整合作为单一应用呈现。
• Chrome 现在识别 WHATWG mimesniff 规范中定义的所有有效 JSON MIME 类型,提升兼容性。
• request-close 调用已集成至声明式 invoker commands API,优化 JavaScript 的事件处理模型。
author Rachel Andrew
#优质博文 #CSS #grid #容器查询
Get the number of auto-fit/auto-fill columns in CSS
author Ana Tudor
Get the number of auto-fit/auto-fill columns in CSS
AI 摘要:这篇博文深入探讨如何在纯 CSS 中获取 grid 布局中 auto-fit/auto-fill 自动列的列数,从而实现如高亮首/末列、斑马纹、响应式非矩形网格等复杂交互,无需任何 JavaScript 或媒体查询(breakpoints)。作者提出了通过 container query 单位、CSS 变量和数学函数自动计算列数的方法,并针对不同浏览器支持和 bug(尤其是 Firefox)提出了解决方案,使技巧能够跨浏览器使用。
author Ana Tudor
#优质博文 #CSS #动画 #前端 #新特性
Infinite Marquee Animation using Modern CSS
author Temani Afif
Infinite Marquee Animation using Modern CSS
AI 摘要:本文介绍了如何用现代 CSS 新特性(如 shape(), sibling-count(), sibling-index() 等)实现一个无限循环的简洁 Marquee(走马灯)动画,无需 JavaScript,并能自动适配任意数量、任意宽度的图片或元素。作者详细讲解了这一方案相比传统方法(如 <marquee> 或元素克隆)在性能、可维护性和响应式设计上的优势,并提供了完整、紧凑的 CSS 代码实例。相比以往需要繁琐计算或操作 DOM,此方法仅需 10 行 CSS 即可实现高效且灵活的无限轮播动画,同时分析了 shape() 函数的基本用法及其带来的灵活性。
author Temani Afif
今天想起来我为什么不查查广州到深圳有没有大巴,然后发现只要 26 就能从我现在附近的地铁站到我家附近的地铁站,以前都是打车一趟 160 多还收 30 多跨城费,高铁的话倒是 70 多但是高铁站离我家还得地铁一个半小时。
麻了,感觉血亏一个亿,时间上甚至还跟打车差不多
#AI #新动态
想了想还是发一下,毕竟 OpenAI 终于发了呢
https://openai.com/open-models
https://fixupx.com/karminski3/status/1952828063374557618
想了想还是发一下,毕竟 OpenAI 终于发了呢
https://openai.com/open-models
gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B
两个都是 MoE 架构的推理模型.
https://fixupx.com/karminski3/status/1952828063374557618
karminski-牙医 (@karminski3): 就在刚刚 OpenAI 发布了两个开放权重模型! 给大家带来深度解析!
gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B
两个都是 MoE 架构的推理模型.
首先, 这两个模型发布的就已经是量化版本了, 他们的 MoE 层直接用 MXFP4 精度训练的! 这意味着暂时没有办法微调这两个模型了 (现有微调框架不支持, 得等等).
然后, 大家肯定知道 OpenAI 搞了各种奇怪的命名, 比如 O3-mini-high, 这个 high 是啥? 现在答案揭晓, OpenAI 的模型是可以配置推理努力程度的. 分为三档, low, medium, high. 当然 high 模式下跑分最高, 相对的思考时间更长.
Agent 功能适配得非常好, 原生针对 function call, 网页浏览, 执行 python 代码, 各种结构化输出进行了优化. 这也能从从跑分上看出来, 使用 tool 后分数均有提升.
#优质博文 #bundler #工程化 #前端
Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28
author web-infra-dev ahabhgk
Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28
AI 摘要:Tree shaking(摇树优化)已成为现代前端打包(bundler)领域的重要优化手段。不同 bundler 工具(如 Webpack、Rollup、esbuild、Turbopack)由于应用场景和关注点不同,实现 tree shaking 的原理与细节也有所差异。文章系统对比了这些工具的 tree shaking 实现,包括分析粒度、副作用(side effects)判定、模块/语句/AST(抽象语法树)层面的优化,以及各自的优势与局限性,并详细剖析了典型案例。对于需要深入理解前端 build 工具原理与优化策略的开发者极具参考价值。
author web-infra-dev ahabhgk
#碎碎念 #优质视频
做一辈子新番吐槽吧泛叔叔,一辈子。
怎么可以这么多活的。
侦探先生,我的7月新番出轨了啊啊啊!【泛式】
@泛式:
做一辈子新番吐槽吧泛叔叔,一辈子。
怎么可以这么多活的。
侦探先生,我的7月新番出轨了啊啊啊!【泛式】
大家好我是侦探大家好我是助手大家好我是警长累死我了累死我了累死我了累死我了累死我了求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连七月新番求三连求三连求三连求三连求三连求三连7月新番中期吐槽求三连求三连求三连噼
使用素材:
最近的侦探真没用
章鱼p的原罪
我怎么可能成为你的恋人 不行不行
光死后的夏天
保龄球少女
死灵之子的宇宙恐怖秀
小城日常
琉璃的宝石
沉默魔女的秘密
熏香花朵,凛然绽放
游戏中心的异文化交流
明天美食广场见
新吊带袜天使
渡君的xx即将崩坏
拔作岛
活死喵之夜
坏女孩
怪兽8号 第二季
胆大党 第二季
更衣人偶 第二季
碧蓝之海 第二季
火影忍者
名侦探柯南
银魂
@泛式:
发布视频-动漫杂谈-动漫评论
播放量:45.87万 弹幕:5647 评论:5015
点赞:8.50万 投币:6.44万 收藏:2.14万
发布日期:2025-08-05 11:38:12
时长:0:12:38
#优质博文 #AI #ClaudeCode #VSCode #course
我现在也是这个流程了,不过我是不用
How I use Claude Code (+ my best tips)
author Steve Sewell
我现在也是这个流程了,不过我是不用
--dangerously-skip-permissions
,rm 权限不敢给。How I use Claude Code (+ my best tips)
AI 摘要:本文作者作为 Claude Code 的深度用户,详细介绍了自己从 Cursor 转向全程使用 Claude Code 的开发体验,总结出一系列高效实用的使用建议。文章覆盖了 Claude Code 的 VS Code 插件启动、终端界面、权限系统、GitHub 集成、大型代码库表现、经济性、队列系统、自定义扩展、可视化界面及团队协作等方面,旨在帮助开发者最大化 Claude Code 在日常工作中的价值与便捷性。
author Steve Sewell
#优质博文 #AI #RAG #NodeJS #向量检索 #NLP
浅谈 RAG 并基于 NodeJS 实现基础向量检索服务
author WindRunnerMax
浅谈 RAG 并基于 NodeJS 实现基础向量检索服务
本文系统介绍了 RAG(Retrieval-Augmented Generation,检索增强生成)模型的基本原理、实际应用场景及其在 NodeJS 环境下的基础实现。作者围绕文本数据的预处理、向量化、向量检索、多路召回、召回重排,以及 LLMs(大语言模型)在流程中的作用展开,详细讲解了如何以轻量级工具搭建一个实用的 RAG 检索服务,并讨论了分片策略、编码方法、检索优化及与开箱即用方案的取舍,为构建定制化AI知识问答系统提供了开源思路和技术参考。
1. RAG 简介与应用场景
• RAG 是结合检索(Retrieval)与生成(Generation)的 AI 架构,能提升对专业领域、高时效性内容的问答、代码生成等场景的回答质量。
• 适用于最新知识获取、特定领域知识补充、提升透明度与可解释性、长尾数据检索、垂直智能问答等实际需求。
• RAG 以内容检索为核心,兼容多种方式(如向量检索、倒排索引、图谱检索等),并与 LLMs 配合工作。
2. 文本向量化流程设计
• 数据预处理包括文本清洗和分片,分片方式有固定长度、overlap 重叠、句段分割、结构分片等,应兼顾语义完整性与检索效率。
• 分片时建议结合元信息(如标题、作者、时间等)以辅助召回与重排。
• 编码方式的演变从 one-hot,TF-IDF,到更先进的 Word2Vec、Transformer-based Embedding。实际项目推荐使用现成高效模型如 all-MiniLM-L6-v2。
• 分片及编码细节优化显著影响检索召回质量和成本。
3. 向量检索与多路召回机制
• 检索的核心是计算 Query 与候选文本的向量相似度,常用余弦相似度(Cosine Similarity),因其只关注方向信息,适合高维稀疏空间。
• 采用 hnswlib-node 快速完成高维向量检索,实际实现还需与实际内容并行存储,便于元数据同步。
• 多路召回建议综合关键词检索、向量召回、图谱召回等互补方式,通过加权、融合、重排序等策略提升检索全面性和精度。
4. 召回重排(Re-Ranking)及其优化
• 初次召回后需对候选结果做重排,提升真正相关内容在前,常见方法如下:
• 传统交叉编码器(如 BERT NSP)精排。
• LLMs 或专门 ReRanker 模型(如 BGE-Reranker)基于上下文深度理解排序。
• 分片元信息和人工打标可进一步增强重排效果,提升系统最终响应准确性和相关性。
• 重排虽可提升体验,但不可避免加大系统复杂度和响应耗时,需按场景权衡。
5. LLMs 在 RAG 流程中的多重角色
• 查询改写:修正拼写、分解多意图、格式化表达、扩展关键词等,显著提高召回精准度。
• 输入优化:用LLMs提升分片、编码智能化水平,以及用于多模态信息抽取、知识图谱构建等。
• 生成增强:将高相关检索片段作为上下文,辅助 LLMs 生成更自然、连贯、有据可溯的答案,并可提升系统的可用性与信任度。
• LLMs 贯穿流程多环节,兼具结构化与半结构化内容的处理与优化能力。
6. 方案总结与工程实践建议
• RAG 作为 AI Infra 基础模块,值得深入学习和灵活定制。开箱服务适用于通用场景,复杂定制或增量优化建议自行实现。
• 流程各节点(分片、编码、检索、重排、生成)都可精调优化,针对需求选择技术方案、服务模型和参数设定。
• RAG 在提升 LLMs 时效性、知识深度、成本控制等方面具备不可替代优势。
author WindRunnerMax
#优质博文 #CSS #Vite #前端 #工具链 #社区动态
What’s New in ViteLand: July 2025 Recap
author VoidZero Inc.
What’s New in ViteLand: July 2025 Recap
本文总结了 ViteLand 生态系统在 2025 年 7 月的主要动态,包括 Vite、Vitest、Oxc、Rolldown 等关键项目的最新进展,以及社区即将举办的线下盛会 ViteConf 的首场线下会议预告。Vite 团队将发布全新产品 Vite+,并聚焦前端开发领域的未来趋势。文章还预告了 Vite 纪录片的上线情况,为开发者提供了丰富的行业洞察和社区信息。
1. 生态系统进展
• 概述了 Vite、Vitest、Oxc、Rolldown 等项目在本月取得的主要更新和迭代。
• 着重强调了团队在提升开发者体验(DX, Developer Experience)方面的持续努力。
2. ViteConf 线下大会预告
• 预告 10 月将在阿姆斯特丹举行的首届线下 ViteConf,此前已有三届线上大会成功举办。
• 届时将首次发布 Vite+,介绍其功能和对团队工作流的提升作用。
• 大会将邀请知名演讲嘉宾,包括 Bolt.new/StackBlitz CEO Eric Simons 和 Netlify CEO Mathias Biilmann。
• 会议主题将围绕下一代开发工具(next-generation tooling)、智能 agent 体验等前端领域热点展开。
3. 社区与纪录片
• 宣布由 CultRepo 出品的 Vite 纪录片即将在活动中全球首映,展示 Vite 团队及 Svelte、Solid、Astro 等明星项目作者的未公开故事。
• 官方预告片已发布,可供提前观看,进一步增强社区凝聚力。
author VoidZero Inc.
#碎碎念 #草
布什哥们,这也太酷了,我死了想要这个。
“主播 能做个流麻墓碑吗?”
@汤木檀泽:
布什哥们,这也太酷了,我死了想要这个。
“主播 能做个流麻墓碑吗?”
@汤木檀泽:
发布视频-日常-轻手作
播放量:343.71万 弹幕:2429 评论:4317
点赞:18.72万 投币:1.39万 收藏:2.76万
发布日期:2025-07-31 09:09:42
时长:0:04:44
#Newsletter #CSS #性能 #SPA
It's time for modern CSS to kill the SPA
author Jono Alderson
It's time for modern CSS to kill the SPA
AI 摘要:本文章批判了将 SPA(单页应用,Single Page Application)作为优先方案的潮流,指出随着现代 CSS 和浏览器(如 View Transitions API、Speculation Rules 等)的进步,实现流畅、原生的页面交互已不再需要复杂的 JS 框架和大量前端代码。作者呼吁开发者回归标准的 HTML + CSS + 浏览器原生能力,构建更快速、可维护、SEO 友好的网站,并强调 SPA 带来的复杂性、性能损耗、可访问性问题,以及与浏览器发展脱节的弊端。
1. “类应用”迷思与 SPA 的错误假设
• 许多项目由于“要像 app 一样流畅”的陈旧要求选择了 SPA 架构,而忽略了是否真的需要。
• 选择 SPA 并非出于真正的技术需求,而是为交互流畅度妥协了架构简洁性。
• 现在的假设已过时,SPA 不再是唯一可实现流畅体验的方法。
2. SPA 的“伪流畅”与性能危害
• SPA 的“无刷新感”常常是假象,实际表现为加载动画、滚动错乱、路由行为不一致等问题。
• 大量 JavaScript 的引入导致性能下降,SEO 变得复杂,体验反而变差。
• 现代 SPA 阈值带来的技术负担,不成比例的为“流畅度”买单。
3. 现代 Web 平台演进(CSS 与浏览器原生特性)
• 浏览器原生已支持声明式页面过渡(View Transitions API),无需 JS 也能实现淡入淡出动画等高级体验。
• 结合 Speculation Rules(预测性预加载),可实现点击即开的导航体验,无需 JS 路由。
• 原生 MPA(多页面应用,Multi-page Application)方案能够通过 CSS 动画实现元素过渡、状态保存、URL 正确性等。
• 示例代码简明说明如何用 CSS 实现页面转场与共享元素动画。
4. 浏览器赋能与简单架构的优势
• 现代浏览器提供诸如 Back/Forward Cache(前进后退缓存)等特性,只要结构易读、无 JS 路由劫持即可天然获得极佳体验。
• 浏览器愿意协助性能优化,但前提是开发者不要人为增加复杂度。
5. 性能现实对比:SPA vs 现代 MPA
• 真实 SPA(如 Next.js 等)JS 体积大,加载慢,SEO 和导航表现不稳定。
• MPA + View Transitions + Speculation Rules 几乎无需 JS,加载极快,自然支持 SEO 和历史管理。
• 原生方法不仅替代 SPA 行为,而且性能和可维护性更佳。
6. 反思:“网站不是 APP”
• 普通网站无需 SPA 的状态管理、复杂路由、大量组件或 hydration。
• 使用过度的 JS 反而增加了网站开发、运维成本和用户负担。
• 理性选择开发手段,应“用网站的方式造网站”,拥抱标准技术栈。
7. 展望与建议:用现代 web 技术构建网站
• 原生 declarative transition(声明式过渡)、预渲染、降级兼容性、易维护架构等已足以满足绝大多数场景。
• SPA 是旧时代局限下的策略,如今实属多余。
• 建议开发者用现代服务端渲染和单纯 HTML + CSS 构建主站,只在必要时合理由加 JS 增强。
author Jono Alderson
#优质博文 #前端 #CSS #React #新特性
Frontend Focus #703
author Frontend Focus 编辑团队
Frontend Focus #703
AI 摘要:本期 Frontend Focus 报道了前端领域的最新动态和趋势,涵盖 CSS 新规范(如无 JavaScript 的走马灯、Masonry 布局、Scroll-Spy)、React/Next.js 开发中的常见陷阱、MDN 发展二十周年纪念,以及一批最新实用工具和开发资源。此外,简要提及了 Safari/Edge 等主流浏览器新特性和业界法规、社区大事件,适合前端开发者了解行业资讯和提升技术能力。
1. 前端社区动态与大事件
• MDN 文档网站庆祝成立 20 周年,目前拥有超 14,000 页内容,是 Web 开发的重要资料库
• 2025 Stack Overflow 开发者调查结果公布,涵盖开发工具、AI 代理、LLM 使用现状等
• W3C 发布关于组织使命与价值观的重要新文档
• HTML Day 活动将举办超 40 场全球盛会,HTML 技术持续推进
• Wikimedia 积极挑战英国在线安全法案,关注数字法规生态
2. CSS 新特性与最佳实践
• CSS Masonry 布局:探讨新规范进展与当前解决方案,兼顾未来性与可用性,附带交互反馈征集
• CSS Scroll-Spy :Chrome 140 浏览器引入 scroll-target-group 和:target-current,可用两行 CSS 实现目录高亮跟踪效果
• Responsive Video is (Almost) Easy Now:如何处理垂直和横向视频以适应不同场景,在上下文需要时提供垂直和水平版本。
• “现代 CSS 杀死 SPA”观点:提倡服务器渲染与页面级动画,倡导 CSS 动画和意图性预加载
3. Web 技术深度/创新话题
• The Useless useCallback:React 状态管理与性能相关实践讨论,分析 useCallback、useMemo 潜在问题,展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• Performance Extensibility API:允许自定义轨迹供 Chrome DevTools 性能面板分析
• WebAssembly(WASM)与 DOM 互操作性进展,工具链提升正降低 WASM 开发门槛
• Liquid Glass :苹果新一代视觉样式的网页实现尝试
• Web Components 及 Shadow DOM 实践解析
4. 工具、组件与资源推荐
• World Clock Slider:多城市世界时钟组件,支持暗黑模式
• FossFLOW:等距基础架构图形工具,支持丰富图标与数据管理 【这个挺酷炫的】
• StaticSearch:为静态站点增添搜索,无需后端,基于 Javascript,数据存储为 JSON
• Oklchroma:基于 OKLCH 色彩空间的色板生成器,提供基色,使用三角函数生成不同色阶
• difit:使用 GitHub 风格查看器查看和审查本地 git 差异的 CLI 工具,评论还可以作为 AI 提示进行复制。
• 7.css:忠实还原经典 Windows 7/XP UI 的 CSS 设计系统
• 使用 Three.js、WebGPU 和 TSL 进行交互式文本销毁
author Frontend Focus 编辑团队