---
url: https://sugarat.top/weekly/2024-07-07.md
description: >-
  ① 漫画：浏览器的 UA 为什么这么长？ ② 500+种js方法实现页面重载 ③ CSS 实现惊讶线条 ④ onefetch - 本地仓库信息查看工具 ⑤
  StarFlare - 管理 Star 的项目 ⑥ 开源项目落地页模板 ⑦ 纯CSS鉴别是不是Safari浏览器 ⑧ 使用 MarsCode IDE 搭建
  VitePress博客并使用 GitHub 部署 ⑨ 预渲染页面配置教程
---

# 视野修炼第91期 | 惊讶线条

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. 漫画：浏览器的 UA 为什么这么长？](https://mp.weixin.qq.com/s/GcfKEpkraNHfnYMdrGqMcA)

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

看完你就清楚，为什么 Chrome 的 UA为什么会有`Mozilla, Safari，like Gecko` 这些内容。

*全文还蛮有意思的！*

### [2. 500+种js方法实现页面重载](https://www.phpied.com/files/location-location/location-location.html)

```js
location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
// ...省略500+
```

### [3. CSS 实现惊讶线条](https://alvaromontoro.com/blog/68054/css-manga-lines)

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

使用伪元素 + CSS 动画。

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

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

### [4. onefetch - 本地仓库信息查看工具](https://github.com/o2sh/onefetch)

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

使用简单，蛮有意思的。

### [5. StarFlare - 管理 Star 的项目](https://starflare.app/#/home)

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

已经 Star 2000 多个项目了，这手动分类起来还是太麻烦了，有AI加持就好了。

### [6. 开源项目落地页模板](https://landingpage.huglemon.com/zh)

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

使用 Next.js 构建，比较美观简洁，先收藏了。

## 📚 教程&文章

### [7. 纯CSS鉴别是不是Safari浏览器](https://www.zhangxinxu.com/wordpress/2024/07/css-safari-detect/)

① 使用 @supports 选定 Safari 不支持属性

```css
@supports not (background: paint(xxx)){}
```

② 使用 @supports 选定仅 Safari 支持属性

```css
@supports (-webkit-touch-callout: none) {}
```

核心就是找一些稳定 仅 Safari 支持或不支的属性做选择。

### [8. 使用 MarsCode IDE 搭建 VitePress博客并使用 GitHub 部署](https://juejin.cn/post/7387992438297739264)

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

https://atqq.github.io/marscode-blog-preview/

### [9. 预渲染页面配置教程](https://www.debugbear.com/blog/speculation-rules)

```html
<script type="speculationrules">
  {
    "prerender": [
      {
        "urls": ["/shop", "/contact"]
      }
    ]
  }
</script>
```

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

## ⭐️强力推荐关注

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