前端週刊第51期:1000個包的男人 + Vue.js + React Native + 奇技淫巧

王仕軍發表於2017-04-14

Node.js 社群最高產的工程師 Sindre Sorhus 本週釋出了他的第 1000 個 npm 包,詳見這裡,據 npm 官方統計,全網的 npm 包下載量中有 12% 都跟 Sindre Sorhus 有關。看到這個,你作何感想?另外,部分精彩的文章我已經翻譯成中文發到知乎專欄上,就沒有收錄到前端週刊。下面是本週的精選內容,請享用!

技術動態

谷歌推人工智慧繪圖工具 AutoDraw

AutoDraw 是谷歌推出的人工智慧繪圖工具,能根據你的手稿作為啟發式資訊,然後列出你可能想畫的內容,對於畫畫不好的同學可能會很有幫助,不畫畫沒關係,當個玩具也可以。為什麼發在前端週刊?你對它的前端是怎麼做不感興趣麼?

Vue Conf 2017 報名入口

全球首屆 Vue.js 開發者大會將於 2017 年 5 月 20 日在北京航空航天大學新主樓會議中心舉辦。Vue.js 作者將出席本次大會,並發表主題演講。這裡是報名入口,早鳥票當天就被搶光了,你如果有女朋友,可以帶過去,哈哈!

微信公眾號可以登出了

微信公眾號近期宣佈支援自主登出,使用者在核實身份資訊或者驗證帳號主體後,可以在公眾號後臺發起登出流程。帳號完成登出後,主體註冊次數、運營者身份證資訊、手機號碼、帳號暱稱、管理員微訊號、註冊郵箱等,均可釋放。

如何評價微軟開源的 ReactXP ?

微軟在開源領域動作越來越多,上週開源了 ReactXP,生成能開發跨平臺的 React 應用,怎麼客觀的評價這個動作呢?看看知乎上大家的討論。

文章教程

圖解 Chrome 中的滾動錨定機制

看到這個的時候,再次感慨 Google 做產品就是在做使用者體驗,不知道你沒有遇到過,開啟了一個長頁面,已經開始閱讀,突然頁面跳了一下,丟失了你的瀏覽進度,這通常是因為你看的內容上面還有未載入完成的內容,它載入完就把下面的內容擠下去,產生頁面跳躍的感知。Chrome 瀏覽器已經對這種體驗問題做了優化,用了叫做 Scroll-Anchroing 的技術,技術方案細節在本文內的某個連結上。

整合 Nuxt.js 到現有的 Node.js 專案

Nuxt.js 是基於 Vue.js 的前後端同構應用腳手架,Feathers 是 Node.js 的 MVC 框架,當然絕大多數同學在公司不會是從頭開始一個新的專案,這篇文章講了如何把 Nuxt.js 整合到現有的 Feathers 應用中去,對其他的 MVC 框架也有參考價值。

酷殼:如何重構“箭頭型”程式碼?

“箭頭型程式碼”如果巢狀太多,可能看起來很美,因為對稱,但是讀起來想吐血,因為太長,會相當容易讓維護程式碼的人(包括自己)迷失在程式碼中,因為看到最內層的程式碼時,你已經不知道前面的那一層一層的條件判斷是什麼樣的,程式碼是怎麼執行到這裡的,所以,那怎麼能不寫出這種程式碼呢?這篇文章提供了思路。

Chrome 裡面的 Coverage 功能到底是如何工作的?

我本週發了篇文章介紹 Chrome Canary 裡面的執行時程式碼覆蓋率功能,這篇文章從原始碼的層面研究了這個程式碼覆蓋率功能到底是怎麼實現的,文中有彩蛋,看到你就會自己開發 Dev Tools 啦。

開發工具

GitHub:開源專案運維自動化工具箱

GitHub 官方整理的能幫助你運維開源專案的工具列表,能把日常的大部分運營工作自動化,比如程式碼風格檢查、持續整合、包管理、變更日誌生成、自動找 Reviewer、依賴包過期提醒。說實話,大部分工具其實可以用到公司內部的工程化實踐中,前提是你願意花時間去學習折騰。

alinode:基於 Node.js 執行時的應用效能管理解決方案

官方說法:alinode 是阿里雲出品的 Node.js 應用服務解決方案,幫助開發者迅速洞見效能細節,快速定位疑難雜症,直探問題根源。我的說法:沒有調查就沒有發言權,準備近期使用,之後總結心得出來。

程式碼框架

React Native 微信功能整合例項

該倉庫在 React Native 中整合了微信登入、收藏、分享、付款功能,支援 Android 和 iOS 版本,如果你最近在研究 React Native,接下來你很可能會有類似的需求。

VMS:基於 Vue.js 2.0 的 CMS 系統

類似專案收錄過兩個,前端類似 vue-admin,但是包含了完整的 Node.js 後端,有比較簡單的許可權控制(對於複雜的應用略顯簡陋),整合了常見的後臺管理所需的元件:如 WangEditor 富文字編輯器、輕量級 Markdown 編輯器、七牛雲圖片上傳、極光推送等。

視訊教程

使用 Nuxt.js 和 Vuex 構建 Vue.js 服務端渲染應用

Nuxt.js 和 Vuex 是啥這裡就不廢話了,來自 egghead.io 的課程,從 0 開始,教你如何如何使用 Nuxt.js 來組織應用程式碼,Vuex 管理狀態。

精彩問答

toolingtips:如何在 git grep 的時候預設顯示行號?

Git 相信很多人都熟悉,grep 自命令可用來快速查詢,但是預設的查詢結果不顯示匹配的程式碼在哪一行,這其實不利於效率的提升,因為大概率你定位到檔案之後還要去檔案裡再搜一遍才能定位到行,為什麼不一步搞定呢?看看這裡的第 2 個答案,修改的檔案時 ~/.gitconfig。

toolingtips:如何高效的操作 Mac 中的 Finder 和截圖

Mac 中的檔案系統管理器 Finder 和截圖相信是很多人常用的,這個帖子裡面有些小技巧能讓你事半功倍,至少不依賴第三方軟體,你確定不去看看?注意是第 1 和第 3 個答案。

toolingtips:如何讓 mongoose 填充巢狀的關聯欄位

超過 3 個表的關聯在複雜的業務中非常常見,mongoose 中有個 populate 查詢語法,可以按欄位填充關聯表裡面的資料,那怎麼填充巢狀的關聯表資料呢?看這裡的第2 個答案。順道吐槽下 mongoose 的文件,誰看誰噁心。

One More Thing

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

Happy Hacking

相關文章