3 分钟阅读

十五周刊 - 112

2024 第 17 周周报

欢迎来到十五周刊，我们每周都会分享有价值的前端技术文章，让你随时掌握前端的最新动态。此外，我们还会介绍一些实用的软件工具，帮助你提升工作效率。同时，我们也会分享一些个人生活感悟，希望通过分享，能够给你的生活带来一些启示和思考。希望你会喜欢我们的内容。

iOS safari 自动放大页面如何防止中文输入法的回车误触发 input 的回车事件优化 Vercel 部署的页面在国内的访问开源轻量录屏工具 QuickRecorder录屏+分享工具 Cap资源监视器 btopVSCode 支持给 Tab 页设置标签菜单栏日历 Calendr我做了什么博客优化

iOS safari 自动放大页面

当字号小于 16px，输入框聚焦时，safari 会自动放大页面。这是 safari 为了让用户更容易看清楚输入框内容而做的优化。

解决方法：将字号设置为 16px 及以上。

如何防止中文输入法的回车误触发 input 的回车事件

使用 isComposing 属性来判断当前是组合输入状态，还是输入完成状态。

tsx
1<Input
2  onKeyDown={(e) => {
3    if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
4      onClickSearch()
5    }
6  }}
7/>

优化 Vercel 部署的页面在国内的访问

面条
面条
@ccbikai
·Follow

好多人在讲 Vercel 部署的时候，都会提到国内网络访问的问题。其实 Vercel 有一些 IP 是可以国内正常访问的。使用 DNS 分区解析。国内解析到固定 IP，国外解析到泛播 IP 就行。 有需要的可以直接使用我的 CNAME vercel.dns.surf , 测试可以使用 chi.miantiao.me

Image
Image
156
Reply
Read 13 replies

开源轻量录屏工具 QuickRecorder

https://github.com/lihaoyun6/QuickRecorder

录屏+分享工具 Cap

https://github.com/CapSoftware/Cap

Loom 的开源替代品，支持录屏、分享。

资源监视器 btop

https://github.com/aristocratos/btop

可以显示系统资源使用情况，例如 CPU、内存、磁盘、网络、执行进程等。

VSCode 支持给 Tab 页设置标签

菜单栏日历 Calendr

https://github.com/pakerwreah/Calendr

之前我们在 Mac 配置指南 中推荐过一个日历软件 Itsycal，Calendr 是一个类似的菜单栏日历软件。但是其半透明的设计更加符合 macOS 的设计风格。

我做了什么

博客优化

  1. 增加搜索功能

利用 Google 搜索为博客增加搜索功能，不过一般情况下新增加的页面需要等待一周到一个月才能被 Google 收录。接下来需要优化博客在 Google 的搜索结果。

  1. 使用 Artitalk 为博客增加评论功能

  1. 图片模糊加载

使用 Nextjs 的 Image 组件，配合 plaiceholder 实现图片模糊加载效果。

不过对于文章正文的图片，如果使用 plaiceholder 生成模糊图片，会导致页面加载速度变慢(这是因为需要 nodejs 在服务端处理，所以需要所有图片处理完成页面才能加载)。最终正文图片使用阿里云 OSS 的图片处理功能，生成模糊图片。