2024-01


每天给你推荐一个新奇,好玩,高品质的开源库,好文,观点或言论等。
项目主页维护当前月份的内容,想看往期内容,可以翻到下方历史汇总部分,然后选择自己感兴趣的月份点进去即可。
2024-01
2024-01-31[工具]
drizzle-orm 是一个用于操作数据库的无头 ORM,它可以帮助你更加方便地操作数据库。
之前我一直使用的是 waterline 和 prism。
via: https://github.com/drizzle-team/drizzle-orm
2024-01-30[工具]
从代码中删除过时内容的价值是不可否认的。然而,找到它们是一项手动且乏味的工作。这就是 Knip 的用武之地。随着代码库的复杂性和规模的增长,自动化和全面的工具变得至关重要。
via: https://knip.dev/overview/getting-started
2024-01-29[工具]
给大家推荐几个 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,这也是目前我在使用的两个工具。
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: https://github.com/williamtroup/Heat.js
2024-01-22[好文]
Refine 在设计上是 headless(无头)的,因此提供了无限的样式和自定义选项。
"headless" 指的是一个系统或框架没有预定义的前端界面。这意味着它不会限制你如何设计和实现用户界面。你可以使用任何你喜欢的技术和工具来创建用户界面,这就为样式和定制提供了无限的可能性。
在 web 开发中,"headless" 通常用于描述那些只提供 API(如 RESTful API 或 GraphQL API)而不提供预定义用户界面的后端系统。这种设计方式的优点是灵活性高,可以根据项目的需要选择最合适的前端技术。缺点是可能需要更多的开发工作,因为你需要自己从头开始创建用户界面。
via: https://github.com/refinedev/refine
2024-01-19[技巧]
如何清除 input 输入框历史下拉数据?
有时候我们在 input 中输入东西的时候会出现历史记录,这很容易泄漏隐私。一般的浏览器清除是无法清除这样的数据的。那么如何清除呢?
主要有两种方式:
取消自动填充。
这里以谷歌浏览器为例,在浏览器地址栏输入:
chrome://settings/autofill
关闭自动填充表单即可(自动填充和密码下面的每一项都可以关闭),这样处理后所有网站下的 input 框都不会出现历史记录了。
删除历史输入记录。
当已输入过的输入框中,点一下输入框就会自动带出先前所输入过的文字,接着当要删除某个文字记录时,只需将滑鼠滑到上方,再按 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。
<img
[ngSrc]="'photo-1417325384643-aac51acc9e5d'"
[loaderParams]="{ compression: 50 }"
fill
priority
ngSrcset="300w, 800w, 1500w"
/>
via: https://angularindepth.com/posts/1522/the-who-what-where-when-why-and-how-of-image-optimization-in-angular
2024-01-17[工具]
bit 一种相对新的组件开发方式。 我在前一家公司就使用了 bit 来管理组件。它可以帮助你更好地管理组件,从而提高组件的复用性。
shadcn 和 radix 和 bit 有点类似。他们都强调弱组件库,他们都不是组件库。你需要什么组件,就添加什么组件。每一个组件都是独立的,可以单独发布,也可以单独使用。
radix 可以单独 install 单个组件。比如这样:
npm install @radix-ui/react-popover@latest -E
而 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
2024-01-12[好文]
sms-active 是一个可以帮助你接收短信验证码的网站,它可以帮助你接收各种网站的短信验证码,从而帮助你注册各种网站。
这在:
网站需要短信验证码的时候非常有用,比如你想注册一个网站,但是你不想给他们你的手机号,那么你可以使用这个网站来接收验证码。
网站限定手机归属地必须是某个国家的时候,你可以使用这个网站来接收验证码。
这个网站是付费的。
via: https://sms-activate.org/en/getNumber
2024-01-11[好文]
很多网站提供了 RSS 订阅,但是 RSS 的订阅地址并不是很好找,网站作者很少有一个认知,那就是:如果你提供了 RSS 订阅,那么大方地放在主页上,这样可以让更多的人知道你提供了 RSS 订阅。
你如果你使用 RSS 管理工具, 一定试过将一个你关心的网站添加到 RSS 订阅却发现找不到订阅地址。而其实网站提供了 RSS 订阅地址,只是藏的很深。因此网站作者在主页标签里明确告诉读者和 RSS 阅读器:”我提供了 RSS 订阅,你可以订阅我的 RSS“ 是一种非常好的做法。
我的博客就提供了这样的一个标签来告诉大家我提供了 RSS 订阅,你可以在这里找到我的 RSS 订阅地址。
<link rel="alternate" href="/blog/atom.xml" title="lucifer的网络博客" />
这篇文章 《Exposed RSS (公开的 RSS)》 就讨论了这个问题。
博客地址:https://lucifer.ren/blog/
via: https://chriscoyier.net/2024/01/13/exposed-rss/
2024-01-08[工具]
oxlint 是一个用于检查 rust 代码的工具,它可以检查 rust 代码中的一些常见错误。相比 eslint 来说, 它更快,并且提示信息更加友好。
使用方法和 eslint 类似,集成到你的项目也非常的简单,可能就只需要几秒钟。不过它并不是 eslint 的替代品,目前还不支持插件。不过我相信它会越来越好用的。
via: https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html
2024-01-07[好文]
这是一篇关于如何在浏览器中实现一个协同编辑器的文章,它介绍了如何使用 OT 算法来实现一个协同编辑器。
OT 算法是一种用于解决协同编辑问题的算法,它的核心思想是将编辑操作转换为操作序列,然后在客户端和服务端分别执行这个操作序列,从而达到同步的目的。 实现上, 客户端和服务端通过 docReq 和 docRes 两个接口来进行通信。
如果你对协同编辑器感兴趣或者正在实现协同编辑,那么这篇文章是一个不错的开始,尽管这篇文章使用 GO 写的,但是重在领会思想。
via: https://www.aadhav.me/posts/collaborative-editor#h5o-23
2024-01-04[好文]
这篇文章介绍了如何在 mac 上使用两个 github 账号,这在我们同时使用公司和个人账号的时候非常有用。
通过这篇文章,我学到了:
通过如下命令可以切换 ssh 验证使用的私钥
alias git_personal="(ssh-agent) && ssh-add ~/.ssh/personal"
alias git_work="(ssh-agent) && ssh-add ~/.ssh/work"
git config 文件可以使用 path 来指定配置文件位置。
git config 支持条件语句
includeIf
[includeIf "gitdir:~/"]
path = ~/.gitconfig-personal
[includeIf "gitdir:~/Work/"]
path = ~/.gitconfig-work
[core]
excludesfile = ~/.gitignore
via: https://fayazahmed.com/articles/how-to-use-two-github-accounts-on-a-macbook-the-right-way
2024-01-03[工具]
pix2tex - LaTeX OCR 是一个将图片转换为 LaTeX 的工具,它可以将图片中的公式转换为 LaTeX 代码,从而直接粘贴出来。
这在一些不提供复制功能的地方很有用。 虽然我认为网站应该自己提供复制功能,但是有时候我们也无法改变这些事实,所以这个工具还是很有用的。
不过可惜的是,这个工具还不是特别好用,算是勉强可用吧,毕竟是免费的工具。它的准确率还不是特别高,不过这个工具还是很有潜力的,我相信它会越来越好用的。
via: https://github.com/lukas-blecher/LaTeX-OCR
关注我
我重新整理了下自己的公众号,并且我还给它换了一个名字脑洞前端
,它是一个帮助你打开大前端新世界大门的钥匙 🔑,在这里你可以听到新奇的观点,看到一些技术尝新,还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑,帮助大家快速理解,图解是我的目标。
之后我的文章会同步到微信公众号 脑洞前端
,你可以关注获取最新的文章,并和我进行交流。
另外你可以回复大前端进大前端微信交流群, 回复 leetcode 拉你进 leetcode 微信群,如果想加入 qq 群,请回复 qq。
Last updated
Was this helpful?