2023-第四十七週

keishi_sakurai-20231128_175458-404899501_731927048796604_7146487301805541534_n

該周報主要為各個地方內容的彙總整理

技術#

Push Ifs Up And Fors Down #

這篇文章講述了兩個相關的經驗法則：將 if 語句向上移動並將 for 循環向下移動。將 if 語句向上移動可以減少重複檢查和簡化控制流程，而將 for 循環向下移動可以提升性能和代碼可讀性。這兩種技巧可以相互組合，並且對於性能和代碼表達都有積極影響。總之，推薦將 if 語句向上移動並將 for 循環向下移動。

將 if 條件移到調用方，可以減少重複的檢查，簡化控制流程，並減少錯誤的可能性。
將循環操作批量化，可以提高性能，減少啟動成本，並允許靈活處理對象的順序。
將條件語句和循環操作結合使用，可以進一步優化性能，提高代碼的表達力。

Why Rust in Production?#

Rust 在生產環境中的應用優勢包括可靠性和穩定性、可預測的運行時行為、成本節約和良好的開發人員工作環境。它能夠提供穩定的服務，減少錯誤修復成本，並節省雲基礎設施成本。此外，Rust 具有表達能力強的類型系統和函數式概念，使開發人員能夠編寫簡潔、表達力強的代碼。

Rust 在生產環境中的可靠性和穩定性是吸引企業使用的主要原因。
Rust 的可預測的運行時行為對於性能要求高的服務非常重要。
Rust 的低運行時開銷可以帶來成本節約，並且具有良好的開發人員人機工程學特性。

How Non-Tech Brands Use AI: Food #

這篇文章討論了人工智能在食品行業中的應用。人工智能在農業、作物管理、害蟲檢測、減少環境影響、自動化分選過程、包裝優化、可持續食品開發、供應鏈管理、市場推廣、產品個性化和個性化營養方面都發揮了重要作用。通過人工智能的應用，食品行業實現了生產、分銷和消費的革新和提升。

AI 正在革命性地改變食品行業，從農業生產到供應鏈管理和個性化營銷，各方面都得到了提升和創新。
AI 在農業中的應用使農民能夠優化種植條件，提高產量。
AI 可以分析數據，優化種植時間和預測產量，確保農作物的一致品質。
AI 在食品包裝、供應鏈管理和個性化營銷等方面發揮重要作用，提高效率、減少浪費，並推動可持續發展。

An Interactive Guide to CSS Grid #

CSS Grid 是 CSS 語言中的一部分，它能夠幫助我們創建複雜和流動的佈局。使用 CSS Grid，我們可以在 CSS 中定義行和列，而不需要增加 DOM 節點。通過 grid-template-columns 和 grid-template-rows 屬性，我們可以定義網格的結構。網格中的子元素可以通過 grid-row 和 grid-column 屬性來指定它們所占用的位置。此外，CSS Grid 還提供了一些輔助功能，如 repeat 函數和 grid areas，可以更方便地創建佈局。

CSS Grid 是 CSS 語言中最新和最強大的佈局算法，可以用來創建複雜的、根據不同約束條件自適應的佈局。
CSS Grid 通過在 CSS 中定義網格結構來管理佈局，而不需要添加更多的 DOM 節點。
CSS Grid 可以使用 grid-template-columns 屬性定義列，使用 grid-template-rows 屬性定義行，還可以使用 grid-area 屬性將子元素分配到指定的網格單元格。

JavaScript 的 Reflect 和 Proxy #

這段文字主要介紹了 JavaScript 中的 Reflect 和 Proxy 兩個重要的元編程方法。Reflect 是 JavaScript 元編程的重要對象，可以調用對象的內部方法進行一些內部操作，同時也簡化了一些常用的函數調用。Proxy 是代理對象，可以通過定義陷阱函數來攔截對對象的操作，並可以任意定義對象的操作行為。Reflect 和 Proxy 在 JavaScript 中的應用廣泛，可以實現更高維度的編程功能。

Reflect 是 JavaScript 元編程的重要方法之一，可以通過調用對象內部方法實現對對象的內部操作。
Reflect 的方法可以簡化代碼，例如可以用 Reflect.apply 替代 Function.prototype.apply.call。
Reflect 和 Proxy 可以搭配使用，可以任意定義對象的操作行為。

Web Components Eliminate JavaScript Framework Lock-in #

本文介紹了使用 Web 組件與 JavaScript 框架結合的好處，以及構建一個每個組件都使用不同框架的應用的示例。Web 組件可以減少 JavaScript 框架之間的耦合性，並提供了一種靈活的方式來使用不同的框架。文章還介紹了 Web 組件的基本原理，以及如何通過使用陰影 DOM 和插槽來嵌套不同框架的組件。最後，文章通過一個簡單的 todo 應用示例展示了如何使用 React、Solid 和無框架的組件來構建一個混合框架的應用。

Web components 可以與 JavaScript 框架結合使用，從而減少框架之間的耦合度。
通過使用 shadow DOM，web components 可以將框架封裝在組件內部，而不會對應用的其他部分產生影響。
Web components 可以用於逐步遷移或混合使用不同的 JavaScript 框架，以滿足特定的需求。

Deep dive into CheerpJ 3.0: A WebAssembly Java Virtual Machine for the browser #

CheerpJ 是一個基於 WebAssembly 的 JVM，可以在瀏覽器中完全運行客戶端的 Java 應用程序和傳統的小程序和庫。它不需要編譯、服務器後端、插件或後處理步驟。CheerpJ 3.0 引入了全新的基於 JIT 的架構，使工具更快、更易用和更強大。它將在 2024 年 1 月完全發布，支持 Java 8。CheerpJ 支持多進程和多線程，並且提供了完整的 Java 支持，包括 ClassLoader、反射訪問、圖形應用程序支持等。它還提供了高級的 Java-JavaScript 互操作性，可以從 Java 中訪問 JavaScript 和 DOM，並且可以從 JavaScript 中直接與 Java 方法、對象和數組交互。CheerpJ 3.0 的架構由 JVM 實現、虛擬化的窗口管理器、虛擬化的文件系統和網絡支持組成，所有這些能力都是通過純 WebAssembly 或 JavaScript 實現的。與 CheerpJ 2.x 相比，CheerpJ 3.0 是一個完全兼容的替代品，具有更好的性能和更多的功能。對於 CheerpJ 2.x 用戶，需要注意的一些重要變化包括去除了 Ahead-Of-Time 編譯、實際支持 ClassLoader、API 的變化等。同時，CheerpJ 3.0 還引入了一個名為 Library mode 的新功能，可以直接從 JavaScript 中使用 Java 庫。

CheerpJ 是一個基於 WebAssembly 的 JVM，可以在瀏覽器中完全客戶端運行 Java 應用程序、傳統小程序和庫，無需編譯、服務器後端、插件或後處理步驟。
CheerpJ 3.0 引入了全新的基於 JIT 的架構，使工具更快、更易用、更強大，將於 2024 年 1 月完全發布，支持 Java 8。
CheerpJ 可以運行未經修改的 Java 應用程序、小程序和 JAR 庫文件，無需訪問源代碼或專門的編譯時工具，特別適用於運行源代碼不可用或基於第三方商業庫的遺留應用程序。

An Introduction To Full Stack Composability #

本文介紹了可組合架構的概念以及如何在前後端開發中應用可組合性。可組合架構通過將系統拆分為獨立的模塊和組件，並使用統一的 API 進行通信，實現了組件的重用、擴展和維護的便利性。文章還介紹了使用 React 和基於 React 的框架（如 Remix 和 Next.js）實現可組合性的方法。此外，文章還提到了使用 Headless Content Management System（如 Storyblok）來管理內容與架構的一致性。總之，可組合架構能夠提高開發效率、代碼可維護性和系統的擴展性。

組合架構是構建可擴展、可維護和高效系統的關鍵，它包括將系統拆分為獨立的模塊和使用統一的 API 進行通信。
使用 React 可以實現用戶界面和體驗的組合性，通過將界面拆分為可重用的組件來促進代碼復用和模塊化。
使用 Headless CMS，如 Storyblok，可以幫助我們將內容管理與架構和展示層對齊，實現內容的可組合性和靈活性。

工具#

kirimase #

Kirimase 是一個命令行工具（CLI），用於更快地構建全棧 Next.js 應用程序。它加速了開發流程，讓您能夠快速集成包並按照最佳實踐為應用程序創建資源。

react-quiz-component #

React Quiz Component 是一個用於創建和管理問答遊戲的 React 組件。

更新#

Node v20.10.0 (LTS) 和 Node v18.19.0 (LTS)#

Node.js 的兩個 LTS 分支已經發布了從較新版本中回溯功能的更新：Node v20.10.0 (LTS) 獲得 WebSocket 和一個實驗性標誌來自動檢測 ESM 代碼。Node v18.19.0 (LTS) 獲得 npm 10 以及用於自定義鉤子和加載器的調整。

Biome formatter wins the Prettier challenge #

在 Biome v1.4.0 發布後，我們宣稱贏得了 Prettier 挑戰的獎金。新版本帶來了更好的格式化體驗、更多的格式化選項、新的 VSCode 功能和新的贊助商。此外，還增加了一些新的規則和選項。挑戰揭示了一些 Prettier 輸出的差異，我們已經在網站上對其進行了解釋。我們致力於進一步提高與 prettier 的兼容性，歡迎任何相關的貢獻。此外，還提供了一些 VSCode 擴展和 CLI 的改進。

Biome v1.4.0 發布，獲得了 Prettier 挑戰的獎勵，提供了更好的格式化體驗和更多的格式化選項。
挑戰吸引了很多人的關注和貢獻，通過協作和溝通，在幾個小時內完成了任務並提供了解決方案。
Biome 的兼容性得分從 85% 提高到了 96%，對於大型代碼庫來說，這個提升對於早期採用者來說是巨大的。

設計#

Psychology of Speed: A Guide to Perceived Performance #

這篇文章討論了人們對性能和速度的感知以及如何改善感知性能的四種方法。文章指出，感知性能是主觀的，並且受到外部因素的影響，因此很難量化。文章還介紹了人們對時間和速度的感知方式，以及如何根據注意力範圍來評估性能。最後，文章提出了四種改善感知性能的方法，包括智能地傳達狀態和進展、始終為用戶提供可操作的內容、避免突然的頁面移動和防止繁重的處理。