前端技術週刊 2018-03-02

前端快爆

• webpack 4 正式發佈，代號爲「Legato」。新版本構建性能大幅提高，同時帶來了多項重要更新：零配置啓動、支持 ESM 和 JSON 形式的模塊類型、支持 WebAssembly、移除 CommonsChunkPlugin 取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk、依賴的 node.js 環境升級爲 6.11.5+。此外，新增了必選的模式選項 「production」 與 「development」，點此以瞭解更多反作用。

老絲點評：感謝 parcel 實現了 webpack 的偉大復興。( 譯文）

• Firefox 60 的開發者工具實現了 CSS 自定義屬性聯想功能，輸入 var(- 後能夠自動聯想。?
  

老絲點評：隨着 CSS 自定義屬性的流行，這個功能會頗有用。

• WOFF File Format 2.0 正式成爲 W3C 推薦（W3C Recommendation）標準，新標準支持了整個 TrueType 和 OpenType 規範，包括可變字體、多彩字體、字體集合等。同時還採用了 Brotli 形式的熵編碼，針對部分字體作了預處理，最終獲得比 1.0 平均高 13.5% ~ 27% 的壓縮比。?

老絲點評：多彩 iconfont 不是夢。

• Chrome 66 的開發者工具中，支持在網絡面板把請求觸發的部分 JS 文件黑盒化以查看真正的資源加載觸發點，在設備模擬模式中容許自適應縮放，對默認樣式表的修改能夠持久化了。更棒的是能夠在預覽視圖看到到渲染後的 HTML 頁面或者格式化後的代碼。?
  

老絲點評：其餘瀏覽器的網絡調試功能太弱了。

• npm 5.7.1 發佈，支持了npm ci命令，此命令將讀取 package-lock.json 中的內容並安裝，在 angular-cli 中測試達到了 3 倍於 npm install 的速度提高；package-lock.json 的行爲也修正爲更符合直覺的方式：它由 npm install 構建，並能在 package.json 更新時由 npm install 觸發更新，用於 npm ci 進行快速構建。?

優秀 Demo

• 使用 CSS 變量建立的 Hover 效果

• Animated Fragment Slideshow
  

專題

CSS 魔法師（Houdini）

Houdini 是一個新的W3C工做組，該小組制定了一系列規範，使瀏覽器開放了 CSS 底層渲染相關的 API，供開發者更加方便靈活的擴展 CSS 功能。

• 規範：https://drafts.css-houdini.org/
• 瀏覽器實現進度：https://ishoudinireadyyet.com/

文章

• Houdini: Demystifying CSS
• Houdini：CSS 領域最使人振奮的革新（譯文）
• 使用 CSS Houdini 繪製平滑圓角（譯文）
• CSS 魔術師 Houdini API 介紹

Demo 合集

• CSS Houdini Experiments（@iamvdo）
• Google 官方 Demo

分享

• Houdini: Demystifying CSS（Google Developers）
• Houdini & Polyfilling CSS（CSS Day 2017-06-15）
• CSS Houdini 實戰（一絲）

本期編輯：壹絲， 審閱：humphry