前端技术周刊 2018-03-30

前端技术周刊 2018-03-30

你们好，广受你们喜好的前端快爆主编 @过气网红一丝 在昨天某女神问题中躺枪被 @草依山 爆出惊天大料以后，今已无颜面对粉丝，因此本期的小编由打杂实习生暂代。格调不够，图片来凑。

前端快爆

• D3.js 发布其第五个大版本更新。异步文件加载接口调整为了Promise，支持了地图生成轮廓算法和密度等高线图，调整了色彩系统的实现。?

• Chrome Canary 67.0.3378.0+ 版本支持 Windows触摸板支持了。?
• 本周末的 AmsterdamJS 大会值得期待，好比字面意义上执行 console.log(brain) ?

• Node.js 2018 年 3 月的安全发布，修复了以前公告中宣布的问题。?
• Chrome 66 开始正式部分支持 CSS Typed Object Model（Typed OM），该规范是 Houdini 工做的一部分，能够看作是 CSSOM 的升级版，新规范带来了更好的可编程性和性能提高。?
• LG 发布了 webOS 开源版本，现已向公众开放。?

• 调试一个未知（他人） bug 的时候，咱们老是很抓狂：这个变量到底在哪儿被改为这样了！break-on-access 利用Object.defineProperty 解决了这个问题。

• 几个你不可不知的超级酷炫的 Chrome DevTools 使用技巧：在发送 ajax 请求时触发断点、在控制台输入多行命令、给指定元素截图…… ?

优秀 Demo

• 灯泡开关

• 太阳系探索

专题

可自动化的页面重构

页面重构是前端最开始做为一个职位的主要工做，然而相关过程老是显得那么原始，那么刀耕火种。在这个自动化工具已经规模化的时代，不止一个团队尝试过了自动化生成页面和动画的方案，在本次专题中，咱们整理了相关的文章。

交互稿到代码

• 动画：从 AE 到 Web

主要介绍了如何手工把 AE 稿件实现成一个简单的 CSS 动画：提取动画参数，生成运动贝塞尔曲线，造成补间动画。

• 最全最好用的动效落地方法、都帮你总结好了 - 前端篇

变化、时长和曲线是动画的三个基本元素。Lottie、Keyframe 类开源库，能够将 AE 导出的动画资源直接在项目中应用，经过 gka 一类工具，能让咱们更轻松地制做关键帧动画

• 设计稿自动生成可用页面的展望

从 Sketch 直接生成简单的原型代码，到 React-Sketch 从代码到设计的反向思考，再到自建可视化页面搭建平台的历程，对于设计稿到页面的全面探索与思考。

• 用深度学习自动生成HTML代码

期盼这一天正式到来，又怕来得太快。

基础自动化

• 关于雪碧图预处理和后处理方案的讨论
• PostCSS Deep Dive

---

编辑：@池冰 & 审阅：@humphry
题图：https://www.letsnurture.com/services/web/conversion/psd-to-wordpress.html