cosine - 前端人の日常频道
1.16K subscribers
1.25K photos
189 videos
7 files
1.32K links
呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
Download Telegram
#优质博文 #前端 #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 KravetsBramus Van Damme 的相关文章。
MDN 文档 已更新新特性说明。


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

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


author 中二电波台
#碎碎念 #AI
最近也开始经常碰到 claude code 的防沉迷 limit 了,尽管经常用 compact 和 clear,有点纠结要不要开第二个 pro ,max 以我用的程度貌似也没必要,我一般还是两者结合着用,ai 跑代码的时候我 review。
#碎碎念 #手办
新手办到了好久一直懒得拆于是今天拆了
这个两百多的国产手办质感很顶了,还是温感漆。
(我真的不好色😭只是对好看小姐姐没有抵抗力😭😭
🥰2
#视频更新 #旅游 #碎碎念
5月10号去的了,昨晚才剪出来我真是懒狗~~
回看之前在云南的感觉真好啊,等有钱有闲了还要再多去几趟云南。
蓝月谷的放在下一次剪了,还有泸沽湖还有 BW,清素材大作战!

YouTube 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
YouTube 频道 @nahida0721
B 站 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
#tools #插件
简洁好用,喜欢。
MaterialYouNewTab | Chrom 商店地址

AI 摘要:此浏览器扩展程序是一个灵活的新标签页助手,受到谷歌“Material You”设计的启发,用户可根据自身需求进行主题定制、欢迎信息及多种实用工具的配置,同时与用户喜欢的搜索引擎无缝集成。
🤩1
#视频更新 #旅游 #碎碎念
5月10号,从玉龙雪山下来之后就去了蓝月谷,终于抽时间剪好了~
然后发现上次投稿的时候忘记调帧率了,这次调了下换了下之前的源,素材是 4K 60 帧的。
你说这蓝月谷怎么不蓝啊~~哦原来是因为下雨天~
不过之后去的泸沽湖超级蓝,等下一期剪出来!
YouTube 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
B 站 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
1
#趣站
程序员的 MBTI 人格测试
感觉好 AI 的描述 2333 跟猜的一模一样(
想出这个的人也是很有意思了~
#优质博文 #前端 #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
2
#碎碎念 #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
POLEBUG - WHAT ARE YOU THINKING?
聪明的 claude code 已经一去不复返了 😭😭😭 好想念一开始用 claude code 的效果啊啊啊
#AI #碎碎念
我也有这种感觉……感觉一开始用的时候正好赶上巅峰时期了 🥲
现在让他重构有时候会:?写的这是什么玩意儿。
虽然还是很好用但是确实没之前那么聪明了,这种服务难道都逃脱不了降智的命运吗 QAQ
#折腾 #碎碎念 #插件 #浏览器插件 #开源
Moe Copy AI 又更了一点东西,现在能抓到更多网站结构了~试了一周还是蛮爽的,商店还在审核。(为什么这个点发啊我没救了)

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

Release 0.1.6

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