4.1-Frontend
前端 前端每周清单
前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号
新闻热点
国内国外，前端最新动态
-
《
Safari 10.1 发布，新增众多重要Web 特性》：近日随着iOS 10.3 与macOS Sierra 10.12.4 的版本发布，系统内置的Safari 10.1 增加了许多重要的Web 特性支持与性能提升，包括CSS Grid 布局、fetch、IndexDB 2.0、Custom Elements、Form Validation、Media Capture 等等。( https://parg.co/bC2 ) -
《
Next.js 2.0 发布》：近日Next 2.0 正式发布，它为我们提供了便捷的快速开发React 服务端渲染的工具，使得开发者能够专注于业务开发。在2.0 版本中它提供了自定义路由、自定义服务端渲染代码、组件内CSS 、Prefetching 等等多个新特性。( https://zeit.co/blog/next2 ) -
《
echarts v3.5 发布：新增日历坐标系、坐标轴指示器；同时统计扩展v1.0 发布》：在echarts 新发布的3.5 版本中，新增了日历坐标系，增强了坐标轴指示器。同时，echarts 统计扩展1.0 版本发布了。日历坐标系用于在日历中绘制图表，坐标轴指示器方便用户观察数据内容，统计扩展是一个专门用来进行数据分析的工具。( https://parg.co/bhh ) -
《
Relay 1.0.0 发布》：近日Relay 1.0.0-alpha 发布，提供了许多新的特性。作为Facebook 发布的全特性GraphQL 客户端，其能够在低配的移动设备上构建高性能、复杂可扩展的应用。( https://twitter.com/leeb/status/847635878486745088 )开发教程
步步为营，掌握基础技能
-
《使用
Vue.js 与Electron 构建桌面问卷应用》：本文介绍了如何利用Vue.js 与Electron 来构建简单的桌面问卷应用，作者首先介绍了如何使用vue-cli 创建简单的Web 项目，然后讨论了如何将项目运行在Electron 中，最后阐述了如何将应用整体打包发布。( https://parg.co/bQ3 ) -
《Progressive Web Apps：响应式
Web 设计的延伸》：本文是对于Progressive Web Apps 概念、设计理念与简单实践的介绍，作者介绍了PWA 应用应该具备的基本特性、性能与体验上的要求以及如何将现有站点转化为PWA 的简单实践。( https://julian.is/article/progressive-web-apps/ ) -
《
2017 简明React 入门指南》：本文是针对那些熟悉jQuery 与传统JavaScript 开发的前端工程师准备的现代React 开发入门指南，其包括了环境配置、create-react-app 使用、学习资料、应用编写与发布等等章节。( https://parg.co/bCx ) -
《
8 个可能你没考虑过关于CSS 的知识》：不同的技术学习曲线可能相差甚远，而CSS 的初学者则会觉得相当容易入手，但是深入之后可能发现连居中都不甚容易。本文作者是个深度CSS 热爱者，他从自己多年的经验介绍了CSS 中的垂直居中、100% 属性、float、z-index 等等多个细节知识点。( https://parg.co/bhl ) -
《React Bits》：一本关于
React 设计模式、技术与技巧的书，涵盖了常见的React 应用开发中的设计模式、需要规避的反模式、处理UX 变种、性能调试与样式处理等等。( https://github.com/vasanthk/react-bits ) -
《实例讲解
CSS 盒模型》：有经验的前端开发者都知道HTML 中的布局就是盒套盒，而本文则是以某个街区的例子深入浅出地讲解CSS 中的盒模型。( https://parg.co/bhN )
工程实践
立足实践，提示实际水平
-
《
12 个精妙的JavaScript 代码片》：本文作者分享了十二个非常不错的JavaScript 代码片，这些代码片能够帮你优化现有代码，让代码更加地赏心悦目。( https://parg.co/bhH ) -
《
Node.js 应用监控实践指南》：本文介绍生产环境下Node.js 应用监控实践指南，包括了监控的意义、监控的对象、目前开源的监控解决方案以及一些SaaS 解决方案等。( https://parg.co/bhb ) -
《使用
Faker.js 为Node.js 应用创建模拟数据》：在应用开发中我们往往会头疼于如何构建大量的随机数据，特别是那些符合某些固定模式的数据，我们可能会要用这些数据仿制RESTful 接口、进行单元测试等等。而Faker.js 则为我们提供了这样的随机数据生成器。( https://parg.co/bhU ) -
《
Vue.js 2.2 完整API 清单》：本文是Vue.js 2.2 中完整的API 介绍，可以作为手册随时查阅 。( https://parg.co/bhC ) -
《
JavaScript 中构建响应式引擎》：本系列文章介绍了如何在JavaScript 中构建高性能的响应式引擎，对于有兴趣了解MobX 底层原理的同学来说也是个不错的教程，目前包含了对于可观测对象的构造解释、属性推导与依赖追踪等内容( https://parg.co/bhR )
深度阅读
深度思考，升华开发智慧
-
《深入浅出构建简单的
Chess AI 》：本文作者介绍了如何基于JavaScript 构建一个国际象棋的AI ，虽然不属于前端开发范畴，不过还是蛮有意思的一篇文章。本文主要包括移动生成、棋盘可视化、位置评估、基于Minimax 算法的搜索树、Alpha-beta 修剪等等。( https://parg.co/bCw ) -
《构建高性能扩展与折叠动画》：本文以菜单伸缩动画为例，介绍如何构建高性能扩展与折叠动画。较简单但是性能有缺陷的方式譬如修改元素宽高或者使用
clip 变换属性；而本文主要是由CSS3 的scale 变换来实现菜单的扩展与折叠，其为了保证菜单按钮的视觉效果与整体的平滑缩放还使用了所谓的对冲缩放技巧。( https://parg.co/bCz ) -
《基于
ReactNaive 与Uber 工程基础构建UberEATS 》：本文是UberEATS 的工程师团队介绍的他们基于Uber 原工程架构与ReactNative 实现应用的工程实践；包括了构建迁移路径、应用架构定义、自动更新、测试与静态类型检测等等。( https://eng.uber.com/ubereats-react-native/ ) -
《利用机器学习优化网站性能》：本文是从浅显机器学习的角度来考虑如何优化网站性能，可能从专业服务端机器学习的角度来看并不复杂，但是从前端网站构建的角度来看也是蛮有意思的。本文包括了记录网站点击与提交信息、利用
AWS S3 进行模型训练、利用UI 进行可视化展示等等。( https://parg.co/bhQ ) -
《
Chrome 中Preload 、Prefetch 以及 优先级介绍》：本文是Google Chrome 团队的Addy Osmani 对Chrome 中的Preload 、Prefetch 以及抓取优先级的介绍，并且介绍了在网站性能优化中对于Preload 与Prefetch 的使用技巧和HTTP/2 带来的服务端推送如何协同使用等内容。( https://parg.co/bhM )
开源项目
乐于分享，共推前端发展
-
《jsinspect》：
jsinspect 提供了方便的命令行工具或者构建插件来检测代码库中的复制粘贴或者结构相似的代码片，以方便开发者在优化过程中完成代码的重构。( https://github.com/danielstjules/jsinspect ) -
《Reactide》：
Reactide 是首个面向React Web 应用开发IDE ，其基于Electron 提供了跨平台的特性。Reactide 允许我们像传统开发那样打开单个文件就可以完成预览，并且提供了便捷的组件导入、格式化等功能。该项目仍处于积极的开发中，可以拭目以待。( https://github.com/reactide/reactide ) -
《marky》：
marky 是基于performance.mark/measure 封装的高性能JavaScript 计时器，其相较于console.time()以及console.timeEnd()具有更好地性能表现，相较于简单的Date.now()具有更好地准确度。( https://github.com/nolanlawson/marky ) -
《Service Worker Mock》：在
PWA 应用的开发中对于Service Worker 的测试一直比较麻烦，每个文件都可能通过self.addEventListener产生副作用，并且Service Worker 的运行环境也迥异于正常的Web 或者Node 环境。而本包则是通过注入伪造的Service Worker 环境来方便测试。( https://parg.co/bCD ) -
《Public JSON APIs》：本仓库列举了许多
Web 开发中用到的公开的JSON 接口，包括信息检索、机器学习、工具使用等等多个方面。( https://github.com/toddmotto/public-apis ) -
《generator-ngx-app》：
Angular 4 商业级应用项目生成器，其包括了angular-cli 提供的现代工具与工作流，以及来自于社区的最佳实践、可扩展的基础模板以及较好地学习曲线。( https://github.com/angular-starter-kit/generator-ngx-app )巅峰人生
-
《
WWW 之父Tim Berners-Lee 获图灵奖》：美国计算机学会(ACM) 宣布将2016 年的图灵奖授予万维网(WWW) 的发明者Tim Berners-Lee 。他将获得由Google 赞助的一百万美元奖金。ACM 提到他的获奖理由是， “inventing the World Wide Web, the first web browser, and the fundamental protocols and algorithms allowing the web to scale.”。( https://parg.co/bhv)
前端之巅
前端之巅是
