---
url: https://sugarat.top/weekly/2024-05-26.md
description: >-
  ① pic-smaller - 图小小 ② 精美的 CSS 背景图 ③ js 进阶问题  ④ Vue Fluid DnD - 适用于Vue的拖拽库 ⑤
  径向渐变背景生成 ⑥ TrasHTTPandas - HTTP 状态码测试 ⑦ 不使用font-weight实现文字变瘦或变胖效果 ⑧
  256字节生成一个动态的城市画面
---

# 视野修炼第85期 | 图小小

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. pic-smaller](https://github.com/joye61/pic-smaller) - 图小小

基于 `Web WASM` 实现的在线图片压缩工具（纯前端，无需上传至服务端），支持多种常见图片格式`JPEG, PNG, WEBP, AVIF, SVG, GIF`。

压缩质量可以媲美 tinypng ，操作界面也非常友好。

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

支持预览压缩前后效果对比。

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

*整体效果还是很不错滴。*

### [2. 精美的 CSS 背景图](https://css-pattern.com/)

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

支持一键复制 CSS 代码，比如下面这个。

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

```css
html {
  --s: 120px; /* control the size*/
  --c1: #e7525b;
  --c2: #b3ffc6;
  
  --_g: 80%,var(--c1) 25.4%,#0000 26%;
  background:
   radial-gradient(at 80% var(--_g)),
   radial-gradient(at 20% var(--_g)),
   conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) 
      calc(var(--s)/2) 0;
  background-size: var(--s) var(--s);
}
```

### [3. js 进阶问题](https://github.com/lydiahallie/javascript-questions/blob/master/zh-CN/README-zh_CN.md)

仓库收集了许多 js 语法特色相关的问题`究极八股`，感兴趣的可以下来尝试一下。

*我来摘抄2个有意思的。*

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

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

### [4. Vue Fluid DnD](https://vue-fluid-dnd.netlify.app/) - 适用于Vue的拖拽库

专为列表场景设计。

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

使用非常简单，对原代码极低的侵入性。

```html
<script setup lang="ts">
import { useDragAndDrop } from "vue-fluid-dnd";
const { parent } = useDragAndDrop(list);
<script>
<template>
   <ul ref="parent">
      <li v-for="(element, index) in list" :index="index">
        {{ element }}
      </li>
   </ul>
</template>
```

### [5. 径向渐变背景生成](https://gradientor.app/)

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

### [6. TrasHTTPandas](https://httpraccoons.com/) - HTTP 状态码测试

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

*网站提供各种状态码的 HTTP 响应，可以用来调试各种状态码的响应情况。*

## 📚 教程&文章

### [7. 不使用font-weight实现文字变瘦或变胖效果](https://www.zhangxinxu.com/wordpress/2024/05/svg-femorphology-font-weight-thin-stretch/)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/be462602a6c0d70ebffa035bea5596a1)
利用 SVG 滤镜实现，核心代码如下

```html
<style>
data {
  font-size: 2.5rem;
  font-family: system-ui;
}
.erode {
  filter: url(#erode);
}
</style>
<data class="erode">苗条文案</data>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
</svg>
```

### [8. 256字节生成一个动态的城市画面](https://frankforce.com/city-in-a-bottle-a-256-byte-raycasting-system/)

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

全部代码如下

```html
<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>
```

利用 canvas + 一段算法。

*牛逼！当然作者也在文章里揭秘了原理，感兴趣的可以深入研究一下。*

## 😛趣图

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

***

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