大前端快报 No.1 - No.44 合辑

[int64ago]

大前端快报 No.44

• 一起走进 React 核心团队 https://163.lu/jMZcB1

从一名新入职的 FB Reacter 的角度，看看 React 团队的氛围与合作模式。

• Casbin：权限控制库 https://163.lu/lfIJT3

Casbin 是一个强大的开源权限控制库，支持 RBAC、ABRC 等模型，各语言都有 SDK 支持。

• pino https://163.lu/9YTi61

可以收藏留以备用的高性能 Node.js logger。

• 在 App Store 外分发 Mac Apps https://163.lu/KsxpY1

一份描述如何在 App Store 之外分发 Mac Apps 的指南。

• 为什么 Apple 当年选择了 Clang https://163.lu/onFqo3

对比了 Clang 与其他开源的编译器。

• 来自 Airbnb、Netflix 等公司的代码评审最佳实践 https://163.lu/eKFWR3

在本文中，我们将总结来自一些公司的官方工程博客的经验教训。为什么要做代码评审？除了作为一种质量保证的工具，代码评审还有哪些好处？代码评审如何帮助提升团队能力？

• 抖音品质建设 - iOS 安装包大小优化实践篇 https://163.lu/TvxEn0

客户端开发的同学都知道「安装包大小」是 App 重要的基础体验指标之一。本文将为大家介绍抖音在优化安装包大小方向做的一些探索和尝试。

大前端快报 No.43

• Mac Catalyst 的新功能 https://163.lu/4DHba1

介绍了 Apple 生态的跨平台技术 Catalyst 的新特性。

• Tailwind CSS 与 Bootstrap 的差异 https://163.lu/BJmAM3

虽然我一句话总结 Tailwind CSS 是颗粒度更细的 Bootstrap，但是文章依然值得一看。

• 实际使用 Tailwind CSS https://163.lu/fkLTF2

实用 Tailwind CSS 尝鲜。

• Chrome：基于百分比的滚动 https://163.lu/RhAGP3

允许浏览器将鼠标滚轮或者键盘滚动解释为预期滚动条的百分比，这意味着在启用该功能之后滚动体验会更加流畅。

• Wasmer 1.0 发布 https://163.lu/q5B0I0

Wasm 是一个 WebAssembly 运行时，支持各种平台，甚至 IoT 设备。

大前端快报 No.42

• 在浏览器中写歌 https://163.lu/lxYg33

一个小巧的命令式的用于写歌的编程语言

• 在 VSCode 中编辑图片 https://163.lu/NkTj72

一款可以在 VSCode 中编辑图片的插件

• 使用 Chrome DevTools 调试 CSS Grid https://163.lu/QCngb2

一些使用 使用 Chrome DevTools 调试 CSS Grid 的小技巧

• Stimulus：一个基于 HTML 的 JavaScript 框架 https://163.lu/WHsmL2

Stimulus 不像现在的 React、Vue 等会接管 HTML 并按它们机制渲染，它充分利用原生 HTML，配合 JavaScript 实现现代化框架。

• 主流 JavaScript 框架（库）的开销对比 https://163.lu/Xw3Lz0

从载入、编译、执行、内存等角度对比主流 JavaScript 框架（库）的开销，毫无疑问，jQuery 还是那么优秀。

• 前端性能清单 https://163.lu/GQuaP1

从各个角度分析性能问题并给出解决方案。

大前端快报 No.41

• 2020 腾讯 Techo Park - Flutter 与大前端的革命 https://163.lu/Dy2mx4

Flutter 自发布到目前的 1.22 版本，已经走过了两年多的时间，这段时间以来，Flutter 一直都是跨端开发的风口浪尖，这个时候很多人不禁要问：那么未来还是么 ？ 又该如何抉择 ？本文将给你这些问题的答案。

• Apple现已推出轻 App 码 https://163.lu/dKTLI1

AppClip 是今年 WWDC 的一大亮点，现在苹果已经正式推出 AppClip 码，只需将 iPhone 靠近轻 App 码或用摄像头扫描该代码，即可打开您的轻 App 并快速完成需要的任务。

• 苹果M1全网最硬核评测（上）（⚠️这是视频） https://163.lu/uaDfe0

在这期视频里，我们会从苹果 M1 的架构分析、CPU 及 GPU 理论性能表现、MacBook Pro 13 上 M1 的功耗及温度表现等方面深度挖掘 M1 的表现以及 M1 内部的秘密。

• App 去反调试 https://163.lu/vojwm4

MonkeyDev 的一种应用，蛮好玩的。

• 泛客户端架构基础 https://163.lu/eFA4N3

尽管我们现在写 Web App 有很多框架或库可以直接使用，但是这之下的最基本的设计原则却是大同小异的。

• CSS 背景花纹图案 https://163.lu/W1kW84

很像程序员的格子衫，可以在线调整好直接用在实际项目里。

• CSS 工具类和关注点分离 https://163.lu/3hUdN0

作者总结了自己写 CSS 过程中的一些思维转变，有一些最佳实践的总结。

大前端快报 No.40

• Turbo：减少 Web 应用的 JavaScript 代码 https://163.lu/REZv53

跟 React Server Components 类似，看起来前后端不分离的趋势真的来了。

• TypeScript 教程 https://163.lu/KYRNj4

如何与 type-checker 交互的系列教程（4 个章节）。

• 你可能不需要 Moment、DayJs 库 https://163.lu/sHN7E4

罗列了原生实现日期转换的各类方法，并给出了性能测试数据，非常适用于对性能敏感应用场景。

大前端快报 No.39

• GitHub 2020 年度报告 https://163.lu/oJ7O31

新增 6000 万新仓库；JavaScript 依然最热；安全更新速度提升显著；给出平衡工作与生活的一些建议

• React Server Components https://163.lu/qEyv62

React 官方新出的组件形态，目前还处于实验阶段，目测影响力会跟 Hooks 差不多。

• Flux 最后一次大版本更新 https://163.lu/odUug2

可能基本没人用 Flux，不过近期发布了 4.0.0，这是最后一次大版本更新了，进入维护状态。

• AGP 7.0 发布 https://163.lu/LFG953

Android Gradle 插件的一个大版本，从 7.0 开始会采用语义化版本方案。

• Node 爬虫工具一览 https://163.lu/CgCFz2

本文介绍了主流的几个 Node 爬虫工具、库，会有些简单对比分析。

大前端快报 No.38

• 现在 npm 官网对于有 TS 申明的包会展示 TS 标识 https://163.lu/UmI423

这是个很小的功能，但是非常方便包使用者去判断该包是否内置 TS 声明。

• 使用 TypeScript 时的一些小建议 https://163.lu/myCaa1

初入 TypeScript 有效避坑。

• JAMstack 简介 https://163.lu/MkiVr2

简介最近常出现的名词 JAMstack。

• App 启动提速实践和一些想法 https://163.lu/k36hl1

比较系统，图文并貌， 吃完饭没事的话，可以瞅瞅。

大前端快报 No.37

• Webpack 2021 规划 https://163.lu/akoEu2

官方给出了 2021 的规划，计划会更好地融合 ESM，以及把 CSS、HTML 也纳入到原生模块体系中。

• WebNFC 即将到来 https://163.lu/9NjIG3

不久后在 Android 上就可以实现 Chrome 跟 NFC 设备交互了。

• Google 设计 2020 榜单 https://163.lu/e2VYF2

包含了这一年里值得反复回味的设计作品。

• 如果把 CSS-in-JS 的性能提升 175 倍 https://163.lu/0etZS2

有点标题党了，只是一些优化 CSS-in-JS 性能的方法，有一定参考意义。

• useRef 完全指南 https://163.lu/ioMth1

一篇把 React 里的 useRef 各方面介绍得比较全的文章。

• GitHub 的深色模式太暗了 https://163.lu/6Ii0p3

作者告诉我这不是我一个人的错觉。

• iOS链接原理解析与应用实践 https://163.lu/2EsGu1

文章带我们了解动态链接和静态链接的原理，有助于我们从底层原理方面去解决各种疑难问题。

大前端快报 No.36

• 杀不掉的 App——CVE-2018-4340​ https://163.lu/Nx2RN0

作者在 2018 年给 iOS 和 macOS 报了一个 WebKit 沙箱逃逸漏洞 CVE-2018-4310，苹果先后在 macOS 和 iOS13上修复了这个漏洞。本文详细讲述了这个漏洞的原理，以及如何在 iOS 上做一个杀不掉的 App，是一篇 iOS/macOS 上安全相关的高质量文章。

• iOS 性能优化实践：头条抖音如何实现 OOM 崩溃率下降50%+ https://163.lu/Mw7Hi4

还在为内存问题掉头发却又手足无措的老铁们可以瞅瞅这个

• Flutter integration_test 插件 1.0 发布 https://163.lu/RSq7k3

一个更简单的测试 Flutter App 的方式，同时支持 Firebase 的 Test Lab。

• 根据网络和设备状态来加载图片 https://163.lu/46BMu3

图片加载性能优化的新思路

• 通过使用现代的 JavaScript 来提高应用性能 https://163.lu/pMGOl1

快来试一试你的应用可有多少提升空间

• Squoosh：Web 版的图片格式转化 https://163.lu/sscFr1

使用了 Wasm threads & SIMD 等技术，分为左右两屏，可以很方便地做转换前后对比。

• CSS text-combine-upright 竖行横书组合 https://163.lu/8b5RD3

使用 css 实现文字竖行

大前端快报 No.35

• 现代 JavaScript 教程 https://163.lu/08YhP0

如果有人问你如何学 JavaScript，给这个链接就对了。这个教程覆盖很广，且只关注现代 JavaScript 特性。

• 使用 Jetpack Security 加密 Android 上的数据 https://163.lu/NeyPB3

是否有尝试过在 Android 上加密数据？Jetpack Security 提供了相关库用来加密文件等。目前 Jetpack Security 还在 RC 阶段。

• Vue Router v4.0.0 发布 https://163.lu/XUL472

历时 2 年，适配 Vue 3 的 Vue Router v4 来了，体积更小，TS 支持，以及更多新特性。

• Element Plus - A Vue.js 3.0 UI library https://163.lu/FYzmx0

第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了

• GitHub：Dark Mode https://163.lu/ybFao2

普天同庆，GitHub Dark Mode 来了，重点是官方这个宣传视频很不错。

• WDR：纯 JSON 渲染一个网页 https://163.lu/R4aEA0

这个网站输出仅仅是个合法的 JSON，但是却正确的渲染为网页，原理就不说了，有兴趣的自己看吧。

• CSS Margin 重叠规则 https://163.lu/hlNS92

文本可能是解释 Margin 重叠最好的文章了吧，关键是其表现形式也非常友好。

大前端快报 No.34

• Node 内置 Promise 的 timers https://163.lu/NjdpX2

你是不是经常需要自己实现一个 Promise 的 setTimeout 配合 await 使用？其实 Node 内置了。

• Snowpack v3.0 RC: Streaming NPM Imports https://163.lu/LOacm1

开发阶段，Snowpack 结合 Skypack 自动把 import 的包变为预构建好的 CDN 资源，从而避免了开发阶段的 npm install 及构建。

• Rough Notation：在页面创建手绘风注解 https://163.lu/pdMDQ0

这是一个很小的 JS 库，可以给页面的元素创建手绘风注解，挺好看的，还能动哦。

• Chrome Dev Summit 2020 https://163.lu/Jylms1

12-10~11 两天，全程直播，不过国内是凌晨了。

• JavaScript 25 周年生日 https://163.lu/Isaws3

一起回顾下这些年 JS 的发展吧。

大前端快报 No.33

• iOS 零点击近距离无线攻击 https://163.lu/DlUEA1

这是个 iOS 的漏洞，并且在 iOS 13.5 上已经修复了。效果可以从视频中看到，文章非常详细的分析了该漏洞的原理。

• Android Studio 4.1：Database Inspector https://163.lu/ABQAu2

在最新的 AS 4.1（目前还在 Canary 阶段）新增了一个新的工具 Database Inspector，可以修改运行中 APP 的数据库。

• UME - 丰富的Flutter调试工具 https://163.lu/JL3aG2

鉴于在开发 Flutter 过程中遇到的一些问题，西瓜视频 Flutter 基础团队开发了一款调试工具包 UME，内部集成了丰富的调试工具

• MongoDB Realm 使用初体验 https://163.lu/BpVLC4

Realm 是一个专门为移动端设计的数据库。主要特点是性能好，易使用。MongoDB 是一个流行的 NoSQL 数据库，主要是在服务器端使用。MongoDB 收购 Realm 半年后推出全新的 MongoDB Realm。本文介绍了 MongoDB Realm 的基本功能和使用方法。

• 移动端UI一致性解决方案 https://163.lu/geKLE3

大型 App 往往承接着来自不同团队的业务，可能各个业务组都有着自己的产品、设计和研发团队。随着版本的不断迭代，大型 App 在设计层面、研发层面、测试层面和产品层面均会面临着效率低、UI 体验不一致等问题。美团外卖团队分享了他们在移动端 UI 一致性解决方案上的探索。

• 使用原生 HTML 元素给边框增加文本 https://163.lu/KOoUT1

使用 fieldset 和 legend 给边框增加文本，看起来可以实现一些很特别的效果。

• JS 新特性：相对索引方法 https://163.lu/cMUtP1

如何优雅的获取一个数组最后一个元素？目前 .at() 方法提案已经进入 Stage 3。

• Storybook 扩展指南 https://163.lu/DSsIA4

Storybook 的扩展已经超过 200，但是如何创建并分享给其他有需要的人还不是很容易。这是官方给的一个非常简洁的指南。

大前端快报 No.32

• Aleph.js：Deno SSR 框架 https://163.lu/9Ylr31

Aleph 借鉴了很多 Next.js 的特性，让 Deno 也可以做到几乎零配置写 SSR。

• 原生 CSS 瀑布流布局 https://163.lu/7Ueqf3

在 Firefox Nightly 版本里，可以通过 flag 开启瀑布流布局的支持，这个是基于 Grid 布局实现的。

• WebHID：Web 人机交互接口 https://163.lu/P9NE04

越来越多的人机交互设备，如游戏手柄、触摸屏等，WebHID 的支持让这些设备可以直接跟 Web 页面互动。

大前端快报 No.31

• React Native v0.64.0-rc.0 发布 https://163.lu/TYHwe3

可以通过 Hermes 构建 iOS 应用，React 17 支持。

• 折叠屏 Web API 提案 https://163.lu/Y5vor3

针对目前手机折叠屏的趋势，Web API 也出了相关提案。

• Storybook 6.1 发布 https://163.lu/eWqpO2

Storybook 是一个标准化的 UI 组件工作坊，6.1 支持 React 17 且提供更快的刷新速度。

• wasp：Web 专属语言 https://163.lu/JHTVb2

一个非常新颖的 Web 全栈方案，没有像传统做简单组合，而是整了个 DSL。

• scroll-margin-top：锚点定位修正 https://163.lu/sZMDI3

在有 fixed 头的页面，一般锚点快速定位会有偏移的情况，scroll-margin-top 可以比较优雅地解决这个问题。

大前端快报 No.30

• 构建自己的调色板 https://163.lu/YRdQq3

配色跟音乐一样，不是简单的堆砌就可以，同样的颜色，不同方式安排会产生截然不同的视觉效果。

• 谷歌开发者大会扔物线演讲原稿整理：Jetpack Compose https://163.lu/VwWPE4

本文是扔物线朱凯在GDG上分享的图文整理，文章很好的介绍了什么是 JetPack Compose 以及 JetPack Compose 的优势—— “它重新定义了 Android 上 UI 的写法”

• 混合了所有新的 JS 新特性提案的代码 https://163.lu/8fI9x1

这个混合所有新特性（提案）的代码已经几乎无法看懂了，学不动了。

• Prettier 2.2 发布 https://163.lu/a0kMg3

全新的 JavaScript 解释器，支持 TS 4.1，并且为现代浏览器单独抽离一个 ESM 包。

• TypeScript 4.1 正式发布 https://163.lu/D1oOF4

值得关注的一个重大更新是，新增了字符串模板类型 Template Literal Types

• Product Hunt：最好的技术产品展 https://163.lu/QzHfH0

这是一个小而美的产品展示集聚地，非常多的交互、视觉、技术相关的产品。

大前端快报 No.29

• unpack：不借助打包器创建 Web 应用 https://163.lu/0Yuqu1

理论上 ESM 普及后 Web 应用是不需要 Webpack 之类的打包器的，但是这天到来前也可以借助一些曲折方式提前体验。

• 谷歌开发者大会 11.18 线上直播 https://163.lu/3V4243

Flutter | Web | Material Design

• 国内大厂在移动端跨平台的框架接入分析 https://163.lu/PCInb4

本文通过对国内各大厂旗下知名的应用进行分析，大致统计分析各大厂在移动跨平台开发领域的接入情况，同时分析 Android 端应用的 arm 框架、 kotlin 和 androidx 的使用状态。

• Firefox 83 将提供 HTTPS-Only 模式 https://163.lu/a4ivI1

现在基本看不到 HTTP 的站点了，Firefox 则做的更激进一点，在 Firefox 83 提供 HTTPS-Only 模式，开启后如果遇到 HTTP 站点会主动拦截等待确认。

• ESM 转 CJS 一览 https://163.lu/JCvPJ1

ESM 转 CJS 是很困难的，不同工具的做法和表现也有些不一样。文章比较干，慎点。

• Android Hilt&Kotlin实用指南 https://163.lu/arp543

如何搭配Kotlin语言使用Hilt实现依赖注入

• Chrome 87 来了，性能获得大幅提升 https://163.lu/k79T64

新特性还包括：新的 CSS grid 调试工具，开发工具面板支持垂直分屏，Lighthouse 更新 v6.4等等

大前端快报 No.28

• Wrap：提升 Firefox JS 性能 https://163.lu/yxEMb1

Firefox 默认使用 SpiderMonkey 作为其 JS 引擎，通过 WrapBuilder 可以让 SpiderMonkey 更快，这个优化已经在 Firefox 83 上开启了。

• Vue 3.0 Ref-sugar 提案真的是自寻死路吗？ https://163.lu/VvXvP0

针对最近很火的 Vue ref sugar 的一篇较客观的分析。

• Vue 新提案： script setup https://163.lu/7oVF20

这个功能的主要目的是直接把 script 里顶层变量暴露给模板。

• Angular 11 发布 https://163.lu/Gsf2v3

新的特性包括：字体自动内联，组件测试，报告和日志的提升，Webpack 5 实验性支持等

• Scriptable app https://163.lu/6PQNQ2

使用 JavaScript 创建 iOS 小组件。

• PyTorch 加入 Android 神经网络 API https://163.lu/IGSql1

Android NNAPI 可以帮助实现边缘计算，新加入的 PyTorch 让开发者不再局限于 TensorFlow Lite。

大前端快报 No.27

• 2020 Web 年鉴 https://163.lu/bleZt3

HTML 是 Web 的基础，这篇年鉴通过数据展示我们如何使用 HTML 的。

• TypeScript 4.1 RC 来了 https://163.lu/ZKco74

提供了比较多的改进，新特性包括：新的检查标志，编辑器生产力的更新，更好的性能提升等

• HTTP/2 的服务端推送可能要被移除了 https://163.lu/Oc3st2

HTTP/2 出来也有好几年了，但是 99.9% 的 HTTP/2 连接都没用到服务端推送，很难为这个特性找到使用场景。

• supabase：一个开源的 Firebase 简单替代品 https://163.lu/GqAlZ3

Firebase 作为集中化的移动端和 Web 开发工作台，功能可能稍微多了点，supabase 声称是 Firebase 替代品，整个产品看起来简洁不少。

• Aleph.js：基于 Deno 的 React 框架 https://163.lu/3HW1F2

此框架采用的技术栈整体都很先进：TypeScript、Deno、SSR & SSG，值得尝试下。

大前端快报 No.26

• Flutter 季度调研 https://163.lu/AynK53

Flutter 团队启动了第 10 次季度用户调研。在 10 天时间里，全球共有 7,668 位用户参与了调研。

• 你的 App 为何在 iPhone 12 上显示异常，而别人的不会？ https://163.lu/z9O7O1

因为 iPhone 12 的逻辑分辨率和之前的机型都不同。 使用 Xcode 12.0 打包，会让 iPhone 12 运行在兼容模式，不会出现问题。 而如果使用 Xcode 12.1 打包，则会使用 iPhone 12 固有的分辨率渲染界面。导致页面出现非常多异常情况。

• Gradle 插件的缓存机制 https://163.lu/QDe430

深入探索 Android Gradle 插件的缓存配置

• 卡顿率降低50%！京东商城APP卡顿监控及优化实践 https://163.lu/0DXey4

本文主要介绍性能监控系统中的APP卡顿监控，围绕卡顿这个性能指标，描述APP卡顿监控系统的搭建过程，分享京东商城APP卡顿优化实战经验和成果。文中 GPU FPS 这个概念比较有参考价值。

• 苹果要求在 App Store 中向用户提供新的隐私详细信息 https://163.lu/Kn3P24

这是对用户隐私数据保护的又一措施。之前已经预告过。从 2020 年 12 月 8 日起，提交至 App Store 的新 app 和 app 更新都将需要包含隐私信息。

• WebGL 流体效果模拟 https://163.lu/z7ZNP3

一个非常酷炫的 WebGL 模拟 DEMO，尝试使用鼠标操作一波吧。

• swc：又一个 JS/TS 编译工具 https://163.lu/zgxJg0

Rust 写的，干的事情类似 esbuild，号称比 Babel 快 20-70 倍。

• ES2021 新特性一览 https://163.lu/Ap2qg3

不知不觉已经 ES12 了，这里罗列了 ES12 最终确定的新特性。

大前端快报 No.25

• CSS 混合动画 https://163.lu/utzf72

因为 CSS 属性同时只能设置一次，所以针对 transform 只能设置一个动画，通过 WebAPI 结合 composite: 'add' 可以突破这个限制。

• EV SSL 证书性能问题 https://163.lu/VRQMF4

常见证书有 DV、OV、EV，其中 EV 证书因为在 TLS 协商阶段需要校验的内容过多会有一些性能影响。

• 使用 CSS Variables 换肤而不是 React Context https://163.lu/6Z16b3

在 React 的 CSS-in-JS 背景下，似乎使用 Context 换肤显得更符合逻辑，本文对比了 CSS Variables 方案，性能表现更为突出。

• 这是一个真正的裸页面 https://163.lu/Lk9wP0

一个比较有意思的表现形式，把页面内容以纯 html 标签的方式展示。

• 做了一夜动画，就为让大家更好的理解 Vue 3 的 Composition API https://163.lu/jTvL23

动画满分，瞬间 GET 到精髓。

• 客户端开发基础知识——写文件避“坑”指南 https://163.lu/4bWSW3

尽管写文件在客户端开发过程中是非常常见的操作，但是依然会时不时的遇到一些奇怪的问题。诸如读写文件不一致、写入过程内容丢失等。本文会对文件读写相关的几个 API 和其内部机制进行详细讲解，并对常见的几个问题一一解答。

• 苹果全新订阅服务通知现已在分发环境中使用 https://163.lu/MxaYN3

苹果向开发者宣布，现已可在分发环境中使用新的订阅服务通知。苹果提供了用户订阅状态的实时更新通知，方便开发者更快了解自己服务的订阅情况。这对云音乐的会员订阅服务可能会有帮助。

• 积木Sketch插件进阶开发指南 https://163.lu/iKxX73

如何落地设计规范，提升产研效率？本文介绍了积木 Sketch 插件进阶开发指南，实现一款可以与业务强关联且功能可定制的成熟工具。 文章涉及到前端/Xcode/视觉/工程效率等等多方面，是一篇很有价值的文章，值得学习和借鉴。

大前端快报 No.24

• Netflix 是如何实现 Android 与 iOS 共用一套代码 https://bit.ly/34QC6jj

使用 Kotlin 编写两端代码。

• 在 iOS 上运行 NodeJS https://bit.ly/3mDoePa

iSH 是 iOS 上的一个 APP，通过 x86 模拟器来运行 Linux，所以理论上也可以跑 NodeJS 代码。

• MDN Web 文档即将更新到新的平台 https://163.lu/hh6Lq0

是时候让 Kuma 来推动 MDN Web 文档的发展了，MDN 开发者团队计划更新平台，这可以带来诸多好处，这对 MDN 贡献者影响较大。

• JavaScript 语言「糟粕」集合 https://163.lu/weVYG0

这是 JS 语言奇技淫巧的集合，这些并不是什么好东西，并不是日常工作用推荐的，知道就好了，有些还是有意思的。

• 如果不用 SPA，那用什么？ https://163.lu/E9HEs2

本文是作者对 SPA 模式问题的一些思考，同时也给出了一些可选方案。

• rough-charts：一个手绘风的 React 图表库 https://bit.ly/34SbE93

看起来是个质量还可以的手绘风图表库，该有的都有，但是文字依赖 Web Fonts，所以中文可能效果就打折了。

大前端快报 No.23

• 全新 iPhone 12 发布，再谈 iPhone 屏幕尺寸 https://bit.ly/2HIO70M

如今，iPhone 12 、iPhone 12 Pro 系列正式发布，屏幕参数尘埃落定。本文复盘了一下 iPhone 12 的屏幕参数到底是如何变化的，对于普通用户在 iPhone 12 上使用 app 又有什么影响。

• iOS 网络优化：iOS 14 网络层性能和安全性 https://bit.ly/37PHaGi

苹果原生支持使用 IPv6，并且支持 IPv6 和 IPv4 混合使用（一个 App 内）或者仅使用 IPv6 网络，文章解释一下使用 IPv6 以后带来性能提升的原因。

• 导航栏组件和 Deep Links https://bit.ly/3e8sMdq

这是一篇关于 Android 最新的导航栏组件和 DeepLink。

• Cookie 终于有正式 API 了 https://bit.ly/3kygrSb

从 Chrome 87 开始，浏览器原生提供 cookie 操作的 API，再也不用字符串拼凑了。

• Next.js 10 发布 https://bit.ly/2HMjiso

新增特性包括：images 自动优化，内置国际化路由，真实用户的性能测量Analytics，React 17 支持等等~

大前端快报 No.22

• Create React App 4.0 发布 https://bit.ly/3ml5jZt

CRA 是一个比较流行的 React 工程生成的脚手架，这次发布带来了 React 17、ESLint 7、TypeScript 4 等支持，还有更快的 refresh 性能。

• IETF Last Call：QUIC 将为互联网带来巨大的飞跃 https://bit.ly/3js2YKn

QUIC 和 HTTP/3 是在 IETF 中开发了将近 4 年的开放式标准。目前，该文档系列已被放到 IETF Last Call 中，这是一个重要的里程碑。

• 浏览器实验特性：Web Locks API https://mzl.la/3kusT5F

这是一个 tab 级别的锁，可以做到多个 tab 应用运行时公共资源竞争问题。

• 1021 个字节的作品 https://bit.ly/31HYMAl

Assembly 2020 上的一个 1024 字节 DEMO 挑战的获胜作品，使用 1021 个字节达到了很棒的效果。

• MDN：更新了编辑策略以及社区参与方式 https://mzl.la/2J1hlZv

MDN 近期更新了编辑策略，关注点主要在：内容质量和编辑节奏，同时也非常需要热情的人参与贡献。

• DataStore - Android Jetpack 新组件发布 https://bit.ly/3dY9k30

SharedPreferences 的官方替代品。

大前端快报 No.21

• Linux 版本的 Edge 浏览器来了 https://bit.ly/35h8SJn

随着 Linux 版本的发布，Edge 基本算是全平台覆盖了，不过目前 Edge 同步功能还比较弱，可以稍微期待下。

• React 17 正式发布 https://bit.ly/3jj2Lck

此前是 RC 版本，现在正式版本已发布。v17 版本比较不一样，这个版本主要聚焦使 React 升级更加顺滑容易。

• Node v15.0.0 发布 https://bit.ly/37rTLPJ

一大波更新，默认内置 npm 7，支持 QUIC，V8 升级到 8.6，由此可以享受 V8 的新特性如 Promise.any、String.prototype.replaceAll 等。不过不是 LTS 版本，所以生产还是等明年的 16 吧。

• Android 车载应用程序库 https://bit.ly/3kfrkZ8

介绍了Android 车载应用程序库的相关内容。

• Android studio 4.1 介绍 https://bit.ly/35u6fUL

Android studio 4.1 稳定版本已经发布，这篇文章介绍了Android studio 4.1的功能与特性。

• Just write the #!%/* parser https://163.lu/jUlI74

为新手准备的手写解析器教程，车速较快，不能眨眼。

• How to use SVG as a Placeholder, and Other Image Loading Techniques https://bit.ly/37mBW4B

图像通常是拖慢应用速度的最大因素，文章讲解了如何使用 SVG 做为 Placeholder，解决用户对前端展示中图片的从模糊到清楚的展示方案，包括视觉原理，SVG 生成与使用方法。

• Web 上使用 Face ID 和 Touch ID https://bit.ly/3o8jdjm

Web 很久以来都是直接或者间接依赖传统的密码认证，随着 Web 能力的扩充，已经可以很好地支持多因子认证了。

• CSS :not() 伪类有望支持复杂选择器 https://bit.ly/3o6PaIF

一直以来 :not() 里只支持一个简单选择器，随着 :is() 支持复杂选择器，通过 :not(:is()) 有望为 :not() 增加复杂选择器的支持。

• 如何提升 Web Vitals 核心指标 https://bit.ly/34eFsw5

Web Vitals 核心指标是三个未来影响 SEO 重要的指标，这篇文章较为详细地介绍了来龙去脉和一些优化手段。

大前端快报 No.20

• iOS 性能优化：使用 MetricKit 2.0 收集数据 https://bit.ly/3du072j

iOS 13后使用系统framework进行性能收集

• iOS 性能优化实践：头条抖音如何实现 OOM 崩溃率下降50%+ https://bit.ly/3mcuAFl

字节自研了一款基于内存快照技术并且可应用于生产环境中的 OOM 归因方案——线上 Memory Graph。基于此方案，3 个月内头条抖音 OOM 崩溃率下降 50%+。

• Ionic 全面支持 Vue 了 https://bit.ly/2H6IfhV

Ionic 是一个比较著名跨端框架，19 年简陋地支持了 Vue 2，近期算是全面支持了 Vue，可以使用所有的 Vue 3 的特性，凭借 Vue 的生态，应该会有个不错的发展。

• Node v14.14.0 发布 https://bit.ly/3nPEuy2

本次是一个 minor 版本，比较重要是增加了 fs.rm，相比 fs.rmdir 这个是一个更接近 *nix 系统 rm 命令的 API。

• 基于 PRPL 的方式加速页面渲染 https://bit.ly/34a4rAz

PRPL 是 Push、Render、Pre-cache、Lazy-load 的简称，这些不是什么新鲜的事物，通过本文可以形成一些更高维度的思维模式，而不是点状的。

大前端快报 No.19

• 开始使用 Flutter 构建 Windows 桌面应用吧！ https://bit.ly/373xesD

支持Windows的Flutter Alpha版本已经发布。

• Universal Links 新变化：让触达更广更快 https://bit.ly/3dlWWcJ

通过本文你将会了解到 Universal Links 基本概念，并且深入了解今年 Apple 对 Universal Links 的改进及优化

• 扒一扒 10 月的 Apple Event https://bit.ly/2GQ2hgA

苹果 10 月份的 Apple Event "Hi, Speed" 就将开幕。和 9 月份的 Apple Event 一样，这次活动是以线上的形式呈现，背景是 Apple Park。而各路爆料大神也基本上把这次发布会扒了个底朝天，我们就来看看，这次发布会可能会带来哪些新产品，而又会错过哪些新产品。

• 为什么不推荐使用 PHPicker http://163.lu/hXCAW2

iOS 14 官方建议使用 PHPicker 来替代原有的 API 进行图片选择，本文介绍对比了 PHPicker 的优缺点以及与其他图片选择框架进行对比。

• Chrome is deploying HTTP/3 and IETF QUIC https://bit.ly/3iVIGIU

HTTP/3是只跑在 QUIC 上的最新版本的 HTTP，Chrome 正在推出对 IETF QUIC 支持

• 20 JavaScript and Node.js Developers to Follow Online in 2020 https://bit.ly/3dqeV1L

2020年值得关注的 20 个 JavaScript 和 Node.js 开发者

• npm v7.0.0 发布 https://bit.ly/316VKFr

主要三个特性：允许管理一个项目里的多个包；自动安装 peerDependencies；新的 package-lock.json 格式，同时支持 yarn.lock。

大前端快报 No.18

• Feature watch: ECMAScript 2021 https://bit.ly/30Sd6pf

一篇追踪 ES2021 实际的和可能潜在的新增特性 blog，文章内容会持续的补充更新。

• Webpack 5 发布 https://bit.ly/3jU1zxd

自 Webpack 4 发布已经两年了，新版本最重要的特性就是缓存机制的改变，以及更强大的 Tree-Shaking。

• Flutter 1.22 发布 https://bit.ly/3dkf1Ir

支持 iOS 14 和 Android 11，更加丰富的按钮样式，新的国际化和本地化支持，Navigator 2.0。

• 改变世界的一次代码提交 https://bit.ly/34zhD0W

Git 第一次提交的源代码分析及带来的启示。

• WorkManager: 周期性任务 https://bit.ly/3nzXP6e

WorkManager 是一个 Android Jetpack 扩展库，它可以让您轻松规划那些可延后、异步但又需要可靠运行的任务。对于绝大部分后台执行任务来说，使用 WorkManager 是目前 Android 平台上的最佳实践。

• iOS 后台锁屏也能监听摇一摇？ https://bit.ly/30YoGiO

直觉来说，iOS App 如果进入后台了能做的东西就非常少了，碰到「后台检测手机摇一摇」类需求时如何实现呢？作者给出了完整的研究和实现过程。

大前端快报 No.17

• 苹果推迟 UIWebView 废弃的 deadline https://apple.co/3jK6u3F

原定 20 年 12 月不再接受使用 UIWebView 的 APP 提交审核，该 deadline 被延后了，具体时间另行通知。

• iOS 启动图异常修复方案 https://bit.ly/2S8VDEb

本方案主要用于解决启动图无法渲染、不更新等异常问题，能够让应用自动恢复正常的启动图，从用户角度来说最坏的情况是首次启动时展示了异常的启动图，但下次冷启时即可展示正常的启动图了，保证了用户体验。

• iOS 14 - 使用 PHPicker 选择照片和视频 iOS https://bit.ly/3cGA5Iy

14隐私权限进一步收紧之后，苹果要求我们使用 PHPicker 来作为相册选择器。本文介绍了集成的整体流程，以及使用上的一些坑点。

• Chrome 86 发布 https://bit.ly/3dbz5MN

本次更新新增了不少利于开发调试的功能，比如媒体面板、按 DOM 节点截图、新的安全策略 COEP / COOP 信息展示等。

• Intl.RelativeTimeFormat 相对时间格式化 https://bit.ly/2Gn8HmM

有时需要显示相对时间，比如"5分钟前"、"2天前"等等。一般使用外部库来实现，其实浏览器原生的 Intl.RelativeTimeFormat API 就可以做到。

• Indicium: 一个 V8 的系统分析器 https://bit.ly/36NzoMU

这个系统分析器是一个用于在实际应用程序中跟踪、调试和分析如何创建和修改内联缓存和映射的统一 Web 界面。

• 声明式的 Shadow DOM https://bit.ly/3jgCE6D

众所周知，Shadow DOM 是 Web Components 一个很重要的部分，但是构建 Shadow DOM 一直都是通过 JavaScript（命令式），从 Chrome 88 开始，提供了声明式的方式。

大前端快报 No.16

• 一个 ESLint 开箱即用的提案 https://bit.ly/2RX1k8i

一个 Google 工程师给 Next.js 弄了个提案，简单说就是目前 Webpack loader 之前都是割裂的，比如 babel-loader 和 eslint-loader，如果能共享之间的 AST 树，除了性能，还能解锁很多新的姿势。

• CSS 新属性： text-decoration-thickness 和 text-underline-offset https://bit.ly/3mM5iip

Chrome 87 会带来两个新的 CSS 属性，对文本装饰线的粗细和偏移量可以做更多的定制了。

• Android 11 取消了视频 4G 大小的限制 https://bit.ly/3kKl9Mm

可能很少人会用 4K 持续录制半个多小时，但是在 Android 11 上你可以这么做了，当然这还要相机支持。

• 使用 Paging 3 实现分页加载 https://bit.ly/3j9xfyd

Paging 3.0 是一个完全使用 Kotlin 协程重写的库，相对于 Paging 2.0 提供了更灵活的数据转换操作。

• 恢复 RecyclerView 的滚动位置 https://bit.ly/3i4R7Bh

从 1.2.0-alpha02 版本开始，Jetpack RecyclerView 提供了一个新的 API，可以让 Adapter 在数据加载完成之前阻塞布局行为，从而避免丢失滚动位置信息。

• 今日头条品质优化：图文详情页秒开实践 https://bit.ly/3i7reB1

多角度分析 WebView 秒开是如何做到的。

大前端快报 No.15

• Swift 可以构建 Windows 桌面应用了 https://bit.ly/3mJkr3I

继 Swift 可以写服务端代码后，现在又可以写 Windows 桌面代码了，看起来可以成为事实上的通用语言了。

• 一张图看看 Java 的 2020 年 https://bit.ly/3iUjinO

借着 Java 15 的发布时机，我们看下 Java 目前的状态。

• V8 v8.6 发布了 https://bit.ly/35TZCwE

除了日常更新，这个版本比较重要的是去除了代码里的种族歧视以及一些不友好的语言。

• 选择最适合的纹理压缩格式 https://bit.ly/3kDEpem

像不同硬件对 CPU 指令集的支持不同一样，不同硬件对不同的纹理压缩格式支持也是不一样的，Google 提供了类似于选择提供 SO 库的方式对不同的机器提供不同的纹理压缩格式。

• “跨越式”的 Xcode 12.2 Beta 1 新特性和解决的问题 https://bit.ly/2ZTMjbG

苹果在发布 Xcode 12 正式版后仅一天的时间，就发布了 Xcode 12.2 Beta 1。印象中这应该是第一次，不仅是两个版本间隔时间短，而且直接跳过了 12.1。本文解读了 Xcode 12.2 Beta 1 有什么新东西，以及解决了哪些 BUG。

• Firefox 自带的 PDF 阅读器支持表单填充了 https://mzl.la/33OrWxW

PDF 表单填充这个功能简直是签合同的神器，目前需要升级 Firefox 到 81+ 且使用自带的 PDF 阅读器才可以。

• 给 CSS 动画来点透视 https://bit.ly/3cqKQP1

本文介绍了 CSS perspective 的一些基础知识，用了大量例子进行效果展示。

• 新 JSX 转换器介绍 https://bit.ly/3iVLJ4M

尽管 React 17 没有新特性，但是提供了一个新的 JSX 转换器，这除了可以减少最终包体积，还可以避免无聊的文件开头的 import React。

• 跟 import React from 'react' 说拜拜 https://bit.ly/2RVn44g

随着 React 17 新的 JSX 转换器出来，已经不需要在文件开头明显引入 React 了，而且 Dan 也表示，未来这种用法会被干掉。

大前端快报 No.14

• One Piece: Vue.js 3.0 正式发布 https://bit.ly/3hMB76R

本次新版本的更新包括：性能的改进，更小的 bundle 体积，对 Typescript 更好地支持，用于处理大规模用例的全新 API，以及为未来的长期迭代夯实基础。

• Github CLI 1.0 发布了 https://bit.ly/3hGwqeI

官方命令行工具 gh 终于从 beta 升级到了 1.0，不过 CLI 党不要妄想能完成所有操作，该打开网页还是得打开。

• 针对可以大的 JavaScript 库 Lighthouse 现在会给出替换提示 https://bit.ly/2RDvEVm

这个 PR 虽然是一个通用的功能，但是这些提示是硬编码到代码里的，目前也只有 Moment.js 会有提示。

• esinstall：把 CJS 转成 ESM https://bit.ly/2ZOn7TR

这个是 Snowpack 的一部分，不过可以单独拿出来使用，ESM 的优势不必多说，esinstall 使用比较巧妙的方式让我们提前进入全面 ESM 时代。

• 6 Reasons to Use React Hooks Instead of Classes https://bit.ly/32JLBzK

使用 React 钩子而不是类的 6 个理由。

• MXFlutter：基于 JS 的高性能 Flutter 动态化框架 https://bit.ly/3iHokUz

MXFlutter 是一套基于 JavaScript 的 Flutter 框架，可以用极其类似 Dart 的开发方式，通过编写 JavaScript 代码，来开发 Flutter 应用，或者使用 mxjsbuilder 编译器，把现有 Flutter 工程编译为JS，运行在 mxflutter 之上。

• Safari 14 Beta 新特性 https://apple.co/3cbe5FA

除了性能隐私方面看不到的特性，还有一波前端相关新特性的支持，重点关注下 CSS 和 Web Inspector。

• iPhone 屏幕尺寸进化历程背后的 App 设计哲学 https://bit.ly/30bKZBl

13 年间 iPhone 的屏幕尺寸是怎样一步步进化到此的？基于软硬一体的设计，屏幕物理尺寸的变化背后包含着怎样的进化规律？这些变化对我们朝夕相处的手机 App 又产生了什么影响？

• 一位 iOS 开发者的进阶之旅 https://bit.ly/3kBwfmR

本文其实是 v2ex 上面的一个帖子： "iOS 开发有什么国人写的比较好的书籍推荐？"。里面的内容大多来源于 lujie2012 以及其他人的一些回答，回答的内容已经不仅仅是推介书了，还包含了很多关于 iOS 学习上的问题。虽然里面个别回答或观点我并不是完全认同，但还是希望对有意进步的同学有一点点帮助。

• 在 Android GPU 监视器中使用 Texture Counter https://bit.ly/3kBJUdK

了解下调试 Android GPU 状态的工具吧！

大前端快报 No.13

• 让你们 App 应用起最新的隐私特性吧！ https://bit.ly/3hAfuqp

Android 11 提供了处理 URI 分享、增量权限申请等等一些列新的隐私特性，看一下怎么适配吧！

• Jetpack Compose 提供的分页开发方式 https://bit.ly/32zzLYO

看一下 Jetpack Compose 声明式 UI 是开发分页列表和传统 RecyclerView 的不同吧！

• iOS 上直接使用 Chrome 时 User Agent 有变动 https://bit.ly/3kin1vM

从 Chrome 85 开始 iOS 直接使用 Chrome 桌面浏览器时会额外增加 CriOS/，目的是让开发者可以区分 Chrome 和 Safari 并针对性地优化。

• App Clip 离落地有多远？ https://bit.ly/35DeRtx

本篇从业务和技术两个角度，列出了 App Clips 真正落地可能会遇到的问题，度量的角度可以作为我们实际业务落地过程中的参考。

• 深入聊聊不一样的 Flutter https://bit.ly/33urKn9

文中不仅详细介绍了 Flutter 的槽点和优势，还分析了 Flutter 世界中一些有意思的设定 ，比如 Widget 和 Element 的关系，组成 Dart 层渲染闭环的其他元素等。

• iOS 14 关于 IDFA 获取权限调研 https://bit.ly/32sW3LH

本文调研了在 iOS 14 Beta 系统中获取 IDFA（广告符）的流程，并暴露了一个 Beta 系统的绕过权限获取广告符的方法(不知道能不能活到正式版)。

• From Side-Project Byproduct to Multi-Million Dollar Business https://bit.ly/33yahtY

从一个优秀开源项目的诞生，到用开源项目赚到数百万美元的历程。

• 唐朝人更懂 React https://bit.ly/3hq8MTK

这漫天星空，就像。。。。。。就像浏览器的窗口！！

• Decorators: 一个装饰器的新提案将提交到 TC39 https://bit.ly/3hA6hOR

这个提案基于过去提案的所有元素，但和此前的两版又有不同，目前处于 TC39 第 2 阶段，这个月将进行更深入的讨论。

• Moment.js 宣布进入维护期 https://bit.ly/35EUwUR

官方声称 Moment.js 是远古时期的产物，也承认了被人诟病的体积和可变的（mutable）的问题，现在正式宣布进入维护期，虽然没说不维护，但是基本判了死刑，官方也给了些替选方案。

大前端快报 No.12

• 下一代 Node HTTP API 的一些想法 https://bit.ly/3ho8fl3

针对目前 Node HTTP API (req, res, next) => {} 这种恶心的形式，Svelte 作者发表了些他对于下一代接口设计的看法。

• 浅析鸿蒙 JavaScript GUI 技术栈 https://bit.ly/3mkEaXi

众所周知，刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言。这标志着继 SpaceX 上天之后，JavaScript 再一次蹭到了新闻联播级的热点。

• 用 React 和 Vue 构建了完全一样的 Todo APP https://bit.ly/3m4OH97

2020 年版本的 Todo APP, 用 Vue 3 的 Compitision API 和 React Hooks 构建了同样的 APP，分析两个框架在数据绑定、更新，事件触发，参数传递等各个细节上的区别，值得一看。

• CSS 属性：place-items https://mzl.la/3hxkXxT

这个不是什么新特性，只是发现使用这个人很少。

• 简单有趣的设计模型讲解 https://bit.ly/3jVBJsm

比大话设计模式还要有意思的设计模式讲解。

• 设计模式在业务中的实践 https://bit.ly/2GNQqzj

结合实际的业务场景，图文 + 代码 生动介绍设计模式如何在项目的使用。

• Android 11 Go 版本将适配 2G 内存的设备 https://bit.ly/32jeRNv

Android Go 是针对低端设备量身订作的Android 系统，最初与 Android Oreo 一同推出，适用于 1GB 或更低内存的设备。所以现在 2G 也被认为是低端设备了？

• 新的 DataStorage API https://bit.ly/2FuzM7f

Jetpack 提供了新的 DataStorage API 用于替换 SharedPreferences 提供更好的使用体验。

大前端快报 No.11

• 苹果 iOS 14 IDFA 新政策延后至 2021 年 https://bit.ly/35l9nnr

在 WWDC20 中，苹果曾宣布在 iOS 14、iPadOS 14 和 Apple tvOS 14 上，开发者需要征得用户的许可，才能在其他公司所拥有的 App 和网站上跟踪用户，或访问其设备的广告标识符。而根据苹果最新发布消息显示，为了让开发者有时间进行必要的更改，App 需要获得跟踪用户许可的要求将从明年年初开始实行。

• Android 11 正式发布 | 开发者们的舞台已就绪 https://bit.ly/2ZmUJrQ

关键字是 以人为本、灵活控制与隐私安全，优化了开发者体验。

• Node v14.10.0 (Current) 发布 https://bit.ly/2RdsJ5o

值得关注的一些变化：添加 randomInt 函数，添加 idleTime 和 event loop util，更简单、更快的可读异步迭代器(async iterator)等。

• Xcode 12 支持 SVG image assets https://bit.ly/3jWoVll

Xcode12又带来一些新特性，Assets已经支持SVG资源了，并且和我们熟悉的PDF格式的工作方式相同。

• Structural Class Redefinition and Apply Changes https://bit.ly/2FihXIT

在 Android 11，Android Runtime 新增了一个叫 Structural Class Redefinition 的扩展到 JVMTI API，通过这个 API 可以增强早期 AS 提供的 Apply Changes 能力。

• 尤大：Starting with an idea and building a community https://bit.ly/2FbDKlp

尤雨溪在 ReadME Project 自述开源 Vue 和建立一个 vuejs 社区的旅程，最后还分享了一些工作和生活平衡的思考。

• 使用模板字符串做自动补全 https://bit.ly/35aFO7U

这是一个 TypeScript 的 MySQL 插件，通过模板字符串方式写 SQL 代码，并且可以达到自动补全的目的。

• AVIF 来了（全方位测评） https://bit.ly/33bxMcm

随着 Chrome 85 迎来了新的网络图片格式 AVIF，体积更小且质量更高，这篇文章有详细的测评数据值得看下。

• 一个 Golang 写的站点静态预渲染工具：Staticgen https://bit.ly/3k2yCis

只需要告诉它 Web 服务启动方式，它会自动启动并爬取完成预渲染，它不关心你使用的 Web 框架，Emmm...小编有个大胆的想法！

• NodeJS 弹性自愈 https://bit.ly/2R7jKTs

文章比较基础，讲的是 Node 服务部署方式的演进，如何达到弹性自愈，甚至一句话就可以总结：npm start -> nodemon -> pm2 -> systemd -> docker -> swarm -> k8s 。

大前端快报 No.10

• 高级工程师成长指南 https://bit.ly/2FcxppC

这是一个外国工程师的一些职场感悟，虽然不能代表什么，但是不妨碍我们去了解下其工作和思考方式。

• 键盘动画 - Part 1 https://bit.ly/2R2dPyQ

Android 11 提供的 WindowInsets API 可以让 APP 在键盘打开和关闭使用无缝动画。

• 整体把握 CocoaPods 核心组件 https://bit.ly/2ZgXqLo

扫盲篇：天天 pod install、pod update，其实你知道的只是 Cocoapods 的冰山一角。

• CSS ::marker 来啦 https://bit.ly/2Z7SoAV

随着即将到来的 Chrome 86，主流现代浏览器会正式支持 ::marker，有了它，终于可以自定义列表样式了！

• 被「玩坏」的 TypeScript 模板字符串类型 https://bit.ly/3jNBu2C

在即将要发布的 TS 4.1 里有个 PR，它带来了让几乎所有 TS 用户都会激动的模板字符串类型，很多人脑洞大开基于这个做了很多非常有意思的尝试，可谓开启了元编程的大门。

• Jetpack Compose Alpha 版发布！ https://bit.ly/3h9LvoS

UI 开发效率的提升离不开三个重要因素: 编程语言、集成开发环境 (IDE) 以及用户界面 (UI) 框架。Jetpack Compose 的目的就是为了让您 (我们也是！) 能在构建 UI 上更加高效！

• model-viewer：3D 模型元素 v1.1 介绍 https://bit.ly/2DGVu7y

创建一个 3D 模型就像写一行 HTML 一样简单，v1.1包含了在 web 上的增强现实(AR)的内置支持，改进了速度和逼真度等。

大前端快报 No.9

• Android 11 新工具 https://bit.ly/3lLg4EX

在 Android 11 上，我们引入了两个新工具 —— Data Access Audit 和 Process Exit Reasons

• Kotlin 1.4 来了！ https://bit.ly/31LSLTw

全新语言特性和更多改进，包含新的语言特性、改进的编译器和工具。

• 让 Objective-C 框架与 Swift 友好共存的秘籍 https://bit.ly/2QEXboH

Apple 的工程师将告诉我们如何改造现有的 Objective-C 框架，使其能够更符合 Swift 的使用体验。

• iOS Crash 分析攻略 https://bit.ly/31P2b0r

Crash捕获原理是什么？如何看懂Crash日志？Crash分析方法有什么？深入了解后可以帮助我们快速定位崩溃问题。

• 基于命令行终端的 Slides 工具：present https://bit.ly/3hLzA1J

从 PPT 到 Keynote，到 Google Slides，再到基于网页的 reveal.js，你见过直接在命令行终端里玩的吗？

• useSWR: 一个数据请求的 React Hook 库，性能和用户体验之间的完美权衡 https://bit.ly/2G6obvl

SWR 的名字来自 stale-while-revalidate，是一种在前端领域越来越流行的缓存策略。

• JS 内存管理武器库新成员 WeakRef https://bit.ly/32NiCd5

继 WeakMap、WeakSet 之后，JS 内存管理武器库又引入了一个装填非银弹的新成员 - WeakRef，没有别的，就先备着。

• 一款 CSS-in-JS 库：Stitches https://bit.ly/2Z0GLvL

当今 CSS-in-JS 方案或者库已经很多了，但是说实话大多都带有很多缺陷，这款有很多特性确实能让人眼前一亮，目前还在 Beta 阶段，可以先关注起来。

• Recoil: 一个 React 的状态管理库 https://bit.ly/2DrHTAO

Recoil 是 Facebook 出的数据流管理方案，基于 Immutable 的数据流思路，有一定思考的价值。

大前端快报 No.8

• Midway Serverless 访谈 https://bit.ly/3hEq9B5

Midway Serverless 发布有一段时间了，在发布之前阿里内部已经用的比较广泛了，与其说这是一个访谈，不如说这是一个 Q & A。

• 一款朋克风格的 UI 框架 https://bit.ly/3jmQQux

除了样式和动画，居然还提供了音效，全方位支持让你轻松打造酷酷的页面。

• Electron v10 发布：跨平台桌面应用开发工具 Electron 发布最新版本 https://bit.ly/2EJA7T0

主要包括 Stack Upgrades，其他较多的新增特性和大量的 bug 修改以及一些性能优化，对 7.x.y 版本将不再支持。

• Promise.any 已经被所有现代浏览器支持 https://bit.ly/2QDkJdL

Promise.any 跟 Promise.race 比较类似，区别在于其不会因为 reject 而提前结束。

• 深入浅出 WebRTC https://bit.ly/2G4yG2e

这是一个关于的 WebRTC 的电子书，是由 WebRTC 实现者创作的，非常干。

• AVIF: 下一代图片压缩格式 https://bit.ly/34V4jpg

基于 AV1 视频格式的现代图像格式，AVIF 具有比 WebP，JPEG，PNG 和 GIF 更好的压缩效果，并被设计以替代它们。

• 快门背后的机器学习 https://bit.ly/3jvFJ2t

实时 HDR+ 和双重曝光控制

大前端快报 No.7

• Android Material 组件 1.2.0 现已发布 https://bit.ly/3jjteXB

全新 Android Material 组件 (MDC-Android) 1.2.0 来了！此次发布新增了很多有意思的新功能、修复了很多问题，并改进了无障碍使用体验，让我们一起探索吧！

• 重要变更 | Android 11 中的软件包可见性 https://bit.ly/3lp0MFK

Android 11 对设备已安装应用列表增加了过滤功能，针对这一功能需要对 AGP 进行相应的升级。

• Svelte 和 React 目标体积对比 https://bit.ly/3lpWSMI

我们知道 Svelte 号称没有运行时，所以在组件很小时是可以做到比 React 这类带运行时的库小的，但是如果组件很大呢？

• 又双叒叕一个前端构建工具：Snowpack https://bit.ly/31z3MaQ

传统 Webpack 构建时间复杂度是 O(n)，而这个号称时间复杂度是 O(1)，dev 冷启动可以达到 50ms 以内！

• 灵魂画手带我们玩 WebAssembly https://bit.ly/3lmBtEh

只需要最基本的前端知识和必要的开发环境，跟着生动有趣的教程重新认识下 WASM。

• Prisma: Modern Database Access for TypeScript & Node.js https://bit.ly/3gx8hGX

Prisma 是新一代的数据库工具集，ORM 框架，能够管理复杂的数据库构建和读写，拥有优异的开发体验，快速开发GraphQL、REST、gRRC 等服务，适用于任意语言。

• U4 内核团队打造全新 Flutter 渲染引擎 —— Hummer https://bit.ly/34zRuRn

主要针对 Flutter 从编译优化、混合开发增强、多维度的性能优化、Darkmode 自适应等功能增强等场景入手。

• Vite，一个基于浏览器原生 ES imports 的开发服务器 https://bit.ly/3b5Vvht

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。

大前端快报 No.6

• 为啥别人的 Xcode 丝般顺滑，而我的就跟便秘一样 https://163.lu/wY1gL3

Warning 多了居然会完爆 Xcode 内存占用，万恶的 Warning 到底干了什么天怒人怨的事情？

• 别人家的打包速度为什么这么快？ https://163.lu/Cq2Mk4

原来 Docker 不是 Linux 专属，macOS 上面也可以玩的飞起，来啊～ 快活啊～

• 基于 GO 的急速 JavaScript 打包工具 https://163.lu/UY93i2

号称比其他 JavaScript 打包程序快至少 100 倍（当然是在它定义的 benchmark 中）。

• 前端监控平台 SDK 实现 https://163.lu/BXrc74

非常详细的介绍了前端监控平台中，前端 SDK 的细节实现。内容详细，整理到位。

• Announcing TypeScript 4.0 https://163.lu/yO8KX1

TypeScript 4.0 现已正式发布，该版本没有重大的突破性变化。TypeScript 团队表示新版本继续使用与过去版本相似的版本控制模型，可将 4.0 视作 3.9 的延续升级版本。

• Fragments 的重构 https://163.lu/uRHRS3

Fragment 1.3.0-alpha8 重构了 Fragment 的实现，了解一下底层的实现吧！

• Android 11 Media 的更新 https://163.lu/vL93L2

Android 11 系统 Media 的具体更新和带来的新特性。

大前端快报 No.5

• 微软 365 应用即将停止对 IE 11 的支持 https://163.lu/cj3480

今年 11-30 微软内部应用会停止对 IE 11 的支持，明年 8-17 所有的应用和服务停止对 IE 11 的支持。

• 又双叒叕一个 JavaScript 包管理器？ https://163.lu/lFN1Y3

看描述是用 Rust 写的另一个 Node 端和浏览器端的包管理，目前项目刚刚开始，作者之一是前 NPM 团队成员。

• Android Studio 4.1 的 Native Memory Profiler 功能 https://163.lu/z1Qp00

AS 4.1 在 Memory Profiler 上提供了更强大的功能，看一下 Native Memory 有哪些更新吧。

• Android Car System 新进展 https://163.lu/uDXYM2

随着 Android Car 系统越来越流行，是时候了解一下目前 Android Car System 的情况了！

• React Native 在美团外卖客户端的实践 https://163.lu/iSZvu2

RN 在美团外卖的工程性实践。

• React 17 新特性：启发式更新算法 https://163.lu/oEYj02

事实上，这次版本更迭确实有“新特性” —— 替换了内部使用的启发式更新算法。只不过这个特性对开发者是无感知的。

• 为什么我不再用 Redux 了 https://163.lu/Hdrro1

分析使用 Redux 的场景，提出 SWR, react-query 这样的后端数据缓存的方案，来解释大部分的项目，不太需要 Redux 来进行数据管理。

大前端快报 No.4

• Objective-C 之 Runtime 对象 http://163.lu/dlksa4

Runtime 对象介绍最全的一篇文章，源码注释，为读懂 iOS 14 Runtime 优化打下基础。

• WWDC20 iOS14 Runtime优化 http://163.lu/4bo2H2

解读 iOS14 是如何做到更小的类数据结构、更小的方法列表、标记指针的变化 这三项运行时优化。

• 为什么你的 APP 在 Sketch 上看起来更好: 探索 Sketch 和 iOS 的渲染差异 http://163.lu/gZTss0

我们开发用的 UI 图基本都是由 Sketch 生成的。Sketch 在文字排版、阴影、渐变上和使用同样的数值开发实现效果会有差异。这篇文章介绍了如何抹平差异的方法，在视觉要求高的场景下可以完美实现视觉稿效果。

• Flutter 1.20 发布 http://163.lu/rvoGW2

一起看下 Flutter 1.20 增加了哪些新功能。

• Ktor 的介绍 http://163.lu/CL1Lp2

Ktor 是基于 Kotlin 协程的网络库，可以 run on differrnt platforms。

• 满眼只有 React 和 Vue，却对前端数据层几乎一无所知 http://163.lu/spVnm1

不是我冒犯，包括我自己在内，如果满眼都是 React 和 Vue 之类的前端框架、库，那么可以说，对前端数据层几乎一无所知，就算把前端框架玩的贼溜，对前端架构的理解，也不过是井底蛙之王。

• 那些很可能成为 CSS 的语言 http://163.lu/UMtas3

这是一段 CSS 的考古，从早期 HTML 被提出到 CSS 被实现经历了有 10 年之久，这期间充满了各种尝试，任何一种尝试如果成为如今的 CSS 的话或许整个 Web 会是另一个面貌。

• Node.js v14.8.0 发布 http://163.lu/oh4G53

顶级 await 可以直接使用了！

大前端快报 No.3

• 快手推出了业界首个线上 OOM 检测方案 http://163.lu/TfKzc4

快手推出了 KOOM，作为首款检测和解决线上 OOM 的工具，可以了解它的实现思路。

• Android 11 I/O prefetching http://163.lu/LwsqG3

Android 提供的新 Feature I/O prefetching，通过对 I/O 的优化进一步提升 APP 启动速度。

• GitHub 北极代码计划的技术树来啦 http://163.lu/W61wQ3

我们知道上个月 GitHub 把我们的代码打包放到了北极，除了代码其计划还有一个包含当今计算机基础的技术树作品集，这几天刚刚完稿。

• 把 DOM 的 EventTarget 带到 Node.js 里 http://163.lu/6J3364

在 Node.js 14.7.0 里，首次发布了类似 DOM 里的 EventTarget API，这篇文章记录了做这个初衷和遇到的一些挑战。

• React v17 第一个 RC 版本发布 http://163.lu/Coy4c2

距离 v16 发布已经过去两年半，终于迎来了 v17，但是这次发布对用户来说并没有新特性，这次发布作为跳板为了 React 自身后续更平缓的升级。

• Chrome 的 SameSite 策略结束灰度已 100% 覆盖 http://163.lu/4c7Hx3

早些时候 Chrome 针对 80+ 以上的版本进行 SameSite 策略灰度，简单说就是默认使用 Lax，目前已经全量更新。

• SwiftUI：下一代客户端UI开发技术 http://163.lu/sgpc92

对官方 SwiftUI 教程很好的补充说明，实操中体验从命令式到声明式界面开发方式的改变。

• 详解 WWDC20 SwiftUI 的重大改变 http://163.lu/4R1KD2

通过了解 WWDC20 关于 SwiftUI 的重大改变，真实感受到 SwiftUI 的核心优势。

大前端快报 No.2

• TypeScript 4.0 RC 发布 http://163.lu/Kazj03

进入 RC 意味着不会再有 Break Changes 了，4.0 带来了诸如可变元组类型、元组标记等重要特性。

• Chrome 84 上 Flex 可以使用 gap 属性了 http://163.lu/2iBwr0

这曾经是小编梦寐以求的功能，通过 gap 属性可以为 Flex 元素设置间隔，目前除了 Safari，现代浏览器都支持了。

• iOS UI 是如何处理点击事件的 http://163.lu/fSd9Q1

从最常见的点击事件出发，了解事件传递再到事件响应整个过程。

• 深入理解 RunLoop http://163.lu/4lZPs2

上文事件响应是苹果利用 Runloop 实现众多功能的冰山一角，接下来我们揭开 Runloop 面纱，深入理解 Runloop，真正感知到 Runloop 时时刻刻在我们身边。

• Android4.0 Build Analyzer 的使用 http://163.lu/HyaW04

Android 4.0 新推出的 Build Analyzer 是 Build 分析利器，可以看一下使用介绍和心得。

• Android R8 编译器的正确打开方式 http://163.lu/BkDrI3

R8 编译器可以给 APP 带来更高的压缩比，下面的文章介绍了 R8 的背景、工作流和使用上的 Tips。不过目前还在不断优化中，可以持续关注。

大前端快报 No.1

• iOS Rendering 渲染原理 http://163.lu/9BTft4

从计算机渲染原理到屏幕成像最后到渲染流水线，追本溯源，真正理解工作中碰到的卡顿、离屏渲染等本质原因。

• iOS CoreAnimation 的愉快探讨 http://163.lu/6M4Hd0

剖析 CoreAnimation，让工作中轻松实现绚丽动画效果。

• Android 11 新特性 http://163.lu/m6ikn0

Android 11 beta 版以及发布，包含了大量的新特性，这里列举了较为重要的一些特性列表，快来看看有哪些我们可以使用和适配的地方吧！

• Flutter 组件预览插件 http://163.lu/oPzjc1

Flutter 开发中如何快速的对一个组件进行预览呢？现成的工具供上。

• Node 已经默认支持顶级 await（TLA） http://163.lu/IdruT2

目前 Node v14.x 上是通过 --harmony-top-level-await flag 启用 TLA，根据目前情况，已经去掉了这个 flag，也就是有望在下一次发版就可以默认享受 TLA。

• TC39 提案 Records 和 Tuples 对 React 的影响 http://163.lu/BHAx01

Records 和 Tuples 提案目前处于 Stage 2，这为 JS 带来了原生的不可变数据结构，对 React 而言无疑是巨大福利，因为这之前我们大多需要依赖 Immutable.js。