前端微周刊(第2期)：Reducing complexity is always beneficial

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

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

Ryan Dahl在分享Deno

📰 资讯

Node.js和Deno的创造者 Ryan Dahl 的访谈

Ryan Dahl: “Reducing complexity is always beneficial”

Ryan Dahl的访谈作为Node.js和Deno的开创作者，对软件底层架构及生态建设都有很深的理解，这个小的访谈谈了他在这些方面的想法和经验。

Firefox 86引入完全cookie保护机制

Firefox 86的完全cookie保护是内置到ETP（Enhanced Tracking Protection）中的，它将cookie禁锢到创建cookie的网站中，可以防止做追踪的公司利用你在其他网站上的cookie追踪你。

TypeScript 4.2发布

TypeScript 4.2发布，主要更新有：

更智能的Type别名保护；
元祖（Tuple）类型支持开头和中间位置的三点运算符（...)；
in操作符的检查更加严格；
abstract构造签名；
声明缺失辅助函数；
......

Babel v7.13.0发布，2021年的第一个次要版本

Babel v7.13.0发布，这次的更新包括了：

新增一级属性target，可以在多个插件中共享该target；
“激进”属性：assumptions，编译器运行时可以设定多种条件影响产出物；
支持 TC39 Stage2 提议特性：Record 和 Tuple；
支持TypeScript 4.2 和 Flow 的新特性；
@babel/runtime 的package.json中新增exports字段，开发者可以自动选择使用CJS或ESM；
......

Flutter在iOS中出现动画缓慢和掉帧的问题

有网友reddit 热帖讨论Flutter在iOS上出现动画卡顿和掉帧的问题，大致问题是在一些场景中，iOS的flutter应用有明显的动画掉帧现象，体验很糟糕。很多个相关的ISSUE提出来，想要官方给一个明确的修复时间线。而flutter团队则表示是架构设计缺陷，需要重新团队和确定修复方案，不能给出明确的时间。

NASA 开源火星无人机运行代码

NASA 毅力号火星车成功登录火星，一起作业的还有一个无人机，也是首个在火星上运行于Linux系统的无人机。NASA 将该无人机的运行代码在GitHub上开源了，项目叫fprime（F´）。

📖 文章

关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?

关于现代包管理器的深度思考介绍了npm/yarn在包管理上的一些问题，以及pnpm是如何解决这些问题，并带来更好的体验的。

How act() works inside react?

How act() works inside react? React中做自动化测试很不容易，特别是脱离浏览器环境的情况下。因为React的state变化是异步的，所以要等待更新完成之后才能进行验证，act函数就是用来保证你能取到状态更新完的时机。act() 函数是如何工作的？

How to convert any website/webpage into an installable progressive web app (PWA)

How to convert any website/webpage into an installable progressive web app (PWA) PWA的优点显而易见是可以提升应用体验，本文介绍了为网站添加PWA支持的一条龙流程，值得一看。

Writing Well: a must-have skill that no one teaches software developers

Writing Well 作者以自身经验出发，总结了写作为软件工程师在职业发展上带来了哪些正向影响，很值得我们深思。也许你也可以动起来，养成一个经常写作的好习惯，让今后的工作和生活受益。

🛠 工具、插件

生成CSS Animation的工具

几个所见即所得的CSS Animation生成工具的网站，对折腾动画挺方便的。animista、cssanimate、angrytools、coveloping、theappguruz、keyframes。

Turbo Console Log

自动添加有意义的log信息

Turbo Console Log 是一个VS Code插件，很好用的调试神器，它能在log信息里自动添加函数栈和变量信息，有了它你就不用手动去输入各种调试的标识信息了。

Bracket pair colorizer 2

高亮选中括号的效果

Bracket pair colorizer 2也是VS Code插件，它可以让你很清晰地分辨出多层括号的对应括号，不用再迷失在眼花缭乱的括号中了。

🥅 代码片段

`<a>` 标签的属性：ping

<a href="/some/thing" ping="/track">
  Go
<a>

大部分开发者经常使用a标签，却不知道有ping这个属性。这个属性的值是一个URL，当a标签被点击时，浏览器会自动向这个URL发送一个POST请求，常被用来做埋点之类的行为追踪。

Intl.ListFormat 数组拼接字符串的妙用

const items = [
  'Sojourner',
  'Opportunity',
  'Spirit',
  'Curiosity',
  'Perseverance',
]
const formatter = new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
})
console.log(formatter.format(items))
// logs: "Sojourner, Opportunity, Spirit, Curiosity, and Perseverance"

Intl.ListFormat 是个成本非常低的支持国际化的API，它可以根据参数生成不同语言的“链接符”，如把ListFormat的第一个参数设置成zh，则“连接符”就是“和”。Listify a JavaScript Array这篇文章可以带你更好的理解这个API。需要注意的是，目前只有苹果家的浏览器（桌面端和移动端）不支持这个API🧐。

💻 前端岗位

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

滴滴出行-车服终端部门：高级前端开发工程师

岗位竞争力：

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

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

- End -

文章首发于微信公众号：前端微志。

想要第一时间收到文章推送，更有前端前瞻性技术分享，请微信搜索关注“前端微志”，