---
url: https://sugarat.top/weekly/2024-07-14.md
description: >-
  ① YakShaving - 薅牛毛 ② CSS OneLiners ③ Vue Vine - 单文件编写多 Vue 组件 ④ CDN 流量被盗刷经历 ⑤
  es-toolkit ⑥ console.log 体验优化 ⑦ 诗境 - 根据图片匹配诗句
---

# 视野修炼第92期 | 薅牛毛

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. YakShaving - 薅牛毛](https://feday.fequan.com/vueconf24/antfu_VueConf%20CN%202024.pdf)

antfu 在 Vue Conf 上的分享，讲述了他的开源之路，以及在做的过程中容易陷入薅牛毛的过程。

下面就是一个例子，挺形象的，大部分做开发的同学或多或少经历过。

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

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

> 利用“薅牛毛”：在解决问题的过程中，可能会引发一系列任务，这些任务可能会偏离原始目标。然而，这也可以看作是一个机会，通过集社区之力，完善解决方案，最终实现项目的成功。

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

视频的观点还有很多，非常建议对开源感兴趣的同学看看。

最后再看一下大佬的 `耗牛地图`，🐂 已经不足以形容的超级个体。

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

*[VueConf](https://vueconf.cn/) 完整 PPT 可以去会议官网获取*

### [2. CSS OneLiners](https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project)

> 一组简单的单行 CSS 解决方案，可为任何网页添加少量改进

挑2个来介绍一下。

① 限制视口中的内容宽度

```css
body {
  max-width: clamp(320px, 90%, 1000px);
  margin: auto;
}
```

`clamp` 是一个 CSS 函数，用于创建一个范围内的动态值。

`clamp(MIN, VAL, MAX)` 等价于 `max(MIN, min(VAL, MAX))`

② 表单控件颜色以匹配页面样式

```css
body {
  accent-color: #080;
}
```

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

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

### [3. Vue Vine](https://vue-vine.dev/) - 单文件编写多 Vue 组件

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

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

使用 `.vine.ts` 后缀，能够使用完整的 TS 支持。

### [4. CDN 流量被盗刷经历](https://mp.weixin.qq.com/s?__biz=MzA4ODMyMTk5OA%3D%3D\&mid=2247486267\&idx=1\&sn=3b4a9d121008fb0866862cc1f983bfe0\&chksm=902ab19aa75d388c7a85d0409c5c53f5c8414be309e1244d93168c7829499f4ed6daccd38f99\&token=1284260959\&lang=zh_CN#rd)

亏了 70 RMB，本文记录了一下这个过程，以及一些防治手段。

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

### [5. es-toolkit](https://github.com/toss/es-toolkit/blob/main/README-zh_hans.md)

现代的、高性能的 JavaScript 实用工具库 - 类似于 Lodash，支持常见的 Node Bun Deno 等运行时。

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

一个例子

```js
// import from '@es-toolkit/es-toolkit' in jsr.
import { chunk, debounce } from 'es-toolkit'

const debouncedLog = debounce((message) => {
  console.log(message)
}, 300)

// 这个调用将会被防抖处理
debouncedLog('Hello, world!')

const array = [1, 2, 3, 4, 5, 6]
const chunkedArray = chunk(array, 2)

console.log(chunkedArray)
// 输出: [[1, 2], [3, 4], [5, 6]]
```

### 6. console.log 体验优化

> console 很容易上手，但输出过多的上下文容易混乱不方便查看。

有 3 个工具，能够在IDE中的代码旁边显示 console.log 值和错误。

* [Wallaby.js](https://wallabyjs.com/)
* [Quokka.js](https://quokkajs.com/)
* [Console Ninja](https://console-ninja.com/)

## 🤖AI工具&资讯

### [7. 诗境](https://photo2poem.top) - 根据图片匹配诗句

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

挺有趣的！

## 😛趣图

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

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<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) - 前后端技术周刊精选推荐信息流