不知道大家是否注意到，社區中出現的 CSS 尤其是 CSS-IN-JS 風格的輪子輪子越來越多，這個事情在前端社區引發的很多的討論，或者說是爭吵，比如有人說 CSS is Broken，就有人對 CSS is Fine。Cristiano Rastelli 以《戰爭與和平》為藍本<a >回顧了歷史</a>，也給出了非常贊的觀察視角，程序員應該務實，而不是教條，更重要的是保持好奇心。
另外第 56 期提到的各種技術大會，已經陸續有人整理適合 WEB 的視頻列表，本期收錄了我看過的比較精彩的兩個，如果你有時間看更多，請移步：<a >Google I/O</a>、<a >JS Conf Europe</a>、<a >Vue Conf</a>。
共 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
