---
url: https://sugarat.top/weekly/2023-01-26.md
description: ① 纯CSS实现树状视图 ② 为什么JSON中不支持注释 ③ 漫画HTTPS工作原理 ④ 🎉Github有1亿开发者了 ...
---

# 视野修炼第22期

> 假期就要结束了，相信部分朋友已经开始上班了。

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDY2MzI3MTg2OQ==674663271869)

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. 英：纯CSS实现树状视图](https://iamkate.com/code/tree-views/)

利用`ul`,`li`,`details`,`summary`4个标签实现

其中`summary`，可以通过`open`属性控制显隐状态

下面是个最简示例

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDc4NzM4NDQxNA==674787384414)

文章里还额外介绍了一些css样式的属性，最终效果如下

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDc4NzkyMzM3MA==674787923370)

### [2. 为什么JSON中不支持注释](https://www.stefanjudis.com/notes/why-doesnt-json-support-comments/)

这个疑问相信大家在接触JSON的时候都遇到过，实际上在`最初的规范里JSON是允许注释的`

文章大概阐述了3点原因如下（机翻）

* 注释中被放入了解析指令，破坏了跨平台的移植性
* 注释引入了可能不需要的数据格式的复杂性
* JSON的创造者希望它能与早期YAML版本兼容

### [3. 漫画：HTTPS 的工作原理](https://howhttps.works/zh/)

非常有意思的讲解`HTTPS`相关知识，推荐对HTTPS不那么熟悉的可以闲暇的时候阅读一下

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDg3ODA5Njg2NA==674878096864)

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDg3NzgyOTAxNQ==674877829016)

### [4. 🎉Github有1亿开发者了](https://github.blog/2023-01-25-100-million-developers-and-counting/)

今天你在访问[Github个人主页](https://github.com/ATQQ)时会看到一个如下所示的带动画的消息入口。

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDg5NTIzOTk2MQ==674895239961)

2019年设定的目标，[到2025年使用人数达到1亿](https://youtu.be/9EoNqyxtSRM?t=344)，比原计划提前了2年。

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDg5MzU2NDUwNA==674893564504)

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDg5MzgzNTAxMQ==674893835011)

越来越多的开发者了解并使用Github，意味着有越来越多的人了解到开源，参与开源，共同建设技术社区。

## 🔧开源&工具

### [5. blurhash](https://github.com/woltapp/blurhash) - 模糊图生成

这个工具可以提取图片的颜色分布，生成一个哈希字符串。网页就可以用这个哈希，生成图片的模糊缩略图

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDc4OTM3MDk4MQ==674789370981)

### [6. zod](https://github.com/colinhacks/zod) - 数据校验

支持`TS（静态类型检查）`与`js（运行时检查）`

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDc5MTQ5MjU0OA==674791492548)

这篇文章 [Zod: The Next Biggest thing after Typescript](https://dev.to/jareechang/zod-the-next-biggest-thing-after-typescript-4phh) 阐述了使用其的优势

### [7. GitHub520](https://github.com/521xueweihan/GitHub520)

对于没有梯子（科学上网工具）的朋友，遇到访问Github慢或者图裂的问题，通常手段都是改hosts

下面的地址即这个项目提供的链接，无需访问 GitHub 即可获取到最新的 hosts 内容：

* 文件：https://raw.hellogithub.com/hosts
* JSON：https://raw.hellogithub.com/hosts.json

当然项目里也提供了自动配置更新的方式

## 📚文章&资讯

### [8. Bun v0.5](https://bun.sh/blog/bun-v0.5.0)

支持`monorepo`，当然也是号称速度比其它的快

![图片](https://img.cdn.sugarat.top/mdImg/MTY3NDc5MDQ5OTMzOQ==674790499339)

### [9. TypeScript 5.0 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/)

26号发布，带来了许多新的特性，其中最值得关注的就是 [实现 Stage3 装饰器提案](https://github.com/microsoft/TypeScript/pull/50820)

***

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

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://www.yuque.com/chencheng/mdh-weekly) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [rottenpen：FE News](https://rottenpen.zhubai.love/) - 分享前端，生活
* [知识星球：咲奈的平行时空](https://public.zsxq.com/groups/28851452458181.html) - 前端前沿技术、资讯、方法论分享