呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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…
