摘要：以戰(zhàn)爭與和平為藍本回顧了歷史，也給出了非常贊的觀察視角，程序員應(yīng)該務(wù)實，而不是教條，更重要的是保持好奇心。初版于年前發(fā)布的，作者重寫整個倉庫從到之后，最近發(fā)布了版本，新版最大變化是升級到。

不知道大家是否注意到，社區(qū)中出現(xiàn)的 CSS 尤其是 CSS-IN-JS 風(fēng)格的輪子輪子越來越多，這個事情在前端社區(qū)引發(fā)的很多的討論，或者說是爭吵，比如有人說 CSS is Broken，就有人對 CSS is Fine。Cristiano Rastelli 以《戰(zhàn)爭與和平》為藍本回顧了歷史，也給出了非常贊的觀察視角，程序員應(yīng)該務(wù)實，而不是教條，更重要的是保持好奇心。
另外第 56 期提到的各種技術(shù)大會，已經(jīng)陸續(xù)有人整理適合 WEB 的視頻列表，本期收錄了我看過的比較精彩的兩個，如果你有時間看更多，請移步：Google I/O、JS Conf Europe、Vue Conf。
共 2121 字，讀完需 4 分鐘。以下是本周精選內(nèi)容，請享用。

官方的 NPM 5.0 發(fā)布日志，你需要知道的版本更新要點：更快，有 Benchmark 表明它比 Yarn 還快；能夠自動保持 package.json 里面的縮進；--save 變?yōu)槟J參數(shù)；支持離線模式；支持依賴鎖定，直接 npm install -g npm@5 可以體驗。

對，就是以抹指甲油圖片為圖標(biāo)的那個 CSS-IN-JS 庫，我第一次使用就愛上她了，本周發(fā)布了 2.0 版本，可以說是真正意義上的大版本，代碼體積更小、添加 SSR 支持、發(fā)布全新的文檔站點、新增多個 helper 函數(shù)幫助你實現(xiàn)代碼復(fù)用、新增 Babel 插件來優(yōu)化生產(chǎn)環(huán)境的代碼，最重要的點是你可以直接升級到版本 2.0 而不用做任何更改。

可能部分同學(xué)對 Autoprefixer 比較陌生，是能夠自動幫你提高 CSS 的瀏覽器兼容性CSS 預(yù)處理工具，各種構(gòu)建工具都有對應(yīng)的插件。初版于 4 年前發(fā)布的，作者重寫整個倉庫（從 Coffee 到 Babel）之后，最近發(fā)布了 7.0 版本，新版最大變化是升級 BrowserList 到 2.0。

本周宣布幫助 100W 開發(fā)者成功退出 Vim 的程序員社交網(wǎng)站 Stack Overflow 最近宣布了另外一件大事：花了兩年時間終于把全站切換到 HTTPS，對于部分正在升級到 HTTPS 或者想升級的同學(xué)可以看看，有個心理準(zhǔn)備。內(nèi)容比較全面，從基礎(chǔ)設(shè)施的遷移、到應(yīng)用架構(gòu)、代碼邏輯的遷移，都有經(jīng)驗和教訓(xùn)。

函數(shù)是 JS 中的一等公民，語言在進化，其中函數(shù)的編寫、使用方式也在不斷進化，這篇文章做了非常不做的梳理和講解，從早期的函數(shù)表達式、函數(shù)聲明，函數(shù)構(gòu)造，匿名函數(shù)，到后來的箭頭函數(shù)、generator、async 函數(shù)，以及不同語法組合的函數(shù)，值得看看。

清晰簡潔的代碼看起來養(yǎng)眼，讀起來也更易懂，在 JS 領(lǐng)域，有很多工具來保障編碼風(fēng)格，比如 ESLint、Standard，也有工具幫你格式化代碼，比如 Prettier、JS-Beautify。社區(qū)還比較年輕的 CSS 領(lǐng)域呢？早期的 csslint 太難用，但是最近一兩年出現(xiàn)了幾個比較好的工具，比如代碼檢查的 stylelint，代碼格式化的 stylefmt。

比較重視代碼重用和用戶體驗一致性的前端團隊在處理復(fù)雜的業(yè)務(wù)都會著手積累自己的樣式規(guī)范，但實際操作過程中，可能部分樣式規(guī)范后來淪為紙上的規(guī)范，該如何維護真正有價值的樣式規(guī)范呢？比如樣式規(guī)范該怎么組織？文檔該怎么寫？向 Brad Frost 學(xué)習(xí)。

sitespeed.io 完全基于開源工具構(gòu)建，能夠一鍵對你的 WEB 應(yīng)用做全面的性能診斷，內(nèi)涵 Browsertime、ChromeHar、PageXRay 等工具，支持把結(jié)構(gòu)輸出到 Grafana，安裝方式也比較靈活，近期在關(guān)注性能的同學(xué)可以看看。

Shoutem 已經(jīng)被認為是移動領(lǐng)域的 WordPress，可以快速幫用戶構(gòu)建 APP，其在 React Native 上做的事情還是不少，這是他們開源 React Native 的動畫組件，支持常見的位置、大小、透明度、坐標(biāo)軸，動畫作者還在 Medium 上發(fā)了一篇不錯的文章：《Declare Peace with React Native Animations》，感興趣的可以去搜來讀讀。

或許你也曾疑惑，為啥 Node.js 里面的 await 語法不能直接使用，而需要在特定的 async 函數(shù)中使用，這個 package 源自 Sindre Sorhus 在 twitter 發(fā)的一條牢騷，實現(xiàn)的方式也比較 hack，很可能這個特性會出現(xiàn)內(nèi)置的支持，夢想是要有的，萬一實現(xiàn)了呢。

npm 社區(qū)貢獻的各種 package 在數(shù)量上絕對碾壓其他語言，但是質(zhì)量也是參差不齊的，具體到筆者自己踩過的坑就是某些包拋出的錯誤不是標(biāo)準(zhǔn)的 Error 實例，導(dǎo)致我們的錯誤處理代碼要做特別的改造才不會在處理錯誤的時候再出錯。和 ensure-callback 類似，這個包能確保你拿到的 error 是正確的對象，Sindre Sorhus 這種發(fā)現(xiàn)問題解決問題的思路非常值得我們學(xué)習(xí)。

Awesome 系列，整理了函數(shù)式編程方面的很多不錯的演講、文章、視頻，覆蓋的語言也比較多，感興趣的可以慢慢看。

由 Paul Irish 在 Google I/O 2017 上給大家?guī)淼姆窒?，里面包含大?Chrome 開發(fā)者工具的現(xiàn)場演示，比如：調(diào)試 PWA 的功能和技巧；如何解讀應(yīng)用性能、可用性報告；如何使用最新的 async 單步調(diào)試功能；如何快速的在開發(fā)者工具中編寫、保存代碼。

程序員卡通作家 Lin Clark 在 JSConf EU 2017 上的演講，F(xiàn)acebook 是真心想把 React 的性能做到機制，而 WebAssembly 確實快，二者結(jié)合起來會怎樣？我不劇透了，感興趣的自己看哈。如果想看 Link Clark 的更多卡通畫，可以去搜 ”A Cartoon Guide to“。

數(shù)組可以說是任何編程語言里面最重要的數(shù)據(jù)類型，JS 也不例外，掌握他們的必要性不必言語，該視頻列表涵蓋了幾乎所有的 JS 數(shù)組操作，內(nèi)涵不少使用數(shù)組完成常見任務(wù)的特別技巧。

本文作者王仕軍，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內(nèi)容有任何疑問，歡迎留言討論。想知道我接下來會寫些什么？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領(lǐng)域跟上時代的腳步》。

Happy Hacking