不知道大家是否注意到，社群中出現的 CSS 尤其是 CSS-IN-JS 風格的輪子輪子越來越多，這個事情在前端社群引發的很多的討論，或者說是爭吵，比如有人說 CSS is Broken，就有人對 CSS is Fine。Cristiano Rastelli 以《戰爭與和平》為藍本回顧了歷史，也給出了非常讚的觀察視角，程式設計師應該務實，而不是教條，更重要的是保持好奇心。
另外第 56 期提到的各種技術大會，已經陸續有人整理適合 WEB 的視訊列表，本期收錄了我看過的比較精彩的兩個，如果你有時間看更多，請移步：Google I/O、JS Conf Europe、Vue Conf。
共 2121 字，讀完需 4 分鐘。以下是本週精選內容，請享用。
技術動態
NPM 5.0 釋出：更像 Yarn
官方的 NPM 5.0 釋出日誌，你需要知道的版本更新要點：更快，有 Benchmark 表明它比 Yarn 還快；能夠自動保持 package.json 裡面的縮排；--save 變為預設引數；支援離線模式；支援依賴鎖定，直接 npm install -g npm@5 可以體驗。
styled-components 2.0 釋出
對，就是以抹指甲油圖片為圖示的那個 CSS-IN-JS 庫，我第一次使用就愛上她了，本週釋出了 2.0 版本，可以說是真正意義上的大版本，程式碼體積更小、新增 SSR 支援、釋出全新的文件站點、新增多個 helper 函式幫助你實現程式碼複用、新增 Babel 外掛來優化生產環境的程式碼，最重要的點是你可以直接升級到版本 2.0 而不用做任何更改。
Autoprefixer 7.0 釋出
可能部分同學對 Autoprefixer 比較陌生，是能夠自動幫你提高 CSS 的瀏覽器相容性CSS 預處理工具，各種構建工具都有對應的外掛。初版於 4 年前釋出的，作者重寫整個倉庫（從 Coffee 到 Babel）之後，最近釋出了 7.0 版本，新版最大變化是升級 BrowserList 到 2.0。
文章教程
Stack Overflow 全站切換 HTTPS 之路
本週宣佈幫助 100W 開發者成功退出 Vim 的程式設計師社交網站 Stack Overflow 最近宣佈了另外一件大事：花了兩年時間終於把全站切換到 HTTPS，對於部分正在升級到 HTTPS 或者想升級的同學可以看看，有個心理準備。內容比較全面，從基礎設施的遷移、到應用架構、程式碼邏輯的遷移，都有經驗和教訓。
JS 函式的前世今生
函式是 JS 中的一等公民，語言在進化，其中函式的編寫、使用方式也在不斷進化，這篇文章做了非常不做的梳理和講解，從早期的函式表示式、函式宣告，函式構造，匿名函式，到後來的箭頭函式、generator、async 函式，以及不同語法組合的函式，值得看看。
保障 CSS 編碼風格的工具鏈
清晰簡潔的程式碼看起來養眼，讀起來也更易懂，在 JS 領域，有很多工具來保障編碼風格，比如 ESLint、Standard，也有工具幫你格式化程式碼，比如 Prettier、JS-Beautify。社群還比較年輕的 CSS 領域呢？早期的 csslint 太難用，但是最近一兩年出現了幾個比較好的工具，比如程式碼檢查的 stylelint，程式碼格式化的 stylefmt。
Style Guide Guide：編寫樣式規範的指南
比較重視程式碼重用和使用者體驗一致性的前端團隊在處理複雜的業務都會著手積累自己的樣式規範，但實際操作過程中，可能部分樣式規範後來淪為紙上的規範，該如何維護真正有價值的樣式規範呢？比如樣式規範該怎麼組織？文件該怎麼寫？向 Brad Frost 學習。
開發工具
sitespeed.io：給你的應用來個全面的效能診斷？
sitespeed.io 完全基於開源工具構建，能夠一鍵對你的 WEB 應用做全面的效能診斷，內涵 Browsertime、ChromeHar、PageXRay 等工具，支援把結構輸出到 Grafana，安裝方式也比較靈活，近期在關注效能的同學可以看看。
程式碼框架
Shoutem 開源的 React Native 動畫元件
Shoutem 已經被認為是移動領域的 WordPress，可以快速幫使用者構建 APP，其在 React Native 上做的事情還是不少，這是他們開源 React Native 的動畫元件，支援常見的位置、大小、透明度、座標軸，動畫作者還在 Medium 上發了一篇不錯的文章：《Declare Peace with React Native Animations》，感興趣的可以去搜來讀讀。
在 Node.js 頂級作用域中直接使用 await
或許你也曾疑惑，為啥 Node.js 裡面的 await 語法不能直接使用，而需要在特定的 async 函式中使用，這個 package 源自 Sindre Sorhus 在 twitter 發的一條牢騷，實現的方式也比較 hack，很可能這個特性會出現內建的支援，夢想是要有的，萬一實現了呢。
ensure-error：確保你收到的是 Error 物件
npm 社群貢獻的各種 package 在數量上絕對碾壓其他語言，但是質量也是參差不齊的，具體到筆者自己踩過的坑就是某些包丟擲的錯誤不是標準的 Error 例項，導致我們的錯誤處理程式碼要做特別的改造才不會在處理錯誤的時候再出錯。和 ensure-callback 類似，這個包能確保你拿到的 error 是正確的物件，Sindre Sorhus 這種發現問題解決問題的思路非常值得我們學習。
找找靈感
Awesome 系列：函數語言程式設計的資料合集
Awesome 系列，整理了函數語言程式設計方面的很多不錯的演講、文章、視訊，覆蓋的語言也比較多，感興趣的可以慢慢看。
視訊教程
DevTools: State of the Union 2017
由 Paul Irish 在 Google I/O 2017 上給大家帶來的分享，裡面包含大量 Chrome 開發者工具的現場演示，比如：除錯 PWA 的功能和技巧；如何解讀應用效能、可用性報告；如何使用最新的 async 單步除錯功能；如何快速的在開發者工具中編寫、儲存程式碼。
WebAssembly 對 React 究竟意味著什麼？
程式設計師卡通作家 Lin Clark 在 JSConf EU 2017 上的演講，Facebook 是真心想把 React 的效能做到機制，而 WebAssembly 確實快，二者結合起來會怎樣？我不劇透了，感興趣的自己看哈。如果想看 Link Clark 的更多卡通畫，可以去搜 ”A Cartoon Guide to“。
egghead.io：玩轉 JS 中的陣列
陣列可以說是任何程式語言裡面最重要的資料型別，JS 也不例外，掌握他們的必要性不必言語，該視訊列表涵蓋了幾乎所有的 JS 陣列操作，內涵不少使用陣列完成常見任務的特別技巧。
One More Thing
本文作者王仕軍，商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱我的掘金專欄或知乎專欄：《前端週刊：讓你在前端領域跟上時代的腳步》。
Happy Hacking