---
url: https://sugarat.top/weekly/2024-07-21.md
description: >-
  ① JS 如何检测用户打开了大写锁定 ② 改善 console 开发体验 ③ polyfill.io 异常④ MathLive - 数学公式输入组件 ⑤
  Shell360 - 全平台支持的SSH客户端 ⑥ node:sqlite 工作进展 ⑦ 图片加载性能优化 ⑧ 前端开发一些流行术语 ⑨ WordSea -
  AI 生成单词图片
---

# 视野修炼第93期 | polyfill.io 异常

欢迎来到第 93 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. JS 如何检测用户打开了大写锁定](https://davidwalsh.name/detect-caps-lock)

使用 `KeyboardEvent` 的 `getModifierState` 方法。

```html
<input type="password">
<script>
document.querySelector('input[type=password]').addEventListener('keyup', (keyboardEvent) => {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock')
    if (capsLockOn) {
        alert('打开了大写锁定!')
    }
})
</script>
```

配合密码框输入使用，给予用户更友好的提示。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/04939ed70ba30350591ebde022863388)

### [2. 改善 console 开发体验](https://github.com/unplugin/unplugin-turbo-console)

使用 [unplugin-turbo-console](https://utc.yuy1n.io/) 插件。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/3b5ec80b93256dc13327d2adce8e1a61)

## 🔧开源工具&技术资讯

### [3. polyfill.io 异常](https://mp.weixin.qq.com/s/HSHvCS9bbDjm5cxCjAq45A?poc_token=HAAMnWajiLDMWe9FjX59n-j4TQHV8ZZUe_OTXfS4)

Polyfill.io 是一项服务，可以根据 UA 信息自动返回该浏览器需要的 polyfill 脚本。

> Polyfill.io 最初由英国《金融时报》网站开发团队创建。2024 年 2 月，该服务以及关联的域和 GitHub 帐户被出售给 CDN 提供商 Funnull。

可以在[仓库的 issues](https://github.com/polyfillpolyfill/polyfill-service/issues) 看到很多负反馈。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/12894dd3548c6cc30c0979d483ecf988)

CloudFlare 提供了[安全的 polyfill.io 镜像服务](https://cdnjs.cloudflare.com/polyfill/)，并在此前有[提前的预警](https://blog.cloudflare.com/polyfill-io-now-available-on-cdnjs-reduce-your-supply-chain-risk)。

`https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0`

### [4. MathLive](https://github.com/arnog/mathlive?tab=readme-ov-file) - 数学公式输入组件

![](https://cdn.upyun.sugarat.top/mdImg/sugar/7801d880fbbec23c09e84a9100ac4dc4)

提供编辑与预览数学公式的支持。

*先收藏，未来说不定能用上。*

### [5. Shell360](https://github.com/shell360/release) - 全平台支持的SSH客户端

> 支持 Windows、Linux、MacOS、iOS 以及Android。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/423e94ce9c1dafdc8ab0f37390901cb7)

体验了一下，能用但多少有点小 bug，移动设备用还行，PC 上可替代的很多。

### [6. node:sqlite 工作进展](https://github.com/nodejs/node/pull/53752#issuecomment-2227295638)

> SQLite是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/59f222bbe3aba304f4df43322ca4eb86)

该功能准备加入即将发布的 Node v22.5 中。

## 📚 教程&文章

### [7. 图片加载性能优化](https://mp.weixin.qq.com/s/6YUuE8IJ-B9XF9On6LmLKw)

> 对电商网页的性能而言，图片优化是至关重要的事情，本文就此探讨了一些简单、可靠的图片优化手段。

* 提前首屏图片的加载时机
* 降低加载图片的体积
* 减少加载图片的数量

### [8. 前端开发一些流行术语](https://remotesynthesis.com/blog/navigaitng-frontend-buzzwords/)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/fb6f39cb27e3617039f9de424dec07c8)

## 🤖AI工具&资讯

### [9. WordSea](https://wordsea.xyz/) - AI 生成单词图片

在线英文词典，主要特色是会给单词附上一张 AI 生成的图片。

| rocket                                                                          | beautiful                                                                       |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| ![](https://cdn.upyun.sugarat.top/mdImg/sugar/b39bc285553545b8e296792972e9e17e) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/be7308e8b53b40e523a0793d6ca2cf62) |

## 😛趣图

![](https://cdn.upyun.sugarat.top/mdImg/sugar/4afcc5c7adfa7c823b302dd6a0c1b9b6)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流