奇舞周刊第269期（2018-08-03）

• 奇舞周刊

• 五个最新的 CSS 特性以及如何使用它们

  @Daniel Crisp在他的博文中，探讨了CSS的五个新特性，介绍了这五个特性能做什么，以及如何将它们应用到你的项目中。

  奇舞周刊 CSS

• Icon 和文本对齐方式的探索

  这篇文章主要深纠了一下 Icon 图标和文本对齐的一些原理，通过这些原理找出相应的解决方案。文章提供了两种解决思路，一种是大家时常用的近似对齐方式，另一种是精确的对齐方式解决方案。

  奇舞周刊 CSS SVG 移动 Web

• 图解基于 HTTPS 的 DNS

  此文鼓励用户在 Firefox 中开启基于 HTTPS 的 DNS，并将其作为默认设置。 无论用户是否了解 DNS 泄漏，每个用户都应该享有这种隐私和安全。

  奇舞周刊 DNS HTTP 安全 隐私

• JavaScript

• 深入解析 ES Module

  ESM 和 CJS 之间那些说不清的事……

  ES6 JavaScript

• wasm + ffmpeg 实现前端截取视频帧功能

  有没有那么一种可能，在前端页面处理音视频？例如用户选择一个视频，然后支持他设置视频的任意一帧作为封面，就不用把整一个视频上传到后端处理了。经过作者一番摸索，基本实现了这个功能。

  wasm ffmpeg JavaScript

• 狙杀页面卡顿 —— Performance 工具指北

  “本次关于性能 工具 的讨论，我们从影响页面性能的因素谈起，随之引出了 Performance 工具擅长的维度 —— 前端资源渲染。接着，我们了解了 Performance 工具 4 个主要面板：控制、预览、线程、详情，还有几个实用的图表：帧率条形图、CPU 面积图、主线程火焰图、帧线程时序图、事件耗时饼状图。然后运用它们定位了一个性能问题，并着手解决了该问题。”

  Performance DevTools JavaScript

• 其它

• TypeScript 3.0 重磅发布，新特性详解！

  3.0 虽然是个大版本，但并没有包含太多重大的突破性变更（也就是说升级很容易）。新版本引入了一种新的灵活且可扩展的方式来构建项目、对操作参数列表提供了更强大的支持、新的强制显式检查类型、更好的 JSX 支持、更好的错误 UX，等等。

  TypeScript

• Xcube 智能一键生成 H5

  Xcube 是基于 QQ 空间营收类活动所搭建的H5活动页面智能生成系统，是针对框架相对固定，高频率的运营 H5 活动所设计。

  设计

• Webpack 4 和单页应用入门

  很详细的 Webpack 4 入门文章。Webpack 配置工程师们看过来。

  Webpack 前端工程

• 写好 shell 脚本的 13 个技巧

  这篇文章将介绍如何写出具有良好开发者体验的 shell 脚本。

  SHELL

• <img> 标签动态图片的进化：不是 GIF，胜过 GIF

  长期存在并广泛应用的 GIF 格式存在图像质量损失严重和体积庞大等不足。在最新的 Safari 浏览器预览版中，可以在标签播放视频，满足了和动态图一样的需求。经过对比测试，标签下视频的各项性能均优于 GIF 格式。本文为你详解这项技术的现状和未来前景。

  HTML5 Video GIF

如果你觉得奇舞周刊不错的话，长按二维码“ 关注我们的公众号 ”。如果你觉得本期文章不错的话，欢迎点击右上角“ 分享到朋友圈 ”。