《前端技術觀察》是由字節跳動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] 標題：【求職】崗位-姓名-電話

點贊、在看、轉發 支持作者:heart:

相關文章