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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
cosine - 前端人の日常频道
#碎碎念 #移动端适配 #坑 我恨 Safari(咬牙切齿) 当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug!!!还贼 tm 难调,日常安卓上和设备仿真上都是正常的 Safari 异常 我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式(在我的例子中是一个按钮)时,它会在 SVG 上绝对定位。但是当我移除 opacity…
#碎碎念 #坑
🤡 败了,经过几天的奋斗认清事实了,不用 svg 了直接定位了,svg + foreignObject + transform + 一些 xy 魔法在 Safari 里就是古神一般的存在,同样的代码在 Chrome 里 work 的非常自然,打开 Safari 的时候定位全乱是多么痛的体验,调试起来也是完
折磨。换了 dom + 绝对定位实现完整个人都舒心了无比流畅。

为什么,为什么这个定位会偏,为什么安卓上不会偏(选中)(看size看坐标)(对的啊)

有空想办法整整最小复现看看。
#优质博文 #前端 #react
从 React 看前端 UI 代码范式革命

AI 摘要:本文回顾 React 推动的前端两次范式革命(组件化与函数式 Hooks),分析其历史贡献与当前局限,并对比其他框架的改良方案。

文章以 React 为核心,梳理了前端 UI 代码范式的两次重大变革:

1. 第一次革命(组件化):React 通过 JSX 打破传统关注点分离(HTML/JS/CSS 分离),引入数据驱动视图的组件化思想,解决了 jQuery 时代 DOM 操作混乱的问题。
2. 第二次革命(函数式 Hooks):针对类组件的臃肿问题,React 推出 Hooks API,以 UI = f(state) 的理想化模型简化状态管理,但随之带来闭包陷阱、依赖管理等新挑战。

文章还批判性分析了 Hooks 的运行时机制缺陷(如重复渲染、状态过期),并对比 Solid.js 等框架的改良方案(如自动依赖收集),展望未来可能的范式演进。


author 风痕
#碎碎念 #搬家
一盒子白色充电头展览
你别说这插座真香,还可以刷机还可以塞充电头
#优质博文 #前端 #css #svg
又是被 svg 折磨的一天......所以 2025 了 SVG 2.0 现在是个什么情况?

https://www.w3.org/TR/SVG2/

https://stackoverflow.com/a/25302276

So… you can set an SVG circle’s radius in CSS?

AI 摘要:文章揭示了CSS直接控制SVG圆形半径的可行性,解决了多文件同步维护的痛点,但指出相关浏览器支持文档的缺失,呼吁更清晰的标准化信息。

1. SVG圆形半径(r)可通过CSS设置
• 作者发现可以通过CSS的r属性直接设置SVG圆形的半径,且在现代浏览器(Firefox、Chrome、Edge、Safari)中均有效,但未找到明确的官方文档支持。
• 此功能可能源自SVG2草案,但浏览器支持情况未在常见资源(如MDN、CanIUse)中提及。

2. 应用场景:动态进度条动画
• 作者通过CSS变量(如--radius)计算圆的周长(--circumference),结合stroke-dasharray和stroke-dashoffset实现圆形进度条的动画效果。
• 关键代码逻辑:
• 通过半径计算周长(circumference = 2πr)。
• 根据百分比动态调整stroke-dashoffset,控制进度条显示比例。
• 旋转圆形使动画从顶部开始(默认从右侧开始)。

3. 开发痛点与解决方案
问题:原本需在SVG代码和CSS中分别定义半径,存在维护风险(如修改遗漏导致不一致)。
发现:通过CSS直接设置r属性可统一管理半径值,减少代码冗余。

4. 未解决的问题
• 浏览器对SVG2特性的支持范围尚不明确,缺乏权威文档参考,需依赖实际测试验证。


via Paul Hebert
Akasha Terminal: dev🍃
转转上门抢劫,mbp 也没卖掉,添点钱全款买了新的(

在这里同出一个 M1 Pro 的 MBP,银色,16+1T,10 核 CPU+16 核 GPU,美版,Apple Intelligence 已经可用

成色自定义 9 成新:
A 面有个非常小的凹坑(剪刀不小心砸到了),ACD 面有一些正常使用的细小划痕,键盘祖传打油(售后可以免费换,过保也行),电池健康 98% 左右

转转报价 6k,闲鱼均价 7.5k,群友优惠按均价立减 -300

某人看我换了之后自己也想换,所以后面可能还会出个 MBP14(
#二手
#碎碎念 #二手
mac 滞销,帮帮我们
这下可能要出三个 mac 换两个 mac 了。

1. MacBook Air M1 丐版 (深空灰) 8+256 自定义成色 9 成新以上,无拆无修,电池健康大概 90% 左右 群友优先,太惨出不掉的话,过两周安定下来再挂闲鱼上,闲鱼看了下,类似成色成交价都在 2600 左右,群友优惠 2400 吧
已出

2. M1 Pro  MBP,银色,16+1T,10 核 CPU+16 核 GPU,美版,Apple Intelligence 已经可用
成色自定义 9 成新:A 面有个非常小的凹坑(剪刀不小心砸到了),ACD 面有一些正常使用的细小划痕,键盘祖传打油(售后可以免费换,过保也行),电池健康 98% 左右
转转报价 6k,闲鱼均价 7.5k,群友优惠按均价立减 -500

3. 自用 MBP 14 寸 16+512g 深空灰,跟上面差不多,详细描述稍后补充,群友按闲鱼均价 -500
cosine - 前端人の日常频道
#前端 #优质博文 #新动态 #chrome #css 试了试总结功能,真好用喵!搭配自己的 md2tg bot 可直接 copy 了。 New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more! Moe Copy AI 总结:Chrome 2025 年第一季度更新聚焦于 CSS 布局控制(如 text-box)、开发者工具增强(文件系统 API 扩展、DOM 状态保留…
#碎碎念 #AI
突然有感而发,我对 AI 摘要、总结内容之类的态度是用来后期检索和回忆的,所以在有内容的同时准确性不那么重要,应该不会有人摘要完了就不读原文吧,除非不感兴趣的文章。(因为看到好像有人很反感 AI 摘要总结之类的)

并且我写东西也是,只要发出去了别人随便怎么造都行(心态好像不太正确)
#优质博文 #前端 #css #course
经典八股,适合初学者()
CSS vertical alignment: Best practices and examples

AI 总结:文章介绍了CSS垂直对齐的多种方法,包括Flexbox、Grid、绝对定位和基于表格的方法。Flexbox和Grid提供灵活且响应式方案,而绝对定位和表格方法则在兼容性方面有优势。文章详细比较了每种方法的优缺点、浏览器兼容性和适用场景,并提供了代码示例和可交互的CodePen链接。最后,文章也讨论了垂直对齐对可访问性和可读性的影响,建议在长文本中尽量避免使用垂直对齐,并优先选择Flexbox或Grid以确保响应式布局。

1. CSS垂直对齐的背景与挑战
• 早期CSS缺乏直接垂直居中的方法,开发者常依赖JavaScript或Hack方案(如table-cell)。
• 现代CSS(Flexbox、Grid等)提供了更简单、灵活的解决方案。

2. 垂直对齐的定义
顶部对齐(Top):元素紧贴容器顶部。
居中对齐(Middle):元素与容器顶部和底部距离相等。
底部对齐(Bottom):元素紧贴容器底部。

3. 关键技术与示例
Flexbox
• align-items: center(垂直居中)、justify-content: center(水平居中)。
• align-self控制单个项目对齐。
• margin: auto实现快速居中(仅限单个元素)。
Grid
• place-items: center(单行代码实现居中)。
• grid-row精确控制行位置。
绝对定位
• top: 50% + transform: translateY(-50%)经典方案。
• position: absolute + margin: auto(需固定高度)。
传统方法
• vertical-align:适用于行内元素或表格单元格。
• line-height:单行文本居中(需匹配容器高度)。
伪元素法:通过::before和::after分配空间(较少用)。

4. 注意事项
无障碍性:垂直对齐文本可能影响阅读障碍用户,建议仅用于标题等短内容。
响应式设计:优先选择Flexbox/Grid,避免传统方法(如table-cell)的兼容性问题。
浏览器兼容性:Flexbox/Grid需注意部分旧版本浏览器的前缀支持(如Safari 7-8)。

5. 结论
推荐方案:Flexbox和Grid是现代布局的首选,兼顾灵活性与响应式。
兼容性场景:绝对定位或vertical-align可作为备选。
开发者建议:根据具体需求(如元素类型、布局复杂度)选择合适方法。

提示:文章包含交互式CodePen示例(原文链接可查看),帮助直观理解不同技术的效果。


via Facundo Corradini
#前端 #优质博文 #新动态 #chrome #css
试了试总结功能,真好用喵!搭配自己的 md2tg bot 可直接 copy 了。

New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!

Moe Copy AI 总结:Chrome 2025 年第一季度更新聚焦于 CSS 布局控制(如 text-box)、开发者工具增强(文件系统 API 扩展、DOM 状态保留)、交互体验优化(对话框轻量关闭),以及 Baseline 标准的推进(新功能标记与跨浏览器兼容性)。Interop 2025 将进一步推动关键 Web 技术的标准化。

1. CSS text-box
功能:新增 text-box-trim 和 text-box-edge 属性,允许开发者基于字体度量精确控制文本垂直间距(如裁剪大写字母顶部多余空间)。
应用场景:优化标题或文本容器的布局,避免因字体差异导致的间距不一致问题。

2. DOM 元素状态保留移动
新方法:Node.prototype.moveBefore 可在不重置元素状态(如 iframe 加载、焦点、动画等)的情况下移动 DOM 元素。
优势:相比传统的删除再插入操作,避免了不必要的状态重置。

3. 文件系统访问 API 支持 Android
扩展支持:原本仅限桌面端的 File System Access API 现已在 Android 和 WebView 中可用。
核心方法
• showOpenFilePicker():打开文件选择器并返回文件句柄。
• showSaveFilePicker():保存文件到本地。

4. <dialog> 元素支持轻量关闭(Light Dismiss)
行为:通过 closedby="any" 属性,允许用户点击对话框外部或按 Esc 键关闭对话框(类似 Popover API 的 auto 行为)。

5. Baseline 更新

新功能(Newly Available)
• CSS:scrollbar-gutter(预留滚动条空间)、scrollbar-width(调整滚动条宽度)、ruby-align(注音文本对齐)。
• JavaScript:Promise.try(简化同步请求的错误处理)。
• WebAssembly:垃圾回收和尾调用优化支持。
广泛可用(Widely Available)
• Array.findLast() 和 findLastIndex()(从数组末尾查找元素)。
• 独立的 CSS 变换属性(如 translate、rotate)。

6. 2025 年互操作性项目(Interop 2025)

重点领域:视图过渡(View Transitions)、CSS 锚点定位(Anchor Positioning)、导航 API(Navigation API)等。
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!  |  Blog  |  Chrome for Developers
#折腾 #插件 #碎碎念
Moe Copy AI 又又更新了一点自用刚需小功能,刚提审()

新增 AI 摘要和 streamText,接的 xsai 是真的很小!可以自己填 API Key 接摘要了...但是 ollama 等本地模型还得等等

时间有限先只搓了这么点儿东西 QAQ 头疼,睡觉!

Release 0.1.3
在推特上看到某人反驳别人说 “中文比英文更省 token” 的观点,这里反驳一下认为英文更省 token 的论调:

首先明确前提:
1. 中文模型的英文能力,比英文模型的中文能力好(需要采用中文模型的 tokenizer )
2. 从中文翻译到英文,比英文翻译到中文更自然(需要使用中文母语书写,翻译成英文或用英文重写的文本源作为对找;如果是英译中,使用中文母语水平重写,也可以作为对比,但是更难找到合适的参照)
3. 机器/AI翻译的结果,不能直接拿来比较(应该不用解释了)

满足这三点的情况下,最自然的可以拿 deepseek 或者 antd 的文档(或vue? 不太确定是不是中文写的),使用 deepseek 的分词器,中文会持平或略低于英文。

关于第一条可以详细解释一下,同样使用 vue 的这篇文档,可以看到英文的分词优化差异不大的情况下 (3%),中文分词差了 16%,故应该采用中文模型的分词器。

而使用 tokenizer 的最佳表现,可以发现无论中英,表达相同的含义需要的 token 数目,是大体相同的。这大概与 token 本身就是表达自然语言含义有关。
相应的,可以推测,小语种的 token 数优化就很难得到充足的资源

更延伸开来,从语言层面比较,中文世界作为追赶方,也更擅长将中文翻译成英文(论文、交流需要),且天生就更常出现中文夹杂英文的情况。而反之则非常罕见,即使是英译中,也大部分是中文母语者在做。
不知道算不算一种语言层面的后发优势。
而抛开背景差异单纯比较语言,那中文信息熵高早已是不争的事实了。
cosine - 前端人の日常频道
#碎碎念 https://fixupx.com/_cosine_x/status/1903766498306593257 我真的很想知道答案,急,在线等,跟妲喵进行了激烈的讨论(豆争)
#碎碎念
https://fixupx.com/Nah1daBuer/status/1903775739226259597

嗯...斗争失败,ds 的中文分词确实优化过,加上如果文章写的简洁干练的话,翻译到英文信息量就不一样的了,不过技术文章跟普通文章也不太一样,而且也不能保证中文翻到英文就一定能是英文里表意最简单的方式(deepL翻译)。 而且中英文夹杂的话呢(?

事已至此,先写代码去吧! (决定找找加上 ds 的 tokenizer 选择

https://lunary.ai/deepseek-tokenizer
#碎碎念
https://fixupx.com/_cosine_x/status/1903766498306593257

我真的很想知道答案,急,在线等,跟妲喵进行了激烈的讨论(豆争
Back to Top