歡迎來到第 75 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介
🔥強烈推薦
- JSR - Deno 開發的新的 js 註冊表
- Node.js 新官網 - beta
- 獲取 Web 性能指標的精選代碼片段
🔧開源工具&技術資訊
- Mojo CSS - 新的CSS原子化框架
- Omnivore - 稍後閱讀工具
- tsdiagram - 可視化生成TS關係圖表
- 自渲染的 "Eval Shirt" - StackBlitz 官方整活
- shoelace - 具有前瞻性的Web Components 組件庫
📚 教程&文章
- CSS :has() 交互式指南
🤖AI工具&資訊
- image2music - AI 圖像音樂生成器
- AI沒有護城河，OpenAI也沒有
- 魅族 All in AI
也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）
下面開始本期內容的介紹，預計閱讀時間 8 分鐘。
🔥強烈推薦
1. JSR - Deno 開發的新的 js 註冊表
- 🛠️ TS 優先，僅支持 ESM 格式
- 🌐 跨運行時支持（
Node,Deno,Bun），同時支持 npm/yarn/pnpm - 🤗 免費，開源
目前處於公開測試階段，homepage
2. Node.js 新官網 - beta
3. 獲取 Web 性能指標的精選代碼片段
提供獲取以下指標的代碼片段:
- CLS(Cumulative Layout Shift): 會衡量在網頁的整個生命週期內發生的所有意外佈局偏移的得分總和。 得分是零到任意正數，其中0 表示無偏移，且數字越大，網頁的佈局偏移越大
- LCP(Largest Contentful Paint): 從用戶請求網址到在視口中渲染最大可見內容元素所需的時間
- LCP Image Entropy：檢查圖像
- LCP Sub-Parts：檢查其它部分
下面是在我的博客上的運行結果：
🔧開源工具&技術資訊
4. Mojo CSS - 新的CSS原子化框架
運行時間接近零的原子 CSS 框架 — “原子 CSS 玩家”中的另一個參與者。
有一些在更流行的解決方案中找不到的功能，
顏色着色、組件抽象、反向斷點等
5. Omnivore - 稍後閱讀工具
一個開源的"稍後閱讀"（read-it-later）解決方案，可以收藏網址、RSS 和郵件列表的文章，提供PC，移動端客戶端，瀏覽器插件。
| 收藏操作 | 收藏列表 |
|---|---|
 |
 |
開源&跨平臺，使用挺方便的，一鍵收藏文章打標籤，操作流暢。
每週都會在空閒時間刷一些文章，準備下周開始試用一下，用來隨手收集好文。
6. tsdiagram - 可視化生成TS關係圖表
7. 自渲染的 "Eval Shirt" - StackBlitz 官方整活
⚡裏面的代碼也是真實可複製的
下面是是複製到瀏覽器裏運行的結果：將會把這個 “logo” 插入到頁面底部（仍然可複製）
| 複製 | 運行 |
|---|---|
 |
 |
8. shoelace - 具有前瞻性的Web Components 組件庫
基於 Web Components 標準構建，適用於所有框架以及常規的 HTML/CSS/JS。
📚 教程&文章
9. CSS :has() 交互式指南
介紹了實際開發中可以用到 :has 選擇器的所有內容。包含大量代碼示例，有助於解鎖你在項目中靈活使用 :has 的技能。
🤖AI工具&資訊
10. image2music - AI 圖像音樂生成器
感覺很新穎呀，自動給圖片配背景音樂，demo 效果還不錯。
11. AI沒有護城河，OpenAI也沒有
- 生成式 AI 的核心技術是開源的，任何人都可以獲取。
- AI 模型的替代性很強。
- AI 的核心競爭力在於算力和訓練語料。
- AI 的研究人員是流動的。
12. 魅族 All in AI
😛趣圖
篇幅有限，如果你還沒看夠，可移步後面的推薦渠道，繼續遊覽，歷史週刊（<20）移步博客
⭐️強力推薦關注
- 阮一峯: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五發佈
- 雲謙：MDH 前端週刊 - 前端資訊和分享
- 童歐巴：前端食堂 - 你的前端食堂，喫好每一頓飯
- 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
- 值得一讀技術博客 - 每天進步一點點，每天分享有料的技術文章！
- FRE123 技術週刊精選 - 前後端技術週刊精選推薦信息流