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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Happy Hacking