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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #css
Anchor Positioning Just Don't Care About Source Order | CSS-Tricks

AI 摘要:本文介绍了如何使用 CSS 的锚点定位(anchor positioning)技术来摆脱 HTML 源代码顺序的限制,使得元素的定位更加灵活和简便。通过实例展示了如何将一个 div 覆盖在另一个 div 上,并详细解释了锚点定位的实现方法和优点。

• 简介
• 文章以十个 div 进入酒吧的比喻开始,解释了当空间不足时,如何让一个 div 坐在另一个 div 的“腿上”。
• 强调了 HTML 源代码顺序的重要性,因为在传统的 CSS 定位中,元素的顺序会影响定位效果。

• 传统的定位方法
• 展示了如何通过调整 HTML 源代码顺序来实现一个 div 覆盖另一个 div 的效果。
• 介绍了使用父子关系(parent-child)来定位 div 的方法。
• 详细解释了如何使用 CSS 的 position: relative 和 position: absolute 属性来实现定位,并通过 inset-block-start 和 inset-inline-start 属性将子元素固定在父元素的左上角。
• 通过设置子元素的宽度为父元素的 100%,实现完全覆盖父元素的效果。

• 锚点定位的优势
• 介绍了锚点定位技术如何简化定位过程,不再受限于 HTML 源代码顺序。
• 说明了锚点定位在最新版本的 Chrome 浏览器中默认支持。
• 展示了如何使用 anchor-name 属性定义锚点元素,并通过 position-anchor 属性将子元素与锚点元素连接。
• 解释了如何使用 position-area 属性来居中定位子元素,并通过 anchor-size() 函数设置子元素的大小以完全覆盖锚点元素。

• 结论
• 强调锚点定位技术的优点,即它不依赖于 HTML 源代码顺序,体现了 CSS 在内容和表现分离方面的优势。


author Geoff Graham Anchor Positioning Just Don't Care About Source Order | CSS-Tricks
#优质博文 #前端 #工程化 #pnpm
感觉这样挺好的欸。vscode 扩展:antfu.pnpm-catalog-lens

Categorize Your Dependencies

AI 摘要:本文探讨了在项目开发中如何更好地管理和分类依赖包,提出了使用 pnpm catalogs 进行依赖分类和版本管理的方法,并介绍了相关的工具支持和未来可能的应用场景。

详细内容要点:

1. 引言
• 介绍了在项目开发中使用 npm 安装第三方包的情况。
• 解释了依赖包的两种主要类型:dependencies(生产依赖)和 devDependencies(开发依赖)。
• 展示了 package.json 文件中依赖包的示例配置。

2. 依赖包的基本概念
• 详细解释了 dependencies 和 devDependencies 的区别。
• 说明了这些概念最初是为 Node.js 库开发而引入的。
• 讨论了 npm 在安装包时如何处理依赖和开发依赖。

3. 项目类型分类
• 将项目分为三类:Apps(应用程序)、Libraries(库)和 Internal(内部包)。
• 指出依赖和开发依赖的区分主要适用于发布到 npm 的库。

4. 依赖包的多重用途
• 讨论了工具如何扩展依赖和开发依赖的含义以适应不同场景。
• 举例说明 Vite 和其他构建工具如何处理依赖包。

5. 依赖包分类的必要性
• 指出仅使用 dependencies 和 devDependencies 无法充分描述包的用途。
• 提出了一些可能的依赖分类方法,如 test、lint、build 等。

6. PNPM Catalogs 介绍
• 介绍了 pnpm catalogs 功能,允许在 monorepo 中共享依赖版本。
• 展示了如何在 pnpm-workspace.yaml 和 package.json 中配置 catalogs。
• 说明了 catalogs 如何简化版本管理和依赖分类。

7. 工具支持
• 讨论了使用 catalogs 后需要的工具支持。
• 介绍了作者开发的 VS Code 扩展 PNPM Catalog Lens,用于显示依赖版本。
• 列举了已适配 catalogs 的工具,如 taze、eslint-plugin-pnpm 等。

8. 未来展望
• 讨论了依赖分类在未来可能的应用场景,如在 Vite 和 unbuild 中更精细地控制依赖优化和外部化。
• 提出使用 catalogs 可以增强安全性报告和防止错误的打包操作。
• 作者表示已开始在项目中使用 catalogs,并鼓励读者尝试这种方法。
author Anthony Fu
#碎碎念 #猫
坏可乐乱拉屎,干掉了我们一个晚上的时间收拾!还是绝育了吧公猫不绝育的话乱拉乱尿还是太难顶了,腊八当时就不这样,唉,还是小母猫好,我爱腊八 :-(
📖 AI 正在让人变得前所未有地自以为是 #article

备注:诚然 AI 降低了很多知识获取与学习的门槛,但我依然不敢信任它在我未曾涉猎的领域中给出的似乎条分缕析的回答或是长篇大论的 Research,如果有一天我对 AI 生成的东西感到陌生或是完全无法判断真伪,可能会更担心是不是自己已经丧失思考能力了吧。

程序员算是 AI 浪潮的比较直接的受益者,LLMs 很大程度改变了我的工作模式和行为习惯,我也偶尔会偷懒让 AI 帮我总结或是用沉浸式翻译读英文资料,但我依然不会也难以想象用 AI 帮我写周报/博文,或许它终有一天能做得不错,却少了灵魂和一些微妙的“人”感。

https://www.geedea.pro/posts/ai-%E6%AD%A3%E5%9C%A8%E8%AE%A9%E4%BA%BA%E5%8F%98%E5%BE%97%E5%89%8D%E6%89%80%E6%9C%AA%E6%9C%89%E5%9C%B0%E8%87%AA%E4%BB%A5%E4%B8%BA%E6%98%AF/
#AI #开源 #markdown
太贵了,正好拿 grok 150刀免费额度烧
NoteGen
NoteGen 是一款跨平台的 Markdown 笔记应用,支持 Windows、Mac、Linux。它最大的特点,是把“记录”和“写作”这两步分开,并通过 AI 助手帮你把零散的内容自动整理成结构化的笔记,比如周报。但还有一个特点,就是比较消耗 AI 的 API Token,每一个记录都会询问 AI。

from 小众软件 NoteGen - 轻巧的开源、跨平台笔记应用,就是有太点费 AI:将碎片信息自动整理为笔记 - 小众软件
#tools #开源 #在线网站 #图片处理
之前都是 Imagine,试试这个(
Caesium - 开源,批量图片压缩工具[Win/macOS/Linux/网页版]

Caesium 是一款跨平台开源图片压缩工具,支持批量处理 JPG、PNG、WebP 和 TIFF 格式,可在保持画质的同时显著减小文件体积,支持 Windows、macOS、Linux,并提供网页版便捷使用。 网页版限制:单次最多 10 个文件,单个文件不超过 20MB。


GitHub

from 小众软件 Caesium - 开源,批量图片压缩工具[Win/macOS/Linux/网页版] - 小众软件
cosine - 前端人の日常频道
Photo
#碎碎念 感觉杂鱼模式最离谱最有攻击性,有股味上来了。虽然但是我床上真有等身抱枕,拳头硬了!
“轮子库存开五金店” 😡
“console.log 改成 console.moe😡😡

然后群友去注册了 console.moe 域名(啊?居然之前没人要?)
#碎碎念 #音乐
过年了过年了,ilem 发新歌了呜呜呜
【洛天依】气球
@林震Linz:
VOCALOID·UTAU - 气球【我希望的是可以带上耳机听,编曲做了挺多心思的】
作曲·作词·编曲:林震Linz
演唱 :V家 洛天依 /人本 林震Linz
调教 :ilem
动画:碌匆

收录于【床边哲学我】专辑。
这首是和ilem合作的曲目之二,第一首是去年的床边哲学我,这次气球这首歌词两年前写出来的时候还没什么自信,ilem,给了一些意见,最后完善出来。早期自己也用了洛天依去唱,不过思来想去还是觉得白鸟过河滩的感觉会更适合这首歌。所以又拉上ilem出来搞了这首歌。
最后祝大家五一假期玩得开心,多放松放松。
#优质博文 #前端 #javascript #新动态
我们真用 p5(
JavaScript Weekly #733

AI 摘要:本期 JavaScript Weekly 聚焦 p5.js 2.0 发布、React 新特性、Node.js 安全事件等热点,涵盖工具更新、技术文章与行业动态。核心内容包括创意编码库升级、React 实验性功能、Deno/Node 生态进展,以及 DuckDB-WASM 的趣味实验等。

1. 行业动态与更新
• Jet Propulsion Laboratory 团队远程修复 150 亿英里外的 Voyager 1 探测器故障
• p5.js 2.0 发布
• 新增字体支持、文本操作增强、JavaScript 着色器编写功能。
• 提供在线编辑器,适合快速创建交互式视觉项目(如 AI 生成的 JS Logo 故障艺术)。
• 团队展望未来发展方向。
• React 重大更新
• React Compiler 进入 RC 阶段。
• 实验性功能:View Transitions(视图过渡)和 <Activity> 组件。 #react
• 生态动态
• SolidJS:创始人回顾项目十年历程
• Node.js:披露 CI 安全事件细节
• Deno 2.3:即将发布,近期优化详情

2. 工具与版本发布
• 包管理:pnpm 10.9 支持 JSR 包安装。
• 引擎工具:jsvu 3.0 支持多版本 JavaScript 引擎管理。
• Bun v1.2.10、Node.js v22.15.0 (LTS)、Next.js 15.4 Canary、ESLint v9.25.1......

3. 技术文章
• 创意开发:Jhey Tompkins 实现 3D 翻牌显示器效果 #demo
• 趣味实验:Patrick Trainer 用 DuckDB-WASM 通过 SQL 生成 3D 图形

4. 工具与库推荐
JavaScript Font Picker:支持系统字体与 Google Fonts 的字体选择器
Scala.js 1.19.0:Scala 转 JavaScript 编译器
刚才手机打字没说太多,现在补上
其实冰箱这种典型白色家电小米进场之后大杀特杀,更印证了行业事实上没有任何壁垒的观点。这种奢饰品品牌做的冰箱,与最便宜的1300的双开门使用上没有任何区别,只是多了两个溢价的点,制冰机和活动的门。

冰箱这个品类本身还有它的特性:所有冰箱的结构都完全一致。现在的冰箱都是风冷,压缩机、换热、塑料/泡沫门和板隔热,加上一个外壳。简单到随便一个小厂都能做,只是品控会有差异。而小厂只要良心一些,上个好的压缩机,使用起来也不会有区别。150L的小冰箱,和600L的大冰箱,功耗上也不会有区别,因为压缩机功率都是50W-100W区间,对压缩机功率的需求并不会随着体积线性增长(实际上是随着表面积近似线性增长。但由于隔热层本身占空间,所以600L冰箱表面积可能只比200L冰箱高50%)。甚至一个50L的半导体冰箱,耗电量比600L对开门还高。

所以推荐各位选购冰箱的时候,直接选购风冷的,越大越好,只要放得下。租房搬家就另外说,我觉得为了更好的生活体验还是划得来的。
我们这个冰箱进门就很极限,我把房门拆了才拿的进来,一般人还真不好搞定。这个冰箱设计也不是做嵌入式的,现在嵌入式冰箱开门需要的空间会比这款小很多(门打开的行程不需要左右两侧额外空间),而且厚度也会薄很多,还便宜。
然后卖家他们自己新房子换冰箱就买了小米超薄嵌入款(
#碎碎念 #趣站
https://gitbox.hust.online
不活了,太锐了这锐评。
“把 UI 外包给了 Hello Kitty”
“我也不知道改了啥但肯定更好了”
#碎碎念 #美食 前些天去吃的友会日式猪排是真的不错,下雨人不多,猪排是真的很脆,于是今天又出去觅食了
Back to Top