前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
再見，Firebug: Firebug 是曾經最為流行與強大的 Web 開發除錯工具，無數的 Web 開發者都曾經使用過 Firebug。在 2005 年 Firebug 面世之初，它是首個能夠允許開發者審查、編輯以及直接在 Firefox 瀏覽器中直接除錯程式碼的工具；一年之後 Firebug 宣佈開源，也吸引了更多的開發者協同維護這個工具。直到 2016 年，Firefox 宣佈將會統一 Firebug 與 Firefox 的內建除錯工具；近日釋出的新版的 Firefox 的內建開發工具也是基於 React/Redux/Webpack 等流行的 Web 開發技術棧，為開發者們提供了更多酷炫的功能。
Apollo Client 2.0 釋出: Apollo Client 是靈活易用的、完全由社群驅動的，能夠與 React、Vue.js、Angular 等常見的 JavaScript 框架無縫整合的 GraphQL 客戶端。目前 KLM、IBM、Intuit 等公司都已經在他們的專案中使用了 Apollo Client。 2.0 版本也是更來了一系列的功能更新與特性增強。在新版本中，我們可以使用 Apollo Link 來作為網路層以優化資料互動的效能，通過 apollo-link-state 與 apollo-link-rest 則能夠平滑地相容原有的內部狀態與 REST 介面；更詳細的版本說明請參考原文。
React Studio 1.2 釋出：React Studio 是基於 React 的視覺化 Web 開發工具，近日其釋出了 1.2 版本；該版本中主要包含以下特性更新：內建整合了 Git 版本管理工具、整合了外掛編輯器、新增了 Create Plugin 等命令、允許基於 Canvas 的 3D 預覽。此外，專案的結構圖功能也得到了增強，能夠幫助開發者自動優化顯示的元件樹結構，並且優化了 Plugin Store 中外掛的提交與安裝方式。
開發教程
步步為營，掌握基礎技能
Graphcool Framework 介紹: 近日 Graphcool 宣佈開源包括 GraphQL 資料庫、許可權認證系統、實時訂閱、Cloud Native 執行時等在內的完整的 Graphcool 開發框架；本文即是介紹如何利用 Graphcool Framework 快速構建與部署生產環境下的 GraphQL 服務端。GraphQL 資料庫允許使用者通過 GraphQL CRUD 介面來對資料進行增刪改查與流式獲取,Permission 系統則提供了基於角色的許可權校驗功能，Subscription API 則提供了實時的資料推送功能。更多 GraphQL 相關資料參考這裡。
基於 JavaScript 的瀏覽器自動化與網頁抓取: 本文的核心內容是介紹如何使用 Headless Chrome、Puppeteer 以及 Node.js 進行網頁抓取，我們在過去的清單中也多次推薦過 Puppeteer 相關的內容。本文首先介紹了 Puppeteer 中基礎的截圖介面的呼叫與程式碼執行，然後循序漸進地介紹瞭如何針對性地抓取資料，最後討論瞭如何使用對外發布的服務；更多瀏覽器自動化詳細教程參考這裡。
使用 WebStorm 高效率開發 Angular 的建議: 本系列文章是由 Google 技術專家 Jurgen 以及 Motto 分享的，使用 WebStorm 開發 Angular 應用過程中，如何提高開發效率的實踐思考。本文首先介紹了協同使用 WebStorm 與 Angular CLI，然後討論瞭如何在 WebStorm 中快速切換與定位元件，接下來討論瞭如何利用 Angular Language Service 以及如何自動化補全程式碼，最後介紹瞭如何優化 Imports。更多 Angular 相關資料參考這裡。
使用 TypeScript 編寫 React 與 Redux 應用: 隨著應用複雜度與工程中程式碼數目的增加，我們不可避免地需要引入靜態檢測工具以提高程式碼質量，本文即是介紹如何在 React 與 Redux 開發中使用 TypeScript。本文依次介紹了在類元件、函式式元件、Redux 的 Action 與 Action Creator、Reducer、Store 中使用型別校驗；更多 React 教程參考這裡。
HTML 文件中 head 內標籤詳解: 本倉庫是對於 HTML 文件中 head 相關的屬性進行詳細介紹，包括 head 中可使用的標籤列舉、元標籤、Link、圖示、社交分享、瀏覽器與平臺增強等；更多 HTML 頭標籤教程檢視這裡。
工程實踐
立足實踐，提示實際水平
為什麼 Decisiv 選擇使用 Styled Components: 本文是來自 Decisiv 的工程師分享的他們對於 CSS-in-JS 的看法，以及為何在眾多的 CSS-in-JS 框架中選擇 Styled Components 的原因。作者首先闡述了自己的看法，CSS-in-JS 並非適用於所有的團隊或者所有的場景，然後作者討論了 React 中常見的樣式管理模式以及 CSS-in-JS 的基本概念。接下來作者根據 Decisiv 的業務特殊性以及自身的架構設計分析了為何需要使用 CSS-in-JS，並且討論了 Styled Components 相較於其他框架的優勢：龐大而快速發展的社群、模板字串以及對於 Sass 的支援、原生的移動端支援等。更多 CSS-in-JS 教程檢視這裡。
小米直達服務介紹與開發實戰: 本文為 10 月 24 日前端之巔社群群分享整理而成，分享人小米 MIUI 系統框架負責人董紅光，主要會圍繞專案的背景和理念、平臺的技術架構、以及一個簡單的開發示例，來介紹小米的直達服務。本文首先介紹了直達服務平臺的背景理念，即能夠結合移動端網頁和應用的優點，既不需要下載安裝，功能服務又完整，還能達到原生般的流暢，服務間還能無縫打通和互相索引。直達服務平臺上的各個服務採用前端技術棧開發，但是並不跑在瀏覽器或 WebView 中，它捨棄了瀏覽器核心渲染，轉而採用 Android 的原生渲染機制，也就是說，實際上是使用前端技術棧開發了一個原生應用，無論是渲染效率，還是系統能力的 API 豐富程度，都遠遠超出傳統網頁。
前端清單: 作者根據自身多年的前端開發經驗與其他的開源清單，總結出了此份將站點或者網頁釋出到生產環境之前的自檢清單。本文依次介紹了必備的視口、語言等頭部標籤，HTML 的最佳實踐與測試，Webfonts 的使用，CSS 中響應式設計、前處理器、唯一 ID、Reset CSS 等內容，圖片的優化，JavaScript 的連線、壓縮、測試等，網路安全、效能、可用性的提升，SEO 等內容。更多 Web 實踐教程參考這裡。
深度閱讀
深度思考，昇華開發智慧
深入瞭解 Bootstrap 4: 本文涵蓋了如何使用 Bootstrap 4 構建響應式網站的關鍵技巧，特別是在瀏覽器逐步全面支援 Flexbox 與 Grid 的情況下，應該如何解決常見的響應式 Web 設計難題。本文首先對於 Bootstrap 4 的特性進行介紹，包括預設的 CSS Resets 等關鍵變化；接下來本文討論了 Bootstrap 的工作原理以及它能夠在 Web 專案中起到的作用與如何引入到專案中，最後作者以上萬字的篇幅詳細介紹瞭如何使用 Bootstrap 4 來構建常用的佈局與元件。更多 Web 佈局相關內容參考這裡。
2017 Vue.js 現狀報告: 本文作者將 2017 年中重要的 Vue.js 相關的資訊與商業使用案例濃縮在了一份 80 頁的報告中。該報告主要包含了以下內容：Vue.js 的建立者 Evan You 對於 Vue.js 的未來有何規劃，Adobe、Behance、Codeship 以及 Gitlab 這些公司是如何使用 Vue.js 的，為什麼大部分軟體開發者會願意在下一個專案中使用 Vue.js，Vue.js 的主要學習資源包含哪些，Vue.js 這些年經歷了怎樣的變化；更多 Vue.js 相關資料參考這裡。
JavaScript 與 ECMAScript: 作者在本文中闡述了其對於 JavaScript 與 ECMAScript 之間的異同點的認知，同時也討論了 ECMAScript 與瀏覽器、Babel 等概念之間的關聯。Ecma International 是負責建立技術標準的組織，ECMA-262 是由 Ecma International 釋出的描述通用指令碼語言的標準，而所謂的指令碼語言即是指在某個現存系統或者實體上執行的語言。ECMAScript 並不是一種語言，而是一種規範（Specification），即 ECMA-262 中定義的規範；JavaScript 則是遵循 ECMAScript 規範的具體的指令碼語言的實現，根據 ECMAScript 規範我們能建立新的指令碼語言，而學習 JavaScript 則能夠使我們瞭解如何去使用它。更多 JavaScript 教程參考這裡。
開源專案
樂於分享，共推前端發展
React-Virgin: React-Virgin 是由 Trixie 公司開源的針對 React Native 專案的 UI 模板與工具庫，其致力於幫助開發者快速開發美觀的應用。React-Virgin 目前包含了基於 react-navigation 的模板，以及基礎元件、水平列表、垂直列表、按鈕、頭、網格、氣泡、載入器等元件。
HEML：HEML 是開源的用於構建響應式郵件的標記語言，可以將其看做郵件模板的開發利器；開發者使用正常的 HTML 寫好郵件，HEML 則會處理所有郵件客戶端的相容性。HEML 官方宣稱的特性包括 Native Feel，即使用 HTML、CSS 這樣熟悉的語言進行開發；Forward Thinking，即能夠為所有的客戶端提供一致的體驗；Extendable，即提供了豐富的介面以建立自定義的元素與樣式規則。
SQIP: SQIP 是基於 SVG 的 LQIO 方案，其能夠用於生成可用的 SVG 格式的圖片替代（Image PlaceHolder）；所謂的 Image PlaceHolder 即指那些能夠從圖片中捕獲圖片的主要色彩，並且在圖片載入完成之前先佔用相同尺寸的資源。而於 2012 年提出的 LQIP 則是主流的 Image PlaceHolder 解決方案，Facebook、Pinterest、Medium 等公司皆有其相應的開源庫；SQIP 希望能夠在替代圖的質量與檔案大小之間達成較好地平衡。
Webpack Monitor : Webpack Monitor 是一個高可配置的 Webpack 外掛，其能夠捕獲構建生成的，生產環境中包體關鍵統計指標；並且 Webpack Monitor 提供了互動式地分析工具，來幫助開發者更好地審視包體的構成，以此來識別與選擇可用的優化策略。
巔峰人生
- 網安專家養成記：勤動手，多交流，善思考: 作為一名從事資訊保安工作 10 年之久的沙場老將，谷野從傳統安全公司安全服務開始，歷經大型傳統企業、網際網路公司安全管理實踐。一路走來，谷野在安全方面的探索，對業界從業者可能都有更好的借鑑作用。作者在本文中依次討論了以管窺豹，網際網路行業的安全如何做、如何從專業的角度審視和規劃安全產品選型等內容。
前端之巔
「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到 editors@cn.infoq.com，註明“前端之巔投稿”。