前端之巅的朋友们新年好！本期清单本应该是上周的，因为过节，延迟一周发布。
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。
国内国外，前端最新动态
Chrome 即将标识所有的 HTTP 站点为非安全
: 近日，Google Chrome 宣布，他们将会在 2018 年七月左右发布的 Chrome 68 版本中，开始把所有的 HTTP 站点标识为非安全；此举也可能标志着非 HTTPS 站点的终结。开发者可以使用最新版本的 Lighthouse Node.js 命令行工具来检测某个网站中是否存在了基于 HTTP 协议加载的资源，并且能够自动地判断是否已经有了相对应的 HTTPS 版本。
Rollup 开始支持代码分割
: 在近日发布的 0.55 版本中，JavaScript 模块打包工具 Rollup 终于引入了代码分割，这个千呼万唤始出来的特性。一直以来，Rollup 都是 React, Vue, D3, Moment, Three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier 这样的工具库的首选，而该特性的加入也意味着其逐步成为了应用打包工具的候选之一。
Microsoft Edge 与 Windows 10 进一步拥抱 PWA: Edge 17 即将内置 Service Workers 与 Push Notifications，同时 Microsoft Store 将会把那些手动提交的 PWA 应用于原生应用同等对待。本文即是 Microsoft Edge 技术团队对于 PWA 的介绍，对于它能够解决的问题的畅想以及未来如何在 Windows 10 中保证 PWA 的表现。
步步为营，掌握基础技能
React 16.3 新特性介绍
: React 16.3-alpha 近日登陆 npmjs，并且能够引入到项目中，本文即是对于 16.3 版本中的新特性进行介绍。该版本引入了新的 Context API，允许开发者使用 React.createContext() 生成两个关联组件；重构了生命周期回调，废除了 componentWillMount, componentWillUpdate, componentWillReceiveProps，引入了 getDerivedStateFromProps；提供了 StrictMode，以保证代码符合最佳实践；更新了 React Developer Tools 等。更多相关资料参考 React Reference。
Service workers 介绍与使用
: Service workers 可以看做 Progressive Web Apps 的核心组成，提供了资源缓存与通知推送的功能，这也是 Web 应用与原生应用当前的区别之一。 本文会包含 Service Worker 的基本概念与使用，具体讨论了后台处理、离线支持、资源预抓取、网络请求缓存、安装与基础使用等内容。更多相关资料参考 PWA Reference。
React’s new Context API
: 本文将会详细介绍 React 16.3 版本中提供的新 Context API，它主要包含了三个部分：React.createContext 允许输入初始值，并且返回包含 Provider 与 Consumer 的对象。Provider 组件被放置在组件树中的较高层，允许传入名为 value 的属性，而 Consumer 属性则可以放置在组件树的任意位置，通过传入渲染回调函数的方式来接收 value 参数。更多相关内容参阅 React 与前端工程化实践系列。
立足实践，提示实际水平
GraphQL 应用中的五个常见问题与规避方案
: 本文中，我们将会讨论如何尽可能地发挥 GraphQL 的长处而绕过其中的坑。作者在本文中讨论了以下内容：Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose 等。对于每个问题，作者首先进行了描述，然后介绍了在 Vulcan 的开发过程中是如何定位，并且解决的。更多相关内容参考 GraphQL Reference。
Redux 模块与代码分割
: Twitter Lite 一直在使用 Redux 作为其状态管理框架，并且在不断地寻找合适的模块与代码风格方案。虽然 Redux 默认的接口风格并非面向那种持续加载的情形，本文即是介绍了 Twitter Lite 如何通过合理的代码风格来支持渐进式代码加载，该模式已经在生产环境下经受了数年的检验。更多相关内容参考 Web 开发基础与工程实践系列。
Addy Osmani: 使用 Webpack 进行 Web 性能优化
: 现代 Web 应用常常会使用所谓的构建工具来创建部署到生产环境的包体，该包体往往是被优化的、压缩的，尽可能减少用户的消耗。本文则是 Addy Osmani 编写的，基于 Webpack 的 Web 性能优化教程，讨论了如何利用代码分割等特性来移除不用的代码片，并且尽可能压缩包体，来保证最小的网络消耗与处理时间。更多相关内容参考 Web 开发基础与工程实践 / 性能优化系列。
深度思考，升华开发智慧
React 模式演化
: 本文将会深度探讨 React 生态圈中流行的架构模式，这些架构模式能够提升代码的可读性，清晰性，并且保障代码的可组合性与可重用性。本文将会依次介绍 Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, 等等模式。更多相关内容参阅 React 与前端工程化实践系列。
前端面试手册
: 不同于传统的软件工程师的技术面试，前端工程师的面试可能较少地关注算法，更多地瞩目于交互相关以及 HTML，CSS，JavaScript 这些领域相关的知识。本文作者在遍寻了现存的面试手册之后，未发现有完全满意的，前端相关的面试手册；因此编写了此文，以共享自己在前端工作中的知识积淀，本文也可以看做对于著名的 Front-end Job Interview Questions 的回答。更多相关内容参考 Awesome Web Reference。
如何训练能够将设计稿转化为 HTML 与 CSS 的 AI 程序
: 随着人工智能与深度学习技术的发展，我们也可以预见它们将逐步地改变前端开发中的一些领域。AI 能够帮助我们提升原型构建的速度，降低软件构建的门槛。这两年来，随着 Tony Beltramelli 的 pix2code paper 以及 Airbnb 开源 sketch2code，我们可以逐步地使用 AI 来帮助我们构建简单的页面。不过，目前前端开发自动化方面最大的瓶颈可能就是计算能力，但是这并不妨碍我们来学习了解相关的深度学习基础算法，以及如何训练数据，如何使用模型来进行界面转换。本文中，作者会循序渐进地带领读者来构建基础的，能够将某个设计稿转化为 HTML 与 CSS 代码的神经网络。更多相关内容参阅 Awesome Web Reference。
有货移动 Web 端性能优化探索实践
: 在移动互联网的时代里，对于一个 Web 站点来说，移动端的用户体验尤为重要。现代 web 站点的设计和开发都是以移动优先作为第一原则，我们也专门为了移动端的 Web 站点做了相应的优化和提升。这个过程中任何一个环节的延迟都会造成性能瓶颈，降低用户继续访问的可能性，所以我们在服务器端，浏览器端，网络加载，多个方面做了一系列的优化工作。
乐于分享，共推前端发展
