Intro

过年好！🧨🎇🎉

新的一年，希望大家都健健康康、平平安安、顺顺利利、红红火火！

最近的天气真的好冷好冷，敲代码的时候手都是冰冰凉凉的，特别生硬哈哈哈~

Anyway，这是这一周看到的东西啦！加入了更多丰富的东西，希望你会喜欢。

文章

Git Commands You Probably Do Not Need

学到了一些不太常用但还蛮有趣的 Git 指令，摘录了一部分。

Empty Commit：--allow-empty

空提交可以用于在不更改任何东西的时候重新触发一次 CI/CD 的构建，用法：

git commit --allow-empty -m "Initial commit"

Commit ranking

查看谁向存储库提交最多：

git shortlog -s -n --no-merges

输出结果：

567  Martin Øinæs Myrseth <myrseth@gmail.com>
322  Martin Øinæs Myrseth <mmyrseth@cisco.com>
142  Martin Myrseth <mm@myme.no>
 14  Martin Myrseth <myrseth@gmail.com>
  4  Martin Øinæs Myrseth <mm@myme.no>
  3  Martin Myrseth <myme@map>
  2  Martin Øinæs Myrseth <myme@Tuple.localdomain>
  2  Martin Øinæs Myrseth <myme@map.localdomain>

文中还有很多其他有趣的 Git 指令和例子，可以点击原文链接查看。

Bitwarden design flaw: Server side iterations

Bitwarden 通过单一的主密码来保护用户数据，Bitwarden 的服务器不应该知道用户的主密码，所以会派生出两个不同的值：

  • 主密码的 Hash，用于验证用户是否被允许登陆
  • 用于加密 / 解密数据的密钥

Bitwarden 的数据会受到 200,001 次的 PBKDF2 迭代：100,001 次在客户端、100,000 次在服务端。但是在 Bitwarden 安全白皮书中，服务端的 100,000 次 PBKDF2 迭代仅仅用于主密码的 Hash，而不是加解密数据的密钥。即：对于主密码 Hash 确实会经过 200,001 次 PBKDF2 迭代，但是对于加解密数据的密钥，只会经过 100,000 次 PBKDF2 迭代。

这就导致了一个问题，假设攻击者得到了你的 Bitwarden 数据副本并尝试对其进行解密，这时候，对于主密码 Hash 的爆破会很慢，因为主密码的 Hash 有 200,001 次的 PBKDF2 迭代，每一次计算都需要时间。但对于每次猜测，只需要派生出一个加解密密钥，并检查这个密钥是否可以解密数据就可以大大减少爆破需要的时间，因为加解密密钥只经过了 100,000 次 PBKDF2 迭代。

同时还有另一个问题，Bitwarden 所使用的迭代次数其实远低于 OWASP 推荐的迭代次数（OWASP，Open Web Application Security Project，是一个关注应用程序安全的基金会：https://owasp.org/，里面有一份关于应用程序安全的 Cheat Sheet 写得蛮详细的，有挺多有价值的信息：https://cheatsheetseries.owasp.org/）

如果你也在使用 Bitwarden 管理你的密码，可以到 https://vault.bitwarden.com/#/settings/security/security-keys 把迭代次数设置为 600,000 来提高安全性，这是 OWASP 推荐的迭代次数，对于大部分主流硬件，这个迭代次数都不会让用户感受到明显的卡顿。

工具

Spotify 推出的播客名称生成工具

🔗链接：https://podcast-name-generator.spotify.com/

逛 Product Hunt 时候发现 Spotify 推出了一款英文播客名称生成工具，点击页面上的按钮可以得到一个随机生成的英文播客名称 + 一段简短的介绍，页面的设计很有 Spotify 的味道，还蛮好看的，一些随机生成的英文播客名称也挺有趣的。

想起了另一个中文播客名称生成工具：https://get-podcast-name.vercel.app/

网站

Distill

本科时候发现的一个网站，通过动画和一些有趣的用户交互来介绍机器学习相关的知识，文章的质量都很高，让用户和文章中提到的内容进行交互或者是展示一个清晰易懂的动画，真的很大提升了用户体验，可以更容易理解作者想表达的意思。

但今天想起来的时候才发现网站已经无限期暂停更新了…希望未来还能再看到这个网站更新。 类似的，还有这个网站 https://ciechanow.ski/ 也有很多可以交互的有趣文章，例如这个网站上的 Sound、Mechanical Watch 这两篇文章都很有趣。

Wonders of Street View

一个随机展示奇特 Google 街景的网站，例如鲨鱼从天而降砸穿房顶、岩浆湖…

AI

MusicLM: Generating Music From Text

论文🔗：https://arxiv.org/abs/2301.11325

从接触到 Disco Diffusion 开始，就一直在想着 AI 生成音乐应该也不远了，果然，Google 团队就做出来了这个 MusicLM，可以通过文字描述，让 AI 来生成音乐，并且提供了多种不同的生成模式。在论文主页上可以收听用 MusicLM 生成的音乐样本，听起来感觉都还不错。

The Adventure of Penelope the Porcupine and the Land of Whimsy

用 ChatGPT 和 Midjourney 完成的一本儿童读物，看下来感觉还挺不错的，配的插图也都很精美，AI 在一定程度上真的已经能够取代一些人类的工作了。

小时候经常能在书店或者是学校旁的小商店看到一些廉价的儿童读物，有一些书里甚至会有一些离谱的文字错误、插图也不是十分精美，如果写一些脚本实现 AI 制作儿童读物、绘本的全流程，说不定可以量产这类儿童读物，并且质量也不差。

前端

:in-range 和 :out-of-range CSS 伪类

才知道原来 input 标签有 :in-range 和 :out-of-range 这两个 CSS 伪类，当 input 标签指定了 min 和 max 属性的时候，这两个伪类分别对应当用户输入的值在范围内和不在范围内，通过这两个伪类就可以在不借助 JavaScript 的情况下做出一个能根据用户输入内容是否合法自动改变样式的输入框，还挺好用的。

MDN 文档：

Can I Use 链接：https://caniuse.com/css-in-out-of-range

下面这个例子我把 min 设置为了 1，把 max 设置为了 10，因此，当你输入 1 的时候，输入框的背景色应该呈现绿色，当你输入 11 的时候，输入框将会自动变更为红色，Try it~

See the Pen in-range and out-of-range by LGiki (@lgiki-the-bold) on CodePen.