前端微周刊（第6期）：npm workspace支持npm run和npm exec

“前端微周刊”每周更新一次，为前端开发者提供一些技术相关资讯及文章。
微信搜索订阅“前端微志”公众号。

📰 资讯

npm workspaces支持npm run和npm exec

npm workspaces 将所有模块保存在一个共享文件夹中，让各个项目之间能够更容易共享软件包，可以避免手动使用npm link对本地的模块进行引用设置。最早是在yarn上实现了workspace的概念和功能。

在最新发布的npm v7.7.0版本中，支持在workspaces中执行npm run-script和npm exec命令。

你可以在执行命令时制定workspace，如：npm run <script-name> -w a。

NASA开源下一代任务控制系统，基于JavaScript开发

Open MCT示例效果

NASA开源了一套基于web的任务控制系统：openmct(Open MCT)。

有才的网友调侃道：“你已抵达undefined星系”，“你的飞行速度是NaN”，“你的目标轨道是[object Object]”🤣🤣🤣

CURL 23周岁了

1998年由Henrik Hellerstedt设计的最初版本logo

第一次发布于1998年3月20日的工具curl，现在已经23岁了。一个小工具在这么多年后，还有这么强的生命力，不得不由衷惊叹。你还知道哪些生命力比较强的工具？

它的前身是在1996年11月11日发布的httpget v0.1，那个版本只是一个单独的C文件，少于300行。而现在（2021年3月）的curl已经有172,000行代码了，全球下载量也超过了100亿次。

作者公布了在curl23岁时的23个有趣的数字：

由1998年3月2200行代码，增长到2021年的17万行；
支持14个不同的TLS库
2348个捐赠者帮助
发布了197个版本
在记录的有6787个bugfix
全球有超过100亿的下载量
871个开发者贡献代码
官方docker镜像下载量935,000,000（均83次/秒）
至少22个汽车品牌在其机动车上运行curl
curl项目每个commit，都会运行100个CI任务
Daniel（作者）在curl上花的闲暇时间有15000小时
两个头部手机操作系统都在它们的设备上运行curl
已知86个不同的操作系统运行curl
250,000,000个TV设备运行curl
curl支持26个传输协议
36个不同的第三方库可以自定义构建被curl使用
22个不同的CPU架构运行curl
curl为bug赏金中已经支持了4400美金
curl拥有240个配置项
curl网站上每月的下载流量有15,600GB
存在60个libcurl包装，让程序员转换数据被任何语言使用
相关的RFC有1,327,449个单词
1个创始人主导开发

Gitlab在中国成立合资公司：极狐，立志3-5年上市

极狐发布会

Gitlab通过红杉等资本成立合资公司：极狐，进军中国市场。它独立于Gitlab公司之外，本地公司有很高的决策和话语权。这背后，是看到了中国越来越大的软件开发市场的环境。

极狐将结合 GitLab 已有成熟技术，重点探索国产化自研创新和定制化服务；
将发布全新的本地化的 GitLab DevOps 平台产品，包括敏捷规划功能和本地相关的安全方案；
将会推出一个专供中国市场使用的 SaaS 产品——GitLab.cn；

至此，Gitlab有三个主要产品：CE（Community Edition），EE（Enterprise Edition）和JH（JiHu Edition）。CE继续在全球推行，EE将只在中国之外销售，JH将只在中国销售。其中，极狐的SaaS服务（Gitlab.cn）有独立的基础设施、网络、系统、服务、数据和资源，不与其他版本共享。

CSS Nesting（CSS嵌套）规范规则更新

CSS Nesting规则最近更新了规则：嵌套的样式只能写在结尾处，不能写到开头或中间位置。详见Nesting Style Rules规范内容。

按照规则要求，下面这种写法是无效的：

.foo {
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }

  display: grid;
}

将嵌套样式写到结尾才是有效的：

.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}

关于CSS Nesting规范，还是挺期待的，以后都不需要CSS的预处理器了？

📖 文章

语雀思维图子图嵌套的技术思考

思维导图领域的老大是XMind，它在这个领域深耕多年，实现了一些比较难实现的效果，比如：子图嵌套。

为便于叙述，先额为拓展一个概念：一个含布局的节点称之为核节点。
那么在本文中子图的概念是：若核节点 A 是核节点 B 的子节点，则称节点 A 及其子节点构成的图，是节点 B 的子图。

作者分享语雀是如何通过分析子图嵌套的嵌套规则、布局、冲突，以及如何解决冲突，最终实现子图嵌套这一效果的。

FlutterWeb在美团外卖的实践

MTFlutter 架构图

美团外卖商家端多元的业务形态和足够的技术“储备”，使得基于 Flutter 实现多端复用成为了可能。

美团外卖团队在Flutter Web上的实践及性能处理的实践，在文章、视频等场景的页面中落地，沉淀了一些性能优化的经验。他们未来还将在页面滚动性能优化、页面加载性能优化、Flutter Web 基建和Flutter Web 在 PC 侧的复用等方面继续探索实践。

A Complete Guide To Accessible Front-End Components

当一个按钮不是按钮

作为一个前端开发者，你了解Accessibility(可访问性)吗？

它不只是为了让残疾人士可以访问你的网站，提升网站的Accessibility还可以提升移动端的用户体验，还能让低速网络连接的用户受益。即平等地对待每一个人，给他们平等的机会，不管他们的能力和所处的环境。如果你对Accessibility感兴趣，可以读一下上面的文章，还可以看一下W3C中相关的规范WCAG。

对前端开发者来说，想要写出符合WCAG规范的组件，不止需要熟悉文档，还要靠一些经验积累。文中列举了三十多个创建accessible组件的技巧，覆盖鼠标、键盘、颜色、主题和表单相关标签的场景。

Web-Based Multi-Screen Apps Including Drag & Drop

如果给你一个命题：让两个浏览器窗口互相通信，实现数据互传的功能。你最先想到的一定的websocket，知道的更多的，可能会想到使用window.postMessages来做iframe与页面间的数据通信。

这里介绍了一个新玩意：SharedWorker。

7 Ways to Debug Jest Tests in Terminal

你会做前端的单元测试吗？你会使用Jest做单元测试吗？

如果你的回答是NO，那可以通过这篇文章了解一下七种调试Jest测试用例的方法，再去Jest文档里详细了解一下吧。

单元测试这件事，前期是有一些配置和学习成本，团队内全部拉齐也需要做一些同步的工作。但是，如果能在团队内整体推进，会带来很大的收益。

Is It the Beginning of the End for PWAs?

PWA推出已经快六年了，前两年随着社区用它来改进首屏渲染速度而火了一段时间，最近已经热度大减了。

PWA由于manifest文件中的属性start_url可以通过url携带一些参数而构建一套类似cookie的追踪机制，而面临一些用户隐私泄露的潜在风险。作者称之为PWA的阴暗面，Apple也因此在Safari中禁掉了几个PWA的特性。

Firefox 85中除了发布了为了保护用户隐私被supercookie的能力，还丢弃了支持PWA桌面端必要的特性：SSB（Site Specific Browser）。这个能力是可以让网站以桌面端应用的模式去运行，有独立的窗口。

种种迹象表明，PWA要凉凉了？

🛠 工具、插件

基于React的Windows95风格的UI组件：React95

React95组件效果

这是组件，可以带你重回童年👻

Cookie Consent Speed.Run

Cookie Consent Speed.Run界面

Cookie Consent Speed.Run是一个围绕GDPR的web小游戏，通过游戏的方式让玩家熟悉并了解GDPR的规则。

GDPR是欧盟在2018年5月出台的《通用数据保护条例》（General Data Protection Regulation），该条例的适用范围极为广泛，任何收集、传输、保留或处理涉及到欧盟所有成员国内的个人信息的机构组织均受该条例的约束。比如，即使一个主体不属于欧盟成员国的公司（包括免费服务），只要满足下列两个条件之一：

为了向欧盟境内可识别的自然人提供商品和服务而收集、处理他们的信息。
为了监控欧盟境内可识别的自然人的活动而收集、处理他们的信息，其就受到GDPR的管辖。

Charts.css

Charts.css是一个数据可视化框架（图表库），它与传统的可视化框架不一样的地方是，传统的可视化框架是基于canvas或svg技术绘制图表，而Charts.css是一个基于CSS技术的框架，它通过CSS工具类将HTML标签元素（如table）的样式展示成图表。

相比传统严重依赖JavaScript计算并渲染图表数据，Charts.css的方案使得所有图表数据都是通过HTML标签的方式展示出来，没有JavaScript的render过程，对搜索引擎和screen reader也更加友好。

这两类插件库，各有优缺点，可以根据自己的需要选择适合的库使用。

🥅 代码片段

一行代码移除数组中的虚值

虚值（falsy）是在 Boolean 上下文中认定为 false 的值，如0，undefined，null等。

const array = [
  null,
  39,
  'zollero',
  undefined,
  false,
  '前端微志',
  0
];

const result = array.filter(Boolean);
console.log(result);
// [39, "zollero", "前端微志"]

让CSS选择可以使用的颜色

要解释“可以使用的颜色”，需要说到视觉上的一个概念：Contrast ratio（对比度）。网页场景下，通常要考虑在某个背景色上显示文字的颜色，两种颜色的对比度是否符合视觉最佳体验。感兴趣的同学可以详细看下这篇文章：Color and contrast accessibility。如果你的网站要考虑SEO，那就必须要考虑颜色对比度的问题。

在Chrome Devtools中调试Contrast ratio

回归正题，通过下面的示例代码解释color-contrast()如何选择有用的颜色：

:root {
  --blue1: hsl(200, 50%, 3%);
  --blue2: hsl(200, 50%, 10%);
  --blue3: hsl(200, 50%, 20%);
  --blue4: hsl(200, 50%, 30%);
  --blue5: hsl(200, 50%, 40%);
  --blue6: hsl(200, 50%, 50%);
  --blue7: hsl(200, 50%, 60%);
  --blue8: hsl(200, 50%, 70%);
  --blue9: hsl(200, 50%, 80%);
  --blue10: hsl(200, 50%, 90%);

  --onblue2: color-contrast(
    var(--blue2)
    vs
    var(--blue6),
    var(--blue7),
    var(--blue8),
    var(--blue9),
    var(--blue10)
  );

  --onblue6: color-contrast(
    var(--blue9)
    vs
    var(--blue4),
    var(--blue3),
    var(--blue2),
    var(--blue1)
  );
}

/* 使用选择出来的颜色 */
body {
  background: var(--blue2);
  color: var(--onblue2);
}

用CSS写一个正方形

.box {
  aspect-ratio: 1;
  width: 100px;
}

主要使用aspect-ratio这一新CSS属性，它表示宽高的比率，即值等于宽/高。在使用它时，只需要再制定宽、高中的任一属性即可。

各浏览器对aspect-ratio的兼容持情况是：Chrome 88+支持, Safari预览阶段, Firefox需要配置支持。