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