前端技术观察第21期

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

• Highlights

  • 优秀的工具、库

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

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

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

  • Tutorial

  • Tools And Codes

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

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

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

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

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

highlights

微软发布 gRPC-Web 实现，可直接在浏览器端调用 gRPC 服务（英）

Microsoft Releases gRPC-Web for .NET

基于 .NET 的 gRPC-Web 协议实现，解决在浏览器中调用 gRPC 的场景

https://www.infoq.com/news/2020/06/microsoft-releases-grpc-web-net/

Mozilla WebXR Viewer 2.0 发布（英）

WebXR Viewer 2.0 Released

WebXR 2.0 是 Mozilla 对浏览器增强现实（AR）模块的完全重写，旨在让 Web 开发人员使用 WebXR 在 iOS 上实现基于 Web 的增强现实，并同时保证其安全及隐私性

https://blog.mozvr.com/webxr-viewer-2-0-released/

Firefox 78 新特性（英）

New in Firefox 78

Firefox 78 发布，支持了新的正则引擎、更新了ES Intl API、增强了对 WebAssembly 的支持等

https://hacks.mozilla.org/2020/06/new-in-firefox-78/

Chrome 新特性: CSS Overview（英）

New in Chrome: CSS Overview

该功能提供了网站上CSS的概述，详细介绍了颜色，字体，媒体查询和未使用的声明

https://css-tricks.com/new-in-chrome-css-overview/

CSS 2020 新特性介绍（英）

What's New in CSS – July 2020 Edition

一些即将进入使用的 CSS 实验特性，包括 flexbox gap、aspect ratio unit 等。

https://www.smashingmagazine.com/2020/07/css-news-july-2020/

iOS 14 新特性（英）

What’s New in The iOS 14 SDK

快来通过iOS和iPadOS 14 beta发行说明来获得包括widgets，SwiftUI，ML，AR等广泛修改的详细说明吧！

https://mobiledevweekly.com/link/90913/web

Angular 10 发布

Angular 10 Released

2月才发布完Angular 9，10的改动范围较小，主要包括：新的日期选择器，可选的严格设置以及TypeScript 3.9的升级等

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

TypeScript 4.0 Beta 发布

First Beta Release of TypeScript 4.0

TypeScript 4最终版本将于8月发布，第一个beta版本包括可变参数元组类型，标记的元组，快捷方式赋值运算符等

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

tutorial

详解 OAuth2.0 及使用的 4 种姿势

OAuth2.0 tutorial

OAuth是一个关于授权（authorization）的开放网络标准，目前应用非常广泛，本文总结它的使用

https://xie.infoq.cn/article/4502b7badcfabbfdde17e2c94

深入理解 Angular 编译器

Deep dive into the Angular compiler

详解 Angular 编译器的实现原理和核心技术点

https://zhuanlan.zhihu.com/p/156788061

全民K歌推流直播Web实践

The streaming live technology practice of Tencent WeSing

K歌的核心技术和性能优化方案

https://mp.weixin.qq.com/s/NjU0OqWxelM2eTJfg66W4Q

一些使用Puppeteer进行测试的小技巧(英)

Tips for Testing with Puppeteer

一些包括环境配置、case编写、调试、兼容性等方面的Puppeteer使用技巧

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

tools And codes

阿里自研开源框架 Midway Serverless: Serverless 前端提效 50%

Midway Serverless

使用 Serverless 这一新一代研发架构，希望能大量减少研发人员使用基础设施和运维的成本

https://www.infoq.cn/article/C5Lls85aVX1F9w5B0QqV

巧用 CSS cross-fade() 实现背景图像半透明效果

CSS cross-fade()

CSS 的使用小技巧

https://www.zhangxinxu.com/wordpress/2020/07/css-cross-fade-background-image-opacity/

elevator.js

elevator.js

使得"回到顶部"表现地像电梯一样

Octopus.do: 一个快速可视化sitemap生成器（英）

Octopus.do: A Visual Sitemap Builder

一个构建网站站点地图的在线工具，也可以从URL导入现有的sitemap.xml并进行处理。

https://frontendfoc.us/link/90759/web

Code Notes: 用于呈现Gatsby主题的代码片段和相关注释

Code Notes: A Gatsby Theme for Publishing Code-Related Notes and Snippets

如果想将一堆代码片段收集在一起并以吸引人的方式呈现，那么这是一种采用Gatsby和Markdown/MDX技术的简洁方法的示例网站

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

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