前端技术观察第22期

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

• Highlights

  • 优秀的工具、库

  • 好的教程、深度解读已有技术的文章

  • 业界最新的技术、热点文章

  • 业界对（新）技术的深度地、优秀地实践

  • Tutorial

  • Tools And Codes

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

• 更及时的了解到业界最新的技术

  • 受益于高质量的教程、文章

  • 了解业界更优秀的代码、工具

  • 更多地、氛围更浓厚地讨论、研究、落地技术

highlights

Fastify 3.0 发布：一种 “低开销” 的 Node Web 框架（英）

Fastify 3.0: A Fast 'Low-Overhead' Web Framework for Node

Fastify 已经存在了很长一段时间，可能值得一看。刚刚发布的 v3.0.0 包括各种重大更改和新功能，以及更好的 TypeScript 支持。

https://medium.com/@fastifyjs/fastify-v3-released-da4601d79a5

如何保护移动应用程序安全 – 移动应用程序安全 Checklist（英）

How to Secure Mobile Apps – A Mobile App Security Checklist

需要牢记的一些注意事项

A few things to keep in mind.

Android 上的 Microsoft Edge 很快就会让您可以尝试新的 Chrome 特性（英）

Microsoft Edge On Android Will Soon Let You Try New Chrome Features

您将可以通过新提供的 edge://flags page 页面在浏览器中启用实验性功能。

https://techdows.com/2020/07/microsoft-edge-android-flags-page.html

Flutter 与 Native 与 React Native：深度性能比较（英）

Flutter vs Native vs React Native: Deep Performance Comparison

流行移动开发工具的对比，关注指标有 FPS，CPU，内存和 GPU 性能。

https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433

如何更好地在 JavaScript 中表达日期和时间（英）

Dates and Times in JavaScript

Temporal API 是用来更灵活地处理日期、时间戳等时间相关表达的解决方案，目前还在 proposal 草案阶段，欢迎提议和反馈

https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/

开发 Web 暗黑模式的全方位指导（英）

A Complete Guide to Dark Mode on the Web

文章详细介绍了暗黑模式下需要考虑的设计细节和开发方案，非常全面，值得收藏

https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

使用 Array.flat() 平展数组（英）

Flatten Array using Array.flat() in JavaScript

ES2019 引进了平展数组的新方式：Array.flat()，并且可以利用 depth 参数灵活控制数组层级的展平

https://www.samanthaming.com/tidbits/71-how-to-flatten-array-using-array-flat/

tutorial

使用 Express 和 Netlify 在 Node.js 中构建 Serverless GraphQL API（英）

Building Serverless GraphQL API in Node.js with Express and Netlify

一个非常易于访问的教程，适合喜欢保持事物易于维护的任何人。

https://css-tricks.com/building-serverless-graphql-api-in-node-with-express-and-netlify/

PWA 使用大全（英）

A Showcase of What Is Possible with PWAs

通过示例展示您今天可以使用 Progressive Web Apps 做什么。一种在一个地方以交互方式展示PWA强大功能的巧妙方法。

https://whatpwacando.today/

如何使用 Dart 中的 Mixins（英）

Mixins in Dart: How to Use It

如何使用简单的类 Mixins 来避免 Dart 中的多个类层次结构，以创建更简洁的 Flutter 应用程序。

https://medium.com/flutterdevs/mixins-in-dart-how-to-use-it-90d078e722d3

tools And codes

Google HighwayHash 的 Node 实现

A Node Implementation of Google's HighwayHash

HighwayHash是Google内置的哈希函数，旨在实现可移植性，速度和安全性。

https://github.com/lovell/highwayhash

Node 文件追踪：一个依赖关系追踪程序

Node File Trace: A Dependency Tracing Utility

Vercel 使用它来准确确定应用程序运行时需要哪些文件 - 你也可以这样做。

https://github.com/vercel/node-file-trace

manojVivek / responsively-app

manojVivek / responsively-app

修改版的 Web 浏览器，有助于响应式 Web 开发。Web 开发人员应该拥有的一款开发工具。

https://github.com/manojVivek/responsively-app

使用 financial 计算财务数据

Github/financial

在 Node.js，Deno 和浏览器端均可使用的零依赖财务计算 JS / TS 工具库，更多使用详情可查看

https://github.com/lmammino/financial

用 useWebAnimations 编写高性能动画

Github/useWebAnimations

useWebAnimations 采用 React Hook 方式封装 Web Animation API，让开发者更灵活地编写高性能动画，大家赶紧上手试试吧！

https://github.com/wellyshen/use-web-animations

Puppeteer 发布 5.0 正式版本

Github/puppeteer 5.0

重大变更：移除 page.emulateMedia 使用；移除 require('puppeteer/DeviceDescriptors') 使用；移除 require('puppeteer/Errors') 使用。

https://github.com/puppeteer/puppeteer/releases/tag/v5.0.0

本系列会持续更新，欢迎大家持续关注。IES前端团队负责字节跳动互娱社区全线产品前端开发工作，包括但不限于抖音、火山、轻颜、faceu等。如果你想加入我们的团队，欢迎投递简历到 [email protected] 标题：【求职】岗位-姓名-电话