該周報主要為各個地方內容的彙總整理
技術#
如何理解 CSS step 函數中的 jump-* 關鍵詞？#
本文討論了 CSS 動畫中的 steps 函數及其參數，包括 jump-start、jump-end、jump-both 和 jump-none。文章演示了如何使用這些參數創建平滑的動畫並避免跳幀。它還提供了解決先前動畫示例中的小故障的解決方案。文章總結了 jump-* 參數之間的差異，並介紹了它們與各種瀏覽器的兼容性。
- CSS 中的 "steps" 函數有兩個參數，包括 "start" 和 "end"，可用於跳過動畫的第一個或最後一個幀。
- "steps" 函數中的 "jump-" 關鍵字，如 "jump-both" 和 "jump-none"，可用於控制動畫中跳過的幀，並確保顯示所有幀。
- 使用 "jump-none" 關鍵字可以解決動畫中缺少幀的問題，如 Ant Design 標誌動畫示例所示。
React 中的傳送：定位、堆疊上下文和門戶#
本文討論了 CSS 定位、堆疊上下文以及如何通過 CSS 避免內容裁剪。它還解釋了為什麼在 React 中需要使用 Portal 以及 Portal 的工作原理。文章強調絕對定位不適用於應該相對於螢幕定位的 UI 元素。文章還討論了堆疊上下文的問題以及為什麼 z-index CSS 屬性不總是起作用。最後，文章解釋了 React Portal 如何解決這些問題以及其工作原理。
- CSS 絕對定位可以脫離正常的文檔流，但由於其相對性質和堆疊上下文規則，它並不總是最佳選擇。
- 堆疊上下文確定元素在螢幕上呈現時的疊放順序，可以通過 z-index CSS 屬性進行操作。
- 在某些情況下，需要使用 React Portal，例如逃離 overflow 或在當前 DOM 層次結構之外渲染元素。
你在測量重要的東西嗎？對首次字節時間的新看法#
該文章認為，Time to First Byte (TTFB) 不是評估網頁加載速度的準確指標。雖然 TTFB 可以很好地指示連接建立時間、伺服器響應時間和網絡延遲，但它無法捕捉到網頁加載過程以及第一個字節接收後的操作。相反，作者建議使用更有意義的指標，如核心網頁指標，以更準確地衡量伺服器或內容分發網絡對終端用戶的性能表現。然而，在某些情況下，比如測量從 CDN 或伺服器下載單個文件的時間，TTFB 仍然是一個有用的指標。
- Time to First Byte (TTFB) 不是評估網頁加載速度的好指標，因為它僅衡量接收到響應的第一個字節所需的時間，而不是網頁實際可用的時間。
- TTFB 仍然是一個有用的指標，用於衡量連接建立時間、伺服器響應時間和網絡延遲，但還有更好的指標，比如核心網頁指標（Core Web Vitals），可以更準確地反映伺服器或內容分發網絡對終端用戶的性能表現。
- 在瀏覽器中加載網頁是一個複雜的過程，涉及加載字體、樣式表、JavaScript、圖像和其他資源，解析 HTML、CSS 和 JavaScript，並構建表示網頁內容及其樣式的數據結構，這些都是在 TTFB 報告之後發生的。
Storybook 的 Figma 插件#
Storybook Connect for Figma 是一個新的插件，將 Storybook 的故事與 Figma 設計相連接，使得設計師更容易與生產環境保持同步。該插件通過比較實現和設計規範，加快了交接和 UI 審查的速度。它將故事與對應的變體相連接，識別可重用的組件，並簡化了設計交接過程。用戶還可以使用 Storybook 插件與設計師一起審查 UI 實現，並檢查渲染的 UI 是否與設計一致。該插件由 Jono Kolnik、Michael Arestad、Gert Hengeveld、Zoltan Olah 和 Dominic Nguyen 開發。
- Storybook Connect for Figma 是一個插件，將 Storybook 的故事與 Figma 設計相連接，幫助團隊比較實現與設計規範，加快交接和 UI 審查的速度。
- 該插件允許設計師在使用組件之前檢查其功能，在設計交接過程中標識已經實現的設計組件，並通過 Storybook 插件幫助設計師檢查渲染的 UI 是否與設計一致。
- 該插件旨在通過在設計和開發組件之間建立持久鏈接，將 Storybook 和 Figma 等基於組件的工具融合為一個無縫工作流程。
Vue KeepAlive 為什麼不能緩存 iframe#
介紹了 Vue 組件中 KeepAlive 的使用，以及 KeepAlive 不能緩存 iframe 的原因
工具#
ai-jsx#
Javascript 的 AI 應用框架
hyper-fetch#
BetterTyped/hyper-fetch 是一個獲取框架，通過緩存、重複數據刪除、身份驗證、進度跟蹤、重試等功能增強抓取能力，同時支持實時數據交換。它具有類型安全設計和用戶友好的界面，可在瀏覽器或伺服器上無縫集成
unlighthouse#
使用 Google Lighthouse 在 2 分鐘內掃描整個網站（平均）。開源，完全可配置，只需最少的設置。
sniffnet#
用於輕鬆監控您的互聯網流量的應用程序 🕵️♂️
veaury#
在 Vue3 中使用 React，在 React 中使用 Vue3，並且盡可能完美！
auto-animate#
一個零配置的嵌入式動畫實用程序，可為您的網絡應用程序添加平滑的過渡。您可以將它與 React、Vue 或任何其他 JavaScript 應用程序一起使用。
selecto#
Selecto.js 是一個允許您使用鼠標或觸摸選擇拖動區域中的元素的組件。
更新#
svelte4#
Svelte 4 已經發布，帶來了改進的性能、開發者體驗和網站。該版本將 Svelte 的包大小減小了近 75％，減少了依賴項的數量，並改善了 Svelte 的作者體驗。官方的 svelte.dev 網站已經進行了全面改進，而 Svelte 5 正在進行中，它將是 Svelte 編譯器和運行時的重寫。大多數與 Svelte 3 兼容的應用程序和庫應該與 Svelte 4 兼容，並提供了遷移指南。這一發布得益於許多 Svelte 的維護者和貢獻者，以及社區的捐贈。
- Svelte 4 已經發布，帶來了更新，減小了包大小，提高了性能，並增強了開發者體驗。
- Svelte 5 正在進行中，將是編譯器和運行時的重大重寫，帶來更多新功能和性能改進。
- Svelte 生態系統擁有一支強大的維護者和貢獻者社區，他們為這些更新和改進做出了貢獻。
Nuxt 3.6#
Nuxt.js 3.6 已經發布，帶來了幾個新功能和改進。更新包括 SPA 加載指示器、性能增強、完全靜態的伺服器組件、更好的樣式內聯、動畫控制、自動 “static” 預設檢測、增加的類型安全性以及內置的 Nitro 2.5。建議使用該框架的用戶進行升級。
- Nuxt 3.6 引入了內置的 SPA 加載指示器、性能改進和完全靜態的伺服器組件。
- 更新包括更好的樣式內聯、動畫控制和靜態提供者預設的自動 “static” 預設檢測。
- Nuxt 3.6 還具有增加的類型安全性和升級到 Nitro 2.5 的功能。
TypeScript 5.2 的新關鍵字：'using'#
TypeScript 5.2 將引入一個名為 "using" 的新關鍵字，允許開發人員在離開作用域時處理具有 Symbol.dispose 函數的任何資源。"using" 關鍵字基於 TC39 提案，該提案最近達到了 Stage 3 階段，表明它即將加入 JavaScript。它對於管理文件句柄和數據庫連接等資源非常有用。文章提供了使用 "using" 處理文件句柄和數據庫連接的代碼示例，以及展示了它如何簡化代碼。
- TypeScript 5.2 將引入一個新的關鍵字 "using"，用於在離開作用域時處理具有 Symbol.dispose 函數的任何資源。
- 這對於管理文件句柄、數據庫連接等資源非常有用。
- "using" 關鍵字還可以與 Symbol.asyncDispose 一起使用，處理需要異步處理的資源，比如數據庫連接。
[email protected]#
✋ vite@4.4.0-beta.1 已發布！
Beta 文檔位於 https://main.vitejs.dev
- ⚡️ 對 Lightning CSS 的實驗性支持
- 🔼 esbuild 0.18
- 💜 以及更多功能和修復
設計#
2023 標誌趨勢報告#
本文討論了基於對超過 30,000 個提交的標誌進行分析的最新 2023 年標誌設計趨勢。這些趨勢包括圓形形狀、文字標誌、迷幻和復古字體以及綠色和藍色的使用。文章還強調了理解上下文和謹慎使用 AI 和充氣等工具的重要性。作者指出，儘管趨勢可以提供方向，但與時尚不同，設計師應追求原創性，而不是隨波逐流。文章以推廣 LogoLounge 作為設計師獲取靈感和探索趨勢報告的資源。
- 通過分析標誌設計的趨勢，LogoLounge 為品牌提供新興方向的見解。
- AI 和 3D 工具在標誌設計中的應用越來越普遍，但應該在思考和上下文中謹慎使用。
- 2023 年標誌趨勢報告突出了圓形形狀、文字標誌以及各種字體樣式、顏色和符號。
霧面玻璃：基於深度的模糊效果在 CSS 中的應用#
AI#
使用 ChatGPT 和 LangChain 的代理和工具創建一個（主要）自主的人力資源助手#
該文章討論了在企業應用程序中使用大型語言模型（LLM），特別是在人力資源領域的應用。文章重點介紹了兩篇最近的論文，提出了訓練 LLM 使用思維鏈過程來得出答案的方法，而不僅僅是輸出最終結果。引入了 LangChain 框架作為利用這種能力的方式，其中的代理和工具模塊使 LLM 驅動的人力資源聊天機器人能夠分解任務並利用多種工具得出答案。文章提供了聊天機器人的示例演示，展示了 LLM 從不完美的輸入中推斷用戶意圖並使用思維鏈過程解決複雜任務的能力。
- 大型語言模型（LLM）可以通過在決策過程中利用思維鏈的方式來提高其解決問題的能力，並減少幻覺的出現。
- LangChain 的代理和工具模塊可以用於利用 LLM 的這種新興能力，並構建企業應用程序，如人力資源聊天機器人。
- 提示作為 LLM 的 “防護欄”，使其保持專注，LangChain 的人力資源聊天機器人展示了 LLM 驅動的應用程序生成中間步驟以得出最終答案的能力。
使用 GitHub Copilot 的一個月經歷以及為什麼我計劃不再使用它（下個月）#
該文章討論了作者使用 GitHub Copilot 的經歷，GitHub Copilot 是由 Microsoft 開發的一個提供實時代碼建議的工具。作者最初對它印象深刻，並感覺更具生產力，但後來注意到一些不那麼理想的地方，比如工具生成的混亂和非標準的代碼。作者還對編寫自己並不完全理解的代碼並在生產環境中發現錯誤提出了擔憂。他們質疑這是否可能是編程的未來，以及他們是否願意以這種方式進行編程。
- GitHub Copilot 可以實時生成代碼建議，但用戶需要謹慎使用，因為生成的代碼可能不始終遵循標準的設計模式，或者用戶可能不完全理解生成的代碼。
- 這個工具可以提高生產效率，但用戶可能需要創建更多的自動化測試來確保生成的代碼是正確的。
- 作者在生產環境中遇到了一個由於不完全理解生成的代碼而導致的錯誤，強調了在實施之前仔細審查和理解所有建議的重要性。
透過你的眼睛看世界#
該文章討論了一種從圖像中重建人眼外觀的方法，通過計算角膜的像素大小和使用近似的眼球幾何形狀。通過眼反射來訓練輻射場，並使用二維紋理映射來移除虹膜。還進行了眼球姿態優化以改善結果。
- 通過計算圖像中角膜的像素大小，眼球幾何形狀在健康成年人中保持一致，可以進行精確的眼球跟蹤。
- 在重建過程中使用紋理分解來移除虹膜，同時訓練一個二維紋理映射來學習虹膜紋理。
- 眼球姿態優化是為了處理噪音並改善重建過程中的性能。
其他#
2023 開發者調查#
