---
url: https://sugarat.top/weekly/2024-03-10.md
description: >-
  ① Rolldown 开源 - Rollup 的锈化版 ② 前端调试工具超全汇总 ③ OhMyLive2D - Live2D Web 看板组件 ④
  100万级安装量的开源作品，一年有多少打赏收入？ ⑤ Web-Check - 开源的网站分析工具 ⑥ Safari 提供原生 HTML Switch 控件
  ⑦ Simple Icons - 流行标志的 SVG 图标 ⑧ CSS 中玩转 Infinity
---

# 视野修炼第76期 | Rolldown 开源

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. Rolldown](https://rolldown.rs/) 开源 - Rollup 的锈化版

Rolldown 是一个用 Rust 编写的 JavaScript bundler，旨在作为 Vite 中使用的未来bundler。

![](https://img.cdn.sugarat.top/mdImg/sugar/1b2c35fc4b22363440d8d5d103133045)

提供了和 Rollup 兼容的API。

*🚧 Work in Progress 🚧，Rolldown 目前正在积极开发中，尚未用于生产。*

*学习 Rust 🦀 得提上日程了，不然以后要排查问题源码都看不懂了。*

### [2. 前端调试工具超全汇总](https://mp.weixin.qq.com/s/Y0fJgPPKsNG1lg-MwtA5OQ)

![](https://img.cdn.sugarat.top/mdImg/sugar/a293b8c8a7fb7fc69c459a30c49a4a26)

没用过的赶紧尝试一下。

*笔者用过提到的差不多 80% 的工具，提效杠杠的！*

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

### [3. OhMyLive2D](https://oml2d.hacxy.cn/) - Live2D Web 看板组件

项目已集成 Cubism 2.1 与 Cubism 5.0.0 ，完整覆盖了从 model2 到 model4 的所有版本。

![](https://img.cdn.sugarat.top/mdImg/sugar/3578c930e1d79f21e7cbd978788a4426)

*接入非常简单，快为你的网站添加一个看板娘吧！*

### [4. 100万级安装量的开源作品，一年有多少打赏收入？](https://juejin.cn/post/7341593721100451880)

作者写了一个网页播放器优化脚本，但一年只收到了 330 米的打赏收入。

![](https://img.cdn.sugarat.top/mdImg/sugar/834ec8d78047b8173155d9dd9f93752b)

*作者的劝告：**千万不要寄望通过打赏/捐赠来激发你的开发热情，或打算以此来维持生计！***

### [5. Web-Check](https://web-check.xyz) - 开源的网站分析工具

> 可以分析网站的 IP 信息、SSL 链、DNS 记录、Cookie、域名信息、服务器位置、网站性能等

![](https://img.cdn.sugarat.top/mdImg/sugar/d060995223d1001eb5bb1d3198afaa4b)

### [6. Safari 提供原生 HTML Switch 控件](https://frontendfoc.us/link/152138/web)

![](https://img.cdn.sugarat.top/mdImg/sugar/784eaf29bb3d0fc268a795c6e4df73a1)

*Safari 17.4 引入*

### [7. Simple Icons](https://simpleicons.org/) - 流行标志的 SVG 图标

![](https://img.cdn.sugarat.top/mdImg/sugar/3526c1139a051e3dc37e48c35c7dff4b)

## 📚 教程&文章

### [8. CSS 中玩转 Infinity](https://codersblock.com/blog/playing-with-infinity-in-css/)

分享个最有意思的，与 z-index 配合 `Infinity`

![](https://img.cdn.sugarat.top/mdImg/sugar/a5bdd5b3663acbfc2cedefa3fc6ed901)

```css
selector {
    z-index: calc(infinity);
}
```

*再也不会被其它元素顶掉了!*

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/sugar/b7e7f3757c861e0f81e3996d28956092)

![](https://img.cdn.sugarat.top/mdImg/sugar/c19f9b2c0324c13c16816fa3834b9d36)

## ⭐️强力推荐关注

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