視野修煉-技術週刊第91期 | 驚訝線條

粥里有勺糖發表於2024-07-07

歡迎來到第 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>

⭐️強力推薦關注

  • 阮一峰: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五釋出
  • 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
  • 值得一讀技術部落格 - 每天進步一點點，每天分享有料的技術文章！
  • FRE123 技術週刊精選 - 前後端技術週刊精選推薦資訊流

相關文章