前端週刊第十一期

夕陽白雪發表於2022-03-21
前端

前端週刊發表每週前端技術相關的大事件、文章教程、一些框架的版本更新、以及程式碼和工具。每週定期發表，歡迎大家關注、轉載。
如果外鏈不能訪問，關注公眾號「前端每週看」，裡面有解決辦法

大事件

  • 大事件！大事件！瀏覽器可能支援執行 Typescript啦——今天，我們很高興地宣佈我們支援並與第三方共同合作來推進 新的 Stage 0 提案，以此為 JavaScript 帶來可選和可擦除的型別語法。因為這種新語法不會改變周邊程式碼的執行方式，所以它可以有效地充當註釋。我們認為這有可能使 TypeScript 更容易、更快地用於各種規模的開發。

  • Shader Park：使用 JavaScript 建立互動式 2D 和 3D 著色器——一個基於 Web 的開源平臺、社群和 庫，通過讓您使用 JavaScript 程式化地建立著色器和 GPU 來簡化神祕的著色器和 GPU 世界。這裡有很多可以玩和探索的地方。注意：由於使用了 WebGL，該站點在瀏覽器上的負擔很重，因此可能並不適合所有裝置。

  • Prettier 2.6 釋出——流行的程式碼格式化工具現在可以singleAttributePerLine選擇每行只放置一個屬性（這在某些型別的模板中很常見），新增了 TypeScript 4.6 支援，並在各種上下文中更好地格式化 JS 程式碼（例如裝飾器、內await聯JSX，行尾註釋）。

  • npm 包如何用於烏克蘭反對戰爭的抗議活動——幾天前，依賴node-ipc的專案（例如 Vue CLI）的使用者開始注意到一些奇怪的行為，包括檔案在地理定位到俄羅斯的系統上被覆蓋（或白俄羅斯）和抗議資訊。這是一個複雜的故事，也是包裝供應鏈有多脆弱的另一個提醒。如果您願意， Register有一個更短且更具新聞性的文章。

  • Deno 1.20 已釋出——JavaScript / TypeScript 執行時的一個相當大的版本，具有更高的效能、用於執行基準測試和測試套件的新命令、AbortSignal 超時，以及對 V8 10.0 和 TypeScript 4.6 的升級。要是所有專案都寫得像這樣徹底就好了。

文章

  1. How To Make a Drag-and-Drop File Uploader with Vue.js 3 — 整整四年前，我們連結到Joseph 的使用vanilla JavaScript製作拖放檔案上傳，但現在他又回來了最新版本的 Vue.js 面臨同樣的挑戰。

  2. 令人愉快的 React 檔案/目錄結構 — 我們已經介紹了許多此類文章，但對於佈局專案的“正確”方式，總是有另一種觀點的空間，尤其是 React 本身在這個問題上相當不以為然。

  3. jQuery 原始碼中的“雙重分配模式” - 作者在 jQuery 的程式碼中發現了一種有趣的技術，並著手研究它的好處。

  4. Next.js 的新官方“基礎”課程 - Next.js 釋出了一個新的基礎課程，涵蓋了 React 的基本知識、它與 Next.js 的關係以及構建第一個 Next.js 應用程式。

  5. Remix vs Next.js - Remix是一個相對較新的基於 React 的全棧框架，由 React Router 背後的原始團隊建立。它對更為人所知的Next.js採用了不同的方法。這是關鍵差異的詳細指南。

  6. 建立一個簡單的表格排序和分頁功能 - 在 JavaScript 的幫助下呈現一個可排序的分頁表格。

  7. TypeScript 擅長的地方的討論 - TypeScript 的 Luke Hoban 和 Daniel Rosenwasser 的採訪摘錄。

  8. 升級 Next.js 以實現即時效能改進 - Vercel 團隊如何將 Next.js 8 演示提升到 Next.js 12 標準並在過程中看到巨大改進的案例研究。

框架釋出

  1. Verdaccio 5.8 – 私有 npm 登錄檔，現在具有可定製的 Web UI。
  2. Vuetify 3.0 Beta – Vue 的材料元件框架。
  3. MDX 2.1 – Markdown 中的 JSX。
  4. React Menu 3.0 – 可定製的巢狀選單元件。
  5. angular 13.3.0

程式碼和工具

  1. Peaks 1.0：與音訊波形互動的 UI 元件——假設你正在構建某種音訊編輯器——這就是你可能想要使用的那種控制元件。它也來自 BBC，這很酷。
  2. Wave.js 2.0： Real Simple String Diffing — 一個音訊視覺化庫——如果你不需要建立音訊編輯器而只想要一個音樂去 wub wub，線條去擺動擺動型別的視覺化，這是給你的。這裡有一些現場演示。
  3. Faker 6.0：在節點或瀏覽器中生成大量虛假資料——在維護者“流氓”的問題之後，一個社群團隊接管了流行的 Faker 專案，他們的第一個主要版本現已釋出，並提供 ESM 支援。v5 到 v6 遷移說明。
  4. sysend.js：在同一瀏覽器中開啟的頁面或選項卡之間傳送訊息——一個小型庫，抽象了在同一瀏覽器中開啟的頁面之間傳送訊息的機制。支援跨域通訊，基於 localStorage 和 BroadcastChannel API。這是一個演示（如果你開啟它兩次）。
  5. Chrome 擴充套件 CLI：下一個 Chrome 擴充套件的 CLI — 想要儘快為 Chrome 構建擴充套件？該工具旨在讓您儘快走上正確的道路。
  6. js2xml：將 JavaScript 程式碼轉換為 XML 文件——為什麼？顯然，為了更容易使用 XPath 從其他地方提取東西。
  7. Emoji Button：A Vanilla JavaScript Emoji Picker — 將按鈕元素轉換為 emoji 選擇器（類似於某些作業系統提供的）。
  8. Liqvid 2.1：使用 React、HTML、CSS 和 JS 建立互動式視訊——現在您也可以在視訊中使用 Web Animations API。

相關文章