蒲公英 · JELLY技術(shù)周刊 Vol.26

今年的十月，不知道大家在 TODO List 上新增了多少條目準(zhǔn)備嘗鮮，你可能已經(jīng)準(zhǔn)備了 Vue3、Webpack5 以及 React v17.0 RC，然而十月中可卻遠(yuǎn)不止這些東西值得一試，npm CLI 提示你可以通過(guò)npm install -g npm@7體驗(yàn)新版本，Chromium Blog 的推文也顯示 Chrome 正在部署 HTTP/3 和 IETF QUIC……

登高遠(yuǎn)眺

天高地迥，覺(jué)宇宙之無(wú)窮

基礎(chǔ)技術(shù)

NPM v7.0.0 發(fā)布

npm v7.0.0 帶來(lái)了比較多的新特性，Workspaces、peerDependencies自動(dòng)被安裝、支持yarn.lock等，將與NodeJS v15一起發(fā)布。如果你想立即嘗試，可以使用npm i -g npm@7在終端運(yùn)行安裝。

Chrome 正在啟用 HTTP/3，支持 IETF QUIC

QUIC（Quick UDP Internet Connections）是谷歌制定的一種基于UDP的低延時(shí)的互聯(lián)網(wǎng)傳輸層協(xié)議，結(jié)合了TCP、TLS等協(xié)議的特性。HTTP/3 是HTTP的最新版本，僅在QUIC上運(yùn)行。
譯文：https://www.oschina.net/news/119045/chrome-is-deploying-http3-and-ietf-quic

工程化

Webpack 5 Module Federation: JavaScript 架構(gòu)的變革者

Module Federation是 Webpack 5 的新特性之一，它可以使 JavaScript 應(yīng)用在客戶(hù)端或服務(wù)器上動(dòng)態(tài)運(yùn)行另一個(gè) bundle 或者 build 的代碼。在了解學(xué)習(xí)這個(gè)特性的過(guò)程中，本文是最好的教程，因?yàn)樗怯蒑odule Federation的作者之一的Zack Jackson發(fā)布的，他在文中寫(xiě)到"Module Federation之于JavaScript Bundler，如同Apollo之于GraphQL"，并闡述了相關(guān)的技術(shù)實(shí)現(xiàn)以及項(xiàng)目實(shí)踐。
譯文: https://zhuanlan.zhihu.com/p/120462530

圖形編程

iOS UIScrollView 動(dòng)畫(huà)的力學(xué)原理

了解動(dòng)畫(huà)效果的力學(xué)原理對(duì)于設(shè)計(jì)的還原度非常重要，本文深度剖析 iOS UI 滾動(dòng)視圖動(dòng)畫(huà)的力學(xué)原理。
譯文：http://www.martinrgb.com/blog/index.html#/HOW_UIScrollView_Works

設(shè)計(jì)哲學(xué)

被忽視的設(shè)計(jì)：中文字體

字體是設(shè)計(jì)的基本要素之一，然而關(guān)于 Type Design 的視頻少之又少，非專(zhuān)業(yè)人士對(duì)其認(rèn)知也非常有限，很多人都會(huì)覺(jué)得：“啊，原來(lái)空氣也是要設(shè)計(jì)的嗎？”，字體作為設(shè)計(jì)的基本要素之一，它關(guān)乎著一個(gè)民族的設(shè)計(jì)風(fēng)格，這個(gè)視頻用短短的六分鐘簡(jiǎn)單動(dòng)畫(huà)和旁白將中文字體的基礎(chǔ)知識(shí)給說(shuō)明白了～

工具推介

svga——AE動(dòng)畫(huà)的另一個(gè)實(shí)現(xiàn)/展示方法

相比起有名的bodymovin lottie，svga使用了另一種方法記錄動(dòng)畫(huà)信息：每一幀的信息在導(dǎo)出前計(jì)算好，記錄在導(dǎo)出好的文件中，播放器在渲染時(shí)只需逐幀渲染，不需關(guān)心關(guān)鍵幀間插值的計(jì)算。由此帶來(lái)的是解析、播放器的庫(kù)比lottie的精簡(jiǎn)許多(gzip前57KB)，導(dǎo)出的文件也較小；另外限制也更多：不支持復(fù)雜的矢量形狀圖層、不支持AE自帶的漸變、生成、描邊、擦除等、對(duì)設(shè)計(jì)工具原生動(dòng)畫(huà)不友好，對(duì)圖片動(dòng)畫(huà)友好

滄海拾遺

滄海拾遺，積跬步以至千里

設(shè)計(jì)稿 101% 還原之 Web 字體處理

字體設(shè)計(jì)是設(shè)計(jì)中的基本要素，同樣也是在還原設(shè)計(jì)稿的過(guò)程中，提升用戶(hù)體驗(yàn)的重要一環(huán)，在兼顧體驗(yàn)的同時(shí) 101% 的來(lái)還原設(shè)計(jì)稿的所有細(xì)節(jié)才能不負(fù)項(xiàng)目中所有同學(xué)的心血。這篇關(guān)于 Web 中文字體處理的方案總結(jié)，相信會(huì)讓大家都有所收獲，特殊字體和網(wǎng)頁(yè)性能再也不是一道單選題了～

1KB 的 3D 游戲 ？？？

JS1k 這個(gè)大賽不知道有多少同學(xué)聽(tīng)過(guò)，在限制 1024 字節(jié)內(nèi)的 JavaScript 代碼完成一個(gè)參賽作品，而本期推薦的這個(gè) 3D 小游戲就出自這個(gè)比賽，很難以置信對(duì)吧，還不快進(jìn)來(lái)爽一把！（順便給大家一個(gè)小問(wèn)題，如果讓你來(lái)用 1KB 以?xún)?nèi)的代碼完成一個(gè) 3D 小游戲，可以做到嗎？）

「蒲公英」期刊，每周更新，我們專(zhuān)注于挖掘「基礎(chǔ)技術(shù)、工程化、跨端框架技術(shù)、圖形編程、服務(wù)端開(kāi)發(fā)、桌面開(kāi)發(fā)、人工智能、設(shè)計(jì)哲學(xué)、前端框架」等多個(gè)大方向的業(yè)界熱點(diǎn)，并加以專(zhuān)業(yè)的解讀；不僅如此，我們還會(huì)推介精選凹凸技術(shù)文章，向大家呈現(xiàn)團(tuán)隊(duì)內(nèi)的研究技術(shù)方向。

抬頭仰望，蒲公英的種子會(huì)生根發(fā)芽，如夏花絢爛；格物致知，我們登高遠(yuǎn)眺、滄海拾遺，以求積硅步而至千里。

蒲公英 · JELLY技術(shù)周刊貢獻(xiàn)指南

歡迎關(guān)注凹凸實(shí)驗(yàn)室博客：aotu.io

或者關(guān)注凹凸實(shí)驗(yàn)室公眾號(hào)（AOTULabs），不定時(shí)推送文章：

總結(jié)

以上是生活随笔為你收集整理的蒲公英 · JELLY技术周刊 Vol.26: 请问您这个月要来点肝么？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。