“前端微周刊”每周更新一次，为前端开发者提供一些技术相关资讯及文章。

微信搜索订阅“前端微志”公众号。

📰 资讯

Flutter 2.0 发布

Flutter 2.0大版本发布，这次的大版本更新，释出了很多新的能力。你可以用一套代码编译出五个平台的原生应用，包括：iOS，Android，Windows，macOS和Linux。而且，web端的支持也是稳定的版本。总体而言，Web、移动端和桌面端应用对Flutter来说，都已经稳定支持。同样，Flutter还可以嵌入到TV、车机系统和便携式家用电器上。

这次大版本功能，最大的亮点就是生产环境质量级别的web端支持。最开始发布的版本中，主要专注于web端的三个特别的设想：

• Progressive web apps (PWAs) 包含web端的成熟能力，集成桌面端的能力。
• Single page apps (SPAs) 只加载一次，且与互联网服务互相传播数据。
• 将现有的Flutter移动端应用移植到web端，确保各端共用的代码有相同的体验。

近几个月，团队在性能优化上有很大的进步，使用WebAssembly构建了一个新的基于CanvasKit的渲染引擎，社区成员 Felix Blaschke 使用它构建了一个demo网站：Flutter Plasma，感兴趣的可以查看。

Gatsby 3.0发布：更快的本地开发体验

Gatsby是一个机遇React的前端开发框架，它封装了很多常用的最佳实践，同时有一套自己的插件规则，在它的生态内有很多好用的插件。可以让开发者快速地构建前端页面，同时Gatsby团队还提供了付费的云服务能力，让网站开发变得更加简单。

3月2日，Gatsby 3.0发布，带来了更快开发体验及更好的性能。

• 对开发者来说，本地开发环境体验，提速80%
• 对内容编辑者来说，在任何服务上的构建都变得更快
• 对网站访问者来说，有更强大的网页核心指标以及更高的Lighthouse评分
• 更新了依赖的最新稳定版本，包括Node 12、webpack 5、React 17、GraphQL 15和ESLint 7等

Chrome 89发布，支持import maps

在Chrome 89中，我们可以直接在浏览器中使用import xx from 'xx'语句了，根据标准需要先声明模块路径，再引用。如：

<!-- 声明 import-map -->
<script type="importmap">
{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>
<!-- 引用声明的模块 -->
<script type="module">
import moment from "moment";
import { partition } from "lodash";
</script>

Google Fonts 添加开源icons

由于排版和icon符号有很强的关联性，Google Fonts决定支持开源icons。首先从Material Icons开始，因为它维护了超过2000个清晰icon的集合，且在五个系统中都是可用的，可用在页面Google Fonts Icons中查看。同时，Google Fonts还为了更好地表达它的多元性，更新了自己的logo。

ESLint v7.21.0 发布

ESLint v7.21.0 发布，主要新增了--cache-strategy命令行参数，提升了通过查看任一文件元数据或内容来查明变化的文件。其他是一些bug fix等。

📖 文章

Getting Deep into Shadows（深入理解Shadows）

开发页面时，常使用box-shadow和text-shadow等来显示阴影的效果，但是如何去设计和实现一些复杂场景下的阴影，需要对Shadow有较深的理解。文中从一些基本概念（如：Form Shadow、Drop Shadow和Layering Shadow等）出发，详细介绍了这些阴影的区别和效果，并给出一些示例代码，帮助你更好地理解它们。

JavaScript performance beyond bundle size

通过标题可以看出，这篇文章是讲JavaScript性能的，但不止于bundle的大小。作者首先带入几个问题，你的依赖文件有多大？能不能用一个更小的？能不能让它懒加载？

通常我们都是去尽量低减少bundle的大小，但还有一些指标很难被衡量，却也同样重要，包含：

• Parse/compile time（转换/编译时间）
• Execution time（执行时间）
• Power usage（电量使用情况）
• Memory usage（内存使用情况）
• Disk usage（磁盘使用情况）

带着这些问题，作者有针对性地介绍了如何衡量它们。

Hiding Content Responsibly

在页面中因此一个标签，有很多种方法，通常开发者很少考虑页面标签在Accessibility方面的表现，Accessibility规范的目的是为残障人士提供同等的网络内容体验而设计，它要求页面标签元素在看不见的地方能被Screen Reader读到，这样可以直接让盲人“听到”这些标签元素及其内容。

本文探索了多种因此页面元素的方式，想要找出一种方式，能让正常人看到的内容和盲人通过Screen Reader听到的内容保持一致。

Diving into the ::before and ::after Pseudo-Elements

::before 和 ::after 伪元素在CSS中发挥着多才多艺的角色，它们可以让你更好地装修标签，添加更炫的效果。深入地理解它们可以帮你掌握CSS技巧来解决一系列问题的方案。

文中深入地解决了这些伪元素，还介绍了很多跟伪元素关联性比较大的属性content。

云凤蝶-如何在企业级中后台业务实践低代码搭建

本文为在 《第二十一届前端早早聊大会 | 前端搞搭建》的分享文字稿。分享主要分为四个部分，首先会大致介绍一下云凤蝶这个产品，因为它目前还只对蚂蚁内部服务，那么演示一下功能会帮助大家有个印象。第二会介绍下云凤蝶为什么做，解决问题的设计思路是什么，底层逻辑是怎样的。第三会深入细节介绍下云凤蝶的技术实现以及挑两个比较关键的点来展开分析。

🛠 工具、插件

DevTools (Chrome 90) 上新

在Chrome 90中，DevTools 更新了 一些新的能力：

• 新的CSS flexbox 调试工具
• 新的Core Web Vitals覆盖层，可以度量你的页面性能
• Console面板中的子面板Issues更新，
• Application面板中新增子菜单Trust Tokens，显示所有有效的Trust Tokens
• Progressive Web Apps (PWA) App 工具提升
• Network面板下新增一列Remote Address Space
• ……

代码片段截图工具：ray.so

ray.so 是一个有着清新风格的代码片段截图工具，配色很漂亮，支持暗黑模式（DarkMode）和导出图片功能。

joi：强大的schema描述语言，JavaScript数据校验器

joi 是一个数据校验器，它提供了很多实用的API，方便对数据的类型、必填、最大值和最小值等多种场景下的条件验证。同时还支持正则表达式的匹配和邮箱类型等验证。以下为示例：

const Joi = require('joi');

const schema = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required(),

  password: Joi.string()
    .pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),

  repeat_password: Joi.ref('password'),

  access_token: [
    Joi.string(),
    Joi.number()
  ],

  birth_year: Joi.number()
    .integer()
    .min(1900)
    .max(2013),

  email: Joi.string()
    .email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } })
})
  .with('username', 'birth_year')
  .xor('password', 'access_token')
  .with('password', 'repeat_password');

Mockoon：本地运行，快速构建mock API

Mockoon 是一个本地安装运行的一个mock工具，支持所有平台（Windows/Linux/Mac），有很强的定制化能力，且支持代理、HTTPS和跨域等场景。

🥅 代码片段

你该知道的 Promise API 的四个方法

• Promise.all()
• Promise.allSettled()
• Promise.any()
• Promise.race()

这几个方法都接收一个Promise的数组作为参数，你知道它们会在什么时机触发resolve吗？

1. Promise.all() 会在所有Promise都resolve之后，才会触发自身的resolve

const promise1 = Promise.resolve(2);
const promise2 = 44;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('foo'), 2000);
});

const results = await Promise.all(
  [promise1, promise2, promise3]
);
result.forEach(console.log);
// 2, 44, "foo"

2. Promise.allSettled() 会返回一个Promise，它会在所有Promise达到fulfilled或rejected状态的时候resolve。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('foo'), 2000);
});

const results = await Promise.allSettled(
  [promise1, promise2]
);
console.log(results);
/**
 * [{
 *   status: "fulfilled",
 *   value: 3
 * }, {
 *   status: "rejected",
 *   reason: "foo"
 * }]
 * ?

3. Promise.any() 接收一个Promise的数组，只要有一个Promise达到fulfilled状态，该函数就会把这个Promise的值resolve出来。

const promise1 = Promise.reject(9);
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'quick')
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'slow')
});

const result = await Promise.any(
  [promise1, promise2, promise3]
);
console.log(result)
// "quick"

4. Promise.race() 接收一个Promise的数组，会在最快达到fulfilled或rejected状态的Promise出现，就会把value货reason的值resolve出去。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 400, 'one')
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, 'two')
});

const result = await Promise.race([promise1, promise2]);
console.log(result);
// "two"

CSS flex图解

CSS中的flex布局有很多个属性，这些属性的不同组合方式可用实现很多不一样的布局效果，上图很好地展示了这些组合及其效果。

💻 前端岗位

招聘板块，记录最近在招前端岗位的信息。有招人需求的朋友，可以添加到评论区。也可以公众号私信我或邮件联系zollero@163.com。

岗位竞争力：

• 小桔车服类电商的业务环境，是前端能力发挥非常好的业务场景。
• 高速成长性团队，跨端、IoT、端 AI 等领域都在大力实践并有丰富的落地实践场景。
• 鼓励端技术的主动业务赋能，鼓励个人能动性和系统产品思维。

欢迎有意向的同学联系：corona7@163.com