前端週刊第58期:送你 3 道面試題

王仕軍發表於2017-06-03

破解前端面試系列文章本週出到第 3 篇:如何搞定紙上程式設計環節,早些時候釋出了閉包篇DOM 篇,感興趣的同學可以看看,對面試官和求職者都應該有些參考價值,每篇文章下面的討論也是值得閱讀的,部分讀者提出了非常不錯的建議和想法。下面是本週精選內容,請享用。

技術動態

Prettier 釋出 1.4.0 版本

非常好用的程式碼格式化工具 Prettier 本週釋出了 1.4.0 版本,新版增加了對 CSS、Less、SASS、TypeScript 的支援,也修復了格式化 JSX 時的一些問題,預計接下來各程式碼編輯器外掛也會緊跟升級,VSCode 裡面的外掛已經升級完了,你還在等啥?

CSSConf EU 2017 視訊列表

原計劃收錄在 56 期的技術大會視訊裡面的內容,但是考慮到資訊量太大,延遲到了這周。這是 CSSConf EU 2017 的視訊列表,相比而言 CSS 的社群更小也更年輕,但是還是有不錯的內容,跟 CSS-IN-JS 有關的題為《A Unified Styling Language》演講推薦觀看,Medium 上也為相同名字的文章。

文章教程

JS 模組現狀和建議

最近關於 Node.js 中如何實現 ES 模組的討論多了起來,這篇文章對 ES 模組當下的發展做了梳理,包括各種工具(比如 Webpack、Rollup)的支援情況,瀏覽器的支援情況。並在最後就是否應該開始 ES 模組給出了比較中肯的建議。

閱讀 flexbox 規範學會的 11 個要點

作者閱讀了 flexbox 的規範之後,對 flexbox 又有了更深的理解和認識。作者感慨,通過閱讀規範,它最大的收穫是知道自己原來對 flexbox 的理解是不完整的,即使他看了很多部落格文章,寫了不少程式碼。技術深度就是這樣練出來的,比如你是否有看過 es5、es6 的規範呢?

你應該知道的 5 個 Node.js 8 新特性

小有爭議的一篇文章,介紹了 Node.js 8 裡面你可以上手即用的 5 個新特性,關於 Node.js 8 的內容已經非常多了,大家可以自己去找,官方的發版建議閱讀。

O(logn) 時間複雜度到底該怎麼理解?

演算法時間複雜度裡面的 O(1)、O(n) 等都是非常直觀且容易理解的,可能你能意會 O(logn) 的複雜度,怎麼跟人解釋清楚?這篇文章的作者用圖解法做了嘗試,試試看?

LeetCode 題解:免費電子書

電子書的作者為了撬開演算法的大門,刷完了 LeetCode 的題目,將自己做題的思路記錄下來,教是最好的學,如果你最近正巧在刷題,會是不錯的參考資料。

開發工具

stylefmt:自動化的 css 格式化工具

stylefmt 是專門為 css 定製的格式化工具,支援 less、sass,也有外掛支援各種新的 css-in-js 寫法,比如 styled-components,週四我正好在專案中有實踐,接下來會單獨寫篇文章解釋如何把樣式格式化工具整合到開發交付工作流中。

chrome dev tools 效能工具大觀

Google 官方出品的 dev tools 效能工具詳細介紹,文章比較長,介紹了幾乎所有 dev tools 內涵的效能工具,包含如何開啟、錄製,如何解讀結果,發現問題,如果你真的想學會效能診斷,把這個加到學習列表吧。

程式碼框架

react-native-animatable:超讚動畫庫

高仿 animate.css,但是專門為 react native 定製, 各種動畫都定義成了元件,動畫宣告方式也都是宣告式的,引數可以直接通過節點 props 來控制。

mocka:通用的內容佔位符元件

內容佔位符已經被越來越多的應用開始使用,不管是 APP 還是 WEB,掘金的 WEB 版就有,其作用就是提高使用者對 APP 響應速度的感知,mocka 封裝了常見的內容佔位符程式碼,你可以直接在自己的專案中使用。不要看錯了,這個是 mocka,和測試框架 mocha 僅一字之差。

視訊教程

用 tmux 管理你的命令列會話

在程式設計師的世界裡命令列終端就像是 chrome,會根據需要開很多個視窗或者標籤頁,但是機器重啟之後如何快速恢復之前的工作目錄,開啟的檔案,執行的程式?早些時候你可能需要用 screen,後來出現了更好的視窗管理工具 tmux,這個視訊教程能讓你在 30 分鐘快速入門 tmux。

如何禁用 react-native 中的黃色告警?

開發 react-native 的同學可能有注意到偶爾會遇到黃色的報警,每次重新整理都會出來,有些你不打算處理的其實是可以用一行程式碼直接忽略掉、或者全部禁用(個人不推薦後面這種做法),egghead.io 的視訊手把手的教你配置。

精彩問答

react-native 中如何管理靜態資源?

webpack 裡面一切皆模組的思路同樣可以用到 react-native 裡面的靜態資源管理,不過方法略有差異,比起在 react jsx 程式碼中零星分佈的動態 require 更優雅。

如何用 CSS 對圖片裁剪和縮放?

使用 CSS 對圖片進行裁剪和縮放是實際業務中比較常見的需求,解決方法也不少,來自 Stack Overflow 的問答。

One More Thing

本文作者王仕軍,商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。如果你覺得本文對你有幫助,請點贊!如果對文中的內容有任何疑問,歡迎留言討論。想知道我接下來會寫些什麼?歡迎訂閱我的掘金專欄知乎專欄:《前端週刊:讓你在前端領域跟上時代的腳步》。

Happy Hacking

相關文章