---
url: https://sugarat.top/weekly/2024-03-03.md
description: >-
  ① JSR - Deno 开发的新的 js 注册表 ② Node.js 新官网 - beta ③ 获取 Web 性能指标的精选代码片段 ④ Mojo CSS
  - 新的CSS原子化框架 ⑤ Omnivore - 稍后阅读工具 ⑥ tsdiagram - 可视化生成TS关系图表 ⑦ 自渲染的 "Eval Shirt"
  - StackBlitz 官方整活 ⑧ shoelace - 具有前瞻性的Web Components 组件库 ⑨ CSS :has() 交互式指南 ⑩
  image2music - AI 图像音乐生成器 ⑪ AI没有护城河，OpenAI也没有 ⑫ 魅族 All in AI
---

# 视野修炼第75期

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. JSR](https://mp.weixin.qq.com/s/k7pNE5wOWtnhEb-XX3Kdng) - Deno 开发的新的 js 注册表

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

* 🛠️ TS 优先，仅支持 ESM 格式
* 🌐 跨运行时支持（`Node`,`Deno`,`Bun`），同时支持 npm/yarn/pnpm
* 🤗 免费，开源

*目前处于公开测试阶段，[homepage](https://jsr.io/)*

### [2. Node.js 新官网](https://beta-node-js-org.vercel.app/en) - beta

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

### [3. 获取 Web 性能指标的精选代码片段](https://webperf-snippets.nucliweb.net/)

提供获取以下指标的代码片段:

* CLS(Cumulative Layout Shift): 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。 得分是零到任意正数，其中0 表示无偏移，且数字越大，网页的布局偏移越大
* LCP(Largest Contentful Paint): 从用户请求网址到在视口中渲染最大可见内容元素所需的时间
  * LCP Image Entropy：检查图像
  * LCP Sub-Parts：检查其它部分

下面是在我的博客上的运行结果：

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

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

### [4. Mojo CSS](https://mojocss.com/) - 新的CSS原子化框架

运行时间接近零的原子 CSS 框架 — “原子 CSS 玩家”中的另一个参与者。

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

> 有一些在更流行的解决方案中找不到的功能，`颜色着色`、`组件抽象`、`反向断点`等

### [5. Omnivore](https://github.com/omnivore-app/omnivore) - 稍后阅读工具

> 一个开源的"稍后阅读"（read-it-later）解决方案，可以收藏网址、RSS 和邮件列表的文章，提供PC，移动端客户端，浏览器插件。

| 收藏操作                                                                      | 收藏列表                                                                      |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| ![](https://img.cdn.sugarat.top/mdImg/sugar/0c6edf1ca68d3689a5774e97845807fd) | ![](https://img.cdn.sugarat.top/mdImg/sugar/4e33f0a109b30af5c6b7b8ea7ba7e141) |

开源&跨平台，使用挺方便的，一键收藏文章打标签，操作流畅。

*每周都会在空闲时间刷一些文章，准备下周开始试用一下，用来随手收集好文。*

### [6. tsdiagram](https://tsdiagram.com/) - 可视化生成TS关系图表

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

### [7. 自渲染的 "Eval Shirt"](https://twitter.com/ericsimons40/status/1759955628825710760) - StackBlitz 官方整活

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

*⚡里面的代码也是真实可复制的*

下面是是复制到浏览器里运行的结果：将会把这个 “logo” 插入到页面底部（仍然可复制）

| 复制                                                                          | 运行 |
| ----------------------------------------------------------------------------- | ---- |
| ![](https://img.cdn.sugarat.top/mdImg/sugar/6402bcbf58651cad1f10cb4153423dd8) | ![](https://img.cdn.sugarat.top/mdImg/sugar/9787d048a92508ab957aaffa763e4e6e)     |

### [8. shoelace](https://github.com/shoelace-style/shoelace) - 具有前瞻性的Web Components 组件库

基于 Web Components 标准构建，适用于所有框架以及常规的 HTML/CSS/JS。

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

## 📚 教程&文章

### [9. CSS :has() 交互式指南](https://ishadeed.com/article/css-has-guide/)

介绍了实际开发中可以用到 `:has` 选择器的所有内容。包含大量代码示例，有助于解锁你在项目中灵活使用 `:has` 的技能。

## 🤖AI工具&资讯

### [10. image2music](https://imagetomusic.top/) - AI 图像音乐生成器

感觉很新颖呀，自动给图片配背景音乐，demo 效果还不错。

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

### [11. AI没有护城河，OpenAI也没有](https://juejin.cn/post/7229593695653314597)

* 生成式 AI 的核心技术是开源的，任何人都可以获取。
* AI 模型的替代性很强。
* AI 的核心竞争力在于算力和训练语料。
* AI 的研究人员是流动的。

### [12. 魅族 All in AI](https://www.antutu.com/doc/131018.htm)

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

## 😛趣图

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

***

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

## ⭐️强力推荐关注

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