JS 周刊- Chromium 支持 import 導(dǎo)入 CSS、js 的未來是 import maps... - 210821

JavaScript 周刊

• Ruby on Rails 在沒有 JS 捆綁或轉(zhuǎn)譯的現(xiàn)代 Web 應(yīng)用程序上的創(chuàng)建者——David^[1] Heinemeier Hansson（流行的Ruby on Rails框架的最初創(chuàng)建者）解釋了他在基于 Rails 的應(yīng)用程序中看到 JavaScript 的未來的地方，它涉及使用導(dǎo)入映射（import maps）并且不需要像 Webpacker 這樣的打包器——相反，應(yīng)用程序只會拉入所需的 ES 模塊。他還在這個 27 分鐘的截屏視頻中展示了它的工作原理。

• Web 上 SQL 的荒謬未來？^[2]— absurd-sql 是一個旨在為 Web 上的 SQLite 提供持久后端的項目。它使用 IndexedDB，但前面有 sql.js，因此您可以從 webapps 以自然但持久的方式使用 SQLite。這里有一些有趣的想法。

• 學(xué)習(xí) TypeScript 的基礎(chǔ)知識^[3]——使用 TypeScript 為大型 JavaScript 應(yīng)用程序添加強類型有助于減少錯誤并保持代碼的性能和可維護性。本課程涵蓋了您需要了解的所有知識，包括如何將代碼庫遷移到 TypeScript 并提高生產(chǎn)力，同時輕松構(gòu)建大型應(yīng)用程序。

• 宣布 React Native 0.65^[4] -虛擬機內(nèi)無反應(yīng)原住民已升級到現(xiàn)在已經(jīng)ES國際化API（國際）詢問服務(wù)，支持Mac的M1和Mac催化劑，具有多快的垃圾收集器，以及更多，包括無障礙設(shè)施的改進。

快聞

• 想在 11 月的在線 React Conf 2021 上發(fā)言嗎？你有三天的時間 提交你的提案。

• Chromium 正在添加對 導(dǎo)入 CSS 樣式表的import支持，就像使用 ES 模塊一樣。

• ?? 一年一度的 JS13KGames 編程大賽已經(jīng)開始，一直持續(xù)到 9 月 13 日——主題是“空間”。準備好構(gòu)建游戲了嗎？

• 看看如果你在一個對象中放置超過 2^24 個項目 你會遇到 的 奇怪的錯誤消息 Map。

• ?? Bootstrap 已經(jīng) 10 歲了！

發(fā)布

• Mocha 9.1.0 – 測試框架。

• svgo 2.4.0 - 用于優(yōu)化 SVG 文件的節(jié)點工具。

• Node 16.7.0 – 實驗性地添加了遞歸cp方法。

• Capacitor 3.2.0 – 為 iOS、Android 和 Web 構(gòu)建原生 PWA。

• WebTorrent 1.5.0 – 用于網(wǎng)絡(luò)的流媒體洪流客戶端。

• Cypress 8.3.0 – 測試在瀏覽器中運行的任何東西。

?? 文章、意見和教程

• 使用 Vanilla JS 創(chuàng)建交互式甘特圖組件^[5]— 將甘特圖（通常用作可視化日程表的一種方式）編碼為可重用的 Web 組件，涵蓋組件的架構(gòu)，使用 CSS Grid 渲染日歷，并管理狀態(tài)帶有代理對象的可拖動任務(wù)。

• 加載第三方 JavaScript^[6] — 這并不新鮮，但最近再次出現(xiàn)在我們的雷達上并且仍然是一個可靠的資源 — 了解如何優(yōu)化第三方腳本的加載以減少它們對性能的影響。

• 構(gòu)建一個 React 聊天應(yīng)用程序^[7]——通過幾個簡單的步驟，我們將向您展示如何使用我們的 React 組件庫啟動一個聊天應(yīng)用程序。

• 關(guān)于如何拆分 React 組件的指南（來自 1970 年代！）^[8] ——一些有趣的想法摘自 1970 年代的論文：David Parnas 的*“Designing Software for Ease of Extension and Contraction”*。

• 如何在 JSDoc 注釋中編寫 TypeScript 接口^[9]— 一種避免構(gòu)建步驟但仍然享受對.js 文件進行TypeScript 類型檢查的方法。

• `return await promise`vs`return promise`^[10] -在異步函數(shù)中使用return await promise和使用有什么區(qū)別return promise嗎？

• 我作為 React 開發(fā)人員嘗試過 Angular。這是我喜歡它的六件事

• 如何使用 Next.js 和 Tailwind CSS MANU ARORA 構(gòu)建投資組合網(wǎng)站

• 真假：當(dāng) JavaScript 中的一切都不同時

?? 代碼和工具

• wavesurfer.js：通過 Web 音頻和畫布 API 的可導(dǎo)航波形^[11]——如果您正在創(chuàng)建播客播放器、音頻體驗或任何需要查看交互式音頻波形的東西，請查看此內(nèi)容。

• Marked 3.0: A Fast Markdown Parser and Compiler——^[12]在瀏覽器或服務(wù)器端工作。在這里演示以查看它的實際效果。

• 從零到實時流媒體，只需幾分鐘^[13]——Mux Video 是一個 API 優(yōu)先的平臺，可以輕松構(gòu)建精美的實時視頻，隨處可見。

• zx 3.0：一種用于編寫更好的 Shell 腳本的工具^[14]- 不是使用諸如bash將快速腳本之類的東西放在一起，而是zx提供了各種細節(jié)來使用您熟悉和喜愛的 JavaScript 來做同樣的事情。

• v-lazy-image：用于延遲加載圖像的 Vue.js 組件^[15]- 使用 Intersection Observer，然后使用 CSS 動畫進行漸進式渲染以保持流暢。代碼沙盒演示。

• Pyodide：為 Web 編譯為 WebAssembly 的^[16]Python — Python 在編程教育和數(shù)據(jù)科學(xué)領(lǐng)域繼續(xù)發(fā)展，因此如果您有一個用例可以在瀏覽器中通過 JavaScript 與它進行互操作，這就是您所需要的。不過，這只是在瀏覽器中使用 Python的眾多方法之一。

• 預(yù)訂演示。發(fā)貨快。輕松休息。LaunchDarkly^[17]

• Notistack：一個用于簡單 Snackbar/Toast 通知的庫^[18]- 您可以在文檔站點上嘗試大量演示和 API 參考。

• Serendipity: A Beautiful VS Code Theme with Dark and Light Modes^[19] - 調(diào)色板是專門選擇的，以便在視網(wǎng)膜顯示器上賞心悅目。

?? ICYMI 

• 下面來看看 如何避免/防止未捕獲的異步錯誤。
• Dmitri Pavlutin 解釋了 如何使用fetch()API 加載和發(fā)布 JSON 數(shù)據(jù)。
• Kilian Valkhof 展示了如何 檢測 CSS 和 JavaScript 中的 媒體查詢支持。

往期精文

• TypeScript 中提升幸福感的 10 個高級技巧

• 推薦 7 個 Vue2、Vue3 源碼解密分析的重磅開源項目

歡迎關(guān)注公眾號：“全棧修煉”，回復(fù) “電子書” 即可以獲得下面 1000 本技術(shù)精華書籍哦，貓哥 wx：CB834301747 。

參考資料