摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創(chuàng)業(yè)者技術創(chuàng)業(yè)踩過的坑給技術創(chuàng)業(yè)者建議等內(nèi)容。

前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID ： frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

Angular 5.1 發(fā)布: 本文介紹了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首個穩(wěn)定版本的特性變化。Angular 5.1.0 中包含了多個小的特性變化與錯誤修復，此次系列更新主要包括了 Angular Material & CDK 穩(wěn)定版發(fā)布、CLI 工具支持 Service Worker、對于 Universal 以及 AppShell 支持的提升、裝飾器錯誤信息優(yōu)化、支持 TypeScript 2.5 等等。

Ant Design 3.0 發(fā)布: Ant Design 是面向企業(yè)級桌面應用的設計方案與實現(xiàn)，在 2.0 版本發(fā)布的 14 個月之后，3.0 版本正式發(fā)布，包含了來自 200 多位貢獻者的超過 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系統(tǒng)，其受到天空的啟發(fā)，包含了薄暮、日出、拂曉藍等一系列優(yōu)美的色彩搭配；該版本還引入了新的組件設計，包括了對于大量組件的復寫，完全支持 React 16 與 ES Module，并且優(yōu)化了對于 TypeScript 的支持。

Font Awesome 5 發(fā)布: 本周，F(xiàn)ont Awesome 5.0.0 正式發(fā)布，為我們帶來了全新的主頁，包含了九百多個免費圖標與一千多的商業(yè)圖標。5.0 中提供了多種整合方式，最為推薦的是利用 JavaScript 與 SVG 圖標協(xié)同使用，以替代原有的字體圖標，從而提升性能與易用性。

TensorFlow Lite 支持 Core ML: TensorFlow Lite 是面向移動設備與嵌入式設備的輕量級 TensorFlow 版本，近日其宣布開始支持 Core ML，通過工具能夠?qū)?TensorFlow 模型轉(zhuǎn)化為 .mlmode 這樣的 Core ML 模型格式。Core ML 是 iOS 內(nèi)置的機器學習框架，這意味著 iOS 開發(fā)者能夠在 Core ML 上部署 TensorFlow 模塊，也是 TensorFlow Lite 在跨平臺支持上的重要一步；另一方面，Apple 也開源了自定義機器學習模型框架 Turi Create，來幫助開發(fā)者快速開發(fā)機器學習模塊并且集成到 iOS 應用中。

步步為營，掌握基礎技能

使用 Rust 開發(fā)基于 WebAssembly 的游戲: 數(shù)周前，Alex Crichton 的 PR 使得 Rust 能夠直接被編譯為 WebAssembly 格式，本文作者也嘗試將基于 Rust 與 Piston 編寫的桌面游戲 Rocket， 轉(zhuǎn)化為能夠在瀏覽器中運行的 WebAssembly 格式的應用。作者使用 JavaScript 來處理用戶的輸入輸出，并且進行界面渲染，使用 Rust 來處理游戲邏輯；作者依次介紹了自己在遷移過程中碰到的多個 Link 錯誤以及處理方案，然后討論了 Rust 與 JavaScript 如何相互調(diào)用，以進行畫面渲染與接收用戶輸入輸出等內(nèi)容。更多 WebAssembly 相關資料參考這里。

的變遷：非 GIF 的動圖實現(xiàn): 圖片是現(xiàn)代網(wǎng)頁應用中不可或缺的部分，GIFs 是動圖實現(xiàn)的選擇之一，但其質(zhì)量與性能一直差強人意；如果直接使用 video 標簽，又是無法發(fā)揮 preloaded 的作用，還必須分段請求。在 Safari Technology Preview 中，允許開發(fā)者使用 的形式來實現(xiàn)簡單的動圖需求，相較于原本的 GIF 的解決方案能帶來將近二十倍的性能提升，并且支持 CSS 方式背景播放，其體積也有大幅度的降低。更多的圖片處理與性能優(yōu)化資料參考這里。

使用 Electron 與 React 創(chuàng)建 Markdown 應用: 本文循序漸進地介紹了如何使用 Electron 與 React 構(gòu)建簡單的 MarkDown 應用，作者將其命名為 Mook。本文依次介紹了技術棧的選擇與考量，開發(fā)環(huán)境、構(gòu)建流程與模板應用搭建，主功能開發(fā)等內(nèi)容；更多 Electron 學習資料參考這里。

立足實踐，提示實際水平

Airbnb 列表頁的 React 性能問題淺析: Airbnb 已經(jīng)使用 React Router 與 Hypernova 將核心訂購流程轉(zhuǎn)化為了服務端渲染的單頁應用，本文則是介紹其如何將列表詳情頁進行單頁應用話改造，并且綜合提高其性能。本文首先討論了如何進行性能評測，這篇文章也介紹了如何使用 Chrome DevTools 來調(diào)試 React 的性能問題；然后介紹了其在初始化渲染、滾動優(yōu)化、點擊反饋、輸入輸出方面的優(yōu)化技巧。更多 React 相關教程參閱 React 與前端工程化實踐。

Node.js 的可擴展應用模式：CQRS, ES, Onion: 本文介紹如何使用 CQRS 與 Event Sourcing 模式來開發(fā) Node.js 應用，使用 Onion 架構(gòu)來組織這些模式，并且使用 TypeScript 來進行靜態(tài)類型校驗。本文首先討論了何謂靈活架構(gòu)：業(yè)務邏輯與實現(xiàn)分離、獨立于數(shù)據(jù)庫，框架，服務等等；然后介紹了 Event Sourcing 與 CQRS 的含義，以及它們是如何組織在洋蔥圈模型中的，最后以典型的認證邏輯為例討論了如何實現(xiàn) CQRS 模式。更多 Node.js 的知識可以閱讀深入淺出 Node.js 全棧架構(gòu)。

基于 Intersection Observer 與 SQIP 的漸進式圖片加載: 當我們?yōu)g覽 Facebook、Pinterest 、 Medium 等內(nèi)容類網(wǎng)站時，會發(fā)現(xiàn)圖片是漸進式加載，即首先出現(xiàn)低質(zhì)量的、模糊的圖片，然后再出現(xiàn)真正的圖片，本文即是介紹如何使用 Intersection Observer 與 SQIP 實現(xiàn)漸進式加載。之前的清單中我們有介紹過 SQIP 這種圖片替代（Image PlaceHolder ）的生成方式，其能夠生成不足 1KB 的 SVG 格式的低質(zhì)量圖片；而 Intersection Observer 則能夠判斷某個圖片元素是否在視口內(nèi)，從而實現(xiàn)按需加載。更多的圖片處理與性能優(yōu)化資料參考這里。

深度思考，升華開發(fā)智慧

Orinoco: V8 中的年輕代垃圾回收: V8 引擎中的 JavaScript 對象被分配在了堆上，并且由 V8 的垃圾回收器進行生命周期的管理；本文即是介紹 Parallel Scavenger，Orinoco 的最新特性之一，是如何針對年輕代進行垃圾回收的。本文首先介紹了分代垃圾回收模型，然后討論了單線程的 Cheney’s Semispace Copy 算法，最后討論了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的設計；更多 V8 相關資料索引參考這里。

2017 JavaScript 發(fā)展回顧: 在 2017 年 JS 狀態(tài)調(diào)查結(jié)果出爐之前，Sacha Greif 先和幾位專家聊了聊他們對于 2017 年 JavaScript 發(fā)展的看法與回顧，并整理成了這篇文章。本文從測試工具、構(gòu)建工具、狀態(tài)管理、全棧架構(gòu)等幾個不同的方面進行了討論，對 2017 年中令人印象深刻的技術進行了分享；除此之外，A recap of front-end development in 2017 也是一篇不錯的總結(jié)，更多 JavaScript 相關資料參考這里。

Web 內(nèi)容可用性提升指南: World Wide Web Consortium (W3C) 發(fā)布的 Web Content Accessibility Guidelines 2.0 是網(wǎng)頁內(nèi)容可用性的絕佳指南，能夠幫助設計者與開發(fā)者來提升網(wǎng)頁的整體可用性；本文則是對這份指南的簡要總結(jié)，以幫助那些沒有時間閱讀原指南的開發(fā)者快速了解網(wǎng)頁可用性方面的知識。本文依次討論了如何判斷用戶能否有效地接受網(wǎng)頁內(nèi)信息、如何判斷用戶能否有效地使用網(wǎng)頁中的控制按鈕與跳轉(zhuǎn)鏈接、用戶是否能夠理解網(wǎng)頁內(nèi)容、是否針對復雜的用戶環(huán)境進行了適配等內(nèi)容；更多 Web 開發(fā)相關內(nèi)容閱讀現(xiàn)代 Web 開發(fā)工程化實踐。

卡通圖解 JavaScript 引擎: 本系列文章著眼于從運行機制的角度來介紹 JavaScript，首篇文章介紹了 Callback Queue、Event Loop 等異步執(zhí)行相關的概念，本文則是從引擎的角度，以漫畫的方式來介紹 JavaScript 的編譯、解析與執(zhí)行的過程。上周的清單中我們推薦了 V8 引擎的推測優(yōu)化，本文則是提綱挈領地介紹 JIT 編譯器的原理，給讀者一個宏觀的概念展示；更多 JavaScript 引擎相關資料參考這里。

樂于分享，共推前端發(fā)展

Parcel: Parcel 是高速、零配置的 Web 應用打包工具；其面向現(xiàn)代操作系統(tǒng)設計，能夠進行多核并發(fā)編譯，并且提供了文件系統(tǒng)的緩存以優(yōu)化重構(gòu)建或者增量構(gòu)建的性能。Parcel 還提供了開箱即用的 JS, CSS, HTML, 資源文件等支持，能夠自動地使用 Babel, PostCSS,PostHTML 來進行代碼轉(zhuǎn)換，同時內(nèi)建支持 import() 動態(tài)導入與熱替換。

electron-toolkit: electron-toolkit 是輕量級的、強大的 Electron 應用的啟動輔助工具，它能夠以 NPM 腳本的方式啟動，為開發(fā)者提供一系列開發(fā)過程中需要的輔助工具。這些工具包括了圖標生成、截圖工具、安裝器、二進制文件生成、網(wǎng)站生成、實時更新等等。

Muuri: Muuri 是強大的 JavaScript 布局引擎，吸納了來自 Packery, Masonry, Isotope, 以及 Sortable 的優(yōu)秀特性，輔助開發(fā)者快速構(gòu)建響應式、可排序、可過濾、可拖拽、可動畫控制的可擴展表格系統(tǒng)。

Vuetron: Vuetron 是基于 Electron 開發(fā)的，幫助 Vue.js 項目測試以及錯誤檢測的工具，同時支持 Vuex 以及 Vue-Router。類似于 Developer Tools，Vuetron 能夠查看事件、應用狀態(tài)以及進行時間回溯的調(diào)試；同時還能夠?qū)崿F(xiàn)監(jiān)聽指定狀態(tài)變量的變化，查看 API 請求與響應，可視化查看組件結(jié)構(gòu)樹等等功能。

從黑客到創(chuàng)業(yè)，他說技術創(chuàng)業(yè)該這么做！: 本文是知道創(chuàng)宇 CTO & COO 楊冀龍在極客 Live 中分享的創(chuàng)業(yè)感悟和踩過的那些坑。楊冀龍是安全焦點民間白帽黑客組織核心成員，被《浪潮之巔》評為中國新一代黑客領軍人物之一；他在本文中依次分享了對于黑客的定義、如何從黑客成為一名安全創(chuàng)業(yè)者、技術創(chuàng)業(yè)踩過的坑、給技術創(chuàng)業(yè)者建議等內(nèi)容。

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號后回復 “ 加群 ”。投稿請發(fā)郵件到 editors@cn.infoq.com，注明 “ 前端之巔投稿 ”。