《前端技術(shù)觀察》是由字節(jié)跳動IES前端團(tuán)隊收集、整理、推薦的業(yè)界高品質(zhì)前端資源合集，主要分為以下幾個板塊：

• Highlights
• 優(yōu)秀的工具、庫
• 好的教程、深度解讀已有技術(shù)的文章
• 業(yè)界最新的技術(shù)、熱點文章
• 業(yè)界對（新）技術(shù)的深度地、優(yōu)秀地實踐
• Tutorial
• Tools And Codes

《前端技術(shù)觀察》的目的是讓大家：

• 更及時的了解到業(yè)界最新的技術(shù)
• 受益于高質(zhì)量的教程、文章
• 了解業(yè)界更優(yōu)秀的代碼、工具
• 更多地、氛圍更濃厚地討論、研究、落地技術(shù)

highlights

Fastify 3.0 發(fā)布：一種 “低開銷” 的 Node Web 框架（英）

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

Fastify 已經(jīng)存在了很長一段時間，可能值得一看。剛剛發(fā)布的 v3.0.0 包括各種重大更改和新功能，以及更好的 TypeScript 支持。

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

如何保護(hù)移動應(yīng)用程序安全 – 移動應(yīng)用程序安全 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

流行移動開發(fā)工具的對比，關(guān)注指標(biāo)有 FPS，CPU，內(nèi)存和 GPU 性能。

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

如何更好地在 JavaScript 中表達(dá)日期和時間（英）

Dates and Times in JavaScript

Temporal API 是用來更靈活地處理日期、時間戳等時間相關(guān)表達(dá)的解決方案，目前還在 proposal 草案階段，歡迎提議和反饋

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

開發(fā) Web 暗黑模式的全方位指導(dǎo)（英）

A Complete Guide to Dark Mode on the Web

文章詳細(xì)介紹了暗黑模式下需要考慮的設(shè)計細(xì)節(jié)和開發(fā)方案，非常全面，值得收藏

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

使用 Array.flat() 平展數(shù)組（英）

Flatten Array using Array.flat() in JavaScript

ES2019 引進(jìn)了平展數(shù)組的新方式：Array.flat()，并且可以利用 depth 參數(shù)靈活控制數(shù)組層級的展平

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

tutorial

使用 Express 和 Netlify 在 Node.js 中構(gòu)建 Serverless GraphQL API（英）

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

一個非常易于訪問的教程，適合喜歡保持事物易于維護(hù)的任何人。

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強(qiáng)大功能的巧妙方法。

https://whatpwacando.today/

如何使用 Dart 中的 Mixins（英）

Mixins in Dart: How to Use It

如何使用簡單的類 Mixins 來避免 Dart 中的多個類層次結(jié)構(gòu)，以創(chuàng)建更簡潔的 Flutter 應(yīng)用程序。

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

tools And codes

Google HighwayHash 的 Node 實現(xiàn)

A Node Implementation of Google's HighwayHash

HighwayHash是Google內(nèi)置的哈希函數(shù)，旨在實現(xiàn)可移植性，速度和安全性。

https://github.com/lovell/highwayhash

Node 文件追蹤：一個依賴關(guān)系追蹤程序

Node File Trace: A Dependency Tracing Utility

Vercel 使用它來準(zhǔn)確確定應(yīng)用程序運行時需要哪些文件 - 你也可以這樣做。

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

manojVivek / responsively-app

manojVivek / responsively-app

修改版的 Web 瀏覽器，有助于響應(yīng)式 Web 開發(fā)。Web 開發(fā)人員應(yīng)該擁有的一款開發(fā)工具。

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

使用 financial 計算財務(wù)數(shù)據(jù)

Github/financial

在 Node.js，Deno 和瀏覽器端均可使用的零依賴財務(wù)計算 JS / TS 工具庫，更多使用詳情可查看

https://github.com/lmammino/financial

用 useWebAnimations 編寫高性能動畫

Github/useWebAnimations

useWebAnimations 采用 React Hook 方式封裝 Web Animation API，讓開發(fā)者更靈活地編寫高性能動畫，大家趕緊上手試試吧！

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

Puppeteer 發(fā)布 5.0 正式版本

Github/puppeteer 5.0

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

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