2024-01
Last updated
Last updated
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。
drizzle-orm 是一个用于操作数据库的无头 ORM，它可以帮助你更加方便地操作数据库。
之前我一直使用的是 waterline 和 prism。
via: https://github.com/drizzle-team/drizzle-orm
从代码中删除过时内容的价值是不可否认的。然而，找到它们是一项手动且乏味的工作。这就是 Knip 的用武之地。随着代码库的复杂性和规模的增长，自动化和全面的工具变得至关重要。
via: https://knip.dev/overview/getting-started
给大家推荐几个 ai 聊天工具。
Google 出的 Google Gemini Pro，可以免费使用。地址： https://googlegemini.co/try-google-gemini-for-free
perplexity 是我最早使用的 ai 聊天工具之一，同样免费使用。地址：www.perplexity.ai
glados 也支持集成 chatgpt。如果你使用了 glados 的服务，那么也可以免费使用。地址：https://glados.space/landing/M9OHH-Q88JQ-DX72D-R04RN
如果有条件，可以直接使用 openai（主要是可能会限制某些区域的 IP 地址）。 https://platform.openai.com
豆包。头条出的 ai 聊天工具，可以免费使用。地址：https://www.doubao.com/?hh=1
copilot。如果你使用了 copilot，那么 copilot chat 也可以免费使用。比如我使用了 vscode，那么右下角就会出现一个 chat 的按钮，点击即可使用。
我个人更建议使用 3 和 6，这也是目前我在使用的两个工具。
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: https://github.com/williamtroup/Heat.js
Refine 在设计上是 headless(无头)的，因此提供了无限的样式和自定义选项。
"headless" 指的是一个系统或框架没有预定义的前端界面。这意味着它不会限制你如何设计和实现用户界面。你可以使用任何你喜欢的技术和工具来创建用户界面，这就为样式和定制提供了无限的可能性。
在 web 开发中，"headless" 通常用于描述那些只提供 API（如 RESTful API 或 GraphQL API）而不提供预定义用户界面的后端系统。这种设计方式的优点是灵活性高，可以根据项目的需要选择最合适的前端技术。缺点是可能需要更多的开发工作，因为你需要自己从头开始创建用户界面。
via: https://github.com/refinedev/refine
如何清除 input 输入框历史下拉数据？
有时候我们在 input 中输入东西的时候会出现历史记录，这很容易泄漏隐私。一般的浏览器清除是无法清除这样的数据的。那么如何清除呢？
主要有两种方式：
取消自动填充。
这里以谷歌浏览器为例，在浏览器地址栏输入：
关闭自动填充表单即可（自动填充和密码下面的每一项都可以关闭），这样处理后所有网站下的 input 框都不会出现历史记录了。
删除历史输入记录。
当已输入过的输入框中，点一下输入框就会自动带出先前所输入过的文字，接着当要删除某个文字记录时，只需将滑鼠滑到上方，再按 Shift+fn+Del 键(MAC)/Shift+Del 键(Win)，就可将它删除。
个人推荐第二种，毕竟第一种会影响其他网站的自动填充功能，并且无法再次开启的话仍然会再次泄漏隐私。
原文标题：《The Who, What, When, Where, Why and How of Image Optimization in Angular》。
本文结合 chrome 提出的若干关键浏览器指标，介绍了如何使用 angular 来优化图片加载。
angular 新增了 ngSrc 指令，它可以帮助我们更好地优化图片加载。这篇文章介绍了如何使用这个指令来优化图片加载。
这是 angular 团队与 chrome 团队合作成果！尽管你仍然可以自己去实现这个功能，但是这个指令可以帮助你更加方便地实现这个功能。结合 provider 可以更加精细化控制图片的加载策略。比如这里的 loaderParams。
via: https://angularindepth.com/posts/1522/the-who-what-where-when-why-and-how-of-image-optimization-in-angular
bit 一种相对新的组件开发方式。 我在前一家公司就使用了 bit 来管理组件。它可以帮助你更好地管理组件，从而提高组件的复用性。
shadcn 和 radix 和 bit 有点类似。他们都强调弱组件库，他们都不是组件库。你需要什么组件，就添加什么组件。每一个组件都是独立的，可以单独发布，也可以单独使用。
radix 可以单独 install 单个组件。比如这样：
而 shadcn 则更干脆，你直接使用命令行，将组件源码下载到你本地，并安装组件的依赖。参考：https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts
值得一提的是 shadcn 是 2023 年最火的 ui 组件集成工具。不过并不像 bit 一样你可以在上面开发组件。
via:
https://ui.shadcn.com/docs
https://www.radix-ui.com/primitives/docs/overview/getting-started
sms-active 是一个可以帮助你接收短信验证码的网站，它可以帮助你接收各种网站的短信验证码，从而帮助你注册各种网站。
这在：
网站需要短信验证码的时候非常有用，比如你想注册一个网站，但是你不想给他们你的手机号，那么你可以使用这个网站来接收验证码。
网站限定手机归属地必须是某个国家的时候，你可以使用这个网站来接收验证码。
这个网站是付费的。
via: https://sms-activate.org/en/getNumber
很多网站提供了 RSS 订阅，但是 RSS 的订阅地址并不是很好找，网站作者很少有一个认知，那就是：如果你提供了 RSS 订阅，那么大方地放在主页上，这样可以让更多的人知道你提供了 RSS 订阅。
你如果你使用 RSS 管理工具， 一定试过将一个你关心的网站添加到 RSS 订阅却发现找不到订阅地址。而其实网站提供了 RSS 订阅地址，只是藏的很深。因此网站作者在主页标签里明确告诉读者和 RSS 阅读器：”我提供了 RSS 订阅，你可以订阅我的 RSS“ 是一种非常好的做法。
我的博客就提供了这样的一个标签来告诉大家我提供了 RSS 订阅，你可以在这里找到我的 RSS 订阅地址。
这篇文章 《Exposed RSS （公开的 RSS）》 就讨论了这个问题。
博客地址：https://lucifer.ren/blog/
via: https://chriscoyier.net/2024/01/13/exposed-rss/
oxlint 是一个用于检查 rust 代码的工具，它可以检查 rust 代码中的一些常见错误。相比 eslint 来说， 它更快，并且提示信息更加友好。
使用方法和 eslint 类似，集成到你的项目也非常的简单，可能就只需要几秒钟。不过它并不是 eslint 的替代品，目前还不支持插件。不过我相信它会越来越好用的。
via: https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html
这是一篇关于如何在浏览器中实现一个协同编辑器的文章，它介绍了如何使用 OT 算法来实现一个协同编辑器。
OT 算法是一种用于解决协同编辑问题的算法，它的核心思想是将编辑操作转换为操作序列，然后在客户端和服务端分别执行这个操作序列，从而达到同步的目的。 实现上， 客户端和服务端通过 docReq 和 docRes 两个接口来进行通信。
如果你对协同编辑器感兴趣或者正在实现协同编辑，那么这篇文章是一个不错的开始，尽管这篇文章使用 GO 写的，但是重在领会思想。
via: https://www.aadhav.me/posts/collaborative-editor#h5o-23
这篇文章介绍了如何在 mac 上使用两个 github 账号，这在我们同时使用公司和个人账号的时候非常有用。
通过这篇文章，我学到了：
通过如下命令可以切换 ssh 验证使用的私钥
git config 文件可以使用 path 来指定配置文件位置。
git config 支持条件语句 includeIf
via: https://fayazahmed.com/articles/how-to-use-two-github-accounts-on-a-macbook-the-right-way
pix2tex - LaTeX OCR 是一个将图片转换为 LaTeX 的工具，它可以将图片中的公式转换为 LaTeX 代码，从而直接粘贴出来。
这在一些不提供复制功能的地方很有用。 虽然我认为网站应该自己提供复制功能，但是有时候我们也无法改变这些事实，所以这个工具还是很有用的。
不过可惜的是，这个工具还不是特别好用，算是勉强可用吧，毕竟是免费的工具。它的准确率还不是特别高，不过这个工具还是很有潜力的，我相信它会越来越好用的。
via: https://github.com/lukas-blecher/LaTeX-OCR
我重新整理了下自己的公众号，并且我还给它换了一个名字脑洞前端，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。
之后我的文章会同步到微信公众号 脑洞前端 ，你可以关注获取最新的文章，并和我进行交流。
另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
