本期刊专注于 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.0https://github.com/systemjs/systemjs/releases/tag/6.0.0
  • react-datepicker 2.9.0https://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

内容来源

欢迎关注微信公众号:zhao-buhan,定期获得技术日志推送

赵不寒的网络日记