呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#前端 #优质博文 #新动态 #chrome #css
试了试总结功能,真好用喵!搭配自己的 md2tg bot 可直接 copy 了。
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!
试了试总结功能,真好用喵!搭配自己的 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)等。
https://fixupx.com/Nah1daBuer/status/1903775739226259597
嗯...斗争失败,ds 的中文分词确实优化过,加上如果文章写的简洁干练的话,翻译到英文信息量就不一样的了,不过技术文章跟普通文章也不太一样,而且也不能保证中文翻到英文就一定能是英文里表意最简单的方式(deepL翻译)。 而且中英文夹杂的话呢(?
事已至此,先写代码去吧! (决定找找加上 ds 的 tokenizer 选择
https://lunary.ai/deepseek-tokenizer
某妲喵找到工作了,于是我们又考虑租房出去玩儿!(一方面是通勤,一方面虽然我远程办公了但是一直在自己家里待着有点腻,再一方面是我们都觉得现在买房很亏以后买不买房再说了)
找了一堆房之后选了一个民水民电的城中村 loft,各方面都挺满意的,总结一点经验,再次强力安利 豆友租房 的 租房避坑指南,有租房需求的可以看看?
后续应该会整理整理总结一篇租房指南(虽然我自己也就租过几次)
不得不说感觉租的房都比家里老破热水器好,顶层复式热水器真遭不住,一个人洗完就没水,而且夏天顶层巨热🌚而且待在家里活动范围永远是一个小单间感觉好像还不如租个大点的 loft 哈哈哈哈。
开心!其实写了还有好多东西,等总结一下吧(挖坑+1)
- 检查房型:小区房/城中村/公寓
- 水电费管理费和物业费等额外费用 check
- 消防通道是否通畅
- 电梯房/步梯,电梯是否老化
- 卫生间:淋浴喷头水压、热水器
- 采光、周围噪音(有条件的话白天看一次晚上看一次)
- 千万不要急着交押金,一定要先问清楚退房时有什么要求,都谈好了再交。
- 仔细检查洗衣机热水器空调有没有问题,几级能效,民水民电还是商水商电
- 家电一定要齐全,并且现代一些,售后管家要负责。
ps:售后管家要负责指的是,万一有家电出问题能及时修好,不会拖很久。
- 友情提示,如果一楼是饭店超市之类的最好别租二楼,不然蟑螂蚂蚁等虫类会随时刷新在你家。
- 选楼层尽量不选顶层,冬冷夏热,可能还会漏雨。也不要选一层,吵闹不安全。但这两层的租金也相对便宜些。
- 如果是公寓的小复式,一定要仔细检查床的稳定性以及地面稳定性
- 有的房子水龙头只能提供冷水,如果不想冬天洗个脸都疼的小伙伴需要好好考虑一下。
- 问清水电、燃气费、暖气等缴纳方式,还有是否可以中途转租。
- 确定电器是否正常使用,可以考虑拍照留底,如果有损坏最好在合同写明或是修好再搬进去。
- 租房前要检查地面排水,门锁的安全性。楼层高的要注意水压,万一洗澡水是“细水长流”,冬天就……(水压很重要)
- 短租一定要选网络信号好的地方,不然买宽带很亏,不买又像进了山区一样。(或者直接换千兆宽带的话,问问运营商这个小区接不接)
- 家具墙纸等是否有破损收费等
- 楼下是否有电动车充电位等,便利店等周边设施检查
- 通勤最好近得很,步行30min以内或电车骑行20min以内
- 考虑性价比的话以上都可以看情况妥协23333
蛮有意思,在文章的网页里我 mac 上能看出来差别()手机上不行。
这里的图仅供参考色差
Design systems need a colour space
AI 摘要:本文探讨设计系统中色彩空间的重要性,分析 sRGB 与 Display P3 的差异,介绍 OKLCH 的优势与局限,并强调未来色彩空间规范化的必要性。
本文通过类比鞋码系统的复杂性,引出设计系统中色彩空间的重要性。传统使用十六进制值(如#ff0000
)或 RGB 值的色彩定义方式缺乏对色彩空间的明确标注,可能导致显示偏差。sRGB 是当前 CSS 和 Figma 的默认色彩空间,但 Display P3 因其更广的色域(尤其是更鲜艳的红、绿色)正成为未来趋势。
Tailwind CSS 4 和 Radix 3 已转向 Display P3,并采用 OKLCH 色彩空间。OKLCH 通过亮度(Lightness)、色度(Chroma)和色相(Hue)实现感知一致性,但需注意其超广色域可能导致部分颜色无法在现有设备上准确显示。此外,OKLCH 在颜色混合时可能因色相差异产生意外结果,需结合 OKLAB 等其他空间优化。
文章建议将色彩创建与部署分离:创作阶段可利用 OKLCH 等高级空间,而部署时需兼顾代码紧凑性与兼容性。最后提到工具 Pinwheel 可辅助色彩编辑、混合及代码生成。
author bjango
via Frontend Focus 684
NadeshikoManju@摇露营S4制作确定! (Manjusaka Lee):https://github.com/advisories/GHSA-f82v-jwr5-mffw
Next.js 极高危(评分: 9.1/10),利用极为简单的鉴权漏洞,大家请尽快升级自己已有项目
https://fixupx.com/Manjusaka_Lee/status/1903438660676252030
等……等一下?
https://fixupx.com/usrbinmix/status/1903446720324972587
Next.js 极高危(评分: 9.1/10),利用极为简单的鉴权漏洞,大家请尽快升级自己已有项目
https://fixupx.com/Manjusaka_Lee/status/1903438660676252030
Impact
如果授权检查发生在中间件中,则可以绕过 Next.js 应用程序中的授权检查。
Patch
对于 Next.js 15.x,此问题已在 15.2.3 中修复
对于 Next.js 14.x,此问题已在 14.2.25 中修复
对于 Next.js 版本 11.1.4 到 13.5.6,请参阅以下解决方法。
等……等一下?
https://fixupx.com/usrbinmix/status/1903446720324972587
#优质博文
As an engineer, I’d rather be called stupid than stay silent
https://shiftmag.dev/asking-questions-engineering-career-advice-4895/
我也是这么觉得的(
As an engineer, I’d rather be called stupid than stay silent
https://shiftmag.dev/asking-questions-engineering-career-advice-4895/
我也是这么觉得的(
#优质博文 #浏览器插件 #插件
推荐了 Under New Management 扩展,开源、权限正常。间歇性地检查已安装的扩展,查看 Chrome 网上商城中列出的开发者信息是否发生变化。如果有任何不同,扩展图标将显示红色徽章,提醒你发生了更改。
Buying browser extensions for fun and profit
author John Tuckner
via Frontend Focus 684
推荐了 Under New Management 扩展,开源、权限正常。间歇性地检查已安装的扩展,查看 Chrome 网上商城中列出的开发者信息是否发生变化。如果有任何不同,扩展图标将显示红色徽章,提醒你发生了更改。
Buying browser extensions for fun and profit
AI 摘要:本文通过作者购买浏览器扩展并篡改其功能的实验,揭示了浏览器扩展所有权转移的隐蔽性及潜在安全风险,呼吁用户警惕此类交易的恶意利用。
文章以作者购买名为 "Website Blocker" 的 Chrome 扩展为例,详细描述了从 寻找目标扩展 到 所有权转移 、 代码篡改 的全过程。实验发现:
1. 扩展交易市场的活跃性 :开发者常因维护压力或变现困难,在平台(如 extensionhub.io)出售扩展,价格从 $50 到 $100,000 不等。
2. 权限滥用风险 :扩展的declarativeNetRequest
和全域名权限(`*://*/*`)可被新所有者用于流量劫持(如重定向至恶意网站)或数据收集。
3. Google 审核机制的漏洞 :
- 所有权转移仅需开发者邮件确认,用户无感知;
- 更新代码时,仅新增权限会触发用户通知,已有权限的功能修改可绕过审查。
作者通过 真实案例 (如高价扩展 "Adblock for YouTube" 易主后收集用户点击流数据)进一步佐证风险。最后提出 应对建议 :
- 使用工具监控扩展所有权变更(如 Under New Management 扩展);
- 定期审查企业内扩展清单,避免使用被售卖的扩展;
- 借助 Secure Annex 等平台进行代码分析和主动警报。
author John Tuckner
via Frontend Focus 684
#优质博文 #前端 #css
Decorating lines of text with box-decoration-break
via Preethi
Decorating lines of text with box-decoration-break
AI 摘要:文章介绍了如何利用 box-decoration-break 属性改善多行内联文本的装饰,使边界和背景效果保持连续统一。
本文详细讲解了 CSS 的 box-decoration-break 属性如何使得内联对象在分行时能够复制其边框、背景、阴影及内边距等装饰效果,从而消除默认状态下碎片化边缘的断裂感。作者首先展示了在没有该属性时,多行文本装饰出现断裂的不美观现象,再通过添加 box-decoration-break: clone 演示如何复制未断行部分的样式,使每一行呈现一致的装饰。文章通过多个示例代码,包括使用背景渐变加上 background-clip、边框图片、动画效果以及 clip-path 裁剪等技术,说明该属性不但可以作用于基本边框,还能完美处理阴影和形状装饰。同时,还介绍了各主流浏览器对该属性的支持情况,提醒开发者在使用时需考虑兼容性问题,提供了 Edge 浏览器支持投票的链接。整体来看,文中展示了如何通过 box-decoration-break 来美化网站首页或关于页面中简短段落的视觉效果。
via Preethi