我不知道的周刊第 31 期

2025-02-08 703 字 16 min read

开源来源

浏览器扩展资源嗅探开源项目 Chrome扩展

猫抓 - 浏览器资源嗅探扩展

一个开源的浏览器资源嗅探扩展，帮助用户筛选和下载网页中的媒体资源，支持多种格式和协议，已获得11.3k+ stars。

核心功能

资源嗅探
- 视频资源
- 音频文件
- M3U8流媒体
- MPD文件
下载管理
- 批量下载
- 断点续传
- 自动合并
- 格式转换

浏览器支持

Chrome商店
Edge商店
Firefox商店（非国区）
源码安装
CRX安装包

技术特性

前后端分离
多语言支持
异步处理
实时预览
自定义规则
无广告无追踪

开源依赖

hls.js - HLS流处理
jQuery - DOM操作
mux.js - 媒体处理
mpd-parser - DASH解析
StreamSaver.js - 流保存

安装说明

源码安装:

git clone https://github.com/xifangczy/cat-catch.git
# 开启开发者模式
# 加载已解压的扩展程序

总结语

猫抓(cat-catch)作为一个开源的资源嗅探工具，通过简洁的界面和强大的功能，为用户提供了便捷的媒体资源获取方式。其GPL-3.0开源协议也确保了项目的持续发展和社区贡献。

AI 来源

AI模型图像生成中文支持谷歌 Image3

谷歌Image 3模型居然可以写中文！

谷歌最新发布的Image 3图像模型已原生支持中文Prompt。用户现在可以直接使用中文指令生成高质量图像，大幅提升中文用户的使用便捷性和效率。

核心特性

原生中文支持
- Image 3模型直接理解中文Prompt，无需翻译，降低使用门槛。
- 社交媒体已出现示例，如用中文生肖提示词成功生成高质量图像。
高质量图像生成
- Image 3延续谷歌图像生成优势，能生成细节丰富、质量优秀的图像。
- 即使复杂中文Prompt，模型也能准确理解并生成所需图像，展现强大语义理解能力。
提示词工程简化
- 直接使用中文Prompt，简化提示词工程，用户更自然地用母语表达意图。
- 无需担心英文Prompt准确性和翻译偏差，创作流程更流畅高效。

应用场景

社交媒体内容创作
- 中文用户可直接用中文Prompt快速生成吸睛配图和视觉内容。
- 结合春节等中国节日，轻松生成中国文化特色图像。
设计领域辅助
- 设计师用中文Prompt快速生成草图、素材和灵感图，提升效率和创意探索。
- 中文Prompt使AI图像生成更好融入本土设计师工作流程。
教育和娱乐
- 教育领域可利用中文Prompt生成教学素材和插图，提升趣味性。
- 娱乐领域可创作个性化头像、表情包和趣味图像，丰富数字生活。

使用技巧

关键词优化
- Prompt质量仍关键，用更精准丰富的中文关键词描述图像。
- 参考示例Prompt用词结构，如"3D渲染卡通形象"、"中国传统舞狮服装"等。
节日主题Prompt
- 结合春节、元宵节等节日创作主题图像，如"宝可梦拜年"、"福字玩偶"等。
- 利用节日元素和吉祥寓意，生成更具文化内涵的图像。
持续探索
- 中文支持或处初期，鼓励用户尝试不同中文Prompt，探索模型理解程度和生成效果。
- 关注社区分享，学习借鉴他人经验。

总结语

Image 3模型原生支持中文Prompt是AI图像生成领域的重要进展，大幅降低中文用户门槛，为中文文化内容创作传播带来新机遇。随着技术成熟，期待更多AI工具支持多语言，惠及更广泛用户。

教程来源

VS Code 开发工具效率提升编程技巧

Wes Bos:VS Code高效导航技巧

知名JavaScript讲师Wes Bos分享了15个在VS Code中高效导航代码的技巧，帮助开发者摆脱文件侧边栏和搜索的依赖，显著提升开发效率。

核心技巧

快速文件切换
符号导航
定义跳转
引用查找
命令面板使用
工作区管理
书签功能

快捷键设置

文件导航
- Cmd/Ctrl + P:快速打开
- Cmd/Ctrl + T:符号搜索
- F12:转到定义
- Alt + F12:预览定义
编辑器控制
- Cmd/Ctrl + B:侧边栏
- Cmd/Ctrl + J:面板
- Cmd/Ctrl + :分屏
- Alt + 数字:切换标签页

实用插件

GitLens - 代码历史
Project Manager - 项目管理
Bookmarks - 代码书签
Todo Tree - 任务标记
Path Intellisense - 路径提示

进阶技巧

使用工作区
自定义代码片段
多光标编辑
重构预览
智能跳转

总结语

掌握这些VS Code导航技巧，可以让开发者在代码库中游刃有余，不再依赖传统的文件树和搜索功能。这些方法不仅提升了开发效率，也改善了编程体验。

教程来源

CSS动画边框效果前端开发设计技巧

Ana Tudor:动态发光边框效果实现

CSS专家Ana Tudor分享了四种实现滚动触发的动态发光边框效果的方案，从基础实现到高级优化，提供了完整的技术思路。

基础方案

简单渐变

.border-glow {
  background: conic-gradient(
    from 0deg at 50% 50%,
    #fff 0%,
    transparent 60%
  );
  animation: rotate 2s linear infinite;
}

改进版本

.border-glow-improved {
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,0.8) 0%,
    transparent 50%
  );
  filter: blur(8px);
  animation: rotate 3s ease-in-out infinite;
}

高级效果

颗粒发光

.grainy-glow {
  background: 
    url("data:image/svg+xml,...") 0 0/50px 50px,
    conic-gradient(
      from 0deg at 50% 50%,
      #fff 0%,
      transparent 50%
    );
  filter: blur(12px) contrast(150%);
}

圆角过渡

.rounded-glow {
  border-radius: 12px;
  mask-image: radial-gradient(
    circle at var(--x) var(--y),
    #000 0%,
    transparent 70%
  );
}

动画控制

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

性能优化

使用transform代替位置动画
适当的模糊半径
合理的动画帧率
GPU加速处理
避免不必要的重绘

总结语

通过这四种不同的实现方案，我们可以根据具体需求选择合适的边框发光效果。从简单的渐变动画到复杂的颗粒效果，每种方案都有其特定的应用场景。

教程来源

第一性原理思维方法决策思维学习方法

普通人如何运用第一性原理？

第一性原理(First Principles)源自亚里士多德的哲学思想，是指"事物最基本的命题，不能被省略或者再分割"。这种思维方法通过分解复杂问题到最基本要素，帮助我们突破经验主义的局限，找到创新性解决方案。

基本概念

定义:从最基本的已知事实出发，不依赖类比和经验进行推理
特点:重新思考问题本质，避免"以讹传讹"
应用:从特斯拉到SpaceX，从亚马逊到Stripe，都运用了这种思维
价值:帮助突破认知局限，实现创新性思考

核心概念

追溯本源
分解问题
重新组合
突破常规
创新思维

应用步骤

问题分解
- 识别关键要素
- 找到基本单位
- 理解内在联系
- 明确边界条件
深入分析
- 质疑假设
- 验证前提
- 寻找证据
- 建立模型
重构方案
- 组合要素
- 优化结构
- 验证可行性
- 迭代改进

实践案例

学习方法优化
职业规划设计
项目方案制定
个人决策制定
问题解决流程

扩展资源

推荐书籍
- 《第一性原理》- 丹尼尔·杰弗里斯
- 《从0到1》- 彼得·蒂尔
- 《重来》- 杰森·弗里德
相关文章
- Elon Musk的第一性原理思维
- 如何像物理学家一样思考

总结语

第一性原理思维不是一个神奇的解决方案，而是一种帮助我们突破思维定式、找到问题本质的工具。通过持续练习和实践，我们可以培养这种思维习惯，提升解决问题的能力。

教程来源

CSS Grid 按钮加载动画前端开发布局技巧

CSS Grid 布局实现按钮加载动画不跳动

在前端开发中，按钮加载动画是一个常见的交互效果。然而，当加载动画出现时，按钮的宽度可能会发生变化，导致页面元素跳动，影响用户体验。 Wes Bos 在 Twitter 上分享了一个使用 CSS Grid 巧妙解决这一问题的方案。

核心特性

CSS Grid 布局
- 利用 CSS Grid 强大的布局能力，将按钮文本和加载动画元素堆叠在同一位置。
- 确保按钮在加载状态和正常状态下尺寸保持一致，避免页面跳动。
visibility: hidden 控制显示
- 使用 visibility: hidden 属性来控制加载动画的显示和隐藏，而非 display: none。
- visibility: hidden 隐藏元素但仍占据空间，保持布局稳定。
文本可访问性
- 方案确保按钮文本在加载状态下仍然可访问，符合 Web 可访问性原则。
- 有利于屏幕阅读器等辅助技术解析页面内容。

技术实现

该方案的核心 CSS 代码片段如下:

.button {
  display: grid; /* 使用 CSS Grid 布局 */
}

.spinner {
  visibility: hidden; /* 默认隐藏加载动画 */
}

.button.loading .spinner {
  visibility: visible; /* 加载状态显示加载动画 */
}

HTML 结构示例:

<button class="button loading">
  <span>提交</span>
  <div class="spinner">
    <!-- 加载动画元素，例如 SVG 或 Font Awesome 图标 -->
    <i class="fas fa-spinner fa-spin"></i>
  </div>
</button>

实现步骤:

按钮容器 Grid 布局: 将按钮元素设置为 display: grid，使其成为 Grid 容器。
堆叠文本和动画: 由于 Grid 布局的特性，按钮文本 <span> 和加载动画 <div> 会默认堆叠在 Grid 单元格的同一位置。
隐藏加载动画: 默认情况下，使用 visibility: hidden 隐藏 .spinner 元素。
加载状态显示: 当按钮处于加载状态（例如添加 loading class）时，通过 CSS 规则 .button.loading .spinner { visibility: visible; } 显示加载动画。

最佳实践

SVG 动画: 推荐使用 SVG 制作加载动画，具有体积小、可缩放、性能高等优点。
语义化 HTML: 使用具有语义的 HTML 标签，例如 <button> 元素，并合理使用 ARIA 属性增强可访问性。
性能优化: 避免使用复杂的 CSS 动画或 JavaScript 动画，保持加载动画的简洁高效。

使用技巧

Tailwind CSS: 该方案可以集成到 Tailwind CSS 等 CSS 框架中，通过 Tailwind 的 utility classes 快速实现样式。
React 组件: 在 React 等组件化框架中，可以将该方案封装成可复用的 Button 组件，方便在项目中统一使用。
状态管理: 使用 JavaScript 或框架的状态管理机制（例如 React 的 useState）来控制按钮的 loading class，从而切换加载状态。

核心问题问答

Q: 为什么使用 visibility: hidden 而不是 display: none?

A: visibility: hidden 隐藏元素，但元素仍然占据文档流中的空间，而 display: none 会完全移除元素，导致布局重新计算。使用 visibility: hidden 可以保持按钮尺寸稳定，避免跳动。

Q: 如何自定义加载动画样式?

A: 可以根据项目需求自定义 .spinner 元素的样式，例如修改颜色、大小、动画效果等。可以使用 CSS 或引入第三方动画库。

Q: 该方案是否适用于所有类型的按钮?

A: 该方案适用于大多数按钮，包括文本按钮、图标按钮等。只需根据实际 HTML 结构和样式进行适当调整即可。

扩展资源

总结语

Wes Bos 分享的 CSS Grid 按钮加载动画方案，巧妙地利用了 CSS Grid 布局和 visibility: hidden 属性，实现了按钮加载动画的平滑过渡，避免了页面跳动问题，提升了用户体验。该方案简洁实用，易于理解和应用，值得前端开发者学习和借鉴。

教程来源

UI效果文本动画前端开发视觉设计乱码效果

UI 动效技巧:实现吸睛的文本乱码 (Scrambling Text) 效果

在现代 Web UI 设计中，动态效果扮演着越来越重要的角色。文本乱码 (Scrambling Text) 效果，作为一种独特的文本动画，能够有效地吸引用户注意力，提升页面的视觉趣味性和互动性。 Jhey 在 Twitter 上提到了 "The Craft of UI" 系列将推出关于文本乱码效果的内容，预示着这种效果在 UI 设计中正受到更多关注。

核心特性

视觉吸睛
- 文本乱码效果通过快速变化的字符，瞬间抓住用户的眼球，使其对文本内容产生好奇。
- 适用于标题、强调文本、加载提示等场景，有效提升信息传递的优先级。
动感十足
- 乱码到清晰文本的过渡动画，赋予文本活力和动感，避免静态文本的单调感。
- 可以增强用户界面的互动反馈，例如按钮点击后的文本变化、内容加载完成的提示等。
创意表达
- 文本乱码效果本身具有一定的神秘感和科技感，可以用于营造独特的品牌风格和视觉氛围。
- 能够为网页设计带来更多创意空间，提升用户体验的新鲜感。

技术实现

文本乱码效果的实现方式多样，以下列举几种常见的技术思路:

CSS 动画 + content 属性
- 利用 CSS 动画的关键帧 (keyframes) 逐步改变元素的 content 属性值。
- 在动画过程中，content 的值可以设置为随机字符、特殊符号，最终过渡到目标文本。
- 优点是实现简单，纯 CSS 即可完成，性能较好。
- 缺点是文本内容写在 CSS 中，不利于维护和动态更新。
JavaScript 逐字符替换
- 使用 JavaScript 获取目标文本，并将其拆分为字符数组。
- 通过 setInterval 或 requestAnimationFrame 定时器，随机替换文本中的字符。
- 随着时间推移，逐步将随机字符替换为目标文本的字符，直至完整显示。
- 优点是灵活性高，可以精细控制动画过程，实现更复杂的乱码效果。
- 缺点是实现相对复杂，需要 JavaScript 编程，性能可能略逊于纯 CSS 方案。
Canvas 绘制
- 使用 HTML5 Canvas 元素，将文本绘制在 Canvas 上。
- 通过 JavaScript 控制 Canvas 上像素点的变化，模拟文本乱码和重组的过程。
- 优点是效果高度可定制，可以实现非常炫酷和独特的乱码动画。
- 缺点是实现复杂度高，需要 Canvas API 编程，性能开销较大。

使用技巧

适度使用
- 文本乱码效果虽然吸睛，但不宜滥用，过多的动画效果可能会分散用户注意力，甚至造成视觉干扰。
- 建议在关键信息或交互元素上使用，例如网站标题、按钮、重要提示等。
控制速度
- 乱码动画的速度要适中，过快可能导致用户看不清，过慢则会显得拖沓。
- 可以根据文本长度和预期效果调整动画速度参数。
优化性能
- 选择合适的实现方式，例如纯 CSS 方案通常性能更优。
- 避免在性能敏感的场景中使用过于复杂的乱码效果，例如移动端页面。

总结语 (推测)

文本乱码效果作为一种有趣的 UI 动效，可以为网页设计增添活力和创意。 Jhey 即将分享的 "The Craft of UI" 系列教程，预计将深入探讨文本乱码效果的实现原理、应用技巧和最佳实践。期待学习更多关于文本乱码效果的精妙实现，并将其应用于实际项目中，提升用户体验。