---
url: https://sugarat.top/weekly/2024-11-10.md
description: >-
  ① VS Code 主题定制生成 ② skellyCSS - 轻量级的CSS骨架屏方案 ③ create-vue 实现性集成 Oxlint ④ 英：从
  URL 输入到页面渲染的过程 ⑤ 使用 JS 生成随机迷宫 ⑥ gounfaked  - 免费的AI图片
---

# 视野修炼第109期 | VSCode主题定制

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

\[\[toc]]

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

## 🔥强烈推荐

### [1. VS Code 主题定制生成](https://rodrigoluglio.github.io/vscode-theme-generator/)

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

*可视化的编辑还是比较不错，相比本地直接定义文件修改。*

编辑完一键导出主题文件，人人都能做“主题大师”。

### [2. skellyCSS](https://github.com/ritterim/skellyCSS) - 轻量级的CSS骨架屏方案

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

只需要往布局里添加 CSS 类名即可。

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

### [3. create-vue](https://github.com/vuejs/create-vue) 实现性集成 Oxlint

> Oxlint 是一个 JavaScript linter，旨在捕获错误或无用的代码，默认情况下不需要任何配置

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

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

## 📚教程&文章

### 4. 英：[从 URL 输入到页面渲染的过程](https://abhisaha.com/blog/exploring-browser-rendering-process)

文章里针对每个阶段有可视化的交互动画，有助于理解。

下面是几个过程的截图

|                                    DNS 解析                                     |                                  TCP/TLS 握手                                   |
| :-----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: |
| ![](https://cdn.upyun.sugarat.top/mdImg/sugar/085333330e28b5685ab90f27d87e6790) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/e7a18ef605942b28d9f979567cff65d0) |

|                                  加载HTML资源                                   |                                     构建DOM                                     |
| :-----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: |
| ![](https://cdn.upyun.sugarat.top/mdImg/sugar/cdcfada918dde1477f9e9c5ac791f798) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/f3e4afe4b1fc90436ad4ae7b34dd3ca4) |

👍🏻！

### [5. 使用 JS 生成随机迷宫](https://cloudfour.com/thinks/generating-random-mazes-with-javascript/)

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

作者手把手的教你如何实现这个有趣的 demo！

CodePen：https://codepen.io/phebert/pen/zYgqwVe

## 🤖AI工具&资讯

### [6. gounfaked](https://www.gounfaked.com/)  - 免费的AI图片

网站收集了一系列以假乱真的 AI 图片。

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

*主要是免费，拿来做随机背景和测试图都不错。*

## 😛趣图

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

## ⭐️强力推荐关注

> 周刊部分内容来源如下渠道，推荐大家关注。

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