前端技术观察第26期

《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块：

• Highlights
  • 优秀的工具、库
  • 好的教程、深度解读已有技术的文章
  • 业界最新的技术、热点文章
  • 业界对（新）技术的深度地、优秀地实践
  • Tutorial
  • Tools And Codes

《前端技术观察》的目的是让大家：

• 更及时的了解到业界最新的技术
  • 受益于高质量的教程、文章
  • 了解业界更优秀的代码、工具
  • 更多地、氛围更浓厚地讨论、研究、落地技术

highlights

浏览器如何节流requestAnimationFrame(英)

文章探讨了什么时候并且为什么在特殊场景下rAF被节流。

https://mattperry.is/writing-code/browsers-may-throttle-requestanimationframe-to-30fps

使用HTML和CSS新特性实现响应式布局(英)

除了使用媒体查询和flexbox和grid之类的现代CSS布局创建响应网站之外，本文介绍了HTML特性和CSS的新函数minimum，clamp等来实现响应式。

https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/

JavaScript类装饰器新提议(英)

针对JavaScript类装饰器的新提议，目前处于TC39流程的第二阶段，它提供了一种通过将方法和其他”语法形式”包装额外功能来扩展自身的方法，并且增加了元数据，此提案不同于2018年向TC39提出的装饰器，Babel 7支持的装饰器以及在TypeScript中启发了`实验性'装饰器的设计器。

https://github.com/tc39/proposal-decorators/blob/simplified/README.md

Brahmos一个小巧的构建用户界面库，但没有使用虚拟DOM(英)

Brahmos是一个使用现代React API和本机模板构建用户界面的库，具有轻巧快速，使用jsx语法编写(但是源码占用空间相比jsx更小)，并且没有使用VDOM的特性。

https://github.com/brahmosjs/brahmos

EVT: 新型EventEmitter，更安全更友好(英)

EVT, 新型EventEmitter，相比于原有的EventEmitters，EVT提供了typescript的类型推断确保类型安全等等EventEmitter不具备的特点，并且已经适用于所有的js运行环境。

https://github.com/garronej/evt

Inspect: 移动Web DevTools的“新标准”(英)

适用于macOS和Windows的开发人员工具，可检查和调试iOS设备上的Web应用程序和网站。支持在设备上通过USB或WiFi调试Safari, WebViews(和Chrome)，也可以在windows上调试ios web，同时支持多种框架的devtools等多个特点。

https://inspect.dev/

Mongoose 5.10新增乐观并发控制(乐观锁)(英)

Optimistic concurrency核心思想是追踪文档的版本并在每次保存后增加版本，当在加载文档和保存文档之间，此时数据库的版本发生变化，则会提前报错。Optimistic concurrency可以有效的保证依赖于多个属性的逻辑验证，确保其具有一致的数据视图。

http://thecodebarbarian.com/whats-new-in-mongoose-5-10-optimistic-concurrency.html

prefers-reduced-motion-media特性可以帮助缓解运动敏感人群的不适(英)

屏幕上的某些运动可能会对运动敏感的人产生影响，如眩晕，恶心等。通过设置prefers-reduced-motion-media特性可以给这些人更友好的体验。

https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/

App审核流程更新(英)

更新内容:对于App Store中已存在的应用程序，错误修复将不再因违反准则而延迟，但与法律问题相关的错误修复除外。相反，可以在下一次提交时解决违反准则的情况。

https://developer.apple.com/news/?id=84w3e5bm

tutorial

Visual Studio Code 扩展开发指南(英)

使用 TypeScript 开发 Visual Studio Code 扩展

https://javascriptweekly.com/link/95088/web

将表单数据保存到 Google Sheet(英)

用 express 和 Google Sheets API 将数据从 HTML 表单 保存到 Google Sheet

https://javascriptweekly.com/link/95084/web

TypeScript 4.0 发布(英)

TypeScript 语法变化以及编辑器支持

https://javascriptweekly.com/link/94736/web

Designing a JavaScript Plugin System(英)

使用设计模式更好的设计代码结构

https://javascriptweekly.com/link/94726/web

tools And codes

Print.js：小型的打印PDF插件(英)

Print.js的主要目的是帮助我们直接在我们的应用程序中打印PDF文件，而无需离开界面，也不使用嵌入

https://javascriptweekly.com/link/94746/web

Stencil：用于构建 Web Components 和 PWA

2.0版本发布，几乎没有重大更改

https://github.com/ionic-team/stencil

vanilla-colorful.js：一个小型的拾色器

小型、快速、支持 TS、支持移动端

https://github.com/web-padawan/vanilla-colorful

Cropper.js：JavaScript 图像裁剪器

一直维护了五年的JavaScript库，提供了 ES module 导出

https://fengyuanchen.github.io/cropperjs/