前端每週清單第 5 期

front-end

Web 前端開發的將來

用戶指望上升，咱們構建再也不是頁面，而是系統，本機和 Web 之間的界限模糊不清，URL仍然是一個殺手鐗，CSS 將更加模塊化，CSS 預處理將逐漸消失，精通 HTML 和 CSS 仍然相當重要，構建流程將得到競爭等

經常使用的 ES6 功能簡介

若是您尚未頻繁使用ES6，這是對七個最有用的概念的全面##### 《現代 JavaScript 教程》：從基礎到高級主題，簡單但詳細的說明

現代 JavaScript 應用程序的解剖

在本文中，我將向您介紹現代 JavaScript。咱們將看看最新的語言發展，並概述當前用於編寫前端Web應用程序的工具和技術。 若是你剛剛開始學習這門語言，或者幾年沒有碰到它，而且想知道你之前知道的 JavaScript 發生了什麼，這篇文章是給你的

從 react 切換到 Vue.js

React 和 Vue 相似可樂和百事可樂，在 React 中你能夠作的不少，你也能夠在 Vue 作。 有一些重要的概念上的差別，其中一些反映了 Angular 對 Vue 的影響

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

咱們不只要知道算法的複雜性，還要知道知道這樣的緣由

chrome dev tools 性能工具大直觀

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

11 個閱讀 flexbox 規範的收穫

flexbox 很是容易使用 - 它是多年的浮動和清理以後的新鮮空氣，我閱讀了它的源代碼並寫下了這篇文章

picodom: 1kb 虛擬 DOM 構建器和補丁算法

Picodom 是一個 1kb 的虛擬 DOM 構建器和補丁算法

Flexbox Cheatsheet：單擊將 Flexbox 屬性複製到剪貼板

雖然目前不少編輯器都有代碼提示，可是這個網頁仍是頗有創意的

JavaScript 單元測試框架比較：Jasmine，Mocha，AVA，Tape 和 Jest

在開始新的前端項目時，咱們經常會考慮應該使用哪個單元測試框架，或者考慮應該爲哪些代碼添加單元測試。而本文則對於經常使用的 Web 開發中的單元測試框架 Jasmie、Mocha、AVA、Tape 以及 Jest 進行了橫向對比，而且基於本身的經驗給出了不一樣應用場景與需求下不一樣的單元測試框架選項建議

Vue 2017 現狀與展望 | 視頻+PPT+速記快速回顧

5 月 20 日，在全球首屆 VueConf 上，Vue.js 做者尤雨溪介紹了 Vue.js 2017 的現狀，並對 Vue 的將來作了展望。本文是對這次演講的回顧

back-end

Node.js V8 的重要功能和修復

隨着 Node.js 版本 8 的發佈（5月30日下午12點發布），咱們得到了最新的 LTS（長期支持）變體，具備一系列新功能和性能改進

如何使用 MongoDB 與 Node.js

這是研究推進現代網絡和移動應用程序發展的技術的一系列博客文章中的第二篇

發佈可持續集成的可維護的 NPM 模塊

您將學習如何構建，測試和發佈一個 JavaScript 模塊到 NPM，以及如何使用將自動測試和發佈新版本的持續集成進行更新。 這篇文章將專一於測試，構建和發佈模塊，而第二部分將重點關注設置更新模塊的持續集成

如何構建和部署多功能 Twitter 機器人

這個機器人從三個例子中拼湊起來，我還將詳細介紹如何使用 Zeit 如今的平臺將機器人部署到服務器上

使用 ES6 和現代語言工具來編程 MIDI 控制器

爲 Mixxx DJ 軟件建立靈活且可定製的 MIDI 控制器映射

tad: 用於查看和分析表格數據的桌面應用程序

Tad 是用於查看和分析表格數據（如CSV文件）的桌面應用程序

SQL Source Control：跟蹤 SQL Server 數據庫的每一個更改

版本控制模式和參考數據，回滾更改，並維護數據庫的引用完整性。 解決其餘數據庫挑戰，如部署而不會丟失數據

Hyperloop，讓發佈簡潔高效

Hyperloop 是服務於美團點評客戶端的組件發版、持續集成、App 打包構建、資源調度等各個環節的發佈調度系統。名稱起源於美國 Elon Musk 構想的 Hyperloop 超級高鐵，象徵着現代、簡潔、高效

pix2code：從圖形用戶界面生成代碼截圖

pix2code 依賴於深度學習技術未來自於設計師的界面圖片轉化爲 iOS 等客戶端中的代碼

Tool

Wallaby.js: 集成的 JavaScript 連續測試工具

當您更改代碼時，它會當即向其代碼編輯器報告代碼覆蓋率和其餘結果。 Wallaby.js 很是快，由於它只執行受代碼更改影響的測試，而且並行運行測試。 不管您是作 TDD / BDD 仍是使用其餘方法，該工具都能提升生產效率

Chrome devtools 擴展用於調試 Vue.js 應用程序

若是頁面使用 Vue.js 的生產/最小化構建，默認狀況下將禁用 devtools 檢查，所以Vue窗格將不會顯示。要使其經過 file：// 協議打開的頁面工做，您須要在 Chrome 的擴展管理面板中選中此擴展名的「容許訪問文件URL」

Firefox Screenshots: 一個新的 In-Beta Web 屏幕截圖工具

屏幕截圖變得簡單。 拍攝，保存和分享截圖而不用離開 Firefox

Visualization

vue-recyclinglerview：用 Vue 渲染大列表的快速方式

掌握大型列表與 vue-recyclinglerview

react-native-animatable: 爲 react native 定製的動畫庫

高仿 animate.css，可是專門爲 react native 定製， 各類動畫都定義成了組件，動畫聲明方式也都是聲明式的，參數能夠直接經過節點 props 來控制

伸縮/擠壓的 CSS 文字陰影

尋找靈感，使您的頭條脫穎而出？不要再猶豫了！ 這個免費的美麗長文字陰影集合包括字體，顏色和 CSS 代碼，以便爲您本身的網站呈現。由現代字體發生器 Mixfont 帶給您的