前端週刊第57期：《戰爭與和平版》的 CSS-IN-JS 黑歷史

不知道你們是否注意到，社區中出現的 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