前端周刊發(fā)表每周前端技術(shù)相關(guān)的大事件暑诸、文章教程、一些框架的版本更新辟灰、以及代碼和工具屠列。每周定期發(fā)表，歡迎大家關(guān)注伞矩、轉(zhuǎn)載。
<span style="color:red;">如果外鏈不能訪問夏志，關(guān)注公眾號前端每周看乃坤，里面有解決辦法</span>
大事件
大事件！大事件沟蔑！瀏覽器可能支持運行 Typescript啦——今天湿诊，我們很高興地宣布我們支持并與第三方共同合作來推進(jìn) 新的 Stage 0 提案，以此為 JavaScript 帶來可選和可擦除的類型語法瘦材。因為這種新語法不會改變周邊代碼的運行方式厅须，所以它可以有效地充當(dāng)注釋。我們認(rèn)為這有可能使 TypeScript 更容易食棕、更快地用于各種規(guī)模的開發(fā)朗和。
Shader Park：使用 JavaScript 創(chuàng)建交互式 2D 和 3D 著色器——一個基于 Web 的開源平臺、社區(qū)和 庫簿晓，通過讓您使用 JavaScript 程序化地創(chuàng)建著色器和 GPU 來簡化神秘的著色器和 GPU 世界眶拉。這里有很多可以玩和探索的地方。注意：由于使用了 WebGL憔儿，該站點在瀏覽器上的負(fù)擔(dān)很重忆植，因此可能并不適合所有設(shè)備。
Prettier 2.6 發(fā)布——流行的代碼格式化工具現(xiàn)在可以singleAttributePerLine選擇每行只放置一個屬性（這在某些類型的模板中很常見）谒臼，添加了 TypeScript 4.6 支持朝刊，并在各種上下文中更好地格式化 JS 代碼（例如裝飾器、內(nèi)await聯(lián)JSX蜈缤，行尾注釋）拾氓。
npm 包如何用于烏克蘭反對戰(zhàn)爭的抗議活動——幾天前，依賴node-ipc的項目（例如 Vue CLI）的用戶開始注意到一些奇怪的行為底哥，包括文件在地理定位到俄羅斯的系統(tǒng)上被覆蓋（或白俄羅斯）和抗議信息痪枫。這是一個復(fù)雜的故事织堂，也是包裝供應(yīng)鏈有多脆弱的另一個提醒。如果您愿意奶陈， Register有一個更短且更具新聞性的文章易阳。
Deno 1.20 已發(fā)布——JavaScript / TypeScript 運行時的一個相當(dāng)大的版本，具有更高的性能吃粒、用于運行基準(zhǔn)測試和測試套件的新命令潦俺、AbortSignal 超時，以及對 V8 10.0 和 TypeScript 4.6 的升級徐勃。要是所有項目都寫得像這樣徹底就好了事示。
文章
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)介紹了許多此類文章，但對于布局項目的“正確”方式臀脏，總是有另一種觀點的空間劝堪，尤其是 React 本身在這個問題上相當(dāng)不以為然。
jQuery 源代碼中的“雙重分配模式” - 作者在 jQuery 的代碼中發(fā)現(xiàn)了一種有趣的技術(shù)揉稚，并著手研究它的好處秒啦。
Next.js 的新官方“基礎(chǔ)”課程 - Next.js 發(fā)布了一個新的基礎(chǔ)課程，涵蓋了 React 的基本知識搀玖、它與 Next.js 的關(guān)系以及構(gòu)建第一個 Next.js 應(yīng)用程序余境。
Remix vs Next.js - Remix是一個相對較新的基于 React 的全棧框架灌诅，由 React Router 背后的原始團隊創(chuàng)建芳来。它對更為人所知的Next.js采用了不同的方法。這是關(guān)鍵差異的詳細(xì)指南猜拾。
創(chuàng)建一個簡單的表格排序和分頁功能 - 在 JavaScript 的幫助下呈現(xiàn)一個可排序的分頁表格绣张。
TypeScript 擅長的地方的討論 - TypeScript 的 Luke Hoban 和 Daniel Rosenwasser 的采訪摘錄。
升級 Next.js 以實現(xiàn)即時性能改進(jìn) - Vercel 團隊如何將 Next.js 8 演示提升到 Next.js 12 標(biāo)準(zhǔn)并在過程中看到巨大改進(jìn)的案例研究关带。
框架發(fā)布
- Verdaccio 5.8 – 私有 npm 注冊表侥涵，現(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 — 一個音頻可視化庫——如果你不需要創(chuàng)建音頻編輯器而只想要一個音樂去 wub wub蚪燕，線條去擺動擺動類型的可視化娶牌，這是給你的奔浅。這里有一些現(xiàn)場演示。
- Faker 6.0：在節(jié)點或瀏覽器中生成大量虛假數(shù)據(jù)——在維護者“流氓”的問題之后诗良，一個社區(qū)團隊接管了流行的 Faker 項目汹桦，他們的第一個主要版本現(xiàn)已發(fā)布，并提供 ESM 支持鉴裹。v5 到 v6 遷移說明舞骆。
- sysend.js：在同一瀏覽器中打開的頁面或選項卡之間發(fā)送消息——一個小型庫，抽象了在同一瀏覽器中打開的頁面之間發(fā)送消息的機制径荔。支持跨域通信督禽，基于 localStorage 和 BroadcastChannel API。這是一個演示（如果你打開它兩次）总处。
- Chrome 擴展 CLI：下一個 Chrome 擴展的 CLI — 想要盡快為 Chrome 構(gòu)建擴展狈惫？該工具旨在讓您盡快走上正確的道路。
- 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试溯。
