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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
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

我真的很想知道答案,急,在线等,跟妲喵进行了激烈的讨论(豆争
#碎碎念 #租房 #杂谈
某妲喵找到工作了,于是我们又考虑租房出去玩儿!(一方面是通勤,一方面虽然我远程办公了但是一直在自己家里待着有点腻,再一方面是我们都觉得现在买房很亏以后买不买房再说了)

找了一堆房之后选了一个民水民电的城中村 loft,各方面都挺满意的,总结一点经验,再次强力安利 豆友租房 的 租房避坑指南,有租房需求的可以看看?
后续应该会整理整理总结一篇租房指南(虽然我自己也就租过几次)

不得不说感觉租的房都比家里老破热水器好,顶层复式热水器真遭不住,一个人洗完就没水,而且夏天顶层巨热🌚而且待在家里活动范围永远是一个小单间感觉好像还不如租个大点的 loft 哈哈哈哈。
开心!其实写了还有好多东西,等总结一下吧(挖坑+1)

- 检查房型:小区房/城中村/公寓
- 水电费管理费和物业费等额外费用 check
- 消防通道是否通畅
- 电梯房/步梯,电梯是否老化
- 卫生间:淋浴喷头水压、热水器
- 采光、周围噪音(有条件的话白天看一次晚上看一次)
- 千万不要急着交押金,一定要先问清楚退房时有什么要求,都谈好了再交。
- 仔细检查洗衣机热水器空调有没有问题,几级能效,民水民电还是商水商电
- 家电一定要齐全,并且现代一些,售后管家要负责。
ps:售后管家要负责指的是,万一有家电出问题能及时修好,不会拖很久。
- 友情提示,如果一楼是饭店超市之类的最好别租二楼,不然蟑螂蚂蚁等虫类会随时刷新在你家。
- 选楼层尽量不选顶层,冬冷夏热,可能还会漏雨。也不要选一层,吵闹不安全。但这两层的租金也相对便宜些。
- 如果是公寓的小复式,一定要仔细检查床的稳定性以及地面稳定性
- 有的房子水龙头只能提供冷水,如果不想冬天洗个脸都疼的小伙伴需要好好考虑一下。
- 问清水电、燃气费、暖气等缴纳方式,还有是否可以中途转租。
- 确定电器是否正常使用,可以考虑拍照留底,如果有损坏最好在合同写明或是修好再搬进去。
- 租房前要检查地面排水,门锁的安全性。楼层高的要注意水压,万一洗澡水是“细水长流”,冬天就……(水压很重要)
- 短租一定要选网络信号好的地方,不然买宽带很亏,不买又像进了山区一样。(或者直接换千兆宽带的话,问问运营商这个小区接不接)
- 家具墙纸等是否有破损收费等
- 楼下是否有电动车充电位等,便利店等周边设施检查
- 通勤最好近得很,步行30min以内或电车骑行20min以内
- 考虑性价比的话以上都可以看情况妥协23333
#优质博文 #前端 #design #color #oklch #色彩空间
蛮有意思,在文章的网页里我 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

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
#碎碎念 #视频更新 #无限暖暖
萌死我了~
无限暖暖传说季非常之绝美八音盒套
@余弦Cocos:
GMV - 看完新阁预告终于没忍住把八音盒套抽了,这也太可爱了呜呜呜呜,新阁也很好看但是感觉还是水晶球摆件戳我
#优质博文 #浏览器插件 #插件
推荐了 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 Buying browser extensions for fun and profit
#优质博文 #前端 #css
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 Decorating lines of text with box-decoration-break | CSS-Tricks
#优质博文 #前端 #css #svg
这篇写得太好了!超级长。

A Deep Dive into the Inline Background Overlap Problem

AI 摘要:探讨内联文本背景重叠导致透明度异常的问题,并提供基于 SVG 滤镜的跨浏览器解决方案。

本文详细解析了内联元素上半透明背景重叠时透明度叠加变深的问题。文章首先介绍使用 CSS 属性如 box-decoration-break: clone 实现每行独立的包裹效果,但因内边距重叠造成重叠处透明度提升,进而引发背景变深的问题。作者分享了基于 SVG 滤镜的解决方案,通过使用诸如 <feComponentTransfer><feColorMatrix><feBlend> 等滤镜原语,逐步提取背景区域和文本形状,再解决复杂场景下(如大内边距、文字与背景颜色非纯黑/白情况)的混色问题。此外,还讨论了利用 CSS 变量设置 RGBA 值、处理抗锯齿问题,以及不同浏览器(Chrome 与 Firefox)下的兼容性差异。最终作者展示了一套可控且跨浏览器工作的方案,并提供了实验演示以供参考。

author Ana Tudor
via Frontend Focus ​684 A Deep Dive into the Inline Background Overlap Problem
#碎碎念
下周要第一次面试了好紧张好紧张啊有没有给面试官看的面试指南(陷入沉思
这下真面试官比面试的紧张了
#优质博文 #前端
How to easily convert HTML to image in NodeJS or in the browser

推荐的是 html2canvas 库,但是之前做过类似的需求的时候我记得svg字体踩过坑,后来用过 html-to-image 挺好的,适合那种生成海报的场景。

AI 摘要:介绍在 NodeJS 中使用 Puppeteer 和在浏览器中使用 html2canvas 将 HTML 转换为图像的方法。

本文详细讲解了两种将 HTML 转换为图像的技术方案:
1. 服务器端方案(NodeJS):通过 Puppeteer 库控制无头 Chrome/Chromium 浏览器,实现 HTML 渲染与截图。作者逐步演示了安装、启动浏览器实例、设置 HTML 内容、生成截图(支持 PNG/JPEG/WebP 格式)和关闭浏览器的完整流程,并列举了 page.screenshot() 方法的参数配置(如区域裁剪、背景透明、图像质量等)。
2. 浏览器端方案:使用 html2canvas 库将指定 HTML 元素异步转换为 Canvas 画布,再通过 toDataURL 生成图像数据并触发下载。文中提供了 CDN 加载方式和核心代码示例。


#node #puppeteer #html
#优质博文 #ppt #markdown
让我们专注于内容:Markdown 制作幻灯片的三种方案对比
https://sspai.com/post/97131

AI 摘要:作者基于频繁制作 PPT 的需求,对比了三种基于 Markdown 的幻灯片制作方案(Obsidian 原生插件、Marp、Slidev),分析其优缺点并提出适用场景。

文章从作者因频繁制作 PPT 的痛点出发,指出传统工具(如 PowerPoint)在排版灵活性和公式编辑上的不足,以及 AI 生成工具的局限性。由此提出用 Markdown 制作幻灯片的思路,并通过实践对比了三种工具:
Obsidian 原生插件:操作简单但排版效果差,缺乏自定义和导出功能,仅适合概念验证。
Marp:支持实时预览、主题定制和导出多格式,但高级排版需学习 CSS 语法,适合轻量需求。
Slidev:功能强大,支持深度定制(布局、动画、代码高亮等),但需前端知识,适合技术型用户。
最终,作者建议根据需求选择工具,并推荐 Slidev 作为长期方案。


via 少数派 西郊次生林
#碎碎念 看之前的代码:这么脑残的代码真是我写的?一定是来月经的时候写的不清醒了😨切割!
📖 AI Blindspots #article

备注:AI coding 的一些推荐实践

https://ezyang.github.io/ai-blindspots/
Back to Top