呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #开源 #前端
开源项目的「死与新生」
author 云游君(YunYouJun)
开源项目的「死与新生」
AI 摘要:作者以 Element UI → Element Plus 的亲历为主线,讨论开源项目从诞生、演化到走向结束与再生的路径,强调“为自己所需而作”的初心、拥抱社区标准与透明治理,借助 RFC(Request for Comments)、BDFL(Benevolent Dictator For Life)式决策、语义化版本(Semantic Versioning, SemVer)与渐进式迁移(Progressive Migration)等方法,在 Trade-Off(权衡)中小步快跑、稳步迭代;同时用产品化思维和良好社区运营,尽可能延长项目生命周期,并在必要时坦然宣布进入 maintenance mode,给出替代与迁移方案,促成“死与新生”的良性循环。
author 云游君(YunYouJun)
#前端 #CSS #新特性
CSS Stretch
https://developer.mozilla.org/en-US/docs/Web/CSS/height#stretch
CSS Stretch
你知道你现在可以在 CSS 使用 height: stretch 吗?也适用于 width。
https://developer.mozilla.org/en-US/docs/Web/CSS/height#stretch
#优质博文 #CSS #前端 #开源
What we learned from creating PostCSS—Martian Chronicles, Evil Martians’ team blog
author Andrey Sitnik(PostCSS 与 Autoprefixer 作者),编辑 Travis Turner
What we learned from creating PostCSS—Martian Chronicles, Evil Martians’ team blog
AI 摘要:这是一篇 PostCSS 12 年演进的复盘:从 Autoprefixer 的诞生到 PostCSS 成为被 Google、Wikipedia、Tailwind 等采用、月下载量 4 亿的开源基础设施。作者围绕产品定位、插件策略、性能架构、版本演进、社区与生态、与竞品相处以及维护者防止倦怠的实践,给出一套贯穿前端工具链建设与开源运营的可复用方法论:以用户可用为先、以架构赢性能、以默认值减少配置、以人情味促协作、以渐进式变更稳生态。
1. 历史与定位:从 Autoprefixer 到 PostCSS
• 痛点出发:不想手写厂商前缀,于是做了 Autoprefixer,并需要一个更强的 CSS 解析器与 API(应用程序接口)。
• 启发与决策:Rework 无法满足“保留原始空白”等需求,遂自研 PostCSS;教训“−1”:对大用户更合作,给原项目提交原型的机会。
• 推广与文档同等重要:投入与写代码相当的时间做 README 与对外沟通,主动向 Webpack 推荐用 PostCSS 做解析器,带来关键增长。
• 定位转变:原打算做“幕后”框架,但终端用户对新工具敏感、对插件友好,因此把 PostCSS 做成对用户可见的“插件平台”,帮助新 CSS 工具降低接入阻力。
2. 产品形态与插件策略(Lesson 1)
• 默认可用优于“纯插件”:PostCSS 默认“无作为”导致用户被插件选择淹没;对比 Lightning CSS 内置常用能力与 Vite 的“开箱即用”,体现“约定优于配置”。
• 插件架构的收益:小内核易维护;拆分团队各司其职;利于做 CSS 工具实验(如 easing 渐变转为 CSSWG 草案);满足项目定制;开发工具需要灵活性。
3. 时机与竞争:不怕“来得晚”,要快验真(Lesson 2、Lesson 7)
• “太晚”的误判:Chrome 停增前缀与 CSS Houdini 的宣布,都未让 Autoprefixer 与 PostCSS 失去价值;实际落地速度与有效性才是市场检验。
• 行动原则:尽快做原型、看真实结果,不被“新技术将取代一切”的叙事带偏。
• 与“竞品”为友:与 Sass 协作、统一术语与基准;公开推荐 CSSTree、Lightning CSS 等新工具;在开源中,“竞争者”可以分担你的免费支持压力。
4. 性能与架构:架构比语言更重要(Lesson 3)
• 关键洞见:PostCSS 用 JS(JavaScript)比 C++ 的 Sass 快 4 倍,原因在于架构与内存管理,而非语言本身。
• 架构实践:采用令牌化-解析器(tokenizer-parser)拆分,80% 解析时间在令牌化,便于聚焦优化;用正则快速跳转定位结束符等微优化。
• 内存优化:CSSTree 通过对象复用减少垃圾回收(GC)次数,曾快于 PostCSS ≈1.5 倍;避免“Rust/C++ 一定更快”的二元迷思。
5. 维护者健康:防止问题复发,避免倦怠(Lesson 4)
• 问题“闭环”:用户误用导致的 issue,要加类型与运行时校验、警告与文档澄清,防止重复踩坑;文档常是最后手段,但 FAQ 有效减压。
• 实例:用户把 parser 当插件使用,直接在代码里给出警告信息,显著降低重复问题。
• 反内耗机制:尽快响应、邀请提问者补文档或提修复 PR;开源是协作,不是单向免费支持。被忽视的感觉才是用户最大挫败。
6. 版本演进与迁移策略(Lesson 5)
• “跳-合”节奏:首个大版本标记废弃,下一个大版本再移除;尽量提供迁移指南(如 PostCSS 8),并维护生态迁移进度 Wiki。
• 重大变更前置沟通:提前发布变更提案、开反馈通道,协调 Webpack、Vite 等生态构件的配合升级。
7. 塑形生态:用最佳实践驱动一致性(Lesson 6)
• 统一模板与规范:插件脚手架强制“输入/输出”示例,制定插件与运行器指南;文档示例会塑造社区习惯。
• 学习路径清晰化:提供从零到一的分步指南,甚至涵盖“如何对抗开发挫败”的内容。
8. 社区运营与人情味(Lesson 8)
• 人的纽带:给插件作者寄明信片/贴纸、出差拜访活跃贡献者,建立真实连接。
• 品牌风格:Autoprefixer 的“骑士”与 PostCSS 的“炼金术”主题,让项目更有趣、更易形成文化认同。
9. 开源维护小贴士
• 尽量无构建:库用原生 JS 源码配合手写 .d.ts 或 TypeDoc,方便直接安装分支测试与 node_modules 内即时调试复制。
• 静态站点别用 React:项目文档与官网用 Astro 或纯静态 HTML,维护成本更低、更稳。
author Andrey Sitnik(PostCSS 与 Autoprefixer 作者),编辑 Travis Turner
#优质博文 #前端 #CSS #新特性
A gentle introduction to anchor positioning
author Saron Yitbarek
A gentle introduction to anchor positioning
AI 摘要:本文以头像菜单为例,系统介绍了锚点定位(Anchor Positioning)如何让元素基于另一元素进行纯 CSS 定位,涵盖锚点与目标的关联(anchor-name、position-anchor、position),两种定位思维模型:基于九宫格的 position-area 与基于边缘的 anchor()(仅用于 inset 系列),并演示了使用逻辑方向、溢出切换(position-try)与 calc() 的实战技巧,帮助开发者在无需 JavaScript 的情况下实现响应式菜单、气泡与工具提示。
1. 基本概念与关联关系
• 角色定义:被依附的元素为锚点(anchor),需要定位的元素为目标(target)。
• 建立关联:在锚点上声明 anchor-name(如 --profile-button),在目标上使用 position-anchor 指向该锚点名。
• 定位前置:目标需设置 position: absolute 或 fixed 才能启用锚点定位。
2. position-area:基于九宫格的定位模型
• 九宫格心智模型:以锚点为中心,在其包含块(containing block)上选定九宫格中的区域放置目标。
• 优先使用逻辑方向:以 block-start/block-end、inline-start/inline-end 与 center 取代物理方向(top/right/bottom/left),以适配不同书写模式与语言。
• 对齐与溢出:当目标比锚点宽时,使用 block-end span-inline-end 可实现“下方左对齐且向行尾延展”;类似地,可用 block-end center、block-start inline-end 等组合控制位置。
• 响应式回退:通过 position-try 指定备选位置,当首选位置空间不足时自动切换(如窄屏从向右溢出改为向左溢出)。
3. anchor():基于边缘的精确定位
• 使用范围:仅可用于 inset 系列属性(物理:top/right/bottom/left;逻辑:inset-block-start/end、inset-inline-start/end;以及 inset-block、inset-inline 简写)。
• 边缘对齐:例如让菜单左边与头像左边对齐、菜单顶与头像底对齐,可写为 left: anchor(left), top: anchor(bottom);逻辑等价为 inset-inline-start: anchor(start), inset-block-start: anchor(end)。
• 指定锚点:anchor() 可接收可选的锚点名(如 anchor(--profile-button left)),默认使用 position-anchor 指定的锚点。
• 配合 calc():可将 anchor() 与 calc() 组合做细粒度偏移(如对齐去除内边距影响:inset-inline-start: calc(anchor(start) + 1.25em))。
4. 实战场景与模式选择
• 导航头像菜单:点击头像(可结合 Popover API)后,菜单基于头像精准定位且纯 CSS 控制。
• 桌面与移动自适应:桌面可向 inline-end 溢出,移动端通过 position-try 切换为 inline-start 溢出,减少遮挡与视口溢出。
• 心智模型选型:喜欢“区域网格”可用 position-area;偏好“边缘数值”可用 anchor()。两者都能完成相同目标。
5. 规范与资源指引
• 推荐实践:优先使用逻辑属性与方向,增强无障碍与国际化适配;目标元素需 absolute/fixed 定位。
• 学习与实验:文中提供了 CodePen 示例用于自由尝试;更多详细属性与值可参阅 MDN 文档;还有教学游戏 Anchoreum。
• 反馈与社区:作者与 WebKit 福音师在 BlueSky/Mastodon 等渠道互动;遇到问题可提交 WebKit Bug 报告。
author Saron Yitbarek
#趣站 #前端 #CSS
CSS-Questions
Sunkanmi Fafowora 推出 CSS-Questions 网站,提供 100 多道题与综合或 20 题速测,帮助你检验 CSS 知识,从基本选择器到伪类、级联层和容器查询等高级主题。
CSS-Questions
Sunkanmi Fafowora 推出 CSS-Questions 网站,提供 100 多道题与综合或 20 题速测,帮助你检验 CSS 知识,从基本选择器到伪类、级联层和容器查询等高级主题。
#碎碎念 #优质视频
真好啊,真好。
在北极的极昼,我找到了永不落下的太阳!links
@Linksphotograph:
真好啊,真好。
在北极的极昼,我找到了永不落下的太阳!links
时隔三个月,我们又回到了格陵兰岛。和凛冽的寒冬不同,夏天的格陵兰有着永不落下的太阳,无论什么时候抬头看,太阳都高高的挂在那里。就好像小时候幻想的那样,只要我不睡着,这一天就永远不会结束...
而这一次我们居然还走进了因纽特人的家里,吃到了鲸鱼肉....
@Linksphotograph:
发布视频-出行-户外探险
播放量:5.07万 弹幕:1109 评论:735
点赞:8499 投币:5742 收藏:3054
发布日期:2025-08-14 04:00:00
上传日期:2025-08-13 13:09:18
时长:0:42:19
🔝> @Linksphotograph:
各位可以在评论区发布自家的可爱小猫,我们会选10位送出汤圆同款渴望环野甜虾冻干双拼粮,一起尝尝「极地鲜」!
#碎碎念 #开源 #tools #AI
我记得之前好像有群友有类似需求(?
https://fixupx.com/GitHub_Daily/status/1955570022807441512
我记得之前好像有群友有类似需求(?
https://fixupx.com/GitHub_Daily/status/1955570022807441512
http://github.com/omnara-ai/omnara
GitHubDaily(@GitHub_Daily): 在 Claude Code、Cursor 上执行长时间开发任务,然后转头去干别的事情,几个小时后,却发现卡在某个报错上,非常浪费时间。
面对这个痛点,Omnara 开源项目巧妙地监控它们执行的每一个步骤,然后推送给我们查看实时观察。
并可在手机上接收推送通知,关键的任务节点进展随时查看,当它们需要指导时,还能直接从手机回应。
GitHub:http://github.com/omnara-ai/omnara
主要功能:
- 实时监控所有 AI Agent 的工作进展和操作步骤
- 移动端推送通知,AI 需要帮助时立即提醒
- 支持从手机远程启动和控制 AI Agent 任务
- 统一管理界面,集中查看多个 AI Agent 状态
- 双向交互问答,随时为 AI 提供指导和反馈
- 与 MCP 协议兼容,支持自定义扩展
目前已支持 Claude Code、Cursor、GitHub Copilot 等主流编程工具,并提供了 iOS 手机客户端。
Thomas Dohmke 宣布辞职创业,GitHub 并入微软不再独立运营
https://www.landiannews.com/archives/110157.html
https://www.landiannews.com/archives/110157.html
#优质博文 #CSS #前端 #面试
原来歪果仁面试也考经典圣杯布局啊
How to Prepare for CSS-Specific Interview Questions
author Shivam Bhalla
How to Prepare for CSS-Specific Interview Questions
AI 摘要:本文为前端开发者提供了一份全面的 CSS 面试准备指南,精选了 10 个从易到难的典型面试题。文章不仅给出了每个问题的建议回答方向和代码示例,还深入探讨了其背后的核心概念,内容涵盖响应式设计、CSS 预处理器、性能优化、现代布局技术以及 CSS-in-JS 等关键知识点,旨在帮助求职者系统性地巩固 CSS 技能,并自信地应对技术面试。
author Shivam Bhalla
#优质博文 #Chrome #前端 #CSS #新动态
Chrome 140 Beta 版
author Rachel Andrew
Chrome 140 Beta 版
AI 摘要:Chrome 140 Beta 版为 Web 开发者带来了一系列重要更新。在 CSS 与界面方面,新增了类型化算术 (Typed Arithmetic) 以增强 calc() 的能力,引入了 scroll-target-group 属性改进滚动导航,并对视图过渡 (View Transition) 进行了多项功能增强。Web API 方面,提供了 Uint8Array 与 Base64/十六进制的内建转换方法,并通过权限提示限制本地网络访问以提升安全性。此外,还为独立式 Web 应用 (IWA) 引入了 Controlled Frame API,并开启了 clipboardchange 事件、来电通知等新的源试验 (Origin Trial)。此版本也为提升无障碍性而弃用了一些历史性的 <h1> 字号规则。
1. CSS 类型化算术 (Typed Arithmetic):允许在 calc() 函数中进行带单位的数学运算,如 calc(10em / 1px),方便排版和单位转换。
2. 滚动与视图增强:scroll-target-group 属性:用于定义滚动标记组容器,配合 :target-current 伪类可高亮当前视图内的目标锚点。
3. ScrollIntoView 容器选项:新增 container: 'nearest' 选项,可仅滚动最近的祖先滚动容器。
4. 视图过渡 (View Transition) 增强:伪类可继承更多动画属性,并支持嵌套视图过渡,以实现更复杂的过渡效果。
5. overscroll-behavior 传播修复:该属性现在从根元素 (<html>) 而非 <body> 传播,与其他浏览器行为保持一致。
6. 排版与无障碍性:在 content 属性的替代文本中支持 counter() 和 counters() ;支持在 @font-face 规则中使用 font-variation-settings 描述符。弃用 <h1> 元素在特定容器内的特殊字号规则
7. API 与交互改进:caret-animation 属性允许开发者手动控制光标动画,避免与默认闪烁行为冲突;highlightsFromPoint API 允许通过坐标点检测自定义高亮区域;ToggleEvent 新增 source 属性,可获取触发该事件的源元素;修复 SVG foreignObject 污染画布 (Canvas) 的问题,使其在使用 blob 网址时行为与其他浏览器一致。
author Rachel Andrew
#碎碎念
有时候工作代码写到一个地方,觉得 “啊,这个地方最好还是重构一下比较好吧” 的时候,想到产品好像在之前说过这个地方以后会改版,原来的这整个东西就都会没掉了,就先不动了,动了后面还得再改回来,改版的时候再说。
感觉是不是全天下的工作都有这种很无奈的时候的 23333
有时候工作代码写到一个地方,觉得 “啊,这个地方最好还是重构一下比较好吧” 的时候,想到产品好像在之前说过这个地方以后会改版,原来的这整个东西就都会没掉了,就先不动了,动了后面还得再改回来,改版的时候再说。
感觉是不是全天下的工作都有这种很无奈的时候的 23333
陈皓在 2017 年说:
2025 · Rainman 信息链
1. 源头层
某个领域的第一手信息,往往在核心成员之间口口相传:线下聚会、邮件组、私密频道。等它写成论文、登上媒体时,已经晚了半拍。
2. 早期公开层
国外机构、组织、专业社区(Reddit、X、Hacker News、GitHub)开始扩散,圈外人依然不多。
3. 二次消化层
内容被二次解读、翻译、整理,准备向国内输入。
4. 大众入口层
朋友圈、小红书、微博、百度等成了落地口,但此时信息已是第三手、第四手——热闹有余,时效与精度打了折扣。
结论:
想走在前面,就别等到信息漂到最后一层才去捞。
如果你的信息来自朋友圈、微博、知乎、百度或是今日头条,那么我觉得你完蛋了。因为这些渠道有价值的信息不多,有营养的可能只有 1%,而为了这 1%,你需要读完 99% 的信息,太不划算了。
2025 · Rainman 信息链
1. 源头层
某个领域的第一手信息,往往在核心成员之间口口相传:线下聚会、邮件组、私密频道。等它写成论文、登上媒体时,已经晚了半拍。
2. 早期公开层
国外机构、组织、专业社区(Reddit、X、Hacker News、GitHub)开始扩散,圈外人依然不多。
3. 二次消化层
内容被二次解读、翻译、整理,准备向国内输入。
4. 大众入口层
朋友圈、小红书、微博、百度等成了落地口,但此时信息已是第三手、第四手——热闹有余,时效与精度打了折扣。
结论:
想走在前面,就别等到信息漂到最后一层才去捞。
#优质博文 #视频制作 #YouTube #内容创作 #工作流程 #course
少见的技术视频制作工作流的分享,mark。
How I record, edit and publish YouTube videos
author Stefan Judis
少见的技术视频制作工作流的分享,mark。
How I record, edit and publish YouTube videos
AI 摘要:Stefan Judis 详细分享了他制作、编辑和发布 YouTube 视频的完整工作流程,特别是针对技术内容的视频。他强调了周密的规划与准备的重要性,包括如何选择主题、组织代码并进行充分练习。文章深入介绍了其使用的软件工具链,如用于录制和初步编辑的 Screenflow、用于字幕生成和音频优化的 Descript,以及 Keynote 和 Jitter 等辅助动画工具。此外,作者还分享了为录制优化的 VS Code 配置和所用的硬件设备,并提供了一份实用的录制前后检查清单,旨在帮助内容创作者提升视频质量和效率。
1. 视频内容规划与准备
• 想法来源与主题选择: 视频创意源于用户常见问题、近期学习所得和新产品功能,确保持续有内容可产出。
• 代码准备与演示流程: 提前在 GitHub (代码托管平台) 准备演示代码,并将其整理至易于录制的状态;对于复杂代码,会在第二块屏幕上显示最终版本以便参考。
• 脚本策略与练习方法: 通常不写完整脚本,而是通过纸质笔记规划故事线和演示步骤;进行多次大声演练 (通常 5-10 次),优化表达流畅度,并通过修改措辞或创建 VS Code snippets (代码片段) 解决卡顿或输入困难。
• 直播编程注意事项: 强调充分准备是关键,需预设意外情况 (如网络中断) 的备用方案;如果自身操作失误,通常是准备不足,需有 Git checkpoints (代码检查点) 或笔记以便快速恢复。
2. 录制与编辑工具
• 核心录制与编辑软件: 使用 Screenflow 进行屏幕和摄像头录制及一体化编辑,支持边录边暂停调整的灵活工作流,但也提到软件更新频率较低的担忧。
• 动画与视觉辅助工具: 利用 Apple Keynote 制作幻灯片式动画内容;在需要透明视频片段 (如 fly-ins 飞入、modals 模态框) 时,偶尔使用 Jitter 进行制作。
• 后期处理与字幕生成: 将初步编辑好的视频导入 Descript,用于自动生成高质量字幕、应用“Studio Sound”滤镜进行音频优化,并可访问免版税音效库;Descript 也能辅助生成视频标题和描述作为灵感。
3. 技术设置与硬件配置
• 编码环境优化 (VS Code): 采用定制化的“Presentation” (演示) 主题配置,特点包括:匹配品牌色彩、增大字体、移除干扰元素 (如标签页、状态栏)、禁用 AI 功能和悬停提示,以确保屏幕内容清晰简洁;录制时使用全屏模式。
• 硬件设备概览: 使用 MacBook Pro (M3 处理器, 36GB RAM) 保证流畅运行;Sony ZV-1 Camera (摄像头) 作为网络摄像头替代品;两盏 Elgato key lights (补光灯) 提供照明;Shure MV-7 麦克风用于音频录制;使用站立式办公桌并站立录制以保持精力。
• 录制工作室环境: 展示了其新搭建的录制工作室,强调了环境对录制质量的重要性。
4. 录制流程检查清单
• 录制前准备: 检查房间灯光、关闭窗户、清理背景杂物;关闭 macOS (操作系统) 通知;切换 VS Code 到“Presentation”模式。
• 录制后处理: 在 Screenflow 中应用“compressor” (压缩器) 滤镜、调整鼠标光标;在 Descript 中应用“studio sound” (工作室音效) 滤镜。
author Stefan Judis
#优质博文 #CSS #前端 #动画 #视差滚动 #新特性
Bringing Back Parallax With Scroll-Driven CSS Animations
author Blake Lundquist
Bringing Back Parallax With Scroll-Driven CSS Animations
AI 摘要:本文详细介绍了如何利用新兴的 CSS 滚动驱动动画技术,以纯 CSS 的方式重新实现经典的视差滚动 (Parallax) 效果。与传统的 JavaScript 方案相比,这种新方法将动画移出主线程运行,从而显著提升了性能和流畅度。文章通过实例讲解了 animation-timeline 属性的两种核心时间轴函数 scroll() 和 view() 的使用场景与区别,并进一步介绍了如何使用 animation-range 属性精确控制动画的触发时机与范围,最后还探讨了针对运动敏感用户的无障碍设计和浏览器兼容性的回退方案。
author Blake Lundquist