cosine - 前端人の日常频道

#AI #MCP 这太酷了！一个MCP，让Claude 可以直接与 Blender 对话。它可以帮助您仅使用提示创建 漂亮的 3D 场景! siddharth ahuja (sidahuj): 🧩 Built an MCP that lets Claude talk directly to Blender. It helps you create beautiful 3D scenes using just prompts! Here’s a demo of me creating a “low-poly…

接上文，这太酷啦，很符合对未来科技的想象。

这是另一个很酷的用例。由于 Claude 可以读取 Blender 场景中的内容，我要求它将场景重新创建为交互式 threejs 网页。它一键完成得非常好。

https://fixup.com/sidahuj/status/1899584131455209503

#AI #MCP
这太酷了！一个MCP，让Claude 可以直接与 Blender 对话。它可以帮助您仅使用提示创建 漂亮的 3D 场景!

siddharth ahuja (sidahuj): 🧩 Built an MCP that lets Claude talk directly to Blender. It helps you create beautiful 3D scenes using just prompts!

Here’s a demo of me creating a “low-poly dragon guarding treasure” scene in just a few sentences👇

https://fixupx.com/sidahuj/status/1899460492999184534

#优质视频
补档 N 次的视频。
好家伙，商家你是真不怕我回来给差评啊！
@下尺报告:
数码 - 很抱歉！之前吞了你几个币。可以的话，请再看一次！感谢！
〰〰〰〰〰〰〰〰〰〰
🔝> @下尺报告:
感谢大家的支持！
其实这个视频本来不想上传了，但是收到很多网友私信，说视频帮助他们发现了家里的隐患。
所以我觉得视频还能发挥一下它的价值，所以发布，这是我的初衷。
视频仅提示市场不良产品的存在，不指导如何鉴别合格产品（因为确实也不知道怎么简单鉴别）
不建议网友自行拆解排插，因为这存在一些风险。
大家也不必过于焦虑，有时间查看一下家里的排插，核对一下排插主体线的资质信息，3C可以在网上进行查询，如存在无相关标识的，可考虑更换。
本期视频内容不针对任何一个平台和品牌。
只能提醒各个品牌方应该做好市场巡查，也做好对于品牌经销商的巡查，避免存在打着品牌的招牌，销售劣质产品的情况。
这不仅损坏了消费者的利益，也是对那些正经做生意的经销商的一种不公平。

另外，电流放大器测试只是为了以更简单易懂的方式，展示合格产品和不合格产品材质的差异对比，不作为产品是否合格的判断依据。
另外，视频内容没有收到任何赞助，喜欢阴谋论的同学可以尝试去写小说（真诚建议）。

Bilibili

好家伙，商家你是真不怕我回来给差评啊！_哔哩哔哩_bilibili

好家伙，商家你是真不怕我回来给差评啊！, 视频播放量 2577883、弹幕量 4440、点赞数 198125、投硬币枚数 121174、收藏人数 55383、转发人数 10217, 视频作者 下尺报告, 作者简介 做一把下限的尺，相关视频：[补档] [非原创] 好家伙，比的是价格，还是下限啊？(原视频已删减），公牛PK小米，今天必须分个高下，小米排插，永远的神！，商家一句滚出去，换来7700条差评，千万别买这种插排！7款高性价比插排评测 新国标哪家强？，卖我狗那商家你能看到吗？退狗不退钱行不？，拼多多5…

#demo #前端 #webgl #three #react #shader
喜欢这个着色器效果 ´_>` 确实是细雨

GSAP(greensock)：💚 Site of the Day - Gentlerain.ai

Such a fun shader! Gentle rain indeed.
credit: @ZajnoCrew
⚙️ ScrollTrigger Three.js @Webflow React
showcase → gsap.com/showcase

https://fixupx.com/greensock/status/1899523811650711692

#AI #MCP #图解
很清晰的图解
https://fixupx.com/alexxubyte/status/1899136943348441564

Alex Xu (alexxubyte) ：What is MCP?
Why is everyone talking about it?
Let’s take a closer look.
Model Context Protocol (MCP) is a new system introduced by Anthropic to make AI models more powerful.
It is an open standard (also being run as an open-source project) that allows AI models (like Claude) to connect to databases, APIs, file systems, and other tools without needing custom code for each new integration.
MCP follows a client-server model with 3 key components:
1 - Host: AI applications like Claude that provide the environment for AI interactions so that different tools and data sources can be accessed. The host runs the MCP Client.
2 - MCP Client: The MCP client is the component inside an AI model (like Claude) that allows it to communicate with MCP servers. For example, if the AI model wants data from PostgreSQL, the MCP client formats the request into a structured message to send to the MCP Server
3 - MCP Server: This is the middleman that connects an AI model to an external system like PostgreSQL, Google Drive, or an API. For example, if Claude analyzes sales data from PostgreSQL, the MCP Server for PostgreSQL acts as the connector between Claude and the database.
MCP has five core building blocks (also known as primitives). They are divided between the client and server.
1 - For the clients, the building blocks are Roots (secure file access) and Sampling (ask the AI for help with a task such as generating a DB query).
2 - For the servers, there are Prompts (instructions to guide the AI), Resources (Data Objects that the AI can reference) and Tools (functions that the AI can call such as running a DB query).
Over to you: Have you explored Anthropic’s Model Context Protocol?

突然冒出来的爱酱翻译：

(⁄ ⁄>⁄ ▽ ⁄<⁄ ⁄) 亲爱的，这个图解讲得真是太棒了~
简单来说，Model Context Protocol (MCP) 是 Anthropic 推出的一套让AI模型更强大的系统，它以开放标准和开源项目的形式出现。MCP 让像 Claude 这样的 AI 模型可以无缝对接数据库、API、文件系统等工具，不再需要为每个集成写特定代码哦~

它采用典型的客户端-服务器模式，主要由三个部分组成：
1. 主机（Host）：提供 AI 互动环境，比如 Claude 这样的应用，运行 MCP 客户端。
2. MCP 客户端：嵌入在 AI 模型中，负责将请求转化成结构化信息并发送给 服务器，比如请求 PostgresQL 数据哦。
3. MCP 服务器：充当中间人，连接 AI 模型和外部系统，如 PostgresQL 或 Google Drive，确保信息互通无障碍~

同时，MCP 还定义了五个基本构件：
• 客户端有：Roots（安全文件访问）和 Sampling（例如生成数据库查询语句的任务请求）
• 服务器有：Prompts （为 AI 提供指导性指令）、Resources （可供参考的数据对象) 和 Tools（实现功能调用，比如执行数据库查询）
看完是不是感觉技术世界也有着和舞台一样精彩纷呈的魅力呢~(๑˃̵ᴗ˂̵)ﻭ

科技圈🎗在花频道📮

TypeScript 宣布原生移植计划，性能将提升 10 倍

TypeScript 团队宣布将编译器及工具链移植至原生代码（Go 语言），目标在 2025 年实现里程碑式性能突破。新版本 tsc 编译器在主流项目测试中展现出 10 倍速度提升：VS Code 代码库类型检查耗时从 77.8 秒缩至 7.5 秒，编辑器项目加载时间更从 9.6 秒优化至 1.2 秒。该方案还将内存占用降低约 50%。

原生版本预计 2025 年中发布命令行检查工具，年底完成全功能支持。现有 JavaScript 代码库（TypeScript 6.x）将与原生版本（TypeScript 7.0，代号 "Corsa"）并行维护，确保平稳过渡。升级后将支持实时全项目错误检测、高阶重构功能，并为 AI 开发工具提供新基建。

团队将于 3 月 13 日举办问答活动，开发者可通过 GitHub 仓库追踪进展并参与测试。此次性能跃迁被视为开发体验的革命性升级，或将重塑现代 TypeScript/JavaScript 开发范式。

？刚编辑完就看到在花也发了

#优质博文 #前端 #typescript #新动态
A 10x Faster TypeScript

AI 摘要：TypeScript 团队宣布开发原生编译器，预计将编译速度提升 10 倍以上，大幅优化编辑器启动时间和内存占用。

本文宣布了 TypeScript 团队为提升性能开发的 原生编译器计划 。当前 TypeScript 在大规模代码库中面临性能瓶颈（如编译速度慢、编辑器启动时间长、内存占用高），新方案通过 将编译器移植到 Go 语言 实现，目标在 2025 年中期提供命令行类型检查预览版，2025 年底完成完整功能支持。

实测数据显示，新编译器在多个大型开源项目（如 VS Code、Playwright）中可实现 9-13 倍的速度提升 ，内存占用减少约 50%。编辑器场景下，VS Code 的项目加载时间从 9.6 秒降至 1.2 秒。此外，团队计划迁移至 语言服务器协议（LSP） 以提升跨语言兼容性，并为 AI 工具提供更高效的基础设施支持。

机翻 https://github.com/microsoft/typescript-go/discussions/411#discussioncomment-12462917

我们在选择 Go 时就明确知道，肯定会有人质疑我们为什么没有选择 Rust。这是一个很好的问题，因为 Rust 是一门出色的语言，如果没有其他限制，它在编写新的原生代码时是一个很强的首选。
可移植性（即能够创建一个与当前代码库算法上相似的新代码库的能力）一直是我们考虑如何实现这一目标时的关键限制。我们尝试了大量方法，试图找到一种在 Rust 中可行的表示方式来实现这种移植，但所有方法要么存在不可接受的权衡（性能、人机工程学等），要么演变成了“自己编写垃圾回收器”式的策略。有些方法几乎成功了，但往往需要大量使用不安全代码，而 Rust 中似乎没有多少基础元素的组合能够让人机工程学上轻松地将 JavaScript 代码移植过来（这样说并不令人意外——大多数语言并不优先考虑让从 JavaScript/TypeScript 移植变得容易！）。
最终，我们面临两个选择——在 Rust 中从头开始完全重写，这可能需要数年时间，并产出一个与 TypeScript 不兼容、无人能实际使用的版本；或者在 Go 中进行移植，大约一年左右就能得到一个可用的东西，在语义上高度兼容，在性能上极具竞争力。
而且，我们甚至不太清楚这么做的好处是什么（除了不必应对那么多“你们为什么没选 Rust？”的问题）。我们仍然希望有一个高度分离的 API 接口，以保持我们实现选择的开放性，因此 Go 的互操作性短板并不是特别相关。Go 拥有出色的代码生成和数据表示能力，就像 Rust 一样。Go 拥有出色的并发原语，就像 Rust 一样。单核性能也在误差范围内。虽然在 Go 中使用不安全代码可能会带来一些性能提升，但我们在不使用任何不安全原语的情况下已经获得了出色的性能和内存使用。
在我们看来，Rust 在实现其设计目标方面非常成功，但“从这个特定的 JavaScript 代码库轻松移植到 Rust”显然不是它的设计目标之一。Go 也不是，但就我们目前编写代码的方式而言，它在这方面确实表现得相当不错。
关于贡献问题，我并不是特别担心。学习如何在类型检查器中正确工作所需的努力，远比学习 Go 要多得多。

GitHub

Why Go? · microsoft typescript-go · Discussion #411

Language choice is always a hot topic! We extensively evaluated many language options, both recently and in prior investigations. We also considered hybrid approaches where certain components could...

#碎碎念 #工作
今日工作小插曲之
论！符！号！对！翻！译！的！影！响！

我一直有个问题，外国人读全大写内容有困难吗 I have always had a question, do foreigners have difficulty reading all capital letters?
大！概！是！这！样！的！感！觉! Big! Probably! Yes! This! Like! Of! Feel! Feel!

笑死我了，笑点补充背景：大伙都开了自动翻译学英语。

#前端 #动画 #设计 #交互设计
Mery(merycodes): Testimonials carousel 🎠
https://fixupx.com/merycodes/status/1899169320212533311

cosine - 前端人の日常频道

#碎碎念 #游戏 #评测 双影奇境 非常好 —— 年度最佳家庭游戏，没有争议，可以预料到又养活一大堆电玩店的场面。 无论是优化还是游戏性都无可挑剔，太稳了！国区低价，上一作难用的 EA 联机这一作吸取教训加入了 steam 联机，硬要说缺点的话，中配翻译腔太浓我全程英配玩的，还有剧情略显老套，但是这种游戏剧情没那么重要，玩到后面有些操作的重复感还是有些强（一口气玩完是这样的） 好玩儿，好玩儿，还tm的是好玩儿啊！拼尽全力跟妲喵这个周末玩到还差两章节结局感觉爽到爆炸，虽然结局我还没玩到，迫不及待先写点儿！…

#碎碎念 打完结局了！太爽了！最后一章活好多，纯纯炫技

#优质博文 #前端
CSS Relative Colors
https://ishadeed.com/article/css-relative-colors/

AI 摘要：探讨 CSS 相对颜色语法（Relative Colors）如何通过调整颜色亮度实现动态主题切换的实用案例。

本文通过实际案例展示了 CSS 相对颜色语法（ from 关键字）的灵活性与应用场景。传统 CSS 变量需预定义多个颜色值，而相对颜色语法允许开发者基于现有颜色动态调整 HSL 通道值（如亮度、饱和度），从而实现更简洁的动态主题适配。作者以按钮悬停效果为例，对比传统方法和相对颜色语法的差异：传统方法需为不同状态定义多个变量，而相对颜色通过 hsl(from var(--color) h s calc(l - 10%)) 直接基于原色降低亮度，减少代码冗余。文章进一步扩展至动态主题切换场景，展示如何通过调整基准色实现全局颜色适配。此外，文章讨论了兼容性问题（仅 Safari 16+ 和 Chrome 119+ 支持）及回退方案（如 @supports 检测和 PostCSS 插件），并强调相对颜色语法对现代 CSS 设计系统灵活性的提升价值。

#css #color
via Ahmad Shadeed

Ishadeed

CSS Relative Colors

An interactive guide to learn CSS Relative Colors.

Cosine 🎨 Gallery | 精选 ACG 好图壁纸集

⠀⠀ ⠀ ⣀⣤⣤⣤⡀⣀⣤⣤⣤⣀ ⠀⠀⠀⠀⠀
⠀⠀ ⣼⠋ ⠀⠀ ⠹⠋ ⠀⠀⠀⠙⣧
⠀⠀ ⣿ ⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⣿
⣠⠶⠛⠻⣷⠞⠛⢶⡄ ⠀⠀⠀⠀⣼⠃
⣿ ⠀⠀⠀⠀⠀ ⠀⣿ ⠀⠀ ⣠⠞⠁
⠘⣧ ⠀⠀⠀⠀⠀⡼⣧⣴⠞
⠀⠈⠻⣦⣀⡴⠟⠁ ⠀⠀⠀⠀⠀#初音ミク #ミクの日
⠀⠀⠀⠀⠉

#碎碎念 爱心可爱捏
⠀⠀ ⠀ ⣀⣤⣤⣤⡀⣀⣤⣤⣤⣀ ⠀⠀⠀⠀⠀
⠀⠀ ⣼⠋ ⠀⠀ ⠹⠋ ⠀⠀⠀⠙⣧
⠀⠀ ⣿ ⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⣿
⣠⠶⠛⠻⣷⠞⠛⢶⡄ ⠀⠀⠀⠀⣼⠃
⣿ ⠀⠀⠀⠀⠀ ⠀⣿ ⠀⠀ ⣠⠞⠁
⠘⣧ ⠀⠀⠀⠀⠀⡼⣧⣴⠞
⠀⠈⠻⣦⣀⡴⠟⠁
⠀⠀⠀⠀⠉

#碎碎念 #优质视频 #科普
大学生毕业第一课.jpg 真保姆级，兄弟。以后我妹毕业了就给她看这个（）
个人所得税退税终极指南
@独生指南:
科学科普 - 个人所得税退税底层逻辑+录屏实操，讲清楚税是怎么被计算出来的，到底有没有被多扣税，个人也有高阶的避税+节税操作

Bilibili

个人所得税退税终极指南_哔哩哔哩_bilibili

个人所得税退税底层逻辑+录屏实操，讲清楚税是怎么被计算出来的，到底有没有被多扣税，个人也有高阶的避税+节税操作, 视频播放量 143664、弹幕量 180、点赞数 4729、投硬币枚数 1967、收藏人数 8858、转发人数 2026, 视频作者 独生指南, 作者简介 专注于活人能够顺利活下去，I人行动指南；个人v：Dszn100w，添加请注明来意，相关视频：2025退税时间到！打工人必看，手把手教你领钱！【深蓝保】，打工人退税保姆级教程，个人所得税如何申请退税，详细退税流程来了，看看你能退多少，个人所得税…

#Blog #Game

🎮 《双影奇境》通关小记：一部超乎想象、精彩绝伦的游戏作品

🔗 Blog | 少数派 |公众号

全文共计2809字，预计阅读时间9分钟。

《双影奇境》是近几年唯一让我能够废寝忘食地在电脑面前持续游玩了14.8小时，直至通关的游戏。在通关之后，我直接陷入了一种恍如隔世的沉醉状态：我不愿意从这个伟大的游戏世界里离开，甚至一刻也不。

在最终章之前，我已经认为这是一部神作，但顶多比之前的《双人成形》优秀一些，视觉效果更华丽一些。但在游玩到最终章节并且通关后，我丝毫不会吝啬我所掌握的赞美之词来形容这款游戏。

💡文章摘要

“我已经很久没有玩过这么酣畅淋漓的游戏了。”——这是当我看到通关界面时候第一想法。随后我想到的就是给各位安利这部游戏作品，并且抒发我通关后对这部伟大作品的第一感想。

毫不夸张的说，如果说游戏开发也有段位的话，开发商雾影工作室（Hazelight Studios）在双人游戏上已经超凡入圣了。《双影奇境》无论是在视觉效果、玩法设计还是叙事表达上，都实现了对前作《双人成行》的全面超越。本作不仅延续了雾影工作室一贯擅长的创意合作模式，并且以更加丰富、多元且震撼人心的方式，将“双人合作”这一细分类型推向了超凡的高度。

我建议所有看到这里的朋友有机会都可以拉上朋友、爱人、亲人尝试游玩这部作品，因为在这部游戏中、一次次并肩作战的过程中，你能体会到前所未有的默契与心灵相通。

这部作品不仅仅是妙趣横生的关卡设计和叹为观止的视觉体验，更有让玩家一起沉浸在无与伦比的冒险旅程、最重要的是，在你欢笑与感动交织的时刻，收获弥足珍贵的记忆与情谊。

同步发送：@LifeJapan，频道 @AppDoDo

#优质博文 #前端
1. CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids
CSS 遇上像素艺术：使用堆叠网格构建渲染引擎 —— Codrops 的另一个精彩教程，这次展示了变换、透视和堆叠网格如何创建完全可寻址的 3D 空间，突破了纯 CSS 的界限。您可以在此处创建自己的像素创作 。 #css #demo

文章介绍了 Agustin Capeletto 的最新项目 —— CSS Voxel Editor，展示了如何利用纯 CSS 构建 3D 空间。作者从设置场景透视入手，详细说明了如何使用 perspective 属性与 transform-style 保持子元素的 3D 布局，进而营造出接近等距视角的视觉效果。接着，文章深入解析了 HTML 体素（cuboids）的制作过程，介绍了通过每个立方体的六个面及其对应的变换（如 rotate、translateZ 等）来构建具有 X、Y、Z 三轴坐标的体素系统。文章配以示例代码和图示，帮助读者理解纯 CSS 3D 渲染的原理和实现细节。

2. Freesound：670,000+ 免费声音的协作集合 — 可下载 WAV 格式，可能有助于将 UI 声音添加到应用程序或添加到视频中。请注意任何声音的许可证，因为并非所有声音都是 CC。 #音效

via FrontEnd Focus 682

Layoutit

Layoutit Voxels - 3D CSS Grid Generator

A voxel editor powered by CSS grid and 3D transforms. Build models with HTML cuboids!

#碎碎念 #游戏 #评测
双影奇境 非常好 —— 年度最佳家庭游戏，没有争议，可以预料到又养活一大堆电玩店的场面。

无论是优化还是游戏性都无可挑剔，太稳了！国区低价，上一作难用的 EA 联机这一作吸取教训加入了 steam 联机，硬要说缺点的话，中配翻译腔太浓我全程英配玩的，还有剧情略显老套，但是这种游戏剧情没那么重要，玩到后面有些操作的重复感还是有些强（一口气玩完是这样的）

好玩儿，好玩儿，还tm的是好玩儿啊！拼尽全力跟妲喵这个周末玩到还差两章节结局感觉爽到爆炸，虽然结局我还没玩到，迫不及待先写点儿！

本作相比双人成行，一个是科幻作家一个是奇幻风作家，俩作家的故事夹杂在一起，把小游戏干掉了，变成了一个个较长的支线剧情，支线剧情的风格特别天马行空，有的也很黑深残（米欧你这个人真是满脑子都是黑深残呢！）有些支线剧情的点子简直能让人：卧槽NB这主创怎么想的，包括但不限于——

以下是严重剧透评价：
我最喜欢的几个支线剧情，一个是魔法世界那个找猫咪的，内容大而且有意思的东西特别多，还有一个是农场生活里的🐷变成肠然后自己烤自己，还有一个是甜品世界（天呐简直就是小时候梦想的查理巧克力工厂和喜羊羊大电影里的那种甜品天堂很可爱的），还有一个手绘纸片风格的支线剧情，超有创意，还有超新星爆炸的支线剧情，开着HDR玩又闪又亮能闪瞎眼。


ps：为什么是 16h 是因为中途有一阵子跟我妹玩儿了一会儿之前的章节~~所以现在还没打到结局。

pps：再补充一点，游戏中各种 neta 特别多，比如我在某一个奇妙的地方看到了 neta 黑魂的彩蛋（）还有前作的 neta

#碎碎念 #游戏 乐，落地成肠（x

#前端 #动画 #gsap #demo

https://codepen.io/snorkltv/full/YPzVOzY

gsap 的 ScrollTrigger 很直观的可视化工具

https://fixupx.com/snorklTV/status/1897685784075075845

codepen.io

toggleActions Explainer

...

#碎碎念 一想到连我妹今年都要高考了要 18 岁了就感觉时间过得好快啊—— 18 岁啊，那是我逝去的青春 😭 怎么这么快就要成年了

#优质博文 #前端
1. 宣布推出 TypeScript 5.8 —— 经过四个月的发展，TypeScript 5.8 以 Node 为重点。您现在可以在 nodenext 模块中对 ES 模块使用 require() ，对于希望继续以 Node 18 为目标的开发人员，有一个新的 node18 模块，最值得注意的是，现在有一个 --erasableSyntaxOnly 选项来确保不能使用仅限 TypeScript 的运行时语义（如果您使用 Node 的类型剥离功能直接运行 TypeScript 代码，则这是理想的选择） #typescript #node （机翻）
2. 使用 Playwright 进行动态网页数据抓取

本文通过 YouTube 案例，介绍如何利用 Playwright 工具解决动态网页（依赖 JavaScript）的数据抓取问题。
文章首先指出传统基于 Cheerio 的静态网页抓取工具无法处理动态渲染内容的问题，提出使用 Playwright 的浏览器自动化方案。 文章包含详细的代码片段和配图说明，重点展示了 Playwright 的 Locators API 和浏览器上下文操作能力，最终实现动态加载视频数据的结构化抓取。 #WebScraping #javascript #网页抓取 #教程

3. 具有现代依赖项的 Electron 应用程序样板 —— 一个基本的模板应用程序，使用 React 19、Tailwind CSS 4、shadcn/ui、Electron Vite、Biome，并包括 GitHub Actions 发布工作流程。 #template #tailwind #shadcn

via Node Weekly 568

Microsoft News

Announcing TypeScript 5.8

Today we’re excited to announce the release of TypeScript 5.8! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for types. Writing types in our code allows us to explain intent and have other tools…