前端周刊發(fā)表每周前端技術(shù)相關(guān)的大事件、文章教程、一些框架的版本更新、以及代碼和工具。每周定期發(fā)表，歡迎大家關(guān)注、轉(zhuǎn)載。
<span style="color:red;">如果外鏈不能訪問，關(guān)注公眾號(hào)前端每周看，里面有解決辦法</span>
大事件
大事件！大事件！瀏覽器可能支持運(yùn)行 Typescript啦——今天，我們很高興地宣布我們支持并與第三方共同合作來推進(jìn) 新的 Stage 0 提案，以此為 JavaScript 帶來可選和可擦除的類型語法。因?yàn)檫@種新語法不會(huì)改變周邊代碼的運(yùn)行方式，所以它可以有效地充當(dāng)注釋。我們認(rèn)為這有可能使 TypeScript 更容易、更快地用于各種規(guī)模的開發(fā)。
Shader Park：使用 JavaScript 創(chuàng)建交互式 2D 和 3D 著色器——一個(gè)基于 Web 的開源平臺(tái)、社區(qū)和 庫，通過讓您使用 JavaScript 程序化地創(chuàng)建著色器和 GPU 來簡(jiǎn)化神秘的著色器和 GPU 世界。這里有很多可以玩和探索的地方。注意：由于使用了 WebGL，該站點(diǎn)在瀏覽器上的負(fù)擔(dān)很重，因此可能并不適合所有設(shè)備。
Prettier 2.6 發(fā)布——流行的代碼格式化工具現(xiàn)在可以singleAttributePerLine選擇每行只放置一個(gè)屬性（這在某些類型的模板中很常見），添加了 TypeScript 4.6 支持，并在各種上下文中更好地格式化 JS 代碼（例如裝飾器、內(nèi)await聯(lián)JSX，行尾注釋）。
npm 包如何用于烏克蘭反對(duì)戰(zhàn)爭(zhēng)的抗議活動(dòng)——幾天前，依賴node-ipc的項(xiàng)目（例如 Vue CLI）的用戶開始注意到一些奇怪的行為，包括文件在地理定位到俄羅斯的系統(tǒng)上被覆蓋（或白俄羅斯）和抗議信息。這是一個(gè)復(fù)雜的故事，也是包裝供應(yīng)鏈有多脆弱的另一個(gè)提醒。如果您愿意， Register有一個(gè)更短且更具新聞性的文章。
Deno 1.20 已發(fā)布——JavaScript / TypeScript 運(yùn)行時(shí)的一個(gè)相當(dāng)大的版本，具有更高的性能、用于運(yùn)行基準(zhǔn)測(cè)試和測(cè)試套件的新命令、AbortSignal 超時(shí)，以及對(duì) V8 10.0 和 TypeScript 4.6 的升級(jí)。要是所有項(xiàng)目都寫得像這樣徹底就好了。
文章
How To Make a Drag-and-Drop File Uploader with Vue.js 3 — 整整四年前，我們鏈接到Joseph 的使用vanilla JavaScript制作拖放文件上傳，但現(xiàn)在他又回來了最新版本的 Vue.js 面臨同樣的挑戰(zhàn)。
令人愉快的 React 文件/目錄結(jié)構(gòu) — 我們已經(jīng)介紹了許多此類文章，但對(duì)于布局項(xiàng)目的“正確”方式，總是有另一種觀點(diǎn)的空間，尤其是 React 本身在這個(gè)問題上相當(dāng)不以為然。
jQuery 源代碼中的“雙重分配模式” - 作者在 jQuery 的代碼中發(fā)現(xiàn)了一種有趣的技術(shù)，并著手研究它的好處。
Next.js 的新官方“基礎(chǔ)”課程 - Next.js 發(fā)布了一個(gè)新的基礎(chǔ)課程，涵蓋了 React 的基本知識(shí)、它與 Next.js 的關(guān)系以及構(gòu)建第一個(gè) Next.js 應(yīng)用程序。
Remix vs Next.js - Remix是一個(gè)相對(duì)較新的基于 React 的全棧框架，由 React Router 背后的原始團(tuán)隊(duì)創(chuàng)建。它對(duì)更為人所知的Next.js采用了不同的方法。這是關(guān)鍵差異的詳細(xì)指南。
創(chuàng)建一個(gè)簡(jiǎn)單的表格排序和分頁功能 - 在 JavaScript 的幫助下呈現(xiàn)一個(gè)可排序的分頁表格。
TypeScript 擅長(zhǎng)的地方的討論 - TypeScript 的 Luke Hoban 和 Daniel Rosenwasser 的采訪摘錄。
升級(jí) Next.js 以實(shí)現(xiàn)即時(shí)性能改進(jìn) - Vercel 團(tuán)隊(duì)如何將 Next.js 8 演示提升到 Next.js 12 標(biāo)準(zhǔn)并在過程中看到巨大改進(jìn)的案例研究。
框架發(fā)布
- Verdaccio 5.8 – 私有 npm 注冊(cè)表，現(xiàn)在具有可定制的 Web UI。
- Vuetify 3.0 Beta – Vue 的材料組件框架。
- MDX 2.1 – Markdown 中的 JSX。
- React Menu 3.0 – 可定制的嵌套菜單組件。
- angular 13.3.0
代碼和工具
- Peaks 1.0：與音頻波形交互的 UI 組件——假設(shè)你正在構(gòu)建某種音頻編輯器——這就是你可能想要使用的那種控件。它也來自 BBC，這很酷。
- Wave.js 2.0： Real Simple String Diffing — 一個(gè)音頻可視化庫——如果你不需要?jiǎng)?chuàng)建音頻編輯器而只想要一個(gè)音樂去 wub wub，線條去擺動(dòng)擺動(dòng)類型的可視化，這是給你的。這里有一些現(xiàn)場(chǎng)演示。
- Faker 6.0：在節(jié)點(diǎn)或?yàn)g覽器中生成大量虛假數(shù)據(jù)——在維護(hù)者“流氓”的問題之后，一個(gè)社區(qū)團(tuán)隊(duì)接管了流行的 Faker 項(xiàng)目，他們的第一個(gè)主要版本現(xiàn)已發(fā)布，并提供 ESM 支持。v5 到 v6 遷移說明。
- sysend.js：在同一瀏覽器中打開的頁面或選項(xiàng)卡之間發(fā)送消息——一個(gè)小型庫，抽象了在同一瀏覽器中打開的頁面之間發(fā)送消息的機(jī)制。支持跨域通信，基于 localStorage 和 BroadcastChannel API。這是一個(gè)演示（如果你打開它兩次）。
- Chrome 擴(kuò)展 CLI：下一個(gè) Chrome 擴(kuò)展的 CLI — 想要盡快為 Chrome 構(gòu)建擴(kuò)展？該工具旨在讓您盡快走上正確的道路。
- js2xml：將 JavaScript 代碼轉(zhuǎn)換為 XML 文檔——為什么？顯然，為了更容易使用 XPath 從其他地方提取東西。
- Emoji Button：A Vanilla JavaScript Emoji Picker — 將按鈕元素轉(zhuǎn)換為 emoji 選擇器（類似于某些操作系統(tǒng)提供的）。
- Liqvid 2.1：使用 React、HTML、CSS 和 JS 創(chuàng)建交互式視頻——現(xiàn)在您也可以在視頻中使用 Web Animations API。
