---
url: https://sugarat.top/weekly/2024-09-16.md
description: >-
  ① align-content - 垂直居中普通元素 ② up mode - 一键隐藏 Chrome 插件 ③ Chrome 性能面板新功能 ④
  k-colors.js - 图片主色提取 ⑤ 英：优化JS性能的一些技巧 ⑥ 英：Web 的剪贴板，如何存储不同类型的数据 ⑦ 英：不简单的 js 入门教程
  ⑧ Peter Cat - GitHub 仓库智能答疑机器人
---

# 视野修炼第101期 | 垂直居中

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

\[\[toc]]

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

## 🔥强烈推荐

### [1. align-content](https://www.zhangxinxu.com/wordpress/2024/09/css-align-content/) - 垂直居中普通元素

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

```html
<style>
    ul {
        height: 300px;
        width: 200px;
        border: solid;
        align-content: center;
    }
</style>
<ul>
    <li>段落1.。。。。。</li>
    <li>段落2</li>
</ul>
```

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

### [2. up mode](https://github.com/cunzaizhuyi/up-mode-extension) - 一键隐藏 Chrome 插件

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

很实用！

> 可以在截屏或录制视屏时，隐藏地址栏的浏览器插件图标。

### [3. Chrome 性能面板新功能](https://www.debugbear.com/blog/fix-web-performance-devtools#how-to-use-the-new-performance-panel-features)

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

目前还是实验性功能，需要自己在设置中打开。

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

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

### [4. k-colors.js](https://github.com/ppzreboot/k-colors.js) - 图片主色提取

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

可以用到一些需要根据图片适配主题色的场景。

## 📚教程&文章

### [5. 英：优化JS性能的一些技巧](https://romgrk.com/posts/optimizing-javascript#1-avoid-string-comparisons)

1. 避免字符串比较：使用数字枚举替代
2. 使用 for 循环替代链式(.map.filter.reduce)调用操作数组
3. 避免字符串操作过程中发现变更：使用字符串拼接替代需要创建新变量的场景
4. 合适的数据结构：`Set.has` 优于 `Array.includes`

*挑了几个仅供参考：在某些需要极致优化的包含复杂计算的场景可以试试。*

### [6. 英：Web 的剪贴板，如何存储不同类型的数据](https://alexharri.com/blog/clipboard)

文章探讨了 Web 上的复制和粘贴工作方式、如何处理不同的数据类型。

*富文本，带样式文本，图片等等资源的网页 CV 处理能够用到。*

### [7. 英：不简单的 js 入门教程](https://frontendmasters.com/blog/a-complete-guide-to-beginning-with-javascript/)

包含必要的背景知识、上下文和第三方资源。

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

## 🤖AI工具&资讯

### [8. Peter Cat](https://github.com/petercat-ai/petercat) - GitHub 仓库智能答疑机器人

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

提供 GitHub 地址即可自动生成答疑机器人，便捷的集成。

*蚂蚁团队开源的！*

## 😛趣图

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

## ⭐️强力推荐关注

> 周刊部分内容来源如下渠道，推荐大家关注。

* [阮一峰: 科技爱好者周刊](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.fre321.com/weekly) - 技术周刊精选推荐信息流