Fork me on GitHub

视野修炼-技术周刊第91期 | 惊讶线条

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

🔥强烈推荐

  1. 漫画:浏览器的 UA 为什么这么长?
  2. 500+种js方法实现页面重载
  3. CSS 实现惊讶线条

🔧开源工具&技术资讯

  1. onefetch - 本地仓库信息查看工具
  2. StarFlare - 管理 Star 的项目
  3. 开源项目落地页模板

📚 教程&文章

  1. 纯CSS鉴别是不是Safari浏览器
  2. 使用 MarsCode IDE 搭建 VitePress博客并使用 GitHub 部署
  3. 预渲染页面配置教程

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

下面开始本期内容的介绍,预计阅读时间 5 分钟。

🔥强烈推荐

1. 漫画:浏览器的 UA 为什么这么长?

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

全文还蛮有意思的!

2. 500+种js方法实现页面重载

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

3. CSS 实现惊讶线条

使用伪元素 + CSS 动画。

🔧开源工具&技术资讯

4. onefetch - 本地仓库信息查看工具

使用简单,蛮有意思的。

5. StarFlare - 管理 Star 的项目

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

6. 开源项目落地页模板

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

📚 教程&文章

7. 纯CSS鉴别是不是Safari浏览器

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

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

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

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

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

8. 使用 MarsCode IDE 搭建 VitePress博客并使用 GitHub 部署

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

9. 预渲染页面配置教程

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

⭐️强力推荐关注

posted @ 2024-07-07 19:35  粥里有勺糖  阅读(34)  评论(0编辑  收藏  举报