每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
chatgpt 发展了好久了， 很多人封装了一些工具给大家用。
比如
请用中文回答我。如果是代码问题，只提供代码，不要解释。
${query}
然后你的所有问题都会经过上面的包装，这样你不需要每个 thread 提问都告诉 gpt “用中文回答我。如果是代码问题，只提供代码，不要解释”。
openai 官方提供了类似的支持 Custom Instructions，目前是内测阶段，具体介绍请看文章。
via: https://sspai.com/post/81470
有时候我会写一些自动化脚本。 就有一些系统层面上的接口需求， 比如我想获取当前正在激活的窗口等等。这在传统的 shell 脚本中不提供的功能。
我是 Mac 用户，可以利用 osascript 来实现这个需求。Windows 不太熟悉，有知道的小伙伴欢迎告诉我。
学习 osascript 都做 Mac 上的自动化很有帮助，结合 afred 等工具，简直如鱼得水。
比如我就写过一个 create new file in current folder 的功能。它会获取当前激活的 finder 的路径，然后在其下新建文件。（要是 Mac 下原生右键有新建文件我可能就不会写这个自动化工具了）。核心代码参考:
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 来帮你写？大家可以去试试。
有些港剧会限制 IP，只有香港才能看，开了 VPN 也没用，可以试试埋堆堆。
via: https://www.mddcloud.com.cn
一个在线的海报制作工具。在如今很多工具都收费的时候， 可以用这个私有化部署到本地进行使用。
官方的介绍是：一款漂亮且功能强大的在线图片设计器，仿稿定设计，适用于多种场景：海报生成、电商产品图、文章长图、视频/公众号封面等，让设计更简单！（A beautiful online image designer, suitable for various scenarios like generate posters, making design easier.）
当然也可以当做技术进行学习，里面使用了很多主流的工具：
- moveable: 提供了画布中选择、拖动缩放等能力
- html2canvas: 前端生成图片兜底方案
- qr-code-styling: 风格化二维码
- sky: 参考了其 PSD 解析的实现
另外其是一个前后端同构的项目，这一点也可以学习一下（只不过很简单就是了，纯新手可能能够学习点东西）。
via: https://github.com/palxiao/poster-design
《Testing the dark scenarios of your Node.js application(测试 Node.js 应用程序的暗场景)》讲述了一些 node 服务测试中容易被大家忽略的点。比如应用启动不了的情况，请求超时的情况，文档和代码不一致的情况等等。
其中文档和代码不一致的方法这一点让我学到了，作者使用了 toSatisfyApiSpec 来进行类似于 snapshot 的测试。即根据你的请求返回值和文档文件（比如你使用了 openapi 做文档，那就是其导出的 yml 文件）进行对比，比如不一致就抛出错误。
有一个基于 jest 的工具 jest-openapi（https://www.npmjs.com/package/jest-openapi） 就是做这个的。
via: https://practica.dev/blog/testing-the-dark-scenarios-of-your-nodejs-application/
sortable 允许你给 HTML 的 table 标签增加一个 class="sortable" 就可以实现 sort 的功能。用法足够灵活， 需要注意的是在和目前主流的虚拟 DOM 框架结合使用的时候需要注意一下。
其原理很简单，就是绑定在 document 上一个 click 事件，handle 里进行判断，如果你点击的是 table 且有 sortable 的 class，并且点击的是表头，那么就将 table rows 进行排序，然后将排序后的结果 replaceChild 到原有的 table 上。
via: https://github.com/tofsjonas/sortable
都 2023 年了， node 20 终于即将支持 timer 的 mocke 了。使用后，用户使用 settimeout 和 setinterval 等 api 就不需要真正地等待那么久了。
其实很多测试库都支持，但是 node 原生一直没有支持，现在支持了。
之前我们业务中就有一个需求是每五分钟拉取一次数据， 然后处理一下。 有了它就可以 tick 5 分钟， 然后断言。
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: https://nodejs.org/en/blog/release/v20.4.0
一个新手导航插件，之前用过别的，这个插件的特点是体积小，无依赖，定制化程度也够用。
借助于 HTTP 提供的 range，我们可以实现断点续传， 分段传输的功能。
也可以基于 range 实现视频快速跳转（点击指定时间就会加载那一部分的视频， 你看视频的时候的灰色区域就是通过类似的方式加载的），其实这本质也是分段传输。
实现将视频分为很多段，用户点击后判断下其属于哪一段，然后利用诸如 range 来实现分段传输即可。
via: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Range
如何破解滑动验证码？
基本思想不是图像识别。而是利用滑块验证码中的滑块与周围图片的色差进行判断。即滑块会与周围图片有很大的色差，很违和。正因为如此， 人们才能识别出来应该滑动到哪里。
代码上，你可以将滑块放到 canvas 上，然后利用 canvas api 获取图片的像素信息，进而判断滑块的位置， 最后将滑块的位置和 token 传给后端。至于 token 怎么来，不同的网站方法会不同， 这篇文章就介绍了一种方式，以及破解思路。
via: https://mp.weixin.qq.com/s/iK_JkVRrh5vIRBjnQbDOyw
我之前一直想用代码写动画。
但是太麻烦了，如果有一套声明式的代码就可以写动画，那就太好了。
我之前的想法是设计一套声明式语言，然后转为 excalidraw 组件，最后根据一系列的 excalidraw 组件调用库就可以完成。
有一个现成的库可以基于 excalidraw 生成 svg 动画， 我一直在用，效果不错。
但是使用我们今天介绍的网站(remotion)也是一个很不错的思路。
via: https://www.remotion.dev/
mikan 是一个追番平台， 你可以直接在上面下载最新的番剧。我试了一下， 下载速度挺快的， 一分钟左右就可以下载一集 MP4 到本地，清晰度也不错。
我下载了一个 430 M，长度为 23m40s 的视频效果。
你也可以使用一些工具， 在线搭载一个在线视频播放网站， 从而打造一个自己专属的视频网站。
如果你愿意，也可以公开给别人。 不过这个 CDN 的费用恐怕会很高罢了。
另外，如果结合使用这个自动追番工具（https://github.com/EstrellaXD/Auto_Bangumi/wiki）， 则会自动生成你的专属番剧库。
via: https://mikanani.me/
据说是取代 gitalk 的工具。 gitalk 是基于 issue 做了，而此工具是基于 discuss。你可以直接使用网站（https://giscus.app/） 来快速生成接入代码。最后将代码复制集成到你的项目就好了。但是目前我这边一些配置并不能无缝从 gitalk 迁移到 giscus，因此我并没有取迁移，期待后面的完善。
via: https://github.com/giscus/giscus
给任意在线网站调速度。
只要网站的视频是使用 video 标签播放的(不是 flash) 都可以用这个方法。
打开开发工具，选中我们要控制的
$0 表示我们最近选中的元素，playbackRate 是 video 的一个熟悉，表示视频的播放速度，10 表示的是 10倍速。
一个免费的多语言语音转字幕工具，你可以上传一个视频过去，它会自动帮你提取其中的语音并生成字幕。
最主要的用处是帮你生成字幕，你也可以用它来快速知道视频里讲的内容， 结合 chatgpt 的总结功能， 会更好用。
via: https://godlucky.net/whisperapp/
我重新整理了下自己的公众号，并且我还给它换了一个名字脑洞前端，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 脑洞前端 ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
