# introduction
## 2020-10-20\[好文]
相信你在工作中一定用过堡垒机， 大中型公司都会有堡垒机。有的是自建，也有的是用的开源系统。它究竟是什么？做了什么事呢？
[「系统架构」什么是堡垒机？为什么需要堡垒机？](https://mp.weixin.qq.com/s/ptzcIjRePFd_K8_8IiqXfg) 是一个介绍堡垒机的科普文，看我你或许就有答案了。
地址：
## 2020-10-17\[工具]
不知道你有没有碰到过这样的问题： 你同是开发多个项目，每个项目依赖的 node 和 npm 版本都不一样， 他们彼此不兼容。 你需要在切换项目前修改你的 node 和 npm 版本（当然也可能是其他包管理器，比如 yarn）。你可以使用 nvm 等工具来帮助你，同是在项目的 package.json 中定义一个 engineer 字段，用于指定项目依赖的 node 版本。
这虽然可以解决问题， 但是每次都切换也很浪费时间。 没有使用 volta 时，我的方式是开启多个 tty，每个 tty 的 node 版本不同， 当你切换项目使用对应的 tty 即可。
不过当你使用了 volta，一切会变得不同。volta 可以帮助你管理项目的引擎依赖， 支持 npm， yarn 等宝管理工具。 快来用 volata 管理你的项目包管理器吧。
地址：
## 2020-10-16\[工具]
一个可以将 TypeScript 转换为 webassembly 的工具。这意味着你可以用 JS 写 webassembly，获得更好的性能。
地址：
## 2020-10-15\[工具]
RSLint 是一个用 Rust 写的 lint 工具。 规则挺有意思的， 最关键的是性能好， 其比用 JS 写的 linter 快很多，比如 eslint。
地址：
## 2020-10-14\[行业人物]
在一个圈子中混，怎么能不知道这个行业的领军人物呢？ 今天给大家推荐的是 20 个前端领域的领军人物。
> 你关注了几个？
地址：
## 2020-10-13\[好文]
我在 [数据结构与算法在前端领域的应用 - 第三篇](https://lucifer.ren/blog/2019/09/20/algorthimn-fe-3/) 中的`重新思考我们的前端应用`小节提到了**假如流行的前端框架比如 React 内置了这种线程分离的功能，即将调和算法交给 WebWorker 来处理，会给前端带来怎么样的变化？**。 这绝对不是异想天开，比如今天给大家分享的这一个文章的观点就很好地印证了这一点。
地址：
## 2020-10-12\[资料]
vue3 出来了，大家都开始学了起来。这里有一份 vue3 学习资料的集合，或者可以帮助你。
地址：
## 2020-10-10\[书籍]
给大家安利一本书现代操作系统（第 4 版），豆瓣评分 9.1。很多人推荐的一本书， 读完绝对有巨大的收获。
如果实在觉得读起来吃力，可以关注一下小林和 cxuan，这两个人对操作系统的理解还是蛮深刻的，文章通俗易懂。
## 2020-10-09\[工具]
figlet.js 是一个用于生产 FIGfont 规范的一个 JS 库。效果图：
地址：
## 2020-10-08\[工具]
我们平常使用 vue 或者 react 脚手架生产的项目的时候， 启动项目会自动打开浏览器， 你可以借助这款工具实现这个效果。
用法：
```js
const open = require("open");
(async () => {
// Opens the image in the default image viewer and waits for the opened app to quit.
await open("unicorn.png", { wait: true });
console.log("The image viewer app quit");
// Opens the URL in the default browser.
await open("https://sindresorhus.com");
// Opens the URL in a specified browser.
await open("https://sindresorhus.com", { app: "firefox" });
// Specify app arguments.
await open("https://sindresorhus.com", {
app: ["google chrome", "--incognito"],
});
})();
```
地址：
## 2020-10-08\[教程]
一个 30 天免费学习的网站，适合基础薄弱的前端。
# 最新
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
在线阅读：
电子书文件太大， 大家可到我的公众号《脑洞前端》回复“每日一荐”获取。
## :newspaper: RSS
大家可以用 Github 提供的 [RSS](https://github.com/azl397985856/daily-featured/commits.atom) 来订阅我的仓库更新。
## 图片加载不出来如何解决？
## :calendar:《91 天学算法》限时活动
很多教育机构宣传的 7 天，一个月搞定算法面试的，我大概都了解了下，不怎么靠谱。学习算法这东西，还是要靠积累，没有量变是不可能有质变的。还有的人选择看书，这是一个不错的选择。但是很多人选了过时的或者质量差的书，又或者不会去写书中给的练习题，导致效果很差。
基于这几个原因，我组织了一个 91 天刷题活动，通过一个相对比较长的时间（91 天）给出最新的学习路径，并强制大家打卡这种高强度练习来让大家**在 91 天后遇见更好的自己**。详细活动介绍可以点下方链接查看。另外往期的讲义也在下面了，大家可以看看合不合你的口味。
最后送给大家一句话： **坚持下去，会有突然间成长的一天**。
[点此参与](https://github.com/azl397985856/leetcode/discussions/532)
* 🔥🔥🔥🔥 [活动首页](https://leetcode-solution.cn/91) 🔥🔥🔥🔥
* [91 第三期讲义 - 二分专题（上）](https://github.com/azl397985856/leetcode/blob/master/thinkings/binary-search-1.md)
* [91 第三期讲义 - 二分专题（下）](https://github.com/azl397985856/leetcode/blob/master/thinkings/binary-search-2.md)
## 1V1 辅导
如果大家觉得上面的集体活动效率比较低，我目前也接受 1v1 算法辅导，价格根据你的算法基础以及想要学习的内容而定感兴趣的可以加我微信，备注“算法辅导”，微信号 DevelopeEngineer。
## 新鲜出炉 (2025-03)
### 2025-03-05\[web3]
现在很多币都是固定时间解锁，这给币价上涨带来压力。赵长鵬提出了一种新的解锁机制。
根据赵长鹏的设计,特设小组将首先解锁10%的令牌,并在令牌发行开始时将其投放市场。筹集的资金将用于满足业务需求,例如产品开发,营销和工资单。但是,将来的令牌解锁将受到严格的条件约束,包括至少六个月的间隔,价格需要达到最后一次解锁价格的两倍,并持续30天,并且单个解锁比率不得超过5%。
例如,假设令牌在首次发行时的定价为$ 1,如果六个月后价格未达到$ 2,则无法解锁更多令牌。假设在7个月4到8个月3期间价格稳定在$ 2以上,则最多可以在8月3日解锁5%的令牌。如果当天的价格为3美元,则最早的解锁时间是次年的3月3日,价格需要超过6美元并稳定30天。
但是模型本身不是完美的，比如解锁 10% 后直接跑路，但至少解决了一部分问题。如果靠谱的团队再加上靠谱的模型，我相信没有谁能拒绝。
### 2025-03-04\[知识]
现在很多的 ai 编程工具并不了解你的代码仓库，比如不了解你的项目结构，约定以及依赖等等。所以写的代码并不是你想要的。你需要不断调整，这很浪费时间。另外一个 ai 编程工具则直接全部扫描你代码，这会导致两个问题：
1. 有些隐私数据不想被访问和学习
2. 有些是外部文件或者屎山代码，不需要学习它的写法
如果可以提供一个类似 gitignore 的配置文件，让 ai 编程工具只扫描你想要学习的部分，而不是全部代码，这将会大大提高效率。这就像互联网早起的 robots.txt 文件一样，它可以帮助搜索引擎更好的索引你想要的内容。
现在有一些工具明确支持，比如 augmentcode，我觉得这是一个不错的实践。希望 ai 编程工具的规范越来越完善，减少使用者的认知成本和学习负担。
### 2025-03-03\[算法]
前一段时间 deepseek（有时候简称 ds）很火，很多人竟然公开教别人如何部署 ds 赚钱，竟然还有很多人买。实际上部署 ds 非常容易，只需要按照文档操作几分钟就好了。这让我感受到了“信息差真的很容易赚钱”。大家可以参考这个文章的部分，几分钟就搞定了。
via:
### 2025-03-01\[工具]
一个 chrome 扩展工具，可以自动将你的视频作品同步到多平台。如果你在做自媒体，并且主攻视频方向，可以试下。
我之前主打文字方向，使用过另外一个类似的工具 openwrite, via markdown 文章到多个平台。效果没有自己手动好，比如 tag 等各个平台特有的东西很多都无法做到完美适配。但是确实省时间。
via:
## 历史汇总
* [SUMMARY](https://github.com/azl397985856/daily-featured/blob/master/SUMMARY.md)
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
大家也可以加我微信好友进行交流！
## 贡献
* 如果有想法和创意，请提 [issue](https://github.com/azl397985856/daily-featured/issues) 或者进群提
* 如果想贡献代码，请提 [PR](https://github.com/azl397985856/daily-featured/pulls)
* 如果需要修改项目中图片，[这里](https://github.com/azl397985856/daily-featured/blob/master/assets/README.md) 存放了项目中绘制图的源代码， 大家可以用 [draw.io](https://www.draw.io/) 打开进行编辑。
## License
[Apache-2.0](https://github.com/azl397985856/daily-featured/blob/master/LICENSE/README.md)
# 2024-11
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-11
### 2024-11-30\[好文]
一个 AI 工具，允许你使用自然语言编写基于浏览器的集成测试的测试用例。只需要：
1. 配置好你的 openapi 秘钥
2. 用自然语言描述：Action，query，assertion。Action 就是你想要做什么，query 是你想要获取什么信息，assertion 是你期望的结果。
3. 点击 Run 按钮，即可得到一个可以直接运行的测试用例。
via:
### 2024-11-29\[好文]
自从有了 url 这个东西，人们就在考虑是否有一种方式可以直接链接到页面的某个地方，于是锚点就出现了。那么如果想直接链接到页面的某一句话呢，甚至更复杂的 pattern 呢？类似于我们 ctrl + f 的效果。于是 Text fragments（文本片段）出现了。这篇文章介绍了 Text fragments 的用法。
via:
### 2024-11-27\[网站]
和普通的文件分享不同，它需要两个客户端同时在线。两个客户端都是独立的，都可以发送和接受文件。
使用方法很简单，只要输入对方的 code 就好。如图 WKXR 就是当前自己的 code。我们需要输入的是对方的 code，然后点击输入框右边的链接即可。比如这里输入了 3JE9，就是和 code 为 3JE9 的客户端链接。
链接后可以发送文件，接受文件，甚至可以收发消息。
这在你需要分享一些东西，但是又不想留在互联网上被别人看到有用。
> 虽然分享文件可以设置密码，但是还是会被看到。这种点对点的方式还是比设置密码更安全。
via:
### 2024-11-26\[好文]
文章分享了六条 shell 编写技巧。完整六条如下：
1. 全面的错误处理和输入验证。包括用法错误、文件不存在等
2. 清晰多彩的输出。包括颜色、格式、表格等
3. 详细进度报告。类似于 debug 日志
4. 使用“set -e”和“set +e”进行策略性错误处理。在不需要停止脚本的情况下，可以跳过错误，需要的时候再开启。
5. 特定于平台的调整。如果你的脚本需要运行在多个平台则需要考虑。另外即使你的用户只在一个平台使用，但测试机可能在另一个平台，因此这种情况也需要额外考虑。
6. 多次运行的时间戳文件输出。每次运行都用时间戳作为文件名生成日志（由于第三条的铺掉，我们只需要将其重定向到文件即可），可以帮助你跟踪脚本的运行情况。
via:
### 2024-11-24\[好文]
一个讲如何缩小 git 仓库体积的文章。文章说他将 git 仓库体积缩小了 94% ！
我之前就经手过一个非常大的 mono 仓库，各种语言的项目都放在里面，体积非常大。每次同步都很久，后续甚至不得不通过减少 depth 来减少同步时间。
作者做了以下两点来缩小仓库体积：
1. Don't keep thousands of things in a single folder. 不要将数千个东西保存在一个文件夹中。
2. git repack -adf --path-walk 可以将仓库打包压缩，减少体积。如果你在大型 monorepo 中工作，并且您有 CHANGELOG.md 或实际上任何具有相对较长名称（>16 个字符）且反复更新的文件，您可能需要密切关注这条路径东西。
你还可以尝试新的 git survey 命令来查看各种新的启发式方法，例如按磁盘大小排列的热门文件、按膨胀大小排列的热门目录或按膨胀大小排列的热门文件。这些启发式方法将帮助您了解路径行走工作是否也会影响你的仓库大小。
via:
### 2024-11-22\[工具]
一个在线制作印章的工具，开源的时间不久，但是功能已经很完善了。你可以通过这个工具制作一个印章，然后下载下来，用于你的文档或者其他地方。代码是开源的，仓库甚至连 license 都没有，你可以自己部署到自己的服务器上。
另外一个功能看起来更多，但是不提供源代码，只能在线使用。
via:
### 2024-11-12\[网站]
一个在线抓取博客的网站，可以抓取 微信公众号，CSDN，博客园，简书，掘金，思否。输出支持 HTML,Markdown,PDF,MHTML
个人认为比较有用的是输出 markdown 格式，可以直接导入到博客编辑器中。输出 markdown 其实一个反过程。比如 markdown 的 `[title](link)` 转化为 html 的时候会变成 `title`，但是在博客编辑器中，自动解析 `title` 然后转化为 `[title](link)`。 虽然听起来很简单，但是不同的网站兼容性可能不一样，所以还是需要注意一下。这也是它只支持这几个博客网站，而不是全部的博客网站的原因。
via:
### 2024-11-06\[工具]
如果你是一个站长，可能有过接入第三方登录的经历。第三方登录可以让用户更方便的登录你的网站，同时也可以减少用户的注册成本。
比如我自己的网站： ，我就接入了 github 登录，但是我并没有实现后端。如果你只是想识别一下用户，或许我这种就够了。你如果你不满意于此，可以尝试下 workos。
workos 是一个可以帮助你接入第三方登录的工具，但是接入你需要自己实现后端，但是支持的第三方更多，定制化更高，如果你有这方面的需求，可以考虑一下。
via:
### 2024-11-05\[经验]
随着 AI 的不断发展。现在多了很多自然语言编程的产品，有了它们，你可以通过自然语言来编程，而不需要写代码。
比如：
*
*
*
目前我的体验是：
1. 这些产品还不够成熟，比如我明确告诉它，它的解决方案有问题，并进行了解释，它还是无法理解，给出错误的解法，以及错误的解释。但是它们的出现确实给了我们一些启示，未来的编程可能会变得更加简单。
2. 有些时候使用自然语言效率更低。比如我想查看 git 的日志。直接输入 git log 就好了。如果是自然语言很难比这个更快。
3. 自然语言有什么有歧义。做过开发，对接产品的人应该都知道，需求文档中的需求有时候就是有歧义的，这个时候就需要沟通。自然语言编程也是一样，有时候你的自然语言描述可能会有歧义，这个时候就需要沟通。而这个沟通的成本可能会比直接写代码高。当然如果你压根不会写代码，那么这个成本可能就不算什么了。
### 2024-11-04\[好文]
如果你使用 git 来管理你的代码。并且在某一天突然遇到一个 bug，你只知道上个 release 是好的。但是距离上个 release 已经有非常多提交了。
正常的人第一想法通常是使用二分的方法来找到这个 bug 的提交。但是这个方法有一个问题，就是你需要一个一个找到具体的 commit，然后 checkout ，再测试，这个过程是非常繁琐的。
这篇文章介绍了一个命令 `git bisect`，这个工具可以帮助你快速定位 bug 的提交。具体的使用方法可以参考这篇文章。
via:
### 2024-11-01\[经验]
你有没有遇到过使用了代理，但是谷歌搜索出来的东西还都是中文，即使你使用了英文关键字来搜索。甚至使用了隐身模式也不行。
这其实有很多可能，这里提供几个思路。
1. 使用 google 高级搜索技巧，按语言来搜索。比如 `language:en lucifer.ren`
2. 修改你的系统语言为英文，然后再搜索。
3. google 判定你的 IP 是中国人在使用，尽管你的代理 IP 可能是美国，所以你可以尝试换个代理来解决。
4. DNS 命中到了 google 中国的服务器，你可以尝试修改 DNS 。
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2024-08
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-08
### 2024-08-31\[工具]
一个可以自动生成会议记录的 ai 工具，它是通过监控你的麦克风和音频输出来生成会议记录的。目前支持 mac 平台。
via:
### 2024-08-30\[网站]
一个可以将白话文转化为文言文的网站，速度还行，就是一次不能处理太多文本。
via:
### 2024-08-29\[新闻]
HTTP 请求有一个幂等性的概念，即无论调用多少次，结果都是一样的。
GET 请求被要求是幂等的，通常它只是获取数据，不会对服务器状态产生影响。但是这只是预期和约定，你仍然可以在 Get 请求做一些修改操作，只是不推荐。
GET 有一个问题，这并不是 GET 协议本身的问题，而是浏览器的问题。由于 GET 参数是拼接在 url 上的，所以 GET 请求的 url 长度有限制，这个限制是由浏览器和服务器共同决定的。
因此如果你想遵守“幂等性”约定对幂等请求使用 GET，但是又需要传递大量参考该怎么办？
普遍的做法是将请求拆分为多个，比如 api1 和 api2。api1 接受 a，b，c 参数，api2 接受 d，e，f 参数。这样就可以避免 url 长度的限制。
现在有了一个新的提案，截止到目前（2024-10-07），它还是一个草案，但是它提供了一个新的方法 QUERY，类似于在 GET 请求中传递 body。有了这个新的方法，你就可以遵守幂等性约定，同时又可以传递大量参数。
一个可能得请求：
```http
QUERY /contacts HTTP/1.1
Host: example.org
Content-Type: example/query
Accept: text/csv
select surname, givenname, email limit 10
```
一个可能的对应响应：
```http
HTTP/1.1 200 OK
Content-Type: text/csv
surname, givenname, email
Smith, John, john.smith@example.org
Jones, Sally, sally.jones@example.com
Dubois, Camille, camille.dubois@example.net
```
如上只是一个示意，至于 “body”的格式是什么样的，还需要进一步的讨论。
via:
### 2024-08-28\[网站]
很多开源作者都不知道如何选取一个合适的开源许可证，基本就是随便弄一个，甚至压根没有。虽然说大多数这个东西并不会有什么问题，但是如果你的项目真的有价值，那么这个东西就会变得很重要。而这个工具可以帮助你选择一个合适的开源许可证。你只需要回答几个简单的问题，它就会给你推荐一个合适的开源许可证。
via:
### 2024-08-27\[网站]
一个特别有趣的吐槽网站，作者真的做了一个大家平时遇到过的垃圾网站，故事的开始是你想通过搜索引擎搜索一个东西。原谅我真的绷不住。
via:
### 2024-08-26\[网站]
google 出品的一个文字转播客的网站。上传文字，甚至直接贴一个网站的链接，它就会帮你生成一个播客。
我试了下，大概就是生成了几个主持人的对话。他们会模仿自己拿到了作者的文章投稿，然后进行讨论和介绍。最后你甚至可以对他围绕文章的内容进行提问，或者直接让他帮你总结一下。
实际用起来效果很一般。因为我平时都是将播客转为为文字，而不是将文字转为播客。不过如果你想玩玩，或者想练习下英语，那么这其实是一个不错的选择。另外它的背后是 google 的 ai 技术，所以还是值得期待的。
via:
### 2024-08-25\[网站]
一个让你当产品经理的工具。你描述下需求，直接帮你生成前后端代码，并且可以直接运行和部署。
via:
### 2024-08-20\[工具]
在一个地方牌几张照片，然后它就可以帮你生成一个全景照片，效果还不错。
via:
### 2024-08-18\[私有化部署]
一个开源的在线配音工具，提取视频中的语音，将其转化为其他语言，支持多种语言，支持多种音色。工具特别优化了对中文的支持。
部署好后就可以通过 web 来访问了，效果图：
via:
### 2024-08-17\[私有化部署]
一个开源且可自托管的 Heroku / Netlify / Vercel 替代品，可以用来部署你的应用，包含前端应用和后端应用。
via:
### 2024-08-16\[新闻]
《ECMAScript 错误安全赋值运算符草案》
之前我们可能会这么写代码：
```js
try {
// try expression
} catch (error) {
// catch code
}
// or
promise // try expression
.catch((error) => {
// catch code
})
```
而有了这个特性后就可以这样写：
```js
const [error, data] ?= expression
if (error) {
// catch code
} else {
// try code
}
```
它不仅仅免去了嵌套，使得代码更简洁，还避免了一些块级作用域问题。
由于目前还是草案阶段，后续 API 可能会有所变动，甚至根本无法通过。
via:
### 2024-08-15\[工具]
一个 TTS 工具，可以将文字转化为语音，支持多种语言，支持多种音色。
via:
### 2024-08-14\[工具]
部分代码工具提供了动态 IP， 你可以自己选择 IP 地址。这款工具的优势在于 IP 可以更加精确，目前可以精确到城市级别。另外有多种收费规则，基于使用量，基于时间收费等。
via:
### 2024-08-12\[好文]
中国的高级资格「系统架构设计师」的考试应该如何准备，这篇文章给出了一些建议，比如要了解考试的内容，要有一定的实践经验，要有一定的技术深度等等。
via:
### 2024-08-11\[工具]
ChatTTS 是一个 ai 工具，可以将文字转化为语音，支持多种语言，支持多种音色。
其最大的特点是支持笑声，停顿等等，让语音听起来更加自然。基本上听不出来是机器生成的，而就像是真人在说话。这让我不免想到将来反诈骗是不是更加困难了。
如果你不想私有化部署，只是想试试，这里有一些基于它的衍生品，大家可以直接尝试使用，via:
虽然目前的用法需要你输入控制字符 \[laugh\_0] \[break\_4] 等等，但是我相信不久的将来，它就可以根据上下文和预制的一些参数自动插入控制字符，而最大限度减少人为的参与。
via:
### 2024-08-02\[工具]
Stirling PDF 是一个自托管的 pdf 工具，它可以帮助你修改，合并，转化 pdf 文件。
via:
### 2024-08-01\[好文]
openai 官方提供的 node 版本的 sdk，可以方便的调用 openai 的 api，支持所有的 model，比如 gpt-3.5-turbo。
```ts
import OpenAI from 'openai';
const client = new OpenAI({
apiKey: process.env['OPENAI_API_KEY'], // This is the default and can be omitted
});
async function main() {
const chatCompletion = await client.chat.completions.create({
messages: [{ role: 'user', content: 'Say this is a test' }],
model: 'gpt-3.5-turbo',
});
}
main();
```
同时也支持上传文件。
```ts
const fileList = [
createReadStream('/home/data/example.pdf'),
...
];
const batch = await openai.vectorStores.fileBatches.uploadAndPoll(vectorStore.id, fileList);
```
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2024-05
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-05
### 2024-05-31\[好文]
一般我们会将自己的网络服务托管到第三方。他们一般会负责保护你的服务不受攻击，或者收到攻击的时候能够及时恢复。
但是如果你是自托管，那么很多问题都需要自己考虑，其中最重要的就是安全问题。包括但不限于数据安全，病毒攻击，DDOS 攻击等。
via:
### 2024-05-29\[好文]
上次给大家介绍了一个下载 bilibili 视频的工具，今天给大家介绍另外一个工具 cobalt，不仅可以下载 bilibili 视频，还可以下载很多其他视频网站的视频，比如 youtube。使用方式基本一样，只需要输入视频的地址，然后就可以下载了。 代码是开源的，仓库地址：
via:
### 2024-05-28\[好文]
一个利用 AI 给视频自动添加字幕的工具，这个工具可以帮助你快速给视频添加字幕。我自己试了一个视频，不知道为什么视频后半段是没有字幕的，前半段效果还不错。
这个工具免费版的话只能是 720 P 并且不能去水印，如果想要更高清的视频，或者去水印，需要付费。
使用方法很简单，你只需要上传一个视频，然后它就会自动给你生成字幕，你可以选择字幕的样式，然后就可以下载了。
via:
### 2024-05-27\[好文]
看完《2024 年开始使用的 10 个现代 Node.js 运行时功能》 我越来越觉得 nodejs 像 deno 靠拢了。其也加入了 native lib 和 权限控制等。
via:
### 2024-05-24\[好文]
github 有一个漏洞，使得一些人利用这个漏洞钓鱼。这个漏洞是这样的，当你在 github 上传一个附件，那么这个附件就属于这个仓库。因此攻击者可以去一些权威仓库，比如 react 下面上传一个恶意附件，然后将生成的地址发给别人。别人一看地址来自 react，就会认为是安全的，然后下载这个附件，这样就会被攻击者利用。
via:
### 2024-05-23\[网站]
一个教你在网络这个黑暗森林里保护自己隐私的网站，里面有很多关于网络安全的知识，比如如何保护自己的隐私，如何防止网络钓鱼等。
对我来说学到的点包括：
* 如何检测蓝牙追踪器
* tor 浏览器 和 whatsapp 的安全性
* metadata 以及 metadata 是如何暴露你的隐私的
* 。。。
另外这个网站提供了一些隐私保护的工具，包括但不限于浏览器，dns，云服务，vpn，密码管理器等。
via:
### 2024-05-22\[好文]
一个非常好看的美化 json 的工具。如果你有“在网页中展示 JSON 数据”的需求，那就可以考虑使用。使用方式非常简单，支持所有主流浏览器。
via:
### 2024-05-16\[好文]
一个 OBS 的插件，可以在直播的时候显示你的键盘输入，这样观众就可以看到你的键盘输入了。这个插件支持 windows 和 linux。除了键盘输入显示，它还支持鼠标输入显示，手柄输入显示。
via:
### 2024-05-15\[技巧]
网络钓鱼危害非常大，你的隐私，你的资金都会因为网络钓鱼而受到威胁。
然而对待网络钓鱼实际上并没有很有效的方法，因为网络钓鱼的手段非常多样，而且很难被检测出来。
U2F物理加密密钥是一个很好的解决方案，它可以防止网络钓鱼。而做到这一点需要：
1. 一个支持 U2F 的网站，比如 Google
2. 一个 U2F 物理密钥，比如 yubikey
它的原理大概是这样的：当你登录一个支持 U2F 的网站时，网站会要求你插入你的 U2F 密钥，然后你按一下 U2F 密钥上的按钮，这样网站就可以确认你是真的拥有这个密钥。你首次 U2F 登录的时候它也会将你的账号和物理秘钥进行绑定，后面就算钓鱼者通过某种方式获取到你的密码，也无法登录你的账号，因此它没有你的物理密钥，认证不通过。
### 2024-05-14\[好文]
如果你有辅导孩子的需求，那么你可以将数学题截图上传到这个网站，然后它会自动给你解答，底层基于 chatgpt4，而且是免费的。你也可以直接输入题目描述进入代替上传图片。
via:
### 2024-05-13\[好文]
上次向大家推荐了一个下载 bilibili 视频的网站。这次是一个下载 bilibili 视频**桌面客户端**，使用 flutter 编写，支持 macos 和 windows。
via:
### 2024-05-12\[好文]
和使用草料等工具生成二维码（qrcode）类似，我们也可以使用一些工具生成条形码（barcode）。这个**在线工具**就可以帮助你生成带有任意信息的条形码。
via:
### 2024-05-08\[好文]
你从网上下载了一个文件，但是你如何确定这个文件是不是被篡改过呢？一般来说，文件作者可以提供一个签名文件，作者用自己的私钥对文件进行签名，然后你可以用作者的公钥来验证文件的签名。这样你就可以确定文件是否被篡改过。
而 GPG 就是一个非常好的工具，可以用来签名文件，验证文件的完整性，以及加密文件。这个视频介绍了如何使用 GPG 签名文件或者验证文件的签名。
MACOS 可以用 gpg Suite，windows 可以用 gpg4win。
via:
### 2024-05-07\[知识]
node 22 中的新功能 register，register 方法可用于注册导出一组钩子的模块。钩子是 Node.js 调用的函数，用于自定义模块解析和加载过程。导出的函数必须具有特定的名称和签名，并且必须作为命名导出导出。
```js
// hooks.js
export async function initialize({ number, port }) {
// Receives data from `register`.
}
export async function resolve(specifier, context, nextResolve) {
// Take an `import` or `require` specifier and resolve it to a URL.
}
export async function load(url, context, nextLoad) {
// Take a resolved URL and return the source code to be evaluated.
}
```
如上代码，hooks.js 导出了三个函数，initialize，resolve 和 load。这三个函数分别用于初始化，解析和加载模块。当模块被初始化，解析，加载的时候就可以执行这三个函数。
为了让所有模块都可以被作用到，注册功能越早越好，尤其是入口文件也要被注册到。那我们就可以使用 node 的 import 指令来完成。
```bash
node --import ./register-hooks.js ./my-app.js
```
import 会在加载入口文件之前，先加载 register-hooks.js，这样就可以保证所有模块都可以被注册到。
更多用法参考：
基于这个功能，node 就可以很容易地实现 web 中的 HMR 效果了，比如 就利用 node 的 register 功能实现了 HMR。
### 2024-05-06\[好文]
通过红外线 led 灯来躲避夜市摄像头的监控，这个想法真的很有意思。
via:
### 2024-05-05\[好文]
jq 是一个非常好用的 json 处理工具，但是它只能在命令行中使用，如果你想在 nodejs 中使用 jq，那么可以使用 node-jq 这个工具。node-jq 就是基于 jq 封装的一个库。
```js
const jq = require('node-jq')
const filter = '.abilities[].moves'
const jsonPath = '/path/to/bulbasaur.json'
const options = {}
jq.run(filter, jsonPath, options)
.then((output) => {
console.log(output)
/*
{
"name": "heartgold-soulsilver",
"power": "10"
},
{
"name": "platinum",
"power": "50"
},
{
"name": "diamond-pearl",
"power": "99"
}
*/
})
.catch((err) => {
console.error(err)
// Something went wrong...
})
```
如上代码，我们可以使用 node-jq 来过滤 json 文件。
via:
### 2024-05-04\[工具]
一个在线的免费在线转换文字为语音的工具，你可以将文字转换为语音，然后下载到本地，支持多种语言。
一次限制 2000 个字，实际上基本够用。
via:
### 2024-05-03\[工具]
一个将 ai 生成的回答“润色”，使其更加自然的工具。
via:
### 2024-05-02\[工具]
只需要一行命名就可以将 sqllite 数据库文件变成可通过 web 访问的网站。
```bash
sqlite_web /path/to/database.db
```
其中 db 文件可通过工具导出。
via:
### 2024-05-01\[好文]
《【剧透】电影《怪物》时间线完整还原和三视角叙事结构分析》这篇电影解析写的太好了，简直教科书级别。
作者从多个视角，多个时间线分析了这部电影，让我有种玩 RPG 游戏的感觉。同时也增加了多对电影里很多细节的理解。非常棒，希望我以后也能写出这样的电影解析。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2024-04
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-04
### 2024-04-30\[工具]
一个像素级别的 diff 工具，可以帮助你比较两个图片的差异。或许可以用来分析白屏问题，或者是图片是否加载成功等。
via:
### 2024-04-29\[工具]
和上一个工具有点像，也是提取视频下载地址的，只不过这个不针对某个特定网站，而是利用 chrome 的 devtools 来提取视频地址。因此好处是使用范围更广，坏处是精细化程度可能不如专门针对某个网站的工具。
via:
### 2024-04-28\[工具]
bilibili 手机端是可以下载视频的（部分视频由于版权限制也无法下载），但是电脑端就不行了。这个网站可以帮助你下载 bilibili 视频，你只需要输入 bilibili 视频的地址，然后点击“提取”，等待分析完成后，点击“下载”就可以下载视频了。
via:
### 2024-04-27\[工具]
一行命令直接将你的命令行分享给别人，让别人可以直接通过浏览器访问你的命令行。这对于远程调试，教学，合作等还是蛮有用的。比发文字图片告诉对方如何操作效率高多了。
via:
### 2024-04-24\[新闻]
TestCafe v3.6.0 可以直接拿到 CDP（chrome devtool protocol） 链接，这样你就可以直接通过 CDP 来和 chrome 浏览器通信，做到更多 TestCafe 本身不支持而 CDP 支持的功能。
```js
fixture `Get current CDP session`
.page('https://devexpress.github.io/testcafe/example');
test(`Get current CDP session`, async t => {
const mainWindowId = await t.testRun.activeWindowId;
let clientCDP = await t.getCurrentCDPSession();
await t.expect(clientCDP.webSocketUrl).contains(mainWindowId);
}
```
via:
### 2024-04-23\[工具]
previewjs 是一个 IDE 插件，通过它可以让你在你的 IDE 中预览 UI 组件， 如果你了解 Storybook，那么你就可以很快上手 previewjs。 实际上通过 previewjs 甚至直接生成 Storybook 文件，实现和 storybook 的无缝衔接。
对不熟悉 storybook 的同学我简单介绍下它。storybook 是一个 UI 组件的开发环境，它可以让你独立的开发 UI 组件，然后通过 storybook 来预览你的 UI 组件。通过 storybook 你可以很方便的查看 UI 组件的各种状态，比如 hover，active 等。组件的 props 也可以通过 storybook 来调整，最后这些属性组合什么的可以作为一个个 user case 来展示，也叫做用户故事（Storybook）。
下面这个视频展示了 previewjs 的功能，你可以看到它是如何在 IDE 中预览 UI 组件的，是如何修改代码，然后实时预览的。
如果你要做一个类似的插件，其实也不难。核心只要：
1. 拿到当前的组件代码，然后调用库的 api 来 render 就可以了，比如 react 的话，你可以用 react-dom 的 render 方法来 render 你的组件。
2. 至于下面的面板： Story，console，properties。这其实 vscode 等编辑器都有专门的文档告诉你怎么实现。至于展示的数据从哪里来，当前是解析组件的 props 类型定义之类的。
3. 最后就是监听代码变化，然后重新 render。
总的来说，我认为它是**和 wallaby.js 一样好用的工具，都是让你更快的看到你的代码的运行结果。** 而这种快速反馈正是提高开发效率的关键。
via:
### 2024-04-22\[工具]
由于我经常用 markdown 写一些教程，因此常常会想：“如果 markdown 中可以直接嵌入代码，让文章既有代码又可以交互多好。”
实际上这并不难实现。由于我写的 markdown 最终都是通过一些工具转成 html 来展示（比如我的博客）。因此只需要按照一定格式去写代码，然后将你的 markdown 编译一下，取出对应代码，将其插入到 html 对应位置即可。
只是做这个插件需要时间，做好后每次写文章也会多很多工作量，因此就没有做。但是如果你有这个需求，可以参考这个工具，它可以让你在 markdown 中嵌入代码，然后通过一个插件来实现代码的交互。
其直接内置了一些 UI 库和 helper 函数，让你可以很方便的实现代码的交互。当然你也可以自己引入你的库，然后实现你想要的效果。
via:
### 2024-04-18\[工具]
figma 是一个非常好用的设计工具，同时它的插件生态也非常丰富，你可以通过插件来扩展 figma 的功能。这是因为 figma 丰富的接口设计，figma 提供了 widget api，rest api 和 plugin api 来让扩展 figma 变得非常容易。
* widget api：可以让你在 figma 中嵌入 ui 组件。
* rest api：可以让你通过 restful api 来操作 figma 的文件，节点等。
* plugin api：可以让你通过 JavaScript 来操作 figma 的文件，节点等。
figma 的插件类似于浏览器的插件，你可以通过插件来实现一些自动化的操作，比如自动生成代码，自动生成图表等。也是用 JavaScript 来编写的。
所谓万事开头难，如果你想自己写一个 figma 插件，看官方文档不那么容易上手。那么这个工具可以帮助你快速创建一个 figma 插件项目。
使用它可以快速生成 typescript 项目，也可以生成 react 项目，让你可以专注于业务逻辑的实现。
via:
### 2024-04-12\[工具]
准备好你的数据库，执行 `npx dashpress`， 就可以生成一个完整的后台管理系统，包括前端和后端。体验 demo：
via:
### 2024-04-11\[网站]
chatgpt 3.5 终于可以免费使用了，无需登录即可使用。但是对于 4.0 版本，还是需要登录付费使用的。
via:
### 2024-04-10\[技巧]
quickjs 是一个小型的 JavaScript 引擎，它支持 ES2020 标准，可以作为嵌入式脚本引擎使用。它的特点是小巧，快速，可以作为一个库嵌入到你的应用中。
但是你知道吗？它还支持编译为 wasm，这意味着你可以在 JS 引擎中运行 quickjs 来当做沙箱执行 JS 代码（如果你愿意的话也可以继续套娃）。
via:
### 2024-04-09\[工具]
如果你想在 node 中运行 deno 引擎， deno 引擎再运行 JS（或者 TS） 代码，那么 `node-deno-vm` 这个工具可以帮助你做到这一点。
什么情况下会用到这个工具呢？比如你想做一些权限文件读写等权限控制，就可以使用。这是因为 deno 引擎的权限控制更加严格，而 node 在这方面做的不好。
它的原理是用 node 的 spawn 来启动 deno 引擎，然后通过 websocket（deno 目前不支持 IPC） 通信来执行代码，将 websocket 的 url 通过参数传给 deno，deno 构建 websocket 客户端，然后通过 websocket 来通信。
via:
### 2024-04-08\[工具]
2022-03-04 给大家推荐了一个工具 chrome-extension-cli，这个工具可以帮助你简化 chrome 插件的开发。
今天给大家推荐一个类似的工具，个人感觉也更加好用。你不仅可以用它来开发新的 chrome 插件，还能用它来开发调试现有的 chrome 插件。
via:
### 2024-04-02\[网站]
tradingview 是一个提供经济数据的网站，它提供了各种股票，期货，加密货币市场的图表，指标等。
当然有些经济指标是有很多水分的，大家注意分辨。
值得一提的是，虽然大部分数据是免费的，但是有些数据是需要付费的，比如一些高级指标，高级图表等。你可以使用部分加密货币直接购买，加密货币购买方面是由 [coinbase](https://www.coinbase.com) 提供支持。
如果你只想看加密货币的数据，也可以直接使用 [coinmarketcap](https://coinmarketcap.com)，它提供了更加专业的加密货币数据。
via:
### 2024-04-01\[网站]
最近 web3 特别多空投（airdrop），但是消息都比较分散，这个 metamask 钱包提供的功能可以帮助你识别你有资格参与的空投。
可惜的是很多链都不支持，比如 solana，sui 等，期待后续完善吧。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2024-03
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-03
### 2024-03-31\[好文]
Web3 是一个新兴的概念，它是基于区块链的下一代互联网。它的核心思想是去中心化，让用户拥有自己的数据，而不是被大公司控制。
本文将详细介绍Web3 DApp开发的架构、技术，以及使用哪些工具，并给出完整示例。文章涉及
* 区块链：以以太坊（Ethereum）为主流，也包括Solana、Aptos等其他非EVM链。区块链本身是软件，需要运行在一系列节点上，这些节点组成P2P网络或者半中心化网络。节点不仅负责接收新的输入并生成新的区块，还需要存储区块链运行时产生的所有数据，并负责同步、对外提供查询等RPC服务。
* 钱包：帮助用户管理自己在区块链上资产的软件，加密存储用户的私钥。当用户需要和区块链交互时，就需要用到私钥签名；
* 智能合约：运行在区块链上的一段托管程序，主要用来和外部账户交互；
* UI：这里特指前端页面，因为直接通过RPC调用合约仅限个别高级用户，普通用户仍需要一个前端页面，并通过JavaScript脚本配合钱包签名与合约交互。
文章可贵的地方在于你可以根据它从头到尾开发一个 web3 应用，虽然并没有讲如果使用钱包以及如何签名等内容，但是这些内容网上资料很多，大家可以自行搜索。
via:
### 2024-03-25\[好文]
一个介绍如何在你的 IDE 中使用 GitHub Copilot 的文章。它介绍了一些使用技巧，最佳实践等等。
对于我来说，最有用的两条是：
* “1. Open your relevant files”。我之前以为 copilot 会自动扫描本地文件。但实际上它只会扫描本地中打开的文件。
* “10. Use the @workspace agent” 使用 workspace 指令可以让 copilot 在整个项目中搜索，而不是网络上，这样可以针对你项目进行一些响应。比如你可以问“项目的类型定义写在哪个文件”等等。
via:
### 2024-03-20\[工具]
oxc 是一套 JavaScript 工具集合，用 Rust 写的。比如用于 lint 的 oxlint， 用于构建的 rspack 等等。
via:
### 2024-03-19\[网站]
FIRE(Finance, Independence, Retire Early) 是一个理财自由的概念，它的核心思想是通过投资和理财，让自己的被动收入大于支出，从而实现财务自由。
这里有一个网站，它可以帮助你计算 FIRE 的时间。你可以输入你的年龄，目前的资产，每年的支出，以及你的投资收益率，然后它会帮你计算出你实现 FIRE 的时间。实际上除了输入这些信息，你还可以输入两个额外信息：通货膨胀率和稳定年收入。
如果你已经30岁以上了，那么考虑 70 年基本也就是极限了。比如你的投资收益率是 4%，通货膨胀率是 2.229%（中国近十年通胀率平均在 2.229% 左右），稳定年收入是 30000，每年需要花 12w，那么要活 70 年则需要大约 350w 本金。你可以通过这个网站来计算你的 FIRE 时间。
via:
### 2024-03-15\[工具]
之前公司做发布系统，有一个需求是要在浏览器中直接访问服务器的终端。用户可以直接在浏览器访问服务器的终端，而不需要通过 ssh 客户端。直接集成到了发布系统，非常方便。
它的原理类似于今天介绍的这个工具 webtty。webtty 是一个基于 Web 的终端，它可以让你在浏览器中直接访问服务器的终端。
via:
### 2024-03-14\[好文]
线上代码大多会经过 sourcemap， 定位问题比较困难。比较有名的系统是 sentry，但是它是收费的。另外大家可能对 sentry 是如何工作的比较好奇，那么这篇文章就比较适合你了。
这篇文章介绍了如何使用 sourcemap 来还原，帮助大家更好的定位问题。 并提供了一些实际的例子 ，大家甚至可以直接使用这个系统。
via:
### 2024-03-13\[工具]
Million Lint 处于公开测试阶段，它通过静态编译 + 动态运行的方式，让你能够直接在 IDE 中看到每一个组件的耗时情况，非常的方便。
官方的介绍：优化 React 性能，让您的 React 在几分钟（而不是几个月）内速度提高 70%。当然这个数字仅仅是其内部测试的结果，并且是相对简单的程序，大家可以自己试试，欢迎大家来给我反馈你们项目的实际效果。
官方博客对其进行了详细介绍，大家可以通过这个链接查看 。
via:
### 2024-03-03\[插件]
“大声朗读：使用文本转语音阅读网页” 是一个 Chrome 插件，它可以帮助你将网页上的文字转换为语音，然后朗读出来。
有的时候面对大量文字，我们可能会感到疲劳，这个时候我们可以使用这个插件，让它帮助我们朗读，这样我们就可以不用亲自阅读，而是听它朗读。
via:
### 2024-03-02\[工具]
系统信息 (System Information) 是一个用于 Node.js 环境下获取系统信息（如 CPU、内存使用情况、磁盘空间、网络状态等）的库。
它使用简单，跨平台，可以获取大量的信息，包括如下几个关键点：
* 可以以各种格式（JSON、HTML、Markdown 等）输出信息
* 可以获取 CPU、内存、磁盘、网络、操作系统等方面的信息
* 支持所有主流的操作系统（包括 Windows、MacOS 和 Linux 等）
* 输出的信息包含详细的数据，如 CPU 使用率、内存空闲量、磁盘剩余空间等
* 功能齐全，支持许多高级功能，如获取 Docker 容器列表、监视嵌套虚拟化等
但是也有一些缺点。我们之前使用过它，发现尽管我只使用了它的一小部分功能，但是它还是使我的包体积增加了很多。因此如果你的项目对包体积有要求，那么你可能需要考虑一下。可以选择参考它的源码，然后在自己仓库中实现一些功能。也可以考虑选择其他的库。
via:
### 2024-03-01\[技巧]
OPML（大纲处理器标记语言）是一种允许您与其他应用程序共享您在 Feedly 中关注的 RSS 提要的格式，本质上就是一种标记语言。
它的格式非常简单。大家可以通过这个链接了解一下 。
如下是一个简单的例子：
```xml
Subscriptions
```
通过它，我们可以在不同的 RSS阅读器之间迁移我们的订阅。比如我们可以在 Feedly 中订阅一些博客，然后通过 OPML 导出，然后导入到其他的 RSS 阅读器中。也可以将自己的订阅分享给其他人，只要导出一份 OPML 文件就可以了。
如果你想导入导出你的 RSS 订阅，或者想分享或者取得他人的订阅，那么使用 OPML 是一个非常好的选择。
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2024-02
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-02
### 2024-02-29\[字体]
《京華老宋体》是一个特别好看的字体，有浓厚的中国风，适合用来做一些中国风的设计。
不过实际使用上来看，锐化的效果不是特别好，不知道是不是 mac 设备的原因。
via:
### 2024-02-28\[网站]
输入 ts 类型，帮你生成 ts 类型的图表，可以帮助你更好地理解 ts 类型。
via:
### 2024-02-27\[工具]
kiss-translator 是一个双语对照翻译工具，有对应的浏览器和油猴脚本。
对于有一定英语背景但不是特别好的人来说，**双语对照**可以帮助你更好地理解英文文章，提高你的英文阅读能力。
via:
### 2024-02-26\[教程]
一个超级实用和简短的 svg 教程，画面非常精美。
一共 25 个“关卡"。
里面讲了 svg 中如何用 g 来 group 元素，如何处理事件，如何使用动画，如何使用滤镜高阶等等。
via:
### 2024-02-25\[工具]
我们见过不少 markdown 转化成 pdf，epub 的工具。但是反向地将 pdf，epub 转化成 markdown 的工具就比较少了。
这个工具借助了人工智能，可以帮你将 pdf，epub 转化成 markdown。
via:
### 2024-02-23\[网站]
一个可以帮你保持屏幕常亮的网站，可以帮助你在一些需要屏幕常亮的场景下使用。
其基本原理是使用了 noSleep.js 这个库，这个库可以阻止屏幕自动关闭。
[noSleep.js](https://github.com/richtr/NoSleep.js/blob/master/src/index.js) 的原理是播放一个无限循环的假视频，让浏览器错误地认为你在看视频，从而阻止屏幕常亮。不过由于 浏览器的 [navigator.wakeLock](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/wakeLock) API 的出现，这个库会优先使用这个 api 来阻止屏幕常亮。
via:
### 2024-02-22\[好文]
学习一个东西就是要从大的方向高屋建瓴地去理解。
这篇文章就将 web 应用从是否动态和是否在线两个维度进行了分类，然后讲解了每一种类型的特点。
两个维度，一共分了 2 \* 2 = 4 种类型。
并且拿具体的知名的网站作为例子，讲解了每一种类型的特点，以及什么情况下使用什么样的技术栈构建什么样的类型 web 应用。
via:
### 2024-02-21\[好文]
chrome 出了很多的 web vitals 监控指标，比如 First Contentful Paint，Cumulative Layout Shift，但是这些指标是如何收集的呢？
说实话很难收集。而 chrome 修改了 performance API，可以帮助我们直接收集这些指标。
比如如下代码就可以手机 Cumulative Layout Shift。
```js
const observer = new PerformanceObserver((list) => {
let cumulativeLayoutShift = 0;
list.getEntries().forEach((entry) => {
// Don't count if the layout shift is a result of user interaction.
if (!entry.hadRecentInput) {
cumulativeLayoutShift += entry.value;
}
console.log({ entry, cumulativeLayoutShift });
});
});
// Call the Observer.
observer.observe({ type: "layout-shift", buffered: true });
```
via:
### 2024-02-19\[工具]
《Remix 入门实战》讲的内容比较浅显，但是却可以让你快速上手 Remix，了解它的基本使用方法。Remix 是一个新的 React 框架，它的目标是让开发者更容易地构建出高质量的 Web 应用。它的特点是开箱即用，自带了很多功能，比如路由、状态管理等。这篇文章是一个入门实战，通过一个简单的例子，让你快速上手 Remix。
如果有一些基础的话，阅读时间大概半个小时到一个小时。
via:
### 2024-02-18\[好文]
相信大家都看到过视频下方有一些 ai 工具对视频内容进行总结的情形。这篇文章就告诉你如何对视频内容进行总结，生成一些文字内容。
主要用到了 OpenAI API 和 the LangChain。
via:
### 2024-02-17\[好文]
目前很多监控摄像头都是 wifi 传输的，本身没有内置 sd 卡，导致你可以简单地使用 wifi 干扰器来将其干掉。
因此我的做法就是使用 sd 卡 + wifi，并且电池+电源双保险。不管你是切断电源还是干扰 wifi，都无法干掉我的摄像头。当然也有很多别的方式罢了，只是这帮我们多加了一层防护。
via:
### 2024-02-16\[好文]
sytax 的一期节目，标题是《how-to-be-productive》
以下是我提取的博客重点内容：
1. 最重要的是你首先要检查你当前的习惯。是什么阻碍了你？你在做什么？日常生活中有哪些事情让你感到困惑？
2. 安排专注时间，排除干扰，专注于具体的一件事情。这个时间段不做其他事情，比如社交媒体，邮件等等，不要让别人打扰你。
3. 专注的时间最好是固定时间。比如可以用番茄工作法，25 分钟专注，5 分钟休息。专注时间最好是创造性的工作，也就是说专注时间里创造性的工作的优先级更高。
4. 改变习惯可能是很难的，但是轻微的环境变化可以改掉坏习惯。比如你可以把手机放在另外一个房间，这样你就不会一直看手机了。
5. 你有一堆的事情要做，如何排序？按焦虑程度对待办事项进行排序
6. 日历是最好的生产力工具。 这里其实关键点在于 deadline。你可以把 deadline 放在日历上，然后扫一下你就知道今天要做什么了。这个技巧我用了好久，现在一般我也会结合使用月度计划，周计划。而日历在我这里更像是部分日计划。
7. 这条是我加的。如果完成了自己的计划，要给自己奖励。这个奖励可以是一些小的东西，比如吃一顿好的，看一部电影等等。这样可以让你更有动力去完成自己的计划。
via:
### 2024-02-15\[工具]
pa11y 是一个 web 端无障碍测试工具，可以帮助你测试你的网站是否符合无障碍标准。
你可以使用 cli，也可以使用 api 来测试。
cli 的使用方式如下：
```bash
npx pa11y https://example.com
```
api 的使用方式如下：
```js
const pa11y = require('pa11y');
pa11y('https://example.com').then((results) => {
// Use the results
});
```
扩展性也是有的，你可以通过 action 自定义一些浏览器的操作，这些操作和 puppeteer 的操作类似。
via:
### 2024-02-14\[新闻]
JSR，Deno团队的新包注册表，旨在解决npm的限制。
用户可以直接编写 TypeScript 发布到 JSR，JSR 会完成 ts 编译，ESM 转义等操作。而且据说还更加安全。
via:
### 2024-02-13\[好文]
《How does B-tree make your queries fast?（B 树如何让您的查询更快？）》这篇文章讲解了 B 树的原理，以及为什么 B 树可以让你的数据库查询更快。
文章总结了两个原因：
1. every node may contain more than one value(每个节点可能包含多个值)
2. inserting a new value is followed by a self-balancing algorithm(插入新值之后是自平衡算法)
这是我见过的 B 树讲解最直观最好理解的一篇文章，图文并茂，讲解清晰。
via:
### 2024-02-12\[好文]
vercel 的产品好多体验都不错。比如今天介绍的这个。它借助于 react server components 和 openai，可以让你在服务端渲染 react 组件，然后再将其传递给客户端。用户可以用纯文本或者图片输入，然后回复给用户一个可以交互的程序，而不是传统的纯文本回复，极大增强了用户体验，也扩展了 openai 产品的使用场景。
你也可以直接使用这套 sdk 来构建自己的交互式程序。
```js
import { render } from 'ai/rsc'
import OpenAI from 'openai'
import { z } from 'zod'
const openai = new OpenAI()
async function submitMessage(userInput) { // 'What is the weather in SF?'
'use server'
return render({
provider: openai,
model: 'gpt-4',
messages: [
{ role: 'system', content: 'You are a helpful assistant' },
{ role: 'user', content: userInput }
],
text: ({ content }) => {content}
,
tools: {
get_city_weather: {
description: 'Get the current weather for a city',
parameters: z.object({
city: z.string().describe('the city')
}).required(),
render: async function* ({ city }) {
yield
const weather = await getWeather(city)
return
}
}
}
})
}
```
via:
### 2024-02-08\[好文]
tinyMCE\@6 是一个富文本编辑器，它有很多的功能，比如图片上传，表格编辑，代码高亮等等。
使用起来也非常简单，初始化一下就可以直接用了。
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'emoticons',
toolbar: 'emoticons',
a_plugin_option: true,
a_configuration_option: 400
});
```
它的最大特点是插件化，你可以根据自己的需求来选择插件，比如 save 插件，全屏插件，emoji 插件等等。甚至还有 ai 插件，
相比于新兴的编辑器，它的优势在于稳定，功能齐全，插件丰富。缺点就是体积比较大，而且有些功能可能不够现代化。
via:
### 2024-02-7\[好文]
这篇文章讲解了 chrome extension 是如何滥用权限来监控用户的行为，比如监控用户的点击行为，监控用户的输入行为等等。
这提示我们在使用 chrome extension 的时候，一定要注意权限，不要随便安装一些不知名的插件。
我对插件非常挑剔，只会安装很少的插件，同时也会注意权限。
但是这其实很难避免被监控，因为插件是会静默更新的，你不知道它更新了什么。对此其实我也比较无奈。大家如果有好的解决方法，欢迎留言告诉我。
因此最主要的方式应该是浏览器厂商加强审核，不要让一些恶意插件进入到插件商店。同时对所有敏感权限都要明确提示用户(类似于插件想要读取剪贴板时候的浏览器提示)。
via:
### 2024-02-06\[组件库]
daisyui 是一个 tailwindcss 的组件库，它提供了一些常用的组件，比如按钮，表单，卡片等等。
和其他组件库不同的是，它的组件是基于 tailwindcss 的，作为 tailwindcss 的插件进行安装。
```js
// tailwind.config.js
module.exports = {
//...
plugins: [require("daisyui")],
}
```
使用的时候，你可以直接在 html 中使用 tailwindcss 的类名，然后就可以使用这些组件了。 而不需要像其他组件库一样引入组件。
```html
```
原子化的类名，让你可以更加灵活地使用组件。
via:
### 2024-02-03\[工具]
rspack 出的辅助工具，可以帮你分析项目信息，打包信息，帮助你更好地了解项目的构建情况，做出优化决策。
lucifer PS：如果你也在做工具，不妨参考这个工具来做一个自己的辅助工具，帮助开发者更好地使用你的工具，同时也方便你收集用户的使用情况，定位问题等等。
via:
### 2024-02-02\[工具]
openai 出的文字生成视频的工具，可以生成文字对应的视频，可以用来做一些文字生成的视频，比如一些短视频，或者一些文字解说的视频。
大家可以根据 demo 体验一下，效果非常的惊艳！
via:
### 2024-02-01\[工具]
亚马逊出品的 JavaScript 运行时，是 V8，quickjs 的竞品，据说速度更快，有需要的可以看看。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2024-01
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2024-01
### 2024-01-31\[工具]
drizzle-orm 是一个用于操作数据库的无头 ORM，它可以帮助你更加方便地操作数据库。
之前我一直使用的是 waterline 和 prism。
via:
### 2024-01-30\[工具]
从代码中删除过时内容的价值是不可否认的。然而，找到它们是一项手动且乏味的工作。这就是 Knip 的用武之地。随着代码库的复杂性和规模的增长，自动化和全面的工具变得至关重要。
via:
### 2024-01-29\[工具]
给大家推荐几个 ai 聊天工具。
1. Google 出的 Google Gemini Pro，可以免费使用。地址：
2. perplexity 是我最早使用的 ai 聊天工具之一，同样免费使用。地址：[www.perplexity.ai](http://www.perplexity.ai)
3. glados 也支持集成 chatgpt。如果你使用了 glados 的服务，那么也可以免费使用。地址：
4. 如果有条件，可以直接使用 openai（主要是可能会限制某些区域的 IP 地址）。
5. 豆包。头条出的 ai 聊天工具，可以免费使用。地址：
6. copilot。如果你使用了 copilot，那么 copilot chat 也可以免费使用。比如我使用了 vscode，那么右下角就会出现一个 chat 的按钮，点击即可使用。
我个人更建议使用 3 和 6，这也是目前我在使用的两个工具。
### 2024-01-28\[好文]
Heat.js 是一个用于创建和管理热图的 JavaScript 库。热图是一种数据可视化技术，它使用颜色的强度来表示数据的大小或密度。类似于 Github 上的提交热图。
这个库的工作原理如下：
* 初始化：首先，你需要创建一个 Heat 对象。这个对象需要一个配置对象，其中包含了创建热图所需的所有信息，如元素的 id、热图的宽度和高度、颜色梯度等。
* 添加数据：一旦你有了一个 Heat 对象，你就可以开始添加数据了。数据是一个包含 x 和 y 坐标以及一个值的对象。这个值将决定该点在热图上的颜色。
* 渲染热图：添加完所有数据后，你可以调用 Heat.render 方法来渲染热图。这个方法会遍历所有的数据点，根据每个点的值和颜色梯度来确定其颜色，然后在相应的位置上画出一个颜色块。
* 更新和清除数据：你可以使用 Heat.clear 方法来清除所有的数据，或者使用 Heat.update 方法来更新某个数据点的值。
在代码层面，Heat.js 主要由以下几个部分组成：
* Heat 类：这是库的主要接口，用于创建热图、添加数据、渲染热图等。
* Gradient 类：这个类用于创建颜色梯度。它接受一个包含颜色和位置的对象，然后使用线性插值来创建一个连续的颜色梯度。
* Canvas 类：这个类封装了 HTML5 Canvas API，用于在 canvas 上绘制热图。
* Point 类：这个类表示一个数据点。它包含 x 和 y 坐标以及一个值。
via:
### 2024-01-22\[好文]
Refine 在设计上是 headless(无头)的，因此提供了无限的样式和自定义选项。
"headless" 指的是一个系统或框架没有预定义的前端界面。这意味着它不会限制你如何设计和实现用户界面。你可以使用任何你喜欢的技术和工具来创建用户界面，这就为样式和定制提供了无限的可能性。
在 web 开发中，"headless" 通常用于描述那些只提供 API（如 RESTful API 或 GraphQL API）而不提供预定义用户界面的后端系统。这种设计方式的优点是灵活性高，可以根据项目的需要选择最合适的前端技术。缺点是可能需要更多的开发工作，因为你需要自己从头开始创建用户界面。
via:
### 2024-01-19\[技巧]
如何清除 input 输入框历史下拉数据？
有时候我们在 input 中输入东西的时候会出现历史记录，这很容易泄漏隐私。一般的浏览器清除是无法清除这样的数据的。那么如何清除呢？
主要有两种方式：
1. 取消自动填充。
这里以谷歌浏览器为例，在浏览器地址栏输入：
```
chrome://settings/autofill
```
关闭自动填充表单即可（自动填充和密码下面的每一项都可以关闭），这样处理后所有网站下的 input 框都不会出现历史记录了。
2. 删除历史输入记录。
当已输入过的输入框中，点一下输入框就会自动带出先前所输入过的文字，接着当要删除某个文字记录时，只需将滑鼠滑到上方，再按 Shift+fn+Del 键(MAC)/Shift+Del 键(Win)，就可将它删除。
个人推荐第二种，毕竟第一种会影响其他网站的自动填充功能，并且无法再次开启的话仍然会再次泄漏隐私。
### 2024-01-18\[好文]
原文标题：《The Who, What, When, Where, Why and How of Image Optimization in Angular》。
本文结合 chrome 提出的若干关键浏览器指标，介绍了如何使用 angular 来优化图片加载。
angular 新增了 ngSrc 指令，它可以帮助我们更好地优化图片加载。这篇文章介绍了如何使用这个指令来优化图片加载。
这是 angular 团队与 chrome 团队合作成果！尽管你仍然可以自己去实现这个功能，但是这个指令可以帮助你更加方便地实现这个功能。结合 provider 可以更加精细化控制图片的加载策略。比如这里的 loaderParams。
```js
![]()
```
via:
### 2024-01-17\[工具]
bit 一种相对新的组件开发方式。 我在前一家公司就使用了 bit 来管理组件。它可以帮助你更好地管理组件，从而提高组件的复用性。
shadcn 和 radix 和 bit 有点类似。他们都强调弱组件库，他们都不是组件库。你需要什么组件，就添加什么组件。每一个组件都是独立的，可以单独发布，也可以单独使用。
radix 可以单独 install 单个组件。比如这样：
```bash
npm install @radix-ui/react-popover@latest -E
```
而 shadcn 则更干脆，你直接使用命令行，将组件源码下载到你本地，并安装组件的依赖。参考：
值得一提的是 shadcn 是 2023 年最火的 ui 组件集成工具。不过并不像 bit 一样你可以在上面开发组件。
via:
*
*
### 2024-01-12\[好文]
sms-active 是一个可以帮助你接收短信验证码的网站，它可以帮助你接收各种网站的短信验证码，从而帮助你注册各种网站。
这在：
1. 网站需要短信验证码的时候非常有用，比如你想注册一个网站，但是你**不想给他们你的手机号**，那么你可以使用这个网站来接收验证码。
2. 网站限定手机归属地必须是某个国家的时候，你可以使用这个网站来接收验证码。
这个网站是付费的。
via:
### 2024-01-11\[好文]
很多网站提供了 RSS 订阅，但是 RSS 的订阅地址并不是很好找，网站作者很少有一个认知，那就是：如果你提供了 RSS 订阅，那么大方地放在主页上，这样可以让更多的人知道你提供了 RSS 订阅。
你如果你使用 RSS 管理工具， 一定试过将一个你关心的网站添加到 RSS 订阅却发现找不到订阅地址。而其实网站提供了 RSS 订阅地址，只是藏的很深。因此网站作者在主页标签里明确告诉读者和 RSS 阅读器：”我提供了 RSS 订阅，你可以订阅我的 RSS“ 是一种非常好的做法。
我的博客就提供了这样的一个标签来告诉大家我提供了 RSS 订阅，你可以在这里找到我的 RSS 订阅地址。
```html
```
这篇文章 《Exposed RSS （公开的 RSS）》 就讨论了这个问题。
> 博客地址：
via:
### 2024-01-08\[工具]
oxlint 是一个用于检查 rust 代码的工具，它可以检查 rust 代码中的一些常见错误。相比 eslint 来说， 它更快，并且提示信息更加友好。
使用方法和 eslint 类似，集成到你的项目也非常的简单，可能就只需要几秒钟。不过它并不是 eslint 的替代品，目前还不支持插件。不过我相信它会越来越好用的。
via:
### 2024-01-07\[好文]
这是一篇关于如何在浏览器中实现一个协同编辑器的文章，它介绍了如何使用 OT 算法来实现一个协同编辑器。
OT 算法是一种用于解决协同编辑问题的算法，它的核心思想是将编辑操作转换为操作序列，然后在客户端和服务端分别执行这个操作序列，从而达到同步的目的。 实现上， 客户端和服务端通过 docReq 和 docRes 两个接口来进行通信。
如果你对协同编辑器感兴趣或者正在实现协同编辑，那么这篇文章是一个不错的开始，尽管这篇文章使用 GO 写的，但是重在领会思想。
via:
### 2024-01-04\[好文]
这篇文章介绍了如何在 mac 上使用两个 github 账号，这在我们同时使用公司和个人账号的时候非常有用。
通过这篇文章，我学到了：
1. 通过如下命令可以切换 ssh 验证使用的私钥
```bash
alias git_personal="(ssh-agent) && ssh-add ~/.ssh/personal"
alias git_work="(ssh-agent) && ssh-add ~/.ssh/work"
```
2. git config 文件可以使用 path 来指定配置文件位置。
3. git config 支持条件语句 `includeIf`
```bash
[includeIf "gitdir:~/"]
path = ~/.gitconfig-personal
[includeIf "gitdir:~/Work/"]
path = ~/.gitconfig-work
[core]
excludesfile = ~/.gitignore
```
via:
### 2024-01-03\[工具]
pix2tex - LaTeX OCR 是一个将图片转换为 LaTeX 的工具，它可以将图片中的公式转换为 LaTeX 代码，从而直接粘贴出来。
这在一些不提供复制功能的地方很有用。 虽然我认为网站应该自己提供复制功能，但是有时候我们也无法改变这些事实，所以这个工具还是很有用的。
不过可惜的是，这个工具还不是特别好用，算是勉强可用吧，毕竟是免费的工具。它的准确率还不是特别高，不过这个工具还是很有潜力的，我相信它会越来越好用的。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-11
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-11
### 2023-11-31\[新闻]
excalidraw 是一个在线的白板工具，可以帮助你快速绘制一些图形，比如流程图，思维导图等。最近他新出了一个根据文字生成流程图的功能，和其他工具相比，它生成后你还可以进一步编辑，比如改变颜色，改变形状等。这本质是一个 ai 助手。
不过这个功能目前每天只能使用 10 次，也没有一个很好的教程或者内置 prompt，因此使用起来还是有一些门槛的。
via:
### 2023-11-30\[文章]
ARIA 是一个被很多人忽视的东西，但是它对于一些残疾人来说是非常重要的。比如屏幕阅读器，如果你的网站没有良好的 ARIA 支持，那么屏幕阅读器就无法正常工作。
这篇文章收集了一些常见的 ARIA 角色，以及如何使用它们。
另外推荐一个 eslint 插件，可以帮助你检查 ARIA 角色是否正确使用。地址：
当你的网站搭建好了，也可以使用这个网站来检查你的网站是否有 ARIA 角色的问题：
via:
### 2023-11-29\[好文]
《Prettier's CLI: A Performance Deep Dive》 这篇文章讲解了 prettier 的性能优化过程，以及一些性能优化的技巧。
主要是关于匹配和缓存相关的内容，比如如何避免不必要的匹配，如何使用缓存等。
via:
### 2023-11-28\[类库]
Million.js 是一个极其快速且轻量级的 <4kb 虚拟 DOM，使 React 速度提高了 70%。 通过使用经过微调、优化的虚拟 DOM，Million.js 减少了 React 的开销。
可以理解为是一个让 React 组件以原始 JavaScript 的速度运行的类库。
它的原理是运行时通过 ref 获取真实 dom, 然后将 state 编译为 props 形式。这样 hoc 就可以控制组件不 render ，然后自己修改 dom （上一步通过 ref 获取到的）的方式来加快速度。
官方文档里有详细的介绍用法和底层原理，感兴趣的可以试试。
这个库功能上有点类似于 react 官方后续将要推出的 react forget。
via:
### 2023-11-27\[框架]
fresh 是一个基于 deno 的 web 框架。
从本质上讲，Fresh 是**路由框架和模板引擎的组合**，可在服务器上按需呈现页面。除了在服务器上进行实时 （JIT） 呈现之外，Fresh 还提供了一个接口，用于在客户端上无缝呈现某些组件，以实现最大的交互性。该框架使用 **preact 和 JSX** 在服务器和客户端上进行渲染和模板化。
via:
### 2023-11-26\[好文]
得益于浏览器提供的强大 API，如下简单的代码，就可以实现一个简单的录屏，并导出视频功能。
```js
const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
// start recording
recoder.start();
const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
// stop recording
recoder.stop();
});
// save record
recoder.addEventListener("dataavailable", (evt) => {
const a = document.createElement("a");
a.href = URL.createObjectURL(evt.data);
a.download = "capture.webm";
a.click();
});
});
```
via:
### 2023-11-25\[类库]
jest-image-snapshot 是一个 jest 插件，可以帮助你测试 UI 组件的样式是否正确。相比原生的 snapshot 测试，它基于渲染后页面进行像素级对比（可以自定义允许的像素误差），而且不对代码有任何要求，只要是浏览器可以渲染的就可以。
它扩展了 jest 的 expect 方法，你可以直接使用 expect(image).toMatchImageSnapshot() 来进行测试。
```js
const { toMatchImageSnapshot } = require("jest-image-snapshot");
expect.extend({ toMatchImageSnapshot });
```
使用:
```js
it('should demonstrate this matcher`s usage', () => {
...
expect(image).toMatchImageSnapshot();
});
```
via:
### 2023-11-24\[类库]
tencent design 是腾讯的一套 ui 组件库，支持 web，小程序，flutter（这算是一个亮点），可以帮助你快速搭建应用。
它的文档设计地很好，进入到某一个组件，可以看到这个组件对应的 issue 有多少，以及多少是 open 的，组件最近更新的时间，以及组件最早可用版本等非常有用的信息。
另外有指南来告诉你组件的最佳实践，也有实时预览（嵌入一个 iframe）。虽然这两个都是标配了，但是我还是从他的指南学到了一些东西。
via:
### 2023-11-23\[好文]
Preact 出了一个 singals 的状态管理库，大小仅为几 kb，但是功能却很强大。
原理类似 vue3 里的响应式，能够自动跟踪依赖，实现应用的局部更新。正因为如此 react 团队觉得其和 react 基本理念不一致，因此不会将其集成到 react 中。但是表示会有一种类似的东西推出。
singals 不再像 hooks 一样局限于函数组件，而是可以在任何地方使用，并且可以做到按需局部更新。感兴趣的可以看看这一个科普视频
via:
### 2023-11-22\[好文]
v8 是如何给字符串分配内存的？什么时候回收分配的内存？这里设计到很多性能方面的设计和考虑。
这篇文章详细地讲解了 v8 字符串分配的逻辑。
虽然内容用处不是很大，但是这篇文章的做事方法值得我们学习。学习一下作者是如何学习的，如果是让你去研究下 v8 字符串内存分配，你能做的和他一样好，甚至更优吗？
via：
### 2023-11-21\[好文]
chatgpt 允许你自己导入知识库，从而创建一个有专业知识的 ai。
比如你可以给它导入一本书， 然后问他任何关于这本书的问题。
更深入一点， 我们可以将某个网站做成知识库，导入进去，它就是这个网站的专家， 直接替代现在网站题目的 faq 或者人工智障机器人。
[gpt-crawler](https://github.com/BuilderIO/gpt-crawler) 可以帮助将任意网站只作为知识库输出一份 json，你只需要登录 openai 将其导入就可以快速生成有这样知识库的专业机器人。
via:
### 2023-11-19\[好文]
如何从零做一个拖拽的功能？
这篇文章你可以学到很多有用的和[指针](https://zh.javascript.info/pointer-events)有关知识。比如 setPointerCapture 是干嘛用的？也能学到很多设计思路。比如如果用户用的是触屏而不是鼠标怎么办？
via:
### 2023-11-18\[技巧]
之前 textarea 不能像 div 那样根据内容自动撑开。因此如果你只能使用类似 rows 属性给他指定高度，如果用户输入内容过多，那么就会隐藏一部分。
而新的 CSS 属性可以解决这个问题。只需要一行代码：
```css
textarea {
form-sizing: normal;
}
```
### 2023-11-14\[新闻]
新的 chrome (112 或之后的版本)升级了无头浏览器，现在无头浏览器不再会出现**真实浏览器和无头浏览器不一致的情况了**。
如果你在项目中使用了无头浏览器进行端到端测试，不妨进行升级一下。
via:
### 2023-11-10\[仓库]
一个关于 web3 的学习资料集合页，不仅有入门，也有实战，新闻媒体，工具等。
如果你想学习 web3，尤其是快速入门 web3 ， 这是一个还算不错的资料。
via:
### 2023-11-09\[仓库]
一个 waf 工具， 可以直接私有化部署。
想当年我也给我们公司做过 waf，也是花了至少几个月时间来完成的。如果你没这个预算，这个就是不错的选择。
配置要求也不高：
```
操作系统：Linux
指令架构：x86_64
软件依赖：Docker 20.10.6 版本以上
软件依赖：Docker Compose 2.0.0 版本以上
最小化环境：1 核 CPU / 1 GB 内存 / 10 GB 磁盘
```
via:
### 2023-11-08\[仓库]
facebook 开源的 docusaurus，社区算是比较活跃的， 基于 MDX，用户直接写 markdown， 帮你转化为网站，支持插件，主题，搜索等高级功能。
via:
### 2023-11-07\[仓库]
一个 docx 渲染器，原理是将 docx 里的 xml 格式转成 html
相对于 Canvas 渲染，这个实现方案比较简单，最终页面也可以很方便复制，但无法保证和原始 docx 文件展现一致，因为有部分功能难以在 HTML 中实现，比如图文环绕效果。
你可以将他直接集成到你的项目中，无需后端服务，无需付费就可以架设一个 word 解析网站。
via:
### 2023-11-06\[好文]
如果你是一个 react 库的开发者。不免会使用 npm link 来测试。而这样会因为使用了 react 两个不同的包副本。当我们运行 npm link 时，我们不仅需要链接我们的项目，我们还需要链接 react 和 react-dom 以确保只有一个副本。
使用 yalc 可以解决这个问题，yalc publish 会在本机上进行发布，而不会发布到 npm。
via:
### 2023-11-04\[网站]
一个在线网站， 可以帮你生成隐私声明网页。
如果你是一个工具开发者（比如浏览器扩展），并且会收集一些隐私数据，比如用户当前访问的网站地址，有很多提供商现在要求你提供的工具的隐私声明网页。
我的 chrome 插件最近就遇到了这个问题。于是我就使用了这个网站，不到一分钟就生成了，谷歌审核还真就通过了。
via:
### 2023-11-03\[库]
FFCreator 是腾讯视频团队开源的生成视频的 JS 库。通过它可以将图片，音频或者视频片段按照各种方式组合起来，从而形成一个视频。
使用 FFCreator 和 vue.js，可以开发可视化拖拽搭建短视频的 web 项目，使用就像 h5 搭建工具一样的简单。
via:
### 2023-11-02\[工具]
一个脚本工具，可以集成到 ci 中，自动将你的 markdown 翻译为多种语言。由于集成了 chatgpt，因此翻译质量也很好。
这里的翻译质量很大程度上取决于你的 prompt。让大家看看人家的其中一段 prompt 是怎么写的，大家可以作为参考。
```
You are a professional translation engine, please translate the text into a colloquial, professional, elegant and fluent content, without the style of machine translation. You must only translate the text content, never interpret it.
```
via:
### 2023-11-01\[库]
我们平时做前端开发的时候，不免需要 mock 数据。最简单的写法自然是代码中写死。但是这样不利于维护和复用。 比较常见的做法是：
1. 写一个 baseurl，将所有请求封装为 baseUrl 拼接的形式。这样只需要将 baseUrl 改为一个提供 mock 服务的服务器地址即可。
2. 启动一个代理。配置一个规则， 这个规则将当前请求的 baseUrl 改掉转发到一个提供 mock 服务的服务器。
msw 类似于 2，相当于在浏览器上直接启动了一个代理（原理是使用 service worker）。不同之处是，它不仅是代理， 也是 mock 服务器，本身可以配置规则直接返回数据。
参考代码：
```js
// src/mocks.js
// 1. Import the library.
import { http, HttpResponse } from "msw";
import { setupWorker } from "msw/browser";
// 2. Describe network behavior with request handlers.
const worker = setupWorker(
http.get("https://github.com/octocat", ({ request, params, cookies }) => {
return HttpResponse.json(
{
message: "Mocked response",
},
{
status: 202,
statusText: "Mocked status",
}
);
})
);
// 3. Start request interception by starting the Service Worker.
worker.start();
// Performing a GET https://github.com/octocat request in your application will result into a mocked response that you can inspect in your browser's "Network" tab
```
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-09
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-09
### 2023-09-26\[网站]
一个非常好用的编程语言互相转换的在线工具。
我试用了一下，效果非常好，应该有 AI 的加持。
我在刷题的时候，写题解需要提供多种编程语言就使用过这个工具，真的好用。
via:
### 2023-09-25\[插件]
一个油猴脚本。安装后可以直接在豆瓣读书中，下载对应的 pdf 和 epub 文件。
via:
### 2023-09-19\[好文]
《Design Trade-offs in Bundler: The Rationale Behind Creating Rspack 》是 rspack 的作者在字节对外的 github 组织下的一篇 discuss 分享。 讲述了为什么要自己开发 rspack，其解决了什么问题。
通过这个文章，我学习了两点。
1. webpack 中部分 loader 会 parse 生成 ast，原来这部分时间这么长。 文章作者通过复用 ast 达到了优化的目的。（当然其他构建工具也有复用 ast 的问题）如下图：
2. github dicsussion 支持了一个新的 markdrown 语言。用来给 quote 增加一些样式。如下图：
> 更多：
via:
### 2023-09-14\[工具]
一个油猴脚本，可以帮助你解决一些网站跳转到第三种需要你二次确认的问题。通过它，直接一键跳转到目标第三方网站。
via:
### 2023-09-13\[网站]
Tabserve 允许你将本地服务（通过 localhost 提供的服务）暴露到互联网。其他人可以通过一个域名直接访问到你的本地服务。而完成这个你不需要安装软件，只需要打开一个网站即可。
原理很简单，但是很有趣。
其原理大概是在你本地启动一个 websocket， 域名访问到 Tabserve 的服务后，会转发到你本地的 websocket，然后你本地的 websocket 转发到 localhost，然后将响应回传过去。**其实就是在你本地启动一个 websocket 充当代理。**
via:
### 2023-09-08\[工具]
pdf-poppler 是一个讲 pdf 转化为图片的库，通过它你可以自己搭建一个 pdf 预览服务。前端请求一个资源路径， node 端返回图片到前端进行展示即可。相比于浏览器端直接展示 pdf，兼容性和一致性都会有优势。
参考代码：
```js
const path = require('path');
const pdf = require('pdf-poppler');
let file = 'C:\\tmp\\convertme.pdf'
let opts = {
format: 'jpeg',
out_dir: path.dirname(file),
out_prefix: path.baseName(file, path.extname(file)),
page: null
}
pdf.convert(file, opts)
.then(res => {
console.log('Successfully converted');
})
.catch(error => {
console.error(error);
})
```
via:
### 2023-09-07\[网站]
一个在线工具，可以将音频转化为文字。目前支持三种方式，From URL，From file 和 Record。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-08
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-08
### 2023-08-31\[好文]
ECMAScript 终于要推出 using 了。之前上大学的时候学习的事 C#，ECMAScript 的 using 和 C# 的恰好是一样的。TypeScript 5.2 也对 using 进行了抢先支持 👍。
如果你仅仅是做前端的，可能影响不大。毕竟客户端代码跑在客户电脑上，而且硬件配置一直在提高。因此问题不大。 但是如果你是做服务端的，你如用 node 来做后端服务，那么就必须考虑资源回收的问题。那么使用 using 则可以大大减少你的代码量，进而减少一些潜在的 bug 出现。
via:
### 2023-08-27\[类库]
一个移除背景的 JS 库，你可以通过它搭建一个在线的去除背景的网站。
via:
### 2023-08-26\[好文]
很有意思的一个想法。 通过 API 发送 UI，这样可以更容易做到千人千面的个性化 UI 页面。 然后发布也更容易。
不过似乎也加大了平台的审核难度。因为代码是通过 API 来发送的，而 API 可能不是部署到平台的，这样平台就很难审核。所以后期这个技术发展起来了，平台有可能会进行抵制。
via:
### 2023-08-25\[类库]
Make React Faster. Automatically.
一个基于编译时的类库， 通过它可以将 react 应用重新编译（主要是加速 VDOM 算法），并获得性能提升。
比如你使用 CRA（create react app）创建 react 项目，那么就可以通过简单地如下配置接入 million。
```js
const million = require('million/compiler');
module.exports = {
webpack: {
plugins: { add: [million.webpack({ auto: true })] }
}
};
```
via:
### 2023-08-24\[新闻]
idx 是谷歌的线上开发环境，支持 AI 辅助编程。目前还没发布， 不过可以申请内测资格， 一变第一时间进行体验。（我已经申请啦\~）
via:
### 2023-08-23\[好文]
一个 css 属性，轻松制作缩略图？
用法很简单，只需要给想显示缩略图的元素一个属性即可。代码：
```css
mini-map .screen-image .canvas {
background: white -moz-element(#main) no-repeat scroll center center / contain;
}
```
其中 -moz-element(#main) 是关键。 main 是想要显示缩略图的主体 DOM 的 id。
效果如下图（注意右面的缩略图）：
你也可以监听点击时间，从而做一个可交互的缩略图。用户点击到哪里，页面就跳转到对应位置。类似 VSC 的缩略图。
via:
### 2023-08-16\[好文]
文章名：
一个目前只有 chrome for android 才有的 api。通过它，可以给 input 指定弹起的键盘的位置。有了它，web 越来越逼近小程序了。如果继续发展， 或许小程序会消失也不一定？
via:
### 2023-08-15\[类库]
一个 chatgpt 网页风格的 UI 库。 如果你想要搭建一个基于类似 chatgpt 的网站，那么这个还算有点用，会让你快速搭建一个大家普遍熟悉的 ai 聊天网站。
via:
### 2023-08-04\[库]
neutralinojs 是一个类似于 electron 以及 NWJS 的桌面应用程序框架。主打的就是体积小，内存占用少，构建速度快。
via:
### 2023-08-02\[库]
Mapkick 是一个地图库（sdk）， 支持 Mapbox and MapLibre，通过它除了可以实现诸如地图标点，地图画区域等功能。也可以实现诸如位置共享，轨迹回放等进阶功能。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-07
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-07
### 2023-07-31\[好文]
chatgpt 发展了好久了， 很多人封装了一些工具给大家用。
比如
```
请用中文回答我。如果是代码问题，只提供代码，不要解释。
${query}
```
然后你的所有问题都会经过上面的包装，这样你不需要每个 thread 提问都告诉 gpt “用中文回答我。如果是代码问题，只提供代码，不要解释”。
openai 官方提供了类似的支持 Custom Instructions，目前是内测阶段，具体介绍请看文章。
via:
### 2023-07-28\[技巧]
有时候我会写一些自动化脚本。 就有一些系统层面上的接口需求， 比如我想获取当前正在激活的窗口等等。这在传统的 shell 脚本中不提供的功能。
我是 Mac 用户，可以利用 osascript 来实现这个需求。Windows 不太熟悉，有知道的小伙伴欢迎告诉我。
学习 osascript 都做 Mac 上的自动化很有帮助，结合 afred 等工具，简直如鱼得水。
比如我就写过一个 create new file in current folder 的功能。它会获取当前激活的 finder 的路径，然后在其下新建文件。（要是 Mac 下原生右键有新建文件我可能就不会写这个自动化工具了）。核心代码参考:
```bash
myPath=$(osascript -e 'try' -e 'tell application "Finder"' -e 'set this_folder to (the target of the front window) as alias' -e 'set this_folder to POSIX path of this_folder' -e 'return this_folder' -e 'end tell' -e 'end try' -e 'set this_folder to POSIX path of (path to desktop)' -e 'return this_folder')
cd ${myPath}
touch ${query}
```
有没有发现 osascript 和自然语言几乎一样了？ 有没有想到让 chatgpt 来帮你写？大家可以去试试。
### 2023-07-25\[网站]
有些港剧会限制 IP，只有香港才能看，开了 VPN 也没用，可以试试埋堆堆。
via:
### 2023-07-24
一个在线的海报制作工具。在如今很多工具都收费的时候， 可以用这个私有化部署到本地进行使用。
官方的介绍是：一款漂亮且功能强大的在线图片设计器，仿稿定设计，适用于多种场景：海报生成、电商产品图、文章长图、视频/公众号封面等，让设计更简单！（A beautiful online image designer, suitable for various scenarios like generate posters, making design easier.）
当然也可以当做技术进行学习，里面使用了很多主流的工具：
* moveable: 提供了画布中选择、拖动缩放等能力
* html2canvas: 前端生成图片兜底方案
* qr-code-styling: 风格化二维码
* sky: 参考了其 PSD 解析的实现
另外其是一个前后端同构的项目，这一点也可以学习一下（只不过很简单就是了，纯新手可能能够学习点东西）。
via:
### 2023-07-23\[好文]
《Testing the dark scenarios of your Node.js application(测试 Node.js 应用程序的暗场景)》讲述了一些 node 服务测试中容易被大家忽略的点。比如应用启动不了的情况，请求超时的情况，文档和代码不一致的情况等等。
其中文档和代码不一致的方法这一点让我学到了，作者使用了 toSatisfyApiSpec 来进行类似于 snapshot 的测试。即根据你的请求返回值和文档文件（比如你使用了 openapi 做文档，那就是其导出的 yml 文件）进行对比，比如不一致就抛出错误。
有一个基于 jest 的工具 jest-openapi（ 就是做这个的。
via:
### 2023-07-22\[类库]
sortable 允许你给 HTML 的 table 标签增加一个 class="sortable" 就可以实现 sort 的功能。用法足够灵活， 需要注意的是在和目前主流的虚拟 DOM 框架结合使用的时候需要注意一下。
其原理很简单，就是绑定在 document 上一个 click 事件，handle 里进行判断，如果你点击的是 table 且有 sortable 的 class，并且点击的是表头，那么就将 table rows 进行排序，然后将排序后的结果 replaceChild 到原有的 table 上。
via:
### 2023-07-21\[技巧]
都 2023 年了， node 20 终于即将支持 timer 的 mocke 了。使用后，用户使用 settimeout 和 setinterval 等 api 就不需要真正地等待那么久了。
其实很多测试库都支持，但是 node 原生一直没有支持，现在支持了。
之前我们业务中就有一个需求是每五分钟拉取一次数据， 然后处理一下。 有了它就可以 tick 5 分钟， 然后断言。
```js
import assert from 'node:assert';
import { test } from 'node:test';
test('mocks setTimeout to be executed synchronously without having to actually wait for it', (context) => {
const fn = context.mock.fn();
// Optionally choose what to mock
context.mock.timers.enable(['setTimeout']);
const nineSecs = 9000;
setTimeout(fn, nineSecs);
const threeSeconds = 3000;
context.mock.timers.tick(threeSeconds);
context.mock.timers.tick(threeSeconds);
context.mock.timers.tick(threeSeconds);
assert.strictEqual(fn.mock.callCount(), 1);
});
```
context.mock.timers.tick(ms)， 会模拟经过了 ms 毫秒，而不必等真实世界过去 ms 毫秒。
via:
### 2023-07-20\[库]
一个新手导航插件，之前用过别的，这个插件的特点是体积小，无依赖，定制化程度也够用。
via:
### 2023-07-14\[技巧]
借助于 HTTP 提供的 range，我们可以实现断点续传， 分段传输的功能。
也可以基于 range 实现视频快速跳转（点击指定时间就会加载那一部分的视频， 你看视频的时候的灰色区域就是通过类似的方式加载的），其实这本质也是分段传输。
实现将视频分为很多段，用户点击后判断下其属于哪一段，然后利用诸如 range 来实现分段传输即可。
via:
### 2023-07-13\[好文]
如何破解滑动验证码？
基本思想不是图像识别。而是利用滑块验证码中的滑块与周围图片的色差进行判断。即滑块会与周围图片有很大的色差，很违和。正因为如此， 人们才能识别出来应该滑动到哪里。
代码上，你可以将滑块放到 canvas 上，然后利用 canvas api 获取图片的像素信息，进而判断滑块的位置， 最后将滑块的位置和 token 传给后端。至于 token 怎么来，不同的网站方法会不同， 这篇文章就介绍了一种方式，以及破解思路。
via:
### 2023-07-11\[库]
我之前一直想用代码写动画。
但是太麻烦了，如果有一套声明式的代码就可以写动画，那就太好了。
我之前的想法是设计一套声明式语言，然后转为 excalidraw 组件，最后根据一系列的 excalidraw 组件调用库就可以完成。
> 有一个现成的库可以基于 excalidraw 生成 svg 动画， 我一直在用，效果不错。
但是使用我们今天介绍的网站(remotion)也是一个很不错的思路。
via:
### 2023-07-10\[网站]
mikan 是一个追番平台， 你可以直接在上面下载最新的番剧。我试了一下， 下载速度挺快的， 一分钟左右就可以下载一集 MP4 到本地，清晰度也不错。
我下载了一个 430 M，长度为 23m40s 的视频效果。
你也可以使用一些工具， 在线搭载一个在线视频播放网站， 从而打造一个自己专属的视频网站。
如果你愿意，也可以公开给别人。 不过这个 CDN 的费用恐怕会很高罢了。
另外，如果结合使用这个自动追番工具（ 则会**自动**生成你的专属番剧库。
via:
### 2023-07-09\[库]
据说是取代 gitalk 的工具。 gitalk 是基于 issue 做了，而此工具是基于 discuss。你可以直接使用网站（ 来快速生成接入代码。最后将代码复制集成到你的项目就好了。但是目前我这边一些配置并不能无缝从 gitalk 迁移到 giscus，因此我并没有取迁移，期待后面的完善。
via:
### 2023-07-06\[技巧]
给任意在线网站调速度。
只要网站的视频是使用 video 标签播放的(不是 flash) 都可以用这个方法。
打开开发工具，选中我们要控制的 元素，然后输入以下内容：`$0.playbackRate = 10` ，并按 Enter 执行。你会发现，视频的播放速度已经发生变化了。
$0 表示我们最近选中的元素，playbackRate 是 video 的一个熟悉，表示视频的播放速度，10 表示的是 10倍速。
### 2023-07-02\[工具]
一个免费的多语言语音转字幕工具，你可以上传一个视频过去，它会自动帮你提取其中的语音并生成字幕。
最主要的用处是帮你生成字幕，你也可以用它来快速知道视频里讲的内容， 结合 chatgpt 的总结功能， 会更好用。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-05
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-05
### 2023-05-31\[saas]
一个 saas 工具， 可以所见即所得地协作创建自己的网站，微小团队可以免费使用，可以用它接私活？
另外这个网站有很多功能是暂时没有的（比如 Git 集成），但是却出现在了宣传文章里。让我想起来了”新闻稿导向型开发”。即先出新闻稿，然后倒推。不过这个开发模式是假设产品开发出来了，要发新闻稿。而人家是真的发了新闻稿。
via:
### 2023-05-23\[工具]
文字转语音工具吗，特点是可以插入笑声，哭泣声等。
目前支持的特性：
* \[laughter]
* \[laughs]
* \[sighs]
* \[music]
* \[gasps]
* \[clears throat]
* -or ... for hesitations
* ♪ for song lyrics
* CAPITALIZATION for emphasis of a word
* \[MAN] and \[WOMAN] to bias Bark toward male and female speakers, respectively
使用示例：
```py
from bark import SAMPLE_RATE, generate_audio, preload_models
from scipy.io.wavfile import write as write_wav
from IPython.display import Audio
# download and load all models
preload_models()
# generate audio from text
text_prompt = """
Hello, my name is Suno. And, uh — and I like pizza. [laughs]
But I also have other interests such as playing tic tac toe.
"""
audio_array = generate_audio(text_prompt)
# save audio to disk
write_wav("bark_generation.wav", SAMPLE_RATE, audio_array)
# play text in notebook
Audio(audio_array, rate=SAMPLE_RATE)
```
如果你想直接用，也没有这种复杂的感情需求，那么可以使用一个免费的文字转语音网站： 这个网站也支持多种语言。
via ：
### 2023-05-22\[工具]
ezno 和 esno 类似都可以代替 txc 的工具，基于 esbuild 来编译 TypeScript ，因此速度更快，主打的就是一个速度。使用方法很简单，本来用 tsc 的，直接替换为 ezno 或者 esno 即可。
via:
*
*
### 2023-05-21\[教程]
教你使用 Github Action 的一个文章，特色是交互式的网站。看完这篇教程，常见的 Action 都可以模仿它的 example 写出来。
左边是文章，右边是代码，鼠标移到文章上，会在代码中对应位置进行高亮处理。 上次看这种文章还是看的 React 的教程。
这种网站做起来比单纯写一篇文章累很多， 这我深有体会。对于读者来说， 这种效果也实实在在更好。
via:
### 2023-05-20\[库]
用 TypeScript 开发树莓派？devicescript！
DeviceScript将TypeScript开发体验带到了低资源微控制器设备中。
via:
### 2023-05-17\[工具]
midjourney 是一个 ai 工具，可以根据文字生成图片。最大的卖点就是生成后会给你若干选项， 你可以基于给出的选项不断优化图片使之满足你的预期效果，这是我在其他文字生成图片工具中没有看到的。
话说，已经有自媒体基于它给自己文章配图了。
via:
### 2023-05-16\[工具]
slate 是一个富文本编辑器组件，语雀就是基于它来实现的。
via:
另外一个特别火的最新的富文本编辑器是 blocksuite，和 notion 类似，是基于 block 来组织的。
via:
### 2023-05-15\[工具]
Easydict 是一个简洁易用的翻译词典 macOS App，能够轻松优雅地查找单词或翻译文本。Easydict 开箱即用，能自动识别输入文本语言，支持输入翻译，划词翻译和 OCR 截图翻译，可同时查询多个翻译服务结果，目前支持有道词典，🍎苹果系统翻译，DeepL，谷歌，百度和火山翻译。
via:
### 2023-05-13\[工具]
dify 是一个支持快速根据模板生成基于 chatgpt 应用的一个网站。 也可以 fork 到自己的仓库通过修改代码的方式进行定制。默认提供 200 次免费调用额度（一般都是不够用的）。
网站预览图：
via:
另外有一个类似的工具，它也提供了类似的方式，不过 chatllm 是没有服务器的（也就不需要 openai 的秘钥了），更牛逼了，可以直接本地化部署， 一切都在浏览器中运行，并使用 WebGPU 加速。via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-04
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-04
### 2023-04-30\[工具]
将可视化测试集成到你的系统？ 本工具（chromatic）是著名的 storybook 开发的。
via:
### 2023-04-29\[工具]
这是一个类似 chatgpt ，只不过其实一个 IDE 插件， 并且只是为了生成测试用例和优化代码。
我预测，将来一定会有很多仅覆盖某个领域的工具产生。
比如只喂法律数据源的法律 AI， 只喂前端数据源的前端助手等等。这样不仅回答更加专业，而且对于用户来说也更容易写提示词（prompt）。
via:
### 2023-04-28\[新闻]
亚马逊也推出了自己对标微软 copilot 的产品 CodeWhisperer，对个人免费，企业收费。
via:
### 2023-04-27\[好文]
讲解 chatgpt 的原理的一篇文章，比较浅显，但是对于想了解但又不愿意花时间学习的外行来说很有用。
简单来说就是根据大数据建立模型， 并使用训练数据调整参数。 当用户提问时，它会内部使用机器学习算法计算出多种 output，然后取概率最大的 output 返回给用户。
via:
### 2023-04-23\[网站]
自从 openai 公布自己的 chatgpt 后，各大公司也都在跟进，推出自己的 ai 产品。
vercel 就出了一个 playground ，集成了市面上常见的 ai 聊天引擎，你可以直接提问，并且支持选择引擎。然后根据对比两者的答案。
via:
### 2023-04-22\[库]
一个基于 svelt 的移动端组件库，特点是体积小， 速度快（无运行时 diff）。
via:
### 2023-04-23\[库]
如何在 node 中引用其他语言写的库？
你可以使用 Node.js 的 child\_process 模块来在 Node.js 中调用其他语言编写的库。具体而言，您可以使用 child\_process 模块的 exec 或 spawn 方法来执行其他语言编写的可执行文件或脚本，并从 Node.js 中传递参数和接收输出。另外，您也可以使用 Node.js 的 C++ 插件来编写与其他语言库交互的 Node.js 模块。
linker.js 可以帮助你轻松生成 binding， 从而实现在 nodejs 中调用 cpp，rust，go 等代码。
via:
### 2023-04-22\[好文]
使用 webworker 来解决主进程负载过高是一个好的办法。 不过有如下问题：
1. 无法对 DOM 进行访问，因此设计到 DOM 时代码会比较复杂，需要不停地传输数据。 这个文章介绍可以通过 来封装，屏蔽掉细节
2. 通信开销。 虽然减少了主进程的占用， 但是总的计算不但没有少，还增加了通信时间。如果通信数据很大，或者很频繁，那么这个开销就不可忽略。文章也提供了一种简单的参考方式。
via:
### 2023-04-18\[好文]
文章介绍了如果溯源 NPM 包，从而发现 npm 包是否是正规的（不是山寨的），有没有被篡改，最近有没有异常提交， 有没有危险的依赖等等。
但是这个成立的前提是这些 npm 包是通过 github action 发布的。
这或许是微软的一个野心，收购 github 和 npm，然后将其完全整合。
via:
### 2023-04-11\[新闻]
Github 官方推出了商店系统，可以在上面购物，不过目前能买的东西比较少。
### 2023-04-10\[类库]
以更可读的方式操作 AST。
比如你想给一个文件增加一个导出成员，可以这样：
```js
import { loadFile, writeFile } from "magicast";
const mod = await loadFile("config.js");
mod.exports.default.foo.push("b");
await writeFile(mod);
```
其底层会操作 AST 来完成， 而如果你来操作 AST， 肯定会复杂一点。如果是我的话，还会去查一下 AST 操作库的 api 文档。 而使用了这个库就不用查询文档了，基本都是比较符合直觉的。
via:
### 2023-04-09\[新闻]
copilot 集成了 chatgpt， 可以通过自然语言聊天实现修改代码了（会有一个类似聊天的窗口）。
copilot lab 扩展（ 自动生成测试用例等。（虽说不用这个也可以，但是却更加方便，相当于chatgpt 的 prompt）
via:
### 2023-04-02\[网站]
UX matters！
这是一个讲如何优化 UX，里面还有一些专业术语表 。更关键的是 UX 的好处，比如变现，提高满意度。
其中还有 case study 栏目， 其中第一个就是一个之前看过的比较老套的案例，但是确实值得一些公司学习。
via:
### 2023-04-01\[好文]
代码同构对很多前端开发都不陌生。讲的是服务端和客户端都用一样库，这样可以实现代码共用。
但是如果你使用 ssr，那么实际上服务端是需要运行客户端代码的（生成 html 发给客户端）。因此就有了将客户端和服务端代码写到一个项目的实践，比如 .server.js 放服务端逻辑 .client.js 放客户端逻辑。然后通过打包分别生成服务端和客户端代码。
这有时候不是很方便， 因为客户端有时候也想访问服务端的一些东西， 如果能将其写到一个文件就好了。
《WTF Is Code Extraction》就讲了三种将客户端和服务端代码写到一起的方式， 以及都有什么问题需要解决，最后图穷匕见地安利了一下自己的产品😄 （它安利的那个库我没用过）
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-03
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-03
### 2023-03-31\[工具]
visual-chatpgt 可以允许你使用自然语言来进行图像识别， 图片修改（P图）等操作， 底层基于 chatgpt，由微软开源的一个项目，短短三个礼拜就收获了将近 30 k 的 star。
你只需要有 OPENAI\_API\_KEY 就可以按照网站上的方法进行安装了。如果没有 OPENAI\_API\_KEY，可以去 openai 网站上注册申请一个。
via:
### 2023-03-30\[好文]
人工智能时代已经开启？？来看比尔盖茨的发言。
via:
盖茨竟然将现在的 ai 比作它的旷世大作 windows，可见其厉害。
### 2023-03-29\[技巧]
bash 中可以使用 ctrl + r 开启前缀搜索功能，根据你输入的前缀在历史输入记录中进行匹配。如果想匹配下一项可以再次按下 ctrl + r。个人认为这个设计有点反人类，好在很多人都意识到了这个问题，并有了解决方案。
我使用的 oh-my-zsh，只需要下载一个插件 zsh-history-substring-search，并就其添加到配置文件，最后设置 bindkey ，将上下翻阅历史记录的按键映射到 up 和 down 上即可。
部分 .zshrc 文件如下：
```zsh
bindkey "^[[A" history-beginning-search-backward
bindkey "^[[B" history-beginning-search-forward
bindkey '^[[H' beginning-of-line
bindkey '^[[F' end-of-line
plugins=(
zsh-history-substring-search
)
```
不仅仅是 ctrl + r 的搜索， 如果你安装了自动补全插件， 那么直接输入前缀就可以 up 和 down 切换了，也就说帮你省了按 ctrl + r 的时间！
如果需要使用，安装并在配置文件增加如下插件即可：
```
plugins=(
zsh-autosuggestions
zsh-history-substring-search
)
```
别忘记 source \~/.zshrc 使配置文件生效哦。
### 2023-03-28\[网站]
chatgpt 训练的数据是 2022 年以前的，因此如果你的数据太新了，可能会搜不到结果。
另外大家想把自己的网站集成 chatgpt，让他回答用户的问题，增强体验。
但是有两个问题：
* 太贵
* 训练比较麻烦。（比如你一段一段给它输入，让他学习，chatgpt 有输入限制）
chatpdf 这个网站可以支持几百页的一次性输入，要大得多。而且这个网站支持每天解析三个 pdf（截止到目前是的）。
你只需要将 pdf 丢给它训练，之后你就可以对 pdf 的内容进行提问。他会自己提炼，然后生成回答。（只不过一些回答是错的，大家需要注意，等待 chatgpt 升级可能会好点）
via ：
### 2023-03-27\[好文]
node 18 中终于内置了 fetch，test 等基础函数，太棒了，可惜来得太晚了一点。
node 19 原生支持 --watch 参数，终于不用安装三方包了。
更多请访问链接。
via:
### 2023-03-26\[工具]
Simplified IP client using WebRTC.
一个可以获取客户端 IP 的 JS 脚本，原理是基于 webrtc 协议会发送 IP 的特点。
注意是获取客户端 IP，而不是本机，因此这其实涉及到了隐私问题。 不过浏览器并不会提示你有人正在获取你的 IP，听起来还有点可怕，尽管使用代理可以解决这个问题，但是很多人都不用代理的，即使使用代理，有可能使用了规则， 对于某些网站仍然会暴露自己的真实 IP。
via:
### 2023-03-25\[好文]
deno 竟然为了兼容 node 加入了 package.json，很多人表示不解，这篇文章来自 deno 官方博客，解释了其原因，。
via:
### 2023-03-24\[好文]
NPM 发布了新功能 granular-access-token，详情： Github 也在 Actions 中对其进行了支持。
这篇文章详细讲解了如何在 Github Action 中使用 以最大限度保证代码安全。
via:
### 2023-03-23\[好文]
学习一个东西最好是亲自经历，其次就是从别人的经历中学习。
作者介绍了自己从业二十年的两次重大投资失败案例， 最后的总结很重要，尤其是最后一条。
以下是最后一条的原文：
```
自由现金流才是投资企业第一要素，只有企业靠经营有了自由现金流，以上问题基本都可避免，它才有能力对你分红，不圈你的钱，所以我目前研究企业第一看企业有没有自由现金流，然后才看其成长性。
```
里面的经验有几条我都感同身受，那就是国内的报表几乎啥都可以造假（唯有现金，分红是不可能造假的），上市公司代表说的话啥也别信，高科技谨慎投资。
via：
### 2023-03-22\[好文]
精读《维护好一个复杂项目》,文章提炼了两个观点：
* 要有主人翁心态
* 要解耦
第一个观点比较有启发，就是你招聘的那个人很重要，而这个人的心态更重要。文章给了一个自动化测试用例的例子也很有启发，实际上已经有很多成熟的产品了，普遍的名字叫”录制测试用例“，比如微信的自动化测试就可以录制测试用例。
第二个观点有点老生常谈了。
via:
### 2023-03-21\[好文]
将 react hooks 放到一张图中，并根据类型进行分类（state 相关的，effect 相关的，context 相关的等等）。一图胜前言，秒懂，好记。
via:
### 2023-03-20\[工具]
socket-npm = npm + audit
即 npm 的功能外加审核，你每次操作都会对你的包进行安全分析，防止安装一些危险的包。
这个工具的流行恰恰说明 npm 官方做的不行啊。
官方提供了一种使用方法：
```bash
alias npm="socket-npm"
alias npx="socket-npx"
```
这样以后使用 npm 都自动使用 socket-npm ，没有任何心智负担。不过我建议这样设置别名，类型 cnpm，给自己留一个区分二者的行为，并期待 npm 官方的行动。
```bash
alias snpm="socket-npm"
alias snpx="socket-npx"
```
另外其官方网站提供了完全可以替代 npm 官网的功能。在此，你可以查看项目的贡献者，项目的依赖，项目的风险（包括依赖的风险）等等，并直观上从各个层面给出得分，帮助你更好的选择包。
via:
### 2023-03-19\[类库]
Framer Motion 是一个基于 react 的动画库， 相比于 animejs 这种不依赖于框架的动画库，其更加易用。你只需要设置当前的值，它会自动根据上一个值自动做动画效果。
比如:
```js
```
几秒后：
\
那么就会自动生成一个 100 - 200 平滑动画。
主要功能有：
* 手势支持（比如点击）
* 滚动
* 多种 Component，比如 Reorder 组件可以生成可拖动的组件（当然是自带动画的）
* 众多 hooks
* 。。。
via:
### 2023-03-18\[工具]
Codex-CLI 是一个基于 chatgpt 的工具， 你可以使用自然语言来描述， Codex-CLI 自动帮你转化为 cli 语言，比如 bash 语言。
对于一些经常需要查 shell 语法的人来说，简直就是福音。但是如果你很熟悉 shell 的话，基本没啥用。
对于我来说， 常见命令我都有插件（我用的是 zsh 的第三方插件， 比如 git-plugin 等），缩写很容易就敲出来了，因此用处不是很大。我这里说的是常见命令，假如我突然需要做一些非常见的任务， 那么或许对我会很有用。
via：
### 2023-03-17\[心得]
买贵重物品东西前，可以先将价格转化为生命。比如你一天可以赚 100，买一个手机 3000，那么相等于你花了 30 天的生命买了个手机， 你觉得值么？如果你觉得值，那就买。
### 2023-03-16\[工具]
一个前端打包工具 farm， 采用 rust 编写，主要卖点是快。
rspack 才出几天，farm 就出来和 rspack 比性能了 😄。 想当初 rspack 出来就和 webpack，swc 等比性能。
作者还专门写了一篇中文文章来介绍《比 Vite 快 5 倍? 2ms HMR？Farm：基于 Rust 的极速构建引擎！》via:
via:
### 2023-03-15\[框架]
vitest 是一个前端测试框架， 类似于 jest，用法”基本“兼容了 jest 中的常用 api， 因此很多项目都可以很容易地从 jest 迁移到 vitest。 比如大名鼎鼎的 react query 就刚刚从 jest 迁移到了 vitest。
vitest 的特点是：
* 快
* 支持 in-source 测试。即在代码文件中直接写测试（灵感来源于 rust ）
* 类型测试。还能对 TS 类型进行测试 😄
* 内置 benchmark
via:
### 2023-03-14\[好文]
前端最近有一个新的概念 特别火，叫 Signal，之前也在 daily featured 中介绍过。
今天给大家推荐几个资料。
* 《Demystifying Create React Signals Internals》via:
* 《dan\_abramov's reply for Discussion on: React vs Signals: 10 Years Later》via:
* 《The Evolution of Signals in JavaScript》via:
* 《React vs Signals: 10 Years Later》 via:
### 2023-03-13\[投资]
这家企业值多少钱，换句话说：
* 如果你有钱买这个公司，你愿意花多少？
* 如果你是这个公司的老板，别人出价多少你愿意卖？
这篇文章提供了三个计算方法，企业价值＝分红 /（折现率 - 增长率），这三种方法都是 DDM 估值法，只是折现率取值不一样，分别是 10%，4% 和 2.5% ，并且通过巴菲特的例子来帮助大家理解什么时候应该用哪个折现率更合适。
文章标题：《永久持股收息是兑现伟大企业价值的唯一途径》
via:
### 2023-03-12\[投资]
芒格年度股东会（Daily Journal ）很有意思，里面很多内容都很有用。 给我的感觉就像是和一个投资界大佬谈话（实际上就是一个谈话类的会议），拓展我的投资视野。
2023 年的会议文字整理版本可以看这个，往年的大家可以自行搜索一下。
2023 年内容主要讲到了自己的投资策略和思想以及半导体行业，加密货币行业等，很有启发。
part1 via: part2 via:
### 2023-03-11\[类库]
TanStack Query (以前叫 React Query)，是一个功能异常强大的状态管理库，以前是为 React 做的。现在支持所有主流框架，就连名字都改了，目前的版本是 V4。
几大核心功能：
* fetching
* caching
* synchronizing
* updating server state
我的感受是，使用了它可以让你更方便的管理状态，尤其是服务端的数据。比如你新建了一个 mutation 是修改服务端的 post 数据， 那么这个库可以帮助你自动更新绑定了这个 post 数据源的组件。就不会发生修改了数据后，页面没有刷新的问题。同时它可以减少一些网络请求，至于什么时候以及为什么可以减少网络请求，留给大家去发现原因吧。
React 引入 hooks 之后，这个库就更好用了，核心功能就是 useQuery 的一个 hook。 代码大概这样：
```js
function Todos() {
const { status, data, error } = useQuery({
queryKey: ["todos"],
queryFn: fetchTodoList,
});
if (status === "loading") {
return Loading...;
}
if (status === "error") {
return Error: {error.message};
}
// also status === 'success', but "else" logic works, too
return (
{data.map((todo) => (
- {todo.title}
))}
);
}
```
via:
### 2023-03-10\[框架]
remix 是一个基于 JS 的全栈框架。类似于 next.js 或者 nuxt.js ，大家可以对比起来理解和学习。
它可以通过 esbuild 构建出：
* 服务端代码
* 客户端代码
并”自动”进行优化，使得发送到客户端的代码足够少，进而实现更好的性能，这也是它的主打特点。
要做到这一点，就需要严格区分 client 和 server，并贯穿整个 codebase。所以它就是一个服务端渲染+客户端渲染的框架，屏蔽了一些底层细节，开发者更好上手。
我的下一个网站就打算使用 remix 来做，看看它到底有多快。
via:
### 2023-03-09\[工具]
我经常需要写一些脚本做一些事情，之前都是用 bash。但 bash 用起来实在没有高级语言方便，尤其是 JS。
于是后来我也尝试使用 nodejs 写脚本，但是 node 写起来真的是又臭又长。
这个工具是 Google 开源的，通过它你可以使用 JS 来写脚本，并且不会像原生 nodejs 写法一样又臭又长。尤其你需要使用 child\_process 去做一些其他事情，然后需要通过进程通信传输数据的时候。
来看一个官方的例子感受一下：
```js
#!/usr/bin/env zx
await $`cat package.json | grep name`;
let branch = await $`git branch --show-current`;
await $`dep deploy --branch=${branch}`;
await Promise.all([$`sleep 1; echo 1`, $`sleep 2; echo 2`, $`sleep 3; echo 3`]);
let name = "foo bar";
await $`mkdir /tmp/${name}`;
```
以下是一些其提供的很好用的”简写“。
```js
$ · cd() · fetch() · question() · sleep() · echo() · stdin() · within() · retry() · spinner() · chalk · fs · os · path · glob · yaml · minimist · which · __filename · __dirname · require()
```
via:
### 2023-03-08\[新闻]
Github 资料中可以编辑代称了，通过代称其他可以知道你是个人还是团体，是男的还是女的。
这个是 Github 2023-03-01 加的一个新功能。via:
### 2023-03-07\[新闻]
TypeScript 5.0 RC 已经发布了，来看看人家是怎么写发布博客的。如果你也要发布重大更新，想通知他人，而不知道如何写，不妨参考一下。
另外这个博客有个很有意思的事情。”原来 anyscript 这个梗， 微软官方也玩 😄“
via:
### 2023-03-06\[好文]
FinalizationRegistry 是一个新的浏览器 api，可以监听 JS 中的变量的内存释放情况。
《Experiments with the JavaScript Garbage Collector》 使用了这个 API 对常见的内存泄漏情况进行了分析，非常通俗易懂。 其中有一个 case 使用 eval，非常有意思。
via:
### 2023-03-05\[类库]
texthighlighter 是一个 JS 类库，可以高亮 textarea。
如果不使用这个库，你可能需要自己实现一个 textarea，然后用样式定制， 比较麻烦。
via:
### 2023-03-04\[类库]
idraw 是一个画图工具， 不仅提供网页版本， 还提供一个 JS 库供开发者使用。类似 @excalidraw/excalidraw， UI 风格不太一样， 当时 API 基本是一致的。
via:
### 2023-03-02\[好文]
deno 自从诞生就考虑安全，隐私问题。 因此使用 deno 来搭建在线环境要比使用 node 简单很多。 这篇文章就介绍如何使用 deno 来搭建一个安全的 sandbox 用于执行用户的代码，提供一个云平台（Cloud Platform）。
via:
### 2023-03-01\[好文]
一个可以去除网页中讨厌的悬浮框的小工具。 之前我都是直接打开控制台，然后找到悬浮窗手动”删除 DOM 元素“。
有了这个工具就可以自动地完成这个操作。原理也很简单， 就是直接使用 DOM API 找到 fixed 和 sticky 的 DOM，然后将其移除。代码参考：
```js
document.querySelectorAll("body *").forEach(function (node) {
if (["fixed", "sticky"].includes(getComputedStyle(node).position)) {
node.parentNode.removeChild(node);
}
});
document.querySelectorAll("html *").forEach(function (node) {
var s = getComputedStyle(node);
if ("hidden" === s["overflow"]) {
node.style["overflow"] = "visible";
}
if ("hidden" === s["overflow-x"]) {
node.style["overflow-x"] = "visible";
}
if ("hidden" === s["overflow-y"]) {
node.style["overflow-y"] = "visible";
}
});
var htmlNode = document.querySelector("html");
htmlNode.style["overflow"] = "visible";
htmlNode.style["overflow-x"] = "visible";
htmlNode.style["overflow-y"] = "visible";
```
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-02
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-02
### 2023-02-28\[新闻]
chrome 的 headless 模式（无头浏览器）可以做一些集成测试。而之前由于 headless 模式和非 headless 模式两者是使用不用的技术实现，因此会有一些 bug（比如在无头浏览器好好的，在有头浏览器就有 bug，反之亦然）。
新的 chrome (版本大于等于 Chrome 112) 无头浏览器和有头浏览器采用的技术（codebase）是一样的， 因此不会有上面提到的问题。
via:
### 2023-02-27\[好文]
《useSignal() is the Future of Web Frameworks》这篇文章解释了为什么 react 不能像 vue 那样智能追踪需要更新的组件。react 想做到这一点，就需要引入类似 useSignal() 这样的机制。而 preact 就对 useSignal() 进行了支持。
目前 Vue, Preact, Solid 和 Qwik 都支持。
via:
### 2023-02-26\[库]
> A 'CSS reset' for TypeScript, improving types for common JavaScript API's
ts-reset 是一个类似于垫片的库，可以”修复“一些 ts 上的诡异行为。
Without ts-reset:
* 🚨 .json (in fetch) and JSON.parse both return any
* 🤦 .filter(Boolean) doesn't behave how you expect
* 😡 array.includes often breaks on readonly arrays ts-reset smooths over these hard edges, just like a CSS reset does in the browser.
With ts-reset:
* 👍 .json (in fetch) and JSON.parse both return unknown
* ✅ .filter(Boolean) behaves EXACTLY how you expect
* 🥹 array.includes is widened to be more ergonomic
* 🚀 And several more changes!
via:
### 2023-02-25\[工具]
The fastest JSON schema Validator. Supports JSON Schema（最快的 JSON schema 验证器，支持 JSON schema）。
via:
如果你有验证 JSON 的需求，可以一试。
下面是一个使用 ajv 的简单例子。
```js
// or ESM/TypeScript import
import Ajv from "ajv"
// Node.js require:
const Ajv = require("ajv")
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
const schema = {
type: "object",
properties: {
foo: {type: "integer"},
bar: {type: "string"},
},
required: ["foo"],
additionalProperties: false,
}
const data = {
foo: 1,
bar: "abc",
}
const validate = ajv.compile(schema)
const valid = validate(data)
if (!valid) console.log(validate.errors)
```
另外它的报错相对于用户来说不友好，可以结合使用 better-ajv-errors 来获得更好的效果。
via:
### 2023-02-24\[类库]
一个帮助你 debug 的库。可以：
* 通过环境变量显示指定的信息（信息过滤的作用
* 自动在尾部添加时间消耗
* 不同颜色高亮显示
* 等等
支持在 nodejs 和 浏览器中使用。
via:
### 2023-02-15\[教程]
这个教程内容其实一般，不是我看过的同类型中质量最好的，但是其交互式的这种形式我特别喜欢，想要借鉴。
这真的是一个我一直想做的类型 - 交互式教程。我的想法是做一个交互式的算法教程，我之前没有接触过这种形式，但是在我的想象中如果做出来，那么肯定能帮助到很多人。
这个教程是使用 JS 编写 Lisp 的编译器。可以帮助你理解：
* 词法分析
* 语法分析
* AST 遍历
* 代码生成
另外可以帮助你理解语言规范，递归等内容。
via:
### 2023-02-14\[新闻]
chrome 110 新增一个新的伪类选择器：:picture-in-picture 可以自定义画中画元素样式。
其实从 chrome 69 开始我们就可以通过 api 来让视频画中画播放。
```js
function togglePictureInPicture() {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
} else if (document.pictureInPictureEnabled) {
video.requestPictureInPicture();
}
}
```
不过现在我们甚至可以为其自定义样式。
via:
### 2023-02-10\[技巧]
分享几个 git 配置技巧。
1. 先配 name 和 email。
```bash
git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"
```
2. 再执行这两条命令。
```bash
git config --global --add push.default current
git config --global --add push.autoSetupRemote true
```
你会收获两个好处。
* 1）不需要「git push origin xxx」，只要「git push」
* 2）再也不会遇到「no upstream branch」的报错，也不需要「git push --set-upstream origin test && git push」。
因为我们执行 git push 的大部分场景都是 push 到同名的 remote branch。来源是 Auto setup remote branch and never again see an error about the missing upstream
3. 再修改 \~/.gitignore\_global，加入和你 IDE 相关的 ignore 配置。
我会把 .idea 加进去，这是和你相关的专有配置，如果给其他用 VSCode 的作者的项目提交时，都加上 .idea 的 .gitignore 配置，其实并不太礼貌。反之，VSCode 或其他编辑器工具的用户也要加上自己的。
```
*~
.DS_Store
.idea
```
### 2023-02-07\[工具]
turbo 管理 mono 有一很吸引我的点就是它的 cache。它会利用尽可能多的信息（比如参数， 环境变量等），判断 output 在之前是否已经生成了，进行减少重复工作。它甚至支持服务端缓存， 整个开发团队共享一份 cache，那么构建速度肯定会显著提高。
via:
### 2023-02-06\[工具]
Tauri 是一个 electron 的竞品， 在 2022 年非常闪耀。
via:
### 2023-02-05\[工具]
和 deno，node 以及 quickjs 类似， Bun 是一个 JavaScript 引擎，采用 zig 编写，性能很强。
via:
### 2023-02-02\[好文]
浏览器提供了一个内置的 API： structured-clone 用来深拷贝。
via:
### 2023-02-01\[好文]
chrome 浏览器提供了一些新的 api： document.onscrollend
```js
document.onscrollend = event => {…}
```
可以用来监听是否滚动已经停止。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2023-01
 
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2023-01
### 2023-01-31\[插件]
error lens 是一个 vscode 插件， 可以内敛的形式显示错误信息。在这之前大家需要在 output 或者 problems 面板查看，相当麻烦。
比如你的括号少了一个， 它就立马提示你哪里需要添加一个括号。大家 vscode 插件市场搜索 Error Lens 即可安装。
### 2023-01-30\[好文]
Zod: The Next Biggest thing after Typescript
本文介绍了 zod 如何同时在运行时和编译时进行类型校验的。 有点像一次编写，到处运行？
via:
### 2023-01-28\[库]
你可能遇到文本换行后第二行只有一个字的情况， 这个时候会显得不美观，能不能让他们挤挤，弄到一行呢？
react-wrap-balancer 就可以满足这个需求， 它是一个优化换行样式的 react 库。当浏览器视口发生变化的时候，它能适应这个变化，然后以最佳的方式展现换行文字。
via:
### 2023-01-20\[技巧]
如何实现弹幕防遮脸功能？
其实很简单。 普通的弹幕都是在视频上放一些 div 然后滚动即可， 防遮挡只需要：
1. 预先处理出一个遮罩图片。
2. 将遮挡图片放到弹幕和视频之间即可。用 CSS 的 [mask-image](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image) 就可以实现。
关键是如何预处理出遮罩图片呢？我们可以在后台利用人脸识别技术对视频中的每一帧进行人脸识别， 并将人脸处理成一张遮罩图片。这样我们得到了每一帧的遮罩图片， 前端根据视频进度不断更新对应这道图片即可。
### 2023-01-19\[仓库]
这是一个给 JS 选手的 Go 语言学习手册。
通过一个个常见的 case 的 JS 写法和 Go 写法对照，帮你快速掌握 Go。 之前我也分享过一些各种语言主流写法对比，感兴趣的可以翻翻历史记录。
这个仓库的对比写法或许有用， 不过大家千万不能仅仅阅读一下就完事了，这不是 API 手册。
我的方法是每天通过刷力扣的时候使用 Go 来刷来强化， 话说我的 Python 就是这么学习的 😄。
via:
### 2023-01-18\[扩展]
meduim 是一个很流行的国外网站， 里面各种内容都有， 我之前会时常在里面看一些技术文章。
这个网站很反人性的一点是，他会给你每一月的阅读额度，超过后需要付费才能继续看。这本身可以理解， 但是竟然只要你使用无痕模式就没有这种限制，这让付费的我很难接受。
这个扩展工具可以在你没有额度的时候通过点击一下立马解锁阅读权限，原理和上面类似，就是退出登录并将一些标记你身份的信息消除。
via:
### 2023-01-17\[类库]
astro 是一个不错的框架，不过给我印象最深的是它的 tutorial，做的太好了，值得我学习。
我已经完成了它的全部教程 🎉
他有很多特性非常有意思，比如：
* CSS，JS 和 HTML 写到一个文件里。 上面可以写 JS 然后用分隔符分割。
* 默认 0 JS。
* 开箱即用的 RSS， 对博客用户非常优化啊，不用找第三方插件，而且定制性很强，你甚至可以过滤一些不想被 RSS 的文章。
等等。更多特性，请参考官方网站。
via:
### 2023-01-13\[仓库]
根据文件的引用关系计算文件的重要程度，被引用的越多越重要，这个思路和代码其实都蛮简单的。大家没必要真的项目中使用，主要就是学习思路。
via:
### 2023-01-12\[教程]
这个视频教程教你如何使用 JavaScript 在几分钟内实现一个迷你区块链，二倍速观看效果更佳。看完后你会对区块链背后的技术有一个简单认知， 别小看这个简单认知， 这就是区块链的核心。一些其他都是围绕这个核心展开。
> 这是第一部分，视频的介绍部分有第二部分的链接。为了防止修改， 我贴一下
via:
### 2023-01-11\[教程]
《The Newbies Guide to Crypto》一个面向新手（无需编程语言基础）的加密货币，区块链教程。 更加侧重的是实用角度，你如何想开发，可以关注一下智能合约， Dapp 等， Github 也有很多优秀的资料。
via:
### 2023-01-04\[工具]
中国的称谓真的很复杂， 很多时候面对一些常见不见的亲戚我都反应不过来叫啥。
这个工具可以直接根据关系计算称谓。
via:
### 2023-01-03\[工具]
大家上网的时候一定见过 placeholder， 在图片没有加载出来之前用来占位。很多网站的 placeholder 都是一个样子。 而有的做的更精进一点的是先加载一个分辨率很低的 placeholder。
而这个工具可以根据原图计算一个哈希，然后根据这个哈希可以直接在本地渲染一个 placeholder， 这个 placeholder 在上一个解决方案的基础上还不用占用网络带宽。
via:
### 2023-01-02\[网站]
又一个好用的在线画图工具来了，测试了一下， UI 非常好看，share 功能很好用，易用性有待提高。好在现在是 beta 阶段，后面应该会进行优化，期待后续的表现吧。
via:
### 2023-01-01\[仓库]
iptv(Internet Protocol television) 可以让你看世界各地的电视直播，我自己试了一下，频道非常多，流畅度也不错。甚至可以看一些成人电视（当然建议你过滤掉这些成人内容，这个仓库也贴心地提供了一个过滤了成人内容的 m3u 地址）。
使用方式很简单：
* 选择你想看的直播列表
* 复制链接，粘贴到支持 m3u 的播放器（比如 IINA）。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2022-11
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2022-11
### 2022-11-30\[软件]
Syncthing 是一个在不同设备之间同步文件的软件， 你可以用它来备份还原。
使用方法很简单，下载后双击打开后访问：
接下来选择你需要同步的文件， 然后添加远程设备（输入一个设备 ID 就好了）就可以发送文件了。
via:
一个类似的软件是 Sendy，通过它可以分享文件，生成链接给任意朋友，当然你也可以发送给自己实现跨设备发送文件。地址：
### 2022-11-29\[算法]
输入一个 DOM， 返回这个 DOM 的选择器（selector）。
Given a DOM, can you return its selector?
```js
function t(dom: HTMLElement): string {}
```
我们可以从当前 DOM 借助 parentNode 属性往上找到根节点， 路上的节点通过选择器进行定位，最后拼接即可。代码参考：
```js
function t(dom: HTMLElement): string {
if (dom.tagName.toLowerCase() == "html") return "HTML";
let str = dom.tagName;
str += dom.id != "" ? "#" + dom.id : "";
if (dom.className) {
str += dom.className
.split(/\s/)
.map((c) => `.${c}`)
.join("");
}
return t(dom.parentNode) + " > " + str;
}
```
其实我们还可以做的更好一点，那就是遇到 ID 选择器直接 break。
```js
function t(dom: HTMLElement): string {
if (dom.tagName.toLowerCase() == "html") return "HTML";
let str = dom.tagName;
str += dom.id != "" ? "#" + dom.id : "";
if (dom.id) return str;
if (dom.className) {
str += dom.className
.split(/\s/)
.map((c) => `.${c}`)
.join("");
}
return t(dom.parentNode) + " > " + str;
}
```
### 2022-11-24\[网站]
如果你发现一个网站无法打开，你可能会想知道是你打不开了还是所有都打不开了。
这个时候一个检查网站目前是否可用的工具就很重要了。这里介绍一个我使用过的网站。
via:
### 2022-11-17\[好文]
论算法的重要性。 原帖标题《十年程序员难倒了一个算法上面，真的老了》
via:
简单说一下这道题。 如果第一个数组只有一项，那么就是一个典型的背包问题。 不过，背包问题求的是组合数或者极值，而这道题是求匹配方案， 因此我们不得不采用回溯的方法。
另外，第一个数组不止一项，怎么办呢？其实我们还是用回溯的思路，新建一个数组来标记一下第二个数组中每一项的选择情况即可。
### 2022-11-16\[好文]
github 代码搜索确实不好用，以至于我一般都是直接将 .com 改为 .dev 然后在一个在线版的 VSCODE 中搜索。
而现在搜索功能以及代码阅读等都进行了增强，比如可以通过正则来搜代码。
via:
### 2022-11-15\[技巧]
有时候我们使用的 Mac 应用突然间挂了，你又想知道为什么挂了。可以将 mac 应用使用终端（terminal） 打开，这样应用如果有打印日志的话，你就可以看到。
那么如何将 mac 应用使用终端打开呢？大家可以在应用文件夹中找到你想打开的应用，然后右键**显示包内容**（show package contents），里面找到一个 Contents/MacOS/ 下 找到一个可执行文件，将其拖到终端即可。
比如 /Applications/Karabiner-EventViewer.app/Contents/MacOS/Karabiner-EventViewer
你也可以直接将上面的路径粘贴到终端执行。
### 2022-11-14\[工具]
electron-log 是 electron 上一个日志管理工具，可以输入日志到终端，文件，也可以重写后上报到后端。其还支持很多功能， 比如 Catch Error， 从而上用户手动上报错误等。
via:
### 2022-11-13\[网站]
一个开发人员参考手册，内容一般，但是界面还是蛮漂亮的，期待后续的完善吧。
* 英文版:
* 中文版：
### 2022-11-11\[工具]
AutoCut: 通过字幕来剪切视频
这意味着你只需要文本编辑器就可以剪辑视频。
via:
### 20220-11-04\[网站]
fly.io 是一个类似 heroku， vercel 的免费代码托管平台，相当于得到了一个免费的云服务器。
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2022-10
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2022-10
### 20220-10-31\[技巧]
input 输入框有一个 capture 属性，允许用户在手机上直接调用摄像头。之前我们大多是通过混合式 app 调用 jssdk 的方式来实现。
代码：
```html
```
capture="environment" 会开启录制， capture="user" 会开启拍照模式。
### 2022-10-24\[工具]
我们通常会对自己的线上服务进行监控，保证自己服务的可用性。而很少有对自己服务中的外链进行监控。其实想做到也很简单，直接爬虫后正则匹配网站后发送一个请求查看其是否可用即可。这里介绍一个工具，它的作用就是帮你检查网站的**坏链**。
使用方法非常简单，一行命令就可以了。
```bash
$ npx check-html-links your_site_url
```
via:
### 2022-10-22\[好文]
一个如何解决一个 bug 的深度复盘文章。原文标题《随手给 Safari 提了一个 Bug，让我意外收获了这些新知识 》
via:
### 2022-10-21\[类库]
现在市面上有一些在线编辑 gif 的工具，那么你知道如何自己实现一个这样的工具么？借助今天介绍的类库就可以很简单地实现，我们可以对帧率，算法等进行深度定制，灵活性极高。
canvas-gif 是一个编辑 gif 的图片，通过它可以修改 gif 的内容，增加文字等。
via:
### 2022-10-19\[仓库]
Pake 是一个让你用 Rust 开发桌面客户端的工具， 类似于 electron 开发桌面应用，只不过这个基于 Rust 的，最大的特点是大小要小将近 50 倍，一般不到 2M。(electron 应用打出来都是百兆起)
via:
### 2022-10-18\[类库]
两行代码将 playground 集成到你的项目中。
```js
import { Sandpack } from "@codesandbox/sandpack-react";
;
```
如上代码直接生成 playground 到 DOM 上， 你可以在左侧编辑代码，右侧可以实时看到效果。
在这之前，我想实现类似的效果都是嵌入一些这种网站， 比如 codepen 到我的项目中的，自定义程度很差。
via:
### 2022-10-15\[网站]
输入文字自动生成高清视频，视频素材打打字就能搞定？ 或许吧，目前网站还在预定中，对这个功能感兴趣的可以先预定。
> 目前市面上已经有竞品了，这对用户来说是好事 😄
via:
### 2022-10-16\[教程]
keynote 自从有了**神奇移动** 动效后， 我发现用 keynote（类似于 windows 的 ppt） 做动画很简单。很多人也发现了这一点。同时我看了一些教程，现在基本上大多数的动画只要看一眼就大概知道怎么去做了。
这里推荐我看过的一个教程，里面有几十个 demo，每一个都用一分钟左右的碎片化时间完成。看完你会发现，使用到的技巧其实就那么几种。然而恰好就是这几种就能完成大多数的动画效果，而且还**特别简单**。
via:
### 2022-10-06\[好文]
一个可以在 web 上直接接入打赏功能的工具。
打赏者需要下载一个浏览器插件并注册一个账号，被打赏者需要在网站增加一个 link 标识一下网站的被打赏人的基本信息。
感觉之后的自媒体会往这个方向发展，结合 web3 逐渐弱化中心化的自媒体平台。
via:
> 目前也有一些自媒体工具，可以直接给你生成一个属于你自己的自媒体平台。比如这个
### 2022-10-05\[好文]
分享一篇雪球上的关于投资的好文。《众所周知，最有价值的投资资料，都是免费的》
via:
### 2022-10-04\[仓库]
novu 是一个关于消息推送的解决方案。
它提供了易于使用的 JS 客户端。
如下代码可以精准地向某一个用户推送一条 hello world 消息，并附带一个 logo。
```js
import { Novu } from "@novu/node";
const novu = new Novu(process.env.NOVU_API_KEY);
await novu.trigger("", {
to: [
{
subscriberId: "",
email: "john1@doemail.com",
firstName: "John",
lastName: "Doe",
},
],
payload: {
name: "Hello World",
organization: {
logo: "https://happycorp.com/logo.png",
},
},
});
```
其中 NOVU\_API\_KEY 就是你在 novu 上申请的一个秘钥，由于服务端验证。
via:
### 2022-10-03\[仓库]
一个可以不多写一行代码就给 Java 项目生成 API 文档的工具。 基本原理是基于 AST 去分析代码，然后给其添加 API Doc。
Node 项目很难使用这种方法，因此 JS 是一门动态语言， 很难通过 AST 去分析出所有的路由定义信息，除非加一些显式的约定。
via:
### 2022-10-02\[技巧]
大家可能看过这种表格，里面的上涨和下跌使用不同深度的颜色来区分。
使用 excel 可以很容易实现这个需求。
具体操作为：选择“条件格式”-“色阶”-“红白绿色阶”，这样就使得涨幅大的数据自动显示深红色，跌幅大的数据自动显示深绿色。
### 2022-10-01\[资料]
操作系统是计算机专业重要的课程，对每一个从事软件开发的人都是很重要的课程。
* 从思想上， 你可以学到先辈的先进思想和经验，比如操作系统中的各种数据结构和算法。
* 从操作上， 可以帮助你更高效地使用操作系统。比如学习 shell 可以帮你更快写出脚本。
因此非常推荐大家进行学习。这里推荐一份《如何从零开始编写一个操作系统!》
via:
如果实在觉得啃得困难，可以看看《重学操作系统》这个资料
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2022-09
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2022-09
### 2022-09-30\[好文]
文章介绍了如下几种可以不使用括号执行函数的方法。
比如 alert(1337) 可以写成：
```js
alert`1337`;
```
甚至是这样：
```js
[].sort.call`${alert}1337`;
```
这有什么用？
* 有的放地方会静态检测代码有没有函数执行代码（invoke）。
* 看起来很酷 😎
* 。。。
via:
### 2022-09-29\[工具]
一个 nodejs 库，可以将你的 nodejs 应用打包为二进制包，支持多种操作系统。打包后就可以在不安装对应 nodejs 环境的情况下使用软件，因为 pkg 已经将依赖打包进去了。
via:
### 2022-09-27\[技巧]
今天学到了一个很巧妙的做图技巧。
如下图是中国人民银行日前发布的《2022 年人民币国际化报告》 中的一张图：
人民币如果和其他货币一个纵轴的话， 那么就会显得人民币很不显眼（事实就是这样）。 这里直接将人民币的纵轴画到右侧，这样从图上看人民币和其他的就差不多，甚至还特别领先！
因此如果你想要体验你是前 x 名，但是和前面的 x - 1 名差距非常大，就可以试试这个技巧。
### 2022-09-23\[好文]
webpack 项目如何配置 sourcemap， 开发环境和生成环境有什么不同？
我想仅仅映射到原文件怎么配置？我想映射到具体的行呢？ 我想映射到具体的行列信息呢？我不想把 sourcemap 和源文件一起打包，因为那样体积太大了，怎么配置？等等等等。。。
正所谓难者不会，会者不难。其实你只要知道了有几种配置，然后根据自己的情况排列组合即可。
via:
### 2022-09-16\[插件]
有些网站很讨厌， 给你禁用右键(right-click)，不能把复制之类的。 这个 chrome 插件可以帮你解决这个问题。 使用方式很简单，安装好后只有点一下就行。
via:
### 2022-09-15\[网站]
又一个可以可视化 Github 用户资料的网站，包含的信息非常全，包括 star， code 和 code review 等。
via:
### 2022-09-14\[好文]
elab 团队的《联机游戏原理入门即入土 -- 入门篇》， 对游戏开发感兴趣的可以读一读。
via:
### 2022-09-13\[网站]
输入 URL，它能够帮你分析这个网站的技术栈，并提供一些分析和建议。 比如：
* 包的大小版本
* 包的风险
* 包是否过期
* 等等
via:
### 2022-09-09\[仓库]
一个持续更新的 **打包 JavaScript 库的现代化指南**。
里面很多提到的大多数规则都是开源社区一致认可的最佳实践。如果你在开发为他人服务的 JavaScript 库代码， 那么可以参考下，即使你是在做公司内部项目。
> 有中文版本
via:
### 2022-09-08\[好文]
上个月刚刚更新的 Chrome devtool 调试技巧 **Modern web debugging in Chrome DevTools**， 这几个功能我个人非常期待，或许会大大提高我的调试效率。
除此之外还有一些其他的实验功能也很不错，推荐大家打开尝试一下。
via:
### 2022-09-07\[工具]
之前介绍过一个在线可视化生成 **nginx** 的网站。 而这个工具是类似的， 是一个 nginx 管理前端，通过它可以启动 nginx 服务并通过 UI 直接生成 nginx 配置。
via:
### 2022-09-06\[工具]
一个开源的 lldap， 可用于小型团队的验证服务。之前介绍过很多这种开源的给小公司团队的工具，比如堡垒机等。
via:
### 2022-09-05\[好文]
tsc --listFiles 可以列出来 ts 处理的所有文件。基于此可以使用一个工具对这些文件进行可视化分析，类似于 webpack 的包可视化工具。本文讲解了如何使用这个工具来分析并加速 tsc 编译速度。
via:
### 2022-09-04\[工具]
又一个检测 JS 内存泄漏的网站。
你只要告诉它你网站的进入和退出方法就可以使用 cli 来检测潜在的内存泄漏点。
### 2022-09-03\[网站]
目前国内比较便宜的 CDN 服务商（一个人搞的，好像不怎么出名）。感兴趣的可以先免费体验一个月。
via:
### 2022-09-02\[好文]
git 就是一个分布式存储系统。 我之前也从零实现过简化版的 Git。
而这篇文章更为细致，并配有大量图片，如果你对 git 原理感兴趣，非常值得深入阅读。目前已经更新了三篇。
via:
### 2022-09-01\[类库]
immerjs 是一个对标 immutable 的状态管理辅助库，优点是使用简单，一个 api 就可以搞定。缺点的话大概就是部分场景性能略差。至于原因，可以看看我之前写的这篇文章 《immutablejs 是如何优化我们的代码的？》，地址：
via:
## 关注我
我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
# 2022-08
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
## 2022-08
### 2022-08-31\[视频]
web3 的零基础科普视频。
via:
### 2022-08-30\[仓库]
这个工具可以将 Go 代码编译成 JS 代码。
via:
### 2022-08-29\[好文]
pico.js, 一个只有两 2kb 的人脸识别 JS 库？
via:
### 2022-08-26\[仓库]
upptime 是一个自动化检测网站可用性的仓库。你可以直接通过 Github 直接 fork 不用写一行代码，只要改改配置文件就可以生成自己的网站并监控自己想监控的任意网站。
如下是我自己生成的监控我旗下的四个网站的可用性。
via:
可以看出我的博客的访问时间是最长的，看来还是需要优化啊。
upptime 可以自动生成天，周，月，年的可用性报表，不用你做任何操作。
我在使用的过程目前还有一些小的 bug 没有解决，我还提了 issue。不过这不影响它的整体使用。
via:
### 2022-08-25\[好文]
如何开发一个简单的云服务？如果云函数需要使用数据怎么办？这边文章以 cloudflare 为例讲解了如何处理这一情况，内容非常详细。
其他云服务厂商也是非常类似的， 你甚至可以使用一些工具来屏蔽云服务厂商的差异（除了价格差异，很多差异都很容易屏蔽）。
via:
### 2022-08-21\[网站]
webauthn 是 web3 的验证方式，基于公钥/私钥体系， 你可以使用它来为你的 web3 应用接入鉴权。
### 2022-08-20\[仓库]
u 是一个类似 protobuffer 的序列化和反序列化方案，特点是面向 URL 的，因此编码的字符不会有不兼容 url 的字符，比如 `?`。
via:
### 2022-08-19\[网站]
一个基于 `web3` 的云盘，卖点是安全， 支持 10 GB 的免费存储。
via:
### 2022-08-18\[网站]
一个可以在线给文字加拼音的网站。
如果你想集成到你的项目或者应用里，只要下载它提供的字体即可。字体在 Github 上， 地址：
via:
### 2022-08-17\[仓库]
一个可以用 vue 写命令行工具的库。 如果你在写一个需要一些复杂 UI 的命令行工具，就可以考虑使用它。当然 React 也有类似的库，感兴趣的可以自行搜索下。
via：
### 2022-08-16\[好文]
《SSL 和 SSH 和 OpenSSH，OpenSSL 有什么区别》
via:
### 2022-08-17\[网站]
一个可以根据例子反推正则的工具，实际作用不大，更多的是参考。 就好像 copilot 的提供测试用例自动推导代码一样，参考作用更大一点。
via:
### 2022-08-16\[技巧]
如果你不知道怎么为你的程序写 release note， 可以参考 prisma 的这个，可以说是很正规和常见了，可以当做模板来使用。
via:
### 2022-08-12\[网站]
一个类似于 learn-anything 的工具网站，它可以提供一个关于技术岗位的 roadmap。比如前端，后端， 数据库工程师等等。
之前就有关注过这个网站， 只不过最近有一个重大更新分享给大家。
现在每一个学习项目都是可以点击的。点击后就可以看到推荐的学习资料， 有文章和视频。 我看了几个，资料还是非常高质量的。
via:
### 2022-08-16\[网站]
一个在线玩数独的网站。同时推荐一个在线玩五子棋的网站。