#碎碎念 #AI
最近也开始经常碰到 claude code 的防沉迷 limit 了，尽管经常用 compact 和 clear，有点纠结要不要开第二个 pro ，max 以我用的程度貌似也没必要，我一般还是两者结合着用，ai 跑代码的时候我 review。

#优质博文
台长的超长文，老有意思了，几天前看见的，忘记发了。
超短篇：苹果系统迁移史

AI 摘要：本文详细梳理了苹果公司自 1990 年代起从经典 Mac OS 向基于 UNIX 的 Mac OS X 系统的迁移历程，揭示了这场历时超34年、跨越四任 CEO、四次硬件平台更迭的技术与商业史诗。通过收购 NeXT 获取 NeXTSTEP 技术、构建多框架兼容体系、乔布斯回归后的战略转型等关键节点，苹果最终完成生态重塑，奠定了今日 iOS/macOS 统一架构的基础，成为商业史上罕见的成功系统迁移案例。

author 中二电波台

#优质博文 #前端 #CSS #新特性
How to Use attr() in CSS for Columns, Colors, and Font-Size

AI 摘要：本文介绍了 CSS attr() 函数的进阶用法，包括通过类型声明（如 <color>、<length>）将 HTML 属性值动态应用于网格布局、颜色和字体大小等场景，并提供了实际代码示例和设计系统中的应用思路。目前该功能仅在 Chrome 中支持，但未来将逐步普及。

1. 功能概述与背景
• 历史限制：传统 attr() 仅返回字符串，仅适用于 content 属性等简单场景。
• 新特性：现在可通过类型声明（如 type(<length>)）将属性值解析为数字、颜色等，扩展了应用范围。
• 兼容性：目前仅 Chrome 支持，但其他浏览器将跟进（参考 Can I Use）。

2. 核心用法示例
• 基础语法：

attr(data-font-size type(<length>));
attr(data-color type(<color>), black);

• 支持的类型：包括 <color>、<integer>、<length-percentage> 等 11 种 CSS 数据类型。

3. 实际应用场景
• 网格控制：通过 data-columns 设置元素跨越的列数，或 data-column-start 定义起始位置。
• 动态颜色：结合 color-mix() 或 oklch() 调整亮度，确保可读性（如 max(l, 0.9)）。
• 字体大小：使用 round() 限制字号为设计系统的固定增量（如 5px 倍数）。

4. 扩展思路与其他用途
• 设计系统工具：如 data-gap 控制间距，或 data-border 定义边框样式。
• 层叠传递：通过自定义属性（如 --button-color: attr(...)）向子元素传递值。
• 命名空间建议：推荐使用 data-* 前缀避免与未来标准冲突，并兼容 dataset API。

5. 参考资料与社区动态
• 推荐阅读：Una Kravets、Bramus Van Damme 的相关文章。
• MDN 文档 已更新新特性说明。

author Chris Coyier

Frontend Masters

How to Use attr() in CSS for Columns, Colors, and Font-Size

I’ve personally put “advanced attr() usage” on my CSS wishlists for years and years. All the sudden we’re seeing support for it start to drop! Props to the Chrome gang and others for shipping and highlighting this wonderfulness. I’m avoiding being entirely…

#tools #小程序 #时间管理
约饭有救了 23333
约时间助理 - 时间管理大师！为多人集体活动找到共同空闲时间[微信小程序]

AI 摘要：约时间助理是一款基于微信小程序的多人时间协调工具，通过可视化统计和智能排序帮助活动组织者快速确定集体活动的最佳时间，解决传统沟通效率低下的痛点。开发者针对国内用户习惯优化了交互设计，支持免登录、权限控制和多精度时间选择。

• 核心功能：通过微信分享活动卡片，统计多人空闲时间并生成可视化排行（日期/时段），支持自定义活动时间范围和结果精度。
• 本地化优势：相比国际工具 When2Meet，优化了中文交互体验，即点即用且无需注册。
• 痛点解决：10人以上活动时间协调困难，传统微信沟通依赖记忆和反复确认。
• 开发者动机：因 When2Meet 对非技术用户不友好，选择微信小程序平台实现轻量化、高适配的解决方案。
• 访问方式：微信直接搜索「约时间助理」即可使用。

author 小众软件（青小蛙）

小众软件

约时间助理 - 时间管理大师！为多人集体活动找到共同空闲时间[微信小程序] - 小众软件

约时间助理是一款微信小程序，活动组织者只需要在微信群中转发自己创建的活动，就能快速选出大家共同的空闲时间。@Appinn

#优质博文 #开源 #前端
开源项目的「死与新生」

AI 摘要：作者以 Element UI → Element Plus 的亲历为主线，讨论开源项目从诞生、演化到走向结束与再生的路径，强调“为自己所需而作”的初心、拥抱社区标准与透明治理，借助 RFC（Request for Comments）、BDFL（Benevolent Dictator For Life）式决策、语义化版本（Semantic Versioning, SemVer）与渐进式迁移（Progressive Migration）等方法，在 Trade-Off（权衡）中小步快跑、稳步迭代；同时用产品化思维和良好社区运营，尽可能延长项目生命周期，并在必要时坦然宣布进入 maintenance mode，给出替代与迁移方案，促成“死与新生”的良性循环。

author 云游君（YunYouJun）

云游君的小站

开源项目的「死与新生」

希望能成为一个有趣的人

#前端 #CSS #新特性
CSS Stretch

你知道你现在可以在 CSS 使用 height: stretch 吗？也适用于 width。

https://developer.mozilla.org/en-US/docs/Web/CSS/height#stretch

Frontend Masters

Stretch

Did you know you can do height: stretch now in CSS? Works for width too. Dave Rupert The other day [Dave] shared a link to the new stretch keyword in CSS – and I saw a lot of questions about how it’s different from 100% (or 100vh when doing full-screen layouts).…

#优质博文 #CSS #前端 #开源
What we learned from creating PostCSS—Martian Chronicles, Evil Martians’ team blog

AI 摘要：这是一篇 PostCSS 12 年演进的复盘：从 Autoprefixer 的诞生到 PostCSS 成为被 Google、Wikipedia、Tailwind 等采用、月下载量 4 亿的开源基础设施。作者围绕产品定位、插件策略、性能架构、版本演进、社区与生态、与竞品相处以及维护者防止倦怠的实践，给出一套贯穿前端工具链建设与开源运营的可复用方法论：以用户可用为先、以架构赢性能、以默认值减少配置、以人情味促协作、以渐进式变更稳生态。

1. 历史与定位：从 Autoprefixer 到 PostCSS
• 痛点出发：不想手写厂商前缀，于是做了 Autoprefixer，并需要一个更强的 CSS 解析器与 API（应用程序接口）。
• 启发与决策：Rework 无法满足“保留原始空白”等需求，遂自研 PostCSS；教训“−1”：对大用户更合作，给原项目提交原型的机会。
• 推广与文档同等重要：投入与写代码相当的时间做 README 与对外沟通，主动向 Webpack 推荐用 PostCSS 做解析器，带来关键增长。
• 定位转变：原打算做“幕后”框架，但终端用户对新工具敏感、对插件友好，因此把 PostCSS 做成对用户可见的“插件平台”，帮助新 CSS 工具降低接入阻力。

2. 产品形态与插件策略（Lesson 1）
• 默认可用优于“纯插件”：PostCSS 默认“无作为”导致用户被插件选择淹没；对比 Lightning CSS 内置常用能力与 Vite 的“开箱即用”，体现“约定优于配置”。
• 插件架构的收益：小内核易维护；拆分团队各司其职；利于做 CSS 工具实验（如 easing 渐变转为 CSSWG 草案）；满足项目定制；开发工具需要灵活性。

3. 时机与竞争：不怕“来得晚”，要快验真（Lesson 2、Lesson 7）
• “太晚”的误判：Chrome 停增前缀与 CSS Houdini 的宣布，都未让 Autoprefixer 与 PostCSS 失去价值；实际落地速度与有效性才是市场检验。
• 行动原则：尽快做原型、看真实结果，不被“新技术将取代一切”的叙事带偏。
• 与“竞品”为友：与 Sass 协作、统一术语与基准；公开推荐 CSSTree、Lightning CSS 等新工具；在开源中，“竞争者”可以分担你的免费支持压力。

4. 性能与架构：架构比语言更重要（Lesson 3）
• 关键洞见：PostCSS 用 JS（JavaScript）比 C++ 的 Sass 快 4 倍，原因在于架构与内存管理，而非语言本身。
• 架构实践：采用令牌化-解析器（tokenizer-parser）拆分，80% 解析时间在令牌化，便于聚焦优化；用正则快速跳转定位结束符等微优化。
• 内存优化：CSSTree 通过对象复用减少垃圾回收（GC）次数，曾快于 PostCSS ≈1.5 倍；避免“Rust/C++ 一定更快”的二元迷思。

5. 维护者健康：防止问题复发，避免倦怠（Lesson 4）
• 问题“闭环”：用户误用导致的 issue，要加类型与运行时校验、警告与文档澄清，防止重复踩坑；文档常是最后手段，但 FAQ 有效减压。
• 实例：用户把 parser 当插件使用，直接在代码里给出警告信息，显著降低重复问题。
• 反内耗机制：尽快响应、邀请提问者补文档或提修复 PR；开源是协作，不是单向免费支持。被忽视的感觉才是用户最大挫败。

6. 版本演进与迁移策略（Lesson 5）
• “跳-合”节奏：首个大版本标记废弃，下一个大版本再移除；尽量提供迁移指南（如 PostCSS 8），并维护生态迁移进度 Wiki。
• 重大变更前置沟通：提前发布变更提案、开反馈通道，协调 Webpack、Vite 等生态构件的配合升级。

7. 塑形生态：用最佳实践驱动一致性（Lesson 6）
• 统一模板与规范：插件脚手架强制“输入/输出”示例，制定插件与运行器指南；文档示例会塑造社区习惯。
• 学习路径清晰化：提供从零到一的分步指南，甚至涵盖“如何对抗开发挫败”的内容。

8. 社区运营与人情味（Lesson 8）
• 人的纽带：给插件作者寄明信片/贴纸、出差拜访活跃贡献者，建立真实连接。
• 品牌风格：Autoprefixer 的“骑士”与 PostCSS 的“炼金术”主题，让项目更有趣、更易形成文化认同。

9. 开源维护小贴士
• 尽量无构建：库用原生 JS 源码配合手写 .d.ts 或 TypeDoc，方便直接安装分支测试与 node_modules 内即时调试复制。
• 静态站点别用 React：项目文档与官网用 Astro 或纯静态 HTML，维护成本更低、更稳。

author Andrey Sitnik（PostCSS 与 Autoprefixer 作者），编辑 Travis Turner

evilmartians.com

What we learned from creating PostCSS—Martian Chronicles, Evil Martians’ team blog

We share what have we learned creating PostCSS and the huge ecosystem around it. Get 8 key lessons from Andrey Sitnik, creator of PostCSS.

#猫 #碎碎念
腊八腊八腊八可爱死我了

#碎碎念 #音乐
我每次 emo 的时候，去听听诗岸翻唱的小美满就会心情好多了。

山山我的山山 ₍˄·͈༝·͈˄*₎◞ ̑̑

♬ 没什么~大愿望~
♬ 没有什么事~要赶~
♬ 你愿相信什么
♬ 就把世界 看成什么样

安利给全世界！

#优质博文 #前端 #CSS #新特性
A gentle introduction to anchor positioning

AI 摘要：本文以头像菜单为例，系统介绍了锚点定位（Anchor Positioning）如何让元素基于另一元素进行纯 CSS 定位，涵盖锚点与目标的关联（anchor-name、position-anchor、position），两种定位思维模型：基于九宫格的 position-area 与基于边缘的 anchor()（仅用于 inset 系列），并演示了使用逻辑方向、溢出切换（position-try）与 calc() 的实战技巧，帮助开发者在无需 JavaScript 的情况下实现响应式菜单、气泡与工具提示。

1. 基本概念与关联关系
• 角色定义：被依附的元素为锚点（anchor），需要定位的元素为目标（target）。
• 建立关联：在锚点上声明 anchor-name（如 --profile-button），在目标上使用 position-anchor 指向该锚点名。
• 定位前置：目标需设置 position: absolute 或 fixed 才能启用锚点定位。

2. position-area：基于九宫格的定位模型
• 九宫格心智模型：以锚点为中心，在其包含块（containing block）上选定九宫格中的区域放置目标。
• 优先使用逻辑方向：以 block-start/block-end、inline-start/inline-end 与 center 取代物理方向（top/right/bottom/left），以适配不同书写模式与语言。
• 对齐与溢出：当目标比锚点宽时，使用 block-end span-inline-end 可实现“下方左对齐且向行尾延展”；类似地，可用 block-end center、block-start inline-end 等组合控制位置。
• 响应式回退：通过 position-try 指定备选位置，当首选位置空间不足时自动切换（如窄屏从向右溢出改为向左溢出）。

3. anchor()：基于边缘的精确定位
• 使用范围：仅可用于 inset 系列属性（物理：top/right/bottom/left；逻辑：inset-block-start/end、inset-inline-start/end；以及 inset-block、inset-inline 简写）。
• 边缘对齐：例如让菜单左边与头像左边对齐、菜单顶与头像底对齐，可写为 left: anchor(left), top: anchor(bottom)；逻辑等价为 inset-inline-start: anchor(start), inset-block-start: anchor(end)。
• 指定锚点：anchor() 可接收可选的锚点名（如 anchor(--profile-button left)），默认使用 position-anchor 指定的锚点。
• 配合 calc()：可将 anchor() 与 calc() 组合做细粒度偏移（如对齐去除内边距影响：inset-inline-start: calc(anchor(start) + 1.25em)）。

4. 实战场景与模式选择
• 导航头像菜单：点击头像（可结合 Popover API）后，菜单基于头像精准定位且纯 CSS 控制。
• 桌面与移动自适应：桌面可向 inline-end 溢出，移动端通过 position-try 切换为 inline-start 溢出，减少遮挡与视口溢出。
• 心智模型选型：喜欢“区域网格”可用 position-area；偏好“边缘数值”可用 anchor()。两者都能完成相同目标。

5. 规范与资源指引
• 推荐实践：优先使用逻辑属性与方向，增强无障碍与国际化适配；目标元素需 absolute/fixed 定位。
• 学习与实验：文中提供了 CodePen 示例用于自由尝试；更多详细属性与值可参阅 MDN 文档；还有教学游戏 Anchoreum。
• 反馈与社区：作者与 WebKit 福音师在 BlueSky/Mastodon 等渠道互动；遇到问题可提交 WebKit Bug 报告。

author Saron Yitbarek

WebKit

A gentle introduction to anchor positioning

Anchor positioning allows you to place an element on the page based on where another element is.

#趣站 #前端 #CSS
CSS-Questions
Sunkanmi Fafowora 推出 CSS-Questions 网站，提供 100 多道题与综合或 20 题速测，帮助你检验 CSS 知识，从基本选择器到伪类、级联层和容器查询等高级主题。

Css-Questions

Test your CSS skills with 100+ challenging questions on CSS tricky selectors, cascade layers, container queries, advanced pseudo-classes, and more!

#碎碎念 #优质视频
真好啊，真好。
在北极的极昼，我找到了永不落下的太阳！links

时隔三个月，我们又回到了格陵兰岛。和凛冽的寒冬不同，夏天的格陵兰有着永不落下的太阳，无论什么时候抬头看，太阳都高高的挂在那里。就好像小时候幻想的那样，只要我不睡着，这一天就永远不会结束...
而这一次我们居然还走进了因纽特人的家里，吃到了鲸鱼肉....

@Linksphotograph:

发布视频-出行-户外探险
播放量:5.07万 弹幕:1109 评论:735
点赞:8499 投币:5742 收藏:3054
发布日期:2025-08-14 04:00:00
上传日期:2025-08-13 13:09:18
时长:0:42:19
🔝> @Linksphotograph:
各位可以在评论区发布自家的可爱小猫，我们会选10位送出汤圆同款渴望环野甜虾冻干双拼粮，一起尝尝「极地鲜」！

Bilibili

在北极的极昼，我找到了永不落下的太阳！links_哔哩哔哩_bilibili

时隔三个月，我们又回到了格陵兰岛。和凛冽的寒冬不同，夏天的格陵兰有着永不落下的太阳，无论什么时候抬头看，太阳都高高的挂在那里。就好像小时候幻想的那样，只要我不睡着，这一天就永远不会结束...而这一次我们居然还走进了因纽特人的家里，吃到了鲸鱼肉...., 视频播放量 50661、弹幕量 1113、点赞数 8529、投硬币枚数 5766、收藏人数 3063、转发人数 1043, 视频作者 Linksphotograph, 作者简介 探索世界｜图片在同名ins｜ 工作邮箱：linksphotograph@gm…

#碎碎念 #开源 #tools #AI
我记得之前好像有群友有类似需求（？

https://fixupx.com/GitHub_Daily/status/1955570022807441512

http://github.com/omnara-ai/omnara
GitHubDaily(@GitHub_Daily): 在 Claude Code、Cursor 上执行长时间开发任务，然后转头去干别的事情，几个小时后，却发现卡在某个报错上，非常浪费时间。

面对这个痛点，Omnara 开源项目巧妙地监控它们执行的每一个步骤，然后推送给我们查看实时观察。

并可在手机上接收推送通知，关键的任务节点进展随时查看，当它们需要指导时，还能直接从手机回应。

GitHub：http://github.com/omnara-ai/omnara

主要功能：

- 实时监控所有 AI Agent 的工作进展和操作步骤
- 移动端推送通知，AI 需要帮助时立即提醒
- 支持从手机远程启动和控制 AI Agent 任务
- 统一管理界面，集中查看多个 AI Agent 状态
- 双向交互问答，随时为 AI 提供指导和反馈
- 与 MCP 协议兼容，支持自定义扩展

目前已支持 Claude Code、Cursor、GitHub Copilot 等主流编程工具，并提供了 iOS 手机客户端。

FixupX

GitHubDaily (@GitHub_Daily)

在 Claude Code、Cursor 上执行长时间开发任务，然后转头去干别的事情，几个小时后，却发现卡在某个报错上，非常浪费时间。

面对这个痛点，Omnara 开源项目巧妙地监控它们执行的每一个步骤，然后推送给我们查看实时观察。

并可在手机上接收推送通知，关键的任务节点进展随时查看，当它们需要指导时，还能直接从手机回应。

GitHub：http://github.com/omnara-ai/omnara

主要功能：

- 实时监控所有 AI Agent 的工作进展和操作步骤
- 移动端推送通知，AI…

Cloudflare Email 收件地址现在也支持通过 “+” 来扩展邮箱用户名了

也就是 abc+def@x. com 会转发给 abc@x. com

面条

🍀频道 🍵茶馆 📮投稿

#碎碎念 #美食
今天生日请了假跟妹妹和男朋友去欢乐谷玛雅水公园玩儿！
好耶！文通冰室的黯然销魂饭好吃！

Thomas Dohmke 宣布辞职创业，GitHub 并入微软不再独立运营
https://www.landiannews.com/archives/110157.html

蓝点网

GitHub首席执行官宣布辞职 GitHub并入微软不再独立运营 不再设立CEO职位 – 蓝点网

#行业资讯 GitHub 首席执行官宣布辞职，接下来 GitHub 并入微软并成为子部门不再单独设立 CEO 职位。GitHub 在…

#优质博文 #CSS #前端 #面试
原来歪果仁面试也考经典圣杯布局啊
How to Prepare for CSS-Specific Interview Questions

AI 摘要：本文为前端开发者提供了一份全面的 CSS 面试准备指南，精选了 10 个从易到难的典型面试题。文章不仅给出了每个问题的建议回答方向和代码示例，还深入探讨了其背后的核心概念，内容涵盖响应式设计、CSS 预处理器、性能优化、现代布局技术以及 CSS-in-JS 等关键知识点，旨在帮助求职者系统性地巩固 CSS 技能，并自信地应对技术面试。

author Shivam Bhalla

CSS-Tricks

How to Prepare for CSS-Specific Interview Questions | CSS-Tricks

Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.

#优质博文 #Chrome #前端 #CSS #新动态
Chrome 140 Beta 版

AI 摘要：Chrome 140 Beta 版为 Web 开发者带来了一系列重要更新。在 CSS 与界面方面，新增了类型化算术 (Typed Arithmetic) 以增强 calc() 的能力，引入了 scroll-target-group 属性改进滚动导航，并对视图过渡 (View Transition) 进行了多项功能增强。Web API 方面，提供了 Uint8Array 与 Base64/十六进制的内建转换方法，并通过权限提示限制本地网络访问以提升安全性。此外，还为独立式 Web 应用 (IWA) 引入了 Controlled Frame API，并开启了 clipboardchange 事件、来电通知等新的源试验 (Origin Trial)。此版本也为提升无障碍性而弃用了一些历史性的 <h1> 字号规则。

1. CSS 类型化算术 (Typed Arithmetic)：允许在 calc() 函数中进行带单位的数学运算，如 calc(10em / 1px)，方便排版和单位转换。
2. 滚动与视图增强：scroll-target-group 属性：用于定义滚动标记组容器，配合 :target-current 伪类可高亮当前视图内的目标锚点。
3. ScrollIntoView 容器选项：新增 container: 'nearest' 选项，可仅滚动最近的祖先滚动容器。
4. 视图过渡 (View Transition) 增强：伪类可继承更多动画属性，并支持嵌套视图过渡，以实现更复杂的过渡效果。
5. overscroll-behavior 传播修复：该属性现在从根元素 (<html>) 而非 <body> 传播，与其他浏览器行为保持一致。
6. 排版与无障碍性：在 content 属性的替代文本中支持 counter() 和 counters() ；支持在 @font-face 规则中使用 font-variation-settings 描述符。弃用 <h1> 元素在特定容器内的特殊字号规则
7. API 与交互改进：caret-animation 属性允许开发者手动控制光标动画，避免与默认闪烁行为冲突；highlightsFromPoint API 允许通过坐标点检测自定义高亮区域；ToggleEvent 新增 source 属性，可获取触发该事件的源元素；修复 SVG foreignObject 污染画布 (Canvas) 的问题，使其在使用 blob 网址时行为与其他浏览器一致。

author Rachel Andrew

Chrome for Developers

Chrome 140 Beta 版  |  Blog  |  Chrome for Developers

了解最新 Beta 版中即将推出的 Chrome 功能。

婴宁 | Deusyu Blog

想走在前面，就别等到信息漂到最后一层才去捞。

#碎碎念
有时候工作代码写到一个地方，觉得 “啊，这个地方最好还是重构一下比较好吧” 的时候，想到产品好像在之前说过这个地方以后会改版，原来的这整个东西就都会没掉了，就先不动了，动了后面还得再改回来，改版的时候再说。
感觉是不是全天下的工作都有这种很无奈的时候的 23333

陈皓在 2017 年说：

如果你的信息来自朋友圈、微博、知乎、百度或是今日头条，那么我觉得你完蛋了。因为这些渠道有价值的信息不多，有营养的可能只有 1%，而为了这 1%，你需要读完 99% 的信息，太不划算了。

2025 · Rainman 信息链

1. 源头层
某个领域的第一手信息，往往在核心成员之间口口相传：线下聚会、邮件组、私密频道。等它写成论文、登上媒体时，已经晚了半拍。

2. 早期公开层
国外机构、组织、专业社区（Reddit、X、Hacker News、GitHub）开始扩散，圈外人依然不多。

3. 二次消化层
内容被二次解读、翻译、整理，准备向国内输入。

4. 大众入口层
朋友圈、小红书、微博、百度等成了落地口，但此时信息已是第三手、第四手——热闹有余，时效与精度打了折扣。

结论：
想走在前面，就别等到信息漂到最后一层才去捞。