FCC 成都社區·前端週刊 第 8 期

01. 2018 前端開發者手冊

這是一份 2018 前端開發手冊，內容包括三個部分：前端工程實踐、前端開發學習和前端開發工具。

詳情：https://frontendmasters.com/books/front-end-handbook/2018/

02. Bootstrap v4.1.0 發佈

Bootstrap 發佈了最新版本 v4.1.0，該版本除了常規的 bug 修復和文檔更新外，還新增了自定義範圍表單控件、輪播工具 carousel-fade、純文本下拉菜單項 dropdown-item-text 和 box-shadow 工具等功能。

詳情：https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

03. Firefox Reality：簡單的 VR 瀏覽器

2018 年 4 月 3 日 Mozilla 推出 Firefox Reality，這是一款全新的 VR 瀏覽器，專門爲虛擬現實(VR)和加強現實(AR)而設計。該瀏覽器已在 GitHub 上開源。

詳情：https://blog.mozilla.org/blog/2018/04/03/mozilla-brings-firefox-augmented-virtual-reality/

04. Angular 6 有什麼新功能？

隨着 Angular 6 候選版本 RC5 的發佈，正式版將很快發佈。一塊兒來看看 Angular 6 中的新功能：支持 TypeScript 2.7+ ，新增渲染引擎 lvy，支持 Bazel 編譯器，將 navigationSource 和 restoredState 添加到 NavigationStart。

詳情：https://walkingtree.tech/whats-new-angular-6/

05. 瀏覽器無密碼登陸的新標準 WebAuthn

2018 年 4 月 10 日 FIDO 聯盟（FIDO Alliance）與 W3C 聯合取得了 Web 認證標準的重大進展，爲全球用戶帶來更簡單、更強大的 Web 認證方式。由 FIDO 提交的文檔 Web Authentication（WebAuthn），已經正式進入 W3C 候選推薦標準（Candidate Recommendation，簡稱CR）階段。目前 WebAuthn 標準已得到 Firefox 最新版本的支持，將來幾個月即將推出的 Chrome 和 Edge 新版本也將支持該標準。

詳情：https://www.theverge.com/2018/4/10/17215406/webauthn-support-chrome-firefox-edge-fido-password-free
中文版：https://mp.weixin.qq.com/s/enjl4i-3naF0iOdZMfrYuw

06. Site Palette：網頁調色板工具

Site Palette 是一個簡單易用的免費 chrome 瀏覽器擴展程序，可提取出網頁的基本顏色生成調色板，可做爲設計師和前端開發人員的有用工具。

詳情：http://palette.site/

07. 圖像和視頻的懶加載

如何改善初始頁面加載時間和下降每頁有效載荷？本指南介紹了懶加載相關技術，懶加載庫 lazysizes 和懶加載中須要注意的問題。

詳情：https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

08. 使用CSS filter解決SVG背景顏色問題

你可能發現使用 SVG 圖片作背景圖時會難以控制 fill color 等屬性，在這種狀況下，能夠嘗試使用 CSS filter。它提供了 10 多個屬性，包括 blur,contrast,brightness,grayscale 和 hue-rotate 等，用於直接在瀏覽器中實現相似 Photoshop 濾鏡的視覺效果。

詳情：https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

09. NodeJs 中的 HTTP/2 推送功能

HTTP/2 的主要目標是經過啓用完整的請求和響應複用來減小延遲，經過 HTTP 頭域的高效壓縮來最大限度地減小協議開銷，並增長對請求優先級和服務器推送的支持。HTTP/2 Server Push 容許服務器在收到瀏覽器的請求以前，主動向瀏覽器推送資源。文章介紹了 NodeJs 中 HTTP/2 服務端推送的更新。

詳情：https://medium.com/the-node-js-collection/node-js-can-http-2-push-b491894e1bb1

10. 從頭開始編寫本身的 Promise 庫

隨着 NodeJs 對 Async/await 的支持，咱們愈來愈少使用 Callbacks。而 Async/await 又是基於 Promise 的，所以理解這種流行的異步實現機制是頗有必要的。在這篇文章中, 做者講解了如何編寫本身的 Promise 庫，並演示如何使用 Async/await。

詳情：http://thecodebarbarian.com/write-your-own-node-js-promise-library-from-scratch.html

11. Epic Spinners：一個簡單易用的CSS旋轉動畫庫

Epic Spinners 是一個 CSS 旋轉動畫庫，能夠經過 html/css 源碼使用，或者做爲 Vue.js 組件使用。此外還有用於 Angular 的庫 angular-epic-spinners 和用於 React 的庫 react-epic-spinners。

詳情：http://epic-spinners.epicmax.co/

12. 優化 React：虛擬 DOM 詳解

這是一份全面的對初學者友好的 React 內部機制的介紹，做者爲咱們揭開 JSX 的神祕面紗，給咱們展現 React 如何作出渲染決策，如何找到性能瓶頸, 並分享了一些經驗和提示, 以免常見的錯誤。

詳情：https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

每週一同步更新到 GitHub, 歡迎 star :)