本期刊专注于 Web 前端前沿技术，收集的内容来自于国外各大前端技术周刊，这里把自己感兴趣的，并值得分享的内容做了整理。
部分链接可能无法直接打开，你需要通过科学上网的方式来解决。
本期热文
JavaScript 是如何成长并成为一门“真正的”语言的
当 2005 年第一次看到谷歌地图，但早在 1999 年，在微软发布 IE 5 时，就有了 XMLHttpRequest 的相关文档。当开发者们看到 JavaScript 可以在浏览器中完成更好的交互时，就好像打开了潘多拉的魔盒，JavaScript 就此迎来了第二春！
https://t.co/ESSX9e8ATO
MATTHEW MACDONALD
ES6 Symbols 实用指南
ES6 引入 symbols 作为新的基本类型用来充当唯一标识符， 以下是它们的用途。
http://thecodebarbarian.com/a-practical-guide-to-symbols-in-javascript.html
VALERI KARPOV
第一次启动浏览器时会发生什么？
一系列有趣且颇具启发性的 Twitter 主题，深入研究安装/首次启动时所使用的浏览器会发生什么（包含 Chrome，Firefox，Opera 等）
https://twitter.com/jonathansampson/status/1166005813548396549
JONATHAN SAMPSON ON TWITTER
Dojo 6 发布：Web 应用的渐进式框架
Mikeal Rogers 曾经说过 React 是新的 Dojo，但 Dojo 是一个流行的“内置电池”的框架，它仍然在创新中，v6 是自去年 v2 推出以来最具野心的版本。
https://dojo.io/blog/version-6-dojo
OPEN JS FOUNDATION
使用嵌入式图像预览获得更快的图像加载速度
本文中介绍的嵌入式图像预览（EIP）技术允许我们使用渐进式 JPEG，Ajax 和 HTTP 范围请求在延迟加载期间加载预览图像，而无需传输其他数据。
https://www.smashingmagazine.com/2019/08/faster-image-loading-embedded-previews/
CHRISTOPH ERDMANN
Web 内容对电源使用的影响
优秀的网页性能并不会因您的第一次浏览速度有多快或页面有多轻薄而停止。 这篇文章介绍了一些关键点的电池电量消耗，并向您展示了可以在浏览器中使用的工具，以检查您的网站是否表现不佳并过渡消耗用户的电池续航时间。
https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/?mc_cid=240a115159&mc_eid=e1e4216411
TypeScript 3.6
https://devblogs.microsoft.com/typescript/announcing-typescript-3-6/
DANIEL ROSENWASSER (MICROSOFT)
如何用丝滑顺畅的性能来动画 box-shadow
为元素添加阴影可能是帮助它们脱颖而出的好方法， 在不影响性能的前提下探索更多的方法。
https://tobiasahlin.com/blog/how-to-animate-box-shadow/?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
具有视差悬停效果的 React Slider
Codrops 为您带来了如何使用视差效果来构建基于 React 的滑块的演示。
https://tympanus.net/codrops/2019/08/20/react-slider-with-parallax-hover-effects/?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
文章 & 教程
Chrome DevTools：使用 Web Audio Inspector 检查音频
https://umaar.com/dev-tips/203-web-audio-inspector/
UMAR HANSA
让 Yarn 和 pnpm 超越 npm
npm 的两个替代方案。
https://blog.nicco.io/2019/08/27/going-beyond-npm-meet-yarn-pnpm/
NICCOLO BORGIOLI
使用 DOM 元素的属性
https://css-tricks.com/working-with-attributes-on-dom-elements/
CHRIS COYIER
在 Chrome 中用于视频字幕的 CSS 样式正开发中
您可以在 WebVTT 文件中使用外部 CSS 文件或样式块（它已在 Safari 中发布）。
https://twitter.com/sw12/status/1164464817371058182
SAM DUTTON ON TWITTER
使用 VuePress 轻松完成文档
VuePress 是一个静态站点生成器，特别适合生成文档站点。
https://www.smashingmagazine.com/2019/08/vuepress-documentation/
BEN HONG
使用 face-api.js 创建“实时”头像
该公司在其网站上使用 face-api.js 进行面部位置跟踪的“实时头像”。
https://blog.pragli.com/live-avatars-with-faceapi-js/
DOUG SAFRENO
如何构建基于 Web 的实时多人虚拟现实游戏
利用熟悉的 Web 开发进行 VR 的开发， 在本系列的第一部分中，您将学习如何使用交互式游戏元素创建虚拟现实场景。
https://www.smashingmagazine.com/2019/08/real-time-multiplayer-virtual-reality-game-part-1/
ALVIN WAN
使用 HTML5 Web 存储来创建购物车
https://www.smashingmagazine.com/2019/08/shopping-cart-html5-web-storage/
MATT ZAND
使用“表格数字”进行更优雅的动态数字渲染
如果您的界面中包含具备更改数值的元素，例如视频时间戳或用户控制的数字滑块，可能值得考虑下是否使用支持等宽数字（a.k.a. 表格数字）的字体来改善用户体验。
https://blog.usejournal.com/proportional-vs-monospaced-numbers-when-to-use-which-one-in-order-to-avoid-wiggling-labels-e31b1c83e4d0
工具 & 资源
MVC.js
JavaScript 中一款简单 MVC 应用程序，这可能是了解 模型 / 视图 / 控制器 模式很好的起点。
https://github.com/taniarascia/mvc
Monolith
可以将网页保存到单个捆绑的 HTML 文件中。与浏览器的“另存为”功能不同，Monolith 将页面的HTML，CSS，图像和 JavaScript 资源嵌入到单个 HTML 文件中，以便于存储。
https://github.com/Y2Z/monolith
Y2Z
radialMenu
高度可定制化的 JavaScript 径向菜单，适用于桌面和移动设备。
https://github.com/victorqribeiro/radialMenu
VICTOR RIBEIRO
Trumbowyg
一款轻量级的 WYSIWYG 编辑器。该编辑器是一个 jQuery 插件，gzip 压缩后只有 8KB。
https://github.com/Alex-D/Trumbowyg
ALEXANDRE DEMODE
Karma
一个适用于 JavaScript 的多浏览器测试运行器，可以同时在多个真实浏览器中测试代码。
https://github.com/karma-runner/karma
KARMA
Compress-Or-Die
把 JPG / JPEG / PNG / GIF / WebP 的文件大小压缩到极限。
https://compress-or-die.com/?mc_cid=240a115159&mc_eid=e1e4216411
Lazy Kit
基于 Bootstrap 4 构建的一套完整的设计系统。覆盖了所有 Bootstrap 4 组件，并添加了 2 个插件、附带了三个示例页面。
https://github.com/bootstrapbay/lazy-kit
KendoReact
React UI 组件库，包含许多可自定义的 UI 和数据可视化组件，包括 Data Grid，DatePicker，TreeView 等。
https://www.telerik.com/kendo-react-ui/
Divjoy
React 代码生成器。 一个免费的基于 Web 的工具，为您的下一个项目创建完美的基础代码。
https://divjoy.com/
FullStack
用 Typescript 编写的 React / ApolloGraphQL / Node / Mongo 的 demo，可用作全栈样板。
https://github.com/TrillCyborg/fullstack
geo-info
一款简单免费的地理编码 API，用于将坐标转换为人类可读的位置和位置到坐标。
https://geo-info.co/
Honeycomb
面向现代工程和 DevOps 的下一代应用程序性能监控，可有效地观察，调试和改进生产系统。
https://www.honeycomb.io/
HTML 电子邮件模板
来自 MySigMail 的四个 HTML 电子邮件模板（两个简报，两个电子商务）。
https://github.com/mysigmail/html-email-templates
Transform
多语言网络转换器。 将 HTML，SVG，JSON，GraphQL 等转换为各种格式。
https://transform.tools/
ColorSnapper
适用于设计人员和开发人员的 macOS 颜色选择器应用程序，可以轻松收集，调整，组织和导出屏幕上任何像素的颜色。
https://colorsnapper.com/?mc_cid=240a115159&mc_eid=e1e4216411
ColorSlurp
ColorSlurp 是开发人员或设计人员的终极色彩生产助推器。 使用放大镜从屏幕上的任何位置选择颜色。 使用各种颜色选择工具创建和编辑颜色。 只需单击一下，即可以任何格式将颜色复制并导入 ColorSlurp。
http://colorslurp.com/?mc_cid=240a115159&mc_eid=e1e4216411
创意
3D 动画开关
https://codepen.io/aaroniker/full/oNvwzZO?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
H1 元素的 CSS 模式
https://codepen.io/cbird78/pen/yLBoeqP?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
金砖堆叠动画
https://codepen.io/jkantner/pen/bGbRQRy?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
版本发布
- SystemJS 6.0，https://github.com/systemjs/systemjs/releases/tag/6.0.0
- react-datepicker 2.9.0，https://github.com/Hacker0x01/react-datepicker
- VeeValidate 3.0 - Vue.js 的基于模板验证，https://www.baianat.com/labs/code/veevalidate-3-0
- Quasar 1.1 - 快速构建 Vue.js 驱动的界面，https://quasar.dev/
- jquery.terminal 2.8 - 在 Web 上创建类似终端的体验，https://github.com/jcubic/jquery.terminal
内容来源
- Frontend Focus, https://frontendfoc.us/
- JavaScript Weekly, https://javascriptweekly.com/
- Responsive Design Weekly, https://responsivedesign.is/
- Web Tools Weekly, https://webtoolsweekly.com/
- CSS Animation Weekly, https://weekly.cssanimation.rocks/
欢迎关注微信公众号：zhao-buhan，定期获得技术日志推送
