#优质博文 #前端 #CSS
细，太细节了。 CSS resolution 第一次看到
Obsessing Over Smooth radial-gradient() Disc Edges

AI 摘要：本文深入探讨了如何解决使用 CSS radial-gradient() 创建圆形时出现的边缘锯齿（jaggies）问题。文章从常见的 1% 或 1px 间距方案入手，分析了它们在不同尺寸和缩放级别下的局限性。最终，作者提出了一种更优的解决方案：利用鲜为人知的 resolution 媒体查询 (media query) 或 JavaScript 的 devicePixelRatio 来动态调整渐变断点 (stop) 的距离，从而确保在任何设备像素密度 (pixel density) 和页面缩放级别下都能获得平滑、无锯齿的圆形边缘。

1. 问题提出：径向渐变的锯齿边缘
• 使用 radial-gradient() 创建实心圆形时，其边缘会出现阶梯状的锯齿 (jaggies)，缺乏伪元素 (pseudo-element) 那样的抗锯齿 (anti-aliasing) 效果。
• 抗锯齿通过在图形边缘添加半透明像素来平滑过渡，而基本的径向渐变是从一个颜色到另一个颜色的突变。

2. 解决方案的演进与缺陷
• 常见但不完美的修复：在渐变颜色断点 (stop) 之间设置 1% 的微小间距，例如 color 99%, transparent 100%。
• 缺点：对于大尺寸圆形，这会造成边缘模糊；对于小尺寸圆形，依然无法消除锯齿。
• 看似可靠的 1px 方案：使用 calc(100% - 1px) 来设置 1px 的固定像素间距。
• 缺点：此方案在高 DPI (hi-DPI) 屏幕上或当用户缩放页面时会失效。放大时边缘会变模糊，缩小时则会重新出现锯齿，因为 CSS 中的 1px 并不总是等于一个物理设备像素。

3. 终极解决方案：动态调整间距
• 利用 CSS resolution 媒体查询：
• 这是一个很少被使用的 CSS 特性，可以根据设备像素密度或页面缩放级别应用不同样式。
• 通过定义一个 CSS 自定义属性 (custom property) --f （代表缩放因子），并结合媒体查询 @media (resolution: 5x) { --f: 5 } 来动态更新这个值。
• 最终的渐变写法为 calc(100% - 1px/var(--f, 1))，使得过渡区域始终接近一个物理像素的宽度。
• 文章还展示了如何使用 Sass 循环和 min/max-resolution 来覆盖不同浏览器（如 Chrome, Firefox）的多种缩放级别，增强方案的健壮性。
• 更灵活的 JavaScript 方案：
• 通过读取 window.devicePixelRatio 来获取当前的设备像素比或缩放级别。
• 使用 JavaScript 动态设置 CSS 自定义属性 --f 的值，代码更简洁，且能精确适应任意缩放级别，无需预设多个媒体查询。

4. 应用场景与总结
• 这种精细的优化并非总是必要。在某些场景下，如创建需要精确平滑边缘的复杂 UI 组件（例如作为 shape() 属性的 fallback (后备方案)），这种技术至关重要。
• 但在其他场景下，比如作为装饰性的模糊背景，则可以接受甚至利用渐变的模糊效果。

author Ana Tudor

Frontend Masters

Obsessing Over Smooth radial-gradient() Disc Edges

(… and how that lead me to a very underused CSS feature, resolution media queries.)

#设计 #CSS #前端 #UX #用户体验 #优质博文
少见的讲「设计稿」与「Web 实际实现」之间区别的博客，适合前端和设计一起观看（笑）
Web Design: What is the web capable of that is hard to express in design software?

AI 摘要：本文探讨了现代网页设计软件与真实 Web 技术能力之间的差距。作者 Chris Coyier 指出，设计工具产出的是网站的“静态图片”，而非可交互的真实产品，这导致许多 Web 固有的动态、响应式和交互特性难以在设计稿中表达。文章详细列举了如元素状态、颜色模式、CSS 变量、流式布局、可变内容和动画等多个方面，强调了这些特性在从设计到开发的“翻译”过程中容易失真或被忽略，并认为很大一部分设计工作实际上必须在浏览器中，通过代码来完成。

1. 动态性与交互状态
• 链接与按钮状态 (Link & Button States)：设计软件通常只能展示元素的默认样式，但很难表现如 :hover (悬停)、:active (点击) 和 :focus (聚焦) 等重要的交互状态，导致这些状态在设计阶段常被忽略。
• 颜色模式 (Color Modes)：浅色/深色模式或 Windows 高对比度模式等全局状态会影响整个设计的可见性，但设计工具通常难以系统性地支持这些多模式的设计与预览。
• 变量 (Variables)：CSS 自定义属性 (Custom Properties) 具有级联 (Cascade) 和动态变化的特性，可以在 DOM 的任何层级被修改，这是静态设计工具基于图层的概念难以模拟的。
• 其他应用状态 (Other States)：加载中 (Loading)、错误 (Error)、用户特定权限等各种应用状态，在设计工具中往往需要手动绘制多个画板来表示，容易遗漏且无法体现状态间的排列组合。
• 动画与过渡 (Animations & Transitions)：从简单的悬停效果到复杂的动效，这些动态体验很难在静态设计稿中有效呈现和沟通，通常需要到开发阶段直接用代码实现和探索。

2. 响应式与流式布局
• 视口尺寸 (Viewport Sizes)：设计工具通常采用几个固定断点（如手机、平板、桌面）来处理响应式设计，但这无法完全表达 Web 的流式 (Fluid) 特性，例如容器查询 (Container Queries)、元素的最小/最大宽度以及字体大小的平滑变化。
• 滚动与鼠标相关效果 (Scrolling & Mouse Movement)：静态设计稿无法展示与滚动相关的效果，如 position: fixed (固定定位)、scroll-snapping (滚动吸附) 以及与滚动位置联动的动画等。
• 可变内容 (Variable Content)：设计稿往往使用“理想情况”下的内容（Happy Path），而无法充分考虑真实世界中内容长度不一、内容缺失或多语言翻译后字符数量变化等情况，这可能导致最终布局被破坏。
• 单位与数学计算 (Units & Math)：Web 拥有丰富的单位系统 (如 rem, vw, %) 和 CSS 数学函数 (如 calc(), min(), clamp())，它们是实现复杂流式布局的关键，而设计工具通常只提供固定的、无单位的数值，两者存在巨大鸿沟。

3. 特定设备与媒介
• 设备特定细节 (Device-Specific Details)：设计稿难以模拟和测试触摸目标的大小、移动设备屏幕键盘的交互、不同设备的光标 (Cursor) 样式，以及在不同带宽下的体验差异。
• 媒体处理 (Media Handling)：如何在设计中集成视频、音频或 3D 等复杂媒体，并在静态工具中准确传达其交互和表现，是一个巨大的挑战。

author Chris Coyier

Frontend Masters

Web Design: What is the web capable of that is hard to express in design software?

Designs aren’t websites, they are pictures of websites.

cosine - 前端人の日常频道

#折腾 #碎碎念 #插件 #浏览器插件 #开源 Moe Copy AI 又更了一点东西，现在能抓到更多网站结构了～试了一周还是蛮爽的，商店还在审核。（为什么这个点发啊我没救了） • 新增了 Readability 抓取模式，用 Mozilla Firefox 阅读模式的核心算法 @mozilla/readability，也保留着原来的选择器模式。 • 新增全屏预览，预览抓取到的 Markdown 内容时支持全屏预览 Release 0.1.6 下一步想加个预设提示词管理切换的功能（

#折腾 #碎碎念 #插件 #浏览器插件 #开源
让 Claude Code 打工搓了个文档站，回头再校对一下！
废话疑似有亿点多了，还有不少幻觉，笑死，得改改。
另外 Fumadocs 确实香。
https://moe.cosine.ren/docs

MoeCopy AI

萌萌哒的 AI 网页数据提取助手

#碎碎念 #AI
关于 Cursor 定价调整的说明，在工作群给不了解的同事发了下总结，也同步一下这里。

Cursor 的定价列表：https://docs.cursor.com/zh/account/pricing

Cursor 的定价曾经调整过很多次，被骂惨了。最早是随便用，pro 就可以，每月 500 次快速请求用完了会进入慢速请求模式但是还是能用。后面调了好几次，慢慢变成请求计费取消慢速请求，现在变成了：

Cursor 的定价列表：https://docs.cursor.com/zh/account/pricing

Pro ($20/月)：适合主要使用 Tab 功能，偶尔使用 agent 的
Pro+ ($60/月)：适合几乎每个工作日都使用 agent 编程的用户
Ultra ($200/月)：适合使用 agent 完成大部分编程工作的高级用户

请求限制是：

Pro：约 225 次 Sonnet 4 请求，约 550 次 Gemini 请求，或约 650 次 GPT 4.1 请求
Pro+：约 675 次 Sonnet 4 请求，约 1,650 次 Gemini 请求，或约 1,950 次 GPT 4.1 请求
Ultra：约 4,500 次 Sonnet 4 请求，约 11,000 次 Gemini 请求，或约 13,000 次 GPT 4.1 请求

官方还说「像 Opus 4 这样的模型每次请求消耗更多令牌，比其他模型更快达到使用限制。我们建议有选择性和有意识地选择这些模型。」就是烧不起 token 了

超过就会转很笨的 auto 模型，或者开 max 模式按量付费，所以现在 Cursor 不划算了，对于开发来说只用 tab 就够了。

Teams 版本就是按人头计费， 40 美元/月
「团队席位每月为每个用户提供 500 个请求。每次使用代理时，大多数模型将消耗一个请求。少数模型成本更高：
当您启用思考功能时，Sonnet 3.7 和 Sonnet 4 消耗两个请求。
MAX 模式定价基于令牌计算，根据模型提供商的 API 价格。」

省流的话，就是现在个人档/团队档位是按请求次数计费，加钱加档位只是免费请求的量会更多，没有任何新功能，所有档位都包含所有功能，超过免费量就会转很笨的 auto 模型，或者开 max 模式按 token 付费。

官方似乎也意识到了这点，现在还专门在定价说明里强调 20 刀的版本「适合主要使用 Tab 功能，偶尔使用代理的用户」

该跑路的应该在七月份的定价调整的时候就跑路了吧 23333，感觉现在留下的都是离不开他的 tab 的。

Cursor

Cursor – 模型与定价

Cursor 的方案与定价

cosine - 前端人の日常频道

#折腾 #碎碎念 #插件 #浏览器插件 #开源 Moe Copy AI 又更了一点东西，现在能抓到更多网站结构了～试了一周还是蛮爽的，商店还在审核。（为什么这个点发啊我没救了） • 新增了 Readability 抓取模式，用 Mozilla Firefox 阅读模式的核心算法 @mozilla/readability，也保留着原来的选择器模式。 • 新增全屏预览，预览抓取到的 Markdown 内容时支持全屏预览 Release 0.1.6 下一步想加个预设提示词管理切换的功能（

#碎碎念 #AI
说起来这个项目也算是经历了 cursor 写代码和 claude code 写代码的迭代，有点感慨，新功能就是用 claude code 加的，claude code 还是太强了，以前 cursor 还没降智的时候 agent 搭的架子和 UI 写的这些在 claude code 管理的时候感觉井井有条多了，打算认真做个文档站加个国际化对待一下了www

不过测试他还是会糊弄我 😡 无所谓了后边再检查，用出问题了再修！

作为一个纯个人项目来说我还是挺喜欢的，比起之前那些更个人的项目来说，因为真能帮到我不少。

#折腾 #碎碎念 #插件 #浏览器插件 #开源
Moe Copy AI 又更了一点东西，现在能抓到更多网站结构了～试了一周还是蛮爽的，商店还在审核。（为什么这个点发啊我没救了）

• 新增了 Readability 抓取模式，用 Mozilla Firefox 阅读模式的核心算法 @mozilla/readability，也保留着原来的选择器模式。
• 新增全屏预览，预览抓取到的 Markdown 内容时支持全屏预览

Release 0.1.6

下一步想加个预设提示词管理切换的功能（

GitHub

GitHub - yusixian/moe-copy-ai: ✨ 萌萌哒的 AI 网页数据提取助手 ✨

✨ 萌萌哒的 AI 网页数据提取助手 ✨. Contribute to yusixian/moe-copy-ai development by creating an account on GitHub.

POLEBUG - WHAT ARE YOU THINKING?

聪明的 claude code 已经一去不复返了 😭😭😭 好想念一开始用 claude code 的效果啊啊啊

#AI #碎碎念
我也有这种感觉……感觉一开始用的时候正好赶上巅峰时期了 🥲
现在让他重构有时候会：？写的这是什么玩意儿。
虽然还是很好用但是确实没之前那么聪明了，这种服务难道都逃脱不了降智的命运吗 QAQ

#碎碎念 #iOS
确实。想起杜叔叔那个招人帖子
https://fixupx.com/liseami1/status/1958362062645817494

赵纯想 (@liseami1): telegram : 世界上最好的UIKit黑魔法殿堂。一个UIKitUtils.m藏匿着一大堆私有API。
自定义毛玻璃：_UICustomBlurEffect 内部字段可调，半径、饱和度、暗角，完全可控。
PortalView： _UIPortalView 曝光，跨层级同步位置与变换。
CAFilter：直接实例化 gaussianBlur / luminanceToAlpha / colorInvert / monochrome。
内容遮罩：通过 KVC 设置 contentsSwizzle，切换 RGBA / AAAA。
https://github.com/TelegramMessenger/Telegram-iOS/blob/master/submodules/UIKitRuntimeUtils/Source/UIKitRuntimeUtils/UIKitUtils.m

🧵 Thread • FixupX

赵纯想 (@liseami1)

telegram : 世界上最好的UIKit黑魔法殿堂。一个UIKitUtils.m藏匿着一大堆私有API。
自定义毛玻璃：_UICustomBlurEffect 内部字段可调，半径、饱和度、暗角，完全可控。
PortalView： _UIPortalView 曝光，跨层级同步位置与变换。
CAFilter：直接实例化 gaussianBlur / luminanceToAlpha / colorInvert / monochrome。
内容遮罩：通过 KVC 设置 contentsSwizzle，切换…

#优质博文 #前端 #css #SVG #course
An Interactive Guide to SVG Paths • Josh W. Comeau

AI 摘要：这篇文章深入探讨了 SVG 的 <path> 元素，详细介绍了如何使用该元素绘制各种形状，尤其是 Bézier 曲线和弧形。文章通过示例和解释帮助读者建立对路径语法的直观理解，适合希望提升其 SVG 绘图技能的开发者。

1. 基本概念
• SVG <path> 元素类似于矢量图形软件中的“笔”工具，可以连接多个绘图指令。
• d 属性定义了一系列绘图指令，每个指令通过不同的命令（如 M、L）来实现。

2. 基本命令
• 移动命令 (M)**：用于将笔移动到画布的特定位置，不会绘制任何线条。
• 直线命令 (L)：用于绘制从当前点到指定点的直线。
• **Bézier 曲线: 包括二次 (Q) 和三次 (C) Bézier 曲线，分别使用一个和两个控制点绘制平滑曲线。

3. 弧形 (Arcs)
• 弧的复杂性：弧的绘制涉及到多个参数，掌握其用途对于理解如何连线至关重要。
• 半径控制：水平和垂直半径影响着绘制的椭圆形状的深度和外观。
• 弧形路径选择：通过大弧标志和扫掠标志选择路径方向。

4. 动画与额外功能
• 提到了动画技术的学习课程，并介绍了路径闭合命令 (Z) 和相对命令 (小写字母形式)。
• 文章总结了一些常用的命令和其语法，帮助开发者更轻松地创建复杂的 SVG 图形。

author Josh W. Comeau

Joshwcomeau

An Interactive Guide to SVG Paths • Josh W. Comeau

SVG gives us many different primitives to work with, but by far the most powerful is the element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of…

cosine - 前端人の日常频道

#视频更新 #旅游 #碎碎念 5月10号，从玉龙雪山下来之后就去了蓝月谷，终于抽时间剪好了~ 然后发现上次投稿的时候忘记调帧率了，这次调了下换了下之前的源，素材是 4K 60 帧的。 你说这蓝月谷怎么不蓝啊~~哦原来是因为下雨天~ 不过之后去的泸沽湖超级蓝，等下一期剪出来！ YouTube 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷 B 站 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷

#碎碎念
挂一下某人：怎么把 4K60 写标题里，好 low 啊，4K60 写在标题里只会让别人对你的素材产生不切实际的期待 😡😡
我：提醒我自己不行嘛（恼）

#视频更新 #旅游 #碎碎念
5月10号，从玉龙雪山下来之后就去了蓝月谷，终于抽时间剪好了~
然后发现上次投稿的时候忘记调帧率了，这次调了下换了下之前的源，素材是 4K 60 帧的。
你说这蓝月谷怎么不蓝啊~~哦原来是因为下雨天~
不过之后去的泸沽湖超级蓝，等下一期剪出来！
YouTube 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
B 站 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷

YouTube

【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷

5月10号，从玉龙雪山下来之后就去了蓝月谷。

终于抽时间剪好了~发现上次投稿的时候忘记调帧率了，这次调了下，素材是 4K 60 帧的。

还有泸沽湖还有 BW，清素材大作战继续加油！

#tools #插件
简洁好用，喜欢。
MaterialYouNewTab | Chrom 商店地址

AI 摘要：此浏览器扩展程序是一个灵活的新标签页助手，受到谷歌“Material You”设计的启发，用户可根据自身需求进行主题定制、欢迎信息及多种实用工具的配置，同时与用户喜欢的搜索引擎无缝集成。

GitHub

GitHub - prem-k-r/MaterialYouNewTab: A Simple New Tab (browser's home page) inspired with Google's 'Material You' design

A Simple New Tab (browser's home page) inspired with Google's 'Material You' design - GitHub - prem-k-r/MaterialYouNewTab: A Simple New Tab (browser's home ...

#视频更新 #旅游 #碎碎念
5月10号去的了，昨晚才剪出来我真是懒狗~~
回看之前在云南的感觉真好啊，等有钱有闲了还要再多去几趟云南。
蓝月谷的放在下一次剪了，还有泸沽湖还有 BW，清素材大作战！

YouTube 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
YouTube 频道 @nahida0721
B 站 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美

YouTube

余弦自留地

喵~