呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #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
CSS-Tricks
How to Prepare for CSS-Specific Interview Questions | CSS-Tricks
Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.
#优质博文 #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
Chrome for Developers
Chrome 140 Beta 版 | Blog | Chrome for Developers
了解最新 Beta 版中即将推出的 Chrome 功能。
#碎碎念
有时候工作代码写到一个地方，觉得 “啊，这个地方最好还是重构一下比较好吧” 的时候，想到产品好像在之前说过这个地方以后会改版，原来的这整个东西就都会没掉了，就先不动了，动了后面还得再改回来，改版的时候再说。
感觉是不是全天下的工作都有这种很无奈的时候的 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
Stefanjudis
How I record, edit and publish YouTube videos
My video recording process and setup.
#优质博文 #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
CSS-Tricks
Bringing Back Parallax With Scroll-Driven CSS Animations | CSS-Tricks
Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main…
#优质博文 #前端 #React #course
React Query Selectors, Supercharged
author TkDodo
React Query Selectors, Supercharged
AI 摘要：本文深入探讨了 React Query 中 select 选项的高级用法，旨在实现极致的性能优化。文章从 select 的基本作用——创建精细化的数据订阅以避免不必要的组件重渲染——讲起，逐步深入到如何在 TypeScript 中为包含 select 的抽象进行类型定义。最后，文章聚焦于性能优化的核心，即“超级充电”，通过 React.useCallback 和外部 memoization 库（如 fast-memoize）解决昂贵计算在多次渲染和多组件实例中的重复执行问题，展示了如何将 select 的性能潜力发挥到极致。
author TkDodo
tkdodo.eu
React Query Selectors, Supercharged
How to get the most out of select, sprinkled with some TypeScript tips.
#Newsletter #前端 #新动态 #周刊更新
周刊第 2 期，把上一期没放的一些素材放进去了~
另外，这次尝试了 SaveToNotion 的一套流程结合我的插件感觉更丝滑了，Notion 数据库确实是个好东西，平常看到的好东西也能加进去了。
FE Bits 前端周周谈 Vol.2｜V8 提速 JSON.stringify 2x，Vite 周下载首超 Webpack
周刊第 2 期，把上一期没放的一些素材放进去了~
另外，这次尝试了 SaveToNotion 的一套流程结合我的插件感觉更丝滑了，Notion 数据库确实是个好东西，平常看到的好东西也能加进去了。
FE Bits 前端周周谈 Vol.2｜V8 提速 JSON.stringify 2x，Vite 周下载首超 Webpack
#HTML #前端 #优质博文
真长知识了～
A Few Things About the Anchor Element’s href You Might Not Have Known
author Jim Nielsen
真长知识了～
A Few Things About the Anchor Element’s href You Might Not Have Known
AI 摘要：本文深入探讨了 HTML 锚点 <a> 标签中 href 属性的一些不常见但非常实用的值。文章不仅回顾了 mailto: 、文本片段 (text fragments) 等已知用法，更重点介绍了一些鲜为人知的技巧，例如使用 ""、. 和 ? 对当前页面进行不同方式的重载，以及它们如何处理 URL 的查询参数和哈希。此外，文章还涵盖了 data: URL、媒体片段和 PDF 页面链接等高级应用，为前端开发者提供了更丰富的链接处理知识。
1. 页面导航与重载
• href="#" 或 #top 这两种写法都可以让页面滚动到顶部。特别的是，即使页面中不存在 id="top" 的元素，#top 依然会按规范 (spec) 生效。
• href="": 重新加载当前页面。此操作会保留 URL 中的查询参数，但会移除哈希值（# 及其后的部分）。
• href=".": 重新加载当前页面，同时移除查询参数和哈希值。注意：此行为对 URL 末尾是否有斜杠 / 非常敏感。如果 URL 是 /path，它会导航到父目录 /；如果 URL 是 /path/，它会导航到当前目录 /path/。
• href="?": 重新加载当前页面，移除查询参数和哈希值，但会在 URL 末尾保留一个 ? 字符。与 href="." 不同，此行为不受末尾斜杠的影响。
2. 特殊协议与片段链接
• href="data:": 可以创建指向 data: URL 的链接，将文本、HTML 等小型数据直接编码在链接中，实现不依赖外部资源的导航。
• 媒体片段 (Media Fragments): 允许链接到音视频文件的特定时间段。例如，video.mp4#t=10,20 会从视频的第 10 秒开始播放，到第 20 秒时停止。
• PDF 页面链接: 可以通过 #page=<页码> 的形式，直接链接到 PDF 文件中的某一页，例如 my-file.pdf#page=42。
author Jim Nielsen
#优质博文 #前端 #CSS #浏览器 #标准
质量很高的文章，推荐阅读。
HTML is Dead, Long Live HTML
author Steven Wittens
质量很高的文章，推荐阅读。
HTML is Dead, Long Live HTML
AI 摘要：作者系统性批判当代 Web 前端栈：DOM 与 HTML 停滞且臃肿、CSS 默认“自内向外”的布局心智与现代应用需求脱节，SVG 与 CSS 相互羡慕却难以统一；“HTML in Canvas”方向治标不治本。作者主张打开更低层的布局、文本与渲染原语，重构视图树与渲染树，以更小更清晰的数据模型拥抱多线程、多来源与异步的新时代，WebGPU 等新基建可成为更简洁的 UI 基元。
1. DOM/HTML 的困境与技术债
• DOM 膨胀失控：仅 Chrome 的 document.body 就有 350+ 键，style 内还有 660 个 CSS 属性；属性/方法边界模糊，部分 getter 触发布局抖动，遗留 onevent 成堆。
• 字符串类型负担：源自 SGML/XML 的“stringly typed”设计让 Web Components 等原生组件 API 笨重，Shadow DOM 引入额外嵌套/作用域，生态接受度低。
• 语义 HTML 的失约：十多年无实质演进，ARIA 兜底本应由语义标签承担的职责；常见结构（如 thread/comment）缺位，WHATWG 更多是边角“本轮加一圈”而非愿景驱动。
• 可编辑性鸡肋：contentEditable 实用化困难重重，富文本编辑器团队“血泪史”常谈。
• 应用现实的“拼装学”：为了做应用 UI，团队被迫以 HTML/CSS/SVG 套娃，承担滚动吸底、虚拟化列表/表格、右键菜单、查找等重复造轮子；UI 与“流式内容”的早期融合如今反成负担。
2. CSS 的本质：自外向内 vs 自内向外
• 正确心智模型：CSS 本质是“两次约束传播”——先自外向内分配可用空间，再自内向外回收实际尺寸；默认是文档导向的“自内向外”，需要手动从 body{height: 100%} 开始把约束往下传，所以“垂直对齐难”并非错觉。
• Flex 的代价与补药：Flex 通过测“自然尺寸”再伸缩，导致递归式“猜测布局”；深度嵌套和未知内容可能引发不可预期放大。可用 contain: size、明确 flex-basis、will-change 等打断全局约束，避免连锁反应。
• API 设计反思：理想的布局系统应把“容器行为”（自外向内）与“放置模型”（自内向外）作为可组合的正交维度提供，而非在单一语法下不断加“抑制/隔离”开关。
3. “好部分”与跨模型错配
• 可用但不优雅：Flexbox、Grid 在理解边界条件后“够用”，但语法“很 CSS”；若从零设计，不会做成今天这种减法式 API。
• 两种系统被硬绑：CSS 同时承担“文本样式的继承系统”和“盒模型布局系统”，前者需继承（如字体），后者主要是包含关系，级联语义不一致，合在一起是历史事故。
• 单位与像素：相对 em 的早期理念已式微，逻辑像素 vs 设备像素更符合用户预期。
• 与 SVG 的“互相羡慕”：SVG 既非 CSS 子集也非超集，变换模型等细节不同；CSS 想要曲线、遮罩、渐变、滤镜，却远不如 SVG 强；开发者在 HTML/CSS 与 SVG 间反复取舍。
• 三个“卡点范例”：
• 文本省略号 text-ellipsis 仅能裁单行不换行文本，段落裁切/检测截断与文本测量 API 皆孱弱。
• 粘性定位 position: sticky 想实现“无条件吸附”需多层荒诞嵌套，本应易如反掌。
• z-index 战争：绝对层级导致“+1/-1 拼数值”，缺少相对 Z 定位的语义。
4. “HTML in Canvas”的误区
• 设计目标错位：为“可编程渲染”而把 HTML 绘进 canvas，结果依旧被 DOM 裹挟（需作为 <canvas> 子树参与布局/样式/无障碍），离真正的可编程 UI 还很远。
• 交互负担转嫁：为了自定义外观，被迫全权接管命中测试 (hit-testing) 与事件，且仅有 2D 命中测试；在已有 CSS 3D 变换环境下显得荒诞。
• Reactivity 风险：让 canvas 回写/观察同一文档树，带来循环依赖与观察者复杂度。
• 文本与字体的“原罪”：Canvas 缺少系统字体、文本布局 API、Unicode 分词/换行等基础能力——真正的难题没有开放正确的底层原语。
• 本质诉求：不是“把 DOM 截图画出来”，而是要打开文本测量、命中测试、可编程布局、统一滤镜/着色器等低层 API；用 DOM 当黑盒无法解决 1990 年代 UI 水平的缺口。
5. 向下开口：重塑视图树与渲染树
• 方向样例：Use.GPU 的“类 HTML 渲染器”在 WebGPU 上实现 X/Y Flex，垂直居中与定位直观，无语义 HTML 或级联，仅“一级公民”的布局；给“div”挂着色器，90% DOM 功能以少量清晰原语重做可达。
• 核心问题重问：视图树应长什么样？如何降解成渲染树？当下是如何被“历史包袱”强行降解的？
• 新引擎机会：Servo、Ladybird 等新浏览器实现轻装上阵，更适合提出新提案；大厂亦可为之，但“品味与自小做起”的工程哲学重要。
• 进程/线程与安全现实：因 Spectre 等 CPU 攻击，SharedArrayBuffer 与 Web Worker 的多线程之路受阻；DOM 若重塑，可与多进程、跨来源隔离、结构化并发、所有权语义、函数式效果 (FP effects) 等现代模型同频共振。
• 最小第一步：以更小更干净的数据模型替换当前“每节点 350+ 属性”的怪物；别误以为问题不可解，关键在于抽丝剥茧、回到正确的内核抽象。
AI 摘要仅供参考和导读和索引，其中可能有失实部分，推荐自行阅读原文。
author Steven Wittens
Acko.net
HTML is Dead, Long Live HTML
Rethinking DOM from first principles
