前端技术周刊 2018-03-30

2

前端技术周刊 2018-03-30

image.png | center | 1574x536

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

前端快爆

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

image.png | center | 683x225

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

image.png | center | 641x262

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

image.png | center | 832x467

  • 调试一个未知(他人) bug 的时候,我们总是很抓狂:这个变量到底在哪儿被改成这样了!break-on-access 利用Object.defineProperty 解决了这个问题。

image.png | center | 637x240

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

0_CjWhHTmoZbCeMXSw.gif | center | 648x421

优秀 Demo

QQ20180330-154407-HD.gif | center | 289x173

image.png | center | 691x292

专题

可自动化的页面重构

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

交互稿到代码

主要介绍了如何手工把 AE 稿件实现成一个简单的 CSS 动画:提取动画参数,生成运动贝塞尔曲线,形成补间动画。
变化、时长和曲线是动画的三个基本元素。Lottie、Keyframe 类开源库,可以将 AE 导出的动画资源直接在项目中应用,通过 gka 一类工具,能让我们更轻松地制作关键帧动画
从 Sketch 直接生成简单的原型代码,到 React-Sketch 从代码到设计的反向思考,再到自建可视化页面搭建平台的历程,对于设计稿到页面的全面探索与思考。
期盼这一天正式到来,又怕来得太快。

基础自动化


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

你可能感兴趣的

载入中...