前端技术周刊 2018-10-08
大家好，有半个月没见了。最近编辑部忙到爆炸，出刊节奏被打乱，预计在今年双十一之后恢复正常出刊速度。
前端快爆
10 月 5 日，Google 发布 Project Stream，一个目标是在浏览器端可流畅运行 3A 级游戏的项目。技术核心在于将游戏的渲染与计算放到云端，而浏览器则负责声画输出和用户输入，此技术能够完美运行需要用户拥有 25M/s 的带宽，首发测试游戏为刺客信条·奥德赛。????
点评：“如何区分一个游戏开发和其他开发？让他们描述 render 和 display 的区别。”这老哏在这个时代，突然有了新的含义
Mozilla 推出 Firefox Reality，一款开源的 VR 浏览器，可以快捷的在首屏幕发现新 VR 体验和新 VR 游戏。????
点评：以网页浏览器的形式切入，Mozilla 开始布局 VR 应用入口。
CSS Font 3 已经进入推荐阶段，它包含 @font-face 的详尽定义和 CSS 中对 OpenType 特性的控制。????
10 月 4 日，Node.js 基金会和 JS 基金会宣布他们正考虑合并。????
点评：Node.js 更加深入 JS 的发展进程，你中有我，我中有你
在 Chrome 69 中，提供了实验性的 Cookie 异步获取接口，除了避免获取 Cookie 卡顿页面以外，我们还可以方便的通过事件机制监听机制来监听 Cookie 变更，并且新接口可以在 ServiceWorker 中调用。????
瑞士军刀
Wax 是一个尝试将 Web Audio 元素用 JSX 方式表示和操控的库。
renderAudioGraph(
<AudioGraph>
<Oscillator type=”square” endTime={3}
frequency={[setValueAtTime(200, 0), exponentialRampToValueAtTime(800, 3),]}
/>
<Gain gain={0.2} />
<StereoPanner pan={-1} />
<Destination />
</AudioGraph>
);
点评：脑洞也是大
Tailwindcss 是一个辅助快速 UI 开发的原子化的 CSS 框架。
<div class=”bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden”>
<div class=”sm:flex sm:items-center px-6 py-4″>
<img class=”block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0″ src=”https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4″ alt=””>
<div class=”text-center sm:text-left sm:flex-grow”></div>
</div>
</div>
点评：更加现代，更加好使
paper 是一个适用于 react native 的 Material Design 的 UI 库。
t-writer 是一个打字动效库。
更好的 git 钩子封装 husky 已发布其 1.0 版本，新支持了 sendemail-validate 的钩子、允许 .huskyrc 配置等，更多细节请见 Changelog。
create-react-app 2.0 版本发布，此版本升级了依赖版本到 Babel 7、webpack 4 和 Jest 23，新支持了 PostCSS、CSS Modules 和 SASS。????
点评：不用接触 webpack 但用到它的感觉真棒
专题：WebGL
本期由昀兮提供的 WebGL 专题。在简陋的封装之上，我们能够做多少事情呢？一起来看看吧！
WebGL Demo
20 amazing examples of WebGL in action
Pixi gallery
优秀互动案例网站 FWA：新技术在商业上的优秀应用案例集锦
WebGL 技术基础概念
WebGL 技术储备指南
WebGL 官方文档
WebGL 开发第一道坎：矩阵与坐标变换
OpenGL 中的 pipeline 机制
Shader 着色器编程
Pixi：基于 WebGL 的 2D 渲染引擎
Pixi 官网 & Github 项目地址 & Demo 地址
Learning Pixi：初级学习资料
骨骼 / 补间动画插件：
Spine: Pixi-Spine 用于渲染 Spine 工具生产的动画文件
DragonBones: DragonBonesJS For Pixi 用于渲染 DragonBones 工具生产的动画文件
Adobe Flash Animate CC: Pixi-Animate 用于渲染 Flash 工具生产的动画文件
其他插件
Pixi 粒子系统
Pixi 滤镜
Pixi-gl-core: Pixi 的 WebGL 渲染核心代码，一个简洁的 WebGL 封装
编辑：承虎 (humphry) & 审阅：壹丝联动专题：Three.js / AR